diff --git a/.storybook/main.ts b/.storybook/main.ts
index a830d656..56aad86f 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -30,5 +30,6 @@ const config: StorybookConfig = {
   docs: {
     autodocs: 'tag',
   },
+  staticDirs: ['../public'],
 };
 export default config;
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 673fd362..02ba084a 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,7 +1,12 @@
 import type { Preview } from '@storybook/react';
 import '../app/globals.css';
+import { handlers } from '../app/mocks/handlers';
+import { initialize, mswDecorator } from 'msw-storybook-addon';
+
+initialize({}, [...handlers]);
 
 const preview: Preview = {
+  decorators: [mswDecorator],
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
diff --git a/app/(sub-page)/sign-up/components/sign-up-container.tsx b/app/(sub-page)/sign-up/components/sign-up-container.tsx
new file mode 100644
index 00000000..e66478f6
--- /dev/null
+++ b/app/(sub-page)/sign-up/components/sign-up-container.tsx
@@ -0,0 +1,34 @@
+'use client';
+import useFunnel from '@/app/hooks/useFunnel';
+import SignUpForm from '@/app/ui/user/sign-up-form/sign-up-form';
+import SignUpTerm from './sign-up-terms';
+import SignUpSuccess from './sign-up-success';
+import ContentContainer from '@/app/ui/view/atom/content-container';
+
+export default function SignUpContainer() {
+  const { Funnel, setStep } = useFunnel<'terms' | 'form' | 'success'>('terms');
+
+  return (
+    <div className="p-6">
+      <Funnel>
+        <Funnel.Step name="terms">
+          <SignUpTerm
+            onNext={() => {
+              setStep('form');
+            }}
+          />
+        </Funnel.Step>
+        <Funnel.Step name="form">
+          <SignUpForm
+            onNext={() => {
+              setStep('success');
+            }}
+          />
+        </Funnel.Step>
+        <Funnel.Step name="success">
+          <SignUpSuccess />
+        </Funnel.Step>
+      </Funnel>
+    </div>
+  );
+}
diff --git a/app/(sub-page)/sign-up/components/sign-up-success.tsx b/app/(sub-page)/sign-up/components/sign-up-success.tsx
new file mode 100644
index 00000000..a27e7758
--- /dev/null
+++ b/app/(sub-page)/sign-up/components/sign-up-success.tsx
@@ -0,0 +1,25 @@
+import Button from '@/app/ui/view/atom/button/button';
+import Link from 'next/link';
+
+// 내용이랑 스타일은 mock인 상태입니다.
+export default function SignUpSuccess() {
+  return (
+    <div className="min-h-screen bg-gray-100 flex items-center justify-center px-4 sm:px-6">
+      <div className="max-w-md w-full space-y-8">
+        <div className="space-y-2">
+          <h2 className="text-3xl font-extrabold tracking-tight">Youre all set.</h2>
+          <p className="text-gray-500">
+            Thanks for signing up! We just need to verify your email address to complete the process.
+          </p>
+        </div>
+        <div className="space-y-4">
+          <div className="grid grid-cols-2 gap-4">
+            <Link className="inline-block w-full" href="/login">
+              <Button className="w-full" label={'로그인 하기'} />
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/(sub-page)/sign-up/components/sign-up-terms.tsx b/app/(sub-page)/sign-up/components/sign-up-terms.tsx
new file mode 100644
index 00000000..8a5deaf7
--- /dev/null
+++ b/app/(sub-page)/sign-up/components/sign-up-terms.tsx
@@ -0,0 +1,56 @@
+import Button from '@/app/ui/view/atom/button/button';
+
+interface SignUpTermProps {
+  onNext?: () => void;
+}
+
+// 약관 내용이랑 스타일은 mock인 상태입니다.
+export default function SignUpTerm({ onNext }: SignUpTermProps) {
+  const handleAgreeButtonClick = () => {
+    onNext?.();
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto my-8 p-6 bg-white rounded-lg shadow-md">
+      <h1 className="text-3xl font-bold text-center mb-6">알림독의 안내문</h1>
+      <ul className="list-disc space-y-4 text-sm">
+        <li>
+          현재 저희 기능은 한국-한국은 아니라 한국-외국도 가능합니다. 각사별에서 수하인 없더라도 저희가 받는데까지는
+          무관합니다만, 꼭 관세사무소와 협의하세요!
+          <ul className="list-disc ml-6 mt-2">
+            <li>대상: 국외발송, 북부발송, 사회복지대상, ICT용품대상, 일반대상, 미래용품대상(확인)</li>
+            <li>발송: 16 ~ 22시발</li>
+          </ul>
+        </li>
+        <li>
+          교직, 디자인, 연계개발, 물품, 전자, 자원관리/회계지원에 해당하는 사용자는 각사 기준에 따른 선정되지 않아 각사
+          별 관리하는데요.
+        </li>
+        <li>검사를 위해서 선적품을 직접 연락드려야만 PC화면에서 진행하는 것을 권장합니다.</li>
+        <li>
+          검사 기준은 최신버전 확인내역(2023.07.24) 반영하여 선정되었으며, 학사내역은 매년 개편되므로 자사이 외고 있는
+          구버전과 다를 수 있습니다.
+          <ul className="list-disc ml-6 mt-2">
+            <li>문자대항: 학사내역은 확인 클릭</li>
+          </ul>
+        </li>
+        <li>
+          본 서비스 정보는 공식적인 확인을 전제 않으며, 정확한 증상조사결과를 위해 서류 또는 담당과 교류해야할 사항을
+          잊지 않습니다.
+        </li>
+        <li>
+          전자문 서화지 데이터베이스는 의무화되어 저희가 고유축적 및 교육과정 등에서 사용되며, 어떤 다른 용도로 사용
+          되지 않습니다.
+        </li>
+        <li>특허요건 기준이 전문 선정되었거나, 오류발생 시 우측 하단 채팅창으로 또는 담당 부서로문의합니다.</li>
+      </ul>
+      <div className="mt-8 flex justify-center">
+        <Button
+          onClick={handleAgreeButtonClick}
+          className="ml-4 bg-blue-500 text-white py-2 px-4 rounded-full"
+          label={'알림독의 안내문'}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/app/(sub-page)/sign-up/page.tsx b/app/(sub-page)/sign-up/page.tsx
new file mode 100644
index 00000000..8395093c
--- /dev/null
+++ b/app/(sub-page)/sign-up/page.tsx
@@ -0,0 +1,21 @@
+import ContentContainer from '@/app/ui/view/atom/content-container';
+import SignUpContainer from './components/sign-up-container';
+import { Suspense } from 'react';
+import LoadingSpinner from '@/app/ui/view/atom/loading-spinner';
+
+// Refactor: fallback 스켈레톤으로 대체
+export default function Page() {
+  return (
+    <ContentContainer className="md:w-[768px]">
+      <Suspense
+        fallback={
+          <div className="h-96">
+            <LoadingSpinner />
+          </div>
+        }
+      >
+        <SignUpContainer />
+      </Suspense>
+    </ContentContainer>
+  );
+}
diff --git a/app/__test__/ui/invoice/revenu-chart.test.tsx b/app/__test__/ui/invoice/revenu-chart.test.tsx
deleted file mode 100644
index 9e127507..00000000
--- a/app/__test__/ui/invoice/revenu-chart.test.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import RevenueChart from '../../../ui/invoice/revenu-chart';
-
-// test sample: RSC 테스트할 때
-// 참고로 정상적인 방법은 아님, next 문서를 보면 jest에서 아직 RSC를 공식적으로 지원하지 않기 때문에, RSC는 E2E 테스트를 권장하고 있음. 즉 어떤 지옥이 펼쳐질 지 모른다..
-// https://nextjs.org/docs/app/building-your-application/testing/jest
-describe('RevenueChart', () => {
-  it('RevenueChart를 보여준다.', async () => {
-    render(await RevenueChart());
-
-    expect(await screen.findByText(/Recent Revenue/i)).toBeInTheDocument();
-    expect(await screen.findByText(/2000/i)).toBeInTheDocument();
-  });
-});
diff --git a/app/business/api-path.ts b/app/business/api-path.ts
index c05f51fe..6bb0a801 100644
--- a/app/business/api-path.ts
+++ b/app/business/api-path.ts
@@ -1,8 +1,9 @@
-const BASE_URL = process.env.API_MOCKING === 'enable' ? 'http://localhost:9090' : 'http://mock.api.com';
+const BASE_URL = process.env.API_MOCKING === 'enable' ? 'http://localhost:9090' : 'https://mock.api.com';
 
 export const API_PATH = {
   revenue: `${BASE_URL}/revenue`,
   registerUserGrade: `${BASE_URL}/registerUserGrade`,
   parsePDFtoText: `${BASE_URL}/parsePDFtoText`,
   takenLectures: `${BASE_URL}/taken-lectures`,
+  user: `${BASE_URL}/users`,
 };
diff --git a/app/business/auth/user.command.ts b/app/business/auth/user.command.ts
deleted file mode 100644
index 3bd9f010..00000000
--- a/app/business/auth/user.command.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-'use server';
-
-import { FormState } from '@/app/ui/view/molecule/form/form-root';
-import { z } from 'zod';
-
-// message name은 logic 구현할 때 통일할 예정
-const SignUpFormSchema = z
-  .object({
-    userId: z
-      .string()
-      .min(6, {
-        message: 'User ID must be at least 6 characters',
-      })
-      .max(20, {
-        message: 'User ID must be at most 20 characters',
-      }),
-    password: z.string().regex(/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!^%*#?&])[A-Za-z\d@$!^%*#?&]{8,}$/, {
-      message: 'Password must contain at least 8 characters, one letter, one number and one special character',
-    }),
-    confirmPassword: z.string(),
-    studentNumber: z.string().length(8, { message: '학번은 8자리 입니다' }).startsWith('60', {
-      message: '학번은 60으로 시작합니다',
-    }),
-    english: z.enum(['basic', 'level12', 'level34', 'bypass']),
-  })
-  .superRefine(({ confirmPassword, password }, ctx) => {
-    console.log('refind', confirmPassword, password);
-    if (confirmPassword !== password) {
-      ctx.addIssue({
-        code: 'custom',
-        message: 'The passwords did not match',
-        path: ['confirmPassword'],
-      });
-    }
-  });
-
-type User = z.infer<typeof SignUpFormSchema>;
-
-export async function createUser(prevState: FormState, formData: FormData): Promise<FormState> {
-  const validatedFields = SignUpFormSchema.safeParse({
-    userId: formData.get('userId'),
-    password: formData.get('password'),
-    confirmPassword: formData.get('confirmPassword'),
-    studentNumber: formData.get('studentNumber'),
-    english: formData.get('english'),
-  });
-
-  if (!validatedFields.success) {
-    return {
-      errors: validatedFields.error.flatten().fieldErrors,
-      message: 'error',
-    };
-  }
-
-  // Call the API to create a user
-  // but now mock the response
-  await new Promise((resolve) => {
-    setTimeout(() => {
-      resolve('');
-    }, 3000);
-  });
-
-  return {
-    errors: {},
-    message: 'blacnk',
-  };
-}
diff --git a/app/business/lecture/taken-lecture.query.ts b/app/business/lecture/taken-lecture.query.ts
index 906e3236..b671a2f7 100644
--- a/app/business/lecture/taken-lecture.query.ts
+++ b/app/business/lecture/taken-lecture.query.ts
@@ -1,7 +1,7 @@
 import { LectureInfo } from '@/app/type/lecture';
 import { API_PATH } from '../api-path';
 
-interface TakenLectures {
+export interface TakenLectures {
   totalCredit: number;
   takenLectures: LectureInfo[];
 }
diff --git a/app/business/user/user.command.ts b/app/business/user/user.command.ts
new file mode 100644
index 00000000..d56ee9fc
--- /dev/null
+++ b/app/business/user/user.command.ts
@@ -0,0 +1,69 @@
+'use server';
+
+import { FormState } from '@/app/ui/view/molecule/form/form-root';
+import { API_PATH } from '../api-path';
+import { SignUpRequestBody } from './user.type';
+import { httpErrorHandler } from '@/app/utils/http/http-error-handler';
+import { BadRequestError } from '@/app/utils/http/http-error';
+import { SignUpFormSchema } from './user.validation';
+
+export async function createUser(prevState: FormState, formData: FormData): Promise<FormState> {
+  const validatedFields = SignUpFormSchema.safeParse({
+    authId: formData.get('authId'),
+    password: formData.get('password'),
+    confirmPassword: formData.get('confirmPassword'),
+    studentNumber: formData.get('studentNumber'),
+    engLv: formData.get('engLv'),
+  });
+
+  if (!validatedFields.success) {
+    return {
+      isSuccess: false,
+      isFailure: true,
+      validationError: validatedFields.error.flatten().fieldErrors,
+      message: '양식에 맞춰 다시 입력해주세요.',
+    };
+  }
+
+  const { authId, password, studentNumber, engLv } = validatedFields.data;
+  const body: SignUpRequestBody = {
+    authId,
+    password,
+    studentNumber,
+    engLv,
+  };
+
+  try {
+    const response = await fetch(`${API_PATH.user}/sign-up`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(body),
+    });
+
+    const result = await response.json();
+
+    httpErrorHandler(response, result);
+  } catch (error) {
+    if (error instanceof BadRequestError) {
+      // 잘못된 요청 처리 로직
+      return {
+        isSuccess: false,
+        isFailure: true,
+        validationError: {},
+        message: error.message,
+      };
+    } else {
+      // 나머지 에러는 더 상위 수준에서 처리
+      throw error;
+    }
+  }
+
+  return {
+    isSuccess: true,
+    isFailure: false,
+    validationError: {},
+    message: '회원가입이 완료되었습니다.',
+  };
+}
diff --git a/app/business/user/user.type.ts b/app/business/user/user.type.ts
new file mode 100644
index 00000000..3bd86c27
--- /dev/null
+++ b/app/business/user/user.type.ts
@@ -0,0 +1,9 @@
+// https://stackoverflow.com/questions/76957592/error-only-async-functions-are-allowed-to-be-exported-in-a-use-server-file
+// server action 파일에서는 async function만 export 가능
+
+export interface SignUpRequestBody {
+  authId: string;
+  password: string;
+  studentNumber: string;
+  engLv: string;
+}
diff --git a/app/business/user/user.validation.ts b/app/business/user/user.validation.ts
new file mode 100644
index 00000000..a9939ebf
--- /dev/null
+++ b/app/business/user/user.validation.ts
@@ -0,0 +1,36 @@
+import { z } from 'zod';
+
+export const SignUpFormSchema = z
+  .object({
+    authId: z
+      .string()
+      .min(6, {
+        message: '아이디는 6자 이상 20자 이하여야 합니다.',
+      })
+      .max(20, {
+        message: 'User ID must be at most 20 characters',
+      }),
+    password: z
+      .string()
+      .min(8, { message: '비밀번호는 8자 이상이어야 합니다.' })
+      .regex(/^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/, {
+        message: '비밀번호는 문자, 숫자, 특수문자(!@#$%^&*)를 포함해야 합니다.',
+      })
+      .max(20, { message: '비밀번호는 20자 이하여야 합니다.' }),
+    confirmPassword: z.string(),
+    studentNumber: z.string().length(8, { message: '학번은 8자리여야 합니다.' }).startsWith('60', {
+      message: '학번은 60으로 시작해야 합니다.',
+    }),
+    engLv: z.enum(['basic', 'ENG12', 'ENG34', 'bypass'], {
+      invalid_type_error: '올바른 영어 레벨을 선택해주세요.',
+    }),
+  })
+  .superRefine(({ confirmPassword, password }, ctx) => {
+    if (confirmPassword !== password) {
+      ctx.addIssue({
+        code: 'custom',
+        message: '비밀번호가 일치하지 않습니다.',
+        path: ['confirmPassword'],
+      });
+    }
+  });
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index 381ca101..4a31401e 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -6,11 +6,7 @@ export default async function Page() {
   return (
     <main>
       <h1 className={'mb-4 text-xl md:text-2xl'}>Dashboard</h1>
-      <div className="mt-6">
-        <Suspense fallback={<RevenueChartSkeleton />}>
-          <RevenueChart />
-        </Suspense>
-      </div>
+      <div className="mt-6"></div>
     </main>
   );
 }
diff --git a/app/hooks/useFunnel.tsx b/app/hooks/useFunnel.tsx
new file mode 100644
index 00000000..68b76e59
--- /dev/null
+++ b/app/hooks/useFunnel.tsx
@@ -0,0 +1,57 @@
+import React, { useCallback, useEffect } from 'react';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+
+const DEFAULT_STEP_QUERY_KEY = 'funnel-step';
+
+export default function useFunnel<Steps extends string>(
+  defaultStep: Steps,
+  options?: {
+    stepQueryKey?: string;
+  },
+) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const stepQueryKey = options?.stepQueryKey ?? DEFAULT_STEP_QUERY_KEY;
+
+  const step = searchParams.get(stepQueryKey) as Steps | undefined;
+
+  const createUrl = useCallback(
+    (step: Steps) => {
+      const params = new URLSearchParams(searchParams.toString());
+      params.delete(stepQueryKey);
+      params.set(stepQueryKey, step);
+
+      return `${pathname}?${params.toString()}`;
+    },
+    [searchParams, stepQueryKey],
+  );
+
+  const setStep = useCallback(
+    (step: Steps) => {
+      router.push(createUrl(step));
+    },
+    [searchParams, createUrl],
+  );
+
+  useEffect(() => {
+    setStep(step ?? defaultStep);
+  }, [defaultStep, step, setStep]);
+
+  const Step = ({ name, children }: React.PropsWithChildren<{ name: Steps }>) => {
+    return <>{children}</>;
+  };
+
+  const FunnelRoot = ({ children }: React.PropsWithChildren) => {
+    const targetStep = React.Children.toArray(children).find((childStep) => {
+      return React.isValidElement(childStep) && childStep.props.name === step;
+    });
+
+    return <>{targetStep}</>;
+  };
+
+  const Funnel = Object.assign(FunnelRoot, { Step });
+
+  return { Funnel, setStep };
+}
diff --git a/app/mocks/browser.mock.ts b/app/mocks/browser.mock.ts
index 78b6a76b..0a564278 100644
--- a/app/mocks/browser.mock.ts
+++ b/app/mocks/browser.mock.ts
@@ -1,4 +1,4 @@
 import { setupWorker } from 'msw/browser';
-import { handlers } from './handlers.mock';
+import { handlers } from './handlers';
 
 export const worker = setupWorker(...handlers);
diff --git a/app/mocks/db.mock.ts b/app/mocks/db.mock.ts
new file mode 100644
index 00000000..1c7788b4
--- /dev/null
+++ b/app/mocks/db.mock.ts
@@ -0,0 +1,56 @@
+import { TakenLectures } from '../business/lecture/taken-lecture.query';
+import { SignUpRequestBody } from '../business/user/user.type';
+import { takenLectures } from './data.mock';
+
+interface MockUser {
+  authId: string;
+  password: string;
+  studentNumber: string;
+  engLv: string;
+  major?: string;
+}
+
+interface MockDatabaseState {
+  takenLectures: TakenLectures[];
+  users: MockUser[];
+}
+
+type MockDatabaseAction = {
+  getTakenLectures: () => TakenLectures[];
+  getUser: (authId: string) => MockUser | undefined;
+  createUser: (user: MockUser) => boolean;
+};
+
+export const mockDatabase: MockDatabaseAction = {
+  getTakenLectures: () => mockDatabaseStore.takenLectures,
+  getUser: (authId: string) => mockDatabaseStore.users.find((user) => user.authId === authId),
+  createUser: (user: SignUpRequestBody) => {
+    if (mockDatabaseStore.users.find((u) => u.authId === user.authId || u.studentNumber === user.studentNumber)) {
+      return false;
+    }
+    mockDatabaseStore.users = [...mockDatabaseStore.users, user];
+    return true;
+  },
+};
+
+const initialState: MockDatabaseState = {
+  takenLectures: [takenLectures],
+  users: [
+    {
+      authId: 'admin',
+      password: 'admin',
+      studentNumber: '60000000',
+      engLv: 'ENG12',
+    },
+  ],
+};
+
+function initStore(): MockDatabaseState {
+  return JSON.parse(JSON.stringify(initialState));
+}
+
+export let mockDatabaseStore = initStore();
+
+export const resetMockDB = () => {
+  mockDatabaseStore = initStore();
+};
diff --git a/app/mocks/handlers/index.ts b/app/mocks/handlers/index.ts
new file mode 100644
index 00000000..9c0a203a
--- /dev/null
+++ b/app/mocks/handlers/index.ts
@@ -0,0 +1,4 @@
+import { takenLectureHandlers } from './taken-lecture-handler.mock';
+import { userHandlers } from './user-handler.mock';
+
+export const handlers = [...userHandlers, ...takenLectureHandlers];
diff --git a/app/mocks/handlers.mock.ts b/app/mocks/handlers/taken-lecture-handler.mock.ts
similarity index 54%
rename from app/mocks/handlers.mock.ts
rename to app/mocks/handlers/taken-lecture-handler.mock.ts
index b4bd6cca..7cb6f787 100644
--- a/app/mocks/handlers.mock.ts
+++ b/app/mocks/handlers/taken-lecture-handler.mock.ts
@@ -1,14 +1,14 @@
 import { HttpResponse, http, delay } from 'msw';
-import { revenue, parsePDF, takenLectures } from './data.mock';
-import { API_PATH } from '../business/api-path';
+import { API_PATH } from '../../business/api-path';
+import { mockDatabase } from '../db.mock';
+import { parsePDF } from '../data.mock';
 
-export const handlers = [
-  http.get(API_PATH.revenue, async () => {
-    await delay(1000);
-    console.log(revenue);
-    return HttpResponse.json(revenue);
-  }),
+export const takenLectureHandlers = [
+  http.get(API_PATH.takenLectures, () => {
+    const takenLectures = mockDatabase.getTakenLectures();
 
+    return HttpResponse.json(takenLectures[0]);
+  }),
   http.post(API_PATH.parsePDFtoText, async () => {
     await delay(1000);
     console.log(parsePDF);
@@ -19,8 +19,4 @@ export const handlers = [
     await delay(1000);
     throw new HttpResponse(null, { status: 200 });
   }),
-
-  http.get(API_PATH.takenLectures, () => {
-    return HttpResponse.json(takenLectures);
-  }),
 ];
diff --git a/app/mocks/handlers/user-handler.mock.ts b/app/mocks/handlers/user-handler.mock.ts
new file mode 100644
index 00000000..c1e77efc
--- /dev/null
+++ b/app/mocks/handlers/user-handler.mock.ts
@@ -0,0 +1,19 @@
+import { HttpResponse, http, delay } from 'msw';
+import { API_PATH } from '../../business/api-path';
+import { mockDatabase } from '../db.mock';
+import { SignUpRequestBody } from '@/app/business/user/user.type';
+
+export const userHandlers = [
+  http.post<never, SignUpRequestBody, never>(`${API_PATH.user}/sign-up`, async ({ request }) => {
+    const userData = await request.json();
+
+    const isSuccess = mockDatabase.createUser(userData);
+    await delay(500);
+
+    if (!isSuccess) {
+      return HttpResponse.json({ status: 400, message: '이미 가입된 학번입니다.' }, { status: 400 });
+    }
+
+    return HttpResponse.json({ status: 200 });
+  }),
+];
diff --git a/app/mocks/http.ts b/app/mocks/http.ts
index a53a6704..5a2058ab 100644
--- a/app/mocks/http.ts
+++ b/app/mocks/http.ts
@@ -4,7 +4,7 @@
 
 import express from 'express';
 import { createMiddleware } from '@mswjs/http-middleware';
-import { handlers } from './handlers.mock';
+import { handlers } from './handlers';
 
 const app = express();
 const port = 9090;
diff --git a/app/mocks/server.mock.ts b/app/mocks/server.mock.ts
index bf4bd299..e52fee0a 100644
--- a/app/mocks/server.mock.ts
+++ b/app/mocks/server.mock.ts
@@ -1,4 +1,4 @@
 import { setupServer } from 'msw/node';
-import { handlers } from './handlers.mock';
+import { handlers } from './handlers';
 
 export const server = setupServer(...handlers);
diff --git a/app/ui/user/sign-up-form/sign-up-form.stories.tsx b/app/ui/user/sign-up-form/sign-up-form.stories.tsx
new file mode 100644
index 00000000..8b48d133
--- /dev/null
+++ b/app/ui/user/sign-up-form/sign-up-form.stories.tsx
@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import SignUpForm from './sign-up-form';
+
+import { userEvent, within, expect, fn, waitFor } from '@storybook/test';
+import { resetMockDB } from '@/app/mocks/db.mock';
+
+const meta = {
+  title: 'ui/user/SignUpForm',
+  component: SignUpForm,
+  args: {
+    onNext: fn(),
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-96">
+        <Story />
+      </div>
+    ),
+  ],
+} as Meta<typeof SignUpForm>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const SuccessSenario: Story = {
+  play: async ({ args, canvasElement, step }) => {
+    resetMockDB();
+    const canvas = within(canvasElement);
+
+    await step('사용자가 양식에 맞춰서 폼을 입력하면', async () => {
+      await userEvent.type(canvas.getByLabelText('아이디'), 'testtest');
+      await userEvent.type(canvas.getByLabelText('비밀번호'), 'test1234!');
+      await userEvent.type(canvas.getByLabelText('비밀번호 확인'), 'test1234!');
+      await userEvent.type(canvas.getByLabelText('학번'), '60000001');
+      await userEvent.selectOptions(canvas.getByLabelText('영어'), 'basic');
+
+      await userEvent.click(canvas.getByText('회원가입'));
+    });
+
+    await step('회원가입에 성공한다', async () => {
+      await waitFor(() => expect(args.onNext).toHaveBeenCalled());
+    });
+  },
+};
+
+export const FailureSenarioWithValidation: Story = {
+  play: async ({ args, canvasElement, step }) => {
+    resetMockDB();
+    const canvas = within(canvasElement);
+
+    await step('사용자가 양식에 맞춰서 폼을 입력하지 않으면', async () => {
+      await userEvent.type(canvas.getByLabelText('아이디'), 'test');
+      await userEvent.type(canvas.getByLabelText('비밀번호'), 'test1234');
+      await userEvent.type(canvas.getByLabelText('비밀번호 확인'), 'test1234!');
+      await userEvent.type(canvas.getByLabelText('학번'), '600000');
+      await userEvent.selectOptions(canvas.getByLabelText('영어'), 'basic');
+
+      await userEvent.click(canvas.getByText('회원가입'));
+    });
+
+    await step('유효성 검사에 실패한다.', async () => {
+      await waitFor(() => {
+        expect(args.onNext).not.toHaveBeenCalled();
+        expect(canvas.getByText('양식에 맞춰 다시 입력해주세요.')).toBeInTheDocument();
+        expect(canvas.getByText('아이디는 6자 이상 20자 이하여야 합니다.')).toBeInTheDocument();
+        expect(canvas.getByText('비밀번호는 문자, 숫자, 특수문자(!@#$%^&*)를 포함해야 합니다.')).toBeInTheDocument();
+        expect(canvas.getByText('비밀번호가 일치하지 않습니다.')).toBeInTheDocument();
+        expect(canvas.getByText('학번은 8자리여야 합니다.')).toBeInTheDocument();
+      });
+    });
+  },
+};
+
+export const FailureSenarioWithDuplicatedStudentNumber: Story = {
+  play: async ({ args, canvasElement, step }) => {
+    resetMockDB();
+    const canvas = within(canvasElement);
+
+    await step('사용자가 중복된 학번으로 회원가입을 시도하면', async () => {
+      await userEvent.type(canvas.getByLabelText('아이디'), 'testtest');
+      await userEvent.type(canvas.getByLabelText('비밀번호'), 'test1234!');
+      await userEvent.type(canvas.getByLabelText('비밀번호 확인'), 'test1234!');
+      await userEvent.type(canvas.getByLabelText('학번'), '60000000');
+      await userEvent.selectOptions(canvas.getByLabelText('영어'), 'basic');
+
+      await userEvent.click(canvas.getByText('회원가입'));
+    });
+
+    await step('회원가입에 실패한다.', async () => {
+      await waitFor(() => {
+        expect(args.onNext).not.toHaveBeenCalled();
+        expect(canvas.getByText('이미 가입된 학번입니다.')).toBeInTheDocument();
+      });
+    });
+  },
+};
diff --git a/app/ui/user/sign-up-form/sign-up-form.tsx b/app/ui/user/sign-up-form/sign-up-form.tsx
new file mode 100644
index 00000000..65cc4f4d
--- /dev/null
+++ b/app/ui/user/sign-up-form/sign-up-form.tsx
@@ -0,0 +1,36 @@
+'use client';
+import { createUser } from '@/app/business/user/user.command';
+import Form from '../../view/molecule/form';
+
+interface SignUpFormProps {
+  onNext?: () => void;
+}
+
+export default function SignUpForm({ onNext }: SignUpFormProps) {
+  return (
+    <Form onSuccess={onNext} action={createUser} id="회원가입">
+      <Form.TextInput required={true} label="아이디" id="authId" placeholder="6자 이상 20자 이하" />
+      <Form.PasswordInput
+        required={true}
+        label="비밀번호"
+        id="password"
+        placeholder="특수문자(!@#$%^&*), 문자, 숫자를 포함한 8자 이상 20자 이하"
+      />
+      <Form.PasswordInput required={true} label="비밀번호 확인" id="confirmPassword" placeholder="" />
+      <Form.NumberInput required={true} label="학번" id="studentNumber" placeholder="ex)60xxxxxx" />
+      <Form.Select
+        required={true}
+        label="영어"
+        id="engLv"
+        placeholder="선택하세요"
+        options={[
+          { value: 'basic', placeholder: '기초영어' },
+          { value: 'ENG12', placeholder: 'Level12' },
+          { value: 'ENG34', placeholder: 'Level34' },
+          { value: 'bypass', placeholder: '면제' },
+        ]}
+      />
+      <Form.SubmitButton label="회원가입" position="center" variant="secondary" />
+    </Form>
+  );
+}
diff --git a/app/ui/view/atom/alert.tsx b/app/ui/view/atom/alert.tsx
new file mode 100644
index 00000000..c35ccaa3
--- /dev/null
+++ b/app/ui/view/atom/alert.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/app/utils/shadcn/utils';
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border border-slate-200 px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-slate-950 [&>svg~*]:pl-7 dark:border-slate-800 dark:[&>svg]:text-slate-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-white text-slate-950 dark:bg-slate-950 dark:text-slate-50',
+        destructive:
+          'border-red-500/50 text-red-500 dark:border-red-500 [&>svg]:text-red-500 dark:border-red-900/50 dark:text-red-900 dark:dark:border-red-900 dark:[&>svg]:text-red-900',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+));
+Alert.displayName = 'Alert';
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5 ref={ref} className={cn('mb-1 font-medium leading-none tracking-tight', className)} {...props} />
+  ),
+);
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
+  ),
+);
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertTitle, AlertDescription };
diff --git a/app/ui/view/molecule/alert-destructive/alert-destructive.stories.tsx b/app/ui/view/molecule/alert-destructive/alert-destructive.stories.tsx
new file mode 100644
index 00000000..cbcc750e
--- /dev/null
+++ b/app/ui/view/molecule/alert-destructive/alert-destructive.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import AlertDestructive from './alert-destructive';
+
+const meta = {
+  title: 'ui/view/molecule/AlertDestructive',
+  component: AlertDestructive,
+} as Meta<typeof AlertDestructive>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    description: 'This is a destructive alert',
+  },
+};
+
+export const WithTitle: Story = {
+  args: {
+    title: 'Destructive alert',
+    description: 'This is a destructive alert',
+  },
+};
diff --git a/app/ui/view/molecule/alert-destructive/alert-destructive.tsx b/app/ui/view/molecule/alert-destructive/alert-destructive.tsx
new file mode 100644
index 00000000..c370d3b3
--- /dev/null
+++ b/app/ui/view/molecule/alert-destructive/alert-destructive.tsx
@@ -0,0 +1,17 @@
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+import { Alert, AlertTitle, AlertDescription } from '../../atom/alert';
+
+interface AlertDestructiveProps {
+  title?: string;
+  description: string;
+}
+
+export default function AlertDestructive({ title, description }: AlertDestructiveProps) {
+  return (
+    <Alert variant="destructive">
+      <ExclamationTriangleIcon className="h-4 w-4" />
+      <AlertTitle>{title}</AlertTitle>
+      <AlertDescription>{description}</AlertDescription>
+    </Alert>
+  );
+}
diff --git a/app/ui/view/molecule/form/form-root.tsx b/app/ui/view/molecule/form/form-root.tsx
index 18478df2..d578de16 100644
--- a/app/ui/view/molecule/form/form-root.tsx
+++ b/app/ui/view/molecule/form/form-root.tsx
@@ -1,12 +1,16 @@
-import React from 'react';
+'use client';
+import React, { useEffect } from 'react';
 import { useFormState } from 'react-dom';
 import { FormSubmitButton } from './form-submit-button';
 import { FormContext } from './form.context';
 import { filterChildrenByType } from '@/app/utils/component.util';
+import AlertDestructive from '../alert-destructive/alert-destructive';
 
 export interface FormState {
+  isSuccess: boolean;
+  isFailure: boolean;
   message: string | null;
-  errors: Record<string, string[] | undefined>;
+  validationError: Record<string, string[] | undefined>;
 }
 
 const getFormSubmitButton = (children: React.ReactNode) => {
@@ -15,13 +19,20 @@ const getFormSubmitButton = (children: React.ReactNode) => {
 
 interface FormRootProps {
   id: string;
+  onSuccess?: () => void;
   action: (prevState: FormState, formData: FormData) => Promise<FormState> | FormState;
 }
 
-export function FormRoot({ id, action, children }: React.PropsWithChildren<FormRootProps>) {
-  const initialState: FormState = { message: null, errors: {} };
+export function FormRoot({ id, action, onSuccess, children }: React.PropsWithChildren<FormRootProps>) {
+  const initialState: FormState = { isSuccess: false, isFailure: false, message: null, validationError: {} };
   const [formState, dispatch] = useFormState(action, initialState);
 
+  useEffect(() => {
+    if (formState.isSuccess) {
+      onSuccess?.();
+    }
+  }, [formState]);
+
   const formSubmitButton = getFormSubmitButton(children);
 
   const renderWithoutSubmitButton = () => {
@@ -37,7 +48,12 @@ export function FormRoot({ id, action, children }: React.PropsWithChildren<FormR
   };
 
   return (
-    <FormContext.Provider value={{ ...formState, formId: id }}>
+    <FormContext.Provider value={{ errors: formState.validationError, formId: id }}>
+      {formState.isFailure ? (
+        <div className="mb-4">
+          <AlertDestructive description={formState.message!} />
+        </div>
+      ) : null}
       <form id={id} action={dispatch}>
         {renderWithoutSubmitButton()}
         <div className="mt-8">{formSubmitButton}</div>
diff --git a/app/ui/view/molecule/form/form.context.ts b/app/ui/view/molecule/form/form.context.ts
index 707bf13b..e093a94d 100644
--- a/app/ui/view/molecule/form/form.context.ts
+++ b/app/ui/view/molecule/form/form.context.ts
@@ -1,12 +1,11 @@
 import { createContext } from 'react';
-import type { FormState } from './form-root';
 
-interface FormContext extends FormState {
+interface FormContext {
   formId: string;
+  errors: Record<string, string[] | undefined>;
 }
 
 export const FormContext = createContext<FormContext>({
   formId: '',
-  message: null,
   errors: {},
 });
diff --git a/app/ui/view/molecule/form/form.stories.tsx b/app/ui/view/molecule/form/form.stories.tsx
index cc6eadb0..aa002f7c 100644
--- a/app/ui/view/molecule/form/form.stories.tsx
+++ b/app/ui/view/molecule/form/form.stories.tsx
@@ -1,8 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import Form from '.';
-import { createUser } from '@/app/business/auth/user.command';
 import { userEvent, within } from '@storybook/testing-library';
+import { FormState } from './form-root';
+import { z } from 'zod';
 
 const meta = {
   title: 'ui/view/molecule/Form',
@@ -19,23 +20,86 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+const SignUpFormMockSchema = z
+  .object({
+    authId: z
+      .string()
+      .min(6, {
+        message: 'User ID must be at least 6 characters',
+      })
+      .max(20, {
+        message: 'User ID must be at most 20 characters',
+      }),
+    password: z.string().regex(/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!^%*#?&])[A-Za-z\d@$!^%*#?&]{8,}$/, {
+      message: 'Password must contain at least 8 characters, one letter, one number and one special character',
+    }),
+    confirmPassword: z.string(),
+    studentNumber: z.string().length(8, { message: '학번은 8자리 입니다' }).startsWith('60', {
+      message: '학번은 60으로 시작합니다',
+    }),
+    engLv: z.enum(['basic', 'level12', 'level34', 'bypass']),
+  })
+  .superRefine(({ confirmPassword, password }, ctx) => {
+    if (confirmPassword !== password) {
+      ctx.addIssue({
+        code: 'custom',
+        message: '비밀번호가 일치하지 않습니다.',
+        path: ['confirmPassword'],
+      });
+    }
+  });
+
+async function mockFormAction(prevState: FormState, formData: FormData): Promise<FormState> {
+  const validatedFields = SignUpFormMockSchema.safeParse({
+    authId: formData.get('authId'),
+    password: formData.get('password'),
+    confirmPassword: formData.get('confirmPassword'),
+    studentNumber: formData.get('studentNumber'),
+    engLv: formData.get('engLv'),
+  });
+
+  if (!validatedFields.success) {
+    return {
+      isSuccess: false,
+      isFailure: true,
+      validationError: validatedFields.error.flatten().fieldErrors,
+      message: 'error',
+    };
+  }
+
+  // Call the API to create a user
+  // but now mock the response
+  await new Promise((resolve) => {
+    setTimeout(() => {
+      resolve('');
+    }, 3000);
+  });
+
+  return {
+    isSuccess: false,
+    isFailure: true,
+    validationError: {},
+    message: '이미 존재하는 계정입니다.',
+  };
+}
+
 const SingUpFormTemplate: Story = {
   render: () => {
     return (
-      <Form action={createUser} id="회원가입">
-        <Form.TextInput required={true} label="아이디" id="userId" placeholder="6자 이상 20자 이하" />
+      <Form action={mockFormAction} id="회원가입">
+        <Form.TextInput required={true} label="아이디" id="authId" placeholder="6자 이상 20자 이하" />
         <Form.PasswordInput
           required={true}
           label="비밀번호"
           id="password"
-          placeholder="기호(!@#$%^&*)를 포함한 8자 이상 20자 이하"
+          placeholder="특수문자(!@#$%^&*), 문자, 숫자를 포함한 8자 이상 20자 이하"
         />
         <Form.PasswordInput required={true} label="비밀번호 확인" id="confirmPassword" placeholder="" />
         <Form.NumberInput required={true} label="학번" id="studentNumber" placeholder="ex)60xxxxxx" />
         <Form.Select
           required={true}
           label="영어"
-          id="english"
+          id="engLv"
           placeholder="선택하세요"
           options={[
             { value: 'basic', placeholder: '기초영어' },
@@ -54,7 +118,7 @@ export const SignUpForm: Story = {
   ...SingUpFormTemplate,
 };
 
-export const SignUpFormActionWithFailure: Story = {
+export const SignUpFormActionWithValidationError: Story = {
   ...SingUpFormTemplate,
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
@@ -101,7 +165,7 @@ export const SignUpFormActionWithFailure: Story = {
   },
 };
 
-export const SignUpFormActionWithSuccessPath: Story = {
+export const SignUpFormActionWithServerFailure: Story = {
   ...SingUpFormTemplate,
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
diff --git a/app/ui/view/molecule/select/select-root.tsx b/app/ui/view/molecule/select/select-root.tsx
index e2159b88..c896553e 100644
--- a/app/ui/view/molecule/select/select-root.tsx
+++ b/app/ui/view/molecule/select/select-root.tsx
@@ -67,7 +67,7 @@ export const SelectRoot = React.forwardRef<HTMLInputElement, SelectProps>(functi
           if (listboxButton) listboxButton.focus();
         }}
       >
-        <option className="hidden" value="" disabled hidden>
+        <option className="hidden" value="" hidden>
           {placeholder}
         </option>
         {childrenArray.map((child: any) => {
@@ -89,7 +89,6 @@ export const SelectRoot = React.forwardRef<HTMLInputElement, SelectProps>(functi
           setSelectedValue(value);
         }}
         disabled={disabled}
-        name={name}
         className="relative"
       >
         <Listbox.Button
diff --git a/app/utils/http/http-error-handler.ts b/app/utils/http/http-error-handler.ts
new file mode 100644
index 00000000..3a86eef4
--- /dev/null
+++ b/app/utils/http/http-error-handler.ts
@@ -0,0 +1,56 @@
+import { HttpStatusCode } from './http-status-code';
+import {
+  BadRequestError,
+  ForbiddenError,
+  HttpError,
+  NotFoundError,
+  UnauthorizedError,
+  InternetServerError,
+} from './http-error';
+
+export interface ErrorResponseData {
+  status: number;
+  message: string;
+}
+
+export const httpErrorHandler = (response: Response, result: ErrorResponseData) => {
+  if (!response.ok) {
+    const status = response.status;
+    const message = result.message;
+
+    switch (status) {
+      case HttpStatusCode.Unauthorized:
+        throw new UnauthorizedError({
+          message,
+          response,
+        });
+
+      case HttpStatusCode.BadRequest:
+        throw new BadRequestError({
+          message,
+          response,
+        });
+
+      case HttpStatusCode.Forbidden:
+        throw new ForbiddenError({
+          message,
+          response,
+        });
+
+      case HttpStatusCode.NotFound:
+        throw new NotFoundError({
+          message,
+          response,
+        });
+
+      case HttpStatusCode.InternalServerError:
+        throw new InternetServerError({
+          message,
+          response,
+        });
+
+      default:
+        throw new HttpError(status, message, response);
+    }
+  }
+};
diff --git a/app/utils/http/http-error.ts b/app/utils/http/http-error.ts
new file mode 100644
index 00000000..a605703a
--- /dev/null
+++ b/app/utils/http/http-error.ts
@@ -0,0 +1,65 @@
+type ErrorConstrutor = {
+  message?: string;
+  statusCode?: number;
+  response?: Response;
+};
+
+// Refactor: fetch가 NetworkError랑 TimeoutError 또 자동으로 에러로 던져서 처리가 더 애매하다.
+// export class NetworkError extends Error {
+//   constructor(readonly message = 'Network Error') {
+//     super(message);
+//     this.name = 'NetworkError';
+//   }
+// }
+
+// export class TimeoutError extends Error {
+//   constructor(readonly message = 'Timeout Error') {
+//     super(message);
+//     this.name = 'TimeoutError';
+//   }
+// }
+
+export class HttpError extends Error {
+  constructor(
+    readonly statusCode?: number,
+    message?: string,
+    readonly response?: Response,
+  ) {
+    super(message);
+  }
+}
+
+export class BadRequestError extends HttpError {
+  constructor({ message = 'Bad Request', statusCode = 400, response }: ErrorConstrutor) {
+    super(statusCode, message, response);
+    this.name = 'BadRequestError';
+  }
+}
+
+export class UnauthorizedError extends HttpError {
+  constructor({ message = 'Unauthorized', statusCode = 401, response }: ErrorConstrutor) {
+    super(statusCode, message, response);
+    this.name = 'UnauthorizedError';
+  }
+}
+
+export class ForbiddenError extends HttpError {
+  constructor({ message = 'Forbidden', statusCode = 403, response }: ErrorConstrutor) {
+    super(statusCode, message, response);
+    this.name = 'ForbiddenError';
+  }
+}
+
+export class NotFoundError extends HttpError {
+  constructor({ message = 'Not Found', statusCode = 404, response }: ErrorConstrutor) {
+    super(statusCode, message, response);
+    this.name = 'NotFoundError';
+  }
+}
+
+export class InternetServerError extends HttpError {
+  constructor({ message = 'Internal Server Error', statusCode = 500, response }: ErrorConstrutor) {
+    super(statusCode, message, response);
+    this.name = 'InternetServerError';
+  }
+}
diff --git a/app/utils/http/http-status-code.ts b/app/utils/http/http-status-code.ts
new file mode 100644
index 00000000..d0e95faa
--- /dev/null
+++ b/app/utils/http/http-status-code.ts
@@ -0,0 +1,65 @@
+export const HttpStatusCode = {
+  Continue: 100,
+  SwitchingProtocols: 101,
+  Processing: 102,
+  EarlyHints: 103,
+  Ok: 200,
+  Created: 201,
+  Accepted: 202,
+  NonAuthoritativeInformation: 203,
+  NoContent: 204,
+  ResetContent: 205,
+  PartialContent: 206,
+  MultiStatus: 207,
+  AlreadyReported: 208,
+  ImUsed: 226,
+  MultipleChoices: 300,
+  MovedPermanently: 301,
+  Found: 302,
+  SeeOther: 303,
+  NotModified: 304,
+  UseProxy: 305,
+  Unused: 306,
+  TemporaryRedirect: 307,
+  PermanentRedirect: 308,
+  BadRequest: 400,
+  Unauthorized: 401,
+  PaymentRequired: 402,
+  Forbidden: 403,
+  NotFound: 404,
+  MethodNotAllowed: 405,
+  NotAcceptable: 406,
+  ProxyAuthenticationRequired: 407,
+  RequestTimeout: 408,
+  Conflict: 409,
+  Gone: 410,
+  LengthRequired: 411,
+  PreconditionFailed: 412,
+  PayloadTooLarge: 413,
+  UriTooLong: 414,
+  UnsupportedMediaType: 415,
+  RangeNotSatisfiable: 416,
+  ExpectationFailed: 417,
+  ImATeapot: 418,
+  MisdirectedRequest: 421,
+  UnprocessableEntity: 422,
+  Locked: 423,
+  FailedDependency: 424,
+  TooEarly: 425,
+  UpgradeRequired: 426,
+  PreconditionRequired: 428,
+  TooManyRequests: 429,
+  RequestHeaderFieldsTooLarge: 431,
+  UnavailableForLegalReasons: 451,
+  InternalServerError: 500,
+  NotImplemented: 501,
+  BadGateway: 502,
+  ServiceUnavailable: 503,
+  GatewayTimeout: 504,
+  HttpVersionNotSupported: 505,
+  VariantAlsoNegotiates: 506,
+  InsufficientStorage: 507,
+  LoopDetected: 508,
+  NotExtended: 510,
+  NetworkAuthenticationRequired: 511,
+};
diff --git a/app/utils/test/app-router-context-provider-mock.tsx b/app/utils/test/app-router-context-provider-mock.tsx
new file mode 100644
index 00000000..373366ac
--- /dev/null
+++ b/app/utils/test/app-router-context-provider-mock.tsx
@@ -0,0 +1,24 @@
+// https://github.com/vercel/next.js/discussions/48937#discussioncomment-6395245
+import { AppRouterContext, AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
+import React from 'react';
+
+export type AppRouterContextProviderMockProps = {
+  router: Partial<AppRouterInstance>;
+  children: React.ReactNode;
+};
+
+export const AppRouterContextProviderMock = ({
+  router,
+  children,
+}: AppRouterContextProviderMockProps): React.ReactNode => {
+  const mockedRouter: AppRouterInstance = {
+    back: () => {},
+    forward: () => {},
+    push: () => {},
+    replace: () => {},
+    refresh: () => {},
+    prefetch: () => {},
+    ...router,
+  };
+  return <AppRouterContext.Provider value={mockedRouter}>{children}</AppRouterContext.Provider>;
+};
diff --git a/next.config.mjs b/next.config.mjs
index 4678774e..daef739e 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,4 +1,11 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  experimental: {
+    serverActions: {
+      // https://github.com/vercel/next.js/issues/58295
+      allowedOrigins: ['localhost:3000', 'ideal-waddle-5xwrj5ppjvxhvq7x-3000.app.github.dev'],
+    },
+  },
+};
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
index afbdf84f..97016eac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,6 +36,7 @@
         "@storybook/nextjs": "^7.6.15",
         "@storybook/react": "^7.6.15",
         "@storybook/test": "^7.6.15",
+        "@storybook/test-runner": "^0.17.0",
         "@storybook/testing-library": "^0.2.2",
         "@testing-library/jest-dom": "^6.4.2",
         "@testing-library/react": "^14.2.1",
@@ -57,6 +58,7 @@
         "jest-environment-jsdom": "^29.7.0",
         "lint-staged": "^15.2.2",
         "msw": "^2.1.7",
+        "msw-storybook-addon": "^2.0.0-beta.1",
         "postcss": "^8",
         "prettier": "3.2.5",
         "storybook": "^7.6.15",
@@ -2930,6 +2932,21 @@
       "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==",
       "dev": true
     },
+    "node_modules/@hapi/hoek": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
+      "integrity": "sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==",
+      "dev": true
+    },
+    "node_modules/@hapi/topo": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-5.1.0.tgz",
+      "integrity": "sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg==",
+      "dev": true,
+      "dependencies": {
+        "@hapi/hoek": "^9.0.0"
+      }
+    },
     "node_modules/@headlessui/react": {
       "version": "1.7.18",
       "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.18.tgz",
@@ -3211,6 +3228,18 @@
         }
       }
     },
+    "node_modules/@jest/create-cache-key-function": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/@jest/create-cache-key-function/-/create-cache-key-function-29.7.0.tgz",
+      "integrity": "sha512-4QqS3LY5PBmTRHj9sAg1HLoPzqAI0uOX6wI/TRqHIcOxlFidy6YEmCQJk6FSZjNLGCeubDMfmkWL+qaLKhSGQA==",
+      "dev": true,
+      "dependencies": {
+        "@jest/types": "^29.6.3"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
     "node_modules/@jest/environment": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-29.7.0.tgz",
@@ -4700,6 +4729,27 @@
       "integrity": "sha512-RbhOOTCNoCrbfkRyoXODZp75MlpiHMgbE5MEBZAnnnLyQNgrigEj4p0lzsMDyc1zVsJDLrivB58tgg3emX0eEA==",
       "dev": true
     },
+    "node_modules/@sideway/address": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz",
+      "integrity": "sha512-IqO/DUQHUkPeixNQ8n0JA6102hT9CmaljNTPmQ1u8MEhBo/R4Q8eKLN/vGZxuebwOroDB4cbpjheD4+/sKFK4Q==",
+      "dev": true,
+      "dependencies": {
+        "@hapi/hoek": "^9.0.0"
+      }
+    },
+    "node_modules/@sideway/formula": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@sideway/formula/-/formula-3.0.1.tgz",
+      "integrity": "sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg==",
+      "dev": true
+    },
+    "node_modules/@sideway/pinpoint": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz",
+      "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==",
+      "dev": true
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.27.8",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
@@ -6366,6 +6416,217 @@
         "url": "https://opencollective.com/storybook"
       }
     },
+    "node_modules/@storybook/test-runner": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@storybook/test-runner/-/test-runner-0.17.0.tgz",
+      "integrity": "sha512-4mt822j0VF1H/c0//OWSST9eWV0wboncJUQ+hBm5N4wmyuObvwsiMh4pmgXw8Y82wF7g1RIofjEQqAGLa7NjgQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.22.5",
+        "@babel/generator": "^7.22.5",
+        "@babel/template": "^7.22.5",
+        "@babel/types": "^7.22.5",
+        "@jest/types": "^29.6.3",
+        "@storybook/core-common": "^8.0.0",
+        "@storybook/csf": "^0.1.2",
+        "@storybook/csf-tools": "^8.0.0",
+        "@storybook/preview-api": "^8.0.0",
+        "@swc/core": "^1.3.18",
+        "@swc/jest": "^0.2.23",
+        "expect-playwright": "^0.8.0",
+        "jest": "^29.6.4",
+        "jest-circus": "^29.6.4",
+        "jest-environment-node": "^29.6.4",
+        "jest-junit": "^16.0.0",
+        "jest-playwright-preset": "^4.0.0",
+        "jest-runner": "^29.6.4",
+        "jest-serializer-html": "^7.1.0",
+        "jest-watch-typeahead": "^2.0.0",
+        "playwright": "^1.14.0"
+      },
+      "bin": {
+        "test-storybook": "dist/test-storybook.js"
+      },
+      "engines": {
+        "node": "^16.10.0 || ^18.0.0 || >=20.0.0"
+      }
+    },
+    "node_modules/@storybook/test-runner/node_modules/@storybook/channels": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-8.0.0.tgz",
+      "integrity": "sha512-uykCBlSIMVodsgTFC/XAgO7JeaTJrKtDmmM6Z4liGkPS6EUvurOEu2vK6FuvojzhLHdVJ5bP+VXSJerfm7aE4Q==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "8.0.0",
+        "@storybook/core-events": "8.0.0",
+        "@storybook/global": "^5.0.0",
+        "telejson": "^7.2.0",
+        "tiny-invariant": "^1.3.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/test-runner/node_modules/@storybook/client-logger": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-8.0.0.tgz",
+      "integrity": "sha512-olc1vUfaZNkXc7L8UoCdGmyBieHQbsaB+0vVoivYMSa1DHYtXE75RefU3lhMSGrkvIZmXMvfaIDmnyJIOB5FxA==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/global": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/test-runner/node_modules/@storybook/core-common": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-8.0.0.tgz",
+      "integrity": "sha512-fqlQYw5/PDW/oj34QwU5u0HkNLPgELfszsvLFsUcwI7uAzwb/WC2WdPvncT7qRPNcSZLXKJcA8QAqKL4t4I8bg==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/core-events": "8.0.0",
+        "@storybook/csf-tools": "8.0.0",
+        "@storybook/node-logger": "8.0.0",
+        "@storybook/types": "8.0.0",
+        "@yarnpkg/fslib": "2.10.3",
+        "@yarnpkg/libzip": "2.3.0",
+        "chalk": "^4.1.0",
+        "cross-spawn": "^7.0.3",
+        "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0",
+        "esbuild-register": "^3.5.0",
+        "execa": "^5.0.0",
+        "file-system-cache": "2.3.0",
+        "find-cache-dir": "^3.0.0",
+        "find-up": "^5.0.0",
+        "fs-extra": "^11.1.0",
+        "glob": "^10.0.0",
+        "handlebars": "^4.7.7",
+        "lazy-universal-dotenv": "^4.0.0",
+        "node-fetch": "^2.0.0",
+        "picomatch": "^2.3.0",
+        "pkg-dir": "^5.0.0",
+        "pretty-hrtime": "^1.0.3",
+        "resolve-from": "^5.0.0",
+        "semver": "^7.3.7",
+        "tempy": "^1.0.1",
+        "tiny-invariant": "^1.3.1",
+        "ts-dedent": "^2.0.0",
+        "util": "^0.12.4"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/test-runner/node_modules/@storybook/core-events": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-8.0.0.tgz",
+      "integrity": "sha512-kkabj4V99gOTBW+y3HM/LTCDekglqb+lslZMamM+Ytxv1lCqCEOIR/OGfnYOyEaK4BLcx61Zp+fO30FZxtoT1w==",
+      "dev": true,
+      "dependencies": {
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/test-runner/node_modules/@storybook/csf-tools": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-8.0.0.tgz",
+      "integrity": "sha512-VIMaZJiGM2NVzlgxaOyaVlH1pw/VSrJygDqOZyANh/kl4KHA+6xIqOkZC+X0+5K295dTFx2nR6S3btTjwT/Wrg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/generator": "^7.23.0",
+        "@babel/parser": "^7.23.0",
+        "@babel/traverse": "^7.23.2",
+        "@babel/types": "^7.23.0",
+        "@storybook/csf": "^0.1.2",
+        "@storybook/types": "8.0.0",
+        "fs-extra": "^11.1.0",
+        "recast": "^0.23.5",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/test-runner/node_modules/@storybook/node-logger": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-8.0.0.tgz",
+      "integrity": "sha512-C/sMNQqCIYVtJaLpe92RSkPgW3GXcWp6QeH5+glfP42kh+G9axxnEJJ996tyAnNQRzUuI+Eh+B7ytPZU1/WseQ==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/test-runner/node_modules/@storybook/preview-api": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.0.0.tgz",
+      "integrity": "sha512-R2NBKtvHi+i1b/3PZe4u4YdJ7dlqr8YTqLn7syB/YSnKRAa7DYed+GJLu4qFJisE6IuYi+57AsdW16otRFEVvg==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/channels": "8.0.0",
+        "@storybook/client-logger": "8.0.0",
+        "@storybook/core-events": "8.0.0",
+        "@storybook/csf": "^0.1.2",
+        "@storybook/global": "^5.0.0",
+        "@storybook/types": "8.0.0",
+        "@types/qs": "^6.9.5",
+        "dequal": "^2.0.2",
+        "lodash": "^4.17.21",
+        "memoizerific": "^1.11.3",
+        "qs": "^6.10.0",
+        "tiny-invariant": "^1.3.1",
+        "ts-dedent": "^2.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/test-runner/node_modules/@storybook/types": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-8.0.0.tgz",
+      "integrity": "sha512-6nJipdgoAkVFk2JpRPCm9vb/Yuak2lmdZRv9qzl8cNRttlbOESVlzbmhgxCmWV0OYUaMeYge9L8NWhJ14LKbzw==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/channels": "8.0.0",
+        "@types/express": "^4.7.0",
+        "file-system-cache": "2.3.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/test-runner/node_modules/pkg-dir": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-5.0.0.tgz",
+      "integrity": "sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==",
+      "dev": true,
+      "dependencies": {
+        "find-up": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@storybook/test-runner/node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/@storybook/test/node_modules/@testing-library/user-event": {
       "version": "14.3.0",
       "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.3.0.tgz",
@@ -6638,6 +6899,23 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@swc/jest": {
+      "version": "0.2.36",
+      "resolved": "https://registry.npmjs.org/@swc/jest/-/jest-0.2.36.tgz",
+      "integrity": "sha512-8X80dp81ugxs4a11z1ka43FPhP+/e+mJNXJSxiNYk8gIX/jPBtY4gQTrKu/KIoco8bzKuPI5lUxjfLiGsfvnlw==",
+      "dev": true,
+      "dependencies": {
+        "@jest/create-cache-key-function": "^29.7.0",
+        "@swc/counter": "^0.1.3",
+        "jsonc-parser": "^3.2.0"
+      },
+      "engines": {
+        "npm": ">= 7.0.0"
+      },
+      "peerDependencies": {
+        "@swc/core": "*"
+      }
+    },
     "node_modules/@swc/types": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.5.tgz",
@@ -7274,6 +7552,15 @@
       "integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==",
       "dev": true
     },
+    "node_modules/@types/wait-on": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/@types/wait-on/-/wait-on-5.3.4.tgz",
+      "integrity": "sha512-EBsPjFMrFlMbbUFf9D1Fp+PAB2TwmUn7a3YtHyD9RLuTIk1jDd8SxXVAoez2Ciy+8Jsceo2MYEYZzJ/DvorOKw==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/yargs": {
       "version": "17.0.32",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
@@ -8094,6 +8381,24 @@
       "integrity": "sha512-jlpIfsOoNoafl92Sz//64uQHGSyMrD2vYG5d8o2a4qGvyNCvXur7bzIsWtAC/6flI2RYAp3kv8rsfBtaLm7w0g==",
       "dev": true
     },
+    "node_modules/append-transform": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/append-transform/-/append-transform-2.0.0.tgz",
+      "integrity": "sha512-7yeyCEurROLQJFv5Xj4lEGTy0borxepjFv1g22oAdqFu//SrAlDl1O1Nxx15SH1RoliUml6p8dwJW9jvZughhg==",
+      "dev": true,
+      "dependencies": {
+        "default-require-extensions": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/archy": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz",
+      "integrity": "sha512-Xg+9RwCg/0p32teKdGMPTPnVXKD0w3DfHnFTficozsAgsvq2XenPJq/MYpzzQ/v8zrOyJn6Ds39VA4JIDwFfqw==",
+      "dev": true
+    },
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -8426,6 +8731,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+      "dev": true,
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -9203,6 +9519,63 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/caching-transform": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/caching-transform/-/caching-transform-4.0.0.tgz",
+      "integrity": "sha512-kpqOvwXnjjN44D89K5ccQC+RUrsy7jB/XLlRrx0D7/2HNcTPqzsb6XgYoErwko6QsV184CA2YgS1fxDiiDZMWA==",
+      "dev": true,
+      "dependencies": {
+        "hasha": "^5.0.0",
+        "make-dir": "^3.0.0",
+        "package-hash": "^4.0.0",
+        "write-file-atomic": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/caching-transform/node_modules/make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "dev": true,
+      "dependencies": {
+        "semver": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/caching-transform/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/caching-transform/node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "dev": true
+    },
+    "node_modules/caching-transform/node_modules/write-file-atomic": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
+      "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
+      "dev": true,
+      "dependencies": {
+        "imurmurhash": "^0.1.4",
+        "is-typedarray": "^1.0.0",
+        "signal-exit": "^3.0.2",
+        "typedarray-to-buffer": "^3.1.5"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.6.tgz",
@@ -10331,6 +10704,19 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "devOptional": true
     },
+    "node_modules/cwd": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/cwd/-/cwd-0.10.0.tgz",
+      "integrity": "sha512-YGZxdTTL9lmLkCUTpg4j0zQ7IhRB5ZmqNBbGCl3Tg6MP/d5/6sY7L5mmTjzbc6JKgVZYiqTQTNhPFsbXNGlRaA==",
+      "dev": true,
+      "dependencies": {
+        "find-pkg": "^0.1.2",
+        "fs-exists-sync": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -10384,6 +10770,15 @@
         }
       }
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/decimal.js": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
@@ -10503,6 +10898,30 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/default-require-extensions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/default-require-extensions/-/default-require-extensions-3.0.1.tgz",
+      "integrity": "sha512-eXTJmRbm2TIt9MgWTsOH1wEuhew6XGZcMeGKCtLedIg/NCsg1iBePXkceTdK4Fii7pzmN9tGsZhKzZ4h7O/fxw==",
+      "dev": true,
+      "dependencies": {
+        "strip-bom": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/default-require-extensions/node_modules/strip-bom": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
+      "integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/defaults": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
@@ -10708,6 +11127,91 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/diffable-html": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/diffable-html/-/diffable-html-4.1.0.tgz",
+      "integrity": "sha512-++kyNek+YBLH8cLXS+iTj/Hiy2s5qkRJEJ8kgu/WHbFrVY2vz9xPFUT+fii2zGF0m1CaojDlQJjkfrCt7YWM1g==",
+      "dev": true,
+      "dependencies": {
+        "htmlparser2": "^3.9.2"
+      }
+    },
+    "node_modules/diffable-html/node_modules/dom-serializer": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
+      "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "entities": "^2.0.0"
+      }
+    },
+    "node_modules/diffable-html/node_modules/dom-serializer/node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/diffable-html/node_modules/dom-serializer/node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/diffable-html/node_modules/domelementtype": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
+      "dev": true
+    },
+    "node_modules/diffable-html/node_modules/domhandler": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
+      "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "1"
+      }
+    },
+    "node_modules/diffable-html/node_modules/domutils": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
+      "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
+      "dev": true,
+      "dependencies": {
+        "dom-serializer": "0",
+        "domelementtype": "1"
+      }
+    },
+    "node_modules/diffable-html/node_modules/entities": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
+      "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==",
+      "dev": true
+    },
+    "node_modules/diffable-html/node_modules/htmlparser2": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
+      "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^1.3.1",
+        "domhandler": "^2.3.0",
+        "domutils": "^1.5.1",
+        "entities": "^1.1.1",
+        "inherits": "^2.0.1",
+        "readable-stream": "^3.1.1"
+      }
+    },
     "node_modules/diffie-hellman": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
@@ -11263,6 +11767,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es6-error": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
+      "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==",
+      "dev": true
+    },
     "node_modules/esbuild": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
@@ -11903,6 +12413,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/expand-tilde": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-1.2.2.tgz",
+      "integrity": "sha512-rtmc+cjLZqnu9dSYosX9EWmSJhTwpACgJQTfj4hgg2JjOD/6SIQalZrt4a3aQeh++oNxkazcaxrhPUj6+g5G/Q==",
+      "dev": true,
+      "dependencies": {
+        "os-homedir": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/expect": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/expect/-/expect-29.7.0.tgz",
@@ -11919,6 +12441,12 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/expect-playwright": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/expect-playwright/-/expect-playwright-0.8.0.tgz",
+      "integrity": "sha512-+kn8561vHAY+dt+0gMqqj1oY+g5xWrsuGMk4QGxotT2WS545nVqqjs37z6hrYfIuucwqthzwJfCJUEYqixyljg==",
+      "dev": true
+    },
     "node_modules/express": {
       "version": "4.18.2",
       "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
@@ -12303,6 +12831,54 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/find-file-up": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/find-file-up/-/find-file-up-0.1.3.tgz",
+      "integrity": "sha512-mBxmNbVyjg1LQIIpgO8hN+ybWBgDQK8qjht+EbrTCGmmPV/sc7RF1i9stPTD6bpvXZywBdrwRYxhSdJv867L6A==",
+      "dev": true,
+      "dependencies": {
+        "fs-exists-sync": "^0.1.0",
+        "resolve-dir": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/find-pkg": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/find-pkg/-/find-pkg-0.1.2.tgz",
+      "integrity": "sha512-0rnQWcFwZr7eO0513HahrWafsc3CTFioEB7DRiEYCUM/70QXSY8f3mCST17HXLcPvEhzH/Ty/Bxd72ZZsr/yvw==",
+      "dev": true,
+      "dependencies": {
+        "find-file-up": "^0.1.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/find-process": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmjs.org/find-process/-/find-process-1.4.7.tgz",
+      "integrity": "sha512-/U4CYp1214Xrp3u3Fqr9yNynUrr5Le4y0SsJh2lMDDSbpwYSz3M2SMWQC+wqcx79cN8PQtHQIL8KnuY9M66fdg==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "commander": "^5.1.0",
+        "debug": "^4.1.1"
+      },
+      "bin": {
+        "find-process": "bin/find-process.js"
+      }
+    },
+    "node_modules/find-process/node_modules/commander": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+      "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -12348,6 +12924,26 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -12466,12 +13062,41 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/fromentries": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/fromentries/-/fromentries-1.3.2.tgz",
+      "integrity": "sha512-cHEpEQHUg0f8XdtZCc2ZAhrHzKzT0MrFUTcvx+hfxYu7rGMDc5SKoXFh+n4YigxsHXRzc6OrCshdR1bWH6HHyg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/fs-constants": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
       "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
       "dev": true
     },
+    "node_modules/fs-exists-sync": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz",
+      "integrity": "sha512-cR/vflFyPZtrN6b38ZyWxpWdhlXrzZEBawlpBQMq7033xVY7/kg0GDMBK5jg8lDYQckdJ5x/YC88lM3C7VMsLg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/fs-extra": {
       "version": "11.2.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
@@ -12531,6 +13156,19 @@
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
       "dev": true
     },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -12792,6 +13430,46 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/global-modules": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-0.2.3.tgz",
+      "integrity": "sha512-JeXuCbvYzYXcwE6acL9V2bAOeSIGl4dD+iwLY9iUx2VBJJ80R18HCn+JCwHM9Oegdfya3lEkGCdaRkSyc10hDA==",
+      "dev": true,
+      "dependencies": {
+        "global-prefix": "^0.1.4",
+        "is-windows": "^0.2.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/global-prefix": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-0.1.5.tgz",
+      "integrity": "sha512-gOPiyxcD9dJGCEArAhF4Hd0BAqvAe/JzERP7tYumE4yIkmIedPUVXcJFWbV3/p/ovIIvKjkrTk+f1UVkq7vvbw==",
+      "dev": true,
+      "dependencies": {
+        "homedir-polyfill": "^1.0.0",
+        "ini": "^1.3.4",
+        "is-windows": "^0.2.0",
+        "which": "^1.2.12"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/global-prefix/node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
     "node_modules/globals": {
       "version": "13.24.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
@@ -13014,6 +13692,31 @@
         "minimalistic-assert": "^1.0.1"
       }
     },
+    "node_modules/hasha": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/hasha/-/hasha-5.2.2.tgz",
+      "integrity": "sha512-Hrp5vIK/xr5SkeN2onO32H0MgNZ0f17HRNH39WfL0SYUNOTZ5Lz1TJ8Pajo/87dYGEFlLMm7mIc/k/s6Bvz9HQ==",
+      "dev": true,
+      "dependencies": {
+        "is-stream": "^2.0.0",
+        "type-fest": "^0.8.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/hasha/node_modules/type-fest": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/hasown": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.1.tgz",
@@ -13050,6 +13753,18 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "node_modules/homedir-polyfill": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
+      "integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==",
+      "dev": true,
+      "dependencies": {
+        "parse-passwd": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/hosted-git-info": {
       "version": "2.8.9",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@@ -13928,6 +14643,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
+      "dev": true
+    },
     "node_modules/is-unicode-supported": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
@@ -13973,6 +14694,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-windows": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-0.2.0.tgz",
+      "integrity": "sha512-n67eJYmXbniZB7RF4I/FTjK1s6RPOCTxhYrVYLRaCt3lF0mpWZPKr3T2LSZAqyjQsxR2qMmGYXXzK0YWwcPM1Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-wsl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -14014,6 +14744,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/istanbul-lib-hook": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-hook/-/istanbul-lib-hook-3.0.0.tgz",
+      "integrity": "sha512-Pt/uge1Q9s+5VAZ+pCo16TYMWPBIl+oaNIjgLQxcX0itS6ueeaA+pEfThZpH8WxhFgCiEb8sAJY6MdUKgiIWaQ==",
+      "dev": true,
+      "dependencies": {
+        "append-transform": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/istanbul-lib-instrument": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-6.0.1.tgz",
@@ -14030,6 +14772,44 @@
         "node": ">=10"
       }
     },
+    "node_modules/istanbul-lib-processinfo": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-processinfo/-/istanbul-lib-processinfo-2.0.3.tgz",
+      "integrity": "sha512-NkwHbo3E00oybX6NGJi6ar0B29vxyvNwoC7eJ4G4Yq28UfY758Hgn/heV8VRFhevPED4LXfFz0DQ8z/0kw9zMg==",
+      "dev": true,
+      "dependencies": {
+        "archy": "^1.0.0",
+        "cross-spawn": "^7.0.3",
+        "istanbul-lib-coverage": "^3.2.0",
+        "p-map": "^3.0.0",
+        "rimraf": "^3.0.0",
+        "uuid": "^8.3.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-processinfo/node_modules/p-map": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-3.0.0.tgz",
+      "integrity": "sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==",
+      "dev": true,
+      "dependencies": {
+        "aggregate-error": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-processinfo/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/istanbul-lib-report": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz",
@@ -14409,7 +15189,43 @@
         "fsevents": "^2.3.2"
       }
     },
-    "node_modules/jest-leak-detector": {
+    "node_modules/jest-junit": {
+      "version": "16.0.0",
+      "resolved": "https://registry.npmjs.org/jest-junit/-/jest-junit-16.0.0.tgz",
+      "integrity": "sha512-A94mmw6NfJab4Fg/BlvVOUXzXgF0XIH6EmTgJ5NDPp4xoKq0Kr7sErb+4Xs9nZvu58pJojz5RFGpqnZYJTrRfQ==",
+      "dev": true,
+      "dependencies": {
+        "mkdirp": "^1.0.4",
+        "strip-ansi": "^6.0.1",
+        "uuid": "^8.3.2",
+        "xml": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=10.12.0"
+      }
+    },
+    "node_modules/jest-junit/node_modules/mkdirp": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+      "dev": true,
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jest-junit/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/jest-leak-detector": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-29.7.0.tgz",
       "integrity": "sha512-kYA8IJcSYtST2BY9I+SMC32nDpBT3J2NvWJx8+JCuCdl/CR1I4EKUJROiP8XtCcxqgTTBGJNdbB1A8XRKbTetw==",
@@ -14471,6 +15287,35 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/jest-playwright-preset": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jest-playwright-preset/-/jest-playwright-preset-4.0.0.tgz",
+      "integrity": "sha512-+dGZ1X2KqtwXaabVjTGxy0a3VzYfvYsWaRcuO8vMhyclHSOpGSI1+5cmlqzzCwQ3+fv0EjkTc7I5aV9lo08dYw==",
+      "dev": true,
+      "dependencies": {
+        "expect-playwright": "^0.8.0",
+        "jest-process-manager": "^0.4.0",
+        "nyc": "^15.1.0",
+        "playwright-core": ">=1.2.0",
+        "rimraf": "^3.0.2",
+        "uuid": "^8.3.2"
+      },
+      "peerDependencies": {
+        "jest": "^29.3.1",
+        "jest-circus": "^29.3.1",
+        "jest-environment-node": "^29.3.1",
+        "jest-runner": "^29.3.1"
+      }
+    },
+    "node_modules/jest-playwright-preset/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/jest-pnp-resolver": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz",
@@ -14488,6 +15333,30 @@
         }
       }
     },
+    "node_modules/jest-process-manager": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/jest-process-manager/-/jest-process-manager-0.4.0.tgz",
+      "integrity": "sha512-80Y6snDyb0p8GG83pDxGI/kQzwVTkCxc7ep5FPe/F6JYdvRDhwr6RzRmPSP7SEwuLhxo80lBS/NqOdUIbHIfhw==",
+      "dev": true,
+      "dependencies": {
+        "@types/wait-on": "^5.2.0",
+        "chalk": "^4.1.0",
+        "cwd": "^0.10.0",
+        "exit": "^0.1.2",
+        "find-process": "^1.4.4",
+        "prompts": "^2.4.1",
+        "signal-exit": "^3.0.3",
+        "spawnd": "^5.0.0",
+        "tree-kill": "^1.2.2",
+        "wait-on": "^7.0.0"
+      }
+    },
+    "node_modules/jest-process-manager/node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "dev": true
+    },
     "node_modules/jest-regex-util": {
       "version": "29.6.3",
       "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-29.6.3.tgz",
@@ -14624,6 +15493,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/jest-serializer-html": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/jest-serializer-html/-/jest-serializer-html-7.1.0.tgz",
+      "integrity": "sha512-xYL2qC7kmoYHJo8MYqJkzrl/Fdlx+fat4U1AqYg+kafqwcKPiMkOcjWHPKhueuNEgr+uemhGc+jqXYiwCyRyLA==",
+      "dev": true,
+      "dependencies": {
+        "diffable-html": "^4.1.0"
+      }
+    },
     "node_modules/jest-snapshot": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-29.7.0.tgz",
@@ -14701,6 +15579,130 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/jest-watch-typeahead": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/jest-watch-typeahead/-/jest-watch-typeahead-2.2.2.tgz",
+      "integrity": "sha512-+QgOFW4o5Xlgd6jGS5X37i08tuuXNW8X0CV9WNFi+3n8ExCIP+E1melYhvYLjv5fE6D0yyzk74vsSO8I6GqtvQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-escapes": "^6.0.0",
+        "chalk": "^5.2.0",
+        "jest-regex-util": "^29.0.0",
+        "jest-watcher": "^29.0.0",
+        "slash": "^5.0.0",
+        "string-length": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.10.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "jest": "^27.0.0 || ^28.0.0 || ^29.0.0"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/ansi-escapes": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-6.2.0.tgz",
+      "integrity": "sha512-kzRaCqXnpzWs+3z5ABPQiVke+iq0KXkHo8xiWV4RPTi5Yli0l97BEQuhXV1s7+aSU/fu1kUuxgS4MsQ0fRuygw==",
+      "dev": true,
+      "dependencies": {
+        "type-fest": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/chalk": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+      "dev": true,
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/char-regex": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-2.0.1.tgz",
+      "integrity": "sha512-oSvEeo6ZUD7NepqAat3RqoucZ5SeqLJgOvVIwkafu6IP3V0pO38s/ypdVUmDDK6qIIHNlYHJAKX9E7R7HoKElw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.20"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/slash": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
+      "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/string-length": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/string-length/-/string-length-5.0.1.tgz",
+      "integrity": "sha512-9Ep08KAMUn0OadnVaBuRdE2l615CQ508kr0XMadjClfYpdCyvrbFp6Taebo8yyxokQ4viUd/xPPUA4FGgUa0ow==",
+      "dev": true,
+      "dependencies": {
+        "char-regex": "^2.0.0",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/type-fest": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz",
+      "integrity": "sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/jest-watcher": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-29.7.0.tgz",
@@ -14758,6 +15760,19 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/joi": {
+      "version": "17.12.2",
+      "resolved": "https://registry.npmjs.org/joi/-/joi-17.12.2.tgz",
+      "integrity": "sha512-RonXAIzCiHLc8ss3Ibuz45u28GOsWE1UpfDXLbN/9NKbL4tCJf8TWYVKsoYuuh+sAUt7fsSNpA+r2+TBA6Wjmw==",
+      "dev": true,
+      "dependencies": {
+        "@hapi/hoek": "^9.3.0",
+        "@hapi/topo": "^5.1.0",
+        "@sideway/address": "^4.1.5",
+        "@sideway/formula": "^3.0.1",
+        "@sideway/pinpoint": "^2.0.0"
+      }
+    },
     "node_modules/jotai": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/jotai/-/jotai-2.7.0.tgz",
@@ -14944,6 +15959,12 @@
         "json5": "lib/cli.js"
       }
     },
+    "node_modules/jsonc-parser": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.1.tgz",
+      "integrity": "sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA==",
+      "dev": true
+    },
     "node_modules/jsonfile": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
@@ -15402,6 +16423,12 @@
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
       "dev": true
     },
+    "node_modules/lodash.flattendeep": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz",
+      "integrity": "sha512-uHaJFihxmJcEX3kT4I23ABqKKalJ/zDrDg0lsFtc1h+3uw49SIJ5beyhx5ExVRti3AvKoOJngIj7xz3oylPdWQ==",
+      "dev": true
+    },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -16050,6 +17077,18 @@
         }
       }
     },
+    "node_modules/msw-storybook-addon": {
+      "version": "2.0.0-beta.1",
+      "resolved": "https://registry.npmjs.org/msw-storybook-addon/-/msw-storybook-addon-2.0.0-beta.1.tgz",
+      "integrity": "sha512-DRyIAMK3waEfC+pKTyiIq68OZfiZ4WZGUVAn6J4YwCRpDdoCvLzzoC2spN0Jgegx4dEmJ7589ATnS14NxqeBig==",
+      "dev": true,
+      "dependencies": {
+        "is-node-process": "^1.0.1"
+      },
+      "peerDependencies": {
+        "msw": "^2.0.0"
+      }
+    },
     "node_modules/msw/node_modules/type-fest": {
       "version": "4.10.2",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.10.2.tgz",
@@ -16382,6 +17421,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/node-preload": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/node-preload/-/node-preload-0.2.1.tgz",
+      "integrity": "sha512-RM5oyBy45cLEoHqCeh+MNuFAxO0vTFBLskvQbOKnEE7YTTSN4tbN8QWDIPQ6L+WvKsB/qLEGpYe2ZZ9d4W9OIQ==",
+      "dev": true,
+      "dependencies": {
+        "process-on-spawn": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
@@ -16432,30 +17483,314 @@
       "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
       "dev": true,
       "dependencies": {
-        "path-key": "^3.0.0"
+        "path-key": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
+    "node_modules/nwsapi": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz",
+      "integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==",
+      "dev": true
+    },
+    "node_modules/nyc": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/nyc/-/nyc-15.1.0.tgz",
+      "integrity": "sha512-jMW04n9SxKdKi1ZMGhvUTHBN0EICCRkHemEoE5jm6mTYcqcdas0ATzgUgejlQUHMvpnOZqGB5Xxsv9KxJW1j8A==",
+      "dev": true,
+      "dependencies": {
+        "@istanbuljs/load-nyc-config": "^1.0.0",
+        "@istanbuljs/schema": "^0.1.2",
+        "caching-transform": "^4.0.0",
+        "convert-source-map": "^1.7.0",
+        "decamelize": "^1.2.0",
+        "find-cache-dir": "^3.2.0",
+        "find-up": "^4.1.0",
+        "foreground-child": "^2.0.0",
+        "get-package-type": "^0.1.0",
+        "glob": "^7.1.6",
+        "istanbul-lib-coverage": "^3.0.0",
+        "istanbul-lib-hook": "^3.0.0",
+        "istanbul-lib-instrument": "^4.0.0",
+        "istanbul-lib-processinfo": "^2.0.2",
+        "istanbul-lib-report": "^3.0.0",
+        "istanbul-lib-source-maps": "^4.0.0",
+        "istanbul-reports": "^3.0.2",
+        "make-dir": "^3.0.0",
+        "node-preload": "^0.2.1",
+        "p-map": "^3.0.0",
+        "process-on-spawn": "^1.0.0",
+        "resolve-from": "^5.0.0",
+        "rimraf": "^3.0.0",
+        "signal-exit": "^3.0.2",
+        "spawn-wrap": "^2.0.0",
+        "test-exclude": "^6.0.0",
+        "yargs": "^15.0.2"
+      },
+      "bin": {
+        "nyc": "bin/nyc.js"
+      },
+      "engines": {
+        "node": ">=8.9"
+      }
+    },
+    "node_modules/nyc/node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/nyc/node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+      "dev": true
+    },
+    "node_modules/nyc/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
+    },
+    "node_modules/nyc/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/nyc/node_modules/foreground-child": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-2.0.0.tgz",
+      "integrity": "sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/nyc/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/nyc/node_modules/istanbul-lib-instrument": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz",
+      "integrity": "sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.7.5",
+        "@istanbuljs/schema": "^0.1.2",
+        "istanbul-lib-coverage": "^3.0.0",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/nyc/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/nyc/node_modules/make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "dev": true,
+      "dependencies": {
+        "semver": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/nyc/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/nyc/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/nyc/node_modules/p-map": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-3.0.0.tgz",
+      "integrity": "sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==",
+      "dev": true,
+      "dependencies": {
+        "aggregate-error": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/nyc/node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/nyc/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/nyc/node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "dev": true
+    },
+    "node_modules/nyc/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/nyc/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/nyc/node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "dev": true
+    },
+    "node_modules/nyc/node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "dev": true,
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
       },
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/nth-check": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
-      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+    "node_modules/nyc/node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
       "dev": true,
       "dependencies": {
-        "boolbase": "^1.0.0"
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
       },
-      "funding": {
-        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      "engines": {
+        "node": ">=6"
       }
     },
-    "node_modules/nwsapi": {
-      "version": "2.2.7",
-      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz",
-      "integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==",
-      "dev": true
-    },
     "node_modules/nypm": {
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/nypm/-/nypm-0.3.6.tgz",
@@ -16854,6 +18189,15 @@
       "integrity": "sha512-gjcpUc3clBf9+210TRaDWbf+rZZZEshZ+DlXMRCeAjp0xhTrnQsKHypIy1J3d5hKdUzj69t708EHtU8P6bUn0A==",
       "dev": true
     },
+    "node_modules/os-homedir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+      "integrity": "sha512-B5JU3cabzk8c67mRRd3ECmROafjYMXbuzlwtqdM8IbS8ktlTix8aFGb2bAGKrSRIlnfKwovGUUr72JUPyOb6kQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/os-tmpdir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
@@ -16921,6 +18265,21 @@
         "node": ">=6"
       }
     },
+    "node_modules/package-hash": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/package-hash/-/package-hash-4.0.0.tgz",
+      "integrity": "sha512-whdkPIooSu/bASggZ96BWVvZTRMOFxnyUG5PnTSGKoJE2gd5mbVNmR2Nj20QFzxYYgAXpoqC+AiXzl+UMRh7zQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.15",
+        "hasha": "^5.0.0",
+        "lodash.flattendeep": "^4.4.0",
+        "release-zalgo": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/pako": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
@@ -16980,6 +18339,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parse-passwd": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
+      "integrity": "sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/parse5": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
@@ -17232,6 +18600,36 @@
         "node": ">=8"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.42.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.42.1.tgz",
+      "integrity": "sha512-PgwB03s2DZBcNRoW+1w9E+VkLBxweib6KTXM0M3tkiT4jVxKSi6PmVJ591J+0u10LUrgxB7dLRbiJqO5s2QPMg==",
+      "dev": true,
+      "dependencies": {
+        "playwright-core": "1.42.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.42.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.42.1.tgz",
+      "integrity": "sha512-mxz6zclokgrke9p1vtdy/COWBH+eOZgYUVVU34C73M+4j4HLlQJHtfcqiqqxpP0o8HhMkflvfbquLX5dg6wlfA==",
+      "dev": true,
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/pnp-webpack-plugin": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.7.0.tgz",
@@ -17651,6 +19049,18 @@
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
       "dev": true
     },
+    "node_modules/process-on-spawn": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/process-on-spawn/-/process-on-spawn-1.0.0.tgz",
+      "integrity": "sha512-1WsPDsUSMmZH5LeMLegqkPDrsGgsWwk1Exipy2hvB0o/F0ASzbpIctSCcZIK1ykJvtTJULEH+20WOFjMvGnCTg==",
+      "dev": true,
+      "dependencies": {
+        "fromentries": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/progress": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
@@ -18355,15 +19765,15 @@
       }
     },
     "node_modules/recast": {
-      "version": "0.23.4",
-      "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.4.tgz",
-      "integrity": "sha512-qtEDqIZGVcSZCHniWwZWbRy79Dc6Wp3kT/UmDA2RJKBPg7+7k51aQBZirHmUGn5uvHf2rg8DkjizrN26k61ATw==",
+      "version": "0.23.6",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.6.tgz",
+      "integrity": "sha512-9FHoNjX1yjuesMwuthAmPKabxYQdOgihFYmT5ebXfYGBcnqXZf3WOVz+5foEZ8Y83P4ZY6yQD5GMmtV+pgCCAQ==",
       "dev": true,
       "dependencies": {
-        "assert": "^2.0.0",
         "ast-types": "^0.16.1",
         "esprima": "~4.0.0",
         "source-map": "~0.6.1",
+        "tiny-invariant": "^1.3.3",
         "tslib": "^2.0.1"
       },
       "engines": {
@@ -18506,6 +19916,18 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/release-zalgo": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/release-zalgo/-/release-zalgo-1.0.0.tgz",
+      "integrity": "sha512-gUAyHVHPPC5wdqX/LG4LWtRYtgjxyX78oanFNTMMyFEfOqdC54s3eE82imuWKbOeqYht2CrNf64Qb8vgmmtZGA==",
+      "dev": true,
+      "dependencies": {
+        "es6-error": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/remark-external-links": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/remark-external-links/-/remark-external-links-8.0.0.tgz",
@@ -18568,6 +19990,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "dev": true
+    },
     "node_modules/requireindex": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz",
@@ -18620,6 +20048,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/resolve-dir": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-0.1.1.tgz",
+      "integrity": "sha512-QxMPqI6le2u0dCLyiGzgy92kjkkL6zO0XyvHzjdTNH3zM6e5Hz3BwG6+aEyNgiQ5Xz6PwTwgQEj3U50dByPKIA==",
+      "dev": true,
+      "dependencies": {
+        "expand-tilde": "^1.2.2",
+        "global-modules": "^0.2.3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -19036,6 +20477,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "dev": true
+    },
     "node_modules/set-function-length": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.1.tgz",
@@ -19339,6 +20786,93 @@
       "integrity": "sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==",
       "dev": true
     },
+    "node_modules/spawn-wrap": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/spawn-wrap/-/spawn-wrap-2.0.0.tgz",
+      "integrity": "sha512-EeajNjfN9zMnULLwhZZQU3GWBoFNkbngTUPfaawT4RkMiviTxcX0qfhVbGey39mfctfDHkWtuecgQ8NJcyQWHg==",
+      "dev": true,
+      "dependencies": {
+        "foreground-child": "^2.0.0",
+        "is-windows": "^1.0.2",
+        "make-dir": "^3.0.0",
+        "rimraf": "^3.0.0",
+        "signal-exit": "^3.0.2",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/spawn-wrap/node_modules/foreground-child": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-2.0.0.tgz",
+      "integrity": "sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/spawn-wrap/node_modules/is-windows": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
+      "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/spawn-wrap/node_modules/make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "dev": true,
+      "dependencies": {
+        "semver": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/spawn-wrap/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/spawn-wrap/node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "dev": true
+    },
+    "node_modules/spawnd": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/spawnd/-/spawnd-5.0.0.tgz",
+      "integrity": "sha512-28+AJr82moMVWolQvlAIv3JcYDkjkFTEmfDc503wxrF5l2rQ3dFz6DpbXp3kD4zmgGGldfM4xM4v1sFj/ZaIOA==",
+      "dev": true,
+      "dependencies": {
+        "exit": "^0.1.2",
+        "signal-exit": "^3.0.3",
+        "tree-kill": "^1.2.2",
+        "wait-port": "^0.2.9"
+      }
+    },
+    "node_modules/spawnd/node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "dev": true
+    },
     "node_modules/spdx-correct": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
@@ -20268,9 +21802,9 @@
       }
     },
     "node_modules/tiny-invariant": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
-      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
       "dev": true
     },
     "node_modules/tinyspy": {
@@ -20731,6 +22265,15 @@
       "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
       "dev": true
     },
+    "node_modules/typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "dev": true,
+      "dependencies": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
@@ -21166,6 +22709,119 @@
         "node": ">=14"
       }
     },
+    "node_modules/wait-on": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/wait-on/-/wait-on-7.2.0.tgz",
+      "integrity": "sha512-wCQcHkRazgjG5XoAq9jbTMLpNIjoSlZslrJ2+N9MxDsGEv1HnFoVjOCexL0ESva7Y9cu350j+DWADdk54s4AFQ==",
+      "dev": true,
+      "dependencies": {
+        "axios": "^1.6.1",
+        "joi": "^17.11.0",
+        "lodash": "^4.17.21",
+        "minimist": "^1.2.8",
+        "rxjs": "^7.8.1"
+      },
+      "bin": {
+        "wait-on": "bin/wait-on"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/wait-port": {
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/wait-port/-/wait-port-0.2.14.tgz",
+      "integrity": "sha512-kIzjWcr6ykl7WFbZd0TMae8xovwqcqbx6FM9l+7agOgUByhzdjfzZBPK2CPufldTOMxbUivss//Sh9MFawmPRQ==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "commander": "^3.0.2",
+        "debug": "^4.1.1"
+      },
+      "bin": {
+        "wait-port": "bin/wait-port.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wait-port/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/wait-port/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/wait-port/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/wait-port/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true
+    },
+    "node_modules/wait-port/node_modules/commander": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-3.0.2.tgz",
+      "integrity": "sha512-Gar0ASD4BDyKC4hl4DwHqDrmvjoxWKZigVnAbn5H1owvm4CxCPdb0HQDehwNYMJpla5+M2tPmPARzhtYuwpHow==",
+      "dev": true
+    },
+    "node_modules/wait-port/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/wait-port/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/wait-port/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/walker": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
@@ -21504,6 +23160,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "dev": true
+    },
     "node_modules/which-typed-array": {
       "version": "1.1.14",
       "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.14.tgz",
@@ -21662,6 +23324,12 @@
         }
       }
     },
+    "node_modules/xml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
+      "integrity": "sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw==",
+      "dev": true
+    },
     "node_modules/xml-name-validator": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
diff --git a/package.json b/package.json
index 31e360b6..2029c910 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
     "lint-staged": "lint-staged",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "type": "tsc --noEmit"
+    "type": "tsc --noEmit",
+    "test-storybook": "test-storybook"
   },
   "dependencies": {
     "@headlessui/react": "^1.7.18",
@@ -48,6 +49,7 @@
     "@storybook/nextjs": "^7.6.15",
     "@storybook/react": "^7.6.15",
     "@storybook/test": "^7.6.15",
+    "@storybook/test-runner": "^0.17.0",
     "@storybook/testing-library": "^0.2.2",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
@@ -69,6 +71,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.2",
     "msw": "^2.1.7",
+    "msw-storybook-addon": "^2.0.0-beta.1",
     "postcss": "^8",
     "prettier": "3.2.5",
     "storybook": "^7.6.15",