diff --git a/.env.development b/.env.development
index a692f21c7..e69de29bb 100644
--- a/.env.development
+++ b/.env.development
@@ -1 +0,0 @@
-SANDPACK_BARE_COMPONENTS=true 
\ No newline at end of file
diff --git a/.env.production b/.env.production
index 445c9c4d0..e403f96b6 100644
--- a/.env.production
+++ b/.env.production
@@ -1,2 +1 @@
-NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
-SANDPACK_BARE_COMPONENTS=true 
\ No newline at end of file
+NEXT_PUBLIC_GA_TRACKING_ID = 'G-B1E83PJ3RT'
\ No newline at end of file
diff --git a/.github/ISSUE_TEMPLATE/0-bug.yml b/.github/ISSUE_TEMPLATE/0-bug.yml
new file mode 100644
index 000000000..56d2e8540
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/0-bug.yml
@@ -0,0 +1,34 @@
+name: "🐛 Report a bug"
+description: "Report a problem on the website."
+title: "[Bug]: "
+labels: ["bug: unconfirmed"]
+body:
+  - type: textarea
+    attributes:
+      label: Summary
+      description: |
+        A clear and concise summary of what the bug is.
+      placeholder: |
+        Example bug report:
+        When I click the "Submit" button on "Feedback", nothing happens.
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Page
+      description: |
+        What page(s) did you encounter this bug on?
+      placeholder: |
+        https://react.dev/
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Details
+      description: |
+        Please provide any additional details about the bug.
+      placeholder: |
+        Example details:
+        The "Submit" button is unresponsive. I've tried refreshing the page and using a different browser, but the issue persists.
+    validations:
+      required: false
diff --git a/.github/ISSUE_TEMPLATE/1-typo.yml b/.github/ISSUE_TEMPLATE/1-typo.yml
new file mode 100644
index 000000000..c86557a11
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/1-typo.yml
@@ -0,0 +1,34 @@
+name: "🤦 Typo or mistake"
+description: "Report a typo or mistake in the docs."
+title: "[Typo]: "
+labels: ["type: typos"]
+body:
+  - type: textarea
+    attributes:
+      label: Summary
+      description: |
+        A clear and concise summary of what the mistake is.
+      placeholder: |
+        Example:
+        The code example on the "useReducer" page includes an unused variable `nextId`.
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Page
+      description: |
+        What page is the typo on?
+      placeholder: |
+        https://react.dev/
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Details
+      description: |
+        Please provide a explanation for why this is a mistake.
+      placeholder: |
+        Example mistake:
+        In the "useReducer" section of the "API Reference" page, the code example under "Writing a reducer function" includes an unused variable `nextId` that should be removed.
+    validations:
+      required: false
diff --git a/.github/ISSUE_TEMPLATE/2-suggestion.yml b/.github/ISSUE_TEMPLATE/2-suggestion.yml
new file mode 100644
index 000000000..ac0b480fe
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/2-suggestion.yml
@@ -0,0 +1,34 @@
+name: "💡 Suggestions"
+description: "Suggest a new page, section, or edit for an existing page."
+title: "[Suggestion]: "
+labels: ["type: documentation"]
+body:
+  - type: textarea
+    attributes:
+      label: Summary
+      description: |
+        A clear and concise summary of what we should add.
+      placeholder: |
+        Example:
+        Add a new page for how to use React with TypeScript.
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Page
+      description: |
+        What page is this about?
+      placeholder: |
+        https://react.dev/
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Details
+      description: |
+        Please provide a explanation for what you're suggesting.
+      placeholder: |
+        Example:
+        I think it would be helpful to have a page that explains how to use React with TypeScript. This could include a basic example of a component written in TypeScript, and a link to the TypeScript documentation.
+    validations:
+      required: true
diff --git a/.github/ISSUE_TEMPLATE/3-framework.yml b/.github/ISSUE_TEMPLATE/3-framework.yml
new file mode 100644
index 000000000..a47295e1e
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/3-framework.yml
@@ -0,0 +1,116 @@
+name: "📄 Suggest new framework"
+description: "I am a framework author applying to be included as a recommended framework."
+title: "[Framework]: "
+labels: ["type: framework"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        ## Apply to be included as a recommended React framework
+
+        _This form is for framework authors to apply to be included as a recommended [React framework](https://react.dev/learn/start-a-new-react-project). If you are not a framework author, please contact the authors before submitting._
+        
+        Our goal when recommending a framework is to start developers with a React project that solves common problems like code splitting, data fetching, routing, and HTML generation without any extra work later. We believe this will allow users to get started quickly with React, and scale their app to production.
+        
+        While we understand that many frameworks may want to be featured, this page is not a place to advertise every possible React framework or all frameworks that you can add React to. There are many great frameworks that offer support for React that are not listed in our guides. The frameworks we recommend have invested significantly in the React ecosystem, and collaborated with the React team to be compatible with our [full-stack React architecture vision](https://react.dev/learn/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision).
+        
+        To be included, frameworks must meet the following criteria:
+        
+        - **Free & open-source**: must be open source and free to use.
+        - **Well maintained**. must be actively maintained, providing bug fixes and improvements.
+        - **Active community**: must have a sufficiently large and active community to support users.
+        - **Clear onboarding**: must have clear install steps to install the React version of the framework.
+        - **Ecosystem compatibility**: must support using the full range of libraries and tools in the React ecosystem.
+        - **Self-hosting option**: must support an option to self-host applications without losing access to features.
+        - **Developer experience**. must allow developers to be productive by supporting features like Fast Refresh.
+        - **User experience**. must provide built-in support for common problems like routing and data-fetching.
+        - **Compatible with our future vision for React**. React evolves over time, and frameworks that do not align with React’s direction risk isolating their users from the main React ecosystem over time. To be included on this page we must feel confident that the framework is setting its users up for success with React over time.
+        
+        Please note, we have reviewed most of the popular frameworks available today, so it is unlikely we have not considered your framework already. But if you think we missed something, please complete the application below.
+  - type: input
+    attributes:
+      label: Name
+      description: |
+        What is the name of your framework?
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Homepage
+      description: |
+        What is the URL of your homepage?
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Install instructions
+      description: |
+        What is the URL of your getting started guide?
+    validations:
+      required: true
+  - type: dropdown
+    attributes:
+      label: Is your framework open source?
+      description: |
+        We only recommend free and open source frameworks.
+      options:
+        - 'No'
+        - 'Yes'
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Well maintained
+      description: |
+        Please describe how your framework is actively maintained. Include recent releases, bug fixes, and improvements as examples.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Active community
+      description: |
+        Please describe your community. Include the size of your community, and links to community resources.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Clear onboarding
+      description: |
+        Please describe how a user can install your framework with React. Include links to any relevant documentation.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Ecosystem compatibility
+      description: |
+        Please describe any limitations your framework has with the React ecosystem. Include any libraries or tools that are not compatible with your framework.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Self-hosting option
+      description: |
+        Please describe how your framework supports self-hosting. Include any limitations to features when self-hosting. Also include whether you require a server to deploy your framework.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Developer Experience
+      description: |
+        Please describe how your framework provides a great developer experience. Include any limitations to React features like React DevTools, Chrome DevTools, and Fast Refresh.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: User Experience
+      description: |
+        Please describe how your framework helps developers create high quality user experiences by solving common use-cases. Include specifics for how your framework offers built-in support for code-splitting, routing, HTML generation, and data-fetching in a way that avoids client/server waterfalls by default. Include details on how you offer features such as SSG and SSR.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Compatible with our future vision for React
+      description: |
+        Please describe how your framework aligns with our future vision for React. Include how your framework will evolve with React over time, and your plans to support future React features like React Server Components.
+    validations:
+      required: true
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
new file mode 100644
index 000000000..63e310e0b
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1,7 @@
+contact_links:
+  - name: 📃 Bugs in React
+    url: https://github.com/facebook/react/issues/new/choose
+    about: This issue tracker is not for bugs in React. Please file React issues here.
+  - name: 🤔 Questions and Help
+    url: https://reactjs.org/community/support.html
+    about: This issue tracker is not for support questions. Please refer to the React community's help and discussion forums.
diff --git a/.github/workflows/analyze.yml b/.github/workflows/analyze.yml
index 87dcfdc73..b1ef428d0 100644
--- a/.github/workflows/analyze.yml
+++ b/.github/workflows/analyze.yml
@@ -11,18 +11,26 @@ jobs:
   analyze:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Set up node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: '20.x'
+          cache: yarn
+          cache-dependency-path: yarn.lock
 
-      - name: Install dependencies
-        uses: bahmutov/npm-install@v1.7.10
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        with:
+          path: "**/node_modules"
+          key: node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+
+      - name: Install deps
+        run: yarn install --frozen-lockfile
 
       - name: Restore next build
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         id: restore-build-cache
         env:
           cache-name: cache-next-build
@@ -41,7 +49,7 @@ jobs:
         run: npx -p nextjs-bundle-analysis@0.5.0 report
 
       - name: Upload bundle
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           path: .next/analyze/__bundle_analysis.json
           name: bundle_analysis.json
@@ -73,7 +81,7 @@ jobs:
         run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare
 
       - name: Upload analysis comment
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           name: analysis_comment.txt
           path: .next/analyze/__bundle_analysis_comment.txt
@@ -82,7 +90,7 @@ jobs:
         run: echo ${{ github.event.number }} > ./pr_number
 
       - name: Upload PR number
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           name: pr_number
           path: ./pr_number
diff --git a/.github/workflows/site_lint.yml b/.github/workflows/site_lint.yml
index 34ca6d7b8..36f7642c9 100644
--- a/.github/workflows/site_lint.yml
+++ b/.github/workflows/site_lint.yml
@@ -14,14 +14,22 @@ jobs:
     name: Lint on node 20.x and ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v4
       - name: Use Node.js 20.x
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20.x
+          cache: yarn
+          cache-dependency-path: yarn.lock
 
-      - name: Install deps and build (with cache)
-        uses: bahmutov/npm-install@v1.8.32
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        with:
+          path: "**/node_modules"
+          key: node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+
+      - name: Install deps
+        run: yarn install --frozen-lockfile
 
       - name: Lint codebase
         run: yarn ci-check
diff --git a/.gitignore b/.gitignore
index d8bec488b..7bf71dbc5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,3 +36,6 @@ yarn-error.log*
 
 # external fonts
 public/fonts/**/Optimistic_*.woff2
+
+# rss
+public/rss.xml
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 0e861af35..4c7e5ec74 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -79,6 +79,7 @@ Ignore this rule if you're specifically describing an experimental proposal. Mak
 - Use semicolons.
 - No space between function names and parens (`method() {}` not `method () {}`).
 - When in doubt, use the default style favored by [Prettier](https://prettier.io/playground/).
+- Always capitalize React concepts such as Hooks, Effects, and Transitions.
 
 ### Highlighting
 
diff --git a/colors.js b/colors.js
index acf8214ee..872f33cac 100644
--- a/colors.js
+++ b/colors.js
@@ -11,7 +11,7 @@ module.exports = {
   tertiary: '#5E687E', // gray-50
   'tertiary-dark': '#99A1B3', // gray-30
   link: '#087EA4', // blue-50
-  'link-dark': '#149ECA', // blue-40
+  'link-dark': '#58C4DC', // blue-40
   syntax: '#EBECF0', // gray-10
   wash: '#FFFFFF',
   'wash-dark': '#23272F', // gray-90
@@ -23,6 +23,8 @@ module.exports = {
   'border-dark': '#343A46', // gray-80
   'secondary-button': '#EBECF0', // gray-10
   'secondary-button-dark': '#404756', // gray-70
+  brand: '#087EA4', // blue-40
+  'brand-dark': '#58C4DC', // blue-40
 
   // Gray
   'gray-95': '#16181D',
diff --git a/next.config.js b/next.config.js
index 414728580..61ff1944a 100644
--- a/next.config.js
+++ b/next.config.js
@@ -14,9 +14,7 @@ const nextConfig = {
     scrollRestoration: true,
     legacyBrowsers: false,
   },
-  env: {
-    SANDPACK_BARE_COMPONENTS: process.env.SANDPACK_BARE_COMPONENTS,
-  },
+  env: {},
   webpack: (config, {dev, isServer, ...options}) => {
     if (process.env.ANALYZE) {
       const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
@@ -35,10 +33,6 @@ const nextConfig = {
 
     const {IgnorePlugin, NormalModuleReplacementPlugin} = require('webpack');
     config.plugins.push(
-      new NormalModuleReplacementPlugin(
-        /^@stitches\/core$/,
-        require.resolve('./src/utils/emptyShim.js')
-      ),
       new NormalModuleReplacementPlugin(
         /^raf$/,
         require.resolve('./src/utils/rafShim.js')
diff --git a/package.json b/package.json
index a10ca6a75..612b84d61 100644
--- a/package.json
+++ b/package.json
@@ -15,29 +15,34 @@
     "prettier:diff": "yarn nit:source",
     "lint-heading-ids": "node scripts/headingIdLinter.js",
     "fix-headings": "node scripts/headingIdLinter.js --fix",
-    "ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids",
+    "ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids rss",
     "tsc": "tsc --noEmit",
     "start": "next start",
     "postinstall": "patch-package && (is-ci || husky install .husky)",
+<<<<<<< HEAD
     "check-all": "npm-run-all prettier lint:fix tsc",
     "prepare": "husky install"
+=======
+    "check-all": "npm-run-all prettier lint:fix tsc rss",
+    "rss": "node scripts/generateRss.js"
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "1.15.5",
-    "@docsearch/css": "3.0.0-alpha.41",
-    "@docsearch/react": "3.0.0-alpha.41",
+    "@codesandbox/sandpack-react": "2.13.5",
+    "@docsearch/css": "^3.6.1",
+    "@docsearch/react": "^3.6.1",
     "@headlessui/react": "^1.7.0",
+    "@radix-ui/react-context-menu": "^2.1.5",
     "body-scroll-lock": "^3.1.3",
     "classnames": "^2.2.6",
     "date-fns": "^2.16.1",
     "debounce": "^1.2.1",
-    "ga-lite": "^2.1.4",
     "github-slugger": "^1.3.0",
     "next": "^13.4.1",
     "next-remote-watch": "^1.0.0",
     "parse-numeric-range": "^1.2.0",
     "react": "^0.0.0-experimental-16d053d59-20230506",
-    "react-collapsed": "npm:@gaearon/react-collapsed@3.1.0-forked.1",
+    "react-collapsed": "4.0.4",
     "react-dom": "^0.0.0-experimental-16d053d59-20230506",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1"
@@ -93,13 +98,13 @@
     "retext": "^7.0.1",
     "retext-smartypants": "^4.0.0",
     "rss": "^1.2.2",
-    "tailwindcss": "^3.3.2",
+    "tailwindcss": "^3.4.1",
     "typescript": "^4.0.2",
     "unist-util-visit": "^2.0.3",
     "webpack-bundle-analyzer": "^4.5.0"
   },
   "engines": {
-    "node": "^16.8.0 || ^18.0.0 || ^19.0.0 || ^20.0.0"
+    "node": ">=16.8.0"
   },
   "nextBundleAnalysis": {
     "budget": null,
diff --git a/patches/@codesandbox+sandpack-react+1.15.5.patch b/patches/@codesandbox+sandpack-react+1.15.5.patch
deleted file mode 100644
index b68a5303d..000000000
--- a/patches/@codesandbox+sandpack-react+1.15.5.patch
+++ /dev/null
@@ -1,62 +0,0 @@
-diff --git a/node_modules/@codesandbox/sandpack-react/dist/cjs/index.js b/node_modules/@codesandbox/sandpack-react/dist/cjs/index.js
-index 6b8518e..ada84f5 100644
---- a/node_modules/@codesandbox/sandpack-react/dist/cjs/index.js
-+++ b/node_modules/@codesandbox/sandpack-react/dist/cjs/index.js
-@@ -92,7 +92,7 @@ h1 {
-   <body>
-     <div id="root"></div>
-   </body>
--</html>`},"/package.json":{code:JSON.stringify({dependencies:{react:"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},main:"/index.js"})}},main:"/App.js",environment:"create-react-app"};var Ft={files:{"tsconfig.json":{code:`{
-+</html>`},"/package.json":{code:JSON.stringify({dependencies:{react:"^18.0.0","react-dom":"^18.0.0","react-scripts":"^5.0.0"},main:"/index.js"})}},main:"/App.js",environment:"create-react-app"};var Ft={files:{"tsconfig.json":{code:`{
-   "include": [
-     "./**/*"
-   ],
-@@ -140,7 +140,7 @@ h1 {
-   <body>
-     <div id="root"></div>
-   </body>
--</html>`},"/package.json":{code:JSON.stringify({dependencies:{react:"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},devDependencies:{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0",typescript:"^4.0.0"},main:"/index.tsx"})}},main:"/App.tsx",environment:"create-react-app"};var At={files:{"/App.tsx":{code:`import { Component } from "solid-js";
-+</html>`},"/package.json":{code:JSON.stringify({dependencies:{react:"^18.0.0","react-dom":"^18.0.0","react-scripts":"^5.0.0"},devDependencies:{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0",typescript:"^4.0.0"},main:"/index.tsx"})}},main:"/App.tsx",environment:"create-react-app"};var At={files:{"/App.tsx":{code:`import { Component } from "solid-js";
- 
- const App: Component = () => {
-   return <h1>Hello World</h1>;
-@@ -395,7 +395,7 @@ createApp(App).mount('#app')
-     <!-- built files will be auto injected -->
-   </body>
- </html>
--`},"/package.json":{code:JSON.stringify({dependencies:{"core-js":"^3.6.5",vue:"^3.0.0-0","@vue/cli-plugin-babel":"4.5.0"},main:"/src/main.js"})}},main:"/src/App.vue",environment:"vue-cli"};var We={react:wt,"react-ts":Ft,vue:Ht,vanilla:Ot,"vanilla-ts":Dt,vue3:Bt,angular:Lt,svelte:Pt,solid:At,"test-ts":It};var pt=e=>{var c,p,d,h,y,S;let t=(0,Ee.normalizePath)(e.files),o=bn({template:e.template,customSetup:e.customSetup,files:t}),s=(0,Ee.normalizePath)((p=(c=e.options)==null?void 0:c.visibleFiles)!=null?p:[]),r=((d=e.options)==null?void 0:d.activeFile)?Is((h=e.options)==null?void 0:h.activeFile,t||{}):void 0;s.length===0&&t&&Object.keys(t).forEach(v=>{let g=t[v];if(typeof g=="string"){s.push(v);return}!r&&g.active&&(r=v,g.hidden===!0&&s.push(v)),g.hidden||s.push(v)}),s.length===0&&(s=[o.main]),o.files[o.entry]||(o.entry=Is(o.entry,o.files)),!r&&o.main&&(r=o.main),(!r||!o.files[r])&&(r=s[0]),s.includes(r)||s.push(r);let n=(0,Ee.addPackageJSONIfNeeded)(o.files,(y=o.dependencies)!=null?y:{},(S=o.devDependencies)!=null?S:{},o.entry);return{visibleFiles:s.filter(v=>n[v]),activeFile:r,files:n,environment:o.environment}},Is=(e,t)=>{let o=(0,Ee.normalizePath)(t),s=(0,Ee.normalizePath)(e);if(s in o)return s;if(!e)return null;let r=null,n=0,a=[".js",".jsx",".ts",".tsx"];for(;!r&&n<a.length;){let p=`${s.split(".")[0]}${a[n]}`;o[p]!==void 0&&(r=p),n++}return r},bn=({files:e,template:t,customSetup:o})=>{if(!t){if(!o)return We.vanilla;if(!e||Object.keys(e).length===0)throw new Error("[sandpack-react]: without a template, you must pass at least one file");return M(u({},o),{files:_t(e)})}let s=We[t];if(!s)throw new Error(`[sandpack-react]: invalid template "${t}" provided`);return!o&&!e?s:{files:_t(u(u({},s.files),e)),dependencies:u(u({},s.dependencies),o==null?void 0:o.dependencies),devDependencies:u(u({},s.devDependencies),o==null?void 0:o.devDependencies),entry:(0,Ee.normalizePath)((o==null?void 0:o.entry)||s.entry),main:s.main,environment:(o==null?void 0:o.environment)||s.environment}},_t=e=>e?Object.keys(e).reduce((t,o)=>(typeof e[o]=="string"?t[o]={code:e[o]}:t[o]=e[o],t),{}):{};var mt=re.createContext(null),yn=3e4,$o=class extends re.PureComponent{constructor(t){super(t);this.timeoutHook=null;this.initializeSandpackIframeHook=null;this.handleMessage=t=>{this.timeoutHook&&clearTimeout(this.timeoutHook),t.type==="state"?this.setState({bundlerState:t.state}):t.type==="done"&&!t.compilatonError?this.setState({error:null}):t.type==="action"&&t.action==="show-error"?this.setState({error:(0,Ge.extractErrorDetails)(t)}):t.type==="action"&&t.action==="notification"&&t.notificationType==="error"&&this.setState({error:{message:t.title}})};this.registerReactDevTools=t=>{this.setState({reactDevTools:t})};this.updateCurrentFile=t=>{this.updateFile(this.state.activeFile,t)};this.updateFile=(t,o)=>{var r;let s=this.state.files;if(typeof t=="string"&&o){if(o===((r=this.state.files[t])==null?void 0:r.code))return;s=M(u({},s),{[t]:{code:o}})}else typeof t=="object"&&(s=u(u({},s),_t(t)));this.setState({files:(0,Ge.normalizePath)(s)},this.updateClients)};this.updateClients=()=>{var n,a,c,p;let{files:t,sandpackStatus:o}=this.state,s=(a=(n=this.props.options)==null?void 0:n.recompileMode)!=null?a:"delayed",r=(p=(c=this.props.options)==null?void 0:c.recompileDelay)!=null?p:500;o==="running"&&(s==="immediate"&&Object.values(this.clients).forEach(d=>{d.updatePreview({files:t})}),s==="delayed"&&(window.clearTimeout(this.debounceHook),this.debounceHook=window.setTimeout(()=>{Object.values(this.clients).forEach(d=>{d.updatePreview({files:this.state.files})})},r)))};this.createClient=(t,o)=>{var n,a,c,p,d,h,y,S,v;let s=new Ge.SandpackClient(t,{files:this.state.files,template:this.state.environment},{externalResources:(n=this.props.options)==null?void 0:n.externalResources,bundlerURL:(a=this.props.options)==null?void 0:a.bundlerURL,startRoute:(c=this.props.options)==null?void 0:c.startRoute,fileResolver:(p=this.props.options)==null?void 0:p.fileResolver,skipEval:(h=(d=this.props.options)==null?void 0:d.skipEval)!=null?h:!1,logLevel:(y=this.props.options)==null?void 0:y.logLevel,showOpenInCodeSandbox:!this.openInCSBRegistered.current,showErrorScreen:!this.errorScreenRegistered.current,showLoadingScreen:!this.loadingScreenRegistered.current,reactDevTools:this.state.reactDevTools,customNpmRegistries:(v=(S=this.props.customSetup)==null?void 0:S.npmRegistries)==null?void 0:v.map(g=>{var k;return(k=M(u({},g),{proxyEnabled:!1}))!=null?k:[]})});return typeof this.unsubscribe!="function"&&(this.unsubscribe=s.listen(this.handleMessage),this.timeoutHook=setTimeout(()=>{this.setState({sandpackStatus:"timeout"})},yn)),this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o]&&(Object.keys(this.queuedListeners[o]).forEach(g=>{let k=this.queuedListeners[o][g],$=s.listen(k);this.unsubscribeClientListeners[o][g]=$}),this.queuedListeners[o]={}),Object.entries(this.queuedListeners.global).forEach(([g,k])=>{let $=s.listen(k);this.unsubscribeClientListeners[o][g]=$}),s};this.runSandpack=()=>{Object.keys(this.preregisteredIframes).forEach(t=>{let o=this.preregisteredIframes[t];this.clients[t]=this.createClient(o,t)}),this.setState({sandpackStatus:"running"})};this.registerBundler=(t,o)=>{this.state.sandpackStatus==="running"?this.clients[o]=this.createClient(t,o):this.preregisteredIframes[o]=t};this.unregisterBundler=t=>{var r;let o=this.clients[t];o?(o.cleanup(),(r=o.iframe.contentWindow)==null||r.location.replace("about:blank"),delete this.clients[t]):delete this.preregisteredIframes[t],this.timeoutHook&&clearTimeout(this.timeoutHook),Object.values(this.unsubscribeClientListeners).forEach(n=>{Object.values(n).forEach(c=>c())}),this.setState({sandpackStatus:"idle"})};this.unregisterAllClients=()=>{Object.keys(this.clients).map(this.unregisterBundler),typeof this.unsubscribe=="function"&&(this.unsubscribe(),this.unsubscribe=void 0)};this.setActiveFile=t=>{this.setState({activeFile:t})};this.openFile=t=>{this.setState(({visibleFiles:o})=>{let s=o.includes(t)?o:[...o,t];return{activeFile:t,visibleFiles:s}})};this.closeFile=t=>{this.state.visibleFiles.length!==1&&this.setState(({visibleFiles:o,activeFile:s})=>{let r=o.indexOf(t),n=o.filter(a=>a!==t);return{activeFile:t===s?r===0?o[1]:o[r-1]:s,visibleFiles:n}})};this.deleteFile=t=>{this.setState(({visibleFiles:o,files:s})=>{let r=u({},s);return delete r[t],{visibleFiles:o.filter(n=>n!==t),files:r}},this.updateClients)};this.addFile=this.updateFile;this.dispatchMessage=(t,o)=>{if(this.state.sandpackStatus!=="running"){console.warn("[sandpack-react]: dispatch cannot be called while in idle mode");return}o?this.clients[o].dispatch(t):Object.values(this.clients).forEach(s=>{s.dispatch(t)})};this.addListener=(t,o)=>{if(o){if(this.clients[o])return this.clients[o].listen(t);{let s=it();return this.queuedListeners[o]=this.queuedListeners[o]||{},this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o][s]=t,()=>{this.queuedListeners[o][s]?delete this.queuedListeners[o][s]:this.unsubscribeClientListeners[o][s]&&(this.unsubscribeClientListeners[o][s](),delete this.unsubscribeClientListeners[o][s])}}}else{let s=it();this.queuedListeners.global[s]=t;let n=Object.values(this.clients).map(c=>c.listen(t));return()=>{n.forEach(c=>c())}}};this.resetFile=t=>{let{files:o}=pt({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState(s=>({files:M(u({},s.files),{[t]:o[t]})}),this.updateClients)};this.resetAllFiles=()=>{let{files:t}=pt({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState({files:t},this.updateClients)};this._getSandpackState=()=>{let{files:t,activeFile:o,visibleFiles:s,visibleFilesFromProps:r,startRoute:n,bundlerState:a,editorState:c,error:p,sandpackStatus:d,environment:h,initMode:y}=this.state;return{files:t,environment:h,visibleFiles:s,visibleFilesFromProps:r,activeFile:o,startRoute:n,error:p,bundlerState:a,status:d,editorState:c,initMode:y,clients:this.clients,dispatch:this.dispatchMessage,errorScreenRegisteredRef:this.errorScreenRegistered,lazyAnchorRef:this.lazyAnchorRef,listen:this.addListener,loadingScreenRegisteredRef:this.loadingScreenRegistered,openInCSBRegisteredRef:this.openInCSBRegistered,registerBundler:this.registerBundler,runSandpack:this.runSandpack,unregisterBundler:this.unregisterBundler,registerReactDevTools:this.registerReactDevTools,openFile:this.openFile,resetFile:this.resetFile,resetAllFiles:this.resetAllFiles,setActiveFile:this.setActiveFile,updateCurrentFile:this.updateCurrentFile,updateFile:this.updateFile,addFile:this.addFile,closeFile:this.closeFile,deleteFile:this.deleteFile}};var a,c,p,d;let{activeFile:o,visibleFiles:s,files:r,environment:n}=pt({template:t.template,files:t.files,customSetup:t.customSetup,options:t.options});this.state={files:r,environment:n,visibleFiles:s,visibleFilesFromProps:s,activeFile:o,startRoute:(a=this.props.options)==null?void 0:a.startRoute,bundlerState:void 0,error:null,sandpackStatus:((p=(c=this.props.options)==null?void 0:c.autorun)!=null?p:!0)?"initial":"idle",editorState:"pristine",initMode:((d=this.props.options)==null?void 0:d.initMode)||"lazy",reactDevTools:void 0},this.queuedListeners={global:{}},this.unsubscribeClientListeners={},this.preregisteredIframes={},this.clients={},this.lazyAnchorRef=re.createRef(),this.errorScreenRegistered=re.createRef(),this.openInCSBRegistered=re.createRef(),this.loadingScreenRegistered=re.createRef()}initializeSandpackIframe(){var s,r,n,a,c;if(!((r=(s=this.props.options)==null?void 0:s.autorun)!=null?r:!0))return;let o=(a=(n=this.props.options)==null?void 0:n.initModeObserverOptions)!=null?a:{rootMargin:"1000px 0px"};this.intersectionObserver&&this.lazyAnchorRef.current&&((c=this.intersectionObserver)==null||c.unobserve(this.lazyAnchorRef.current)),this.lazyAnchorRef.current&&this.state.initMode==="lazy"?(this.intersectionObserver=new IntersectionObserver(p=>{var d;p.some(h=>h.isIntersecting)&&(this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50),this.lazyAnchorRef.current&&((d=this.intersectionObserver)==null||d.unobserve(this.lazyAnchorRef.current)))},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.lazyAnchorRef.current&&this.state.initMode==="user-visible"?(this.intersectionObserver=new IntersectionObserver(p=>{p.some(d=>d.isIntersecting)?this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50):(this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),Object.keys(this.clients).map(this.unregisterBundler),this.unregisterAllClients())},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.initializeSandpackIframeHook=setTimeout(()=>this.runSandpack(),50)}componentDidMount(){this.initializeSandpackIframe()}componentDidUpdate(t){var c,p,d,h;((c=t.options)==null?void 0:c.initMode)!==((p=this.props.options)==null?void 0:p.initMode)&&((d=this.props.options)==null?void 0:d.initMode)&&this.setState({initMode:(h=this.props.options)==null?void 0:h.initMode},this.initializeSandpackIframe);let{activeFile:o,visibleFiles:s,files:r,environment:n}=pt({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});if(t.template!==this.props.template||!(0,dt.default)(t.options,this.props.options)||!(0,dt.default)(t.customSetup,this.props.customSetup)||!(0,dt.default)(t.files,this.props.files)){if(this.setState({activeFile:o,visibleFiles:s,visibleFilesFromProps:s,files:r,environment:n}),this.state.sandpackStatus!=="running")return;Object.values(this.clients).forEach(y=>y.updatePreview({files:r,template:n}))}let a=(0,dt.default)(r,this.state.files)?"pristine":"dirty";a!==this.state.editorState&&this.setState({editorState:a})}componentWillUnmount(){typeof this.unsubscribe=="function"&&this.unsubscribe(),this.timeoutHook&&clearTimeout(this.timeoutHook),this.debounceHook&&clearTimeout(this.debounceHook),this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),this.intersectionObserver&&this.intersectionObserver.disconnect()}render(){var n;let{children:t,theme:o,className:s,style:r}=this.props;return re.createElement(mt.Provider,{value:this._getSandpackState()},re.createElement(Os.ClasserProvider,{classes:(n=this.props.options)==null?void 0:n.classes},re.createElement(No,{className:s,style:r,theme:o},t)))}},Mo=$o,Sn=mt.Consumer;function T(){let e=Ds.useContext(mt);if(e===null)throw new Error('[sandpack-react]: "useSandpack" must be wrapped by a "SandpackProvider"');let r=e,{dispatch:t,listen:o}=r,s=N(r,["dispatch","listen"]);return{sandpack:u({},s),dispatch:t,listen:o}}var ut=()=>{var t,o,s;let{sandpack:e}=T();return{code:(t=e.files[e.activeFile])==null?void 0:t.code,readOnly:(s=(o=e.files[e.activeFile])==null?void 0:o.readOnly)!=null?s:!1,updateCode:e.updateCurrentFile}};var Bs=f(require("@code-hike/classer")),Ye=f(require("react"));var me=m({svg:{margin:"auto"}}),F=m({appearance:"none",border:"0",outline:"none",display:"flex",alignItems:"center",fontSize:"inherit",fontFamily:"inherit",backgroundColor:"transparent",transition:"color $default, background $default",cursor:"pointer",color:"$colors$clickable","&:disabled":{color:"$colors$disabled"},"&:hover:not(:disabled,[data-active='true'])":{color:"$colors$hover"},'&[data-active="true"]':{color:"$colors$accent"},svg:{minWidth:"$space$4",width:"$space$4",height:"$space$4"},[`&.${me}`]:{padding:"$space$1",width:"$space$7",height:"$space$7",display:"flex"}}),te=m({backgroundColor:"$colors$surface2",borderRadius:"99999px",'&[data-active="true"]':{color:"$colors$surface1",background:"$colors$accent"},"&:hover:not(:disabled,[data-active='true'])":{backgroundColor:"$colors$surface3"}}),Hs=m({padding:0}),vn=Mt({"0%":{opacity:0,transform:"translateY(4px)"},"100%":{opacity:1,transform:"translateY(0)"}}),ft=m({position:"absolute",bottom:"0",left:"0",right:"0",top:"0",margin:"0",overflow:"auto",height:"100%",zIndex:"$top"}),jt=m({padding:"$space$4",whiteSpace:"pre-wrap",fontFamily:"$font$mono",backgroundColor:"$colors$errorSurface"}),Ze=m({animation:`${vn} 150ms ease`,color:"$colors$error"});var kn=m({borderBottom:"1px solid $colors$surface2",background:"$colors$surface1"}),Cn=m({padding:"0 $space$2",overflow:"auto",display:"flex",flexWrap:"nowrap",alignItems:"stretch",minHeight:"40px",marginBottom:"-1px"}),_s=m({padding:"0 $space$1 0 $space$1",borderRadius:"$border$radius",marginLeft:"$space$1",width:"$space$5",visibility:"hidden",svg:{width:"$space$3",height:"$space$3",display:"block",position:"relative",top:1}}),js=m({padding:"0 $space$2",height:"$layout$headerHeight",whiteSpace:"nowrap","&:focus":{outline:"none"},[`&:hover > .${_s}`]:{visibility:"unset"}}),ht=s=>{var r=s,{closableTabs:e,className:t}=r,o=N(r,["closableTabs","className"]);let{sandpack:n}=T(),a=(0,Bs.useClasser)(b),{activeFile:c,visibleFiles:p,setActiveFile:d}=n,h=S=>{S.stopPropagation();let v=S.target.closest("[data-active]"),g=v==null?void 0:v.getAttribute("title");!g||n.closeFile(g)},y=S=>{let v=Xe(S),g=p.reduce((k,$)=>($===S||Xe($)===v&&k.push($),k),[]);return g.length===0?v:Es(S,g)};return Ye.createElement("div",u({className:l(a("tabs"),kn,t),translate:"no"},o),Ye.createElement("div",{"aria-label":"Select active file",className:l(a("tabs-scrollable-container"),Cn),role:"tablist"},p.map(S=>Ye.createElement("button",{key:S,"aria-selected":S===c,className:l(a("tab-button"),F,js),"data-active":S===c,onClick:()=>d(S),role:"tab",title:S,type:"button"},y(S),e&&p.length>1&&Ye.createElement("span",{className:l(a("close-button"),_s),onClick:h},Ye.createElement(Ro,null))))))};var Us=f(require("@code-hike/classer")),Lo=f(require("react"));var xn=m({position:"absolute",bottom:"$space$2",right:"$space$2",paddingRight:"$space$3"}),gt=s=>{var r=s,{className:e,onClick:t}=r,o=N(r,["className","onClick"]);let n=(0,Us.useClasser)(b),{sandpack:a}=T();return Lo.createElement("button",u({className:l(n("button"),F,te,xn,e),onClick:c=>{a.runSandpack(),t==null||t(c)},type:"button"},o),Lo.createElement(rt,null),"Run")};var zs=f(require("@code-hike/classer")),Vs=f(require("react"));var Te=m({display:"flex",flexDirection:"column",width:"100%",position:"relative",backgroundColor:"$colors$surface1",transition:"flex $transitions$default",gap:1,[`&:has(.${b}-stack)`]:{backgroundColor:"$colors$surface2"}}),ne=o=>{var s=o,{className:e}=s,t=N(s,["className"]);let r=(0,zs.useClasser)(b);return Vs.createElement("div",u({className:l(r("stack"),Te,e)},t))};var ir=f(require("@code-hike/classer")),Xt=f(require("@codemirror/closebrackets")),Ne=f(require("@codemirror/commands")),cr=f(require("@codemirror/comment")),lr=f(require("@codemirror/gutter")),pr=f(require("@codemirror/highlight")),Wt=f(require("@codemirror/history")),dr=f(require("@codemirror/matchbrackets")),$e=f(require("@codemirror/state")),Io=f(require("@codemirror/state")),fe=f(require("@codemirror/view")),mr=f(require("@react-hook/intersection-observer")),L=f(require("react"));var Xs=f(require("react"));var Oe=()=>{let{theme:e,id:t,mode:o}=Xs.useContext(lt);return{theme:e,themeId:t,themeMode:o}};var wo=(e,t)=>{if(e.length!==t.length)return!1;let o=!0;for(let s=0;s<e.length;s++)if(e[s]!==t[s]){o=!1;break}return o};var De=f(require("@codemirror/view"));var P=f(require("@codemirror/highlight")),Ws=f(require("@codemirror/lang-css")),Gs=f(require("@codemirror/lang-html")),Fo=f(require("@codemirror/lang-javascript")),Zs=f(require("@codemirror/view")),Ys=f(require("react"));var bt=(e,{line:t,column:o})=>e.line(t).from+(o!=null?o:0)-1,Js=()=>Zs.EditorView.theme({"&":{backgroundColor:`var(--${b}-colors-surface1)`,color:`var(--${b}-syntax-color-plain)`,height:"100%"},".cm-matchingBracket, .cm-nonmatchingBracket, &.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket":{color:"inherit",backgroundColor:"rgba(128,128,128,.25)",backgroundBlendMode:"difference"},"&.cm-editor.cm-focused":{outline:"none"},".cm-activeLine":{backgroundColor:`var(--${b}-colors-surface3)`,borderRadius:`var(--${b}-border-radius)`},".cm-errorLine":{backgroundColor:`var(--${b}-colors-errorSurface)`,borderRadius:`var(--${b}-border-radius)`},".cm-content":{caretColor:`var(--${b}-colors-accent)`,padding:`0 var(--${b}-space-4)`},".cm-scroller":{fontFamily:`var(--${b}-font-mono)`,lineHeight:`var(--${b}-font-lineHeight)`},".cm-gutters":{backgroundColor:`var(--${b}-colors-surface1)`,color:`var(--${b}-colors-disabled)`,border:"none",paddingLeft:`var(--${b}-space-1)`},".cm-gutter.cm-lineNumbers":{fontSize:".6em"},".cm-lineNumbers .cm-gutterElement":{lineHeight:`var(--${b}-font-lineHeight)`,minWidth:`var(--${b}-space-5)`},".cm-content .cm-line":{paddingLeft:`var(--${b}-space-1)`},".cm-content.cm-readonly .cm-line":{paddingLeft:0}}),ue=e=>`${b}-syntax-${e}`,qs=()=>["string","plain","comment","keyword","definition","punctuation","property","tag","static"].reduce((t,o)=>M(u({},t),{[`.${ue(o)}`]:{color:`$syntax$color$${o}`,fontStyle:`$syntax$fontStyle$${o}`}}),{}),Ks=e=>P.HighlightStyle.define([{tag:P.tags.link,textDecoration:"underline"},{tag:P.tags.emphasis,fontStyle:"italic"},{tag:P.tags.strong,fontWeight:"bold"},{tag:P.tags.keyword,class:ue("keyword")},{tag:[P.tags.atom,P.tags.number,P.tags.bool],class:ue("static")},{tag:P.tags.tagName,class:ue("tag")},{tag:P.tags.variableName,class:ue("plain")},{tag:P.tags.function(P.tags.variableName),class:ue("definition")},{tag:P.tags.definition(P.tags.function(P.tags.variableName)),class:ue("definition")},{tag:P.tags.propertyName,class:ue("property")},{tag:[P.tags.literal,P.tags.inserted],class:ue(e.syntax.string?"string":"static")},{tag:P.tags.punctuation,class:ue("punctuation")},{tag:[P.tags.comment,P.tags.quote],class:ue("comment")}]),Qs=(e,t,o)=>{if(!e&&!t)return"javascript";let s=t;if(!s&&e){let r=e.lastIndexOf(".");s=e.slice(r+1)}for(let r of o)if(s===r.name||r.extensions.includes(s||""))return r.name;switch(s){case"ts":case"tsx":return"typescript";case"html":case"svelte":case"vue":return"html";case"css":case"less":case"scss":return"css";case"js":case"jsx":case"json":default:return"javascript"}},er=(e,t)=>{let o={javascript:(0,Fo.javascript)({jsx:!0,typescript:!1}),typescript:(0,Fo.javascript)({jsx:!0,typescript:!0}),html:(0,Gs.html)(),css:(0,Ws.css)()};for(let s of t)if(e===s.name)return s.language;return o[e]},Ut=(...e)=>Ys.useCallback(t=>e.forEach(o=>{if(!!o){if(typeof o=="function")return o(t);o.current=t}}),e);function tr(e){return De.ViewPlugin.fromClass(class{constructor(t){this.decorations=this.getDecoration(t)}update(t){}getDecoration(t){if(!e)return De.Decoration.none;let o=e.map(s=>{var c,p,d;let r=De.Decoration.line({attributes:{class:(c=s.className)!=null?c:""}}),n=De.Decoration.mark({class:(p=s.className)!=null?p:"",attributes:(d=s.elementAttributes)!=null?d:void 0}),a=bt(t.state.doc,{line:s.line,column:s.startColumn})+1;if(s.startColumn&&s.endColumn){let h=bt(t.state.doc,{line:s.line,column:s.endColumn})+1;return n.range(a,h)}return r.range(a)});return De.Decoration.set(o)}},{decorations:t=>t.decorations})}var He=f(require("@codemirror/view"));function or(){return En}var Rn=He.Decoration.line({attributes:{class:"cm-errorLine"}}),En=He.ViewPlugin.fromClass(class{constructor(){this.decorations=He.Decoration.none}update(e){e.transactions.forEach(t=>{let o=t.annotation("show-error");if(o!==void 0){let s=bt(e.view.state.doc,{line:o})+1;this.decorations=He.Decoration.set([Rn.range(s)])}else t.annotation("remove-errors")&&(this.decorations=He.Decoration.none)})}},{decorations:e=>e.decorations});var zt=m({margin:"0",display:"block",fontFamily:"$font$mono",fontSize:"$font$size",color:"$syntax$color$plain",lineHeight:"$font$lineHeight"}),Ao=m(qs()),Vt=m({flex:1,position:"relative",overflow:"auto",background:"$colors$surface1",".cm-scroller":{padding:"$space$4 0"},[`.${zt}`]:{padding:"$space$4 0"}}),Po=m({margin:"0",outline:"none",height:"100%"}),sr=m({fontFamily:"$font$mono",fontSize:"0.8em",position:"absolute",right:"$space$2",bottom:"$space$2",zIndex:"$top",color:"$colors$clickable",backgroundColor:"$colors$surface2",borderRadius:"99999px",padding:"calc($space$1 / 2) $space$2",[`& + .${F}`]:{right:"calc($space$11 * 2)"}});var rr=f(require("@codemirror/highlight")),nr=f(require("react")),ar=({langSupport:e,highlightTheme:t,code:o=""})=>{let s=e.language.parser.parse(o),r=0,n=[],a=(c,p)=>{if(c>r){let d=o.slice(r,c);n.push(p?(0,nr.createElement)("span",{children:d,className:p,key:`${c}${r}`}):d),r=c}};return(0,rr.highlightTree)(s,t.match,(c,p,d)=>{a(c,""),a(p,d)}),r<o.length&&n.push(`
-+`},"/package.json":{code:JSON.stringify({dependencies:{"core-js":"^3.6.5",vue:"^3.0.0-0","@vue/cli-plugin-babel":"4.5.0"},main:"/src/main.js"})}},main:"/src/App.vue",environment:"vue-cli"};var We={react:wt,"react-ts":Ft,vue:Ht,vanilla:Ot,"vanilla-ts":Dt,vue3:Bt,angular:Lt,svelte:Pt,solid:At,"test-ts":It};var pt=e=>{var c,p,d,h,y,S;let t=(0,Ee.normalizePath)(e.files),o=bn({template:e.template,customSetup:e.customSetup,files:t}),s=(0,Ee.normalizePath)((p=(c=e.options)==null?void 0:c.visibleFiles)!=null?p:[]),r=((d=e.options)==null?void 0:d.activeFile)?Is((h=e.options)==null?void 0:h.activeFile,t||{}):void 0;s.length===0&&t&&Object.keys(t).forEach(v=>{let g=t[v];if(typeof g=="string"){s.push(v);return}!r&&g.active&&(r=v,g.hidden===!0&&s.push(v)),g.hidden||s.push(v)}),s.length===0&&(s=[o.main]),o.files[o.entry]||(o.entry=Is(o.entry,o.files)),!r&&o.main&&(r=o.main),(!r||!o.files[r])&&(r=s[0]),s.includes(r)||s.push(r);let n=(0,Ee.addPackageJSONIfNeeded)(o.files,(y=o.dependencies)!=null?y:{},(S=o.devDependencies)!=null?S:{},o.entry);return{visibleFiles:s.filter(v=>n[v]),activeFile:r,files:n,environment:o.environment}},Is=(e,t)=>{let o=(0,Ee.normalizePath)(t),s=(0,Ee.normalizePath)(e);if(s in o)return s;if(!e)return null;let r=null,n=0,a=[".js",".jsx",".ts",".tsx"];for(;!r&&n<a.length;){let p=`${s.split(".")[0]}${a[n]}`;o[p]!==void 0&&(r=p),n++}return r},bn=({files:e,template:t,customSetup:o})=>{if(!t){if(!o)return We.vanilla;if(!e||Object.keys(e).length===0)throw new Error("[sandpack-react]: without a template, you must pass at least one file");return M(u({},o),{files:_t(e)})}let s=We[t];if(!s)throw new Error(`[sandpack-react]: invalid template "${t}" provided`);return!o&&!e?s:{files:_t(u(u({},s.files),e)),dependencies:u(u({},s.dependencies),o==null?void 0:o.dependencies),devDependencies:u(u({},s.devDependencies),o==null?void 0:o.devDependencies),entry:(0,Ee.normalizePath)((o==null?void 0:o.entry)||s.entry),main:s.main,environment:(o==null?void 0:o.environment)||s.environment}},_t=e=>e?Object.keys(e).reduce((t,o)=>(typeof e[o]=="string"?t[o]={code:e[o]}:t[o]=e[o],t),{}):{};var mt=re.createContext(null),yn=3e4,$o=class extends re.PureComponent{constructor(t){super(t);this.timeoutHook=null;this.initializeSandpackIframeHook=null;this.handleMessage=t=>{this.timeoutHook&&clearTimeout(this.timeoutHook),t.type==="state"?this.setState({bundlerState:t.state}):t.type==="done"&&!t.compilatonError?this.setState({error:null}):t.type==="action"&&t.action==="show-error"?this.setState({error:(0,Ge.extractErrorDetails)(t)}):t.type==="action"&&t.action==="notification"&&t.notificationType==="error"&&this.setState({error:{message:t.title}})};this.registerReactDevTools=t=>{this.setState({reactDevTools:t})};this.updateCurrentFile=t=>{this.updateFile(this.state.activeFile,t)};this.updateFile=(t,o)=>{var r;let s=this.state.files;if(typeof t=="string"&&o){if(o===((r=this.state.files[t])==null?void 0:r.code))return;s=M(u({},s),{[t]:{code:o}})}else typeof t=="object"&&(s=u(u({},s),_t(t)));this.setState({files:(0,Ge.normalizePath)(s)},this.updateClients)};this.updateClients=()=>{var n,a,c,p;let{files:t,sandpackStatus:o}=this.state,s=(a=(n=this.props.options)==null?void 0:n.recompileMode)!=null?a:"delayed",r=(p=(c=this.props.options)==null?void 0:c.recompileDelay)!=null?p:500;o==="running"&&(s==="immediate"&&Object.values(this.clients).forEach(d=>{d.updatePreview({files:t})}),s==="delayed"&&(window.clearTimeout(this.debounceHook),this.debounceHook=window.setTimeout(()=>{Object.values(this.clients).forEach(d=>{d.updatePreview({files:this.state.files})})},r)))};this.createClient=(t,o)=>{var n,a,c,p,d,h,y,S,v;let s=new Ge.SandpackClient(t,{files:this.state.files,template:this.state.environment},{externalResources:(n=this.props.options)==null?void 0:n.externalResources,bundlerURL:(a=this.props.options)==null?void 0:a.bundlerURL,startRoute:(c=this.props.options)==null?void 0:c.startRoute,fileResolver:(p=this.props.options)==null?void 0:p.fileResolver,skipEval:(h=(d=this.props.options)==null?void 0:d.skipEval)!=null?h:!1,logLevel:(y=this.props.options)==null?void 0:y.logLevel,showOpenInCodeSandbox:!this.openInCSBRegistered.current,showErrorScreen:!this.errorScreenRegistered.current,showLoadingScreen:!this.loadingScreenRegistered.current,reactDevTools:this.state.reactDevTools,customNpmRegistries:(v=(S=this.props.customSetup)==null?void 0:S.npmRegistries)==null?void 0:v.map(g=>{var k;return(k=M(u({},g),{proxyEnabled:!1}))!=null?k:[]})});return typeof this.unsubscribe!="function"&&(this.unsubscribe=s.listen(this.handleMessage),this.timeoutHook=setTimeout(()=>{this.setState({sandpackStatus:"timeout"})},yn)),this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o]&&(Object.keys(this.queuedListeners[o]).forEach(g=>{let k=this.queuedListeners[o][g],$=s.listen(k);this.unsubscribeClientListeners[o][g]=$}),this.queuedListeners[o]={}),Object.entries(this.queuedListeners.global).forEach(([g,k])=>{let $=s.listen(k);this.unsubscribeClientListeners[o][g]=$}),s};this.runSandpack=()=>{Object.keys(this.preregisteredIframes).forEach(t=>{let o=this.preregisteredIframes[t];this.clients[t]=this.createClient(o,t)}),this.setState({sandpackStatus:"running"})};this.registerBundler=(t,o)=>{this.state.sandpackStatus==="running"?this.clients[o]=this.createClient(t,o):this.preregisteredIframes[o]=t};this.unregisterBundler=t=>{var r;let o=this.clients[t];o?(o.cleanup(),(r=o.iframe.contentWindow)==null||r.location.replace("about:blank"),delete this.clients[t]):delete this.preregisteredIframes[t],this.timeoutHook&&clearTimeout(this.timeoutHook),Object.values(this.unsubscribeClientListeners).forEach(n=>{Object.values(n).forEach(c=>c())}),this.setState({sandpackStatus:"idle"})};this.unregisterAllClients=()=>{Object.keys(this.clients).map(this.unregisterBundler),typeof this.unsubscribe=="function"&&(this.unsubscribe(),this.unsubscribe=void 0)};this.setActiveFile=t=>{this.setState({activeFile:t})};this.openFile=t=>{this.setState(({visibleFiles:o})=>{let s=o.includes(t)?o:[...o,t];return{activeFile:t,visibleFiles:s}})};this.closeFile=t=>{this.state.visibleFiles.length!==1&&this.setState(({visibleFiles:o,activeFile:s})=>{let r=o.indexOf(t),n=o.filter(a=>a!==t);return{activeFile:t===s?r===0?o[1]:o[r-1]:s,visibleFiles:n}})};this.deleteFile=t=>{this.setState(({visibleFiles:o,files:s})=>{let r=u({},s);return delete r[t],{visibleFiles:o.filter(n=>n!==t),files:r}},this.updateClients)};this.addFile=this.updateFile;this.dispatchMessage=(t,o)=>{if(this.state.sandpackStatus!=="running"){console.warn("[sandpack-react]: dispatch cannot be called while in idle mode");return}o?this.clients[o].dispatch(t):Object.values(this.clients).forEach(s=>{s.dispatch(t)})};this.addListener=(t,o)=>{if(o){if(this.clients[o])return this.clients[o].listen(t);{let s=it();return this.queuedListeners[o]=this.queuedListeners[o]||{},this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o][s]=t,()=>{this.queuedListeners[o][s]?delete this.queuedListeners[o][s]:this.unsubscribeClientListeners[o][s]&&(this.unsubscribeClientListeners[o][s](),delete this.unsubscribeClientListeners[o][s])}}}else{let s=it();this.queuedListeners.global[s]=t;let n=Object.values(this.clients).map(c=>c.listen(t));return()=>{n.forEach(c=>c())}}};this.resetFile=t=>{let{files:o}=pt({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState(s=>({files:M(u({},s.files),{[t]:o[t]})}),this.updateClients)};this.resetAllFiles=()=>{let{files:t}=pt({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState({files:t},this.updateClients)};this._getSandpackState=()=>{let{files:t,activeFile:o,visibleFiles:s,visibleFilesFromProps:r,startRoute:n,bundlerState:a,editorState:c,error:p,sandpackStatus:d,environment:h,initMode:y}=this.state;return{files:t,environment:h,visibleFiles:s,visibleFilesFromProps:r,activeFile:o,startRoute:n,error:p,bundlerState:a,status:d,editorState:c,initMode:y,clients:this.clients,dispatch:this.dispatchMessage,errorScreenRegisteredRef:this.errorScreenRegistered,lazyAnchorRef:this.lazyAnchorRef,listen:this.addListener,loadingScreenRegisteredRef:this.loadingScreenRegistered,openInCSBRegisteredRef:this.openInCSBRegistered,registerBundler:this.registerBundler,runSandpack:this.runSandpack,unregisterBundler:this.unregisterBundler,registerReactDevTools:this.registerReactDevTools,openFile:this.openFile,resetFile:this.resetFile,resetAllFiles:this.resetAllFiles,setActiveFile:this.setActiveFile,updateCurrentFile:this.updateCurrentFile,updateFile:this.updateFile,addFile:this.addFile,closeFile:this.closeFile,deleteFile:this.deleteFile}};var a,c,p,d;let{activeFile:o,visibleFiles:s,files:r,environment:n}=pt({template:t.template,files:t.files,customSetup:t.customSetup,options:t.options});this.state={files:r,environment:n,visibleFiles:s,visibleFilesFromProps:s,activeFile:o,startRoute:(a=this.props.options)==null?void 0:a.startRoute,bundlerState:void 0,error:null,sandpackStatus:((p=(c=this.props.options)==null?void 0:c.autorun)!=null?p:!0)?"initial":"idle",editorState:"pristine",initMode:((d=this.props.options)==null?void 0:d.initMode)||"lazy",reactDevTools:void 0},this.queuedListeners={global:{}},this.unsubscribeClientListeners={},this.preregisteredIframes={},this.clients={},this.lazyAnchorRef=re.createRef(),this.errorScreenRegistered=re.createRef(),this.openInCSBRegistered=re.createRef(),this.loadingScreenRegistered=re.createRef()}initializeSandpackIframe(){var s,r,n,a,c;if(!((r=(s=this.props.options)==null?void 0:s.autorun)!=null?r:!0))return;let o=(a=(n=this.props.options)==null?void 0:n.initModeObserverOptions)!=null?a:{rootMargin:"1000px 0px"};this.intersectionObserver&&this.lazyAnchorRef.current&&((c=this.intersectionObserver)==null||c.unobserve(this.lazyAnchorRef.current)),this.lazyAnchorRef.current&&this.state.initMode==="lazy"?(this.intersectionObserver=new IntersectionObserver(p=>{var d;p.some(h=>h.isIntersecting)&&(this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50),this.lazyAnchorRef.current&&((d=this.intersectionObserver)==null||d.unobserve(this.lazyAnchorRef.current)))},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.lazyAnchorRef.current&&this.state.initMode==="user-visible"?(this.intersectionObserver=new IntersectionObserver(p=>{p.some(d=>d.isIntersecting)?this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50):(this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),Object.keys(this.clients).map(this.unregisterBundler),this.unregisterAllClients())},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.initializeSandpackIframeHook=setTimeout(()=>this.runSandpack(),50)}componentDidMount(){this.initializeSandpackIframe()}componentDidUpdate(t){var c,p,d,h;((c=t.options)==null?void 0:c.initMode)!==((p=this.props.options)==null?void 0:p.initMode)&&((d=this.props.options)==null?void 0:d.initMode)&&this.setState({initMode:(h=this.props.options)==null?void 0:h.initMode},this.initializeSandpackIframe);let{activeFile:o,visibleFiles:s,files:r,environment:n}=pt({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});if(t.template!==this.props.template||!(0,dt.default)(t.options,this.props.options)||!(0,dt.default)(t.customSetup,this.props.customSetup)||!(0,dt.default)(t.files,this.props.files)){if(this.setState({activeFile:o,visibleFiles:s,visibleFilesFromProps:s,files:r,environment:n}),this.state.sandpackStatus!=="running")return;Object.values(this.clients).forEach(y=>y.updatePreview({files:r,template:n}))}let a=(0,dt.default)(r,this.state.files)?"pristine":"dirty";a!==this.state.editorState&&this.setState({editorState:a})}componentWillUnmount(){typeof this.unsubscribe=="function"&&this.unsubscribe(),this.timeoutHook&&clearTimeout(this.timeoutHook),this.debounceHook&&clearTimeout(this.debounceHook),this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),this.intersectionObserver&&this.intersectionObserver.disconnect()}render(){var n;let{children:t,theme:o,className:s,style:r}=this.props;return re.createElement(mt.Provider,{value:this._getSandpackState()},re.createElement(Os.ClasserProvider,{classes:(n=this.props.options)==null?void 0:n.classes},re.createElement(No,{className:s,style:r,theme:o},t)))}},Mo=$o,Sn=mt.Consumer;function T(){let e=Ds.useContext(mt);if(e===null)throw new Error('[sandpack-react]: "useSandpack" must be wrapped by a "SandpackProvider"');let r=e,{dispatch:t,listen:o}=r,s=N(r,["dispatch","listen"]);return{sandpack:u({},s),dispatch:t,listen:o}}var ut=()=>{var t,o,s;let{sandpack:e}=T();return{code:(t=e.files[e.activeFile])==null?void 0:t.code,readOnly:(s=(o=e.files[e.activeFile])==null?void 0:o.readOnly)!=null?s:!1,updateCode:e.updateCurrentFile}};var Bs=f(require("@code-hike/classer")),Ye=f(require("react"));var me=m({svg:{margin:"auto"}}),F=m({appearance:"none",border:"0",outline:"none",display:"flex",alignItems:"center",fontSize:"inherit",fontFamily:"inherit",backgroundColor:"transparent",transition:"color $default, background $default",cursor:"pointer",color:"$colors$clickable","&:disabled":{color:"$colors$disabled"},"&:hover:not(:disabled,[data-active='true'])":{color:"$colors$hover"},'&[data-active="true"]':{color:"$colors$accent"},svg:{minWidth:"$space$4",width:"$space$4",height:"$space$4"},[`&.${me}`]:{padding:"$space$1",width:"$space$7",height:"$space$7",display:"flex"}}),te=m({backgroundColor:"$colors$surface2",borderRadius:"99999px",'&[data-active="true"]':{color:"$colors$surface1",background:"$colors$accent"},"&:hover:not(:disabled,[data-active='true'])":{backgroundColor:"$colors$surface3"}}),Hs=m({padding:0}),vn=Mt({"0%":{opacity:0,transform:"translateY(4px)"},"100%":{opacity:1,transform:"translateY(0)"}}),ft=m({position:"absolute",bottom:"0",left:"0",right:"0",top:"0",margin:"0",overflow:"auto",height:"100%",zIndex:"$top"}),jt=m({padding:"$space$4",whiteSpace:"pre-wrap",fontFamily:"$font$mono",backgroundColor:"$colors$errorSurface"}),Ze=m({animation:`${vn} 150ms ease`,color:"$colors$error"});var kn=m({borderBottom:"1px solid $colors$surface2",background:"$colors$surface1"}),Cn=m({padding:"0 $space$2",overflow:"auto",display:"flex",flexWrap:"nowrap",alignItems:"stretch",minHeight:"40px",marginBottom:"-1px"}),_s=m({padding:"0 $space$1 0 $space$1",borderRadius:"$border$radius",marginLeft:"$space$1",width:"$space$5",visibility:"hidden",svg:{width:"$space$3",height:"$space$3",display:"block",position:"relative",top:1}}),js=m({padding:"0 $space$2",height:"$layout$headerHeight",whiteSpace:"nowrap","&:focus":{outline:"none"},[`&:hover > .${_s}`]:{visibility:"unset"}}),ht=s=>{var r=s,{closableTabs:e,className:t}=r,o=N(r,["closableTabs","className"]);let{sandpack:n}=T(),a=(0,Bs.useClasser)(b),{activeFile:c,visibleFiles:p,setActiveFile:d}=n,h=S=>{S.stopPropagation();let v=S.target.closest("[data-active]"),g=v==null?void 0:v.getAttribute("title");!g||n.closeFile(g)},y=S=>{let v=Xe(S),g=p.reduce((k,$)=>($===S||Xe($)===v&&k.push($),k),[]);return g.length===0?v:Es(S,g)};return Ye.createElement("div",u({className:l(a("tabs"),kn,t),translate:"no"},o),Ye.createElement("div",{"aria-label":"Select active file",className:l(a("tabs-scrollable-container"),Cn),role:"tablist"},p.map(S=>Ye.createElement("button",{key:S,"aria-selected":S===c,className:l(a("tab-button"),F,js),"data-active":S===c,onClick:()=>d(S),role:"tab",title:S,type:"button"},y(S),e&&p.length>1&&Ye.createElement("span",{className:l(a("close-button"),_s),onClick:h},Ye.createElement(Ro,null))))))};var Us=f(require("@code-hike/classer")),Lo=f(require("react"));var xn=m({position:"absolute",bottom:"$space$2",right:"$space$2",paddingRight:"$space$3"}),gt=s=>{var r=s,{className:e,onClick:t}=r,o=N(r,["className","onClick"]);let n=(0,Us.useClasser)(b),{sandpack:a}=T();return Lo.createElement("button",u({className:l(n("button"),F,te,xn,e),onClick:c=>{a.runSandpack(),t==null||t(c)},type:"button"},o),Lo.createElement(rt,null),"Run")};var zs=f(require("@code-hike/classer")),Vs=f(require("react"));var Te=m({display:"flex",flexDirection:"column",width:"100%",position:"relative",backgroundColor:"$colors$surface1",transition:"flex $transitions$default",gap:1,[`&:has(.${b}-stack)`]:{backgroundColor:"$colors$surface2"}}),ne=o=>{var s=o,{className:e}=s,t=N(s,["className"]);let r=(0,zs.useClasser)(b);return Vs.createElement("div",u({className:l(r("stack"),Te,e)},t))};var ir=f(require("@code-hike/classer")),Xt=f(require("@codemirror/closebrackets")),Ne=f(require("@codemirror/commands")),cr=f(require("@codemirror/comment")),lr=f(require("@codemirror/gutter")),pr=f(require("@codemirror/highlight")),Wt=f(require("@codemirror/history")),dr=f(require("@codemirror/matchbrackets")),$e=f(require("@codemirror/state")),Io=f(require("@codemirror/state")),fe=f(require("@codemirror/view")),mr=f(require("@react-hook/intersection-observer")),L=f(require("react"));var Xs=f(require("react"));var Oe=()=>{let{theme:e,id:t,mode:o}=Xs.useContext(lt);return{theme:e,themeId:t,themeMode:o}};var wo=(e,t)=>{if(e.length!==t.length)return!1;let o=!0;for(let s=0;s<e.length;s++)if(e[s]!==t[s]){o=!1;break}return o};var De=f(require("@codemirror/view"));var P=f(require("@codemirror/highlight")),Ws=f(require("@codemirror/lang-css")),Gs=f(require("@codemirror/lang-html")),Fo=f(require("@codemirror/lang-javascript")),Zs=f(require("@codemirror/view")),Ys=f(require("react"));var bt=(e,{line:t,column:o})=>e.line(t).from+(o!=null?o:0)-1,Js=()=>Zs.EditorView.theme({"&":{backgroundColor:`var(--${b}-colors-surface1)`,color:`var(--${b}-syntax-color-plain)`,height:"100%"},".cm-matchingBracket, .cm-nonmatchingBracket, &.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket":{color:"inherit",backgroundColor:"rgba(128,128,128,.25)",backgroundBlendMode:"difference"},"&.cm-editor.cm-focused":{outline:"none"},".cm-activeLine":{backgroundColor:`var(--${b}-colors-surface3)`,borderRadius:`var(--${b}-border-radius)`},".cm-errorLine":{backgroundColor:`var(--${b}-colors-errorSurface)`,borderRadius:`var(--${b}-border-radius)`},".cm-content":{caretColor:`var(--${b}-colors-accent)`,padding:`0 var(--${b}-space-4)`},".cm-scroller":{fontFamily:`var(--${b}-font-mono)`,lineHeight:`var(--${b}-font-lineHeight)`},".cm-gutters":{backgroundColor:`var(--${b}-colors-surface1)`,color:`var(--${b}-colors-disabled)`,border:"none",paddingLeft:`var(--${b}-space-1)`},".cm-gutter.cm-lineNumbers":{fontSize:".6em"},".cm-lineNumbers .cm-gutterElement":{lineHeight:`var(--${b}-font-lineHeight)`,minWidth:`var(--${b}-space-5)`},".cm-content .cm-line":{paddingLeft:`var(--${b}-space-1)`},".cm-content.cm-readonly .cm-line":{paddingLeft:0}}),ue=e=>`${b}-syntax-${e}`,qs=()=>["string","plain","comment","keyword","definition","punctuation","property","tag","static"].reduce((t,o)=>M(u({},t),{[`.${ue(o)}`]:{color:`$syntax$color$${o}`,fontStyle:`$syntax$fontStyle$${o}`}}),{}),Ks=e=>P.HighlightStyle.define([{tag:P.tags.link,textDecoration:"underline"},{tag:P.tags.emphasis,fontStyle:"italic"},{tag:P.tags.strong,fontWeight:"bold"},{tag:P.tags.keyword,class:ue("keyword")},{tag:[P.tags.atom,P.tags.number,P.tags.bool],class:ue("static")},{tag:P.tags.standard(P.tags.tagName),class:ue("tag")},{tag:P.tags.variableName,class:ue("plain")},{tag:P.tags.function(P.tags.variableName),class:ue("definition")},{tag:[P.tags.definition(P.tags.function(P.tags.variableName)),P.tags.tagName],class:ue("definition")},{tag:P.tags.propertyName,class:ue("property")},{tag:[P.tags.literal,P.tags.inserted],class:ue(e.syntax.string?"string":"static")},{tag:P.tags.punctuation,class:ue("punctuation")},{tag:[P.tags.comment,P.tags.quote],class:ue("comment")}]),Qs=(e,t,o)=>{if(!e&&!t)return"javascript";let s=t;if(!s&&e){let r=e.lastIndexOf(".");s=e.slice(r+1)}for(let r of o)if(s===r.name||r.extensions.includes(s||""))return r.name;switch(s){case"ts":case"tsx":return"typescript";case"html":case"svelte":case"vue":return"html";case"css":case"less":case"scss":return"css";case"js":case"jsx":case"json":default:return"javascript"}},er=(e,t)=>{let o={javascript:(0,Fo.javascript)({jsx:!0,typescript:!1}),typescript:(0,Fo.javascript)({jsx:!0,typescript:!0}),html:(0,Gs.html)(),css:(0,Ws.css)()};for(let s of t)if(e===s.name)return s.language;return o[e]},Ut=(...e)=>Ys.useCallback(t=>e.forEach(o=>{if(!!o){if(typeof o=="function")return o(t);o.current=t}}),e);function tr(e){return De.ViewPlugin.fromClass(class{constructor(t){this.decorations=this.getDecoration(t)}update(t){}getDecoration(t){if(!e)return De.Decoration.none;let o=e.map(s=>{var c,p,d;let r=De.Decoration.line({attributes:{class:(c=s.className)!=null?c:""}}),n=De.Decoration.mark({class:(p=s.className)!=null?p:"",attributes:(d=s.elementAttributes)!=null?d:void 0}),a=bt(t.state.doc,{line:s.line,column:s.startColumn})+1;if(s.startColumn&&s.endColumn){let h=bt(t.state.doc,{line:s.line,column:s.endColumn})+1;return n.range(a,h)}return r.range(a)});return De.Decoration.set(o)}},{decorations:t=>t.decorations})}var He=f(require("@codemirror/view"));function or(){return En}var Rn=He.Decoration.line({attributes:{class:"cm-errorLine"}}),En=He.ViewPlugin.fromClass(class{constructor(){this.decorations=He.Decoration.none}update(e){e.transactions.forEach(t=>{let o=t.annotation("show-error");if(o!==void 0){let s=bt(e.view.state.doc,{line:o})+1;this.decorations=He.Decoration.set([Rn.range(s)])}else t.annotation("remove-errors")&&(this.decorations=He.Decoration.none)})}},{decorations:e=>e.decorations});var zt=m({margin:"0",display:"block",fontFamily:"$font$mono",fontSize:"$font$size",color:"$syntax$color$plain",lineHeight:"$font$lineHeight"}),Ao=m(qs()),Vt=m({flex:1,position:"relative",overflow:"auto",background:"$colors$surface1",".cm-scroller":{padding:"$space$4 0"},[`.${zt}`]:{padding:"$space$4 0"}}),Po=m({margin:"0",outline:"none",height:"100%"}),sr=m({fontFamily:"$font$mono",fontSize:"0.8em",position:"absolute",right:"$space$2",bottom:"$space$2",zIndex:"$top",color:"$colors$clickable",backgroundColor:"$colors$surface2",borderRadius:"99999px",padding:"calc($space$1 / 2) $space$2",[`& + .${F}`]:{right:"calc($space$11 * 2)"}});var rr=f(require("@codemirror/highlight")),nr=f(require("react")),ar=({langSupport:e,highlightTheme:t,code:o=""})=>{let s=e.language.parser.parse(o),r=0,n=[],a=(c,p)=>{if(c>r){let d=o.slice(r,c);n.push(p?(0,nr.createElement)("span",{children:d,className:p,key:`${c}${r}`}):d),r=c}};return(0,rr.highlightTree)(s,t.match,(c,p,d)=>{a(c,""),a(p,d)}),r<o.length&&n.push(`
- 
- `),n};var Be=L.forwardRef(({code:e,filePath:t,fileType:o,onCodeUpdate:s,showLineNumbers:r=!1,showInlineErrors:n=!1,wrapContent:a=!1,editorState:c="pristine",readOnly:p=!1,showReadOnly:d=!0,decorators:h,initMode:y="lazy",id:S,extensions:v=[],extensionsKeymap:g=[],additionalLanguages:k=[]},$)=>{let w=L.useRef(null),X=Ut(w,$),A=L.useRef(),{theme:ae,themeId:W}=Oe(),[Q,G]=L.useState(e),[q,C]=L.useState(y==="immediate"),O=(0,ir.useClasser)(b),{listen:be}=T(),x=L.useRef([]),R=L.useRef([]),{isIntersecting:z}=(0,mr.default)(w,{rootMargin:"600px 0px",threshold:.2});L.useImperativeHandle($,()=>({getCodemirror:()=>A.current})),L.useEffect(()=>{(y==="lazy"||y==="user-visible")&&z&&C(!0)},[y,z]);let D=Qs(t,o,k),V=er(D,k),le=Ks(ae),et=ar({langSupport:V,highlightTheme:le,code:e}),je=L.useMemo(()=>h&&h.sort((_,Z)=>_.line-Z.line),[h]);L.useEffect(()=>{if(!w.current||!q)return;let _=setTimeout(function(){let ee=[{key:"Tab",run:ie=>{var Ce;(0,Ne.indentMore)(ie);let pe=g.find(({key:Ae})=>Ae==="Tab");return(Ce=pe==null?void 0:pe.run(ie))!=null?Ce:!0}},{key:"Shift-Tab",run:({state:ie,dispatch:pe})=>{var Ae;(0,Ne.indentLess)({state:ie,dispatch:pe});let Ce=g.find(({key:Nt})=>Nt==="Shift-Tab");return(Ae=Ce==null?void 0:Ce.run(ye))!=null?Ae:!0}},{key:"Escape",run:()=>(p||w.current&&w.current.focus(),!0)},{key:"mod-Backspace",run:Ne.deleteGroupBackward}],j=[(0,fe.highlightSpecialChars)(),(0,Wt.history)(),(0,Xt.closeBrackets)(),...v,fe.keymap.of([...Xt.closeBracketsKeymap,...Ne.defaultKeymap,...Wt.historyKeymap,...cr.commentKeymap,...ee,...g]),V,pr.defaultHighlightStyle.fallback,Js(),le];p?(j.push($e.EditorState.readOnly.of(!0)),j.push(fe.EditorView.editable.of(!1))):(j.push((0,dr.bracketMatching)()),j.push((0,fe.highlightActiveLine)())),je&&j.push(tr(je)),a&&j.push(fe.EditorView.lineWrapping),r&&j.push((0,lr.lineNumbers)()),n&&j.push(or());let Ue=$e.EditorState.create({doc:e,extensions:j}),ze=w.current,ot=ze.querySelector(".sp-pre-placeholder");ot&&ze.removeChild(ot);let ye=new fe.EditorView({state:Ue,parent:ze,dispatch:ie=>{if(ye.update([ie]),ie.docChanged){let pe=ie.newDoc.sliceString(0,ie.newDoc.length);G(pe),s==null||s(pe)}}});ye.contentDOM.setAttribute("data-gramm","false"),ye.contentDOM.setAttribute("aria-label",t?`Code Editor for ${Xe(t)}`:"Code Editor"),p?ye.contentDOM.classList.add("cm-readonly"):ye.contentDOM.setAttribute("tabIndex","-1"),A.current=ye},0);return()=>{var Z;(Z=A.current)==null||Z.destroy(),clearTimeout(_)}},[q,r,a,W,je,p]),L.useEffect(function(){let Z=A.current,ee=!wo(v,x.current)||!wo(g,R.current);Z&&ee&&(Z.dispatch({effects:$e.StateEffect.appendConfig.of(v)}),Z.dispatch({effects:$e.StateEffect.appendConfig.of(fe.keymap.of([...g]))}),x.current=v,R.current=g)},[v,g]),L.useEffect(()=>{A.current&&c==="dirty"&&window.matchMedia("(min-width: 768px)").matches&&A.current.contentDOM.focus()},[]),L.useEffect(()=>{if(A.current&&e!==Q){let _=A.current,Z=_.state.selection.ranges.some(({to:j,from:Ue})=>j>e.length||Ue>e.length)?$e.EditorSelection.cursor(e.length):_.state.selection,ee={from:0,to:_.state.doc.length,insert:e};_.dispatch({changes:ee,selection:Z})}},[e]),L.useEffect(function(){if(!n)return;let Z=be(ee=>{let j=A.current;ee.type==="success"?j==null||j.dispatch({annotations:[new Io.Annotation("remove-errors",!0)]}):ee.type==="action"&&ee.action==="show-error"&&ee.line&&(j==null||j.dispatch({annotations:[new Io.Annotation("show-error",ee.line)]}))});return()=>Z()},[be,n]);let Tt=_=>{_.key==="Enter"&&A.current&&(_.preventDefault(),A.current.contentDOM.focus())},tt=()=>{let _=4;return r&&(_+=6),p||(_+=1),`var(--${b}-space-${_})`};return p?L.createElement(L.Fragment,null,L.createElement("pre",{ref:X,className:l(O("cm",c,D),Po,Ao),translate:"no"},L.createElement("code",{className:l(O("pre-placeholder"),zt),style:{marginLeft:tt()}},et)),p&&d&&L.createElement("span",u({className:l(O("read-only"),sr)},{}),"Read-only")):L.createElement("div",{ref:X,"aria-autocomplete":"list","aria-label":t?`Code Editor for ${Xe(t)}`:"Code Editor","aria-multiline":"true",className:l(O("cm",c,D),Po,Ao),onKeyDown:Tt,role:"textbox",tabIndex:0,translate:"no",suppressHydrationWarning:!0},L.createElement("pre",{className:l(O("pre-placeholder"),zt),style:{marginLeft:tt()}},et))});var Oo=Me.forwardRef(({style:e,showTabs:t,showLineNumbers:o=!1,showInlineErrors:s=!1,showRunButton:r=!0,wrapContent:n=!1,closableTabs:a=!1,initMode:c,extensions:p,extensionsKeymap:d,id:h,readOnly:y,showReadOnly:S,additionalLanguages:v},g)=>{let{sandpack:k}=T(),{code:$,updateCode:w,readOnly:X}=ut(),{activeFile:A,status:ae,editorState:W}=k,Q=t!=null?t:k.visibleFiles.length>1,G=(0,ur.useClasser)(b),q=C=>{w(C)};return Me.createElement(ne,{className:G("editor"),style:e},Q&&Me.createElement(ht,{closableTabs:a}),Me.createElement("div",{className:l(G("code-editor"),Vt)},Me.createElement(Be,{key:A,ref:g,additionalLanguages:v,code:$,editorState:W,extensions:p,extensionsKeymap:d,filePath:A,id:h,initMode:c||k.initMode,onCodeUpdate:q,readOnly:y||X,showInlineErrors:s,showLineNumbers:o,showReadOnly:S,wrapContent:n}),r&&ae==="idle"?Me.createElement(gt,null):null))});var fr=f(require("@code-hike/classer")),Le=f(require("react"));var Do=Le.forwardRef((p,c)=>{var d=p,{showTabs:e,showLineNumbers:t,decorators:o,code:s,initMode:r,wrapContent:n}=d,a=N(d,["showTabs","showLineNumbers","decorators","code","initMode","wrapContent"]);let{sandpack:h}=T(),{code:y}=ut(),S=(0,fr.useClasser)(b),v=e!=null?e:h.visibleFiles.length>1;return Le.createElement(ne,u({},a),v?Le.createElement(ht,null):null,Le.createElement("div",{className:l(S("code-editor"),Vt)},Le.createElement(Be,{ref:c,code:s!=null?s:y,decorators:o,filePath:h.activeFile,initMode:r||h.initMode,showLineNumbers:t,showReadOnly:!1,wrapContent:n,readOnly:!0})),h.status==="idle"?Le.createElement(gt,null):null)});var Ho=f(require("react"));var Yt=f(require("react"));var qe=f(require("react"));var hr=f(require("@code-hike/classer")),Je=f(require("react"));var Tn=m({borderRadius:"0",width:"100%",padding:0,marginBottom:"$space$2",span:{textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"},svg:{marginRight:"$space$1"}}),Gt=({selectFile:e,path:t,active:o,onClick:s,depth:r,isDirOpen:n})=>{let a=(0,hr.useClasser)(b),c=h=>{e&&e(t),s==null||s(h)},p=t.split("/").filter(Boolean).pop(),d=()=>e?Je.createElement(xo,null):n?Je.createElement(ko,null):Je.createElement(Co,null);return Je.createElement("button",{className:l(a("button","explorer"),F,Tn),"data-active":o,onClick:c,style:{paddingLeft:18*r+"px"},title:p,type:"button"},d(),Je.createElement("span",null,p))};var gr=({prefixedPath:e,files:t,selectFile:o,activeFile:s,depth:r,autoHiddenFiles:n,visibleFiles:a})=>{let[c,p]=qe.useState(!0);return qe.createElement("div",{key:e},qe.createElement(Gt,{depth:r,isDirOpen:c,onClick:()=>p(h=>!h),path:e+"/"}),c&&qe.createElement(Zt,{activeFile:s,autoHiddenFiles:n,depth:r+1,files:t,prefixedPath:e,selectFile:o,visibleFiles:a}))};var br=({autoHiddenFiles:e,visibleFiles:t,files:o,prefixedPath:s})=>{let r=t.length>0,n=e&&!r,a=e&&!!r,c=Object.keys(o).filter(h=>{var S;let y=h.startsWith(s);return a?y&&t.includes(h):n?y&&!((S=o[h])==null?void 0:S.hidden):y}).map(h=>h.substring(s.length)),p=new Set(c.filter(h=>h.includes("/")).map(h=>`${s}${h.split("/")[0]}/`)),d=c.filter(h=>!h.includes("/")).map(h=>`${s}${h}`);return{directories:Array.from(p),modules:d}};var Zt=({depth:e=0,activeFile:t,selectFile:o,prefixedPath:s,files:r,autoHiddenFiles:n,visibleFiles:a})=>{let{directories:c,modules:p}=br({visibleFiles:a,autoHiddenFiles:n,prefixedPath:s,files:r});return Yt.createElement("div",null,c.map(d=>Yt.createElement(gr,{key:d,activeFile:t,autoHiddenFiles:n,depth:e,files:r,prefixedPath:d,selectFile:o,visibleFiles:a})),p.map(d=>Yt.createElement(Gt,{key:d,active:t===d,depth:e,path:d,selectFile:o})))};var Nn=m({padding:"$space$3",overflow:"auto",height:"100%"}),$n=s=>{var r=s,{className:e,autoHiddenFiles:t=!1}=r,o=N(r,["className","autoHiddenFiles"]);let{sandpack:n}=T();return Ho.createElement("div",u({className:l(Te,Nn,`${b}-file-explorer`,e)},o),Ho.createElement(Zt,{activeFile:n.activeFile,autoHiddenFiles:t,files:n.files,prefixedPath:"/",selectFile:n.openFile,visibleFiles:n.visibleFilesFromProps}))};var Sr=f(require("@code-hike/classer")),Y=f(require("react"));var yr=e=>{let t=e.match(/(https?:\/\/.*?)\//);return t&&t[1]?[t[1],e.replace(t[1],"")]:[e,"/"]};var Mn=m({display:"flex",alignItems:"center",height:"$layout$headerHeight",borderBottom:"1px solid $colors$surface2",padding:"$space$3 $space$2",background:"$colors$surface1"}),Ln=m({backgroundColor:"$colors$surface2",color:"$colors$clickable",padding:"$space$1 $space$3",borderRadius:"99999px",border:"1px solid $colors$surface2",height:"24px",lineHeight:"24px",fontSize:"inherit",outline:"none",flex:1,marginLeft:"$space$4",width:"0",transition:"background $transitions$default","&:hover":{backgroundColor:"$colors$surface3"},"&:focus":{backgroundColor:"$surface1",border:"1px solid $colors$accent",color:"$colors$base"}}),Bo=r=>{var n=r,{clientId:e,onURLChange:t,className:o}=n,s=N(n,["clientId","onURLChange","className"]);var q;let[a,c]=Y.useState(""),{sandpack:p,dispatch:d,listen:h}=T(),[y,S]=Y.useState((q=p.startRoute)!=null?q:"/"),[v,g]=Y.useState(!1),[k,$]=Y.useState(!1),w=(0,Sr.useClasser)(b);Y.useEffect(()=>{let C=h(O=>{if(O.type==="urlchange"){let{url:be,back:x,forward:R}=O,[z,D]=yr(be);c(z),S(D),g(x),$(R)}},e);return()=>C()},[]);let X=C=>{let O=C.target.value.startsWith("/")?C.target.value:`/${C.target.value}`;S(O)},A=C=>{C.code==="Enter"&&(C.preventDefault(),C.stopPropagation(),typeof t=="function"&&t(a+C.currentTarget.value))},ae=()=>{d({type:"refresh"})},W=()=>{d({type:"urlback"})},Q=()=>{d({type:"urlforward"})},G=l(w("button","icon"),F,Hs,m({minWidth:"$space$6",justifyContent:"center"}));return Y.createElement("div",u({className:l(w("navigator"),Mn,o)},s),Y.createElement("button",{"aria-label":"Go back one page",className:G,disabled:!v,onClick:W,type:"button"},Y.createElement(bo,null)),Y.createElement("button",{"aria-label":"Go forward one page",className:G,disabled:!k,onClick:Q,type:"button"},Y.createElement(yo,null)),Y.createElement("button",{"aria-label":"Refresh page",className:G,onClick:ae,type:"button"},Y.createElement(nt,null)),Y.createElement("input",{"aria-label":"Current Sandpack URL",className:l(w("input"),Ln),name:"Current Sandpack URL",onChange:X,onKeyDown:A,type:"text",value:y}))};var $r=f(require("@code-hike/classer")),U=f(require("react"));var vr=f(require("react"));var _o=()=>{var o;let{sandpack:e}=T(),{error:t}=e;return vr.useEffect(()=>{e.errorScreenRegisteredRef.current=!0},[]),(o=t==null?void 0:t.message)!=null?o:null};var yt=f(require("react"));var Jt=200,jo=(e,t)=>{let{sandpack:o,listen:s}=T(),[r,n]=yt.useState("LOADING");return yt.useEffect(()=>{o.loadingScreenRegisteredRef.current=!0;let a=s(c=>{c.type==="start"&&c.firstLoad===!0&&n("LOADING"),c.type==="done"&&n(p=>p==="LOADING"?"PRE_FADING":"HIDDEN")},e);return()=>{a()}},[e,o.status==="idle"]),yt.useEffect(()=>{let a;return r==="PRE_FADING"&&!t?n("FADING"):r==="FADING"&&(a=setTimeout(()=>n("HIDDEN"),Jt)),()=>{clearTimeout(a)}},[r,t]),o.status==="timeout"?"TIMEOUT":o.status!=="running"?"HIDDEN":r};var Uo=e=>{let{dispatch:t}=T();return{refresh:()=>t({type:"refresh"},e),back:()=>t({type:"urlback"},e),forward:()=>t({type:"urlforward"},e)}};function wn(e){var r,n;let{activeFile:t,bundlerState:o}=e;if(o==null)return null;let s=o.transpiledModules[t+":"];return(n=(r=s==null?void 0:s.source)==null?void 0:r.compiledCode)!=null?n:null}var zo=()=>{let{sandpack:e}=T();return e.status!=="running"?null:wn(e)};var St=f(require("react"));var vt=()=>{let{sandpack:e,listen:t,dispatch:o}=T(),s=St.useRef(null),r=St.useRef(it());return St.useEffect(()=>{let a=s.current,c=r.current;return a!==null&&e.registerBundler(a,c),()=>e.unregisterBundler(c)},[]),{sandpack:e,getClient:()=>e.clients[r.current]||null,clientId:r.current,iframe:s,listen:a=>t(a,r.current),dispatch:a=>o(a,r.current)}};var kr=f(require("@code-hike/classer")),Vo=f(require("react"));var kt=s=>{var r=s,{children:e,className:t}=r,o=N(r,["children","className"]);let n=_o(),a=(0,kr.useClasser)(b);return!n&&!e?null:Vo.createElement("div",u({className:l(a("overlay","error"),ft,jt,t),translate:"no"},o),Vo.createElement("div",{className:l(a("error-message"),Ze)},n||e))};var Tr=f(require("@code-hike/classer")),_e=f(require("react"));var Er=f(require("@code-hike/classer")),he=f(require("react"));var Rr=f(require("@code-hike/classer")),Xo=f(require("react"));var Cr=f(require("lz-string")),ce=f(require("react"));var Fn=e=>Cr.default.compressToBase64(JSON.stringify(e)).replace(/\+/g,"-").replace(/\//g,"_").replace(/=+$/,""),xr="https://codesandbox.io/api/v1/sandboxes/define",An=(e,t)=>{let o=Object.keys(e).reduce((s,r)=>{let n=r.replace("/",""),a={content:e[r].code,isBinary:!1};return M(u({},s),{[n]:a})},{});return Fn(u({files:o},t?{template:t}:null))},qt=o=>{var s=o,{children:e}=s,t=N(s,["children"]);var p,d,h;let{sandpack:r}=T(),n=ce.useRef(null),[a,c]=ce.useState();return ce.useEffect(function(){let S=setTimeout(()=>{let v=An(r.files,r.environment),g=new URLSearchParams({parameters:v,query:new URLSearchParams({file:r.activeFile,utm_medium:"sandpack"}).toString()});c(g)},600);return()=>{clearTimeout(S)}},[r.activeFile,r.environment,r.files]),ce.useEffect(function(){r.openInCSBRegisteredRef.current=!0},[]),((h=(d=(p=a==null?void 0:a.get)==null?void 0:p.call(a,"parameters"))==null?void 0:d.length)!=null?h:0)>1500?ce.createElement("button",u({onClick:()=>{var y;return(y=n.current)==null?void 0:y.submit()},title:"Open in CodeSandbox"},t),ce.createElement("form",{ref:n,action:xr,method:"POST",style:{visibility:"hidden"},target:"_blank"},Array.from(a,([y,S])=>ce.createElement("input",{key:y,name:y,type:"hidden",value:S}))),e):ce.createElement("a",u({href:`${xr}?${a==null?void 0:a.toString()}`,rel:"noreferrer noopener",target:"_blank",title:"Open in CodeSandbox"},t),e)};var Ke=()=>{let e=(0,Rr.useClasser)(b);return Xo.createElement(qt,{className:l(e("button","icon-standalone"),F,me,te)},Xo.createElement(vo,null))};var Wo=m({transform:"translate(-4px, 9px) scale(0.13, 0.13)","*":{position:"absolute",width:"96px",height:"96px"}}),Pn=m({position:"absolute",right:"$space$2",bottom:"$space$2",zIndex:"$top",width:"32px",height:"32px",borderRadius:"$border$radius",[`.${Wo}`]:{display:"flex"},[`.${F}`]:{display:"none"},[`&:hover .${F}`]:{display:"flex"},[`&:hover .${Wo}`]:{display:"none"}}),In=Mt({"0%":{transform:"rotateX(-25.5deg) rotateY(45deg)"},"100%":{transform:"rotateX(-25.5deg) rotateY(405deg)"}}),On=m({animation:`${In} 1s linear infinite`,animationFillMode:"forwards",transformStyle:"preserve-3d",transform:"rotateX(-25.5deg) rotateY(45deg)","*":{border:"10px solid $colors$clickable",borderRadius:"8px",background:"$colors$surface1"},".top":{transform:"rotateX(90deg) translateZ(44px)",transformOrigin:"50% 50%"},".bottom":{transform:"rotateX(-90deg) translateZ(44px)",transformOrigin:"50% 50%"},".front":{transform:"rotateY(0deg) translateZ(44px)",transformOrigin:"50% 50%"},".back":{transform:"rotateY(-180deg) translateZ(44px)",transformOrigin:"50% 50%"},".left":{transform:"rotateY(-90deg) translateZ(44px)",transformOrigin:"50% 50%"},".right":{transform:"rotateY(90deg) translateZ(44px)",transformOrigin:"50% 50%"}}),Kt=s=>{var r=s,{className:e,showOpenInCodeSandbox:t}=r,o=N(r,["className","showOpenInCodeSandbox"]);let n=(0,Er.useClasser)(b);return he.createElement("div",u({className:l(n("cube-wrapper"),Pn,e),title:"Open in CodeSandbox"},o),t&&he.createElement(Ke,null),he.createElement("div",{className:l(n("cube"),Wo)},he.createElement("div",{className:l(n("sides"),On)},he.createElement("div",{className:"top"}),he.createElement("div",{className:"right"}),he.createElement("div",{className:"bottom"}),he.createElement("div",{className:"left"}),he.createElement("div",{className:"front"}),he.createElement("div",{className:"back"}))))};var Dn=m({backgroundColor:"$colors$surface1"}),Ct=a=>{var c=a,{clientId:e,loading:t,className:o,style:s,showOpenInCodeSandbox:r}=c,n=N(c,["clientId","loading","className","style","showOpenInCodeSandbox"]);let p=jo(e,t),d=(0,Tr.useClasser)(b);if(p==="HIDDEN")return null;if(p==="TIMEOUT")return _e.createElement("div",u({className:l(d("overlay","error"),ft,jt,o)},n),_e.createElement("div",{className:l(d("error-message"),Ze)},"Unable to establish connection with the sandpack bundler. Make sure you are online or try again later. If the problem persists, please report it via"," ",_e.createElement("a",{className:l(d("error-message"),Ze),href:"mailto:hello@codesandbox.io?subject=Sandpack Timeout Error"},"email")," ","or submit an issue on"," ",_e.createElement("a",{className:l(d("error-message"),Ze),href:"https://github.com/codesandbox/sandpack/issues",rel:"noreferrer noopener",target:"_blank"},"GitHub.")));let h=p==="LOADING"||p==="PRE_FADING";return _e.createElement("div",u({className:l(d("overlay","loading"),ft,Dn,o),style:M(u({},s),{opacity:h?1:0,transition:`opacity ${Jt}ms ease-out`})},n),_e.createElement(Kt,{showOpenInCodeSandbox:r}))};var Nr=f(require("@code-hike/classer")),Go=f(require("react"));var Zo=({clientId:e})=>{let{refresh:t}=Uo(e),o=(0,Nr.useClasser)(b);return Go.createElement("button",{className:l(o("button","icon-standalone"),F,me,te),onClick:t,title:"Refresh Sandpack",type:"button"},Go.createElement(nt,null))};var Hn=m({flex:1,display:"flex",flexDirection:"column",background:"white",overflow:"auto",position:"relative"}),Bn=m({border:"0",outline:"0",width:"100%",height:"100%",minHeight:"160px",maxHeight:"2000px",flex:1}),_n=m({display:"flex",position:"absolute",bottom:"$space$2",right:"$space$2",zIndex:"$overlay","> *":{marginLeft:"$space$2"}}),Yo=U.forwardRef((d,p)=>{var h=d,{showNavigator:e=!1,showRefreshButton:t=!0,showOpenInCodeSandbox:o=!0,showSandpackErrorOverlay:s=!0,actionsChildren:r=U.createElement(U.Fragment,null),children:n,className:a}=h,c=N(h,["showNavigator","showRefreshButton","showOpenInCodeSandbox","showSandpackErrorOverlay","actionsChildren","children","className"]);let{sandpack:y,listen:S,iframe:v,getClient:g,clientId:k}=vt(),[$,w]=U.useState(null),{status:X,errorScreenRegisteredRef:A,openInCSBRegisteredRef:ae,loadingScreenRegisteredRef:W}=y,Q=(0,$r.useClasser)(b);ae.current=!0,A.current=!0,W.current=!0,U.useEffect(()=>S(C=>{C.type==="resize"&&w(C.height)}),[]),U.useImperativeHandle(p,()=>({clientId:k,getClient:g}),[g,k]);let G=q=>{!v.current||(v.current.src=q)};return U.createElement(ne,u({className:l(`${b}-preview`,a)},c),e&&U.createElement(Bo,{clientId:k,onURLChange:G}),U.createElement("div",{className:l(Q("preview-container"),Hn)},U.createElement("iframe",{ref:v,className:l(Q("preview-iframe"),Bn),style:{height:$||void 0},title:"Sandpack Preview"}),s&&U.createElement(kt,null),U.createElement("div",{className:l(Q("preview-actions"),_n)},r,!e&&t&&X==="running"&&U.createElement(Zo,{clientId:k}),o&&U.createElement(Ke,null)),U.createElement(Ct,{clientId:k,showOpenInCodeSandbox:o}),n))});var Mr=f(require("@code-hike/classer")),Se=f(require("react"));var jn=m({display:"flex",flexDirection:"column",width:"100%",position:"relative",overflow:"auto",minHeight:"160px",flex:1}),Un=o=>{var s=o,{className:e}=s,t=N(s,["className"]);let{sandpack:r}=T(),n=zo(),a=(0,Mr.useClasser)(b),c=Se.useRef(null);return Se.useEffect(()=>{let p=c.current;return p&&r.registerBundler(p,"hidden"),()=>{r.unregisterBundler("hidden")}},[]),Se.createElement("div",u({className:l(a("transpiled-code"),Te,jn,e)},t),Se.createElement(Do,u({code:n!=null?n:"",initMode:r.initMode},t)),Se.createElement("iframe",{ref:c,style:{display:"none"},title:"transpiled sandpack code"}),Se.createElement(kt,null),Se.createElement(Ct,{clientId:"hidden",showOpenInCodeSandbox:!1}))};var Lr=f(require("@code-hike/classer")),ge=f(require("react"));var zn=m({height:"$layout$height",width:"100%"}),Vn=r=>{var n=r,{clientId:e,theme:t,className:o}=n,s=N(n,["clientId","theme","className"]);let{listen:a,sandpack:c}=T(),{themeMode:p}=Oe(),d=(0,Lr.useClasser)(b),h=ge.useRef(),[y,S]=ge.useState(null);return ge.useEffect(()=>{import("react-devtools-inline/frontend").then(v=>{h.current=v})},[]),ge.useEffect(()=>a(g=>{var k;if(g.type==="activate-react-devtools"){let $=e?c.clients[e]:Object.values(c.clients)[0],w=(k=$==null?void 0:$.iframe)==null?void 0:k.contentWindow;h.current&&w&&S(h.current.initialize(w))}}),[h,e,a,c.clients]),ge.useEffect(()=>{c.registerReactDevTools("legacy")},[]),y?ge.createElement("div",u({className:l(d("devtools"),zn,o)},s),ge.createElement(y,{browserTheme:t!=null?t:p})):null};var H=f(require("react"));var wr=f(require("@code-hike/classer")),Qt=f(require("react"));var Fr=m({border:"1px solid $colors$surface2",display:"flex",flexWrap:"wrap",alignItems:"stretch",borderRadius:"$border$radius",overflow:"hidden",position:"relative",backgroundColor:"$colors$surface2",gap:1,[`> .${Te}`]:{flexGrow:1,flexShrink:1,flexBasis:"0",minWidth:"350px",height:"$layout$height","@media print":{height:"auto",display:"block"},"@media screen and (max-width: 768px)":{height:"auto",minWidth:"100% !important;"}},[`> .${b}-file-explorer`]:{flex:.2,minWidth:200}}),Jo=Qt.forwardRef((r,s)=>{var n=r,{children:e,className:t}=n,o=N(n,["children","className"]);let{sandpack:a}=T(),c=(0,wr.useClasser)(b),p=Ut(a.lazyAnchorRef,s);return Qt.createElement("div",u({ref:p,className:l(c("layout"),Fr,t)},o),e)});var Re=f(require("react"));var Xn=m({justifyContent:"space-between",borderBottom:"1px solid $colors$surface2",padding:"$space$3 $space$2",fontFamily:"$font$mono",maxHeight:"$layout$headerHeight",overflowX:"auto",whiteSpace:"nowrap"}),qo=m({display:"flex",flexDirection:"row",alignItems:"center",gap:"$space$2"}),Ar=({status:e,suiteOnly:t,setSuiteOnly:o,setVerbose:s,verbose:r,watchMode:n,setWatchMode:a,showSuitesOnly:c})=>{let p=l(F,te,m({padding:"$space$1 $space$3"}));return Re.createElement("div",{className:l(Xn,qo)},Re.createElement("div",{className:l(qo)},Re.createElement("p",{className:l(m({lineHeight:1,margin:0,color:"$colors$base",fontSize:"$font$size",display:"flex",alignItems:"center",gap:"$space$2"}))},Re.createElement(Pe,null),"Tests")),Re.createElement("div",{className:l(qo)},c&&Re.createElement("button",{className:p,"data-active":t,disabled:e==="initialising",onClick:o},"Suite only"),Re.createElement("button",{className:p,"data-active":r,disabled:e==="initialising",onClick:s},"Verbose"),Re.createElement("button",{className:p,"data-active":n,disabled:e==="initialising",onClick:a},"Watch")))};var Pr=f(require("@code-hike/classer")),Ko=f(require("react"));var Ir=({onClick:e})=>{let t=(0,Pr.useClasser)(b);return Ko.createElement("button",{className:l(t("button","icon-standalone"),F,me,te),onClick:e,title:"Run tests",type:"button"},Ko.createElement(rt,null))};var I=f(require("react"));var Fe=f(require("react"));var we=f(require("react"));var Or=e=>({"--test-pass":e?"#18df16":"#15c213","--test-fail":e?"#df162b":"#c21325","--test-skip":e?"#eace2b":"#c2a813","--test-run":e?"#eace2b":"#c2a813","--test-title":e?"#3fbabe":"#256c6f"}),eo=m({variants:{status:{pass:{color:"var(--test-pass)"},fail:{color:"var(--test-fail)"},skip:{color:"var(--test-skip)"},title:{color:"var(--test-title)"}}}}),ve=eo({status:"pass"}),J=eo({status:"fail"}),to=eo({status:"skip"}),Dr=eo({status:"title"}),Qo=m({variants:{status:{pass:{background:"var(--test-pass)",color:"$colors$surface1"},fail:{background:"var(--test-fail)",color:"$colors$surface1"},run:{background:"var(--test-run)",color:"$colors$surface1"}}}}),Hr=Qo({status:"run"}),Br=Qo({status:"pass"}),es=Qo({status:"fail"});var Wn=m({marginLeft:"$space$4"}),Gn=m({marginBottom:"$space$2",color:"$colors$clickable"}),Zn=m({marginBottom:"$space$2",color:"$colors$hover"}),Yn=m({marginLeft:"$space$2"}),ts=m({marginRight:"$space$2"}),oo=({tests:e,style:t})=>we.default.createElement("div",{className:l(Wn)},e.map(o=>we.default.createElement("div",{key:o.name,className:l(Gn)},o.status==="pass"&&we.default.createElement("span",{className:l(ve,ts)},"\u2713"),o.status==="fail"&&we.default.createElement("span",{className:l(J,ts)},"\u2715"),o.status==="idle"&&we.default.createElement("span",{className:l(to,ts)},"\u25CB"),we.default.createElement("span",{className:l(Zn)},o.name),o.duration!==void 0&&we.default.createElement("span",{className:l(Yn)},"(",o.duration," ms)"))));var _r=f(require("clean-set")),jr=e=>so(e).filter(t=>t.status==="fail"),so=e=>Object.values(e.tests).concat(...Object.values(e.describes).map(so)),Ur=e=>e.map(ro).reduce((t,o)=>({pass:t.pass+o.pass,fail:t.fail+o.fail,skip:t.skip+o.skip,total:t.total+o.total}),{pass:0,skip:0,fail:0,total:0}),ro=e=>so(e).reduce((t,o)=>({pass:o.status==="pass"?t.pass+1:t.pass,fail:o.status==="fail"?t.fail+1:t.fail,skip:o.status==="idle"||o.status==="running"?t.skip+1:t.skip,total:t.total+1}),{pass:0,fail:0,skip:0,total:0}),zr=e=>e.filter(t=>Object.values(t.describes).length>0||Object.values(t.tests).length>0).map(ro).reduce((t,o)=>({pass:t.pass+(o.fail===0?1:0),fail:t.fail+(o.fail>0?1:0),total:t.total+1}),{pass:0,fail:0,total:0}),Vr=e=>Qe(e,so).reduce((t,o)=>t+(o.duration||0),0),no=e=>Object.values(e.describes).length===0&&Object.values(e.tests).length===0,xt=e=>{let t=e.length-1,o=e.slice(0,t),s=e[t];return[o,s]},Qe=(e,t)=>e.map(t).reduce((o,s)=>o.concat(s),[]),ke=(e,t)=>o=>(0,_r.default)(o,e,t);var Jn=m({color:"$colors$hover",marginBottom:"$space$2"}),qn=m({marginLeft:"$space$4"}),os=({describes:e})=>Fe.createElement(Fe.Fragment,null,e.map(t=>{if(no(t))return null;let o=Object.values(t.tests),s=Object.values(t.describes);return Fe.createElement("div",{key:t.name,className:l(qn)},Fe.createElement("div",{className:l(Jn)},t.name),Fe.createElement(oo,{tests:o}),Fe.createElement(os,{describes:s}))}));var Xr=f(require("react"));var Kn=m({color:"$colors$hover",fontSize:"$font$size",padding:"$space$2",whiteSpace:"pre-wrap"}),ss=({error:e,path:t})=>Xr.createElement("div",{className:l(Kn),dangerouslySetInnerHTML:{__html:Qn(e,t)}}),ao=e=>e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;"),Qn=(e,t)=>{let o="";if(e.matcherResult?o=`<span>${ao(e.message).replace(/(expected)/m,`<span class="${ve}">$1</span>`).replace(/(received)/m,`<span class="${J}">$1</span>`).replace(/(Difference:)/m,"<span>$1</span>").replace(/(Expected:)(.*)/m,`<span>$1</span><span class="${ve}">$2</span>`).replace(/(Received:)(.*)/m,`<span>$1</span><span class="${J}">$2</span>`).replace(/^(-.*)/gm,`<span class="${J}">$1</span>`).replace(/^(\+.*)/gm,`<span class="${ve}">$1</span>`)}</span>`:o=ao(e.message),e.mappedErrors&&e.mappedErrors[0]&&e.mappedErrors[0].fileName.endsWith(t)&&e.mappedErrors[0]._originalScriptCode){let r=e.mappedErrors[0]._originalScriptCode||[],n=Math.max(...r.map(c=>(c.lineNumber+"").length))+2,a=Array.from({length:n}).map(()=>" ");o+="<br />",o+="<br />",o+="<div>",r.filter(c=>c.content.trim()).forEach(c=>{let p=(c.lineNumber+"").length,d=[...a];d.length-=p,c.highlight&&(d.length-=2);let h=c.content.indexOf(".to"),y=Array.from({length:a.length+h-(n-1)},()=>" "),S=ao(c.content).replace(/(describe|test|it)(\()(&#039;|&quot;|`)(.*)(&#039;|&quot;|`)/m,`<span>$1$2$3</span><span class="${Dr}">$4</span><span>$5</span>`).replace(/(expect\()(.*)(\)\..*)(to[\w\d]*)(\()(.*)(\))/m,`<span>$1</span><span class="${J}">$2</span><span>$3</span><span style="text-decoration: underline; font-weight: 900">$4</span><span>$5</span><span class="${ve}">$6</span><span>$7</span>`);o+=`<div ${c.highlight?'style="font-weight:200;"':""}>`+(c.highlight?`<span class="${J}">></span> `:"")+d.join("")+ao(""+c.lineNumber)+" | "+S+"</div>"+(c.highlight?"<div>"+a.join("")+" | "+y.join("")+`<span class="${J}">^</span></div>`:"")}),o+="</div>"}return o.replace(/(?:\r\n|\r|\n)/g,"<br />")};var ea=m({display:"flex",flexDirection:"row",alignItems:"center",marginBottom:"$space$2"}),rs=m({marginBottom:"$space$2"}),ta=m({fontWeight:"bold"}),io=m({borderRadius:"calc($border$radius / 2)"}),oa=m({padding:"$space$1 $space$2",fontFamily:"$font$mono",textTransform:"uppercase",marginRight:"$space$2"}),sa=m({fontFamily:"$font$mono",cursor:"pointer",display:"inline-block"}),ra=m({color:"$colors$clickable",textDecorationStyle:"dotted",textDecorationLine:"underline"}),na=m({color:"$colors$hover",fontWeight:"bold",textDecorationStyle:"dotted",textDecorationLine:"underline"}),Wr=({specs:e,openSpec:t,status:o,verbose:s})=>I.createElement(I.Fragment,null,e.map(r=>{if(r.error)return I.createElement("div",{key:r.name,className:l(rs)},I.createElement(co,{className:l(io,es)},"Error"),I.createElement(Gr,{onClick:()=>t(r.name),path:r.name}),I.createElement(ss,{error:r.error,path:r.name}));if(no(r))return null;let n=Object.values(r.tests),a=Object.values(r.describes),c=ro(r);return I.createElement("div",{key:r.name,className:l(rs)},I.createElement("div",{className:l(ea)},o==="complete"?c.fail>0?I.createElement(co,{className:l(io,es)},"Fail"):I.createElement(co,{className:l(io,Br)},"Pass"):I.createElement(co,{className:l(io,Hr)},"Run"),I.createElement(Gr,{onClick:()=>t(r.name),path:r.name})),s&&I.createElement(oo,{tests:n}),s&&I.createElement(os,{describes:a}),jr(r).map(p=>I.createElement("div",{key:`failing-${p.name}`,className:l(rs)},I.createElement("div",{className:l(ta,J)},"\u25CF ",p.blocks.join(" \u203A ")," \u203A ",p.name),p.errors.map(d=>I.createElement(ss,{key:`failing-${p.name}-error`,error:d,path:p.path})))))})),co=({children:e,className:t})=>I.createElement("span",{className:l(oa,t)},e),Gr=({onClick:e,path:t})=>{let o=t.split("/"),s=o.slice(0,o.length-1).join("/")+"/",r=o[o.length-1];return I.createElement("button",{className:l(F,sa),onClick:e},I.createElement("span",{className:l(ra)},s),I.createElement("span",{className:l(na)},r))};var oe=f(require("react"));var Zr=m({marginBottom:"$space$2"}),ns=m({fontWeight:"bold",color:"$colors$hover",whiteSpace:"pre-wrap"}),aa=m({fontWeight:"bold",color:"$colors$clickable"}),Yr=({suites:e,tests:t,duration:o})=>{let s="Test suites: ",r=n=>{let a=s.length-n.length,c=Array.from({length:a},()=>" ").join("");return n+c};return oe.createElement("div",{className:l(aa)},oe.createElement("div",{className:l(Zr)},oe.createElement("span",{className:l(ns)},s),e.fail>0&&oe.createElement("span",{className:l(J)},e.fail," failed,"," "),e.pass>0&&oe.createElement("span",{className:l(ve)},e.pass," passed,"," "),oe.createElement("span",null,e.total," total")),oe.createElement("div",{className:l(Zr)},oe.createElement("span",{className:l(ns)},r("Tests:")),t.fail>0&&oe.createElement("span",{className:l(J)},t.fail," failed,"," "),t.skip>0&&oe.createElement("span",{className:l(to)},t.skip," skipped,"," "),t.pass>0&&oe.createElement("span",{className:l(ve)},t.pass," passed,"," "),oe.createElement("span",null,t.total," total")),oe.createElement("div",{className:l(ns)},r("Time:"),o/1e3,"s"))};var ia=m({display:"flex",position:"absolute",bottom:"$space$2",right:"$space$2",zIndex:"$overlay","> *":{marginLeft:"$space$2"}}),ca={specs:{},status:"initialising",verbose:!1,watchMode:!0,suiteOnly:!1,specsCount:0},lo=c=>{var p=c,{verbose:e=!1,watchMode:t=!0,style:o,className:s,onComplete:r,actionsChildren:n}=p,a=N(p,["verbose","watchMode","style","className","onComplete","actionsChildren"]);let d=Oe(),{getClient:h,iframe:y,listen:S,sandpack:v}=vt(),[g,k]=H.useState(M(u({},ca),{verbose:e,watchMode:t}));H.useEffect(()=>{let C=[],O="";return S(x=>{if(!(g.suiteOnly&&("path"in x&&x.path!==v.activeFile||"test"in x&&"path"in x.test&&x.test.path!==v.activeFile))){if(x.type==="action"&&x.action==="clear-errors"&&x.source==="jest"){O=x.path;return}if(x.type==="test"){if(x.event==="initialize_tests")return C=[],O="",g.watchMode?$():k(R=>M(u({},R),{status:"idle",specs:{}}));if(x.event==="test_count")return k(R=>M(u({},R),{specsCount:x.count}));if(x.event==="total_test_start")return C=[],k(R=>M(u({},R),{status:"running"}));if(x.event==="total_test_end")return k(R=>(r!==void 0&&r(R.specs),M(u({},R),{status:"complete"})));if(x.event==="add_file")return k(ke(["specs",x.path],{describes:{},tests:{},name:x.path}));if(x.event==="remove_file")return k(R=>{let z=Object.entries(R.specs).reduce((D,[V,le])=>V===x.path?D:M(u({},D),{[V]:le}),{});return M(u({},R),{specs:z})});if(x.event==="file_error")return k(ke(["specs",x.path,"error"],x.error));if(x.event==="describe_start"){C.push(x.blockName);let[R,z]=xt(C),D=O;return z===void 0?void 0:k(ke(["specs",D,"describes",...Qe(R,V=>[V,"describes"]),z],{name:x.blockName,tests:{},describes:{}}))}if(x.event==="describe_end"){C.pop();return}if(x.event==="add_test"){let[R,z]=xt(C),D={status:"idle",errors:[],name:x.testName,blocks:[...C],path:x.path};return k(z===void 0?ke(["specs",x.path,"tests",x.testName],D):ke(["specs",x.path,"describes",...Qe(R,V=>[V,"describes"]),z,"tests",x.testName],D))}if(x.event==="test_start"){let{test:R}=x,[z,D]=xt(R.blocks),V={status:"running",name:R.name,blocks:R.blocks,path:R.path,errors:[]};return k(D===void 0?ke(["specs",R.path,"tests",R.name],V):ke(["specs",R.path,"describes",...Qe(z,le=>[le,"describes"]),D,"tests",R.name],V))}if(x.event==="test_end"){let{test:R}=x,[z,D]=xt(R.blocks),V={status:R.status,errors:R.errors,duration:R.duration,name:R.name,blocks:R.blocks,path:R.path};return k(D===void 0?ke(["specs",R.path,"tests",R.name],V):ke(["specs",R.path,"describes",...Qe(z,le=>[le,"describes"]),D,"tests",R.name],V))}}}})},[g.suiteOnly,g.watchMode,v.activeFile]);let $=()=>{k(O=>M(u({},O),{status:"running",specs:{}}));let C=h();C&&C.dispatch({type:"run-all-tests"})},w=()=>{k(O=>M(u({},O),{status:"running",specs:{}}));let C=h();C&&C.dispatch({type:"run-tests",path:v.activeFile})},X=/.*\.(test|spec)\.[tj]sx?$/,A=v.activeFile.match(X)!==null;H.useEffect(function(){return S(({type:be})=>{be==="done"&&g.watchMode&&(A?w():$())})},[w,$,g.watchMode,A]);let ae=C=>{v.setActiveFile(C)},W=Object.values(g.specs),Q=Vr(W),G=Ur(W),q=zr(W);return H.createElement(ne,u({className:l(`${b}-tests`,s),style:u(u({},Or(d.themeMode==="dark")),o)},a),H.createElement("iframe",{ref:y,style:{display:"none"},title:"Sandpack Tests"}),H.createElement(Ar,{setSuiteOnly:()=>k(C=>M(u({},C),{suiteOnly:!C.suiteOnly})),setVerbose:()=>k(C=>M(u({},C),{verbose:!C.verbose})),setWatchMode:()=>{k(C=>M(u({},C),{watchMode:!C.watchMode}))},showSuitesOnly:g.specsCount>1,status:g.status,suiteOnly:g.suiteOnly,verbose:g.verbose,watchMode:g.watchMode}),g.status==="running"||g.status==="initialising"?H.createElement(Kt,{showOpenInCodeSandbox:!1}):H.createElement("div",{className:ia.toString()},n,H.createElement(Ir,{onClick:g.suiteOnly?w:$})),H.createElement("div",{className:l(la)},W.length===0&&g.status==="complete"?H.createElement("div",{className:l(pa)},H.createElement("p",null,"No test files found."),H.createElement("p",null,"Test match:"," ",H.createElement("span",{className:l(J)},X.toString()))):H.createElement(H.Fragment,null,H.createElement(Wr,{openSpec:ae,specs:W,status:g.status,verbose:g.verbose}),g.status==="complete"&&G.total>0&&H.createElement(Yr,{duration:Q,suites:q,tests:G}))))},la=m({padding:"$space$4",height:"100%",overflow:"auto",display:"flex",flexDirection:"column",position:"relative",fontFamily:"$font$mono"}),pa=m({fontWeight:"bold",color:"$colors$base"});var se=f(require("react"));var Jr=f(require("@code-hike/classer")),as=f(require("react"));var qr=({onClick:e})=>{let t=(0,Jr.useClasser)("sp");return as.default.createElement("button",{className:l(t("button","icon-standalone"),F,me,te,m({position:"absolute",bottom:"$space$2",right:"$space$2"})),onClick:e},as.default.createElement(So,null))};var po=f(require("react"));var Kr=()=>po.default.createElement("div",{className:l(m({borderBottom:"1px solid $colors$surface2",padding:"$space$3 $space$2",height:"$layout$headerHeight"}))},po.default.createElement("p",{className:l(m({lineHeight:1,margin:0,color:"$colors$base",fontSize:"$font$size",display:"flex",alignItems:"center",gap:"$space$2"}))},po.default.createElement(Pe,null),"Console"));var uo=f(require("react"));var Qr=["SyntaxError: ","Error in sandbox:"],en={id:"random",method:"clear",data:["Console was cleared"]},is="@t",cs="@r",ls=1e4,ps=2,mo=400,ds=mo*2;var fo=e=>{var a,c;let[t,o]=uo.useState([]),{listen:s}=T(),r=(a=e==null?void 0:e.showSyntaxError)!=null?a:!1,n=(c=e==null?void 0:e.maxMessageCount)!=null?c:ds;return uo.useEffect(()=>s(d=>{if(d.type==="console"&&d.codesandbox){if(d.log.find(({method:y})=>y==="clear"))return o([en]);let h=r?d.log:d.log.filter(y=>y.data.filter(v=>typeof v!="string"?!0:Qr.filter(k=>v.startsWith(k)).length===0).length>0);if(!h)return;o(y=>{let S=[...y,...h].filter((v,g,k)=>g===k.findIndex($=>$.id===v.id));for(;S.length>ds;)S.shift();return S})}},e==null?void 0:e.clientId),[s,n,e,r]),{logs:t,reset:()=>o([])}};var ms=function(){return(0,eval)("this")}(),da=typeof ArrayBuffer=="function",ma=typeof Map=="function",ua=typeof Set=="function",Rt;(function(s){s[s.infinity=0]="infinity",s[s.minusInfinity=1]="minusInfinity",s[s.minusZero=2]="minusZero"})(Rt||(Rt={}));var tn={Arithmetic:e=>e===0?1/0:e===1?-1/0:e===2?-0:e,HTMLElement:e=>{let t=document.implementation.createHTMLDocument("sandbox");try{let o=t.createElement(e.tagName);o.innerHTML=e.innerHTML;for(let s of Object.keys(e.attributes))try{o.setAttribute(s,e.attributes[s])}catch(r){}return o}catch(o){return e}},Function:e=>{let t=()=>{};return Object.defineProperty(t,"toString",{value:()=>`function ${e.name}() {${e.body}}`}),t},"[[NaN]]":()=>NaN,"[[undefined]]":()=>{},"[[Date]]":e=>{let t=new Date;return t.setTime(e),t},"[[RegExp]]":e=>new RegExp(e.src,e.flags),"[[Error]]":e=>{let t=ms[e.name]||Error,o=new t(e.message);return o.stack=e.stack,o},"[[ArrayBuffer]]":e=>{if(da){let t=new ArrayBuffer(e.length);return new Int8Array(t).set(e),t}return e},"[[TypedArray]]":e=>typeof ms[e.ctorName]=="function"?new ms[e.ctorName](e.arr):e.arr,"[[Map]]":e=>{if(ma){let o=new Map;for(let s=0;s<e.length;s+=2)o.set(e[s],e[s+1]);return o}let t=[];for(let o=0;o<e.length;o+=2)t.push([e[i],e[i+1]]);return t},"[[Set]]":e=>{if(ua){let t=new Set;for(let o=0;o<e.length;o++)t.add(e[o]);return t}return e}};var on=e=>{if(typeof e=="string"||typeof e=="number"||e===null)return e;if(Array.isArray(e))return e.map(on);if(typeof e=="object"&&is in e){let t=e[is];return tn[t](e.data)}return e},fa=(e,t,o)=>`[${e.reduce((r,n,a)=>`${r}${a?", ":""}${Et(n,t,o)}`,"")}]`,ha=(e,t,o)=>{let s=e.constructor.name!=="Object"?`${e.constructor.name} `:"";if(o>ps)return s;let r=Object.entries(e),n=Object.entries(e).reduce((a,[c,p],d)=>{let h=d===0?"":", ",y=r.length>10?`
-   `:"",S=Et(p,t,o);return d===mo?a+y+"...":d>mo?a:a+`${h}${y}${c}: `+S},"");return`${s}{ ${n}${r.length>10?`
-diff --git a/node_modules/@codesandbox/sandpack-react/dist/esm/index.js b/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
-index 985904c..3513462 100644
---- a/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
-+++ b/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
-@@ -92,7 +92,7 @@ h1 {
-   <body>
-     <div id="root"></div>
-   </body>
--</html>`},"/package.json":{code:JSON.stringify({dependencies:{react:"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},main:"/index.js"})}},main:"/App.js",environment:"create-react-app"};var Ht={files:{"tsconfig.json":{code:`{
-+</html>`},"/package.json":{code:JSON.stringify({dependencies:{react:"^18.0.0","react-dom":"^18.0.0","react-scripts":"^5.0.0"},main:"/index.js"})}},main:"/App.js",environment:"create-react-app"};var Ht={files:{"tsconfig.json":{code:`{
-   "include": [
-     "./**/*"
-   ],
-@@ -140,7 +140,7 @@ h1 {
-   <body>
-     <div id="root"></div>
-   </body>
--</html>`},"/package.json":{code:JSON.stringify({dependencies:{react:"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},devDependencies:{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0",typescript:"^4.0.0"},main:"/index.tsx"})}},main:"/App.tsx",environment:"create-react-app"};var Bt={files:{"/App.tsx":{code:`import { Component } from "solid-js";
-+</html>`},"/package.json":{code:JSON.stringify({dependencies:{react:"^18.0.0","react-dom":"^18.0.0","react-scripts":"^5.0.0"},devDependencies:{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0",typescript:"^4.0.0"},main:"/index.tsx"})}},main:"/App.tsx",environment:"create-react-app"};var Bt={files:{"/App.tsx":{code:`import { Component } from "solid-js";
- 
- const App: Component = () => {
-   return <h1>Hello World</h1>;
-@@ -395,7 +395,7 @@ createApp(App).mount('#app')
-     <!-- built files will be auto injected -->
-   </body>
- </html>
--`},"/package.json":{code:JSON.stringify({dependencies:{"core-js":"^3.6.5",vue:"^3.0.0-0","@vue/cli-plugin-babel":"4.5.0"},main:"/src/main.js"})}},main:"/src/App.vue",environment:"vue-cli"};var Ie={react:Dt,"react-ts":Ht,vue:Vt,vanilla:Ut,"vanilla-ts":zt,vue3:Xt,angular:Ot,svelte:_t,solid:Bt,"test-ts":jt};var De=e=>{var a,p,d,u,f,b;let t=Oe(e.files),o=Sr({template:e.template,customSetup:e.customSetup,files:t}),s=Oe((p=(a=e.options)==null?void 0:a.visibleFiles)!=null?p:[]),r=((d=e.options)==null?void 0:d.activeFile)?Yo((u=e.options)==null?void 0:u.activeFile,t||{}):void 0;s.length===0&&t&&Object.keys(t).forEach(g=>{let y=t[g];if(typeof y=="string"){s.push(g);return}!r&&y.active&&(r=g,y.hidden===!0&&s.push(g)),y.hidden||s.push(g)}),s.length===0&&(s=[o.main]),o.files[o.entry]||(o.entry=Yo(o.entry,o.files)),!r&&o.main&&(r=o.main),(!r||!o.files[r])&&(r=s[0]),s.includes(r)||s.push(r);let n=yr(o.files,(f=o.dependencies)!=null?f:{},(b=o.devDependencies)!=null?b:{},o.entry);return{visibleFiles:s.filter(g=>n[g]),activeFile:r,files:n,environment:o.environment}},Yo=(e,t)=>{let o=Oe(t),s=Oe(e);if(s in o)return s;if(!e)return null;let r=null,n=0,c=[".js",".jsx",".ts",".tsx"];for(;!r&&n<c.length;){let p=`${s.split(".")[0]}${c[n]}`;o[p]!==void 0&&(r=p),n++}return r},Sr=({files:e,template:t,customSetup:o})=>{if(!t){if(!o)return Ie.vanilla;if(!e||Object.keys(e).length===0)throw new Error("[sandpack-react]: without a template, you must pass at least one file");return{...o,files:st(e)}}let s=Ie[t];if(!s)throw new Error(`[sandpack-react]: invalid template "${t}" provided`);return!o&&!e?s:{files:st({...s.files,...e}),dependencies:{...s.dependencies,...o==null?void 0:o.dependencies},devDependencies:{...s.devDependencies,...o==null?void 0:o.devDependencies},entry:Oe((o==null?void 0:o.entry)||s.entry),main:s.main,environment:(o==null?void 0:o.environment)||s.environment}},st=e=>e?Object.keys(e).reduce((t,o)=>(typeof e[o]=="string"?t[o]={code:e[o]}:t[o]=e[o],t),{}):{};var nt=Er(null),Rr=3e4,Jo=class extends Tr{constructor(t){super(t);this.timeoutHook=null;this.initializeSandpackIframeHook=null;this.handleMessage=t=>{this.timeoutHook&&clearTimeout(this.timeoutHook),t.type==="state"?this.setState({bundlerState:t.state}):t.type==="done"&&!t.compilatonError?this.setState({error:null}):t.type==="action"&&t.action==="show-error"?this.setState({error:Cr(t)}):t.type==="action"&&t.action==="notification"&&t.notificationType==="error"&&this.setState({error:{message:t.title}})};this.registerReactDevTools=t=>{this.setState({reactDevTools:t})};this.updateCurrentFile=t=>{this.updateFile(this.state.activeFile,t)};this.updateFile=(t,o)=>{var r;let s=this.state.files;if(typeof t=="string"&&o){if(o===((r=this.state.files[t])==null?void 0:r.code))return;s={...s,[t]:{code:o}}}else typeof t=="object"&&(s={...s,...st(t)});this.setState({files:xr(s)},this.updateClients)};this.updateClients=()=>{var n,c,a,p;let{files:t,sandpackStatus:o}=this.state,s=(c=(n=this.props.options)==null?void 0:n.recompileMode)!=null?c:"delayed",r=(p=(a=this.props.options)==null?void 0:a.recompileDelay)!=null?p:500;o==="running"&&(s==="immediate"&&Object.values(this.clients).forEach(d=>{d.updatePreview({files:t})}),s==="delayed"&&(window.clearTimeout(this.debounceHook),this.debounceHook=window.setTimeout(()=>{Object.values(this.clients).forEach(d=>{d.updatePreview({files:this.state.files})})},r)))};this.createClient=(t,o)=>{var n,c,a,p,d,u,f,b,g;let s=new kr(t,{files:this.state.files,template:this.state.environment},{externalResources:(n=this.props.options)==null?void 0:n.externalResources,bundlerURL:(c=this.props.options)==null?void 0:c.bundlerURL,startRoute:(a=this.props.options)==null?void 0:a.startRoute,fileResolver:(p=this.props.options)==null?void 0:p.fileResolver,skipEval:(u=(d=this.props.options)==null?void 0:d.skipEval)!=null?u:!1,logLevel:(f=this.props.options)==null?void 0:f.logLevel,showOpenInCodeSandbox:!this.openInCSBRegistered.current,showErrorScreen:!this.errorScreenRegistered.current,showLoadingScreen:!this.loadingScreenRegistered.current,reactDevTools:this.state.reactDevTools,customNpmRegistries:(g=(b=this.props.customSetup)==null?void 0:b.npmRegistries)==null?void 0:g.map(y=>({...y,proxyEnabled:!1}))});return typeof this.unsubscribe!="function"&&(this.unsubscribe=s.listen(this.handleMessage),this.timeoutHook=setTimeout(()=>{this.setState({sandpackStatus:"timeout"})},Rr)),this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o]&&(Object.keys(this.queuedListeners[o]).forEach(y=>{let R=this.queuedListeners[o][y],N=s.listen(R);this.unsubscribeClientListeners[o][y]=N}),this.queuedListeners[o]={}),Object.entries(this.queuedListeners.global).forEach(([y,R])=>{let N=s.listen(R);this.unsubscribeClientListeners[o][y]=N}),s};this.runSandpack=()=>{Object.keys(this.preregisteredIframes).forEach(t=>{let o=this.preregisteredIframes[t];this.clients[t]=this.createClient(o,t)}),this.setState({sandpackStatus:"running"})};this.registerBundler=(t,o)=>{this.state.sandpackStatus==="running"?this.clients[o]=this.createClient(t,o):this.preregisteredIframes[o]=t};this.unregisterBundler=t=>{var r;let o=this.clients[t];o?(o.cleanup(),(r=o.iframe.contentWindow)==null||r.location.replace("about:blank"),delete this.clients[t]):delete this.preregisteredIframes[t],this.timeoutHook&&clearTimeout(this.timeoutHook),Object.values(this.unsubscribeClientListeners).forEach(n=>{Object.values(n).forEach(a=>a())}),this.setState({sandpackStatus:"idle"})};this.unregisterAllClients=()=>{Object.keys(this.clients).map(this.unregisterBundler),typeof this.unsubscribe=="function"&&(this.unsubscribe(),this.unsubscribe=void 0)};this.setActiveFile=t=>{this.setState({activeFile:t})};this.openFile=t=>{this.setState(({visibleFiles:o})=>{let s=o.includes(t)?o:[...o,t];return{activeFile:t,visibleFiles:s}})};this.closeFile=t=>{this.state.visibleFiles.length!==1&&this.setState(({visibleFiles:o,activeFile:s})=>{let r=o.indexOf(t),n=o.filter(c=>c!==t);return{activeFile:t===s?r===0?o[1]:o[r-1]:s,visibleFiles:n}})};this.deleteFile=t=>{this.setState(({visibleFiles:o,files:s})=>{let r={...s};return delete r[t],{visibleFiles:o.filter(n=>n!==t),files:r}},this.updateClients)};this.addFile=this.updateFile;this.dispatchMessage=(t,o)=>{if(this.state.sandpackStatus!=="running"){console.warn("[sandpack-react]: dispatch cannot be called while in idle mode");return}o?this.clients[o].dispatch(t):Object.values(this.clients).forEach(s=>{s.dispatch(t)})};this.addListener=(t,o)=>{if(o){if(this.clients[o])return this.clients[o].listen(t);{let s=Ae();return this.queuedListeners[o]=this.queuedListeners[o]||{},this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o][s]=t,()=>{this.queuedListeners[o][s]?delete this.queuedListeners[o][s]:this.unsubscribeClientListeners[o][s]&&(this.unsubscribeClientListeners[o][s](),delete this.unsubscribeClientListeners[o][s])}}}else{let s=Ae();this.queuedListeners.global[s]=t;let n=Object.values(this.clients).map(a=>a.listen(t));return()=>{n.forEach(a=>a())}}};this.resetFile=t=>{let{files:o}=De({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState(s=>({files:{...s.files,[t]:o[t]}}),this.updateClients)};this.resetAllFiles=()=>{let{files:t}=De({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState({files:t},this.updateClients)};this._getSandpackState=()=>{let{files:t,activeFile:o,visibleFiles:s,visibleFilesFromProps:r,startRoute:n,bundlerState:c,editorState:a,error:p,sandpackStatus:d,environment:u,initMode:f}=this.state;return{files:t,environment:u,visibleFiles:s,visibleFilesFromProps:r,activeFile:o,startRoute:n,error:p,bundlerState:c,status:d,editorState:a,initMode:f,clients:this.clients,dispatch:this.dispatchMessage,errorScreenRegisteredRef:this.errorScreenRegistered,lazyAnchorRef:this.lazyAnchorRef,listen:this.addListener,loadingScreenRegisteredRef:this.loadingScreenRegistered,openInCSBRegisteredRef:this.openInCSBRegistered,registerBundler:this.registerBundler,runSandpack:this.runSandpack,unregisterBundler:this.unregisterBundler,registerReactDevTools:this.registerReactDevTools,openFile:this.openFile,resetFile:this.resetFile,resetAllFiles:this.resetAllFiles,setActiveFile:this.setActiveFile,updateCurrentFile:this.updateCurrentFile,updateFile:this.updateFile,addFile:this.addFile,closeFile:this.closeFile,deleteFile:this.deleteFile}};var c,a,p,d;let{activeFile:o,visibleFiles:s,files:r,environment:n}=De({template:t.template,files:t.files,customSetup:t.customSetup,options:t.options});this.state={files:r,environment:n,visibleFiles:s,visibleFilesFromProps:s,activeFile:o,startRoute:(c=this.props.options)==null?void 0:c.startRoute,bundlerState:void 0,error:null,sandpackStatus:((p=(a=this.props.options)==null?void 0:a.autorun)!=null?p:!0)?"initial":"idle",editorState:"pristine",initMode:((d=this.props.options)==null?void 0:d.initMode)||"lazy",reactDevTools:void 0},this.queuedListeners={global:{}},this.unsubscribeClientListeners={},this.preregisteredIframes={},this.clients={},this.lazyAnchorRef=at(),this.errorScreenRegistered=at(),this.openInCSBRegistered=at(),this.loadingScreenRegistered=at()}initializeSandpackIframe(){var s,r,n,c,a;if(!((r=(s=this.props.options)==null?void 0:s.autorun)!=null?r:!0))return;let o=(c=(n=this.props.options)==null?void 0:n.initModeObserverOptions)!=null?c:{rootMargin:"1000px 0px"};this.intersectionObserver&&this.lazyAnchorRef.current&&((a=this.intersectionObserver)==null||a.unobserve(this.lazyAnchorRef.current)),this.lazyAnchorRef.current&&this.state.initMode==="lazy"?(this.intersectionObserver=new IntersectionObserver(p=>{var d;p.some(u=>u.isIntersecting)&&(this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50),this.lazyAnchorRef.current&&((d=this.intersectionObserver)==null||d.unobserve(this.lazyAnchorRef.current)))},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.lazyAnchorRef.current&&this.state.initMode==="user-visible"?(this.intersectionObserver=new IntersectionObserver(p=>{p.some(d=>d.isIntersecting)?this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50):(this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),Object.keys(this.clients).map(this.unregisterBundler),this.unregisterAllClients())},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.initializeSandpackIframeHook=setTimeout(()=>this.runSandpack(),50)}componentDidMount(){this.initializeSandpackIframe()}componentDidUpdate(t){var a,p,d,u;((a=t.options)==null?void 0:a.initMode)!==((p=this.props.options)==null?void 0:p.initMode)&&((d=this.props.options)==null?void 0:d.initMode)&&this.setState({initMode:(u=this.props.options)==null?void 0:u.initMode},this.initializeSandpackIframe);let{activeFile:o,visibleFiles:s,files:r,environment:n}=De({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});if(t.template!==this.props.template||!rt(t.options,this.props.options)||!rt(t.customSetup,this.props.customSetup)||!rt(t.files,this.props.files)){if(this.setState({activeFile:o,visibleFiles:s,visibleFilesFromProps:s,files:r,environment:n}),this.state.sandpackStatus!=="running")return;Object.values(this.clients).forEach(f=>f.updatePreview({files:r,template:n}))}let c=rt(r,this.state.files)?"pristine":"dirty";c!==this.state.editorState&&this.setState({editorState:c})}componentWillUnmount(){typeof this.unsubscribe=="function"&&this.unsubscribe(),this.timeoutHook&&clearTimeout(this.timeoutHook),this.debounceHook&&clearTimeout(this.debounceHook),this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),this.intersectionObserver&&this.intersectionObserver.disconnect()}render(){var n;let{children:t,theme:o,className:s,style:r}=this.props;return Wt(nt.Provider,{value:this._getSandpackState()},Wt(vr,{classes:(n=this.props.options)==null?void 0:n.classes},Wt(Go,{className:s,style:r,theme:o},t)))}},qo=Jo,dc=nt.Consumer;function x(){let e=Nr(nt);if(e===null)throw new Error('[sandpack-react]: "useSandpack" must be wrapped by a "SandpackProvider"');let{dispatch:t,listen:o,...s}=e;return{sandpack:{...s},dispatch:t,listen:o}}var it=()=>{var t,o,s;let{sandpack:e}=x();return{code:(t=e.files[e.activeFile])==null?void 0:t.code,readOnly:(s=(o=e.files[e.activeFile])==null?void 0:o.readOnly)!=null?s:!1,updateCode:e.updateCurrentFile}};import{useClasser as Mr}from"@code-hike/classer";import{createElement as Be}from"react";var ee=m({svg:{margin:"auto"}}),T=m({appearance:"none",border:"0",outline:"none",display:"flex",alignItems:"center",fontSize:"inherit",fontFamily:"inherit",backgroundColor:"transparent",transition:"color $default, background $default",cursor:"pointer",color:"$colors$clickable","&:disabled":{color:"$colors$disabled"},"&:hover:not(:disabled,[data-active='true'])":{color:"$colors$hover"},'&[data-active="true"]':{color:"$colors$accent"},svg:{minWidth:"$space$4",width:"$space$4",height:"$space$4"},[`&.${ee}`]:{padding:"$space$1",width:"$space$7",height:"$space$7",display:"flex"}}),z=m({backgroundColor:"$colors$surface2",borderRadius:"99999px",'&[data-active="true"]':{color:"$colors$surface1",background:"$colors$accent"},"&:hover:not(:disabled,[data-active='true'])":{backgroundColor:"$colors$surface3"}}),Ko=m({padding:0}),$r=tt({"0%":{opacity:0,transform:"translateY(4px)"},"100%":{opacity:1,transform:"translateY(0)"}}),He=m({position:"absolute",bottom:"0",left:"0",right:"0",top:"0",margin:"0",overflow:"auto",height:"100%",zIndex:"$top"}),ct=m({padding:"$space$4",whiteSpace:"pre-wrap",fontFamily:"$font$mono",backgroundColor:"$colors$errorSurface"}),ke=m({animation:`${$r} 150ms ease`,color:"$colors$error"});var Lr=m({borderBottom:"1px solid $colors$surface2",background:"$colors$surface1"}),wr=m({padding:"0 $space$2",overflow:"auto",display:"flex",flexWrap:"nowrap",alignItems:"stretch",minHeight:"40px",marginBottom:"-1px"}),Qo=m({padding:"0 $space$1 0 $space$1",borderRadius:"$border$radius",marginLeft:"$space$1",width:"$space$5",visibility:"hidden",svg:{width:"$space$3",height:"$space$3",display:"block",position:"relative",top:1}}),Fr=m({padding:"0 $space$2",height:"$layout$headerHeight",whiteSpace:"nowrap","&:focus":{outline:"none"},[`&:hover > .${Qo}`]:{visibility:"unset"}}),lt=({closableTabs:e,className:t,...o})=>{let{sandpack:s}=x(),r=Mr(h),{activeFile:n,visibleFiles:c,setActiveFile:a}=s,p=u=>{u.stopPropagation();let f=u.target.closest("[data-active]"),b=f==null?void 0:f.getAttribute("title");!b||s.closeFile(b)},d=u=>{let f=ve(u),b=c.reduce((g,y)=>(y===u||ve(y)===f&&g.push(y),g),[]);return b.length===0?f:_o(u,b)};return Be("div",{className:l(r("tabs"),Lr,t),translate:"no",...o},Be("div",{"aria-label":"Select active file",className:l(r("tabs-scrollable-container"),wr),role:"tablist"},c.map(u=>Be("button",{key:u,"aria-selected":u===n,className:l(r("tab-button"),T,Fr),"data-active":u===n,onClick:()=>a(u),role:"tab",title:u,type:"button"},d(u),e&&c.length>1&&Be("span",{className:l(r("close-button"),Qo),onClick:p},Be(Do,null))))))};import{useClasser as Ar}from"@code-hike/classer";import{createElement as es}from"react";var Pr=m({position:"absolute",bottom:"$space$2",right:"$space$2",paddingRight:"$space$3"}),pt=({className:e,onClick:t,...o})=>{let s=Ar(h),{sandpack:r}=x();return es("button",{className:l(s("button"),T,z,Pr,e),onClick:n=>{r.runSandpack(),t==null||t(n)},type:"button",...o},es(Ke,null),"Run")};import{useClasser as Ir}from"@code-hike/classer";import{createElement as Or}from"react";var me=m({display:"flex",flexDirection:"column",width:"100%",position:"relative",backgroundColor:"$colors$surface1",transition:"flex $transitions$default",gap:1,[`&:has(.${h}-stack)`]:{backgroundColor:"$colors$surface2"}}),Y=({className:e,...t})=>{let o=Ir(h);return Or("div",{className:l(o("stack"),me,e),...t})};import{useClasser as Yr}from"@code-hike/classer";import{closeBrackets as Jr,closeBracketsKeymap as qr}from"@codemirror/closebrackets";import{defaultKeymap as Kr,indentLess as Qr,indentMore as en,deleteGroupBackward as tn}from"@codemirror/commands";import{commentKeymap as on}from"@codemirror/comment";import{lineNumbers as sn}from"@codemirror/gutter";import{defaultHighlightStyle as rn}from"@codemirror/highlight";import{history as nn,historyKeymap as an}from"@codemirror/history";import{bracketMatching as cn}from"@codemirror/matchbrackets";import{EditorState as ds,EditorSelection as ln,StateEffect as ms}from"@codemirror/state";import{Annotation as us}from"@codemirror/state";import{highlightSpecialChars as pn,highlightActiveLine as dn,keymap as fs,EditorView as Jt}from"@codemirror/view";import mn from"@react-hook/intersection-observer";import{Fragment as gn,createElement as Ee,forwardRef as un,useEffect as Re,useImperativeHandle as fn,useMemo as hn,useRef as gt,useState as hs}from"react";import{useContext as Dr}from"react";var Ce=()=>{let{theme:e,id:t,mode:o}=Dr(ot);return{theme:e,themeId:t,themeMode:o}};var Gt=(e,t)=>{if(e.length!==t.length)return!1;let o=!0;for(let s=0;s<e.length;s++)if(e[s]!==t[s]){o=!1;break}return o};import{Decoration as mt,ViewPlugin as zr}from"@codemirror/view";import{HighlightStyle as Hr,tags as A}from"@codemirror/highlight";import{css as Br}from"@codemirror/lang-css";import{html as _r}from"@codemirror/lang-html";import{javascript as ts}from"@codemirror/lang-javascript";import{EditorView as jr}from"@codemirror/view";import{useCallback as Ur}from"react";var _e=(e,{line:t,column:o})=>e.line(t).from+(o!=null?o:0)-1,os=()=>jr.theme({"&":{backgroundColor:`var(--${h}-colors-surface1)`,color:`var(--${h}-syntax-color-plain)`,height:"100%"},".cm-matchingBracket, .cm-nonmatchingBracket, &.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket":{color:"inherit",backgroundColor:"rgba(128,128,128,.25)",backgroundBlendMode:"difference"},"&.cm-editor.cm-focused":{outline:"none"},".cm-activeLine":{backgroundColor:`var(--${h}-colors-surface3)`,borderRadius:`var(--${h}-border-radius)`},".cm-errorLine":{backgroundColor:`var(--${h}-colors-errorSurface)`,borderRadius:`var(--${h}-border-radius)`},".cm-content":{caretColor:`var(--${h}-colors-accent)`,padding:`0 var(--${h}-space-4)`},".cm-scroller":{fontFamily:`var(--${h}-font-mono)`,lineHeight:`var(--${h}-font-lineHeight)`},".cm-gutters":{backgroundColor:`var(--${h}-colors-surface1)`,color:`var(--${h}-colors-disabled)`,border:"none",paddingLeft:`var(--${h}-space-1)`},".cm-gutter.cm-lineNumbers":{fontSize:".6em"},".cm-lineNumbers .cm-gutterElement":{lineHeight:`var(--${h}-font-lineHeight)`,minWidth:`var(--${h}-space-5)`},".cm-content .cm-line":{paddingLeft:`var(--${h}-space-1)`},".cm-content.cm-readonly .cm-line":{paddingLeft:0}}),te=e=>`${h}-syntax-${e}`,ss=()=>["string","plain","comment","keyword","definition","punctuation","property","tag","static"].reduce((t,o)=>({...t,[`.${te(o)}`]:{color:`$syntax$color$${o}`,fontStyle:`$syntax$fontStyle$${o}`}}),{}),rs=e=>Hr.define([{tag:A.link,textDecoration:"underline"},{tag:A.emphasis,fontStyle:"italic"},{tag:A.strong,fontWeight:"bold"},{tag:A.keyword,class:te("keyword")},{tag:[A.atom,A.number,A.bool],class:te("static")},{tag:A.tagName,class:te("tag")},{tag:A.variableName,class:te("plain")},{tag:A.function(A.variableName),class:te("definition")},{tag:A.definition(A.function(A.variableName)),class:te("definition")},{tag:A.propertyName,class:te("property")},{tag:[A.literal,A.inserted],class:te(e.syntax.string?"string":"static")},{tag:A.punctuation,class:te("punctuation")},{tag:[A.comment,A.quote],class:te("comment")}]),ns=(e,t,o)=>{if(!e&&!t)return"javascript";let s=t;if(!s&&e){let r=e.lastIndexOf(".");s=e.slice(r+1)}for(let r of o)if(s===r.name||r.extensions.includes(s||""))return r.name;switch(s){case"ts":case"tsx":return"typescript";case"html":case"svelte":case"vue":return"html";case"css":case"less":case"scss":return"css";case"js":case"jsx":case"json":default:return"javascript"}},as=(e,t)=>{let o={javascript:ts({jsx:!0,typescript:!1}),typescript:ts({jsx:!0,typescript:!0}),html:_r(),css:Br()};for(let s of t)if(e===s.name)return s.language;return o[e]},dt=(...e)=>Ur(t=>e.forEach(o=>{if(!!o){if(typeof o=="function")return o(t);o.current=t}}),e);function is(e){return zr.fromClass(class{constructor(t){this.decorations=this.getDecoration(t)}update(t){}getDecoration(t){if(!e)return mt.none;let o=e.map(s=>{var a,p,d;let r=mt.line({attributes:{class:(a=s.className)!=null?a:""}}),n=mt.mark({class:(p=s.className)!=null?p:"",attributes:(d=s.elementAttributes)!=null?d:void 0}),c=_e(t.state.doc,{line:s.line,column:s.startColumn})+1;if(s.startColumn&&s.endColumn){let u=_e(t.state.doc,{line:s.line,column:s.endColumn})+1;return n.range(c,u)}return r.range(c)});return mt.set(o)}},{decorations:t=>t.decorations})}import{Decoration as ut,ViewPlugin as Vr}from"@codemirror/view";function cs(){return Wr}var Xr=ut.line({attributes:{class:"cm-errorLine"}}),Wr=Vr.fromClass(class{constructor(){this.decorations=ut.none}update(e){e.transactions.forEach(t=>{let o=t.annotation("show-error");if(o!==void 0){let s=_e(e.view.state.doc,{line:o})+1;this.decorations=ut.set([Xr.range(s)])}else t.annotation("remove-errors")&&(this.decorations=ut.none)})}},{decorations:e=>e.decorations});var ft=m({margin:"0",display:"block",fontFamily:"$font$mono",fontSize:"$font$size",color:"$syntax$color$plain",lineHeight:"$font$lineHeight"}),Zt=m(ss()),ht=m({flex:1,position:"relative",overflow:"auto",background:"$colors$surface1",".cm-scroller":{padding:"$space$4 0"},[`.${ft}`]:{padding:"$space$4 0"}}),Yt=m({margin:"0",outline:"none",height:"100%"}),ls=m({fontFamily:"$font$mono",fontSize:"0.8em",position:"absolute",right:"$space$2",bottom:"$space$2",zIndex:"$top",color:"$colors$clickable",backgroundColor:"$colors$surface2",borderRadius:"99999px",padding:"calc($space$1 / 2) $space$2",[`& + .${T}`]:{right:"calc($space$11 * 2)"}});import{highlightTree as Gr}from"@codemirror/highlight";import{createElement as Zr}from"react";var ps=({langSupport:e,highlightTheme:t,code:o=""})=>{let s=e.language.parser.parse(o),r=0,n=[],c=(a,p)=>{if(a>r){let d=o.slice(r,a);n.push(p?Zr("span",{children:d,className:p,key:`${a}${r}`}):d),r=a}};return Gr(s,t.match,(a,p,d)=>{c(a,""),c(p,d)}),r<o.length&&n.push(`
-+`},"/package.json":{code:JSON.stringify({dependencies:{"core-js":"^3.6.5",vue:"^3.0.0-0","@vue/cli-plugin-babel":"4.5.0"},main:"/src/main.js"})}},main:"/src/App.vue",environment:"vue-cli"};var Ie={react:Dt,"react-ts":Ht,vue:Vt,vanilla:Ut,"vanilla-ts":zt,vue3:Xt,angular:Ot,svelte:_t,solid:Bt,"test-ts":jt};var De=e=>{var a,p,d,u,f,b;let t=Oe(e.files),o=Sr({template:e.template,customSetup:e.customSetup,files:t}),s=Oe((p=(a=e.options)==null?void 0:a.visibleFiles)!=null?p:[]),r=((d=e.options)==null?void 0:d.activeFile)?Yo((u=e.options)==null?void 0:u.activeFile,t||{}):void 0;s.length===0&&t&&Object.keys(t).forEach(g=>{let y=t[g];if(typeof y=="string"){s.push(g);return}!r&&y.active&&(r=g,y.hidden===!0&&s.push(g)),y.hidden||s.push(g)}),s.length===0&&(s=[o.main]),o.files[o.entry]||(o.entry=Yo(o.entry,o.files)),!r&&o.main&&(r=o.main),(!r||!o.files[r])&&(r=s[0]),s.includes(r)||s.push(r);let n=yr(o.files,(f=o.dependencies)!=null?f:{},(b=o.devDependencies)!=null?b:{},o.entry);return{visibleFiles:s.filter(g=>n[g]),activeFile:r,files:n,environment:o.environment}},Yo=(e,t)=>{let o=Oe(t),s=Oe(e);if(s in o)return s;if(!e)return null;let r=null,n=0,c=[".js",".jsx",".ts",".tsx"];for(;!r&&n<c.length;){let p=`${s.split(".")[0]}${c[n]}`;o[p]!==void 0&&(r=p),n++}return r},Sr=({files:e,template:t,customSetup:o})=>{if(!t){if(!o)return Ie.vanilla;if(!e||Object.keys(e).length===0)throw new Error("[sandpack-react]: without a template, you must pass at least one file");return{...o,files:st(e)}}let s=Ie[t];if(!s)throw new Error(`[sandpack-react]: invalid template "${t}" provided`);return!o&&!e?s:{files:st({...s.files,...e}),dependencies:{...s.dependencies,...o==null?void 0:o.dependencies},devDependencies:{...s.devDependencies,...o==null?void 0:o.devDependencies},entry:Oe((o==null?void 0:o.entry)||s.entry),main:s.main,environment:(o==null?void 0:o.environment)||s.environment}},st=e=>e?Object.keys(e).reduce((t,o)=>(typeof e[o]=="string"?t[o]={code:e[o]}:t[o]=e[o],t),{}):{};var nt=Er(null),Rr=3e4,Jo=class extends Tr{constructor(t){super(t);this.timeoutHook=null;this.initializeSandpackIframeHook=null;this.handleMessage=t=>{this.timeoutHook&&clearTimeout(this.timeoutHook),t.type==="state"?this.setState({bundlerState:t.state}):t.type==="done"&&!t.compilatonError?this.setState({error:null}):t.type==="action"&&t.action==="show-error"?this.setState({error:Cr(t)}):t.type==="action"&&t.action==="notification"&&t.notificationType==="error"&&this.setState({error:{message:t.title}})};this.registerReactDevTools=t=>{this.setState({reactDevTools:t})};this.updateCurrentFile=t=>{this.updateFile(this.state.activeFile,t)};this.updateFile=(t,o)=>{var r;let s=this.state.files;if(typeof t=="string"&&o){if(o===((r=this.state.files[t])==null?void 0:r.code))return;s={...s,[t]:{code:o}}}else typeof t=="object"&&(s={...s,...st(t)});this.setState({files:xr(s)},this.updateClients)};this.updateClients=()=>{var n,c,a,p;let{files:t,sandpackStatus:o}=this.state,s=(c=(n=this.props.options)==null?void 0:n.recompileMode)!=null?c:"delayed",r=(p=(a=this.props.options)==null?void 0:a.recompileDelay)!=null?p:500;o==="running"&&(s==="immediate"&&Object.values(this.clients).forEach(d=>{d.updatePreview({files:t})}),s==="delayed"&&(window.clearTimeout(this.debounceHook),this.debounceHook=window.setTimeout(()=>{Object.values(this.clients).forEach(d=>{d.updatePreview({files:this.state.files})})},r)))};this.createClient=(t,o)=>{var n,c,a,p,d,u,f,b,g;let s=new kr(t,{files:this.state.files,template:this.state.environment},{externalResources:(n=this.props.options)==null?void 0:n.externalResources,bundlerURL:(c=this.props.options)==null?void 0:c.bundlerURL,startRoute:(a=this.props.options)==null?void 0:a.startRoute,fileResolver:(p=this.props.options)==null?void 0:p.fileResolver,skipEval:(u=(d=this.props.options)==null?void 0:d.skipEval)!=null?u:!1,logLevel:(f=this.props.options)==null?void 0:f.logLevel,showOpenInCodeSandbox:!this.openInCSBRegistered.current,showErrorScreen:!this.errorScreenRegistered.current,showLoadingScreen:!this.loadingScreenRegistered.current,reactDevTools:this.state.reactDevTools,customNpmRegistries:(g=(b=this.props.customSetup)==null?void 0:b.npmRegistries)==null?void 0:g.map(y=>({...y,proxyEnabled:!1}))});return typeof this.unsubscribe!="function"&&(this.unsubscribe=s.listen(this.handleMessage),this.timeoutHook=setTimeout(()=>{this.setState({sandpackStatus:"timeout"})},Rr)),this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o]&&(Object.keys(this.queuedListeners[o]).forEach(y=>{let R=this.queuedListeners[o][y],N=s.listen(R);this.unsubscribeClientListeners[o][y]=N}),this.queuedListeners[o]={}),Object.entries(this.queuedListeners.global).forEach(([y,R])=>{let N=s.listen(R);this.unsubscribeClientListeners[o][y]=N}),s};this.runSandpack=()=>{Object.keys(this.preregisteredIframes).forEach(t=>{let o=this.preregisteredIframes[t];this.clients[t]=this.createClient(o,t)}),this.setState({sandpackStatus:"running"})};this.registerBundler=(t,o)=>{this.state.sandpackStatus==="running"?this.clients[o]=this.createClient(t,o):this.preregisteredIframes[o]=t};this.unregisterBundler=t=>{var r;let o=this.clients[t];o?(o.cleanup(),(r=o.iframe.contentWindow)==null||r.location.replace("about:blank"),delete this.clients[t]):delete this.preregisteredIframes[t],this.timeoutHook&&clearTimeout(this.timeoutHook),Object.values(this.unsubscribeClientListeners).forEach(n=>{Object.values(n).forEach(a=>a())}),this.setState({sandpackStatus:"idle"})};this.unregisterAllClients=()=>{Object.keys(this.clients).map(this.unregisterBundler),typeof this.unsubscribe=="function"&&(this.unsubscribe(),this.unsubscribe=void 0)};this.setActiveFile=t=>{this.setState({activeFile:t})};this.openFile=t=>{this.setState(({visibleFiles:o})=>{let s=o.includes(t)?o:[...o,t];return{activeFile:t,visibleFiles:s}})};this.closeFile=t=>{this.state.visibleFiles.length!==1&&this.setState(({visibleFiles:o,activeFile:s})=>{let r=o.indexOf(t),n=o.filter(c=>c!==t);return{activeFile:t===s?r===0?o[1]:o[r-1]:s,visibleFiles:n}})};this.deleteFile=t=>{this.setState(({visibleFiles:o,files:s})=>{let r={...s};return delete r[t],{visibleFiles:o.filter(n=>n!==t),files:r}},this.updateClients)};this.addFile=this.updateFile;this.dispatchMessage=(t,o)=>{if(this.state.sandpackStatus!=="running"){console.warn("[sandpack-react]: dispatch cannot be called while in idle mode");return}o?this.clients[o].dispatch(t):Object.values(this.clients).forEach(s=>{s.dispatch(t)})};this.addListener=(t,o)=>{if(o){if(this.clients[o])return this.clients[o].listen(t);{let s=Ae();return this.queuedListeners[o]=this.queuedListeners[o]||{},this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o][s]=t,()=>{this.queuedListeners[o][s]?delete this.queuedListeners[o][s]:this.unsubscribeClientListeners[o][s]&&(this.unsubscribeClientListeners[o][s](),delete this.unsubscribeClientListeners[o][s])}}}else{let s=Ae();this.queuedListeners.global[s]=t;let n=Object.values(this.clients).map(a=>a.listen(t));return()=>{n.forEach(a=>a())}}};this.resetFile=t=>{let{files:o}=De({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState(s=>({files:{...s.files,[t]:o[t]}}),this.updateClients)};this.resetAllFiles=()=>{let{files:t}=De({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState({files:t},this.updateClients)};this._getSandpackState=()=>{let{files:t,activeFile:o,visibleFiles:s,visibleFilesFromProps:r,startRoute:n,bundlerState:c,editorState:a,error:p,sandpackStatus:d,environment:u,initMode:f}=this.state;return{files:t,environment:u,visibleFiles:s,visibleFilesFromProps:r,activeFile:o,startRoute:n,error:p,bundlerState:c,status:d,editorState:a,initMode:f,clients:this.clients,dispatch:this.dispatchMessage,errorScreenRegisteredRef:this.errorScreenRegistered,lazyAnchorRef:this.lazyAnchorRef,listen:this.addListener,loadingScreenRegisteredRef:this.loadingScreenRegistered,openInCSBRegisteredRef:this.openInCSBRegistered,registerBundler:this.registerBundler,runSandpack:this.runSandpack,unregisterBundler:this.unregisterBundler,registerReactDevTools:this.registerReactDevTools,openFile:this.openFile,resetFile:this.resetFile,resetAllFiles:this.resetAllFiles,setActiveFile:this.setActiveFile,updateCurrentFile:this.updateCurrentFile,updateFile:this.updateFile,addFile:this.addFile,closeFile:this.closeFile,deleteFile:this.deleteFile}};var c,a,p,d;let{activeFile:o,visibleFiles:s,files:r,environment:n}=De({template:t.template,files:t.files,customSetup:t.customSetup,options:t.options});this.state={files:r,environment:n,visibleFiles:s,visibleFilesFromProps:s,activeFile:o,startRoute:(c=this.props.options)==null?void 0:c.startRoute,bundlerState:void 0,error:null,sandpackStatus:((p=(a=this.props.options)==null?void 0:a.autorun)!=null?p:!0)?"initial":"idle",editorState:"pristine",initMode:((d=this.props.options)==null?void 0:d.initMode)||"lazy",reactDevTools:void 0},this.queuedListeners={global:{}},this.unsubscribeClientListeners={},this.preregisteredIframes={},this.clients={},this.lazyAnchorRef=at(),this.errorScreenRegistered=at(),this.openInCSBRegistered=at(),this.loadingScreenRegistered=at()}initializeSandpackIframe(){var s,r,n,c,a;if(!((r=(s=this.props.options)==null?void 0:s.autorun)!=null?r:!0))return;let o=(c=(n=this.props.options)==null?void 0:n.initModeObserverOptions)!=null?c:{rootMargin:"1000px 0px"};this.intersectionObserver&&this.lazyAnchorRef.current&&((a=this.intersectionObserver)==null||a.unobserve(this.lazyAnchorRef.current)),this.lazyAnchorRef.current&&this.state.initMode==="lazy"?(this.intersectionObserver=new IntersectionObserver(p=>{var d;p.some(u=>u.isIntersecting)&&(this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50),this.lazyAnchorRef.current&&((d=this.intersectionObserver)==null||d.unobserve(this.lazyAnchorRef.current)))},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.lazyAnchorRef.current&&this.state.initMode==="user-visible"?(this.intersectionObserver=new IntersectionObserver(p=>{p.some(d=>d.isIntersecting)?this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50):(this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),Object.keys(this.clients).map(this.unregisterBundler),this.unregisterAllClients())},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.initializeSandpackIframeHook=setTimeout(()=>this.runSandpack(),50)}componentDidMount(){this.initializeSandpackIframe()}componentDidUpdate(t){var a,p,d,u;((a=t.options)==null?void 0:a.initMode)!==((p=this.props.options)==null?void 0:p.initMode)&&((d=this.props.options)==null?void 0:d.initMode)&&this.setState({initMode:(u=this.props.options)==null?void 0:u.initMode},this.initializeSandpackIframe);let{activeFile:o,visibleFiles:s,files:r,environment:n}=De({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});if(t.template!==this.props.template||!rt(t.options,this.props.options)||!rt(t.customSetup,this.props.customSetup)||!rt(t.files,this.props.files)){if(this.setState({activeFile:o,visibleFiles:s,visibleFilesFromProps:s,files:r,environment:n}),this.state.sandpackStatus!=="running")return;Object.values(this.clients).forEach(f=>f.updatePreview({files:r,template:n}))}let c=rt(r,this.state.files)?"pristine":"dirty";c!==this.state.editorState&&this.setState({editorState:c})}componentWillUnmount(){typeof this.unsubscribe=="function"&&this.unsubscribe(),this.timeoutHook&&clearTimeout(this.timeoutHook),this.debounceHook&&clearTimeout(this.debounceHook),this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),this.intersectionObserver&&this.intersectionObserver.disconnect()}render(){var n;let{children:t,theme:o,className:s,style:r}=this.props;return Wt(nt.Provider,{value:this._getSandpackState()},Wt(vr,{classes:(n=this.props.options)==null?void 0:n.classes},Wt(Go,{className:s,style:r,theme:o},t)))}},qo=Jo,dc=nt.Consumer;function x(){let e=Nr(nt);if(e===null)throw new Error('[sandpack-react]: "useSandpack" must be wrapped by a "SandpackProvider"');let{dispatch:t,listen:o,...s}=e;return{sandpack:{...s},dispatch:t,listen:o}}var it=()=>{var t,o,s;let{sandpack:e}=x();return{code:(t=e.files[e.activeFile])==null?void 0:t.code,readOnly:(s=(o=e.files[e.activeFile])==null?void 0:o.readOnly)!=null?s:!1,updateCode:e.updateCurrentFile}};import{useClasser as Mr}from"@code-hike/classer";import{createElement as Be}from"react";var ee=m({svg:{margin:"auto"}}),T=m({appearance:"none",border:"0",outline:"none",display:"flex",alignItems:"center",fontSize:"inherit",fontFamily:"inherit",backgroundColor:"transparent",transition:"color $default, background $default",cursor:"pointer",color:"$colors$clickable","&:disabled":{color:"$colors$disabled"},"&:hover:not(:disabled,[data-active='true'])":{color:"$colors$hover"},'&[data-active="true"]':{color:"$colors$accent"},svg:{minWidth:"$space$4",width:"$space$4",height:"$space$4"},[`&.${ee}`]:{padding:"$space$1",width:"$space$7",height:"$space$7",display:"flex"}}),z=m({backgroundColor:"$colors$surface2",borderRadius:"99999px",'&[data-active="true"]':{color:"$colors$surface1",background:"$colors$accent"},"&:hover:not(:disabled,[data-active='true'])":{backgroundColor:"$colors$surface3"}}),Ko=m({padding:0}),$r=tt({"0%":{opacity:0,transform:"translateY(4px)"},"100%":{opacity:1,transform:"translateY(0)"}}),He=m({position:"absolute",bottom:"0",left:"0",right:"0",top:"0",margin:"0",overflow:"auto",height:"100%",zIndex:"$top"}),ct=m({padding:"$space$4",whiteSpace:"pre-wrap",fontFamily:"$font$mono",backgroundColor:"$colors$errorSurface"}),ke=m({animation:`${$r} 150ms ease`,color:"$colors$error"});var Lr=m({borderBottom:"1px solid $colors$surface2",background:"$colors$surface1"}),wr=m({padding:"0 $space$2",overflow:"auto",display:"flex",flexWrap:"nowrap",alignItems:"stretch",minHeight:"40px",marginBottom:"-1px"}),Qo=m({padding:"0 $space$1 0 $space$1",borderRadius:"$border$radius",marginLeft:"$space$1",width:"$space$5",visibility:"hidden",svg:{width:"$space$3",height:"$space$3",display:"block",position:"relative",top:1}}),Fr=m({padding:"0 $space$2",height:"$layout$headerHeight",whiteSpace:"nowrap","&:focus":{outline:"none"},[`&:hover > .${Qo}`]:{visibility:"unset"}}),lt=({closableTabs:e,className:t,...o})=>{let{sandpack:s}=x(),r=Mr(h),{activeFile:n,visibleFiles:c,setActiveFile:a}=s,p=u=>{u.stopPropagation();let f=u.target.closest("[data-active]"),b=f==null?void 0:f.getAttribute("title");!b||s.closeFile(b)},d=u=>{let f=ve(u),b=c.reduce((g,y)=>(y===u||ve(y)===f&&g.push(y),g),[]);return b.length===0?f:_o(u,b)};return Be("div",{className:l(r("tabs"),Lr,t),translate:"no",...o},Be("div",{"aria-label":"Select active file",className:l(r("tabs-scrollable-container"),wr),role:"tablist"},c.map(u=>Be("button",{key:u,"aria-selected":u===n,className:l(r("tab-button"),T,Fr),"data-active":u===n,onClick:()=>a(u),role:"tab",title:u,type:"button"},d(u),e&&c.length>1&&Be("span",{className:l(r("close-button"),Qo),onClick:p},Be(Do,null))))))};import{useClasser as Ar}from"@code-hike/classer";import{createElement as es}from"react";var Pr=m({position:"absolute",bottom:"$space$2",right:"$space$2",paddingRight:"$space$3"}),pt=({className:e,onClick:t,...o})=>{let s=Ar(h),{sandpack:r}=x();return es("button",{className:l(s("button"),T,z,Pr,e),onClick:n=>{r.runSandpack(),t==null||t(n)},type:"button",...o},es(Ke,null),"Run")};import{useClasser as Ir}from"@code-hike/classer";import{createElement as Or}from"react";var me=m({display:"flex",flexDirection:"column",width:"100%",position:"relative",backgroundColor:"$colors$surface1",transition:"flex $transitions$default",gap:1,[`&:has(.${h}-stack)`]:{backgroundColor:"$colors$surface2"}}),Y=({className:e,...t})=>{let o=Ir(h);return Or("div",{className:l(o("stack"),me,e),...t})};import{useClasser as Yr}from"@code-hike/classer";import{closeBrackets as Jr,closeBracketsKeymap as qr}from"@codemirror/closebrackets";import{defaultKeymap as Kr,indentLess as Qr,indentMore as en,deleteGroupBackward as tn}from"@codemirror/commands";import{commentKeymap as on}from"@codemirror/comment";import{lineNumbers as sn}from"@codemirror/gutter";import{defaultHighlightStyle as rn}from"@codemirror/highlight";import{history as nn,historyKeymap as an}from"@codemirror/history";import{bracketMatching as cn}from"@codemirror/matchbrackets";import{EditorState as ds,EditorSelection as ln,StateEffect as ms}from"@codemirror/state";import{Annotation as us}from"@codemirror/state";import{highlightSpecialChars as pn,highlightActiveLine as dn,keymap as fs,EditorView as Jt}from"@codemirror/view";import mn from"@react-hook/intersection-observer";import{Fragment as gn,createElement as Ee,forwardRef as un,useEffect as Re,useImperativeHandle as fn,useMemo as hn,useRef as gt,useState as hs}from"react";import{useContext as Dr}from"react";var Ce=()=>{let{theme:e,id:t,mode:o}=Dr(ot);return{theme:e,themeId:t,themeMode:o}};var Gt=(e,t)=>{if(e.length!==t.length)return!1;let o=!0;for(let s=0;s<e.length;s++)if(e[s]!==t[s]){o=!1;break}return o};import{Decoration as mt,ViewPlugin as zr}from"@codemirror/view";import{HighlightStyle as Hr,tags as A}from"@codemirror/highlight";import{css as Br}from"@codemirror/lang-css";import{html as _r}from"@codemirror/lang-html";import{javascript as ts}from"@codemirror/lang-javascript";import{EditorView as jr}from"@codemirror/view";import{useCallback as Ur}from"react";var _e=(e,{line:t,column:o})=>e.line(t).from+(o!=null?o:0)-1,os=()=>jr.theme({"&":{backgroundColor:`var(--${h}-colors-surface1)`,color:`var(--${h}-syntax-color-plain)`,height:"100%"},".cm-matchingBracket, .cm-nonmatchingBracket, &.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket":{color:"inherit",backgroundColor:"rgba(128,128,128,.25)",backgroundBlendMode:"difference"},"&.cm-editor.cm-focused":{outline:"none"},".cm-activeLine":{backgroundColor:`var(--${h}-colors-surface3)`,borderRadius:`var(--${h}-border-radius)`},".cm-errorLine":{backgroundColor:`var(--${h}-colors-errorSurface)`,borderRadius:`var(--${h}-border-radius)`},".cm-content":{caretColor:`var(--${h}-colors-accent)`,padding:`0 var(--${h}-space-4)`},".cm-scroller":{fontFamily:`var(--${h}-font-mono)`,lineHeight:`var(--${h}-font-lineHeight)`},".cm-gutters":{backgroundColor:`var(--${h}-colors-surface1)`,color:`var(--${h}-colors-disabled)`,border:"none",paddingLeft:`var(--${h}-space-1)`},".cm-gutter.cm-lineNumbers":{fontSize:".6em"},".cm-lineNumbers .cm-gutterElement":{lineHeight:`var(--${h}-font-lineHeight)`,minWidth:`var(--${h}-space-5)`},".cm-content .cm-line":{paddingLeft:`var(--${h}-space-1)`},".cm-content.cm-readonly .cm-line":{paddingLeft:0}}),te=e=>`${h}-syntax-${e}`,ss=()=>["string","plain","comment","keyword","definition","punctuation","property","tag","static"].reduce((t,o)=>({...t,[`.${te(o)}`]:{color:`$syntax$color$${o}`,fontStyle:`$syntax$fontStyle$${o}`}}),{}),rs=e=>Hr.define([{tag:A.link,textDecoration:"underline"},{tag:A.emphasis,fontStyle:"italic"},{tag:A.strong,fontWeight:"bold"},{tag:A.keyword,class:te("keyword")},{tag:[A.atom,A.number,A.bool],class:te("static")},{tag:A.standard(A.tagName),class:te("tag")},{tag:A.variableName,class:te("plain")},{tag:A.function(A.variableName),class:te("definition")},{tag:[A.definition(A.function(A.variableName)),A.tagName],class:te("definition")},{tag:A.propertyName,class:te("property")},{tag:[A.literal,A.inserted],class:te(e.syntax.string?"string":"static")},{tag:A.punctuation,class:te("punctuation")},{tag:[A.comment,A.quote],class:te("comment")}]),ns=(e,t,o)=>{if(!e&&!t)return"javascript";let s=t;if(!s&&e){let r=e.lastIndexOf(".");s=e.slice(r+1)}for(let r of o)if(s===r.name||r.extensions.includes(s||""))return r.name;switch(s){case"ts":case"tsx":return"typescript";case"html":case"svelte":case"vue":return"html";case"css":case"less":case"scss":return"css";case"js":case"jsx":case"json":default:return"javascript"}},as=(e,t)=>{let o={javascript:ts({jsx:!0,typescript:!1}),typescript:ts({jsx:!0,typescript:!0}),html:_r(),css:Br()};for(let s of t)if(e===s.name)return s.language;return o[e]},dt=(...e)=>Ur(t=>e.forEach(o=>{if(!!o){if(typeof o=="function")return o(t);o.current=t}}),e);function is(e){return zr.fromClass(class{constructor(t){this.decorations=this.getDecoration(t)}update(t){}getDecoration(t){if(!e)return mt.none;let o=e.map(s=>{var a,p,d;let r=mt.line({attributes:{class:(a=s.className)!=null?a:""}}),n=mt.mark({class:(p=s.className)!=null?p:"",attributes:(d=s.elementAttributes)!=null?d:void 0}),c=_e(t.state.doc,{line:s.line,column:s.startColumn})+1;if(s.startColumn&&s.endColumn){let u=_e(t.state.doc,{line:s.line,column:s.endColumn})+1;return n.range(c,u)}return r.range(c)});return mt.set(o)}},{decorations:t=>t.decorations})}import{Decoration as ut,ViewPlugin as Vr}from"@codemirror/view";function cs(){return Wr}var Xr=ut.line({attributes:{class:"cm-errorLine"}}),Wr=Vr.fromClass(class{constructor(){this.decorations=ut.none}update(e){e.transactions.forEach(t=>{let o=t.annotation("show-error");if(o!==void 0){let s=_e(e.view.state.doc,{line:o})+1;this.decorations=ut.set([Xr.range(s)])}else t.annotation("remove-errors")&&(this.decorations=ut.none)})}},{decorations:e=>e.decorations});var ft=m({margin:"0",display:"block",fontFamily:"$font$mono",fontSize:"$font$size",color:"$syntax$color$plain",lineHeight:"$font$lineHeight"}),Zt=m(ss()),ht=m({flex:1,position:"relative",overflow:"auto",background:"$colors$surface1",".cm-scroller":{padding:"$space$4 0"},[`.${ft}`]:{padding:"$space$4 0"}}),Yt=m({margin:"0",outline:"none",height:"100%"}),ls=m({fontFamily:"$font$mono",fontSize:"0.8em",position:"absolute",right:"$space$2",bottom:"$space$2",zIndex:"$top",color:"$colors$clickable",backgroundColor:"$colors$surface2",borderRadius:"99999px",padding:"calc($space$1 / 2) $space$2",[`& + .${T}`]:{right:"calc($space$11 * 2)"}});import{highlightTree as Gr}from"@codemirror/highlight";import{createElement as Zr}from"react";var ps=({langSupport:e,highlightTheme:t,code:o=""})=>{let s=e.language.parser.parse(o),r=0,n=[],c=(a,p)=>{if(a>r){let d=o.slice(r,a);n.push(p?Zr("span",{children:d,className:p,key:`${a}${r}`}):d),r=a}};return Gr(s,t.match,(a,p,d)=>{c(a,""),c(p,d)}),r<o.length&&n.push(`
- 
- `),n};var xe=un(({code:e,filePath:t,fileType:o,onCodeUpdate:s,showLineNumbers:r=!1,showInlineErrors:n=!1,wrapContent:c=!1,editorState:a="pristine",readOnly:p=!1,showReadOnly:d=!0,decorators:u,initMode:f="lazy",id:b,extensions:g=[],extensionsKeymap:y=[],additionalLanguages:R=[]},N)=>{let F=gt(null),X=dt(F,N),E=gt(),{theme:_,themeId:B}=Ce(),[j,v]=hs(e),[$,q]=hs(f==="immediate"),S=Yr(h),{listen:k}=x(),I=gt([]),M=gt([]),{isIntersecting:O}=mn(F,{rootMargin:"600px 0px",threshold:.2});fn(N,()=>({getCodemirror:()=>E.current})),Re(()=>{(f==="lazy"||f==="user-visible")&&O&&q(!0)},[f,O]);let G=ns(t,o,R),$e=as(G,R),Me=rs(_),Le=ps({langSupport:$e,highlightTheme:Me,code:e}),he=hn(()=>u&&u.sort((L,D)=>L.line-D.line),[u]);Re(()=>{if(!F.current||!$)return;let L=setTimeout(function(){let U=[{key:"Tab",run:Z=>{var ie;en(Z);let K=y.find(({key:de})=>de==="Tab");return(ie=K==null?void 0:K.run(Z))!=null?ie:!0}},{key:"Shift-Tab",run:({state:Z,dispatch:K})=>{var de;Qr({state:Z,dispatch:K});let ie=y.find(({key:qe})=>qe==="Shift-Tab");return(de=ie==null?void 0:ie.run(oe))!=null?de:!0}},{key:"Escape",run:()=>(p||F.current&&F.current.focus(),!0)},{key:"mod-Backspace",run:tn}],w=[pn(),nn(),Jr(),...g,fs.of([...qr,...Kr,...an,...on,...U,...y]),$e,rn.fallback,os(),Me];p?(w.push(ds.readOnly.of(!0)),w.push(Jt.editable.of(!1))):(w.push(cn()),w.push(dn())),he&&w.push(is(he)),c&&w.push(Jt.lineWrapping),r&&w.push(sn()),n&&w.push(cs());let ge=ds.create({doc:e,extensions:w}),be=F.current,Fe=be.querySelector(".sp-pre-placeholder");Fe&&be.removeChild(Fe);let oe=new Jt({state:ge,parent:be,dispatch:Z=>{if(oe.update([Z]),Z.docChanged){let K=Z.newDoc.sliceString(0,Z.newDoc.length);v(K),s==null||s(K)}}});oe.contentDOM.setAttribute("data-gramm","false"),oe.contentDOM.setAttribute("aria-label",t?`Code Editor for ${ve(t)}`:"Code Editor"),p?oe.contentDOM.classList.add("cm-readonly"):oe.contentDOM.setAttribute("tabIndex","-1"),E.current=oe},0);return()=>{var D;(D=E.current)==null||D.destroy(),clearTimeout(L)}},[$,r,c,B,he,p]),Re(function(){let D=E.current,U=!Gt(g,I.current)||!Gt(y,M.current);D&&U&&(D.dispatch({effects:ms.appendConfig.of(g)}),D.dispatch({effects:ms.appendConfig.of(fs.of([...y]))}),I.current=g,M.current=y)},[g,y]),Re(()=>{E.current&&a==="dirty"&&window.matchMedia("(min-width: 768px)").matches&&E.current.contentDOM.focus()},[]),Re(()=>{if(E.current&&e!==j){let L=E.current,D=L.state.selection.ranges.some(({to:w,from:ge})=>w>e.length||ge>e.length)?ln.cursor(e.length):L.state.selection,U={from:0,to:L.state.doc.length,insert:e};L.dispatch({changes:U,selection:D})}},[e]),Re(function(){if(!n)return;let D=k(U=>{let w=E.current;U.type==="success"?w==null||w.dispatch({annotations:[new us("remove-errors",!0)]}):U.type==="action"&&U.action==="show-error"&&U.line&&(w==null||w.dispatch({annotations:[new us("show-error",U.line)]}))});return()=>D()},[k,n]);let Je=L=>{L.key==="Enter"&&E.current&&(L.preventDefault(),E.current.contentDOM.focus())},we=()=>{let L=4;return r&&(L+=6),p||(L+=1),`var(--${h}-space-${L})`};return p?Ee(gn,null,Ee("pre",{ref:X,className:l(S("cm",a,G),Yt,Zt),translate:"no"},Ee("code",{className:l(S("pre-placeholder"),ft),style:{marginLeft:we()}},Le)),p&&d&&Ee("span",{className:l(S("read-only"),ls),...{}},"Read-only")):Ee("div",{ref:X,"aria-autocomplete":"list","aria-label":t?`Code Editor for ${ve(t)}`:"Code Editor","aria-multiline":"true",className:l(S("cm",a,G),Yt,Zt),onKeyDown:Je,role:"textbox",tabIndex:0,translate:"no",suppressHydrationWarning:!0},Ee("pre",{className:l(S("pre-placeholder"),ft),style:{marginLeft:we()}},Le))});var gs=yn(({style:e,showTabs:t,showLineNumbers:o=!1,showInlineErrors:s=!1,showRunButton:r=!0,wrapContent:n=!1,closableTabs:c=!1,initMode:a,extensions:p,extensionsKeymap:d,id:u,readOnly:f,showReadOnly:b,additionalLanguages:g},y)=>{let{sandpack:R}=x(),{code:N,updateCode:F,readOnly:X}=it(),{activeFile:E,status:_,editorState:B}=R,j=t!=null?t:R.visibleFiles.length>1,v=bn(h),$=q=>{F(q)};return je(Y,{className:v("editor"),style:e},j&&je(lt,{closableTabs:c}),je("div",{className:l(v("code-editor"),ht)},je(xe,{key:E,ref:y,additionalLanguages:g,code:N,editorState:B,extensions:p,extensionsKeymap:d,filePath:E,id:u,initMode:a||R.initMode,onCodeUpdate:$,readOnly:f||X,showInlineErrors:s,showLineNumbers:o,showReadOnly:b,wrapContent:n}),r&&_==="idle"?je(pt,null):null))});import{useClasser as Sn}from"@code-hike/classer";import{createElement as Ue,forwardRef as vn}from"react";var bs=vn(({showTabs:e,showLineNumbers:t,decorators:o,code:s,initMode:r,wrapContent:n,...c},a)=>{let{sandpack:p}=x(),{code:d}=it(),u=Sn(h),f=e!=null?e:p.visibleFiles.length>1;return Ue(Y,{...c},f?Ue(lt,null):null,Ue("div",{className:l(u("code-editor"),ht)},Ue(xe,{ref:a,code:s!=null?s:d,decorators:o,filePath:p.activeFile,initMode:r||p.initMode,showLineNumbers:t,showReadOnly:!1,wrapContent:n,readOnly:!0})),p.status==="idle"?Ue(pt,null):null)});import{createElement as vs}from"react";import{createElement as Kt}from"react";import{createElement as qt,useState as xn}from"react";import{useClasser as kn}from"@code-hike/classer";import{createElement as ze}from"react";var Cn=m({borderRadius:"0",width:"100%",padding:0,marginBottom:"$space$2",span:{textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"},svg:{marginRight:"$space$1"}}),bt=({selectFile:e,path:t,active:o,onClick:s,depth:r,isDirOpen:n})=>{let c=kn(h),a=u=>{e&&e(t),s==null||s(u)},p=t.split("/").filter(Boolean).pop(),d=()=>e?ze(Oo,null):n?ze(Po,null):ze(Io,null);return ze("button",{className:l(c("button","explorer"),T,Cn),"data-active":o,onClick:a,style:{paddingLeft:18*r+"px"},title:p,type:"button"},d(),ze("span",null,p))};var ys=({prefixedPath:e,files:t,selectFile:o,activeFile:s,depth:r,autoHiddenFiles:n,visibleFiles:c})=>{let[a,p]=xn(!0);return qt("div",{key:e},qt(bt,{depth:r,isDirOpen:a,onClick:()=>p(u=>!u),path:e+"/"}),a&&qt(yt,{activeFile:s,autoHiddenFiles:n,depth:r+1,files:t,prefixedPath:e,selectFile:o,visibleFiles:c}))};var Ss=({autoHiddenFiles:e,visibleFiles:t,files:o,prefixedPath:s})=>{let r=t.length>0,n=e&&!r,c=e&&!!r,a=Object.keys(o).filter(u=>{var b;let f=u.startsWith(s);return c?f&&t.includes(u):n?f&&!((b=o[u])==null?void 0:b.hidden):f}).map(u=>u.substring(s.length)),p=new Set(a.filter(u=>u.includes("/")).map(u=>`${s}${u.split("/")[0]}/`)),d=a.filter(u=>!u.includes("/")).map(u=>`${s}${u}`);return{directories:Array.from(p),modules:d}};var yt=({depth:e=0,activeFile:t,selectFile:o,prefixedPath:s,files:r,autoHiddenFiles:n,visibleFiles:c})=>{let{directories:a,modules:p}=Ss({visibleFiles:c,autoHiddenFiles:n,prefixedPath:s,files:r});return Kt("div",null,a.map(d=>Kt(ys,{key:d,activeFile:t,autoHiddenFiles:n,depth:e,files:r,prefixedPath:d,selectFile:o,visibleFiles:c})),p.map(d=>Kt(bt,{key:d,active:t===d,depth:e,path:d,selectFile:o})))};var Rn=m({padding:"$space$3",overflow:"auto",height:"100%"}),wp=({className:e,autoHiddenFiles:t=!1,...o})=>{let{sandpack:s}=x();return vs("div",{className:l(me,Rn,`${h}-file-explorer`,e),...o},vs(yt,{activeFile:s.activeFile,autoHiddenFiles:t,files:s.files,prefixedPath:"/",selectFile:s.openFile,visibleFiles:s.visibleFilesFromProps}))};import{useClasser as En}from"@code-hike/classer";import{createElement as le,useEffect as $n,useState as St}from"react";var ks=e=>{let t=e.match(/(https?:\/\/.*?)\//);return t&&t[1]?[t[1],e.replace(t[1],"")]:[e,"/"]};var Tn=m({display:"flex",alignItems:"center",height:"$layout$headerHeight",borderBottom:"1px solid $colors$surface2",padding:"$space$3 $space$2",background:"$colors$surface1"}),Nn=m({backgroundColor:"$colors$surface2",color:"$colors$clickable",padding:"$space$1 $space$3",borderRadius:"99999px",border:"1px solid $colors$surface2",height:"24px",lineHeight:"24px",fontSize:"inherit",outline:"none",flex:1,marginLeft:"$space$4",width:"0",transition:"background $transitions$default","&:hover":{backgroundColor:"$colors$surface3"},"&:focus":{backgroundColor:"$surface1",border:"1px solid $colors$accent",color:"$colors$base"}}),Cs=({clientId:e,onURLChange:t,className:o,...s})=>{var j;let[r,n]=St(""),{sandpack:c,dispatch:a,listen:p}=x(),[d,u]=St((j=c.startRoute)!=null?j:"/"),[f,b]=St(!1),[g,y]=St(!1),R=En(h);$n(()=>{let v=p($=>{if($.type==="urlchange"){let{url:q,back:S,forward:k}=$,[I,M]=ks(q);n(I),u(M),b(S),y(k)}},e);return()=>v()},[]);let N=v=>{let $=v.target.value.startsWith("/")?v.target.value:`/${v.target.value}`;u($)},F=v=>{v.code==="Enter"&&(v.preventDefault(),v.stopPropagation(),typeof t=="function"&&t(r+v.currentTarget.value))},X=()=>{a({type:"refresh"})},E=()=>{a({type:"urlback"})},_=()=>{a({type:"urlforward"})},B=l(R("button","icon"),T,Ko,m({minWidth:"$space$6",justifyContent:"center"}));return le("div",{className:l(R("navigator"),Tn,o),...s},le("button",{"aria-label":"Go back one page",className:B,disabled:!f,onClick:E,type:"button"},le(Lo,null)),le("button",{"aria-label":"Go forward one page",className:B,disabled:!g,onClick:_,type:"button"},le(wo,null)),le("button",{"aria-label":"Refresh page",className:B,onClick:X,type:"button"},le(Qe,null)),le("input",{"aria-label":"Current Sandpack URL",className:l(R("input"),Nn),name:"Current Sandpack URL",onChange:N,onKeyDown:F,type:"text",value:d}))};import{useClasser as Gn}from"@code-hike/classer";import{Fragment as Kn,createElement as re,forwardRef as qn,useEffect as ea,useImperativeHandle as ta,useState as Qn}from"react";import{useEffect as Mn}from"react";var xs=()=>{var o;let{sandpack:e}=x(),{error:t}=e;return Mn(()=>{e.errorScreenRegisteredRef.current=!0},[]),(o=t==null?void 0:t.message)!=null?o:null};import{useEffect as Es,useState as Ln}from"react";var Qt=200,Rs=(e,t)=>{let{sandpack:o,listen:s}=x(),[r,n]=Ln("LOADING");return Es(()=>{o.loadingScreenRegisteredRef.current=!0;let c=s(a=>{a.type==="start"&&a.firstLoad===!0&&n("LOADING"),a.type==="done"&&n(p=>p==="LOADING"?"PRE_FADING":"HIDDEN")},e);return()=>{c()}},[e,o.status==="idle"]),Es(()=>{let c;return r==="PRE_FADING"&&!t?n("FADING"):r==="FADING"&&(c=setTimeout(()=>n("HIDDEN"),Qt)),()=>{clearTimeout(c)}},[r,t]),o.status==="timeout"?"TIMEOUT":o.status!=="running"?"HIDDEN":r};var Ts=e=>{let{dispatch:t}=x();return{refresh:()=>t({type:"refresh"},e),back:()=>t({type:"urlback"},e),forward:()=>t({type:"urlforward"},e)}};function wn(e){var r,n;let{activeFile:t,bundlerState:o}=e;if(o==null)return null;let s=o.transpiledModules[t+":"];return(n=(r=s==null?void 0:s.source)==null?void 0:r.compiledCode)!=null?n:null}var Ns=()=>{let{sandpack:e}=x();return e.status!=="running"?null:wn(e)};import{useEffect as Fn,useRef as $s}from"react";var vt=()=>{let{sandpack:e,listen:t,dispatch:o}=x(),s=$s(null),r=$s(Ae());return Fn(()=>{let c=s.current,a=r.current;return c!==null&&e.registerBundler(c,a),()=>e.unregisterBundler(a)},[]),{sandpack:e,getClient:()=>e.clients[r.current]||null,clientId:r.current,iframe:s,listen:c=>t(c,r.current),dispatch:c=>o(c,r.current)}};import{useClasser as An}from"@code-hike/classer";import{createElement as Ms}from"react";var kt=({children:e,className:t,...o})=>{let s=xs(),r=An(h);return!s&&!e?null:Ms("div",{className:l(r("overlay","error"),He,ct,t),translate:"no",...o},Ms("div",{className:l(r("error-message"),ke)},s||e))};import{useClasser as Vn}from"@code-hike/classer";import{createElement as Te}from"react";import{useClasser as _n}from"@code-hike/classer";import{createElement as se}from"react";import{useClasser as Bn}from"@code-hike/classer";import{createElement as Fs}from"react";import Pn from"lz-string";import{createElement as Ct,useEffect as ws,useRef as Dn,useState as Hn}from"react";var In=e=>Pn.compressToBase64(JSON.stringify(e)).replace(/\+/g,"-").replace(/\//g,"_").replace(/=+$/,""),Ls="https://codesandbox.io/api/v1/sandboxes/define",On=(e,t)=>{let o=Object.keys(e).reduce((s,r)=>{let n=r.replace("/",""),c={content:e[r].code,isBinary:!1};return{...s,[n]:c}},{});return In({files:o,...t?{template:t}:null})},eo=({children:e,...t})=>{var c,a,p;let{sandpack:o}=x(),s=Dn(null),[r,n]=Hn();return ws(function(){let u=setTimeout(()=>{let f=On(o.files,o.environment),b=new URLSearchParams({parameters:f,query:new URLSearchParams({file:o.activeFile,utm_medium:"sandpack"}).toString()});n(b)},600);return()=>{clearTimeout(u)}},[o.activeFile,o.environment,o.files]),ws(function(){o.openInCSBRegisteredRef.current=!0},[]),((p=(a=(c=r==null?void 0:r.get)==null?void 0:c.call(r,"parameters"))==null?void 0:a.length)!=null?p:0)>1500?Ct("button",{onClick:()=>{var d;return(d=s.current)==null?void 0:d.submit()},title:"Open in CodeSandbox",...t},Ct("form",{ref:s,action:Ls,method:"POST",style:{visibility:"hidden"},target:"_blank"},Array.from(r,([d,u])=>Ct("input",{key:d,name:d,type:"hidden",value:u}))),e):Ct("a",{href:`${Ls}?${r==null?void 0:r.toString()}`,rel:"noreferrer noopener",target:"_blank",title:"Open in CodeSandbox",...t},e)};var Ve=()=>{let e=Bn(h);return Fs(eo,{className:l(e("button","icon-standalone"),T,ee,z)},Fs(Ao,null))};var to=m({transform:"translate(-4px, 9px) scale(0.13, 0.13)","*":{position:"absolute",width:"96px",height:"96px"}}),jn=m({position:"absolute",right:"$space$2",bottom:"$space$2",zIndex:"$top",width:"32px",height:"32px",borderRadius:"$border$radius",[`.${to}`]:{display:"flex"},[`.${T}`]:{display:"none"},[`&:hover .${T}`]:{display:"flex"},[`&:hover .${to}`]:{display:"none"}}),Un=tt({"0%":{transform:"rotateX(-25.5deg) rotateY(45deg)"},"100%":{transform:"rotateX(-25.5deg) rotateY(405deg)"}}),zn=m({animation:`${Un} 1s linear infinite`,animationFillMode:"forwards",transformStyle:"preserve-3d",transform:"rotateX(-25.5deg) rotateY(45deg)","*":{border:"10px solid $colors$clickable",borderRadius:"8px",background:"$colors$surface1"},".top":{transform:"rotateX(90deg) translateZ(44px)",transformOrigin:"50% 50%"},".bottom":{transform:"rotateX(-90deg) translateZ(44px)",transformOrigin:"50% 50%"},".front":{transform:"rotateY(0deg) translateZ(44px)",transformOrigin:"50% 50%"},".back":{transform:"rotateY(-180deg) translateZ(44px)",transformOrigin:"50% 50%"},".left":{transform:"rotateY(-90deg) translateZ(44px)",transformOrigin:"50% 50%"},".right":{transform:"rotateY(90deg) translateZ(44px)",transformOrigin:"50% 50%"}}),xt=({className:e,showOpenInCodeSandbox:t,...o})=>{let s=_n(h);return se("div",{className:l(s("cube-wrapper"),jn,e),title:"Open in CodeSandbox",...o},t&&se(Ve,null),se("div",{className:l(s("cube"),to)},se("div",{className:l(s("sides"),zn)},se("div",{className:"top"}),se("div",{className:"right"}),se("div",{className:"bottom"}),se("div",{className:"left"}),se("div",{className:"front"}),se("div",{className:"back"}))))};var Xn=m({backgroundColor:"$colors$surface1"}),Rt=({clientId:e,loading:t,className:o,style:s,showOpenInCodeSandbox:r,...n})=>{let c=Rs(e,t),a=Vn(h);if(c==="HIDDEN")return null;if(c==="TIMEOUT")return Te("div",{className:l(a("overlay","error"),He,ct,o),...n},Te("div",{className:l(a("error-message"),ke)},"Unable to establish connection with the sandpack bundler. Make sure you are online or try again later. If the problem persists, please report it via"," ",Te("a",{className:l(a("error-message"),ke),href:"mailto:hello@codesandbox.io?subject=Sandpack Timeout Error"},"email")," ","or submit an issue on"," ",Te("a",{className:l(a("error-message"),ke),href:"https://github.com/codesandbox/sandpack/issues",rel:"noreferrer noopener",target:"_blank"},"GitHub.")));let p=c==="LOADING"||c==="PRE_FADING";return Te("div",{className:l(a("overlay","loading"),He,Xn,o),style:{...s,opacity:p?1:0,transition:`opacity ${Qt}ms ease-out`},...n},Te(xt,{showOpenInCodeSandbox:r}))};import{useClasser as Wn}from"@code-hike/classer";import{createElement as Ps}from"react";var As=({clientId:e})=>{let{refresh:t}=Ts(e),o=Wn(h);return Ps("button",{className:l(o("button","icon-standalone"),T,ee,z),onClick:t,title:"Refresh Sandpack",type:"button"},Ps(Qe,null))};var Zn=m({flex:1,display:"flex",flexDirection:"column",background:"white",overflow:"auto",position:"relative"}),Yn=m({border:"0",outline:"0",width:"100%",height:"100%",minHeight:"160px",maxHeight:"2000px",flex:1}),Jn=m({display:"flex",position:"absolute",bottom:"$space$2",right:"$space$2",zIndex:"$overlay","> *":{marginLeft:"$space$2"}}),Is=qn(({showNavigator:e=!1,showRefreshButton:t=!0,showOpenInCodeSandbox:o=!0,showSandpackErrorOverlay:s=!0,actionsChildren:r=re(Kn,null),children:n,className:c,...a},p)=>{let{sandpack:d,listen:u,iframe:f,getClient:b,clientId:g}=vt(),[y,R]=Qn(null),{status:N,errorScreenRegisteredRef:F,openInCSBRegisteredRef:X,loadingScreenRegisteredRef:E}=d,_=Gn(h);X.current=!0,F.current=!0,E.current=!0,ea(()=>u(v=>{v.type==="resize"&&R(v.height)}),[]),ta(p,()=>({clientId:g,getClient:b}),[b,g]);let B=j=>{!f.current||(f.current.src=j)};return re(Y,{className:l(`${h}-preview`,c),...a},e&&re(Cs,{clientId:g,onURLChange:B}),re("div",{className:l(_("preview-container"),Zn)},re("iframe",{ref:f,className:l(_("preview-iframe"),Yn),style:{height:y||void 0},title:"Sandpack Preview"}),s&&re(kt,null),re("div",{className:l(_("preview-actions"),Jn)},r,!e&&t&&N==="running"&&re(As,{clientId:g}),o&&re(Ve,null)),re(Rt,{clientId:g,showOpenInCodeSandbox:o}),n))});import{useClasser as oa}from"@code-hike/classer";import{createElement as Xe,useEffect as na,useRef as ra}from"react";var sa=m({display:"flex",flexDirection:"column",width:"100%",position:"relative",overflow:"auto",minHeight:"160px",flex:1}),bm=({className:e,...t})=>{let{sandpack:o}=x(),s=Ns(),r=oa(h),n=ra(null);return na(()=>{let c=n.current;return c&&o.registerBundler(c,"hidden"),()=>{o.unregisterBundler("hidden")}},[]),Xe("div",{className:l(r("transpiled-code"),me,sa,e),...t},Xe(bs,{code:s!=null?s:"",initMode:o.initMode,...t}),Xe("iframe",{ref:n,style:{display:"none"},title:"transpiled sandpack code"}),Xe(kt,null),Xe(Rt,{clientId:"hidden",showOpenInCodeSandbox:!1}))};import{useClasser as aa}from"@code-hike/classer";import{createElement as Os,useEffect as oo,useRef as ca,useState as la}from"react";var ia=m({height:"$layout$height",width:"100%"}),Em=({clientId:e,theme:t,className:o,...s})=>{let{listen:r,sandpack:n}=x(),{themeMode:c}=Ce(),a=aa(h),p=ca(),[d,u]=la(null);return oo(()=>{import("react-devtools-inline/frontend").then(f=>{p.current=f})},[]),oo(()=>r(b=>{var g;if(b.type==="activate-react-devtools"){let y=e?n.clients[e]:Object.values(n.clients)[0],R=(g=y==null?void 0:y.iframe)==null?void 0:g.contentWindow;p.current&&R&&u(p.current.initialize(R))}}),[p,e,r,n.clients]),oo(()=>{n.registerReactDevTools("legacy")},[]),d?Os("div",{className:l(a("devtools"),ia,o),...s},Os(d,{browserTheme:t!=null?t:c})):null};import{Fragment as _a,createElement as V,useEffect as Qs,useState as Ba}from"react";import{useClasser as pa}from"@code-hike/classer";import{createElement as ua,forwardRef as ma}from"react";var da=m({border:"1px solid $colors$surface2",display:"flex",flexWrap:"wrap",alignItems:"stretch",borderRadius:"$border$radius",overflow:"hidden",position:"relative",backgroundColor:"$colors$surface2",gap:1,[`> .${me}`]:{flexGrow:1,flexShrink:1,flexBasis:"0",minWidth:"350px",height:"$layout$height","@media print":{height:"auto",display:"block"},"@media screen and (max-width: 768px)":{height:"auto",minWidth:"100% !important;"}},[`> .${h}-file-explorer`]:{flex:.2,minWidth:200}}),Ds=ma(({children:e,className:t,...o},s)=>{let{sandpack:r}=x(),n=pa(h),c=dt(r.lazyAnchorRef,s);return ua("div",{ref:c,className:l(n("layout"),da,t),...o},e)});import{createElement as pe}from"react";var fa=m({justifyContent:"space-between",borderBottom:"1px solid $colors$surface2",padding:"$space$3 $space$2",fontFamily:"$font$mono",maxHeight:"$layout$headerHeight",overflowX:"auto",whiteSpace:"nowrap"}),so=m({display:"flex",flexDirection:"row",alignItems:"center",gap:"$space$2"}),Hs=({status:e,suiteOnly:t,setSuiteOnly:o,setVerbose:s,verbose:r,watchMode:n,setWatchMode:c,showSuitesOnly:a})=>{let p=l(T,z,m({padding:"$space$1 $space$3"}));return pe("div",{className:l(fa,so)},pe("div",{className:l(so)},pe("p",{className:l(m({lineHeight:1,margin:0,color:"$colors$base",fontSize:"$font$size",display:"flex",alignItems:"center",gap:"$space$2"}))},pe(Se,null),"Tests")),pe("div",{className:l(so)},a&&pe("button",{className:p,"data-active":t,disabled:e==="initialising",onClick:o},"Suite only"),pe("button",{className:p,"data-active":r,disabled:e==="initialising",onClick:s},"Verbose"),pe("button",{className:p,"data-active":n,disabled:e==="initialising",onClick:c},"Watch")))};import{useClasser as ha}from"@code-hike/classer";import{createElement as _s}from"react";var Bs=({onClick:e})=>{let t=ha(h);return _s("button",{className:l(t("button","icon-standalone"),T,ee,z),onClick:e,title:"Run tests",type:"button"},_s(Ke,null))};import{Fragment as Aa,createElement as P}from"react";import{Fragment as xa,createElement as Ge}from"react";import ue from"react";var js=e=>({"--test-pass":e?"#18df16":"#15c213","--test-fail":e?"#df162b":"#c21325","--test-skip":e?"#eace2b":"#c2a813","--test-run":e?"#eace2b":"#c2a813","--test-title":e?"#3fbabe":"#256c6f"}),Et=m({variants:{status:{pass:{color:"var(--test-pass)"},fail:{color:"var(--test-fail)"},skip:{color:"var(--test-skip)"},title:{color:"var(--test-title)"}}}}),ne=Et({status:"pass"}),H=Et({status:"fail"}),Tt=Et({status:"skip"}),Us=Et({status:"title"}),ro=m({variants:{status:{pass:{background:"var(--test-pass)",color:"$colors$surface1"},fail:{background:"var(--test-fail)",color:"$colors$surface1"},run:{background:"var(--test-run)",color:"$colors$surface1"}}}}),zs=ro({status:"run"}),Vs=ro({status:"pass"}),no=ro({status:"fail"});var ga=m({marginLeft:"$space$4"}),ba=m({marginBottom:"$space$2",color:"$colors$clickable"}),ya=m({marginBottom:"$space$2",color:"$colors$hover"}),Sa=m({marginLeft:"$space$2"}),ao=m({marginRight:"$space$2"}),Nt=({tests:e,style:t})=>ue.createElement("div",{className:l(ga)},e.map(o=>ue.createElement("div",{key:o.name,className:l(ba)},o.status==="pass"&&ue.createElement("span",{className:l(ne,ao)},"\u2713"),o.status==="fail"&&ue.createElement("span",{className:l(H,ao)},"\u2715"),o.status==="idle"&&ue.createElement("span",{className:l(Tt,ao)},"\u25CB"),ue.createElement("span",{className:l(ya)},o.name),o.duration!==void 0&&ue.createElement("span",{className:l(Sa)},"(",o.duration," ms)"))));import va from"clean-set";var Xs=e=>$t(e).filter(t=>t.status==="fail"),$t=e=>Object.values(e.tests).concat(...Object.values(e.describes).map($t)),Ws=e=>e.map(Mt).reduce((t,o)=>({pass:t.pass+o.pass,fail:t.fail+o.fail,skip:t.skip+o.skip,total:t.total+o.total}),{pass:0,skip:0,fail:0,total:0}),Mt=e=>$t(e).reduce((t,o)=>({pass:o.status==="pass"?t.pass+1:t.pass,fail:o.status==="fail"?t.fail+1:t.fail,skip:o.status==="idle"||o.status==="running"?t.skip+1:t.skip,total:t.total+1}),{pass:0,fail:0,skip:0,total:0}),Gs=e=>e.filter(t=>Object.values(t.describes).length>0||Object.values(t.tests).length>0).map(Mt).reduce((t,o)=>({pass:t.pass+(o.fail===0?1:0),fail:t.fail+(o.fail>0?1:0),total:t.total+1}),{pass:0,fail:0,total:0}),Zs=e=>Ne(e,$t).reduce((t,o)=>t+(o.duration||0),0),Lt=e=>Object.values(e.describes).length===0&&Object.values(e.tests).length===0,We=e=>{let t=e.length-1,o=e.slice(0,t),s=e[t];return[o,s]},Ne=(e,t)=>e.map(t).reduce((o,s)=>o.concat(s),[]),ae=(e,t)=>o=>va(o,e,t);var ka=m({color:"$colors$hover",marginBottom:"$space$2"}),Ca=m({marginLeft:"$space$4"}),io=({describes:e})=>Ge(xa,null,e.map(t=>{if(Lt(t))return null;let o=Object.values(t.tests),s=Object.values(t.describes);return Ge("div",{key:t.name,className:l(Ca)},Ge("div",{className:l(ka)},t.name),Ge(Nt,{tests:o}),Ge(io,{describes:s}))}));import{createElement as Ta}from"react";var Ra=m({color:"$colors$hover",fontSize:"$font$size",padding:"$space$2",whiteSpace:"pre-wrap"}),co=({error:e,path:t})=>Ta("div",{className:l(Ra),dangerouslySetInnerHTML:{__html:Ea(e,t)}}),wt=e=>e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;"),Ea=(e,t)=>{let o="";if(e.matcherResult?o=`<span>${wt(e.message).replace(/(expected)/m,`<span class="${ne}">$1</span>`).replace(/(received)/m,`<span class="${H}">$1</span>`).replace(/(Difference:)/m,"<span>$1</span>").replace(/(Expected:)(.*)/m,`<span>$1</span><span class="${ne}">$2</span>`).replace(/(Received:)(.*)/m,`<span>$1</span><span class="${H}">$2</span>`).replace(/^(-.*)/gm,`<span class="${H}">$1</span>`).replace(/^(\+.*)/gm,`<span class="${ne}">$1</span>`)}</span>`:o=wt(e.message),e.mappedErrors&&e.mappedErrors[0]&&e.mappedErrors[0].fileName.endsWith(t)&&e.mappedErrors[0]._originalScriptCode){let r=e.mappedErrors[0]._originalScriptCode||[],n=Math.max(...r.map(a=>(a.lineNumber+"").length))+2,c=Array.from({length:n}).map(()=>" ");o+="<br />",o+="<br />",o+="<div>",r.filter(a=>a.content.trim()).forEach(a=>{let p=(a.lineNumber+"").length,d=[...c];d.length-=p,a.highlight&&(d.length-=2);let u=a.content.indexOf(".to"),f=Array.from({length:c.length+u-(n-1)},()=>" "),b=wt(a.content).replace(/(describe|test|it)(\()(&#039;|&quot;|`)(.*)(&#039;|&quot;|`)/m,`<span>$1$2$3</span><span class="${Us}">$4</span><span>$5</span>`).replace(/(expect\()(.*)(\)\..*)(to[\w\d]*)(\()(.*)(\))/m,`<span>$1</span><span class="${H}">$2</span><span>$3</span><span style="text-decoration: underline; font-weight: 900">$4</span><span>$5</span><span class="${ne}">$6</span><span>$7</span>`);o+=`<div ${a.highlight?'style="font-weight:200;"':""}>`+(a.highlight?`<span class="${H}">></span> `:"")+d.join("")+wt(""+a.lineNumber)+" | "+b+"</div>"+(a.highlight?"<div>"+c.join("")+" | "+f.join("")+`<span class="${H}">^</span></div>`:"")}),o+="</div>"}return o.replace(/(?:\r\n|\r|\n)/g,"<br />")};var Na=m({display:"flex",flexDirection:"row",alignItems:"center",marginBottom:"$space$2"}),lo=m({marginBottom:"$space$2"}),$a=m({fontWeight:"bold"}),Ft=m({borderRadius:"calc($border$radius / 2)"}),Ma=m({padding:"$space$1 $space$2",fontFamily:"$font$mono",textTransform:"uppercase",marginRight:"$space$2"}),La=m({fontFamily:"$font$mono",cursor:"pointer",display:"inline-block"}),wa=m({color:"$colors$clickable",textDecorationStyle:"dotted",textDecorationLine:"underline"}),Fa=m({color:"$colors$hover",fontWeight:"bold",textDecorationStyle:"dotted",textDecorationLine:"underline"}),Ys=({specs:e,openSpec:t,status:o,verbose:s})=>P(Aa,null,e.map(r=>{if(r.error)return P("div",{key:r.name,className:l(lo)},P(At,{className:l(Ft,no)},"Error"),P(Js,{onClick:()=>t(r.name),path:r.name}),P(co,{error:r.error,path:r.name}));if(Lt(r))return null;let n=Object.values(r.tests),c=Object.values(r.describes),a=Mt(r);return P("div",{key:r.name,className:l(lo)},P("div",{className:l(Na)},o==="complete"?a.fail>0?P(At,{className:l(Ft,no)},"Fail"):P(At,{className:l(Ft,Vs)},"Pass"):P(At,{className:l(Ft,zs)},"Run"),P(Js,{onClick:()=>t(r.name),path:r.name})),s&&P(Nt,{tests:n}),s&&P(io,{describes:c}),Xs(r).map(p=>P("div",{key:`failing-${p.name}`,className:l(lo)},P("div",{className:l($a,H)},"\u25CF ",p.blocks.join(" \u203A ")," \u203A ",p.name),p.errors.map(d=>P(co,{key:`failing-${p.name}-error`,error:d,path:p.path})))))})),At=({children:e,className:t})=>P("span",{className:l(Ma,t)},e),Js=({onClick:e,path:t})=>{let o=t.split("/"),s=o.slice(0,o.length-1).join("/")+"/",r=o[o.length-1];return P("button",{className:l(T,La),onClick:e},P("span",{className:l(wa)},s),P("span",{className:l(Fa)},r))};import{createElement as W}from"react";var qs=m({marginBottom:"$space$2"}),po=m({fontWeight:"bold",color:"$colors$hover",whiteSpace:"pre-wrap"}),Pa=m({fontWeight:"bold",color:"$colors$clickable"}),Ks=({suites:e,tests:t,duration:o})=>{let s="Test suites: ",r=n=>{let c=s.length-n.length,a=Array.from({length:c},()=>" ").join("");return n+a};return W("div",{className:l(Pa)},W("div",{className:l(qs)},W("span",{className:l(po)},s),e.fail>0&&W("span",{className:l(H)},e.fail," failed,"," "),e.pass>0&&W("span",{className:l(ne)},e.pass," passed,"," "),W("span",null,e.total," total")),W("div",{className:l(qs)},W("span",{className:l(po)},r("Tests:")),t.fail>0&&W("span",{className:l(H)},t.fail," failed,"," "),t.skip>0&&W("span",{className:l(Tt)},t.skip," skipped,"," "),t.pass>0&&W("span",{className:l(ne)},t.pass," passed,"," "),W("span",null,t.total," total")),W("div",{className:l(po)},r("Time:"),o/1e3,"s"))};var Ia=m({display:"flex",position:"absolute",bottom:"$space$2",right:"$space$2",zIndex:"$overlay","> *":{marginLeft:"$space$2"}}),Oa={specs:{},status:"initialising",verbose:!1,watchMode:!0,suiteOnly:!1,specsCount:0},mo=({verbose:e=!1,watchMode:t=!0,style:o,className:s,onComplete:r,actionsChildren:n,...c})=>{let a=Ce(),{getClient:p,iframe:d,listen:u,sandpack:f}=vt(),[b,g]=Ba({...Oa,verbose:e,watchMode:t});Qs(()=>{let v=[],$="";return u(S=>{if(!(b.suiteOnly&&("path"in S&&S.path!==f.activeFile||"test"in S&&"path"in S.test&&S.test.path!==f.activeFile))){if(S.type==="action"&&S.action==="clear-errors"&&S.source==="jest"){$=S.path;return}if(S.type==="test"){if(S.event==="initialize_tests")return v=[],$="",b.watchMode?y():g(k=>({...k,status:"idle",specs:{}}));if(S.event==="test_count")return g(k=>({...k,specsCount:S.count}));if(S.event==="total_test_start")return v=[],g(k=>({...k,status:"running"}));if(S.event==="total_test_end")return g(k=>(r!==void 0&&r(k.specs),{...k,status:"complete"}));if(S.event==="add_file")return g(ae(["specs",S.path],{describes:{},tests:{},name:S.path}));if(S.event==="remove_file")return g(k=>{let I=Object.entries(k.specs).reduce((M,[O,G])=>O===S.path?M:{...M,[O]:G},{});return{...k,specs:I}});if(S.event==="file_error")return g(ae(["specs",S.path,"error"],S.error));if(S.event==="describe_start"){v.push(S.blockName);let[k,I]=We(v),M=$;return I===void 0?void 0:g(ae(["specs",M,"describes",...Ne(k,O=>[O,"describes"]),I],{name:S.blockName,tests:{},describes:{}}))}if(S.event==="describe_end"){v.pop();return}if(S.event==="add_test"){let[k,I]=We(v),M={status:"idle",errors:[],name:S.testName,blocks:[...v],path:S.path};return g(I===void 0?ae(["specs",S.path,"tests",S.testName],M):ae(["specs",S.path,"describes",...Ne(k,O=>[O,"describes"]),I,"tests",S.testName],M))}if(S.event==="test_start"){let{test:k}=S,[I,M]=We(k.blocks),O={status:"running",name:k.name,blocks:k.blocks,path:k.path,errors:[]};return g(M===void 0?ae(["specs",k.path,"tests",k.name],O):ae(["specs",k.path,"describes",...Ne(I,G=>[G,"describes"]),M,"tests",k.name],O))}if(S.event==="test_end"){let{test:k}=S,[I,M]=We(k.blocks),O={status:k.status,errors:k.errors,duration:k.duration,name:k.name,blocks:k.blocks,path:k.path};return g(M===void 0?ae(["specs",k.path,"tests",k.name],O):ae(["specs",k.path,"describes",...Ne(I,G=>[G,"describes"]),M,"tests",k.name],O))}}}})},[b.suiteOnly,b.watchMode,f.activeFile]);let y=()=>{g($=>({...$,status:"running",specs:{}}));let v=p();v&&v.dispatch({type:"run-all-tests"})},R=()=>{g($=>({...$,status:"running",specs:{}}));let v=p();v&&v.dispatch({type:"run-tests",path:f.activeFile})},N=/.*\.(test|spec)\.[tj]sx?$/,F=f.activeFile.match(N)!==null;Qs(function(){return u(({type:q})=>{q==="done"&&b.watchMode&&(F?R():y())})},[R,y,b.watchMode,F]);let X=v=>{f.setActiveFile(v)},E=Object.values(b.specs),_=Zs(E),B=Ws(E),j=Gs(E);return V(Y,{className:l(`${h}-tests`,s),style:{...js(a.themeMode==="dark"),...o},...c},V("iframe",{ref:d,style:{display:"none"},title:"Sandpack Tests"}),V(Hs,{setSuiteOnly:()=>g(v=>({...v,suiteOnly:!v.suiteOnly})),setVerbose:()=>g(v=>({...v,verbose:!v.verbose})),setWatchMode:()=>{g(v=>({...v,watchMode:!v.watchMode}))},showSuitesOnly:b.specsCount>1,status:b.status,suiteOnly:b.suiteOnly,verbose:b.verbose,watchMode:b.watchMode}),b.status==="running"||b.status==="initialising"?V(xt,{showOpenInCodeSandbox:!1}):V("div",{className:Ia.toString()},n,V(Bs,{onClick:b.suiteOnly?R:y})),V("div",{className:l(Da)},E.length===0&&b.status==="complete"?V("div",{className:l(Ha)},V("p",null,"No test files found."),V("p",null,"Test match:"," ",V("span",{className:l(H)},N.toString()))):V(_a,null,V(Ys,{openSpec:X,specs:E,status:b.status,verbose:b.verbose}),b.status==="complete"&&B.total>0&&V(Ks,{duration:_,suites:j,tests:B}))))},Da=m({padding:"$space$4",height:"100%",overflow:"auto",display:"flex",flexDirection:"column",position:"relative",fontFamily:"$font$mono"}),Ha=m({fontWeight:"bold",color:"$colors$base"});import{Fragment as Ka,createElement as fe,useEffect as qa,useRef as Ja}from"react";import{useClasser as ja}from"@code-hike/classer";import er from"react";var tr=({onClick:e})=>{let t=ja("sp");return er.createElement("button",{className:l(t("button","icon-standalone"),T,ee,z,m({position:"absolute",bottom:"$space$2",right:"$space$2"})),onClick:e},er.createElement(Fo,null))};import uo from"react";var or=()=>uo.createElement("div",{className:l(m({borderBottom:"1px solid $colors$surface2",padding:"$space$3 $space$2",height:"$layout$headerHeight"}))},uo.createElement("p",{className:l(m({lineHeight:1,margin:0,color:"$colors$base",fontSize:"$font$size",display:"flex",alignItems:"center",gap:"$space$2"}))},uo.createElement(Se,null),"Console"));import{useEffect as za,useState as Ua}from"react";var sr=["SyntaxError: ","Error in sandbox:"],rr={id:"random",method:"clear",data:["Console was cleared"]},fo="@t",ho="@r",go=1e4,bo=2,Pt=400,yo=Pt*2;var So=e=>{var c,a;let[t,o]=Ua([]),{listen:s}=x(),r=(c=e==null?void 0:e.showSyntaxError)!=null?c:!1,n=(a=e==null?void 0:e.maxMessageCount)!=null?a:yo;return za(()=>s(d=>{if(d.type==="console"&&d.codesandbox){if(d.log.find(({method:f})=>f==="clear"))return o([rr]);let u=r?d.log:d.log.filter(f=>f.data.filter(g=>typeof g!="string"?!0:sr.filter(R=>g.startsWith(R)).length===0).length>0);if(!u)return;o(f=>{let b=[...f,...u].filter((g,y,R)=>y===R.findIndex(N=>N.id===g.id));for(;b.length>yo;)b.shift();return b})}},e==null?void 0:e.clientId),[s,n,e,r]),{logs:t,reset:()=>o([])}};var vo=function(){return(0,eval)("this")}(),Va=typeof ArrayBuffer=="function",Xa=typeof Map=="function",Wa=typeof Set=="function",Ze;(function(s){s[s.infinity=0]="infinity",s[s.minusInfinity=1]="minusInfinity",s[s.minusZero=2]="minusZero"})(Ze||(Ze={}));var nr={Arithmetic:e=>e===0?1/0:e===1?-1/0:e===2?-0:e,HTMLElement:e=>{let t=document.implementation.createHTMLDocument("sandbox");try{let o=t.createElement(e.tagName);o.innerHTML=e.innerHTML;for(let s of Object.keys(e.attributes))try{o.setAttribute(s,e.attributes[s])}catch{}return o}catch(o){return e}},Function:e=>{let t=()=>{};return Object.defineProperty(t,"toString",{value:()=>`function ${e.name}() {${e.body}}`}),t},"[[NaN]]":()=>NaN,"[[undefined]]":()=>{},"[[Date]]":e=>{let t=new Date;return t.setTime(e),t},"[[RegExp]]":e=>new RegExp(e.src,e.flags),"[[Error]]":e=>{let t=vo[e.name]||Error,o=new t(e.message);return o.stack=e.stack,o},"[[ArrayBuffer]]":e=>{if(Va){let t=new ArrayBuffer(e.length);return new Int8Array(t).set(e),t}return e},"[[TypedArray]]":e=>typeof vo[e.ctorName]=="function"?new vo[e.ctorName](e.arr):e.arr,"[[Map]]":e=>{if(Xa){let o=new Map;for(let s=0;s<e.length;s+=2)o.set(e[s],e[s+1]);return o}let t=[];for(let o=0;o<e.length;o+=2)t.push([e[i],e[i+1]]);return t},"[[Set]]":e=>{if(Wa){let t=new Set;for(let o=0;o<e.length;o++)t.add(e[o]);return t}return e}};var ar=e=>{if(typeof e=="string"||typeof e=="number"||e===null)return e;if(Array.isArray(e))return e.map(ar);if(typeof e=="object"&&fo in e){let t=e[fo];return nr[t](e.data)}return e},Ga=(e,t,o)=>`[${e.reduce((r,n,c)=>`${r}${c?", ":""}${Ye(n,t,o)}`,"")}]`,Za=(e,t,o)=>{let s=e.constructor.name!=="Object"?`${e.constructor.name} `:"";if(o>bo)return s;let r=Object.entries(e),n=Object.entries(e).reduce((c,[a,p],d)=>{let u=d===0?"":", ",f=r.length>10?`
-   `:"",b=Ye(p,t,o);return d===Pt?c+f+"...":d>Pt?c:c+`${u}${f}${a}: `+b},"");return`${s}{ ${n}${r.length>10?`
diff --git a/plugins/remark-smartypants.js b/plugins/remark-smartypants.js
index 7dd1b0c4a..4694ff674 100644
--- a/plugins/remark-smartypants.js
+++ b/plugins/remark-smartypants.js
@@ -1,3 +1,8 @@
+/*!
+ * Based on 'silvenon/remark-smartypants'
+ * https://github.com/silvenon/remark-smartypants/pull/80
+ */
+
 const visit = require('unist-util-visit');
 const retext = require('retext');
 const smartypants = require('retext-smartypants');
@@ -9,12 +14,48 @@ function check(parent) {
 }
 
 module.exports = function (options) {
-  const processor = retext().use(smartypants, options);
+  const processor = retext().use(smartypants, {
+    ...options,
+    // Do not replace ellipses, dashes, backticks because they change string
+    // length, and we couldn't guarantee right splice of text in second visit of
+    // tree
+    ellipses: false,
+    dashes: false,
+    backticks: false,
+  });
+
+  const processor2 = retext().use(smartypants, {
+    ...options,
+    // Do not replace quotes because they are already replaced in the first
+    // processor
+    quotes: false,
+  });
 
   function transformer(tree) {
-    visit(tree, 'text', (node, index, parent) => {
-      if (check(parent)) node.value = String(processor.processSync(node.value));
+    let allText = '';
+    let startIndex = 0;
+    const textOrInlineCodeNodes = [];
+
+    visit(tree, ['text', 'inlineCode'], (node, _, parent) => {
+      if (check(parent)) {
+        if (node.type === 'text') allText += node.value;
+        // for the case when inlineCode contains just one part of quote: `foo'bar`
+        else allText += 'A'.repeat(node.value.length);
+        textOrInlineCodeNodes.push(node);
+      }
     });
+
+    // Concat all text into one string, to properly replace quotes around non-"text" nodes
+    allText = String(processor.processSync(allText));
+
+    for (const node of textOrInlineCodeNodes) {
+      const endIndex = startIndex + node.value.length;
+      if (node.type === 'text') {
+        const processedText = allText.slice(startIndex, endIndex);
+        node.value = String(processor2.processSync(processedText));
+      }
+      startIndex = endIndex;
+    }
   }
 
   return transformer;
diff --git a/public/.well-known/atproto-did b/public/.well-known/atproto-did
new file mode 100644
index 000000000..ad8b0a36b
--- /dev/null
+++ b/public/.well-known/atproto-did
@@ -0,0 +1 @@
+did:plc:uorpbnp2q32vuvyeruwauyhe
\ No newline at end of file
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
new file mode 100644
index 000000000..5de701e13
Binary files /dev/null and b/public/android-chrome-192x192.png differ
diff --git a/public/android-chrome-384x384.png b/public/android-chrome-384x384.png
new file mode 100644
index 000000000..f42a6776e
Binary files /dev/null and b/public/android-chrome-384x384.png differ
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
new file mode 100644
index 000000000..2fdbf6902
Binary files /dev/null and b/public/android-chrome-512x512.png differ
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
new file mode 100644
index 000000000..baf1332a3
Binary files /dev/null and b/public/apple-touch-icon.png differ
diff --git a/public/browserconfig.xml b/public/browserconfig.xml
new file mode 100644
index 000000000..f9c2e67fe
--- /dev/null
+++ b/public/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#2b5797</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
new file mode 100644
index 000000000..d24cb4f76
Binary files /dev/null and b/public/favicon-16x16.png differ
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
new file mode 100644
index 000000000..953ae4cc3
Binary files /dev/null and b/public/favicon-32x32.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
index 38fd8641c..519b939a0 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/favicon_old.ico b/public/favicon_old.ico
new file mode 100644
index 000000000..20b59d440
Binary files /dev/null and b/public/favicon_old.ico differ
diff --git a/public/images/brand/logo_dark.svg b/public/images/brand/logo_dark.svg
new file mode 100644
index 000000000..265777fa3
--- /dev/null
+++ b/public/images/brand/logo_dark.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="569px" height="512px" viewBox="0 0 569 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>React-Logo-Filled (1)</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-Copy-7" transform="translate(-227, -256)" fill="#58C4DC" fill-rule="nonzero">
+            <g id="React-Logo-Filled-(1)" transform="translate(227, 256)">
+                <path d="M285.5,201 C255.400481,201 231,225.400481 231,255.5 C231,285.599519 255.400481,310 285.5,310 C315.599519,310 340,285.599519 340,255.5 C340,225.400481 315.599519,201 285.5,201" id="Path"></path>
+                <path d="M568.959856,255.99437 C568.959856,213.207656 529.337802,175.68144 466.251623,150.985214 C467.094645,145.423543 467.85738,139.922107 468.399323,134.521063 C474.621631,73.0415145 459.808523,28.6686204 426.709856,9.5541429 C389.677085,-11.8291748 337.36955,3.69129898 284.479928,46.0162134 C231.590306,3.69129898 179.282771,-11.8291748 142.25,9.5541429 C109.151333,28.6686204 94.3382249,73.0415145 100.560533,134.521063 C101.102476,139.922107 101.845139,145.443621 102.708233,151.02537 C97.4493791,153.033193 92.2908847,155.161486 87.3331099,157.39017 C31.0111824,182.708821 0,217.765415 0,255.99437 C0,298.781084 39.6220545,336.307301 102.708233,361.003527 C101.845139,366.565197 101.102476,372.066633 100.560533,377.467678 C94.3382249,438.947226 109.151333,483.32012 142.25,502.434597 C153.629683,508.887578 166.52439,512.186771 179.603923,511.991836 C210.956328,511.991836 247.567589,495.487529 284.479928,465.972527 C321.372196,495.487529 358.003528,511.991836 389.396077,511.991836 C402.475265,512.183856 415.36922,508.884856 426.75,502.434597 C459.848667,483.32012 474.661775,438.947226 468.439467,377.467678 C467.897524,372.066633 467.134789,366.565197 466.291767,361.003527 C529.377946,336.347457 569,298.761006 569,255.99437 M389.155214,27.1025182 C397.565154,26.899606 405.877839,28.9368502 413.241569,33.0055186 C436.223966,46.2772304 446.540955,82.2775015 441.522965,131.770345 C441.181741,135.143488 440.780302,138.556788 440.298575,141.990165 C414.066922,134.08804 387.205771,128.452154 360.010724,125.144528 C343.525021,103.224055 325.192524,82.7564475 305.214266,63.9661533 C336.586743,39.7116483 366.032313,27.1025182 389.135142,27.1025182 M378.356498,310.205598 C368.204912,327.830733 357.150626,344.919965 345.237759,361.405091 C325.045049,363.479997 304.758818,364.51205 284.459856,364.497299 C264.167589,364.51136 243.888075,363.479308 223.702025,361.405091 C211.820914,344.919381 200.80007,327.83006 190.683646,310.205598 C180.532593,292.629285 171.306974,274.534187 163.044553,255.99437 C171.306974,237.454554 180.532593,219.359455 190.683646,201.783142 C200.784121,184.229367 211.770999,167.201087 223.601665,150.764353 C243.824636,148.63809 264.145559,147.579168 284.479928,147.591877 C304.772146,147.579725 325.051559,148.611772 345.237759,150.68404 C357.109048,167.14607 368.136094,184.201112 378.27621,201.783142 C388.419418,219.363718 397.644825,237.458403 405.915303,255.99437 C397.644825,274.530337 388.419418,292.625022 378.27621,310.205598 M419.724813,290.127366 C426.09516,307.503536 431.324985,325.277083 435.380944,343.334682 C417.779633,348.823635 399.836793,353.149774 381.668372,356.285142 C388.573127,345.871232 395.263781,335.035679 401.740334,323.778483 C408.143291,312.655143 414.144807,301.431411 419.805101,290.207679 M246.363271,390.377981 C258.848032,391.140954 271.593728,391.582675 284.5,391.582675 C297.406272,391.582675 310.232256,391.140954 322.737089,390.377981 C310.880643,404.583418 298.10766,417.997563 284.5,430.534446 C270.921643,417.999548 258.18192,404.585125 246.363271,390.377981 Z M187.311556,356.244986 C169.137286,353.123646 151.187726,348.810918 133.578912,343.334682 C137.618549,325.305649 142.828222,307.559058 149.174827,290.207679 C154.754833,301.431411 160.736278,312.655143 167.239594,323.778483 C173.74291,334.901824 180.467017,345.864539 187.311556,356.285142 M149.174827,221.760984 C142.850954,204.473938 137.654787,186.794745 133.619056,168.834762 C151.18418,163.352378 169.085653,159.013101 187.211197,155.844146 C180.346585,166.224592 173.622478,176.986525 167.139234,188.210257 C160.65599,199.433989 154.734761,210.517173 149.074467,221.760984 M322.616657,121.590681 C310.131896,120.827708 297.3862,120.385987 284.379568,120.385987 C271.479987,120.385987 258.767744,120.787552 246.242839,121.590681 C258.061488,107.383537 270.801211,93.9691137 284.379568,81.4342157 C297.99241,93.9658277 310.765727,107.380324 322.616657,121.590681 Z M401.70019,188.210257 C395.196875,176.939676 388.472767,166.09743 381.527868,155.68352 C399.744224,158.819049 417.734224,163.151949 435.380944,168.654058 C431.331963,186.680673 426.122466,204.426664 419.785029,221.781062 C414.205023,210.55733 408.203506,199.333598 401.720262,188.230335 M127.517179,131.790423 C122.438973,82.3176579 132.816178,46.2973086 155.778503,33.0255968 C163.144699,28.9632474 171.455651,26.9264282 179.864858,27.1225964 C202.967687,27.1225964 232.413257,39.7317265 263.785734,63.9862316 C243.794133,82.7898734 225.448298,103.270812 208.949132,125.204763 C181.761691,128.528025 154.90355,134.14313 128.661281,141.990165 C128.199626,138.556788 127.778115,135.163566 127.456963,131.790423 M98.4529773,182.106474 C101.54406,180.767925 104.695358,179.429376 107.906872,178.090828 C114.220532,204.735668 122.781793,230.7969 133.498624,255.99437 C122.761529,281.241316 114.193296,307.357063 107.8868,334.058539 C56.7434387,313.076786 27.0971497,284.003505 27.0971497,255.99437 C27.0971497,229.450947 53.1907013,202.526037 98.4529773,182.106474 Z M155.778503,478.963143 C132.816178,465.691432 122.438973,429.671082 127.517179,380.198317 C127.838331,376.825174 128.259842,373.431953 128.721497,369.978497 C154.953686,377.878517 181.814655,383.514365 209.009348,386.824134 C225.500295,408.752719 243.832321,429.233234 263.805806,448.042665 C220.069,481.834331 180.105722,492.97775 155.838719,478.963143 M441.502893,380.198317 C446.520883,429.691161 436.203894,465.691432 413.221497,478.963143 C388.974566,493.017906 348.991216,481.834331 305.274481,448.042665 C325.241364,429.232737 343.566681,408.752215 360.050868,386.824134 C387.245915,383.516508 414.107066,377.880622 440.338719,369.978497 C440.820446,373.431953 441.221885,376.825174 441.563109,380.198317 M461.193488,334.018382 C454.869166,307.332523 446.294494,281.231049 435.561592,255.99437 C446.289797,230.744081 454.857778,204.629101 461.173416,177.930202 C512.216417,198.911955 541.942994,227.985236 541.942994,255.99437 C541.942994,284.003505 512.296705,313.076786 461.153344,334.058539" id="Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/images/brand/logo_light.svg b/public/images/brand/logo_light.svg
new file mode 100644
index 000000000..bbe5a8994
--- /dev/null
+++ b/public/images/brand/logo_light.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="569px" height="512px" viewBox="0 0 569 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>React-Logo-Filled (1)</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="React-Logo-Filled-(1)" fill="#087EA4" fill-rule="nonzero">
+            <path d="M285.5,201 C255.400481,201 231,225.400481 231,255.5 C231,285.599519 255.400481,310 285.5,310 C315.599519,310 340,285.599519 340,255.5 C340,225.400481 315.599519,201 285.5,201" id="Path"></path>
+            <path d="M568.959856,255.99437 C568.959856,213.207656 529.337802,175.68144 466.251623,150.985214 C467.094645,145.423543 467.85738,139.922107 468.399323,134.521063 C474.621631,73.0415145 459.808523,28.6686204 426.709856,9.5541429 C389.677085,-11.8291748 337.36955,3.69129898 284.479928,46.0162134 C231.590306,3.69129898 179.282771,-11.8291748 142.25,9.5541429 C109.151333,28.6686204 94.3382249,73.0415145 100.560533,134.521063 C101.102476,139.922107 101.845139,145.443621 102.708233,151.02537 C97.4493791,153.033193 92.2908847,155.161486 87.3331099,157.39017 C31.0111824,182.708821 0,217.765415 0,255.99437 C0,298.781084 39.6220545,336.307301 102.708233,361.003527 C101.845139,366.565197 101.102476,372.066633 100.560533,377.467678 C94.3382249,438.947226 109.151333,483.32012 142.25,502.434597 C153.629683,508.887578 166.52439,512.186771 179.603923,511.991836 C210.956328,511.991836 247.567589,495.487529 284.479928,465.972527 C321.372196,495.487529 358.003528,511.991836 389.396077,511.991836 C402.475265,512.183856 415.36922,508.884856 426.75,502.434597 C459.848667,483.32012 474.661775,438.947226 468.439467,377.467678 C467.897524,372.066633 467.134789,366.565197 466.291767,361.003527 C529.377946,336.347457 569,298.761006 569,255.99437 M389.155214,27.1025182 C397.565154,26.899606 405.877839,28.9368502 413.241569,33.0055186 C436.223966,46.2772304 446.540955,82.2775015 441.522965,131.770345 C441.181741,135.143488 440.780302,138.556788 440.298575,141.990165 C414.066922,134.08804 387.205771,128.452154 360.010724,125.144528 C343.525021,103.224055 325.192524,82.7564475 305.214266,63.9661533 C336.586743,39.7116483 366.032313,27.1025182 389.135142,27.1025182 M378.356498,310.205598 C368.204912,327.830733 357.150626,344.919965 345.237759,361.405091 C325.045049,363.479997 304.758818,364.51205 284.459856,364.497299 C264.167589,364.51136 243.888075,363.479308 223.702025,361.405091 C211.820914,344.919381 200.80007,327.83006 190.683646,310.205598 C180.532593,292.629285 171.306974,274.534187 163.044553,255.99437 C171.306974,237.454554 180.532593,219.359455 190.683646,201.783142 C200.784121,184.229367 211.770999,167.201087 223.601665,150.764353 C243.824636,148.63809 264.145559,147.579168 284.479928,147.591877 C304.772146,147.579725 325.051559,148.611772 345.237759,150.68404 C357.109048,167.14607 368.136094,184.201112 378.27621,201.783142 C388.419418,219.363718 397.644825,237.458403 405.915303,255.99437 C397.644825,274.530337 388.419418,292.625022 378.27621,310.205598 M419.724813,290.127366 C426.09516,307.503536 431.324985,325.277083 435.380944,343.334682 C417.779633,348.823635 399.836793,353.149774 381.668372,356.285142 C388.573127,345.871232 395.263781,335.035679 401.740334,323.778483 C408.143291,312.655143 414.144807,301.431411 419.805101,290.207679 M246.363271,390.377981 C258.848032,391.140954 271.593728,391.582675 284.5,391.582675 C297.406272,391.582675 310.232256,391.140954 322.737089,390.377981 C310.880643,404.583418 298.10766,417.997563 284.5,430.534446 C270.921643,417.999548 258.18192,404.585125 246.363271,390.377981 Z M187.311556,356.244986 C169.137286,353.123646 151.187726,348.810918 133.578912,343.334682 C137.618549,325.305649 142.828222,307.559058 149.174827,290.207679 C154.754833,301.431411 160.736278,312.655143 167.239594,323.778483 C173.74291,334.901824 180.467017,345.864539 187.311556,356.285142 M149.174827,221.760984 C142.850954,204.473938 137.654787,186.794745 133.619056,168.834762 C151.18418,163.352378 169.085653,159.013101 187.211197,155.844146 C180.346585,166.224592 173.622478,176.986525 167.139234,188.210257 C160.65599,199.433989 154.734761,210.517173 149.074467,221.760984 M322.616657,121.590681 C310.131896,120.827708 297.3862,120.385987 284.379568,120.385987 C271.479987,120.385987 258.767744,120.787552 246.242839,121.590681 C258.061488,107.383537 270.801211,93.9691137 284.379568,81.4342157 C297.99241,93.9658277 310.765727,107.380324 322.616657,121.590681 Z M401.70019,188.210257 C395.196875,176.939676 388.472767,166.09743 381.527868,155.68352 C399.744224,158.819049 417.734224,163.151949 435.380944,168.654058 C431.331963,186.680673 426.122466,204.426664 419.785029,221.781062 C414.205023,210.55733 408.203506,199.333598 401.720262,188.230335 M127.517179,131.790423 C122.438973,82.3176579 132.816178,46.2973086 155.778503,33.0255968 C163.144699,28.9632474 171.455651,26.9264282 179.864858,27.1225964 C202.967687,27.1225964 232.413257,39.7317265 263.785734,63.9862316 C243.794133,82.7898734 225.448298,103.270812 208.949132,125.204763 C181.761691,128.528025 154.90355,134.14313 128.661281,141.990165 C128.199626,138.556788 127.778115,135.163566 127.456963,131.790423 M98.4529773,182.106474 C101.54406,180.767925 104.695358,179.429376 107.906872,178.090828 C114.220532,204.735668 122.781793,230.7969 133.498624,255.99437 C122.761529,281.241316 114.193296,307.357063 107.8868,334.058539 C56.7434387,313.076786 27.0971497,284.003505 27.0971497,255.99437 C27.0971497,229.450947 53.1907013,202.526037 98.4529773,182.106474 Z M155.778503,478.963143 C132.816178,465.691432 122.438973,429.671082 127.517179,380.198317 C127.838331,376.825174 128.259842,373.431953 128.721497,369.978497 C154.953686,377.878517 181.814655,383.514365 209.009348,386.824134 C225.500295,408.752719 243.832321,429.233234 263.805806,448.042665 C220.069,481.834331 180.105722,492.97775 155.838719,478.963143 M441.502893,380.198317 C446.520883,429.691161 436.203894,465.691432 413.221497,478.963143 C388.974566,493.017906 348.991216,481.834331 305.274481,448.042665 C325.241364,429.232737 343.566681,408.752215 360.050868,386.824134 C387.245915,383.516508 414.107066,377.880622 440.338719,369.978497 C440.820446,373.431953 441.221885,376.825174 441.563109,380.198317 M461.193488,334.018382 C454.869166,307.332523 446.294494,281.231049 435.561592,255.99437 C446.289797,230.744081 454.857778,204.629101 461.173416,177.930202 C512.216417,198.911955 541.942994,227.985236 541.942994,255.99437 C541.942994,284.003505 512.296705,313.076786 461.153344,334.058539" id="Shape"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/images/brand/wordmark_dark.svg b/public/images/brand/wordmark_dark.svg
new file mode 100644
index 000000000..ec028ae21
--- /dev/null
+++ b/public/images/brand/wordmark_dark.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="600px" height="180.766722px" viewBox="0 0 600 180.766722" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Group</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(0, 0)" fill-rule="nonzero">
+            <path d="M238.674643,136.444487 L238.674643,40.7880921 L279.602667,40.7880921 C291.581922,40.7880921 300.554839,43.4984068 306.523063,48.9190363 C312.489641,54.2938957 315.47293,61.5593239 315.47293,70.7149916 C315.47293,77.6386258 313.765607,83.5146514 310.349313,88.3430683 C306.933019,93.1713207 301.784705,96.6104997 294.907664,98.660276 C299.05167,104.536302 303.106769,110.640025 307.06967,116.971612 C311.032571,123.303033 314.835771,129.793992 318.479269,136.444487 L301.740252,136.444487 C298.41451,129.976249 294.907664,123.667548 291.218067,117.518219 C287.572922,111.368889 283.996927,105.743282 280.49008,100.641727 C280.216777,100.641727 279.920424,100.641727 279.602667,100.641727 L253.023077,100.641727 L253.023077,136.444487 L238.674643,136.444487 Z M278.23615,54.1118031 L253.023077,54.1118031 L253.023077,87.5914837 L278.23615,87.5914837 C285.9792,87.5914837 291.672475,86.2249661 295.317619,83.4919309 C298.961117,80.7132903 300.78369,76.4998063 300.78369,70.8516434 C300.78369,65.2033159 298.961117,61.0127168 295.317619,58.2796817 C291.672475,55.5010411 285.9792,54.1118031 278.23615,54.1118031 Z M360.98949,138.084308 C354.430206,138.084308 348.667783,136.581139 343.70222,133.5748 C338.782757,130.568461 334.933458,126.377698 332.15597,121.002838 C329.422934,115.627814 328.056417,109.410159 328.056417,102.349873 C328.056417,95.2894229 329.422934,89.071768 332.15597,83.6969086 C334.933458,78.2762791 338.782757,74.0629597 343.70222,71.056621 C348.667783,68.0046769 354.430206,66.4787871 360.98949,66.4787871 L362.49266,66.4787871 C368.459238,66.4787871 373.698104,67.9590714 378.207612,70.9199693 C382.761573,73.835097 386.314519,78.0713015 388.866449,83.6285827 C391.416733,89.1400938 392.692698,95.7905891 392.692698,103.579739 L392.692698,107.747618 L342.199051,107.747618 C343.018961,113.35034 345.114837,117.768637 348.485031,121.002838 C351.901325,124.19127 356.343331,125.78565 361.809401,125.78565 L363.175919,125.78565 C366.455561,125.78565 369.598551,125.125112 372.60489,123.804199 C375.611228,122.437682 378.138463,120.615604 380.188239,118.338129 L388.593145,127.220493 C385.494608,130.545576 381.668359,133.187565 377.114398,135.146295 C372.60489,137.104861 367.72988,138.084308 362.49266,138.084308 L360.98949,138.084308 Z M360.579535,78.7774453 C355.704525,78.7774453 351.628022,80.3943814 348.34838,83.6285827 C345.114837,86.817014 343.065061,91.1898702 342.199051,96.7471514 L378.958373,96.7471514 C378.548418,91.6910364 376.885547,87.4319469 373.971407,83.9702121 C371.10172,80.5083127 367.09272,78.7774453 361.946053,78.7774453 L360.579535,78.7774453 Z M427.265593,137.811005 C420.067503,137.811005 414.464781,135.966206 410.457427,132.276608 C406.494526,128.541405 404.512252,123.644663 404.512252,117.586544 C404.512252,111.573867 406.74478,106.540473 411.208188,102.486525 C415.717696,98.4324133 422.892737,96.405522 432.731663,96.405522 L451.316302,96.405522 L451.316302,96.2005444 C451.316302,84.7217968 446.031337,78.9824229 435.464698,78.9824229 C431.045743,78.9824229 427.310046,79.7794484 424.259254,81.3738287 C421.252916,82.9680443 418.814587,85.2000779 416.947562,88.0697648 L407.58774,80.4855923 C410.50188,75.9760843 414.328129,72.5141849 419.066487,70.1000587 C423.849299,67.6857679 429.26927,66.4787871 435.328047,66.4787871 L436.831216,66.4787871 C445.211426,66.4787871 451.953462,68.8929133 457.055676,73.7213303 C462.156244,78.5495826 464.708174,85.7694054 464.708174,95.3806339 L464.708174,136.444487 L451.589606,136.444487 L451.589606,125.307369 C448.947123,129.315711 445.553879,132.41326 441.408227,134.599688 C437.262574,136.740511 432.548912,137.811005 427.265593,137.811005 Z M430.271932,125.648998 C435.555251,125.648998 439.951157,124.464573 443.458003,122.096052 C446.964849,119.681762 449.584282,116.425005 451.316302,112.325452 L451.316302,107.132685 L433.27827,107.132685 C427.902752,107.132685 424.053453,107.998036 421.730373,109.729068 C419.453393,111.41433 418.31408,113.71469 418.31408,116.629982 C418.31408,122.642659 422.30003,125.648998 430.271932,125.648998 Z M513.468156,138.084308 C506.908871,138.084308 501.101995,136.649465 496.04588,133.779778 C490.989765,130.910091 487.026864,126.810538 484.157177,121.48112 C481.331943,116.106096 479.920972,109.729068 479.920972,102.349873 C479.920972,94.9250731 481.331943,88.548046 484.157177,83.2186274 C486.980764,77.8436034 490.897566,73.7213303 495.909228,70.8516434 C500.965343,67.936351 506.818319,66.4787871 513.468156,66.4787871 L514.971325,66.4787871 C520.256291,66.4787871 525.243257,67.8453047 529.935516,70.5783399 C534.672228,73.2657695 538.498477,76.9780874 541.414263,81.7154581 L530.822929,89.094653 C528.865351,85.9971034 526.519222,83.5829772 523.786187,81.8521099 C521.053151,80.075637 517.954614,79.1874006 514.493867,79.1874006 L513.12735,79.1874006 C507.205225,79.1874006 502.536015,81.2826178 499.119721,85.4733814 C495.749527,89.618375 494.063606,95.221097 494.063606,102.281548 C494.063606,109.296228 495.749527,114.89895 499.119721,119.089714 C502.536015,123.280313 507.205225,125.375695 513.12735,125.375695 L514.493867,125.375695 C517.954614,125.375695 521.143704,124.601225 524.05949,123.052615 C526.97363,121.50384 529.479461,119.431343 531.575337,116.83496 L541.414263,125.170717 C538.361825,129.179059 534.512526,132.344934 529.866367,134.668014 C525.266306,136.945489 520.300744,138.084308 514.971325,138.084308 L513.468156,138.084308 Z M587.154735,137.332723 C579.046182,137.332723 572.875449,135.282947 568.639245,131.183394 C564.40304,127.083842 562.284115,120.774976 562.284115,112.257126 L562.284115,80.0073111 L548.892243,80.0073111 L548.892243,68.1186082 L562.284115,68.1186082 L562.284115,47.7573317 L575.949291,47.7573317 L575.949291,68.1186082 L598.975935,68.1186082 L598.975935,80.0073111 L575.949291,80.0073111 L575.949291,110.412327 C575.949291,115.787187 577.065554,119.522389 579.298082,121.617771 C581.528963,123.712988 584.831655,124.760762 589.204511,124.760762 C591.300387,124.760762 593.167412,124.669551 594.807233,124.487458 C596.493154,124.305201 598.223527,124.077503 600,123.804199 L600,135.761228 C598.177428,136.216624 596.127651,136.581139 593.850671,136.854442 C591.57369,137.173187 589.341163,137.332723 587.154735,137.332723 Z" id="Shape" fill="#F6F7F9"></path>
+            <g transform="translate(0, 0.0009)" fill="#58C4DC">
+                <path d="M100.331696,71.2413046 C96.5513816,71.2413046 92.8560217,72.3638247 89.7128667,74.46678 C86.569547,76.5698999 84.1198584,79.5591159 82.6731608,83.0564131 C81.2264632,86.5537102 80.8479543,90.4021859 81.5853799,94.1148331 C82.3229701,97.8276449 84.143402,101.238012 86.8163433,103.91474 C89.4894493,106.591468 92.8952062,108.414205 96.6029141,109.152783 C100.310622,109.891361 104.153665,109.512193 107.646187,108.063685 C111.13871,106.615011 114.12381,104.161865 116.224131,101.014265 C118.324287,97.8668293 119.445326,94.1663656 119.445326,90.3809473 C119.445326,85.3047461 117.431606,80.4364861 113.847049,76.8471548 C110.262657,73.2576589 105.400982,71.2413046 100.331696,71.2413046 Z" id="Path"></path>
+                <path d="M200.664051,90.380618 C200.664051,75.2745071 186.68935,62.025543 164.440304,53.3063376 C164.73781,51.342833 165.006174,49.400567 165.197157,47.4935341 C167.391817,25.7878018 162.167933,10.1216657 150.494416,3.37315978 C137.433471,-4.17637401 118.985484,1.3032314 100.332025,16.246381 C81.6785665,1.3032314 63.2304146,-4.17637401 50.1694701,3.37315978 C38.4961172,10.1216657 33.2717394,25.7878018 35.4662349,47.4935341 C35.6573828,49.400567 35.9193261,51.3499125 36.2237467,53.3206614 C34.3690695,54.0294395 32.5496254,54.7808595 30.8011415,55.5676772 C10.9371951,64.5066779 0,76.8835404 0,90.380618 C0,105.486729 13.9741404,118.735693 36.2237467,127.454898 C35.9193261,129.418403 35.6573828,131.360834 35.4662349,133.267702 C33.2717394,154.973434 38.4961172,170.639323 50.1694701,177.387945 C54.1830804,179.666571 58.7307851,180.830581 63.3436874,180.763078 C74.4012842,180.763078 87.3135582,174.934799 100.332025,164.51469 C113.343413,174.934799 126.262767,180.763078 137.334358,180.763078 C141.94726,180.830581 146.4948,179.664925 150.508575,177.387945 C162.182093,170.639323 167.406635,154.973434 165.211975,133.267702 C165.020992,131.360834 164.750981,129.418403 164.454463,127.454898 C186.704168,118.749852 200.678868,105.479649 200.678868,90.380618 L200.664051,90.380618 Z M137.249568,9.56873644 C140.21557,9.49710128 143.147326,10.216367 145.744368,11.6529062 C153.849957,16.3385798 157.488681,29.048675 155.718794,46.5224834 C155.598441,47.7133294 155.457015,48.9184991 155.287106,50.1305837 C146.035453,47.3407475 136.562028,45.3509004 126.970721,44.1831041 C121.156436,36.4440047 114.690832,29.2177609 107.644705,22.5837297 C118.709382,14.0204391 129.094421,9.56873644 137.242488,9.56873644 L137.249568,9.56873644 Z M133.440935,109.520261 C129.860659,115.74302 125.961968,121.776442 121.760503,127.596654 C114.638806,128.32914 107.484016,128.69349 100.324946,128.688278 C93.1681804,128.693326 86.0158604,128.328976 78.8964685,127.596654 C74.7061987,121.776277 70.8193617,115.74269 67.2514337,109.520261 C63.6713223,103.314789 60.4175287,96.9262372 57.5035535,90.380618 C60.4175287,83.8349988 63.6713223,77.4464468 67.2514337,71.2409753 C70.813764,65.0434065 74.6885822,59.0315523 78.8610707,53.2284626 C85.9934693,52.4777011 93.1604423,52.1038022 100.332025,52.10837 C107.488791,52.1041314 114.641111,52.4684812 121.760503,53.2001444 C125.947315,59.0121247 129.836292,65.033528 133.412617,71.2409753 C136.989929,77.4479286 140.243723,83.8363159 143.160497,90.380618 C140.243723,96.9249201 136.989929,103.313307 133.412617,109.520261 L133.440935,109.520261 Z M148.030898,102.431492 C150.277749,108.566333 152.122218,114.841447 153.552616,121.216663 C147.345005,123.154649 141.016711,124.68202 134.609061,125.789064 C137.044261,122.112309 139.403891,118.286718 141.688116,114.312292 C143.946327,110.385118 146.062948,106.422546 148.059216,102.45981 L148.030898,102.431492 Z M100.339105,152.003152 C95.5502017,147.577611 91.0571578,142.841557 86.8887852,137.825779 C91.2919354,138.095131 95.7872843,138.251046 100.339105,138.251046 C104.890926,138.251046 109.414428,138.095131 113.824822,137.825779 C109.643114,142.841063 105.13838,147.576952 100.339105,152.003152 Z M66.0620695,125.77474 C59.6522789,124.6728 53.3216804,123.150203 47.1114343,121.216663 C48.53607,114.85149 50.3734599,108.585925 52.6119145,102.45981 C54.5798644,106.422546 56.6894054,110.385118 58.9830146,114.312292 C61.2766238,118.239466 63.648108,122.110004 66.0620695,125.789064 L66.0620695,125.77474 Z M52.6119145,78.2943463 C50.3815273,72.190952 48.548912,65.9492594 47.1255934,59.6082886 C53.3205279,57.6727729 59.6341684,56.1406268 66.0266718,55.0218934 C63.6056307,58.6867948 61.2341465,62.4863722 58.9476168,66.4489439 C56.6610872,70.4115156 54.5727849,74.3245304 52.5765168,78.2943463 L52.6119145,78.2943463 Z M100.296628,28.7510046 C105.097714,33.1752288 109.602612,37.911447 113.782345,42.9283775 C109.37903,42.6590254 104.883846,42.5031107 100.296628,42.5031107 C95.7471119,42.5031107 91.2636172,42.6448663 86.8463079,42.9283775 C91.0146805,37.9125995 95.5077244,33.1765459 100.296628,28.7510046 Z M141.673957,66.4489439 C139.380347,62.4697435 137.008863,58.6418479 134.559504,54.9650924 C140.984112,56.0721363 147.32887,57.6019774 153.552616,59.5445727 C152.124688,65.9089225 150.287298,72.1743232 148.052136,78.3014258 C146.084186,74.3386895 143.967566,70.3761178 141.681036,66.4560234 L141.673957,66.4489439 Z M44.9734105,46.5295629 C43.1824493,29.0628341 46.8424114,16.3456593 54.9409214,11.6599858 C57.5387866,10.2256856 60.4700491,9.50656812 63.4357215,9.57583245 C71.5837884,9.57583245 81.968828,14.0275186 93.0335044,22.5908093 C85.9827676,29.2296151 79.5123892,36.4604687 73.6933293,44.2045074 C64.1048212,45.3777368 54.6322202,47.3601751 45.3769448,50.1305837 C45.2141152,48.9184991 45.0654447,47.7204089 44.9521719,46.5295629 L44.9734105,46.5295629 Z M9.55678182,90.380618 C9.55678182,81.009271 18.7596521,71.5032479 34.7228823,64.2939621 C35.8131328,63.8214434 36.924622,63.34876 38.0571852,62.8762413 C40.2839503,72.2833154 43.3034602,81.4844239 47.0831161,90.380618 C43.296216,99.294264 40.2744011,108.514636 38.0501056,117.941796 C20.0125676,110.533953 9.55678182,100.269431 9.55678182,90.380618 Z M54.9409214,169.10158 C46.8424114,164.415906 43.1824493,151.698402 44.9734105,134.231673 C45.0866833,133.040827 45.2353538,131.842737 45.3981835,130.623573 C54.6500014,133.41275 64.1234256,135.402433 73.714568,136.571052 C79.5306643,144.313115 85.9961035,151.543804 93.0405839,158.184586 C77.6152348,170.115766 63.5206761,174.049032 54.9621601,169.10158 L54.9409214,169.10158 Z M155.711714,134.231673 C157.481601,151.705481 153.842878,164.415906 145.737288,169.10158 C137.185852,174.063849 123.084214,170.115766 107.665944,158.184586 C114.707955,151.54364 121.171089,144.312786 126.98488,136.571052 C136.576187,135.403256 146.049612,133.413409 155.301265,130.623573 C155.47101,131.842737 155.6126,133.040827 155.732953,134.231673 L155.711714,134.231673 Z M162.656422,117.927637 C160.425871,108.50591 157.401751,99.2906419 153.616332,90.380618 C157.400104,81.4658196 160.421919,72.2457773 162.649343,62.8194403 C180.651977,70.2272827 191.136295,80.4918053 191.136295,90.380618 C191.136295,100.269431 180.679966,110.533953 162.642263,117.941796" id="Shape"></path>
+            </g>
+            <path d="M100.334001,110.494483 C110.855528,110.494483 119.384902,101.680938 119.384902,90.808727 C119.384902,79.9365156 110.855528,71.1229712 100.334001,71.1229712 C89.8126389,71.1229712 81.2832643,79.9365156 81.2832643,90.808727 C81.2832643,101.680938 89.8126389,110.494483 100.334001,110.494483 Z" id="Path" fill="#58C4DC"></path>
+            <path d="M200.66899,90.1760129 C200.66899,75.1235749 186.692643,61.9078682 164.452323,53.2367379 C168.047087,29.6442236 163.568532,10.9419817 150.501166,3.41577915 C138.831435,-3.31130369 122.670472,-0.0193332173 104.992509,12.6952896 C103.427764,13.8164926 101.875038,15.0093143 100.322147,16.2497171 C98.7812749,15.0093143 97.2285487,13.8164926 95.6758225,12.6952896 C77.9978597,-0.0193332173 61.836896,-3.32323026 50.1670005,3.41577915 C37.1116538,10.9419817 32.6324397,29.6322048 36.2397168,53.2008462 C13.9751118,61.8839953 0,75.1115561 0,90.1760129 C0,105.228451 13.9751118,118.443993 36.2158439,127.115288 C32.6205856,150.707638 37.0997997,169.410324 50.1670005,176.936049 C54.1206816,179.214676 58.5998957,180.347404 63.4732596,180.347404 C72.9692396,180.347404 83.9939083,176.053575 95.6758225,167.656901 C97.2404028,166.535698 98.7932936,165.342053 100.34602,164.102309 C101.886892,165.342053 103.439618,166.535698 104.992509,167.656901 C116.674258,176.0651 127.699092,180.347404 137.194907,180.347404 C142.068271,180.347404 146.547485,179.214676 150.501166,176.936049 C162.171062,170.208831 167.390171,154.584102 165.205389,132.93583 C165.014406,131.02748 164.762506,129.095257 164.452323,127.127142 C186.705815,118.455847 200.66899,105.240305 200.66899,90.1760129 Z M110.582554,20.4362001 C120.520429,13.2916181 129.765497,9.57032735 137.194907,9.57032735 C140.408034,9.57032735 143.274758,10.2621145 145.723294,11.6695782 C154.275718,16.6074813 157.930741,30.7654265 155.314766,50.0639475 C146.71476,47.4280504 137.194907,45.4123546 126.958538,44.1240414 C120.830941,36.0731125 114.333068,28.8093307 107.679939,22.6069873 C108.647532,21.8675861 109.61496,21.1280202 110.582554,20.4362001 Z M54.9448728,11.6695782 C57.3935735,10.2621145 60.2601323,9.57032735 63.4732596,9.57032735 C70.9028346,9.57032735 80.1479022,13.279764 90.0857778,20.4362001 C91.0532064,21.1280202 92.020635,21.8555673 92.9882282,22.6069873 C86.3350986,28.8093307 79.849244,36.0610938 73.7216475,44.1121872 C63.4971325,45.4003359 53.9654255,47.4280504 45.36542,50.0520934 C42.7494443,30.7654265 46.3926131,16.6074813 54.9448728,11.6695782 Z M9.55562934,90.1760129 C9.55562934,80.3118964 20.0189886,70.0663074 38.0672283,62.6831611 C40.0858876,71.4260747 43.0958483,80.6698252 47.0734023,90.15214 C43.0719754,99.646309 40.0620147,108.902078 38.0433554,117.656846 C20.0189886,110.2737 9.55562934,100.039965 9.55562934,90.1760129 Z M90.0857778,159.915497 C75.8478171,170.149561 63.0432182,173.345236 54.9448728,168.682612 C46.3926131,163.745039 42.7375902,149.586599 45.3534012,130.287914 C53.9534067,132.923976 63.4732596,134.939671 73.7097934,136.22782 C79.8372253,144.278749 86.3350986,151.542695 92.9882282,157.744874 C92.020635,158.496294 91.0532064,159.223841 90.0857778,159.915497 Z M100.334166,151.530676 C88.3896496,140.605121 76.910902,126.005939 67.2237741,109.259842 C64.631836,104.787049 59.3914881,93.5442318 57.2653184,89.1908032 C55.5691902,93.2460675 53.8938068,96.9662882 52.5798096,100.926061 C53.6549132,102.918048 57.7995774,112.026958 58.9462997,114.018946 C61.2157067,117.942992 63.5927887,121.759856 66.0413248,125.457356 C59.1731745,124.252681 52.8187032,122.702095 47.0375106,120.877218 C50.3222567,106.063344 56.8798946,88.9831913 67.2237741,71.0920188 C69.7679664,66.6908443 75.2956123,56.8637719 78.0668441,52.7846346 C73.6951404,53.3452361 70.1843427,53.1596861 66.0754054,54.006433 C64.8809374,55.938656 60.093022,64.3410927 58.9462997,66.3330801 C56.6528551,70.2928529 54.550723,74.2527904 52.5798096,78.1888549 C50.1908734,71.6407661 48.363362,65.3669687 47.0615482,59.4509354 C61.5502566,54.8826507 79.6462421,52.0081892 100.334166,52.0081892 C105.506023,52.0081892 116.307439,51.9034777 121.133057,52.2493878 C118.4695,48.7545603 116.185111,45.5911544 113.402025,42.4662744 C111.144472,42.3946558 102.639464,42.4662744 100.334166,42.4662744 C95.7713141,42.4662744 91.3041188,42.6212013 86.9203962,42.8836385 C91.2682271,37.7190253 95.7713141,32.9958137 100.334166,28.8211849 C112.266663,39.7467398 123.757429,54.3459221 133.444393,71.0920188 C135.988585,75.4933578 141.485772,85.7389468 143.647669,90.1760129 C145.355816,86.1205839 146.971599,82.4220959 148.297451,78.4382855 C147.222347,76.4344439 142.868589,68.3010301 141.721867,66.3210614 C139.45246,62.3970156 137.075543,58.5801509 134.626842,54.8946695 C141.494992,56.0991806 147.849464,57.6497665 153.630656,59.4748083 C150.34591,74.288682 143.788272,91.36867 133.444393,109.259842 C130.9002,113.661017 123.659468,123.739825 120.888401,127.818962 C125.260105,127.258361 129.994512,126.42034 134.103449,125.573593 C135.297917,123.641205 140.575309,116.010769 141.721867,114.018946 C144.003293,110.082881 146.10559,106.146817 148.052465,102.222606 C150.369783,108.591895 152.209313,114.853839 153.547019,120.912945 C139.070329,125.481229 120.998216,128.343837 100.334166,128.343837 C95.1621436,128.343837 83.1371182,127.664365 78.3115002,127.318455 C80.9752216,130.813117 83.8440853,134.451676 86.6270066,137.576721 C88.8845594,137.648175 98.028867,137.885751 100.334166,137.885751 C104.897017,137.885751 109.364213,137.73066 113.74777,137.468223 C109.388086,142.632836 104.897017,147.356048 100.334166,151.530676 Z M145.723294,168.682612 C137.624949,173.358407 124.808495,170.161086 110.582554,159.915497 C109.61496,159.223841 108.647532,158.496294 107.679939,157.744874 C114.333068,151.542695 120.818923,144.290767 126.946519,136.239674 C137.15918,134.951525 146.667014,132.93583 155.255166,130.311787 C155.422276,131.516462 155.589551,132.721138 155.708915,133.901941 C157.464808,151.339858 153.821804,164.006817 145.723294,168.682612 Z M162.624811,117.6687 C160.570425,108.794733 157.524573,99.5509821 153.594764,90.21174 C157.596191,80.717571 160.606317,71.4618017 162.624811,62.707034 C180.648684,70.0901803 191.113245,80.3118964 191.113245,90.1760129 C191.113245,100.039965 180.661856,110.2737 162.624811,117.6687 Z" id="Shape" fill="#58C4DC"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/images/brand/wordmark_light.svg b/public/images/brand/wordmark_light.svg
new file mode 100644
index 000000000..2de8f3cc7
--- /dev/null
+++ b/public/images/brand/wordmark_light.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="600px" height="180.322004px" viewBox="0 0 600 180.322004" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Group</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" fill-rule="nonzero">
+            <path d="M238.282648,135.760088 L238.282648,40.7871199 L279.255074,40.7871199 C291.247326,40.7871199 300.229977,43.4780705 306.204676,48.8599717 C312.177727,54.1964299 315.164252,61.4099495 315.164252,70.5002036 C315.164252,77.3743712 313.455076,83.2084149 310.035076,88.0023348 C306.615076,92.7960912 301.461177,96.2106986 294.576675,98.2458301 C298.725177,104.079874 302.784676,110.139989 306.751876,116.426338 C310.719076,122.712525 314.526402,129.157108 318.173853,135.760088 L301.416676,135.760088 C298.087326,129.338063 294.576675,123.074435 290.883075,116.96904 C287.233976,110.863646 283.654101,105.278231 280.14345,100.213124 C279.86985,100.213124 279.573175,100.213124 279.255074,100.213124 L252.646648,100.213124 L252.646648,135.760088 L238.282648,135.760088 Z M277.887074,54.0156383 L252.646648,54.0156383 L252.646648,87.2561199 L277.887074,87.2561199 C285.638525,87.2561199 291.337976,85.8993655 294.987075,83.1858568 C298.634526,80.4270685 300.459076,76.2436881 300.459076,70.6358791 C300.459076,65.0279066 298.634526,60.8672477 294.987075,58.153739 C291.337976,55.3949507 285.638525,54.0156383 277.887074,54.0156383 Z M360.730192,137.388193 C354.163792,137.388193 348.395117,135.895763 343.424167,132.910904 C338.499367,129.926044 334.645892,125.765222 331.865391,120.428764 C329.129391,115.092142 327.76139,108.91891 327.76139,101.909067 C327.76139,94.8990604 329.129391,88.7258281 331.865391,83.38937 C334.645892,78.0074687 338.499367,73.8242518 343.424167,70.8393922 C348.395117,67.809253 354.163792,66.2942651 360.730192,66.2942651 L362.234993,66.2942651 C368.208044,66.2942651 373.452593,67.7639734 377.966994,70.7037168 C382.525895,73.5980171 386.082695,77.8039556 388.637394,83.3215323 C391.190445,88.7936658 392.467794,95.396646 392.467794,103.130146 L392.467794,107.268247 L341.919367,107.268247 C342.740167,112.830939 344.838317,117.21767 348.212168,120.428764 C351.632168,123.594415 356.078992,125.177404 361.550993,125.177404 L362.918993,125.177404 C366.202193,125.177404 369.348593,124.521585 372.358193,123.21011 C375.367793,121.853356 377.897769,120.044296 379.94977,117.783093 L388.363794,126.601996 C385.261895,129.903323 381.431495,132.526436 376.872593,134.471171 C372.358193,136.415744 367.477894,137.388193 362.234993,137.388193 L360.730192,137.388193 Z M360.319792,78.5050543 C355.439493,78.5050543 351.358568,80.110438 348.075368,83.3215323 C344.838317,86.4871834 342.786317,90.8287974 341.919367,96.346374 L378.718569,96.346374 C378.308169,91.3263829 376.643495,87.0977229 373.726193,83.6607209 C370.853393,80.2235553 366.840043,78.5050543 361.687793,78.5050543 L360.319792,78.5050543 Z M427.078197,137.116842 C419.872297,137.116842 414.263497,135.285224 410.251796,131.621987 C406.284595,127.913471 404.300171,123.051713 404.300171,117.036878 C404.300171,111.067159 406.535121,106.069726 411.003371,102.044742 C415.517772,98.0195954 422.700596,96.0071855 432.550197,96.0071855 L451.154998,96.0071855 L451.154998,95.8036723 C451.154998,84.4069357 445.864299,78.7085675 435.286197,78.7085675 C430.862447,78.7085675 427.122698,79.4998985 424.068596,81.0828876 C421.058996,82.6657132 418.618023,84.8817998 416.748972,87.7309839 L407.378995,80.2009973 C410.296297,75.7237079 414.126697,72.2865424 418.870196,69.8896642 C423.658196,67.4926225 429.084047,66.2942651 435.149397,66.2942651 L436.654197,66.2942651 C445.043499,66.2942651 451.792849,68.6911433 456.900598,73.4850632 C462.0067,78.2788196 464.561399,85.4470596 464.561399,94.9896197 L464.561399,135.760088 L451.428598,135.760088 L451.428598,124.70254 C448.783249,128.682244 445.386323,131.757663 441.236173,133.92847 C437.086024,136.053997 432.367247,137.116842 427.078197,137.116842 Z M430.087797,125.041729 C435.376848,125.041729 439.777523,123.865766 443.288173,121.514167 C446.798824,119.117126 449.421099,115.883637 451.154998,111.813374 L451.154998,106.657707 L433.097397,106.657707 C427.716047,106.657707 423.862572,107.516876 421.536972,109.23554 C419.257521,110.908762 418.116972,113.192686 418.116972,116.08715 C418.116972,122.056869 422.107247,125.041729 430.087797,125.041729 Z M513.374279,137.388193 C506.807879,137.388193 500.994702,135.963601 495.933102,133.114417 C490.871502,130.265233 486.904301,126.19497 484.031501,120.903628 C481.203202,115.567006 479.790701,109.23554 479.790701,101.909067 C479.790701,94.5373138 481.203202,88.2058479 484.031501,82.914506 C486.858152,77.5778844 490.779203,73.4850632 495.796302,70.6358791 C500.857902,67.7414153 506.717228,66.2942651 513.374279,66.2942651 L514.879079,66.2942651 C520.169778,66.2942651 525.162154,67.6510195 529.859504,70.3645282 C534.601355,73.0327573 538.431755,76.7185521 541.350705,81.4220762 L530.74788,88.7485497 C528.788179,85.6731308 526.439504,83.2762526 523.703504,81.5577516 C520.967504,79.7939709 517.865605,78.9120806 514.401103,78.9120806 L513.033103,78.9120806 C507.104553,78.9120806 502.430278,80.9923283 499.010278,85.1531506 C495.636427,89.2685299 493.948678,94.8312227 493.948678,101.841229 C493.948678,108.805793 495.636427,114.368485 499.010278,118.529308 C502.430278,122.689967 507.104553,124.770378 513.033103,124.770378 L514.401103,124.770378 C517.865605,124.770378 521.058154,124.001441 523.977104,122.463895 C526.894405,120.926186 529.402955,118.868496 531.501104,116.290663 L541.350705,124.566865 C538.294955,128.546568 534.44148,131.689825 529.79028,133.996307 C525.185229,136.25751 520.214279,137.388193 514.879079,137.388193 L513.374279,137.388193 Z M587.140799,136.641978 C579.023449,136.641978 572.846022,134.606847 568.605222,130.536584 C564.364422,126.466321 562.243198,120.202529 562.243198,111.745536 L562.243198,79.7261332 L548.836797,79.7261332 L548.836797,67.9223704 L562.243198,67.9223704 L562.243198,47.7065671 L575.923199,47.7065671 L575.923199,67.9223704 L598.974824,67.9223704 L598.974824,79.7261332 L575.923199,79.7261332 L575.923199,109.913918 C575.923199,115.250376 577.040673,118.958892 579.275623,121.039303 C581.508924,123.119551 584.815199,124.159838 589.192799,124.159838 C591.290949,124.159838 593.16,124.069279 594.8016,123.888487 C596.489349,123.707532 598.2216,123.481461 600,123.21011 L600,135.081711 C598.17545,135.533853 596.12345,135.895763 593.844,136.167114 C591.564549,136.483581 589.329599,136.641978 587.140799,136.641978 Z" id="Shape" fill="#23272F"></path>
+            <path d="M99.8210256,110.554562 C110.491336,110.554562 119.141324,101.6644 119.141324,90.6976744 C119.141324,79.7309491 110.491336,70.8407871 99.8210256,70.8407871 C89.1508821,70.8407871 80.5008945,79.7309491 80.5008945,90.6976744 C80.5008945,101.6644 89.1508821,110.554562 99.8210256,110.554562 Z" id="Path" fill="#087EA4"></path>
+            <path d="M200.715564,90.1633095 C200.715564,75.1129909 186.735973,61.8991451 164.490491,53.2292358 C168.08609,29.6400435 163.606495,10.9404515 150.536096,3.41529223 C138.863657,-3.3108368 122.698942,-0.0193199813 105.016877,12.6934961 C103.451769,13.8145412 101.898682,15.0071949 100.345431,16.247423 C98.8042012,15.0071949 97.2511146,13.8145412 95.6980281,12.6934961 C78.0159623,-0.0193199813 61.8512478,-3.32276333 50.1786439,3.41529223 C37.1202671,10.9404515 32.6400134,29.6280264 36.2481278,53.1933492 C13.9783553,61.8752756 0,75.1009739 0,90.1633095 C0,105.213628 13.9783553,118.427309 36.2242493,127.097383 C32.6281565,150.686411 37.1084102,169.386464 50.1786439,176.911129 C54.1332426,179.189435 58.6134963,180.322004 63.4879912,180.322004 C72.9861752,180.322004 84.0134026,176.028779 95.6980281,167.633288 C97.2629715,166.512242 98.8162227,165.318766 100.369309,164.079196 C101.910539,165.318766 103.463625,166.512242 105.016877,167.633288 C116.701338,176.040303 127.72873,180.322004 137.226749,180.322004 C142.101244,180.322004 146.581498,179.189435 150.536096,176.911129 C162.2087,170.184859 167.429021,154.56233 165.243732,132.917105 C165.052705,131.009024 164.800746,129.077073 164.490491,127.109236 C186.749147,118.439162 200.715564,105.22548 200.715564,90.1633095 Z M110.608219,20.4333166 C120.548401,13.2897406 129.795614,9.56897382 137.226749,9.56897382 C140.440622,9.56897382 143.308011,10.26068 145.757115,11.6679291 C154.311524,16.6051368 157.967396,30.7610886 155.350813,50.0568922 C146.748811,47.4213662 137.226749,45.4059543 126.988004,44.1178224 C120.858985,36.0680272 114.359604,28.8052682 107.70493,22.6037981 C108.672748,21.864501 109.640401,21.1250392 110.608219,20.4333166 Z M54.9576251,11.6679291 C57.4068941,10.26068 60.2741181,9.56897382 63.4879912,9.56897382 C70.9192905,9.56897382 80.1665039,13.2778882 90.1066859,20.4333166 C91.0743391,21.1250392 92.0419922,21.8524839 93.00981,22.6037981 C86.3551363,28.8052682 79.8677764,36.0561747 73.7387577,44.1059699 C63.5118697,45.3939372 53.9779504,47.4213662 45.3759489,50.0450397 C42.7593661,30.7610886 46.4033805,16.6051368 54.9576251,11.6679291 Z M9.55784712,90.1633095 C9.55784712,80.3005819 20.0236348,70.0564355 38.0760634,62.6743289 C40.0951911,71.4160114 43.1058505,80.6584603 47.0843276,90.13944 C43.0819721,99.6322721 40.0713127,108.886738 38.0521849,117.640273 C20.0236348,110.258166 9.55784712,100.025872 9.55784712,90.1633095 Z M90.1066859,159.892973 C75.8654208,170.125596 63.05785,173.320822 54.9576251,168.658854 C46.4033805,163.721976 42.7475092,149.56553 45.3639273,130.269562 C53.9659288,132.905253 63.4879912,134.920665 73.7269008,136.208632 C79.8557548,144.258427 86.3551363,151.521351 93.00981,157.722656 C92.0419922,158.47397 91.0743391,159.201415 90.1066859,159.892973 Z M100.357452,151.509334 C88.4101641,140.585317 76.9287523,125.988191 67.2393762,109.244452 C64.6468365,104.772289 59.4052723,93.5310541 57.2786092,89.1782384 C55.5820874,93.2329318 53.9063151,96.9526286 52.5920129,100.911844 C53.667366,102.903551 57.8129922,112.011178 58.9599806,114.002885 C61.2299144,117.926378 63.6075481,121.742705 66.0566524,125.439685 C59.1869081,124.235179 52.830962,122.684811 47.0484276,120.860191 C50.333936,106.048403 56.893096,88.9706558 67.2393762,71.0820025 C69.784159,66.6814478 75.3130878,56.8557591 78.0849628,52.7771962 C73.7122444,53.3377187 70.2006319,53.1521948 66.090741,53.9988226 C64.8959957,55.9307734 60.1069691,64.332027 58.9599806,66.323734 C56.6660038,70.2829492 54.5633838,74.242329 52.5920129,78.1778393 C50.2025223,71.6306726 48.3745867,65.3577585 47.0724708,59.4425583 C61.5645419,54.8749168 79.6647273,52.0008601 100.357452,52.0008601 C105.53051,52.0008601 116.334433,51.8961634 121.161171,52.2420247 C118.496996,48.7476893 116.212077,45.5847288 113.428345,42.4602889 C111.170268,42.3886803 102.663286,42.4602889 100.357452,42.4602889 C95.7935418,42.4602889 91.3253097,42.615194 86.9405697,42.8775942 C91.2894097,37.7137082 95.7935418,32.9911617 100.357452,28.8171207 C112.292719,39.7411372 123.786152,54.3382638 133.475364,71.0820025 C136.020147,75.4827218 141.51861,85.7268682 143.681008,90.1633095 C145.389387,86.1084515 147.00571,82.4104842 148.331869,78.4272348 C147.256516,76.42384 142.901748,68.2914068 141.754759,66.3117169 C139.484826,62.3882237 137.107357,58.5718964 134.658088,54.8869339 C141.527832,56.0914401 147.883778,57.641643 153.666312,59.4664278 C150.380804,74.2782157 143.821644,91.3557986 133.475364,109.244452 C130.930581,113.645007 123.688169,123.722395 120.916458,127.800958 C125.289177,127.240436 130.024683,126.402533 134.134573,125.555905 C135.329319,123.623954 140.607936,115.994427 141.754759,114.002885 C144.036715,110.067375 146.139499,106.131864 148.086827,102.208207 C150.404683,108.576599 152.24464,114.83766 153.582656,120.895913 C139.102441,125.463555 121.026299,128.325759 100.357452,128.325759 C95.18423,128.325759 83.1564137,127.646383 78.3296756,127.300521 C80.9940152,130.794692 83.8635448,134.432738 86.647112,137.557343 C88.9051888,137.628787 98.0516187,137.86633 100.357452,137.86633 C104.921198,137.86633 109.389595,137.71126 113.77417,137.44886 C109.413474,142.612746 104.921198,147.335293 100.357452,151.509334 Z M145.757115,168.658854 C137.65689,173.333991 124.837462,170.13712 110.608219,159.892973 C109.640401,159.201415 108.672748,158.47397 107.70493,157.722656 C114.359604,151.521351 120.846964,144.270444 126.975982,136.220484 C137.191014,134.932517 146.701054,132.917105 155.291199,130.293432 C155.458348,131.497938 155.625662,132.702444 155.745054,133.883081 C157.501354,151.318542 153.857505,163.983718 145.757115,168.658854 Z M162.662555,117.652126 C160.607692,108.779407 157.561133,99.5369585 153.630412,90.1990315 C157.632768,80.7061994 160.643592,71.4517334 162.662555,62.6981984 C180.690611,70.0803051 191.157601,80.3005819 191.157601,90.1633095 C191.157601,100.025872 180.703786,110.258166 162.662555,117.652126 Z" id="Shape" fill="#087EA4"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/images/docs/diagrams/conditional_render_tree.dark.png b/public/images/docs/diagrams/conditional_render_tree.dark.png
new file mode 100644
index 000000000..5189a44c8
Binary files /dev/null and b/public/images/docs/diagrams/conditional_render_tree.dark.png differ
diff --git a/public/images/docs/diagrams/conditional_render_tree.png b/public/images/docs/diagrams/conditional_render_tree.png
new file mode 100644
index 000000000..c76e8cb63
Binary files /dev/null and b/public/images/docs/diagrams/conditional_render_tree.png differ
diff --git a/public/images/docs/diagrams/generic_dependency_tree.dark.png b/public/images/docs/diagrams/generic_dependency_tree.dark.png
new file mode 100644
index 000000000..64694f585
Binary files /dev/null and b/public/images/docs/diagrams/generic_dependency_tree.dark.png differ
diff --git a/public/images/docs/diagrams/generic_dependency_tree.png b/public/images/docs/diagrams/generic_dependency_tree.png
new file mode 100644
index 000000000..8ab6f1a34
Binary files /dev/null and b/public/images/docs/diagrams/generic_dependency_tree.png differ
diff --git a/public/images/docs/diagrams/generic_render_tree.dark.png b/public/images/docs/diagrams/generic_render_tree.dark.png
new file mode 100644
index 000000000..859fdaa96
Binary files /dev/null and b/public/images/docs/diagrams/generic_render_tree.dark.png differ
diff --git a/public/images/docs/diagrams/generic_render_tree.png b/public/images/docs/diagrams/generic_render_tree.png
new file mode 100644
index 000000000..952cf5faa
Binary files /dev/null and b/public/images/docs/diagrams/generic_render_tree.png differ
diff --git a/public/images/docs/diagrams/module_dependency_tree.dark.png b/public/images/docs/diagrams/module_dependency_tree.dark.png
new file mode 100644
index 000000000..e8a85f7c0
Binary files /dev/null and b/public/images/docs/diagrams/module_dependency_tree.dark.png differ
diff --git a/public/images/docs/diagrams/module_dependency_tree.png b/public/images/docs/diagrams/module_dependency_tree.png
new file mode 100644
index 000000000..0dcaaa7aa
Binary files /dev/null and b/public/images/docs/diagrams/module_dependency_tree.png differ
diff --git a/public/images/docs/diagrams/prerender.dark.png b/public/images/docs/diagrams/prerender.dark.png
new file mode 100644
index 000000000..1e7d67e13
Binary files /dev/null and b/public/images/docs/diagrams/prerender.dark.png differ
diff --git a/public/images/docs/diagrams/prerender.png b/public/images/docs/diagrams/prerender.png
new file mode 100644
index 000000000..ababa5493
Binary files /dev/null and b/public/images/docs/diagrams/prerender.png differ
diff --git a/public/images/docs/diagrams/prewarm.dark.png b/public/images/docs/diagrams/prewarm.dark.png
new file mode 100644
index 000000000..461406039
Binary files /dev/null and b/public/images/docs/diagrams/prewarm.dark.png differ
diff --git a/public/images/docs/diagrams/prewarm.png b/public/images/docs/diagrams/prewarm.png
new file mode 100644
index 000000000..f6ec1c49d
Binary files /dev/null and b/public/images/docs/diagrams/prewarm.png differ
diff --git a/public/images/docs/diagrams/render_tree.dark.png b/public/images/docs/diagrams/render_tree.dark.png
new file mode 100644
index 000000000..117d7ff3e
Binary files /dev/null and b/public/images/docs/diagrams/render_tree.dark.png differ
diff --git a/public/images/docs/diagrams/render_tree.png b/public/images/docs/diagrams/render_tree.png
new file mode 100644
index 000000000..1ea750bb0
Binary files /dev/null and b/public/images/docs/diagrams/render_tree.png differ
diff --git a/public/images/docs/diagrams/use_client_module_dependency.dark.png b/public/images/docs/diagrams/use_client_module_dependency.dark.png
new file mode 100644
index 000000000..c50e7308b
Binary files /dev/null and b/public/images/docs/diagrams/use_client_module_dependency.dark.png differ
diff --git a/public/images/docs/diagrams/use_client_module_dependency.png b/public/images/docs/diagrams/use_client_module_dependency.png
new file mode 100644
index 000000000..d535246f7
Binary files /dev/null and b/public/images/docs/diagrams/use_client_module_dependency.png differ
diff --git a/public/images/docs/diagrams/use_client_render_tree.dark.png b/public/images/docs/diagrams/use_client_render_tree.dark.png
new file mode 100644
index 000000000..8d3e6a484
Binary files /dev/null and b/public/images/docs/diagrams/use_client_render_tree.dark.png differ
diff --git a/public/images/docs/diagrams/use_client_render_tree.png b/public/images/docs/diagrams/use_client_render_tree.png
new file mode 100644
index 000000000..ad3840681
Binary files /dev/null and b/public/images/docs/diagrams/use_client_render_tree.png differ
diff --git a/public/images/team/dave-mccabe.jpg b/public/images/team/dave-mccabe.jpg
deleted file mode 100644
index 505f75617..000000000
Binary files a/public/images/team/dave-mccabe.jpg and /dev/null differ
diff --git a/public/images/team/jack-pope.jpg b/public/images/team/jack-pope.jpg
new file mode 100644
index 000000000..601e5840e
Binary files /dev/null and b/public/images/team/jack-pope.jpg differ
diff --git a/public/images/team/lauren.jpg b/public/images/team/lauren.jpg
index 1485cf8ff..cb08b9725 100644
Binary files a/public/images/team/lauren.jpg and b/public/images/team/lauren.jpg differ
diff --git a/public/images/team/lesiutin.jpg b/public/images/team/lesiutin.jpg
new file mode 100644
index 000000000..edfc942e0
Binary files /dev/null and b/public/images/team/lesiutin.jpg differ
diff --git a/public/images/team/lunaruan.jpg b/public/images/team/lunaruan.jpg
deleted file mode 100644
index f6de76d4e..000000000
Binary files a/public/images/team/lunaruan.jpg and /dev/null differ
diff --git a/public/images/team/mengdi-chen.jpg b/public/images/team/mengdi-chen.jpg
deleted file mode 100644
index 7a47ea4f7..000000000
Binary files a/public/images/team/mengdi-chen.jpg and /dev/null differ
diff --git a/public/images/team/noahlemen.jpg b/public/images/team/noahlemen.jpg
new file mode 100644
index 000000000..e3f788d89
Binary files /dev/null and b/public/images/team/noahlemen.jpg differ
diff --git a/public/images/team/sean-keegan.jpg b/public/images/team/sean-keegan.jpg
deleted file mode 100644
index 38873c9d0..000000000
Binary files a/public/images/team/sean-keegan.jpg and /dev/null differ
diff --git a/public/images/uwu.png b/public/images/uwu.png
new file mode 100644
index 000000000..a09d245ea
Binary files /dev/null and b/public/images/uwu.png differ
diff --git a/public/mstile-150x150.png b/public/mstile-150x150.png
new file mode 100644
index 000000000..d36e7ee9e
Binary files /dev/null and b/public/mstile-150x150.png differ
diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg
new file mode 100644
index 000000000..7e4874b2f
--- /dev/null
+++ b/public/safari-pinned-tab.svg
@@ -0,0 +1,60 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="397.000000pt" height="397.000000pt" viewBox="0 0 397.000000 397.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,397.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1151 3759 c-30 -5 -88 -25 -129 -45 -185 -89 -296 -291 -321 -581
+-10 -112 -3 -294 14 -386 6 -28 4 -37 -6 -37 -26 0 -264 -121 -349 -178 -266
+-177 -394 -414 -346 -640 49 -233 242 -423 600 -592 101 -48 107 -53 102 -76
+-17 -65 -25 -276 -15 -387 30 -351 184 -567 444 -622 89 -19 122 -19 231 0
+158 28 355 120 525 246 43 33 81 59 84 59 3 0 41 -26 84 -59 170 -126 367
+-218 525 -246 109 -19 142 -19 231 0 262 55 413 269 445 628 9 102 0 319 -16
+381 -5 23 1 28 102 76 359 169 551 359 600 592 48 228 -80 460 -355 643 -93
+62 -312 175 -340 175 -10 0 -12 9 -7 34 15 81 23 275 15 379 -28 373 -196 597
+-479 638 -73 10 -99 10 -184 -5 -170 -28 -372 -122 -549 -255 -37 -28 -70 -51
+-72 -51 -2 0 -35 23 -72 51 -169 127 -379 226 -537 254 -97 16 -143 17 -225 4z
+m238 -195 c91 -22 253 -100 361 -174 l90 -62 -77 -82 c-96 -99 -203 -222 -263
+-298 -30 -39 -52 -58 -66 -58 -43 0 -262 -42 -398 -76 -76 -19 -141 -33 -143
+-30 -2 2 -7 75 -10 162 -6 182 9 298 54 411 36 90 126 184 199 206 65 21 172
+21 253 1z m1447 -1 c73 -24 162 -118 197 -206 45 -111 60 -229 54 -406 -3 -84
+-9 -157 -14 -162 -4 -4 -68 8 -141 26 -109 28 -276 60 -398 77 -13 2 -52 40
+-99 98 -42 52 -128 149 -190 216 l-114 121 47 35 c119 88 275 168 392 199 84
+23 202 24 266 2z m-737 -473 c60 -61 119 -123 129 -138 l20 -27 -263 0 -263 0
+18 25 c28 39 231 250 241 250 5 0 58 -50 118 -110z m284 -366 c33 -8 79 -69
+203 -271 90 -146 244 -441 244 -468 0 -22 -128 -274 -207 -407 -105 -178 -203
+-318 -232 -331 -37 -16 -776 -16 -813 0 -47 21 -237 322 -368 583 -38 77 -70
+147 -70 155 0 22 129 275 207 407 79 135 198 314 214 324 26 16 190 22 484 19
+171 -2 323 -7 338 -11z m-1083 -48 c0 -2 -30 -53 -67 -113 -38 -60 -95 -159
+-128 -221 -33 -61 -63 -112 -66 -112 -10 0 -116 358 -107 365 6 4 136 39 228
+61 91 21 140 28 140 20z m1599 -42 c74 -19 136 -36 139 -38 8 -9 -97 -366
+-108 -366 -3 0 -28 41 -54 90 -26 50 -83 149 -127 221 -43 72 -79 133 -79 136
+0 9 93 -8 229 -43z m-2120 -196 c21 -84 90 -291 136 -409 l18 -45 -41 -105
+c-46 -120 -104 -299 -122 -382 -15 -67 -10 -67 -135 -5 -190 95 -342 222 -406
+340 -32 58 -34 69 -34 153 0 78 4 97 27 140 68 131 201 244 402 345 66 33 122
+60 125 60 4 0 17 -42 30 -92z m2556 40 c191 -95 341 -221 405 -339 33 -60 35
+-70 35 -154 0 -84 -2 -94 -35 -154 -64 -118 -214 -244 -405 -339 -125 -62
+-120 -62 -135 5 -18 83 -76 262 -122 382 l-41 105 18 45 c46 118 115 325 136
+408 27 107 16 104 144 41z m-2241 -829 c26 -50 84 -149 127 -221 44 -72 79
+-132 79 -135 0 -9 -93 8 -229 43 -74 19 -136 36 -138 38 -9 9 95 366 106 366
+4 0 28 -41 55 -91z m1851 57 c14 -34 95 -311 95 -326 0 -14 -354 -99 -365 -88
+-3 2 31 64 75 138 44 73 101 173 127 221 26 49 48 89 50 89 2 0 10 -15 18 -34z
+m-1885 -556 c115 -29 333 -70 374 -70 14 0 36 -19 66 -57 60 -77 167 -200 263
+-299 l78 -82 -63 -44 c-130 -93 -299 -175 -406 -197 -75 -16 -169 -14 -232 5
+-77 23 -166 114 -203 207 -44 111 -60 229 -54 404 3 84 8 157 12 163 4 7 17 9
+29 6 11 -4 73 -20 136 -36z m2024 -37 c17 -201 -1 -375 -51 -501 -37 -92 -126
+-183 -203 -206 -67 -20 -166 -20 -250 0 -87 20 -245 97 -359 173 l-92 62 83
+87 c101 105 209 229 263 300 26 35 46 52 61 52 45 0 264 42 389 74 72 19 135
+34 141 35 7 1 14 -29 18 -76z m-867 -107 c-17 -21 -74 -83 -128 -139 l-98
+-100 -39 31 c-33 26 -183 185 -219 232 -10 13 19 15 252 15 l263 0 -31 -39z"/>
+<path d="M1912 2360 c-62 -13 -157 -67 -198 -113 -20 -22 -50 -69 -67 -106
+-27 -58 -31 -77 -31 -151 0 -74 4 -93 31 -151 43 -92 91 -142 180 -186 70 -34
+82 -37 162 -37 75 0 94 4 152 31 92 43 142 91 186 180 34 70 37 82 37 163 0
+81 -3 93 -37 163 -43 87 -94 137 -181 178 -68 32 -164 44 -234 29z"/>
+</g>
+</svg>
diff --git a/public/site.webmanifest b/public/site.webmanifest
new file mode 100644
index 000000000..337446d52
--- /dev/null
+++ b/public/site.webmanifest
@@ -0,0 +1,19 @@
+{
+    "name": "React",
+    "short_name": "React",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-384x384.png",
+            "sizes": "384x384",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#23272f",
+    "background_color": "#23272f",
+    "display": "standalone"
+}
diff --git a/scripts/generateRss.js b/scripts/generateRss.js
new file mode 100644
index 000000000..e0f3d5561
--- /dev/null
+++ b/scripts/generateRss.js
@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+const {generateRssFeed} = require('../src/utils/rss');
+
+generateRssFeed();
diff --git a/src/components/ButtonLink.tsx b/src/components/ButtonLink.tsx
index 15ab83f2b..23c971756 100644
--- a/src/components/ButtonLink.tsx
+++ b/src/components/ButtonLink.tsx
@@ -26,7 +26,8 @@ function ButtonLink({
     className,
     'active:scale-[.98] transition-transform inline-flex font-bold items-center outline-none focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark leading-snug',
     {
-      'bg-link text-white hover:bg-opacity-80': type === 'primary',
+      'bg-link text-white dark:bg-brand-dark dark:text-secondary hover:bg-opacity-80':
+        type === 'primary',
       'text-primary dark:text-primary-dark 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':
         type === 'secondary',
       'text-lg py-3 rounded-full px-4 sm:px-6': size === 'lg',
diff --git a/src/components/DocsFooter.tsx b/src/components/DocsFooter.tsx
index 2fdbb0460..5f2330e7e 100644
--- a/src/components/DocsFooter.tsx
+++ b/src/components/DocsFooter.tsx
@@ -27,7 +27,7 @@ export const DocsPageFooter = memo<DocsPageFooterProps>(
       <>
         {prevRoute?.path || nextRoute?.path ? (
           <>
-            <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-4 py-4 md:py-12">
+            <div className="grid grid-cols-1 gap-4 py-4 mx-auto max-w-7xl md:grid-cols-2 md:py-12">
               {prevRoute?.path ? (
                 <FooterLink
                   type="Previous"
@@ -69,21 +69,23 @@ function FooterLink({
     <NextLink
       href={href}
       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 gap-x-4 md:gap-x-6 items-center w-full md:min-w-80 md:w-fit md:max-w-md 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-end': type === 'Next',
         }
       )}>
       <IconNavArrow
-        className="text-tertiary dark:text-tertiary-dark inline group-focus:text-link dark:group-focus:text-link-dark"
+        className="inline text-tertiary dark:text-tertiary-dark group-focus:text-link dark:group-focus:text-link-dark"
         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">
+      <div className="flex flex-col overflow-hidden">
+        <span className="text-sm font-bold tracking-wide no-underline uppercase text-secondary dark:text-secondary-dark group-focus:text-link dark:group-focus:text-link-dark group-focus:text-opacity-100">
           {type}
         </span>
-        <span className="block text-lg group-hover:underline">{title}</span>
-      </span>
+        <span className="text-lg break-words group-hover:underline">
+          {title}
+        </span>
+      </div>
     </NextLink>
   );
 }
diff --git a/src/components/ErrorDecoderContext.tsx b/src/components/ErrorDecoderContext.tsx
new file mode 100644
index 000000000..080969efe
--- /dev/null
+++ b/src/components/ErrorDecoderContext.tsx
@@ -0,0 +1,23 @@
+// Error Decoder requires reading pregenerated error message from getStaticProps,
+// but MDX component doesn't support props. So we use React Context to populate
+// the value without prop-drilling.
+// TODO: Replace with React.cache + React.use when migrating to Next.js App Router
+
+import {createContext, useContext} from 'react';
+
+const notInErrorDecoderContext = Symbol('not in error decoder context');
+
+export const ErrorDecoderContext = createContext<
+  | {errorMessage: string | null; errorCode: string | null}
+  | typeof notInErrorDecoderContext
+>(notInErrorDecoderContext);
+
+export const useErrorDecoderParams = () => {
+  const params = useContext(ErrorDecoderContext);
+
+  if (params === notInErrorDecoderContext) {
+    throw new Error('useErrorDecoder must be used in error decoder pages only');
+  }
+
+  return params;
+};
diff --git a/src/components/Icon/IconBsky.tsx b/src/components/Icon/IconBsky.tsx
new file mode 100644
index 000000000..6645152dd
--- /dev/null
+++ b/src/components/Icon/IconBsky.tsx
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconBsky = memo<JSX.IntrinsicElements['svg']>(function IconBsky(
+  props
+) {
+  return (
+    <svg
+      aria-label="Bluesky"
+      viewBox="0 0 16 16"
+      height="1.25em"
+      width="1.25em"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}>
+      <path
+        className="x19hqcy"
+        d="M3.468 1.948C5.303 3.325 7.276 6.118 8 7.616c.725-1.498 2.697-4.29 4.532-5.668C13.855.955 16 .186 16 2.632c0 .489-.28 4.105-.444 4.692-.572 2.04-2.653 2.561-4.504 2.246 3.236.551 4.06 2.375 2.281 4.2-3.376 3.464-4.852-.87-5.23-1.98-.07-.204-.103-.3-.103-.218 0-.081-.033.014-.102.218-.379 1.11-1.855 5.444-5.231 1.98-1.778-1.825-.955-3.65 2.28-4.2-1.85.315-3.932-.205-4.503-2.246C.28 6.737 0 3.12 0 2.632 0 .186 2.145.955 3.468 1.948Z"></path>
+    </svg>
+  );
+});
diff --git a/src/components/Icon/IconCanary.tsx b/src/components/Icon/IconCanary.tsx
index a7782b141..7f584fed7 100644
--- a/src/components/Icon/IconCanary.tsx
+++ b/src/components/Icon/IconCanary.tsx
@@ -4,29 +4,35 @@
 
 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>
-    );
+export const IconCanary = memo<
+  JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'}
+>(function IconCanary(
+  {className, title, size} = {
+    className: undefined,
+    title: undefined,
+    size: 'md',
   }
-);
+) {
+  return (
+    <svg
+      className={className}
+      width={size === 's' ? '12px' : '20px'}
+      height={size === 's' ? '12px' : '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/Icon/IconGitHub.tsx b/src/components/Icon/IconGitHub.tsx
index de2a982bd..49d7fb460 100644
--- a/src/components/Icon/IconGitHub.tsx
+++ b/src/components/Icon/IconGitHub.tsx
@@ -9,8 +9,8 @@ export const IconGitHub = memo<JSX.IntrinsicElements['svg']>(
     return (
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="1.33em"
-        height="1.33em"
+        width="1.5em"
+        height="1.5em"
         viewBox="0 -2 24 24"
         fill="currentColor"
         {...props}>
diff --git a/src/components/Icon/IconRocket.tsx b/src/components/Icon/IconRocket.tsx
new file mode 100644
index 000000000..457736c7c
--- /dev/null
+++ b/src/components/Icon/IconRocket.tsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconRocket = memo<
+  JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'}
+>(function IconRocket({className, size = 'md'}) {
+  return (
+    <svg
+      className={className}
+      aria-hidden="true"
+      width={size === 's' ? '1.2em' : '1.5em'}
+      height={size === 's' ? '1.2em' : '1.5em'}
+      fill="currentColor"
+      version="1.1"
+      viewBox="0 0 1200 1200"
+      xmlns="http://www.w3.org/2000/svg">
+      <g fillRule="evenodd">
+        <path d="m911.8 288.2c65.051 65.051 65.051 170.6 0 235.65-65.051 65.051-170.6 65.051-235.65 0-65.051-65.051-65.051-170.6 0-235.65 65.051-65.051 170.6-65.051 235.65 0zm-53.051 53.051c-35.75-35.801-93.801-35.801-129.55 0-35.801 35.75-35.801 93.801 0 129.55 35.75 35.801 93.801 35.801 129.55 0 35.801-35.75 35.801-93.801 0-129.55z" />
+        <path d="m1122.2 103.4s96.648 328.1-194.4 619.1c-130.75 130.75-303.25 226.75-440.75 250.5-12.102 2.0508-24.449-1.8984-33.102-10.648l-231.55-234.8c-8.6484-8.8008-12.449-21.301-10.102-33.398 26.102-135.4 135.45-292.2 265.2-421.95 291-291.05 619.1-194.4 619.1-194.4 12.352 3.6016 22 13.25 25.602 25.602zm-67.5 41.898c-70.898-12.898-308.6-35.602-524.15 179.9-112.35 112.35-210.4 245.4-240.4 364.25 0 0 203.05 205.9 203.1 205.9 121.75-26.852 268.4-112.75 381.55-225.9 215.5-215.55 192.8-453.25 179.9-524.15z" />
+        <path d="m151.55 543.85 124 20.648c20.398 3.3984 34.25 22.75 30.801 43.148-3.3984 20.449-22.699 34.25-43.148 30.852l-144.35-24.051c-22.148-3.6992-40.699-18.949-48.602-40-7.9492-21.051-4.0508-44.699 10.199-62.148l122.85-150.15c15.051-18.398 36.898-30 60.551-32.148l179.55-16.301c20.602-1.8984 38.852 13.352 40.75 33.949 1.8516 20.602-13.352 38.852-33.949 40.75l-179.55 16.301c-3.6484 0.35156-7 2.1016-9.3008 4.9492z" />
+        <path d="m656.15 1048.4 134.2-109.8c2.8516-2.3008 4.6016-5.6484 4.9492-9.3008l16.301-179.55c1.8984-20.602 20.148-35.801 40.75-33.949 20.602 1.8984 35.852 20.148 33.949 40.75l-16.301 179.55c-2.1484 23.648-13.75 45.5-32.148 60.551l-150.15 122.85c-17.449 14.25-41.102 18.148-62.148 10.199-21.051-7.8984-36.301-26.449-40-48.602l-29.25-175.7c-3.3984-20.398 10.398-39.75 30.801-43.148 20.449-3.3984 39.75 10.449 43.148 30.852l25.898 155.3z" />
+        <path d="m310.9 560.4c-14.648-14.648-14.648-38.398 0-53.051 14.648-14.648 38.398-14.648 53.051 0l328.7 328.7c14.648 14.648 14.648 38.398 0 53.051-14.648 14.648-38.398 14.648-53.051 0z" />
+        <path d="m383.95 982.15c14.648-14.602 38.398-14.602 53.051 0 14.602 14.648 14.602 38.398 0 53.051l-91.352 91.301c-14.602 14.648-38.398 14.648-53 0-14.648-14.602-14.648-38.398 0-53z" />
+        <path d="m237.85 909.1c14.648-14.602 38.398-14.602 53.051 0 14.602 14.648 14.602 38.398 0 53.051l-127.85 127.85c-14.648 14.648-38.398 14.648-53.051 0-14.648-14.648-14.648-38.398 0-53.051z" />
+        <path d="m164.8 763c14.648-14.602 38.398-14.602 53.051 0 14.602 14.648 14.602 38.398 0 53.051l-91.352 91.301c-14.602 14.648-38.398 14.648-53 0-14.648-14.602-14.648-38.398 0-53z" />
+      </g>
+    </svg>
+  );
+});
diff --git a/src/components/Icon/IconThreads.tsx b/src/components/Icon/IconThreads.tsx
new file mode 100644
index 000000000..5a007657f
--- /dev/null
+++ b/src/components/Icon/IconThreads.tsx
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconThreads = memo<JSX.IntrinsicElements['svg']>(
+  function IconThreads(props) {
+    return (
+      <svg
+        aria-label="Threads"
+        viewBox="0 0 192 192"
+        height="1.40em"
+        width="1.40em"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}>
+        <path
+          className="x19hqcy"
+          d="M141.537 88.9883C140.71 88.5919 139.87 88.2104 139.019 87.8451C137.537 60.5382 122.616 44.905 97.5619 44.745C97.4484 44.7443 97.3355 44.7443 97.222 44.7443C82.2364 44.7443 69.7731 51.1409 62.102 62.7807L75.881 72.2328C81.6116 63.5383 90.6052 61.6848 97.2286 61.6848C97.3051 61.6848 97.3819 61.6848 97.4576 61.6855C105.707 61.7381 111.932 64.1366 115.961 68.814C118.893 72.2193 120.854 76.925 121.825 82.8638C114.511 81.6207 106.601 81.2385 98.145 81.7233C74.3247 83.0954 59.0111 96.9879 60.0396 116.292C60.5615 126.084 65.4397 134.508 73.775 140.011C80.8224 144.663 89.899 146.938 99.3323 146.423C111.79 145.74 121.563 140.987 128.381 132.296C133.559 125.696 136.834 117.143 138.28 106.366C144.217 109.949 148.617 114.664 151.047 120.332C155.179 129.967 155.42 145.8 142.501 158.708C131.182 170.016 117.576 174.908 97.0135 175.059C74.2042 174.89 56.9538 167.575 45.7381 153.317C35.2355 139.966 29.8077 120.682 29.6052 96C29.8077 71.3178 35.2355 52.0336 45.7381 38.6827C56.9538 24.4249 74.2039 17.11 97.0132 16.9405C119.988 17.1113 137.539 24.4614 149.184 38.788C154.894 45.8136 159.199 54.6488 162.037 64.9503L178.184 60.6422C174.744 47.9622 169.331 37.0357 161.965 27.974C147.036 9.60668 125.202 0.195148 97.0695 0H96.9569C68.8816 0.19447 47.2921 9.6418 32.7883 28.0793C19.8819 44.4864 13.2244 67.3157 13.0007 95.9325L13 96L13.0007 96.0675C13.2244 124.684 19.8819 147.514 32.7883 163.921C47.2921 182.358 68.8816 191.806 96.9569 192H97.0695C122.03 191.827 139.624 185.292 154.118 170.811C173.081 151.866 172.51 128.119 166.26 113.541C161.776 103.087 153.227 94.5962 141.537 88.9883ZM98.4405 129.507C88.0005 130.095 77.1544 125.409 76.6196 115.372C76.2232 107.93 81.9158 99.626 99.0812 98.6368C101.047 98.5234 102.976 98.468 104.871 98.468C111.106 98.468 116.939 99.0737 122.242 100.233C120.264 124.935 108.662 128.946 98.4405 129.507Z"></path>
+      </svg>
+    );
+  }
+);
diff --git a/src/components/Icon/IconTwitter.tsx b/src/components/Icon/IconTwitter.tsx
index 951171524..e7b0cf09e 100644
--- a/src/components/Icon/IconTwitter.tsx
+++ b/src/components/Icon/IconTwitter.tsx
@@ -9,13 +9,13 @@ export const IconTwitter = memo<JSX.IntrinsicElements['svg']>(
     return (
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        width="1.33em"
-        height="1.33em"
+        viewBox="0 0 512 512"
+        height="1.30em"
+        width="1.30em"
         fill="currentColor"
         {...props}>
         <path fill="none" d="M0 0h24v24H0z" />
-        <path d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z" />
+        <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
       </svg>
     );
   }
diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx
index 7b656d72e..a41da27f8 100644
--- a/src/components/Layout/Feedback.tsx
+++ b/src/components/Layout/Feedback.tsx
@@ -4,7 +4,7 @@
 
 import {useState} from 'react';
 import {useRouter} from 'next/router';
-import {ga} from '../../utils/analytics';
+import cn from 'classnames';
 
 export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) {
   const {asPath} = useRouter();
@@ -46,31 +46,41 @@ const thumbsDownIcon = (
 );
 
 function sendGAEvent(isPositive: boolean) {
+  const category = isPositive ? 'like_button' : 'dislike_button';
+  const value = isPositive ? 1 : 0;
   // Fragile. Don't change unless you've tested the network payload
   // and verified that the right events actually show up in GA.
-  ga(
-    'send',
-    'event',
-    'button',
-    'feedback',
-    window.location.pathname,
-    isPositive ? '1' : '0'
-  );
+  // @ts-ignore
+  gtag('event', 'feedback', {
+    event_category: category,
+    event_label: window.location.pathname,
+    event_value: value,
+  });
 }
 
 function SendFeedback({onSubmit}: {onSubmit: () => void}) {
   const [isSubmitted, setIsSubmitted] = useState(false);
   return (
+<<<<<<< HEAD
     <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 me-4">
         {isSubmitted
           ? 'Санал өгсөнд баярлалаа!'
           : 'Энэ хуудас хэрэг болж байна уу?'}
+=======
+    <div
+      className={cn(
+        'max-w-custom-xs w-80 lg:w-auto py-3 shadow-lg rounded-lg m-4 bg-wash dark:bg-gray-95 px-4 flex',
+        {exit: isSubmitted}
+      )}>
+      <p className="w-full text-lg font-bold text-primary dark:text-primary-dark me-4">
+        {isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'}
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
       </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 me-2"
+          className="px-3 rounded-lg bg-secondary-button dark:bg-secondary-button-dark text-primary dark:text-primary-dark me-2"
           onClick={() => {
             setIsSubmitted(true);
             onSubmit();
@@ -82,7 +92,7 @@ function SendFeedback({onSubmit}: {onSubmit: () => void}) {
       {!isSubmitted && (
         <button
           aria-label="No"
-          className="bg-secondary-button dark:bg-secondary-button-dark rounded-lg text-primary dark:text-primary-dark px-3"
+          className="px-3 rounded-lg bg-secondary-button dark:bg-secondary-button-dark text-primary dark:text-primary-dark"
           onClick={() => {
             setIsSubmitted(true);
             onSubmit();
diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx
index 56083fe76..b7dbea29d 100644
--- a/src/components/Layout/Footer.tsx
+++ b/src/components/Layout/Footer.tsx
@@ -8,6 +8,7 @@ import cn from 'classnames';
 import {ExternalLink} from 'components/ExternalLink';
 import {IconFacebookCircle} from 'components/Icon/IconFacebookCircle';
 import {IconTwitter} from 'components/Icon/IconTwitter';
+import {IconBsky} from 'components/Icon/IconBsky';
 import {IconGitHub} from 'components/Icon/IconGitHub';
 
 export function Footer() {
@@ -283,7 +284,31 @@ export function Footer() {
           <div
             className="text-xs text-left rtl:text-right mt-2 pe-0.5"
             dir="ltr">
-            &copy;{new Date().getFullYear()}
+            Copyright &copy; Meta Platforms, Inc
+          </div>
+          <div
+            className="uwu-visible text-xs cursor-pointer hover:text-link hover:dark:text-link-dark hover:underline"
+            onClick={() => {
+              // @ts-ignore
+              window.__setUwu(false);
+            }}>
+            no uwu plz
+          </div>
+          <div
+            className="uwu-hidden text-xs cursor-pointer hover:text-link hover:dark:text-link-dark hover:underline"
+            onClick={() => {
+              // @ts-ignore
+              window.__setUwu(true);
+            }}>
+            uwu?
+          </div>
+          <div className="uwu-visible text-xs">
+            Logo by
+            <ExternalLink
+              className="ms-1"
+              href="https://twitter.com/sawaratsuki1004">
+              @sawaratsuki1004
+            </ExternalLink>
           </div>
         </div>
         <div className="flex flex-col">
@@ -331,7 +356,7 @@ export function Footer() {
           <FooterLink href="https://opensource.fb.com/legal/terms/">
             Ашиглах нөхцөл
           </FooterLink>
-          <div className="flex flex-row mt-8 gap-x-2">
+          <div className="flex flex-row items-center mt-8 gap-x-2">
             <ExternalLink
               aria-label="React on Facebook"
               href="https://www.facebook.com/react"
@@ -344,6 +369,12 @@ export function Footer() {
               className={socialLinkClasses}>
               <IconTwitter />
             </ExternalLink>
+            <ExternalLink
+              aria-label="React on Bluesky"
+              href="https://bsky.app/profile/react.dev"
+              className={socialLinkClasses}>
+              <IconBsky />
+            </ExternalLink>
             <ExternalLink
               aria-label="React on Github"
               href="https://github.com/facebook/react"
diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index be7e310a1..2ebae6f39 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -26,6 +26,8 @@ import Link from 'components/MDX/Link';
 import CodeBlock from 'components/MDX/CodeBlock';
 import {ExternalLink} from 'components/ExternalLink';
 import sidebarBlog from '../../sidebarBlog.json';
+import * as React from 'react';
+import Image from 'next/image';
 
 function Section({children, background = null}) {
   return (
@@ -115,12 +117,22 @@ export function HomeContent() {
     <>
       <div className="ps-0">
         <div className="mx-5 mt-12 lg:mt-24 mb-20 lg:mb-32 flex flex-col justify-center">
+          <div className="uwu-visible flex justify-center">
+            <Image
+              alt="logo by @sawaratsuki1004"
+              title="logo by @sawaratsuki1004"
+              loading="eager"
+              width={313}
+              height={160}
+              src="/images/uwu.png"
+            />
+          </div>
           <Logo
             className={cn(
-              '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'
+              'uwu-hidden mt-4 mb-3 text-brand dark:text-brand-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">
+          <h1 className="uwu-hidden text-5xl font-display lg:text-6xl self-center flex font-semibold leading-snug text-primary dark:text-primary-dark">
             React
           </h1>
           <p className="text-4xl font-display max-w-lg md:max-w-full py-1 text-center text-secondary dark:text-primary-dark leading-snug self-center">
@@ -487,7 +499,15 @@ export function HomeContent() {
           </div>
 
           <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" />
+            <div className="uwu-visible flex justify-center">
+              <img
+                alt="logo by @sawaratsuki1004"
+                title="logo by @sawaratsuki1004"
+                className="uwu-visible mb-10 lg:mb-8 h-24 lg:h-32"
+                src="/images/uwu.png"
+              />
+            </div>
+            <Logo className="uwu-hidden text-brand dark:text-brand-dark w-24 lg:w-28 mb-10 lg:mb-8 mt-12 h-auto mx-auto self-start" />
             <Header>
               React-ын нэгдэлд <br className="hidden lg:inline" />
               тавтай морилно уу
@@ -1497,7 +1517,7 @@ function ConferenceLayout({conf, children}) {
               navigate(e.target.value);
             });
           }}
-          className="appearance-none pe-8 bg-transparent text-primary-dark text-2xl font-bold mb-0.5"
+          className="appearance-none pe-8 ps-2 bg-transparent text-primary-dark text-2xl font-bold mb-0.5"
           style={{
             backgroundSize: '4px 4px, 4px 4px',
             backgroundRepeat: 'no-repeat',
@@ -1506,8 +1526,16 @@ function ConferenceLayout({conf, children}) {
             backgroundImage:
               'linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%)',
           }}>
-          <option value="react-conf-2021">React Conf 2021</option>
-          <option value="react-conf-2019">React Conf 2019</option>
+          <option
+            className="bg-wash dark:bg-wash-dark text-primary dark:text-primary-dark"
+            value="react-conf-2021">
+            React Conf 2021
+          </option>
+          <option
+            className="bg-wash dark:bg-wash-dark text-primary dark:text-primary-dark"
+            value="react-conf-2019">
+            React Conf 2019
+          </option>
         </select>
       </Cover>
       <div className="px-4 pb-4" key={conf.id}>
@@ -1610,7 +1638,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 me-1 w-4 h-4 text-link-dark" />
+              <Logo className="text-xs me-1 w-4 h-4 text-brand text-brand-dark" />
               React Conf
             </span>
           </div>
@@ -1652,8 +1680,8 @@ function LikeButton({video}) {
     <button
       data-hover="LikeButton"
       className={cn(
-        'outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full text-tertiary hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50',
-        isLiked && 'text-red-50'
+        'outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50',
+        isLiked ? 'text-red-50' : 'text-tertiary'
       )}
       aria-label={isLiked ? 'Unsave' : 'Save'}
       onClick={() => {
diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
index fb771f901..24d379589 100644
--- a/src/components/Layout/Page.tsx
+++ b/src/components/Layout/Page.tsx
@@ -8,19 +8,19 @@ import {useRouter} from 'next/router';
 import {SidebarNav} from './SidebarNav';
 import {Footer} from './Footer';
 import {Toc} from './Toc';
-import SocialBanner from '../SocialBanner';
+// import SocialBanner from '../SocialBanner';
 import {DocsPageFooter} from 'components/DocsFooter';
 import {Seo} from 'components/Seo';
-import ButtonLink from 'components/ButtonLink';
-import {IconNavArrow} from 'components/Icon/IconNavArrow';
 import PageHeading from 'components/PageHeading';
 import {getRouteMeta} from './getRouteMeta';
 import {TocContext} from '../MDX/TocContext';
+import {Languages, LanguagesContext} from '../MDX/LanguagesContext';
 import type {TocItem} from 'components/MDX/TocContext';
 import type {RouteItem} from 'components/Layout/getRouteMeta';
 import {HomeContent} from './HomeContent';
 import {TopNav} from './TopNav';
 import cn from 'classnames';
+import Head from 'next/head';
 
 import(/* webpackPrefetch: true */ '../MDX/CodeBlock/CodeBlock');
 
@@ -28,11 +28,24 @@ interface PageProps {
   children: React.ReactNode;
   toc: Array<TocItem>;
   routeTree: RouteItem;
-  meta: {title?: string; canary?: boolean; description?: string};
+  meta: {
+    title?: string;
+    titleForTitleTag?: string;
+    canary?: boolean;
+    description?: string;
+  };
   section: 'learn' | 'reference' | 'community' | 'blog' | 'home' | 'unknown';
+  languages?: Languages | null;
 }
 
-export function Page({children, toc, routeTree, meta, section}: PageProps) {
+export function Page({
+  children,
+  toc,
+  routeTree,
+  meta,
+  section,
+  languages = null,
+}: PageProps) {
   const {asPath} = useRouter();
   const cleanedPath = asPath.split(/[\?\#]/)[0];
   const {route, nextRoute, prevRoute, breadcrumbs, order} = getRouteMeta(
@@ -69,7 +82,11 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
               'max-w-7xl mx-auto',
               section === 'blog' && 'lg:flex lg:flex-col lg:items-center'
             )}>
-            <TocContext.Provider value={toc}>{children}</TocContext.Provider>
+            <TocContext.Provider value={toc}>
+              <LanguagesContext.Provider value={languages}>
+                {children}
+              </LanguagesContext.Provider>
+            </TocContext.Provider>
           </div>
           {!isBlogIndex && (
             <DocsPageFooter
@@ -86,12 +103,10 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
   let hasColumns = true;
   let showSidebar = true;
   let showToc = true;
-  let showSurvey = true;
   if (isHomePage || isBlogIndex) {
     hasColumns = false;
     showSidebar = false;
     showToc = false;
-    showSurvey = false;
   } else if (section === 'blog') {
     showToc = false;
     hasColumns = false;
@@ -107,11 +122,22 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
     <>
       <Seo
         title={title}
+        titleForTitleTag={meta.titleForTitleTag}
         isHomePage={isHomePage}
         image={`/images/og-` + section + '.png'}
         searchOrder={searchOrder}
       />
-      <SocialBanner />
+      {(isHomePage || isBlogIndex) && (
+        <Head>
+          <link
+            rel="alternate"
+            type="application/rss+xml"
+            title="React Blog RSS Feed"
+            href="/rss.xml"
+          />
+        </Head>
+      )}
+      {/*<SocialBanner />*/}
       <TopNav
         section={section}
         routeTree={routeTree}
@@ -123,8 +149,8 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
             'grid grid-cols-only-content lg:grid-cols-sidebar-content 2xl:grid-cols-sidebar-content-toc'
         )}>
         {showSidebar && (
-          <div className="lg:-mt-16">
-            <div className="lg:pt-16 fixed lg:sticky top-0 start-0 end-0 py-0 shadow lg:shadow-none">
+          <div className="lg:-mt-16 z-10">
+            <div className="fixed top-0 py-0 shadow lg:pt-16 lg:sticky start-0 end-0 lg:shadow-none">
               <SidebarNav
                 key={section}
                 routeTree={routeTree}
@@ -137,7 +163,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
         <Suspense fallback={null}>
           <main className="min-w-0 isolate">
             <article
-              className="break-words font-normal text-primary dark:text-primary-dark"
+              className="font-normal break-words text-primary dark:text-primary-dark"
               key={asPath}>
               {content}
             </article>
@@ -147,34 +173,8 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
                 isHomePage && 'bg-wash dark:bg-gray-95 mt-[-1px]'
               )}>
               {!isHomePage && (
-                <div className="mx-auto w-full px-5 sm:px-12 md:px-12 pt-10 md:pt-12 lg:pt-10">
-                  {
-                    <hr className="max-w-7xl mx-auto border-border dark:border-border-dark" />
-                  }
-                  {showSurvey && (
-                    <>
-                      <div className="flex flex-col items-center m-4 p-4">
-                        <p className="font-bold text-primary dark:text-primary-dark text-lg mb-4">
-                          How do you like these docs?
-                        </p>
-                        <div>
-                          <ButtonLink
-                            href="https://www.surveymonkey.co.uk/r/PYRPF3X"
-                            className="mt-1"
-                            type="primary"
-                            size="md"
-                            target="_blank">
-                            Take our survey!
-                            <IconNavArrow
-                              displayDirection="end"
-                              className="inline ms-1"
-                            />
-                          </ButtonLink>
-                        </div>
-                      </div>
-                      <hr className="max-w-7xl mx-auto border-border dark:border-border-dark" />
-                    </>
-                  )}
+                <div className="w-full px-5 pt-10 mx-auto sm:px-12 md:px-12 md:pt-12 lg:pt-10">
+                  <hr className="mx-auto max-w-7xl border-border dark:border-border-dark" />
                 </div>
               )}
               <div
@@ -187,7 +187,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
             </div>
           </main>
         </Suspense>
-        <div className="-mt-16 hidden lg:max-w-xs 2xl:block">
+        <div className="hidden -mt-16 lg:max-w-custom-xs 2xl:block">
           {showToc && toc.length > 0 && <Toc headings={toc} key={asPath} />}
         </div>
       </div>
diff --git a/src/components/Layout/Sidebar/SidebarLink.tsx b/src/components/Layout/Sidebar/SidebarLink.tsx
index 180ded867..4429989d2 100644
--- a/src/components/Layout/Sidebar/SidebarLink.tsx
+++ b/src/components/Layout/Sidebar/SidebarLink.tsx
@@ -16,7 +16,7 @@ interface SidebarLinkProps {
   selected?: boolean;
   title: string;
   level: number;
-  canary?: boolean;
+  version?: 'canary' | 'major';
   icon?: React.ReactNode;
   isExpanded?: boolean;
   hideArrow?: boolean;
@@ -27,7 +27,7 @@ export function SidebarLink({
   href,
   selected = false,
   title,
-  canary,
+  version,
   level,
   isExpanded,
   hideArrow,
@@ -75,10 +75,17 @@ export function SidebarLink({
       {/* This here needs to be refactored ofc */}
       <div>
         {title}{' '}
-        {canary && (
+        {version === 'major' && (
+          <span
+            title="- This feature is available in React 19 beta and the React canary channel"
+            className={`text-xs px-1 ms-1 rounded bg-gray-10 dark:bg-gray-40 dark:bg-opacity-20 text-gray-40 dark:text-gray-40`}>
+            React 19
+          </span>
+        )}
+        {version === 'canary' && (
           <IconCanary
-            title="This feature is available in the latest Canary"
-            className="ms-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"
+            title=" - This feature is available in the latest Canary"
+            className="ms-1 text-gray-30 dark:text-gray-60 inline-block w-3.5 h-3.5 align-[-3px]"
           />
         )}
       </div>
diff --git a/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/src/components/Layout/Sidebar/SidebarRouteTree.tsx
index 9a0dd23f5..54f02b925 100644
--- a/src/components/Layout/Sidebar/SidebarRouteTree.tsx
+++ b/src/components/Layout/Sidebar/SidebarRouteTree.tsx
@@ -7,9 +7,10 @@ import {useRef, useLayoutEffect, Fragment} from 'react';
 import cn from 'classnames';
 import {useRouter} from 'next/router';
 import {SidebarLink} from './SidebarLink';
-import useCollapse from 'react-collapsed';
+import {useCollapse} from 'react-collapsed';
 import usePendingRoute from 'hooks/usePendingRoute';
 import type {RouteItem} from 'components/Layout/getRouteMeta';
+import {siteConfig} from 'siteConfig';
 
 interface SidebarRouteTreeProps {
   isForceExpanded: boolean;
@@ -86,7 +87,7 @@ export function SidebarRouteTree({
             path,
             title,
             routes,
-            canary,
+            version,
             heading,
             hasSectionHeader,
             sectionHeader,
@@ -120,7 +121,7 @@ export function SidebarRouteTree({
                   selected={selected}
                   level={level}
                   title={title}
-                  canary={canary}
+                  version={version}
                   isExpanded={isExpanded}
                   hideArrow={isForceExpanded}
                 />
@@ -144,14 +145,18 @@ export function SidebarRouteTree({
                   selected={selected}
                   level={level}
                   title={title}
-                  canary={canary}
+                  version={version}
                 />
               </li>
             );
           }
           if (hasSectionHeader) {
+            let sectionHeaderText =
+              sectionHeader != null
+                ? sectionHeader.replace('{{version}}', siteConfig.version)
+                : '';
             return (
-              <Fragment key={`${sectionHeader}-${level}-separator`}>
+              <Fragment key={`${sectionHeaderText}-${level}-separator`}>
                 {index !== 0 && (
                   <li
                     role="separator"
@@ -163,7 +168,7 @@ export function SidebarRouteTree({
                     'mb-1 text-sm font-bold ms-5 text-tertiary dark:text-tertiary-dark',
                     index !== 0 && 'mt-2'
                   )}>
-                  {sectionHeader}
+                  {sectionHeaderText}
                 </h3>
               </Fragment>
             );
diff --git a/src/components/Layout/SidebarNav/SidebarNav.tsx b/src/components/Layout/SidebarNav/SidebarNav.tsx
index 702ff5b5a..171270960 100644
--- a/src/components/Layout/SidebarNav/SidebarNav.tsx
+++ b/src/components/Layout/SidebarNav/SidebarNav.tsx
@@ -40,12 +40,12 @@ export default function SidebarNav({
         }}>
         <aside
           className={cn(
-            `lg:grow flex-col w-full pb-8 lg:pb-0 lg:max-w-xs z-10 hidden lg:block`
+            `lg:grow flex-col w-full pb-8 lg:pb-0 lg:max-w-custom-xs z-10 hidden lg:block`
           )}>
           <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 pe-0 lg:pe-5 pt-6 lg:pb-16 md:pt-4 lg:pt-4 scrolling-touch scrolling-gpu">
+            className="w-full pt-6 scrolling-touch lg:h-auto grow pe-0 lg:pe-5 lg:pb-16 md:pt-4 lg:pt-4 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 628dbd61f..5308c602c 100644
--- a/src/components/Layout/Toc.tsx
+++ b/src/components/Layout/Toc.tsx
@@ -27,8 +27,7 @@ export function Toc({headings}: {headings: Toc}) {
         <ul className="space-y-2 pb-16">
           {headings.length > 0 &&
             headings.map((h, i) => {
-              if (h.url == null) {
-                // TODO: only log in DEV
+              if (!h.url && process.env.NODE_ENV === 'development') {
                 console.error('Heading does not have URL');
               }
               return (
diff --git a/src/components/Layout/TopNav/BrandMenu.tsx b/src/components/Layout/TopNav/BrandMenu.tsx
new file mode 100644
index 000000000..3bd8776f2
--- /dev/null
+++ b/src/components/Layout/TopNav/BrandMenu.tsx
@@ -0,0 +1,145 @@
+import * as ContextMenu from '@radix-ui/react-context-menu';
+import {IconCopy} from 'components/Icon/IconCopy';
+import {IconDownload} from 'components/Icon/IconDownload';
+import {IconNewPage} from 'components/Icon/IconNewPage';
+import {ExternalLink} from 'components/ExternalLink';
+import {IconClose} from '../../Icon/IconClose';
+
+function MenuItem({
+  children,
+  onSelect,
+}: {
+  children: React.ReactNode;
+  onSelect?: () => void;
+}) {
+  return (
+    <ContextMenu.Item
+      className="flex items-center hover:bg-border dark:hover:bg-border-dark ps-6 pe-4 py-2 w-full text-base cursor-pointer"
+      onSelect={onSelect}>
+      {children}
+    </ContextMenu.Item>
+  );
+}
+
+function DownloadMenuItem({
+  fileName,
+  href,
+  children,
+}: {
+  fileName: string;
+  href: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <a download={fileName} href={href} className="flex items-center w-full">
+      <MenuItem>{children}</MenuItem>
+    </a>
+  );
+}
+
+export default function BrandMenu({children}: {children: React.ReactNode}) {
+  return (
+    <ContextMenu.Root>
+      <ContextMenu.Trigger className="flex items-center">
+        {children}
+      </ContextMenu.Trigger>
+      <ContextMenu.Portal>
+        <ContextMenu.Content
+          className="hidden lg:block z-50 mt-6 bg-wash border border-border dark:border-border-dark dark:bg-wash-dark rounded min-w-56 overflow-hidden shadow"
+          // @ts-ignore
+          sideOffset={0}
+          align="end">
+          <ContextMenu.Label className="ps-4 pt-2 text-base text-tertiary dark:text-tertiary-dark">
+            Dark Mode
+          </ContextMenu.Label>
+          <DownloadMenuItem
+            fileName="react_logo_dark.svg"
+            href="/images/brand/logo_dark.svg">
+            <span className="w-8">
+              <IconDownload />
+            </span>
+            <span>Logo SVG</span>
+          </DownloadMenuItem>
+          <DownloadMenuItem
+            fileName="react_wordmark_dark.svg"
+            href="/images/brand/wordmark_dark.svg">
+            <span className="w-8">
+              <IconDownload />
+            </span>
+            <span>Wordmark SVG</span>
+          </DownloadMenuItem>
+          <MenuItem
+            onSelect={async () => {
+              await navigator.clipboard.writeText('#58C4DC');
+            }}>
+            <span className="w-8">
+              <IconCopy />
+            </span>
+            <span>Copy dark mode color</span>
+          </MenuItem>
+          <ContextMenu.Label className="ps-4 text-base text-tertiary dark:text-tertiary-dark">
+            Light Mode
+          </ContextMenu.Label>
+          <DownloadMenuItem
+            fileName="react_logo_light.svg"
+            href="/images/brand/logo_light.svg">
+            <span className="w-8">
+              <IconDownload />
+            </span>
+            <span>Logo SVG</span>
+          </DownloadMenuItem>
+          <DownloadMenuItem
+            fileName="react_wordmark_light.svg"
+            href="/images/brand/wordmark_light.svg">
+            <span className="w-8">
+              <IconDownload />
+            </span>
+            <span>Wordmark SVG</span>
+          </DownloadMenuItem>
+          <MenuItem
+            onSelect={async () => {
+              await navigator.clipboard.writeText('#087EA4');
+            }}>
+            <span className="w-8">
+              <IconCopy />
+            </span>
+            <span>Copy light mode color</span>
+          </MenuItem>
+          <div className="uwu-visible flex flex-col">
+            <ContextMenu.Separator className="" />
+            <ContextMenu.Label className="ps-4 text-base text-tertiary dark:text-tertiary-dark">
+              uwu
+            </ContextMenu.Label>
+            <MenuItem
+              onSelect={() => {
+                // @ts-ignore
+                window.__setUwu(false);
+              }}>
+              <span className="w-8">
+                <IconClose />
+              </span>
+              <span>Turn off</span>
+            </MenuItem>
+            <DownloadMenuItem fileName="react_uwu_png" href="/images/uwu.png">
+              <span className="w-8">
+                <IconDownload />
+              </span>
+              <span>Logo PNG</span>
+            </DownloadMenuItem>
+
+            <ExternalLink
+              className="flex items-center"
+              href="https://github.com/SAWARATSUKI/KawaiiLogos">
+              <MenuItem>
+                <span className="w-8">
+                  <IconNewPage />
+                </span>
+                <span>Logo by @sawaratsuki1004</span>
+              </MenuItem>
+            </ExternalLink>
+          </div>
+        </ContextMenu.Content>
+      </ContextMenu.Portal>
+    </ContextMenu.Root>
+  );
+}
diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx
index 3cbf66cb8..acd0134a0 100644
--- a/src/components/Layout/TopNav/TopNav.tsx
+++ b/src/components/Layout/TopNav/TopNav.tsx
@@ -10,6 +10,7 @@ import {
   startTransition,
   Suspense,
 } from 'react';
+import Image from 'next/image';
 import * as React from 'react';
 import cn from 'classnames';
 import NextLink from 'next/link';
@@ -24,6 +25,8 @@ import {Logo} from '../../Logo';
 import {Feedback} from '../Feedback';
 import {SidebarRouteTree} from '../Sidebar';
 import type {RouteItem} from '../getRouteMeta';
+import {siteConfig} from 'siteConfig';
+import BrandMenu from './BrandMenu';
 
 declare global {
   interface Window {
@@ -77,6 +80,19 @@ const lightIcon = (
   </svg>
 );
 
+const languageIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d=" M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z "
+    />
+  </svg>
+);
+
 const githubIcon = (
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -97,7 +113,7 @@ function Link({
   return (
     <NextLink
       href={`${href}`}
-      className="inline text-primary dark:text-primary-dark hover:text-link hover:dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal"
+      className="inline leading-normal transition duration-100 ease-in border-b border-opacity-0 text-primary dark:text-primary-dark hover:text-link hover:dark:text-link-dark border-link hover:border-opacity-100"
       {...props}>
       {children}
     </NextLink>
@@ -110,7 +126,7 @@ function NavItem({url, isActive, children}: any) {
       <Link
         href={url}
         className={cn(
-          'active:scale-95 transition-transform w-full text-center outline-link py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full capitalize',
+          'active:scale-95 transition-transform w-full text-center outline-link py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full capitalize whitespace-nowrap',
           !isActive && 'hover:bg-primary/5 hover:dark:bg-primary-dark/5',
           isActive &&
             'bg-highlight dark:bg-highlight-dark text-link dark:text-link-dark'
@@ -142,10 +158,11 @@ export default function TopNav({
   breadcrumbs: RouteItem[];
   section: 'learn' | 'reference' | 'community' | 'blog' | 'home' | 'unknown';
 }) {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [showSearch, setShowSearch] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
   const scrollParentRef = useRef<HTMLDivElement>(null);
   const {asPath} = useRouter();
-  const [isScrolled, setIsScrolled] = useState(false);
 
   // HACK. Fix up the data structures instead.
   if ((routeTree as any).routes.length === 1) {
@@ -154,18 +171,18 @@ export default function TopNav({
 
   // While the overlay is open, disable body scroll.
   useEffect(() => {
-    if (isOpen) {
+    if (isMenuOpen) {
       const preferredScrollParent = scrollParentRef.current!;
       disableBodyScroll(preferredScrollParent);
       return () => enableBodyScroll(preferredScrollParent);
     } else {
       return undefined;
     }
-  }, [isOpen]);
+  }, [isMenuOpen]);
 
   // Close the overlay on any navigation.
   useEffect(() => {
-    setIsOpen(false);
+    setIsMenuOpen(false);
   }, [asPath]);
 
   // Also close the overlay if the window gets resized past mobile layout.
@@ -175,7 +192,7 @@ export default function TopNav({
 
     function closeIfNeeded() {
       if (!media.matches) {
-        setIsOpen(false);
+        setIsMenuOpen(false);
       }
     }
 
@@ -204,7 +221,6 @@ export default function TopNav({
     return () => observer.disconnect();
   }, []);
 
-  const [showSearch, setShowSearch] = useState(false);
   const onOpenSearch = useCallback(() => {
     startTransition(() => {
       setShowSearch(true);
@@ -224,52 +240,76 @@ export default function TopNav({
       <div ref={scrollDetectorRef} />
       <div
         className={cn(
-          isOpen
+          isMenuOpen
             ? 'h-screen sticky top-0 lg:bottom-0 lg:h-screen flex flex-col shadow-nav dark:shadow-nav-dark z-20'
-            : 'z-50 sticky top-0'
+            : 'z-40 sticky top-0'
         )}>
         <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:pe-5 lg:ps-4 z-50',
-            {'dark:shadow-nav-dark shadow-nav': isScrolled || isOpen}
+            '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-40',
+            {'dark:shadow-nav-dark shadow-nav': isScrolled || isMenuOpen}
           )}>
-          <div className="h-16 w-full gap-0 sm:gap-3 flex items-center justify-between">
-            <div className="3xl:flex-1 flex flex-row ">
+          <div className="flex items-center justify-between w-full h-16 gap-0 sm:gap-3">
+            <div className="flex flex-row 3xl:flex-1 items-centers">
               <button
                 type="button"
                 aria-label="Menu"
-                onClick={() => setIsOpen(!isOpen)}
+                onClick={() => setIsMenuOpen(!isMenuOpen)}
                 className={cn(
                   'active:scale-95 transition-transform flex lg:hidden w-12 h-12 rounded-full items-center justify-center hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link',
                   {
-                    'text-link dark:text-link-dark': isOpen,
+                    'text-link dark:text-link-dark': isMenuOpen,
                   }
                 )}>
-                {isOpen ? <IconClose /> : <IconHamburger />}
+                {isMenuOpen ? <IconClose /> : <IconHamburger />}
               </button>
-              <div className="3xl:flex-1 flex align-center">
+              <BrandMenu>
+                <div className="flex items-center">
+                  <div className="uwu-visible flex items-center justify-center h-full">
+                    <NextLink href="/">
+                      <Image
+                        alt="logo by @sawaratsuki1004"
+                        title="logo by @sawaratsuki1004"
+                        className="h-8"
+                        priority
+                        width={63}
+                        height={32}
+                        src="/images/uwu.png"
+                      />
+                    </NextLink>
+                  </div>
+                  <div className="uwu-hidden">
+                    <NextLink
+                      href="/"
+                      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 me-0 w-10 h-10 text-brand dark:text-brand-dark flex origin-center transition-all ease-in-out'
+                        )}
+                      />
+                      <span className="sr-only 3xl:not-sr-only">React</span>
+                    </NextLink>
+                  </div>
+                </div>
+              </BrandMenu>
+              <div className="flex flex-column justify-center items-center">
                 <NextLink
-                  href="/"
-                  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 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>
+                  href="/versions"
+                  className=" flex py-2 flex-column justify-center items-center text-gray-50 dark:text-gray-30 hover:text-link hover:dark:text-link-dark hover:underline text-sm ms-1 cursor-pointer">
+                  v{siteConfig.version}
                 </NextLink>
               </div>
             </div>
-            <div className="hidden md:flex flex-1 justify-center items-center w-full 3xl:w-auto 3xl:shrink-0 3xl:justify-center">
+            <div className="items-center justify-center flex-1 hidden w-full md:flex 3xl:w-auto 3xl:shrink-0 3xl:justify-center">
               <button
                 type="button"
                 className={cn(
                   '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="me-3 align-middle text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />
+                <IconSearch className="align-middle me-3 text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />
                 Search
-                <span className="ms-auto hidden sm:flex item-center me-1">
+                <span className="hidden ms-auto sm:flex item-center me-1">
                   <Kbd data-platform="mac">⌘</Kbd>
                   <Kbd data-platform="win" wide>
                     Ctrl
@@ -301,9 +341,9 @@ export default function TopNav({
                   <button
                     aria-label="Search"
                     type="button"
-                    className="active:scale-95 transition-transform flex md:hidden w-12 h-12 rounded-full items-center justify-center hover:bg-secondary-button hover:dark:bg-secondary-button-dark outline-link"
+                    className="flex items-center justify-center w-12 h-12 transition-transform rounded-full active:scale-95 md:hidden hover:bg-secondary-button hover:dark:bg-secondary-button-dark outline-link"
                     onClick={onOpenSearch}>
-                    <IconSearch className="align-middle w-5 h-5" />
+                    <IconSearch className="w-5 h-5 align-middle" />
                   </button>
                 </div>
                 <div className="flex dark:hidden">
@@ -313,7 +353,7 @@ export default function TopNav({
                     onClick={() => {
                       window.__setPreferredTheme('dark');
                     }}
-                    className="active:scale-95 transition-transform flex w-12 h-12 rounded-full items-center justify-center hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link">
+                    className="flex items-center justify-center w-12 h-12 transition-transform rounded-full active:scale-95 hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link">
                     {darkIcon}
                   </button>
                 </div>
@@ -324,17 +364,25 @@ export default function TopNav({
                     onClick={() => {
                       window.__setPreferredTheme('light');
                     }}
-                    className="active:scale-95 transition-transform flex w-12 h-12 rounded-full items-center justify-center hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link">
+                    className="flex items-center justify-center w-12 h-12 transition-transform rounded-full active:scale-95 hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link">
                     {lightIcon}
                   </button>
                 </div>
+                <div className="flex">
+                  <Link
+                    href="/community/translations"
+                    aria-label="Translations"
+                    className="active:scale-95 transition-transform flex w-12 h-12 rounded-full items-center justify-center hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link">
+                    {languageIcon}
+                  </Link>
+                </div>
                 <div className="flex">
                   <Link
                     href="https://github.com/facebook/react/releases"
                     target="_blank"
                     rel="noreferrer noopener"
                     aria-label="Open on GitHub"
-                    className="active:scale-95 transition-transform flex w-12 h-12 rounded-full items-center justify-center hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link">
+                    className="flex items-center justify-center w-12 h-12 transition-transform rounded-full active:scale-95 hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link">
                     {githubIcon}
                   </Link>
                 </div>
@@ -343,19 +391,19 @@ export default function TopNav({
           </div>
         </nav>
 
-        {isOpen && (
+        {isMenuOpen && (
           <div
             ref={scrollParentRef}
             className="overflow-y-scroll isolate no-bg-scrollbar lg:w-[342px] grow bg-wash dark:bg-wash-dark">
             <aside
               className={cn(
-                `lg:grow lg:flex flex-col w-full pb-8 lg:pb-0 lg:max-w-xs z-50`,
-                isOpen ? 'block z-40' : 'hidden lg:block'
+                `lg:grow lg:flex flex-col w-full pb-8 lg:pb-0 lg:max-w-custom-xs z-40`,
+                isMenuOpen ? 'block z-30' : 'hidden lg:block'
               )}>
               <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 pe-0 lg:pe-5 pt-4 lg:py-6 md:pt-4 lg:pt-4 scrolling-touch scrolling-gpu">
+                className="w-full pt-4 scrolling-touch lg:h-auto grow pe-0 lg:pe-5 lg:py-6 md:pt-4 lg:pt-4 scrolling-gpu">
                 {/* No fallback UI so need to be careful not to suspend directly inside. */}
                 <Suspense fallback={null}>
                   <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">
@@ -378,15 +426,15 @@ export default function TopNav({
                   </div>
                   <div
                     role="separator"
-                    className="ms-5 mt-4 mb-2 border-b border-border dark:border-border-dark"
+                    className="mt-4 mb-2 border-b ms-5 border-border dark:border-border-dark"
                   />
                   <SidebarRouteTree
                     // Don't share state between the desktop and mobile versions.
                     // This avoids unnecessary animations and visual flicker.
-                    key={isOpen ? 'mobile-overlay' : 'desktop-or-hidden'}
+                    key={isMenuOpen ? 'mobile-overlay' : 'desktop-or-hidden'}
                     routeTree={routeTree}
                     breadcrumbs={breadcrumbs}
-                    isForceExpanded={isOpen}
+                    isForceExpanded={isMenuOpen}
                   />
                 </Suspense>
                 <div className="h-16" />
diff --git a/src/components/Layout/getRouteMeta.tsx b/src/components/Layout/getRouteMeta.tsx
index d22947847..b3d14725d 100644
--- a/src/components/Layout/getRouteMeta.tsx
+++ b/src/components/Layout/getRouteMeta.tsx
@@ -19,8 +19,8 @@ export type RouteTag =
 export interface RouteItem {
   /** Page title (for the sidebar) */
   title: string;
-  /** Optional canary flag for heading */
-  canary?: boolean;
+  /** Optional version flag for heading */
+  version?: 'canary' | 'major';
   /** Optional page description for heading */
   description?: string;
   /* Additional meta info for page tagging */
@@ -58,13 +58,13 @@ export interface RouteMeta {
   order?: number;
 }
 
-type TravesalContext = RouteMeta & {
+type TraversalContext = RouteMeta & {
   currentIndex: number;
 };
 
 export function getRouteMeta(cleanedPath: string, routeTree: RouteItem) {
   const breadcrumbs = getBreadcrumbs(cleanedPath, routeTree);
-  const ctx: TravesalContext = {
+  const ctx: TraversalContext = {
     currentIndex: 0,
   };
   buildRouteMeta(cleanedPath, routeTree, ctx);
@@ -79,7 +79,7 @@ export function getRouteMeta(cleanedPath: string, routeTree: RouteItem) {
 function buildRouteMeta(
   searchPath: string,
   currentRoute: RouteItem,
-  ctx: TravesalContext
+  ctx: TraversalContext
 ) {
   ctx.currentIndex++;
 
diff --git a/src/components/MDX/CodeBlock/CodeBlock.tsx b/src/components/MDX/CodeBlock/CodeBlock.tsx
index 21ab31e7c..7eef0abe8 100644
--- a/src/components/MDX/CodeBlock/CodeBlock.tsx
+++ b/src/components/MDX/CodeBlock/CodeBlock.tsx
@@ -3,11 +3,14 @@
  */
 
 import cn from 'classnames';
-import {highlightTree, HighlightStyle, tags} from '@codemirror/highlight';
+import {HighlightStyle} from '@codemirror/language';
+import {highlightTree} from '@lezer/highlight';
 import {javascript} from '@codemirror/lang-javascript';
 import {html} from '@codemirror/lang-html';
 import {css} from '@codemirror/lang-css';
 import rangeParser from 'parse-numeric-range';
+import {tags} from '@lezer/highlight';
+
 import {CustomTheme} from '../Sandpack/Themes';
 
 interface InlineHighlight {
@@ -52,7 +55,7 @@ const CodeBlock = function CodeBlock({
   let tokenStarts = new Map();
   let tokenEnds = new Map();
   const highlightTheme = getSyntaxHighlight(CustomTheme);
-  highlightTree(tree, highlightTheme.match, (from, to, className) => {
+  highlightTree(tree, highlightTheme, (from, to, className) => {
     tokenStarts.set(from, className);
     tokenEnds.set(to, className);
   });
diff --git a/src/components/MDX/ConsoleBlock.tsx b/src/components/MDX/ConsoleBlock.tsx
index 5683d6dcf..6e704b417 100644
--- a/src/components/MDX/ConsoleBlock.tsx
+++ b/src/components/MDX/ConsoleBlock.tsx
@@ -15,6 +15,10 @@ interface ConsoleBlockProps {
   children: React.ReactNode;
 }
 
+interface ConsoleBlockMultiProps {
+  children: React.ReactNode;
+}
+
 const Box = ({
   width = '60px',
   height = '17px',
@@ -29,7 +33,7 @@ const Box = ({
   <div className={className} style={{width, height, ...customStyles}}></div>
 );
 
-function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
+export function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
   let message: React.ReactNode | null;
   if (typeof children === 'string') {
     message = children;
@@ -38,7 +42,10 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
   }
 
   return (
-    <div className="mb-4 text-secondary" translate="no" dir="ltr">
+    <div
+      className="console-block mb-4 text-secondary bg-wash dark:bg-wash-dark rounded-lg"
+      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" />
@@ -73,4 +80,72 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
   );
 }
 
-export default ConsoleBlock;
+export function ConsoleBlockMulti({children}: ConsoleBlockMultiProps) {
+  return (
+    <div
+      className="console-block mb-4 text-secondary bg-wash dark:bg-wash-dark rounded-lg"
+      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" />
+        </div>
+        <div className="flex text-sm px-4">
+          <div className="border-b-2 border-gray-300 dark:border-gray-90 text-tertiary dark:text-tertiary-dark">
+            Console
+          </div>
+          <div className="px-4 py-2 flex">
+            <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>
+      </div>
+      <div className="grid grid-cols-1 divide-y divide-gray-300 dark:divide-gray-70 text-base">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export function ConsoleLogLine({children, level}: ConsoleBlockProps) {
+  let message: React.ReactNode | null;
+  if (typeof children === 'string') {
+    message = children;
+  } else if (isValidElement(children)) {
+    message = children.props.children;
+  } else if (Array.isArray(children)) {
+    message = children.reduce((result, child) => {
+      if (typeof child === 'string') {
+        result += child;
+      } else if (isValidElement(child)) {
+        // @ts-ignore
+        result += child.props.children;
+      }
+      return result;
+    }, '');
+  }
+
+  return (
+    <div
+      className={cn(
+        'ps-4 pe-2 pt-1 pb-2 grid grid-cols-[18px_auto] font-mono rounded-b-md',
+        {
+          'bg-red-30 text-red-50 dark:text-red-30 bg-opacity-5':
+            level === 'error',
+          'bg-yellow-5 text-yellow-50': level === 'warning',
+          'bg-gray-5 text-secondary dark:text-secondary-dark': level === 'info',
+        }
+      )}>
+      {level === 'error' && (
+        <IconError className="self-start mt-1.5 text-[.7rem] w-6" />
+      )}
+      {level === 'warning' && (
+        <IconWarning className="self-start mt-1 text-[.65rem] w-6" />
+      )}
+      <div className="px-2 pt-1 whitespace-break-spaces text-code leading-tight">
+        {message}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/MDX/Diagram.tsx b/src/components/MDX/Diagram.tsx
index 7920661da..649f48dff 100644
--- a/src/components/MDX/Diagram.tsx
+++ b/src/components/MDX/Diagram.tsx
@@ -15,8 +15,8 @@ interface DiagramProps {
 
 function Caption({text}: {text: string}) {
   return (
-    <div className="w-full table">
-      <figcaption className="p-1 sm:p-2 mt-0 sm:mt-0 text-gray-40 text-base lg:text-lg text-center leading-tight table-caption">
+    <div className="w-full flex justify-center">
+      <figcaption className="p-1 sm:p-2 mt-0 sm:mt-0 text-gray-40 text-base lg:text-lg text-center leading-tight table-caption max-w-lg">
         {text}
       </figcaption>
     </div>
diff --git a/src/components/MDX/ErrorDecoder.tsx b/src/components/MDX/ErrorDecoder.tsx
new file mode 100644
index 000000000..198aa939d
--- /dev/null
+++ b/src/components/MDX/ErrorDecoder.tsx
@@ -0,0 +1,107 @@
+import {useEffect, useState} from 'react';
+import {useErrorDecoderParams} from '../ErrorDecoderContext';
+import cn from 'classnames';
+
+function replaceArgs(
+  msg: string,
+  argList: Array<string | undefined>,
+  replacer = '[missing argument]'
+): string {
+  let argIdx = 0;
+  return msg.replace(/%s/g, function () {
+    const arg = argList[argIdx++];
+    // arg can be an empty string: ?args[0]=&args[1]=count
+    return arg === undefined || arg === '' ? replacer : arg;
+  });
+}
+
+/**
+ * Sindre Sorhus <https://sindresorhus.com>
+ * Released under MIT license
+ * https://github.com/sindresorhus/linkify-urls/blob/b2397096df152e2f799011f7a48e5f73b4bf1c7e/index.js#L5C1-L7C1
+ *
+ * The regex is used to extract URL from the string for linkify.
+ */
+const urlRegex = () =>
+  /((?:https?(?::\/\/))(?:www\.)?(?:[a-zA-Z\d-_.]+(?:(?:\.|@)[a-zA-Z\d]{2,})|localhost)(?:(?:[-a-zA-Z\d:%_+.~#!?&//=@]*)(?:[,](?![\s]))*)*)/g;
+
+// When the message contains a URL (like https://fb.me/react-refs-must-have-owner),
+// make it a clickable link.
+function urlify(str: string): React.ReactNode[] {
+  const segments = str.split(urlRegex());
+
+  return segments.map((message, i) => {
+    if (i % 2 === 1) {
+      return (
+        <a
+          key={i}
+          target="_blank"
+          className="underline"
+          rel="noopener noreferrer"
+          href={message}>
+          {message}
+        </a>
+      );
+    }
+    return message;
+  });
+}
+
+// `?args[]=foo&args[]=bar`
+// or `// ?args[0]=foo&args[1]=bar`
+function parseQueryString(search: string): Array<string | undefined> {
+  const rawQueryString = search.substring(1);
+  if (!rawQueryString) {
+    return [];
+  }
+
+  const args: Array<string | undefined> = [];
+
+  const queries = rawQueryString.split('&');
+  for (let i = 0; i < queries.length; i++) {
+    const query = decodeURIComponent(queries[i]);
+    if (query.startsWith('args[')) {
+      args.push(query.slice(query.indexOf(']=') + 2));
+    }
+  }
+
+  return args;
+}
+
+export default function ErrorDecoder() {
+  const {errorMessage} = useErrorDecoderParams();
+  /** error messages that contain %s require reading location.search */
+  const hasParams = errorMessage?.includes('%s');
+  const [message, setMessage] = useState<React.ReactNode | null>(() =>
+    errorMessage ? urlify(errorMessage) : null
+  );
+
+  const [isReady, setIsReady] = useState(errorMessage == null || !hasParams);
+
+  useEffect(() => {
+    if (errorMessage == null || !hasParams) {
+      return;
+    }
+
+    setMessage(
+      urlify(
+        replaceArgs(
+          errorMessage,
+          parseQueryString(window.location.search),
+          '[missing argument]'
+        )
+      )
+    );
+    setIsReady(true);
+  }, [hasParams, errorMessage]);
+
+  return (
+    <code
+      className={cn(
+        'block bg-red-100 text-red-600 py-4 px-6 mt-5 rounded-lg',
+        isReady ? 'opacity-100' : 'opacity-0'
+      )}>
+      <b>{message}</b>
+    </code>
+  );
+}
diff --git a/src/components/MDX/ExpandableCallout.tsx b/src/components/MDX/ExpandableCallout.tsx
index c46898026..5f594063d 100644
--- a/src/components/MDX/ExpandableCallout.tsx
+++ b/src/components/MDX/ExpandableCallout.tsx
@@ -2,15 +2,22 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {useRef} from 'react';
 import * as React from 'react';
 import cn from 'classnames';
 import {IconNote} from '../Icon/IconNote';
 import {IconWarning} from '../Icon/IconWarning';
 import {IconPitfall} from '../Icon/IconPitfall';
 import {IconCanary} from '../Icon/IconCanary';
+import {IconRocket} from '../Icon/IconRocket';
 
-type CalloutVariants = 'deprecated' | 'pitfall' | 'note' | 'wip' | 'canary';
+type CalloutVariants =
+  | 'deprecated'
+  | 'pitfall'
+  | 'note'
+  | 'wip'
+  | 'canary'
+  | 'major'
+  | 'rsc';
 
 interface ExpandableCalloutProps {
   children: React.ReactNode;
@@ -60,10 +67,25 @@ const variantMap = {
     overlayGradient:
       'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
   },
+  major: {
+    title: 'React 19',
+    Icon: IconRocket,
+    containerClasses: 'bg-blue-10 dark:bg-blue-60 dark:bg-opacity-20',
+    textColor: 'text-blue-50 dark:text-blue-40',
+    overlayGradient:
+      'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
+  },
+  rsc: {
+    title: 'React Server Components',
+    Icon: null,
+    containerClasses: 'bg-blue-10 dark:bg-blue-60 dark:bg-opacity-20',
+    textColor: 'text-blue-50 dark:text-blue-40',
+    overlayGradient:
+      'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
+  },
 };
 
 function ExpandableCallout({children, type = 'note'}: ExpandableCalloutProps) {
-  const contentRef = useRef<HTMLDivElement>(null);
   const variant = variantMap[type];
 
   return (
@@ -74,15 +96,15 @@ function ExpandableCallout({children, type = 'note'}: ExpandableCalloutProps) {
         variant.containerClasses
       )}>
       <h3 className={cn('text-2xl font-display font-bold', variant.textColor)}>
-        <variant.Icon
-          className={cn('inline me-3 mb-1 text-lg', variant.textColor)}
-        />
+        {variant.Icon && (
+          <variant.Icon
+            className={cn('inline me-2 mb-1 text-lg', variant.textColor)}
+          />
+        )}
         {variant.title}
       </h3>
       <div className="relative">
-        <div ref={contentRef} className="py-2">
-          {children}
-        </div>
+        <div className="py-2">{children}</div>
       </div>
     </div>
   );
diff --git a/src/components/MDX/Heading.tsx b/src/components/MDX/Heading.tsx
index 50e209e74..a9f3efc38 100644
--- a/src/components/MDX/Heading.tsx
+++ b/src/components/MDX/Heading.tsx
@@ -88,3 +88,11 @@ export const H4 = ({className, ...props}: HeadingProps) => (
     {...props}
   />
 );
+
+export const H5 = ({className, ...props}: HeadingProps) => (
+  <Heading
+    as="h5"
+    className={cn(className, 'text-lg font-display font-bold leading-9 my-2')}
+    {...props}
+  />
+);
diff --git a/src/components/MDX/InlineCode.tsx b/src/components/MDX/InlineCode.tsx
index d206e9888..0e8db0165 100644
--- a/src/components/MDX/InlineCode.tsx
+++ b/src/components/MDX/InlineCode.tsx
@@ -5,7 +5,8 @@
 import cn from 'classnames';
 
 interface InlineCodeProps {
-  isLink: boolean;
+  isLink?: boolean;
+  meta?: string;
 }
 function InlineCode({
   isLink,
diff --git a/src/components/MDX/LanguagesContext.tsx b/src/components/MDX/LanguagesContext.tsx
new file mode 100644
index 000000000..776a11c0d
--- /dev/null
+++ b/src/components/MDX/LanguagesContext.tsx
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {createContext} from 'react';
+
+export type LanguageItem = {
+  code: string;
+  name: string;
+  enName: string;
+};
+export type Languages = Array<LanguageItem>;
+
+export const LanguagesContext = createContext<Languages | null>(null);
diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx
index 49cbdd868..2829ba5ae 100644
--- a/src/components/MDX/MDXComponents.tsx
+++ b/src/components/MDX/MDXComponents.tsx
@@ -8,10 +8,10 @@ import cn from 'classnames';
 
 import CodeBlock from './CodeBlock';
 import {CodeDiagram} from './CodeDiagram';
-import ConsoleBlock from './ConsoleBlock';
+import {ConsoleBlock, ConsoleLogLine, ConsoleBlockMulti} from './ConsoleBlock';
 import ExpandableCallout from './ExpandableCallout';
 import ExpandableExample from './ExpandableExample';
-import {H1, H2, H3, H4} from './Heading';
+import {H1, H2, H3, H4, H5} from './Heading';
 import InlineCode from './InlineCode';
 import Intro from './Intro';
 import BlogCard from './BlogCard';
@@ -19,6 +19,7 @@ import Link from './Link';
 import {PackageImport} from './PackageImport';
 import Recap from './Recap';
 import Sandpack from './Sandpack';
+import SandpackWithHTMLOutput from './SandpackWithHTMLOutput';
 import Diagram from './Diagram';
 import DiagramGroup from './DiagramGroup';
 import SimpleCallout from './SimpleCallout';
@@ -30,6 +31,11 @@ import ButtonLink from 'components/ButtonLink';
 import {TocContext} from './TocContext';
 import type {Toc, TocItem} from './TocContext';
 import {TeamMember} from './TeamMember';
+import {LanguagesContext} from './LanguagesContext';
+import {finishedTranslations} from 'utils/finishedTranslations';
+
+import ErrorDecoder from './ErrorDecoder';
+import {IconCanary} from '../Icon/IconCanary';
 
 function CodeStep({children, step}: {children: any; step: number}) {
   return (
@@ -91,6 +97,48 @@ const Canary = ({children}: {children: React.ReactNode}) => (
   <ExpandableCallout type="canary">{children}</ExpandableCallout>
 );
 
+const NextMajor = ({children}: {children: React.ReactNode}) => (
+  <ExpandableCallout type="major">{children}</ExpandableCallout>
+);
+
+const RSC = ({children}: {children: React.ReactNode}) => (
+  <ExpandableCallout type="rsc">{children}</ExpandableCallout>
+);
+
+const CanaryBadge = ({title}: {title: string}) => (
+  <span
+    title={title}
+    className={
+      'text-base font-display px-1 py-0.5 font-bold bg-gray-10 dark:bg-gray-60 text-gray-60 dark:text-gray-10 rounded'
+    }>
+    <IconCanary
+      size="s"
+      className={'inline me-1 mb-0.5 text-sm text-gray-60 dark:text-gray-10'}
+    />
+    Canary only
+  </span>
+);
+
+const NextMajorBadge = ({title}: {title: string}) => (
+  <span
+    title={title}
+    className={
+      'text-base font-display px-2 py-0.5 font-bold bg-blue-10 dark:bg-blue-60 text-gray-60 dark:text-gray-10 rounded'
+    }>
+    React 19
+  </span>
+);
+
+const RSCBadge = ({title}: {title: string}) => (
+  <span
+    title={title}
+    className={
+      'text-base font-display px-2 py-0.5 font-bold bg-blue-10 dark:bg-blue-50 text-gray-60 dark:text-gray-10 rounded'
+    }>
+    RSC
+  </span>
+);
+
 const Blockquote = ({
   children,
   ...props
@@ -188,7 +236,7 @@ function Recipes(props: any) {
 
 function AuthorCredit({
   author = 'Rachel Lee Nabors',
-  authorLink = 'http://rachelnabors.com/',
+  authorLink = 'https://nearestnabors.com/',
 }: {
   author: string;
   authorLink: string;
@@ -243,7 +291,7 @@ function Illustration({
           src={src}
           alt={alt}
           style={{maxHeight: 300}}
-          className="bg-white rounded-lg"
+          className="rounded-lg"
         />
         {caption ? (
           <figcaption className="text-center leading-tight mt-4">
@@ -275,7 +323,12 @@ function IllustrationBlock({
   const images = imageInfos.map((info, index) => (
     <figure key={index}>
       <div className="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4">
-        <img src={info.src} alt={info.alt} height={info.height} />
+        <img
+          className="text-primary"
+          src={info.src}
+          alt={info.alt}
+          height={info.height}
+        />
       </div>
       {info.caption ? (
         <figcaption className="text-secondary dark:text-secondary-dark text-center leading-tight mt-4">
@@ -357,6 +410,38 @@ function InlineTocItem({items}: {items: Array<NestedTocNode>}) {
   );
 }
 
+type TranslationProgress = 'complete' | 'in-progress';
+
+function LanguageList({progress}: {progress: TranslationProgress}) {
+  const allLanguages = React.useContext(LanguagesContext) ?? [];
+  const languages = allLanguages
+    .filter(
+      ({code}) =>
+        code !== 'en' &&
+        (progress === 'complete'
+          ? finishedTranslations.includes(code)
+          : !finishedTranslations.includes(code))
+    )
+    .sort((a, b) => a.enName.localeCompare(b.enName));
+  return (
+    <UL>
+      {languages.map(({code, name, enName}) => {
+        return (
+          <LI key={code}>
+            <Link href={`https://${code}.react.dev/`}>
+              {enName} ({name})
+            </Link>{' '}
+            &mdash;{' '}
+            <Link href={`https://github.com/reactjs/${code}.react.dev`}>
+              Contribute
+            </Link>
+          </LI>
+        );
+      })}
+    </UL>
+  );
+}
+
 function YouTubeIframe(props: any) {
   return (
     <div className="relative h-0 overflow-hidden pt-[56.25%]">
@@ -388,6 +473,7 @@ export const MDXComponents = {
   h2: H2,
   h3: H3,
   h4: H4,
+  h5: H5,
   hr: Divider,
   a: Link,
   img: Image,
@@ -396,6 +482,8 @@ export const MDXComponents = {
   pre: CodeBlock,
   CodeDiagram,
   ConsoleBlock,
+  ConsoleBlockMulti,
+  ConsoleLogLine,
   DeepDive: (props: {
     children: React.ReactNode;
     title: string;
@@ -416,16 +504,23 @@ export const MDXComponents = {
   IllustrationBlock,
   Intro,
   InlineToc,
+  LanguageList,
   LearnMore,
   Math,
   MathI,
   Note,
   Canary,
+  CanaryBadge,
+  NextMajor,
+  NextMajorBadge,
+  RSC,
+  RSCBadge,
   PackageImport,
   ReadBlogPost,
   Recap,
   Recipes,
   Sandpack,
+  SandpackWithHTMLOutput,
   TeamMember,
   TerminalBlock,
   YouWillLearn,
@@ -435,6 +530,7 @@ export const MDXComponents = {
   Solution,
   CodeStep,
   YouTubeIframe,
+  ErrorDecoder,
 };
 
 for (let key in MDXComponents) {
diff --git a/src/components/MDX/Sandpack/Console.tsx b/src/components/MDX/Sandpack/Console.tsx
index 85daee1f8..b5276fc13 100644
--- a/src/components/MDX/Sandpack/Console.tsx
+++ b/src/components/MDX/Sandpack/Console.tsx
@@ -5,7 +5,10 @@ import cn from 'classnames';
 import {useState, useRef, useEffect} from 'react';
 import {IconChevron} from 'components/Icon/IconChevron';
 
-import {SandpackCodeViewer, useSandpack} from '@codesandbox/sandpack-react';
+import {
+  SandpackCodeViewer,
+  useSandpack,
+} from '@codesandbox/sandpack-react/unstyled';
 import type {SandpackMessageConsoleMethods} from '@codesandbox/sandpack-client';
 
 const getType = (
diff --git a/src/components/MDX/Sandpack/CustomPreset.tsx b/src/components/MDX/Sandpack/CustomPreset.tsx
index 7b4d9dee2..c133e2a83 100644
--- a/src/components/MDX/Sandpack/CustomPreset.tsx
+++ b/src/components/MDX/Sandpack/CustomPreset.tsx
@@ -7,9 +7,8 @@ import {
   useSandpack,
   useActiveCode,
   SandpackCodeEditor,
-  // SandpackReactDevTools,
   SandpackLayout,
-} from '@codesandbox/sandpack-react';
+} from '@codesandbox/sandpack-react/unstyled';
 import cn from 'classnames';
 
 import {IconChevron} from 'components/Icon/IconChevron';
@@ -19,14 +18,8 @@ import {Preview} from './Preview';
 import {useSandpackLint} from './useSandpackLint';
 
 export const CustomPreset = memo(function CustomPreset({
-  showDevTools,
-  onDevToolsLoad,
-  devToolsLoaded,
   providedFiles,
 }: {
-  showDevTools: boolean;
-  devToolsLoaded: boolean;
-  onDevToolsLoad: () => void;
   providedFiles: Array<string>;
 }) {
   const {lintErrors, lintExtensions} = useSandpackLint();
@@ -41,9 +34,6 @@ export const CustomPreset = memo(function CustomPreset({
   const isExpandable = lineCount > 16;
   return (
     <SandboxShell
-      showDevTools={showDevTools}
-      onDevToolsLoad={onDevToolsLoad}
-      devToolsLoaded={devToolsLoaded}
       providedFiles={providedFiles}
       lintErrors={lintErrors}
       lintExtensions={lintExtensions}
@@ -53,16 +43,11 @@ export const CustomPreset = memo(function CustomPreset({
 });
 
 const SandboxShell = memo(function SandboxShell({
-  showDevTools,
-  devToolsLoaded,
   providedFiles,
   lintErrors,
   lintExtensions,
   isExpandable,
 }: {
-  showDevTools: boolean;
-  devToolsLoaded: boolean;
-  onDevToolsLoad: () => void;
   providedFiles: Array<string>;
   lintErrors: Array<any>;
   lintExtensions: Array<any>;
@@ -81,7 +66,6 @@ const SandboxShell = memo(function SandboxShell({
         <NavigationBar providedFiles={providedFiles} />
         <SandpackLayout
           className={cn(
-            showDevTools && devToolsLoaded && 'sp-layout-devtools',
             !(isExpandable || isExpanded) && 'rounded-b-lg overflow-hidden',
             isExpanded && 'sp-layout-expanded'
           )}>
@@ -123,11 +107,6 @@ const SandboxShell = memo(function SandboxShell({
             </button>
           )}
         </SandpackLayout>
-
-        {/* {showDevTools && (
-          // @ts-ignore TODO(@danilowoz): support devtools
-          <SandpackReactDevTools onLoadModule={onDevToolsLoad} />
-        )} */}
       </div>
     </>
   );
diff --git a/src/components/MDX/Sandpack/DownloadButton.tsx b/src/components/MDX/Sandpack/DownloadButton.tsx
index 75ed0c32d..94cf13ddc 100644
--- a/src/components/MDX/Sandpack/DownloadButton.tsx
+++ b/src/components/MDX/Sandpack/DownloadButton.tsx
@@ -3,8 +3,9 @@
  */
 
 import {useSyncExternalStore} from 'react';
-import {useSandpack} from '@codesandbox/sandpack-react';
+import {useSandpack} from '@codesandbox/sandpack-react/unstyled';
 import {IconDownload} from '../../Icon/IconDownload';
+import {AppJSPath, StylesCSSPath, SUPPORTED_FILES} from './createFileMap';
 export interface DownloadButtonProps {}
 
 let supportsImportMap = false;
@@ -32,8 +33,6 @@ function useSupportsImportMap() {
   return useSyncExternalStore(subscribe, getCurrentValue, getServerSnapshot);
 }
 
-const SUPPORTED_FILES = ['/App.js', '/styles.css'];
-
 export function DownloadButton({
   providedFiles,
 }: {
@@ -49,8 +48,8 @@ export function DownloadButton({
   }
 
   const downloadHTML = () => {
-    const css = sandpack.files['/styles.css']?.code ?? '';
-    const code = sandpack.files['/App.js']?.code ?? '';
+    const css = sandpack.files[StylesCSSPath]?.code ?? '';
+    const code = sandpack.files[AppJSPath]?.code ?? '';
     const blob = new Blob([
       `<!DOCTYPE html>
 <html>
diff --git a/src/components/MDX/Sandpack/LoadingOverlay.tsx b/src/components/MDX/Sandpack/LoadingOverlay.tsx
index 7c261866d..cd3f38fca 100644
--- a/src/components/MDX/Sandpack/LoadingOverlay.tsx
+++ b/src/components/MDX/Sandpack/LoadingOverlay.tsx
@@ -4,7 +4,7 @@ import {
   LoadingOverlayState,
   OpenInCodeSandboxButton,
   useSandpack,
-} from '@codesandbox/sandpack-react';
+} from '@codesandbox/sandpack-react/unstyled';
 import {useEffect} from 'react';
 
 const FADE_ANIMATION_DURATION = 200;
diff --git a/src/components/MDX/Sandpack/NavigationBar.tsx b/src/components/MDX/Sandpack/NavigationBar.tsx
index 1392ea7dd..26ed5783d 100644
--- a/src/components/MDX/Sandpack/NavigationBar.tsx
+++ b/src/components/MDX/Sandpack/NavigationBar.tsx
@@ -15,7 +15,7 @@ import {
   FileTabs,
   useSandpack,
   useSandpackNavigation,
-} from '@codesandbox/sandpack-react';
+} from '@codesandbox/sandpack-react/unstyled';
 import {OpenInCodeSandboxButton} from './OpenInCodeSandboxButton';
 import {ResetButton} from './ResetButton';
 import {DownloadButton} from './DownloadButton';
diff --git a/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx b/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
index 78286aeaf..a27122ed6 100644
--- a/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
+++ b/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {UnstyledOpenInCodeSandboxButton} from '@codesandbox/sandpack-react';
+import {UnstyledOpenInCodeSandboxButton} from '@codesandbox/sandpack-react/unstyled';
 import {IconNewPage} from '../../Icon/IconNewPage';
 
 export const OpenInCodeSandboxButton = () => {
diff --git a/src/components/MDX/Sandpack/Preview.tsx b/src/components/MDX/Sandpack/Preview.tsx
index 6b7a6d183..7d7cdc5a7 100644
--- a/src/components/MDX/Sandpack/Preview.tsx
+++ b/src/components/MDX/Sandpack/Preview.tsx
@@ -4,7 +4,7 @@
 
 /* eslint-disable react-hooks/exhaustive-deps */
 import {useRef, useState, useEffect, useMemo, useId} from 'react';
-import {useSandpack, SandpackStack} from '@codesandbox/sandpack-react';
+import {useSandpack, SandpackStack} from '@codesandbox/sandpack-react/unstyled';
 import cn from 'classnames';
 import {ErrorMessage} from './ErrorMessage';
 import {SandpackConsole} from './Console';
@@ -42,14 +42,7 @@ export function Preview({
     null
   );
 
-  let {
-    error: rawError,
-    registerBundler,
-    unregisterBundler,
-    errorScreenRegisteredRef,
-    openInCSBRegisteredRef,
-    loadingScreenRegisteredRef,
-  } = sandpack;
+  let {error: rawError, registerBundler, unregisterBundler} = sandpack;
 
   if (
     rawError &&
@@ -59,6 +52,12 @@ export function Preview({
     rawError = null;
   }
 
+  // When throwing a new Error in Sandpack - we want to disable the dev error dialog
+  // to show the Error Boundary fallback
+  if (rawError && rawError.message.includes('Example Error:')) {
+    rawError = null;
+  }
+
   // Memoized because it's fed to debouncing.
   const firstLintError = useMemo(() => {
     if (lintErrors.length === 0) {
@@ -88,12 +87,6 @@ export function Preview({
   const clientId = useId();
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
 
-  // SandpackPreview immediately registers the custom screens/components so the bundler does not render any of them
-  // TODO: why are we doing this during render?
-  openInCSBRegisteredRef.current = true;
-  errorScreenRegisteredRef.current = true;
-  loadingScreenRegisteredRef.current = true;
-
   const sandpackIdle = sandpack.status === 'idle';
 
   useEffect(function createBundler() {
@@ -120,7 +113,7 @@ export function Preview({
           /**
            * The spinner component transition might be longer than
            * the bundler loading, so we only show the spinner if
-           * it takes more than 1s to load the bundler.
+           * it takes more than 500s to load the bundler.
            */
           timeout = setTimeout(() => {
             setShowLoading(true);
diff --git a/src/components/MDX/Sandpack/SandpackRoot.tsx b/src/components/MDX/Sandpack/SandpackRoot.tsx
index f710f8fe0..a47fa6860 100644
--- a/src/components/MDX/Sandpack/SandpackRoot.tsx
+++ b/src/components/MDX/Sandpack/SandpackRoot.tsx
@@ -2,18 +2,18 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {Children, useState} from 'react';
+import {Children} from 'react';
 import * as React from 'react';
-import {SandpackProvider} from '@codesandbox/sandpack-react';
+import {SandpackProvider} from '@codesandbox/sandpack-react/unstyled';
 import {SandpackLogLevel} from '@codesandbox/sandpack-client';
 import {CustomPreset} from './CustomPreset';
 import {createFileMap} from './createFileMap';
 import {CustomTheme} from './Themes';
+import {template} from './template';
 
 type SandpackProps = {
   children: React.ReactNode;
   autorun?: boolean;
-  showDevTools?: boolean;
 };
 
 const sandboxStyle = `
@@ -67,35 +67,31 @@ ul {
 `.trim();
 
 function SandpackRoot(props: SandpackProps) {
-  let {children, autorun = true, showDevTools = false} = props;
-  const [devToolsLoaded, setDevToolsLoaded] = useState(false);
+  let {children, autorun = true} = props;
   const codeSnippets = Children.toArray(children) as React.ReactElement[];
   const files = createFileMap(codeSnippets);
 
-  files['/styles.css'] = {
-    code: [sandboxStyle, files['/styles.css']?.code ?? ''].join('\n\n'),
-    hidden: !files['/styles.css']?.visible,
+  files['/src/styles.css'] = {
+    code: [sandboxStyle, files['/src/styles.css']?.code ?? ''].join('\n\n'),
+    hidden: !files['/src/styles.css']?.visible,
   };
 
   return (
     <div className="sandpack sandpack--playground w-full my-8" dir="ltr">
       <SandpackProvider
-        template="react"
-        files={files}
+        files={{...template, ...files}}
         theme={CustomTheme}
+        customSetup={{
+          environment: 'create-react-app',
+        }}
         options={{
           autorun,
           initMode: 'user-visible',
           initModeObserverOptions: {rootMargin: '1400px 0px'},
-          bundlerURL: 'https://1e4ad8f7.sandpack-bundler-4bw.pages.dev',
+          bundlerURL: 'https://786946de.sandpack-bundler-4bw.pages.dev',
           logLevel: SandpackLogLevel.None,
         }}>
-        <CustomPreset
-          showDevTools={showDevTools}
-          onDevToolsLoad={() => setDevToolsLoaded(true)}
-          devToolsLoaded={devToolsLoaded}
-          providedFiles={Object.keys(files)}
-        />
+        <CustomPreset providedFiles={Object.keys(files)} />
       </SandpackProvider>
     </div>
   );
diff --git a/src/components/MDX/Sandpack/createFileMap.ts b/src/components/MDX/Sandpack/createFileMap.ts
index 89d53cfd2..615d34c9a 100644
--- a/src/components/MDX/Sandpack/createFileMap.ts
+++ b/src/components/MDX/Sandpack/createFileMap.ts
@@ -2,12 +2,19 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import type {SandpackFile} from '@codesandbox/sandpack-react';
+import type {SandpackFile} from '@codesandbox/sandpack-react/unstyled';
+
+export const AppJSPath = `/src/App.js`;
+export const StylesCSSPath = `/src/styles.css`;
+export const SUPPORTED_FILES = [AppJSPath, StylesCSSPath];
 
 export const createFileMap = (codeSnippets: any) => {
   return codeSnippets.reduce(
     (result: Record<string, SandpackFile>, codeSnippet: React.ReactElement) => {
-      if ((codeSnippet.type as any).mdxName !== 'pre') {
+      if (
+        (codeSnippet.type as any).mdxName !== 'pre' &&
+        codeSnippet.type !== 'pre'
+      ) {
         return result;
       }
       const {props} = codeSnippet.props.children;
@@ -26,15 +33,16 @@ export const createFileMap = (codeSnippets: any) => {
         }
       } else {
         if (props.className === 'language-js') {
-          filePath = '/App.js';
+          filePath = AppJSPath;
         } else if (props.className === 'language-css') {
-          filePath = '/styles.css';
+          filePath = StylesCSSPath;
         } else {
           throw new Error(
             `Code block is missing a filename: ${props.children}`
           );
         }
       }
+
       if (result[filePath]) {
         throw new Error(
           `File ${filePath} was defined multiple times. Each file snippet should have a unique path name`
diff --git a/src/components/MDX/Sandpack/index.tsx b/src/components/MDX/Sandpack/index.tsx
index 6873547a1..6755ba8de 100644
--- a/src/components/MDX/Sandpack/index.tsx
+++ b/src/components/MDX/Sandpack/index.tsx
@@ -3,7 +3,7 @@
  */
 
 import {lazy, memo, Children, Suspense} from 'react';
-import {createFileMap} from './createFileMap';
+import {AppJSPath, createFileMap} from './createFileMap';
 
 const SandpackRoot = lazy(() => import('./SandpackRoot'));
 
@@ -57,7 +57,7 @@ export default memo(function SandpackWrapper(props: any): any {
   );
   let activeCode;
   if (!activeCodeSnippet.length) {
-    activeCode = codeSnippet['/App.js'].code;
+    activeCode = codeSnippet[AppJSPath].code;
   } else {
     activeCode = codeSnippet[activeCodeSnippet[0]].code;
   }
diff --git a/src/components/MDX/Sandpack/template.ts b/src/components/MDX/Sandpack/template.ts
new file mode 100644
index 000000000..42f02f6a6
--- /dev/null
+++ b/src/components/MDX/Sandpack/template.ts
@@ -0,0 +1,54 @@
+export const template = {
+  '/src/index.js': {
+    hidden: true,
+    code: `import React, { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./styles.css";
+
+import App from "./App";
+
+const root = createRoot(document.getElementById("root"));
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);`,
+  },
+  '/package.json': {
+    hidden: true,
+    code: JSON.stringify(
+      {
+        name: 'react.dev',
+        version: '0.0.0',
+        main: '/src/index.js',
+        scripts: {
+          start: 'react-scripts start',
+          build: 'react-scripts build',
+          test: 'react-scripts test --env=jsdom',
+          eject: 'react-scripts eject',
+        },
+        dependencies: {
+          react: '19.0.0-rc-3edc000d-20240926',
+          'react-dom': '19.0.0-rc-3edc000d-20240926',
+          'react-scripts': '^5.0.0',
+        },
+      },
+      null,
+      2
+    ),
+  },
+  '/public/index.html': {
+    hidden: true,
+    code: `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>`,
+  },
+};
diff --git a/src/components/MDX/SandpackWithHTMLOutput.tsx b/src/components/MDX/SandpackWithHTMLOutput.tsx
new file mode 100644
index 000000000..51ce28dc1
--- /dev/null
+++ b/src/components/MDX/SandpackWithHTMLOutput.tsx
@@ -0,0 +1,85 @@
+import {Children, memo} from 'react';
+import InlineCode from './InlineCode';
+import Sandpack from './Sandpack';
+
+const ShowRenderedHTML = `
+import { renderToStaticMarkup } from 'react-dom/server';
+import formatHTML from './formatHTML.js';
+
+export default function ShowRenderedHTML({children}) {
+  const markup = renderToStaticMarkup(
+    <html>
+      <head />
+      <body>{children}</body>
+    </html>
+  );
+  return (
+    <>
+      <h1>Rendered HTML:</h1>
+      <pre>
+        {formatHTML(markup)}
+      </pre>
+    </>
+  );
+}`;
+
+const formatHTML = `
+import format from 'html-format';
+
+export default function formatHTML(markup) {
+  // Cheap tricks to format the HTML readably -- haven't been able to
+  // find a package that runs in browser and prettifies the HTML if it
+  // lacks line-breaks.
+  return format(markup
+    .replace('<html>', '<html>\\n')
+    .replace('<head>', '<head>\\n')
+    .replaceAll(/<\\/script>/g, '<\\/script>\\n')
+    .replaceAll(/<style([^>]*)\\/>/g, '<style $1/>\\n\\n')
+    .replaceAll(/<\\/style>/g, '\\n    <\\/style>\\n')
+    .replaceAll(/<link([^>]*)\\/>/g, '<link $1/>\\n')
+    .replaceAll(/<meta([^/]*)\\/>/g, '<meta $1/>\\n')
+    .replace('</head>', '</head>\\n')
+    .replace('<body>', '<body>\\n')
+    .replace('</body>', '\\n</body>\\n')
+    .replace('</h1>', '</h1>\\n')
+  );
+}
+`;
+
+const packageJSON = `
+{
+  "dependencies": {
+    "react": "18.3.0-canary-6db7f4209-20231021",
+    "react-dom": "18.3.0-canary-6db7f4209-20231021",
+    "react-scripts": "^5.0.0",
+    "html-format": "^1.1.2"
+  },
+  "main": "/index.js",
+  "devDependencies": {}
+}
+`;
+
+// Intentionally not a React component because <Sandpack> will read
+// through its childrens' props. This imitates the output of ```
+// codeblocks in MDX.
+function createFile(meta: string, source: string) {
+  return (
+    <pre key={meta}>
+      <InlineCode meta={meta} className="language-js">
+        {source}
+      </InlineCode>
+    </pre>
+  );
+}
+
+export default memo(function SandpackWithHTMLOutput(
+  props: React.ComponentProps<typeof Sandpack>
+) {
+  const children = [
+    ...Children.toArray(props.children),
+    createFile('src/ShowRenderedHTML.js', ShowRenderedHTML),
+    createFile('src/formatHTML.js hidden', formatHTML),
+    createFile('package.json hidden', packageJSON),
+  ];
+  return <Sandpack {...props}>{children}</Sandpack>;
+});
diff --git a/src/components/MDX/TeamMember.tsx b/src/components/MDX/TeamMember.tsx
index da2dc4535..e1b9198d8 100644
--- a/src/components/MDX/TeamMember.tsx
+++ b/src/components/MDX/TeamMember.tsx
@@ -5,6 +5,8 @@
 import * as React from 'react';
 import Image from 'next/image';
 import {IconTwitter} from '../Icon/IconTwitter';
+import {IconThreads} from '../Icon/IconThreads';
+import {IconBsky} from '../Icon/IconBsky';
 import {IconGitHub} from '../Icon/IconGitHub';
 import {ExternalLink} from '../ExternalLink';
 import {H3} from './Heading';
@@ -17,6 +19,8 @@ interface TeamMemberProps {
   children: React.ReactNode;
   photo: string;
   twitter?: string;
+  threads?: string;
+  bsky?: string;
   github?: string;
   personal?: string;
 }
@@ -30,6 +34,8 @@ export function TeamMember({
   photo,
   github,
   twitter,
+  threads,
+  bsky,
   personal,
 }: TeamMemberProps) {
   if (name == null || title == null || permalink == null || children == null) {
@@ -59,25 +65,47 @@ export function TeamMember({
           </H3>
           {title && <div>{title}</div>}
           {children}
-          <div className="sm:flex sm:flex-row">
+          <div className="sm:flex sm:flex-row flex-wrap text-secondary dark:text-secondary-dark">
             {twitter && (
               <div className="me-4">
                 <ExternalLink
-                  aria-label="React on Twitter"
+                  aria-label={`${name} on Twitter`}
                   href={`https://twitter.com/${twitter}`}
-                  className="hover:text-primary dark:text-primary-dark flex flex-row items-center">
-                  <IconTwitter className="pe-2" />
+                  className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
+                  <IconTwitter className="pe-1" />
                   {twitter}
                 </ExternalLink>
               </div>
             )}
+            {threads && (
+              <div className="me-4">
+                <ExternalLink
+                  aria-label={`${name} on Threads`}
+                  href={`https://threads.net/${threads}`}
+                  className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
+                  <IconThreads className="pe-1" />
+                  {threads}
+                </ExternalLink>
+              </div>
+            )}
+            {bsky && (
+              <div className="me-4">
+                <ExternalLink
+                  aria-label={`${name} on Bluesky`}
+                  href={`https://bsky.app/profile/${bsky}`}
+                  className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
+                  <IconBsky className="pe-1" />
+                  {bsky}
+                </ExternalLink>
+              </div>
+            )}
             {github && (
               <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="pe-2" /> {github}
+                  className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
+                  <IconGitHub className="pe-1" /> {github}
                 </ExternalLink>
               </div>
             )}
@@ -85,8 +113,8 @@ export function TeamMember({
               <ExternalLink
                 aria-label="Personal Site"
                 href={`https://${personal}`}
-                className="hover:text-primary dark:text-primary-dark flex flex-row items-center">
-                <IconLink className="pe-2" /> {personal}
+                className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
+                <IconLink className="pe-1" /> {personal}
               </ExternalLink>
             )}
           </div>
diff --git a/src/components/PageHeading.tsx b/src/components/PageHeading.tsx
index 076a38be9..6000c8e51 100644
--- a/src/components/PageHeading.tsx
+++ b/src/components/PageHeading.tsx
@@ -22,7 +22,6 @@ function PageHeading({
   title,
   status,
   canary,
-  description,
   tags = [],
   breadcrumbs,
 }: PageHeadingProps) {
@@ -34,17 +33,12 @@ function PageHeading({
           {title}
           {canary && (
             <IconCanary
-              title="This feature is available in the latest Canary"
+              title=" - This feature is available in the latest Canary"
               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-primary leading-large">
-            {description}
-          </p>
-        )}
         {tags?.length > 0 && (
           <div className="mt-4">
             {tags.map((tag) => (
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index 8bc47297a..f5c963f67 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -94,7 +94,17 @@ export function Search({
   onOpen,
   onClose,
   searchParameters = {
-    hitsPerPage: 5,
+    hitsPerPage: 30,
+    attributesToHighlight: [
+      'hierarchy.lvl0',
+      'hierarchy.lvl1',
+      'hierarchy.lvl2',
+      'hierarchy.lvl3',
+      'hierarchy.lvl4',
+      'hierarchy.lvl5',
+      'hierarchy.lvl6',
+      'content',
+    ],
   },
 }: SearchProps) {
   useDocSearchKeyboardEvents({isOpen, onOpen, onClose});
@@ -110,7 +120,6 @@ export function Search({
         createPortal(
           <DocSearchModal
             {...options}
-            initialScrollY={window.scrollY}
             searchParameters={searchParameters}
             onClose={onClose}
             navigator={{
diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx
index d4f037128..628085744 100644
--- a/src/components/Seo.tsx
+++ b/src/components/Seo.tsx
@@ -6,9 +6,11 @@ import * as React from 'react';
 import Head from 'next/head';
 import {withRouter, Router} from 'next/router';
 import {siteConfig} from '../siteConfig';
+import {finishedTranslations} from 'utils/finishedTranslations';
 
 export interface SeoProps {
   title: string;
+  titleForTitleTag: undefined | string;
   description?: string;
   image?: string;
   // jsonld?: JsonLDType | Array<JsonLDType>;
@@ -17,22 +19,8 @@ export interface SeoProps {
   searchOrder?: number;
 }
 
-const deployedTranslations = [
-  'en',
-  'zh-hans',
-  'es',
-  // We'll add more languages when they have enough content.
-  // Please DO NOT edit this list without a discussion in the reactjs/react.dev repo.
-  // It must be the same between all translations.
-];
-
-let shouldPreventIndexing = false;
-if (
-  siteConfig.languageCode !== 'en' &&
-  !deployedTranslations.includes(siteConfig.languageCode)
-) {
-  shouldPreventIndexing = true;
-}
+// If you are a maintainer of a language fork,
+// deployedTranslations has been moved to src/utils/finishedTranslations.ts.
 
 function getDomain(languageCode: string): string {
   const subdomain = languageCode === 'en' ? '' : languageCode + '.';
@@ -42,7 +30,7 @@ function getDomain(languageCode: string): string {
 export const Seo = withRouter(
   ({
     title,
-    description = 'The library for web and native user interfaces',
+    titleForTitleTag,
     image = '/images/og-default.png',
     router,
     children,
@@ -53,14 +41,20 @@ export const Seo = withRouter(
     const canonicalUrl = `https://${siteDomain}${
       router.asPath.split(/[\?\#]/)[0]
     }`;
-    const pageTitle = isHomePage ? title : title + ' – React';
+    // Allow setting a different title for Google results
+    const pageTitle =
+      (titleForTitleTag ?? title) + (isHomePage ? '' : ' – React');
     // Twitter's meta parser is not very good.
     const twitterTitle = pageTitle.replace(/[<>]/g, '');
+    let description = isHomePage
+      ? 'React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations.'
+      : 'The library for web and native user interfaces';
     return (
       <Head>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         {title != null && <title key="title">{pageTitle}</title>}
-        {description != null && (
+        {isHomePage && (
+          // Let Google figure out a good description for each page.
           <meta name="description" key="description" content={description} />
         )}
         <link rel="canonical" href={canonicalUrl} />
@@ -69,8 +63,7 @@ export const Seo = withRouter(
           href={canonicalUrl.replace(siteDomain, getDomain('en'))}
           hrefLang="x-default"
         />
-        {shouldPreventIndexing && <meta name="robots" content="noindex" />}
-        {deployedTranslations.map((languageCode) => (
+        {finishedTranslations.map((languageCode) => (
           <link
             key={'alt-' + languageCode}
             rel="alternate"
diff --git a/src/components/SocialBanner.tsx b/src/components/SocialBanner.tsx
index e980b6f4d..2db62c994 100644
--- a/src/components/SocialBanner.tsx
+++ b/src/components/SocialBanner.tsx
@@ -7,9 +7,9 @@ import {useRef, useEffect} from 'react';
 import cn from 'classnames';
 import {ExternalLink} from './ExternalLink';
 
-const bannerText = 'Support Ukraine 🇺🇦';
-const bannerLink = 'https://opensource.fb.com/support-ukraine';
-const bannerLinkText = 'Help Provide Humanitarian Aid to Ukraine';
+const bannerText = 'Stream React Conf on May 15-16.';
+const bannerLink = 'https://conf.react.dev/';
+const bannerLinkText = 'Learn more.';
 
 export default function SocialBanner() {
   const ref = useRef<HTMLDivElement | null>(null);
@@ -39,9 +39,7 @@ export default function SocialBanner() {
       <ExternalLink
         className="ms-0 sm:ms-1 text-link dark:text-link-dark hover:underline"
         href={bannerLink}>
-        <div className="inline sm:hidden">🇺🇦 </div>
         {bannerLinkText}
-        <span className="hidden sm:inline">.</span>
       </ExternalLink>
     </div>
   );
diff --git a/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md b/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md
index 948096c0f..b38853494 100644
--- a/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md
+++ b/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md
@@ -1,5 +1,8 @@
 ---
 title: "Introducing Zero-Bundle-Size React Server Components"
+author: Dan Abramov, Lauren Tan, Joseph Savona, and Sebastian Markbage
+date: 2020/12/21
+description: 2020 has been a long year. As it comes to an end we wanted to share a special Holiday Update on our research into zero-bundle-size React Server Components.
 ---
 
 December 21, 2020 by [Dan Abramov](https://twitter.com/dan_abramov), [Lauren Tan](https://twitter.com/potetotes), [Joseph Savona](https://twitter.com/en_JS), and [Sebastian Markbåge](https://twitter.com/sebmarkbage)
diff --git a/src/content/blog/2021/06/08/the-plan-for-react-18.md b/src/content/blog/2021/06/08/the-plan-for-react-18.md
index 0bf744c1d..42843cc42 100644
--- a/src/content/blog/2021/06/08/the-plan-for-react-18.md
+++ b/src/content/blog/2021/06/08/the-plan-for-react-18.md
@@ -1,5 +1,8 @@
 ---
 title: "The Plan for React 18"
+author: Andrew Clark, Brian Vaughn, Christine Abernathy, Dan Abramov, Rachel Nabors, Rick Hanlon, Sebastian Markbage, and Seth Webster
+date: 2021/06/08
+description: The React team is excited to share a few updates. We’ve started work on the React 18 release, which will be our next major version. We’ve created a Working Group to prepare the community for gradual adoption of new features in React 18. We’ve published a React 18 Alpha so that library authors can try it and provide feedback...
 ---
 
 June 8, 2021 by [Andrew Clark](https://twitter.com/acdlite), [Brian Vaughn](https://github.com/bvaughn), [Christine Abernathy](https://twitter.com/abernathyca), [Dan Abramov](https://twitter.com/dan_abramov), [Rachel Nabors](https://twitter.com/rachelnabors), [Rick Hanlon](https://twitter.com/rickhanlonii), [Sebastian Markbåge](https://twitter.com/sebmarkbage), and [Seth Webster](https://twitter.com/sethwebster)
diff --git a/src/content/blog/2021/12/17/react-conf-2021-recap.md b/src/content/blog/2021/12/17/react-conf-2021-recap.md
index 89e407af3..1806c757f 100644
--- a/src/content/blog/2021/12/17/react-conf-2021-recap.md
+++ b/src/content/blog/2021/12/17/react-conf-2021-recap.md
@@ -1,5 +1,8 @@
 ---
 title: "React Conf 2021 Recap"
+author: Jesslyn Tannady and Rick Hanlon
+date: 2021/12/17
+description: Last week we hosted our 6th React Conf. In previous years, we've used the React Conf stage to deliver industry changing announcements such as React Native and React Hooks. This year, we shared our multi-platform vision for React, starting with the release of React 18 and gradual adoption of concurrent features.
 ---
 
 December 17, 2021 by [Jesslyn Tannady](https://twitter.com/jtannady) and [Rick Hanlon](https://twitter.com/rickhanlonii)
diff --git a/src/content/blog/2022/03/08/react-18-upgrade-guide.md b/src/content/blog/2022/03/08/react-18-upgrade-guide.md
index 29ba0b71d..9d34dfaaa 100644
--- a/src/content/blog/2022/03/08/react-18-upgrade-guide.md
+++ b/src/content/blog/2022/03/08/react-18-upgrade-guide.md
@@ -1,5 +1,8 @@
 ---
 title: "How to Upgrade to React 18"
+author: Rick Hanlon
+date: 2022/03/08
+description: As we shared in the release post, React 18 introduces features powered by our new concurrent renderer, with a gradual adoption strategy for existing applications. In this post, we will guide you through the steps for upgrading to React 18.
 ---
 
 March 08, 2022 by [Rick Hanlon](https://twitter.com/rickhanlonii)
@@ -224,8 +227,8 @@ For more information, see the [Automatic batching deep dive](https://github.com/
 
 In the React 18 Working Group we worked with library maintainers to create new APIs needed to support concurrent rendering for use cases specific to their use case in areas like styles, and external stores. To support React 18, some libraries may need to switch to one of the following APIs:
 
-* `useSyncExternalStore` is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. This new API is recommended for any library that integrates with state external to React. For more information, see the [useSyncExternalStore overview post](https://github.com/reactwg/react-18/discussions/70) and [useSyncExternalStore API details](https://github.com/reactwg/react-18/discussions/86).
-* `useInsertionEffect` is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you've already built a CSS-in-JS library we don't expect you to ever use this. This hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. For more information, see the [Library Upgrade Guide for `<style>`](https://github.com/reactwg/react-18/discussions/110).
+* `useSyncExternalStore` is a new Hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. This new API is recommended for any library that integrates with state external to React. For more information, see the [useSyncExternalStore overview post](https://github.com/reactwg/react-18/discussions/70) and [useSyncExternalStore API details](https://github.com/reactwg/react-18/discussions/86).
+* `useInsertionEffect` is a new Hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you've already built a CSS-in-JS library we don't expect you to ever use this. This Hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. For more information, see the [Library Upgrade Guide for `<style>`](https://github.com/reactwg/react-18/discussions/110).
 
 React 18 also introduces new APIs for concurrent rendering such as `startTransition`, `useDeferredValue` and `useId`, which we share more about in the [release post](/blog/2022/03/29/react-v18).
 
diff --git a/src/content/blog/2022/03/29/react-v18.md b/src/content/blog/2022/03/29/react-v18.md
index b390ce941..d21eeb1f5 100644
--- a/src/content/blog/2022/03/29/react-v18.md
+++ b/src/content/blog/2022/03/29/react-v18.md
@@ -1,5 +1,8 @@
 ---
 title: "React v18.0"
+author: The React Team
+date: 2022/03/08
+description: React 18 is now available on npm! In our last post, we shared step-by-step instructions for upgrading your app to React 18. In this post, we'll give an overview of what's new in React 18, and what it means for the future.
 ---
 
 March 29, 2022 by [The React Team](/community/team)
@@ -139,8 +142,8 @@ startTransition(() => {
 Updates wrapped in startTransition are handled as non-urgent and will be interrupted if more urgent updates like clicks or key presses come in. If a transition gets interrupted by the user (for example, by typing multiple characters in a row), React will throw out the stale rendering work that wasn’t finished and render only the latest update.
 
 
-* `useTransition`: a hook to start transitions, including a value to track the pending state.
-* `startTransition`: a method to start transitions when the hook cannot be used.
+* `useTransition`: a Hook to start transitions, including a value to track the pending state.
+* `startTransition`: a method to start transitions when the Hook cannot be used.
 
 Transitions will opt in to concurrent rendering, which allows the update to be interrupted. If the content re-suspends, transitions also tell React to continue showing the current content while rendering the transition content in the background (see the [Suspense RFC](https://github.com/reactjs/rfcs/blob/main/text/0213-suspense-in-react-18.md) for more info).
 
@@ -229,7 +232,7 @@ With Strict Mode in React 18, React will simulate unmounting and remounting the
 
 #### useId {/*useid*/}
 
-`useId` is a new hook for generating unique IDs on both the client and server, while avoiding hydration mismatches. It is primarily useful for component libraries integrating with accessibility APIs that require unique IDs. This solves an issue that already exists in React 17 and below, but it's even more important in React 18 because of how the new streaming server renderer delivers HTML out-of-order. [See docs here](/reference/react/useId).
+`useId` is a new Hook for generating unique IDs on both the client and server, while avoiding hydration mismatches. It is primarily useful for component libraries integrating with accessibility APIs that require unique IDs. This solves an issue that already exists in React 17 and below, but it's even more important in React 18 because of how the new streaming server renderer delivers HTML out-of-order. [See docs here](/reference/react/useId).
 
 > Note
 >
@@ -237,7 +240,7 @@ With Strict Mode in React 18, React will simulate unmounting and remounting the
 
 #### useTransition {/*usetransition*/}
 
-`useTransition` and `startTransition` let you mark some state updates as not urgent. Other state updates are considered urgent by default. React will allow urgent state updates (for example, updating a text input) to interrupt non-urgent state updates (for example, rendering a list of search results). [See docs here](/reference/react/useTransition)
+`useTransition` and `startTransition` let you mark some state updates as not urgent. Other state updates are considered urgent by default. React will allow urgent state updates (for example, updating a text input) to interrupt non-urgent state updates (for example, rendering a list of search results). [See docs here](/reference/react/useTransition).
 
 #### useDeferredValue {/*usedeferredvalue*/}
 
@@ -245,7 +248,7 @@ With Strict Mode in React 18, React will simulate unmounting and remounting the
 
 #### useSyncExternalStore {/*usesyncexternalstore*/}
 
-`useSyncExternalStore` is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. It removes the need for useEffect when implementing subscriptions to external data sources, and is recommended for any library that integrates with state external to React. [See docs here](/reference/react/useSyncExternalStore).
+`useSyncExternalStore` is a new Hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. It removes the need for useEffect when implementing subscriptions to external data sources, and is recommended for any library that integrates with state external to React. [See docs here](/reference/react/useSyncExternalStore).
 
 > Note
 >
@@ -253,7 +256,7 @@ With Strict Mode in React 18, React will simulate unmounting and remounting the
 
 #### useInsertionEffect {/*useinsertioneffect*/}
 
-`useInsertionEffect` is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you’ve already built a CSS-in-JS library we don’t expect you to ever use this. This hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. [See docs here](/reference/react/useInsertionEffect).
+`useInsertionEffect` is a new Hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you’ve already built a CSS-in-JS library we don’t expect you to ever use this. This Hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. [See docs here](/reference/react/useInsertionEffect).
 
 > Note
 >
@@ -339,4 +342,3 @@ See [How to Upgrade to React 18](/blog/2022/03/08/react-18-upgrade-guide) for st
 * Update webpack plugin for webpack 5 ([#22739](https://github.com/facebook/react/pull/22739)  by [@michenly](https://github.com/michenly))
 * Fix a mistake in the Node loader. ([#22537](https://github.com/facebook/react/pull/22537)  by [@btea](https://github.com/btea))
 * Use `globalThis` instead of `window` for edge environments. ([#22777](https://github.com/facebook/react/pull/22777)  by [@huozhi](https://github.com/huozhi))
-
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 0d9e8e260..134990991 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
@@ -1,5 +1,8 @@
 ---
 title: "React Labs: What We've Been Working On – June 2022"
+author:  Andrew Clark, Dan Abramov, Jan Kassens, Joseph Savona, Josh Story, Lauren Tan, Luna Ruan, Mengdi Chen, Rick Hanlon, Robert Zhang, Sathya Gunasekaran, Sebastian Markbage, and Xuan Huang
+date: 2022/06/15
+description: React 18 was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’re exploring.
 ---
 
 June 15, 2022 by [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://twitter.com/dan_abramov), [Jan Kassens](https://twitter.com/kassens), [Joseph Savona](https://twitter.com/en_JS), [Josh Story](https://twitter.com/joshcstory), [Lauren Tan](https://twitter.com/potetotes), [Luna Ruan](https://twitter.com/lunaruan), [Mengdi Chen](https://twitter.com/mengdi_en), [Rick Hanlon](https://twitter.com/rickhanlonii), [Robert Zhang](https://twitter.com/jiaxuanzhang01), [Sathya Gunasekaran](https://twitter.com/_gsathya), [Sebastian Markbåge](https://twitter.com/sebmarkbage), and [Xuan Huang](https://twitter.com/Huxpro)
@@ -8,7 +11,7 @@ June 15, 2022 by [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](http
 
 <Intro>
 
-[React 18](https://reactjs.org/blog/2022/03/29/react-v18) was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’re exploring.
+[React 18](/blog/2022/03/29/react-v18) was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’re exploring.
 
 </Intro>
 
@@ -28,7 +31,7 @@ We’re working together with Vercel and Shopify to unify bundler support for sh
 
 ## Asset Loading {/*asset-loading*/}
 
-Currently, assets like scripts, external styles, fonts, and images are typically preloaded and loaded using external systems. This can make it tricky to coordinate across new environments like streaming, server components, and more.
+Currently, assets like scripts, external styles, fonts, and images are typically preloaded and loaded using external systems. This can make it tricky to coordinate across new environments like streaming, Server Components, and more.
 We’re looking at adding APIs to preload and load deduplicated external assets through React APIs that work in all React environments.
 
 We’re also looking at having these support Suspense so you can have images, CSS, and fonts that block display until they’re loaded but don’t block streaming and concurrent rendering. This can help avoid [“popcorning“](https://twitter.com/sebmarkbage/status/1516852731251724293) as the visuals pop and layout shifts.
@@ -41,7 +44,7 @@ Static Site Generation (SSG) and Incremental Static Regeneration (ISR) are great
 
 We gave an [early preview](https://www.youtube.com/watch?v=lGEMwh32soc) of React Forget at React Conf 2021. It’s a compiler that automatically generates the equivalent of `useMemo` and `useCallback` calls to minimize the cost of re-rendering, while retaining React’s programming model.
 
-Recently, we finished a rewrite of the compiler to make it more reliable and capable. This new architecture allows us to analyze and memoize more complex patterns such as the use of [local mutations](/learn/keeping-components-pure#local-mutation-your-components-little-secret), and opens up many new compile-time optimization opportunities beyond just being on par with memoization hooks.
+Recently, we finished a rewrite of the compiler to make it more reliable and capable. This new architecture allows us to analyze and memoize more complex patterns such as the use of [local mutations](/learn/keeping-components-pure#local-mutation-your-components-little-secret), and opens up many new compile-time optimization opportunities beyond just being on par with memoization Hooks.
 
 We’re also working on a playground for exploring many aspects of the compiler. While the goal of the playground is to make development of the compiler easier, we think that it will make it easier to try it out and build intuition for what the compiler does. It reveals various insights into how it works under the hood, and live renders the compiler’s outputs as you type. This will be shipped together with the compiler when it’s released.
 
@@ -74,6 +77,6 @@ We are working on a new version for the Interaction Tracing API (tentatively cal
 
 Last year, we announced the beta version of the new React documentation website ([later shipped as react.dev](/blog/2023/03/16/introducing-react-dev)) of the new React documentation website. The new learning materials teach Hooks first and has new diagrams, illustrations, as well as many interactive examples and challenges. We took a break from that work to focus on the React 18 release, but now that React 18 is out, we’re actively working to finish and ship the new documentation.
 
-We are currently writing a detailed section about effects, as we’ve heard that is one of the more challenging topics for both new and experienced React users. [Synchronizing with Effects](/learn/synchronizing-with-effects) is the first published page in the series, and there are more to come in the following weeks. When we first started writing a detailed section about effects, we’ve realized that many common effect patterns can be simplified by adding a new primitive to React. We’ve shared some initial thoughts on that in the [useEvent RFC](https://github.com/reactjs/rfcs/pull/220). It is currently in early research, and we are still iterating on the idea. We appreciate the community’s comments on the RFC so far, as well as the [feedback](https://github.com/reactjs/reactjs.org/issues/3308) and contributions to the ongoing documentation rewrite. We’d specifically like to thank [Harish Kumar](https://github.com/harish-sethuraman) for submitting and reviewing many improvements to the new website implementation.
+We are currently writing a detailed section about effects, as we’ve heard that is one of the more challenging topics for both new and experienced React users. [Synchronizing with Effects](/learn/synchronizing-with-effects) is the first published page in the series, and there are more to come in the following weeks. When we first started writing a detailed section about effects, we’ve realized that many common effect patterns can be simplified by adding a new primitive to React. We’ve shared some initial thoughts on that in the [useEvent RFC](https://github.com/reactjs/rfcs/pull/220). It is currently in early research, and we are still iterating on the idea. We appreciate the community’s comments on the RFC so far, as well as the [feedback](https://github.com/reactjs/react.dev/issues/3308) and contributions to the ongoing documentation rewrite. We’d specifically like to thank [Harish Kumar](https://github.com/harish-sethuraman) for submitting and reviewing many improvements to the new website implementation.
 
 *Thanks to [Sophie Alpert](https://twitter.com/sophiebits) for reviewing this blog post!*
diff --git a/src/content/blog/2023/03/16/introducing-react-dev.md b/src/content/blog/2023/03/16/introducing-react-dev.md
index d27673d90..c4da2b61f 100644
--- a/src/content/blog/2023/03/16/introducing-react-dev.md
+++ b/src/content/blog/2023/03/16/introducing-react-dev.md
@@ -1,5 +1,8 @@
 ---
 title: "Introducing react.dev"
+author: Dan Abramov and Rachel Nabors
+date: 2023/03/16
+description: Today we are thrilled to launch react.dev, the new home for React and its documentation. In this post, we would like to give you a tour of the new site.
 ---
 
 March 16, 2023 by [Dan Abramov](https://twitter.com/dan_abramov) and [Rachel Nabors](https://twitter.com/rachelnabors)
@@ -57,7 +60,7 @@ If you like to learn by doing, we recommend checking out the [Tic-Tac-Toe Tutori
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 
 function Square({ value, onSquareClick }) {
@@ -175,7 +178,7 @@ function calculateWinner(squares) {
 }
 ```
 
-```css styles.css
+```css src/styles.css
 * {
   box-sizing: border-box;
 }
@@ -266,7 +269,7 @@ Use the conditional operator (`cond ? a : b`) to render a ❌ if `isPacked` isn
 function Item({ name, isPacked }) {
   return (
     <li className="item">
-      {name} {isPacked && '✔'}
+      {name} {isPacked && '✅'}
     </li>
   );
 }
@@ -304,7 +307,7 @@ export default function PackingList() {
 function Item({ name, isPacked }) {
   return (
     <li className="item">
-      {name} {isPacked ? '✔' : '❌'}
+      {name} {isPacked ? '✅' : '❌'}
     </li>
   );
 }
@@ -428,7 +431,7 @@ export default function PackingList() {
 
 Note that you must write `importance > 0 && ...` rather than `importance && ...` so that if the `importance` is `0`, `0` isn't rendered as the result!
 
-In this solution, two separate conditions are used to insert a space between then name and the importance label. Alternatively, you could use a fragment with a leading space: `importance > 0 && <> <i>...</i></>` or add a space immediately inside the `<i>`:  `importance > 0 && <i> ...</i>`.
+In this solution, two separate conditions are used to insert a space between then name and the importance label. Alternatively, you could use a Fragment with a leading space: `importance > 0 && <> <i>...</i></>` or add a space immediately inside the `<i>`:  `importance > 0 && <i> ...</i>`.
 
 </Solution>
 
@@ -610,7 +613,7 @@ We hope that this approach will make the API reference useful not only as a way
 
 ## What's next? {/*whats-next*/}
 
-That's a wrap for our little tour! Have a look around the new website, see what you like or don't like, and keep the feedback coming in the [anonymous survey](https://www.surveymonkey.co.uk/r/PYRPF3X) or in our [issue tracker](https://github.com/reactjs/reactjs.org/issues).
+That's a wrap for our little tour! Have a look around the new website, see what you like or don't like, and keep the feedback coming in our [issue tracker](https://github.com/reactjs/react.dev/issues).
 
 We acknowledge this project has taken a long time to ship. We wanted to maintain a high quality bar that the React community deserves. While writing these docs and creating all of the examples, we found mistakes in some of our own explanations, bugs in React, and even gaps in the React design that we are now working to address. We hope that the new documentation will help us hold React itself to a higher bar in the future.
 
@@ -643,4 +646,3 @@ On the development front, thanks to [Jared Palmer](https://twitter.com/jaredpalm
 Huge thanks to the folks who volunteered their time to participate in the alpha and beta testing program. Your enthusiasm and invaluable feedback helped us shape these docs. A special shout out to our beta tester, [Debbie O'Brien](https://twitter.com/debs_obrien), who gave a talk about her experience using the React docs at React Conf 2021.
 
 Finally, thanks to the React community for being the inspiration behind this effort. You are the reason we do this, and we hope that the new docs will help you use React to build any user interface that you want.
-
diff --git a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md
index a6592fd3b..aeb677f31 100644
--- a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md
+++ b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md
@@ -1,5 +1,8 @@
 ---
 title: "React Labs: What We've Been Working On – March 2023"
+author: Joseph Savona, Josh Story, Lauren Tan, Mengdi Chen, Samuel Susla, Sathya Gunasekaran, Sebastian Markbage, and Andrew Clark
+date: 2023/03/22
+description: In React Labs posts, we write about projects in active research and development. We've made significant progress on them since our last update, and we'd like to share what we learned.
 ---
 
 March 22, 2023 by [Joseph Savona](https://twitter.com/en_JS), [Josh Story](https://twitter.com/joshcstory), [Lauren Tan](https://twitter.com/potetotes), [Mengdi Chen](https://twitter.com/mengdi_en), [Samuel Susla](https://twitter.com/SamuelSusla), [Sathya Gunasekaran](https://twitter.com/_gsathya), [Sebastian Markbåge](https://twitter.com/sebmarkbage), and [Andrew Clark](https://twitter.com/acdlite)
@@ -8,7 +11,7 @@ March 22, 2023 by [Joseph Savona](https://twitter.com/en_JS), [Josh Story](https
 
 <Intro>
 
-In React Labs posts, we write about projects in active research and development. We've made significant progress on them since our [last update](https://react.dev/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022), and we'd like to share what we learned.
+In React Labs posts, we write about projects in active research and development. We've made significant progress on them since our [last update](/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022), and we'd like to share what we learned.
 
 </Intro>
 
@@ -24,7 +27,7 @@ RSC combines the simple "request/response" mental model of server-centric Multi-
 
 Since our last update, we have merged the [React Server Components RFC](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md) to ratify the proposal. We resolved outstanding issues with the [React Server Module Conventions](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md) proposal, and reached consensus with our partners to go with the `"use client"` convention. These documents also act as specification for what an RSC-compatible implementation should support.
 
-The biggest change is that we introduced [`async` / `await`](https://github.com/reactjs/rfcs/pull/229) as the primary way to do data fetching from Server Components. We also plan to support data loading from the client by introducing a new hook called `use` that unwraps Promises. Although we can't support `async / await` in arbitrary components in client-only apps, we plan to add support for it when you structure your client-only app similar to how RSC apps are structured.
+The biggest change is that we introduced [`async` / `await`](https://github.com/reactjs/rfcs/pull/229) as the primary way to do data fetching from Server Components. We also plan to support data loading from the client by introducing a new Hook called `use` that unwraps Promises. Although we can't support `async / await` in arbitrary components in client-only apps, we plan to add support for it when you structure your client-only app similar to how RSC apps are structured.
 
 Now that we have data fetching pretty well sorted, we're exploring the other direction: sending data from the client to the server, so that you can execute database mutations and implement forms. We're doing this by letting you pass Server Action functions across the server/client boundary, which the client can then call, providing seamless RPC. Server Actions also give you progressively enhanced forms before JavaScript loads.
 
@@ -74,7 +77,7 @@ Making plain JavaScript in React components reactive requires a compiler with a
 
 ## Offscreen Rendering {/*offscreen-rendering*/}
 
-Offscreen rendering is an upcoming capability in React for rendering screens in the background without additional performance overhead. You can think of it as a version of the [`content-visiblity` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility) that works not only for DOM elements but React components, too. During our research, we've discovered a variety of use cases:
+Offscreen rendering is an upcoming capability in React for rendering screens in the background without additional performance overhead. You can think of it as a version of the [`content-visibility` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility) that works not only for DOM elements but React components, too. During our research, we've discovered a variety of use cases:
 
 - A router can prerender screens in the background so that when a user navigates to them, they're instantly available.
 - A tab switching component can preserve the state of hidden tabs, so the user can switch between them without losing their progress.
diff --git a/src/content/blog/2023/05/03/react-canaries.md b/src/content/blog/2023/05/03/react-canaries.md
index 81da3fd00..19d9960b0 100644
--- a/src/content/blog/2023/05/03/react-canaries.md
+++ b/src/content/blog/2023/05/03/react-canaries.md
@@ -1,5 +1,8 @@
 ---
 title: "React Canaries: Enabling Incremental Feature Rollout Outside Meta"
+author: Dan Abramov, Sophie Alpert, Rick Hanlon, Sebastian Markbage, and Andrew Clark
+date: 2023/05/03
+description: We'd like to offer the React community an option to adopt individual new features as soon as their design is close to final, before they're released in a stable version--similar to how Meta has long used bleeding-edge versions of React internally. We are introducing a new officially supported [Canary release channel](/community/versioning-policy#canary-channel). It lets curated setups like frameworks decouple adoption of individual React features from the React release schedule.
 ---
 
 May 3, 2023 by [Dan Abramov](https://twitter.com/dan_abramov), [Sophie Alpert](https://twitter.com/sophiebits), [Rick Hanlon](https://twitter.com/rickhanlonii), [Sebastian Markbåge](https://twitter.com/sebmarkbage), and [Andrew Clark](https://twitter.com/acdlite)
diff --git a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
new file mode 100644
index 000000000..fee21f4ec
--- /dev/null
+++ b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
@@ -0,0 +1,120 @@
+---
+title: "React Labs: What We've Been Working On – February 2024"
+author: Joseph Savona, Ricky Hanlon, Andrew Clark, Matt Carroll, and Dan Abramov
+date: 2024/02/15
+description: In React Labs posts, we write about projects in active research and development. We’ve made significant progress since our last update, and we’d like to share our progress.
+---
+
+February 15, 2024 by [Joseph Savona](https://twitter.com/en_JS), [Ricky Hanlon](https://twitter.com/rickhanlonii), [Andrew Clark](https://twitter.com/acdlite), [Matt Carroll](https://twitter.com/mattcarrollcode), and [Dan Abramov](https://twitter.com/dan_abramov).
+
+---
+
+<Intro>
+
+In React Labs posts, we write about projects in active research and development. We’ve made significant progress since our [last update](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023), and we’d like to share our progress.
+
+</Intro>
+
+<Note>
+
+React Conf 2024 is scheduled for May 15–16 in Henderson, Nevada! If you’re interested in attending React Conf in person, you can [sign up for the ticket lottery](https://forms.reform.app/bLaLeE/react-conf-2024-ticket-lottery/1aRQLK) until February 28th. 
+
+For more info on tickets, free streaming, sponsoring, and more, see [the React Conf website](https://conf.react.dev).
+
+</Note>
+
+---
+
+## React Compiler {/*react-compiler*/}
+
+React Compiler is no longer a research project: the compiler now powers instagram.com in production, and we are working to ship the compiler across additional surfaces at Meta and to prepare the first open source release.
+
+As discussed in our [previous post](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-optimizing-compiler), React can *sometimes* re-render too much when state changes. Since the early days of React our solution for such cases has been manual memoization. In our current APIs, this means applying the [`useMemo`](/reference/react/useMemo), [`useCallback`](/reference/react/useCallback), and [`memo`](/reference/react/memo) APIs to manually tune how much React re-renders on state changes. But manual memoization is a compromise. It clutters up our code, is easy to get wrong, and requires extra work to keep up to date.
+
+Manual memoization is a reasonable compromise, but we weren’t satisfied. Our vision is for React to *automatically* re-render just the right parts of the UI when state changes, *without compromising on React’s core mental model*. We believe that React’s approach — UI as a simple function of state, with standard JavaScript values and idioms — is a key part of why React has been approachable for so many developers. That’s why we’ve invested in building an optimizing compiler for React.
+
+JavaScript is a notoriously challenging language to optimize, thanks to its loose rules and dynamic nature. React Compiler is able to compile code safely by modeling both the rules of JavaScript *and* the “rules of React”. For example, React components must be idempotent — returning the same value given the same inputs — and can’t mutate props or state values. These rules limit what developers can do and help to carve out a safe space for the compiler to optimize.
+
+Of course, we understand that developers sometimes bend the rules a bit, and our goal is to make React Compiler work out of the box on as much code as possible. The compiler attempts to detect when code doesn’t strictly follow React’s rules and will either compile the code where safe or skip compilation if it isn’t safe. We’re testing against Meta’s large and varied codebase in order to help validate this approach.
+
+For developers who are curious about making sure their code follows React’s rules, we recommend [enabling Strict Mode](/reference/react/StrictMode) and [configuring React’s ESLint plugin](/learn/editor-setup#linting). These tools can help to catch subtle bugs in your React code, improving the quality of your applications today, and future-proofs your applications for upcoming features such as React Compiler. We are also working on consolidated documentation of the rules of React and updates to our ESLint plugin to help teams understand and apply these rules to create more robust apps.
+
+To see the compiler in action, you can check out our [talk from last fall](https://www.youtube.com/watch?v=qOQClO3g8-Y). At the time of the talk, we had early experimental data from trying React Compiler on one page of instagram.com. Since then, we shipped the compiler to production across instagram.com. We’ve also expanded our team to accelerate the rollout to additional surfaces at Meta and to open source. We’re excited about the path ahead and will have more to share in the coming months.
+
+## Actions {/*actions*/}
+
+
+We [previously shared](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) that we were exploring solutions for sending data from the client to the server with Server Actions, so that you can execute database mutations and implement forms. During development of Server Actions, we extended these APIs to support data handling in client-only applications as well.
+
+We refer to this broader collection of features as simply "Actions". Actions allow you to pass a function to DOM elements such as [`<form/>`](/reference/react-dom/components/form):
+
+```js
+<form action={search}>
+  <input name="query" />
+  <button type="submit">Search</button>
+</form>
+```
+
+The `action` function can operate synchronously or asynchronously. You can define them on the client side using standard JavaScript or on the server with the  [`'use server'`](/reference/rsc/use-server) directive. When using an action, React will manage the life cycle of the data submission for you, providing hooks like [`useFormStatus`](/reference/react-dom/hooks/useFormStatus), and [`useActionState`](/reference/react/useActionState) to access the current state and response of the form action.
+
+By default, Actions are submitted within a [transition](/reference/react/useTransition), keeping the current page interactive while the action is processing. Since Actions support async functions, we've also added the ability to use `async/await` in transitions. This allows you to show pending UI with the `isPending` state of a transition when an async request like `fetch` starts, and show the pending UI all the way through the update being applied. 
+
+Alongside Actions, we're introducing a feature named [`useOptimistic`](/reference/react/useOptimistic) for managing optimistic state updates. With this hook, you can apply temporary updates that are automatically reverted once the final state commits. For Actions, this allows you to optimistically set the final state of the data on the client, assuming the submission is successful, and revert to the value for data received from the server. It works using regular `async`/`await`, so it works the same whether you're using `fetch` on the client, or a Server Action from the server.
+
+Library authors can implement custom `action={fn}` props in their own components with `useTransition`. Our intent is for libraries to adopt the Actions pattern when designing their component APIs, to provide a consistent experience for React developers. For example, if your library provides a `<Calendar onSelect={eventHandler}>` component, consider also exposing a `<Calendar selectAction={action}>` API, too.
+
+While we initially focused on Server Actions for client-server data transfer, our philosophy for React is to provide the same programming model across all platforms and environments. When possible, if we introduce a feature on the client, we aim to make it also work on the server, and vice versa. This philosophy allows us to create a single set of APIs that work no matter where your app runs, making it easier to upgrade to different environments later. 
+
+Actions are now available in the Canary channel and will ship in the next release of React.
+
+## New Features in React Canary {/*new-features-in-react-canary*/}
+
+We introduced [React Canaries](/blog/2023/05/03/react-canaries) as an option to adopt individual new stable features as soon as their design is close to final, before they’re released in a stable semver version. 
+
+Canaries are a change to the way we develop React. Previously, features would be researched and built privately inside of Meta, so users would only see the final polished product when released to Stable. With Canaries, we’re building in public with the help of the community to finalize features we share in the React Labs blog series. This means you hear about new features sooner, as they’re being finalized instead of after they’re complete.
+
+React Server Components, Asset Loading, Document Metadata, and Actions have all landed in the React Canary, and we've added docs for these features on react.dev:
+
+- **Directives**: [`"use client"`](/reference/rsc/use-client) and [`"use server"`](/reference/rsc/use-server) are bundler features designed for full-stack React frameworks. They mark the "split points" between the two environments: `"use client"` instructs the bundler to generate a `<script>` tag (like [Astro Islands](https://docs.astro.build/en/concepts/islands/#creating-an-island)), while `"use server"` tells the bundler to generate a POST endpoint (like [tRPC Mutations](https://trpc.io/docs/concepts)). Together, they let you write reusable components that compose client-side interactivity with the related server-side logic.
+
+- **Document Metadata**: we added built-in support for rendering [`<title>`](/reference/react-dom/components/title), [`<meta>`](/reference/react-dom/components/meta), and metadata [`<link>`](/reference/react-dom/components/link) tags anywhere in your component tree. These work the same way in all environments, including fully client-side code, SSR, and RSC. This provides built-in support for features pioneered by libraries like [React Helmet](https://github.com/nfl/react-helmet).
+
+- **Asset Loading**: we integrated Suspense with the loading lifecycle of resources such as stylesheets, fonts, and scripts so that React takes them into account to determine whether the content in elements like [`<style>`](/reference/react-dom/components/style), [`<link>`](/reference/react-dom/components/link), and [`<script>`](/reference/react-dom/components/script) are ready to be displayed. We’ve also added new [Resource Loading APIs](/reference/react-dom#resource-preloading-apis) like `preload` and `preinit` to provide greater control for when a resource should load and initialize.
+
+- **Actions**: As shared above, we've added Actions to manage sending data from the client to the server. You can add `action` to elements like [`<form/>`](/reference/react-dom/components/form), access the status with [`useFormStatus`](/reference/react-dom/hooks/useFormStatus), handle the result with [`useActionState`](/reference/react/useActionState), and optimistically update the UI with [`useOptimistic`](/reference/react/useOptimistic).
+
+Since all of these features work together, it’s difficult to release them in the Stable channel individually. Releasing Actions without the complementary hooks for accessing form states would limit the practical usability of Actions. Introducing React Server Components without integrating Server Actions would complicate modifying data on the server. 
+
+Before we can release a set of features to the Stable channel, we need to ensure they work cohesively and developers have everything they need to use them in production. React Canaries allow us to develop these features individually, and release the stable APIs incrementally until the entire feature set is complete.
+
+The current set of features in React Canary are complete and ready to release.
+
+## The Next Major Version of React {/*the-next-major-version-of-react*/}
+
+After a couple of years of iteration, `react@canary` is now ready to ship to `react@latest`. The new features mentioned above are compatible with any environment your app runs in, providing everything needed for production use. Since Asset Loading and Document Metadata may be a breaking change for some apps, the next version of React will be a major version: **React 19**.
+
+There’s still more to be done to prepare for release. In React 19, we’re also adding long-requested improvements which require breaking changes like support for Web Components. Our focus now is to land these changes, prepare for release, finalize docs for new features, and publish announcements for what’s included.
+
+We’ll share more information about everything React 19 includes, how to adopt the new client features, and how to build support for React Server Components in the coming months.
+
+## Offscreen (renamed to Activity). {/*offscreen-renamed-to-activity*/}
+
+Since our last update, we’ve renamed a capability we’re researching from “Offscreen” to “Activity”. The name “Offscreen” implied that it only applied to parts of the app that were not visible, but while researching the feature we realized that it’s possible for parts of the app to be visible and inactive, such as content behind a modal. The new name more closely reflects the behavior of marking certain parts of the app “active” or “inactive”.
+
+Activity is still under research and our remaining work is to finalize the primitives that are exposed to library developers. We’ve deprioritized this area while we focus on shipping features that are more complete.
+
+* * *
+
+In addition to this update, our team has presented at conferences and made appearances on podcasts to speak more on our work and answer questions.
+
+- [Sathya Gunasekaran](/community/team#sathya-gunasekaran) spoke about the React Compiler at the [React India](https://www.youtube.com/watch?v=kjOacmVsLSE) conference
+
+- [Dan Abramov](/community/team#dan-abramov) gave a talk at [RemixConf](https://www.youtube.com/watch?v=zMf_xeGPn6s) titled “React from Another Dimension” which explores an alternative history of how React Server Components and Actions could have been created
+
+- [Dan Abramov](/community/team#dan-abramov) was interviewed on [the Changelog’s JS Party podcast](https://changelog.com/jsparty/311) about React Server Components
+
+- [Matt Carroll](/community/team#matt-carroll) was interviewed on the [Front-End Fire podcast](https://www.buzzsprout.com/2226499/14462424-interview-the-two-reacts-with-rachel-nabors-evan-bacon-and-matt-carroll) where he discussed [The Two Reacts](https://overreacted.io/the-two-reacts/)
+
+Thanks [Lauren Tan](https://twitter.com/potetotes), [Sophie Alpert](https://twitter.com/sophiebits), [Jason Bonta](https://threads.net/someextent), [Eli White](https://twitter.com/Eli_White), and [Sathya Gunasekaran](https://twitter.com/_gsathya) for reviewing this post.
+
+Thanks for reading, and [see you at React Conf](https://conf.react.dev/)!
diff --git a/src/content/blog/2024/04/25/react-19-upgrade-guide.md b/src/content/blog/2024/04/25/react-19-upgrade-guide.md
new file mode 100644
index 000000000..fd160e943
--- /dev/null
+++ b/src/content/blog/2024/04/25/react-19-upgrade-guide.md
@@ -0,0 +1,754 @@
+---
+title: "React 19 Upgrade Guide"
+author: Ricky Hanlon
+date: 2024/04/25
+description: The improvements added to React 19 require some breaking changes, but we've worked to make the upgrade as smooth as possible and we don't expect the changes to impact most apps. In this post, we will guide you through the steps for upgrading apps and libraries to React 19.
+---
+
+April 25, 2024 by [Ricky Hanlon](https://twitter.com/rickhanlonii)
+
+---
+
+
+<Intro>
+
+The improvements added to React 19 require some breaking changes, but we've worked to make the upgrade as smooth as possible, and we don't expect the changes to impact most apps.
+
+</Intro>
+
+<Note>
+
+#### React 18.3 has also been published {/*react-18-3*/}
+
+To help make the upgrade to React 19 easier, we've published a `react@18.3` release that is identical to 18.2 but adds warnings for deprecated APIs and other changes that are needed for React 19. 
+
+We recommend upgrading to React 18.3 first to help identify any issues before upgrading to React 19.
+
+For a list of changes in 18.3 see the [Release Notes](https://github.com/facebook/react/blob/main/CHANGELOG.md).
+
+</Note>
+
+In this post, we will guide you through the steps for upgrading to React 19:
+
+- [Installing](#installing)
+- [Codemods](#codemods)
+- [Breaking changes](#breaking-changes)
+- [New deprecations](#new-deprecations)
+- [Notable changes](#notable-changes)
+- [TypeScript changes](#typescript-changes)
+- [Changelog](#changelog)
+
+If you'd like to help us test React 19, follow the steps in this upgrade guide and [report any issues](https://github.com/facebook/react/issues/new?assignees=&labels=React+19&projects=&template=19.md&title=%5BReact+19%5D) you encounter. For a list of new features added to React 19, see the [React 19 release post](/blog/2024/12/05/react-19).
+
+---
+## Installing {/*installing*/}
+
+<Note>
+
+#### New JSX Transform is now required {/*new-jsx-transform-is-now-required*/}
+
+We introduced a [new JSX transform](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) in 2020 to improve bundle size and use JSX without importing React. In React 19, we're adding additional improvements like using ref as a prop and JSX speed improvements that require the new transform.
+
+If the new transform is not enabled, you will see this warning:
+
+<ConsoleBlockMulti>
+
+<ConsoleLogLine level="error">
+
+Your app (or one of its dependencies) is using an outdated JSX transform. Update to the modern JSX transform for faster performance: https://react.dev/link/new-jsx-transform
+
+</ConsoleLogLine>
+
+</ConsoleBlockMulti>
+
+
+We expect most apps will not be affected since the transform is enabled in most environments already. For manual instructions on how to upgrade, please see the [announcement post](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html).
+
+</Note>
+
+
+To install the latest version of React and React DOM:
+
+```bash
+npm install --save-exact react@^19.0.0 react-dom@^19.0.0
+```
+
+Or, if you're using Yarn:
+
+```bash
+yarn add --exact react@^19.0.0 react-dom@^19.0.0
+```
+
+If you're using TypeScript, you also need to update the types.
+```bash
+npm install --save-exact @types/react@^19.0.0 @types/react-dom@^19.0.0
+```
+
+Or, if you're using Yarn:
+```bash
+yarn add --exact @types/react@^19.0.0 @types/react-dom@^19.0.0
+```
+
+We're also including a codemod for the most common replacements. See [TypeScript changes](#typescript-changes) below.
+
+## Codemods {/*codemods*/}
+
+To help with the upgrade, we've worked with the team at [codemod.com](https://codemod.com) to publish codemods that will automatically update your code to many of the new APIs and patterns in React 19.
+
+All codemods are available in the [`react-codemod` repo](https://github.com/reactjs/react-codemod) and the Codemod team have joined in helping maintain the codemods. To run these codemods, we recommend using the `codemod` command instead of the `react-codemod` because it runs faster, handles more complex code migrations, and provides better support for TypeScript.
+
+
+<Note>
+
+#### Run all React 19 codemods {/*run-all-react-19-codemods*/}
+
+Run all codemods listed in this guide with the React 19 `codemod` recipe:
+
+```bash
+npx codemod@latest react/19/migration-recipe
+```
+
+This will run the following codemods from `react-codemod`:
+- [`replace-reactdom-render`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-reactdom-render) 
+- [`replace-string-ref`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-string-ref)
+- [`replace-act-import`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-act-import)
+- [`replace-use-form-state`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-use-form-state) 
+- [`prop-types-typescript`](TODO)
+
+This does not include the TypeScript changes. See [TypeScript changes](#typescript-changes) below.
+
+</Note>
+
+Changes that include a codemod include the command below. 
+
+For a list of all available codemods, see the [`react-codemod` repo](https://github.com/reactjs/react-codemod).
+
+## Breaking changes {/*breaking-changes*/}
+
+### Errors in render are not re-thrown {/*errors-in-render-are-not-re-thrown*/}
+
+In previous versions of React, errors thrown during render were caught and rethrown. In DEV, we would also log to `console.error`, resulting in duplicate error logs. 
+
+In React 19, we've [improved how errors are handled](/blog/2024/04/25/react-19#error-handling) to reduce duplication by not re-throwing:
+
+- **Uncaught Errors**: Errors that are not caught by an Error Boundary are reported to `window.reportError`.
+- **Caught Errors**: Errors that are caught by an Error Boundary are reported to `console.error`.
+
+This change should not impact most apps, but if your production error reporting relies on errors being re-thrown, you may need to update your error handling. To support this, we've added new methods to `createRoot` and `hydrateRoot` for custom error handling:
+
+```js [[1, 2, "onUncaughtError"], [2, 5, "onCaughtError"]]
+const root = createRoot(container, {
+  onUncaughtError: (error, errorInfo) => {
+    // ... log error report
+  },
+  onCaughtError: (error, errorInfo) => {
+    // ... log error report
+  }
+});
+```
+
+For more info, see the docs for [`createRoot`](https://react.dev/reference/react-dom/client/createRoot) and [`hydrateRoot`](https://react.dev/reference/react-dom/client/hydrateRoot).
+
+
+### Removed deprecated React APIs {/*removed-deprecated-react-apis*/}
+
+#### Removed: `propTypes` and `defaultProps` for functions {/*removed-proptypes-and-defaultprops*/}
+`PropTypes` were deprecated in [April 2017 (v15.5.0)](https://legacy.reactjs.org/blog/2017/04/07/react-v15.5.0.html#new-deprecation-warnings).
+
+In React 19, we're removing the `propType` checks from the React package, and using them will be silently ignored. If you're using `propTypes`, we recommend migrating to TypeScript or another type-checking solution.
+
+We're also removing `defaultProps` from function components in place of ES6 default parameters. Class components will continue to support `defaultProps` since there is no ES6 alternative.
+
+```js
+// Before
+import PropTypes from 'prop-types';
+
+function Heading({text}) {
+  return <h1>{text}</h1>;
+}
+Heading.propTypes = {
+  text: PropTypes.string,
+};
+Heading.defaultProps = {
+  text: 'Hello, world!',
+};
+```
+```ts
+// After
+interface Props {
+  text?: string;
+}
+function Heading({text = 'Hello, world!'}: Props) {
+  return <h1>{text}</h1>;
+}
+```
+
+<Note>
+
+Codemod `propTypes` to TypeScript with:
+
+```bash
+npx codemod@latest react/prop-types-typescript
+```
+
+</Note>
+
+#### Removed: Legacy Context using `contextTypes` and `getChildContext` {/*removed-removing-legacy-context*/}
+
+Legacy Context was deprecated in [October 2018 (v16.6.0)](https://legacy.reactjs.org/blog/2018/10/23/react-v-16-6.html).
+
+Legacy Context was only available in class components using the APIs `contextTypes` and `getChildContext`, and was replaced with `contextType` due to subtle bugs that were easy to miss. In React 19, we're removing Legacy Context to make React slightly smaller and faster.
+
+If you're still using Legacy Context in class components, you'll need to migrate to the new `contextType` API:
+
+```js {5-11,19-21}
+// Before
+import PropTypes from 'prop-types';
+
+class Parent extends React.Component {
+  static childContextTypes = {
+    foo: PropTypes.string.isRequired,
+  };
+
+  getChildContext() {
+    return { foo: 'bar' };
+  }
+
+  render() {
+    return <Child />;
+  }
+}
+
+class Child extends React.Component {
+  static contextTypes = {
+    foo: PropTypes.string.isRequired,
+  };
+
+  render() {
+    return <div>{this.context.foo}</div>;
+  }
+}
+```
+
+```js {2,7,9,15}
+// After
+const FooContext = React.createContext();
+
+class Parent extends React.Component {
+  render() {
+    return (
+      <FooContext value='bar'>
+        <Child />
+      </FooContext>
+    );
+  }
+}
+
+class Child extends React.Component {
+  static contextType = FooContext;
+
+  render() {
+    return <div>{this.context}</div>;
+  }
+}
+```
+
+#### Removed: string refs {/*removed-string-refs*/}
+String refs were deprecated in [March, 2018 (v16.3.0)](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html).
+
+Class components supported string refs before being replaced by ref callbacks due to [multiple downsides](https://github.com/facebook/react/issues/1373). In React 19, we're removing string refs to make React simpler and easier to understand.
+
+If you're still using string refs in class components, you'll need to migrate to ref callbacks:
+
+```js {4,8}
+// Before
+class MyComponent extends React.Component {
+  componentDidMount() {
+    this.refs.input.focus();
+  }
+
+  render() {
+    return <input ref='input' />;
+  }
+}
+```
+
+```js {4,8}
+// After
+class MyComponent extends React.Component {
+  componentDidMount() {
+    this.input.focus();
+  }
+
+  render() {
+    return <input ref={input => this.input = input} />;
+  }
+}
+```
+
+<Note>
+
+Codemod string refs with `ref` callbacks:
+
+```bash
+npx codemod@latest react/19/replace-string-ref
+```
+
+</Note>
+
+#### Removed: Module pattern factories {/*removed-module-pattern-factories*/}
+Module pattern factories were deprecated in [August 2019 (v16.9.0)](https://legacy.reactjs.org/blog/2019/08/08/react-v16.9.0.html#deprecating-module-pattern-factories).
+
+This pattern was rarely used and supporting it causes React to be slightly larger and slower than necessary. In React 19, we're removing support for module pattern factories, and you'll need to migrate to regular functions:
+
+```js
+// Before
+function FactoryComponent() {
+  return { render() { return <div />; } }
+}
+```
+
+```js
+// After
+function FactoryComponent() {
+  return <div />;
+}
+```
+
+#### Removed: `React.createFactory` {/*removed-createfactory*/}
+`createFactory` was deprecated in [February 2020 (v16.13.0)](https://legacy.reactjs.org/blog/2020/02/26/react-v16.13.0.html#deprecating-createfactory).
+
+Using `createFactory` was common before broad support for JSX, but it's rarely used today and can be replaced with JSX. In React 19, we're removing `createFactory` and you'll need to migrate to JSX:
+
+```js
+// Before
+import { createFactory } from 'react';
+
+const button = createFactory('button');
+```
+
+```js
+// After
+const button = <button />;
+```
+
+#### Removed: `react-test-renderer/shallow` {/*removed-react-test-renderer-shallow*/}
+
+In React 18, we updated `react-test-renderer/shallow` to re-export [react-shallow-renderer](https://github.com/enzymejs/react-shallow-renderer). In React 19, we're removing `react-test-render/shallow` to prefer installing the package directly:
+
+```bash
+npm install react-shallow-renderer --save-dev
+```
+```diff
+- import ShallowRenderer from 'react-test-renderer/shallow';
++ import ShallowRenderer from 'react-shallow-renderer';
+```
+
+<Note>
+
+##### Please reconsider shallow rendering {/*please-reconsider-shallow-rendering*/}
+
+Shallow rendering depends on React internals and can block you from future upgrades. We recommend migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://testing-library.com/docs/react-native-testing-library/intro). 
+
+</Note>
+
+### Removed deprecated React DOM APIs {/*removed-deprecated-react-dom-apis*/}
+
+#### Removed: `react-dom/test-utils` {/*removed-react-dom-test-utils*/}
+
+We've moved `act` from `react-dom/test-utils` to the `react` package:
+
+<ConsoleBlockMulti>
+
+<ConsoleLogLine level="error">
+
+`ReactDOMTestUtils.act` is deprecated in favor of `React.act`. Import `act` from `react` instead of `react-dom/test-utils`. See https://react.dev/warnings/react-dom-test-utils for more info.
+
+</ConsoleLogLine>
+
+</ConsoleBlockMulti>
+
+To fix this warning, you can import `act` from `react`:
+
+```diff
+- import {act} from 'react-dom/test-utils'
++ import {act} from 'react';
+```
+
+All other `test-utils` functions have been removed. These utilities were uncommon, and made it too easy to depend on low level implementation details of your components and React. In React 19, these functions will error when called and their exports will be removed in a future version.
+
+See the [warning page](https://react.dev/warnings/react-dom-test-utils) for alternatives.
+
+<Note>
+
+Codemod `ReactDOMTestUtils.act` to `React.act`:
+
+```bash
+npx codemod@latest react/19/replace-act-import
+```
+
+</Note>
+
+#### Removed: `ReactDOM.render` {/*removed-reactdom-render*/}
+
+`ReactDOM.render` was deprecated in [March 2022 (v18.0.0)](https://react.dev/blog/2022/03/08/react-18-upgrade-guide). In React 19, we're removing `ReactDOM.render` and you'll need to migrate to using [`ReactDOM.createRoot`](https://react.dev/reference/react-dom/client/createRoot):
+
+```js
+// Before
+import {render} from 'react-dom';
+render(<App />, document.getElementById('root'));
+
+// After
+import {createRoot} from 'react-dom/client';
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
+```
+
+<Note>
+
+Codemod `ReactDOM.render` to `ReactDOMClient.createRoot`:
+
+```bash
+npx codemod@latest react/19/replace-reactdom-render
+```
+
+</Note>
+
+#### Removed: `ReactDOM.hydrate` {/*removed-reactdom-hydrate*/}
+
+`ReactDOM.hydrate` was deprecated in [March 2022 (v18.0.0)](https://react.dev/blog/2022/03/08/react-18-upgrade-guide). In React 19, we're removing `ReactDOM.hydrate` you'll need to migrate to using [`ReactDOM.hydrateRoot`](https://react.dev/reference/react-dom/client/hydrateRoot),
+
+```js
+// Before
+import {hydrate} from 'react-dom';
+hydrate(<App />, document.getElementById('root'));
+
+// After
+import {hydrateRoot} from 'react-dom/client';
+hydrateRoot(document.getElementById('root'), <App />);
+```
+
+<Note>
+
+Codemod `ReactDOM.hydrate` to `ReactDOMClient.hydrateRoot`:
+
+```bash
+npx codemod@latest react/19/replace-reactdom-render
+```
+
+</Note>
+
+#### Removed: `unmountComponentAtNode` {/*removed-unmountcomponentatnode*/}
+
+`ReactDOM.unmountComponentAtNode` was deprecated in [March 2022 (v18.0.0)](https://react.dev/blog/2022/03/08/react-18-upgrade-guide). In React 19, you'll need to migrate to using `root.unmount()`.
+
+
+```js
+// Before
+unmountComponentAtNode(document.getElementById('root'));
+
+// After
+root.unmount();
+```
+
+For more see `root.unmount()` for [`createRoot`](https://react.dev/reference/react-dom/client/createRoot#root-unmount) and [`hydrateRoot`](https://react.dev/reference/react-dom/client/hydrateRoot#root-unmount).
+
+<Note>
+
+Codemod `unmountComponentAtNode` to `root.unmount`:
+
+```bash
+npx codemod@latest react/19/replace-reactdom-render
+```
+
+</Note>
+
+#### Removed: `ReactDOM.findDOMNode` {/*removed-reactdom-finddomnode*/}
+
+`ReactDOM.findDOMNode` was [deprecated in October 2018 (v16.6.0)](https://legacy.reactjs.org/blog/2018/10/23/react-v-16-6.html#deprecations-in-strictmode). 
+
+We're removing `findDOMNode` because it was a legacy escape hatch that was slow to execute, fragile to refactoring, only returned the first child, and broke abstraction levels (see more [here](https://legacy.reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage)). You can replace `ReactDOM.findDOMNode` with [DOM refs](/learn/manipulating-the-dom-with-refs):
+
+```js
+// Before
+import {findDOMNode} from 'react-dom';
+
+function AutoselectingInput() {
+  useEffect(() => {
+    const input = findDOMNode(this);
+    input.select()
+  }, []);
+
+  return <input defaultValue="Hello" />;
+}
+```
+
+```js
+// After
+function AutoselectingInput() {
+  const ref = useRef(null);
+  useEffect(() => {
+    ref.current.select();
+  }, []);
+
+  return <input ref={ref} defaultValue="Hello" />
+}
+```
+
+## New deprecations {/*new-deprecations*/}
+
+### Deprecated: `element.ref` {/*deprecated-element-ref*/}
+
+React 19 supports [`ref` as a prop](/blog/2024/04/25/react-19#ref-as-a-prop), so we're deprecating the `element.ref` in place of `element.props.ref`.
+
+Accessing `element.ref` will warn:
+
+<ConsoleBlockMulti>
+
+<ConsoleLogLine level="error">
+
+Accessing element.ref is no longer supported. ref is now a regular prop. It will be removed from the JSX Element type in a future release.
+
+</ConsoleLogLine>
+
+</ConsoleBlockMulti>
+
+### Deprecated: `react-test-renderer` {/*deprecated-react-test-renderer*/}
+
+We are deprecating `react-test-renderer` because it implements its own renderer environment that doesn't match the environment users use, promotes testing implementation details, and relies on introspection of React's internals.
+
+The test renderer was created before there were more viable testing strategies available like [React Testing Library](https://testing-library.com), and we now recommend using a modern testing library instead.
+
+In React 19, `react-test-renderer` logs a deprecation warning, and has switched to concurrent rendering. We recommend migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://testing-library.com/docs/react-native-testing-library/intro) for a modern and well supported testing experience.
+
+## Notable changes {/*notable-changes*/}
+
+### StrictMode changes {/*strict-mode-improvements*/}
+
+React 19 includes several fixes and improvements to Strict Mode.
+
+When double rendering in Strict Mode in development, `useMemo` and `useCallback` will reuse the memoized results from the first render during the second render. Components that are already Strict Mode compatible should not notice a difference in behavior.
+
+As with all Strict Mode behaviors, these features are designed to proactively surface bugs in your components during development so you can fix them before they are shipped to production. For example, during development, Strict Mode will double-invoke ref callback functions on initial mount, to simulate what happens when a mounted component is replaced by a Suspense fallback.
+
+### Improvements to Suspense {/*improvements-to-suspense*/}
+
+In React 19, when a component suspends, React will immediately commit the fallback of the nearest Suspense boundary without waiting for the entire sibling tree to render. After the fallback commits, React schedules another render for the suspended siblings to "pre-warm" lazy requests in the rest of the tree:
+
+<Diagram name="prerender" height={162} width={1270} alt="Diagram showing a tree of three components, one parent labeled Accordion and two children labeled Panel. Both Panel components contain isActive with value false.">
+
+Previously, when a component suspended, the suspended siblings were rendered and then the fallback was committed.
+
+</Diagram>
+
+<Diagram name="prewarm" height={162} width={1270} alt="The same diagram as the previous, with the isActive of the first child Panel component highlighted indicating a click with the isActive value set to true. The second Panel component still contains value false." >
+
+In React 19, when a component suspends, the fallback is committed and then the suspended siblings are rendered.
+
+</Diagram>
+
+This change means Suspense fallbacks display faster, while still warming lazy requests in the suspended tree.
+
+### UMD builds removed {/*umd-builds-removed*/}
+
+UMD was widely used in the past as a convenient way to load React without a build step. Now, there are modern alternatives for loading modules as scripts in HTML documents. Starting with React 19, React will no longer produce UMD builds to reduce the complexity of its testing and release process. 
+
+To load React 19 with a script tag, we recommend using an ESM-based CDN such as [esm.sh](https://esm.sh/).
+
+```html
+<script type="module">
+  import React from "https://esm.sh/react@19/?dev"
+  import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev"
+  ...
+</script>
+```
+
+### Libraries depending on React internals may block upgrades {/*libraries-depending-on-react-internals-may-block-upgrades*/}
+
+This release includes changes to React internals that may impact libraries that ignore our pleas to not use internals like `SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED`. These changes are necessary to land improvements in React 19, and will not break libraries that follow our guidelines.
+
+Based on our [Versioning Policy](https://react.dev/community/versioning-policy#what-counts-as-a-breaking-change), these updates are not listed as breaking changes, and we are not including docs for how to upgrade them. The recommendation is to remove any code that depends on internals.
+
+To reflect the impact of using internals, we have renamed the `SECRET_INTERNALS` suffix to: 
+
+`_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE`
+
+In the future we will more aggressively block accessing internals from React to discourage usage and ensure users are not blocked from upgrading.
+
+## TypeScript changes {/*typescript-changes*/}
+
+### Removed deprecated TypeScript types {/*removed-deprecated-typescript-types*/}
+
+We've cleaned up the TypeScript types based on the removed APIs in React 19. Some of the removed have types been moved to more relevant packages, and others are no longer needed to describe React's behavior.
+
+<Note>
+We've published [`types-react-codemod`](https://github.com/eps1lon/types-react-codemod/) to migrate most type related breaking changes:
+
+```bash
+npx types-react-codemod@latest preset-19 ./path-to-app
+```
+
+If you have a lot of unsound access to `element.props`, you can run this additional codemod:
+
+```bash
+npx types-react-codemod@latest react-element-default-any-props ./path-to-your-react-ts-files
+```
+
+</Note>
+
+Check out [`types-react-codemod`](https://github.com/eps1lon/types-react-codemod/) for a list of supported replacements. If you feel a codemod is missing, it can be tracked in the [list of missing React 19 codemods](https://github.com/eps1lon/types-react-codemod/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22React+19%22+label%3Aenhancement).
+
+
+### `ref` cleanups required {/*ref-cleanup-required*/}
+
+_This change is included in the `react-19` codemod preset as [`no-implicit-ref-callback-return
+`](https://github.com/eps1lon/types-react-codemod/#no-implicit-ref-callback-return)._
+
+Due to the introduction of ref cleanup functions, returning anything else from a ref callback will now be rejected by TypeScript. The fix is usually to stop using implicit returns:
+
+```diff [[1, 1, "("], [1, 1, ")"], [2, 2, "{", 15], [2, 2, "}", 1]]
+- <div ref={current => (instance = current)} />
++ <div ref={current => {instance = current}} />
+```
+
+The original code returned the instance of the `HTMLDivElement` and TypeScript wouldn't know if this was supposed to be a cleanup function or not.
+
+### `useRef` requires an argument {/*useref-requires-argument*/}
+
+_This change is included in the `react-19` codemod preset as [`refobject-defaults`](https://github.com/eps1lon/types-react-codemod/#refobject-defaults)._
+
+A long-time complaint of how TypeScript and React work has been `useRef`. We've changed the types so that `useRef` now requires an argument. This significantly simplifies its type signature. It'll now behave more like `createContext`.
+
+```ts
+// @ts-expect-error: Expected 1 argument but saw none
+useRef();
+// Passes
+useRef(undefined);
+// @ts-expect-error: Expected 1 argument but saw none
+createContext();
+// Passes
+createContext(undefined);
+```
+
+This now also means that all refs are mutable. You'll no longer hit the issue where you can't mutate a ref because you initialised it with `null`:
+
+```ts
+const ref = useRef<number>(null);
+
+// Cannot assign to 'current' because it is a read-only property
+ref.current = 1;
+```
+
+`MutableRef` is now deprecated in favor of a single `RefObject` type which `useRef` will always return:
+
+```ts
+interface RefObject<T> {
+  current: T
+}
+
+declare function useRef<T>: RefObject<T>
+```
+
+`useRef` still has a convenience overload for `useRef<T>(null)` that automatically returns `RefObject<T | null>`. To ease migration due to the required argument for `useRef`, a convenience overload for `useRef(undefined)` was added that automatically returns `RefObject<T | undefined>`.
+
+Check out [[RFC] Make all refs mutable](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/64772) for prior discussions about this change.
+
+### Changes to the `ReactElement` TypeScript type {/*changes-to-the-reactelement-typescript-type*/}
+
+_This change is included in the [`react-element-default-any-props`](https://github.com/eps1lon/types-react-codemod#react-element-default-any-props) codemod._
+
+The `props` of React elements now default to `unknown` instead of `any` if the element is typed as `ReactElement`. This does not affect you if you pass a type argument to `ReactElement`:
+
+```ts
+type Example2 = ReactElement<{ id: string }>["props"];
+//   ^? { id: string }
+```
+
+But if you relied on the default, you now have to handle `unknown`:
+
+```ts
+type Example = ReactElement["props"];
+//   ^? Before, was 'any', now 'unknown'
+```
+
+You should only need it if you have a lot of legacy code relying on unsound access of element props. Element introspection only exists as an escape hatch, and you should make it explicit that your props access is unsound via an explicit `any`.
+
+### The JSX namespace in TypeScript {/*the-jsx-namespace-in-typescript*/}
+This change is included in the `react-19` codemod preset as [`scoped-jsx`](https://github.com/eps1lon/types-react-codemod#scoped-jsx)
+
+A long-time request is to remove the global `JSX` namespace from our types in favor of `React.JSX`. This helps prevent pollution of global types which prevents conflicts between different UI libraries that leverage JSX.
+
+You'll now need to wrap module augmentation of the JSX namespace in `declare module "....":
+
+```diff
+// global.d.ts
++ declare module "react" {
+    namespace JSX {
+      interface IntrinsicElements {
+        "my-element": {
+          myElementProps: string;
+        };
+      }
+    }
++ }
+```
+
+The exact module specifier depends on the JSX runtime you specified in the `compilerOptions` of your `tsconfig.json`:
+
+- For `"jsx": "react-jsx"` it would be `react/jsx-runtime`.
+- For `"jsx": "react-jsxdev"` it would be `react/jsx-dev-runtime`.
+- For `"jsx": "react"` and `"jsx": "preserve"` it would be `react`.
+
+### Better `useReducer` typings {/*better-usereducer-typings*/}
+
+`useReducer` now has improved type inference thanks to [@mfp22](https://github.com/mfp22).
+
+However, this required a breaking change where `useReducer` doesn't accept the full reducer type as a type parameter but instead either needs none (and rely on contextual typing) or needs both the state and action type.
+
+The new best practice is _not_ to pass type arguments to `useReducer`.
+```diff
+- useReducer<React.Reducer<State, Action>>(reducer)
++ useReducer(reducer)
+```
+This may not work in edge cases where you can explicitly type the state and action, by passing in the `Action` in a tuple:
+```diff
+- useReducer<React.Reducer<State, Action>>(reducer)
++ useReducer<State, [Action]>(reducer)
+```
+If you define the reducer inline, we encourage to annotate the function parameters instead:
+```diff
+- useReducer<React.Reducer<State, Action>>((state, action) => state)
++ useReducer((state: State, action: Action) => state)
+```
+This is also what you'd also have to do if you move the reducer outside of the `useReducer` call:
+
+```ts
+const reducer = (state: State, action: Action) => state;
+```
+
+## Changelog {/*changelog*/}
+
+### Other breaking changes {/*other-breaking-changes*/}
+
+- **react-dom**: Error for javascript URLs in `src` and `href` [#26507](https://github.com/facebook/react/pull/26507)
+- **react-dom**: Remove `errorInfo.digest` from `onRecoverableError` [#28222](https://github.com/facebook/react/pull/28222)
+- **react-dom**: Remove `unstable_flushControlled` [#26397](https://github.com/facebook/react/pull/26397)
+- **react-dom**: Remove `unstable_createEventHandle` [#28271](https://github.com/facebook/react/pull/28271)
+- **react-dom**: Remove `unstable_renderSubtreeIntoContainer` [#28271](https://github.com/facebook/react/pull/28271)
+- **react-dom**: Remove `unstable_runWithPriority` [#28271](https://github.com/facebook/react/pull/28271)
+- **react-is**: Remove deprecated methods from `react-is` [28224](https://github.com/facebook/react/pull/28224)
+
+### Other notable changes {/*other-notable-changes*/}
+
+- **react**: Batch sync, default and continuous lanes [#25700](https://github.com/facebook/react/pull/25700)
+- **react**: Don't prerender siblings of suspended component [#26380](https://github.com/facebook/react/pull/26380)
+- **react**: Detect infinite update loops caused by render phase updates [#26625](https://github.com/facebook/react/pull/26625)
+- **react-dom**: Transitions in popstate are now synchronous [#26025](https://github.com/facebook/react/pull/26025)
+- **react-dom**: Remove layout effect warning during SSR [#26395](https://github.com/facebook/react/pull/26395)
+- **react-dom**: Warn and don’t set empty string for src/href (except anchor tags) [#28124](https://github.com/facebook/react/pull/28124)
+
+For a full list of changes, please see the [Changelog](https://github.com/facebook/react/blob/main/CHANGELOG.md#1900-december-5-2024).
+
+---
+
+Thanks to [Andrew Clark](https://twitter.com/acdlite), [Eli White](https://twitter.com/Eli_White), [Jack Pope](https://github.com/jackpope), [Jan Kassens](https://github.com/kassens), [Josh Story](https://twitter.com/joshcstory), [Matt Carroll](https://twitter.com/mattcarrollcode), [Noah Lemen](https://twitter.com/noahlemen), [Sophie Alpert](https://twitter.com/sophiebits), and [Sebastian Silbermann](https://twitter.com/sebsilbermann) for reviewing and editing this post.
diff --git a/src/content/blog/2024/05/22/react-conf-2024-recap.md b/src/content/blog/2024/05/22/react-conf-2024-recap.md
new file mode 100644
index 000000000..bc77f4bbb
--- /dev/null
+++ b/src/content/blog/2024/05/22/react-conf-2024-recap.md
@@ -0,0 +1,124 @@
+---
+title: "React Conf 2024 Recap"
+author: Ricky Hanlon
+date: 2024/05/22
+description: Last week we hosted React Conf 2024, a two-day conference in Henderson, Nevada where 700+ attendees gathered in-person to discuss the latest in UI engineering. In this post, we'll summarize the talks and announcements from the event.
+---
+
+May 22, 2024 by [Ricky Hanlon](https://twitter.com/rickhanlonii).
+
+---
+
+<Intro>
+
+Last week we hosted React Conf 2024, a two-day conference in Henderson, Nevada where 700+ attendees gathered in-person to discuss the latest in UI engineering. This was our first in-person conference since 2019, and we were thrilled to be able to bring the community together again.
+
+</Intro>
+
+---
+
+At React Conf 2024, we announced the [React 19 RC](/blog/2024/12/05/react-19), the [React Native New Architecture Beta](https://github.com/reactwg/react-native-new-architecture/discussions/189), and an experimental release of the [React Compiler](/learn/react-compiler). The community also took the stage to announce [React Router v7](https://remix.run/blog/merging-remix-and-react-router), [Universal Server Components](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=20765s) in Expo Router, React Server Components in [RedwoodJS](https://redwoodjs.com/blog/rsc-now-in-redwoodjs), and much more.
+
+The entire [day 1](https://www.youtube.com/watch?v=T8TZQ6k4SLE) and [day 2](https://www.youtube.com/watch?v=0ckOUBiuxVY) streams are available online. In this post, we'll summarize the talks and announcements from the event.
+
+## Day 1 {/*day-1*/}
+
+_[Watch the full day 1 stream here.](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=973s)_
+
+To kick off day 1, Meta CTO [Andrew "Boz" Bosworth](https://www.threads.net/@boztank) shared a welcome message followed by an introduction by [Seth Webster](https://twitter.com/sethwebster), who manages the React Org at Meta, and our MC [Ashley Narcisse](https://twitter.com/_darkfadr).
+
+In the day 1 keynote, [Joe Savona](https://twitter.com/en_JS) shared our goals and vision for React to make it easy for anyone to build great user experiences. [Lauren Tan](https://twitter.com/potetotes) followed with a State of React, where she shared that React was downloaded over 1 billion times in 2023, and that 37% of new developers learn to program with React. Finally, she highlighted the work of the React community to make React, React.
+
+For more, check out these talks from the community later in the conference:
+
+- [Vanilla React](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=5542s) by [Ryan Florence](https://twitter.com/ryanflorence)
+- [React Rhythm & Blues](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=12728s) by [Lee Robinson](https://twitter.com/leeerob)
+- [RedwoodJS, now with React Server Components](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=26815s) by [Amy Dutton](https://twitter.com/selfteachme)
+- [Introducing Universal React Server Components in Expo Router](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=20765s) by [Evan Bacon](https://twitter.com/Baconbrix)
+
+Next in the keynote, [Josh Story](https://twitter.com/joshcstory) and [Andrew Clark](https://twitter.com/acdlite) shared new features coming in React 19, and announced the React 19 RC which is ready for testing in production. Check out all the features in the [React 19 release post](/blog/2024/12/05/react-19), and see these talks for deep dives on the new features:
+
+- [What's new in React 19](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=8880s) by [Lydia Hallie](https://twitter.com/lydiahallie)
+- [React Unpacked: A Roadmap to React 19](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=10112s) by [Sam Selikoff](https://twitter.com/samselikoff)
+- [React 19 Deep Dive: Coordinating HTML](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=24916s) by [Josh Story](https://twitter.com/joshcstory)
+- [Enhancing Forms with React Server Components](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=25280s) by [Aurora Walberg Scharff](https://twitter.com/aurorascharff)
+- [React for Two Computers](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=18825s) by [Dan Abramov](https://twitter.com/dan_abramov2)
+- [And Now You Understand React Server Components](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=11256s) by [Kent C. Dodds](https://twitter.com/kentcdodds)
+
+Finally, we ended the keynote with [Joe Savona](https://twitter.com/en_JS), [Sathya Gunasekaran](https://twitter.com/_gsathya), and [Mofei Zhang](https://twitter.com/zmofei) announcing that the React Compiler is now [Open Source](https://github.com/facebook/react/pull/29061), and sharing an experimental version of the React Compiler to try out.
+
+For more information on using the Compiler and how it works, check out [the docs](/learn/react-compiler) and these talks:
+
+- [Forget About Memo](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=12020s) by [Lauren Tan](https://twitter.com/potetotes)
+- [React Compiler Deep Dive](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=9313s) by [Sathya Gunasekaran](https://twitter.com/_gsathya) and [Mofei Zhang](https://twitter.com/zmofei)
+
+Watch the full day 1 keynote here:
+
+<YouTubeIframe src="https://www.youtube.com/embed/T8TZQ6k4SLE?t=973s" />
+
+## Day 2 {/*day-2*/}
+
+_[Watch the full day 2 stream here.](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=1720s)_
+
+To kick off day 2, [Seth Webster](https://twitter.com/sethwebster) shared a welcome message, followed by a Thank You from [Eli White](https://x.com/Eli_White) and an introduction by our Chief Vibes Officer [Ashley Narcisse](https://twitter.com/_darkfadr).
+
+In the day 2 keynote, [Nicola Corti](https://twitter.com/cortinico) shared the State of React Native, including 78 million downloads in 2023. He also highlighted apps using React Native including 2000+ screens used inside of Meta; the product details page in Facebook Marketplace, which is visited more than 2 billion times per day; and part of the Microsoft Windows Start Menu and some features in almost every Microsoft Office product across mobile and desktop.
+
+Nicola also highlighted all the work the community does to support React Native including libraries, frameworks, and multiple platforms. For more, check out these talks from the community:
+
+- [Extending React Native beyond Mobile and Desktop Apps](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=5798s) by [Chris Traganos](https://twitter.com/chris_trag) and [Anisha Malde](https://twitter.com/anisha_malde)
+- [Spatial computing with React](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=22525s) by [Michał Pierzchała](https://twitter.com/thymikee)
+
+[Riccardo Cipolleschi](https://twitter.com/cipolleschir) continued the day 2 keynote by announcing that the React Native New Architecture is now in Beta and ready for apps to adopt in production. He shared new features and improvements in the new architecture, and shared the roadmap for the future of React Native. For more check out:
+
+- [Cross Platform React](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=26569s) by [Olga Zinoveva](https://github.com/SlyCaptainFlint) and [Naman Goel](https://twitter.com/naman34)
+
+Next in the keynote, Nicola announced that we are now recommending starting with a framework like Expo for all new apps created with React Native. With the change, he also announced a new React Native homepage and new Getting Started docs. You can view the new Getting Started guide in the [React Native docs](https://reactnative.dev/docs/next/environment-setup).
+
+Finally, to end the keynote, [Kadi Kraman](https://twitter.com/kadikraman) shared the latest features and improvements in Expo, and how to get started developing with React Native using Expo.
+
+Watch the full day 2 keynote here:
+
+<YouTubeIframe src="https://www.youtube.com/embed/0ckOUBiuxVY?t=1720s" />
+
+## Q&A {/*q-and-a*/}
+
+The React and React Native teams also ended each day with a Q&A session:
+
+- [React Q&A](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=27518s) hosted by [Michael Chan](https://twitter.com/chantastic)
+- [React Native Q&A](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=27935s) hosted by [Jamon Holmgren](https://twitter.com/jamonholmgren)
+
+## And more... {/*and-more*/}
+
+We also heard talks on accessibility, error reporting, css, and more:
+
+- [Demystifying accessibility in React apps](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=20655s) by [Kateryna Porshnieva](https://twitter.com/krambertech)
+- [Pigment CSS, CSS in the server component age](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=21696s) by [Olivier Tassinari](https://twitter.com/olivtassinari)
+- [Real-time React Server Components](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=24070s) by [Sunil Pai](https://twitter.com/threepointone)
+- [Let's break React Rules](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=25862s) by [Charlotte Isambert](https://twitter.com/c_isambert)
+- [Solve 100% of your errors](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=19881s) by [Ryan Albrecht](https://github.com/ryan953)
+
+## Thank you {/*thank-you*/}
+
+Thank you to all the staff, speakers, and participants who made React Conf 2024 possible. There are too many to list, but we want to thank a few in particular.
+
+Thank you to [Barbara Markiewicz](https://twitter.com/barbara_markie), the team at [Callstack](https://www.callstack.com/), and our React Team Developer Advocate [Matt Carroll](https://twitter.com/mattcarrollcode) for helping to plan the entire event; and to [Sunny Leggett](https://zeroslopeevents.com/about) and everyone from [Zero Slope](https://zeroslopeevents.com) for helping to organize the event.
+
+Thank you [Ashley Narcisse](https://twitter.com/_darkfadr) for being our MC and Chief Vibes Officer; and to [Michael Chan](https://twitter.com/chantastic) and [Jamon Holmgren](https://twitter.com/jamonholmgren) for hosting the Q&A sessions.
+
+Thank you [Seth Webster](https://twitter.com/sethwebster) and [Eli White](https://x.com/Eli_White) for welcoming us each day and providing direction on structure and content; and to [Tom Occhino](https://twitter.com/tomocchino) for joining us with a special message during the after-party.
+
+Thank you [Ricky Hanlon](https://www.youtube.com/watch?v=FxTZL2U-uKg&t=1263s) for providing detailed feedback on talks, working on slide designs, and generally filling in the gaps to sweat the details.
+
+Thank you [Callstack](https://www.callstack.com/) for building the conference website; and to [Kadi Kraman](https://twitter.com/kadikraman) and the [Expo](https://expo.dev/) team for building the conference mobile app.
+
+Thank you to all the sponsors who made the event possible: [Remix](https://remix.run/), [Amazon](https://developer.amazon.com/apps-and-games?cmp=US_2024_05_3P_React-Conf-2024&ch=prtnr&chlast=prtnr&pub=ref&publast=ref&type=org&typelast=org), [MUI](https://mui.com/), [Sentry](https://sentry.io/for/react/?utm_source=sponsored-conf&utm_medium=sponsored-event&utm_campaign=frontend-fy25q2-evergreen&utm_content=logo-reactconf2024-learnmore), [Abbott](https://www.jobs.abbott/software), [Expo](https://expo.dev/), [RedwoodJS](https://redwoodjs.com/), and [Vercel](https://vercel.com).
+
+Thank you to the AV Team for the visuals, stage, and sound; and to the Westin Hotel for hosting us.
+
+Thank you to all the speakers who shared their knowledge and experiences with the community.
+
+Finally, thank you to everyone who attended in person and online to show what makes React, React. React is more than a library, it is a community, and it was inspiring to see everyone come together to share and learn together.
+
+See you next time!
+
diff --git a/src/content/blog/2024/10/21/react-compiler-beta-release.md b/src/content/blog/2024/10/21/react-compiler-beta-release.md
new file mode 100644
index 000000000..f5a870b22
--- /dev/null
+++ b/src/content/blog/2024/10/21/react-compiler-beta-release.md
@@ -0,0 +1,126 @@
+---
+title: "React Compiler Beta Release"
+author: Lauren Tan
+date: 2024/10/21
+description: At React Conf 2024, we announced the experimental release of React Compiler, a build-time tool that optimizes your React app through automatic memoization. In this post, we want to share what's next for open source, and our progress on the compiler.
+
+---
+
+October 21, 2024 by [Lauren Tan](https://twitter.com/potetotes).
+
+---
+
+<Intro>
+
+The React team is excited to share new updates:
+
+</Intro>
+
+1. We're publishing React Compiler Beta today, so that early adopters and library maintainers can try it and provide feedback.
+2. We're officially supporting React Compiler for apps on React 17+, through an optional `react-compiler-runtime` package.
+3. We're opening up public membership of the [React Compiler Working Group](https://github.com/reactwg/react-compiler) to prepare the community for gradual adoption of the compiler.
+
+---
+
+At [React Conf 2024](/blog/2024/05/22/react-conf-2024-recap), we announced the experimental release of React Compiler, a build-time tool that optimizes your React app through automatic memoization. [You can find an introduction to React Compiler here](/learn/react-compiler).
+
+Since the first release, we've fixed numerous bugs reported by the React community, received several high quality bug fixes and contributions[^1] to the compiler, made the compiler more resilient to the broad diversity of JavaScript patterns, and have continued to roll out the compiler more widely at Meta.
+
+In this post, we want to share what's next for React Compiler.
+
+## Try React Compiler Beta today {/*try-react-compiler-beta-today*/}
+
+At [React India 2024](https://www.youtube.com/watch?v=qd5yk2gxbtg), we shared an update on React Compiler. Today, we are excited to announce a new Beta release of React Compiler and ESLint plugin. New betas are published to npm using the `@beta` tag.
+
+To install React Compiler Beta:
+
+<TerminalBlock>
+npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
+</TerminalBlock>
+
+Or, if you're using Yarn:
+
+<TerminalBlock>
+yarn add -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
+</TerminalBlock>
+
+You can watch [Sathya Gunasekaran's](https://twitter.com/_gsathya) talk at React India here:
+
+<YouTubeIframe src="https://www.youtube.com/embed/qd5yk2gxbtg" />
+
+## We recommend everyone use the React Compiler linter today {/*we-recommend-everyone-use-the-react-compiler-linter-today*/}
+
+React Compiler’s ESLint plugin helps developers proactively identify and correct [Rules of React](/reference/rules) violations. **We strongly recommend everyone use the linter today**. The linter does not require that you have the compiler installed, so you can use it independently, even if you are not ready to try out the compiler.
+
+To install the linter only:
+
+<TerminalBlock>
+npm install -D eslint-plugin-react-compiler@beta
+</TerminalBlock>
+
+Or, if you're using Yarn:
+
+<TerminalBlock>
+yarn add -D eslint-plugin-react-compiler@beta
+</TerminalBlock>
+
+After installation you can enable the linter by [adding it to your ESLint config](/learn/react-compiler#installing-eslint-plugin-react-compiler). Using the linter helps identify Rules of React breakages, making it easier to adopt the compiler when it's fully released.
+
+## Backwards Compatibility {/*backwards-compatibility*/}
+
+React Compiler produces code that depends on runtime APIs added in React 19, but we've since added support for the compiler to also work with React 17 and 18. If you are not on React 19 yet, in the Beta release you can now try out React Compiler by specifying a minimum `target` in your compiler config, and adding `react-compiler-runtime` as a dependency. [You can find docs on this here](/learn/react-compiler#using-react-compiler-with-react-17-or-18).
+
+## Using React Compiler in libraries {/*using-react-compiler-in-libraries*/}
+
+Our initial release was focused on identifying major issues with using the compiler in applications. We've gotten great feedback and have substantially improved the compiler since then. We're now ready for broad feedback from the community, and for library authors to try out the compiler to improve performance and the developer experience of maintaining your library.
+
+React Compiler can also be used to compile libraries. Because React Compiler needs to run on the original source code prior to any code transformations, it is not possible for an application's build pipeline to compile the libraries they use. Hence, our recommendation is for library maintainers to independently compile and test their libraries with the compiler, and ship compiled code to npm.
+
+Because your code is pre-compiled, users of your library will not need to have the compiler enabled in order to benefit from the automatic memoization applied to your library. If your library targets apps not yet on React 19, specify a minimum `target` and add `react-compiler-runtime` as a direct dependency. The runtime package will use the correct implementation of APIs depending on the application's version, and polyfill the missing APIs if necessary.
+
+[You can find more docs on this here.](/learn/react-compiler#using-the-compiler-on-libraries)
+
+## Opening up React Compiler Working Group to everyone {/*opening-up-react-compiler-working-group-to-everyone*/}
+
+We previously announced the invite-only [React Compiler Working Group](https://github.com/reactwg/react-compiler) at React Conf to provide feedback, ask questions, and collaborate on the compiler's experimental release.
+
+From today, together with the Beta release of React Compiler, we are opening up Working Group membership to everyone. The goal of the React Compiler Working Group is to prepare the ecosystem for a smooth, gradual adoption of React Compiler by existing applications and libraries. Please continue to file bug reports in the [React repo](https://github.com/facebook/react), but please leave feedback, ask questions, or share ideas in the [Working Group discussion forum](https://github.com/reactwg/react-compiler/discussions).
+
+The core team will also use the discussions repo to share our research findings. As the Stable Release gets closer, any important information will also be posted on this forum.
+
+## React Compiler at Meta {/*react-compiler-at-meta*/}
+
+At [React Conf](/blog/2024/05/22/react-conf-2024-recap), we shared that our rollout of the compiler on Quest Store and Instagram were successful. Since then, we've deployed React Compiler across several more major web apps at Meta, including [Facebook](https://www.facebook.com) and [Threads](https://www.threads.net). That means if you've used any of these apps recently, you may have had your experience powered by the compiler. We were able to onboard these apps onto the compiler with few code changes required, in a monorepo with more than 100,000 React components.
+
+We've seen notable performance improvements across all of these apps. As we've rolled out, we're continuing to see results on the order of [the wins we shared previously at ReactConf](https://youtu.be/lyEKhv8-3n0?t=3223). These apps have already been heavily hand tuned and optimized by Meta engineers and React experts over the years, so even improvements on the order of a few percent are a huge win for us.
+
+We also expected developer productivity wins from React Compiler. To measure this, we collaborated with our data science partners at Meta[^2] to conduct a thorough statistical analysis of the impact of manual memoization on productivity. Before rolling out the compiler at Meta, we discovered that only about 8% of React pull requests used manual memoization and that these pull requests took 31-46% longer to author[^3]. This confirmed our intuition that manual memoization introduces cognitive overhead, and we anticipate that React Compiler will lead to more efficient code authoring and review. Notably, React Compiler also ensures that *all* code is memoized by default, not just the (in our case) 8% where developers explicitly apply memoization.
+
+## Roadmap to Stable {/*roadmap-to-stable*/}
+
+*This is not a final roadmap, and is subject to change.*
+
+We intend to ship a Release Candidate of the compiler in the near future following the Beta release, when the majority of apps and libraries that follow the Rules of React have been proven to work well with the compiler. After a period of final feedback from the community, we plan on a Stable Release for the compiler. The Stable Release will mark the beginning of a new foundation for React, and all apps and libraries will be strongly recommended to use the compiler and ESLint plugin.
+
+* ✅ Experimental: Released at React Conf 2024, primarily for feedback from early adopters.
+* ✅ Public Beta: Available today, for feedback from the wider community.
+* 🚧 Release Candidate (RC): React Compiler works for the majority of rule-following apps and libraries without issue.
+* 🚧 General Availability: After final feedback period from the community.
+
+These releases also include the compiler's ESLint plugin, which surfaces diagnostics statically analyzed by the compiler. We plan to combine the existing eslint-plugin-react-hooks plugin with the compiler's ESLint plugin, so only one plugin needs to be installed.
+
+Post-Stable, we plan to add more compiler optimizations and improvements. This includes both continual improvements to automatic memoization, and new optimizations altogether, with minimal to no change of product code. Upgrading to each new release of the compiler is aimed to be straightforward, and each upgrade will continue to improve performance and add better handling of diverse JavaScript and React patterns.
+
+Throughout this process, we also plan to prototype an IDE extension for React. It is still very early in research, so we expect to be able to share more of our findings with you in a future React Labs blog post.
+
+---
+
+Thanks to [Sathya Gunasekaran](https://twitter.com/_gsathya), [Joe Savona](https://twitter.com/en_JS), [Ricky Hanlon](https://twitter.com/rickhanlonii), [Alex Taylor](https://github.com/alexmckenley), [Jason Bonta](https://twitter.com/someextent), and [Eli White](https://twitter.com/Eli_White) for reviewing and editing this post.
+
+---
+
+[^1]: Thanks [@nikeee](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Anikeee), [@henryqdineen](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Ahenryqdineen), [@TrickyPi](https://github.com/facebook/react/pulls?q=is%3Apr+author%3ATrickyPi), and several others for their contributions to the compiler.
+
+[^2]: Thanks [Vaishali Garg](https://www.linkedin.com/in/vaishaligarg09) for leading this study on React Compiler at Meta, and for reviewing this post.
+
+[^3]: After controlling on author tenure, diff length/complexity, and other potential confounding factors.
\ No newline at end of file
diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md
new file mode 100644
index 000000000..9f212209b
--- /dev/null
+++ b/src/content/blog/2024/12/05/react-19.md
@@ -0,0 +1,810 @@
+---
+title: "React v19"
+author: The React Team
+date: 2024/12/05
+description: React 19 is now available on npm! In this post, we'll give an overview of the new features in React 19, and how you can adopt them.
+---
+
+December 05, 2024 by [The React Team](/community/team)
+
+---
+<Note>
+
+### React 19 is now stable! {/*react-19-is-now-stable*/}
+
+Additions since this post was originally shared with the React 19 RC in April:
+
+- **Pre-warming for suspended trees**: see [Improvements to Suspense](/blog/2024/04/25/react-19-upgrade-guide#improvements-to-suspense).
+- **React DOM static APIs**: see [New React DOM Static APIs](#new-react-dom-static-apis).
+
+_The date for this post has been update to reflect the stable release date._
+
+</Note>
+
+<Intro>
+
+React v19 is now available on npm!
+
+</Intro>
+
+In our [React 19 Upgrade Guide](/blog/2024/04/25/react-19-upgrade-guide), we shared step-by-step instructions for upgrading your app to React 19. In this post, we'll give an overview of the new features in React 19, and how you can adopt them.
+
+- [What's new in React 19](#whats-new-in-react-19)
+- [Improvements in React 19](#improvements-in-react-19)
+- [How to upgrade](#how-to-upgrade)
+
+For a list of breaking changes, see the [Upgrade Guide](/blog/2024/04/25/react-19-upgrade-guide).
+
+---
+
+## What's new in React 19 {/*whats-new-in-react-19*/}
+
+### Actions {/*actions*/}
+
+A common use case in React apps is to perform a data mutation and then update state in response. For example, when a user submits a form to change their name, you will make an API request, and then handle the response. In the past, you would need to handle pending states, errors, optimistic updates, and sequential requests manually.
+
+For example, you could handle the pending and error state in `useState`:
+
+```js
+// Before Actions
+function UpdateName({}) {
+  const [name, setName] = useState("");
+  const [error, setError] = useState(null);
+  const [isPending, setIsPending] = useState(false);
+
+  const handleSubmit = async () => {
+    setIsPending(true);
+    const error = await updateName(name);
+    setIsPending(false);
+    if (error) {
+      setError(error);
+      return;
+    } 
+    redirect("/path");
+  };
+
+  return (
+    <div>
+      <input value={name} onChange={(event) => setName(event.target.value)} />
+      <button onClick={handleSubmit} disabled={isPending}>
+        Update
+      </button>
+      {error && <p>{error}</p>}
+    </div>
+  );
+}
+```
+
+In React 19, we're adding support for using async functions in transitions to handle pending states, errors, forms, and optimistic updates automatically.
+
+For example, you can use `useTransition` to handle the pending state for you:
+
+```js
+// Using pending state from Actions
+function UpdateName({}) {
+  const [name, setName] = useState("");
+  const [error, setError] = useState(null);
+  const [isPending, startTransition] = useTransition();
+
+  const handleSubmit = () => {
+    startTransition(async () => {
+      const error = await updateName(name);
+      if (error) {
+        setError(error);
+        return;
+      } 
+      redirect("/path");
+    })
+  };
+
+  return (
+    <div>
+      <input value={name} onChange={(event) => setName(event.target.value)} />
+      <button onClick={handleSubmit} disabled={isPending}>
+        Update
+      </button>
+      {error && <p>{error}</p>}
+    </div>
+  );
+}
+```
+
+The async transition will immediately set the `isPending` state to true, make the async request(s), and switch `isPending` to false after any transitions. This allows you to keep the current UI responsive and interactive while the data is changing.
+
+<Note>
+
+#### By convention, functions that use async transitions are called "Actions". {/*by-convention-functions-that-use-async-transitions-are-called-actions*/}
+
+Actions automatically manage submitting data for you:
+
+- **Pending state**: Actions provide a pending state that starts at the beginning of a request and automatically resets when the final state update is committed.
+- **Optimistic updates**: Actions support the new [`useOptimistic`](#new-hook-optimistic-updates) hook so you can show users instant feedback while the requests are submitting.
+- **Error handling**: Actions provide error handling so you can display Error Boundaries when a request fails, and revert optimistic updates to their original value automatically.
+- **Forms**: `<form>` elements now support passing functions to the `action` and `formAction` props. Passing functions to the `action` props use Actions by default and reset the form automatically after submission.
+
+</Note>
+
+Building on top of Actions, React 19 introduces [`useOptimistic`](#new-hook-optimistic-updates) to manage optimistic updates, and a new hook [`React.useActionState`](#new-hook-useactionstate) to handle common cases for Actions. In `react-dom` we're adding [`<form>` Actions](#form-actions) to manage forms automatically and [`useFormStatus`](#new-hook-useformstatus) to support the common cases for Actions in forms.
+
+In React 19, the above example can be simplified to:
+
+```js
+// Using <form> Actions and useActionState
+function ChangeName({ name, setName }) {
+  const [error, submitAction, isPending] = useActionState(
+    async (previousState, formData) => {
+      const error = await updateName(formData.get("name"));
+      if (error) {
+        return error;
+      }
+      redirect("/path");
+      return null;
+    },
+    null,
+  );
+
+  return (
+    <form action={submitAction}>
+      <input type="text" name="name" />
+      <button type="submit" disabled={isPending}>Update</button>
+      {error && <p>{error}</p>}
+    </form>
+  );
+}
+```
+
+In the next section, we'll break down each of the new Action features in React 19.
+
+### New hook: `useActionState` {/*new-hook-useactionstate*/}
+
+To make the common cases easier for Actions, we've added a new hook called `useActionState`:
+
+```js
+const [error, submitAction, isPending] = useActionState(
+  async (previousState, newName) => {
+    const error = await updateName(newName);
+    if (error) {
+      // You can return any result of the action.
+      // Here, we return only the error.
+      return error;
+    }
+
+    // handle success
+    return null;
+  },
+  null,
+);
+```
+
+`useActionState` accepts a function (the "Action"), and returns a wrapped Action to call. This works because Actions compose. When the wrapped Action is called, `useActionState` will return the last result of the Action as `data`, and the pending state of the Action as `pending`. 
+
+<Note>
+
+`React.useActionState` was previously called `ReactDOM.useFormState` in the Canary releases, but we've renamed it and deprecated `useFormState`.
+
+See [#28491](https://github.com/facebook/react/pull/28491) for more info.
+
+</Note>
+
+For more information, see the docs for [`useActionState`](/reference/react/useActionState).
+
+### React DOM: `<form>` Actions {/*form-actions*/}
+
+Actions are also integrated with React 19's new `<form>` features for `react-dom`. We've added support for passing functions as the `action` and `formAction` props of `<form>`, `<input>`, and `<button>` elements to automatically submit forms with Actions:
+
+```js [[1,1,"actionFunction"]]
+<form action={actionFunction}>
+```
+
+When a `<form>` Action succeeds, React will automatically reset the form for uncontrolled components. If you need to reset the `<form>` manually, you can call the new `requestFormReset` React DOM API.
+
+For more information, see the `react-dom` docs for [`<form>`](/reference/react-dom/components/form), [`<input>`](/reference/react-dom/components/input), and `<button>`.
+
+### React DOM: New hook: `useFormStatus` {/*new-hook-useformstatus*/}
+
+In design systems, it's common to write design components that need access to information about the `<form>` they're in, without drilling props down to the component. This can be done via Context, but to make the common case easier, we've added a new hook `useFormStatus`:
+
+```js [[1, 4, "pending"], [1, 5, "pending"]]
+import {useFormStatus} from 'react-dom';
+
+function DesignButton() {
+  const {pending} = useFormStatus();
+  return <button type="submit" disabled={pending} />
+}
+```
+
+`useFormStatus` reads the status of the parent `<form>` as if the form was a Context provider.
+
+For more information, see the `react-dom` docs for [`useFormStatus`](/reference/react-dom/hooks/useFormStatus).
+
+### New hook: `useOptimistic` {/*new-hook-optimistic-updates*/}
+
+Another common UI pattern when performing a data mutation is to show the final state optimistically while the async request is underway. In React 19, we're adding a new hook called `useOptimistic` to make this easier:
+
+```js {2,6,13,19}
+function ChangeName({currentName, onUpdateName}) {
+  const [optimisticName, setOptimisticName] = useOptimistic(currentName);
+
+  const submitAction = async formData => {
+    const newName = formData.get("name");
+    setOptimisticName(newName);
+    const updatedName = await updateName(newName);
+    onUpdateName(updatedName);
+  };
+
+  return (
+    <form action={submitAction}>
+      <p>Your name is: {optimisticName}</p>
+      <p>
+        <label>Change Name:</label>
+        <input
+          type="text"
+          name="name"
+          disabled={currentName !== optimisticName}
+        />
+      </p>
+    </form>
+  );
+}
+```
+
+The `useOptimistic` hook will immediately render the `optimisticName` while the `updateName` request is in progress. When the update finishes or errors, React will automatically switch back to the `currentName` value.
+
+For more information, see the docs for [`useOptimistic`](/reference/react/useOptimistic).
+
+### New API: `use` {/*new-feature-use*/}
+
+In React 19 we're introducing a new API to read resources in render: `use`.
+
+For example, you can read a promise with `use`, and React will Suspend until the promise resolves:
+
+```js {1,5}
+import {use} from 'react';
+
+function Comments({commentsPromise}) {
+  // `use` will suspend until the promise resolves.
+  const comments = use(commentsPromise);
+  return comments.map(comment => <p key={comment.id}>{comment}</p>);
+}
+
+function Page({commentsPromise}) {
+  // When `use` suspends in Comments,
+  // this Suspense boundary will be shown.
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <Comments commentsPromise={commentsPromise} />
+    </Suspense>
+  )
+}
+```
+
+<Note>
+
+#### `use` does not support promises created in render. {/*use-does-not-support-promises-created-in-render*/}
+
+If you try to pass a promise created in render to `use`, React will warn:
+
+<ConsoleBlockMulti>
+
+<ConsoleLogLine level="error">
+
+A component was suspended by an uncached promise. Creating promises inside a Client Component or hook is not yet supported, except via a Suspense-compatible library or framework.
+
+</ConsoleLogLine>
+
+</ConsoleBlockMulti>
+
+To fix, you need to pass a promise from a suspense powered library or framework that supports caching for promises. In the future we plan to ship features to make it easier to cache promises in render.
+
+</Note>
+
+You can also read context with `use`, allowing you to read Context conditionally such as after early returns:
+
+```js {1,11}
+import {use} from 'react';
+import ThemeContext from './ThemeContext'
+
+function Heading({children}) {
+  if (children == null) {
+    return null;
+  }
+  
+  // This would not work with useContext
+  // because of the early return.
+  const theme = use(ThemeContext);
+  return (
+    <h1 style={{color: theme.color}}>
+      {children}
+    </h1>
+  );
+}
+```
+
+The `use` API can only be called in render, similar to hooks. Unlike hooks, `use` can be called conditionally. In the future we plan to support more ways to consume resources in render with `use`.
+
+For more information, see the docs for [`use`](/reference/react/use).
+
+## New React DOM Static APIs {/*new-react-dom-static-apis*/}
+
+We've added two new APIs to `react-dom/static` for static site generation:
+- [`prerender`](/reference/react-dom/static/prerender)
+- [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream)
+
+These new APIs improve on `renderToString` by waiting for data to load for static HTML generation. They are designed to work with streaming environments like Node.js Streams and Web Streams. For example, in a Web Stream environment, you can prerender a React tree to static HTML with `prerender`: 
+
+```js
+import { prerender } from 'react-dom/static';
+
+async function handler(request) {
+  const {prelude} = await prerender(<App />, {
+    bootstrapScripts: ['/main.js']
+  });
+  return new Response(prelude, {
+    headers: { 'content-type': 'text/html' },
+  });
+}
+```
+
+Prerender APIs will wait for all data to load before returning the static HTML stream. Streams can be converted to strings, or sent with a streaming response. They do not support streaming content as it loads, which is supported by the existing [React DOM server rendering APIs](/reference/react-dom/server).
+
+For more information, see [React DOM Static APIs](/reference/react-dom/static).
+
+## React Server Components {/*react-server-components*/}
+
+### Server Components {/*server-components*/}
+
+Server Components are a new option that allows rendering components ahead of time, before bundling, in an environment separate from your client application or SSR server. This separate environment is the "server" in React Server Components. Server Components can run once at build time on your CI server, or they can be run for each request using a web server.
+
+React 19 includes all of the React Server Components features included from the Canary channel. This means libraries that ship with Server Components can now target React 19 as a peer dependency with a `react-server` [export condition](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#react-server-conditional-exports) for use in frameworks that support the [Full-stack React Architecture](/learn/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision). 
+
+
+<Note>
+
+#### How do I build support for Server Components? {/*how-do-i-build-support-for-server-components*/}
+
+While React Server Components in React 19 are stable and will not break between major versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. 
+
+To support React Server Components as a bundler or framework, we recommend pinning to a specific React version, or using the Canary release. We will continue working with bundlers and frameworks to stabilize the APIs used to implement React Server Components in the future.
+
+</Note>
+
+
+For more, see the docs for [React Server Components](/reference/rsc/server-components).
+
+### Server Actions {/*server-actions*/}
+
+Server Actions allow Client Components to call async functions executed on the server.
+
+When a Server Action is defined with the `"use server"` directive, your framework will automatically create a reference to the server function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result.
+
+<Note>
+
+#### There is no directive for Server Components. {/*there-is-no-directive-for-server-components*/}
+
+A common misunderstanding is that Server Components are denoted by `"use server"`, but there is no directive for Server Components. The `"use server"` directive is used for Server Actions.
+
+For more info, see the docs for [Directives](/reference/rsc/directives).
+
+</Note>
+
+Server Actions can be created in Server Components and passed as props to Client Components, or they can be imported and used in Client Components.
+
+For more, see the docs for [React Server Actions](/reference/rsc/server-actions).
+
+## Improvements in React 19 {/*improvements-in-react-19*/}
+
+### `ref` as a prop {/*ref-as-a-prop*/}
+
+Starting in React 19, you can now access `ref` as a prop for function components:
+
+```js [[1, 1, "ref"], [1, 2, "ref", 45], [1, 6, "ref", 14]]
+function MyInput({placeholder, ref}) {
+  return <input placeholder={placeholder} ref={ref} />
+}
+
+//...
+<MyInput ref={ref} />
+```
+
+New function components will no longer need `forwardRef`, and we will be publishing a codemod to automatically update your components to use the new `ref` prop. In future versions we will deprecate and remove `forwardRef`.
+
+<Note>
+
+`refs` passed to classes are not passed as props since they reference the component instance.
+
+</Note>
+
+### Diffs for hydration errors {/*diffs-for-hydration-errors*/}
+
+We also improved error reporting for hydration errors in `react-dom`. For example, instead of logging multiple errors in DEV without any information about the mismatch:
+
+<ConsoleBlockMulti>
+
+<ConsoleLogLine level="error">
+
+Warning: Text content did not match. Server: "Server" Client: "Client"
+{'  '}at span
+{'  '}at App
+
+</ConsoleLogLine>
+
+<ConsoleLogLine level="error">
+
+Warning: An error occurred during hydration. The server HTML was replaced with client content in \<div\>.
+
+</ConsoleLogLine>
+
+<ConsoleLogLine level="error">
+
+Warning: Text content did not match. Server: "Server" Client: "Client"
+{'  '}at span
+{'  '}at App
+
+</ConsoleLogLine>
+
+<ConsoleLogLine level="error">
+
+Warning: An error occurred during hydration. The server HTML was replaced with client content in \<div\>.
+
+</ConsoleLogLine>
+
+<ConsoleLogLine level="error">
+
+Uncaught Error: Text content does not match server-rendered HTML.
+{'  '}at checkForUnmatchedText
+{'  '}...
+
+</ConsoleLogLine>
+
+</ConsoleBlockMulti>
+
+We now log a single message with a diff of the mismatch:
+
+
+<ConsoleBlockMulti>
+
+<ConsoleLogLine level="error">
+
+Uncaught Error: Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if an SSR-ed Client Component used:{'\n'}
+\- A server/client branch `if (typeof window !== 'undefined')`.
+\- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
+\- Date formatting in a user's locale which doesn't match the server.
+\- External changing data without sending a snapshot of it along with the HTML.
+\- Invalid HTML tag nesting.{'\n'}
+It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.{'\n'}
+https://react.dev/link/hydration-mismatch {'\n'}
+{'  '}\<App\>
+{'    '}\<span\>
+{'+    '}Client
+{'-    '}Server{'\n'}
+{'  '}at throwOnHydrationMismatch
+{'  '}...
+
+</ConsoleLogLine>
+
+</ConsoleBlockMulti>
+
+### `<Context>` as a provider {/*context-as-a-provider*/}
+
+In React 19, you can render `<Context>` as a provider instead of `<Context.Provider>`:
+
+
+```js {5,7}
+const ThemeContext = createContext('');
+
+function App({children}) {
+  return (
+    <ThemeContext value="dark">
+      {children}
+    </ThemeContext>
+  );  
+}
+```
+
+New Context providers can use `<Context>` and we will be publishing a codemod to convert existing providers. In future versions we will deprecate `<Context.Provider>`.
+
+### Cleanup functions for refs {/*cleanup-functions-for-refs*/}
+
+We now support returning a cleanup function from `ref` callbacks:
+
+```js {7-9}
+<input
+  ref={(ref) => {
+    // ref created
+
+    // NEW: return a cleanup function to reset
+    // the ref when element is removed from DOM.
+    return () => {
+      // ref cleanup
+    };
+  }}
+/>
+```
+
+When the component unmounts, React will call the cleanup function returned from the `ref` callback. This works for DOM refs, refs to class components, and `useImperativeHandle`. 
+
+<Note>
+
+Previously, React would call `ref` functions with `null` when unmounting the component. If your `ref` returns a cleanup function, React will now skip this step.
+
+In future versions, we will deprecate calling refs with `null` when unmounting components.
+
+</Note>
+
+Due to the introduction of ref cleanup functions, returning anything else from a `ref` callback will now be rejected by TypeScript. The fix is usually to stop using implicit returns, for example:
+
+```diff [[1, 1, "("], [1, 1, ")"], [2, 2, "{", 15], [2, 2, "}", 1]]
+- <div ref={current => (instance = current)} />
++ <div ref={current => {instance = current}} />
+```
+
+The original code returned the instance of the `HTMLDivElement` and TypeScript wouldn't know if this was _supposed_ to be a cleanup function or if you didn't want to return a cleanup function.
+
+You can codemod this pattern with [`no-implicit-ref-callback-return`](https://github.com/eps1lon/types-react-codemod/#no-implicit-ref-callback-return).
+
+### `useDeferredValue` initial value {/*use-deferred-value-initial-value*/}
+
+We've added an `initialValue` option to `useDeferredValue`:
+
+```js [[1, 1, "deferredValue"], [1, 4, "deferredValue"], [2, 4, "''"]]
+function Search({deferredValue}) {
+  // On initial render the value is ''.
+  // Then a re-render is scheduled with the deferredValue.
+  const value = useDeferredValue(deferredValue, '');
+  
+  return (
+    <Results query={value} />
+  );
+}
+````
+
+When <CodeStep step={2}>initialValue</CodeStep> is provided, `useDeferredValue` will return it as `value` for the initial render of the component, and schedules a re-render in the background with the <CodeStep step={1}>deferredValue</CodeStep> returned.
+
+For more, see [`useDeferredValue`](/reference/react/useDeferredValue).
+
+### Support for Document Metadata {/*support-for-metadata-tags*/}
+
+In HTML, document metadata tags like `<title>`, `<link>`, and `<meta>` are reserved for placement in the `<head>` section of the document. In React, the component that decides what metadata is appropriate for the app may be very far from the place where you render the `<head>` or React does not render the `<head>` at all. In the past, these elements would need to be inserted manually in an effect, or by libraries like [`react-helmet`](https://github.com/nfl/react-helmet), and required careful handling when server rendering a React application. 
+
+In React 19, we're adding support for rendering document metadata tags in components natively:
+
+```js {5-8}
+function BlogPost({post}) {
+  return (
+    <article>
+      <h1>{post.title}</h1>
+      <title>{post.title}</title>
+      <meta name="author" content="Josh" />
+      <link rel="author" href="https://twitter.com/joshcstory/" />
+      <meta name="keywords" content={post.keywords} />
+      <p>
+        Eee equals em-see-squared...
+      </p>
+    </article>
+  );
+}
+```
+
+When React renders this component, it will see the `<title>` `<link>` and `<meta>` tags, and automatically hoist them to the `<head>` section of document. By supporting these metadata tags natively, we're able to ensure they work with client-only apps, streaming SSR, and Server Components.
+
+<Note>
+
+#### You may still want a Metadata library {/*you-may-still-want-a-metadata-library*/}
+
+For simple use cases, rendering Document Metadata as tags may be suitable, but libraries can offer more powerful features like overriding generic metadata with specific metadata based on the current route. These features make it easier for frameworks and libraries like [`react-helmet`](https://github.com/nfl/react-helmet) to support metadata tags, rather than replace them.
+
+</Note>
+
+For more info, see the docs for [`<title>`](/reference/react-dom/components/title), [`<link>`](/reference/react-dom/components/link), and [`<meta>`](/reference/react-dom/components/meta).
+
+### Support for stylesheets {/*support-for-stylesheets*/}
+
+Stylesheets, both externally linked (`<link rel="stylesheet" href="...">`) and inline (`<style>...</style>`), require careful positioning in the DOM due to style precedence rules. Building a stylesheet capability that allows for composability within components is hard, so users often end up either loading all of their styles far from the components that may depend on them, or they use a style library which encapsulates this complexity.
+
+In React 19, we're addressing this complexity and providing even deeper integration into Concurrent Rendering on the Client and Streaming Rendering on the Server with built in support for stylesheets. If you tell React the `precedence` of your stylesheet it will manage the insertion order of the stylesheet in the DOM and ensure that the stylesheet (if external) is loaded before revealing content that depends on those style rules.
+
+```js {4,5,17}
+function ComponentOne() {
+  return (
+    <Suspense fallback="loading...">
+      <link rel="stylesheet" href="foo" precedence="default" />
+      <link rel="stylesheet" href="bar" precedence="high" />
+      <article class="foo-class bar-class">
+        {...}
+      </article>
+    </Suspense>
+  )
+}
+
+function ComponentTwo() {
+  return (
+    <div>
+      <p>{...}</p>
+      <link rel="stylesheet" href="baz" precedence="default" />  <-- will be inserted between foo & bar
+    </div>
+  )
+}
+```
+
+During Server Side Rendering React will include the stylesheet in the `<head>`, which ensures that the browser will not paint until it has loaded. If the stylesheet is discovered late after we've already started streaming, React will ensure that the stylesheet is inserted into the `<head>` on the client before revealing the content of a Suspense boundary that depends on that stylesheet.
+
+During Client Side Rendering React will wait for newly rendered stylesheets to load before committing the render. If you render this component from multiple places within your application React will only include the stylesheet once in the document:
+
+```js {5}
+function App() {
+  return <>
+    <ComponentOne />
+    ...
+    <ComponentOne /> // won't lead to a duplicate stylesheet link in the DOM
+  </>
+}
+```
+
+For users accustomed to loading stylesheets manually this is an opportunity to locate those stylesheets alongside the components that depend on them allowing for better local reasoning and an easier time ensuring you only load the stylesheets that you actually depend on.
+
+Style libraries and style integrations with bundlers can also adopt this new capability so even if you don't directly render your own stylesheets, you can still benefit as your tools are upgraded to use this feature.
+
+For more details, read the docs for [`<link>`](/reference/react-dom/components/link) and [`<style>`](/reference/react-dom/components/style).
+
+### Support for async scripts {/*support-for-async-scripts*/}
+
+In HTML normal scripts (`<script src="...">`) and deferred scripts (`<script defer="" src="...">`) load in document order which makes rendering these kinds of scripts deep within your component tree challenging. Async scripts (`<script async="" src="...">`) however will load in arbitrary order.
+
+In React 19 we've included better support for async scripts by allowing you to render them anywhere in your component tree, inside the components that actually depend on the script, without having to manage relocating and deduplicating script instances.
+
+```js {4,15}
+function MyComponent() {
+  return (
+    <div>
+      <script async={true} src="..." />
+      Hello World
+    </div>
+  )
+}
+
+function App() {
+  <html>
+    <body>
+      <MyComponent>
+      ...
+      <MyComponent> // won't lead to duplicate script in the DOM
+    </body>
+  </html>
+}
+```
+
+In all rendering environments, async scripts will be deduplicated so that React will only load and execute the script once even if it is rendered by multiple different components.
+
+In Server Side Rendering, async scripts will be included in the `<head>` and prioritized behind more critical resources that block paint such as stylesheets, fonts, and image preloads.
+
+For more details, read the docs for [`<script>`](/reference/react-dom/components/script).
+
+### Support for preloading resources {/*support-for-preloading-resources*/}
+
+During initial document load and on client side updates, telling the Browser about resources that it will likely need to load as early as possible can have a dramatic effect on page performance.
+
+React 19 includes a number of new APIs for loading and preloading Browser resources to make it as easy as possible to build great experiences that aren't held back by inefficient resource loading.
+
+```js
+import { prefetchDNS, preconnect, preload, preinit } from 'react-dom'
+function MyComponent() {
+  preinit('https://.../path/to/some/script.js', {as: 'script' }) // loads and executes this script eagerly
+  preload('https://.../path/to/font.woff', { as: 'font' }) // preloads this font
+  preload('https://.../path/to/stylesheet.css', { as: 'style' }) // preloads this stylesheet
+  prefetchDNS('https://...') // when you may not actually request anything from this host
+  preconnect('https://...') // when you will request something but aren't sure what
+}
+```
+```html
+<!-- the above would result in the following DOM/HTML -->
+<html>
+  <head>
+    <!-- links/scripts are prioritized by their utility to early loading, not call order -->
+    <link rel="prefetch-dns" href="https://...">
+    <link rel="preconnect" href="https://...">
+    <link rel="preload" as="font" href="https://.../path/to/font.woff">
+    <link rel="preload" as="style" href="https://.../path/to/stylesheet.css">
+    <script async="" src="https://.../path/to/some/script.js"></script>
+  </head>
+  <body>
+    ...
+  </body>
+</html>
+```
+
+These APIs can be used to optimize initial page loads by moving discovery of additional resources like fonts out of stylesheet loading. They can also make client updates faster by prefetching a list of resources used by an anticipated navigation and then eagerly preloading those resources on click or even on hover.
+
+For more details see [Resource Preloading APIs](/reference/react-dom#resource-preloading-apis).
+
+### Compatibility with third-party scripts and extensions {/*compatibility-with-third-party-scripts-and-extensions*/}
+
+We've improved hydration to account for third-party scripts and browser extensions.
+
+When hydrating, if an element that renders on the client doesn't match the element found in the HTML from the server, React will force a client re-render to fix up the content. Previously, if an element was inserted by third-party scripts or browser extensions, it would trigger a mismatch error and client render.
+
+In React 19, unexpected tags in the `<head>` and `<body>` will be skipped over, avoiding the mismatch errors. If React needs to re-render the entire document due to an unrelated hydration mismatch, it will leave in place stylesheets inserted by third-party scripts and browser extensions.
+
+### Better error reporting {/*error-handling*/}
+
+We improved error handling in React 19 to remove duplication and provide options for handling caught and uncaught errors. For example, when there's an error in render caught by an Error Boundary, previously React would throw the error twice (once for the original error, then again after failing to automatically recover), and then call `console.error` with info about where the error occurred. 
+
+This resulted in three errors for every caught error:
+
+<ConsoleBlockMulti>
+
+<ConsoleLogLine level="error">
+
+Uncaught Error: hit
+{'  '}at Throws
+{'  '}at renderWithHooks
+{'  '}...
+
+</ConsoleLogLine>
+
+<ConsoleLogLine level="error">
+
+Uncaught Error: hit<span className="ms-2 text-gray-30">{'    <--'} Duplicate</span>
+{'  '}at Throws
+{'  '}at renderWithHooks
+{'  '}...
+
+</ConsoleLogLine>
+
+<ConsoleLogLine level="error">
+
+The above error occurred in the Throws component:
+{'  '}at Throws
+{'  '}at ErrorBoundary
+{'  '}at App{'\n'}
+React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
+
+</ConsoleLogLine>
+
+</ConsoleBlockMulti>
+
+In React 19, we log a single error with all the error information included:
+
+<ConsoleBlockMulti>
+
+<ConsoleLogLine level="error">
+
+Error: hit
+{'  '}at Throws
+{'  '}at renderWithHooks
+{'  '}...{'\n'}
+The above error occurred in the Throws component:
+{'  '}at Throws
+{'  '}at ErrorBoundary
+{'  '}at App{'\n'}
+React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
+{'  '}at ErrorBoundary
+{'  '}at App
+
+</ConsoleLogLine>
+
+</ConsoleBlockMulti>
+
+Additionally, we've added two new root options to complement `onRecoverableError`:
+
+- `onCaughtError`: called when React catches an error in an Error Boundary.
+- `onUncaughtError`: called when an error is thrown and not caught by an Error Boundary.
+- `onRecoverableError`: called when an error is thrown and automatically recovered.
+
+For more info and examples, see the docs for [`createRoot`](/reference/react-dom/client/createRoot) and [`hydrateRoot`](/reference/react-dom/client/hydrateRoot).
+
+### Support for Custom Elements {/*support-for-custom-elements*/}
+
+React 19 adds full support for custom elements and passes all tests on [Custom Elements Everywhere](https://custom-elements-everywhere.com/).
+
+In past versions, using Custom Elements in React has been difficult because React treated unrecognized props as attributes rather than properties. In React 19, we've added support for properties that works on the client and during SSR with the following strategy:
+
+- **Server Side Rendering**: props passed to a custom element will render as attributes if their type is a primitive value like `string`, `number`, or the value is `true`. Props with non-primitive types like `object`, `symbol`, `function`, or value `false` will be omitted.
+- **Client Side Rendering**: props that match a property on the Custom Element instance will be assigned as properties, otherwise they will be assigned as attributes.
+
+Thanks to [Joey Arhar](https://github.com/josepharhar) for driving the design and implementation of Custom Element support in React.
+
+
+#### How to upgrade {/*how-to-upgrade*/}
+See the [React 19 Upgrade Guide](/blog/2024/04/25/react-19-upgrade-guide) for step-by-step instructions and a full list of breaking and notable changes.
+
+_Note: this post was originally published 04/25/2024 and has been updated to 12/05/2024 with the stable release._
\ No newline at end of file
diff --git a/src/content/blog/index.md b/src/content/blog/index.md
index fc8a2969b..cc50b83c0 100644
--- a/src/content/blog/index.md
+++ b/src/content/blog/index.md
@@ -10,6 +10,36 @@ This blog is the official source for the updates from the React team. Anything i
 
 <div className="sm:-mx-5 flex flex-col gap-5 mt-12">
 
+<BlogCard title="React v19 " date="December 5, 2024" url="/blog/2024/12/05/react-19">
+
+In the React 19 Upgrade Guide, we shared step-by-step instructions for upgrading your app to React 19. In this post, we'll give an overview of the new features in React 19, and how you can adopt them ...
+
+</BlogCard>
+
+<BlogCard title="React Compiler Beta Release" date="October 21, 2024" url="/blog/2024/10/21/react-compiler-beta-release">
+
+We announced an experimental release of React Compiler at React Conf 2024. We've made a lot of progress since then, and in this post we want to share what's next for React Compiler ...
+
+</BlogCard>
+
+<BlogCard title="React Conf 2024 Recap" date="May 22, 2024" url="/blog/2024/05/22/react-conf-2024-recap">
+
+Last week we hosted React Conf 2024, a two-day conference in Henderson, Nevada where 700+ attendees gathered in-person to discuss the latest in UI engineering. This was our first in-person conference since 2019, and we were thrilled to be able to bring the community together again ...
+
+</BlogCard>
+
+<BlogCard title="React 19 Upgrade Guide" date="April 25, 2024" url="/blog/2024/04/25/react-19-upgrade-guide">
+
+The improvements added to React 19 require some breaking changes, but we've worked to make the upgrade as smooth as possible, and we don't expect the changes to impact most apps. In this post, we will guide you through the steps for upgrading libraries to React 19 ...
+
+</BlogCard>
+
+<BlogCard title="React Labs: What We've Been Working On – February 2024" date="February 15, 2024" url="/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024">
+
+In React Labs posts, we write about projects in active research and development. Since our last update, we've made significant progress on React Compiler, new features, and React 19, and we'd like to share what we learned.
+
+</BlogCard>
+
 <BlogCard title="React Canaries: Incremental Feature Rollout Outside Meta" date="May 3, 2023" url="/blog/2023/05/03/react-canaries">
 
 Traditionally, new React features used to only be available at Meta first, and land in the open source releases later. We'd like to offer the React community an option to adopt individual new features as soon as their design is close to final--similar to how Meta uses React internally. We are introducing a new officially supported Canary release channel. It lets curated setups like frameworks decouple adoption of individual React features from the React release schedule.
diff --git a/src/content/community/acknowledgements.md b/src/content/community/acknowledgements.md
index 0eb00bf6f..760076d83 100644
--- a/src/content/community/acknowledgements.md
+++ b/src/content/community/acknowledgements.md
@@ -4,7 +4,7 @@ title: Acknowledgements
 
 <Intro>
 
-React was originally created by [Jordan Walke.](https://github.com/jordwalke) Today, React has a [dedicated full-time team working on it](/community/team), as well as over a thousand [open source contributors.](https://github.com/facebook/react/blob/main/AUTHORS)
+React was originally created by [Jordan Walke.](https://github.com/jordwalke) Today, React has a [dedicated full-time team working on it](/community/team), as well as over a thousand [open source contributors.](https://github.com/facebook/react/graphs/contributors)
 
 </Intro>
 
@@ -16,6 +16,7 @@ We'd like to recognize a few people who have made significant contributions to R
 * [Andreas Svensson](https://github.com/syranide)
 * [Alex Krolick](https://github.com/alexkrolick)
 * [Alexey Pyltsyn](https://github.com/lex111)
+* [Andrey Lunyov](https://github.com/alunyov)
 * [Brandon Dail](https://github.com/aweary)
 * [Brian Vaughn](https://github.com/bvaughn)
 * [Caleb Meredith](https://github.com/calebmer)
@@ -24,6 +25,7 @@ We'd like to recognize a few people who have made significant contributions to R
 * [Christoph Nakazawa](https://github.com/cpojer)
 * [Christopher Chedeau](https://github.com/vjeux)
 * [Clement Hoang](https://github.com/clemmy)
+* [Dave McCabe](https://github.com/davidmccabe)
 * [Dominic Gannaway](https://github.com/trueadm)
 * [Flarnie Marchan](https://github.com/flarnie)
 * [Jason Quense](https://github.com/jquense)
@@ -33,8 +35,11 @@ We'd like to recognize a few people who have made significant contributions to R
 * [Josh Duck](https://github.com/joshduck)
 * [Joe Critchley](https://github.com/joecritch)
 * [Jeff Morrison](https://github.com/jeffmo)
+* [Luna Ruan](https://github.com/lunaruan)
+* [Kathryn Middleton](https://github.com/kmiddleton14)
 * [Keyan Zhang](https://github.com/keyz)
 * [Marco Salazar](https://github.com/salazarm)
+* [Mengdi Chen](https://github.com/mondaychen)
 * [Nat Alison](https://github.com/tesseralis)
 * [Nathan Hunzaker](https://github.com/nhunzaker)
 * [Nicolas Gallagher](https://github.com/necolas)
@@ -43,9 +48,10 @@ We'd like to recognize a few people who have made significant contributions to R
 * [Philipp Spiess](https://github.com/philipp-spiess)
 * [Rachel Nabors](https://github.com/rachelnabors)
 * [Robert Zhang](https://github.com/robertzhidealx)
+* [Samuel Susla](https://github.com/sammy-SC)
 * [Sander Spies](https://github.com/sanderspies)
 * [Sasha Aickin](https://github.com/aickin)
-* [Seth Webster](https://github.com/sethwebster)
+* [Sean Keegan](https://github.com/seanryankeegan)
 * [Sophia Shoemaker](https://github.com/mrscobbler)
 * [Sunil Pai](https://github.com/threepointone)
 * [Tim Yung](https://github.com/yungsters)
@@ -53,7 +59,7 @@ We'd like to recognize a few people who have made significant contributions to R
 
 This list is not exhaustive.
 
-We'd like to give special thanks to [Tom Occhino](https://github.com/tomocchino) and [Adam Wolff](https://github.com/wolffiex) for their guidance and support over the years. We are also thankful to all the volunteers who [translated React into other languages.](https://translations.reactjs.org/)
+We'd like to give special thanks to [Tom Occhino](https://github.com/tomocchino) and [Adam Wolff](https://github.com/wolffiex) for their guidance and support over the years. We are also thankful to all the volunteers who [translated React into other languages.](https://translations.react.dev/)
 
 ## Additional Thanks {/*additional-thanks*/}
 
diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index 974e4a825..aaa761218 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -10,38 +10,192 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
 
 ## Upcoming Conferences {/*upcoming-conferences*/}
 
-### React Rally 2023 🐙 {/*react-rally-2023*/}
-August 17 & 18, 2023. Salt Lake City, UT, USA
+### React Universe Conf 2024 {/*react-universe-conf-2024*/}
+September 5-6, 2024. Wrocław, Poland.
 
-[Website](https://www.reactrally.com/) - [Twitter](https://twitter.com/ReactRally) - [Instagram](https://www.instagram.com/reactrally/)
+[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/)
 
-### React Native EU 2023 {/*react-native-eu-2023*/}
-September 7 & 8, 2023. Wrocław, Poland
+### React Alicante 2024 {/*react-alicante-2024*/}
+September 19-21, 2024. Alicante, Spain.
 
-[Website](https://react-native.eu) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu)
+[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/ReactAlicante) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w)
 
+### RenderCon Kenya 2024 {/*rendercon-kenya-2024*/}
+October 04 - 05, 2024. Nairobi, Kenya
 
-### React India 2023 {/*react-india-2023*/}
-October 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - remote day
+[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA)
+
+### React India 2024 {/*react-india-2024*/}
+October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - 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)
 
-### React Advanced 2023 {/*react-advanced-2023*/}
-October 20 & 23, 2023. In-person in London, UK + remote first interactivity (hybrid event)
+### React Brussels 2024 {/*react-brussels-2024*/}
+October 18, 2024. In-person in Brussels, Belgium (hybrid event)
 
-[Website](https://www.reactadvanced.com/) - [Twitter](https://twitter.com/ReactAdvanced) - [Facebook](https://www.facebook.com/ReactAdvanced) - [Videos](https://portal.gitnation.org/events/react-advanced-conference-2023)
+[Website](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact)
 
-### React Summit US 2023 {/*react-summit-us-2023*/}
-November 13 & 15, 2023. In-person in New York, US + remote first interactivity (hybrid event)
+### reactjsday 2024 {/*reactjsday-2024*/}
+October 25, 2024. In-person in Verona, Italy + online (hybrid event)
 
-[Website](https://reactsummit.us) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://portal.gitnation.org/events/react-summit-us-2023)
+[Website](https://2024.reactjsday.it/) - [Twitter](https://x.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp)
+
+### React Advanced London 2024 {/*react-advanced-london-2024*/}
+October 25 & 28, 2024. In-person in London, UK + online (hybrid event)
+
+[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced)
+
+### React Native London Conf 2024 {/*react-native-london-2024*/}
+November 14 & 15, 2024. In-person in London, UK
+
+[Website](https://reactnativelondon.co.uk/) - [Twitter](https://x.com/RNLConf)
+
+### React Summit US 2024 {/*react-summit-us-2024*/}
+November 19 & 22, 2024. In-person in New York, USA + online (hybrid event)
+
+[Website](https://reactsummit.us/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/)
+
+### React Africa 2024 {/*react-africa-2024*/}
+November 29, 2024. In-person in Casablanca, Morocco (hybrid event)
+
+[Website](https://react-africa.com/) - [Twitter](https://x.com/BeJS_)
+
+### React Day Berlin 2024 {/*react-day-berlin-2024*/}
+December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event)
+
+[Website](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin)
+
+## Past Conferences {/*past-conferences*/}
+
+### React Rally 2024 🐙 {/*react-rally-2024*/}
+August 12-13, 2024. Park City, UT, USA
+
+[Website](https://reactrally.com) - [Twitter](https://twitter.com/ReactRally) - [YouTube](https://www.youtube.com/channel/UCXBhQ05nu3L1abBUGeQ0ahw)
+
+### The Geek Conf 2024 {/*the-geek-conf-2024*/}
+July 25, 2024. In-person in Berlin, Germany + remote (hybrid event)
+
+[Website](https://thegeekconf.com) - [Twitter](https://twitter.com/thegeekconf)
+
+### Chain React 2024 {/*chain-react-2024*/}
+July 17-19, 2024. In-person in Portland, OR, USA
+
+[Website](https://chainreactconf.com) - [Twitter](https://twitter.com/ChainReactConf)
+
+### React Nexus 2024 {/*react-nexus-2024*/}
+July 04 & 05, 2024. 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 Summit 2024 {/*react-summit-2024*/}
+June 14 & 18, 2024. In-person in Amsterdam, Netherlands + remote (hybrid event)
+
+[Website](https://reactsummit.com/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/)
+
+### React Norway 2024 {/*react-norway-2024*/}
+June 14, 2024. In-person at Farris Bad Hotel in Larvik, Norway and online (hybrid event).
+
+[Website](https://reactnorway.com/) - [Twitter](https://twitter.com/ReactNorway)
+
+### Render(ATL) 2024 🍑 {/*renderatl-2024-*/}
+June 12 - June 14, 2024. 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#/)
+
+### Frontend Nation 2024 {/*frontend-nation-2024*/}
+June 4 - 7, 2024. Online
+
+[Website](https://frontendnation.com/) - [Twitter](https://twitter.com/frontendnation)
+
+### App.js Conf 2024 {/*appjs-conf-2024*/}
+May 22 - 24, 2024. In-person in Kraków, Poland + remote
+
+[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
+
+### React Conf 2024 {/*react-conf-2024*/}
+May 15 - 16, 2024. In-person in Henderson, NV, USA + remote
+
+[Website](https://conf.react.dev) - [Twitter](https://twitter.com/reactjs)
+
+### React Native Connection 2024 {/*react-native-connection-2024*/}
+April 23, 2024. In-person in Paris, France 
+
+[Website](https://reactnativeconnection.io/) - [Twitter](https://twitter.com/ReactNativeConn)
+
+### React Miami 2024 {/*react-miami-2024*/}
+April 19 - 20, 2024. In-person in Miami, FL, USA
+
+[Website](https://reactmiami.com/) - [Twitter](https://twitter.com/ReactMiamiConf)
+
+### Epic Web Conf 2024 {/*epic-web-2024*/}
+April 10 - 11, 2024. In-person in Park City, UT, USA
+
+[Website](https://www.epicweb.dev/conf) - [YouTube](https://www.youtube.com/@EpicWebDev)
+
+### React Paris 2024 {/*react-paris-2024*/}
+March 22, 2024. In-person in Paris, France + Remote (hybrid)
+
+[Website](https://react.paris/) - [Twitter](https://twitter.com/BeJS_) - [LinkedIn](https://www.linkedin.com/events/7150816372074192900/comments/) - [Videos](https://www.youtube.com/playlist?list=PL53Z0yyYnpWhUzgvr2Nys3kZBBLcY0TA7)
 
 ### React Day Berlin 2023 {/*react-day-berlin-2023*/}
 December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity (hybrid event)
 
 [Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://portal.gitnation.org/events/react-day-berlin-2023)
 
-## Past Conferences {/*past-conferences*/}
+### React Summit US 2023 {/*react-summit-us-2023*/}
+November 13 & 15, 2023. In-person in New York, US + remote first interactivity (hybrid event)
+
+[Website](https://reactsummit.us) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://portal.gitnation.org/events/react-summit-us-2023)
+
+### reactjsday 2023 {/*reactjsday-2023*/}
+October 27th 2023. In-person in Verona, Italy and online (hybrid event)
+
+[Website](https://2023.reactjsday.it/) - [Twitter](https://twitter.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp)
+
+### React Advanced 2023 {/*react-advanced-2023*/}
+October 20 & 23, 2023. In-person in London, UK + remote first interactivity (hybrid event)
+
+[Website](https://www.reactadvanced.com/) - [Twitter](https://twitter.com/ReactAdvanced) - [Facebook](https://www.facebook.com/ReactAdvanced) - [Videos](https://portal.gitnation.org/events/react-advanced-conference-2023)
+
+### React Brussels 2023 {/*react-brussels-2023*/}
+October 13th 2023. In-person in Brussels, Belgium + Remote (hybrid)
+
+[Website](https://www.react.brussels/) - [Twitter](https://twitter.com/BrusselsReact) - [Videos](https://www.youtube.com/playlist?list=PL53Z0yyYnpWh85KeMomUoVz8_brrmh_aC) 
+
+### React India 2023 {/*react-india-2023*/}
+October 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - remote day
+
+[Website](https://www.reactindia.io) - [Twitter](https://x.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w)
+
+### RenderCon Kenya 2023 {/*rendercon-kenya-2023*/}
+September 29 - 30, 2023. Nairobi, Kenya
+
+[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA)
+
+### React Live 2023 {/*react-live-2023*/}
+September 29, 2023. Amsterdam, Netherlands
+
+[Website](https://reactlive.nl/)
+
+### React Alicante 2023 {/*react-alicante-2023*/}
+September 28 - 30, 2023. Alicante, Spain
+
+[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/reactalicante)
+
+### RedwoodJS Conference 2023 {/*redwoodjs-conference-2023*/}
+September 26 - 29, 2023. Grants Pass, Oregon + remote (hybrid event) 
+
+[Website](https://www.redwoodjsconf.com/) - [Twitter](https://twitter.com/redwoodjs)
+
+### 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 Rally 2023 🐙 {/*react-rally-2023*/}
+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 Nexus 2023 {/*react-nexus-2023*/}
 July 07 & 08, 2023. Bangalore, India (In-person event)
@@ -516,7 +670,7 @@ August 18 in Guangzhou, China
 
 [Website](https://react.w3ctech.com)
 
-### React Rally 2018{/*react-rally-2018*/}
+### React Rally 2018 {/*react-rally-2018*/}
 August 16-17 in Salt Lake City, Utah USA
 
 [Website](http://www.reactrally.com) - [Twitter](https://twitter.com/reactrally)
diff --git a/src/content/community/docs-contributors.md b/src/content/community/docs-contributors.md
index cbdbf7d7f..0f9d002d6 100644
--- a/src/content/community/docs-contributors.md
+++ b/src/content/community/docs-contributors.md
@@ -4,7 +4,7 @@ title: Docs Contributors
 
 <Intro>
 
-React documentation is written and maintained by the [React team](/community/team) and [external contributors.](https://github.com/reactjs/reactjs.org/graphs/contributors) On this page, we'd like to thank a few people who've made significant contributions to this site.
+React documentation is written and maintained by the [React team](/community/team) and [external contributors.](https://github.com/reactjs/react.dev/graphs/contributors) On this page, we'd like to thank a few people who've made significant contributions to this site.
 
 </Intro>
 
diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md
index 680fd323b..14097aa4d 100644
--- a/src/content/community/meetups.md
+++ b/src/content/community/meetups.md
@@ -30,15 +30,8 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 * [Belo Horizonte](https://www.meetup.com/reactbh/)
 * [Curitiba](https://www.meetup.com/pt-br/ReactJS-CWB/)
 * [Florianópolis](https://www.meetup.com/pt-br/ReactJS-Floripa/)
-* [Goiânia](https://www.meetup.com/pt-br/React-Goiania/)
 * [Joinville](https://www.meetup.com/pt-BR/React-Joinville/)
-* [Juiz de Fora](https://www.meetup.com/pt-br/React-Juiz-de-Fora/)
-* [Maringá](https://www.meetup.com/pt-BR/React-Maringa/)
-* [Porto Alegre](https://www.meetup.com/pt-BR/React-Porto-Alegre/)
-* [Rio de Janeiro](https://www.meetup.com/pt-BR/React-Rio-de-Janeiro/)
-* [Salvador](https://www.meetup.com/pt-BR/ReactSSA)
 * [São Paulo](https://www.meetup.com/pt-BR/ReactJS-SP/)
-* [Vila Velha](https://www.meetup.com/pt-BR/React-ES/)
 
 ## Bolivia {/*bolivia*/}
 * [Bolivia](https://www.meetup.com/ReactBolivia/)
@@ -48,33 +41,23 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 * [Montreal, QC - React Native](https://www.meetup.com/fr-FR/React-Native-MTL/)
 * [Vancouver, BC](https://www.meetup.com/ReactJS-Vancouver-Meetup/)
 * [Ottawa, ON](https://www.meetup.com/Ottawa-ReactJS-Meetup/)
+* [Saskatoon, SK](https://www.meetup.com/saskatoon-react-meetup/)
 * [Toronto, ON](https://www.meetup.com/Toronto-React-Native/events/)
 
-## Chile {/*chile*/}
-* [Santiago](https://www.meetup.com/es-ES/react-santiago/)
-
-## China {/*china*/}
-* [Beijing](https://www.meetup.com/Beijing-ReactJS-Meetup/)
-
 ## Colombia {/*colombia*/}
-* [Bogotá](https://www.meetup.com/meetup-group-iHIeHykY/)
 * [Medellin](https://www.meetup.com/React-Medellin/)
-* [Cali](https://www.meetup.com/reactcali/)
 
 ## Denmark {/*denmark*/}
 * [Aalborg](https://www.meetup.com/Aalborg-React-React-Native-Meetup/)
 * [Aarhus](https://www.meetup.com/Aarhus-ReactJS-Meetup/)
 
-## Egypt {/*egypt*/}
-* [Cairo](https://www.meetup.com/react-cairo/)
-
 ## England (UK) {/*england-uk*/}
 * [Manchester](https://www.meetup.com/Manchester-React-User-Group/)
 * [React.JS Girls London](https://www.meetup.com/ReactJS-Girls-London/)
-* [React London : Bring Your Own Project](https://www.meetup.com/React-London-Bring-Your-Own-Project/)
+* [React Advanced London](https://guild.host/react-advanced-london)
+* [React Native London](https://guild.host/RNLDN)
 
 ## France {/*france*/}
-* [Nantes](https://www.meetup.com/React-Nantes/)
 * [Lille](https://www.meetup.com/ReactBeerLille/)
 * [Paris](https://www.meetup.com/ReactJS-Paris/)
 
@@ -85,28 +68,26 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 * [Karlsruhe](https://www.meetup.com/react_ka/)
 * [Kiel](https://www.meetup.com/Kiel-React-Native-Meetup/)
 * [Munich](https://www.meetup.com/ReactJS-Meetup-Munich/)
-* [React Berlin](https://www.meetup.com/React-Open-Source/)
+* [React Berlin](https://guild.host/react-berlin)
 
 ## Greece {/*greece*/}
 * [Athens](https://www.meetup.com/React-To-React-Athens-MeetUp/)
 * [Thessaloniki](https://www.meetup.com/Thessaloniki-ReactJS-Meetup/)
 
-## Hungary {/*hungary*/}
-* [Budapest](https://www.meetup.com/React-Budapest/)
-
 ## India {/*india*/}
 * [Ahmedabad](https://www.meetup.com/react-ahmedabad/)
 * [Bangalore (React)](https://www.meetup.com/ReactJS-Bangalore/)
 * [Bangalore (React Native)](https://www.meetup.com/React-Native-Bangalore-Meetup)
-* [Chennai](https://www.meetup.com/React-Chennai/)
+* [Chennai](https://www.linkedin.com/company/chennaireact)
 * [Delhi NCR](https://www.meetup.com/React-Delhi-NCR/)
+* [Mumbai](https://reactmumbai.dev)
 * [Pune](https://www.meetup.com/ReactJS-and-Friends/)
 
 ## Indonesia {/*indonesia*/}
 * [Indonesia](https://www.meetup.com/reactindonesia/)
 
 ## Ireland {/*ireland*/}
-* [Dublin](https://www.meetup.com/ReactJS-Dublin/)
+* [Dublin](https://guild.host/reactjs-dublin)
 
 ## Israel {/*israel*/}
 * [Tel Aviv](https://www.meetup.com/ReactJS-Israel/)
@@ -114,6 +95,9 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 ## Italy {/*italy*/}
 * [Milan](https://www.meetup.com/React-JS-Milano/)
 
+## Japan {/*japan*/}
+* [Osaka](https://react-osaka.connpass.com/)
+
 ## Kenya {/*kenya*/}
 * [Nairobi - Reactdevske](https://kommunity.com/reactjs-developer-community-kenya-reactdevske)
 
@@ -122,7 +106,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 * [Penang](https://www.facebook.com/groups/reactpenang/)
 
 ## Netherlands {/*netherlands*/}
-* [Amsterdam](https://www.meetup.com/React-Amsterdam/)
+* [Amsterdam](https://guild.host/react-amsterdam)
 
 ## New Zealand {/*new-zealand*/}
 * [Wellington](https://www.meetup.com/React-Wellington/)
@@ -135,12 +119,6 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 * [Karachi](https://www.facebook.com/groups/902678696597634/)
 * [Lahore](https://www.facebook.com/groups/ReactjsLahore/)
 
-## Panama {/*panama*/}
-* [Panama](https://www.meetup.com/React-Panama/)
-
-## Peru {/*peru*/}
-* [Lima](https://www.meetup.com/ReactJS-Peru/)
-
 ## Philippines {/*philippines*/}
 * [Manila](https://www.meetup.com/reactjs-developers-manila/)
 * [Manila - ReactJS PH](https://www.meetup.com/ReactJS-Philippines/)
@@ -157,7 +135,6 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 
 ## Spain {/*spain*/}
 * [Barcelona](https://www.meetup.com/ReactJS-Barcelona/)
-* [Canarias](https://www.meetup.com/React-Canarias/)
 
 ## Sweden {/*sweden*/}
 * [Goteborg](https://www.meetup.com/ReactJS-Goteborg/)
@@ -173,7 +150,6 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 * [Kyiv](https://www.meetup.com/Kyiv-ReactJS-Meetup)
 
 ## US {/*us*/}
-* [Ann Arbor, MI - ReactJS](https://www.meetup.com/AnnArbor-jsx/)
 * [Atlanta, GA - ReactJS](https://www.meetup.com/React-ATL/)
 * [Austin, TX - ReactJS](https://www.meetup.com/ReactJS-Austin-Meetup/)
 * [Boston, MA - ReactJS](https://www.meetup.com/ReactJS-Boston/)
@@ -184,7 +160,6 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 * [Cleveland, OH - ReactJS](https://www.meetup.com/Cleveland-React/)
 * [Columbus, OH - ReactJS](https://www.meetup.com/ReactJS-Columbus-meetup/)
 * [Dallas, TX - ReactJS](https://www.meetup.com/ReactDallas/)
-* [Dallas, TX - [Remote] React JS](https://www.meetup.com/React-JS-Group/)
 * [Detroit, MI - Detroit React User Group](https://www.meetup.com/Detroit-React-User-Group/)
 * [Indianapolis, IN - React.Indy](https://www.meetup.com/React-Indy)
 * [Irvine, CA - ReactJS](https://www.meetup.com/ReactJS-OC/)
@@ -194,26 +169,19 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 * [Los Angeles, CA - ReactJS](https://www.meetup.com/socal-react/)
 * [Los Angeles, CA - React Native](https://www.meetup.com/React-Native-Los-Angeles/)
 * [Miami, FL - ReactJS](https://www.meetup.com/React-Miami/)
-* [Nashville, TN - ReactJS](https://www.meetup.com/NashReact-Meetup/)
 * [New York, NY - ReactJS](https://www.meetup.com/NYC-Javascript-React-Group/)
 * [New York, NY - React Ladies](https://www.meetup.com/React-Ladies/)
 * [New York, NY - React Native](https://www.meetup.com/React-Native-NYC/)
 * [New York, NY - useReactNYC](https://www.meetup.com/useReactNYC/)
-* [Omaha, NE - ReactJS/React Native](https://www.meetup.com/omaha-react-meetup-group/)
+* [New York, NY - React.NYC](https://guild.host/react-nyc)
 * [Palo Alto, CA - React Native](https://www.meetup.com/React-Native-Silicon-Valley/)
-* [Philadelphia, PA - ReactJS](https://www.meetup.com/Reactadelphia/)
 * [Phoenix, AZ - ReactJS](https://www.meetup.com/ReactJS-Phoenix/)
-* [Pittsburgh, PA - ReactJS/React Native](https://www.meetup.com/ReactPgh/)
-* [Portland, OR - ReactJS](https://www.meetup.com/Portland-ReactJS/)
 * [Provo, UT - ReactJS](https://www.meetup.com/ReactJS-Utah/)
-* [Sacramento, CA - ReactJS](https://www.meetup.com/Sacramento-ReactJS-Meetup/)
 * [San Diego, CA - San Diego JS](https://www.meetup.com/sandiegojs/)
 * [San Francisco - Real World React](https://www.meetup.com/Real-World-React)
 * [San Francisco - ReactJS](https://www.meetup.com/ReactJS-San-Francisco/)
 * [San Francisco, CA - React Native](https://www.meetup.com/React-Native-San-Francisco/)
-* [San Ramon, CA - TriValley Coders](https://www.meetup.com/trivalleycoders/)
 * [Santa Monica, CA - ReactJS](https://www.meetup.com/Los-Angeles-ReactJS-User-Group/)
-* [Seattle, WA - React Native](https://www.meetup.com/Seattle-React-Native-Meetup/)
 * [Seattle, WA - ReactJS](https://www.meetup.com/seattle-react-js/)
 * [Tampa, FL - ReactJS](https://www.meetup.com/ReactJS-Tampa-Bay/)
 * [Tucson, AZ - ReactJS](https://www.meetup.com/Tucson-ReactJS-Meetup/)
diff --git a/src/content/community/team.md b/src/content/community/team.md
index f61dacf1a..b11925407 100644
--- a/src/content/community/team.md
+++ b/src/content/community/team.md
@@ -14,95 +14,79 @@ The React Core team members work full time on the core component APIs, the engin
 
 Current members of the React team are listed in alphabetical order below.
 
-<TeamMember name="Andrew Clark" permalink="andrew-clark" photo="/images/team/acdlite.jpg" github="acdlite" twitter="acdlite" title="Engineer at Vercel">
+<TeamMember name="Andrew Clark" permalink="andrew-clark" photo="/images/team/acdlite.jpg" github="acdlite" twitter="acdlite" threads="acdlite" title="Engineer at Vercel">
     Andrew got started with web development by making sites with WordPress, and eventually tricked himself into doing JavaScript. His favorite pastime is karaoke. Andrew is either a Disney villain or a Disney princess, depending on the day.
 </TeamMember>
 
-<TeamMember name="Andrey Lunyov" permalink="andrey-lunyov" photo="/images/team/andrey-lunyov.jpg" github="alunyov" twitter="alunyov" title="Engineer at Meta">
-    Andrey started his career as a designer and then gradually transitioned into web development. After joining the React Data team at Meta he worked on adding an incremental JavaScript compiler to Relay, and then later on, worked on removing the same compiler from Relay. Outside of work, Andrey likes to play music and engage in various sports.
-</TeamMember>
-
-<TeamMember name="Dan Abramov" permalink="dan-abramov" photo="/images/team/gaearon.jpg" github="gaearon" twitter="dan_abramov" title="Engineer at Meta">
+<TeamMember name="Dan Abramov" permalink="dan-abramov" photo="/images/team/gaearon.jpg" github="gaearon" bsky="danabra.mov" title="Independent Engineer">
     Dan got into programming after he accidentally discovered Visual Basic inside Microsoft PowerPoint. He has found his true calling in turning [Sebastian](#sebastian-markbåge)'s tweets into long-form blog posts. Dan occasionally wins at Fortnite by hiding in a bush until the game ends.
 </TeamMember>
 
-<TeamMember name="Dave McCabe" permalink="dave-mccabe" photo="/images/team/dave-mccabe.jpg" github="davidmccabe" twitter="mcc_abe" title="Engineer at Meta">
-    An engineer by trade and outdoorsman at heart, David has long been an innovator in the field of programming-while-sunbathing. Besides surprising his colleagues with unique outdoor video-call backgrounds, he enjoys playing guitar (in sunlit meadows, of course) and martial arts (still indoors, gotta work on that). 
+<TeamMember name="Eli White" permalink="eli-white" photo="/images/team/eli-white.jpg" github="TheSavior" twitter="Eli_White" threads="elicwhite" title="Engineering Manager at Meta">
+    Eli got into programming after he got suspended from middle school for hacking. He has been working on React and React Native since 2017. He enjoys eating treats, especially ice cream and apple pie. You can find Eli trying quirky activities like parkour, indoor skydiving, and aerial silks.
 </TeamMember>
 
-<TeamMember name="Eli White" permalink="eli-white" photo="/images/team/eli-white.jpg" github="TheSavior" twitter="Eli_White" title="Engineering Manager at Meta">
-    Eli got into programming after he got suspended from middle school for hacking. He has been working on React and React Native since 2017. He enjoys eating treats, especially ice cream and apple pie. You can find Eli trying quirky activities like parkour, indoor skydiving, and aerial silks.
+<TeamMember name="Jack Pope" permalink="jack-pope" photo="/images/team/jack-pope.jpg" github="jackpope" personal="jackpope.me" title="Engineer at Meta">
+    Shortly after being introduced to AutoHotkey, Jack had written scripts to automate everything he could think of. When reaching limitations there, he dove headfirst into web app development and hasn't looked back. Most recently, Jack worked on the web platform at Instagram before moving to React. His favorite programming language is JSX.
 </TeamMember>
 
-<TeamMember name="Jason Bonta" permalink="jason-bonta" photo="/images/team/jasonbonta.jpg" title="Engineering Manager at Meta">
-    Jason likes having large volumes of Amazon packages delivered to the office so that he can build forts. Despite literally walling himself off from his team at times and not understanding how for-of loops work, we appreciate him for the unique qualities he brings to his work.
+<TeamMember name="Jason Bonta" permalink="jason-bonta" photo="/images/team/jasonbonta.jpg" threads="someextent" title="Engineering Manager at Meta">
+    Jason abandoned embedded C for a career in front-end engineering and never looked back. Armed with esoteric CSS knowledge and a passion for beautiful UI, Jason joined Facebook in 2010, where he now feels privileged to have seen JavaScript development come of age. Though he may not understand how `for...of` loops work, he loves getting to work with brilliant people on projects that enable amazing UX.
 </TeamMember>
 
-<TeamMember name="Joe Savona" permalink="joe-savona" photo="/images/team/joe.jpg" github="josephsavona" twitter="en_JS" title="Engineer at Meta">
+<TeamMember name="Joe Savona" permalink="joe-savona" photo="/images/team/joe.jpg" github="josephsavona" twitter="en_JS" threads="joesavona" title="Engineer at Meta">
     Joe was planning to major in math and philosophy but got into computer science after writing physics simulations in Matlab. Prior to React, he worked on Relay, RSocket.js, and the Skip programming language. While he’s not building some sort of reactive system he enjoys running, studying Japanese, and spending time with his family.
 </TeamMember>
 
-<TeamMember name="Josh Story" permalink="josh-story" photo="/images/team/josh.jpg" github="gnoff" twitter="joshcstory" title="Engineer at Vercel">
+<TeamMember name="Josh Story" permalink="josh-story" photo="/images/team/josh.jpg" github="gnoff" bsky="storyhb.com" title="Engineer at Vercel">
     Josh majored in Mathematics and discovered programming while in college. His first professional developer job was to program insurance rate calculations in Microsoft Excel, the paragon of Reactive Programming which must be why he now works on React. In between that time Josh has been an IC, Manager, and Executive at a few startups. outside of work he likes to push his limits with cooking.
 </TeamMember>
 
-<TeamMember name="Kathryn Middleton" permalink="kathryn-middleton" photo="/images/team/kathryn-middleton.jpg" github="kmiddleton14" twitter="kmiddleton14" title="Engineering Manager at Meta">
-    Kathryn initially discovered web development when she wanted to make her myspace page look cool. She ended up majoring in Computer Science, and quickly became a huge fan of React building features on the Instagram.com team. Outside of work she loves playing pingpong, teaching spin classes, and going plant shopping.
-</TeamMember>
-
-<TeamMember name="Lauren Tan" permalink="lauren-tan" photo="/images/team/lauren.jpg" github="poteto" twitter="potetotes" personal="no.lol" title="Engineer at Meta">
-    Lauren’s programming career peaked when she first discovered the `<marquee>` tag. She’s been chasing that high ever since. When she’s not adding bugs into React, she enjoys dropping cheeky memes in chat, and playing all too many video games with her partner, and her dog Zelda.
+<TeamMember name="Lauren Tan" permalink="lauren-tan" photo="/images/team/lauren.jpg" github="poteto" twitter="potetotes" threads="potetotes" bsky="no.lol" title="Engineer at Meta">
+    Lauren's programming career peaked when she first discovered the `<marquee>` tag. She’s been chasing that high ever since. She studied Finance instead of CS in college, so she learned to code using Excel instead of Java. Lauren enjoys dropping cheeky memes in chat, playing video games with her partner, and petting her dog Zelda.
 </TeamMember>
 
-<TeamMember name="Luna Ruan" permalink="luna-ruan" photo="/images/team/lunaruan.jpg" github="lunaruan" twitter="lunaruan" title="Independent Engineer">
-    Luna learned programming because she thought it meant creating video games. Instead, she ended up working on the Pinterest web app, and now on React itself. Luna doesn't want to make video games anymore, but she plans to do creative writing if she ever gets bored.
+<TeamMember name="Luna Wei" permalink="luna-wei" photo="/images/team/luna-wei.jpg" github="lunaleaps" twitter="lunaleaps" threads="lunaleaps" title="Engineer at Meta">
+    Luna first learnt the fundamentals of python at the age of 6 from her father. Since then, she has been unstoppable. Luna aspires to be a gen z, and the road to success is paved with environmental advocacy, urban gardening and lots of quality time with her Voo-Doo’d (as pictured).
 </TeamMember>
 
-<TeamMember name="Luna Wei" permalink="luna-wei" photo="/images/team/luna-wei.jpg" github="lunaleaps" twitter="lunaleaps" title="Engineer at Meta">
-    Luna first learnt the fundamentals of python at the age of 6 from her father. Since then, she has been unstoppable. Luna aspires to be a gen z, and the road to success is paved with environmental advocacy, urban gardening and lots of quality time with her Voo-Doo’d (as pictured). 
-</TeamMember>
-
-<TeamMember name="Matt Carroll" permalink="matt-carroll" photo="/images/team/matt-carroll.png" github="mattcarrollcode" twitter="mattcarrollcode" title="Developer Advocate at Meta">
+<TeamMember name="Matt Carroll" permalink="matt-carroll" photo="/images/team/matt-carroll.png" github="mattcarrollcode" twitter="mattcarrollcode" threads="mattcarrollcode" title="Developer Advocate at Meta">
     Matt stumbled into coding, and since then, has become enamored with creating things in communities that can’t be created alone. Prior to React, he worked on YouTube, the Google Assistant, Fuchsia, and Google Cloud AI and Evernote. When he's not trying to make better developer tools he enjoys the mountains, jazz, and spending time with his family.
 </TeamMember>
 
-<TeamMember name="Mengdi Chen" permalink="mengdi-chen" photo="/images/team/mengdi-chen.jpg" github="mondaychen" twitter="mengdi_en" title="Engineer at Meta">
-    While working on his Digital Arts degree Mengdi was conceited about his front-end skills because his CSS worked perfectly even on IE6. But soon React opened a new door of programming for him, and he has been dreaming of joining the React team ever since. Outside of work, he is usually busy chasing his two kids around or collecting strange recipes.
+<TeamMember name="Mofei Zhang" permalink="mofei-zhang" photo="/images/team/mofei-zhang.png" github="mofeiZ" threads="z_mofei" title="Engineer at Meta">
+    Mofei started programming when she realized it can help her cheat in video games. She focused on operating systems in undergrad / grad school, but now finds herself happily tinkering on React. Outside of work, she enjoys debugging bouldering problems and planning her next backpacking trip(s).
 </TeamMember>
 
-<TeamMember name="Mofei Zhang" permalink="mofei-zhang" photo="/images/team/mofei-zhang.png" github="mofeiZ" title="Engineer at Meta">
-    Mofei started programming when she realized it can help her cheat in video games. She focused on operating systems in undergrad / grad school, but now finds herself happily tinkering on React. Outside of work, she enjoys debugging bouldering problems and planning her next backpacking trip(s).
+<TeamMember name="Noah Lemen" permalink="noah-lemen" photo="/images/team/noahlemen.jpg" github="noahlemen" twitter="noahlemen" threads="noahlemen" personal="noahle.men" title="Engineer at Meta">
+    Noah’s interest in UI programming sparked during his education in music technology at NYU. At Meta, he's worked on internal tools, browsers, web performance, and is currently focused on React. Outside of work, Noah can be found tinkering with synthesizers or spending time with his cat.
 </TeamMember>
 
-<TeamMember name="Rick Hanlon" permalink="rick-hanlon" photo="/images/team/rickhanlonii.jpg" github="rickhanlonii" twitter="rickhanlonii" personal="rickhanlon.codes" title="Engineer at Meta">
+<TeamMember name="Rick Hanlon" permalink="rick-hanlon" photo="/images/team/rickhanlonii.jpg" github="rickhanlonii" twitter="rickhanlonii" threads="rickhanlonii" bsky="ricky.fm" title="Engineer at Meta">
     Ricky majored in theoretical math and somehow found himself on the React Native team for a couple years before joining the React team. When he's not programming you can find him snowboarding, biking, climbing, golfing, or closing GitHub issues that do not match the issue template.
 </TeamMember>
 
-<TeamMember name="Samuel Susla" permalink="samuel-susla" photo="/images/team/sam.jpg" github="sammy-SC" twitter="SamuelSusla" title="Engineer at Meta">
-    Samuel’s interest in programming started with the movie Matrix. He still has Matrix screen saver. Before working on React, he was focused on writing iOS apps. Outside of work, Samuel enjoys playing beach volleyball, squash, badminton and spending time with his family.
+<TeamMember name="Ruslan Lesiutin" permalink="ruslan-lesiutin" photo="/images/team/lesiutin.jpg" github="hoxyq" twitter="ruslanlesiutin" threads="lesiutin" title="Engineer at Meta">
+    Ruslan's introduction to UI programming started when he was a kid by manually editing HTML templates for his custom gaming forums. Somehow, he ended up majoring in Computer Science. He enjoys music, games, and memes. Mostly memes.
 </TeamMember>
 
-<TeamMember name="Sathya Gunasekaran " permalink="sathya-gunasekaran" photo="/images/team/sathya.jpg" github="gsathya" twitter="_gsathya" title="Engineer at Meta">
+<TeamMember name="Sathya Gunasekaran " permalink="sathya-gunasekaran" photo="/images/team/sathya.jpg" github="gsathya" twitter="_gsathya" threads="gsathya.03" title="Engineer at Meta">
     Sathya hated the Dragon Book in school but somehow ended up working on compilers all his career. When he's not compiling React components, he's either drinking coffee or eating yet another Dosa.
 </TeamMember>
 
-<TeamMember name="Sean Keegan" permalink="sean-keegan" photo="/images/team/sean-keegan.jpg" github="seanryankeegan" twitter="DevRelSean" title="Developer Advocate at Meta">
-    After a first career as a math teacher, Sean remembered that one intro to comp sci class he had to take as a prereq and thought “that was kind of fun!”. One coding bootcamp and several tech jobs later, Sean discovered developer advocacy and hasn’t looked back. Outside of work, Sean enjoys ultimate frisbee, video games, and researching (but rarely implementing) better ways to care for his houseplants.
-</TeamMember>
-
-<TeamMember name="Sebastian Markbåge" permalink="sebastian-markbåge" photo="/images/team/sebmarkbage.jpg" github="sebmarkbage" twitter="sebmarkbage" title="Engineer at Vercel">
+<TeamMember name="Sebastian Markbåge" permalink="sebastian-markbåge" photo="/images/team/sebmarkbage.jpg" github="sebmarkbage" twitter="sebmarkbage" threads="sebmarkbage" title="Engineer at Vercel">
     Sebastian majored in psychology. He's usually quiet. Even when he says something, it often doesn't make sense to the rest of us until a few months later. The correct way to pronounce his surname is "mark-boa-geh" but he settled for "mark-beige" out of pragmatism -- and that's how he approaches React.
 </TeamMember>
 
-<TeamMember name="Sebastian Silbermann" permalink="sebastian-silbermann" photo="/images/team/sebsilbermann.jpg" github="eps1lon" twitter="sebsilbermann" title="Independent Engineer">
+<TeamMember name="Sebastian Silbermann" permalink="sebastian-silbermann" photo="/images/team/sebsilbermann.jpg" github="eps1lon" twitter="sebsilbermann" threads="sebsilbermann" title="Engineer at Vercel">
     Sebastian learned programming to make the browser games he played during class more enjoyable. Eventually this lead to contributing to as much open source code as possible. Outside of coding he's busy making sure people don't confuse him with the other Sebastians and Zilberman of the React community.
 </TeamMember>
 
-<TeamMember name="Seth Webster" permalink="seth-webster" photo="/images/team/seth.jpg" github="sethwebster" twitter="sethwebster" personal="sethwebster.com" title="Engineering Manager at Meta">
+<TeamMember name="Seth Webster" permalink="seth-webster" photo="/images/team/seth.jpg" github="sethwebster" twitter="sethwebster" threads="sethwebster" personal="sethwebster.com" title="Engineering Manager at Meta">
     Seth started programming as a kid growing up in Tucson, AZ. After school, he was bitten by the music bug and was a touring musician for about 10 years before returning to *work*, starting with Intuit. In his spare time, he loves [taking pictures](https://www.sethwebster.com) and flying for animal rescues in the northeastern United States.
 </TeamMember>
 
-<TeamMember name="Sophie Alpert" permalink="sophie-alpert" photo="/images/team/sophiebits.jpg" github="sophiebits" twitter="sophiebits" personal="sophiebits.com" title="Independent Engineer">
+<TeamMember name="Sophie Alpert" permalink="sophie-alpert" photo="/images/team/sophiebits.jpg" github="sophiebits" twitter="sophiebits" threads="sophiebits" personal="sophiebits.com" title="Independent Engineer">
     Four days after React was released, Sophie rewrote the entirety of her then-current project to use it, which she now realizes was perhaps a bit reckless. After she became the project's #1 committer, she wondered why she wasn't getting paid by Facebook like everyone else was and joined the team officially to lead React through its adolescent years. Though she quit that job years ago, somehow she's still in the team's group chats and “providing value”.
 </TeamMember>
 
@@ -110,7 +94,7 @@ Current members of the React team are listed in alphabetical order below.
     Tianyu’s interest in computers started as a kid because he loves video games. So he majored in computer science and still plays childish games like League of Legends. When he is not in front of a computer, he enjoys playing with his two kittens, hiking and kayaking.
 </TeamMember>
 
-<TeamMember name="Yuzhi Zheng" permalink="yuzhi-zheng" photo="/images/team/yuzhi.jpg" github="yuzhi" twitter="yuzhiz" title="Engineering Manager at Meta">
+<TeamMember name="Yuzhi Zheng" permalink="yuzhi-zheng" photo="/images/team/yuzhi.jpg" github="yuzhi" twitter="yuzhiz" threads="yuzhiz" title="Engineering Manager at Meta">
     Yuzhi studied Computer Science in school. She liked the instant gratification of seeing code come to life without having to physically be in a laboratory. Now she’s a manager in the React org. Before management, she used to work on the Relay data fetching framework. In her spare time, Yuzhi enjoys optimizing her life via gardening and home improvement projects.
 </TeamMember>
 
diff --git a/src/content/community/translations.md b/src/content/community/translations.md
new file mode 100644
index 000000000..4c07e6a1e
--- /dev/null
+++ b/src/content/community/translations.md
@@ -0,0 +1,35 @@
+---
+title: Translations
+---
+
+<Intro>
+
+React docs are translated by the global community into many languages all over the world.
+
+</Intro>
+
+## Source site {/*main-site*/}
+
+All translations are provided from the canonical source docs:
+
+- [English](https://react.dev/) &mdash; [Contribute](https://github.com/reactjs/react.dev/)
+
+## Full translations {/*full-translations*/}
+
+{/* If you are a language maintainer and want to add your language here, finish the "Core" translations and edit `deployedTranslations` under `src/utils`. */}
+
+<LanguageList progress="complete" />
+
+## In-progress translations {/*in-progress-translations*/}
+
+For the progress of each translation, see: [Is React Translated Yet?](https://translations.react.dev/)
+
+<LanguageList progress="in-progress" />
+
+## How to contribute {/*how-to-contribute*/}
+
+You can contribute to the translation efforts! 
+
+The community conducts the translation work for the React docs on each language-specific fork of react.dev. Typical translation work involves directly translating a Markdown file and creating a pull request. Click the "contribute" link above to the GitHub repository for your language, and follow the instructions there to help with the translation effort.
+
+If you want to start a new translation for your language, visit: [translations.react.dev](https://github.com/reactjs/translations.react.dev)
\ No newline at end of file
diff --git a/src/content/community/versioning-policy.md b/src/content/community/versioning-policy.md
index 68d5b8eb1..7aa71efd2 100644
--- a/src/content/community/versioning-policy.md
+++ b/src/content/community/versioning-policy.md
@@ -8,6 +8,8 @@ All stable builds of React go through a high level of testing and follow semanti
 
 </Intro>
 
+For a list of previous releases, see the [Versions](/versions) page.
+
 ## Stable releases {/*stable-releases*/}
 
 Stable React releases (also known as "Latest" release channel) follow [semantic versioning (semver)](https://semver.org/) principles.
@@ -46,7 +48,7 @@ In general, we *don't* bump the major version number for changes to:
 
 * **Development warnings.** Since these don't affect production behavior, we may add new warnings or modify existing warnings in between major versions. In fact, this is what allows us to reliably warn about upcoming breaking changes.
 * **APIs starting with `unstable_`.** These are provided as experimental features whose APIs we are not yet confident in. By releasing these with an `unstable_` prefix, we can iterate faster and get to a stable API sooner.
-* **Alpha and canary versions of React.** We provide alpha versions of React as a way to test new features early, but we need the flexibility to make changes based on what we learn in the alpha period. If you use these versions, note that APIs may change before the stable release.
+* **Alpha and Canary versions of React.** We provide alpha versions of React as a way to test new features early, but we need the flexibility to make changes based on what we learn in the alpha period. If you use these versions, note that APIs may change before the stable release.
 * **Undocumented APIs and internal data structures.** If you access internal property names like `__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED` or `__reactInternalInstance$uk43rzhitjg`, there is no warranty.  You are on your own.
 
 This policy is designed to be pragmatic: certainly, we don't want to cause headaches for you. If we bumped the major version for all of these changes, we would end up releasing more major versions and ultimately causing more versioning pain for the community. It would also mean that we can't make progress in improving React as fast as we'd like.
@@ -80,7 +82,7 @@ This section will be most relevant to developers who work on frameworks, librari
 Each of React's release channels is designed for a distinct use case:
 
 - [**Latest**](#latest-channel) is for stable, semver React releases. It's what you get when you install React from npm. This is the channel you're already using today. **User-facing applications that consume React directly use this channel.**
-- [**Canary**](#canary-channel) tracks the main branch of the React source code repository. Think of these as release candidates for the next semver release. **[Frameworks or other curated setups may choose to use this channel with a pinned version of React.](/blog/2023/05/03/react-canaries) You can also Canaries for integration testing between React and third party projects.**
+- [**Canary**](#canary-channel) tracks the main branch of the React source code repository. Think of these as release candidates for the next semver release. **[Frameworks or other curated setups may choose to use this channel with a pinned version of React.](/blog/2023/05/03/react-canaries) You can also use Canaries for integration testing between React and third party projects.**
 - [**Experimental**](#experimental-channel) includes experimental APIs and features that aren't available in the stable releases. These also track the main branch, but with additional feature flags turned on. Use this to try out upcoming features before they are released.
 
 All releases are published to npm, but only Latest uses semantic versioning. Prereleases (those in the Canary and Experimental channels) have versions generated from a hash of their contents and the commit date, e.g. `18.3.0-canary-388686f29-20230503` for Canary and `0.0.0-experimental-388686f29-20230503` for Experimental.
diff --git a/src/content/errors/377.md b/src/content/errors/377.md
new file mode 100644
index 000000000..6269e9d06
--- /dev/null
+++ b/src/content/errors/377.md
@@ -0,0 +1,13 @@
+<Intro>
+
+In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire.
+
+</Intro>
+
+We highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, this page will reassemble the original error message.
+
+The full text of the error you just encountered is:
+
+<ErrorDecoder />
+
+This error occurs when you pass a BigInt value from a Server Component to a Client Component.
diff --git a/src/content/errors/generic.md b/src/content/errors/generic.md
new file mode 100644
index 000000000..27c3ca52d
--- /dev/null
+++ b/src/content/errors/generic.md
@@ -0,0 +1,11 @@
+<Intro>
+
+In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire.
+
+</Intro>
+
+We highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, this page will reassemble the original error message.
+
+The full text of the error you just encountered is:
+
+<ErrorDecoder />
diff --git a/src/content/errors/index.md b/src/content/errors/index.md
new file mode 100644
index 000000000..25746d25d
--- /dev/null
+++ b/src/content/errors/index.md
@@ -0,0 +1,10 @@
+<Intro>
+
+In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire.
+
+</Intro>
+
+
+We highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, the error message will include just a link to the docs for the error.
+
+For an example, see: [https://react.dev/errors/149](/errors/421).
diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md
index 03f491211..f494b0ab1 100644
--- a/src/content/learn/add-react-to-an-existing-project.md
+++ b/src/content/learn/add-react-to-an-existing-project.md
@@ -67,7 +67,7 @@ Then add these lines of code at the top of your main JavaScript file (it might b
 </html>
 ```
 
-```js index.js active
+```js src/index.js active
 import { createRoot } from 'react-dom/client';
 
 // Clear the existing HTML content
@@ -131,7 +131,7 @@ This lets you find that HTML element with [`document.getElementById`](https://de
 </html>
 ```
 
-```js index.js active
+```js src/index.js active
 import { createRoot } from 'react-dom/client';
 
 function NavigationBar() {
diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md
index 501c9f620..5c87a3e79 100644
--- a/src/content/learn/adding-interactivity.md
+++ b/src/content/learn/adding-interactivity.md
@@ -134,7 +134,7 @@ export default function Gallery() {
 }
 ```
 
-```js data.js
+```js src/data.js
 export const sculptureList = [{
   name: 'Homenaje a la Neurocirugía',
   artist: 'Marta Colvin Andrade',
@@ -265,7 +265,7 @@ setCount(count + 1); // Request a re-render with 1
 console.log(count);  // Still 0!
 ```
 
-This behavior help you avoid subtle bugs. Here is a little chat app. Try to guess what happens if you press "Send" first and *then* change the recipient to Bob. Whose name will appear in the `alert` five seconds later?
+This behavior helps you avoid subtle bugs. Here is a little chat app. Try to guess what happens if you press "Send" first and *then* change the recipient to Bob. Whose name will appear in the `alert` five seconds later?
 
 <Sandpack>
 
@@ -646,7 +646,6 @@ Arrays are another type of mutable JavaScript objects you can store in state and
 ```js
 import { useState } from 'react';
 
-let nextId = 3;
 const initialList = [
   { id: 0, title: 'Big Bellies', seen: false },
   { id: 1, title: 'Lunar Landscape', seen: false },
@@ -714,7 +713,6 @@ If copying arrays in code gets tedious, you can use a library like [Immer](https
 import { useState } from 'react';
 import { useImmer } from 'use-immer';
 
-let nextId = 3;
 const initialList = [
   { id: 0, title: 'Big Bellies', seen: false },
   { id: 1, title: 'Lunar Landscape', seen: false },
diff --git a/src/content/learn/choosing-the-state-structure.md b/src/content/learn/choosing-the-state-structure.md
index 49e11a22f..5be2b4d34 100644
--- a/src/content/learn/choosing-the-state-structure.md
+++ b/src/content/learn/choosing-the-state-structure.md
@@ -554,8 +554,6 @@ button { margin-top: 10px; }
 
 </Sandpack>
 
-(Alternatively, you may hold the selected index in state.)
-
 The state used to be duplicated like this:
 
 * `items = [{ id: 0, title: 'pretzels'}, ...]`
@@ -612,7 +610,7 @@ export default function TravelPlan() {
 }
 ```
 
-```js places.js active
+```js src/places.js active
 export const initialTravelPlan = {
   id: 0,
   title: '(Root)',
@@ -868,7 +866,7 @@ export default function TravelPlan() {
 }
 ```
 
-```js places.js active
+```js src/places.js active
 export const initialTravelPlan = {
   0: {
     id: 0,
@@ -1204,7 +1202,7 @@ function PlaceTree({ id, parentId, placesById, onComplete }) {
 }
 ```
 
-```js places.js
+```js src/places.js
 export const initialTravelPlan = {
   0: {
     id: 0,
@@ -1543,7 +1541,7 @@ function PlaceTree({ id, parentId, placesById, onComplete }) {
 }
 ```
 
-```js places.js
+```js src/places.js
 export const initialTravelPlan = {
   0: {
     id: 0,
@@ -1841,7 +1839,7 @@ This `Clock` component receives two props: `color` and `time`. When you select a
 
 <Sandpack>
 
-```js Clock.js active
+```js src/Clock.js active
 import { useState } from 'react';
 
 export default function Clock(props) {
@@ -1854,7 +1852,7 @@ export default function Clock(props) {
 }
 ```
 
-```js App.js hidden
+```js src/App.js hidden
 import { useState, useEffect } from 'react';
 import Clock from './Clock.js';
 
@@ -1896,7 +1894,7 @@ The issue is that this component has `color` state initialized with the initial
 
 <Sandpack>
 
-```js Clock.js active
+```js src/Clock.js active
 import { useState } from 'react';
 
 export default function Clock(props) {
@@ -1908,7 +1906,7 @@ export default function Clock(props) {
 }
 ```
 
-```js App.js hidden
+```js src/App.js hidden
 import { useState, useEffect } from 'react';
 import Clock from './Clock.js';
 
@@ -1948,7 +1946,7 @@ Or, using the destructuring syntax:
 
 <Sandpack>
 
-```js Clock.js active
+```js src/Clock.js active
 import { useState } from 'react';
 
 export default function Clock({ color, time }) {
@@ -1960,7 +1958,7 @@ export default function Clock({ color, time }) {
 }
 ```
 
-```js App.js hidden
+```js src/App.js hidden
 import { useState, useEffect } from 'react';
 import Clock from './Clock.js';
 
@@ -2010,7 +2008,7 @@ Is any state in this example redundant?
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import AddItem from './AddItem.js';
 import PackingList from './PackingList.js';
@@ -2078,7 +2076,7 @@ export default function TravelPlan() {
 }
 ```
 
-```js AddItem.js hidden
+```js src/AddItem.js hidden
 import { useState } from 'react';
 
 export default function AddItem({ onAddItem }) {
@@ -2099,7 +2097,7 @@ export default function AddItem({ onAddItem }) {
 }
 ```
 
-```js PackingList.js hidden
+```js src/PackingList.js hidden
 import { useState } from 'react';
 
 export default function PackingList({
@@ -2149,7 +2147,7 @@ Although you could carefully change each event handler to update the `total` and
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import AddItem from './AddItem.js';
 import PackingList from './PackingList.js';
@@ -2213,7 +2211,7 @@ export default function TravelPlan() {
 }
 ```
 
-```js AddItem.js hidden
+```js src/AddItem.js hidden
 import { useState } from 'react';
 
 export default function AddItem({ onAddItem }) {
@@ -2234,7 +2232,7 @@ export default function AddItem({ onAddItem }) {
 }
 ```
 
-```js PackingList.js hidden
+```js src/PackingList.js hidden
 import { useState } from 'react';
 
 export default function PackingList({
@@ -2290,7 +2288,7 @@ This code works, but there is a minor UI glitch. When you press "Star" or "Unsta
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import { initialLetters } from './data.js';
 import Letter from './Letter.js';
@@ -2337,7 +2335,7 @@ export default function MailClient() {
 }
 ```
 
-```js Letter.js
+```js src/Letter.js
 export default function Letter({
   letter,
   isHighlighted,
@@ -2367,7 +2365,7 @@ export default function Letter({
 }
 ```
 
-```js data.js
+```js src/data.js
 export const initialLetters = [{
   id: 0,
   subject: 'Ready for adventure?',
@@ -2399,7 +2397,7 @@ To fix the issue, remove the duplication from state. Instead of storing *the let
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import { initialLetters } from './data.js';
 import Letter from './Letter.js';
@@ -2446,7 +2444,7 @@ export default function MailClient() {
 }
 ```
 
-```js Letter.js
+```js src/Letter.js
 export default function Letter({
   letter,
   isHighlighted,
@@ -2476,7 +2474,7 @@ export default function Letter({
 }
 ```
 
-```js data.js
+```js src/data.js
 export const initialLetters = [{
   id: 0,
   subject: 'Ready for adventure?',
@@ -2516,7 +2514,7 @@ Instead of a single selected ID, you might want to hold an array or a [Set](http
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import { letters } from './data.js';
 import Letter from './Letter.js';
@@ -2559,7 +2557,7 @@ export default function MailClient() {
 }
 ```
 
-```js Letter.js
+```js src/Letter.js
 export default function Letter({
   letter,
   onToggle,
@@ -2584,7 +2582,7 @@ export default function Letter({
 }
 ```
 
-```js data.js
+```js src/data.js
 export const letters = [{
   id: 0,
   subject: 'Ready for adventure?',
@@ -2615,7 +2613,7 @@ Instead of a single `selectedId`, keep a `selectedIds` *array* in state. For exa
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import { letters } from './data.js';
 import Letter from './Letter.js';
@@ -2667,7 +2665,7 @@ export default function MailClient() {
 }
 ```
 
-```js Letter.js
+```js src/Letter.js
 export default function Letter({
   letter,
   onToggle,
@@ -2692,7 +2690,7 @@ export default function Letter({
 }
 ```
 
-```js data.js
+```js src/data.js
 export const letters = [{
   id: 0,
   subject: 'Ready for adventure?',
@@ -2723,7 +2721,7 @@ To fix this, you can hold a [Set](https://developer.mozilla.org/en-US/docs/Web/J
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import { letters } from './data.js';
 import Letter from './Letter.js';
@@ -2772,7 +2770,7 @@ export default function MailClient() {
 }
 ```
 
-```js Letter.js
+```js src/Letter.js
 export default function Letter({
   letter,
   onToggle,
@@ -2797,7 +2795,7 @@ export default function Letter({
 }
 ```
 
-```js data.js
+```js src/data.js
 export const letters = [{
   id: 0,
   subject: 'Ready for adventure?',
diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index cfd52320a..95be5d2e0 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -52,13 +52,13 @@ export default function PackingList() {
 
 </Sandpack>
 
-Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✔) to packed items if `isPacked={true}`.
+Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✅) to packed items if `isPacked={true}`.
 
 You can write this as an [`if`/`else` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) like so:
 
 ```js
 if (isPacked) {
-  return <li className="item">{name} ✔</li>;
+  return <li className="item">{name} ✅</li>;
 }
 return <li className="item">{name}</li>;
 ```
@@ -70,7 +70,7 @@ If the `isPacked` prop is `true`, this code **returns a different JSX tree.** Wi
 ```js
 function Item({ name, isPacked }) {
   if (isPacked) {
-    return <li className="item">{name} ✔</li>;
+    return <li className="item">{name} ✅</li>;
   }
   return <li className="item">{name}</li>;
 }
@@ -159,7 +159,7 @@ In practice, returning `null` from a component isn't common because it might sur
 In the previous example, you controlled which (if any!) JSX tree would be returned by the component. You may already have noticed some duplication in the render output:
 
 ```js
-<li className="item">{name} ✔</li>
+<li className="item">{name} ✅</li>
 ```
 
 is very similar to
@@ -172,7 +172,7 @@ Both of the conditional branches return `<li className="item">...</li>`:
 
 ```js
 if (isPacked) {
-  return <li className="item">{name} ✔</li>;
+  return <li className="item">{name} ✅</li>;
 }
 return <li className="item">{name}</li>;
 ```
@@ -187,7 +187,7 @@ Instead of this:
 
 ```js
 if (isPacked) {
-  return <li className="item">{name} ✔</li>;
+  return <li className="item">{name} ✅</li>;
 }
 return <li className="item">{name}</li>;
 ```
@@ -197,12 +197,12 @@ You can write this:
 ```js
 return (
   <li className="item">
-    {isPacked ? name + ' ✔' : name}
+    {isPacked ? name + ' ✅' : name}
   </li>
 );
 ```
 
-You can read it as *"if `isPacked` is true, then (`?`) render `name + ' ✔'`, otherwise (`:`) render `name`"*.
+You can read it as *"if `isPacked` is true, then (`?`) render `name + ' ✅'`, otherwise (`:`) render `name`"*.
 
 <DeepDive>
 
@@ -222,7 +222,7 @@ function Item({ name, isPacked }) {
     <li className="item">
       {isPacked ? (
         <del>
-          {name + ' ✔'}
+          {name + ' ✅'}
         </del>
       ) : (
         name
@@ -265,7 +265,7 @@ Another common shortcut you'll encounter is the [JavaScript logical AND (`&&`) o
 ```js
 return (
   <li className="item">
-    {name} {isPacked && '✔'}
+    {name} {isPacked && '✅'}
   </li>
 );
 ```
@@ -280,7 +280,7 @@ Here it is in action:
 function Item({ name, isPacked }) {
   return (
     <li className="item">
-      {name} {isPacked && '✔'}
+      {name} {isPacked && '✅'}
     </li>
   );
 }
@@ -337,7 +337,7 @@ Use an `if` statement to reassign a JSX expression to `itemContent` if `isPacked
 
 ```js
 if (isPacked) {
-  itemContent = name + " ✔";
+  itemContent = name + " ✅";
 }
 ```
 
@@ -357,7 +357,7 @@ This style is the most verbose, but it's also the most flexible. Here it is in a
 function Item({ name, isPacked }) {
   let itemContent = name;
   if (isPacked) {
-    itemContent = name + " ✔";
+    itemContent = name + " ✅";
   }
   return (
     <li className="item">
@@ -401,7 +401,7 @@ function Item({ name, isPacked }) {
   if (isPacked) {
     itemContent = (
       <del>
-        {name + " ✔"}
+        {name + " ✅"}
       </del>
     );
   }
@@ -464,7 +464,7 @@ Use the conditional operator (`cond ? a : b`) to render a ❌ if `isPacked` isn
 function Item({ name, isPacked }) {
   return (
     <li className="item">
-      {name} {isPacked && '✔'}
+      {name} {isPacked && '✅'}
     </li>
   );
 }
@@ -502,7 +502,7 @@ export default function PackingList() {
 function Item({ name, isPacked }) {
   return (
     <li className="item">
-      {name} {isPacked ? '✔' : '❌'}
+      {name} {isPacked ? '✅' : '❌'}
     </li>
   );
 }
@@ -626,7 +626,7 @@ export default function PackingList() {
 
 Note that you must write `importance > 0 && ...` rather than `importance && ...` so that if the `importance` is `0`, `0` isn't rendered as the result!
 
-In this solution, two separate conditions are used to insert a space between the name and the importance label. Alternatively, you could use a fragment with a leading space: `importance > 0 && <> <i>...</i></>` or add a space immediately inside the `<i>`:  `importance > 0 && <i> ...</i>`.
+In this solution, two separate conditions are used to insert a space between the name and the importance label. Alternatively, you could use a Fragment with a leading space: `importance > 0 && <> <i>...</i></>` or add a space immediately inside the `<i>`:  `importance > 0 && <i> ...</i>`.
 
 </Solution>
 
diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md
index 6df4c0475..34ee0c01a 100644
--- a/src/content/learn/describing-the-ui.md
+++ b/src/content/learn/describing-the-ui.md
@@ -18,6 +18,7 @@ React is a JavaScript library for rendering user interfaces (UI). UI is built fr
 * [How to conditionally render components](/learn/conditional-rendering)
 * [How to render multiple components at a time](/learn/rendering-lists)
 * [How to avoid confusing bugs by keeping components pure](/learn/keeping-components-pure)
+* [Why understanding your UI as trees is useful](/learn/understanding-your-ui-as-a-tree)
 
 </YouWillLearn>
 
@@ -68,7 +69,7 @@ You can declare many components in one file, but large files can get difficult t
 
 <Sandpack>
 
-```js App.js hidden
+```js src/App.js hidden
 import Gallery from './Gallery.js';
 
 export default function App() {
@@ -78,7 +79,7 @@ export default function App() {
 }
 ```
 
-```js Gallery.js active
+```js src/Gallery.js active
 import Profile from './Profile.js';
 
 export default function Gallery() {
@@ -93,7 +94,7 @@ export default function Gallery() {
 }
 ```
 
-```js Profile.js
+```js src/Profile.js
 export default function Profile() {
   return (
     <img
@@ -278,7 +279,7 @@ function Card({ children }) {
 
 ```
 
-```js utils.js
+```js src/utils.js
 export function getImageUrl(person, size = 's') {
   return (
     'https://i.imgur.com/' +
@@ -326,7 +327,7 @@ In this example, the JavaScript `&&` operator is used to conditionally render a
 function Item({ name, isPacked }) {
   return (
     <li className="item">
-      {name} {isPacked && '✔'}
+      {name} {isPacked && '✅'}
     </li>
   );
 }
@@ -370,7 +371,7 @@ For each array item, you will need to specify a `key`. Usually, you will want to
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { people } from './data.js';
 import { getImageUrl } from './utils.js';
 
@@ -397,7 +398,7 @@ export default function List() {
 }
 ```
 
-```js data.js
+```js src/data.js
 export const people = [{
   id: 0,
   name: 'Creola Katherine Johnson',
@@ -431,7 +432,7 @@ export const people = [{
 }];
 ```
 
-```js utils.js
+```js src/utils.js
 export function getImageUrl(person) {
   return (
     'https://i.imgur.com/' +
@@ -523,6 +524,37 @@ Read **[Keeping Components Pure](/learn/keeping-components-pure)** to learn how
 
 </LearnMore>
 
+## Your UI as a tree {/*your-ui-as-a-tree*/}
+
+React uses trees to model the relationships between components and modules. 
+
+A React render tree is a representation of the parent and child relationship between components. 
+
+<Diagram name="generic_render_tree" height={250} width={500} alt="A tree graph with five nodes, with each node representing a component. The root node is located at the top the tree graph and is labelled 'Root Component'. It has two arrows extending down to two nodes labelled 'Component A' and 'Component C'. Each of the arrows is labelled with 'renders'. 'Component A' has a single 'renders' arrow to a node labelled 'Component B'. 'Component C' has a single 'renders' arrow to a node labelled 'Component D'.">
+
+An example React render tree.
+
+</Diagram>
+
+Components near the top of the tree, near the root component, are considered top-level components. Components with no child components are leaf components. This categorization of components is useful for understanding data flow and rendering performance.
+
+Modelling the relationship between JavaScript modules is another useful way to understand your app. We refer to it as a module dependency tree. 
+
+<Diagram name="generic_dependency_tree" height={250} width={500} alt="A tree graph with five nodes. Each node represents a JavaScript module. The top-most node is labelled 'RootModule.js'. It has three arrows extending to the nodes: 'ModuleA.js', 'ModuleB.js', and 'ModuleC.js'. Each arrow is labelled as 'imports'. 'ModuleC.js' node has a single 'imports' arrow that points to a node labelled 'ModuleD.js'.">
+
+An example module dependency tree.
+
+</Diagram>
+
+A dependency tree is often used by build tools to bundle all the relevant JavaScript code for the client to download and render. A large bundle size regresses user experience for React apps. Understanding the module dependency tree is helpful to debug such issues. 
+
+<LearnMore path="/learn/understanding-your-ui-as-a-tree">
+
+Read **[Your UI as a Tree](/learn/understanding-your-ui-as-a-tree)** to learn how to create a render and module dependency trees for a React app and how they're useful mental models for improving user experience and performance.
+
+</LearnMore>
+
+
 ## What's next? {/*whats-next*/}
 
 Head over to [Your First Component](/learn/your-first-component) to start reading this chapter page by page!
diff --git a/src/content/learn/editor-setup.md b/src/content/learn/editor-setup.md
index a83e16723..f1175722f 100644
--- a/src/content/learn/editor-setup.md
+++ b/src/content/learn/editor-setup.md
@@ -40,7 +40,11 @@ React нэгдлийн хүмүүст түгээмэл ашиглагддаг б
 
 ### Код хэвжүүлэх (Formatting) {/*formatting*/} 
 
+<<<<<<< HEAD
 Бусад оролцогчидтой кодоо хуваалцах үед тулгардаг хамгийн түгээмэл асуудал бол [tabs уу эсвэл spaces үү](https://www.google.com/search?q=tabs+vs+spaces) гэсэн хэлэлцүүлэг! Азаар энэ асуудлыг шийдэгч бол [Prettier](https://prettier.io/) бөгөөд урьдчилсан бэлдсэн дүрэм, тохиргоогоор таны кодыг хэвжүүлэх болно. Prettier-ийг ажиллуулахад л таны бүх tab-ууд space рүү хөрвөгдөж, мөн мөрийн доголууд, хаалтууд бүгд тохиргооны дагуу өөрчлөгдөнө. Хамгийн оновчтой тохиргоо бол та файлаа хадгалахад Prettier ажиллаад шаардлагатай засваруудыг хийдэг байх юм.
+=======
+The last thing you want to do when sharing your code with another contributor is get into a discussion about [tabs vs spaces](https://www.google.com/search?q=tabs+vs+spaces)! Fortunately, [Prettier](https://prettier.io/) will clean up your code by reformatting it to conform to preset, configurable rules. Run Prettier, and all your tabs will be converted to spaces—and your indentation, quotes, etc will also all be changed to conform to the configuration. In the ideal setup, Prettier will run when you save your file, quickly making these edits for you.
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 Та [Prettier-д зориулсан нэмэлт суулгацыг VSCode дээр](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) доорх дарааллын дагуу суулгаж болно. 
 
diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md
index 69e733521..23f11f54e 100644
--- a/src/content/learn/escape-hatches.md
+++ b/src/content/learn/escape-hatches.md
@@ -163,7 +163,7 @@ export default function ChatRoom() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection() {
   // A real implementation would actually connect to the server
   return {
@@ -281,7 +281,7 @@ export default function App() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection(serverUrl, roomId) {
   // A real implementation would actually connect to the server
   return {
@@ -395,7 +395,7 @@ export default function App() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection(serverUrl, roomId) {
   // A real implementation would actually connect to the server
   let connectedCallback;
@@ -424,7 +424,7 @@ export function createConnection(serverUrl, roomId) {
 }
 ```
 
-```js notifications.js
+```js src/notifications.js
 import Toastify from 'toastify-js';
 import 'toastify-js/src/toastify.css';
 
@@ -528,7 +528,7 @@ export default function App() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection(serverUrl, roomId) {
   // A real implementation would actually connect to the server
   let connectedCallback;
@@ -557,7 +557,7 @@ export function createConnection(serverUrl, roomId) {
 }
 ```
 
-```js notifications.js hidden
+```js src/notifications.js hidden
 import Toastify from 'toastify-js';
 import 'toastify-js/src/toastify.css';
 
@@ -647,7 +647,7 @@ export default function App() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection({ serverUrl, roomId }) {
   // A real implementation would actually connect to the server
   return {
@@ -721,7 +721,7 @@ export default function App() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection({ serverUrl, roomId }) {
   // A real implementation would actually connect to the server
   return {
@@ -797,7 +797,7 @@ function Dot({ position, opacity }) {
 }
 ```
 
-```js usePointerPosition.js
+```js src/usePointerPosition.js
 import { useState, useEffect } from 'react';
 
 export function usePointerPosition() {
@@ -813,7 +813,7 @@ export function usePointerPosition() {
 }
 ```
 
-```js useDelayedValue.js
+```js src/useDelayedValue.js
 import { useState, useEffect } from 'react';
 
 export function useDelayedValue(value, delay) {
diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md
index 012a5c3f9..5c08c0123 100644
--- a/src/content/learn/extracting-state-logic-into-a-reducer.md
+++ b/src/content/learn/extracting-state-logic-into-a-reducer.md
@@ -23,7 +23,7 @@ As your components grow in complexity, it can get harder to see at a glance all
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
@@ -79,7 +79,7 @@ const initialTasks = [
 ];
 ```
 
-```js AddTask.js hidden
+```js src/AddTask.js hidden
 import { useState } from 'react';
 
 export default function AddTask({onAddTask}) {
@@ -103,7 +103,7 @@ export default function AddTask({onAddTask}) {
 }
 ```
 
-```js TaskList.js hidden
+```js src/TaskList.js hidden
 import { useState } from 'react';
 
 export default function TaskList({tasks, onChangeTask, onDeleteTask}) {
@@ -398,7 +398,7 @@ You could even use the `reduce()` method with an `initialState` and an array of
 
 <Sandpack>
 
-```js index.js active
+```js src/index.js active
 import tasksReducer from './tasksReducer.js';
 
 let initialState = [];
@@ -415,7 +415,7 @@ const output = document.getElementById('output');
 output.textContent = JSON.stringify(finalState, null, 2);
 ```
 
-```js tasksReducer.js
+```js src/tasksReducer.js
 export default function tasksReducer(tasks, action) {
   switch (action.type) {
     case 'added': {
@@ -493,7 +493,7 @@ Now it's fully wired up! Here, the reducer is declared at the bottom of the comp
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useReducer } from 'react';
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
@@ -574,7 +574,7 @@ const initialTasks = [
 ];
 ```
 
-```js AddTask.js hidden
+```js src/AddTask.js hidden
 import { useState } from 'react';
 
 export default function AddTask({onAddTask}) {
@@ -598,7 +598,7 @@ export default function AddTask({onAddTask}) {
 }
 ```
 
-```js TaskList.js hidden
+```js src/TaskList.js hidden
 import { useState } from 'react';
 
 export default function TaskList({tasks, onChangeTask, onDeleteTask}) {
@@ -678,7 +678,7 @@ If you want, you can even move the reducer to a different file:
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useReducer } from 'react';
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
@@ -730,7 +730,7 @@ const initialTasks = [
 ];
 ```
 
-```js tasksReducer.js
+```js src/tasksReducer.js
 export default function tasksReducer(tasks, action) {
   switch (action.type) {
     case 'added': {
@@ -762,7 +762,7 @@ export default function tasksReducer(tasks, action) {
 }
 ```
 
-```js AddTask.js hidden
+```js src/AddTask.js hidden
 import { useState } from 'react';
 
 export default function AddTask({onAddTask}) {
@@ -786,7 +786,7 @@ export default function AddTask({onAddTask}) {
 }
 ```
 
-```js TaskList.js hidden
+```js src/TaskList.js hidden
 import { useState } from 'react';
 
 export default function TaskList({tasks, onChangeTask, onDeleteTask}) {
@@ -889,7 +889,7 @@ Just like with [updating objects](/learn/updating-objects-in-state#write-concise
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useImmerReducer } from 'use-immer';
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
@@ -964,7 +964,7 @@ const initialTasks = [
 ];
 ```
 
-```js AddTask.js hidden
+```js src/AddTask.js hidden
 import { useState } from 'react';
 
 export default function AddTask({onAddTask}) {
@@ -988,7 +988,7 @@ export default function AddTask({onAddTask}) {
 }
 ```
 
-```js TaskList.js hidden
+```js src/TaskList.js hidden
 import { useState } from 'react';
 
 export default function TaskList({tasks, onChangeTask, onDeleteTask}) {
@@ -1126,7 +1126,7 @@ This means that your action object should have a `type: 'changed_selection'`. Yo
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useReducer } from 'react';
 import Chat from './Chat.js';
 import ContactList from './ContactList.js';
@@ -1160,7 +1160,7 @@ const contacts = [
 ];
 ```
 
-```js messengerReducer.js
+```js src/messengerReducer.js
 export const initialState = {
   selectedId: 0,
   message: 'Hello',
@@ -1188,7 +1188,7 @@ export function messengerReducer(state, action) {
 }
 ```
 
-```js ContactList.js
+```js src/ContactList.js
 export default function ContactList({contacts, selectedId, dispatch}) {
   return (
     <section className="contact-list">
@@ -1209,7 +1209,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
 }
 ```
 
-```js Chat.js
+```js src/Chat.js
 import { useState } from 'react';
 
 export default function Chat({contact, message, dispatch}) {
@@ -1276,7 +1276,7 @@ Here is the example updated to dispatch the corresponding messages:
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useReducer } from 'react';
 import Chat from './Chat.js';
 import ContactList from './ContactList.js';
@@ -1310,7 +1310,7 @@ const contacts = [
 ];
 ```
 
-```js messengerReducer.js
+```js src/messengerReducer.js
 export const initialState = {
   selectedId: 0,
   message: 'Hello',
@@ -1338,7 +1338,7 @@ export function messengerReducer(state, action) {
 }
 ```
 
-```js ContactList.js
+```js src/ContactList.js
 export default function ContactList({contacts, selectedId, dispatch}) {
   return (
     <section className="contact-list">
@@ -1362,7 +1362,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
 }
 ```
 
-```js Chat.js
+```js src/Chat.js
 import { useState } from 'react';
 
 export default function Chat({contact, message, dispatch}) {
@@ -1420,7 +1420,7 @@ Currently, pressing "Send" doesn't do anything. Add an event handler to the "Sen
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useReducer } from 'react';
 import Chat from './Chat.js';
 import ContactList from './ContactList.js';
@@ -1454,7 +1454,7 @@ const contacts = [
 ];
 ```
 
-```js messengerReducer.js
+```js src/messengerReducer.js
 export const initialState = {
   selectedId: 0,
   message: 'Hello',
@@ -1482,7 +1482,7 @@ export function messengerReducer(state, action) {
 }
 ```
 
-```js ContactList.js
+```js src/ContactList.js
 export default function ContactList({contacts, selectedId, dispatch}) {
   return (
     <section className="contact-list">
@@ -1506,7 +1506,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
 }
 ```
 
-```js Chat.js active
+```js src/Chat.js active
 import { useState } from 'react';
 
 export default function Chat({contact, message, dispatch}) {
@@ -1559,7 +1559,7 @@ There are a couple of ways you could do it in the "Send" button event handler. O
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useReducer } from 'react';
 import Chat from './Chat.js';
 import ContactList from './ContactList.js';
@@ -1593,7 +1593,7 @@ const contacts = [
 ];
 ```
 
-```js messengerReducer.js
+```js src/messengerReducer.js
 export const initialState = {
   selectedId: 0,
   message: 'Hello',
@@ -1621,7 +1621,7 @@ export function messengerReducer(state, action) {
 }
 ```
 
-```js ContactList.js
+```js src/ContactList.js
 export default function ContactList({contacts, selectedId, dispatch}) {
   return (
     <section className="contact-list">
@@ -1645,7 +1645,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
 }
 ```
 
-```js Chat.js active
+```js src/Chat.js active
 import { useState } from 'react';
 
 export default function Chat({contact, message, dispatch}) {
@@ -1707,7 +1707,7 @@ However, _from the user's perspective_, sending a message is a different action
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useReducer } from 'react';
 import Chat from './Chat.js';
 import ContactList from './ContactList.js';
@@ -1741,7 +1741,7 @@ const contacts = [
 ];
 ```
 
-```js messengerReducer.js active
+```js src/messengerReducer.js active
 export const initialState = {
   selectedId: 0,
   message: 'Hello',
@@ -1775,7 +1775,7 @@ export function messengerReducer(state, action) {
 }
 ```
 
-```js ContactList.js
+```js src/ContactList.js
 export default function ContactList({contacts, selectedId, dispatch}) {
   return (
     <section className="contact-list">
@@ -1799,7 +1799,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
 }
 ```
 
-```js Chat.js active
+```js src/Chat.js active
 import { useState } from 'react';
 
 export default function Chat({contact, message, dispatch}) {
@@ -1904,7 +1904,7 @@ The `[key]: value` [computed property](https://developer.mozilla.org/en-US/docs/
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useReducer } from 'react';
 import Chat from './Chat.js';
 import ContactList from './ContactList.js';
@@ -1938,7 +1938,7 @@ const contacts = [
 ];
 ```
 
-```js messengerReducer.js
+```js src/messengerReducer.js
 export const initialState = {
   selectedId: 0,
   message: 'Hello',
@@ -1972,7 +1972,7 @@ export function messengerReducer(state, action) {
 }
 ```
 
-```js ContactList.js
+```js src/ContactList.js
 export default function ContactList({contacts, selectedId, dispatch}) {
   return (
     <section className="contact-list">
@@ -1996,7 +1996,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
 }
 ```
 
-```js Chat.js
+```js src/Chat.js
 import { useState } from 'react';
 
 export default function Chat({contact, message, dispatch}) {
@@ -2081,7 +2081,7 @@ Here is the complete solution:
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useReducer } from 'react';
 import Chat from './Chat.js';
 import ContactList from './ContactList.js';
@@ -2115,7 +2115,7 @@ const contacts = [
 ];
 ```
 
-```js messengerReducer.js
+```js src/messengerReducer.js
 export const initialState = {
   selectedId: 0,
   messages: {
@@ -2158,7 +2158,7 @@ export function messengerReducer(state, action) {
 }
 ```
 
-```js ContactList.js
+```js src/ContactList.js
 export default function ContactList({contacts, selectedId, dispatch}) {
   return (
     <section className="contact-list">
@@ -2182,7 +2182,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
 }
 ```
 
-```js Chat.js
+```js src/Chat.js
 import { useState } from 'react';
 
 export default function Chat({contact, message, dispatch}) {
@@ -2269,7 +2269,7 @@ Recall that a reducer function takes two arguments--the current state and the ac
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useReducer } from './MyReact.js';
 import Chat from './Chat.js';
 import ContactList from './ContactList.js';
@@ -2303,7 +2303,7 @@ const contacts = [
 ];
 ```
 
-```js messengerReducer.js
+```js src/messengerReducer.js
 export const initialState = {
   selectedId: 0,
   messages: {
@@ -2346,7 +2346,7 @@ export function messengerReducer(state, action) {
 }
 ```
 
-```js MyReact.js active
+```js src/MyReact.js active
 import { useState } from 'react';
 
 export function useReducer(reducer, initialState) {
@@ -2358,7 +2358,7 @@ export function useReducer(reducer, initialState) {
 }
 ```
 
-```js ContactList.js hidden
+```js src/ContactList.js hidden
 export default function ContactList({contacts, selectedId, dispatch}) {
   return (
     <section className="contact-list">
@@ -2382,7 +2382,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
 }
 ```
 
-```js Chat.js hidden
+```js src/Chat.js hidden
 import { useState } from 'react';
 
 export default function Chat({contact, message, dispatch}) {
@@ -2443,7 +2443,7 @@ Dispatching an action calls a reducer with the current state and the action, and
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useReducer } from './MyReact.js';
 import Chat from './Chat.js';
 import ContactList from './ContactList.js';
@@ -2477,7 +2477,7 @@ const contacts = [
 ];
 ```
 
-```js messengerReducer.js
+```js src/messengerReducer.js
 export const initialState = {
   selectedId: 0,
   messages: {
@@ -2520,7 +2520,7 @@ export function messengerReducer(state, action) {
 }
 ```
 
-```js MyReact.js active
+```js src/MyReact.js active
 import { useState } from 'react';
 
 export function useReducer(reducer, initialState) {
@@ -2535,7 +2535,7 @@ export function useReducer(reducer, initialState) {
 }
 ```
 
-```js ContactList.js hidden
+```js src/ContactList.js hidden
 export default function ContactList({contacts, selectedId, dispatch}) {
   return (
     <section className="contact-list">
@@ -2559,7 +2559,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
 }
 ```
 
-```js Chat.js hidden
+```js src/Chat.js hidden
 import { useState } from 'react';
 
 export default function Chat({contact, message, dispatch}) {
diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md
index 3a39c36db..b458ef402 100644
--- a/src/content/learn/importing-and-exporting-components.md
+++ b/src/content/learn/importing-and-exporting-components.md
@@ -66,7 +66,7 @@ Here both `Profile` and `Gallery` have been moved out of `App.js` into a new fil
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import Gallery from './Gallery.js';
 
 export default function App() {
@@ -76,7 +76,7 @@ export default function App() {
 }
 ```
 
-```js Gallery.js
+```js src/Gallery.js
 function Profile() {
   return (
     <img
@@ -183,7 +183,7 @@ Now `Gallery.js` contains two exports: a default `Gallery` export, and a named `
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import Gallery from './Gallery.js';
 import { Profile } from './Gallery.js';
 
@@ -194,7 +194,7 @@ export default function App() {
 }
 ```
 
-```js Gallery.js
+```js src/Gallery.js
 export function Profile() {
   return (
     <img
@@ -268,7 +268,7 @@ Don't forget to import your components where they are called. Doesn't `Gallery`
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import Gallery from './Gallery.js';
 import { Profile } from './Gallery.js';
 
@@ -281,7 +281,7 @@ export default function App() {
 }
 ```
 
-```js Gallery.js active
+```js src/Gallery.js active
 // Move me to Profile.js!
 export function Profile() {
   return (
@@ -304,7 +304,7 @@ export default function Gallery() {
 }
 ```
 
-```js Profile.js
+```js src/Profile.js
 ```
 
 ```css
@@ -321,7 +321,7 @@ This is the solution with named exports:
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import Gallery from './Gallery.js';
 import { Profile } from './Profile.js';
 
@@ -335,7 +335,7 @@ export default function App() {
 }
 ```
 
-```js Gallery.js
+```js src/Gallery.js
 import { Profile } from './Profile.js';
 
 export default function Gallery() {
@@ -350,7 +350,7 @@ export default function Gallery() {
 }
 ```
 
-```js Profile.js
+```js src/Profile.js
 export function Profile() {
   return (
     <img
@@ -371,7 +371,7 @@ This is the solution with default exports:
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import Gallery from './Gallery.js';
 import Profile from './Profile.js';
 
@@ -385,7 +385,7 @@ export default function App() {
 }
 ```
 
-```js Gallery.js
+```js src/Gallery.js
 import Profile from './Profile.js';
 
 export default function Gallery() {
@@ -400,7 +400,7 @@ export default function Gallery() {
 }
 ```
 
-```js Profile.js
+```js src/Profile.js
 export default function Profile() {
   return (
     <img
diff --git a/src/content/learn/installation.md b/src/content/learn/installation.md
index 25b1e4f2d..44d28c67e 100644
--- a/src/content/learn/installation.md
+++ b/src/content/learn/installation.md
@@ -37,7 +37,11 @@ export default function App() {
 
 Дээрх кодыг шууд засварлах боломжтой ба баруун дээд булан дахь "Fork" товчлуурыг дарж шинэ тааб-нд нээж болно.
 
+<<<<<<< HEAD
 Reacт гарын авлагын ихэнх хуудсанд дээрх шиг sandbox байна. React гарын авлагаас гадуур React-г дэмждэг зөндөө онлайн sandbox байдаг: жишээ нь [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react) болон [CodePen.](https://codepen.io/pen?&editors=0010&layout=left&prefill_data_id=3f4569d1-1b11-4bce-bd46-89090eed5ddb)
+=======
+Most pages in the React documentation contain sandboxes like this. Outside of the React documentation, there are many online sandboxes that support React: for example, [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react), or [CodePen.](https://codepen.io/pen?template=QWYVwWN)
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 ### Дотоод орчиндоо React турших {/*try-react-locally*/}
 
diff --git a/src/content/learn/javascript-in-jsx-with-curly-braces.md b/src/content/learn/javascript-in-jsx-with-curly-braces.md
index 502916113..736065b03 100644
--- a/src/content/learn/javascript-in-jsx-with-curly-braces.md
+++ b/src/content/learn/javascript-in-jsx-with-curly-braces.md
@@ -529,7 +529,7 @@ You can also move this expression into a separate function like `getImageUrl` be
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { getImageUrl } from './utils.js'
 
 const person = {
@@ -561,7 +561,7 @@ export default function TodoList() {
 }
 ```
 
-```js utils.js
+```js src/utils.js
 export function getImageUrl(person) {
   return (
     'https://i.imgur.com/' +
diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md
index 60760edc5..6d4f55763 100644
--- a/src/content/learn/keeping-components-pure.md
+++ b/src/content/learn/keeping-components-pure.md
@@ -49,7 +49,7 @@ React is designed around this concept. **React assumes that every component you
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 function Recipe({ drinkers }) {
   return (
     <ol>    
@@ -243,7 +243,7 @@ Rendering is a *calculation*, it shouldn't try to "do" things. Can you express t
 
 <Sandpack>
 
-```js Clock.js active
+```js src/Clock.js active
 export default function Clock({ time }) {
   let hours = time.getHours();
   if (hours >= 0 && hours <= 6) {
@@ -259,7 +259,7 @@ export default function Clock({ time }) {
 }
 ```
 
-```js App.js hidden
+```js src/App.js hidden
 import { useState, useEffect } from 'react';
 import Clock from './Clock.js';
 
@@ -305,7 +305,7 @@ You can fix this component by calculating the `className` and including it in th
 
 <Sandpack>
 
-```js Clock.js active
+```js src/Clock.js active
 export default function Clock({ time }) {
   let hours = time.getHours();
   let className;
@@ -322,7 +322,7 @@ export default function Clock({ time }) {
 }
 ```
 
-```js App.js hidden
+```js src/App.js hidden
 import { useState, useEffect } from 'react';
 import Clock from './Clock.js';
 
@@ -380,7 +380,7 @@ The buggy code is in `Profile.js`. Make sure you read it all from top to bottom!
 
 <Sandpack>
 
-```js Profile.js
+```js src/Profile.js
 import Panel from './Panel.js';
 import { getImageUrl } from './utils.js';
 
@@ -413,7 +413,7 @@ function Avatar() {
 }
 ```
 
-```js Panel.js hidden
+```js src/Panel.js hidden
 import { useState } from 'react';
 
 export default function Panel({ children }) {
@@ -429,7 +429,7 @@ export default function Panel({ children }) {
 }
 ```
 
-```js App.js
+```js src/App.js
 import Profile from './Profile.js';
 
 export default function App() {
@@ -448,7 +448,7 @@ export default function App() {
 }
 ```
 
-```js utils.js hidden
+```js src/utils.js hidden
 export function getImageUrl(person, size = 's') {
   return (
     'https://i.imgur.com/' +
@@ -481,7 +481,7 @@ To fix the bug, remove the `currentPerson` variable. Instead, pass all informati
 
 <Sandpack>
 
-```js Profile.js active
+```js src/Profile.js active
 import Panel from './Panel.js';
 import { getImageUrl } from './utils.js';
 
@@ -511,7 +511,7 @@ function Avatar({ person }) {
 }
 ```
 
-```js Panel.js hidden
+```js src/Panel.js hidden
 import { useState } from 'react';
 
 export default function Panel({ children }) {
@@ -527,7 +527,7 @@ export default function Panel({ children }) {
 }
 ```
 
-```js App.js
+```js src/App.js
 import Profile from './Profile.js';
 
 export default function App() {
@@ -546,7 +546,7 @@ export default function App() {
 }
 ```
 
-```js utils.js hidden
+```js src/utils.js hidden
 export function getImageUrl(person, size = 's') {
   return (
     'https://i.imgur.com/' +
@@ -583,7 +583,7 @@ You implemented the "Create Story" placeholder by pushing one more fake story at
 
 <Sandpack>
 
-```js StoryTray.js active
+```js src/StoryTray.js active
 export default function StoryTray({ stories }) {
   stories.push({
     id: 'create',
@@ -602,7 +602,7 @@ export default function StoryTray({ stories }) {
 }
 ```
 
-```js App.js hidden
+```js src/App.js hidden
 import { useState, useEffect } from 'react';
 import StoryTray from './StoryTray.js';
 
@@ -683,7 +683,7 @@ The simplest fix is to not touch the array at all, and render "Create Story" sep
 
 <Sandpack>
 
-```js StoryTray.js active
+```js src/StoryTray.js active
 export default function StoryTray({ stories }) {
   return (
     <ul>
@@ -698,7 +698,7 @@ export default function StoryTray({ stories }) {
 }
 ```
 
-```js App.js hidden
+```js src/App.js hidden
 import { useState, useEffect } from 'react';
 import StoryTray from './StoryTray.js';
 
@@ -767,7 +767,7 @@ Alternatively, you could create a _new_ array (by copying the existing one) befo
 
 <Sandpack>
 
-```js StoryTray.js active
+```js src/StoryTray.js active
 export default function StoryTray({ stories }) {
   // Copy the array!
   let storiesToDisplay = stories.slice();
@@ -790,7 +790,7 @@ export default function StoryTray({ stories }) {
 }
 ```
 
-```js App.js hidden
+```js src/App.js hidden
 import { useState, useEffect } from 'react';
 import StoryTray from './StoryTray.js';
 
diff --git a/src/content/learn/lifecycle-of-reactive-effects.md b/src/content/learn/lifecycle-of-reactive-effects.md
index 5d9554a1a..3dc9a75f0 100644
--- a/src/content/learn/lifecycle-of-reactive-effects.md
+++ b/src/content/learn/lifecycle-of-reactive-effects.md
@@ -251,7 +251,7 @@ export default function App() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection(serverUrl, roomId) {
   // A real implementation would actually connect to the server
   return {
@@ -447,7 +447,7 @@ export default function App() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection(serverUrl, roomId) {
   // A real implementation would actually connect to the server
   return {
@@ -527,7 +527,7 @@ export default function App() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection(serverUrl, roomId) {
   // A real implementation would actually connect to the server
   return {
@@ -646,7 +646,7 @@ export default function App() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection(serverUrl, roomId) {
   // A real implementation would actually connect to the server
   return {
@@ -837,7 +837,7 @@ export default function App() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection(serverUrl, roomId) {
   // A real implementation would actually connect to the server
   return {
@@ -912,7 +912,7 @@ export default function App() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection(serverUrl, roomId) {
   // A real implementation would actually connect to the server
   return {
@@ -1329,7 +1329,7 @@ Suppressing the linter is always suspicious. Could this be a bug?
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import ChatRoom from './ChatRoom.js';
 import {
@@ -1374,7 +1374,7 @@ export default function App() {
 }
 ```
 
-```js ChatRoom.js active
+```js src/ChatRoom.js active
 import { useState, useEffect } from 'react';
 
 export default function ChatRoom({ roomId, createConnection }) {
@@ -1389,7 +1389,7 @@ export default function ChatRoom({ roomId, createConnection }) {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createEncryptedConnection(roomId) {
   // A real implementation would actually connect to the server
   return {
@@ -1427,7 +1427,7 @@ If you remove the linter suppression, you will see a lint error. The problem is
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import ChatRoom from './ChatRoom.js';
 import {
@@ -1472,7 +1472,7 @@ export default function App() {
 }
 ```
 
-```js ChatRoom.js active
+```js src/ChatRoom.js active
 import { useState, useEffect } from 'react';
 
 export default function ChatRoom({ roomId, createConnection }) {
@@ -1486,7 +1486,7 @@ export default function ChatRoom({ roomId, createConnection }) {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createEncryptedConnection(roomId) {
   // A real implementation would actually connect to the server
   return {
@@ -1522,7 +1522,7 @@ It is correct that `createConnection` is a dependency. However, this code is a b
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import ChatRoom from './ChatRoom.js';
 
@@ -1560,7 +1560,7 @@ export default function App() {
 }
 ```
 
-```js ChatRoom.js active
+```js src/ChatRoom.js active
 import { useState, useEffect } from 'react';
 import {
   createEncryptedConnection,
@@ -1581,7 +1581,7 @@ export default function ChatRoom({ roomId, isEncrypted }) {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createEncryptedConnection(roomId) {
   // A real implementation would actually connect to the server
   return {
@@ -1633,7 +1633,7 @@ If you have two independent synchronization processes, you need to write two sep
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState, useEffect } from 'react';
 import { fetchData } from './api.js';
 
@@ -1687,7 +1687,7 @@ export default function Page() {
 }
 ```
 
-```js api.js hidden
+```js src/api.js hidden
 export function fetchData(url) {
   if (url === '/planets') {
     return fetchPlanets();
@@ -1782,7 +1782,7 @@ This is why it makes sense to describe them as two separate Effects. Here's an e
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState, useEffect } from 'react';
 import { fetchData } from './api.js';
 
@@ -1855,7 +1855,7 @@ export default function Page() {
 }
 ```
 
-```js api.js hidden
+```js src/api.js hidden
 export function fetchData(url) {
   if (url === '/planets') {
     return fetchPlanets();
@@ -1945,7 +1945,7 @@ Instead, to reduce repetition, you can extract some logic into a custom Hook lik
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import { useSelectOptions } from './useSelectOptions.js';
 
@@ -1991,7 +1991,7 @@ export default function Page() {
 }
 ```
 
-```js useSelectOptions.js
+```js src/useSelectOptions.js
 import { useState, useEffect } from 'react';
 import { fetchData } from './api.js';
 
@@ -2018,7 +2018,7 @@ export function useSelectOptions(url) {
 }
 ```
 
-```js api.js hidden
+```js src/api.js hidden
 export function fetchData(url) {
   if (url === '/planets') {
     return fetchPlanets();
diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index c88ae3796..93bcc10fd 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -308,7 +308,7 @@ However, sometimes this is not what you want. In this chat app, typing a message
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import Chat from './Chat.js';
 import ContactList from './ContactList.js';
@@ -334,7 +334,7 @@ const contacts = [
 ];
 ```
 
-```js ContactList.js
+```js src/ContactList.js
 export default function ContactList({
   selectedContact,
   contacts,
@@ -358,7 +358,7 @@ export default function ContactList({
 }
 ```
 
-```js Chat.js
+```js src/Chat.js
 import { useState } from 'react';
 
 export default function Chat({ contact }) {
@@ -403,7 +403,7 @@ React lets you override the default behavior, and *force* a component to reset i
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import Chat from './Chat.js';
 import ContactList from './ContactList.js';
@@ -429,7 +429,7 @@ const contacts = [
 ];
 ```
 
-```js ContactList.js
+```js src/ContactList.js
 export default function ContactList({
   selectedContact,
   contacts,
@@ -453,7 +453,7 @@ export default function ContactList({
 }
 ```
 
-```js Chat.js
+```js src/Chat.js
 import { useState } from 'react';
 
 export default function Chat({ contact }) {
@@ -506,7 +506,7 @@ Components with many state updates spread across many event handlers can get ove
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useReducer } from 'react';
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
@@ -589,7 +589,7 @@ const initialTasks = [
 ];
 ```
 
-```js AddTask.js hidden
+```js src/AddTask.js hidden
 import { useState } from 'react';
 
 export default function AddTask({ onAddTask }) {
@@ -610,7 +610,7 @@ export default function AddTask({ onAddTask }) {
 }
 ```
 
-```js TaskList.js hidden
+```js src/TaskList.js hidden
 import { useState } from 'react';
 
 export default function TaskList({
@@ -733,7 +733,7 @@ export default function Page() {
 }
 ```
 
-```js Section.js
+```js src/Section.js
 import { useContext } from 'react';
 import { LevelContext } from './LevelContext.js';
 
@@ -749,7 +749,7 @@ export default function Section({ children }) {
 }
 ```
 
-```js Heading.js
+```js src/Heading.js
 import { useContext } from 'react';
 import { LevelContext } from './LevelContext.js';
 
@@ -776,7 +776,7 @@ export default function Heading({ children }) {
 }
 ```
 
-```js LevelContext.js
+```js src/LevelContext.js
 import { createContext } from 'react';
 
 export const LevelContext = createContext(0);
@@ -807,7 +807,7 @@ With this approach, a parent component with complex state manages it with a redu
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
 import { TasksProvider } from './TasksContext.js';
@@ -823,7 +823,7 @@ export default function TaskApp() {
 }
 ```
 
-```js TasksContext.js
+```js src/TasksContext.js
 import { createContext, useContext, useReducer } from 'react';
 
 const TasksContext = createContext(null);
@@ -888,7 +888,7 @@ const initialTasks = [
 ];
 ```
 
-```js AddTask.js
+```js src/AddTask.js
 import { useState, useContext } from 'react';
 import { useTasksDispatch } from './TasksContext.js';
 
@@ -917,7 +917,7 @@ export default function AddTask({ onAddTask }) {
 let nextId = 3;
 ```
 
-```js TaskList.js
+```js src/TaskList.js
 import { useState, useContext } from 'react';
 import { useTasks, useTasksDispatch } from './TasksContext.js';
 
diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
index 3e91a7694..6d20232fb 100644
--- a/src/content/learn/manipulating-the-dom-with-refs.md
+++ b/src/content/learn/manipulating-the-dom-with-refs.md
@@ -124,35 +124,35 @@ export default function CatFriends() {
     <>
       <nav>
         <button onClick={handleScrollToFirstCat}>
-          Tom
+          Neo
         </button>
         <button onClick={handleScrollToSecondCat}>
-          Maru
+          Millie
         </button>
         <button onClick={handleScrollToThirdCat}>
-          Jellylorum
+          Bella
         </button>
       </nav>
       <div>
         <ul>
           <li>
             <img
-              src="https://placekitten.com/g/200/200"
-              alt="Tom"
+              src="https://placecats.com/neo/300/200"
+              alt="Neo"
               ref={firstCatRef}
             />
           </li>
           <li>
             <img
-              src="https://placekitten.com/g/300/200"
-              alt="Maru"
+              src="https://placecats.com/millie/200/200"
+              alt="Millie"
               ref={secondCatRef}
             />
           </li>
           <li>
             <img
-              src="https://placekitten.com/g/250/200"
-              alt="Jellylorum"
+              src="https://placecats.com/bella/199/200"
+              alt="Bella"
               ref={thirdCatRef}
             />
           </li>
@@ -218,18 +218,19 @@ This example shows how you can use this approach to scroll to an arbitrary node
 <Sandpack>
 
 ```js
-import { useRef } from 'react';
+import { useRef, useState } from "react";
 
 export default function CatFriends() {
   const itemsRef = useRef(null);
+  const [catList, setCatList] = useState(setupCatList);
 
-  function scrollToId(itemId) {
+  function scrollToCat(cat) {
     const map = getMap();
-    const node = map.get(itemId);
+    const node = map.get(cat);
     node.scrollIntoView({
-      behavior: 'smooth',
-      block: 'nearest',
-      inline: 'center'
+      behavior: "smooth",
+      block: "nearest",
+      inline: "center",
     });
   }
 
@@ -244,34 +245,25 @@ export default function CatFriends() {
   return (
     <>
       <nav>
-        <button onClick={() => scrollToId(0)}>
-          Tom
-        </button>
-        <button onClick={() => scrollToId(5)}>
-          Maru
-        </button>
-        <button onClick={() => scrollToId(9)}>
-          Jellylorum
-        </button>
+        <button onClick={() => scrollToCat(catList[0])}>Neo</button>
+        <button onClick={() => scrollToCat(catList[5])}>Millie</button>
+        <button onClick={() => scrollToCat(catList[9])}>Bella</button>
       </nav>
       <div>
         <ul>
-          {catList.map(cat => (
+          {catList.map((cat) => (
             <li
-              key={cat.id}
+              key={cat}
               ref={(node) => {
                 const map = getMap();
-                if (node) {
-                  map.set(cat.id, node);
-                } else {
-                  map.delete(cat.id);
-                }
+                map.set(cat, node);
+
+                return () => {
+                  map.delete(cat);
+                };
               }}
             >
-              <img
-                src={cat.imageUrl}
-                alt={'Cat #' + cat.id}
-              />
+              <img src={cat} />
             </li>
           ))}
         </ul>
@@ -280,12 +272,13 @@ export default function CatFriends() {
   );
 }
 
-const catList = [];
-for (let i = 0; i < 10; i++) {
-  catList.push({
-    id: i,
-    imageUrl: 'https://placekitten.com/250/200?image=' + i
-  });
+function setupCatList() {
+  const catList = [];
+  for (let i = 0; i < 10; i++) {
+    catList.push("https://loremflickr.com/320/240/cat?lock=" + i);
+  }
+
+  return catList;
 }
 
 ```
@@ -325,19 +318,27 @@ In this example, `itemsRef` doesn't hold a single DOM node. Instead, it holds a
   key={cat.id}
   ref={node => {
     const map = getMap();
-    if (node) {
-      // Add to the Map
-      map.set(cat.id, node);
-    } else {
+    // Add to the Map
+    map.set(cat, node);
+
+    return () => {
       // Remove from the Map
-      map.delete(cat.id);
-    }
+      map.delete(cat);
+    };
   }}
 >
 ```
 
 This lets you read individual DOM nodes from the Map later.
 
+<Note>
+
+When Strict Mode is enabled, ref callbacks will run twice in development.
+
+Read more about [how this helps find bugs](/reference/react/StrictMode#fixing-bugs-found-by-re-running-ref-callbacks-in-development) in callback refs.
+
+</Note>
+
 </DeepDive>
 
 ## Accessing another component's DOM nodes {/*accessing-another-components-dom-nodes*/}
@@ -493,7 +494,7 @@ In general, you [don't want](/learn/referencing-values-with-refs#best-practices-
 
 React sets `ref.current` during the commit. Before updating the DOM, React sets the affected `ref.current` values to `null`. After updating the DOM, React immediately sets them to the corresponding DOM nodes.
 
-**Usually, you will access refs from event handlers.** If you want to do something with a ref, but there is no particular event to do it in, you might need an Effect. We will discuss effects on the next pages.
+**Usually, you will access refs from event handlers.** If you want to do something with a ref, but there is no particular event to do it in, you might need an Effect. We will discuss Effects on the next pages.
 
 <DeepDive>
 
@@ -923,7 +924,7 @@ const catList = [];
 for (let i = 0; i < 10; i++) {
   catList.push({
     id: i,
-    imageUrl: 'https://placekitten.com/250/200?image=' + i
+    imageUrl: 'https://loremflickr.com/250/200/cat?lock=' + i
   });
 }
 
@@ -1040,7 +1041,7 @@ const catList = [];
 for (let i = 0; i < 10; i++) {
   catList.push({
     id: i,
-    imageUrl: 'https://placekitten.com/250/200?image=' + i
+    imageUrl: 'https://loremflickr.com/250/200/cat?lock=' + i
   });
 }
 
@@ -1098,7 +1099,7 @@ You'll need `forwardRef` to opt into exposing a DOM node from your own component
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import SearchButton from './SearchButton.js';
 import SearchInput from './SearchInput.js';
 
@@ -1114,7 +1115,7 @@ export default function Page() {
 }
 ```
 
-```js SearchButton.js
+```js src/SearchButton.js
 export default function SearchButton() {
   return (
     <button>
@@ -1124,7 +1125,7 @@ export default function SearchButton() {
 }
 ```
 
-```js SearchInput.js
+```js src/SearchInput.js
 export default function SearchInput() {
   return (
     <input
@@ -1146,7 +1147,7 @@ You'll need to add an `onClick` prop to the `SearchButton`, and make the `Search
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useRef } from 'react';
 import SearchButton from './SearchButton.js';
 import SearchInput from './SearchInput.js';
@@ -1166,7 +1167,7 @@ export default function Page() {
 }
 ```
 
-```js SearchButton.js
+```js src/SearchButton.js
 export default function SearchButton({ onClick }) {
   return (
     <button onClick={onClick}>
@@ -1176,7 +1177,7 @@ export default function SearchButton({ onClick }) {
 }
 ```
 
-```js SearchInput.js
+```js src/SearchInput.js
 import { forwardRef } from 'react';
 
 export default forwardRef(
diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md
index 45c5e77da..1aea87b35 100644
--- a/src/content/learn/passing-data-deeply-with-context.md
+++ b/src/content/learn/passing-data-deeply-with-context.md
@@ -64,7 +64,7 @@ export default function Page() {
 }
 ```
 
-```js Section.js
+```js src/Section.js
 export default function Section({ children }) {
   return (
     <section className="section">
@@ -74,7 +74,7 @@ export default function Section({ children }) {
 }
 ```
 
-```js Heading.js
+```js src/Heading.js
 export default function Heading({ level, children }) {
   switch (level) {
     case 1:
@@ -138,7 +138,7 @@ export default function Page() {
 }
 ```
 
-```js Section.js
+```js src/Section.js
 export default function Section({ children }) {
   return (
     <section className="section">
@@ -148,7 +148,7 @@ export default function Section({ children }) {
 }
 ```
 
-```js Heading.js
+```js src/Heading.js
 export default function Heading({ level, children }) {
   switch (level) {
     case 1:
@@ -260,7 +260,7 @@ export default function Page() {
 }
 ```
 
-```js Section.js
+```js src/Section.js
 export default function Section({ children }) {
   return (
     <section className="section">
@@ -270,7 +270,7 @@ export default function Section({ children }) {
 }
 ```
 
-```js Heading.js
+```js src/Heading.js
 export default function Heading({ level, children }) {
   switch (level) {
     case 1:
@@ -291,7 +291,7 @@ export default function Heading({ level, children }) {
 }
 ```
 
-```js LevelContext.js active
+```js src/LevelContext.js active
 import { createContext } from 'react';
 
 export const LevelContext = createContext(1);
@@ -390,7 +390,7 @@ export default function Page() {
 }
 ```
 
-```js Section.js
+```js src/Section.js
 export default function Section({ children }) {
   return (
     <section className="section">
@@ -400,7 +400,7 @@ export default function Section({ children }) {
 }
 ```
 
-```js Heading.js
+```js src/Heading.js
 import { useContext } from 'react';
 import { LevelContext } from './LevelContext.js';
 
@@ -425,7 +425,7 @@ export default function Heading({ children }) {
 }
 ```
 
-```js LevelContext.js
+```js src/LevelContext.js
 import { createContext } from 'react';
 
 export const LevelContext = createContext(1);
@@ -508,7 +508,7 @@ export default function Page() {
 }
 ```
 
-```js Section.js
+```js src/Section.js
 import { LevelContext } from './LevelContext.js';
 
 export default function Section({ level, children }) {
@@ -522,7 +522,7 @@ export default function Section({ level, children }) {
 }
 ```
 
-```js Heading.js
+```js src/Heading.js
 import { useContext } from 'react';
 import { LevelContext } from './LevelContext.js';
 
@@ -547,7 +547,7 @@ export default function Heading({ children }) {
 }
 ```
 
-```js LevelContext.js
+```js src/LevelContext.js
 import { createContext } from 'react';
 
 export const LevelContext = createContext(1);
@@ -587,7 +587,7 @@ export default function Page() {
 
 Since context lets you read information from a component above, each `Section` could read the `level` from the `Section` above, and pass `level + 1` down automatically. Here is how you could do it:
 
-```js Section.js {5,8}
+```js src/Section.js {5,8}
 import { useContext } from 'react';
 import { LevelContext } from './LevelContext.js';
 
@@ -635,7 +635,7 @@ export default function Page() {
 }
 ```
 
-```js Section.js
+```js src/Section.js
 import { useContext } from 'react';
 import { LevelContext } from './LevelContext.js';
 
@@ -651,7 +651,7 @@ export default function Section({ children }) {
 }
 ```
 
-```js Heading.js
+```js src/Heading.js
 import { useContext } from 'react';
 import { LevelContext } from './LevelContext.js';
 
@@ -678,7 +678,7 @@ export default function Heading({ children }) {
 }
 ```
 
-```js LevelContext.js
+```js src/LevelContext.js
 import { createContext } from 'react';
 
 export const LevelContext = createContext(0);
@@ -765,7 +765,7 @@ function Post({ title, body }) {
 }
 ```
 
-```js Section.js
+```js src/Section.js
 import { useContext } from 'react';
 import { LevelContext } from './LevelContext.js';
 
@@ -784,7 +784,7 @@ export default function Section({ children, isFancy }) {
 }
 ```
 
-```js Heading.js
+```js src/Heading.js
 import { useContext } from 'react';
 import { LevelContext } from './LevelContext.js';
 
@@ -811,7 +811,7 @@ export default function Heading({ children }) {
 }
 ```
 
-```js LevelContext.js
+```js src/LevelContext.js
 import { createContext } from 'react';
 
 export const LevelContext = createContext(0);
@@ -887,7 +887,7 @@ You can declare context in `Context.js`.
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import { places } from './data.js';
 import { getImageUrl } from './utils.js';
@@ -952,11 +952,11 @@ function PlaceImage({ place, imageSize }) {
 }
 ```
 
-```js Context.js
+```js src/Context.js
 
 ```
 
-```js data.js
+```js src/data.js
 export const places = [{
   id: 0,
   name: 'Bo-Kaap in Cape Town, South Africa',
@@ -985,7 +985,7 @@ export const places = [{
 }, {
   id: 5, 
   name: 'Chefchaouen, Marocco',
-  description: 'There are a few theories on why the houses are painted blue, including that the color repells mosquitos or that it symbolizes sky and heaven.',
+  description: 'There are a few theories on why the houses are painted blue, including that the color repels mosquitos or that it symbolizes sky and heaven.',
   imageId: 'rTqKo46'
 }, {
   id: 6,
@@ -995,7 +995,7 @@ export const places = [{
 }];
 ```
 
-```js utils.js
+```js src/utils.js
 export function getImageUrl(place) {
   return (
     'https://i.imgur.com/' +
@@ -1026,7 +1026,7 @@ Create and export `ImageSizeContext` from `Context.js`. Then wrap the List into
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState, useContext } from 'react';
 import { places } from './data.js';
 import { getImageUrl } from './utils.js';
@@ -1089,13 +1089,13 @@ function PlaceImage({ place }) {
 }
 ```
 
-```js Context.js
+```js src/Context.js
 import { createContext } from 'react';
 
 export const ImageSizeContext = createContext(500);
 ```
 
-```js data.js
+```js src/data.js
 export const places = [{
   id: 0,
   name: 'Bo-Kaap in Cape Town, South Africa',
@@ -1124,7 +1124,7 @@ export const places = [{
 }, {
   id: 5, 
   name: 'Chefchaouen, Marocco',
-  description: 'There are a few theories on why the houses are painted blue, including that the color repells mosquitos or that it symbolizes sky and heaven.',
+  description: 'There are a few theories on why the houses are painted blue, including that the color repels mosquitos or that it symbolizes sky and heaven.',
   imageId: 'rTqKo46'
 }, {
   id: 6,
@@ -1134,7 +1134,7 @@ export const places = [{
 }];
 ```
 
-```js utils.js
+```js src/utils.js
 export function getImageUrl(place) {
   return (
     'https://i.imgur.com/' +
diff --git a/src/content/learn/passing-props-to-a-component.md b/src/content/learn/passing-props-to-a-component.md
index da5fc5efc..aae682d14 100644
--- a/src/content/learn/passing-props-to-a-component.md
+++ b/src/content/learn/passing-props-to-a-component.md
@@ -106,7 +106,7 @@ Now you can configure `Avatar` to render in many different ways with different p
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { getImageUrl } from './utils.js';
 
 function Avatar({ person, size }) {
@@ -150,7 +150,7 @@ export default function Profile() {
 }
 ```
 
-```js utils.js
+```js src/utils.js
 export function getImageUrl(person, size = 's') {
   return (
     'https://i.imgur.com/' +
@@ -275,7 +275,7 @@ When you nest content inside a JSX tag, the parent component will receive that c
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import Avatar from './Avatar.js';
 
 function Card({ children }) {
@@ -301,7 +301,7 @@ export default function Profile() {
 }
 ```
 
-```js Avatar.js
+```js src/Avatar.js
 import { getImageUrl } from './utils.js';
 
 export default function Avatar({ person, size }) {
@@ -317,7 +317,7 @@ export default function Avatar({ person, size }) {
 }
 ```
 
-```js utils.js
+```js src/utils.js
 export function getImageUrl(person, size = 's') {
   return (
     'https://i.imgur.com/' +
@@ -361,7 +361,7 @@ Try changing the color in the select box below:
 
 <Sandpack>
 
-```js Clock.js active
+```js src/Clock.js active
 export default function Clock({ color, time }) {
   return (
     <h1 style={{ color: color }}>
@@ -371,7 +371,7 @@ export default function Clock({ color, time }) {
 }
 ```
 
-```js App.js hidden
+```js src/App.js hidden
 import { useState, useEffect } from 'react';
 import Clock from './Clock.js';
 
@@ -435,7 +435,7 @@ This `Gallery` component contains some very similar markup for two profiles. Ext
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { getImageUrl } from './utils.js';
 
 export default function Gallery() {
@@ -462,7 +462,7 @@ export default function Gallery() {
           </li>
           <li>
             <b>Discovered: </b>
-            polonium (element)
+            polonium (chemical element)
           </li>
         </ul>
       </section>
@@ -495,7 +495,7 @@ export default function Gallery() {
 }
 ```
 
-```js utils.js
+```js src/utils.js
 export function getImageUrl(imageId, size = 's') {
   return (
     'https://i.imgur.com/' +
@@ -536,7 +536,7 @@ Note that the `imageSize` prop has a default value, which is why we don't pass i
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { getImageUrl } from './utils.js';
 
 function Profile({
@@ -603,7 +603,7 @@ export default function Gallery() {
 }
 ```
 
-```js utils.js
+```js src/utils.js
 export function getImageUrl(imageId, size = 's') {
   return (
     'https://i.imgur.com/' +
@@ -636,7 +636,7 @@ Another solution, which is more similar to the earlier examples on this page, is
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { getImageUrl } from './utils.js';
 
 function Profile({ person, imageSize = 70 }) {
@@ -700,7 +700,7 @@ export default function Gallery() {
 }
 ```
 
-```js utils.js
+```js src/utils.js
 export function getImageUrl(person, size = 's') {
   return (
     'https://i.imgur.com/' +
@@ -739,7 +739,7 @@ Change the `Avatar` component to request the closest image size based on the `si
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { getImageUrl } from './utils.js';
 
 function Avatar({ person, size }) {
@@ -767,7 +767,7 @@ export default function Profile() {
 }
 ```
 
-```js utils.js
+```js src/utils.js
 export function getImageUrl(person, size) {
   return (
     'https://i.imgur.com/' +
@@ -790,7 +790,7 @@ Here is how you could go about it:
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { getImageUrl } from './utils.js';
 
 function Avatar({ person, size }) {
@@ -831,7 +831,7 @@ export default function Profile() {
 }
 ```
 
-```js utils.js
+```js src/utils.js
 export function getImageUrl(person, size) {
   return (
     'https://i.imgur.com/' +
@@ -852,7 +852,7 @@ You could also show a sharper image for high DPI screens by taking [`window.devi
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { getImageUrl } from './utils.js';
 
 const ratio = window.devicePixelRatio;
@@ -902,7 +902,7 @@ export default function Profile() {
 }
 ```
 
-```js utils.js
+```js src/utils.js
 export function getImageUrl(person, size) {
   return (
     'https://i.imgur.com/' +
diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md
index 214688597..d35071845 100644
--- a/src/content/learn/preserving-and-resetting-state.md
+++ b/src/content/learn/preserving-and-resetting-state.md
@@ -10,33 +10,17 @@ State is isolated between components. React keeps track of which state belongs t
 
 <YouWillLearn>
 
-* How React "sees" component structures
 * When React chooses to preserve or reset the state
 * How to force React to reset component's state
 * How keys and types affect whether the state is preserved
 
 </YouWillLearn>
 
-## The UI tree {/*the-ui-tree*/}
+## State is tied to a position in the render tree {/*state-is-tied-to-a-position-in-the-tree*/}
 
-Browsers use many tree structures to model UI. The [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) represents HTML elements, the [CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model) does the same for CSS. There's even an [Accessibility tree](https://developer.mozilla.org/docs/Glossary/Accessibility_tree)!
-
-React also uses tree structures to manage and model the UI you make. React makes **UI trees** from your JSX. Then React DOM updates the browser DOM elements to match that UI tree. (React Native translates these trees into elements specific to mobile platforms.)
-
-<DiagramGroup>
-
-<Diagram name="preserving_state_dom_tree" height={193} width={864} alt="Diagram with three sections arranged horizontally. In the first section, there are three rectangles stacked vertically, with labels 'Component A', 'Component B', and 'Component C'. Transitioning to the next pane is an arrow with the React logo on top labeled 'React'. The middle section contains a tree of components, with the root labeled 'A' and two children labeled 'B' and 'C'. The next section is again transitioned using an arrow with the React logo on top labeled 'React'. The third and final section is a wireframe of a browser, containing a tree of 8 nodes, which has only a subset highlighted (indicating the subtree from the middle section).">
-
-From components, React creates a UI tree which React DOM uses to render the DOM
-
-</Diagram>
-
-</DiagramGroup>
-
-## State is tied to a position in the tree {/*state-is-tied-to-a-position-in-the-tree*/}
-
-When you give a component state, you might think the state "lives" inside the component. But the state is actually held inside React. React associates each piece of state it's holding with the correct component by where that component sits in the UI tree.
+React builds [render trees](learn/understanding-your-ui-as-a-tree#the-render-tree) for the component structure in your UI.
 
+When you give a component state, you might think the state "lives" inside the component. But the state is actually held inside React. React associates each piece of state it's holding with the correct component by where that component sits in the render tree.
 
 Here, there is only one `<Counter />` JSX tag, but it's rendered at two different positions:
 
@@ -190,7 +174,7 @@ Updating state
 </DiagramGroup>
 
 
-React will keep the state around for as long as you render the same component at the same position. To see this, increment both counters, then remove the second component by unchecking "Render the second counter" checkbox, and then add it back by ticking it again:
+React will keep the state around for as long as you render the same component at the same position in the tree. To see this, increment both counters, then remove the second component by unchecking "Render the second counter" checkbox, and then add it back by ticking it again:
 
 <Sandpack>
 
@@ -935,7 +919,7 @@ Clicking "next" again
 
 </DiagramGroup>
 
-Each `Counter`'s state gets destroyed each time its removed from the DOM. This is why they reset every time you click the button.
+Each `Counter`'s state gets destroyed each time it's removed from the DOM. This is why they reset every time you click the button.
 
 This solution is convenient when you only have a few independent components rendered in the same place. In this example, you only have two, so it's not a hassle to render both separately in the JSX.
 
@@ -1041,7 +1025,7 @@ In this chat app, the `<Chat>` component contains the text input state:
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import Chat from './Chat.js';
 import ContactList from './ContactList.js';
@@ -1067,7 +1051,7 @@ const contacts = [
 ];
 ```
 
-```js ContactList.js
+```js src/ContactList.js
 export default function ContactList({
   selectedContact,
   contacts,
@@ -1091,7 +1075,7 @@ export default function ContactList({
 }
 ```
 
-```js Chat.js
+```js src/Chat.js
 import { useState } from 'react';
 
 export default function Chat({ contact }) {
@@ -1146,7 +1130,7 @@ Now switching the recipient always clears the text field:
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import Chat from './Chat.js';
 import ContactList from './ContactList.js';
@@ -1172,7 +1156,7 @@ const contacts = [
 ];
 ```
 
-```js ContactList.js
+```js src/ContactList.js
 export default function ContactList({
   selectedContact,
   contacts,
@@ -1196,7 +1180,7 @@ export default function ContactList({
 }
 ```
 
-```js Chat.js
+```js src/Chat.js
 import { useState } from 'react';
 
 export default function Chat({ contact }) {
@@ -1270,7 +1254,7 @@ This example shows a message when you press the button. However, pressing the bu
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 
 export default function App() {
@@ -1321,7 +1305,7 @@ The easiest solution is to unify the branches so that `Form` always renders in t
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 
 export default function App() {
@@ -1367,7 +1351,7 @@ Technically, you could also add `null` before `<Form />` in the `else` branch to
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 
 export default function App() {
@@ -1429,7 +1413,7 @@ It seems like for these fields, their position within the parent is not enough.
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 
 export default function App() {
@@ -1491,7 +1475,7 @@ Give a `key` to both `<Field>` components in both `if` and `else` branches. This
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 
 export default function App() {
@@ -1557,7 +1541,7 @@ When you select a different contact (for example, Alice), the state updates but
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import ContactList from './ContactList.js';
 import EditContact from './EditContact.js';
@@ -1609,7 +1593,7 @@ const initialContacts = [
 ];
 ```
 
-```js ContactList.js
+```js src/ContactList.js
 export default function ContactList({
   contacts,
   selectedId,
@@ -1636,7 +1620,7 @@ export default function ContactList({
 }
 ```
 
-```js EditContact.js
+```js src/EditContact.js
 import { useState } from 'react';
 
 export default function EditContact({ initialData, onSave }) {
@@ -1709,7 +1693,7 @@ Give `key={selectedId}` to the `EditContact` component. This way, switching betw
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import ContactList from './ContactList.js';
 import EditContact from './EditContact.js';
@@ -1762,7 +1746,7 @@ const initialContacts = [
 ];
 ```
 
-```js ContactList.js
+```js src/ContactList.js
 export default function ContactList({
   contacts,
   selectedId,
@@ -1789,7 +1773,7 @@ export default function ContactList({
 }
 ```
 
-```js EditContact.js
+```js src/EditContact.js
 import { useState } from 'react';
 
 export default function EditContact({ initialData, onSave }) {
@@ -2010,7 +1994,7 @@ Fix it so that the expanded state is associated with each contact, regardless of
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import Contact from './Contact.js';
 
@@ -2052,7 +2036,7 @@ const contacts = [
 ];
 ```
 
-```js Contact.js
+```js src/Contact.js
 import { useState } from 'react';
 
 export default function Contact({ contact }) {
@@ -2109,7 +2093,7 @@ Using the contact ID as a `key` instead fixes the issue:
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import Contact from './Contact.js';
 
@@ -2151,7 +2135,7 @@ const contacts = [
 ];
 ```
 
-```js Contact.js
+```js src/Contact.js
 import { useState } from 'react';
 
 export default function Contact({ contact }) {
diff --git a/src/content/learn/queueing-a-series-of-state-updates.md b/src/content/learn/queueing-a-series-of-state-updates.md
index a63b7205b..41de6529a 100644
--- a/src/content/learn/queueing-a-series-of-state-updates.md
+++ b/src/content/learn/queueing-a-series-of-state-updates.md
@@ -404,7 +404,7 @@ Fill out the missing lines!
 
 <Sandpack>
 
-```js processQueue.js active
+```js src/processQueue.js active
 export function getFinalState(baseState, queue) {
   let finalState = baseState;
 
@@ -414,7 +414,7 @@ export function getFinalState(baseState, queue) {
 }
 ```
 
-```js App.js
+```js src/App.js
 import { getFinalState } from './processQueue.js';
 
 function increment(n) {
@@ -499,7 +499,7 @@ This is the exact algorithm described on this page that React uses to calculate
 
 <Sandpack>
 
-```js processQueue.js active
+```js src/processQueue.js active
 export function getFinalState(baseState, queue) {
   let finalState = baseState;
 
@@ -517,7 +517,7 @@ export function getFinalState(baseState, queue) {
 }
 ```
 
-```js App.js
+```js src/App.js
 import { getFinalState } from './processQueue.js';
 
 function increment(n) {
diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md
new file mode 100644
index 000000000..5362d69e1
--- /dev/null
+++ b/src/content/learn/react-compiler.md
@@ -0,0 +1,378 @@
+---
+title: React Compiler
+---
+
+<Intro>
+This page will give you an introduction to React Compiler and how to try it out successfully.
+</Intro>
+
+<Wip>
+These docs are still a work in progress. More documentation is available in the [React Compiler Working Group repo](https://github.com/reactwg/react-compiler/discussions), and will be upstreamed into these docs when they are more stable.
+</Wip>
+
+<YouWillLearn>
+
+* Getting started with the compiler
+* Installing the compiler and ESLint plugin
+* Troubleshooting
+
+</YouWillLearn>
+
+<Note>
+React Compiler is a new compiler currently in Beta, that we've open sourced to get early feedback from the community. While it has been used in production at companies like Meta, rolling out the compiler to production for your app will depend on the health of your codebase and how well you’ve followed the [Rules of React](/reference/rules).
+
+The latest Beta release can be found with the `@beta` tag, and daily experimental releases with `@experimental`.
+</Note>
+
+React Compiler is a new compiler that we've open sourced to get early feedback from the community. It is a build-time only tool that automatically optimizes your React app. It works with plain JavaScript, and understands the [Rules of React](/reference/rules), so you don't need to rewrite any code to use it.
+
+The compiler also includes an [ESLint plugin](#installing-eslint-plugin-react-compiler) that surfaces the analysis from the compiler right in your editor. **We strongly recommend everyone use the linter today.** The linter does not require that you have the compiler installed, so you can use it even if you are not ready to try out the compiler.
+
+The compiler is currently released as `beta`, and is available to try out on React 17+ apps and libraries. To install the Beta:
+
+<TerminalBlock>
+npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
+</TerminalBlock>
+
+Or, if you're using Yarn:
+
+<TerminalBlock>
+yarn add -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
+</TerminalBlock>
+
+If you are not using React 19 yet, please see [the section below](#using-react-compiler-with-react-17-or-18) for further instructions.
+
+### What does the compiler do? {/*what-does-the-compiler-do*/}
+
+In order to optimize applications, React Compiler automatically memoizes your code. You may be familiar today with memoization through APIs such as `useMemo`, `useCallback`, and `React.memo`. With these APIs you can tell React that certain parts of your application don't need to recompute if their inputs haven't changed, reducing work on updates. While powerful, it's easy to forget to apply memoization or apply them incorrectly. This can lead to inefficient updates as React has to check parts of your UI that don't have any _meaningful_ changes.
+
+The compiler uses its knowledge of JavaScript and React's rules to automatically memoize values or groups of values within your components and hooks. If it detects breakages of the rules, it will automatically skip over just those components or hooks, and continue safely compiling other code.
+
+<Note>
+React Compiler can statically detect when Rules of React are broken, and safely opt-out of optimizing just the affected components or hooks. It is not necessary for the compiler to optimize 100% of your codebase.
+</Note>
+
+If your codebase is already very well-memoized, you might not expect to see major performance improvements with the compiler. However, in practice memoizing the correct dependencies that cause performance issues is tricky to get right by hand.
+
+<DeepDive>
+#### What kind of memoization does React Compiler add? {/*what-kind-of-memoization-does-react-compiler-add*/}
+
+The initial release of React Compiler is primarily focused on **improving update performance** (re-rendering existing components), so it focuses on these two use cases:
+
+1. **Skipping cascading re-rendering of components**
+    * Re-rendering `<Parent />` causes many components in its component tree to re-render, even though only `<Parent />` has changed
+1. **Skipping expensive calculations from outside of React**
+    * For example, calling `expensivelyProcessAReallyLargeArrayOfObjects()` inside of your component or hook that needs that data
+
+#### Optimizing Re-renders {/*optimizing-re-renders*/}
+
+React lets you express your UI as a function of their current state (more concretely: their props, state, and context). In its current implementation, when a component's state changes, React will re-render that component _and all of its children_ — unless you have applied some form of manual memoization with `useMemo()`, `useCallback()`, or `React.memo()`. For example, in the following example, `<MessageButton>` will re-render whenever `<FriendList>`'s state changes:
+
+```javascript
+function FriendList({ friends }) {
+  const onlineCount = useFriendOnlineCount();
+  if (friends.length === 0) {
+    return <NoFriends />;
+  }
+  return (
+    <div>
+      <span>{onlineCount} online</span>
+      {friends.map((friend) => (
+        <FriendListCard key={friend.id} friend={friend} />
+      ))}
+      <MessageButton />
+    </div>
+  );
+}
+```
+[_See this example in the React Compiler Playground_](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAYjHgpgCYAyeYOAFMEWuZVWEQL4CURwADrEicQgyKEANnkwIAwtEw4iAXiJQwCMhWoB5TDLmKsTXgG5hRInjRFGbXZwB0UygHMcACzWr1ABn4hEWsYBBxYYgAeADkIHQ4uAHoAPksRbisiMIiYYkYs6yiqPAA3FMLrIiiwAAcAQ0wU4GlZBSUcbklDNqikusaKkKrgR0TnAFt62sYHdmp+VRT7SqrqhOo6Bnl6mCoiAGsEAE9VUfmqZzwqLrHqM7ubolTVol5eTOGigFkEMDB6u4EAAhKA4HCEZ5DNZ9ErlLIWYTcEDcIA)
+
+React Compiler automatically applies the equivalent of manual memoization, ensuring that only the relevant parts of an app re-render as state changes, which is sometimes referred to as "fine-grained reactivity". In the above example, React Compiler determines that the return value of `<FriendListCard />` can be reused even as `friends` changes, and can avoid recreating this JSX _and_ avoid re-rendering `<MessageButton>` as the count changes.
+
+#### Expensive calculations also get memoized {/*expensive-calculations-also-get-memoized*/}
+
+The compiler can also automatically memoize for expensive calculations used during rendering:
+
+```js
+// **Not** memoized by React Compiler, since this is not a component or hook
+function expensivelyProcessAReallyLargeArrayOfObjects() { /* ... */ }
+
+// Memoized by React Compiler since this is a component
+function TableContainer({ items }) {
+  // This function call would be memoized:
+  const data = expensivelyProcessAReallyLargeArrayOfObjects(items);
+  // ...
+}
+```
+[_See this example in the React Compiler Playground_](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAejQAgFTYHIQAuumAtgqRAJYBeCAJpgEYCemASggIZyGYDCEUgAcqAGwQwANJjBUAdokyEAFlTCZ1meUUxdMcIcIjyE8vhBiYVECAGsAOvIBmURYSonMCAB7CzcgBuCGIsAAowEIhgYACCnFxioQAyXDAA5gixMDBcLADyzvlMAFYIvGAAFACUmMCYaNiYAHStOFgAvk5OGJgAshTUdIysHNy8AkbikrIKSqpaWvqGIiZmhE6u7p7ymAAqXEwSguZcCpKV9VSEFBodtcBOmAYmYHz0XIT6ALzefgFUYKhCJRBAxeLcJIsVIZLI5PKFYplCqVa63aoAbm6u0wMAQhFguwAPPRAQA+YAfL4dIloUmBMlODogDpAA)
+
+However, if `expensivelyProcessAReallyLargeArrayOfObjects` is truly an expensive function, you may want to consider implementing its own memoization outside of React, because:
+
+- React Compiler only memoizes React components and hooks, not every function
+- React Compiler's memoization is not shared across multiple components or hooks
+
+So if `expensivelyProcessAReallyLargeArrayOfObjects` was used in many different components, even if the same exact items were passed down, that expensive calculation would be run repeatedly. We recommend [profiling](https://react.dev/reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive) first to see if it really is that expensive before making code more complicated.
+</DeepDive>
+
+### Should I try out the compiler? {/*should-i-try-out-the-compiler*/}
+
+Please note that the compiler is still in Beta and has many rough edges. While it has been used in production at companies like Meta, rolling out the compiler to production for your app will depend on the health of your codebase and how well you've followed the [Rules of React](/reference/rules).
+
+**You don't have to rush into using the compiler now. It's okay to wait until it reaches a stable release before adopting it.** However, we do appreciate trying it out in small experiments in your apps so that you can [provide feedback](#reporting-issues) to us to help make the compiler better.
+
+## Getting Started {/*getting-started*/}
+
+In addition to these docs, we recommend checking the [React Compiler Working Group](https://github.com/reactwg/react-compiler) for additional information and discussion about the compiler.
+
+### Installing eslint-plugin-react-compiler {/*installing-eslint-plugin-react-compiler*/}
+
+React Compiler also powers an ESLint plugin. The ESLint plugin can be used **independently** of the compiler, meaning you can use the ESLint plugin even if you don't use the compiler.
+
+<TerminalBlock>
+npm install -D eslint-plugin-react-compiler@beta
+</TerminalBlock>
+
+Then, add it to your ESLint config:
+
+```js
+import reactCompiler from 'eslint-plugin-react-compiler'
+
+export default [
+  {
+    plugins: {
+      'react-compiler': reactCompiler,
+    },
+    rules: {
+      'react-compiler/react-compiler': 'error',
+    },
+  },
+]
+```
+
+Or, in the deprecated eslintrc config format:
+
+```js
+module.exports = {
+  plugins: [
+    'eslint-plugin-react-compiler',
+  ],
+  rules: {
+    'react-compiler/react-compiler': 'error',
+  },
+}
+```
+
+The ESLint plugin will display any violations of the rules of React in your editor. When it does this, it means that the compiler has skipped over optimizing that component or hook. This is perfectly okay, and the compiler can recover and continue optimizing other components in your codebase.
+
+<Note>
+**You don't have to fix all ESLint violations straight away.** You can address them at your own pace to increase the amount of components and hooks being optimized, but it is not required to fix everything before you can use the compiler.
+</Note>
+
+### Rolling out the compiler to your codebase {/*using-the-compiler-effectively*/}
+
+#### Existing projects {/*existing-projects*/}
+The compiler is designed to compile functional components and hooks that follow the [Rules of React](/reference/rules). It can also handle code that breaks those rules by bailing out (skipping over) those components or hooks. However, due to the flexible nature of JavaScript, the compiler cannot catch every possible violation and may compile with false negatives: that is, the compiler may accidentally compile a component/hook that breaks the Rules of React which can lead to undefined behavior.
+
+For this reason, to adopt the compiler successfully on existing projects, we recommend running it on a small directory in your product code first. You can do this by configuring the compiler to only run on a specific set of directories:
+
+```js {3}
+const ReactCompilerConfig = {
+  sources: (filename) => {
+    return filename.indexOf('src/path/to/dir') !== -1;
+  },
+};
+```
+
+When you have more confidence with rolling out the compiler, you can expand coverage to other directories as well and slowly roll it out to your whole app.
+
+#### New projects {/*new-projects*/}
+
+If you're starting a new project, you can enable the compiler on your entire codebase, which is the default behavior.
+
+### Using React Compiler with React 17 or 18 {/*using-react-compiler-with-react-17-or-18*/}
+
+React Compiler works best with React 19 RC. If you are unable to upgrade, you can install the extra `react-compiler-runtime` package which will allow the compiled code to run on versions prior to 19. However, note that the minimum supported version is 17.
+
+<TerminalBlock>
+npm install react-compiler-runtime@beta
+</TerminalBlock>
+
+You should also add the correct `target` to your compiler config, where `target` is the major version of React you are targeting:
+
+```js {3}
+// babel.config.js
+const ReactCompilerConfig = {
+  target: '18' // '17' | '18' | '19'
+};
+
+module.exports = function () {
+  return {
+    plugins: [
+      ['babel-plugin-react-compiler', ReactCompilerConfig],
+    ],
+  };
+};
+```
+
+### Using the compiler on libraries {/*using-the-compiler-on-libraries*/}
+
+React Compiler can also be used to compile libraries. Because React Compiler needs to run on the original source code prior to any code transformations, it is not possible for an application's build pipeline to compile the libraries they use. Hence, our recommendation is for library maintainers to independently compile and test their libraries with the compiler, and ship compiled code to npm.
+
+Because your code is pre-compiled, users of your library will not need to have the compiler enabled in order to benefit from the automatic memoization applied to your library. If your library targets apps not yet on React 19, specify a minimum [`target` and add `react-compiler-runtime` as a direct dependency](#using-react-compiler-with-react-17-or-18). The runtime package will use the correct implementation of APIs depending on the application's version, and polyfill the missing APIs if necessary.
+
+Library code can often require more complex patterns and usage of escape hatches. For this reason, we recommend ensuring that you have sufficient testing in order to identify any issues that might arise from using the compiler on your library. If you identify any issues, you can always opt-out the specific components or hooks with the [`'use no memo'` directive](#something-is-not-working-after-compilation).
+
+Similarly to apps, it is not necessary to fully compile 100% of your components or hooks to see benefits in your library. A good starting point might be to identify the most performance sensitive parts of your library and ensuring that they don't break the [Rules of React](/reference/rules), which you can use `eslint-plugin-react-compiler` to identify.
+
+## Usage {/*installation*/}
+
+### Babel {/*usage-with-babel*/}
+
+<TerminalBlock>
+npm install babel-plugin-react-compiler@beta
+</TerminalBlock>
+
+The compiler includes a Babel plugin which you can use in your build pipeline to run the compiler.
+
+After installing, add it to your Babel config. Please note that it's critical that the compiler run **first** in the pipeline:
+
+```js {7}
+// babel.config.js
+const ReactCompilerConfig = { /* ... */ };
+
+module.exports = function () {
+  return {
+    plugins: [
+      ['babel-plugin-react-compiler', ReactCompilerConfig], // must run first!
+      // ...
+    ],
+  };
+};
+```
+
+`babel-plugin-react-compiler` should run first before other Babel plugins as the compiler requires the input source information for sound analysis.
+
+### Vite {/*usage-with-vite*/}
+
+If you use Vite, you can add the plugin to vite-plugin-react:
+
+```js {10}
+// vite.config.js
+const ReactCompilerConfig = { /* ... */ };
+
+export default defineConfig(() => {
+  return {
+    plugins: [
+      react({
+        babel: {
+          plugins: [
+            ["babel-plugin-react-compiler", ReactCompilerConfig],
+          ],
+        },
+      }),
+    ],
+    // ...
+  };
+});
+```
+
+### Next.js {/*usage-with-nextjs*/}
+
+Please refer to the [Next.js docs](https://nextjs.org/docs/app/api-reference/next-config-js/reactCompiler) for more information.
+
+### Remix {/*usage-with-remix*/}
+Install `vite-plugin-babel`, and add the compiler's Babel plugin to it:
+
+<TerminalBlock>
+npm install vite-plugin-babel
+</TerminalBlock>
+
+```js {2,14}
+// vite.config.js
+import babel from "vite-plugin-babel";
+
+const ReactCompilerConfig = { /* ... */ };
+
+export default defineConfig({
+  plugins: [
+    remix({ /* ... */}),
+    babel({
+      filter: /\.[jt]sx?$/,
+      babelConfig: {
+        presets: ["@babel/preset-typescript"], // if you use TypeScript
+        plugins: [
+          ["babel-plugin-react-compiler", ReactCompilerConfig],
+        ],
+      },
+    }),
+  ],
+});
+```
+
+### Webpack {/*usage-with-webpack*/}
+
+A community Webpack loader is [now available here](https://github.com/SukkaW/react-compiler-webpack).
+
+### Expo {/*usage-with-expo*/}
+
+Please refer to [Expo's docs](https://docs.expo.dev/guides/react-compiler/) to enable and use the React Compiler in Expo apps.
+
+### Metro (React Native) {/*usage-with-react-native-metro*/}
+
+React Native uses Babel via Metro, so refer to the [Usage with Babel](#usage-with-babel) section for installation instructions.
+
+### Rspack {/*usage-with-rspack*/}
+
+Please refer to [Rspack's docs](https://rspack.dev/guide/tech/react#react-compiler) to enable and use the React Compiler in Rspack apps.
+
+### Rsbuild {/*usage-with-rsbuild*/}
+
+Please refer to [Rsbuild's docs](https://rsbuild.dev/guide/framework/react#react-compiler) to enable and use the React Compiler in Rsbuild apps.
+
+## Troubleshooting {/*troubleshooting*/}
+
+To report issues, please first create a minimal repro on the [React Compiler Playground](https://playground.react.dev/) and include it in your bug report. You can open issues in the [facebook/react](https://github.com/facebook/react/issues) repo.
+
+You can also provide feedback in the React Compiler Working Group by applying to be a member. Please see [the README for more details on joining](https://github.com/reactwg/react-compiler).
+
+### What does the compiler assume? {/*what-does-the-compiler-assume*/}
+
+React Compiler assumes that your code:
+
+1. Is valid, semantic JavaScript.
+2. Tests that nullable/optional values and properties are defined before accessing them (for example, by enabling [`strictNullChecks`](https://www.typescriptlang.org/tsconfig/#strictNullChecks) if using TypeScript), i.e., `if (object.nullableProperty) { object.nullableProperty.foo }` or with optional-chaining `object.nullableProperty?.foo`.
+3. Follows the [Rules of React](https://react.dev/reference/rules).
+
+React Compiler can verify many of the Rules of React statically, and will safely skip compilation when it detects an error. To see the errors we recommend also installing [eslint-plugin-react-compiler](https://www.npmjs.com/package/eslint-plugin-react-compiler).
+
+### How do I know my components have been optimized? {/*how-do-i-know-my-components-have-been-optimized*/}
+
+[React Devtools](/learn/react-developer-tools) (v5.0+) has built-in support for React Compiler and will display a "Memo ✨" badge next to components that have been optimized by the compiler.
+
+### Something is not working after compilation {/*something-is-not-working-after-compilation*/}
+If you have eslint-plugin-react-compiler installed, the compiler will display any violations of the rules of React in your editor. When it does this, it means that the compiler has skipped over optimizing that component or hook. This is perfectly okay, and the compiler can recover and continue optimizing other components in your codebase. **You don't have to fix all ESLint violations straight away.** You can address them at your own pace to increase the amount of components and hooks being optimized.
+
+Due to the flexible and dynamic nature of JavaScript however, it's not possible to comprehensively detect all cases. Bugs and undefined behavior such as infinite loops may occur in those cases.
+
+If your app doesn't work properly after compilation and you aren't seeing any ESLint errors, the compiler may be incorrectly compiling your code. To confirm this, try to make the issue go away by aggressively opting out any component or hook you think might be related via the [`"use no memo"` directive](#opt-out-of-the-compiler-for-a-component).
+
+```js {2}
+function SuspiciousComponent() {
+  "use no memo"; // opts out this component from being compiled by React Compiler
+  // ...
+}
+```
+
+<Note>
+#### `"use no memo"` {/*use-no-memo*/}
+
+`"use no memo"` is a _temporary_ escape hatch that lets you opt-out components and hooks from being compiled by the React Compiler. This directive is not meant to be long lived the same way as eg [`"use client"`](/reference/rsc/use-client) is.
+
+It is not recommended to reach for this directive unless it's strictly necessary. Once you opt-out a component or hook, it is opted-out forever until the directive is removed. This means that even if you fix the code, the compiler will still skip over compiling it unless you remove the directive.
+</Note>
+
+When you make the error go away, confirm that removing the opt out directive makes the issue come back. Then share a bug report with us (you can try to reduce it to a small repro, or if it's open source code you can also just paste the entire source) using the [React Compiler Playground](https://playground.react.dev) so we can identify and help fix the issue.
+
+### Other issues {/*other-issues*/}
+
+Please see https://github.com/reactwg/react-compiler/discussions/7.
diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md
index fa9179cd3..cce002b0f 100644
--- a/src/content/learn/react-developer-tools.md
+++ b/src/content/learn/react-developer-tools.md
@@ -53,17 +53,21 @@ react-devtools
 ![React Developer Tools standalone](/images/docs/react-devtools-standalone.png)
 
 ## Mobile (React Native) {/*mobile-react-native*/}
+<<<<<<< HEAD
 React Хөгжүүлэгчийн хэрэгсэл нь мөн [React Native](https://reactnative.dev/) ашиглан бүтсэн аппликэйшнийг хянахад хэрэглэгдэх боломжтой.
 
 React Хөгжүүлэгчийн хэрэгслийг ашиглах хамгийн хялбар арга бол үүнийг ямар ч төсөл дээр ашиглах боломжтой байхаар суулгах явдал юм:
 ```bash
 # Yarn
 yarn global add react-devtools
+=======
 
-# Npm
-npm install -g react-devtools
-```
+To inspect apps built with [React Native](https://reactnative.dev/), you can use [React Native DevTools](https://reactnative.dev/docs/debugging/react-native-devtools), the built-in debugger that deeply integrates React Developer Tools. All features work identically to the browser extension, including native element highlighting and selection.
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
+
+[Learn more about debugging in React Native.](https://reactnative.dev/docs/debugging)
 
+<<<<<<< HEAD
 Дараа нь терминалаас хөгжүүлэгчийн хэрэгслийг нээнэ үү.
 ```bash
 react-devtools
@@ -73,4 +77,7 @@ react-devtools
 
 > Хэрэв Хөгжүүлэгчийн хэрэгсэл хэдэн секундийн дараа холбогдохгүй бол дахин ачаалж үзнэ үү.
 
-[React Native-г дибаг хийх талаар нэмэлт мэдээлэл авах.](https://reactnative.dev/docs/debugging)
\ No newline at end of file
+[React Native-г дибаг хийх талаар нэмэлт мэдээлэл авах.](https://reactnative.dev/docs/debugging)
+=======
+> For versions of React Native earlier than 0.76, please use the standalone build of React DevTools by following the [Safari and other browsers](#safari-and-other-browsers) guide above.
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
diff --git a/src/content/learn/reacting-to-input-with-state.md b/src/content/learn/reacting-to-input-with-state.md
index 522aa63a1..da559dc0f 100644
--- a/src/content/learn/reacting-to-input-with-state.md
+++ b/src/content/learn/reacting-to-input-with-state.md
@@ -35,7 +35,7 @@ In this example of imperative UI programming, the form is built *without* React.
 
 <Sandpack>
 
-```js index.js active
+```js src/index.js active
 async function handleFormSubmit(e) {
   e.preventDefault();
   disable(textarea);
@@ -84,7 +84,7 @@ function submitForm(answer) {
   // Pretend it's hitting the network.
   return new Promise((resolve, reject) => {
     setTimeout(() => {
-      if (answer.toLowerCase() == 'istanbul') {
+      if (answer.toLowerCase() === 'istanbul') {
         resolve();
       } else {
         reject(new Error('Good guess but a wrong answer. Try again!'));
@@ -246,7 +246,7 @@ If a component has a lot of visual states, it can be convenient to show them all
 
 <Sandpack>
 
-```js App.js active
+```js src/App.js active
 import Form from './Form.js';
 
 let statuses = [
@@ -271,7 +271,7 @@ export default function App() {
 }
 ```
 
-```js Form.js
+```js src/Form.js
 export default function Form({ status }) {
   if (status === 'success') {
     return <h1>That's right!</h1>
@@ -545,6 +545,7 @@ body { margin: 0; padding: 0; height: 250px; }
   width: 200px;
   height: 200px;
   border-radius: 10px;
+  border: 5px solid transparent;
 }
 
 .picture--active {
@@ -707,7 +708,7 @@ Here is a small form implemented with plain JavaScript and DOM. Play with it to
 
 <Sandpack>
 
-```js index.js active
+```js src/index.js active
 function handleFormSubmit(e) {
   e.preventDefault();
   if (editButton.textContent === 'Edit Profile') {
@@ -909,7 +910,7 @@ Here is the original sandbox from the previous challenge, written imperatively w
 
 <Sandpack>
 
-```js index.js active
+```js src/index.js active
 function handleFormSubmit(e) {
   e.preventDefault();
   if (editButton.textContent === 'Edit Profile') {
@@ -1008,7 +1009,7 @@ If you're struggling to think where to start, the stub below already has most of
 
 <Sandpack>
 
-```js index.js active
+```js src/index.js active
 let firstName = 'Jane';
 let lastName = 'Jacobs';
 let isEditing = false;
@@ -1115,7 +1116,7 @@ The missing logic included toggling the display of inputs and content, and updat
 
 <Sandpack>
 
-```js index.js active
+```js src/index.js active
 let firstName = 'Jane';
 let lastName = 'Jacobs';
 let isEditing = false;
diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md
index da5d864ab..4faf18786 100644
--- a/src/content/learn/referencing-values-with-refs.md
+++ b/src/content/learn/referencing-values-with-refs.md
@@ -284,7 +284,7 @@ You also don't need to worry about [avoiding mutation](/learn/updating-objects-i
 
 ## Refs and the DOM {/*refs-and-the-dom*/}
 
-You can point a ref to any value. However, the most common use case for a ref is to access a DOM element. For example, this is handy if you want to focus an input programmatically. When you pass a ref to a `ref` attribute in JSX, like `<div ref={myRef}>`, React will put the corresponding DOM element into `myRef.current`. You can read more about this in [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs)
+You can point a ref to any value. However, the most common use case for a ref is to access a DOM element. For example, this is handy if you want to focus an input programmatically. When you pass a ref to a `ref` attribute in JSX, like `<div ref={myRef}>`, React will put the corresponding DOM element into `myRef.current`. Once the element is removed from the DOM, React will update `myRef.current` to be `null`. You can read more about this in [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs)
 
 <Recap>
 
diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md
index 0a5151daa..9a871c6c3 100644
--- a/src/content/learn/removing-effect-dependencies.md
+++ b/src/content/learn/removing-effect-dependencies.md
@@ -75,7 +75,7 @@ export default function App() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection(serverUrl, roomId) {
   // A real implementation would actually connect to the server
   return {
@@ -150,7 +150,7 @@ export default function App() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection(serverUrl, roomId) {
   // A real implementation would actually connect to the server
   return {
@@ -242,7 +242,7 @@ export default function ChatRoom() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection(serverUrl, roomId) {
   // A real implementation would actually connect to the server
   return {
@@ -846,7 +846,7 @@ export default function App() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection({ serverUrl, roomId }) {
   // A real implementation would actually connect to the server
   return {
@@ -926,7 +926,7 @@ function ChatRoom() {
 
   useEffect(() => {
     const options = createOptions();
-    const connection = createConnection();
+    const connection = createConnection(options);
     connection.connect();
     return () => connection.disconnect();
   }, []); // ✅ All dependencies declared
@@ -1023,7 +1023,7 @@ export default function App() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection({ serverUrl, roomId }) {
   // A real implementation would actually connect to the server
   return {
@@ -1335,7 +1335,7 @@ export default function App() {
 }
 ```
 
-```js animation.js
+```js src/animation.js
 export class FadeInAnimation {
   constructor(node) {
     this.node = node;
@@ -1466,7 +1466,7 @@ export default function App() {
 }
 ```
 
-```js animation.js
+```js src/animation.js
 export class FadeInAnimation {
   constructor(node) {
     this.node = node;
@@ -1523,7 +1523,7 @@ There's more than one way to fix this, but ultimately you want to avoid having a
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import ChatRoom from './ChatRoom.js';
 
@@ -1567,7 +1567,7 @@ export default function App() {
 }
 ```
 
-```js ChatRoom.js active
+```js src/ChatRoom.js active
 import { useEffect } from 'react';
 import { createConnection } from './chat.js';
 
@@ -1582,7 +1582,7 @@ export default function ChatRoom({ options }) {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection({ serverUrl, roomId }) {
   // A real implementation would actually connect to the server
   if (typeof serverUrl !== 'string') {
@@ -1613,11 +1613,11 @@ label, button { display: block; margin-bottom: 5px; }
 
 Your Effect is re-running because it depends on the `options` object. Objects can be re-created unintentionally, you should try to avoid them as dependencies of your Effects whenever possible.
 
-The least invasive fix is to read `roomId` and `serverUrl` right outside the Effect, and then make the Effect depend on those primitive values (which can't change unintentionally). Inside the Effect, create an object and it pass to `createConnection`:
+The least invasive fix is to read `roomId` and `serverUrl` right outside the Effect, and then make the Effect depend on those primitive values (which can't change unintentionally). Inside the Effect, create an object and pass it to `createConnection`:
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import ChatRoom from './ChatRoom.js';
 
@@ -1661,7 +1661,7 @@ export default function App() {
 }
 ```
 
-```js ChatRoom.js active
+```js src/ChatRoom.js active
 import { useEffect } from 'react';
 import { createConnection } from './chat.js';
 
@@ -1680,7 +1680,7 @@ export default function ChatRoom({ options }) {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection({ serverUrl, roomId }) {
   // A real implementation would actually connect to the server
   if (typeof serverUrl !== 'string') {
@@ -1711,7 +1711,7 @@ It would be even better to replace the object `options` prop with the more speci
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import ChatRoom from './ChatRoom.js';
 
@@ -1753,7 +1753,7 @@ export default function App() {
 }
 ```
 
-```js ChatRoom.js active
+```js src/ChatRoom.js active
 import { useState, useEffect } from 'react';
 import { createConnection } from './chat.js';
 
@@ -1771,7 +1771,7 @@ export default function ChatRoom({ roomId, serverUrl }) {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection({ serverUrl, roomId }) {
   // A real implementation would actually connect to the server
   if (typeof serverUrl !== 'string') {
@@ -1839,7 +1839,7 @@ Another of these functions only exists to pass some state to an imported API met
 }
 ```
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import ChatRoom from './ChatRoom.js';
 import {
@@ -1905,7 +1905,7 @@ export default function App() {
 }
 ```
 
-```js ChatRoom.js active
+```js src/ChatRoom.js active
 import { useState, useEffect } from 'react';
 import { experimental_useEffectEvent as useEffectEvent } from 'react';
 
@@ -1921,7 +1921,7 @@ export default function ChatRoom({ roomId, createConnection, onMessage }) {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createEncryptedConnection({ serverUrl, roomId }) {
   // A real implementation would actually connect to the server
   if (typeof serverUrl !== 'string') {
@@ -2005,7 +2005,7 @@ export function createUnencryptedConnection({ serverUrl, roomId }) {
 }
 ```
 
-```js notifications.js
+```js src/notifications.js
 import Toastify from 'toastify-js';
 import 'toastify-js/src/toastify.css';
 
@@ -2134,7 +2134,7 @@ As a result, the chat re-connects only when something meaningful (`roomId` or `i
 }
 ```
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import ChatRoom from './ChatRoom.js';
 
@@ -2187,7 +2187,7 @@ export default function App() {
 }
 ```
 
-```js ChatRoom.js active
+```js src/ChatRoom.js active
 import { useState, useEffect } from 'react';
 import { experimental_useEffectEvent as useEffectEvent } from 'react';
 import {
@@ -2221,7 +2221,7 @@ export default function ChatRoom({ roomId, isEncrypted, onMessage }) {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createEncryptedConnection({ serverUrl, roomId }) {
   // A real implementation would actually connect to the server
   if (typeof serverUrl !== 'string') {
@@ -2305,7 +2305,7 @@ export function createUnencryptedConnection({ serverUrl, roomId }) {
 }
 ```
 
-```js notifications.js
+```js src/notifications.js
 import Toastify from 'toastify-js';
 import 'toastify-js/src/toastify.css';
 
diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md
index 84bf904cd..3f0593599 100644
--- a/src/content/learn/render-and-commit.md
+++ b/src/content/learn/render-and-commit.md
@@ -42,7 +42,7 @@ When your app starts, you need to trigger the initial render. Frameworks and san
 
 <Sandpack>
 
-```js index.js active
+```js src/index.js active
 import Image from './Image.js';
 import { createRoot } from 'react-dom/client';
 
@@ -50,7 +50,7 @@ const root = createRoot(document.getElementById('root'))
 root.render(<Image />);
 ```
 
-```js Image.js
+```js src/Image.js
 export default function Image() {
   return (
     <img
@@ -88,7 +88,7 @@ In the following example, React will call `Gallery()` and  `Image()` several tim
 
 <Sandpack>
 
-```js Gallery.js active
+```js src/Gallery.js active
 export default function Gallery() {
   return (
     <section>
@@ -110,7 +110,7 @@ function Image() {
 }
 ```
 
-```js index.js
+```js src/index.js
 import Gallery from './Gallery.js';
 import { createRoot } from 'react-dom/client';
 
@@ -157,7 +157,7 @@ After rendering (calling) your components, React will modify the DOM.
 
 <Sandpack>
 
-```js Clock.js active
+```js src/Clock.js active
 export default function Clock({ time }) {
   return (
     <>
@@ -168,7 +168,7 @@ export default function Clock({ time }) {
 }
 ```
 
-```js App.js hidden
+```js src/App.js hidden
 import { useState, useEffect } from 'react';
 import Clock from './Clock.js';
 
diff --git a/src/content/learn/rendering-lists.md b/src/content/learn/rendering-lists.md
index 45b60240b..32f81c447 100644
--- a/src/content/learn/rendering-lists.md
+++ b/src/content/learn/rendering-lists.md
@@ -113,9 +113,11 @@ const people = [{
   name: 'Mohammad Abdus Salam',
   profession: 'physicist',
 }, {
+  id: 3,
   name: 'Percy Lavon Julian',
   profession: 'chemist',  
 }, {
+  id: 4,
   name: 'Subrahmanyan Chandrasekhar',
   profession: 'astrophysicist',
 }];
@@ -159,7 +161,7 @@ return <ul>{listItems}</ul>;
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { people } from './data.js';
 import { getImageUrl } from './utils.js';
 
@@ -184,7 +186,7 @@ export default function List() {
 }
 ```
 
-```js data.js
+```js src/data.js
 export const people = [{
   id: 0,
   name: 'Creola Katherine Johnson',
@@ -218,7 +220,7 @@ export const people = [{
 }];
 ```
 
-```js utils.js
+```js src/utils.js
 export function getImageUrl(person) {
   return (
     'https://i.imgur.com/' +
@@ -292,7 +294,7 @@ Rather than generating keys on the fly, you should include them in your data:
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { people } from './data.js';
 import { getImageUrl } from './utils.js';
 
@@ -314,7 +316,7 @@ export default function List() {
 }
 ```
 
-```js data.js active
+```js src/data.js active
 export const people = [{
   id: 0, // Used in JSX as a key
   name: 'Creola Katherine Johnson',
@@ -348,7 +350,7 @@ export const people = [{
 }];
 ```
 
-```js utils.js
+```js src/utils.js
 export function getImageUrl(person) {
   return (
     'https://i.imgur.com/' +
@@ -448,7 +450,7 @@ Change it to show two separate lists one after another: **Chemists** and **Every
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { people } from './data.js';
 import { getImageUrl } from './utils.js';
 
@@ -475,7 +477,7 @@ export default function List() {
 }
 ```
 
-```js data.js
+```js src/data.js
 export const people = [{
   id: 0,
   name: 'Creola Katherine Johnson',
@@ -509,7 +511,7 @@ export const people = [{
 }];
 ```
 
-```js utils.js
+```js src/utils.js
 export function getImageUrl(person) {
   return (
     'https://i.imgur.com/' +
@@ -539,7 +541,7 @@ You could use `filter()` twice, creating two separate arrays, and then `map` ove
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { people } from './data.js';
 import { getImageUrl } from './utils.js';
 
@@ -590,7 +592,7 @@ export default function List() {
 }
 ```
 
-```js data.js
+```js src/data.js
 export const people = [{
   id: 0,
   name: 'Creola Katherine Johnson',
@@ -624,7 +626,7 @@ export const people = [{
 }];
 ```
 
-```js utils.js
+```js src/utils.js
 export function getImageUrl(person) {
   return (
     'https://i.imgur.com/' +
@@ -654,7 +656,7 @@ There is still a bit duplication between the rendered lists. You can go further
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { people } from './data.js';
 import { getImageUrl } from './utils.js';
 
@@ -704,7 +706,7 @@ export default function List() {
 }
 ```
 
-```js data.js
+```js src/data.js
 export const people = [{
   id: 0,
   name: 'Creola Katherine Johnson',
@@ -738,7 +740,7 @@ export const people = [{
 }];
 ```
 
-```js utils.js
+```js src/utils.js
 export function getImageUrl(person) {
   return (
     'https://i.imgur.com/' +
@@ -768,7 +770,7 @@ In fact, if `people` never change, you could move this code out of your componen
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { people } from './data.js';
 import { getImageUrl } from './utils.js';
 
@@ -822,7 +824,7 @@ export default function List() {
 }
 ```
 
-```js data.js
+```js src/data.js
 export const people = [{
   id: 0,
   name: 'Creola Katherine Johnson',
@@ -856,7 +858,7 @@ export const people = [{
 }];
 ```
 
-```js utils.js
+```js src/utils.js
 export function getImageUrl(person) {
   return (
     'https://i.imgur.com/' +
@@ -894,7 +896,7 @@ This will require nesting two different `map` calls.
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { recipes } from './data.js';
 
 export default function RecipeList() {
@@ -906,7 +908,7 @@ export default function RecipeList() {
 }
 ```
 
-```js data.js
+```js src/data.js
 export const recipes = [{
   id: 'greek-salad',
   name: 'Greek Salad',
@@ -930,7 +932,7 @@ Here is one way you could go about it:
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { recipes } from './data.js';
 
 export default function RecipeList() {
@@ -954,7 +956,7 @@ export default function RecipeList() {
 }
 ```
 
-```js data.js
+```js src/data.js
 export const recipes = [{
   id: 'greek-salad',
   name: 'Greek Salad',
@@ -982,7 +984,7 @@ This `RecipeList` component contains two nested `map` calls. To simplify it, ext
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { recipes } from './data.js';
 
 export default function RecipeList() {
@@ -1006,7 +1008,7 @@ export default function RecipeList() {
 }
 ```
 
-```js data.js
+```js src/data.js
 export const recipes = [{
   id: 'greek-salad',
   name: 'Greek Salad',
@@ -1060,7 +1062,7 @@ export default function RecipeList() {
 }
 ```
 
-```js data.js
+```js src/data.js
 export const recipes = [{
   id: 'greek-salad',
   name: 'Greek Salad',
@@ -1086,7 +1088,7 @@ Here, `<Recipe {...recipe} key={recipe.id} />` is a syntax shortcut saying "pass
 
 #### List with a separator {/*list-with-a-separator*/}
 
-This example renders a famous haiku by Katsushika Hokusai, with each line wrapped in a `<p>` tag. Your job is to insert an `<hr />` separator between each paragraph. Your resulting structure should look like this:
+This example renders a famous haiku by Tachibana Hokushi, with each line wrapped in a `<p>` tag. Your job is to insert an `<hr />` separator between each paragraph. Your resulting structure should look like this:
 
 ```js
 <article>
@@ -1145,7 +1147,7 @@ hr {
 
 <Hint>
 
-You'll either need to convert `map` to a manual loop, or use a fragment.
+You'll either need to convert `map` to a manual loop, or use a Fragment.
 
 </Hint>
 
@@ -1208,7 +1210,7 @@ hr {
 
 Using the original line index as a `key` doesn't work anymore because each separator and paragraph are now in the same array. However, you can give each of them a distinct key using a suffix, e.g. `key={i + '-text'}`.
 
-Alternatively, you could render a collection of fragments which contain `<hr />` and `<p>...</p>`. However, the `<>...</>` shorthand syntax doesn't support passing keys, so you'd have to write `<Fragment>` explicitly:
+Alternatively, you could render a collection of Fragments which contain `<hr />` and `<p>...</p>`. However, the `<>...</>` shorthand syntax doesn't support passing keys, so you'd have to write `<Fragment>` explicitly:
 
 <Sandpack>
 
@@ -1254,7 +1256,7 @@ hr {
 
 </Sandpack>
 
-Remember, fragments (often written as `<> </>`) let you group JSX nodes without adding extra `<div>`s!
+Remember, Fragments (often written as `<> </>`) let you group JSX nodes without adding extra `<div>`s!
 
 </Solution>
 
diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md
index 4450c4613..17bd087ed 100644
--- a/src/content/learn/responding-to-events.md
+++ b/src/content/learn/responding-to-events.md
@@ -629,7 +629,7 @@ After you do this, notice that clicking the button also increments the page clic
 
 <Sandpack>
 
-```js ColorSwitch.js active
+```js src/ColorSwitch.js active
 export default function ColorSwitch({
   onChangeColor
 }) {
@@ -641,7 +641,7 @@ export default function ColorSwitch({
 }
 ```
 
-```js App.js hidden
+```js src/App.js hidden
 import { useState } from 'react';
 import ColorSwitch from './ColorSwitch.js';
 
@@ -685,7 +685,7 @@ However, this introduces the problem of the incrementing counter. If `onChangeCo
 
 <Sandpack>
 
-```js ColorSwitch.js active
+```js src/ColorSwitch.js active
 export default function ColorSwitch({
   onChangeColor
 }) {
@@ -700,7 +700,7 @@ export default function ColorSwitch({
 }
 ```
 
-```js App.js hidden
+```js src/App.js hidden
 import { useState } from 'react';
 import ColorSwitch from './ColorSwitch.js';
 
diff --git a/src/content/learn/reusing-logic-with-custom-hooks.md b/src/content/learn/reusing-logic-with-custom-hooks.md
index 679a9bac2..67de5e97f 100644
--- a/src/content/learn/reusing-logic-with-custom-hooks.md
+++ b/src/content/learn/reusing-logic-with-custom-hooks.md
@@ -184,7 +184,7 @@ export default function App() {
 }
 ```
 
-```js useOnlineStatus.js
+```js src/useOnlineStatus.js
 import { useState, useEffect } from 'react';
 
 export function useOnlineStatus() {
@@ -402,7 +402,7 @@ export default function Form() {
 }
 ```
 
-```js useFormInput.js active
+```js src/useFormInput.js active
 import { useState } from 'react';
 
 export function useFormInput(initialValue) {
@@ -453,7 +453,7 @@ Because custom Hooks re-render together with your component, they always receive
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import ChatRoom from './ChatRoom.js';
 
@@ -481,7 +481,7 @@ export default function App() {
 }
 ```
 
-```js ChatRoom.js active
+```js src/ChatRoom.js active
 import { useState, useEffect } from 'react';
 import { createConnection } from './chat.js';
 import { showNotification } from './notifications.js';
@@ -514,7 +514,7 @@ export default function ChatRoom({ roomId }) {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection({ serverUrl, roomId }) {
   // A real implementation would actually connect to the server
   if (typeof serverUrl !== 'string') {
@@ -557,7 +557,7 @@ export function createConnection({ serverUrl, roomId }) {
 }
 ```
 
-```js notifications.js
+```js src/notifications.js
 import Toastify from 'toastify-js';
 import 'toastify-js/src/toastify.css';
 
@@ -649,7 +649,7 @@ Notice that the logic *still responds* to prop and state changes. Try editing th
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import ChatRoom from './ChatRoom.js';
 
@@ -677,7 +677,7 @@ export default function App() {
 }
 ```
 
-```js ChatRoom.js active
+```js src/ChatRoom.js active
 import { useState } from 'react';
 import { useChatRoom } from './useChatRoom.js';
 
@@ -701,7 +701,7 @@ export default function ChatRoom({ roomId }) {
 }
 ```
 
-```js useChatRoom.js
+```js src/useChatRoom.js
 import { useEffect } from 'react';
 import { createConnection } from './chat.js';
 import { showNotification } from './notifications.js';
@@ -722,7 +722,7 @@ export function useChatRoom({ serverUrl, roomId }) {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection({ serverUrl, roomId }) {
   // A real implementation would actually connect to the server
   if (typeof serverUrl !== 'string') {
@@ -765,7 +765,7 @@ export function createConnection({ serverUrl, roomId }) {
 }
 ```
 
-```js notifications.js
+```js src/notifications.js
 import Toastify from 'toastify-js';
 import 'toastify-js/src/toastify.css';
 
@@ -927,7 +927,7 @@ Now the chat won't re-connect every time that the `ChatRoom` component re-render
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import ChatRoom from './ChatRoom.js';
 
@@ -955,7 +955,7 @@ export default function App() {
 }
 ```
 
-```js ChatRoom.js active
+```js src/ChatRoom.js active
 import { useState } from 'react';
 import { useChatRoom } from './useChatRoom.js';
 import { showNotification } from './notifications.js';
@@ -983,7 +983,7 @@ export default function ChatRoom({ roomId }) {
 }
 ```
 
-```js useChatRoom.js
+```js src/useChatRoom.js
 import { useEffect } from 'react';
 import { experimental_useEffectEvent as useEffectEvent } from 'react';
 import { createConnection } from './chat.js';
@@ -1006,7 +1006,7 @@ export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection({ serverUrl, roomId }) {
   // A real implementation would actually connect to the server
   if (typeof serverUrl !== 'string') {
@@ -1049,7 +1049,7 @@ export function createConnection({ serverUrl, roomId }) {
 }
 ```
 
-```js notifications.js
+```js src/notifications.js
 import Toastify from 'toastify-js';
 import 'toastify-js/src/toastify.css';
 
@@ -1306,7 +1306,7 @@ export default function App() {
 }
 ```
 
-```js useOnlineStatus.js active
+```js src/useOnlineStatus.js active
 import { useState, useEffect } from 'react';
 
 export function useOnlineStatus() {
@@ -1369,7 +1369,7 @@ export default function App() {
 }
 ```
 
-```js useOnlineStatus.js active
+```js src/useOnlineStatus.js active
 import { useSyncExternalStore } from 'react';
 
 function subscribe(callback) {
@@ -1554,7 +1554,7 @@ export default function App() {
 }
 ```
 
-```js useFadeIn.js
+```js src/useFadeIn.js
 import { useEffect } from 'react';
 
 export function useFadeIn(ref, duration) {
@@ -1645,7 +1645,7 @@ export default function App() {
 }
 ```
 
-```js useFadeIn.js active
+```js src/useFadeIn.js active
 import { useState, useEffect } from 'react';
 import { experimental_useEffectEvent as useEffectEvent } from 'react';
 
@@ -1749,7 +1749,7 @@ export default function App() {
 }
 ```
 
-```js useFadeIn.js active
+```js src/useFadeIn.js active
 import { useState, useEffect } from 'react';
 import { FadeInAnimation } from './animation.js';
 
@@ -1764,7 +1764,7 @@ export function useFadeIn(ref, duration) {
 }
 ```
 
-```js animation.js
+```js src/animation.js
 export class FadeInAnimation {
   constructor(node) {
     this.node = node;
@@ -1845,12 +1845,12 @@ export default function App() {
 }
 ```
 
-```css styles.css
+```css src/styles.css
 label, button { display: block; margin-bottom: 20px; }
 html, body { min-height: 300px; }
 ```
 
-```css welcome.css active
+```css src/welcome.css active
 .welcome {
   color: white;
   padding: 50px;
@@ -1899,7 +1899,7 @@ export default function Counter() {
 }
 ```
 
-You'll need to write your custom Hook in `useCounter.js` and import it into the `Counter.js` file.
+You'll need to write your custom Hook in `useCounter.js` and import it into the `App.js` file.
 
 <Sandpack>
 
@@ -1918,7 +1918,7 @@ export default function Counter() {
 }
 ```
 
-```js useCounter.js
+```js src/useCounter.js
 // Write your custom Hook in this file!
 ```
 
@@ -1939,7 +1939,7 @@ export default function Counter() {
 }
 ```
 
-```js useCounter.js
+```js src/useCounter.js
 import { useState, useEffect } from 'react';
 
 export function useCounter() {
@@ -1993,7 +1993,7 @@ export default function Counter() {
 }
 ```
 
-```js useCounter.js
+```js src/useCounter.js
 import { useState, useEffect } from 'react';
 
 export function useCounter() {
@@ -2043,7 +2043,7 @@ export default function Counter() {
 }
 ```
 
-```js useCounter.js
+```js src/useCounter.js
 import { useState, useEffect } from 'react';
 
 export function useCounter(delay) {
@@ -2090,7 +2090,7 @@ export default function Counter() {
 }
 ```
 
-```js useCounter.js
+```js src/useCounter.js
 import { useState, useEffect } from 'react';
 
 export function useCounter(delay) {
@@ -2105,7 +2105,7 @@ export function useCounter(delay) {
 }
 ```
 
-```js useInterval.js
+```js src/useInterval.js
 // Write your Hook here!
 ```
 
@@ -2126,7 +2126,7 @@ export default function Counter() {
 }
 ```
 
-```js useCounter.js
+```js src/useCounter.js
 import { useState } from 'react';
 import { useInterval } from './useInterval.js';
 
@@ -2139,7 +2139,7 @@ export function useCounter(delay) {
 }
 ```
 
-```js useInterval.js active
+```js src/useInterval.js active
 import { useEffect } from 'react';
 
 export function useInterval(onTick, delay) {
@@ -2219,7 +2219,7 @@ export default function Counter() {
 }
 ```
 
-```js useCounter.js
+```js src/useCounter.js
 import { useState } from 'react';
 import { useInterval } from './useInterval.js';
 
@@ -2232,7 +2232,7 @@ export function useCounter(delay) {
 }
 ```
 
-```js useInterval.js
+```js src/useInterval.js
 import { useEffect } from 'react';
 import { experimental_useEffectEvent as useEffectEvent } from 'react';
 
@@ -2291,7 +2291,7 @@ export default function Counter() {
 }
 ```
 
-```js useCounter.js
+```js src/useCounter.js
 import { useState } from 'react';
 import { useInterval } from './useInterval.js';
 
@@ -2304,7 +2304,7 @@ export function useCounter(delay) {
 }
 ```
 
-```js useInterval.js active
+```js src/useInterval.js active
 import { useEffect } from 'react';
 import { experimental_useEffectEvent as useEffectEvent } from 'react';
 
@@ -2384,7 +2384,7 @@ function Dot({ position, opacity }) {
 }
 ```
 
-```js usePointerPosition.js
+```js src/usePointerPosition.js
 import { useState, useEffect } from 'react';
 
 export function usePointerPosition() {
@@ -2463,7 +2463,7 @@ function Dot({ position, opacity }) {
 }
 ```
 
-```js usePointerPosition.js
+```js src/usePointerPosition.js
 import { useState, useEffect } from 'react';
 
 export function usePointerPosition() {
diff --git a/src/content/learn/scaling-up-with-reducer-and-context.md b/src/content/learn/scaling-up-with-reducer-and-context.md
index 0281afcec..c3da0c637 100644
--- a/src/content/learn/scaling-up-with-reducer-and-context.md
+++ b/src/content/learn/scaling-up-with-reducer-and-context.md
@@ -22,7 +22,7 @@ In this example from [the introduction to reducers](/learn/extracting-state-logi
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useReducer } from 'react';
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
@@ -105,7 +105,7 @@ const initialTasks = [
 ];
 ```
 
-```js AddTask.js
+```js src/AddTask.js
 import { useState } from 'react';
 
 export default function AddTask({ onAddTask }) {
@@ -126,7 +126,7 @@ export default function AddTask({ onAddTask }) {
 }
 ```
 
-```js TaskList.js
+```js src/TaskList.js
 import { useState } from 'react';
 
 export default function TaskList({
@@ -256,7 +256,7 @@ Export them from a separate file so that you can later import them from other fi
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useReducer } from 'react';
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
@@ -339,14 +339,14 @@ const initialTasks = [
 ];
 ```
 
-```js TasksContext.js active
+```js src/TasksContext.js active
 import { createContext } from 'react';
 
 export const TasksContext = createContext(null);
 export const TasksDispatchContext = createContext(null);
 ```
 
-```js AddTask.js
+```js src/AddTask.js
 import { useState } from 'react';
 
 export default function AddTask({ onAddTask }) {
@@ -367,7 +367,7 @@ export default function AddTask({ onAddTask }) {
 }
 ```
 
-```js TaskList.js
+```js src/TaskList.js
 import { useState } from 'react';
 
 export default function TaskList({
@@ -474,7 +474,7 @@ For now, you pass the information both via props and in context:
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useReducer } from 'react';
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
@@ -560,14 +560,14 @@ const initialTasks = [
 ];
 ```
 
-```js TasksContext.js
+```js src/TasksContext.js
 import { createContext } from 'react';
 
 export const TasksContext = createContext(null);
 export const TasksDispatchContext = createContext(null);
 ```
 
-```js AddTask.js
+```js src/AddTask.js
 import { useState } from 'react';
 
 export default function AddTask({ onAddTask }) {
@@ -588,7 +588,7 @@ export default function AddTask({ onAddTask }) {
 }
 ```
 
-```js TaskList.js
+```js src/TaskList.js
 import { useState } from 'react';
 
 export default function TaskList({
@@ -717,7 +717,7 @@ export default function AddTask() {
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useReducer } from 'react';
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
@@ -774,14 +774,14 @@ const initialTasks = [
 ];
 ```
 
-```js TasksContext.js
+```js src/TasksContext.js
 import { createContext } from 'react';
 
 export const TasksContext = createContext(null);
 export const TasksDispatchContext = createContext(null);
 ```
 
-```js AddTask.js
+```js src/AddTask.js
 import { useState, useContext } from 'react';
 import { TasksDispatchContext } from './TasksContext.js';
 
@@ -810,7 +810,7 @@ export default function AddTask() {
 let nextId = 3;
 ```
 
-```js TaskList.js active
+```js src/TaskList.js active
 import { useState, useContext } from 'react';
 import { TasksContext, TasksDispatchContext } from './TasksContext.js';
 
@@ -934,7 +934,7 @@ export function TasksProvider({ children }) {
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
 import { TasksProvider } from './TasksContext.js';
@@ -950,7 +950,7 @@ export default function TaskApp() {
 }
 ```
 
-```js TasksContext.js
+```js src/TasksContext.js
 import { createContext, useReducer } from 'react';
 
 export const TasksContext = createContext(null);
@@ -1005,7 +1005,7 @@ const initialTasks = [
 ];
 ```
 
-```js AddTask.js
+```js src/AddTask.js
 import { useState, useContext } from 'react';
 import { TasksDispatchContext } from './TasksContext.js';
 
@@ -1034,7 +1034,7 @@ export default function AddTask() {
 let nextId = 3;
 ```
 
-```js TaskList.js
+```js src/TaskList.js
 import { useState, useContext } from 'react';
 import { TasksContext, TasksDispatchContext } from './TasksContext.js';
 
@@ -1144,7 +1144,7 @@ This doesn't change the behavior in any way, but it lets you later split these c
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
 import { TasksProvider } from './TasksContext.js';
@@ -1160,7 +1160,7 @@ export default function TaskApp() {
 }
 ```
 
-```js TasksContext.js
+```js src/TasksContext.js
 import { createContext, useContext, useReducer } from 'react';
 
 const TasksContext = createContext(null);
@@ -1224,7 +1224,7 @@ const initialTasks = [
 ];
 ```
 
-```js AddTask.js
+```js src/AddTask.js
 import { useState } from 'react';
 import { useTasksDispatch } from './TasksContext.js';
 
@@ -1253,7 +1253,7 @@ export default function AddTask() {
 let nextId = 3;
 ```
 
-```js TaskList.js active
+```js src/TaskList.js active
 import { useState } from 'react';
 import { useTasks, useTasksDispatch } from './TasksContext.js';
 
diff --git a/src/content/learn/separating-events-from-effects.md b/src/content/learn/separating-events-from-effects.md
index a897a602b..21276c287 100644
--- a/src/content/learn/separating-events-from-effects.md
+++ b/src/content/learn/separating-events-from-effects.md
@@ -44,7 +44,7 @@ function ChatRoom({ roomId }) {
   return (
     <>
       <input value={message} onChange={e => setMessage(e.target.value)} />
-      <button onClick={handleSendClick}>Send</button>;
+      <button onClick={handleSendClick}>Send</button>
     </>
   );
 }
@@ -130,7 +130,7 @@ export default function App() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function sendMessage(message) {
   console.log('🔵 You sent: ' + message);
 }
@@ -333,7 +333,7 @@ export default function App() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection(serverUrl, roomId) {
   // A real implementation would actually connect to the server
   let connectedCallback;
@@ -362,7 +362,7 @@ export function createConnection(serverUrl, roomId) {
 }
 ```
 
-```js notifications.js
+```js src/notifications.js
 import Toastify from 'toastify-js';
 import 'toastify-js/src/toastify.css';
 
@@ -521,7 +521,7 @@ export default function App() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection(serverUrl, roomId) {
   // A real implementation would actually connect to the server
   let connectedCallback;
@@ -550,7 +550,7 @@ export function createConnection(serverUrl, roomId) {
 }
 ```
 
-```js notifications.js hidden
+```js src/notifications.js hidden
 import Toastify from 'toastify-js';
 import 'toastify-js/src/toastify.css';
 
@@ -1500,7 +1500,7 @@ export default function App() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection(serverUrl, roomId) {
   // A real implementation would actually connect to the server
   let connectedCallback;
@@ -1529,7 +1529,7 @@ export function createConnection(serverUrl, roomId) {
 }
 ```
 
-```js notifications.js hidden
+```js src/notifications.js hidden
 import Toastify from 'toastify-js';
 import 'toastify-js/src/toastify.css';
 
@@ -1641,7 +1641,7 @@ export default function App() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection(serverUrl, roomId) {
   // A real implementation would actually connect to the server
   let connectedCallback;
@@ -1670,7 +1670,7 @@ export function createConnection(serverUrl, roomId) {
 }
 ```
 
-```js notifications.js hidden
+```js src/notifications.js hidden
 import Toastify from 'toastify-js';
 import 'toastify-js/src/toastify.css';
 
@@ -1784,7 +1784,7 @@ export default function App() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection(serverUrl, roomId) {
   // A real implementation would actually connect to the server
   let connectedCallback;
@@ -1813,7 +1813,7 @@ export function createConnection(serverUrl, roomId) {
 }
 ```
 
-```js notifications.js hidden
+```js src/notifications.js hidden
 import Toastify from 'toastify-js';
 import 'toastify-js/src/toastify.css';
 
diff --git a/src/content/learn/sharing-state-between-components.md b/src/content/learn/sharing-state-between-components.md
index 149164fe1..52eaf28f8 100644
--- a/src/content/learn/sharing-state-between-components.md
+++ b/src/content/learn/sharing-state-between-components.md
@@ -491,7 +491,7 @@ function List({ items }) {
 }
 ```
 
-```js data.js
+```js src/data.js
 export function filterItems(items, query) {
   query = query.toLowerCase();
   return items.filter(item =>
@@ -584,7 +584,7 @@ function List({ items }) {
 }
 ```
 
-```js data.js
+```js src/data.js
 export function filterItems(items, query) {
   query = query.toLowerCase();
   return items.filter(item =>
diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md
index 280a1378e..bd5ba6c50 100644
--- a/src/content/learn/start-a-new-react-project.md
+++ b/src/content/learn/start-a-new-react-project.md
@@ -4,29 +4,48 @@ title: Start a New React Project
 
 <Intro>
 
-If you want to build a new app or a new website fully with React, we recommend picking one of the React-powered frameworks popular in the community. Frameworks provide features that most apps and sites eventually need, including routing, data fetching, and generating HTML.
+If you want to build a new app or a new website fully with React, we recommend picking one of the React-powered frameworks popular in the community.
 
 </Intro>
 
-<Note>
 
-**You need to install [Node.js](https://nodejs.org/en/) for local development.** You can *also* choose to use Node.js in production, but you don't have to. Many React frameworks support export to a static HTML/CSS/JS folder.
+You can use React without a framework, however we’ve found that most apps and sites eventually build solutions to common problems such as code-splitting, routing, data fetching, and generating HTML. These problems are common to all UI libraries, not just React.
 
-</Note>
+By starting with a framework, you can get started with React quickly, and avoid essentially building your own framework later.
+
+<DeepDive>
+
+#### Can I use React without a framework? {/*can-i-use-react-without-a-framework*/}
+
+You can definitely use React without a framework--that's how you'd [use React for a part of your page.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **However, if you're building a new app or a site fully with React, we recommend using a framework.**
+
+Here's why.
+
+Even if you don't need routing or data fetching at first, you'll likely want to add some libraries for them. As your JavaScript bundle grows with every new feature, you might have to figure out how to split code for every route individually. As your data fetching needs get more complex, you are likely to encounter server-client network waterfalls that make your app feel very slow. As your audience includes more users with poor network conditions and low-end devices, you might need to generate HTML from your components to display content early--either on the server, or during the build time. Changing your setup to run some of your code on the server or during the build can be very tricky.
+
+**These problems are not React-specific. This is why Svelte has SvelteKit, Vue has Nuxt, and so on.** To solve these problems on your own, you'll need to integrate your bundler with your router and with your data fetching library. It's not hard to get an initial setup working, but there are a lot of subtleties involved in making an app that loads quickly even as it grows over time. You'll want to send down the minimal amount of app code but do so in a single client–server roundtrip, in parallel with any data required for the page. You'll likely want the page to be interactive before your JavaScript code even runs, to support progressive enhancement. You may want to generate a folder of fully static HTML files for your marketing pages that can be hosted anywhere and still work with JavaScript disabled. Building these capabilities yourself takes real work.
+
+**React frameworks on this page solve problems like these by default, with no extra work from your side.** They let you start very lean and then scale your app with your needs. Each React framework has a community, so finding answers to questions and upgrading tooling is easier. Frameworks also give structure to your code, helping you and others retain context and skills between different projects. Conversely, with a custom setup it's easier to get stuck on unsupported dependency versions, and you'll essentially end up creating your own framework—albeit one with no community or upgrade path (and if it's anything like the ones we've made in the past, more haphazardly designed).
+
+If your app has unusual constraints not served well by these frameworks, or you prefer to solve these problems yourself, you can roll your own custom setup with React. Grab `react` and `react-dom` from npm, set up your custom build process with a bundler like [Vite](https://vitejs.dev/) or [Parcel](https://parceljs.org/), and add other tools as you need them for routing, static generation or server-side rendering, and more.
+
+</DeepDive>
 
 ## Production-grade React frameworks {/*production-grade-react-frameworks*/}
 
-### Next.js {/*nextjs*/}
+These frameworks support all the features you need to deploy and scale your app in production and are working towards supporting our [full-stack architecture vision](#which-features-make-up-the-react-teams-full-stack-architecture-vision). All of the frameworks we recommend are open source with active communities for support, and can be deployed to your own server or a hosting provider. If you’re a framework author interested in being included on this list, [please let us know](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+).
+
+### Next.js {/*nextjs-pages-router*/}
 
-**[Next.js](https://nextjs.org/) is a full-stack React framework.** It's versatile and lets you create React apps of any size--from a mostly static blog to a complex dynamic application. To create a new Next.js project, run in your terminal:
+**[Next.js' Pages Router](https://nextjs.org/) is a full-stack React framework.** It's versatile and lets you create React apps of any size--from a mostly static blog to a complex dynamic application. To create a new Next.js project, run in your terminal:
 
 <TerminalBlock>
-npx create-next-app
+npx create-next-app@latest
 </TerminalBlock>
 
-If you're new to Next.js, check out the [Next.js tutorial.](https://nextjs.org/learn/foundations/about-nextjs)
+If you're new to Next.js, check out the [learn Next.js course.](https://nextjs.org/learn)
 
-Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/deployment) to any Node.js or serverless hosting, or to your own server. [Fully static Next.js apps](https://nextjs.org/docs/advanced-features/static-html-export) can be deployed to any static hosting.
+Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/app/building-your-application/deploying) to any Node.js or serverless hosting, or to your own server. Next.js also supports a [static export](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) which doesn't require a server.
 
 ### Remix {/*remix*/}
 
@@ -64,23 +83,6 @@ If you're new to Expo, check out the [Expo tutorial](https://docs.expo.dev/tutor
 
 Expo is maintained by [Expo (the company)](https://expo.dev/about). Building apps with Expo is free, and you can submit them to the Google and Apple app stores without restrictions. Expo additionally provides opt-in paid cloud services.
 
-<DeepDive>
-
-#### Can I use React without a framework? {/*can-i-use-react-without-a-framework*/}
-
-You can definitely use React without a framework--that's how you'd [use React for a part of your page.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **However, if you're building a new app or a site fully with React, we recommend using a framework.**
-
-Here's why.
-
-Even if you don't need routing or data fetching at first, you'll likely want to add some libraries for them. As your JavaScript bundle grows with every new feature, you might have to figure out how to split code for every route individually. As your data fetching needs get more complex, you are likely to encounter server-client network waterfalls that make your app feel very slow. As your audience includes more users with poor network conditions and low-end devices, you might need to generate HTML from your components to display content early--either on the server, or during the build time. Changing your setup to run some of your code on the server or during the build can be very tricky.
-
-**These problems are not React-specific. This is why Svelte has SvelteKit, Vue has Nuxt, and so on.** To solve these problems on your own, you'll need to integrate your bundler with your router and with your data fetching library. It's not hard to get an initial setup working, but there are a lot of subtleties involved in making an app that loads quickly even as it grows over time. You'll want to send down the minimal amount of app code but do so in a single client–server roundtrip, in parallel with any data required for the page. You'll likely want the page to be interactive before your JavaScript code even runs, to support progressive enhancement. You may want to generate a folder of fully static HTML files for your marketing pages that can be hosted anywhere and still work with JavaScript disabled. Building these capabilities yourself takes real work.
-
-**React frameworks on this page solve problems like these by default, with no extra work from your side.** They let you start very lean and then scale your app with your needs. Each React framework has a community, so finding answers to questions and upgrading tooling is easier. Frameworks also give structure to your code, helping you and others retain context and skills between different projects. Conversely, with a custom setup it's easier to get stuck on unsupported dependency versions, and you'll essentially end up creating your own framework—albeit one with no community or upgrade path (and if it's anything like the ones we've made in the past, more haphazardly designed).
-
-If you're still not convinced, or your app has unusual constraints not served well by these frameworks and you'd like to roll your own custom setup, we can't stop you--go for it! Grab `react` and `react-dom` from npm, set up your custom build process with a bundler like [Vite](https://vitejs.dev/) or [Parcel](https://parceljs.org/), and add other tools as you need them for routing, static generation or server-side rendering, and more.
-</DeepDive>
-
 ## Bleeding-edge React frameworks {/*bleeding-edge-react-frameworks*/}
 
 As we've explored how to continue improving React, we realized that integrating React more closely with frameworks (specifically, with routing, bundling, and server technologies) is our biggest opportunity to help React users build better apps. The Next.js team has agreed to collaborate with us in researching, developing, integrating, and testing framework-agnostic bleeding-edge React features like [React Server Components.](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components)
@@ -89,14 +91,9 @@ These features are getting closer to being production-ready every day, and we've
 
 ### Next.js (App Router) {/*nextjs-app-router*/}
 
-**[Next.js's App Router](https://beta.nextjs.org/docs/getting-started) is a redesign of the Next.js APIs aiming to fulfill the React team’s full-stack architecture vision.** It lets you fetch data in asynchronous components that run on the server or even during the build.
-
-Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/deployment) to any Node.js or serverless hosting, or to your own server. Next.js also supports [static export](https://beta.nextjs.org/docs/configuring/static-export) which doesn't require a server.
-<Pitfall>
-
-Next.js's App Router is **currently in beta and is not yet recommended for production** (as of Mar 2023). To experiment with it in an existing Next.js project, [follow this incremental migration guide](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app).
+**[Next.js's App Router](https://nextjs.org/docs) is a redesign of the Next.js APIs aiming to fulfill the React team’s full-stack architecture vision.** It lets you fetch data in asynchronous components that run on the server or even during the build.
 
-</Pitfall>
+Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/app/building-your-application/deploying) to any Node.js or serverless hosting, or to your own server. Next.js also supports [static export](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) which doesn't require a server.
 
 <DeepDive>
 
diff --git a/src/content/learn/state-a-components-memory.md b/src/content/learn/state-a-components-memory.md
index 1dbaab4a9..75a1fd0b9 100644
--- a/src/content/learn/state-a-components-memory.md
+++ b/src/content/learn/state-a-components-memory.md
@@ -58,7 +58,7 @@ export default function Gallery() {
 }
 ```
 
-```js data.js
+```js src/data.js
 export const sculptureList = [{
   name: 'Homenaje a la Neurocirugía',
   artist: 'Marta Colvin Andrade',
@@ -238,7 +238,7 @@ export default function Gallery() {
 }
 ```
 
-```js data.js
+```js src/data.js
 export const sculptureList = [{
   name: 'Homenaje a la Neurocirugía',
   artist: 'Marta Colvin Andrade',
@@ -427,7 +427,7 @@ export default function Gallery() {
 }
 ```
 
-```js data.js
+```js src/data.js
 export const sculptureList = [{
   name: 'Homenaje a la Neurocirugía',
   artist: 'Marta Colvin Andrade',
@@ -536,7 +536,7 @@ This example **doesn't use React** but it gives you an idea of how `useState` wo
 
 <Sandpack>
 
-```js index.js active
+```js src/index.js active
 let componentHooks = [];
 let currentHookIndex = 0;
 
@@ -750,7 +750,7 @@ export default function Page() {
 
 ```
 
-```js Gallery.js
+```js src/Gallery.js
 import { useState } from 'react';
 import { sculptureList } from './data.js';
 
@@ -792,7 +792,7 @@ export default function Gallery() {
 }
 ```
 
-```js data.js
+```js src/data.js
 export const sculptureList = [{
   name: 'Homenaje a la Neurocirugía',
   artist: 'Marta Colvin Andrade',
@@ -963,7 +963,7 @@ export default function Gallery() {
 }
 ```
 
-```js data.js
+```js src/data.js
 export const sculptureList = [{
   name: 'Homenaje a la Neurocirugía',
   artist: 'Marta Colvin Andrade',
@@ -1125,7 +1125,7 @@ export default function Gallery() {
 }
 ```
 
-```js data.js hidden
+```js src/data.js hidden
 export const sculptureList = [{
   name: 'Homenaje a la Neurocirugía',
   artist: 'Marta Colvin Andrade',
@@ -1488,8 +1488,6 @@ Here is a fixed version that uses a regular `name` variable declared in the func
 <Sandpack>
 
 ```js
-import { useState } from 'react';
-
 export default function FeedbackForm() {
   function handleClick() {
     const name = prompt('What is your name?');
diff --git a/src/content/learn/state-as-a-snapshot.md b/src/content/learn/state-as-a-snapshot.md
index 503b0abb4..df4eddbd6 100644
--- a/src/content/learn/state-as-a-snapshot.md
+++ b/src/content/learn/state-as-a-snapshot.md
@@ -79,7 +79,7 @@ When React re-renders a component:
 
 1. React calls your function again.
 2. Your function returns a new JSX snapshot.
-3. React then updates the screen to match the snapshot you've returned.
+3. React then updates the screen to match the snapshot your function returned.
 
 <IllustrationBlock sequential>
     <Illustration caption="React executing the function" src="/images/docs/illustrations/i_render1.png" />
diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md
index 24b9f9eb1..115075161 100644
--- a/src/content/learn/synchronizing-with-effects.md
+++ b/src/content/learn/synchronizing-with-effects.md
@@ -45,7 +45,7 @@ Here and later in this text, capitalized "Effect" refers to the React-specific d
 
 To write an Effect, follow these three steps:
 
-1. **Declare an Effect.** By default, your Effect will run after every render.
+1. **Declare an Effect.** By default, your Effect will run after every [commit](/learn/render-and-commit).
 2. **Specify the Effect dependencies.** Most Effects should only re-run *when needed* rather than after every render. For example, a fade-in animation should only trigger when a component appears. Connecting and disconnecting to a chat room should only happen when the component appears and disappears, or when the chat room changes. You will learn how to control this by specifying *dependencies.*
 3. **Add cleanup if needed.** Some Effects need to specify how to stop, undo, or clean up whatever they were doing. For example, "connect" needs "disconnect", "subscribe" needs "unsubscribe", and "fetch" needs either "cancel" or "ignore". You will learn how to do this by returning a *cleanup function*.
 
@@ -502,7 +502,7 @@ export default function ChatRoom() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection() {
   // A real implementation would actually connect to the server
   return {
@@ -560,7 +560,7 @@ export default function ChatRoom() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection() {
   // A real implementation would actually connect to the server
   return {
@@ -598,9 +598,36 @@ Usually, the answer is to implement the cleanup function.  The cleanup function
 
 Most of the Effects you'll write will fit into one of the common patterns below.
 
+<Pitfall>
+
+#### Don't use refs to prevent Effects from firing {/*dont-use-refs-to-prevent-effects-from-firing*/}
+
+A common pitfall for preventing Effects firing twice in development is to use a `ref` to prevent the Effect from running more than once. For example, you could "fix" the above bug with a `useRef`:
+
+```js {1,3-4}
+  const connectionRef = useRef(null);
+  useEffect(() => {
+    // 🚩 This wont fix the bug!!!
+    if (!connectionRef.current) {
+      connectionRef.current = createConnection();
+      connectionRef.current.connect();
+    }
+  }, []);
+```
+
+This makes it so you only see `"✅ Connecting..."` once in development, but it doesn't fix the bug.
+
+When the user navigates away, the connection still isn't closed and when they navigate back, a new connection is created. As the user navigates across the app, the connections would keep piling up, the same as it would before the "fix". 
+
+To fix the bug, it is not enough to just make the Effect run once. The effect needs to work after re-mounting, which means the connection needs to be cleaned up like in the solution above.
+
+See the examples below for how to handle common patterns.
+
+</Pitfall>
+
 ### Controlling non-React widgets {/*controlling-non-react-widgets*/}
 
-Sometimes you need to add UI widgets that aren't written to React. For example, let's say you're adding a map component to your page. It has a `setZoomLevel()` method, and you'd like to keep the zoom level in sync with a `zoomLevel` state variable in your React code. Your Effect would look similar to this:
+Sometimes you need to add UI widgets that aren't written in React. For example, let's say you're adding a map component to your page. It has a `setZoomLevel()` method, and you'd like to keep the zoom level in sync with a `zoomLevel` state variable in your React code. Your Effect would look similar to this:
 
 ```js
 useEffect(() => {
@@ -767,7 +794,7 @@ Buying is not caused by rendering; it's caused by a specific interaction. It sho
   }
 ```
 
-**This illustrates that if remounting breaks the logic of your application, this usually uncovers existing bugs.** From the user's perspective, visiting a page shouldn't be different from visiting it, clicking a link, and pressing Back. React verifies that your components abide by this principle by remounting them once in development.
+**This illustrates that if remounting breaks the logic of your application, this usually uncovers existing bugs.** From a user's perspective, visiting a page shouldn't be different from visiting it, clicking a link, then pressing Back to view the page again. React verifies that your components abide by this principle by remounting them once in development.
 
 ## Putting it all together {/*putting-it-all-together*/}
 
@@ -971,7 +998,7 @@ Use the input's [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTM
 
 <Sandpack>
 
-```js MyInput.js active
+```js src/MyInput.js active
 import { useEffect, useRef } from 'react';
 
 export default function MyInput({ value, onChange }) {
@@ -990,7 +1017,7 @@ export default function MyInput({ value, onChange }) {
 }
 ```
 
-```js App.js hidden
+```js src/App.js hidden
 import { useState } from 'react';
 import MyInput from './MyInput.js';
 
@@ -1055,7 +1082,7 @@ To fix the mistake, wrap the `ref.current.focus()` call into an Effect declarati
 
 <Sandpack>
 
-```js MyInput.js active
+```js src/MyInput.js active
 import { useEffect, useRef } from 'react';
 
 export default function MyInput({ value, onChange }) {
@@ -1075,7 +1102,7 @@ export default function MyInput({ value, onChange }) {
 }
 ```
 
-```js App.js hidden
+```js src/App.js hidden
 import { useState } from 'react';
 import MyInput from './MyInput.js';
 
@@ -1139,7 +1166,7 @@ Let's say you want to focus the first field. The first `MyInput` component now r
 
 <Sandpack>
 
-```js MyInput.js active
+```js src/MyInput.js active
 import { useEffect, useRef } from 'react';
 
 export default function MyInput({ shouldFocus, value, onChange }) {
@@ -1160,7 +1187,7 @@ export default function MyInput({ shouldFocus, value, onChange }) {
 }
 ```
 
-```js App.js hidden
+```js src/App.js hidden
 import { useState } from 'react';
 import MyInput from './MyInput.js';
 
@@ -1229,7 +1256,7 @@ Put the conditional logic inside the Effect. You will need to specify `shouldFoc
 
 <Sandpack>
 
-```js MyInput.js active
+```js src/MyInput.js active
 import { useEffect, useRef } from 'react';
 
 export default function MyInput({ shouldFocus, value, onChange }) {
@@ -1251,7 +1278,7 @@ export default function MyInput({ shouldFocus, value, onChange }) {
 }
 ```
 
-```js App.js hidden
+```js src/App.js hidden
 import { useState } from 'react';
 import MyInput from './MyInput.js';
 
@@ -1322,7 +1349,7 @@ Keep in mind that `setInterval` returns an interval ID, which you can pass to [`
 
 <Sandpack>
 
-```js Counter.js active
+```js src/Counter.js active
 import { useState, useEffect } from 'react';
 
 export default function Counter() {
@@ -1340,7 +1367,7 @@ export default function Counter() {
 }
 ```
 
-```js App.js hidden
+```js src/App.js hidden
 import { useState } from 'react';
 import Counter from './Counter.js';
 
@@ -1381,7 +1408,7 @@ To fix this code, save the interval ID returned by `setInterval`, and implement
 
 <Sandpack>
 
-```js Counter.js active
+```js src/Counter.js active
 import { useState, useEffect } from 'react';
 
 export default function Counter() {
@@ -1400,7 +1427,7 @@ export default function Counter() {
 }
 ```
 
-```js App.js hidden
+```js src/App.js hidden
 import { useState } from 'react';
 import Counter from './Counter.js';
 
@@ -1441,7 +1468,7 @@ This component shows the biography for the selected person. It loads the biograp
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState, useEffect } from 'react';
 import { fetchBio } from './api.js';
 
@@ -1472,7 +1499,7 @@ export default function Page() {
 }
 ```
 
-```js api.js hidden
+```js src/api.js hidden
 export async function fetchBio(person) {
   const delay = person === 'Bob' ? 2000 : 200;
   return new Promise(resolve => {
@@ -1514,7 +1541,7 @@ To fix this race condition, add a cleanup function:
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState, useEffect } from 'react';
 import { fetchBio } from './api.js';
 
@@ -1550,7 +1577,7 @@ export default function Page() {
 }
 ```
 
-```js api.js hidden
+```js src/api.js hidden
 export async function fetchBio(person) {
   const delay = person === 'Bob' ? 2000 : 200;
   return new Promise(resolve => {
@@ -1573,7 +1600,7 @@ Each render's Effect has its own `ignore` variable. Initially, the `ignore` vari
 - Fetching `'Bob'` completes
 - The Effect from the `'Bob'` render **does not do anything because its `ignore` flag was set to `true`**
 
-In addition to ignoring the result of an outdated API call, you can also use [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) to cancel the requests that are no longer needed. However, by itself this is not enough to protect against race conditions. More asynchronous steps could be chained after the fetch, so using an explicit flag like `ignore` is the most reliable way to fix this type of problems.
+In addition to ignoring the result of an outdated API call, you can also use [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) to cancel the requests that are no longer needed. However, by itself this is not enough to protect against race conditions. More asynchronous steps could be chained after the fetch, so using an explicit flag like `ignore` is the most reliable way to fix this type of problem.
 
 </Solution>
 
diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md
index 93d0fd326..1899c881f 100644
--- a/src/content/learn/thinking-in-react.md
+++ b/src/content/learn/thinking-in-react.md
@@ -81,7 +81,7 @@ React дээр UI-аа бүтээхдээ дараах 5 алхамыг дага
 
 <Sandpack>
 
-```jsx App.js
+```jsx src/App.js
 function ProductCategoryRow({ category }) {
   return (
     <tr>
@@ -270,7 +270,15 @@ React-д загвар өгөгдлийн хоёр төрөл бий: пропу
 2. **Тэдгээрийн нийтлэг эцгийг ол:** Эхний нийтлэг эцэг компонент `FilterableProductTable`.
 3. **Стэйт хаана байхыг шийд**: Бид дараах компонент-д `FilterableProductTable` стэйтүүдийг байрлуулна.
 
+<<<<<<< HEAD
 `FilterableProductTable` компонент-д стэйт байрлана гэсэн үг. 
+=======
+1. **Identify components that use state:**
+    * `ProductTable` needs to filter the product list based on that state (search text and checkbox value). 
+    * `SearchBar` needs to display that state (search text and checkbox value).
+2. **Find their common parent:** The first parent component both components share is `FilterableProductTable`.
+3. **Decide where the state lives**: We'll keep the filter text and checked state values in `FilterableProductTable`.
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 [`useState()` хүүк](/reference/react/useState)-ээр стэйтийг зарлана. Хүүк бол React-тай холбогдох боломж олгодог онцгой төрлийн функц юм. Хоёр стэйтийг `FilterableProductTable` компонент дээр нэмж өгөх ба тэдгээрт анхдагч утга өгнө:
 
@@ -298,7 +306,7 @@ function FilterableProductTable({ products }) {
 
 <Sandpack>
 
-```jsx App.js
+```jsx src/App.js
 import { useState } from 'react';
 
 function FilterableProductTable({ products }) {
@@ -485,19 +493,33 @@ function FilterableProductTable({ products }) {
 `SearchBar` дотор `onChange`-д эцгээс дамжиж ирсэн функцыг оноож өгнө:
 
 
-```js {5}
-<input 
-  type="text" 
-  value={filterText} 
-  placeholder="Search..." 
-  onChange={(e) => onFilterTextChange(e.target.value)} />
+```js {4,5,13,19}
+function SearchBar({
+  filterText,
+  inStockOnly,
+  onFilterTextChange,
+  onInStockOnlyChange
+}) {
+  return (
+    <form>
+      <input
+        type="text"
+        value={filterText}
+        placeholder="Search..."
+        onChange={(e) => onFilterTextChange(e.target.value)}
+      />
+      <label>
+        <input
+          type="checkbox"
+          checked={inStockOnly}
+          onChange={(e) => onInStockOnlyChange(e.target.checked)}
 ```
 
 Одоо аппликэйшн бүрэн ажиллаж байна!
 
 <Sandpack>
 
-```jsx App.js
+```jsx src/App.js
 import { useState } from 'react';
 
 function FilterableProductTable({ products }) {
diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index 16e5f518d..6487e8007 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -29,7 +29,7 @@ You can see what it will look like when you're finished here:
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 
 function Square({ value, onSquareClick }) {
@@ -147,7 +147,7 @@ function calculateWinner(squares) {
 }
 ```
 
-```css styles.css
+```css src/styles.css
 * {
   box-sizing: border-box;
 }
@@ -206,13 +206,13 @@ In the live code editor below, click **Fork** in the top-right corner to open th
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 export default function Square() {
   return <button className="square">X</button>;
 }
 ```
 
-```css styles.css
+```css src/styles.css
 * {
   box-sizing: border-box;
 }
@@ -264,7 +264,7 @@ body {
 You can also follow this tutorial using your local development environment. To do this, you need to:
 
 1. Install [Node.js](https://nodejs.org/en/)
-1. In the CodeSandbox tab you opened earlier, press the top-left corner button to open the menu, and then choose **File > Export to ZIP** in that menu to download an archive of the files locally
+1. In the CodeSandbox tab you opened earlier, press the top-left corner button to open the menu, and then choose **Download Sandbox** in that menu to download an archive of the files locally
 1. Unzip the archive, then open a terminal and `cd` to the directory you unzipped
 1. Install the dependencies with `npm install`
 1. Run `npm start` to start a local server and follow the prompts to view the code running in a browser
@@ -337,7 +337,7 @@ import './styles.css';
 import App from './App';
 ```
 
-Lines 1-5 brings all the necessary pieces together: 
+Lines 1-5 bring all the necessary pieces together: 
 
 * React
 * React's library to talk to web browsers (React DOM)
@@ -362,11 +362,11 @@ You'll get this error:
 
 <ConsoleBlock level="error">
 
-/src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment `<>...</>`?
+/src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX Fragment `<>...</>`?
 
 </ConsoleBlock>
 
-React components need to return a single JSX element and not multiple adjacent JSX elements like two buttons. To fix this you can use *fragments* (`<>` and `</>`) to wrap multiple adjacent JSX elements like this:
+React components need to return a single JSX element and not multiple adjacent JSX elements like two buttons. To fix this you can use *Fragments* (`<>` and `</>`) to wrap multiple adjacent JSX elements like this:
 
 ```js {3-6}
 export default function Square() {
@@ -455,7 +455,7 @@ export default function Board() {
 }
 ```
 
-```css styles.css
+```css src/styles.css
 * {
   box-sizing: border-box;
 }
@@ -627,7 +627,7 @@ Your updated code should look like this:
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 function Square({ value }) {
   return <button className="square">{value}</button>;
 }
@@ -655,7 +655,7 @@ export default function Board() {
 }
 ```
 
-```css styles.css
+```css src/styles.css
 * {
   box-sizing: border-box;
 }
@@ -807,7 +807,7 @@ After you've made the above changes, your code will look like this:
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 
 function Square() {
@@ -850,7 +850,7 @@ export default function Board() {
 }
 ```
 
-```css styles.css
+```css src/styles.css
 * {
   box-sizing: border-box;
 }
@@ -988,7 +988,7 @@ And your code should look like this:
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 
 function Square({ value }) {
@@ -1019,7 +1019,7 @@ export default function Board() {
 }
 ```
 
-```css styles.css
+```css src/styles.css
 * {
   box-sizing: border-box;
 }
@@ -1133,7 +1133,7 @@ Calling the `setSquares` function lets React know the state of the component has
 
 <Note>
 
-JavaScript supports [closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) which means an inner function (e.g. `handleClick`) has access to variables and functions defined in a outer function (e.g. `Board`). The `handleClick` function can read the `squares` state and call the `setSquares` method because they are both defined inside of the `Board` function.
+JavaScript supports [closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) which means an inner function (e.g. `handleClick`) has access to variables and functions defined in an outer function (e.g. `Board`). The `handleClick` function can read the `squares` state and call the `setSquares` method because they are both defined inside of the `Board` function.
 
 </Note>
 
@@ -1228,7 +1228,7 @@ This is what your code should look like:
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 
 function Square({ value, onSquareClick }) {
@@ -1270,7 +1270,7 @@ export default function Board() {
 }
 ```
 
-```css styles.css
+```css src/styles.css
 * {
   box-sizing: border-box;
 }
@@ -1422,7 +1422,7 @@ Now you can only add `X`'s or `O`'s to empty squares! Here is what your code sho
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 
 function Square({value, onSquareClick}) {
@@ -1473,7 +1473,7 @@ export default function Board() {
 }
 ```
 
-```css styles.css
+```css src/styles.css
 * {
   box-sizing: border-box;
 }
@@ -1524,7 +1524,7 @@ body {
 
 Now that the players can take turns, you'll want to show when the game is won and there are no more turns to make. To do this you'll add a helper function called `calculateWinner` that takes an array of 9 squares, checks for a winner and returns `'X'`, `'O'`, or `null` as appropriate. Don't worry too much about the `calculateWinner` function; it's not specific to React:
 
-```js App.js
+```js src/App.js
 export default function Board() {
   //...
 }
@@ -1594,7 +1594,7 @@ Congratulations! You now have a working tic-tac-toe game. And you've just learne
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 
 function Square({value, onSquareClick}) {
@@ -1674,7 +1674,7 @@ function calculateWinner(squares) {
 }
 ```
 
-```css styles.css
+```css src/styles.css
 * {
   box-sizing: border-box;
 }
@@ -1872,7 +1872,7 @@ At this point, you've moved the state to live in the `Game` component, and the U
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 
 function Square({ value, onSquareClick }) {
@@ -1970,7 +1970,7 @@ function calculateWinner(squares) {
 }
 ```
 
-```css styles.css
+```css src/styles.css
 * {
   box-sizing: border-box;
 }
@@ -2073,11 +2073,17 @@ export default function Game() {
 }
 ```
 
-You can see what your code should look like below. Note that you should see an error in the developer tools console that says: ``Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`.`` You'll fix this error in the next section.
+You can see what your code should look like below. Note that you should see an error in the developer tools console that says: 
+
+<ConsoleBlock level="warning">
+Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of &#96;Game&#96;.
+</ConsoleBlock>
+  
+You'll fix this error in the next section.
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 
 function Square({ value, onSquareClick }) {
@@ -2193,7 +2199,7 @@ function calculateWinner(squares) {
 }
 ```
 
-```css styles.css
+```css src/styles.css
 * {
   box-sizing: border-box;
 }
@@ -2266,7 +2272,7 @@ to
 <li>Alexa: 5 tasks left</li>
 ```
 
-In addition to the updated counts, a human reading this would probably say that you swapped Alexa and Ben's ordering and inserted Claudia between Alexa and Ben. However, React is a computer program and can't know what you intended, so you need to specify a _key_ property for each list item to differentiate each list item from its siblings. If your data was from a database, Alexa, Ben, and Claudia's database IDs could be used as keys.
+In addition to the updated counts, a human reading this would probably say that you swapped Alexa and Ben's ordering and inserted Claudia between Alexa and Ben. However, React is a computer program and does not know what you intended, so you need to specify a _key_ property for each list item to differentiate each list item from its siblings. If your data was from a database, Alexa, Ben, and Claudia's database IDs could be used as keys.
 
 ```js {1}
 <li key={user.id}>
@@ -2305,7 +2311,7 @@ const moves = history.map((squares, move) => {
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 
 function Square({ value, onSquareClick }) {
@@ -2422,7 +2428,7 @@ function calculateWinner(squares) {
 
 ```
 
-```css styles.css
+```css src/styles.css
 * {
   box-sizing: border-box;
 }
@@ -2526,7 +2532,7 @@ If you click on any step in the game's history, the tic-tac-toe board should imm
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 
 function Square({value, onSquareClick}) {
@@ -2646,7 +2652,7 @@ function calculateWinner(squares) {
 }
 ```
 
-```css styles.css
+```css src/styles.css
 * {
   box-sizing: border-box;
 }
@@ -2736,7 +2742,7 @@ Check out the final result here:
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 
 function Square({ value, onSquareClick }) {
@@ -2854,7 +2860,7 @@ function calculateWinner(squares) {
 }
 ```
 
-```css styles.css
+```css src/styles.css
 * {
   box-sizing: border-box;
 }
@@ -2909,4 +2915,4 @@ If you have extra time or want to practice your new React skills, here are some
 1. When someone wins, highlight the three squares that caused the win (and when no one wins, display a message about the result being a draw).
 1. Display the location for each move in the format (row, col) in the move history list.
 
-Throughout this tutorial, you've touched on React concepts including elements, components, props, and state. Now that you've seen how these concepts work when building a game, check out [Thinking in React](/learn/thinking-in-react) to see how the same React concepts work when build an app's UI.
+Throughout this tutorial, you've touched on React concepts including elements, components, props, and state. Now that you've seen how these concepts work when building a game, check out [Thinking in React](/learn/thinking-in-react) to see how the same React concepts work when building an app's UI.
diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md
index 5695b755f..7edf8eb6e 100644
--- a/src/content/learn/typescript.md
+++ b/src/content/learn/typescript.md
@@ -12,7 +12,7 @@ TypeScript is a popular way to add type definitions to JavaScript codebases. Out
 <YouWillLearn>
 
 * [TypeScript with React Components](/learn/typescript#typescript-with-react-components)
-* [Examples of typing with hooks](/learn/typescript#example-hooks)
+* [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)
 
@@ -20,9 +20,9 @@ TypeScript is a popular way to add type definitions to JavaScript codebases. Out
 
 ## 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:
+All [production-grade React frameworks](/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)
+- [Next.js](https://nextjs.org/docs/app/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/)
@@ -55,7 +55,7 @@ Taking the [`MyButton` component](/learn#components) from the [Quick Start](/lea
 
 <Sandpack>
 
-```tsx App.tsx active
+```tsx src/App.tsx active
 function MyButton({ title }: { title: string }) {
   return (
     <button>{title}</button>
@@ -72,7 +72,7 @@ export default function MyApp() {
 }
 ```
 
-```js App.js hidden
+```js src/App.js hidden
 import AppTSX from "./App.tsx";
 export default App = AppTSX;
 ```
@@ -88,7 +88,7 @@ This inline syntax is the simplest way to provide types for a component, though
 
 <Sandpack>
 
-```tsx App.tsx active
+```tsx src/App.tsx active
 interface MyButtonProps {
   /** The text to display inside the button */
   title: string;
@@ -112,7 +112,7 @@ export default function MyApp() {
 }
 ```
 
-```js App.js hidden
+```js src/App.js hidden
 import AppTSX from "./App.tsx";
 export default App = AppTSX;
 ```
@@ -124,20 +124,20 @@ The type describing your component's props can be as simple or as complex as you
 
 ## 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. 
+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.
+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:
+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:
+This 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"
@@ -166,11 +166,11 @@ 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:
+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
+```tsx src/App.tsx active
 import {useReducer} from 'react';
 
 interface State {
@@ -213,7 +213,7 @@ export default function App() {
 
 ```
 
-```js App.js hidden
+```js src/App.js hidden
 import AppTSX from "./App.tsx";
 export default App = AppTSX;
 ```
@@ -242,13 +242,13 @@ export default function App() {
 
 ### `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 [`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
+```tsx src/App.tsx active
 import { createContext, useContext, useState } from 'react';
 
 type Theme = "light" | "dark" | "system";
@@ -277,16 +277,16 @@ function MyComponent() {
 }
 ```
 
-```js App.js hidden
+```js src/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 technique works when you have a 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:
+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';
@@ -299,7 +299,7 @@ type ComplexObject = {
 // 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.
+// 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") }
@@ -329,7 +329,7 @@ function MyComponent() {
 
 ### `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.
+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
@@ -339,7 +339,7 @@ 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.
+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
@@ -381,7 +381,7 @@ When working with DOM events in React, the type of the event can often be inferr
 
 <Sandpack>
 
-```tsx App.tsx active
+```tsx src/App.tsx active
 import { useState } from 'react';
 
 export default function Form() {
@@ -400,7 +400,7 @@ export default function Form() {
 }
 ```
 
-```js App.js hidden
+```js src/App.js hidden
 import AppTSX from "./App.tsx";
 export default App = AppTSX;
 ```
@@ -435,7 +435,7 @@ interface ModalRendererProps {
 
 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).
+You can see 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*/}
 
@@ -456,8 +456,8 @@ 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.
+ - [The TypeScript release notes](https://devblogs.microsoft.com/typescript/) cover 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](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
+ - [TypeScript Community Discord](https://discord.com/invite/typescript) is a great place to ask questions and get help with TypeScript and React issues.
diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md
new file mode 100644
index 000000000..2abf7affc
--- /dev/null
+++ b/src/content/learn/understanding-your-ui-as-a-tree.md
@@ -0,0 +1,300 @@
+---
+title: Understanding Your UI as a Tree
+---
+
+<Intro>
+
+Your React app is taking shape with many components being nested within each other. How does React keep track of your app's component structure?
+
+React, and many other UI libraries, model UI as a tree. Thinking of your app as a tree is useful for understanding the relationship between components. This understanding will help you debug future concepts like performance and state management.
+
+</Intro>
+
+<YouWillLearn>
+
+* How React "sees" component structures
+* What a render tree is and what it is useful for
+* What a module dependency tree is and what it is useful for
+
+</YouWillLearn>
+
+## Your UI as a tree {/*your-ui-as-a-tree*/}
+
+Trees are a relationship model between items and UI is often represented using tree structures. For example, browsers use tree structures to model HTML ([DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)) and CSS ([CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model)). Mobile platforms also use trees to represent their view hierarchy.
+
+<Diagram name="preserving_state_dom_tree" height={193} width={864} alt="Diagram with three sections arranged horizontally. In the first section, there are three rectangles stacked vertically, with labels 'Component A', 'Component B', and 'Component C'. Transitioning to the next pane is an arrow with the React logo on top labeled 'React'. The middle section contains a tree of components, with the root labeled 'A' and two children labeled 'B' and 'C'. The next section is again transitioned using an arrow with the React logo on top labeled 'React DOM'. The third and final section is a wireframe of a browser, containing a tree of 8 nodes, which has only a subset highlighted (indicating the subtree from the middle section).">
+
+React creates a UI tree from your components. In this example, the UI tree is then used to render to the DOM.
+</Diagram>
+
+Like browsers and mobile platforms, React also uses tree structures to manage and model the relationship between components in a React app. These trees are useful tools to understand how data flows through a React app and how to optimize rendering and app size.
+
+## The Render Tree {/*the-render-tree*/}
+
+A major feature of components is the ability to compose components of other components. As we [nest components](/learn/your-first-component#nesting-and-organizing-components), we have the concept of parent and child components, where each parent component may itself be a child of another component.
+
+When we render a React app, we can model this relationship in a tree, known as the render tree.
+
+Here is a React app that renders inspirational quotes.
+
+<Sandpack>
+
+```js src/App.js
+import FancyText from './FancyText';
+import InspirationGenerator from './InspirationGenerator';
+import Copyright from './Copyright';
+
+export default function App() {
+  return (
+    <>
+      <FancyText title text="Get Inspired App" />
+      <InspirationGenerator>
+        <Copyright year={2004} />
+      </InspirationGenerator>
+    </>
+  );
+}
+
+```
+
+```js src/FancyText.js
+export default function FancyText({title, text}) {
+  return title
+    ? <h1 className='fancy title'>{text}</h1>
+    : <h3 className='fancy cursive'>{text}</h3>
+}
+```
+
+```js src/InspirationGenerator.js
+import * as React from 'react';
+import quotes from './quotes';
+import FancyText from './FancyText';
+
+export default function InspirationGenerator({children}) {
+  const [index, setIndex] = React.useState(0);
+  const quote = quotes[index];
+  const next = () => setIndex((index + 1) % quotes.length);
+
+  return (
+    <>
+      <p>Your inspirational quote is:</p>
+      <FancyText text={quote} />
+      <button onClick={next}>Inspire me again</button>
+      {children}
+    </>
+  );
+}
+```
+
+```js src/Copyright.js
+export default function Copyright({year}) {
+  return <p className='small'>©️ {year}</p>;
+}
+```
+
+```js src/quotes.js
+export default [
+  "Don’t let yesterday take up too much of today.” — Will Rogers",
+  "Ambition is putting a ladder against the sky.",
+  "A joy that's shared is a joy made double.",
+  ];
+```
+
+```css
+.fancy {
+  font-family: 'Georgia';
+}
+.title {
+  color: #007AA3;
+  text-decoration: underline;
+}
+.cursive {
+  font-style: italic;
+}
+.small {
+  font-size: 10px;
+}
+```
+
+</Sandpack>
+
+<Diagram name="render_tree" height={250} width={500} alt="Tree graph with five nodes. Each node represents a component. The root of the tree is App, with two arrows extending from it to 'InspirationGenerator' and 'FancyText'. The arrows are labelled with the word 'renders'. 'InspirationGenerator' node also has two arrows pointing to nodes 'FancyText' and 'Copyright'.">
+
+React creates a *render tree*, a UI tree, composed of the rendered components.
+
+
+</Diagram>
+
+From the example app, we can construct the above render tree.
+
+The tree is composed of nodes, each of which represents a component. `App`, `FancyText`, `Copyright`, to name a few, are all nodes in our tree.
+
+The root node in a React render tree is the [root component](/learn/importing-and-exporting-components#the-root-component-file) of the app. In this case, the root component is `App` and it is the first component React renders. Each arrow in the tree points from a parent component to a child component.
+
+<DeepDive>
+
+#### Where are the HTML tags in the render tree? {/*where-are-the-html-elements-in-the-render-tree*/}
+
+You'll notice in the above render tree, there is no mention of the HTML tags that each component renders. This is because the render tree is only composed of React [components](learn/your-first-component#components-ui-building-blocks).
+
+React, as a UI framework, is platform agnostic. On react.dev, we showcase examples that render to the web, which uses HTML markup as its UI primitives. But a React app could just as likely render to a mobile or desktop platform, which may use different UI primitives like [UIView](https://developer.apple.com/documentation/uikit/uiview) or [FrameworkElement](https://learn.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement?view=windowsdesktop-7.0).
+
+These platform UI primitives are not a part of React. React render trees can provide insight to our React app regardless of what platform your app renders to.
+
+</DeepDive>
+
+A render tree represents a single render pass of a React application. With [conditional rendering](/learn/conditional-rendering), a parent component may render different children depending on the data passed.
+
+We can update the app to conditionally render either an inspirational quote or color.
+
+<Sandpack>
+
+```js src/App.js
+import FancyText from './FancyText';
+import InspirationGenerator from './InspirationGenerator';
+import Copyright from './Copyright';
+
+export default function App() {
+  return (
+    <>
+      <FancyText title text="Get Inspired App" />
+      <InspirationGenerator>
+        <Copyright year={2004} />
+      </InspirationGenerator>
+    </>
+  );
+}
+
+```
+
+```js src/FancyText.js
+export default function FancyText({title, text}) {
+  return title
+    ? <h1 className='fancy title'>{text}</h1>
+    : <h3 className='fancy cursive'>{text}</h3>
+}
+```
+
+```js src/Color.js
+export default function Color({value}) {
+  return <div className="colorbox" style={{backgroundColor: value}} />
+}
+```
+
+```js src/InspirationGenerator.js
+import * as React from 'react';
+import inspirations from './inspirations';
+import FancyText from './FancyText';
+import Color from './Color';
+
+export default function InspirationGenerator({children}) {
+  const [index, setIndex] = React.useState(0);
+  const inspiration = inspirations[index];
+  const next = () => setIndex((index + 1) % inspirations.length);
+
+  return (
+    <>
+      <p>Your inspirational {inspiration.type} is:</p>
+      {inspiration.type === 'quote'
+      ? <FancyText text={inspiration.value} />
+      : <Color value={inspiration.value} />}
+
+      <button onClick={next}>Inspire me again</button>
+      {children}
+    </>
+  );
+}
+```
+
+```js src/Copyright.js
+export default function Copyright({year}) {
+  return <p className='small'>©️ {year}</p>;
+}
+```
+
+```js src/inspirations.js
+export default [
+  {type: 'quote', value: "Don’t let yesterday take up too much of today.” — Will Rogers"},
+  {type: 'color', value: "#B73636"},
+  {type: 'quote', value: "Ambition is putting a ladder against the sky."},
+  {type: 'color', value: "#256266"},
+  {type: 'quote', value: "A joy that's shared is a joy made double."},
+  {type: 'color', value: "#F9F2B4"},
+];
+```
+
+```css
+.fancy {
+  font-family: 'Georgia';
+}
+.title {
+  color: #007AA3;
+  text-decoration: underline;
+}
+.cursive {
+  font-style: italic;
+}
+.small {
+  font-size: 10px;
+}
+.colorbox {
+  height: 100px;
+  width: 100px;
+  margin: 8px;
+}
+```
+</Sandpack>
+
+<Diagram name="conditional_render_tree" height={250} width={561} alt="Tree graph with six nodes. The top node of the tree is labelled 'App' with two arrows extending to nodes labelled 'InspirationGenerator' and 'FancyText'. The arrows are solid lines and are labelled with the word 'renders'. 'InspirationGenerator' node also has three arrows. The arrows to nodes 'FancyText' and 'Color' are dashed and labelled with 'renders?'. The last arrow points to the node labelled 'Copyright' and is solid and labelled with 'renders'.">
+
+With conditional rendering, across different renders, the render tree may render different components.
+
+</Diagram>
+
+In this example, depending on what `inspiration.type` is, we may render `<FancyText>` or `<Color>`. The render tree may be different for each render pass.
+
+Although render trees may differ across render passes, these trees are generally helpful for identifying what the *top-level* and *leaf components* are in a React app. Top-level components are the components nearest to the root component and affect the rendering performance of all the components beneath them and often contain the most complexity. Leaf components are near the bottom of the tree and have no child components and are often frequently re-rendered.
+
+Identifying these categories of components are useful for understanding data flow and performance of your app.
+
+## The Module Dependency Tree {/*the-module-dependency-tree*/}
+
+Another relationship in a React app that can be modeled with a tree are an app's module dependencies. As we [break up our components](/learn/importing-and-exporting-components#exporting-and-importing-a-component) and logic into separate files, we create [JS modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) where we may export components, functions, or constants.
+
+Each node in a module dependency tree is a module and each branch represents an `import` statement in that module.
+
+If we take the previous Inspirations app, we can build a module dependency tree, or dependency tree for short.
+
+<Diagram name="module_dependency_tree" height={250} width={658} alt="A tree graph with seven nodes. Each node is labelled with a module name. The top level node of the tree is labelled 'App.js'. There are three arrows pointing to the modules 'InspirationGenerator.js', 'FancyText.js' and 'Copyright.js' and the arrows are labelled with 'imports'. From the 'InspirationGenerator.js' node, there are three arrows that extend to three modules: 'FancyText.js', 'Color.js', and 'inspirations.js'. The arrows are labelled with 'imports'.">
+
+The module dependency tree for the Inspirations app.
+
+</Diagram>
+
+The root node of the tree is the root module, also known as the entrypoint file. It often is the module that contains the root component.
+
+Comparing to the render tree of the same app, there are similar structures but some notable differences:
+
+* The nodes that make-up the tree represent modules, not components.
+* Non-component modules, like `inspirations.js`, are also represented in this tree. The render tree only encapsulates components.
+* `Copyright.js` appears under `App.js` but in the render tree, `Copyright`, the component, appears as a child of `InspirationGenerator`. This is because `InspirationGenerator` accepts JSX as [children props](/learn/passing-props-to-a-component#passing-jsx-as-children), so it renders `Copyright` as a child component but does not import the module.
+
+Dependency trees are useful to determine what modules are necessary to run your React app. When building a React app for production, there is typically a build step that will bundle all the necessary JavaScript to ship to the client. The tool responsible for this is called a [bundler](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#the_modern_tooling_ecosystem), and bundlers will use the dependency tree to determine what modules should be included.
+
+As your app grows, often the bundle size does too. Large bundle sizes are expensive for a client to download and run. Large bundle sizes can delay the time for your UI to get drawn. Getting a sense of your app's dependency tree may help with debugging these issues.
+
+[comment]: <> (perhaps we should also deep dive on conditional imports)
+
+<Recap>
+
+* Trees are a common way to represent the relationship between entities. They are often used to model UI.
+* Render trees represent the nested relationship between React components across a single render.
+* With conditional rendering, the render tree may change across different renders. With different prop values, components may render different children components.
+* Render trees help identify what the top-level and leaf components are. Top-level components affect the rendering performance of all components beneath them and leaf components are often re-rendered frequently. Identifying them is useful for understanding and debugging rendering performance.
+* Dependency trees represent the module dependencies in a React app.
+* Dependency trees are used by build tools to bundle the necessary code to ship an app.
+* Dependency trees are useful for debugging large bundle sizes that slow time to paint and expose opportunities for optimizing what code is bundled.
+
+</Recap>
+
+[TODO]: <> (Add challenges)
diff --git a/src/content/learn/updating-arrays-in-state.md b/src/content/learn/updating-arrays-in-state.md
index 45c6b70dc..61e4f4e2d 100644
--- a/src/content/learn/updating-arrays-in-state.md
+++ b/src/content/learn/updating-arrays-in-state.md
@@ -409,7 +409,6 @@ For example:
 ```js
 import { useState } from 'react';
 
-let nextId = 3;
 const initialList = [
   { id: 0, title: 'Big Bellies' },
   { id: 1, title: 'Lunar Landscape' },
@@ -1084,7 +1083,7 @@ In this example, all of the event handlers in `App.js` use mutation. As a result
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import AddTodo from './AddTodo.js';
 import TaskList from './TaskList.js';
@@ -1139,7 +1138,7 @@ export default function TaskApp() {
 }
 ```
 
-```js AddTodo.js
+```js src/AddTodo.js
 import { useState } from 'react';
 
 export default function AddTodo({ onAddTodo }) {
@@ -1160,7 +1159,7 @@ export default function AddTodo({ onAddTodo }) {
 }
 ```
 
-```js TaskList.js
+```js src/TaskList.js
 import { useState } from 'react';
 
 export default function TaskList({
@@ -1247,7 +1246,7 @@ In `handleAddTodo`, you can use the array spread syntax. In `handleChangeTodo`,
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import AddTodo from './AddTodo.js';
 import TaskList from './TaskList.js';
@@ -1306,7 +1305,7 @@ export default function TaskApp() {
 }
 ```
 
-```js AddTodo.js
+```js src/AddTodo.js
 import { useState } from 'react';
 
 export default function AddTodo({ onAddTodo }) {
@@ -1327,7 +1326,7 @@ export default function AddTodo({ onAddTodo }) {
 }
 ```
 
-```js TaskList.js
+```js src/TaskList.js
 import { useState } from 'react';
 
 export default function TaskList({
@@ -1417,7 +1416,7 @@ This is the same example as in the previous challenge. This time, fix the mutati
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import { useImmer } from 'use-immer';
 import AddTodo from './AddTodo.js';
@@ -1473,7 +1472,7 @@ export default function TaskApp() {
 }
 ```
 
-```js AddTodo.js
+```js src/AddTodo.js
 import { useState } from 'react';
 
 export default function AddTodo({ onAddTodo }) {
@@ -1494,7 +1493,7 @@ export default function AddTodo({ onAddTodo }) {
 }
 ```
 
-```js TaskList.js
+```js src/TaskList.js
 import { useState } from 'react';
 
 export default function TaskList({
@@ -1599,7 +1598,7 @@ With Immer, you can write code in the mutative fashion, as long as you're only m
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import { useImmer } from 'use-immer';
 import AddTodo from './AddTodo.js';
@@ -1661,7 +1660,7 @@ export default function TaskApp() {
 }
 ```
 
-```js AddTodo.js
+```js src/AddTodo.js
 import { useState } from 'react';
 
 export default function AddTodo({ onAddTodo }) {
@@ -1682,7 +1681,7 @@ export default function AddTodo({ onAddTodo }) {
 }
 ```
 
-```js TaskList.js
+```js src/TaskList.js
 import { useState } from 'react';
 
 export default function TaskList({
@@ -1787,7 +1786,7 @@ For example, in this version `handleAddTodo` is implemented by mutating the Imme
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import { useImmer } from 'use-immer';
 import AddTodo from './AddTodo.js';
@@ -1846,7 +1845,7 @@ export default function TaskApp() {
 }
 ```
 
-```js AddTodo.js
+```js src/AddTodo.js
 import { useState } from 'react';
 
 export default function AddTodo({ onAddTodo }) {
@@ -1867,7 +1866,7 @@ export default function AddTodo({ onAddTodo }) {
 }
 ```
 
-```js TaskList.js
+```js src/TaskList.js
 import { useState } from 'react';
 
 export default function TaskList({
diff --git a/src/content/learn/updating-objects-in-state.md b/src/content/learn/updating-objects-in-state.md
index 9289f2454..93ea93bd2 100644
--- a/src/content/learn/updating-objects-in-state.md
+++ b/src/content/learn/updating-objects-in-state.md
@@ -57,6 +57,7 @@ This example holds an object in state to represent the current pointer position.
 
 ```js
 import { useState } from 'react';
+
 export default function MovingDot() {
   const [position, setPosition] = useState({
     x: 0,
@@ -127,6 +128,7 @@ Notice how the red dot now follows your pointer when you touch or hover over the
 
 ```js
 import { useState } from 'react';
+
 export default function MovingDot() {
   const [position, setPosition] = useState({
     x: 0,
@@ -377,7 +379,7 @@ Note that the `...` spread syntax is "shallow"--it only copies things one level
 
 #### Using a single event handler for multiple fields {/*using-a-single-event-handler-for-multiple-fields*/}
 
-You can also use the `[` and `]` braces inside your object definition to specify a property with dynamic name. Here is the same example, but with a single event handler instead of three different ones:
+You can also use the `[` and `]` braces inside your object definition to specify a property with a dynamic name. Here is the same example, but with a single event handler instead of three different ones:
 
 <Sandpack>
 
@@ -986,7 +988,7 @@ If something unexpected changes, there is a mutation. Find the mutation in `App.
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import Background from './Background.js';
 import Box from './Box.js';
@@ -1039,7 +1041,7 @@ export default function Canvas() {
 }
 ```
 
-```js Box.js
+```js src/Box.js
 import { useState } from 'react';
 
 export default function Box({
@@ -1102,7 +1104,7 @@ export default function Box({
 }
 ```
 
-```js Background.js
+```js src/Background.js
 export default function Background({
   position
 }) {
@@ -1136,7 +1138,7 @@ The fix is to remove the mutation from `handleMove`, and use the spread syntax t
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import Background from './Background.js';
 import Box from './Box.js';
@@ -1194,7 +1196,7 @@ export default function Canvas() {
 }
 ```
 
-```js Box.js
+```js src/Box.js
 import { useState } from 'react';
 
 export default function Box({
@@ -1257,7 +1259,7 @@ export default function Box({
 }
 ```
 
-```js Background.js
+```js src/Background.js
 export default function Background({
   position
 }) {
@@ -1291,7 +1293,7 @@ This is the same buggy example as in the previous challenge. This time, fix the
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import { useImmer } from 'use-immer';
 import Background from './Background.js';
@@ -1345,7 +1347,7 @@ export default function Canvas() {
 }
 ```
 
-```js Box.js
+```js src/Box.js
 import { useState } from 'react';
 
 export default function Box({
@@ -1408,7 +1410,7 @@ export default function Box({
 }
 ```
 
-```js Background.js
+```js src/Background.js
 export default function Background({
   position
 }) {
@@ -1458,7 +1460,7 @@ This is the solution rewritten with Immer. Notice how the event handlers are wri
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useImmer } from 'use-immer';
 import Background from './Background.js';
 import Box from './Box.js';
@@ -1512,7 +1514,7 @@ export default function Canvas() {
 }
 ```
 
-```js Box.js
+```js src/Box.js
 import { useState } from 'react';
 
 export default function Box({
@@ -1575,7 +1577,7 @@ export default function Box({
 }
 ```
 
-```js Background.js
+```js src/Background.js
 export default function Background({
   position
 }) {
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 a3b33d3a7..a009793ab 100644
--- a/src/content/learn/you-might-not-need-an-effect.md
+++ b/src/content/learn/you-might-not-need-an-effect.md
@@ -408,9 +408,9 @@ function Game() {
 
 There are two problems with this code.
 
-One problem is that it is very inefficient: the component (and its children) have to re-render between each `set` call in the chain. In the example above, in the worst case (`setCard` → render → `setGoldCardCount` → render → `setRound` → render → `setIsGameOver` → render) there are three unnecessary re-renders of the tree below.
+The first problem is that it is very inefficient: the component (and its children) have to re-render between each `set` call in the chain. In the example above, in the worst case (`setCard` → render → `setGoldCardCount` → render → `setRound` → render → `setIsGameOver` → render) there are three unnecessary re-renders of the tree below.
 
-Even if it weren't slow, as your code evolves, you will run into cases where the "chain" you wrote doesn't fit the new requirements. Imagine you are adding a way to step through the history of the game moves. You'd do it by updating each state variable to a value from the past. However, setting the `card` state to a value from the past would trigger the Effect chain again and change the data you're showing. Such code is often rigid and fragile.
+The second problem is that even if it weren't slow, as your code evolves, you will run into cases where the "chain" you wrote doesn't fit the new requirements. Imagine you are adding a way to step through the history of the game moves. You'd do it by updating each state variable to a value from the past. However, setting the `card` state to a value from the past would trigger the Effect chain again and change the data you're showing. Such code is often rigid and fragile.
 
 In this case, it's better to calculate what you can during rendering, and adjust the state in the event handler:
 
@@ -882,7 +882,7 @@ function NewTodo({ onAdd }) {
 }
 ```
 
-```js todos.js
+```js src/todos.js
 let nextId = 0;
 
 export function createTodo(text, completed = false) {
@@ -975,7 +975,7 @@ function NewTodo({ onAdd }) {
 }
 ```
 
-```js todos.js
+```js src/todos.js
 let nextId = 0;
 
 export function createTodo(text, completed = false) {
@@ -1061,7 +1061,7 @@ export default function TodoList() {
 }
 ```
 
-```js todos.js
+```js src/todos.js
 let nextId = 0;
 let calls = 0;
 
@@ -1144,7 +1144,7 @@ export default function TodoList() {
 }
 ```
 
-```js todos.js
+```js src/todos.js
 let nextId = 0;
 let calls = 0;
 
@@ -1233,7 +1233,7 @@ function NewTodo({ onAdd }) {
 }
 ```
 
-```js todos.js
+```js src/todos.js
 let nextId = 0;
 let calls = 0;
 
@@ -1278,7 +1278,7 @@ When you select a contact with the buttons at the top, the form resets to reflec
 
 <Sandpack>
 
-```js App.js hidden
+```js src/App.js hidden
 import { useState } from 'react';
 import ContactList from './ContactList.js';
 import EditContact from './EditContact.js';
@@ -1330,7 +1330,7 @@ const initialContacts = [
 ];
 ```
 
-```js ContactList.js hidden
+```js src/ContactList.js hidden
 export default function ContactList({
   contacts,
   selectedId,
@@ -1357,7 +1357,7 @@ export default function ContactList({
 }
 ```
 
-```js EditContact.js active
+```js src/EditContact.js active
 import { useState, useEffect } from 'react';
 
 export default function EditContact({ savedContact, onSave }) {
@@ -1442,7 +1442,7 @@ Split the `EditContact` component in two. Move all the form state into the inner
 
 <Sandpack>
 
-```js App.js hidden
+```js src/App.js hidden
 import { useState } from 'react';
 import ContactList from './ContactList.js';
 import EditContact from './EditContact.js';
@@ -1494,7 +1494,7 @@ const initialContacts = [
 ];
 ```
 
-```js ContactList.js hidden
+```js src/ContactList.js hidden
 export default function ContactList({
   contacts,
   selectedId,
@@ -1521,7 +1521,7 @@ export default function ContactList({
 }
 ```
 
-```js EditContact.js active
+```js src/EditContact.js active
 import { useState } from 'react';
 
 export default function EditContact(props) {
diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md
index d91bc20c6..a2bef6bf2 100644
--- a/src/content/reference/react-dom/client/createRoot.md
+++ b/src/content/reference/react-dom/client/createRoot.md
@@ -45,7 +45,9 @@ An app fully built with React will usually only have one `createRoot` call for i
 
 * **optional** `options`: An object with options for this React root.
 
-  * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors.
+  * **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`.
+  * **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown, and an `errorInfo` object containing the `componentStack`.
+  * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with an `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`.
   * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page.
 
 #### Returns {/*returns*/}
@@ -153,7 +155,7 @@ Usually, you only need to run this code once at startup. It will:
 </html>
 ```
 
-```js index.js active
+```js src/index.js active
 import { createRoot } from 'react-dom/client';
 import App from './App.js';
 import './styles.css';
@@ -162,7 +164,7 @@ const root = createRoot(document.getElementById('root'));
 root.render(<App />);
 ```
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 
 export default function App() {
@@ -232,7 +234,7 @@ Here, two different React components are rendered into two DOM nodes defined in
 </html>
 ```
 
-```js index.js active
+```js src/index.js active
 import './styles.css';
 import { createRoot } from 'react-dom/client';
 import { Comments, Navigation } from './Components.js';
@@ -246,7 +248,7 @@ const commentRoot = createRoot(commentDomNode);
 commentRoot.render(<Comments />);
 ```
 
-```js Components.js
+```js src/Components.js
 export function Navigation() {
   return (
     <ul>
@@ -313,7 +315,7 @@ You can call `render` more than once on the same root. As long as the component
 
 <Sandpack>
 
-```js index.js active
+```js src/index.js active
 import { createRoot } from 'react-dom/client';
 import './styles.css';
 import App from './App.js';
@@ -327,7 +329,7 @@ setInterval(() => {
 }, 1000);
 ```
 
-```js App.js
+```js src/App.js
 export default function App({counter}) {
   return (
     <>
@@ -342,6 +344,774 @@ export default function App({counter}) {
 
 It is uncommon to call `render` multiple times. Usually, your components will [update state](/reference/react/useState) instead.
 
+### Show a dialog for uncaught errors {/*show-a-dialog-for-uncaught-errors*/}
+
+By default, React will log all uncaught errors to the console. To implement your own error reporting, you can provide the optional `onUncaughtError` root option:
+
+```js [[1, 6, "onUncaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack"]]
+import { createRoot } from 'react-dom/client';
+
+const root = createRoot(
+  document.getElementById('root'),
+  {
+    onUncaughtError: (error, errorInfo) => {
+      console.error(
+        'Uncaught error',
+        error,
+        errorInfo.componentStack
+      );
+    }
+  }
+);
+root.render(<App />);
+```
+
+The <CodeStep step={1}>onUncaughtError</CodeStep> option is a function called with two arguments:
+
+1. The <CodeStep step={2}>error</CodeStep> that was thrown.
+2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the <CodeStep step={4}>componentStack</CodeStep> of the error.
+
+You can use the `onUncaughtError` root option to display error dialogs:
+
+<Sandpack>
+
+```html index.html hidden
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My app</title>
+</head>
+<body>
+<!--
+  Error dialog in raw HTML
+  since an error in the React app may crash.
+-->
+<div id="error-dialog" class="hidden">
+  <h1 id="error-title" class="text-red"></h1>
+  <h3>
+    <pre id="error-message"></pre>
+  </h3>
+  <p>
+    <pre id="error-body"></pre>
+  </p>
+  <h4 class="-mb-20">This error occurred at:</h4>
+  <pre id="error-component-stack" class="nowrap"></pre>
+  <h4 class="mb-0">Call stack:</h4>
+  <pre id="error-stack" class="nowrap"></pre>
+  <div id="error-cause">
+    <h4 class="mb-0">Caused by:</h4>
+    <pre id="error-cause-message"></pre>
+    <pre id="error-cause-stack" class="nowrap"></pre>
+  </div>
+  <button
+    id="error-close"
+    class="mb-10"
+    onclick="document.getElementById('error-dialog').classList.add('hidden')"
+  >
+    Close
+  </button>
+  <h3 id="error-not-dismissible">This error is not dismissible.</h3>
+</div>
+<!-- This is the DOM node -->
+<div id="root"></div>
+</body>
+</html>
+```
+
+```css src/styles.css active
+label, button { display: block; margin-bottom: 20px; }
+html, body { min-height: 300px; }
+
+#error-dialog {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: white;
+  padding: 15px;
+  opacity: 0.9;
+  text-wrap: wrap;
+  overflow: scroll;
+}
+
+.text-red {
+  color: red;
+}
+
+.-mb-20 {
+  margin-bottom: -20px;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+pre {
+  text-wrap: wrap;
+}
+
+pre.nowrap {
+  text-wrap: nowrap;
+}
+
+.hidden {
+ display: none;  
+}
+```
+
+```js src/reportError.js hidden
+function reportError({ title, error, componentStack, dismissable }) {
+  const errorDialog = document.getElementById("error-dialog");
+  const errorTitle = document.getElementById("error-title");
+  const errorMessage = document.getElementById("error-message");
+  const errorBody = document.getElementById("error-body");
+  const errorComponentStack = document.getElementById("error-component-stack");
+  const errorStack = document.getElementById("error-stack");
+  const errorClose = document.getElementById("error-close");
+  const errorCause = document.getElementById("error-cause");
+  const errorCauseMessage = document.getElementById("error-cause-message");
+  const errorCauseStack = document.getElementById("error-cause-stack");
+  const errorNotDismissible = document.getElementById("error-not-dismissible");
+  
+  // Set the title
+  errorTitle.innerText = title;
+  
+  // Display error message and body
+  const [heading, body] = error.message.split(/\n(.*)/s);
+  errorMessage.innerText = heading;
+  if (body) {
+    errorBody.innerText = body;
+  } else {
+    errorBody.innerText = '';
+  }
+
+  // Display component stack
+  errorComponentStack.innerText = componentStack;
+
+  // Display the call stack
+  // Since we already displayed the message, strip it, and the first Error: line.
+  errorStack.innerText = error.stack.replace(error.message, '').split(/\n(.*)/s)[1];
+  
+  // Display the cause, if available
+  if (error.cause) {
+    errorCauseMessage.innerText = error.cause.message;
+    errorCauseStack.innerText = error.cause.stack;
+    errorCause.classList.remove('hidden');
+  } else {
+    errorCause.classList.add('hidden');
+  }
+  // Display the close button, if dismissible
+  if (dismissable) {
+    errorNotDismissible.classList.add('hidden');
+    errorClose.classList.remove("hidden");
+  } else {
+    errorNotDismissible.classList.remove('hidden');
+    errorClose.classList.add("hidden");
+  }
+  
+  // Show the dialog
+  errorDialog.classList.remove("hidden");
+}
+
+export function reportCaughtError({error, cause, componentStack}) {
+  reportError({ title: "Caught Error", error, componentStack,  dismissable: true});
+}
+
+export function reportUncaughtError({error, cause, componentStack}) {
+  reportError({ title: "Uncaught Error", error, componentStack, dismissable: false });
+}
+
+export function reportRecoverableError({error, cause, componentStack}) {
+  reportError({ title: "Recoverable Error", error, componentStack,  dismissable: true });
+}
+```
+
+```js src/index.js active
+import { createRoot } from "react-dom/client";
+import App from "./App.js";
+import {reportUncaughtError} from "./reportError";
+import "./styles.css";
+
+const container = document.getElementById("root");
+const root = createRoot(container, {
+  onUncaughtError: (error, errorInfo) => {
+    if (error.message !== 'Known error') {
+      reportUncaughtError({
+        error,
+        componentStack: errorInfo.componentStack
+      });
+    }
+  }
+});
+root.render(<App />);
+```
+
+```js src/App.js
+import { useState } from 'react';
+
+export default function App() {
+  const [throwError, setThrowError] = useState(false);
+  
+  if (throwError) {
+    foo.bar = 'baz';
+  }
+  
+  return (
+    <div>
+      <span>This error shows the error dialog:</span>
+      <button onClick={() => setThrowError(true)}>
+        Throw error
+      </button>
+    </div>
+  );
+}
+```
+
+</Sandpack>
+
+
+### Displaying Error Boundary errors {/*displaying-error-boundary-errors*/}
+
+By default, React will log all errors caught by an Error Boundary to `console.error`. To override this behavior, you can provide the optional `onCaughtError` root option to handle errors caught by an [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary):
+
+```js [[1, 6, "onCaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack"]]
+import { createRoot } from 'react-dom/client';
+
+const root = createRoot(
+  document.getElementById('root'),
+  {
+    onCaughtError: (error, errorInfo) => {
+      console.error(
+        'Caught error',
+        error,
+        errorInfo.componentStack
+      );
+    }
+  }
+);
+root.render(<App />);
+```
+
+The <CodeStep step={1}>onCaughtError</CodeStep> option is a function called with two arguments:
+
+1. The <CodeStep step={2}>error</CodeStep> that was caught by the boundary.
+2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the <CodeStep step={4}>componentStack</CodeStep> of the error.
+
+You can use the `onCaughtError` root option to display error dialogs or filter known errors from logging:
+
+<Sandpack>
+
+```html index.html hidden
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My app</title>
+</head>
+<body>
+<!--
+  Error dialog in raw HTML
+  since an error in the React app may crash.
+-->
+<div id="error-dialog" class="hidden">
+  <h1 id="error-title" class="text-red"></h1>
+  <h3>
+    <pre id="error-message"></pre>
+  </h3>
+  <p>
+    <pre id="error-body"></pre>
+  </p>
+  <h4 class="-mb-20">This error occurred at:</h4>
+  <pre id="error-component-stack" class="nowrap"></pre>
+  <h4 class="mb-0">Call stack:</h4>
+  <pre id="error-stack" class="nowrap"></pre>
+  <div id="error-cause">
+    <h4 class="mb-0">Caused by:</h4>
+    <pre id="error-cause-message"></pre>
+    <pre id="error-cause-stack" class="nowrap"></pre>
+  </div>
+  <button
+    id="error-close"
+    class="mb-10"
+    onclick="document.getElementById('error-dialog').classList.add('hidden')"
+  >
+    Close
+  </button>
+  <h3 id="error-not-dismissible">This error is not dismissible.</h3>
+</div>
+<!-- This is the DOM node -->
+<div id="root"></div>
+</body>
+</html>
+```
+
+```css src/styles.css active
+label, button { display: block; margin-bottom: 20px; }
+html, body { min-height: 300px; }
+
+#error-dialog {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: white;
+  padding: 15px;
+  opacity: 0.9;
+  text-wrap: wrap;
+  overflow: scroll;
+}
+
+.text-red {
+  color: red;
+}
+
+.-mb-20 {
+  margin-bottom: -20px;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+pre {
+  text-wrap: wrap;
+}
+
+pre.nowrap {
+  text-wrap: nowrap;
+}
+
+.hidden {
+ display: none;  
+}
+```
+
+```js src/reportError.js hidden
+function reportError({ title, error, componentStack, dismissable }) {
+  const errorDialog = document.getElementById("error-dialog");
+  const errorTitle = document.getElementById("error-title");
+  const errorMessage = document.getElementById("error-message");
+  const errorBody = document.getElementById("error-body");
+  const errorComponentStack = document.getElementById("error-component-stack");
+  const errorStack = document.getElementById("error-stack");
+  const errorClose = document.getElementById("error-close");
+  const errorCause = document.getElementById("error-cause");
+  const errorCauseMessage = document.getElementById("error-cause-message");
+  const errorCauseStack = document.getElementById("error-cause-stack");
+  const errorNotDismissible = document.getElementById("error-not-dismissible");
+
+  // Set the title
+  errorTitle.innerText = title;
+
+  // Display error message and body
+  const [heading, body] = error.message.split(/\n(.*)/s);
+  errorMessage.innerText = heading;
+  if (body) {
+    errorBody.innerText = body;
+  } else {
+    errorBody.innerText = '';
+  }
+
+  // Display component stack
+  errorComponentStack.innerText = componentStack;
+
+  // Display the call stack
+  // Since we already displayed the message, strip it, and the first Error: line.
+  errorStack.innerText = error.stack.replace(error.message, '').split(/\n(.*)/s)[1];
+
+  // Display the cause, if available
+  if (error.cause) {
+    errorCauseMessage.innerText = error.cause.message;
+    errorCauseStack.innerText = error.cause.stack;
+    errorCause.classList.remove('hidden');
+  } else {
+    errorCause.classList.add('hidden');
+  }
+  // Display the close button, if dismissible
+  if (dismissable) {
+    errorNotDismissible.classList.add('hidden');
+    errorClose.classList.remove("hidden");
+  } else {
+    errorNotDismissible.classList.remove('hidden');
+    errorClose.classList.add("hidden");
+  }
+
+  // Show the dialog
+  errorDialog.classList.remove("hidden");
+}
+
+export function reportCaughtError({error, cause, componentStack}) {
+  reportError({ title: "Caught Error", error, componentStack,  dismissable: true});
+}
+
+export function reportUncaughtError({error, cause, componentStack}) {
+  reportError({ title: "Uncaught Error", error, componentStack, dismissable: false });
+}
+
+export function reportRecoverableError({error, cause, componentStack}) {
+  reportError({ title: "Recoverable Error", error, componentStack,  dismissable: true });
+}
+```
+
+```js src/index.js active
+import { createRoot } from "react-dom/client";
+import App from "./App.js";
+import {reportCaughtError} from "./reportError";
+import "./styles.css";
+
+const container = document.getElementById("root");
+const root = createRoot(container, {
+  onCaughtError: (error, errorInfo) => {
+    if (error.message !== 'Known error') {
+      reportCaughtError({
+        error, 
+        componentStack: errorInfo.componentStack,
+      });
+    }
+  }
+});
+root.render(<App />);
+```
+
+```js src/App.js
+import { useState } from 'react';
+import { ErrorBoundary } from "react-error-boundary";
+
+export default function App() {
+  const [error, setError] = useState(null);
+  
+  function handleUnknown() {
+    setError("unknown");
+  }
+
+  function handleKnown() {
+    setError("known");
+  }
+  
+  return (
+    <>
+      <ErrorBoundary
+        fallbackRender={fallbackRender}
+        onReset={(details) => {
+          setError(null);
+        }}
+      >
+        {error != null && <Throw error={error} />}
+        <span>This error will not show the error dialog:</span>
+        <button onClick={handleKnown}>
+          Throw known error
+        </button>
+        <span>This error will show the error dialog:</span>
+        <button onClick={handleUnknown}>
+          Throw unknown error
+        </button>
+      </ErrorBoundary>
+      
+    </>
+  );
+}
+
+function fallbackRender({ resetErrorBoundary }) {
+  return (
+    <div role="alert">
+      <h3>Error Boundary</h3>
+      <p>Something went wrong.</p>
+      <button onClick={resetErrorBoundary}>Reset</button>
+    </div>
+  );
+}
+
+function Throw({error}) {
+  if (error === "known") {
+    throw new Error('Known error')
+  } else {
+    foo.bar = 'baz';
+  }
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "19.0.0-rc-3edc000d-20240926",
+    "react-dom": "19.0.0-rc-3edc000d-20240926",
+    "react-scripts": "^5.0.0",
+    "react-error-boundary": "4.0.3"
+  },
+  "main": "/index.js"
+}
+```
+
+</Sandpack>
+
+### Displaying a dialog for recoverable errors {/*displaying-a-dialog-for-recoverable-errors*/}
+
+React may automatically render a component a second time to attempt to recover from an error thrown in render. If successful, React will log a recoverable error to the console to notify the developer. To override this behavior, you can provide the optional `onRecoverableError` root option:
+
+```js [[1, 6, "onRecoverableError"], [2, 6, "error", 1], [3, 10, "error.cause"], [4, 6, "errorInfo"], [5, 11, "componentStack"]]
+import { createRoot } from 'react-dom/client';
+
+const root = createRoot(
+  document.getElementById('root'),
+  {
+    onRecoverableError: (error, errorInfo) => {
+      console.error(
+        'Recoverable error',
+        error,
+        error.cause,
+        errorInfo.componentStack,
+      );
+    }
+  }
+);
+root.render(<App />);
+```
+
+The <CodeStep step={1}>onRecoverableError</CodeStep> option is a function called with two arguments:
+
+1. The <CodeStep step={2}>error</CodeStep> that React throws. Some errors may include the original cause as <CodeStep step={3}>error.cause</CodeStep>. 
+2. An <CodeStep step={4}>errorInfo</CodeStep> object that contains the <CodeStep step={5}>componentStack</CodeStep> of the error.
+
+You can use the `onRecoverableError` root option to display error dialogs:
+
+<Sandpack>
+
+```html index.html hidden
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My app</title>
+</head>
+<body>
+<!--
+  Error dialog in raw HTML
+  since an error in the React app may crash.
+-->
+<div id="error-dialog" class="hidden">
+  <h1 id="error-title" class="text-red"></h1>
+  <h3>
+    <pre id="error-message"></pre>
+  </h3>
+  <p>
+    <pre id="error-body"></pre>
+  </p>
+  <h4 class="-mb-20">This error occurred at:</h4>
+  <pre id="error-component-stack" class="nowrap"></pre>
+  <h4 class="mb-0">Call stack:</h4>
+  <pre id="error-stack" class="nowrap"></pre>
+  <div id="error-cause">
+    <h4 class="mb-0">Caused by:</h4>
+    <pre id="error-cause-message"></pre>
+    <pre id="error-cause-stack" class="nowrap"></pre>
+  </div>
+  <button
+    id="error-close"
+    class="mb-10"
+    onclick="document.getElementById('error-dialog').classList.add('hidden')"
+  >
+    Close
+  </button>
+  <h3 id="error-not-dismissible">This error is not dismissible.</h3>
+</div>
+<!-- This is the DOM node -->
+<div id="root"></div>
+</body>
+</html>
+```
+
+```css src/styles.css active
+label, button { display: block; margin-bottom: 20px; }
+html, body { min-height: 300px; }
+
+#error-dialog {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: white;
+  padding: 15px;
+  opacity: 0.9;
+  text-wrap: wrap;
+  overflow: scroll;
+}
+
+.text-red {
+  color: red;
+}
+
+.-mb-20 {
+  margin-bottom: -20px;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+pre {
+  text-wrap: wrap;
+}
+
+pre.nowrap {
+  text-wrap: nowrap;
+}
+
+.hidden {
+ display: none;  
+}
+```
+
+```js src/reportError.js hidden
+function reportError({ title, error, componentStack, dismissable }) {
+  const errorDialog = document.getElementById("error-dialog");
+  const errorTitle = document.getElementById("error-title");
+  const errorMessage = document.getElementById("error-message");
+  const errorBody = document.getElementById("error-body");
+  const errorComponentStack = document.getElementById("error-component-stack");
+  const errorStack = document.getElementById("error-stack");
+  const errorClose = document.getElementById("error-close");
+  const errorCause = document.getElementById("error-cause");
+  const errorCauseMessage = document.getElementById("error-cause-message");
+  const errorCauseStack = document.getElementById("error-cause-stack");
+  const errorNotDismissible = document.getElementById("error-not-dismissible");
+
+  // Set the title
+  errorTitle.innerText = title;
+
+  // Display error message and body
+  const [heading, body] = error.message.split(/\n(.*)/s);
+  errorMessage.innerText = heading;
+  if (body) {
+    errorBody.innerText = body;
+  } else {
+    errorBody.innerText = '';
+  }
+
+  // Display component stack
+  errorComponentStack.innerText = componentStack;
+
+  // Display the call stack
+  // Since we already displayed the message, strip it, and the first Error: line.
+  errorStack.innerText = error.stack.replace(error.message, '').split(/\n(.*)/s)[1];
+
+  // Display the cause, if available
+  if (error.cause) {
+    errorCauseMessage.innerText = error.cause.message;
+    errorCauseStack.innerText = error.cause.stack;
+    errorCause.classList.remove('hidden');
+  } else {
+    errorCause.classList.add('hidden');
+  }
+  // Display the close button, if dismissible
+  if (dismissable) {
+    errorNotDismissible.classList.add('hidden');
+    errorClose.classList.remove("hidden");
+  } else {
+    errorNotDismissible.classList.remove('hidden');
+    errorClose.classList.add("hidden");
+  }
+
+  // Show the dialog
+  errorDialog.classList.remove("hidden");
+}
+
+export function reportCaughtError({error, cause, componentStack}) {
+  reportError({ title: "Caught Error", error, componentStack,  dismissable: true});
+}
+
+export function reportUncaughtError({error, cause, componentStack}) {
+  reportError({ title: "Uncaught Error", error, componentStack, dismissable: false });
+}
+
+export function reportRecoverableError({error, cause, componentStack}) {
+  reportError({ title: "Recoverable Error", error, componentStack,  dismissable: true });
+}
+```
+
+```js src/index.js active
+import { createRoot } from "react-dom/client";
+import App from "./App.js";
+import {reportRecoverableError} from "./reportError";
+import "./styles.css";
+
+const container = document.getElementById("root");
+const root = createRoot(container, {
+  onRecoverableError: (error, errorInfo) => {
+    reportRecoverableError({
+      error,
+      cause: error.cause,
+      componentStack: errorInfo.componentStack,
+    });
+  }
+});
+root.render(<App />);
+```
+
+```js src/App.js
+import { useState } from 'react';
+import { ErrorBoundary } from "react-error-boundary";
+
+// 🚩 Bug: Never do this. This will force an error.
+let errorThrown = false;
+export default function App() {
+  return (
+    <>
+      <ErrorBoundary
+        fallbackRender={fallbackRender}
+      >
+        {!errorThrown && <Throw />}
+        <p>This component threw an error, but recovered during a second render.</p>
+        <p>Since it recovered, no Error Boundary was shown, but <code>onRecoverableError</code> was used to show an error dialog.</p>
+      </ErrorBoundary>
+      
+    </>
+  );
+}
+
+function fallbackRender() {
+  return (
+    <div role="alert">
+      <h3>Error Boundary</h3>
+      <p>Something went wrong.</p>
+    </div>
+  );
+}
+
+function Throw({error}) {
+  // Simulate an external value changing during concurrent render.
+  errorThrown = true;
+  foo.bar = 'baz';
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "19.0.0-rc-3edc000d-20240926",
+    "react-dom": "19.0.0-rc-3edc000d-20240926",
+    "react-scripts": "^5.0.0",
+    "react-error-boundary": "4.0.3"
+  },
+  "main": "/index.js"
+}
+```
+
+</Sandpack>
+
+
 ---
 ## Troubleshooting {/*troubleshooting*/}
 
@@ -361,6 +1131,28 @@ Until you do that, nothing is displayed.
 
 ---
 
+### I'm getting an error: "You passed a second argument to root.render" {/*im-getting-an-error-you-passed-a-second-argument-to-root-render*/}
+
+A common mistake is to pass the options for `createRoot` to `root.render(...)`:
+
+<ConsoleBlock level="error">
+
+Warning: You passed a second argument to root.render(...) but it only accepts one argument.
+
+</ConsoleBlock>
+
+To fix, pass the root options to `createRoot(...)`, not `root.render(...)`:
+```js {2,5}
+// 🚩 Wrong: root.render only takes one argument.
+root.render(App, {onUncaughtError});
+
+// ✅ Correct: pass options to createRoot.
+const root = createRoot(container, {onUncaughtError}); 
+root.render(<App />);
+```
+
+---
+
 ### I'm getting an error: "Target container is not a DOM element" {/*im-getting-an-error-target-container-is-not-a-dom-element*/}
 
 This error means that whatever you're passing to `createRoot` is not a DOM node.
diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md
index cf77a81ac..c54b6fe11 100644
--- a/src/content/reference/react-dom/client/hydrateRoot.md
+++ b/src/content/reference/react-dom/client/hydrateRoot.md
@@ -41,7 +41,9 @@ React will attach to the HTML that exists inside the `domNode`, and take over ma
 
 * **optional** `options`: An object with options for this React root.
 
-  * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors.
+  * **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`.
+  * **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown and an `errorInfo` object containing the `componentStack`.
+  * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with the `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`.
   * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as used on the server.
 
 
@@ -143,7 +145,7 @@ To hydrate your app, React will "attach" your components' logic to the initial g
 <div id="root"><h1>Hello, world!</h1><button>You clicked me <!-- -->0<!-- --> times</button></div>
 ```
 
-```js index.js active
+```js src/index.js active
 import './styles.css';
 import { hydrateRoot } from 'react-dom/client';
 import App from './App.js';
@@ -154,7 +156,7 @@ hydrateRoot(
 );
 ```
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 
 export default function App() {
@@ -248,7 +250,7 @@ To silence hydration warnings on an element, add `suppressHydrationWarning={true
 <div id="root"><h1>Current Date: <!-- -->01/01/2020</h1></div>
 ```
 
-```js index.js
+```js src/index.js
 import './styles.css';
 import { hydrateRoot } from 'react-dom/client';
 import App from './App.js';
@@ -256,7 +258,7 @@ import App from './App.js';
 hydrateRoot(document.getElementById('root'), <App />);
 ```
 
-```js App.js active
+```js src/App.js active
 export default function App() {
   return (
     <h1 suppressHydrationWarning={true}>
@@ -286,7 +288,7 @@ If you intentionally need to render something different on the server and the cl
 <div id="root"><h1>Is Server</h1></div>
 ```
 
-```js index.js
+```js src/index.js
 import './styles.css';
 import { hydrateRoot } from 'react-dom/client';
 import App from './App.js';
@@ -294,7 +296,7 @@ import App from './App.js';
 hydrateRoot(document.getElementById('root'), <App />);
 ```
 
-```js App.js active
+```js src/App.js active
 import { useState, useEffect } from "react";
 
 export default function App() {
@@ -340,7 +342,7 @@ If you call `root.render` at some point after hydration, and the component tree
 <div id="root"><h1>Hello, world! <!-- -->0</h1><input placeholder="Type something here"/></div>
 ```
 
-```js index.js active
+```js src/index.js active
 import { hydrateRoot } from 'react-dom/client';
 import './styles.css';
 import App from './App.js';
@@ -357,7 +359,7 @@ setInterval(() => {
 }, 1000);
 ```
 
-```js App.js
+```js src/App.js
 export default function App({counter}) {
   return (
     <>
@@ -371,3 +373,803 @@ export default function App({counter}) {
 </Sandpack>
 
 It is uncommon to call [`root.render`](#root-render) on a hydrated root. Usually, you'll [update state](/reference/react/useState) inside one of the components instead.
+
+### Show a dialog for uncaught errors {/*show-a-dialog-for-uncaught-errors*/}
+
+By default, React will log all uncaught errors to the console. To implement your own error reporting, you can provide the optional `onUncaughtError` root option:
+
+```js [[1, 7, "onUncaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack"]]
+import { hydrateRoot } from 'react-dom/client';
+
+const root = hydrateRoot(
+  document.getElementById('root'),
+  <App />,
+  {
+    onUncaughtError: (error, errorInfo) => {
+      console.error(
+        'Uncaught error',
+        error,
+        errorInfo.componentStack
+      );
+    }
+  }
+);
+root.render(<App />);
+```
+
+The <CodeStep step={1}>onUncaughtError</CodeStep> option is a function called with two arguments:
+
+1. The <CodeStep step={2}>error</CodeStep> that was thrown.
+2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the <CodeStep step={4}>componentStack</CodeStep> of the error.
+
+You can use the `onUncaughtError` root option to display error dialogs:
+
+<Sandpack>
+
+```html index.html hidden
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My app</title>
+</head>
+<body>
+<!--
+  Error dialog in raw HTML
+  since an error in the React app may crash.
+-->
+<div id="error-dialog" class="hidden">
+  <h1 id="error-title" class="text-red"></h1>
+  <h3>
+    <pre id="error-message"></pre>
+  </h3>
+  <p>
+    <pre id="error-body"></pre>
+  </p>
+  <h4 class="-mb-20">This error occurred at:</h4>
+  <pre id="error-component-stack" class="nowrap"></pre>
+  <h4 class="mb-0">Call stack:</h4>
+  <pre id="error-stack" class="nowrap"></pre>
+  <div id="error-cause">
+    <h4 class="mb-0">Caused by:</h4>
+    <pre id="error-cause-message"></pre>
+    <pre id="error-cause-stack" class="nowrap"></pre>
+  </div>
+  <button
+    id="error-close"
+    class="mb-10"
+    onclick="document.getElementById('error-dialog').classList.add('hidden')"
+  >
+    Close
+  </button>
+  <h3 id="error-not-dismissible">This error is not dismissible.</h3>
+</div>
+<!--
+  HTML content inside <div id="root">...</div>
+  was generated from App by react-dom/server.
+-->
+<div id="root"><div><span>This error shows the error dialog:</span><button>Throw error</button></div></div>
+</body>
+</html>
+```
+
+```css src/styles.css active
+label, button { display: block; margin-bottom: 20px; }
+html, body { min-height: 300px; }
+
+#error-dialog {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: white;
+  padding: 15px;
+  opacity: 0.9;
+  text-wrap: wrap;
+  overflow: scroll;
+}
+
+.text-red {
+  color: red;
+}
+
+.-mb-20 {
+  margin-bottom: -20px;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+pre {
+  text-wrap: wrap;
+}
+
+pre.nowrap {
+  text-wrap: nowrap;
+}
+
+.hidden {
+ display: none;  
+}
+```
+
+```js src/reportError.js hidden
+function reportError({ title, error, componentStack, dismissable }) {
+  const errorDialog = document.getElementById("error-dialog");
+  const errorTitle = document.getElementById("error-title");
+  const errorMessage = document.getElementById("error-message");
+  const errorBody = document.getElementById("error-body");
+  const errorComponentStack = document.getElementById("error-component-stack");
+  const errorStack = document.getElementById("error-stack");
+  const errorClose = document.getElementById("error-close");
+  const errorCause = document.getElementById("error-cause");
+  const errorCauseMessage = document.getElementById("error-cause-message");
+  const errorCauseStack = document.getElementById("error-cause-stack");
+  const errorNotDismissible = document.getElementById("error-not-dismissible");
+  
+  // Set the title
+  errorTitle.innerText = title;
+  
+  // Display error message and body
+  const [heading, body] = error.message.split(/\n(.*)/s);
+  errorMessage.innerText = heading;
+  if (body) {
+    errorBody.innerText = body;
+  } else {
+    errorBody.innerText = '';
+  }
+
+  // Display component stack
+  errorComponentStack.innerText = componentStack;
+
+  // Display the call stack
+  // Since we already displayed the message, strip it, and the first Error: line.
+  errorStack.innerText = error.stack.replace(error.message, '').split(/\n(.*)/s)[1];
+  
+  // Display the cause, if available
+  if (error.cause) {
+    errorCauseMessage.innerText = error.cause.message;
+    errorCauseStack.innerText = error.cause.stack;
+    errorCause.classList.remove('hidden');
+  } else {
+    errorCause.classList.add('hidden');
+  }
+  // Display the close button, if dismissible
+  if (dismissable) {
+    errorNotDismissible.classList.add('hidden');
+    errorClose.classList.remove("hidden");
+  } else {
+    errorNotDismissible.classList.remove('hidden');
+    errorClose.classList.add("hidden");
+  }
+  
+  // Show the dialog
+  errorDialog.classList.remove("hidden");
+}
+
+export function reportCaughtError({error, cause, componentStack}) {
+  reportError({ title: "Caught Error", error, componentStack,  dismissable: true});
+}
+
+export function reportUncaughtError({error, cause, componentStack}) {
+  reportError({ title: "Uncaught Error", error, componentStack, dismissable: false });
+}
+
+export function reportRecoverableError({error, cause, componentStack}) {
+  reportError({ title: "Recoverable Error", error, componentStack,  dismissable: true });
+}
+```
+
+```js src/index.js active
+import { hydrateRoot } from "react-dom/client";
+import App from "./App.js";
+import {reportUncaughtError} from "./reportError";
+import "./styles.css";
+import {renderToString} from 'react-dom/server';
+
+const container = document.getElementById("root");
+const root = hydrateRoot(container, <App />, {
+  onUncaughtError: (error, errorInfo) => {
+    if (error.message !== 'Known error') {
+      reportUncaughtError({
+        error,
+        componentStack: errorInfo.componentStack
+      });
+    }
+  }
+});
+```
+
+```js src/App.js
+import { useState } from 'react';
+
+export default function App() {
+  const [throwError, setThrowError] = useState(false);
+  
+  if (throwError) {
+    foo.bar = 'baz';
+  }
+  
+  return (
+    <div>
+      <span>This error shows the error dialog:</span>
+      <button onClick={() => setThrowError(true)}>
+        Throw error
+      </button>
+    </div>
+  );
+}
+```
+
+</Sandpack>
+
+
+### Displaying Error Boundary errors {/*displaying-error-boundary-errors*/}
+
+By default, React will log all errors caught by an Error Boundary to `console.error`. To override this behavior, you can provide the optional `onCaughtError` root option for errors caught by an [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary):
+
+```js [[1, 7, "onCaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack"]]
+import { hydrateRoot } from 'react-dom/client';
+
+const root = hydrateRoot(
+  document.getElementById('root'),
+  <App />,
+  {
+    onCaughtError: (error, errorInfo) => {
+      console.error(
+        'Caught error',
+        error,
+        errorInfo.componentStack
+      );
+    }
+  }
+);
+root.render(<App />);
+```
+
+The <CodeStep step={1}>onCaughtError</CodeStep> option is a function called with two arguments:
+
+1. The <CodeStep step={2}>error</CodeStep> that was caught by the boundary.
+2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the <CodeStep step={4}>componentStack</CodeStep> of the error.
+
+You can use the `onCaughtError` root option to display error dialogs or filter known errors from logging:
+
+<Sandpack>
+
+```html index.html hidden
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My app</title>
+</head>
+<body>
+<!--
+  Error dialog in raw HTML
+  since an error in the React app may crash.
+-->
+<div id="error-dialog" class="hidden">
+  <h1 id="error-title" class="text-red"></h1>
+  <h3>
+    <pre id="error-message"></pre>
+  </h3>
+  <p>
+    <pre id="error-body"></pre>
+  </p>
+  <h4 class="-mb-20">This error occurred at:</h4>
+  <pre id="error-component-stack" class="nowrap"></pre>
+  <h4 class="mb-0">Call stack:</h4>
+  <pre id="error-stack" class="nowrap"></pre>
+  <div id="error-cause">
+    <h4 class="mb-0">Caused by:</h4>
+    <pre id="error-cause-message"></pre>
+    <pre id="error-cause-stack" class="nowrap"></pre>
+  </div>
+  <button
+    id="error-close"
+    class="mb-10"
+    onclick="document.getElementById('error-dialog').classList.add('hidden')"
+  >
+    Close
+  </button>
+  <h3 id="error-not-dismissible">This error is not dismissible.</h3>
+</div>
+<!--
+  HTML content inside <div id="root">...</div>
+  was generated from App by react-dom/server.
+-->
+<div id="root"><span>This error will not show the error dialog:</span><button>Throw known error</button><span>This error will show the error dialog:</span><button>Throw unknown error</button></div>
+</body>
+</html>
+```
+
+```css src/styles.css active
+label, button { display: block; margin-bottom: 20px; }
+html, body { min-height: 300px; }
+
+#error-dialog {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: white;
+  padding: 15px;
+  opacity: 0.9;
+  text-wrap: wrap;
+  overflow: scroll;
+}
+
+.text-red {
+  color: red;
+}
+
+.-mb-20 {
+  margin-bottom: -20px;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+pre {
+  text-wrap: wrap;
+}
+
+pre.nowrap {
+  text-wrap: nowrap;
+}
+
+.hidden {
+ display: none;  
+}
+```
+
+```js src/reportError.js hidden
+function reportError({ title, error, componentStack, dismissable }) {
+  const errorDialog = document.getElementById("error-dialog");
+  const errorTitle = document.getElementById("error-title");
+  const errorMessage = document.getElementById("error-message");
+  const errorBody = document.getElementById("error-body");
+  const errorComponentStack = document.getElementById("error-component-stack");
+  const errorStack = document.getElementById("error-stack");
+  const errorClose = document.getElementById("error-close");
+  const errorCause = document.getElementById("error-cause");
+  const errorCauseMessage = document.getElementById("error-cause-message");
+  const errorCauseStack = document.getElementById("error-cause-stack");
+  const errorNotDismissible = document.getElementById("error-not-dismissible");
+  
+  // Set the title
+  errorTitle.innerText = title;
+  
+  // Display error message and body
+  const [heading, body] = error.message.split(/\n(.*)/s);
+  errorMessage.innerText = heading;
+  if (body) {
+    errorBody.innerText = body;
+  } else {
+    errorBody.innerText = '';
+  }
+
+  // Display component stack
+  errorComponentStack.innerText = componentStack;
+
+  // Display the call stack
+  // Since we already displayed the message, strip it, and the first Error: line.
+  errorStack.innerText = error.stack.replace(error.message, '').split(/\n(.*)/s)[1];
+  
+  // Display the cause, if available
+  if (error.cause) {
+    errorCauseMessage.innerText = error.cause.message;
+    errorCauseStack.innerText = error.cause.stack;
+    errorCause.classList.remove('hidden');
+  } else {
+    errorCause.classList.add('hidden');
+  }
+  // Display the close button, if dismissible
+  if (dismissable) {
+    errorNotDismissible.classList.add('hidden');
+    errorClose.classList.remove("hidden");
+  } else {
+    errorNotDismissible.classList.remove('hidden');
+    errorClose.classList.add("hidden");
+  }
+  
+  // Show the dialog
+  errorDialog.classList.remove("hidden");
+}
+
+export function reportCaughtError({error, cause, componentStack}) {
+  reportError({ title: "Caught Error", error, componentStack,  dismissable: true});
+}
+
+export function reportUncaughtError({error, cause, componentStack}) {
+  reportError({ title: "Uncaught Error", error, componentStack, dismissable: false });
+}
+
+export function reportRecoverableError({error, cause, componentStack}) {
+  reportError({ title: "Recoverable Error", error, componentStack,  dismissable: true });
+}
+```
+
+```js src/index.js active
+import { hydrateRoot } from "react-dom/client";
+import App from "./App.js";
+import {reportCaughtError} from "./reportError";
+import "./styles.css";
+
+const container = document.getElementById("root");
+const root = hydrateRoot(container, <App />, {
+  onCaughtError: (error, errorInfo) => {
+    if (error.message !== 'Known error') {
+      reportCaughtError({
+        error,
+        componentStack: errorInfo.componentStack
+      });
+    }
+  }
+});
+```
+
+```js src/App.js
+import { useState } from 'react';
+import { ErrorBoundary } from "react-error-boundary";
+
+export default function App() {
+  const [error, setError] = useState(null);
+  
+  function handleUnknown() {
+    setError("unknown");
+  }
+
+  function handleKnown() {
+    setError("known");
+  }
+  
+  return (
+    <>
+      <ErrorBoundary
+        fallbackRender={fallbackRender}
+        onReset={(details) => {
+          setError(null);
+        }}
+      >
+        {error != null && <Throw error={error} />}
+        <span>This error will not show the error dialog:</span>
+        <button onClick={handleKnown}>
+          Throw known error
+        </button>
+        <span>This error will show the error dialog:</span>
+        <button onClick={handleUnknown}>
+          Throw unknown error
+        </button>
+      </ErrorBoundary>
+      
+    </>
+  );
+}
+
+function fallbackRender({ resetErrorBoundary }) {
+  return (
+    <div role="alert">
+      <h3>Error Boundary</h3>
+      <p>Something went wrong.</p>
+      <button onClick={resetErrorBoundary}>Reset</button>
+    </div>
+  );
+}
+
+function Throw({error}) {
+  if (error === "known") {
+    throw new Error('Known error')
+  } else {
+    foo.bar = 'baz';
+  }
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "19.0.0-rc-3edc000d-20240926",
+    "react-dom": "19.0.0-rc-3edc000d-20240926",
+    "react-scripts": "^5.0.0",
+    "react-error-boundary": "4.0.3"
+  },
+  "main": "/index.js"
+}
+```
+
+</Sandpack>
+
+### Show a dialog for recoverable hydration mismatch errors {/*show-a-dialog-for-recoverable-hydration-mismatch-errors*/}
+
+When React encounters a hydration mismatch, it will automatically attempt to recover by rendering on the client. By default, React will log hydration mismatch errors to `console.error`. To override this behavior, you can provide the optional `onRecoverableError` root option:
+
+```js [[1, 7, "onRecoverableError"], [2, 7, "error", 1], [3, 11, "error.cause", 1], [4, 7, "errorInfo"], [5, 12, "componentStack"]]
+import { hydrateRoot } from 'react-dom/client';
+
+const root = hydrateRoot(
+  document.getElementById('root'),
+  <App />,
+  {
+    onRecoverableError: (error, errorInfo) => {
+      console.error(
+        'Caught error',
+        error,
+        error.cause,
+        errorInfo.componentStack
+      );
+    }
+  }
+);
+```
+
+The <CodeStep step={1}>onRecoverableError</CodeStep> option is a function called with two arguments:
+
+1. The <CodeStep step={2}>error</CodeStep> React throws. Some errors may include the original cause as <CodeStep step={3}>error.cause</CodeStep>.
+2. An <CodeStep step={4}>errorInfo</CodeStep> object that contains the <CodeStep step={5}>componentStack</CodeStep> of the error.
+
+You can use the `onRecoverableError` root option to display error dialogs for hydration mismatches:
+
+<Sandpack>
+
+```html index.html hidden
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My app</title>
+</head>
+<body>
+<!--
+  Error dialog in raw HTML
+  since an error in the React app may crash.
+-->
+<div id="error-dialog" class="hidden">
+  <h1 id="error-title" class="text-red"></h1>
+  <h3>
+    <pre id="error-message"></pre>
+  </h3>
+  <p>
+    <pre id="error-body"></pre>
+  </p>
+  <h4 class="-mb-20">This error occurred at:</h4>
+  <pre id="error-component-stack" class="nowrap"></pre>
+  <h4 class="mb-0">Call stack:</h4>
+  <pre id="error-stack" class="nowrap"></pre>
+  <div id="error-cause">
+    <h4 class="mb-0">Caused by:</h4>
+    <pre id="error-cause-message"></pre>
+    <pre id="error-cause-stack" class="nowrap"></pre>
+  </div>
+  <button
+    id="error-close"
+    class="mb-10"
+    onclick="document.getElementById('error-dialog').classList.add('hidden')"
+  >
+    Close
+  </button>
+  <h3 id="error-not-dismissible">This error is not dismissible.</h3>
+</div>
+<!--
+  HTML content inside <div id="root">...</div>
+  was generated from App by react-dom/server.
+-->
+<div id="root"><span>Server</span></div>
+</body>
+</html>
+```
+
+```css src/styles.css active
+label, button { display: block; margin-bottom: 20px; }
+html, body { min-height: 300px; }
+
+#error-dialog {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: white;
+  padding: 15px;
+  opacity: 0.9;
+  text-wrap: wrap;
+  overflow: scroll;
+}
+
+.text-red {
+  color: red;
+}
+
+.-mb-20 {
+  margin-bottom: -20px;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+pre {
+  text-wrap: wrap;
+}
+
+pre.nowrap {
+  text-wrap: nowrap;
+}
+
+.hidden {
+ display: none;  
+}
+```
+
+```js src/reportError.js hidden
+function reportError({ title, error, componentStack, dismissable }) {
+  const errorDialog = document.getElementById("error-dialog");
+  const errorTitle = document.getElementById("error-title");
+  const errorMessage = document.getElementById("error-message");
+  const errorBody = document.getElementById("error-body");
+  const errorComponentStack = document.getElementById("error-component-stack");
+  const errorStack = document.getElementById("error-stack");
+  const errorClose = document.getElementById("error-close");
+  const errorCause = document.getElementById("error-cause");
+  const errorCauseMessage = document.getElementById("error-cause-message");
+  const errorCauseStack = document.getElementById("error-cause-stack");
+  const errorNotDismissible = document.getElementById("error-not-dismissible");
+  
+  // Set the title
+  errorTitle.innerText = title;
+  
+  // Display error message and body
+  const [heading, body] = error.message.split(/\n(.*)/s);
+  errorMessage.innerText = heading;
+  if (body) {
+    errorBody.innerText = body;
+  } else {
+    errorBody.innerText = '';
+  }
+
+  // Display component stack
+  errorComponentStack.innerText = componentStack;
+
+  // Display the call stack
+  // Since we already displayed the message, strip it, and the first Error: line.
+  errorStack.innerText = error.stack.replace(error.message, '').split(/\n(.*)/s)[1];
+  
+  // Display the cause, if available
+  if (error.cause) {
+    errorCauseMessage.innerText = error.cause.message;
+    errorCauseStack.innerText = error.cause.stack;
+    errorCause.classList.remove('hidden');
+  } else {
+    errorCause.classList.add('hidden');
+  }
+  // Display the close button, if dismissible
+  if (dismissable) {
+    errorNotDismissible.classList.add('hidden');
+    errorClose.classList.remove("hidden");
+  } else {
+    errorNotDismissible.classList.remove('hidden');
+    errorClose.classList.add("hidden");
+  }
+  
+  // Show the dialog
+  errorDialog.classList.remove("hidden");
+}
+
+export function reportCaughtError({error, cause, componentStack}) {
+  reportError({ title: "Caught Error", error, componentStack,  dismissable: true});
+}
+
+export function reportUncaughtError({error, cause, componentStack}) {
+  reportError({ title: "Uncaught Error", error, componentStack, dismissable: false });
+}
+
+export function reportRecoverableError({error, cause, componentStack}) {
+  reportError({ title: "Recoverable Error", error, componentStack,  dismissable: true });
+}
+```
+
+```js src/index.js active
+import { hydrateRoot } from "react-dom/client";
+import App from "./App.js";
+import {reportRecoverableError} from "./reportError";
+import "./styles.css";
+
+const container = document.getElementById("root");
+const root = hydrateRoot(container, <App />, {
+  onRecoverableError: (error, errorInfo) => {
+    reportRecoverableError({
+      error,
+      cause: error.cause,
+      componentStack: errorInfo.componentStack
+    });
+  }
+});
+```
+
+```js src/App.js
+import { useState } from 'react';
+import { ErrorBoundary } from "react-error-boundary";
+
+export default function App() {
+  const [error, setError] = useState(null);
+  
+  function handleUnknown() {
+    setError("unknown");
+  }
+
+  function handleKnown() {
+    setError("known");
+  }
+  
+  return (
+    <span>{typeof window !== 'undefined' ? 'Client' : 'Server'}</span>
+  );
+}
+
+function fallbackRender({ resetErrorBoundary }) {
+  return (
+    <div role="alert">
+      <h3>Error Boundary</h3>
+      <p>Something went wrong.</p>
+      <button onClick={resetErrorBoundary}>Reset</button>
+    </div>
+  );
+}
+
+function Throw({error}) {
+  if (error === "known") {
+    throw new Error('Known error')
+  } else {
+    foo.bar = 'baz';
+  }
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "19.0.0-rc-3edc000d-20240926",
+    "react-dom": "19.0.0-rc-3edc000d-20240926",
+    "react-scripts": "^5.0.0",
+    "react-error-boundary": "4.0.3"
+  },
+  "main": "/index.js"
+}
+```
+
+</Sandpack>
+
+## Troubleshooting {/*troubleshooting*/}
+
+
+### I'm getting an error: "You passed a second argument to root.render" {/*im-getting-an-error-you-passed-a-second-argument-to-root-render*/}
+
+A common mistake is to pass the options for `hydrateRoot` to `root.render(...)`:
+
+<ConsoleBlock level="error">
+
+Warning: You passed a second argument to root.render(...) but it only accepts one argument.
+
+</ConsoleBlock>
+
+To fix, pass the root options to `hydrateRoot(...)`, not `root.render(...)`:
+```js {2,5}
+// 🚩 Wrong: root.render only takes one argument.
+root.render(App, {onUncaughtError});
+
+// ✅ Correct: pass options to createRoot.
+const root = hydrateRoot(container, <App />, {onUncaughtError});
+```
diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md
index d3cc4d5b9..9d1533213 100644
--- a/src/content/reference/react-dom/components/common.md
+++ b/src/content/reference/react-dom/components/common.md
@@ -100,11 +100,11 @@ These standard DOM props are also supported for all built-in components:
 * `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)
-* [`onKeyDown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event): A [`KeyboardEvent` handler](#pointerevent-handler) function. Fires when a key is pressed.
+* [`onKeyDown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event): A [`KeyboardEvent` handler](#keyboardevent-handler) function. Fires when a key is pressed.
 * `onKeyDownCapture`: A version of `onKeyDown` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onKeyPress`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event): A [`KeyboardEvent` handler](#pointerevent-handler) function. Deprecated. Use `onKeyDown` or `onBeforeInput` instead.
+* [`onKeyPress`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event): A [`KeyboardEvent` handler](#keyboardevent-handler) function. Deprecated. Use `onKeyDown` or `onBeforeInput` instead.
 * `onKeyPressCapture`: A version of `onKeyPress` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onKeyUp`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event): A [`KeyboardEvent` handler](#pointerevent-handler) function. Fires when a key is released.
+* [`onKeyUp`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event): A [`KeyboardEvent` handler](#keyboardevent-handler) function. Fires when a key is released.
 * `onKeyUpCapture`: A version of `onKeyUp` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
 * [`onLostPointerCapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/lostpointercapture_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when an element stops capturing a pointer.
 * `onLostPointerCaptureCapture`: A version of `onLostPointerCapture` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
@@ -246,22 +246,41 @@ These events fire for resources like [`<audio>`](https://developer.mozilla.org/e
 Instead of a ref object (like the one returned by [`useRef`](/reference/react/useRef#manipulating-the-dom-with-a-ref)), you may pass a function to the `ref` attribute.
 
 ```js
-<div ref={(node) => console.log(node)} />
+<div ref={(node) => {
+  console.log('Attached', node);
+
+  return () => {
+    console.log('Clean up', node)
+  }
+}}>
 ```
 
 [See an example of using the `ref` callback.](/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback)
 
-When the `<div>` DOM node is added to the screen, React will call your `ref` callback with the DOM `node` as the argument. When that `<div>` DOM node is removed, React will call your `ref` callback with `null`.
+When the `<div>` DOM node is added to the screen, React will call your `ref` callback with the DOM `node` as the argument. When that `<div>` DOM node is removed, React will call your the cleanup function returned from the callback.
 
 React will also call your `ref` callback whenever you pass a *different* `ref` callback. In the above example, `(node) => { ... }` is a different function on every render. When your component re-renders, the *previous* function will be called with `null` as the argument, and the *next* function will be called with the DOM node.
 
 #### Parameters {/*ref-callback-parameters*/}
 
-* `node`: A DOM node or `null`. React will pass you the DOM node when the ref gets attached, and `null` when the ref gets detached. Unless you pass the same function reference for the `ref` callback on every render, the callback will get temporarily detached and re-attached during every re-render of the component.
+* `node`: A DOM node. React will pass you the DOM node when the ref gets attached. Unless you pass the same function reference for the `ref` callback on every render, the callback will get temporarily cleanup and re-create during every re-render of the component.
+
+<Note>
+
+#### React 19 added cleanup functions for `ref` callbacks. {/*react-19-added-cleanup-functions-for-ref-callbacks*/}
+
+To support backwards compatibility, if a cleanup function is not returned from the `ref` callback, `node` will be called with `null` when the `ref` is detached. This behavior will be removed in a future version.
+
+</Note>
 
 #### Returns {/*returns*/}
 
-Do not return anything from the `ref` callback.
+* **optional** `cleanup function`: When the `ref` is detached, React will call the cleanup function. If a function is not returned by the `ref` callback, React will call the callback again with `null` as the argument when the `ref` gets detached. This behavior will be removed in a future version.
+
+#### Caveats {/*caveats*/}
+
+* When Strict Mode is on, React will **run one extra development-only setup+cleanup cycle** before the first real setup. This is a stress-test that ensures that your cleanup logic "mirrors" your setup logic and that it stops or undoes whatever the setup is doing. If this causes a problem, implement the cleanup function.
+* When you pass a *different* `ref` callback, React will call the *previous* callback's cleanup function if provided. If no cleanup function is defined, the `ref` callback will be called with `null` as the argument. The *next* function will be called with the DOM node.
 
 ---
 
@@ -694,7 +713,7 @@ An event handler type for the `onWheel` event.
 
 ```js
 <div
-  onScroll={e => console.log('onScroll')}
+  onWheel={e => console.log('onWheel')}
 />
 ```
 
@@ -771,7 +790,7 @@ In the above example, `style={{}}` is not a special syntax, but a regular `{}` o
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import Avatar from './Avatar.js';
 
 const user = {
@@ -785,7 +804,7 @@ export default function App() {
 }
 ```
 
-```js Avatar.js active
+```js src/Avatar.js active
 export default function Avatar({ user }) {
   return (
     <img
@@ -801,7 +820,7 @@ export default function Avatar({ user }) {
 }
 ```
 
-```css styles.css
+```css src/styles.css
 .avatar {
   border-radius: 50%;
 }
@@ -940,7 +959,7 @@ export default function MarkdownEditor() {
 }
 ```
 
-```js MarkdownPreview.js active
+```js src/MarkdownPreview.js active
 import { Remarkable } from 'remarkable';
 
 const md = new Remarkable();
@@ -982,6 +1001,8 @@ textarea { display: block; margin-top: 5px; margin-bottom: 10px; }
 
 </Sandpack>
 
+The `{__html}` object should be created as close to where the HTML is generated as possible, like the above example does in the `renderMarkdownToHTML` function. This ensures that all raw HTML being used in your code is explicitly marked as such, and that only variables that you expect to contain HTML are passed to `dangerouslySetInnerHTML`. It is not recommended to create the object inline like `<div dangerouslySetInnerHTML={{__html: markup}} />`.
+
 To see why rendering arbitrary HTML is dangerous, replace the code above with this:
 
 ```js {1-4,7,8}
diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md
new file mode 100644
index 000000000..047b65aa7
--- /dev/null
+++ b/src/content/reference/react-dom/components/form.md
@@ -0,0 +1,367 @@
+---
+title: "<form>"
+---
+
+<Intro>
+
+The [built-in browser `<form>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) lets you create interactive controls for submitting information.
+
+```js
+<form action={search}>
+    <input name="query" />
+    <button type="submit">Search</button>
+</form>
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `<form>` {/*form*/}
+
+To create interactive controls for submitting information, render the [built-in browser `<form>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form).
+
+```js
+<form action={search}>
+    <input name="query" />
+    <button type="submit">Search</button>
+</form>
+```
+
+[See more examples below.](#usage)
+
+#### Props {/*props*/}
+
+`<form>` supports all [common element props.](/reference/react-dom/components/common#props)
+
+[`action`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action): a URL or function. When a URL is passed to `action` the form will behave like the HTML form component. When a function is passed to `action` the function will handle the form submission. The function passed to `action` may be async and will be called with a single argument containing the [form data](https://developer.mozilla.org/en-US/docs/Web/API/FormData) of the submitted form. The `action` prop can be overridden by a `formAction` attribute on a `<button>`, `<input type="submit">`, or `<input type="image">` component.
+
+#### Caveats {/*caveats*/}
+
+* When a function is passed to `action` or `formAction` the HTTP method will be POST regardless of value of the `method` prop.
+
+---
+
+## Usage {/*usage*/}
+
+### Handle form submission on the client {/*handle-form-submission-on-the-client*/}
+
+Pass a function to the `action` prop of form to run the function when the form is submitted. [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) will be passed to the function as an argument so you can access the data submitted by the form. This differs from the conventional [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action), which only accepts URLs.
+
+<Sandpack>
+
+```js src/App.js
+export default function Search() {
+  function search(formData) {
+    const query = formData.get("query");
+    alert(`You searched for '${query}'`);
+  }
+  return (
+    <form action={search}>
+      <input name="query" />
+      <button type="submit">Search</button>
+    </form>
+  );
+}
+```
+
+</Sandpack>
+
+### Handle form submission with a Server Function {/*handle-form-submission-with-a-server-function*/}
+
+Render a `<form>` with an input and submit button. Pass a Server Function (a function marked with [`'use server'`](/reference/rsc/use-server)) to the `action` prop of form to run the function when the form is submitted.
+
+Passing a Server Function to `<form action>` allow users to submit forms without JavaScript enabled or before the code has loaded. This is beneficial to users who have a slow connection, device, or have JavaScript disabled and is similar to the way forms work when a URL is passed to the `action` prop.
+
+You can use hidden form fields to provide data to the `<form>`'s action. The Server Function will be called with the hidden form field data as an instance of [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
+
+```jsx
+import { updateCart } from './lib.js';
+
+function AddToCart({productId}) {
+  async function addToCart(formData) {
+    'use server'
+    const productId = formData.get('productId')
+    await updateCart(productId)
+  }
+  return (
+    <form action={addToCart}>
+        <input type="hidden" name="productId" value={productId} />
+        <button type="submit">Add to Cart</button>
+    </form>
+
+  );
+}
+```
+
+In lieu of using hidden form fields to provide data to the `<form>`'s action, you can call the <CodeStep step={1}>`bind`</CodeStep> method to supply it with extra arguments. This will bind a new argument (<CodeStep step={2}>`productId`</CodeStep>) to the function in addition to the <CodeStep step={3}>`formData`</CodeStep> that is passed as an argument to the function.
+
+```jsx [[1, 8, "bind"], [2,8, "productId"], [2,4, "productId"], [3,4, "formData"]]
+import { updateCart } from './lib.js';
+
+function AddToCart({productId}) {
+  async function addToCart(productId, formData) {
+    "use server";
+    await updateCart(productId)
+  }
+  const addProductToCart = addToCart.bind(null, productId);
+  return (
+    <form action={addProductToCart}>
+      <button type="submit">Add to Cart</button>
+    </form>
+  );
+}
+```
+
+When `<form>` is rendered by a [Server Component](/reference/rsc/use-client), and a [Server Function](/reference/rsc/server-function) is passed to the `<form>`'s `action` prop, the form is [progressively enhanced](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement).
+
+### Display a pending state during form submission {/*display-a-pending-state-during-form-submission*/}
+To display a pending state when a form is being submitted, you can call the `useFormStatus` Hook in a component rendered in a `<form>` and read the `pending` property returned.
+
+Here, we use the `pending` property to indicate the form is submitting.
+
+<Sandpack>
+
+```js src/App.js
+import { useFormStatus } from "react-dom";
+import { submitForm } from "./actions.js";
+
+function Submit() {
+  const { pending } = useFormStatus();
+  return (
+    <button type="submit" disabled={pending}>
+      {pending ? "Submitting..." : "Submit"}
+    </button>
+  );
+}
+
+function Form({ action }) {
+  return (
+    <form action={action}>
+      <Submit />
+    </form>
+  );
+}
+
+export default function App() {
+  return <Form action={submitForm} />;
+}
+```
+
+```js src/actions.js hidden
+export async function submitForm(query) {
+    await new Promise((res) => setTimeout(res, 1000));
+}
+```
+
+</Sandpack>
+
+To learn more about the `useFormStatus` Hook see the [reference documentation](/reference/react-dom/hooks/useFormStatus).
+
+### Optimistically updating form data {/*optimistically-updating-form-data*/}
+The `useOptimistic` Hook provides a way to optimistically update the user interface before a background operation, like a network request, completes. In the context of forms, this technique helps to make apps feel more responsive. When a user submits a form, instead of waiting for the server's response to reflect the changes, the interface is immediately updated with the expected outcome.
+
+For example, when a user types a message into the form and hits the "Send" button, the `useOptimistic` Hook allows the message to immediately appear in the list with a "Sending..." label, even before the message is actually sent to a server. This "optimistic" approach gives the impression of speed and responsiveness. The form then attempts to truly send the message in the background. Once the server confirms the message has been received, the "Sending..." label is removed.
+
+<Sandpack>
+
+
+```js src/App.js
+import { useOptimistic, useState, useRef } from "react";
+import { deliverMessage } from "./actions.js";
+
+function Thread({ messages, sendMessage }) {
+  const formRef = useRef();
+  async function formAction(formData) {
+    addOptimisticMessage(formData.get("message"));
+    formRef.current.reset();
+    await sendMessage(formData);
+  }
+  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
+    messages,
+    (state, newMessage) => [
+      ...state,
+      {
+        text: newMessage,
+        sending: true
+      }
+    ]
+  );
+
+  return (
+    <>
+      {optimisticMessages.map((message, index) => (
+        <div key={index}>
+          {message.text}
+          {!!message.sending && <small> (Sending...)</small>}
+        </div>
+      ))}
+      <form action={formAction} ref={formRef}>
+        <input type="text" name="message" placeholder="Hello!" />
+        <button type="submit">Send</button>
+      </form>
+    </>
+  );
+}
+
+export default function App() {
+  const [messages, setMessages] = useState([
+    { text: "Hello there!", sending: false, key: 1 }
+  ]);
+  async function sendMessage(formData) {
+    const sentMessage = await deliverMessage(formData.get("message"));
+    setMessages([...messages, { text: sentMessage }]);
+  }
+  return <Thread messages={messages} sendMessage={sendMessage} />;
+}
+```
+
+```js src/actions.js
+export async function deliverMessage(message) {
+  await new Promise((res) => setTimeout(res, 1000));
+  return message;
+}
+```
+
+</Sandpack>
+
+[//]: # 'Uncomment the next line, and delete this line after the `useOptimistic` reference documentatino page is published'
+[//]: # 'To learn more about the `useOptimistic` Hook see the [reference documentation](/reference/react/hooks/useOptimistic).'
+
+### Handling form submission errors {/*handling-form-submission-errors*/}
+
+In some cases the function called by a `<form>`'s `action` prop throws an error. You can handle these errors by wrapping `<form>` in an Error Boundary. If the function called by a `<form>`'s `action` prop throws an error, the fallback for the error boundary will be displayed.
+
+<Sandpack>
+
+```js src/App.js
+import { ErrorBoundary } from "react-error-boundary";
+
+export default function Search() {
+  function search() {
+    throw new Error("search error");
+  }
+  return (
+    <ErrorBoundary
+      fallback={<p>There was an error while submitting the form</p>}
+    >
+      <form action={search}>
+        <input name="query" />
+        <button type="submit">Search</button>
+      </form>
+    </ErrorBoundary>
+  );
+}
+
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "19.0.0-rc-3edc000d-20240926",
+    "react-dom": "19.0.0-rc-3edc000d-20240926",
+    "react-scripts": "^5.0.0",
+    "react-error-boundary": "4.0.3"
+  },
+  "main": "/index.js",
+  "devDependencies": {}
+}
+```
+
+</Sandpack>
+
+### Display a form submission error without JavaScript {/*display-a-form-submission-error-without-javascript*/}
+
+Displaying a form submission error message before the JavaScript bundle loads for progressive enhancement requires that:
+
+1. `<form>` be rendered by a [Server Component](/reference/rsc/use-client)
+1. the function passed to the `<form>`'s `action` prop be a [Server Function](/reference/rsc/server-functions)
+1. the `useActionState` Hook be used to display the error message
+
+`useActionState` takes two parameters: a [Server Function](/reference/rsc/server-functions) and an initial state. `useActionState` returns two values, a state variable and an action. The action returned by `useActionState` should be passed to the `action` prop of the form. The state variable returned by `useActionState` can be used to display an error message. The value returned by the Server Function passed to `useActionState` will be used to update the state variable.
+
+<Sandpack>
+
+```js src/App.js
+import { useActionState } from "react";
+import { signUpNewUser } from "./api";
+
+export default function Page() {
+  async function signup(prevState, formData) {
+    "use server";
+    const email = formData.get("email");
+    try {
+      await signUpNewUser(email);
+      alert(`Added "${email}"`);
+    } catch (err) {
+      return err.toString();
+    }
+  }
+  const [message, signupAction] = useActionState(signup, null);
+  return (
+    <>
+      <h1>Signup for my newsletter</h1>
+      <p>Signup with the same email twice to see an error</p>
+      <form action={signupAction} id="signup-form">
+        <label htmlFor="email">Email: </label>
+        <input name="email" id="email" placeholder="react@example.com" />
+        <button>Sign up</button>
+        {!!message && <p>{message}</p>}
+      </form>
+    </>
+  );
+}
+```
+
+```js src/api.js hidden
+let emails = [];
+
+export async function signUpNewUser(newEmail) {
+  if (emails.includes(newEmail)) {
+    throw new Error("This email address has already been added");
+  }
+  emails.push(newEmail);
+}
+```
+
+</Sandpack>
+
+Learn more about updating state from a form action with the [`useActionState`](/reference/react/useActionState) docs
+
+### Handling multiple submission types {/*handling-multiple-submission-types*/}
+
+Forms can be designed to handle multiple submission actions based on the button pressed by the user. Each button inside a form can be associated with a distinct action or behavior by setting the `formAction` prop.
+
+When a user taps a specific button, the form is submitted, and a corresponding action, defined by that button's attributes and action, is executed. For instance, a form might submit an article for review by default but have a separate button with `formAction` set to save the article as a draft.
+
+<Sandpack>
+
+```js src/App.js
+export default function Search() {
+  function publish(formData) {
+    const content = formData.get("content");
+    const button = formData.get("button");
+    alert(`'${content}' was published with the '${button}' button`);
+  }
+
+  function save(formData) {
+    const content = formData.get("content");
+    alert(`Your draft of '${content}' has been saved!`);
+  }
+
+  return (
+    <form action={publish}>
+      <textarea name="content" rows={4} cols={40} />
+      <br />
+      <button type="submit" name="button" value="submit">Publish</button>
+      <button formAction={save}>Save draft</button>
+    </form>
+  );
+}
+```
+
+</Sandpack>
diff --git a/src/content/reference/react-dom/components/index.md b/src/content/reference/react-dom/components/index.md
index 877ff97fc..ec2e1d2ee 100644
--- a/src/content/reference/react-dom/components/index.md
+++ b/src/content/reference/react-dom/components/index.md
@@ -32,6 +32,20 @@ They are special in React because passing the `value` prop to them makes them *[
 
 ---
 
+## Resource and Metadata Components {/*resource-and-metadata-components*/}
+
+These built-in browser components let you load external resources or annotate the document with metadata:
+
+* [`<link>`](/reference/react-dom/components/link)
+* [`<meta>`](/reference/react-dom/components/meta)
+* [`<script>`](/reference/react-dom/components/script)
+* [`<style>`](/reference/react-dom/components/style)
+* [`<title>`](/reference/react-dom/components/title)
+
+They are special in React because React can render them into the document head, suspend while resources are loading, and enact other behaviors that are described on the reference page for each specific component.
+
+---
+
 ## All HTML components {/*all-html-components*/}
 
 React supports all built-in browser HTML components. This includes:
diff --git a/src/content/reference/react-dom/components/input.md b/src/content/reference/react-dom/components/input.md
index 06010d301..9699ce418 100644
--- a/src/content/reference/react-dom/components/input.md
+++ b/src/content/reference/react-dom/components/input.md
@@ -32,6 +32,8 @@ To display an input, render the [built-in browser `<input>`](https://developer.m
 
 `<input>` supports all [common element props.](/reference/react-dom/components/common#props)
 
+- [`formAction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formaction): A string or function. Overrides the parent `<form action>` for `type="submit"` and `type="image"`. When a URL is passed to `action` the form will behave like a standard HTML form. When a function is passed to `formAction` the function will handle the form submission. See [`<form action>`](/reference/react-dom/components/form#props).
+
 You can [make an input controlled](#controlling-an-input-with-a-state-variable) by passing one of these props:
 
 * [`checked`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#checked): A boolean. For a checkbox input or a radio button, controls whether it is selected.
diff --git a/src/content/reference/react-dom/components/link.md b/src/content/reference/react-dom/components/link.md
new file mode 100644
index 000000000..77da89d47
--- /dev/null
+++ b/src/content/reference/react-dom/components/link.md
@@ -0,0 +1,221 @@
+---
+link: "<link>"
+---
+
+<Intro>
+
+The [built-in browser `<link>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) lets you use external resources such as stylesheets or annotate the document with link metadata.
+
+```js
+<link rel="icon" href="favicon.ico" />
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `<link>` {/*link*/}
+
+To link to external resources such as stylesheets, fonts, and icons, or to annotate the document with link metadata, render the [built-in browser `<link>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link). You can render `<link>` from any component and React will [in most cases](#special-rendering-behavior) place the corresponding DOM element in the document head.
+
+```js
+<link rel="icon" href="favicon.ico" />
+```
+
+[See more examples below.](#usage)
+
+#### Props {/*props*/}
+
+`<link>` supports all [common element props.](/reference/react-dom/components/common#props)
+
+* `rel`: a string, required. Specifies the [relationship to the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). React [treats links with `rel="stylesheet"` differently](#special-rendering-behavior) from other links.
+
+These props apply when `rel="stylesheet"`:
+
+* `precedence`: a string. Tells React where to rank the `<link>` DOM node relative to others in the document `<head>`, which determines which stylesheet can override the other. React will infer that precedence values it discovers first are "lower" and precedence values it discovers later are "higher". Many style systems can work fine using a single precedence value because style rules are atomic. Stylesheets with the same precedence go together whether they are `<link>` or inline `<style>` tags or loaded using [`preinit`](/reference/react-dom/preinit) functions.
+* `media`: a string. Restricts the stylesheet to a certain [media query](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries).
+* `title`: a string. Specifies the name of an [alternative stylesheet](https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets).
+
+These props apply when `rel="stylesheet"` but disable React's [special treatment of stylesheets](#special-rendering-behavior):
+
+* `disabled`: a boolean. Disables the stylesheet.
+* `onError`: a function. Called when the stylesheet fails to load.
+* `onLoad`: a function. Called when the stylesheet finishes being loaded.
+
+These props apply when `rel="preload"` or `rel="modulepreload"`:
+
+* `as`: a string. The type of resource. Its possible values are `audio`, `document`, `embed`, `fetch`, `font`, `image`, `object`, `script`, `style`, `track`, `video`, `worker`.
+* `imageSrcSet`: a string. Applicable only when `as="image"`. Specifies the [source set of the image](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
+* `imageSizes`: a string. Applicable only when `as="image"`. Specifies the [sizes of the image](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
+
+These props apply when `rel="icon"` or `rel="apple-touch-icon"`:
+
+* `sizes`: a string. The [sizes of the icon](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
+
+These props apply in all cases:
+
+* `href`: a string. The URL of the linked resource.
+*  `crossOrigin`: a string. The [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use. Its possible values are `anonymous` and `use-credentials`. It is required when `as` is set to `"fetch"`.
+*  `referrerPolicy`: a string. The [Referrer header](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#referrerpolicy) to send when fetching. Its possible values are `no-referrer-when-downgrade` (the default), `no-referrer`, `origin`, `origin-when-cross-origin`, and `unsafe-url`.
+* `fetchPriority`: a string. Suggests a relative priority for fetching the resource. The possible values are `auto` (the default), `high`, and `low`.
+* `hrefLang`: a string. The language of the linked resource.
+* `integrity`: a string. A cryptographic hash of the resource, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
+* `type`: a string. The MIME type of the linked resource.
+
+Props that are **not recommended** for use with React:
+
+* `blocking`: a string. If set to `"render"`, instructs the browser not to render the page until the stylesheet is loaded. React provides more fine-grained control using Suspense.
+
+#### Special rendering behavior {/*special-rendering-behavior*/}
+
+React will always place the DOM element corresponding to the `<link>` component within the document’s `<head>`, regardless of where in the React tree it is rendered. The `<head>` is the only valid place for `<link>` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render `<link>` components itself.
+
+There are a few exceptions to this:
+
+* If the `<link>` has a `rel="stylesheet"` prop, then it has to also have a `precedence` prop to get this special behavior. This is because the order of stylesheets within the document is significant, so React needs to know how to order this stylesheet relative to others, which you specify using the `precedence` prop. If the `precedence` prop is omitted, there is no special behavior.
+* If the `<link>` has an [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop) prop, there is no special behavior, because in this case it doesn’t apply to the document but instead represents metadata about a specific part of the page.
+* If the `<link>` has an `onLoad` or `onError` prop, because in that case you are managing the loading of the linked resource manually within your React component.
+
+#### Special behavior for stylesheets {/*special-behavior-for-stylesheets*/}
+
+In addition, if the `<link>` is to a stylesheet (namely, it has `rel="stylesheet"` in its props), React treats it specially in the following ways:
+
+* The component that renders `<link>` will [suspend](/reference/react/Suspense) while the stylesheet is loading.
+* If multiple components render links to the same stylesheet, React will de-duplicate them and only put a single link into the DOM. Two links are considered the same if they have the same `href` prop.
+
+There are two exception to this special behavior:
+
+* If the link doesn't have a `precedence` prop, there is no special behavior, because the order of stylesheets within the document is significant, so React needs to know how to order this stylesheet relative to others, which you specify using the `precedence` prop.
+* If you supply any of the `onLoad`, `onError`, or `disabled` props, there is no special behavior, because these props indicate that you are managing the loading of the stylesheet manually within your component.
+
+This special treatment comes with two caveats:
+
+* React will ignore changes to props after the link has been rendered. (React will issue a warning in development if this happens.)
+* React may leave the link in the DOM even after the component that rendered it has been unmounted.
+
+---
+
+## Usage {/*usage*/}
+
+### Linking to related resources {/*linking-to-related-resources*/}
+
+You can annotate the document with links to related resources such as an icon, canonical URL, or pingback. React will place this metadata within the document `<head>` regardless of where in the React tree it is rendered.
+
+<SandpackWithHTMLOutput>
+
+```js src/App.js active
+import ShowRenderedHTML from './ShowRenderedHTML.js';
+
+export default function BlogPage() {
+  return (
+    <ShowRenderedHTML>
+      <link rel="icon" href="favicon.ico" />
+      <link rel="pingback" href="http://www.example.com/xmlrpc.php" />
+      <h1>My Blog</h1>
+      <p>...</p>
+    </ShowRenderedHTML>
+  );
+}
+```
+
+</SandpackWithHTMLOutput>
+
+### Linking to a stylesheet {/*linking-to-a-stylesheet*/}
+
+If a component depends on a certain stylesheet in order to be displayed correctly, you can render a link to that stylesheet within the component. Your component will [suspend](/reference/react/Suspense) while the stylesheet is loading. You must supply the `precedence` prop, which tells React where to place this stylesheet relative to others — stylesheets with higher precedence can override those with lower precedence.
+
+<Note>
+When you want to use a stylesheet, it can be beneficial to call the [preinit](/reference/react-dom/preinit) function. Calling this function may allow the browser to start fetching the stylesheet earlier than if you just render a `<link>` component, for example by sending an [HTTP Early Hints response](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103).
+</Note>
+
+<SandpackWithHTMLOutput>
+
+```js src/App.js active
+import ShowRenderedHTML from './ShowRenderedHTML.js';
+
+export default function SiteMapPage() {
+  return (
+    <ShowRenderedHTML>
+      <link rel="stylesheet" href="sitemap.css" precedence="medium" />
+      <p>...</p>
+    </ShowRenderedHTML>
+  );
+}
+```
+
+</SandpackWithHTMLOutput>
+
+### Controlling stylesheet precedence {/*controlling-stylesheet-precedence*/}
+
+Stylesheets can conflict with each other, and when they do, the browser goes with the one that comes later in the document. React lets you control the order of stylesheets with the `precedence` prop. In this example, two components render stylesheets, and the one with the higher precedence goes later in the document even though the component that renders it comes earlier.
+
+{/*FIXME: this doesn't appear to actually work -- I guess precedence isn't implemented yet?*/}
+
+<SandpackWithHTMLOutput>
+
+```js src/App.js active
+import ShowRenderedHTML from './ShowRenderedHTML.js';
+
+export default function HomePage() {
+  return (
+    <ShowRenderedHTML>
+      <FirstComponent />
+      <SecondComponent />
+      ...
+    </ShowRenderedHTML>
+  );
+}
+
+function FirstComponent() {
+  return <link rel="stylesheet" href="first.css" precedence="high" />;
+}
+
+function SecondComponent() {
+  return <link rel="stylesheet" href="second.css" precedence="low" />;
+}
+
+```
+
+</SandpackWithHTMLOutput>
+
+### Deduplicated stylesheet rendering {/*deduplicated-stylesheet-rendering*/}
+
+If you render the same stylesheet from multiple components, React will place only a single `<link>` in the document head.
+
+<SandpackWithHTMLOutput>
+
+```js src/App.js active
+import ShowRenderedHTML from './ShowRenderedHTML.js';
+
+export default function HomePage() {
+  return (
+    <ShowRenderedHTML>
+      <Component />
+      <Component />
+      ...
+    </ShowRenderedHTML>
+  );
+}
+
+function Component() {
+  return <link rel="stylesheet" href="styles.css" precedence="medium" />;
+}
+```
+
+</SandpackWithHTMLOutput>
+
+### Annotating specific items within the document with links {/*annotating-specific-items-within-the-document-with-links*/}
+
+You can use the `<link>` component with the `itemProp` prop to annotate specific items within the document with links to related resources. In this case, React will *not* place these annotations within the document `<head>` but will place them like any other React component.
+
+```js
+<section itemScope>
+  <h3>Annotating specific items</h3>
+  <link itemProp="author" href="http://example.com/" />
+  <p>...</p>
+</section>
+```
diff --git a/src/content/reference/react-dom/components/meta.md b/src/content/reference/react-dom/components/meta.md
new file mode 100644
index 000000000..2173ce002
--- /dev/null
+++ b/src/content/reference/react-dom/components/meta.md
@@ -0,0 +1,94 @@
+---
+meta: "<meta>"
+---
+
+<Intro>
+
+The [built-in browser `<meta>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta) lets you add metadata to the document.
+
+```js
+<meta name="keywords" content="React, JavaScript, semantic markup, html" />
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `<meta>` {/*meta*/}
+
+To add document metadata, render the [built-in browser `<meta>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta). You can render `<meta>` from any component and React will always place the corresponding DOM element in the document head.
+
+```js
+<meta name="keywords" content="React, JavaScript, semantic markup, html" />
+```
+
+[See more examples below.](#usage)
+
+#### Props {/*props*/}
+
+`<meta>` supports all [common element props.](/reference/react-dom/components/common#props)
+
+It should have *exactly one* of the following props: `name`, `httpEquiv`, `charset`, `itemProp`. The `<meta>` component does something different depending on which of these props is specified.
+
+* `name`: a string. Specifies the [kind of metadata](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name) to be attached to the document. 
+* `charset`: a string. Specifies the character set used by the document. The only valid value is `"utf-8"`.
+* `httpEquiv`: a string. Specifies a directive for processing the document.
+* `itemProp`: a string. Specifies metadata about a particular item within the document rather than the document as a whole.
+* `content`: a string. Specifies the metadata to be attached when used with the `name` or `itemProp` props or the behavior of the directive when used with the `httpEquiv` prop.
+
+#### Special rendering behavior {/*special-rendering-behavior*/}
+
+React will always place the DOM element corresponding to the `<meta>` component within the document’s `<head>`, regardless of where in the React tree it is rendered. The `<head>` is the only valid place for `<meta>` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render `<meta>` components itself. 
+
+There is one exception to this: if `<meta>` has an [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop) prop, there is no special behavior, because in this case it doesn’t represent metadata about the document but rather metadata about a specific part of the page. 
+
+---
+
+## Usage {/*usage*/}
+
+### Annotating the document with metadata {/*annotating-the-document-with-metadata*/}
+
+You can annotate the document with metadata such as keywords, a summary, or the author’s name. React will place this metadata within the document `<head>` regardless of where in the React tree it is rendered. 
+
+```html
+<meta name="author" content="John Smith" />
+<meta name="keywords" content="React, JavaScript, semantic markup, html" />
+<meta name="description" content="API reference for the <meta> component in React DOM" />
+```
+
+You can render the `<meta>` component from any component. React will put a `<meta>` DOM node in the document `<head>`.
+
+<SandpackWithHTMLOutput>
+
+```js src/App.js active
+import ShowRenderedHTML from './ShowRenderedHTML.js';
+
+export default function SiteMapPage() {
+  return (
+    <ShowRenderedHTML>
+      <meta name="keywords" content="React" />
+      <meta name="description" content="A site map for the React website" />
+      <h1>Site Map</h1>
+      <p>...</p>
+    </ShowRenderedHTML>
+  );
+}
+```
+
+</SandpackWithHTMLOutput>
+
+### Annotating specific items within the document with metadata {/*annotating-specific-items-within-the-document-with-metadata*/}
+
+You can use the `<meta>` component with the `itemProp` prop to annotate specific items within the document with metadata. In this case, React will *not* place these annotations within the document `<head>` but will place them like any other React component. 
+
+```js
+<section itemScope>
+  <h3>Annotating specific items</h3>
+  <meta itemProp="description" content="API reference for using <meta> with itemProp" />
+  <p>...</p>
+</section>
+```
diff --git a/src/content/reference/react-dom/components/script.md b/src/content/reference/react-dom/components/script.md
new file mode 100644
index 000000000..6bf3d83c7
--- /dev/null
+++ b/src/content/reference/react-dom/components/script.md
@@ -0,0 +1,142 @@
+---
+script: "<script>"
+---
+
+<Intro>
+
+The [built-in browser `<script>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) lets you add a script to your document.
+
+```js
+<script> alert("hi!") </script>
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `<script>` {/*script*/}
+
+To add inline or external scripts to your document, render the [built-in browser `<script>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script). You can render `<script>` from any component and React will [in certain cases](#special-rendering-behavior) place the corresponding DOM element in the document head and de-duplicate identical scripts.
+
+```js
+<script> alert("hi!") </script>
+<script src="script.js" />
+```
+
+[See more examples below.](#usage)
+
+#### Props {/*props*/}
+
+`<script>` supports all [common element props.](/reference/react-dom/components/common#props)
+
+It should have *either* `children` or a `src` prop.
+
+* `children`: a string. The source code of an inline script.
+* `src`: a string. The URL of an external script.
+
+Other supported props:
+
+* `async`: a boolean. Allows the browser to defer execution of the script until the rest of the document has been processed — the preferred behavior for performance.
+*  `crossOrigin`: a string. The [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use. Its possible values are `anonymous` and `use-credentials`.
+* `fetchPriority`: a string. Lets the browser rank scripts in priority when fetching multiple scripts at the same time. Can be `"high"`, `"low"`, or `"auto"` (the default).
+* `integrity`: a string. A cryptographic hash of the script, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
+* `noModule`: a boolean. Disables the script in browsers that support ES modules — allowing for a fallback script for browsers that do not.
+* `nonce`: a string. A cryptographic [nonce to allow the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy.
+* `referrer`: a string. Says [what Referer header to send](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#referrerpolicy) when fetching the script and any resources that the script fetches in turn. 
+* `type`: a string. Says whether the script is a [classic script, ES module, or import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type).
+
+Props that disable React's [special treatment of scripts](#special-rendering-behavior):
+
+* `onError`: a function. Called when the script fails to load.
+* `onLoad`: a function. Called when the script finishes being loaded.
+
+Props that are **not recommended** for use with React:
+
+* `blocking`: a string. If set to `"render"`, instructs the browser not to render the page until the scriptsheet is loaded. React provides more fine-grained control using Suspense.
+* `defer`: a string. Prevents the browser from executing the script until the document is done loading. Not compatible with streaming server-rendered components. Use the `async` prop instead.
+
+#### Special rendering behavior {/*special-rendering-behavior*/}
+
+React can move `<script>` components to the document's `<head>` and de-duplicate identical scripts.
+
+To opt into this behavior, provide the `src` and `async={true}` props. React will de-duplicate scripts if they have the same `src`. The `async` prop must be true to allow scripts to be safely moved.
+
+This special treatment comes with two caveats:
+
+* React will ignore changes to props after the script has been rendered. (React will issue a warning in development if this happens.)
+* React may leave the script in the DOM even after the component that rendered it has been unmounted. (This has no effect as scripts just execute once when they are inserted into the DOM.)
+
+---
+
+## Usage {/*usage*/}
+
+### Rendering an external script {/*rendering-an-external-script*/}
+
+If a component depends on certain scripts in order to be displayed correctly, you can render a `<script>` within the component.
+However, the component might be committed before the script has finished loading.
+You can start depending on the script content once the `load` event is fired e.g. by using the `onLoad` prop.
+
+React will de-duplicate scripts that have the same `src`, inserting only one of them into the DOM even if multiple components render it.
+
+<SandpackWithHTMLOutput>
+
+```js src/App.js active
+import ShowRenderedHTML from './ShowRenderedHTML.js';
+
+function Map({lat, long}) {
+  return (
+    <>
+      <script async src="map-api.js" onLoad={() => console.log('script loaded')} />
+      <div id="map" data-lat={lat} data-long={long} />
+    </>
+  );
+}
+
+export default function Page() {
+  return (
+    <ShowRenderedHTML>
+      <Map />
+    </ShowRenderedHTML>
+  );
+}
+```
+
+</SandpackWithHTMLOutput>
+
+<Note>
+When you want to use a script, it can be beneficial to call the [preinit](/reference/react-dom/preinit) function. Calling this function may allow the browser to start fetching the script earlier than if you just render a `<script>` component, for example by sending an [HTTP Early Hints response](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103).
+</Note>
+
+### Rendering an inline script {/*rendering-an-inline-script*/}
+
+To include an inline script, render the `<script>` component with the script source code as its children. Inline scripts are not de-duplicated or moved to the document `<head>`.
+
+<SandpackWithHTMLOutput>
+
+```js src/App.js active
+import ShowRenderedHTML from './ShowRenderedHTML.js';
+
+function Tracking() {
+  return (
+    <script>
+      ga('send', 'pageview');
+    </script>
+  );
+}
+
+export default function Page() {
+  return (
+    <ShowRenderedHTML>
+      <h1>My Website</h1>
+      <Tracking />
+      <p>Welcome</p>
+    </ShowRenderedHTML>
+  );
+}
+```
+
+</SandpackWithHTMLOutput>
diff --git a/src/content/reference/react-dom/components/select.md b/src/content/reference/react-dom/components/select.md
index 46710908c..0dbdc1537 100644
--- a/src/content/reference/react-dom/components/select.md
+++ b/src/content/reference/react-dom/components/select.md
@@ -52,7 +52,7 @@ These `<select>` props are relevant both for uncontrolled and controlled select
 
 * [`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`.
+* `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/datalist) 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#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)
diff --git a/src/content/reference/react-dom/components/style.md b/src/content/reference/react-dom/components/style.md
new file mode 100644
index 000000000..6e7e730b5
--- /dev/null
+++ b/src/content/reference/react-dom/components/style.md
@@ -0,0 +1,99 @@
+---
+style: "<style>"
+---
+
+<Intro>
+
+The [built-in browser `<style>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) lets you add inline CSS stylesheets to your document.
+
+```js
+<style>{` p { color: red; } `}</style>
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `<style>` {/*style*/}
+
+To add inline styles to your document, render the [built-in browser `<style>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style). You can render `<style>` from any component and React will [in certain cases](#special-rendering-behavior) place the corresponding DOM element in the document head and de-duplicate identical styles.
+
+```js
+<style>{` p { color: red; } `}</style>
+```
+
+[See more examples below.](#usage)
+
+#### Props {/*props*/}
+
+`<style>` supports all [common element props.](/reference/react-dom/components/common#props)
+
+* `children`: a string, required. The contents of the stylesheet.
+* `precedence`: a string. Tells React where to rank the `<style>` DOM node relative to others in the document `<head>`, which determines which stylesheet can override the other. React will infer that precedence values it discovers first are "lower" and precedence values it discovers later are "higher". Many style systems can work fine using a single precedence value because style rules are atomic. Stylesheets with the same precedence go together whether they are `<link>` or inline `<style>` tags or loaded using [`preinit`](/reference/react-dom/preinit) functions.
+* `href`: a string. Allows React to [de-duplicate styles](#special-rendering-behavior) that have the same `href`.
+* `media`: a string. Restricts the stylesheet to a certain [media query](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries).
+* `nonce`: a string. A cryptographic [nonce to allow the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy.
+* `title`: a string. Specifies the name of an [alternative stylesheet](https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets).
+
+Props that are **not recommended** for use with React:
+
+* `blocking`: a string. If set to `"render"`, instructs the browser not to render the page until the stylesheet is loaded. React provides more fine-grained control using Suspense.
+
+#### Special rendering behavior {/*special-rendering-behavior*/}
+
+React can move `<style>` components to the document's `<head>`, de-duplicate identical stylesheets, and [suspend](/reference/react/Suspense) while the stylesheet is loading.
+
+To opt into this behavior, provide the `href` and `precedence` props. React will de-duplicate styles if they have the same `href`. The precedence prop tells React where to rank the `<style>` DOM node relative to others in the document `<head>`, which determines which stylesheet can override the other.
+
+This special treatment comes with two caveats:
+
+* React will ignore changes to props after the style has been rendered. (React will issue a warning in development if this happens.)
+* React may leave the style in the DOM even after the component that rendered it has been unmounted.
+
+---
+
+## Usage {/*usage*/}
+
+### Rendering an inline CSS stylesheet {/*rendering-an-inline-css-stylesheet*/}
+
+If a component depends on certain CSS styles in order to be displayed correctly, you can render an inline stylesheet within the component.
+
+If you supply an `href` and `precedence` prop, your component will suspend while the stylesheet is loading. (Even with inline stylesheets, there may be a loading time due to fonts and images that the stylesheet refers to.) The `href` prop should uniquely identify the stylesheet, because React will de-duplicate stylesheets that have the same `href`.
+
+<SandpackWithHTMLOutput>
+
+```js src/App.js active
+import ShowRenderedHTML from './ShowRenderedHTML.js';
+import { useId } from 'react';
+
+function PieChart({data, colors}) {
+  const id = useId();
+  const stylesheet = colors.map((color, index) =>
+    `#${id} .color-${index}: \{ color: "${color}"; \}`
+  ).join();
+  return (
+    <>
+      <style href={"PieChart-" + JSON.stringify(colors)} precedence="medium">
+        {stylesheet}
+      </style>
+      <svg id={id}>
+        …
+      </svg>
+    </>
+  );
+}
+
+export default function App() {
+  return (
+    <ShowRenderedHTML>
+      <PieChart data="..." colors={['red', 'green', 'blue']} />
+    </ShowRenderedHTML>
+  );
+}
+```
+
+</SandpackWithHTMLOutput>
diff --git a/src/content/reference/react-dom/components/textarea.md b/src/content/reference/react-dom/components/textarea.md
index 5c742f293..9bd29fa38 100644
--- a/src/content/reference/react-dom/components/textarea.md
+++ b/src/content/reference/react-dom/components/textarea.md
@@ -55,7 +55,7 @@ These `<textarea>` props are relevant both for uncontrolled and controlled 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)
-* [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. 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.
+* [`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)
@@ -294,7 +294,7 @@ export default function MarkdownEditor() {
 }
 ```
 
-```js MarkdownPreview.js
+```js src/MarkdownPreview.js
 import { Remarkable } from 'remarkable';
 
 const md = new Remarkable();
@@ -330,7 +330,7 @@ textarea { display: block; margin-top: 5px; margin-bottom: 10px; }
 
 <Pitfall>
 
-**If you pass `value` without `onChange`, it will be impossible to type into the text area.** When you control an text area by passing some `value` to it, you *force* it to always have the value you passed. So if you pass a state variable as a `value` but forget to update that state variable synchronously during the `onChange` event handler, React will revert the text area after every keystroke back to the `value` that you specified.
+**If you pass `value` without `onChange`, it will be impossible to type into the text area.** When you control a text area by passing some `value` to it, you *force* it to always have the value you passed. So if you pass a state variable as a `value` but forget to update that state variable synchronously during the `onChange` event handler, React will revert the text area after every keystroke back to the `value` that you specified.
 
 </Pitfall>
 
diff --git a/src/content/reference/react-dom/components/title.md b/src/content/reference/react-dom/components/title.md
new file mode 100644
index 000000000..005939046
--- /dev/null
+++ b/src/content/reference/react-dom/components/title.md
@@ -0,0 +1,90 @@
+---
+title: "<title>"
+---
+
+<Intro>
+
+The [built-in browser `<title>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) lets you specify the title of the document.
+
+```js
+<title>My Blog</title>
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `<title>` {/*title*/}
+
+To specify the title of the document, render the [built-in browser `<title>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title). You can render `<title>` from any component and React will always place the corresponding DOM element in the document head.
+
+```js
+<title>My Blog</title>
+```
+
+[See more examples below.](#usage)
+
+#### Props {/*props*/}
+
+`<title>` supports all [common element props.](/reference/react-dom/components/common#props)
+
+* `children`: `<title>` accepts only text as a child. This text will become the title of the document. You can also pass your own components as long as they only render text.
+
+#### Special rendering behavior {/*special-rendering-behavior*/}
+
+React will always place the DOM element corresponding to the `<title>` component within the document’s `<head>`, regardless of where in the React tree it is rendered. The `<head>` is the only valid place for `<title>` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render its `<title>` itself. 
+
+There are two exception to this:
+* If `<title>` is within an `<svg>` component, then there is no special behavior, because in this context it doesn’t represent the document’s title but rather is an [accessibility annotation for that SVG graphic](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title).
+* If the `<title>` has an [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop) prop, there is no special behavior, because in this case it doesn’t represent the document’s title but rather metadata about a specific part of the page. 
+
+<Pitfall>
+
+Only render a single `<title>` at a time. If more than one component renders a `<title>` tag at the same time, React will place all of those titles in the document head. When this happens, the behavior of browsers and search engines is undefined.
+
+</Pitfall>
+
+---
+
+## Usage {/*usage*/}
+
+### Set the document title {/*set-the-document-title*/}
+
+Render the `<title>` component from any component with text as its children. React will put a `<title>` DOM node in the document `<head>`.
+
+<SandpackWithHTMLOutput>
+
+```js src/App.js active
+import ShowRenderedHTML from './ShowRenderedHTML.js';
+
+export default function ContactUsPage() {
+  return (
+    <ShowRenderedHTML>
+      <title>My Site: Contact Us</title>
+      <h1>Contact Us</h1>
+      <p>Email us at support@example.com</p>
+    </ShowRenderedHTML>
+  );
+}
+```
+
+</SandpackWithHTMLOutput>
+
+### Use variables in the title {/*use-variables-in-the-title*/}
+
+The children of the `<title>` component must be a single string of text. (Or a single number or a single object with a `toString` method.) It might not be obvious, but using JSX curly braces like this:
+
+```js
+<title>Results page {pageNumber}</title> // 🔴 Problem: This is not a single string
+```
+
+... actually causes the `<title>` component to get a two-element array as its children (the string `"Results page"` and the value of `pageNumber`). This will cause an error. Instead, use string interpolation to pass `<title>` a single string:
+
+```js
+<title>{`Results page ${pageNumber}`}</title>
+```
+
diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md
index 006f78a9a..0107c20d3 100644
--- a/src/content/reference/react-dom/createPortal.md
+++ b/src/content/reference/react-dom/createPortal.md
@@ -137,7 +137,7 @@ In this example, the two containers have styles that disrupt the modal dialog, b
 
 <Sandpack>
 
-```js App.js active
+```js src/App.js active
 import NoPortalExample from './NoPortalExample';
 import PortalExample from './PortalExample';
 
@@ -155,7 +155,7 @@ export default function App() {
 }
 ```
 
-```js NoPortalExample.js
+```js src/NoPortalExample.js
 import { useState } from 'react';
 import ModalContent from './ModalContent.js';
 
@@ -174,7 +174,7 @@ export default function NoPortalExample() {
 }
 ```
 
-```js PortalExample.js active
+```js src/PortalExample.js active
 import { useState } from 'react';
 import { createPortal } from 'react-dom';
 import ModalContent from './ModalContent.js';
@@ -195,7 +195,7 @@ export default function PortalExample() {
 }
 ```
 
-```js ModalContent.js
+```js src/ModalContent.js
 export default function ModalContent({ onClose }) {
   return (
     <div className="modal">
@@ -207,7 +207,7 @@ export default function ModalContent({ onClose }) {
 ```
 
 
-```css styles.css
+```css src/styles.css
 .clipping-container {
   position: relative;
   border: 1px solid #aaa;
@@ -269,7 +269,7 @@ Portals can be useful if your React root is only part of a static or server-rend
 </html>
 ```
 
-```js index.js
+```js src/index.js
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App.js';
@@ -283,7 +283,7 @@ root.render(
 );
 ```
 
-```js App.js active
+```js src/App.js active
 import { createPortal } from 'react-dom';
 
 const sidebarContentEl = document.getElementById('sidebar-content');
@@ -398,7 +398,7 @@ Here is a complete example you can play with:
 }
 ```
 
-```js App.js
+```js src/App.js
 import { useRef, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { createMapWidget, addPopupToMapWidget } from './map-widget.js';
@@ -428,7 +428,7 @@ export default function Map() {
 }
 ```
 
-```js map-widget.js
+```js src/map-widget.js
 import 'leaflet/dist/leaflet.css';
 import * as L from 'leaflet';
 
diff --git a/src/content/reference/react-dom/findDOMNode.md b/src/content/reference/react-dom/findDOMNode.md
deleted file mode 100644
index 75c02c73d..000000000
--- a/src/content/reference/react-dom/findDOMNode.md
+++ /dev/null
@@ -1,435 +0,0 @@
----
-title: findDOMNode
----
-
-<Deprecated>
-
-This API will be removed in a future major version of React. [See the alternatives.](#alternatives)
-
-</Deprecated>
-
-<Intro>
-
-`findDOMNode` finds the browser DOM node for a React [class component](/reference/react/Component) instance.
-
-```js
-const domNode = findDOMNode(componentInstance)
-```
-
-</Intro>
-
-<InlineToc />
-
----
-
-## Reference {/*reference*/}
-
-### `findDOMNode(componentInstance)` {/*finddomnode*/}
-
-Call `findDOMNode` to find the browser DOM node for a given React [class component](/reference/react/Component) instance.
-
-```js
-import { findDOMNode } from 'react-dom';
-
-const domNode = findDOMNode(componentInstance);
-```
-
-[See more examples below.](#usage)
-
-#### Parameters {/*parameters*/}
-
-* `componentInstance`: An instance of the [`Component`](/reference/react/Component) subclass. For example, `this` inside a class component.
-
-
-#### Returns {/*returns*/}
-
-`findDOMNode` returns the first closest browser DOM node within the given `componentInstance`. When a component renders to `null`, or renders `false`, `findDOMNode` returns `null`. When a component renders to a string, `findDOMNode` returns a text DOM node containing that value.
-
-#### Caveats {/*caveats*/}
-
-* A component may return an array or a [Fragment](/reference/react/Fragment) with multiple children. In that case `findDOMNode`, will return the DOM node corresponding to the first non-empty child.
-
-* `findDOMNode` only works on mounted components (that is, components that have been placed in the DOM). If you try to call this on a component that has not been mounted yet (like calling `findDOMNode()` in `render()` on a component that has yet to be created), an exception will be thrown.
-
-* `findDOMNode` only returns the result at the time of your call. If a child component renders a different node later, there is no way for you to be notified of this change.
-
-* `findDOMNode` accepts a class component instance, so it can't be used with function components.
-
----
-
-## Usage {/*usage*/}
-
-### Finding the root DOM node of a class component {/*finding-the-root-dom-node-of-a-class-component*/}
-
-Call `findDOMNode` with a [class component](/reference/react/Component) instance (usually, `this`) to find the DOM node it has rendered.
-
-```js {3}
-class AutoselectingInput extends Component {
-  componentDidMount() {
-    const input = findDOMNode(this);
-    input.select()
-  }
-
-  render() {
-    return <input defaultValue="Hello" />
-  }
-}
-```
-
-Here, the `input` variable will be set to the `<input>` DOM element. This lets you do something with it. For example, when clicking "Show example" below mounts the input, [`input.select()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select) selects all text in the input:
-
-<Sandpack>
-
-```js App.js
-import { useState } from 'react';
-import AutoselectingInput from './AutoselectingInput.js';
-
-export default function App() {
-  const [show, setShow] = useState(false);
-  return (
-    <>
-      <button onClick={() => setShow(true)}>
-        Show example
-      </button>
-      <hr />
-      {show && <AutoselectingInput />}
-    </>
-  );
-}
-```
-
-```js AutoselectingInput.js active
-import { Component } from 'react';
-import { findDOMNode } from 'react-dom';
-
-class AutoselectingInput extends Component {
-  componentDidMount() {
-    const input = findDOMNode(this);
-    input.select()
-  }
-
-  render() {
-    return <input defaultValue="Hello" />
-  }
-}
-
-export default AutoselectingInput;
-```
-
-</Sandpack>
-
----
-
-## Alternatives {/*alternatives*/}
-
-### Reading component's own DOM node from a ref {/*reading-components-own-dom-node-from-a-ref*/}
-
-Code using `findDOMNode` is fragile because the connection between the JSX node and the code manipulating the corresponding DOM node is not explicit. For example, try wrapping this `<input />` into a `<div>`:
-
-<Sandpack>
-
-```js App.js
-import { useState } from 'react';
-import AutoselectingInput from './AutoselectingInput.js';
-
-export default function App() {
-  const [show, setShow] = useState(false);
-  return (
-    <>
-      <button onClick={() => setShow(true)}>
-        Show example
-      </button>
-      <hr />
-      {show && <AutoselectingInput />}
-    </>
-  );
-}
-```
-
-```js AutoselectingInput.js active
-import { Component } from 'react';
-import { findDOMNode } from 'react-dom';
-
-class AutoselectingInput extends Component {
-  componentDidMount() {
-    const input = findDOMNode(this);
-    input.select()
-  }
-  render() {
-    return <input defaultValue="Hello" />
-  }
-}
-
-export default AutoselectingInput;
-```
-
-</Sandpack>
-
-This will break the code because now, `findDOMNode(this)` finds the `<div>` DOM node, but the code expects an `<input>` DOM node. To avoid these kinds of problems, use [`createRef`](/reference/react/createRef) to manage a specific DOM node.
-
-In this example, `findDOMNode` is no longer used. Instead, `inputRef = createRef(null)` is defined as an instance field on the class. To read the DOM node from it, you can use `this.inputRef.current`. To attach it to the JSX, you render `<input ref={this.inputRef} />`. This connects the code using the DOM node to its JSX:
-
-<Sandpack>
-
-```js App.js
-import { useState } from 'react';
-import AutoselectingInput from './AutoselectingInput.js';
-
-export default function App() {
-  const [show, setShow] = useState(false);
-  return (
-    <>
-      <button onClick={() => setShow(true)}>
-        Show example
-      </button>
-      <hr />
-      {show && <AutoselectingInput />}
-    </>
-  );
-}
-```
-
-```js AutoselectingInput.js active
-import { createRef, Component } from 'react';
-
-class AutoselectingInput extends Component {
-  inputRef = createRef(null);
-
-  componentDidMount() {
-    const input = this.inputRef.current;
-    input.select()
-  }
-
-  render() {
-    return (
-      <input ref={this.inputRef} defaultValue="Hello" />
-    );
-  }
-}
-
-export default AutoselectingInput;
-```
-
-</Sandpack>
-
-In modern React without class components, the equivalent code would call [`useRef`](/reference/react/useRef) instead:
-
-<Sandpack>
-
-```js App.js
-import { useState } from 'react';
-import AutoselectingInput from './AutoselectingInput.js';
-
-export default function App() {
-  const [show, setShow] = useState(false);
-  return (
-    <>
-      <button onClick={() => setShow(true)}>
-        Show example
-      </button>
-      <hr />
-      {show && <AutoselectingInput />}
-    </>
-  );
-}
-```
-
-```js AutoselectingInput.js active
-import { useRef, useEffect } from 'react';
-
-export default function AutoselectingInput() {
-  const inputRef = useRef(null);
-
-  useEffect(() => {
-    const input = inputRef.current;
-    input.select();
-  }, []);
-
-  return <input ref={inputRef} defaultValue="Hello" />
-}
-```
-
-</Sandpack>
-
-[Read more about manipulating the DOM with refs.](/learn/manipulating-the-dom-with-refs)
-
----
-
-### Reading a child component's DOM node from a forwarded ref {/*reading-a-child-components-dom-node-from-a-forwarded-ref*/}
-
-In this example, `findDOMNode(this)` finds a DOM node that belongs to another component. The `AutoselectingInput` renders `MyInput`, which is your own component that renders a browser `<input>`.
-
-<Sandpack>
-
-```js App.js
-import { useState } from 'react';
-import AutoselectingInput from './AutoselectingInput.js';
-
-export default function App() {
-  const [show, setShow] = useState(false);
-  return (
-    <>
-      <button onClick={() => setShow(true)}>
-        Show example
-      </button>
-      <hr />
-      {show && <AutoselectingInput />}
-    </>
-  );
-}
-```
-
-```js AutoselectingInput.js active
-import { Component } from 'react';
-import { findDOMNode } from 'react-dom';
-import MyInput from './MyInput.js';
-
-class AutoselectingInput extends Component {
-  componentDidMount() {
-    const input = findDOMNode(this);
-    input.select()
-  }
-  render() {
-    return <MyInput />;
-  }
-}
-
-export default AutoselectingInput;
-```
-
-```js MyInput.js
-export default function MyInput() {
-  return <input defaultValue="Hello" />;
-}
-```
-
-</Sandpack>
-
-Notice that calling `findDOMNode(this)` inside `AutoselectingInput` still gives you the DOM `<input>`--even though the JSX for this `<input>` is hidden inside the `MyInput` component. This seems convenient for the above example, but it leads to fragile code. Imagine that you wanted to edit `MyInput` later and add a wrapper `<div>` around it. This would break the code of `AutoselectingInput` (which expects to find an `<input>`).
-
-To replace `findDOMNode` in this example, the two components need to coordinate:
-
-1. `AutoSelectingInput` should declare a ref, like [in the earlier example](#reading-components-own-dom-node-from-a-ref), and pass it to `<MyInput>`.
-2. `MyInput` should be declared with [`forwardRef`](/reference/react/forwardRef) to take that ref and forward it down to the `<input>` node.
-
-This version does that, so it no longer needs `findDOMNode`:
-
-<Sandpack>
-
-```js App.js
-import { useState } from 'react';
-import AutoselectingInput from './AutoselectingInput.js';
-
-export default function App() {
-  const [show, setShow] = useState(false);
-  return (
-    <>
-      <button onClick={() => setShow(true)}>
-        Show example
-      </button>
-      <hr />
-      {show && <AutoselectingInput />}
-    </>
-  );
-}
-```
-
-```js AutoselectingInput.js active
-import { createRef, Component } from 'react';
-import MyInput from './MyInput.js';
-
-class AutoselectingInput extends Component {
-  inputRef = createRef(null);
-
-  componentDidMount() {
-    const input = this.inputRef.current;
-    input.select()
-  }
-
-  render() {
-    return (
-      <MyInput ref={this.inputRef} />
-    );
-  }
-}
-
-export default AutoselectingInput;
-```
-
-```js MyInput.js
-import { forwardRef } from 'react';
-
-const MyInput = forwardRef(function MyInput(props, ref) {
-  return <input ref={ref} defaultValue="Hello" />;
-});
-
-export default MyInput;
-```
-
-</Sandpack>
-
-Here is how this code would look like with function components instead of classes:
-
-<Sandpack>
-
-```js App.js
-import { useState } from 'react';
-import AutoselectingInput from './AutoselectingInput.js';
-
-export default function App() {
-  const [show, setShow] = useState(false);
-  return (
-    <>
-      <button onClick={() => setShow(true)}>
-        Show example
-      </button>
-      <hr />
-      {show && <AutoselectingInput />}
-    </>
-  );
-}
-```
-
-```js AutoselectingInput.js active
-import { useRef, useEffect } from 'react';
-import MyInput from './MyInput.js';
-
-export default function AutoselectingInput() {
-  const inputRef = useRef(null);
-
-  useEffect(() => {
-    const input = inputRef.current;
-    input.select();
-  }, []);
-
-  return <MyInput ref={inputRef} defaultValue="Hello" />
-}
-```
-
-```js MyInput.js
-import { forwardRef } from 'react';
-
-const MyInput = forwardRef(function MyInput(props, ref) {
-  return <input ref={ref} defaultValue="Hello" />;
-});
-
-export default MyInput;
-```
-
-</Sandpack>
-
----
-
-### Adding a wrapper `<div>` element {/*adding-a-wrapper-div-element*/}
-
-Sometimes a component needs to know the position and size of its children. This makes it tempting to find the children with `findDOMNode(this)`, and then use DOM methods like [`getBoundingClientRect`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) for measurements.
-
-There is currently no direct equivalent for this use case, which is why `findDOMNode` is deprecated but is not yet removed completely from React. In the meantime, you can try rendering a wrapper `<div>` node around the content as a workaround, and getting a ref to that node. However, extra wrappers can break styling.
-
-```js
-<div ref={someRef}>
-  {children}
-</div>
-```
-
-This also applies to focusing and scrolling to arbitrary children.
diff --git a/src/content/reference/react-dom/flushSync.md b/src/content/reference/react-dom/flushSync.md
index 253879b4c..e23ef4eac 100644
--- a/src/content/reference/react-dom/flushSync.md
+++ b/src/content/reference/react-dom/flushSync.md
@@ -53,7 +53,7 @@ Most of the time, `flushSync` can be avoided. Use `flushSync` as last resort.
 
 * `flushSync` can significantly hurt performance. Use sparingly.
 * `flushSync` may force pending Suspense boundaries to show their `fallback` state.
-* `flushSync` may run pending effects and synchronously apply any updates they contain before returning.
+* `flushSync` may run pending Effects and synchronously apply any updates they contain before returning.
 * `flushSync` may flush updates outside the callback when necessary to flush the updates inside the callback. For example, if there are pending updates from a click, React may flush those before flushing the updates inside the callback.
 
 ---
@@ -83,20 +83,20 @@ For example, the browser `onbeforeprint` API allows you to change the page immed
 
 <Sandpack>
 
-```js App.js active
+```js src/App.js active
 import { useState, useEffect } from 'react';
 import { flushSync } from 'react-dom';
 
 export default function PrintApp() {
   const [isPrinting, setIsPrinting] = useState(false);
-  
+
   useEffect(() => {
     function handleBeforePrint() {
       flushSync(() => {
         setIsPrinting(true);
       })
     }
-    
+
     function handleAfterPrint() {
       setIsPrinting(false);
     }
@@ -108,7 +108,7 @@ export default function PrintApp() {
       window.removeEventListener('afterprint', handleAfterPrint);
     }
   }, []);
-  
+
   return (
     <>
       <h1>isPrinting: {isPrinting ? 'yes' : 'no'}</h1>
@@ -122,7 +122,7 @@ export default function PrintApp() {
 
 </Sandpack>
 
-Without `flushSync`, when the print dialog will display `isPrinting` as "no". This is because React batches the updates asynchronously and the print dialog is displayed before the state is updated.
+Without `flushSync`, the print dialog will display `isPrinting` as "no". This is because React batches the updates asynchronously and the print dialog is displayed before the state is updated.
 
 <Pitfall>
 
diff --git a/src/content/reference/react-dom/hooks/index.md b/src/content/reference/react-dom/hooks/index.md
new file mode 100644
index 000000000..73eefae75
--- /dev/null
+++ b/src/content/reference/react-dom/hooks/index.md
@@ -0,0 +1,41 @@
+---
+title: "Built-in React DOM Hooks"
+---
+
+<Intro>
+
+The `react-dom` package contains Hooks that are only supported for web applications (which run in the browser DOM environment). These Hooks are not supported in non-browser environments like iOS, Android, or Windows applications. If you are looking for Hooks that are supported in web browsers *and other environments* see [the React Hooks page](/reference/react). This page lists all the Hooks in the `react-dom` package.
+
+</Intro>
+
+---
+
+## Form Hooks {/*form-hooks*/}
+
+*Forms* let you create interactive controls for submitting information.  To manage forms in your components, use one of these Hooks:
+
+* [`useFormStatus`](/reference/react-dom/hooks/useFormStatus) allows you to make updates to the UI based on the status of the a form.
+
+```js
+function Form({ action }) {
+  async function increment(n) {
+    return n + 1;
+  }
+  const [count, incrementFormAction] = useActionState(increment, 0);
+  return (
+    <form action={action}>
+      <button formAction={incrementFormAction}>Count: {count}</button>
+      <Button />
+    </form>
+  );
+}
+
+function Button() {
+  const { pending } = useFormStatus();
+  return (
+    <button disabled={pending} type="submit">
+      Submit
+    </button>
+  );
+}
+```
diff --git a/src/content/reference/react-dom/hooks/useFormStatus.md b/src/content/reference/react-dom/hooks/useFormStatus.md
new file mode 100644
index 000000000..0eb8c5d79
--- /dev/null
+++ b/src/content/reference/react-dom/hooks/useFormStatus.md
@@ -0,0 +1,231 @@
+---
+title: useFormStatus
+canary: true
+---
+
+<Intro>
+
+`useFormStatus` is a Hook that gives you status information of the last form submission.
+
+```js
+const { pending, data, method, action } = useFormStatus();
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `useFormStatus()` {/*use-form-status*/}
+
+The `useFormStatus` Hook provides status information of the last form submission.
+
+```js {5},[[1, 6, "status.pending"]]
+import { useFormStatus } from "react-dom";
+import action from './actions';
+
+function Submit() {
+  const status = useFormStatus();
+  return <button disabled={status.pending}>Submit</button>
+}
+
+export default function App() {
+  return (
+    <form action={action}>
+      <Submit />
+    </form>
+  );
+}
+```
+
+To get status information, the `Submit` component must be rendered within a `<form>`. The Hook returns information like the <CodeStep step={1}>`pending`</CodeStep> property which tells you if the form is actively submitting. 
+
+In the above example, `Submit` uses this information to disable `<button>` presses while the form is submitting.
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+`useFormStatus` does not take any parameters.
+
+#### Returns {/*returns*/}
+
+A `status` object with the following properties:
+
+* `pending`: A boolean. If `true`, this means the parent `<form>` is pending submission. Otherwise, `false`.
+
+* `data`: An object implementing the [`FormData interface`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) that contains the data the parent `<form>` is submitting. If there is no active submission or no parent `<form>`, it will be `null`.
+
+* `method`: A string value of either `'get'` or `'post'`. This represents whether the parent `<form>` is submitting with either a `GET` or `POST` [HTTP method](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods). By default, a `<form>` will use the `GET` method and can be specified by the [`method`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method) property.
+
+[//]: # (Link to `<form>` documentation. "Read more on the `action` prop on `<form>`.")
+* `action`: A reference to the function passed to the `action` prop on the parent `<form>`. If there is no parent `<form>`, the property is `null`. If there is a URI value provided to the `action` prop, or no `action` prop specified, `status.action` will be `null`.
+
+#### Caveats {/*caveats*/}
+
+* The `useFormStatus` Hook must be called from a component that is rendered inside a `<form>`. 
+* `useFormStatus` will only return status information for a parent `<form>`. It will not return status information for any `<form>` rendered in that same component or children components.
+
+---
+
+## Usage {/*usage*/}
+
+### Display a pending state during form submission {/*display-a-pending-state-during-form-submission*/}
+To display a pending state while a form is submitting, you can call the `useFormStatus` Hook in a component rendered in a `<form>` and read the `pending` property returned.
+
+Here, we use the `pending` property to indicate the form is submitting. 
+
+<Sandpack>
+
+```js src/App.js
+import { useFormStatus } from "react-dom";
+import { submitForm } from "./actions.js";
+
+function Submit() {
+  const { pending } = useFormStatus();
+  return (
+    <button type="submit" disabled={pending}>
+      {pending ? "Submitting..." : "Submit"}
+    </button>
+  );
+}
+
+function Form({ action }) {
+  return (
+    <form action={action}>
+      <Submit />
+    </form>
+  );
+}
+
+export default function App() {
+  return <Form action={submitForm} />;
+}
+```
+
+```js src/actions.js hidden
+export async function submitForm(query) {
+    await new Promise((res) => setTimeout(res, 1000));
+}
+```
+</Sandpack>  
+
+<Pitfall>
+
+##### `useFormStatus` will not return status information for a `<form>` rendered in the same component. {/*useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component*/}
+
+The `useFormStatus` Hook only returns status information for a parent `<form>` and not for any `<form>` rendered in the same component calling the Hook, or child components.
+
+```js
+function Form() {
+  // 🚩 `pending` will never be true
+  // useFormStatus does not track the form rendered in this component
+  const { pending } = useFormStatus();
+  return <form action={submit}></form>;
+}
+```
+
+Instead call `useFormStatus` from inside a component that is located inside `<form>`.
+
+```js
+function Submit() {
+  // ✅ `pending` will be derived from the form that wraps the Submit component
+  const { pending } = useFormStatus(); 
+  return <button disabled={pending}>...</button>;
+}
+
+function Form() {
+  // This is the <form> `useFormStatus` tracks
+  return (
+    <form action={submit}>
+      <Submit />
+    </form>
+  );
+}
+```
+
+</Pitfall>
+
+### Read the form data being submitted {/*read-form-data-being-submitted*/}
+
+You can use the `data` property of the status information returned from `useFormStatus` to display what data is being submitted by the user.
+
+Here, we have a form where users can request a username. We can use `useFormStatus` to display a temporary status message confirming what username they have requested.
+
+<Sandpack>
+
+```js src/UsernameForm.js active
+import {useState, useMemo, useRef} from 'react';
+import {useFormStatus} from 'react-dom';
+
+export default function UsernameForm() {
+  const {pending, data} = useFormStatus();
+
+  return (
+    <div>
+      <h3>Request a Username: </h3>
+      <input type="text" name="username" disabled={pending}/>
+      <button type="submit" disabled={pending}>
+        Submit
+      </button>
+      <br />
+      <p>{data ? `Requesting ${data?.get("username")}...`: ''}</p>
+    </div>
+  );
+}
+```
+
+```js src/App.js
+import UsernameForm from './UsernameForm';
+import { submitForm } from "./actions.js";
+import {useRef} from 'react';
+
+export default function App() {
+  const ref = useRef(null);
+  return (
+    <form ref={ref} action={async (formData) => {
+      await submitForm(formData);
+      ref.current.reset();
+    }}>
+      <UsernameForm />
+    </form>
+  );
+}
+```
+
+```js src/actions.js hidden
+export async function submitForm(query) {
+    await new Promise((res) => setTimeout(res, 2000));
+}
+```
+
+```css
+p {
+    height: 14px;
+    padding: 0;
+    margin: 2px 0 0 0 ;
+    font-size: 14px
+}
+
+button {
+    margin-left: 2px;
+}
+
+```
+
+</Sandpack>  
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### `status.pending` is never `true` {/*pending-is-never-true*/}
+
+`useFormStatus` will only return status information for a parent `<form>`. 
+
+If the component that calls `useFormStatus` is not nested in a `<form>`, `status.pending` will always return `false`. Verify `useFormStatus` is called in a component that is a child of a `<form>` element.
+
+`useFormStatus` will not track the status of a `<form>` rendered in the same component. See [Pitfall](#useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component) for more details.
diff --git a/src/content/reference/react-dom/hydrate.md b/src/content/reference/react-dom/hydrate.md
deleted file mode 100644
index 639c7ab25..000000000
--- a/src/content/reference/react-dom/hydrate.md
+++ /dev/null
@@ -1,201 +0,0 @@
----
-title: hydrate
----
-
-<Deprecated>
-
-This API will be removed in a future major version of React.
-
-In React 18, `hydrate` was replaced by [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) Using `hydrate` in React 18 will warn that your app will behave as if it’s running React 17. Learn more [here.](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis)
-
-</Deprecated>
-
-<Intro>
-
-`hydrate` lets you display React components inside a browser DOM node whose HTML content was previously generated by [`react-dom/server`](/reference/react-dom/server) in React 17 and below.
-
-```js
-hydrate(reactNode, domNode, callback?)
-```
-
-</Intro>
-
-<InlineToc />
-
----
-
-## Reference {/*reference*/}
-
-### `hydrate(reactNode, domNode, callback?)` {/*hydrate*/}
-
-Call `hydrate` in React 17 and below to “attach” React to existing HTML that was already rendered by React in a server environment.
-
-```js
-import { hydrate } from 'react-dom';
-
-hydrate(reactNode, domNode);
-```
-
-React will attach to the HTML that exists inside the `domNode`, and take over managing the DOM inside it. An app fully built with React will usually only have one `hydrate` call with its root component.
-
-[See more examples below.](#usage)
-
-#### Parameters {/*parameters*/}
-
-* `reactNode`: The "React node" used to render the existing HTML. This will usually be a piece of JSX like `<App />` which was rendered with a `ReactDOM Server` method such as `renderToString(<App />)` in React 17.
-
-* `domNode`: A [DOM element](https://developer.mozilla.org/en-US/docs/Web/API/Element) that was rendered as the root element on the server.
-
-* **optional**: `callback`: A function. If passed, React will call it after your component is hydrated.
-
-#### Returns {/*returns*/}
-
-`hydrate` returns null.
-
-#### Caveats {/*caveats*/}
-* `hydrate` expects the rendered content to be identical with the server-rendered content. React can patch up differences in text content, but you should treat mismatches as bugs and fix them.
-* In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches. This is important for performance reasons because in most apps, mismatches are rare, and so validating all markup would be prohibitively expensive.
-* You'll likely have only one `hydrate` call in your app. If you use a framework, it might do this call for you.
-* If your app is client-rendered with no HTML rendered already, using `hydrate()` is not supported. Use [render()](/reference/react-dom/render) (for React 17 and below) or [createRoot()](/reference/react-dom/client/createRoot) (for React 18+) instead.
-
----
-
-## Usage {/*usage*/}
-
-Call `hydrate` to attach a <CodeStep step={1}>React component</CodeStep> into a server-rendered <CodeStep step={2}>browser DOM node</CodeStep>.
-
-```js [[1, 3, "<App />"], [2, 3, "document.getElementById('root')"]]
-import { hydrate } from 'react-dom';
-
-hydrate(<App />, document.getElementById('root'));
-```
-
-Using `hydrate()` to render a client-only app (an app without server-rendered HTML) is not supported. Use [`render()`](/reference/react-dom/render) (in React 17 and below) or [`createRoot()`](/reference/react-dom/client/createRoot) (in React 18+) instead.
-
-### Hydrating server-rendered HTML {/*hydrating-server-rendered-html*/}
-
-In React, "hydration" is how React "attaches" to existing HTML that was already rendered by React in a server environment. During hydration, React will attempt to attach event listeners to the existing markup and take over rendering the app on the client.
-
-In apps fully built with React, **you will usually only hydrate one "root", once at startup for your entire app**.
-
-<Sandpack>
-
-```html public/index.html
-<!--
-  HTML content inside <div id="root">...</div>
-  was generated from App by react-dom/server.
--->
-<div id="root"><h1>Hello, world!</h1></div>
-```
-
-```js index.js active
-import './styles.css';
-import { hydrate } from 'react-dom';
-import App from './App.js';
-
-hydrate(<App />, document.getElementById('root'));
-```
-
-```js App.js
-export default function App() {
-  return <h1>Hello, world!</h1>;
-}
-```
-
-</Sandpack>
-
-Usually you shouldn't need to call `hydrate` again or to call it in more places. From this point on, React will be managing the DOM of your application. To update the UI, your components will [use state.](/reference/react/useState)
-
-For more information on hydration, see the docs for [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot)
-
----
-
-### Suppressing unavoidable hydration mismatch errors {/*suppressing-unavoidable-hydration-mismatch-errors*/}
-
-If a single element’s attribute or text content is unavoidably different between the server and the client (for example, a timestamp), you may silence the hydration mismatch warning.
-
-To silence hydration warnings on an element, add `suppressHydrationWarning={true}`:
-
-<Sandpack>
-
-```html public/index.html
-<!--
-  HTML content inside <div id="root">...</div>
-  was generated from App by react-dom/server.
--->
-<div id="root"><h1>Current Date: 01/01/2020</h1></div>
-```
-
-```js index.js
-import './styles.css';
-import { hydrate } from 'react-dom';
-import App from './App.js';
-
-hydrate(<App />, document.getElementById('root'));
-```
-
-```js App.js active
-export default function App() {
-  return (
-    <h1 suppressHydrationWarning={true}>
-      Current Date: {new Date().toLocaleDateString()}
-    </h1>
-  );
-}
-```
-
-</Sandpack>
-
-This only works one level deep, and is intended to be an escape hatch. Don’t overuse it. Unless it’s text content, React still won’t attempt to patch it up, so it may remain inconsistent until future updates.
-
----
-
-### Handling different client and server content {/*handling-different-client-and-server-content*/}
-
-If you intentionally need to render something different on the server and the client, you can do a two-pass rendering. Components that render something different on the client can read a [state variable](/reference/react/useState) like `isClient`, which you can set to `true` in an [effect](/reference/react/useEffect):
-
-<Sandpack>
-
-```html public/index.html
-<!--
-  HTML content inside <div id="root">...</div>
-  was generated from App by react-dom/server.
--->
-<div id="root"><h1>Is Server</h1></div>
-```
-
-```js index.js
-import './styles.css';
-import { hydrate } from 'react-dom';
-import App from './App.js';
-
-hydrate(<App />, document.getElementById('root'));
-```
-
-```js App.js active
-import { useState, useEffect } from "react";
-
-export default function App() {
-  const [isClient, setIsClient] = useState(false);
-
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
-
-  return (
-    <h1>
-      {isClient ? 'Is Client' : 'Is Server'}
-    </h1>
-  );
-}
-```
-
-</Sandpack>
-
-This way the initial render pass will render the same content as the server, avoiding mismatches, but an additional pass will happen synchronously right after hydration.
-
-<Pitfall>
-
-This approach makes hydration slower because your components have to render twice. Be mindful of the user experience on slow connections. The JavaScript code may load significantly later than the initial HTML render, so rendering a different UI immediately after hydration may feel jarring to the user.
-
-</Pitfall>
diff --git a/src/content/reference/react-dom/index.md b/src/content/reference/react-dom/index.md
index fb5fd48b0..b79b16db6 100644
--- a/src/content/reference/react-dom/index.md
+++ b/src/content/reference/react-dom/index.md
@@ -17,6 +17,19 @@ These APIs can be imported from your components. They are rarely used:
 * [`createPortal`](/reference/react-dom/createPortal) lets you render child components in a different part of the DOM tree.
 * [`flushSync`](/reference/react-dom/flushSync) lets you force React to flush a state update and update the DOM synchronously.
 
+## Resource Preloading APIs {/*resource-preloading-apis*/}
+
+These APIs can be used to make apps faster by pre-loading resources such as scripts, stylesheets, and fonts as soon as you know you need them, for example before navigating to another page where the resources will be used.
+
+[React-based frameworks](/learn/start-a-new-react-project) frequently handle resource loading for you, so you might not have to call these APIs yourself. Consult your framework's documentation for details.
+
+* [`prefetchDNS`](/reference/react-dom/prefetchDNS) lets you prefetch the IP address of a DNS domain name that you expect to connect to.
+* [`preconnect`](/reference/react-dom/preconnect) lets you connect to a server you expect to request resources from, even if you don't know what resources you'll need yet.
+* [`preload`](/reference/react-dom/preload) lets you fetch a stylesheet, font, image, or external script that you expect to use.
+* [`preloadModule`](/reference/react-dom/preloadModule) lets you fetch an ESM module that you expect to use.
+* [`preinit`](/reference/react-dom/preinit) lets you fetch and evaluate an external script or fetch and insert a stylesheet.
+* [`preinitModule`](/reference/react-dom/preinitModule) lets you fetch and evaluate an ESM module.
+
 ---
 
 ## Entry points {/*entry-points*/}
@@ -28,16 +41,13 @@ The `react-dom` package provides two additional entry points:
 
 ---
 
-## Deprecated APIs {/*deprecated-apis*/}
-
-<Deprecated>
-
-These APIs will be removed in a future major version of React.
-
-</Deprecated>
+## Removed APIs {/*removed-apis*/}
 
-* [`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).
+These APIs were removed in React 19:
 
+* [`findDOMNode`](https://18.react.dev/reference/react-dom/findDOMNode): see [alternatives](https://18.react.dev/reference/react-dom/findDOMNode#alternatives).
+* [`hydrate`](https://18.react.dev/reference/react-dom/hydrate): use [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) instead.
+* [`render`](https://18.react.dev/reference/react-dom/render): use [`createRoot`](/reference/react-dom/client/createRoot) instead.
+* [`unmountComponentAtNode`](/reference/react-dom/unmountComponentAtNode): use [`root.unmount()`](/reference/react-dom/client/createRoot#root-unmount) instead.
+* [`renderToNodeStream`](https://18.react.dev/reference/react-dom/server/renderToNodeStream): use [`react-dom/server`](/reference/react-dom/server) APIs instead.
+* [`renderToStaticNodeStream`](https://18.react.dev/reference/react-dom/server/renderToStaticNodeStream): use [`react-dom/server`](/reference/react-dom/server) APIs instead.
diff --git a/src/content/reference/react-dom/preconnect.md b/src/content/reference/react-dom/preconnect.md
new file mode 100644
index 000000000..047b1fcac
--- /dev/null
+++ b/src/content/reference/react-dom/preconnect.md
@@ -0,0 +1,89 @@
+---
+title: preconnect
+---
+
+<Intro>
+
+`preconnect` lets you eagerly connect to a server that you expect to load resources from.
+
+```js
+preconnect("https://example.com");
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `preconnect(href)` {/*preconnect*/}
+
+To preconnect to a host, call the `preconnect` function from `react-dom`.
+
+```js
+import { preconnect } from 'react-dom';
+
+function AppRoot() {
+  preconnect("https://example.com");
+  // ...
+}
+
+```
+
+[See more examples below.](#usage)
+
+The `preconnect` function provides the browser with a hint that it should open a connection to the given server. If the browser chooses to do so, this can speed up the loading of resources from that server. 
+
+#### Parameters {/*parameters*/}
+
+* `href`: a string. The URL of the server you want to connect to.
+
+
+#### Returns {/*returns*/}
+
+`preconnect` returns nothing.
+
+#### Caveats {/*caveats*/}
+
+* Multiple calls to `preconnect` with the same server have the same effect as a single call.
+* In the browser, you can call `preconnect` in any situation: while rendering a component, in an Effect, in an event handler, and so on.
+* In server-side rendering or when rendering Server Components, `preconnect` only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.
+* If you know the specific resources you'll need, you can call [other functions](/reference/react-dom/#resource-preloading-apis) instead that will start loading the resources right away.
+* There is no benefit to preconnecting to the same server the webpage itself is hosted from because it's already been connected to by the time the hint would be given.
+
+---
+
+## Usage {/*usage*/}
+
+### Preconnecting when rendering {/*preconnecting-when-rendering*/}
+
+Call `preconnect` when rendering a component if you know that its children will load external resources from that host.
+
+```js
+import { preconnect } from 'react-dom';
+
+function AppRoot() {
+  preconnect("https://example.com");
+  return ...;
+}
+```
+
+### Preconnecting in an event handler {/*preconnecting-in-an-event-handler*/}
+
+Call `preconnect` in an event handler before transitioning to a page or state where external resources will be needed. This gets the process started earlier than if you call it during the rendering of the new page or state.
+
+```js
+import { preconnect } from 'react-dom';
+
+function CallToAction() {
+  const onClick = () => {
+    preconnect('http://example.com');
+    startWizard();
+  }
+  return (
+    <button onClick={onClick}>Start Wizard</button>
+  );
+}
+```
diff --git a/src/content/reference/react-dom/prefetchDNS.md b/src/content/reference/react-dom/prefetchDNS.md
new file mode 100644
index 000000000..ef11aa3e5
--- /dev/null
+++ b/src/content/reference/react-dom/prefetchDNS.md
@@ -0,0 +1,89 @@
+---
+title: prefetchDNS
+---
+
+<Intro>
+
+`prefetchDNS` lets you eagerly look up the IP of a server that you expect to load resources from.
+
+```js
+prefetchDNS("https://example.com");
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `prefetchDNS(href)` {/*prefetchdns*/}
+
+To look up a host, call the `prefetchDNS` function from `react-dom`.
+
+```js
+import { prefetchDNS } from 'react-dom';
+
+function AppRoot() {
+  prefetchDNS("https://example.com");
+  // ...
+}
+
+```
+
+[See more examples below.](#usage)
+
+The prefetchDNS function provides the browser with a hint that it should look up the IP address of a given server. If the browser chooses to do so, this can speed up the loading of resources from that server. 
+
+#### Parameters {/*parameters*/}
+
+* `href`: a string. The URL of the server you want to connect to.
+
+#### Returns {/*returns*/}
+
+`prefetchDNS` returns nothing.
+
+#### Caveats {/*caveats*/}
+
+* Multiple calls to `prefetchDNS` with the same server have the same effect as a single call.
+* In the browser, you can call `prefetchDNS` in any situation: while rendering a component, in an Effect, in an event handler, and so on.
+* In server-side rendering or when rendering Server Components, `prefetchDNS` only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.
+* If you know the specific resources you'll need, you can call [other functions](/reference/react-dom/#resource-preloading-apis) instead that will start loading the resources right away.
+* There is no benefit to prefetching the same server the webpage itself is hosted from because it's already been looked up by the time the hint would be given.
+* Compared with [`preconnect`](/reference/react-dom/preconnect), `prefetchDNS` may be better if you are speculatively connecting to a large number of domains, in which case the overhead of preconnections might outweigh the benefit.
+
+---
+
+## Usage {/*usage*/}
+
+### Prefetching DNS when rendering {/*prefetching-dns-when-rendering*/}
+
+Call `prefetchDNS` when rendering a component if you know that its children will load external resources from that host.
+
+```js
+import { prefetchDNS } from 'react-dom';
+
+function AppRoot() {
+  prefetchDNS("https://example.com");
+  return ...;
+}
+```
+
+### Prefetching DNS in an event handler {/*prefetching-dns-in-an-event-handler*/}
+
+Call `prefetchDNS` in an event handler before transitioning to a page or state where external resources will be needed. This gets the process started earlier than if you call it during the rendering of the new page or state.
+
+```js
+import { prefetchDNS } from 'react-dom';
+
+function CallToAction() {
+  const onClick = () => {
+    prefetchDNS('http://example.com');
+    startWizard();
+  }
+  return (
+    <button onClick={onClick}>Start Wizard</button>
+  );
+}
+```
diff --git a/src/content/reference/react-dom/preinit.md b/src/content/reference/react-dom/preinit.md
new file mode 100644
index 000000000..0ecd1972d
--- /dev/null
+++ b/src/content/reference/react-dom/preinit.md
@@ -0,0 +1,126 @@
+---
+title: preinit
+---
+
+<Note>
+
+[React-based frameworks](/learn/start-a-new-react-project) frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework's documentation for details.
+
+</Note>
+
+<Intro>
+
+`preinit` lets you eagerly fetch and evaluate a stylesheet or external script.
+
+```js
+preinit("https://example.com/script.js", {as: "script"});
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `preinit(href, options)` {/*preinit*/}
+
+To preinit a script or stylesheet, call the `preinit` function from `react-dom`.
+
+```js
+import { preinit } from 'react-dom';
+
+function AppRoot() {
+  preinit("https://example.com/script.js", {as: "script"});
+  // ...
+}
+
+```
+
+[See more examples below.](#usage)
+
+The `preinit` function provides the browser with a hint that it should start downloading and executing the given resource, which can save time. Scripts that you `preinit` are executed when they finish downloading. Stylesheets that you preinit are inserted into the document, which causes them to go into effect right away.
+
+#### Parameters {/*parameters*/}
+
+* `href`: a string. The URL of the resource you want to download and execute.
+* `options`: an object. It contains the following properties:
+  *  `as`: a required string. The type of resource. Its possible values are `script` and `style`.
+  * `precedence`: a string. Required with stylesheets. Says where to insert the stylesheet relative to others. Stylesheets with higher precedence can override those with lower precedence. The possible values are `reset`, `low`, `medium`, `high`. 
+  *  `crossOrigin`: a string. The [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use. Its possible values are `anonymous` and `use-credentials`. It is required when `as` is set to `"fetch"`.
+  *  `integrity`: a string. A cryptographic hash of the resource, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
+  *  `nonce`: a string. A cryptographic [nonce to allow the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy. 
+  *  `fetchPriority`: a string. Suggests a relative priority for fetching the resource. The possible values are `auto` (the default), `high`, and `low`.
+
+#### Returns {/*returns*/}
+
+`preinit` returns nothing.
+
+#### Caveats {/*caveats*/}
+
+* Multiple calls to `preinit` with the same `href` have the same effect as a single call.
+* In the browser, you can call `preinit` in any situation: while rendering a component, in an Effect, in an event handler, and so on.
+* In server-side rendering or when rendering Server Components, `preinit` only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.
+
+---
+
+## Usage {/*usage*/}
+
+### Preiniting when rendering {/*preiniting-when-rendering*/}
+
+Call `preinit` when rendering a component if you know that it or its children will use a specific resource, and you're OK with the resource being evaluated and thereby taking effect immediately upon being downloaded.
+
+<Recipes titleText="Examples of preiniting">
+
+#### Preiniting an external script {/*preiniting-an-external-script*/}
+
+```js
+import { preinit } from 'react-dom';
+
+function AppRoot() {
+  preinit("https://example.com/script.js", {as: "script"});
+  return ...;
+}
+```
+
+If you want the browser to download the script but not to execute it right away, use [`preload`](/reference/react-dom/preload) instead. If you want to load an ESM module, use [`preinitModule`](/reference/react-dom/preinitModule).
+
+<Solution />
+
+#### Preiniting a stylesheet {/*preiniting-a-stylesheet*/}
+
+```js
+import { preinit } from 'react-dom';
+
+function AppRoot() {
+  preinit("https://example.com/style.css", {as: "style", precedence: "medium"});
+  return ...;
+}
+```
+
+The `precedence` option, which is required, lets you control the order of stylesheets within the document. Stylesheets with higher precedence can overrule those with lower precedence.
+
+If you want to download the stylesheet but not to insert it into the document right away, use [`preload`](/reference/react-dom/preload) instead.
+
+<Solution />
+
+</Recipes>
+
+### Preiniting in an event handler {/*preiniting-in-an-event-handler*/}
+
+Call `preinit` in an event handler before transitioning to a page or state where external resources will be needed. This gets the process started earlier than if you call it during the rendering of the new page or state.
+
+```js
+import { preinit } from 'react-dom';
+
+function CallToAction() {
+  const onClick = () => {
+    preinit("https://example.com/wizardStyles.css", {as: "style"});
+    startWizard();
+  }
+  return (
+    <button onClick={onClick}>Start Wizard</button>
+  );
+}
+```
diff --git a/src/content/reference/react-dom/preinitModule.md b/src/content/reference/react-dom/preinitModule.md
new file mode 100644
index 000000000..97bb4dbc7
--- /dev/null
+++ b/src/content/reference/react-dom/preinitModule.md
@@ -0,0 +1,99 @@
+---
+title: preinitModule
+---
+
+<Note>
+
+[React-based frameworks](/learn/start-a-new-react-project) frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework's documentation for details.
+
+</Note>
+
+<Intro>
+
+`preinitModule` lets you eagerly fetch and evaluate an ESM module.
+
+```js
+preinitModule("https://example.com/module.js", {as: "script"});
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `preinitModule(href, options)` {/*preinitmodule*/}
+
+To preinit an ESM module, call the `preinitModule` function from `react-dom`.
+
+```js
+import { preinitModule } from 'react-dom';
+
+function AppRoot() {
+  preinitModule("https://example.com/module.js", {as: "script"});
+  // ...
+}
+
+```
+
+[See more examples below.](#usage)
+
+The `preinitModule` function provides the browser with a hint that it should start downloading and executing the given module, which can save time. Modules that you `preinit` are executed when they finish downloading.
+
+#### Parameters {/*parameters*/}
+
+* `href`: a string. The URL of the module you want to download and execute.
+* `options`: an object. It contains the following properties:
+  *  `as`: a required string. It must be `'script'`.
+  *  `crossOrigin`: a string. The [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use. Its possible values are `anonymous` and `use-credentials`.
+  *  `integrity`: a string. A cryptographic hash of the module, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
+  *  `nonce`: a string. A cryptographic [nonce to allow the module](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy. 
+
+#### Returns {/*returns*/}
+
+`preinitModule` returns nothing.
+
+#### Caveats {/*caveats*/}
+
+* Multiple calls to `preinitModule` with the same `href` have the same effect as a single call.
+* In the browser, you can call `preinitModule` in any situation: while rendering a component, in an Effect, in an event handler, and so on.
+* In server-side rendering or when rendering Server Components, `preinitModule` only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.
+
+---
+
+## Usage {/*usage*/}
+
+### Preloading when rendering {/*preloading-when-rendering*/}
+
+Call `preinitModule` when rendering a component if you know that it or its children will use a specific module and you're OK with the module being evaluated and thereby taking effect immediately upon being downloaded.
+
+```js
+import { preinitModule } from 'react-dom';
+
+function AppRoot() {
+  preinitModule("https://example.com/module.js", {as: "script"});
+  return ...;
+}
+```
+
+If you want the browser to download the module but not to execute it right away, use [`preloadModule`](/reference/react-dom/preloadModule) instead. If you want to preinit a script that isn't an ESM module, use [`preinit`](/reference/react-dom/preinit).
+
+### Preloading in an event handler {/*preloading-in-an-event-handler*/}
+
+Call `preinitModule` in an event handler before transitioning to a page or state where the module will be needed. This gets the process started earlier than if you call it during the rendering of the new page or state.
+
+```js
+import { preinitModule } from 'react-dom';
+
+function CallToAction() {
+  const onClick = () => {
+    preinitModule("https://example.com/module.js", {as: "script"});
+    startWizard();
+  }
+  return (
+    <button onClick={onClick}>Start Wizard</button>
+  );
+}
+```
diff --git a/src/content/reference/react-dom/preload.md b/src/content/reference/react-dom/preload.md
new file mode 100644
index 000000000..5dcba10f7
--- /dev/null
+++ b/src/content/reference/react-dom/preload.md
@@ -0,0 +1,164 @@
+---
+title: preload
+---
+
+<Note>
+
+[React-based frameworks](/learn/start-a-new-react-project) frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework's documentation for details.
+
+</Note>
+
+<Intro>
+
+`preload` lets you eagerly fetch a resource such as a stylesheet, font, or external script that you expect to use.
+
+```js
+preload("https://example.com/font.woff2", {as: "font"});
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `preload(href, options)` {/*preload*/}
+
+To preload a resource, call the `preload` function from `react-dom`.
+
+```js
+import { preload } from 'react-dom';
+
+function AppRoot() {
+  preload("https://example.com/font.woff2", {as: "font"});
+  // ...
+}
+
+```
+
+[See more examples below.](#usage)
+
+The `preload` function provides the browser with a hint that it should start downloading the given resource, which can save time.
+
+#### Parameters {/*parameters*/}
+
+* `href`: a string. The URL of the resource you want to download.
+* `options`: an object. It contains the following properties:
+  *  `as`: a required string. The type of resource. Its [possible values](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#as) are `audio`, `document`, `embed`, `fetch`, `font`, `image`, `object`, `script`, `style`, `track`, `video`, `worker`.
+  *  `crossOrigin`: a string. The [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use. Its possible values are `anonymous` and `use-credentials`. It is required when `as` is set to `"fetch"`.
+  *  `referrerPolicy`: a string. The [Referrer header](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#referrerpolicy) to send when fetching. Its possible values are `no-referrer-when-downgrade` (the default), `no-referrer`, `origin`, `origin-when-cross-origin`, and `unsafe-url`.
+  *  `integrity`: a string. A cryptographic hash of the resource, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
+  *  `type`: a string. The MIME type of the resource.
+  *  `nonce`: a string. A cryptographic [nonce to allow the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy. 
+  *  `fetchPriority`: a string. Suggests a relative priority for fetching the resource. The possible values are `auto` (the default), `high`, and `low`.
+  *  `imageSrcSet`: a string. For use only with `as: "image"`. Specifies the [source set of the image](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
+  *  `imageSizes`: a string. For use only with `as: "image"`. Specifies the [sizes of the image](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
+
+#### Returns {/*returns*/}
+
+`preload` returns nothing.
+
+#### Caveats {/*caveats*/}
+
+* Multiple equivalent calls to `preload` have the same effect as a single call. Calls to `preload` are considered equivalent according to the following rules:
+  * Two calls are equivalent if they have the same `href`, except:
+  * If `as` is set to `image`, two calls are equivalent if they have the same `href`, `imageSrcSet`, and `imageSizes`.
+* In the browser, you can call `preload` in any situation: while rendering a component, in an Effect, in an event handler, and so on.
+* In server-side rendering or when rendering Server Components, `preload` only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.
+
+---
+
+## Usage {/*usage*/}
+
+### Preloading when rendering {/*preloading-when-rendering*/}
+
+Call `preload` when rendering a component if you know that it or its children will use a specific resource.
+
+<Recipes titleText="Examples of preloading">
+
+#### Preloading an external script {/*preloading-an-external-script*/}
+
+```js
+import { preload } from 'react-dom';
+
+function AppRoot() {
+  preload("https://example.com/script.js", {as: "script"});
+  return ...;
+}
+```
+
+If you want the browser to start executing the script immediately (rather than just downloading it), use [`preinit`](/reference/react-dom/preinit) instead. If you want to load an ESM module, use [`preloadModule`](/reference/react-dom/preloadModule).
+
+<Solution />
+
+#### Preloading a stylesheet {/*preloading-a-stylesheet*/}
+
+```js
+import { preload } from 'react-dom';
+
+function AppRoot() {
+  preload("https://example.com/style.css", {as: "style"});
+  return ...;
+}
+```
+
+If you want the stylesheet to be inserted into the document immediately (which means the browser will start parsing it immediately rather than just downloading it), use [`preinit`](/reference/react-dom/preinit) instead.
+
+<Solution />
+
+#### Preloading a font {/*preloading-a-font*/}
+
+```js
+import { preload } from 'react-dom';
+
+function AppRoot() {
+  preload("https://example.com/style.css", {as: "style"});
+  preload("https://example.com/font.woff2", {as: "font"});
+  return ...;
+}
+```
+
+If you preload a stylesheet, it's smart to also preload any fonts that the stylesheet refers to. That way, the browser can start downloading the font before it's downloaded and parsed the stylesheet.
+
+<Solution />
+
+#### Preloading an image {/*preloading-an-image*/}
+
+```js
+import { preload } from 'react-dom';
+
+function AppRoot() {
+  preload("/banner.png", {
+    as: "image",
+    imageSrcSet: "/banner512.png 512w, /banner1024.png 1024w",
+    imageSizes: "(max-width: 512px) 512px, 1024px",
+  });
+  return ...;
+}
+```
+
+When preloading an image, the `imageSrcSet` and `imageSizes` options help the browser [fetch the correctly sized image for the size of the screen](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
+
+<Solution />
+
+</Recipes>
+
+### Preloading in an event handler {/*preloading-in-an-event-handler*/}
+
+Call `preload` in an event handler before transitioning to a page or state where external resources will be needed. This gets the process started earlier than if you call it during the rendering of the new page or state.
+
+```js
+import { preload } from 'react-dom';
+
+function CallToAction() {
+  const onClick = () => {
+    preload("https://example.com/wizardStyles.css", {as: "style"});
+    startWizard();
+  }
+  return (
+    <button onClick={onClick}>Start Wizard</button>
+  );
+}
+```
diff --git a/src/content/reference/react-dom/preloadModule.md b/src/content/reference/react-dom/preloadModule.md
new file mode 100644
index 000000000..ebc2fa6d0
--- /dev/null
+++ b/src/content/reference/react-dom/preloadModule.md
@@ -0,0 +1,100 @@
+---
+title: preloadModule
+---
+
+<Note>
+
+[React-based frameworks](/learn/start-a-new-react-project) frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework's documentation for details.
+
+</Note>
+
+<Intro>
+
+`preloadModule` lets you eagerly fetch an ESM module that you expect to use.
+
+```js
+preloadModule("https://example.com/module.js", {as: "script"});
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `preloadModule(href, options)` {/*preloadmodule*/}
+
+To preload an ESM module, call the `preloadModule` function from `react-dom`.
+
+```js
+import { preloadModule } from 'react-dom';
+
+function AppRoot() {
+  preloadModule("https://example.com/module.js", {as: "script"});
+  // ...
+}
+
+```
+
+[See more examples below.](#usage)
+
+The `preloadModule` function provides the browser with a hint that it should start downloading the given module, which can save time.
+
+#### Parameters {/*parameters*/}
+
+* `href`: a string. The URL of the module you want to download.
+* `options`: an object. It contains the following properties:
+  *  `as`: a required string. It must be `'script'`.
+  *  `crossOrigin`: a string. The [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use. Its possible values are `anonymous` and `use-credentials`.
+  *  `integrity`: a string. A cryptographic hash of the module, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
+  *  `nonce`: a string. A cryptographic [nonce to allow the module](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy. 
+
+
+#### Returns {/*returns*/}
+
+`preloadModule` returns nothing.
+
+#### Caveats {/*caveats*/}
+
+* Multiple calls to `preloadModule` with the same `href` have the same effect as a single call.
+* In the browser, you can call `preloadModule` in any situation: while rendering a component, in an Effect, in an event handler, and so on.
+* In server-side rendering or when rendering Server Components, `preloadModule` only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.
+
+---
+
+## Usage {/*usage*/}
+
+### Preloading when rendering {/*preloading-when-rendering*/}
+
+Call `preloadModule` when rendering a component if you know that it or its children will use a specific module.
+
+```js
+import { preloadModule } from 'react-dom';
+
+function AppRoot() {
+  preloadModule("https://example.com/module.js", {as: "script"});
+  return ...;
+}
+```
+
+If you want the browser to start executing the module immediately (rather than just downloading it), use [`preinitModule`](/reference/react-dom/preinitModule) instead. If you want to load a script that isn't an ESM module, use [`preload`](/reference/react-dom/preload).
+
+### Preloading in an event handler {/*preloading-in-an-event-handler*/}
+
+Call `preloadModule` in an event handler before transitioning to a page or state where the module will be needed. This gets the process started earlier than if you call it during the rendering of the new page or state.
+
+```js
+import { preloadModule } from 'react-dom';
+
+function CallToAction() {
+  const onClick = () => {
+    preloadModule("https://example.com/module.js", {as: "script"});
+    startWizard();
+  }
+  return (
+    <button onClick={onClick}>Start Wizard</button>
+  );
+}
+```
diff --git a/src/content/reference/react-dom/render.md b/src/content/reference/react-dom/render.md
deleted file mode 100644
index a0f751278..000000000
--- a/src/content/reference/react-dom/render.md
+++ /dev/null
@@ -1,218 +0,0 @@
----
-title: render
----
-
-<Deprecated>
-
-This API will be removed in a future major version of React.
-
-In React 18, `render` was replaced by [`createRoot`.](/reference/react-dom/client/createRoot) Using `render` in React 18 will warn that your app will behave as if it’s running React 17. Learn more [here.](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis)
-
-</Deprecated>
-
-<Intro>
-
-`render` renders a piece of [JSX](/learn/writing-markup-with-jsx) ("React node") into a browser DOM node.
-
-```js
-render(reactNode, domNode, callback?)
-```
-
-</Intro>
-
-<InlineToc />
-
----
-
-## Reference {/*reference*/}
-
-### `render(reactNode, domNode, callback?)` {/*render*/}
-
-Call `render` to display a React component inside a browser DOM element.
-
-```js
-import { render } from 'react-dom';
-
-const domNode = document.getElementById('root');
-render(<App />, domNode);
-```
-
-React will display `<App />` in the `domNode`, and take over managing the DOM inside it.
-
-An app fully built with React will usually only have one `render` call with its root component.  A page that uses "sprinkles" of React for parts of the page may have as many `render` calls as needed.
-
-[See more examples below.](#usage)
-
-#### Parameters {/*parameters*/}
-
-* `reactNode`: A *React node* that you want to display. This will usually be a piece of JSX like `<App />`, but you can also pass a React element constructed with [`createElement()`](/reference/react/createElement), a string, a number, `null`, or `undefined`. 
-
-* `domNode`: A [DOM element.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React will display the `reactNode` you pass inside this DOM element. From this moment, React will manage the DOM inside the `domNode` and update it when your React tree changes.
-
-* **optional** `callback`: A function. If passed, React will call it after your component is placed into the DOM.
-
-
-#### Returns {/*returns*/}
-
-`render` usually returns `null`. However, if the `reactNode` you pass is a *class component*, then it will return an instance of that component.
-
-#### Caveats {/*caveats*/}
-
-* In React 18, `render` was replaced by [`createRoot`.](/reference/react-dom/client/createRoot) Please use `createRoot` for React 18 and beyond.
-
-* The first time you call `render`, React will clear all the existing HTML content inside the `domNode` before rendering the React component into it. If your `domNode` contains HTML generated by React on the server or during the build, use [`hydrate()`](/reference/react-dom/hydrate) instead, which attaches the event handlers to the existing HTML.
-
-* If you call `render` on the same `domNode` more than once, React will update the DOM as necessary to reflect the latest JSX you passed. React will decide which parts of the DOM can be reused and which need to be recreated by ["matching it up"](/learn/preserving-and-resetting-state) with the previously rendered tree. Calling `render` on the same `domNode` again is similar to calling the [`set` function](/reference/react/useState#setstate) on the root component: React avoids unnecessary DOM updates.
-
-* If your app is fully built with React, you'll likely have only one `render` call in your app. (If you use a framework, it might do this call for you.) When you want to render a piece of JSX in a different part of the DOM tree that isn't a child of your component (for example, a modal or a tooltip), use [`createPortal`](/reference/react-dom/createPortal) instead of `render`.
-
----
-
-## Usage {/*usage*/}
-
-Call `render` to display a <CodeStep step={1}>React component</CodeStep> inside a <CodeStep step={2}>browser DOM node</CodeStep>.
-
-```js [[1, 4, "<App />"], [2, 4, "document.getElementById('root')"]]
-import { render } from 'react-dom';
-import App from './App.js';
-
-render(<App />, document.getElementById('root'));
-```
-
-### Rendering the root component {/*rendering-the-root-component*/}
-
-In apps fully built with React, **you will usually only do this once at startup**--to render the "root" component.
-
-<Sandpack>
-
-```js index.js active
-import './styles.css';
-import { render } from 'react-dom';
-import App from './App.js';
-
-render(<App />, document.getElementById('root'));
-```
-
-```js App.js
-export default function App() {
-  return <h1>Hello, world!</h1>;
-}
-```
-
-</Sandpack>
-
-Usually you shouldn't need to call `render` again or to call it in more places. From this point on, React will be managing the DOM of your application. To update the UI, your components will [use state.](/reference/react/useState)
-
----
-
-### Rendering multiple roots {/*rendering-multiple-roots*/}
-
-If your page [isn't fully built with React](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page), call `render` for each top-level piece of UI managed by React.
-
-<Sandpack>
-
-```html public/index.html
-<nav id="navigation"></nav>
-<main>
-  <p>This paragraph is not rendered by React (open index.html to verify).</p>
-  <section id="comments"></section>
-</main>
-```
-
-```js index.js active
-import './styles.css';
-import { render } from 'react-dom';
-import { Comments, Navigation } from './Components.js';
-
-render(
-  <Navigation />,
-  document.getElementById('navigation')
-);
-
-render(
-  <Comments />,
-  document.getElementById('comments')
-);
-```
-
-```js Components.js
-export function Navigation() {
-  return (
-    <ul>
-      <NavLink href="/">Home</NavLink>
-      <NavLink href="/about">About</NavLink>
-    </ul>
-  );
-}
-
-function NavLink({ href, children }) {
-  return (
-    <li>
-      <a href={href}>{children}</a>
-    </li>
-  );
-}
-
-export function Comments() {
-  return (
-    <>
-      <h2>Comments</h2>
-      <Comment text="Hello!" author="Sophie" />
-      <Comment text="How are you?" author="Sunil" />
-    </>
-  );
-}
-
-function Comment({ text, author }) {
-  return (
-    <p>{text} — <i>{author}</i></p>
-  );
-}
-```
-
-```css
-nav ul { padding: 0; margin: 0; }
-nav ul li { display: inline-block; margin-right: 20px; }
-```
-
-</Sandpack>
-
-You can destroy the rendered trees with [`unmountComponentAtNode()`.](/reference/react-dom/unmountComponentAtNode)
-
----
-
-### Updating the rendered tree {/*updating-the-rendered-tree*/}
-
-You can call `render` more than once on the same DOM node. As long as the component tree structure matches up with what was previously rendered, React will [preserve the state.](/learn/preserving-and-resetting-state) Notice how you can type in the input, which means that the updates from repeated `render` calls every second are not destructive:
-
-<Sandpack>
-
-```js index.js active
-import { render } from 'react-dom';
-import './styles.css';
-import App from './App.js';
-
-let i = 0;
-setInterval(() => {
-  render(
-    <App counter={i} />,
-    document.getElementById('root')
-  );
-  i++;
-}, 1000);
-```
-
-```js App.js
-export default function App({counter}) {
-  return (
-    <>
-      <h1>Hello, world! {counter}</h1>
-      <input placeholder="Type something here" />
-    </>
-  );
-}
-```
-
-</Sandpack>
-
-It is uncommon to call `render` multiple times. Usually, you'll [update state](/reference/react/useState) inside your components instead.
diff --git a/src/content/reference/react-dom/server/index.md b/src/content/reference/react-dom/server/index.md
index f90f7c183..bea11603d 100644
--- a/src/content/reference/react-dom/server/index.md
+++ b/src/content/reference/react-dom/server/index.md
@@ -4,7 +4,7 @@ title: Server React DOM APIs
 
 <Intro>
 
-The `react-dom/server` APIs let you render React components to HTML on the server. These APIs are only used on the server at the top level of your app to generate the initial HTML. A [framework](/learn/start-a-new-react-project#production-grade-react-frameworks) may call them for you. Most of your components don't need to import or use them.
+The `react-dom/server` APIs let you server-side render React components to HTML. These APIs are only used on the server at the top level of your app to generate the initial HTML. A [framework](/learn/start-a-new-react-project#production-grade-react-frameworks) may call them for you. Most of your components don't need to import or use them.
 
 </Intro>
 
@@ -15,7 +15,6 @@ The `react-dom/server` APIs let you render React components to HTML on the serve
 These methods are only available in the environments with [Node.js Streams:](https://nodejs.org/api/stream.html)
 
 * [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) renders a React tree to a pipeable [Node.js Stream.](https://nodejs.org/api/stream.html)
-* [`renderToStaticNodeStream`](/reference/react-dom/server/renderToStaticNodeStream) renders a non-interactive React tree to a [Node.js Readable Stream.](https://nodejs.org/api/stream.html#readable-streams)
 
 ---
 
@@ -27,7 +26,7 @@ These methods are only available in the environments with [Web Streams](https://
 
 ---
 
-## Server APIs for non-streaming environments {/*server-apis-for-non-streaming-environments*/}
+## Legacy Server APIs for non-streaming environments {/*legacy-server-apis-for-non-streaming-environments*/}
 
 These methods can be used in the environments that don't support streams:
 
@@ -35,15 +34,3 @@ These methods can be used in the environments that don't support streams:
 * [`renderToStaticMarkup`](/reference/react-dom/server/renderToStaticMarkup) renders a non-interactive React tree to a string.
 
 They have limited functionality compared to the streaming APIs.
-
----
-
-## Deprecated server APIs {/*deprecated-server-apis*/}
-
-<Deprecated>
-
-These APIs will be removed in a future major version of React.
-
-</Deprecated>
-
-* [`renderToNodeStream`](/reference/react-dom/server/renderToNodeStream) renders a React tree to a [Node.js Readable stream.](https://nodejs.org/api/stream.html#readable-streams) (Deprecated.)
diff --git a/src/content/reference/react-dom/server/renderToNodeStream.md b/src/content/reference/react-dom/server/renderToNodeStream.md
deleted file mode 100644
index a4ab2e570..000000000
--- a/src/content/reference/react-dom/server/renderToNodeStream.md
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: renderToNodeStream
----
-
-<Deprecated>
-
-This API will be removed in a future major version of React. Use [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) instead.
-
-</Deprecated>
-
-<Intro>
-
-`renderToNodeStream` renders a React tree to a [Node.js Readable Stream.](https://nodejs.org/api/stream.html#readable-streams)
-
-```js
-const stream = renderToNodeStream(reactNode)
-```
-
-</Intro>
-
-<InlineToc />
-
----
-
-## Reference {/*reference*/}
-
-### `renderToNodeStream(reactNode)` {/*rendertonodestream*/}
-
-On the server, call `renderToNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) which you can pipe into the response.
-
-```js
-import { renderToNodeStream } from 'react-dom/server';
-
-const stream = renderToNodeStream(<App />);
-stream.pipe(response);
-```
-
-On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive.
-
-[See more examples below.](#usage)
-
-#### Parameters {/*parameters*/}
-
-* `reactNode`: A React node you want to render to HTML. For example, a JSX element like `<App />`.
-
-#### Returns {/*returns*/}
-
-A [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) that outputs an HTML string.
-
-#### Caveats {/*caveats*/}
-
-* This method will wait for all [Suspense boundaries](/reference/react/Suspense) to complete before returning any output.
-
-* As of React 18, this method buffers all of its output, so it doesn't actually provide any streaming benefits. This is why it's recommended that you migrate to [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) instead.
-
-* The returned stream is a byte stream encoded in utf-8. If you need a stream in another encoding, take a look at a project like [iconv-lite](https://www.npmjs.com/package/iconv-lite), which provides transform streams for transcoding text.
-
----
-
-## Usage {/*usage*/}
-
-### Rendering a React tree as HTML to a Node.js Readable Stream {/*rendering-a-react-tree-as-html-to-a-nodejs-readable-stream*/}
-
-Call `renderToNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) which you can pipe to your server response:
-
-```js {5-6}
-import { renderToNodeStream } from 'react-dom/server';
-
-// The route handler syntax depends on your backend framework
-app.use('/', (request, response) => {
-  const stream = renderToNodeStream(<App />);
-  stream.pipe(response);
-});
-```
-
-The stream will produce the initial non-interactive HTML output of your React components. On the client, you will need to call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to *hydrate* that server-generated HTML and make it interactive.
diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md
index 6a9021e02..7d0d1ab3d 100644
--- a/src/content/reference/react-dom/server/renderToPipeableStream.md
+++ b/src/content/reference/react-dom/server/renderToPipeableStream.md
@@ -57,7 +57,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
   * **optional** `nonce`: A [`nonce`](http://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#nonce) string to allow scripts for [`script-src` Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src).
   * **optional** `onAllReady`: A callback that fires when all rendering is complete, including both the [shell](#specifying-what-goes-into-the-shell) and all additional [content.](#streaming-more-content-as-it-loads) You can use this instead of `onShellReady` [for crawlers and static generation.](#waiting-for-all-content-to-load-for-crawlers-and-static-generation) If you start streaming here, you won't get any progressive loading. The stream will contain the final HTML.
   * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](#recovering-from-errors-outside-the-shell) or [not.](#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](#setting-the-status-code) before the shell is emitted.
-  * **optional** `onShellReady`: A callback that fires right after the [initial shell](#specifying-what-goes-into-the-shell) has been rendered. You can [set the status code](#setting-the-status-code) and call `pipe` here to start streaming. React will [stream the additional content](#streaming-more-content-as-it-loads) after the shell along with the inline `<script>` tags that place that replace the HTML loading fallbacks with the content.
+  * **optional** `onShellReady`: A callback that fires right after the [initial shell](#specifying-what-goes-into-the-shell) has been rendered. You can [set the status code](#setting-the-status-code) and call `pipe` here to start streaming. React will [stream the additional content](#streaming-more-content-as-it-loads) after the shell along with the inline `<script>` tags that replace the HTML loading fallbacks with the content.
   * **optional** `onShellError`: A callback that fires if there was an error rendering the initial shell.  It receives the error as an argument. No bytes were emitted from the stream yet, and neither `onShellReady` nor `onAllReady` will get called, so you can [output a fallback HTML shell.](#recovering-from-errors-inside-the-shell)
   * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225)
 
@@ -288,6 +288,7 @@ Streaming does not need to wait for React itself to load in the browser, or for
 
 - 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)
+- Reading the value of a Promise with [`use`](/reference/react/use)
 
 Suspense **does not** detect when data is fetched inside an Effect or event handler.
 
@@ -430,7 +431,7 @@ function ProfilePage() {
 }
 ```
 
-If an error happens in the `Posts` component or somewhere inside it, React will [try to recover from it:](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content)
+If an error happens in the `Posts` component or somewhere inside it, React will [try to recover from it:](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content)
 
 1. It will emit the loading fallback for the closest `<Suspense>` boundary (`PostsGlimmer`) into the HTML.
 2. It will "give up" on trying to render the `Posts` content on the server anymore.
diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md
index 8ef42aa71..f407f2245 100644
--- a/src/content/reference/react-dom/server/renderToReadableStream.md
+++ b/src/content/reference/react-dom/server/renderToReadableStream.md
@@ -287,6 +287,7 @@ Streaming does not need to wait for React itself to load in the browser, or for
 
 - 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)
+- Reading the value of a Promise with [`use`](/reference/react/use)
 
 Suspense **does not** detect when data is fetched inside an Effect or event handler.
 
@@ -434,7 +435,7 @@ function ProfilePage() {
 }
 ```
 
-If an error happens in the `Posts` component or somewhere inside it, React will [try to recover from it:](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content)
+If an error happens in the `Posts` component or somewhere inside it, React will [try to recover from it:](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content)
 
 1. It will emit the loading fallback for the closest `<Suspense>` boundary (`PostsGlimmer`) into the HTML.
 2. It will "give up" on trying to render the `Posts` content on the server anymore.
diff --git a/src/content/reference/react-dom/server/renderToStaticMarkup.md b/src/content/reference/react-dom/server/renderToStaticMarkup.md
index 01ff17ee6..2b9178d55 100644
--- a/src/content/reference/react-dom/server/renderToStaticMarkup.md
+++ b/src/content/reference/react-dom/server/renderToStaticMarkup.md
@@ -7,7 +7,7 @@ title: renderToStaticMarkup
 `renderToStaticMarkup` renders a non-interactive React tree to an HTML string.
 
 ```js
-const html = renderToStaticMarkup(reactNode)
+const html = renderToStaticMarkup(reactNode, options?)
 ```
 
 </Intro>
@@ -18,7 +18,7 @@ const html = renderToStaticMarkup(reactNode)
 
 ## Reference {/*reference*/}
 
-### `renderToStaticMarkup(reactNode)` {/*rendertostaticmarkup*/}
+### `renderToStaticMarkup(reactNode, options?)` {/*rendertostaticmarkup*/}
 
 On the server, call `renderToStaticMarkup` to render your app to HTML.
 
@@ -35,6 +35,8 @@ It will produce non-interactive HTML output of your React components.
 #### Parameters {/*parameters*/}
 
 * `reactNode`: A React node you want to render to HTML. For example, a JSX node like `<Page />`.
+* **optional** `options`: An object for server render.
+  * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page.
 
 #### Returns {/*returns*/}
 
diff --git a/src/content/reference/react-dom/server/renderToStaticNodeStream.md b/src/content/reference/react-dom/server/renderToStaticNodeStream.md
deleted file mode 100644
index ec3d58937..000000000
--- a/src/content/reference/react-dom/server/renderToStaticNodeStream.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: renderToStaticNodeStream
----
-
-<Intro>
-
-`renderToStaticNodeStream` renders a non-interactive React tree to a [Node.js Readable Stream.](https://nodejs.org/api/stream.html#readable-streams)
-
-```js
-const stream = renderToStaticNodeStream(reactNode)
-```
-
-</Intro>
-
-<InlineToc />
-
----
-
-## Reference {/*reference*/}
-
-### `renderToStaticNodeStream(reactNode)` {/*rendertostaticnodestream*/}
-
-On the server, call `renderToStaticNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams).
-
-```js
-import { renderToStaticNodeStream } from 'react-dom/server';
-
-const stream = renderToStaticNodeStream(<Page />);
-stream.pipe(response);
-```
-
-[See more examples below.](#usage)
-
-The stream will produce non-interactive HTML output of your React components.
-
-#### Parameters {/*parameters*/}
-
-* `reactNode`: A React node you want to render to HTML. For example, a JSX element like `<Page />`.
-
-#### Returns {/*returns*/}
-
-A [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) that outputs an HTML string. The resulting HTML can't be hydrated on the client.
-
-#### Caveats {/*caveats*/}
-
-* `renderToStaticNodeStream` output cannot be hydrated.
-
-* This method will wait for all [Suspense boundaries](/reference/react/Suspense) to complete before returning any output.
-
-* As of React 18, this method buffers all of its output, so it doesn't actually provide any streaming benefits.
-
-* The returned stream is a byte stream encoded in utf-8. If you need a stream in another encoding, take a look at a project like [iconv-lite](https://www.npmjs.com/package/iconv-lite), which provides transform streams for transcoding text.
-
----
-
-## Usage {/*usage*/}
-
-### Rendering a React tree as static HTML to a Node.js Readable Stream {/*rendering-a-react-tree-as-static-html-to-a-nodejs-readable-stream*/}
-
-Call `renderToStaticNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) which you can pipe to your server response:
-
-```js {5-6}
-import { renderToStaticNodeStream } from 'react-dom/server';
-
-// The route handler syntax depends on your backend framework
-app.use('/', (request, response) => {
-  const stream = renderToStaticNodeStream(<Page />);
-  stream.pipe(response);
-});
-```
-
-The stream will produce the initial non-interactive HTML output of your React components.
-
-<Pitfall>
-
-This method renders **non-interactive HTML that cannot be hydrated.** This is useful if you want to use React as a simple static page generator, or if you're rendering completely static content like emails.
-
-Interactive apps should use [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) on the server and [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) on the client.
-
-</Pitfall>
diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md
index 41bc6a982..b89c65c0c 100644
--- a/src/content/reference/react-dom/server/renderToString.md
+++ b/src/content/reference/react-dom/server/renderToString.md
@@ -13,7 +13,7 @@ title: renderToString
 `renderToString` renders a React tree to an HTML string.
 
 ```js
-const html = renderToString(reactNode)
+const html = renderToString(reactNode, options?)
 ```
 
 </Intro>
@@ -24,7 +24,7 @@ const html = renderToString(reactNode)
 
 ## Reference {/*reference*/}
 
-### `renderToString(reactNode)` {/*rendertostring*/}
+### `renderToString(reactNode, options?)` {/*rendertostring*/}
 
 On the server, call `renderToString` to render your app to HTML.
 
@@ -42,6 +42,9 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
 
 * `reactNode`: A React node you want to render to HTML. For example, a JSX node like `<App />`.
 
+* **optional** `options`: An object for server render.
+  * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters)
+
 #### Returns {/*returns*/}
 
 An HTML string.
@@ -83,9 +86,9 @@ This will produce the initial non-interactive HTML output of your React componen
 
 ## Alternatives {/*alternatives*/}
 
-### Migrating from `renderToString` to a streaming method on the server {/*migrating-from-rendertostring-to-a-streaming-method-on-the-server*/}
+### Migrating from `renderToString` to a streaming render on the server {/*migrating-from-rendertostring-to-a-streaming-method-on-the-server*/}
 
-`renderToString` returns a string immediately, so it does not support streaming or waiting for data.
+`renderToString` returns a string immediately, so it does not support streaming content as it loads.
 
 When possible, we recommend using these fully-featured alternatives:
 
@@ -96,6 +99,19 @@ You can continue using `renderToString` if your server environment does not supp
 
 ---
 
+### Migrating from `renderToString` to a static prerender on the server {/*migrating-from-rendertostring-to-a-static-prerender-on-the-server*/}
+
+`renderToString` returns a string immediately, so it does not support waiting for data to load for static HTML generation.
+
+We recommend using these fully-featured alternatives:
+
+* If you use Node.js, use [`prerenderToNodeStream`.](/reference/react-dom/static/prerenderToNodeStream)
+* If you use Deno or a modern edge runtime with [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API), use [`prerender`.](/reference/react-dom/static/prerender)
+
+You can continue using `renderToString` if your static site generation environment does not support streams.
+
+---
+
 ### Removing `renderToString` from the client code {/*removing-rendertostring-from-the-client-code*/}
 
 Sometimes, `renderToString` is used on the client to convert some component to HTML.
@@ -134,5 +150,5 @@ The [`flushSync`](/reference/react-dom/flushSync) call is necessary so that the
 
 If some component suspends (for example, because it's defined with [`lazy`](/reference/react/lazy) or fetches data), `renderToString` will not wait for its content to resolve. Instead, `renderToString` will find the closest [`<Suspense>`](/reference/react/Suspense) boundary above it and render its `fallback` prop in the HTML. The content will not appear until the client code loads.
 
-To solve this, use one of the [recommended streaming solutions.](#migrating-from-rendertostring-to-a-streaming-method-on-the-server) They can stream content in chunks as it resolves on the server so that the user sees the page being progressively filled in before the client code loads.
+To solve this, use one of the [recommended streaming solutions.](#alternatives) For server side rendering, they can stream content in chunks as it resolves on the server so that the user sees the page being progressively filled in before the client code loads. For static site generation, they can wait for all the content to resolve before generating the static HTML.
 
diff --git a/src/content/reference/react-dom/static/index.md b/src/content/reference/react-dom/static/index.md
new file mode 100644
index 000000000..988ec85dc
--- /dev/null
+++ b/src/content/reference/react-dom/static/index.md
@@ -0,0 +1,28 @@
+---
+title: Static React DOM APIs
+---
+
+<Intro>
+
+The `react-dom/static` APIs let you generate static HTML for React components. They have limited functionality compared to the streaming APIs. A [framework](/learn/start-a-new-react-project#production-grade-react-frameworks) may call them for you. Most of your components don't need to import or use them.
+
+</Intro>
+
+---
+
+## Static APIs for Web Streams {/*static-apis-for-web-streams*/}
+
+These methods are only available in the environments with [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API), which includes browsers, Deno, and some modern edge runtimes:
+
+* [`prerender`](/reference/react-dom/static/prerender) renders a React tree to static HTML with a [Readable Web Stream.](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream)
+
+
+---
+
+## Static APIs for Node.js Streams {/*static-apis-for-nodejs-streams*/}
+
+These methods are only available in the environments with [Node.js Streams](https://nodejs.org/api/stream.html):
+
+* [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream) renders a React tree to static HTML with a [Node.js Stream.](https://nodejs.org/api/stream.html)
+
+
diff --git a/src/content/reference/react-dom/static/prerender.md b/src/content/reference/react-dom/static/prerender.md
new file mode 100644
index 000000000..198faea64
--- /dev/null
+++ b/src/content/reference/react-dom/static/prerender.md
@@ -0,0 +1,297 @@
+---
+title: prerender
+---
+
+<Intro>
+
+`prerender` renders a React tree to a static HTML string using a [Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API).
+
+```js
+const {prelude} = await prerender(reactNode, options?)
+```
+
+</Intro>
+
+<InlineToc />
+
+<Note>
+
+This API depends on [Web Streams.](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) For Node.js, use [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream) instead.
+
+</Note>
+
+---
+
+## Reference {/*reference*/}
+
+### `prerender(reactNode, options?)` {/*prerender*/}
+
+Call `prerender` to render your app to static HTML.
+
+```js
+import { prerender } from 'react-dom/static';
+
+async function handler(request) {
+  const {prelude} = await prerender(<App />, {
+    bootstrapScripts: ['/main.js']
+  });
+  return new Response(prelude, {
+    headers: { 'content-type': 'text/html' },
+  });
+}
+```
+
+On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive.
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `reactNode`: A React node you want to render to HTML. For example, a JSX node like `<App />`. It is expected to represent the entire document, so the App component should render the `<html>` tag.
+
+* **optional** `options`: An object with static generation options.
+  * **optional** `bootstrapScriptContent`: If specified, this string will be placed in an inline `<script>` tag.
+  * **optional** `bootstrapScripts`: An array of string URLs for the `<script>` tags to emit on the page. Use this to include the `<script>` that calls [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) Omit it if you don't want to run React on the client at all.
+  * **optional** `bootstrapModules`: Like `bootstrapScripts`, but emits [`<script type="module">`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) instead.
+  * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters)
+  * **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML.
+  * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](#recovering-from-errors-outside-the-shell) or [not.](#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](#setting-the-status-code) before the shell is emitted.
+  * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225)
+  * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](#aborting-server-rendering) and render the rest on the client.
+
+#### Returns {/*returns*/}
+
+`prerender` returns a Promise:
+- If rendering the is successful, the Promise will resolve to an object containing:
+  - `prelude`: a [Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) of HTML. You can use this stream to send a response in chunks, or you can read the entire stream into a string.
+- If rendering fails, the Promise will be rejected. [Use this to output a fallback shell.](#recovering-from-errors-inside-the-shell)
+
+
+
+
+<Note>
+
+### When should I use `prerender`? {/*when-to-use-prerender*/}
+
+The static `prerender` API is used for static server-side generation (SSG). Unlike `renderToString`, `prerender` waits for all data to load before resolving. This makes it suitable for generating static HTML for a full page, including data that needs to be fetched using Suspense. To stream content as it loads, use a streaming server-side render (SSR) API like [renderToReadableStream](/reference/react-dom/server/renderToReadableStream).
+
+</Note>
+
+---
+
+## Usage {/*usage*/}
+
+### Rendering a React tree to a stream of static HTML {/*rendering-a-react-tree-to-a-stream-of-static-html*/}
+
+Call `prerender` to render your React tree to static HTML into a [Readable Web Stream:](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream):
+
+```js [[1, 4, "<App />"], [2, 5, "['/main.js']"]]
+import { prerender } from 'react-dom/static';
+
+async function handler(request) {
+  const {prelude} = await prerender(<App />, {
+    bootstrapScripts: ['/main.js']
+  });
+  return new Response(prelude, {
+    headers: { 'content-type': 'text/html' },
+  });
+}
+```
+
+Along with the <CodeStep step={1}>root component</CodeStep>, you need to provide a list of <CodeStep step={2}>bootstrap `<script>` paths</CodeStep>. Your root component should return **the entire document including the root `<html>` tag.**
+
+For example, it might look like this:
+
+```js [[1, 1, "App"]]
+export default function App() {
+  return (
+    <html>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="stylesheet" href="/styles.css"></link>
+        <title>My app</title>
+      </head>
+      <body>
+        <Router />
+      </body>
+    </html>
+  );
+}
+```
+
+React will inject the [doctype](https://developer.mozilla.org/en-US/docs/Glossary/Doctype) and your <CodeStep step={2}>bootstrap `<script>` tags</CodeStep> into the resulting HTML stream:
+
+```html [[2, 5, "/main.js"]]
+<!DOCTYPE html>
+<html>
+  <!-- ... HTML from your components ... -->
+</html>
+<script src="/main.js" async=""></script>
+```
+
+On the client, your bootstrap script should [hydrate the entire `document` with a call to `hydrateRoot`:](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document)
+
+```js [[1, 4, "<App />"]]
+import { hydrateRoot } from 'react-dom/client';
+import App from './App.js';
+
+hydrateRoot(document, <App />);
+```
+
+This will attach event listeners to the static server-generated HTML and make it interactive.
+
+<DeepDive>
+
+#### Reading CSS and JS asset paths from the build output {/*reading-css-and-js-asset-paths-from-the-build-output*/}
+
+The final asset URLs (like JavaScript and CSS files) are often hashed after the build. For example, instead of `styles.css` you might end up with `styles.123456.css`. Hashing static asset filenames guarantees that every distinct build of the same asset will have a different filename. This is useful because it lets you safely enable long-term caching for static assets: a file with a certain name would never change content.
+
+However, if you don't know the asset URLs until after the build, there's no way for you to put them in the source code. For example, hardcoding `"/styles.css"` into JSX like earlier wouldn't work. To keep them out of your source code, your root component can read the real filenames from a map passed as a prop:
+
+```js {1,6}
+export default function App({ assetMap }) {
+  return (
+    <html>
+      <head>
+        <title>My app</title>
+        <link rel="stylesheet" href={assetMap['styles.css']}></link>
+      </head>
+      ...
+    </html>
+  );
+}
+```
+
+On the server, render `<App assetMap={assetMap} />` and pass your `assetMap` with the asset URLs:
+
+```js {1-5,8,9}
+// You'd need to get this JSON from your build tooling, e.g. read it from the build output.
+const assetMap = {
+  'styles.css': '/styles.123456.css',
+  'main.js': '/main.123456.js'
+};
+
+async function handler(request) {
+  const {prelude} = await prerender(<App assetMap={assetMap} />, {
+    bootstrapScripts: [assetMap['/main.js']]
+  });
+  return new Response(prelude, {
+    headers: { 'content-type': 'text/html' },
+  });
+}
+```
+
+Since your server is now rendering `<App assetMap={assetMap} />`, you need to render it with `assetMap` on the client too to avoid hydration errors. You can serialize and pass `assetMap` to the client like this:
+
+```js {9-10}
+// You'd need to get this JSON from your build tooling.
+const assetMap = {
+  'styles.css': '/styles.123456.css',
+  'main.js': '/main.123456.js'
+};
+
+async function handler(request) {
+  const {prelude} = await prerender(<App assetMap={assetMap} />, {
+    // Careful: It's safe to stringify() this because this data isn't user-generated.
+    bootstrapScriptContent: `window.assetMap = ${JSON.stringify(assetMap)};`,
+    bootstrapScripts: [assetMap['/main.js']],
+  });
+  return new Response(prelude, {
+    headers: { 'content-type': 'text/html' },
+  });
+}
+```
+
+In the example above, the `bootstrapScriptContent` option adds an extra inline `<script>` tag that sets the global `window.assetMap` variable on the client. This lets the client code read the same `assetMap`:
+
+```js {4}
+import { hydrateRoot } from 'react-dom/client';
+import App from './App.js';
+
+hydrateRoot(document, <App assetMap={window.assetMap} />);
+```
+
+Both client and server render `App` with the same `assetMap` prop, so there are no hydration errors.
+
+</DeepDive>
+
+---
+
+### Rendering a React tree to a string of static HTML {/*rendering-a-react-tree-to-a-string-of-static-html*/}
+
+Call `prerender` to render your app to a static HTML string:
+
+```js
+import { prerender } from 'react-dom/static';
+
+async function renderToString() {
+  const {prelude} = await prerender(<App />, {
+    bootstrapScripts: ['/main.js']
+  });
+  
+  const reader = stream.getReader();
+  let content = '';
+  while (true) {
+    const {done, value} = await reader.read();
+    if (done) {
+      return content;
+    }
+    content += Buffer.from(value).toString('utf8');
+  }
+}
+```
+
+This will produce the initial non-interactive HTML output of your React components. On the client, you will need to call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to *hydrate* that server-generated HTML and make it interactive.
+
+---
+
+### Waiting for all data to load {/*waiting-for-all-data-to-load*/}
+
+`prerender` waits for all data to load before finishing the static HTML generation and resolving. For example, consider a profile page that shows a cover, a sidebar with friends and photos, and a list of posts:
+
+```js
+function ProfilePage() {
+  return (
+    <ProfileLayout>
+      <ProfileCover />
+      <Sidebar>
+        <Friends />
+        <Photos />
+      </Sidebar>
+      <Suspense fallback={<PostsGlimmer />}>
+        <Posts />
+      </Suspense>
+    </ProfileLayout>
+  );
+}
+```
+
+Imagine that `<Posts />` needs to load some data, which takes some time. Ideally, you'd want wait for the posts to finish so it's included in the HTML. To do this, you can use Suspense to suspend on the data, and `prerender` will wait for the suspended content to finish before resolving to the static HTML.
+
+<Note>
+
+**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/getting-started/react-essentials)
+- Lazy-loading component code with [`lazy`](/reference/react/lazy)
+- Reading the value of a Promise with [`use`](/reference/react/use)
+
+Suspense **does not** detect when data is fetched inside an Effect or event handler.
+
+The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation.
+
+Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React.
+
+</Note>
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### My stream doesn't start until the entire app is rendered {/*my-stream-doesnt-start-until-the-entire-app-is-rendered*/}
+
+The `prerender` response waits for the entire app to finish rendering, including waiting for all suspense boundaries to resolve, before resolving. It is designed for static site generation (SSG) ahead of time and does not support streaming more content as it loads. 
+
+To stream content as it loads, use a streaming server render API like [renderToReadableStream](/reference/react-dom/server/renderToReadableStream).
+ 
\ No newline at end of file
diff --git a/src/content/reference/react-dom/static/prerenderToNodeStream.md b/src/content/reference/react-dom/static/prerenderToNodeStream.md
new file mode 100644
index 000000000..259a3b5d8
--- /dev/null
+++ b/src/content/reference/react-dom/static/prerenderToNodeStream.md
@@ -0,0 +1,295 @@
+---
+title: prerenderToNodeStream
+---
+
+<Intro>
+
+`prerender` renders a React tree to a static HTML string using a [Node.js Stream.](https://nodejs.org/api/stream.html).
+
+```js
+const {prelude} = await prerenderToNodeStream(reactNode, options?)
+```
+
+</Intro>
+
+<InlineToc />
+
+<Note>
+
+This API is specific to Node.js. Environments with [Web Streams,](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) like Deno and modern edge runtimes, should use [`prerender`](/reference/react-dom/static/prerender) instead.
+
+</Note>
+
+---
+
+## Reference {/*reference*/}
+
+### `prerenderToNodeStream(reactNode, options?)` {/*prerender*/}
+
+Call `prerenderToNodeStream` to render your app to static HTML.
+
+```js
+import { prerenderToNodeStream } from 'react-dom/static';
+
+// The route handler syntax depends on your backend framework
+app.use('/', async (request, response) => {
+  const { prelude } = await prerenderToNodeStream(<App />, {
+    bootstrapScripts: ['/main.js'],
+  });
+
+  response.setHeader('Content-Type', 'text/plain');
+  prelude.pipe(response);
+});
+```
+
+On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive.
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `reactNode`: A React node you want to render to HTML. For example, a JSX node like `<App />`. It is expected to represent the entire document, so the App component should render the `<html>` tag.
+
+* **optional** `options`: An object with static generation options.
+  * **optional** `bootstrapScriptContent`: If specified, this string will be placed in an inline `<script>` tag.
+  * **optional** `bootstrapScripts`: An array of string URLs for the `<script>` tags to emit on the page. Use this to include the `<script>` that calls [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) Omit it if you don't want to run React on the client at all.
+  * **optional** `bootstrapModules`: Like `bootstrapScripts`, but emits [`<script type="module">`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) instead.
+  * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters)
+  * **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML.
+  * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](#recovering-from-errors-outside-the-shell) or [not.](#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](#setting-the-status-code) before the shell is emitted.
+  * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225)
+  * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](#aborting-server-rendering) and render the rest on the client.
+
+#### Returns {/*returns*/}
+
+`prerenderToNodeStream` returns a Promise:
+- If rendering the is successful, the Promise will resolve to an object containing:
+  - `prelude`: a [Node.js Stream.](https://nodejs.org/api/stream.html) of HTML. You can use this stream to send a response in chunks, or you can read the entire stream into a string.
+- If rendering fails, the Promise will be rejected. [Use this to output a fallback shell.](#recovering-from-errors-inside-the-shell)
+
+<Note>
+
+### When should I use `prerenderToNodeStream`? {/*when-to-use-prerender*/}
+
+The static `prerenderToNodeStream` API is used for static server-side generation (SSG). Unlike `renderToString`, `prerenderToNodeStream` waits for all data to load before resolving. This makes it suitable for generating static HTML for a full page, including data that needs to be fetched using Suspense. To stream content as it loads, use a streaming server-side render (SSR) API like [renderToReadableStream](/reference/react-dom/server/renderToReadableStream).
+
+</Note>
+
+---
+
+## Usage {/*usage*/}
+
+### Rendering a React tree to a stream of static HTML {/*rendering-a-react-tree-to-a-stream-of-static-html*/}
+
+Call `prerenderToNodeStream` to render your React tree to static HTML into a [Node.js Stream.](https://nodejs.org/api/stream.html):
+
+```js [[1, 5, "<App />"], [2, 6, "['/main.js']"]]
+import { prerenderToNodeStream } from 'react-dom/static';
+
+// The route handler syntax depends on your backend framework
+app.use('/', async (request, response) => {
+  const { prelude } = await prerenderToNodeStream(<App />, {
+    bootstrapScripts: ['/main.js'],
+  });
+  
+  response.setHeader('Content-Type', 'text/plain');
+  prelude.pipe(response);
+});
+```
+
+Along with the <CodeStep step={1}>root component</CodeStep>, you need to provide a list of <CodeStep step={2}>bootstrap `<script>` paths</CodeStep>. Your root component should return **the entire document including the root `<html>` tag.**
+
+For example, it might look like this:
+
+```js [[1, 1, "App"]]
+export default function App() {
+  return (
+    <html>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="stylesheet" href="/styles.css"></link>
+        <title>My app</title>
+      </head>
+      <body>
+        <Router />
+      </body>
+    </html>
+  );
+}
+```
+
+React will inject the [doctype](https://developer.mozilla.org/en-US/docs/Glossary/Doctype) and your <CodeStep step={2}>bootstrap `<script>` tags</CodeStep> into the resulting HTML stream:
+
+```html [[2, 5, "/main.js"]]
+<!DOCTYPE html>
+<html>
+  <!-- ... HTML from your components ... -->
+</html>
+<script src="/main.js" async=""></script>
+```
+
+On the client, your bootstrap script should [hydrate the entire `document` with a call to `hydrateRoot`:](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document)
+
+```js [[1, 4, "<App />"]]
+import { hydrateRoot } from 'react-dom/client';
+import App from './App.js';
+
+hydrateRoot(document, <App />);
+```
+
+This will attach event listeners to the static server-generated HTML and make it interactive.
+
+<DeepDive>
+
+#### Reading CSS and JS asset paths from the build output {/*reading-css-and-js-asset-paths-from-the-build-output*/}
+
+The final asset URLs (like JavaScript and CSS files) are often hashed after the build. For example, instead of `styles.css` you might end up with `styles.123456.css`. Hashing static asset filenames guarantees that every distinct build of the same asset will have a different filename. This is useful because it lets you safely enable long-term caching for static assets: a file with a certain name would never change content.
+
+However, if you don't know the asset URLs until after the build, there's no way for you to put them in the source code. For example, hardcoding `"/styles.css"` into JSX like earlier wouldn't work. To keep them out of your source code, your root component can read the real filenames from a map passed as a prop:
+
+```js {1,6}
+export default function App({ assetMap }) {
+  return (
+    <html>
+      <head>
+        <title>My app</title>
+        <link rel="stylesheet" href={assetMap['styles.css']}></link>
+      </head>
+      ...
+    </html>
+  );
+}
+```
+
+On the server, render `<App assetMap={assetMap} />` and pass your `assetMap` with the asset URLs:
+
+```js {1-5,8,9}
+// You'd need to get this JSON from your build tooling, e.g. read it from the build output.
+const assetMap = {
+  'styles.css': '/styles.123456.css',
+  'main.js': '/main.123456.js'
+};
+
+app.use('/', async (request, response) => {
+  const { prelude } = await prerenderToNodeStream(<App />, {
+    bootstrapScripts: [assetMap['/main.js']]
+  });
+
+  response.setHeader('Content-Type', 'text/html');
+  prelude.pipe(response);
+});
+```
+
+Since your server is now rendering `<App assetMap={assetMap} />`, you need to render it with `assetMap` on the client too to avoid hydration errors. You can serialize and pass `assetMap` to the client like this:
+
+```js {9-10}
+// You'd need to get this JSON from your build tooling.
+const assetMap = {
+  'styles.css': '/styles.123456.css',
+  'main.js': '/main.123456.js'
+};
+
+app.use('/', async (request, response) => {
+  const { prelude } = await prerenderToNodeStream(<App />, {
+    // Careful: It's safe to stringify() this because this data isn't user-generated.
+    bootstrapScriptContent: `window.assetMap = ${JSON.stringify(assetMap)};`,
+    bootstrapScripts: [assetMap['/main.js']],
+  });
+
+  response.setHeader('Content-Type', 'text/html');
+  prelude.pipe(response);
+});
+```
+
+In the example above, the `bootstrapScriptContent` option adds an extra inline `<script>` tag that sets the global `window.assetMap` variable on the client. This lets the client code read the same `assetMap`:
+
+```js {4}
+import { hydrateRoot } from 'react-dom/client';
+import App from './App.js';
+
+hydrateRoot(document, <App assetMap={window.assetMap} />);
+```
+
+Both client and server render `App` with the same `assetMap` prop, so there are no hydration errors.
+
+</DeepDive>
+
+---
+
+### Rendering a React tree to a string of static HTML {/*rendering-a-react-tree-to-a-string-of-static-html*/}
+
+Call `prerenderToNodeStream` to render your app to a static HTML string:
+
+```js
+import { prerenderToNodeStream } from 'react-dom/static';
+
+async function renderToString() {
+  const {prelude} = await prerenderToNodeStream(<App />, {
+    bootstrapScripts: ['/main.js']
+  });
+  
+  return new Promise((resolve, reject) => {
+    let data = '';
+    prelude.on('data', chunk => {
+      data += chunk;
+    });
+    prelude.on('end', () => resolve(data));
+    prelude.on('error', reject);
+  });
+}
+```
+
+This will produce the initial non-interactive HTML output of your React components. On the client, you will need to call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to *hydrate* that server-generated HTML and make it interactive.
+
+---
+
+### Waiting for all data to load {/*waiting-for-all-data-to-load*/}
+
+`prerenderToNodeStream` waits for all data to load before finishing the static HTML generation and resolving. For example, consider a profile page that shows a cover, a sidebar with friends and photos, and a list of posts:
+
+```js
+function ProfilePage() {
+  return (
+    <ProfileLayout>
+      <ProfileCover />
+      <Sidebar>
+        <Friends />
+        <Photos />
+      </Sidebar>
+      <Suspense fallback={<PostsGlimmer />}>
+        <Posts />
+      </Suspense>
+    </ProfileLayout>
+  );
+}
+```
+
+Imagine that `<Posts />` needs to load some data, which takes some time. Ideally, you'd want wait for the posts to finish so it's included in the HTML. To do this, you can use Suspense to suspend on the data, and `prerenderToNodeStream` will wait for the suspended content to finish before resolving to the static HTML.
+
+<Note>
+
+**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/getting-started/react-essentials)
+- Lazy-loading component code with [`lazy`](/reference/react/lazy)
+- Reading the value of a Promise with [`use`](/reference/react/use)
+
+Suspense **does not** detect when data is fetched inside an Effect or event handler.
+
+The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation.
+
+Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React.
+
+</Note>
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### My stream doesn't start until the entire app is rendered {/*my-stream-doesnt-start-until-the-entire-app-is-rendered*/}
+
+The `prerenderToNodeStream` response waits for the entire app to finish rendering, including waiting for all suspense boundaries to resolve, before resolving. It is designed for static site generation (SSG) ahead of time and does not support streaming more content as it loads.
+
+To stream content as it loads, use a streaming server render API like [renderToPipeableStream](/reference/react-dom/server/renderToPipeableStream).
+ 
\ No newline at end of file
diff --git a/src/content/reference/react-dom/unmountComponentAtNode.md b/src/content/reference/react-dom/unmountComponentAtNode.md
deleted file mode 100644
index 12f11dc74..000000000
--- a/src/content/reference/react-dom/unmountComponentAtNode.md
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: unmountComponentAtNode
----
-
-<Deprecated>
-
-This API will be removed in a future major version of React.
-
-In React 18, `unmountComponentAtNode` was replaced by [`root.unmount()`](/reference/react-dom/client/createRoot#root-unmount).
-
-</Deprecated>
-
-<Intro>
-
-`unmountComponentAtNode` removes a mounted React component from the DOM.
-
-```js
-unmountComponentAtNode(domNode)
-```
-
-</Intro>
-
-<InlineToc />
-
----
-
-## Reference {/*reference*/}
-
-### `unmountComponentAtNode(domNode)` {/*unmountcomponentatnode*/}
-
-Call `unmountComponentAtNode` to remove a mounted React component from the DOM and clean up its event handlers and state.
-
-```js
-import { unmountComponentAtNode } from 'react-dom';
-
-const domNode = document.getElementById('root');
-render(<App />, domNode);
-
-unmountComponentAtNode(domNode);
-```
-
-[See more examples below.](#usage)
-
-#### Parameters {/*parameters*/}
-
-* `domNode`: A [DOM element.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React will remove a mounted React component from this element.
-
-#### Returns {/*returns*/}
-
-`unmountComponentAtNode` returns `true` if a component was unmounted and `false` otherwise.
-
----
-
-## Usage {/*usage*/}
-
-Call `unmountComponentAtNode` to remove a <CodeStep step={1}>mounted React component</CodeStep> from a <CodeStep step={2}>browser DOM node</CodeStep> and clean up its event handlers and state.
-
-```js [[1, 5, "<App />"], [2, 5, "rootNode"], [2, 8, "rootNode"]]
-import { render, unmountComponentAtNode } from 'react-dom';
-import App from './App.js';
-
-const rootNode = document.getElementById('root');
-render(<App />, rootNode);
-
-// ...
-unmountComponentAtNode(rootNode);
-```
-
-
-### Removing a React app from a DOM element {/*removing-a-react-app-from-a-dom-element*/}
-
-Occasionally, you may want to "sprinkle" React on an existing page, or a page that is not fully written in React. In those cases, you may need to "stop" the React app, by removing all of the UI, state, and listeners from the DOM node it was rendered to.
-
-In this example, clicking "Render React App" will render a React app. Click "Unmount React App" to destroy it:
-
-<Sandpack>
-
-```html index.html
-<!DOCTYPE html>
-<html>
-  <head><title>My app</title></head>
-  <body>
-    <button id='render'>Render React App</button>
-    <button id='unmount'>Unmount React App</button>
-    <!-- This is the React App node -->
-    <div id='root'></div>
-  </body>
-</html>
-```
-
-```js index.js active
-import './styles.css';
-import { render, unmountComponentAtNode } from 'react-dom';
-import App from './App.js';
-
-const domNode = document.getElementById('root');
-
-document.getElementById('render').addEventListener('click', () => {
-  render(<App />, domNode);
-});
-
-document.getElementById('unmount').addEventListener('click', () => {
-  unmountComponentAtNode(domNode);
-});
-```
-
-```js App.js
-export default function App() {
-  return <h1>Hello, world!</h1>;
-}
-```
-
-</Sandpack>
diff --git a/src/content/reference/react/Children.md b/src/content/reference/react/Children.md
index 3683cb7cc..81a28c5b3 100644
--- a/src/content/reference/react/Children.md
+++ b/src/content/reference/react/Children.md
@@ -33,7 +33,7 @@ const mappedChildren = Children.map(children, child =>
 
 Call `Children.count(children)` to count the number of children in the `children` data structure.
 
-```js RowList.js active
+```js src/RowList.js active
 import { Children } from 'react';
 
 function RowList({ children }) {
@@ -66,7 +66,7 @@ The number of nodes inside these `children`.
 
 Call `Children.forEach(children, fn, thisArg?)` to run some code for each child in the `children` data structure.
 
-```js RowList.js active
+```js src/RowList.js active
 import { Children } from 'react';
 
 function SeparatorList({ children }) {
@@ -100,7 +100,7 @@ function SeparatorList({ children }) {
 
 Call `Children.map(children, fn, thisArg?)` to map or transform each child in the `children` data structure.
 
-```js RowList.js active
+```js src/RowList.js active
 import { Children } from 'react';
 
 function RowList({ children }) {
@@ -169,7 +169,7 @@ Otherwise, throws an error.
 
 Call `Children.toArray(children)` to create an array out of the `children` data structure.
 
-```js ReversedList.js active
+```js src/ReversedList.js active
 import { Children } from 'react';
 
 export default function ReversedList({ children }) {
@@ -258,7 +258,7 @@ export default function App() {
 }
 ```
 
-```js RowList.js active
+```js src/RowList.js active
 import { Children } from 'react';
 
 export default function RowList({ children }) {
@@ -336,7 +336,7 @@ function MoreRows() {
 }
 ```
 
-```js RowList.js
+```js src/RowList.js
 import { Children } from 'react';
 
 export default function RowList({ children }) {
@@ -395,7 +395,7 @@ export default function App() {
 }
 ```
 
-```js SeparatorList.js active
+```js src/SeparatorList.js active
 import { Children } from 'react';
 
 export default function SeparatorList({ children }) {
@@ -439,7 +439,7 @@ export default function App() {
 }
 ```
 
-```js RowList.js active
+```js src/RowList.js active
 import { Children } from 'react';
 
 export default function RowList({ children }) {
@@ -510,7 +510,7 @@ export default function App() {
 }
 ```
 
-```js ReversedList.js active
+```js src/ReversedList.js active
 import { Children } from 'react';
 
 export default function ReversedList({ children }) {
@@ -572,7 +572,7 @@ export default function App() {
 }
 ```
 
-```js RowList.js
+```js src/RowList.js
 export function RowList({ children }) {
   return (
     <div className="RowList">
@@ -639,7 +639,7 @@ function MoreRows() {
 }
 ```
 
-```js RowList.js
+```js src/RowList.js
 export function RowList({ children }) {
   return (
     <div className="RowList">
@@ -698,7 +698,7 @@ export default function App() {
 }
 ```
 
-```js RowList.js
+```js src/RowList.js
 export function RowList({ rows }) {
   return (
     <div className="RowList">
@@ -761,7 +761,7 @@ export default function App() {
 }
 ```
 
-```js TabSwitcher.js
+```js src/TabSwitcher.js
 import { useState } from 'react';
 
 export default function TabSwitcher({ tabs }) {
@@ -817,7 +817,7 @@ export default function App() {
 }
 ```
 
-```js TabSwitcher.js
+```js src/TabSwitcher.js
 import { useState } from 'react';
 
 export default function TabSwitcher({ tabIds, getHeader, renderContent }) {
@@ -869,7 +869,7 @@ export default function App() {
 }
 ```
 
-```js RowList.js
+```js src/RowList.js
 import { Fragment } from 'react';
 
 export function RowList({ rowIds, renderRow }) {
diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md
index 2d49972d7..99fa17986 100644
--- a/src/content/reference/react/Component.md
+++ b/src/content/reference/react/Component.md
@@ -50,7 +50,7 @@ Only the `render` method is required, other methods are optional.
 
 ### `context` {/*context*/}
 
-The [context](/learn/passing-data-deeply-with-context) of a class component is available as `this.context`. It is only available if you specify *which* context you want to receive using [`static contextType`](#static-contexttype) (modern) or [`static contextTypes`](#static-contexttypes) (deprecated).
+The [context](/learn/passing-data-deeply-with-context) of a class component is available as `this.context`. It is only available if you specify *which* context you want to receive using [`static contextType`](#static-contexttype).
 
 A class component can only read one context at a time.
 
@@ -105,18 +105,6 @@ Reading `this.props` in class components is equivalent to [declaring props](/lea
 
 ---
 
-### `refs` {/*refs*/}
-
-<Deprecated>
-
-This API will be removed in a future major version of React. [Use `createRef` instead.](/reference/react/createRef)
-
-</Deprecated>
-
-Lets you access [legacy string refs](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs) for this component.
-
----
-
 ### `state` {/*state*/}
 
 The state of a class component is available as `this.state`. The `state` field must be an object. Do not mutate the state directly. If you wish to change the state, call `setState` with the new state.
@@ -494,18 +482,6 @@ Reading an external data source and forcing class components to re-render in res
 
 ---
 
-### `getChildContext()` {/*getchildcontext*/}
-
-<Deprecated>
-
-This API will be removed in a future major version of React. [Use `Context.Provider` instead.](/reference/react/createContext#provider)
-
-</Deprecated>
-
-Lets you specify the values for the [legacy context](https://reactjs.org/docs/legacy-context.html) is provided by this component.
-
----
-
 ### `getSnapshotBeforeUpdate(prevProps, prevState)` {/*getsnapshotbeforeupdate*/}
 
 If you implement `getSnapshotBeforeUpdate`, React will call it immediately before React updates the DOM. It enables your component to capture some information from the DOM (e.g. scroll position) before it is potentially changed. Any value returned by this lifecycle method will be passed as a parameter to [`componentDidUpdate`.](#componentdidupdate)
@@ -632,7 +608,7 @@ class Form extends Component {
     return (
       <>
         <input value={this.state.name} onChange={this.handleNameChange} />
-        <p>Hello, {this.state.name}.
+        <p>Hello, {this.state.name}.</p>
       </>
     );
   }
@@ -738,7 +714,7 @@ React calls `shouldComponentUpdate` before rendering when new props or state are
 
 - `nextProps`: The next props that the component is about to render with. Compare `nextProps` to [`this.props`](#props) to determine what changed.
 - `nextState`: The next state that the component is about to render with. Compare `nextState` to [`this.state`](#props) to determine what changed.
-- `nextContext`: The next context that the component is about to render with. Compare `nextContext` to [`this.context`](#context) to determine what changed. Only available if you specify [`static contextType`](#static-contexttype) (modern) or [`static contextTypes`](#static-contexttypes) (legacy).
+- `nextContext`: The next context that the component is about to render with. Compare `nextContext` to [`this.context`](#context) to determine what changed. Only available if you specify [`static contextType`](#static-contexttype).
 
 #### Returns {/*shouldcomponentupdate-returns*/}
 
@@ -813,7 +789,7 @@ If you define `UNSAFE_componentWillReceiveProps`, React will call it when the co
 #### Parameters {/*unsafe_componentwillreceiveprops-parameters*/}
 
 - `nextProps`: The next props that the component is about to receive from its parent component. Compare `nextProps` to [`this.props`](#props) to determine what changed.
-- `nextContext`: The next props that the component is about to receive from the closest provider. Compare `nextContext` to [`this.context`](#context) to determine what changed. Only available if you specify [`static contextType`](#static-contexttype) (modern) or [`static contextTypes`](#static-contexttypes) (legacy).
+- `nextContext`: The next context that the component is about to receive from the closest provider. Compare `nextContext` to [`this.context`](#context) to determine what changed. Only available if you specify [`static contextType`](#static-contexttype).
 
 #### Returns {/*unsafe_componentwillreceiveprops-returns*/}
 
@@ -878,30 +854,6 @@ There is no direct equivalent to `UNSAFE_componentWillUpdate` in function compon
 
 ---
 
-### `static childContextTypes` {/*static-childcontexttypes*/}
-
-<Deprecated>
-
-This API will be removed in a future major version of React. [Use `static contextType` instead.](#static-contexttype)
-
-</Deprecated>
-
-Lets you specify which [legacy context](https://reactjs.org/docs/legacy-context.html) is provided by this component.
-
----
-
-### `static contextTypes` {/*static-contexttypes*/}
-
-<Deprecated>
-
-This API will be removed in a future major version of React. [Use `static contextType` instead.](#static-contexttype)
-
-</Deprecated>
-
-Lets you specify which [legacy context](https://reactjs.org/docs/legacy-context.html) is consumed by this component.
-
----
-
 ### `static contextType` {/*static-contexttype*/}
 
 If you want to read [`this.context`](#context-instance-field) from your class component, you must specify which context it needs to read. The context you specify as the `static contextType` must be a value previously created by [`createContext`.](/reference/react/createContext)
@@ -976,34 +928,6 @@ Defining `defaultProps` in class components is similar to using [default values]
 
 ---
 
-### `static propTypes` {/*static-proptypes*/}
-
-You can define `static propTypes` together with the [`prop-types`](https://www.npmjs.com/package/prop-types) library to declare the types of the props accepted by your component. These types will be checked during rendering and in development only.
-
-```js
-import PropTypes from 'prop-types';
-
-class Greeting extends React.Component {
-  static propTypes = {
-    name: PropTypes.string
-  };
-
-  render() {
-    return (
-      <h1>Hello, {this.props.name}</h1>
-    );
-  }
-}
-```
-
-<Note>
-
-We recommend using [TypeScript](https://www.typescriptlang.org/) instead of checking prop types at runtime.
-
-</Note>
-
----
-
 ### `static getDerivedStateFromError(error)` {/*static-getderivedstatefromerror*/}
 
 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.
@@ -1221,7 +1145,7 @@ For example, this `ChatRoom` component keeps a chat connection synchronized with
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import ChatRoom from './ChatRoom.js';
 
@@ -1251,7 +1175,7 @@ export default function App() {
 }
 ```
 
-```js ChatRoom.js active
+```js src/ChatRoom.js active
 import { Component } from 'react';
 import { createConnection } from './chat.js';
 
@@ -1312,7 +1236,7 @@ export default class ChatRoom extends Component {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection(serverUrl, roomId) {
   // A real implementation would actually connect to the server
   return {
@@ -1601,7 +1525,7 @@ Suppose you're converting this `ChatRoom` class component with lifecycle methods
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import ChatRoom from './ChatRoom.js';
 
@@ -1631,7 +1555,7 @@ export default function App() {
 }
 ```
 
-```js ChatRoom.js active
+```js src/ChatRoom.js active
 import { Component } from 'react';
 import { createConnection } from './chat.js';
 
@@ -1692,7 +1616,7 @@ export default class ChatRoom extends Component {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection(serverUrl, roomId) {
   // A real implementation would actually connect to the server
   return {
@@ -1741,7 +1665,7 @@ This [`useEffect`](/reference/react/useEffect) call is equivalent to the logic i
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import ChatRoom from './ChatRoom.js';
 
@@ -1771,7 +1695,7 @@ export default function App() {
 }
 ```
 
-```js ChatRoom.js active
+```js src/ChatRoom.js active
 import { useState, useEffect } from 'react';
 import { createConnection } from './chat.js';
 
@@ -1801,7 +1725,7 @@ export default function ChatRoom({ roomId }) {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection(serverUrl, roomId) {
   // A real implementation would actually connect to the server
   return {
diff --git a/src/content/reference/react/Profiler.md b/src/content/reference/react/Profiler.md
index 8e149634a..188b2d1b2 100644
--- a/src/content/reference/react/Profiler.md
+++ b/src/content/reference/react/Profiler.md
@@ -54,11 +54,11 @@ function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime
 #### Parameters {/*onrender-parameters*/}
 
 * `id`: The string `id` prop of the `<Profiler>` tree that has just committed. This lets you identify which part of the tree was committed if you are using multiple profilers.
-* `phase`: `"mount"`, `"update"` or `"nested-update"`. This lets you know whether the tree has just been mounted for the first time or re-rendered due to a change in props, state, or hooks.
+* `phase`: `"mount"`, `"update"` or `"nested-update"`. This lets you know whether the tree has just been mounted for the first time or re-rendered due to a change in props, state, or Hooks.
 * `actualDuration`: The number of milliseconds spent rendering the `<Profiler>` and its descendants for the current update. This indicates how well the subtree makes use of memoization (e.g. [`memo`](/reference/react/memo) and [`useMemo`](/reference/react/useMemo)). Ideally this value should decrease significantly after the initial mount as many of the descendants will only need to re-render if their specific props change.
 * `baseDuration`: The number of milliseconds estimating how much time it would take to re-render the entire `<Profiler>` subtree without any optimizations. It is calculated by summing up the most recent render durations of each component in the tree. This value estimates a worst-case cost of rendering (e.g. the initial mount or a tree with no memoization). Compare `actualDuration` against it to see if memoization is working.
 * `startTime`: A numeric timestamp for when React began rendering the current update.
-* `endTime`: A numeric timestamp for when React committed the current update. This value is shared between all profilers in a commit, enabling them to be grouped if desirable.
+* `commitTime`: A numeric timestamp for when React committed the current update. This value is shared between all profilers in a commit, enabling them to be grouped if desirable.
 
 ---
 
diff --git a/src/content/reference/react/StrictMode.md b/src/content/reference/react/StrictMode.md
index b7ca2227c..5b62794bc 100644
--- a/src/content/reference/react/StrictMode.md
+++ b/src/content/reference/react/StrictMode.md
@@ -44,6 +44,7 @@ Strict Mode enables the following development-only behaviors:
 
 - Your components will [re-render an extra time](#fixing-bugs-found-by-double-rendering-in-development) to find bugs caused by impure rendering.
 - Your components will [re-run Effects an extra time](#fixing-bugs-found-by-re-running-effects-in-development) to find bugs caused by missing Effect cleanup.
+- Your components will [re-run refs callbacks an extra time](#fixing-bugs-found-by-re-running-ref-callbacks-in-development) to find bugs caused by missing ref cleanup.
 - Your components will [be checked for usage of deprecated APIs.](#fixing-deprecation-warnings-enabled-by-strict-mode)
 
 #### Props {/*props*/}
@@ -87,6 +88,7 @@ Strict Mode enables the following checks in development:
 
 - Your components will [re-render an extra time](#fixing-bugs-found-by-double-rendering-in-development) to find bugs caused by impure rendering.
 - Your components will [re-run Effects an extra time](#fixing-bugs-found-by-re-running-effects-in-development) to find bugs caused by missing Effect cleanup.
+- Your components will [re-run ref callbacks an extra time](#fixing-bugs-found-by-cleaning-up-and-re-attaching-dom-refs-in-development) to find bugs caused by missing ref cleanup.
 - Your components will [be checked for usage of deprecated APIs.](#fixing-deprecation-warnings-enabled-by-strict-mode)
 
 **All of these checks are development-only and do not impact the production build.**
@@ -95,7 +97,7 @@ Strict Mode enables the following checks in development:
 
 ---
 
-### Enabling strict mode for a part of the app {/*enabling-strict-mode-for-a-part-of-the-app*/}
+### Enabling Strict Mode for a part of the app {/*enabling-strict-mode-for-a-part-of-the-app*/}
 
 You can also enable Strict Mode for any part of your application:
 
@@ -140,7 +142,7 @@ This `StoryTray` component takes an array of `stories` and adds one last "Create
 
 <Sandpack>
 
-```js index.js
+```js src/index.js
 import { createRoot } from 'react-dom/client';
 import './styles.css';
 
@@ -150,7 +152,7 @@ const root = createRoot(document.getElementById("root"));
 root.render(<App />);
 ```
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import StoryTray from './StoryTray.js';
 
@@ -175,7 +177,7 @@ export default function App() {
 }
 ```
 
-```js StoryTray.js active
+```js src/StoryTray.js active
 export default function StoryTray({ stories }) {
   const items = stories;
   items.push({ id: 'create', label: 'Create Story' });
@@ -196,6 +198,9 @@ ul {
   margin: 0;
   list-style-type: none;
   height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 10px;
 }
 
 li {
@@ -203,7 +208,6 @@ li {
   border-radius: 6px;
   float: left;
   margin: 5px;
-  margin-bottom: 20px;
   padding: 5px;
   width: 70px;
   height: 100px;
@@ -218,7 +222,7 @@ This mistake will become more noticeable if the `StoryTray` component re-renders
 
 <Sandpack>
 
-```js index.js
+```js src/index.js
 import { createRoot } from 'react-dom/client';
 import './styles.css';
 
@@ -228,7 +232,7 @@ const root = createRoot(document.getElementById('root'));
 root.render(<App />);
 ```
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import StoryTray from './StoryTray.js';
 
@@ -253,7 +257,7 @@ export default function App() {
 }
 ```
 
-```js StoryTray.js active
+```js src/StoryTray.js active
 import { useState } from 'react';
 
 export default function StoryTray({ stories }) {
@@ -283,6 +287,9 @@ ul {
   margin: 0;
   list-style-type: none;
   height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 10px;
 }
 
 li {
@@ -290,7 +297,6 @@ li {
   border-radius: 6px;
   float: left;
   margin: 5px;
-  margin-bottom: 20px;
   padding: 5px;
   width: 70px;
   height: 100px;
@@ -316,7 +322,7 @@ This would [make the `StoryTray` function pure.](/learn/keeping-components-pure)
 
 <Sandpack>
 
-```js index.js
+```js src/index.js
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import './styles.css';
@@ -331,7 +337,7 @@ root.render(
 );
 ```
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import StoryTray from './StoryTray.js';
 
@@ -356,7 +362,7 @@ export default function App() {
 }
 ```
 
-```js StoryTray.js active
+```js src/StoryTray.js active
 export default function StoryTray({ stories }) {
   const items = stories;
   items.push({ id: 'create', label: 'Create Story' });
@@ -377,6 +383,9 @@ ul {
   margin: 0;
   list-style-type: none;
   height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 10px;
 }
 
 li {
@@ -384,7 +393,6 @@ li {
   border-radius: 6px;
   float: left;
   margin: 5px;
-  margin-bottom: 20px;
   padding: 5px;
   width: 70px;
   height: 100px;
@@ -397,7 +405,7 @@ li {
 
 <Sandpack>
 
-```js index.js
+```js src/index.js
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import './styles.css';
@@ -412,7 +420,7 @@ root.render(
 );
 ```
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import StoryTray from './StoryTray.js';
 
@@ -437,7 +445,7 @@ export default function App() {
 }
 ```
 
-```js StoryTray.js active
+```js src/StoryTray.js active
 import { useState } from 'react';
 
 export default function StoryTray({ stories }) {
@@ -467,6 +475,9 @@ ul {
   margin: 0;
   list-style-type: none;
   height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 10px;
 }
 
 li {
@@ -474,7 +485,6 @@ li {
   border-radius: 6px;
   float: left;
   margin: 5px;
-  margin-bottom: 20px;
   padding: 5px;
   width: 70px;
   height: 100px;
@@ -509,7 +519,7 @@ Consider this example that connects a component to a chat:
 
 <Sandpack>
 
-```js index.js
+```js src/index.js
 import { createRoot } from 'react-dom/client';
 import './styles.css';
 
@@ -535,7 +545,7 @@ export default function ChatRoom() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 let connections = 0;
 
 export function createConnection(serverUrl, roomId) {
@@ -568,7 +578,7 @@ To make the issue more obvious, let's implement a feature. In the example below,
 
 <Sandpack>
 
-```js index.js
+```js src/index.js
 import { createRoot } from 'react-dom/client';
 import './styles.css';
 
@@ -619,7 +629,7 @@ export default function App() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 let connections = 0;
 
 export function createConnection(serverUrl, roomId) {
@@ -662,7 +672,7 @@ Now that your Effect "cleans up" after itself and destroys the outdated connecti
 
 <Sandpack>
 
-```js index.js
+```js src/index.js
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import './styles.css';
@@ -693,7 +703,7 @@ export default function ChatRoom() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 let connections = 0;
 
 export function createConnection(serverUrl, roomId) {
@@ -726,7 +736,7 @@ Strict Mode lets you notice such mistakes early in the process. When you fix you
 
 <Sandpack>
 
-```js index.js
+```js src/index.js
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import './styles.css';
@@ -783,7 +793,7 @@ export default function App() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 let connections = 0;
 
 export function createConnection(serverUrl, roomId) {
@@ -817,14 +827,422 @@ Without Strict Mode, it was easy to miss that your Effect needed cleanup. By run
 [Read more about implementing Effect cleanup.](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development)
 
 ---
+### Fixing bugs found by re-running ref callbacks in development {/*fixing-bugs-found-by-re-running-ref-callbacks-in-development*/}
 
+Strict Mode can also help find bugs in [callbacks refs.](/learn/manipulating-the-dom-with-refs)
+
+Every callback `ref` has some setup code and may have some cleanup code. Normally, React calls setup when the element is *created* (is added to the DOM) and calls cleanup when the element is *removed* (is removed from the DOM).
+
+When Strict Mode is on, React will also run **one extra setup+cleanup cycle in development for every callback `ref`.** This may feel surprising, but it helps reveal subtle bugs that are hard to catch manually.
+
+Consider this example, which allows you to select an animal and then scroll to one of them. Notice when you switch from "Cats" to "Dogs", the console logs show that the number of animals in the list keeps growing, and the "Scroll to" buttons stop working:
+
+<Sandpack>
+
+```js src/index.js
+import { createRoot } from 'react-dom/client';
+import './styles.css';
+
+import App from './App';
+
+const root = createRoot(document.getElementById("root"));
+// ❌ Not using StrictMode.
+root.render(<App />);
+```
+
+```js src/App.js active
+import { useRef, useState } from "react";
+
+export default function AnimalFriends() {
+  const itemsRef = useRef([]);
+  const [animalList, setAnimalList] = useState(setupAnimalList);
+  const [animal, setAnimal] = useState('cat');
+
+  function scrollToAnimal(index) {
+    const list = itemsRef.current;
+    const {node} = list[index];
+    node.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "center",
+    });
+  }
+  
+  const animals = animalList.filter(a => a.type === animal)
+  
+  return (
+    <>
+      <nav>
+        <button onClick={() => setAnimal('cat')}>Cats</button>
+        <button onClick={() => setAnimal('dog')}>Dogs</button>
+      </nav>
+      <hr />
+      <nav>
+        <span>Scroll to:</span>{animals.map((animal, index) => (
+          <button key={animal.src} onClick={() => scrollToAnimal(index)}>
+            {index}
+          </button>
+        ))}
+      </nav>
+      <div>
+        <ul>
+          {animals.map((animal) => (
+              <li
+                key={animal.src}
+                ref={(node) => {
+                  const list = itemsRef.current;
+                  const item = {animal: animal, node}; 
+                  list.push(item);
+                  console.log(`✅ Adding animal to the map. Total animals: ${list.length}`);
+                  if (list.length > 10) {
+                    console.log('❌ Too many animals in the list!');
+                  }
+                  return () => {
+                    // 🚩 No cleanup, this is a bug!
+                  }
+                }}
+              >
+                <img src={animal.src} />
+              </li>
+            ))}
+          
+        </ul>
+      </div>
+    </>
+  );
+}
+
+function setupAnimalList() {
+  const animalList = [];
+  for (let i = 0; i < 10; i++) {
+    animalList.push({type: 'cat', src: "https://loremflickr.com/320/240/cat?lock=" + i});
+  }
+  for (let i = 0; i < 10; i++) {
+    animalList.push({type: 'dog', src: "https://loremflickr.com/320/240/dog?lock=" + i});
+  }
+
+  return animalList;
+}
+
+```
+
+```css
+div {
+  width: 100%;
+  overflow: hidden;
+}
+
+nav {
+  text-align: center;
+}
+
+button {
+  margin: .25rem;
+}
+
+ul,
+li {
+  list-style: none;
+  white-space: nowrap;
+}
+
+li {
+  display: inline;
+  padding: 0.5rem;
+}
+```
+
+</Sandpack>
+
+
+**This is a production bug!** Since the ref callback doesn't remove animals from the list in the cleanup, the list of animals keeps growing. This is a memory leak that can cause performance problems in a real app, and breaks the behavior of the app.
+
+The issue is the ref callback doesn't cleanup after itself:
+
+```js {6-8}
+<li
+  ref={node => {
+    const list = itemsRef.current;
+    const item = {animal, node};
+    list.push(item);
+    return () => {
+      // 🚩 No cleanup, this is a bug!
+    }
+  }}
+</li>
+```
+
+Now let's wrap the original (buggy) code in `<StrictMode>`:
+
+<Sandpack>
+
+```js src/index.js
+import { createRoot } from 'react-dom/client';
+import {StrictMode} from 'react';
+import './styles.css';
+
+import App from './App';
+
+const root = createRoot(document.getElementById("root"));
+// ✅ Using StrictMode.
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
+```
+
+```js src/App.js active
+import { useRef, useState } from "react";
+
+export default function AnimalFriends() {
+  const itemsRef = useRef([]);
+  const [animalList, setAnimalList] = useState(setupAnimalList);
+  const [animal, setAnimal] = useState('cat');
+
+  function scrollToAnimal(index) {
+    const list = itemsRef.current;
+    const {node} = list[index];
+    node.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "center",
+    });
+  }
+  
+  const animals = animalList.filter(a => a.type === animal)
+  
+  return (
+    <>
+      <nav>
+        <button onClick={() => setAnimal('cat')}>Cats</button>
+        <button onClick={() => setAnimal('dog')}>Dogs</button>
+      </nav>
+      <hr />
+      <nav>
+        <span>Scroll to:</span>{animals.map((animal, index) => (
+          <button key={animal.src} onClick={() => scrollToAnimal(index)}>
+            {index}
+          </button>
+        ))}
+      </nav>
+      <div>
+        <ul>
+          {animals.map((animal) => (
+              <li
+                key={animal.src}
+                ref={(node) => {
+                  const list = itemsRef.current;
+                  const item = {animal: animal, node} 
+                  list.push(item);
+                  console.log(`✅ Adding animal to the map. Total animals: ${list.length}`);
+                  if (list.length > 10) {
+                    console.log('❌ Too many animals in the list!');
+                  }
+                  return () => {
+                    // 🚩 No cleanup, this is a bug!
+                  }
+                }}
+              >
+                <img src={animal.src} />
+              </li>
+            ))}
+          
+        </ul>
+      </div>
+    </>
+  );
+}
+
+function setupAnimalList() {
+  const animalList = [];
+  for (let i = 0; i < 10; i++) {
+    animalList.push({type: 'cat', src: "https://loremflickr.com/320/240/cat?lock=" + i});
+  }
+  for (let i = 0; i < 10; i++) {
+    animalList.push({type: 'dog', src: "https://loremflickr.com/320/240/dog?lock=" + i});
+  }
+
+  return animalList;
+}
+
+```
+
+```css
+div {
+  width: 100%;
+  overflow: hidden;
+}
+
+nav {
+  text-align: center;
+}
+
+button {
+  margin: .25rem;
+}
+
+ul,
+li {
+  list-style: none;
+  white-space: nowrap;
+}
+
+li {
+  display: inline;
+  padding: 0.5rem;
+}
+```
+
+</Sandpack>
+
+**With Strict Mode, you immediately see that there is a problem**. Strict Mode runs an extra setup+cleanup cycle for every callback ref. This callback ref has no cleanup logic, so it adds refs but doesn't remove them. This is a hint that you're missing a cleanup function.
+
+Strict Mode lets you eagerly find mistakes in callback refs. When you fix your callback by adding a cleanup function in Strict Mode, you *also* fix many possible future production bugs like the "Scroll to" bug from before:
+
+<Sandpack>
+
+```js src/index.js
+import { createRoot } from 'react-dom/client';
+import {StrictMode} from 'react';
+import './styles.css';
+
+import App from './App';
+
+const root = createRoot(document.getElementById("root"));
+// ✅ Using StrictMode.
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
+```
+
+```js src/App.js active
+import { useRef, useState } from "react";
+
+export default function AnimalFriends() {
+  const itemsRef = useRef([]);
+  const [animalList, setAnimalList] = useState(setupAnimalList);
+  const [animal, setAnimal] = useState('cat');
+
+  function scrollToAnimal(index) {
+    const list = itemsRef.current;
+    const {node} = list[index];
+    node.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "center",
+    });
+  }
+  
+  const animals = animalList.filter(a => a.type === animal)
+  
+  return (
+    <>
+      <nav>
+        <button onClick={() => setAnimal('cat')}>Cats</button>
+        <button onClick={() => setAnimal('dog')}>Dogs</button>
+      </nav>
+      <hr />
+      <nav>
+        <span>Scroll to:</span>{animals.map((animal, index) => (
+          <button key={animal.src} onClick={() => scrollToAnimal(index)}>
+            {index}
+          </button>
+        ))}
+      </nav>
+      <div>
+        <ul>
+          {animals.map((animal) => (
+              <li
+                key={animal.src}
+                ref={(node) => {
+                  const list = itemsRef.current;
+                  const item = {animal, node};
+                  list.push({animal: animal, node});
+                  console.log(`✅ Adding animal to the map. Total animals: ${list.length}`);
+                  if (list.length > 10) {
+                    console.log('❌ Too many animals in the list!');
+                  }
+                  return () => {
+                    list.splice(list.indexOf(item));
+                    console.log(`❌ Removing animal from the map. Total animals: ${itemsRef.current.length}`);
+                  }
+                }}
+              >
+                <img src={animal.src} />
+              </li>
+            ))}
+          
+        </ul>
+      </div>
+    </>
+  );
+}
+
+function setupAnimalList() {
+  const animalList = [];
+  for (let i = 0; i < 10; i++) {
+    animalList.push({type: 'cat', src: "https://loremflickr.com/320/240/cat?lock=" + i});
+  }
+  for (let i = 0; i < 10; i++) {
+    animalList.push({type: 'dog', src: "https://loremflickr.com/320/240/dog?lock=" + i});
+  }
+
+  return animalList;
+}
+
+```
+
+```css
+div {
+  width: 100%;
+  overflow: hidden;
+}
+
+nav {
+  text-align: center;
+}
+
+button {
+  margin: .25rem;
+}
+
+ul,
+li {
+  list-style: none;
+  white-space: nowrap;
+}
+
+li {
+  display: inline;
+  padding: 0.5rem;
+}
+```
+
+</Sandpack>
+
+Now on inital mount in StrictMode, the ref callbacks are all setup, cleaned up, and setup again:
+
+```
+...
+✅ Adding animal to the map. Total animals: 10
+...
+❌ Removing animal from the map. Total animals: 0
+...
+✅ Adding animal to the map. Total animals: 10
+```
+
+**This is expected.** Strict Mode confirms that the ref callbacks are cleaned up correctly, so the size never grows above the expected amount. After the fix, there are no memory leaks, and all the features work as expected.
+
+Without Strict Mode, it was easy to miss the bug until you clicked around to app to notice broken features. Strict Mode made the bugs appear right away, before you push them to production.
+
+--- 
 ### Fixing deprecation warnings enabled by Strict Mode {/*fixing-deprecation-warnings-enabled-by-strict-mode*/}
 
 React warns if some component anywhere inside a `<StrictMode>` tree uses one of these deprecated APIs:
 
-* [`findDOMNode`](/reference/react-dom/findDOMNode). [See alternatives.](https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage)
-* `UNSAFE_` class lifecycle methods like [`UNSAFE_componentWillMount`](/reference/react/Component#unsafe_componentwillmount). [See alternatives.](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#migrating-from-legacy-lifecycles) 
-* Legacy context ([`childContextTypes`](/reference/react/Component#static-childcontexttypes), [`contextTypes`](/reference/react/Component#static-contexttypes), and [`getChildContext`](/reference/react/Component#getchildcontext)). [See alternatives.](/reference/react/createContext)
-* Legacy string refs ([`this.refs`](/reference/react/Component#refs)). [See alternatives.](https://reactjs.org/docs/strict-mode.html#warning-about-legacy-string-ref-api-usage)
+* `UNSAFE_` class lifecycle methods like [`UNSAFE_componentWillMount`](/reference/react/Component#unsafe_componentwillmount). [See alternatives.](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#migrating-from-legacy-lifecycles)
 
 These APIs are primarily used in older [class components](/reference/react/Component) so they rarely appear in modern apps.
diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index dd9312055..dc22c907a 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -54,22 +54,7 @@ In the example below, the `Albums` component *suspends* while fetching the list
 
 <Sandpack>
 
-```json package.json hidden
-{
-  "dependencies": {
-    "react": "experimental",
-    "react-dom": "experimental"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  }
-}
-```
-
-```js App.js hidden
+```js src/App.js hidden
 import { useState } from 'react';
 import ArtistPage from './ArtistPage.js';
 
@@ -94,7 +79,7 @@ export default function App() {
 }
 ```
 
-```js ArtistPage.js active
+```js src/ArtistPage.js active
 import { Suspense } from 'react';
 import Albums from './Albums.js';
 
@@ -114,15 +99,10 @@ function Loading() {
 }
 ```
 
-```js Albums.js hidden
+```js src/Albums.js
+import {use} from 'react';
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
-
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
-
 export default function Albums({ artistId }) {
   const albums = use(fetchData(`/${artistId}/albums`));
   return (
@@ -135,34 +115,9 @@ export default function Albums({ artistId }) {
     </ul>
   );
 }
-
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
-function use(promise) {
-  if (promise.status === 'fulfilled') {
-    return promise.value;
-  } else if (promise.status === 'rejected') {
-    throw promise.reason;
-  } else if (promise.status === 'pending') {
-    throw promise;
-  } else {
-    promise.status = 'pending';
-    promise.then(
-      result => {
-        promise.status = 'fulfilled';
-        promise.value = result;
-      },
-      reason => {
-        promise.status = 'rejected';
-        promise.reason = reason;
-      },      
-    );
-    throw promise;
-  }
-}
 ```
 
-```js data.js hidden
+```js src/data.js hidden
 // Note: the way you would do data fetching depends on
 // the framework that you use together with Suspense.
 // Normally, the caching logic would be inside a framework.
@@ -254,6 +209,7 @@ async function getAlbums() {
 
 - 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)
+- Reading the value of a cached Promise with [`use`](/reference/react/use)
 
 Suspense **does not** detect when data is fetched inside an Effect or event handler.
 
@@ -284,22 +240,7 @@ In the example below, both `Biography` and `Albums` fetch some data. However, be
 
 <Sandpack>
 
-```json package.json hidden
-{
-  "dependencies": {
-    "react": "experimental",
-    "react-dom": "experimental"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  }
-}
-```
-
-```js App.js hidden
+```js src/App.js hidden
 import { useState } from 'react';
 import ArtistPage from './ArtistPage.js';
 
@@ -324,7 +265,7 @@ export default function App() {
 }
 ```
 
-```js ArtistPage.js active
+```js src/ArtistPage.js active
 import { Suspense } from 'react';
 import Albums from './Albums.js';
 import Biography from './Biography.js';
@@ -349,7 +290,7 @@ function Loading() {
 }
 ```
 
-```js Panel.js
+```js src/Panel.js
 export default function Panel({ children }) {
   return (
     <section className="panel">
@@ -359,15 +300,10 @@ export default function Panel({ children }) {
 }
 ```
 
-```js Biography.js hidden
+```js src/Biography.js
+import {use} from 'react';
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
-
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
-
 export default function Biography({ artistId }) {
   const bio = use(fetchData(`/${artistId}/bio`));
   return (
@@ -376,42 +312,12 @@ export default function Biography({ artistId }) {
     </section>
   );
 }
-
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
-function use(promise) {
-  if (promise.status === 'fulfilled') {
-    return promise.value;
-  } else if (promise.status === 'rejected') {
-    throw promise.reason;
-  } else if (promise.status === 'pending') {
-    throw promise;
-  } else {
-    promise.status = 'pending';
-    promise.then(
-      result => {
-        promise.status = 'fulfilled';
-        promise.value = result;
-      },
-      reason => {
-        promise.status = 'rejected';
-        promise.reason = reason;
-      },      
-    );
-    throw promise;
-  }
-}
 ```
 
-```js Albums.js hidden
+```js src/Albums.js
+import {use} from 'react';
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
-
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
-
 export default function Albums({ artistId }) {
   const albums = use(fetchData(`/${artistId}/albums`));
   return (
@@ -424,34 +330,9 @@ export default function Albums({ artistId }) {
     </ul>
   );
 }
-
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
-function use(promise) {
-  if (promise.status === 'fulfilled') {
-    return promise.value;
-  } else if (promise.status === 'rejected') {
-    throw promise.reason;
-  } else if (promise.status === 'pending') {
-    throw promise;
-  } else {
-    promise.status = 'pending';
-    promise.then(
-      result => {
-        promise.status = 'fulfilled';
-        promise.value = result;
-      },
-      reason => {
-        promise.status = 'rejected';
-        promise.reason = reason;
-      },      
-    );
-    throw promise;
-  }
-}
 ```
 
-```js data.js hidden
+```js src/data.js hidden
 // Note: the way you would do data fetching depends on
 // the framework that you use together with Suspense.
 // Normally, the caching logic would be inside a framework.
@@ -603,28 +484,13 @@ With this change, displaying the `Biography` doesn't need to "wait" for the `Alb
 The sequence will be:
 
 1. If `Biography` hasn't loaded yet, `BigSpinner` is shown in place of the entire content area.
-1. Once `Biography` finishes loading, `BigSpinner` is replaced by the content.
-1. If `Albums` hasn't loaded yet, `AlbumsGlimmer` is shown in place of `Albums` and its parent `Panel`.
-1. Finally, once `Albums` finishes loading, it replaces `AlbumsGlimmer`.
+2. Once `Biography` finishes loading, `BigSpinner` is replaced by the content.
+3. If `Albums` hasn't loaded yet, `AlbumsGlimmer` is shown in place of `Albums` and its parent `Panel`.
+4. Finally, once `Albums` finishes loading, it replaces `AlbumsGlimmer`.
 
 <Sandpack>
 
-```json package.json hidden
-{
-  "dependencies": {
-    "react": "experimental",
-    "react-dom": "experimental"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  }
-}
-```
-
-```js App.js hidden
+```js src/App.js hidden
 import { useState } from 'react';
 import ArtistPage from './ArtistPage.js';
 
@@ -649,7 +515,7 @@ export default function App() {
 }
 ```
 
-```js ArtistPage.js active
+```js src/ArtistPage.js active
 import { Suspense } from 'react';
 import Albums from './Albums.js';
 import Biography from './Biography.js';
@@ -686,7 +552,7 @@ function AlbumsGlimmer() {
 }
 ```
 
-```js Panel.js
+```js src/Panel.js
 export default function Panel({ children }) {
   return (
     <section className="panel">
@@ -696,15 +562,10 @@ export default function Panel({ children }) {
 }
 ```
 
-```js Biography.js hidden
+```js src/Biography.js
+import {use} from 'react';
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
-
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
-
 export default function Biography({ artistId }) {
   const bio = use(fetchData(`/${artistId}/bio`));
   return (
@@ -713,42 +574,12 @@ export default function Biography({ artistId }) {
     </section>
   );
 }
-
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
-function use(promise) {
-  if (promise.status === 'fulfilled') {
-    return promise.value;
-  } else if (promise.status === 'rejected') {
-    throw promise.reason;
-  } else if (promise.status === 'pending') {
-    throw promise;
-  } else {
-    promise.status = 'pending';
-    promise.then(
-      result => {
-        promise.status = 'fulfilled';
-        promise.value = result;
-      },
-      reason => {
-        promise.status = 'rejected';
-        promise.reason = reason;
-      },      
-    );
-    throw promise;
-  }
-}
 ```
 
-```js Albums.js hidden
+```js src/Albums.js
+import {use} from 'react';
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
-
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
-
 export default function Albums({ artistId }) {
   const albums = use(fetchData(`/${artistId}/albums`));
   return (
@@ -761,34 +592,9 @@ export default function Albums({ artistId }) {
     </ul>
   );
 }
-
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
-function use(promise) {
-  if (promise.status === 'fulfilled') {
-    return promise.value;
-  } else if (promise.status === 'rejected') {
-    throw promise.reason;
-  } else if (promise.status === 'pending') {
-    throw promise;
-  } else {
-    promise.status = 'pending';
-    promise.then(
-      result => {
-        promise.status = 'fulfilled';
-        promise.value = result;
-      },
-      reason => {
-        promise.status = 'rejected';
-        promise.reason = reason;
-      },      
-    );
-    throw promise;
-  }
-}
 ```
 
-```js data.js hidden
+```js src/data.js hidden
 // Note: the way you would do data fetching depends on
 // the framework that you use together with Suspense.
 // Normally, the caching logic would be inside a framework.
@@ -928,22 +734,7 @@ In this example, the `SearchResults` component suspends while fetching the searc
 
 <Sandpack>
 
-```json package.json hidden
-{
-  "dependencies": {
-    "react": "experimental",
-    "react-dom": "experimental"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  }
-}
-```
-
-```js App.js
+```js src/App.js
 import { Suspense, useState } from 'react';
 import SearchResults from './SearchResults.js';
 
@@ -963,15 +754,10 @@ export default function App() {
 }
 ```
 
-```js SearchResults.js hidden
+```js src/SearchResults.js
+import {use} from 'react';
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
-
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
-
 export default function SearchResults({ query }) {
   if (query === '') {
     return null;
@@ -990,34 +776,9 @@ export default function SearchResults({ query }) {
     </ul>
   );
 }
-
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
-function use(promise) {
-  if (promise.status === 'fulfilled') {
-    return promise.value;
-  } else if (promise.status === 'rejected') {
-    throw promise.reason;
-  } else if (promise.status === 'pending') {
-    throw promise;
-  } else {
-    promise.status = 'pending';
-    promise.then(
-      result => {
-        promise.status = 'fulfilled';
-        promise.value = result;
-      },
-      reason => {
-        promise.status = 'rejected';
-        promise.reason = reason;
-      },      
-    );
-    throw promise;
-  }
-}
 ```
 
-```js data.js hidden
+```js src/data.js hidden
 // Note: the way you would do data fetching depends on
 // the framework that you use together with Suspense.
 // Normally, the caching logic would be inside a framework.
@@ -1153,22 +914,7 @@ Enter `"a"` in the example below, wait for the results to load, and then edit th
 
 <Sandpack>
 
-```json package.json hidden
-{
-  "dependencies": {
-    "react": "experimental",
-    "react-dom": "experimental"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  }
-}
-```
-
-```js App.js
+```js src/App.js
 import { Suspense, useState, useDeferredValue } from 'react';
 import SearchResults from './SearchResults.js';
 
@@ -1192,15 +938,10 @@ export default function App() {
 }
 ```
 
-```js SearchResults.js hidden
+```js src/SearchResults.js hidden
+import {use} from 'react';
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
-
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
-
 export default function SearchResults({ query }) {
   if (query === '') {
     return null;
@@ -1219,34 +960,9 @@ export default function SearchResults({ query }) {
     </ul>
   );
 }
-
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
-function use(promise) {
-  if (promise.status === 'fulfilled') {
-    return promise.value;
-  } else if (promise.status === 'rejected') {
-    throw promise.reason;
-  } else if (promise.status === 'pending') {
-    throw promise;
-  } else {
-    promise.status = 'pending';
-    promise.then(
-      result => {
-        promise.status = 'fulfilled';
-        promise.value = result;
-      },
-      reason => {
-        promise.status = 'rejected';
-        promise.reason = reason;
-      },      
-    );
-    throw promise;
-  }
-}
 ```
 
-```js data.js hidden
+```js src/data.js hidden
 // Note: the way you would do data fetching depends on
 // the framework that you use together with Suspense.
 // Normally, the caching logic would be inside a framework.
@@ -1347,7 +1063,7 @@ input { margin: 10px; }
 
 <Note>
 
-Both deferred values and [transitions](#preventing-already-revealed-content-from-hiding) let you avoid showing Suspense fallback in favor of inline indicators. Transitions mark the whole update as non-urgent so they are typically used by frameworks and router libraries for navigation. Deferred values, on the other hand, are mostly useful in application code where you want to mark a part of UI as non-urgent and let it "lag behind" the rest of the UI.
+Both deferred values and [Transitions](#preventing-already-revealed-content-from-hiding) let you avoid showing Suspense fallback in favor of inline indicators. Transitions mark the whole update as non-urgent so they are typically used by frameworks and router libraries for navigation. Deferred values, on the other hand, are mostly useful in application code where you want to mark a part of UI as non-urgent and let it "lag behind" the rest of the UI.
 
 </Note>
 
@@ -1359,22 +1075,7 @@ When a component suspends, the closest parent Suspense boundary switches to show
 
 <Sandpack>
 
-```json package.json hidden
-{
-  "dependencies": {
-    "react": "experimental",
-    "react-dom": "experimental"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  }
-}
-```
-
-```js App.js
+```js src/App.js
 import { Suspense, useState } from 'react';
 import IndexPage from './IndexPage.js';
 import ArtistPage from './ArtistPage.js';
@@ -1422,7 +1123,7 @@ function BigSpinner() {
 }
 ```
 
-```js Layout.js
+```js src/Layout.js
 export default function Layout({ children }) {
   return (
     <div className="layout">
@@ -1437,7 +1138,7 @@ export default function Layout({ children }) {
 }
 ```
 
-```js IndexPage.js
+```js src/IndexPage.js
 export default function IndexPage({ navigate }) {
   return (
     <button onClick={() => navigate('/the-beatles')}>
@@ -1447,7 +1148,7 @@ export default function IndexPage({ navigate }) {
 }
 ```
 
-```js ArtistPage.js
+```js src/ArtistPage.js
 import { Suspense } from 'react';
 import Albums from './Albums.js';
 import Biography from './Biography.js';
@@ -1478,15 +1179,10 @@ function AlbumsGlimmer() {
 }
 ```
 
-```js Albums.js hidden
+```js src/Albums.js
+import {use} from 'react';
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
-
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
-
 export default function Albums({ artistId }) {
   const albums = use(fetchData(`/${artistId}/albums`));
   return (
@@ -1499,42 +1195,12 @@ export default function Albums({ artistId }) {
     </ul>
   );
 }
-
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
-function use(promise) {
-  if (promise.status === 'fulfilled') {
-    return promise.value;
-  } else if (promise.status === 'rejected') {
-    throw promise.reason;
-  } else if (promise.status === 'pending') {
-    throw promise;
-  } else {
-    promise.status = 'pending';
-    promise.then(
-      result => {
-        promise.status = 'fulfilled';
-        promise.value = result;
-      },
-      reason => {
-        promise.status = 'rejected';
-        promise.reason = reason;
-      },      
-    );
-    throw promise;
-  }
-}
 ```
 
-```js Biography.js hidden
+```js src/Biography.js
+import {use} from 'react';
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
-
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
-
 export default function Biography({ artistId }) {
   const bio = use(fetchData(`/${artistId}/bio`));
   return (
@@ -1543,34 +1209,9 @@ export default function Biography({ artistId }) {
     </section>
   );
 }
-
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
-function use(promise) {
-  if (promise.status === 'fulfilled') {
-    return promise.value;
-  } else if (promise.status === 'rejected') {
-    throw promise.reason;
-  } else if (promise.status === 'pending') {
-    throw promise;
-  } else {
-    promise.status = 'pending';
-    promise.then(
-      result => {
-        promise.status = 'fulfilled';
-        promise.value = result;
-      },
-      reason => {
-        promise.status = 'rejected';
-        promise.reason = reason;
-      },      
-    );
-    throw promise;
-  }
-}
 ```
 
-```js Panel.js hidden
+```js src/Panel.js
 export default function Panel({ children }) {
   return (
     <section className="panel">
@@ -1580,7 +1221,7 @@ export default function Panel({ children }) {
 }
 ```
 
-```js data.js hidden
+```js src/data.js hidden
 // Note: the way you would do data fetching depends on
 // the framework that you use together with Suspense.
 // Normally, the caching logic would be inside a framework.
@@ -1726,7 +1367,7 @@ main {
 
 When you pressed the button, the `Router` component rendered `ArtistPage` instead of `IndexPage`. A component inside `ArtistPage` suspended, so the closest Suspense boundary started showing the fallback. The closest Suspense boundary was near the root, so the whole site layout got replaced by `BigSpinner`.
 
-To prevent this, you can mark the navigation state update as a *transition* with [`startTransition`:](/reference/react/startTransition)
+To prevent this, you can mark the navigation state update as a *Transition* with [`startTransition`:](/reference/react/startTransition)
 
 ```js {5,7}
 function Router() {
@@ -1744,22 +1385,7 @@ This tells React that the state transition is not urgent, and it's better to kee
 
 <Sandpack>
 
-```json package.json hidden
-{
-  "dependencies": {
-    "react": "experimental",
-    "react-dom": "experimental"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  }
-}
-```
-
-```js App.js
+```js src/App.js
 import { Suspense, startTransition, useState } from 'react';
 import IndexPage from './IndexPage.js';
 import ArtistPage from './ArtistPage.js';
@@ -1809,7 +1435,7 @@ function BigSpinner() {
 }
 ```
 
-```js Layout.js
+```js src/Layout.js
 export default function Layout({ children }) {
   return (
     <div className="layout">
@@ -1824,7 +1450,7 @@ export default function Layout({ children }) {
 }
 ```
 
-```js IndexPage.js
+```js src/IndexPage.js
 export default function IndexPage({ navigate }) {
   return (
     <button onClick={() => navigate('/the-beatles')}>
@@ -1834,7 +1460,7 @@ export default function IndexPage({ navigate }) {
 }
 ```
 
-```js ArtistPage.js
+```js src/ArtistPage.js
 import { Suspense } from 'react';
 import Albums from './Albums.js';
 import Biography from './Biography.js';
@@ -1865,15 +1491,10 @@ function AlbumsGlimmer() {
 }
 ```
 
-```js Albums.js hidden
+```js src/Albums.js
+import {use} from 'react';
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
-
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
-
 export default function Albums({ artistId }) {
   const albums = use(fetchData(`/${artistId}/albums`));
   return (
@@ -1886,42 +1507,12 @@ export default function Albums({ artistId }) {
     </ul>
   );
 }
-
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
-function use(promise) {
-  if (promise.status === 'fulfilled') {
-    return promise.value;
-  } else if (promise.status === 'rejected') {
-    throw promise.reason;
-  } else if (promise.status === 'pending') {
-    throw promise;
-  } else {
-    promise.status = 'pending';
-    promise.then(
-      result => {
-        promise.status = 'fulfilled';
-        promise.value = result;
-      },
-      reason => {
-        promise.status = 'rejected';
-        promise.reason = reason;
-      },      
-    );
-    throw promise;
-  }
-}
 ```
 
-```js Biography.js hidden
+```js src/Biography.js
+import {use} from 'react';
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
-
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
-
 export default function Biography({ artistId }) {
   const bio = use(fetchData(`/${artistId}/bio`));
   return (
@@ -1930,34 +1521,9 @@ export default function Biography({ artistId }) {
     </section>
   );
 }
-
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
-function use(promise) {
-  if (promise.status === 'fulfilled') {
-    return promise.value;
-  } else if (promise.status === 'rejected') {
-    throw promise.reason;
-  } else if (promise.status === 'pending') {
-    throw promise;
-  } else {
-    promise.status = 'pending';
-    promise.then(
-      result => {
-        promise.status = 'fulfilled';
-        promise.value = result;
-      },
-      reason => {
-        promise.status = 'rejected';
-        promise.reason = reason;
-      },      
-    );
-    throw promise;
-  }
-}
 ```
 
-```js Panel.js hidden
+```js src/Panel.js
 export default function Panel({ children }) {
   return (
     <section className="panel">
@@ -1967,7 +1533,7 @@ export default function Panel({ children }) {
 }
 ```
 
-```js data.js hidden
+```js src/data.js hidden
 // Note: the way you would do data fetching depends on
 // the framework that you use together with Suspense.
 // Normally, the caching logic would be inside a framework.
@@ -2111,38 +1677,23 @@ main {
 
 </Sandpack>
 
-A transition doesn't wait for *all* content to load. It only waits long enough to avoid hiding already revealed content. For example, the website `Layout` was already revealed, so it would be bad to hide it behind a loading spinner. However, the nested `Suspense` boundary around `Albums` is new, so the transition doesn't wait for it.
+A Transition doesn't wait for *all* content to load. It only waits long enough to avoid hiding already revealed content. For example, the website `Layout` was already revealed, so it would be bad to hide it behind a loading spinner. However, the nested `Suspense` boundary around `Albums` is new, so the Transition doesn't wait for it.
 
 <Note>
 
-Suspense-enabled routers are expected to wrap the navigation updates into transitions by default.
+Suspense-enabled routers are expected to wrap the navigation updates into Transitions by default.
 
 </Note>
 
 ---
 
-### Indicating that a transition is happening {/*indicating-that-a-transition-is-happening*/}
+### Indicating that a Transition is happening {/*indicating-that-a-transition-is-happening*/}
 
-In the above example, once you click the button, there is no visual indication that a navigation is in progress. To add an indicator, you can replace [`startTransition`](/reference/react/startTransition) with [`useTransition`](/reference/react/useTransition) which gives you a boolean `isPending` value. In the example below, it's used to change the website header styling while a transition is happening:
+In the above example, once you click the button, there is no visual indication that a navigation is in progress. To add an indicator, you can replace [`startTransition`](/reference/react/startTransition) with [`useTransition`](/reference/react/useTransition) which gives you a boolean `isPending` value. In the example below, it's used to change the website header styling while a Transition is happening:
 
 <Sandpack>
 
-```json package.json hidden
-{
-  "dependencies": {
-    "react": "experimental",
-    "react-dom": "experimental"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  }
-}
-```
-
-```js App.js
+```js src/App.js
 import { Suspense, useState, useTransition } from 'react';
 import IndexPage from './IndexPage.js';
 import ArtistPage from './ArtistPage.js';
@@ -2193,7 +1744,7 @@ function BigSpinner() {
 }
 ```
 
-```js Layout.js
+```js src/Layout.js
 export default function Layout({ children, isPending }) {
   return (
     <div className="layout">
@@ -2210,7 +1761,7 @@ export default function Layout({ children, isPending }) {
 }
 ```
 
-```js IndexPage.js
+```js src/IndexPage.js
 export default function IndexPage({ navigate }) {
   return (
     <button onClick={() => navigate('/the-beatles')}>
@@ -2220,7 +1771,7 @@ export default function IndexPage({ navigate }) {
 }
 ```
 
-```js ArtistPage.js
+```js src/ArtistPage.js
 import { Suspense } from 'react';
 import Albums from './Albums.js';
 import Biography from './Biography.js';
@@ -2251,15 +1802,10 @@ function AlbumsGlimmer() {
 }
 ```
 
-```js Albums.js hidden
+```js src/Albums.js
+import {use} from 'react';
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
-
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
-
 export default function Albums({ artistId }) {
   const albums = use(fetchData(`/${artistId}/albums`));
   return (
@@ -2272,42 +1818,12 @@ export default function Albums({ artistId }) {
     </ul>
   );
 }
-
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
-function use(promise) {
-  if (promise.status === 'fulfilled') {
-    return promise.value;
-  } else if (promise.status === 'rejected') {
-    throw promise.reason;
-  } else if (promise.status === 'pending') {
-    throw promise;
-  } else {
-    promise.status = 'pending';
-    promise.then(
-      result => {
-        promise.status = 'fulfilled';
-        promise.value = result;
-      },
-      reason => {
-        promise.status = 'rejected';
-        promise.reason = reason;
-      },      
-    );
-    throw promise;
-  }
-}
 ```
 
-```js Biography.js hidden
+```js src/Biography.js
+import {use} from 'react';
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
-
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
-
 export default function Biography({ artistId }) {
   const bio = use(fetchData(`/${artistId}/bio`));
   return (
@@ -2316,34 +1832,9 @@ export default function Biography({ artistId }) {
     </section>
   );
 }
-
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
-function use(promise) {
-  if (promise.status === 'fulfilled') {
-    return promise.value;
-  } else if (promise.status === 'rejected') {
-    throw promise.reason;
-  } else if (promise.status === 'pending') {
-    throw promise;
-  } else {
-    promise.status = 'pending';
-    promise.then(
-      result => {
-        promise.status = 'fulfilled';
-        promise.value = result;
-      },
-      reason => {
-        promise.status = 'rejected';
-        promise.reason = reason;
-      },      
-    );
-    throw promise;
-  }
-}
 ```
 
-```js Panel.js hidden
+```js src/Panel.js
 export default function Panel({ children }) {
   return (
     <section className="panel">
@@ -2353,7 +1844,7 @@ export default function Panel({ children }) {
 }
 ```
 
-```js data.js hidden
+```js src/data.js hidden
 // Note: the way you would do data fetching depends on
 // the framework that you use together with Suspense.
 // Normally, the caching logic would be inside a framework.
@@ -2501,13 +1992,13 @@ main {
 
 ### Resetting Suspense boundaries on navigation {/*resetting-suspense-boundaries-on-navigation*/}
 
-During a transition, React will avoid hiding already revealed content. However, if you navigate to a route with different parameters, you might want to tell React it is *different* content. You can express this with a `key`:
+During a Transition, React will avoid hiding already revealed content. However, if you navigate to a route with different parameters, you might want to tell React it is *different* content. You can express this with a `key`:
 
 ```js
 <ProfilePage key={queryParams.id} />
 ```
 
-Imagine you're navigating within a user's profile page, and something suspends. If that update is wrapped in a transition, it will not trigger the fallback for already visible content. That's the expected behavior.
+Imagine you're navigating within a user's profile page, and something suspends. If that update is wrapped in a Transition, it will not trigger the fallback for already visible content. That's the expected behavior.
 
 However, now imagine you're navigating between two different user profiles. In that case, it makes sense to show the fallback. For example, one user's timeline is *different content* from another user's timeline. By specifying a `key`, you ensure that React treats different users' profiles as different components, and resets the Suspense boundaries during navigation. Suspense-integrated routers should do this automatically.
 
@@ -2544,7 +2035,7 @@ The server HTML will include the loading indicator. It will be replaced by the `
 
 Replacing visible UI with a fallback creates a jarring user experience. This can happen when an update causes a component to suspend, and the nearest Suspense boundary is already showing content to the user.
 
-To prevent this from happening, [mark the update as non-urgent using `startTransition`](#preventing-already-revealed-content-from-hiding). During a transition, React will wait until enough data has loaded to prevent an unwanted fallback from appearing:
+To prevent this from happening, [mark the update as non-urgent using `startTransition`](#preventing-already-revealed-content-from-hiding). During a Transition, React will wait until enough data has loaded to prevent an unwanted fallback from appearing:
 
 ```js {2-3,5}
 function handleNextPageClick() {
diff --git a/src/content/reference/react/act.md b/src/content/reference/react/act.md
new file mode 100644
index 000000000..c01f3cd69
--- /dev/null
+++ b/src/content/reference/react/act.md
@@ -0,0 +1,177 @@
+---
+title: act
+---
+
+<Intro>
+
+`act` is a test helper to apply pending React updates before making assertions.
+
+```js
+await act(async actFn)
+```
+
+</Intro>
+
+To prepare a component for assertions, wrap the code rendering it and performing updates inside an `await act()` call. This makes your test run closer to how React works in the browser.
+
+<Note>
+You might find using `act()` directly a bit too verbose. To avoid some of the boilerplate, you could use a library like [React Testing Library](https://testing-library.com/docs/react-testing-library/intro), whose helpers are wrapped with `act()`.
+</Note>
+
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `await act(async actFn)` {/*await-act-async-actfn*/}
+
+When writing UI tests, tasks like rendering, user events, or data fetching can be considered as “units” of interaction with a user interface. React provides a helper called `act()` that makes sure all updates related to these “units” have been processed and applied to the DOM before you make any assertions.
+
+The name `act` comes from the [Arrange-Act-Assert](https://wiki.c2.com/?ArrangeActAssert) pattern.
+
+```js {2,4}
+it ('renders with button disabled', async () => {
+  await act(async () => {
+    root.render(<TestComponent />)
+  });
+  expect(container.querySelector('button')).toBeDisabled();
+});
+```
+
+<Note>
+
+We recommend using `act` with `await` and an `async` function. Although the sync version works in many cases, it doesn't work in all cases and due to the way React schedules updates internally, it's difficult to predict when you can use the sync version.
+
+We will deprecate and remove the sync version in the future.
+
+</Note>
+
+#### Parameters {/*parameters*/}
+
+* `async actFn`: An async function wrapping renders or interactions for components being tested. Any updates triggered within the `actFn`, are added to an internal act queue, which are then flushed together to process and apply any changes to the DOM. Since it is async, React will also run any code that crosses an async boundary, and flush any updates scheduled.
+
+#### Returns {/*returns*/}
+
+`act` does not return anything.
+
+## Usage {/*usage*/}
+
+When testing a component, you can use `act` to make assertions about its output.
+
+For example, let’s say we have this `Counter` component, the usage examples below show how to test it:
+
+```js
+function Counter() {
+  const [count, setCount] = useState(0);
+  const handleClick = () => {
+    setCount(prev => prev + 1);
+  }
+
+  useEffect(() => {
+    document.title = `You clicked ${this.state.count} times`;
+  }, [count]);
+
+  return (
+    <div>
+      <p>You clicked {this.state.count} times</p>
+      <button onClick={this.handleClick}>
+        Click me
+      </button>
+    </div>
+  )
+}
+```
+
+### Rendering components in tests {/*rendering-components-in-tests*/}
+
+To test the render output of a component, wrap the render inside `act()`:
+
+```js  {10,12}
+import {act} from 'react';
+import ReactDOMClient from 'react-dom/client';
+import Counter from './Counter';
+
+it('can render and update a counter', async () => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  
+  // ✅ Render the component inside act().
+  await act(() => {
+    ReactDOMClient.createRoot(container).render(<Counter />);
+  });
+  
+  const button = container.querySelector('button');
+  const label = container.querySelector('p');
+  expect(label.textContent).toBe('You clicked 0 times');
+  expect(document.title).toBe('You clicked 0 times');
+});
+```
+
+Here, we create a container, append it to the document, and render the `Counter` component inside `act()`. This ensures that the component is rendered and its effects are applied before making assertions.
+
+Using `act` ensures that all updates have been applied before we make assertions.
+
+### Dispatching events in tests {/*dispatching-events-in-tests*/}
+
+To test events, wrap the event dispatch inside `act()`:
+
+```js {14,16}
+import {act} from 'react';
+import ReactDOMClient from 'react-dom/client';
+import Counter from './Counter';
+
+it.only('can render and update a counter', async () => {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  
+  await act( async () => {
+    ReactDOMClient.createRoot(container).render(<Counter />);
+  });
+  
+  // ✅ Dispatch the event inside act().
+  await act(async () => {
+    button.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+  });
+
+  const button = container.querySelector('button');
+  const label = container.querySelector('p');
+  expect(label.textContent).toBe('You clicked 1 times');
+  expect(document.title).toBe('You clicked 1 times');
+});
+```
+
+Here, we render the component with `act`, and then dispatch the event inside another `act()`. This ensures that all updates from the event are applied before making assertions.
+
+<Pitfall>
+
+Don’t forget that dispatching DOM events only works when the DOM container is added to the document. You can use a library like [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) to reduce the boilerplate code.
+
+</Pitfall>
+
+## Troubleshooting {/*troubleshooting*/}
+
+### I'm getting an error: "The current testing environment is not configured to support act"(...)" {/*error-the-current-testing-environment-is-not-configured-to-support-act*/}
+
+Using `act` requires setting `global.IS_REACT_ACT_ENVIRONMENT=true` in your test environment. This is to ensure that `act` is only used in the correct environment.
+
+If you don't set the global, you will see an error like this:
+
+<ConsoleBlock level="error">
+
+Warning: The current testing environment is not configured to support act(...)
+
+</ConsoleBlock>
+
+To fix, add this to your global setup file for React tests:
+
+```js
+global.IS_REACT_ACT_ENVIRONMENT=true
+```
+
+<Note>
+
+In testing frameworks like [React Testing Library](https://testing-library.com/docs/react-testing-library/intro), `IS_REACT_ACT_ENVIRONMENT` is already set for you.
+
+</Note>
diff --git a/src/content/reference/react/apis.md b/src/content/reference/react/apis.md
index 9c1437870..cbab4a0e6 100644
--- a/src/content/reference/react/apis.md
+++ b/src/content/reference/react/apis.md
@@ -15,3 +15,21 @@ In addition to [Hooks](/reference/react) and [Components](/reference/react/compo
 * [`lazy`](/reference/react/lazy) lets you defer loading a component's code until it's rendered for the first time.
 * [`memo`](/reference/react/memo) lets your component skip re-renders with same props. Used with [`useMemo`](/reference/react/useMemo) and [`useCallback`.](/reference/react/useCallback)
 * [`startTransition`](/reference/react/startTransition) lets you mark a state update as non-urgent. Similar to [`useTransition`.](/reference/react/useTransition)
+* [`act`](/reference/react/act) lets you wrap renders and interactions in tests to ensure updates have processed before making assertions.
+
+---
+
+## Resource APIs {/*resource-apis*/}
+
+*Resources* can be accessed by a component without having them as part of their state. For example, a component can read a message from a Promise or read styling information from a context.
+
+To read a value from a resource, use this API:
+
+* [`use`](/reference/react/use) lets you read the value of a resource like a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or [context](/learn/passing-data-deeply-with-context).
+```js
+function MessageComponent({ messagePromise }) {
+  const message = use(messagePromise);
+  const theme = use(ThemeContext);
+  // ...
+}
+```
diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md
new file mode 100644
index 000000000..22a9b23bd
--- /dev/null
+++ b/src/content/reference/react/cache.md
@@ -0,0 +1,498 @@
+---
+title: cache
+canary: true
+---
+
+<RSC>
+
+`cache` is only for use with [React Server Components](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components).
+
+</RSC>
+
+<Intro>
+
+`cache` lets you cache the result of a data fetch or computation.
+
+```js
+const cachedFn = cache(fn);
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `cache(fn)` {/*cache*/}
+
+Call `cache` outside of any components to create a version of the function with caching.
+
+```js {4,7}
+import {cache} from 'react';
+import calculateMetrics from 'lib/metrics';
+
+const getMetrics = cache(calculateMetrics);
+
+function Chart({data}) {
+  const report = getMetrics(data);
+  // ...
+}
+```
+
+When `getMetrics` is first called with `data`, `getMetrics` will call `calculateMetrics(data)` and store the result in cache. If `getMetrics` is called again with the same `data`, it will return the cached result instead of calling `calculateMetrics(data)` again.
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+- `fn`: The function you want to cache results for. `fn` can take any arguments and return any value.
+
+#### Returns {/*returns*/}
+
+`cache` returns a cached version of `fn` with the same type signature. It does not call `fn` in the process.
+
+When calling `cachedFn` with given arguments, it first checks if a cached result exists in the cache. If a cached result exists, it returns the result. If not, it calls `fn` with the arguments, stores the result in the cache, and returns the result. The only time `fn` is called is when there is a cache miss.
+
+<Note>
+
+The optimization of caching return values based on inputs is known as [_memoization_](https://en.wikipedia.org/wiki/Memoization). We refer to the function returned from `cache` as a memoized function.
+
+</Note>
+
+#### Caveats {/*caveats*/}
+
+[//]: # 'TODO: add links to Server/Client Component reference once https://github.com/reactjs/react.dev/pull/6177 is merged'
+
+- React will invalidate the cache for all memoized functions for each server request. 
+- Each call to `cache` creates a new function. This means that calling `cache` with the same function multiple times will return different memoized functions that do not share the same cache.
+- `cachedFn` will also cache errors. If `fn` throws an error for certain arguments, it will be cached, and the same error is re-thrown when `cachedFn` is called with those same arguments.
+- `cache` is for use in [Server Components](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) only.
+
+---
+
+## Usage {/*usage*/}
+
+### Cache an expensive computation {/*cache-expensive-computation*/}
+
+Use `cache` to skip duplicate work.
+
+```js [[1, 7, "getUserMetrics(user)"],[2, 13, "getUserMetrics(user)"]]
+import {cache} from 'react';
+import calculateUserMetrics from 'lib/user';
+
+const getUserMetrics = cache(calculateUserMetrics);
+
+function Profile({user}) {
+  const metrics = getUserMetrics(user);
+  // ...
+}
+
+function TeamReport({users}) {
+  for (let user in users) {
+    const metrics = getUserMetrics(user);
+    // ...
+  }
+  // ...
+}
+```
+
+If the same `user` object is rendered in both `Profile` and `TeamReport`, the two components can share work and only call `calculateUserMetrics` once for that `user`. 
+
+Assume `Profile` is rendered first. It will call <CodeStep step={1}>`getUserMetrics`</CodeStep>, and check if there is a cached result. Since it is the first time `getUserMetrics` is called with that `user`, there will be a cache miss. `getUserMetrics` will then call `calculateUserMetrics` with that `user` and write the result to cache. 
+
+When `TeamReport` renders its list of `users` and reaches the same `user` object, it will call <CodeStep step={2}>`getUserMetrics`</CodeStep> and read the result from cache.
+
+<Pitfall>
+
+##### Calling different memoized functions will read from different caches. {/*pitfall-different-memoized-functions*/}
+
+To access the same cache, components must call the same memoized function.
+
+```js [[1, 7, "getWeekReport"], [1, 7, "cache(calculateWeekReport)"], [1, 8, "getWeekReport"]]
+// Temperature.js
+import {cache} from 'react';
+import {calculateWeekReport} from './report';
+
+export function Temperature({cityData}) {
+  // 🚩 Wrong: Calling `cache` in component creates new `getWeekReport` for each render
+  const getWeekReport = cache(calculateWeekReport);
+  const report = getWeekReport(cityData);
+  // ...
+}
+```
+
+```js [[2, 6, "getWeekReport"], [2, 6, "cache(calculateWeekReport)"], [2, 9, "getWeekReport"]]
+// Precipitation.js
+import {cache} from 'react';
+import {calculateWeekReport} from './report';
+
+// 🚩 Wrong: `getWeekReport` is only accessible for `Precipitation` component.
+const getWeekReport = cache(calculateWeekReport);
+
+export function Precipitation({cityData}) {
+  const report = getWeekReport(cityData);
+  // ...
+}
+```
+
+In the above example, <CodeStep step={2}>`Precipitation`</CodeStep> and <CodeStep step={1}>`Temperature`</CodeStep> each call `cache` to create a new memoized function with their own cache look-up. If both components render for the same `cityData`, they will do duplicate work to call `calculateWeekReport`.
+
+In addition, `Temperature` creates a <CodeStep step={1}>new memoized function</CodeStep> each time the component is rendered which doesn't allow for any cache sharing.
+
+To maximize cache hits and reduce work, the two components should call the same memoized function to access the same cache. Instead, define the memoized function in a dedicated module that can be [`import`-ed](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) across components.
+
+```js [[3, 5, "export default cache(calculateWeekReport)"]]
+// getWeekReport.js
+import {cache} from 'react';
+import {calculateWeekReport} from './report';
+
+export default cache(calculateWeekReport);
+```
+
+```js [[3, 2, "getWeekReport", 0], [3, 5, "getWeekReport"]]
+// Temperature.js
+import getWeekReport from './getWeekReport';
+
+export default function Temperature({cityData}) {
+	const report = getWeekReport(cityData);
+  // ...
+}
+```
+
+```js [[3, 2, "getWeekReport", 0], [3, 5, "getWeekReport"]]
+// Precipitation.js
+import getWeekReport from './getWeekReport';
+
+export default function Precipitation({cityData}) {
+  const report = getWeekReport(cityData);
+  // ...
+}
+```
+Here, both components call the <CodeStep step={3}>same memoized function</CodeStep> exported from `./getWeekReport.js` to read and write to the same cache. 
+</Pitfall>
+
+### Share a snapshot of data {/*take-and-share-snapshot-of-data*/}
+
+To share a snapshot of data between components, call `cache` with a data-fetching function like `fetch`. When multiple components make the same data fetch, only one request is made and the data returned is cached and shared across components. All components refer to the same snapshot of data across the server render. 
+
+```js [[1, 4, "city"], [1, 5, "fetchTemperature(city)"], [2, 4, "getTemperature"], [2, 9, "getTemperature"], [1, 9, "city"], [2, 14, "getTemperature"], [1, 14, "city"]]
+import {cache} from 'react';
+import {fetchTemperature} from './api.js';
+
+const getTemperature = cache(async (city) => {
+	return await fetchTemperature(city);
+});
+
+async function AnimatedWeatherCard({city}) {
+	const temperature = await getTemperature(city);
+	// ...
+}
+
+async function MinimalWeatherCard({city}) {
+	const temperature = await getTemperature(city);
+	// ...
+}
+```
+
+If `AnimatedWeatherCard` and `MinimalWeatherCard` both render for the same <CodeStep step={1}>city</CodeStep>, they will receive the same snapshot of data from the <CodeStep step={2}>memoized function</CodeStep>. 
+
+If `AnimatedWeatherCard` and `MinimalWeatherCard` supply different <CodeStep step={1}>city</CodeStep> arguments to <CodeStep step={2}>`getTemperature`</CodeStep>, then `fetchTemperature` will be called twice and each call site will receive different data.
+
+The <CodeStep step={1}>city</CodeStep> acts as a cache key.
+
+<Note>
+
+[//]: # 'TODO: add links to Server Components when merged.'
+
+<CodeStep step={3}>Asynchronous rendering</CodeStep> is only supported for Server Components.
+
+```js [[3, 1, "async"], [3, 2, "await"]]
+async function AnimatedWeatherCard({city}) {
+	const temperature = await getTemperature(city);
+	// ...
+}
+```
+[//]: # 'TODO: add link and mention to use documentation when merged'
+[//]: # 'To render components that use asynchronous data in Client Components, see `use` documentation.'
+
+</Note>
+
+### Preload data {/*preload-data*/}
+
+By caching a long-running data fetch, you can kick off asynchronous work prior to rendering the component.
+
+```jsx [[2, 6, "await getUser(id)"], [1, 17, "getUser(id)"]]
+const getUser = cache(async (id) => {
+  return await db.user.query(id);
+});
+
+async function Profile({id}) {
+  const user = await getUser(id);
+  return (
+    <section>
+      <img src={user.profilePic} />
+      <h2>{user.name}</h2>
+    </section>
+  );
+}
+
+function Page({id}) {
+  // ✅ Good: start fetching the user data
+  getUser(id);
+  // ... some computational work
+  return (
+    <>
+      <Profile id={id} />
+    </>
+  );
+}
+```
+
+When rendering `Page`, the component calls <CodeStep step={1}>`getUser`</CodeStep> but note that it doesn't use the returned data. This early <CodeStep step={1}>`getUser`</CodeStep> call kicks off the asynchronous database query that occurs while `Page` is doing other computational work and rendering children.
+
+When rendering `Profile`, we call <CodeStep step={2}>`getUser`</CodeStep> again. If the initial <CodeStep step={1}>`getUser`</CodeStep> call has already returned and cached the user data, when `Profile` <CodeStep step={2}>asks and waits for this data</CodeStep>, it can simply read from the cache without requiring another remote procedure call. If the <CodeStep step={1}> initial data request</CodeStep> hasn't been completed, preloading data in this pattern reduces delay in data-fetching.
+
+<DeepDive>
+
+#### Caching asynchronous work {/*caching-asynchronous-work*/}
+
+When evaluating an [asynchronous function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function), you will receive a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) for that work. The promise holds the state of that work (_pending_, _fulfilled_, _failed_) and its eventual settled result.
+
+In this example, the asynchronous function <CodeStep step={1}>`fetchData`</CodeStep> returns a promise that is awaiting the `fetch`. 
+
+```js [[1, 1, "fetchData()"], [2, 8, "getData()"], [3, 10, "getData()"]]
+async function fetchData() {
+  return await fetch(`https://...`);
+}
+
+const getData = cache(fetchData);
+
+async function MyComponent() {
+  getData();
+  // ... some computational work  
+  await getData();
+  // ...
+}
+```
+
+In calling <CodeStep step={2}>`getData`</CodeStep> the first time, the promise returned from <CodeStep step={1}>`fetchData`</CodeStep> is cached. Subsequent look-ups will then return the same promise.
+
+Notice that the first <CodeStep step={2}>`getData`</CodeStep> call does not `await` whereas the <CodeStep step={3}>second</CodeStep> does. [`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) is a JavaScript operator that will wait and return the settled result of the promise. The first <CodeStep step={2}>`getData`</CodeStep> call simply initiates the `fetch` to cache the promise for the second <CodeStep step={3}>`getData`</CodeStep> to look-up.
+
+If by the <CodeStep step={3}>second call</CodeStep> the promise is still _pending_, then `await` will pause for the result. The optimization is that while we wait on the `fetch`, React can continue with computational work, thus reducing the wait time for the <CodeStep step={3}>second call</CodeStep>. 
+
+If the promise is already settled, either to an error or the _fulfilled_ result, `await` will return that value immediately. In both outcomes, there is a performance benefit.
+</DeepDive>
+
+<Pitfall>
+
+##### Calling a memoized function outside of a component will not use the cache. {/*pitfall-memoized-call-outside-component*/}
+
+```jsx [[1, 3, "getUser"]]
+import {cache} from 'react';
+
+const getUser = cache(async (userId) => {
+  return await db.user.query(userId);
+});
+
+// 🚩 Wrong: Calling memoized function outside of component will not memoize.
+getUser('demo-id');
+
+async function DemoProfile() {
+  // ✅ Good: `getUser` will memoize.
+  const user = await getUser('demo-id');
+  return <Profile user={user} />;
+}
+```
+
+React only provides cache access to the memoized function in a component. When calling <CodeStep step={1}>`getUser`</CodeStep> outside of a component, it will still evaluate the function but not read or update the cache.
+
+This is because cache access is provided through a [context](/learn/passing-data-deeply-with-context) which is only accessible from a component. 
+
+</Pitfall>
+
+<DeepDive>
+
+#### When should I use `cache`, [`memo`](/reference/react/memo), or [`useMemo`](/reference/react/useMemo)? {/*cache-memo-usememo*/}
+
+All mentioned APIs offer memoization but the difference is what they're intended to memoize, who can access the cache, and when their cache is invalidated.
+
+#### `useMemo` {/*deep-dive-use-memo*/}
+
+In general, you should use [`useMemo`](/reference/react/useMemo) for caching a expensive computation in a Client Component across renders. As an example, to memoize a transformation of data within a component.
+
+```jsx {4}
+'use client';
+
+function WeatherReport({record}) {
+  const avgTemp = useMemo(() => calculateAvg(record), record);
+  // ...
+}
+
+function App() {
+  const record = getRecord();
+  return (
+    <>
+      <WeatherReport record={record} />
+      <WeatherReport record={record} />
+    </>
+  );
+}
+```
+In this example, `App` renders two `WeatherReport`s with the same record. Even though both components do the same work, they cannot share work. `useMemo`'s cache is only local to the component.
+
+However, `useMemo` does ensure that if `App` re-renders and the `record` object doesn't change, each component instance would skip work and use the memoized value of `avgTemp`. `useMemo` will only cache the last computation of `avgTemp` with the given dependencies. 
+
+#### `cache` {/*deep-dive-cache*/}
+
+In general, you should use `cache` in Server Components to memoize work that can be shared across components.
+
+```js [[1, 12, "<WeatherReport city={city} />"], [3, 13, "<WeatherReport city={city} />"], [2, 1, "cache(fetchReport)"]]
+const cachedFetchReport = cache(fetchReport);
+
+function WeatherReport({city}) {
+  const report = cachedFetchReport(city);
+  // ...
+}
+
+function App() {
+  const city = "Los Angeles";
+  return (
+    <>
+      <WeatherReport city={city} />
+      <WeatherReport city={city} />
+    </>
+  );
+}
+```
+Re-writing the previous example to use `cache`, in this case the <CodeStep step={3}>second instance of `WeatherReport`</CodeStep> will be able to skip duplicate work and read from the same cache as the <CodeStep step={1}>first `WeatherReport`</CodeStep>. Another difference from the previous example is that `cache` is also recommended for <CodeStep step={2}>memoizing data fetches</CodeStep>, unlike `useMemo` which should only be used for computations.
+
+At this time, `cache` should only be used in Server Components and the cache will be invalidated across server requests.
+
+#### `memo` {/*deep-dive-memo*/}
+
+You should use [`memo`](reference/react/memo) to prevent a component re-rendering if its props are unchanged.
+
+```js
+'use client';
+
+function WeatherReport({record}) {
+  const avgTemp = calculateAvg(record); 
+  // ...
+}
+
+const MemoWeatherReport = memo(WeatherReport);
+
+function App() {
+  const record = getRecord();
+  return (
+    <>
+      <MemoWeatherReport record={record} />
+      <MemoWeatherReport record={record} />
+    </>
+  );
+}
+```
+
+In this example, both `MemoWeatherReport` components will call `calculateAvg` when first rendered. However, if `App` re-renders, with no changes to `record`, none of the props have changed and `MemoWeatherReport` will not re-render. 
+
+Compared to `useMemo`, `memo` memoizes the component render based on props vs. specific computations. Similar to `useMemo`, the memoized component only caches the last render with the last prop values. Once the props change, the cache invalidates and the component re-renders.
+
+</DeepDive>
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### My memoized function still runs even though I've called it with the same arguments {/*memoized-function-still-runs*/}
+
+See prior mentioned pitfalls
+* [Calling different memoized functions will read from different caches.](#pitfall-different-memoized-functions)
+* [Calling a memoized function outside of a component will not use the cache.](#pitfall-memoized-call-outside-component)
+
+If none of the above apply, it may be a problem with how React checks if something exists in cache.
+
+If your arguments are not [primitives](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) (ex. objects, functions, arrays), ensure you're passing the same object reference.
+
+When calling a memoized function, React will look up the input arguments to see if a result is already cached. React will use shallow equality of the arguments to determine if there is a cache hit.
+
+```js
+import {cache} from 'react';
+
+const calculateNorm = cache((vector) => {
+  // ...
+});
+
+function MapMarker(props) {
+  // 🚩 Wrong: props is an object that changes every render.
+  const length = calculateNorm(props);
+  // ...
+}
+
+function App() {
+  return (
+    <>
+      <MapMarker x={10} y={10} z={10} />
+      <MapMarker x={10} y={10} z={10} />
+    </>
+  );
+}
+```
+
+In this case the two `MapMarker`s look like they're doing the same work and calling `calculateNorm` with the same value of `{x: 10, y: 10, z:10}`. Even though the objects contain the same values, they are not the same object reference as each component creates its own `props` object.
+
+React will call [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) on the input to verify if there is a cache hit.
+
+```js {3,9}
+import {cache} from 'react';
+
+const calculateNorm = cache((x, y, z) => {
+  // ...
+});
+
+function MapMarker(props) {
+  // ✅ Good: Pass primitives to memoized function
+  const length = calculateNorm(props.x, props.y, props.z);
+  // ...
+}
+
+function App() {
+  return (
+    <>
+      <MapMarker x={10} y={10} z={10} />
+      <MapMarker x={10} y={10} z={10} />
+    </>
+  );
+}
+```
+
+One way to address this could be to pass the vector dimensions to `calculateNorm`. This works because the dimensions themselves are primitives.
+
+Another solution may be to pass the vector object itself as a prop to the component. We'll need to pass the same object to both component instances.
+
+```js {3,9,14}
+import {cache} from 'react';
+
+const calculateNorm = cache((vector) => {
+  // ...
+});
+
+function MapMarker(props) {
+  // ✅ Good: Pass the same `vector` object
+  const length = calculateNorm(props.vector);
+  // ...
+}
+
+function App() {
+  const vector = [10, 10, 10];
+  return (
+    <>
+      <MapMarker vector={vector} />
+      <MapMarker vector={vector} />
+    </>
+  );
+}
+```
+
diff --git a/src/content/reference/react/cloneElement.md b/src/content/reference/react/cloneElement.md
index d6ef84b0a..6bcea51b0 100644
--- a/src/content/reference/react/cloneElement.md
+++ b/src/content/reference/react/cloneElement.md
@@ -40,7 +40,7 @@ const clonedElement = cloneElement(
   'Goodbye'
 );
 
-console.log(clonedElement); // <Row title="Cabbage">Goodbye</Row>
+console.log(clonedElement); // <Row title="Cabbage" isHighlighted={true}>Goodbye</Row>
 ```
 
 [See more examples below.](#usage)
@@ -160,7 +160,7 @@ export default function App() {
 }
 ```
 
-```js List.js active
+```js src/List.js active
 import { Children, cloneElement, useState } from 'react';
 
 export default function List({ children }) {
@@ -185,7 +185,7 @@ export default function List({ children }) {
 }
 ```
 
-```js Row.js
+```js src/Row.js
 export default function Row({ title, isHighlighted }) {
   return (
     <div className={[
@@ -198,7 +198,7 @@ export default function Row({ title, isHighlighted }) {
 }
 ```
 
-```js data.js
+```js src/data.js
 export const products = [
   { title: 'Cabbage', id: 1 },
   { title: 'Garlic', id: 2 },
@@ -318,7 +318,7 @@ export default function App() {
 }
 ```
 
-```js List.js active
+```js src/List.js active
 import { useState } from 'react';
 
 export default function List({ items, renderItem }) {
@@ -342,7 +342,7 @@ export default function List({ items, renderItem }) {
 }
 ```
 
-```js Row.js
+```js src/Row.js
 export default function Row({ title, isHighlighted }) {
   return (
     <div className={[
@@ -355,7 +355,7 @@ export default function Row({ title, isHighlighted }) {
 }
 ```
 
-```js data.js
+```js src/data.js
 export const products = [
   { title: 'Cabbage', id: 1 },
   { title: 'Garlic', id: 2 },
@@ -423,7 +423,7 @@ export default function List({ items, renderItem }) {
 
 With this approach, `Row` does not need to receive an `isHighlighted` prop at all. Instead, it reads the context:
 
-```js Row.js {2}
+```js src/Row.js {2}
 export default function Row({ title }) {
   const isHighlighted = useContext(HighlightContext);
   // ...
@@ -461,7 +461,7 @@ export default function App() {
 }
 ```
 
-```js List.js active
+```js src/List.js active
 import { useState } from 'react';
 import { HighlightContext } from './HighlightContext.js';
 
@@ -493,7 +493,7 @@ export default function List({ items, renderItem }) {
 }
 ```
 
-```js Row.js
+```js src/Row.js
 import { useContext } from 'react';
 import { HighlightContext } from './HighlightContext.js';
 
@@ -510,13 +510,13 @@ export default function Row({ title }) {
 }
 ```
 
-```js HighlightContext.js
+```js src/HighlightContext.js
 import { createContext } from 'react';
 
 export const HighlightContext = createContext(false);
 ```
 
-```js data.js
+```js src/data.js
 export const products = [
   { title: 'Cabbage', id: 1 },
   { title: 'Garlic', id: 2 },
@@ -627,7 +627,7 @@ export default function App() {
 }
 ```
 
-```js useList.js
+```js src/useList.js
 import { useState } from 'react';
 
 export default function useList(items) {
@@ -644,7 +644,7 @@ export default function useList(items) {
 }
 ```
 
-```js Row.js
+```js src/Row.js
 export default function Row({ title, isHighlighted }) {
   return (
     <div className={[
@@ -657,7 +657,7 @@ export default function Row({ title, isHighlighted }) {
 }
 ```
 
-```js data.js
+```js src/data.js
 export const products = [
   { title: 'Cabbage', id: 1 },
   { title: 'Garlic', id: 2 },
diff --git a/src/content/reference/react/createElement.md b/src/content/reference/react/createElement.md
index a5f684c66..87110a71a 100644
--- a/src/content/reference/react/createElement.md
+++ b/src/content/reference/react/createElement.md
@@ -49,7 +49,7 @@ function Greeting({ name }) {
 `createElement` returns a React element object with a few properties:
 
 * `type`: The `type` you have passed.
-* `props`: The `props` you have passed except for `ref` and `key`. If the `type` is a component with legacy `type.defaultProps`, then any missing or undefined `props` will get the values from `type.defaultProps`.
+* `props`: The `props` you have passed except for `ref` and `key`.
 * `ref`: The `ref` you have passed. If missing, `null`.
 * `key`: The `key` you have passed, coerced to a string. If missing, `null`.
 
diff --git a/src/content/reference/react/createFactory.md b/src/content/reference/react/createFactory.md
deleted file mode 100644
index eb851ad97..000000000
--- a/src/content/reference/react/createFactory.md
+++ /dev/null
@@ -1,231 +0,0 @@
----
-title: createFactory
----
-
-<Deprecated>
-
-This API will be removed in a future major version of React. [See the alternatives.](#alternatives)
-
-</Deprecated>
-
-<Intro>
-
-`createFactory` lets you create a function that produces React elements of a given type.
-
-```js
-const factory = createFactory(type)
-```
-
-</Intro>
-
-<InlineToc />
-
----
-
-## Reference {/*reference*/}
-
-### `createFactory(type)` {/*createfactory*/}
-
-Call `createFactory(type)` to create a factory function which produces React elements of a given `type`.
-
-```js
-import { createFactory } from 'react';
-
-const button = createFactory('button');
-```
-
-Then you can use it to create React elements without JSX:
-
-```js
-export default function App() {
-  return button({
-    onClick: () => {
-      alert('Clicked!')
-    }
-  }, 'Click me');
-}
-```
-
-[See more examples below.](#usage)
-
-#### Parameters {/*parameters*/}
-
-* `type`: The `type` argument must be a valid React component type. For example, it could be a tag name string (such as `'div'` or `'span'`), or a React component (a function, a class, or a special component like [`Fragment`](/reference/react/Fragment)).
-
-#### Returns {/*returns*/}
-
-Returns a factory function. That factory function receives a `props` object as the first argument, followed by a list of `...children` arguments, and returns a React element with the given `type`, `props` and `children`.
-
----
-
-## Usage {/*usage*/}
-
-### Creating React elements with a factory {/*creating-react-elements-with-a-factory*/}
-
-Although most React projects use [JSX](/learn/writing-markup-with-jsx) to describe the user interface, JSX is not required. In the past, `createFactory` used to be one of the ways you could describe the user interface without JSX.
-
-Call `createFactory` to create a *factory function* for a specific element type like `'button'`:
-
-```js
-import { createFactory } from 'react';
-
-const button = createFactory('button');
-```
-
-Calling that factory function will produce React elements with the props and children you have provided:
-
-<Sandpack>
-
-```js App.js
-import { createFactory } from 'react';
-
-const button = createFactory('button');
-
-export default function App() {
-  return button({
-    onClick: () => {
-      alert('Clicked!')
-    }
-  }, 'Click me');
-}
-```
-
-</Sandpack>
-
-This is how `createFactory` was used as an alternative to JSX. However, `createFactory` is deprecated, and you should not call `createFactory` in any new code. See how to migrate away from `createFactory` below.
-
----
-
-## Alternatives {/*alternatives*/}
-
-### Copying `createFactory` into your project {/*copying-createfactory-into-your-project*/}
-
-If your project has many `createFactory` calls, copy this `createFactory.js` implementation into your project:
-
-<Sandpack>
-
-```js App.js
-import { createFactory } from './createFactory.js';
-
-const button = createFactory('button');
-
-export default function App() {
-  return button({
-    onClick: () => {
-      alert('Clicked!')
-    }
-  }, 'Click me');
-}
-```
-
-```js createFactory.js
-import { createElement } from 'react';
-
-export function createFactory(type) {
-  return createElement.bind(null, type);
-}
-```
-
-</Sandpack>
-
-This lets you keep all of your code unchanged except the imports.
-
----
-
-### Replacing `createFactory` with `createElement` {/*replacing-createfactory-with-createelement*/}
-
-If you have a few `createFactory` calls that you don't mind porting manually, and you don't want to use JSX, you can replace every call a factory function with a [`createElement`](/reference/react/createElement) call. For example, you can replace this code:
-
-```js {1,3,6}
-import { createFactory } from 'react';
-
-const button = createFactory('button');
-
-export default function App() {
-  return button({
-    onClick: () => {
-      alert('Clicked!')
-    }
-  }, 'Click me');
-}
-```
-
-with this code:
-
-
-```js {1,4}
-import { createElement } from 'react';
-
-export default function App() {
-  return createElement('button', {
-    onClick: () => {
-      alert('Clicked!')
-    }
-  }, 'Click me');
-}
-```
-
-Here is a complete example of using React without JSX:
-
-<Sandpack>
-
-```js App.js
-import { createElement } from 'react';
-
-export default function App() {
-  return createElement('button', {
-    onClick: () => {
-      alert('Clicked!')
-    }
-  }, 'Click me');
-}
-```
-
-</Sandpack>
-
----
-
-### Replacing `createFactory` with JSX {/*replacing-createfactory-with-jsx*/}
-
-Finally, you can use JSX instead of `createFactory`. This is the most common way to use React:
-
-<Sandpack>
-
-```js App.js
-export default function App() {
-  return (
-    <button onClick={() => {
-      alert('Clicked!');
-    }}>
-      Click me
-    </button>
-  );
-};
-```
-
-</Sandpack>
-
-<Pitfall>
-
-Sometimes, your existing code might pass some variable as a `type` instead of a constant like `'button'`:
-
-```js {3}
-function Heading({ isSubheading, ...props }) {
-  const type = isSubheading ? 'h2' : 'h1';
-  const factory = createFactory(type);
-  return factory(props);
-}
-```
-
-To do the same in JSX, you need to rename your variable to start with an uppercase letter like `Type`:
-
-```js {2,3}
-function Heading({ isSubheading, ...props }) {
-  const Type = isSubheading ? 'h2' : 'h1';
-  return <Type {...props} />;
-}
-```
-
-Otherwise React will interpret `<type>` as a built-in HTML tag because it is lowercase.
-
-</Pitfall>
diff --git a/src/content/reference/react/directives.md b/src/content/reference/react/directives.md
deleted file mode 100644
index b323dab1d..000000000
--- a/src/content/reference/react/directives.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-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>
-
-Directives 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/experimental_taintObjectReference.md b/src/content/reference/react/experimental_taintObjectReference.md
new file mode 100644
index 000000000..b5b9e513d
--- /dev/null
+++ b/src/content/reference/react/experimental_taintObjectReference.md
@@ -0,0 +1,153 @@
+---
+title: experimental_taintObjectReference
+---
+
+<Wip>
+
+**This API is experimental and is not available in a stable version of React yet.**
+
+You can try it by upgrading React packages to the most recent experimental version:
+
+- `react@experimental`
+- `react-dom@experimental`
+- `eslint-plugin-react-hooks@experimental`
+
+Experimental versions of React may contain bugs. Don't use them in production.
+
+This API is only available inside React Server Components.
+
+</Wip>
+
+
+<Intro>
+
+`taintObjectReference` lets you prevent a specific object instance from being passed to a Client Component like a `user` object.
+
+```js
+experimental_taintObjectReference(message, object);
+```
+
+To prevent passing a key, hash or token, see [`taintUniqueValue`](/reference/react/experimental_taintUniqueValue).
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `taintObjectReference(message, object)` {/*taintobjectreference*/}
+
+Call `taintObjectReference` with an object to register it with React as something that should not be allowed to be passed to the Client as is:
+
+```js
+import {experimental_taintObjectReference} from 'react';
+
+experimental_taintObjectReference(
+  'Do not pass ALL environment variables to the client.',
+  process.env
+);
+```
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `message`: The message you want to display if the object gets passed to a Client Component. This message will be displayed as a part of the Error that will be thrown if the object gets passed to a Client Component.
+
+* `object`: The object to be tainted. Functions and class instances can be passed to `taintObjectReference` as `object`. Functions and classes are already blocked from being passed to Client Components but the React's default error message will be replaced by what you defined in `message`. When a specific instance of a Typed Array is passed to `taintObjectReference` as `object`, any other copies of the Typed Array will not be tainted.
+
+#### Returns {/*returns*/}
+
+`experimental_taintObjectReference` returns `undefined`.
+
+#### Caveats {/*caveats*/}
+
+- Recreating or cloning a tainted object creates a new untainted object which may contain sensitive data. For example, if you have a tainted `user` object, `const userInfo = {name: user.name, ssn: user.ssn}` or `{...user}` will create new objects which are not tainted. `taintObjectReference` only protects against simple mistakes when the object is passed through to a Client Component unchanged.
+
+<Pitfall>
+
+**Do not rely on just tainting for security.** Tainting an object doesn't prevent leaking of every possible derived value. For example, the clone of a tainted object will create a new untainted object. Using data from a tainted object (e.g. `{secret: taintedObj.secret}`) will create a new value or object that is not tainted. Tainting is a layer of protection; a secure app will have multiple layers of protection, well designed APIs, and isolation patterns.
+
+</Pitfall>
+
+---
+
+## Usage {/*usage*/}
+
+### Prevent user data from unintentionally reaching the client {/*prevent-user-data-from-unintentionally-reaching-the-client*/}
+
+A Client Component should never accept objects that carry sensitive data. Ideally, the data fetching functions should not expose data that the current user should not have access to. Sometimes mistakes happen during refactoring. To protect against these mistakes happening down the line we can "taint" the user object in our data API.
+
+```js
+import {experimental_taintObjectReference} from 'react';
+
+export async function getUser(id) {
+  const user = await db`SELECT * FROM users WHERE id = ${id}`;
+  experimental_taintObjectReference(
+    'Do not pass the entire user object to the client. ' +
+      'Instead, pick off the specific properties you need for this use case.',
+    user,
+  );
+  return user;
+}
+```
+
+Now whenever anyone tries to pass this object to a Client Component, an error will be thrown with the passed in error message instead.
+
+<DeepDive>
+
+#### Protecting against leaks in data fetching {/*protecting-against-leaks-in-data-fetching*/}
+
+If you're running a Server Components environment that has access to sensitive data, you have to be careful not to pass objects straight through:
+
+```js
+// api.js
+export async function getUser(id) {
+  const user = await db`SELECT * FROM users WHERE id = ${id}`;
+  return user;
+}
+```
+
+```js
+import { getUser } from 'api.js';
+import { InfoCard } from 'components.js';
+
+export async function Profile(props) {
+  const user = await getUser(props.userId);
+  // DO NOT DO THIS
+  return <InfoCard user={user} />;
+}
+```
+
+```js
+// components.js
+"use client";
+
+export async function InfoCard({ user }) {
+  return <div>{user.name}</div>;
+}
+```
+
+Ideally, the `getUser` should not expose data that the current user should not have access to. To prevent passing the `user` object to a Client Component down the line we can "taint" the user object:
+
+
+```js
+// api.js
+import {experimental_taintObjectReference} from 'react';
+
+export async function getUser(id) {
+  const user = await db`SELECT * FROM users WHERE id = ${id}`;
+  experimental_taintObjectReference(
+    'Do not pass the entire user object to the client. ' +
+      'Instead, pick off the specific properties you need for this use case.',
+    user,
+  );
+  return user;
+}
+```
+
+Now if anyone tries to pass the `user` object to a Client Component, an error will be thrown with the passed in error message.
+
+</DeepDive>
diff --git a/src/content/reference/react/experimental_taintUniqueValue.md b/src/content/reference/react/experimental_taintUniqueValue.md
new file mode 100644
index 000000000..de9a9beda
--- /dev/null
+++ b/src/content/reference/react/experimental_taintUniqueValue.md
@@ -0,0 +1,199 @@
+---
+title: experimental_taintUniqueValue
+---
+
+<Wip>
+
+**This API is experimental and is not available in a stable version of React yet.**
+
+You can try it by upgrading React packages to the most recent experimental version:
+
+- `react@experimental`
+- `react-dom@experimental`
+- `eslint-plugin-react-hooks@experimental`
+
+Experimental versions of React may contain bugs. Don't use them in production.
+
+This API is only available inside [React Server Components](/reference/rsc/use-client).
+
+</Wip>
+
+
+<Intro>
+
+`taintUniqueValue` lets you prevent unique values from being passed to Client Components like passwords, keys, or tokens.
+
+```js
+taintUniqueValue(errMessage, lifetime, value)
+```
+
+To prevent passing an object containing sensitive data, see [`taintObjectReference`](/reference/react/experimental_taintObjectReference).
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `taintUniqueValue(message, lifetime, value)` {/*taintuniquevalue*/}
+
+Call `taintUniqueValue` with a password, token, key or hash to register it with React as something that should not be allowed to be passed to the Client as is:
+
+```js
+import {experimental_taintUniqueValue} from 'react';
+
+experimental_taintUniqueValue(
+  'Do not pass secret keys to the client.',
+  process,
+  process.env.SECRET_KEY
+);
+```
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `message`: The message you want to display if `value` is passed to a Client Component. This message will be displayed as a part of the Error that will be thrown if `value` is passed to a Client Component.
+
+* `lifetime`: Any object that indicates how long `value` should be tainted. `value` will be blocked from being sent to any Client Component while this object still exists. For example, passing `globalThis` blocks the value for the lifetime of an app. `lifetime` is typically an object whose properties contains `value`.
+
+* `value`: A string, bigint or TypedArray. `value` must be a unique sequence of characters or bytes with high entropy such as a cryptographic token, private key, hash, or a long password. `value` will be blocked from being sent to any Client Component.
+
+#### Returns {/*returns*/}
+
+`experimental_taintUniqueValue` returns `undefined`.
+
+#### Caveats {/*caveats*/}
+
+* Deriving new values from tainted values can compromise tainting protection. New values created by uppercasing tainted values, concatenating tainted string values into a larger string, converting tainted values to base64, substringing tainted values, and other similar transformations are not tainted unless you explicitly call `taintUniqueValue` on these newly created values.
+* Do not use `taintUniqueValue` to protect low-entropy values such as PIN codes or phone numbers. If any value in a request is controlled by an attacker, they could infer which value is tainted by enumerating all possible values of the secret.
+
+---
+
+## Usage {/*usage*/}
+
+### Prevent a token from being passed to Client Components {/*prevent-a-token-from-being-passed-to-client-components*/}
+
+To ensure that sensitive information such as passwords, session tokens, or other unique values do not inadvertently get passed to Client Components, the `taintUniqueValue` function provides a layer of protection. When a value is tainted, any attempt to pass it to a Client Component will result in an error. 
+
+The `lifetime` argument defines the duration for which the value remains tainted. For values that should remain tainted indefinitely, objects like [`globalThis`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis) or `process` can serve as the `lifetime` argument. These objects have a lifespan that spans the entire duration of your app's execution.
+
+```js
+import {experimental_taintUniqueValue} from 'react';
+
+experimental_taintUniqueValue(
+  'Do not pass a user password to the client.',
+  globalThis,
+  process.env.SECRET_KEY
+);
+```
+
+If the tainted value's lifespan is tied to a object, the `lifetime` should be the object that encapsulates the value. This ensures the tainted value remains protected for the lifetime of the encapsulating object.
+
+```js
+import {experimental_taintUniqueValue} from 'react';
+
+export async function getUser(id) {
+  const user = await db`SELECT * FROM users WHERE id = ${id}`;
+  experimental_taintUniqueValue(
+    'Do not pass a user session token to the client.',
+    user,
+    user.session.token
+  );
+  return user;
+}
+```
+
+In this example, the `user` object serves as the `lifetime` argument. If this object gets stored in a global cache or is accessible by another request, the session token remains tainted.
+
+<Pitfall>
+
+**Do not rely solely on tainting for security.** Tainting a value doesn't block every possible derived value. For example, creating a new value by upper casing a tainted string will not taint the new value.
+
+
+```js
+import {experimental_taintUniqueValue} from 'react';
+
+const password = 'correct horse battery staple';
+
+experimental_taintUniqueValue(
+  'Do not pass the password to the client.',
+  globalThis,
+  password
+);
+
+const uppercasePassword = password.toUpperCase() // `uppercasePassword` is not tainted
+```
+
+In this example, the constant `password` is tainted. Then `password` is used to create a new value `uppercasePassword` by calling the `toUpperCase` method on `password`. The newly created `uppercasePassword` is not tainted.
+
+Other similar ways of deriving new values from tainted values like concatenating it into a larger string, converting it to base64, or returning a substring create untained values.
+
+Tainting only protects against simple mistakes like explicitly passing secret values to the client. Mistakes in calling the `taintUniqueValue` like using a global store outside of React, without the corresponding lifetime object, can cause the tainted value to become untainted. Tainting is a layer of protection; a secure app will have multiple layers of protection, well designed APIs, and isolation patterns.
+
+</Pitfall>
+
+<DeepDive>
+
+#### Using `server-only` and `taintUniqueValue` to prevent leaking secrets {/*using-server-only-and-taintuniquevalue-to-prevent-leaking-secrets*/}
+
+If you're running a Server Components environment that has access to private keys or passwords such as database passwords, you have to be careful not to pass that to a Client Component.
+
+```js
+export async function Dashboard(props) {
+  // DO NOT DO THIS
+  return <Overview password={process.env.API_PASSWORD} />;
+}
+```
+
+```js
+"use client";
+
+import {useEffect} from '...'
+
+export async function Overview({ password }) {
+  useEffect(() => {
+    const headers = { Authorization: password };
+    fetch(url, { headers }).then(...);
+  }, [password]);
+  ...
+}
+```
+
+This example would leak the secret API token to the client. If this API token can be used to access data this particular user shouldn't have access to, it could lead to a data breach.
+
+[comment]: <> (TODO: Link to `server-only` docs once they are written)
+
+Ideally, secrets like this are abstracted into a single helper file that can only be imported by trusted data utilities on the server. The helper can even be tagged with [`server-only`](https://www.npmjs.com/package/server-only) to ensure that this file isn't imported on the client.
+
+```js
+import "server-only";
+
+export function fetchAPI(url) {
+  const headers = { Authorization: process.env.API_PASSWORD };
+  return fetch(url, { headers });
+}
+```
+
+Sometimes mistakes happen during refactoring and not all of your colleagues might know about this. 
+To protect against this mistakes happening down the line we can "taint" the actual password:
+
+```js
+import "server-only";
+import {experimental_taintUniqueValue} from 'react';
+
+experimental_taintUniqueValue(
+  'Do not pass the API token password to the client. ' +
+    'Instead do all fetches on the server.'
+  process,
+  process.env.API_PASSWORD
+);
+```
+
+Now whenever anyone tries to pass this password to a Client Component, or send the password to a Client Component with a Server Function, an error will be thrown with message you defined when you called `taintUniqueValue`.
+
+</DeepDive>
+
+---
diff --git a/src/content/reference/react/forwardRef.md b/src/content/reference/react/forwardRef.md
index 10c2ad03d..5b0e679b8 100644
--- a/src/content/reference/react/forwardRef.md
+++ b/src/content/reference/react/forwardRef.md
@@ -2,6 +2,14 @@
 title: forwardRef
 ---
 
+<Deprecated>
+
+In React 19, `forwardRef` is no longer necessary. Pass `ref` as a prop instead.
+
+`forwardRef` will deprecated in a future release. Learn more [here](/blog/2024/04/25/react-19#ref-as-a-prop).
+
+</Deprecated>
+
 <Intro>
 
 `forwardRef` lets your component expose a DOM node to parent component with a [ref.](/learn/manipulating-the-dom-with-refs)
@@ -42,7 +50,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
 
 #### Caveats {/*caveats*/}
 
-* In Strict Mode, React will **call your render function twice** in order to [help you find accidental impurities.](#my-initializer-or-updater-function-runs-twice) This is development-only behavior and does not affect production. If your render function is pure (as it should be), this should not affect the logic of your component. The result from one of the calls will be ignored.
+* In Strict Mode, React will **call your render function twice** in order to [help you find accidental impurities.](/reference/react/useState#my-initializer-or-updater-function-runs-twice) This is development-only behavior and does not affect production. If your render function is pure (as it should be), this should not affect the logic of your component. The result from one of the calls will be ignored.
 
 
 ---
@@ -165,7 +173,7 @@ export default function Form() {
 }
 ```
 
-```js MyInput.js
+```js src/MyInput.js
 import { forwardRef } from 'react';
 
 const MyInput = forwardRef(function MyInput(props, ref) {
@@ -223,7 +231,7 @@ export default function App() {
 }
 ```
 
-```js MyVideoPlayer.js
+```js src/MyVideoPlayer.js
 import { forwardRef } from 'react';
 
 const VideoPlayer = forwardRef(function VideoPlayer({ src, type, width }, ref) {
@@ -316,7 +324,7 @@ export default function Form() {
 }
 ```
 
-```js FormField.js
+```js src/FormField.js
 import { forwardRef, useState } from 'react';
 import MyInput from './MyInput.js';
 
@@ -341,7 +349,7 @@ export default FormField;
 ```
 
 
-```js MyInput.js
+```js src/MyInput.js
 import { forwardRef } from 'react';
 
 const MyInput = forwardRef((props, ref) => {
@@ -423,7 +431,7 @@ export default function Form() {
 
   return (
     <form>
-      <MyInput label="Enter your name:" ref={ref} />
+      <MyInput placeholder="Enter your name" ref={ref} />
       <button type="button" onClick={handleClick}>
         Edit
       </button>
@@ -432,7 +440,7 @@ export default function Form() {
 }
 ```
 
-```js MyInput.js
+```js src/MyInput.js
 import { forwardRef, useRef, useImperativeHandle } from 'react';
 
 const MyInput = forwardRef(function MyInput(props, ref) {
diff --git a/src/content/reference/react/hooks.md b/src/content/reference/react/hooks.md
new file mode 100644
index 000000000..6dea3a0fd
--- /dev/null
+++ b/src/content/reference/react/hooks.md
@@ -0,0 +1,122 @@
+---
+title: "Built-in React Hooks"
+---
+
+<Intro>
+
+*Hooks* let you use different React features from your components. You can either use the built-in Hooks or combine them to build your own. This page lists all built-in Hooks in React.
+
+</Intro>
+
+---
+
+## State Hooks {/*state-hooks*/}
+
+*State* lets a component ["remember" information like user input.](/learn/state-a-components-memory) For example, a form component can use state to store the input value, while an image gallery component can use state to store the selected image index.
+
+To add state to a component, use one of these Hooks:
+
+* [`useState`](/reference/react/useState) declares a state variable that you can update directly.
+* [`useReducer`](/reference/react/useReducer) declares a state variable with the update logic inside a [reducer function.](/learn/extracting-state-logic-into-a-reducer)
+
+```js
+function ImageGallery() {
+  const [index, setIndex] = useState(0);
+  // ...
+```
+
+---
+
+## Context Hooks {/*context-hooks*/}
+
+*Context* lets a component [receive information from distant parents without passing it as props.](/learn/passing-props-to-a-component) For example, your app's top-level component can pass the current UI theme to all components below, no matter how deep.
+
+* [`useContext`](/reference/react/useContext) reads and subscribes to a context.
+
+```js
+function Button() {
+  const theme = useContext(ThemeContext);
+  // ...
+```
+
+---
+
+## Ref Hooks {/*ref-hooks*/}
+
+*Refs* let a component [hold some information that isn't used for rendering,](/learn/referencing-values-with-refs) like a DOM node or a timeout ID. Unlike with state, updating a ref does not re-render your component. Refs are an "escape hatch" from the React paradigm. They are useful when you need to work with non-React systems, such as the built-in browser APIs.
+
+* [`useRef`](/reference/react/useRef) declares a ref. You can hold any value in it, but most often it's used to hold a DOM node.
+* [`useImperativeHandle`](/reference/react/useImperativeHandle) lets you customize the ref exposed by your component. This is rarely used.
+
+```js
+function Form() {
+  const inputRef = useRef(null);
+  // ...
+```
+
+---
+
+## Effect Hooks {/*effect-hooks*/}
+
+*Effects* let a component [connect to and synchronize with external systems.](/learn/synchronizing-with-effects) This includes dealing with network, browser DOM, animations, widgets written using a different UI library, and other non-React code.
+
+* [`useEffect`](/reference/react/useEffect) connects a component to an external system.
+
+```js
+function ChatRoom({ roomId }) {
+  useEffect(() => {
+    const connection = createConnection(roomId);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId]);
+  // ...
+```
+
+Effects are an "escape hatch" from the React paradigm. Don't use Effects to orchestrate the data flow of your application. If you're not interacting with an external system, [you might not need an Effect.](/learn/you-might-not-need-an-effect)
+
+There are two rarely used variations of `useEffect` with differences in timing:
+
+* [`useLayoutEffect`](/reference/react/useLayoutEffect) fires before the browser repaints the screen. You can measure layout here.
+* [`useInsertionEffect`](/reference/react/useInsertionEffect) fires before React makes changes to the DOM. Libraries can insert dynamic CSS here.
+
+---
+
+## Performance Hooks {/*performance-hooks*/}
+
+A common way to optimize re-rendering performance is to skip unnecessary work. For example, you can tell React to reuse a cached calculation or to skip a re-render if the data has not changed since the previous render.
+
+To skip calculations and unnecessary re-rendering, use one of these Hooks:
+
+- [`useMemo`](/reference/react/useMemo) lets you cache the result of an expensive calculation.
+- [`useCallback`](/reference/react/useCallback) lets you cache a function definition before passing it down to an optimized component.
+
+```js
+function TodoList({ todos, tab, theme }) {
+  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
+  // ...
+}
+```
+
+Sometimes, you can't skip re-rendering because the screen actually needs to update. In that case, you can improve performance by separating blocking updates that must be synchronous (like typing into an input) from non-blocking updates which don't need to block the user interface (like updating a chart).
+
+To prioritize rendering, use one of these Hooks:
+
+- [`useTransition`](/reference/react/useTransition) lets you mark a state transition as non-blocking and allow other updates to interrupt it.
+- [`useDeferredValue`](/reference/react/useDeferredValue) lets you defer updating a non-critical part of the UI and let other parts update first.
+
+---
+
+## Other Hooks {/*other-hooks*/}
+
+These Hooks are mostly useful to library authors and aren't commonly used in the application code.
+
+- [`useDebugValue`](/reference/react/useDebugValue) lets you customize the label React DevTools displays for your custom Hook.
+- [`useId`](/reference/react/useId) lets a component associate a unique ID with itself. Typically used with accessibility APIs.
+- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) lets a component subscribe to an external store.
+* [`useActionState`](/reference/react/useActionState) allows you to manage state of actions.
+
+---
+
+## Your own Hooks {/*your-own-hooks*/}
+
+You can also [define your own custom Hooks](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) as JavaScript functions.
diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md
index 650a1c382..a68ddc014 100644
--- a/src/content/reference/react/index.md
+++ b/src/content/reference/react/index.md
@@ -1,121 +1,42 @@
 ---
-title: "Built-in React Hooks"
+title: React Reference Overview
 ---
 
 <Intro>
 
-*Hooks* let you use different React features from your components. You can either use the built-in Hooks or combine them to build your own. This page lists all built-in Hooks in React.
+This section provides detailed reference documentation for working with React. For an introduction to React, please visit the [Learn](/learn) section.
 
 </Intro>
 
----
-
-## State Hooks {/*state-hooks*/}
-
-*State* lets a component ["remember" information like user input.](/learn/state-a-components-memory) For example, a form component can use state to store the input value, while an image gallery component can use state to store the selected image index.
-
-To add state to a component, use one of these Hooks:
-
-* [`useState`](/reference/react/useState) declares a state variable that you can update directly.
-* [`useReducer`](/reference/react/useReducer) declares a state variable with the update logic inside a [reducer function.](/learn/extracting-state-logic-into-a-reducer)
-
-```js
-function ImageGallery() {
-  const [index, setIndex] = useState(0);
-  // ...
-```
-
----
-
-## Context Hooks {/*context-hooks*/}
+The React reference documentation is broken down into functional subsections:
 
-*Context* lets a component [receive information from distant parents without passing it as props.](/learn/passing-props-to-a-component) For example, your app's top-level component can pass the current UI theme to all components below, no matter how deep.
+## React {/*react*/}
 
-* [`useContext`](/reference/react/useContext) reads and subscribes to a context.
-
-```js
-function Button() {
-  const theme = useContext(ThemeContext);
-  // ...
-```
-
----
-
-## Ref Hooks {/*ref-hooks*/}
-
-*Refs* let a component [hold some information that isn't used for rendering,](/learn/referencing-values-with-refs) like a DOM node or a timeout ID. Unlike with state, updating a ref does not re-render your component. Refs are an "escape hatch" from the React paradigm. They are useful when you need to work with non-React systems, such as the built-in browser APIs.
-
-* [`useRef`](/reference/react/useRef) declares a ref. You can hold any value in it, but most often it's used to hold a DOM node.
-* [`useImperativeHandle`](/reference/react/useImperativeHandle) lets you customize the ref exposed by your component. This is rarely used.
-
-```js
-function Form() {
-  const inputRef = useRef(null);
-  // ...
-```
-
----
+Programmatic React features:
 
-## Effect Hooks {/*effect-hooks*/}
+* [Hooks](/reference/react/hooks) - Use different React features from your components.
+* [Components](/reference/react/components) - Built-in components that you can use in your JSX.
+* [APIs](/reference/react/apis) - APIs that are useful for defining components.
+* [Directives](/reference/rsc/directives) - Provide instructions to bundlers compatible with React Server Components.
 
-*Effects* let a component [connect to and synchronize with external systems.](/learn/synchronizing-with-effects) This includes dealing with network, browser DOM, animations, widgets written using a different UI library, and other non-React code.
+## React DOM {/*react-dom*/}
 
-* [`useEffect`](/reference/react/useEffect) connects a component to an external system.
+React-dom contains features that are only supported for web applications (which run in the browser DOM environment). This section is broken into the following:
 
-```js
-function ChatRoom({ roomId }) {
-  useEffect(() => {
-    const connection = createConnection(roomId);
-    connection.connect();
-    return () => connection.disconnect();
-  }, [roomId]);
-  // ...
-```
+* [Hooks](/reference/react-dom/hooks) - Hooks for web applications which run in the browser DOM environment.
+* [Components](/reference/react-dom/components) - React supports all of the browser built-in HTML and SVG components.
+* [APIs](/reference/react-dom) - The `react-dom` package contains methods supported only in web applications.
+* [Client APIs](/reference/react-dom/client) - The `react-dom/client` APIs let you render React components on the client (in the browser).
+* [Server APIs](/reference/react-dom/server) - The `react-dom/server` APIs let you render React components to HTML on the server.
 
-Effects are an "escape hatch" from the React paradigm. Don't use Effects to orchestrate the data flow of your application. If you're not interacting with an external system, [you might not need an Effect.](/learn/you-might-not-need-an-effect)
+## Rules of React {/*rules-of-react*/}
 
-There are two rarely used variations of `useEffect` with differences in timing:
+React has idioms — or rules — for how to express patterns in a way that is easy to understand and yields high-quality applications:
 
-* [`useLayoutEffect`](/reference/react/useLayoutEffect) fires before the browser repaints the screen. You can measure layout here.
-* [`useInsertionEffect`](/reference/react/useInsertionEffect) fires before React makes changes to the DOM. Libraries can insert dynamic CSS here.
-
----
-
-## Performance Hooks {/*performance-hooks*/}
-
-A common way to optimize re-rendering performance is to skip unnecessary work. For example, you can tell React to reuse a cached calculation or to skip a re-render if the data has not changed since the previous render.
-
-To skip calculations and unnecessary re-rendering, use one of these Hooks:
-
-- [`useMemo`](/reference/react/useMemo) lets you cache the result of an expensive calculation.
-- [`useCallback`](/reference/react/useCallback) lets you cache a function definition before passing it down to an optimized component.
-
-```js
-function TodoList({ todos, tab, theme }) {
-  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
-  // ...
-}
-```
-
-Sometimes, you can't skip re-rendering because the screen actually needs to update. In that case, you can improve performance by separating blocking updates that must be synchronous (like typing into an input) from non-blocking updates which don't need to block the user interface (like updating a chart).
-
-To prioritize rendering, use one of these Hooks:
-
-- [`useTransition`](/reference/react/useTransition) lets you mark a state transition as non-blocking and allow other updates to interrupt it.
-- [`useDeferredValue`](/reference/react/useDeferredValue) lets you defer updating a non-critical part of the UI and let other parts update first.
-
----
-
-## Other Hooks {/*other-hooks*/}
-
-These Hooks are mostly useful to library authors and aren't commonly used in the application code.
-
-- [`useDebugValue`](/reference/react/useDebugValue) lets you customize the label React DevTools displays for your custom Hook.
-- [`useId`](/reference/react/useId) lets a component associate a unique ID with itself. Typically used with accessibility APIs.
-- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) lets a component subscribe to an external store.
-
----
+* [Components and Hooks must be pure](/reference/rules/components-and-hooks-must-be-pure) – Purity makes your code easier to understand, debug, and allows React to automatically optimize your components and hooks correctly.
+* [React calls Components and Hooks](/reference/rules/react-calls-components-and-hooks) – React is responsible for rendering components and hooks when necessary to optimize the user experience.
+* [Rules of Hooks](/reference/rules/rules-of-hooks) – Hooks are defined using JavaScript functions, but they represent a special type of reusable UI logic with restrictions on where they can be called.
 
-## Your own Hooks {/*your-own-hooks*/}
+## Legacy APIs {/*legacy-apis*/}
 
-You can also [define your own custom Hooks](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) as JavaScript functions.
+* [Legacy APIs](/reference/react/legacy) - Exported from the `react` package, but not recommended for use in newly written code.
diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md
index ba82d4fe2..5ec74d0d9 100644
--- a/src/content/reference/react/lazy.md
+++ b/src/content/reference/react/lazy.md
@@ -32,7 +32,7 @@ const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
 
 #### Parameters {/*parameters*/}
 
-* `load`: A function that returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or another *thenable* (a Promise-like object with a `then` method). React will not call `load` until the first time you attempt to render the returned component. After React first calls `load`, it will wait for it to resolve, and then render the resolved value as a React component. Both the returned Promise and the Promise's resolved value will be cached, so React will not call `load` more than once. If the Promise rejects, React will `throw` the rejection reason for the nearest Error Boundary to handle.
+* `load`: A function that returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or another *thenable* (a Promise-like object with a `then` method). React will not call `load` until the first time you attempt to render the returned component. After React first calls `load`, it will wait for it to resolve, and then render the resolved value's `.default` as a React component. Both the returned Promise and the Promise's resolved value will be cached, so React will not call `load` more than once. If the Promise rejects, React will `throw` the rejection reason for the nearest Error Boundary to handle.
 
 #### Returns {/*returns*/}
 
@@ -48,7 +48,7 @@ const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
 
 #### Returns {/*load-returns*/}
 
-You need to return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or some other *thenable* (a Promise-like object with a `then` method). It needs to eventually resolve to a valid React component type, such as a function, [`memo`](/reference/react/memo), or a [`forwardRef`](/reference/react/forwardRef) component.
+You need to return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or some other *thenable* (a Promise-like object with a `then` method). It needs to eventually resolve to an object whose `.default` property is a valid React component type, such as a function, [`memo`](/reference/react/memo), or a [`forwardRef`](/reference/react/forwardRef) component.
 
 ---
 
@@ -70,7 +70,7 @@ import { lazy } from 'react';
 const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
 ```
 
-This code relies on [dynamic `import()`,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) which might require support from your bundler or framework.
+This code relies on [dynamic `import()`,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) which might require support from your bundler or framework. Using this pattern requires that the lazy component you're importing was exported as the `default` export.
 
 Now that your component's code loads on demand, you also need to specify what should be displayed while it is loading. You can do this by wrapping the lazy component or any of its parents into a [`<Suspense>`](/reference/react/Suspense) boundary:
 
@@ -78,14 +78,14 @@ Now that your component's code loads on demand, you also need to specify what sh
 <Suspense fallback={<Loading />}>
   <h2>Preview</h2>
   <MarkdownPreview />
- </Suspense>
+</Suspense>
 ```
 
 In this example, the code for `MarkdownPreview` won't be loaded until you attempt to render it. If `MarkdownPreview` hasn't loaded yet, `Loading` will be shown in its place. Try ticking the checkbox:
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState, Suspense, lazy } from 'react';
 import Loading from './Loading.js';
 
@@ -120,13 +120,13 @@ function delayForDemo(promise) {
 }
 ```
 
-```js Loading.js
+```js src/Loading.js
 export default function Loading() {
   return <p><i>Loading...</i></p>;
 }
 ```
 
-```js MarkdownPreview.js
+```js src/MarkdownPreview.js
 import { Remarkable } from 'remarkable';
 
 const md = new Remarkable();
diff --git a/src/content/reference/react/legacy.md b/src/content/reference/react/legacy.md
index 407232ada..b22a9c97e 100644
--- a/src/content/reference/react/legacy.md
+++ b/src/content/reference/react/legacy.md
@@ -17,18 +17,19 @@ These APIs are exported from the `react` package, but they are not recommended f
 * [`Component`](/reference/react/Component) lets you define a React component as a JavaScript class. [See alternatives.](/reference/react/Component#alternatives)
 * [`createElement`](/reference/react/createElement) lets you create a React element. Typically, you'll use JSX instead.
 * [`createRef`](/reference/react/createRef) creates a ref object which can contain arbitrary value. [See alternatives.](/reference/react/createRef#alternatives)
+* [`forwardRef`](/reference/react/forwardRef) lets your component expose a DOM node to parent component with a [ref.](/learn/manipulating-the-dom-with-refs)
 * [`isValidElement`](/reference/react/isValidElement) checks whether a value is a React element. Typically used with [`cloneElement`.](/reference/react/cloneElement)
 * [`PureComponent`](/reference/react/PureComponent) is similar to [`Component`,](/reference/react/Component) but it skip re-renders with same props. [See alternatives.](/reference/react/PureComponent#alternatives)
 
-
 ---
 
-## Deprecated APIs {/*deprecated-apis*/}
-
-<Deprecated>
-
-These APIs will be removed in a future major version of React.
+## Removed APIs {/*removed-apis*/}
 
-</Deprecated>
+These APIs were removed in React 19:
 
-* [`createFactory`](/reference/react/createFactory) lets you create a function that produces React elements of a certain type.
+* [`createFactory`](https://18.react.dev/reference/react/createFactory): use JSX instead.
+* Class Components: [`static contextTypes`](https://18.react.dev//reference/react/Component#static-contexttypes): use [`static contextType`](#static-contexttype) instead.
+* Class Components: [`static childContextTypes`](https://18.react.dev//reference/react/Component#static-childcontexttypes): use [`static contextType`](#static-contexttype) instead.
+* Class Components: [`static getChildContext`](https://18.react.dev//reference/react/Component#getchildcontext): use [`Context.Provider`](/reference/react/createContext#provider) instead.
+* Class Components: [`static propTypes`](https://18.react.dev//reference/react/Component#static-proptypes): use a type system like [TypeScript](https://www.typescriptlang.org/) instead.
+* Class Components: [`this.refs`](https://18.react.dev//reference/react/Component#refs): use [`createRef`](/reference/react/createRef) instead.
diff --git a/src/content/reference/react/startTransition.md b/src/content/reference/react/startTransition.md
index 4773d77c7..5956bb070 100644
--- a/src/content/reference/react/startTransition.md
+++ b/src/content/reference/react/startTransition.md
@@ -4,10 +4,10 @@ title: startTransition
 
 <Intro>
 
-`startTransition` lets you update the state without blocking the UI.
+`startTransition` lets you render a part of the UI in the background.
 
 ```js
-startTransition(scope)
+startTransition(action)
 ```
 
 </Intro>
@@ -18,9 +18,9 @@ startTransition(scope)
 
 ## Reference {/*reference*/}
 
-### `startTransition(scope)` {/*starttransitionscope*/}
+### `startTransition(action)` {/*starttransition*/}
 
-The `startTransition` function lets you mark a state update as a transition.
+The `startTransition` function lets you mark a state update as a Transition.
 
 ```js {7,9}
 import { startTransition } from 'react';
@@ -41,7 +41,7 @@ function TabContainer() {
 
 #### Parameters {/*parameters*/}
 
-* `scope`: A function that updates some state by calling one or more [`set` functions.](/reference/react/useState#setstate) React immediately calls `scope` with no parameters and marks all state updates scheduled synchronously during the `scope` function call as transitions. They will be [non-blocking](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition) and [will not display unwanted loading indicators.](/reference/react/useTransition#preventing-unwanted-loading-indicators)
+* `action`: A function that updates some state by calling one or more [`set` functions](/reference/react/useState#setstate). React calls `action` immediately with no parameters and marks all state updates scheduled synchronously during the `action` function call as Transitions. Any async calls awaited in the `action` will be included in the transition, but currently require wrapping any `set` functions after the `await` in an additional `startTransition` (see [Troubleshooting](#react-doesnt-treat-my-state-update-after-await-as-a-transition)). State updates marked as Transitions will be [non-blocking](#marking-a-state-update-as-a-non-blocking-transition) and [will not display unwanted loading indicators.](#preventing-unwanted-loading-indicators).
 
 #### Returns {/*returns*/}
 
@@ -49,25 +49,27 @@ function TabContainer() {
 
 #### Caveats {/*caveats*/}
 
-* `startTransition` does not provide a way to track whether a transition is pending. To show a pending indicator while the transition is ongoing, you need [`useTransition`](/reference/react/useTransition) instead.
+* `startTransition` does not provide a way to track whether a Transition is pending. To show a pending indicator while the Transition is ongoing, you need [`useTransition`](/reference/react/useTransition) instead.
 
-* You can wrap an update into a transition only if you have access to the `set` function of that state. If you want to start a transition in response to some prop or a custom Hook return value, try [`useDeferredValue`](/reference/react/useDeferredValue) instead.
+* You can wrap an update into a Transition only if you have access to the `set` function of that state. If you want to start a Transition in response to some prop or a custom Hook return value, try [`useDeferredValue`](/reference/react/useDeferredValue) instead.
 
-* The function you pass to `startTransition` must be synchronous. React immediately executes this function, marking all state updates that happen while it executes as transitions. If you try to perform more state updates later (for example, in a timeout), they won't be marked as transitions.
+* The function you pass to the of `startTransition` is called immediately, marking all state updates that happen while it executes as Transitions. If you try to perform state updates in a `setTimeout`, for example, they won't be marked as Transitions.
 
-* A state update marked as a transition will be interrupted by other state updates. For example, if you update a chart component inside a transition, but then start typing into an input while the chart is in the middle of a re-render, React will restart the rendering work on the chart component after handling the input state update.
+* You must wrap any state updates after any async requests in another `startTransition` to mark them as Transitions. This is a known limitation that we will fix in the future (see [Troubleshooting](#react-doesnt-treat-my-state-update-after-await-as-a-transition)).
+
+* A state update marked as a Transition will be interrupted by other state updates. For example, if you update a chart component inside a Transition, but then start typing into an input while the chart is in the middle of a re-render, React will restart the rendering work on the chart component after handling the input state update.
 
 * Transition updates can't be used to control text inputs.
 
-* If there are multiple ongoing transitions, React currently batches them together. This is a limitation that will likely be removed in a future release.
+* If there are multiple ongoing Transitions, React currently batches them together. This is a limitation that may be removed in a future release.
 
 ---
 
 ## Usage {/*usage*/}
 
-### Marking a state update as a non-blocking transition {/*marking-a-state-update-as-a-non-blocking-transition*/}
+### Marking a state update as a non-blocking Transition {/*marking-a-state-update-as-a-non-blocking-transition*/}
 
-You can mark a state update as a *transition* by wrapping it in a `startTransition` call:
+You can mark a state update as a *Transition* by wrapping it in a `startTransition` call:
 
 ```js {7,9}
 import { startTransition } from 'react';
@@ -86,12 +88,12 @@ function TabContainer() {
 
 Transitions let you keep the user interface updates responsive even on slow devices.
 
-With a transition, your UI stays responsive in the middle of a re-render. For example, if the user clicks a tab but then change their mind and click another tab, they can do that without waiting for the first re-render to finish.
+With a Transition, your UI stays responsive in the middle of a re-render. For example, if the user clicks a tab but then change their mind and click another tab, they can do that without waiting for the first re-render to finish.
 
 <Note>
 
-`startTransition` is very similar to [`useTransition`](/reference/react/useTransition), except that it does not provide the `isPending` flag to track whether a transition is ongoing. You can call `startTransition` when `useTransition` is not available. For example, `startTransition` works outside components, such as from a data library.
+`startTransition` is very similar to [`useTransition`](/reference/react/useTransition), except that it does not provide the `isPending` flag to track whether a Transition is ongoing. You can call `startTransition` when `useTransition` is not available. For example, `startTransition` works outside components, such as from a data library.
 
-[Learn about transitions and see examples on the `useTransition` page.](/reference/react/useTransition)
+[Learn about Transitions and see examples on the `useTransition` page.](/reference/react/useTransition)
 
 </Note>
diff --git a/src/content/reference/react/use-client.md b/src/content/reference/react/use-client.md
deleted file mode 100644
index f0510415b..000000000
--- a/src/content/reference/react/use-client.md
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: "'use client'"
-canary: true
----
-
-<Canary>
-
-`'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>
-
-`'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 a work in progress. 
-
-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
deleted file mode 100644
index 4acea191c..000000000
--- a/src/content/reference/react/use-server.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: "'use server'"
-canary: true
----
-
-<Canary>
-
-`'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.
-
-</Canary>
-
-
-<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.)
-
-## Usage {/*usage*/}
-
-<Wip>
-This section is a work in progress. 
-
-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.md b/src/content/reference/react/use.md
new file mode 100644
index 000000000..48b21fa61
--- /dev/null
+++ b/src/content/reference/react/use.md
@@ -0,0 +1,451 @@
+---
+title: use
+---
+
+<Intro>
+
+`use` is a React API that lets you read the value of a resource like a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or [context](/learn/passing-data-deeply-with-context).
+
+```js
+const value = use(resource);
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `use(resource)` {/*use*/}
+
+Call `use` in your component to read the value of a resource like a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or [context](/learn/passing-data-deeply-with-context).
+
+```jsx
+import { use } from 'react';
+
+function MessageComponent({ messagePromise }) {
+  const message = use(messagePromise);
+  const theme = use(ThemeContext);
+  // ...
+```
+
+Unlike React Hooks, `use` can be called within loops and conditional statements like `if`. Like React Hooks, the function that calls `use` must be a Component or Hook.
+
+When called with a Promise, the `use` API integrates with [`Suspense`](/reference/react/Suspense) and [error boundaries](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). The component calling `use` *suspends* while the Promise passed to `use` is pending. If the component that calls `use` is wrapped in a Suspense boundary, the fallback will be displayed.  Once the Promise is resolved, the Suspense fallback is replaced by the rendered components using the data returned by the `use` API. If the Promise passed to `use` is rejected, the fallback of the nearest Error Boundary will be displayed.
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `resource`: this is the source of the data you want to read a value from. A resource can be a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or a [context](/learn/passing-data-deeply-with-context).
+
+#### Returns {/*returns*/}
+
+The `use` API returns the value that was read from the resource like the resolved value of a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or [context](/learn/passing-data-deeply-with-context).
+
+#### Caveats {/*caveats*/}
+
+* The `use` API must be called inside a Component or a Hook.
+* When fetching data in a [Server Component](/reference/rsc/server-components), prefer `async` and `await` over `use`. `async` and `await` pick up rendering from the point where `await` was invoked, whereas `use` re-renders the component after the data is resolved.
+* Prefer creating Promises in [Server Components](/reference/rsc/server-components) and passing them to [Client Components](/reference/rsc/use-client) over creating Promises in Client Components. Promises created in Client Components are recreated on every render. Promises passed from a Server Component to a Client Component are stable across re-renders. [See this example](#streaming-data-from-server-to-client).
+
+---
+
+## Usage {/*usage*/}
+
+### Reading context with `use` {/*reading-context-with-use*/}
+
+When a [context](/learn/passing-data-deeply-with-context) is passed to `use`, it works similarly to [`useContext`](/reference/react/useContext). While `useContext` must be called at the top level of your component, `use` can be called inside conditionals like `if` and loops like `for`. `use` is preferred over `useContext` because it is more flexible.
+
+```js [[2, 4, "theme"], [1, 4, "ThemeContext"]]
+import { use } from 'react';
+
+function Button() {
+  const theme = use(ThemeContext);
+  // ... 
+```
+
+`use` returns the <CodeStep step={2}>context value</CodeStep> for the <CodeStep step={1}>context</CodeStep> you passed. To determine the context value, React searches the component tree and finds **the closest context provider above** for that particular context.
+
+To pass context to a `Button`, wrap it or one of its parent components into the corresponding context provider.
+
+```js [[1, 3, "ThemeContext"], [2, 3, "\\"dark\\""], [1, 5, "ThemeContext"]]
+function MyPage() {
+  return (
+    <ThemeContext.Provider value="dark">
+      <Form />
+    </ThemeContext.Provider>
+  );
+}
+
+function Form() {
+  // ... renders buttons inside ...
+}
+```
+
+It doesn't matter how many layers of components there are between the provider and the `Button`. When a `Button` *anywhere* inside of `Form` calls `use(ThemeContext)`, it will receive `"dark"` as the value.
+
+Unlike [`useContext`](/reference/react/useContext), <CodeStep step={2}>`use`</CodeStep> can be called in conditionals and loops like <CodeStep step={1}>`if`</CodeStep>.
+
+```js [[1, 2, "if"], [2, 3, "use"]]
+function HorizontalRule({ show }) {
+  if (show) {
+    const theme = use(ThemeContext);
+    return <hr className={theme} />;
+  }
+  return false;
+}
+```
+
+<CodeStep step={2}>`use`</CodeStep> is called from inside a <CodeStep step={1}>`if`</CodeStep> statement, allowing you to conditionally read values from a Context.
+
+<Pitfall>
+
+Like `useContext`, `use(context)` always looks for the closest context provider *above* the component that calls it. It searches upwards and **does not** consider context providers in the component from which you're calling `use(context)`.
+
+</Pitfall>
+
+<Sandpack>
+
+```js
+import { createContext, use } from 'react';
+
+const ThemeContext = createContext(null);
+
+export default function MyApp() {
+  return (
+    <ThemeContext.Provider value="dark">
+      <Form />
+    </ThemeContext.Provider>
+  )
+}
+
+function Form() {
+  return (
+    <Panel title="Welcome">
+      <Button show={true}>Sign up</Button>
+      <Button show={false}>Log in</Button>
+    </Panel>
+  );
+}
+
+function Panel({ title, children }) {
+  const theme = use(ThemeContext);
+  const className = 'panel-' + theme;
+  return (
+    <section className={className}>
+      <h1>{title}</h1>
+      {children}
+    </section>
+  )
+}
+
+function Button({ show, children }) {
+  if (show) {
+    const theme = use(ThemeContext);
+    const className = 'button-' + theme;
+    return (
+      <button className={className}>
+        {children}
+      </button>
+    );
+  }
+  return false
+}
+```
+
+```css
+.panel-light,
+.panel-dark {
+  border: 1px solid black;
+  border-radius: 4px;
+  padding: 20px;
+}
+.panel-light {
+  color: #222;
+  background: #fff;
+}
+
+.panel-dark {
+  color: #fff;
+  background: rgb(23, 32, 42);
+}
+
+.button-light,
+.button-dark {
+  border: 1px solid #777;
+  padding: 5px;
+  margin-right: 10px;
+  margin-top: 10px;
+}
+
+.button-dark {
+  background: #222;
+  color: #fff;
+}
+
+.button-light {
+  background: #fff;
+  color: #222;
+}
+```
+
+</Sandpack>
+
+### Streaming data from the server to the client {/*streaming-data-from-server-to-client*/}
+
+Data can be streamed from the server to the client by passing a Promise as a prop from a <CodeStep step={1}>Server Component</CodeStep> to a <CodeStep step={2}>Client Component</CodeStep>.
+
+```js [[1, 4, "App"], [2, 2, "Message"], [3, 7, "Suspense"], [4, 8, "messagePromise", 30], [4, 5, "messagePromise"]]
+import { fetchMessage } from './lib.js';
+import { Message } from './message.js';
+
+export default function App() {
+  const messagePromise = fetchMessage();
+  return (
+    <Suspense fallback={<p>waiting for message...</p>}>
+      <Message messagePromise={messagePromise} />
+    </Suspense>
+  );
+}
+```
+
+The <CodeStep step={2}>Client Component</CodeStep> then takes <CodeStep step={4}>the Promise it received as a prop</CodeStep> and passes it to the <CodeStep step={5}>`use`</CodeStep> API. This allows the <CodeStep step={2}>Client Component</CodeStep> to read the value from <CodeStep step={4}>the Promise</CodeStep> that was initially created by the Server Component.
+
+```js [[2, 6, "Message"], [4, 6, "messagePromise"], [4, 7, "messagePromise"], [5, 7, "use"]]
+// message.js
+'use client';
+
+import { use } from 'react';
+
+export function Message({ messagePromise }) {
+  const messageContent = use(messagePromise);
+  return <p>Here is the message: {messageContent}</p>;
+}
+```
+Because <CodeStep step={2}>`Message`</CodeStep> is wrapped in <CodeStep step={3}>[`Suspense`](/reference/react/Suspense)</CodeStep>, the fallback will be displayed until the Promise is resolved. When the Promise is resolved, the value will be read by the <CodeStep step={5}>`use`</CodeStep> API and the <CodeStep step={2}>`Message`</CodeStep> component will replace the Suspense fallback.
+
+<Sandpack>
+
+```js src/message.js active
+"use client";
+
+import { use, Suspense } from "react";
+
+function Message({ messagePromise }) {
+  const messageContent = use(messagePromise);
+  return <p>Here is the message: {messageContent}</p>;
+}
+
+export function MessageContainer({ messagePromise }) {
+  return (
+    <Suspense fallback={<p>⌛Downloading message...</p>}>
+      <Message messagePromise={messagePromise} />
+    </Suspense>
+  );
+}
+```
+
+```js src/App.js hidden
+import { useState } from "react";
+import { MessageContainer } from "./message.js";
+
+function fetchMessage() {
+  return new Promise((resolve) => setTimeout(resolve, 1000, "⚛️"));
+}
+
+export default function App() {
+  const [messagePromise, setMessagePromise] = useState(null);
+  const [show, setShow] = useState(false);
+  function download() {
+    setMessagePromise(fetchMessage());
+    setShow(true);
+  }
+
+  if (show) {
+    return <MessageContainer messagePromise={messagePromise} />;
+  } else {
+    return <button onClick={download}>Download message</button>;
+  }
+}
+```
+
+```js src/index.js hidden
+import React, { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './styles.css';
+
+// TODO: update this example to use
+// the Codesandbox Server Component
+// demo environment once it is created
+import App from './App';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
+```
+
+</Sandpack>
+
+<Note>
+
+When passing a Promise from a Server Component to a Client Component, its resolved value must be serializable to pass between server and client. Data types like functions aren't serializable and cannot be the resolved value of such a Promise.
+
+</Note>
+
+
+<DeepDive>
+
+#### Should I resolve a Promise in a Server or Client Component? {/*resolve-promise-in-server-or-client-component*/}
+
+A Promise can be passed from a Server Component to a Client Component and resolved in the Client Component with the `use` API. You can also resolve the Promise in a Server Component with `await` and pass the required data to the Client Component as a prop.
+
+```js
+export default async function App() {
+  const messageContent = await fetchMessage();
+  return <Message messageContent={messageContent} />
+}
+```
+
+But using `await` in a [Server Component](/reference/react/components#server-components) will block its rendering until the `await` statement is finished. Passing a Promise from a Server Component to a Client Component prevents the Promise from blocking the rendering of the Server Component.
+
+</DeepDive>
+
+### Dealing with rejected Promises {/*dealing-with-rejected-promises*/}
+
+In some cases a Promise passed to `use` could be rejected. You can handle rejected Promises by either:
+
+1. [Displaying an error to users with an error boundary.](#displaying-an-error-to-users-with-error-boundary)
+2. [Providing an alternative value with `Promise.catch`](#providing-an-alternative-value-with-promise-catch)
+
+<Pitfall>
+`use` cannot be called in a try-catch block. Instead of a try-catch block [wrap your component in an Error Boundary](#displaying-an-error-to-users-with-error-boundary), or [provide an alternative value to use with the Promise's `.catch` method](#providing-an-alternative-value-with-promise-catch).
+</Pitfall>
+
+#### Displaying an error to users with an error boundary {/*displaying-an-error-to-users-with-error-boundary*/}
+
+If you'd like to display an error to your users when a Promise is rejected, you can use an [error boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). To use an error boundary, wrap the component where you are calling the `use` API in an error boundary. If the Promise passed to `use` is rejected the fallback for the error boundary will be displayed.
+
+<Sandpack>
+
+```js src/message.js active
+"use client";
+
+import { use, Suspense } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+
+export function MessageContainer({ messagePromise }) {
+  return (
+    <ErrorBoundary fallback={<p>⚠️Something went wrong</p>}>
+      <Suspense fallback={<p>⌛Downloading message...</p>}>
+        <Message messagePromise={messagePromise} />
+      </Suspense>
+    </ErrorBoundary>
+  );
+}
+
+function Message({ messagePromise }) {
+  const content = use(messagePromise);
+  return <p>Here is the message: {content}</p>;
+}
+```
+
+```js src/App.js hidden
+import { useState } from "react";
+import { MessageContainer } from "./message.js";
+
+function fetchMessage() {
+  return new Promise((resolve, reject) => setTimeout(reject, 1000));
+}
+
+export default function App() {
+  const [messagePromise, setMessagePromise] = useState(null);
+  const [show, setShow] = useState(false);
+  function download() {
+    setMessagePromise(fetchMessage());
+    setShow(true);
+  }
+
+  if (show) {
+    return <MessageContainer messagePromise={messagePromise} />;
+  } else {
+    return <button onClick={download}>Download message</button>;
+  }
+}
+```
+
+```js src/index.js hidden
+import React, { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './styles.css';
+
+// TODO: update this example to use
+// the Codesandbox Server Component
+// demo environment once it is created
+import App from './App';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
+```
+
+</Sandpack>
+
+#### Providing an alternative value with `Promise.catch` {/*providing-an-alternative-value-with-promise-catch*/}
+
+If you'd like to provide an alternative value when the Promise passed to `use` is rejected you can use the Promise's <CodeStep step={1}>[`catch`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch)</CodeStep> method.
+
+```js [[1, 6, "catch"],[2, 7, "return"]]
+import { Message } from './message.js';
+
+export default function App() {
+  const messagePromise = new Promise((resolve, reject) => {
+    reject();
+  }).catch(() => {
+    return "no new message found.";
+  });
+
+  return (
+    <Suspense fallback={<p>waiting for message...</p>}>
+      <Message messagePromise={messagePromise} />
+    </Suspense>
+  );
+}
+```
+
+To use the Promise's <CodeStep step={1}>`catch`</CodeStep> method, call <CodeStep step={1}>`catch`</CodeStep> on the Promise object. <CodeStep step={1}>`catch`</CodeStep> takes a single argument: a function that takes an error message as an argument. Whatever is <CodeStep step={2}>returned</CodeStep> by the function passed to <CodeStep step={1}>`catch`</CodeStep> will be used as the resolved value of the Promise.
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### "Suspense Exception: This is not a real error!" {/*suspense-exception-error*/}
+
+You are either calling `use` outside of a React Component or Hook function, or calling `use` in a try–catch block. If you are calling `use` inside a try–catch block, wrap your component in an error boundary, or call the Promise's `catch` to catch the error and resolve the Promise with another value. [See these examples](#dealing-with-rejected-promises).
+
+If you are calling `use` outside a React Component or Hook function, move the `use` call to a React Component or Hook function.
+
+```jsx
+function MessageComponent({messagePromise}) {
+  function download() {
+    // ❌ the function calling `use` is not a Component or Hook
+    const message = use(messagePromise);
+    // ...
+```
+
+Instead, call `use` outside any component closures, where the function that calls `use` is a Component or Hook.
+
+```jsx
+function MessageComponent({messagePromise}) {
+  // ✅ `use` is being called from a component. 
+  const message = use(messagePromise);
+  // ...
+```
diff --git a/src/content/reference/react/useActionState.md b/src/content/reference/react/useActionState.md
new file mode 100644
index 000000000..a6905cec2
--- /dev/null
+++ b/src/content/reference/react/useActionState.md
@@ -0,0 +1,272 @@
+---
+title: useActionState
+---
+
+<Intro>
+
+`useActionState` is a Hook that allows you to update state based on the result of a form action.
+
+```js
+const [state, formAction, isPending] = useActionState(fn, initialState, permalink?);
+```
+
+</Intro>
+
+<Note>
+
+In earlier React Canary versions, this API was part of React DOM and called `useFormState`.
+
+</Note>
+
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `useActionState(action, initialState, permalink?)` {/*useactionstate*/}
+
+{/* TODO T164397693: link to actions documentation once it exists */}
+
+Call `useActionState` at the top level of your component to create component state that is updated [when a form action is invoked](/reference/react-dom/components/form). You pass `useActionState` an existing form action function as well as an initial state, and it returns a new action that you use in your form, along with the latest form state and whether the Action is still pending. The latest form state is also passed to the function that you provided.
+
+```js
+import { useActionState } from "react";
+
+async function increment(previousState, formData) {
+  return previousState + 1;
+}
+
+function StatefulForm({}) {
+  const [state, formAction] = useActionState(increment, 0);
+  return (
+    <form>
+      {state}
+      <button formAction={formAction}>Increment</button>
+    </form>
+  )
+}
+```
+
+The form state is the value returned by the action when the form was last submitted. If the form has not yet been submitted, it is the initial state that you pass.
+
+If used with a Server Function, `useActionState` allows the server's response from submitting the form to be shown even before hydration has completed.
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `fn`: The function to be called when the form is submitted or button pressed. When the function is called, it will receive the previous state of the form (initially the `initialState` that you pass, subsequently its previous return value) as its initial argument, followed by the arguments that a form action normally receives.
+* `initialState`: The value you want the state to be initially. It can be any serializable value. This argument is ignored after the action is first invoked.
+* **optional** `permalink`: A string containing the unique page URL that this form modifies. For use on pages with dynamic content (eg: feeds) in conjunction with progressive enhancement: if `fn` is a [server function](/reference/rsc/server-functions) and the form is submitted before the JavaScript bundle loads, the browser will navigate to the specified permalink URL, rather than the current page's URL. Ensure that the same form component is rendered on the destination page (including the same action `fn` and `permalink`) so that React knows how to pass the state through. Once the form has been hydrated, this parameter has no effect.
+
+{/* TODO T164397693: link to serializable values docs once it exists */}
+
+#### Returns {/*returns*/}
+
+`useActionState` returns an array with the following values:
+
+1. The current state. During the first render, it will match the `initialState` you have passed. After the action is invoked, it will match the value returned by the action.
+2. A new action that you can pass as the `action` prop to your `form` component or `formAction` prop to any `button` component within the form.
+3. The `isPending` flag that tells you whether there is a pending Transition.
+
+#### Caveats {/*caveats*/}
+
+* When used with a framework that supports React Server Components, `useActionState` lets you make forms interactive before JavaScript has executed on the client. When used without Server Components, it is equivalent to component local state.
+* The function passed to `useActionState` receives an extra argument, the previous or initial state, as its first argument. This makes its signature different than if it were used directly as a form action without using `useActionState`.
+
+---
+
+## Usage {/*usage*/}
+
+### Using information returned by a form action {/*using-information-returned-by-a-form-action*/}
+
+Call `useActionState` at the top level of your component to access the return value of an action from the last time a form was submitted.
+
+```js [[1, 5, "state"], [2, 5, "formAction"], [3, 5, "action"], [4, 5, "null"], [2, 8, "formAction"]]
+import { useActionState } from 'react';
+import { action } from './actions.js';
+
+function MyComponent() {
+  const [state, formAction] = useActionState(action, null);
+  // ...
+  return (
+    <form action={formAction}>
+      {/* ... */}
+    </form>
+  );
+}
+```
+
+`useActionState` returns an array with the following items:
+
+1. The <CodeStep step={1}>current state</CodeStep> of the form, which is initially set to the <CodeStep step={4}>initial state</CodeStep> you provided, and after the form is submitted is set to the return value of the <CodeStep step={3}>action</CodeStep> you provided.
+2. A <CodeStep step={2}>new action</CodeStep> that you pass to `<form>` as its `action` prop.
+3. A <CodeStep step={1}>pending state</CodeStep> that you can utilise whilst your action is processing.
+
+When the form is submitted, the <CodeStep step={3}>action</CodeStep> function that you provided will be called. Its return value will become the new <CodeStep step={1}>current state</CodeStep> of the form.
+
+The <CodeStep step={3}>action</CodeStep> that you provide will also receive a new first argument, namely the <CodeStep step={1}>current state</CodeStep> of the form. The first time the form is submitted, this will be the <CodeStep step={4}>initial state</CodeStep> you provided, while with subsequent submissions, it will be the return value from the last time the action was called. The rest of the arguments are the same as if `useActionState` had not been used.
+
+```js [[3, 1, "action"], [1, 1, "currentState"]]
+function action(currentState, formData) {
+  // ...
+  return 'next state';
+}
+```
+
+<Recipes titleText="Display information after submitting a form" titleId="display-information-after-submitting-a-form">
+
+#### Display form errors {/*display-form-errors*/}
+
+To display messages such as an error message or toast that's returned by a Server Function, wrap the action in a call to `useActionState`.
+
+<Sandpack>
+
+```js src/App.js
+import { useActionState, useState } from "react";
+import { addToCart } from "./actions.js";
+
+function AddToCartForm({itemID, itemTitle}) {
+  const [message, formAction, isPending] = useActionState(addToCart, null);
+  return (
+    <form action={formAction}>
+      <h2>{itemTitle}</h2>
+      <input type="hidden" name="itemID" value={itemID} />
+      <button type="submit">Add to Cart</button>
+      {isPending ? "Loading..." : message}
+    </form>
+  );
+}
+
+export default function App() {
+  return (
+    <>
+      <AddToCartForm itemID="1" itemTitle="JavaScript: The Definitive Guide" />
+      <AddToCartForm itemID="2" itemTitle="JavaScript: The Good Parts" />
+    </>
+  )
+}
+```
+
+```js src/actions.js
+"use server";
+
+export async function addToCart(prevState, queryData) {
+  const itemID = queryData.get('itemID');
+  if (itemID === "1") {
+    return "Added to cart";
+  } else {
+    // Add a fake delay to make waiting noticeable.
+    await new Promise(resolve => {
+      setTimeout(resolve, 2000);
+    });
+    return "Couldn't add to cart: the item is sold out.";
+  }
+}
+```
+
+```css src/styles.css hidden
+form {
+  border: solid 1px black;
+  margin-bottom: 24px;
+  padding: 12px
+}
+
+form button {
+  margin-right: 12px;
+}
+```
+</Sandpack>
+
+<Solution />
+
+#### Display structured information after submitting a form {/*display-structured-information-after-submitting-a-form*/}
+
+The return value from a Server Function can be any serializable value. For example, it could be an object that includes a boolean indicating whether the action was successful, an error message, or updated information.
+
+<Sandpack>
+
+```js src/App.js
+import { useActionState, useState } from "react";
+import { addToCart } from "./actions.js";
+
+function AddToCartForm({itemID, itemTitle}) {
+  const [formState, formAction] = useActionState(addToCart, {});
+  return (
+    <form action={formAction}>
+      <h2>{itemTitle}</h2>
+      <input type="hidden" name="itemID" value={itemID} />
+      <button type="submit">Add to Cart</button>
+      {formState?.success &&
+        <div className="toast">
+          Added to cart! Your cart now has {formState.cartSize} items.
+        </div>
+      }
+      {formState?.success === false &&
+        <div className="error">
+          Failed to add to cart: {formState.message}
+        </div>
+      }
+    </form>
+  );
+}
+
+export default function App() {
+  return (
+    <>
+      <AddToCartForm itemID="1" itemTitle="JavaScript: The Definitive Guide" />
+      <AddToCartForm itemID="2" itemTitle="JavaScript: The Good Parts" />
+    </>
+  )
+}
+```
+
+```js src/actions.js
+"use server";
+
+export async function addToCart(prevState, queryData) {
+  const itemID = queryData.get('itemID');
+  if (itemID === "1") {
+    return {
+      success: true,
+      cartSize: 12,
+    };
+  } else {
+    return {
+      success: false,
+      message: "The item is sold out.",
+    };
+  }
+}
+```
+
+```css src/styles.css hidden
+form {
+  border: solid 1px black;
+  margin-bottom: 24px;
+  padding: 12px
+}
+
+form button {
+  margin-right: 12px;
+}
+```
+</Sandpack>
+
+<Solution />
+
+</Recipes>
+
+## Troubleshooting {/*troubleshooting*/}
+
+### My action can no longer read the submitted form data {/*my-action-can-no-longer-read-the-submitted-form-data*/}
+
+When you wrap an action with `useActionState`, it gets an extra argument *as its first argument*. The submitted form data is therefore its *second* argument instead of its first as it would usually be. The new first argument that gets added is the current state of the form.
+
+```js
+function action(currentState, formData) {
+  // ...
+}
+```
diff --git a/src/content/reference/react/useCallback.md b/src/content/reference/react/useCallback.md
index 63b36a600..abcd474df 100644
--- a/src/content/reference/react/useCallback.md
+++ b/src/content/reference/react/useCallback.md
@@ -251,7 +251,7 @@ Next, try toggling the theme. **Thanks to `useCallback` together with [`memo`](/
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import ProductPage from './ProductPage.js';
 
@@ -278,7 +278,7 @@ export default function App() {
 }
 ```
 
-```js ProductPage.js active
+```js src/ProductPage.js active
 import { useCallback } from 'react';
 import ShippingForm from './ShippingForm.js';
 
@@ -304,7 +304,7 @@ function post(url, data) {
 }
 ```
 
-```js ShippingForm.js
+```js src/ShippingForm.js
 import { memo, useState } from 'react';
 
 const ShippingForm = memo(function ShippingForm({ onSubmit }) {
@@ -391,7 +391,7 @@ Unlike in the previous example, toggling the theme is also slow now! This is bec
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import ProductPage from './ProductPage.js';
 
@@ -418,7 +418,7 @@ export default function App() {
 }
 ```
 
-```js ProductPage.js active
+```js src/ProductPage.js active
 import ShippingForm from './ShippingForm.js';
 
 export default function ProductPage({ productId, referrer, theme }) {
@@ -443,7 +443,7 @@ function post(url, data) {
 }
 ```
 
-```js ShippingForm.js
+```js src/ShippingForm.js
 import { memo, useState } from 'react';
 
 const ShippingForm = memo(function ShippingForm({ onSubmit }) {
@@ -525,7 +525,7 @@ However, here is the same code **with the artificial slowdown removed.** Does th
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import ProductPage from './ProductPage.js';
 
@@ -552,7 +552,7 @@ export default function App() {
 }
 ```
 
-```js ProductPage.js active
+```js src/ProductPage.js active
 import ShippingForm from './ShippingForm.js';
 
 export default function ProductPage({ productId, referrer, theme }) {
@@ -577,7 +577,7 @@ function post(url, data) {
 }
 ```
 
-```js ShippingForm.js
+```js src/ShippingForm.js
 import { memo, useState } from 'react';
 
 const ShippingForm = memo(function ShippingForm({ onSubmit }) {
@@ -711,7 +711,7 @@ function ChatRoom({ roomId }) {
 
   useEffect(() => {
     const options = createOptions();
-    const connection = createConnection();
+    const connection = createConnection(options);
     connection.connect();
     // ...
 ```
@@ -722,7 +722,7 @@ This creates a problem. [Every reactive value must be declared as a dependency o
 ```js {6}
   useEffect(() => {
     const options = createOptions();
-    const connection = createConnection();
+    const connection = createConnection(options);
     connection.connect();
     return () => connection.disconnect();
   }, [createOptions]); // 🔴 Problem: This dependency changes on every render
@@ -744,7 +744,7 @@ function ChatRoom({ roomId }) {
 
   useEffect(() => {
     const options = createOptions();
-    const connection = createConnection();
+    const connection = createConnection(options);
     connection.connect();
     return () => connection.disconnect();
   }, [createOptions]); // ✅ Only changes when createOptions changes
@@ -766,7 +766,7 @@ function ChatRoom({ roomId }) {
     }
 
     const options = createOptions();
-    const connection = createConnection();
+    const connection = createConnection(options);
     connection.connect();
     return () => connection.disconnect();
   }, [roomId]); // ✅ Only changes when roomId changes
diff --git a/src/content/reference/react/useContext.md b/src/content/reference/react/useContext.md
index ed231c394..ce06e7035 100644
--- a/src/content/reference/react/useContext.md
+++ b/src/content/reference/react/useContext.md
@@ -457,7 +457,7 @@ function LoginForm() {
   const {setCurrentUser} = useContext(CurrentUserContext);
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
-  const canLogin = firstName !== '' && lastName !== '';
+  const canLogin = firstName.trim() !== '' && lastName.trim() !== '';
   return (
     <>
       <label>
@@ -745,7 +745,7 @@ Read a [full walkthrough](/learn/scaling-up-with-reducer-and-context) of this ex
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
 import { TasksProvider } from './TasksContext.js';
@@ -761,7 +761,7 @@ export default function TaskApp() {
 }
 ```
 
-```js TasksContext.js
+```js src/TasksContext.js
 import { createContext, useContext, useReducer } from 'react';
 
 const TasksContext = createContext(null);
@@ -825,7 +825,7 @@ const initialTasks = [
 ];
 ```
 
-```js AddTask.js
+```js src/AddTask.js
 import { useState, useContext } from 'react';
 import { useTasksDispatch } from './TasksContext.js';
 
@@ -854,7 +854,7 @@ export default function AddTask() {
 let nextId = 3;
 ```
 
-```js TaskList.js
+```js src/TaskList.js
 import { useState, useContext } from 'react';
 import { useTasks, useTasksDispatch } from './TasksContext.js';
 
@@ -1222,7 +1222,7 @@ export default function Page() {
 }
 ```
 
-```js Section.js
+```js src/Section.js
 import { useContext } from 'react';
 import { LevelContext } from './LevelContext.js';
 
@@ -1238,7 +1238,7 @@ export default function Section({ children }) {
 }
 ```
 
-```js Heading.js
+```js src/Heading.js
 import { useContext } from 'react';
 import { LevelContext } from './LevelContext.js';
 
@@ -1265,7 +1265,7 @@ export default function Heading({ children }) {
 }
 ```
 
-```js LevelContext.js
+```js src/LevelContext.js
 import { createContext } from 'react';
 
 export const LevelContext = createContext(0);
diff --git a/src/content/reference/react/useDebugValue.md b/src/content/reference/react/useDebugValue.md
index 8826665e7..62db9e6b2 100644
--- a/src/content/reference/react/useDebugValue.md
+++ b/src/content/reference/react/useDebugValue.md
@@ -80,7 +80,7 @@ export default function App() {
 }
 ```
 
-```js useOnlineStatus.js active
+```js src/useOnlineStatus.js active
 import { useSyncExternalStore, useDebugValue } from 'react';
 
 export function useOnlineStatus() {
diff --git a/src/content/reference/react/useDeferredValue.md b/src/content/reference/react/useDeferredValue.md
index f25054542..3217f870d 100644
--- a/src/content/reference/react/useDeferredValue.md
+++ b/src/content/reference/react/useDeferredValue.md
@@ -18,7 +18,7 @@ const deferredValue = useDeferredValue(value)
 
 ## Reference {/*reference*/}
 
-### `useDeferredValue(value)` {/*usedeferredvalue*/}
+### `useDeferredValue(value, initialValue?)` {/*usedeferredvalue*/}
 
 Call `useDeferredValue` at the top level of your component to get a deferred version of that value.
 
@@ -37,13 +37,17 @@ function SearchPage() {
 #### Parameters {/*parameters*/}
 
 * `value`: The value you want to defer. It can have any type.
+* **optional** `initialValue`: A value to use during the initial render of a component. If this option is omitted, `useDeferredValue` will not defer during the initial render, because there's no previous version of `value` that it can render instead.
+
 
 #### Returns {/*returns*/}
 
-During the initial render, the returned deferred value will be the same as the value you provided. During updates, React will first attempt a re-render with the old value (so it will return the old value), and then try another re-render in background with the new value (so it will return the updated value). 
+- `currentValue`: During the initial render, the returned deferred value will be the `initialValue`, or the same as the value you provided. During updates, React will first attempt a re-render with the old value (so it will return the old value), and then try another re-render in the background with the new value (so it will return the updated value).
 
 #### Caveats {/*caveats*/}
 
+- When an update is inside a Transition, `useDeferredValue` always returns the new `value` and does not spawn a deferred render, since the update is already deferred.
+
 - The values you pass to `useDeferredValue` should either be primitive values (like strings and numbers) or objects created outside of rendering. If you create a new object during rendering and immediately pass it to `useDeferredValue`, it will be different on every render, causing unnecessary background re-renders.
 
 - When `useDeferredValue` receives a different value (compared with [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)), in addition to the current render (when it still uses the previous value), it schedules a re-render in the background with the new value. The background re-render is interruptible: if there's another update to the `value`, React will restart the background re-render from scratch. For example, if the user is typing into an input faster than a chart receiving its deferred value can re-render, the chart will only re-render after the user stops typing.
@@ -76,16 +80,17 @@ function SearchPage() {
 
 During the initial render, the <CodeStep step={2}>deferred value</CodeStep> will be the same as the <CodeStep step={1}>value</CodeStep> you provided.
 
-During updates, the <CodeStep step={2}>deferred value</CodeStep> will "lag behind" the latest <CodeStep step={1}>value</CodeStep>. In particular, React will first re-render *without* updating the deferred value, and then try to re-render with the newly received value in background.
+During updates, the <CodeStep step={2}>deferred value</CodeStep> will "lag behind" the latest <CodeStep step={1}>value</CodeStep>. In particular, React will first re-render *without* updating the deferred value, and then try to re-render with the newly received value in the background.
 
 **Let's walk through an example to see when this is useful.**
 
 <Note>
 
-This example assumes you use one of Suspense-enabled data sources:
+This example assumes you use a Suspense-enabled data source:
 
 - 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)
+- Reading the value of a Promise with [`use`](/reference/react/use)
 
 [Learn more about Suspense and its limitations.](/reference/react/Suspense)
 
@@ -96,22 +101,7 @@ In this example, the `SearchResults` component [suspends](/reference/react/Suspe
 
 <Sandpack>
 
-```json package.json hidden
-{
-  "dependencies": {
-    "react": "experimental",
-    "react-dom": "experimental"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  }
-}
-```
-
-```js App.js
+```js src/App.js
 import { Suspense, useState } from 'react';
 import SearchResults from './SearchResults.js';
 
@@ -131,15 +121,10 @@ export default function App() {
 }
 ```
 
-```js SearchResults.js hidden
+```js src/SearchResults.js
+import {use} from 'react';
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
-
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
-
 export default function SearchResults({ query }) {
   if (query === '') {
     return null;
@@ -158,34 +143,9 @@ export default function SearchResults({ query }) {
     </ul>
   );
 }
-
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
-function use(promise) {
-  if (promise.status === 'fulfilled') {
-    return promise.value;
-  } else if (promise.status === 'rejected') {
-    throw promise.reason;
-  } else if (promise.status === 'pending') {
-    throw promise;
-  } else {
-    promise.status = 'pending';
-    promise.then(
-      result => {
-        promise.status = 'fulfilled';
-        promise.value = result;
-      },
-      reason => {
-        promise.status = 'rejected';
-        promise.reason = reason;
-      },      
-    );
-    throw promise;
-  }
-}
 ```
 
-```js data.js hidden
+```js src/data.js hidden
 // Note: the way you would do data fetching depends on
 // the framework that you use together with Suspense.
 // Normally, the caching logic would be inside a framework.
@@ -210,7 +170,7 @@ async function getData(url) {
 async function getSearchResults(query) {
   // Add a fake delay to make waiting noticeable.
   await new Promise(resolve => {
-    setTimeout(resolve, 500);
+    setTimeout(resolve, 1000);
   });
 
   const allAlbums = [{
@@ -310,22 +270,7 @@ Enter `"a"` in the example below, wait for the results to load, and then edit th
 
 <Sandpack>
 
-```json package.json hidden
-{
-  "dependencies": {
-    "react": "experimental",
-    "react-dom": "experimental"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  }
-}
-```
-
-```js App.js
+```js src/App.js
 import { Suspense, useState, useDeferredValue } from 'react';
 import SearchResults from './SearchResults.js';
 
@@ -346,15 +291,10 @@ export default function App() {
 }
 ```
 
-```js SearchResults.js hidden
+```js src/SearchResults.js
+import {use} from 'react';
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
-
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
-
 export default function SearchResults({ query }) {
   if (query === '') {
     return null;
@@ -373,34 +313,9 @@ export default function SearchResults({ query }) {
     </ul>
   );
 }
-
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
-function use(promise) {
-  if (promise.status === 'fulfilled') {
-    return promise.value;
-  } else if (promise.status === 'rejected') {
-    throw promise.reason;
-  } else if (promise.status === 'pending') {
-    throw promise;
-  } else {
-    promise.status = 'pending';
-    promise.then(
-      result => {
-        promise.status = 'fulfilled';
-        promise.value = result;
-      },
-      reason => {
-        promise.status = 'rejected';
-        promise.reason = reason;
-      },      
-    );
-    throw promise;
-  }
-}
 ```
 
-```js data.js hidden
+```js src/data.js hidden
 // Note: the way you would do data fetching depends on
 // the framework that you use together with Suspense.
 // Normally, the caching logic would be inside a framework.
@@ -425,7 +340,7 @@ async function getData(url) {
 async function getSearchResults(query) {
   // Add a fake delay to make waiting noticeable.
   await new Promise(resolve => {
-    setTimeout(resolve, 500);
+    setTimeout(resolve, 1000);
   });
 
   const allAlbums = [{
@@ -507,7 +422,7 @@ You can think of it as happening in two steps:
 
 1. **First, React re-renders with the new `query` (`"ab"`) but with the old `deferredQuery` (still `"a")`.** The `deferredQuery` value, which you pass to the result list, is *deferred:* it "lags behind" the `query` value.
 
-2. **In background, React tries to re-render with *both* `query` and `deferredQuery` updated to `"ab"`.** If this re-render completes, React will show it on the screen. However, if it suspends (the results for `"ab"` have not loaded yet), React will abandon this rendering attempt, and retry this re-render again after the data has loaded. The user will keep seeing the stale deferred value until the data is ready.
+2. **In the background, React tries to re-render with *both* `query` and `deferredQuery` updated to `"ab"`.** If this re-render completes, React will show it on the screen. However, if it suspends (the results for `"ab"` have not loaded yet), React will abandon this rendering attempt, and retry this re-render again after the data has loaded. The user will keep seeing the stale deferred value until the data is ready.
 
 The deferred "background" rendering is interruptible. For example, if you type into the input again, React will abandon it and restart with the new value. React will always use the latest provided value.
 
@@ -533,22 +448,7 @@ With this change, as soon as you start typing, the stale result list gets slight
 
 <Sandpack>
 
-```json package.json hidden
-{
-  "dependencies": {
-    "react": "experimental",
-    "react-dom": "experimental"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  }
-}
-```
-
-```js App.js
+```js src/App.js
 import { Suspense, useState, useDeferredValue } from 'react';
 import SearchResults from './SearchResults.js';
 
@@ -575,15 +475,10 @@ export default function App() {
 }
 ```
 
-```js SearchResults.js hidden
+```js src/SearchResults.js
+import {use} from 'react';
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
-
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
-
 export default function SearchResults({ query }) {
   if (query === '') {
     return null;
@@ -602,34 +497,9 @@ export default function SearchResults({ query }) {
     </ul>
   );
 }
-
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
-function use(promise) {
-  if (promise.status === 'fulfilled') {
-    return promise.value;
-  } else if (promise.status === 'rejected') {
-    throw promise.reason;
-  } else if (promise.status === 'pending') {
-    throw promise;
-  } else {
-    promise.status = 'pending';
-    promise.then(
-      result => {
-        promise.status = 'fulfilled';
-        promise.value = result;
-      },
-      reason => {
-        promise.status = 'rejected';
-        promise.reason = reason;
-      },      
-    );
-    throw promise;
-  }
-}
 ```
 
-```js data.js hidden
+```js src/data.js hidden
 // Note: the way you would do data fetching depends on
 // the framework that you use together with Suspense.
 // Normally, the caching logic would be inside a framework.
@@ -654,7 +524,7 @@ async function getData(url) {
 async function getSearchResults(query) {
   // Add a fake delay to make waiting noticeable.
   await new Promise(resolve => {
-    setTimeout(resolve, 500);
+    setTimeout(resolve, 1000);
   });
 
   const allAlbums = [{
@@ -799,7 +669,7 @@ export default function App() {
 }
 ```
 
-```js SlowList.js
+```js src/SlowList.js
 import { memo } from 'react';
 
 const SlowList = memo(function SlowList({ text }) {
@@ -876,7 +746,7 @@ export default function App() {
 }
 ```
 
-```js SlowList.js
+```js src/SlowList.js
 import { memo } from 'react';
 
 const SlowList = memo(function SlowList({ text }) {
@@ -951,7 +821,7 @@ While these techniques are helpful in some cases, `useDeferredValue` is better s
 
 Unlike debouncing or throttling, it doesn't require choosing any fixed delay. If the user's device is fast (e.g. powerful laptop), the deferred re-render would happen almost immediately and wouldn't be noticeable. If the user's device is slow, the list would "lag behind" the input proportionally to how slow the device is.
 
-Also, unlike with debouncing or throttling, deferred re-renders done by `useDeferredValue` are interruptible by default. This means that if React is in the middle of re-rendering a large list, but the user makes another keystroke, React will abandon that re-render, handle the keystroke, and then start rendering in background again. By contrast, debouncing and throttling still produce a janky experience because they're *blocking:* they merely postpone the moment when rendering blocks the keystroke.
+Also, unlike with debouncing or throttling, deferred re-renders done by `useDeferredValue` are interruptible by default. This means that if React is in the middle of re-rendering a large list, but the user makes another keystroke, React will abandon that re-render, handle the keystroke, and then start rendering in the background again. By contrast, debouncing and throttling still produce a janky experience because they're *blocking:* they merely postpone the moment when rendering blocks the keystroke.
 
 If the work you're optimizing doesn't happen during rendering, debouncing and throttling are still useful. For example, they can let you fire fewer network requests. You can also use these techniques together.
 
diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md
index 1bb96e1e8..bf148339b 100644
--- a/src/content/reference/react/useEffect.md
+++ b/src/content/reference/react/useEffect.md
@@ -62,9 +62,11 @@ function ChatRoom({ roomId }) {
 
 * If some of your dependencies are objects or functions defined inside the component, there is a risk that they will **cause the Effect to re-run more often than needed.** To fix this, remove unnecessary [object](#removing-unnecessary-object-dependencies) and [function](#removing-unnecessary-function-dependencies) dependencies. You can also [extract state updates](#updating-state-based-on-previous-state-from-an-effect) and [non-reactive logic](#reading-the-latest-props-and-state-from-an-effect) outside of your Effect.
 
-* If your Effect wasn't caused by an interaction (like a click), React will let the browser **paint the updated screen first before running your Effect.** If your Effect is doing something visual (for example, positioning a tooltip), and the delay is noticeable (for example, it flickers), replace `useEffect` with [`useLayoutEffect`.](/reference/react/useLayoutEffect)
+* If your Effect wasn't caused by an interaction (like a click), React will generally let the browser **paint the updated screen first before running your Effect.** If your Effect is doing something visual (for example, positioning a tooltip), and the delay is noticeable (for example, it flickers), replace `useEffect` with [`useLayoutEffect`.](/reference/react/useLayoutEffect)
 
-* Even if your Effect was caused by an interaction (like a click), **the browser may repaint the screen before processing the state updates inside your Effect.** Usually, that's what you want. However, if you must block the browser from repainting the screen, you need to replace `useEffect` with [`useLayoutEffect`.](/reference/react/useLayoutEffect)
+* If your Effect is caused by an interaction (like a click), **React may run your Effect before the browser paints the updated screen**. This ensures that the result of the Effect can be observed by the event system. Usually, this works as expected. However, if you must defer the work until after paint, such as an `alert()`, you can use `setTimeout`. See [reactwg/react-18/128](https://github.com/reactwg/react-18/discussions/128) for more information.
+
+* Even if your Effect was caused by an interaction (like a click), **React may allow the browser to repaint the screen before processing the state updates inside your Effect.** Usually, this works as expected. However, if you must block the browser from repainting the screen, you need to replace `useEffect` with [`useLayoutEffect`.](/reference/react/useLayoutEffect)
 
 * Effects **only run on the client.** They don't run during server rendering.
 
@@ -193,7 +195,7 @@ export default function App() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection(serverUrl, roomId) {
   // A real implementation would actually connect to the server
   return {
@@ -317,7 +319,7 @@ export default function App() {
 }
 ```
 
-```js animation.js
+```js src/animation.js
 export class FadeInAnimation {
   constructor(node) {
     this.node = node;
@@ -393,7 +395,7 @@ export default function App() {
 }
 ```
 
-```js ModalDialog.js active
+```js src/ModalDialog.js active
 import { useEffect, useRef } from 'react';
 
 export default function ModalDialog({ isOpen, children }) {
@@ -454,7 +456,7 @@ function LongSection() {
 }
 ```
 
-```js Box.js active
+```js src/Box.js active
 import { useRef, useEffect } from 'react';
 
 export default function Box() {
@@ -597,7 +599,7 @@ export default function App() {
 }
 ```
 
-```js useChatRoom.js
+```js src/useChatRoom.js
 import { useEffect } from 'react';
 import { createConnection } from './chat.js';
 
@@ -612,7 +614,7 @@ export function useChatRoom({ serverUrl, roomId }) {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection(serverUrl, roomId) {
   // A real implementation would actually connect to the server
   return {
@@ -669,7 +671,7 @@ export default function App() {
 }
 ```
 
-```js useWindowListener.js
+```js src/useWindowListener.js
 import { useState, useEffect } from 'react';
 
 export function useWindowListener(eventType, listener) {
@@ -722,7 +724,7 @@ function LongSection() {
 }
 ```
 
-```js Box.js active
+```js src/Box.js active
 import { useRef, useEffect } from 'react';
 import { useIntersectionObserver } from './useIntersectionObserver.js';
 
@@ -752,7 +754,7 @@ export default function Box() {
 }
 ```
 
-```js useIntersectionObserver.js
+```js src/useIntersectionObserver.js
 import { useState, useEffect } from 'react';
 
 export function useIntersectionObserver(ref) {
@@ -810,7 +812,7 @@ For example, if you have a third-party map widget or a video player component wr
 }
 ```
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import Map from './Map.js';
 
@@ -828,7 +830,7 @@ export default function App() {
 }
 ```
 
-```js Map.js active
+```js src/Map.js active
 import { useRef, useEffect } from 'react';
 import { MapWidget } from './map-widget.js';
 
@@ -854,7 +856,7 @@ export default function Map({ zoomLevel }) {
 }
 ```
 
-```js map-widget.js
+```js src/map-widget.js
 import 'leaflet/dist/leaflet.css';
 import * as L from 'leaflet';
 
@@ -926,7 +928,7 @@ Note the `ignore` variable which is initialized to `false`, and is set to `true`
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState, useEffect } from 'react';
 import { fetchBio } from './api.js';
 
@@ -962,7 +964,7 @@ export default function Page() {
 }
 ```
 
-```js api.js hidden
+```js src/api.js hidden
 export async function fetchBio(person) {
   const delay = person === 'Bob' ? 2000 : 200;
   return new Promise(resolve => {
@@ -979,7 +981,7 @@ You can also rewrite using the [`async` / `await`](https://developer.mozilla.org
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState, useEffect } from 'react';
 import { fetchBio } from './api.js';
 
@@ -1018,7 +1020,7 @@ export default function Page() {
 }
 ```
 
-```js api.js hidden
+```js src/api.js hidden
 export async function fetchBio(person) {
   const delay = person === 'Bob' ? 2000 : 200;
   return new Promise(resolve => {
@@ -1047,7 +1049,7 @@ Writing `fetch` calls inside Effects is a [popular way to fetch data](https://ww
 This list of downsides is not specific to React. It applies to fetching data on mount with any library. Like with routing, data fetching is not trivial to do well, so we recommend the following approaches:
 
 - **If you use a [framework](/learn/start-a-new-react-project#production-grade-react-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls.
-- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [React Query](https://react-query.tanstack.com/), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood but also add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes).
+- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [React Query](https://tanstack.com/query/latest/), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood but also add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes).
 
 You can continue fetching data directly in Effects if neither of these approaches suit you.
 
@@ -1214,7 +1216,7 @@ export default function App() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection(serverUrl, roomId) {
   // A real implementation would actually connect to the server
   return {
@@ -1295,7 +1297,7 @@ export default function App() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection(serverUrl, roomId) {
   // A real implementation would actually connect to the server
   return {
@@ -1388,7 +1390,7 @@ export default function App() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection(serverUrl, roomId) {
   // A real implementation would actually connect to the server
   return {
@@ -1551,7 +1553,7 @@ export default function App() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection({ serverUrl, roomId }) {
   // A real implementation would actually connect to the server
   return {
@@ -1661,7 +1663,7 @@ export default function App() {
 }
 ```
 
-```js chat.js
+```js src/chat.js
 export function createConnection({ serverUrl, roomId }) {
   // A real implementation would actually connect to the server
   return {
diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md
index 4ea029f27..c97120eba 100644
--- a/src/content/reference/react/useId.md
+++ b/src/content/reference/react/useId.md
@@ -179,7 +179,7 @@ You might be wondering why `useId` is better than incrementing a global variable
 
 The primary benefit of `useId` is that React ensures that it works with [server rendering.](/reference/react-dom/server) During server rendering, your components generate HTML output. Later, on the client, [hydration](/reference/react-dom/client/hydrateRoot) attaches your event handlers to the generated HTML. For hydration to work, the client output must match the server HTML.
 
-This is very difficult to guarantee with an incrementing counter because the order in which the client components are hydrated may not match the order in which the server HTML was emitted. By calling `useId`, you ensure that hydration will work, and the output will match between the server and the client.
+This is very difficult to guarantee with an incrementing counter because the order in which the Client Components are hydrated may not match the order in which the server HTML was emitted. By calling `useId`, you ensure that hydration will work, and the output will match between the server and the client.
 
 Inside React, `useId` is generated from the "parent path" of the calling component. This is why, if the client and the server tree are the same, the "parent path" will match up regardless of rendering order.
 
@@ -269,7 +269,7 @@ export default function App() {
 }
 ```
 
-```js index.js active
+```js src/index.js active
 import { createRoot } from 'react-dom/client';
 import App from './App.js';
 import './styles.css';
@@ -303,3 +303,32 @@ input { margin: 5px; }
 
 </Sandpack>
 
+---
+
+### Using the same ID prefix on the client and the server {/*using-the-same-id-prefix-on-the-client-and-the-server*/}
+
+If you [render multiple independent React apps on the same page](#specifying-a-shared-prefix-for-all-generated-ids), and some of these apps are server-rendered, make sure that the `identifierPrefix` you pass to the [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) call on the client side is the same as the `identifierPrefix` you pass to the [server APIs](/reference/react-dom/server) such as [`renderToPipeableStream`.](/reference/react-dom/server/renderToPipeableStream)
+
+```js
+// Server
+import { renderToPipeableStream } from 'react-dom/server';
+
+const { pipe } = renderToPipeableStream(
+  <App />,
+  { identifierPrefix: 'react-app1' }
+);
+```
+
+```js
+// Client
+import { hydrateRoot } from 'react-dom/client';
+
+const domNode = document.getElementById('root');
+const root = hydrateRoot(
+  domNode,
+  reactNode,
+  { identifierPrefix: 'react-app1' }
+);
+```
+
+You do not need to pass `identifierPrefix` if you only have one React app on the page.
diff --git a/src/content/reference/react/useImperativeHandle.md b/src/content/reference/react/useImperativeHandle.md
index 88f9a9f12..abd93cd4c 100644
--- a/src/content/reference/react/useImperativeHandle.md
+++ b/src/content/reference/react/useImperativeHandle.md
@@ -124,7 +124,7 @@ export default function Form() {
 
   return (
     <form>
-      <MyInput label="Enter your name:" ref={ref} />
+      <MyInput placeholder="Enter your name" ref={ref} />
       <button type="button" onClick={handleClick}>
         Edit
       </button>
@@ -133,7 +133,7 @@ export default function Form() {
 }
 ```
 
-```js MyInput.js
+```js src/MyInput.js
 import { forwardRef, useRef, useImperativeHandle } from 'react';
 
 const MyInput = forwardRef(function MyInput(props, ref) {
@@ -194,7 +194,7 @@ export default function Page() {
 }
 ```
 
-```js Post.js
+```js src/Post.js
 import { forwardRef, useRef, useImperativeHandle } from 'react';
 import CommentList from './CommentList.js';
 import AddComment from './AddComment.js';
@@ -227,7 +227,7 @@ export default Post;
 ```
 
 
-```js CommentList.js
+```js src/CommentList.js
 import { forwardRef, useRef, useImperativeHandle } from 'react';
 
 const CommentList = forwardRef(function CommentList(props, ref) {
@@ -257,7 +257,7 @@ const CommentList = forwardRef(function CommentList(props, ref) {
 export default CommentList;
 ```
 
-```js AddComment.js
+```js src/AddComment.js
 import { forwardRef, useRef, useImperativeHandle } from 'react';
 
 const AddComment = forwardRef(function AddComment(props, ref) {
diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md
index 0238facf7..c088ac340 100644
--- a/src/content/reference/react/useInsertionEffect.md
+++ b/src/content/reference/react/useInsertionEffect.md
@@ -10,7 +10,7 @@ title: useInsertionEffect
 
 <Intro>
 
-`useInsertionEffect` allows inserting elements into the DOM before any layout effects fire.
+`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 styles before any effects fire that may need to read layout:
+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. 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.
+* `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.
 
@@ -88,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 layout effects fire:
+Call `useInsertionEffect` to insert the styles before any layout Effects fire:
 
 ```js {4-11}
 // Inside your CSS-in-JS library
diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md
index 5af3ec5a6..d38458f14 100644
--- a/src/content/reference/react/useLayoutEffect.md
+++ b/src/content/reference/react/useLayoutEffect.md
@@ -67,6 +67,8 @@ function Tooltip() {
 
 * The code inside `useLayoutEffect` and all state updates scheduled from it **block the browser from repainting the screen.** When used excessively, this makes your app slow. When possible, prefer [`useEffect`.](/reference/react/useEffect)
 
+* If you trigger a state update inside `useLayoutEffect`, React will execute all remaining Effects immediately including `useEffect`.
+
 ---
 
 ## Usage {/*usage*/}
@@ -149,7 +151,7 @@ export default function App() {
 }
 ```
 
-```js ButtonWithTooltip.js
+```js src/ButtonWithTooltip.js
 import { useState, useRef } from 'react';
 import Tooltip from './Tooltip.js';
 
@@ -185,7 +187,7 @@ export default function ButtonWithTooltip({ tooltipContent, ...rest }) {
 }
 ```
 
-```js Tooltip.js active
+```js src/Tooltip.js active
 import { useRef, useLayoutEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import TooltipContainer from './TooltipContainer.js';
@@ -220,7 +222,7 @@ export default function Tooltip({ children, targetRect }) {
 }
 ```
 
-```js TooltipContainer.js
+```js src/TooltipContainer.js
 export default function TooltipContainer({ children, x, y, contentRef }) {
   return (
     <div
@@ -299,7 +301,7 @@ export default function App() {
 }
 ```
 
-```js ButtonWithTooltip.js
+```js src/ButtonWithTooltip.js
 import { useState, useRef } from 'react';
 import Tooltip from './Tooltip.js';
 
@@ -335,7 +337,7 @@ export default function ButtonWithTooltip({ tooltipContent, ...rest }) {
 }
 ```
 
-```js Tooltip.js active
+```js src/Tooltip.js active
 import { useRef, useLayoutEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import TooltipContainer from './TooltipContainer.js';
@@ -369,7 +371,7 @@ export default function Tooltip({ children, targetRect }) {
 }
 ```
 
-```js TooltipContainer.js
+```js src/TooltipContainer.js
 export default function TooltipContainer({ children, x, y, contentRef }) {
   return (
     <div
@@ -446,7 +448,7 @@ export default function App() {
 }
 ```
 
-```js ButtonWithTooltip.js
+```js src/ButtonWithTooltip.js
 import { useState, useRef } from 'react';
 import Tooltip from './Tooltip.js';
 
@@ -482,7 +484,7 @@ export default function ButtonWithTooltip({ tooltipContent, ...rest }) {
 }
 ```
 
-```js Tooltip.js active
+```js src/Tooltip.js active
 import { useRef, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import TooltipContainer from './TooltipContainer.js';
@@ -516,7 +518,7 @@ export default function Tooltip({ children, targetRect }) {
 }
 ```
 
-```js TooltipContainer.js
+```js src/TooltipContainer.js
 export default function TooltipContainer({ children, x, y, contentRef }) {
   return (
     <div
@@ -589,7 +591,7 @@ export default function App() {
 }
 ```
 
-```js ButtonWithTooltip.js
+```js src/ButtonWithTooltip.js
 import { useState, useRef } from 'react';
 import Tooltip from './Tooltip.js';
 
@@ -625,7 +627,7 @@ export default function ButtonWithTooltip({ tooltipContent, ...rest }) {
 }
 ```
 
-```js Tooltip.js active
+```js src/Tooltip.js active
 import { useRef, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import TooltipContainer from './TooltipContainer.js';
@@ -665,7 +667,7 @@ export default function Tooltip({ children, targetRect }) {
 }
 ```
 
-```js TooltipContainer.js
+```js src/TooltipContainer.js
 export default function TooltipContainer({ children, x, y, contentRef }) {
   return (
     <div
@@ -732,7 +734,7 @@ However, if you're running into this problem, you have a few different options:
 
 - Replace `useLayoutEffect` with [`useEffect`.](/reference/react/useEffect) This tells React that it's okay to display the initial render result without blocking the paint (because the original HTML will become visible before your Effect runs).
 
-- Alternatively, [mark your component as client-only.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content) This tells React to replace its content up to the closest [`<Suspense>`](/reference/react/Suspense) boundary with a loading fallback (for example, a spinner or a glimmer) during server rendering.
+- Alternatively, [mark your component as client-only.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content) This tells React to replace its content up to the closest [`<Suspense>`](/reference/react/Suspense) boundary with a loading fallback (for example, a spinner or a glimmer) during server rendering.
 
 - Alternatively, you can render a component with `useLayoutEffect` only after hydration. Keep a boolean `isMounted` state that's initialized to `false`, and set it to `true` inside a `useEffect` call. Your rendering logic can then be like `return isMounted ? <RealContent /> : <FallbackContent />`. On the server and during the hydration, the user will see `FallbackContent` which should not call `useLayoutEffect`. Then React will replace it with `RealContent` which runs on the client only and can include `useLayoutEffect` calls.
 
diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md
index 543c11125..33193ee3b 100644
--- a/src/content/reference/react/useMemo.md
+++ b/src/content/reference/react/useMemo.md
@@ -177,7 +177,7 @@ Toggle the theme. **Thanks to `useMemo`, it's fast despite the artificial slowdo
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import { createTodos } from './utils.js';
 import TodoList from './TodoList.js';
@@ -219,7 +219,7 @@ export default function App() {
 
 ```
 
-```js TodoList.js active
+```js src/TodoList.js active
 import { useMemo } from 'react';
 import { filterTodos } from './utils.js'
 
@@ -246,7 +246,7 @@ export default function TodoList({ todos, theme, tab }) {
 }
 ```
 
-```js utils.js
+```js src/utils.js
 export function createTodos() {
   const todos = [];
   for (let i = 0; i < 50; i++) {
@@ -307,7 +307,7 @@ Unlike in the previous example, toggling the theme is also slow now! This is bec
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import { createTodos } from './utils.js';
 import TodoList from './TodoList.js';
@@ -349,7 +349,7 @@ export default function App() {
 
 ```
 
-```js TodoList.js active
+```js src/TodoList.js active
 import { filterTodos } from './utils.js'
 
 export default function TodoList({ todos, theme, tab }) {
@@ -372,7 +372,7 @@ export default function TodoList({ todos, theme, tab }) {
 }
 ```
 
-```js utils.js
+```js src/utils.js
 export function createTodos() {
   const todos = [];
   for (let i = 0; i < 50; i++) {
@@ -427,7 +427,7 @@ However, here is the same code **with the artificial slowdown removed.** Does th
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import { createTodos } from './utils.js';
 import TodoList from './TodoList.js';
@@ -469,7 +469,7 @@ export default function App() {
 
 ```
 
-```js TodoList.js active
+```js src/TodoList.js active
 import { filterTodos } from './utils.js'
 
 export default function TodoList({ todos, theme, tab }) {
@@ -491,7 +491,7 @@ export default function TodoList({ todos, theme, tab }) {
 }
 ```
 
-```js utils.js
+```js src/utils.js
 export function createTodos() {
   const todos = [];
   for (let i = 0; i < 50; i++) {
@@ -647,11 +647,11 @@ In this example, the `List` component is **artificially slowed down** so that yo
 
 Switching the tabs feels slow because it forces the slowed down `List` to re-render. That's expected because the `tab` has changed, and so you need to reflect the user's new choice on the screen.
 
-Next, try toggling the theme. **Thanks to `useMemo` together with [`memo`](/reference/react/memo), it’s fast despite the artificial slowdown!** The `List` skipped re-rendering because the `visibleItems` array has not changed since the last render. The `visibleItems` array has not changed because both `todos` and `tab` (which you pass as dependencies to `useMemo`) haven't changed since the last render.
+Next, try toggling the theme. **Thanks to `useMemo` together with [`memo`](/reference/react/memo), it’s fast despite the artificial slowdown!** The `List` skipped re-rendering because the `visibleTodos` array has not changed since the last render. The `visibleTodos` array has not changed because both `todos` and `tab` (which you pass as dependencies to `useMemo`) haven't changed since the last render.
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import { createTodos } from './utils.js';
 import TodoList from './TodoList.js';
@@ -692,7 +692,7 @@ export default function App() {
 }
 ```
 
-```js TodoList.js active
+```js src/TodoList.js active
 import { useMemo } from 'react';
 import List from './List.js';
 import { filterTodos } from './utils.js'
@@ -711,7 +711,7 @@ export default function TodoList({ todos, theme, tab }) {
 }
 ```
 
-```js List.js
+```js src/List.js
 import { memo } from 'react';
 
 const List = memo(function List({ items }) {
@@ -738,7 +738,7 @@ const List = memo(function List({ items }) {
 export default List;
 ```
 
-```js utils.js
+```js src/utils.js
 export function createTodos() {
   const todos = [];
   for (let i = 0; i < 50; i++) {
@@ -793,7 +793,7 @@ Unlike in the previous example, toggling the theme is also slow now! This is bec
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import { createTodos } from './utils.js';
 import TodoList from './TodoList.js';
@@ -834,7 +834,7 @@ export default function App() {
 }
 ```
 
-```js TodoList.js active
+```js src/TodoList.js active
 import List from './List.js';
 import { filterTodos } from './utils.js'
 
@@ -849,7 +849,7 @@ export default function TodoList({ todos, theme, tab }) {
 }
 ```
 
-```js List.js
+```js src/List.js
 import { memo } from 'react';
 
 const List = memo(function List({ items }) {
@@ -876,7 +876,7 @@ const List = memo(function List({ items }) {
 export default List;
 ```
 
-```js utils.js
+```js src/utils.js
 export function createTodos() {
   const todos = [];
   for (let i = 0; i < 50; i++) {
@@ -925,7 +925,7 @@ However, here is the same code **with the artificial slowdown removed.** Does th
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import { createTodos } from './utils.js';
 import TodoList from './TodoList.js';
@@ -966,7 +966,7 @@ export default function App() {
 }
 ```
 
-```js TodoList.js active
+```js src/TodoList.js active
 import List from './List.js';
 import { filterTodos } from './utils.js'
 
@@ -980,7 +980,7 @@ export default function TodoList({ todos, theme, tab }) {
 }
 ```
 
-```js List.js
+```js src/List.js
 import { memo } from 'react';
 
 function List({ items }) {
@@ -1001,7 +1001,7 @@ function List({ items }) {
 export default memo(List);
 ```
 
-```js utils.js
+```js src/utils.js
 export function createTodos() {
   const todos = [];
   for (let i = 0; i < 50; i++) {
@@ -1056,6 +1056,83 @@ Keep in mind that you need to run React in production mode, disable [React Devel
 
 ---
 
+### Preventing an Effect from firing too often {/*preventing-an-effect-from-firing-too-often*/}
+
+Sometimes, you might want to use a value inside an [Effect:](/learn/synchronizing-with-effects)
+
+```js {4-7,10}
+function ChatRoom({ roomId }) {
+  const [message, setMessage] = useState('');
+
+  const options = {
+    serverUrl: 'https://localhost:1234',
+    roomId: roomId
+  }
+
+  useEffect(() => {
+    const connection = createConnection(options);
+    connection.connect();
+    // ...
+```
+
+This creates a problem. [Every reactive value must be declared as a dependency of your Effect.](/learn/lifecycle-of-reactive-effects#react-verifies-that-you-specified-every-reactive-value-as-a-dependency) However, if you declare `options` as a dependency, it will cause your Effect to constantly reconnect to the chat room:
+
+
+```js {5}
+  useEffect(() => {
+    const connection = createConnection(options);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [options]); // 🔴 Problem: This dependency changes on every render
+  // ...
+```
+
+To solve this, you can wrap the object you need to call from an Effect in `useMemo`:
+
+```js {4-9,16}
+function ChatRoom({ roomId }) {
+  const [message, setMessage] = useState('');
+
+  const options = useMemo(() => {
+    return {
+      serverUrl: 'https://localhost:1234',
+      roomId: roomId
+    };
+  }, [roomId]); // ✅ Only changes when roomId changes
+
+  useEffect(() => {
+    const options = createOptions();
+    const connection = createConnection(options);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [options]); // ✅ Only changes when createOptions changes
+  // ...
+```
+
+This ensures that the `options` object is the same between re-renders if `useMemo` returns the cached object.
+
+However, since `useMemo` is performance optimization, not a semantic guarantee, React may throw away the cached value if [there is a specific reason to do that](#caveats). This will also cause the effect to re-fire, **so it's even better to remove the need for a function dependency** by moving your object *inside* the Effect:
+
+```js {5-8,13}
+function ChatRoom({ roomId }) {
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    const options = { // ✅ No need for useMemo or object dependencies!
+      serverUrl: 'https://localhost:1234',
+      roomId: roomId
+    }
+    
+    const connection = createConnection(options);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId]); // ✅ Only changes when roomId changes
+  // ...
+```
+
+Now your code is simpler and doesn't need `useMemo`. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
+
+
 ### Memoizing a dependency of another Hook {/*memoizing-a-dependency-of-another-hook*/}
 
 Suppose you have a calculation that depends on an object created directly in the component body:
diff --git a/src/content/reference/react/useOptimistic.md b/src/content/reference/react/useOptimistic.md
new file mode 100644
index 000000000..d191bbb55
--- /dev/null
+++ b/src/content/reference/react/useOptimistic.md
@@ -0,0 +1,126 @@
+---
+title: useOptimistic
+---
+
+<Intro>
+
+`useOptimistic` is a React Hook that lets you optimistically update the UI.
+
+```js
+  const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `useOptimistic(state, updateFn)` {/*use*/}
+
+`useOptimistic` is a React Hook that lets you show a different state while an async action is underway. It accepts some state as an argument and returns a copy of that state that can be different during the duration of an async action such as a network request. You provide a function that takes the current state and the input to the action, and returns the optimistic state to be used while the action is pending.
+
+This state is called the "optimistic" state because it is usually used to immediately present the user with the result of performing an action, even though the action actually takes time to complete.
+
+```js
+import { useOptimistic } from 'react';
+
+function AppContainer() {
+  const [optimisticState, addOptimistic] = useOptimistic(
+    state,
+    // updateFn
+    (currentState, optimisticValue) => {
+      // merge and return new state
+      // with optimistic value
+    }
+  );
+}
+```
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `state`: the value to be returned initially and whenever no action is pending.
+* `updateFn(currentState, optimisticValue)`: a function that takes the current state and the optimistic value passed to `addOptimistic` and returns the resulting optimistic state. It must be a pure function. `updateFn` takes in two parameters. The `currentState` and the `optimisticValue`. The return value will be the merged value of the `currentState` and `optimisticValue`.
+
+
+#### Returns {/*returns*/}
+
+* `optimisticState`: The resulting optimistic state. It is equal to `state` unless an action is pending, in which case it is equal to the value returned by `updateFn`.
+* `addOptimistic`: `addOptimistic` is the dispatching function to call when you have an optimistic update. It takes one argument, `optimisticValue`, of any type and will call the `updateFn` with `state` and `optimisticValue`.
+
+---
+
+## Usage {/*usage*/}
+
+### Optimistically updating forms {/*optimistically-updating-with-forms*/}
+
+The `useOptimistic` Hook provides a way to optimistically update the user interface before a background operation, like a network request, completes. In the context of forms, this technique helps to make apps feel more responsive. When a user submits a form, instead of waiting for the server's response to reflect the changes, the interface is immediately updated with the expected outcome.
+
+For example, when a user types a message into the form and hits the "Send" button, the `useOptimistic` Hook allows the message to immediately appear in the list with a "Sending..." label, even before the message is actually sent to a server. This "optimistic" approach gives the impression of speed and responsiveness. The form then attempts to truly send the message in the background. Once the server confirms the message has been received, the "Sending..." label is removed.
+
+<Sandpack>
+
+
+```js src/App.js
+import { useOptimistic, useState, useRef } from "react";
+import { deliverMessage } from "./actions.js";
+
+function Thread({ messages, sendMessage }) {
+  const formRef = useRef();
+  async function formAction(formData) {
+    addOptimisticMessage(formData.get("message"));
+    formRef.current.reset();
+    await sendMessage(formData);
+  }
+  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
+    messages,
+    (state, newMessage) => [
+      ...state,
+      {
+        text: newMessage,
+        sending: true
+      }
+    ]
+  );
+
+  return (
+    <>
+      {optimisticMessages.map((message, index) => (
+        <div key={index}>
+          {message.text}
+          {!!message.sending && <small> (Sending...)</small>}
+        </div>
+      ))}
+      <form action={formAction} ref={formRef}>
+        <input type="text" name="message" placeholder="Hello!" />
+        <button type="submit">Send</button>
+      </form>
+    </>
+  );
+}
+
+export default function App() {
+  const [messages, setMessages] = useState([
+    { text: "Hello there!", sending: false, key: 1 }
+  ]);
+  async function sendMessage(formData) {
+    const sentMessage = await deliverMessage(formData.get("message"));
+    setMessages((messages) => [...messages, { text: sentMessage }]);
+  }
+  return <Thread messages={messages} sendMessage={sendMessage} />;
+}
+```
+
+```js src/actions.js
+export async function deliverMessage(message) {
+  await new Promise((res) => setTimeout(res, 1000));
+  return message;
+}
+```
+
+
+</Sandpack>
diff --git a/src/content/reference/react/useReducer.md b/src/content/reference/react/useReducer.md
index 3477660d2..ed3dc68c2 100644
--- a/src/content/reference/react/useReducer.md
+++ b/src/content/reference/react/useReducer.md
@@ -52,6 +52,7 @@ function MyComponent() {
 #### Caveats {/*caveats*/}
 
 * `useReducer` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it.
+* The `dispatch` function has a stable identity, so you will often see it omitted from Effect dependencies, but including it will not cause the Effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
 * In Strict Mode, React will **call your reducer and initializer twice** in order to [help you find accidental impurities.](#my-reducer-or-initializer-function-runs-twice) This is development-only behavior and does not affect production. If your reducer and initializer are pure (as they should be), this should not affect your logic. The result from one of the calls is ignored.
 
 ---
@@ -322,7 +323,7 @@ In this example, the reducer manages an array of tasks. The array needs to be up
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useReducer } from 'react';
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
@@ -405,7 +406,7 @@ const initialTasks = [
 ];
 ```
 
-```js AddTask.js hidden
+```js src/AddTask.js hidden
 import { useState } from 'react';
 
 export default function AddTask({ onAddTask }) {
@@ -426,7 +427,7 @@ export default function AddTask({ onAddTask }) {
 }
 ```
 
-```js TaskList.js hidden
+```js src/TaskList.js hidden
 import { useState } from 'react';
 
 export default function TaskList({
@@ -515,7 +516,7 @@ If updating arrays and objects without mutation feels tedious, you can use a lib
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useImmerReducer } from 'use-immer';
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
@@ -597,7 +598,7 @@ const initialTasks = [
 ];
 ```
 
-```js AddTask.js hidden
+```js src/AddTask.js hidden
 import { useState } from 'react';
 
 export default function AddTask({ onAddTask }) {
@@ -618,7 +619,7 @@ export default function AddTask({ onAddTask }) {
 }
 ```
 
-```js TaskList.js hidden
+```js src/TaskList.js hidden
 import { useState } from 'react';
 
 export default function TaskList({
@@ -763,7 +764,7 @@ This example passes the initializer function, so the `createInitialState` functi
 
 <Sandpack>
 
-```js App.js hidden
+```js src/App.js hidden
 import TodoList from './TodoList.js';
 
 export default function App() {
@@ -771,7 +772,7 @@ export default function App() {
 }
 ```
 
-```js TodoList.js active
+```js src/TodoList.js active
 import { useReducer } from 'react';
 
 function createInitialState(username) {
@@ -851,7 +852,7 @@ This example **does not** pass the initializer function, so the `createInitialSt
 
 <Sandpack>
 
-```js App.js hidden
+```js src/App.js hidden
 import TodoList from './TodoList.js';
 
 export default function App() {
@@ -859,7 +860,7 @@ export default function App() {
 }
 ```
 
-```js TodoList.js active
+```js src/TodoList.js active
 import { useReducer } from 'react';
 
 function createInitialState(username) {
diff --git a/src/content/reference/react/useRef.md b/src/content/reference/react/useRef.md
index 4af7e9535..14cd9b2ec 100644
--- a/src/content/reference/react/useRef.md
+++ b/src/content/reference/react/useRef.md
@@ -50,7 +50,7 @@ On the next renders, `useRef` will return the same object.
 * You can mutate the `ref.current` property. Unlike state, it is mutable. However, if it holds an object that is used for rendering (for example, a piece of your state), then you shouldn't mutate that object.
 * When you change the `ref.current` property, React does not re-render your component. React is not aware of when you change it because a ref is a plain JavaScript object.
 * Do not write _or read_ `ref.current` during rendering, except for [initialization.](#avoiding-recreating-the-ref-contents) This makes your component's behavior unpredictable.
-* In Strict Mode, React will **call your component function twice** in order to [help you find accidental impurities.](#my-initializer-or-updater-function-runs-twice) This is development-only behavior and does not affect production. Each ref object will be created twice, but one of the versions will be discarded. If your component function is pure (as it should be), this should not affect the behavior.
+* In Strict Mode, React will **call your component function twice** in order to [help you find accidental impurities.](/reference/react/useState#my-initializer-or-updater-function-runs-twice) This is development-only behavior and does not affect production. Each ref object will be created twice, but one of the versions will be discarded. If your component function is pure (as it should be), this should not affect the behavior.
 
 ---
 
@@ -327,33 +327,33 @@ export default function CatFriends() {
     <>
       <nav>
         <button onClick={() => scrollToIndex(0)}>
-          Tom
+          Neo
         </button>
         <button onClick={() => scrollToIndex(1)}>
-          Maru
+          Millie
         </button>
         <button onClick={() => scrollToIndex(2)}>
-          Jellylorum
+          Bella
         </button>
       </nav>
       <div>
         <ul ref={listRef}>
           <li>
             <img
-              src="https://placekitten.com/g/200/200"
-              alt="Tom"
+              src="https://placecats.com/neo/300/200"
+              alt="Neo"
             />
           </li>
           <li>
             <img
-              src="https://placekitten.com/g/300/200"
-              alt="Maru"
+              src="https://placecats.com/millie/200/200"
+              alt="Millie"
             />
           </li>
           <li>
             <img
-              src="https://placekitten.com/g/250/200"
-              alt="Jellylorum"
+              src="https://placecats.com/bella/199/200"
+              alt="Bella"
             />
           </li>
         </ul>
diff --git a/src/content/reference/react/useState.md b/src/content/reference/react/useState.md
index d23fa489b..23db1aae5 100644
--- a/src/content/reference/react/useState.md
+++ b/src/content/reference/react/useState.md
@@ -7,7 +7,7 @@ title: useState
 `useState` is a React Hook that lets you add a [state variable](/learn/state-a-components-memory) to your component.
 
 ```js
-const [state, setState] = useState(initialState);
+const [state, setState] = useState(initialState)
 ```
 
 </Intro>
@@ -85,6 +85,8 @@ function handleClick() {
 
 * React [batches state updates.](/learn/queueing-a-series-of-state-updates) It updates the screen **after all the event handlers have run** and have called their `set` functions. This prevents multiple re-renders during a single event. In the rare case that you need to force React to update the screen earlier, for example to access the DOM, you can use [`flushSync`.](/reference/react-dom/flushSync)
 
+* The `set` function has a stable identity, so you will often see it omitted from Effect dependencies, but including it will not cause the Effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
+
 * Calling the `set` function *during rendering* is only allowed from within the currently rendering component. React will discard its output and immediately attempt to render it again with the new state. This pattern is rarely needed, but you can use it to **store information from the previous renders**. [See an example below.](#storing-information-from-previous-renders)
 
 * In Strict Mode, React will **call your updater function twice** in order to [help you find accidental impurities.](#my-initializer-or-updater-function-runs-twice) This is development-only behavior and does not affect production. If your updater function is pure (as it should be), this should not affect the behavior. The result from one of the calls will be ignored.
@@ -630,7 +632,7 @@ In this example, the `todos` state variable holds an array. Each button handler
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import AddTodo from './AddTodo.js';
 import TaskList from './TaskList.js';
@@ -687,7 +689,7 @@ export default function TaskApp() {
 }
 ```
 
-```js AddTodo.js
+```js src/AddTodo.js
 import { useState } from 'react';
 
 export default function AddTodo({ onAddTodo }) {
@@ -708,7 +710,7 @@ export default function AddTodo({ onAddTodo }) {
 }
 ```
 
-```js TaskList.js
+```js src/TaskList.js
 import { useState } from 'react';
 
 export default function TaskList({
@@ -1028,7 +1030,7 @@ Read [preserving and resetting state](/learn/preserving-and-resetting-state) to
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 
 export default function App() {
@@ -1083,7 +1085,7 @@ In the rare case that none of these apply, there is a pattern you can use to upd
 
 Here's an example. This `CountLabel` component displays the `count` prop passed to it:
 
-```js CountLabel.js
+```js src/CountLabel.js
 export default function CountLabel({ count }) {
   return <h1>{count}</h1>
 }
@@ -1093,7 +1095,7 @@ Say you want to show whether the counter has *increased or decreased* since the
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 import CountLabel from './CountLabel.js';
 
@@ -1113,7 +1115,7 @@ export default function App() {
 }
 ```
 
-```js CountLabel.js active
+```js src/CountLabel.js active
 import { useState } from 'react';
 
 export default function CountLabel({ count }) {
diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md
index 4169e231e..05e0c0831 100644
--- a/src/content/reference/react/useSyncExternalStore.md
+++ b/src/content/reference/react/useSyncExternalStore.md
@@ -41,7 +41,7 @@ It returns the snapshot of the data in the store. You need to pass two functions
 
 #### Parameters {/*parameters*/}
 
-* `subscribe`: A function that takes a single `callback` argument and subscribes it to the store. When the store changes, it should invoke the provided `callback`. This will cause the component to re-render. The `subscribe` function should return a function that cleans up the subscription.
+* `subscribe`: A function that takes a single `callback` argument and subscribes it to the store. When the store changes, it should invoke the provided `callback`, which will cause React to re-call `getSnapshot` and (if needed) re-render the component. The `subscribe` function should return a function that cleans up the subscription.
 
 * `getSnapshot`: A function that returns a snapshot of the data in the store that's needed by the component. While the store has not changed, repeated calls to `getSnapshot` must return the same value. If the store changes and the returned value is different (as compared by [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)), React re-renders the component.
 
@@ -57,6 +57,26 @@ The current snapshot of the store which you can use in your rendering logic.
 
 * If a different `subscribe` function is passed during a re-render, React will re-subscribe to the store using the newly passed `subscribe` function. You can prevent this by declaring `subscribe` outside the component.
 
+* If the store is mutated during a [non-blocking Transition update](/reference/react/useTransition), React will fall back to performing that update as blocking. Specifically, for every Transition update, React will call `getSnapshot` a second time just before applying changes to the DOM. If it returns a different value than when it was called originally, React will restart the update from scratch, this time applying it as a blocking update, to ensure that every component on screen is reflecting the same version of the store.
+
+* It's not recommended to _suspend_ a render based on a store value returned by `useSyncExternalStore`. The reason is that mutations to the external store cannot be marked as [non-blocking Transition updates](/reference/react/useTransition), so they will trigger the nearest [`Suspense` fallback](/reference/react/Suspense), replacing already-rendered content on screen with a loading spinner, which typically makes a poor UX.
+
+  For example, the following are discouraged:
+
+  ```js
+  const LazyProductDetailPage = lazy(() => import('./ProductDetailPage.js'));
+
+  function ShoppingApp() {
+    const selectedProductId = useSyncExternalStore(...);
+
+    // ❌ Calling `use` with a Promise dependent on `selectedProductId`
+    const data = use(fetchItem(selectedProductId))
+
+    // ❌ Conditionally rendering a lazy component based on `selectedProductId`
+    return selectedProductId != null ? <LazyProductDetailPage /> : <FeaturedProducts />;
+  }
+  ```
+
 ---
 
 ## Usage {/*usage*/}
@@ -111,7 +131,7 @@ export default function TodosApp() {
 }
 ```
 
-```js todoStore.js
+```js src/todoStore.js
 // This is an example of a third-party store
 // that you might need to integrate with React.
 
@@ -280,7 +300,7 @@ export default function App() {
 }
 ```
 
-```js useOnlineStatus.js
+```js src/useOnlineStatus.js
 import { useSyncExternalStore } from 'react';
 
 export function useOnlineStatus() {
@@ -341,7 +361,7 @@ The `getServerSnapshot` function is similar to `getSnapshot`, but it runs only i
 - It runs on the server when generating the HTML.
 - It runs on the client during [hydration](/reference/react-dom/client/hydrateRoot), i.e. when React takes the server HTML and makes it interactive.
 
-This lets you provide the initial snapshot value which will be used before the app becomes interactive. If there is no meaningful initial value for the server rendering, omit this argument to [force rendering on the client.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content)
+This lets you provide the initial snapshot value which will be used before the app becomes interactive. If there is no meaningful initial value for the server rendering, omit this argument to [force rendering on the client.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content)
 
 <Note>
 
@@ -425,4 +445,4 @@ function ChatIndicator({ userId }) {
 
   // ...
 }
-```
\ No newline at end of file
+```
diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
index a6fcde710..7c019bc16 100644
--- a/src/content/reference/react/useTransition.md
+++ b/src/content/reference/react/useTransition.md
@@ -4,7 +4,7 @@ title: useTransition
 
 <Intro>
 
-`useTransition` is a React Hook that lets you update the state without blocking the UI.
+`useTransition` is a React Hook that lets you render a part of the UI in the background.
 
 ```js
 const [isPending, startTransition] = useTransition()
@@ -20,7 +20,7 @@ const [isPending, startTransition] = useTransition()
 
 ### `useTransition()` {/*usetransition*/}
 
-Call `useTransition` at the top level of your component to mark some state updates as transitions.
+Call `useTransition` at the top level of your component to mark some state updates as Transitions.
 
 ```js
 import { useTransition } from 'react';
@@ -41,14 +41,14 @@ function TabContainer() {
 
 `useTransition` returns an array with exactly two items:
 
-1. The `isPending` flag that tells you whether there is a pending transition.
-2. The [`startTransition` function](#starttransition) that lets you mark a state update as a transition.
+1. The `isPending` flag that tells you whether there is a pending Transition.
+2. The [`startTransition` function](#starttransition) that lets you mark updates as a Transition.
 
 ---
 
-### `startTransition` function {/*starttransition*/}
+### `startTransition(action)` {/*starttransition*/}
 
-The `startTransition` function returned by `useTransition` lets you mark a state update as a transition.
+The `startTransition` function returned by `useTransition` lets you mark a updates as a Transition.
 
 ```js {6,8}
 function TabContainer() {
@@ -64,9 +64,38 @@ function TabContainer() {
 }
 ```
 
+<Note>
+#### Functions called in `startTransition` are called "Actions". {/*functions-called-in-starttransition-are-called-actions*/}
+
+The function passed to `startTransition` is called an "Action". By convention, any callback called inside `startTransition` (such as a callback prop) should be named `action` or include the "Action" suffix:
+
+```js {1,9}
+function SubmitButton({ submitAction }) {
+  const [isPending, startTransition] = useTransition();
+
+  return (
+    <button
+      disabled={isPending}
+      onClick={() => {
+        startTransition(() => {
+          submitAction();
+        });
+      }}
+    >
+      Submit
+    </button>
+  );
+}
+
+```
+
+</Note>
+
+
+
 #### Parameters {/*starttransition-parameters*/}
 
-* `scope`: A function that updates some state by calling one or more [`set` functions.](/reference/react/useState#setstate) React immediately calls `scope` with no parameters and marks all state updates scheduled synchronously during the `scope` function call as transitions. They will be [non-blocking](#marking-a-state-update-as-a-non-blocking-transition) and [will not display unwanted loading indicators.](#preventing-unwanted-loading-indicators)
+* `action`: A function that updates some state by calling one or more [`set` functions](/reference/react/useState#setstate). React calls `action` immediately with no parameters and marks all state updates scheduled synchronously during the `action` function call as Transitions. Any async calls that are awaited in the `action` will be included in the Transition, but currently require wrapping any `set` functions after the `await` in an additional `startTransition` (see [Troubleshooting](#react-doesnt-treat-my-state-update-after-await-as-a-transition)). State updates marked as Transitions will be [non-blocking](#marking-a-state-update-as-a-non-blocking-transition) and [will not display unwanted loading indicators](#preventing-unwanted-loading-indicators).
 
 #### Returns {/*starttransition-returns*/}
 
@@ -74,30 +103,32 @@ function TabContainer() {
 
 #### Caveats {/*starttransition-caveats*/}
 
-* `useTransition` is a Hook, so it can only be called inside components or custom Hooks. If you need to start a transition somewhere else (for example, from a data library), call the standalone [`startTransition`](/reference/react/startTransition) instead.
+* `useTransition` is a Hook, so it can only be called inside components or custom Hooks. If you need to start a Transition somewhere else (for example, from a data library), call the standalone [`startTransition`](/reference/react/startTransition) instead.
 
-* You can wrap an update into a transition only if you have access to the `set` function of that state. If you want to start a transition in response to some prop or a custom Hook value, try [`useDeferredValue`](/reference/react/useDeferredValue) instead.
+* You can wrap an update into a Transition only if you have access to the `set` function of that state. If you want to start a Transition in response to some prop or a custom Hook value, try [`useDeferredValue`](/reference/react/useDeferredValue) instead.
 
-* The function you pass to `startTransition` must be synchronous. React immediately executes this function, marking all state updates that happen while it executes as transitions. If you try to perform more state updates later (for example, in a timeout), they won't be marked as transitions.
+* The function you pass to `startTransition` is called immediately, marking all state updates that happen while it executes as Transitions. If you try to perform state updates in a `setTimeout`, for example, they won't be marked as Transitions.
 
-* A state update marked as a transition will be interrupted by other state updates. For example, if you update a chart component inside a transition, but then start typing into an input while the chart is in the middle of a re-render, React will restart the rendering work on the chart component after handling the input update.
+* You must wrap any state updates after any async requests in another `startTransition` to mark them as Transitions. This is a known limitation that we will fix in the future (see [Troubleshooting](#react-doesnt-treat-my-state-update-after-await-as-a-transition)).
 
-* Transition updates can't be used to control text inputs.
+* The `startTransition` function has a stable identity, so you will often see it omitted from Effect dependencies, but including it will not cause the Effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
 
-* If there are multiple ongoing transitions, React currently batches them together. This is a limitation that will likely be removed in a future release.
+* A state update marked as a Transition will be interrupted by other state updates. For example, if you update a chart component inside a Transition, but then start typing into an input while the chart is in the middle of a re-render, React will restart the rendering work on the chart component after handling the input update.
 
----
+* Transition updates can't be used to control text inputs.
+
+* If there are multiple ongoing Transitions, React currently batches them together. This is a limitation that may be removed in a future release.
 
 ## Usage {/*usage*/}
 
-### Marking a state update as a non-blocking transition {/*marking-a-state-update-as-a-non-blocking-transition*/}
+### Perform non-blocking updates with Actions {/*perform-non-blocking-updates-with-actions*/}
 
-Call `useTransition` at the top level of your component to mark state updates as non-blocking *transitions*.
+Call `useTransition` at the top of your component to create Actions, and access the pending state:
 
 ```js [[1, 4, "isPending"], [2, 4, "startTransition"]]
-import { useState, useTransition } from 'react';
+import {useState, useTransition} from 'react';
 
-function TabContainer() {
+function CheckoutForm() {
   const [isPending, startTransition] = useTransition();
   // ...
 }
@@ -105,316 +136,460 @@ function TabContainer() {
 
 `useTransition` returns an array with exactly two items:
 
-1. The <CodeStep step={1}>`isPending` flag</CodeStep> that tells you whether there is a pending transition.
-2. The <CodeStep step={2}>`startTransition` function</CodeStep> that lets you mark a state update as a transition.
+1. The <CodeStep step={1}>`isPending` flag</CodeStep> that tells you whether there is a pending Transition.
+2. The <CodeStep step={2}>`startTransition` function</CodeStep> that lets you create an Action.
 
-You can then mark a state update as a transition like this:
+To start a Transition, pass a function to `startTransition` like this:
 
-```js {6,8}
-function TabContainer() {
+```js
+import {useState, useTransition} from 'react';
+import {updateQuantity} from './api';
+
+function CheckoutForm() {
   const [isPending, startTransition] = useTransition();
-  const [tab, setTab] = useState('about');
+  const [quantity, setQuantity] = useState(1);
 
-  function selectTab(nextTab) {
-    startTransition(() => {
-      setTab(nextTab);
+  function onSubmit(newQuantity) {
+    startTransition(async function () {
+      const savedQuantity = await updateQuantity(newQuantity);
+      startTransition(() => {
+        setQuantity(savedQuantity);
+      });
     });
   }
   // ...
 }
 ```
 
-Transitions let you keep the user interface updates responsive even on slow devices.
+The function passed to `startTransition` is called the "Action". You can update state and (optionally) perform side effects within an Action, and the work will be done in the background without blocking user interactions on the page. A Transition can include multiple Actions, and while a Transition is in progress, your UI stays responsive. For example, if the user clicks a tab but then changes their mind and clicks another tab, the second click will be immediately handled without waiting for the first update to finish. 
 
-With a transition, your UI stays responsive in the middle of a re-render. For example, if the user clicks a tab but then change their mind and click another tab, they can do that without waiting for the first re-render to finish.
+To give the user feedback about in-progress Transitions, to `isPending` state switches to `true` at the first call to `startTransition`, and stays `true` until all Actions complete and the final state is shown to the user. Transitions ensure side effects in Actions to complete in order to [prevent unwanted loading indicators](#preventing-unwanted-loading-indicators), and you can provide immediate feedback while the Transition is in progress with `useOptimistic`.
 
-<Recipes titleText="The difference between useTransition and regular state updates" titleId="examples">
+<Recipes titleText="The difference between Actions and regular event handling">
 
-#### Updating the current tab in a transition {/*updating-the-current-tab-in-a-transition*/}
+#### Updating the quantity in an Action {/*updating-the-quantity-in-an-action*/}
 
-In this example, the "Posts" tab is **artificially slowed down** so that it takes at least a second to render.
+In this example, the `updateQuantity` function simulates a request to the server to update the item's quantity in the cart. This function is *artificially slowed down* so that it takes at least a second to complete the request.
 
-Click "Posts" and then immediately click "Contact". Notice that this interrupts the slow render of "Posts". The "Contact" tab shows immediately. Because this state update is marked as a transition, a slow re-render did not freeze the user interface.
+Update the quantity multiple times quickly. Notice that the pending "Total" state is shown while any requests are in progress, and the "Total" updates only after the final request is complete. Because the update is in an Action, the "quantity" can continue to be updated while the request is in progress.
 
 <Sandpack>
 
-```js
-import { useState, useTransition } from 'react';
-import TabButton from './TabButton.js';
-import AboutTab from './AboutTab.js';
-import PostsTab from './PostsTab.js';
-import ContactTab from './ContactTab.js';
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "beta",
+    "react-dom": "beta"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
 
-export default function TabContainer() {
+```js src/App.js
+import { useState, useTransition } from "react";
+import { updateQuantity } from "./api";
+import Item from "./Item";
+import Total from "./Total";
+
+export default function App({}) {
+  const [quantity, setQuantity] = useState(1);
   const [isPending, startTransition] = useTransition();
-  const [tab, setTab] = useState('about');
 
-  function selectTab(nextTab) {
-    startTransition(() => {
-      setTab(nextTab);      
+  const updateQuantityAction = async newQuantity => {
+    // To access the pending state of a transition,
+    // call startTransition again.
+    startTransition(async () => {
+      const savedQuantity = await updateQuantity(newQuantity);
+      startTransition(() => {
+        setQuantity(savedQuantity);
+      });
     });
-  }
+  };
 
   return (
-    <>
-      <TabButton
-        isActive={tab === 'about'}
-        onClick={() => selectTab('about')}
-      >
-        About
-      </TabButton>
-      <TabButton
-        isActive={tab === 'posts'}
-        onClick={() => selectTab('posts')}
-      >
-        Posts (slow)
-      </TabButton>
-      <TabButton
-        isActive={tab === 'contact'}
-        onClick={() => selectTab('contact')}
-      >
-        Contact
-      </TabButton>
+    <div>
+      <h1>Checkout</h1>
+      <Item action={updateQuantityAction}/>
       <hr />
-      {tab === 'about' && <AboutTab />}
-      {tab === 'posts' && <PostsTab />}
-      {tab === 'contact' && <ContactTab />}
-    </>
+      <Total quantity={quantity} isPending={isPending} />
+    </div>
   );
 }
 ```
 
-```js TabButton.js
-import { useTransition } from 'react';
+```js src/Item.js
+import { startTransition } from "react";
 
-export default function TabButton({ children, isActive, onClick }) {
-  if (isActive) {
-    return <b>{children}</b>
+export default function Item({action}) {
+  function handleChange(event) {
+    // To expose an action prop, call the callback in startTransition.
+    startTransition(async () => {
+      action(event.target.value);
+    })
   }
   return (
-    <button onClick={() => {
-      onClick();
-    }}>
-      {children}
-    </button>
+    <div className="item">
+      <span>Eras Tour Tickets</span>
+      <label htmlFor="name">Quantity: </label>
+      <input
+        type="number"
+        onChange={handleChange}
+        defaultValue={1}
+        min={1}
+      />
+    </div>
   )
 }
-
 ```
 
-```js AboutTab.js
-export default function AboutTab() {
-  return (
-    <p>Welcome to my profile!</p>
-  );
-}
-```
-
-```js PostsTab.js
-import { memo } from 'react';
-
-const PostsTab = memo(function PostsTab() {
-  // Log once. The actual slowdown is inside SlowPost.
-  console.log('[ARTIFICIALLY SLOW] Rendering 500 <SlowPost />');
-
-  let items = [];
-  for (let i = 0; i < 500; i++) {
-    items.push(<SlowPost key={i} index={i} />);
-  }
-  return (
-    <ul className="items">
-      {items}
-    </ul>
-  );
+```js src/Total.js
+const intl = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD"
 });
 
-function SlowPost({ index }) {
-  let startTime = performance.now();
-  while (performance.now() - startTime < 1) {
-    // Do nothing for 1 ms per item to emulate extremely slow code
-  }
-
+export default function Total({quantity, isPending}) {
   return (
-    <li className="item">
-      Post #{index + 1}
-    </li>
-  );
+    <div className="total">
+      <span>Total:</span>
+      <span>
+        {isPending ? "🌀 Updating..." : `${intl.format(quantity * 9999)}`}
+      </span>
+    </div>
+  )
 }
-
-export default PostsTab;
 ```
 
-```js ContactTab.js
-export default function ContactTab() {
-  return (
-    <>
-      <p>
-        You can find me online here:
-      </p>
-      <ul>
-        <li>admin@mysite.com</li>
-        <li>+123456789</li>
-      </ul>
-    </>
-  );
+```js src/api.js
+export async function updateQuantity(newQuantity) {
+  return new Promise((resolve, reject) => {
+    // Simulate a slow network request.
+    setTimeout(() => {
+      resolve(newQuantity);
+    }, 2000);
+  });
 }
 ```
 
 ```css
-button { margin-right: 10px }
-b { display: inline-block; margin-right: 10px; }
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
+
+.item label {
+  flex: 1;
+  text-align: right;
+}
+
+.item input {
+  margin-left: 4px;
+  width: 60px;
+  padding: 4px;
+}
+
+.total {
+  height: 50px;
+  line-height: 25px;
+  display: flex;
+  align-content: center;
+  justify-content: space-between;
+}
 ```
 
 </Sandpack>
 
+This is a basic example to demonstrate how Actions work, but this example does not handle requests completing out of order. When updating the quantity multiple times, it's possible for the previous requests to finish after later requests causing the quantity to update out of order. This is a known limitation that we will fix in the future (see [Troubleshooting](#my-state-updates-in-async-transitions-are-out-of-order) below).
+
+For common use cases, React provides built-in abstractions such as:
+- [`useActionState`](/reference/react/useActionState)
+- [`<form>` actions](/reference/react-dom/components/form)
+- [Server Actions](/reference/rsc/server-actions)
+
+These solutions handle request ordering for you. When using Transitions to build your own custom hooks or libraries that manage async state transitions, you have greater control over the request ordering, but you must handle it yourself.
+
 <Solution />
 
-#### Updating the current tab without a transition {/*updating-the-current-tab-without-a-transition*/}
+#### Updating the quantity without an Action {/*updating-the-users-name-without-an-action*/}
 
-In this example, the "Posts" tab is also **artificially slowed down** so that it takes at least a second to render. Unlike in the previous example, this state update is **not a transition.**
+In this example, the `updateQuantity` function also simulates a request to the server to update the item's quantity in the cart. This function is *artificially slowed down* so that it takes at least a second to complete the request.
 
-Click "Posts" and then immediately click "Contact". Notice that the app freezes while rendering the slowed down tab, and the UI becomes unresponsive. This state update is not a transition, so a slow re-render freezed the user interface.
+Update the quantity multiple times quickly. Notice that the pending "Total" state is shown while any requests is in progress, but the "Total" updates multiple times for each time the "quantity" was clicked:
 
 <Sandpack>
 
-```js
-import { useState } from 'react';
-import TabButton from './TabButton.js';
-import AboutTab from './AboutTab.js';
-import PostsTab from './PostsTab.js';
-import ContactTab from './ContactTab.js';
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "beta",
+    "react-dom": "beta"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
 
-export default function TabContainer() {
-  const [tab, setTab] = useState('about');
+```js src/App.js
+import { useState, useTransition } from "react";
+import { updateQuantity } from "./api";
+import Item from "./Item";
+import Total from "./Total";
 
-  function selectTab(nextTab) {
-    setTab(nextTab);
-  }
+export default function App({}) {
+  const [quantity, setQuantity] = useState(1);
+  const [isPending, setIsPending] = useState(false);
+
+  const onUpdateQuantity = async newQuantity => {
+    // Manually set the isPending State.
+    setIsPending(true);
+    const savedQuantity = await updateQuantity(newQuantity);
+    setIsPending(false);
+    setQuantity(savedQuantity);
+  };
 
   return (
-    <>
-      <TabButton
-        isActive={tab === 'about'}
-        onClick={() => selectTab('about')}
-      >
-        About
-      </TabButton>
-      <TabButton
-        isActive={tab === 'posts'}
-        onClick={() => selectTab('posts')}
-      >
-        Posts (slow)
-      </TabButton>
-      <TabButton
-        isActive={tab === 'contact'}
-        onClick={() => selectTab('contact')}
-      >
-        Contact
-      </TabButton>
+    <div>
+      <h1>Checkout</h1>
+      <Item onUpdateQuantity={onUpdateQuantity}/>
       <hr />
-      {tab === 'about' && <AboutTab />}
-      {tab === 'posts' && <PostsTab />}
-      {tab === 'contact' && <ContactTab />}
-    </>
+      <Total quantity={quantity} isPending={isPending} />
+    </div>
   );
 }
-```
 
-```js TabButton.js
-import { useTransition } from 'react';
+```
 
-export default function TabButton({ children, isActive, onClick }) {
-  if (isActive) {
-    return <b>{children}</b>
+```js src/Item.js
+export default function Item({onUpdateQuantity}) {
+  function handleChange(event) {
+    onUpdateQuantity(event.target.value);
   }
   return (
-    <button onClick={() => {
-      onClick();
-    }}>
-      {children}
-    </button>
+    <div className="item">
+      <span>Eras Tour Tickets</span>
+      <label htmlFor="name">Quantity: </label>
+      <input
+        type="number"
+        onChange={handleChange}
+        defaultValue={1}
+        min={1}
+      />
+    </div>
   )
 }
-
 ```
 
-```js AboutTab.js
-export default function AboutTab() {
+```js src/Total.js
+const intl = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD"
+});
+
+export default function Total({quantity, isPending}) {
   return (
-    <p>Welcome to my profile!</p>
-  );
+    <div className="total">
+      <span>Total:</span>
+      <span>
+        {isPending ? "🌀 Updating..." : `${intl.format(quantity * 9999)}`}
+      </span>
+    </div>
+  )
 }
 ```
 
-```js PostsTab.js
-import { memo } from 'react';
+```js src/api.js
+export async function updateQuantity(newQuantity) {
+  return new Promise((resolve, reject) => {
+    // Simulate a slow network request.
+    setTimeout(() => {
+      resolve(newQuantity);
+    }, 2000);
+  });
+}
+```
 
-const PostsTab = memo(function PostsTab() {
-  // Log once. The actual slowdown is inside SlowPost.
-  console.log('[ARTIFICIALLY SLOW] Rendering 500 <SlowPost />');
+```css
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
 
-  let items = [];
-  for (let i = 0; i < 500; i++) {
-    items.push(<SlowPost key={i} index={i} />);
-  }
-  return (
-    <ul className="items">
-      {items}
-    </ul>
-  );
-});
+.item label {
+  flex: 1;
+  text-align: right;
+}
 
-function SlowPost({ index }) {
-  let startTime = performance.now();
-  while (performance.now() - startTime < 1) {
-    // Do nothing for 1 ms per item to emulate extremely slow code
+.item input {
+  margin-left: 4px;
+  width: 60px;
+  padding: 4px;
+}
+
+.total {
+  height: 50px;
+  line-height: 25px;
+  display: flex;
+  align-content: center;
+  justify-content: space-between;
+}
+```
+
+</Sandpack>
+
+A common solution to this problem is to prevent the user from making changes while the quantity is updating:
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "beta",
+    "react-dom": "beta"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
   }
+}
+```
+
+```js src/App.js
+import { useState, useTransition } from "react";
+import { updateQuantity } from "./api";
+import Item from "./Item";
+import Total from "./Total";
+
+export default function App({}) {
+  const [quantity, setQuantity] = useState(1);
+  const [isPending, setIsPending] = useState(false);
+
+  const onUpdateQuantity = async event => {
+    const newQuantity = event.target.value;
+    // Manually set the isPending state.
+    setIsPending(true);
+    const savedQuantity = await updateQuantity(newQuantity);
+    setIsPending(false);
+    setQuantity(savedQuantity);
+  };
 
   return (
-    <li className="item">
-      Post #{index + 1}
-    </li>
+    <div>
+      <h1>Checkout</h1>
+      <Item isPending={isPending} onUpdateQuantity={onUpdateQuantity}/>
+      <hr />
+      <Total quantity={quantity} isPending={isPending} />
+    </div>
   );
 }
 
-export default PostsTab;
 ```
 
-```js ContactTab.js
-export default function ContactTab() {
+```js src/Item.js
+export default function Item({isPending, onUpdateQuantity}) {
   return (
-    <>
-      <p>
-        You can find me online here:
-      </p>
-      <ul>
-        <li>admin@mysite.com</li>
-        <li>+123456789</li>
-      </ul>
-    </>
-  );
+    <div className="item">
+      <span>Eras Tour Tickets</span>
+      <label htmlFor="name">Quantity: </label>
+      <input
+        type="number"
+        disabled={isPending}
+        onChange={onUpdateQuantity}
+        defaultValue={1}
+        min={1}
+      />
+    </div>
+  )
+}
+```
+
+```js src/Total.js
+const intl = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD"
+});
+
+export default function Total({quantity, isPending}) {
+  return (
+    <div className="total">
+      <span>Total:</span>
+      <span>
+        {isPending ? "🌀 Updating..." : `${intl.format(quantity * 9999)}`}
+      </span>
+    </div>
+  )
+}
+```
+
+```js src/api.js
+export async function updateQuantity(newQuantity) {
+  return new Promise((resolve, reject) => {
+    // Simulate a slow network request.
+    setTimeout(() => {
+      resolve(newQuantity);
+    }, 2000);
+  });
 }
 ```
 
 ```css
-button { margin-right: 10px }
-b { display: inline-block; margin-right: 10px; }
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
+
+.item label {
+  flex: 1;
+  text-align: right;
+}
+
+.item input {
+  margin-left: 4px;
+  width: 60px;
+  padding: 4px;
+}
+
+.total {
+  height: 50px;
+  line-height: 25px;
+  display: flex;
+  align-content: center;
+  justify-content: space-between;
+}
 ```
 
 </Sandpack>
 
+This solution makes the app feel slow, because the user must wait each time they update the quantity. It's possible to add more complex handling manually to allow the user to interact with the UI while the quantity is updating, but Actions handle this case with a straight-forward built-in API.
+
 <Solution />
 
 </Recipes>
 
 ---
 
-### Updating the parent component in a transition {/*updating-the-parent-component-in-a-transition*/}
+### Exposing `action` prop from components {/*exposing-action-props-from-components*/}
+
+You can expose an `action` prop from a component to allow a parent to call an Action.
+
 
-You can update a parent component's state from the `useTransition` call, too. For example, this `TabButton` component wraps its `onClick` logic in a transition:
+For example, this `TabButton` component wraps its `onClick` logic in an `action` prop:
 
 ```js {8-10}
-export default function TabButton({ children, isActive, onClick }) {
+export default function TabButton({ action, children, isActive }) {
   const [isPending, startTransition] = useTransition();
   if (isActive) {
     return <b>{children}</b>
@@ -422,7 +597,7 @@ export default function TabButton({ children, isActive, onClick }) {
   return (
     <button onClick={() => {
       startTransition(() => {
-        onClick();
+        action();
       });
     }}>
       {children}
@@ -431,7 +606,7 @@ export default function TabButton({ children, isActive, onClick }) {
 }
 ```
 
-Because the parent component updates its state inside the `onClick` event handler, that state update gets marked as a transition. This is why, like in the earlier example, you can click on "Posts" and then immediately click "Contact". Updating the selected tab is marked as a transition, so it does not block user interactions.
+Because the parent component updates its state inside the `action`, that state update gets marked as a Transition. This means you can click on "Posts" and then immediately click "Contact" and it does not block user interactions:
 
 <Sandpack>
 
@@ -448,19 +623,19 @@ export default function TabContainer() {
     <>
       <TabButton
         isActive={tab === 'about'}
-        onClick={() => setTab('about')}
+        action={() => setTab('about')}
       >
         About
       </TabButton>
       <TabButton
         isActive={tab === 'posts'}
-        onClick={() => setTab('posts')}
+        action={() => setTab('posts')}
       >
         Posts (slow)
       </TabButton>
       <TabButton
         isActive={tab === 'contact'}
-        onClick={() => setTab('contact')}
+        action={() => setTab('contact')}
       >
         Contact
       </TabButton>
@@ -473,10 +648,10 @@ export default function TabContainer() {
 }
 ```
 
-```js TabButton.js active
+```js src/TabButton.js active
 import { useTransition } from 'react';
 
-export default function TabButton({ children, isActive, onClick }) {
+export default function TabButton({ action, children, isActive }) {
   const [isPending, startTransition] = useTransition();
   if (isActive) {
     return <b>{children}</b>
@@ -484,7 +659,7 @@ export default function TabButton({ children, isActive, onClick }) {
   return (
     <button onClick={() => {
       startTransition(() => {
-        onClick();
+        action();
       });
     }}>
       {children}
@@ -493,7 +668,7 @@ export default function TabButton({ children, isActive, onClick }) {
 }
 ```
 
-```js AboutTab.js
+```js src/AboutTab.js
 export default function AboutTab() {
   return (
     <p>Welcome to my profile!</p>
@@ -501,7 +676,7 @@ export default function AboutTab() {
 }
 ```
 
-```js PostsTab.js
+```js src/PostsTab.js
 import { memo } from 'react';
 
 const PostsTab = memo(function PostsTab() {
@@ -535,7 +710,7 @@ function SlowPost({ index }) {
 export default PostsTab;
 ```
 
-```js ContactTab.js
+```js src/ContactTab.js
 export default function ContactTab() {
   return (
     <>
@@ -560,12 +735,12 @@ b { display: inline-block; margin-right: 10px; }
 
 ---
 
-### Displaying a pending visual state during the transition {/*displaying-a-pending-visual-state-during-the-transition*/}
+### Displaying a pending visual state {/*displaying-a-pending-visual-state*/}
 
-You can use the `isPending` boolean value returned by `useTransition` to indicate to the user that a transition is in progress. For example, the tab button can have a special "pending" visual state:
+You can use the `isPending` boolean value returned by `useTransition` to indicate to the user that a Transition is in progress. For example, the tab button can have a special "pending" visual state:
 
 ```js {4-6}
-function TabButton({ children, isActive, onClick }) {
+function TabButton({ action, children, isActive }) {
   const [isPending, startTransition] = useTransition();
   // ...
   if (isPending) {
@@ -591,19 +766,19 @@ export default function TabContainer() {
     <>
       <TabButton
         isActive={tab === 'about'}
-        onClick={() => setTab('about')}
+        action={() => setTab('about')}
       >
         About
       </TabButton>
       <TabButton
         isActive={tab === 'posts'}
-        onClick={() => setTab('posts')}
+        action={() => setTab('posts')}
       >
         Posts (slow)
       </TabButton>
       <TabButton
         isActive={tab === 'contact'}
-        onClick={() => setTab('contact')}
+        action={() => setTab('contact')}
       >
         Contact
       </TabButton>
@@ -616,10 +791,10 @@ export default function TabContainer() {
 }
 ```
 
-```js TabButton.js active
+```js src/TabButton.js active
 import { useTransition } from 'react';
 
-export default function TabButton({ children, isActive, onClick }) {
+export default function TabButton({ action, children, isActive }) {
   const [isPending, startTransition] = useTransition();
   if (isActive) {
     return <b>{children}</b>
@@ -630,7 +805,7 @@ export default function TabButton({ children, isActive, onClick }) {
   return (
     <button onClick={() => {
       startTransition(() => {
-        onClick();
+        action();
       });
     }}>
       {children}
@@ -639,7 +814,7 @@ export default function TabButton({ children, isActive, onClick }) {
 }
 ```
 
-```js AboutTab.js
+```js src/AboutTab.js
 export default function AboutTab() {
   return (
     <p>Welcome to my profile!</p>
@@ -647,7 +822,7 @@ export default function AboutTab() {
 }
 ```
 
-```js PostsTab.js
+```js src/PostsTab.js
 import { memo } from 'react';
 
 const PostsTab = memo(function PostsTab() {
@@ -681,7 +856,7 @@ function SlowPost({ index }) {
 export default PostsTab;
 ```
 
-```js ContactTab.js
+```js src/ContactTab.js
 export default function ContactTab() {
   return (
     <>
@@ -709,7 +884,7 @@ b { display: inline-block; margin-right: 10px; }
 
 ### Preventing unwanted loading indicators {/*preventing-unwanted-loading-indicators*/}
 
-In this example, the `PostsTab` component fetches some data using a [Suspense-enabled](/reference/react/Suspense) data source. When you click the "Posts" tab, the `PostsTab` component *suspends*, causing the closest loading fallback to appear:
+In this example, the `PostsTab` component fetches some data using [use](/reference/react/use). When you click the "Posts" tab, the `PostsTab` component *suspends*, causing the closest loading fallback to appear:
 
 <Sandpack>
 
@@ -726,19 +901,19 @@ export default function TabContainer() {
     <Suspense fallback={<h1>🌀 Loading...</h1>}>
       <TabButton
         isActive={tab === 'about'}
-        onClick={() => setTab('about')}
+        action={() => setTab('about')}
       >
         About
       </TabButton>
       <TabButton
         isActive={tab === 'posts'}
-        onClick={() => setTab('posts')}
+        action={() => setTab('posts')}
       >
         Posts
       </TabButton>
       <TabButton
         isActive={tab === 'contact'}
-        onClick={() => setTab('contact')}
+        action={() => setTab('contact')}
       >
         Contact
       </TabButton>
@@ -751,14 +926,14 @@ export default function TabContainer() {
 }
 ```
 
-```js TabButton.js
-export default function TabButton({ children, isActive, onClick }) {
+```js src/TabButton.js
+export default function TabButton({ action, children, isActive }) {
   if (isActive) {
     return <b>{children}</b>
   }
   return (
     <button onClick={() => {
-      onClick();
+      action();
     }}>
       {children}
     </button>
@@ -766,7 +941,7 @@ export default function TabButton({ children, isActive, onClick }) {
 }
 ```
 
-```js AboutTab.js hidden
+```js src/AboutTab.js hidden
 export default function AboutTab() {
   return (
     <p>Welcome to my profile!</p>
@@ -774,15 +949,10 @@ export default function AboutTab() {
 }
 ```
 
-```js PostsTab.js hidden
+```js src/PostsTab.js hidden
+import {use} from 'react';
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
-
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
-
 function PostsTab() {
   const posts = use(fetchData('/posts'));
   return (
@@ -803,34 +973,9 @@ function Post({ title }) {
 }
 
 export default PostsTab;
-
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
-function use(promise) {
-  if (promise.status === 'fulfilled') {
-    return promise.value;
-  } else if (promise.status === 'rejected') {
-    throw promise.reason;
-  } else if (promise.status === 'pending') {
-    throw promise;
-  } else {
-    promise.status = 'pending';
-    promise.then(
-      result => {
-        promise.status = 'fulfilled';
-        promise.value = result;
-      },
-      reason => {
-        promise.status = 'rejected';
-        promise.reason = reason;
-      },      
-    );
-    throw promise;
-  }
-}
 ```
 
-```js ContactTab.js hidden
+```js src/ContactTab.js hidden
 export default function ContactTab() {
   return (
     <>
@@ -847,7 +992,7 @@ export default function ContactTab() {
 ```
 
 
-```js data.js hidden
+```js src/data.js hidden
 // Note: the way you would do data fetching depends on
 // the framework that you use together with Suspense.
 // Normally, the caching logic would be inside a framework.
@@ -893,7 +1038,7 @@ b { display: inline-block; margin-right: 10px; }
 
 </Sandpack>
 
-Hiding the entire tab container to show a loading indicator leads to a jarring user experience. If you add `useTransition` to `TabButton`, you can instead indicate display the pending state in the tab button instead.
+Hiding the entire tab container to show a loading indicator leads to a jarring user experience. If you add `useTransition` to `TabButton`, you can instead display the pending state in the tab button instead.
 
 Notice that clicking "Posts" no longer replaces the entire tab container with a spinner:
 
@@ -912,19 +1057,19 @@ export default function TabContainer() {
     <Suspense fallback={<h1>🌀 Loading...</h1>}>
       <TabButton
         isActive={tab === 'about'}
-        onClick={() => setTab('about')}
+        action={() => setTab('about')}
       >
         About
       </TabButton>
       <TabButton
         isActive={tab === 'posts'}
-        onClick={() => setTab('posts')}
+        action={() => setTab('posts')}
       >
         Posts
       </TabButton>
       <TabButton
         isActive={tab === 'contact'}
-        onClick={() => setTab('contact')}
+        action={() => setTab('contact')}
       >
         Contact
       </TabButton>
@@ -937,10 +1082,10 @@ export default function TabContainer() {
 }
 ```
 
-```js TabButton.js active
+```js src/TabButton.js active
 import { useTransition } from 'react';
 
-export default function TabButton({ children, isActive, onClick }) {
+export default function TabButton({ action, children, isActive }) {
   const [isPending, startTransition] = useTransition();
   if (isActive) {
     return <b>{children}</b>
@@ -951,7 +1096,7 @@ export default function TabButton({ children, isActive, onClick }) {
   return (
     <button onClick={() => {
       startTransition(() => {
-        onClick();
+        action();
       });
     }}>
       {children}
@@ -960,7 +1105,7 @@ export default function TabButton({ children, isActive, onClick }) {
 }
 ```
 
-```js AboutTab.js hidden
+```js src/AboutTab.js hidden
 export default function AboutTab() {
   return (
     <p>Welcome to my profile!</p>
@@ -968,15 +1113,10 @@ export default function AboutTab() {
 }
 ```
 
-```js PostsTab.js hidden
+```js src/PostsTab.js hidden
+import {use} from 'react';
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
-
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
-
 function PostsTab() {
   const posts = use(fetchData('/posts'));
   return (
@@ -997,34 +1137,9 @@ function Post({ title }) {
 }
 
 export default PostsTab;
-
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
-function use(promise) {
-  if (promise.status === 'fulfilled') {
-    return promise.value;
-  } else if (promise.status === 'rejected') {
-    throw promise.reason;
-  } else if (promise.status === 'pending') {
-    throw promise;
-  } else {
-    promise.status = 'pending';
-    promise.then(
-      result => {
-        promise.status = 'fulfilled';
-        promise.value = result;
-      },
-      reason => {
-        promise.status = 'rejected';
-        promise.reason = reason;
-      },      
-    );
-    throw promise;
-  }
-}
 ```
 
-```js ContactTab.js hidden
+```js src/ContactTab.js hidden
 export default function ContactTab() {
   return (
     <>
@@ -1041,7 +1156,7 @@ export default function ContactTab() {
 ```
 
 
-```js data.js hidden
+```js src/data.js hidden
 // Note: the way you would do data fetching depends on
 // the framework that you use together with Suspense.
 // Normally, the caching logic would be inside a framework.
@@ -1087,11 +1202,11 @@ b { display: inline-block; margin-right: 10px; }
 
 </Sandpack>
 
-[Read more about using transitions with Suspense.](/reference/react/Suspense#preventing-already-revealed-content-from-hiding)
+[Read more about using Transitions with Suspense.](/reference/react/Suspense#preventing-already-revealed-content-from-hiding)
 
 <Note>
 
-Transitions will only "wait" long enough to avoid hiding *already revealed* content (like the tab container). If the Posts tab had a [nested `<Suspense>` boundary,](/reference/react/Suspense#revealing-nested-content-as-it-loads) the transition would not "wait" for it.
+Transitions only "wait" long enough to avoid hiding *already revealed* content (like the tab container). If the Posts tab had a [nested `<Suspense>` boundary,](/reference/react/Suspense#revealing-nested-content-as-it-loads) the Transition would not "wait" for it.
 
 </Note>
 
@@ -1099,7 +1214,7 @@ Transitions will only "wait" long enough to avoid hiding *already revealed* cont
 
 ### Building a Suspense-enabled router {/*building-a-suspense-enabled-router*/}
 
-If you're building a React framework or a router, we recommend marking page navigations as transitions.
+If you're building a React framework or a router, we recommend marking page navigations as Transitions.
 
 ```js {3,6,8}
 function Router() {
@@ -1114,31 +1229,17 @@ function Router() {
   // ...
 ```
 
-This is recommended for two reasons:
+This is recommended for three reasons:
 
 - [Transitions are interruptible,](#marking-a-state-update-as-a-non-blocking-transition) which lets the user click away without waiting for the re-render to complete.
 - [Transitions prevent unwanted loading indicators,](#preventing-unwanted-loading-indicators) which lets the user avoid jarring jumps on navigation.
+- [Transitions wait for all pending actions](#perform-non-blocking-updates-with-actions) which lets the user wait for side effects to complete before the new page is shown.
 
-Here is a tiny simplified router example using transitions for navigations.
+Here is a simplified router example using Transitions for navigations.
 
 <Sandpack>
 
-```json package.json hidden
-{
-  "dependencies": {
-    "react": "experimental",
-    "react-dom": "experimental"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  }
-}
-```
-
-```js App.js
+```js src/App.js
 import { Suspense, useState, useTransition } from 'react';
 import IndexPage from './IndexPage.js';
 import ArtistPage from './ArtistPage.js';
@@ -1189,7 +1290,7 @@ function BigSpinner() {
 }
 ```
 
-```js Layout.js
+```js src/Layout.js
 export default function Layout({ children, isPending }) {
   return (
     <div className="layout">
@@ -1206,7 +1307,7 @@ export default function Layout({ children, isPending }) {
 }
 ```
 
-```js IndexPage.js
+```js src/IndexPage.js
 export default function IndexPage({ navigate }) {
   return (
     <button onClick={() => navigate('/the-beatles')}>
@@ -1216,7 +1317,7 @@ export default function IndexPage({ navigate }) {
 }
 ```
 
-```js ArtistPage.js
+```js src/ArtistPage.js
 import { Suspense } from 'react';
 import Albums from './Albums.js';
 import Biography from './Biography.js';
@@ -1247,15 +1348,10 @@ function AlbumsGlimmer() {
 }
 ```
 
-```js Albums.js hidden
+```js src/Albums.js
+import {use} from 'react';
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
-
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
-
 export default function Albums({ artistId }) {
   const albums = use(fetchData(`/${artistId}/albums`));
   return (
@@ -1268,42 +1364,12 @@ export default function Albums({ artistId }) {
     </ul>
   );
 }
-
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
-function use(promise) {
-  if (promise.status === 'fulfilled') {
-    return promise.value;
-  } else if (promise.status === 'rejected') {
-    throw promise.reason;
-  } else if (promise.status === 'pending') {
-    throw promise;
-  } else {
-    promise.status = 'pending';
-    promise.then(
-      result => {
-        promise.status = 'fulfilled';
-        promise.value = result;
-      },
-      reason => {
-        promise.status = 'rejected';
-        promise.reason = reason;
-      },      
-    );
-    throw promise;
-  }
-}
 ```
 
-```js Biography.js hidden
+```js src/Biography.js
+import {use} from 'react';
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
-
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
-
 export default function Biography({ artistId }) {
   const bio = use(fetchData(`/${artistId}/bio`));
   return (
@@ -1312,34 +1378,9 @@ export default function Biography({ artistId }) {
     </section>
   );
 }
-
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
-function use(promise) {
-  if (promise.status === 'fulfilled') {
-    return promise.value;
-  } else if (promise.status === 'rejected') {
-    throw promise.reason;
-  } else if (promise.status === 'pending') {
-    throw promise;
-  } else {
-    promise.status = 'pending';
-    promise.then(
-      result => {
-        promise.status = 'fulfilled';
-        promise.value = result;
-      },
-      reason => {
-        promise.status = 'rejected';
-        promise.reason = reason;
-      },      
-    );
-    throw promise;
-  }
-}
 ```
 
-```js Panel.js hidden
+```js src/Panel.js
 export default function Panel({ children }) {
   return (
     <section className="panel">
@@ -1349,7 +1390,7 @@ export default function Panel({ children }) {
 }
 ```
 
-```js data.js hidden
+```js src/data.js hidden
 // Note: the way you would do data fetching depends on
 // the framework that you use together with Suspense.
 // Normally, the caching logic would be inside a framework.
@@ -1379,9 +1420,9 @@ async function getBio() {
     setTimeout(resolve, 500);
   });
 
-  return `The Beatles were an English rock band, 
-    formed in Liverpool in 1960, that comprised 
-    John Lennon, Paul McCartney, George Harrison 
+  return `The Beatles were an English rock band,
+    formed in Liverpool in 1960, that comprised
+    John Lennon, Paul McCartney, George Harrison
     and Ringo Starr.`;
 }
 
@@ -1495,23 +1536,105 @@ main {
 
 <Note>
 
-[Suspense-enabled](/reference/react/Suspense) routers are expected to wrap the navigation updates into transitions by default.
+[Suspense-enabled](/reference/react/Suspense) routers are expected to wrap the navigation updates into Transitions by default.
 
 </Note>
 
 ---
 
+### Displaying an error to users with an error boundary {/*displaying-an-error-to-users-with-error-boundary*/}
+
+If a function passed to `startTransition` throws an error, you can display an error to your user with an [error boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). To use an error boundary, wrap the component where you are calling the `useTransition` in an error boundary. Once the function passed to `startTransition` errors, the fallback for the error boundary will be displayed.
+
+<Sandpack>
+
+```js src/AddCommentContainer.js active
+import { useTransition } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+
+export function AddCommentContainer() {
+  return (
+    <ErrorBoundary fallback={<p>⚠️Something went wrong</p>}>
+      <AddCommentButton />
+    </ErrorBoundary>
+  );
+}
+
+function addComment(comment) {
+  // For demonstration purposes to show Error Boundary
+  if (comment == null) {
+    throw new Error("Example Error: An error thrown to trigger error boundary");
+  }
+}
+
+function AddCommentButton() {
+  const [pending, startTransition] = useTransition();
+
+  return (
+    <button
+      disabled={pending}
+      onClick={() => {
+        startTransition(() => {
+          // Intentionally not passing a comment
+          // so error gets thrown
+          addComment();
+        });
+      }}
+    >
+      Add comment
+    </button>
+  );
+}
+```
+
+```js src/App.js hidden
+import { AddCommentContainer } from "./AddCommentContainer.js";
+
+export default function App() {
+  return <AddCommentContainer />;
+}
+```
+
+```js src/index.js hidden
+import React, { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './styles.css';
+import App from './App';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "19.0.0-rc-3edc000d-20240926",
+    "react-dom": "19.0.0-rc-3edc000d-20240926",
+    "react-scripts": "^5.0.0",
+    "react-error-boundary": "4.0.3"
+  },
+  "main": "/index.js"
+}
+```
+</Sandpack>
+
+---
+
 ## Troubleshooting {/*troubleshooting*/}
 
-### Updating an input in a transition doesn't work {/*updating-an-input-in-a-transition-doesnt-work*/}
+### Updating an input in a Transition doesn't work {/*updating-an-input-in-a-transition-doesnt-work*/}
 
-You can't use a transition for a state variable that controls an input:
+You can't use a Transition for a state variable that controls an input:
 
 ```js {4,10}
 const [text, setText] = useState('');
 // ...
 function handleChange(e) {
-  // ❌ Can't use transitions for controlled input state
+  // ❌ Can't use Transitions for controlled input state
   startTransition(() => {
     setText(e.target.value);
   });
@@ -1520,16 +1643,16 @@ function handleChange(e) {
 return <input value={text} onChange={handleChange} />;
 ```
 
-This is because transitions are non-blocking, but updating an input in response to the change event should happen synchronously. If you want to run a transition in response to typing, you have two options:
+This is because Transitions are non-blocking, but updating an input in response to the change event should happen synchronously. If you want to run a Transition in response to typing, you have two options:
 
-1. You can declare two separate state variables: one for the input state (which always updates synchronously), and one that you will update in a transition. This lets you control the input using the synchronous state, and pass the transition state variable (which will "lag behind" the input) to the rest of your rendering logic.
+1. You can declare two separate state variables: one for the input state (which always updates synchronously), and one that you will update in a Transition. This lets you control the input using the synchronous state, and pass the Transition state variable (which will "lag behind" the input) to the rest of your rendering logic.
 2. Alternatively, you can have one state variable, and add [`useDeferredValue`](/reference/react/useDeferredValue) which will "lag behind" the real value. It will trigger non-blocking re-renders to "catch up" with the new value automatically.
 
 ---
 
-### React doesn't treat my state update as a transition {/*react-doesnt-treat-my-state-update-as-a-transition*/}
+### React doesn't treat my state update as a Transition {/*react-doesnt-treat-my-state-update-as-a-transition*/}
 
-When you wrap a state update in a transition, make sure that it happens *during* the `startTransition` call:
+When you wrap a state update in a Transition, make sure that it happens *during* the `startTransition` call:
 
 ```js
 startTransition(() => {
@@ -1538,9 +1661,7 @@ startTransition(() => {
 });
 ```
 
-The function you pass to `startTransition` must be synchronous.
-
-You can't mark an update as a transition like this:
+The function you pass to `startTransition` must be synchronous. You can't mark an update as a Transition like this:
 
 ```js
 startTransition(() => {
@@ -1562,12 +1683,16 @@ setTimeout(() => {
 }, 1000);
 ```
 
-Similarly, you can't mark an update as a transition like this:
+---
+
+### React doesn't treat my state update after `await` as a Transition {/*react-doesnt-treat-my-state-update-after-await-as-a-transition*/}
+
+When you use `await` inside a `startTransition` function, the state updates that happen after the `await` are not marked as Transitions. You must wrap state updates after each `await` in a `startTransition` call:
 
 ```js
 startTransition(async () => {
   await someAsyncFunction();
-  // ❌ Setting state *after* startTransition call
+  // ❌ Not using startTransition after await
   setPage('/about');
 });
 ```
@@ -1575,13 +1700,17 @@ startTransition(async () => {
 However, this works instead:
 
 ```js
-await someAsyncFunction();
-startTransition(() => {
-  // ✅ Setting state *during* startTransition call
-  setPage('/about');
+startTransition(async () => {
+  await someAsyncFunction();
+  // ✅ Using startTransition *after* await
+  startTransition(() => {
+    setPage('/about');
+  });
 });
 ```
 
+This is a JavaScript limitation due to React losing the scope of the async context. In the future, when [AsyncContext](https://github.com/tc39/proposal-async-context) is available, this limitation will be removed.
+
 ---
 
 ### I want to call `useTransition` from outside a component {/*i-want-to-call-usetransition-from-outside-a-component*/}
@@ -1603,7 +1732,7 @@ startTransition(() => {
 console.log(3);
 ```
 
-**It is expected to print 1, 2, 3.** The function you pass to `startTransition` does not get delayed. Unlike with the browser `setTimeout`, it does not run the callback later. React executes your function immediately, but any state updates scheduled *while it is running* are marked as transitions. You can imagine that it works like this:
+**It is expected to print 1, 2, 3.** The function you pass to `startTransition` does not get delayed. Unlike with the browser `setTimeout`, it does not run the callback later. React executes your function immediately, but any state updates scheduled *while it is running* are marked as Transitions. You can imagine that it works like this:
 
 ```js
 // A simplified version of how React works
@@ -1618,9 +1747,189 @@ function startTransition(scope) {
 
 function setState() {
   if (isInsideTransition) {
-    // ... schedule a transition state update ...
+    // ... schedule a Transition state update ...
   } else {
     // ... schedule an urgent state update ...
   }
 }
 ```
+
+### My state updates in Transitions are out of order {/*my-state-updates-in-transitions-are-out-of-order*/}
+
+If you `await` inside `startTransition`, you might see the updates happen out of order.
+
+In this example, the `updateQuantity` function simulates a request to the server to update the item's quantity in the cart. This function *artificially returns the every other request after the previous* to simulate race conditions for network requests.
+
+Try updating the quantity once, then update it quickly multiple times. You might see the incorrect total:
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "beta",
+    "react-dom": "beta"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js src/App.js
+import { useState, useTransition } from "react";
+import { updateQuantity } from "./api";
+import Item from "./Item";
+import Total from "./Total";
+
+export default function App({}) {
+  const [quantity, setQuantity] = useState(1);
+  const [isPending, startTransition] = useTransition();
+  // Store the actual quantity in separate state to show the mismatch.
+  const [clientQuantity, setClientQuantity] = useState(1);
+  
+  const updateQuantityAction = newQuantity => {
+    setClientQuantity(newQuantity);
+
+    // Access the pending state of the transition,
+    // by wrapping in startTransition again.
+    startTransition(async () => {
+      const savedQuantity = await updateQuantity(newQuantity);
+      startTransition(() => {
+        setQuantity(savedQuantity);
+      });
+    });
+  };
+
+  return (
+    <div>
+      <h1>Checkout</h1>
+      <Item action={updateQuantityAction}/>
+      <hr />
+      <Total clientQuantity={clientQuantity} savedQuantity={quantity} isPending={isPending} />
+    </div>
+  );
+}
+
+```
+
+```js src/Item.js
+import {startTransition} from 'react';
+
+export default function Item({action}) {
+  function handleChange(e) {
+    // Update the quantity in an Action.
+    startTransition(() => {
+      action(e.target.value);
+    });
+  }  
+  return (
+    <div className="item">
+      <span>Eras Tour Tickets</span>
+      <label htmlFor="name">Quantity: </label>
+      <input
+        type="number"
+        onChange={handleChange}
+        defaultValue={1}
+        min={1}
+      />
+    </div>
+  )
+}
+```
+
+```js src/Total.js
+const intl = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD"
+});
+
+export default function Total({ clientQuantity, savedQuantity, isPending }) {
+  return (
+    <div className="total">
+      <span>Total:</span>
+      <div>
+        <div>
+          {isPending
+            ? "🌀 Updating..."
+            : `${intl.format(savedQuantity * 9999)}`}
+        </div>
+        <div className="error">
+          {!isPending &&
+            clientQuantity !== savedQuantity &&
+            `Wrong total, expected: ${intl.format(clientQuantity * 9999)}`}
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+```js src/api.js
+let firstRequest = true;
+export async function updateQuantity(newName) {
+  return new Promise((resolve, reject) => {
+    if (firstRequest === true) {
+      firstRequest = false;
+      setTimeout(() => {
+        firstRequest = true;
+        resolve(newName);
+        // Simulate every other request being slower
+      }, 1000);
+    } else {
+      setTimeout(() => {
+        resolve(newName);
+      }, 50);
+    }
+  });
+}
+```
+
+```css
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
+
+.item label {
+  flex: 1;
+  text-align: right;
+}
+
+.item input {
+  margin-left: 4px;
+  width: 60px;
+  padding: 4px;
+}
+
+.total {
+  height: 50px;
+  line-height: 25px;
+  display: flex;
+  align-content: center;
+  justify-content: space-between;
+}
+
+.total div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.error {
+  color: red;
+}
+```
+
+</Sandpack>
+
+
+When clicking multiple times, it's possible for previous requests to finish after later requests. When this happens, React currently has no way to know the intended order. This is because the updates are scheduled asynchronously, and React loses context of the order across the async boundary.
+
+This is expected, because Actions within a Transition do not guarantee execution order. For common use cases, React provides higher-level abstractions like [`useActionState`](/reference/react/useActionState) and [`<form>` actions](/reference/react-dom/components/form) that handle ordering for you. For advanced use cases, you'll need to implement your own queuing and abort logic to handle this.
+
+
diff --git a/src/content/reference/rsc/directives.md b/src/content/reference/rsc/directives.md
new file mode 100644
index 000000000..42256de49
--- /dev/null
+++ b/src/content/reference/rsc/directives.md
@@ -0,0 +1,22 @@
+---
+title: Directives
+---
+
+<RSC>
+
+Directives are for use in [React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks).
+
+</RSC>
+
+<Intro>
+
+Directives 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/rsc/use-client) lets you mark what code runs on the client.
+* [`'use server'`](/reference/rsc/use-server) marks server-side functions that can be called from client-side code.
diff --git a/src/content/reference/rsc/server-components.md b/src/content/reference/rsc/server-components.md
new file mode 100644
index 000000000..636b190c7
--- /dev/null
+++ b/src/content/reference/rsc/server-components.md
@@ -0,0 +1,302 @@
+---
+title: Server Components
+---
+
+<RSC>
+
+Sever Components are for use in [React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks).
+
+</RSC>
+
+<Intro>
+
+Server Components are a new type of Component that renders ahead of time, before bundling, in an environment separate from your client app or SSR server.
+
+</Intro>
+
+This separate environment is the "server" in React Server Components. Server Components can run once at build time on your CI server, or they can be run for each request using a web server.
+
+<InlineToc />
+
+<Note>
+
+#### How do I build support for Server Components? {/*how-do-i-build-support-for-server-components*/}
+
+While React Server Components in React 19 are stable and will not break between major versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. 
+
+To support React Server Components as a bundler or framework, we recommend pinning to a specific React version, or using the Canary release. We will continue working with bundlers and frameworks to stabilize the APIs used to implement React Server Components in the future.
+
+</Note>
+
+### Server Components without a Server {/*server-components-without-a-server*/}
+Server components can run at build time to read from the filesystem or fetch static content, so a web server is not required. For example, you may want to read static data from a content management system.
+
+Without Server Components, it's common to fetch static data on the client with an Effect:
+```js
+// bundle.js
+import marked from 'marked'; // 35.9K (11.2K gzipped)
+import sanitizeHtml from 'sanitize-html'; // 206K (63.3K gzipped)
+
+function Page({page}) {
+  const [content, setContent] = useState('');
+  // NOTE: loads *after* first page render.
+  useEffect(() => {
+    fetch(`/api/content/${page}`).then((data) => {
+      setContent(data.content);
+    });
+  }, [page]);
+  
+  return <div>{sanitizeHtml(marked(content))}</div>;
+}
+```
+```js
+// api.js
+app.get(`/api/content/:page`, async (req, res) => {
+  const page = req.params.page;
+  const content = await file.readFile(`${page}.md`);
+  res.send({content});
+});
+```
+
+This pattern means users need to download and parse an additional 75K (gzipped) of libraries, and wait for a second request to fetch the data after the page loads, just to render static content that will not change for the lifetime of the page.
+
+With Server Components, you can render these components once at build time:
+
+```js
+import marked from 'marked'; // Not included in bundle
+import sanitizeHtml from 'sanitize-html'; // Not included in bundle
+
+async function Page({page}) {
+  // NOTE: loads *during* render, when the app is built.
+  const content = await file.readFile(`${page}.md`);
+  
+  return <div>{sanitizeHtml(marked(content))}</div>;
+}
+```
+
+The rendered output can then be server-side rendered (SSR) to HTML and uploaded to a CDN. When the app loads, the client will not see the original `Page` component, or the expensive libraries for rendering the markdown. The client will only see the rendered output:
+
+```js
+<div><!-- html for markdown --></div>
+```
+
+This means the content is visible during first page load, and the bundle does not include the expensive libraries needed to render the static content.
+
+<Note>
+
+You may notice that the Server Component above is an async function:
+
+```js
+async function Page({page}) {
+  //...
+}
+```
+
+Async Components are a new feature of Server Components that allow you to `await` in render.
+
+See [Async components with Server Components](#async-components-with-server-components) below.
+
+</Note>
+
+### Server Components with a Server {/*server-components-with-a-server*/}
+Server Components can also run on a web server during a request for a page, letting you access your data layer without having to build an API. They are rendered before your application is bundled, and can pass data and JSX as props to Client Components.
+
+Without Server Components, it's common to fetch dynamic data on the client in an Effect:
+
+```js
+// bundle.js
+function Note({id}) {
+  const [note, setNote] = useState('');
+  // NOTE: loads *after* first render.
+  useEffect(() => {
+    fetch(`/api/notes/${id}`).then(data => {
+      setNote(data.note);
+    });
+  }, [id]);
+  
+  return (
+    <div>
+      <Author id={note.authorId} />
+      <p>{note}</p>
+    </div>
+  );
+}
+
+function Author({id}) {
+  const [author, setAuthor] = useState('');
+  // NOTE: loads *after* Note renders.
+  // Causing an expensive client-server waterfall.
+  useEffect(() => {
+    fetch(`/api/authors/${id}`).then(data => {
+      setAuthor(data.author);
+    });
+  }, [id]);
+
+  return <span>By: {author.name}</span>;
+}
+```
+```js
+// api
+import db from './database';
+
+app.get(`/api/notes/:id`, async (req, res) => {
+  const note = await db.notes.get(id);
+  res.send({note});
+});
+
+app.get(`/api/authors/:id`, async (req, res) => {
+  const author = await db.authors.get(id);
+  res.send({author});
+});
+```
+
+With Server Components, you can read the data and render it in the component:
+
+```js
+import db from './database';
+
+async function Note({id}) {
+  // NOTE: loads *during* render.
+  const note = await db.notes.get(id);
+  return (
+    <div>
+      <Author id={note.authorId} />
+      <p>{note}</p>
+    </div>
+  );
+}
+
+async function Author({id}) {
+  // NOTE: loads *after* Note,
+  // but is fast if data is co-located.
+  const author = await db.authors.get(id);
+  return <span>By: {author.name}</span>;
+}
+```
+
+The bundler then combines the data, rendered Server Components and dynamic Client Components into a bundle. Optionally, that bundle can then be server-side rendered (SSR) to create the initial HTML for the page. When the page loads, the browser does not see the original `Note` and `Author` components; only the rendered output is sent to the client:
+
+```js
+<div>
+  <span>By: The React Team</span>
+  <p>React 19 is...</p>
+</div>
+```
+
+Server Components can be made dynamic by re-fetching them from a server, where they can access the data and render again. This new application architecture combines the simple “request/response” mental model of server-centric Multi-Page Apps with the seamless interactivity of client-centric Single-Page Apps, giving you the best of both worlds.
+
+### Adding interactivity to Server Components {/*adding-interactivity-to-server-components*/}
+
+Server Components are not sent to the browser, so they cannot use interactive APIs like `useState`. To add interactivity to Server Components, you can compose them with Client Component using the `"use client"` directive.
+
+<Note>
+
+#### There is no directive for Server Components. {/*there-is-no-directive-for-server-components*/}
+
+A common misunderstanding is that Server Components are denoted by `"use server"`, but there is no directive for Server Components. The `"use server"` directive is used for Server Functions.
+
+For more info, see the docs for [Directives](/reference/rsc/directives).
+
+</Note>
+
+
+In the following example, the `Notes` Server Component imports an `Expandable` Client Component that uses state to toggle its `expanded` state:
+```js
+// Server Component
+import Expandable from './Expandable';
+
+async function Notes() {
+  const notes = await db.notes.getAll();
+  return (
+    <div>
+      {notes.map(note => (
+        <Expandable key={note.id}>
+          <p note={note} />
+        </Expandable>
+      ))}
+    </div>
+  )
+}
+```
+```js
+// Client Component
+"use client"
+
+export default function Expandable({children}) {
+  const [expanded, setExpanded] = useState(false);
+  return (
+    <div>
+      <button
+        onClick={() => setExpanded(!expanded)}
+      >
+        Toggle
+      </button>
+      {expanded && children}
+    </div>
+  )
+}
+```
+
+This works by first rendering `Notes` as a Server Component, and then instructing the bundler to create a bundle for the Client Component `Expandable`. In the browser, the Client Components will see output of the Server Components passed as props:
+
+```js
+<head>
+  <!-- the bundle for Client Components -->
+  <script src="bundle.js" />
+</head>
+<body>
+  <div>
+    <Expandable key={1}>
+      <p>this is the first note</p>
+    </Expandable>
+    <Expandable key={2}>
+      <p>this is the second note</p>
+    </Expandable>
+    <!--...-->
+  </div> 
+</body>
+```
+
+### Async components with Server Components {/*async-components-with-server-components*/}
+
+Server Components introduce a new way to write Components using async/await. When you `await` in an async component, React will suspend and wait for the promise to resolve before resuming rendering. This works across server/client boundaries with streaming support for Suspense.
+
+You can even create a promise on the server, and await it on the client:
+
+```js
+// Server Component
+import db from './database';
+
+async function Page({id}) {
+  // Will suspend the Server Component.
+  const note = await db.notes.get(id);
+  
+  // NOTE: not awaited, will start here and await on the client. 
+  const commentsPromise = db.comments.get(note.id);
+  return (
+    <div>
+      {note}
+      <Suspense fallback={<p>Loading Comments...</p>}>
+        <Comments commentsPromise={commentsPromise} />
+      </Suspense>
+    </div>
+  );
+}
+```
+
+```js
+// Client Component
+"use client";
+import {use} from 'react';
+
+function Comments({commentsPromise}) {
+  // NOTE: this will resume the promise from the server.
+  // It will suspend until the data is available.
+  const comments = use(commentsPromise);
+  return comments.map(commment => <p>{comment}</p>);
+}
+```
+
+The `note` content is important data for the page to render, so we `await` it on the server. The comments are below the fold and lower-priority, so we start the promise on the server, and wait for it on the client with the `use` API. This will Suspend on the client, without blocking the `note` content from rendering.
+
+Since async components are [not supported on the client](#why-cant-i-use-async-components-on-the-client), we await the promise with `use`.
diff --git a/src/content/reference/rsc/server-functions.md b/src/content/reference/rsc/server-functions.md
new file mode 100644
index 000000000..adce77284
--- /dev/null
+++ b/src/content/reference/rsc/server-functions.md
@@ -0,0 +1,222 @@
+---
+title: Server Functions
+---
+
+<RSC>
+
+Server Functions are for use in [React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks).
+
+**Note:** Until September 2024, we referred to all Server Functions as "Server Actions". If a Server Function is passed to an action prop or called from inside an action then it is a Server Action, but not all Server Functions are Server Actions. The naming in this documentation has been updated to reflect that Server Functions can be used for multiple purposes.
+
+</RSC>
+
+<Intro>
+
+Server Functions allow Client Components to call async functions executed on the server.
+
+</Intro>
+
+<InlineToc />
+
+<Note>
+
+#### How do I build support for Server Functions? {/*how-do-i-build-support-for-server-functions*/}
+
+While Server Functions in React 19 are stable and will not break between major versions, the underlying APIs used to implement Server Functions in a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. 
+
+To support Server Functions as a bundler or framework, we recommend pinning to a specific React version, or using the Canary release. We will continue working with bundlers and frameworks to stabilize the APIs used to implement Server Functions in the future.
+
+</Note>
+
+When a Server Functions is defined with the [`"use server"`](/reference/rsc/use-server) directive, your framework will automatically create a reference to the server function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result.
+
+Server Functions can be created in Server Components and passed as props to Client Components, or they can be imported and used in Client Components.
+
+## Usage {/*usage*/}
+
+### Creating a Server Function from a Server Component {/*creating-a-server-function-from-a-server-component*/}
+
+Server Components can define Server Functions with the `"use server"` directive:
+
+```js [[2, 7, "'use server'"], [1, 5, "createNoteAction"], [1, 12, "createNoteAction"]]
+// Server Component
+import Button from './Button';
+
+function EmptyNote () {
+  async function createNoteAction() {
+    // Server Function
+    'use server';
+    
+    await db.notes.create();
+  }
+
+  return <Button onClick={createNoteAction}/>;
+}
+```
+
+When React renders the `EmptyNote` Server Function, it will create a reference to the `createNoteAction` function, and pass that reference to the `Button` Client Component. When the button is clicked, React will send a request to the server to execute the `createNoteAction` function with the reference provided:
+
+```js {5}
+"use client";
+
+export default function Button({onClick}) { 
+  console.log(onClick); 
+  // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNoteAction'}
+  return <button onClick={() => onClick()}>Create Empty Note</button>
+}
+```
+
+For more, see the docs for [`"use server"`](/reference/rsc/use-server).
+
+
+### Importing Server Functions from Client Components {/*importing-server-functions-from-client-components*/}
+
+Client Components can import Server Functions from files that use the `"use server"` directive:
+
+```js [[1, 3, "createNote"]]
+"use server";
+
+export async function createNote() {
+  await db.notes.create();
+}
+
+```
+
+When the bundler builds the `EmptyNote` Client Component, it will create a reference to the `createNoteAction` function in the bundle. When the `button` is clicked, React will send a request to the server to execute the `createNoteAction` function using the reference provided:
+
+```js [[1, 2, "createNote"], [1, 5, "createNote"], [1, 7, "createNote"]]
+"use client";
+import {createNote} from './actions';
+
+function EmptyNote() {
+  console.log(createNote);
+  // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNoteAction'}
+  <button onClick={() => createNote()} />
+}
+```
+
+For more, see the docs for [`"use server"`](/reference/rsc/use-server).
+
+### Server Functions with Actions {/*server-functions-with-actions*/}
+
+Server Functions can be called from Actions on the client:
+
+```js [[1, 3, "updateName"]]
+"use server";
+
+export async function updateName(name) {
+  if (!name) {
+    return {error: 'Name is required'};
+  }
+  await db.users.updateName(name);
+}
+```
+
+```js [[1, 3, "updateName"], [1, 13, "updateName"], [2, 11, "submitAction"],  [2, 23, "submitAction"]]
+"use client";
+
+import {updateName} from './actions';
+
+function UpdateName() {
+  const [name, setName] = useState('');
+  const [error, setError] = useState(null);
+
+  const [isPending, startTransition] = useTransition();
+
+  const submitAction = async () => {
+    startTransition(async () => {
+      const {error} = await updateName(name);
+      if (!error) {
+        setError(error);
+      } else {
+        setName('');
+      }
+    })
+  }
+  
+  return (
+    <form action={submitAction}>
+      <input type="text" name="name" disabled={isPending}/>
+      {state.error && <span>Failed: {state.error}</span>}
+    </form>
+  )
+}
+```
+
+This allows you to access the `isPending` state of the Server Function by wrapping it in an Action on the client.
+
+For more, see the docs for [Calling a Server Function outside of `<form>`](/reference/rsc/use-server#calling-a-server-function-outside-of-form)
+
+### Server Functions with Form Actions {/*using-server-functions-with-form-actions*/}
+
+Server Functions work with the new Form features in React 19.
+
+You can pass a Server Function to a Form to automatically submit the form to the server:
+
+
+```js [[1, 3, "updateName"], [1, 7, "updateName"]]
+"use client";
+
+import {updateName} from './actions';
+
+function UpdateName() {
+  return (
+    <form action={updateName}>
+      <input type="text" name="name" />
+    </form>
+  )
+}
+```
+
+When the Form submission succeeds, React will automatically reset the form. You can add `useActionState` to access the pending state, last response, or to support progressive enhancement.
+
+For more, see the docs for [Server Functions in Forms](/reference/rsc/use-server#server-functions-in-forms).
+
+### Server Functions with `useActionState` {/*server-functions-with-use-action-state*/}
+
+You can call Server Functions with `useActionState` for the common case where you just need access to the action pending state and last returned response:
+
+```js [[1, 3, "updateName"], [1, 6, "updateName"], [2, 6, "submitAction"], [2, 9, "submitAction"]]
+"use client";
+
+import {updateName} from './actions';
+
+function UpdateName() {
+  const [state, submitAction, isPending] = useActionState(updateName, {error: null});
+
+  return (
+    <form action={submitAction}>
+      <input type="text" name="name" disabled={isPending}/>
+      {state.error && <span>Failed: {state.error}</span>}
+    </form>
+  );
+}
+```
+
+When using `useActionState` with Server Functions, React will also automatically replay form submissions entered before hydration finishes. This means users can interact with your app even before the app has hydrated.
+
+For more, see the docs for [`useActionState`](/reference/react-dom/hooks/useFormState).
+
+### Progressive enhancement with `useActionState` {/*progressive-enhancement-with-useactionstate*/}
+
+Server Functions also support progressive enhancement with the third argument of `useActionState`.
+
+```js [[1, 3, "updateName"], [1, 6, "updateName"], [2, 6, "/name/update"], [3, 6, "submitAction"], [3, 9, "submitAction"]]
+"use client";
+
+import {updateName} from './actions';
+
+function UpdateName() {
+  const [, submitAction] = useActionState(updateName, null, `/name/update`);
+
+  return (
+    <form action={submitAction}>
+      ...
+    </form>
+  );
+}
+```
+
+When the <CodeStep step={2}>permalink</CodeStep> is provided to `useActionState`, React will redirect to the provided URL if the form is submitted before the JavaScript bundle loads.
+
+For more, see the docs for [`useActionState`](/reference/react-dom/hooks/useFormState).
diff --git a/src/content/reference/rsc/use-client.md b/src/content/reference/rsc/use-client.md
new file mode 100644
index 000000000..fe6f5b1ed
--- /dev/null
+++ b/src/content/reference/rsc/use-client.md
@@ -0,0 +1,379 @@
+---
+title: "'use client'"
+titleForTitleTag: "'use client' directive"
+---
+
+<RSC>
+
+`'use client'` is for use with [React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks).
+
+</RSC>
+
+
+<Intro>
+
+`'use client'` lets you mark what code runs on the client.
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `'use client'` {/*use-client*/}
+
+Add `'use client'` at the top of a file to mark the module and its transitive dependencies as client code.
+
+```js {1}
+'use client';
+
+import { useState } from 'react';
+import { formatDate } from './formatters';
+import Button from './button';
+
+export default function RichTextEditor({ timestamp, text }) {
+  const date = formatDate(timestamp);
+  // ...
+  const editButton = <Button />;
+  // ...
+}
+```
+
+When a file marked with `'use client'` is imported from a Server Component, [compatible bundlers](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) will treat the module import as a boundary between server-run and client-run code.
+
+As dependencies of `RichTextEditor`, `formatDate` and `Button` will also be evaluated on the client regardless of whether their modules contain a `'use client'` directive. Note that a single module may be evaluated on the server when imported from server code and on the client when imported from client code.
+
+#### Caveats {/*caveats*/}
+
+* `'use client'` must be at the very beginning of a file, above any imports or other code (comments are OK). They must be written with single or double quotes, but not backticks.
+* When a `'use client'` module is imported from another client-rendered module, the directive has no effect.
+* When a component module contains a `'use client'` directive, any usage of that component is guaranteed to be a Client Component. However, a component can still be evaluated on the client even if it does not have a `'use client'` directive.
+	* A component usage is considered a Client Component if it is defined in module with `'use client'` directive or when it is a transitive dependency of a module that contains a `'use client'` directive. Otherwise, it is a Server Component.
+* Code that is marked for client evaluation is not limited to components. All code that is a part of the Client module sub-tree is sent to and run by the client.
+* When a server evaluated module imports values from a `'use client'` module, the values must either be a React component or [supported serializable prop values](#passing-props-from-server-to-client-components) to be passed to a Client Component. Any other use case will throw an exception.
+
+### How `'use client'` marks client code {/*how-use-client-marks-client-code*/}
+
+In a React app, components are often split into separate files, or [modules](/learn/importing-and-exporting-components#exporting-and-importing-a-component).
+
+For apps that use React Server Components, the app is server-rendered by default. `'use client'` introduces a server-client boundary in the [module dependency tree](/learn/understanding-your-ui-as-a-tree#the-module-dependency-tree), effectively creating a subtree of Client modules.
+
+To better illustrate this, consider the following React Server Components app.
+
+<Sandpack>
+
+```js src/App.js
+import FancyText from './FancyText';
+import InspirationGenerator from './InspirationGenerator';
+import Copyright from './Copyright';
+
+export default function App() {
+  return (
+    <>
+      <FancyText title text="Get Inspired App" />
+      <InspirationGenerator>
+        <Copyright year={2004} />
+      </InspirationGenerator>
+    </>
+  );
+}
+
+```
+
+```js src/FancyText.js
+export default function FancyText({title, text}) {
+  return title
+    ? <h1 className='fancy title'>{text}</h1>
+    : <h3 className='fancy cursive'>{text}</h3>
+}
+```
+
+```js src/InspirationGenerator.js
+'use client';
+
+import { useState } from 'react';
+import inspirations from './inspirations';
+import FancyText from './FancyText';
+
+export default function InspirationGenerator({children}) {
+  const [index, setIndex] = useState(0);
+  const quote = inspirations[index];
+  const next = () => setIndex((index + 1) % inspirations.length);
+
+  return (
+    <>
+      <p>Your inspirational quote is:</p>
+      <FancyText text={quote} />
+      <button onClick={next}>Inspire me again</button>
+      {children}
+    </>
+  );
+}
+```
+
+```js src/Copyright.js
+export default function Copyright({year}) {
+  return <p className='small'>©️ {year}</p>;
+}
+```
+
+```js src/inspirations.js
+export default [
+  "Don’t let yesterday take up too much of today.” — Will Rogers",
+  "Ambition is putting a ladder against the sky.",
+  "A joy that's shared is a joy made double.",
+];
+```
+
+```css
+.fancy {
+  font-family: 'Georgia';
+}
+.title {
+  color: #007AA3;
+  text-decoration: underline;
+}
+.cursive {
+  font-style: italic;
+}
+.small {
+  font-size: 10px;
+}
+```
+
+</Sandpack>
+
+In the module dependency tree of this example app, the `'use client'` directive in `InspirationGenerator.js` marks that module and all of its transitive dependencies as Client modules. The subtree starting at `InspirationGenerator.js` is now marked as Client modules.
+
+<Diagram name="use_client_module_dependency" height={250} width={545} alt="A tree graph with the top node representing the module 'App.js'. 'App.js' has three children: 'Copyright.js', 'FancyText.js', and 'InspirationGenerator.js'. 'InspirationGenerator.js' has two children: 'FancyText.js' and 'inspirations.js'. The nodes under and including 'InspirationGenerator.js' have a yellow background color to signify that this sub-graph is client-rendered due to the 'use client' directive in 'InspirationGenerator.js'.">
+`'use client'` segments the module dependency tree of the React Server Components app, marking `InspirationGenerator.js` and all of its dependencies as client-rendered.
+</Diagram>
+
+During render, the framework will server-render the root component and continue through the [render tree](/learn/understanding-your-ui-as-a-tree#the-render-tree), opting-out of evaluating any code imported from client-marked code.
+
+The server-rendered portion of the render tree is then sent to the client. The client, with its client code downloaded, then completes rendering the rest of the tree.
+
+<Diagram name="use_client_render_tree" height={250} width={500} alt="A tree graph where each node represents a component and its children as child components. The top-level node is labelled 'App' and it has two child components 'InspirationGenerator' and 'FancyText'. 'InspirationGenerator' has two child components, 'FancyText' and 'Copyright'. Both 'InspirationGenerator' and its child component 'FancyText' are marked to be client-rendered.">
+The render tree for the React Server Components app. `InspirationGenerator` and its child component `FancyText` are components exported from client-marked code and considered Client Components.
+</Diagram>
+
+We introduce the following definitions:
+
+* **Client Components** are components in a render tree that are rendered on the client.
+* **Server Components** are components in a render tree that are rendered on the server.
+
+Working through the example app, `App`, `FancyText` and `Copyright` are all server-rendered and considered Server Components. As `InspirationGenerator.js` and its transitive dependencies are marked as client code, the component `InspirationGenerator` and its child component `FancyText` are Client Components.
+
+<DeepDive>
+#### How is `FancyText` both a Server and a Client Component? {/*how-is-fancytext-both-a-server-and-a-client-component*/}
+
+By the above definitions, the component `FancyText` is both a Server and Client Component, how can that be?
+
+First, let's clarify that the term "component" is not very precise. Here are just two ways "component" can be understood:
+
+1. A "component" can refer to a **component definition**. In most cases this will be a function.
+
+```js
+// This is a definition of a component
+function MyComponent() {
+  return <p>My Component</p>
+}
+```
+
+2. A "component" can also refer to a **component usage** of its definition.
+```js
+import MyComponent from './MyComponent';
+
+function App() {
+  // This is a usage of a component
+  return <MyComponent />;
+}
+```
+
+Often, the imprecision is not important when explaining concepts, but in this case it is.
+
+When we talk about Server or Client Components, we are referring to component usages.
+
+* If the component is defined in a module with a `'use client'` directive, or the component is imported and called in a Client Component, then the component usage is a Client Component.
+* Otherwise, the component usage is a Server Component.
+
+
+<Diagram name="use_client_render_tree" height={150} width={450} alt="A tree graph where each node represents a component and its children as child components. The top-level node is labelled 'App' and it has two child components 'InspirationGenerator' and 'FancyText'. 'InspirationGenerator' has two child components, 'FancyText' and 'Copyright'. Both 'InspirationGenerator' and its child component 'FancyText' are marked to be client-rendered.">A render tree illustrates component usages.</Diagram>
+
+Back to the question of `FancyText`, we see that the component definition does _not_ have a `'use client'` directive and it has two usages.
+
+The usage of `FancyText` as a child of `App`, marks that usage as a Server Component. When `FancyText` is imported and called under `InspirationGenerator`, that usage of `FancyText` is a Client Component as `InspirationGenerator` contains a `'use client'` directive.
+
+This means that the component definition for `FancyText` will both be evaluated on the server and also downloaded by the client to render its Client Component usage.
+
+</DeepDive>
+
+<DeepDive>
+
+#### Why is `Copyright` a Server Component? {/*why-is-copyright-a-server-component*/}
+
+Because `Copyright` is rendered as a child of the Client Component `InspirationGenerator`, you might be surprised that it is a Server Component.
+
+Recall that `'use client'` defines the boundary between server and client code on the _module dependency tree_, not the render tree.
+
+<Diagram name="use_client_module_dependency" height={200} width={500} alt="A tree graph with the top node representing the module 'App.js'. 'App.js' has three children: 'Copyright.js', 'FancyText.js', and 'InspirationGenerator.js'. 'InspirationGenerator.js' has two children: 'FancyText.js' and 'inspirations.js'. The nodes under and including 'InspirationGenerator.js' have a yellow background color to signify that this sub-graph is client-rendered due to the 'use client' directive in 'InspirationGenerator.js'.">
+`'use client'` defines the boundary between server and client code on the module dependency tree.
+</Diagram>
+
+In the module dependency tree, we see that `App.js` imports and calls `Copyright` from the `Copyright.js` module. As `Copyright.js` does not contain a `'use client'` directive, the component usage is rendered on the server. `App` is rendered on the server as it is the root component.
+
+Client Components can render Server Components because you can pass JSX as props. In this case, `InspirationGenerator` receives `Copyright` as [children](/learn/passing-props-to-a-component#passing-jsx-as-children). However, the `InspirationGenerator` module never directly imports the `Copyright` module nor calls the component, all of that is done by `App`. In fact, the `Copyright` component is fully executed before `InspirationGenerator` starts rendering.
+
+The takeaway is that a parent-child render relationship between components does not guarantee the same render environment.
+
+</DeepDive>
+
+### When to use `'use client'` {/*when-to-use-use-client*/}
+
+With `'use client'`, you can determine when components are Client Components. As Server Components are default, here is a brief overview of the advantages and limitations to Server Components to determine when you need to mark something as client rendered.
+
+For simplicity, we talk about Server Components, but the same principles apply to all code in your app that is server run.
+
+#### Advantages of Server Components {/*advantages*/}
+* Server Components can reduce the amount of code sent and run by the client. Only Client modules are bundled and evaluated by the client.
+* Server Components benefit from running on the server. They can access the local filesystem and may experience low latency for data fetches and network requests.
+
+#### Limitations of Server Components {/*limitations*/}
+* Server Components cannot support interaction as event handlers must be registered and triggered by a client.
+	* For example, event handlers like `onClick` can only be defined in Client Components.
+* Server Components cannot use most Hooks.
+	* When Server Components are rendered, their output is essentially a list of components for the client to render. Server Components do not persist in memory after render and cannot have their own state.
+
+### Serializable types returned by Server Components {/*serializable-types*/}
+
+As in any React app, parent components pass data to child components. As they are rendered in different environments, passing data from a Server Component to a Client Component requires extra consideration.
+
+Prop values passed from a Server Component to Client Component must be serializable.
+
+Serializable props include:
+* Primitives
+	* [string](https://developer.mozilla.org/en-US/docs/Glossary/String)
+	* [number](https://developer.mozilla.org/en-US/docs/Glossary/Number)
+	* [bigint](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt)
+	* [boolean](https://developer.mozilla.org/en-US/docs/Glossary/Boolean)
+	* [undefined](https://developer.mozilla.org/en-US/docs/Glossary/Undefined)
+	* [null](https://developer.mozilla.org/en-US/docs/Glossary/Null)
+	* [symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol), only symbols registered in the global Symbol registry via [`Symbol.for`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/for)
+* Iterables containing serializable values
+	* [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)
+	* [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
+	* [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
+	* [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)
+	* [TypedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) and [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)
+* [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)
+* Plain [objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object): those created with [object initializers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer), with serializable properties
+* Functions that are [Server Functions](/reference/rsc/server-functions)
+* Client or Server Component elements (JSX)
+* [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
+
+Notably, these are not supported:
+* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function) that are not exported from client-marked modules or marked with [`'use server'`](/reference/rsc/use-server)
+* [Classes](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Classes_in_JavaScript)
+* Objects that are instances of any class (other than the built-ins mentioned) or objects with [a null prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects)
+* Symbols not registered globally, ex. `Symbol('my new symbol')`
+
+
+## Usage {/*usage*/}
+
+### Building with interactivity and state {/*building-with-interactivity-and-state*/}
+
+<Sandpack>
+
+```js src/App.js
+'use client';
+
+import { useState } from 'react';
+
+export default function Counter({initialValue = 0}) {
+  const [countValue, setCountValue] = useState(initialValue);
+  const increment = () => setCountValue(countValue + 1);
+  const decrement = () => setCountValue(countValue - 1);
+  return (
+    <>
+      <h2>Count Value: {countValue}</h2>
+      <button onClick={increment}>+1</button>
+      <button onClick={decrement}>-1</button>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+As `Counter` requires both the `useState` Hook and event handlers to increment or decrement the value, this component must be a Client Component and will require a `'use client'` directive at the top.
+
+In contrast, a component that renders UI without interaction will not need to be a Client Component.
+
+```js
+import { readFile } from 'node:fs/promises';
+import Counter from './Counter';
+
+export default async function CounterContainer() {
+  const initialValue = await readFile('/path/to/counter_value');
+  return <Counter initialValue={initialValue} />
+}
+```
+
+For example, `Counter`'s parent component, `CounterContainer`, does not require `'use client'` as it is not interactive and does not use state. In addition, `CounterContainer` must be a Server Component as it reads from the local file system on the server, which is possible only in a Server Component.
+
+There are also components that don't use any server or client-only features and can be agnostic to where they render. In our earlier example, `FancyText` is one such component.
+
+```js
+export default function FancyText({title, text}) {
+  return title
+    ? <h1 className='fancy title'>{text}</h1>
+    : <h3 className='fancy cursive'>{text}</h3>
+}
+```
+
+In this case, we don't add the `'use client'` directive, resulting in `FancyText`'s _output_ (rather than its source code) to be sent to the browser when referenced from a Server Component. As demonstrated in the earlier Inspirations app example, `FancyText` is used as both a Server or Client Component, depending on where it is imported and used.
+
+But if `FancyText`'s HTML output was large relative to its source code (including dependencies), it might be more efficient to force it to always be a Client Component. Components that return a long SVG path string are one case where it may be more efficient to force a component to be a Client Component.
+
+### Using client APIs {/*using-client-apis*/}
+
+Your React app may use client-specific APIs, such as the browser's APIs for web storage, audio and video manipulation, and device hardware, among [others](https://developer.mozilla.org/en-US/docs/Web/API).
+
+In this example, the component uses [DOM APIs](https://developer.mozilla.org/en-US/docs/Glossary/DOM) to manipulate a [`canvas`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) element. Since those APIs are only available in the browser, it must be marked as a Client Component.
+
+```js
+'use client';
+
+import {useRef, useEffect} from 'react';
+
+export default function Circle() {
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    const canvas = ref.current;
+    const context = canvas.getContext('2d');
+    context.reset();
+    context.beginPath();
+    context.arc(100, 75, 50, 0, 2 * Math.PI);
+    context.stroke();
+  });
+  return <canvas ref={ref} />;
+}
+```
+
+### Using third-party libraries {/*using-third-party-libraries*/}
+
+Often in a React app, you'll leverage third-party libraries to handle common UI patterns or logic.
+
+These libraries may rely on component Hooks or client APIs. Third-party components that use any of the following React APIs must run on the client:
+* [createContext](/reference/react/createContext)
+* [`react`](/reference/react/hooks) and [`react-dom`](/reference/react-dom/hooks) Hooks, excluding [`use`](/reference/react/use) and [`useId`](/reference/react/useId)
+* [forwardRef](/reference/react/forwardRef)
+* [memo](/reference/react/memo)
+* [startTransition](/reference/react/startTransition)
+* If they use client APIs, ex. DOM insertion or native platform views
+
+If these libraries have been updated to be compatible with React Server Components, then they will already include `'use client'` markers of their own, allowing you to use them directly from your Server Components. If a library hasn't been updated, or if a component needs props like event handlers that can only be specified on the client, you may need to add your own Client Component file in between the third-party Client Component and your Server Component where you'd like to use it.
+
+[TODO]: <> (Troubleshooting - need use-cases)
diff --git a/src/content/reference/rsc/use-server.md b/src/content/reference/rsc/use-server.md
new file mode 100644
index 000000000..ed09ee421
--- /dev/null
+++ b/src/content/reference/rsc/use-server.md
@@ -0,0 +1,217 @@
+---
+title: "'use server'"
+titleForTitleTag: "'use server' directive"
+---
+
+<RSC>
+
+`'use server'` is for use with [using React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks).
+
+</RSC>
+
+
+<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 top of an async function body to mark the function as callable by the client. We call these functions [_Server Functions_]((/reference/rsc/server-functions)).
+
+```js {2}
+async function addToCart(data) {
+  'use server';
+  // ...
+}
+```
+
+When calling a Server Function 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.
+
+Instead of individually marking functions with `'use server'`, you can add the directive to the top of a file to mark all exports within that file as Server Functions that can be used anywhere, including imported in client code.
+
+#### Caveats {/*caveats*/}
+* `'use server'` must be at the very beginning of their function or module; above any other code including imports (comments above directives are OK). They must be written with single or double quotes, not backticks.
+* `'use server'` can only be used in server-side files. The resulting Server Functions can be passed to Client Components through props. See supported [types for serialization](#serializable-parameters-and-return-values).
+* To import a Server Functions from [client code](/reference/rsc/use-client), the directive must be used on a module level.
+* Because the underlying network calls are always asynchronous, `'use server'` can only be used on async functions.
+* Always treat arguments to Server Functions as untrusted input and authorize any mutations. See [security considerations](#security).
+* Server Functions should be called in a [Transition](/reference/react/useTransition). Server Functions passed to [`<form action>`](/reference/react-dom/components/form#props) or [`formAction`](/reference/react-dom/components/input#props) will automatically be called in a transition.
+* Server Functions are designed for mutations that update server-side state; they are not recommended for data fetching. Accordingly, frameworks implementing Server Functions typically process one action at a time and do not have a way to cache the return value.
+
+### Security considerations {/*security*/}
+
+Arguments to Server Functions are fully client-controlled. For security, always treat them as untrusted input, and make sure to validate and escape arguments as appropriate.
+
+In any Server Function, make sure to validate that the logged-in user is allowed to perform that action.
+
+<Wip>
+
+To prevent sending sensitive data from a Server Function, there are experimental taint APIs to prevent unique values and objects from being passed to client code.
+
+See [experimental_taintUniqueValue](/reference/react/experimental_taintUniqueValue) and [experimental_taintObjectReference](/reference/react/experimental_taintObjectReference).
+
+</Wip>
+
+### Serializable arguments and return values {/*serializable-parameters-and-return-values*/}
+
+Since client code calls the Server Function over the network, any arguments passed will need to be serializable.
+
+Here are supported types for Server Function arguments:
+
+* Primitives
+	* [string](https://developer.mozilla.org/en-US/docs/Glossary/String)
+	* [number](https://developer.mozilla.org/en-US/docs/Glossary/Number)
+	* [bigint](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt)
+	* [boolean](https://developer.mozilla.org/en-US/docs/Glossary/Boolean)
+	* [undefined](https://developer.mozilla.org/en-US/docs/Glossary/Undefined)
+	* [null](https://developer.mozilla.org/en-US/docs/Glossary/Null)
+	* [symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol), only symbols registered in the global Symbol registry via [`Symbol.for`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/for)
+* Iterables containing serializable values
+	* [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)
+	* [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
+	* [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
+	* [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)
+	* [TypedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) and [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)
+* [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)
+* [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) instances
+* Plain [objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object): those created with [object initializers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer), with serializable properties
+* Functions that are Server Functions
+* [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
+
+Notably, these are not supported:
+* React elements, or [JSX](/learn/writing-markup-with-jsx)
+* Functions, including component functions or any other function that is not a Server Function
+* [Classes](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Classes_in_JavaScript)
+* Objects that are instances of any class (other than the built-ins mentioned) or objects with [a null prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects)
+* Symbols not registered globally, ex. `Symbol('my new symbol')`
+* Events from event handlers
+
+
+Supported serializable return values are the same as [serializable props](/reference/rsc/use-client#passing-props-from-server-to-client-components) for a boundary Client Component.
+
+
+## Usage {/*usage*/}
+
+### Server Functions in forms {/*server-functions-in-forms*/}
+
+The most common use case of Server Functions will be calling functions that mutate data. On the browser, the [HTML form element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) is the traditional approach for a user to submit a mutation. With React Server Components, React introduces first-class support for Server Functions as Actions in [forms](/reference/react-dom/components/form).
+
+Here is a form that allows a user to request a username.
+
+```js [[1, 3, "formData"]]
+// App.js
+
+async function requestUsername(formData) {
+  'use server';
+  const username = formData.get('username');
+  // ...
+}
+
+export default function App() {
+  return (
+    <form action={requestUsername}>
+      <input type="text" name="username" />
+      <button type="submit">Request</button>
+    </form>
+  );
+}
+```
+
+In this example `requestUsername` is a Server Function passed to a `<form>`. When a user submits this form, there is a network request to the server function `requestUsername`. When calling a Server Function in a form, React will supply the form's <CodeStep step={1}>[FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData)</CodeStep> as the first argument to the Server Function.
+
+By passing a Server Function to the form `action`, React can [progressively enhance](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement) the form. This means that forms can be submitted before the JavaScript bundle is loaded.
+
+#### Handling return values in forms {/*handling-return-values*/}
+
+In the username request form, there might be the chance that a username is not available. `requestUsername` should tell us if it fails or not.
+
+To update the UI based on the result of a Server Function while supporting progressive enhancement, use [`useActionState`](/reference/react/useActionState).
+
+```js
+// requestUsername.js
+'use server';
+
+export default async function requestUsername(formData) {
+  const username = formData.get('username');
+  if (canRequest(username)) {
+    // ...
+    return 'successful';
+  }
+  return 'failed';
+}
+```
+
+```js {4,8}, [[2, 2, "'use client'"]]
+// UsernameForm.js
+'use client';
+
+import { useActionState } from 'react';
+import requestUsername from './requestUsername';
+
+function UsernameForm() {
+  const [state, action] = useActionState(requestUsername, null, 'n/a');
+
+  return (
+    <>
+      <form action={action}>
+        <input type="text" name="username" />
+        <button type="submit">Request</button>
+      </form>
+      <p>Last submission request returned: {state}</p>
+    </>
+  );
+}
+```
+
+Note that like most Hooks, `useActionState` can only be called in <CodeStep step={1}>[client code](/reference/rsc/use-client)</CodeStep>.
+
+### Calling a Server Function outside of `<form>` {/*calling-a-server-function-outside-of-form*/}
+
+Server Functions are exposed server endpoints and can be called anywhere in client code.
+
+When using a Server Function outside a [form](/reference/react-dom/components/form), call the Server Function in a [Transition](/reference/react/useTransition), which allows you to display a loading indicator, show [optimistic state updates](/reference/react/useOptimistic), and handle unexpected errors. Forms will automatically wrap Server Functions in transitions.
+
+```js {9-12}
+import incrementLike from './actions';
+import { useState, useTransition } from 'react';
+
+function LikeButton() {
+  const [isPending, startTransition] = useTransition();
+  const [likeCount, setLikeCount] = useState(0);
+
+  const onClick = () => {
+    startTransition(async () => {
+      const currentCount = await incrementLike();
+      setLikeCount(currentCount);
+    });
+  };
+
+  return (
+    <>
+      <p>Total Likes: {likeCount}</p>
+      <button onClick={onClick} disabled={isPending}>Like</button>;
+    </>
+  );
+}
+```
+
+```js
+// actions.js
+'use server';
+
+let likeCount = 0;
+export default async function incrementLike() {
+  likeCount++;
+  return likeCount;
+}
+```
+
+To read a Server Function return value, you'll need to `await` the promise returned.
diff --git a/src/content/reference/rules/components-and-hooks-must-be-pure.md b/src/content/reference/rules/components-and-hooks-must-be-pure.md
new file mode 100644
index 000000000..d3d54560e
--- /dev/null
+++ b/src/content/reference/rules/components-and-hooks-must-be-pure.md
@@ -0,0 +1,364 @@
+---
+title: Components and Hooks must be pure
+---
+
+<Intro>
+Pure functions only perform a calculation and nothing more. It makes your code easier to understand, debug, and allows React to automatically optimize your components and Hooks correctly.
+</Intro>
+
+<Note>
+This reference page covers advanced topics and requires familiarity with the concepts covered in the [Keeping Components Pure](/learn/keeping-components-pure) page.
+</Note>
+
+<InlineToc />
+
+### Why does purity matter? {/*why-does-purity-matter*/}
+
+One of the key concepts that makes React, _React_ is _purity_. A pure component or hook is one that is:
+
+* **Idempotent** – You [always get the same result every time](/learn/keeping-components-pure#purity-components-as-formulas) you run it with the same inputs – props, state, context for component inputs; and arguments for hook inputs.
+* **Has no side effects in render** – Code with side effects should run [**separately from rendering**](#how-does-react-run-your-code). For example as an [event handler](/learn/responding-to-events) – where the user interacts with the UI and causes it to update; or as an [Effect](/reference/react/useEffect) – which runs after render.
+* **Does not mutate non-local values**: Components and Hooks should [never modify values that aren't created locally](#mutation) in render.
+
+When render is kept pure, React can understand how to prioritize which updates are most important for the user to see first. This is made possible because of render purity: since components don't have side effects [in render](#how-does-react-run-your-code), React can pause rendering components that aren't as important to update, and only come back to them later when it's needed.
+
+Concretely, this means that rendering logic can be run multiple times in a way that allows React to give your user a pleasant user experience. However, if your component has an untracked side effect – like modifying the value of a global variable [during render](#how-does-react-run-your-code) – when React runs your rendering code again, your side effects will be triggered in a way that won't match what you want. This often leads to unexpected bugs that can degrade how your users experience your app. You can see an [example of this in the Keeping Components Pure page](/learn/keeping-components-pure#side-effects-unintended-consequences).
+
+#### How does React run your code? {/*how-does-react-run-your-code*/}
+
+React is declarative: you tell React _what_ to render, and React will figure out _how_ best to display it to your user. To do this, React has a few phases where it runs your code. You don't need to know about all of these phases to use React well. But at a high level, you should know about what code runs in _render_, and what runs outside of it.
+
+_Rendering_ refers to calculating what the next version of your UI should look like. After rendering, [Effects](/reference/react/useEffect) are _flushed_ (meaning they are run until there are no more left) and may update the calculation if the Effects have impacts on layout. React takes this new calculation and compares it to the calculation used to create the previous version of your UI, then _commits_ just the minimum changes needed to the [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) (what your user actually sees) to catch it up to the latest version.
+
+<DeepDive>
+
+#### How to tell if code runs in render {/*how-to-tell-if-code-runs-in-render*/}
+
+One quick heuristic to tell if code runs during render is to examine where it is: if it's written at the top level like in the example below, there's a good chance it runs during render.
+
+```js {2}
+function Dropdown() {
+  const selectedItems = new Set(); // created during render
+  // ...
+}
+```
+
+Event handlers and Effects don't run in render:
+
+```js {4}
+function Dropdown() {
+  const selectedItems = new Set();
+  const onSelect = (item) => {
+    // this code is in an event handler, so it's only run when the user triggers this
+    selectedItems.add(item);
+  }
+}
+```
+
+```js {4}
+function Dropdown() {
+  const selectedItems = new Set();
+  useEffect(() => {
+    // this code is inside of an Effect, so it only runs after rendering
+    logForAnalytics(selectedItems);
+  }, [selectedItems]);
+}
+```
+</DeepDive>
+
+---
+
+## Components and Hooks must be idempotent {/*components-and-hooks-must-be-idempotent*/}
+
+Components must always return the same output with respect to their inputs – props, state, and context. This is known as _idempotency_. [Idempotency](https://en.wikipedia.org/wiki/Idempotence) is a term popularized in functional programming. It refers to the idea that you [always get the same result every time](learn/keeping-components-pure) you run that piece of code with the same inputs.
+
+This means that _all_ code that runs [during render](#how-does-react-run-your-code) must also be idempotent in order for this rule to hold. For example, this line of code is not idempotent (and therefore, neither is the component):
+
+```js {2}
+function Clock() {
+  const time = new Date(); // 🔴 Bad: always returns a different result!
+  return <span>{time.toLocaleString()}</span>
+}
+```
+
+`new Date()` is not idempotent as it always returns the current date and changes its result every time it's called. When you render the above component, the time displayed on the screen will stay stuck on the time that the component was rendered. Similarly, functions like `Math.random()` also aren't idempotent, because they return different results every time they're called, even when the inputs are the same.
+
+This doesn't mean you shouldn't use non-idempotent functions like `new Date()` _at all_ – you should just avoid using them [during render](#how-does-react-run-your-code). In this case, we can _synchronize_ the latest date to this component using an [Effect](/reference/react/useEffect):
+
+<Sandpack>
+
+```js
+import { useState, useEffect } from 'react';
+
+function useTime() {
+  // 1. Keep track of the current date's state. `useState` receives an initializer function as its
+  //    initial state. It only runs once when the hook is called, so only the current date at the
+  //    time the hook is called is set first.
+  const [time, setTime] = useState(() => new Date());
+
+  useEffect(() => {
+    // 2. Update the current date every second using `setInterval`.
+    const id = setInterval(() => {
+      setTime(new Date()); // ✅ Good: non-idempotent code no longer runs in render
+    }, 1000);
+    // 3. Return a cleanup function so we don't leak the `setInterval` timer.
+    return () => clearInterval(id);
+  }, []);
+
+  return time;
+}
+
+export default function Clock() {
+  const time = useTime();
+  return <span>{time.toLocaleString()}</span>;
+}
+```
+
+</Sandpack>
+
+By wrapping the non-idempotent `new Date()` call in an Effect, it moves that calculation [outside of rendering](#how-does-react-run-your-code).
+
+If you don't need to synchronize some external state with React, you can also consider using an [event handler](/learn/responding-to-events) if it only needs to be updated in response to a user interaction.
+
+---
+
+## Side effects must run outside of render {/*side-effects-must-run-outside-of-render*/}
+
+[Side effects](/learn/keeping-components-pure#side-effects-unintended-consequences) should not run [in render](#how-does-react-run-your-code), as React can render components multiple times to create the best possible user experience.
+
+<Note>
+Side effects are a broader term than Effects. Effects specifically refer to code that's wrapped in `useEffect`, while a side effect is a general term for code that has any observable effect other than its primary result of returning a value to the caller.
+
+Side effects are typically written inside of [event handlers](/learn/responding-to-events) or Effects. But never during render.
+</Note>
+
+While render must be kept pure, side effects are necessary at some point in order for your app to do anything interesting, like showing something on the screen! The key point of this rule is that side effects should not run [in render](#how-does-react-run-your-code), as React can render components multiple times. In most cases, you'll use [event handlers](learn/responding-to-events) to handle side effects. Using an event handler explicitly tells React that this code doesn't need to run during render, keeping render pure. If you've exhausted all options – and only as a last resort – you can also handle side effects using `useEffect`.
+
+### When is it okay to have mutation? {/*mutation*/}
+
+#### Local mutation {/*local-mutation*/}
+One common example of a side effect is mutation, which in JavaScript refers to changing the value of a non-[primitive](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) value. In general, while mutation is not idiomatic in React, _local_ mutation is absolutely fine:
+
+```js {2,7}
+function FriendList({ friends }) {
+  const items = []; // ✅ Good: locally created
+  for (let i = 0; i < friends.length; i++) {
+    const friend = friends[i];
+    items.push(
+      <Friend key={friend.id} friend={friend} />
+    ); // ✅ Good: local mutation is okay
+  }
+  return <section>{items}</section>;
+}
+```
+
+There is no need to contort your code to avoid local mutation. [`Array.map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) could also be used here for brevity, but there is nothing wrong with creating a local array and then pushing items into it [during render](#how-does-react-run-your-code).
+
+Even though it looks like we are mutating `items`, the key point to note is that this code only does so _locally_ – the mutation isn't "remembered" when the component is rendered again. In other words, `items` only stays around as long as the component does. Because `items` is always _recreated_ every time `<FriendList />` is rendered, the component will always return the same result.
+
+On the other hand, if `items` was created outside of the component, it holds on to its previous values and remembers changes:
+
+```js {1,7}
+const items = []; // 🔴 Bad: created outside of the component
+function FriendList({ friends }) {
+  for (let i = 0; i < friends.length; i++) {
+    const friend = friends[i];
+    items.push(
+      <Friend key={friend.id} friend={friend} />
+    ); // 🔴 Bad: mutates a value created outside of render
+  }
+  return <section>{items}</section>;
+}
+```
+
+When `<FriendList />` runs again, we will continue appending `friends` to `items` every time that component is run, leading to multiple duplicated results. This version of `<FriendList />` has observable side effects [during render](#how-does-react-run-your-code) and **breaks the rule**.
+
+#### Lazy initialization {/*lazy-initialization*/}
+
+Lazy initialization is also fine despite not being fully "pure":
+
+```js {2}
+function ExpenseForm() {
+  SuperCalculator.initializeIfNotReady(); // ✅ Good: if it doesn't affect other components
+  // Continue rendering...
+}
+```
+
+#### Changing the DOM {/*changing-the-dom*/}
+
+Side effects that are directly visible to the user are not allowed in the render logic of React components. In other words, merely calling a component function shouldn’t by itself produce a change on the screen.
+
+```js {2}
+function ProductDetailPage({ product }) {
+  document.title = product.title; // 🔴 Bad: Changes the DOM
+}
+```
+
+One way to achieve the desired result of updating `document.title` outside of render is to [synchronize the component with `document`](/learn/synchronizing-with-effects).
+
+As long as calling a component multiple times is safe and doesn’t affect the rendering of other components, React doesn’t care if it’s 100% pure in the strict functional programming sense of the word. It is more important that [components must be idempotent](/reference/rules/components-and-hooks-must-be-pure).
+
+---
+
+## Props and state are immutable {/*props-and-state-are-immutable*/}
+
+A component's props and state are immutable [snapshots](learn/state-as-a-snapshot). Never mutate them directly. Instead, pass new props down, and use the setter function from `useState`.
+
+You can think of the props and state values as snapshots that are updated after rendering. For this reason, you don't modify the props or state variables directly: instead you pass new props, or use the setter function provided to you to tell React that state needs to update the next time the component is rendered.
+
+### Don't mutate Props {/*props*/}
+Props are immutable because if you mutate them, the application will produce inconsistent output, which can be hard to debug since it may or may not work depending on the circumstance.
+
+```js {2}
+function Post({ item }) {
+  item.url = new Url(item.url, base); // 🔴 Bad: never mutate props directly
+  return <Link url={item.url}>{item.title}</Link>;
+}
+```
+
+```js {2}
+function Post({ item }) {
+  const url = new Url(item.url, base); // ✅ Good: make a copy instead
+  return <Link url={url}>{item.title}</Link>;
+}
+```
+
+### Don't mutate State {/*state*/}
+`useState` returns the state variable and a setter to update that state.
+
+```js
+const [stateVariable, setter] = useState(0);
+```
+
+Rather than updating the state variable in-place, we need to update it using the setter function that is returned by `useState`. Changing values on the state variable doesn't cause the component to update, leaving your users with an outdated UI. Using the setter function informs React that the state has changed, and that we need to queue a re-render to update the UI.
+
+```js {5}
+function Counter() {
+  const [count, setCount] = useState(0);
+
+  function handleClick() {
+    count = count + 1; // 🔴 Bad: never mutate state directly
+  }
+
+  return (
+    <button onClick={handleClick}>
+      You pressed me {count} times
+    </button>
+  );
+}
+```
+
+```js {5}
+function Counter() {
+  const [count, setCount] = useState(0);
+
+  function handleClick() {
+    setCount(count + 1); // ✅ Good: use the setter function returned by useState
+  }
+
+  return (
+    <button onClick={handleClick}>
+      You pressed me {count} times
+    </button>
+  );
+}
+```
+
+---
+
+## Return values and arguments to Hooks are immutable {/*return-values-and-arguments-to-hooks-are-immutable*/}
+
+Once values are passed to a hook, you should not modify them. Like props in JSX, values become immutable when passed to a hook.
+
+```js {4}
+function useIconStyle(icon) {
+  const theme = useContext(ThemeContext);
+  if (icon.enabled) {
+    icon.className = computeStyle(icon, theme); // 🔴 Bad: never mutate hook arguments directly
+  }
+  return icon;
+}
+```
+
+```js {3}
+function useIconStyle(icon) {
+  const theme = useContext(ThemeContext);
+  const newIcon = { ...icon }; // ✅ Good: make a copy instead
+  if (icon.enabled) {
+    newIcon.className = computeStyle(icon, theme);
+  }
+  return newIcon;
+}
+```
+
+One important principle in React is _local reasoning_: the ability to understand what a component or hook does by looking at its code in isolation. Hooks should be treated like "black boxes" when they are called. For example, a custom hook might have used its arguments as dependencies to memoize values inside it:
+
+```js {4}
+function useIconStyle(icon) {
+  const theme = useContext(ThemeContext);
+
+  return useMemo(() => {
+    const newIcon = { ...icon };
+    if (icon.enabled) {
+      newIcon.className = computeStyle(icon, theme);
+    }
+    return newIcon;
+  }, [icon, theme]);
+}
+```
+
+If you were to mutate the Hooks arguments, the custom hook's memoization will become incorrect,  so it's important to avoid doing that.
+
+```js {4}
+style = useIconStyle(icon);         // `style` is memoized based on `icon`
+icon.enabled = false;               // Bad: 🔴 never mutate hook arguments directly
+style = useIconStyle(icon);         // previously memoized result is returned
+```
+
+```js {4}
+style = useIconStyle(icon);         // `style` is memoized based on `icon`
+icon = { ...icon, enabled: false }; // Good: ✅ make a copy instead
+style = useIconStyle(icon);         // new value of `style` is calculated
+```
+
+Similarly, it's important to not modify the return values of Hooks, as they may have been memoized.
+
+---
+
+## Values are immutable after being passed to JSX {/*values-are-immutable-after-being-passed-to-jsx*/}
+
+Don't mutate values after they've been used in JSX. Move the mutation before the JSX is created.
+
+When you use JSX in an expression, React may eagerly evaluate the JSX before the component finishes rendering. This means that mutating values after they've been passed to JSX can lead to outdated UIs, as React won't know to update the component's output.
+
+```js {4}
+function Page({ colour }) {
+  const styles = { colour, size: "large" };
+  const header = <Header styles={styles} />;
+  styles.size = "small"; // 🔴 Bad: styles was already used in the JSX above
+  const footer = <Footer styles={styles} />;
+  return (
+    <>
+      {header}
+      <Content />
+      {footer}
+    </>
+  );
+}
+```
+
+```js {4}
+function Page({ colour }) {
+  const headerStyles = { colour, size: "large" };
+  const header = <Header styles={headerStyles} />;
+  const footerStyles = { colour, size: "small" }; // ✅ Good: we created a new value
+  const footer = <Footer styles={footerStyles} />;
+  return (
+    <>
+      {header}
+      <Content />
+      {footer}
+    </>
+  );
+}
+```
diff --git a/src/content/reference/rules/index.md b/src/content/reference/rules/index.md
new file mode 100644
index 000000000..dd5f7456c
--- /dev/null
+++ b/src/content/reference/rules/index.md
@@ -0,0 +1,52 @@
+---
+title: Rules of React
+---
+
+<Intro>
+Just as different programming languages have their own ways of expressing concepts, React has its own idioms — or rules — for how to express patterns in a way that is easy to understand and yields high-quality applications.
+</Intro>
+
+<InlineToc />
+
+---
+
+<Note>
+To learn more about expressing UIs with React, we recommend reading [Thinking in React](/learn/thinking-in-react).
+</Note>
+
+This section describes the rules you need to follow to write idiomatic React code. Writing idiomatic React code can help you write well organized, safe, and composable applications. These properties make your app more resilient to changes and makes it easier to work with other developers, libraries, and tools.
+
+These rules are known as the **Rules of React**. They are rules – and not just guidelines – in the sense that if they are broken, your app likely has bugs. Your code also becomes unidiomatic and harder to understand and reason about.
+
+We strongly recommend using [Strict Mode](/reference/react/StrictMode) alongside React's [ESLint plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to help your codebase follow the Rules of React. By following the Rules of React, you'll be able to find and address these bugs and keep your application maintainable.
+
+---
+
+## Components and Hooks must be pure {/*components-and-hooks-must-be-pure*/}
+
+[Purity in Components and Hooks](/reference/rules/components-and-hooks-must-be-pure) is a key rule of React that makes your app predictable, easy to debug, and allows React to automatically optimize your code.
+
+* [Components must be idempotent](/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent) – React components are assumed to always return the same output with respect to their inputs – props, state, and context.
+* [Side effects must run outside of render](/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) – Side effects should not run in render, as React can render components multiple times to create the best possible user experience.
+* [Props and state are immutable](/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable) – A component’s props and state are immutable snapshots with respect to a single render. Never mutate them directly.
+* [Return values and arguments to Hooks are immutable](/reference/rules/components-and-hooks-must-be-pure#return-values-and-arguments-to-hooks-are-immutable) – Once values are passed to a Hook, you should not modify them. Like props in JSX, values become immutable when passed to a Hook.
+* [Values are immutable after being passed to JSX](/reference/rules/components-and-hooks-must-be-pure#values-are-immutable-after-being-passed-to-jsx) – Don’t mutate values after they’ve been used in JSX. Move the mutation before the JSX is created.
+
+---
+
+## React calls Components and Hooks {/*react-calls-components-and-hooks*/}
+
+[React is responsible for rendering components and hooks when necessary to optimize the user experience.](/reference/rules/react-calls-components-and-hooks) It is declarative: you tell React what to render in your component’s logic, and React will figure out how best to display it to your user.
+
+* [Never call component functions directly](/reference/rules/react-calls-components-and-hooks#never-call-component-functions-directly) – Components should only be used in JSX. Don’t call them as regular functions.
+* [Never pass around hooks as regular values](/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values) – Hooks should only be called inside of components. Never pass it around as a regular value.
+
+---
+
+## Rules of Hooks {/*rules-of-hooks*/}
+
+Hooks are defined using JavaScript functions, but they represent a special type of reusable UI logic with restrictions on where they can be called. You need to follow the [Rules of Hooks](/reference/rules/rules-of-hooks) when using them.
+
+* [Only call Hooks at the top level](/reference/rules/rules-of-hooks#only-call-hooks-at-the-top-level) – Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns.
+* [Only call Hooks from React functions](/reference/rules/rules-of-hooks#only-call-hooks-from-react-functions) – Don’t call Hooks from regular JavaScript functions.
+
diff --git a/src/content/reference/rules/react-calls-components-and-hooks.md b/src/content/reference/rules/react-calls-components-and-hooks.md
new file mode 100644
index 000000000..3d865b4f2
--- /dev/null
+++ b/src/content/reference/rules/react-calls-components-and-hooks.md
@@ -0,0 +1,101 @@
+---
+title: React calls Components and Hooks
+---
+
+<Intro>
+React is responsible for rendering components and Hooks when necessary to optimize the user experience. It is declarative: you tell React what to render in your component’s logic, and React will figure out how best to display it to your user.
+</Intro>
+
+<InlineToc />
+
+---
+
+## Never call component functions directly {/*never-call-component-functions-directly*/}
+Components should only be used in JSX. Don't call them as regular functions. React should call it.
+
+React must decide when your component function is called [during rendering](/reference/rules/components-and-hooks-must-be-pure#how-does-react-run-your-code). In React, you do this using JSX.
+
+```js {2}
+function BlogPost() {
+  return <Layout><Article /></Layout>; // ✅ Good: Only use components in JSX
+}
+```
+
+```js {2}
+function BlogPost() {
+  return <Layout>{Article()}</Layout>; // 🔴 Bad: Never call them directly
+}
+```
+
+If a component contains Hooks, it's easy to violate the [Rules of Hooks](/reference/rules/rules-of-hooks) when components are called directly in a loop or conditionally.
+
+Letting React orchestrate rendering also allows a number of benefits:
+
+* **Components become more than functions.** React can augment them with features like _local state_ through Hooks that are tied to the component's identity in the tree.
+* **Component types participate in reconciliation.** By letting React call your components, you also tell it more about the conceptual structure of your tree. For example, when you move from rendering `<Feed>` to the `<Profile>` page, React won’t attempt to re-use them.
+* **React can enhance your user experience.** For example, it can let the browser do some work between component calls so that re-rendering a large component tree doesn’t block the main thread.
+* **A better debugging story.** If components are first-class citizens that the library is aware of, we can build rich developer tools for introspection in development.
+* **More efficient reconciliation.** React can decide exactly which components in the tree need re-rendering and skip over the ones that don't. That makes your app faster and more snappy.
+
+---
+
+## Never pass around Hooks as regular values {/*never-pass-around-hooks-as-regular-values*/}
+
+Hooks should only be called inside of components or Hooks. Never pass it around as a regular value.
+
+Hooks allow you to augment a component with React features. They should always be called as a function, and never passed around as a regular value. This enables _local reasoning_, or the ability for developers to understand everything a component can do by looking at that component in isolation.
+
+Breaking this rule will cause React to not automatically optimize your component.
+
+### Don't dynamically mutate a Hook {/*dont-dynamically-mutate-a-hook*/}
+
+Hooks should be as "static" as possible. This means you shouldn't dynamically mutate them. For example, this means you shouldn't write higher order Hooks:
+
+```js {2}
+function ChatInput() {
+  const useDataWithLogging = withLogging(useData); // 🔴 Bad: don't write higher order Hooks
+  const data = useDataWithLogging();
+}
+```
+
+Hooks should be immutable and not be mutated. Instead of mutating a Hook dynamically, create a static version of the Hook with the desired functionality.
+
+```js {2,6}
+function ChatInput() {
+  const data = useDataWithLogging(); // ✅ Good: Create a new version of the Hook
+}
+
+function useDataWithLogging() {
+  // ... Create a new version of the Hook and inline the logic here
+}
+```
+
+### Don't dynamically use Hooks {/*dont-dynamically-use-hooks*/}
+
+Hooks should also not be dynamically used: for example, instead of doing dependency injection in a component by passing a Hook as a value:
+
+```js {2}
+function ChatInput() {
+  return <Button useData={useDataWithLogging} /> // 🔴 Bad: don't pass Hooks as props
+}
+```
+
+You should always inline the call of the Hook into that component and handle any logic in there.
+
+```js {6}
+function ChatInput() {
+  return <Button />
+}
+
+function Button() {
+  const data = useDataWithLogging(); // ✅ Good: Use the Hook directly
+}
+
+function useDataWithLogging() {
+  // If there's any conditional logic to change the Hook's behavior, it should be inlined into
+  // the Hook
+}
+```
+
+This way, `<Button />` is much easier to understand and debug. When Hooks are used in dynamic ways, it increases the complexity of your app greatly and inhibits local reasoning, making your team less productive in the long term. It also makes it easier to accidentally break the [Rules of Hooks](/reference/rules/rules-of-hooks) that Hooks should not be called conditionally. If you find yourself needing to mock components for tests, it's better to mock the server instead to respond with canned data. If possible, it's also usually more effective to test your app with end-to-end tests.
+
diff --git a/src/content/reference/rules/rules-of-hooks.md b/src/content/reference/rules/rules-of-hooks.md
new file mode 100644
index 000000000..ecaef7c60
--- /dev/null
+++ b/src/content/reference/rules/rules-of-hooks.md
@@ -0,0 +1,135 @@
+---
+title: Rules of Hooks
+---
+
+<Intro>
+Hooks are defined using JavaScript functions, but they represent a special type of reusable UI logic with restrictions on where they can be called.
+</Intro>
+
+<InlineToc />
+
+---
+
+##  Only call Hooks at the top level {/*only-call-hooks-at-the-top-level*/}
+
+Functions whose names start with `use` are called [*Hooks*](/reference/react) in React.
+
+**Don’t call Hooks inside loops, conditions, nested functions, or `try`/`catch`/`finally` blocks.** Instead, always use Hooks at the top level of your React function, before any early returns. You can only call Hooks while React is rendering a function component:
+
+* ✅ Call them at the top level in the body of a [function component](/learn/your-first-component).
+* ✅ Call them at the top level in the body of a [custom Hook](/learn/reusing-logic-with-custom-hooks).
+
+```js{2-3,8-9}
+function Counter() {
+  // ✅ Good: top-level in a function component
+  const [count, setCount] = useState(0);
+  // ...
+}
+
+function useWindowWidth() {
+  // ✅ Good: top-level in a custom Hook
+  const [width, setWidth] = useState(window.innerWidth);
+  // ...
+}
+```
+
+It’s **not** supported to call Hooks (functions starting with `use`) in any other cases, for example:
+
+* 🔴 Do not call Hooks inside conditions or loops.
+* 🔴 Do not call Hooks after a conditional `return` statement.
+* 🔴 Do not call Hooks in event handlers.
+* 🔴 Do not call Hooks in class components.
+* 🔴 Do not call Hooks inside functions passed to `useMemo`, `useReducer`, or `useEffect`.
+* 🔴 Do not call Hooks inside `try`/`catch`/`finally` blocks.
+
+If you break these rules, you might see this error.
+
+```js{3-4,11-12,20-21}
+function Bad({ cond }) {
+  if (cond) {
+    // 🔴 Bad: inside a condition (to fix, move it outside!)
+    const theme = useContext(ThemeContext);
+  }
+  // ...
+}
+
+function Bad() {
+  for (let i = 0; i < 10; i++) {
+    // 🔴 Bad: inside a loop (to fix, move it outside!)
+    const theme = useContext(ThemeContext);
+  }
+  // ...
+}
+
+function Bad({ cond }) {
+  if (cond) {
+    return;
+  }
+  // 🔴 Bad: after a conditional return (to fix, move it before the return!)
+  const theme = useContext(ThemeContext);
+  // ...
+}
+
+function Bad() {
+  function handleClick() {
+    // 🔴 Bad: inside an event handler (to fix, move it outside!)
+    const theme = useContext(ThemeContext);
+  }
+  // ...
+}
+
+function Bad() {
+  const style = useMemo(() => {
+    // 🔴 Bad: inside useMemo (to fix, move it outside!)
+    const theme = useContext(ThemeContext);
+    return createStyle(theme);
+  });
+  // ...
+}
+
+class Bad extends React.Component {
+  render() {
+    // 🔴 Bad: inside a class component (to fix, write a function component instead of a class!)
+    useEffect(() => {})
+    // ...
+  }
+}
+
+function Bad() {
+  try {
+    // 🔴 Bad: inside try/catch/finally block (to fix, move it outside!)
+    const [x, setX] = useState(0);
+  } catch {
+    const [x, setX] = useState(1);
+  }
+}
+```
+
+You can use the [`eslint-plugin-react-hooks` plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to catch these mistakes.
+
+<Note>
+
+[Custom Hooks](/learn/reusing-logic-with-custom-hooks) *may* call other Hooks (that's their whole purpose). This works because custom Hooks are also supposed to only be called while a function component is rendering.
+
+</Note>
+
+---
+
+## Only call Hooks from React functions {/*only-call-hooks-from-react-functions*/}
+
+Don’t call Hooks from regular JavaScript functions. Instead, you can:
+
+✅ Call Hooks from React function components.
+✅ Call Hooks from [custom Hooks](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component).
+
+By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code.
+
+```js {2,5}
+function FriendList() {
+  const [onlineStatus, setOnlineStatus] = useOnlineStatus(); // ✅
+}
+
+function setOnlineStatus() { // ❌ Not a component or custom Hook!
+  const [onlineStatus, setOnlineStatus] = useOnlineStatus();
+}
+```
diff --git a/src/content/versions.md b/src/content/versions.md
new file mode 100644
index 000000000..8530f6324
--- /dev/null
+++ b/src/content/versions.md
@@ -0,0 +1,301 @@
+---
+title: React Versions
+---
+
+<Intro>
+
+The React docs at [react.dev](https://react.dev) provide documentation for the latest version of React.
+
+</Intro>
+
+We aim to keep the docs updated within major versions, and do not publish versions for each minor or patch version. When a new major is released, we archive the docs for the previous version as `x.react.dev`. See our [versioning policy](/community/versioning-policy) for more info.
+
+You can find an archive of previous major versions below.
+## Latest version: 19.0 {/*latest-version*/}
+
+- [react.dev](https://react.dev) {/*docs-19*/}
+
+## Previous versions {/*previous-versions*/}
+
+- [18.react.dev](https://18.react.dev) {/*docs-18*/}
+- [17.react.dev](https://17.react.dev) {/*docs-17*/}
+- [16.react.dev](https://16.react.dev) {/*docs-16*/}
+- [15.react.dev](https://15.react.dev) {/*docs-15*/}
+
+<Note>
+
+#### Legacy Docs {/*legacy-docs*/}
+
+In 2023, we [launched our new docs](/blog/2023/03/16/introducing-react-dev) for React 18 as [react.dev](https://react.dev). The legacy React 18 docs are available at [legacy.reactjs.org](https://legacy.reactjs.org). Versions 17 and below are hosted on legacy sites.
+
+For versions older than React 15, see [15.react.dev](https://15.react.dev).
+
+</Note>
+
+## Changelog {/*changelog*/}
+
+### React 19 {/*react-19*/}
+
+**Blog Posts**
+- [React v19](/blog/2024/12/05/react-19)
+- [React 19 Upgrade Guide](/blog/2024/04/25/react-19-upgrade-guide)
+- [React Compiler Beta Release](/blog/2024/10/21/react-compiler-beta-release)
+
+**Talks**
+- [React 19 Keynote](https://www.youtube.com/watch?v=lyEKhv8-3n0)
+- [A Roadmap to React 19](https://www.youtube.com/watch?v=R0B2HsSM78s)
+- [What's new in React 19](https://www.youtube.com/watch?v=AJOGzVygGcY)
+- [React for Two Computers](https://www.youtube.com/watch?v=ozI4V_29fj4)
+- [React Compiler Deep Dive](https://www.youtube.com/watch?v=uA_PVyZP7AI)
+- [React Compiler Case Studies](https://www.youtube.com/watch?v=lvhPq5chokM)
+- [React 19 Deep Dive: Coordinating HTML](https://www.youtube.com/watch?v=IBBN-s77YSI)
+
+**Releases**
+- [v19.0.0 (December, 2024)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1900-december-5-2024)
+
+### React 18 {/*react-18*/}
+
+**Blog Posts**
+- [React v18.0](/blog/2022/03/29/react-v18)
+- [How to Upgrade to React 18](/blog/2022/03/08/react-18-upgrade-guide)
+- [The Plan for React 18](/blog/2021/06/08/the-plan-for-react-18)
+
+**Talks**
+- [React 18 Keynote](https://www.youtube.com/watch?v=FZ0cG47msEk)
+- [React 18 for app developers](https://www.youtube.com/watch?v=ytudH8je5ko)
+- [Streaming Server Rendering with Suspense](https://www.youtube.com/watch?v=pj5N-Khihgc)
+- [React without memo](https://www.youtube.com/watch?v=lGEMwh32soc)
+- [React Docs Keynote](https://www.youtube.com/watch?v=mneDaMYOKP8)
+- [React Developer Tooling](https://www.youtube.com/watch?v=oxDfrke8rZg)
+- [The first React Working Group](https://www.youtube.com/watch?v=qn7gRClrC9U)
+- [React 18 for External Store Libraries](https://www.youtube.com/watch?v=oPfSC5bQPR8)
+
+**Releases**
+- [v18.3.1 (April, 2024)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1831-april-26-2024)
+- [v18.3.0 (April, 2024)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1830-april-25-2024)
+- [v18.2.0 (June, 2022)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1820-june-14-2022)
+- [v18.1.0 (April, 2022)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1810-april-26-2022)
+- [v18.0.0 (March 2022)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1800-march-29-2022)
+
+### React 17 {/*react-17*/}
+
+**Blog Posts**
+- [React v17.0](https://legacy.reactjs.org/blog/2020/10/20/react-v17.html)
+- [Introducing the New JSX Transform](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)
+- [React v17.0 Release Candidate: No New Features](https://legacy.reactjs.org/blog/2020/08/10/react-v17-rc.html)
+
+**Releases**
+- [v17.0.2 (March 2021)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1702-march-22-2021)
+- [v17.0.1 (October 2020)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1701-october-22-2020)
+- [v17.0.0 (October 2020)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1700-october-20-2020)
+
+### React 16 {/*react-16*/}
+
+**Blog Posts**
+- [React v16.0](https://legacy.reactjs.org/blog/2017/09/26/react-v16.0.html)
+- [DOM Attributes in React 16](https://legacy.reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html)
+- [Error Handling in React 16](https://legacy.reactjs.org/blog/2017/07/26/error-handling-in-react-16.html)
+- [React v16.2.0: Improved Support for Fragments](https://legacy.reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html)
+- [React v16.4.0: Pointer Events](https://legacy.reactjs.org/blog/2018/05/23/react-v-16-4.html)
+- [React v16.4.2: Server-side vulnerability fix](https://legacy.reactjs.org/blog/2018/08/01/react-v-16-4-2.html)
+- [React v16.6.0: lazy, memo and contextType](https://legacy.reactjs.org/blog/2018/10/23/react-v-16-6.html)
+- [React v16.7: No, This Is Not the One With Hooks](https://legacy.reactjs.org/blog/2018/12/19/react-v-16-7.html)
+- [React v16.8: The One With Hooks](https://legacy.reactjs.org/blog/2019/02/06/react-v16.8.0.html)
+- [React v16.9.0 and the Roadmap Update](https://legacy.reactjs.org/blog/2019/08/08/react-v16.9.0.html)
+- [React v16.13.0](https://legacy.reactjs.org/blog/2020/02/26/react-v16.13.0.html)
+
+**Releases**
+- [v16.14.0 (October 2020)](https://github.com/facebook/react/blob/main/CHANGELOG.md#16140-october-14-2020)
+- [v16.13.1 (March 2020)](https://github.com/facebook/react/blob/main/CHANGELOG.md#16131-march-19-2020)
+- [v16.13.0 (February 2020)](https://github.com/facebook/react/blob/main/CHANGELOG.md#16130-february-26-2020)
+- [v16.12.0 (November 2019)](https://github.com/facebook/react/blob/main/CHANGELOG.md#16120-november-14-2019)
+- [v16.11.0 (October 2019)](https://github.com/facebook/react/blob/main/CHANGELOG.md#16110-october-22-2019)
+- [v16.10.2 (October 2019)](https://github.com/facebook/react/blob/main/CHANGELOG.md#16102-october-3-2019)
+- [v16.10.1 (September 2019)](https://github.com/facebook/react/blob/main/CHANGELOG.md#16101-september-28-2019)
+- [v16.10.0 (September 2019)](https://github.com/facebook/react/blob/main/CHANGELOG.md#16100-september-27-2019)
+- [v16.9.0 (August 2019)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1690-august-8-2019)
+- [v16.8.6 (March 2019)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1686-march-27-2019)
+- [v16.8.5 (March 2019)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1685-march-22-2019)
+- [v16.8.4 (March 2019)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1684-march-5-2019)
+- [v16.8.3 (February 2019)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1683-february-21-2019)
+- [v16.8.2 (February 2019)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1682-february-14-2019)
+- [v16.8.1 (February 2019)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1681-february-6-2019)
+- [v16.8.0 (February 2019)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1680-february-6-2019)
+- [v16.7.0 (December 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1670-december-19-2018)
+- [v16.6.3 (November 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1663-november-12-2018)
+- [v16.6.2 (November 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1662-november-12-2018)
+- [v16.6.1 (November 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1661-november-6-2018)
+- [v16.6.0 (October 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1660-october-23-2018)
+- [v16.5.2 (September 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1652-september-18-2018)
+- [v16.5.1 (September 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1651-september-13-2018)
+- [v16.5.0 (September 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1650-september-5-2018)
+- [v16.4.2 (August 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1642-august-1-2018)
+- [v16.4.1 (June 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1641-june-13-2018)
+- [v16.4.0 (May 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1640-may-23-2018)
+- [v16.3.3 (August 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1633-august-1-2018)
+- [v16.3.2 (April 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1632-april-16-2018)
+- [v16.3.1 (April 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1631-april-3-2018)
+- [v16.3.0 (March 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1630-march-29-2018)
+- [v16.2.1 (August 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1621-august-1-2018)
+- [v16.2.0 (November 2017)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1620-november-28-2017)
+- [v16.1.2 (August 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1612-august-1-2018)
+- [v16.1.1 (November 2017)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1611-november-13-2017)
+- [v16.1.0 (November 2017)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1610-november-9-2017)
+- [v16.0.1 (August 2018)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1601-august-1-2018)
+- [v16.0 (September 2017)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1600-september-26-2017)
+
+### React 15 {/*react-15*/}
+
+**Blog Posts**
+- [React v15.0](https://legacy.reactjs.org/blog/2016/04/07/react-v15.html)
+- [React v15.0 Release Candidate 2](https://legacy.reactjs.org/blog/2016/03/16/react-v15-rc2.html)
+- [React v15.0 Release Candidate](https://legacy.reactjs.org/blog/2016/03/07/react-v15-rc1.html)
+- [New Versioning Scheme](https://legacy.reactjs.org/blog/2016/02/19/new-versioning-scheme.html)
+- [Discontinuing IE 8 Support in React DOM](https://legacy.reactjs.org/blog/2016/01/12/discontinuing-ie8-support.html)
+- [Introducing React's Error Code System](https://legacy.reactjs.org/blog/2016/07/11/introducing-reacts-error-code-system.html)
+- [React v15.0.1](https://legacy.reactjs.org/blog/2016/04/08/react-v15.0.1.html)
+- [React v15.4.0](https://legacy.reactjs.org/blog/2016/11/16/react-v15.4.0.html)
+- [React v15.5.0](https://legacy.reactjs.org/blog/2017/04/07/react-v15.5.0.html)
+- [React v15.6.0](https://legacy.reactjs.org/blog/2017/06/13/react-v15.6.0.html)
+- [React v15.6.2](https://legacy.reactjs.org/blog/2017/09/25/react-v15.6.2.html)
+
+**Releases**
+- [v15.7.0 (October 2017)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1570-october-14-2020)
+- [v15.6.2 (September 2017)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1562-september-25-2017)
+- [v15.6.1 (June 2017)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1561-june-14-2017)
+- [v15.6.0 (June 2017)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1560-june-13-2017)
+- [v15.5.4 (April 2017)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1554-april-11-2017)
+- [v15.5.3 (April 2017)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1553-april-7-2017)
+- [v15.5.2 (April 2017)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1552-april-7-2017)
+- [v15.5.1 (April 2017)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1551-april-7-2017)
+- [v15.5.0 (April 2017)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1550-april-7-2017)
+- [v15.4.2 (January 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1542-january-6-2017)
+- [v15.4.1 (November 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1541-november-22-2016)
+- [v15.4.0 (November 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1540-november-16-2016)
+- [v15.3.2 (September 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1532-september-19-2016)
+- [v15.3.1 (August 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1531-august-19-2016)
+- [v15.3.0 (July 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1530-july-29-2016)
+- [v15.2.1 (July 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1521-july-8-2016)
+- [v15.2.0 (July 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1520-july-1-2016)
+- [v15.1.0 (May 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1510-may-20-2016)
+- [v15.0.2 (April 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1502-april-29-2016)
+- [v15.0.1 (April 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1501-april-8-2016)
+- [v15.0.0 (April 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1500-april-7-2016)
+
+### React 0.14 {/*react-14*/}
+
+**Blog Posts**
+- [React v0.14](https://legacy.reactjs.org/blog/2015/10/07/react-v0.14.html)
+- [React v0.14 Release Candidate](https://legacy.reactjs.org/blog/2015/09/10/react-v0.14-rc1.html)
+- [React v0.14 Beta 1](https://legacy.reactjs.org/blog/2015/07/03/react-v0.14-beta-1.html)
+- [New React Developer Tools](https://legacy.reactjs.org/blog/2015/09/02/new-react-developer-tools.html)
+- [New React Devtools Beta](https://legacy.reactjs.org/blog/2015/08/03/new-react-devtools-beta.html)
+- [React v0.14.1](https://legacy.reactjs.org/blog/2015/10/28/react-v0.14.1.html)
+- [React v0.14.2](https://legacy.reactjs.org/blog/2015/11/02/react-v0.14.2.html)
+- [React v0.14.3](https://legacy.reactjs.org/blog/2015/11/18/react-v0.14.3.html)
+- [React v0.14.4](https://legacy.reactjs.org/blog/2015/12/29/react-v0.14.4.html)
+- [React v0.14.8](https://legacy.reactjs.org/blog/2016/03/29/react-v0.14.8.html)
+
+**Releases**
+- [v0.14.10 (October 2020)](https://github.com/facebook/react/blob/main/CHANGELOG.md#01410-october-14-2020)
+- [v0.14.8 (March 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0148-march-29-2016)
+- [v0.14.7 (January 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0147-january-28-2016)
+- [v0.14.6 (January 2016)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0146-january-6-2016)
+- [v0.14.5 (December 2015)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0145-december-29-2015)
+- [v0.14.4 (December 2015)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0144-december-29-2015)
+- [v0.14.3 (November 2015)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0143-november-18-2015)
+- [v0.14.2 (November 2015)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0142-november-2-2015)
+- [v0.14.1 (October 2015)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0141-october-28-2015)
+- [v0.14.0 (October 2015)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0140-october-7-2015)
+
+### React 0.13 {/*react-13*/}
+
+**Blog Posts**
+- [React Native v0.4](https://legacy.reactjs.org/blog/2015/04/17/react-native-v0.4.html)
+- [React v0.13](https://legacy.reactjs.org/blog/2015/03/10/react-v0.13.html)
+- [React v0.13 RC2](https://legacy.reactjs.org/blog/2015/03/03/react-v0.13-rc2.html)
+- [React v0.13 RC](https://legacy.reactjs.org/blog/2015/02/24/react-v0.13-rc1.html)
+- [React v0.13.0 Beta 1](https://legacy.reactjs.org/blog/2015/01/27/react-v0.13.0-beta-1.html)
+- [Streamlining React Elements](https://legacy.reactjs.org/blog/2015/02/24/streamlining-react-elements.html)
+- [Introducing Relay and GraphQL](https://legacy.reactjs.org/blog/2015/02/20/introducing-relay-and-graphql.html)
+- [Introducing React Native](https://legacy.reactjs.org/blog/2015/03/26/introducing-react-native.html)
+- [React v0.13.1](https://legacy.reactjs.org/blog/2015/03/16/react-v0.13.1.html)
+- [React v0.13.2](https://legacy.reactjs.org/blog/2015/04/18/react-v0.13.2.html)
+- [React v0.13.3](https://legacy.reactjs.org/blog/2015/05/08/react-v0.13.3.html)
+
+**Releases**
+- [v0.13.3 (May 2015)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0133-may-8-2015)
+- [v0.13.2 (April 2015)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0132-april-18-2015)
+- [v0.13.1 (March 2015)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0131-march-16-2015)
+- [v0.13.0 (March 2015)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0130-march-10-2015)
+
+### React 0.12 {/*react-12*/}
+
+**Blog Posts**
+- [React v0.12](https://legacy.reactjs.org/blog/2014/10/28/react-v0.12.html)
+- [React v0.12 RC](https://legacy.reactjs.org/blog/2014/10/16/react-v0.12-rc1.html)
+- [Introducing React Elements](https://legacy.reactjs.org/blog/2014/10/14/introducing-react-elements.html)
+- [React v0.12.2](https://legacy.reactjs.org/blog/2014/12/18/react-v0.12.2.html)
+
+**Releases**
+- [v0.12.2 (December 2014)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0122-december-18-2014)
+- [v0.12.1 (November 2014)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0121-november-18-2014)
+- [v0.12.0 (October 2014)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0120-october-28-2014)
+
+### React 0.11 {/*react-11*/}
+
+**Blog Posts**
+- [React v0.11](https://legacy.reactjs.org/blog/2014/07/17/react-v0.11.html)
+- [React v0.11 RC](https://legacy.reactjs.org/blog/2014/07/13/react-v0.11-rc1.html)
+- [One Year of Open-Source React](https://legacy.reactjs.org/blog/2014/05/29/one-year-of-open-source-react.html)
+- [The Road to 1.0](https://legacy.reactjs.org/blog/2014/03/28/the-road-to-1.0.html)
+- [React v0.11.1](https://legacy.reactjs.org/blog/2014/07/25/react-v0.11.1.html)
+- [React v0.11.2](https://legacy.reactjs.org/blog/2014/09/16/react-v0.11.2.html)
+- [Introducing the JSX Specificaion](https://legacy.reactjs.org/blog/2014/09/03/introducing-the-jsx-specification.html)
+
+**Releases**
+- [v0.11.2 (September 2014)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0112-september-16-2014)
+- [v0.11.1 (July 2014)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0111-july-24-2014)
+- [v0.11.0 (July 2014)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0110-july-17-2014)
+
+### React 0.10 and below {/*react-10-and-below*/}
+
+**Blog Posts**
+- [React v0.10](https://legacy.reactjs.org/blog/2014/03/21/react-v0.10.html)
+- [React v0.10 RC](https://legacy.reactjs.org/blog/2014/03/19/react-v0.10-rc1.html)
+- [React v0.9](https://legacy.reactjs.org/blog/2014/02/20/react-v0.9.html)
+- [React v0.9 RC](https://legacy.reactjs.org/blog/2014/02/16/react-v0.9-rc1.html)
+- [React Chrome Developer Tools](https://legacy.reactjs.org/blog/2014/01/02/react-chrome-developer-tools.html)
+- [React v0.8](https://legacy.reactjs.org/blog/2013/12/19/react-v0.8.0.html)
+- [React v0.5.2, v0.4.2](https://legacy.reactjs.org/blog/2013/12/18/react-v0.5.2-v0.4.2.html)
+- [React v0.5.1](https://legacy.reactjs.org/blog/2013/10/29/react-v0-5-1.html)
+- [React v0.5](https://legacy.reactjs.org/blog/2013/10/16/react-v0.5.0.html)
+- [React v0.4.1](https://legacy.reactjs.org/blog/2013/07/26/react-v0-4-1.html)
+- [React v0.4.0](https://legacy.reactjs.org/blog/2013/07/17/react-v0-4-0.html)
+- [New in React v0.4: Prop Validation and Default Values](https://legacy.reactjs.org/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html)
+- [New in React v0.4: Autobind by Default](https://legacy.reactjs.org/blog/2013/07/02/react-v0-4-autobind-by-default.html)
+- [React v0.3.3](https://legacy.reactjs.org/blog/2013/07/02/react-v0-4-autobind-by-default.html)
+
+**Releases**
+- [v0.10.0 (March 2014)](https://github.com/facebook/react/blob/main/CHANGELOG.md#0100-march-21-2014)
+- [v0.9.0 (February 2014)](https://github.com/facebook/react/blob/main/CHANGELOG.md#090-february-20-2014)
+- [v0.8.0 (December 2013)](https://github.com/facebook/react/blob/main/CHANGELOG.md#080-december-19-2013)
+- [v0.5.2 (December 2013)](https://github.com/facebook/react/blob/main/CHANGELOG.md#052-042-december-18-2013)
+- [v0.5.1 (October 2013)](https://github.com/facebook/react/blob/main/CHANGELOG.md#051-october-29-2013)
+- [v0.5.0 (October 2013)](https://github.com/facebook/react/blob/main/CHANGELOG.md#050-october-16-2013)
+- [v0.4.1 (July 2013)](https://github.com/facebook/react/blob/main/CHANGELOG.md#041-july-26-2013)
+- [v0.4.0 (July 2013)](https://github.com/facebook/react/blob/main/CHANGELOG.md#040-july-17-2013)
+- [v0.3.3 (June 2013)](https://github.com/facebook/react/blob/main/CHANGELOG.md#033-june-20-2013)
+- [v0.3.2 (May 2013)](https://github.com/facebook/react/blob/main/CHANGELOG.md#032-may-31-2013)
+- [v0.3.1 (May 2013)](https://github.com/facebook/react/blob/main/CHANGELOG.md#031-may-30-2013)
+- [v0.3.0 (May 2013)](https://github.com/facebook/react/blob/main/CHANGELOG.md#031-may-30-2013)
+
+### Initial Commit {/*initial-commit*/}
+
+React was open-sourced on May 29, 2013. The initial commit is: [`75897c`: Initial public release](https://github.com/facebook/react/commit/75897c2dcd1dd3a6ca46284dd37e13d22b4b16b4)
+
+See the first blog post: [Why did we build React?](https://legacy.reactjs.org/blog/2013/06/05/why-react.html) 
+
+React was open sourced at Facebook Seattle in 2013:
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/XxVg_s8xAms?si=466vSJrnXTn05j9A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
diff --git a/src/content/warnings/react-dom-test-utils.md b/src/content/warnings/react-dom-test-utils.md
new file mode 100644
index 000000000..2dc33e5b2
--- /dev/null
+++ b/src/content/warnings/react-dom-test-utils.md
@@ -0,0 +1,89 @@
+---
+title: react-dom/test-utils Deprecation Warnings
+---
+
+TODO: update for 19?
+
+## ReactDOMTestUtils.act() warning {/*reactdomtestutilsact-warning*/}
+
+`act` from `react-dom/test-utils` has been deprecated in favor of `act` from `react`.
+
+Before:
+
+```js
+import {act} from 'react-dom/test-utils';
+```
+
+After:
+
+```js
+import {act} from 'react';
+```
+
+## Rest of ReactDOMTestUtils APIS {/*rest-of-reactdomtestutils-apis*/}
+
+All APIs except `act` have been removed.
+
+The React Team recommends migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) for a modern and well supported testing experience.
+
+### ReactDOMTestUtils.renderIntoDocument {/*reactdomtestutilsrenderintodocument*/}
+
+`renderIntoDocument` can be replaced with `render` from `@testing-library/react`.
+
+Before:
+
+```js
+import {renderIntoDocument} from 'react-dom/test-utils';
+
+renderIntoDocument(<Component />);
+```
+
+After:
+
+```js
+import {render} from '@testing-library/react';
+
+render(<Component />);
+```
+
+### ReactDOMTestUtils.Simulate {/*reactdomtestutilssimulate*/}
+
+`Simulate` can be replaced with `fireEvent` from `@testing-library/react`.
+
+Before:
+
+```js
+import {Simulate} from 'react-dom/test-utils';
+
+const element = document.querySelector('button');
+Simulate.click(element);
+```
+
+After:
+
+```js
+import {fireEvent} from '@testing-library/react';
+
+const element = document.querySelector('button');
+fireEvent.click(element);
+```
+
+Be aware that `fireEvent` dispatches an actual event on the element and doesn't just synthetically call the event handler.
+
+### List of all removed APIs {/*list-of-all-removed-apis-list-of-all-removed-apis*/}
+
+- `mockComponent()`
+- `isElement()`
+- `isElementOfType()`
+- `isDOMComponent()`
+- `isCompositeComponent()`
+- `isCompositeComponentWithType()`
+- `findAllInRenderedTree()`
+- `scryRenderedDOMComponentsWithClass()`
+- `findRenderedDOMComponentWithClass()`
+- `scryRenderedDOMComponentsWithTag()`
+- `findRenderedDOMComponentWithTag()`
+- `scryRenderedComponentsWithType()`
+- `findRenderedComponentWithType()`
+- `renderIntoDocument`
+- `Simulate`
diff --git a/src/content/warnings/react-test-renderer.md b/src/content/warnings/react-test-renderer.md
new file mode 100644
index 000000000..da7623fe2
--- /dev/null
+++ b/src/content/warnings/react-test-renderer.md
@@ -0,0 +1,16 @@
+---
+title: react-test-renderer Deprecation Warnings
+---
+
+TODO: Update this for 19?
+
+## ReactTestRenderer.create() warning {/*reacttestrenderercreate-warning*/}
+
+react-test-renderer is deprecated. A warning will fire whenever calling ReactTestRenderer.create() or ReactShallowRender.render(). The react-test-renderer package will remain available on NPM but will not be maintained and may break with new React features or changes to React's internals.
+
+The React Team recommends migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://callstack.github.io/react-native-testing-library/docs/start/intro) for a modern and well supported testing experience.
+
+
+## new ShallowRenderer() warning {/*new-shallowrenderer-warning*/}
+
+The react-test-renderer package no longer exports a shallow renderer at `react-test-renderer/shallow`. This was simply a repackaging of a previously extracted separate package: `react-shallow-renderer`. Therefore you can continue using the shallow renderer in the same way by installing it directly. See [Github](https://github.com/enzymejs/react-shallow-renderer) / [NPM](https://www.npmjs.com/package/react-shallow-renderer).
diff --git a/src/pages/[[...markdownPath]].js b/src/pages/[[...markdownPath]].js
index d1df93d3c..63fcfcc81 100644
--- a/src/pages/[[...markdownPath]].js
+++ b/src/pages/[[...markdownPath]].js
@@ -4,15 +4,17 @@
 
 import {Fragment, useMemo} from 'react';
 import {useRouter} from 'next/router';
-import {MDXComponents} from 'components/MDX/MDXComponents';
 import {Page} from 'components/Layout/Page';
 import sidebarHome from '../sidebarHome.json';
 import sidebarLearn from '../sidebarLearn.json';
 import sidebarReference from '../sidebarReference.json';
 import sidebarCommunity from '../sidebarCommunity.json';
 import sidebarBlog from '../sidebarBlog.json';
+import {MDXComponents} from 'components/MDX/MDXComponents';
+import compileMDX from 'utils/compileMDX';
+import {generateRssFeed} from '../utils/rss';
 
-export default function Layout({content, toc, meta}) {
+export default function Layout({content, toc, meta, languages}) {
   const parsedContent = useMemo(
     () => JSON.parse(content, reviveNodeOnClient),
     [content]
@@ -39,7 +41,12 @@ export default function Layout({content, toc, meta}) {
       break;
   }
   return (
-    <Page toc={parsedToc} routeTree={routeTree} meta={meta} section={section}>
+    <Page
+      toc={parsedToc}
+      routeTree={routeTree}
+      meta={meta}
+      section={section}
+      languages={languages}>
       {parsedContent}
     </Page>
   );
@@ -94,20 +101,11 @@ function reviveNodeOnClient(key, val) {
   }
 }
 
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-// ~~~~ IMPORTANT: BUMP THIS IF YOU CHANGE ANY CODE BELOW ~~~
-const DISK_CACHE_BREAKER = 7;
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
 // Put MDX output into JSON for client.
 export async function getStaticProps(context) {
+  generateRssFeed();
   const fs = require('fs');
-  const {
-    prepareMDX,
-    PREPARE_MDX_CACHE_BREAKER,
-  } = require('../utils/prepareMDX');
   const rootDir = process.cwd() + '/src/content/';
-  const mdxComponentNames = Object.keys(MDXComponents);
 
   // Read MDX from the file.
   let path = (context.params.markdownPath || []).join('/') || 'index';
@@ -118,132 +116,15 @@ export async function getStaticProps(context) {
     mdx = fs.readFileSync(rootDir + path + '/index.md', 'utf8');
   }
 
-  // See if we have a cached output first.
-  const {FileStore, stableHash} = require('metro-cache');
-  const store = new FileStore({
-    root: process.cwd() + '/node_modules/.cache/react-docs-mdx/',
-  });
-  const hash = Buffer.from(
-    stableHash({
-      // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-      // ~~~~ IMPORTANT: Everything that the code below may rely on.
-      // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-      mdx,
-      mdxComponentNames,
-      DISK_CACHE_BREAKER,
-      PREPARE_MDX_CACHE_BREAKER,
-      lockfile: fs.readFileSync(process.cwd() + '/yarn.lock', 'utf8'),
-    })
-  );
-  const cached = await store.get(hash);
-  if (cached) {
-    console.log(
-      'Reading compiled MDX for /' + path + ' from ./node_modules/.cache/'
-    );
-    return cached;
-  }
-  if (process.env.NODE_ENV === 'production') {
-    console.log(
-      'Cache miss for MDX for /' + path + ' from ./node_modules/.cache/'
-    );
-  }
-
-  // If we don't add these fake imports, the MDX compiler
-  // will insert a bunch of opaque components we can't introspect.
-  // This will break the prepareMDX() call below.
-  let mdxWithFakeImports =
-    mdx +
-    '\n\n' +
-    mdxComponentNames
-      .map((key) => 'import ' + key + ' from "' + key + '";\n')
-      .join('\n');
-
-  // Turn the MDX we just read into some JS we can execute.
-  const {remarkPlugins} = require('../../plugins/markdownToHtml');
-  const {compile: compileMdx} = await import('@mdx-js/mdx');
-  const visit = (await import('unist-util-visit')).default;
-  const jsxCode = await compileMdx(mdxWithFakeImports, {
-    remarkPlugins: [
-      ...remarkPlugins,
-      (await import('remark-gfm')).default,
-      (await import('remark-frontmatter')).default,
-    ],
-    rehypePlugins: [
-      // Support stuff like ```js App.js {1-5} active by passing it through.
-      function rehypeMetaAsAttributes() {
-        return (tree) => {
-          visit(tree, 'element', (node) => {
-            if (node.tagName === 'code' && node.data && node.data.meta) {
-              node.properties.meta = node.data.meta;
-            }
-          });
-        };
-      },
-    ],
-  });
-  const {transform} = require('@babel/core');
-  const jsCode = await transform(jsxCode, {
-    plugins: ['@babel/plugin-transform-modules-commonjs'],
-    presets: ['@babel/preset-react'],
-  }).code;
-
-  // Prepare environment for MDX.
-  let fakeExports = {};
-  const fakeRequire = (name) => {
-    if (name === 'react/jsx-runtime') {
-      return require('react/jsx-runtime');
-    } else {
-      // For each fake MDX import, give back the string component name.
-      // It will get serialized later.
-      return name;
-    }
-  };
-  const evalJSCode = new Function('require', 'exports', jsCode);
-  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-  // THIS IS A BUILD-TIME EVAL. NEVER DO THIS WITH UNTRUSTED MDX (LIKE FROM CMS)!!!
-  // In this case it's okay because anyone who can edit our MDX can also edit this file.
-  evalJSCode(fakeRequire, fakeExports);
-  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-  const reactTree = fakeExports.default({});
-
-  // Pre-process MDX output and serialize it.
-  let {toc, children} = prepareMDX(reactTree.props.children);
-  if (path === 'index') {
-    toc = [];
-  }
-
-  // Parse Frontmatter headers from MDX.
-  const fm = require('gray-matter');
-  const meta = fm(mdx).data;
-
-  const output = {
+  const {toc, content, meta, languages} = await compileMDX(mdx, path, {});
+  return {
     props: {
-      content: JSON.stringify(children, stringifyNodeOnServer),
-      toc: JSON.stringify(toc, stringifyNodeOnServer),
+      toc,
+      content,
       meta,
+      languages,
     },
   };
-
-  // Serialize a server React tree node to JSON.
-  function stringifyNodeOnServer(key, val) {
-    if (val != null && val.$$typeof === Symbol.for('react.element')) {
-      // Remove fake MDX props.
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const {mdxType, originalType, parentName, ...cleanProps} = val.props;
-      return [
-        '$r',
-        typeof val.type === 'string' ? val.type : mdxType,
-        val.key,
-        cleanProps,
-      ];
-    } else {
-      return val;
-    }
-  }
-
-  // Cache it on the disk.
-  await store.set(hash, output);
-  return output;
 }
 
 // Collect all MDX files for static generation.
@@ -266,7 +147,12 @@ export async function getStaticPaths() {
           : res.slice(rootDir.length + 1);
       })
     );
-    return files.flat().filter((file) => file.endsWith('.md'));
+    return (
+      files
+        .flat()
+        // ignores `errors/*.md`, they will be handled by `pages/errors/[errorCode].tsx`
+        .filter((file) => file.endsWith('.md') && !file.startsWith('errors/'))
+    );
   }
 
   // 'foo/bar/baz.md' -> ['foo', 'bar', 'baz']
@@ -280,6 +166,7 @@ export async function getStaticPaths() {
   }
 
   const files = await getFiles(rootDir);
+
   const paths = files.map((file) => ({
     params: {
       markdownPath: getSegments(file),
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 717375968..5431f87cc 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -5,7 +5,6 @@
 import {useEffect} from 'react';
 import {AppProps} from 'next/app';
 import {useRouter} from 'next/router';
-import {ga} from '../utils/analytics';
 
 import '@docsearch/css';
 import '../styles/algolia.css';
@@ -13,13 +12,13 @@ import '../styles/index.css';
 import '../styles/sandpack.css';
 
 if (typeof window !== 'undefined') {
-  if (process.env.NODE_ENV === 'production') {
-    ga('create', process.env.NEXT_PUBLIC_GA_TRACKING_ID, 'auto');
-    ga('send', 'pageview');
-  }
   const terminationEvent = 'onpagehide' in window ? 'pagehide' : 'unload';
   window.addEventListener(terminationEvent, function () {
-    ga('send', 'timing', 'JS Dependencies', 'unload');
+    // @ts-ignore
+    gtag('event', 'timing', {
+      event_label: 'JS Dependencies',
+      event: 'unload',
+    });
   });
 }
 
@@ -44,8 +43,10 @@ export default function MyApp({Component, pageProps}: AppProps) {
   useEffect(() => {
     const handleRouteChange = (url: string) => {
       const cleanedUrl = url.split(/[\?\#]/)[0];
-      ga('set', 'page', cleanedUrl);
-      ga('send', 'pageview');
+      // @ts-ignore
+      gtag('event', 'pageview', {
+        event_label: cleanedUrl,
+      });
     };
     router.events.on('routeChangeComplete', handleRouteChange);
     return () => {
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 392fdf88a..6849df35d 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -9,7 +9,94 @@ const MyDocument = () => {
   return (
     <Html lang={siteConfig.languageCode} dir={siteConfig.isRTL ? 'rtl' : 'ltr'}>
       <Head />
+      <link
+        rel="apple-touch-icon"
+        sizes="180x180"
+        href="/apple-touch-icon.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href="/favicon-32x32.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="16x16"
+        href="/favicon-16x16.png"
+      />
+      <link rel="manifest" href="/site.webmanifest" />
+      <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#404756" />
+      <meta name="msapplication-TileColor" content="#2b5797" />
+      <meta name="theme-color" content="#23272f" />
+      <script
+        async
+        src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_TRACKING_ID}`}
+      />
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', '${process.env.NEXT_PUBLIC_GA_TRACKING_ID}');`,
+        }}
+      />
       <body className="font-text font-medium antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function () {
+                try {
+                  let logShown = false;
+                  function setUwu(isUwu) {
+                    try {
+                      if (isUwu) {
+                        localStorage.setItem('uwu', true);
+                        document.documentElement.classList.add('uwu');
+                        if (!logShown) {
+                          console.log('uwu mode! turn off with ?uwu=0');
+                          console.log('logo credit to @sawaratsuki1004 via https://github.com/SAWARATSUKI/ServiceLogos');
+                          logShown = true;
+                        }
+                      } else {
+                        localStorage.removeItem('uwu');
+                        document.documentElement.classList.remove('uwu');
+                        console.log('uwu mode off. turn on with ?uwu');
+                      }
+                    } catch (err) { }
+                  }
+                  window.__setUwu = setUwu;
+                  function checkQueryParam() {
+                    const params = new URLSearchParams(window.location.search);
+                    const value = params.get('uwu');
+                    switch(value) {
+                      case '':
+                      case 'true':
+                      case '1':
+                        return true;
+                      case 'false':
+                      case '0':
+                        return false;
+                      default:
+                        return null;
+                    }
+                  }
+                  function checkLocalStorage() {
+                    try {
+                      return localStorage.getItem('uwu') === 'true';
+                    } catch (err) {
+                      return false;
+                    }
+                  }
+                  const uwuQueryParam = checkQueryParam();
+                  if (uwuQueryParam != null) {
+                    setUwu(uwuQueryParam);
+                  } else if (checkLocalStorage()) {
+                    document.documentElement.classList.add('uwu');
+                  }
+                } catch (err) { }
+              })();
+            `,
+          }}
+        />
         <script
           dangerouslySetInnerHTML={{
             __html: `
diff --git a/src/pages/errors/[errorCode].tsx b/src/pages/errors/[errorCode].tsx
new file mode 100644
index 000000000..519af3b07
--- /dev/null
+++ b/src/pages/errors/[errorCode].tsx
@@ -0,0 +1,157 @@
+import {Fragment, useMemo} from 'react';
+import {Page} from 'components/Layout/Page';
+import {MDXComponents} from 'components/MDX/MDXComponents';
+import sidebarLearn from 'sidebarLearn.json';
+import type {RouteItem} from 'components/Layout/getRouteMeta';
+import {GetStaticPaths, GetStaticProps, InferGetStaticPropsType} from 'next';
+import {ErrorDecoderContext} from 'components/ErrorDecoderContext';
+import compileMDX from 'utils/compileMDX';
+
+interface ErrorDecoderProps {
+  errorCode: string | null;
+  errorMessage: string | null;
+  content: string;
+  toc: string;
+  meta: any;
+}
+
+export default function ErrorDecoderPage({
+  errorMessage,
+  errorCode,
+  content,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  const parsedContent = useMemo<React.ReactNode>(
+    () => JSON.parse(content, reviveNodeOnClient),
+    [content]
+  );
+
+  return (
+    <ErrorDecoderContext.Provider value={{errorMessage, errorCode}}>
+      <Page
+        toc={[]}
+        meta={{
+          title: errorCode
+            ? `Minified React error #${errorCode}`
+            : 'Minified Error Decoder',
+        }}
+        routeTree={sidebarLearn as RouteItem}
+        section="unknown">
+        <div className="whitespace-pre-line">{parsedContent}</div>
+        {/* <MaxWidth>
+          <P>
+            We highly recommend using the development build locally when debugging
+            your app since it tracks additional debug info and provides helpful
+            warnings about potential problems in your apps, but if you encounter
+            an exception while using the production build, this page will
+            reassemble the original error message.
+          </P>
+          <ErrorDecoder />
+        </MaxWidth> */}
+      </Page>
+    </ErrorDecoderContext.Provider>
+  );
+}
+
+// Deserialize a client React tree from JSON.
+function reviveNodeOnClient(key: unknown, val: any) {
+  if (Array.isArray(val) && val[0] == '$r') {
+    // Assume it's a React element.
+    let type = val[1];
+    let key = val[2];
+    let props = val[3];
+    if (type === 'wrapper') {
+      type = Fragment;
+      props = {children: props.children};
+    }
+    if (type in MDXComponents) {
+      type = MDXComponents[type as keyof typeof MDXComponents];
+    }
+    if (!type) {
+      console.error('Unknown type: ' + type);
+      type = Fragment;
+    }
+    return {
+      $$typeof: Symbol.for('react.element'),
+      type: type,
+      key: key,
+      ref: null,
+      props: props,
+      _owner: null,
+    };
+  } else {
+    return val;
+  }
+}
+
+/**
+ * Next.js Page Router doesn't have a way to cache specific data fetching request.
+ * But since Next.js uses limited number of workers, keep "cachedErrorCodes" as a
+ * module level memory cache can reduce the number of requests down to once per worker.
+ *
+ * TODO: use `next/unstable_cache` when migrating to Next.js App Router
+ */
+let cachedErrorCodes: Record<string, string> | null = null;
+
+export const getStaticProps: GetStaticProps<ErrorDecoderProps> = async ({
+  params,
+}) => {
+  const errorCodes: {[key: string]: string} = (cachedErrorCodes ||= await (
+    await fetch(
+      'https://raw.githubusercontent.com/facebook/react/main/scripts/error-codes/codes.json'
+    )
+  ).json());
+
+  const code = typeof params?.errorCode === 'string' ? params?.errorCode : null;
+  if (code && !errorCodes[code]) {
+    return {
+      notFound: true,
+    };
+  }
+
+  const fs = require('fs');
+  const rootDir = process.cwd() + '/src/content/errors';
+
+  // Read MDX from the file.
+  let path = params?.errorCode || 'index';
+  let mdx;
+  try {
+    mdx = fs.readFileSync(rootDir + '/' + path + '.md', 'utf8');
+  } catch {
+    // if [errorCode].md is not found, fallback to generic.md
+    mdx = fs.readFileSync(rootDir + '/generic.md', 'utf8');
+  }
+
+  const {content, toc, meta} = await compileMDX(mdx, path, {code, errorCodes});
+
+  return {
+    props: {
+      content,
+      toc,
+      meta,
+      errorCode: code,
+      errorMessage: code ? errorCodes[code] : null,
+    },
+  };
+};
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  /**
+   * Fetch error codes from GitHub
+   */
+  const errorCodes = (cachedErrorCodes ||= await (
+    await fetch(
+      'https://raw.githubusercontent.com/facebook/react/main/scripts/error-codes/codes.json'
+    )
+  ).json());
+
+  const paths = Object.keys(errorCodes).map((code) => ({
+    params: {
+      errorCode: code,
+    },
+  }));
+
+  return {
+    paths,
+    fallback: 'blocking',
+  };
+};
diff --git a/src/pages/errors/index.tsx b/src/pages/errors/index.tsx
new file mode 100644
index 000000000..d7742f03a
--- /dev/null
+++ b/src/pages/errors/index.tsx
@@ -0,0 +1,3 @@
+import ErrorDecoderPage from './[errorCode]';
+export default ErrorDecoderPage;
+export {getStaticProps} from './[errorCode]';
diff --git a/src/sidebarBlog.json b/src/sidebarBlog.json
index 2141181b0..84947fdf5 100644
--- a/src/sidebarBlog.json
+++ b/src/sidebarBlog.json
@@ -11,6 +11,41 @@
       "path": "/blog",
       "skipBreadcrumb": true,
       "routes": [
+        {
+          "title": "React Compiler Beta Release and Roadmap",
+          "titleForHomepage": "React Compiler Beta Release and Roadmap",
+          "icon": "blog",
+          "date": "October 21, 2024",
+          "path": "/blog/2024/10/21/react-compiler-beta-release"
+        },
+        {
+          "title": "React Conf 2024 Recap",
+          "titleForHomepage": "React Conf 2024 Recap",
+          "icon": "blog",
+          "date": "May 22, 2024",
+          "path": "/blog/2024/05/22/react-conf-2024-recap"
+        },
+        {
+          "title": "React 19 RC",
+          "titleForHomepage": "React 19 RC",
+          "icon": "blog",
+          "date": "April 25, 2024",
+          "path": "/blog/2024/04/25/react-19"
+        },
+        {
+          "title": "React 19 RC Upgrade Guide",
+          "titleForHomepage": "React 19 RC Upgrade Guide",
+          "icon": "blog",
+          "date": "April 25, 2024",
+          "path": "/blog/2024/04/25/react-19-upgrade-guide"
+        },
+        {
+          "title": "React Labs: What We've Been Working On – February 2024",
+          "titleForHomepage": "React Labs: February 2024",
+          "icon": "labs",
+          "date": "February 15, 2024",
+          "path": "/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024"
+        },
         {
           "title": "React Canaries: Enabling Incremental Feature Rollout Outside Meta",
           "titleForHomepage": "React Canaries: Incremental Feature Rollout",
diff --git a/src/sidebarCommunity.json b/src/sidebarCommunity.json
index 6b3e4eca3..ac8a172d5 100644
--- a/src/sidebarCommunity.json
+++ b/src/sidebarCommunity.json
@@ -31,6 +31,10 @@
           "title": "Docs Contributors",
           "path": "/community/docs-contributors"
         },
+        {
+          "title": "Translations",
+          "path": "/community/translations"
+        },
         {
           "title": "Acknowledgements",
           "path": "/community/acknowledgements"
diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index 5310455d8..06f2cd595 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -43,6 +43,11 @@
         {
           "title": "React Developer Tools",
           "path": "/learn/react-developer-tools"
+        },
+        {
+          "title": "React Compiler",
+          "path": "/learn/react-compiler",
+          "canary": true
         }
       ]
     },
@@ -86,6 +91,10 @@
         {
           "title": "Keeping Components Pure",
           "path": "/learn/keeping-components-pure"
+        },
+        {
+          "title": "Your UI as a Tree",
+          "path": "/learn/understanding-your-ui-as-a-tree"
         }
       ]
     },
@@ -190,7 +199,7 @@
         },
         {
           "title": "Removing Effect Dependencies",
-          "path": "/learn/removing-effect-dependencies"              
+          "path": "/learn/removing-effect-dependencies"
         },
         {
           "title": "Reusing Logic with Custom Hooks",
diff --git a/src/sidebarReference.json b/src/sidebarReference.json
index 04a523572..00917ad56 100644
--- a/src/sidebarReference.json
+++ b/src/sidebarReference.json
@@ -4,12 +4,20 @@
   "routes": [
     {
       "hasSectionHeader": true,
-      "sectionHeader": "react@18.2.0"
+      "sectionHeader": "react@{{version}}"
+    },
+    {
+      "title": "Overview",
+      "path": "/reference/react"
     },
     {
       "title": "Hooks",
-      "path": "/reference/react",
+      "path": "/reference/react/hooks",
       "routes": [
+        {
+          "title": "useActionState",
+          "path": "/reference/react/useActionState"
+        },
         {
           "title": "useCallback",
           "path": "/reference/react/useCallback"
@@ -50,6 +58,10 @@
           "title": "useMemo",
           "path": "/reference/react/useMemo"
         },
+        {
+          "title": "useOptimistic",
+          "path": "/reference/react/useOptimistic"
+        },
         {
           "title": "useReducer",
           "path": "/reference/react/useReducer"
@@ -99,12 +111,16 @@
       "path": "/reference/react/apis",
       "routes": [
         {
-          "title": "createContext",
-          "path": "/reference/react/createContext"
+          "title": "act",
+          "path": "/reference/react/act"
         },
         {
-          "title": "forwardRef",
-          "path": "/reference/react/forwardRef"
+          "title": "cache",
+          "path": "/reference/react/cache"
+        },
+        {
+          "title": "createContext",
+          "path": "/reference/react/createContext"
         },
         {
           "title": "lazy",
@@ -117,29 +133,36 @@
         {
           "title": "startTransition",
           "path": "/reference/react/startTransition"
-        }
-      ]
-    },
-    {
-      "title": "Directives",
-      "path": "/reference/react/directives",
-      "canary": true,
-      "routes": [
+        },
         {
-          "title": "'use client'",
-          "path": "/reference/react/use-client",
-          "canary": true
+          "title": "use",
+          "path": "/reference/react/use"
         },
         {
-          "title": "'use server'",
-          "path": "/reference/react/use-server",
-          "canary": true
+          "title": "experimental_taintObjectReference",
+          "path": "/reference/react/experimental_taintObjectReference",
+          "version": "canary"
+        },
+        {
+          "title": "experimental_taintUniqueValue",
+          "path": "/reference/react/experimental_taintUniqueValue",
+          "version": "canary"
         }
       ]
     },
     {
       "hasSectionHeader": true,
-      "sectionHeader": "react-dom@18.2.0"
+      "sectionHeader": "react-dom@{{version}}"
+    },
+    {
+      "title": "Hooks",
+      "path": "/reference/react-dom/hooks",
+      "routes": [
+        {
+          "title": "useFormStatus",
+          "path": "/reference/react-dom/hooks/useFormStatus"
+        }
+      ]
     },
     {
       "title": "Components",
@@ -149,6 +172,10 @@
           "title": "Common (e.g. <div>)",
           "path": "/reference/react-dom/components/common"
         },
+        {
+          "title": "<form>",
+          "path": "/reference/react-dom/components/form"
+        },
         {
           "title": "<input>",
           "path": "/reference/react-dom/components/input"
@@ -168,6 +195,26 @@
         {
           "title": "<textarea>",
           "path": "/reference/react-dom/components/textarea"
+        },
+        {
+          "title": "<link>",
+          "path": "/reference/react-dom/components/link"
+        },
+        {
+          "title": "<meta>",
+          "path": "/reference/react-dom/components/meta"
+        },
+        {
+          "title": "<script>",
+          "path": "/reference/react-dom/components/script"
+        },
+        {
+          "title": "<style>",
+          "path": "/reference/react-dom/components/style"
+        },
+        {
+          "title": "<title>",
+          "path": "/reference/react-dom/components/title"
         }
       ]
     },
@@ -184,20 +231,28 @@
           "path": "/reference/react-dom/flushSync"
         },
         {
-          "title": "findDOMNode",
-          "path": "/reference/react-dom/findDOMNode"
+          "title": "preconnect",
+          "path": "/reference/react-dom/preconnect"
+        },
+        {
+          "title": "prefetchDNS",
+          "path": "/reference/react-dom/prefetchDNS"
         },
         {
-          "title": "hydrate",
-          "path": "/reference/react-dom/hydrate"
+          "title": "preinit",
+          "path": "/reference/react-dom/preinit"
         },
         {
-          "title": "render",
-          "path": "/reference/react-dom/render"
+          "title": "preinitModule",
+          "path": "/reference/react-dom/preinitModule"
         },
         {
-          "title": "unmountComponentAtNode",
-          "path": "/reference/react-dom/unmountComponentAtNode"
+          "title": "preload",
+          "path": "/reference/react-dom/preload"
+        },
+        {
+          "title": "preloadModule",
+          "path": "/reference/react-dom/preloadModule"
         }
       ]
     },
@@ -219,10 +274,6 @@
       "title": "Server APIs",
       "path": "/reference/react-dom/server",
       "routes": [
-        {
-          "title": "renderToNodeStream",
-          "path": "/reference/react-dom/server/renderToNodeStream"
-        },
         {
           "title": "renderToPipeableStream",
           "path": "/reference/react-dom/server/renderToPipeableStream"
@@ -235,16 +286,75 @@
           "title": "renderToStaticMarkup",
           "path": "/reference/react-dom/server/renderToStaticMarkup"
         },
-        {
-          "title": "renderToStaticNodeStream",
-          "path": "/reference/react-dom/server/renderToStaticNodeStream"
-        },
         {
           "title": "renderToString",
           "path": "/reference/react-dom/server/renderToString"
         }
       ]
     },
+    {
+      "title": "Static APIs",
+      "path": "/reference/react-dom/static",
+      "routes": [
+        {
+          "title": "prerender",
+          "path": "/reference/react-dom/static/prerender"
+        },
+        {
+          "title": "prerenderToNodeStream",
+          "path": "/reference/react-dom/static/prerenderToNodeStream"
+        }
+        
+      ]
+    },
+    {
+      "hasSectionHeader": true,
+      "sectionHeader": "Rules of React"
+    },
+    {
+      "title": "Overview",
+      "path": "/reference/rules",
+      "routes": [
+        {
+          "title": "Components and Hooks must be pure",
+          "path": "/reference/rules/components-and-hooks-must-be-pure"
+        },
+        {
+          "title": "React calls Components and Hooks",
+          "path": "/reference/rules/react-calls-components-and-hooks"
+        },
+        {
+          "title": "Rules of Hooks",
+          "path": "/reference/rules/rules-of-hooks"
+        }
+      ]
+    },
+    {
+      "hasSectionHeader": true,
+      "sectionHeader": "React Server Components"
+    },
+    {
+      "title": "Server Components",
+      "path": "/reference/rsc/server-components"
+    },
+    {
+      "title": "Server Functions",
+      "path": "/reference/rsc/server-functions"
+    },
+    {
+      "title": "Directives",
+      "path": "/reference/rsc/directives",
+      "routes": [
+        {
+          "title": "'use client'",
+          "path": "/reference/rsc/use-client"
+        },
+        {
+          "title": "'use server'",
+          "path": "/reference/rsc/use-server"
+        }
+      ]
+    },
     {
       "hasSectionHeader": true,
       "sectionHeader": "Legacy APIs"
@@ -269,14 +379,14 @@
           "title": "createElement",
           "path": "/reference/react/createElement"
         },
-        {
-          "title": "createFactory",
-          "path": "/reference/react/createFactory"
-        },
         {
           "title": "createRef",
           "path": "/reference/react/createRef"
         },
+        {
+          "title": "forwardRef",
+          "path": "/reference/react/forwardRef"
+        },
         {
           "title": "isValidElement",
           "path": "/reference/react/isValidElement"
@@ -288,4 +398,4 @@
       ]
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/src/siteConfig.js b/src/siteConfig.js
index 270fe2488..e7fcf9dc6 100644
--- a/src/siteConfig.js
+++ b/src/siteConfig.js
@@ -1,8 +1,8 @@
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
-
 exports.siteConfig = {
+  version: '19',
   // --------------------------------------
   // Translations should replace these lines:
   languageCode: 'mn',
@@ -14,7 +14,7 @@ exports.siteConfig = {
   twitterUrl: 'https://twitter.com/reactjs',
   algolia: {
     appId: '1FCF9AYYAT',
-    apiKey: 'e8451218980a351815563de007648b00',
+    apiKey: '1b7ad4e1c89e645e351e59d40544eda1',
     indexName: 'beta-react',
   },
 };
diff --git a/src/styles/index.css b/src/styles/index.css
index 9e1ec4aaa..281111092 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -450,7 +450,7 @@
   }
 
   html.dark a > code {
-    color: #149eca !important; /* blue-40 */
+    color: #58c4dc !important; /* blue-40 */
   }
 
   .text-code {
@@ -559,6 +559,17 @@
   background: none !important;
   padding: 2px !important;
 }
+
+.dark .console-block code {
+  background: rgba(235 236 240 / 0.05) !important;
+  color: rgba(208, 125, 119) !important;
+}
+
+.console-block code {
+  background: rgba(235 236 240 / 0.95) !important;
+  color: rgb(166, 66, 58) !important;
+}
+
 html.dark .code-step * {
   color: inherit !important;
 }
@@ -719,3 +730,25 @@ ol.mdx-illustration-block {
     width: 100%;
   }
 }
+
+.exit {
+  opacity: 0;
+  transition: opacity 500ms ease-out;
+  transition-delay: 1s;
+  pointer-events: none;
+}
+
+.uwu-visible {
+  display: none;
+}
+.uwu-hidden {
+  display: flex;
+}
+
+.uwu .uwu-visible {
+  display: flex;
+}
+
+.uwu .uwu-hidden {
+  display: none;
+}
diff --git a/src/styles/sandpack.css b/src/styles/sandpack.css
index d211c8ab0..cc236209a 100644
--- a/src/styles/sandpack.css
+++ b/src/styles/sandpack.css
@@ -58,7 +58,7 @@ html .sandpack {
 
 /* Dark theme */
 html.dark .sp-wrapper {
-  --sp-colors-accent: #149eca;
+  --sp-colors-accent: #58c4dc;
   --sp-colors-clickable: #999;
   --sp-colors-disabled: #fff;
   --sp-colors-error: #811e18;
@@ -199,8 +199,7 @@ html.dark .sp-wrapper {
   background: var(--sp-colors-surface1);
 }
 
-.sandpack .sp-code-editor .cm-editor,
-.sandpack .sp-code-editor .cm-editor .cm-gutters {
+.sandpack .sp-code-editor .cm-editor {
   background-color: transparent;
 }
 
@@ -212,7 +211,6 @@ html.dark .sp-wrapper {
 }
 
 .sandpack .sp-code-editor .cm-content {
-  overflow-x: auto;
   padding-bottom: 18px;
 }
 
@@ -262,8 +260,6 @@ html.dark .sp-wrapper {
 }
 
 .sp-code-editor .sp-cm .cm-scroller {
-  overflow-x: hidden;
-  overflow-y: auto;
   padding-top: 18px;
 }
 
@@ -548,20 +544,6 @@ html.dark .sandpack--playground .sp-overlay {
   @apply text-secondary;
 }
 
-/**
- * Integrations: React devtools inline
- */
-.sandpack .sp-devtools {
-  border-bottom-left-radius: 0.5rem;
-  border-bottom-right-radius: 0.5rem;
-  overflow: hidden;
-}
-
-.sandpack .sp-wrapper .sp-layout-devtools {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
 /**
  * Overwrite inline sty
  */
@@ -611,7 +593,7 @@ html.dark .sp-devtools > div {
   -webkit-text-size-adjust: none;
 }
 
-/** 
+/**
  * For iOS: prevent browser zoom when clicking on sandbox.
  * Does NOT apply to code blocks.
  */
@@ -626,3 +608,7 @@ html.dark .sp-devtools > div {
     }
   }
 }
+
+.sp-loading .sp-icon-standalone span {
+  display: none;
+}
diff --git a/src/utils/compileMDX.ts b/src/utils/compileMDX.ts
new file mode 100644
index 000000000..4c5ee15b7
--- /dev/null
+++ b/src/utils/compileMDX.ts
@@ -0,0 +1,165 @@
+import {LanguageItem} from 'components/MDX/LanguagesContext';
+import {MDXComponents} from 'components/MDX/MDXComponents';
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// ~~~~ IMPORTANT: BUMP THIS IF YOU CHANGE ANY CODE BELOW ~~~
+const DISK_CACHE_BREAKER = 9;
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+export default async function compileMDX(
+  mdx: string,
+  path: string | string[],
+  params: {[key: string]: any}
+): Promise<{content: string; toc: string; meta: any}> {
+  const fs = require('fs');
+  const {
+    prepareMDX,
+    PREPARE_MDX_CACHE_BREAKER,
+  } = require('../utils/prepareMDX');
+  const mdxComponentNames = Object.keys(MDXComponents);
+
+  // See if we have a cached output first.
+  const {FileStore, stableHash} = require('metro-cache');
+  const store = new FileStore({
+    root: process.cwd() + '/node_modules/.cache/react-docs-mdx/',
+  });
+  const hash = Buffer.from(
+    stableHash({
+      // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+      // ~~~~ IMPORTANT: Everything that the code below may rely on.
+      // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+      mdx,
+      ...params,
+      mdxComponentNames,
+      DISK_CACHE_BREAKER,
+      PREPARE_MDX_CACHE_BREAKER,
+      lockfile: fs.readFileSync(process.cwd() + '/yarn.lock', 'utf8'),
+    })
+  );
+  const cached = await store.get(hash);
+  if (cached) {
+    console.log(
+      'Reading compiled MDX for /' + path + ' from ./node_modules/.cache/'
+    );
+    return cached;
+  }
+  if (process.env.NODE_ENV === 'production') {
+    console.log(
+      'Cache miss for MDX for /' + path + ' from ./node_modules/.cache/'
+    );
+  }
+
+  // If we don't add these fake imports, the MDX compiler
+  // will insert a bunch of opaque components we can't introspect.
+  // This will break the prepareMDX() call below.
+  let mdxWithFakeImports =
+    mdx +
+    '\n\n' +
+    mdxComponentNames
+      .map((key) => 'import ' + key + ' from "' + key + '";\n')
+      .join('\n');
+
+  // Turn the MDX we just read into some JS we can execute.
+  const {remarkPlugins} = require('../../plugins/markdownToHtml');
+  const {compile: compileMdx} = await import('@mdx-js/mdx');
+  const visit = (await import('unist-util-visit')).default;
+  const jsxCode = await compileMdx(mdxWithFakeImports, {
+    remarkPlugins: [
+      ...remarkPlugins,
+      (await import('remark-gfm')).default,
+      (await import('remark-frontmatter')).default,
+    ],
+    rehypePlugins: [
+      // Support stuff like ```js App.js {1-5} active by passing it through.
+      function rehypeMetaAsAttributes() {
+        return (tree) => {
+          visit(tree, 'element', (node) => {
+            if (
+              // @ts-expect-error -- tagName is a valid property
+              node.tagName === 'code' &&
+              node.data &&
+              node.data.meta
+            ) {
+              // @ts-expect-error -- properties is a valid property
+              node.properties.meta = node.data.meta;
+            }
+          });
+        };
+      },
+    ],
+  });
+  const {transform} = require('@babel/core');
+  const jsCode = await transform(jsxCode, {
+    plugins: ['@babel/plugin-transform-modules-commonjs'],
+    presets: ['@babel/preset-react'],
+  }).code;
+
+  // Prepare environment for MDX.
+  let fakeExports = {};
+  const fakeRequire = (name: string) => {
+    if (name === 'react/jsx-runtime') {
+      return require('react/jsx-runtime');
+    } else {
+      // For each fake MDX import, give back the string component name.
+      // It will get serialized later.
+      return name;
+    }
+  };
+  const evalJSCode = new Function('require', 'exports', jsCode);
+  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  // THIS IS A BUILD-TIME EVAL. NEVER DO THIS WITH UNTRUSTED MDX (LIKE FROM CMS)!!!
+  // In this case it's okay because anyone who can edit our MDX can also edit this file.
+  evalJSCode(fakeRequire, fakeExports);
+  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+  // @ts-expect-error -- default exports is existed after eval
+  const reactTree = fakeExports.default({});
+
+  // Pre-process MDX output and serialize it.
+  let {toc, children} = prepareMDX(reactTree.props.children);
+  if (path === 'index') {
+    toc = [];
+  }
+
+  // Parse Frontmatter headers from MDX.
+  const fm = require('gray-matter');
+  const meta = fm(mdx).data;
+
+  // Load the list of translated languages conditionally.
+  let languages: Array<LanguageItem> | null = null;
+  if (typeof path === 'string' && path.endsWith('/translations')) {
+    languages = await (
+      await fetch(
+        'https://raw.githubusercontent.com/reactjs/translations.react.dev/main/langs/langs.json'
+      )
+    ).json(); // { code: string; name: string; enName: string}[]
+  }
+
+  const output = {
+    content: JSON.stringify(children, stringifyNodeOnServer),
+    toc: JSON.stringify(toc, stringifyNodeOnServer),
+    meta,
+    languages,
+  };
+
+  // Serialize a server React tree node to JSON.
+  function stringifyNodeOnServer(key: unknown, val: any) {
+    if (val != null && val.$$typeof === Symbol.for('react.element')) {
+      // Remove fake MDX props.
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const {mdxType, originalType, parentName, ...cleanProps} = val.props;
+      return [
+        '$r',
+        typeof val.type === 'string' ? val.type : mdxType,
+        val.key,
+        cleanProps,
+      ];
+    } else {
+      return val;
+    }
+  }
+
+  // Cache it on the disk.
+  await store.set(hash, output);
+  return output;
+}
diff --git a/src/utils/emptyShim.js b/src/utils/emptyShim.js
deleted file mode 100644
index 294b03de4..000000000
--- a/src/utils/emptyShim.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/*
- * Copyright (c) Facebook, Inc. and its affiliates.
- */
-
-// We use this file to shim out dependencies that we don't need.
-// See next.config.js.
diff --git a/src/utils/finishedTranslations.ts b/src/utils/finishedTranslations.ts
new file mode 100644
index 000000000..6f509f0b5
--- /dev/null
+++ b/src/utils/finishedTranslations.ts
@@ -0,0 +1,16 @@
+// This is a list of languages with enough translated content.
+// Add more languages here when they have enough content.
+// Please DO NOT edit this list without a discussion in the reactjs/react.dev repo.
+// It must be the same between all translations.
+// This will also affect the 'Translations' article.
+
+// prettier-ignore
+export const finishedTranslations = [
+  'en',
+  'zh-hans',
+  'es',
+  'fr',
+  'ja',
+  'tr',
+  'ko'
+];
diff --git a/src/utils/prepareMDX.js b/src/utils/prepareMDX.js
index 639d7db90..20a22577d 100644
--- a/src/utils/prepareMDX.js
+++ b/src/utils/prepareMDX.js
@@ -7,7 +7,7 @@ import {Children} from 'react';
 // TODO: This logic could be in MDX plugins instead.
 
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-export const PREPARE_MDX_CACHE_BREAKER = 2;
+export const PREPARE_MDX_CACHE_BREAKER = 3;
 // !!! IMPORTANT !!! Bump this if you change any logic.
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
diff --git a/src/utils/rss.js b/src/utils/rss.js
new file mode 100644
index 000000000..29e5511ea
--- /dev/null
+++ b/src/utils/rss.js
@@ -0,0 +1,82 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+const Feed = require('rss');
+const fs = require('fs');
+const path = require('path');
+const matter = require('gray-matter');
+
+const getAllFiles = function (dirPath, arrayOfFiles) {
+  const files = fs.readdirSync(dirPath);
+
+  arrayOfFiles = arrayOfFiles || [];
+
+  files.forEach(function (file) {
+    if (fs.statSync(dirPath + '/' + file).isDirectory()) {
+      arrayOfFiles = getAllFiles(dirPath + '/' + file, arrayOfFiles);
+    } else {
+      arrayOfFiles.push(path.join(dirPath, '/', file));
+    }
+  });
+
+  return arrayOfFiles;
+};
+
+exports.generateRssFeed = function () {
+  const feed = new Feed({
+    title: 'React Blog',
+    description:
+      'This blog is the official source for the updates from the React team. Anything important, including release notes or deprecation notices, will be posted here first.',
+    feed_url: 'https://react.dev/rss.xml',
+    site_url: 'https://react.dev/',
+    language: 'en',
+    favicon: 'https://react.dev/favicon.ico',
+    pubDate: new Date(),
+    generator: 'react.dev rss module',
+  });
+
+  const dirPath = path.join(process.cwd(), 'src/content/blog');
+  const filesByOldest = getAllFiles(dirPath);
+  const files = filesByOldest.reverse();
+
+  for (const filePath of files) {
+    const id = path.basename(filePath);
+    if (id !== 'index.md') {
+      const content = fs.readFileSync(filePath, 'utf-8');
+      const {data} = matter(content);
+      const slug = filePath.split('/').slice(-4).join('/').replace('.md', '');
+
+      if (data.title == null || data.title.trim() === '') {
+        throw new Error(
+          `${id}: Blog posts must include a title in the metadata, for RSS feeds`
+        );
+      }
+      if (data.author == null || data.author.trim() === '') {
+        throw new Error(
+          `${id}: Blog posts must include an author in the metadata, for RSS feeds`
+        );
+      }
+      if (data.date == null || data.date.trim() === '') {
+        throw new Error(
+          `${id}: Blog posts must include a date in the metadata, for RSS feeds`
+        );
+      }
+      if (data.description == null || data.description.trim() === '') {
+        throw new Error(
+          `${id}: Blog posts must include a description in the metadata, for RSS feeds`
+        );
+      }
+
+      feed.item({
+        id,
+        title: data.title,
+        author: data.author || '',
+        date: new Date(data.date),
+        url: `https://react.dev/blog/${slug}`,
+        description: data.description,
+      });
+    }
+  }
+
+  fs.writeFileSync('./public/rss.xml', feed.xml({indent: true}));
+};
diff --git a/tailwind.config.js b/tailwind.config.js
index d528ff494..f31a24516 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -57,7 +57,8 @@ module.exports = {
         'meta-gradient-dark': "url('/images/meta-gradient-dark.png')",
       },
       maxWidth: {
-        xs: '21rem',
+        ...defaultTheme.maxWidth,
+        'custom-xs': '21rem',
       },
       outline: {
         blue: ['1px auto ' + colors.link, '3px'],
@@ -101,6 +102,7 @@ module.exports = {
         marquee2: 'marquee2 40s linear infinite',
         'large-marquee': 'large-marquee 80s linear infinite',
         'large-marquee2': 'large-marquee2 80s linear infinite',
+        'fade-up': 'fade-up 1s 100ms both',
       },
       keyframes: {
         shimmer: {
@@ -138,6 +140,16 @@ module.exports = {
           '0%': {transform: 'translateX(200%)'},
           '100%': {transform: 'translateX(0%)'},
         },
+        'fade-up': {
+          '0%': {
+            opacity: '0',
+            transform: 'translateY(2rem)',
+          },
+          '100%': {
+            opacity: '1',
+            transform: 'translateY(0)',
+          },
+        },
       },
       colors,
       gridTemplateColumns: {
diff --git a/vercel.json b/vercel.json
index 5e1fbd329..e08fda745 100644
--- a/vercel.json
+++ b/vercel.json
@@ -9,10 +9,230 @@
       "destination": "/reference/react",
       "permanent": true
     },
+    {
+      "source": "/reference/react-dom/hooks/useFormState",
+      "destination": "/reference/react/useActionState",
+      "permanent": true
+    },
     {
       "source": "/learn/meet-the-team",
       "destination": "/community/team",
       "permanent": true
+    },
+    {
+      "source": "/link/warning-keys",
+      "destination": "/learn/rendering-lists#keeping-list-items-in-order-with-key",
+      "permanent": false
+    },
+    {
+      "source": "/docs/lists-and-keys",
+      "destination": "/learn/rendering-lists#keeping-list-items-in-order-with-key",
+      "permanent": false
+    },
+    {
+      "source": "/link/invalid-hook-call",
+      "destination": "/warnings/invalid-hook-call-warning",
+      "permanent": false
+    },
+    {
+      "source": "/link/hooks-data-fetching",
+      "destination": "/reference/react/useEffect#fetching-data-with-effects",
+      "permanent": false
+    },
+    {
+      "source": "/link/special-props",
+      "destination": "/warnings/special-props",
+      "permanent": false
+    },
+    {
+      "source": "/link/dangerously-set-inner-html",
+      "destination": "/reference/react-dom/components/common#dangerously-setting-the-inner-html",
+      "permanent": false
+    },
+    {
+      "source": "/link/controlled-components",
+      "destination": "/reference/react-dom/components/input#controlling-an-input-with-a-state-variable",
+      "permanent": false
+    },
+    {
+      "source": "/link/react-devtools",
+      "destination": "/learn/react-developer-tools",
+      "permanent": false
+    },
+    {
+      "source": "/link/invalid-aria-props",
+      "destination": "/warnings/invalid-aria-prop",
+      "permanent": false
+    },
+    {
+      "source": "/link/hydration-mismatch",
+      "destination": "/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html",
+      "permanent": false
+    },
+    {
+      "source": "/link/switch-to-createroot",
+      "destination": "/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis",
+      "permanent": false
+    },
+    {
+      "source": "/link/error-boundaries",
+      "destination": "/reference/react/Component#catching-rendering-errors-with-an-error-boundary",
+      "permanent": false
+    },
+    {
+      "source": "/link/strict-mode-find-node",
+      "destination": "https://18.react.dev/reference/react-dom/findDOMNode#alternatives",
+      "permanent": false
+    },
+    {
+      "source": "/link/rules-of-hooks",
+      "destination": "/warnings/invalid-hook-call-warning",
+      "permanent": false
+    },
+    {
+      "source": "/link/event-pooling",
+      "destination": "https://legacy.reactjs.org/docs/legacy-event-pooling.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/legacy-context",
+      "destination": "https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-removing-legacy-context",
+      "permanent": false
+    },
+    {
+      "source": "/link/crossorigin-error",
+      "destination": "https://legacy.reactjs.org/docs/cross-origin-errors.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/react-polyfills",
+      "destination": "https://legacy.reactjs.org/docs/javascript-environment-requirements.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/wrap-tests-with-act",
+      "destination": "https://legacy.reactjs.org/docs/test-utils.html#act",
+      "permanent": false
+    },
+    {
+      "source": "/link/refs-must-have-owner",
+      "destination": "https://legacy.reactjs.org/warnings/refs-must-have-owner.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/derived-state",
+      "destination": "https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/strict-mode-string-ref",
+      "destination": "https://legacy.reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs",
+      "permanent": false
+    },
+    {
+      "source": "/link/perf-use-production-build",
+      "destination": "https://legacy.reactjs.org/docs/optimizing-performance.html#use-the-production-build",
+      "permanent": false
+    },
+    {
+      "source": "/link/unsafe-component-lifecycles",
+      "destination": "https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/test-utils-mock-component",
+      "destination": "https://gist.github.com/bvaughn/fbf41b3f895bf2d297935faa5525eee9",
+      "permanent": false
+    },
+    {
+      "source": "/link/attribute-behavior",
+      "destination": "https://legacy.reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html#changes-in-detail",
+      "permanent": false
+    },
+    {
+      "source": "/link/react-devtools-faq",
+      "destination": "https://github.com/facebook/react/tree/main/packages/react-devtools#faq",
+      "permanent": false
+    },
+    {
+      "source": "/link/setstate-in-render",
+      "destination": "https://github.com/facebook/react/issues/18178#issuecomment-595846312",
+      "permanent": false
+    },
+    {
+      "source": "/link/new-jsx-transform",
+      "destination": "https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html",
+      "permanent": false
+    },
+    {
+      "source": "/warnings/version-mismatch",
+      "destination": "/warnings/invalid-hook-call-warning#mismatching-versions-of-react-and-react-dom",
+      "permanent": false
+    },
+    {
+      "source": "/reference/react/directives",
+      "destination": "/reference/rsc/directives",
+      "permanent": true
+    },
+    {
+      "source": "/reference/react/use-client",
+      "destination": "/reference/rsc/use-client",
+      "permanent": true
+    },
+    {
+      "source": "/reference/react/use-server",
+      "destination": "/reference/rsc/use-server",
+      "permanent": true
+    },
+    {
+      "source": "/reference/rsc/server-actions",
+      "destination": "/reference/rsc/server-functions",
+      "permanent": true
+    },
+    {
+      "source": "/reference/react-dom/findDOMNode",
+      "destination": "https://18.react.dev/reference/react-dom/findDOMNode",
+      "permanent": true
+    },
+    {
+      "source": "/reference/react/createFactory",
+      "destination": "https://18.react.dev/reference/react/createFactory",
+      "permanent": true
+    },
+    {
+      "source": "/reference/react-dom/render",
+      "destination": "https://18.react.dev/reference/react-dom/render",
+      "permanent": true
+    },
+    {
+      "source": "/reference/react-dom/hydrate",
+      "destination": "https://18.react.dev/reference/react-dom/hydrate",
+      "permanent": true
+    },
+    {
+      "source": "/reference/react-dom/unmountComponentAtNode",
+      "destination": "https://18.react.dev/reference/react-dom/unmountComponentAtNode",
+      "permanent": true
+    },
+    {
+      "source": "/reference/react-dom/server/renderToStaticNodeStream",
+      "destination": "https://18.react.dev/reference/react-dom/server/renderToStaticNodeStream",
+      "permanent": true
+    },
+    {
+      "source": "/reference/react-dom/server/renderToNodeStream",
+      "destination": "https://18.react.dev/reference/react-dom/server/renderToNodeStream",
+      "permanent": true
+    },
+    {
+      "source": "/blog/2024/04/25/react-19",
+      "destination": "/blog/2024/12/05/react-19",
+      "permanent": true
+    },
+    {
+      "source": "/feed.xml",
+      "destination": "/rss.xml",
+      "permanent": true
     }
   ],
   "headers": [
diff --git a/yarn.lock b/yarn.lock
index 07b6a61d6..2f6d76afa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,7 @@
 # yarn lockfile v1
 
 
+<<<<<<< HEAD
 "@aashutoshrathi/word-wrap@^1.2.3":
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"
@@ -11,16 +12,24 @@
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/@algolia/autocomplete-core/-/autocomplete-core-1.2.2.tgz#c121e70c78fd0175c989a219918124ad7758e48b"
   integrity sha512-JOQaURze45qVa8OOFDh+ozj2a/ObSRsVyz6Zd0aiBeej+RSTqrr1hDVpGNbbXYLW26G5ujuc9QIdH+rBHn95nw==
+=======
+"@algolia/autocomplete-core@1.9.3":
+  version "1.9.3"
+  resolved "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.9.3.tgz"
+  integrity sha512-009HdfugtGCdC4JdXUbVJClA0q0zh24yyePn+KUGk3rP7j8FEe/m5Yo/z65gn6nP/cM39PxpzqKrL7A6fP6PPw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
-    "@algolia/autocomplete-shared" "1.2.2"
+    "@algolia/autocomplete-plugin-algolia-insights" "1.9.3"
+    "@algolia/autocomplete-shared" "1.9.3"
 
-"@algolia/autocomplete-preset-algolia@1.2.2":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.2.2.tgz#da734ef9e42a5f64cdad2dfc81c4e9fbf805d976"
-  integrity sha512-AZkh+bAMaJDzMZTelFOXJTJqkp5VPGH8W3n0B+Ggce7DdozlMRsDLguKTCQAkZ0dJ1EbBPyFL5ztL/JImB137Q==
+"@algolia/autocomplete-plugin-algolia-insights@1.9.3":
+  version "1.9.3"
+  resolved "https://registry.npmjs.org/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.9.3.tgz"
+  integrity sha512-a/yTUkcO/Vyy+JffmAnTWbr4/90cLzw+CC3bRbhnULr/EM0fGNvM13oQQ14f2moLMcVDyAx/leczLlAOovhSZg==
   dependencies:
-    "@algolia/autocomplete-shared" "1.2.2"
+    "@algolia/autocomplete-shared" "1.9.3"
 
+<<<<<<< HEAD
 "@algolia/autocomplete-shared@1.2.2":
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/@algolia/autocomplete-shared/-/autocomplete-shared-1.2.2.tgz#ff25dc308f2a296b2b9b325f1e3b57498eea3e0c"
@@ -129,35 +138,184 @@
     "@algolia/cache-common" "4.22.1"
     "@algolia/logger-common" "4.22.1"
     "@algolia/requester-common" "4.22.1"
+=======
+"@algolia/autocomplete-preset-algolia@1.9.3":
+  version "1.9.3"
+  resolved "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.9.3.tgz"
+  integrity sha512-d4qlt6YmrLMYy95n5TB52wtNDr6EgAIPH81dvvvW8UmuWRgxEtY0NJiPwl/h95JtG2vmRM804M0DSwMCNZlzRA==
+  dependencies:
+    "@algolia/autocomplete-shared" "1.9.3"
+
+"@algolia/autocomplete-shared@1.9.3":
+  version "1.9.3"
+  resolved "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.9.3.tgz"
+  integrity sha512-Wnm9E4Ye6Rl6sTTqjoymD+l8DjSTHsHboVRYrKgEt8Q7UHm9nYbqhN/i0fhUYA3OAEH7WA8x3jfpnmJm3rKvaQ==
+
+"@algolia/cache-browser-local-storage@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.24.0.tgz"
+  integrity sha512-t63W9BnoXVrGy9iYHBgObNXqYXM3tYXCjDSHeNwnsc324r4o5UiVKUiAB4THQ5z9U5hTj6qUvwg/Ez43ZD85ww==
+  dependencies:
+    "@algolia/cache-common" "4.24.0"
+
+"@algolia/cache-common@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.24.0.tgz"
+  integrity sha512-emi+v+DmVLpMGhp0V9q9h5CdkURsNmFC+cOS6uK9ndeJm9J4TiqSvPYVu+THUP8P/S08rxf5x2P+p3CfID0Y4g==
+
+"@algolia/cache-in-memory@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.24.0.tgz"
+  integrity sha512-gDrt2so19jW26jY3/MkFg5mEypFIPbPoXsQGQWAi6TrCPsNOSEYepBMPlucqWigsmEy/prp5ug2jy/N3PVG/8w==
+  dependencies:
+    "@algolia/cache-common" "4.24.0"
+
+"@algolia/client-account@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.24.0.tgz"
+  integrity sha512-adcvyJ3KjPZFDybxlqnf+5KgxJtBjwTPTeyG2aOyoJvx0Y8dUQAEOEVOJ/GBxX0WWNbmaSrhDURMhc+QeevDsA==
+  dependencies:
+    "@algolia/client-common" "4.24.0"
+    "@algolia/client-search" "4.24.0"
+    "@algolia/transporter" "4.24.0"
+
+"@algolia/client-analytics@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.24.0.tgz"
+  integrity sha512-y8jOZt1OjwWU4N2qr8G4AxXAzaa8DBvyHTWlHzX/7Me1LX8OayfgHexqrsL4vSBcoMmVw2XnVW9MhL+Y2ZDJXg==
+  dependencies:
+    "@algolia/client-common" "4.24.0"
+    "@algolia/client-search" "4.24.0"
+    "@algolia/requester-common" "4.24.0"
+    "@algolia/transporter" "4.24.0"
+
+"@algolia/client-common@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.24.0.tgz"
+  integrity sha512-bc2ROsNL6w6rqpl5jj/UywlIYC21TwSSoFHKl01lYirGMW+9Eek6r02Tocg4gZ8HAw3iBvu6XQiM3BEbmEMoiA==
+  dependencies:
+    "@algolia/requester-common" "4.24.0"
+    "@algolia/transporter" "4.24.0"
+
+"@algolia/client-personalization@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.24.0.tgz"
+  integrity sha512-l5FRFm/yngztweU0HdUzz1rC4yoWCFo3IF+dVIVTfEPg906eZg5BOd1k0K6rZx5JzyyoP4LdmOikfkfGsKVE9w==
+  dependencies:
+    "@algolia/client-common" "4.24.0"
+    "@algolia/requester-common" "4.24.0"
+    "@algolia/transporter" "4.24.0"
+
+"@algolia/client-search@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.24.0.tgz"
+  integrity sha512-uRW6EpNapmLAD0mW47OXqTP8eiIx5F6qN9/x/7HHO6owL3N1IXqydGwW5nhDFBrV+ldouro2W1VX3XlcUXEFCA==
+  dependencies:
+    "@algolia/client-common" "4.24.0"
+    "@algolia/requester-common" "4.24.0"
+    "@algolia/transporter" "4.24.0"
+
+"@algolia/logger-common@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.24.0.tgz"
+  integrity sha512-LLUNjkahj9KtKYrQhFKCzMx0BY3RnNP4FEtO+sBybCjJ73E8jNdaKJ/Dd8A/VA4imVHP5tADZ8pn5B8Ga/wTMA==
+
+"@algolia/logger-console@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.24.0.tgz"
+  integrity sha512-X4C8IoHgHfiUROfoRCV+lzSy+LHMgkoEEU1BbKcsfnV0i0S20zyy0NLww9dwVHUWNfPPxdMU+/wKmLGYf96yTg==
+  dependencies:
+    "@algolia/logger-common" "4.24.0"
+
+"@algolia/recommend@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.npmjs.org/@algolia/recommend/-/recommend-4.24.0.tgz"
+  integrity sha512-P9kcgerfVBpfYHDfVZDvvdJv0lEoCvzNlOy2nykyt5bK8TyieYyiD0lguIJdRZZYGre03WIAFf14pgE+V+IBlw==
+  dependencies:
+    "@algolia/cache-browser-local-storage" "4.24.0"
+    "@algolia/cache-common" "4.24.0"
+    "@algolia/cache-in-memory" "4.24.0"
+    "@algolia/client-common" "4.24.0"
+    "@algolia/client-search" "4.24.0"
+    "@algolia/logger-common" "4.24.0"
+    "@algolia/logger-console" "4.24.0"
+    "@algolia/requester-browser-xhr" "4.24.0"
+    "@algolia/requester-common" "4.24.0"
+    "@algolia/requester-node-http" "4.24.0"
+    "@algolia/transporter" "4.24.0"
+
+"@algolia/requester-browser-xhr@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.24.0.tgz"
+  integrity sha512-Z2NxZMb6+nVXSjF13YpjYTdvV3032YTBSGm2vnYvYPA6mMxzM3v5rsCiSspndn9rzIW4Qp1lPHBvuoKJV6jnAA==
+  dependencies:
+    "@algolia/requester-common" "4.24.0"
+
+"@algolia/requester-common@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.24.0.tgz"
+  integrity sha512-k3CXJ2OVnvgE3HMwcojpvY6d9kgKMPRxs/kVohrwF5WMr2fnqojnycZkxPoEg+bXm8fi5BBfFmOqgYztRtHsQA==
+
+"@algolia/requester-node-http@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.24.0.tgz"
+  integrity sha512-JF18yTjNOVYvU/L3UosRcvbPMGT9B+/GQWNWnenIImglzNVGpyzChkXLnrSf6uxwVNO6ESGu6oN8MqcGQcjQJw==
+  dependencies:
+    "@algolia/requester-common" "4.24.0"
+
+"@algolia/transporter@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.24.0.tgz"
+  integrity sha512-86nI7w6NzWxd1Zp9q3413dRshDqAzSbsQjhcDhPIatEFiZrL1/TjnHL8S7jVKFePlIMzDsZWXAXwXzcok9c5oA==
+  dependencies:
+    "@algolia/cache-common" "4.24.0"
+    "@algolia/logger-common" "4.24.0"
+    "@algolia/requester-common" "4.24.0"
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 "@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"
+  resolved "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz"
   integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
 
+<<<<<<< HEAD
 "@ampproject/remapping@^2.2.0":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.1.tgz#99e8e11851128b8702cd57c33684f1d0f260b630"
   integrity sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==
+=======
+"@ampproject/remapping@^2.1.0":
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz"
+  integrity sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
 "@babel/code-frame@7.12.11":
   version "7.12.11"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f"
+  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz"
   integrity sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==
   dependencies:
     "@babel/highlight" "^7.10.4"
 
+<<<<<<< HEAD
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.23.5":
   version "7.23.5"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.23.5.tgz#9009b69a8c602293476ad598ff53e4562e15c244"
   integrity sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==
+=======
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz"
+  integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@babel/highlight" "^7.23.4"
     chalk "^2.4.2"
 
+<<<<<<< HEAD
 "@babel/compat-data@^7.23.5":
   version "7.23.5"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.23.5.tgz#ffb878728bb6bdcb6f4510aa51b1be9afb8cfd98"
@@ -167,6 +325,24 @@
   version "7.23.9"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.23.9.tgz#b028820718000f267870822fec434820e9b1e4d1"
   integrity sha512-5q0175NOjddqpvvzU+kDiSOAk4PfdO6FvwCWoQ6RO7rTzEe8vlo+4HVfcnAREhD4npMs0e9uZypjTwzZPCf/cw==
+=======
+"@babel/code-frame@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz"
+  integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==
+  dependencies:
+    "@babel/highlight" "^7.18.6"
+
+"@babel/compat-data@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.19.0.tgz"
+  integrity sha512-y5rqgTTPTmaF5e2nVhOxw+Ur9HDJLsWb6U/KpgUzRZEdPfE6VOubXBKLdbcUTijzRptednSBDQbYZBOSqJxpJw==
+
+"@babel/core@^7.12.9":
+  version "7.19.0"
+  resolved "https://registry.npmjs.org/@babel/core/-/core-7.19.0.tgz"
+  integrity sha512-reM4+U7B9ss148rh2n1Qs9ASS+w94irYXga7c2jaQv9RVzpS7Mv1a9rnYYwuDa45G+DkORt9g6An2k/V4d9LbQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@ampproject/remapping" "^2.2.0"
     "@babel/code-frame" "^7.23.5"
@@ -184,27 +360,59 @@
     json5 "^2.2.3"
     semver "^6.3.1"
 
+<<<<<<< HEAD
 "@babel/generator@^7.23.6":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.6.tgz#9e1fca4811c77a10580d17d26b57b036133f3c2e"
   integrity sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==
   dependencies:
     "@babel/types" "^7.23.6"
+=======
+"@babel/generator@^7.16.8":
+  version "7.16.8"
+  resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.16.8.tgz"
+  integrity sha512-1ojZwE9+lOXzcWdWmO6TbUzDfqLD39CmEhN8+2cX9XkDo5yW1OpgfejfliysR2AWLpMamTiOiAp/mtroaymhpw==
+  dependencies:
+    "@babel/types" "^7.16.8"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
+"@babel/generator@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.19.0.tgz"
+  integrity sha512-S1ahxf1gZ2dpoiFgA+ohK9DIpz50bJ0CWs7Zlzb54Z4sG8qmdIrGrVqmy1sAtTVRb+9CU6U8VqT9L0Zj7hxHVg==
+  dependencies:
+    "@babel/types" "^7.19.0"
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
     "@jridgewell/gen-mapping" "^0.3.2"
     "@jridgewell/trace-mapping" "^0.3.17"
     jsesc "^2.5.1"
 
+<<<<<<< HEAD
 "@babel/helper-annotate-as-pure@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz#e7f06737b197d580a01edf75d97e2c8be99d3882"
   integrity sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==
+=======
+"@babel/helper-annotate-as-pure@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz"
+  integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@babel/types" "^7.22.5"
 
+<<<<<<< HEAD
 "@babel/helper-compilation-targets@^7.23.6":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz#4d79069b16cbcf1461289eccfbbd81501ae39991"
   integrity sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==
+=======
+"@babel/helper-compilation-targets@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.19.0.tgz"
+  integrity sha512-Ai5bNWXIvwDvWM7njqsG3feMlL9hCVQsPYXodsZyLwshYkZVJt59Gftau4VrE8S9IT9asd2uSP1hG6wCNw+sXA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@babel/compat-data" "^7.23.5"
     "@babel/helper-validator-option" "^7.23.5"
@@ -212,6 +420,7 @@
     lru-cache "^5.1.1"
     semver "^6.3.1"
 
+<<<<<<< HEAD
 "@babel/helper-environment-visitor@^7.22.20":
   version "7.22.20"
   resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167"
@@ -221,28 +430,60 @@
   version "7.23.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759"
   integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==
+=======
+"@babel/helper-environment-visitor@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz"
+  integrity sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@babel/template" "^7.22.15"
     "@babel/types" "^7.23.0"
 
+<<<<<<< HEAD
 "@babel/helper-hoist-variables@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz#c01a007dac05c085914e8fb652b339db50d823bb"
   integrity sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==
+=======
+"@babel/helper-environment-visitor@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz"
+  integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==
+
+"@babel/helper-function-name@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.16.7.tgz"
+  integrity sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@babel/types" "^7.22.5"
 
+<<<<<<< HEAD
 "@babel/helper-module-imports@^7.22.15":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0"
   integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==
+=======
+"@babel/helper-function-name@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz"
+  integrity sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@babel/types" "^7.22.15"
 
+<<<<<<< HEAD
 "@babel/helper-module-transforms@^7.23.3":
   version "7.23.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz#d7d12c3c5d30af5b3c0fcab2a6d5217773e2d0f1"
   integrity sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==
+=======
+"@babel/helper-get-function-arity@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz"
+  integrity sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@babel/helper-environment-visitor" "^7.22.20"
     "@babel/helper-module-imports" "^7.22.15"
@@ -250,6 +491,7 @@
     "@babel/helper-split-export-declaration" "^7.22.6"
     "@babel/helper-validator-identifier" "^7.22.20"
 
+<<<<<<< HEAD
 "@babel/helper-plugin-utils@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz#dd7ee3735e8a313b9f7b05a773d892e88e6d7295"
@@ -259,16 +501,30 @@
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz#4938357dc7d782b80ed6dbb03a0fba3d22b1d5de"
   integrity sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==
+=======
+"@babel/helper-hoist-variables@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz"
+  integrity sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@babel/types" "^7.22.5"
 
+<<<<<<< HEAD
 "@babel/helper-split-export-declaration@^7.22.6":
   version "7.22.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz#322c61b7310c0997fe4c323955667f18fcefb91c"
   integrity sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==
+=======
+"@babel/helper-hoist-variables@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz"
+  integrity sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@babel/types" "^7.22.5"
 
+<<<<<<< HEAD
 "@babel/helper-string-parser@^7.23.4":
   version "7.23.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz#9478c707febcbbe1ddb38a3d91a2e054ae622d83"
@@ -288,11 +544,18 @@
   version "7.23.9"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.23.9.tgz#c3e20bbe7f7a7e10cb9b178384b4affdf5995c7d"
   integrity sha512-87ICKgU5t5SzOT7sBMfCOZQ2rHjRU+Pcb9BoILMYz600W6DkVRLFBPwQ18gwUVvggqXivaUakpnxWQGbpywbBQ==
+=======
+"@babel/helper-module-imports@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz"
+  integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@babel/template" "^7.23.9"
     "@babel/traverse" "^7.23.9"
     "@babel/types" "^7.23.9"
 
+<<<<<<< HEAD
 "@babel/highlight@^7.10.4", "@babel/highlight@^7.23.4":
   version "7.23.4"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.23.4.tgz#edaadf4d8232e1a961432db785091207ead0621b"
@@ -318,29 +581,160 @@
   version "7.23.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.23.3.tgz#661ae831b9577e52be57dd8356b734f9700b53b4"
   integrity sha512-aVS0F65LKsdNOtcz6FRCpE4OgsP2OFnW46qNxNIX9h3wuzaNcSQsJysuMwqSibC98HPrf2vCgtxKNwS0DAlgcA==
+=======
+"@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.19.0.tgz"
+  integrity sha512-3HBZ377Fe14RbLIA+ac3sY4PTgpxHVkFrESaWhoI5PuyXPBBX8+C34qblV9G89ZtycGJCmCI/Ut+VUDK4bltNQ==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-simple-access" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/helper-validator-identifier" "^7.18.6"
+    "@babel/template" "^7.18.10"
+    "@babel/traverse" "^7.19.0"
+    "@babel/types" "^7.19.0"
+
+"@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.19.0.tgz"
+  integrity sha512-40Ryx7I8mT+0gaNxm8JGTZFUITNqdLAgdg0hXzeVZxVD6nFsdhQvip6v8dqkRHzsz1VFpFAaOCHNn0vKBL7Czw==
+
+"@babel/helper-simple-access@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.18.6.tgz"
+  integrity sha512-iNpIgTgyAvDQpDj76POqg+YEt8fPxx3yaNBg3S30dxNKm2SWfYhD0TGrK/Eu9wHpUW63VQU894TsTg+GLbUa1g==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-split-export-declaration@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz"
+  integrity sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-split-export-declaration@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz"
+  integrity sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-string-parser@^7.18.10":
+  version "7.18.10"
+  resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.18.10.tgz"
+  integrity sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw==
+
+"@babel/helper-validator-identifier@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz"
+  integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
+
+"@babel/helper-validator-identifier@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz"
+  integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==
+
+"@babel/helper-validator-option@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz"
+  integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==
+
+"@babel/helpers@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.npmjs.org/@babel/helpers/-/helpers-7.19.0.tgz"
+  integrity sha512-DRBCKGwIEdqY3+rPJgG/dKfQy9+08rHIAJx8q2p+HSWP87s2HCrQmaAMMyMll2kIXKCW0cO1RdQskx15Xakftg==
+  dependencies:
+    "@babel/template" "^7.18.10"
+    "@babel/traverse" "^7.19.0"
+    "@babel/types" "^7.19.0"
+
+"@babel/highlight@^7.10.4", "@babel/highlight@^7.16.7":
+  version "7.16.10"
+  resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.10.tgz"
+  integrity sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@babel/highlight@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz"
+  integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.18.6"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@babel/parser@^7.16.10", "@babel/parser@^7.16.7", "@babel/parser@^7.7.0":
+  version "7.16.12"
+  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.16.12.tgz"
+  integrity sha512-VfaV15po8RiZssrkPweyvbGVSe4x2y+aciFCgn0n0/SJMR22cwofRV1mtnJQYcSB1wUTaA/X1LnA3es66MCO5A==
+
+"@babel/parser@^7.18.10", "@babel/parser@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.19.0.tgz"
+  integrity sha512-74bEXKX2h+8rrfQUfsBfuZZHzsEs6Eql4pqy/T4Nn6Y9wNPggQOqD6z6pn5Bl8ZfysKouFZT/UXEH94ummEeQw==
+
+"@babel/plugin-syntax-jsx@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz"
+  integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-modules-commonjs@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.18.6.tgz"
+  integrity sha512-Qfv2ZOWikpvmedXQJDSbxNqy7Xr/j2Y8/KfijM0iJyKkBTmWuvCA1yeH1yDM7NJhBW/2aXxeucLj6i80/LAJ/Q==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@babel/helper-module-transforms" "^7.23.3"
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/helper-simple-access" "^7.22.5"
 
+<<<<<<< HEAD
 "@babel/plugin-transform-react-display-name@^7.23.3":
   version "7.23.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.23.3.tgz#70529f034dd1e561045ad3c8152a267f0d7b6200"
   integrity sha512-GnvhtVfA2OAtzdX58FJxU19rhoGeQzyVndw3GgtdECQvQFXPEZIOVULHVZGAYmOgmqjXpVpfocAbSjh99V/Fqw==
+=======
+"@babel/plugin-transform-react-display-name@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.18.6.tgz"
+  integrity sha512-TV4sQ+T013n61uMoygyMRm+xf04Bd5oqFpv2jAEQwSZ8NwQA7zeRPg1LMVg2PWi3zWBz+CLKD+v5bcpZ/BS0aA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
+<<<<<<< HEAD
 "@babel/plugin-transform-react-jsx-development@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.22.5.tgz#e716b6edbef972a92165cd69d92f1255f7e73e87"
   integrity sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A==
+=======
+"@babel/plugin-transform-react-jsx-development@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.18.6.tgz"
+  integrity sha512-SA6HEjwYFKF7WDjWcMcMGUimmw/nhNRDWxr+KaLSCrkD/LMDBvWRmHAYgE1HDeF8KUuI8OAu+RT6EOtKxSW2qA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@babel/plugin-transform-react-jsx" "^7.22.5"
 
+<<<<<<< HEAD
 "@babel/plugin-transform-react-jsx@^7.22.15", "@babel/plugin-transform-react-jsx@^7.22.5":
   version "7.23.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.23.4.tgz#393f99185110cea87184ea47bcb4a7b0c2e39312"
   integrity sha512-5xOpoPguCZCRbo/JeHlloSkTA8Bld1J/E1/kLfD1nsuiW1m8tduTA1ERCgIZokDflX/IBzKcqR3l7VlRgiIfHA==
+=======
+"@babel/plugin-transform-react-jsx@^7.18.6":
+  version "7.19.0"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.19.0.tgz"
+  integrity sha512-UVEvX3tXie3Szm3emi1+G63jyw1w5IcMY0FSKM+CRnKRI5Mr1YbCNgsSTwoTwKphQEG9P+QqmuRFneJPZuHNhg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.22.5"
     "@babel/helper-module-imports" "^7.22.15"
@@ -348,18 +742,31 @@
     "@babel/plugin-syntax-jsx" "^7.23.3"
     "@babel/types" "^7.23.4"
 
+<<<<<<< HEAD
 "@babel/plugin-transform-react-pure-annotations@^7.23.3":
   version "7.23.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.23.3.tgz#fabedbdb8ee40edf5da96f3ecfc6958e3783b93c"
   integrity sha512-qMFdSS+TUhB7Q/3HVPnEdYJDQIk57jkntAwSuz9xfSE4n+3I+vHYCli3HoHawN1Z3RfCz/y1zXA/JXjG6cVImQ==
+=======
+"@babel/plugin-transform-react-pure-annotations@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.18.6.tgz"
+  integrity sha512-I8VfEPg9r2TRDdvnHgPepTKvuRomzA8+u+nhY7qSI1fR2hRNebasZEETLyM5mAUr0Ku56OkXJ0I7NHJnO6cJiQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.22.5"
     "@babel/helper-plugin-utils" "^7.22.5"
 
 "@babel/preset-react@^7.18.6":
+<<<<<<< HEAD
   version "7.23.3"
   resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.23.3.tgz#f73ca07e7590f977db07eb54dbe46538cc015709"
   integrity sha512-tbkHOS9axH6Ysf2OUEqoSZ6T3Fa2SrNH6WTWSPBboxKzdxNc9qOICeLXkNG0ZEwbQ1HY8liwOce4aN/Ceyuq6w==
+=======
+  version "7.18.6"
+  resolved "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.18.6.tgz"
+  integrity sha512-zXr6atUmyYdiWRVLOZahakYmOBHtWc2WGCkP8PYTgZi0iJXDY2CN180TdrIW4OGOAdLc7TifzDIvtx6izaRIzg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/helper-validator-option" "^7.22.15"
@@ -368,22 +775,37 @@
     "@babel/plugin-transform-react-jsx-development" "^7.22.5"
     "@babel/plugin-transform-react-pure-annotations" "^7.23.3"
 
+<<<<<<< HEAD
 "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2":
   version "7.23.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
   integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
+=======
+"@babel/runtime-corejs3@^7.10.2":
+  version "7.16.8"
+  resolved "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.16.8.tgz"
+  integrity sha512-3fKhuICS1lMz0plI5ktOE/yEtBRMVxplzRkdn6mJQ197XiY0JnrzYV0+Mxozq3JZ8SBV9Ecurmw1XsGbwOf+Sg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     regenerator-runtime "^0.14.0"
 
+<<<<<<< HEAD
 "@babel/template@^7.22.15", "@babel/template@^7.23.9":
   version "7.23.9"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.23.9.tgz#f881d0487cba2828d3259dcb9ef5005a9731011a"
   integrity sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==
+=======
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.16.3":
+  version "7.16.7"
+  resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz"
+  integrity sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@babel/code-frame" "^7.23.5"
     "@babel/parser" "^7.23.9"
     "@babel/types" "^7.23.9"
 
+<<<<<<< HEAD
 "@babel/traverse@^7.23.9", "@babel/traverse@^7.7.0":
   version "7.23.9"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.9.tgz#2f9d6aead6b564669394c5ce0f9302bb65b9d950"
@@ -418,14 +840,93 @@
   version "0.19.15"
   resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-0.19.15.tgz#061f09063dc2a68668d85d7ac8430c7bc6df1a82"
   integrity sha512-GQWzvvuXxNUyaEk+5gawbAD8s51/v2Chb++nx0e2eGWrphWk42isBtzOMdc3DxrxrZtPZ55q2ldNp+6G8KJLIQ==
+=======
+"@babel/runtime@^7.13.10":
+  version "7.24.7"
+  resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.7.tgz"
+  integrity sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==
   dependencies:
-    "@codemirror/language" "^0.19.0"
-    "@codemirror/state" "^0.19.4"
-    "@codemirror/text" "^0.19.2"
-    "@codemirror/tooltip" "^0.19.12"
-    "@codemirror/view" "^0.19.0"
-    "@lezer/common" "^0.15.0"
+    regenerator-runtime "^0.14.0"
+
+"@babel/template@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz"
+  integrity sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/parser" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
+"@babel/template@^7.18.10":
+  version "7.18.10"
+  resolved "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz"
+  integrity sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/parser" "^7.18.10"
+    "@babel/types" "^7.18.10"
+
+"@babel/traverse@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.19.0.tgz"
+  integrity sha512-4pKpFRDh+utd2mbRC8JLnlsMUii3PMHjpL6a0SZ4NMZy7YFP9aXORxEhdMVOc9CpWtDF09IkciQLEhK7Ml7gRA==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.19.0"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.19.0"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/parser" "^7.19.0"
+    "@babel/types" "^7.19.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
 
+"@babel/traverse@^7.7.0":
+  version "7.16.10"
+  resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.10.tgz"
+  integrity sha512-yzuaYXoRJBGMlBhsMJoUW7G1UmSb/eXr/JHYM/MsOJgavJibLwASijW7oXBdw3NQ6T0bW7Ty5P/VarOs9cHmqw==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.16.8"
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-function-name" "^7.16.7"
+    "@babel/helper-hoist-variables" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/parser" "^7.16.10"
+    "@babel/types" "^7.16.8"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
+"@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.7.0":
+  version "7.16.8"
+  resolved "https://registry.npmjs.org/@babel/types/-/types-7.16.8.tgz"
+  integrity sha512-smN2DQc5s4M7fntyjGtyIPbRJv6wW4rU/94fmYJ7PKQuZkC0qGMHXJbg6sNGt12JmVr4k5YaptI/XtiLJBnmIg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    to-fast-properties "^2.0.0"
+
+"@babel/types@^7.18.10", "@babel/types@^7.18.6", "@babel/types@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.npmjs.org/@babel/types/-/types-7.19.0.tgz"
+  integrity sha512-YuGopBq3ke25BVSiS6fgF49Ul9gH1x70Bcr6bqRLjWCkcX8Hre1/5+z+IiWOIerRMSSEfGZVB9z9kyq7wVs9YA==
+  dependencies:
+    "@babel/helper-string-parser" "^7.18.10"
+    "@babel/helper-validator-identifier" "^7.18.6"
+    to-fast-properties "^2.0.0"
+
+"@codemirror/autocomplete@^6.0.0", "@codemirror/autocomplete@^6.4.0":
+  version "6.4.2"
+  resolved "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.4.2.tgz"
+  integrity sha512-8WE2xp+D0MpWEv5lZ6zPW1/tf4AGb358T5GWYiKEuCP8MvFfT3tH2mIF9Y2yr2e3KbHuSvsVhosiEyqCpiJhZQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.6.0"
+    "@lezer/common" "^1.0.0"
+
+<<<<<<< HEAD
 "@codemirror/closebrackets@^0.19.0":
   version "0.19.2"
   resolved "https://registry.yarnpkg.com/@codemirror/closebrackets/-/closebrackets-0.19.2.tgz#ff74dd78218cee57172623eb9ebf7b669fa6f4d4"
@@ -457,16 +958,57 @@
     "@codemirror/state" "^0.19.9"
     "@codemirror/text" "^0.19.0"
     "@codemirror/view" "^0.19.0"
-
-"@codemirror/gutter@^0.19.4", "@codemirror/gutter@^0.19.9":
-  version "0.19.9"
-  resolved "https://registry.yarnpkg.com/@codemirror/gutter/-/gutter-0.19.9.tgz#bbb69f4d49570d9c1b3f3df5d134980c516cd42b"
-  integrity sha512-PFrtmilahin1g6uL27aG5tM/rqR9DZzZYZsIrCXA5Uc2OFTFqx4owuhoU9hqfYxHp5ovfvBwQ+txFzqS4vog6Q==
-  dependencies:
-    "@codemirror/rangeset" "^0.19.0"
-    "@codemirror/state" "^0.19.0"
-    "@codemirror/view" "^0.19.23"
-
+=======
+"@codemirror/commands@^6.1.3":
+  version "6.2.2"
+  resolved "https://registry.npmjs.org/@codemirror/commands/-/commands-6.2.2.tgz"
+  integrity sha512-s9lPVW7TxXrI/7voZ+HmD/yiAlwAYn9PH5SUVSUhsxXHhv4yl5eZ3KLntSoTynfdgVYM0oIpccQEWRBQgmNZyw==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.2.0"
+    "@codemirror/view" "^6.0.0"
+    "@lezer/common" "^1.0.0"
+
+"@codemirror/lang-css@^6.0.0", "@codemirror/lang-css@^6.0.1":
+  version "6.1.1"
+  resolved "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.1.1.tgz"
+  integrity sha512-P6jdNEHyRcqqDgbvHYyC9Wxkek0rnG3a9aVSRi4a7WrjPbQtBTaOmvYpXmm13zZMAatO4Oqpac+0QZs7sy+LnQ==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@lezer/css" "^1.0.0"
+
+"@codemirror/lang-html@^6.4.0":
+  version "6.4.3"
+  resolved "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.3.tgz"
+  integrity sha512-VKzQXEC8nL69Jg2hvAFPBwOdZNvL8tMFOrdFwWpU+wc6a6KEkndJ/19R5xSaglNX6v2bttm8uIEFYxdQDcIZVQ==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/lang-css" "^6.0.0"
+    "@codemirror/lang-javascript" "^6.0.0"
+    "@codemirror/language" "^6.4.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.2.2"
+    "@lezer/common" "^1.0.0"
+    "@lezer/css" "^1.1.0"
+    "@lezer/html" "^1.3.0"
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
+
+"@codemirror/lang-javascript@^6.0.0", "@codemirror/lang-javascript@^6.1.2":
+  version "6.1.5"
+  resolved "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.1.5.tgz"
+  integrity sha512-BS2SmI1IXxWqMPhbJ0DC3eAHAK9V9XvdHMSqwvTBnmh5xFALt+cVDg7XE/A1dxdxzXYXyeqGddgqx1rQv7AYaw==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/language" "^6.6.0"
+    "@codemirror/lint" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    "@lezer/common" "^1.0.0"
+    "@lezer/javascript" "^1.0.0"
+
+<<<<<<< HEAD
 "@codemirror/highlight@^0.19.6", "@codemirror/highlight@^0.19.7":
   version "0.19.8"
   resolved "https://registry.yarnpkg.com/@codemirror/highlight/-/highlight-0.19.8.tgz#a95aee8ae4389b01f820aa79c48f7b4388087d92"
@@ -477,13 +1019,26 @@
     "@codemirror/state" "^0.19.3"
     "@codemirror/view" "^0.19.39"
     "@lezer/common" "^0.15.0"
+=======
+"@codemirror/language@^6.0.0", "@codemirror/language@^6.3.2", "@codemirror/language@^6.4.0", "@codemirror/language@^6.6.0":
+  version "6.6.0"
+  resolved "https://registry.npmjs.org/@codemirror/language/-/language-6.6.0.tgz"
+  integrity sha512-cwUd6lzt3MfNYOobdjf14ZkLbJcnv4WtndYaoBkbor/vF+rCNguMPK0IRtvZJG4dsWiaWPcK8x1VijhvSxnstg==
+  dependencies:
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    "@lezer/common" "^1.0.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
     style-mod "^4.0.0"
 
-"@codemirror/history@^0.19.0":
-  version "0.19.2"
-  resolved "https://registry.yarnpkg.com/@codemirror/history/-/history-0.19.2.tgz#25e3fda755f77ac1223a6ae6e9d7899f5919265e"
-  integrity sha512-unhP4t3N2smzmHoo/Yio6ueWi+il8gm9VKrvi6wlcdGH5fOfVDNkmjHQ495SiR+EdOG35+3iNebSPYww0vN7ow==
+"@codemirror/lint@^6.0.0":
+  version "6.2.0"
+  resolved "https://registry.npmjs.org/@codemirror/lint/-/lint-6.2.0.tgz"
+  integrity sha512-KVCECmR2fFeYBr1ZXDVue7x3q5PMI0PzcIbA+zKufnkniMBo1325t0h1jM85AKp8l3tj67LRxVpZfgDxEXlQkg==
   dependencies:
+<<<<<<< HEAD
     "@codemirror/state" "^0.19.2"
     "@codemirror/view" "^0.19.0"
 
@@ -558,12 +1113,23 @@
     "@codemirror/state" "^0.19.0"
     "@codemirror/view" "^0.19.0"
     "@lezer/common" "^0.15.0"
+=======
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    crelt "^1.0.5"
 
-"@codemirror/panel@^0.19.0":
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/@codemirror/panel/-/panel-0.19.1.tgz#bf77d27b962cf16357139e50864d0eb69d634441"
-  integrity sha512-sYeOCMA3KRYxZYJYn5PNlt9yNsjy3zTNTrbYSfVgjgL9QomIVgOJWPO5hZ2sTN8lufO6lw0vTBsIPL9MSidmBg==
+"@codemirror/state@^6.0.0", "@codemirror/state@^6.1.4", "@codemirror/state@^6.2.0":
+  version "6.2.0"
+  resolved "https://registry.npmjs.org/@codemirror/state/-/state-6.2.0.tgz"
+  integrity sha512-69QXtcrsc3RYtOtd+GsvczJ319udtBf1PTrr2KbLWM/e2CXUPnh0Nz9AUo8WfhSQ7GeL8dPVNUmhQVgpmuaNGA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
+
+"@codemirror/view@^6.0.0", "@codemirror/view@^6.2.2", "@codemirror/view@^6.6.0", "@codemirror/view@^6.7.1":
+  version "6.9.4"
+  resolved "https://registry.npmjs.org/@codemirror/view/-/view-6.9.4.tgz"
+  integrity sha512-Ov2H9gwlGUxiH94zWxlLtTlyogSFaQDIYjtSEcfzgh7MkKmKVchkmr4JbtR5zBev3jY5DVtKvUC8yjd1bKW55A==
   dependencies:
+<<<<<<< HEAD
     "@codemirror/state" "^0.19.0"
     "@codemirror/view" "^0.19.0"
 
@@ -609,44 +1175,62 @@
   version "1.20.9"
   resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-1.20.9.tgz#206cb2226f23d0292ce67218186fd0b4f0b09cf1"
   integrity sha512-Z/SXVRFzO8BOagLg6+6WQfBpAio3AZNjeposYPyoI7fxT8L9urS+G5uG/oG4vV/YkK5nmIuT7pKdTL66wMUsxA==
-  dependencies:
-    codesandbox-import-utils "^1.2.3"
-    lodash.isequal "^4.5.0"
+=======
+    "@codemirror/state" "^6.1.4"
+    style-mod "^4.0.0"
+    w3c-keyname "^2.2.4"
 
-"@codesandbox/sandpack-react@1.15.5":
-  version "1.15.5"
-  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-1.15.5.tgz#6ac1b69e64ab66cad69e194df629a826140c3d2c"
-  integrity sha512-S5iVt9l36QzQfBAbk4mS+VUiVoHdwCFil5cdYHutCAfTAzPQn+vvR7ZYrwFl/LoBChh8nH4EAMN9XTowrzQJYw==
-  dependencies:
-    "@code-hike/classer" "^0.0.0-aa6efee"
-    "@codemirror/closebrackets" "^0.19.0"
-    "@codemirror/commands" "^0.19.6"
-    "@codemirror/comment" "^0.19.0"
-    "@codemirror/gutter" "^0.19.9"
-    "@codemirror/highlight" "^0.19.6"
-    "@codemirror/history" "^0.19.0"
-    "@codemirror/lang-css" "^0.19.3"
-    "@codemirror/lang-html" "^0.19.4"
-    "@codemirror/lang-javascript" "^0.19.3"
-    "@codemirror/language" "^0.19.7"
-    "@codemirror/matchbrackets" "^0.19.3"
-    "@codemirror/state" "^0.19.6"
-    "@codemirror/view" "^0.19.32"
-    "@codesandbox/sandpack-client" "^1.12.1"
+"@codesandbox/nodebox@0.1.8":
+  version "0.1.8"
+  resolved "https://registry.npmjs.org/@codesandbox/nodebox/-/nodebox-0.1.8.tgz"
+  integrity sha512-2VRS6JDSk+M+pg56GA6CryyUSGPjBEe8Pnae0QL3jJF1mJZJVMDKr93gJRtBbLkfZN6LD/DwMtf+2L0bpWrjqg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
+  dependencies:
+    outvariant "^1.4.0"
+    strict-event-emitter "^0.4.3"
+
+"@codesandbox/sandpack-client@^2.13.2":
+  version "2.13.2"
+  resolved "https://registry.npmjs.org/@codesandbox/sandpack-client/-/sandpack-client-2.13.2.tgz"
+  integrity sha512-uAuxQOF7p8y4m7H0ojedDcWRf62xVK7UIYIJoX5LkhcV0SW1BTXcRkVNuR0/MSCSv+Og1dBeV8+Xpye9PX0quA==
+  dependencies:
+    "@codesandbox/nodebox" "0.1.8"
+    buffer "^6.0.3"
+    dequal "^2.0.2"
+    outvariant "1.4.0"
+    static-browser-server "1.0.3"
+
+"@codesandbox/sandpack-react@2.13.5":
+  version "2.13.5"
+  resolved "https://registry.npmjs.org/@codesandbox/sandpack-react/-/sandpack-react-2.13.5.tgz"
+  integrity sha512-MWzh2P/Asck0JSCKY3y7WecdUBBEqB0NFi4p+ohoZMTYqHWTaYfd7nbPlNmGIE1xcGppSZEqPVDjOpAfeQ0zFw==
+  dependencies:
+    "@codemirror/autocomplete" "^6.4.0"
+    "@codemirror/commands" "^6.1.3"
+    "@codemirror/lang-css" "^6.0.1"
+    "@codemirror/lang-html" "^6.4.0"
+    "@codemirror/lang-javascript" "^6.1.2"
+    "@codemirror/language" "^6.3.2"
+    "@codemirror/state" "^6.2.0"
+    "@codemirror/view" "^6.7.1"
+    "@codesandbox/sandpack-client" "^2.13.2"
+    "@lezer/highlight" "^1.1.3"
     "@react-hook/intersection-observer" "^3.1.1"
     "@stitches/core" "^1.2.6"
+    anser "^2.1.1"
     clean-set "^1.1.2"
-    codesandbox-import-util-types "^2.2.3"
-    lodash.isequal "^4.5.0"
+    dequal "^2.0.2"
+    escape-carriage "^1.3.1"
     lz-string "^1.4.4"
     react-devtools-inline "4.4.0"
     react-is "^17.0.2"
 
 "@csstools/convert-colors@^1.4.0":
   version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
+  resolved "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz"
   integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==
 
+<<<<<<< HEAD
 "@discoveryjs/json-ext@0.5.7":
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
@@ -656,16 +1240,22 @@
   version "3.0.0-alpha.41"
   resolved "https://registry.yarnpkg.com/@docsearch/css/-/css-3.0.0-alpha.41.tgz#c5c8e803541bd157ad86e764c2c1e9f1b5a68592"
   integrity sha512-AP1jqcF/9jCrm4s0lcES3QAtHueyipKjd14L/pguk0CZYK7uI7hC0FWodmRmrgK3/HST9jiHa1waUMR6ZYedlQ==
-
-"@docsearch/react@3.0.0-alpha.41":
-  version "3.0.0-alpha.41"
-  resolved "https://registry.yarnpkg.com/@docsearch/react/-/react-3.0.0-alpha.41.tgz#07e85a664e85f251ce3d13153abce65a4d5997ab"
-  integrity sha512-UL0Gdter/NUea04lGuBGH0GzQ2/2q/hBfn7Rjo71rRKbjtfkQCM92leJ9tZ+9j9sFLoyuHb9XMm/B8vCjWwTEg==
-  dependencies:
-    "@algolia/autocomplete-core" "1.2.2"
-    "@algolia/autocomplete-preset-algolia" "1.2.2"
-    "@docsearch/css" "3.0.0-alpha.41"
-    algoliasearch "^4.0.0"
+=======
+"@docsearch/css@3.6.1", "@docsearch/css@^3.6.1":
+  version "3.6.1"
+  resolved "https://registry.npmjs.org/@docsearch/css/-/css-3.6.1.tgz"
+  integrity sha512-VtVb5DS+0hRIprU2CO6ZQjK2Zg4QU5HrDM1+ix6rT0umsYvFvatMAnf97NHZlVWDaaLlx7GRfR/7FikANiM2Fg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
+
+"@docsearch/react@^3.6.1":
+  version "3.6.1"
+  resolved "https://registry.npmjs.org/@docsearch/react/-/react-3.6.1.tgz"
+  integrity sha512-qXZkEPvybVhSXj0K7U3bXc233tk5e8PfhoZ6MhPOiik/qUQxYC+Dn9DnoS7CxHQQhHfCvTiN0eY9M12oRghEXw==
+  dependencies:
+    "@algolia/autocomplete-core" "1.9.3"
+    "@algolia/autocomplete-preset-algolia" "1.9.3"
+    "@docsearch/css" "3.6.1"
+    algoliasearch "^4.19.1"
 
 "@eslint-community/eslint-utils@^4.2.0":
   version "4.4.0"
@@ -681,7 +1271,7 @@
 
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
+  resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz"
   integrity sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==
   dependencies:
     ajv "^6.12.4"
@@ -694,17 +1284,50 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@floating-ui/core@^1.0.0":
+  version "1.6.2"
+  resolved "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.2.tgz"
+  integrity sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==
+  dependencies:
+    "@floating-ui/utils" "^0.2.0"
+
+"@floating-ui/dom@^1.0.0":
+  version "1.6.5"
+  resolved "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz"
+  integrity sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==
+  dependencies:
+    "@floating-ui/core" "^1.0.0"
+    "@floating-ui/utils" "^0.2.0"
+
+"@floating-ui/react-dom@^2.0.0":
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.0.tgz"
+  integrity sha512-lNzj5EQmEKn5FFKc04+zasr09h/uX8RtJRNj5gUXsSQIXHVWTVh+hVAg1vOMCexkX8EgvemMvIFpQfkosnVNyA==
+  dependencies:
+    "@floating-ui/dom" "^1.0.0"
+
+"@floating-ui/utils@^0.2.0":
+  version "0.2.2"
+  resolved "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz"
+  integrity sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==
+
 "@headlessui/react@^1.7.0":
+<<<<<<< HEAD
   version "1.7.18"
   resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.18.tgz#30af4634d2215b2ca1aa29d07f33d02bea82d9d7"
   integrity sha512-4i5DOrzwN4qSgNsL4Si61VMkUcWbcSKueUV7sFhpHzQcSShdlHENE5+QBntMSRvHt8NyoFO2AGG8si9lq+w4zQ==
   dependencies:
     "@tanstack/react-virtual" "^3.0.0-beta.60"
     client-only "^0.0.1"
+=======
+  version "1.7.0"
+  resolved "https://registry.npmjs.org/@headlessui/react/-/react-1.7.0.tgz"
+  integrity sha512-/nDsijOXRwXVLpUBEiYuWguIBSIN3ZbKyah+KPUiD8bdIKtX1U/k+qLYUEr7NCQnSF2e4w1dr8me42ECuG3cvw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 "@humanwhocodes/config-array@^0.5.0":
   version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"
+  resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz"
   integrity sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==
   dependencies:
     "@humanwhocodes/object-schema" "^1.2.0"
@@ -713,13 +1336,20 @@
 
 "@humanwhocodes/object-schema@^1.2.0":
   version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
+  resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+<<<<<<< HEAD
 "@isaacs/cliui@^8.0.2":
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
   integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==
+=======
+"@jridgewell/gen-mapping@^0.1.0":
+  version "0.1.1"
+  resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz"
+  integrity sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     string-width "^5.1.2"
     string-width-cjs "npm:string-width@^4.2.0"
@@ -728,25 +1358,40 @@
     wrap-ansi "^8.1.0"
     wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
 
+<<<<<<< HEAD
 "@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2":
   version "0.3.4"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.4.tgz#9b18145d26cf33d08576cf4c7665b28554480ed7"
   integrity sha512-Oud2QPM5dHviZNn4y/WhhYKSXksv+1xLEIsNrAbGcFzUN3ubqWRFT5gwPchNc5NuzILOU4tPBDTZ4VwhL8Y7cw==
+=======
+"@jridgewell/gen-mapping@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz"
+  integrity sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@jridgewell/set-array" "^1.0.1"
     "@jridgewell/sourcemap-codec" "^1.4.10"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+<<<<<<< HEAD
 "@jridgewell/resolve-uri@^3.1.0":
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6"
   integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
+=======
+"@jridgewell/resolve-uri@^3.0.3":
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz"
+  integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 "@jridgewell/set-array@^1.0.1":
   version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
+  resolved "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz"
   integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
 
+<<<<<<< HEAD
 "@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14":
   version "1.4.15"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
@@ -756,47 +1401,103 @@
   version "0.3.23"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.23.tgz#afc96847f3f07841477f303eed687707a5aacd80"
   integrity sha512-9/4foRoUKp8s96tSkh8DlAAc5A0Ty8vLXld+l9gjKKY6ckwI8G15f0hskGmuLZu78ZlGa1vtsfOa+lnB4vG6Jg==
+=======
+"@jridgewell/sourcemap-codec@^1.4.10":
+  version "1.4.14"
+  resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz"
+  integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
+
+"@jridgewell/trace-mapping@^0.3.9":
+  version "0.3.15"
+  resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.15.tgz"
+  integrity sha512-oWZNOULl+UbhsgB51uuZzglikfIKSUBO/M9W2OfEjn7cmqoAiCgmv9lyACTUacZwBz0ITnJ2NqjU8Tx0DHL88g==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+<<<<<<< HEAD
 "@lezer/common@^0.15.0", "@lezer/common@^0.15.5":
   version "0.15.12"
   resolved "https://registry.yarnpkg.com/@lezer/common/-/common-0.15.12.tgz#2f21aec551dd5fd7d24eb069f90f54d5bc6ee5e9"
   integrity sha512-edfwCxNLnzq5pBA/yaIhwJ3U3Kz8VAUOTRg0hhxaizaI1N+qxV7EXDv/kLCkLeq2RzSFvxexlaj5Mzfn2kY0Ig==
+=======
+"@lezer/common@^1.0.0":
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/@lezer/common/-/common-1.0.2.tgz"
+  integrity sha512-SVgiGtMnMnW3ActR8SXgsDhw7a0w0ChHSYAyAUxxrOiJ1OqYWEKk/xJd84tTSPo1mo6DXLObAJALNnd0Hrv7Ng==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
-"@lezer/css@^0.15.2":
-  version "0.15.2"
-  resolved "https://registry.yarnpkg.com/@lezer/css/-/css-0.15.2.tgz#e96995da67df90bb4b191aaa8a486349cca5d8e7"
-  integrity sha512-tnMOMZY0Zs6JQeVjqfmREYMV0GnmZR1NitndLWioZMD6mA7VQF/PPKPmJX1f+ZgVZQc5Am0df9mX3aiJnNJlKQ==
+"@lezer/css@^1.0.0", "@lezer/css@^1.1.0":
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/@lezer/css/-/css-1.1.1.tgz"
+  integrity sha512-mSjx+unLLapEqdOYDejnGBokB5+AiJKZVclmud0MKQOKx3DLJ5b5VTCstgDDknR6iIV4gVrN6euzsCnj0A2gQA==
   dependencies:
-    "@lezer/lr" "^0.15.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
 
+<<<<<<< HEAD
 "@lezer/html@^0.15.0":
   version "0.15.1"
   resolved "https://registry.yarnpkg.com/@lezer/html/-/html-0.15.1.tgz#973a5a179560d0789bf8737c06e6d143cc211406"
   integrity sha512-0ZYVhu+RwN6ZMM0gNnTxenRAdoycKc2wvpLfMjP0JkKR0vMxhtuLaIpsq9KW2Mv6l7ux5vdjq8CQ7fKDvia8KA==
+=======
+"@lezer/highlight@^1.0.0", "@lezer/highlight@^1.1.3":
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.1.4.tgz"
+  integrity sha512-IECkFmw2l7sFcYXrV8iT9GeY4W0fU4CxX0WMwhmhMIVjoDdD1Hr6q3G2NqVtLg/yVe5n7i4menG3tJ2r4eCrPQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
-    "@lezer/lr" "^0.15.0"
+    "@lezer/common" "^1.0.0"
 
+<<<<<<< HEAD
 "@lezer/javascript@^0.15.1":
   version "0.15.3"
   resolved "https://registry.yarnpkg.com/@lezer/javascript/-/javascript-0.15.3.tgz#833a4c5650bae07805b9af88de6706368844dc55"
   integrity sha512-8jA2NpOfpWwSPZxRhd9BxK2ZPvGd7nLE3LFTJ5AbMhXAzMHeMjneV6GEVd7dAIee85dtap0jdb6bgOSO0+lfwA==
+=======
+"@lezer/html@^1.3.0":
+  version "1.3.4"
+  resolved "https://registry.npmjs.org/@lezer/html/-/html-1.3.4.tgz"
+  integrity sha512-HdJYMVZcT4YsMo7lW3ipL4NoyS2T67kMPuSVS5TgLGqmaCjEU/D6xv7zsa1ktvTK5lwk7zzF1e3eU6gBZIPm5g==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
-    "@lezer/lr" "^0.15.0"
+    "@lezer/common" "^1.0.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
 
+<<<<<<< HEAD
 "@lezer/lr@^0.15.0":
   version "0.15.8"
   resolved "https://registry.yarnpkg.com/@lezer/lr/-/lr-0.15.8.tgz#1564a911e62b0a0f75ca63794a6aa8c5dc63db21"
   integrity sha512-bM6oE6VQZ6hIFxDNKk8bKPa14hqFrV07J/vHGOeiAbJReIaQXmkVb6xQu4MR+JBTLa5arGRyAAjJe1qaQt3Uvg==
+=======
+"@lezer/javascript@^1.0.0":
+  version "1.4.2"
+  resolved "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.2.tgz"
+  integrity sha512-77qdAD4zanmImPiAu4ibrMUzRc79UHoccdPa+Ey5iwS891TAkhnMAodUe17T7zV7tnF7e9HXM0pfmjoGEhrppg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
-    "@lezer/common" "^0.15.0"
+    "@lezer/highlight" "^1.1.3"
+    "@lezer/lr" "^1.3.0"
+
+"@lezer/lr@^1.0.0", "@lezer/lr@^1.3.0":
+  version "1.3.3"
+  resolved "https://registry.npmjs.org/@lezer/lr/-/lr-1.3.3.tgz"
+  integrity sha512-JPQe3mwJlzEVqy67iQiiGozhcngbO8QBgpqZM6oL1Wj/dXckrEexpBLeFkq0edtW5IqnPRFxA24BHJni8Js69w==
+  dependencies:
+    "@lezer/common" "^1.0.0"
 
 "@mdx-js/mdx@^2.1.3":
+<<<<<<< HEAD
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-2.3.0.tgz#d65d8c3c28f3f46bb0e7cb3bf7613b39980671a9"
   integrity sha512-jLuwRlz8DQfQNiUCJR50Y09CGPq3fLtmtUQfVrj79E0JWu3dvsVcxVIcfhR5h0iXu+/z++zDrYeiJqifRynJkA==
+=======
+  version "2.1.3"
+  resolved "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-2.1.3.tgz"
+  integrity sha512-ahbb47HJIJ4xnifaL06tDJiSyLEy1EhFAStO7RZIm3GTa7yGW3NGhZaj+GUCveFgl5oI54pY4BgiLmYm97y+zg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/estree-jsx" "^1.0.0"
     "@types/mdx" "^2.0.0"
@@ -816,22 +1517,36 @@
     unist-util-visit "^4.0.0"
     vfile "^5.0.0"
 
+<<<<<<< HEAD
 "@next/env@13.5.6":
   version "13.5.6"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-13.5.6.tgz#c1148e2e1aa166614f05161ee8f77ded467062bc"
   integrity sha512-Yac/bV5sBGkkEXmAX5FWPS9Mmo2rthrOPRQQNfycJPkjUAUclomCPH7QFVCDQ4Mp2k2K1SSM6m0zrxYrOwtFQw==
+=======
+"@next/env@13.4.1":
+  version "13.4.1"
+  resolved "https://registry.npmjs.org/@next/env/-/env-13.4.1.tgz"
+  integrity sha512-eD6WCBMFjLFooLM19SIhSkWBHtaFrZFfg2Cxnyl3vS3DAdFRfnx5TY2RxlkuKXdIRCC0ySbtK9JXXt8qLCqzZg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 "@next/eslint-plugin-next@12.0.3":
   version "12.0.3"
-  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-12.0.3.tgz#3945c251d551bacc3712d4a18d6ca56d2938f175"
+  resolved "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-12.0.3.tgz"
   integrity sha512-P7i+bMypneQcoRN+CX79xssvvIJCaw7Fndzbe7/lB0+LyRbVvGVyMUsFmLLbSxtZq4hvFMJ1p8wML/gsulMZWQ==
   dependencies:
     glob "7.1.7"
 
+<<<<<<< HEAD
 "@next/swc-darwin-arm64@13.5.6":
   version "13.5.6"
   resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.6.tgz#b15d139d8971360fca29be3bdd703c108c9a45fb"
   integrity sha512-5nvXMzKtZfvcu4BhtV0KH1oGv4XEW+B+jOfmBdpFI3C7FrB/MfujRpWYSBBO64+qbW8pkZiSyQv9eiwnn5VIQA==
+=======
+"@next/swc-darwin-arm64@13.4.1":
+  version "13.4.1"
+  resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.1.tgz"
+  integrity sha512-eF8ARHtYfnoYtDa6xFHriUKA/Mfj/cCbmKb3NofeKhMccs65G6/loZ15a6wYCCx4rPAd6x4t1WmVYtri7EdeBg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 "@next/swc-darwin-x64@13.5.6":
   version "13.5.6"
@@ -875,7 +1590,7 @@
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
+  resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
   integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
   dependencies:
     "@nodelib/fs.stat" "2.0.5"
@@ -883,17 +1598,18 @@
 
 "@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
   version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
+  resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
 
 "@nodelib/fs.walk@^1.2.3":
   version "1.2.8"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
+  resolved "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz"
   integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
   dependencies:
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+<<<<<<< HEAD
 "@pkgjs/parseargs@^0.11.0":
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
@@ -903,10 +1619,262 @@
   version "1.0.0-next.24"
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.24.tgz#58601079e11784d20f82d0585865bb42305c4df3"
   integrity sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==
+=======
+"@open-draft/deferred-promise@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/@open-draft/deferred-promise/-/deferred-promise-2.1.0.tgz"
+  integrity sha512-Rzd5JrXZX8zErHzgcGyngh4fmEbSHqTETdGj9rXtejlqMIgXFlyKBA7Jn1Xp0Ls0M0Y22+xHcWiEzbmdWl0BOA==
+
+"@polka/url@^1.0.0-next.20":
+  version "1.0.0-next.21"
+  resolved "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz"
+  integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
+
+"@radix-ui/primitive@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz"
+  integrity sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-arrow@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz"
+  integrity sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
+"@radix-ui/react-collection@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz"
+  integrity sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+
+"@radix-ui/react-compose-refs@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz"
+  integrity sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-context-menu@^2.1.5":
+  version "2.1.5"
+  resolved "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.1.5.tgz"
+  integrity sha512-R5XaDj06Xul1KGb+WP8qiOh7tKJNz2durpLBXAGZjSVtctcRFCuEvy2gtMwRJGePwQQE5nV77gs4FwRi8T+r2g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-menu" "2.0.6"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+
+"@radix-ui/react-context@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz"
+  integrity sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-direction@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz"
+  integrity sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-dismissable-layer@1.0.5":
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz"
+  integrity sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-escape-keydown" "1.0.3"
+
+"@radix-ui/react-focus-guards@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz"
+  integrity sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-focus-scope@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz"
+  integrity sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+
+"@radix-ui/react-id@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz"
+  integrity sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
+"@radix-ui/react-menu@2.0.6":
+  version "2.0.6"
+  resolved "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.0.6.tgz"
+  integrity sha512-BVkFLS+bUC8HcImkRKPSiVumA1VPOOEC5WBMiT+QAVsPzW1FJzI9KnqgGxVDPBcql5xXrHkD3JOVoXWEXD8SYA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-collection" "1.0.3"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-direction" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
+    "@radix-ui/react-focus-guards" "1.0.1"
+    "@radix-ui/react-focus-scope" "1.0.4"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-popper" "1.1.3"
+    "@radix-ui/react-portal" "1.0.4"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-roving-focus" "1.0.4"
+    "@radix-ui/react-slot" "1.0.2"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.5"
+
+"@radix-ui/react-popper@1.1.3":
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.3.tgz"
+  integrity sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@floating-ui/react-dom" "^2.0.0"
+    "@radix-ui/react-arrow" "1.0.3"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+    "@radix-ui/react-use-rect" "1.0.1"
+    "@radix-ui/react-use-size" "1.0.1"
+    "@radix-ui/rect" "1.0.1"
+
+"@radix-ui/react-portal@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz"
+  integrity sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
+"@radix-ui/react-presence@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz"
+  integrity sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
+"@radix-ui/react-primitive@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz"
+  integrity sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-slot" "1.0.2"
+
+"@radix-ui/react-roving-focus@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz"
+  integrity sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-collection" "1.0.3"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-direction" "1.0.1"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+
+"@radix-ui/react-slot@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz"
+  integrity sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+
+"@radix-ui/react-use-callback-ref@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz"
+  integrity sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-use-controllable-state@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz"
+  integrity sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+
+"@radix-ui/react-use-escape-keydown@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz"
+  integrity sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+
+"@radix-ui/react-use-layout-effect@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz"
+  integrity sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-use-rect@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz"
+  integrity sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/rect" "1.0.1"
+
+"@radix-ui/react-use-size@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz"
+  integrity sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
+"@radix-ui/rect@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.1.tgz"
+  integrity sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
 
 "@react-hook/intersection-observer@^3.1.1":
   version "3.1.1"
-  resolved "https://registry.yarnpkg.com/@react-hook/intersection-observer/-/intersection-observer-3.1.1.tgz#6b8fdb80d133c9c28bc8318368ecb3a1f8befc50"
+  resolved "https://registry.npmjs.org/@react-hook/intersection-observer/-/intersection-observer-3.1.1.tgz"
   integrity sha512-OTDx8/wFaRvzFtKl1dEUEXSOqK2zVJHporiTTdC2xO++0e9FEx9wIrPis5q3lqtXeZH9zYGLbk+aB75qNFbbuw==
   dependencies:
     "@react-hook/passive-layout-effect" "^1.2.0"
@@ -914,23 +1882,36 @@
 
 "@react-hook/passive-layout-effect@^1.2.0":
   version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@react-hook/passive-layout-effect/-/passive-layout-effect-1.2.1.tgz#c06dac2d011f36d61259aa1c6df4f0d5e28bc55e"
+  resolved "https://registry.npmjs.org/@react-hook/passive-layout-effect/-/passive-layout-effect-1.2.1.tgz"
   integrity sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==
 
 "@rushstack/eslint-patch@^1.0.6":
+<<<<<<< HEAD
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.7.2.tgz#2d4260033e199b3032a08b41348ac10de21c47e9"
   integrity sha512-RbhOOTCNoCrbfkRyoXODZp75MlpiHMgbE5MEBZAnnnLyQNgrigEj4p0lzsMDyc1zVsJDLrivB58tgg3emX0eEA==
+=======
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.0.tgz"
+  integrity sha512-JLo+Y592QzIE+q7Dl2pMUtt4q8SKYI5jDrZxrozEQxnGVOyYE+GWK9eLkwTaeN9DDctlaRAQ3TBmzZ1qdLE30A==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 "@stitches/core@^1.2.6":
   version "1.2.8"
-  resolved "https://registry.yarnpkg.com/@stitches/core/-/core-1.2.8.tgz#dce3b8fdc764fbc6dbea30c83b73bfb52cf96173"
+  resolved "https://registry.npmjs.org/@stitches/core/-/core-1.2.8.tgz"
   integrity sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==
 
+<<<<<<< HEAD
 "@swc/helpers@0.5.2":
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.2.tgz#85ea0c76450b61ad7d10a37050289eded783c27d"
   integrity sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==
+=======
+"@swc/helpers@0.5.1":
+  version "0.5.1"
+  resolved "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz"
+  integrity sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     tslib "^2.4.0"
 
@@ -948,24 +1929,25 @@
 
 "@types/acorn@^4.0.0":
   version "4.0.6"
-  resolved "https://registry.yarnpkg.com/@types/acorn/-/acorn-4.0.6.tgz#d61ca5480300ac41a7d973dd5b84d0a591154a22"
+  resolved "https://registry.npmjs.org/@types/acorn/-/acorn-4.0.6.tgz"
   integrity sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==
   dependencies:
     "@types/estree" "*"
 
 "@types/body-scroll-lock@^2.6.1":
   version "2.6.2"
-  resolved "https://registry.yarnpkg.com/@types/body-scroll-lock/-/body-scroll-lock-2.6.2.tgz#ce56d17e1bf8383c08a074733c4e9e536a59ae61"
+  resolved "https://registry.npmjs.org/@types/body-scroll-lock/-/body-scroll-lock-2.6.2.tgz"
   integrity sha512-PhoQPbwPYspXqf7lkwtF7aJzAwL88t+9E/e0b2X84tlHpU8ZuS9UNnLtkT0XhyZJYHpET5qRfIdZ0HBIxuc7HQ==
 
 "@types/classnames@^2.2.10":
   version "2.3.1"
-  resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.3.1.tgz#3c2467aa0f1a93f1f021e3b9bcf938bd5dfdc0dd"
+  resolved "https://registry.npmjs.org/@types/classnames/-/classnames-2.3.1.tgz"
   integrity sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==
   dependencies:
     classnames "*"
 
 "@types/debounce@^1.2.1":
+<<<<<<< HEAD
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/@types/debounce/-/debounce-1.2.4.tgz#cb7e85d9ad5ababfac2f27183e8ac8b576b2abb3"
   integrity sha512-jBqiORIzKDOToaF63Fm//haOCHuwQuLa2202RK4MozpA6lh93eCBc+/8+wZn5OzjJt3ySdc+74SXWXB55Ewtyw==
@@ -974,34 +1956,63 @@
   version "4.1.12"
   resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.12.tgz#a155f21690871953410df4b6b6f53187f0500917"
   integrity sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==
+=======
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/@types/debounce/-/debounce-1.2.1.tgz"
+  integrity sha512-epMsEE85fi4lfmJUH/89/iV/LI+F5CvNIvmgs5g5jYFPfhO2S/ae8WSsLOKWdwtoaZw9Q2IhJ4tQ5tFCcS/4HA==
+
+"@types/debug@^4.0.0":
+  version "4.1.7"
+  resolved "https://registry.npmjs.org/@types/debug/-/debug-4.1.7.tgz"
+  integrity sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/ms" "*"
 
 "@types/estree-jsx@^1.0.0":
+<<<<<<< HEAD
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@types/estree-jsx/-/estree-jsx-1.0.5.tgz#858a88ea20f34fe65111f005a689fa1ebf70dc18"
   integrity sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==
+=======
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.0.tgz"
+  integrity sha512-3qvGd0z8F2ENTGr/GG1yViqfiKmRfrXVx5sJyHGFu3z7m5g5utCQtGp/g29JnjflhtQJBv1WDQukHiT58xPcYQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/estree" "*"
 
 "@types/estree@*", "@types/estree@^1.0.0":
+<<<<<<< HEAD
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
   integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
+=======
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz"
+  integrity sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 "@types/github-slugger@^1.3.0":
   version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@types/github-slugger/-/github-slugger-1.3.0.tgz#16ab393b30d8ae2a111ac748a015ac05a1fc5524"
+  resolved "https://registry.npmjs.org/@types/github-slugger/-/github-slugger-1.3.0.tgz"
   integrity sha512-J/rMZa7RqiH/rT29TEVZO4nBoDP9XJOjnbbIofg7GQKs4JIduEO3WLpte+6WeUz/TcrXKlY+bM7FYrp8yFB+3g==
 
 "@types/hast@^2.0.0", "@types/hast@^2.3.2":
+<<<<<<< HEAD
   version "2.3.10"
   resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.10.tgz#5c9d9e0b304bbb8879b857225c5ebab2d81d7643"
   integrity sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==
+=======
+  version "2.3.4"
+  resolved "https://registry.npmjs.org/@types/hast/-/hast-2.3.4.tgz"
+  integrity sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/unist" "^2"
 
 "@types/json-schema@^7.0.9":
+<<<<<<< HEAD
   version "7.0.15"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
   integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
@@ -1022,10 +2033,38 @@
   version "1.5.8"
   resolved "https://registry.yarnpkg.com/@types/mdx-js__react/-/mdx-js__react-1.5.8.tgz#a709076d48d17bb2e3168a0686d79b16e55ff9a4"
   integrity sha512-iLQL8JZ4AZ+rpZvGUsQwENffpsSCMLYB8kE6OhGasLmdYn7aSLq53uOvZrKx5FM+hymE2nm08HDfq7tFx02ElA==
+=======
+  version "7.0.11"
+  resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz"
+  integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
+
+"@types/json5@^0.0.29":
+  version "0.0.29"
+  resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
+  integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
+
+"@types/mdast@^3.0.0":
+  version "3.0.10"
+  resolved "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz"
+  integrity sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==
+  dependencies:
+    "@types/unist" "*"
+
+"@types/mdurl@^1.0.0":
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/@types/mdurl/-/mdurl-1.0.2.tgz"
+  integrity sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==
+
+"@types/mdx-js__react@^1.5.2":
+  version "1.5.5"
+  resolved "https://registry.npmjs.org/@types/mdx-js__react/-/mdx-js__react-1.5.5.tgz"
+  integrity sha512-k8pnaP6JXVlQh18HgL5X6sYFNC/qZnzO7R2+HsmwrwUd+JnnsU0d9lyyT0RQrHg1anxDU36S98TI/fsGtmYqqg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/react" "*"
 
 "@types/mdx@^2.0.0":
+<<<<<<< HEAD
   version "2.0.11"
   resolved "https://registry.yarnpkg.com/@types/mdx/-/mdx-2.0.11.tgz#21f4c166ed0e0a3a733869ba04cd8daea9834b8e"
   integrity sha512-HM5bwOaIQJIQbAYfax35HCKxx7a3KrK3nBtIqJgSOitivTD1y3oW9P3rxY9RkXYPUk7y/AjAohfHKmFpGE79zw==
@@ -1039,13 +2078,29 @@
   version "14.18.63"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.63.tgz#1788fa8da838dbb5f9ea994b834278205db6ca2b"
   integrity sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==
+=======
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.2.tgz"
+  integrity sha512-mJGfgj4aWpiKb8C0nnJJchs1sHBHn0HugkVfqqyQi7Wn6mBRksLeQsPOFvih/Pu8L1vlDzfe/LidhVHBeUk3aQ==
+
+"@types/ms@*":
+  version "0.7.31"
+  resolved "https://registry.npmjs.org/@types/ms/-/ms-0.7.31.tgz"
+  integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
+
+"@types/node@^14.6.4":
+  version "14.18.9"
+  resolved "https://registry.npmjs.org/@types/node/-/node-14.18.9.tgz"
+  integrity sha512-j11XSuRuAlft6vLDEX4RvhqC0KxNxx6QIyMXNb0vHHSNPXTPeiy3algESWmOOIzEtiEL0qiowPU3ewW9hHVa7Q==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 "@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"
+  resolved "https://registry.npmjs.org/@types/parse-numeric-range/-/parse-numeric-range-0.0.1.tgz"
   integrity sha512-nI3rPGKk8BxedokP2VilnW5JyZHYNjGCUDsAZ2JQgISgDflHNUO0wXMfGYP8CkihrKYDm5tilD52XfGhO/ZFCA==
 
 "@types/prop-types@*":
+<<<<<<< HEAD
   version "15.7.11"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.11.tgz#2596fb352ee96a1379c657734d4b913a613ad563"
   integrity sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==
@@ -1061,12 +2116,39 @@
   version "18.2.60"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.60.tgz#df026eaef1100b6dafe420f36fecb1d209a8cee1"
   integrity sha512-dfiPj9+k20jJrLGOu9Nf6eqxm2EyJRrq2NvwOFsfbb7sFExZ9WELPs67UImHj3Ayxg8ruTtKtNnbjaF8olPq0A==
+=======
+  version "15.7.4"
+  resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz"
+  integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
+
+"@types/react-dom@^18.0.5":
+  version "18.0.5"
+  resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.5.tgz"
+  integrity sha512-OWPWTUrY/NIrjsAPkAk1wW9LZeIjSvkXRhclsFO8CZcZGCOg2G0YZy4ft+rOyYxy8B7ui5iZzi9OkDebZ7/QSA==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*":
+  version "17.0.38"
+  resolved "https://registry.npmjs.org/@types/react/-/react-17.0.38.tgz"
+  integrity sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/react@^18.0.9":
+  version "18.0.9"
+  resolved "https://registry.npmjs.org/@types/react/-/react-18.0.9.tgz"
+  integrity sha512-9bjbg1hJHUm4De19L1cHiW0Jvx3geel6Qczhjd0qY5VKVE2X5+x77YxAepuCwVh4vrgZJdgEJw48zrhRIeF4Nw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
 "@types/scheduler@*":
+<<<<<<< HEAD
   version "0.16.8"
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff"
   integrity sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==
@@ -1085,6 +2167,21 @@
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz#aeef0328d172b9e37d9bab6dbc13b87ed88977db"
   integrity sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==
+=======
+  version "0.16.2"
+  resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
+"@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2":
+  version "2.0.6"
+  resolved "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz"
+  integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
+
+"@typescript-eslint/eslint-plugin@^5.36.2":
+  version "5.36.2"
+  resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.36.2.tgz"
+  integrity sha512-OwwR8LRwSnI98tdc2z7mJYgY60gf7I9ZfGjN5EjCwwns9bdTuQfAXcsjSB2wSQ/TVNYSGKf4kzVXbNGaZvwiXw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@eslint-community/regexpp" "^4.4.0"
     "@typescript-eslint/scope-manager" "5.62.0"
@@ -1099,7 +2196,7 @@
 
 "@typescript-eslint/parser@^4.20.0":
   version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.33.0.tgz#dfe797570d9694e560528d18eecad86c8c744899"
+  resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.33.0.tgz"
   integrity sha512-ZohdsbXadjGBSK0/r+d87X0SBmKzOq4/S5nzK6SBgJspFo9/CUDJ7hjayuze+JK7CZQLDMroqytp7pOcFKTxZA==
   dependencies:
     "@typescript-eslint/scope-manager" "4.33.0"
@@ -1108,9 +2205,15 @@
     debug "^4.3.1"
 
 "@typescript-eslint/parser@^5.36.2":
+<<<<<<< HEAD
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.62.0.tgz#1b63d082d849a2fcae8a569248fbe2ee1b8a56c7"
   integrity sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==
+=======
+  version "5.36.2"
+  resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.36.2.tgz"
+  integrity sha512-qS/Kb0yzy8sR0idFspI9Z6+t7mqk/oRjnAYfewG+VN73opAUvmYL3oPIMmgOX6CnQS6gmVIXGshlb5RY/R22pA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@typescript-eslint/scope-manager" "5.62.0"
     "@typescript-eslint/types" "5.62.0"
@@ -1119,24 +2222,38 @@
 
 "@typescript-eslint/scope-manager@4.33.0":
   version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.33.0.tgz#d38e49280d983e8772e29121cf8c6e9221f280a3"
+  resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.33.0.tgz"
   integrity sha512-5IfJHpgTsTZuONKbODctL4kKuQje/bzBRkwHE8UOZ4f89Zeddg+EGZs8PD8NcN4LdM3ygHWYB3ukPAYjvl/qbQ==
   dependencies:
     "@typescript-eslint/types" "4.33.0"
     "@typescript-eslint/visitor-keys" "4.33.0"
 
+<<<<<<< HEAD
 "@typescript-eslint/scope-manager@5.62.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz#d9457ccc6a0b8d6b37d0eb252a23022478c5460c"
   integrity sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==
+=======
+"@typescript-eslint/scope-manager@5.36.2":
+  version "5.36.2"
+  resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.36.2.tgz"
+  integrity sha512-cNNP51L8SkIFSfce8B1NSUBTJTu2Ts4nWeWbFrdaqjmn9yKrAaJUBHkyTZc0cL06OFHpb+JZq5AUHROS398Orw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@typescript-eslint/types" "5.62.0"
     "@typescript-eslint/visitor-keys" "5.62.0"
 
+<<<<<<< HEAD
 "@typescript-eslint/type-utils@5.62.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz#286f0389c41681376cdad96b309cedd17d70346a"
   integrity sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==
+=======
+"@typescript-eslint/type-utils@5.36.2":
+  version "5.36.2"
+  resolved "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.36.2.tgz"
+  integrity sha512-rPQtS5rfijUWLouhy6UmyNquKDPhQjKsaKH0WnY6hl/07lasj8gPaH2UD8xWkePn6SC+jW2i9c2DZVDnL+Dokw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@typescript-eslint/typescript-estree" "5.62.0"
     "@typescript-eslint/utils" "5.62.0"
@@ -1145,17 +2262,24 @@
 
 "@typescript-eslint/types@4.33.0":
   version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.33.0.tgz#a1e59036a3b53ae8430ceebf2a919dc7f9af6d72"
+  resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.33.0.tgz"
   integrity sha512-zKp7CjQzLQImXEpLt2BUw1tvOMPfNoTAfb8l51evhYbOEEzdWyQNmHWWGPR6hwKJDAi+1VXSBmnhL9kyVTTOuQ==
 
+<<<<<<< HEAD
 "@typescript-eslint/types@5.62.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f"
   integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==
+=======
+"@typescript-eslint/types@5.36.2":
+  version "5.36.2"
+  resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.36.2.tgz"
+  integrity sha512-9OJSvvwuF1L5eS2EQgFUbECb99F0mwq501w0H0EkYULkhFa19Qq7WFbycdw1PexAc929asupbZcgjVIe6OK/XQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 "@typescript-eslint/typescript-estree@4.33.0":
   version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.33.0.tgz#0dfb51c2908f68c5c08d82aefeaf166a17c24609"
+  resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.33.0.tgz"
   integrity sha512-rkWRY1MPFzjwnEVHsxGemDzqqddw2QbTJlICPD9p9I9LfsO8fdmfQPOX3uKfUaGRDFJbfrtm/sXhVXN4E+bzCA==
   dependencies:
     "@typescript-eslint/types" "4.33.0"
@@ -1166,10 +2290,17 @@
     semver "^7.3.5"
     tsutils "^3.21.0"
 
+<<<<<<< HEAD
 "@typescript-eslint/typescript-estree@5.62.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz#7d17794b77fabcac615d6a48fb143330d962eb9b"
   integrity sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==
+=======
+"@typescript-eslint/typescript-estree@5.36.2":
+  version "5.36.2"
+  resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.36.2.tgz"
+  integrity sha512-8fyH+RfbKc0mTspfuEjlfqA4YywcwQK2Amcf6TDOwaRLg7Vwdu4bZzyvBZp4bjt1RRjQ5MDnOZahxMrt2l5v9w==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@typescript-eslint/types" "5.62.0"
     "@typescript-eslint/visitor-keys" "5.62.0"
@@ -1179,10 +2310,17 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
+<<<<<<< HEAD
 "@typescript-eslint/utils@5.62.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.62.0.tgz#141e809c71636e4a75daa39faed2fb5f4b10df86"
   integrity sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==
+=======
+"@typescript-eslint/utils@5.36.2":
+  version "5.36.2"
+  resolved "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.36.2.tgz"
+  integrity sha512-uNcopWonEITX96v9pefk9DC1bWMdkweeSsewJ6GeC7L6j2t0SJywisgkr9wUTtXk90fi2Eljj90HSHm3OGdGRg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
     "@types/json-schema" "^7.0.9"
@@ -1195,33 +2333,40 @@
 
 "@typescript-eslint/visitor-keys@4.33.0":
   version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.33.0.tgz#2a22f77a41604289b7a186586e9ec48ca92ef1dd"
+  resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.33.0.tgz"
   integrity sha512-uqi/2aSz9g2ftcHWf8uLPJA70rUv6yuMW5Bohw+bwcuzaxQIHaKFZCKGoGXIrc9vkTJ3+0txM73K0Hq3d5wgIg==
   dependencies:
     "@typescript-eslint/types" "4.33.0"
     eslint-visitor-keys "^2.0.0"
 
+<<<<<<< HEAD
 "@typescript-eslint/visitor-keys@5.62.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz#2174011917ce582875954ffe2f6912d5931e353e"
   integrity sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==
+=======
+"@typescript-eslint/visitor-keys@5.36.2":
+  version "5.36.2"
+  resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.36.2.tgz"
+  integrity sha512-BtRvSR6dEdrNt7Net2/XDjbYKU5Ml6GqJgVfXT0CxTCJlnIqK7rAGreuWKMT2t8cFUT2Msv5oxw0GMRD7T5J7A==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@typescript-eslint/types" "5.62.0"
     eslint-visitor-keys "^3.3.0"
 
 "@yarnpkg/lockfile@^1.1.0":
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31"
+  resolved "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz"
   integrity sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==
 
 absolute-path@^0.0.0:
   version "0.0.0"
-  resolved "https://registry.yarnpkg.com/absolute-path/-/absolute-path-0.0.0.tgz#a78762fbdadfb5297be99b15d35a785b2f095bf7"
+  resolved "https://registry.npmjs.org/absolute-path/-/absolute-path-0.0.0.tgz"
   integrity sha512-HQiug4c+/s3WOvEnDRxXVmNtSG5s2gJM9r19BTcqjp7BWcE48PB+Y2G6jE65kqI0LpsQeMZygt/b60Gi4KxGyA==
 
 accepts@~1.3.8:
   version "1.3.8"
-  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"
+  resolved "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz"
   integrity sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==
   dependencies:
     mime-types "~2.1.34"
@@ -1229,27 +2374,53 @@ accepts@~1.3.8:
 
 acorn-jsx@^5.0.0, acorn-jsx@^5.3.1:
   version "5.3.2"
-  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
+  resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
 acorn-walk@^8.0.0:
+<<<<<<< HEAD
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.3.2.tgz#7703af9415f1b6db9315d6895503862e231d34aa"
   integrity sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==
+=======
+  version "8.2.0"
+  resolved "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz"
+  integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 acorn@^7.4.0:
   version "7.4.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
+<<<<<<< HEAD
 acorn@^8.0.0, acorn@^8.0.4:
   version "8.11.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.3.tgz#71e0b14e13a4ec160724b38fb7b0f233b1b81d7a"
   integrity sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==
+=======
+acorn@^8.0.0:
+  version "8.8.0"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz"
+  integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
+
+acorn@^8.0.4:
+  version "8.7.0"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz"
+  integrity sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==
+
+aggregate-error@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz"
+  integrity sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==
+  dependencies:
+    clean-stack "^2.0.0"
+    indent-string "^4.0.0"
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 ajv@^6.10.0, ajv@^6.12.4:
   version "6.12.6"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
   dependencies:
     fast-deep-equal "^3.1.1"
@@ -1258,15 +2429,22 @@ ajv@^6.10.0, ajv@^6.12.4:
     uri-js "^4.2.2"
 
 ajv@^8.0.1:
+<<<<<<< HEAD
   version "8.12.0"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.12.0.tgz#d1a0527323e22f53562c567c00991577dfbe19d1"
   integrity sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==
+=======
+  version "8.9.0"
+  resolved "https://registry.npmjs.org/ajv/-/ajv-8.9.0.tgz"
+  integrity sha512-qOKJyNj/h+OWx7s5DePL6Zu1KeM9jPZhwBqs+7DzP6bGOvqzVCSf0xueYmVuaC/oQ/VtS2zLMLHdQFbkka+XDQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     fast-deep-equal "^3.1.1"
     json-schema-traverse "^1.0.0"
     require-from-string "^2.0.2"
     uri-js "^4.2.2"
 
+<<<<<<< HEAD
 algoliasearch@^4.0.0:
   version "4.22.1"
   resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-4.22.1.tgz#f10fbecdc7654639ec20d62f109c1b3a46bc6afc"
@@ -1296,67 +2474,131 @@ ansi-escapes@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-6.2.0.tgz#8a13ce75286f417f1963487d86ba9f90dccf9947"
   integrity sha512-kzRaCqXnpzWs+3z5ABPQiVke+iq0KXkHo8xiWV4RPTi5Yli0l97BEQuhXV1s7+aSU/fu1kUuxgS4MsQ0fRuygw==
+=======
+algoliasearch@^4.19.1:
+  version "4.24.0"
+  resolved "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.24.0.tgz"
+  integrity sha512-bf0QV/9jVejssFBmz2HQLxUadxk574t4iwjCKp5E7NBzwKkrDEhKPISIIjAU/p6K5qDx3qoeh4+26zWN1jmw3g==
+  dependencies:
+    "@algolia/cache-browser-local-storage" "4.24.0"
+    "@algolia/cache-common" "4.24.0"
+    "@algolia/cache-in-memory" "4.24.0"
+    "@algolia/client-account" "4.24.0"
+    "@algolia/client-analytics" "4.24.0"
+    "@algolia/client-common" "4.24.0"
+    "@algolia/client-personalization" "4.24.0"
+    "@algolia/client-search" "4.24.0"
+    "@algolia/logger-common" "4.24.0"
+    "@algolia/logger-console" "4.24.0"
+    "@algolia/recommend" "4.24.0"
+    "@algolia/requester-browser-xhr" "4.24.0"
+    "@algolia/requester-common" "4.24.0"
+    "@algolia/requester-node-http" "4.24.0"
+    "@algolia/transporter" "4.24.0"
+
+anser@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/anser/-/anser-2.1.1.tgz"
+  integrity sha512-nqLm4HxOTpeLOxcmB3QWmV5TcDFhW9y/fyQ+hivtDFcK4OQ+pQ5fzPnXHM1Mfcm0VkLtvVi1TCPr++Qy0Q/3EQ==
+
+ansi-colors@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz"
+  integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
+
+ansi-escapes@^4.3.0:
+  version "4.3.2"
+  resolved "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz"
+  integrity sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     type-fest "^3.0.0"
 
 ansi-regex@^5.0.1:
   version "5.0.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
 
 ansi-regex@^6.0.1:
   version "6.0.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.0.1.tgz#3183e38fae9a65d7cb5e53945cd5897d0260a06a"
+  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz"
   integrity sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==
 
 ansi-styles@^3.2.1:
   version "3.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz"
   integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
   dependencies:
     color-convert "^1.9.0"
 
 ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   version "4.3.0"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz"
   integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
   dependencies:
     color-convert "^2.0.1"
 
+<<<<<<< HEAD
 ansi-styles@^6.0.0, ansi-styles@^6.1.0, ansi-styles@^6.2.1:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
   integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
+=======
+ansi-styles@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.1.0.tgz"
+  integrity sha512-VbqNsoz55SYGczauuup0MFUyXNQviSpFTj1RQtFzmQLk18qbVSpTFFGMT293rmDaQuKCT6InmbuEyUne4mTuxQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 any-promise@^1.0.0:
   version "1.3.0"
-  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+  resolved "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz"
   integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
 
 anymatch@~3.1.2:
+<<<<<<< HEAD
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
   integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
+=======
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz"
+  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
 arg@^5.0.2:
   version "5.0.2"
-  resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
+  resolved "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz"
   integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
 
 argparse@^1.0.7:
   version "1.0.10"
-  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  resolved "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz"
   integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
   dependencies:
     sprintf-js "~1.0.2"
 
+<<<<<<< HEAD
 aria-query@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
   integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==
+=======
+aria-hidden@^1.1.1:
+  version "1.2.4"
+  resolved "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz"
+  integrity sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==
+  dependencies:
+    tslib "^2.0.0"
+
+aria-query@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz"
+  integrity sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     dequal "^2.0.3"
 
@@ -1370,13 +2612,20 @@ array-buffer-byte-length@^1.0.1:
 
 array-flatten@1.1.1:
   version "1.1.1"
-  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
+  resolved "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz"
   integrity sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==
 
+<<<<<<< HEAD
 array-includes@^3.1.6, array-includes@^3.1.7:
   version "3.1.7"
   resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.7.tgz#8cd2e01b26f7a3086cbc87271593fe921c62abda"
   integrity sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==
+=======
+array-includes@^3.1.3, array-includes@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.npmjs.org/array-includes/-/array-includes-3.1.4.tgz"
+  integrity sha512-ZTNSQkmWumEbiHO2GF4GmWxYVTiQyJy2XOTa15sdQSrvKn7l+180egQMqlrMOUMCyLMD7pmyQe4mMDUT6Behrw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     call-bind "^1.0.2"
     define-properties "^1.2.0"
@@ -1386,18 +2635,25 @@ array-includes@^3.1.6, array-includes@^3.1.7:
 
 array-iterate@^1.0.0:
   version "1.1.4"
-  resolved "https://registry.yarnpkg.com/array-iterate/-/array-iterate-1.1.4.tgz#add1522e9dd9749bb41152d08b845bd08d6af8b7"
+  resolved "https://registry.npmjs.org/array-iterate/-/array-iterate-1.1.4.tgz"
   integrity sha512-sNRaPGh9nnmdC8Zf+pT3UqP8rnWj5Hf9wiFGsX3wUQ2yVSIhO2ShFwCoceIPpB41QF6i2OEmrHmCo36xronCVA==
 
 array-union@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
+  resolved "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz"
   integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
 
+<<<<<<< HEAD
 array.prototype.filter@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/array.prototype.filter/-/array.prototype.filter-1.0.3.tgz#423771edeb417ff5914111fff4277ea0624c0d0e"
   integrity sha512-VizNcj/RGJiUyQBgzwxzE5oHdeuXY5hSbbmKMlphj1cy1Vl7Pn2asCGbSrru6hSQjmCzqTBPVWAF/whmEOVHbw==
+=======
+array.prototype.flat@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.5.tgz"
+  integrity sha512-KaYU+S+ndVqyUnignHftkwc58o3uVU1jzczILJ1tN2YaIZpFIKBiP/x/j97E5MVPsaCloPbqWLB/8qCTVvT2qg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     call-bind "^1.0.2"
     define-properties "^1.2.0"
@@ -1405,10 +2661,17 @@ array.prototype.filter@^1.0.3:
     es-array-method-boxes-properly "^1.0.0"
     is-string "^1.0.7"
 
+<<<<<<< HEAD
 array.prototype.findlastindex@^1.2.3:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.4.tgz#d1c50f0b3a9da191981ff8942a0aedd82794404f"
   integrity sha512-hzvSHUshSpCflDR1QMUBLHGHP1VIEBegT4pix9H/Z92Xw3ySoy6c2qh7lJWTJnRJ8JCZ9bJNCgTyYaJGcJu6xQ==
+=======
+array.prototype.flatmap@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.5.tgz"
+  integrity sha512-08u6rVyi1Lj7oqWbS9nUxliETrtIROT4XGTA4D/LWGten6E3ocm7cy9SIrmNHOL5XVbVuckUp3X6Xyg8/zpvHA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     call-bind "^1.0.5"
     define-properties "^1.2.1"
@@ -1416,6 +2679,7 @@ array.prototype.findlastindex@^1.2.3:
     es-errors "^1.3.0"
     es-shim-unscopables "^1.0.2"
 
+<<<<<<< HEAD
 array.prototype.flat@^1.3.1, array.prototype.flat@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz#1476217df8cff17d72ee8f3ba06738db5b387d18"
@@ -1465,13 +2729,20 @@ ast-types-flow@^0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.8.tgz#0a85e1c92695769ac13a428bb653e7538bea27d6"
   integrity sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==
+=======
+ast-types-flow@^0.0.7:
+  version "0.0.7"
+  resolved "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz"
+  integrity sha1-9wtzXGvKGlycItmCw+Oef+ujva0=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 astral-regex@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
+  resolved "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz"
   integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
 
 astring@^1.8.0:
+<<<<<<< HEAD
   version "1.8.6"
   resolved "https://registry.yarnpkg.com/astring/-/astring-1.8.6.tgz#2c9c157cf1739d67561c56ba896e6948f6b93731"
   integrity sha512-ISvCdHdlTDlH5IpxQJIex7BWBywFWgjJSVdwst+/iQCoEYnyOaQ95+X1JGshuBjGp6nxKUy1jMgE3zPqN7fQdg==
@@ -1482,21 +2753,32 @@ asynciterator.prototype@^1.0.0:
   integrity sha512-wwHYEIS0Q80f5mosx3L/dfG5t5rjEa9Ft51GTaNt862EnpyGHpgz2RkZvLPp1oF5TnAiTohkEKVEu8pQPJI7Vg==
   dependencies:
     has-symbols "^1.0.3"
+=======
+  version "1.8.3"
+  resolved "https://registry.npmjs.org/astring/-/astring-1.8.3.tgz"
+  integrity sha512-sRpyiNrx2dEYIMmUXprS8nlpRg2Drs8m9ElX9vVEXaCB4XEAJhKfs7IcX0IwShjuOAjLR6wzIrgoptz1n19i1A==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 asyncro@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/asyncro/-/asyncro-3.0.0.tgz#3c7a732e263bc4a42499042f48d7d858e9c0134e"
+  resolved "https://registry.npmjs.org/asyncro/-/asyncro-3.0.0.tgz"
   integrity sha512-nEnWYfrBmA3taTiuiOoZYmgJ/CNrSoQLeLs29SeLcPu60yaw/mHDBHV0iOZ051fTvsTHxpCY+gXibqT9wbQYfg==
 
 at-least-node@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
+  resolved "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz"
   integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
 
 autoprefixer@^10.4.2:
+<<<<<<< HEAD
   version "10.4.17"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.17.tgz#35cd5695cbbe82f536a50fa025d561b01fdec8be"
   integrity sha512-/cpVNRLSfhOtcGflT13P2794gVSgmPgTR+erw5ifnMLZb0UnSlkK4tquLmkd3BhA+nLo5tX8Cu0upUsGKvKbmg==
+=======
+  version "10.4.2"
+  resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.2.tgz"
+  integrity sha512-9fOPpHKuDW1w/0EKfRmVnxTDt8166MAnLI3mgZ1JCnhNtYWxcJ6Ud5CO/AVOZi/AvFa8DY9RTy3h3+tFBlrrdQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     browserslist "^4.22.2"
     caniuse-lite "^1.0.30001578"
@@ -1507,7 +2789,7 @@ autoprefixer@^10.4.2:
 
 autoprefixer@^9.6.1:
   version "9.8.8"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.8.tgz#fd4bd4595385fa6f06599de749a4d5f7a474957a"
+  resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.8.tgz"
   integrity sha512-eM9d/swFopRt5gdJ7jrpCwgvEMIayITpojhkkSMRsFHYuH5bkSQ4p/9qTEHtmNudUZh22Tehu7I6CxAW0IXTKA==
   dependencies:
     browserslist "^4.12.0"
@@ -1518,6 +2800,7 @@ autoprefixer@^9.6.1:
     postcss "^7.0.32"
     postcss-value-parser "^4.1.0"
 
+<<<<<<< HEAD
 available-typed-arrays@^1.0.6, available-typed-arrays@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz#a5cc375d6a03c2efc87a553f3e0b1522def14846"
@@ -1536,10 +2819,21 @@ axobject-query@^3.2.1:
   integrity sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==
   dependencies:
     dequal "^2.0.3"
+=======
+axe-core@^4.3.5:
+  version "4.3.5"
+  resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.3.5.tgz"
+  integrity sha512-WKTW1+xAzhMS5dJsxWkliixlO/PqC4VhmO9T4juNYcaTg9jzWiJsou6m5pxWYGfigWbwzJWeFY6z47a+4neRXA==
+
+axobject-query@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz"
+  integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 babel-eslint@10.x:
   version "10.1.0"
-  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
+  resolved "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz"
   integrity sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==
   dependencies:
     "@babel/code-frame" "^7.0.0"
@@ -1549,26 +2843,42 @@ babel-eslint@10.x:
     eslint-visitor-keys "^1.0.0"
     resolve "^1.12.0"
 
+<<<<<<< HEAD
+=======
+babel-plugin-dynamic-import-node@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz"
+  integrity sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==
+  dependencies:
+    object.assign "^4.1.0"
+
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 bail@^1.0.0:
   version "1.0.5"
-  resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"
+  resolved "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz"
   integrity sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==
 
 bail@^2.0.0:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/bail/-/bail-2.0.2.tgz#d26f5cd8fe5d6f832a31517b9f7c356040ba6d5d"
+  resolved "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz"
   integrity sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==
 
 balanced-match@^1.0.0:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+base64-js@^1.3.1:
+  version "1.5.1"
+  resolved "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz"
+  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
+
 binary-extensions@^2.0.0:
   version "2.2.0"
-  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
+  resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
+<<<<<<< HEAD
 binaryextensions@2:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/binaryextensions/-/binaryextensions-2.3.0.tgz#1d269cbf7e6243ea886aa41453c3651ccbe13c22"
@@ -1578,6 +2888,12 @@ body-parser@1.20.1:
   version "1.20.1"
   resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.1.tgz#b1812a8912c195cd371a3ee5e66faa2338a5c668"
   integrity sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==
+=======
+body-parser@1.20.0, body-parser@^1.19.0:
+  version "1.20.0"
+  resolved "https://registry.npmjs.org/body-parser/-/body-parser-1.20.0.tgz"
+  integrity sha512-DfJ+q6EPcGKZD1QWUjSpqp+Q7bDQTsQIF4zfUAtZ6qk+H/3/QRhg9CEp39ss+/T2vw0+HaidC0ecJj/DRLIaKg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     bytes "3.1.2"
     content-type "~1.0.4"
@@ -1612,12 +2928,12 @@ body-parser@^1.19.0:
 
 body-scroll-lock@^3.1.3:
   version "3.1.5"
-  resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz#c1392d9217ed2c3e237fee1e910f6cdd80b7aaec"
+  resolved "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz"
   integrity sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==
 
 brace-expansion@^1.1.7:
   version "1.1.11"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz"
   integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
   dependencies:
     balanced-match "^1.0.0"
@@ -1632,11 +2948,12 @@ brace-expansion@^2.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"
+  resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
   dependencies:
     fill-range "^7.0.1"
 
+<<<<<<< HEAD
 browserslist@^4.12.0, browserslist@^4.22.2, browserslist@^4.6.4:
   version "4.23.0"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.0.tgz#8f3acc2bbe73af7213399430890f86c63a5674ab"
@@ -1646,23 +2963,60 @@ browserslist@^4.12.0, browserslist@^4.22.2, browserslist@^4.6.4:
     electron-to-chromium "^1.4.668"
     node-releases "^2.0.14"
     update-browserslist-db "^1.0.13"
+=======
+browserslist@^4.12.0, browserslist@^4.19.1, browserslist@^4.6.4:
+  version "4.19.1"
+  resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.19.1.tgz"
+  integrity sha512-u2tbbG5PdKRTUoctO3NBD8FQ5HdPh1ZXPHzp1rwaa5jTc+RV9/+RlWiAIKmjRPQF+xbGM9Kklj5bZQFa2s/38A==
+  dependencies:
+    caniuse-lite "^1.0.30001286"
+    electron-to-chromium "^1.4.17"
+    escalade "^3.1.1"
+    node-releases "^2.0.1"
+    picocolors "^1.0.0"
+
+browserslist@^4.20.2:
+  version "4.21.3"
+  resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.21.3.tgz"
+  integrity sha512-898rgRXLAyRkM1GryrrBHGkqA5hlpkV5MhtZwg9QXeiyLUYs2k00Un05aX5l2/yJIOObYKOpS2JNo8nJDE7fWQ==
+  dependencies:
+    caniuse-lite "^1.0.30001370"
+    electron-to-chromium "^1.4.202"
+    node-releases "^2.0.6"
+    update-browserslist-db "^1.0.5"
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
+
+buffer@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz"
+  integrity sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==
+  dependencies:
+    base64-js "^1.3.1"
+    ieee754 "^1.2.1"
 
 busboy@1.6.0:
   version "1.6.0"
-  resolved "https://registry.yarnpkg.com/busboy/-/busboy-1.6.0.tgz#966ea36a9502e43cdb9146962523b92f531f6893"
+  resolved "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz"
   integrity sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==
   dependencies:
     streamsearch "^1.1.0"
 
 bytes@3.1.2:
   version "3.1.2"
-  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
+  resolved "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz"
   integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
 
+<<<<<<< HEAD
 call-bind@^1.0.2, call-bind@^1.0.5, call-bind@^1.0.6, call-bind@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.7.tgz#06016599c40c56498c18769d2730be242b6fa3b9"
   integrity sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==
+=======
+call-bind@^1.0.0, call-bind@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz"
+  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     es-define-property "^1.0.0"
     es-errors "^1.3.0"
@@ -1672,27 +3026,44 @@ call-bind@^1.0.2, call-bind@^1.0.5, call-bind@^1.0.6, call-bind@^1.0.7:
 
 callsites@^3.0.0:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
+  resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
 camelcase-css@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
+  resolved "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
+<<<<<<< HEAD
 caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001578, caniuse-lite@^1.0.30001587:
   version "1.0.30001591"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001591.tgz#16745e50263edc9f395895a7cd468b9f3767cf33"
   integrity sha512-PCzRMei/vXjJyL5mJtzNiUCKP59dm8Apqc3PH8gJkMnMXZGox93RbE76jHsmLwmIo6/3nsYIpJtx0O7u5PqFuQ==
+=======
+caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001286, caniuse-lite@^1.0.30001297:
+  version "1.0.30001301"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001301.tgz"
+  integrity sha512-csfD/GpHMqgEL3V3uIgosvh+SVIQvCh43SNu9HRbP1lnxkKm1kjDG4f32PP571JplkLjfS+mg2p1gxR7MYrrIA==
+
+caniuse-lite@^1.0.30001370:
+  version "1.0.30001390"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001390.tgz"
+  integrity sha512-sS4CaUM+/+vqQUlCvCJ2WtDlV81aWtHhqeEVkLokVJJa3ViN4zDxAGfq9R8i1m90uGHxo99cy10Od+lvn3hf0g==
+
+caniuse-lite@^1.0.30001406:
+  version "1.0.30001410"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001410.tgz"
+  integrity sha512-QoblBnuE+rG0lc3Ur9ltP5q47lbguipa/ncNMyyGuqPk44FxbScWAeEO+k5fSQ8WekdAK4mWqNs1rADDAiN5xQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 ccount@^1.0.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.1.0.tgz#246687debb6014735131be8abab2d93898f8d043"
+  resolved "https://registry.npmjs.org/ccount/-/ccount-1.1.0.tgz"
   integrity sha512-vlNK021QdI7PNeiUh/lKkC/mNHHfV0m/Ad5JoI0TYtlBnJAslM/JIkm/tGC88bkLIwO6OQ5uV6ztS6kVAtCDlg==
 
 ccount@^2.0.0:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/ccount/-/ccount-2.0.1.tgz#17a3bf82302e0870d6da43a01311a8bc02a3ecf5"
+  resolved "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz"
   integrity sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==
 
 chalk@5.3.0:
@@ -1702,7 +3073,7 @@ chalk@5.3.0:
 
 chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
   dependencies:
     ansi-styles "^3.2.1"
@@ -1711,7 +3082,7 @@ chalk@^2.4.1, chalk@^2.4.2:
 
 chalk@^4.0.0, chalk@^4.1.2:
   version "4.1.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
   dependencies:
     ansi-styles "^4.1.0"
@@ -1719,48 +3090,54 @@ chalk@^4.0.0, chalk@^4.1.2:
 
 character-entities-html4@^1.0.0:
   version "1.1.4"
-  resolved "https://registry.yarnpkg.com/character-entities-html4/-/character-entities-html4-1.1.4.tgz#0e64b0a3753ddbf1fdc044c5fd01d0199a02e125"
+  resolved "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-1.1.4.tgz"
   integrity sha512-HRcDxZuZqMx3/a+qrzxdBKBPUpxWEq9xw2OPZ3a/174ihfrQKVsFhqtthBInFy1zZ9GgZyFXOatNujm8M+El3g==
 
 character-entities-html4@^2.0.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/character-entities-html4/-/character-entities-html4-2.1.0.tgz#1f1adb940c971a4b22ba39ddca6b618dc6e56b2b"
+  resolved "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz"
   integrity sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==
 
 character-entities-legacy@^1.0.0:
   version "1.1.4"
-  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz#94bc1845dce70a5bb9d2ecc748725661293d8fc1"
+  resolved "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz"
   integrity sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==
 
 character-entities-legacy@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz#76bc83a90738901d7bc223a9e93759fdd560125b"
+  resolved "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz"
   integrity sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==
 
 character-entities@^1.0.0:
   version "1.2.4"
-  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.4.tgz#e12c3939b7eaf4e5b15e7ad4c5e28e1d48c5b16b"
+  resolved "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz"
   integrity sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==
 
 character-entities@^2.0.0:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-2.0.2.tgz#2d09c2e72cd9523076ccb21157dff66ad43fcc22"
+  resolved "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz"
   integrity sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==
 
 character-reference-invalid@^1.0.0:
   version "1.1.4"
-  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
+  resolved "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz"
   integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
 
 character-reference-invalid@^2.0.0:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz#85c66b041e43b47210faf401278abf808ac45cb9"
+  resolved "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz"
   integrity sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==
 
 chokidar@^3.4.0, chokidar@^3.5.3:
+<<<<<<< HEAD
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
   integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
+=======
+  version "3.5.3"
+  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz"
+  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     anymatch "~3.1.2"
     braces "~3.0.2"
@@ -1774,10 +3151,11 @@ chokidar@^3.4.0, chokidar@^3.5.3:
 
 ci-info@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
+  resolved "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz"
   integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
 
 ci-info@^3.2.0:
+<<<<<<< HEAD
   version "3.9.0"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
   integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==
@@ -1786,91 +3164,122 @@ classnames@*, classnames@^2.2.6:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
   integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
+=======
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz"
+  integrity sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==
+
+classnames@*, classnames@^2.2.6:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 clean-set@^1.1.2:
   version "1.1.2"
-  resolved "https://registry.yarnpkg.com/clean-set/-/clean-set-1.1.2.tgz#76d8bf238c3e27827bfa73073ecdfdc767187070"
+  resolved "https://registry.npmjs.org/clean-set/-/clean-set-1.1.2.tgz"
   integrity sha512-cA8uCj0qSoG9e0kevyOWXwPaELRPVg5Pxp6WskLMwerx257Zfnh8Nl0JBH59d7wQzij2CK7qEfJQK3RjuKKIug==
 
+<<<<<<< HEAD
 cli-cursor@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-4.0.0.tgz#3cecfe3734bf4fe02a8361cbdc0f6fe28c6a57ea"
   integrity sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==
+=======
+clean-stack@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz"
+  integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==
+
+cli-cursor@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz"
+  integrity sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     restore-cursor "^4.0.0"
 
+<<<<<<< HEAD
 cli-truncate@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-4.0.0.tgz#6cc28a2924fee9e25ce91e973db56c7066e6172a"
   integrity sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==
+=======
+cli-truncate@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/cli-truncate/-/cli-truncate-2.1.0.tgz"
+  integrity sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==
+  dependencies:
+    slice-ansi "^3.0.0"
+    string-width "^4.2.0"
+
+cli-truncate@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/cli-truncate/-/cli-truncate-3.1.0.tgz"
+  integrity sha512-wfOBkjXteqSnI59oPcJkcPl/ZmwvMMOj340qUIY1SKZCv0B9Cf4D4fAucRkIKQmsIuYK3x1rrgU7MeGRruiuiA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     slice-ansi "^5.0.0"
     string-width "^7.0.0"
 
 client-only@0.0.1, client-only@^0.0.1:
   version "0.0.1"
-  resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
+  resolved "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
-codesandbox-import-util-types@^1.3.7:
-  version "1.3.7"
-  resolved "https://registry.yarnpkg.com/codesandbox-import-util-types/-/codesandbox-import-util-types-1.3.7.tgz#7a6097e248a75424d13b06b74368cd76bd2b3e10"
-  integrity sha512-8oP3emA0jyEuVOM2FBTpo/AF4C9vxHn14saVWZf2CQ/QhMtonBlNPE98ElrHkW+PFNXiO7Ad52Qr73b03n8qlA==
-
-codesandbox-import-util-types@^2.2.3:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/codesandbox-import-util-types/-/codesandbox-import-util-types-2.2.3.tgz#b354b2f732ad130e119ebd9ead3bda3be5981a54"
-  integrity sha512-Qj00p60oNExthP2oR3vvXmUGjukij+rxJGuiaKM6tyUmSyimdZsqHI/TUvFFClAffk9s7hxGnQgWQ8KCce27qQ==
-
-codesandbox-import-utils@^1.2.3:
-  version "1.3.8"
-  resolved "https://registry.yarnpkg.com/codesandbox-import-utils/-/codesandbox-import-utils-1.3.8.tgz#5576786439c5f37ebd3fee5751e06027a1edef84"
-  integrity sha512-S12zO49QEkldoYLGh5KbkHRLOacg5BCNTue2vlyZXSpuK3oQdArwC/G1hCLKryV460bW3Ecn5xdkpfkUcFeOwQ==
-  dependencies:
-    codesandbox-import-util-types "^1.3.7"
-    istextorbinary "2.2.1"
-    lz-string "^1.4.4"
-
 collapse-white-space@^1.0.2:
   version "1.0.6"
-  resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287"
+  resolved "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.6.tgz"
   integrity sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ==
 
 color-convert@^1.9.0:
   version "1.9.3"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
   dependencies:
     color-name "1.1.3"
 
 color-convert@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz"
   integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
   dependencies:
     color-name "~1.1.4"
 
 color-name@1.1.3:
   version "1.1.3"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
+=======
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
+  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 color-name@~1.1.4:
   version "1.1.4"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+<<<<<<< HEAD
 colorette@^2.0.20:
   version "2.0.20"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a"
   integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
+=======
+colorette@^2.0.16:
+  version "2.0.16"
+  resolved "https://registry.npmjs.org/colorette/-/colorette-2.0.16.tgz"
+  integrity sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 comma-separated-tokens@^1.0.0:
   version "1.0.8"
-  resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
+  resolved "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz"
   integrity sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==
 
 comma-separated-tokens@^2.0.0:
+<<<<<<< HEAD
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz#4e89c9458acb61bc8fef19f4529973b2392839ee"
   integrity sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==
@@ -1879,39 +3288,57 @@ commander@11.1.0:
   version "11.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-11.1.0.tgz#62fdce76006a68e5c1ab3314dc92e800eb83d906"
   integrity sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==
+=======
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.2.tgz"
+  integrity sha512-G5yTt3KQN4Yn7Yk4ed73hlZ1evrFKXeUW3086p3PRFNp7m2vIjI6Pg+Kgb+oyzhd9F2qdcoj67+y3SdxL5XWsg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 commander@^4.0.0:
   version "4.1.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  resolved "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz"
   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"
+  resolved "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz"
   integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
 
 commander@^7.2.0:
   version "7.2.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
+  resolved "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz"
   integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
 
+<<<<<<< HEAD
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
+=======
+commander@^8.3.0:
+  version "8.3.0"
+  resolved "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz"
+  integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
+  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 confusing-browser-globals@^1.0.9:
   version "1.0.11"
-  resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz#ae40e9b57cdd3915408a2805ebd3a5585608dc81"
+  resolved "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz"
   integrity sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==
 
 content-disposition@0.5.4:
   version "0.5.4"
-  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
+  resolved "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz"
   integrity sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==
   dependencies:
     safe-buffer "5.2.1"
 
+<<<<<<< HEAD
 content-type@~1.0.4, content-type@~1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
@@ -1921,25 +3348,50 @@ convert-source-map@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
   integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
+=======
+content-type@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz"
+  integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
+
+convert-source-map@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz"
+  integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
+  dependencies:
+    safe-buffer "~5.1.1"
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 cookie-signature@1.0.6:
   version "1.0.6"
-  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
+  resolved "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz"
   integrity sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==
 
 cookie@0.5.0:
   version "0.5.0"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
+  resolved "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz"
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
+<<<<<<< HEAD
 crelt@^1.0.5:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.6.tgz#7cc898ea74e190fb6ef9dae57f8f81cf7302df72"
   integrity sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==
+=======
+core-js-pure@^3.20.2:
+  version "3.20.3"
+  resolved "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.20.3.tgz"
+  integrity sha512-Q2H6tQ5MtPtcC7f3HxJ48i4Q7T9ybPKgvWyuH7JXIoNa2pm0KuBnycsET/qw1SLLZYfbsbrZQNMeIOClb+6WIA==
+
+crelt@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/crelt/-/crelt-1.0.5.tgz"
+  integrity sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 cross-spawn@^6.0.5:
   version "6.0.5"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
+  resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz"
   integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
   dependencies:
     nice-try "^1.0.4"
@@ -1950,7 +3402,7 @@ cross-spawn@^6.0.5:
 
 cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
   dependencies:
     path-key "^3.1.0"
@@ -1959,14 +3411,14 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
 
 css-blank-pseudo@^0.1.4:
   version "0.1.4"
-  resolved "https://registry.yarnpkg.com/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz#dfdefd3254bf8a82027993674ccf35483bfcb3c5"
+  resolved "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz"
   integrity sha512-LHz35Hr83dnFeipc7oqFDmsjHdljj3TQtxGGiNWSOsTLIAubSm4TEz8qCaKFpk7idaQ1GfWscF4E6mgpBysA1w==
   dependencies:
     postcss "^7.0.5"
 
 css-has-pseudo@^0.10.0:
   version "0.10.0"
-  resolved "https://registry.yarnpkg.com/css-has-pseudo/-/css-has-pseudo-0.10.0.tgz#3c642ab34ca242c59c41a125df9105841f6966ee"
+  resolved "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-0.10.0.tgz"
   integrity sha512-Z8hnfsZu4o/kt+AuFzeGpLVhFOGO9mluyHBaA2bA8aCGTwah5sT3WV/fTHH8UNZUytOIImuGPrl/prlb4oX4qQ==
   dependencies:
     postcss "^7.0.6"
@@ -1974,34 +3426,40 @@ css-has-pseudo@^0.10.0:
 
 css-prefers-color-scheme@^3.1.1:
   version "3.1.1"
-  resolved "https://registry.yarnpkg.com/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz#6f830a2714199d4f0d0d0bb8a27916ed65cff1f4"
+  resolved "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz"
   integrity sha512-MTu6+tMs9S3EUqzmqLXEcgNRbNkkD/TGFvowpeoWJn5Vfq7FMgsmRQs9X5NXAURiOBmOxm/lLjsDNXDE6k9bhg==
   dependencies:
     postcss "^7.0.5"
 
 cssdb@^4.4.0:
   version "4.4.0"
-  resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-4.4.0.tgz#3bf2f2a68c10f5c6a08abd92378331ee803cddb0"
+  resolved "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz"
   integrity sha512-LsTAR1JPEM9TpGhl/0p3nQecC2LJ0kD8X5YARu1hk/9I1gril5vDtMZyNxcEpxxDj34YNck/ucjuoUd66K03oQ==
 
 cssesc@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-2.0.0.tgz#3b13bd1bb1cb36e1bcb5a4dcd27f54c5dcb35703"
+  resolved "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz"
   integrity sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==
 
 cssesc@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
 csstype@^3.0.2:
+<<<<<<< HEAD
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+=======
+  version "3.0.10"
+  resolved "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz"
+  integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 d@1, d@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"
+  resolved "https://registry.npmjs.org/d/-/d-1.0.1.tgz"
   integrity sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==
   dependencies:
     es5-ext "^0.10.50"
@@ -2009,24 +3467,30 @@ d@1, d@^1.0.1:
 
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
-  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
+  resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz"
   integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
 
 date-fns@^2.16.1:
+<<<<<<< HEAD
   version "2.30.0"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
   integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
   dependencies:
     "@babel/runtime" "^7.21.0"
+=======
+  version "2.28.0"
+  resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz"
+  integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 debounce@^1.2.1:
   version "1.2.1"
-  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
+  resolved "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz"
   integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
 
 debug@2.6.9:
   version "2.6.9"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
   dependencies:
     ms "2.0.0"
@@ -2040,27 +3504,58 @@ debug@4.3.4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.
 
 debug@^3.2.7:
   version "3.2.7"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+  resolved "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz"
   integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
   dependencies:
     ms "^2.1.1"
 
+<<<<<<< HEAD
+=======
+debug@^4.0.0, debug@^4.3.4:
+  version "4.3.4"
+  resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
+debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.3:
+  version "4.3.3"
+  resolved "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz"
+  integrity sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==
+  dependencies:
+    ms "2.1.2"
+
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 decode-named-character-reference@^1.0.0:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz#daabac9690874c394c81e4162a0304b35d824f0e"
+  resolved "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz"
   integrity sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==
   dependencies:
     character-entities "^2.0.0"
 
 deep-is@^0.1.3:
   version "0.1.4"
-  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
+  resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
+<<<<<<< HEAD
 define-data-property@^1.0.1, define-data-property@^1.1.2, define-data-property@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
   integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
+=======
+define-properties@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz"
+  integrity sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==
+  dependencies:
+    object-keys "^1.0.12"
+
+define-properties@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz"
+  integrity sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     es-define-property "^1.0.0"
     es-errors "^1.3.0"
@@ -2077,75 +3572,91 @@ define-properties@^1.1.3, define-properties@^1.2.0, define-properties@^1.2.1:
 
 depd@2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
+  resolved "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz"
   integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
 
+<<<<<<< HEAD
 dequal@^2.0.0, dequal@^2.0.3:
+=======
+dequal@^2.0.0, dequal@^2.0.2:
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   version "2.0.3"
-  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
+  resolved "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz"
   integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
 
 destroy@1.2.0:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
+  resolved "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz"
   integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
 
+detect-node-es@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz"
+  integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
+
 didyoumean@^1.2.2:
   version "1.2.2"
-  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
+  resolved "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz"
   integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
 
 diff@^5.0.0:
+<<<<<<< HEAD
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-5.2.0.tgz#26ded047cd1179b78b9537d5ef725503ce1ae531"
   integrity sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==
+=======
+  version "5.1.0"
+  resolved "https://registry.npmjs.org/diff/-/diff-5.1.0.tgz"
+  integrity sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 dir-glob@^3.0.1:
   version "3.0.1"
-  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
+  resolved "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz"
   integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
   dependencies:
     path-type "^4.0.0"
 
 dlv@^1.1.3:
   version "1.1.3"
-  resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
+  resolved "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz"
   integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
 
 doctrine@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
+  resolved "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz"
   integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
   dependencies:
     esutils "^2.0.2"
 
 doctrine@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
+  resolved "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz"
   integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
   dependencies:
     esutils "^2.0.2"
 
+dotenv@^16.0.3:
+  version "16.0.3"
+  resolved "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz"
+  integrity sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==
+
 duplexer@^0.1.2:
   version "0.1.2"
-  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
+  resolved "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz"
   integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
 
 eastasianwidth@^0.2.0:
   version "0.2.0"
-  resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
+  resolved "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz"
   integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
 
-editions@^1.3.3:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/editions/-/editions-1.3.4.tgz#3662cb592347c3168eb8e498a0ff73271d67f50b"
-  integrity sha512-gzao+mxnYDzIysXKMQi/+M1mjy/rjestjg6OPoYTtI+3Izp23oiGZitsl9lPDPiTGXbcSIk1iJWhliSaglxnUg==
-
 ee-first@1.1.1:
   version "1.1.1"
-  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+  resolved "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz"
   integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
 
+<<<<<<< HEAD
 electron-to-chromium@^1.4.668:
   version "1.4.685"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.685.tgz#3ce988e4dfbb3aa984840394b1d7064c01ad74c1"
@@ -2155,41 +3666,65 @@ emoji-regex@^10.3.0:
   version "10.3.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.3.0.tgz#76998b9268409eb3dae3de989254d456e70cfe23"
   integrity sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==
+=======
+electron-to-chromium@^1.4.17:
+  version "1.4.51"
+  resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.51.tgz"
+  integrity sha512-JNEmcYl3mk1tGQmy0EvL5eik/CKSBuzAyGP0QFdG6LIgxQe3II0BL1m2zKc2MZMf3uGqHWE1TFddJML0RpjSHQ==
+
+electron-to-chromium@^1.4.202:
+  version "1.4.241"
+  resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.241.tgz"
+  integrity sha512-e7Wsh4ilaioBZ5bMm6+F4V5c11dh56/5Jwz7Hl5Tu1J7cnB+Pqx5qIF2iC7HPpfyQMqGSvvLP5bBAIDd2gAtGw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 emoji-regex@^8.0.0:
   version "8.0.0"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
+  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
 emoji-regex@^9.2.2:
   version "9.2.2"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
+  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
 encodeurl@~1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+  resolved "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz"
   integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
 
 enquirer@^2.3.5:
+<<<<<<< HEAD
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.4.1.tgz#93334b3fbd74fc7097b224ab4a8fb7e40bf4ae56"
   integrity sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==
+=======
+  version "2.3.6"
+  resolved "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz"
+  integrity sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     ansi-colors "^4.1.1"
     strip-ansi "^6.0.1"
 
 error-ex@^1.3.1:
   version "1.3.2"
-  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
+  resolved "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz"
   integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
   dependencies:
     is-arrayish "^0.2.1"
 
+<<<<<<< HEAD
 es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.22.4:
   version "1.22.4"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.22.4.tgz#26eb2e7538c3271141f5754d31aabfdb215f27bf"
   integrity sha512-vZYJlk2u6qHYxBOTjAeg7qUxHdNfih64Uu2J8QqWgXZ2cri0ZpJAkzDUK/q593+mvKwlxyaxr6F1Q+3LKoQRgg==
+=======
+es-abstract@^1.19.0, es-abstract@^1.19.1:
+  version "1.19.1"
+  resolved "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.1.tgz"
+  integrity sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     array-buffer-byte-length "^1.0.1"
     arraybuffer.prototype.slice "^1.0.3"
@@ -2289,17 +3824,24 @@ es-shim-unscopables@^1.0.0, es-shim-unscopables@^1.0.2:
 
 es-to-primitive@^1.2.1:
   version "1.2.1"
-  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
+  resolved "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz"
   integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
   dependencies:
     is-callable "^1.1.4"
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
+<<<<<<< HEAD
 es5-ext@^0.10.35, es5-ext@^0.10.50, es5-ext@^0.10.62, es5-ext@~0.10.14:
   version "0.10.64"
   resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.64.tgz#12e4ffb48f1ba2ea777f1fcdd1918ef73ea21714"
   integrity sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==
+=======
+es5-ext@^0.10.35, es5-ext@^0.10.50:
+  version "0.10.62"
+  resolved "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.62.tgz"
+  integrity sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     es6-iterator "^2.0.3"
     es6-symbol "^3.1.3"
@@ -2308,7 +3850,7 @@ es5-ext@^0.10.35, es5-ext@^0.10.50, es5-ext@^0.10.62, es5-ext@~0.10.14:
 
 es6-iterator@^2.0.3:
   version "2.0.3"
-  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
+  resolved "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz"
   integrity sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==
   dependencies:
     d "1"
@@ -2317,40 +3859,56 @@ es6-iterator@^2.0.3:
 
 es6-symbol@^3, es6-symbol@^3.1.1, es6-symbol@^3.1.3:
   version "3.1.3"
-  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.3.tgz#bad5d3c1bcdac28269f4cb331e431c78ac705d18"
+  resolved "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz"
   integrity sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==
   dependencies:
     d "^1.0.1"
     ext "^1.1.2"
 
 escalade@^3.1.1:
+<<<<<<< HEAD
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.2.tgz#54076e9ab29ea5bf3d8f1ed62acffbb88272df27"
   integrity sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==
+=======
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz"
+  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
+
+escape-carriage@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.npmjs.org/escape-carriage/-/escape-carriage-1.3.1.tgz"
+  integrity sha512-GwBr6yViW3ttx1kb7/Oh+gKQ1/TrhYwxKqVmg5gS+BK+Qe2KrOa/Vh7w3HPBvgGf0LfcDGoY9I6NHKoA5Hozhw==
 
 escape-html@~1.0.3:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+  resolved "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz"
   integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
 
 escape-string-regexp@^1.0.5:
   version "1.0.5"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
+=======
+  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz"
+  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 escape-string-regexp@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
+  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz"
   integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
 
 escape-string-regexp@^5.0.0:
   version "5.0.0"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz#4683126b500b61762f2dbebace1806e8be31b1c8"
+  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz"
   integrity sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==
 
 eslint-config-next@12.0.3:
   version "12.0.3"
-  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-12.0.3.tgz#a85ad423997f098b41b61c279472e0642e200a9e"
+  resolved "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-12.0.3.tgz"
   integrity sha512-q+mX6jhk3HrCo39G18MLhiC6f8zJnTA00f30RSuVUWsv45SQUm6r62oXVqrbAgMEybe0yx/GDRvfA6LvSolw6Q==
   dependencies:
     "@next/eslint-plugin-next" "12.0.3"
@@ -2365,24 +3923,37 @@ eslint-config-next@12.0.3:
 
 eslint-config-react-app@^5.2.1:
   version "5.2.1"
-  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-5.2.1.tgz#698bf7aeee27f0cea0139eaef261c7bf7dd623df"
+  resolved "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-5.2.1.tgz"
   integrity sha512-pGIZ8t0mFLcV+6ZirRgYK6RVqUIKRIi9MmgzUEmrIknsn3AdO0I32asO86dJgloHq+9ZPl8UIg8mYrvgP5u2wQ==
   dependencies:
     confusing-browser-globals "^1.0.9"
 
+<<<<<<< HEAD
 eslint-import-resolver-node@^0.3.4, eslint-import-resolver-node@^0.3.9:
   version "0.3.9"
   resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz#d4eaac52b8a2e7c3cd1903eb00f7e053356118ac"
   integrity sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==
+=======
+eslint-import-resolver-node@^0.3.4, eslint-import-resolver-node@^0.3.6:
+  version "0.3.6"
+  resolved "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz"
+  integrity sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     debug "^3.2.7"
     is-core-module "^2.13.0"
     resolve "^1.22.4"
 
 eslint-import-resolver-typescript@^2.4.0:
+<<<<<<< HEAD
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.7.1.tgz#a90a4a1c80da8d632df25994c4c5fdcdd02b8751"
   integrity sha512-00UbgGwV8bSgUv34igBDbTOtKhqoRMy9bFjNehT40bXg6585PNIct8HhXZ0SybqB9rWtXj9crcku8ndDn/gIqQ==
+=======
+  version "2.5.0"
+  resolved "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.5.0.tgz"
+  integrity sha512-qZ6e5CFr+I7K4VVhQu3M/9xGv9/YmwsEXrsm3nimw8vWaVHRDrQRp26BgCypTxBp3vUp4o5aVEJRiy0F2DFddQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     debug "^4.3.4"
     glob "^7.2.0"
@@ -2390,24 +3961,37 @@ eslint-import-resolver-typescript@^2.4.0:
     resolve "^1.22.0"
     tsconfig-paths "^3.14.1"
 
+<<<<<<< HEAD
 eslint-module-utils@^2.8.0:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.8.1.tgz#52f2404300c3bd33deece9d7372fb337cc1d7c34"
   integrity sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==
+=======
+eslint-module-utils@^2.7.2:
+  version "2.7.2"
+  resolved "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.2.tgz"
+  integrity sha512-zquepFnWCY2ISMFwD/DqzaM++H+7PDzOpUvotJWm/y1BAFt5R4oeULgdrTejKqLkz7MA/tgstsUMNYc7wNdTrg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     debug "^3.2.7"
 
 eslint-plugin-flowtype@4.x:
   version "4.7.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-4.7.0.tgz#903a6ea3eb5cbf4c7ba7fa73cc43fc39ab7e4a70"
+  resolved "https://registry.npmjs.org/eslint-plugin-flowtype/-/eslint-plugin-flowtype-4.7.0.tgz"
   integrity sha512-M+hxhSCk5QBEValO5/UqrS4UunT+MgplIJK5wA1sCtXjzBcZkpTGRwxmLHhGpbHcrmQecgt6ZL/KDdXWqGB7VA==
   dependencies:
     lodash "^4.17.15"
 
 eslint-plugin-import@2.x, eslint-plugin-import@^2.22.1:
+<<<<<<< HEAD
   version "2.29.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz#d45b37b5ef5901d639c15270d74d46d161150643"
   integrity sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==
+=======
+  version "2.25.4"
+  resolved "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.25.4.tgz"
+  integrity sha512-/KJBASVFxpu0xg1kIBn9AUa8hQVnszpwgE7Ld0lKAlx7Ie87yzEzCgSkekt+le/YVhiaosO4Y14GDAOc41nfxA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     array-includes "^3.1.7"
     array.prototype.findlastindex "^1.2.3"
@@ -2428,9 +4012,15 @@ eslint-plugin-import@2.x, eslint-plugin-import@^2.22.1:
     tsconfig-paths "^3.15.0"
 
 eslint-plugin-jsx-a11y@6.x, eslint-plugin-jsx-a11y@^6.4.1:
+<<<<<<< HEAD
   version "6.8.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.8.0.tgz#2fa9c701d44fcd722b7c771ec322432857fcbad2"
   integrity sha512-Hdh937BS3KdwwbBaKd5+PLCOmYY6U4f2h9Z2ktwtNKvIdIEu137rjYbcb9ApSbVJfWxANNuiKTD/9tOKjK9qOA==
+=======
+  version "6.5.1"
+  resolved "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.5.1.tgz"
+  integrity sha512-sVCFKX9fllURnXT2JwLN5Qgo24Ug5NF6dxhkmxsMEUZhXRcGg+X3e1JbJ84YePQKBl5E0ZjAH5Q4rkdcGY99+g==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@babel/runtime" "^7.23.2"
     aria-query "^5.3.0"
@@ -2450,6 +4040,7 @@ eslint-plugin-jsx-a11y@6.x, eslint-plugin-jsx-a11y@^6.4.1:
     object.fromentries "^2.0.7"
 
 eslint-plugin-react-hooks@^0.0.0-experimental-fabef7a6b-20221215:
+<<<<<<< HEAD
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-0.0.0.tgz#9988f14082a159931c3dfa9ba699130457da927a"
   integrity sha512-SXyU7C3E8AJbXKMdb10P/zHazcxzfuWR5OFwAVZKXVU7P/H56NLszVG6WdQBo9Pt80FfnPXtUGGbWhs3/98N4w==
@@ -2463,6 +4054,21 @@ eslint-plugin-react@7.x, eslint-plugin-react@^7.23.1:
   version "7.33.2"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.33.2.tgz#69ee09443ffc583927eafe86ffebb470ee737608"
   integrity sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==
+=======
+  version "0.0.0-experimental-fabef7a6b-20221215"
+  resolved "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-0.0.0-experimental-fabef7a6b-20221215.tgz"
+  integrity sha512-y1lJAS4gWXyP6kXl2jA9ZJdFFfcMwNjMEZEEXn9LHOWEhnAgKgcqZ/NhNWAphiJLYOZ33kne1hbhDlGCcrdx5g==
+
+eslint-plugin-react-hooks@^4.2.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz"
+  integrity sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==
+
+eslint-plugin-react@7.x, eslint-plugin-react@^7.23.1:
+  version "7.28.0"
+  resolved "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.28.0.tgz"
+  integrity sha512-IOlFIRHzWfEQQKcAD4iyYDndHwTQiCMcJVJjxempf203jnNLUnW34AXLrV33+nEXoifJE2ZEGmcjKPL8957eSw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     array-includes "^3.1.6"
     array.prototype.flatmap "^1.3.1"
@@ -2483,7 +4089,7 @@ eslint-plugin-react@7.x, eslint-plugin-react@^7.23.1:
 
 eslint-scope@^5.1.1:
   version "5.1.1"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
+  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz"
   integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
   dependencies:
     esrecurse "^4.3.0"
@@ -2491,29 +4097,45 @@ eslint-scope@^5.1.1:
 
 eslint-utils@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
+  resolved "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz"
   integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
+<<<<<<< HEAD
+=======
+eslint-utils@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz"
+  integrity sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==
+  dependencies:
+    eslint-visitor-keys "^2.0.0"
+
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
   version "1.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
+  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz"
   integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
 
 eslint-visitor-keys@^2.0.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
+  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz"
   integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
 
 eslint-visitor-keys@^3.3.0:
+<<<<<<< HEAD
   version "3.4.3"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
   integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
+=======
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz"
+  integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 eslint@7.x:
   version "7.32.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.32.0.tgz#c6d328a14be3fb08c8d1d21e12c02fdb7a2a812d"
+  resolved "https://registry.npmjs.org/eslint/-/eslint-7.32.0.tgz"
   integrity sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==
   dependencies:
     "@babel/code-frame" "7.12.11"
@@ -2569,7 +4191,7 @@ esniff@^2.0.1:
 
 espree@^7.3.0, espree@^7.3.1:
   version "7.3.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-7.3.1.tgz#f2df330b752c6f55019f8bd89b7660039c1bbbb6"
+  resolved "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz"
   integrity sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==
   dependencies:
     acorn "^7.4.0"
@@ -2578,50 +4200,69 @@ espree@^7.3.0, espree@^7.3.1:
 
 esprima@^4.0.0:
   version "4.0.1"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  resolved "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
 esquery@^1.4.0:
+<<<<<<< HEAD
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.5.0.tgz#6ce17738de8577694edd7361c57182ac8cb0db0b"
   integrity sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==
+=======
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz"
+  integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     estraverse "^5.1.0"
 
 esrecurse@^4.3.0:
   version "4.3.0"
-  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  resolved "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz"
   integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
   dependencies:
     estraverse "^5.2.0"
 
 estraverse@^4.1.1:
   version "4.3.0"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
+  resolved "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz"
   integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
 
 estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
   version "5.3.0"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
+  resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz"
   integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
 
 estree-util-attach-comments@^2.0.0:
+<<<<<<< HEAD
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/estree-util-attach-comments/-/estree-util-attach-comments-2.1.1.tgz#ee44f4ff6890ee7dfb3237ac7810154c94c63f84"
   integrity sha512-+5Ba/xGGS6mnwFbXIuQiDPTbuTxuMCooq3arVv7gPZtYpjp+VXH/NkHAP35OOefPhNG/UGqU3vt/LTABwcHX0w==
+=======
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/estree-util-attach-comments/-/estree-util-attach-comments-2.1.0.tgz"
+  integrity sha512-rJz6I4L0GaXYtHpoMScgDIwM0/Vwbu5shbMeER596rB2D1EWF6+Gj0e0UKzJPZrpoOc87+Q2kgVFHfjAymIqmw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/estree" "^1.0.0"
 
 estree-util-build-jsx@^2.0.0:
+<<<<<<< HEAD
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/estree-util-build-jsx/-/estree-util-build-jsx-2.2.2.tgz#32f8a239fb40dc3f3dca75bb5dcf77a831e4e47b"
   integrity sha512-m56vOXcOBuaF+Igpb9OPAy7f9w9OIkb5yhjsZuaPm7HoGi4oTOQi0h2+yZ+AtKklYFZ+rPC4n0wYCJCEU1ONqg==
+=======
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/estree-util-build-jsx/-/estree-util-build-jsx-2.2.0.tgz"
+  integrity sha512-apsfRxF9uLrqosApvHVtYZjISPvTJ+lBiIydpC+9wE6cF6ssbhnjyQLqaIjgzGxvC2Hbmec1M7g91PoBayYoQQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/estree-jsx" "^1.0.0"
     estree-util-is-identifier-name "^2.0.0"
     estree-walker "^3.0.0"
 
 estree-util-is-identifier-name@^2.0.0:
+<<<<<<< HEAD
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/estree-util-is-identifier-name/-/estree-util-is-identifier-name-2.1.0.tgz#fb70a432dcb19045e77b05c8e732f1364b4b49b2"
   integrity sha512-bEN9VHRyXAUOjkKVQVvArFym08BTWB0aJPppZZr0UNyAqWsLaVfAqP7hbaTJjzHifmB5ebnR8Wm7r7yGN/HonQ==
@@ -2630,36 +4271,59 @@ estree-util-to-js@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/estree-util-to-js/-/estree-util-to-js-1.2.0.tgz#0f80d42443e3b13bd32f7012fffa6f93603f4a36"
   integrity sha512-IzU74r1PK5IMMGZXUVZbmiu4A1uhiPgW5hm1GjcOfr4ZzHaMPpLNJjR7HjXiIOzi25nZDrgFTobHTkV5Q6ITjA==
+=======
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-2.0.1.tgz"
+  integrity sha512-rxZj1GkQhY4x1j/CSnybK9cGuMFQYFPLq0iNyopqf14aOVLFtMv7Esika+ObJWPWiOHuMOAHz3YkWoLYYRnzWQ==
+
+estree-util-to-js@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/estree-util-to-js/-/estree-util-to-js-1.1.0.tgz"
+  integrity sha512-490lbfCcpLk+ofK6HCgqDfYs4KAfq6QVvDw3+Bm1YoKRgiOjKiKYGAVQE1uwh7zVxBgWhqp4FDtp5SqunpUk1A==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/estree-jsx" "^1.0.0"
     astring "^1.8.0"
     source-map "^0.7.0"
 
 estree-util-visit@^1.0.0:
+<<<<<<< HEAD
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/estree-util-visit/-/estree-util-visit-1.2.1.tgz#8bc2bc09f25b00827294703835aabee1cc9ec69d"
   integrity sha512-xbgqcrkIVbIG+lI/gzbvd9SGTJL4zqJKBFttUl5pP27KhAjtMKbX/mQXJ7qgyXpMgVy/zvpm0xoQQaGL8OloOw==
+=======
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/estree-util-visit/-/estree-util-visit-1.2.0.tgz"
+  integrity sha512-wdsoqhWueuJKsh5hqLw3j8lwFqNStm92VcwtAOAny8g/KS/l5Y8RISjR4k5W6skCj3Nirag/WUCMS0Nfy3sgsg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/estree-jsx" "^1.0.0"
     "@types/unist" "^2.0.0"
 
 estree-walker@^3.0.0:
+<<<<<<< HEAD
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-3.0.3.tgz#67c3e549ec402a487b4fc193d1953a524752340d"
   integrity sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==
   dependencies:
     "@types/estree" "^1.0.0"
+=======
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.1.tgz"
+  integrity sha512-woY0RUD87WzMBUiZLx8NsYr23N5BKsOMZHhu2hoNRVh6NXGfoiT1KOL8G3UHlJAnEDGmfa5ubNA/AacfG+Kb0g==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 esutils@^2.0.2:
   version "2.0.3"
-  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
+  resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
 etag@~1.8.1:
   version "1.8.1"
-  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+  resolved "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz"
   integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
 
+<<<<<<< HEAD
 event-emitter@^0.3.5:
   version "0.3.5"
   resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39"
@@ -2677,6 +4341,12 @@ execa@8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/execa/-/execa-8.0.1.tgz#51f6a5943b580f963c3ca9c6321796db8cc39b8c"
   integrity sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==
+=======
+execa@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz"
+  integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     cross-spawn "^7.0.3"
     get-stream "^8.0.1"
@@ -2689,9 +4359,15 @@ execa@8.0.1:
     strip-final-newline "^3.0.0"
 
 express@^4.17.1:
+<<<<<<< HEAD
   version "4.18.2"
   resolved "https://registry.yarnpkg.com/express/-/express-4.18.2.tgz#3fabe08296e930c796c19e3c516979386ba9fd59"
   integrity sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==
+=======
+  version "4.18.1"
+  resolved "https://registry.npmjs.org/express/-/express-4.18.1.tgz"
+  integrity sha512-zZBcOX9TfehHQhtupq57OF8lFZ3UZi08Y97dwFCkD8p9d/d2Y3M+ykKcwaMDEL+4qyUolgBDX6AblpR3fL212Q==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     accepts "~1.3.8"
     array-flatten "1.1.1"
@@ -2727,31 +4403,53 @@ express@^4.17.1:
 
 ext@^1.1.2:
   version "1.7.0"
-  resolved "https://registry.yarnpkg.com/ext/-/ext-1.7.0.tgz#0ea4383c0103d60e70be99e9a7f11027a33c4f5f"
+  resolved "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz"
   integrity sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==
   dependencies:
     type "^2.7.2"
 
 extend-shallow@^2.0.1:
   version "2.0.1"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
   integrity sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==
+=======
+  resolved "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz"
+  integrity sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     is-extendable "^0.1.0"
 
 extend@^3.0.0:
   version "3.0.2"
-  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+  resolved "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
 
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
-  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+<<<<<<< HEAD
 fast-glob@^3.2.9, fast-glob@^3.3.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
+=======
+fast-glob@^3.2.9:
+  version "3.2.11"
+  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz"
+  integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
+  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.3.0:
+  version "3.3.2"
+  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz"
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
@@ -2762,11 +4460,12 @@ fast-glob@^3.2.9, fast-glob@^3.3.0:
 
 fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz"
   integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
 
 fast-levenshtein@^2.0.6:
   version "2.0.6"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
@@ -2774,33 +4473,42 @@ fastq@^1.6.0:
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.17.1.tgz#2a523f07a4e7b1e81a42b91b8bf2254107753b47"
   integrity sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==
+=======
+  resolved "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz"
+  integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
+
+fastq@^1.6.0:
+  version "1.13.0"
+  resolved "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz"
+  integrity sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     reusify "^1.0.4"
 
 fault@^2.0.0:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/fault/-/fault-2.0.1.tgz#d47ca9f37ca26e4bd38374a7c500b5a384755b6c"
+  resolved "https://registry.npmjs.org/fault/-/fault-2.0.1.tgz"
   integrity sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==
   dependencies:
     format "^0.2.0"
 
 file-entry-cache@^6.0.1:
   version "6.0.1"
-  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
+  resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz"
   integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
   dependencies:
     flat-cache "^3.0.4"
 
 fill-range@^7.0.1:
   version "7.0.1"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz"
   integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
   dependencies:
     to-regex-range "^5.0.1"
 
 finalhandler@1.2.0:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.2.0.tgz#7d23fe5731b207b4640e4fcd00aec1f9207a7b32"
+  resolved "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz"
   integrity sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==
   dependencies:
     debug "2.6.9"
@@ -2811,30 +4519,53 @@ finalhandler@1.2.0:
     statuses "2.0.1"
     unpipe "~1.0.0"
 
+<<<<<<< HEAD
+=======
+find-up@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz"
+  integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c=
+  dependencies:
+    locate-path "^2.0.0"
+
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 find-yarn-workspace-root@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz#f47fb8d239c900eb78179aa81b66673eac88f7bd"
+  resolved "https://registry.npmjs.org/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz"
   integrity sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==
   dependencies:
     micromatch "^4.0.2"
 
 flat-cache@^3.0.4:
+<<<<<<< HEAD
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.2.0.tgz#2c0c2d5040c99b1632771a9d105725c0115363ee"
   integrity sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==
+=======
+  version "3.0.4"
+  resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz"
+  integrity sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     flatted "^3.2.9"
     keyv "^4.5.3"
     rimraf "^3.0.2"
 
+<<<<<<< HEAD
 flatted@^3.2.9:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a"
   integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==
+=======
+flatted@^3.1.0:
+  version "3.2.4"
+  resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.4.tgz"
+  integrity sha512-8/sOawo8tJ4QOBX8YlQBMxL8+RLZfxMQOif9o0KUKTNTjMYElWPE0r/m5VNFxTRd0NSw8qSy8dajrwX4RYI1Hw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 flatten@^1.0.2:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b"
+  resolved "https://registry.npmjs.org/flatten/-/flatten-1.0.3.tgz"
   integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==
 
 for-each@^0.3.3:
@@ -2854,27 +4585,47 @@ foreground-child@^3.1.0:
 
 format@^0.2.0:
   version "0.2.2"
-  resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
+  resolved "https://registry.npmjs.org/format/-/format-0.2.2.tgz"
   integrity sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==
 
 forwarded@0.2.0:
   version "0.2.0"
-  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
+  resolved "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz"
   integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
 
+<<<<<<< HEAD
 fraction.js@^4.3.7:
   version "4.3.7"
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
+=======
+fraction.js@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.2.tgz"
+  integrity sha512-o2RiJQ6DZaR/5+Si0qJUIy637QMRudSi9kU/FFzx9EZazrIdnBgpU+3sEWCxAVhH2RtxW2Oz+T4p2o8uOPVcgA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 fresh@0.5.2:
   version "0.5.2"
-  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+  resolved "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz"
   integrity sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==
 
+<<<<<<< HEAD
 fs-extra@^9.0.0, fs-extra@^9.0.1:
+=======
+fs-extra@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz"
+  integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
+fs-extra@^9.0.1:
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   version "9.1.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
+  resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz"
   integrity sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==
   dependencies:
     at-least-node "^1.0.0"
@@ -2884,6 +4635,7 @@ fs-extra@^9.0.0, fs-extra@^9.0.1:
 
 fs.realpath@^1.0.0:
   version "1.0.0"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
@@ -2922,11 +4674,32 @@ ga-lite@^2.1.4:
   resolved "https://registry.yarnpkg.com/ga-lite/-/ga-lite-2.1.6.tgz#829fcc6bf0637675fec1c52313ccdee49cc06642"
   integrity sha512-zhRorLrhoXl2wIAq13rIdPEQN6uu1SpQG/sGgsRPMDKWXmj7ZpMzP/6k/OtCtGJiJlsZZl/sqoalybkZ9r7cYQ==
 
+=======
+  resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
+  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
+
+fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+function-bind@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
+  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+
+functional-red-black-tree@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz"
+  integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
+
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
-  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
+  resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
+<<<<<<< HEAD
 get-east-asian-width@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/get-east-asian-width/-/get-east-asian-width-1.2.0.tgz#5e6ebd9baee6fb8b7b6bd505221065f0cd91f64e"
@@ -2936,6 +4709,31 @@ get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
   integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
+=======
+get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz"
+  integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+
+get-nonce@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz"
+  integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
+
+get-stream@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz"
+  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
+
+get-symbol-description@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz"
+  integrity sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     es-errors "^1.3.0"
     function-bind "^1.1.2"
@@ -2958,32 +4756,52 @@ get-symbol-description@^1.0.2:
     get-intrinsic "^1.2.4"
 
 github-slugger@^1.0.0, github-slugger@^1.3.0:
+<<<<<<< HEAD
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-1.5.0.tgz#17891bbc73232051474d68bd867a34625c955f7d"
   integrity sha512-wIh+gKBI9Nshz2o46B0B3f5k/W+WI9ZAv6y5Dn5WJ5SK1t0TnDimB4WE5rmTD05ZAIn8HALCZVmCsvj0w0v0lw==
+=======
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/github-slugger/-/github-slugger-1.4.0.tgz"
+  integrity sha512-w0dzqw/nt51xMVmlaV1+JRzN+oCa1KfcgGEWhxUG16wbdA+Xnt/yoFO8Z8x/V82ZcZ0wy6ln9QDup5avbhiDhQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
   dependencies:
     is-glob "^4.0.1"
 
 glob-parent@^6.0.2:
   version "6.0.2"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz"
   integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
   dependencies:
     is-glob "^4.0.3"
 
+<<<<<<< HEAD
 glob-to-regexp@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
+=======
+glob@7.1.6:
+  version "7.1.6"
+  resolved "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz"
+  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"
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 glob@7.1.7:
   version "7.1.7"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
+  resolved "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz"
   integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
   dependencies:
     fs.realpath "^1.0.0"
@@ -2993,6 +4811,7 @@ glob@7.1.7:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+<<<<<<< HEAD
 glob@^10.3.10:
   version "10.3.10"
   resolved "https://registry.yarnpkg.com/glob/-/glob-10.3.10.tgz#0351ebb809fd187fe421ab96af83d3a70715df4b"
@@ -3008,6 +4827,12 @@ glob@^7.1.3, glob@^7.2.0:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
+=======
+glob@^7.1.3, glob@^7.1.7:
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz"
+  integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     fs.realpath "^1.0.0"
     inflight "^1.0.4"
@@ -3018,13 +4843,19 @@ glob@^7.1.3, glob@^7.2.0:
 
 globals@^11.1.0:
   version "11.12.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
+  resolved "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
 globals@^13.6.0, globals@^13.9.0:
+<<<<<<< HEAD
   version "13.24.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
   integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==
+=======
+  version "13.12.0"
+  resolved "https://registry.npmjs.org/globals/-/globals-13.12.0.tgz"
+  integrity sha512-uS8X6lSKN2JumVoXrbUz+uG4BYG+eiawqm3qFcT7ammfbUHeCBoJMlHcec/S3krSk73/AE/f0szYFmgAA3kYZg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     type-fest "^0.20.2"
 
@@ -3037,7 +4868,7 @@ globalthis@^1.0.3:
 
 globby@^11.0.1, globby@^11.0.3, globby@^11.1.0:
   version "11.1.0"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
+  resolved "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz"
   integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
   dependencies:
     array-union "^2.1.0"
@@ -3055,6 +4886,7 @@ gopd@^1.0.1:
     get-intrinsic "^1.1.3"
 
 graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
+<<<<<<< HEAD
   version "4.2.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
@@ -3063,10 +4895,15 @@ graphemer@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
   integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
+=======
+  version "4.2.9"
+  resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz"
+  integrity sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 gray-matter@^4.0.2:
   version "4.0.3"
-  resolved "https://registry.yarnpkg.com/gray-matter/-/gray-matter-4.0.3.tgz#e893c064825de73ea1f5f7d88c7a9f7274288798"
+  resolved "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz"
   integrity sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==
   dependencies:
     js-yaml "^3.13.1"
@@ -3076,11 +4913,12 @@ gray-matter@^4.0.2:
 
 gzip-size@^6.0.0:
   version "6.0.0"
-  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462"
+  resolved "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz"
   integrity sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==
   dependencies:
     duplexer "^0.1.2"
 
+<<<<<<< HEAD
 has-bigints@^1.0.1, has-bigints@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
@@ -3090,18 +4928,43 @@ has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
   integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==
+=======
+has-bigints@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz"
+  integrity sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz"
+  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 has-flag@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
+<<<<<<< HEAD
 has-property-descriptors@^1.0.0, has-property-descriptors@^1.0.1, has-property-descriptors@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
   integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
   dependencies:
     es-define-property "^1.0.0"
+=======
+has-property-descriptors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz"
+  integrity sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==
+  dependencies:
+    get-intrinsic "^1.1.1"
+
+has-symbols@^1.0.1, has-symbols@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz"
+  integrity sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 has-proto@^1.0.1, has-proto@^1.0.3:
   version "1.0.3"
@@ -3110,39 +4973,59 @@ has-proto@^1.0.1, has-proto@^1.0.3:
 
 has-symbols@^1.0.2, has-symbols@^1.0.3:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
+  resolved "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz"
   integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
 
+<<<<<<< HEAD
 has-tostringtag@^1.0.0, has-tostringtag@^1.0.1, has-tostringtag@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz#2cdc42d40bef2e5b4eeab7c01a73c54ce7ab5abc"
   integrity sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==
+=======
+has-tostringtag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz"
+  integrity sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     has-symbols "^1.0.3"
 
+<<<<<<< HEAD
 hasown@^2.0.0, hasown@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.1.tgz#26f48f039de2c0f8d3356c223fb8d50253519faa"
   integrity sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==
+=======
+has@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/has/-/has-1.0.3.tgz"
+  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     function-bind "^1.1.2"
 
 hast-util-is-element@^1.0.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/hast-util-is-element/-/hast-util-is-element-1.1.0.tgz#3b3ed5159a2707c6137b48637fbfe068e175a425"
+  resolved "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-1.1.0.tgz"
   integrity sha512-oUmNua0bFbdrD/ELDSSEadRVtWZOf3iF6Lbv81naqsIV99RnSCieTbWuWCY8BAeEfKJTKl0gRdokv+dELutHGQ==
 
 hast-util-sanitize@^3.0.0:
   version "3.0.2"
-  resolved "https://registry.yarnpkg.com/hast-util-sanitize/-/hast-util-sanitize-3.0.2.tgz#b0b783220af528ba8fe6999f092d138908678520"
+  resolved "https://registry.npmjs.org/hast-util-sanitize/-/hast-util-sanitize-3.0.2.tgz"
   integrity sha512-+2I0x2ZCAyiZOO/sb4yNLFmdwPBnyJ4PBkVTUMKMqBwYNA+lXSgOmoRXlJFazoyid9QPogRRKgKhVEodv181sA==
   dependencies:
     xtend "^4.0.0"
 
 hast-util-to-estree@^2.0.0:
+<<<<<<< HEAD
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/hast-util-to-estree/-/hast-util-to-estree-2.3.3.tgz#da60142ffe19a6296923ec222aba73339c8bf470"
   integrity sha512-ihhPIUPxN0v0w6M5+IiAZZrn0LH2uZomeWwhn7uP7avZC6TE7lIiEh2yBMPr5+zi1aUCXq6VoYRgs2Bw9xmycQ==
+=======
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/hast-util-to-estree/-/hast-util-to-estree-2.1.0.tgz"
+  integrity sha512-Vwch1etMRmm89xGgz+voWXvVHba2iiMdGMKmaMfYt35rbVtFDq8JNwwAIvi8zHMkO6Gvqo9oTMwJTmzVRfXh4g==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/estree" "^1.0.0"
     "@types/estree-jsx" "^1.0.0"
@@ -3162,7 +5045,7 @@ hast-util-to-estree@^2.0.0:
 
 hast-util-to-html@^7.0.0:
   version "7.1.3"
-  resolved "https://registry.yarnpkg.com/hast-util-to-html/-/hast-util-to-html-7.1.3.tgz#9f339ca9bea71246e565fc79ff7dbfe98bb50f5e"
+  resolved "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-7.1.3.tgz"
   integrity sha512-yk2+1p3EJTEE9ZEUkgHsUSVhIpCsL/bvT8E5GzmWc+N1Po5gBw+0F8bo7dpxXR0nu0bQVxVZGX2lBGF21CmeDw==
   dependencies:
     ccount "^1.0.0"
@@ -3178,17 +5061,23 @@ hast-util-to-html@^7.0.0:
 
 hast-util-whitespace@^1.0.0:
   version "1.0.4"
-  resolved "https://registry.yarnpkg.com/hast-util-whitespace/-/hast-util-whitespace-1.0.4.tgz#e4fe77c4a9ae1cb2e6c25e02df0043d0164f6e41"
+  resolved "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-1.0.4.tgz"
   integrity sha512-I5GTdSfhYfAPNztx2xJRQpG8cuDSNt599/7YUn7Gx/WxNMsG+a835k97TDkFgk123cwjfwINaZknkKkphx/f2A==
 
 hast-util-whitespace@^2.0.0:
+<<<<<<< HEAD
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/hast-util-whitespace/-/hast-util-whitespace-2.0.1.tgz#0ec64e257e6fc216c7d14c8a1b74d27d650b4557"
   integrity sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==
+=======
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-2.0.0.tgz"
+  integrity sha512-Pkw+xBHuV6xFeJprJe2BBEoDV+AvQySaz3pPDRUs5PNZEMQjpXJJueqrpcHIXxnWTcAGi/UOCgVShlkY6kLoqg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 hosted-git-info@^2.1.4:
   version "2.8.9"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
+  resolved "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz"
   integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
 
 html-escaper@^2.0.2:
@@ -3198,12 +5087,12 @@ html-escaper@^2.0.2:
 
 html-void-elements@^1.0.0:
   version "1.0.5"
-  resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-1.0.5.tgz#ce9159494e86d95e45795b166c2021c2cfca4483"
+  resolved "https://registry.npmjs.org/html-void-elements/-/html-void-elements-1.0.5.tgz"
   integrity sha512-uE/TxKuyNIcx44cIWnjr/rfIATDH7ZaOMmstu0CwhFG1Dunhlp4OC6/NMbhiwoq5BpW0ubi303qnEk/PZj614w==
 
 http-errors@2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-2.0.0.tgz#b7774a1486ef73cf7667ac9ae0858c012c57b9d3"
+  resolved "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz"
   integrity sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==
   dependencies:
     depd "2.0.0"
@@ -3212,6 +5101,7 @@ http-errors@2.0.0:
     statuses "2.0.1"
     toidentifier "1.0.1"
 
+<<<<<<< HEAD
 human-signals@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-5.0.0.tgz#42665a284f9ae0dade3ba41ebc37eb4b852f3a28"
@@ -3221,27 +5111,49 @@ husky@^8.0.0:
   version "8.0.3"
   resolved "https://registry.yarnpkg.com/husky/-/husky-8.0.3.tgz#4936d7212e46d1dea28fef29bb3a108872cd9184"
   integrity sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==
+=======
+human-signals@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz"
+  integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
+
+husky@^7.0.4:
+  version "7.0.4"
+  resolved "https://registry.npmjs.org/husky/-/husky-7.0.4.tgz"
+  integrity sha512-vbaCKN2QLtP/vD4yvs6iz6hBEo6wkSzs8HpRah1Z6aGmF2KW5PdYuAd7uX5a+OyBZHBhd+TFLqgjUgytQr4RvQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 iconv-lite@0.4.24:
   version "0.4.24"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
+  resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
+ieee754@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz"
+  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
+
 ignore@^4.0.6:
   version "4.0.6"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
+  resolved "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz"
   integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
 
 ignore@^5.2.0:
+<<<<<<< HEAD
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
   integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
+=======
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz"
+  integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
-  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
+  resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
   integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
   dependencies:
     parent-module "^1.0.0"
@@ -3249,6 +5161,7 @@ import-fresh@^3.0.0, import-fresh@^3.2.1:
 
 imurmurhash@^0.1.4:
   version "0.1.4"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
 
@@ -3261,24 +5174,50 @@ inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
   integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
+=======
+  resolved "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz"
+  integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
+
+indent-string@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz"
+  integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
+
+indexes-of@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz"
+  integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz"
+  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     once "^1.3.0"
     wrappy "1"
 
 inherits@2, inherits@2.0.4, inherits@^2.0.0:
   version "2.0.4"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
 inline-style-parser@0.1.1:
   version "0.1.1"
-  resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1"
+  resolved "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz"
   integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==
 
+<<<<<<< HEAD
 internal-slot@^1.0.5, internal-slot@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.7.tgz#c06dcca3ed874249881007b0a5523b172a190802"
   integrity sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==
+=======
+internal-slot@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz"
+  integrity sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     es-errors "^1.3.0"
     hasown "^2.0.0"
@@ -3286,37 +5225,49 @@ internal-slot@^1.0.5, internal-slot@^1.0.7:
 
 intersection-observer@^0.10.0:
   version "0.10.0"
-  resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.10.0.tgz#4d11d63c1ff67e21e62987be24d55218da1a1a69"
+  resolved "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.10.0.tgz"
   integrity sha512-fn4bQ0Xq8FTej09YC/jqKZwtijpvARlRp6wxL5WTA6yPe2YWSJ5RJh7Nm79rK2qB0wr6iDQzH60XGq5V/7u8YQ==
 
+invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
 ipaddr.js@1.9.1:
   version "1.9.1"
-  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
+  resolved "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz"
   integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
 
 is-absolute-url@^3.0.0:
   version "3.0.3"
-  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-3.0.3.tgz#96c6a22b6a23929b11ea0afb1836c36ad4a5d698"
+  resolved "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz"
   integrity sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==
 
 is-alphabetical@^1.0.0:
   version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.4.tgz#9e7d6b94916be22153745d184c298cbf986a686d"
+  resolved "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz"
   integrity sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==
 
 is-alphabetical@^2.0.0:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-2.0.1.tgz#01072053ea7c1036df3c7d19a6daaec7f19e789b"
+  resolved "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz"
   integrity sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==
 
 is-alphanumeric@^1.0.0:
   version "1.0.0"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/is-alphanumeric/-/is-alphanumeric-1.0.0.tgz#4a9cef71daf4c001c1d81d63d140cf53fd6889f4"
   integrity sha512-ZmRL7++ZkcMOfDuWZuMJyIVLr2keE1o/DeNWh1EmgqGhUcV+9BIVsx0BcSBOHTZqzjs4+dISzr2KAeBEWGgXeA==
+=======
+  resolved "https://registry.npmjs.org/is-alphanumeric/-/is-alphanumeric-1.0.0.tgz"
+  integrity sha1-Spzvcdr0wAHB2B1j0UDPU/1oifQ=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 is-alphanumerical@^1.0.0:
   version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz#7eb9a2431f855f6b1ef1a78e326df515696c4dbf"
+  resolved "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz"
   integrity sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==
   dependencies:
     is-alphabetical "^1.0.0"
@@ -3324,7 +5275,7 @@ is-alphanumerical@^1.0.0:
 
 is-alphanumerical@^2.0.0:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz#7c03fbe96e3e931113e57f964b0a368cc2dfd875"
+  resolved "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz"
   integrity sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==
   dependencies:
     is-alphabetical "^2.0.0"
@@ -3340,6 +5291,7 @@ is-array-buffer@^3.0.4:
 
 is-arrayish@^0.2.1:
   version "0.2.1"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
 
@@ -3349,24 +5301,28 @@ is-async-function@^2.0.0:
   integrity sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==
   dependencies:
     has-tostringtag "^1.0.0"
+=======
+  resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz"
+  integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 is-bigint@^1.0.1:
   version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
+  resolved "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz"
   integrity sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==
   dependencies:
     has-bigints "^1.0.1"
 
 is-binary-path@~2.1.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz"
   integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
   dependencies:
     binary-extensions "^2.0.0"
 
 is-boolean-object@^1.1.0:
   version "1.1.2"
-  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719"
+  resolved "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz"
   integrity sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==
   dependencies:
     call-bind "^1.0.2"
@@ -3374,59 +5330,85 @@ is-boolean-object@^1.1.0:
 
 is-buffer@^2.0.0:
   version "2.0.5"
-  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.5.tgz#ebc252e400d22ff8d77fa09888821a24a658c191"
+  resolved "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz"
   integrity sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==
 
+<<<<<<< HEAD
 is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
   integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
+=======
+is-callable@^1.1.4, is-callable@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz"
+  integrity sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 is-ci@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
+  resolved "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz"
   integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
   dependencies:
     ci-info "^2.0.0"
 
 is-ci@^3.0.1:
   version "3.0.1"
-  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-3.0.1.tgz#db6ecbed1bd659c43dac0f45661e7674103d1867"
+  resolved "https://registry.npmjs.org/is-ci/-/is-ci-3.0.1.tgz"
   integrity sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==
   dependencies:
     ci-info "^3.2.0"
 
+<<<<<<< HEAD
 is-core-module@^2.13.0, is-core-module@^2.13.1:
   version "2.13.1"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.1.tgz#ad0d7532c6fea9da1ebdc82742d74525c6273384"
   integrity sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==
+=======
+is-core-module@^2.11.0:
+  version "2.12.1"
+  resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.1.tgz"
+  integrity sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     hasown "^2.0.0"
 
+<<<<<<< HEAD
 is-date-object@^1.0.1, is-date-object@^1.0.5:
+=======
+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.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz"
+  integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==
+  dependencies:
+    has "^1.0.3"
+
+is-date-object@^1.0.1:
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.5.tgz#0841d5536e724c25597bf6ea62e1bd38298df31f"
+  resolved "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz"
   integrity sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==
   dependencies:
     has-tostringtag "^1.0.0"
 
 is-decimal@^1.0.0:
   version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.4.tgz#65a3a5958a1c5b63a706e1b333d7cd9f630d3fa5"
+  resolved "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz"
   integrity sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==
 
 is-decimal@^2.0.0:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-2.0.1.tgz#9469d2dc190d0214fd87d78b78caecc0cc14eef7"
+  resolved "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz"
   integrity sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==
 
 is-docker@^2.0.0:
   version "2.2.1"
-  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
+  resolved "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz"
   integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
 
 is-extendable@^0.1.0:
   version "0.1.1"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
   integrity sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==
 
@@ -3441,15 +5423,24 @@ is-finalizationregistry@^1.0.2:
   integrity sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==
   dependencies:
     call-bind "^1.0.2"
+=======
+  resolved "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz"
+  integrity sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz"
+  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 is-fullwidth-code-point@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
+  resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
 is-fullwidth-code-point@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz#fae3167c729e7463f8461ce512b080a49268aa88"
+  resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz"
   integrity sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==
 
 is-fullwidth-code-point@^5.0.0:
@@ -3468,23 +5459,24 @@ is-generator-function@^1.0.10:
 
 is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   version "4.0.3"
-  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz"
   integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
   dependencies:
     is-extglob "^2.1.1"
 
 is-hexadecimal@^1.0.0:
   version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
+  resolved "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz"
   integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
 
 is-hexadecimal@^2.0.0:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz#86b5bf668fca307498d319dfc03289d781a90027"
+  resolved "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz"
   integrity sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==
 
 is-map@^2.0.1:
   version "2.0.2"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
   integrity sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==
 
@@ -3497,20 +5489,30 @@ is-number-object@^1.0.4:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.7.tgz#59d50ada4c45251784e9904f5246c742f07a42fc"
   integrity sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==
+=======
+  resolved "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz"
+  integrity sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==
+
+is-number-object@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.6.tgz"
+  integrity sha512-bEVOqiRcvo3zO1+G2lVMy+gkkEm9Yh7cDMRusKKu5ZJKPUYSJwICTKZrNKHA2EbSP0Tu0+6B/emsYNHZyn6K8g==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     has-tostringtag "^1.0.0"
 
 is-number@^7.0.0:
   version "7.0.0"
-  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz"
   integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
 
 is-plain-obj@^2.0.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
+  resolved "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz"
   integrity sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==
 
 is-plain-obj@^4.0.0:
+<<<<<<< HEAD
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-4.1.0.tgz#d65025edec3657ce032fd7db63c97883eaed71f0"
   integrity sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==
@@ -3524,17 +5526,28 @@ is-reference@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/is-reference/-/is-reference-3.0.2.tgz#154747a01f45cd962404ee89d43837af2cba247c"
   integrity sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==
+=======
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.0.0.tgz"
+  integrity sha512-NXRbBtUdBioI73y/HmOhogw/U5msYPC9DAtGkJXeFcFWSFZw0mCUsPxk/snTuJHzNKA8kLBK4rH97RMB1BfCXw==
+
+is-reference@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/is-reference/-/is-reference-3.0.0.tgz"
+  integrity sha512-Eo1W3wUoHWoCoVM4GVl/a+K0IgiqE5aIo4kJABFyMum1ZORlPkC+UC357sSQUL5w5QCE5kCC9upl75b7+7CY/Q==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/estree" "*"
 
 is-regex@^1.1.4:
   version "1.1.4"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
+  resolved "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz"
   integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
   dependencies:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
+<<<<<<< HEAD
 is-set@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.2.tgz#90755fa4c2562dc1c5d4024760d6119b94ca18ec"
@@ -3551,17 +5564,28 @@ is-stream@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-3.0.0.tgz#e6bfd7aa6bef69f4f472ce9bb681e3e57b4319ac"
   integrity sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==
+=======
+is-shared-array-buffer@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.1.tgz"
+  integrity sha512-IU0NmyknYZN0rChcKhRO1X8LYz5Isj/Fsqh8NJOSf+N/hCOTwy29F32Ik7a+QszE63IdvmwdTPDd6cZ5pg4cwA==
+
+is-stream@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz"
+  integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 is-string@^1.0.5, is-string@^1.0.7:
   version "1.0.7"
-  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.7.tgz#0dd12bf2006f255bb58f695110eff7491eebc0fd"
+  resolved "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz"
   integrity sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==
   dependencies:
     has-tostringtag "^1.0.0"
 
 is-symbol@^1.0.2, is-symbol@^1.0.3:
   version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c"
+  resolved "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz"
   integrity sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==
   dependencies:
     has-symbols "^1.0.2"
@@ -3575,7 +5599,7 @@ is-typed-array@^1.1.13:
 
 is-url@^1.2.2:
   version "1.2.4"
-  resolved "https://registry.yarnpkg.com/is-url/-/is-url-1.2.4.tgz#04a4df46d28c4cff3d73d01ff06abeb318a1aa52"
+  resolved "https://registry.npmjs.org/is-url/-/is-url-1.2.4.tgz"
   integrity sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==
 
 is-weakmap@^2.0.1:
@@ -3585,7 +5609,7 @@ is-weakmap@^2.0.1:
 
 is-weakref@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
+  resolved "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz"
   integrity sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==
   dependencies:
     call-bind "^1.0.2"
@@ -3600,17 +5624,17 @@ is-weakset@^2.0.1:
 
 is-whitespace-character@^1.0.0:
   version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz#0858edd94a95594c7c9dd0b5c174ec6e45ee4aa7"
+  resolved "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz"
   integrity sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w==
 
 is-word-character@^1.0.0:
   version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-word-character/-/is-word-character-1.0.4.tgz#ce0e73216f98599060592f62ff31354ddbeb0230"
+  resolved "https://registry.npmjs.org/is-word-character/-/is-word-character-1.0.4.tgz"
   integrity sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA==
 
 is-wsl@^2.1.1:
   version "2.2.0"
-  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
+  resolved "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz"
   integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
   dependencies:
     is-docker "^2.0.0"
@@ -3622,6 +5646,7 @@ isarray@^2.0.5:
 
 isexe@^2.0.0:
   version "2.0.0"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
@@ -3657,16 +5682,24 @@ jackspeak@^2.3.5:
 jiti@^1.19.1:
   version "1.21.0"
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d"
+=======
+  resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz"
+  integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
+
+jiti@^1.19.1:
+  version "1.21.0"
+  resolved "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz"
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==
 
 "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"
+  resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
 js-yaml@^3.13.1:
   version "3.14.1"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
+  resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz"
   integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
   dependencies:
     argparse "^1.0.7"
@@ -3674,7 +5707,7 @@ js-yaml@^3.13.1:
 
 jsesc@^2.5.1:
   version "2.5.2"
-  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
+  resolved "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz"
   integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
 
 json-buffer@3.0.1:
@@ -3684,49 +5717,75 @@ json-buffer@3.0.1:
 
 json-parse-better-errors@^1.0.1:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
+  resolved "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz"
   integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
 
 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"
+  resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz"
   integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
 
 json-schema-traverse@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
+  resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz"
   integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
 
 json-stable-stringify-without-jsonify@^1.0.1:
   version "1.0.1"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
+=======
+  resolved "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz"
+  integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 json5@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
+  resolved "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz"
   integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
   dependencies:
     minimist "^1.2.0"
 
+<<<<<<< HEAD
 json5@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+=======
+json5@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz"
+  integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
+
+jsonfile@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz"
+  integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 jsonfile@^6.0.1:
   version "6.1.0"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
+  resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz"
   integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
   dependencies:
     universalify "^2.0.0"
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+<<<<<<< HEAD
 "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.5:
   version "3.3.5"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz#4766bd05a8e2a11af222becd19e15575e52a853a"
   integrity sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==
+=======
+"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz"
+  integrity sha512-uP5vu8xfy2F9A6LGC22KO7e2/vGTS1MhP+18f++ZNlf0Ohaxbc9nIEwHAsejlJKyzfZzU5UIhe5ItYkitcZnZA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     array-includes "^3.1.6"
     array.prototype.flat "^1.3.1"
@@ -3742,21 +5801,22 @@ keyv@^4.5.3:
 
 kind-of@^6.0.0, kind-of@^6.0.2:
   version "6.0.3"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
+  resolved "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
 klaw-sync@^6.0.0:
   version "6.0.0"
-  resolved "https://registry.yarnpkg.com/klaw-sync/-/klaw-sync-6.0.0.tgz#1fd2cfd56ebb6250181114f0a581167099c2b28c"
+  resolved "https://registry.npmjs.org/klaw-sync/-/klaw-sync-6.0.0.tgz"
   integrity sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==
   dependencies:
     graceful-fs "^4.1.11"
 
 kleur@^4.0.3:
   version "4.1.5"
-  resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
+  resolved "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz"
   integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
 
+<<<<<<< HEAD
 language-subtag-registry@^0.3.20:
   version "0.3.22"
   resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz#2e1500861b2e457eba7e7ae86877cbd08fa1fd1d"
@@ -3766,25 +5826,43 @@ language-tags@^1.0.9:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.9.tgz#1ffdcd0ec0fafb4b1be7f8b11f306ad0f9c08777"
   integrity sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==
+=======
+language-subtag-registry@~0.3.2:
+  version "0.3.21"
+  resolved "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz"
+  integrity sha512-L0IqwlIXjilBVVYKFT37X9Ih11Um5NEl9cbJIuU/SwP/zEEAbBPOnEeeuxVMf45ydWQRDQN3Nqc96OgbH1K+Pg==
+
+language-tags@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/language-tags/-/language-tags-1.0.5.tgz"
+  integrity sha1-0yHbxNowuovzAk4ED6XBRmH5GTo=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     language-subtag-registry "^0.3.20"
 
 levn@^0.4.1:
   version "0.4.1"
-  resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
+  resolved "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz"
   integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
   dependencies:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+<<<<<<< HEAD
 lilconfig@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.0.0.tgz#f8067feb033b5b74dab4602a5f5029420be749bc"
   integrity sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==
+=======
+lilconfig@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.4.tgz"
+  integrity sha512-bfTIN7lEsiooCocSISTWXkiWJkRqtL9wYtYy+8EK3Y41qh3mpwPU0ycTOgjdY9ErwXCc8QyrQp82bdL0Xkm9yA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 lilconfig@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
+  resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz"
   integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
 
 lilconfig@^3.0.0:
@@ -3794,13 +5872,19 @@ lilconfig@^3.0.0:
 
 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"
+  resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
 lint-staged@>=10:
+<<<<<<< HEAD
   version "15.2.2"
   resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-15.2.2.tgz#ad7cbb5b3ab70e043fa05bff82a09ed286bc4c5f"
   integrity sha512-TiTt93OPh1OZOsb5B7k96A/ATl2AjIZo+vnzFZ6oHK5FuTk63ByDtxGQpHm+kFETjEWqgkF95M8FRXKR/LEBcw==
+=======
+  version "12.3.1"
+  resolved "https://registry.npmjs.org/lint-staged/-/lint-staged-12.3.1.tgz"
+  integrity sha512-Ocht/eT+4/siWOZDJpNUKcKX2UeWW/pDbohJ4gRsrafAjBi79JK8kiNVk2ciIVNKdw0Q4ABptl2nr6uQAlRImw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     chalk "5.3.0"
     commander "11.1.0"
@@ -3813,10 +5897,17 @@ lint-staged@>=10:
     string-argv "0.3.2"
     yaml "2.3.4"
 
+<<<<<<< HEAD
 listr2@8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/listr2/-/listr2-8.0.1.tgz#4d3f50ae6cec3c62bdf0e94f5c2c9edebd4b9c34"
   integrity sha512-ovJXBXkKGfq+CwmKTjluEqFi3p4h8xvkxGQQAQan22YCgef4KZ1mKGjzfGh6PL6AW5Csw0QiQPNuQyH+6Xk3hA==
+=======
+listr2@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/listr2/-/listr2-4.0.1.tgz"
+  integrity sha512-D65Nl+zyYHL2jQBGmxtH/pU8koPZo5C8iCNE8EoB04RwPgQG1wuaKwVbeZv9LJpiH4Nxs0FCp+nNcG8OqpniiA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     cli-truncate "^4.0.0"
     colorette "^2.0.20"
@@ -3827,43 +5918,70 @@ listr2@8.0.1:
 
 load-json-file@^4.0.0:
   version "4.0.0"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
   integrity sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==
+=======
+  resolved "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz"
+  integrity sha1-L19Fq5HjMhYjT9U62rZo607AmTs=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     graceful-fs "^4.1.2"
     parse-json "^4.0.0"
     pify "^3.0.0"
     strip-bom "^3.0.0"
 
+<<<<<<< HEAD
 lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
   integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
+=======
+locate-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz"
+  integrity sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=
+  dependencies:
+    p-locate "^2.0.0"
+    path-exists "^3.0.0"
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 lodash.merge@^4.6.2:
   version "4.6.2"
-  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
 lodash.throttle@^4.1.1:
   version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  resolved "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz"
   integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
 
 lodash.truncate@^4.4.2:
   version "4.4.2"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
   integrity sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==
+=======
+  resolved "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz"
+  integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 lodash@^4.17.15:
   version "4.17.21"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
+<<<<<<< HEAD
 log-update@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/log-update/-/log-update-6.0.0.tgz#0ddeb7ac6ad658c944c1de902993fce7c33f5e59"
   integrity sha512-niTvB4gqvtof056rRIrTZvjNYE4rCUzO6X/X+kYjd7WFxXeJ0NwEFnRxX6ehkvv3jTwrXnNdtAak5XYZuIyPFw==
+=======
+log-update@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/log-update/-/log-update-4.0.0.tgz"
+  integrity sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     ansi-escapes "^6.2.0"
     cli-cursor "^4.0.0"
@@ -3873,17 +5991,23 @@ log-update@^6.0.0:
 
 longest-streak@^2.0.1:
   version "2.0.4"
-  resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.4.tgz#b8599957da5b5dab64dee3fe316fa774597d90e4"
+  resolved "https://registry.npmjs.org/longest-streak/-/longest-streak-2.0.4.tgz"
   integrity sha512-vM6rUVCVUJJt33bnmHiZEvr7wPT78ztX7rojL+LW51bHtLh6HTjx84LA5W4+oa6aKEJA7jJu5LR6vQRBpA5DVg==
 
 longest-streak@^3.0.0:
+<<<<<<< HEAD
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-3.1.0.tgz#62fa67cd958742a1574af9f39866364102d90cd4"
   integrity sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==
+=======
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/longest-streak/-/longest-streak-3.0.1.tgz"
+  integrity sha512-cHlYSUpL2s7Fb3394mYxwTYj8niTaNHUCLr0qdiCXQfSjfuA7CKofpX2uSwEfFDQ0EB7JcnMnm+GjbqqoinYYg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
-  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
@@ -3897,7 +6021,7 @@ lru-cache@^5.1.1:
 
 lru-cache@^6.0.0:
   version "6.0.0"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
+  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz"
   integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
   dependencies:
     yallist "^4.0.0"
@@ -3908,69 +6032,100 @@ lru-cache@^6.0.0:
   integrity sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==
 
 lz-string@^1.4.4:
+<<<<<<< HEAD
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
   integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==
+=======
+  version "1.4.4"
+  resolved "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz"
+  integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 markdown-escapes@^1.0.0:
   version "1.0.4"
-  resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.4.tgz#c95415ef451499d7602b91095f3c8e8975f78535"
+  resolved "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.4.tgz"
   integrity sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==
 
 markdown-extensions@^1.0.0:
   version "1.1.1"
-  resolved "https://registry.yarnpkg.com/markdown-extensions/-/markdown-extensions-1.1.1.tgz#fea03b539faeaee9b4ef02a3769b455b189f7fc3"
+  resolved "https://registry.npmjs.org/markdown-extensions/-/markdown-extensions-1.1.1.tgz"
   integrity sha512-WWC0ZuMzCyDHYCasEGs4IPvLyTGftYwh6wIEOULOF0HXcqZlhwRzrK0w2VUlxWA98xnvb/jszw4ZSkJ6ADpM6Q==
 
 markdown-table@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-2.0.0.tgz#194a90ced26d31fe753d8b9434430214c011865b"
+  resolved "https://registry.npmjs.org/markdown-table/-/markdown-table-2.0.0.tgz"
   integrity sha512-Ezda85ToJUBhM6WGaG6veasyym+Tbs3cMAw/ZhOPqXiYsr0jgocBV3j3nx+4lk47plLlIqjwuTm/ywVI+zjJ/A==
   dependencies:
     repeat-string "^1.0.0"
 
 markdown-table@^3.0.0:
+<<<<<<< HEAD
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-3.0.3.tgz#e6331d30e493127e031dd385488b5bd326e4a6bd"
   integrity sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==
+=======
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.2.tgz"
+  integrity sha512-y8j3a5/DkJCmS5x4dMCQL+OR0+2EAq3DOtio1COSHsmW2BGXnNCK3v12hJt1LrUz5iZH5g0LmuYOjDdI+czghA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 mdast-util-compact@^2.0.0:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/mdast-util-compact/-/mdast-util-compact-2.0.1.tgz#cabc69a2f43103628326f35b1acf735d55c99490"
+  resolved "https://registry.npmjs.org/mdast-util-compact/-/mdast-util-compact-2.0.1.tgz"
   integrity sha512-7GlnT24gEwDrdAwEHrU4Vv5lLWrEer4KOkAiKT9nYstsTad7Oc1TwqT2zIMKRdZF7cTuaf+GA1E4Kv7jJh8mPA==
   dependencies:
     unist-util-visit "^2.0.0"
 
 mdast-util-definitions@^3.0.0:
   version "3.0.1"
-  resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-3.0.1.tgz#06af6c49865fc63d6d7d30125569e2f7ae3d0a86"
+  resolved "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-3.0.1.tgz"
   integrity sha512-BAv2iUm/e6IK/b2/t+Fx69EL/AGcq/IG2S+HxHjDJGfLJtd6i9SZUS76aC9cig+IEucsqxKTR0ot3m933R3iuA==
   dependencies:
     unist-util-visit "^2.0.0"
 
 mdast-util-definitions@^5.0.0:
+<<<<<<< HEAD
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-5.1.2.tgz#9910abb60ac5d7115d6819b57ae0bcef07a3f7a7"
   integrity sha512-8SVPMuHqlPME/z3gqVwWY4zVXn8lqKv/pAhC57FuJ40ImXyBpmO5ukh98zB2v7Blql2FiHjHv9LVztSIqjY+MA==
+=======
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-5.1.1.tgz"
+  integrity sha512-rQ+Gv7mHttxHOBx2dkF4HWTg+EE+UR78ptQWDylzPKaQuVGdG4HIoY3SrS/pCp80nZ04greFvXbVFHT+uf0JVQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/mdast" "^3.0.0"
     "@types/unist" "^2.0.0"
     unist-util-visit "^4.0.0"
 
 mdast-util-find-and-replace@^2.0.0:
+<<<<<<< HEAD
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/mdast-util-find-and-replace/-/mdast-util-find-and-replace-2.2.2.tgz#cc2b774f7f3630da4bd592f61966fecade8b99b1"
   integrity sha512-MTtdFRz/eMDHXzeK6W3dO7mXUlF82Gom4y0oOgvHhh/HXZAGvIQDUvQ0SuUx+j2tv44b8xTHOm8K/9OoRFnXKw==
+=======
+  version "2.2.1"
+  resolved "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-2.2.1.tgz"
+  integrity sha512-SobxkQXFAdd4b5WmEakmkVoh18icjQRxGy5OWTCzgsLRm1Fu/KCtwD1HIQSsmq5ZRjVH0Ehwg6/Fn3xIUk+nKw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/mdast" "^3.0.0"
     escape-string-regexp "^5.0.0"
     unist-util-is "^5.0.0"
     unist-util-visit-parents "^5.0.0"
 
+<<<<<<< HEAD
 mdast-util-from-markdown@^1.0.0, mdast-util-from-markdown@^1.1.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/mdast-util-from-markdown/-/mdast-util-from-markdown-1.3.1.tgz#9421a5a247f10d31d2faed2a30df5ec89ceafcf0"
   integrity sha512-4xTO/M8c82qBcnQc1tgpNtubGUW/Y1tBQ1B0i5CtSoelOLKFYlElIr3bvgREYYO5iRqbMY1YuqZng0GVOI8Qww==
+=======
+mdast-util-from-markdown@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-1.2.0.tgz"
+  integrity sha512-iZJyyvKD1+K7QX1b5jXdE7Sc5dtoTry1vzV28UZZe8Z1xVnB/czKntJ7ZAkG0tANqRnBF6p3p7GpU1y19DTf2Q==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/mdast" "^3.0.0"
     "@types/unist" "^2.0.0"
@@ -3986,18 +6141,30 @@ mdast-util-from-markdown@^1.0.0, mdast-util-from-markdown@^1.1.0:
     uvu "^0.5.0"
 
 mdast-util-frontmatter@^1.0.0:
+<<<<<<< HEAD
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mdast-util-frontmatter/-/mdast-util-frontmatter-1.0.1.tgz#79c46d7414eb9d3acabe801ee4a70a70b75e5af1"
   integrity sha512-JjA2OjxRqAa8wEG8hloD0uTU0kdn8kbtOWpPP94NBkfAlbxn4S8gCGf/9DwFtEeGPXrDcNXdiDjVaRdUFqYokw==
+=======
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/mdast-util-frontmatter/-/mdast-util-frontmatter-1.0.0.tgz"
+  integrity sha512-7itKvp0arEVNpCktOET/eLFAYaZ+0cNjVtFtIPxgQ5tV+3i+D4SDDTjTzPWl44LT59PC+xdx+glNTawBdF98Mw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/mdast" "^3.0.0"
     mdast-util-to-markdown "^1.3.0"
     micromark-extension-frontmatter "^1.0.0"
 
 mdast-util-gfm-autolink-literal@^1.0.0:
+<<<<<<< HEAD
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-1.0.3.tgz#67a13abe813d7eba350453a5333ae1bc0ec05c06"
   integrity sha512-My8KJ57FYEy2W2LyNom4n3E7hKTuQk/0SES0u16tjA9Z3oFkF4RrC/hPAPgjlSpezsOvI8ObcXcElo92wn5IGA==
+=======
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-1.0.2.tgz"
+  integrity sha512-FzopkOd4xTTBeGXhXSBU0OCDDh5lUj2rd+HQqG92Ld+jL4lpUfgX2AT2OHAVP9aEeDKp7G92fuooSZcYJA3cRg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/mdast" "^3.0.0"
     ccount "^2.0.0"
@@ -4005,26 +6172,44 @@ mdast-util-gfm-autolink-literal@^1.0.0:
     micromark-util-character "^1.0.0"
 
 mdast-util-gfm-footnote@^1.0.0:
+<<<<<<< HEAD
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-1.0.2.tgz#ce5e49b639c44de68d5bf5399877a14d5020424e"
   integrity sha512-56D19KOGbE00uKVj3sgIykpwKL179QsVFwx/DCW0u/0+URsryacI4MAdNJl0dh+u2PSsD9FtxPFbHCzJ78qJFQ==
+=======
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-1.0.1.tgz"
+  integrity sha512-p+PrYlkw9DeCRkTVw1duWqPRHX6Ywh2BNKJQcZbCwAuP/59B0Lk9kakuAd7KbQprVO4GzdW8eS5++A9PUSqIyw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/mdast" "^3.0.0"
     mdast-util-to-markdown "^1.3.0"
     micromark-util-normalize-identifier "^1.0.0"
 
 mdast-util-gfm-strikethrough@^1.0.0:
+<<<<<<< HEAD
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-1.0.3.tgz#5470eb105b483f7746b8805b9b989342085795b7"
   integrity sha512-DAPhYzTYrRcXdMjUtUjKvW9z/FNAMTdU0ORyMcbmkwYNbKocDpdk+PX1L1dQgOID/+vVs1uBQ7ElrBQfZ0cuiQ==
+=======
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-1.0.1.tgz"
+  integrity sha512-zKJbEPe+JP6EUv0mZ0tQUyLQOC+FADt0bARldONot/nefuISkaZFlmVK4tU6JgfyZGrky02m/I6PmehgAgZgqg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/mdast" "^3.0.0"
     mdast-util-to-markdown "^1.3.0"
 
 mdast-util-gfm-table@^1.0.0:
+<<<<<<< HEAD
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/mdast-util-gfm-table/-/mdast-util-gfm-table-1.0.7.tgz#3552153a146379f0f9c4c1101b071d70bbed1a46"
   integrity sha512-jjcpmNnQvrmN5Vx7y7lEc2iIOEytYv7rTvu+MeyAsSHTASGCCRA79Igg2uKssgOs1i1po8s3plW0sTu1wkkLGg==
+=======
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-1.0.6.tgz"
+  integrity sha512-uHR+fqFq3IvB3Rd4+kzXW8dmpxUhvgCQZep6KdjsLK4O6meK5dYZEayLtIxNus1XO3gfjfcIFe8a7L0HZRGgag==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/mdast" "^3.0.0"
     markdown-table "^3.0.0"
@@ -4032,17 +6217,29 @@ mdast-util-gfm-table@^1.0.0:
     mdast-util-to-markdown "^1.3.0"
 
 mdast-util-gfm-task-list-item@^1.0.0:
+<<<<<<< HEAD
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-1.0.2.tgz#b280fcf3b7be6fd0cc012bbe67a59831eb34097b"
   integrity sha512-PFTA1gzfp1B1UaiJVyhJZA1rm0+Tzn690frc/L8vNX1Jop4STZgOE6bxUhnzdVSB+vm2GU1tIsuQcA9bxTQpMQ==
+=======
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-1.0.1.tgz"
+  integrity sha512-KZ4KLmPdABXOsfnM6JHUIjxEvcx2ulk656Z/4Balw071/5qgnhz+H1uGtf2zIGnrnvDC8xR4Fj9uKbjAFGNIeA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/mdast" "^3.0.0"
     mdast-util-to-markdown "^1.3.0"
 
 mdast-util-gfm@^2.0.0:
+<<<<<<< HEAD
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/mdast-util-gfm/-/mdast-util-gfm-2.0.2.tgz#e92f4d8717d74bdba6de57ed21cc8b9552e2d0b6"
   integrity sha512-qvZ608nBppZ4icQlhQQIAdc6S3Ffj9RGmzwUKUWuEICFnd1LVkN3EktF7ZHAgfcEdvZB5owU9tQgt99e2TlLjg==
+=======
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-2.0.1.tgz"
+  integrity sha512-42yHBbfWIFisaAfV1eixlabbsa6q7vHeSPY+cg+BBjX51M8xhgMacqH9g6TftB/9+YkcI0ooV4ncfrJslzm/RQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     mdast-util-from-markdown "^1.0.0"
     mdast-util-gfm-autolink-literal "^1.0.0"
@@ -4053,9 +6250,15 @@ mdast-util-gfm@^2.0.0:
     mdast-util-to-markdown "^1.0.0"
 
 mdast-util-mdx-expression@^1.0.0:
+<<<<<<< HEAD
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/mdast-util-mdx-expression/-/mdast-util-mdx-expression-1.3.2.tgz#d027789e67524d541d6de543f36d51ae2586f220"
   integrity sha512-xIPmR5ReJDu/DHH1OoIT1HkuybIfRGYRywC+gJtI7qHjCJp/M9jrmBEJW22O8lskDWm562BX2W8TiAwRTb0rKA==
+=======
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-1.3.0.tgz"
+  integrity sha512-9kTO13HaL/ChfzVCIEfDRdp1m5hsvsm6+R8yr67mH+KS2ikzZ0ISGLPTbTswOFpLLlgVHO9id3cul4ajutCvCA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/estree-jsx" "^1.0.0"
     "@types/hast" "^2.0.0"
@@ -4064,9 +6267,15 @@ mdast-util-mdx-expression@^1.0.0:
     mdast-util-to-markdown "^1.0.0"
 
 mdast-util-mdx-jsx@^2.0.0:
+<<<<<<< HEAD
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-2.1.4.tgz#7c1f07f10751a78963cfabee38017cbc8b7786d1"
   integrity sha512-DtMn9CmVhVzZx3f+optVDF8yFgQVt7FghCRNdlIaS3X5Bnym3hZwPbg/XW86vdpKjlc1PVj26SpnLGeJBXD3JA==
+=======
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-2.1.0.tgz"
+  integrity sha512-KzgzfWMhdteDkrY4mQtyvTU5bc/W4ppxhe9SzelO6QUUiwLAM+Et2Dnjjprik74a336kHdo0zKm7Tp+n6FFeRg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/estree-jsx" "^1.0.0"
     "@types/hast" "^2.0.0"
@@ -4082,9 +6291,15 @@ mdast-util-mdx-jsx@^2.0.0:
     vfile-message "^3.0.0"
 
 mdast-util-mdx@^2.0.0:
+<<<<<<< HEAD
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/mdast-util-mdx/-/mdast-util-mdx-2.0.1.tgz#49b6e70819b99bb615d7223c088d295e53bb810f"
   integrity sha512-38w5y+r8nyKlGvNjSEqWrhG0w5PmnRA+wnBvm+ulYCct7nsGYhFVb0lljS9bQav4psDAS1eGkP2LMVcZBi/aqw==
+=======
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/mdast-util-mdx/-/mdast-util-mdx-2.0.0.tgz"
+  integrity sha512-M09lW0CcBT1VrJUaF/PYxemxxHa7SLDHdSn94Q9FhxjCQfuW7nMAWKWimTmA3OyDMSTH981NN1csW1X+HPSluw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     mdast-util-from-markdown "^1.0.0"
     mdast-util-mdx-expression "^1.0.0"
@@ -4093,9 +6308,15 @@ mdast-util-mdx@^2.0.0:
     mdast-util-to-markdown "^1.0.0"
 
 mdast-util-mdxjs-esm@^1.0.0:
+<<<<<<< HEAD
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-1.3.1.tgz#645d02cd607a227b49721d146fd81796b2e2d15b"
   integrity sha512-SXqglS0HrEvSdUEfoXFtcg7DRl7S2cwOXc7jkuusG472Mmjag34DUDeOJUZtl+BVnyeO1frIgVpHlNRWc2gk/w==
+=======
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-1.3.0.tgz"
+  integrity sha512-7N5ihsOkAEGjFotIX9p/YPdl4TqUoMxL4ajNz7PbT89BqsdWJuBC9rvgt6wpbwTZqWWR0jKWqQbwsOWDBUZv4g==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/estree-jsx" "^1.0.0"
     "@types/hast" "^2.0.0"
@@ -4112,9 +6333,15 @@ mdast-util-phrasing@^3.0.0:
     unist-util-is "^5.0.0"
 
 mdast-util-to-hast@^12.1.0:
+<<<<<<< HEAD
   version "12.3.0"
   resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-12.3.0.tgz#045d2825fb04374e59970f5b3f279b5700f6fb49"
   integrity sha512-pits93r8PhnIoU4Vy9bjW39M2jJ6/tdHyja9rrot9uujkN7UTU9SDnE6WNJz/IGyQk3XHX6yNNtrBH6cQzm8Hw==
+=======
+  version "12.2.2"
+  resolved "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-12.2.2.tgz"
+  integrity sha512-lVkUttV9wqmdXFtEBXKcepvU/zfwbhjbkM5rxrquLW55dS1DfOrnAXCk5mg1be1sfY/WfMmayGy1NsbK1GLCYQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/hast" "^2.0.0"
     "@types/mdast" "^3.0.0"
@@ -4127,7 +6354,7 @@ mdast-util-to-hast@^12.1.0:
 
 mdast-util-to-hast@^9.0.0:
   version "9.1.2"
-  resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-9.1.2.tgz#10fa5ed9d45bf3755891e5801d0f32e2584a9423"
+  resolved "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-9.1.2.tgz"
   integrity sha512-OpkFLBC2VnNAb2FNKcKWu9FMbJhQKog+FCT8nuKmQNIKXyT1n3SIskE7uWDep6x+cA20QXlK5AETHQtYmQmxtQ==
   dependencies:
     "@types/mdast" "^3.0.0"
@@ -4140,9 +6367,15 @@ mdast-util-to-hast@^9.0.0:
     unist-util-visit "^2.0.0"
 
 mdast-util-to-markdown@^1.0.0, mdast-util-to-markdown@^1.3.0:
+<<<<<<< HEAD
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/mdast-util-to-markdown/-/mdast-util-to-markdown-1.5.0.tgz#c13343cb3fc98621911d33b5cd42e7d0731171c6"
   integrity sha512-bbv7TPv/WC49thZPg3jXuqzuvI45IL2EVAr/KxF0BSdHsU0ceFHOmwQn6evxAh1GaoK/6GQ1wp4R4oW2+LFL/A==
+=======
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-1.3.0.tgz"
+  integrity sha512-6tUSs4r+KK4JGTTiQ7FfHmVOaDrLQJPmpjD6wPMlHGUVXoG9Vjc3jIeP+uyBWRf8clwB2blM+W7+KrlMYQnftA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/mdast" "^3.0.0"
     "@types/unist" "^2.0.0"
@@ -4155,10 +6388,11 @@ mdast-util-to-markdown@^1.0.0, mdast-util-to-markdown@^1.3.0:
 
 mdast-util-to-string@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz#27055500103f51637bd07d01da01eb1967a43527"
+  resolved "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz"
   integrity sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A==
 
 mdast-util-to-string@^3.0.0, mdast-util-to-string@^3.1.0:
+<<<<<<< HEAD
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-3.2.0.tgz#66f7bb6324756741c5f47a53557f0cbf16b6f789"
   integrity sha512-V4Zn/ncyN1QNSqSBxTrMOLpjr+IKdHl2v3KVLoWmDPscP4r9GcCi71gjgvUV1SFSKh92AjAG4peFuBl2/YgCJg==
@@ -4169,40 +6403,55 @@ mdurl@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
   integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
+=======
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-3.1.0.tgz"
+  integrity sha512-n4Vypz/DZgwo0iMHLQL49dJzlp7YtAJP+N07MZHpjPf/5XJuHUWstviF4Mn2jEiR/GNmtnRRqnwsXExk3igfFA==
+
+mdurl@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz"
+  integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 media-typer@0.3.0:
   version "0.3.0"
-  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+  resolved "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz"
   integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==
 
 memorystream@^0.3.1:
   version "0.3.1"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/memorystream/-/memorystream-0.3.1.tgz#86d7090b30ce455d63fbae12dda51a47ddcaf9b2"
   integrity sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==
+=======
+  resolved "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz"
+  integrity sha1-htcJCzDORV1j+64S3aUaR93K+bI=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 merge-descriptors@1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
+  resolved "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz"
   integrity sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==
 
 merge-stream@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
+  resolved "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz"
   integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
 merge2@^1.3.0, merge2@^1.4.1:
   version "1.4.1"
-  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+  resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
 methods@~1.1.2:
   version "1.1.2"
-  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+  resolved "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz"
   integrity sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==
 
 metro-cache@0.72.2:
   version "0.72.2"
-  resolved "https://registry.yarnpkg.com/metro-cache/-/metro-cache-0.72.2.tgz#114e62dad3539c41cf5625045b9a6e5181499f20"
+  resolved "https://registry.npmjs.org/metro-cache/-/metro-cache-0.72.2.tgz"
   integrity sha512-0Yw3J32eYTp7x7bAAg+a9ScBG/mpib6Wq4WPSYvhoNilPFHzh7knLDMil3WGVCQlI1r+5xtpw/FDhNVKuypQqg==
   dependencies:
     metro-core "0.72.2"
@@ -4210,7 +6459,7 @@ metro-cache@0.72.2:
 
 metro-core@0.72.2:
   version "0.72.2"
-  resolved "https://registry.yarnpkg.com/metro-core/-/metro-core-0.72.2.tgz#ca975cfebce5c89f51dca905777bc3877008ae69"
+  resolved "https://registry.npmjs.org/metro-core/-/metro-core-0.72.2.tgz"
   integrity sha512-OXNH8UbKIhvpyHGJrdQYnPUmyPHSuVY4OO6pQxODdTW+uiO68PPPgIIVN67vlCAirZolxRFpma70N7m0sGCZyg==
   dependencies:
     lodash.throttle "^4.1.1"
@@ -4218,15 +6467,21 @@ metro-core@0.72.2:
 
 metro-resolver@0.72.2:
   version "0.72.2"
-  resolved "https://registry.yarnpkg.com/metro-resolver/-/metro-resolver-0.72.2.tgz#332ecd646d683a47923fc403e3df37a7cf96da3b"
+  resolved "https://registry.npmjs.org/metro-resolver/-/metro-resolver-0.72.2.tgz"
   integrity sha512-5KTWolUgA6ivLkg3DmFS2WltphBPQW7GT7An+6Izk/NU+y/6crmsoaLmNxjpZo4Fv+i/FxDSXqpbpQ6KrRWvlQ==
   dependencies:
     absolute-path "^0.0.0"
 
 micromark-core-commonmark@^1.0.0, micromark-core-commonmark@^1.0.1:
+<<<<<<< HEAD
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/micromark-core-commonmark/-/micromark-core-commonmark-1.1.0.tgz#1386628df59946b2d39fb2edfd10f3e8e0a75bb8"
   integrity sha512-BgHO1aRbolh2hcrzL2d1La37V0Aoz73ymF8rAcKnohLy93titmv62E0gP8Hrx9PKcKrqCZ1BbLGbP3bEhoXYlw==
+=======
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-1.0.6.tgz"
+  integrity sha512-K+PkJTxqjFfSNkfAhp4GB+cZPfQd6dxtTXnf+RjZOV7T4EEXnvgzOcnp+eSTmpGk9d1S9sL6/lqrgSNn/s0HZA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     decode-named-character-reference "^1.0.0"
     micromark-factory-destination "^1.0.0"
@@ -4246,9 +6501,15 @@ micromark-core-commonmark@^1.0.0, micromark-core-commonmark@^1.0.1:
     uvu "^0.5.0"
 
 micromark-extension-frontmatter@^1.0.0:
+<<<<<<< HEAD
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/micromark-extension-frontmatter/-/micromark-extension-frontmatter-1.1.1.tgz#2946643938e491374145d0c9aacc3249e38a865f"
   integrity sha512-m2UH9a7n3W8VAH9JO9y01APpPKmNNNs71P0RbknEmYSaZU5Ghogv38BYO94AI5Xw6OYfxZRdHZZ2nYjs/Z+SZQ==
+=======
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/micromark-extension-frontmatter/-/micromark-extension-frontmatter-1.0.0.tgz"
+  integrity sha512-EXjmRnupoX6yYuUJSQhrQ9ggK0iQtQlpi6xeJzVD5xscyAI+giqco5fdymayZhJMbIFecjnE2yz85S9NzIgQpg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     fault "^2.0.0"
     micromark-util-character "^1.0.0"
@@ -4256,9 +6517,15 @@ micromark-extension-frontmatter@^1.0.0:
     micromark-util-types "^1.0.0"
 
 micromark-extension-gfm-autolink-literal@^1.0.0:
+<<<<<<< HEAD
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-1.0.5.tgz#5853f0e579bbd8ef9e39a7c0f0f27c5a063a66e7"
   integrity sha512-z3wJSLrDf8kRDOh2qBtoTRD53vJ+CWIyo7uyZuxf/JAbNJjiHsOpG1y5wxk8drtv3ETAHutCu6N3thkOOgueWg==
+=======
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-1.0.3.tgz"
+  integrity sha512-i3dmvU0htawfWED8aHMMAzAVp/F0Z+0bPh3YrbTPPL1v4YAlCZpy5rBO5p0LPYiZo0zFVkoYh7vDU7yQSiCMjg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     micromark-util-character "^1.0.0"
     micromark-util-sanitize-uri "^1.0.0"
@@ -4266,9 +6533,15 @@ micromark-extension-gfm-autolink-literal@^1.0.0:
     micromark-util-types "^1.0.0"
 
 micromark-extension-gfm-footnote@^1.0.0:
+<<<<<<< HEAD
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-1.1.2.tgz#05e13034d68f95ca53c99679040bc88a6f92fe2e"
   integrity sha512-Yxn7z7SxgyGWRNa4wzf8AhYYWNrwl5q1Z8ii+CSTTIqVkmGZF1CElX2JI8g5yGoM3GAman9/PVCUFUSJ0kB/8Q==
+=======
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-1.0.4.tgz"
+  integrity sha512-E/fmPmDqLiMUP8mLJ8NbJWJ4bTw6tS+FEQS8CcuDtZpILuOb2kjLqPEeAePF1djXROHXChM/wPJw0iS4kHCcIg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     micromark-core-commonmark "^1.0.0"
     micromark-factory-space "^1.0.0"
@@ -4280,9 +6553,15 @@ micromark-extension-gfm-footnote@^1.0.0:
     uvu "^0.5.0"
 
 micromark-extension-gfm-strikethrough@^1.0.0:
+<<<<<<< HEAD
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-1.0.7.tgz#c8212c9a616fa3bf47cb5c711da77f4fdc2f80af"
   integrity sha512-sX0FawVE1o3abGk3vRjOH50L5TTLr3b5XMqnP9YDRb34M0v5OoZhG+OHFz1OffZ9dlwgpTBKaT4XW/AsUVnSDw==
+=======
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-1.0.4.tgz"
+  integrity sha512-/vjHU/lalmjZCT5xt7CcHVJGq8sYRm80z24qAKXzaHzem/xsDYb2yLL+NNVbYvmpLx3O7SYPuGL5pzusL9CLIQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     micromark-util-chunked "^1.0.0"
     micromark-util-classify-character "^1.0.0"
@@ -4292,9 +6571,15 @@ micromark-extension-gfm-strikethrough@^1.0.0:
     uvu "^0.5.0"
 
 micromark-extension-gfm-table@^1.0.0:
+<<<<<<< HEAD
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/micromark-extension-gfm-table/-/micromark-extension-gfm-table-1.0.7.tgz#dcb46074b0c6254c3fc9cc1f6f5002c162968008"
   integrity sha512-3ZORTHtcSnMQEKtAOsBQ9/oHp9096pI/UvdPtN7ehKvrmZZ2+bbWhi0ln+I9drmwXMt5boocn6OlwQzNXeVeqw==
+=======
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-1.0.5.tgz"
+  integrity sha512-xAZ8J1X9W9K3JTJTUL7G6wSKhp2ZYHrFk5qJgY/4B33scJzE2kpfRL6oiw/veJTbt7jiM/1rngLlOKPWr1G+vg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     micromark-factory-space "^1.0.0"
     micromark-util-character "^1.0.0"
@@ -4303,16 +6588,28 @@ micromark-extension-gfm-table@^1.0.0:
     uvu "^0.5.0"
 
 micromark-extension-gfm-tagfilter@^1.0.0:
+<<<<<<< HEAD
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-1.0.2.tgz#aa7c4dd92dabbcb80f313ebaaa8eb3dac05f13a7"
   integrity sha512-5XWB9GbAUSHTn8VPU8/1DBXMuKYT5uOgEjJb8gN3mW0PNW5OPHpSdojoqf+iq1xo7vWzw/P8bAHY0n6ijpXF7g==
+=======
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-1.0.1.tgz"
+  integrity sha512-Ty6psLAcAjboRa/UKUbbUcwjVAv5plxmpUTy2XC/3nJFL37eHej8jrHrRzkqcpipJliuBH30DTs7+3wqNcQUVA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     micromark-util-types "^1.0.0"
 
 micromark-extension-gfm-task-list-item@^1.0.0:
+<<<<<<< HEAD
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-1.0.5.tgz#b52ce498dc4c69b6a9975abafc18f275b9dde9f4"
   integrity sha512-RMFXl2uQ0pNQy6Lun2YBYT9g9INXtWJULgbt01D/x8/6yJ2qpKyzdZD3pi6UIkzF++Da49xAelVKUeUMqd5eIQ==
+=======
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-1.0.3.tgz"
+  integrity sha512-PpysK2S1Q/5VXi72IIapbi/jliaiOFzv7THH4amwXeYXLq3l1uo8/2Be0Ac1rEwK20MQEsGH2ltAZLNY2KI/0Q==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     micromark-factory-space "^1.0.0"
     micromark-util-character "^1.0.0"
@@ -4321,9 +6618,15 @@ micromark-extension-gfm-task-list-item@^1.0.0:
     uvu "^0.5.0"
 
 micromark-extension-gfm@^2.0.0:
+<<<<<<< HEAD
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/micromark-extension-gfm/-/micromark-extension-gfm-2.0.3.tgz#e517e8579949a5024a493e49204e884aa74f5acf"
   integrity sha512-vb9OoHqrhCmbRidQv/2+Bc6pkP0FrtlhurxZofvOEy5o8RtuuvTq+RQ1Vw5ZDNrVraQZu3HixESqbG+0iKk/MQ==
+=======
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-2.0.1.tgz"
+  integrity sha512-p2sGjajLa0iYiGQdT0oelahRYtMWvLjy8J9LOCxzIQsllMCGLbsLW+Nc+N4vi02jcRJvedVJ68cjelKIO6bpDA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     micromark-extension-gfm-autolink-literal "^1.0.0"
     micromark-extension-gfm-footnote "^1.0.0"
@@ -4335,9 +6638,15 @@ micromark-extension-gfm@^2.0.0:
     micromark-util-types "^1.0.0"
 
 micromark-extension-mdx-expression@^1.0.0:
+<<<<<<< HEAD
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/micromark-extension-mdx-expression/-/micromark-extension-mdx-expression-1.0.8.tgz#5bc1f5fd90388e8293b3ef4f7c6f06c24aff6314"
   integrity sha512-zZpeQtc5wfWKdzDsHRBY003H2Smg+PUi2REhqgIhdzAa5xonhP03FcXxqFSerFiNUr5AWmHpaNPQTBVOS4lrXw==
+=======
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/micromark-extension-mdx-expression/-/micromark-extension-mdx-expression-1.0.3.tgz"
+  integrity sha512-TjYtjEMszWze51NJCZmhv7MEBcgYRgb3tJeMAJ+HQCAaZHHRBaDCccqQzGizR/H4ODefP44wRTgOn2vE5I6nZA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/estree" "^1.0.0"
     micromark-factory-mdx-expression "^1.0.0"
@@ -4349,9 +6658,15 @@ micromark-extension-mdx-expression@^1.0.0:
     uvu "^0.5.0"
 
 micromark-extension-mdx-jsx@^1.0.0:
+<<<<<<< HEAD
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/micromark-extension-mdx-jsx/-/micromark-extension-mdx-jsx-1.0.5.tgz#e72d24b7754a30d20fb797ece11e2c4e2cae9e82"
   integrity sha512-gPH+9ZdmDflbu19Xkb8+gheqEDqkSpdCEubQyxuz/Hn8DOXiXvrXeikOoBA71+e8Pfi0/UYmU3wW3H58kr7akA==
+=======
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/micromark-extension-mdx-jsx/-/micromark-extension-mdx-jsx-1.0.3.tgz"
+  integrity sha512-VfA369RdqUISF0qGgv2FfV7gGjHDfn9+Qfiv5hEwpyr1xscRj/CiVRkU7rywGFCO7JwJ5L0e7CJz60lY52+qOA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/acorn" "^4.0.0"
     "@types/estree" "^1.0.0"
@@ -4365,16 +6680,28 @@ micromark-extension-mdx-jsx@^1.0.0:
     vfile-message "^3.0.0"
 
 micromark-extension-mdx-md@^1.0.0:
+<<<<<<< HEAD
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/micromark-extension-mdx-md/-/micromark-extension-mdx-md-1.0.1.tgz#595d4b2f692b134080dca92c12272ab5b74c6d1a"
   integrity sha512-7MSuj2S7xjOQXAjjkbjBsHkMtb+mDGVW6uI2dBL9snOBCbZmoNgDAeZ0nSn9j3T42UE/g2xVNMn18PJxZvkBEA==
+=======
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/micromark-extension-mdx-md/-/micromark-extension-mdx-md-1.0.0.tgz"
+  integrity sha512-xaRAMoSkKdqZXDAoSgp20Azm0aRQKGOl0RrS81yGu8Hr/JhMsBmfs4wR7m9kgVUIO36cMUQjNyiyDKPrsv8gOw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     micromark-util-types "^1.0.0"
 
 micromark-extension-mdxjs-esm@^1.0.0:
+<<<<<<< HEAD
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/micromark-extension-mdxjs-esm/-/micromark-extension-mdxjs-esm-1.0.5.tgz#e4f8be9c14c324a80833d8d3a227419e2b25dec1"
   integrity sha512-xNRBw4aoURcyz/S69B19WnZAkWJMxHMT5hE36GtDAyhoyn/8TuAeqjFJQlwk+MKQsUD7b3l7kFX+vlfVWgcX1w==
+=======
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/micromark-extension-mdxjs-esm/-/micromark-extension-mdxjs-esm-1.0.3.tgz"
+  integrity sha512-2N13ol4KMoxb85rdDwTAC6uzs8lMX0zeqpcyx7FhS7PxXomOnLactu8WI8iBNXW8AVyea3KIJd/1CKnUmwrK9A==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/estree" "^1.0.0"
     micromark-core-commonmark "^1.0.0"
@@ -4387,9 +6714,15 @@ micromark-extension-mdxjs-esm@^1.0.0:
     vfile-message "^3.0.0"
 
 micromark-extension-mdxjs@^1.0.0:
+<<<<<<< HEAD
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/micromark-extension-mdxjs/-/micromark-extension-mdxjs-1.0.1.tgz#f78d4671678d16395efeda85170c520ee795ded8"
   integrity sha512-7YA7hF6i5eKOfFUzZ+0z6avRG52GpWR8DL+kN47y3f2KhxbBZMhmxe7auOeaTBrW2DenbbZTf1ea9tA2hDpC2Q==
+=======
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/micromark-extension-mdxjs/-/micromark-extension-mdxjs-1.0.0.tgz"
+  integrity sha512-TZZRZgeHvtgm+IhtgC2+uDMR7h8eTKF0QUX9YsgoL9+bADBpBY6SiLvWqnBlLbCEevITmTqmEuY3FoxMKVs1rQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     acorn "^8.0.0"
     acorn-jsx "^5.0.0"
@@ -4401,18 +6734,30 @@ micromark-extension-mdxjs@^1.0.0:
     micromark-util-types "^1.0.0"
 
 micromark-factory-destination@^1.0.0:
+<<<<<<< HEAD
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/micromark-factory-destination/-/micromark-factory-destination-1.1.0.tgz#eb815957d83e6d44479b3df640f010edad667b9f"
   integrity sha512-XaNDROBgx9SgSChd69pjiGKbV+nfHGDPVYFs5dOoDd7ZnMAE+Cuu91BCpsY8RT2NP9vo/B8pds2VQNCLiu0zhg==
+=======
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-1.0.0.tgz"
+  integrity sha512-eUBA7Rs1/xtTVun9TmV3gjfPz2wEwgK5R5xcbIM5ZYAtvGF6JkyaDsj0agx8urXnO31tEO6Ug83iVH3tdedLnw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     micromark-util-character "^1.0.0"
     micromark-util-symbol "^1.0.0"
     micromark-util-types "^1.0.0"
 
 micromark-factory-label@^1.0.0:
+<<<<<<< HEAD
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/micromark-factory-label/-/micromark-factory-label-1.1.0.tgz#cc95d5478269085cfa2a7282b3de26eb2e2dec68"
   integrity sha512-OLtyez4vZo/1NjxGhcpDSbHQ+m0IIGnT8BoPamh+7jVlzLJBH98zzuCoUeMxvM6WsNeh8wx8cKvqLiPHEACn0w==
+=======
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-1.0.2.tgz"
+  integrity sha512-CTIwxlOnU7dEshXDQ+dsr2n+yxpP0+fn271pu0bwDIS8uqfFcumXpj5mLn3hSC8iw2MUr6Gx8EcKng1dD7i6hg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     micromark-util-character "^1.0.0"
     micromark-util-symbol "^1.0.0"
@@ -4420,9 +6765,15 @@ micromark-factory-label@^1.0.0:
     uvu "^0.5.0"
 
 micromark-factory-mdx-expression@^1.0.0:
+<<<<<<< HEAD
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/micromark-factory-mdx-expression/-/micromark-factory-mdx-expression-1.0.9.tgz#57ba4571b69a867a1530f34741011c71c73a4976"
   integrity sha512-jGIWzSmNfdnkJq05c7b0+Wv0Kfz3NJ3N4cBjnbO4zjXIlxJr+f8lk+5ZmwFvqdAbUy2q6B5rCY//g0QAAaXDWA==
+=======
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/micromark-factory-mdx-expression/-/micromark-factory-mdx-expression-1.0.6.tgz"
+  integrity sha512-WRQIc78FV7KrCfjsEf/sETopbYjElh3xAmNpLkd1ODPqxEngP42eVRGbiPEQWpRV27LzqW+XVTvQAMIIRLPnNA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/estree" "^1.0.0"
     micromark-util-character "^1.0.0"
@@ -4434,17 +6785,29 @@ micromark-factory-mdx-expression@^1.0.0:
     vfile-message "^3.0.0"
 
 micromark-factory-space@^1.0.0:
+<<<<<<< HEAD
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/micromark-factory-space/-/micromark-factory-space-1.1.0.tgz#c8f40b0640a0150751d3345ed885a080b0d15faf"
   integrity sha512-cRzEj7c0OL4Mw2v6nwzttyOZe8XY/Z8G0rzmWQZTBi/jjwyw/U4uqKtUORXQrR5bAZZnbTI/feRV/R7hc4jQYQ==
+=======
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-1.0.0.tgz"
+  integrity sha512-qUmqs4kj9a5yBnk3JMLyjtWYN6Mzfcx8uJfi5XAveBniDevmZasdGBba5b4QsvRcAkmvGo5ACmSUmyGiKTLZew==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     micromark-util-character "^1.0.0"
     micromark-util-types "^1.0.0"
 
 micromark-factory-title@^1.0.0:
+<<<<<<< HEAD
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/micromark-factory-title/-/micromark-factory-title-1.1.0.tgz#dd0fe951d7a0ac71bdc5ee13e5d1465ad7f50ea1"
   integrity sha512-J7n9R3vMmgjDOCY8NPw55jiyaQnH5kBdV2/UXCtZIpnHH3P6nHUKaH7XXEYuWwx/xUJcawa8plLBEjMPU24HzQ==
+=======
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-1.0.2.tgz"
+  integrity sha512-zily+Nr4yFqgMGRKLpTVsNl5L4PMu485fGFDOQJQBl2NFpjGte1e86zC0da93wf97jrc4+2G2GQudFMHn3IX+A==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     micromark-factory-space "^1.0.0"
     micromark-util-character "^1.0.0"
@@ -4452,9 +6815,15 @@ micromark-factory-title@^1.0.0:
     micromark-util-types "^1.0.0"
 
 micromark-factory-whitespace@^1.0.0:
+<<<<<<< HEAD
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/micromark-factory-whitespace/-/micromark-factory-whitespace-1.1.0.tgz#798fb7489f4c8abafa7ca77eed6b5745853c9705"
   integrity sha512-v2WlmiymVSp5oMg+1Q0N1Lxmt6pMhIHD457whWM7/GUlEks1hI9xj5w3zbc4uuMKXGisksZk8DzP2UyGbGqNsQ==
+=======
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-1.0.0.tgz"
+  integrity sha512-Qx7uEyahU1lt1RnsECBiuEbfr9INjQTGa6Err+gF3g0Tx4YEviPbqqGKNv/NrBaE7dVHdn1bVZKM/n5I/Bak7A==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     micromark-factory-space "^1.0.0"
     micromark-util-character "^1.0.0"
@@ -4462,48 +6831,84 @@ micromark-factory-whitespace@^1.0.0:
     micromark-util-types "^1.0.0"
 
 micromark-util-character@^1.0.0:
+<<<<<<< HEAD
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/micromark-util-character/-/micromark-util-character-1.2.0.tgz#4fedaa3646db249bc58caeb000eb3549a8ca5dcc"
   integrity sha512-lXraTwcX3yH/vMDaFWCQJP1uIszLVebzUa3ZHdrgxr7KEU/9mL4mVgCpGbyhvNLNlauROiNUq7WN5u7ndbY6xg==
+=======
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-1.1.0.tgz"
+  integrity sha512-agJ5B3unGNJ9rJvADMJ5ZiYjBRyDpzKAOk01Kpi1TKhlT1APx3XZk6eN7RtSz1erbWHC2L8T3xLZ81wdtGRZzg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     micromark-util-symbol "^1.0.0"
     micromark-util-types "^1.0.0"
 
 micromark-util-chunked@^1.0.0:
+<<<<<<< HEAD
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/micromark-util-chunked/-/micromark-util-chunked-1.1.0.tgz#37a24d33333c8c69a74ba12a14651fd9ea8a368b"
   integrity sha512-Ye01HXpkZPNcV6FiyoW2fGZDUw4Yc7vT0E9Sad83+bEDiCJ1uXu0S3mr8WLpsz3HaG3x2q0HM6CTuPdcZcluFQ==
+=======
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-1.0.0.tgz"
+  integrity sha512-5e8xTis5tEZKgesfbQMKRCyzvffRRUX+lK/y+DvsMFdabAicPkkZV6gO+FEWi9RfuKKoxxPwNL+dFF0SMImc1g==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     micromark-util-symbol "^1.0.0"
 
 micromark-util-classify-character@^1.0.0:
+<<<<<<< HEAD
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/micromark-util-classify-character/-/micromark-util-classify-character-1.1.0.tgz#6a7f8c8838e8a120c8e3c4f2ae97a2bff9190e9d"
   integrity sha512-SL0wLxtKSnklKSUplok1WQFoGhUdWYKggKUiqhX+Swala+BtptGCu5iPRc+xvzJ4PXE/hwM3FNXsfEVgoZsWbw==
+=======
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-1.0.0.tgz"
+  integrity sha512-F8oW2KKrQRb3vS5ud5HIqBVkCqQi224Nm55o5wYLzY/9PwHGXC01tr3d7+TqHHz6zrKQ72Okwtvm/xQm6OVNZA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     micromark-util-character "^1.0.0"
     micromark-util-symbol "^1.0.0"
     micromark-util-types "^1.0.0"
 
 micromark-util-combine-extensions@^1.0.0:
+<<<<<<< HEAD
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/micromark-util-combine-extensions/-/micromark-util-combine-extensions-1.1.0.tgz#192e2b3d6567660a85f735e54d8ea6e3952dbe84"
   integrity sha512-Q20sp4mfNf9yEqDL50WwuWZHUrCO4fEyeDCnMGmG5Pr0Cz15Uo7KBs6jq+dq0EgX4DPwwrh9m0X+zPV1ypFvUA==
+=======
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-1.0.0.tgz"
+  integrity sha512-J8H058vFBdo/6+AsjHp2NF7AJ02SZtWaVUjsayNFeAiydTxUwViQPxN0Hf8dp4FmCQi0UUFovFsEyRSUmFH3MA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     micromark-util-chunked "^1.0.0"
     micromark-util-types "^1.0.0"
 
 micromark-util-decode-numeric-character-reference@^1.0.0:
+<<<<<<< HEAD
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-1.1.0.tgz#b1e6e17009b1f20bc652a521309c5f22c85eb1c6"
   integrity sha512-m9V0ExGv0jB1OT21mrWcuf4QhP46pH1KkfWy9ZEezqHKAxkj4mPCy3nIH1rkbdMlChLHX531eOrymlwyZIf2iw==
+=======
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-1.0.0.tgz"
+  integrity sha512-OzO9AI5VUtrTD7KSdagf4MWgHMtET17Ua1fIpXTpuhclCqD8egFWo85GxSGvxgkGS74bEahvtM0WP0HjvV0e4w==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     micromark-util-symbol "^1.0.0"
 
 micromark-util-decode-string@^1.0.0:
+<<<<<<< HEAD
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/micromark-util-decode-string/-/micromark-util-decode-string-1.1.0.tgz#dc12b078cba7a3ff690d0203f95b5d5537f2809c"
   integrity sha512-YphLGCK8gM1tG1bd54azwyrQRjCFcmgj2S2GoJDNnh4vYtnL38JS8M4gpxzOPNyHdNEpheyWXCTnnTDY3N+NVQ==
+=======
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-1.0.2.tgz"
+  integrity sha512-DLT5Ho02qr6QWVNYbRZ3RYOSSWWFuH3tJexd3dgN1odEuPNxCngTCXJum7+ViRAd9BbdxCvMToPOD/IvVhzG6Q==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     decode-named-character-reference "^1.0.0"
     micromark-util-character "^1.0.0"
@@ -4511,6 +6916,7 @@ micromark-util-decode-string@^1.0.0:
     micromark-util-symbol "^1.0.0"
 
 micromark-util-encode@^1.0.0:
+<<<<<<< HEAD
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/micromark-util-encode/-/micromark-util-encode-1.1.0.tgz#92e4f565fd4ccb19e0dcae1afab9a173bbeb19a5"
   integrity sha512-EuEzTWSTAj9PA5GOAs992GzNh2dGQO52UvAbtSOMvXTxv3Criqb6IOzJUBCmEqrrXSblJIJBbFFv6zPxpreiJw==
@@ -4519,6 +6925,16 @@ micromark-util-events-to-acorn@^1.0.0:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/micromark-util-events-to-acorn/-/micromark-util-events-to-acorn-1.2.3.tgz#a4ab157f57a380e646670e49ddee97a72b58b557"
   integrity sha512-ij4X7Wuc4fED6UoLWkmo0xJQhsktfNh1J0m8g4PbIMPlx+ek/4YdW5mvbye8z/aZvAPUoxgXHrwVlXAPKMRp1w==
+=======
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-1.0.1.tgz"
+  integrity sha512-U2s5YdnAYexjKDel31SVMPbfi+eF8y1U4pfiRW/Y8EFVCy/vgxk/2wWTxzcqE71LHtCuCzlBDRU2a5CQ5j+mQA==
+
+micromark-util-events-to-acorn@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/micromark-util-events-to-acorn/-/micromark-util-events-to-acorn-1.2.0.tgz"
+  integrity sha512-WWp3bf7xT9MppNuw3yPjpnOxa8cj5ACivEzXJKu0WwnjBYfzaBvIAT9KfeyI0Qkll+bfQtfftSwdgTH6QhTOKw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/acorn" "^4.0.0"
     "@types/estree" "^1.0.0"
@@ -4530,6 +6946,7 @@ micromark-util-events-to-acorn@^1.0.0:
     vfile-message "^3.0.0"
 
 micromark-util-html-tag-name@^1.0.0:
+<<<<<<< HEAD
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/micromark-util-html-tag-name/-/micromark-util-html-tag-name-1.2.0.tgz#48fd7a25826f29d2f71479d3b4e83e94829b3588"
   integrity sha512-VTQzcuQgFUD7yYztuQFKXT49KghjtETQ+Wv/zUjGSGBioZnkA4P1XXZPT1FHeJA6RwRXSF47yvJ1tsJdoxwO+Q==
@@ -4538,10 +6955,21 @@ micromark-util-normalize-identifier@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-1.1.0.tgz#7a73f824eb9f10d442b4d7f120fecb9b38ebf8b7"
   integrity sha512-N+w5vhqrBihhjdpM8+5Xsxy71QWqGn7HYNUvch71iV2PM7+E3uWGox1Qp90loa1ephtCxG2ftRV/Conitc6P2Q==
+=======
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-1.1.0.tgz"
+  integrity sha512-BKlClMmYROy9UiV03SwNmckkjn8QHVaWkqoAqzivabvdGcwNGMMMH/5szAnywmsTBUzDsU57/mFi0sp4BQO6dA==
+
+micromark-util-normalize-identifier@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-1.0.0.tgz"
+  integrity sha512-yg+zrL14bBTFrQ7n35CmByWUTFsgst5JhA4gJYoty4Dqzj4Z4Fr/DHekSS5aLfH9bdlfnSvKAWsAgJhIbogyBg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     micromark-util-symbol "^1.0.0"
 
 micromark-util-resolve-all@^1.0.0:
+<<<<<<< HEAD
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/micromark-util-resolve-all/-/micromark-util-resolve-all-1.1.0.tgz#4652a591ee8c8fa06714c9b54cd6c8e693671188"
   integrity sha512-b/G6BTMSg+bX+xVCshPTPyAu2tmA0E4X98NSR7eIbeC6ycCqCeE7wjfDIgzEbkzdEVJXRtOG4FbEm/uGbCRouA==
@@ -4552,15 +6980,33 @@ micromark-util-sanitize-uri@^1.0.0, micromark-util-sanitize-uri@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-1.2.0.tgz#613f738e4400c6eedbc53590c67b197e30d7f90d"
   integrity sha512-QO4GXv0XZfWey4pYFndLUKEAktKkG5kZTdUNaTAkzbuJxn2tNBOr+QtxR2XpWaMhbImT2dPzyLrPXLlPhph34A==
+=======
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-1.0.0.tgz"
+  integrity sha512-CB/AGk98u50k42kvgaMM94wzBqozSzDDaonKU7P7jwQIuH2RU0TeBqGYJz2WY1UdihhjweivStrJ2JdkdEmcfw==
+  dependencies:
+    micromark-util-types "^1.0.0"
+
+micromark-util-sanitize-uri@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-1.0.0.tgz"
+  integrity sha512-cCxvBKlmac4rxCGx6ejlIviRaMKZc0fWm5HdCHEeDWRSkn44l6NdYVRyU+0nT1XC72EQJMZV8IPHF+jTr56lAg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     micromark-util-character "^1.0.0"
     micromark-util-encode "^1.0.0"
     micromark-util-symbol "^1.0.0"
 
 micromark-util-subtokenize@^1.0.0:
+<<<<<<< HEAD
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/micromark-util-subtokenize/-/micromark-util-subtokenize-1.1.0.tgz#941c74f93a93eaf687b9054aeb94642b0e92edb1"
   integrity sha512-kUQHyzRoxvZO2PuLzMt2P/dwVsTiivCK8icYTeR+3WgbuPqfHgPPy7nFKbeqRivBvn/3N3GBiNC+JRTMSxEC7A==
+=======
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-1.0.2.tgz"
+  integrity sha512-d90uqCnXp/cy4G881Ub4psE57Sf8YD0pim9QdjCRNjfas2M1u6Lbt+XZK9gnHL2XFhnozZiEdCa9CNfXSfQ6xA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     micromark-util-chunked "^1.0.0"
     micromark-util-symbol "^1.0.0"
@@ -4568,6 +7014,7 @@ micromark-util-subtokenize@^1.0.0:
     uvu "^0.5.0"
 
 micromark-util-symbol@^1.0.0:
+<<<<<<< HEAD
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/micromark-util-symbol/-/micromark-util-symbol-1.1.0.tgz#813cd17837bdb912d069a12ebe3a44b6f7063142"
   integrity sha512-uEjpEYY6KMs1g7QfJ2eX1SQEV+ZT4rUD3UcF6l57acZvLNK7PBZL+ty82Z1qhK1/yXIY4bdx04FKMgR0g4IAag==
@@ -4581,6 +7028,21 @@ micromark@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/micromark/-/micromark-3.2.0.tgz#1af9fef3f995ea1ea4ac9c7e2f19c48fd5c006e9"
   integrity sha512-uD66tJj54JLYq0De10AhWycZWGQNUvDI55xPgk2sQM5kn1JYlhbCMTtEeT27+vAhW2FBQxLlOmS3pmA7/2z4aA==
+=======
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-1.0.1.tgz"
+  integrity sha512-oKDEMK2u5qqAptasDAwWDXq0tG9AssVwAx3E9bBF3t/shRIGsWIRG+cGafs2p/SnDSOecnt6hZPCE2o6lHfFmQ==
+
+micromark-util-types@^1.0.0, micromark-util-types@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-1.0.2.tgz"
+  integrity sha512-DCfg/T8fcrhrRKTPjRrw/5LLvdGV7BHySf/1LOZx7TzWZdYRjogNtyNq885z3nNallwr3QUKARjqvHqX1/7t+w==
+
+micromark@^3.0.0:
+  version "3.0.10"
+  resolved "https://registry.npmjs.org/micromark/-/micromark-3.0.10.tgz"
+  integrity sha512-ryTDy6UUunOXy2HPjelppgJ2sNfcPz1pLlMdA6Rz9jPzhLikWXv/irpWV/I2jd68Uhmny7hHxAlAhk4+vWggpg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/debug" "^4.0.0"
     debug "^4.0.0"
@@ -4600,21 +7062,34 @@ micromark@^3.0.0:
     micromark-util-types "^1.0.1"
     uvu "^0.5.0"
 
+<<<<<<< HEAD
 micromatch@4.0.5, micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5:
+=======
+micromatch@^4.0.2, micromatch@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz"
+  integrity sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==
+  dependencies:
+    braces "^3.0.1"
+    picomatch "^2.2.3"
+
+micromatch@^4.0.5:
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   version "4.0.5"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
+  resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz"
   integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
   dependencies:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
-mime-db@1.52.0:
+mime-db@1.52.0, mime-db@^1.52.0:
   version "1.52.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz"
   integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
 
 mime-db@~1.25.0:
   version "1.25.0"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.25.0.tgz#c18dbd7c73a5dbf6f44a024dc0d165a1e7b1c392"
   integrity sha512-5k547tI4Cy+Lddr/hdjNbBEWBwSl8EBc5aSdKvedav8DReADgWJzcYiktaRIw3GtGC1jjwldXtTzvqJZmtvC7w==
 
@@ -4622,26 +7097,36 @@ mime-types@2.1.13:
   version "2.1.13"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.13.tgz#e07aaa9c6c6b9a7ca3012c69003ad25a39e92a88"
   integrity sha512-ryBDp1Z/6X90UvjUK3RksH0IBPM137T7cmg4OgD5wQBojlAiUwuok0QeELkim/72EtcYuNlmbkrcGuxj3Kl0YQ==
+=======
+  resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.25.0.tgz"
+  integrity sha1-wY29fHOl2/b0SgJNwNFloeexw5I=
+
+mime-types@2.1.13:
+  version "2.1.13"
+  resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.13.tgz"
+  integrity sha1-4HqqnGxrmnyjASxpADrSWjnpKog=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     mime-db "~1.25.0"
 
 mime-types@~2.1.24, mime-types@~2.1.34:
   version "2.1.35"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz"
   integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
   dependencies:
     mime-db "1.52.0"
 
 mime@1.6.0:
   version "1.6.0"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+  resolved "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
 mimic-fn@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
+  resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
+<<<<<<< HEAD
 mimic-fn@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc"
@@ -4670,12 +7155,26 @@ minimist@^1.2.0, minimist@^1.2.6:
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.0.4.tgz#dbce03740f50a4786ba994c1fb908844d27b038c"
   integrity sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==
+=======
+minimatch@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz"
+  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimist@^1.2.0:
+  version "1.2.7"
+  resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz"
+  integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 mri@^1.1.0:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
+  resolved "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz"
   integrity sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==
 
+<<<<<<< HEAD
 mrmime@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-2.0.0.tgz#151082a6e06e59a9a39b46b3e14d5cfe92b3abb4"
@@ -4685,26 +7184,38 @@ ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
   integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
+=======
+mrmime@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/mrmime/-/mrmime-1.0.0.tgz"
+  integrity sha512-a70zx7zFfVO7XpnQ2IX1Myh9yY4UYvfld/dikWRnsXxbyvMcfz+u6UfgNAtH+k2QqtJuzVpv6eLTx1G2+WKZbQ==
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz"
+  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 ms@2.1.2:
   version "2.1.2"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
 ms@2.1.3, ms@^2.1.1:
   version "2.1.3"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  resolved "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz"
   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"
+  resolved "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz"
   integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
   dependencies:
     any-promise "^1.0.0"
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
+<<<<<<< HEAD
 nanoid@^3.3.6, nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
@@ -4719,15 +7230,36 @@ natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
+=======
+nanoid@^3.2.0:
+  version "3.3.1"
+  resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz"
+  integrity sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==
+
+nanoid@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz"
+  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
+
+nanoid@^3.3.6:
+  version "3.3.6"
+  resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz"
+  integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
+  integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 negotiator@0.6.3:
   version "0.6.3"
-  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
+  resolved "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz"
   integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
 
 next-remote-watch@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/next-remote-watch/-/next-remote-watch-1.0.0.tgz#34c5a015b1bd191f906479c00baabd1a33cf04f5"
+  resolved "https://registry.npmjs.org/next-remote-watch/-/next-remote-watch-1.0.0.tgz"
   integrity sha512-kV+pglCwcnKyqJIXPHUUrnZr9d3rCqCIEQWBkFYC02GDXHyKVmcFytoY6q0+wMIQqh/izIAQL1x6OKXZhksjLA==
   dependencies:
     body-parser "^1.19.0"
@@ -4738,13 +7270,19 @@ next-remote-watch@^1.0.0:
 
 next-tick@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.1.0.tgz#1836ee30ad56d67ef281b22bd199f709449b35eb"
+  resolved "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz"
   integrity sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==
 
 next@^13.4.1:
+<<<<<<< HEAD
   version "13.5.6"
   resolved "https://registry.yarnpkg.com/next/-/next-13.5.6.tgz#e964b5853272236c37ce0dd2c68302973cf010b1"
   integrity sha512-Y2wTcTbO4WwEsVb4A8VSnOsG1I9ok+h74q0ZdxkwM3EODqrs4pasq7O0iUxbcS9VtWMicG7f3+HAj0r1+NtKSw==
+=======
+  version "13.4.1"
+  resolved "https://registry.npmjs.org/next/-/next-13.4.1.tgz"
+  integrity sha512-JBw2kAIyhKDpjhEWvNVoFeIzNp9xNxg8wrthDOtMctfn3EpqGCmW0FSviNyGgOSOSn6zDaX48pmvbdf6X2W9xA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@next/env" "13.5.6"
     "@swc/helpers" "0.5.2"
@@ -4766,22 +7304,34 @@ next@^13.4.1:
 
 nice-try@^1.0.4:
   version "1.0.5"
-  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
+  resolved "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz"
   integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 
 nlcst-to-string@^2.0.0:
   version "2.0.4"
-  resolved "https://registry.yarnpkg.com/nlcst-to-string/-/nlcst-to-string-2.0.4.tgz#9315dfab80882bbfd86ddf1b706f53622dc400cc"
+  resolved "https://registry.npmjs.org/nlcst-to-string/-/nlcst-to-string-2.0.4.tgz"
   integrity sha512-3x3jwTd6UPG7vi5k4GEzvxJ5rDA7hVUIRNHPblKuMVP9Z3xmlsd9cgLcpAMkc5uPOBna82EeshROFhsPkbnTZg==
 
+<<<<<<< HEAD
 node-releases@^2.0.14:
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"
   integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==
+=======
+node-releases@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz"
+  integrity sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==
+
+node-releases@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz"
+  integrity sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 normalize-package-data@^2.3.2:
   version "2.5.0"
-  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
+  resolved "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz"
   integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
   dependencies:
     hosted-git-info "^2.1.4"
@@ -4791,17 +7341,22 @@ normalize-package-data@^2.3.2:
 
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
 normalize-range@^0.1.2:
   version "0.1.2"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
   integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
+=======
+  resolved "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz"
+  integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 npm-run-all@^4.1.5:
   version "4.1.5"
-  resolved "https://registry.yarnpkg.com/npm-run-all/-/npm-run-all-4.1.5.tgz#04476202a15ee0e2e214080861bff12a51d98fba"
+  resolved "https://registry.npmjs.org/npm-run-all/-/npm-run-all-4.1.5.tgz"
   integrity sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==
   dependencies:
     ansi-styles "^3.2.1"
@@ -4814,15 +7369,23 @@ npm-run-all@^4.1.5:
     shell-quote "^1.6.1"
     string.prototype.padend "^3.0.0"
 
+<<<<<<< HEAD
 npm-run-path@^5.1.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-5.3.0.tgz#e23353d0ebb9317f174e93417e4a4d82d0249e9f"
   integrity sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==
+=======
+npm-run-path@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz"
+  integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     path-key "^4.0.0"
 
 num2fraction@^1.2.2:
   version "1.2.2"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
   integrity sha512-Y1wZESM7VUThYY+4W+X4ySH2maqcA+p7UR+w8VWNWVAd6lwuXXWz/w/Cz43J/dI2I+PS6wD5N+bJUF+gjWvIqg==
 
@@ -4830,54 +7393,108 @@ 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 sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
+=======
+  resolved "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz"
+  integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
+
+object-assign@^4.0.1, object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
+  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 object-hash@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
+  resolved "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz"
   integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
 
+<<<<<<< HEAD
 object-inspect@^1.13.1:
   version "1.13.1"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.1.tgz#b96c6109324ccfef6b12216a956ca4dc2ff94bc2"
   integrity sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==
+=======
+object-inspect@^1.11.0, object-inspect@^1.12.0, object-inspect@^1.9.0:
+  version "1.12.0"
+  resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.0.tgz"
+  integrity sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 object-keys@^1.1.1:
   version "1.1.1"
-  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+  resolved "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
+<<<<<<< HEAD
 object.assign@^4.1.4, object.assign@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.5.tgz#3a833f9ab7fdb80fc9e8d2300c803d216d8fdbb0"
   integrity sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==
+=======
+object.assign@^4.1.0:
+  version "4.1.4"
+  resolved "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz"
+  integrity sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     call-bind "^1.0.5"
     define-properties "^1.2.1"
     has-symbols "^1.0.3"
     object-keys "^1.1.1"
 
+<<<<<<< HEAD
 object.entries@^1.1.6, object.entries@^1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.7.tgz#2b47760e2a2e3a752f39dd874655c61a7f03c131"
   integrity sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==
+=======
+object.assign@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz"
+  integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+    has-symbols "^1.0.1"
+    object-keys "^1.1.1"
+
+object.entries@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.npmjs.org/object.entries/-/object.entries-1.1.5.tgz"
+  integrity sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     call-bind "^1.0.2"
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
 
+<<<<<<< HEAD
 object.fromentries@^2.0.6, object.fromentries@^2.0.7:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.7.tgz#71e95f441e9a0ea6baf682ecaaf37fa2a8d7e616"
   integrity sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==
+=======
+object.fromentries@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.5.tgz"
+  integrity sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     call-bind "^1.0.2"
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
 
+<<<<<<< HEAD
 object.groupby@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.2.tgz#494800ff5bab78fd0eff2835ec859066e00192ec"
   integrity sha512-bzBq58S+x+uo0VjurFT0UktpKHOZmv4/xePiOA1nbB9pMqpGK7rUPNgf+1YC+7mE+0HzhTMqNUuCqvKhj6FnBw==
+=======
+object.hasown@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.0.tgz"
+  integrity sha512-MhjYRfj3GBlhSkDHo6QmvgjRLXQ2zndabdf3nX0yTyZK9rPfxb6uRpAac8HXNLy1GpqWtZ81Qh4v3uOls2sRAg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     array.prototype.filter "^1.0.3"
     call-bind "^1.0.5"
@@ -4885,6 +7502,7 @@ object.groupby@^1.0.1:
     es-abstract "^1.22.3"
     es-errors "^1.0.0"
 
+<<<<<<< HEAD
 object.hasown@^1.1.2:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.3.tgz#6a5f2897bb4d3668b8e79364f98ccf971bda55ae"
@@ -4897,6 +7515,12 @@ object.values@^1.1.6, object.values@^1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.7.tgz#617ed13272e7e1071b43973aa1655d9291b8442a"
   integrity sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==
+=======
+object.values@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz"
+  integrity sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     call-bind "^1.0.2"
     define-properties "^1.2.0"
@@ -4904,21 +7528,26 @@ object.values@^1.1.6, object.values@^1.1.7:
 
 on-finished@2.4.1:
   version "2.4.1"
-  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"
+  resolved "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz"
   integrity sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==
   dependencies:
     ee-first "1.1.1"
 
 once@^1.3.0:
   version "1.4.0"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
   integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
+=======
+  resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz"
+  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     wrappy "1"
 
 onetime@^5.1.0:
   version "5.1.2"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
+  resolved "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz"
   integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
   dependencies:
     mimic-fn "^2.1.0"
@@ -4932,7 +7561,7 @@ onetime@^6.0.0:
 
 open@^7.4.2:
   version "7.4.2"
-  resolved "https://registry.yarnpkg.com/open/-/open-7.4.2.tgz#b8147e26dcf3e426316c730089fd71edd29c2321"
+  resolved "https://registry.npmjs.org/open/-/open-7.4.2.tgz"
   integrity sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==
   dependencies:
     is-docker "^2.0.0"
@@ -4940,13 +7569,19 @@ open@^7.4.2:
 
 opener@^1.5.2:
   version "1.5.2"
-  resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
+  resolved "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz"
   integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==
 
 optionator@^0.9.1:
+<<<<<<< HEAD
   version "0.9.3"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.3.tgz#007397d44ed1872fdc6ed31360190f81814e2c64"
   integrity sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==
+=======
+  version "0.9.1"
+  resolved "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz"
+  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@aashutoshrathi/word-wrap" "^1.2.3"
     deep-is "^0.1.3"
@@ -4957,19 +7592,60 @@ optionator@^0.9.1:
 
 os-tmpdir@~1.0.2:
   version "1.0.2"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==
+=======
+  resolved "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz"
+  integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
+
+outvariant@1.4.0, outvariant@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/outvariant/-/outvariant-1.4.0.tgz"
+  integrity sha512-AlWY719RF02ujitly7Kk/0QlV+pXGFDHrHf9O2OKqyqgBieaPOIeuSkL8sRK6j2WK+/ZAURq2kZsY0d8JapUiw==
+
+outvariant@^1.4.0:
+  version "1.4.2"
+  resolved "https://registry.npmjs.org/outvariant/-/outvariant-1.4.2.tgz"
+  integrity sha512-Ou3dJ6bA/UJ5GVHxah4LnqDwZRwAmWxrG3wtrHrbGnP4RnLCtA64A4F+ae7Y8ww660JaddSoArUR5HjipWSHAQ==
+
+p-limit@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz"
+  integrity sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==
+  dependencies:
+    p-try "^1.0.0"
+
+p-locate@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz"
+  integrity sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=
+  dependencies:
+    p-limit "^1.1.0"
+
+p-map@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz"
+  integrity sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==
+  dependencies:
+    aggregate-error "^3.0.0"
+
+p-try@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz"
+  integrity sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 parent-module@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
+  resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz"
   integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
   dependencies:
     callsites "^3.0.0"
 
 parse-entities@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-2.0.0.tgz#53c6eb5b9314a1f4ec99fa0fdf7ce01ecda0cbe8"
+  resolved "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz"
   integrity sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==
   dependencies:
     character-entities "^1.0.0"
@@ -4980,9 +7656,15 @@ parse-entities@^2.0.0:
     is-hexadecimal "^1.0.0"
 
 parse-entities@^4.0.0:
+<<<<<<< HEAD
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-4.0.1.tgz#4e2a01111fb1c986549b944af39eeda258fc9e4e"
   integrity sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==
+=======
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.0.tgz"
+  integrity sha512-5nk9Fn03x3rEhGaX1FU6IDwG/k+GxLXlFAkgrbM1asuAFl3BhdQWvASaIsmwWypRNcZKHPYnIuOSfIWEyEQnPQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/unist" "^2.0.0"
     character-entities "^2.0.0"
@@ -4995,15 +7677,20 @@ parse-entities@^4.0.0:
 
 parse-json@^4.0.0:
   version "4.0.0"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
   integrity sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==
+=======
+  resolved "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz"
+  integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     error-ex "^1.3.1"
     json-parse-better-errors "^1.0.1"
 
 parse-latin@^4.0.0:
   version "4.3.0"
-  resolved "https://registry.yarnpkg.com/parse-latin/-/parse-latin-4.3.0.tgz#1a70fc5601743baa06c5f12253c334fc94b4a917"
+  resolved "https://registry.npmjs.org/parse-latin/-/parse-latin-4.3.0.tgz"
   integrity sha512-TYKL+K98dcAWoCw/Ac1yrPviU8Trk+/gmjQVaoWEFDZmVD4KRg6c/80xKqNNFQObo2mTONgF8trzAf2UTwKafw==
   dependencies:
     nlcst-to-string "^2.0.0"
@@ -5012,18 +7699,24 @@ parse-latin@^4.0.0:
 
 parse-numeric-range@^1.2.0:
   version "1.3.0"
-  resolved "https://registry.yarnpkg.com/parse-numeric-range/-/parse-numeric-range-1.3.0.tgz#7c63b61190d61e4d53a1197f0c83c47bb670ffa3"
+  resolved "https://registry.npmjs.org/parse-numeric-range/-/parse-numeric-range-1.3.0.tgz"
   integrity sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ==
 
 parseurl@~1.3.3:
   version "1.3.3"
-  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
+  resolved "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz"
   integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
 
 patch-package@^6.2.2:
+<<<<<<< HEAD
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/patch-package/-/patch-package-6.5.1.tgz#3e5d00c16997e6160291fee06a521c42ac99b621"
   integrity sha512-I/4Zsalfhc6bphmJTlrLoOcAF87jcxko4q0qsv4bGcurbr8IskEOtdnt9iCmsQVGL1B+iUhSQqweyTLJfCF9rA==
+=======
+  version "6.4.7"
+  resolved "https://registry.npmjs.org/patch-package/-/patch-package-6.4.7.tgz"
+  integrity sha512-S0vh/ZEafZ17hbhgqdnpunKDfzHQibQizx9g8yEf5dcVk3KOflOfdufRXQX8CSEkyOQwuM/bNz1GwKvFj54kaQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@yarnpkg/lockfile" "^1.1.0"
     chalk "^4.1.2"
@@ -5038,6 +7731,7 @@ patch-package@^6.2.2:
     semver "^5.6.0"
     slash "^2.0.0"
     tmp "^0.0.33"
+<<<<<<< HEAD
     yaml "^1.10.2"
 
 path-is-absolute@^1.0.0:
@@ -5049,10 +7743,27 @@ path-key@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
   integrity sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==
+=======
+
+path-exists@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz"
+  integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz"
+  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
+
+path-key@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz"
+  integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 path-key@^3.1.0:
   version "3.1.1"
-  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  resolved "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
 path-key@^4.0.0:
@@ -5062,7 +7773,7 @@ path-key@^4.0.0:
 
 path-parse@^1.0.7:
   version "1.0.7"
-  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
 path-scurry@^1.10.1:
@@ -5075,21 +7786,22 @@ path-scurry@^1.10.1:
 
 path-to-regexp@0.1.7:
   version "0.1.7"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
+  resolved "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz"
   integrity sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==
 
 path-type@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
+  resolved "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz"
   integrity sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==
   dependencies:
     pify "^3.0.0"
 
 path-type@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
+<<<<<<< HEAD
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
@@ -5099,6 +7811,12 @@ periscopic@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/periscopic/-/periscopic-3.1.0.tgz#7e9037bf51c5855bd33b48928828db4afa79d97a"
   integrity sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==
+=======
+periscopic@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.npmjs.org/periscopic/-/periscopic-3.0.4.tgz"
+  integrity sha512-SFx68DxCv0Iyo6APZuw/AKewkkThGwssmU0QWtTlvov3VAtPX+QJ4CadwSaz8nrT5jPIuxdvJWB4PnD2KNDxQg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/estree" "^1.0.0"
     estree-walker "^3.0.0"
@@ -5106,17 +7824,17 @@ periscopic@^3.0.0:
 
 picocolors@^0.2.1:
   version "0.2.1"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"
+  resolved "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz"
   integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==
 
 picocolors@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   version "2.3.1"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
 pidtree@0.6.0:
@@ -5126,22 +7844,27 @@ pidtree@0.6.0:
 
 pidtree@^0.3.0:
   version "0.3.1"
-  resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.3.1.tgz#ef09ac2cc0533df1f3250ccf2c4d366b0d12114a"
+  resolved "https://registry.npmjs.org/pidtree/-/pidtree-0.3.1.tgz"
   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"
+  resolved "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz"
   integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
 
 pify@^3.0.0:
   version "3.0.0"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
   integrity sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==
+=======
+  resolved "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz"
+  integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 pirates@^4.0.1:
   version "4.0.6"
-  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
+  resolved "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz"
   integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
 
 possible-typed-array-names@^1.0.0:
@@ -5151,7 +7874,7 @@ possible-typed-array-names@^1.0.0:
 
 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"
+  resolved "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.2.tgz"
   integrity sha512-clkFxk/9pcdb4Vkn0hAHq3YnxBQ2p0CGD1dy24jN+reBck+EWxMbxSUqN4Yj7t0w8csl87K6p0gxBe1utkJsYA==
   dependencies:
     postcss "^7.0.2"
@@ -5159,7 +7882,7 @@ postcss-attribute-case-insensitive@^4.0.1:
 
 postcss-color-functional-notation@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz#5efd37a88fbabeb00a2966d1e53d98ced93f74e0"
+  resolved "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz"
   integrity sha512-ZBARCypjEDofW4P6IdPVTLhDNXPRn8T2s1zHbZidW6rPaaZvcnCS2soYFIQJrMZSxiePJ2XIYTlcb2ztr/eT2g==
   dependencies:
     postcss "^7.0.2"
@@ -5167,7 +7890,7 @@ postcss-color-functional-notation@^2.0.1:
 
 postcss-color-gray@^5.0.0:
   version "5.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-color-gray/-/postcss-color-gray-5.0.0.tgz#532a31eb909f8da898ceffe296fdc1f864be8547"
+  resolved "https://registry.npmjs.org/postcss-color-gray/-/postcss-color-gray-5.0.0.tgz"
   integrity sha512-q6BuRnAGKM/ZRpfDascZlIZPjvwsRye7UDNalqVz3s7GDxMtqPY6+Q871liNxsonUw8oC61OG+PSaysYpl1bnw==
   dependencies:
     "@csstools/convert-colors" "^1.4.0"
@@ -5176,7 +7899,7 @@ postcss-color-gray@^5.0.0:
 
 postcss-color-hex-alpha@^5.0.3:
   version "5.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-color-hex-alpha/-/postcss-color-hex-alpha-5.0.3.tgz#a8d9ca4c39d497c9661e374b9c51899ef0f87388"
+  resolved "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-5.0.3.tgz"
   integrity sha512-PF4GDel8q3kkreVXKLAGNpHKilXsZ6xuu+mOQMHWHLPNyjiUBOr75sp5ZKJfmv1MCus5/DWUGcK9hm6qHEnXYw==
   dependencies:
     postcss "^7.0.14"
@@ -5184,7 +7907,7 @@ postcss-color-hex-alpha@^5.0.3:
 
 postcss-color-mod-function@^3.0.3:
   version "3.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-color-mod-function/-/postcss-color-mod-function-3.0.3.tgz#816ba145ac11cc3cb6baa905a75a49f903e4d31d"
+  resolved "https://registry.npmjs.org/postcss-color-mod-function/-/postcss-color-mod-function-3.0.3.tgz"
   integrity sha512-YP4VG+xufxaVtzV6ZmhEtc+/aTXH3d0JLpnYfxqTvwZPbJhWqp8bSY3nfNzNRFLgB4XSaBA82OE4VjOOKpCdVQ==
   dependencies:
     "@csstools/convert-colors" "^1.4.0"
@@ -5193,7 +7916,7 @@ postcss-color-mod-function@^3.0.3:
 
 postcss-color-rebeccapurple@^4.0.1:
   version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-4.0.1.tgz#c7a89be872bb74e45b1e3022bfe5748823e6de77"
+  resolved "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-4.0.1.tgz"
   integrity sha512-aAe3OhkS6qJXBbqzvZth2Au4V3KieR5sRQ4ptb2b2O8wgvB3SJBsdG+jsn2BZbbwekDG8nTfcCNKcSfe/lEy8g==
   dependencies:
     postcss "^7.0.2"
@@ -5201,14 +7924,14 @@ postcss-color-rebeccapurple@^4.0.1:
 
 postcss-custom-media@^7.0.8:
   version "7.0.8"
-  resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-7.0.8.tgz#fffd13ffeffad73621be5f387076a28b00294e0c"
+  resolved "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-7.0.8.tgz"
   integrity sha512-c9s5iX0Ge15o00HKbuRuTqNndsJUbaXdiNsksnVH8H4gdc+zbLzr/UasOwNG6CTDpLFekVY4672eWdiiWu2GUg==
   dependencies:
     postcss "^7.0.14"
 
 postcss-custom-properties@^8.0.11:
   version "8.0.11"
-  resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-8.0.11.tgz#2d61772d6e92f22f5e0d52602df8fae46fa30d97"
+  resolved "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-8.0.11.tgz"
   integrity sha512-nm+o0eLdYqdnJ5abAJeXp4CEU1c1k+eB2yMCvhgzsds/e0umabFrN6HoTy/8Q4K5ilxERdl/JD1LO5ANoYBeMA==
   dependencies:
     postcss "^7.0.17"
@@ -5216,7 +7939,7 @@ postcss-custom-properties@^8.0.11:
 
 postcss-custom-selectors@^5.1.2:
   version "5.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-custom-selectors/-/postcss-custom-selectors-5.1.2.tgz#64858c6eb2ecff2fb41d0b28c9dd7b3db4de7fba"
+  resolved "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-5.1.2.tgz"
   integrity sha512-DSGDhqinCqXqlS4R7KGxL1OSycd1lydugJ1ky4iRXPHdBRiozyMHrdu0H3o7qNOCiZwySZTUI5MV0T8QhCLu+w==
   dependencies:
     postcss "^7.0.2"
@@ -5224,7 +7947,7 @@ postcss-custom-selectors@^5.1.2:
 
 postcss-dir-pseudo-class@^5.0.0:
   version "5.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-5.0.0.tgz#6e3a4177d0edb3abcc85fdb6fbb1c26dabaeaba2"
+  resolved "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-5.0.0.tgz"
   integrity sha512-3pm4oq8HYWMZePJY+5ANriPs3P07q+LW6FAdTlkFH2XqDdP4HeeJYMOzn0HYLhRSjBO3fhiqSwwU9xEULSrPgw==
   dependencies:
     postcss "^7.0.2"
@@ -5232,7 +7955,7 @@ postcss-dir-pseudo-class@^5.0.0:
 
 postcss-double-position-gradients@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-double-position-gradients/-/postcss-double-position-gradients-1.0.0.tgz#fc927d52fddc896cb3a2812ebc5df147e110522e"
+  resolved "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-1.0.0.tgz"
   integrity sha512-G+nV8EnQq25fOI8CH/B6krEohGWnF5+3A6H/+JEpOncu5dCnkS1QQ6+ct3Jkaepw1NGVqqOZH6lqrm244mCftA==
   dependencies:
     postcss "^7.0.5"
@@ -5240,7 +7963,7 @@ postcss-double-position-gradients@^1.0.0:
 
 postcss-env-function@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-env-function/-/postcss-env-function-2.0.2.tgz#0f3e3d3c57f094a92c2baf4b6241f0b0da5365d7"
+  resolved "https://registry.npmjs.org/postcss-env-function/-/postcss-env-function-2.0.2.tgz"
   integrity sha512-rwac4BuZlITeUbiBq60h/xbLzXY43qOsIErngWa4l7Mt+RaSkT7QBjXVGTcBHupykkblHMDrBFh30zchYPaOUw==
   dependencies:
     postcss "^7.0.2"
@@ -5248,42 +7971,42 @@ postcss-env-function@^2.0.2:
 
 postcss-flexbugs-fixes@4.2.1:
   version "4.2.1"
-  resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.2.1.tgz#9218a65249f30897deab1033aced8578562a6690"
+  resolved "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.2.1.tgz"
   integrity sha512-9SiofaZ9CWpQWxOwRh1b/r85KD5y7GgvsNt1056k6OYLvWUun0czCvogfJgylC22uJTwW1KzY3Gz65NZRlvoiQ==
   dependencies:
     postcss "^7.0.26"
 
 postcss-focus-visible@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-focus-visible/-/postcss-focus-visible-4.0.0.tgz#477d107113ade6024b14128317ade2bd1e17046e"
+  resolved "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-4.0.0.tgz"
   integrity sha512-Z5CkWBw0+idJHSV6+Bgf2peDOFf/x4o+vX/pwcNYrWpXFrSfTkQ3JQ1ojrq9yS+upnAlNRHeg8uEwFTgorjI8g==
   dependencies:
     postcss "^7.0.2"
 
 postcss-focus-within@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-focus-within/-/postcss-focus-within-3.0.0.tgz#763b8788596cee9b874c999201cdde80659ef680"
+  resolved "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-3.0.0.tgz"
   integrity sha512-W0APui8jQeBKbCGZudW37EeMCjDeVxKgiYfIIEo8Bdh5SpB9sxds/Iq8SEuzS0Q4YFOlG7EPFulbbxujpkrV2w==
   dependencies:
     postcss "^7.0.2"
 
 postcss-font-variant@^4.0.0:
   version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-font-variant/-/postcss-font-variant-4.0.1.tgz#42d4c0ab30894f60f98b17561eb5c0321f502641"
+  resolved "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-4.0.1.tgz"
   integrity sha512-I3ADQSTNtLTTd8uxZhtSOrTCQ9G4qUVKPjHiDk0bV75QSxXjVWiJVJ2VLdspGUi9fbW9BcjKJoRvxAH1pckqmA==
   dependencies:
     postcss "^7.0.2"
 
 postcss-gap-properties@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-gap-properties/-/postcss-gap-properties-2.0.0.tgz#431c192ab3ed96a3c3d09f2ff615960f902c1715"
+  resolved "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-2.0.0.tgz"
   integrity sha512-QZSqDaMgXCHuHTEzMsS2KfVDOq7ZFiknSpkrPJY6jmxbugUPTuSzs/vuE5I3zv0WAS+3vhrlqhijiprnuQfzmg==
   dependencies:
     postcss "^7.0.2"
 
 postcss-image-set-function@^3.0.1:
   version "3.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-image-set-function/-/postcss-image-set-function-3.0.1.tgz#28920a2f29945bed4c3198d7df6496d410d3f288"
+  resolved "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-3.0.1.tgz"
   integrity sha512-oPTcFFip5LZy8Y/whto91L9xdRHCWEMs3e1MdJxhgt4jy2WYXfhkng59fH5qLXSCPN8k4n94p1Czrfe5IOkKUw==
   dependencies:
     postcss "^7.0.2"
@@ -5291,7 +8014,7 @@ postcss-image-set-function@^3.0.1:
 
 postcss-import@^15.1.0:
   version "15.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"
+  resolved "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz"
   integrity sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==
   dependencies:
     postcss-value-parser "^4.0.0"
@@ -5300,21 +8023,21 @@ postcss-import@^15.1.0:
 
 postcss-initial@^3.0.0:
   version "3.0.4"
-  resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-3.0.4.tgz#9d32069a10531fe2ecafa0b6ac750ee0bc7efc53"
+  resolved "https://registry.npmjs.org/postcss-initial/-/postcss-initial-3.0.4.tgz"
   integrity sha512-3RLn6DIpMsK1l5UUy9jxQvoDeUN4gP939tDcKUHD/kM8SGSKbFAnvkpFpj3Bhtz3HGk1jWY5ZNWX6mPta5M9fg==
   dependencies:
     postcss "^7.0.2"
 
 postcss-js@^4.0.1:
   version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
+  resolved "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz"
   integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
   dependencies:
     camelcase-css "^2.0.1"
 
 postcss-lab-function@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-lab-function/-/postcss-lab-function-2.0.1.tgz#bb51a6856cd12289ab4ae20db1e3821ef13d7d2e"
+  resolved "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-2.0.1.tgz"
   integrity sha512-whLy1IeZKY+3fYdqQFuDBf8Auw+qFuVnChWjmxm/UhHWqNHZx+B99EwxTvGYmUBqe3Fjxs4L1BoZTJmPu6usVg==
   dependencies:
     "@csstools/convert-colors" "^1.4.0"
@@ -5322,67 +8045,79 @@ postcss-lab-function@^2.0.1:
     postcss-values-parser "^2.0.0"
 
 postcss-load-config@^4.0.1:
+<<<<<<< HEAD
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.2.tgz#7159dcf626118d33e299f485d6afe4aff7c4a3e3"
   integrity sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==
+=======
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz"
+  integrity sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     lilconfig "^3.0.0"
     yaml "^2.3.4"
 
 postcss-logical@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-logical/-/postcss-logical-3.0.0.tgz#2495d0f8b82e9f262725f75f9401b34e7b45d5b5"
+  resolved "https://registry.npmjs.org/postcss-logical/-/postcss-logical-3.0.0.tgz"
   integrity sha512-1SUKdJc2vuMOmeItqGuNaC+N8MzBWFWEkAnRnLpFYj1tGGa7NqyVBujfRtgNa2gXR+6RkGUiB2O5Vmh7E2RmiA==
   dependencies:
     postcss "^7.0.2"
 
 postcss-media-minmax@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-media-minmax/-/postcss-media-minmax-4.0.0.tgz#b75bb6cbc217c8ac49433e12f22048814a4f5ed5"
+  resolved "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-4.0.0.tgz"
   integrity sha512-fo9moya6qyxsjbFAYl97qKO9gyre3qvbMnkOZeZwlsW6XYFsvs2DMGDlchVLfAd8LHPZDxivu/+qW2SMQeTHBw==
   dependencies:
     postcss "^7.0.2"
 
 postcss-nested@^6.0.1:
   version "6.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.1.tgz#f83dc9846ca16d2f4fa864f16e9d9f7d0961662c"
+  resolved "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz"
   integrity sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==
   dependencies:
     postcss-selector-parser "^6.0.11"
 
 postcss-nesting@^7.0.0:
   version "7.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.1.tgz#b50ad7b7f0173e5b5e3880c3501344703e04c052"
+  resolved "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-7.0.1.tgz"
   integrity sha512-FrorPb0H3nuVq0Sff7W2rnc3SmIcruVC6YwpcS+k687VxyxO33iE1amna7wHuRVzM8vfiYofXSBHNAZ3QhLvYg==
   dependencies:
     postcss "^7.0.2"
 
 postcss-overflow-shorthand@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-overflow-shorthand/-/postcss-overflow-shorthand-2.0.0.tgz#31ecf350e9c6f6ddc250a78f0c3e111f32dd4c30"
+  resolved "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-2.0.0.tgz"
   integrity sha512-aK0fHc9CBNx8jbzMYhshZcEv8LtYnBIRYQD5i7w/K/wS9c2+0NSR6B3OVMu5y0hBHYLcMGjfU+dmWYNKH0I85g==
   dependencies:
     postcss "^7.0.2"
 
 postcss-page-break@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-page-break/-/postcss-page-break-2.0.0.tgz#add52d0e0a528cabe6afee8b46e2abb277df46bf"
+  resolved "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-2.0.0.tgz"
   integrity sha512-tkpTSrLpfLfD9HvgOlJuigLuk39wVTbbd8RKcy8/ugV2bNBUW3xU+AIqyxhDrQr1VUj1RmyJrBn1YWrqUm9zAQ==
   dependencies:
     postcss "^7.0.2"
 
 postcss-place@^4.0.1:
   version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-place/-/postcss-place-4.0.1.tgz#e9f39d33d2dc584e46ee1db45adb77ca9d1dcc62"
+  resolved "https://registry.npmjs.org/postcss-place/-/postcss-place-4.0.1.tgz"
   integrity sha512-Zb6byCSLkgRKLODj/5mQugyuj9bvAAw9LqJJjgwz5cYryGeXfFZfSXoP1UfveccFmeq0b/2xxwcTEVScnqGxBg==
   dependencies:
     postcss "^7.0.2"
     postcss-values-parser "^2.0.0"
 
 postcss-preset-env@^6.7.0:
+<<<<<<< HEAD
   version "6.7.2"
   resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-6.7.2.tgz#58792ed25cff5b997b7274b5401a8868dafa1c52"
   integrity sha512-nz+VyUUEB9uAxo5VxI0Gq4E31UjHCG3cUiZW3PzRn7KqkGlAEWuYgb/VLbAitEq7Ooubfix+H2JCm9v+C6hJuw==
+=======
+  version "6.7.0"
+  resolved "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-6.7.0.tgz"
+  integrity sha512-eU4/K5xzSFwUFJ8hTdTQzo2RBLbDVt83QZrAvI07TULOkmyQlnYlpwep+2yIK+K+0KlZO4BvFcleOCCcUtwchg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     autoprefixer "^9.6.1"
     browserslist "^4.6.4"
@@ -5424,7 +8159,7 @@ postcss-preset-env@^6.7.0:
 
 postcss-pseudo-class-any-link@^6.0.0:
   version "6.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-6.0.0.tgz#2ed3eed393b3702879dec4a87032b210daeb04d1"
+  resolved "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-6.0.0.tgz"
   integrity sha512-lgXW9sYJdLqtmw23otOzrtbDXofUdfYzNm4PIpNE322/swES3VU9XlXHeJS46zT2onFO7V1QFdD4Q9LiZj8mew==
   dependencies:
     postcss "^7.0.2"
@@ -5432,14 +8167,14 @@ postcss-pseudo-class-any-link@^6.0.0:
 
 postcss-replace-overflow-wrap@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-3.0.0.tgz#61b360ffdaedca84c7c918d2b0f0d0ea559ab01c"
+  resolved "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-3.0.0.tgz"
   integrity sha512-2T5hcEHArDT6X9+9dVSPQdo7QHzG4XKclFT8rU5TzJPDN7RIRTbO9c4drUISOVemLj03aezStHCR2AIcr8XLpw==
   dependencies:
     postcss "^7.0.2"
 
 postcss-selector-matches@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-selector-matches/-/postcss-selector-matches-4.0.0.tgz#71c8248f917ba2cc93037c9637ee09c64436fcff"
+  resolved "https://registry.npmjs.org/postcss-selector-matches/-/postcss-selector-matches-4.0.0.tgz"
   integrity sha512-LgsHwQR/EsRYSqlwdGzeaPKVT0Ml7LAT6E75T8W8xLJY62CE4S/l03BWIt3jT8Taq22kXP08s2SfTSzaraoPww==
   dependencies:
     balanced-match "^1.0.0"
@@ -5447,7 +8182,7 @@ postcss-selector-matches@^4.0.0:
 
 postcss-selector-not@^4.0.0:
   version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-selector-not/-/postcss-selector-not-4.0.1.tgz#263016eef1cf219e0ade9a913780fc1f48204cbf"
+  resolved "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-4.0.1.tgz"
   integrity sha512-YolvBgInEK5/79C+bdFMyzqTg6pkYqDbzZIST/PDMqa/o3qtXenD05apBG2jLgT0/BQ77d4U2UK12jWpilqMAQ==
   dependencies:
     balanced-match "^1.0.0"
@@ -5455,39 +8190,61 @@ postcss-selector-not@^4.0.0:
 
 postcss-selector-parser@^5.0.0-rc.3, postcss-selector-parser@^5.0.0-rc.4:
   version "5.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz#249044356697b33b64f1a8f7c80922dddee7195c"
+  resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz"
   integrity sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==
   dependencies:
     cssesc "^2.0.0"
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
+<<<<<<< HEAD
 postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.2:
   version "6.0.15"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz#11cc2b21eebc0b99ea374ffb9887174855a01535"
   integrity sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==
+=======
+postcss-selector-parser@^6.0.11:
+  version "6.0.13"
+  resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz"
+  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.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz"
+  integrity sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
 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"
+  resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
 postcss-values-parser@^2.0.0, postcss-values-parser@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz#da8b472d901da1e205b47bdc98637b9e9e550e5f"
+  resolved "https://registry.npmjs.org/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz"
   integrity sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg==
   dependencies:
     flatten "^1.0.2"
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
+<<<<<<< HEAD
 postcss@8.4.31:
   version "8.4.31"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
   integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
+=======
+postcss@8.4.14:
+  version "8.4.14"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz"
+  integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     nanoid "^3.3.6"
     picocolors "^1.0.0"
@@ -5495,39 +8252,63 @@ postcss@8.4.31:
 
 postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
   version "7.0.39"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz"
   integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==
   dependencies:
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
+<<<<<<< HEAD
 postcss@^8.4.23, postcss@^8.4.5:
   version "8.4.35"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.35.tgz#60997775689ce09011edf083a549cea44aabe2f7"
   integrity sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==
   dependencies:
     nanoid "^3.3.7"
+=======
+postcss@^8.4.23:
+  version "8.4.25"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.25.tgz"
+  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.npmjs.org/postcss/-/postcss-8.4.6.tgz"
+  integrity sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==
+  dependencies:
+    nanoid "^3.2.0"
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
 prelude-ls@^1.2.1:
   version "1.2.1"
-  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
+  resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
 prettier@^2.5.1:
+<<<<<<< HEAD
   version "2.8.8"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
   integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
+=======
+  version "2.5.1"
+  resolved "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz"
+  integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 progress@^2.0.0:
   version "2.0.3"
-  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
+  resolved "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
 prop-types@^15.6.2, prop-types@^15.8.1:
   version "15.8.1"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
   dependencies:
     loose-envify "^1.4.0"
@@ -5536,25 +8317,32 @@ prop-types@^15.6.2, prop-types@^15.8.1:
 
 property-information@^5.0.0:
   version "5.6.0"
-  resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69"
+  resolved "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz"
   integrity sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==
   dependencies:
     xtend "^4.0.0"
 
 property-information@^6.0.0:
+<<<<<<< HEAD
   version "6.4.1"
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-6.4.1.tgz#de8b79a7415fd2107dfbe65758bb2cc9dfcf60ac"
   integrity sha512-OHYtXfu5aI2sS2LWFSN5rgJjrQ4pCy8i1jubJLe2QvMF8JJ++HXTUIVWFLfXJoaOfvYYjk2SN8J2wFUWIGXT4w==
+=======
+  version "6.1.1"
+  resolved "https://registry.npmjs.org/property-information/-/property-information-6.1.1.tgz"
+  integrity sha512-hrzC564QIl0r0vy4l6MvRLhafmUowhO/O3KgVSoXIbbA2Sz4j8HGpJc6T2cubRVwMwpdiG/vKGfhT4IixmKN9w==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 proxy-addr@~2.0.7:
   version "2.0.7"
-  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
+  resolved "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz"
   integrity sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==
   dependencies:
     forwarded "0.2.0"
     ipaddr.js "1.9.1"
 
 punycode@^2.1.0:
+<<<<<<< HEAD
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
@@ -5563,29 +8351,32 @@ qs@6.11.0:
   version "6.11.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
   integrity sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==
+=======
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+
+qs@6.10.3:
+  version "6.10.3"
+  resolved "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz"
+  integrity sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     side-channel "^1.0.4"
 
 queue-microtask@^1.2.2:
   version "1.2.3"
-  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
+  resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
-raf@^3.4.1:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
-  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
-  dependencies:
-    performance-now "^2.1.0"
-
 range-parser@~1.2.1:
   version "1.2.1"
-  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
+  resolved "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz"
   integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
 
 raw-body@2.5.1:
   version "2.5.1"
-  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.1.tgz#fe1b1628b181b700215e5fd42389f98b71392857"
+  resolved "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz"
   integrity sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==
   dependencies:
     bytes "3.1.2"
@@ -5593,6 +8384,7 @@ raw-body@2.5.1:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+<<<<<<< HEAD
 raw-body@2.5.2:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.2.tgz#99febd83b90e08975087e8f1f9419a149366b68a"
@@ -5607,21 +8399,32 @@ raw-body@2.5.2:
   version "3.1.0-forked.1"
   resolved "https://registry.yarnpkg.com/@gaearon/react-collapsed/-/react-collapsed-3.1.0-forked.1.tgz#b287b81fc2af2971d7d7b523dc40b6cf116822ac"
   integrity sha512-QkW55Upl4eeOtnDMOxasafDtDwaF+DpYKvHq8KZoNz9P477iUH8Ik1YFYuqtI7UA8mHm1/z66LD678dZCXwEEg==
+=======
+react-collapsed@4.0.4:
+  version "4.0.4"
+  resolved "https://registry.npmjs.org/react-collapsed/-/react-collapsed-4.0.4.tgz"
+  integrity sha512-8avvmnQxDYTgGZYVP9+3Z7doomxVEBoCkukpTmUHEIrAYvELZ5jNNfYCt/hCpHB6GmQbzZoDmnDupjsnQVgcCQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
-    raf "^3.4.1"
     tiny-warning "^1.0.3"
 
 react-devtools-inline@4.4.0:
   version "4.4.0"
-  resolved "https://registry.yarnpkg.com/react-devtools-inline/-/react-devtools-inline-4.4.0.tgz#e032a6eb17a9977b682306f84b46e683adf4bf68"
+  resolved "https://registry.npmjs.org/react-devtools-inline/-/react-devtools-inline-4.4.0.tgz"
   integrity sha512-ES0GolSrKO8wsKbsEkVeiR/ZAaHQTY4zDh1UW8DImVmm8oaGLl3ijJDvSGe+qDRKPZdPRnDtWWnSvvrgxXdThQ==
   dependencies:
     es6-symbol "^3"
 
 react-dom@^0.0.0-experimental-16d053d59-20230506:
+<<<<<<< HEAD
   version "0.0.0-fec00a869"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-fec00a869.tgz#f952e11a31e446c00e87603998d7780bc51bdbd9"
   integrity sha512-atB5i2HgCvbvhtGXq9oaX/BCL2AFZjnccougU8S9eulRFNQbNrfGNwIcj04PRo3XU1ZsBw5syL/5l596UaolKA==
+=======
+  version "0.0.0-experimental-16d053d59-20230506"
+  resolved "https://registry.npmjs.org/react-dom/-/react-dom-0.0.0-experimental-16d053d59-20230506.tgz"
+  integrity sha512-I4PIT9ZAdDgpbav9BxfzPv2p5otJz6BEbFEBvFwd1BnQJmtkKKApUU7RYdGKnwY2/r6hdfxPm2pne+NhiyBkzg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -5630,18 +8433,52 @@ react-dom@^0.0.0-experimental-16d053d59-20230506:
 
 react-is@^16.13.1:
   version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
 react-is@^17.0.2:
   version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-remove-scroll-bar@^2.3.3:
+  version "2.3.6"
+  resolved "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz"
+  integrity sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==
+  dependencies:
+    react-style-singleton "^2.2.1"
+    tslib "^2.0.0"
+
+react-remove-scroll@2.5.5:
+  version "2.5.5"
+  resolved "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz"
+  integrity sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==
+  dependencies:
+    react-remove-scroll-bar "^2.3.3"
+    react-style-singleton "^2.2.1"
+    tslib "^2.1.0"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
+
+react-style-singleton@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz"
+  integrity sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==
+  dependencies:
+    get-nonce "^1.0.0"
+    invariant "^2.2.4"
+    tslib "^2.0.0"
+
 react@^0.0.0-experimental-16d053d59-20230506:
+<<<<<<< HEAD
   version "0.0.0-fec00a869"
   resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-fec00a869.tgz#1803f4f17cdd5adfdf614de2386c5fb5c84bbe91"
   integrity sha512-FaS3ViFU4ag7cuhDHQgGK3DAdWaD8YFXzEbO/Qzz33Si7VEzRRdnyoegFwg7VkEKxR6CvCVP6revi9Tm3Gq+WQ==
+=======
+  version "0.0.0-experimental-16d053d59-20230506"
+  resolved "https://registry.npmjs.org/react/-/react-0.0.0-experimental-16d053d59-20230506.tgz"
+  integrity sha512-8PdloFcanNcryJLohpr4rVQfB4oJvsL0Z+TzJ8B66RxauwF95QqUNorGsK1heESrtj4As0oHCmiZkoYzA4uW8w==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -5650,15 +8487,20 @@ react@^0.0.0-experimental-16d053d59-20230506:
 
 read-cache@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+  resolved "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz"
   integrity sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==
   dependencies:
     pify "^2.3.0"
 
 read-pkg@^3.0.0:
   version "3.0.0"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
   integrity sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==
+=======
+  resolved "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz"
+  integrity sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     load-json-file "^4.0.0"
     normalize-package-data "^2.3.2"
@@ -5666,20 +8508,37 @@ read-pkg@^3.0.0:
 
 readdirp@~3.6.0:
   version "3.6.0"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz"
   integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
   dependencies:
     picomatch "^2.2.1"
 
 reading-time@^1.2.0:
   version "1.5.0"
-  resolved "https://registry.yarnpkg.com/reading-time/-/reading-time-1.5.0.tgz#d2a7f1b6057cb2e169beaf87113cc3411b5bc5bb"
+  resolved "https://registry.npmjs.org/reading-time/-/reading-time-1.5.0.tgz"
   integrity sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg==
 
+<<<<<<< HEAD
 reflect.getprototypeof@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.5.tgz#e0bd28b597518f16edaf9c0e292c631eb13e0674"
   integrity sha512-62wgfC8dJWrmxv44CA36pLDnP6KKl3Vhxb7PL+8+qrrFMMoJij4vgiMP8zV4O8+CBMXY1mHxI5fITGHXFHVmQQ==
+=======
+regenerator-runtime@^0.13.4:
+  version "0.13.9"
+  resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
+  integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
+
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
+regexp.prototype.flags@^1.3.1:
+  version "1.4.1"
+  resolved "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.1.tgz"
+  integrity sha512-pMR7hBVUUGI7PMA37m2ofIdQCsomVnas+Jn5UPGAHQ+/LlwKm/aTLJHdasmHRzlfeZwHiAOaRSo2rbBDm3nNUQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     call-bind "^1.0.5"
     define-properties "^1.2.1"
@@ -5706,12 +8565,12 @@ regexp.prototype.flags@^1.5.0, regexp.prototype.flags@^1.5.2:
 
 regexpp@^3.1.0:
   version "3.2.0"
-  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
+  resolved "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
 remark-external-links@^7.0.0:
   version "7.0.1"
-  resolved "https://registry.yarnpkg.com/remark-external-links/-/remark-external-links-7.0.1.tgz#c71ca81ea4cca48f067a9659645e4e87a94e54d5"
+  resolved "https://registry.npmjs.org/remark-external-links/-/remark-external-links-7.0.1.tgz"
   integrity sha512-a98JnTMRln8GseQq0buE4Aq6yYjYF4aRIlrPVxL9PT1pcy+yMJij24dEYAqvdluF9GHgNs/De+8y6kzqsjH1jQ==
   dependencies:
     extend "^3.0.0"
@@ -5722,7 +8581,7 @@ remark-external-links@^7.0.0:
 
 remark-frontmatter@^4.0.1:
   version "4.0.1"
-  resolved "https://registry.yarnpkg.com/remark-frontmatter/-/remark-frontmatter-4.0.1.tgz#84560f7ccef114ef076d3d3735be6d69f8922309"
+  resolved "https://registry.npmjs.org/remark-frontmatter/-/remark-frontmatter-4.0.1.tgz"
   integrity sha512-38fJrB0KnmD3E33a5jZC/5+gGAC2WKNiPw1/fdXJvijBlhA7RCsvJklrYJakS0HedninvaCYW8lQGf9C918GfA==
   dependencies:
     "@types/mdast" "^3.0.0"
@@ -5732,7 +8591,7 @@ remark-frontmatter@^4.0.1:
 
 remark-gfm@^3.0.1:
   version "3.0.1"
-  resolved "https://registry.yarnpkg.com/remark-gfm/-/remark-gfm-3.0.1.tgz#0b180f095e3036545e9dddac0e8df3fa5cfee54f"
+  resolved "https://registry.npmjs.org/remark-gfm/-/remark-gfm-3.0.1.tgz"
   integrity sha512-lEFDoi2PICJyNrACFOfDD3JlLkuSbOa5Wd8EPt06HUdptv8Gn0bxYTdbU/XXQ3swAPkEaGxxPN9cbnMHvVu1Ig==
   dependencies:
     "@types/mdast" "^3.0.0"
@@ -5742,7 +8601,7 @@ remark-gfm@^3.0.1:
 
 remark-html@^12.0.0:
   version "12.0.0"
-  resolved "https://registry.yarnpkg.com/remark-html/-/remark-html-12.0.0.tgz#f39d2a5e173cce777981cb4171b4ea860313d72a"
+  resolved "https://registry.npmjs.org/remark-html/-/remark-html-12.0.0.tgz"
   integrity sha512-M104NMHs48+uswChJkCDXCdabzxAinpHikpt6kS3gmGMyIvPZ5kn53tB9shFsL2O4HUJ9DIEsah1SX1Ve5FXHA==
   dependencies:
     hast-util-sanitize "^3.0.0"
@@ -5752,7 +8611,7 @@ remark-html@^12.0.0:
 
 remark-images@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/remark-images/-/remark-images-2.0.0.tgz#7621a406364c3a0a6e4250c3ee63909cc14a2388"
+  resolved "https://registry.npmjs.org/remark-images/-/remark-images-2.0.0.tgz"
   integrity sha512-1X6XTBQZW489HSwU0k+aU3xAlVe3TyPll6N2Mt1onwINTIqcTk9QTC57937Z8NQDJ8h7gKGXy9d4TJug2dm8lg==
   dependencies:
     is-url "^1.2.2"
@@ -5760,17 +8619,29 @@ remark-images@^2.0.0:
     unist-util-visit-parents "^3.0.0"
 
 remark-mdx@^2.0.0:
+<<<<<<< HEAD
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-2.3.0.tgz#efe678025a8c2726681bde8bf111af4a93943db4"
   integrity sha512-g53hMkpM0I98MU266IzDFMrTD980gNF3BJnkyFcmN+dD873mQeD5rdMO3Y2X+x8umQfbSE0PcoEDl7ledSA+2g==
+=======
+  version "2.1.3"
+  resolved "https://registry.npmjs.org/remark-mdx/-/remark-mdx-2.1.3.tgz"
+  integrity sha512-3SmtXOy9+jIaVctL8Cs3VAQInjRLGOwNXfrBB9KCT+EpJpKD3PQiy0x8hUNGyjQmdyOs40BqgPU7kYtH9uoR6w==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     mdast-util-mdx "^2.0.0"
     micromark-extension-mdxjs "^1.0.0"
 
 remark-parse@^10.0.0:
+<<<<<<< HEAD
   version "10.0.2"
   resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-10.0.2.tgz#ca241fde8751c2158933f031a4e3efbaeb8bc262"
   integrity sha512-3ydxgHa/ZQzG8LvC7jTXccARYDcRld3VfcgIIFs7bI6vbRSxJJmzgLEIIoYKyrfhaY+ujuWaf/PJiMZXoiCXgw==
+=======
+  version "10.0.1"
+  resolved "https://registry.npmjs.org/remark-parse/-/remark-parse-10.0.1.tgz"
+  integrity sha512-1fUyHr2jLsVOkhbvPRBJ5zTKZZyD6yZzYaWCS6BPBdQ8vEMBCH+9zNCDA6tET/zHCi/jLqjCWtlJZUPk+DbnFw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/mdast" "^3.0.0"
     mdast-util-from-markdown "^1.0.0"
@@ -5778,7 +8649,7 @@ remark-parse@^10.0.0:
 
 remark-parse@^8.0.0:
   version "8.0.3"
-  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-8.0.3.tgz#9c62aa3b35b79a486454c690472906075f40c7e1"
+  resolved "https://registry.npmjs.org/remark-parse/-/remark-parse-8.0.3.tgz"
   integrity sha512-E1K9+QLGgggHxCQtLt++uXltxEprmWzNfg+MxpfHsZlrddKzZ/hZyWHDbK3/Ap8HJQqYJRXP+jHczdL6q6i85Q==
   dependencies:
     ccount "^1.0.0"
@@ -5800,7 +8671,7 @@ remark-parse@^8.0.0:
 
 remark-rehype@^10.0.0:
   version "10.1.0"
-  resolved "https://registry.yarnpkg.com/remark-rehype/-/remark-rehype-10.1.0.tgz#32dc99d2034c27ecaf2e0150d22a6dcccd9a6279"
+  resolved "https://registry.npmjs.org/remark-rehype/-/remark-rehype-10.1.0.tgz"
   integrity sha512-EFmR5zppdBp0WQeDVZ/b66CWJipB2q2VLNFMabzDSGR66Z2fQii83G5gTBbgGEnEEA0QRussvrFHxk1HWGJskw==
   dependencies:
     "@types/hast" "^2.0.0"
@@ -5810,7 +8681,7 @@ remark-rehype@^10.0.0:
 
 remark-slug@^7.0.0:
   version "7.0.1"
-  resolved "https://registry.yarnpkg.com/remark-slug/-/remark-slug-7.0.1.tgz#9827ce6d6ee81ca82b79891b0e5931a8123ce63b"
+  resolved "https://registry.npmjs.org/remark-slug/-/remark-slug-7.0.1.tgz"
   integrity sha512-NRvYePr69LdeCkEGwL4KYAmq7kdWG5rEavCXMzUR4qndLoXHJAOLSUmPY6Qm4NJfKix7/EmgObyVaYivONAFhg==
   dependencies:
     "@types/hast" "^2.3.2"
@@ -5822,7 +8693,7 @@ remark-slug@^7.0.0:
 
 remark-stringify@^8.0.0:
   version "8.1.1"
-  resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-8.1.1.tgz#e2a9dc7a7bf44e46a155ec78996db896780d8ce5"
+  resolved "https://registry.npmjs.org/remark-stringify/-/remark-stringify-8.1.1.tgz"
   integrity sha512-q4EyPZT3PcA3Eq7vPpT6bIdokXzFGp9i85igjmhRyXWmPs0Y6/d2FYwUNotKAWyLch7g0ASZJn/KHHcHZQ163A==
   dependencies:
     ccount "^1.0.0"
@@ -5842,7 +8713,7 @@ remark-stringify@^8.0.0:
 
 remark-unwrap-images@^2.0.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/remark-unwrap-images/-/remark-unwrap-images-2.1.0.tgz#1dda005e8397c6f1792e4c8d38ed29602f9284cc"
+  resolved "https://registry.npmjs.org/remark-unwrap-images/-/remark-unwrap-images-2.1.0.tgz"
   integrity sha512-DpM7oEIXNjS3aDQpzxWrTWhUJcd5b8LznbSZnSPi1Yc3fJgLYJlx9uzkj5ekyp01PSBbSbPM2jq4959mcIetvA==
   dependencies:
     hast-util-whitespace "^1.0.0"
@@ -5850,7 +8721,7 @@ remark-unwrap-images@^2.0.0:
 
 remark@^12.0.1:
   version "12.0.1"
-  resolved "https://registry.yarnpkg.com/remark/-/remark-12.0.1.tgz#f1ddf68db7be71ca2bad0a33cd3678b86b9c709f"
+  resolved "https://registry.npmjs.org/remark/-/remark-12.0.1.tgz"
   integrity sha512-gS7HDonkdIaHmmP/+shCPejCEEW+liMp/t/QwmF0Xt47Rpuhl32lLtDV1uKWvGoq+kxr5jSgg5oAIpGuyULjUw==
   dependencies:
     remark-parse "^8.0.0"
@@ -5859,48 +8730,82 @@ remark@^12.0.1:
 
 repeat-string@^1.0.0, repeat-string@^1.5.4:
   version "1.6.1"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
   integrity sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==
+=======
+  resolved "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz"
+  integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 require-from-string@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
+  resolved "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz"
   integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
 
 resolve-from@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
+  resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
+<<<<<<< HEAD
 resolve@^1.1.7, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.22.0, resolve@^1.22.2, resolve@^1.22.4:
   version "1.22.8"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
+=======
+resolve@^1.1.7, resolve@^1.22.2:
+  version "1.22.2"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz"
+  integrity sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     is-core-module "^2.13.0"
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+<<<<<<< HEAD
 resolve@^2.0.0-next.4:
   version "2.0.0-next.5"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.5.tgz#6b0ec3107e671e52b68cd068ef327173b90dc03c"
   integrity sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==
+=======
+resolve@^1.10.0, resolve@^1.12.0, resolve@^1.20.0:
+  version "1.22.0"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz"
+  integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     is-core-module "^2.13.0"
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+<<<<<<< HEAD
 restore-cursor@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-4.0.0.tgz#519560a4318975096def6e609d44100edaa4ccb9"
   integrity sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==
+=======
+resolve@^2.0.0-next.3:
+  version "2.0.0-next.3"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.3.tgz"
+  integrity sha512-W8LucSynKUIDu9ylraa7ueVZ7hc0uAgJBxVsQSKOXOyle8a93qXhcz+XAXZ8bIq2d6i4Ehddn6Evt+0/UwKk6Q==
+  dependencies:
+    is-core-module "^2.2.0"
+    path-parse "^1.0.6"
+
+restore-cursor@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz"
+  integrity sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     onetime "^5.1.0"
     signal-exit "^3.0.2"
 
 retext-latin@^2.0.0:
   version "2.0.4"
-  resolved "https://registry.yarnpkg.com/retext-latin/-/retext-latin-2.0.4.tgz#ef5d34ae7641ae56b0675ea391095e8ee762b251"
+  resolved "https://registry.npmjs.org/retext-latin/-/retext-latin-2.0.4.tgz"
   integrity sha512-fOoSSoQgDZ+l/uS81oxI3alBghDUPja0JEl0TpQxI6MN+dhM6fLFumPJwMZ4PJTyL5FFAgjlsdv8IX+6IRuwMw==
   dependencies:
     parse-latin "^4.0.0"
@@ -5908,7 +8813,7 @@ retext-latin@^2.0.0:
 
 retext-smartypants@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/retext-smartypants/-/retext-smartypants-4.0.0.tgz#77478bd9775b4d7505122b0799594339e08d4fda"
+  resolved "https://registry.npmjs.org/retext-smartypants/-/retext-smartypants-4.0.0.tgz"
   integrity sha512-Mknd05zuIycr4Z/hNDxA8ktqv7pG7wYdTZc68a2MJF+Ibg/WloR5bbyrEjijwNwHRR+xWsovkLH4OQIz/mghdw==
   dependencies:
     nlcst-to-string "^2.0.0"
@@ -5916,14 +8821,14 @@ retext-smartypants@^4.0.0:
 
 retext-stringify@^2.0.0:
   version "2.0.4"
-  resolved "https://registry.yarnpkg.com/retext-stringify/-/retext-stringify-2.0.4.tgz#496d6c532f7dc6d15e4b262de0266e828f72efa9"
+  resolved "https://registry.npmjs.org/retext-stringify/-/retext-stringify-2.0.4.tgz"
   integrity sha512-xOtx5mFJBoT3j7PBtiY2I+mEGERNniofWktI1cKXvjMEJPOuqve0dghLHO1+gz/gScLn4zqspDGv4kk2wS5kSA==
   dependencies:
     nlcst-to-string "^2.0.0"
 
 retext@^7.0.1:
   version "7.0.1"
-  resolved "https://registry.yarnpkg.com/retext/-/retext-7.0.1.tgz#04b7965ab78fe6e5e3a489304545b460d41bf5aa"
+  resolved "https://registry.npmjs.org/retext/-/retext-7.0.1.tgz"
   integrity sha512-N0IaEDkvUjqyfn3/gwxVfI51IxfGzOiVXqPLWnKeCDbiQdxSg0zebzHPxXWnL7TeplAJ+RE4uqrXyYN//s9HjQ==
   dependencies:
     retext-latin "^2.0.0"
@@ -5932,46 +8837,67 @@ retext@^7.0.1:
 
 reusify@^1.0.4:
   version "1.0.4"
-  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
+  resolved "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
 rfdc@^1.3.0:
+<<<<<<< HEAD
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.3.1.tgz#2b6d4df52dffe8bb346992a10ea9451f24373a8f"
   integrity sha512-r5a3l5HzYlIC68TpmYKlxWjmOP6wiPJ1vWv2HeLhNsRZMrCkxeqxiHlQ21oXmQ4F3SiryXBHhAD7JZqvOJjFmg==
+=======
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/rfdc/-/rfdc-1.3.0.tgz"
+  integrity sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 rimraf@^2.5.4, rimraf@^2.6.3:
   version "2.7.1"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
+  resolved "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz"
   integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
   dependencies:
     glob "^7.1.3"
 
 rimraf@^3.0.2:
   version "3.0.2"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz"
   integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
   dependencies:
     glob "^7.1.3"
 
 rss@^1.2.2:
   version "1.2.2"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/rss/-/rss-1.2.2.tgz#50a1698876138133a74f9a05d2bdc8db8d27a921"
   integrity sha512-xUhRTgslHeCBeHAqaWSbOYTydN2f0tAzNXvzh3stjz7QDhQMzdgHf3pfgNIngeytQflrFPfy6axHilTETr6gDg==
+=======
+  resolved "https://registry.npmjs.org/rss/-/rss-1.2.2.tgz"
+  integrity sha1-UKFpiHYTgTOnT5oF0r3I240nqSE=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     mime-types "2.1.13"
     xml "1.0.1"
 
 run-parallel@^1.1.9:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
+  resolved "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz"
   integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
   dependencies:
     queue-microtask "^1.2.2"
 
+<<<<<<< HEAD
+=======
+rxjs@^7.5.2:
+  version "7.5.2"
+  resolved "https://registry.npmjs.org/rxjs/-/rxjs-7.5.2.tgz"
+  integrity sha512-PwDt186XaL3QN5qXj/H9DGyHhP3/RYYgZZwqBv9Tv8rsAaiwFH1IsJJlcgD37J7UW5a6O67qX0KWKS3/pu0m4w==
+  dependencies:
+    tslib "^2.1.0"
+
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 sade@^1.7.3:
   version "1.8.1"
-  resolved "https://registry.yarnpkg.com/sade/-/sade-1.8.1.tgz#0a78e81d658d394887be57d2a409bf703a3b2701"
+  resolved "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz"
   integrity sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==
   dependencies:
     mri "^1.1.0"
@@ -5988,9 +8914,10 @@ safe-array-concat@^1.1.0:
 
 safe-buffer@5.2.1:
   version "5.2.1"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
+<<<<<<< HEAD
 safe-regex-test@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.3.tgz#a5b4c0f06e0ab50ea2c395c14d8371232924c377"
@@ -5999,29 +8926,43 @@ safe-regex-test@^1.0.3:
     call-bind "^1.0.6"
     es-errors "^1.3.0"
     is-regex "^1.1.4"
+=======
+safe-buffer@~5.1.1:
+  version "5.1.2"
+  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 "safer-buffer@>= 2.1.2 < 3":
   version "2.1.2"
-  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+<<<<<<< HEAD
 scheduler@0.0.0-fec00a869:
   version "0.0.0-fec00a869"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-fec00a869.tgz#e28ff1aa107e1d04d6e8901641b4fb1e3ba98577"
   integrity sha512-0U25jnyBP6dRPYwaVW4WMYB0jJSYlrIHFmIuXv27X+KIHJr7vyE9gcFTqZ61NQTuxYLYepAHnUs4KgQEUDlI+g==
+=======
+scheduler@0.0.0-experimental-16d053d59-20230506:
+  version "0.0.0-experimental-16d053d59-20230506"
+  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.0.0-experimental-16d053d59-20230506.tgz"
+  integrity sha512-gGnyU4CkC/+msd1dOQW9zuquI3GoEziuS42soP0AvbTCvRkeU4qhR/mRRaU+/a7JK/OFeSSudcz7enkrkZdSPA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
 section-matter@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/section-matter/-/section-matter-1.0.0.tgz#e9041953506780ec01d59f292a19c7b850b84167"
+  resolved "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz"
   integrity sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==
   dependencies:
     extend-shallow "^2.0.1"
     kind-of "^6.0.0"
 
 "semver@2 || 3 || 4 || 5", semver@^5.5.0, semver@^5.6.0:
+<<<<<<< HEAD
   version "5.7.2"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
   integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
@@ -6035,12 +8976,34 @@ semver@^7.2.1, semver@^7.3.5, semver@^7.3.7:
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.0.tgz#1a46a4db4bffcccd97b743b5005c8325f23d4e2d"
   integrity sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==
+=======
+  version "5.7.1"
+  resolved "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz"
+  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+
+semver@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+
+semver@^7.2.1, semver@^7.3.5:
+  version "7.3.5"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz"
+  integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
+  dependencies:
+    lru-cache "^6.0.0"
+
+semver@^7.3.7:
+  version "7.3.7"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz"
+  integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     lru-cache "^6.0.0"
 
 send@0.18.0:
   version "0.18.0"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
+  resolved "https://registry.npmjs.org/send/-/send-0.18.0.tgz"
   integrity sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==
   dependencies:
     debug "2.6.9"
@@ -6059,7 +9022,7 @@ send@0.18.0:
 
 serve-static@1.15.0:
   version "1.15.0"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.15.0.tgz#faaef08cffe0a1a62f60cad0c4e513cff0ac9540"
+  resolved "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz"
   integrity sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==
   dependencies:
     encodeurl "~1.0.2"
@@ -6091,34 +9054,45 @@ set-function-name@^2.0.0, set-function-name@^2.0.1:
 
 setprototypeof@1.2.0:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
+  resolved "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz"
   integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
 
 shebang-command@^1.2.0:
   version "1.2.0"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
   integrity sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==
+=======
+  resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz"
+  integrity sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     shebang-regex "^1.0.0"
 
 shebang-command@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz"
   integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
   dependencies:
     shebang-regex "^3.0.0"
 
 shebang-regex@^1.0.0:
   version "1.0.0"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
   integrity sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==
+=======
+  resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz"
+  integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 shebang-regex@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
 shell-quote@^1.6.1:
+<<<<<<< HEAD
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.1.tgz#6dbf4db75515ad5bac63b4f1894c3a154c766680"
   integrity sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==
@@ -6127,12 +9101,23 @@ side-channel@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.5.tgz#9a84546599b48909fb6af1211708d23b1946221b"
   integrity sha512-QcgiIWV4WV7qWExbN5llt6frQB/lBven9pqliLXfGPB+K9ZYXxDozp0wLkHS24kWCm+6YXH/f0HhnObZnZOBnQ==
+=======
+  version "1.7.3"
+  resolved "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.3.tgz"
+  integrity sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw==
+
+side-channel@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz"
+  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     call-bind "^1.0.6"
     es-errors "^1.3.0"
     get-intrinsic "^1.2.4"
     object-inspect "^1.13.1"
 
+<<<<<<< HEAD
 signal-exit@^3.0.2:
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
@@ -6147,6 +9132,17 @@ sirv@^2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/sirv/-/sirv-2.0.4.tgz#5dd9a725c578e34e449f332703eb2a74e46a29b0"
   integrity sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==
+=======
+signal-exit@^3.0.2, signal-exit@^3.0.3:
+  version "3.0.6"
+  resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.6.tgz"
+  integrity sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ==
+
+sirv@^1.0.7:
+  version "1.0.19"
+  resolved "https://registry.npmjs.org/sirv/-/sirv-1.0.19.tgz"
+  integrity sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@polka/url" "^1.0.0-next.24"
     mrmime "^2.0.0"
@@ -6154,17 +9150,29 @@ sirv@^2.0.3:
 
 slash@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
+  resolved "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz"
   integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==
 
 slash@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
+  resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
+<<<<<<< HEAD
+=======
+slice-ansi@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz"
+  integrity sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==
+  dependencies:
+    ansi-styles "^4.0.0"
+    astral-regex "^2.0.0"
+    is-fullwidth-code-point "^3.0.0"
+
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 slice-ansi@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b"
+  resolved "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz"
   integrity sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==
   dependencies:
     ansi-styles "^4.0.0"
@@ -6173,7 +9181,7 @@ slice-ansi@^4.0.0:
 
 slice-ansi@^5.0.0:
   version "5.0.0"
-  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-5.0.0.tgz#b73063c57aa96f9cd881654b15294d95d285c42a"
+  resolved "https://registry.npmjs.org/slice-ansi/-/slice-ansi-5.0.0.tgz"
   integrity sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==
   dependencies:
     ansi-styles "^6.0.0"
@@ -6189,25 +9197,34 @@ slice-ansi@^7.0.0:
 
 source-map-js@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
+<<<<<<< HEAD
+=======
+source-map@^0.5.0:
+  version "0.5.7"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz"
+  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
+
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 source-map@^0.6.1:
   version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
 source-map@^0.7.0:
   version "0.7.4"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz"
   integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==
 
 space-separated-tokens@^1.0.0:
   version "1.1.5"
-  resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
+  resolved "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz"
   integrity sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==
 
 space-separated-tokens@^2.0.0:
+<<<<<<< HEAD
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz#1ecd9d2350a3844572c3f4a312bceb018348859f"
   integrity sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==
@@ -6216,24 +9233,41 @@ spdx-correct@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.2.0.tgz#4f5ab0668f0059e34f9c00dce331784a12de4e9c"
   integrity sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==
+=======
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.1.tgz"
+  integrity sha512-ekwEbFp5aqSPKaqeY1PGrlGQxPNaq+Cnx4+bE2D8sciBQrHpbwoBbawqTN2+6jPs9IdWxxiUcN0K2pkczD3zmw==
+
+spdx-correct@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz"
+  integrity sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     spdx-expression-parse "^3.0.0"
     spdx-license-ids "^3.0.0"
 
 spdx-exceptions@^2.1.0:
+<<<<<<< HEAD
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.5.0.tgz#5d607d27fc806f66d7b64a766650fa890f04ed66"
   integrity sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==
+=======
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz"
+  integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 spdx-expression-parse@^3.0.0:
   version "3.0.1"
-  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679"
+  resolved "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz"
   integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
   dependencies:
     spdx-exceptions "^2.1.0"
     spdx-license-ids "^3.0.0"
 
 spdx-license-ids@^3.0.0:
+<<<<<<< HEAD
   version "3.0.17"
   resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.17.tgz#887da8aa73218e51a1d917502d79863161a93f9c"
   integrity sha512-sh8PWc/ftMqAAdFiBu6Fy6JUOYjqDJBJvIhpfDMyHrr0Rbp5liZqd4TjtQ/RgfLjKFZb+LMx5hpml5qOWy0qvg==
@@ -6242,45 +9276,85 @@ sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
+=======
+  version "3.0.11"
+  resolved "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.11.tgz"
+  integrity sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g==
+
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz"
+  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 state-toggle@^1.0.0:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/state-toggle/-/state-toggle-1.0.3.tgz#e123b16a88e143139b09c6852221bc9815917dfe"
+  resolved "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz"
   integrity sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ==
 
+static-browser-server@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/static-browser-server/-/static-browser-server-1.0.3.tgz"
+  integrity sha512-ZUyfgGDdFRbZGGJQ1YhiM930Yczz5VlbJObrQLlk24+qNHVQx4OlLcYswEUo3bIyNAbQUIUR9Yr5/Hqjzqb4zA==
+  dependencies:
+    "@open-draft/deferred-promise" "^2.1.0"
+    dotenv "^16.0.3"
+    mime-db "^1.52.0"
+    outvariant "^1.3.0"
+
 statuses@2.0.1:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
+  resolved "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz"
   integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
 
 streamsearch@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
+  resolved "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz"
   integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
 
+<<<<<<< HEAD
 string-argv@0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
+=======
+strict-event-emitter@^0.4.3:
+  version "0.4.6"
+  resolved "https://registry.npmjs.org/strict-event-emitter/-/strict-event-emitter-0.4.6.tgz"
+  integrity sha512-12KWeb+wixJohmnwNFerbyiBrAlq5qJLwIt38etRtKtmmHyDSoGlIqFE9wx+4IwG0aDjI7GV8tc8ZccjWZZtTg==
+
+string-argv@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz"
+  integrity sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.3:
   version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
   dependencies:
     emoji-regex "^8.0.0"
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.1"
 
+<<<<<<< HEAD
 string-width@^5.0.1, string-width@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
   integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
+=======
+string-width@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-5.1.0.tgz"
+  integrity sha512-7x54QnN21P+XL/v8SuNKvfgsUre6PXpN7mc77N3HlZv+f1SBRGmjxtOud2Z6FZ8DmdkD/IdjCaf9XXbnqmTZGQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     eastasianwidth "^0.2.0"
     emoji-regex "^9.2.2"
     strip-ansi "^7.0.1"
 
+<<<<<<< HEAD
 string-width@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-7.1.0.tgz#d994252935224729ea3719c49f7206dc9c46550a"
@@ -6294,6 +9368,12 @@ string.prototype.matchall@^4.0.8:
   version "4.0.10"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.10.tgz#a1553eb532221d4180c51581d6072cd65d1ee100"
   integrity sha512-rGXbGmOEosIQi6Qva94HUjgPs9vKW+dkG7Y8Q5O2OYkWL6wFaTRZO8zM4mhP94uX55wgyrXzfS2aGtGzUL7EJQ==
+=======
+string.prototype.matchall@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.6.tgz"
+  integrity sha512-6WgDX8HmQqvEd7J+G6VtAahhsQIssiZ8zl7zKh1VDMFyL3hRTJP4FTNA3RbIp2TOQ9AYNDcc7e3fH0Qbup+DBg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     call-bind "^1.0.2"
     define-properties "^1.2.0"
@@ -6306,27 +9386,47 @@ string.prototype.matchall@^4.0.8:
     side-channel "^1.0.4"
 
 string.prototype.padend@^3.0.0:
+<<<<<<< HEAD
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/string.prototype.padend/-/string.prototype.padend-3.1.5.tgz#311ef3a4e3c557dd999cdf88fbdde223f2ac0f95"
   integrity sha512-DOB27b/2UTTD+4myKUFh+/fXWcu/UDyASIXfg+7VzoCNNGOfWvoyU/x5pvVHr++ztyt/oSYI1BcWBBG/hmlNjA==
+=======
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.3.tgz"
+  integrity sha512-jNIIeokznm8SD/TZISQsZKYu7RJyheFNt84DUPrh482GC8RVp2MKqm2O5oBRdGxbDQoXrhhWtPIWQOiy20svUg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     call-bind "^1.0.2"
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
 
+<<<<<<< HEAD
 string.prototype.trim@^1.2.8:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz#f9ac6f8af4bd55ddfa8895e6aea92a96395393bd"
   integrity sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==
+=======
+string.prototype.trimend@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz"
+  integrity sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     call-bind "^1.0.2"
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
 
+<<<<<<< HEAD
 string.prototype.trimend@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.7.tgz#1bb3afc5008661d73e2dc015cd4853732d6c471e"
   integrity sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==
+=======
+string.prototype.trimstart@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz"
+  integrity sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     call-bind "^1.0.2"
     define-properties "^1.2.0"
@@ -6343,7 +9443,7 @@ string.prototype.trimstart@^1.0.7:
 
 stringify-entities@^3.0.0, stringify-entities@^3.0.1:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-3.1.0.tgz#b8d3feac256d9ffcc9fa1fefdcf3ca70576ee903"
+  resolved "https://registry.npmjs.org/stringify-entities/-/stringify-entities-3.1.0.tgz"
   integrity sha512-3FP+jGMmMV/ffZs86MoghGqAoqXAdxLrJP4GUdrDN1aIScYih5tuIO3eF4To5AJZ79KDZ8Fpdy7QJnK8SsL1Vg==
   dependencies:
     character-entities-html4 "^1.0.0"
@@ -6352,7 +9452,7 @@ stringify-entities@^3.0.0, stringify-entities@^3.0.1:
 
 stringify-entities@^4.0.0:
   version "4.0.3"
-  resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-4.0.3.tgz#cfabd7039d22ad30f3cc435b0ca2c1574fc88ef8"
+  resolved "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.3.tgz"
   integrity sha512-BP9nNHMhhfcMbiuQKCqMjhDP5yBCAxsPu4pHFFzJ6Alo9dZgY4VLDPutXqIjpRiMoKdp7Av85Gr73Q5uH9k7+g==
   dependencies:
     character-entities-html4 "^2.0.0"
@@ -6360,20 +9460,28 @@ stringify-entities@^4.0.0:
 
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
   dependencies:
     ansi-regex "^5.0.1"
 
+<<<<<<< HEAD
 strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
   integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
+=======
+strip-ansi@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz"
+  integrity sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     ansi-regex "^6.0.1"
 
 strip-bom-string@^1.0.0:
   version "1.0.0"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/strip-bom-string/-/strip-bom-string-1.0.0.tgz#e5211e9224369fbb81d633a2f00044dc8cedad92"
   integrity sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==
 
@@ -6386,13 +9494,28 @@ strip-final-newline@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-3.0.0.tgz#52894c313fbff318835280aed60ff71ebf12b8fd"
   integrity sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==
+=======
+  resolved "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz"
+  integrity sha1-5SEekiQ2n7uB1jOi8ABE3IztrZI=
+
+strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz"
+  integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
+
+strip-final-newline@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz"
+  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   version "3.1.1"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
+  resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
 style-mod@^4.0.0:
+<<<<<<< HEAD
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/style-mod/-/style-mod-4.1.1.tgz#5d3a94f4f7c64988fc484238239712c428f01b57"
   integrity sha512-nFSNaYG2I8jgB3GZ67q7WjnHlZBzyX5OKgx89k6JkPlaNoyMlRstdBvWgo95qRgUa6tUuvpt4zZM6KWCj+oU6Q==
@@ -6401,20 +9524,36 @@ style-to-object@^0.4.1:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.4.4.tgz#266e3dfd56391a7eefb7770423612d043c3f33ec"
   integrity sha512-HYNoHZa2GorYNyqiCaBgsxvcJIn7OHq6inEga+E6Ke3m5JkoqpQbnFssk4jwe+K7AhGa2fcha4wSOf1Kn01dMg==
+=======
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/style-mod/-/style-mod-4.0.0.tgz"
+  integrity sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw==
+
+style-to-object@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz"
+  integrity sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     inline-style-parser "0.1.1"
 
 styled-jsx@5.1.1:
   version "5.1.1"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.1.tgz#839a1c3aaacc4e735fed0781b8619ea5d0009d1f"
+  resolved "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz"
   integrity sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==
   dependencies:
     client-only "0.0.1"
 
 sucrase@^3.32.0:
+<<<<<<< HEAD
   version "3.35.0"
   resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263"
   integrity sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==
+=======
+  version "3.32.0"
+  resolved "https://registry.npmjs.org/sucrase/-/sucrase-3.32.0.tgz"
+  integrity sha512-ydQOU34rpSyj2TGyz4D2p8rbktIOZ8QY9s+DGLvFU1i5pWJE8vkpruCjGCMHsdXwnD7JDcS+noSwM/a7zyNFDQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@jridgewell/gen-mapping" "^0.3.2"
     commander "^4.0.0"
@@ -6426,27 +9565,41 @@ sucrase@^3.32.0:
 
 supports-color@^5.3.0:
   version "5.5.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
   dependencies:
     has-flag "^3.0.0"
 
 supports-color@^7.1.0:
   version "7.2.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz"
   integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
   dependencies:
     has-flag "^4.0.0"
 
+<<<<<<< HEAD
+=======
+supports-color@^9.2.1:
+  version "9.2.1"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-9.2.1.tgz"
+  integrity sha512-Obv7ycoCTG51N7y175StI9BlAXrmgZrFhZOb0/PyjHBher/NmsdBgbbQ1Inhq+gIhz6+7Gb+jWF2Vqi7Mf1xnQ==
+
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 supports-preserve-symlinks-flag@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
 table@^6.0.9:
+<<<<<<< HEAD
   version "6.8.1"
   resolved "https://registry.yarnpkg.com/table/-/table-6.8.1.tgz#ea2b71359fe03b017a5fbc296204471158080bdf"
   integrity sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==
+=======
+  version "6.8.0"
+  resolved "https://registry.npmjs.org/table/-/table-6.8.0.tgz"
+  integrity sha512-s/fitrbVeEyHKFa7mFdkuQMWlH1Wgw/yEXMt5xACT4ZpzWFluehAxRtUUQKPuWhaLAWhFcVx6w3oC8VKaUfPGA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     ajv "^8.0.1"
     lodash.truncate "^4.4.2"
@@ -6454,9 +9607,15 @@ table@^6.0.9:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
+<<<<<<< HEAD
 tailwindcss@^3.3.2:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.1.tgz#f512ca5d1dd4c9503c7d3d28a968f1ad8f5c839d"
+=======
+tailwindcss@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz"
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   integrity sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==
   dependencies:
     "@alloc/quick-lru" "^5.2.0"
@@ -6484,96 +9643,134 @@ tailwindcss@^3.3.2:
 
 text-table@^0.2.0:
   version "0.2.0"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
-
-textextensions@2:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/textextensions/-/textextensions-2.6.0.tgz#d7e4ab13fe54e32e08873be40d51b74229b00fc4"
-  integrity sha512-49WtAWS+tcsy93dRt6P0P3AMD2m5PvXRhuEA0kaXos5ZLlujtYmpmFsB+QvWUSxE1ZsstmYXfQ7L40+EcQgpAQ==
+=======
+  resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz"
+  integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 thenify-all@^1.0.0:
   version "1.6.0"
-  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
+  resolved "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz"
   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"
+  resolved "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz"
   integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
   dependencies:
     any-promise "^1.0.0"
 
+<<<<<<< HEAD
+=======
+through@^2.3.8:
+  version "2.3.8"
+  resolved "https://registry.npmjs.org/through/-/through-2.3.8.tgz"
+  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
+
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 tiny-warning@^1.0.3:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  resolved "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
 
 tmp@^0.0.33:
   version "0.0.33"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
+  resolved "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz"
   integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==
   dependencies:
     os-tmpdir "~1.0.2"
 
 to-fast-properties@^2.0.0:
   version "2.0.0"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
   integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==
+=======
+  resolved "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz"
+  integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 to-regex-range@^5.0.1:
   version "5.0.1"
-  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz"
   integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
   dependencies:
     is-number "^7.0.0"
 
 toidentifier@1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
+  resolved "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz"
   integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
 
+<<<<<<< HEAD
 totalist@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/totalist/-/totalist-3.0.1.tgz#ba3a3d600c915b1a97872348f79c127475f6acf8"
   integrity sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==
+=======
+totalist@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz"
+  integrity sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 trim-lines@^3.0.0:
   version "3.0.1"
-  resolved "https://registry.yarnpkg.com/trim-lines/-/trim-lines-3.0.1.tgz#d802e332a07df861c48802c04321017b1bd87338"
+  resolved "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz"
   integrity sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==
 
 trim-trailing-lines@^1.0.0:
   version "1.1.4"
-  resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz#bd4abbec7cc880462f10b2c8b5ce1d8d1ec7c2c0"
+  resolved "https://registry.npmjs.org/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz"
   integrity sha512-rjUWSqnfTNrjbB9NQWfPMH/xRK1deHeGsHoVfpxJ++XeYXE0d6B1En37AHfw3jtfTU7dzMzZL2jjpe8Qb5gLIQ==
 
 trim@0.0.1:
   version "0.0.1"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/trim/-/trim-0.0.1.tgz#5858547f6b290757ee95cccc666fb50084c460dd"
   integrity sha512-YzQV+TZg4AxpKxaTHK3c3D+kRDCGVEE7LemdlQZoQXn0iennk10RsIoY6ikzAqJTc9Xjl9C1/waHom/J86ziAQ==
+=======
+  resolved "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz"
+  integrity sha1-WFhUf2spB1fulczMZm+1AITEYN0=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 trough@^1.0.0:
   version "1.0.5"
-  resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
+  resolved "https://registry.npmjs.org/trough/-/trough-1.0.5.tgz"
   integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
 
 trough@^2.0.0:
+<<<<<<< HEAD
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/trough/-/trough-2.2.0.tgz#94a60bd6bd375c152c1df911a4b11d5b0256f50f"
   integrity sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==
+=======
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/trough/-/trough-2.0.2.tgz"
+  integrity sha512-FnHq5sTMxC0sk957wHDzRnemFnNBvt/gSY99HzK8F7UP5WAbvP70yX5bd7CjEQkN+TjdxwI7g7lJ6podqrG2/w==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 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"
+  resolved "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz"
   integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
 
+<<<<<<< HEAD
 tsconfig-paths@^3.14.1, tsconfig-paths@^3.15.0:
   version "3.15.0"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz#5299ec605e55b1abb23ec939ef15edaf483070d4"
   integrity sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==
+=======
+tsconfig-paths@^3.12.0, tsconfig-paths@^3.9.0:
+  version "3.12.0"
+  resolved "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.12.0.tgz"
+  integrity sha512-e5adrnOYT6zqVnWqZu7i/BQ3BnhzvGbjEjejFXO20lKIKpwTaupkCPgEfv4GZK1IBciJUEhYs3J3p75FdaTFVg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/json5" "^0.0.29"
     json5 "^1.0.2"
@@ -6582,41 +9779,65 @@ tsconfig-paths@^3.14.1, tsconfig-paths@^3.15.0:
 
 tslib@^1.8.1:
   version "1.14.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+<<<<<<< HEAD
 tslib@^2.4.0:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+=======
+tslib@^2.0.0:
+  version "2.6.3"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz"
+  integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
+
+tslib@^2.1.0:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz"
+  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
+
+tslib@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 tsutils@^3.21.0:
   version "3.21.0"
-  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
+  resolved "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz"
   integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
   dependencies:
     tslib "^1.8.1"
 
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
-  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
+  resolved "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz"
   integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
   dependencies:
     prelude-ls "^1.2.1"
 
 type-fest@^0.20.2:
   version "0.20.2"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
+  resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz"
   integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
 
+<<<<<<< HEAD
 type-fest@^3.0.0:
   version "3.13.1"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-3.13.1.tgz#bb744c1f0678bea7543a2d1ec24e83e68e8c8706"
   integrity sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==
+=======
+type-fest@^0.21.3:
+  version "0.21.3"
+  resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz"
+  integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 type-is@~1.6.18:
   version "1.6.18"
-  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
+  resolved "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz"
   integrity sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
   dependencies:
     media-typer "0.3.0"
@@ -6624,18 +9845,30 @@ type-is@~1.6.18:
 
 type@^1.0.1:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/type/-/type-1.2.0.tgz#848dd7698dafa3e54a6c479e759c4bc3f18847a0"
+  resolved "https://registry.npmjs.org/type/-/type-1.2.0.tgz"
   integrity sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==
 
 type@^2.7.2:
   version "2.7.2"
-  resolved "https://registry.yarnpkg.com/type/-/type-2.7.2.tgz#2376a15a3a28b1efa0f5350dcf72d24df6ef98d0"
+  resolved "https://registry.npmjs.org/type/-/type-2.7.2.tgz"
   integrity sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==
 
+<<<<<<< HEAD
 typed-array-buffer@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz#1867c5d83b20fcb5ccf32649e5e2fc7424474ff3"
   integrity sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==
+=======
+typescript@^4.0.2:
+  version "4.5.5"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz"
+  integrity sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==
+
+unbox-primitive@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz"
+  integrity sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     call-bind "^1.0.7"
     es-errors "^1.3.0"
@@ -6693,16 +9926,22 @@ unbox-primitive@^1.0.2:
 
 unherit@^1.0.4:
   version "1.1.3"
-  resolved "https://registry.yarnpkg.com/unherit/-/unherit-1.1.3.tgz#6c9b503f2b41b262330c80e91c8614abdaa69c22"
+  resolved "https://registry.npmjs.org/unherit/-/unherit-1.1.3.tgz"
   integrity sha512-Ft16BJcnapDKp0+J/rqFC3Rrk6Y/Ng4nzsC028k2jdDII/rdZ7Wd3pPT/6+vIIxRagwRc9K0IUX0Ra4fKvw+WQ==
   dependencies:
     inherits "^2.0.0"
     xtend "^4.0.0"
 
 unified@^10.0.0:
+<<<<<<< HEAD
   version "10.1.2"
   resolved "https://registry.yarnpkg.com/unified/-/unified-10.1.2.tgz#b1d64e55dafe1f0b98bb6c719881103ecf6c86df"
   integrity sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==
+=======
+  version "10.1.1"
+  resolved "https://registry.npmjs.org/unified/-/unified-10.1.1.tgz"
+  integrity sha512-v4ky1+6BN9X3pQrOdkFIPWAaeDsHPE1svRDxq7YpTc2plkIqFMwukfqM+l0ewpP9EfwARlt9pPFAeWYhHm8X9w==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/unist" "^2.0.0"
     bail "^2.0.0"
@@ -6714,7 +9953,7 @@ unified@^10.0.0:
 
 unified@^8.0.0:
   version "8.4.2"
-  resolved "https://registry.yarnpkg.com/unified/-/unified-8.4.2.tgz#13ad58b4a437faa2751a4a4c6a16f680c500fff1"
+  resolved "https://registry.npmjs.org/unified/-/unified-8.4.2.tgz"
   integrity sha512-JCrmN13jI4+h9UAyKEoGcDZV+i1E7BLFuG7OsaDvTXI5P0qhHX+vZO/kOhz9jn8HGENDKbwSeB0nVOg4gVStGA==
   dependencies:
     bail "^1.0.0"
@@ -6725,7 +9964,7 @@ unified@^8.0.0:
 
 unified@^9.0.0:
   version "9.2.2"
-  resolved "https://registry.yarnpkg.com/unified/-/unified-9.2.2.tgz#67649a1abfc3ab85d2969502902775eb03146975"
+  resolved "https://registry.npmjs.org/unified/-/unified-9.2.2.tgz"
   integrity sha512-Sg7j110mtefBD+qunSLO1lqOEKdrwBFBrR6Qd8f4uwkhWNlbkaqwHse6e7QvD3AP/MNoJdEDLaf8OxYyoWgorQ==
   dependencies:
     bail "^1.0.0"
@@ -6737,115 +9976,173 @@ unified@^9.0.0:
 
 uniq@^1.0.1:
   version "1.0.1"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
   integrity sha512-Gw+zz50YNKPDKXs+9d+aKAjVwpjNwqzvNpLigIruT4HA9lMZNdMqs9x07kKHB/L9WRzqp4+DlTU5s4wG2esdoA==
+=======
+  resolved "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz"
+  integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 unist-builder@^2.0.0:
   version "2.0.3"
-  resolved "https://registry.yarnpkg.com/unist-builder/-/unist-builder-2.0.3.tgz#77648711b5d86af0942f334397a33c5e91516436"
+  resolved "https://registry.npmjs.org/unist-builder/-/unist-builder-2.0.3.tgz"
   integrity sha512-f98yt5pnlMWlzP539tPc4grGMsFaQQlP/vM396b00jngsiINumNmsY8rkXjfoi1c6QaM8nQ3vaGDuoKWbe/1Uw==
 
+<<<<<<< HEAD
+=======
+unist-builder@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/unist-builder/-/unist-builder-3.0.0.tgz"
+  integrity sha512-GFxmfEAa0vi9i5sd0R2kcrI9ks0r82NasRq5QHh2ysGngrc6GiqD5CDf1FjPenY4vApmFASBIIlk/jj5J5YbmQ==
+  dependencies:
+    "@types/unist" "^2.0.0"
+
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 unist-util-generated@^1.0.0:
   version "1.1.6"
-  resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-1.1.6.tgz#5ab51f689e2992a472beb1b35f2ce7ff2f324d4b"
+  resolved "https://registry.npmjs.org/unist-util-generated/-/unist-util-generated-1.1.6.tgz"
   integrity sha512-cln2Mm1/CZzN5ttGK7vkoGw+RZ8VcUH6BtGbq98DDtRGquAAOXig1mrBQYelOwMXYS8rK+vZDyyojSjp7JX+Lg==
 
 unist-util-generated@^2.0.0:
+<<<<<<< HEAD
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-2.0.1.tgz#e37c50af35d3ed185ac6ceacb6ca0afb28a85cae"
   integrity sha512-qF72kLmPxAw0oN2fwpWIqbXAVyEqUzDHMsbtPvOudIlUzXYFIeQIuxXQCRCFh22B7cixvU0MG7m3MW8FTq/S+A==
+=======
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/unist-util-generated/-/unist-util-generated-2.0.0.tgz"
+  integrity sha512-TiWE6DVtVe7Ye2QxOVW9kqybs6cZexNwTwSMVgkfjEReqy/xwGpAXb99OxktoWwmL+Z+Epb0Dn8/GNDYP1wnUw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 unist-util-is@^4.0.0:
   version "4.1.0"
-  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-4.1.0.tgz#976e5f462a7a5de73d94b706bac1b90671b57797"
+  resolved "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz"
   integrity sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==
 
 unist-util-is@^5.0.0:
+<<<<<<< HEAD
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-5.2.1.tgz#b74960e145c18dcb6226bc57933597f5486deae9"
   integrity sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==
   dependencies:
     "@types/unist" "^2.0.0"
+=======
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/unist-util-is/-/unist-util-is-5.1.1.tgz"
+  integrity sha512-F5CZ68eYzuSvJjGhCLPL3cYx45IxkqXSetCcRgUXtbcm50X2L9oOWQlfUfDdAf+6Pd27YDblBfdtmsThXmwpbQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 unist-util-modify-children@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/unist-util-modify-children/-/unist-util-modify-children-2.0.0.tgz#9c9c30d4e32502aabb3fde10d7872a17c86801e2"
+  resolved "https://registry.npmjs.org/unist-util-modify-children/-/unist-util-modify-children-2.0.0.tgz"
   integrity sha512-HGrj7JQo9DwZt8XFsX8UD4gGqOsIlCih9opG6Y+N11XqkBGKzHo8cvDi+MfQQgiZ7zXRUiQREYHhjOBHERTMdg==
   dependencies:
     array-iterate "^1.0.0"
 
 unist-util-position-from-estree@^1.0.0, unist-util-position-from-estree@^1.1.0:
+<<<<<<< HEAD
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/unist-util-position-from-estree/-/unist-util-position-from-estree-1.1.2.tgz#8ac2480027229de76512079e377afbcabcfcce22"
   integrity sha512-poZa0eXpS+/XpoQwGwl79UUdea4ol2ZuCYguVaJS4qzIOMDzbqz8a3erUCOmubSZkaOuGamb3tX790iwOIROww==
+=======
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/unist-util-position-from-estree/-/unist-util-position-from-estree-1.1.1.tgz"
+  integrity sha512-xtoY50b5+7IH8tFbkw64gisG9tMSpxDjhX9TmaJJae/XuxQ9R/Kc8Nv1eOsf43Gt4KV/LkriMy9mptDr7XLcaw==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/unist" "^2.0.0"
 
 unist-util-position@^3.0.0:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/unist-util-position/-/unist-util-position-3.1.0.tgz#1c42ee6301f8d52f47d14f62bbdb796571fa2d47"
+  resolved "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.1.0.tgz"
   integrity sha512-w+PkwCbYSFw8vpgWD0v7zRCl1FpY3fjDSQ3/N/wNd9Ffa4gPi8+4keqt99N3XW6F99t/mUzp2xAhNmfKWp95QA==
 
 unist-util-position@^4.0.0:
+<<<<<<< HEAD
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/unist-util-position/-/unist-util-position-4.0.4.tgz#93f6d8c7d6b373d9b825844645877c127455f037"
   integrity sha512-kUBE91efOWfIVBo8xzh/uZQ7p9ffYRtUbMRZBNFYwf0RK8koUMx6dGUfwylLOKmaT2cs4wSW96QoYUSXAyEtpg==
+=======
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/unist-util-position/-/unist-util-position-4.0.3.tgz"
+  integrity sha512-p/5EMGIa1qwbXjA+QgcBXaPWjSnZfQ2Sc3yBEEfgPwsEmJd8Qh+DSk3LGnmOM4S1bY2C0AjmMnB8RuEYxpPwXQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/unist" "^2.0.0"
 
 unist-util-remove-position@^2.0.0:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/unist-util-remove-position/-/unist-util-remove-position-2.0.1.tgz#5d19ca79fdba712301999b2b73553ca8f3b352cc"
+  resolved "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-2.0.1.tgz"
   integrity sha512-fDZsLYIe2uT+oGFnuZmy73K6ZxOPG/Qcm+w7jbEjaFcJgbQ6cqjs/eSPzXhsmGpAsWPkqZM9pYjww5QTn3LHMA==
   dependencies:
     unist-util-visit "^2.0.0"
 
 unist-util-remove-position@^4.0.0:
+<<<<<<< HEAD
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/unist-util-remove-position/-/unist-util-remove-position-4.0.2.tgz#a89be6ea72e23b1a402350832b02a91f6a9afe51"
   integrity sha512-TkBb0HABNmxzAcfLf4qsIbFbaPDvMO6wa3b3j4VcEzFVaw1LBKwnW4/sRJ/atSLSzoIg41JWEdnE7N6DIhGDGQ==
+=======
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-4.0.1.tgz"
+  integrity sha512-0yDkppiIhDlPrfHELgB+NLQD5mfjup3a8UYclHruTJWmY74je8g+CIFr79x5f6AkmzSwlvKLbs63hC0meOMowQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/unist" "^2.0.0"
     unist-util-visit "^4.0.0"
 
 unist-util-stringify-position@^2.0.0:
   version "2.0.3"
-  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz#cce3bfa1cdf85ba7375d1d5b17bdc4cada9bd9da"
+  resolved "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz"
   integrity sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==
   dependencies:
     "@types/unist" "^2.0.2"
 
 unist-util-stringify-position@^3.0.0:
+<<<<<<< HEAD
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-3.0.3.tgz#03ad3348210c2d930772d64b489580c13a7db39d"
   integrity sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==
+=======
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-3.0.0.tgz"
+  integrity sha512-SdfAl8fsDclywZpfMDTVDxA2V7LjtRDTOFd44wUJamgl6OlVngsqWjxvermMYf60elWHbxhuRCZml7AnuXCaSA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/unist" "^2.0.0"
 
 unist-util-visit-children@^1.0.0:
   version "1.1.4"
-  resolved "https://registry.yarnpkg.com/unist-util-visit-children/-/unist-util-visit-children-1.1.4.tgz#e8a087e58a33a2815f76ea1901c15dec2cb4b432"
+  resolved "https://registry.npmjs.org/unist-util-visit-children/-/unist-util-visit-children-1.1.4.tgz"
   integrity sha512-sA/nXwYRCQVRwZU2/tQWUqJ9JSFM1X3x7JIOsIgSzrFHcfVt6NkzDtKzyxg2cZWkCwGF9CO8x4QNZRJRMK8FeQ==
 
 unist-util-visit-parents@^3.0.0:
   version "3.1.1"
-  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz#65a6ce698f78a6b0f56aa0e88f13801886cdaef6"
+  resolved "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz"
   integrity sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==
   dependencies:
     "@types/unist" "^2.0.0"
     unist-util-is "^4.0.0"
 
+<<<<<<< HEAD
 unist-util-visit-parents@^5.0.0, unist-util-visit-parents@^5.1.1:
   version "5.1.3"
   resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz#b4520811b0ca34285633785045df7a8d6776cfeb"
   integrity sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==
+=======
+unist-util-visit-parents@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-5.1.0.tgz"
+  integrity sha512-y+QVLcY5eR/YVpqDsLf/xh9R3Q2Y4HxkZTp7ViLDU6WtJCEcPmRzW1gpdWDCDIqIlhuPDXOgttqPlykrHYDekg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/unist" "^2.0.0"
     unist-util-is "^5.0.0"
 
 unist-util-visit@^2.0.0, unist-util-visit@^2.0.3:
   version "2.0.3"
-  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-2.0.3.tgz#c3703893146df47203bb8a9795af47d7b971208c"
+  resolved "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz"
   integrity sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==
   dependencies:
     "@types/unist" "^2.0.0"
@@ -6853,6 +10150,7 @@ unist-util-visit@^2.0.0, unist-util-visit@^2.0.3:
     unist-util-visit-parents "^3.0.0"
 
 unist-util-visit@^4.0.0:
+<<<<<<< HEAD
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-4.1.2.tgz#125a42d1eb876283715a3cb5cceaa531828c72e2"
   integrity sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==
@@ -6865,40 +10163,86 @@ universalify@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.1.tgz#168efc2180964e6386d061e094df61afe239b18d"
   integrity sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==
+=======
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-4.1.0.tgz"
+  integrity sha512-n7lyhFKJfVZ9MnKtqbsqkQEk5P1KShj0+//V7mAcoI6bpbUjh3C/OG8HVD+pBihfh6Ovl01m8dkcv9HNqYajmQ==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^5.0.0"
+    unist-util-visit-parents "^5.0.0"
+
+universalify@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz"
+  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
+
+universalify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz"
+  integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+  resolved "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz"
   integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
 
+<<<<<<< HEAD
 update-browserslist-db@^1.0.13:
   version "1.0.13"
   resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz#3c5e4f5c083661bd38ef64b6328c26ed6c8248c4"
   integrity sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==
+=======
+update-browserslist-db@^1.0.5:
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.7.tgz"
+  integrity sha512-iN/XYesmZ2RmmWAiI4Z5rq0YqSiv0brj9Ce9CfhNE4xIW2h+MFxcgkxIzZ+ShkFPUkjU3gQ+3oypadD3RAMtrg==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     escalade "^3.1.1"
     picocolors "^1.0.0"
 
 uri-js@^4.2.2:
   version "4.4.1"
-  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
+  resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz"
   integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
   dependencies:
     punycode "^2.1.0"
 
+use-callback-ref@^1.3.0:
+  version "1.3.2"
+  resolved "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz"
+  integrity sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==
+  dependencies:
+    tslib "^2.0.0"
+
+use-sidecar@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz"
+  integrity sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==
+  dependencies:
+    detect-node-es "^1.1.0"
+    tslib "^2.0.0"
+
 util-deprecate@^1.0.2:
   version "1.0.2"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
+=======
+  resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
+  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 utils-merge@1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
+  resolved "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz"
   integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
 uvu@^0.5.0:
   version "0.5.6"
-  resolved "https://registry.yarnpkg.com/uvu/-/uvu-0.5.6.tgz#2754ca20bcb0bb59b64e9985e84d2e81058502df"
+  resolved "https://registry.npmjs.org/uvu/-/uvu-0.5.6.tgz"
   integrity sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==
   dependencies:
     dequal "^2.0.0"
@@ -6907,13 +10251,19 @@ uvu@^0.5.0:
     sade "^1.7.3"
 
 v8-compile-cache@^2.0.3:
+<<<<<<< HEAD
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.4.0.tgz#cdada8bec61e15865f05d097c5f4fd30e94dc128"
   integrity sha512-ocyWc3bAHBB/guyqJQVI5o4BZkPhznPYUG2ea80Gond/BgNWpap8TOmLSeeQG7bnh2KMISxskdADG59j7zruhw==
+=======
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz"
+  integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 validate-npm-package-license@^3.0.1:
   version "3.0.4"
-  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
+  resolved "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz"
   integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
   dependencies:
     spdx-correct "^3.0.0"
@@ -6921,33 +10271,50 @@ validate-npm-package-license@^3.0.1:
 
 vary@~1.1.2:
   version "1.1.2"
-  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+  resolved "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
 vfile-location@^3.0.0:
   version "3.2.0"
-  resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-3.2.0.tgz#d8e41fbcbd406063669ebf6c33d56ae8721d0f3c"
+  resolved "https://registry.npmjs.org/vfile-location/-/vfile-location-3.2.0.tgz"
   integrity sha512-aLEIZKv/oxuCDZ8lkJGhuhztf/BW4M+iHdCwglA/eWc+vtuRFJj8EtgceYFX4LRjOhCAAiNHsKGssC6onJ+jbA==
 
+<<<<<<< HEAD
+=======
+vfile-location@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/vfile-location/-/vfile-location-4.0.1.tgz"
+  integrity sha512-JDxPlTbZrZCQXogGheBHjbRWjESSPEak770XwWPfw5mTc1v1nWGLB/apzZxsx8a0SJVfF8HK8ql8RD308vXRUw==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    vfile "^5.0.0"
+
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 vfile-message@^2.0.0:
   version "2.0.4"
-  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-2.0.4.tgz#5b43b88171d409eae58477d13f23dd41d52c371a"
+  resolved "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz"
   integrity sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==
   dependencies:
     "@types/unist" "^2.0.0"
     unist-util-stringify-position "^2.0.0"
 
 vfile-message@^3.0.0:
+<<<<<<< HEAD
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-3.1.4.tgz#15a50816ae7d7c2d1fa87090a7f9f96612b59dea"
   integrity sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==
+=======
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/vfile-message/-/vfile-message-3.1.0.tgz"
+  integrity sha512-4QJbBk+DkPEhBXq3f260xSaWtjE4gPKOfulzfMFF8ZNwaPZieWsg3iVlcmF04+eebzpcpeXOOFMfrYzJHVYg+g==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/unist" "^2.0.0"
     unist-util-stringify-position "^3.0.0"
 
 vfile@^4.0.0:
   version "4.2.1"
-  resolved "https://registry.yarnpkg.com/vfile/-/vfile-4.2.1.tgz#03f1dce28fc625c625bc6514350fbdb00fa9e624"
+  resolved "https://registry.npmjs.org/vfile/-/vfile-4.2.1.tgz"
   integrity sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==
   dependencies:
     "@types/unist" "^2.0.0"
@@ -6956,9 +10323,15 @@ vfile@^4.0.0:
     vfile-message "^2.0.0"
 
 vfile@^5.0.0:
+<<<<<<< HEAD
   version "5.3.7"
   resolved "https://registry.yarnpkg.com/vfile/-/vfile-5.3.7.tgz#de0677e6683e3380fafc46544cfe603118826ab7"
   integrity sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==
+=======
+  version "5.3.0"
+  resolved "https://registry.npmjs.org/vfile/-/vfile-5.3.0.tgz"
+  integrity sha512-Tj44nY/48OQvarrE4FAjUfrv7GZOYzPbl5OD65HxVKwLJKMPU7zmfV8cCgCnzKWnSfYG2f3pxu+ALqs7j22xQQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@types/unist" "^2.0.0"
     is-buffer "^2.0.0"
@@ -6966,6 +10339,7 @@ vfile@^5.0.0:
     vfile-message "^3.0.0"
 
 w3c-keyname@^2.2.4:
+<<<<<<< HEAD
   version "2.2.8"
   resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz#7b17c8c6883d4e8b86ac8aba79d39e880f8869c5"
   integrity sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==
@@ -6982,6 +10356,16 @@ webpack-bundle-analyzer@^4.5.0:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.10.1.tgz#84b7473b630a7b8c21c741f81d8fe4593208b454"
   integrity sha512-s3P7pgexgT/HTUSYgxJyn28A+99mmLq4HsJepMPzu0R8ImJc52QNqaFYW1Z2z2uIb1/J3eYgaAWVpaC+v/1aAQ==
+=======
+  version "2.2.4"
+  resolved "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.4.tgz"
+  integrity sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw==
+
+webpack-bundle-analyzer@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.5.0.tgz"
+  integrity sha512-GUMZlM3SKwS8Z+CKeIFx7CVoHn3dXFcUAjT/dcZQQmfSZGvitPfMob2ipjai7ovFFqPvTqkEZ/leL4O0YOdAYQ==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   dependencies:
     "@discoveryjs/json-ext" "0.5.7"
     acorn "^8.0.4"
@@ -6999,7 +10383,7 @@ webpack-bundle-analyzer@^4.5.0:
 
 which-boxed-primitive@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
+  resolved "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz"
   integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
   dependencies:
     is-bigint "^1.0.1"
@@ -7049,21 +10433,39 @@ which-typed-array@^1.1.14, which-typed-array@^1.1.9:
 
 which@^1.2.9:
   version "1.3.1"
-  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
+  resolved "https://registry.npmjs.org/which/-/which-1.3.1.tgz"
   integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
   dependencies:
     isexe "^2.0.0"
 
 which@^2.0.1:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  resolved "https://registry.npmjs.org/which/-/which-2.0.2.tgz"
   integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
   dependencies:
     isexe "^2.0.0"
 
+<<<<<<< HEAD
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+=======
+word-wrap@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz"
+  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
+
+wrap-ansi@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz"
+  integrity sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^7.0.0:
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
   version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
   dependencies:
     ansi-styles "^4.0.0"
@@ -7090,6 +10492,7 @@ wrap-ansi@^9.0.0:
 
 wrappy@1:
   version "1.0.2"
+<<<<<<< HEAD
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
 
@@ -7102,10 +10505,24 @@ xml@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/xml/-/xml-1.0.1.tgz#78ba72020029c5bc87b8a81a3cfcd74b4a2fc1e5"
   integrity sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw==
+=======
+  resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
+  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
+
+ws@^7.3.1:
+  version "7.5.6"
+  resolved "https://registry.npmjs.org/ws/-/ws-7.5.6.tgz"
+  integrity sha512-6GLgCqo2cy2A2rjCNFlxQS6ZljG/coZfZXclldI8FB/1G3CCI36Zd8xy2HrFVACi8tfk5XrgLQEk+P0Tnz9UcA==
+
+xml@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz"
+  integrity sha1-eLpyAgApxbyHuKgaPPzXS0ovweU=
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
 
 xtend@^4.0.0, xtend@^4.0.1:
   version "4.0.2"
-  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
+  resolved "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
 yallist@^3.0.2:
@@ -7115,7 +10532,7 @@ yallist@^3.0.2:
 
 yallist@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
 yaml@2.3.4:
@@ -7125,9 +10542,10 @@ yaml@2.3.4:
 
 yaml@^1.10.2:
   version "1.10.2"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
+  resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
+<<<<<<< HEAD
 yaml@^2.3.4:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.4.0.tgz#2376db1083d157f4b3a452995803dbcf43b08140"
@@ -7137,3 +10555,19 @@ zwitch@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-2.0.4.tgz#c827d4b0acb76fc3e685a4c6ec2902d51070e9d7"
   integrity sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==
+=======
+yaml@^2.1.1:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz"
+  integrity sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==
+
+zod@3.21.4:
+  version "3.21.4"
+  resolved "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz"
+  integrity sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==
+
+zwitch@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/zwitch/-/zwitch-2.0.2.tgz"
+  integrity sha512-JZxotl7SxAJH0j7dN4pxsTV6ZLXoLdGME+PsjkL/DaBrVryK9kTGq06GfKrwcSOqypP+fdXGoCHE36b99fWVoA==
+>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04