From ad4f5c7c9555f65d6b889e85427ba3fdfa4e7159 Mon Sep 17 00:00:00 2001
From: Serhii Palamarchuk <serhii.palamarchuk@chess.com>
Date: Tue, 30 May 2023 19:57:57 +0300
Subject: [PATCH 01/36] Update NextJs link (#6053)

---
 .../reference/react-dom/server/renderToPipeableStream.md        | 2 +-
 .../reference/react-dom/server/renderToReadableStream.md        | 2 +-
 src/content/reference/react/Suspense.md                         | 2 +-
 src/content/reference/react/useDeferredValue.md                 | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md
index dee690372..6a9021e02 100644
--- a/src/content/reference/react-dom/server/renderToPipeableStream.md
+++ b/src/content/reference/react-dom/server/renderToPipeableStream.md
@@ -286,7 +286,7 @@ Streaming does not need to wait for React itself to load in the browser, or for
 
 **Only Suspense-enabled data sources will activate the Suspense component.** They include:
 
-- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/advanced-features/react-18)
+- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
 - Lazy-loading component code with [`lazy`](/reference/react/lazy)
 
 Suspense **does not** detect when data is fetched inside an Effect or event handler.
diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md
index d6d5b3264..8ef42aa71 100644
--- a/src/content/reference/react-dom/server/renderToReadableStream.md
+++ b/src/content/reference/react-dom/server/renderToReadableStream.md
@@ -285,7 +285,7 @@ Streaming does not need to wait for React itself to load in the browser, or for
 
 **Only Suspense-enabled data sources will activate the Suspense component.** They include:
 
-- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/advanced-features/react-18)
+- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
 - Lazy-loading component code with [`lazy`](/reference/react/lazy)
 
 Suspense **does not** detect when data is fetched inside an Effect or event handler.
diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index f24c98c7d..27add6035 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -252,7 +252,7 @@ async function getAlbums() {
 
 **Only Suspense-enabled data sources will activate the Suspense component.** They include:
 
-- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/advanced-features/react-18)
+- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
 - Lazy-loading component code with [`lazy`](/reference/react/lazy)
 
 Suspense **does not** detect when data is fetched inside an Effect or event handler.
diff --git a/src/content/reference/react/useDeferredValue.md b/src/content/reference/react/useDeferredValue.md
index 3f2a8a5d9..f25054542 100644
--- a/src/content/reference/react/useDeferredValue.md
+++ b/src/content/reference/react/useDeferredValue.md
@@ -84,7 +84,7 @@ During updates, the <CodeStep step={2}>deferred value</CodeStep> will "lag behin
 
 This example assumes you use one of Suspense-enabled data sources:
 
-- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/advanced-features/react-18)
+- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
 - Lazy-loading component code with [`lazy`](/reference/react/lazy)
 
 [Learn more about Suspense and its limitations.](/reference/react/Suspense)

From 4184c0f5608ef80d6cec4e1c42dfa9c6f3c9ad92 Mon Sep 17 00:00:00 2001
From: J <124119483+escwxyz@users.noreply.github.com>
Date: Wed, 31 May 2023 16:15:21 +0200
Subject: [PATCH 02/36] Fix a missing word in useLayoutEffect (#6078)

---
 src/content/reference/react/useLayoutEffect.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md
index d30ebbd16..5af3ec5a6 100644
--- a/src/content/reference/react/useLayoutEffect.md
+++ b/src/content/reference/react/useLayoutEffect.md
@@ -26,7 +26,7 @@ useLayoutEffect(setup, dependencies?)
 
 ### `useLayoutEffect(setup, dependencies?)` {/*useinsertioneffect*/}
 
-Call `useLayoutEffect` perform the layout measurements before the browser repaints the screen:
+Call `useLayoutEffect` to perform the layout measurements before the browser repaints the screen:
 
 ```js
 import { useState, useRef, useLayoutEffect } from 'react';

From ca93140eb98a7ff4364a719075fccea980c55b55 Mon Sep 17 00:00:00 2001
From: Ahmed Abdelbaset <A7med3bdulBaset@gmail.com>
Date: Fri, 2 Jun 2023 14:42:16 +0300
Subject: [PATCH 03/36] Fix option's mdn link (#6080)

---
 src/content/reference/react-dom/components/option.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react-dom/components/option.md b/src/content/reference/react-dom/components/option.md
index 8d930523f..84725854c 100644
--- a/src/content/reference/react-dom/components/option.md
+++ b/src/content/reference/react-dom/components/option.md
@@ -23,7 +23,7 @@ The [built-in browser `<option>` component](https://developer.mozilla.org/en-US/
 
 ### `<option>` {/*option*/}
 
-The [built-in browser `<option>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) lets you render an option inside a [`<select>`](/reference/react-dom/components/select) box.
+The [built-in browser `<option>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) lets you render an option inside a [`<select>`](/reference/react-dom/components/select) box.
 
 ```js
 <select>

From 8313857315171de577230ade4cf870f75ee12ff0 Mon Sep 17 00:00:00 2001
From: Ahmed Abdelbaset <A7med3bdulBaset@gmail.com>
Date: Mon, 5 Jun 2023 15:36:56 +0300
Subject: [PATCH 04/36] Fix(github-actions): Update gh-actions dependencies to
 versions that utilize Node.js v16 (#6084)

* Update site_lint.yml

* Update site_lint.yml
---
 .github/workflows/site_lint.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/site_lint.yml b/.github/workflows/site_lint.yml
index 560e22643..34ca6d7b8 100644
--- a/.github/workflows/site_lint.yml
+++ b/.github/workflows/site_lint.yml
@@ -16,12 +16,12 @@ jobs:
     steps:
       - uses: actions/checkout@v1
       - name: Use Node.js 20.x
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: 20.x
 
       - name: Install deps and build (with cache)
-        uses: bahmutov/npm-install@v1.7.10
+        uses: bahmutov/npm-install@v1.8.32
 
       - name: Lint codebase
         run: yarn ci-check

From 940e963798533168d9966ce70aaa05356dfa3f95 Mon Sep 17 00:00:00 2001
From: Cole Milne <colemilne54@gmail.com>
Date: Thu, 8 Jun 2023 11:59:56 -0600
Subject: [PATCH 05/36] Move recent conferences from 'Upcoming' to 'Past'
 section (#6089)

---
 src/content/community/conferences.md | 60 ++++++++++++++--------------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index 792dbeecf..06711db6d 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -10,36 +10,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
 
 ## Upcoming Conferences {/*upcoming-conferences*/}
 
-### Reactathon 2023 {/*reactathon-2023*/}
-May 2 - 3, 2023. San Francisco, CA, USA
-
-[Website](https://reactathon.com) - [Twitter](https://twitter.com/reactathon) - [YouTube](https://www.youtube.com/realworldreact)
-
-### RemixConf 2023 {/*remixconf-2023*/}
-May, 2023. Salt Lake City, UT
-
-[Website](https://remix.run/conf/2023) - [Twitter](https://twitter.com/remix_run)
-
-### App.js Conf 2023 {/*appjs-conf-2023*/}
-May 10 - 12, 2023. In-person in Kraków, Poland + remote
-
-[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
-
-### Chain React 2023 {/*chain-react-2023*/}
-May 17 - 19, 2023. Portland, OR, USA
-
-[Website](https://chainreactconf.com/) - [Twitter](https://twitter.com/ChainReactConf) - [Facebook](https://www.facebook.com/ChainReactConf/) - [Youtube](https://www.youtube.com/channel/UCwpSzVt7QpLDbCnPXqR97-g/playlists)
-
-### Render(ATL) 2023 🍑 {/*renderatl-2023-*/}
-May 31 - June 2, 2023. Atlanta, GA, USA
-
-[Website](https://renderatl.com) - [Discord](https://www.renderatl.com/discord) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) - [LinkedIn](https://www.linkedin.com/company/renderatl) - [Podcast](https://www.renderatl.com/culture-and-code#/)
-
-### React Summit 2023 {/*react-summit-2023*/}
-June 2 & 6, 2023. In-person in Amsterdam, Netherlands + remote first interactivity (hybrid event)
-
-[Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://portal.gitnation.org/events/react-summit-2023)
-
 ### React Norway 2023 {/*react-norway-2023*/}
 June 16th, 2023. Larvik, Norway
 
@@ -82,6 +52,36 @@ December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity
 
 ## Past Conferences {/*past-conferences*/}
 
+### React Summit 2023 {/*react-summit-2023*/}
+June 2 & 6, 2023. In-person in Amsterdam, Netherlands + remote first interactivity (hybrid event)
+
+[Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://portal.gitnation.org/events/react-summit-2023)
+
+### Render(ATL) 2023 🍑 {/*renderatl-2023-*/}
+May 31 - June 2, 2023. Atlanta, GA, USA
+
+[Website](https://renderatl.com) - [Discord](https://www.renderatl.com/discord) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) - [LinkedIn](https://www.linkedin.com/company/renderatl) - [Podcast](https://www.renderatl.com/culture-and-code#/)
+
+### Chain React 2023 {/*chain-react-2023*/}
+May 17 - 19, 2023. Portland, OR, USA
+
+[Website](https://chainreactconf.com/) - [Twitter](https://twitter.com/ChainReactConf) - [Facebook](https://www.facebook.com/ChainReactConf/) - [Youtube](https://www.youtube.com/channel/UCwpSzVt7QpLDbCnPXqR97-g/playlists)
+
+### App.js Conf 2023 {/*appjs-conf-2023*/}
+May 10 - 12, 2023. In-person in Kraków, Poland + remote
+
+[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
+
+### RemixConf 2023 {/*remixconf-2023*/}
+May, 2023. Salt Lake City, UT
+
+[Website](https://remix.run/conf/2023) - [Twitter](https://twitter.com/remix_run)
+
+### Reactathon 2023 {/*reactathon-2023*/}
+May 2 - 3, 2023. San Francisco, CA, USA
+
+[Website](https://reactathon.com) - [Twitter](https://twitter.com/reactathon) - [YouTube](https://www.youtube.com/realworldreact)
+
 ### React Miami 2023 {/*react-miami-2023*/}
 April 20 - 21, 2023. Miami, FL, USA
 

From 9a1e1c61fcdaf7177e89494bd70bfdc7900e37ad Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Fri, 9 Jun 2023 09:48:21 +0200
Subject: [PATCH 06/36] Fix incorrect inner component reference (#6044)

The inner component is `EditForm`, not `EditContact`.
---
 src/content/learn/you-might-not-need-an-effect.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md
index 05f053be2..a3b33d3a7 100644
--- a/src/content/learn/you-might-not-need-an-effect.md
+++ b/src/content/learn/you-might-not-need-an-effect.md
@@ -1438,7 +1438,7 @@ It would be nice if there was a way to tell React that when `savedContact.id` is
 
 <Solution>
 
-Split the `EditContact` component in two. Move all the form state into the inner `EditForm` component. Export the outer `EditContact` component, and make it pass `savedContact.id` as the `key` to the inner `EditContact` component. As a result, the inner `EditForm` component resets all of the form state and recreates the DOM whenever you select a different contact.
+Split the `EditContact` component in two. Move all the form state into the inner `EditForm` component. Export the outer `EditContact` component, and make it pass `savedContact.id` as the `key` to the inner `EditForm` component. As a result, the inner `EditForm` component resets all of the form state and recreates the DOM whenever you select a different contact.
 
 <Sandpack>
 

From f5ffb3f0fb67565927fc07789a0ebe04dbac33f7 Mon Sep 17 00:00:00 2001
From: yuta-ike <38308823+yuta-ike@users.noreply.github.com>
Date: Mon, 26 Jun 2023 14:55:19 +0900
Subject: [PATCH 07/36] fix: broken link (#6115)

---
 src/content/reference/react/useRef.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/useRef.md b/src/content/reference/react/useRef.md
index bdec1ec8d..4af7e9535 100644
--- a/src/content/reference/react/useRef.md
+++ b/src/content/reference/react/useRef.md
@@ -228,7 +228,7 @@ function MyComponent() {
 
 If you *have to* read [or write](/reference/react/useState#storing-information-from-previous-renders) something during rendering, [use state](/reference/react/useState) instead.
 
-When you break these rules, your component might still work, but most of the newer features we're adding to React will rely on these expectations. Read more about [keeping your components pure.](/learn/keeping-components-pure#where-you-can-cause-side-effects)
+When you break these rules, your component might still work, but most of the newer features we're adding to React will rely on these expectations. Read more about [keeping your components pure.](/learn/keeping-components-pure#where-you-_can_-cause-side-effects)
 
 </Pitfall>
 

From 292534e97563f13e66fe7c9f004a637c97ca51b9 Mon Sep 17 00:00:00 2001
From: Sophie Alpert <git@sophiebits.com>
Date: Fri, 30 Jun 2023 11:59:55 -0700
Subject: [PATCH 08/36] Add basic reference pages for use client and server
 (#5976)

* Add basic reference pages for use client and server

I guess this turned into a bit more of an FAQ but I think it's useful to have this written down in a canonical place.

* Oops, push final tweaks
---
 src/content/reference/react/directives.md | 16 +++++++
 src/content/reference/react/use-client.md | 57 +++++++++++++++++++++++
 src/content/reference/react/use-server.md | 48 +++++++++++++++++++
 src/sidebarReference.json                 | 14 ++++++
 4 files changed, 135 insertions(+)
 create mode 100644 src/content/reference/react/directives.md
 create mode 100644 src/content/reference/react/use-client.md
 create mode 100644 src/content/reference/react/use-server.md

diff --git a/src/content/reference/react/directives.md b/src/content/reference/react/directives.md
new file mode 100644
index 000000000..49b3d624e
--- /dev/null
+++ b/src/content/reference/react/directives.md
@@ -0,0 +1,16 @@
+---
+title: "Directives"
+---
+
+<Intro>
+
+React uses two directives to provide instructions to [bundlers compatible with React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks).
+
+</Intro>
+
+---
+
+## Source code directives {/*source-code-directives*/}
+
+* [`'use client'`](/reference/react/use-client) marks source files whose components execute on the client.
+* [`'use server'`](/reference/react/use-server) marks server-side functions that can be called from client-side code.
\ No newline at end of file
diff --git a/src/content/reference/react/use-client.md b/src/content/reference/react/use-client.md
new file mode 100644
index 000000000..4fc5d7ace
--- /dev/null
+++ b/src/content/reference/react/use-client.md
@@ -0,0 +1,57 @@
+---
+title: "'use client'"
+---
+
+<Note>
+
+These directives are needed only if you're [using React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) or building a library compatible with them.
+
+</Note>
+
+
+<Intro>
+
+`'use client'` marks source files whose components execute on the client.
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `'use client'` {/*use-client*/}
+
+Add `'use client';` at the very top of a file to mark that the file (including any child components it uses) executes on the client, regardless of where it's imported.
+
+```js
+'use client';
+
+import { useState } from 'react';
+
+export default function RichTextEditor(props) {
+  // ...
+```
+
+When a file marked `'use client'` is imported from a server component, [compatible bundlers](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) will treat the import as the "cut-off point" between server-only code and client code. Components at or below this point in the module graph can use client-only React features like [`useState`](/reference/react/useState).
+
+#### Caveats {/*caveats*/}
+
+* It's not necessary to add `'use client'` to every file that uses client-only React features, only the files that are imported from server component files. `'use client'` denotes the _boundary_ between server-only and client code; any components further down the tree will automatically be executed on the client. In order to be rendered from server components, components exported from `'use client'` files must have serializable props.
+* When a `'use client'` file is imported from a server file, the imported values can be rendered as a React component or passed via props to a client component. Any other use will throw an exception.
+* When a `'use client'` file is imported from another client file, the directive has no effect. This allows you to write client-only components that are simultaneously usable from server and client components.
+* All the code in `'use client'` file as well as any modules it imports (directly or indirectly) will become a part of the client module graph and must be sent to and executed by the client in order to be rendered by the browser. To reduce client bundle size and take full advantage of the server, move state (and the `'use client'` directives) lower in the tree when possible, and pass rendered server components [as children](/learn/passing-props-to-a-component#passing-jsx-as-children) to client components.
+* Because props are serialized across the server–client boundary, note that the placement of these directives can affect the amount of data sent to the client; avoid data structures that are larger than necessary.
+* Components like a `<MarkdownRenderer>` that use neither server-only nor client-only features should generally not be marked with `'use client'`. That way, they can render exclusively on the server when used from a server component, but they'll be added to the client bundle when used from a client component.
+* Libraries published to npm should include `'use client'` on exported React components that can be rendered with serializable props that use client-only React features, to allow those components to be imported and rendered by server components. Otherwise, users will need to wrap library components in their own `'use client'` files which can be cumbersome and prevents the library from moving logic to the server later. When publishing prebundled files to npm, ensure that `'use client'` source files end up in a bundle marked with `'use client'`, separate from any bundle containing exports that can be used directly on the server.
+* Client components will still run as part of server-side rendering (SSR) or build-time static site generation (SSG), which act as clients to transform React components' initial render output to HTML that can be rendered before JavaScript bundles are downloaded. But they can't use server-only features like reading directly from a database.
+* Directives like `'use client'` must be at the very beginning of a file, above any imports or other code (comments above directives are OK). They must be written with single or double quotes, not backticks. (The `'use xyz'` directive format somewhat resembles the `useXyz()` Hook naming convention, but the similarity is coincidental.)
+
+## Usage {/*usage*/}
+
+<Wip>
+
+This section is incomplete. See also the [Next.js documentation for Server Components](https://beta.nextjs.org/docs/rendering/server-and-client-components).
+
+</Wip>
diff --git a/src/content/reference/react/use-server.md b/src/content/reference/react/use-server.md
new file mode 100644
index 000000000..61f895cab
--- /dev/null
+++ b/src/content/reference/react/use-server.md
@@ -0,0 +1,48 @@
+---
+title: "'use server'"
+---
+
+<Wip>
+
+This section is incomplete.
+
+These directives are needed only if you're [using React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) or building a library compatible with them.
+
+</Wip>
+
+
+<Intro>
+
+`'use server'` marks server-side functions that can be called from client-side code.
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `'use server'` {/*use-server*/}
+
+Add `'use server';` at the very top of an async function to mark that the function can be executed by the client.
+
+```js
+async function addToCart(data) {
+  'use server';
+  // ...
+}
+
+// <ProductDetailPage addToCart={addToCart} />
+```
+
+This function can be passed to the client. When called on the client, it will make a network request to the server that includes a serialized copy of any arguments passed. If the server function returns a value, that value will be serialized and returned to the client.
+
+Alternatively, add `'use server';` at the very top of a file to mark all exports within that file as async server functions that can be used anywhere, including imported in client component files.
+
+#### Caveats {/*caveats*/}
+
+* Remember that parameters to functions marked with `'use server'` are fully client-controlled. For security, always treat them as untrusted input, making sure to validate and escape the arguments as appropriate.
+* To avoid the confusion that might result from mixing client- and server-side code in the same file, `'use server'` can only be used in server-side files; the resulting functions can be passed to client components through props.
+* Because the underlying network calls are always asynchronous, `'use server'` can be used only on async functions.
+* Directives like `'use server'` must be at the very beginning of their function or file, above any other code including imports (comments above directives are OK). They must be written with single or double quotes, not backticks. (The `'use xyz'` directive format somewhat resembles the `useXyz()` Hook naming convention, but the similarity is coincidental.)
diff --git a/src/sidebarReference.json b/src/sidebarReference.json
index f009cca0e..5809e8fb6 100644
--- a/src/sidebarReference.json
+++ b/src/sidebarReference.json
@@ -120,6 +120,20 @@
         }
       ]
     },
+    {
+      "title": "Directives",
+      "path": "/reference/react/directives",
+      "routes": [
+        {
+          "title": "'use client'",
+          "path": "/reference/react/use-client"
+        },
+        {
+          "title": "'use server'",
+          "path": "/reference/react/use-server"
+        }
+      ]
+    },
     {
       "hasSectionHeader": true,
       "sectionHeader": "react-dom@18.2.0"

From a30e1f954dce2a67985caa8b2376a1839dbfa6cf Mon Sep 17 00:00:00 2001
From: Brandon Dail <aweary@users.noreply.github.com>
Date: Mon, 10 Jul 2023 03:26:39 -0500
Subject: [PATCH 09/36] update link to fault tolerance blog post (#6142)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

this is the canonical link now 🫡
---
 src/content/reference/react/Component.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md
index 006ade5d8..569bf19f2 100644
--- a/src/content/reference/react/Component.md
+++ b/src/content/reference/react/Component.md
@@ -1393,7 +1393,7 @@ Then you can wrap a part of your component tree with it:
 
 If `Profile` or its child component throws an error, `ErrorBoundary` will "catch" that error, display a fallback UI with the error message you've provided, and send a production error report to your error reporting service.
 
-You don't need to wrap every component into a separate error boundary. When you think about the [granularity of error boundaries,](https://aweary.dev/fault-tolerance-react/) consider where it makes sense to display an error message. For example, in a messaging app, it makes sense to place an error boundary around the list of conversations. It also makes sense to place one around every individual message. However, it wouldn't make sense to place a boundary around every avatar.
+You don't need to wrap every component into a separate error boundary. When you think about the [granularity of error boundaries,](https://www.brandondail.com/posts/fault-tolerance-react) consider where it makes sense to display an error message. For example, in a messaging app, it makes sense to place an error boundary around the list of conversations. It also makes sense to place one around every individual message. However, it wouldn't make sense to place a boundary around every avatar.
 
 <Note>
 

From b9eea4da28db66591ae5935898f98acdf009a0ad Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@fb.com>
Date: Fri, 21 Jul 2023 19:24:36 -0400
Subject: [PATCH 10/36] Fix lint warnings (#6174)

---
 .eslintrc                                     |  3 +-
 src/components/Layout/HomeContent.js          | 32 +++++++------------
 src/components/Layout/Sidebar/SidebarLink.tsx |  1 +
 .../Layout/SidebarNav/SidebarNav.tsx          |  1 -
 src/components/Layout/TopNav/TopNav.tsx       |  3 +-
 src/components/Layout/getRouteMeta.tsx        |  2 +-
 src/components/MDX/BlogCard.tsx               |  1 +
 src/components/MDX/MDXComponents.tsx          |  3 +-
 src/components/MDX/Sandpack/CustomPreset.tsx  |  1 -
 src/components/MDX/Sandpack/NavigationBar.tsx |  8 +++--
 src/components/MDX/Sandpack/Preview.tsx       |  1 -
 src/components/MDX/TeamMember.tsx             |  1 -
 src/components/Search.tsx                     |  3 +-
 src/hooks/usePendingRoute.ts                  |  2 +-
 14 files changed, 27 insertions(+), 35 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 147e54607..f617dea26 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -5,7 +5,8 @@
   "plugins": ["@typescript-eslint"],
   "rules": {
     "no-unused-vars": "off",
-    "@typescript-eslint/no-unused-vars": "warn"
+    "@typescript-eslint/no-unused-vars": ["error", { "varsIgnorePattern": "^_" }],
+    "react-hooks/exhaustive-deps": "error"
   },
   "env": {
     "node": true,
diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index ba3ff6ef1..e1b1b440d 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -8,12 +8,10 @@ import {
   useState,
   useContext,
   useId,
-  Fragment,
   Suspense,
   useEffect,
   useRef,
   useTransition,
-  useReducer,
 } from 'react';
 import cn from 'classnames';
 import NextLink from 'next/link';
@@ -26,7 +24,6 @@ import {IconSearch} from 'components/Icon/IconSearch';
 import {Logo} from 'components/Logo';
 import Link from 'components/MDX/Link';
 import CodeBlock from 'components/MDX/CodeBlock';
-import {IconNavArrow} from 'components/Icon/IconNavArrow';
 import {ExternalLink} from 'components/ExternalLink';
 import sidebarBlog from '../../sidebarBlog.json';
 
@@ -67,14 +64,6 @@ function Para({children}) {
   );
 }
 
-function Left({children}) {
-  return (
-    <div className="px-5 lg:px-0 max-w-4xl lg:text-left text-white text-opacity-80">
-      {children}
-    </div>
-  );
-}
-
 function Center({children}) {
   return (
     <div className="px-5 lg:px-0 max-w-4xl lg:text-center text-white text-opacity-80 flex flex-col items-center justify-center">
@@ -90,19 +79,23 @@ function FullBleed({children}) {
 }
 
 function CurrentTime() {
-  const msPerMinute = 60 * 1000;
-  const date = new Date();
-  let nextMinute = Math.floor(+date / msPerMinute + 1) * msPerMinute;
-
+  const [date, setDate] = useState(new Date());
   const currentTime = date.toLocaleTimeString([], {
     hour: 'numeric',
     minute: 'numeric',
   });
-  let [, forceUpdate] = useReducer((n) => n + 1, 0);
   useEffect(() => {
-    const timeout = setTimeout(forceUpdate, nextMinute - Date.now());
+    const msPerMinute = 60 * 1000;
+    let nextMinute = Math.floor(+date / msPerMinute + 1) * msPerMinute;
+
+    const timeout = setTimeout(() => {
+      if (Date.now() > nextMinute) {
+        setDate(new Date());
+      }
+    }, nextMinute - Date.now());
     return () => clearTimeout(timeout);
   }, [date]);
+
   return <span suppressHydrationWarning>{currentTime}</span>;
 }
 
@@ -831,7 +824,7 @@ function ExampleLayout({
         .filter((s) => s !== null);
       setOverlayStyles(nextOverlayStyles);
     }
-  }, [activeArea]);
+  }, [activeArea, hoverTopOffset]);
   return (
     <div className="lg:pl-10 lg:pr-5 w-full">
       <div className="mt-12 mb-2 lg:my-16 max-w-7xl mx-auto flex flex-col w-full lg:rounded-2xl lg:bg-card lg:dark:bg-card-dark">
@@ -1211,7 +1204,7 @@ function useNestedScrollLock(ref) {
       window.removeEventListener('scroll', handleScroll);
       clearInterval(interval);
     };
-  }, []);
+  }, [ref]);
 }
 
 function ExamplePanel({
@@ -1220,7 +1213,6 @@ function ExamplePanel({
   noShadow,
   height,
   contentMarginTop,
-  activeArea,
 }) {
   return (
     <div
diff --git a/src/components/Layout/Sidebar/SidebarLink.tsx b/src/components/Layout/Sidebar/SidebarLink.tsx
index 050bf7c71..6222104c3 100644
--- a/src/components/Layout/Sidebar/SidebarLink.tsx
+++ b/src/components/Layout/Sidebar/SidebarLink.tsx
@@ -54,6 +54,7 @@ export function SidebarLink({
       ref={ref}
       title={title}
       target={target}
+      passHref
       aria-current={selected ? 'page' : undefined}
       className={cn(
         'p-2 pr-2 w-full rounded-none lg:rounded-r-2xl text-left hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
diff --git a/src/components/Layout/SidebarNav/SidebarNav.tsx b/src/components/Layout/SidebarNav/SidebarNav.tsx
index 24fe86fa5..525fddfb4 100644
--- a/src/components/Layout/SidebarNav/SidebarNav.tsx
+++ b/src/components/Layout/SidebarNav/SidebarNav.tsx
@@ -5,7 +5,6 @@
 import {Suspense} from 'react';
 import * as React from 'react';
 import cn from 'classnames';
-import {Search} from 'components/Search';
 import {Feedback} from '../Feedback';
 import {SidebarRouteTree} from '../Sidebar/SidebarRouteTree';
 import type {RouteItem} from '../getRouteMeta';
diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx
index 0157f1ba5..56522665e 100644
--- a/src/components/Layout/TopNav/TopNav.tsx
+++ b/src/components/Layout/TopNav/TopNav.tsx
@@ -22,9 +22,8 @@ import {IconSearch} from 'components/Icon/IconSearch';
 import {Search} from 'components/Search';
 import {Logo} from '../../Logo';
 import {Feedback} from '../Feedback';
-import {SidebarRouteTree} from '../Sidebar/SidebarRouteTree';
+import {SidebarRouteTree} from '../Sidebar';
 import type {RouteItem} from '../getRouteMeta';
-import {SidebarLink} from '../Sidebar';
 
 declare global {
   interface Window {
diff --git a/src/components/Layout/getRouteMeta.tsx b/src/components/Layout/getRouteMeta.tsx
index 8cb0e0993..87583ac70 100644
--- a/src/components/Layout/getRouteMeta.tsx
+++ b/src/components/Layout/getRouteMeta.tsx
@@ -68,7 +68,7 @@ export function getRouteMeta(cleanedPath: string, routeTree: RouteItem) {
     currentIndex: 0,
   };
   buildRouteMeta(cleanedPath, routeTree, ctx);
-  const {currentIndex, ...meta} = ctx;
+  const {currentIndex: _, ...meta} = ctx;
   return {
     ...meta,
     breadcrumbs: breadcrumbs.length > 0 ? breadcrumbs : [routeTree],
diff --git a/src/components/MDX/BlogCard.tsx b/src/components/MDX/BlogCard.tsx
index ba610b111..1a16013a2 100644
--- a/src/components/MDX/BlogCard.tsx
+++ b/src/components/MDX/BlogCard.tsx
@@ -18,6 +18,7 @@ function BlogCard({title, badge, date, icon, url, children}: BlogCardProps) {
   return (
     <Link
       href={url as string}
+      passHref
       className="block h-full w-full rounded-2xl outline-none focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark">
       <div className="justify-between p-5 sm:p-5 cursor-pointer w-full h-full flex flex-col flex-1 shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10  hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10 rounded-2xl text-xl text-primary dark:text-primary-dark leading-relaxed">
         <div className="flex flex-row gap-3 w-full">
diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx
index ba531c9f0..8ddf371c9 100644
--- a/src/components/MDX/MDXComponents.tsx
+++ b/src/components/MDX/MDXComponents.tsx
@@ -369,7 +369,8 @@ function YouTubeIframe(props: any) {
 }
 
 function Image(props: any) {
-  return <img className="max-w-[calc(min(700px,100%))]" {...props} />;
+  const {alt, ...rest} = props;
+  return <img alt={alt} className="max-w-[calc(min(700px,100%))]" {...rest} />;
 }
 
 export const MDXComponents = {
diff --git a/src/components/MDX/Sandpack/CustomPreset.tsx b/src/components/MDX/Sandpack/CustomPreset.tsx
index 6e0862564..46e0ca255 100644
--- a/src/components/MDX/Sandpack/CustomPreset.tsx
+++ b/src/components/MDX/Sandpack/CustomPreset.tsx
@@ -54,7 +54,6 @@ export const CustomPreset = memo(function CustomPreset({
 
 const SandboxShell = memo(function SandboxShell({
   showDevTools,
-  onDevToolsLoad,
   devToolsLoaded,
   providedFiles,
   lintErrors,
diff --git a/src/components/MDX/Sandpack/NavigationBar.tsx b/src/components/MDX/Sandpack/NavigationBar.tsx
index 8c884a5d8..94e2eb4b3 100644
--- a/src/components/MDX/Sandpack/NavigationBar.tsx
+++ b/src/components/MDX/Sandpack/NavigationBar.tsx
@@ -90,15 +90,17 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
     } else {
       return;
     }
-  }, [isMultiFile]);
+
+    // Note: in a real useEvent, onContainerResize would be omitted.
+  }, [isMultiFile, onContainerResize]);
 
   const handleReset = () => {
     /**
      * resetAllFiles must come first, otherwise
-     * the previous content will appears for a second
+     * the previous content will appear for a second
      * when the iframe loads.
      *
-     * Plus, it should only prompts if there's any file changes
+     * Plus, it should only prompt if there's any file changes
      */
     if (
       sandpack.editorState === 'dirty' &&
diff --git a/src/components/MDX/Sandpack/Preview.tsx b/src/components/MDX/Sandpack/Preview.tsx
index 2e140360c..6b7a6d183 100644
--- a/src/components/MDX/Sandpack/Preview.tsx
+++ b/src/components/MDX/Sandpack/Preview.tsx
@@ -49,7 +49,6 @@ export function Preview({
     errorScreenRegisteredRef,
     openInCSBRegisteredRef,
     loadingScreenRegisteredRef,
-    status,
   } = sandpack;
 
   if (
diff --git a/src/components/MDX/TeamMember.tsx b/src/components/MDX/TeamMember.tsx
index 887e9f691..0db067e10 100644
--- a/src/components/MDX/TeamMember.tsx
+++ b/src/components/MDX/TeamMember.tsx
@@ -7,7 +7,6 @@ import Image from 'next/image';
 import {IconTwitter} from '../Icon/IconTwitter';
 import {IconGitHub} from '../Icon/IconGitHub';
 import {ExternalLink} from '../ExternalLink';
-import {IconNewPage} from 'components/Icon/IconNewPage';
 import {H3} from './Heading';
 import {IconLink} from 'components/Icon/IconLink';
 
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index 2a9743ec3..8bc47297a 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -5,11 +5,10 @@
 import Head from 'next/head';
 import Link from 'next/link';
 import Router from 'next/router';
-import {lazy, useCallback, useEffect} from 'react';
+import {lazy, useEffect} from 'react';
 import * as React from 'react';
 import {createPortal} from 'react-dom';
 import {siteConfig} from 'siteConfig';
-import cn from 'classnames';
 
 export interface SearchProps {
   appId?: string;
diff --git a/src/hooks/usePendingRoute.ts b/src/hooks/usePendingRoute.ts
index 73ff0b8af..229a36e64 100644
--- a/src/hooks/usePendingRoute.ts
+++ b/src/hooks/usePendingRoute.ts
@@ -33,7 +33,7 @@ const usePendingRoute = () => {
       events.off('routeChangeComplete', handleRouteChangeComplete);
       clearTimeout(routeTransitionTimer);
     };
-  }, []);
+  }, [events]);
 
   return pendingRoute;
 };

From d86cfc47634a3a3b94f683e99075b9815ac35a30 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@fb.com>
Date: Mon, 24 Jul 2023 10:05:08 -0400
Subject: [PATCH 11/36] Update useInsertionEffect docs (#6172)

---
 src/content/reference/react/useInsertionEffect.md | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md
index 175b4476f..0238facf7 100644
--- a/src/content/reference/react/useInsertionEffect.md
+++ b/src/content/reference/react/useInsertionEffect.md
@@ -10,7 +10,7 @@ title: useInsertionEffect
 
 <Intro>
 
-`useInsertionEffect` is a version of [`useEffect`](/reference/react/useEffect) that fires before any DOM mutations.
+`useInsertionEffect` allows inserting elements into the DOM before any layout effects fire.
 
 ```js
 useInsertionEffect(setup, dependencies?)
@@ -26,7 +26,7 @@ useInsertionEffect(setup, dependencies?)
 
 ### `useInsertionEffect(setup, dependencies?)` {/*useinsertioneffect*/}
 
-Call `useInsertionEffect` to insert the styles before any DOM mutations:
+Call `useInsertionEffect` to insert styles before any effects fire that may need to read layout:
 
 ```js
 import { useInsertionEffect } from 'react';
@@ -44,7 +44,7 @@ function useCSS(rule) {
 
 #### Parameters {/*parameters*/}
 
-* `setup`: The function with your Effect's logic. Your setup function may also optionally return a *cleanup* function. Before your component is added to the DOM, React will run your setup function. After every re-render with changed dependencies, React will first run the cleanup function (if you provided it) with the old values, and then run your setup function with the new values. Before your component is removed from the DOM, React will run your cleanup function.
+* `setup`: The function with your Effect's logic. Your setup function may also optionally return a *cleanup* function. When your component is added to the DOM, but before any layout effects fire, React will run your setup function. After every re-render with changed dependencies, React will first run the cleanup function (if you provided it) with the old values, and then run your setup function with the new values. When your component is removed from the DOM, React will run your cleanup function.
  
 * **optional** `dependencies`: The list of all reactive values referenced inside of the `setup` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison algorithm. If you don't specify the dependencies at all, your Effect will re-run after every re-render of the component.
 
@@ -56,8 +56,9 @@ function useCSS(rule) {
 
 * Effects only run on the client. They don't run during server rendering.
 * You can't update state from inside `useInsertionEffect`.
-* By the time `useInsertionEffect` runs, refs are not attached yet, and DOM is not yet updated.
-
+* By the time `useInsertionEffect` runs, refs are not attached yet.
+* `useInsertionEffect` may run either before or after the DOM has been updated. You shouldn't rely on the DOM being updated at any particular time.
+* Unlike other types of Effects, which fire cleanup for every Effect and then setup for every Effect, `useInsertionEffect` will fire both cleanup and setup one component at a time. This results in an "interleaving" of the cleanup and setup functions.
 ---
 
 ## Usage {/*usage*/}
@@ -87,7 +88,7 @@ If you use CSS-in-JS, we recommend a combination of the first two approaches (CS
 
 The first problem is not solvable, but `useInsertionEffect` helps you solve the second problem.
 
-Call `useInsertionEffect` to insert the styles before any DOM mutations:
+Call `useInsertionEffect` to insert the styles before any layout effects fire:
 
 ```js {4-11}
 // Inside your CSS-in-JS library

From cf4ad1999a766f417bee506f11b37a6d05ac9342 Mon Sep 17 00:00:00 2001
From: Soichiro Miki <smiki-tky@umin.ac.jp>
Date: Tue, 25 Jul 2023 09:57:55 +0900
Subject: [PATCH 12/36] Fix typo: "server-only" to "client-only" (#6164)

---
 src/content/reference/react/Suspense.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index 27add6035..dd9312055 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -2513,7 +2513,7 @@ However, now imagine you're navigating between two different user profiles. In t
 
 ---
 
-### Providing a fallback for server errors and server-only content {/*providing-a-fallback-for-server-errors-and-server-only-content*/}
+### Providing a fallback for server errors and client-only content {/*providing-a-fallback-for-server-errors-and-client-only-content*/}
 
 If you use one of the [streaming server rendering APIs](/reference/react-dom/server) (or a framework that relies on them), React will also use your `<Suspense>` boundaries to handle errors on the server. If a component throws an error on the server, React will not abort the server render. Instead, it will find the closest `<Suspense>` component above it and include its fallback (such as a spinner) into the generated server HTML. The user will see a spinner at first.
 

From a132d8f35597d0380f0f738c1b095b5dc56736ba Mon Sep 17 00:00:00 2001
From: Soichiro Miki <smiki-tky@umin.ac.jp>
Date: Tue, 25 Jul 2023 09:59:14 +0900
Subject: [PATCH 13/36] Remove junk lines in common.md (#6167)

---
 src/content/reference/react-dom/components/common.md | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md
index f1e4fcd0c..fb0078906 100644
--- a/src/content/reference/react-dom/components/common.md
+++ b/src/content/reference/react-dom/components/common.md
@@ -149,7 +149,6 @@ These standard DOM props are also supported for all built-in components:
 * [`onWheel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event): A [`WheelEvent` handler](#wheelevent-handler) function. Fires when the user rotates a wheel button.
 * `onWheelCapture`: A version of `onWheel` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
 * [`role`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles): A string. Specifies the element role explicitly for assistive technologies.
-nt.
 * [`slot`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles): A string. Specifies the slot name when using shadow DOM. In React, an equivalent pattern is typically achieved by passing JSX as props, for example `<Layout left={<Sidebar />} right={<Content />} />`.
 * [`spellCheck`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck): A boolean or null. If explicitly set to `true` or `false`, enables or disables spellchecking.
 * [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex): A number. Overrides the default Tab button behavior. [Avoid using values other than `-1` and `0`.](https://www.tpgi.com/using-the-tabindex-attribute/)
@@ -169,7 +168,6 @@ These events fire only for the [`<dialog>`](https://developer.mozilla.org/en-US/
 
 * [`onCancel`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/cancel_event): An [`Event` handler](#event-handler) function. Fires when the user tries to dismiss the dialog.
 * `onCancelCapture`: A version of `onCancel` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-capture-phase-events)
 * [`onClose`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close_event): An [`Event` handler](#event-handler) function. Fires when a dialog has been closed.
 * `onCloseCapture`: A version of `onClose` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
 
@@ -177,7 +175,6 @@ These events fire only for the [`<details>`](https://developer.mozilla.org/en-US
 
 * [`onToggle`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement/toggle_event): An [`Event` handler](#event-handler) function. Fires when the user toggles the details.
 * `onToggleCapture`: A version of `onToggle` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-capture-phase-events)
 
 These events fire for [`<img>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img), [`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe), [`<object>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object), [`<embed>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed), [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link), and [SVG `<image>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_Image_Tag) elements. Unlike browser events, they bubble in React:
 

From 6ebe2dd76d875a859df5a826a813311cefa17652 Mon Sep 17 00:00:00 2001
From: Soichiro Miki <smiki-tky@umin.ac.jp>
Date: Tue, 25 Jul 2023 10:00:15 +0900
Subject: [PATCH 14/36] Fix "onFocus" description (#6168)

The "onFocus" is fired when an element receives focus, not loses.
---
 src/content/reference/react-dom/components/common.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md
index fb0078906..04b0dc5e3 100644
--- a/src/content/reference/react-dom/components/common.md
+++ b/src/content/reference/react-dom/components/common.md
@@ -96,7 +96,7 @@ These standard DOM props are also supported for all built-in components:
 * `onDragStartCapture`: A version of `onDragStart` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
 * [`onDrop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drop_event): A [`DragEvent` handler](#dragevent-handler) function. Fires when something is dropped on a valid drop target.
 * `onDropCapture`: A version of `onDrop` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* `onFocus`: A [`FocusEvent` handler](#focusevent-handler) function. Fires when an element lost focus. Unlike the built-in browser [`focus`](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event) event, in React the `onFocus` event bubbles.
+* `onFocus`: A [`FocusEvent` handler](#focusevent-handler) function. Fires when an element receives focus. Unlike the built-in browser [`focus`](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event) event, in React the `onFocus` event bubbles.
 * `onFocusCapture`: A version of `onFocus` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
 * [`onGotPointerCapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/gotpointercapture_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when an element programmatically captures a pointer.
 * `onGotPointerCaptureCapture`: A version of `onGotPointerCapture` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)

From 39b9692cd5804d4963f2299fa19d1bedb1ebf035 Mon Sep 17 00:00:00 2001
From: Afonso Jorge Ramos <afonsojorgeramos@gmail.com>
Date: Tue, 25 Jul 2023 02:03:40 +0100
Subject: [PATCH 15/36] Update conferences timeline (#6159)

---
 src/content/community/conferences.md | 30 ++++++++++++++--------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index 06711db6d..2908f9cd0 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -10,21 +10,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
 
 ## Upcoming Conferences {/*upcoming-conferences*/}
 
-### React Norway 2023 {/*react-norway-2023*/}
-June 16th, 2023. Larvik, Norway
-
-[Website](https://reactnorway.com/) - [Twitter](https://twitter.com/ReactNorway/) - [Facebook](https://www.facebook.com/reactdaynorway/)
-
-### ReactNext 2023 {/*reactnext-2023*/}
-June 27th, 2023. Tel Aviv, Israel
-
-[Website](https://www.react-next.com/) - [Facebook](https://www.facebook.com/ReactNextConf) - [Youtube](https://www.youtube.com/@ReactNext)
-
-### React Nexus 2023 {/*react-nexus-2023*/}
-July 07 & 08, 2023. Bangalore, India (In-person event)
-
-[Website](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)
-
 ### React Rally 2023 🐙 {/*react-rally-2023*/}
 August 17 & 18, 2023. Salt Lake City, UT, USA
 
@@ -52,6 +37,21 @@ December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity
 
 ## Past Conferences {/*past-conferences*/}
 
+### React Nexus 2023 {/*react-nexus-2023*/}
+July 07 & 08, 2023. Bangalore, India (In-person event)
+
+[Website](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)
+
+### ReactNext 2023 {/*reactnext-2023*/}
+June 27th, 2023. Tel Aviv, Israel
+
+[Website](https://www.react-next.com/) - [Facebook](https://www.facebook.com/ReactNextConf) - [Youtube](https://www.youtube.com/@ReactNext)
+
+### React Norway 2023 {/*react-norway-2023*/}
+June 16th, 2023. Larvik, Norway
+
+[Website](https://reactnorway.com/) - [Twitter](https://twitter.com/ReactNorway/) - [Facebook](https://www.facebook.com/reactdaynorway/)
+
 ### React Summit 2023 {/*react-summit-2023*/}
 June 2 & 6, 2023. In-person in Amsterdam, Netherlands + remote first interactivity (hybrid event)
 

From b452e7b613464a20a33018944f3d6c9bba8241cb Mon Sep 17 00:00:00 2001
From: Jiman Jeong <wlaks2317@gmail.com>
Date: Tue, 25 Jul 2023 10:11:36 +0900
Subject: [PATCH 16/36] docs: separate dot from hyperlink (#6140)

---
 src/content/reference/react-dom/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react-dom/index.md b/src/content/reference/react-dom/index.md
index 5b2648c18..fb5fd48b0 100644
--- a/src/content/reference/react-dom/index.md
+++ b/src/content/reference/react-dom/index.md
@@ -39,5 +39,5 @@ These APIs will be removed in a future major version of React.
 * [`findDOMNode`](/reference/react-dom/findDOMNode) finds the closest DOM node corresponding to a class component instance.
 * [`hydrate`](/reference/react-dom/hydrate) mounts a tree into the DOM created from server HTML. Deprecated in favor of [`hydrateRoot`](/reference/react-dom/client/hydrateRoot).
 * [`render`](/reference/react-dom/render) mounts a tree into the DOM. Deprecated in favor of [`createRoot`](/reference/react-dom/client/createRoot).
-* [`unmountComponentAtNode`](/reference/react-dom/unmountComponentAtNode) unmounts a tree from the DOM. Deprecated in favor of [`root.unmount()`.](/reference/react-dom/client/createRoot#root-unmount)
+* [`unmountComponentAtNode`](/reference/react-dom/unmountComponentAtNode) unmounts a tree from the DOM. Deprecated in favor of [`root.unmount()`](/reference/react-dom/client/createRoot#root-unmount).
 

From 505f6510a312a25791d6dd25e56e5c5623a3d81d Mon Sep 17 00:00:00 2001
From: Hyejun Lee <solar3070@naver.com>
Date: Tue, 25 Jul 2023 10:14:44 +0900
Subject: [PATCH 17/36] Fix root-unmount returns (#6137)

---
 src/content/reference/react-dom/client/hydrateRoot.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md
index db558bb80..cf77a81ac 100644
--- a/src/content/reference/react-dom/client/hydrateRoot.md
+++ b/src/content/reference/react-dom/client/hydrateRoot.md
@@ -107,7 +107,7 @@ Calling `root.unmount` will unmount all the components in the root and "detach"
 
 #### Returns {/*root-unmount-returns*/}
 
-`render` returns `null`.
+`root.unmount` returns `undefined`.
 
 #### Caveats {/*root-unmount-caveats*/}
 

From 19c0fe2dcc808358cb1ec593f9afeab022c29fa1 Mon Sep 17 00:00:00 2001
From: Ahmed Abdelbaset <A7med3bdulBaset@gmail.com>
Date: Tue, 25 Jul 2023 04:29:02 +0300
Subject: [PATCH 18/36] fix `componentdidcatch` (#6107)

---
 src/content/reference/react/Component.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md
index 569bf19f2..1ea148a64 100644
--- a/src/content/reference/react/Component.md
+++ b/src/content/reference/react/Component.md
@@ -1010,7 +1010,7 @@ We recommend using [TypeScript](https://www.typescriptlang.org/) instead of chec
 
 If you define `static getDerivedStateFromError`, React will call it when a child component (including distant children) throws an error during rendering. This lets you display an error message instead of clearing the UI.
 
-Typically, it is used together with [`componentDidCatch`](#componentDidCatch) which lets you send the error report to some analytics service. A component with these methods is called an *error boundary.*
+Typically, it is used together with [`componentDidCatch`](#componentdidcatch) which lets you send the error report to some analytics service. A component with these methods is called an *error boundary.*
 
 [See an example.](#catching-rendering-errors-with-an-error-boundary)
 

From a472775b7c15f41b21865db1698113ca49ca95c4 Mon Sep 17 00:00:00 2001
From: Matan Borenkraout <Matanbobi@gmail.com>
Date: Tue, 25 Jul 2023 17:35:34 +0300
Subject: [PATCH 19/36] docs: fix a broken link in react-labs-june-2022 (#6149)

---
 .../06/15/react-labs-what-we-have-been-working-on-june-2022.md  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md
index a68961484..0d9e8e260 100644
--- a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md
+++ b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md
@@ -20,7 +20,7 @@ To set expectations, this is not a roadmap with clear timelines. Many of these p
 
 ## Server Components {/*server-components*/}
 
-We announced an [experimental demo of React Server Components](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components) (RSC) in December 2020. Since then we’ve been finishing up its dependencies in React 18, and working on changes inspired by experimental feedback.
+We announced an [experimental demo of React Server Components](https://legacy.reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html) (RSC) in December 2020. Since then we’ve been finishing up its dependencies in React 18, and working on changes inspired by experimental feedback.
 
 In particular, we’re abandoning the idea of having forked I/O libraries (eg react-fetch), and instead adopting an async/await model for better compatibility. This doesn’t technically block RSC’s release because you can also use routers for data fetching. Another change is that we’re also moving away from the file extension approach in favor of [annotating boundaries](https://github.com/reactjs/rfcs/pull/189#issuecomment-1116482278).
 

From cd13b52ec1955255786720611a6a8647b549f780 Mon Sep 17 00:00:00 2001
From: TimLi <daochouwangu@gmail.com>
Date: Tue, 8 Aug 2023 03:51:55 +0800
Subject: [PATCH 20/36] Fix homepage title (#5838)

* Fix homepage title

Fixed homepage title bug, now the homepage will display the title from `content/index.md` instead of the constant `React`.

* Update index.md

Change title to "React" to keep same
---
 src/components/Seo.tsx | 2 +-
 src/content/index.md   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx
index e76df63e2..d4f037128 100644
--- a/src/components/Seo.tsx
+++ b/src/components/Seo.tsx
@@ -53,7 +53,7 @@ export const Seo = withRouter(
     const canonicalUrl = `https://${siteDomain}${
       router.asPath.split(/[\?\#]/)[0]
     }`;
-    const pageTitle = isHomePage ? 'React' : title + ' – React';
+    const pageTitle = isHomePage ? title : title + ' – React';
     // Twitter's meta parser is not very good.
     const twitterTitle = pageTitle.replace(/[<>]/g, '');
     return (
diff --git a/src/content/index.md b/src/content/index.md
index 0ef5df597..63dbd33eb 100644
--- a/src/content/index.md
+++ b/src/content/index.md
@@ -1,6 +1,6 @@
 ---
 id: home
-title: React – The library for web and native user interfaces
+title: React
 permalink: index.html
 ---
 

From f82f392287c1a568825c7f4095c9d44159eb3878 Mon Sep 17 00:00:00 2001
From: Orta Therox <git@orta.io>
Date: Wed, 9 Aug 2023 17:10:31 +0100
Subject: [PATCH 21/36] Adds a TypeScript overview page (#6120)

* Start of the typescript page

* Intro

* Intro

* Use State

* Use Reducer

* Start of context

* Use Ref

* Events

* Wrap up 1st draft

* Better titles

* Apply suggestions from code review

Co-authored-by: Tom Sherman <the.tomsherman@gmail.com>
Co-authored-by: Lenz Weber-Tronic <mail@lenzw.de>

* Note types/react and types/react-dom, and tone down the usecontext null check

* Feedback

* Given a 2nd run through of the doc

* Apply suggestions from code review

Co-authored-by: Ricky <rickhanlonii@gmail.com>

* Document where `State` is coming from

* Link what inferred types are

* Remove "knock-on"

We already say "cause" which makes "knock-on" a bit redundant

* Move useRef TS usage to useRef reference page

dropped useEffect since there's nothing specific about this hook.

* Add installation section

* Link to framework specific guides

* Edits

* Edit footer

* Rm useRef docs

---------

Co-authored-by: Tom Sherman <the.tomsherman@gmail.com>
Co-authored-by: Lenz Weber-Tronic <mail@lenzw.de>
Co-authored-by: Ricky <rickhanlonii@gmail.com>
Co-authored-by: Sebastian Silbermann <sebastian.silbermann@klarna.com>
---
 src/components/MDX/Sandpack/NavigationBar.tsx |   6 +
 .../Sandpack/OpenInTypeScriptPlayground.tsx   |  26 +
 src/content/learn/typescript.md               | 463 ++++++++++++++++++
 src/sidebarLearn.json                         |   4 +
 4 files changed, 499 insertions(+)
 create mode 100644 src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx
 create mode 100644 src/content/learn/typescript.md

diff --git a/src/components/MDX/Sandpack/NavigationBar.tsx b/src/components/MDX/Sandpack/NavigationBar.tsx
index 94e2eb4b3..27ae43c0d 100644
--- a/src/components/MDX/Sandpack/NavigationBar.tsx
+++ b/src/components/MDX/Sandpack/NavigationBar.tsx
@@ -21,6 +21,7 @@ import {ResetButton} from './ResetButton';
 import {DownloadButton} from './DownloadButton';
 import {IconChevron} from '../../Icon/IconChevron';
 import {Listbox} from '@headlessui/react';
+import {OpenInTypeScriptPlaygroundButton} from './OpenInTypeScriptPlayground';
 
 export function useEvent(fn: any): any {
   const ref = useRef(null);
@@ -184,6 +185,11 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
         <DownloadButton providedFiles={providedFiles} />
         <ResetButton onReset={handleReset} />
         <OpenInCodeSandboxButton />
+        {activeFile.endsWith('.tsx') && (
+          <OpenInTypeScriptPlaygroundButton
+            content={sandpack.files[activeFile]?.code || ''}
+          />
+        )}
       </div>
     </div>
   );
diff --git a/src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx b/src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx
new file mode 100644
index 000000000..f4b7ba77d
--- /dev/null
+++ b/src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx
@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {IconNewPage} from '../../Icon/IconNewPage';
+
+export const OpenInTypeScriptPlaygroundButton = (props: {content: string}) => {
+  const contentWithReactImport = `import * as React from 'react';\n\n${props.content}`;
+  return (
+    <a
+      className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1 ml-2 md:ml-1"
+      href={`https://www.typescriptlang.org/play#src=${encodeURIComponent(
+        contentWithReactImport
+      )}`}
+      title="Open in TypeScript Playground"
+      target="_blank"
+      rel="noreferrer">
+      <IconNewPage
+        className="inline ml-1 mr-1 relative top-[1px]"
+        width="1em"
+        height="1em"
+      />
+      <span className="hidden md:block">TypeScript Playground</span>
+    </a>
+  );
+};
diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md
new file mode 100644
index 000000000..d437096e1
--- /dev/null
+++ b/src/content/learn/typescript.md
@@ -0,0 +1,463 @@
+---
+title: Using TypeScript
+re: https://github.com/reactjs/react.dev/issues/5960
+---
+
+<Intro>
+
+TypeScript is a popular way to add type definitions to JavaScript codebases. Out of the box, TypeScript [supports JSX](/learn/writing-markup-with-jsx) and you can get full React Web support by adding [`@types/react`](https://www.npmjs.com/package/@types/react) and [`@types/react-dom`](https://www.npmjs.com/package/@types/react-dom) to your project.
+
+</Intro>
+
+<YouWillLearn>
+
+* [TypeScript with React Components](/learn/typescript#typescript-with-react-components)
+* [Examples of typing with hooks](/learn/typescript#example-hooks)
+* [Common types from `@types/react`](/learn/typescript/#useful-types)
+* [Further learning locations](/learn/typescript/#further-learning)
+
+</YouWillLearn>
+
+## Installation {/*installation*/}
+
+All [production-grade React frameworks](https://react-dev-git-fork-orta-typescriptpage-fbopensource.vercel.app/learn/start-a-new-react-project#production-grade-react-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation:
+
+- [Next.js](https://nextjs.org/docs/pages/building-your-application/configuring/typescript)
+- [Remix](https://remix.run/docs/en/1.19.2/guides/typescript)
+- [Gatsby](https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/)
+- [Expo](https://docs.expo.dev/guides/typescript/)
+
+### Adding TypeScript to an existing React project {/*adding-typescript-to-an-existing-react-project*/}
+
+To install the latest version of React's type definitions:
+
+<TerminalBlock>
+npm install @types/react @types/react-dom
+</TerminalBlock>
+
+The following compiler options need to be set in your `tsconfig.json`:
+
+1. `dom` must be included in [`lib`](https://www.typescriptlang.org/tsconfig/#lib) (Note: If no `lib` option is specified, `dom` is included by default).
+1. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) must be set to one of the valid options. `preserve` should suffice for most applications.
+  If you're publishing a library, consult the [`jsx` documentation](https://www.typescriptlang.org/tsconfig/#jsx) on what value to choose.
+
+## TypeScript with React Components {/*typescript-with-react-components*/}
+
+<Note>
+
+Every file containing JSX must use the `.tsx` file extension. This is a TypeScript-specific extension that tells TypeScript that this file contains JSX.
+
+</Note>
+
+Writing TypeScript with React is very similar to writing JavaScript with React. The key difference when working with a component is that you can provide types for your component's props. These types can be used for correctness checking and providing inline documentation in editors.
+
+Taking the [`MyButton` component](/learn#components) from the [Quick Start](/learn) guide, we can add a type describing the `title` for the button:
+
+<Sandpack>
+
+```tsx App.tsx active
+function MyButton({ title }: { title: string }) {
+  return (
+    <button>{title}</button>
+  );
+}
+
+export default function MyApp() {
+  return (
+    <div>
+      <h1>Welcome to my app</h1>
+      <MyButton title="I'm a button" />
+    </div>
+  );
+}
+```
+
+```js App.js hidden
+import AppTSX from "./App.tsx";
+export default App = AppTSX;
+```
+</Sandpack>
+
+ <Note>
+
+These sandboxes can handle TypeScript code, but they do not run the type-checker. This means you can amend the TypeScript sandboxes to learn, but you won't get any type errors or warnings. To get type-checking, you can use the [TypeScript Playground](https://www.typescriptlang.org/play) or use a more fully-featured online sandbox.
+
+</Note>
+
+This inline syntax is the simplest way to provide types for a component, though once you start to have a few fields to describe it can become unwieldy. Instead, you can use an `interface` or `type` to describe the component's props:
+
+<Sandpack>
+
+```tsx App.tsx active
+interface MyButtonProps {
+  /** The text to display inside the button */
+  title: string;
+  /** Whether the button can be interacted with */
+  disabled: boolean;
+}
+
+function MyButton({ title, disabled }: MyButtonProps) {
+  return (
+    <button disabled={disabled}>{title}</button>
+  );
+}
+
+export default function MyApp() {
+  return (
+    <div>
+      <h1>Welcome to my app</h1>
+      <MyButton title="I'm a disabled button" disabled={true}/>
+    </div>
+  );
+}
+```
+
+```js App.js hidden
+import AppTSX from "./App.tsx";
+export default App = AppTSX;
+```
+
+</Sandpack>
+
+The type describing your component's props can be as simple or as complex as you need, though they should be an object type described with either a `type` or `interface`. You can learn about how TypeScript describes objects in [Object Types](https://www.typescriptlang.org/docs/handbook/2/objects.html) but you may also be interested in using [Union Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) to describe a prop that can be one of a few different types and the [Creating Types from Types](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html) guide for more advanced use cases.
+
+
+## Example Hooks {/*example-hooks*/}
+
+The type definitions from `@types/react` include types for the built-in hooks, so you can use them in your components without any additional setup. They are built to take into account the code you write in your component, so you will get [inferred types](https://www.typescriptlang.org/docs/handbook/type-inference.html) a lot of the time and ideally do not need to handle the minutiae of providing the types. 
+
+However, we can look at a few examples of how to provide types for hooks.
+
+### `useState` {/*typing-usestate*/}
+
+The [`useState` hook](/reference/react/useState) will re-use the value passed in as the initial state to determine what the type of the value should be. For example:
+
+```ts
+// Infer the type as "boolean"
+const [enabled, setEnabled] = useState(false);
+```
+
+Will assign the type of `boolean` to `enabled`, and `setEnabled` will be a function accepting either a `boolean` argument, or a function that returns a `boolean`. If you want to explicitly provide a type for the state, you can do so by providing a type argument to the `useState` call:
+
+```ts 
+// Explicitly set the type to "boolean"
+const [enabled, setEnabled] = useState<boolean>(false);
+```
+
+This isn't very useful in this case, but a common case where you may want to provide a type is when you have a union type. For example, `status` here can be one of a few different strings:
+
+```ts
+type Status = "idle" | "loading" | "success" | "error";
+
+const [status, setStatus] = useState<Status>("idle");
+```
+
+Or, as recommended in [Principles for structuring state](/learn/choosing-the-state-structure#principles-for-structuring-state), you can group related state as an object and describe the different possibilities via object types:
+
+```ts
+type RequestState =
+  | { status: 'idle' }
+  | { status: 'loading' }
+  | { status: 'success', data: any }
+  | { status: 'error', error: Error };
+
+const [requestState, setRequestState] = useState<RequestState>({ status: 'idle' });
+```
+
+### `useReducer` {/*typing-usereducer*/}
+
+The [`useReducer` hook](/reference/react/useReducer) is a more complex hook that takes a reducer function and an initial state. The types for the reducer function are inferred from the initial state. You can optionally provide a type argument to the `useReducer` call to provide a type for the state, but it is often better to set the type on the initial state instead:
+
+<Sandpack>
+
+```tsx App.tsx active
+import {useReducer} from 'react';
+
+interface State {
+   count: number 
+};
+
+type CounterAction =
+  | { type: "reset" }
+  | { type: "setCount"; value: State["count"] }
+
+const initialState: State = { count: 0 };
+
+function stateReducer(state: State, action: CounterAction): State {
+  switch (action.type) {
+    case "reset":
+      return initialState;
+    case "setCount":
+      return { ...state, count: action.value };
+    default:
+      throw new Error("Unknown action");
+  }
+}
+
+export default function App() {
+  const [state, dispatch] = useReducer(stateReducer, initialState);
+
+  const addFive = () => dispatch({ type: "setCount", value: state.count + 5 });
+  const reset = () => dispatch({ type: "reset" });
+
+  return (
+    <div>
+      <h1>Welcome to my counter</h1>
+
+      <p>Count: {state.count}</p>
+      <button onClick={addFive}>Add 5</button>
+      <button onClick={reset}>Reset</button>
+    </div>
+  );
+}
+
+```
+
+```js App.js hidden
+import AppTSX from "./App.tsx";
+export default App = AppTSX;
+```
+
+</Sandpack>
+
+
+We are using TypeScript in a few key places:
+
+ - `interface State` describes the shape of the reducer's state.
+ - `type CounterAction` describes the different actions which can be dispatched to the reducer.
+ - `const initialState: State` provides a type for the initial state, and also the type which is used by `useReducer` by default.
+ - `stateReducer(state: State, action: CounterAction): State` sets the types for the reducer function's arguments and return value.
+
+A more explicit alternative to setting the type on `initialState` is to provide a type argument to `useReducer`:
+
+```ts
+import { stateReducer, State } from './your-reducer-implementation';
+
+const initialState = { count: 0 };
+
+export default function App() {
+  const [state, dispatch] = useReducer<State>(stateReducer, initialState);
+}
+```
+
+### `useContext` {/*typing-usecontext*/}
+
+The [`useContext` hook](/reference/react/useContext) is a technique for passing data down the component tree without having to pass props through components. It is used by creating a provider component and often by creating a hook to consume the value in a child component.
+
+The type of the value provided by the context is inferred from the value passed to the `createContext` call:
+
+<Sandpack>
+
+```tsx App.tsx active
+import { createContext, useContext, useState } from 'react';
+
+type Theme = "light" | "dark" | "system";
+const ThemeContext = createContext<Theme>("system");
+
+const useGetTheme = () => useContext(ThemeContext);
+
+export default function MyApp() {
+  const [theme, setTheme] = useState<Theme>('light');
+
+  return (
+    <ThemeContext.Provider value={theme}>
+      <MyComponent />
+    </ThemeContext.Provider>
+  )
+}
+
+function MyComponent() {
+  const theme = useGetTheme();
+
+  return (
+    <div>
+      <p>Current theme: {theme}</p>
+    </div>
+  )
+}
+```
+
+```js App.js hidden
+import AppTSX from "./App.tsx";
+export default App = AppTSX;
+```
+
+</Sandpack>
+
+This technique works when you have an default value which makes sense - but there are occasionally cases when you do not, and in those cases `null` can feel reasonable as a default value. However, to allow the type-system to understand your code, you need to explicitly set `ContextShape | null` on the `createContext`. 
+
+This causes the issue that you need to eliminate the `| null` in the type for context consumers. Our recommendation is to have the hook do a runtime check for it's existence and throw an error when not present:
+
+```js {5, 16-20}
+import { createContext, useContext, useState, useMemo } from 'react';
+
+// This is a simpler example, but you can imagine a more complex object here
+type ComplexObject = {
+  kind: string
+};
+
+// The context is created with `| null` in the type, to accurately reflect the default value.
+const Context = createContext<ComplexObject | null>(null);
+
+// The `| null` will be removed via the check in the hook.
+const useGetComplexObject = () => {
+  const object = useContext(Context);
+  if (!object) { throw new Error("useGetComplexObject must be used within a Provider") }
+  return object;
+}
+
+export default function MyApp() {
+  const object = useMemo(() => ({ kind: "complex" }), []);
+
+  return (
+    <Context.Provider value={object}>
+      <MyComponent />
+    </Context.Provider>
+  )
+}
+
+function MyComponent() {
+  const object = useGetComplexObject();
+
+  return (
+    <div>
+      <p>Current object: {object.kind}</p>
+    </div>
+  )
+}
+```
+
+### `useMemo` {/*typing-usememo*/}
+
+The [`useMemo`](/reference/react/useMemo) hooks will create/re-access a memorized value from a function call, re-running the function only when dependencies passed as the 2nd parameter are changed. The result of calling the hook is inferred from the return value from the function in the first parameter. You can be more explicit by providing a type argument to the hook.
+
+```ts
+// The type of visibleTodos is inferred from the return value of filterTodos
+const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
+```
+
+
+### `useCallback` {/*typing-usecallback*/}
+
+The [`useCallback`](/reference/react/useCallback) provide a stable reference to a function as long as the dependencies passed into the second parameter are the same. Like `useMemo`, the function's type is inferred from the return value of the function in the first parameter, and you can be more explicit by providing a type argument to the hook.
+
+
+```ts
+const handleClick = useCallback(() => {
+  // ...
+}, [todos]);
+```
+
+When working in TypeScript strict mode `useCallback` requires adding types for the parameters in your callback. This is because the type of the callback is inferred from the return value of the function, and without parameters the type cannot be fully understood.
+
+Depending on your code-style preferences, you could use the `*EventHandler` functions from the React types to provide the type for the event handler at the same time as defining the callback: 
+
+```ts
+import { useState, useCallback } from 'react';
+
+export default function Form() {
+  const [value, setValue] = useState("Change me");
+
+  const handleChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>((event) => {
+    setValue(event.currentTarget.value);
+  }, [setValue])
+  
+  return (
+    <>
+      <input value={value} onChange={handleChange} />
+      <p>Value: {value}</p>
+    </>
+  );
+}
+```
+
+## Useful Types {/*useful-types*/}
+
+There is quite an expansive set of types which come from the `@types/react` package, it is worth a read when you feel comfortable with how React and TypeScript interact. You can find them [in React's folder in DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts). We will cover a few of the more common types here.
+
+### DOM Events {/*typing-dom-events*/}
+
+When working with DOM events in React, the type of the event can often be inferred from the event handler. However, when you want to extract a function to be passed to an event handler, you will need to explicitly set the type of the event.
+
+<Sandpack>
+
+```tsx App.tsx active
+import { useState } from 'react';
+
+export default function Form() {
+  const [value, setValue] = useState("Change me");
+
+  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+    setValue(event.currentTarget.value);
+  }
+
+  return (
+    <>
+      <input value={value} onChange={handleChange} />
+      <p>Value: {value}</p>
+    </>
+  );
+}
+```
+
+```js App.js hidden
+import AppTSX from "./App.tsx";
+export default App = AppTSX;
+```
+
+</Sandpack>
+
+There are many types of events provided in the React types - the full list can be found [here](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b580df54c0819ec9df62b0835a315dd48b8594a9/types/react/index.d.ts#L1247C1-L1373) which is based on the [most popular events from the DOM](https://developer.mozilla.org/en-US/docs/Web/Events).
+
+When determining the type you are looking for you can first look at the hover information for the event handler you are using, which will show the type of the event.
+
+If you need to use an event that is not included in this list, you can use the `React.SyntheticEvent` type, which is the base type for all events.
+
+### Children {/*typing-children*/}
+
+There are two common paths to describing the children of a component. The first is to use the `React.ReactNode` type, which is a union of all the possible types that can be passed as children in JSX:
+
+```ts
+interface ModalRendererProps {
+  title: string;
+  children: React.ReactNode;
+}
+```
+
+This is a very broad definition of children. The second is to use the `React.ReactElement` type, which is only JSX elements and not JavaScript primitives like strings or numbers:
+
+```ts
+interface ModalRendererProps {
+  title: string;
+  children: React.ReactElement;
+}
+```
+
+Note, that you cannot use TypeScript to describe that the children are a certain type of JSX elements, so you cannot use the type-system to describe a component which only accepts `<li>` children. 
+
+You can see all an example of both `React.ReactNode` and `React.ReactElement` with the type-checker in [this TypeScript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA).
+
+### Style Props {/*typing-style-props*/}
+
+When using inline styles in React, you can use `React.CSSProperties` to describe the object passed to the `style` prop. This type is a union of all the possible CSS properties, and is a good way to ensure you are passing valid CSS properties to the `style` prop, and to get auto-complete in your editor.
+
+```ts
+interface MyComponentProps {
+  style: React.CSSProperties;
+}
+```
+
+## Further learning {/*further-learning*/}
+
+This guide has covered the basics of using TypeScript with React, but there is a lot more to learn.
+Individual API pages on the docs may contain more in-depth documentation on how to use them with TypeScript.
+
+We recommend the following resources:
+
+ - [The TypeScript handbook](https://www.typescriptlang.org/docs/handbook/) is the official documentation for TypeScript, and covers most key language features.
+
+ - [The TypeScript release notes](https://devblogs.microsoft.com/typescript/) covers a each new features in-depth.
+
+ - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) is a community-maintained cheatsheet for using TypeScript with React, covering a lot of useful edge cases and providing more breadth than this document.
+
+ - [TypeScript Community Discord](discord.com/invite/typescript) is a great place to ask questions and get help with TypeScript and React issues.
\ No newline at end of file
diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index 89d5cffca..f462c696e 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -36,6 +36,10 @@
           "title": "Editor Setup",
           "path": "/learn/editor-setup"
         },
+        {
+          "title": "Using TypeScript",
+          "path": "/learn/typescript"
+        },
         {
           "title": "React Developer Tools",
           "path": "/learn/react-developer-tools"

From c60bcac830854e8b3f0f0e11d8c889870177fed0 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@fb.com>
Date: Wed, 9 Aug 2023 21:53:23 -0400
Subject: [PATCH 22/36] Fix TerminalBlock overflow (#6208)

---
 src/components/MDX/TerminalBlock.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MDX/TerminalBlock.tsx b/src/components/MDX/TerminalBlock.tsx
index 9fb5ff35f..161e483b1 100644
--- a/src/components/MDX/TerminalBlock.tsx
+++ b/src/components/MDX/TerminalBlock.tsx
@@ -70,7 +70,7 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) {
           </div>
         </div>
       </div>
-      <div className="px-8 pt-4 pb-6 text-primary-dark dark:text-primary-dark font-mono text-code whitespace-pre">
+      <div className="px-8 pt-4 pb-6 text-primary-dark dark:text-primary-dark font-mono text-code whitespace-pre overflow-x-scroll">
         <LevelText type={level} />
         {message}
       </div>

From 03c2e965c3bbe6046d571c1f566e38cf06917cc5 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@fb.com>
Date: Wed, 9 Aug 2023 22:46:03 -0400
Subject: [PATCH 23/36] Fix recipe titles (#6209)

---
 src/content/reference/react/forwardRef.md | 2 +-
 src/content/reference/react/useContext.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/reference/react/forwardRef.md b/src/content/reference/react/forwardRef.md
index 739c94ae2..10c2ad03d 100644
--- a/src/content/reference/react/forwardRef.md
+++ b/src/content/reference/react/forwardRef.md
@@ -135,7 +135,7 @@ This `Form` component [passes a ref](/reference/react/useRef#manipulating-the-do
 
 Keep in mind that exposing a ref to the DOM node inside your component makes it harder to change your component's internals later. You will typically expose DOM nodes from reusable low-level components like buttons or text inputs, but you won't do it for application-level components like an avatar or a comment.
 
-<Recipes title="Examples of forwarding a ref">
+<Recipes titleText="Examples of forwarding a ref">
 
 #### Focusing a text input {/*focusing-a-text-input*/}
 
diff --git a/src/content/reference/react/useContext.md b/src/content/reference/react/useContext.md
index 2b8f0605c..ed231c394 100644
--- a/src/content/reference/react/useContext.md
+++ b/src/content/reference/react/useContext.md
@@ -1078,7 +1078,7 @@ You can override the context for a part of the tree by wrapping that part in a p
 
 You can nest and override providers as many times as you need.
 
-<Recipes title="Examples of overriding context">
+<Recipes titleText="Examples of overriding context">
 
 #### Overriding a theme {/*overriding-a-theme*/}
 

From fcc639b062fca15574ec0f09dc37ba5bc63fac53 Mon Sep 17 00:00:00 2001
From: Natsuo Kawai <kawai.natsuo@gmail.com>
Date: Fri, 11 Aug 2023 05:49:36 +0900
Subject: [PATCH 24/36] Fix IDs specified in the MDN page URLs (#6176)

---
 .../react-dom/components/progress.md          |  4 ++--
 .../reference/react-dom/components/select.md  | 16 ++++++-------
 .../react-dom/components/textarea.md          | 24 +++++++++----------
 3 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/content/reference/react-dom/components/progress.md b/src/content/reference/react-dom/components/progress.md
index b783a102d..9a8d60ab0 100644
--- a/src/content/reference/react-dom/components/progress.md
+++ b/src/content/reference/react-dom/components/progress.md
@@ -34,8 +34,8 @@ To display a progress indicator, render the [built-in browser `<progress>`](http
 
 Additionally, `<progress>` supports these props:
 
-* [`max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#attr-max): A number. Specifies the maximum `value`. Defaults to `1`.
-* [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#attr-value): A number between `0` and `max`, or `null` for indeterminate progress. Specifies how much was done.
+* [`max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#max): A number. Specifies the maximum `value`. Defaults to `1`.
+* [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#value): A number between `0` and `max`, or `null` for indeterminate progress. Specifies how much was done.
 
 ---
 
diff --git a/src/content/reference/react-dom/components/select.md b/src/content/reference/react-dom/components/select.md
index 93ff56ac5..46710908c 100644
--- a/src/content/reference/react-dom/components/select.md
+++ b/src/content/reference/react-dom/components/select.md
@@ -50,21 +50,21 @@ If your `<select>` is uncontrolled, you may pass the `defaultValue` prop instead
 
 These `<select>` props are relevant both for uncontrolled and controlled select boxes:
 
-* [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-autocomplete): A string. Specifies one of the possible [autocomplete behaviors.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values)
-* [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-autofocus): A boolean. If `true`, React will focus the element on mount.
+* [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#autocomplete): A string. Specifies one of the possible [autocomplete behaviors.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values)
+* [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#autofocus): A boolean. If `true`, React will focus the element on mount.
 * `children`: `<select>` accepts [`<option>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option), [`<optgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup), and [`<datalist>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup) components as children. You can also pass your own components as long as they eventually render one of the allowed components. If you pass your own components that eventually render `<option>` tags, each `<option>` you render must have a `value`.
-* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-disabled): A boolean. If `true`, the select box will not be interactive and will appear dimmed.
-* [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-form): A string. Specifies the `id` of the `<form>` this select box belongs to. If omitted, it's the closest parent form.
-* [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple): A boolean. If `true`, the browser allows [multiple selection.](#enabling-multiple-selection)
-* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-name): A string. Specifies the name for this select box that's [submitted with the form.](#reading-the-select-box-value-when-submitting-a-form)
+* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#disabled): A boolean. If `true`, the select box will not be interactive and will appear dimmed.
+* [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#form): A string. Specifies the `id` of the `<form>` this select box belongs to. If omitted, it's the closest parent form.
+* [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#multiple): A boolean. If `true`, the browser allows [multiple selection.](#enabling-multiple-selection)
+* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#name): A string. Specifies the name for this select box that's [submitted with the form.](#reading-the-select-box-value-when-submitting-a-form)
 * `onChange`: An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Required for [controlled select boxes.](#controlling-a-select-box-with-a-state-variable) Fires immediately when the user picks a different option. Behaves like the browser [`input` event.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
 * `onChangeCapture`: A version of `onChange` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
 * [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Fires immediately when the value is changed by the user. For historical reasons, in React it is idiomatic to use `onChange` instead which works similarly.
 * `onInputCapture`: A version of `onInput` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
 * [`onInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Fires if an input fails validation on form submit. Unlike the built-in `invalid` event, the React `onInvalid` event bubbles.
 * `onInvalidCapture`: A version of `onInvalid` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-required): A boolean. If `true`, the value must be provided for the form to submit.
-* [`size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-size): A number. For `multiple={true}` selects, specifies the preferred number of initially visible items.
+* [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#required): A boolean. If `true`, the value must be provided for the form to submit.
+* [`size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#size): A number. For `multiple={true}` selects, specifies the preferred number of initially visible items.
 
 #### Caveats {/*caveats*/}
 
diff --git a/src/content/reference/react-dom/components/textarea.md b/src/content/reference/react-dom/components/textarea.md
index 388bcf263..5c742f293 100644
--- a/src/content/reference/react-dom/components/textarea.md
+++ b/src/content/reference/react-dom/components/textarea.md
@@ -44,14 +44,14 @@ If your `<textarea>` is uncontrolled, you may pass the `defaultValue` prop inste
 
 These `<textarea>` props are relevant both for uncontrolled and controlled text areas:
 
-* [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-autocomplete): Either `'on'` or `'off'`. Specifies the autocomplete behavior.
-* [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-autofocus): A boolean. If `true`, React will focus the element on mount.
+* [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#autocomplete): Either `'on'` or `'off'`. Specifies the autocomplete behavior.
+* [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#autofocus): A boolean. If `true`, React will focus the element on mount.
 * `children`: `<textarea>` does not accept children. To set the initial value, use `defaultValue`.
-* [`cols`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-cols): A number. Specifies the default width in average character widths. Defaults to `20`.
-* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-disabled): A boolean. If `true`, the input will not be interactive and will appear dimmed.
-* [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-form): A string. Specifies the `id` of the `<form>` this input belongs to. If omitted, it's the closest parent form.
-* [`maxLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-maxlength): A number. Specifies the maximum length of text.
-* [`minLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-minlength): A number. Specifies the minimum length of text.
+* [`cols`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#cols): A number. Specifies the default width in average character widths. Defaults to `20`.
+* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#disabled): A boolean. If `true`, the input will not be interactive and will appear dimmed.
+* [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#form): A string. Specifies the `id` of the `<form>` this input belongs to. If omitted, it's the closest parent form.
+* [`maxLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#maxlength): A number. Specifies the maximum length of text.
+* [`minLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#minlength): A number. Specifies the minimum length of text.
 * [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name): A string. Specifies the name for this input that's [submitted with the form.](#reading-the-textarea-value-when-submitting-a-form)
 * `onChange`: An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Required for [controlled text areas.](#controlling-a-text-area-with-a-state-variable) Fires immediately when the input's value is changed by the user (for example, it fires on every keystroke). Behaves like the browser [`input` event.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
 * `onChangeCapture`: A version of `onChange` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
@@ -61,11 +61,11 @@ These `<textarea>` props are relevant both for uncontrolled and controlled text
 * `onInvalidCapture`: A version of `onInvalid` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
 * [`onSelect`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/select_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Fires after the selection inside the `<textarea>` changes. React extends the `onSelect` event to also fire for empty selection and on edits (which may affect the selection).
 * `onSelectCapture`: A version of `onSelect` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`placeholder`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder): A string. Displayed in a dimmed color when the text area value is empty.
-* [`readOnly`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-readonly): A boolean. If `true`, the text area is not editable by the user.
-* [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-required): A boolean. If `true`, the value must be provided for the form to submit.
-* [`rows`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows): A number. Specifies the default height in average character heights. Defaults to `2`.
-* [`wrap`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-wrap): Either `'hard'`, `'soft'`, or `'off'`. Specifies how the text should be wrapped when submitting a form.
+* [`placeholder`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#placeholder): A string. Displayed in a dimmed color when the text area value is empty.
+* [`readOnly`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#readonly): A boolean. If `true`, the text area is not editable by the user.
+* [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#required): A boolean. If `true`, the value must be provided for the form to submit.
+* [`rows`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#rows): A number. Specifies the default height in average character heights. Defaults to `2`.
+* [`wrap`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap): Either `'hard'`, `'soft'`, or `'off'`. Specifies how the text should be wrapped when submitting a form.
 
 #### Caveats {/*caveats*/}
 

From ae06008d574e44992133f4cc74563ce968fde04c Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@fb.com>
Date: Thu, 10 Aug 2023 17:10:58 -0400
Subject: [PATCH 25/36] Add UI for canary releases (#6173)

* [WIP] Add UI for canary releases

* yellow

* Switch to icon and gray

* Wording, alignment, and rm flex

* Heading alignment
---
 src/components/Icon/IconCanary.tsx            | 32 +++++++++++++++++++
 src/components/Layout/Page.tsx                |  4 ++-
 src/components/Layout/Sidebar/SidebarLink.tsx | 21 +++++++-----
 .../Layout/Sidebar/SidebarRouteTree.tsx       | 14 ++++++--
 src/components/Layout/getRouteMeta.tsx        |  4 +--
 src/components/MDX/ExpandableCallout.tsx      | 12 ++++++-
 src/components/MDX/MDXComponents.tsx          |  5 +++
 src/components/PageHeading.tsx                | 12 ++++++-
 src/content/reference/react/directives.md     |  9 +++++-
 src/content/reference/react/use-client.md     |  8 ++---
 src/content/reference/react/use-server.md     | 17 +++++++---
 src/sidebarReference.json                     |  7 ++--
 12 files changed, 117 insertions(+), 28 deletions(-)
 create mode 100644 src/components/Icon/IconCanary.tsx

diff --git a/src/components/Icon/IconCanary.tsx b/src/components/Icon/IconCanary.tsx
new file mode 100644
index 000000000..a7782b141
--- /dev/null
+++ b/src/components/Icon/IconCanary.tsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconCanary = memo<JSX.IntrinsicElements['svg'] & {title?: string}>(
+  function IconCanary({className, title}) {
+    return (
+      <svg
+        className={className}
+        width="20px"
+        height="20px"
+        viewBox="0 0 20 20"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg">
+        {title && <title>{title}</title>}
+        <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+          <g
+            id="noun-labs-1201738-(2)"
+            transform="translate(2, 0)"
+            fill="currentColor"
+            fillRule="nonzero">
+            <path
+              d="M10.2865804,5.55665262 L10.2865804,2.22331605 L10.8591544,2.22331605 C11.0103911,2.22244799 11.1551447,2.16342155 11.2617505,2.05914367 C11.3684534,1.95486857 11.4282767,1.81370176 11.4282767,1.66667106 L11.4282767,0.556642208 C11.4282767,0.40907262 11.3678934,0.26747526 11.2605218,0.16308627 C11.1531503,0.0587028348 11.0074938,0 10.8556998,0 L5.14338868,0 C4.9915947,0 4.84594391,0.0587028348 4.73856664,0.16308627 C4.63119507,0.267469704 4.57081178,0.40907262 4.57081178,0.556642208 L4.57081178,1.66667106 C4.57081178,1.81434899 4.63119507,1.95594912 4.73856664,2.06033811 C4.8459382,2.16472155 4.9915947,2.22331605 5.14338868,2.22331605 L5.71596273,2.22331605 L5.71596273,5.55665262 C5.71596273,8.38665538 2.97295619,9.88999017 0.651686904,15.5566623 C-0.0957823782,17.360053 -2.00560068,20 7.99951567,20 C18.004632,20 16.0948137,17.3600252 15.3507732,15.5566623 C13.0124432,9.88999017 10.2865804,8.38665538 10.2865804,5.55665262 Z M9.89570197,10.709991 C10.0921412,10.709991 10.2805515,10.7858383 10.4193876,10.9209301 C10.5583466,11.0559135 10.6363652,11.2390693 10.6363652,11.4300417 C10.6363652,11.6210141 10.5583466,11.8040698 10.4193876,11.9391533 C10.2805401,12.0741367 10.0921412,12.1499813 9.89570197,12.1499813 C9.6992627,12.1499813 9.51096673,12.074134 9.37201631,11.9391533 C9.23316875,11.8040615 9.15515307,11.6210141 9.15515307,11.4300417 C9.15515307,11.2390693 9.2331716,11.0559024 9.37201631,10.9209301 C9.57264221,10.7258996 9.61239426,10.709991 9.89570197,10.709991 Z M8.98919546,9.04212824 C9.09790709,9.14792278 9.15884755,9.29158681 9.1585213,9.44110085 C9.15829001,9.59073155 9.09678989,9.73407335 8.98763252,9.83954568 C8.87847514,9.945018 8.73069852,10.0039347 8.57678157,10.0033977 C8.42286747,10.0027392 8.27565088,9.94273467 8.16727355,9.83639845 C8.05900765,9.73006224 7.99873866,9.58628988 7.99963013,9.43664806 C8.00052304,9.28788403 8.0620221,9.14542556 8.17051087,9.04048101 C8.27911107,8.93555591 8.42599335,8.87663641 8.57913312,8.87663641 C8.73291864,8.87665585 8.88047525,8.93622535 8.98919546,9.04212824 Z M7.99965585,17.9999981 C4.91377349,17.9999981 3.29882839,17.7332867 2.51364277,17.4999976 C2.37780966,17.4476975 2.26954376,17.3439641 2.21396931,17.2125528 C2.15838628,17.0811499 2.16006066,16.9334692 2.21876871,16.8033858 C2.6144474,15.5921346 3.14916224,14.4280501 3.81316983,13.3333824 C5.980145,9.82337899 8.22941036,13.8867718 10.0980836,13.8867718 C11.9666996,13.8867718 11.4695868,12.1534924 12.1827971,13.3333824 C12.8511505,14.4269112 13.3916656,15.5896902 13.794259,16.8000524 C13.8533022,16.9322137 13.8537479,17.0822749 13.7952635,17.2147751 C13.7368889,17.3472613 13.6248314,17.4504531 13.4856467,17.5000531 C12.6833967,17.7332867 11.0855382,17.9999981 7.99965585,17.9999981 Z"
+              id="Shape"></path>
+          </g>
+        </g>
+      </svg>
+    );
+  }
+);
diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
index 967a7fafc..2b8ae3a62 100644
--- a/src/components/Layout/Page.tsx
+++ b/src/components/Layout/Page.tsx
@@ -28,7 +28,7 @@ interface PageProps {
   children: React.ReactNode;
   toc: Array<TocItem>;
   routeTree: RouteItem;
-  meta: {title?: string; description?: string};
+  meta: {title?: string; canary?: boolean; description?: string};
   section: 'learn' | 'reference' | 'community' | 'blog' | 'home' | 'unknown';
 }
 
@@ -40,6 +40,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
     routeTree
   );
   const title = meta.title || route?.title || '';
+  const canary = meta.canary || false;
   const description = meta.description || route?.description || '';
   const isHomePage = cleanedPath === '/';
   const isBlogIndex = cleanedPath === '/blog';
@@ -56,6 +57,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
           )}>
           <PageHeading
             title={title}
+            canary={canary}
             description={description}
             tags={route?.tags}
             breadcrumbs={breadcrumbs}
diff --git a/src/components/Layout/Sidebar/SidebarLink.tsx b/src/components/Layout/Sidebar/SidebarLink.tsx
index 6222104c3..0bf6f349c 100644
--- a/src/components/Layout/Sidebar/SidebarLink.tsx
+++ b/src/components/Layout/Sidebar/SidebarLink.tsx
@@ -8,6 +8,7 @@ import {useRef, useEffect} from 'react';
 import * as React from 'react';
 import cn from 'classnames';
 import {IconNavArrow} from 'components/Icon/IconNavArrow';
+import {IconCanary} from 'components/Icon/IconCanary';
 import Link from 'next/link';
 
 interface SidebarLinkProps {
@@ -15,7 +16,7 @@ interface SidebarLinkProps {
   selected?: boolean;
   title: string;
   level: number;
-  wip: boolean | undefined;
+  canary?: boolean;
   icon?: React.ReactNode;
   isExpanded?: boolean;
   hideArrow?: boolean;
@@ -26,7 +27,7 @@ export function SidebarLink({
   href,
   selected = false,
   title,
-  wip,
+  canary,
   level,
   isExpanded,
   hideArrow,
@@ -72,12 +73,16 @@ export function SidebarLink({
         }
       )}>
       {/* This here needs to be refactored ofc */}
-      <span
-        className={cn({
-          'text-gray-400 dark:text-gray-500': wip,
-        })}>
-        {title}
-      </span>
+      <div>
+        {title}{' '}
+        {canary && (
+          <IconCanary
+            title="This feature is available in the latest Canary"
+            className="ml-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"
+          />
+        )}
+      </div>
+
       {isExpanded != null && !hideArrow && (
         <span
           className={cn('pr-1', {
diff --git a/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/src/components/Layout/Sidebar/SidebarRouteTree.tsx
index fa6b0cb25..fa920ad9d 100644
--- a/src/components/Layout/Sidebar/SidebarRouteTree.tsx
+++ b/src/components/Layout/Sidebar/SidebarRouteTree.tsx
@@ -82,7 +82,15 @@ export function SidebarRouteTree({
     <ul>
       {currentRoutes.map(
         (
-          {path, title, routes, wip, heading, hasSectionHeader, sectionHeader},
+          {
+            path,
+            title,
+            routes,
+            canary,
+            heading,
+            hasSectionHeader,
+            sectionHeader,
+          },
           index
         ) => {
           const selected = slug === path;
@@ -112,7 +120,7 @@ export function SidebarRouteTree({
                   selected={selected}
                   level={level}
                   title={title}
-                  wip={wip}
+                  canary={canary}
                   isExpanded={isExpanded}
                   hideArrow={isForceExpanded}
                 />
@@ -136,7 +144,7 @@ export function SidebarRouteTree({
                   selected={selected}
                   level={level}
                   title={title}
-                  wip={wip}
+                  canary={canary}
                 />
               </li>
             );
diff --git a/src/components/Layout/getRouteMeta.tsx b/src/components/Layout/getRouteMeta.tsx
index 87583ac70..d22947847 100644
--- a/src/components/Layout/getRouteMeta.tsx
+++ b/src/components/Layout/getRouteMeta.tsx
@@ -19,6 +19,8 @@ export type RouteTag =
 export interface RouteItem {
   /** Page title (for the sidebar) */
   title: string;
+  /** Optional canary flag for heading */
+  canary?: boolean;
   /** Optional page description for heading */
   description?: string;
   /* Additional meta info for page tagging */
@@ -27,8 +29,6 @@ export interface RouteItem {
   path?: string;
   /** Whether the entry is a heading */
   heading?: boolean;
-  /** Whether the page is under construction */
-  wip?: boolean;
   /** List of sub-routes */
   routes?: RouteItem[];
   /** Adds a section header above the route item */
diff --git a/src/components/MDX/ExpandableCallout.tsx b/src/components/MDX/ExpandableCallout.tsx
index 1fb1ea0ce..f8c61785e 100644
--- a/src/components/MDX/ExpandableCallout.tsx
+++ b/src/components/MDX/ExpandableCallout.tsx
@@ -8,8 +8,9 @@ import cn from 'classnames';
 import {IconNote} from '../Icon/IconNote';
 import {IconWarning} from '../Icon/IconWarning';
 import {IconPitfall} from '../Icon/IconPitfall';
+import {IconCanary} from '../Icon/IconCanary';
 
-type CalloutVariants = 'deprecated' | 'pitfall' | 'note' | 'wip';
+type CalloutVariants = 'deprecated' | 'pitfall' | 'note' | 'wip' | 'canary';
 
 interface ExpandableCalloutProps {
   children: React.ReactNode;
@@ -34,6 +35,15 @@ const variantMap = {
     overlayGradient:
       'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)',
   },
+  canary: {
+    title: 'Canary',
+    Icon: IconCanary,
+    containerClasses:
+      'bg-gray-5 dark:bg-gray-60 dark:bg-opacity-20 text-primary dark:text-primary-dark text-lg',
+    textColor: 'text-gray-60 dark:text-gray-30',
+    overlayGradient:
+      'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)',
+  },
   pitfall: {
     title: 'Pitfall',
     Icon: IconPitfall,
diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx
index 8ddf371c9..f2c792cb9 100644
--- a/src/components/MDX/MDXComponents.tsx
+++ b/src/components/MDX/MDXComponents.tsx
@@ -87,6 +87,10 @@ const Note = ({children}: {children: React.ReactNode}) => (
   <ExpandableCallout type="note">{children}</ExpandableCallout>
 );
 
+const Canary = ({children}: {children: React.ReactNode}) => (
+  <ExpandableCallout type="canary">{children}</ExpandableCallout>
+);
+
 const Blockquote = ({
   children,
   ...props
@@ -416,6 +420,7 @@ export const MDXComponents = {
   Math,
   MathI,
   Note,
+  Canary,
   PackageImport,
   ReadBlogPost,
   Recap,
diff --git a/src/components/PageHeading.tsx b/src/components/PageHeading.tsx
index a92cd8f60..9c411fd34 100644
--- a/src/components/PageHeading.tsx
+++ b/src/components/PageHeading.tsx
@@ -6,9 +6,12 @@ import Breadcrumbs from 'components/Breadcrumbs';
 import Tag from 'components/Tag';
 import {H1} from './MDX/Heading';
 import type {RouteTag, RouteItem} from './Layout/getRouteMeta';
+import * as React from 'react';
+import {IconCanary} from './Icon/IconCanary';
 
 interface PageHeadingProps {
   title: string;
+  canary?: boolean;
   status?: string;
   description?: string;
   tags?: RouteTag[];
@@ -18,6 +21,7 @@ interface PageHeadingProps {
 function PageHeading({
   title,
   status,
+  canary,
   description,
   tags = [],
   breadcrumbs,
@@ -28,10 +32,16 @@ function PageHeading({
         {breadcrumbs ? <Breadcrumbs breadcrumbs={breadcrumbs} /> : null}
         <H1 className="mt-0 text-primary dark:text-primary-dark -mx-.5 break-words">
           {title}
+          {canary && (
+            <IconCanary
+              title="This feature is available in the latest Canary"
+              className="ml-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]"
+            />
+          )}
           {status ? <em>—{status}</em> : ''}
         </H1>
         {description && (
-          <p className="mt-4 mb-6 text-primary dark:text-primary-dark text-xl text-gray-90 leading-large">
+          <p className="mt-4 mb-6 dark:text-primary-dark text-xl text-gray-90 leading-large">
             {description}
           </p>
         )}
diff --git a/src/content/reference/react/directives.md b/src/content/reference/react/directives.md
index 49b3d624e..b323dab1d 100644
--- a/src/content/reference/react/directives.md
+++ b/src/content/reference/react/directives.md
@@ -1,10 +1,17 @@
 ---
 title: "Directives"
+canary: true
 ---
 
+<Canary>
+
+These directives are needed only if you're [using React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) or building a library compatible with them.
+
+</Canary>
+
 <Intro>
 
-React uses two directives to provide instructions to [bundlers compatible with React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks).
+Directives provide instructions to [bundlers compatible with React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks).
 
 </Intro>
 
diff --git a/src/content/reference/react/use-client.md b/src/content/reference/react/use-client.md
index 4fc5d7ace..fc6173acb 100644
--- a/src/content/reference/react/use-client.md
+++ b/src/content/reference/react/use-client.md
@@ -1,12 +1,12 @@
 ---
 title: "'use client'"
+canary: true
 ---
 
-<Note>
+<Canary>
 
-These directives are needed only if you're [using React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) or building a library compatible with them.
-
-</Note>
+`'use client'` is needed only if you're [using React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) or building a library compatible with them.
+</Canary>
 
 
 <Intro>
diff --git a/src/content/reference/react/use-server.md b/src/content/reference/react/use-server.md
index 61f895cab..6b9e7df00 100644
--- a/src/content/reference/react/use-server.md
+++ b/src/content/reference/react/use-server.md
@@ -1,14 +1,13 @@
 ---
 title: "'use server'"
+canary: true
 ---
 
-<Wip>
-
-This section is incomplete.
+<Canary>
 
-These directives are needed only if you're [using React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) or building a library compatible with them.
+`'use server'` is needed only if you're [using React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) or building a library compatible with them.
 
-</Wip>
+</Canary>
 
 
 <Intro>
@@ -46,3 +45,11 @@ Alternatively, add `'use server';` at the very top of a file to mark all exports
 * To avoid the confusion that might result from mixing client- and server-side code in the same file, `'use server'` can only be used in server-side files; the resulting functions can be passed to client components through props.
 * Because the underlying network calls are always asynchronous, `'use server'` can be used only on async functions.
 * Directives like `'use server'` must be at the very beginning of their function or file, above any other code including imports (comments above directives are OK). They must be written with single or double quotes, not backticks. (The `'use xyz'` directive format somewhat resembles the `useXyz()` Hook naming convention, but the similarity is coincidental.)
+
+## Usage {/*usage*/}
+
+<Wip>
+
+This section is incomplete. See also the [Next.js documentation for Server Components](https://beta.nextjs.org/docs/rendering/server-and-client-components).
+
+</Wip>
diff --git a/src/sidebarReference.json b/src/sidebarReference.json
index 5809e8fb6..04a523572 100644
--- a/src/sidebarReference.json
+++ b/src/sidebarReference.json
@@ -123,14 +123,17 @@
     {
       "title": "Directives",
       "path": "/reference/react/directives",
+      "canary": true,
       "routes": [
         {
           "title": "'use client'",
-          "path": "/reference/react/use-client"
+          "path": "/reference/react/use-client",
+          "canary": true
         },
         {
           "title": "'use server'",
-          "path": "/reference/react/use-server"
+          "path": "/reference/react/use-server",
+          "canary": true
         }
       ]
     },

From 22d98782b944dda9fd3309c56d3bf434a103c024 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?=
 <nghsoft@fibertel.com.ar>
Date: Thu, 10 Aug 2023 19:29:00 -0300
Subject: [PATCH 26/36] Update correct link common.md (#6125)

---
 src/content/reference/react-dom/components/common.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md
index 04b0dc5e3..d3cc4d5b9 100644
--- a/src/content/reference/react-dom/components/common.md
+++ b/src/content/reference/react-dom/components/common.md
@@ -333,7 +333,7 @@ An event handler type for the [CSS animation](https://developer.mozilla.org/en-U
 * `e`: A [React event object](#react-event-object) with these extra [`AnimationEvent`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent) properties:
   * [`animationName`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent/animationName)
   * [`elapsedTime`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent/elapsedTime)
-  * [`pseudoElement`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent)
+  * [`pseudoElement`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent/pseudoElement)
 
 ---
 

From 02c00671013f91cad3d3694a1e13ccf2baf87c54 Mon Sep 17 00:00:00 2001
From: Diwakar Kashyap <94478026+DIWAKARKASHYAP@users.noreply.github.com>
Date: Fri, 11 Aug 2023 07:07:34 +0530
Subject: [PATCH 27/36] remove Bad grammar in react.dev tictactoe documentation
 (#6126)

* change docs

* add docs for create react app

* remove

* Update src/content/learn/tutorial-tic-tac-toe.md

---------

Co-authored-by: Ricky <rickhanlonii@gmail.com>
---
 src/content/learn/tutorial-tic-tac-toe.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index 28d997b04..16e5f518d 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -1173,7 +1173,7 @@ Why didn't this problem happen earlier?
 
 When you were passing `onSquareClick={handleClick}`, you were passing the `handleClick` function down as a prop. You were not calling it! But now you are *calling* that function right away--notice the parentheses in `handleClick(0)`--and that's why it runs too early. You don't *want* to call `handleClick` until the user clicks!
 
-You could fix by creating a function like `handleFirstSquareClick` that calls `handleClick(0)`, a function like `handleSecondSquareClick` that calls `handleClick(1)`, and so on. You would pass (rather than call) these functions down as props like `onSquareClick={handleFirstSquareClick}`. This would solve the infinite loop.
+You could fix this by creating a function like `handleFirstSquareClick` that calls `handleClick(0)`, a function like `handleSecondSquareClick` that calls `handleClick(1)`, and so on. You would pass (rather than call) these functions down as props like `onSquareClick={handleFirstSquareClick}`. This would solve the infinite loop.
 
 However, defining nine different functions and giving each of them a name is too verbose. Instead, let's do this:
 

From a86663da84db032212192f5f5c49f2cbbc417ed2 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@fb.com>
Date: Thu, 10 Aug 2023 23:10:18 -0400
Subject: [PATCH 28/36] Fix IntersectionObserver examples (#6212)

---
 src/content/reference/react/useEffect.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md
index 8d04f205c..1bb96e1e8 100644
--- a/src/content/reference/react/useEffect.md
+++ b/src/content/reference/react/useEffect.md
@@ -426,7 +426,7 @@ body {
 
 #### Tracking element visibility {/*tracking-element-visibility*/}
 
-In this example, the external system is again the browser DOM. The `App` component displays a long list, then a `Box` component, and then another long list. Scroll the list down. Notice that when the `Box` component appears in the viewport, the background color changes to black. To implement this, the `Box` component uses an Effect to manage an [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). This browser API notifies you when the DOM element is visible in the viewport.
+In this example, the external system is again the browser DOM. The `App` component displays a long list, then a `Box` component, and then another long list. Scroll the list down. Notice that when all of the `Box` component is fully visible in the viewport, the background color changes to black. To implement this, the `Box` component uses an Effect to manage an [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). This browser API notifies you when the DOM element is visible in the viewport.
 
 <Sandpack>
 
@@ -471,10 +471,10 @@ export default function Box() {
         document.body.style.backgroundColor = 'white';
         document.body.style.color = 'black';
       }
+    }, {
+       threshold: 1.0
     });
-    observer.observe(div, {
-      threshold: 1.0
-    });
+    observer.observe(div);
     return () => {
       observer.disconnect();
     }
@@ -763,10 +763,10 @@ export function useIntersectionObserver(ref) {
     const observer = new IntersectionObserver(entries => {
       const entry = entries[0];
       setIsIntersecting(entry.isIntersecting);
+    }, {
+       threshold: 1.0
     });
-    observer.observe(div, {
-      threshold: 1.0
-    });
+    observer.observe(div);
     return () => {
       observer.disconnect();
     }

From b1a5b7b0b007ac8d69a760c0a0381cf055889ea3 Mon Sep 17 00:00:00 2001
From: Bruno Eduardo de Souza Medeiros
 <50559336+brunoeduardodev@users.noreply.github.com>
Date: Fri, 11 Aug 2023 00:14:34 -0300
Subject: [PATCH 29/36] fix(docs): Component reference render parameters
 (#6098)

---
 src/content/reference/react/Component.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md
index 1ea148a64..2d49972d7 100644
--- a/src/content/reference/react/Component.md
+++ b/src/content/reference/react/Component.md
@@ -593,9 +593,7 @@ You should write the `render` method as a pure function, meaning that it should
 
 #### Parameters {/*render-parameters*/}
 
-* `prevProps`: Props before the update. Compare `prevProps` to [`this.props`](#props) to determine what changed.
-
-* `prevState`: State before the update. Compare `prevState` to [`this.state`](#state) to determine what changed.
+`render` does not take any parameters.
 
 #### Returns {/*render-returns*/}
 

From 2bfa54411e9aa06ec4189ad12e610ed5011d8b6b Mon Sep 17 00:00:00 2001
From: Hannanel Gershinsky <hannanel100@gmail.com>
Date: Fri, 11 Aug 2023 06:48:07 +0300
Subject: [PATCH 30/36] removing reference to create-react-app (#6012)

---
 src/content/learn/importing-and-exporting-components.md | 2 +-
 src/content/learn/your-first-component.md               | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md
index f8f55605c..3a39c36db 100644
--- a/src/content/learn/importing-and-exporting-components.md
+++ b/src/content/learn/importing-and-exporting-components.md
@@ -52,7 +52,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-These currently live in a **root component file,** named `App.js` in this example. In [Create React App](https://create-react-app.dev/), your app lives in `src/App.js`. Depending on your setup, your root component could be in another file, though. If you use a framework with file-based routing, such as Next.js, your root component will be different for every page.
+These currently live in a **root component file,** named `App.js` in this example. Depending on your setup, your root component could be in another file, though. If you use a framework with file-based routing, such as Next.js, your root component will be different for every page.
 
 ## Exporting and importing a component {/*exporting-and-importing-a-component*/}
 
diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md
index 343823aa4..17fa01e98 100644
--- a/src/content/learn/your-first-component.md
+++ b/src/content/learn/your-first-component.md
@@ -211,7 +211,7 @@ When a child component needs some data from a parent, [pass it by props](/learn/
 
 #### Components all the way down {/*components-all-the-way-down*/}
 
-Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or [Create React App](https://create-react-app.dev/), the root component is defined in `src/App.js`. If you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
+Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or if you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
 
 Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.
 

From 79560d6572330a1a30aeec997526878c13a982f9 Mon Sep 17 00:00:00 2001
From: Umair Raza <52033975+umairraza96@users.noreply.github.com>
Date: Fri, 11 Aug 2023 08:14:24 +0400
Subject: [PATCH 31/36] fix: remove Hong Kong from choosing-the-state-structure
 (#5957)

* fix: remove Hong Kong from choosing-the-state-structure

closes Improper examples #5955

* change boolean style for rendering
---
 .../learn/choosing-the-state-structure.md     | 303 ++++++++----------
 1 file changed, 142 insertions(+), 161 deletions(-)

diff --git a/src/content/learn/choosing-the-state-structure.md b/src/content/learn/choosing-the-state-structure.md
index b1478324e..49e11a22f 100644
--- a/src/content/learn/choosing-the-state-structure.md
+++ b/src/content/learn/choosing-the-state-structure.md
@@ -696,119 +696,115 @@ export const initialTravelPlan = {
         childPlaces: []
       }, {
         id: 21,
-        title: 'Hong Kong',
-        childPlaces: []
-      }, {
-        id: 22,
         title: 'India',
         childPlaces: []
       }, {
-        id: 23,
+        id: 22,
         title: 'Singapore',
         childPlaces: []
       }, {
-        id: 24,
+        id: 23,
         title: 'South Korea',
         childPlaces: []
       }, {
-        id: 25,
+        id: 24,
         title: 'Thailand',
         childPlaces: []
       }, {
-        id: 26,
+        id: 25,
         title: 'Vietnam',
         childPlaces: []
       }]
     }, {
-      id: 27,
+      id: 26,
       title: 'Europe',
       childPlaces: [{
-        id: 28,
+        id: 27,
         title: 'Croatia',
         childPlaces: [],
       }, {
-        id: 29,
+        id: 28,
         title: 'France',
         childPlaces: [],
       }, {
-        id: 30,
+        id: 29,
         title: 'Germany',
         childPlaces: [],
       }, {
-        id: 31,
+        id: 30,
         title: 'Italy',
         childPlaces: [],
       }, {
-        id: 32,
+        id: 31,
         title: 'Portugal',
         childPlaces: [],
       }, {
-        id: 33,
+        id: 32,
         title: 'Spain',
         childPlaces: [],
       }, {
-        id: 34,
+        id: 33,
         title: 'Turkey',
         childPlaces: [],
       }]
     }, {
-      id: 35,
+      id: 34,
       title: 'Oceania',
       childPlaces: [{
-        id: 36,
+        id: 35,
         title: 'Australia',
         childPlaces: [],
       }, {
-        id: 37,
+        id: 36,
         title: 'Bora Bora (French Polynesia)',
         childPlaces: [],
       }, {
-        id: 38,
+        id: 37,
         title: 'Easter Island (Chile)',
         childPlaces: [],
       }, {
-        id: 39,
+        id: 38,
         title: 'Fiji',
         childPlaces: [],
       }, {
-        id: 40,
+        id: 39,
         title: 'Hawaii (the USA)',
         childPlaces: [],
       }, {
-        id: 41,
+        id: 40,
         title: 'New Zealand',
         childPlaces: [],
       }, {
-        id: 42,
+        id: 41,
         title: 'Vanuatu',
         childPlaces: [],
       }]
     }]
   }, {
-    id: 43,
+    id: 42,
     title: 'Moon',
     childPlaces: [{
-      id: 44,
+      id: 43,
       title: 'Rheita',
       childPlaces: []
     }, {
-      id: 45,
+      id: 44,
       title: 'Piccolomini',
       childPlaces: []
     }, {
-      id: 46,
+      id: 45,
       title: 'Tycho',
       childPlaces: []
     }]
   }, {
-    id: 47,
+    id: 46,
     title: 'Mars',
     childPlaces: [{
-      id: 48,
+      id: 47,
       title: 'Corn Town',
       childPlaces: []
     }, {
-      id: 49,
+      id: 48,
       title: 'Green Hill',
       childPlaces: []      
     }]
@@ -877,12 +873,12 @@ export const initialTravelPlan = {
   0: {
     id: 0,
     title: '(Root)',
-    childIds: [1, 43, 47],
+    childIds: [1, 42, 46],
   },
   1: {
     id: 1,
     title: 'Earth',
-    childIds: [2, 10, 19, 27, 35]
+    childIds: [2, 10, 19, 26, 34]
   },
   2: {
     id: 2,
@@ -972,7 +968,7 @@ export const initialTravelPlan = {
   19: {
     id: 19,
     title: 'Asia',
-    childIds: [20, 21, 22, 23, 24, 25, 26],   
+    childIds: [20, 21, 22, 23, 24, 25],   
   },
   20: {
     id: 20,
@@ -981,146 +977,141 @@ export const initialTravelPlan = {
   },
   21: {
     id: 21,
-    title: 'Hong Kong',
+    title: 'India',
     childIds: []
   },
   22: {
     id: 22,
-    title: 'India',
+    title: 'Singapore',
     childIds: []
   },
   23: {
     id: 23,
-    title: 'Singapore',
+    title: 'South Korea',
     childIds: []
   },
   24: {
     id: 24,
-    title: 'South Korea',
+    title: 'Thailand',
     childIds: []
   },
   25: {
     id: 25,
-    title: 'Thailand',
+    title: 'Vietnam',
     childIds: []
   },
   26: {
     id: 26,
-    title: 'Vietnam',
-    childIds: []
+    title: 'Europe',
+    childIds: [27, 28, 29, 30, 31, 32, 33],   
   },
   27: {
     id: 27,
-    title: 'Europe',
-    childIds: [28, 29, 30, 31, 32, 33, 34],   
+    title: 'Croatia',
+    childIds: []
   },
   28: {
     id: 28,
-    title: 'Croatia',
+    title: 'France',
     childIds: []
   },
   29: {
     id: 29,
-    title: 'France',
+    title: 'Germany',
     childIds: []
   },
   30: {
     id: 30,
-    title: 'Germany',
+    title: 'Italy',
     childIds: []
   },
   31: {
     id: 31,
-    title: 'Italy',
+    title: 'Portugal',
     childIds: []
   },
   32: {
     id: 32,
-    title: 'Portugal',
+    title: 'Spain',
     childIds: []
   },
   33: {
     id: 33,
-    title: 'Spain',
+    title: 'Turkey',
     childIds: []
   },
   34: {
     id: 34,
-    title: 'Turkey',
-    childIds: []
+    title: 'Oceania',
+    childIds: [35, 36, 37, 38, 39, 40, 41],   
   },
   35: {
     id: 35,
-    title: 'Oceania',
-    childIds: [36, 37, 38, 39, 40, 41, 42],   
+    title: 'Australia',
+    childIds: []
   },
   36: {
     id: 36,
-    title: 'Australia',
+    title: 'Bora Bora (French Polynesia)',
     childIds: []
   },
   37: {
     id: 37,
-    title: 'Bora Bora (French Polynesia)',
+    title: 'Easter Island (Chile)',
     childIds: []
   },
   38: {
     id: 38,
-    title: 'Easter Island (Chile)',
+    title: 'Fiji',
     childIds: []
   },
   39: {
-    id: 39,
-    title: 'Fiji',
+    id: 40,
+    title: 'Hawaii (the USA)',
     childIds: []
   },
   40: {
     id: 40,
-    title: 'Hawaii (the USA)',
+    title: 'New Zealand',
     childIds: []
   },
   41: {
     id: 41,
-    title: 'New Zealand',
+    title: 'Vanuatu',
     childIds: []
   },
   42: {
     id: 42,
-    title: 'Vanuatu',
-    childIds: []
+    title: 'Moon',
+    childIds: [43, 44, 45]
   },
   43: {
     id: 43,
-    title: 'Moon',
-    childIds: [44, 45, 46]
+    title: 'Rheita',
+    childIds: []
   },
   44: {
     id: 44,
-    title: 'Rheita',
+    title: 'Piccolomini',
     childIds: []
   },
   45: {
     id: 45,
-    title: 'Piccolomini',
+    title: 'Tycho',
     childIds: []
   },
   46: {
     id: 46,
-    title: 'Tycho',
-    childIds: []
+    title: 'Mars',
+    childIds: [47, 48]
   },
   47: {
     id: 47,
-    title: 'Mars',
-    childIds: [48, 49]
-  },
-  48: {
-    id: 48,
     title: 'Corn Town',
     childIds: []
   },
-  49: {
-    id: 49,
+  48: {
+    id: 48,
     title: 'Green Hill',
     childIds: []
   }
@@ -1218,12 +1209,12 @@ export const initialTravelPlan = {
   0: {
     id: 0,
     title: '(Root)',
-    childIds: [1, 43, 47],
+    childIds: [1, 42, 46],
   },
   1: {
     id: 1,
     title: 'Earth',
-    childIds: [2, 10, 19, 27, 35]
+    childIds: [2, 10, 19, 26, 34]
   },
   2: {
     id: 2,
@@ -1313,7 +1304,7 @@ export const initialTravelPlan = {
   19: {
     id: 19,
     title: 'Asia',
-    childIds: [20, 21, 22, 23, 24, 25, 26],   
+    childIds: [20, 21, 22, 23, 24, 25],   
   },
   20: {
     id: 20,
@@ -1322,146 +1313,141 @@ export const initialTravelPlan = {
   },
   21: {
     id: 21,
-    title: 'Hong Kong',
+    title: 'India',
     childIds: []
   },
   22: {
     id: 22,
-    title: 'India',
+    title: 'Singapore',
     childIds: []
   },
   23: {
     id: 23,
-    title: 'Singapore',
+    title: 'South Korea',
     childIds: []
   },
   24: {
     id: 24,
-    title: 'South Korea',
+    title: 'Thailand',
     childIds: []
   },
   25: {
     id: 25,
-    title: 'Thailand',
+    title: 'Vietnam',
     childIds: []
   },
   26: {
     id: 26,
-    title: 'Vietnam',
-    childIds: []
+    title: 'Europe',
+    childIds: [27, 28, 29, 30, 31, 32, 33],   
   },
   27: {
     id: 27,
-    title: 'Europe',
-    childIds: [28, 29, 30, 31, 32, 33, 34],   
+    title: 'Croatia',
+    childIds: []
   },
   28: {
     id: 28,
-    title: 'Croatia',
+    title: 'France',
     childIds: []
   },
   29: {
     id: 29,
-    title: 'France',
+    title: 'Germany',
     childIds: []
   },
   30: {
     id: 30,
-    title: 'Germany',
+    title: 'Italy',
     childIds: []
   },
   31: {
     id: 31,
-    title: 'Italy',
+    title: 'Portugal',
     childIds: []
   },
   32: {
     id: 32,
-    title: 'Portugal',
+    title: 'Spain',
     childIds: []
   },
   33: {
     id: 33,
-    title: 'Spain',
+    title: 'Turkey',
     childIds: []
   },
   34: {
     id: 34,
-    title: 'Turkey',
-    childIds: []
+    title: 'Oceania',
+    childIds: [35, 36, 37, 38, 39, 40, 41],   
   },
   35: {
     id: 35,
-    title: 'Oceania',
-    childIds: [36, 37, 38, 39, 40, 41,, 42],   
+    title: 'Australia',
+    childIds: []
   },
   36: {
     id: 36,
-    title: 'Australia',
+    title: 'Bora Bora (French Polynesia)',
     childIds: []
   },
   37: {
     id: 37,
-    title: 'Bora Bora (French Polynesia)',
+    title: 'Easter Island (Chile)',
     childIds: []
   },
   38: {
     id: 38,
-    title: 'Easter Island (Chile)',
+    title: 'Fiji',
     childIds: []
   },
   39: {
     id: 39,
-    title: 'Fiji',
+    title: 'Hawaii (the USA)',
     childIds: []
   },
   40: {
     id: 40,
-    title: 'Hawaii (the USA)',
+    title: 'New Zealand',
     childIds: []
   },
   41: {
     id: 41,
-    title: 'New Zealand',
+    title: 'Vanuatu',
     childIds: []
   },
   42: {
     id: 42,
-    title: 'Vanuatu',
-    childIds: []
+    title: 'Moon',
+    childIds: [43, 44, 45]
   },
   43: {
     id: 43,
-    title: 'Moon',
-    childIds: [44, 45, 46]
+    title: 'Rheita',
+    childIds: []
   },
   44: {
     id: 44,
-    title: 'Rheita',
+    title: 'Piccolomini',
     childIds: []
   },
   45: {
     id: 45,
-    title: 'Piccolomini',
+    title: 'Tycho',
     childIds: []
   },
   46: {
     id: 46,
-    title: 'Tycho',
-    childIds: []
+    title: 'Mars',
+    childIds: [47, 48]
   },
   47: {
     id: 47,
-    title: 'Mars',
-    childIds: [48, 49]
-  },
-  48: {
-    id: 48,
     title: 'Corn Town',
     childIds: []
   },
-  49: {
-    id: 49,
+  48: {
+    id: 48,
     title: 'Green Hill',
     childIds: []
   }
@@ -1562,12 +1548,12 @@ export const initialTravelPlan = {
   0: {
     id: 0,
     title: '(Root)',
-    childIds: [1, 43, 47],
+    childIds: [1, 42, 46],
   },
   1: {
     id: 1,
     title: 'Earth',
-    childIds: [2, 10, 19, 27, 35]
+    childIds: [2, 10, 19, 26, 34]
   },
   2: {
     id: 2,
@@ -1657,7 +1643,7 @@ export const initialTravelPlan = {
   19: {
     id: 19,
     title: 'Asia',
-    childIds: [20, 21, 22, 23, 24, 25, 26],   
+    childIds: [20, 21, 22, 23, 24, 25,],   
   },
   20: {
     id: 20,
@@ -1666,146 +1652,141 @@ export const initialTravelPlan = {
   },
   21: {
     id: 21,
-    title: 'Hong Kong',
+    title: 'India',
     childIds: []
   },
   22: {
     id: 22,
-    title: 'India',
+    title: 'Singapore',
     childIds: []
   },
   23: {
     id: 23,
-    title: 'Singapore',
+    title: 'South Korea',
     childIds: []
   },
   24: {
     id: 24,
-    title: 'South Korea',
+    title: 'Thailand',
     childIds: []
   },
   25: {
     id: 25,
-    title: 'Thailand',
+    title: 'Vietnam',
     childIds: []
   },
   26: {
     id: 26,
-    title: 'Vietnam',
-    childIds: []
+    title: 'Europe',
+    childIds: [27, 28, 29, 30, 31, 32, 33],   
   },
   27: {
     id: 27,
-    title: 'Europe',
-    childIds: [28, 29, 30, 31, 32, 33, 34],   
+    title: 'Croatia',
+    childIds: []
   },
   28: {
     id: 28,
-    title: 'Croatia',
+    title: 'France',
     childIds: []
   },
   29: {
     id: 29,
-    title: 'France',
+    title: 'Germany',
     childIds: []
   },
   30: {
     id: 30,
-    title: 'Germany',
+    title: 'Italy',
     childIds: []
   },
   31: {
     id: 31,
-    title: 'Italy',
+    title: 'Portugal',
     childIds: []
   },
   32: {
     id: 32,
-    title: 'Portugal',
+    title: 'Spain',
     childIds: []
   },
   33: {
     id: 33,
-    title: 'Spain',
+    title: 'Turkey',
     childIds: []
   },
   34: {
     id: 34,
-    title: 'Turkey',
-    childIds: []
+    title: 'Oceania',
+    childIds: [35, 36, 37, 38, 39, 40,, 41],   
   },
   35: {
     id: 35,
-    title: 'Oceania',
-    childIds: [36, 37, 38, 39, 40, 41,, 42],   
+    title: 'Australia',
+    childIds: []
   },
   36: {
     id: 36,
-    title: 'Australia',
+    title: 'Bora Bora (French Polynesia)',
     childIds: []
   },
   37: {
     id: 37,
-    title: 'Bora Bora (French Polynesia)',
+    title: 'Easter Island (Chile)',
     childIds: []
   },
   38: {
     id: 38,
-    title: 'Easter Island (Chile)',
+    title: 'Fiji',
     childIds: []
   },
   39: {
     id: 39,
-    title: 'Fiji',
+    title: 'Hawaii (the USA)',
     childIds: []
   },
   40: {
     id: 40,
-    title: 'Hawaii (the USA)',
+    title: 'New Zealand',
     childIds: []
   },
   41: {
     id: 41,
-    title: 'New Zealand',
+    title: 'Vanuatu',
     childIds: []
   },
   42: {
     id: 42,
-    title: 'Vanuatu',
-    childIds: []
+    title: 'Moon',
+    childIds: [43, 44, 45]
   },
   43: {
     id: 43,
-    title: 'Moon',
-    childIds: [44, 45, 46]
+    title: 'Rheita',
+    childIds: []
   },
   44: {
     id: 44,
-    title: 'Rheita',
+    title: 'Piccolomini',
     childIds: []
   },
   45: {
     id: 45,
-    title: 'Piccolomini',
+    title: 'Tycho',
     childIds: []
   },
   46: {
     id: 46,
-    title: 'Tycho',
-    childIds: []
+    title: 'Mars',
+    childIds: [47, 48]
   },
   47: {
     id: 47,
-    title: 'Mars',
-    childIds: [48, 49]
-  },
-  48: {
-    id: 48,
     title: 'Corn Town',
     childIds: []
   },
-  49: {
-    id: 49,
+  48: {
+    id: 48,
     title: 'Green Hill',
     childIds: []
   }

From 819518cfe32dd2db3b765410247c30feea713c77 Mon Sep 17 00:00:00 2001
From: Ahmed Abdelbaset <A7med3bdulBaset@gmail.com>
Date: Fri, 11 Aug 2023 22:42:12 +0300
Subject: [PATCH 32/36] RTL Languages Support (#6138)

* Update TailwindCSS & Install rtl-detect
1- Update TailwindCSS to use the logical properities such as `ps-1` instead of `pl-1`.
there are logical properities for margin, padding, inset, and text direction.

2- Install `rtl-detect` detect if the language is RTL direction.
Note: this might be uninstalled if we use the manual way to specify rtl language.

* add `siteConfig.isRTL`

* add `dir` attribute to the root element

* edit some tw classes to utilize logical properties
instead of directions properties
(e.g. `pr-0` to `pe-0`)

* edit some tw classes to utilize logical properties
instead of directions properties
(e.g. `pr-0` to `pe-0`)

* edit some tw classes to utilize logical properties
instead of directions properties
(e.g. `pr-0` to `pe-0`)

* edit some tw classes to utilize logical properties
instead of directions properties
(e.g. `pr-0` to `pe-0`)

* Refactor TW classes: Use logical properties over directional properties.

* Revert "Refactor TW classes: Use logical properties over directional properties."

This reverts commit df9620d944d9a47c5394b26fe4e3536ba3031333.

* Refactor TW classes: Use logical properties over directional properties.

* Refactor TW classes: Use logical properties over directional properties.

* Refactor TW classes: Use logical properties over directional properties.

* Add `start` and `end` directions to the `IconNavArrow`

* Add Note about `isRTL` prop

* Refactor TW classes: Use logical properties over directional properties.

* Refactor TW classes: Use logical properties over directional properties.

* Refactor TW classes: use logical properties over directional properties

* Refactor TW classes: use logical properties over directional properties

* Refactor TW classes: use logical properties over directional properties

* set dir attr of `CodeBlock` to `ltr` even the page dir is `rtl`

* Refactor TW classes: use logical properties over directional properties

* Refactor TW classes: use logical properties over directional properties

* Add `start` and `end` directions to some icons

* Refactor TW classes: use logical properties over directional properties

* Refactor TW classes: use logical properties over directional properties

* Refactor TW classes: use logical properties over directional properties

* Refactor TW classes: use logical properties over directional properties

* set dir attr of `ConsoleBlock` to `ltr` to overwrite the dir of root element

* Refactor TW classes: use logical properties over directional properties

* set dir=ltr on inline code blocks to overwrite <html dir="rtl"> in some languages

* Refactor TW classes: use logical properties over directional properties

* Refactor TW classes: use logical properties over directional properties

* Refactor TW classes: use logical properties over directional properties

* Refactor TW classes: use logical properties over directional properties

* set translate=no, dir=ltr on `TerminalBlock` to overwrite <html dir="rtl"> in rtl languages

* Refactor TW classes: use logical properties over directional properties

* Refactor TW classes: use logical properties over directional properties

* Refactor TW classes: use logical properties over directional properties

* fix some direction styles

* fix arrow directions in rtl

* remove `rtl-detect` and set `siteConfig.isRTL` manually

* fix `Breadcrumbs`'s arrow direction in rtl languages

* fix some directions of the search modal for RTL languages

* hard setting dir=ltr to Sandpack to overwrite rtl languages dir

* Refactor TW classes: use logical properties over directional properties

* remove my notes

* fix: rerverse space-x-* in rtl

* rebase with the main branch

* remove unnecessary alt

* add `start` & `end` display directions to the Chevron Icon

* rebase with the main branch
---
 package.json                                  |   2 +-
 src/components/Breadcrumbs.tsx                |   4 +-
 src/components/DocsFooter.tsx                 |   4 +-
 src/components/Icon/IconArrow.tsx             |   8 +-
 src/components/Icon/IconArrowSmall.tsx        |   8 +-
 src/components/Icon/IconChevron.tsx           |   9 +-
 src/components/Icon/IconNavArrow.tsx          |  13 +-
 src/components/Layout/Feedback.tsx            |   4 +-
 src/components/Layout/Footer.tsx              |   6 +-
 src/components/Layout/HomeContent.js          |  54 +--
 src/components/Layout/Page.tsx                |   8 +-
 .../Layout/Sidebar/SidebarButton.tsx          |   6 +-
 src/components/Layout/Sidebar/SidebarLink.tsx |  10 +-
 .../Layout/Sidebar/SidebarRouteTree.tsx       |   4 +-
 .../Layout/SidebarNav/SidebarNav.tsx          |   2 +-
 src/components/Layout/Toc.tsx                 |   8 +-
 src/components/Layout/TopNav/TopNav.tsx       |  18 +-
 src/components/MDX/Challenges/Challenge.tsx   |  18 +-
 src/components/MDX/Challenges/Navigation.tsx  |  12 +-
 src/components/MDX/CodeBlock/CodeBlock.tsx    |   1 +
 src/components/MDX/CodeBlock/index.tsx        |   4 +-
 src/components/MDX/ConsoleBlock.tsx           |   6 +-
 src/components/MDX/ExpandableCallout.tsx      |   2 +-
 src/components/MDX/ExpandableExample.tsx      |   6 +-
 src/components/MDX/Heading.tsx                |   2 +-
 src/components/MDX/InlineCode.tsx             |   1 +
 src/components/MDX/MDXComponents.module.css   |   6 +-
 src/components/MDX/MDXComponents.tsx          |  12 +-
 src/components/MDX/Sandpack/Console.tsx       |   4 +-
 src/components/MDX/Sandpack/CustomPreset.tsx  |   2 +-
 .../MDX/Sandpack/DownloadButton.tsx           |   2 +-
 src/components/MDX/Sandpack/NavigationBar.tsx |   8 +-
 .../MDX/Sandpack/OpenInCodeSandboxButton.tsx  |   4 +-
 src/components/MDX/Sandpack/ResetButton.tsx   |   2 +-
 src/components/MDX/Sandpack/SandpackRoot.tsx  |   4 +-
 src/components/MDX/Sandpack/index.tsx         |   2 +-
 src/components/MDX/TeamMember.tsx             |  12 +-
 src/components/MDX/TerminalBlock.tsx          |  15 +-
 src/components/MDX/YouWillLearnCard.tsx       |   2 +-
 src/components/PageHeading.tsx                |   2 +-
 src/components/SocialBanner.tsx               |   2 +-
 src/components/Tag.tsx                        |   2 +-
 src/pages/_document.tsx                       |   2 +-
 src/siteConfig.js                             |   1 +
 src/styles/algolia.css                        |  21 +-
 src/styles/index.css                          |  14 +-
 yarn.lock                                     | 344 ++++++++++++------
 47 files changed, 417 insertions(+), 266 deletions(-)

diff --git a/package.json b/package.json
index e12f2aa46..e47c10ff7 100644
--- a/package.json
+++ b/package.json
@@ -92,7 +92,7 @@
     "retext": "^7.0.1",
     "retext-smartypants": "^4.0.0",
     "rss": "^1.2.2",
-    "tailwindcss": "^3.0.22",
+    "tailwindcss": "^3.3.2",
     "typescript": "^4.0.2",
     "unist-util-visit": "^2.0.3",
     "webpack-bundle-analyzer": "^4.5.0"
diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index 8eead2302..e64b486d1 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -17,10 +17,10 @@ function Breadcrumbs({breadcrumbs}: {breadcrumbs: RouteItem[]}) {
               <Fragment key={crumb.path}>
                 <Link
                   href={crumb.path}
-                  className="text-link dark:text-link-dark text-sm tracking-wide font-bold uppercase mr-1 hover:underline">
+                  className="text-link dark:text-link-dark text-sm tracking-wide font-bold uppercase me-1 hover:underline">
                   {crumb.title}
                 </Link>
-                <span className="inline-block mr-1 text-link dark:text-link-dark text-lg">
+                <span className="inline-block me-1 text-link dark:text-link-dark text-lg rtl:rotate-180">
                   <svg
                     width="20"
                     height="20"
diff --git a/src/components/DocsFooter.tsx b/src/components/DocsFooter.tsx
index a5c7324e2..2fdbb0460 100644
--- a/src/components/DocsFooter.tsx
+++ b/src/components/DocsFooter.tsx
@@ -71,12 +71,12 @@ function FooterLink({
       className={cn(
         'flex gap-x-4 md:gap-x-6 items-center w-full md:w-80 px-4 md:px-5 py-6 border-2 border-transparent text-base leading-base text-link dark:text-link-dark rounded-lg group focus:text-link dark:focus:text-link-dark focus:bg-highlight focus:border-link dark:focus:bg-highlight-dark dark:focus:border-link-dark focus:border-opacity-100 focus:border-2 focus:ring-1 focus:ring-offset-4 focus:ring-blue-40 active:ring-0 active:ring-offset-0 hover:bg-gray-5 dark:hover:bg-gray-80',
         {
-          'flex-row-reverse justify-self-end text-right': type === 'Next',
+          'flex-row-reverse justify-self-end text-end': type === 'Next',
         }
       )}>
       <IconNavArrow
         className="text-tertiary dark:text-tertiary-dark inline group-focus:text-link dark:group-focus:text-link-dark"
-        displayDirection={type === 'Previous' ? 'left' : 'right'}
+        displayDirection={type === 'Previous' ? 'start' : 'end'}
       />
       <span>
         <span className="block no-underline text-sm tracking-wide text-secondary dark:text-secondary-dark uppercase font-bold group-focus:text-link dark:group-focus:text-link-dark group-focus:text-opacity-100">
diff --git a/src/components/Icon/IconArrow.tsx b/src/components/Icon/IconArrow.tsx
index 53bde1326..714cccd82 100644
--- a/src/components/Icon/IconArrow.tsx
+++ b/src/components/Icon/IconArrow.tsx
@@ -7,7 +7,12 @@ import cn from 'classnames';
 
 export const IconArrow = memo<
   JSX.IntrinsicElements['svg'] & {
-    displayDirection: 'left' | 'right' | 'up' | 'down';
+    /**
+     * The direction the arrow should point.
+     * `start` and `end` are relative to the current locale.
+     * for example, in LTR, `start` is left and `end` is right.
+     */
+    displayDirection: 'start' | 'end' | 'right' | 'left' | 'up' | 'down';
   }
 >(function IconArrow({displayDirection, className, ...rest}) {
   return (
@@ -20,6 +25,7 @@ export const IconArrow = memo<
       {...rest}
       className={cn(className, {
         'rotate-180': displayDirection === 'right',
+        'rotate-180 rtl:rotate-0': displayDirection === 'end',
       })}>
       <path fill="none" d="M0 0h24v24H0z" />
       <path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z" />
diff --git a/src/components/Icon/IconArrowSmall.tsx b/src/components/Icon/IconArrowSmall.tsx
index cf85988d2..6653dc387 100644
--- a/src/components/Icon/IconArrowSmall.tsx
+++ b/src/components/Icon/IconArrowSmall.tsx
@@ -7,11 +7,17 @@ import cn from 'classnames';
 
 export const IconArrowSmall = memo<
   JSX.IntrinsicElements['svg'] & {
-    displayDirection: 'left' | 'right' | 'up' | 'down';
+    /**
+     * The direction the arrow should point.
+     * `start` and `end` are relative to the current locale.
+     * for example, in LTR, `start` is left and `end` is right.
+     */
+    displayDirection: 'start' | 'end' | 'right' | 'left' | 'up' | 'down';
   }
 >(function IconArrowSmall({displayDirection, className, ...rest}) {
   const classes = cn(className, {
     'rotate-180': displayDirection === 'left',
+    'rotate-180 rtl:rotate-0': displayDirection === 'start',
     'rotate-90': displayDirection === 'down',
   });
   return (
diff --git a/src/components/Icon/IconChevron.tsx b/src/components/Icon/IconChevron.tsx
index 1184d77d2..4d40330ce 100644
--- a/src/components/Icon/IconChevron.tsx
+++ b/src/components/Icon/IconChevron.tsx
@@ -7,7 +7,12 @@ import cn from 'classnames';
 
 export const IconChevron = memo<
   JSX.IntrinsicElements['svg'] & {
-    displayDirection: 'up' | 'down' | 'left' | 'right';
+    /**
+     * The direction the arrow should point.
+     * `start` and `end` are relative to the current locale.
+     * for example, in LTR, `start` is left and `end` is right.
+     */
+    displayDirection: 'start' | 'end' | 'right' | 'left' | 'up' | 'down';
   }
 >(function IconChevron({className, displayDirection}) {
   const classes = cn(
@@ -16,6 +21,8 @@ export const IconChevron = memo<
       'rotate-90': displayDirection === 'left',
       'rotate-180': displayDirection === 'up',
       '-rotate-90': displayDirection === 'right',
+      'rotate-90 rtl:-rotate-90': displayDirection === 'start',
+      '-rotate-90 rtl:rotate-90': displayDirection === 'end',
     },
     className
   );
diff --git a/src/components/Icon/IconNavArrow.tsx b/src/components/Icon/IconNavArrow.tsx
index 93eed6e3c..f61175e9b 100644
--- a/src/components/Icon/IconNavArrow.tsx
+++ b/src/components/Icon/IconNavArrow.tsx
@@ -7,15 +7,22 @@ import cn from 'classnames';
 
 export const IconNavArrow = memo<
   JSX.IntrinsicElements['svg'] & {
-    displayDirection: 'right' | 'down' | 'left';
+    /**
+     * The direction the arrow should point.
+     * `start` and `end` are relative to the current locale.
+     * for example, in LTR, `start` is left and `end` is right.
+     */
+    displayDirection: 'start' | 'end' | 'right' | 'left' | 'down';
   }
->(function IconNavArrow({displayDirection = 'right', className}) {
+>(function IconNavArrow({displayDirection = 'start', className}) {
   const classes = cn(
     'duration-100 ease-in transition',
     {
       'rotate-0': displayDirection === 'down',
-      '-rotate-90': displayDirection === 'right',
       'rotate-90': displayDirection === 'left',
+      '-rotate-90': displayDirection === 'right',
+      'rotate-90 rtl:-rotate-90': displayDirection === 'start',
+      '-rotate-90 rtl:rotate-90': displayDirection === 'end',
     },
     className
   );
diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx
index 6bb8a4aac..2bf9afe57 100644
--- a/src/components/Layout/Feedback.tsx
+++ b/src/components/Layout/Feedback.tsx
@@ -62,13 +62,13 @@ function SendFeedback({onSubmit}: {onSubmit: () => void}) {
   const [isSubmitted, setIsSubmitted] = useState(false);
   return (
     <div className="max-w-xs w-80 lg:w-auto py-3 shadow-lg rounded-lg m-4 bg-wash dark:bg-gray-95 px-4 flex">
-      <p className="w-full font-bold text-primary dark:text-primary-dark text-lg mr-4">
+      <p className="w-full font-bold text-primary dark:text-primary-dark text-lg me-4">
         {isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'}
       </p>
       {!isSubmitted && (
         <button
           aria-label="Yes"
-          className="bg-secondary-button dark:bg-secondary-button-dark rounded-lg text-primary dark:text-primary-dark px-3 mr-2"
+          className="bg-secondary-button dark:bg-secondary-button-dark rounded-lg text-primary dark:text-primary-dark px-3 me-2"
           onClick={() => {
             setIsSubmitted(true);
             onSubmit();
diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx
index 4d0b06646..67e4667bf 100644
--- a/src/components/Layout/Footer.tsx
+++ b/src/components/Layout/Footer.tsx
@@ -15,7 +15,7 @@ export function Footer() {
   return (
     <footer className={cn('text-secondary dark:text-secondary-dark')}>
       <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-x-12 gap-y-8 max-w-7xl mx-auto">
-        <div className="col-span-2 md:col-span-1 justify-items-start mt-3.5 text-left">
+        <div className="col-span-2 md:col-span-1 justify-items-start mt-3.5">
           <ExternalLink
             href="https://opensource.fb.com/"
             aria-label="Meta Open Source">
@@ -280,7 +280,9 @@ export function Footer() {
             </div>
           </ExternalLink>
 
-          <div className="text-xs text-left mt-2 pr-0.5">
+          <div
+            className="text-xs text-left rtl:text-right mt-2 pe-0.5"
+            dir="ltr">
             &copy;{new Date().getFullYear()}
           </div>
         </div>
diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index e1b1b440d..d395ff384 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -113,11 +113,11 @@ const recentPosts = blogSidebar.routes.slice(0, 4).map((entry) => ({
 export function HomeContent() {
   return (
     <>
-      <div className="pl-0">
+      <div className="ps-0">
         <div className="mx-5 mt-12 lg:mt-24 mb-20 lg:mb-32 flex flex-col justify-center">
           <Logo
             className={cn(
-              'mt-4 mb-3 text-link dark:text-link-dark w-24 lg:w-28 self-center text-sm mr-0 flex origin-center transition-all ease-in-out'
+              'mt-4 mb-3 text-link dark:text-link-dark w-24 lg:w-28 self-center text-sm me-0 flex origin-center transition-all ease-in-out'
             )}
           />
           <h1 className="text-5xl font-display lg:text-6xl self-center flex font-semibold leading-snug text-primary dark:text-primary-dark">
@@ -379,7 +379,7 @@ export function HomeContent() {
                           more. They look and feel native because their UIs{' '}
                           <i>are</i> truly native. It’s not a web view—your
                           React components render real Android and iOS views
-                          provided by the platform.
+                          provided by the platform.
                         </p>
                       </div>
                     </div>
@@ -406,7 +406,7 @@ export function HomeContent() {
         <Section background="right-card">
           <div className="max-w-7xl mx-auto flex flex-col lg:flex-row px-5">
             <div className="max-w-3xl lg:max-w-7xl gap-5 flex flex-col lg:flex-row lg:px-5">
-              <div className="w-full lg:w-6/12 max-w-3xl flex flex-col items-start justify-start lg:pl-5 lg:pr-10">
+              <div className="w-full lg:w-6/12 max-w-3xl flex flex-col items-start justify-start lg:ps-5 lg:pe-10">
                 <Header>Upgrade when the future is ready</Header>
                 <Para>
                   React approaches changes with care. Every React commit is
@@ -433,14 +433,14 @@ export function HomeContent() {
                   <IconChevron />
                   Latest React News
                 </p>
-                <div className="flex-col sm:flex-row flex-wrap flex gap-5 text-left my-5">
-                  <div className="flex-1 min-w-[40%]">
+                <div className="flex-col sm:flex-row flex-wrap flex gap-5 text-start my-5">
+                  <div className="flex-1 min-w-[40%] text-start">
                     <BlogCard {...recentPosts[0]} />
                   </div>
-                  <div className="flex-1 min-w-[40%]">
+                  <div className="flex-1 min-w-[40%] text-start">
                     <BlogCard {...recentPosts[1]} />
                   </div>
-                  <div className="flex-1 min-w-[40%]">
+                  <div className="flex-1 min-w-[40%] text-start">
                     <BlogCard {...recentPosts[2]} />
                   </div>
                   <div className="hidden sm:flex-1 sm:inline">
@@ -491,7 +491,7 @@ export function HomeContent() {
           <div className="mt-20 px-5 lg:px-0 mb-6 max-w-4xl text-center text-opacity-80">
             <Logo className="text-link dark:text-link-dark w-24 lg:w-28 mb-10 lg:mb-8 mt-12 h-auto mx-auto self-start" />
             <Header>
-              Welcome to the <br className="" />
+              Welcome to the <br className="hidden lg:inline" />
               React community
             </Header>
             <ButtonLink
@@ -524,7 +524,7 @@ function CTA({children, icon, href}) {
       className="focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark group cursor-pointer w-auto justify-center inline-flex font-bold items-center mt-10 outline-none hover:bg-gray-40/5 active:bg-gray-40/10 hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10 leading-tight hover:bg-opacity-80 text-lg py-2.5 rounded-full px-4 sm:px-6 ease-in-out shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark text-primary dark:text-primary-dark">
       {icon === 'native' && (
         <svg
-          className="mr-2.5 text-primary dark:text-primary-dark"
+          className="me-2.5 text-primary dark:text-primary-dark"
           fill="none"
           width="24"
           height="24"
@@ -555,7 +555,7 @@ function CTA({children, icon, href}) {
       )}
       {icon === 'framework' && (
         <svg
-          className="mr-2.5 text-primary dark:text-primary-dark"
+          className="me-2.5 text-primary dark:text-primary-dark"
           fill="none"
           width="24"
           height="24"
@@ -578,7 +578,7 @@ function CTA({children, icon, href}) {
       )}
       {icon === 'code' && (
         <svg
-          className="mr-2.5 text-primary dark:text-primary-dark"
+          className="me-2.5 text-primary dark:text-primary-dark"
           fill="none"
           width="24"
           height="24"
@@ -607,7 +607,7 @@ function CTA({children, icon, href}) {
       )}
       {icon === 'news' && (
         <svg
-          className="mr-2.5 text-primary dark:text-primary-dark"
+          className="me-2.5 text-primary dark:text-primary-dark"
           fill="none"
           width="24"
           height="24"
@@ -623,7 +623,7 @@ function CTA({children, icon, href}) {
       )}
       {children}
       <svg
-        className="text-primary dark:text-primary-dark"
+        className="text-primary dark:text-primary-dark rtl:rotate-180"
         fill="none"
         width="24"
         height="24"
@@ -826,12 +826,12 @@ function ExampleLayout({
     }
   }, [activeArea, hoverTopOffset]);
   return (
-    <div className="lg:pl-10 lg:pr-5 w-full">
+    <div className="lg:ps-10 lg:pe-5 w-full">
       <div className="mt-12 mb-2 lg:my-16 max-w-7xl mx-auto flex flex-col w-full lg:rounded-2xl lg:bg-card lg:dark:bg-card-dark">
-        <div className="flex-col gap-0 lg:gap-5 lg:rounded-2xl lg:bg-gray-10 lg:dark:bg-gray-70 shadow-inner-border dark:shadow-inner-border-dark lg:flex-row flex grow w-full mx-auto items-center bg-cover bg-center lg:bg-right lg:bg-[length:60%_100%] bg-no-repeat bg-meta-gradient dark:bg-meta-gradient-dark">
+        <div className="flex-col gap-0 lg:gap-5 lg:rounded-2xl lg:bg-gray-10 lg:dark:bg-gray-70 shadow-inner-border dark:shadow-inner-border-dark lg:flex-row flex grow w-full mx-auto items-center bg-cover bg-center lg:bg-right ltr:lg:bg-[length:60%_100%] bg-no-repeat bg-meta-gradient dark:bg-meta-gradient-dark">
           <div className="lg:-m-5 h-full shadow-nav dark:shadow-nav-dark lg:rounded-2xl bg-wash dark:bg-gray-95 w-full flex grow flex-col">
             <div className="w-full bg-card dark:bg-wash-dark lg:rounded-t-2xl border-b border-black/5 dark:border-white/5">
-              <h3 className="text-sm my-1 mx-5 text-tertiary dark:text-tertiary-dark select-none">
+              <h3 className="text-sm my-1 mx-5 text-tertiary dark:text-tertiary-dark select-none text-start">
                 {filename}
               </h3>
             </div>
@@ -849,7 +849,7 @@ function ExampleLayout({
               {overlayStyles.map((styles, i) => (
                 <div
                   key={i}
-                  className="top-0 left-0 bg-blue-30/5 border-2 border-link dark:border-link-dark absolute rounded-lg"
+                  className="inset-x-0 bg-blue-30/5 border-2 border-link dark:border-link-dark absolute rounded-lg"
                   style={styles}
                 />
               ))}
@@ -1270,7 +1270,7 @@ function BrowserChrome({children, hasPulse, hasRefresh, domain, path}) {
           {hasRefresh && <div className="h-4 w-6" />}
           <div className="w-full leading-snug flex flex-row items-center justify-center">
             <svg
-              className="text-tertiary mr-1 opacity-60"
+              className="text-tertiary me-1 opacity-60"
               width="12"
               height="12"
               viewBox="0 0 44 44"
@@ -1317,7 +1317,7 @@ function BrowserChrome({children, hasPulse, hasRefresh, domain, path}) {
         {restartId > 0 && (
           <div
             key={restartId}
-            className="z-10 loading h-0.5 bg-link transition-all duration-200 absolute bottom-0 left-0"
+            className="z-10 loading h-0.5 bg-link transition-all duration-200 absolute bottom-0 start-0"
             style={{
               animation: `progressbar ${loadTalksDelay + 100}ms ease-in-out`,
             }}
@@ -1464,13 +1464,13 @@ function SearchInput({value, onChange}) {
         Search
       </label>
       <div className="relative w-full">
-        <div className="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none">
+        <div className="absolute inset-y-0 start-0 flex items-center ps-4 pointer-events-none">
           <IconSearch className="text-gray-30 w-4" />
         </div>
         <input
           type="text"
           id={id}
-          className="flex pl-11 py-4 h-10 w-full bg-secondary-button outline-none betterhover:hover:bg-opacity-80 pointer items-center text-left text-primary rounded-full align-middle text-base"
+          className="flex ps-11 py-4 h-10 w-full text-start bg-secondary-button outline-none betterhover:hover:bg-opacity-80 pointer items-center text-primary rounded-full align-middle text-base"
           placeholder="Search"
           value={value}
           onChange={(e) => onChange(e.target.value)}
@@ -1499,7 +1499,7 @@ function ConferenceLayout({conf, children}) {
               navigate(e.target.value);
             });
           }}
-          className="appearance-none pr-8 bg-transparent text-primary-dark text-2xl font-bold mb-0.5"
+          className="appearance-none pe-8 bg-transparent text-primary-dark text-2xl font-bold mb-0.5"
           style={{
             backgroundSize: '4px 4px, 4px 4px',
             backgroundRepeat: 'no-repeat',
@@ -1565,9 +1565,11 @@ function Video({video}) {
 
 function Code({children}) {
   return (
-    <span className="font-mono inline rounded-lg bg-gray-15/40 dark:bg-secondary-button-dark py-0.5 px-1">
+    <code
+      dir="ltr"
+      className="font-mono inline rounded-lg bg-gray-15/40 dark:bg-secondary-button-dark py-0.5 px-1 text-left">
       {children}
-    </span>
+    </code>
   );
 }
 
@@ -1610,7 +1612,7 @@ function Thumbnail({video}) {
           </div>
           <div className="mt-1">
             <span className="inline-flex text-xs font-normal items-center text-primary-dark py-1 whitespace-nowrap outline-link px-1.5 rounded-lg">
-              <Logo className="text-xs mr-1 w-4 h-4 text-link-dark" />
+              <Logo className="text-xs me-1 w-4 h-4 text-link-dark" />
               React Conf
             </span>
           </div>
diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
index 2b8ae3a62..fb771f901 100644
--- a/src/components/Layout/Page.tsx
+++ b/src/components/Layout/Page.tsx
@@ -50,7 +50,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
     content = <HomeContent />;
   } else {
     content = (
-      <div className="pl-0">
+      <div className="ps-0">
         <div
           className={cn(
             section === 'blog' && 'mx-auto px-0 lg:px-4 max-w-5xl'
@@ -124,7 +124,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
         )}>
         {showSidebar && (
           <div className="lg:-mt-16">
-            <div className="lg:pt-16 fixed lg:sticky top-0 left-0 right-0 py-0 shadow lg:shadow-none">
+            <div className="lg:pt-16 fixed lg:sticky top-0 start-0 end-0 py-0 shadow lg:shadow-none">
               <SidebarNav
                 key={section}
                 routeTree={routeTree}
@@ -166,8 +166,8 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
                             target="_blank">
                             Take our survey!
                             <IconNavArrow
-                              displayDirection="right"
-                              className="inline ml-1"
+                              displayDirection="end"
+                              className="inline ms-1"
                             />
                           </ButtonLink>
                         </div>
diff --git a/src/components/Layout/Sidebar/SidebarButton.tsx b/src/components/Layout/Sidebar/SidebarButton.tsx
index b1276cdb8..7b9f027a8 100644
--- a/src/components/Layout/Sidebar/SidebarButton.tsx
+++ b/src/components/Layout/Sidebar/SidebarButton.tsx
@@ -31,7 +31,7 @@ export function SidebarButton({
       })}>
       <button
         className={cn(
-          'p-2 pr-2 pl-5 w-full rounded-r-lg text-left hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
+          'p-2 pe-2 ps-5 w-full rounded-s-lg text-start hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
           {
             'p-2 text-base': level > 1,
             'text-link bg-highlight dark:bg-highlight-dark text-base font-bold hover:bg-highlight dark:hover:bg-highlight-dark hover:text-link dark:hover:text-link-dark':
@@ -47,8 +47,8 @@ export function SidebarButton({
         onClick={onClick}>
         {title}
         {typeof isExpanded && !heading && (
-          <span className="pr-2 text-gray-30">
-            <IconNavArrow displayDirection={isExpanded ? 'down' : 'right'} />
+          <span className="pe-2 text-gray-30">
+            <IconNavArrow displayDirection={isExpanded ? 'down' : 'end'} />
           </span>
         )}
       </button>
diff --git a/src/components/Layout/Sidebar/SidebarLink.tsx b/src/components/Layout/Sidebar/SidebarLink.tsx
index 0bf6f349c..1b961e9c6 100644
--- a/src/components/Layout/Sidebar/SidebarLink.tsx
+++ b/src/components/Layout/Sidebar/SidebarLink.tsx
@@ -58,10 +58,10 @@ export function SidebarLink({
       passHref
       aria-current={selected ? 'page' : undefined}
       className={cn(
-        'p-2 pr-2 w-full rounded-none lg:rounded-r-2xl text-left hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
+        'p-2 pe-2 w-full rounded-none lg:rounded-s-2xl text-start hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
         {
-          'text-sm pl-6': level > 0,
-          'pl-5': level < 2,
+          'text-sm ps-6': level > 0,
+          'ps-5': level < 2,
           'text-base font-bold': level === 0,
           'text-primary dark:text-primary-dark': level === 0 && !selected,
           'text-base text-secondary dark:text-secondary-dark':
@@ -85,11 +85,11 @@ export function SidebarLink({
 
       {isExpanded != null && !hideArrow && (
         <span
-          className={cn('pr-1', {
+          className={cn('pe-1', {
             'text-link dark:text-link-dark': isExpanded,
             'text-tertiary dark:text-tertiary-dark': !isExpanded,
           })}>
-          <IconNavArrow displayDirection={isExpanded ? 'down' : 'right'} />
+          <IconNavArrow displayDirection={isExpanded ? 'down' : 'end'} />
         </span>
       )}
     </Link>
diff --git a/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/src/components/Layout/Sidebar/SidebarRouteTree.tsx
index fa920ad9d..9a0dd23f5 100644
--- a/src/components/Layout/Sidebar/SidebarRouteTree.tsx
+++ b/src/components/Layout/Sidebar/SidebarRouteTree.tsx
@@ -155,12 +155,12 @@ export function SidebarRouteTree({
                 {index !== 0 && (
                   <li
                     role="separator"
-                    className="mt-4 mb-2 ml-5 border-b border-border dark:border-border-dark"
+                    className="mt-4 mb-2 ms-5 border-b border-border dark:border-border-dark"
                   />
                 )}
                 <h3
                   className={cn(
-                    'mb-1 text-sm font-bold ml-5 text-tertiary dark:text-tertiary-dark',
+                    'mb-1 text-sm font-bold ms-5 text-tertiary dark:text-tertiary-dark',
                     index !== 0 && 'mt-2'
                   )}>
                   {sectionHeader}
diff --git a/src/components/Layout/SidebarNav/SidebarNav.tsx b/src/components/Layout/SidebarNav/SidebarNav.tsx
index 525fddfb4..702ff5b5a 100644
--- a/src/components/Layout/SidebarNav/SidebarNav.tsx
+++ b/src/components/Layout/SidebarNav/SidebarNav.tsx
@@ -45,7 +45,7 @@ export default function SidebarNav({
           <nav
             role="navigation"
             style={{'--bg-opacity': '.2'} as React.CSSProperties} // Need to cast here because CSS vars aren't considered valid in TS types (cuz they could be anything)
-            className="w-full lg:h-auto grow pr-0 lg:pr-5 pt-6 lg:pb-16 md:pt-4 lg:pt-4 scrolling-touch scrolling-gpu">
+            className="w-full lg:h-auto grow pe-0 lg:pe-5 pt-6 lg:pb-16 md:pt-4 lg:pt-4 scrolling-touch scrolling-gpu">
             {/* No fallback UI so need to be careful not to suspend directly inside. */}
             <Suspense fallback={null}>
               <SidebarRouteTree
diff --git a/src/components/Layout/Toc.tsx b/src/components/Layout/Toc.tsx
index a24bbced6..628dbd61f 100644
--- a/src/components/Layout/Toc.tsx
+++ b/src/components/Layout/Toc.tsx
@@ -13,14 +13,14 @@ export function Toc({headings}: {headings: Toc}) {
   // Select the max TOC item we have here for now, but remove this after the fix.
   const selectedIndex = Math.min(currentIndex, headings.length - 1);
   return (
-    <nav role="navigation" className="pt-20 sticky top-0 right-0">
+    <nav role="navigation" className="pt-20 sticky top-0 end-0">
       {headings.length > 0 && (
         <h2 className="mb-3 lg:mb-3 uppercase tracking-wide font-bold text-sm text-secondary dark:text-secondary-dark px-4 w-full">
           On this page
         </h2>
       )}
       <div
-        className="h-full overflow-y-auto pl-4 max-h-[calc(100vh-7.5rem)]"
+        className="h-full overflow-y-auto ps-4 max-h-[calc(100vh-7.5rem)]"
         style={{
           overscrollBehavior: 'contain',
         }}>
@@ -35,12 +35,12 @@ export function Toc({headings}: {headings: Toc}) {
                 <li
                   key={`heading-${h.url}-${i}`}
                   className={cx(
-                    'text-sm px-2 rounded-l-xl',
+                    'text-sm px-2 rounded-s-xl',
                     selectedIndex === i
                       ? 'bg-highlight dark:bg-highlight-dark'
                       : null,
                     {
-                      'pl-4': h?.depth === 3,
+                      'ps-4': h?.depth === 3,
                       hidden: h.depth && h.depth > 3,
                     }
                   )}>
diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx
index 56522665e..759959570 100644
--- a/src/components/Layout/TopNav/TopNav.tsx
+++ b/src/components/Layout/TopNav/TopNav.tsx
@@ -127,7 +127,7 @@ function Kbd(props: {children?: React.ReactNode; wide?: boolean}) {
 
   return (
     <kbd
-      className={`${width} h-5 border border-transparent mr-1 bg-wash dark:bg-wash-dark text-gray-30 align-middle p-0 inline-flex justify-center items-center text-xs text-center rounded-md`}
+      className={`${width} h-5 border border-transparent me-1 bg-wash dark:bg-wash-dark text-gray-30 align-middle p-0 inline-flex justify-center items-center text-xs text-center rounded-md`}
       {...rest}
     />
   );
@@ -230,7 +230,7 @@ export default function TopNav({
         )}>
         <nav
           className={cn(
-            'duration-300 backdrop-filter backdrop-blur-lg backdrop-saturate-200 transition-shadow bg-opacity-90 items-center w-full flex justify-between bg-wash dark:bg-wash-dark dark:bg-opacity-95 px-1.5 lg:pr-5 lg:pl-4 z-50',
+            'duration-300 backdrop-filter backdrop-blur-lg backdrop-saturate-200 transition-shadow bg-opacity-90 items-center w-full flex justify-between bg-wash dark:bg-wash-dark dark:bg-opacity-95 px-1.5 lg:pe-5 lg:ps-4 z-50',
             {'dark:shadow-nav-dark shadow-nav': isScrolled || isOpen}
           )}>
           <div className="h-16 w-full gap-0 sm:gap-3 flex items-center justify-between">
@@ -253,7 +253,7 @@ export default function TopNav({
                   className={`active:scale-95 overflow-hidden transition-transform relative items-center text-primary dark:text-primary-dark p-1 whitespace-nowrap outline-link rounded-full 3xl:rounded-xl inline-flex text-lg font-normal gap-2`}>
                   <Logo
                     className={cn(
-                      'text-sm mr-0 w-10 h-10 text-link dark:text-link-dark flex origin-center transition-all ease-in-out'
+                      'text-sm me-0 w-10 h-10 text-link dark:text-link-dark flex origin-center transition-all ease-in-out'
                     )}
                   />
                   <span className="sr-only 3xl:not-sr-only">React</span>
@@ -264,12 +264,12 @@ export default function TopNav({
               <button
                 type="button"
                 className={cn(
-                  'flex 3xl:w-[56rem] 3xl:mx-0 relative pl-4 pr-1 py-1 h-10 bg-gray-30/20 dark:bg-gray-40/20 outline-none focus:outline-link betterhover:hover:bg-opacity-80 pointer items-center text-left w-full text-gray-30 rounded-full align-middle text-base'
+                  'flex 3xl:w-[56rem] 3xl:mx-0 relative ps-4 pe-1 py-1 h-10 bg-gray-30/20 dark:bg-gray-40/20 outline-none focus:outline-link betterhover:hover:bg-opacity-80 pointer items-center text-start w-full text-gray-30 rounded-full align-middle text-base'
                 )}
                 onClick={onOpenSearch}>
-                <IconSearch className="mr-3 align-middle text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />
+                <IconSearch className="me-3 align-middle text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />
                 Search
-                <span className="ml-auto hidden sm:flex item-center mr-1">
+                <span className="ms-auto hidden sm:flex item-center me-1">
                   <Kbd data-platform="mac">⌘</Kbd>
                   <Kbd data-platform="win" wide>
                     Ctrl
@@ -355,10 +355,10 @@ export default function TopNav({
               <nav
                 role="navigation"
                 style={{'--bg-opacity': '.2'} as React.CSSProperties} // Need to cast here because CSS vars aren't considered valid in TS types (cuz they could be anything)
-                className="w-full lg:h-auto grow pr-0 lg:pr-5 pt-4 lg:py-6 md:pt-4 lg:pt-4 scrolling-touch scrolling-gpu">
+                className="w-full lg:h-auto grow pe-0 lg:pe-5 pt-4 lg:py-6 md:pt-4 lg:pt-4 scrolling-touch scrolling-gpu">
                 {/* No fallback UI so need to be careful not to suspend directly inside. */}
                 <Suspense fallback={null}>
-                  <div className="pl-3 xs:pl-5 xs:gap-0.5 xs:text-base overflow-x-auto flex flex-row lg:hidden text-base font-bold text-secondary dark:text-secondary-dark">
+                  <div className="ps-3 xs:ps-5 xs:gap-0.5 xs:text-base overflow-x-auto flex flex-row lg:hidden text-base font-bold text-secondary dark:text-secondary-dark">
                     <NavItem isActive={section === 'learn'} url="/learn">
                       Learn
                     </NavItem>
@@ -378,7 +378,7 @@ export default function TopNav({
                   </div>
                   <div
                     role="separator"
-                    className="ml-5 mt-4 mb-2 border-b border-border dark:border-border-dark"
+                    className="ms-5 mt-4 mb-2 border-b border-border dark:border-border-dark"
                   />
                   <SidebarRouteTree
                     // Don't share state between the desktop and mobile versions.
diff --git a/src/components/MDX/Challenges/Challenge.tsx b/src/components/MDX/Challenges/Challenge.tsx
index 24e99541c..e54bf920a 100644
--- a/src/components/MDX/Challenges/Challenge.tsx
+++ b/src/components/MDX/Challenges/Challenge.tsx
@@ -61,25 +61,25 @@ export function Challenge({
       <div className="flex justify-between items-center mt-4">
         {currentChallenge.hint ? (
           <div>
-            <Button className="mr-2" onClick={toggleHint} active={showHint}>
-              <IconHint className="mr-1.5" />{' '}
+            <Button className="me-2" onClick={toggleHint} active={showHint}>
+              <IconHint className="me-1.5" />{' '}
               {showHint ? 'Hide hint' : 'Show hint'}
             </Button>
             <Button
-              className="mr-2"
+              className="me-2"
               onClick={toggleSolution}
               active={showSolution}>
-              <IconSolution className="mr-1.5" />{' '}
+              <IconSolution className="me-1.5" />{' '}
               {showSolution ? 'Hide solution' : 'Show solution'}
             </Button>
           </div>
         ) : (
           !isRecipes && (
             <Button
-              className="mr-2"
+              className="me-2"
               onClick={toggleSolution}
               active={showSolution}>
-              <IconSolution className="mr-1.5" />{' '}
+              <IconSolution className="me-1.5" />{' '}
               {showSolution ? 'Hide solution' : 'Show solution'}
             </Button>
           )
@@ -95,7 +95,7 @@ export function Challenge({
             onClick={handleClickNextChallenge}
             active>
             Next {isRecipes ? 'Example' : 'Challenge'}
-            <IconArrowSmall displayDirection="right" className="block ml-1.5" />
+            <IconArrowSmall displayDirection="end" className="block ms-1.5" />
           </Button>
         )}
       </div>
@@ -120,8 +120,8 @@ export function Challenge({
                 active>
                 Next Challenge
                 <IconArrowSmall
-                  displayDirection="right"
-                  className="block ml-1.5"
+                  displayDirection="end"
+                  className="block ms-1.5"
                 />
               </Button>
             )}
diff --git a/src/components/MDX/Challenges/Navigation.tsx b/src/components/MDX/Challenges/Navigation.tsx
index e448828cf..736db093c 100644
--- a/src/components/MDX/Challenges/Navigation.tsx
+++ b/src/components/MDX/Challenges/Navigation.tsx
@@ -87,7 +87,7 @@ export function Navigation({
           {challenges.map(({name, id, order}, index) => (
             <button
               className={cn(
-                'py-2 mr-4 text-base border-b-4 duration-100 ease-in transition whitespace-nowrap text-ellipsis',
+                'py-2 me-4 text-base border-b-4 duration-100 ease-in transition whitespace-nowrap text-ellipsis',
                 isRecipes &&
                   currentChallenge.id === id &&
                   'text-purple-50 border-purple-50 hover:text-purple-50 dark:text-purple-30 dark:border-purple-30 dark:hover:text-purple-30',
@@ -103,30 +103,30 @@ export function Navigation({
           ))}
         </div>
       </div>
-      <div className="flex z-10 pb-2 pl-2">
+      <div className="flex z-10 pb-2 ps-2">
         <button
           onClick={handleScrollLeft}
           aria-label="Scroll left"
           className={cn(
-            'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-l border-gray-20 border-r',
+            'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-l border-gray-20 border-r rtl:rotate-180',
             {
               'text-primary dark:text-primary-dark': canScrollLeft,
               'text-gray-30': !canScrollLeft,
             }
           )}>
-          <IconChevron displayDirection="left" />
+          <IconChevron displayDirection="start" />
         </button>
         <button
           onClick={handleScrollRight}
           aria-label="Scroll right"
           className={cn(
-            'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-r',
+            'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-e rtl:rotate-180',
             {
               'text-primary dark:text-primary-dark': canScrollRight,
               'text-gray-30': !canScrollRight,
             }
           )}>
-          <IconChevron displayDirection="right" />
+          <IconChevron displayDirection="end" />
         </button>
       </div>
     </div>
diff --git a/src/components/MDX/CodeBlock/CodeBlock.tsx b/src/components/MDX/CodeBlock/CodeBlock.tsx
index 3195bbe8f..21ab31e7c 100644
--- a/src/components/MDX/CodeBlock/CodeBlock.tsx
+++ b/src/components/MDX/CodeBlock/CodeBlock.tsx
@@ -202,6 +202,7 @@ const CodeBlock = function CodeBlock({
 
   return (
     <div
+      dir="ltr"
       className={cn(
         'sandpack sandpack--codeblock',
         'rounded-2xl h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg',
diff --git a/src/components/MDX/CodeBlock/index.tsx b/src/components/MDX/CodeBlock/index.tsx
index e449e6b9e..551c1d1b6 100644
--- a/src/components/MDX/CodeBlock/index.tsx
+++ b/src/components/MDX/CodeBlock/index.tsx
@@ -24,11 +24,13 @@ export default memo(function CodeBlockWrapper(props: {
     <Suspense
       fallback={
         <pre
+          translate="no"
+          dir="ltr"
           className={cn(
             'rounded-lg leading-6 h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg text-[13.6px] overflow-hidden',
             !isFromPackageImport && 'my-8'
           )}>
-          <div className="py-[18px] pl-5 font-normal ">
+          <div className="py-[18px] ps-5 font-normal ">
             <p className="sp-pre-placeholder overflow-hidden">{children}</p>
           </div>
         </pre>
diff --git a/src/components/MDX/ConsoleBlock.tsx b/src/components/MDX/ConsoleBlock.tsx
index de6201b6a..5683d6dcf 100644
--- a/src/components/MDX/ConsoleBlock.tsx
+++ b/src/components/MDX/ConsoleBlock.tsx
@@ -38,7 +38,7 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
   }
 
   return (
-    <div className="mb-4 text-secondary" translate="no">
+    <div className="mb-4 text-secondary" translate="no" dir="ltr">
       <div className="flex w-full rounded-t-lg bg-gray-200 dark:bg-gray-80">
         <div className="px-4 py-2 border-gray-300 dark:border-gray-90 border-r">
           <Box className="bg-gray-300 dark:bg-gray-70" width="15px" />
@@ -48,8 +48,8 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
             Console
           </div>
           <div className="px-4 py-2 flex">
-            <Box className="mr-2 bg-gray-300 dark:bg-gray-70" />
-            <Box className="mr-2 hidden md:block bg-gray-300 dark:bg-gray-70" />
+            <Box className="me-2 bg-gray-300 dark:bg-gray-70" />
+            <Box className="me-2 hidden md:block bg-gray-300 dark:bg-gray-70" />
             <Box className="hidden md:block bg-gray-300 dark:bg-gray-70" />
           </div>
         </div>
diff --git a/src/components/MDX/ExpandableCallout.tsx b/src/components/MDX/ExpandableCallout.tsx
index f8c61785e..c46898026 100644
--- a/src/components/MDX/ExpandableCallout.tsx
+++ b/src/components/MDX/ExpandableCallout.tsx
@@ -75,7 +75,7 @@ function ExpandableCallout({children, type = 'note'}: ExpandableCalloutProps) {
       )}>
       <h3 className={cn('text-2xl font-display font-bold', variant.textColor)}>
         <variant.Icon
-          className={cn('inline mr-3 mb-1 text-lg', variant.textColor)}
+          className={cn('inline me-3 mb-1 text-lg', variant.textColor)}
         />
         {variant.title}
       </h3>
diff --git a/src/components/MDX/ExpandableExample.tsx b/src/components/MDX/ExpandableExample.tsx
index 1ad1e0313..1e709e483 100644
--- a/src/components/MDX/ExpandableExample.tsx
+++ b/src/components/MDX/ExpandableExample.tsx
@@ -70,13 +70,13 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) {
           })}>
           {isDeepDive && (
             <>
-              <IconDeepDive className="inline mr-2 dark:text-purple-30 text-purple-40" />
+              <IconDeepDive className="inline me-2 dark:text-purple-30 text-purple-40" />
               Deep Dive
             </>
           )}
           {isExample && (
             <>
-              <IconCodeBlock className="inline mr-2 dark:text-yellow-30 text-yellow-50" />
+              <IconCodeBlock className="inline me-2 dark:text-yellow-30 text-yellow-50" />
               Example
             </>
           )}
@@ -98,7 +98,7 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) {
               isExample,
           })}
           onClick={() => setIsExpanded((current) => !current)}>
-          <span className="mr-1">
+          <span className="me-1">
             <IconChevron displayDirection={isExpanded ? 'up' : 'down'} />
           </span>
           {isExpanded ? 'Hide Details' : 'Show Details'}
diff --git a/src/components/MDX/Heading.tsx b/src/components/MDX/Heading.tsx
index 707e5e3ca..50e209e74 100644
--- a/src/components/MDX/Heading.tsx
+++ b/src/components/MDX/Heading.tsx
@@ -39,7 +39,7 @@ const Heading = forwardRefWithAs<HeadingProps, 'div'>(function Heading(
             height="1em"
             viewBox="0 0 13 13"
             xmlns="http://www.w3.org/2000/svg"
-            className="text-gray-70 ml-2 h-5 w-5">
+            className="text-gray-70 ms-2 h-5 w-5">
             <g fill="currentColor" fillRule="evenodd">
               <path d="M7.778 7.975a2.5 2.5 0 0 0 .347-3.837L6.017 2.03a2.498 2.498 0 0 0-3.542-.007 2.5 2.5 0 0 0 .006 3.543l1.153 1.15c.07-.29.154-.563.25-.773.036-.077.084-.16.14-.25L3.18 4.85a1.496 1.496 0 0 1 .002-2.12 1.496 1.496 0 0 1 2.12 0l2.124 2.123a1.496 1.496 0 0 1-.333 2.37c.16.246.42.504.685.752z" />
               <path d="M5.657 4.557a2.5 2.5 0 0 0-.347 3.837l2.108 2.108a2.498 2.498 0 0 0 3.542.007 2.5 2.5 0 0 0-.006-3.543L9.802 5.815c-.07.29-.154.565-.25.774-.036.076-.084.16-.14.25l.842.84c.585.587.59 1.532 0 2.122-.587.585-1.532.59-2.12 0L6.008 7.68a1.496 1.496 0 0 1 .332-2.372c-.16-.245-.42-.503-.685-.75z" />
diff --git a/src/components/MDX/InlineCode.tsx b/src/components/MDX/InlineCode.tsx
index 4a87c2a53..d206e9888 100644
--- a/src/components/MDX/InlineCode.tsx
+++ b/src/components/MDX/InlineCode.tsx
@@ -13,6 +13,7 @@ function InlineCode({
 }: JSX.IntrinsicElements['code'] & InlineCodeProps) {
   return (
     <code
+      dir="ltr" // This is needed to prevent the code from inheriting the RTL direction of <html> in case of RTL languages to avoid like `()console.log` to be rendered as `console.log()`
       className={cn(
         'inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline',
         {
diff --git a/src/components/MDX/MDXComponents.module.css b/src/components/MDX/MDXComponents.module.css
index 9840e77ce..e3ed413e0 100644
--- a/src/components/MDX/MDXComponents.module.css
+++ b/src/components/MDX/MDXComponents.module.css
@@ -8,11 +8,11 @@
 }
 
 .markdown ol {
-  @apply mb-4 ml-8 list-decimal;
+  @apply mb-4 ms-8 list-decimal;
 }
 
 .markdown ul {
-  @apply mb-4 ml-8 list-disc;
+  @apply mb-4 ms-8 list-disc;
 }
 
 .markdown h1 {
@@ -30,7 +30,7 @@
 }
 
 .markdown code {
-  @apply text-gray-70 bg-card dark:bg-card-dark   p-1 rounded-lg no-underline;
+  @apply text-gray-70 bg-card dark:bg-card-dark p-1 rounded-lg no-underline;
   font-size: 90%;
 }
 
diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx
index f2c792cb9..a35a15147 100644
--- a/src/components/MDX/MDXComponents.tsx
+++ b/src/components/MDX/MDXComponents.tsx
@@ -62,13 +62,13 @@ const Strong = (strong: JSX.IntrinsicElements['strong']) => (
 );
 
 const OL = (p: JSX.IntrinsicElements['ol']) => (
-  <ol className="ml-6 my-3 list-decimal" {...p} />
+  <ol className="ms-6 my-3 list-decimal" {...p} />
 );
 const LI = (p: JSX.IntrinsicElements['li']) => (
   <li className="leading-relaxed mb-1" {...p} />
 );
 const UL = (p: JSX.IntrinsicElements['ul']) => (
-  <ul className="ml-6 my-3 list-disc" {...p} />
+  <ul className="ms-6 my-3 list-disc" {...p} />
 );
 
 const Divider = () => (
@@ -127,7 +127,7 @@ function LearnMore({
               href={path}
               type="primary">
               Read More
-              <IconNavArrow displayDirection="right" className="inline ml-1" />
+              <IconNavArrow displayDirection="end" className="inline ms-1" />
             </ButtonLink>
           ) : null}
         </div>
@@ -141,7 +141,7 @@ function ReadBlogPost({path}: {path: string}) {
   return (
     <ButtonLink className="mt-1" label="Read Post" href={path} type="primary">
       Read Post
-      <IconNavArrow displayDirection="right" className="inline ml-1" />
+      <IconNavArrow displayDirection="end" className="inline ms-1" />
     </ButtonLink>
   );
 }
@@ -195,7 +195,7 @@ function AuthorCredit({
 }) {
   return (
     <div className="sr-only group-hover:not-sr-only group-focus-within:not-sr-only hover:sr-only">
-      <p className="bg-card dark:bg-card-dark text-center text-sm text-secondary dark:text-secondary-dark leading-tight dark:text-secondary-dark p-2 rounded-lg absolute left-1/2 -top-4 -translate-x-1/2 -translate-y-full group-hover:flex group-hover:opacity-100 after:content-[''] after:absolute after:left-1/2 after:top-[95%] after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-b-transparent after:border-t-card after:dark:border-t-card-dark opacity-0 transition-opacity duration-300">
+      <p className="bg-card dark:bg-card-dark text-center text-sm text-secondary dark:text-secondary-dark leading-tight p-2 rounded-lg absolute start-1/2 -top-4 -translate-x-1/2 -translate-y-full group-hover:flex group-hover:opacity-100 after:content-[''] after:absolute after:start-1/2 after:top-[95%] after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-b-transparent after:border-t-card after:dark:border-t-card-dark opacity-0 transition-opacity duration-300">
         <cite>
           Illustrated by{' '}
           {authorLink ? (
@@ -407,7 +407,7 @@ export const MDXComponents = {
     return children;
   },
   MaxWidth({children}: {children: any}) {
-    return <div className="max-w-4xl ml-0 2xl:mx-auto">{children}</div>;
+    return <div className="max-w-4xl ms-0 2xl:mx-auto">{children}</div>;
   },
   Pitfall,
   Deprecated,
diff --git a/src/components/MDX/Sandpack/Console.tsx b/src/components/MDX/Sandpack/Console.tsx
index 23194c870..85daee1f8 100644
--- a/src/components/MDX/Sandpack/Console.tsx
+++ b/src/components/MDX/Sandpack/Console.tsx
@@ -162,7 +162,7 @@ export const SandpackConsole = ({visible}: {visible: boolean}) => {
           className="flex items-center p-1"
           onClick={() => setIsExpanded(!isExpanded)}>
           <IconChevron displayDirection={isExpanded ? 'down' : 'right'} />
-          <span className="pl-1 text-sm">Console ({logs.length})</span>
+          <span className="ps-1 text-sm">Console ({logs.length})</span>
         </button>
         <button
           className="p-1"
@@ -191,7 +191,7 @@ export const SandpackConsole = ({visible}: {visible: boolean}) => {
                 <div
                   key={id}
                   className={cn(
-                    'first:border-none border-t dark:border-gray-700 text-md p-1 pl-2 leading-6 font-mono min-h-[32px] whitespace-pre-wrap',
+                    'first:border-none border-t dark:border-gray-700 text-md p-1 ps-2 leading-6 font-mono min-h-[32px] whitespace-pre-wrap',
                     `console-${getType(method)}`,
                     getColor(method)
                   )}>
diff --git a/src/components/MDX/Sandpack/CustomPreset.tsx b/src/components/MDX/Sandpack/CustomPreset.tsx
index 46e0ca255..7b4d9dee2 100644
--- a/src/components/MDX/Sandpack/CustomPreset.tsx
+++ b/src/components/MDX/Sandpack/CustomPreset.tsx
@@ -115,7 +115,7 @@ const SandboxShell = memo(function SandboxShell({
               }}>
               <span className="flex p-2 focus:outline-none text-primary dark:text-primary-dark leading-[20px]">
                 <IconChevron
-                  className="inline mr-1.5 text-xl"
+                  className="inline me-1.5 text-xl"
                   displayDirection={isExpanded ? 'up' : 'down'}
                 />
                 {isExpanded ? 'Show less' : 'Show more'}
diff --git a/src/components/MDX/Sandpack/DownloadButton.tsx b/src/components/MDX/Sandpack/DownloadButton.tsx
index 4d206fff8..75ed0c32d 100644
--- a/src/components/MDX/Sandpack/DownloadButton.tsx
+++ b/src/components/MDX/Sandpack/DownloadButton.tsx
@@ -103,7 +103,7 @@ ${css}
       onClick={downloadHTML}
       title="Download Sandbox"
       type="button">
-      <IconDownload className="inline mr-1" /> Download
+      <IconDownload className="inline me-1" /> Download
     </button>
   );
 }
diff --git a/src/components/MDX/Sandpack/NavigationBar.tsx b/src/components/MDX/Sandpack/NavigationBar.tsx
index 27ae43c0d..1392ea7dd 100644
--- a/src/components/MDX/Sandpack/NavigationBar.tsx
+++ b/src/components/MDX/Sandpack/NavigationBar.tsx
@@ -138,7 +138,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
                   // space that's taken by the (invisible) tab list.
                   <button
                     className={cn(
-                      'absolute top-0 left-[2px]',
+                      'absolute top-0 start-[2px]',
                       !showDropdown && 'invisible'
                     )}>
                     <span
@@ -148,7 +148,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
                       style={{maxWidth: '160px'}}>
                       {getFileName(activeFile)}
                       {isMultiFile && (
-                        <span className="ml-2">
+                        <span className="ms-2">
                           <IconChevron
                             displayDirection={open ? 'up' : 'down'}
                           />
@@ -161,7 +161,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
             </div>
           </div>
           {isMultiFile && showDropdown && (
-            <Listbox.Options className="absolute mt-0.5 bg-card dark:bg-card-dark px-2 left-0 right-0 mx-0 rounded-b-lg border-1 border-border dark:border-border-dark rounded-sm shadow-md">
+            <Listbox.Options className="absolute mt-0.5 bg-card dark:bg-card-dark px-2 inset-x-0 mx-0 rounded-b-lg border-1 border-border dark:border-border-dark rounded-sm shadow-md">
               {visibleFiles.map((filePath: string) => (
                 <Listbox.Option key={filePath} value={filePath} as={Fragment}>
                   {({active}) => (
@@ -180,7 +180,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
         </Listbox>
       </div>
       <div
-        className="px-3 flex items-center justify-end text-right"
+        className="px-3 flex items-center justify-end text-start"
         translate="yes">
         <DownloadButton providedFiles={providedFiles} />
         <ResetButton onReset={handleReset} />
diff --git a/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx b/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
index 42a2d2743..f943ee6ff 100644
--- a/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
+++ b/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
@@ -8,10 +8,10 @@ import {IconNewPage} from '../../Icon/IconNewPage';
 export const OpenInCodeSandboxButton = () => {
   return (
     <UnstyledOpenInCodeSandboxButton
-      className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1 ml-2 md:ml-1"
+      className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1 ms-2 md:ms-1"
       title="Open in CodeSandbox">
       <IconNewPage
-        className="inline ml-1 mr-1 relative top-[1px]"
+        className="inline ms-1 me-1 relative top-[1px]"
         width="1em"
         height="1em"
       />
diff --git a/src/components/MDX/Sandpack/ResetButton.tsx b/src/components/MDX/Sandpack/ResetButton.tsx
index 1ac413138..243ce2349 100644
--- a/src/components/MDX/Sandpack/ResetButton.tsx
+++ b/src/components/MDX/Sandpack/ResetButton.tsx
@@ -15,7 +15,7 @@ export function ResetButton({onReset}: ResetButtonProps) {
       onClick={onReset}
       title="Reset Sandbox"
       type="button">
-      <IconRestart className="inline ml-1 mr-1 relative" /> Reset
+      <IconRestart className="inline ms-1 me-1 relative" /> Reset
     </button>
   );
 }
diff --git a/src/components/MDX/Sandpack/SandpackRoot.tsx b/src/components/MDX/Sandpack/SandpackRoot.tsx
index 043daf9b1..f710f8fe0 100644
--- a/src/components/MDX/Sandpack/SandpackRoot.tsx
+++ b/src/components/MDX/Sandpack/SandpackRoot.tsx
@@ -62,7 +62,7 @@ code {
 }
 
 ul {
-  padding-left: 20px;
+  padding-inline-start: 20px;
 }
 `.trim();
 
@@ -78,7 +78,7 @@ function SandpackRoot(props: SandpackProps) {
   };
 
   return (
-    <div className="sandpack sandpack--playground w-full my-8">
+    <div className="sandpack sandpack--playground w-full my-8" dir="ltr">
       <SandpackProvider
         template="react"
         files={files}
diff --git a/src/components/MDX/Sandpack/index.tsx b/src/components/MDX/Sandpack/index.tsx
index 3591e0581..6873547a1 100644
--- a/src/components/MDX/Sandpack/index.tsx
+++ b/src/components/MDX/Sandpack/index.tsx
@@ -23,7 +23,7 @@ const SandpackGlimmer = ({code}: {code: string}) => (
               <div className="sp-cm sp-pristine">
                 <div className="cm-editor">
                   <div>
-                    <div className="cm-gutters pl-9 sticky min-h-[192px]">
+                    <div className="cm-gutters ps-9 sticky min-h-[192px]">
                       <div className="cm-gutter cm-lineNumbers whitespace-pre sp-pre-placeholder">
                         {code}
                       </div>
diff --git a/src/components/MDX/TeamMember.tsx b/src/components/MDX/TeamMember.tsx
index 0db067e10..da2dc4535 100644
--- a/src/components/MDX/TeamMember.tsx
+++ b/src/components/MDX/TeamMember.tsx
@@ -53,7 +53,7 @@ export function TeamMember({
           className="block w-full sm:hidden flex-grow basis-2/5 rounded overflow-hidden relative">
           <Image src={photo} layout="fill" objectFit="cover" alt={name} />
         </div>
-        <div className="pl-0 sm:pl-6 basis-3/5 items-start">
+        <div className="ps-0 sm:ps-6 basis-3/5 items-start">
           <H3 className="mb-1 sm:my-0" id={permalink}>
             {name}
           </H3>
@@ -61,23 +61,23 @@ export function TeamMember({
           {children}
           <div className="sm:flex sm:flex-row">
             {twitter && (
-              <div className="mr-4">
+              <div className="me-4">
                 <ExternalLink
                   aria-label="React on Twitter"
                   href={`https://twitter.com/${twitter}`}
                   className="hover:text-primary dark:text-primary-dark flex flex-row items-center">
-                  <IconTwitter className="pr-2" />
+                  <IconTwitter className="pe-2" />
                   {twitter}
                 </ExternalLink>
               </div>
             )}
             {github && (
-              <div className="mr-4">
+              <div className="me-4">
                 <ExternalLink
                   aria-label="GitHub Profile"
                   href={`https://github.com/${github}`}
                   className="hover:text-primary dark:text-primary-dark flex flex-row items-center">
-                  <IconGitHub className="pr-2" /> {github}
+                  <IconGitHub className="pe-2" /> {github}
                 </ExternalLink>
               </div>
             )}
@@ -86,7 +86,7 @@ export function TeamMember({
                 aria-label="Personal Site"
                 href={`https://${personal}`}
                 className="hover:text-primary dark:text-primary-dark flex flex-row items-center">
-                <IconLink className="pr-2" /> {personal}
+                <IconLink className="pe-2" /> {personal}
               </ExternalLink>
             )}
           </div>
diff --git a/src/components/MDX/TerminalBlock.tsx b/src/components/MDX/TerminalBlock.tsx
index 161e483b1..fc13af338 100644
--- a/src/components/MDX/TerminalBlock.tsx
+++ b/src/components/MDX/TerminalBlock.tsx
@@ -17,9 +17,9 @@ interface TerminalBlockProps {
 function LevelText({type}: {type: LogLevel}) {
   switch (type) {
     case 'warning':
-      return <span className="text-yellow-50 bg-none mr-1">Warning: </span>;
+      return <span className="text-yellow-50 bg-none me-1">Warning: </span>;
     case 'error':
-      return <span className="text-red-40 mr-1">Error: </span>;
+      return <span className="text-red-40 me-1">Error: </span>;
     default:
       return null;
   }
@@ -55,22 +55,25 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) {
       <div className="bg-gray-90 dark:bg-gray-60 w-full rounded-t-lg">
         <div className="text-primary-dark dark:text-primary-dark flex text-sm px-4 py-0.5 relative justify-between">
           <div>
-            <IconTerminal className="inline-flex mr-2 self-center" /> Terminal
+            <IconTerminal className="inline-flex me-2 self-center" /> Terminal
           </div>
           <div>
             <button
-              className="w-full text-left text-primary-dark dark:text-primary-dark "
+              className="w-full text-start text-primary-dark dark:text-primary-dark "
               onClick={() => {
                 window.navigator.clipboard.writeText(message ?? '');
                 setCopied(true);
               }}>
-              <IconCopy className="inline-flex mr-2 self-center" />{' '}
+              <IconCopy className="inline-flex me-2 self-center" />{' '}
               {copied ? 'Copied' : 'Copy'}
             </button>
           </div>
         </div>
       </div>
-      <div className="px-8 pt-4 pb-6 text-primary-dark dark:text-primary-dark font-mono text-code whitespace-pre overflow-x-scroll">
+      <div
+        className="px-8 pt-4 pb-6 text-primary-dark dark:text-primary-dark font-mono text-code whitespace-pre overflow-x-scroll"
+        translate="no"
+        dir="ltr">
         <LevelText type={level} />
         {message}
       </div>
diff --git a/src/components/MDX/YouWillLearnCard.tsx b/src/components/MDX/YouWillLearnCard.tsx
index 839876029..d46a70277 100644
--- a/src/components/MDX/YouWillLearnCard.tsx
+++ b/src/components/MDX/YouWillLearnCard.tsx
@@ -29,7 +29,7 @@ function YouWillLearnCard({title, path, children}: YouWillLearnCardProps) {
           size="md"
           label={title}>
           Read More
-          <IconNavArrow displayDirection="right" className="inline ml-1" />
+          <IconNavArrow displayDirection="end" className="inline ms-1" />
         </ButtonLink>
       </div>
     </div>
diff --git a/src/components/PageHeading.tsx b/src/components/PageHeading.tsx
index 9c411fd34..b6437b46b 100644
--- a/src/components/PageHeading.tsx
+++ b/src/components/PageHeading.tsx
@@ -28,7 +28,7 @@ function PageHeading({
 }: PageHeadingProps) {
   return (
     <div className="px-5 sm:px-12 pt-3.5">
-      <div className="max-w-4xl ml-0 2xl:mx-auto">
+      <div className="max-w-4xl ms-0 2xl:mx-auto">
         {breadcrumbs ? <Breadcrumbs breadcrumbs={breadcrumbs} /> : null}
         <H1 className="mt-0 text-primary dark:text-primary-dark -mx-.5 break-words">
           {title}
diff --git a/src/components/SocialBanner.tsx b/src/components/SocialBanner.tsx
index 826119c14..e980b6f4d 100644
--- a/src/components/SocialBanner.tsx
+++ b/src/components/SocialBanner.tsx
@@ -37,7 +37,7 @@ export default function SocialBanner() {
       )}>
       <div className="hidden sm:block">{bannerText}</div>
       <ExternalLink
-        className="ml-0 sm:ml-1 text-link dark:text-link-dark hover:underline"
+        className="ms-0 sm:ms-1 text-link dark:text-link-dark hover:underline"
         href={bannerLink}>
         <div className="inline sm:hidden">🇺🇦 </div>
         {bannerLinkText}
diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx
index 7033e030a..2e63a81f6 100644
--- a/src/components/Tag.tsx
+++ b/src/components/Tag.tsx
@@ -37,7 +37,7 @@ interface TagProps {
 function Tag({text, variant, className}: TagProps) {
   const {name, classes} = variantMap[variant];
   return (
-    <span className={cn('mr-2', className)}>
+    <span className={cn('me-2', className)}>
       <span
         className={cn(
           'inline font-bold text-sm uppercase py-1 px-2 rounded',
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 62c721c0d..392fdf88a 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -7,7 +7,7 @@ import {siteConfig} from '../siteConfig';
 
 const MyDocument = () => {
   return (
-    <Html lang={siteConfig.languageCode}>
+    <Html lang={siteConfig.languageCode} dir={siteConfig.isRTL ? 'rtl' : 'ltr'}>
       <Head />
       <body className="font-text font-medium antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
         <script
diff --git a/src/siteConfig.js b/src/siteConfig.js
index 156ba9f86..0ada6b934 100644
--- a/src/siteConfig.js
+++ b/src/siteConfig.js
@@ -7,6 +7,7 @@ exports.siteConfig = {
   // Translations should replace these lines:
   languageCode: 'en',
   hasLegacySite: true,
+  isRTL: false,
   // --------------------------------------
   copyright: `Copyright © ${new Date().getFullYear()} Facebook Inc. All Rights Reserved.`,
   repoUrl: 'https://github.com/facebook/react',
diff --git a/src/styles/algolia.css b/src/styles/algolia.css
index e682a9149..eff2e66ca 100644
--- a/src/styles/algolia.css
+++ b/src/styles/algolia.css
@@ -61,7 +61,7 @@ html.dark .DocSearch-Commands {
   @apply border-border-dark;
 }
 .DocSearch-Commands-Key {
-  @apply shadow-none;
+  @apply shadow-none me-[.4rem] ms-0;
   @apply bg-gray-10;
   @apply text-primary;
 }
@@ -69,6 +69,9 @@ html.dark .DocSearch-Commands {
   @apply pt-4;
   @apply pb-2;
 }
+.DocSearch-Logo svg {
+  @apply ms-2 me-0;
+}
 .DocSearch-Label {
   @apply text-xs;
 }
@@ -85,7 +88,7 @@ html.dark .DocSearch-Footer {
   @apply bg-wash-dark;
 }
 .DocSearch-Input {
-  @apply py-3;
+  @apply py-3 ps-2 pe-0;
   @apply text-base;
   @apply leading-tight;
   @apply text-primary;
@@ -96,10 +99,10 @@ html.dark .DocSearch-Input {
   @apply text-primary-dark;
 }
 .DocSearch-Hit a {
-  @apply rounded-r-lg;
-  @apply rounded-l-none;
+  @apply rounded-e-lg;
+  @apply rounded-s-none;
   @apply shadow-none;
-  @apply pl-5;
+  @apply ps-5;
 }
 .DocSearch-Hit-source {
   @apply uppercase;
@@ -108,14 +111,14 @@ html.dark .DocSearch-Input {
   @apply text-secondary;
   @apply font-bold;
   @apply pt-0;
-  @apply pl-5;
+  @apply ps-5;
   @apply m-0;
 }
 html.dark .DocSearch-Hit-source {
   @apply text-secondary-dark;
 }
 .DocSearch-Dropdown ul {
-  @apply mr-5;
+  @apply me-5;
 }
 .DocSearch-Hit-title {
   @apply text-base;
@@ -157,8 +160,8 @@ html.dark .DocSearch-Modal {
   @apply shadow-nav-dark;
 }
 .DocSearch-Cancel {
-  @apply pl-5;
-  @apply ml-0;
+  @apply ps-5;
+  @apply ms-0;
   @apply text-base;
   @apply text-link;
   @apply font-normal;
diff --git a/src/styles/index.css b/src/styles/index.css
index 7a2e2fa14..9e1ec4aaa 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -545,6 +545,12 @@
   }
 }
 
+@layer utilities {
+  [class*='space-x-'] {
+    @apply rtl:space-x-reverse;
+  }
+}
+
 .code-step * {
   color: inherit !important;
 }
@@ -560,7 +566,7 @@ html.dark .code-step * {
 .mdx-heading {
   scroll-margin-top: calc(4rem + 20px);
   /* Space for the anchor */
-  padding-right: 1em;
+  padding-inline-end: 1em;
 }
 
 .mdx-heading:before {
@@ -629,7 +635,7 @@ ol.mdx-illustration-block {
   display: block;
   position: absolute;
   top: 50%;
-  right: 100%;
+  inset-inline-end: 100%;
   transform: translateY(-50%);
   width: 60px;
   height: 49px;
@@ -653,8 +659,8 @@ ol.mdx-illustration-block {
   }
   .mdx-illustration-block li:after {
     top: 0;
-    left: 50%;
-    right: auto;
+    inset-inline-start: 50%;
+    inset-inline-end: auto;
     transform: translateX(-50%) translateY(-100%) rotate(90deg);
   }
 }
diff --git a/yarn.lock b/yarn.lock
index d6e0c82c1..21f45bb6f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -125,6 +125,11 @@
     "@algolia/logger-common" "4.12.0"
     "@algolia/requester-common" "4.12.0"
 
+"@alloc/quick-lru@^5.2.0":
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
+  integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
+
 "@ampproject/remapping@^2.1.0":
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d"
@@ -1108,11 +1113,6 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.9.tgz#0e5944eefe2b287391279a19b407aa98bd14436d"
   integrity sha512-j11XSuRuAlft6vLDEX4RvhqC0KxNxx6QIyMXNb0vHHSNPXTPeiy3algESWmOOIzEtiEL0qiowPU3ewW9hHVa7Q==
 
-"@types/parse-json@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
-  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
-
 "@types/parse-numeric-range@^0.0.1":
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/@types/parse-numeric-range/-/parse-numeric-range-0.0.1.tgz#1a807487565a753f486cb3ee4b2145937d49759d"
@@ -1306,26 +1306,12 @@ acorn-jsx@^5.0.0, acorn-jsx@^5.3.1:
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn-node@^1.6.1:
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8"
-  integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==
-  dependencies:
-    acorn "^7.0.0"
-    acorn-walk "^7.0.0"
-    xtend "^4.0.2"
-
-acorn-walk@^7.0.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
-  integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
-
 acorn-walk@^8.0.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
   integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
 
-acorn@^7.0.0, acorn@^7.4.0:
+acorn@^7.4.0:
   version "7.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
@@ -1429,6 +1415,11 @@ ansi-styles@^6.0.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.1.0.tgz#87313c102b8118abd57371afab34618bf7350ed3"
   integrity sha512-VbqNsoz55SYGczauuup0MFUyXNQviSpFTj1RQtFzmQLk18qbVSpTFFGMT293rmDaQuKCT6InmbuEyUne4mTuxQ==
 
+any-promise@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+  integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
+
 anymatch@~3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
@@ -1437,10 +1428,10 @@ anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-arg@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.1.tgz#eb0c9a8f77786cad2af8ff2b862899842d7b6adb"
-  integrity sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==
+arg@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
+  integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
 
 argparse@^1.0.7:
   version "1.0.10"
@@ -1636,7 +1627,7 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
-braces@^3.0.1, braces@~3.0.2:
+braces@^3.0.1, braces@^3.0.2, braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -1728,7 +1719,7 @@ chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2:
+chalk@^4.0.0, chalk@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -1887,7 +1878,7 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-color-name@^1.1.4, color-name@~1.1.4:
+color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
@@ -1907,6 +1898,11 @@ comma-separated-tokens@^2.0.0:
   resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-2.0.2.tgz#d4c25abb679b7751c880be623c1179780fe1dd98"
   integrity sha512-G5yTt3KQN4Yn7Yk4ed73hlZ1evrFKXeUW3086p3PRFNp7m2vIjI6Pg+Kgb+oyzhd9F2qdcoj67+y3SdxL5XWsg==
 
+commander@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
 commander@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
@@ -1966,17 +1962,6 @@ core-js-pure@^3.20.2:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.20.3.tgz#6cc4f36da06c61d95254efc54024fe4797fd5d02"
   integrity sha512-Q2H6tQ5MtPtcC7f3HxJ48i4Q7T9ybPKgvWyuH7JXIoNa2pm0KuBnycsET/qw1SLLZYfbsbrZQNMeIOClb+6WIA==
 
-cosmiconfig@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.1.tgz#714d756522cace867867ccb4474c5d01bbae5d6d"
-  integrity sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==
-  dependencies:
-    "@types/parse-json" "^4.0.0"
-    import-fresh "^3.2.1"
-    parse-json "^5.0.0"
-    path-type "^4.0.0"
-    yaml "^1.10.0"
-
 crelt@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.5.tgz#57c0d52af8c859e354bace1883eb2e1eb182bb94"
@@ -2122,11 +2107,6 @@ define-properties@^1.1.4:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
-defined@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
-  integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=
-
 depd@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
@@ -2142,15 +2122,6 @@ destroy@1.2.0:
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
   integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
 
-detective@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.0.tgz#feb2a77e85b904ecdea459ad897cc90a99bd2a7b"
-  integrity sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==
-  dependencies:
-    acorn-node "^1.6.1"
-    defined "^1.0.0"
-    minimist "^1.1.1"
-
 didyoumean@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
@@ -2705,7 +2676,18 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.2.11, fast-glob@^3.2.9:
+fast-glob@^3.2.12:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.0.tgz#7c40cb491e1e2ed5664749e87bfb516dbe8727c0"
+  integrity sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
+fast-glob@^3.2.9:
   version "3.2.11"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
   integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
@@ -2909,6 +2891,18 @@ glob-parent@^6.0.2:
   dependencies:
     is-glob "^4.0.3"
 
+glob@7.1.6:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
+  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 glob@7.1.7:
   version "7.1.7"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
@@ -3279,6 +3273,13 @@ is-ci@^3.0.1:
   dependencies:
     ci-info "^3.2.0"
 
+is-core-module@^2.11.0:
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.12.1.tgz#0c0b6885b6f80011c71541ce15c8d66cf5a4f9fd"
+  integrity sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==
+  dependencies:
+    has "^1.0.3"
+
 is-core-module@^2.2.0, is-core-module@^2.8.0, is-core-module@^2.8.1:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211"
@@ -3454,6 +3455,11 @@ istextorbinary@2.2.1:
     editions "^1.3.3"
     textextensions "2"
 
+jiti@^1.18.2:
+  version "1.19.1"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.19.1.tgz#fa99e4b76a23053e0e7cde098efe1704a14c16f1"
+  integrity sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -3477,11 +3483,6 @@ json-parse-better-errors@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
   integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
 
-json-parse-even-better-errors@^2.3.0:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
-  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
-
 json-schema-traverse@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
@@ -3570,11 +3571,16 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
-lilconfig@2.0.4, lilconfig@^2.0.4:
+lilconfig@2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.4.tgz#f4507d043d7058b380b6a8f5cb7bcd4b34cee082"
   integrity sha512-bfTIN7lEsiooCocSISTWXkiWJkRqtL9wYtYy+8EK3Y41qh3mpwPU0ycTOgjdY9ErwXCc8QyrQp82bdL0Xkm9yA==
 
+lilconfig@^2.0.5, lilconfig@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
+  integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
+
 lines-and-columns@^1.1.6:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
@@ -4373,6 +4379,14 @@ micromatch@^4.0.2, micromatch@^4.0.4:
     braces "^3.0.1"
     picomatch "^2.2.3"
 
+micromatch@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
+  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+  dependencies:
+    braces "^3.0.2"
+    picomatch "^2.3.1"
+
 mime-db@1.52.0:
   version "1.52.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
@@ -4414,7 +4428,7 @@ minimatch@^3.0.4:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimist@^1.1.1, minimist@^1.2.0:
+minimist@^1.2.0:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18"
   integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
@@ -4444,6 +4458,15 @@ ms@2.1.3, ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
+mz@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
+  integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
+  dependencies:
+    any-promise "^1.0.0"
+    object-assign "^4.0.1"
+    thenify-all "^1.0.0"
+
 nanoid@^3.2.0:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35"
@@ -4454,6 +4477,11 @@ nanoid@^3.3.4:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
   integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
 
+nanoid@^3.3.6:
+  version "3.3.6"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
+  integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -4570,15 +4598,15 @@ num2fraction@^1.2.2:
   resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
   integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
 
-object-assign@^4.1.1:
+object-assign@^4.0.1, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
 
-object-hash@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.2.0.tgz#5ad518581eefc443bd763472b8ff2e9c2c0d54a5"
-  integrity sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==
+object-hash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
+  integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
 
 object-inspect@^1.11.0, object-inspect@^1.12.0, object-inspect@^1.9.0:
   version "1.12.0"
@@ -4763,16 +4791,6 @@ parse-json@^4.0.0:
     error-ex "^1.3.1"
     json-parse-better-errors "^1.0.1"
 
-parse-json@^5.0.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
-  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    error-ex "^1.3.1"
-    json-parse-even-better-errors "^2.3.0"
-    lines-and-columns "^1.1.6"
-
 parse-latin@^4.0.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/parse-latin/-/parse-latin-4.3.0.tgz#1a70fc5601743baa06c5f12253c334fc94b4a917"
@@ -4876,7 +4894,7 @@ picocolors@^1.0.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3:
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -4886,11 +4904,21 @@ pidtree@^0.3.0:
   resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.3.1.tgz#ef09ac2cc0533df1f3250ccf2c4d366b0d12114a"
   integrity sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==
 
+pify@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+  integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
+
 pify@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
   integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
 
+pirates@^4.0.1:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
+  integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
+
 postcss-attribute-case-insensitive@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.2.tgz#d93e46b504589e94ac7277b0463226c68041a880"
@@ -5031,6 +5059,15 @@ postcss-image-set-function@^3.0.1:
     postcss "^7.0.2"
     postcss-values-parser "^2.0.0"
 
+postcss-import@^15.1.0:
+  version "15.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"
+  integrity sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==
+  dependencies:
+    postcss-value-parser "^4.0.0"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
 postcss-initial@^3.0.0:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-3.0.4.tgz#9d32069a10531fe2ecafa0b6ac750ee0bc7efc53"
@@ -5038,10 +5075,10 @@ postcss-initial@^3.0.0:
   dependencies:
     postcss "^7.0.2"
 
-postcss-js@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.0.tgz#31db79889531b80dc7bc9b0ad283e418dce0ac00"
-  integrity sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==
+postcss-js@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
+  integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
   dependencies:
     camelcase-css "^2.0.1"
 
@@ -5054,13 +5091,13 @@ postcss-lab-function@^2.0.1:
     postcss "^7.0.2"
     postcss-values-parser "^2.0.0"
 
-postcss-load-config@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.1.tgz#2f53a17f2f543d9e63864460af42efdac0d41f87"
-  integrity sha512-c/9XYboIbSEUZpiD1UQD0IKiUe8n9WHYV7YFe7X7J+ZwCsEKkUJSFWjS9hBU1RR9THR7jMXst8sxiqP0jjo2mg==
+postcss-load-config@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.1.tgz#152383f481c2758274404e4962743191d73875bd"
+  integrity sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==
   dependencies:
-    lilconfig "^2.0.4"
-    yaml "^1.10.2"
+    lilconfig "^2.0.5"
+    yaml "^2.1.1"
 
 postcss-logical@^3.0.0:
   version "3.0.0"
@@ -5076,12 +5113,12 @@ postcss-media-minmax@^4.0.0:
   dependencies:
     postcss "^7.0.2"
 
-postcss-nested@5.0.6:
-  version "5.0.6"
-  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.6.tgz#466343f7fc8d3d46af3e7dba3fcd47d052a945bc"
-  integrity sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==
+postcss-nested@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.1.tgz#f83dc9846ca16d2f4fa864f16e9d9f7d0961662c"
+  integrity sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==
   dependencies:
-    postcss-selector-parser "^6.0.6"
+    postcss-selector-parser "^6.0.11"
 
 postcss-nesting@^7.0.0:
   version "7.0.1"
@@ -5195,7 +5232,15 @@ postcss-selector-parser@^5.0.0-rc.3, postcss-selector-parser@^5.0.0-rc.4:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.6, postcss-selector-parser@^6.0.9:
+postcss-selector-parser@^6.0.11:
+  version "6.0.13"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz#d05d8d76b1e8e173257ef9d60b706a8e5e99bf1b"
+  integrity sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-selector-parser@^6.0.2:
   version "6.0.9"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz#ee71c3b9ff63d9cd130838876c13a2ec1a992b2f"
   integrity sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==
@@ -5203,7 +5248,7 @@ postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.6, postcss-selector
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
@@ -5234,7 +5279,16 @@ postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.26, postcss@^7.0.
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.4.5, postcss@^8.4.6:
+postcss@^8.4.23:
+  version "8.4.25"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.25.tgz#4a133f5e379eda7f61e906c3b1aaa9b81292726f"
+  integrity sha512-7taJ/8t2av0Z+sQEvNzCkpDynl0tX3uJMCODi6nT3PfASC7dYCWV9aQ+uiCf+KBD4SEFcu+GvJdGdwzQ6OSjCw==
+  dependencies:
+    nanoid "^3.3.6"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+postcss@^8.4.5:
   version "8.4.6"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.6.tgz#c5ff3c3c457a23864f32cb45ac9b741498a09ae1"
   integrity sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==
@@ -5304,11 +5358,6 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
-quick-lru@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
-  integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
-
 raf@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
@@ -5371,6 +5420,13 @@ react@^0.0.0-experimental-16d053d59-20230506:
   dependencies:
     loose-envify "^1.1.0"
 
+read-cache@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+  integrity sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==
+  dependencies:
+    pify "^2.3.0"
+
 read-pkg@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
@@ -5573,7 +5629,16 @@ resolve-from@^4.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
-resolve@^1.10.0, resolve@^1.12.0, resolve@^1.20.0, resolve@^1.22.0:
+resolve@^1.1.7, resolve@^1.22.2:
+  version "1.22.2"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.2.tgz#0ed0943d4e301867955766c9f3e1ae6d01c6845f"
+  integrity sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==
+  dependencies:
+    is-core-module "^2.11.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+resolve@^1.10.0, resolve@^1.12.0, resolve@^1.20.0:
   version "1.22.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
   integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
@@ -6067,6 +6132,19 @@ styled-jsx@5.1.1:
   dependencies:
     client-only "0.0.1"
 
+sucrase@^3.32.0:
+  version "3.32.0"
+  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.32.0.tgz#c4a95e0f1e18b6847127258a75cf360bc568d4a7"
+  integrity sha512-ydQOU34rpSyj2TGyz4D2p8rbktIOZ8QY9s+DGLvFU1i5pWJE8vkpruCjGCMHsdXwnD7JDcS+noSwM/a7zyNFDQ==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.2"
+    commander "^4.0.0"
+    glob "7.1.6"
+    lines-and-columns "^1.1.6"
+    mz "^2.7.0"
+    pirates "^4.0.1"
+    ts-interface-checker "^0.1.9"
+
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -6102,32 +6180,34 @@ table@^6.0.9:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
-tailwindcss@^3.0.22:
-  version "3.0.23"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.0.23.tgz#c620521d53a289650872a66adfcb4129d2200d10"
-  integrity sha512-+OZOV9ubyQ6oI2BXEhzw4HrqvgcARY38xv3zKcjnWtMIZstEsXdI9xftd1iB7+RbOnj2HOEzkA0OyB5BaSxPQA==
+tailwindcss@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.2.tgz#2f9e35d715fdf0bbf674d90147a0684d7054a2d3"
+  integrity sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==
   dependencies:
-    arg "^5.0.1"
-    chalk "^4.1.2"
+    "@alloc/quick-lru" "^5.2.0"
+    arg "^5.0.2"
     chokidar "^3.5.3"
-    color-name "^1.1.4"
-    cosmiconfig "^7.0.1"
-    detective "^5.2.0"
     didyoumean "^1.2.2"
     dlv "^1.1.3"
-    fast-glob "^3.2.11"
+    fast-glob "^3.2.12"
     glob-parent "^6.0.2"
     is-glob "^4.0.3"
+    jiti "^1.18.2"
+    lilconfig "^2.1.0"
+    micromatch "^4.0.5"
     normalize-path "^3.0.0"
-    object-hash "^2.2.0"
-    postcss "^8.4.6"
-    postcss-js "^4.0.0"
-    postcss-load-config "^3.1.0"
-    postcss-nested "5.0.6"
-    postcss-selector-parser "^6.0.9"
+    object-hash "^3.0.0"
+    picocolors "^1.0.0"
+    postcss "^8.4.23"
+    postcss-import "^15.1.0"
+    postcss-js "^4.0.1"
+    postcss-load-config "^4.0.1"
+    postcss-nested "^6.0.1"
+    postcss-selector-parser "^6.0.11"
     postcss-value-parser "^4.2.0"
-    quick-lru "^5.1.1"
-    resolve "^1.22.0"
+    resolve "^1.22.2"
+    sucrase "^3.32.0"
 
 text-table@^0.2.0:
   version "0.2.0"
@@ -6139,6 +6219,20 @@ textextensions@2:
   resolved "https://registry.yarnpkg.com/textextensions/-/textextensions-2.6.0.tgz#d7e4ab13fe54e32e08873be40d51b74229b00fc4"
   integrity sha512-49WtAWS+tcsy93dRt6P0P3AMD2m5PvXRhuEA0kaXos5ZLlujtYmpmFsB+QvWUSxE1ZsstmYXfQ7L40+EcQgpAQ==
 
+thenify-all@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
+  integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
+  dependencies:
+    thenify ">= 3.1.0 < 4"
+
+"thenify@>= 3.1.0 < 4":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f"
+  integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
+  dependencies:
+    any-promise "^1.0.0"
+
 through@^2.3.8:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
@@ -6203,6 +6297,11 @@ trough@^2.0.0:
   resolved "https://registry.yarnpkg.com/trough/-/trough-2.0.2.tgz#94a3aa9d5ce379fc561f6244905b3f36b7458d96"
   integrity sha512-FnHq5sTMxC0sk957wHDzRnemFnNBvt/gSY99HzK8F7UP5WAbvP70yX5bd7CjEQkN+TjdxwI7g7lJ6podqrG2/w==
 
+ts-interface-checker@^0.1.9:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
+  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
+
 tsconfig-paths@^3.12.0, tsconfig-paths@^3.9.0:
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.12.0.tgz#19769aca6ee8f6a1a341e38c8fa45dd9fb18899b"
@@ -6660,7 +6759,7 @@ xml@1.0.1:
   resolved "https://registry.yarnpkg.com/xml/-/xml-1.0.1.tgz#78ba72020029c5bc87b8a81a3cfcd74b4a2fc1e5"
   integrity sha1-eLpyAgApxbyHuKgaPPzXS0ovweU=
 
-xtend@^4.0.0, xtend@^4.0.1, xtend@^4.0.2:
+xtend@^4.0.0, xtend@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
@@ -6670,11 +6769,16 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
-yaml@^1.10.0, yaml@^1.10.2:
+yaml@^1.10.2:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
+yaml@^2.1.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.1.tgz#02fe0975d23cd441242aa7204e09fc28ac2ac33b"
+  integrity sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==
+
 zod@3.21.4:
   version "3.21.4"
   resolved "https://registry.yarnpkg.com/zod/-/zod-3.21.4.tgz#10882231d992519f0a10b5dd58a38c9dabbb64db"

From 6b61cd490d87c620533a3a79210c7c0ca96fdf56 Mon Sep 17 00:00:00 2001
From: Ahmed Abdelbaset <A7med3bdulBaset@gmail.com>
Date: Wed, 16 Aug 2023 01:24:46 +0300
Subject: [PATCH 33/36] Annex to #6138 (#6226)

* fix: wronge styles when applying RTL

it was `top-0 left-0 ...` by wrong I made it `inset-x-0`.

* fix wrong styles

* fix wrong styles

* style canary icon with RTL-friendly styles

* chore: utilize mx-* instead of me-* & ms-*

* utilize relative styles

* chore: use mx-* instead of me-* & ms-*

* style canary icon with RTL-frindly styles

* Update OpenInTypeScriptPlayground.tsx
---
 src/components/Layout/HomeContent.js                       | 2 +-
 src/components/Layout/Sidebar/SidebarButton.tsx            | 2 +-
 src/components/Layout/Sidebar/SidebarLink.tsx              | 4 ++--
 src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx    | 2 +-
 src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx | 2 +-
 src/components/MDX/Sandpack/ResetButton.tsx                | 2 +-
 src/components/PageHeading.tsx                             | 4 ++--
 7 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index d395ff384..924b66f4c 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -849,7 +849,7 @@ function ExampleLayout({
               {overlayStyles.map((styles, i) => (
                 <div
                   key={i}
-                  className="inset-x-0 bg-blue-30/5 border-2 border-link dark:border-link-dark absolute rounded-lg"
+                  className="top-0 start-0 bg-blue-30/5 border-2 border-link dark:border-link-dark absolute rounded-lg"
                   style={styles}
                 />
               ))}
diff --git a/src/components/Layout/Sidebar/SidebarButton.tsx b/src/components/Layout/Sidebar/SidebarButton.tsx
index 7b9f027a8..dc1f29a8d 100644
--- a/src/components/Layout/Sidebar/SidebarButton.tsx
+++ b/src/components/Layout/Sidebar/SidebarButton.tsx
@@ -31,7 +31,7 @@ export function SidebarButton({
       })}>
       <button
         className={cn(
-          'p-2 pe-2 ps-5 w-full rounded-s-lg text-start hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
+          'p-2 pe-2 ps-5 w-full rounded-e-lg text-start hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
           {
             'p-2 text-base': level > 1,
             'text-link bg-highlight dark:bg-highlight-dark text-base font-bold hover:bg-highlight dark:hover:bg-highlight-dark hover:text-link dark:hover:text-link-dark':
diff --git a/src/components/Layout/Sidebar/SidebarLink.tsx b/src/components/Layout/Sidebar/SidebarLink.tsx
index 1b961e9c6..180ded867 100644
--- a/src/components/Layout/Sidebar/SidebarLink.tsx
+++ b/src/components/Layout/Sidebar/SidebarLink.tsx
@@ -58,7 +58,7 @@ export function SidebarLink({
       passHref
       aria-current={selected ? 'page' : undefined}
       className={cn(
-        'p-2 pe-2 w-full rounded-none lg:rounded-s-2xl text-start hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
+        'p-2 pe-2 w-full rounded-none lg:rounded-e-2xl text-start hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
         {
           'text-sm ps-6': level > 0,
           'ps-5': level < 2,
@@ -78,7 +78,7 @@ export function SidebarLink({
         {canary && (
           <IconCanary
             title="This feature is available in the latest Canary"
-            className="ml-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"
+            className="ms-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"
           />
         )}
       </div>
diff --git a/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx b/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
index f943ee6ff..78286aeaf 100644
--- a/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
+++ b/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
@@ -11,7 +11,7 @@ export const OpenInCodeSandboxButton = () => {
       className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1 ms-2 md:ms-1"
       title="Open in CodeSandbox">
       <IconNewPage
-        className="inline ms-1 me-1 relative top-[1px]"
+        className="inline mx-1 relative top-[1px]"
         width="1em"
         height="1em"
       />
diff --git a/src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx b/src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx
index f4b7ba77d..7284912e3 100644
--- a/src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx
+++ b/src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx
@@ -16,7 +16,7 @@ export const OpenInTypeScriptPlaygroundButton = (props: {content: string}) => {
       target="_blank"
       rel="noreferrer">
       <IconNewPage
-        className="inline ml-1 mr-1 relative top-[1px]"
+        className="inline mx-1 relative top-[1px]"
         width="1em"
         height="1em"
       />
diff --git a/src/components/MDX/Sandpack/ResetButton.tsx b/src/components/MDX/Sandpack/ResetButton.tsx
index 243ce2349..0d1e22c80 100644
--- a/src/components/MDX/Sandpack/ResetButton.tsx
+++ b/src/components/MDX/Sandpack/ResetButton.tsx
@@ -15,7 +15,7 @@ export function ResetButton({onReset}: ResetButtonProps) {
       onClick={onReset}
       title="Reset Sandbox"
       type="button">
-      <IconRestart className="inline ms-1 me-1 relative" /> Reset
+      <IconRestart className="inline mx-1 relative" /> Reset
     </button>
   );
 }
diff --git a/src/components/PageHeading.tsx b/src/components/PageHeading.tsx
index b6437b46b..076a38be9 100644
--- a/src/components/PageHeading.tsx
+++ b/src/components/PageHeading.tsx
@@ -35,13 +35,13 @@ function PageHeading({
           {canary && (
             <IconCanary
               title="This feature is available in the latest Canary"
-              className="ml-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]"
+              className="ms-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]"
             />
           )}
           {status ? <em>—{status}</em> : ''}
         </H1>
         {description && (
-          <p className="mt-4 mb-6 dark:text-primary-dark text-xl text-gray-90 leading-large">
+          <p className="mt-4 mb-6 dark:text-primary-dark text-xl text-primary leading-large">
             {description}
           </p>
         )}

From 842c24c9aefaa60b7ae9b46b002bd1b3cf4d31f3 Mon Sep 17 00:00:00 2001
From: Thomas Charuel <ThomasCharuel@users.noreply.github.com>
Date: Thu, 17 Aug 2023 04:17:59 +0200
Subject: [PATCH 34/36] Fix broken link for Typescript Discord invite (#6224)

---
 src/content/learn/typescript.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md
index d437096e1..5695b755f 100644
--- a/src/content/learn/typescript.md
+++ b/src/content/learn/typescript.md
@@ -460,4 +460,4 @@ We recommend the following resources:
 
  - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) is a community-maintained cheatsheet for using TypeScript with React, covering a lot of useful edge cases and providing more breadth than this document.
 
- - [TypeScript Community Discord](discord.com/invite/typescript) is a great place to ask questions and get help with TypeScript and React issues.
\ No newline at end of file
+ - [TypeScript Community Discord](https://discord.com/invite/typescript) is a great place to ask questions and get help with TypeScript and React issues.
\ No newline at end of file

From f67811befede7566393b0b8c7cf6f399069d4410 Mon Sep 17 00:00:00 2001
From: Luna <lunaleaps@gmail.com>
Date: Mon, 21 Aug 2023 13:34:53 -0700
Subject: [PATCH 35/36] Clarify these features are not related to Next (#6229)

Co-authored-by: Luna Wei <luwe@fb.com>
---
 src/content/reference/react/use-client.md | 8 +++++---
 src/content/reference/react/use-server.md | 8 +++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/content/reference/react/use-client.md b/src/content/reference/react/use-client.md
index fc6173acb..f0510415b 100644
--- a/src/content/reference/react/use-client.md
+++ b/src/content/reference/react/use-client.md
@@ -51,7 +51,9 @@ When a file marked `'use client'` is imported from a server component, [compatib
 ## Usage {/*usage*/}
 
 <Wip>
+This section is a work in progress. 
 
-This section is incomplete. See also the [Next.js documentation for Server Components](https://beta.nextjs.org/docs/rendering/server-and-client-components).
-
-</Wip>
+This API can be used in any framework that supports React Server Components. You may find additional documentation from them.
+* [Next.js documentation](https://nextjs.org/docs/getting-started/react-essentials)
+* More coming soon
+</Wip>
\ No newline at end of file
diff --git a/src/content/reference/react/use-server.md b/src/content/reference/react/use-server.md
index 6b9e7df00..4acea191c 100644
--- a/src/content/reference/react/use-server.md
+++ b/src/content/reference/react/use-server.md
@@ -49,7 +49,9 @@ Alternatively, add `'use server';` at the very top of a file to mark all exports
 ## Usage {/*usage*/}
 
 <Wip>
+This section is a work in progress. 
 
-This section is incomplete. See also the [Next.js documentation for Server Components](https://beta.nextjs.org/docs/rendering/server-and-client-components).
-
-</Wip>
+This API can be used in any framework that supports React Server Components. You may find additional documentation from them.
+* [Next.js documentation](https://nextjs.org/docs/getting-started/react-essentials)
+* More coming soon
+</Wip>
\ No newline at end of file

From 3189529259e89240a88c05680849ce4a8c454ed2 Mon Sep 17 00:00:00 2001
From: Eli White <github@eli-white.com>
Date: Wed, 23 Aug 2023 14:53:20 -0700
Subject: [PATCH 36/36] Add React Native EU 2023 to the conferences page
 (#6254)

React attends this conference hosted by Callstack. It's been on the page in previous years, missed it this year.

https://www.react-native.eu/
---
 src/content/community/conferences.md | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index 2908f9cd0..974e4a825 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -15,8 +15,14 @@ August 17 & 18, 2023. Salt Lake City, UT, USA
 
 [Website](https://www.reactrally.com/) - [Twitter](https://twitter.com/ReactRally) - [Instagram](https://www.instagram.com/reactrally/)
 
+### React Native EU 2023 {/*react-native-eu-2023*/}
+September 7 & 8, 2023. Wrocław, Poland
+
+[Website](https://react-native.eu) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu)
+
+
 ### React India 2023 {/*react-india-2023*/}
-Oct 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - remote day
+October 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - remote day
 
 [Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w)