diff --git a/.changesets/10418.md b/.changesets/10418.md
new file mode 100644
index 000000000000..67e279473290
--- /dev/null
+++ b/.changesets/10418.md
@@ -0,0 +1,3 @@
+- fix(middleware): Handle POST requests in middleware router too (#10418) by @dac09
+
+Fixes issue with middleware router not accepted POST requests.
diff --git a/.github/actions/check_changesets/yarn.lock b/.github/actions/check_changesets/yarn.lock
index d89dca47afe7..737ac337e013 100644
--- a/.github/actions/check_changesets/yarn.lock
+++ b/.github/actions/check_changesets/yarn.lock
@@ -205,11 +205,11 @@ __metadata:
   linkType: hard
 
 "undici@npm:^5.25.4":
-  version: 5.28.3
-  resolution: "undici@npm:5.28.3"
+  version: 5.28.4
+  resolution: "undici@npm:5.28.4"
   dependencies:
     "@fastify/busboy": "npm:^2.0.0"
-  checksum: 10c0/3c559ae50ef3104b7085251445dda6f4de871553b9e290845649d2f80b06c0c9cfcdf741b0029c6b20d36c82e6a74dc815b139fa9a26757d70728074ca6d6f5c
+  checksum: 10c0/08d0f2596553aa0a54ca6e8e9c7f45aef7d042c60918564e3a142d449eda165a80196f6ef19ea2ef2e6446959e293095d8e40af1236f0d67223b06afac5ecad7
   languageName: node
   linkType: hard
 
diff --git a/.github/actions/detect-changes/detectChanges.mjs b/.github/actions/detect-changes/detectChanges.mjs
index 0176d8454c13..7f7c20ca460e 100644
--- a/.github/actions/detect-changes/detectChanges.mjs
+++ b/.github/actions/detect-changes/detectChanges.mjs
@@ -226,7 +226,7 @@ async function main() {
 
   // If there's no branch, we're not in a pull request.
   if (!branch) {
-    core.setOutput('code', false)
+    core.setOutput('code', true)
     core.setOutput('rsc', false)
     core.setOutput('ssr', false)
     return
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 53cfbc6d3cc9..2ee344962552 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -32,6 +32,7 @@
     "memfs",
     "opentelemetry",
     "pino",
+    "Pistorius",
     "redwoodjs",
     "RWJS",
     "tailwindcss",
diff --git a/packages/auth-providers/supabase/web/package.json b/packages/auth-providers/supabase/web/package.json
index be6238f9776c..d9244119c6ce 100644
--- a/packages/auth-providers/supabase/web/package.json
+++ b/packages/auth-providers/supabase/web/package.json
@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "7.24.1",
+    "@redwoodjs/auth": "workspace:*",
     "core-js": "3.36.1"
   },
   "devDependencies": {
diff --git a/packages/auth/.babelrc.js b/packages/auth/.babelrc.js
deleted file mode 100644
index 3b2c815712d9..000000000000
--- a/packages/auth/.babelrc.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = { extends: '../../babel.config.js' }
diff --git a/packages/auth/build.ts b/packages/auth/build.ts
new file mode 100644
index 000000000000..c859e8581af0
--- /dev/null
+++ b/packages/auth/build.ts
@@ -0,0 +1,36 @@
+import { renameSync, writeFileSync } from 'node:fs'
+
+import { build, defaultBuildOptions } from '@redwoodjs/framework-tools'
+
+// ESM build
+await build({
+  buildOptions: {
+    ...defaultBuildOptions,
+    tsconfig: 'tsconfig.build-esm.json',
+    format: 'esm',
+    outdir: 'dist/esm',
+    packages: 'external',
+  },
+})
+
+// CJS build
+await build({
+  buildOptions: {
+    ...defaultBuildOptions,
+    tsconfig: 'tsconfig.build.json',
+    packages: 'external',
+  },
+})
+
+// Because the package.json files has `type: module` the CJS entry file can't
+// be named `index.js` because in that case it would be treated as an ESM file.
+// By changing it to .cjs it will be treated as a CommonJS file.
+renameSync('dist/index.js', 'dist/index.cjs')
+
+// Place a package.json file with `type: commonjs` in the dist folder so that
+// all .js files are treated as CommonJS files.
+writeFileSync('dist/package.json', JSON.stringify({ type: 'commonjs' }))
+
+// Place a package.json file with `type: module` in the dist/esm folder so that
+// all .js files are treated as ES Module files.
+writeFileSync('dist/esm/package.json', JSON.stringify({ type: 'module' }))
diff --git a/packages/auth/jest.config.js b/packages/auth/jest.config.js
deleted file mode 100644
index e691bb8f6dbd..000000000000
--- a/packages/auth/jest.config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-/** @type {import('@jest/types').Config.InitialOptions} */
-module.exports = {
-  testEnvironment: 'jest-environment-jsdom',
-  testPathIgnorePatterns: ['fixtures', 'dist'],
-}
diff --git a/packages/auth/modules.d.ts b/packages/auth/modules.d.ts
new file mode 100644
index 000000000000..574a2b1aa368
--- /dev/null
+++ b/packages/auth/modules.d.ts
@@ -0,0 +1 @@
+declare module 'whatwg-fetch'
diff --git a/packages/auth/package.json b/packages/auth/package.json
index dd8ba5b1fd61..b60ee36b3145 100644
--- a/packages/auth/package.json
+++ b/packages/auth/package.json
@@ -7,35 +7,37 @@
     "directory": "packages/auth"
   },
   "license": "MIT",
-  "main": "./dist/index.js",
+  "type": "module",
+  "exports": {
+    "types": "./dist/esm/index.d.ts",
+    "import": "./dist/esm/index.js",
+    "default": "./dist/index.cjs"
+  },
   "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "yarn build:js && yarn build:types",
-    "build:js": "babel src -d dist --extensions \".js,.jsx,.ts,.tsx\"",
+    "build": "tsx ./build.ts && yarn build:types",
     "build:pack": "yarn pack -o redwoodjs-auth.tgz",
-    "build:types": "tsc --build --verbose",
+    "build:types": "tsc --build --verbose tsconfig.build.json && tsc --build --verbose tsconfig.build-esm.json",
     "build:watch": "nodemon --watch src --ext \"js,jsx,ts,tsx\" --ignore dist --exec \"yarn build\"",
     "prepublishOnly": "NODE_ENV=production yarn build",
-    "test": "jest src",
-    "test:watch": "yarn test --watch"
+    "test": "vitest run",
+    "test:watch": "vitest watch"
   },
   "dependencies": {
-    "@babel/runtime-corejs3": "7.24.1",
     "core-js": "3.36.1",
     "react": "18.3.0-canary-a870b2d54-20240314"
   },
   "devDependencies": {
-    "@babel/cli": "7.24.1",
-    "@babel/core": "^7.22.20",
+    "@redwoodjs/framework-tools": "workspace:*",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "14.2.2",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
     "msw": "1.3.3",
-    "typescript": "5.4.3"
+    "tsx": "4.7.1",
+    "typescript": "5.4.3",
+    "vitest": "1.4.0"
   },
   "gitHead": "3905ed045508b861b495f8d5630d76c7a157d8f1"
 }
diff --git a/packages/auth/src/AuthProvider/AuthProvider.tsx b/packages/auth/src/AuthProvider/AuthProvider.tsx
index 17e40c47e69a..f88d00333183 100644
--- a/packages/auth/src/AuthProvider/AuthProvider.tsx
+++ b/packages/auth/src/AuthProvider/AuthProvider.tsx
@@ -1,22 +1,22 @@
 import type { ReactNode } from 'react'
 import React, { useContext, useEffect, useState } from 'react'
 
-import type { AuthContextInterface, CurrentUser } from '../AuthContext'
-import type { AuthImplementation } from '../AuthImplementation'
-
-import type { AuthProviderState } from './AuthProviderState'
-import { defaultAuthProviderState } from './AuthProviderState'
-import { ServerAuthContext } from './ServerAuthProvider'
-import { useCurrentUser } from './useCurrentUser'
-import { useForgotPassword } from './useForgotPassword'
-import { useHasRole } from './useHasRole'
-import { useLogIn } from './useLogIn'
-import { useLogOut } from './useLogOut'
-import { useReauthenticate } from './useReauthenticate'
-import { useResetPassword } from './useResetPassword'
-import { useSignUp } from './useSignUp'
-import { useToken } from './useToken'
-import { useValidateResetToken } from './useValidateResetToken'
+import type { AuthContextInterface, CurrentUser } from '../AuthContext.js'
+import type { AuthImplementation } from '../AuthImplementation.js'
+
+import type { AuthProviderState } from './AuthProviderState.js'
+import { defaultAuthProviderState } from './AuthProviderState.js'
+import { ServerAuthContext } from './ServerAuthProvider.js'
+import { useCurrentUser } from './useCurrentUser.js'
+import { useForgotPassword } from './useForgotPassword.js'
+import { useHasRole } from './useHasRole.js'
+import { useLogIn } from './useLogIn.js'
+import { useLogOut } from './useLogOut.js'
+import { useReauthenticate } from './useReauthenticate.js'
+import { useResetPassword } from './useResetPassword.js'
+import { useSignUp } from './useSignUp.js'
+import { useToken } from './useToken.js'
+import { useValidateResetToken } from './useValidateResetToken.js'
 
 export interface AuthProviderProps {
   children: ReactNode
diff --git a/packages/auth/src/AuthProvider/AuthProviderState.ts b/packages/auth/src/AuthProvider/AuthProviderState.ts
index f9dbe07c02ff..3bcaa6ed6035 100644
--- a/packages/auth/src/AuthProvider/AuthProviderState.ts
+++ b/packages/auth/src/AuthProvider/AuthProviderState.ts
@@ -1,4 +1,4 @@
-import type { CurrentUser } from '../AuthContext'
+import type { CurrentUser } from '../AuthContext.js'
 
 export type AuthProviderState<TUser, TClient = unknown> = {
   loading: boolean
diff --git a/packages/auth/src/AuthProvider/ServerAuthProvider.tsx b/packages/auth/src/AuthProvider/ServerAuthProvider.tsx
index b9ca2e8364a2..c90f568fab15 100644
--- a/packages/auth/src/AuthProvider/ServerAuthProvider.tsx
+++ b/packages/auth/src/AuthProvider/ServerAuthProvider.tsx
@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react'
 import React from 'react'
 
-import type { AuthProviderState } from './AuthProviderState'
-import { defaultAuthProviderState } from './AuthProviderState'
+import type { AuthProviderState } from './AuthProviderState.js'
+import { defaultAuthProviderState } from './AuthProviderState.js'
 
 export type ServerAuthState = AuthProviderState<never> & {
   cookieHeader?: string
diff --git a/packages/auth/src/AuthProvider/useCurrentUser.ts b/packages/auth/src/AuthProvider/useCurrentUser.ts
index bd385c9bc1cb..480528a9f33d 100644
--- a/packages/auth/src/AuthProvider/useCurrentUser.ts
+++ b/packages/auth/src/AuthProvider/useCurrentUser.ts
@@ -1,8 +1,8 @@
 import { useCallback } from 'react'
 
-import type { AuthImplementation } from '../AuthImplementation'
+import type { AuthImplementation } from '../AuthImplementation.js'
 
-import { useToken } from './useToken'
+import { useToken } from './useToken.js'
 
 export const useCurrentUser = (authImplementation: AuthImplementation) => {
   const getToken = useToken(authImplementation)
diff --git a/packages/auth/src/AuthProvider/useForgotPassword.ts b/packages/auth/src/AuthProvider/useForgotPassword.ts
index 7589648c735f..945e7a9c303c 100644
--- a/packages/auth/src/AuthProvider/useForgotPassword.ts
+++ b/packages/auth/src/AuthProvider/useForgotPassword.ts
@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import type { AuthImplementation } from '../AuthImplementation'
+import type { AuthImplementation } from '../AuthImplementation.js'
 
 export const useForgotPassword = <
   TUser,
diff --git a/packages/auth/src/AuthProvider/useHasRole.ts b/packages/auth/src/AuthProvider/useHasRole.ts
index fd324c40bf1c..0201baddb055 100644
--- a/packages/auth/src/AuthProvider/useHasRole.ts
+++ b/packages/auth/src/AuthProvider/useHasRole.ts
@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import type { CurrentUser } from '../AuthContext'
+import type { CurrentUser } from '../AuthContext.js'
 
 export const useHasRole = (currentUser: CurrentUser | null) => {
   /**
diff --git a/packages/auth/src/AuthProvider/useLogIn.ts b/packages/auth/src/AuthProvider/useLogIn.ts
index 1660186d3354..efbc0b763efc 100644
--- a/packages/auth/src/AuthProvider/useLogIn.ts
+++ b/packages/auth/src/AuthProvider/useLogIn.ts
@@ -1,11 +1,11 @@
 import { useCallback } from 'react'
 
-import type { AuthImplementation } from '../AuthImplementation'
+import type { AuthImplementation } from '../AuthImplementation.js'
 
-import type { AuthProviderState } from './AuthProviderState'
-import { defaultAuthProviderState } from './AuthProviderState'
-import type { useCurrentUser } from './useCurrentUser'
-import { useReauthenticate } from './useReauthenticate'
+import type { AuthProviderState } from './AuthProviderState.js'
+import { defaultAuthProviderState } from './AuthProviderState.js'
+import type { useCurrentUser } from './useCurrentUser.js'
+import { useReauthenticate } from './useReauthenticate.js'
 
 export const useLogIn = <
   TUser,
diff --git a/packages/auth/src/AuthProvider/useLogOut.ts b/packages/auth/src/AuthProvider/useLogOut.ts
index a5d0b942db23..e7306eb06676 100644
--- a/packages/auth/src/AuthProvider/useLogOut.ts
+++ b/packages/auth/src/AuthProvider/useLogOut.ts
@@ -1,8 +1,8 @@
 import { useCallback } from 'react'
 
-import type { AuthImplementation } from '../AuthImplementation'
+import type { AuthImplementation } from '../AuthImplementation.js'
 
-import type { AuthProviderState } from './AuthProviderState'
+import type { AuthProviderState } from './AuthProviderState.js'
 
 export const useLogOut = <
   TUser,
diff --git a/packages/auth/src/AuthProvider/useReauthenticate.ts b/packages/auth/src/AuthProvider/useReauthenticate.ts
index b7d202dc0844..93d2d84b1d27 100644
--- a/packages/auth/src/AuthProvider/useReauthenticate.ts
+++ b/packages/auth/src/AuthProvider/useReauthenticate.ts
@@ -1,10 +1,10 @@
 import { useCallback } from 'react'
 
-import type { AuthImplementation } from '../AuthImplementation'
+import type { AuthImplementation } from '../AuthImplementation.js'
 
-import type { AuthProviderState } from './AuthProviderState'
-import type { useCurrentUser } from './useCurrentUser'
-import { useToken } from './useToken'
+import type { AuthProviderState } from './AuthProviderState.js'
+import type { useCurrentUser } from './useCurrentUser.js'
+import { useToken } from './useToken.js'
 
 const notAuthenticatedState = {
   isAuthenticated: false,
diff --git a/packages/auth/src/AuthProvider/useResetPassword.ts b/packages/auth/src/AuthProvider/useResetPassword.ts
index 9ce8c4587f3c..162994e3294c 100644
--- a/packages/auth/src/AuthProvider/useResetPassword.ts
+++ b/packages/auth/src/AuthProvider/useResetPassword.ts
@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import type { AuthImplementation } from '../AuthImplementation'
+import type { AuthImplementation } from '../AuthImplementation.js'
 
 export const useResetPassword = <
   TUser,
diff --git a/packages/auth/src/AuthProvider/useSignUp.ts b/packages/auth/src/AuthProvider/useSignUp.ts
index 45e835d9be2e..c136ac935cb5 100644
--- a/packages/auth/src/AuthProvider/useSignUp.ts
+++ b/packages/auth/src/AuthProvider/useSignUp.ts
@@ -1,10 +1,10 @@
 import { useCallback } from 'react'
 
-import type { AuthImplementation } from '../AuthImplementation'
+import type { AuthImplementation } from '../AuthImplementation.js'
 
-import type { AuthProviderState } from './AuthProviderState'
-import type { useCurrentUser } from './useCurrentUser'
-import { useReauthenticate } from './useReauthenticate'
+import type { AuthProviderState } from './AuthProviderState.js'
+import type { useCurrentUser } from './useCurrentUser.js'
+import { useReauthenticate } from './useReauthenticate.js'
 
 export const useSignUp = <
   TUser,
diff --git a/packages/auth/src/AuthProvider/useToken.ts b/packages/auth/src/AuthProvider/useToken.ts
index 10ba69b51635..9e17e0cac997 100644
--- a/packages/auth/src/AuthProvider/useToken.ts
+++ b/packages/auth/src/AuthProvider/useToken.ts
@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import type { AuthImplementation } from '../AuthImplementation'
+import type { AuthImplementation } from '../AuthImplementation.js'
 
 export const useToken = (authImplementation: AuthImplementation) => {
   return useCallback(async () => {
diff --git a/packages/auth/src/AuthProvider/useValidateResetToken.ts b/packages/auth/src/AuthProvider/useValidateResetToken.ts
index f7ea795f3d86..eeafd5a3c9f6 100644
--- a/packages/auth/src/AuthProvider/useValidateResetToken.ts
+++ b/packages/auth/src/AuthProvider/useValidateResetToken.ts
@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import type { AuthImplementation } from '../AuthImplementation'
+import type { AuthImplementation } from '../AuthImplementation.js'
 
 export const useValidateResetToken = <
   TUser,
diff --git a/packages/auth/src/__tests__/AuthProvider.test.tsx b/packages/auth/src/__tests__/AuthProvider.test.tsx
index 52e2f7ff6db2..37292bf98586 100644
--- a/packages/auth/src/__tests__/AuthProvider.test.tsx
+++ b/packages/auth/src/__tests__/AuthProvider.test.tsx
@@ -1,21 +1,39 @@
-require('whatwg-fetch')
-
 import React, { useEffect, useState } from 'react'
 
 import {
+  act,
   render,
+  renderHook,
   screen,
   fireEvent,
   waitFor,
   configure,
 } from '@testing-library/react'
-import { renderHook, act } from '@testing-library/react'
-import '@testing-library/jest-dom/jest-globals'
 import { graphql } from 'msw'
 import { setupServer } from 'msw/node'
+import {
+  afterAll,
+  beforeAll,
+  beforeEach,
+  describe,
+  expect,
+  test,
+  vi,
+} from 'vitest'
+import {
+  fetch as fetchPolyfill,
+  Headers as HeadersPolyfill,
+  Request as RequestPolyfill,
+  Response as ResponsePolyfill,
+} from 'whatwg-fetch'
+
+globalThis.fetch = fetchPolyfill
+globalThis.Headers = HeadersPolyfill
+globalThis.Request = RequestPolyfill
+globalThis.Response = ResponsePolyfill
 
-import type { CustomTestAuthClient } from './fixtures/customTestAuth'
-import { createCustomTestAuth } from './fixtures/customTestAuth'
+import type { CustomTestAuthClient } from './fixtures/customTestAuth.js'
+import { createCustomTestAuth } from './fixtures/customTestAuth.js'
 
 configure({
   asyncUtilTimeout: 5_000,
@@ -61,7 +79,7 @@ const customTestAuth: CustomTestAuthClient = {
   signup: () => {},
   logout: () => {},
   getToken: () => 'hunter2',
-  getUserMetadata: jest.fn(() => null),
+  getUserMetadata: vi.fn(() => null),
   forgotPassword: () => {},
   resetPassword: () => true,
   validateResetToken: () => ({}),
@@ -82,7 +100,7 @@ beforeEach(() => {
     name: 'Peter Pistorius',
     email: 'nospam@example.net',
   }
-  customTestAuth.getUserMetadata = jest.fn(() => null)
+  customTestAuth.getUserMetadata = vi.fn(() => null)
 })
 
 describe('Custom auth provider', () => {
@@ -176,7 +194,7 @@ describe('Custom auth provider', () => {
     expect(mockAuthClient.getUserMetadata).toBeCalledTimes(1)
 
     // Replace "getUserMetadata" with actual data, and login!
-    mockAuthClient.getUserMetadata = jest.fn(() => {
+    mockAuthClient.getUserMetadata = vi.fn(() => {
       return {
         sub: 'abcdefg|123456',
         username: 'peterp',
@@ -204,9 +222,9 @@ describe('Custom auth provider', () => {
     await waitFor(() => screen.getByText('Log In'))
   })
 
-  /// @MARK: Breaking change!
+  /// @MARK: Technically a breaking change.
   // skipFetchCurrentUser used to be used for nHost only
-  // and isn't something we want to support anymore
+  // and isn't something we need to support anymore
 
   /**
    * This is especially helpful if you want to update the currentUser state.
@@ -225,7 +243,7 @@ describe('Custom auth provider', () => {
     expect(mockAuthClient.getUserMetadata).toBeCalledTimes(1)
 
     // Replace "getUserMetadata" with actual data, and login!
-    mockAuthClient.getUserMetadata = jest.fn(() => {
+    mockAuthClient.getUserMetadata = vi.fn(() => {
       return {
         sub: 'abcdefg|123456',
         username: 'peterp',
@@ -262,7 +280,7 @@ describe('Custom auth provider', () => {
     )
 
     const mockAuthClient = customTestAuth
-    mockAuthClient.getUserMetadata = jest.fn(() => {
+    mockAuthClient.getUserMetadata = vi.fn(() => {
       return {
         sub: 'abcdefg|123456',
         username: 'peterp',
@@ -311,7 +329,7 @@ describe('Custom auth provider', () => {
     expect(screen.queryByText('Has Super User:')).not.toBeInTheDocument()
 
     // Replace "getUserMetadata" with actual data, and login!
-    mockAuthClient.getUserMetadata = jest.fn(() => {
+    mockAuthClient.getUserMetadata = vi.fn(() => {
       return {
         sub: 'abcdefg|123456',
         username: 'peterp',
@@ -358,7 +376,7 @@ describe('Custom auth provider', () => {
     expect(screen.queryByText('Has Super User:')).not.toBeInTheDocument()
 
     // Replace "getUserMetadata" with actual data, and login!
-    mockAuthClient.getUserMetadata = jest.fn(() => {
+    mockAuthClient.getUserMetadata = vi.fn(() => {
       return {
         sub: 'abcdefg|123456',
         username: 'peterp',
@@ -405,7 +423,7 @@ describe('Custom auth provider', () => {
     expect(screen.queryByText('Has Super User:')).not.toBeInTheDocument()
 
     // Replace "getUserMetadata" with actual data, and login!
-    mockAuthClient.getUserMetadata = jest.fn(() => {
+    mockAuthClient.getUserMetadata = vi.fn(() => {
       return {
         sub: 'abcdefg|123456',
         username: 'peterp',
@@ -452,7 +470,7 @@ describe('Custom auth provider', () => {
     expect(screen.queryByText('Has Super User:')).not.toBeInTheDocument()
 
     // Replace "getUserMetadata" with actual data, and login!
-    mockAuthClient.getUserMetadata = jest.fn(() => {
+    mockAuthClient.getUserMetadata = vi.fn(() => {
       return {
         sub: 'abcdefg|123456',
         username: 'peterp',
@@ -498,7 +516,7 @@ describe('Custom auth provider', () => {
     expect(screen.queryByText('Has Super User:')).not.toBeInTheDocument()
 
     // Replace "getUserMetadata" with actual data, and login!
-    mockAuthClient.getUserMetadata = jest.fn(() => {
+    mockAuthClient.getUserMetadata = vi.fn(() => {
       return {
         sub: 'abcdefg|123456',
         username: 'peterp',
@@ -541,7 +559,7 @@ describe('Custom auth provider', () => {
     expect(screen.queryByText('Has Super User:')).not.toBeInTheDocument()
 
     // Replace "getUserMetadata" with actual data, and login!
-    mockAuthClient.getUserMetadata = jest.fn(() => {
+    mockAuthClient.getUserMetadata = vi.fn(() => {
       return {
         sub: 'abcdefg|123456',
         username: 'peterp',
@@ -588,7 +606,7 @@ describe('Custom auth provider', () => {
     expect(screen.queryByText('Has Super User:')).not.toBeInTheDocument()
 
     // Replace "getUserMetadata" with actual data, and login!
-    mockAuthClient.getUserMetadata = jest.fn(() => {
+    mockAuthClient.getUserMetadata = vi.fn(() => {
       return {
         sub: 'abcdefg|123456',
         username: 'peterp',
@@ -634,7 +652,7 @@ describe('Custom auth provider', () => {
     expect(screen.queryByText('Has Super User:')).not.toBeInTheDocument()
 
     // Replace "getUserMetadata" with actual data, and login!
-    mockAuthClient.getUserMetadata = jest.fn(() => {
+    mockAuthClient.getUserMetadata = vi.fn(() => {
       return {
         sub: 'abcdefg|123456',
         username: 'peterp',
@@ -655,7 +673,7 @@ describe('Custom auth provider', () => {
   })
 
   test('proxies forgotPassword() calls to client', async () => {
-    const mockedForgotPassword = jest.spyOn(customTestAuth, 'forgotPassword')
+    const mockedForgotPassword = vi.spyOn(customTestAuth, 'forgotPassword')
     mockedForgotPassword.mockImplementation((username: string) => {
       expect(username).toEqual('username')
     })
@@ -718,7 +736,7 @@ describe('Custom auth provider', () => {
   })
 
   test("getToken doesn't fail if client throws an error", async () => {
-    customTestAuth.getToken = jest.fn(() => {
+    customTestAuth.getToken = vi.fn(() => {
       throw 'Login Required'
     })
 
diff --git a/packages/auth/src/__tests__/fixtures/customTestAuth.ts b/packages/auth/src/__tests__/fixtures/customTestAuth.ts
index 6536c4eee079..9592f6d5465e 100644
--- a/packages/auth/src/__tests__/fixtures/customTestAuth.ts
+++ b/packages/auth/src/__tests__/fixtures/customTestAuth.ts
@@ -1,4 +1,4 @@
-import { CurrentUser, createAuthentication } from '../../index'
+import { CurrentUser, createAuthentication } from '../../index.js'
 
 interface User {
   sub: string
diff --git a/packages/auth/src/authFactory.ts b/packages/auth/src/authFactory.ts
index 33c00aa5732d..ec909c729108 100644
--- a/packages/auth/src/authFactory.ts
+++ b/packages/auth/src/authFactory.ts
@@ -1,8 +1,8 @@
-import type { CurrentUser } from './AuthContext'
-import { createAuthContext } from './AuthContext'
-import type { AuthImplementation } from './AuthImplementation'
-import { createAuthProvider } from './AuthProvider/AuthProvider'
-import { createUseAuth } from './useAuth'
+import type { CurrentUser } from './AuthContext.js'
+import { createAuthContext } from './AuthContext.js'
+import type { AuthImplementation } from './AuthImplementation.js'
+import { createAuthProvider } from './AuthProvider/AuthProvider.js'
+import { createUseAuth } from './useAuth.js'
 
 export function createAuthentication<
   TUser,
diff --git a/packages/auth/src/index.ts b/packages/auth/src/index.ts
index 14a8cc83fbba..3f0f49c51925 100644
--- a/packages/auth/src/index.ts
+++ b/packages/auth/src/index.ts
@@ -1,7 +1,8 @@
-export { AuthContextInterface, CurrentUser } from './AuthContext'
-export { useNoAuth, UseAuth } from './useAuth'
-export { createAuthentication } from './authFactory'
-export type { AuthImplementation } from './AuthImplementation'
+export type { AuthContextInterface, CurrentUser } from './AuthContext.js'
+export { useNoAuth } from './useAuth.js'
+export type { UseAuth } from './useAuth.js'
+export { createAuthentication } from './authFactory.js'
+export type { AuthImplementation } from './AuthImplementation.js'
 
-export * from './AuthProvider/AuthProviderState'
-export * from './AuthProvider/ServerAuthProvider'
+export * from './AuthProvider/AuthProviderState.js'
+export * from './AuthProvider/ServerAuthProvider.js'
diff --git a/packages/auth/src/useAuth.ts b/packages/auth/src/useAuth.ts
index 301aa66877b8..80b74f92bdc7 100644
--- a/packages/auth/src/useAuth.ts
+++ b/packages/auth/src/useAuth.ts
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import type { AuthContextInterface } from './AuthContext'
+import type { AuthContextInterface } from './AuthContext.js'
 
 export function createUseAuth<
   TUser,
diff --git a/packages/auth/tsconfig.build-esm.json b/packages/auth/tsconfig.build-esm.json
new file mode 100644
index 000000000000..de5a45368b9e
--- /dev/null
+++ b/packages/auth/tsconfig.build-esm.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.compilerOption.json",
+  "compilerOptions": {
+    "isolatedModules": true,
+    "moduleResolution": "NodeNext",
+    "module": "NodeNext",
+    "rootDir": "src",
+    "outDir": "dist/esm",
+  },
+  "include": ["src", "ambient.d.ts"],
+  "references": [
+    { "path": "../framework-tools" }
+  ]
+}
diff --git a/packages/auth/tsconfig.build.json b/packages/auth/tsconfig.build.json
new file mode 100644
index 000000000000..6cb547bce6f0
--- /dev/null
+++ b/packages/auth/tsconfig.build.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.compilerOption.json",
+  "compilerOptions": {
+    "isolatedModules": true,
+    "moduleResolution": "NodeNext",
+    "module": "NodeNext",
+    "rootDir": "src",
+    "outDir": "dist",
+  },
+  "include": ["src", "ambient.d.ts"],
+  "references": [
+    { "path": "../framework-tools" }
+  ]
+}
diff --git a/packages/auth/tsconfig.json b/packages/auth/tsconfig.json
index 35c7dc051767..d435973639c6 100644
--- a/packages/auth/tsconfig.json
+++ b/packages/auth/tsconfig.json
@@ -1,8 +1,20 @@
 {
   "extends": "../../tsconfig.compilerOption.json",
   "compilerOptions": {
-    "rootDir": "src",
-    "outDir": "dist",
+    "isolatedModules": true,
+    "moduleResolution": "NodeNext",
+    "module": "NodeNext",
+    "outDir": "dist"
   },
-  "include": ["src", "ambient.d.ts"]
+  "include": [
+    "src",
+    "ambient.d.ts",
+    "modules.d.ts",
+    "./vitest.setup.ts",
+    "__tests__"
+  ],
+  "exclude": ["dist", "node_modules", "**/__mocks__", "**/__fixtures__"],
+  "references": [
+    { "path": "../framework-tools" }
+  ]
 }
diff --git a/packages/auth/vitest.config.ts b/packages/auth/vitest.config.ts
new file mode 100644
index 000000000000..a832fed4d8b8
--- /dev/null
+++ b/packages/auth/vitest.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig, configDefaults } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    exclude: [...configDefaults.exclude, '**/fixtures'],
+    environment: 'jsdom',
+    setupFiles: ['vitest.setup.ts'],
+  },
+})
diff --git a/packages/auth/vitest.setup.ts b/packages/auth/vitest.setup.ts
new file mode 100644
index 000000000000..5b6e47c1e415
--- /dev/null
+++ b/packages/auth/vitest.setup.ts
@@ -0,0 +1,11 @@
+import { cleanup } from '@testing-library/react'
+import { afterEach } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+
+afterEach(() => {
+  // If vitest globals are enabled testing-library will clean up after each
+  // test automatically, but we don't enable globals, so we have to manually
+  // clean up here
+  // https://testing-library.com/docs/react-testing-library/api/#cleanup
+  cleanup()
+})
diff --git a/packages/forms/src/CheckboxField.tsx b/packages/forms/src/CheckboxField.tsx
new file mode 100644
index 000000000000..b987e281dbaf
--- /dev/null
+++ b/packages/forms/src/CheckboxField.tsx
@@ -0,0 +1,63 @@
+import type { ForwardedRef } from 'react'
+import React, { forwardRef } from 'react'
+
+import type { FieldProps } from './FieldProps'
+import { useErrorStyles } from './useErrorStyles'
+import { useRegister } from './useRegister'
+
+export interface CheckboxFieldProps
+  extends Omit<FieldProps<HTMLInputElement>, 'type' | 'emptyAs'>,
+    Omit<React.ComponentPropsWithRef<'input'>, 'name' | 'type'> {}
+
+/** Renders an `<input type="checkbox">` field */
+export const CheckboxField = forwardRef(
+  (
+    {
+      name,
+      id,
+      // for useErrorStyles
+      errorClassName,
+      errorStyle,
+      className,
+      style,
+      // for useRegister
+      validation,
+      onBlur,
+      onChange,
+      ...rest
+    }: CheckboxFieldProps,
+    ref: ForwardedRef<HTMLInputElement>,
+  ) => {
+    const styles = useErrorStyles({
+      name,
+      errorClassName,
+      errorStyle,
+      className,
+      style,
+    })
+
+    const type = 'checkbox'
+
+    const useRegisterReturn = useRegister(
+      {
+        name,
+        validation,
+        onBlur,
+        onChange,
+        type,
+      },
+      ref,
+    )
+
+    return (
+      <input
+        id={id || name}
+        {...rest}
+        /** This order ensures type="checkbox" */
+        type={type}
+        {...styles}
+        {...useRegisterReturn}
+      />
+    )
+  },
+)
diff --git a/packages/forms/src/FieldError.tsx b/packages/forms/src/FieldError.tsx
new file mode 100644
index 000000000000..43492f824f39
--- /dev/null
+++ b/packages/forms/src/FieldError.tsx
@@ -0,0 +1,72 @@
+import React from 'react'
+
+import { get, useFormContext } from 'react-hook-form'
+
+export interface FieldErrorProps
+  extends React.ComponentPropsWithoutRef<'span'> {
+  /**
+   * The name of the field the `<FieldError>`'s associated with.
+   */
+  name: string
+}
+
+const DEFAULT_MESSAGES = {
+  required: 'is required',
+  pattern: 'is not formatted correctly',
+  minLength: 'is too short',
+  maxLength: 'is too long',
+  min: 'is too low',
+  max: 'is too high',
+  validate: 'is not valid',
+}
+
+/**
+ * Renders a `<span>` with an error message if there's a validation error on the corresponding field.
+ * If no error message is provided, a default one is used based on the type of validation that caused the error.
+ *
+ * @example Displaying a validation error message with `<FieldError>`
+ *
+ * `<FieldError>` doesn't render (i.e. returns `null`) when there's no error on `<TextField>`.
+ *
+ * ```jsx
+ * <Label name="name" errorClassName="error">
+ *   Name
+ * </Label>
+ * <TextField
+ *   name="name"
+ *   validation={{ required: true }}
+ *   errorClassName="error"
+ * />
+ * <FieldError name="name" className="error" />
+ * ```
+ *
+ * @see {@link https://redwoodjs.com/docs/tutorial/chapter3/forms#fielderror}
+ *
+ * @privateRemarks
+ *
+ * This is basically a helper for a common pattern you see in `react-hook-form`:
+ *
+ * ```jsx
+ * <form onSubmit={handleSubmit(onSubmit)}>
+ *   <input {...register("firstName", { required: true })} />
+ *   {errors.firstName?.type === 'required' && "First name is required"}
+ * ```
+ *
+ * @see {@link https://react-hook-form.com/get-started#Handleerrors}
+ */
+export const FieldError = ({ name, ...rest }: FieldErrorProps) => {
+  const {
+    formState: { errors },
+  } = useFormContext()
+
+  const validationError = get(errors, name)
+
+  const errorMessage =
+    validationError &&
+    (validationError.message ||
+      `${name} ${
+        DEFAULT_MESSAGES[validationError.type as keyof typeof DEFAULT_MESSAGES]
+      }`)
+
+  return validationError ? <span {...rest}>{errorMessage}</span> : null
+}
diff --git a/packages/forms/src/FieldProps.ts b/packages/forms/src/FieldProps.ts
new file mode 100644
index 000000000000..38171b593a34
--- /dev/null
+++ b/packages/forms/src/FieldProps.ts
@@ -0,0 +1,31 @@
+import type { EmptyAsValue, RedwoodRegisterOptions } from './coercion'
+
+/**
+ * The main interface, just to have some sort of source of truth.
+ *
+ * @typeParam E - The type of element; we're only ever working with a few HTMLElements.
+ *
+ * `extends` constrains the generic while `=` provides a default.
+ *
+ * @see {@link https://www.typescriptlang.org/docs/handbook/2/generics.html#generic-constraints}
+ *
+ * @internal
+ */
+export interface FieldProps<
+  Element extends
+    | HTMLTextAreaElement
+    | HTMLSelectElement
+    | HTMLInputElement = HTMLInputElement,
+> {
+  name: string
+  id?: string
+  emptyAs?: EmptyAsValue
+  errorClassName?: string
+  errorStyle?: React.CSSProperties
+  className?: string
+  style?: React.CSSProperties
+  validation?: RedwoodRegisterOptions
+  type?: string
+  onBlur?: React.FocusEventHandler<Element>
+  onChange?: React.ChangeEventHandler<Element>
+}
diff --git a/packages/forms/src/Form.tsx b/packages/forms/src/Form.tsx
new file mode 100644
index 000000000000..dff2fc3c801a
--- /dev/null
+++ b/packages/forms/src/Form.tsx
@@ -0,0 +1,96 @@
+import React, { forwardRef } from 'react'
+import type { ForwardedRef } from 'react'
+
+import { useForm, FormProvider } from 'react-hook-form'
+import type { FieldValues, UseFormReturn, UseFormProps } from 'react-hook-form'
+
+import { ServerErrorsContext } from './ServerErrorsContext'
+
+export interface FormProps<TFieldValues extends FieldValues>
+  extends Omit<React.ComponentPropsWithRef<'form'>, 'onSubmit'> {
+  error?: any
+  /**
+   * The methods returned by `useForm`.
+   * This prop is only necessary if you've called `useForm` yourself to get
+   * access to one of its functions, like `reset`.
+   *
+   * @example
+   *
+   * ```typescript
+   * const formMethods = useForm<FormData>()
+   *
+   * const onSubmit = (data: FormData) => {
+   *  sendDataToServer(data)
+   *  formMethods.reset()
+   * }
+   *
+   * return (
+   *   <Form formMethods={formMethods} onSubmit={onSubmit}>
+   * )
+   * ```
+   */
+  formMethods?: UseFormReturn<TFieldValues>
+  /**
+   * Configures how React Hook Form performs validation, among other things.
+   *
+   * @example
+   *
+   * ```jsx
+   * <Form config={{ mode: 'onBlur' }}>
+   * ```
+   *
+   * @see {@link https://react-hook-form.com/api/useform}
+   */
+  config?: UseFormProps<TFieldValues>
+  onSubmit?: (value: TFieldValues, event?: React.BaseSyntheticEvent) => void
+}
+
+/**
+ * Renders a `<form>` with the required context.
+ */
+function FormInner<TFieldValues extends FieldValues>(
+  {
+    config,
+    error: errorProps,
+    formMethods: propFormMethods,
+    onSubmit,
+    children,
+    ...rest
+  }: FormProps<TFieldValues>,
+  ref: ForwardedRef<HTMLFormElement>,
+) {
+  const hookFormMethods = useForm<TFieldValues>(config)
+  const formMethods = propFormMethods || hookFormMethods
+
+  return (
+    <form
+      ref={ref}
+      {...rest}
+      onSubmit={formMethods.handleSubmit((data, event) =>
+        onSubmit?.(data, event),
+      )}
+    >
+      <ServerErrorsContext.Provider
+        value={
+          errorProps?.graphQLErrors?.[0]?.extensions?.properties?.messages || {}
+        }
+      >
+        <FormProvider {...formMethods}>{children}</FormProvider>
+      </ServerErrorsContext.Provider>
+    </form>
+  )
+}
+
+// Sorry about the `as` type assertion (type cast) here. Normally I'd redeclare
+// forwardRef to only return a plain function, allowing us to use TypeScript's
+// Higher-order Function Type Inference. But that gives us problems with the
+// ForwardRefExoticComponent type we use for our InputComponents. So instead
+// of changing that type (because it's correct) I use a type assertion here.
+// forwardRef is notoriously difficult to use with UI component libs.
+// Chakra-UI also says:
+// > To be honest, the forwardRef type is quite complex [...] I'd recommend
+// > that you cast the type
+// https://github.com/chakra-ui/chakra-ui/issues/4528#issuecomment-902566185
+export const Form = forwardRef(FormInner) as <TFieldValues extends FieldValues>(
+  props: FormProps<TFieldValues> & React.RefAttributes<HTMLFormElement>,
+) => React.ReactElement | null
diff --git a/packages/forms/src/InputComponents.tsx b/packages/forms/src/InputComponents.tsx
new file mode 100644
index 000000000000..6d1efd289dc9
--- /dev/null
+++ b/packages/forms/src/InputComponents.tsx
@@ -0,0 +1,160 @@
+import type { ForwardedRef } from 'react'
+import React, { forwardRef } from 'react'
+
+import pascalcase from 'pascalcase'
+
+import type { FieldProps } from './FieldProps'
+import { useErrorStyles } from './useErrorStyles'
+import { useRegister } from './useRegister'
+
+/**
+ * All the types we'll be generating named `<InputFields>` for (which is basically all of them).
+ * Note that `'checkbox'` isn't here because we handle it separately above.
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types}
+ */
+const INPUT_TYPES = [
+  'button',
+  'color',
+  'date',
+  'datetime-local',
+  'email',
+  'file',
+  'hidden',
+  'image',
+  'month',
+  'number',
+  'password',
+  'radio',
+  'range',
+  'reset',
+  'search',
+  'submit',
+  'tel',
+  'text',
+  'time',
+  'url',
+  'week',
+] as const
+
+type InputType = (typeof INPUT_TYPES)[number]
+
+export interface InputFieldProps
+  extends Omit<FieldProps<HTMLInputElement>, 'type'>,
+    Omit<React.ComponentPropsWithRef<'input'>, 'name' | 'type'> {
+  /**
+   * @privateRemarks
+   *
+   * With this typing, passing `'checkbox'` to `<InputField>`'s type is an error, which,
+   * at face value, feels like it shouldn't be.
+   *
+   * Even though we provide a separate `<CheckboxField>`, maybe we should reconsider the typing here?
+   */
+  type?: InputType
+}
+
+/**
+ * Renders an `<input>` field.
+ *
+ * @see {@link https://redwoodjs.com/docs/form#inputfields}
+ */
+export const InputField = forwardRef(
+  (
+    {
+      name,
+      id,
+      emptyAs,
+      // for useErrorStyles
+      errorClassName,
+      errorStyle,
+      className,
+      style,
+      // for useRegister
+      validation,
+      onBlur,
+      onChange,
+      type,
+      ...rest
+    }: InputFieldProps,
+    ref: ForwardedRef<HTMLInputElement>,
+  ) => {
+    const styles = useErrorStyles({
+      name,
+      errorClassName,
+      errorStyle,
+      className,
+      style,
+    })
+
+    const useRegisterReturn = useRegister(
+      {
+        name,
+        validation,
+        onBlur,
+        onChange,
+        type,
+      },
+      ref,
+      emptyAs,
+    )
+
+    return (
+      <input
+        id={id || name}
+        {...rest}
+        type={type}
+        {...styles}
+        {...useRegisterReturn}
+      />
+    )
+  },
+)
+
+/**
+ * `React.ForwardRefExoticComponent` is `forwardRef`'s return type.
+ * You can hover over `<InputField>` above to see the type inference at work.
+ */
+const InputComponents: Record<
+  string,
+  React.ForwardRefExoticComponent<Omit<InputFieldProps, 'type'>>
+> = {}
+
+/**
+ * Create a component for each type in `INPUT_TYPES`.
+ *
+ * Rather than writing out each and every component definition,
+ * we use a bit of JS metaprogramming to create them all with the appropriate name.
+ *
+ * We end up with `InputComponents.TextField`, `InputComponents.TimeField`, etc.
+ * Export those and we're good to go!
+ */
+INPUT_TYPES.forEach((type) => {
+  InputComponents[`${pascalcase(type)}Field`] = forwardRef<
+    HTMLInputElement,
+    Omit<InputFieldProps, 'type'>
+  >((props, ref) => <InputField ref={ref} type={type} {...props} />)
+})
+
+export const {
+  ButtonField,
+  ColorField,
+  DateField,
+  DatetimeLocalField,
+  EmailField,
+  FileField,
+  HiddenField,
+  ImageField,
+  MonthField,
+  NumberField,
+  PasswordField,
+  RadioField,
+  RangeField,
+  ResetField,
+  SearchField,
+  SubmitField,
+  TelField,
+  TextField,
+  TimeField,
+  UrlField,
+  WeekField,
+} = InputComponents
diff --git a/packages/forms/src/Label.tsx b/packages/forms/src/Label.tsx
new file mode 100644
index 000000000000..4eee9819495c
--- /dev/null
+++ b/packages/forms/src/Label.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+
+import type { FieldProps } from './FieldProps'
+import { useErrorStyles } from './useErrorStyles'
+
+export interface LabelProps
+  extends Pick<FieldProps, 'errorClassName' | 'errorStyle'>,
+    React.ComponentPropsWithoutRef<'label'> {
+  name: string
+}
+
+/**
+ * Renders a `<label>` that can be styled differently if errors are present on the related fields.
+ */
+export const Label = ({
+  name,
+  children,
+  // for useErrorStyles
+  errorClassName,
+  errorStyle,
+  className,
+  style,
+  ...rest
+}: LabelProps) => {
+  const styles = useErrorStyles({
+    name,
+    errorClassName,
+    errorStyle,
+    className,
+    style,
+  })
+
+  return (
+    <label htmlFor={name} {...rest} {...styles}>
+      {children || name}
+    </label>
+  )
+}
diff --git a/packages/forms/src/SelectField.tsx b/packages/forms/src/SelectField.tsx
new file mode 100644
index 000000000000..943da6d9ddad
--- /dev/null
+++ b/packages/forms/src/SelectField.tsx
@@ -0,0 +1,56 @@
+import type { ForwardedRef } from 'react'
+import React, { forwardRef } from 'react'
+
+import type { FieldProps } from './FieldProps'
+import { useErrorStyles } from './useErrorStyles'
+import { useRegister } from './useRegister'
+
+export interface SelectFieldProps
+  extends Omit<FieldProps<HTMLSelectElement>, 'type'>,
+    Omit<React.ComponentPropsWithRef<'select'>, 'name'> {}
+
+/** Renders a `<select>` field */
+export const SelectField = forwardRef(
+  (
+    {
+      name,
+      id,
+      emptyAs,
+
+      // for useErrorStyles
+      errorClassName,
+      errorStyle,
+      className,
+      style,
+      // for useRegister
+      validation,
+      onBlur,
+      onChange,
+      ...rest
+    }: SelectFieldProps,
+    ref: ForwardedRef<HTMLSelectElement>,
+  ) => {
+    const styles = useErrorStyles({
+      name,
+      errorClassName,
+      errorStyle,
+      className,
+      style,
+    })
+
+    const useRegisterReturn = useRegister(
+      {
+        name,
+        validation,
+        onBlur,
+        onChange,
+      },
+      ref,
+      emptyAs,
+    )
+
+    return (
+      <select id={id || name} {...rest} {...styles} {...useRegisterReturn} />
+    )
+  },
+)
diff --git a/packages/forms/src/ServerErrorsContext.tsx b/packages/forms/src/ServerErrorsContext.tsx
new file mode 100644
index 000000000000..55c86541a2e2
--- /dev/null
+++ b/packages/forms/src/ServerErrorsContext.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+
+/** Context for keeping track of errors from the server */
+interface ServerErrorsContextProps {
+  [key: string]: string
+}
+
+export const ServerErrorsContext = React.createContext(
+  {} as ServerErrorsContextProps,
+)
diff --git a/packages/forms/src/Submit.tsx b/packages/forms/src/Submit.tsx
new file mode 100644
index 000000000000..c41dd38bb93a
--- /dev/null
+++ b/packages/forms/src/Submit.tsx
@@ -0,0 +1,17 @@
+import React, { forwardRef } from 'react'
+
+/**
+ * Renders a `<button type="submit">` field.
+ *
+ * @example
+ * ```jsx{3}
+ * <Form onSubmit={onSubmit}>
+ *   // ...
+ *   <Submit>Save</Submit>
+ * </Form>
+ * ```
+ */
+export const Submit = forwardRef<
+  HTMLButtonElement,
+  Omit<React.ComponentPropsWithRef<'button'>, 'type'>
+>((props, ref) => <button ref={ref} type="submit" {...props} />)
diff --git a/packages/forms/src/TextAreaField.tsx b/packages/forms/src/TextAreaField.tsx
new file mode 100644
index 000000000000..13a9464df96e
--- /dev/null
+++ b/packages/forms/src/TextAreaField.tsx
@@ -0,0 +1,59 @@
+import type { ForwardedRef } from 'react'
+import React, { forwardRef } from 'react'
+
+import type { FieldProps } from './FieldProps'
+import { useErrorStyles } from './useErrorStyles'
+import { useRegister } from './useRegister'
+
+export interface TextAreaFieldProps
+  extends Omit<FieldProps<HTMLTextAreaElement>, 'type'>,
+    Omit<React.ComponentPropsWithRef<'textarea'>, 'name'> {}
+
+/**
+ * Renders a `<textarea>` field.
+ */
+export const TextAreaField = forwardRef(
+  (
+    {
+      name,
+      id,
+      emptyAs,
+
+      // for useErrorStyles
+      errorClassName,
+      errorStyle,
+      className,
+      style,
+      // for useRegister
+      validation,
+      onBlur,
+      onChange,
+
+      ...rest
+    }: TextAreaFieldProps,
+    ref: ForwardedRef<HTMLTextAreaElement>,
+  ) => {
+    const styles = useErrorStyles({
+      name,
+      errorClassName,
+      errorStyle,
+      className,
+      style,
+    })
+
+    const useRegisterReturn = useRegister(
+      {
+        name,
+        validation,
+        onBlur,
+        onChange,
+      },
+      ref,
+      emptyAs,
+    )
+
+    return (
+      <textarea id={id || name} {...rest} {...styles} {...useRegisterReturn} />
+    )
+  },
+)
diff --git a/packages/forms/src/coercion.ts b/packages/forms/src/coercion.ts
new file mode 100644
index 000000000000..d5bbffef8edb
--- /dev/null
+++ b/packages/forms/src/coercion.ts
@@ -0,0 +1,266 @@
+import type { RegisterOptions } from 'react-hook-form'
+
+/**
+ * We slightly extend `react-hook-form`'s `RegisterOptions` to make working with GraphQL easier.
+ * `react-hook-form` provides the prop `setValueAs` for all-purpose coercion
+ * (i.e. anything that isn't `valueAsDate` or `valueAsNumber`, which are standard HTML).
+ *
+ * @see {@link https://react-hook-form.com/api/useform/register}
+ */
+export type RedwoodRegisterOptions = RegisterOptions & {
+  valueAsBoolean?: boolean
+  valueAsJSON?: boolean
+}
+
+// Used to determine if a value is empty.
+const isValueEmpty = (val: string): boolean => val === ''
+
+/**
+ * EmptyAsValue defines the values that can be used for the field emptyAs prop
+ * It sets the value to be returned from the field if the field is empty.
+ * If the valueOf prop is truly undefined (not 'undefined'), it will return
+ * a default value corresponding to the type of field. (See
+ * the comments above the setCoercion function for more details)
+ */
+
+export type EmptyAsValue = null | 'undefined' | 0 | ''
+
+type ValueAsType =
+  | 'valueAsDate'
+  | 'valueAsJSON'
+  | 'valueAsNumber'
+  | 'valueAsString'
+
+type SetValueAsFn = (val: string) => any
+/*
+ * One of the functions in the SET_VALUE_AS_FUNCTIONS object is
+ * passed to the react-hook-forms setValueAs prop by the getSetValueAsFn
+ * function which is used by the setCoercion function
+ * There may be an alternate solution using closures that is less explicit, but
+ * would likely be more troublesome to debug.
+ */
+const SET_VALUE_AS_FUNCTIONS: Record<
+  ValueAsType,
+  Record<string, SetValueAsFn>
+> = {
+  // valueAsBoolean is commented out as r-h-f does not currently support
+  // setValueAs functionality for checkboxes.  May investigate future
+  // integration
+  /*  valueAsBoolean: {
+    // r-h-f returns a boolean if a checkBox type, but also handle string case in case valueAsBoolean is used
+    base: (val: boolean | string): boolean => !!val,
+    emptyAsNull: (val: boolean | string): boolean | null => (val ? true : null),
+    emptyAsUndefined: (val: boolean | string): boolean | undefined =>
+      val ? true : undefined,
+  },*/
+  valueAsDate: {
+    emptyAsNull: (val: string): Date | null =>
+      isValueEmpty(val) ? null : new Date(val),
+    emptyAsUndefined: (val: string): Date | undefined =>
+      isValueEmpty(val) ? undefined : new Date(val),
+    emptyAsString: (val: string): Date | '' =>
+      isValueEmpty(val) ? '' : new Date(val),
+    emptyAsZero: (val: string): Date | 0 =>
+      isValueEmpty(val) ? 0 : new Date(val),
+  },
+  valueAsJSON: {
+    emptyAsNull: (val: string) => {
+      if (isValueEmpty(val)) {
+        return null
+      }
+      try {
+        return JSON.parse(val)
+      } catch (e) {
+        return NaN // represents invalid JSON parse to JSONValidation function
+      }
+    },
+    emptyAsString: (val: string) => {
+      if (isValueEmpty(val)) {
+        return ''
+      }
+      try {
+        return JSON.parse(val)
+      } catch (e) {
+        return NaN // represents invalid JSON parse to JSONValidation function
+      }
+    },
+    emptyAsUndefined: (val: string) => {
+      if (isValueEmpty(val)) {
+        return undefined
+      }
+      try {
+        return JSON.parse(val)
+      } catch (e) {
+        return NaN // represents invalid JSON parse to JSONValidation function
+      }
+    },
+    emptyAsZero: (val: string) => {
+      if (isValueEmpty(val)) {
+        return 0
+      }
+      try {
+        return JSON.parse(val)
+      } catch (e) {
+        return NaN // represents invalid JSON parse to JSONValidation function
+      }
+    },
+  },
+  valueAsNumber: {
+    emptyAsNull: (val: string): number | null =>
+      isValueEmpty(val) ? null : +val,
+    emptyAsUndefined: (val: string): number | undefined =>
+      isValueEmpty(val) ? undefined : +val,
+    emptyAsNaN: (val: string): number | typeof NaN =>
+      isValueEmpty(val) ? NaN : +val,
+    emptyAsString: (val: string): number | '' =>
+      isValueEmpty(val) ? '' : +val,
+    emptyAsZero: (val: string): number => (isValueEmpty(val) ? 0 : +val),
+  },
+  valueAsString: {
+    emptyAsNull: (val: string) => (isValueEmpty(val) ? null : val),
+    emptyAsUndefined: (val: string) => (isValueEmpty(val) ? undefined : val),
+    emptyAsString: (val: string): string => (isValueEmpty(val) ? '' : val),
+    emptyAsZero: (val: string): string | number =>
+      isValueEmpty(val) ? 0 : val,
+  },
+}
+
+// Note that the emptyAs parameter takes precedence over the type, required,
+// and isId parameters
+const getSetValueAsFn = (
+  type: ValueAsType,
+  emptyAs: EmptyAsValue | undefined,
+  required: boolean,
+  isId: boolean,
+) => {
+  const typeObj = SET_VALUE_AS_FUNCTIONS[type]
+  if (typeObj === undefined) {
+    throw Error(`Type ${type} is unsupported.`)
+  }
+  let fn
+  switch (emptyAs) {
+    case null:
+      fn = typeObj['emptyAsNull']
+      break
+    case 'undefined':
+      fn = typeObj['emptyAsUndefined']
+      break
+    case 0:
+      fn = typeObj['emptyAsZero']
+      break
+    case '':
+      fn = typeObj['emptyAsString']
+      break
+    case undefined:
+    default:
+      if (required || isId) {
+        fn = typeObj.emptyAsNull
+      } else {
+        // set the default SetValueAsFn
+        switch (type) {
+          case 'valueAsNumber':
+            fn = typeObj.emptyAsNaN
+            break
+          case 'valueAsDate':
+          case 'valueAsJSON':
+            fn = typeObj.emptyAsNull
+            break
+          case 'valueAsString':
+            fn = typeObj.emptyAsString
+            break
+        }
+      }
+      break
+  }
+  if (fn === undefined) {
+    console.error(`emptyAs prop of ${emptyAs} is unsupported for this type.`)
+  }
+  return fn
+}
+
+// This function is passed into r-h-f's validate function if valueAsJSON is set
+const JSONValidation = (val: Record<string, unknown> | null | number) =>
+  typeof val === 'number' ? !isNaN(val) : true
+
+/**
+ * ** setCoercion **
+ * Handles the flow of coercion, providing a default if none is specified.
+ * Also implements Redwood's extensions to `react-hook-form`'s `valueAs` props.
+ *
+ * To provide Redwood specific functionality, we need to override part of
+ * react-hook-form`'s functionality in some cases. This is accomplished
+ * through the use of the setValueAs function supported by r-h-f.
+ * If a setValueAs function is provided by the user, it takes precedence over
+ * the emptyAs prop.
+ *
+ * Redwood provides specific logic to address field empty scenarios through
+ * the use of the emptyAs prop. The decision chain for behavior on field empty
+ * scenarios is as follows:
+ *   1. if setValueAs is specified by the user, that will determine the behavior
+ *   2  if emptyAs is specified, then the emptyAs prop will determine the
+ *      field value on an empty condition.
+ *   3. if { validation.required } is set, an empty field will return null; however,
+ *      r-h-f's validation should engage and prevent submission of the form.
+ *   4. if the field is an Id field, that is its name ends in "Id", then an empty
+ *      field will return null.
+ *   5. In the event of none of the above cases, the field value will be set as
+ *      follows for empty field scenarios:
+ *       DateFields => null
+ *       NumberFields => NaN
+ *       TextFields with valueAsNumber set => NaN
+ *       SelectFields with valueAsNumber set => NaN
+ *       SelectFields without valueAsNumber set => '' (empty string)
+ *       TextFields with valueAsJSON set => null
+ *       TextFields and comparable => '' (empty string)
+ */
+
+interface SetCoercionProps {
+  type?: string
+  name: string
+  emptyAs?: EmptyAsValue
+}
+
+export const setCoercion = (
+  validation: RedwoodRegisterOptions,
+  { type, name, emptyAs }: SetCoercionProps,
+) => {
+  if (validation.setValueAs) {
+    // Note, this case could override other props
+    return
+  }
+  let valueAs: ValueAsType
+
+  if (validation.valueAsBoolean || type === 'checkbox') {
+    // Note the react-hook-forms setValueAs prop does not work in react-hook-forms
+    // for checkboxes and thus Redwood does not provide emptyAs functionality
+    // for checkboxes for now.
+    return
+  } else if (validation.valueAsJSON) {
+    validation.validate = JSONValidation
+    delete validation.valueAsJSON
+    valueAs = 'valueAsJSON'
+  } else if (
+    type === 'date' ||
+    type === 'datetime-local' ||
+    validation.valueAsDate
+  ) {
+    valueAs = 'valueAsDate'
+  } else if (type === 'number' || validation.valueAsNumber) {
+    valueAs = 'valueAsNumber'
+    // If we are using the emptyAs feature, it does not work well
+    // with react-hook-form valueAsNumber, and thus we will rely
+    // on the setValueAs function below, which will do the same thing
+    if (validation.valueAsNumber && emptyAs !== undefined) {
+      delete validation.valueAsNumber
+    }
+  } else {
+    valueAs = 'valueAsString'
+  }
+
+  validation.setValueAs = getSetValueAsFn(
+    valueAs, // type
+    emptyAs, // emptyAs
+    validation.required !== undefined && validation.required !== false, // required
+    /Id$/.test(name || ''), // isId
+  )
+}
diff --git a/packages/forms/src/index.tsx b/packages/forms/src/index.tsx
index aa0573e601ed..1da8aafb0098 100644
--- a/packages/forms/src/index.tsx
+++ b/packages/forms/src/index.tsx
@@ -29,7 +29,7 @@
  *
  * `useRegister` hooks fields up to `react-hook-form` while providing some sensible defaults
  * based on the field's type.
- *
+
  * @privateRemarks
  *
  * We use `React.ComponentPropsWithRef` and `React.ComponentPropsWithoutRef` instead of `React.FC`
@@ -45,955 +45,16 @@
  *
  * @see {@link https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces}
  */
-import type { ForwardedRef } from 'react'
-import React, { useContext, forwardRef } from 'react'
-
-import pascalcase from 'pascalcase'
-import { get, useForm, FormProvider, useFormContext } from 'react-hook-form'
-import type {
-  FieldValues,
-  UseFormReturn,
-  UseFormProps,
-  RegisterOptions,
-} from 'react-hook-form'
-
-import FormError from './FormError'
-
-/**
- * We slightly extend `react-hook-form`'s `RegisterOptions` to make working with GraphQL easier.
- * `react-hook-form` provides the prop `setValueAs` for all-purpose coercion
- * (i.e. anything that isn't `valueAsDate` or `valueAsNumber`, which are standard HTML).
- *
- * @see {@link https://react-hook-form.com/api/useform/register}
- */
-type RedwoodRegisterOptions = RegisterOptions & {
-  valueAsBoolean?: boolean
-  valueAsJSON?: boolean
-}
-
-/**
- * The main interface, just to have some sort of source of truth.
- *
- * @typeParam E - The type of element; we're only ever working with a few HTMLElements.
- *
- * `extends` constrains the generic while `=` provides a default.
- *
- * @see {@link https://www.typescriptlang.org/docs/handbook/2/generics.html#generic-constraints}
- *
- * @internal
- */
-interface FieldProps<
-  Element extends
-    | HTMLTextAreaElement
-    | HTMLSelectElement
-    | HTMLInputElement = HTMLInputElement,
-> {
-  name: string
-  id?: string
-  emptyAs?: EmptyAsValue
-  errorClassName?: string
-  errorStyle?: React.CSSProperties
-  className?: string
-  style?: React.CSSProperties
-  validation?: RedwoodRegisterOptions
-  type?: string
-  onBlur?: React.FocusEventHandler<Element>
-  onChange?: React.ChangeEventHandler<Element>
-}
-
-export type UseErrorStylesProps = Pick<
-  FieldProps,
-  'name' | 'errorClassName' | 'errorStyle' | 'className' | 'style'
->
-
-/**
- * Adds styling to a field when an error is present.
- *
- * @remarks
- *
- * Mostly just a `useEffect` hook.
- *
- * `className` and `style` get swapped with `errorClassName` and `errorStyle` respectively
- * when an error's present (on the server or otherwise).
- */
-const useErrorStyles = ({
-  name,
-  errorClassName,
-  errorStyle,
-  className,
-  style,
-}: UseErrorStylesProps) => {
-  const {
-    formState: { errors },
-    setError,
-  } = useFormContext()
-
-  const serverError = useContext(ServerErrorsContext)[name]
-
-  React.useEffect(() => {
-    if (serverError) {
-      setError(name, { type: 'server', message: serverError })
-    }
-  }, [serverError, name, setError])
-
-  const validationError = name ? get(errors, name) : undefined
-
-  if (validationError) {
-    if (errorClassName) {
-      className = errorClassName
-    }
-
-    if (errorStyle) {
-      style = errorStyle
-    }
-  }
-
-  return { className, style }
-}
-
-// Used to determine if a value is empty.
-const isValueEmpty = (val: string): boolean => val === ''
-
-/**
- * EmptyAsValue defines the values that can be used for the field emptyAs prop
- * It sets the value to be returned from the field if the field is empty.
- * If the valueOf prop is truly undefined (not 'undefined'), it will return
- * a default value corresponding to the type of field. (See
- * the comments above the setCoercion function for more details)
- */
-
-export type EmptyAsValue = null | 'undefined' | 0 | ''
-
-type ValueAsType =
-  | 'valueAsDate'
-  | 'valueAsJSON'
-  | 'valueAsNumber'
-  | 'valueAsString'
-
-type SetValueAsFn = (val: string) => any
-/*
- * One of the functions in the SET_VALUE_AS_FUNCTIONS object is
- * passed to the react-hook-forms setValueAs prop by the getSetValueAsFn
- * function which is used by the setCoercion function
- * There may be an alternate solution using closures that is less explicit, but
- * would likely be more troublesome to debug.
- */
-const SET_VALUE_AS_FUNCTIONS: Record<
-  ValueAsType,
-  Record<string, SetValueAsFn>
-> = {
-  // valueAsBoolean is commented out as r-h-f does not currently support
-  // setValueAs functionality for checkboxes.  May investigate future
-  // integration
-  /*  valueAsBoolean: {
-    // r-h-f returns a boolean if a checkBox type, but also handle string case in case valueAsBoolean is used
-    base: (val: boolean | string): boolean => !!val,
-    emptyAsNull: (val: boolean | string): boolean | null => (val ? true : null),
-    emptyAsUndefined: (val: boolean | string): boolean | undefined =>
-      val ? true : undefined,
-  },*/
-  valueAsDate: {
-    emptyAsNull: (val: string): Date | null =>
-      isValueEmpty(val) ? null : new Date(val),
-    emptyAsUndefined: (val: string): Date | undefined =>
-      isValueEmpty(val) ? undefined : new Date(val),
-    emptyAsString: (val: string): Date | '' =>
-      isValueEmpty(val) ? '' : new Date(val),
-    emptyAsZero: (val: string): Date | 0 =>
-      isValueEmpty(val) ? 0 : new Date(val),
-  },
-  valueAsJSON: {
-    emptyAsNull: (val: string) => {
-      if (isValueEmpty(val)) {
-        return null
-      }
-      try {
-        return JSON.parse(val)
-      } catch (e) {
-        return NaN // represents invalid JSON parse to JSONValidation function
-      }
-    },
-    emptyAsString: (val: string) => {
-      if (isValueEmpty(val)) {
-        return ''
-      }
-      try {
-        return JSON.parse(val)
-      } catch (e) {
-        return NaN // represents invalid JSON parse to JSONValidation function
-      }
-    },
-    emptyAsUndefined: (val: string) => {
-      if (isValueEmpty(val)) {
-        return undefined
-      }
-      try {
-        return JSON.parse(val)
-      } catch (e) {
-        return NaN // represents invalid JSON parse to JSONValidation function
-      }
-    },
-    emptyAsZero: (val: string) => {
-      if (isValueEmpty(val)) {
-        return 0
-      }
-      try {
-        return JSON.parse(val)
-      } catch (e) {
-        return NaN // represents invalid JSON parse to JSONValidation function
-      }
-    },
-  },
-  valueAsNumber: {
-    emptyAsNull: (val: string): number | null =>
-      isValueEmpty(val) ? null : +val,
-    emptyAsUndefined: (val: string): number | undefined =>
-      isValueEmpty(val) ? undefined : +val,
-    emptyAsNaN: (val: string): number | typeof NaN =>
-      isValueEmpty(val) ? NaN : +val,
-    emptyAsString: (val: string): number | '' =>
-      isValueEmpty(val) ? '' : +val,
-    emptyAsZero: (val: string): number => (isValueEmpty(val) ? 0 : +val),
-  },
-  valueAsString: {
-    emptyAsNull: (val: string) => (isValueEmpty(val) ? null : val),
-    emptyAsUndefined: (val: string) => (isValueEmpty(val) ? undefined : val),
-    emptyAsString: (val: string): string => (isValueEmpty(val) ? '' : val),
-    emptyAsZero: (val: string): string | number =>
-      isValueEmpty(val) ? 0 : val,
-  },
-}
-
-// Note that the emptyAs parameter takes precedence over the type, required,
-// and isId parameters
-const getSetValueAsFn = (
-  type: ValueAsType,
-  emptyAs: EmptyAsValue | undefined,
-  required: boolean,
-  isId: boolean,
-) => {
-  const typeObj = SET_VALUE_AS_FUNCTIONS[type]
-  if (typeObj === undefined) {
-    throw Error(`Type ${type} is unsupported.`)
-  }
-  let fn
-  switch (emptyAs) {
-    case null:
-      fn = typeObj['emptyAsNull']
-      break
-    case 'undefined':
-      fn = typeObj['emptyAsUndefined']
-      break
-    case 0:
-      fn = typeObj['emptyAsZero']
-      break
-    case '':
-      fn = typeObj['emptyAsString']
-      break
-    case undefined:
-    default:
-      if (required || isId) {
-        fn = typeObj.emptyAsNull
-      } else {
-        // set the default SetValueAsFn
-        switch (type) {
-          case 'valueAsNumber':
-            fn = typeObj.emptyAsNaN
-            break
-          case 'valueAsDate':
-          case 'valueAsJSON':
-            fn = typeObj.emptyAsNull
-            break
-          case 'valueAsString':
-            fn = typeObj.emptyAsString
-            break
-        }
-      }
-      break
-  }
-  if (fn === undefined) {
-    console.error(`emptyAs prop of ${emptyAs} is unsupported for this type.`)
-  }
-  return fn
-}
-
-// This function is passed into r-h-f's validate function if valueAsJSON is set
-const JSONValidation = (val: Record<string, unknown> | null | number) =>
-  typeof val === 'number' ? !isNaN(val) : true
-
-/**
- * ** setCoercion **
- * Handles the flow of coercion, providing a default if none is specified.
- * Also implements Redwood's extensions to `react-hook-form`'s `valueAs` props.
- *
- * To provide Redwood specific functionality, we need to override part of
- * react-hook-form`'s functionality in some cases. This is accomplished
- * through the use of the setValueAs function supported by r-h-f.
- * If a setValueAs function is provided by the user, it takes precedence over
- * the emptyAs prop.
- *
- * Redwood provides specific logic to address field empty scenarios through
- * the use of the emptyAs prop. The decision chain for behaviour on field empty
- * scenarios is as follows:
- *   1. if setValueAs is specified by the user, that will determine the behavior
- *   2  if emptyAs is specified, then the emptyAs prop will determine the
- *      field value on an empty condition.
- *   3. if { validation.required } is set, an empty field will return null; however,
- *      r-h-f's validation should engage and prevent submission of the form.
- *   4. if the field is an Id field, that is its name ends in "Id", then an empty
- *      field will return null.
- *   5. In the event of none of the above cases, the field value will be set as
- *      follows for empty field scenarios:
- *       DateFields => null
- *       NumberFields => NaN
- *       TextFields with valueAsNumber set => NaN
- *       SelectFields with valueAsNumber set => NaN
- *       SelectFields without valueAsNumber set => '' (empty string)
- *       TextFields with valueAsJSON set => null
- *       TextFields and comparable => '' (empty string)
- */
-
-interface SetCoersionProps {
-  type?: string
-  name: string
-  emptyAs?: EmptyAsValue
-}
-
-const setCoercion = (
-  validation: RedwoodRegisterOptions,
-  { type, name, emptyAs }: SetCoersionProps,
-) => {
-  if (validation.setValueAs) {
-    // Note, this case could override other props
-    return
-  }
-  let valueAs: ValueAsType
-
-  if (validation.valueAsBoolean || type === 'checkbox') {
-    // Note the react-hook-forms setValueAs prop does not work in react-hook-forms
-    // for checkboxes and thus Redwood does not provide emptyAs functionality
-    // for checkboxes for now.
-    return
-  } else if (validation.valueAsJSON) {
-    validation.validate = JSONValidation
-    delete validation.valueAsJSON
-    valueAs = 'valueAsJSON'
-  } else if (
-    type === 'date' ||
-    type === 'datetime-local' ||
-    validation.valueAsDate
-  ) {
-    valueAs = 'valueAsDate'
-  } else if (type === 'number' || validation.valueAsNumber) {
-    valueAs = 'valueAsNumber'
-    // If we are using the emptyAs feature, it does not work well
-    // with react-hook-form valueAsNumber, and thus we will rely
-    // on the setValueAs function below, which will do the same thing
-    if (validation.valueAsNumber && emptyAs !== undefined) {
-      delete validation.valueAsNumber
-    }
-  } else {
-    valueAs = 'valueAsString'
-  }
-
-  validation.setValueAs = getSetValueAsFn(
-    valueAs, // type
-    emptyAs, // emptyAs
-    validation.required !== undefined && validation.required !== false, // required
-    /Id$/.test(name || ''), // isId
-  )
-}
-
-export type UseRegisterProps<
-  Element extends
-    | HTMLTextAreaElement
-    | HTMLSelectElement
-    | HTMLInputElement = HTMLInputElement,
-> = Pick<
-  FieldProps<Element>,
-  'name' | 'validation' | 'type' | 'onBlur' | 'onChange'
->
-
-/**
- * useRegister
- *
- * Register the field into `react-hook-form` with defaults.
- *
- * @remarks
- *
- * A field's `validation` prop is `react-hook-form`'s `RegisterOptions`
- * (with Redwood's extended `valueAs` props).
- *
- * @see {@link https://react-hook-form.com/api/useform/register}
- */
-const useRegister = <
-  T,
-  Element extends
-    | HTMLTextAreaElement
-    | HTMLSelectElement
-    | HTMLInputElement = HTMLInputElement,
->(
-  props: UseRegisterProps<Element> & { element?: string },
-  ref?: React.ForwardedRef<T>,
-  emptyAs?: EmptyAsValue,
-) => {
-  const { register } = useFormContext()
-  const { name } = props
-  if (!name) {
-    throw Error('`name` prop must be provided')
-  }
-
-  const validation = props.validation || { required: false }
-
-  setCoercion(validation, {
-    type: props.type,
-    name,
-    emptyAs,
-  })
-
-  const {
-    ref: _ref,
-    onBlur: handleBlur,
-    onChange: handleChange,
-    ...rest
-  } = register(name, validation)
-
-  const onBlur: React.FocusEventHandler<Element> = (event) => {
-    handleBlur(event)
-    props.onBlur?.(event)
-  }
-
-  const onChange: React.ChangeEventHandler<Element> = (event) => {
-    handleChange(event)
-    props.onChange?.(event)
-  }
-
-  return {
-    ...rest,
-    ref: (element: T) => {
-      _ref(element)
-
-      if (typeof ref === 'function') {
-        ref(element)
-      } else if (ref) {
-        ref.current = element
-      }
-    },
-    onBlur,
-    onChange,
-  }
-}
-
-/**
- * Context for keeping track of errors from the server.
- */
-interface ServerErrorsContextProps {
-  [key: string]: string
-}
-
-const ServerErrorsContext = React.createContext({} as ServerErrorsContextProps)
-
-export interface FormProps<TFieldValues extends FieldValues>
-  extends Omit<React.ComponentPropsWithRef<'form'>, 'onSubmit'> {
-  error?: any
-  /**
-   * The methods returned by `useForm`.
-   * This prop is only necessary if you've called `useForm` yourself to get
-   * access to one of its functions, like `reset`.
-   *
-   * @example
-   *
-   * ```typescript
-   * const formMethods = useForm<FormData>()
-   *
-   * const onSubmit = (data: FormData) => {
-   *  sendDataToServer(data)
-   *  formMethods.reset()
-   * }
-   *
-   * return (
-   *   <Form formMethods={formMethods} onSubmit={onSubmit}>
-   * )
-   * ```
-   */
-  formMethods?: UseFormReturn<TFieldValues>
-  /**
-   * Configures how React Hook Form performs validation, among other things.
-   *
-   * @example
-   *
-   * ```jsx
-   * <Form config={{ mode: 'onBlur' }}>
-   * ```
-   *
-   * @see {@link https://react-hook-form.com/api/useform}
-   */
-  config?: UseFormProps<TFieldValues>
-  onSubmit?: (value: TFieldValues, event?: React.BaseSyntheticEvent) => void
-}
-
-/**
- * Renders a `<form>` with the required context.
- */
-function FormInner<TFieldValues extends FieldValues>(
-  {
-    config,
-    error: errorProps,
-    formMethods: propFormMethods,
-    onSubmit,
-    children,
-    ...rest
-  }: FormProps<TFieldValues>,
-  ref: ForwardedRef<HTMLFormElement>,
-) {
-  const hookFormMethods = useForm<TFieldValues>(config)
-  const formMethods = propFormMethods || hookFormMethods
-
-  return (
-    <form
-      ref={ref}
-      {...rest}
-      onSubmit={formMethods.handleSubmit((data, event) =>
-        onSubmit?.(data, event),
-      )}
-    >
-      <ServerErrorsContext.Provider
-        value={
-          errorProps?.graphQLErrors?.[0]?.extensions?.properties?.messages || {}
-        }
-      >
-        <FormProvider {...formMethods}>{children}</FormProvider>
-      </ServerErrorsContext.Provider>
-    </form>
-  )
-}
-
-// Sorry about the `as` type assertion (type cast) here. Normally I'd redeclare
-// forwardRef to only return a plain function, allowing us to use TypeScript's
-// Higher-order Function Type Inference. But that gives us problems with the
-// ForwardRefExoticComponent type we use for our InputComponents. So instead
-// of changing that type (because it's correct) I use a type assertion here.
-// forwardRef is notoriously difficult to use with UI component libs.
-// Chakra-UI also says:
-// > To be honest, the forwardRef type is quite complex [...] I'd recommend
-// > that you cast the type
-// https://github.com/chakra-ui/chakra-ui/issues/4528#issuecomment-902566185
-const Form = forwardRef(FormInner) as <TFieldValues extends FieldValues>(
-  props: FormProps<TFieldValues> & React.RefAttributes<HTMLFormElement>,
-) => React.ReactElement | null
-
-export interface LabelProps
-  extends Pick<FieldProps, 'errorClassName' | 'errorStyle'>,
-    React.ComponentPropsWithoutRef<'label'> {
-  name: string
-}
-
-/**
- * Renders a `<label>` that can be styled differently if errors are present on the related fields.
- */
-const Label = ({
-  name,
-  children,
-  // for useErrorStyles
-  errorClassName,
-  errorStyle,
-  className,
-  style,
-  ...rest
-}: LabelProps) => {
-  const styles = useErrorStyles({
-    name,
-    errorClassName,
-    errorStyle,
-    className,
-    style,
-  })
-
-  return (
-    <label htmlFor={name} {...rest} {...styles}>
-      {children || name}
-    </label>
-  )
-}
-
-export interface FieldErrorProps
-  extends React.ComponentPropsWithoutRef<'span'> {
-  /**
-   * The name of the field the `<FieldError>`'s associated with.
-   */
-  name: string
-}
-
-const DEFAULT_MESSAGES = {
-  required: 'is required',
-  pattern: 'is not formatted correctly',
-  minLength: 'is too short',
-  maxLength: 'is too long',
-  min: 'is too low',
-  max: 'is too high',
-  validate: 'is not valid',
-}
-
-/**
- * Renders a `<span>` with an error message if there's a validation error on the corresponding field.
- * If no error message is provided, a default one is used based on the type of validation that caused the error.
- *
- * @example Displaying a validation error message with `<FieldError>`
- *
- * `<FieldError>` doesn't render (i.e. returns `null`) when there's no error on `<TextField>`.
- *
- * ```jsx
- * <Label name="name" errorClassName="error">
- *   Name
- * </Label>
- * <TextField
- *   name="name"
- *   validation={{ required: true }}
- *   errorClassName="error"
- * />
- * <FieldError name="name" className="error" />
- * ```
- *
- * @see {@link https://redwoodjs.com/docs/tutorial/chapter3/forms#fielderror}
- *
- * @privateRemarks
- *
- * This is basically a helper for a common pattern you see in `react-hook-form`:
- *
- * ```jsx
- * <form onSubmit={handleSubmit(onSubmit)}>
- *   <input {...register("firstName", { required: true })} />
- *   {errors.firstName?.type === 'required' && "First name is required"}
- * ```
- *
- * @see {@link https://react-hook-form.com/get-started#Handleerrors}
- */
-const FieldError = ({ name, ...rest }: FieldErrorProps) => {
-  const {
-    formState: { errors },
-  } = useFormContext()
-
-  const validationError = get(errors, name)
-
-  const errorMessage =
-    validationError &&
-    (validationError.message ||
-      `${name} ${
-        DEFAULT_MESSAGES[validationError.type as keyof typeof DEFAULT_MESSAGES]
-      }`)
-
-  return validationError ? <span {...rest}>{errorMessage}</span> : null
-}
-
-export interface TextAreaFieldProps
-  extends Omit<FieldProps<HTMLTextAreaElement>, 'type'>,
-    Omit<React.ComponentPropsWithRef<'textarea'>, 'name'> {}
-
-/**
- * Renders a `<textarea>` field.
- */
-const TextAreaField = forwardRef(
-  (
-    {
-      name,
-      id,
-      emptyAs,
-
-      // for useErrorStyles
-      errorClassName,
-      errorStyle,
-      className,
-      style,
-      // for useRegister
-      validation,
-      onBlur,
-      onChange,
-
-      ...rest
-    }: TextAreaFieldProps,
-    ref: ForwardedRef<HTMLTextAreaElement>,
-  ) => {
-    const styles = useErrorStyles({
-      name,
-      errorClassName,
-      errorStyle,
-      className,
-      style,
-    })
-
-    const useRegisterReturn = useRegister(
-      {
-        name,
-        validation,
-        onBlur,
-        onChange,
-      },
-      ref,
-      emptyAs,
-    )
-
-    return (
-      <textarea id={id || name} {...rest} {...styles} {...useRegisterReturn} />
-    )
-  },
-)
-
-export interface SelectFieldProps
-  extends Omit<FieldProps<HTMLSelectElement>, 'type'>,
-    Omit<React.ComponentPropsWithRef<'select'>, 'name'> {}
-
-/**
- * Renders a `<select>` field.
- */
-const SelectField = forwardRef(
-  (
-    {
-      name,
-      id,
-      emptyAs,
-
-      // for useErrorStyles
-      errorClassName,
-      errorStyle,
-      className,
-      style,
-      // for useRegister
-      validation,
-      onBlur,
-      onChange,
-      ...rest
-    }: SelectFieldProps,
-    ref: ForwardedRef<HTMLSelectElement>,
-  ) => {
-    const styles = useErrorStyles({
-      name,
-      errorClassName,
-      errorStyle,
-      className,
-      style,
-    })
-
-    const useRegisterReturn = useRegister(
-      {
-        name,
-        validation,
-        onBlur,
-        onChange,
-      },
-      ref,
-      emptyAs,
-    )
-
-    return (
-      <select id={id || name} {...rest} {...styles} {...useRegisterReturn} />
-    )
-  },
-)
-
-export interface CheckboxFieldProps
-  extends Omit<FieldProps<HTMLInputElement>, 'type' | 'emptyAs'>,
-    Omit<React.ComponentPropsWithRef<'input'>, 'name' | 'type'> {}
-
-/**
- * Renders an `<input type="checkbox">` field.
- */
-export const CheckboxField = forwardRef(
-  (
-    {
-      name,
-      id,
-      // for useErrorStyles
-      errorClassName,
-      errorStyle,
-      className,
-      style,
-      // for useRegister
-      validation,
-      onBlur,
-      onChange,
-      ...rest
-    }: CheckboxFieldProps,
-    ref: ForwardedRef<HTMLInputElement>,
-  ) => {
-    const styles = useErrorStyles({
-      name,
-      errorClassName,
-      errorStyle,
-      className,
-      style,
-    })
-
-    const type = 'checkbox'
-
-    const useRegisterReturn = useRegister(
-      {
-        name,
-        validation,
-        onBlur,
-        onChange,
-        type,
-      },
-      ref,
-    )
-
-    return (
-      <input
-        id={id || name}
-        {...rest}
-        /** This order ensures type="checkbox" */
-        type={type}
-        {...styles}
-        {...useRegisterReturn}
-      />
-    )
-  },
-)
-
-/**
- * Renders a `<button type="submit">` field.
- *
- * @example
- * ```jsx{3}
- * <Form onSubmit={onSubmit}>
- *   // ...
- *   <Submit>Save</Submit>
- * </Form>
- * ```
- */
-const Submit = forwardRef<
-  HTMLButtonElement,
-  Omit<React.ComponentPropsWithRef<'button'>, 'type'>
->((props, ref) => <button ref={ref} type="submit" {...props} />)
-
-/**
- * All the types we'll be generating named `<InputFields>` for (which is basically all of them).
- * Note that `'checkbox'` isn't here because we handle it separately above.
- *
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types}
- */
-const INPUT_TYPES = [
-  'button',
-  'color',
-  'date',
-  'datetime-local',
-  'email',
-  'file',
-  'hidden',
-  'image',
-  'month',
-  'number',
-  'password',
-  'radio',
-  'range',
-  'reset',
-  'search',
-  'submit',
-  'tel',
-  'text',
-  'time',
-  'url',
-  'week',
-] as const
-
-type InputType = (typeof INPUT_TYPES)[number]
-
-export interface InputFieldProps
-  extends Omit<FieldProps<HTMLInputElement>, 'type'>,
-    Omit<React.ComponentPropsWithRef<'input'>, 'name' | 'type'> {
-  /**
-   * @privateRemarks
-   *
-   * With this typing, passing `'checkbox'` to `<InputField>`'s type is an error, which,
-   * at face value, feels like it shouldn't be.
-   *
-   * Even though we provide a separate `<CheckboxField>`, maybe we should reconsider the typing here?
-   */
-  type?: InputType
-}
-
-/**
- * Renders an `<input>` field.
- *
- * @see {@link https://redwoodjs.com/docs/form#inputfields}
- */
-const InputField = forwardRef(
-  (
-    {
-      name,
-      id,
-      emptyAs,
-      // for useErrorStyles
-      errorClassName,
-      errorStyle,
-      className,
-      style,
-      // for useRegister
-      validation,
-      onBlur,
-      onChange,
-      type,
-      ...rest
-    }: InputFieldProps,
-    ref: ForwardedRef<HTMLInputElement>,
-  ) => {
-    const styles = useErrorStyles({
-      name,
-      errorClassName,
-      errorStyle,
-      className,
-      style,
-    })
-
-    const useRegisterReturn = useRegister(
-      {
-        name,
-        validation,
-        onBlur,
-        onChange,
-        type,
-      },
-      ref,
-      emptyAs,
-    )
-
-    return (
-      <input
-        id={id || name}
-        {...rest}
-        type={type}
-        {...styles}
-        {...useRegisterReturn}
-      />
-    )
-  },
-)
-
-/**
- * `React.ForwardRefExoticComponent` is `forwardRef`'s return type.
- * You can hover over `<InputField>` above to see the type inference at work.
- */
-const InputComponents: Record<
-  string,
-  React.ForwardRefExoticComponent<Omit<InputFieldProps, 'type'>>
-> = {}
 
-/**
- * Create a component for each type in `INPUT_TYPES`.
- *
- * Rather than writing out each and every component definition,
- * we use a bit of JS metaprogramming to create them all with the appropriate name.
- *
- * We end up with `InputComponents.TextField`, `InputComponents.TimeField`, etc.
- * Export those and we're good to go!
- */
-INPUT_TYPES.forEach((type) => {
-  InputComponents[`${pascalcase(type)}Field`] = forwardRef<
-    HTMLInputElement,
-    Omit<InputFieldProps, 'type'>
-  >((props, ref) => <InputField ref={ref} type={type} {...props} />)
-})
+export * from 'react-hook-form'
 
-export const {
+export { CheckboxField } from './CheckboxField'
+export { FieldError } from './FieldError'
+export { Form, FormProps } from './Form'
+export { default as FormError } from './FormError'
+export type { ServerError, RWGqlError, ServerParseError } from './FormError'
+export {
+  InputField,
   ButtonField,
   ColorField,
   DateField,
@@ -1015,22 +76,11 @@ export const {
   TimeField,
   UrlField,
   WeekField,
-} = InputComponents
-
-export {
-  Form,
-  ServerErrorsContext,
-  FormError,
-  FieldError,
-  InputField,
-  Label,
-  TextAreaField,
-  SelectField,
-  Submit,
-  useErrorStyles,
-  useRegister,
-}
-
-export type { ServerError, RWGqlError, ServerParseError } from './FormError'
-
-export * from 'react-hook-form'
+} from './InputComponents'
+export { Label } from './Label'
+export { SelectField } from './SelectField'
+export { ServerErrorsContext } from './ServerErrorsContext'
+export { Submit } from './Submit'
+export { TextAreaField } from './TextAreaField'
+export { useErrorStyles } from './useErrorStyles'
+export { useRegister } from './useRegister'
diff --git a/packages/forms/src/useErrorStyles.ts b/packages/forms/src/useErrorStyles.ts
new file mode 100644
index 000000000000..5eead87074a5
--- /dev/null
+++ b/packages/forms/src/useErrorStyles.ts
@@ -0,0 +1,56 @@
+import React, { useContext } from 'react'
+
+import { get, useFormContext } from 'react-hook-form'
+
+import type { FieldProps } from './FieldProps'
+import { ServerErrorsContext } from './ServerErrorsContext'
+
+export type UseErrorStylesProps = Pick<
+  FieldProps,
+  'name' | 'errorClassName' | 'errorStyle' | 'className' | 'style'
+>
+
+/**
+ * Adds styling to a field when an error is present.
+ *
+ * @remarks
+ *
+ * Mostly just a `useEffect` hook.
+ *
+ * `className` and `style` get swapped with `errorClassName` and `errorStyle` respectively
+ * when an error's present (on the server or otherwise).
+ */
+export const useErrorStyles = ({
+  name,
+  errorClassName,
+  errorStyle,
+  className,
+  style,
+}: UseErrorStylesProps) => {
+  const {
+    formState: { errors },
+    setError,
+  } = useFormContext()
+
+  const serverError = useContext(ServerErrorsContext)[name]
+
+  React.useEffect(() => {
+    if (serverError) {
+      setError(name, { type: 'server', message: serverError })
+    }
+  }, [serverError, name, setError])
+
+  const validationError = name ? get(errors, name) : undefined
+
+  if (validationError) {
+    if (errorClassName) {
+      className = errorClassName
+    }
+
+    if (errorStyle) {
+      style = errorStyle
+    }
+  }
+
+  return { className, style }
+}
diff --git a/packages/forms/src/useRegister.ts b/packages/forms/src/useRegister.ts
new file mode 100644
index 000000000000..c2c740d79278
--- /dev/null
+++ b/packages/forms/src/useRegister.ts
@@ -0,0 +1,87 @@
+import type React from 'react'
+
+import { useFormContext } from 'react-hook-form'
+
+import type { EmptyAsValue } from './coercion'
+import { setCoercion } from './coercion'
+import type { FieldProps } from './FieldProps'
+
+export type UseRegisterProps<
+  Element extends
+    | HTMLTextAreaElement
+    | HTMLSelectElement
+    | HTMLInputElement = HTMLInputElement,
+> = Pick<
+  FieldProps<Element>,
+  'name' | 'validation' | 'type' | 'onBlur' | 'onChange'
+>
+
+/**
+ * useRegister
+ *
+ * Register the field into `react-hook-form` with defaults.
+ *
+ * @remarks
+ *
+ * A field's `validation` prop is `react-hook-form`'s `RegisterOptions`
+ * (with Redwood's extended `valueAs` props).
+ *
+ * @see {@link https://react-hook-form.com/api/useform/register}
+ */
+export const useRegister = <
+  T,
+  Element extends
+    | HTMLTextAreaElement
+    | HTMLSelectElement
+    | HTMLInputElement = HTMLInputElement,
+>(
+  props: UseRegisterProps<Element> & { element?: string },
+  ref?: React.ForwardedRef<T>,
+  emptyAs?: EmptyAsValue,
+) => {
+  const { register } = useFormContext()
+  const { name } = props
+  if (!name) {
+    throw Error('`name` prop must be provided')
+  }
+
+  const validation = props.validation || { required: false }
+
+  setCoercion(validation, {
+    type: props.type,
+    name,
+    emptyAs,
+  })
+
+  const {
+    ref: _ref,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    ...rest
+  } = register(name, validation)
+
+  const onBlur: React.FocusEventHandler<Element> = (event) => {
+    handleBlur(event)
+    props.onBlur?.(event)
+  }
+
+  const onChange: React.ChangeEventHandler<Element> = (event) => {
+    handleChange(event)
+    props.onChange?.(event)
+  }
+
+  return {
+    ...rest,
+    ref: (element: T) => {
+      _ref(element)
+
+      if (typeof ref === 'function') {
+        ref(element)
+      } else if (ref) {
+        ref.current = element
+      }
+    },
+    onBlur,
+    onChange,
+  }
+}
diff --git a/packages/framework-tools/src/buildDefaults.ts b/packages/framework-tools/src/buildDefaults.ts
index 3f6222a14af5..d292442b6d74 100644
--- a/packages/framework-tools/src/buildDefaults.ts
+++ b/packages/framework-tools/src/buildDefaults.ts
@@ -71,7 +71,15 @@ export async function build({
     ...buildOptions,
   })
 
-  await fs.writeJSON(path.join(cwd, metafileName), result.metafile, {
-    spaces: 2,
-  })
+  if (result.metafile) {
+    await fs.writeJSON(path.join(cwd, metafileName), result.metafile, {
+      spaces: 2,
+    })
+  } else {
+    console.warn("No metafile found in esbuild's result.")
+    console.warn(
+      'This is unexpected and probably means something is wrong with the ' +
+        'build.',
+    )
+  }
 }
diff --git a/packages/internal/src/routes.ts b/packages/internal/src/routes.ts
index 8f4935797793..c30903165db6 100644
--- a/packages/internal/src/routes.ts
+++ b/packages/internal/src/routes.ts
@@ -71,8 +71,8 @@ export interface RWRouteManifestItem {
   routeHooks: string | null
   bundle: string | null
   hasParams: boolean
+  relativeFilePath: string | undefined
   redirect: { to: string; permanent: boolean } | null
-  renderMode: 'html' | 'stream'
   // Probably want isNotFound here, so we can attach a separate 404 handler
 }
 
diff --git a/packages/testing/src/web/__tests__/MockHandlers.test.tsx b/packages/testing/src/web/__tests__/MockHandlers.test.tsx
index 55e86bb97aa3..1d1ad73c60c9 100644
--- a/packages/testing/src/web/__tests__/MockHandlers.test.tsx
+++ b/packages/testing/src/web/__tests__/MockHandlers.test.tsx
@@ -1,8 +1,8 @@
-import 'whatwg-fetch'
 import React, { useCallback, useState } from 'react'
 
 import { render, screen, fireEvent, waitFor } from '@testing-library/react'
 import { vi, describe, it, expect } from 'vitest'
+import 'whatwg-fetch'
 
 import { mockGraphQLQuery } from '../mockRequests'
 
diff --git a/packages/testing/src/web/mockAuth.tsx b/packages/testing/src/web/mockAuth.tsx
index 1624f98bc473..0d27ed7c6e42 100644
--- a/packages/testing/src/web/mockAuth.tsx
+++ b/packages/testing/src/web/mockAuth.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 // Exporting everything here, but exports further down in this file will
 // override exports with the same name
-export * from '@redwoodjs/auth/dist/index'
+export * from '@redwoodjs/auth'
 
 import { mockedUserMeta } from './mockRequests'
 
diff --git a/packages/vite/package.json b/packages/vite/package.json
index c418f7fb9af0..f3837f137b92 100644
--- a/packages/vite/package.json
+++ b/packages/vite/package.json
@@ -83,7 +83,7 @@
     "isbot": "3.8.0",
     "react": "18.3.0-canary-a870b2d54-20240314",
     "react-server-dom-webpack": "18.3.0-canary-a870b2d54-20240314",
-    "vite": "5.1.7",
+    "vite": "5.2.8",
     "vite-plugin-cjs-interop": "2.1.0",
     "yargs-parser": "21.1.1"
   },
diff --git a/packages/vite/src/buildRouteManifest.ts b/packages/vite/src/buildRouteManifest.ts
index bbc5f6aa2665..2c518595d444 100644
--- a/packages/vite/src/buildRouteManifest.ts
+++ b/packages/vite/src/buildRouteManifest.ts
@@ -46,7 +46,7 @@ export async function buildRouteManifest() {
             permanent: false,
           }
         : null,
-      renderMode: route.renderMode,
+      relativeFilePath: route.relativeFilePath,
     }
 
     return acc
diff --git a/packages/vite/src/devFeServer.ts b/packages/vite/src/devFeServer.ts
index afbe9890c570..3c46f940b892 100644
--- a/packages/vite/src/devFeServer.ts
+++ b/packages/vite/src/devFeServer.ts
@@ -75,16 +75,15 @@ async function createServer() {
     return createServerAdapter(async (req: Request) => {
       // Recreate middleware router on each request in dev
       const middlewareRouter = await createMiddlewareRouter(vite)
-
-      if (!middlewareRouter) {
-        return new Response('No middleware found', { status: 404 })
-      }
-
       const middleware = middlewareRouter.find(
         req.method as HTTPMethod,
         req.url,
       )?.handler as Middleware | undefined
 
+      if (!middleware) {
+        return new Response('No middleware found', { status: 404 })
+      }
+
       const [mwRes] = await invoke(req, middleware, route ? { route } : {})
 
       return mwRes.toResponse()
diff --git a/packages/vite/src/middleware/createMiddlewareRouter.test.ts b/packages/vite/src/middleware/createMiddlewareRouter.test.ts
index fcd304f63a16..a8d65f09de11 100644
--- a/packages/vite/src/middleware/createMiddlewareRouter.test.ts
+++ b/packages/vite/src/middleware/createMiddlewareRouter.test.ts
@@ -64,9 +64,9 @@ describe('createMiddlewareRouter', () => {
     expect(result.prettyPrint()).toMatchInlineSnapshot(`
       "└── (empty root node)
           ├── /
-          │   ├── bazinga (GET)
-          │   └── kittens (GET)
-          └── * (GET)
+          │   ├── bazinga (GET, POST)
+          │   └── kittens (GET, POST)
+          └── * (GET, POST)
       "
     `)
     expect(distRegisterMwMock).toHaveBeenCalled()
@@ -85,9 +85,9 @@ describe('createMiddlewareRouter', () => {
     expect(result.prettyPrint()).toMatchInlineSnapshot(`
       "└── (empty root node)
           ├── /
-          │   ├── bazinga (GET)
-          │   └── kittens (GET)
-          └── * (GET)
+          │   ├── bazinga (GET, POST)
+          │   └── kittens (GET, POST)
+          └── * (GET, POST)
       "
     `)
     expect(distRegisterMwMock).toHaveBeenCalled()
diff --git a/packages/vite/src/middleware/register.ts b/packages/vite/src/middleware/register.ts
index df3845fcc2b7..b916fbf0598f 100644
--- a/packages/vite/src/middleware/register.ts
+++ b/packages/vite/src/middleware/register.ts
@@ -88,8 +88,8 @@ export const addMiddlewareHandlers = (mwRegList: MiddlewareReg = []) => {
     const chainedMw = chain(mwList)
 
     // @NOTE: as any, because we don't actually use the fmw router to invoke the mw
-    // we use it just for matching. FMW doesn't seem to have a way of customising the handler signature
-    mwRouter.on('GET', pattern, chainedMw as any)
+    // we use it just for matching. FMW doesn't seem to have a way of customizing the handler type
+    mwRouter.on(['GET', 'POST'], pattern, chainedMw as any)
   }
 
   return mwRouter
diff --git a/packages/vite/src/rsc/rscBuildAnalyze.ts b/packages/vite/src/rsc/rscBuildAnalyze.ts
index 4eadc467fe98..2662a07d7331 100644
--- a/packages/vite/src/rsc/rscBuildAnalyze.ts
+++ b/packages/vite/src/rsc/rscBuildAnalyze.ts
@@ -55,7 +55,8 @@ export async function rscBuildAnalyze() {
     ssr: {
       // We can ignore everything that starts with `node:` because it's not
       // going to be RSCs
-      noExternal: /^(?!node:)/,
+      // As of vite 5.2 `true` here means "all except node built-ins"
+      noExternal: true,
       // TODO (RSC): Figure out what the `external` list should be. Right
       // now it's just copied from waku, plus we added prisma
       external: ['react', 'minimatch', '@prisma/client'],
diff --git a/packages/vite/src/rsc/rscBuildForServer.ts b/packages/vite/src/rsc/rscBuildForServer.ts
index 1c20e8e15e14..1f6267bc7eda 100644
--- a/packages/vite/src/rsc/rscBuildForServer.ts
+++ b/packages/vite/src/rsc/rscBuildForServer.ts
@@ -40,21 +40,22 @@ export async function rscBuildForServer(
   const rscServerBuildOutput = await viteBuild({
     envFile: false,
     ssr: {
-      // Externalize every file apart from node built-ins. We want vite/rollup
-      // to inline dependencies in the server bundle. This gets round runtime
+      // Inline every file apart from node built-ins. We want vite/rollup to
+      // inline dependencies in the server bundle. This gets round runtime
       // importing of "server-only". We have to do all imports because we can't
       // rely on "server-only" being the name of the package. This is also
       // actually more efficient because less files. Although, at build time
       // it's likely way less efficient because we have to do so many files.
       // Files included in `noExternal` are files we want Vite to analyze
-      noExternal: /^(?!node:)/,
+      // As of vite 5.2 `true` here means "all except node built-ins"
+      noExternal: true,
       // Can't inline prisma client (db calls fail at runtime) or react-dom
-      // (css preinit failure)
+      // (css pre-init failure)
       external: ['@prisma/client', 'react-dom'],
       resolve: {
         // These conditions are used in the plugin pipeline, and only affect non-externalized
-        // dependencies during the SSR build. Which because of `noExternal: /^(?!node:)/` means
-        // all dependencies apart from node built-ins.
+        // dependencies during the SSR build. Which because of `noExternal: true` means all
+        // dependencies apart from node built-ins.
         conditions: ['react-server'],
       },
     },
diff --git a/packages/vite/src/runFeServer.ts b/packages/vite/src/runFeServer.ts
index e629ec1f6a81..9204ad611b9b 100644
--- a/packages/vite/src/runFeServer.ts
+++ b/packages/vite/src/runFeServer.ts
@@ -98,15 +98,15 @@ export async function runFeServer() {
 
   const handleWithMiddleware = (route?: RWRouteManifestItem) => {
     return createServerAdapter(async (req: Request) => {
-      if (!middlewareRouter) {
-        return new Response('No middleware found', { status: 404 })
-      }
-
       const middleware = middlewareRouter.find(
         req.method as HTTPMethod,
         req.url,
       )?.handler as Middleware | undefined
 
+      if (!middleware) {
+        return new Response('No middleware found', { status: 404 })
+      }
+
       const [mwRes] = await invoke(req, middleware, route ? { route } : {})
 
       return mwRes.toResponse()
diff --git a/packages/web/ambient.d.ts b/packages/web/ambient.d.ts
index 8eba595af95c..992775f1cce1 100644
--- a/packages/web/ambient.d.ts
+++ b/packages/web/ambient.d.ts
@@ -2,19 +2,12 @@
 import type { NormalizedCacheObject } from '@apollo/client'
 import type { HelmetServerState } from 'react-helmet-async'
 
-import type { TagDescriptor } from '@redwoodjs/web'
-
 declare global {
   var __REDWOOD__PRERENDERING: boolean
   var __REDWOOD__HELMET_CONTEXT: { helmet?: HelmetServerState }
   var __REDWOOD__APP_TITLE: string
   var __REDWOOD__APOLLO_STATE: NormalizedCacheObject
 
-  var __REDWOOD__ASSET_MAP: {
-    css?: string[]
-    meta?: TagDescriptor[]
-  }
-
   // Provided by Vite.config, or Webpack in the user's project
   var RWJS_ENV: {
     RWJS_API_GRAPHQL_URL: string
diff --git a/packages/web/src/apollo/index.tsx b/packages/web/src/apollo/index.tsx
index 1f3e09dbbc24..6835fe0fea34 100644
--- a/packages/web/src/apollo/index.tsx
+++ b/packages/web/src/apollo/index.tsx
@@ -33,22 +33,22 @@ import './typeOverride'
 import {
   FetchConfigProvider,
   useFetchConfig,
-} from '../components/FetchConfigProvider'
-import { GraphQLHooksProvider } from '../components/GraphQLHooksProvider'
+} from '../components/FetchConfigProvider.js'
+import { GraphQLHooksProvider } from '../components/GraphQLHooksProvider.js'
 
 import {
   fragmentRegistry,
   registerFragment,
   registerFragments,
-} from './fragmentRegistry'
-import { SSELink } from './sseLink'
-import { useCache } from './useCache'
+} from './fragmentRegistry.js'
+import { SSELink } from './sseLink.js'
+import { useCache } from './useCache.js'
 
 export type {
   CacheKey,
   FragmentIdentifier,
   RegisterFragmentResult,
-} from './fragmentRegistry'
+} from './fragmentRegistry.js'
 
 export { useCache }
 
diff --git a/packages/web/src/apollo/suspense.tsx b/packages/web/src/apollo/suspense.tsx
index 45b77a2d3429..c76a69217d54 100644
--- a/packages/web/src/apollo/suspense.tsx
+++ b/packages/web/src/apollo/suspense.tsx
@@ -40,7 +40,7 @@ import {
   FetchConfigProvider,
   useFetchConfig,
 } from '../components/FetchConfigProvider'
-import { GraphQLHooksProvider } from '../components/GraphQLHooksProvider'
+import { GraphQLHooksProvider } from '../components/GraphQLHooksProvider.js'
 
 import type {
   RedwoodApolloLink,
diff --git a/packages/web/src/components/FetchConfigProvider.test.tsx b/packages/web/src/components/FetchConfigProvider.test.tsx
index 6b5c29e13c91..edcafd975501 100644
--- a/packages/web/src/components/FetchConfigProvider.test.tsx
+++ b/packages/web/src/components/FetchConfigProvider.test.tsx
@@ -7,7 +7,7 @@ import type { AuthContextInterface } from '@redwoodjs/auth'
 
 globalThis.RWJS_API_GRAPHQL_URL = 'https://api.example.com/graphql'
 
-import { FetchConfigProvider, useFetchConfig } from './FetchConfigProvider'
+import { FetchConfigProvider, useFetchConfig } from './FetchConfigProvider.js'
 
 const FetchConfigToString: React.FunctionComponent = () => {
   const c = useFetchConfig()
diff --git a/packages/web/src/components/MetaTags.tsx b/packages/web/src/components/MetaTags.tsx
index c73849dca9b5..6e12da2eb387 100644
--- a/packages/web/src/components/MetaTags.tsx
+++ b/packages/web/src/components/MetaTags.tsx
@@ -1,8 +1,8 @@
-import { Head as HelmetHead } from '../index'
+import { Helmet as HelmetHead } from 'react-helmet-async'
 
 // Ideally we wouldn't include this for non experiment builds
 // But.... not worth the effort to remove it from bundle atm
-import PortalHead from './PortalHead'
+import PortalHead from './PortalHead.js'
 
 type RobotsParams =
   | 'noindex'
diff --git a/packages/web/src/components/Metadata.test.tsx b/packages/web/src/components/Metadata.test.tsx
index 7d190945075c..21746517f4bb 100644
--- a/packages/web/src/components/Metadata.test.tsx
+++ b/packages/web/src/components/Metadata.test.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import { render } from '@testing-library/react'
 import { describe, beforeAll, it, expect } from 'vitest'
 
-import { Metadata } from './Metadata'
+import { Metadata } from './Metadata.js'
 
 // DOCS: can return a structured object from the database and just give it to `og` and it works
 
diff --git a/packages/web/src/components/Metadata.tsx b/packages/web/src/components/Metadata.tsx
index 7e8e90e395ff..ca4cd7a36c5c 100644
--- a/packages/web/src/components/Metadata.tsx
+++ b/packages/web/src/components/Metadata.tsx
@@ -4,7 +4,7 @@ import { Helmet as HelmetHead } from 'react-helmet-async'
 
 // Ideally we wouldn't include this for non experiment builds
 // But.... not worth the effort to remove it from bundle atm
-import PortalHead from './PortalHead'
+import PortalHead from './PortalHead.js'
 
 type ValueOrCollection<T> = T | ValueOrCollection<T>[] | Record<string, T>
 type ParentValue = ValueOrCollection<string>
diff --git a/packages/web/src/components/PortalHead.tsx b/packages/web/src/components/PortalHead.tsx
index 1d7c34a0f4f7..f6b3ad9b7e99 100644
--- a/packages/web/src/components/PortalHead.tsx
+++ b/packages/web/src/components/PortalHead.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 import { createPortal } from 'react-dom'
 
-import { useServerInsertedHTML } from './ServerInject'
+import { useServerInsertedHTML } from './ServerInject.js'
 
 function addDataAttributeMarker(
   children: React.ReactNode,
diff --git a/packages/web/src/components/cell/CellErrorBoundary.tsx b/packages/web/src/components/cell/CellErrorBoundary.tsx
index c8843c713286..414b4b004282 100644
--- a/packages/web/src/components/cell/CellErrorBoundary.tsx
+++ b/packages/web/src/components/cell/CellErrorBoundary.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react'
 
-import type { CellFailureProps } from './cellTypes'
+import type { CellFailureProps } from './cellTypes.js'
 
 export type FallbackProps = {
   error: QueryOperationResult['error']
diff --git a/packages/web/src/components/cell/createCell.test.tsx b/packages/web/src/components/cell/createCell.test.tsx
index a3e18535bee6..64c9824fa9bf 100644
--- a/packages/web/src/components/cell/createCell.test.tsx
+++ b/packages/web/src/components/cell/createCell.test.tsx
@@ -3,9 +3,9 @@ import React from 'react'
 import { render, screen } from '@testing-library/react'
 import { vi, describe, beforeAll, test, expect } from 'vitest'
 
-import { GraphQLHooksProvider } from '../GraphQLHooksProvider'
+import { GraphQLHooksProvider } from '../GraphQLHooksProvider.js'
 
-import { createCell } from './createCell'
+import { createCell } from './createCell.js'
 
 describe('createCell', () => {
   beforeAll(() => {
diff --git a/packages/web/src/components/cell/createCell.tsx b/packages/web/src/components/cell/createCell.tsx
index dda21e0f1860..0c1783ecd68e 100644
--- a/packages/web/src/components/cell/createCell.tsx
+++ b/packages/web/src/components/cell/createCell.tsx
@@ -1,14 +1,14 @@
-import { fragmentRegistry } from '../../apollo'
-import { getOperationName } from '../../graphql'
+import { fragmentRegistry } from '../../apollo/fragmentRegistry.js'
+import { getOperationName } from '../../graphql.js'
 /**
  * This is part of how we let users swap out their GraphQL client while staying compatible with Cells.
  */
-import { useQuery } from '../GraphQLHooksProvider'
+import { useQuery } from '../GraphQLHooksProvider.js'
 
-import { useCellCacheContext } from './CellCacheContext'
-import type { CreateCellProps } from './cellTypes'
-import { createSuspendingCell } from './createSuspendingCell'
-import { isDataEmpty } from './isCellEmpty'
+import { useCellCacheContext } from './CellCacheContext.js'
+import type { CreateCellProps } from './cellTypes.js'
+import { createSuspendingCell } from './createSuspendingCell.js'
+import { isDataEmpty } from './isCellEmpty.js'
 
 // 👇 Note how we switch which cell factory to use!
 export const createCell = RWJS_ENV.RWJS_EXP_STREAMING_SSR
diff --git a/packages/web/src/components/cell/createServerCell.tsx b/packages/web/src/components/cell/createServerCell.tsx
index 6d5c93ccee5a..9439968cb486 100644
--- a/packages/web/src/components/cell/createServerCell.tsx
+++ b/packages/web/src/components/cell/createServerCell.tsx
@@ -5,9 +5,9 @@ import { Suspense } from 'react'
 // Class components are not supported on the server
 // https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#when-to-use-server-and-client-components
 // Consider https://github.com/bvaughn/react-error-boundary
-// import { CellErrorBoundary } from './CellErrorBoundary'
-import type { CreateCellProps } from './cellTypes'
-import { isDataEmpty } from './isCellEmpty'
+// import { CellErrorBoundary } from './CellErrorBoundary.js'
+import type { CreateCellProps } from './cellTypes.js'
+import { isDataEmpty } from './isCellEmpty.js'
 
 // TODO(RSC): Clean this type up and consider moving to cellTypes
 type CreateServerCellProps<CellProps, CellVariables> = Omit<
diff --git a/packages/web/src/components/cell/createSuspendingCell.test.tsx b/packages/web/src/components/cell/createSuspendingCell.test.tsx
index 266276fd7ffe..c368802649ed 100644
--- a/packages/web/src/components/cell/createSuspendingCell.test.tsx
+++ b/packages/web/src/components/cell/createSuspendingCell.test.tsx
@@ -5,9 +5,9 @@ import { loadErrorMessages, loadDevMessages } from '@apollo/client/dev'
 import { render, screen } from '@testing-library/react'
 import { vi, describe, beforeAll, test } from 'vitest'
 
-import { GraphQLHooksProvider } from '../GraphQLHooksProvider'
+import { GraphQLHooksProvider } from '../GraphQLHooksProvider.js'
 
-import { createSuspendingCell } from './createSuspendingCell'
+import { createSuspendingCell } from './createSuspendingCell.js'
 
 type ReadQueryHook = typeof useReadQuery
 type BgQueryHook = typeof useBackgroundQuery
diff --git a/packages/web/src/components/cell/createSuspendingCell.tsx b/packages/web/src/components/cell/createSuspendingCell.tsx
index 695fbfc7fdf0..ad15ffece93a 100644
--- a/packages/web/src/components/cell/createSuspendingCell.tsx
+++ b/packages/web/src/components/cell/createSuspendingCell.tsx
@@ -3,20 +3,20 @@ import { Suspense } from 'react'
 import type { OperationVariables, QueryReference } from '@apollo/client'
 import { useApolloClient } from '@apollo/client'
 
-import { useBackgroundQuery, useReadQuery } from '../GraphQLHooksProvider'
+import { useBackgroundQuery, useReadQuery } from '../GraphQLHooksProvider.js'
 
 /**
  * This is part of how we let users swap out their GraphQL client while staying compatible with Cells.
  */
-import type { FallbackProps } from './CellErrorBoundary'
-import { CellErrorBoundary } from './CellErrorBoundary'
+import type { FallbackProps } from './CellErrorBoundary.js'
+import { CellErrorBoundary } from './CellErrorBoundary.js'
 import type {
   CreateCellProps,
   DataObject,
   SuspendingSuccessProps,
   SuspenseCellQueryResult,
 } from './cellTypes'
-import { isDataEmpty } from './isCellEmpty'
+import { isDataEmpty } from './isCellEmpty.js'
 
 type AnyObj = Record<string, unknown>
 /**
diff --git a/packages/web/src/components/cell/isCellEmpty.tsx b/packages/web/src/components/cell/isCellEmpty.tsx
index 54daa326caa9..282133cb78c1 100644
--- a/packages/web/src/components/cell/isCellEmpty.tsx
+++ b/packages/web/src/components/cell/isCellEmpty.tsx
@@ -1,4 +1,4 @@
-import type { DataObject } from './cellTypes'
+import type { DataObject } from './cellTypes.js'
 
 /**
  * The default `isEmpty` implementation. Checks if any of the field is `null` or an empty array.
diff --git a/packages/web/src/components/htmlTags.tsx b/packages/web/src/components/htmlTags.tsx
index 5085447ef06c..b4287b76cd41 100644
--- a/packages/web/src/components/htmlTags.tsx
+++ b/packages/web/src/components/htmlTags.tsx
@@ -1,11 +1,26 @@
 import { Fragment } from 'react'
 
-const extractFromAssetMap = (key: 'css' | 'meta') => {
+declare const window: {
+  __REDWOOD__ASSET_MAP: {
+    css?: string[]
+    meta?: TagDescriptor[]
+  }
+} & Window
+
+const extractCssFromAssetMap = () => {
+  if (typeof window !== 'undefined') {
+    return window.__REDWOOD__ASSET_MAP?.css
+  }
+
+  return undefined
+}
+
+const extractMetaFromAssetMap = () => {
   if (typeof window !== 'undefined') {
-    return window?.__REDWOOD__ASSET_MAP?.[key]
+    return window.__REDWOOD__ASSET_MAP?.meta
   }
 
-  return null
+  return undefined
 }
 
 function addSlashIfNeeded(path: string): string {
@@ -18,9 +33,7 @@ function addSlashIfNeeded(path: string): string {
 
 /** CSS is a specialised metatag */
 export const Css = ({ css }: { css: string[] }) => {
-  const cssLinks = (css || extractFromAssetMap('css') || []).map(
-    addSlashIfNeeded,
-  )
+  const cssLinks = (css || extractCssFromAssetMap() || []).map(addSlashIfNeeded)
 
   return (
     <>
@@ -99,7 +112,7 @@ interface MetaProps {
 }
 
 export const Meta = ({ tags }: MetaProps) => {
-  const metaTags = tags || extractFromAssetMap('meta') || []
+  const metaTags = tags || extractMetaFromAssetMap() || []
 
   return (
     <>
diff --git a/packages/web/src/components/portalHead.test.tsx b/packages/web/src/components/portalHead.test.tsx
index 9129eb34aad2..cf35a4d229f0 100644
--- a/packages/web/src/components/portalHead.test.tsx
+++ b/packages/web/src/components/portalHead.test.tsx
@@ -3,8 +3,8 @@ import React from 'react'
 import { render } from '@testing-library/react'
 import { vi, describe, it, expect } from 'vitest'
 
-import PortalHead from './PortalHead'
-import * as ServerInject from './ServerInject'
+import PortalHead from './PortalHead.js'
+import * as ServerInject from './ServerInject.js'
 
 const serverInsertionHookSpy = vi
   .spyOn(ServerInject, 'useServerInsertedHTML')
diff --git a/packages/web/src/index.ts b/packages/web/src/index.ts
index 90c870aefb9a..7335de935a1c 100644
--- a/packages/web/src/index.ts
+++ b/packages/web/src/index.ts
@@ -1,22 +1,22 @@
-import './global.web-auto-imports'
-import './config'
-import './assetImports'
+import './global.web-auto-imports.js'
+import './config.js'
+import './assetImports.js'
 
-export { default as FatalErrorBoundary } from './components/FatalErrorBoundary'
+export { default as FatalErrorBoundary } from './components/FatalErrorBoundary.js'
 export {
   FetchConfigProvider,
   useFetchConfig,
-} from './components/FetchConfigProvider'
+} from './components/FetchConfigProvider.js'
 export {
   GraphQLHooksProvider,
   useQuery,
   useMutation,
   useSubscription,
-} from './components/GraphQLHooksProvider'
+} from './components/GraphQLHooksProvider.js'
 
-export * from './components/cell/CellCacheContext'
+export * from './components/cell/CellCacheContext.js'
 
-export { createCell } from './components/cell/createCell'
+export { createCell } from './components/cell/createCell.js'
 
 export {
   CellProps,
@@ -24,19 +24,19 @@ export {
   CellLoadingProps,
   CellSuccessProps,
   CellSuccessData,
-} from './components/cell/cellTypes'
+} from './components/cell/cellTypes.js'
 
-export * from './graphql'
+export * from './graphql.js'
 
-export * from './components/RedwoodProvider'
+export * from './components/RedwoodProvider.js'
 
-export * from './components/MetaTags'
-export * from './components/Metadata'
+export * from './components/MetaTags.js'
+export * from './components/Metadata.js'
 export { Helmet as Head, Helmet } from 'react-helmet-async'
 
-export * from './components/htmlTags'
-export * from './routeHooks.types'
+export * from './components/htmlTags.js'
+export * from './routeHooks.types.js'
 
-export * from './components/ServerInject'
+export * from './components/ServerInject.js'
 
-export type { TypedDocumentNode } from './components/GraphQLHooksProvider'
+export type { TypedDocumentNode } from './components/GraphQLHooksProvider.js'
diff --git a/packages/web/src/routeHooks.types.ts b/packages/web/src/routeHooks.types.ts
index c5e02c2a68db..5ee14884e93e 100644
--- a/packages/web/src/routeHooks.types.ts
+++ b/packages/web/src/routeHooks.types.ts
@@ -1,4 +1,4 @@
-import type { TagDescriptor } from './components/htmlTags'
+import type { TagDescriptor } from './components/htmlTags.js'
 
 export type RouteHookOutput = {
   meta: TagDescriptor[]
diff --git a/yarn.lock b/yarn.lock
index 7e8758897c43..66afa954cca4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7877,6 +7877,7 @@ __metadata:
     "@babel/cli": "npm:7.24.1"
     "@babel/core": "npm:^7.22.20"
     "@babel/runtime-corejs3": "npm:7.24.1"
+    "@redwoodjs/auth": "workspace:*"
     "@supabase/supabase-js": "npm:2.40.0"
     "@types/react": "npm:^18.2.55"
     core-js: "npm:3.36.1"
@@ -7946,17 +7947,15 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@redwoodjs/auth@workspace:packages/auth"
   dependencies:
-    "@babel/cli": "npm:7.24.1"
-    "@babel/core": "npm:^7.22.20"
-    "@babel/runtime-corejs3": "npm:7.24.1"
+    "@redwoodjs/framework-tools": "workspace:*"
     "@testing-library/jest-dom": "npm:6.4.2"
     "@testing-library/react": "npm:14.2.2"
     core-js: "npm:3.36.1"
-    jest: "npm:29.7.0"
-    jest-environment-jsdom: "npm:29.7.0"
     msw: "npm:1.3.3"
     react: "npm:18.3.0-canary-a870b2d54-20240314"
+    tsx: "npm:4.7.1"
     typescript: "npm:5.4.3"
+    vitest: "npm:1.4.0"
   languageName: unknown
   linkType: soft
 
@@ -8804,7 +8803,7 @@ __metadata:
     rollup: "npm:4.13.0"
     tsx: "npm:4.7.1"
     typescript: "npm:5.4.3"
-    vite: "npm:5.1.7"
+    vite: "npm:5.2.8"
     vite-plugin-cjs-interop: "npm:2.1.0"
     vitest: "npm:1.4.0"
     yargs-parser: "npm:21.1.1"
@@ -8931,6 +8930,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-android-arm-eabi@npm:4.14.1":
+  version: 4.14.1
+  resolution: "@rollup/rollup-android-arm-eabi@npm:4.14.1"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-android-arm64@npm:4.13.0":
   version: 4.13.0
   resolution: "@rollup/rollup-android-arm64@npm:4.13.0"
@@ -8938,6 +8944,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-android-arm64@npm:4.14.1":
+  version: 4.14.1
+  resolution: "@rollup/rollup-android-arm64@npm:4.14.1"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-darwin-arm64@npm:4.13.0":
   version: 4.13.0
   resolution: "@rollup/rollup-darwin-arm64@npm:4.13.0"
@@ -8945,6 +8958,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-darwin-arm64@npm:4.14.1":
+  version: 4.14.1
+  resolution: "@rollup/rollup-darwin-arm64@npm:4.14.1"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-darwin-x64@npm:4.13.0":
   version: 4.13.0
   resolution: "@rollup/rollup-darwin-x64@npm:4.13.0"
@@ -8952,6 +8972,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-darwin-x64@npm:4.14.1":
+  version: 4.14.1
+  resolution: "@rollup/rollup-darwin-x64@npm:4.14.1"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-arm-gnueabihf@npm:4.13.0":
   version: 4.13.0
   resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.13.0"
@@ -8959,6 +8986,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-arm-gnueabihf@npm:4.14.1":
+  version: 4.14.1
+  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.14.1"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-arm64-gnu@npm:4.13.0":
   version: 4.13.0
   resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.13.0"
@@ -8966,6 +9000,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-arm64-gnu@npm:4.14.1":
+  version: 4.14.1
+  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.14.1"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-arm64-musl@npm:4.13.0":
   version: 4.13.0
   resolution: "@rollup/rollup-linux-arm64-musl@npm:4.13.0"
@@ -8973,6 +9014,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-arm64-musl@npm:4.14.1":
+  version: 4.14.1
+  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.14.1"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-powerpc64le-gnu@npm:4.14.1":
+  version: 4.14.1
+  resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.14.1"
+  conditions: os=linux & cpu=ppc64le & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-riscv64-gnu@npm:4.13.0":
   version: 4.13.0
   resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.13.0"
@@ -8980,6 +9035,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-riscv64-gnu@npm:4.14.1":
+  version: 4.14.1
+  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.14.1"
+  conditions: os=linux & cpu=riscv64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-s390x-gnu@npm:4.14.1":
+  version: 4.14.1
+  resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.14.1"
+  conditions: os=linux & cpu=s390x & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-x64-gnu@npm:4.13.0":
   version: 4.13.0
   resolution: "@rollup/rollup-linux-x64-gnu@npm:4.13.0"
@@ -8987,6 +9056,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-x64-gnu@npm:4.14.1":
+  version: 4.14.1
+  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.14.1"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-x64-musl@npm:4.13.0":
   version: 4.13.0
   resolution: "@rollup/rollup-linux-x64-musl@npm:4.13.0"
@@ -8994,6 +9070,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-x64-musl@npm:4.14.1":
+  version: 4.14.1
+  resolution: "@rollup/rollup-linux-x64-musl@npm:4.14.1"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-win32-arm64-msvc@npm:4.13.0":
   version: 4.13.0
   resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.13.0"
@@ -9001,6 +9084,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-win32-arm64-msvc@npm:4.14.1":
+  version: 4.14.1
+  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.14.1"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-win32-ia32-msvc@npm:4.13.0":
   version: 4.13.0
   resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.13.0"
@@ -9008,6 +9098,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-win32-ia32-msvc@npm:4.14.1":
+  version: 4.14.1
+  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.14.1"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-win32-x64-msvc@npm:4.13.0":
   version: 4.13.0
   resolution: "@rollup/rollup-win32-x64-msvc@npm:4.13.0"
@@ -9015,6 +9112,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-win32-x64-msvc@npm:4.14.1":
+  version: 4.14.1
+  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.14.1"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@sdl-codegen/node@npm:0.0.13":
   version: 0.0.13
   resolution: "@sdl-codegen/node@npm:0.0.13"
@@ -17678,7 +17782,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild@npm:0.20.2":
+"esbuild@npm:0.20.2, esbuild@npm:^0.20.1":
   version: 0.20.2
   resolution: "esbuild@npm:0.20.2"
   dependencies:
@@ -17835,7 +17939,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild@npm:^0.19.3, esbuild@npm:~0.19.10":
+"esbuild@npm:~0.19.10":
   version: 0.19.12
   resolution: "esbuild@npm:0.19.12"
   dependencies:
@@ -27942,7 +28046,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.2.14, postcss@npm:^8.4.24, postcss@npm:^8.4.33, postcss@npm:^8.4.35":
+"postcss@npm:^8.2.14, postcss@npm:^8.4.24, postcss@npm:^8.4.33, postcss@npm:^8.4.38":
   version: 8.4.38
   resolution: "postcss@npm:8.4.38"
   dependencies:
@@ -29709,7 +29813,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup@npm:4.13.0, rollup@npm:^4.2.0":
+"rollup@npm:4.13.0":
   version: 4.13.0
   resolution: "rollup@npm:4.13.0"
   dependencies:
@@ -29763,6 +29867,66 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rollup@npm:^4.13.0":
+  version: 4.14.1
+  resolution: "rollup@npm:4.14.1"
+  dependencies:
+    "@rollup/rollup-android-arm-eabi": "npm:4.14.1"
+    "@rollup/rollup-android-arm64": "npm:4.14.1"
+    "@rollup/rollup-darwin-arm64": "npm:4.14.1"
+    "@rollup/rollup-darwin-x64": "npm:4.14.1"
+    "@rollup/rollup-linux-arm-gnueabihf": "npm:4.14.1"
+    "@rollup/rollup-linux-arm64-gnu": "npm:4.14.1"
+    "@rollup/rollup-linux-arm64-musl": "npm:4.14.1"
+    "@rollup/rollup-linux-powerpc64le-gnu": "npm:4.14.1"
+    "@rollup/rollup-linux-riscv64-gnu": "npm:4.14.1"
+    "@rollup/rollup-linux-s390x-gnu": "npm:4.14.1"
+    "@rollup/rollup-linux-x64-gnu": "npm:4.14.1"
+    "@rollup/rollup-linux-x64-musl": "npm:4.14.1"
+    "@rollup/rollup-win32-arm64-msvc": "npm:4.14.1"
+    "@rollup/rollup-win32-ia32-msvc": "npm:4.14.1"
+    "@rollup/rollup-win32-x64-msvc": "npm:4.14.1"
+    "@types/estree": "npm:1.0.5"
+    fsevents: "npm:~2.3.2"
+  dependenciesMeta:
+    "@rollup/rollup-android-arm-eabi":
+      optional: true
+    "@rollup/rollup-android-arm64":
+      optional: true
+    "@rollup/rollup-darwin-arm64":
+      optional: true
+    "@rollup/rollup-darwin-x64":
+      optional: true
+    "@rollup/rollup-linux-arm-gnueabihf":
+      optional: true
+    "@rollup/rollup-linux-arm64-gnu":
+      optional: true
+    "@rollup/rollup-linux-arm64-musl":
+      optional: true
+    "@rollup/rollup-linux-powerpc64le-gnu":
+      optional: true
+    "@rollup/rollup-linux-riscv64-gnu":
+      optional: true
+    "@rollup/rollup-linux-s390x-gnu":
+      optional: true
+    "@rollup/rollup-linux-x64-gnu":
+      optional: true
+    "@rollup/rollup-linux-x64-musl":
+      optional: true
+    "@rollup/rollup-win32-arm64-msvc":
+      optional: true
+    "@rollup/rollup-win32-ia32-msvc":
+      optional: true
+    "@rollup/rollup-win32-x64-msvc":
+      optional: true
+    fsevents:
+      optional: true
+  bin:
+    rollup: dist/bin/rollup
+  checksum: 10c0/c9028c04537f7f16f9b5e4d75c84d2f0dc960d280fc4eca5960f0d67e786d993b8b707a63fc8b2e054b018fdb3a5a98d5eb7ed5674635c7612dd0b66696805fa
+  languageName: node
+  linkType: hard
+
 "root-workspace-0b6124@workspace:.":
   version: 0.0.0-use.local
   resolution: "root-workspace-0b6124@workspace:."
@@ -33240,14 +33404,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite@npm:5.1.7, vite@npm:^5.0.0":
-  version: 5.1.7
-  resolution: "vite@npm:5.1.7"
+"vite@npm:5.2.8, vite@npm:^5.0.0":
+  version: 5.2.8
+  resolution: "vite@npm:5.2.8"
   dependencies:
-    esbuild: "npm:^0.19.3"
+    esbuild: "npm:^0.20.1"
     fsevents: "npm:~2.3.3"
-    postcss: "npm:^8.4.35"
-    rollup: "npm:^4.2.0"
+    postcss: "npm:^8.4.38"
+    rollup: "npm:^4.13.0"
   peerDependencies:
     "@types/node": ^18.0.0 || >=20.0.0
     less: "*"
@@ -33276,7 +33440,7 @@ __metadata:
       optional: true
   bin:
     vite: bin/vite.js
-  checksum: 10c0/f64e1d8bcb237f600790c303447b95f0972e7c5377c0e1c38c1e62ef4864df2bff00c83315994da6e2e64fb51166199403a740b685c5b69a4af648b9244fc69c
+  checksum: 10c0/b5717bb00c2570c08ff6d8ed917655e79184efcafa9dd62d52eea19c5d6dfc5a708ec3de9ebc670a7165fc5d401c2bdf1563bb39e2748d8e51e1593d286a9a13
   languageName: node
   linkType: hard