diff --git a/packages/form/.jest/helpers.tsx b/packages/form/.jest/helpers.tsx
index 6a2ebebcd9..9a4e96ebe8 100644
--- a/packages/form/.jest/helpers.tsx
+++ b/packages/form/.jest/helpers.tsx
@@ -34,7 +34,7 @@ export const shouldMatchEmotionSnapshotFormWrapper = (
       errors={mockErrors}
       initialValues={initialValues}
     >
-      {() => children}
+      {children}
     </Form>,
     options,
   )
diff --git a/packages/form/package.json b/packages/form/package.json
index 703c8e62db..6bcb450432 100644
--- a/packages/form/package.json
+++ b/packages/form/package.json
@@ -54,10 +54,7 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@ultraviolet/ui": "workspace:*",
-    "final-form": "4.20.10",
-    "final-form-arrays": "3.0.2",
-    "react-final-form": "6.5.9",
-    "react-final-form-arrays": "3.1.4",
-    "react-select": "5.7.7"
+    "react-hook-form": "^7.47.0",
+    "react-select": "5.7.5"
   }
 }
diff --git a/packages/form/src/components/CheckboxField/__stories__/BooleanChecked.stories.tsx b/packages/form/src/components/CheckboxField/__stories__/BooleanChecked.stories.tsx
index 004e129950..581921dd85 100644
--- a/packages/form/src/components/CheckboxField/__stories__/BooleanChecked.stories.tsx
+++ b/packages/form/src/components/CheckboxField/__stories__/BooleanChecked.stories.tsx
@@ -1,9 +1,9 @@
 import type { StoryFn } from '@storybook/react'
 import { CheckboxField } from '..'
-import type { FormProps } from '../../Form'
+import type { FormErrors } from '../../../types'
 import { Form } from '../../Form'
 
-export const BooleanChecked: StoryFn<FormProps> = ({ errors }) => (
+export const BooleanChecked: StoryFn<{ errors: FormErrors }> = ({ errors }) => (
   <Form onRawSubmit={() => {}} errors={errors} initialValues={{ foo: true }}>
     <CheckboxField name="foo">Default Checked Boolean Item</CheckboxField>
   </Form>
diff --git a/packages/form/src/components/CheckboxField/__stories__/Checked.stories.tsx b/packages/form/src/components/CheckboxField/__stories__/Checked.stories.tsx
index 8399cf6999..1d324398c7 100644
--- a/packages/form/src/components/CheckboxField/__stories__/Checked.stories.tsx
+++ b/packages/form/src/components/CheckboxField/__stories__/Checked.stories.tsx
@@ -1,9 +1,9 @@
 import type { StoryFn } from '@storybook/react'
 import { CheckboxField } from '..'
-import type { FormProps } from '../..'
+import type { FormErrors } from '../../../types'
 import { Form } from '../../Form'
 
-export const Checked: StoryFn<FormProps> = ({ errors }) => (
+export const Checked: StoryFn<{ errors: FormErrors }> = ({ errors }) => (
   <Form onRawSubmit={() => {}} errors={errors} initialValues={{ foo: ['bar'] }}>
     <CheckboxField name="foo" value="bar">
       Checked Item
diff --git a/packages/form/src/components/CheckboxField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/CheckboxField/__tests__/__snapshots__/index.spec.tsx.snap
index 4375b93091..7a88a972eb 100644
--- a/packages/form/src/components/CheckboxField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/components/CheckboxField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -1,5 +1,372 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`CheckboxField should check two boxes 1`] = `
+<DocumentFragment>
+  .cache-13gdmaa {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  gap: 8px;
+}
+
+.cache-13gdmaa .eqr7bqq3 {
+  cursor: pointer;
+}
+
+.cache-13gdmaa[aria-disabled='true'] {
+  cursor: not-allowed;
+  color: #b5b7bd;
+}
+
+.cache-13gdmaa[aria-disabled='true'] .eqr7bqq3 {
+  cursor: not-allowed;
+}
+
+.cache-13gdmaa[aria-disabled='true'] .eqr7bqq4 {
+  fill: #e9eaeb;
+}
+
+.cache-13gdmaa[aria-disabled='true'] .eqr7bqq4 .eqr7bqq6 {
+  stroke: #d9dadd;
+  fill: #f3f3f4;
+}
+
+.cache-13gdmaa[aria-disabled='true'] .eqr7bqq2[aria-invalid="true"]:checked+.eqr7bqq4 {
+  fill: #ffd3e3;
+}
+
+.cache-13gdmaa[aria-disabled='true'] .eqr7bqq2[aria-invalid="true"]:checked+.eqr7bqq4 .eqr7bqq6 {
+  stroke: #ffd3e3;
+  fill: #ffd3e3;
+}
+
+.cache-13gdmaa[aria-disabled='true'] .eqr7bqq2[aria-invalid="true"]+.eqr7bqq4 {
+  fill: #ffebf2;
+}
+
+.cache-13gdmaa[aria-disabled='true'] .eqr7bqq2[aria-invalid="true"]+.eqr7bqq4 .eqr7bqq6 {
+  stroke: #ffbbd3;
+  fill: #ffebf2;
+}
+
+.cache-13gdmaa[aria-disabled='true'] .eqr7bqq2:checked+.eqr7bqq4 {
+  fill: #e5dbfd;
+}
+
+.cache-13gdmaa[aria-disabled='true'] .eqr7bqq2:checked+.eqr7bqq4 .eqr7bqq6 {
+  stroke: #d8c5fc;
+  fill: #d8c5fc;
+}
+
+.cache-13gdmaa[aria-disabled='true'] .eqr7bqq2[aria-checked="mixed"]+.eqr7bqq4 {
+  fill: #e5dbfd;
+}
+
+.cache-13gdmaa[aria-disabled='true'] .eqr7bqq2[aria-checked="mixed"]+.eqr7bqq4 .eqr7bqq6 {
+  stroke: #e5dbfd;
+  fill: #e5dbfd;
+}
+
+.cache-13gdmaa .eqr7bqq2:checked+.eqr7bqq4 path {
+  transform-origin: center;
+  -webkit-transition: 200ms -webkit-transform ease-in-out;
+  transition: 200ms transform ease-in-out;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transform: translate(2px, 2px);
+  -moz-transform: translate(2px, 2px);
+  -ms-transform: translate(2px, 2px);
+  transform: translate(2px, 2px);
+}
+
+.cache-13gdmaa .eqr7bqq2:checked+.eqr7bqq4 .eqr7bqq6 {
+  fill: #8c40ef;
+  stroke: #8c40ef;
+}
+
+.cache-13gdmaa .eqr7bqq2[aria-invalid="true"]:checked+.eqr7bqq4 .eqr7bqq6 {
+  fill: #e51963;
+  stroke: #e51963;
+}
+
+.cache-13gdmaa .eqr7bqq2[aria-checked="mixed"]+.eqr7bqq4 .eqr7bqq5 {
+  fill: #ffffff;
+}
+
+.cache-13gdmaa .eqr7bqq2[aria-checked="mixed"]+.eqr7bqq4 .eqr7bqq6 {
+  fill: #8c40ef;
+  stroke: #8c40ef;
+}
+
+.cache-13gdmaa:hover[aria-disabled='false'] .eqr7bqq2[aria-invalid='false'][aria-checked='false']+.eqr7bqq4 .eqr7bqq6 {
+  stroke: #792dd4;
+  fill: #e5dbfd;
+}
+
+.cache-13gdmaa:hover[aria-disabled='false'] .eqr7bqq2[aria-invalid='false'][aria-checked='true']+.eqr7bqq4 .eqr7bqq6 {
+  stroke: #792dd4;
+  fill: #792dd4;
+}
+
+.cache-13gdmaa:hover[aria-disabled='false'] .eqr7bqq2[aria-invalid='false'][aria-checked='mixed']+.eqr7bqq4 .eqr7bqq6 {
+  stroke: #792dd4;
+  fill: #792dd4;
+}
+
+.cache-13gdmaa:hover[aria-disabled='false'] .eqr7bqq2[aria-invalid='true'][aria-checked='false']+.eqr7bqq4 .eqr7bqq6 {
+  stroke: #92103f;
+  fill: #ffd3e3;
+}
+
+.cache-13gdmaa:hover[aria-disabled='false'] .eqr7bqq2[aria-invalid='true'][aria-checked='true']+.eqr7bqq4 .eqr7bqq6 {
+  stroke: #d6175c;
+  fill: #d6175c;
+}
+
+.cache-13gdmaa .eqr7bqq2[aria-invalid="true"]+.eqr7bqq4 {
+  fill: #e51963;
+}
+
+.cache-13gdmaa .eqr7bqq2[aria-invalid="true"]+.eqr7bqq4 .eqr7bqq6 {
+  stroke: #e51963;
+  fill: #ffebf2;
+}
+
+.cache-m3g6o6 {
+  position: absolute;
+  white-space: nowrap;
+  height: 24px;
+  width: 24px;
+  opacity: 0;
+  border-width: 0;
+}
+
+.cache-m3g6o6:not(:disabled) {
+  cursor: pointer;
+}
+
+.cache-m3g6o6:disabled {
+  cursor: not-allowed;
+}
+
+.cache-m3g6o6:not(:disabled):checked+.eqr7bqq4,
+.cache-m3g6o6:not(:disabled)[aria-checked='mixed']+.eqr7bqq4 {
+  fill: #8c40ef;
+}
+
+.cache-m3g6o6:not(:disabled):checked+.eqr7bqq4 .eqr7bqq6,
+.cache-m3g6o6:not(:disabled)[aria-checked='mixed']+.eqr7bqq4 .eqr7bqq6 {
+  stroke: #8c40ef;
+}
+
+.cache-m3g6o6:not(:disabled)[aria-invalid='true']+.eqr7bqq4,
+.cache-m3g6o6:not(:disabled)[aria-invalid='mixed']+.eqr7bqq4 {
+  fill: #ffebf2;
+}
+
+.cache-m3g6o6:not(:disabled)[aria-invalid='true']+.eqr7bqq4 .eqr7bqq6,
+.cache-m3g6o6:not(:disabled)[aria-invalid='mixed']+.eqr7bqq4 .eqr7bqq6 {
+  stroke: #b3144d;
+}
+
+.cache-m3g6o6:focus+.eqr7bqq4 {
+  background-color: #f1eefc;
+  fill: #ffebf2;
+  outline: 1px solid 0px 0px 0px 3px #8c40ef40;
+}
+
+.cache-m3g6o6:focus+.eqr7bqq4 .eqr7bqq6 {
+  stroke: #792dd4;
+  fill: #e5dbfd;
+}
+
+.cache-m3g6o6[aria-invalid='true']:focus+.eqr7bqq4 {
+  background-color: #ffebf2;
+  fill: #ffebf2;
+  outline: 1px solid 0px 0px 0px 3px #f91b6c40;
+}
+
+.cache-m3g6o6[aria-invalid='true']:focus+.eqr7bqq4 .eqr7bqq6 {
+  stroke: #92103f;
+  fill: #ffd3e3;
+}
+
+.cache-55x4xn {
+  border-radius: 4px;
+  height: 24px;
+  width: 24px;
+  min-width: 24px;
+  min-height: 24px;
+}
+
+.cache-55x4xn path {
+  fill: #ffffff;
+  -webkit-transform: translate(2px, 2px);
+  -moz-transform: translate(2px, 2px);
+  -ms-transform: translate(2px, 2px);
+  transform: translate(2px, 2px);
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+}
+
+.cache-16eol3o {
+  fill: #ffffff;
+  stroke: #d9dadd;
+}
+
+.cache-n7398p {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 2px;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.cache-7efi4w {
+  display: grid;
+  grid-template-columns: 11fr 1fr;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+}
+
+<form>
+    <div
+      aria-disabled="false"
+      class="cache-13gdmaa eqr7bqq1"
+      data-checked="true"
+      data-error="false"
+    >
+      <input
+        aria-checked="true"
+        aria-invalid="false"
+        class="cache-m3g6o6 eqr7bqq2"
+        id="value"
+        name="value"
+        type="checkbox"
+        value="foo"
+      />
+      <svg
+        class="cache-55x4xn eqr7bqq4"
+        fill="none"
+        size="24"
+        viewBox="0 0 24 24"
+      >
+        <g>
+          <rect
+            class="cache-16eol3o eqr7bqq6"
+            height="16"
+            rx="2px"
+            stroke-width="2"
+            width="16"
+            x="4"
+            y="4"
+          />
+          <path
+            clip-rule="evenodd"
+            d="M15.6678 5.26709C16.0849 5.6463 16.113 6.28907 15.7307 6.70276L9.29172 13.6705C9.10291 13.8748 8.83818 13.9937 8.55884 13.9998C8.2795 14.0058 8.0098 13.8984 7.81223 13.7024L4.30004 10.2185C3.89999 9.82169 3.89999 9.17831 4.30004 8.78149C4.70009 8.38467 5.34869 8.38467 5.74874 8.78149L8.50441 11.5149L14.2205 5.32951C14.6028 4.91583 15.2508 4.88788 15.6678 5.26709Z"
+            fill="white"
+            fill-rule="evenodd"
+            height="9"
+            width="12"
+            x="5"
+            y="4"
+          />
+        </g>
+      </svg>
+      <div
+        class="cache-n7398p ehpbis70"
+      >
+        <div
+          class="cache-7efi4w e3f5lzv0"
+        />
+      </div>
+    </div>
+    <div
+      aria-disabled="false"
+      class="cache-13gdmaa eqr7bqq1"
+      data-checked="true"
+      data-error="false"
+    >
+      <input
+        aria-checked="true"
+        aria-invalid="false"
+        class="cache-m3g6o6 eqr7bqq2"
+        id="value"
+        name="value"
+        type="checkbox"
+        value="bar"
+      />
+      <svg
+        class="cache-55x4xn eqr7bqq4"
+        fill="none"
+        size="24"
+        viewBox="0 0 24 24"
+      >
+        <g>
+          <rect
+            class="cache-16eol3o eqr7bqq6"
+            height="16"
+            rx="2px"
+            stroke-width="2"
+            width="16"
+            x="4"
+            y="4"
+          />
+          <path
+            clip-rule="evenodd"
+            d="M15.6678 5.26709C16.0849 5.6463 16.113 6.28907 15.7307 6.70276L9.29172 13.6705C9.10291 13.8748 8.83818 13.9937 8.55884 13.9998C8.2795 14.0058 8.0098 13.8984 7.81223 13.7024L4.30004 10.2185C3.89999 9.82169 3.89999 9.17831 4.30004 8.78149C4.70009 8.38467 5.34869 8.38467 5.74874 8.78149L8.50441 11.5149L14.2205 5.32951C14.6028 4.91583 15.2508 4.88788 15.6678 5.26709Z"
+            fill="white"
+            fill-rule="evenodd"
+            height="9"
+            width="12"
+            x="5"
+            y="4"
+          />
+        </g>
+      </svg>
+      <div
+        class="cache-n7398p ehpbis70"
+      >
+        <div
+          class="cache-7efi4w e3f5lzv0"
+        />
+      </div>
+    </div>
+  </form>
+</DocumentFragment>
+`;
+
 exports[`CheckboxField should render correctly 1`] = `
 <DocumentFragment>
   .cache-13gdmaa {
@@ -260,21 +627,336 @@ exports[`CheckboxField should render correctly 1`] = `
   justify-content: normal;
 }
 
-<form
-    novalidate=""
-  >
+<form>
+    <div
+      aria-disabled="false"
+      class="cache-13gdmaa eqr7bqq1"
+      data-checked="false"
+      data-error="false"
+    >
+      <input
+        aria-checked="false"
+        aria-invalid="false"
+        class="cache-m3g6o6 eqr7bqq2"
+        id="test"
+        name="test"
+        type="checkbox"
+        value=""
+      />
+      <svg
+        class="cache-55x4xn eqr7bqq4"
+        fill="none"
+        size="24"
+        viewBox="0 0 24 24"
+      >
+        <g>
+          <rect
+            class="cache-16eol3o eqr7bqq6"
+            height="16"
+            rx="2px"
+            stroke-width="2"
+            width="16"
+            x="4"
+            y="4"
+          />
+          <path
+            clip-rule="evenodd"
+            d="M15.6678 5.26709C16.0849 5.6463 16.113 6.28907 15.7307 6.70276L9.29172 13.6705C9.10291 13.8748 8.83818 13.9937 8.55884 13.9998C8.2795 14.0058 8.0098 13.8984 7.81223 13.7024L4.30004 10.2185C3.89999 9.82169 3.89999 9.17831 4.30004 8.78149C4.70009 8.38467 5.34869 8.38467 5.74874 8.78149L8.50441 11.5149L14.2205 5.32951C14.6028 4.91583 15.2508 4.88788 15.6678 5.26709Z"
+            fill="white"
+            fill-rule="evenodd"
+            height="9"
+            width="12"
+            x="5"
+            y="4"
+          />
+        </g>
+      </svg>
+      <div
+        class="cache-n7398p ehpbis70"
+      >
+        <div
+          class="cache-7efi4w e3f5lzv0"
+        />
+      </div>
+    </div>
+  </form>
+</DocumentFragment>
+`;
+
+exports[`CheckboxField should render correctly checked without value 1`] = `
+<DocumentFragment>
+  .cache-13gdmaa {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  gap: 8px;
+}
+
+.cache-13gdmaa .eqr7bqq3 {
+  cursor: pointer;
+}
+
+.cache-13gdmaa[aria-disabled='true'] {
+  cursor: not-allowed;
+  color: #b5b7bd;
+}
+
+.cache-13gdmaa[aria-disabled='true'] .eqr7bqq3 {
+  cursor: not-allowed;
+}
+
+.cache-13gdmaa[aria-disabled='true'] .eqr7bqq4 {
+  fill: #e9eaeb;
+}
+
+.cache-13gdmaa[aria-disabled='true'] .eqr7bqq4 .eqr7bqq6 {
+  stroke: #d9dadd;
+  fill: #f3f3f4;
+}
+
+.cache-13gdmaa[aria-disabled='true'] .eqr7bqq2[aria-invalid="true"]:checked+.eqr7bqq4 {
+  fill: #ffd3e3;
+}
+
+.cache-13gdmaa[aria-disabled='true'] .eqr7bqq2[aria-invalid="true"]:checked+.eqr7bqq4 .eqr7bqq6 {
+  stroke: #ffd3e3;
+  fill: #ffd3e3;
+}
+
+.cache-13gdmaa[aria-disabled='true'] .eqr7bqq2[aria-invalid="true"]+.eqr7bqq4 {
+  fill: #ffebf2;
+}
+
+.cache-13gdmaa[aria-disabled='true'] .eqr7bqq2[aria-invalid="true"]+.eqr7bqq4 .eqr7bqq6 {
+  stroke: #ffbbd3;
+  fill: #ffebf2;
+}
+
+.cache-13gdmaa[aria-disabled='true'] .eqr7bqq2:checked+.eqr7bqq4 {
+  fill: #e5dbfd;
+}
+
+.cache-13gdmaa[aria-disabled='true'] .eqr7bqq2:checked+.eqr7bqq4 .eqr7bqq6 {
+  stroke: #d8c5fc;
+  fill: #d8c5fc;
+}
+
+.cache-13gdmaa[aria-disabled='true'] .eqr7bqq2[aria-checked="mixed"]+.eqr7bqq4 {
+  fill: #e5dbfd;
+}
+
+.cache-13gdmaa[aria-disabled='true'] .eqr7bqq2[aria-checked="mixed"]+.eqr7bqq4 .eqr7bqq6 {
+  stroke: #e5dbfd;
+  fill: #e5dbfd;
+}
+
+.cache-13gdmaa .eqr7bqq2:checked+.eqr7bqq4 path {
+  transform-origin: center;
+  -webkit-transition: 200ms -webkit-transform ease-in-out;
+  transition: 200ms transform ease-in-out;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transform: translate(2px, 2px);
+  -moz-transform: translate(2px, 2px);
+  -ms-transform: translate(2px, 2px);
+  transform: translate(2px, 2px);
+}
+
+.cache-13gdmaa .eqr7bqq2:checked+.eqr7bqq4 .eqr7bqq6 {
+  fill: #8c40ef;
+  stroke: #8c40ef;
+}
+
+.cache-13gdmaa .eqr7bqq2[aria-invalid="true"]:checked+.eqr7bqq4 .eqr7bqq6 {
+  fill: #e51963;
+  stroke: #e51963;
+}
+
+.cache-13gdmaa .eqr7bqq2[aria-checked="mixed"]+.eqr7bqq4 .eqr7bqq5 {
+  fill: #ffffff;
+}
+
+.cache-13gdmaa .eqr7bqq2[aria-checked="mixed"]+.eqr7bqq4 .eqr7bqq6 {
+  fill: #8c40ef;
+  stroke: #8c40ef;
+}
+
+.cache-13gdmaa:hover[aria-disabled='false'] .eqr7bqq2[aria-invalid='false'][aria-checked='false']+.eqr7bqq4 .eqr7bqq6 {
+  stroke: #792dd4;
+  fill: #e5dbfd;
+}
+
+.cache-13gdmaa:hover[aria-disabled='false'] .eqr7bqq2[aria-invalid='false'][aria-checked='true']+.eqr7bqq4 .eqr7bqq6 {
+  stroke: #792dd4;
+  fill: #792dd4;
+}
+
+.cache-13gdmaa:hover[aria-disabled='false'] .eqr7bqq2[aria-invalid='false'][aria-checked='mixed']+.eqr7bqq4 .eqr7bqq6 {
+  stroke: #792dd4;
+  fill: #792dd4;
+}
+
+.cache-13gdmaa:hover[aria-disabled='false'] .eqr7bqq2[aria-invalid='true'][aria-checked='false']+.eqr7bqq4 .eqr7bqq6 {
+  stroke: #92103f;
+  fill: #ffd3e3;
+}
+
+.cache-13gdmaa:hover[aria-disabled='false'] .eqr7bqq2[aria-invalid='true'][aria-checked='true']+.eqr7bqq4 .eqr7bqq6 {
+  stroke: #d6175c;
+  fill: #d6175c;
+}
+
+.cache-13gdmaa .eqr7bqq2[aria-invalid="true"]+.eqr7bqq4 {
+  fill: #e51963;
+}
+
+.cache-13gdmaa .eqr7bqq2[aria-invalid="true"]+.eqr7bqq4 .eqr7bqq6 {
+  stroke: #e51963;
+  fill: #ffebf2;
+}
+
+.cache-m3g6o6 {
+  position: absolute;
+  white-space: nowrap;
+  height: 24px;
+  width: 24px;
+  opacity: 0;
+  border-width: 0;
+}
+
+.cache-m3g6o6:not(:disabled) {
+  cursor: pointer;
+}
+
+.cache-m3g6o6:disabled {
+  cursor: not-allowed;
+}
+
+.cache-m3g6o6:not(:disabled):checked+.eqr7bqq4,
+.cache-m3g6o6:not(:disabled)[aria-checked='mixed']+.eqr7bqq4 {
+  fill: #8c40ef;
+}
+
+.cache-m3g6o6:not(:disabled):checked+.eqr7bqq4 .eqr7bqq6,
+.cache-m3g6o6:not(:disabled)[aria-checked='mixed']+.eqr7bqq4 .eqr7bqq6 {
+  stroke: #8c40ef;
+}
+
+.cache-m3g6o6:not(:disabled)[aria-invalid='true']+.eqr7bqq4,
+.cache-m3g6o6:not(:disabled)[aria-invalid='mixed']+.eqr7bqq4 {
+  fill: #ffebf2;
+}
+
+.cache-m3g6o6:not(:disabled)[aria-invalid='true']+.eqr7bqq4 .eqr7bqq6,
+.cache-m3g6o6:not(:disabled)[aria-invalid='mixed']+.eqr7bqq4 .eqr7bqq6 {
+  stroke: #b3144d;
+}
+
+.cache-m3g6o6:focus+.eqr7bqq4 {
+  background-color: #f1eefc;
+  fill: #ffebf2;
+  outline: 1px solid 0px 0px 0px 3px #8c40ef40;
+}
+
+.cache-m3g6o6:focus+.eqr7bqq4 .eqr7bqq6 {
+  stroke: #792dd4;
+  fill: #e5dbfd;
+}
+
+.cache-m3g6o6[aria-invalid='true']:focus+.eqr7bqq4 {
+  background-color: #ffebf2;
+  fill: #ffebf2;
+  outline: 1px solid 0px 0px 0px 3px #f91b6c40;
+}
+
+.cache-m3g6o6[aria-invalid='true']:focus+.eqr7bqq4 .eqr7bqq6 {
+  stroke: #92103f;
+  fill: #ffd3e3;
+}
+
+.cache-55x4xn {
+  border-radius: 4px;
+  height: 24px;
+  width: 24px;
+  min-width: 24px;
+  min-height: 24px;
+}
+
+.cache-55x4xn path {
+  fill: #ffffff;
+  -webkit-transform: translate(2px, 2px);
+  -moz-transform: translate(2px, 2px);
+  -ms-transform: translate(2px, 2px);
+  transform: translate(2px, 2px);
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+}
+
+.cache-16eol3o {
+  fill: #ffffff;
+  stroke: #d9dadd;
+}
+
+.cache-n7398p {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 2px;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.cache-7efi4w {
+  display: grid;
+  grid-template-columns: 11fr 1fr;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+}
+
+<form>
     <div
       aria-disabled="false"
       class="cache-13gdmaa eqr7bqq1"
-      data-checked="false"
+      data-checked="true"
       data-error="false"
     >
       <input
-        aria-checked="false"
+        aria-checked="true"
         aria-invalid="false"
+        checked=""
         class="cache-m3g6o6 eqr7bqq2"
-        id="test"
-        name="test"
+        id="checked"
+        name="checked"
         type="checkbox"
         value=""
       />
@@ -318,7 +1000,7 @@ exports[`CheckboxField should render correctly 1`] = `
 </DocumentFragment>
 `;
 
-exports[`CheckboxField should render correctly checked without value 1`] = `
+exports[`CheckboxField should render correctly disabled 1`] = `
 <DocumentFragment>
   .cache-13gdmaa {
   position: relative;
@@ -578,22 +1260,20 @@ exports[`CheckboxField should render correctly checked without value 1`] = `
   justify-content: normal;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
-      aria-disabled="false"
+      aria-disabled="true"
       class="cache-13gdmaa eqr7bqq1"
-      data-checked="true"
+      data-checked="false"
       data-error="false"
     >
       <input
-        aria-checked="true"
+        aria-checked="false"
         aria-invalid="false"
-        checked=""
         class="cache-m3g6o6 eqr7bqq2"
-        id="checked"
-        name="checked"
+        disabled=""
+        id="test"
+        name="test"
         type="checkbox"
         value=""
       />
@@ -637,7 +1317,7 @@ exports[`CheckboxField should render correctly checked without value 1`] = `
 </DocumentFragment>
 `;
 
-exports[`CheckboxField should render correctly disabled 1`] = `
+exports[`CheckboxField should render correctly not checked without value 1`] = `
 <DocumentFragment>
   .cache-13gdmaa {
   position: relative;
@@ -897,11 +1577,9 @@ exports[`CheckboxField should render correctly disabled 1`] = `
   justify-content: normal;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
-      aria-disabled="true"
+      aria-disabled="false"
       class="cache-13gdmaa eqr7bqq1"
       data-checked="false"
       data-error="false"
@@ -910,9 +1588,8 @@ exports[`CheckboxField should render correctly disabled 1`] = `
         aria-checked="false"
         aria-invalid="false"
         class="cache-m3g6o6 eqr7bqq2"
-        disabled=""
-        id="test"
-        name="test"
+        id="checked"
+        name="checked"
         type="checkbox"
         value=""
       />
@@ -1216,9 +1893,7 @@ exports[`CheckboxField should render correctly with a value 1`] = `
   justify-content: normal;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       aria-disabled="false"
       class="cache-13gdmaa eqr7bqq1"
@@ -1608,9 +2283,7 @@ exports[`CheckboxField should render correctly with errors 1`] = `
   padding-top: 4px;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       aria-disabled="false"
       class="cache-13gdmaa eqr7bqq1"
@@ -1953,9 +2626,7 @@ exports[`CheckboxField should trigger events correctly 1`] = `
   justify-content: normal;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       aria-disabled="false"
       class="cache-13gdmaa eqr7bqq1"
diff --git a/packages/form/src/components/CheckboxField/__tests__/index.spec.tsx b/packages/form/src/components/CheckboxField/__tests__/index.spec.tsx
index 0dcba74078..e29b77330e 100644
--- a/packages/form/src/components/CheckboxField/__tests__/index.spec.tsx
+++ b/packages/form/src/components/CheckboxField/__tests__/index.spec.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, jest, test } from '@jest/globals'
-import { act, screen, waitFor } from '@testing-library/react'
+import { act, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { CheckboxField, Form } from '../..'
 import {
@@ -27,9 +27,9 @@ describe('CheckboxField', () => {
     shouldMatchEmotionSnapshotFormWrapper(
       <CheckboxField name="checked" />,
       {
-        transform: async () => {
+        transform: () => {
           const input = screen.getByRole('checkbox', { hidden: true })
-          await waitFor(() => expect(input).toBeChecked())
+          expect(input).toBeChecked()
         },
       },
       {
@@ -39,6 +39,20 @@ describe('CheckboxField', () => {
       },
     ))
 
+  test('should render correctly not checked without value', () =>
+    shouldMatchEmotionSnapshotFormWrapper(
+      <CheckboxField name="checked" />,
+      {
+        transform: () => {
+          const input = screen.getByRole('checkbox', { hidden: true })
+          expect(input).not.toBeChecked()
+        },
+      },
+      {
+        initialValues: {},
+      },
+    ))
+
   test('should render correctly with a value', () =>
     shouldMatchEmotionSnapshotFormWrapper(
       <>
@@ -94,6 +108,25 @@ describe('CheckboxField', () => {
     )
   })
 
+  test('should check two boxes', () =>
+    shouldMatchEmotionSnapshotFormWrapper(
+      <>
+        <CheckboxField name="value" value="foo" />
+        <CheckboxField name="value" value="bar" />
+      </>,
+      {
+        transform: () => {
+          const inputs = screen.getAllByRole('checkbox', { hidden: true })
+          act(() => inputs[0].click())
+          expect(inputs[0]).toBeChecked()
+          expect(inputs[1]).not.toBeChecked()
+          act(() => inputs[1].click())
+          expect(inputs[0]).toBeChecked()
+          expect(inputs[1]).toBeChecked()
+        },
+      },
+    ))
+
   test('should render correctly with errors', () =>
     shouldMatchEmotionSnapshot(
       <Form onRawSubmit={() => {}} errors={mockErrors}>
@@ -108,7 +141,7 @@ describe('CheckboxField', () => {
           // to trigger error
           await userEvent.click(screen.getByRole('checkbox', { hidden: true }))
           await userEvent.click(screen.getByText('Focus'))
-          const error = screen.getByText(mockErrors.REQUIRED as string)
+          const error = screen.getByText(mockErrors.required({ label: '' }))
           expect(error).toBeVisible()
         },
       },
diff --git a/packages/form/src/components/CheckboxField/index.tsx b/packages/form/src/components/CheckboxField/index.tsx
index f9718346ca..01a27a1917 100644
--- a/packages/form/src/components/CheckboxField/index.tsx
+++ b/packages/form/src/components/CheckboxField/index.tsx
@@ -1,105 +1,91 @@
 import { Checkbox } from '@ultraviolet/ui'
-import type { FieldState } from 'final-form'
-import type { ComponentProps, JSX, ReactNode, Ref } from 'react'
-import { forwardRef } from 'react'
-import { useFormField } from '../../hooks'
+import type { ComponentProps, ReactNode } from 'react'
+import type { FieldValues } from 'react-hook-form'
+import { Controller } from 'react-hook-form'
 import { useErrors } from '../../providers'
 import type { BaseFieldProps } from '../../types'
 
-type CheckboxValue = string
-
-type CheckboxFieldProps<T = CheckboxValue, K = string> = BaseFieldProps<T, K> &
-  Partial<
-    Pick<
-      ComponentProps<typeof Checkbox>,
-      | 'disabled'
-      | 'onBlur'
-      | 'onChange'
-      | 'onFocus'
-      | 'progress'
-      | 'size'
-      | 'value'
-      | 'data-testid'
-      | 'helper'
-      | 'tooltip'
-    >
-  > & {
-    name: string
-    label?: string
-    className?: string
-    children?: ReactNode
-    required?: boolean
-  }
-
-export const CheckboxField = forwardRef(
-  (
-    {
-      validate,
-      name,
-      label = '',
-      size,
-      progress,
-      disabled,
-      required,
-      className,
-      children,
-      onChange,
-      onBlur,
-      onFocus,
-      value,
-      helper,
-      tooltip,
-      'data-testid': dataTestId,
-    }: CheckboxFieldProps,
-    ref: Ref<HTMLInputElement>,
-  ): JSX.Element => {
-    const { getError } = useErrors()
-
-    const { input, meta } = useFormField(name, {
-      disabled,
-      required,
-      type: 'checkbox',
-      validate,
-      value,
-    })
+type CheckboxFieldProps<TFieldValues extends FieldValues> =
+  BaseFieldProps<TFieldValues> &
+    Partial<
+      Pick<
+        ComponentProps<typeof Checkbox>,
+        | 'disabled'
+        | 'onBlur'
+        | 'onChange'
+        | 'onFocus'
+        | 'progress'
+        | 'size'
+        | 'data-testid'
+        | 'helper'
+        | 'tooltip'
+      >
+    > & {
+      label?: string
+      className?: string
+      children?: ReactNode
+      required?: boolean
+    }
 
-    const error = getError({
-      label,
-      meta: meta as FieldState<unknown>,
-      name,
-      value: input.value ?? input.checked,
-    })
+export const CheckboxField = <TFieldValues extends FieldValues>({
+  name,
+  label,
+  size,
+  progress,
+  disabled,
+  required,
+  className,
+  children,
+  onChange,
+  onBlur,
+  onFocus,
+  rules,
+  helper,
+  tooltip,
+  'data-testid': dataTestId,
+  value,
+}: CheckboxFieldProps<TFieldValues>) => {
+  const { getError } = useErrors()
 
-    return (
-      <Checkbox
-        name={input.name}
-        onChange={event => {
-          input.onChange(event)
-          onChange?.(event)
-        }}
-        onBlur={event => {
-          input.onBlur(event)
-          onBlur?.(event)
-        }}
-        onFocus={event => {
-          input.onFocus(event)
-          onFocus?.(event)
-        }}
-        size={size}
-        progress={progress}
-        disabled={disabled}
-        checked={input.checked}
-        error={error}
-        helper={helper}
-        ref={ref}
-        className={className}
-        value={input.value}
-        required={required}
-        data-testid={dataTestId}
-        tooltip={tooltip}
-      >
-        {children}
-      </Checkbox>
-    )
-  },
-)
+  return (
+    <Controller
+      name={name}
+      disabled={disabled}
+      rules={{ required, ...rules }}
+      render={({ field, fieldState: { error } }) => (
+        <Checkbox
+          name={field.name}
+          onChange={event => {
+            field.onChange(
+              value ? [...(field.value ?? []), value] : event.target.checked,
+            )
+            onChange?.(event)
+          }}
+          onBlur={event => {
+            field.onBlur()
+            onBlur?.(event)
+          }}
+          onFocus={onFocus}
+          size={size}
+          progress={progress}
+          disabled={field.disabled}
+          checked={
+            Array.isArray(field.value)
+              ? (field.value as (typeof value)[]).includes(value)
+              : !!field.value
+          }
+          error={getError({ label: label ?? '' }, error)}
+          ref={field.ref}
+          className={className}
+          required={required}
+          data-testid={dataTestId}
+          helper={helper}
+          tooltip={tooltip}
+          value={value}
+        >
+          {children}
+        </Checkbox>
+      )}
+    />
+  )
+}
diff --git a/packages/form/src/components/CheckboxGroupField/__stories__/Direction.stories.tsx b/packages/form/src/components/CheckboxGroupField/__stories__/Direction.stories.tsx
index d7131cc553..f10edc7df9 100644
--- a/packages/form/src/components/CheckboxGroupField/__stories__/Direction.stories.tsx
+++ b/packages/form/src/components/CheckboxGroupField/__stories__/Direction.stories.tsx
@@ -1,10 +1,10 @@
 import type { StoryFn } from '@storybook/react'
 import { Stack } from '@ultraviolet/ui'
-import { useFormState } from 'react-final-form'
+import { useFormContext } from 'react-hook-form'
 import { CheckboxGroupField } from '..'
 
 export const DirectionStory: StoryFn<typeof CheckboxGroupField> = args => {
-  const { values } = useFormState()
+  const { watch } = useFormContext()
 
   return (
     <Stack gap={1}>
@@ -20,7 +20,7 @@ export const DirectionStory: StoryFn<typeof CheckboxGroupField> = args => {
         </CheckboxGroupField.Checkbox>
       </CheckboxGroupField>
       <span>
-        <b>Form content:</b> {JSON.stringify(values)}
+        <b>Form content:</b> {JSON.stringify(watch())}
       </span>
     </Stack>
   )
diff --git a/packages/form/src/components/CheckboxGroupField/__stories__/Required.stories.tsx b/packages/form/src/components/CheckboxGroupField/__stories__/Required.stories.tsx
index ce04ca7c16..dbfaa688e6 100644
--- a/packages/form/src/components/CheckboxGroupField/__stories__/Required.stories.tsx
+++ b/packages/form/src/components/CheckboxGroupField/__stories__/Required.stories.tsx
@@ -1,11 +1,11 @@
 import type { StoryFn } from '@storybook/react'
 import { Stack } from '@ultraviolet/ui'
-import { useFormState } from 'react-final-form'
+import { useFormContext } from 'react-hook-form'
 import { CheckboxGroupField } from '..'
 import { Submit } from '../..'
 
 export const RequiredStory: StoryFn<typeof CheckboxGroupField> = args => {
-  const { values } = useFormState()
+  const { watch } = useFormContext()
 
   return (
     <Stack gap={1}>
@@ -22,7 +22,7 @@ export const RequiredStory: StoryFn<typeof CheckboxGroupField> = args => {
       </CheckboxGroupField>
       <Submit>Submit</Submit>
       <span>
-        <b>Form content:</b> {JSON.stringify(values)}
+        <b>Form content:</b> {JSON.stringify(watch())}
       </span>
     </Stack>
   )
diff --git a/packages/form/src/components/CheckboxGroupField/__stories__/Template.stories.tsx b/packages/form/src/components/CheckboxGroupField/__stories__/Template.stories.tsx
index c46bc392f1..df97cfc4a5 100644
--- a/packages/form/src/components/CheckboxGroupField/__stories__/Template.stories.tsx
+++ b/packages/form/src/components/CheckboxGroupField/__stories__/Template.stories.tsx
@@ -1,10 +1,10 @@
 import type { StoryFn } from '@storybook/react'
 import { Stack } from '@ultraviolet/ui'
-import { useFormState } from 'react-final-form'
+import { useFormContext } from 'react-hook-form'
 import { CheckboxGroupField } from '..'
 
 const CheckboxGroupFieldStory: StoryFn<typeof CheckboxGroupField> = args => {
-  const { values } = useFormState()
+  const { watch } = useFormContext()
 
   return (
     <Stack gap={2}>
@@ -20,7 +20,7 @@ const CheckboxGroupFieldStory: StoryFn<typeof CheckboxGroupField> = args => {
         </CheckboxGroupField.Checkbox>
       </CheckboxGroupField>
       <span>
-        <b>Form content:</b> {JSON.stringify(values)}
+        <b>Form content:</b> {JSON.stringify(watch())}
       </span>
     </Stack>
   )
diff --git a/packages/form/src/components/CheckboxGroupField/__stories__/index.stories.tsx b/packages/form/src/components/CheckboxGroupField/__stories__/index.stories.tsx
index c75ffecefa..2423558dee 100644
--- a/packages/form/src/components/CheckboxGroupField/__stories__/index.stories.tsx
+++ b/packages/form/src/components/CheckboxGroupField/__stories__/index.stories.tsx
@@ -8,7 +8,7 @@ export default {
   decorators: [
     ChildStory => (
       <Form
-        initialValues={{ conditions: 'termsAndConditions' }}
+        initialValues={{ conditions: ['termsAndConditions'] }}
         onRawSubmit={data => {
           console.log('data', data)
         }}
diff --git a/packages/form/src/components/CheckboxGroupField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/CheckboxGroupField/__tests__/__snapshots__/index.spec.tsx.snap
index 95da7195eb..25208c9d2d 100644
--- a/packages/form/src/components/CheckboxGroupField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/components/CheckboxGroupField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -323,9 +323,7 @@ exports[`CheckboxField should render correctly checked 1`] = `
   justify-content: normal;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class="cache-1civgmb ehpbis70"
     >
@@ -800,9 +798,7 @@ exports[`CheckboxField should trigger events correctly with required prop 1`] =
   justify-content: normal;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class="cache-1civgmb ehpbis70"
     >
diff --git a/packages/form/src/components/CheckboxGroupField/__tests__/index.spec.tsx b/packages/form/src/components/CheckboxGroupField/__tests__/index.spec.tsx
index dfded7b844..470819f8f9 100644
--- a/packages/form/src/components/CheckboxGroupField/__tests__/index.spec.tsx
+++ b/packages/form/src/components/CheckboxGroupField/__tests__/index.spec.tsx
@@ -25,6 +25,11 @@ describe('CheckboxField', () => {
           expect(secondInput).toBeChecked()
         },
       },
+      {
+        initialValues: {
+          Checkbox: [],
+        },
+      },
     ))
 
   test('should trigger events correctly with required prop', () => {
@@ -56,6 +61,11 @@ describe('CheckboxField', () => {
           expect(input).not.toBeChecked()
         },
       },
+      {
+        initialValues: {
+          test: [],
+        },
+      },
     )
   })
 })
diff --git a/packages/form/src/components/CheckboxGroupField/index.tsx b/packages/form/src/components/CheckboxGroupField/index.tsx
index 98ea121d43..7ce5b80102 100644
--- a/packages/form/src/components/CheckboxGroupField/index.tsx
+++ b/packages/form/src/components/CheckboxGroupField/index.tsx
@@ -1,81 +1,74 @@
 import { CheckboxGroup } from '@ultraviolet/ui'
 import type { ComponentProps } from 'react'
-import { useFieldArray } from 'react-final-form-arrays'
+import type { FieldValues } from 'react-hook-form'
+import { Controller } from 'react-hook-form'
 import { useErrors } from '../../providers'
 import type { BaseFieldProps } from '../../types'
 
-type CheckboxGroupValue = string[]
+type CheckboxGroupFieldProps<TFieldValues extends FieldValues> =
+  BaseFieldProps<TFieldValues> &
+    Partial<
+      Pick<
+        ComponentProps<typeof CheckboxGroup>,
+        | 'className'
+        | 'helper'
+        | 'onChange'
+        | 'required'
+        | 'direction'
+        | 'children'
+        | 'value'
+        | 'error'
+        | 'legend'
+      >
+    > &
+    Required<Pick<ComponentProps<typeof CheckboxGroup>, 'legend' | 'name'>>
 
-type CheckboxGroupFieldProps<
-  T = CheckboxGroupValue,
-  K = string,
-> = BaseFieldProps<T, K> &
-  Partial<
-    Pick<
-      ComponentProps<typeof CheckboxGroup>,
-      | 'className'
-      | 'helper'
-      | 'onChange'
-      | 'required'
-      | 'direction'
-      | 'children'
-      | 'value'
-      | 'error'
-      | 'legend'
-    >
-  > &
-  Required<Pick<ComponentProps<typeof CheckboxGroup>, 'legend' | 'name'>>
-
-export const CheckboxGroupField = ({
+export const CheckboxGroupField = <TFieldValues extends FieldValues>({
   legend,
-  value,
   className,
   helper,
   direction,
   children,
   onChange,
+  label = '',
   error: customError,
   name,
   required = false,
-}: CheckboxGroupFieldProps) => {
+}: CheckboxGroupFieldProps<TFieldValues>) => {
   const { getError } = useErrors()
 
-  const { fields, meta } = useFieldArray(name, {
-    type: 'checkbox',
-    value,
-    validate: localValue =>
-      required && localValue?.length === 0 ? 'Required' : undefined,
-  })
-
-  const error = getError({
-    label: legend,
-    meta,
-    value: fields.value,
-    name,
-  })
-
   return (
-    <CheckboxGroup
-      legend={legend}
-      name={fields.name}
-      value={fields.value}
-      onChange={event => {
-        if (fields.value?.includes(event.currentTarget.value)) {
-          fields.remove(fields.value.indexOf(event.currentTarget?.value))
-        } else {
-          fields.push(event.currentTarget.value)
-        }
+    <Controller
+      name={name}
+      render={({ field, fieldState: { error } }) => (
+        <CheckboxGroup
+          legend={legend}
+          name={name}
+          value={field.value}
+          onChange={event => {
+            const fieldValue = field.value as string[]
+            if (fieldValue?.includes(event.currentTarget.value)) {
+              field.onChange(
+                fieldValue?.filter(
+                  currentValue => currentValue !== event.currentTarget.value,
+                ),
+              )
+            } else {
+              field.onChange([...field.value, event.currentTarget.value])
+            }
 
-        onChange?.(event)
-      }}
-      error={error ?? customError}
-      className={className}
-      direction={direction}
-      helper={helper}
-      required={required}
-    >
-      {children}
-    </CheckboxGroup>
+            onChange?.(event)
+          }}
+          error={getError({ label }, error) ?? customError}
+          className={className}
+          direction={direction}
+          helper={helper}
+          required={required}
+        >
+          {children}
+        </CheckboxGroup>
+      )}
+    />
   )
 }
 
diff --git a/packages/form/src/components/DateField/__stories__/MinMaxWithTimeField.stories.tsx b/packages/form/src/components/DateField/__stories__/MinMaxWithTimeField.stories.tsx
index 2293e2cc6c..909c138d0f 100644
--- a/packages/form/src/components/DateField/__stories__/MinMaxWithTimeField.stories.tsx
+++ b/packages/form/src/components/DateField/__stories__/MinMaxWithTimeField.stories.tsx
@@ -5,8 +5,6 @@ import { DateField } from '..'
 import { Submit } from '../../Submit'
 import { TimeField } from '../../TimeField'
 
-const now = new Date()
-
 export const MinMaxDateWithTimeField: StoryFn<
   ComponentProps<typeof DateField>
 > = ({ name, minDate, maxDate, required }) => (
@@ -14,7 +12,6 @@ export const MinMaxDateWithTimeField: StoryFn<
     <DateField
       name={name}
       minDate={minDate}
-      initialValue={now}
       maxDate={maxDate}
       required={required}
     />
diff --git a/packages/form/src/components/DateField/__tests__/__snapshots__/index.tsx.snap b/packages/form/src/components/DateField/__tests__/__snapshots__/index.tsx.snap
index 5e16540339..6379e3f1d6 100644
--- a/packages/form/src/components/DateField/__tests__/__snapshots__/index.tsx.snap
+++ b/packages/form/src/components/DateField/__tests__/__snapshots__/index.tsx.snap
@@ -279,9 +279,7 @@ exports[`DateField should render correctly 1`] = `
   min-height: 24px;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class="cache-b59ts5 e1bm75lk2"
     >
@@ -625,9 +623,7 @@ exports[`DateField should render correctly disabled 1`] = `
   min-height: 24px;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class="cache-b59ts5 e1bm75lk2"
     >
@@ -968,9 +964,7 @@ exports[`DateField should trigger events 1`] = `
   min-height: 24px;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class="cache-b59ts5 e1bm75lk2"
     >
diff --git a/packages/form/src/components/DateField/__tests__/index.tsx b/packages/form/src/components/DateField/__tests__/index.tsx
index a8fc465c24..7dcf3fccf2 100644
--- a/packages/form/src/components/DateField/__tests__/index.tsx
+++ b/packages/form/src/components/DateField/__tests__/index.tsx
@@ -32,12 +32,7 @@ describe('DateField', () => {
     const onChange = jest.fn()
 
     return shouldMatchEmotionSnapshotFormWrapper(
-      <DateField
-        name="test"
-        onBlur={onBlur}
-        onChange={onChange}
-        initialValue={new Date('2022-09-01')}
-      />,
+      <DateField name="test" onBlur={onBlur} onChange={onChange} />,
       {
         transform: () => {
           const select = screen.getByRole('textbox')
@@ -53,6 +48,11 @@ describe('DateField', () => {
           // expect(onBlur).toBeCalledTimes(1)
         },
       },
+      {
+        initialValues: {
+          test: new Date('2022-09-01'),
+        },
+      },
     )
   })
 })
diff --git a/packages/form/src/components/DateField/index.tsx b/packages/form/src/components/DateField/index.tsx
index 86781ce3c9..00b90eab4b 100644
--- a/packages/form/src/components/DateField/index.tsx
+++ b/packages/form/src/components/DateField/index.tsx
@@ -1,39 +1,42 @@
 import { DateInput } from '@ultraviolet/ui'
-import type { FieldState } from 'final-form'
 import type { ComponentProps, FocusEvent } from 'react'
-import { useFormField } from '../../hooks'
+import type { FieldValues } from 'react-hook-form'
+import { Controller } from 'react-hook-form'
 import { useErrors } from '../../providers'
 import type { BaseFieldProps } from '../../types'
+import { maxDateValidator } from '../../validators/maxDate'
+import { minDateValidator } from '../../validators/minDate'
 
 type DateExtends = Date | [Date | null, Date | null]
 
-type DateFieldProps = BaseFieldProps<DateExtends> &
-  Omit<
-    ComponentProps<typeof DateInput>,
-    | 'maxDate'
-    | 'minDate'
-    | 'disabled'
-    | 'required'
-    | 'locale'
-    | 'name'
-    | 'onChange'
-    | 'onFocus'
-    | 'onBlur'
-    | 'autoFocus'
-    | 'startDate'
-    | 'endDate'
-  > & {
-    name: string
-    maxDate?: Date
-    minDate?: Date
-    disabled?: boolean
-    required?: boolean
-    locale?: string
-    onChange?: (value: Date | null) => void
-    onBlur?: (event: FocusEvent<HTMLElement>) => void
-    onFocus?: (value: FocusEvent<HTMLElement>) => void
-    autoFocus?: boolean
-  }
+type DateFieldProps<TFieldValues extends FieldValues> =
+  BaseFieldProps<TFieldValues> &
+    Omit<
+      ComponentProps<typeof DateInput>,
+      | 'maxDate'
+      | 'minDate'
+      | 'disabled'
+      | 'required'
+      | 'locale'
+      | 'name'
+      | 'onChange'
+      | 'onFocus'
+      | 'onBlur'
+      | 'autoFocus'
+      | 'stardDate'
+      | 'endDate'
+    > & {
+      name: string
+      maxDate?: Date
+      minDate?: Date
+      disabled?: boolean
+      required?: boolean
+      locale?: string
+      onChange?: (value: Date | null) => void
+      onBlur?: (event: FocusEvent<HTMLElement>) => void
+      onFocus?: (value: FocusEvent<HTMLElement>) => void
+      autoFocus?: boolean
+    }
 
 const parseDate = (value: string | Date): Date =>
   typeof value === 'string' ? new Date(value) : value
@@ -41,102 +44,87 @@ const parseDate = (value: string | Date): Date =>
 const isEmpty = (value?: Date | string): boolean =>
   typeof value === 'string' ? value === '' : value === undefined
 
-export const DateField = ({
+export const DateField = <TFieldValues extends FieldValues>({
   required,
   name,
   label = '',
-  validate,
   format,
   locale,
   maxDate,
   minDate,
-  initialValue,
   disabled,
-  value: inputVal,
   onChange,
   onBlur,
   onFocus,
-  formatOnBlur,
+  rules,
   autoFocus = false,
   excludeDates,
   selectsRange,
   'data-testid': dataTestId,
-}: DateFieldProps) => {
+}: DateFieldProps<TFieldValues>) => {
   const { getError } = useErrors()
 
-  const { input, meta } = useFormField<DateExtends>(name, {
-    disabled,
-    formatOnBlur,
-    initialValue,
-    maxDate,
-    minDate,
-    required,
-    validate,
-    value: inputVal,
-  })
-
-  const error = getError({
-    label,
-    maxDate,
-    meta: meta as FieldState<unknown>,
-    minDate,
-    name,
-    value: input.value,
-  })
-
   return (
-    <DateInput
-      label={label}
-      format={
-        format ||
-        (value => (value ? parseDate(value).toLocaleDateString() : ''))
-      }
-      locale={locale}
-      required={required}
-      value={input.value as Date}
-      onChange={(val: DateExtends | null) => {
-        if (val && val instanceof Date) {
-          onChange?.(val)
-          const newDate = parseDate(val)
-          if (isEmpty(input.value as Date)) {
-            input.onChange(newDate)
+    <Controller
+      name={name}
+      rules={{
+        ...rules,
+        validate: {
+          ...rules?.validate,
+          minDate: minDateValidator(minDate),
+          maxDate: maxDateValidator(maxDate),
+        },
+        required,
+      }}
+      render={({ field, fieldState: { error } }) => (
+        <DateInput
+          name={field.name}
+          label={label}
+          value={field.value}
+          format={
+            format ||
+            (value => (value ? parseDate(value).toLocaleDateString() : ''))
+          }
+          locale={locale}
+          required={required}
+          onChange={(val: DateExtends | null) => {
+            if (val && val instanceof Date) {
+              onChange?.(val)
+              const newDate = parseDate(val)
+              if (isEmpty(field.value as Date)) {
+                field.onChange(newDate)
 
-            return
+                return
+              }
+              const currentDate = parseDate(field.value as Date)
+              newDate.setHours(currentDate.getHours(), currentDate.getMinutes())
+              field.onChange(newDate)
+            }
+          }}
+          onBlur={(e: FocusEvent<HTMLElement>) => {
+            field.onBlur()
+            onBlur?.(e)
+          }}
+          onFocus={onFocus}
+          maxDate={maxDate}
+          minDate={minDate}
+          error={getError({ minDate, maxDate, label }, error)}
+          disabled={disabled}
+          autoFocus={autoFocus}
+          excludeDates={excludeDates}
+          data-testid={dataTestId}
+          startDate={
+            selectsRange
+              ? (field.value as [Date | null, Date | null])[0]
+              : undefined
           }
-          const currentDate = parseDate(input.value as Date)
-          newDate.setHours(currentDate.getHours(), currentDate.getMinutes())
-          input.onChange(newDate)
-        } else if (Array.isArray(val)) {
-          input.onChange(val)
-        }
-      }}
-      onBlur={(e: FocusEvent<HTMLElement>) => {
-        input.onBlur(e)
-        onBlur?.(e)
-      }}
-      onFocus={(e: FocusEvent<HTMLElement>) => {
-        input.onFocus(e)
-        onFocus?.(e)
-      }}
-      maxDate={maxDate}
-      minDate={minDate}
-      startDate={
-        selectsRange
-          ? (input.value as [Date | null, Date | null])[0]
-          : undefined
-      }
-      endDate={
-        selectsRange
-          ? (input.value as [Date | null, Date | null])[1]
-          : undefined
-      }
-      error={error}
-      disabled={disabled}
-      autoFocus={autoFocus}
-      name={input.name}
-      data-testid={dataTestId}
-      excludeDates={excludeDates}
-      selectsRange={selectsRange}
+          endDate={
+            selectsRange
+              ? (field.value as [Date | null, Date | null])[1]
+              : undefined
+          }
+        />
+      )}
     />
   )
 }
diff --git a/packages/form/src/components/Form/__stories__/Playground.stories.tsx b/packages/form/src/components/Form/__stories__/Playground.stories.tsx
index b289aa107a..1e2aa23e17 100644
--- a/packages/form/src/components/Form/__stories__/Playground.stories.tsx
+++ b/packages/form/src/components/Form/__stories__/Playground.stories.tsx
@@ -1,11 +1,11 @@
 import type { StoryFn } from '@storybook/react'
-import { Checkbox, Stack } from '@ultraviolet/ui'
-import type { ChangeEvent } from 'react'
-import { useState } from 'react'
+import { Stack } from '@ultraviolet/ui'
+import { useForm } from 'react-hook-form'
 import {
   CheckboxField,
   DateField,
   Form,
+  NumberInputField,
   RadioField,
   SelectInputField,
   SelectableCardField,
@@ -18,20 +18,47 @@ import {
 } from '../..'
 import { emailRegex, mockErrors } from '../../../mocks/mockErrors'
 
-export const Playground: StoryFn<typeof Form> = args => {
-  const [state, setState] = useState(false)
+type FormValues = {
+  receiveEmailUpdates: boolean
+  choice: string
+  tags: string[]
+  selectableCard: string
+  disableName: boolean
+  email: string
+}
+
+export const Playground: StoryFn<typeof Form> = () => {
+  const methods = useForm({
+    mode: 'onChange',
+    defaultValues: {
+      receiveEmailUpdates: true,
+      choice: '2',
+      tags: ['cloud', 'of', 'choice'],
+      selectableCard: '1',
+      disableName: false,
+      email: 'email',
+    },
+  })
+
+  const disableName = methods.watch('disableName')
 
   return (
-    <Form {...args}>
+    <Form<FormValues>
+      errors={mockErrors}
+      methods={methods}
+      onRawSubmit={() =>
+        new Promise(rejects => {
+          setTimeout(
+            () => rejects({ 'FINAL_FORM/form-error': 'SERVER ERROR' }),
+            5000,
+          )
+        })
+      }
+    >
       <Stack gap={3}>
-        <Checkbox
-          checked={state}
-          onChange={(event: ChangeEvent<HTMLInputElement>) =>
-            setState(event.target.checked)
-          }
-        >
+        <CheckboxField name="disableName">
           I&apos;m disabling the field name to remove validation
-        </Checkbox>
+        </CheckboxField>
         <Stack gap={2} direction="row">
           <RadioField name="choice" value="1" required label="1" />
           <RadioField name="choice" value="2" required label="2" />
@@ -59,17 +86,23 @@ export const Playground: StoryFn<typeof Form> = args => {
           name="name"
           label="Name"
           placeholder="John"
-          required
           autoComplete="given-name"
-          disabled={state}
+          required={!disableName}
+          disabled={disableName}
         />
+        <NumberInputField name="age" minValue={1} maxValue={99} />
         <TextInputField
           name="email"
           label="Email"
           type="email"
           placeholder="john.smith@email.com"
           required
-          regex={[emailRegex]}
+          rules={{
+            pattern: {
+              value: emailRegex,
+              message: 'Must be an email',
+            },
+          }}
         />
 
         <SelectInputField name="select" required>
@@ -95,14 +128,15 @@ export const Playground: StoryFn<typeof Form> = args => {
 }
 
 Playground.args = {
-  errors: mockErrors,
-  initialValues: {
-    receiveEmailUpdates: true,
-    choice: '2',
-    tags: ['cloud', 'of', 'choice'],
-    selectableCard: '1',
-  },
   onRawSubmit: values => {
     console.log('Submit', values)
   },
+  // initialValues: {
+  //   receiveEmailUpdates: true,
+  //   choice: '2',
+  //   tags: ['cloud', 'of', 'choice'],
+  //   selectableCard: '1',
+  //   disableName: false,
+  //   email: 'email'
+  // }
 }
diff --git a/packages/form/src/components/Form/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/Form/__tests__/__snapshots__/index.spec.tsx.snap
index c635a536db..766660eb75 100644
--- a/packages/form/src/components/Form/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/components/Form/__tests__/__snapshots__/index.spec.tsx.snap
@@ -2,9 +2,7 @@
 
 exports[`Form renders correctly  1`] = `
 <DocumentFragment>
-  <form
-    novalidate=""
-  >
+  <form>
     Test
   </form>
 </DocumentFragment>
@@ -12,9 +10,7 @@ exports[`Form renders correctly  1`] = `
 
 exports[`Form renders correctly with node children 1`] = `
 <DocumentFragment>
-  <form
-    novalidate=""
-  >
+  <form>
     Test
   </form>
 </DocumentFragment>
@@ -22,9 +18,7 @@ exports[`Form renders correctly with node children 1`] = `
 
 exports[`Form renders correctly with onRawSubmit 1`] = `
 <DocumentFragment>
-  <form
-    novalidate=""
-  >
+  <form>
     <button
       type="submit"
     >
@@ -36,9 +30,7 @@ exports[`Form renders correctly with onRawSubmit 1`] = `
 
 exports[`Form renders correctly with validate 1`] = `
 <DocumentFragment>
-  <form
-    novalidate=""
-  >
+  <form>
     Test
   </form>
 </DocumentFragment>
diff --git a/packages/form/src/components/Form/defaultErrors.ts b/packages/form/src/components/Form/defaultErrors.ts
new file mode 100644
index 0000000000..525a617785
--- /dev/null
+++ b/packages/form/src/components/Form/defaultErrors.ts
@@ -0,0 +1,21 @@
+import type { RequiredErrors } from '../../types'
+
+export const defaultErrors: RequiredErrors = {
+  maxDate: () => '',
+  maxLength: () => '',
+  minLength: () => '',
+  max: () => '',
+  min: () => '',
+  required: () => '',
+  pattern: () => '',
+  deps: () => '',
+  value: () => '',
+  onBlur: () => '',
+  disabled: () => '',
+  onChange: () => '',
+  validate: () => '',
+  setValueAs: () => '',
+  valueAsDate: () => '',
+  valueAsNumber: () => '',
+  shouldUnregister: () => '',
+}
diff --git a/packages/form/src/components/Form/index.tsx b/packages/form/src/components/Form/index.tsx
index b46361289c..a3dd3ee98a 100644
--- a/packages/form/src/components/Form/index.tsx
+++ b/packages/form/src/components/Form/index.tsx
@@ -1,75 +1,156 @@
-import arrayMutators from 'final-form-arrays'
-import type { JSX, ReactNode } from 'react'
+import type { ReactNode } from 'react'
+import React, { useMemo } from 'react'
 import type {
-  FormRenderProps,
-  FormProps as ReactFinalFormProps,
-} from 'react-final-form'
-import { Form as ReactFinalForm } from 'react-final-form'
+  DefaultValues,
+  FieldErrors,
+  FieldPath,
+  FieldValues,
+  UseFormHandleSubmit,
+  UseFormReturn,
+} from 'react-hook-form'
+import { FormProvider, useForm } from 'react-hook-form'
+import { FORM_ERROR } from '../../constants'
 import { ErrorProvider } from '../../providers'
 import type { FormErrors } from '../../types'
+import { defaultErrors } from './defaultErrors'
 
-export type FormProps<FormValues = unknown> = {
-  children?:
-    | ((props: FormRenderProps<FormValues, Partial<FormValues>>) => ReactNode)
-    | ReactNode
+type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never }
+type SingleXOR<T, U> = T | U extends object
+  ? (Without<T, U> & U) | (Without<U, T> & T)
+  : T | U
+
+export type XOR<T extends unknown[]> = T extends [infer Only]
+  ? Only
+  : T extends [infer A, infer B, ...infer Rest]
+  ? XOR<[SingleXOR<A, B>, ...Rest]>
+  : never
+
+type FormStateReturn<TFormValues extends FieldValues> = {
+  values: TFormValues
+  hasValidationErrors: boolean
+  errors: FieldErrors<TFormValues>
+  submitting: boolean
+  pristine: boolean
+  handleSubmit: () => Promise<void>
+  submitError: boolean
+  valid: boolean
+  form: {
+    change: UseFormReturn<TFormValues>['setValue']
+    reset: UseFormReturn<TFormValues>['reset']
+    submit: () => Promise<void>
+  }
+}
+
+type OnRawSubmitReturn =
+  | { [FORM_ERROR]?: string }
+  | undefined
+  | null
+  | string
+  | void
+  | boolean
+  | number
+
+type FormSubmitContextValue<TFieldValues extends FieldValues = FieldValues> = {
+  handleSubmit: ReturnType<UseFormHandleSubmit<TFieldValues>>
+}
+
+export const FormSubmitContext = React.createContext<FormSubmitContextValue>(
+  {} as FormSubmitContextValue,
+)
+
+export type FormProps<TFormValues extends FieldValues = FieldValues> = {
+  children?: ((props: FormStateReturn<TFormValues>) => ReactNode) | ReactNode
   errors: FormErrors
-  /**
-   * onRawSubmit is the base onSubmit from final-form
-   */
-  onRawSubmit: ReactFinalFormProps<FormValues, Partial<FormValues>>['onSubmit']
-  initialValues?: Partial<FormValues>
-  validateOnBlur?: ReactFinalFormProps<
-    FormValues,
-    Partial<FormValues>
-  >['validateOnBlur']
-  validate?: ReactFinalFormProps<FormValues, Partial<FormValues>>['validate']
-  /**
-   * The form name attribute
-   */
   name?: string
-  render?: ReactFinalFormProps<FormValues, Partial<FormValues>>['render']
-  mutators?: ReactFinalFormProps<FormValues, Partial<FormValues>>['mutators']
-  keepDirtyOnReinitialize?: boolean
-  className?: string
-}
+  validate?: (
+    values: TFormValues,
+  ) => Partial<Record<FieldPath<TFormValues>, string>>
+  onRawSubmit: (
+    data: TFormValues,
+    formState: {
+      reset: UseFormReturn<TFormValues>['reset']
+      resetFieldState: UseFormReturn<TFormValues>['resetField']
+      restart: () => void
+      change: UseFormReturn<TFormValues>['setValue']
+    },
+  ) => Promise<OnRawSubmitReturn> | OnRawSubmitReturn
+} & XOR<
+  [
+    /**
+     * @deprecated
+     */
+    { initialValues?: DefaultValues<TFormValues> },
+    { methods: UseFormReturn<TFormValues> },
+  ]
+>
 
-export const Form = <FormValues,>({
+export const Form = <TFormValues extends FieldValues>({
   children,
-  onRawSubmit,
-  errors,
+  methods: methodsProp,
   initialValues,
-  validateOnBlur,
-  validate,
+  errors,
+  onRawSubmit,
   name,
-  render,
-  mutators,
-  keepDirtyOnReinitialize,
-  className,
-}: FormProps<FormValues>): JSX.Element => (
-  <ReactFinalForm
-    initialValues={initialValues}
-    validateOnBlur={validateOnBlur}
-    validate={validate}
-    mutators={{
-      ...arrayMutators,
-      ...mutators,
-    }}
-    onSubmit={onRawSubmit}
-    render={
-      render ??
-      (renderProps => (
-        <ErrorProvider errors={errors}>
+}: FormProps<TFormValues>) => {
+  const methodsHook = useForm({
+    defaultValues: initialValues,
+    mode: 'onChange',
+  })
+
+  const methods = !methodsProp ? methodsHook : methodsProp
+
+  const handleSubmit = methods.handleSubmit(async values => {
+    const result = await onRawSubmit(values, {
+      reset: methods.reset,
+      resetFieldState: methods.resetField,
+      restart: () => methods.reset(initialValues),
+      change: methods.setValue,
+    })
+    if (result && typeof result !== 'boolean' && typeof result !== 'number') {
+      methods.setError('root.submit', {
+        type: 'custom',
+        message: typeof result === 'object' ? result[FORM_ERROR] : result,
+      })
+    }
+  })
+
+  const formSubmitContextValue = useMemo(
+    () => ({ handleSubmit }),
+    [handleSubmit],
+  )
+
+  return (
+    <FormProvider {...methods}>
+      <FormSubmitContext.Provider value={formSubmitContextValue}>
+        <ErrorProvider errors={{ ...defaultErrors, ...errors }}>
           <form
-            noValidate
+            onSubmit={async e => {
+              e.preventDefault()
+              e.stopPropagation()
+              await handleSubmit(e)
+            }}
             name={name}
-            onSubmit={renderProps.handleSubmit}
-            className={className}
           >
-            {typeof children === 'function' ? children(renderProps) : children}
+            {typeof children === 'function'
+              ? children({
+                  values: methods.watch(),
+                  hasValidationErrors: !methods.formState.isValid,
+                  errors: methods.formState.errors,
+                  submitting: methods.formState.isSubmitting,
+                  pristine: !methods.formState.isDirty,
+                  handleSubmit,
+                  submitError: !!methods.formState.errors?.root?.['submit'],
+                  valid: methods.formState.isValid,
+                  form: {
+                    change: methods.setValue,
+                    reset: methods.reset,
+                    submit: handleSubmit,
+                  },
+                })
+              : children}
           </form>
         </ErrorProvider>
-      ))
-    }
-    keepDirtyOnReinitialize={keepDirtyOnReinitialize}
-  />
-)
+      </FormSubmitContext.Provider>
+    </FormProvider>
+  )
+}
diff --git a/packages/form/src/components/FormSpy/index.tsx b/packages/form/src/components/FormSpy/index.tsx
new file mode 100644
index 0000000000..cc0e528759
--- /dev/null
+++ b/packages/form/src/components/FormSpy/index.tsx
@@ -0,0 +1,24 @@
+import { useEffect } from 'react'
+import type { DeepPartial, FieldValues } from 'react-hook-form'
+import { useForm } from 'react-hook-form'
+
+type FormSpyProps<TFieldValues extends FieldValues> = {
+  onChange?: (values: { values: DeepPartial<TFieldValues> }) => void
+}
+
+/**
+ * @deprecated
+ */
+export const FormSpy = <TFieldValues extends FieldValues>({
+  onChange,
+}: FormSpyProps<TFieldValues>) => {
+  const { watch } = useForm<TFieldValues>()
+
+  useEffect(() => {
+    const subscription = watch(values => onChange?.({ values }))
+
+    return () => subscription.unsubscribe()
+  }, [watch, onChange])
+
+  return null
+}
diff --git a/packages/form/src/components/NumberInputField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/NumberInputField/__tests__/__snapshots__/index.spec.tsx.snap
index f70f6f9c46..1c3507bc55 100644
--- a/packages/form/src/components/NumberInputField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/components/NumberInputField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -288,9 +288,7 @@ exports[`NumberInputField should render correctly 1`] = `
   min-height: 26px;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class="cache-1civgmb ehpbis70"
     >
@@ -582,9 +580,7 @@ exports[`NumberInputField should render correctly disabled 1`] = `
   margin-right: 8px;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class="cache-1civgmb ehpbis70"
     >
@@ -624,9 +620,9 @@ exports[`NumberInputField should render correctly disabled 1`] = `
               disabled=""
               id=":r5:"
               name="test"
-              style="width: 16px;"
+              style="width: 32px;"
               type="number"
-              value="0"
+              value="10"
             />
             <span
               class="cache-epkb7s exvap481"
@@ -944,9 +940,7 @@ exports[`NumberInputField should trigger event onMinCrossed & onMaxCrossed 1`] =
   min-height: 26px;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class="cache-1civgmb ehpbis70"
     >
@@ -1247,9 +1241,7 @@ exports[`NumberInputField should trigger events correctly 1`] = `
   margin-right: 8px;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class="cache-1civgmb ehpbis70"
     >
diff --git a/packages/form/src/components/NumberInputField/__tests__/index.spec.tsx b/packages/form/src/components/NumberInputField/__tests__/index.spec.tsx
index dee02f0f47..49e240e970 100644
--- a/packages/form/src/components/NumberInputField/__tests__/index.spec.tsx
+++ b/packages/form/src/components/NumberInputField/__tests__/index.spec.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, jest, test } from '@jest/globals'
-import { act, screen, waitFor } from '@testing-library/react'
+import { act, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { NumberInputField } from '../..'
 import {
@@ -12,12 +12,18 @@ import { Form } from '../../Form'
 describe('NumberInputField', () => {
   test('should render correctly', () =>
     shouldMatchEmotionSnapshotFormWrapper(
-      <NumberInputField name="test" value={0} />,
+      <NumberInputField name="test" />,
+      undefined,
+      {
+        initialValues: {
+          test: 0,
+        },
+      },
     ))
 
   test('should render correctly disabled', () =>
     shouldMatchEmotionSnapshotFormWrapper(
-      <NumberInputField name="test" value={10} disabled />,
+      <NumberInputField name="test" disabled />,
       {
         transform: () => {
           const input = screen.getByLabelText('Number Input')
@@ -30,6 +36,11 @@ describe('NumberInputField', () => {
           expect(inputPlus).toBeDisabled()
         },
       },
+      {
+        initialValues: {
+          test: 10,
+        },
+      },
     ))
 
   test('should trigger events correctly', () => {
@@ -37,7 +48,7 @@ describe('NumberInputField', () => {
     const onChange = jest.fn(() => {})
     const onBlur = jest.fn(() => {})
 
-    return shouldMatchEmotionSnapshotFormWrapper(
+    return shouldMatchEmotionSnapshot(
       <Form
         onRawSubmit={() => {}}
         errors={mockErrors}
@@ -92,30 +103,24 @@ describe('NumberInputField', () => {
       </Form>,
       {
         transform: async () => {
-          const input =
-            screen.getByLabelText<HTMLTextAreaElement>('Number Input')
-          // eslint-disable-next-line testing-library/no-node-access
-          if (input.parentElement) await userEvent.click(input.parentElement)
+          const input = screen.getByRole<HTMLInputElement>('spinbutton')
 
           // trigger onMinCrossed
           await userEvent.clear(input)
+          expect(input.value).toBe('')
           await userEvent.type(input, '1')
-          await waitFor(() => expect(input.value).toBe('1'))
-          act(() => {
-            input.blur()
-          })
-          await waitFor(() => expect(input.value).toBe('5'))
+          expect(input.value).toBe('1')
+          await userEvent.click(document.body)
+          expect(input.value).toBe('5')
           expect(onMinCrossed).toBeCalledTimes(1)
 
           // trigger onMaxCrossed
           await userEvent.clear(input)
           await userEvent.type(input, '100')
-          await waitFor(() => expect(input.value).toBe('100'))
-          act(() => {
-            input.blur()
-          })
-          await waitFor(() => expect(input.value).toBe('20'))
-          expect(onMinCrossed).toBeCalledTimes(1)
+          expect(input.value).toBe('100')
+          await userEvent.click(document.body)
+          expect(input.value).toBe('20')
+          expect(onMaxCrossed).toBeCalledTimes(1)
         },
       },
     )
diff --git a/packages/form/src/components/NumberInputField/index.tsx b/packages/form/src/components/NumberInputField/index.tsx
index 4c404f970a..99a2b4f123 100644
--- a/packages/form/src/components/NumberInputField/index.tsx
+++ b/packages/form/src/components/NumberInputField/index.tsx
@@ -1,38 +1,33 @@
 import { NumberInput } from '@ultraviolet/ui'
 import type { ComponentProps, FocusEvent, FocusEventHandler } from 'react'
-import { useFormField } from '../../hooks'
+import type { FieldValues } from 'react-hook-form'
+import { Controller } from 'react-hook-form'
+import { useErrors } from '../../providers'
 import type { BaseFieldProps } from '../../types'
 
-type NumberInputValue = NonNullable<ComponentProps<typeof NumberInput>['value']>
+type NumberInputValueFieldProps<TFieldValues extends FieldValues> =
+  BaseFieldProps<TFieldValues> &
+    Partial<
+      Pick<
+        ComponentProps<typeof NumberInput>,
+        | 'disabled'
+        | 'maxValue'
+        | 'minValue'
+        | 'onMaxCrossed'
+        | 'onMinCrossed'
+        | 'size'
+        | 'step'
+        | 'text'
+        | 'value'
+        | 'onChange'
+        | 'className'
+      >
+    > & {
+      onBlur?: FocusEventHandler<HTMLInputElement>
+      onFocus?: FocusEventHandler<HTMLInputElement>
+    }
 
-type NumberInputValueFieldProps<
-  T = NumberInputValue,
-  K = string,
-> = BaseFieldProps<T, K> &
-  Partial<
-    Pick<
-      ComponentProps<typeof NumberInput>,
-      | 'disabled'
-      | 'maxValue'
-      | 'minValue'
-      | 'onMaxCrossed'
-      | 'onMinCrossed'
-      | 'size'
-      | 'step'
-      | 'text'
-      | 'value'
-      | 'onChange'
-      | 'className'
-      | 'data-testid'
-    >
-  > & {
-    name: string
-    required?: boolean
-    onBlur?: FocusEventHandler<HTMLInputElement>
-    onFocus?: FocusEventHandler<HTMLInputElement>
-  }
-
-export const NumberInputField = ({
+export const NumberInputField = <TFieldValues extends FieldValues>({
   disabled,
   maxValue,
   minValue,
@@ -46,48 +41,51 @@ export const NumberInputField = ({
   size,
   step,
   text,
-  validate,
-  value,
+  rules,
   className,
-  'data-testid': dataTestId,
-}: NumberInputValueFieldProps) => {
-  const { input } = useFormField<number>(name, {
-    disabled,
-    required,
-    type: 'number',
-    validate,
-    value,
-    defaultValue: 0,
-    max: maxValue,
-    min: minValue,
-  })
+  label,
+}: NumberInputValueFieldProps<TFieldValues>) => {
+  const { getError } = useErrors()
 
   return (
-    <NumberInput
+    <Controller
       name={name}
-      disabled={disabled}
-      onBlur={(event: FocusEvent<HTMLInputElement>) => {
-        input.onBlur(event)
-        onBlur?.(event)
-      }}
-      onChange={event => {
-        input.onChange(event)
-        onChange?.(event)
-      }}
-      onFocus={(event: FocusEvent<HTMLInputElement>) => {
-        input.onFocus(event)
-        onFocus?.(event)
+      rules={{
+        required,
+        max: maxValue,
+        min: minValue,
+        ...rules,
       }}
-      maxValue={maxValue}
-      minValue={minValue}
-      onMinCrossed={onMinCrossed}
-      onMaxCrossed={onMaxCrossed}
-      size={size}
-      step={step}
-      text={text}
-      value={input.value}
-      className={className}
-      data-testid={dataTestId}
+      render={({ field, fieldState: { error } }) => (
+        <NumberInput
+          name={field.name}
+          value={field.value}
+          disabled={disabled}
+          onBlur={(event: FocusEvent<HTMLInputElement>) => {
+            field.onBlur()
+            onBlur?.(event)
+          }}
+          onChange={event => {
+            // React hook form doesnt allow undefined values after definition https://react-hook-form.com/docs/usecontroller/controller (that make sense)
+            field.onChange(event ?? null)
+            onChange?.(event)
+          }}
+          onFocus={onFocus}
+          maxValue={maxValue}
+          minValue={minValue}
+          onMinCrossed={onMinCrossed}
+          onMaxCrossed={onMaxCrossed}
+          size={size}
+          step={step}
+          text={text}
+          className={className}
+          label={label}
+          error={getError(
+            { label: label ?? '', max: maxValue, min: minValue },
+            error,
+          )}
+        />
+      )}
     />
   )
 }
diff --git a/packages/form/src/components/RadioField/__stories__/Checked.stories.tsx b/packages/form/src/components/RadioField/__stories__/Checked.stories.tsx
index ba918f3260..e27dca3c9e 100644
--- a/packages/form/src/components/RadioField/__stories__/Checked.stories.tsx
+++ b/packages/form/src/components/RadioField/__stories__/Checked.stories.tsx
@@ -1,9 +1,9 @@
 import type { StoryFn } from '@storybook/react'
 import { RadioField } from '..'
-import type { FormProps } from '../../Form'
+import type { FormErrors } from '../../../types'
 import { Form } from '../../Form'
 
-export const Checked: StoryFn<FormProps> = ({ errors }) => (
+export const Checked: StoryFn<{ errors: FormErrors }> = ({ errors }) => (
   <Form onRawSubmit={() => {}} errors={errors} initialValues={{ foo: 'bar' }}>
     <RadioField name="foo" value="bar" label="Checked Radio" />
   </Form>
diff --git a/packages/form/src/components/RadioField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/RadioField/__tests__/__snapshots__/index.spec.tsx.snap
index e71b7e34f9..6e1adffb95 100644
--- a/packages/form/src/components/RadioField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/components/RadioField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -151,9 +151,7 @@ exports[`RadioField should render correctly 1`] = `
   fill: #ffffff;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class="cache-16otux ehpbis70"
     >
@@ -358,9 +356,7 @@ exports[`RadioField should render correctly checked 1`] = `
   fill: #ffffff;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class="cache-16otux ehpbis70"
     >
@@ -566,9 +562,7 @@ exports[`RadioField should render correctly disabled 1`] = `
   fill: #ffffff;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class="cache-16otux ehpbis70"
     >
@@ -774,9 +768,7 @@ exports[`RadioField should trigger events correctly 1`] = `
   fill: #ffffff;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class="cache-16otux ehpbis70"
     >
diff --git a/packages/form/src/components/RadioField/index.tsx b/packages/form/src/components/RadioField/index.tsx
index cb23c4f194..da5650080c 100644
--- a/packages/form/src/components/RadioField/index.tsx
+++ b/packages/form/src/components/RadioField/index.tsx
@@ -1,13 +1,14 @@
 import { Radio } from '@ultraviolet/ui'
-import type { FieldState } from 'final-form'
 import type { ComponentProps, JSX } from 'react'
-import { useFormField } from '../../hooks'
+import type { FieldValues } from 'react-hook-form'
+import { Controller } from 'react-hook-form'
 import { useErrors } from '../../providers'
 import type { BaseFieldProps } from '../../types'
 
-type RadioValue = NonNullable<ComponentProps<typeof Radio>['value']>
-
-type RadioFieldProps<T = RadioValue, K = string> = BaseFieldProps<T, K> &
+type RadioFieldProps<TFieldValues extends FieldValues> = Omit<
+  BaseFieldProps<TFieldValues>,
+  'label'
+> &
   Partial<
     Pick<
       ComponentProps<typeof Radio>,
@@ -27,63 +28,57 @@ type RadioFieldProps<T = RadioValue, K = string> = BaseFieldProps<T, K> &
     required?: boolean
   }
 
-export const RadioField = ({
+export const RadioField = <TFieldValues extends FieldValues>({
   className,
   'data-testid': dataTestId,
   disabled,
   id,
-  label = '',
   name,
   onBlur,
+  label = '',
   onChange,
   onFocus,
   required,
-  validate,
   value,
+  rules,
   tooltip,
-}: RadioFieldProps): JSX.Element => {
+}: RadioFieldProps<TFieldValues>): JSX.Element => {
   const { getError } = useErrors()
 
-  const { input, meta } = useFormField(name, {
-    required,
-    type: 'radio',
-    validate,
-    value,
-  })
-
-  const error = getError({
-    disabled,
-    label: label as string,
-    meta: meta as FieldState<unknown>,
-    name,
-    value: input.value,
-  })
-
   return (
-    <Radio
-      checked={input.checked}
-      className={className}
-      data-testid={dataTestId}
-      disabled={disabled}
-      error={error}
-      id={id}
-      name={input.name}
-      onChange={event => {
-        input.onChange(event)
-        onChange?.(event)
-      }}
-      onBlur={event => {
-        input.onBlur(event)
-        onBlur?.(event)
-      }}
-      onFocus={event => {
-        input.onFocus(event)
-        onFocus?.(event)
+    <Controller
+      name={name}
+      rules={{
+        required,
+        ...rules,
       }}
-      required={required}
-      value={input.value}
-      label={label}
-      tooltip={tooltip}
+      render={({ field, fieldState: { error } }) => (
+        <Radio
+          name={field.name}
+          checked={field.value === value}
+          className={className}
+          data-testid={dataTestId}
+          disabled={disabled}
+          error={getError(
+            { label: typeof label === 'string' ? label : '' },
+            error,
+          )}
+          id={id}
+          onChange={event => {
+            field.onChange(value)
+            onChange?.(event)
+          }}
+          onBlur={event => {
+            field.onBlur()
+            onBlur?.(event)
+          }}
+          onFocus={onFocus}
+          required={required}
+          value={value ?? ''}
+          label={label}
+          tooltip={tooltip}
+        />
+      )}
     />
   )
 }
diff --git a/packages/form/src/components/RadioGroupField/__stories__/Required.stories.tsx b/packages/form/src/components/RadioGroupField/__stories__/Required.stories.tsx
index 550118c521..079afc2317 100644
--- a/packages/form/src/components/RadioGroupField/__stories__/Required.stories.tsx
+++ b/packages/form/src/components/RadioGroupField/__stories__/Required.stories.tsx
@@ -1,11 +1,11 @@
 import type { StoryFn } from '@storybook/react'
 import { Stack } from '@ultraviolet/ui'
-import { useFormState } from 'react-final-form'
+import { useFormContext } from 'react-hook-form'
 import { RadioGroupField } from '..'
 import { Submit } from '../..'
 
 export const RequiredStory: StoryFn<typeof RadioGroupField> = args => {
-  const { values } = useFormState()
+  const { watch } = useFormContext()
 
   return (
     <Stack gap={1}>
@@ -15,7 +15,7 @@ export const RequiredStory: StoryFn<typeof RadioGroupField> = args => {
       </RadioGroupField>
       <Submit>Submit</Submit>
       <span>
-        <b>Form content:</b> {JSON.stringify(values)}
+        <b>Form content:</b> {JSON.stringify(watch())}
       </span>
     </Stack>
   )
diff --git a/packages/form/src/components/RadioGroupField/__stories__/Template.stories.tsx b/packages/form/src/components/RadioGroupField/__stories__/Template.stories.tsx
index 272be76309..eed8b45fa8 100644
--- a/packages/form/src/components/RadioGroupField/__stories__/Template.stories.tsx
+++ b/packages/form/src/components/RadioGroupField/__stories__/Template.stories.tsx
@@ -1,14 +1,14 @@
 import type { StoryFn } from '@storybook/react'
 import { Stack } from '@ultraviolet/ui'
 import type { ComponentProps } from 'react'
-import { useFormState } from 'react-final-form'
+import { useFormContext } from 'react-hook-form'
 import { Form, RadioGroupField } from '../..'
 import { mockErrors } from '../../../mocks'
 
 const RadioGroupFieldStory: StoryFn<
   ComponentProps<typeof RadioGroupField>
 > = args => {
-  const { values } = useFormState()
+  const { watch } = useFormContext()
 
   return (
     <Stack gap={2}>
@@ -17,7 +17,7 @@ const RadioGroupFieldStory: StoryFn<
         <RadioGroupField.Radio name="radio-2" value="radio-2" label="Radio 2" />
       </RadioGroupField>
       <span>
-        <b>Form content:</b> {JSON.stringify(values)}
+        <b>Form content:</b> {JSON.stringify(watch())}
       </span>
     </Stack>
   )
diff --git a/packages/form/src/components/RadioGroupField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/RadioGroupField/__tests__/__snapshots__/index.spec.tsx.snap
index 63dc127313..2c29f19c5d 100644
--- a/packages/form/src/components/RadioGroupField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/components/RadioGroupField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -214,9 +214,7 @@ exports[`RadioField should render correctly checked 1`] = `
   fill: #ffffff;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class="cache-1civgmb ehpbis70"
     >
@@ -554,9 +552,7 @@ exports[`RadioField should trigger events correctly 1`] = `
   fill: #ffffff;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class="cache-1civgmb ehpbis70"
     >
diff --git a/packages/form/src/components/RadioGroupField/index.tsx b/packages/form/src/components/RadioGroupField/index.tsx
index f1b2f70da2..80918cde80 100644
--- a/packages/form/src/components/RadioGroupField/index.tsx
+++ b/packages/form/src/components/RadioGroupField/index.tsx
@@ -1,77 +1,69 @@
 import { RadioGroup } from '@ultraviolet/ui'
-import type { FieldState } from 'final-form'
 import type { ComponentProps, JSX } from 'react'
-import { useFormField } from '../../hooks'
+import type { FieldValues } from 'react-hook-form'
+import { Controller } from 'react-hook-form'
 import { useErrors } from '../../providers'
 import type { BaseFieldProps } from '../../types'
 
-type RadioValue = NonNullable<ComponentProps<typeof RadioGroup>['value']>
+type RadioGroupFieldProps<TFieldValues extends FieldValues> =
+  BaseFieldProps<TFieldValues> &
+    Partial<
+      Pick<
+        ComponentProps<typeof RadioGroup>,
+        | 'onChange'
+        | 'value'
+        | 'legend'
+        | 'children'
+        | 'required'
+        | 'name'
+        | 'error'
+        | 'helper'
+        | 'direction'
+      >
+    > & {
+      className?: string
+      name: string
+      required?: boolean
+    }
 
-type RadioGroupFieldProps<T = RadioValue, K = string> = BaseFieldProps<T, K> &
-  Partial<
-    Pick<
-      ComponentProps<typeof RadioGroup>,
-      | 'onChange'
-      | 'value'
-      | 'legend'
-      | 'children'
-      | 'required'
-      | 'name'
-      | 'error'
-      | 'helper'
-      | 'direction'
-    >
-  > & {
-    className?: string
-    name: string
-    required?: boolean
-  }
-
-export const RadioGroupField = ({
+export const RadioGroupField = <TFieldValues extends FieldValues>({
   className,
   legend = '',
   name,
   onChange,
   required,
-  validate,
-  value,
+  rules,
   children,
+  label = '',
   error: customError,
   helper,
   direction,
-}: RadioGroupFieldProps): JSX.Element => {
+}: RadioGroupFieldProps<TFieldValues>): JSX.Element => {
   const { getError } = useErrors()
 
-  const { input, meta } = useFormField(name, {
-    required,
-    validate,
-    value,
-  })
-
-  const error = getError({
-    label: legend,
-    meta: meta as FieldState<unknown>,
-    name,
-    value: input.value,
-  })
-
   return (
-    <RadioGroup
-      className={className}
-      name={input.name}
-      onChange={event => {
-        input.onChange(event)
-        onChange?.(event)
-      }}
-      required={required}
-      value={input.value}
-      legend={legend}
-      error={error ?? customError}
-      helper={helper}
-      direction={direction}
-    >
-      {children}
-    </RadioGroup>
+    <Controller
+      name={name}
+      rules={rules}
+      render={({ field, fieldState: { error } }) => (
+        <RadioGroup
+          className={className}
+          name={field.name}
+          onChange={event => {
+            field.onChange(event)
+            onChange?.(event)
+          }}
+          required={required}
+          value={field.value}
+          legend={legend}
+          error={getError({ label }, error) ?? customError}
+          helper={helper}
+          direction={direction}
+        >
+          {children}
+        </RadioGroup>
+      )}
+    />
   )
 }
 
diff --git a/packages/form/src/components/SelectInputField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/SelectInputField/__tests__/__snapshots__/index.spec.tsx.snap
index 7a364535ca..50acf24ee8 100644
--- a/packages/form/src/components/SelectInputField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/components/SelectInputField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -270,9 +270,7 @@ exports[`SelectInputField should display right value on grouped options 1`] = `
   padding-top: 2px;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class=" cache-1gb28ew-container-StyledContainer e11gt5pw4"
       data-testid="select-input-test"
@@ -625,9 +623,7 @@ exports[`SelectInputField should render correctly 1`] = `
   padding-top: 2px;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class=" cache-1gb28ew-container-StyledContainer e11gt5pw4"
       data-testid="select-input-test"
@@ -968,9 +964,7 @@ exports[`SelectInputField should render correctly disabled 1`] = `
   padding-top: 2px;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class=" cache-iwdjsb-container-StyledContainer e11gt5pw4"
       data-testid="select-input-test"
@@ -1321,9 +1315,7 @@ exports[`SelectInputField should render correctly multiple 1`] = `
   padding-top: 2px;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class=" cache-1gb28ew-container-StyledContainer e11gt5pw4"
       data-testid="select-input-test"
@@ -1680,9 +1672,7 @@ exports[`SelectInputField should render correctly with a disabled option 1`] = `
   padding-top: 2px;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class=" cache-1gb28ew-container-StyledContainer e11gt5pw4"
       data-testid="select-input-test"
@@ -2052,9 +2042,7 @@ exports[`SelectInputField should trigger events 1`] = `
   padding-top: 2px;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class=" cache-1gb28ew-container-StyledContainer e11gt5pw4"
       data-testid="select-input-test"
diff --git a/packages/form/src/components/SelectInputField/index.tsx b/packages/form/src/components/SelectInputField/index.tsx
index d168f37c2c..02ce4e9db9 100644
--- a/packages/form/src/components/SelectInputField/index.tsx
+++ b/packages/form/src/components/SelectInputField/index.tsx
@@ -1,6 +1,5 @@
 import type { CSSObject, Theme, css } from '@emotion/react'
 import { SelectInput } from '@ultraviolet/ui'
-import type { FieldState } from 'final-form'
 import type {
   ComponentProps,
   ForwardedRef,
@@ -8,9 +7,10 @@ import type {
   ReactNode,
 } from 'react'
 import { Children, useCallback, useMemo } from 'react'
+import type { FieldValues } from 'react-hook-form'
+import { Controller } from 'react-hook-form'
 import type { CommonProps, GroupBase, OptionProps, Props } from 'react-select'
 import type Select from 'react-select'
-import { useFormField } from '../../hooks'
 import { useErrors } from '../../providers'
 import type { BaseFieldProps } from '../../types'
 
@@ -67,8 +67,7 @@ type StateManagedSelect = typeof Select
 
 type SelectInputProps = Partial<
   SelectProps &
-    SelectStyleProps &
-    Pick<ComponentProps<typeof SelectInput>, 'data-testid'> & {
+    SelectStyleProps & {
       /**
        * Name of the animation
        */
@@ -96,56 +95,59 @@ type SelectInputOptionOrGroup = NonNullable<SelectInputOptions>[number]
 type SelectInputOption = { value: string; label: string }
 
 export type SelectInputFieldProps<
-  T extends SelectInputOptionOrGroup = SelectInputOptionOrGroup,
-> = BaseFieldProps<T> &
-  Pick<
-    SelectInputProps,
-    | 'animation'
-    | 'animationDuration'
-    | 'animationOnChange'
-    | 'children'
-    | 'className'
-    | 'disabled'
-    | 'error'
-    | 'id'
-    | 'inputId'
-    | 'isClearable'
-    | 'isLoading'
-    | 'isSearchable'
-    | 'menuPortalTarget'
-    | 'onBlur'
-    | 'onChange'
-    | 'onFocus'
-    | 'options'
-    | 'placeholder'
-    | 'readOnly'
-    | 'required'
-    | 'value'
-    | 'noTopLabel'
-    | 'noOptionsMessage'
-    | 'customStyle'
-    | 'data-testid'
+  TFieldValues extends FieldValues = FieldValues,
+> = BaseFieldProps<TFieldValues> &
+  Partial<
+    Pick<
+      SelectInputProps,
+      | 'animation'
+      | 'animationDuration'
+      | 'animationOnChange'
+      | 'children'
+      | 'className'
+      | 'disabled'
+      | 'error'
+      | 'id'
+      | 'inputId'
+      | 'isClearable'
+      | 'isLoading'
+      | 'isSearchable'
+      | 'menuPortalTarget'
+      | 'onBlur'
+      | 'onChange'
+      | 'onFocus'
+      | 'options'
+      | 'placeholder'
+      | 'readOnly'
+      | 'required'
+      | 'value'
+      | 'noTopLabel'
+      | 'noOptionsMessage'
+      | 'customStyle'
+    >
   > & {
     label?: string
+    multiple?: boolean
+    parse?: (value: unknown, name?: string) => unknown
+    format?: (value: unknown, name: string) => unknown
     maxLength?: number
     minLength?: number
     name: string
   }
 
-const identity = <T,>(x: T) => x
+const identity = (x: unknown) => x
+// const identity = <T,>(x: T) => x
 
-export const SelectInputField = <
-  T extends SelectInputOptionOrGroup = SelectInputOptionOrGroup,
->({
+export const SelectInputField = <TFieldValues extends FieldValues>({
   animation,
   animationDuration,
   animationOnChange,
   children,
   className,
   disabled,
-  error: errorProp,
-  format: formatProp = identity as NonNullable<BaseFieldProps<T>['format']>,
-  formatOnBlur,
+  // error: errorProp,
+  format: formatProp = identity,
+  // formatOnBlur,
   id,
   inputId,
   isClearable,
@@ -161,19 +163,15 @@ export const SelectInputField = <
   onChange,
   onFocus,
   options: optionsProp,
-  parse: parseProp = identity as NonNullable<BaseFieldProps<T>['parse']>,
+  parse: parseProp = identity,
   placeholder,
   readOnly,
   required,
-  value,
+  rules,
   noTopLabel,
   noOptionsMessage,
   customStyle,
-  validate,
-  'data-testid': dataTestId,
-}: SelectInputFieldProps<T>) => {
-  const { getError } = useErrors()
-
+}: SelectInputFieldProps<TFieldValues>) => {
   const options = useMemo(
     () =>
       optionsProp ||
@@ -198,7 +196,7 @@ export const SelectInputField = <
   )
 
   const format = useCallback(
-    (val: T) => {
+    (val: unknown) => {
       if (multiple) return formatProp(val, name) as SelectInputOption
 
       const find = (opts: SelectInputOptionOrGroup[], valueToFind: string) =>
@@ -235,75 +233,61 @@ export const SelectInputField = <
         }
       }
 
-      return formatProp(selected as T, name) as SelectInputOption
+      return formatProp(selected, name) as SelectInputOption
     },
     [formatProp, multiple, name, options],
   )
 
-  const { input, meta } = useFormField<T, HTMLElement, SelectInputOption>(
-    name,
-    {
-      disabled,
-      format,
-      formatOnBlur,
-      maxLength,
-      minLength: minLength || required ? 1 : undefined,
-      multiple,
-      parse,
-      required,
-      value,
-      validate,
-    },
-  )
-
-  const error = getError({
-    errorProp,
-    label,
-    meta: meta as FieldState<unknown>,
-    name,
-    value: input.value,
-  })
+  const { getError } = useErrors()
 
   return (
-    <SelectInput
-      animation={animation}
-      animationDuration={animationDuration}
-      animationOnChange={animationOnChange}
-      className={className}
-      disabled={disabled}
-      error={error}
-      id={id}
-      inputId={inputId}
-      isClearable={isClearable}
-      isLoading={isLoading}
-      isMulti={input.multiple}
-      customStyle={customStyle}
-      isSearchable={isSearchable}
-      menuPortalTarget={menuPortalTarget}
+    <Controller
       name={name}
-      onBlur={event => {
-        input.onBlur(event)
-        onBlur?.(event)
-      }}
-      onChange={(event, action) => {
-        input.onChange(event)
-        onChange?.(event, action)
+      rules={{
+        required,
+        minLength: minLength || required ? 1 : undefined,
+        maxLength,
+        ...rules,
       }}
-      onFocus={event => {
-        input.onFocus(event)
-        onFocus?.(event)
-      }}
-      options={options}
-      placeholder={placeholder}
-      readOnly={readOnly}
-      value={input.value}
-      noTopLabel={noTopLabel}
-      required={required}
-      noOptionsMessage={noOptionsMessage}
-      data-testid={dataTestId}
-    >
-      {children}
-    </SelectInput>
+      render={({ field, fieldState: { error } }) => (
+        <SelectInput
+          {...field}
+          animation={animation}
+          animationDuration={animationDuration}
+          animationOnChange={animationOnChange}
+          className={className}
+          disabled={disabled}
+          error={getError({ label, minLength, maxLength }, error)}
+          id={id}
+          inputId={inputId}
+          isClearable={isClearable}
+          isLoading={isLoading}
+          isMulti={multiple}
+          customStyle={customStyle}
+          isSearchable={isSearchable}
+          menuPortalTarget={menuPortalTarget}
+          onBlur={event => {
+            field.onBlur()
+            onBlur?.(event)
+          }}
+          onChange={(event, action) => {
+            field.onChange(parse(event))
+            onChange?.(event, action)
+          }}
+          onFocus={onFocus}
+          options={options}
+          placeholder={placeholder}
+          readOnly={readOnly}
+          noTopLabel={noTopLabel}
+          required={required}
+          // value={value}
+          value={format(field.value)}
+          noOptionsMessage={noOptionsMessage}
+        >
+          {children}
+        </SelectInput>
+      )}
+    />
   )
 }
 
diff --git a/packages/form/src/components/SelectableCardField/__stories__/Checked.stories.tsx b/packages/form/src/components/SelectableCardField/__stories__/Checked.stories.tsx
index 3d3c774461..461f20e089 100644
--- a/packages/form/src/components/SelectableCardField/__stories__/Checked.stories.tsx
+++ b/packages/form/src/components/SelectableCardField/__stories__/Checked.stories.tsx
@@ -1,10 +1,10 @@
 import type { StoryFn } from '@storybook/react'
 import { Stack } from '@ultraviolet/ui'
 import { SelectableCardField } from '..'
-import type { FormProps } from '../../Form'
+import type { FormErrors } from '../../../types'
 import { Form } from '../../Form'
 
-export const Checked: StoryFn<FormProps> = ({ errors }) => (
+export const Checked: StoryFn<{ errors: FormErrors }> = ({ errors }) => (
   <Form onRawSubmit={() => {}} errors={errors} initialValues={{ foo: 'bar' }}>
     <Stack gap={2}>
       <SelectableCardField name="foo" value="bar">
diff --git a/packages/form/src/components/SelectableCardField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/SelectableCardField/__tests__/__snapshots__/index.spec.tsx.snap
index f670bc21bd..e2c355e7e7 100644
--- a/packages/form/src/components/SelectableCardField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/components/SelectableCardField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -228,9 +228,7 @@ exports[`SelectableCardField should render correctly 1`] = `
   fill: #ffffff;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class="cache-gy87p5 e1s5n3hj1"
       data-checked="false"
@@ -516,9 +514,7 @@ exports[`SelectableCardField should render correctly checked 1`] = `
   fill: #ffffff;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class="cache-gy87p5 e1s5n3hj1"
       data-checked="true"
@@ -805,9 +801,7 @@ exports[`SelectableCardField should render correctly disabled 1`] = `
   fill: #ffffff;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class="cache-gy87p5 e1s5n3hj1"
       data-checked="false"
@@ -1094,9 +1088,7 @@ exports[`SelectableCardField should render correctly with errors 1`] = `
   fill: #ffffff;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class="cache-gy87p5 e1s5n3hj1"
       data-checked="false"
@@ -1387,9 +1379,7 @@ exports[`SelectableCardField should trigger events correctly 1`] = `
   fill: #ffffff;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class="cache-gy87p5 e1s5n3hj1"
       data-checked="true"
diff --git a/packages/form/src/components/SelectableCardField/index.tsx b/packages/form/src/components/SelectableCardField/index.tsx
index 9ed80009e6..ce98f9ebd7 100644
--- a/packages/form/src/components/SelectableCardField/index.tsx
+++ b/packages/form/src/components/SelectableCardField/index.tsx
@@ -1,18 +1,13 @@
 import { SelectableCard } from '@ultraviolet/ui'
-import type { FieldState } from 'final-form'
-import type { ComponentProps, JSX } from 'react'
-import { useFormField } from '../../hooks'
-import { useErrors } from '../../providers'
+import type { ComponentProps } from 'react'
+import type { FieldValues } from 'react-hook-form'
+import { Controller } from 'react-hook-form'
 import type { BaseFieldProps } from '../../types'
 
-type SelectableCardValue = NonNullable<
-  ComponentProps<typeof SelectableCard>['value']
->
-
-type SelectableCardFieldProps<
-  T = SelectableCardValue,
-  K = string,
-> = BaseFieldProps<T, K> &
+type SelectableCardFieldProps<TFieldValues extends FieldValues> = Omit<
+  BaseFieldProps<TFieldValues>,
+  'label'
+> &
   Partial<
     Pick<
       ComponentProps<typeof SelectableCard>,
@@ -28,15 +23,12 @@ type SelectableCardFieldProps<
       | 'name'
       | 'tooltip'
       | 'label'
-      | 'data-testid'
     >
   > & {
-    name: string
-    required?: boolean
     className?: string
   }
 
-export const SelectableCardField = ({
+export const SelectableCardField = <TFieldValues extends FieldValues>({
   name,
   value,
   onChange,
@@ -48,57 +40,44 @@ export const SelectableCardField = ({
   onFocus,
   onBlur,
   required,
-  validate,
   tooltip,
   id,
   label,
-  'data-testid': dataTestId,
-}: SelectableCardFieldProps): JSX.Element => {
-  const { getError } = useErrors()
-
-  const { input, meta } = useFormField(name, {
-    disabled,
-    required,
-    type: type ?? 'radio',
-    validate,
-    value,
-  })
-
-  const error = getError({
-    label: name,
-    meta: meta as FieldState<unknown>,
-    name,
-    value: input.value,
-  })
-
-  return (
-    <SelectableCard
-      isError={!!error}
-      showTick={showTick}
-      checked={input.checked}
-      className={className}
-      disabled={disabled}
-      name={input.name}
-      onChange={event => {
-        input.onChange(event)
-        onChange?.(event)
-      }}
-      onBlur={event => {
-        input.onBlur(event)
-        onBlur?.(event)
-      }}
-      onFocus={event => {
-        input.onFocus(event)
-        onFocus?.(event)
-      }}
-      type={type}
-      value={input.value}
-      id={id}
-      tooltip={tooltip}
-      label={label}
-      data-testid={dataTestId}
-    >
-      {children}
-    </SelectableCard>
-  )
-}
+  rules,
+}: SelectableCardFieldProps<TFieldValues>) => (
+  <Controller
+    name={name}
+    rules={{
+      required,
+      ...rules,
+    }}
+    render={({ field, fieldState: { error } }) => (
+      <SelectableCard
+        isError={!!error}
+        showTick={showTick}
+        checked={field.value === value}
+        className={className}
+        disabled={disabled}
+        onChange={event => {
+          field.onChange(event)
+          onChange?.(event)
+        }}
+        onBlur={event => {
+          field.onBlur()
+          onBlur?.(event)
+        }}
+        onFocus={event => {
+          onFocus?.(event)
+        }}
+        type={type}
+        id={id}
+        tooltip={tooltip}
+        label={label}
+        value={value ?? ''}
+        name={field.name}
+      >
+        {children}
+      </SelectableCard>
+    )}
+  />
+)
diff --git a/packages/form/src/components/Submit/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/Submit/__tests__/__snapshots__/index.spec.tsx.snap
index 664fdde4d5..715a8f4219 100644
--- a/packages/form/src/components/Submit/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/components/Submit/__tests__/__snapshots__/index.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`Submit form is invalid 1`] = `
   position: relative;
 }
 
-.cache-18ddxdy {
+.cache-1ehejze {
   -webkit-transition: border-color 0.2s ease,box-shadow 0.2s ease;
   transition: border-color 0.2s ease,box-shadow 0.2s ease;
   -webkit-appearance: none;
@@ -33,71 +33,60 @@ exports[`Submit form is invalid 1`] = `
   padding-right: 20px;
   padding-top: 14px;
   padding: 8px;
-  border-color: #b3144d;
 }
 
-.cache-18ddxdy::-webkit-input-placeholder {
+.cache-1ehejze::-webkit-input-placeholder {
   color: #727683;
   opacity: 0;
 }
 
-.cache-18ddxdy::-moz-placeholder {
+.cache-1ehejze::-moz-placeholder {
   color: #727683;
   opacity: 0;
 }
 
-.cache-18ddxdy:-ms-input-placeholder {
+.cache-1ehejze:-ms-input-placeholder {
   color: #727683;
   opacity: 0;
 }
 
-.cache-18ddxdy::placeholder {
+.cache-1ehejze::placeholder {
   color: #727683;
   opacity: 0;
 }
 
-.cache-18ddxdy:hover,
-.cache-18ddxdy:focus {
+.cache-1ehejze:hover,
+.cache-1ehejze:focus {
   border-color: #792dd4;
 }
 
-.cache-18ddxdy:focus {
+.cache-1ehejze:focus {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
   border-color: #792dd4;
 }
 
-.cache-18ddxdy::-webkit-input-placeholder {
+.cache-1ehejze::-webkit-input-placeholder {
   opacity: 1;
 }
 
-.cache-18ddxdy::-moz-placeholder {
+.cache-1ehejze::-moz-placeholder {
   opacity: 1;
 }
 
-.cache-18ddxdy:-ms-input-placeholder {
+.cache-1ehejze:-ms-input-placeholder {
   opacity: 1;
 }
 
-.cache-18ddxdy::placeholder {
+.cache-1ehejze::placeholder {
   opacity: 1;
 }
 
-.cache-18ddxdy:hover,
-.cache-18ddxdy:focus {
-  border-color: #92103f;
-}
-
-.cache-18ddxdy:focus {
-  box-shadow: 0px 0px 0px 3px #f91b6c40;
-  border-color: #92103f;
-}
-
-.cache-2yjbay {
+.cache-1lt3r2p {
   -webkit-transition: max-height 300ms ease-out,opacity 300ms ease-out;
   transition: max-height 300ms ease-out,opacity 300ms ease-out;
-  overflow: visible;
+  overflow: hidden;
   height: auto;
-  max-height: initial;
+  max-height: 0px;
 }
 
 .cache-xbtm7g {
@@ -152,29 +141,25 @@ exports[`Submit form is invalid 1`] = `
   text-decoration: none;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div>
       <div
         class="cache-bjn8wh el3h3g95"
       >
         <input
           autocomplete="on"
-          class="cache-18ddxdy el3h3g92"
+          class="cache-1ehejze el3h3g92"
           name="toto"
           type="text"
           value="4"
         />
       </div>
       <div
-        class="cache-2yjbay e5hc7t70"
+        class="cache-1lt3r2p e5hc7t70"
       >
         <div
           class="cache-xbtm7g el3h3g94"
-        >
-          This field should match the regex ^[a-zA-Z]*$
-        </div>
+        />
       </div>
     </div>
     <button
@@ -246,9 +231,7 @@ exports[`Submit form is submitting 1`] = `
   transition: stroke-dashoffset 0.5s ease 0s;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <button
       class="cache-1nhcpqm e112qvla2"
       disabled=""
@@ -294,7 +277,7 @@ exports[`Submit form is submitting 1`] = `
 
 exports[`Submit renders correctly  1`] = `
 <DocumentFragment>
-  .cache-13w4j1t {
+  .cache-1nhcpqm {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -312,7 +295,7 @@ exports[`Submit renders correctly  1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  cursor: pointer;
+  cursor: not-allowed;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
@@ -331,28 +314,19 @@ exports[`Submit renders correctly  1`] = `
   background: #8c40ef;
   border: none;
   color: #ffffff;
+  background: #e5dbfd;
+  color: #ffffff;
 }
 
-.cache-13w4j1t:hover {
+.cache-1nhcpqm:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.cache-13w4j1t:active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
-}
-
-.cache-13w4j1t:hover,
-.cache-13w4j1t:active {
-  background: #792dd4;
-  color: #f9f9fa;
-}
-
-<form
-    novalidate=""
-  >
+<form>
     <button
-      class="cache-13w4j1t e112qvla2"
+      class="cache-1nhcpqm e112qvla2"
+      disabled=""
       type="submit"
     >
       Test
@@ -363,7 +337,7 @@ exports[`Submit renders correctly  1`] = `
 
 exports[`Submit renders correctly with icon and iconPosition  1`] = `
 <DocumentFragment>
-  .cache-1lxoc44 {
+  .cache-158usla {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -381,7 +355,7 @@ exports[`Submit renders correctly with icon and iconPosition  1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  cursor: pointer;
+  cursor: not-allowed;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
@@ -400,23 +374,15 @@ exports[`Submit renders correctly with icon and iconPosition  1`] = `
   background: #8c40ef;
   border: none;
   color: #ffffff;
+  background: #e5dbfd;
+  color: #ffffff;
 }
 
-.cache-1lxoc44:hover {
+.cache-158usla:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.cache-1lxoc44:active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
-}
-
-.cache-1lxoc44:hover,
-.cache-1lxoc44:active {
-  background: #792dd4;
-  color: #f9f9fa;
-}
-
 .cache-1ah7xw8-sizeStyles {
   vertical-align: middle;
   fill: currentColor;
@@ -426,11 +392,10 @@ exports[`Submit renders correctly with icon and iconPosition  1`] = `
   min-height: 16px;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <button
-      class="cache-1lxoc44 e112qvla2"
+      class="cache-158usla e112qvla2"
+      disabled=""
       type="submit"
     >
       <svg
diff --git a/packages/form/src/components/Submit/index.tsx b/packages/form/src/components/Submit/index.tsx
index c846c97a7a..ed0f371d79 100644
--- a/packages/form/src/components/Submit/index.tsx
+++ b/packages/form/src/components/Submit/index.tsx
@@ -1,7 +1,6 @@
 import { Button } from '@ultraviolet/ui'
-import type { ComponentProps, JSX, ReactNode } from 'react'
-import { useEffect, useState } from 'react'
-import { useFormState } from 'react-final-form'
+import type { ComponentProps, ReactNode } from 'react'
+import { useFormState } from 'react-hook-form'
 
 type SubmitProps = {
   children?: ReactNode
@@ -29,24 +28,10 @@ export const Submit = ({
   tooltip,
   fullWidth,
   onClick,
-}: SubmitProps): JSX.Element => {
-  const { invalid, submitting, hasValidationErrors, dirtySinceLastSubmit } =
-    useFormState({
-      subscription: {
-        dirtySinceLastSubmit: true,
-        hasValidationErrors: true,
-        invalid: true,
-        submitting: true,
-      },
-    })
-  const [isLoading, setIsLoading] = useState(true)
-  const isDisabled =
-    disabled ||
-    submitting ||
-    isLoading ||
-    (invalid && hasValidationErrors && !dirtySinceLastSubmit)
+}: SubmitProps) => {
+  const { isSubmitting, isValid } = useFormState()
 
-  useEffect(() => setIsLoading(false), [])
+  const isDisabled = disabled || isSubmitting || !isValid
 
   return (
     <Button
@@ -54,7 +39,7 @@ export const Submit = ({
       disabled={isDisabled}
       icon={icon}
       iconPosition={iconPosition}
-      isLoading={submitting}
+      isLoading={isSubmitting}
       size={size}
       type="submit"
       variant={variant}
diff --git a/packages/form/src/components/SubmitErrorAlert/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/SubmitErrorAlert/__tests__/__snapshots__/index.spec.tsx.snap
index 003623a201..1604dac922 100644
--- a/packages/form/src/components/SubmitErrorAlert/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/components/SubmitErrorAlert/__tests__/__snapshots__/index.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`SubmitErrorAlert should display an alert when submitError is present 1`] = `
 <DocumentFragment>
-  .cache-13w4j1t {
+  .cache-1nhcpqm {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -20,7 +20,7 @@ exports[`SubmitErrorAlert should display an alert when submitError is present 1`
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  cursor: pointer;
+  cursor: not-allowed;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
@@ -39,23 +39,15 @@ exports[`SubmitErrorAlert should display an alert when submitError is present 1`
   background: #8c40ef;
   border: none;
   color: #ffffff;
+  background: #e5dbfd;
+  color: #ffffff;
 }
 
-.cache-13w4j1t:hover {
+.cache-1nhcpqm:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.cache-13w4j1t:active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
-}
-
-.cache-13w4j1t:hover,
-.cache-13w4j1t:active {
-  background: #792dd4;
-  color: #f9f9fa;
-}
-
 .cache-i7zpby-alertStyles {
   display: -webkit-box;
   display: -webkit-flex;
@@ -182,11 +174,10 @@ exports[`SubmitErrorAlert should display an alert when submitError is present 1`
   text-decoration: none;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <button
-      class="cache-13w4j1t e112qvla2"
+      class="cache-1nhcpqm e112qvla2"
+      disabled=""
       type="submit"
     >
       Submit
@@ -227,8 +218,6 @@ exports[`SubmitErrorAlert should display an alert when submitError is present 1`
 
 exports[`SubmitErrorAlert should render nothing if no error 1`] = `
 <DocumentFragment>
-  <form
-    novalidate=""
-  />
+  <form />
 </DocumentFragment>
 `;
diff --git a/packages/form/src/components/SubmitErrorAlert/__tests__/index.spec.tsx b/packages/form/src/components/SubmitErrorAlert/__tests__/index.spec.tsx
index 2bc9971918..06e029856b 100644
--- a/packages/form/src/components/SubmitErrorAlert/__tests__/index.spec.tsx
+++ b/packages/form/src/components/SubmitErrorAlert/__tests__/index.spec.tsx
@@ -8,12 +8,12 @@ import {
 } from '@jest/globals'
 import { screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { FORM_ERROR } from 'final-form'
 import { Form, Submit, SubmitErrorAlert } from '../..'
 import {
   shouldMatchEmotionSnapshot,
   shouldMatchEmotionSnapshotFormWrapper,
 } from '../../../../.jest/helpers'
+import { FORM_ERROR } from '../../../constants'
 import { mockErrors } from '../../../mocks'
 
 describe('SubmitErrorAlert', () => {
diff --git a/packages/form/src/components/SubmitErrorAlert/index.tsx b/packages/form/src/components/SubmitErrorAlert/index.tsx
index 82ec1cc71f..1b98e65f29 100644
--- a/packages/form/src/components/SubmitErrorAlert/index.tsx
+++ b/packages/form/src/components/SubmitErrorAlert/index.tsx
@@ -1,18 +1,12 @@
 import { Alert } from '@ultraviolet/ui'
-import { FormSpy } from 'react-final-form'
+import { useFormState } from 'react-hook-form'
 
-export const SubmitErrorAlert = <FormValues,>({
-  className,
-}: {
-  className?: string
-}) => (
-  <FormSpy<FormValues> subscription={{ submitError: true }}>
-    {({ submitError }) =>
-      submitError ? (
-        <Alert className={className} sentiment="danger">
-          {submitError}
-        </Alert>
-      ) : null
-    }
-  </FormSpy>
-)
+export const SubmitErrorAlert = ({ className }: { className?: string }) => {
+  const { errors } = useFormState()
+
+  return errors?.root?.['submit'] ? (
+    <Alert className={className} sentiment="danger">
+      {errors.root['submit'].message}
+    </Alert>
+  ) : null
+}
diff --git a/packages/form/src/components/TagInputField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/TagInputField/__tests__/__snapshots__/index.spec.tsx.snap
index d3961a06aa..3ed8918350 100644
--- a/packages/form/src/components/TagInputField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/components/TagInputField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -62,9 +62,7 @@ exports[`ToggleField should render correctly 1`] = `
   color: #727683;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class="cache-1bthscd ea7vc6o1"
     >
@@ -112,9 +110,7 @@ exports[`ToggleField should render correctly disabled 1`] = `
   margin: 6px;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class="cache-1bthscd ea7vc6o1"
     />
@@ -153,112 +149,6 @@ exports[`ToggleField should render correctly with default tags 1`] = `
   margin: 6px;
 }
 
-.cache-1j7jvp7 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  white-space: nowrap;
-  border-radius: 4px;
-  padding: 0 8px;
-  gap: 8px;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  height: 24px;
-  color: #3f4250;
-  background: #ffffff;
-  border: solid 1px #d9dadd;
-}
-
-.cache-td7tdt {
-  font-size: 12px;
-  font-weight: 500;
-  color: inherit;
-  max-width: 232px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.cache-1i4ofie {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  height: 32px;
-  padding: 0 8px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 8px;
-  border-radius: 4px;
-  box-sizing: border-box;
-  width: 32px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  outline-offset: 2px;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 14px;
-  font-family: Inter,Asap;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 20px;
-  paragraph-spacing: 0;
-  text-case: none;
-  background: none;
-  border: none;
-  color: #3f4250;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
-  height: fit-content;
-  padding: 2px;
-}
-
-.cache-1i4ofie:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.cache-1i4ofie:active {
-  box-shadow: 0px 0px 0px 3px #151a2d5c;
-}
-
-.cache-1i4ofie:hover,
-.cache-1i4ofie:active {
-  background: #e9eaeb;
-  color: #222638;
-}
-
-.cache-1ah7xw8-sizeStyles {
-  vertical-align: middle;
-  fill: currentColor;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
-}
-
 .cache-xmhmf {
   display: -webkit-box;
   display: -webkit-flex;
@@ -290,67 +180,15 @@ exports[`ToggleField should render correctly with default tags 1`] = `
   color: #727683;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class="cache-1bthscd ea7vc6o1"
     >
-      <span
-        class="cache-1j7jvp7 el6733p2"
-      >
-        <span
-          aria-disabled="false"
-          class="cache-td7tdt el6733p1"
-        >
-          tags-1
-        </span>
-        <button
-          aria-label="Close tag"
-          class="el6733p0 cache-1i4ofie e112qvla0"
-          data-testid="close-tag"
-          type="button"
-        >
-          <svg
-            class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-            />
-          </svg>
-        </button>
-      </span>
-      <span
-        class="cache-1j7jvp7 el6733p2"
-      >
-        <span
-          aria-disabled="false"
-          class="cache-td7tdt el6733p1"
-        >
-          tags-2
-        </span>
-        <button
-          aria-label="Close tag"
-          class="el6733p0 cache-1i4ofie e112qvla0"
-          data-testid="close-tag"
-          type="button"
-        >
-          <svg
-            class="cache-1ah7xw8-sizeStyles e1gt4cfo0"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-            />
-          </svg>
-        </button>
-      </span>
       <input
         aria-label="test-tags"
         class="cache-xmhmf ea7vc6o0"
         name="test-tags"
-        placeholder=""
+        placeholder="placeholder"
         type="text"
         value=""
       />
@@ -527,9 +365,7 @@ exports[`ToggleField should render correctly with default tags on initialValues
   color: #727683;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class="cache-1bthscd ea7vc6o1"
     >
@@ -764,9 +600,7 @@ exports[`ToggleField should render correctly with default tags on initialValues
   color: #727683;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class="cache-1bthscd ea7vc6o1"
     >
diff --git a/packages/form/src/components/TagInputField/index.tsx b/packages/form/src/components/TagInputField/index.tsx
index 15b60574fb..6e4577cd32 100644
--- a/packages/form/src/components/TagInputField/index.tsx
+++ b/packages/form/src/components/TagInputField/index.tsx
@@ -1,67 +1,55 @@
 import { TagInput } from '@ultraviolet/ui'
-import type { ComponentProps, JSX } from 'react'
-import { useFormField } from '../../hooks'
+import type { ComponentProps } from 'react'
+import type { FieldValues } from 'react-hook-form'
+import { Controller } from 'react-hook-form'
 import type { BaseFieldProps } from '../../types'
 
-type TagInputProp = ComponentProps<typeof TagInput>['tags']
-
-export type TagInputFieldProps<T = TagInputProp, K = string> = BaseFieldProps<
-  T,
-  K
-> &
-  Partial<
-    Pick<
-      ComponentProps<typeof TagInput>,
-      | 'tags'
-      | 'variant'
-      | 'onChange'
-      | 'placeholder'
-      | 'disabled'
-      | 'className'
-      | 'id'
-      | 'data-testid'
+export type TagInputFieldProps<TFieldValues extends FieldValues = FieldValues> =
+  BaseFieldProps<TFieldValues> &
+    Partial<
+      Pick<
+        ComponentProps<typeof TagInput>,
+        | 'tags'
+        | 'variant'
+        | 'onChange'
+        | 'placeholder'
+        | 'disabled'
+        | 'className'
+        | 'id'
+      >
     >
-  > & {
-    name: string
-    required?: boolean
-  }
 
-export const TagInputField = ({
+export const TagInputField = <TFieldValues extends FieldValues>({
   className,
-  'data-testid': dataTestId,
   disabled,
   id,
   name,
   onChange,
   placeholder,
   required,
-  tags,
-  validate,
+  rules,
   variant,
-}: TagInputFieldProps): JSX.Element => {
-  const { input } = useFormField<TagInputProp>(name, {
-    disabled,
-    required,
-    initialValue: tags,
-    type: 'text',
-    validate,
-    value: tags,
-  })
-
-  return (
-    <TagInput
-      className={className}
-      disabled={disabled}
-      id={id}
-      name={name}
-      onChange={event => {
-        onChange?.(event)
-        input.onChange(event)
-      }}
-      placeholder={placeholder}
-      variant={variant}
-      tags={input.value}
-      data-testid={dataTestId}
-    />
-  )
-}
+}: TagInputFieldProps<TFieldValues>) => (
+  <Controller
+    name={name}
+    rules={{
+      required,
+      ...rules,
+    }}
+    render={({ field }) => (
+      <TagInput
+        name={field.name}
+        className={className}
+        disabled={disabled}
+        id={id}
+        onChange={event => {
+          field.onChange(event)
+          onChange?.(event)
+        }}
+        placeholder={placeholder}
+        variant={variant}
+        tags={field.value}
+      />
+    )}
+  />
+)
diff --git a/packages/form/src/components/TextInputField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/TextInputField/__tests__/__snapshots__/index.spec.tsx.snap
index 7fc6d893f1..4c73dca453 100644
--- a/packages/form/src/components/TextInputField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/components/TextInputField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -95,9 +95,7 @@ exports[`TextInputField should render correctly 1`] = `
   padding-top: 2px;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div>
       <div
         class="cache-bjn8wh el3h3g95"
@@ -222,9 +220,7 @@ exports[`TextInputField should render correctly disabled 1`] = `
   padding-top: 2px;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div>
       <div
         class="cache-bjn8wh el3h3g95"
@@ -345,9 +341,7 @@ exports[`TextInputField should render correctly generated 1`] = `
   padding-top: 2px;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div>
       <div
         class="cache-bjn8wh el3h3g95"
@@ -467,9 +461,7 @@ exports[`TextInputField should render correctly id 1`] = `
   padding-top: 2px;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div>
       <div
         class="cache-bjn8wh el3h3g95"
@@ -621,9 +613,7 @@ exports[`TextInputField should render correctly notice 1`] = `
   min-height: 16px;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div>
       <div
         class="cache-bjn8wh el3h3g95"
@@ -875,9 +865,7 @@ exports[`TextInputField should render correctly random 1`] = `
   padding-top: 2px;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div>
       <div
         class="cache-bjn8wh el3h3g95"
@@ -1055,9 +1043,7 @@ exports[`TextInputField should render correctly required 1`] = `
   padding-top: 2px;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div>
       <div
         class="cache-bjn8wh el3h3g95"
@@ -1200,9 +1186,7 @@ exports[`TextInputField should render correctly with minLength 1`] = `
   padding-top: 2px;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div>
       <div
         class="cache-bjn8wh el3h3g95"
diff --git a/packages/form/src/components/TextInputField/__tests__/index.spec.tsx b/packages/form/src/components/TextInputField/__tests__/index.spec.tsx
index d0e56e247b..652ba66838 100644
--- a/packages/form/src/components/TextInputField/__tests__/index.spec.tsx
+++ b/packages/form/src/components/TextInputField/__tests__/index.spec.tsx
@@ -54,15 +54,11 @@ describe('TextInputField', () => {
           await waitFor(() => {
             expect(
               screen.getByText(
-                typeof mockErrors.MIN_LENGTH === 'function'
-                  ? mockErrors.MIN_LENGTH({
-                      allValues: {},
-                      label: 'test',
-                      minLength: 13,
-                      name: 'test',
-                      value: 'test',
-                    })
-                  : mockErrors.MIN_LENGTH,
+                mockErrors.minLength({
+                  label: 'test',
+                  minLength: 13,
+                  value: 'test',
+                }),
               ),
             ).toBeVisible()
           })
diff --git a/packages/form/src/components/TextInputField/index.tsx b/packages/form/src/components/TextInputField/index.tsx
index fbdc7820ed..e7005d7a75 100644
--- a/packages/form/src/components/TextInputField/index.tsx
+++ b/packages/form/src/components/TextInputField/index.tsx
@@ -1,209 +1,202 @@
 import { TextInput } from '@ultraviolet/ui'
-import type { FieldState } from 'final-form'
-import type { ComponentProps, JSX, Ref } from 'react'
-import { forwardRef } from 'react'
-import { useFormField } from '../../hooks'
+import type { ComponentProps } from 'react'
+import type { FieldValues, Path, PathValue } from 'react-hook-form'
+import { Controller } from 'react-hook-form'
 import { useErrors } from '../../providers'
 import type { BaseFieldProps } from '../../types'
 
-type TextInputValue = NonNullable<ComponentProps<typeof TextInput>['value']>
+type TextInputFieldProps<TFieldValues extends FieldValues> =
+  BaseFieldProps<TFieldValues> &
+    Partial<
+      Pick<
+        ComponentProps<typeof TextInput>,
+        | 'autoCapitalize'
+        | 'autoComplete'
+        | 'autoCorrect'
+        | 'autoFocus'
+        | 'autoSave'
+        | 'cols'
+        | 'disabled'
+        | 'fillAvailable'
+        | 'generated'
+        | 'id'
+        | 'label'
+        | 'multiline'
+        | 'notice'
+        | 'onBlur'
+        | 'onChange'
+        | 'onFocus'
+        | 'onKeyDown'
+        | 'onKeyUp'
+        | 'placeholder'
+        | 'random'
+        | 'readOnly'
+        | 'required'
+        | 'resizable'
+        | 'rows'
+        | 'type'
+        | 'noTopLabel'
+        | 'unit'
+        | 'valid'
+        | 'size'
+        | 'maxLength'
+        | 'minLength'
+        | 'min'
+        | 'max'
+      >
+    > & {
+      className?: string
+      /**
+       * @deprecated Use rules instead
+       */
+      regex?: (RegExp | RegExp[])[]
 
-type TextInputFieldProps<T = TextInputValue, K = string> = BaseFieldProps<
-  T,
-  K
-> &
-  Partial<
-    Pick<
-      ComponentProps<typeof TextInput>,
-      | 'autoCapitalize'
-      | 'autoComplete'
-      | 'autoCorrect'
-      | 'autoFocus'
-      | 'autoSave'
-      | 'cols'
-      | 'data-testid'
-      | 'disabled'
-      | 'fillAvailable'
-      | 'generated'
-      | 'id'
-      | 'label'
-      | 'maxLength'
-      | 'minLength'
-      | 'multiline'
-      | 'notice'
-      | 'onBlur'
-      | 'onChange'
-      | 'onFocus'
-      | 'onKeyDown'
-      | 'onKeyUp'
-      | 'placeholder'
-      | 'random'
-      | 'readOnly'
-      | 'required'
-      | 'resizable'
-      | 'rows'
-      | 'type'
-      | 'value'
-      | 'noTopLabel'
-      | 'unit'
-      | 'valid'
-      | 'size'
-    >
-  > & {
-    name: string
-    className?: string
-    max?: number
-    min?: number
-    regex?: (RegExp | RegExp[])[]
-  }
+      format?: (value: unknown) => PathValue<TFieldValues, Path<TFieldValues>>
 
-export const TextInputField = forwardRef(
-  (
-    {
-      afterSubmit,
-      allowNull,
-      autoCapitalize,
-      autoComplete,
-      autoCorrect,
-      autoFocus,
-      autoSave,
-      beforeSubmit,
-      className,
-      cols,
-      'data-testid': dataTestId,
-      defaultValue,
-      disabled,
-      fillAvailable,
-      format,
-      formatOnBlur,
-      generated,
-      id,
-      initialValue,
-      isEqual,
-      label = '',
-      max,
-      maxLength,
-      min,
-      minLength,
-      multiline,
-      multiple,
-      name,
-      noTopLabel,
-      notice,
-      onBlur,
-      onChange,
-      onFocus,
-      onKeyDown,
-      onKeyUp,
-      parse,
-      placeholder,
-      random,
-      readOnly,
-      regex,
-      required,
-      resizable,
-      rows,
-      subscription,
-      type,
-      unit,
-      size,
-      validate,
-      validateFields,
-      valid,
-      value,
-    }: TextInputFieldProps,
-    ref: Ref<HTMLInputElement>,
-  ): JSX.Element => {
-    const { getError } = useErrors()
+      parse?: (value: string) => PathValue<TFieldValues, Path<TFieldValues>>
+    }
 
-    const { input, meta } = useFormField(name, {
-      afterSubmit,
-      allowNull,
-      beforeSubmit,
-      defaultValue,
-      disabled,
-      format,
-      formatOnBlur,
-      initialValue,
-      isEqual,
-      max,
-      maxLength,
-      min,
-      minLength,
-      multiple,
-      parse,
-      regex,
-      required,
-      subscription,
-      type,
-      validate,
-      validateFields,
-      value,
-    })
+export const TextInputField = <TFieldValues extends FieldValues>({
+  autoCapitalize,
+  autoComplete,
+  autoCorrect,
+  autoFocus,
+  autoSave,
+  className,
+  cols,
+  disabled,
+  fillAvailable,
+  generated,
+  id,
+  label = '',
+  multiline,
+  name,
+  noTopLabel,
+  notice,
+  onChange,
+  onFocus,
+  onKeyDown,
+  onKeyUp,
+  onBlur,
+  placeholder,
+  random,
+  readOnly,
+  required,
+  resizable,
+  rows,
+  type,
+  unit,
+  size,
+  rules,
+  valid,
+  parse,
+  format,
+  regex: regexes,
+  min,
+  max,
+  minLength,
+  maxLength,
+  validate,
+  defaultValue,
+}: TextInputFieldProps<TFieldValues>) => {
+  const { getError } = useErrors()
 
-    const error = getError({
-      label,
-      max,
-      maxLength,
-      meta: meta as FieldState<unknown>,
-      min,
-      minLength,
-      name,
-      regex,
-      value: input.value,
-    })
+  return (
+    <Controller<TFieldValues>
+      name={name}
+      rules={{
+        required,
+        pattern:
+          regexes &&
+          new RegExp(
+            regexes
+              .map(regex => {
+                const newRegex = Array.isArray(regex)
+                  ? regex.map(reg => reg.source).join('|')
+                  : regex.source
 
-    return (
-      <TextInput
-        autoCapitalize={autoCapitalize}
-        autoComplete={autoComplete}
-        autoCorrect={autoCorrect}
-        autoFocus={autoFocus}
-        autoSave={autoSave}
-        className={className}
-        cols={cols}
-        data-testid={dataTestId}
-        disabled={disabled}
-        error={error}
-        fillAvailable={fillAvailable}
-        generated={generated}
-        id={id}
-        label={label}
-        max={max}
-        maxLength={maxLength}
-        min={min}
-        minLength={minLength}
-        multiline={multiline}
-        name={input.name}
-        notice={notice}
-        onBlur={event => {
-          input.onBlur(event)
-          onBlur?.(event)
-        }}
-        onChange={event => {
-          input.onChange(event)
-          onChange?.(event)
-        }}
-        onFocus={event => {
-          input.onFocus(event)
-          onFocus?.(event)
-        }}
-        onKeyUp={onKeyUp}
-        onKeyDown={onKeyDown}
-        placeholder={placeholder}
-        random={random}
-        readOnly={readOnly}
-        ref={ref}
-        required={required}
-        resizable={resizable}
-        rows={rows}
-        type={input.type}
-        value={input.value}
-        noTopLabel={noTopLabel}
-        unit={unit}
-        valid={valid}
-        size={size}
-      />
-    )
-  },
-)
+                return `(?=${newRegex})`
+              })
+              .join(''),
+          ),
+        validate,
+        minLength,
+        maxLength,
+        max,
+        min,
+        ...rules,
+      }}
+      defaultValue={defaultValue}
+      render={({ field, fieldState: { error } }) => {
+        const transformedValue = () => {
+          if (format) {
+            return format(field.value) as string
+          }
+
+          return field.value as string
+        }
+
+        return (
+          <TextInput
+            name={field.name}
+            autoCapitalize={autoCapitalize}
+            autoComplete={autoComplete}
+            autoCorrect={autoCorrect}
+            autoFocus={autoFocus}
+            autoSave={autoSave}
+            className={className}
+            cols={cols}
+            disabled={disabled}
+            error={getError(
+              {
+                regex: regexes,
+                minLength,
+                maxLength,
+                label,
+                min,
+                max,
+                value: field.value,
+              },
+              error,
+            )}
+            fillAvailable={fillAvailable}
+            generated={generated}
+            id={id}
+            label={label}
+            multiline={multiline}
+            notice={notice}
+            required={required}
+            onBlur={event => {
+              field.onBlur()
+              onBlur?.(event)
+            }}
+            onChange={event => {
+              if (parse) {
+                field.onChange(parse(event))
+              } else {
+                field.onChange(event)
+              }
+              onChange?.(event)
+            }}
+            onFocus={event => {
+              onFocus?.(event)
+            }}
+            onKeyUp={onKeyUp}
+            onKeyDown={onKeyDown}
+            placeholder={placeholder}
+            random={random}
+            readOnly={readOnly}
+            resizable={resizable}
+            rows={rows}
+            type={type}
+            noTopLabel={noTopLabel}
+            unit={unit}
+            valid={valid}
+            size={size}
+            value={transformedValue()}
+          />
+        )
+      }}
+    />
+  )
+}
diff --git a/packages/form/src/components/TimeField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/TimeField/__tests__/__snapshots__/index.spec.tsx.snap
index 115b42b515..7a719e2c24 100644
--- a/packages/form/src/components/TimeField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/components/TimeField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -283,12 +283,10 @@ exports[`TimeField should render correctly 1`] = `
   padding-top: 2px;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class=" cache-1gb28ew-container-StyledContainer e11gt5pw4"
-      data-testid="select-input-"
+      data-testid="select-input-test"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -369,6 +367,11 @@ exports[`TimeField should render correctly 1`] = `
           </div>
         </div>
       </div>
+      <input
+        name="test"
+        type="hidden"
+        value=""
+      />
       <div
         class="cache-1lt3r2p e5hc7t70"
       >
@@ -664,12 +667,10 @@ exports[`TimeField should render correctly checked without value 1`] = `
   padding-top: 2px;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class=" cache-1gb28ew-container-StyledContainer e11gt5pw4"
-      data-testid="select-input-"
+      data-testid="select-input-test"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -750,6 +751,11 @@ exports[`TimeField should render correctly checked without value 1`] = `
           </div>
         </div>
       </div>
+      <input
+        name="test"
+        type="hidden"
+        value=""
+      />
       <div
         class="cache-1lt3r2p e5hc7t70"
       >
@@ -1032,12 +1038,10 @@ exports[`TimeField should render correctly disabled 1`] = `
   padding-top: 2px;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class=" cache-iwdjsb-container-StyledContainer e11gt5pw4"
-      data-testid="select-input-"
+      data-testid="select-input-test"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -1415,12 +1419,10 @@ exports[`TimeField should trigger events 1`] = `
   padding-top: 2px;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class=" cache-1gb28ew-container-StyledContainer e11gt5pw4"
-      data-testid="select-input-"
+      data-testid="select-input-test"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -1503,6 +1505,11 @@ exports[`TimeField should trigger events 1`] = `
           </div>
         </div>
       </div>
+      <input
+        name="test"
+        type="hidden"
+        value="1:00:00"
+      />
       <div
         class="cache-1lt3r2p e5hc7t70"
       >
diff --git a/packages/form/src/components/TimeField/__tests__/index.spec.tsx b/packages/form/src/components/TimeField/__tests__/index.spec.tsx
index 590f26fdb5..1c96df22cd 100644
--- a/packages/form/src/components/TimeField/__tests__/index.spec.tsx
+++ b/packages/form/src/components/TimeField/__tests__/index.spec.tsx
@@ -54,7 +54,7 @@ describe('TimeField', () => {
           fireEvent.keyDown(select, { key: 'ArrowDown', keyCode: 40 })
           const option =
             // eslint-disable-next-line testing-library/no-node-access
-            screen.getByTestId('option--01:00').firstChild as HTMLElement
+            screen.getByTestId('option-test-01:00').firstChild as HTMLElement
           act(() => option.click())
           expect(onChange).toBeCalledTimes(1)
           act(() => select.blur())
diff --git a/packages/form/src/components/TimeField/index.tsx b/packages/form/src/components/TimeField/index.tsx
index 074462417b..33e0b5e7ac 100644
--- a/packages/form/src/components/TimeField/index.tsx
+++ b/packages/form/src/components/TimeField/index.tsx
@@ -1,7 +1,7 @@
 import { TimeInput } from '@ultraviolet/ui'
 import type { ComponentProps } from 'react'
-import { useMemo } from 'react'
-import { useFormField } from '../../hooks'
+import type { FieldValues } from 'react-hook-form'
+import { Controller } from 'react-hook-form'
 import type { BaseFieldProps } from '../../types'
 
 const parseTime = (date?: Date | string): { label: string; value: string } => {
@@ -16,89 +16,80 @@ const parseTime = (date?: Date | string): { label: string; value: string } => {
   }
 }
 
-type TimeFieldProps = BaseFieldProps<Date> &
-  ComponentProps<typeof TimeInput> & {
-    name: string
-  }
+type TimeFieldProps<TFieldValues extends FieldValues> =
+  BaseFieldProps<TFieldValues> &
+    ComponentProps<typeof TimeInput> & {
+      name: string
+    }
 
-export const TimeField = ({
+export const TimeField = <TFieldValues extends FieldValues>({
   required,
   name,
   schedule,
   placeholder,
   disabled,
-  initialValue,
-  validate,
   readOnly,
-  value,
-  onChange,
   onBlur,
   onFocus,
+  onChange,
   isLoading,
   isClearable,
   inputId,
   id,
-  formatOnBlur,
   animation,
   animationDuration,
   animationOnChange,
   className,
   isSearchable,
+  rules,
   options,
   'data-testid': dataTestId,
-}: TimeFieldProps) => {
-  const { input, meta } = useFormField<Date>(name, {
-    disabled,
-    formatOnBlur,
-    initialValue,
-    required,
-    validate,
-    value,
-  })
-
-  const error = useMemo(
-    () => (input.value && meta.error ? (meta.error as string) : undefined),
-    [input.value, meta.error],
-  )
-
-  return (
-    <TimeInput
-      placeholder={placeholder}
-      schedule={schedule}
-      required={required}
-      value={parseTime(input.value)}
-      onChange={(val, action) => {
-        if (!val) return
-        onChange?.(val, action)
-        const [hours, minutes] = (
-          val as { value: string; label: string }
-        ).value.split(':')
-        const date = input.value ? new Date(input.value) : new Date()
-        date.setHours(Number(hours), Number(minutes), 0)
-        input.onChange(date)
-      }}
-      onBlur={event => {
-        input.onBlur(event)
-        onBlur?.(event)
-      }}
-      onFocus={event => {
-        input.onFocus(event)
-        onFocus?.(event)
-      }}
-      error={error}
-      disabled={disabled}
-      readOnly={readOnly}
-      animation={animation}
-      animationDuration={animationDuration}
-      animationOnChange={animationOnChange}
-      className={className}
-      isLoading={isLoading}
-      isClearable={isClearable}
-      isSearchable={isSearchable}
-      inputId={inputId}
-      id={id}
-      options={options}
-      data-testid={dataTestId}
-    />
-  )
-}
+}: TimeFieldProps<TFieldValues>) => (
+  <Controller
+    name={name}
+    rules={{
+      required,
+      ...rules,
+    }}
+    render={({ field, fieldState: { error } }) => (
+      <TimeInput
+        name={field.name}
+        placeholder={placeholder}
+        schedule={schedule}
+        required={required}
+        value={parseTime(field.value)}
+        onChange={(val, action) => {
+          if (!val) return
+          onChange?.(val, action)
+          const [hours, minutes] = (
+            val as { value: string; label: string }
+          ).value.split(':')
+          const date = field.value ? new Date(field.value) : new Date()
+          date.setHours(Number(hours), Number(minutes), 0)
+          field.onChange(date)
+        }}
+        onBlur={event => {
+          field.onBlur()
+          onBlur?.(event)
+        }}
+        onFocus={event => {
+          onFocus?.(event)
+        }}
+        error={error?.message}
+        disabled={disabled}
+        readOnly={readOnly}
+        animation={animation}
+        animationDuration={animationDuration}
+        animationOnChange={animationOnChange}
+        className={className}
+        isLoading={isLoading}
+        isClearable={isClearable}
+        isSearchable={isSearchable}
+        inputId={inputId}
+        id={id}
+        options={options}
+        data-testid={dataTestId}
+      />
+    )}
+  />
+)
diff --git a/packages/form/src/components/ToggleField/__stories__/ActAsRadio.stories.tsx b/packages/form/src/components/ToggleField/__stories__/ActAsRadio.stories.tsx
index 904b6da876..14e543f830 100644
--- a/packages/form/src/components/ToggleField/__stories__/ActAsRadio.stories.tsx
+++ b/packages/form/src/components/ToggleField/__stories__/ActAsRadio.stories.tsx
@@ -3,6 +3,5 @@ import { Template } from './Template.stories'
 export const ActAsRadio = Template.bind({})
 
 ActAsRadio.args = {
-  initialValue: true,
   name: 'default',
 }
diff --git a/packages/form/src/components/ToggleField/__stories__/Checked.stories.tsx b/packages/form/src/components/ToggleField/__stories__/Checked.stories.tsx
index 8bc2c396eb..72be5b5d9f 100644
--- a/packages/form/src/components/ToggleField/__stories__/Checked.stories.tsx
+++ b/packages/form/src/components/ToggleField/__stories__/Checked.stories.tsx
@@ -3,7 +3,6 @@ import { Template } from './Template.stories'
 export const Checked = Template.bind({})
 
 Checked.args = {
-  initialValue: ['test'],
   name: 'default',
-  value: 'test',
+  value: true,
 }
diff --git a/packages/form/src/components/ToggleField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/ToggleField/__tests__/__snapshots__/index.spec.tsx.snap
index a5bfd3bdb3..31b05135ab 100644
--- a/packages/form/src/components/ToggleField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/components/ToggleField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -145,9 +145,7 @@ exports[`ToggleField should render correctly 1`] = `
   cursor: not-allowed;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <label
       aria-disabled="false"
       class="cache-16r4i0r e1wstm610"
@@ -319,9 +317,7 @@ exports[`ToggleField should render correctly checked 1`] = `
   cursor: not-allowed;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <label
       aria-disabled="false"
       class="cache-16r4i0r e1wstm610"
@@ -494,9 +490,7 @@ exports[`ToggleField should render correctly disabled 1`] = `
   cursor: not-allowed;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <label
       aria-disabled="true"
       class="cache-16r4i0r e1wstm610"
@@ -683,9 +677,7 @@ exports[`ToggleField should render correctly with label and checked 1`] = `
   cursor: not-allowed;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <label
       aria-disabled="false"
       class="cache-16r4i0r e1wstm610"
diff --git a/packages/form/src/components/ToggleField/__tests__/index.spec.tsx b/packages/form/src/components/ToggleField/__tests__/index.spec.tsx
index f857aac99b..f1ba8d9f2d 100644
--- a/packages/form/src/components/ToggleField/__tests__/index.spec.tsx
+++ b/packages/form/src/components/ToggleField/__tests__/index.spec.tsx
@@ -12,17 +12,28 @@ describe('ToggleField', () => {
 
   test('should render correctly checked', () =>
     shouldMatchEmotionSnapshotFormWrapper(
-      <ToggleField name="test" value="test" initialValue={['test']} />,
+      <ToggleField name="test" />,
       {
         transform: () => {
           const element = screen.getByRole<HTMLInputElement>('checkbox')
           expect(element.checked).toBeTruthy()
         },
       },
+      {
+        initialValues: {
+          test: true,
+        },
+      },
     ))
 
   test('should render correctly with label and checked', () =>
     shouldMatchEmotionSnapshotFormWrapper(
-      <ToggleField name="test" initialValue label="test" />,
+      <ToggleField name="test" label="test" />,
+      {},
+      {
+        initialValues: {
+          test: true,
+        },
+      },
     ))
 })
diff --git a/packages/form/src/components/ToggleField/index.tsx b/packages/form/src/components/ToggleField/index.tsx
index 64b05844a4..6ca912cea6 100644
--- a/packages/form/src/components/ToggleField/index.tsx
+++ b/packages/form/src/components/ToggleField/index.tsx
@@ -1,9 +1,13 @@
 import { Toggle } from '@ultraviolet/ui'
 import type { ComponentProps } from 'react'
-import { useFormField } from '../../hooks'
+import type { FieldValues } from 'react-hook-form'
+import { Controller } from 'react-hook-form'
 import type { BaseFieldProps } from '../../types'
 
-type ToggleFieldProps<T = unknown, K = unknown> = BaseFieldProps<T, K> &
+type ToggleFieldProps<TFieldValues extends FieldValues> = Omit<
+  BaseFieldProps<TFieldValues>,
+  'label'
+> &
   Pick<
     ComponentProps<typeof Toggle>,
     | 'disabled'
@@ -17,72 +21,64 @@ type ToggleFieldProps<T = unknown, K = unknown> = BaseFieldProps<T, K> &
   > & {
     name: string
     required?: boolean
+    parse?: (value: boolean) => any
+    format?: (value: any) => boolean
   }
 
-export const ToggleField = ({
-  afterSubmit,
-  allowNull,
-  beforeSubmit,
+export const ToggleField = <TFieldValues extends FieldValues>({
   className,
-  data,
-  defaultValue,
   disabled,
-  format,
-  formatOnBlur,
-  initialValue,
-  isEqual,
   label,
-  multiple,
   name,
   onChange,
-  parse,
   required,
   size,
-  subscription,
   tooltip,
-  validate,
-  validateFields,
-  value,
+  rules,
   labelPosition,
+  parse,
+  format,
   'data-testid': dataTestId,
-}: ToggleFieldProps) => {
-  const { input } = useFormField(name, {
-    afterSubmit,
-    allowNull,
-    beforeSubmit,
-    data,
-    defaultValue,
-    disabled,
-    format,
-    formatOnBlur,
-    initialValue,
-    isEqual,
-    multiple,
-    parse,
-    required,
-    subscription,
-    type: 'checkbox',
-    validate,
-    validateFields,
-    value,
-  })
+}: ToggleFieldProps<TFieldValues>) => (
+  <Controller<TFieldValues>
+    name={name}
+    rules={{
+      required,
+      ...rules,
+    }}
+    // defaultValue={value as any}
+    render={({ field }) => {
+      const transformedValue = () => {
+        if (format) {
+          return format(field.value)
+        }
+
+        return field.value as boolean
+      }
 
-  return (
-    <Toggle
-      checked={input.checked}
-      tooltip={tooltip}
-      onChange={event => {
-        input.onChange(event)
-        onChange?.(event)
-      }}
-      label={label}
-      size={size}
-      name={name}
-      disabled={disabled}
-      labelPosition={labelPosition}
-      className={className}
-      required={required}
-      data-testid={dataTestId}
-    />
-  )
-}
+      return (
+        <Toggle
+          name={field.name}
+          ref={field.ref}
+          checked={transformedValue()}
+          tooltip={tooltip}
+          onChange={event => {
+            if (parse) {
+              field.onChange(parse(event.target.checked))
+            } else {
+              field.onChange(event)
+            }
+            onChange?.(event)
+          }}
+          label={label}
+          size={size}
+          disabled={disabled}
+          labelPosition={labelPosition}
+          className={className}
+          required={required}
+          data-testid={dataTestId}
+        />
+      )
+    }}
+  />
+)
diff --git a/packages/form/src/components/ToggleGroupField/__stories__/Required.stories.tsx b/packages/form/src/components/ToggleGroupField/__stories__/Required.stories.tsx
index f0f2a6a088..9c4398fbdb 100644
--- a/packages/form/src/components/ToggleGroupField/__stories__/Required.stories.tsx
+++ b/packages/form/src/components/ToggleGroupField/__stories__/Required.stories.tsx
@@ -1,11 +1,11 @@
 import type { StoryFn } from '@storybook/react'
 import { Stack } from '@ultraviolet/ui'
-import { useFormState } from 'react-final-form'
+import { useWatch } from 'react-hook-form'
 import { ToggleGroupField } from '..'
 import { Submit } from '../..'
 
 export const RequiredStory: StoryFn<typeof ToggleGroupField> = args => {
-  const { values } = useFormState()
+  const values = useWatch()
 
   return (
     <Stack gap={1}>
diff --git a/packages/form/src/components/ToggleGroupField/__stories__/Template.stories.tsx b/packages/form/src/components/ToggleGroupField/__stories__/Template.stories.tsx
index 5b72d1fe18..8dd4b5494b 100644
--- a/packages/form/src/components/ToggleGroupField/__stories__/Template.stories.tsx
+++ b/packages/form/src/components/ToggleGroupField/__stories__/Template.stories.tsx
@@ -1,10 +1,10 @@
 import type { StoryFn } from '@storybook/react'
 import { Stack } from '@ultraviolet/ui'
-import { useFormState } from 'react-final-form'
+import { useWatch } from 'react-hook-form'
 import { ToggleGroupField } from '..'
 
 const ToggleGroupFieldStory: StoryFn<typeof ToggleGroupField> = args => {
-  const { values } = useFormState()
+  const values = useWatch()
 
   return (
     <Stack gap={2}>
diff --git a/packages/form/src/components/ToggleGroupField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/ToggleGroupField/__tests__/__snapshots__/index.spec.tsx.snap
index 1984ce63c5..e0599aa9bd 100644
--- a/packages/form/src/components/ToggleGroupField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/components/ToggleGroupField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -245,9 +245,7 @@ exports[`GroupField should render correctly checked 1`] = `
   cursor: not-allowed;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class="cache-1civgmb ehpbis70"
     >
@@ -584,9 +582,7 @@ exports[`GroupField should trigger events correctly with required prop 1`] = `
   cursor: not-allowed;
 }
 
-<form
-    novalidate=""
-  >
+<form>
     <div
       class="cache-1civgmb ehpbis70"
     >
diff --git a/packages/form/src/components/ToggleGroupField/__tests__/index.spec.tsx b/packages/form/src/components/ToggleGroupField/__tests__/index.spec.tsx
index 8b473a1fcf..622daccf15 100644
--- a/packages/form/src/components/ToggleGroupField/__tests__/index.spec.tsx
+++ b/packages/form/src/components/ToggleGroupField/__tests__/index.spec.tsx
@@ -29,6 +29,11 @@ describe('GroupField', () => {
           expect(secondInput).toBeChecked()
         },
       },
+      {
+        initialValues: {
+          Group: [],
+        },
+      },
     ))
 
   test('should trigger events correctly with required prop', () => {
@@ -64,6 +69,11 @@ describe('GroupField', () => {
           expect(input).not.toBeChecked()
         },
       },
+      {
+        initialValues: {
+          test: [],
+        },
+      },
     )
   })
 })
diff --git a/packages/form/src/components/ToggleGroupField/index.tsx b/packages/form/src/components/ToggleGroupField/index.tsx
index a8a2c2ec01..759abc6cdb 100644
--- a/packages/form/src/components/ToggleGroupField/index.tsx
+++ b/packages/form/src/components/ToggleGroupField/index.tsx
@@ -1,81 +1,79 @@
 import { ToggleGroup } from '@ultraviolet/ui'
 import type { ComponentProps } from 'react'
-import { useFieldArray } from 'react-final-form-arrays'
+import { Controller, type FieldValues } from 'react-hook-form'
 import { useErrors } from '../../providers'
 import type { BaseFieldProps } from '../../types'
 
-type ToggleGroupValue = string[]
+type ToggleGroupFieldProps<TFieldValues extends FieldValues> =
+  BaseFieldProps<TFieldValues> &
+    Partial<
+      Pick<
+        ComponentProps<typeof ToggleGroup>,
+        | 'className'
+        | 'helper'
+        | 'onChange'
+        | 'required'
+        | 'direction'
+        | 'children'
+        | 'value'
+        | 'error'
+        | 'legend'
+      >
+    > &
+    Required<Pick<ComponentProps<typeof ToggleGroup>, 'legend' | 'name'>>
 
-type ToggleGroupFieldProps<T = ToggleGroupValue, K = string> = BaseFieldProps<
-  T,
-  K
-> &
-  Partial<
-    Pick<
-      ComponentProps<typeof ToggleGroup>,
-      | 'className'
-      | 'helper'
-      | 'onChange'
-      | 'required'
-      | 'direction'
-      | 'children'
-      | 'value'
-      | 'error'
-      | 'legend'
-    >
-  > &
-  Required<Pick<ComponentProps<typeof ToggleGroup>, 'legend' | 'name'>>
-
-export const ToggleGroupField = ({
+export const ToggleGroupField = <TFieldValues extends FieldValues>({
   legend,
-  value,
   className,
   helper,
   direction,
   children,
   onChange,
+  label,
   error: customError,
   name,
   required = false,
-}: ToggleGroupFieldProps) => {
+}: ToggleGroupFieldProps<TFieldValues>) => {
   const { getError } = useErrors()
 
-  const { fields, meta } = useFieldArray(name, {
-    type: 'Group',
-    value,
-    validate: localValue =>
-      required && localValue?.length === 0 ? 'Required' : undefined,
-  })
-
-  const error = getError({
-    label: legend,
-    meta,
-    value: fields.value,
-    name,
-  })
-
   return (
-    <ToggleGroup
-      legend={legend}
-      name={fields.name}
-      value={fields.value}
-      onChange={event => {
-        if (fields.value?.includes(event.currentTarget.value)) {
-          fields.remove(fields.value.indexOf(event.currentTarget?.value))
-        } else {
-          fields.push(event.currentTarget.value)
-        }
+    <Controller
+      name={name}
+      rules={{
+        validate: required ? value => value.length > 0 : undefined,
+      }}
+      render={({ field, fieldState: { error } }) => {
+        const value = field.value as string[]
+
+        return (
+          <ToggleGroup
+            legend={legend}
+            name={field.name}
+            value={value}
+            onChange={event => {
+              if (value.includes(event.currentTarget.value)) {
+                field.onChange(
+                  value.filter(
+                    currentValue => currentValue !== event.currentTarget.value,
+                  ),
+                )
+              } else {
+                field.onChange([...value, event.currentTarget.value])
+              }
 
-        onChange?.(event)
+              onChange?.(event)
+            }}
+            error={customError ?? getError({ label: label ?? '' }, error)}
+            className={className}
+            direction={direction}
+            helper={helper}
+            required={required}
+          >
+            {children}
+          </ToggleGroup>
+        )
       }}
-      error={error ?? customError}
-      className={className}
-      direction={direction}
-      helper={helper}
-      required={required}
-    >
-      {children}
-    </ToggleGroup>
+    />
   )
 }
 
diff --git a/packages/form/src/components/index.ts b/packages/form/src/components/index.ts
index 743c3718c2..6a9c0121bf 100644
--- a/packages/form/src/components/index.ts
+++ b/packages/form/src/components/index.ts
@@ -14,3 +14,4 @@ export { TimeField } from './TimeField'
 export { ToggleField } from './ToggleField'
 export { Submit } from './Submit'
 export { RadioGroupField } from './RadioGroupField'
+export { FormSpy } from './FormSpy'
diff --git a/packages/form/src/constants.ts b/packages/form/src/constants.ts
new file mode 100644
index 0000000000..7f17a6b88c
--- /dev/null
+++ b/packages/form/src/constants.ts
@@ -0,0 +1 @@
+export const FORM_ERROR = 'FINAL_FORM/form-error'
diff --git a/packages/form/src/helpers/index.ts b/packages/form/src/helpers/index.ts
deleted file mode 100644
index c737f56db5..0000000000
--- a/packages/form/src/helpers/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { pickValidators } from './pickValidators'
diff --git a/packages/form/src/helpers/pickValidators.ts b/packages/form/src/helpers/pickValidators.ts
deleted file mode 100644
index 1fdcbca391..0000000000
--- a/packages/form/src/helpers/pickValidators.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { ValidatorObject, ValidatorProps } from '../types'
-import validators from '../validators'
-import type { ValidatorFn } from '../validators/types'
-
-export const pickValidators = <InputValue = unknown>(args: ValidatorProps) =>
-  Object.entries(args)
-    .map(([key, value]) =>
-      value !== undefined
-        ? (validators as Record<string, ValidatorFn>)[
-            key as keyof typeof validators
-          ]?.(value)
-        : undefined,
-    )
-    .filter(validator => !!validator) as ValidatorObject<InputValue>[]
diff --git a/packages/form/src/hooks/__tests__/useFormField.spec.tsx b/packages/form/src/hooks/__tests__/useFormField.spec.tsx
deleted file mode 100644
index 3c86cb93c4..0000000000
--- a/packages/form/src/hooks/__tests__/useFormField.spec.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { describe, expect, test } from '@jest/globals'
-import { renderHook } from '@testing-library/react'
-import type { ReactElement } from 'react'
-import { Form } from '../../components'
-import { mockErrors } from '../../mocks'
-import { useFormField } from '../useFormField'
-
-describe('useFormField', () => {
-  test('should render correctly', () => {
-    const wrapper = ({ children }: { children: ReactElement }) => (
-      <Form onRawSubmit={() => {}} errors={mockErrors}>
-        {children}
-      </Form>
-    )
-    const { result } = renderHook(() => useFormField('fieldName', {}), {
-      wrapper,
-    })
-    expect(result.current).toBeDefined()
-  })
-})
diff --git a/packages/form/src/hooks/__tests__/useOnFieldChange.spec.tsx b/packages/form/src/hooks/__tests__/useOnFieldChange.spec.tsx
index 8eff2608ca..77948ceb7a 100644
--- a/packages/form/src/hooks/__tests__/useOnFieldChange.spec.tsx
+++ b/packages/form/src/hooks/__tests__/useOnFieldChange.spec.tsx
@@ -3,8 +3,11 @@ import { describe, expect, jest, test } from '@jest/globals'
 import { renderHook } from '@testing-library/react'
 import { theme as lightTheme } from '@ultraviolet/ui'
 import type { ReactElement } from 'react'
+import type { FieldValues } from 'react-hook-form'
+import { useForm } from 'react-hook-form'
 import { CheckboxField, Form, TextInputField } from '../../components'
 import { mockErrors } from '../../mocks'
+import type { CallbackFn } from '../useOnFieldChange'
 import { useOnFieldChange } from '../useOnFieldChange'
 
 type FormValues = {
@@ -27,35 +30,37 @@ const updated = {
   check: false,
 }
 
-const Wrapper = ({ children, initialValues }: Wrapers) => (
-  <ThemeProvider theme={lightTheme}>
-    <Form<FormValues>
-      initialValues={initialValues}
-      errors={mockErrors}
-      onRawSubmit={() => {}}
-    >
-      {children}
-      <CheckboxField name="check" />
-      <TextInputField name="textInputName" type="text" />
-    </Form>
-  </ThemeProvider>
-)
+const Wrapper = ({ children, initialValues }: Wrapers) => {
+  const methods = useForm({
+    values: initialValues,
+  })
+
+  return (
+    <ThemeProvider theme={lightTheme}>
+      <Form<FormValues>
+        methods={methods}
+        errors={mockErrors}
+        onRawSubmit={() => {}}
+      >
+        {children}
+        <CheckboxField name="check" />
+        <TextInputField name="textInputName" type="text" />
+      </Form>
+    </ThemeProvider>
+  )
+}
 
 describe('useOnFieldChange', () => {
   test('should render correctly', () => {
     const callback = jest.fn((value, values) => {
       expect(value).toBe(updated.textInputName)
-      expect(values).toBe(updated)
+      expect(values).toStrictEqual(updated)
     })
 
     let initialValues = initial
 
     const { result, rerender } = renderHook(
-      () =>
-        useOnFieldChange<FormValues['textInputName'], FormValues>(
-          'textInputName',
-          callback,
-        ),
+      () => useOnFieldChange<FormValues>('textInputName', callback),
       {
         wrapper: ({ children }) => (
           <Wrapper initialValues={initialValues}>{children}</Wrapper>
@@ -75,13 +80,13 @@ describe('useOnFieldChange', () => {
   })
 
   test('should render when condition change', () => {
-    const callback = jest.fn()
+    const callback = jest.fn<CallbackFn<FieldValues, FormValues>>()
 
     let initialValues = initial
 
     const { result, rerender } = renderHook(
       ({ enabled }) => {
-        useOnFieldChange<FormValues['textInputName'], FormValues>(
+        useOnFieldChange<FormValues>(
           'textInputName',
           callback,
           // enabled will depends of rerender({ condition: '' })
diff --git a/packages/form/src/hooks/__tests__/useValidation.spec.ts b/packages/form/src/hooks/__tests__/useValidation.spec.ts
deleted file mode 100644
index 6e625352b9..0000000000
--- a/packages/form/src/hooks/__tests__/useValidation.spec.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { describe, expect, test } from '@jest/globals'
-import { renderHook } from '@testing-library/react'
-import type { ValidatorObject } from '../../types'
-import { useValidation } from '../useValidation'
-
-const fakeValidator = (success?: boolean) =>
-  ({
-    error: 'REQUIRED',
-    validate: () => success,
-  }) as ValidatorObject<boolean>
-
-describe('useValidation', () => {
-  test('should render correctly', () => {
-    const { result } = renderHook(() => useValidation({ validators: [] }))
-    expect(result.current).toBeDefined()
-  })
-  test('should call validation', () => {
-    const { result } = renderHook(() => useValidation({ validators: [] }))
-    expect(result.current(false, {})).toStrictEqual(undefined)
-  })
-
-  test('should have one error', () => {
-    const { result } = renderHook(() =>
-      useValidation({
-        validators: [fakeValidator(false), fakeValidator(true)],
-      }),
-    )
-    expect(result.current(false, {})).toStrictEqual(['REQUIRED'])
-  })
-
-  test('should have all success', () => {
-    const { result } = renderHook(() =>
-      useValidation({ validators: [fakeValidator(true)] }),
-    )
-    expect(result.current(false, {})).toStrictEqual(undefined)
-  })
-
-  test('should have validate return true', () => {
-    const { result } = renderHook(() =>
-      useValidation({ validate: () => true, validators: [] }),
-    )
-    expect(result.current(false, {})).toStrictEqual(undefined)
-  })
-
-  test('should have validate return false', () => {
-    const { result } = renderHook(() =>
-      useValidation({ validate: () => false, validators: [] }),
-    )
-    expect(result.current(false, {})).toStrictEqual(false)
-  })
-})
diff --git a/packages/form/src/hooks/index.ts b/packages/form/src/hooks/index.ts
index a0055dc0c6..ad2afca3da 100644
--- a/packages/form/src/hooks/index.ts
+++ b/packages/form/src/hooks/index.ts
@@ -1,3 +1,5 @@
-export { useValidation } from './useValidation'
-export { useFormField } from './useFormField'
 export { useOnFieldChange } from './useOnFieldChange'
+export { useFormStateDeprecated } from './useFormState'
+export { useFieldDeprecated } from './useField'
+export { useFormDeprecated } from './useForm'
+export { useFieldArrayDeprecated } from './useFieldArray'
diff --git a/packages/form/src/hooks/useField.ts b/packages/form/src/hooks/useField.ts
new file mode 100644
index 0000000000..4db3caaa71
--- /dev/null
+++ b/packages/form/src/hooks/useField.ts
@@ -0,0 +1,47 @@
+import type {
+  FieldPath,
+  FieldPathValue,
+  FieldValues,
+  Path,
+  Validate,
+} from 'react-hook-form'
+import { useController, useFormContext } from 'react-hook-form'
+
+type Options<TFieldValues extends FieldValues> = {
+  subscription?: Record<string, boolean>
+  validate?: Validate<
+    FieldPathValue<TFieldValues, Path<TFieldValues>>,
+    TFieldValues
+  >
+}
+
+/**
+ * @deprecated
+ */
+export const useFieldDeprecated = <
+  T,
+  TFieldValues extends FieldValues = FieldValues,
+  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(
+  name: TFieldName,
+  options?: Options<TFieldValues>,
+) => {
+  const { getValues } = useFormContext<TFieldValues>()
+  const { field, fieldState } = useController<TFieldValues>({
+    name,
+    rules: { validate: options?.validate },
+  })
+
+  return {
+    input: {
+      value: getValues(name) as T,
+      onChange: field.onChange,
+    },
+    meta: {
+      error: fieldState.error?.message,
+      touched: fieldState.isTouched,
+      invalid: fieldState.invalid,
+      dirty: fieldState.isDirty,
+    },
+  }
+}
diff --git a/packages/form/src/hooks/useFieldArray.ts b/packages/form/src/hooks/useFieldArray.ts
new file mode 100644
index 0000000000..6cd2780e82
--- /dev/null
+++ b/packages/form/src/hooks/useFieldArray.ts
@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react'
+import type {
+  ArrayPath,
+  FieldArray,
+  FieldValues,
+  Validate,
+} from 'react-hook-form'
+import {
+  useFieldArray as useFieldArrayHookForm,
+  useWatch,
+} from 'react-hook-form'
+
+type Options<TFieldValues extends FieldValues> = {
+  validate?: Validate<FieldArray<TFieldValues>[], TFieldValues>
+  subscription?: Record<string, boolean>
+}
+
+/**
+ * @deprecated
+ */
+export const useFieldArrayDeprecated = <
+  T,
+  TFieldValues extends FieldValues = FieldValues,
+>(
+  name: ArrayPath<TFieldValues>,
+  options?: Options<TFieldValues>,
+) => {
+  const { fields, append, remove, update, move } =
+    useFieldArrayHookForm<TFieldValues>({
+      name,
+      rules: { validate: options?.validate },
+    })
+
+  const value = useWatch({ name })
+
+  return {
+    fields: {
+      push: append,
+      value: value as T[],
+      remove,
+      update,
+      map: (callback: (name: string, index: number) => ReactNode) =>
+        fields.map((_, index) => callback(`${name}.${index}`, index)),
+      move,
+      length: fields.length,
+    },
+  }
+}
diff --git a/packages/form/src/hooks/useForm.ts b/packages/form/src/hooks/useForm.ts
new file mode 100644
index 0000000000..511f609217
--- /dev/null
+++ b/packages/form/src/hooks/useForm.ts
@@ -0,0 +1,24 @@
+import { useContext } from 'react'
+import type { FieldValues } from 'react-hook-form'
+import { useFormContext } from 'react-hook-form'
+import { FormSubmitContext } from '../components/Form'
+
+/**
+ * @deprecated
+ */
+export const useFormDeprecated = <TFieldValues extends FieldValues>() => {
+  const { setValue, resetField, getFieldState, reset } =
+    useFormContext<TFieldValues>()
+
+  const formSubmitContext = useContext(FormSubmitContext)
+
+  return {
+    change: setValue,
+    resetFieldState: resetField,
+    getFieldState,
+    batch: (callback: () => void) => callback(),
+    restart: reset,
+    reset,
+    submit: formSubmitContext.handleSubmit,
+  }
+}
diff --git a/packages/form/src/hooks/useFormField.ts b/packages/form/src/hooks/useFormField.ts
deleted file mode 100644
index bdd5c0882a..0000000000
--- a/packages/form/src/hooks/useFormField.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { useMemo } from 'react'
-import type { UseFieldConfig } from 'react-final-form'
-import { useField } from 'react-final-form'
-import { pickValidators } from '../helpers'
-import type { ValidatorProps } from '../types'
-import { useValidation } from './useValidation'
-
-export const useFormField = <
-  FieldValue = unknown,
-  T extends HTMLElement = HTMLElement,
-  InputValue = FieldValue,
->(
-  name: string,
-  {
-    afterSubmit,
-    disabled,
-    allowNull,
-    beforeSubmit,
-    defaultValue,
-    format,
-    formatOnBlur,
-    initialValue,
-    isEqual,
-    multiple,
-    parse,
-    subscription,
-    type,
-    validate,
-    validateFields,
-    value,
-    max,
-    maxLength,
-    min,
-    minLength,
-    regex,
-    required,
-    maxDate,
-    minDate,
-  }: UseFieldConfig<FieldValue, InputValue> &
-    ValidatorProps & { disabled?: boolean },
-) => {
-  const serializedRegex = useMemo(() => regex?.toString(), [regex])
-
-  const validators = useMemo(
-    () =>
-      pickValidators<FieldValue>({
-        max,
-        maxDate,
-        maxLength,
-        min,
-        minDate,
-        minLength,
-        regex,
-        required,
-      }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      max,
-      maxLength,
-      min,
-      minLength,
-      required,
-      serializedRegex,
-      maxDate,
-      minDate,
-    ],
-  )
-
-  const validateFn = useValidation({ validate, validators })
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const data = useMemo(() => ({ key: Math.random() }), [validateFn, disabled])
-
-  return useField<FieldValue, T, InputValue>(name, {
-    afterSubmit,
-    allowNull,
-    beforeSubmit,
-    defaultValue,
-    format,
-    formatOnBlur,
-    initialValue,
-    isEqual,
-    multiple,
-    parse,
-    subscription,
-    type,
-    validate: disabled ? undefined : validateFn,
-    validateFields,
-    value,
-    data,
-  })
-}
diff --git a/packages/form/src/hooks/useFormState.ts b/packages/form/src/hooks/useFormState.ts
new file mode 100644
index 0000000000..73d155608d
--- /dev/null
+++ b/packages/form/src/hooks/useFormState.ts
@@ -0,0 +1,30 @@
+import type { FieldValues } from 'react-hook-form'
+import { useFormContext } from 'react-hook-form'
+
+type UseFormStateParams = {
+  subscription?: Record<string, boolean>
+}
+
+/**
+ * @deprecated
+ */
+export const useFormStateDeprecated = <TFieldValues extends FieldValues>(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _params?: UseFormStateParams,
+) => {
+  const { formState, watch } = useFormContext<TFieldValues>()
+
+  return {
+    dirtySinceLastSubmit: formState.isDirty,
+    submitErrors: formState.errors.root,
+    values: watch(),
+    hasValidationErrors: !formState.isValid,
+    pristine: !formState.isDirty,
+    errors: formState.errors,
+    initialValues: formState.defaultValues,
+    touched: formState.touchedFields,
+    submitting: formState.isSubmitting,
+    invalid: !formState.isValid,
+    valid: formState.isValid,
+  }
+}
diff --git a/packages/form/src/hooks/useOnFieldChange.ts b/packages/form/src/hooks/useOnFieldChange.ts
index 111d451791..86fa70a3d5 100644
--- a/packages/form/src/hooks/useOnFieldChange.ts
+++ b/packages/form/src/hooks/useOnFieldChange.ts
@@ -1,29 +1,36 @@
 import { useEffect, useRef } from 'react'
-import { useField, useFormState } from 'react-final-form'
+import type { DeepPartial, FieldPath, FieldValues } from 'react-hook-form'
+import { useFormContext } from 'react-hook-form'
 
-type CallbackFn<FieldValue, AllValues> = (
-  value: FieldValue,
-  values: AllValues,
-) => unknown
+export type CallbackFn<TFieldValues extends FieldValues, T> = (
+  value: T,
+  values: DeepPartial<TFieldValues>,
+) => void | Promise<void>
 
-export const useOnFieldChange = <FieldValue = unknown, AllValues = unknown>(
-  name: string,
-  callback: CallbackFn<FieldValue, AllValues>,
+/**
+ * @deprecated
+ */
+export const useOnFieldChange = <
+  T,
+  TFieldValues extends FieldValues = FieldValues,
+>(
+  fieldName: FieldPath<TFieldValues>,
+  callback: CallbackFn<TFieldValues, T>,
   enabled = true,
 ): void => {
-  const { values } = useFormState<AllValues>()
-  const {
-    input: { value },
-  } = useField<FieldValue>(name, {
-    allowNull: true,
-    subscription: { value: true },
-  })
-  const previousValues = useRef(value)
+  const { watch, getValues } = useFormContext<TFieldValues>()
+  const previousValues = useRef<DeepPartial<TFieldValues> | null>(
+    getValues(fieldName),
+  )
 
   useEffect(() => {
-    if (previousValues.current !== value && enabled) {
-      previousValues.current = value
-      callback(value, values)
-    }
-  }, [value, values, callback, enabled])
+    const subscription = watch(value => {
+      if (previousValues.current !== value[fieldName] && enabled) {
+        previousValues.current = value[fieldName]
+        callback(value[fieldName], value)?.catch(() => null)
+      }
+    })
+
+    return () => subscription.unsubscribe()
+  }, [callback, enabled, watch, getValues, fieldName])
 }
diff --git a/packages/form/src/hooks/useValidation.ts b/packages/form/src/hooks/useValidation.ts
deleted file mode 100644
index 1a70de1060..0000000000
--- a/packages/form/src/hooks/useValidation.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import type { AnyObject, FieldState, FieldValidator } from 'final-form'
-import { useCallback } from 'react'
-import type { ValidatorObject } from '../types'
-
-type UseValidationParams<FieldValue = unknown> = {
-  validators: ValidatorObject<FieldValue>[]
-  validate?: FieldValidator<FieldValue>
-}
-
-type UseValidationResult<FieldValue = unknown> = (
-  value: FieldValue,
-  allValues: AnyObject,
-  meta?: FieldState<FieldValue>,
-) => string[] | undefined | unknown
-
-export const useValidation = <T = unknown>({
-  validators,
-  validate,
-}: UseValidationParams<T>): UseValidationResult<T> =>
-  useCallback(
-    (
-      value: T,
-      allValues: AnyObject,
-      meta?: FieldState<T>,
-    ): (string | unknown)[] | unknown | undefined => {
-      if (validate) {
-        const validateErr = validate(value, allValues, meta) as
-          | unknown
-          | undefined
-        if (validateErr !== undefined && validateErr !== true) {
-          return validateErr
-        }
-      }
-
-      const errors = validators
-        .filter(validator => !validator.validate(value, allValues, meta))
-        .map(({ error }) => error) as (string | unknown)[]
-
-      return errors.length > 0 ? errors : undefined
-    },
-    [validate, validators],
-  )
diff --git a/packages/form/src/index.ts b/packages/form/src/index.ts
index b29d406f73..3c0b25e615 100644
--- a/packages/form/src/index.ts
+++ b/packages/form/src/index.ts
@@ -1,13 +1,4 @@
-export { FieldArray, useFieldArray } from 'react-final-form-arrays'
-export { FORM_ERROR } from 'final-form'
-export type { FormApi } from 'final-form'
-export {
-  FormSpy,
-  useFormState,
-  useForm,
-  useField,
-  Field,
-} from 'react-final-form'
+export { FORM_ERROR } from './constants'
 export {
   CheckboxField,
   CheckboxGroupField,
@@ -24,8 +15,19 @@ export {
   TimeField,
   ToggleField,
   RadioGroupField,
+  FormSpy,
 } from './components'
-export { useValidation, useOnFieldChange } from './hooks'
 export type { BaseFieldProps, FormErrors } from './types'
-export { pickValidators } from './helpers'
 export { useErrors, ErrorProvider } from './providers/ErrorContext'
+export {
+  useFormStateDeprecated,
+  useFieldDeprecated,
+  useFormDeprecated,
+  useFieldArrayDeprecated,
+  useOnFieldChange,
+} from './hooks'
+
+// eslint-disable-next-line no-restricted-syntax
+export * from 'react-hook-form'
+// eslint-disable-next-line no-restricted-syntax
+export type * from 'react-hook-form'
diff --git a/packages/form/src/mocks/mockErrors.ts b/packages/form/src/mocks/mockErrors.ts
index baa21f7e9c..4e20383d20 100644
--- a/packages/form/src/mocks/mockErrors.ts
+++ b/packages/form/src/mocks/mockErrors.ts
@@ -3,30 +3,14 @@ import type { FormErrors } from '../types'
 export const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
 
 export const mockErrors: FormErrors = {
-  MAX_DATE: ({ maxDate }) => `Date must be lower than ${maxDate?.toString()}`,
-  MAX_LENGTH: ({ maxLength }) =>
+  maxDate: ({ maxDate }) => `Date must be lower than ${maxDate?.toString()}`,
+  maxLength: ({ maxLength }) =>
     `This field should have a length lower than ${maxLength}`,
-  MIN_DATE: ({ minDate }) => `Date must be greater than ${minDate?.toString()}`,
-  MIN_LENGTH: ({ minLength }) =>
+  minDate: ({ minDate }) => `Date must be greater than ${minDate?.toString()}`,
+  minLength: ({ minLength }) =>
     `This field should have a length greater than ${minLength}`,
-  REGEX: ({ regex }) => {
-    if (
-      (Array.isArray(regex[0])
-        ? regex?.[0]?.[0]?.source
-        : regex?.[0]?.source) === emailRegex.source
-    ) {
-      return 'Invalid email'
-    }
-
-    return `This field should match the regex ${regex
-      .map(r =>
-        Array.isArray(r)
-          ? r.map(nestedRegex => nestedRegex.source).join(' or ')
-          : r.source,
-      )
-      .join(' and ')}`
-  },
-  REQUIRED: 'This field is required',
-  TOO_HIGH: ({ max }) => `This field is too high (maximum is : ${max})`,
-  TOO_LOW: 'This field is too low',
+  pattern: () => `This field should match the regex`,
+  required: () => 'This field is required',
+  max: ({ max }) => `This field is too high (maximum is : ${max})`,
+  min: ({ min }) => `This field is too low (minimum is: ${min})`,
 }
diff --git a/packages/form/src/providers/ErrorContext/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/providers/ErrorContext/__tests__/__snapshots__/index.spec.tsx.snap
index bb604521bd..2ad06674f4 100644
--- a/packages/form/src/providers/ErrorContext/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/providers/ErrorContext/__tests__/__snapshots__/index.spec.tsx.snap
@@ -2,6 +2,8 @@
 
 exports[`ErrorProvider renders correctly  1`] = `
 <DocumentFragment>
-  Test
+  <form>
+    Test
+  </form>
 </DocumentFragment>
 `;
diff --git a/packages/form/src/providers/ErrorContext/__tests__/index.spec.tsx b/packages/form/src/providers/ErrorContext/__tests__/index.spec.tsx
index 03627ca56d..9b00150def 100644
--- a/packages/form/src/providers/ErrorContext/__tests__/index.spec.tsx
+++ b/packages/form/src/providers/ErrorContext/__tests__/index.spec.tsx
@@ -1,25 +1,23 @@
-import { describe, expect, jest, test } from '@jest/globals'
+import { describe, expect, test } from '@jest/globals'
 import { renderHook } from '@testing-library/react'
 import type { ReactNode } from 'react'
-import { Form as ReactFinalForm } from 'react-final-form'
-import { ErrorProvider, useErrors } from '..'
+import { useErrors } from '..'
 import { shouldMatchEmotionSnapshot } from '../../../../.jest/helpers'
+import { Form } from '../../../components/Form'
 import { mockErrors } from '../../../mocks'
 
 const HookWrapper = ({ children }: { children: ReactNode }) => (
-  <ReactFinalForm
-    onSubmit={jest.fn<any>()}
-    render={() => <ErrorProvider errors={mockErrors}>{children}</ErrorProvider>}
-  />
+  <Form errors={mockErrors} onRawSubmit={() => null}>
+    {children}
+  </Form>
 )
 
 describe('ErrorProvider', () => {
   test('renders correctly ', () =>
     shouldMatchEmotionSnapshot(
-      <ReactFinalForm
-        onSubmit={jest.fn<any>()}
-        render={() => <ErrorProvider errors={mockErrors}>Test</ErrorProvider>}
-      />,
+      <Form onRawSubmit={() => null} errors={mockErrors}>
+        Test
+      </Form>,
     ))
 
   test('should return an error', () => {
@@ -27,116 +25,27 @@ describe('ErrorProvider', () => {
       wrapper: HookWrapper,
     })
 
-    expect(result.current.errors).toStrictEqual(mockErrors)
-    const requiredTouchedAndEmpty = {
-      label: 'test',
-      meta: {
-        error: ['REQUIRED'],
-        touched: true,
-      },
-      name: 'test',
-      value: '',
-    }
-    expect(result.current.getError(requiredTouchedAndEmpty)).toStrictEqual(
-      mockErrors.REQUIRED,
-    )
-
-    const minLengthTouchedAndInvalid = {
-      label: 'test',
-      meta: {
-        error: ['MIN_LENGTH'],
-        touched: true,
-      },
-      minLength: 3,
-      name: 'test',
-      value: 'yo',
-    }
-    expect(result.current.getError(minLengthTouchedAndInvalid)).toEqual(
-      'This field should have a length greater than 3',
-    )
-
-    const minLengthWithInvalidInitialValue = {
-      label: 'test',
-      meta: {
-        dirty: false,
-        error: ['MIN_LENGTH'],
-        touched: false,
-      },
-      minLength: 3,
-      name: 'test',
-      value: 'yo',
-    }
-    expect(result.current.getError(minLengthWithInvalidInitialValue)).toEqual(
-      'This field should have a length greater than 3',
-    )
-
-    const customErrorString = 'This is an error'
-    const minLengthWithInvalidValueAndCustomErrorMessage = {
-      label: 'test',
-      meta: {
-        error: customErrorString,
-        touched: true,
-      },
-      minLength: 3,
-      name: 'test',
-      value: 'yo',
-    }
     expect(
-      result.current.getError(minLengthWithInvalidValueAndCustomErrorMessage),
-    ).toEqual(customErrorString)
-  })
+      result.current.getError({ label: 'test' }, { type: 'required' }),
+    ).toStrictEqual(mockErrors.required({ label: '' }))
 
-  test('should not return an error', () => {
-    const { result } = renderHook(() => useErrors(), {
-      wrapper: HookWrapper,
-    })
-
-    expect(result.current.errors).toStrictEqual(mockErrors)
     expect(
-      result.current.getError({
-        label: 'test',
-        name: 'test',
-        value: 'test',
-      }),
-    ).toStrictEqual(undefined)
-    const requiredAndNotEmpty = {
-      label: 'test',
-      meta: {
-        touched: true,
-      },
-      name: 'test',
-      value: 'Hi there',
-    }
-    expect(result.current.getError(requiredAndNotEmpty)).toStrictEqual(
-      undefined,
-    )
+      result.current.getError({ label: 'test', min: 3 }, { type: 'min' }),
+    ).toEqual('This field is too low (minimum is: 3)')
 
-    const requiredDirtyAndEmpty = {
-      label: 'test',
-      meta: {
-        dirty: true,
-        error: ['REQUIRED'],
-        touched: false,
-      },
-      name: 'test',
-      value: '',
-    }
-    expect(result.current.getError(requiredDirtyAndEmpty)).toStrictEqual(
-      undefined,
-    )
+    expect(
+      result.current.getError(
+        { label: 'test', minLength: 3 },
+        { type: 'minLength' },
+      ),
+    ).toEqual('This field should have a length greater than 3')
 
-    // to cover all code branches and default values
+    const customErrorString = 'This is an error'
     expect(
-      result.current.getError({
-        allValues: {},
-        label: 'test',
-        meta: {
-          error: [],
-        },
-        minLength: 3,
-        name: 'test',
-        value: '',
-      }),
-    ).toEqual(undefined)
+      result.current.getError(
+        { label: 'test', minLength: 3 },
+        { type: 'minLength', message: customErrorString },
+      ),
+    ).toEqual(customErrorString)
   })
 })
diff --git a/packages/form/src/providers/ErrorContext/index.tsx b/packages/form/src/providers/ErrorContext/index.tsx
index 015daddadd..36a43a89c1 100644
--- a/packages/form/src/providers/ErrorContext/index.tsx
+++ b/packages/form/src/providers/ErrorContext/index.tsx
@@ -1,83 +1,34 @@
-import type { AnyObject } from 'final-form'
-import type { JSX, ReactNode } from 'react'
+import type { ReactNode } from 'react'
 import { createContext, useCallback, useContext, useMemo } from 'react'
-import { useFormState } from 'react-final-form'
-import type { FormErrorFunctionParams, FormErrors } from '../../types'
-
-type GetErrorProps = Omit<FormErrorFunctionParams, 'allValues'> &
-  AnyObject & { errorProp?: string; additionalErrorChecks?: boolean }
+import type { FieldError } from 'react-hook-form'
+import type { MetaField, RequiredErrors } from '../../types'
 
 type ErrorContextValue = {
-  errors: FormErrors
-  getError: (props: GetErrorProps) => string | undefined
+  errors: RequiredErrors
+  getError: (meta: MetaField, error?: FieldError) => string | undefined
 }
 
 const ErrorContext = createContext<ErrorContextValue | undefined>(undefined)
 
 type ErrorProviderProps = {
   children: ReactNode
-  errors: FormErrors
+  errors: RequiredErrors
 }
 
-export const ErrorProvider = ({
-  children,
-  errors,
-}: ErrorProviderProps): JSX.Element => {
-  const { values } = useFormState()
-
-  const getFirstError = useCallback(
-    ({
-      label,
-      name,
-      value,
-      meta,
-      ...additionalParams
-    }: Omit<FormErrorFunctionParams, 'allValues'> & AnyObject) => {
-      if (meta?.error && Array.isArray(meta.error)) {
-        return (
-          meta.error
-            .map(untypedKey => {
-              const key = untypedKey as keyof typeof errors
-              if (typeof errors[key] === 'function') {
-                return (errors[key] as (params: AnyObject) => string)({
-                  label,
-                  meta,
-                  name,
-                  value,
-                  values,
-                  ...additionalParams,
-                })
-              }
-
-              return errors[key]
-            })
-            .filter(errorString => !!errorString)[0] ?? ''
-        )
+export const ErrorProvider = ({ children, errors }: ErrorProviderProps) => {
+  const getError = useCallback<ErrorContextValue['getError']>(
+    (meta, error) => {
+      if (!error) {
+        return undefined
       }
-      // With a custom validate function the user may return a string directly
-      if (meta?.error && typeof meta?.error === 'string') return meta?.error
-
-      return ''
-    },
-    [errors, values],
-  )
 
-  const getError = useCallback(
-    ({ meta, errorProp, value, ...props }: GetErrorProps) => {
-      if (errorProp) return errorProp
-
-      const hasInitialValueAndNotTouched =
-        value !== undefined &&
-        value !== null &&
-        value !== '' &&
-        value !== false &&
-        meta?.dirty === false
+      if (error.message) {
+        return error.message
+      }
 
-      return meta?.error && (hasInitialValueAndNotTouched || meta.touched)
-        ? getFirstError({ meta, value, ...props })
-        : undefined
+      return errors?.[error.type]?.(meta)
     },
-    [getFirstError],
+    [errors],
   )
 
   const value = useMemo(
diff --git a/packages/form/src/types.ts b/packages/form/src/types.ts
index 8c2f72e022..1548d2a88b 100644
--- a/packages/form/src/types.ts
+++ b/packages/form/src/types.ts
@@ -1,77 +1,47 @@
-import type { AnyObject, FieldSubscription, FieldValidator } from 'final-form'
-import type { FieldMetaState, UseFieldConfig } from 'react-final-form'
+import type {
+  FieldError,
+  FieldPath,
+  FieldValues,
+  Path,
+  PathValue,
+  UseControllerProps,
+  Validate,
+} from 'react-hook-form'
 
-export type FormErrorFunctionParams<InputValue = unknown> = {
-  label: string
-  name: string
-  value: InputValue
-  allValues: AnyObject
-  meta?: FieldMetaState<InputValue>
-}
-
-type RequiredErrors = {
-  TOO_LOW:
-    | ((params: FormErrorFunctionParams & { min: number }) => string)
-    | string
-  TOO_HIGH:
-    | ((params: FormErrorFunctionParams & { max: number }) => string)
-    | string
-  MIN_LENGTH:
-    | ((params: FormErrorFunctionParams & { minLength: number }) => string)
-    | string
-  MAX_LENGTH:
-    | ((params: FormErrorFunctionParams & { maxLength: number }) => string)
-    | string
-  REGEX:
-    | ((
-        params: FormErrorFunctionParams & { regex: (RegExp | RegExp[])[] },
-      ) => string)
-    | string
-  REQUIRED: ((params: FormErrorFunctionParams) => string) | string
-  MAX_DATE:
-    | ((params: FormErrorFunctionParams & { maxDate: Date }) => string)
-    | string
-  MIN_DATE:
-    | ((params: FormErrorFunctionParams & { minDate: Date }) => string)
-    | string
-}
-
-export type FormErrors = RequiredErrors
-
-export type ValidatorProps = {
-  required?: boolean
-  min?: number
+export type MetaField = {
+  min?: number | string
+  max?: number | string
   minLength?: number
-  max?: number
   maxLength?: number
   regex?: (RegExp | RegExp[])[]
-  maxDate?: Date
   minDate?: Date
+  maxDate?: Date
+  label: string
+  value?: string | number
 }
 
-export type ValidatorObject<InputValue = unknown> = {
-  validate: (
-    value: InputValue,
-    allValues?: AnyObject,
-    meta?: FieldMetaState<InputValue>,
-  ) => boolean
-  error: keyof RequiredErrors
+export type RequiredErrors = {
+  [key in FieldError['type']]: (params: MetaField) => string
 }
 
-export type BaseFieldProps<FieldValue, InputValue = unknown> = {
-  parse?: UseFieldConfig<FieldValue, InputValue>['parse']
-  format?: UseFieldConfig<FieldValue, InputValue>['format']
-  formatOnBlur?: boolean
-  subscription?: FieldSubscription
-  validateFields?: string[]
-  defaultValue?: FieldValue
-  data?: AnyObject
-  allowNull?: boolean
-  initialValue?: FieldValue
-  multiple?: boolean
-  isEqual?: (a: InputValue, b: InputValue) => boolean
-  validate?: FieldValidator<FieldValue>
-  afterSubmit?: () => void
-  beforeSubmit?: () => void | boolean
-  value?: FieldValue
+export type FormErrors = {
+  [key in
+    | 'required'
+    | 'min'
+    | 'max'
+    | 'minLength'
+    | 'maxLength'
+    | 'pattern'
+    | 'minDate'
+    | 'maxDate']: RequiredErrors[key]
+}
+
+export type BaseFieldProps<TFieldValues extends FieldValues = FieldValues> = {
+  name: FieldPath<TFieldValues>
+  required?: boolean
+  validate?: Validate<PathValue<TFieldValues, Path<TFieldValues>>, TFieldValues>
+  rules?: UseControllerProps<TFieldValues>['rules']
+  defaultValue?: PathValue<TFieldValues, Path<TFieldValues>>
+  label?: string
+  value?: PathValue<TFieldValues, Path<TFieldValues>>
 }
diff --git a/packages/form/src/validators/__tests__/max.spec.ts b/packages/form/src/validators/__tests__/max.spec.ts
deleted file mode 100644
index 547af14a35..0000000000
--- a/packages/form/src/validators/__tests__/max.spec.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { describe, expect, test } from '@jest/globals'
-import { maxValidator } from '../max'
-
-describe('max validator', () => {
-  test('should not throw error', () => {
-    const validator = maxValidator(1)
-    expect(validator).toBeDefined()
-    expect(validator.error).toBe('TOO_HIGH')
-  })
-
-  test('should success', () => {
-    const validator = maxValidator(1)
-    expect(validator.validate(2, {})).toBe(false)
-    expect(validator.validate(5, {})).toBe(false)
-  })
-
-  test('should failed', () => {
-    const validator = maxValidator(10)
-    expect(validator.validate(1, {})).toBe(true)
-    expect(validator.validate(9, {})).toBe(true)
-    expect(validator.validate(10, {})).toBe(true)
-    expect(validator.validate(11, {})).toBe(false)
-    expect(validator.validate(-10, {})).toBe(true)
-    expect(validator.validate(-11, {})).toBe(true)
-  })
-})
diff --git a/packages/form/src/validators/__tests__/maxDate.spec.ts b/packages/form/src/validators/__tests__/maxDate.spec.ts
index 76b5f652f2..b7b8d0281f 100644
--- a/packages/form/src/validators/__tests__/maxDate.spec.ts
+++ b/packages/form/src/validators/__tests__/maxDate.spec.ts
@@ -8,23 +8,17 @@ const yesterday = new Date(today.getTime() - 24 * hourInMs)
 const tomorrow = new Date(today.getTime() + 24 * hourInMs)
 
 describe('maxDate validator', () => {
-  test('should not throw error', () => {
-    const validator = maxDateValidator(tomorrow)
-    expect(validator).toBeDefined()
-    expect(validator.error).toBe('MAX_DATE')
-  })
-
   test('should success', () => {
     const validator = maxDateValidator(yesterday)
-    expect(validator.validate(today, {})).toBe(false)
-    expect(validator.validate(twoHoursLater, {})).toBe(false)
-    expect(validator.validate(tomorrow, {})).toBe(false)
+    expect(validator(today)).toBe(false)
+    expect(validator(twoHoursLater)).toBe(false)
+    expect(validator(tomorrow)).toBe(false)
   })
 
   test('should failed', () => {
     const validator = maxDateValidator(tomorrow)
-    expect(validator.validate(yesterday, {})).toBe(true)
-    expect(validator.validate(today, {})).toBe(true)
-    expect(validator.validate(twoHoursLater, {})).toBe(true)
+    expect(validator(yesterday)).toBe(true)
+    expect(validator(today)).toBe(true)
+    expect(validator(twoHoursLater)).toBe(true)
   })
 })
diff --git a/packages/form/src/validators/__tests__/maxLength.spec.ts b/packages/form/src/validators/__tests__/maxLength.spec.ts
deleted file mode 100644
index c4afa674d9..0000000000
--- a/packages/form/src/validators/__tests__/maxLength.spec.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { describe, expect, test } from '@jest/globals'
-import { maxLengthValidator } from '../maxLength'
-
-const fakeString = (size: number) => 'a'.repeat(size)
-
-describe('maxLength validator', () => {
-  test('should not throw error', () => {
-    const validator = maxLengthValidator(1)
-    expect(validator).toBeDefined()
-    expect(validator.error).toBe('MAX_LENGTH')
-  })
-
-  test('should success', () => {
-    const validator = maxLengthValidator(1)
-    expect(validator.validate(fakeString(2), {})).toBe(false)
-    expect(validator.validate(fakeString(5), {})).toBe(false)
-  })
-
-  test('should failed', () => {
-    const validator = maxLengthValidator(10)
-    expect(validator.validate(fakeString(1), {})).toBe(true)
-    expect(validator.validate(fakeString(9), {})).toBe(true)
-    expect(validator.validate(fakeString(10), {})).toBe(true)
-    expect(validator.validate(fakeString(11), {})).toBe(false)
-  })
-})
diff --git a/packages/form/src/validators/__tests__/min.spec.ts b/packages/form/src/validators/__tests__/min.spec.ts
deleted file mode 100644
index b0120ec190..0000000000
--- a/packages/form/src/validators/__tests__/min.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { describe, expect, test } from '@jest/globals'
-import { minValidator } from '../min'
-
-describe('min validator', () => {
-  test('should not throw error', () => {
-    const validator = minValidator(1)
-    expect(validator).toBeDefined()
-    expect(validator.error).toBe('TOO_LOW')
-  })
-
-  test('should success', () => {
-    const validator = minValidator(1)
-    expect(validator.validate(2, {})).toBe(true)
-    expect(validator.validate(5, {})).toBe(true)
-  })
-
-  test('should failed', () => {
-    const validator = minValidator(10)
-    expect(validator.validate(1, {})).toBe(false)
-    expect(validator.validate(9, {})).toBe(false)
-    expect(validator.validate(10, {})).toBe(true)
-    expect(validator.validate(-10, {})).toBe(false)
-    expect(validator.validate(-11, {})).toBe(false)
-  })
-})
diff --git a/packages/form/src/validators/__tests__/minDate.spec.ts b/packages/form/src/validators/__tests__/minDate.spec.ts
index 0eda252b28..a23714cd6b 100644
--- a/packages/form/src/validators/__tests__/minDate.spec.ts
+++ b/packages/form/src/validators/__tests__/minDate.spec.ts
@@ -8,23 +8,17 @@ const yesterday = new Date(today.getTime() - 24 * hourInMs)
 const tomorrow = new Date(today.getTime() + 24 * hourInMs)
 
 describe('minDate validator', () => {
-  test('should not throw error', () => {
-    const validator = minDateValidator(yesterday)
-    expect(validator).toBeDefined()
-    expect(validator.error).toBe('MIN_DATE')
-  })
-
   test('should invalidate the input', () => {
     const validator = minDateValidator(tomorrow)
-    expect(validator.validate(today, {})).toBe(false)
-    expect(validator.validate(twoHoursLater, {})).toBe(false)
-    expect(validator.validate(yesterday, {})).toBe(false)
+    expect(validator(today)).toBe(false)
+    expect(validator(twoHoursLater)).toBe(false)
+    expect(validator(yesterday)).toBe(false)
   })
 
   test('should validate the input', () => {
     const validator = minDateValidator(yesterday)
-    expect(validator.validate(today, {})).toBe(true)
-    expect(validator.validate(tomorrow, {})).toBe(true)
-    expect(validator.validate(twoHoursLater, {})).toBe(true)
+    expect(validator(today)).toBe(true)
+    expect(validator(tomorrow)).toBe(true)
+    expect(validator(twoHoursLater)).toBe(true)
   })
 })
diff --git a/packages/form/src/validators/__tests__/minLength.spec.ts b/packages/form/src/validators/__tests__/minLength.spec.ts
deleted file mode 100644
index da6a889ce8..0000000000
--- a/packages/form/src/validators/__tests__/minLength.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { describe, expect, test } from '@jest/globals'
-import { minLengthValidator } from '../minLength'
-
-const fakeString = (size: number) => 'a'.repeat(size)
-
-describe('minlength validator', () => {
-  test('should not throw error', () => {
-    const validator = minLengthValidator(1)
-    expect(validator).toBeDefined()
-    expect(validator.error).toBe('MIN_LENGTH')
-  })
-
-  test('should success', () => {
-    const validator = minLengthValidator(1)
-    expect(validator.validate(fakeString(2), {})).toBe(true)
-    expect(validator.validate(fakeString(5), {})).toBe(true)
-  })
-
-  test('should failed', () => {
-    const validator = minLengthValidator(10)
-    expect(validator.validate(fakeString(1), {})).toBe(false)
-    expect(validator.validate(fakeString(9), {})).toBe(false)
-    expect(validator.validate(fakeString(10), {})).toBe(true)
-  })
-})
diff --git a/packages/form/src/validators/__tests__/regex.spec.ts b/packages/form/src/validators/__tests__/regex.spec.ts
deleted file mode 100644
index 934f93c012..0000000000
--- a/packages/form/src/validators/__tests__/regex.spec.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { describe, expect, test } from '@jest/globals'
-import { regexValidator } from '../regex'
-
-const alpha = /^[a-zA-Z]*$/
-const digits = /^[0-9]*$/
-
-describe('regex validator', () => {
-  test('should not throw error', () => {
-    const validator = regexValidator([alpha])
-    expect(validator).toBeDefined()
-    expect(validator.error).toBe('REGEX')
-  })
-
-  test('should success', () => {
-    const validator = regexValidator([alpha])
-    expect(validator.validate('test', {})).toBe(true)
-  })
-
-  test('should failed', () => {
-    const validator = regexValidator([alpha])
-    expect(validator.validate('a1', {})).toBe(false)
-    expect(validator.validate('a+', {})).toBe(false)
-  })
-
-  test('should support or value', () => {
-    const validator = regexValidator([[alpha, digits]])
-    expect(validator.validate('test', {})).toBe(true)
-    expect(validator.validate('1234', {})).toBe(true)
-  })
-})
diff --git a/packages/form/src/validators/__tests__/required.spec.ts b/packages/form/src/validators/__tests__/required.spec.ts
deleted file mode 100644
index ea4ba7e8a0..0000000000
--- a/packages/form/src/validators/__tests__/required.spec.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { describe, expect, test } from '@jest/globals'
-import { requiredValidator } from '../required'
-
-describe('required validator', () => {
-  test('should not throw error', () => {
-    expect(requiredValidator(undefined)).toBeDefined()
-    expect(requiredValidator(undefined).error).toBe('REQUIRED')
-  })
-
-  test('should success', () => {
-    expect(requiredValidator(undefined).validate('test', {})).toBe(true)
-    expect(requiredValidator(undefined).validate(true, {})).toBe(true)
-    expect(requiredValidator(undefined).validate({}, {})).toBe(true)
-    expect(requiredValidator(false).validate('', {})).toBe(true)
-    expect(requiredValidator(false).validate(undefined, {})).toBe(true)
-    expect(requiredValidator(false).validate(false, {})).toBe(true)
-  })
-
-  test('should failed', () => {
-    expect(requiredValidator(true).validate('', {})).toBe(false)
-    expect(requiredValidator(true).validate(undefined, {})).toBe(false)
-    expect(requiredValidator(true).validate(false, {})).toBe(false)
-  })
-})
diff --git a/packages/form/src/validators/index.ts b/packages/form/src/validators/index.ts
index b97cf4f000..84b44dedda 100644
--- a/packages/form/src/validators/index.ts
+++ b/packages/form/src/validators/index.ts
@@ -1,19 +1,7 @@
-import { maxValidator as max } from './max'
 import { maxDateValidator as maxDate } from './maxDate'
-import { maxLengthValidator as maxLength } from './maxLength'
-import { minValidator as min } from './min'
 import { minDateValidator as minDate } from './minDate'
-import { minLengthValidator as minLength } from './minLength'
-import { regexValidator as regex } from './regex'
-import { requiredValidator as required } from './required'
 
 export default {
-  max,
-  maxDate,
-  maxLength,
-  min,
   minDate,
-  minLength,
-  regex,
-  required,
+  maxDate,
 }
diff --git a/packages/form/src/validators/max.ts b/packages/form/src/validators/max.ts
deleted file mode 100644
index bcbcc024ed..0000000000
--- a/packages/form/src/validators/max.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { ValidatorFn } from './types'
-
-export const maxValidator: ValidatorFn<number> = max => ({
-  error: 'TOO_HIGH',
-  validate: value => value === undefined || Number(value) <= max,
-})
diff --git a/packages/form/src/validators/maxDate.ts b/packages/form/src/validators/maxDate.ts
index 08dd2e10ad..5516895bb7 100644
--- a/packages/form/src/validators/maxDate.ts
+++ b/packages/form/src/validators/maxDate.ts
@@ -1,6 +1,2 @@
-import type { ValidatorFn } from './types'
-
-export const maxDateValidator: ValidatorFn<Date, Date> = maxDate => ({
-  error: 'MAX_DATE',
-  validate: value => value === undefined || value <= maxDate,
-})
+export const maxDateValidator = (maxDate?: Date) => (value: Date) =>
+  value === undefined || maxDate === undefined || value <= maxDate
diff --git a/packages/form/src/validators/maxLength.ts b/packages/form/src/validators/maxLength.ts
deleted file mode 100644
index bc401e00da..0000000000
--- a/packages/form/src/validators/maxLength.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { ValidatorFn } from './types'
-
-export const maxLengthValidator: ValidatorFn<string, number> = maxLength => ({
-  error: 'MAX_LENGTH',
-  validate: value => value === undefined || value.length <= maxLength,
-})
diff --git a/packages/form/src/validators/min.ts b/packages/form/src/validators/min.ts
deleted file mode 100644
index 3af8ff2dc8..0000000000
--- a/packages/form/src/validators/min.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { ValidatorFn } from './types'
-
-export const minValidator: ValidatorFn<number> = min => ({
-  error: 'TOO_LOW',
-  validate: value => value === undefined || Number(value) >= min,
-})
diff --git a/packages/form/src/validators/minDate.ts b/packages/form/src/validators/minDate.ts
index 804790461f..3d81c94234 100644
--- a/packages/form/src/validators/minDate.ts
+++ b/packages/form/src/validators/minDate.ts
@@ -1,6 +1,2 @@
-import type { ValidatorFn } from './types'
-
-export const minDateValidator: ValidatorFn<Date, Date> = minDate => ({
-  error: 'MIN_DATE',
-  validate: value => value === undefined || value >= minDate,
-})
+export const minDateValidator = (minDate?: Date) => (value: Date) =>
+  value === undefined || minDate === undefined || value >= minDate
diff --git a/packages/form/src/validators/minLength.ts b/packages/form/src/validators/minLength.ts
deleted file mode 100644
index 45fc5323f0..0000000000
--- a/packages/form/src/validators/minLength.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { ValidatorFn } from './types'
-
-export const minLengthValidator: ValidatorFn<string, number> = minLength => ({
-  error: 'MIN_LENGTH',
-  validate: value => value === undefined || value.length >= minLength,
-})
diff --git a/packages/form/src/validators/regex.ts b/packages/form/src/validators/regex.ts
deleted file mode 100644
index 509cbe340d..0000000000
--- a/packages/form/src/validators/regex.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { ValidatorFn } from './types'
-
-export const regexValidator: ValidatorFn<
-  string,
-  (RegExp | RegExp[])[]
-> = regexes => ({
-  error: 'REGEX',
-  validate: value =>
-    regexes.every(
-      regex =>
-        value === undefined ||
-        value === '' ||
-        (Array.isArray(regex)
-          ? regex.some(regexOr => regexOr.test(value))
-          : regex.test(value)),
-    ),
-})
diff --git a/packages/form/src/validators/required.ts b/packages/form/src/validators/required.ts
deleted file mode 100644
index 3a428f02ae..0000000000
--- a/packages/form/src/validators/required.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { ValidatorFn } from './types'
-
-export const requiredValidator: ValidatorFn = required => ({
-  error: 'REQUIRED',
-  validate: (value: unknown) => (required ? !!value : true),
-})
diff --git a/packages/form/src/validators/types.ts b/packages/form/src/validators/types.ts
deleted file mode 100644
index 670ce8deb2..0000000000
--- a/packages/form/src/validators/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import type { ValidatorObject } from '../types'
-
-export type ValidatorFn<InputValue = unknown, ArgsValue = InputValue> = (
-  args: ArgsValue,
-) => ValidatorObject<InputValue>
diff --git a/packages/ui/src/__stories__/Tools/ThemeGenerator/FormContent/index.tsx b/packages/ui/src/__stories__/Tools/ThemeGenerator/FormContent/index.tsx
index 1c94066460..b80a7e2a8e 100644
--- a/packages/ui/src/__stories__/Tools/ThemeGenerator/FormContent/index.tsx
+++ b/packages/ui/src/__stories__/Tools/ThemeGenerator/FormContent/index.tsx
@@ -4,7 +4,7 @@ import {
   Submit,
   TextInputField,
   useFieldArray,
-  useForm,
+  useFormContext,
   useFormState,
   // eslint-disable-next-line import/no-relative-packages
 } from '../../../../../../form/src'
@@ -21,13 +21,13 @@ const StyledRow = styled(Row)`
   width: 100%;
 `
 
-type KeyValue = { key: string; value: string; required?: boolean }
-
 export const FormContent = () => {
   const [confirmResetForm, setConfirmResetForm] = useState(false)
-  const { fields } = useFieldArray<KeyValue>('sentiments')
+  const { fields, remove } = useFieldArray<typeof INITIAL_VALUES>({
+    name: 'sentiments',
+  })
   const { errors } = useFormState()
-  const { reset } = useForm()
+  const { reset } = useFormContext<typeof INITIAL_VALUES>()
 
   return (
     <Stack gap={6}>
@@ -76,22 +76,23 @@ export const FormContent = () => {
         </Stack>
       </Stack>
 
-      {fields.map((fieldName, index) => {
-        const isRequiredSentiment = fields.value[index].required
-        const countRequiredSentiments = fields.value.filter(
+      {fields.map((field, index) => {
+        const isRequiredSentiment = field.required
+        const countRequiredSentiments = fields.filter(
           ({ required }) => required,
         ).length
+        console.log({ errors })
 
         return (
-          <Stack gap={1} direction="row" key={fieldName}>
+          <Stack gap={1} direction="row" key={field.id}>
             <Stack gap={1} flex={1}>
               <CapitalizeText
                 variant="bodyStrong"
                 as="label"
-                htmlFor={`${fieldName}.key`}
+                htmlFor={`sentiments.${index}.key`}
               >
                 {isRequiredSentiment
-                  ? `${fields.value[index].key} sentiment name`
+                  ? `${field.key} sentiment name`
                   : `Additional sentiment ${
                       index - countRequiredSentiments + 1
                     } name`}
@@ -105,8 +106,8 @@ export const FormContent = () => {
               >
                 <Stack flex={1}>
                   <TextInputField
-                    name={`${fieldName}.key`}
-                    id={`${fieldName}.key`}
+                    name={`sentiments.${index}.key`}
+                    id={`sentiments.${index}.key`}
                     placeholder="neutral"
                     noTopLabel
                     disabled={isRequiredSentiment}
@@ -119,10 +120,10 @@ export const FormContent = () => {
               <CapitalizeText
                 variant="bodyStrong"
                 as="label"
-                htmlFor={`${fieldName}.value`}
+                htmlFor={`sentiments.${index}.value`}
               >
                 {isRequiredSentiment
-                  ? `${fields.value[index].key} sentiment value`
+                  ? `${field.key} sentiment value`
                   : `Additional sentiment ${
                       index - countRequiredSentiments + 1
                     } value`}
@@ -130,23 +131,27 @@ export const FormContent = () => {
               <Stack gap={1} alignItems="center" direction="row">
                 <StyledRow templateColumns="9fr 1fr" gap={1}>
                   <TextInputField
-                    name={`${fieldName}.value`}
-                    id={`${fieldName}.value`}
+                    name={`sentiments.${index}.value`}
+                    id={`sentiments.${index}.value`}
                     placeholder="#FFFFFF"
                     noTopLabel
-                    regex={[hexadecimalColorRegex]}
+                    rules={{
+                      pattern: hexadecimalColorRegex,
+                    }}
                     valid={
-                      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-                      !errors?.['sentiments']?.[index]
+                      // @ts-expect-error get field array error
+                      !errors['sentiments']?.[index]
                     }
-                    required
                   />
                   <TextInputField
-                    name={`${fieldName}.value`}
-                    id={`${fieldName}.value`}
+                    name={`sentiments.${index}.value`}
+                    id={`sentiments.${index}.value`}
                     placeholder="#FFFFFF"
                     noTopLabel
                     type="color"
+                    rules={{
+                      pattern: hexadecimalColorRegex,
+                    }}
                   />
                 </StyledRow>
                 {!isRequiredSentiment ? (
@@ -155,7 +160,7 @@ export const FormContent = () => {
                     variant="filled"
                     sentiment="neutral"
                     size="large"
-                    onClick={() => fields.remove(index)}
+                    onClick={() => remove(index)}
                   />
                 ) : null}
               </Stack>
diff --git a/packages/ui/src/__stories__/Tools/ThemeGenerator/index.tsx b/packages/ui/src/__stories__/Tools/ThemeGenerator/index.tsx
index 41ff6c787f..8913d04fb5 100644
--- a/packages/ui/src/__stories__/Tools/ThemeGenerator/index.tsx
+++ b/packages/ui/src/__stories__/Tools/ThemeGenerator/index.tsx
@@ -7,6 +7,7 @@ import {
 } from '../../../../../../scripts/figma-synchronise-tokens'
 import {
   Form,
+  useForm,
   // eslint-disable-next-line import/no-relative-packages
 } from '../../../../../form/src'
 import { Stack, Text } from '../../../components'
@@ -36,6 +37,11 @@ export const ThemeGenerator = () => {
     typeof INITIAL_VALUES | null
   >(null)
 
+  const methods = useForm({
+    values: savedFormValues ?? INITIAL_VALUES,
+    mode: 'onChange',
+  })
+
   useEffect(() => {
     setTheme(generatedPalette)
   }, [generatedPalette])
@@ -133,16 +139,16 @@ export const ThemeGenerator = () => {
           </Stack>
           <Form
             onRawSubmit={onSubmit}
-            initialValues={savedFormValues ?? INITIAL_VALUES}
+            methods={methods}
             errors={{
-              TOO_LOW: '',
-              TOO_HIGH: '',
-              MIN_LENGTH: '',
-              MAX_LENGTH: '',
-              REGEX: 'The hexadecimal color is not valid.',
-              REQUIRED: '',
-              MAX_DATE: '',
-              MIN_DATE: '',
+              min: () => '',
+              max: () => '',
+              minLength: () => '',
+              maxLength: () => '',
+              pattern: () => 'The hexadecimal color is not valid.',
+              required: () => '',
+              maxDate: () => '',
+              minDate: () => '',
             }}
           >
             <FormContent />
diff --git a/packages/ui/src/components/NumberInput/index.tsx b/packages/ui/src/components/NumberInput/index.tsx
index 7b2c87f589..727ed9a2d8 100644
--- a/packages/ui/src/components/NumberInput/index.tsx
+++ b/packages/ui/src/components/NumberInput/index.tsx
@@ -148,7 +148,7 @@ type NumberInputProps = {
    */
   text?: string
   defaultValue?: number
-  value?: number
+  value?: number | null
   disabledTooltip?: string
   className?: string
   'data-testid'?: string
@@ -209,7 +209,8 @@ export const NumberInput = ({
     return defaultValue
   })
 
-  const currentValue = value !== undefined ? value : inputValue
+  const currentValue =
+    value !== undefined && value !== null ? value : inputValue
 
   const setValue = (
     newValue: number | undefined,
@@ -218,28 +219,22 @@ export const NumberInput = ({
      */
     hasMinMaxVerification = true,
   ) => {
-    if (value === undefined) {
-      if (hasMinMaxVerification) {
-        if (newValue !== undefined && newValue < minValue) {
-          setInputValue(minValue)
-
-          return
-        }
-
-        if (
-          newValue !== undefined &&
-          maxValue !== undefined &&
-          newValue > maxValue
-        ) {
-          setInputValue(maxValue)
-
-          return
-        }
+    let nextValue = newValue
+    if (value === undefined && hasMinMaxVerification) {
+      if (newValue !== undefined && newValue < minValue) {
+        nextValue = minValue
       }
 
-      setInputValue(newValue)
+      if (
+        newValue !== undefined &&
+        maxValue !== undefined &&
+        newValue > maxValue
+      ) {
+        nextValue = maxValue
+      }
     }
-    onChange?.(newValue)
+    setInputValue(nextValue)
+    onChange?.(nextValue)
   }
 
   const offsetFn = (direction: number) => () => {
@@ -258,12 +253,8 @@ export const NumberInput = ({
     )
   }
 
-  const handleOnFocus: FocusEventHandler<HTMLInputElement> = event => {
-    if (onFocus) onFocus(event)
-  }
-
   const handleOnBlur: FocusEventHandler<HTMLInputElement> = event => {
-    if (currentValue) {
+    if (currentValue !== undefined) {
       const boundedValue = bounded(
         currentValue,
         minValue ?? currentValue,
@@ -396,7 +387,7 @@ export const NumberInput = ({
               name={name}
               onBlur={handleOnBlur}
               onChange={handleChange}
-              onFocus={handleOnFocus}
+              onFocus={onFocus}
               onKeyDown={onKeyDown}
               ref={inputRef}
               style={{
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c97087b311..0314dbe5fa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -423,21 +423,12 @@ importers:
       '@ultraviolet/ui':
         specifier: workspace:*
         version: link:../ui
-      final-form:
-        specifier: 4.20.10
-        version: 4.20.10
-      final-form-arrays:
-        specifier: 3.0.2
-        version: 3.0.2(final-form@4.20.10)
-      react-final-form:
-        specifier: 6.5.9
-        version: 6.5.9(final-form@4.20.10)(react@18.2.0)
-      react-final-form-arrays:
-        specifier: 3.1.4
-        version: 3.1.4(final-form-arrays@3.0.2)(final-form@4.20.10)(react-final-form@6.5.9)(react@18.2.0)
+      react-hook-form:
+        specifier: ^7.47.0
+        version: 7.47.0(react@18.2.0)
       react-select:
-        specifier: 5.7.7
-        version: 5.7.7(@types/react@18.2.34)(react-dom@18.2.0)(react@18.2.0)
+        specifier: 5.7.5
+        version: 5.7.5(@types/react@18.2.34)(react-dom@18.2.0)(react@18.2.0)
     devDependencies:
       '@babel/core':
         specifier: 7.23.2
@@ -507,13 +498,13 @@ importers:
         version: 2.2.0
       '@uiw/codemirror-extensions-langs':
         specifier: 4.21.20
-        version: 4.21.20(@codemirror/autocomplete@6.10.2)(@codemirror/language-data@6.3.1)(@codemirror/language@6.9.1)(@codemirror/legacy-modes@6.3.3)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)(@lezer/highlight@1.1.6)(@lezer/javascript@1.4.8)(@lezer/lr@1.3.13)
+        version: 4.21.20(@codemirror/autocomplete@6.10.2)(@codemirror/language-data@6.3.1)(@codemirror/language@6.9.2)(@codemirror/legacy-modes@6.3.3)(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.0)(@lezer/highlight@1.1.6)(@lezer/javascript@1.4.9)(@lezer/lr@1.3.14)
       '@uiw/codemirror-theme-material':
         specifier: 4.21.20
-        version: 4.21.20(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)
+        version: 4.21.20(@codemirror/language@6.9.2)(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)
       '@uiw/react-codemirror':
         specifier: 4.21.20
-        version: 4.21.20(@babel/runtime@7.23.2)(@codemirror/autocomplete@6.10.2)(@codemirror/language@6.9.1)(@codemirror/lint@6.4.2)(@codemirror/search@6.5.4)(@codemirror/state@6.3.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.21.3)(codemirror@6.0.1)(react-dom@18.2.0)(react@18.2.0)
+        version: 4.21.20(@babel/runtime@7.23.2)(@codemirror/autocomplete@6.10.2)(@codemirror/language@6.9.2)(@codemirror/lint@6.4.2)(@codemirror/search@6.5.4)(@codemirror/state@6.3.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.22.0)(codemirror@6.0.1)(react-dom@18.2.0)(react@18.2.0)
       '@ultraviolet/themes':
         specifier: workspace:*
         version: link:../themes
@@ -752,7 +743,7 @@ packages:
     dependencies:
       '@babel/compat-data': 7.22.20
       '@babel/helper-validator-option': 7.22.15
-      browserslist: 4.22.1
+      browserslist: 4.21.10
       lru-cache: 5.1.1
       semver: 6.3.1
 
@@ -1717,7 +1708,7 @@ packages:
       '@babel/helper-module-imports': 7.22.15
       '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.23.2)
-      '@babel/types': 7.23.0
+      '@babel/types': 7.22.19
     dev: true
 
   /@babel/plugin-transform-react-pure-annotations@7.22.5(@babel/core@7.23.2):
@@ -1762,7 +1753,7 @@ packages:
       '@babel/helper-module-imports': 7.22.15
       '@babel/helper-plugin-utils': 7.22.5
       babel-plugin-polyfill-corejs2: 0.4.6(@babel/core@7.23.2)
-      babel-plugin-polyfill-corejs3: 0.8.5(@babel/core@7.23.2)
+      babel-plugin-polyfill-corejs3: 0.8.6(@babel/core@7.23.2)
       babel-plugin-polyfill-regenerator: 0.5.3(@babel/core@7.23.2)
       semver: 6.3.1
     transitivePeerDependencies:
@@ -1959,7 +1950,7 @@ packages:
       '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.23.2)
       '@babel/types': 7.23.0
       babel-plugin-polyfill-corejs2: 0.4.6(@babel/core@7.23.2)
-      babel-plugin-polyfill-corejs3: 0.8.5(@babel/core@7.23.2)
+      babel-plugin-polyfill-corejs3: 0.8.6(@babel/core@7.23.2)
       babel-plugin-polyfill-regenerator: 0.5.3(@babel/core@7.23.2)
       core-js-compat: 3.32.1
       semver: 6.3.1
@@ -2051,6 +2042,24 @@ packages:
       '@babel/parser': 7.23.0
       '@babel/types': 7.23.0
 
+  /@babel/traverse@7.23.0:
+    resolution: {integrity: sha512-t/QaEvyIoIkwzpiZ7aoSKK8kObQYeF7T2v+dazAYCb8SXtp58zEVkWW7zAnju8FNKNdr4ScAOEDmMItbyOmEYw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.22.13
+      '@babel/generator': 7.23.0
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-function-name': 7.23.0
+      '@babel/helper-hoist-variables': 7.22.5
+      '@babel/helper-split-export-declaration': 7.22.6
+      '@babel/parser': 7.23.0
+      '@babel/types': 7.23.0
+      debug: 4.3.4
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/traverse@7.23.2:
     resolution: {integrity: sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==}
     engines: {node: '>=6.9.0'}
@@ -2068,6 +2077,15 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
+  /@babel/types@7.22.19:
+    resolution: {integrity: sha512-P7LAw/LbojPzkgp5oznjE6tQEIWbp4PkkfrZDINTro9zgBRtI324/EYsiSI7lhPbpIQ+DCeR2NNmMWANGGfZsg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.22.5
+      '@babel/helper-validator-identifier': 7.22.20
+      to-fast-properties: 2.0.0
+    dev: true
+
   /@babel/types@7.23.0:
     resolution: {integrity: sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==}
     engines: {node: '>=6.9.0'}
@@ -2287,7 +2305,7 @@ packages:
       prettier: 2.8.8
     dev: true
 
-  /@codemirror/autocomplete@6.10.2(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0):
+  /@codemirror/autocomplete@6.10.2(@codemirror/language@6.9.2)(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.0):
     resolution: {integrity: sha512-3dCL7b0j2GdtZzWN5j7HDpRAJ26ip07R4NGYz7QYthIYMiX8I4E4TNrYcdTayPJGeVQtd/xe7lWU4XL7THFb/w==}
     peerDependencies:
       '@codemirror/language': ^6.0.0
@@ -2295,18 +2313,18 @@ packages:
       '@codemirror/view': ^6.0.0
       '@lezer/common': ^1.0.0
     dependencies:
-      '@codemirror/language': 6.9.1
+      '@codemirror/language': 6.9.2
       '@codemirror/state': 6.3.1
-      '@codemirror/view': 6.21.3
+      '@codemirror/view': 6.22.0
       '@lezer/common': 1.1.0
     dev: false
 
   /@codemirror/commands@6.3.0:
     resolution: {integrity: sha512-tFfcxRIlOWiQDFhjBSWJ10MxcvbCIsRr6V64SgrcaY0MwNk32cUOcCuNlWo8VjV4qRQCgNgUAnIeo0svkk4R5Q==}
     dependencies:
-      '@codemirror/language': 6.9.1
+      '@codemirror/language': 6.9.2
       '@codemirror/state': 6.3.1
-      '@codemirror/view': 6.21.3
+      '@codemirror/view': 6.22.0
       '@lezer/common': 1.1.0
     dev: false
 
@@ -2315,24 +2333,24 @@ packages:
     dependencies:
       '@codemirror/lang-html': 6.4.6
       '@codemirror/lang-javascript': 6.2.1
-      '@codemirror/language': 6.9.1
+      '@codemirror/language': 6.9.2
       '@lezer/common': 1.1.0
       '@lezer/highlight': 1.1.6
-      '@lezer/lr': 1.3.13
+      '@lezer/lr': 1.3.14
     dev: false
 
   /@codemirror/lang-cpp@6.0.2:
     resolution: {integrity: sha512-6oYEYUKHvrnacXxWxYa6t4puTlbN3dgV662BDfSH8+MfjQjVmP697/KYTDOqpxgerkvoNm7q5wlFMBeX8ZMocg==}
     dependencies:
-      '@codemirror/language': 6.9.1
+      '@codemirror/language': 6.9.2
       '@lezer/cpp': 1.1.1
     dev: false
 
-  /@codemirror/lang-css@6.2.1(@codemirror/view@6.21.3):
+  /@codemirror/lang-css@6.2.1(@codemirror/view@6.22.0):
     resolution: {integrity: sha512-/UNWDNV5Viwi/1lpr/dIXJNWiwDxpw13I4pTUAsNxZdg6E0mI2kTQb0P2iHczg1Tu+H4EBgJR+hYhKiHKko7qg==}
     dependencies:
-      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)
-      '@codemirror/language': 6.9.1
+      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.2)(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.0)
+      '@codemirror/language': 6.9.2
       '@codemirror/state': 6.3.1
       '@lezer/common': 1.1.0
       '@lezer/css': 1.1.3
@@ -2343,12 +2361,12 @@ packages:
   /@codemirror/lang-html@6.4.6:
     resolution: {integrity: sha512-E4C8CVupBksXvgLSme/zv31x91g06eZHSph7NczVxZW+/K+3XgJGWNT//2WLzaKSBoxpAjaOi5ZnPU1SHhjh3A==}
     dependencies:
-      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)
-      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.21.3)
+      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.2)(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.0)
+      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.22.0)
       '@codemirror/lang-javascript': 6.2.1
-      '@codemirror/language': 6.9.1
+      '@codemirror/language': 6.9.2
       '@codemirror/state': 6.3.1
-      '@codemirror/view': 6.21.3
+      '@codemirror/view': 6.22.0
       '@lezer/common': 1.1.0
       '@lezer/css': 1.1.3
       '@lezer/html': 1.3.6
@@ -2357,36 +2375,36 @@ packages:
   /@codemirror/lang-java@6.0.1:
     resolution: {integrity: sha512-OOnmhH67h97jHzCuFaIEspbmsT98fNdhVhmA3zCxW0cn7l8rChDhZtwiwJ/JOKXgfm4J+ELxQihxaI7bj7mJRg==}
     dependencies:
-      '@codemirror/language': 6.9.1
+      '@codemirror/language': 6.9.2
       '@lezer/java': 1.0.4
     dev: false
 
   /@codemirror/lang-javascript@6.2.1:
     resolution: {integrity: sha512-jlFOXTejVyiQCW3EQwvKH0m99bUYIw40oPmFjSX2VS78yzfe0HELZ+NEo9Yfo1MkGRpGlj3Gnu4rdxV1EnAs5A==}
     dependencies:
-      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)
-      '@codemirror/language': 6.9.1
+      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.2)(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.0)
+      '@codemirror/language': 6.9.2
       '@codemirror/lint': 6.4.2
       '@codemirror/state': 6.3.1
-      '@codemirror/view': 6.21.3
+      '@codemirror/view': 6.22.0
       '@lezer/common': 1.1.0
-      '@lezer/javascript': 1.4.8
+      '@lezer/javascript': 1.4.9
     dev: false
 
   /@codemirror/lang-json@6.0.1:
     resolution: {integrity: sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==}
     dependencies:
-      '@codemirror/language': 6.9.1
+      '@codemirror/language': 6.9.2
       '@lezer/json': 1.0.1
     dev: false
 
-  /@codemirror/lang-less@6.0.1(@codemirror/view@6.21.3):
+  /@codemirror/lang-less@6.0.1(@codemirror/view@6.22.0):
     resolution: {integrity: sha512-ABcsKBjLbyPZwPR5gePpc8jEKCQrFF4pby2WlMVdmJOOr7OWwwyz8DZonPx/cKDE00hfoSLc8F7yAcn/d6+rTQ==}
     dependencies:
-      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.21.3)
-      '@codemirror/language': 6.9.1
+      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.22.0)
+      '@codemirror/language': 6.9.2
       '@lezer/highlight': 1.1.6
-      '@lezer/lr': 1.3.13
+      '@lezer/lr': 1.3.14
     transitivePeerDependencies:
       - '@codemirror/view'
     dev: false
@@ -2394,7 +2412,7 @@ packages:
   /@codemirror/lang-lezer@6.0.1:
     resolution: {integrity: sha512-WHwjI7OqKFBEfkunohweqA5B/jIlxaZso6Nl3weVckz8EafYbPZldQEKSDb4QQ9H9BUkle4PVELP4sftKoA0uQ==}
     dependencies:
-      '@codemirror/language': 6.9.1
+      '@codemirror/language': 6.9.2
       '@codemirror/state': 6.3.1
       '@lezer/common': 1.1.0
       '@lezer/lezer': 1.1.2
@@ -2403,11 +2421,11 @@ packages:
   /@codemirror/lang-markdown@6.2.2:
     resolution: {integrity: sha512-wmwM9Y5n/e4ndU51KcYDaQnb9goYdhXjU71dDW9goOc1VUTIPph6WKAPdJ6BzC0ZFy+UTsDwTXGWSP370RH69Q==}
     dependencies:
-      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)
+      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.2)(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.0)
       '@codemirror/lang-html': 6.4.6
-      '@codemirror/language': 6.9.1
+      '@codemirror/language': 6.9.2
       '@codemirror/state': 6.3.1
-      '@codemirror/view': 6.21.3
+      '@codemirror/view': 6.22.0
       '@lezer/common': 1.1.0
       '@lezer/markdown': 1.1.0
     dev: false
@@ -2416,18 +2434,18 @@ packages:
     resolution: {integrity: sha512-ublojMdw/PNWa7qdN5TMsjmqkNuTBD3k6ndZ4Z0S25SBAiweFGyY68AS3xNcIOlb6DDFDvKlinLQ40vSLqf8xA==}
     dependencies:
       '@codemirror/lang-html': 6.4.6
-      '@codemirror/language': 6.9.1
+      '@codemirror/language': 6.9.2
       '@codemirror/state': 6.3.1
       '@lezer/common': 1.1.0
       '@lezer/php': 1.0.1
     dev: false
 
-  /@codemirror/lang-python@6.1.3(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0):
+  /@codemirror/lang-python@6.1.3(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.0):
     resolution: {integrity: sha512-S9w2Jl74hFlD5nqtUMIaXAq9t5WlM0acCkyuQWUUSvZclk1sV+UfnpFiZzuZSG+hfEaOmxKR5UxY/Uxswn7EhQ==}
     dependencies:
-      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)
-      '@codemirror/language': 6.9.1
-      '@lezer/python': 1.1.8
+      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.2)(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.0)
+      '@codemirror/language': 6.9.2
+      '@lezer/python': 1.1.9
     transitivePeerDependencies:
       - '@codemirror/state'
       - '@codemirror/view'
@@ -2437,15 +2455,15 @@ packages:
   /@codemirror/lang-rust@6.0.1:
     resolution: {integrity: sha512-344EMWFBzWArHWdZn/NcgkwMvZIWUR1GEBdwG8FEp++6o6vT6KL9V7vGs2ONsKxxFUPXKI0SPcWhyYyl2zPYxQ==}
     dependencies:
-      '@codemirror/language': 6.9.1
+      '@codemirror/language': 6.9.2
       '@lezer/rust': 1.0.1
     dev: false
 
-  /@codemirror/lang-sass@6.0.2(@codemirror/view@6.21.3):
+  /@codemirror/lang-sass@6.0.2(@codemirror/view@6.22.0):
     resolution: {integrity: sha512-l/bdzIABvnTo1nzdY6U+kPAC51czYQcOErfzQ9zSm9D8GmNPD0WTW8st/CJwBTPLO8jlrbyvlSEcN20dc4iL0Q==}
     dependencies:
-      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.21.3)
-      '@codemirror/language': 6.9.1
+      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.22.0)
+      '@codemirror/language': 6.9.2
       '@codemirror/state': 6.3.1
       '@lezer/common': 1.1.0
       '@lezer/sass': 1.0.3
@@ -2453,14 +2471,14 @@ packages:
       - '@codemirror/view'
     dev: false
 
-  /@codemirror/lang-sql@6.5.4(@codemirror/view@6.21.3)(@lezer/common@1.1.0):
+  /@codemirror/lang-sql@6.5.4(@codemirror/view@6.22.0)(@lezer/common@1.1.0):
     resolution: {integrity: sha512-5Gq7fYtT/5HbNyIG7a8vYaqOYQU3JbgtBe3+derkrFUXRVcjkf8WVgz++PIbMFAQsOFMDdDR+uiNM8ZRRuXH+w==}
     dependencies:
-      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)
-      '@codemirror/language': 6.9.1
+      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.2)(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.0)
+      '@codemirror/language': 6.9.2
       '@codemirror/state': 6.3.1
       '@lezer/highlight': 1.1.6
-      '@lezer/lr': 1.3.13
+      '@lezer/lr': 1.3.14
     transitivePeerDependencies:
       - '@codemirror/view'
       - '@lezer/common'
@@ -2471,53 +2489,53 @@ packages:
     dependencies:
       '@codemirror/lang-html': 6.4.6
       '@codemirror/lang-javascript': 6.2.1
-      '@codemirror/language': 6.9.1
+      '@codemirror/language': 6.9.2
       '@lezer/common': 1.1.0
       '@lezer/highlight': 1.1.6
-      '@lezer/lr': 1.3.13
+      '@lezer/lr': 1.3.14
     dev: false
 
   /@codemirror/lang-wast@6.0.1:
     resolution: {integrity: sha512-sQLsqhRjl2MWG3rxZysX+2XAyed48KhLBHLgq9xcKxIJu3npH/G+BIXW5NM5mHeDUjG0jcGh9BcjP0NfMStuzA==}
     dependencies:
-      '@codemirror/language': 6.9.1
+      '@codemirror/language': 6.9.2
       '@lezer/highlight': 1.1.6
-      '@lezer/lr': 1.3.13
+      '@lezer/lr': 1.3.14
     dev: false
 
-  /@codemirror/lang-xml@6.0.2(@codemirror/view@6.21.3):
+  /@codemirror/lang-xml@6.0.2(@codemirror/view@6.22.0):
     resolution: {integrity: sha512-JQYZjHL2LAfpiZI2/qZ/qzDuSqmGKMwyApYmEUUCTxLM4MWS7sATUEfIguZQr9Zjx/7gcdnewb039smF6nC2zw==}
     dependencies:
-      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)
-      '@codemirror/language': 6.9.1
+      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.2)(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.0)
+      '@codemirror/language': 6.9.2
       '@codemirror/state': 6.3.1
       '@lezer/common': 1.1.0
-      '@lezer/xml': 1.0.2
+      '@lezer/xml': 1.0.3
     transitivePeerDependencies:
       - '@codemirror/view'
     dev: false
 
-  /@codemirror/language-data@6.3.1(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0):
+  /@codemirror/language-data@6.3.1(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.0):
     resolution: {integrity: sha512-p6jhJmvhGe1TG1EGNhwH7nFWWFSTJ8NDKnB2fVx5g3t+PpO0+63R7GJNxjS0TmmH3cdMxZbzejsik+rlEh1EyQ==}
     dependencies:
       '@codemirror/lang-angular': 0.1.2
       '@codemirror/lang-cpp': 6.0.2
-      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.21.3)
+      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.22.0)
       '@codemirror/lang-html': 6.4.6
       '@codemirror/lang-java': 6.0.1
       '@codemirror/lang-javascript': 6.2.1
       '@codemirror/lang-json': 6.0.1
-      '@codemirror/lang-less': 6.0.1(@codemirror/view@6.21.3)
+      '@codemirror/lang-less': 6.0.1(@codemirror/view@6.22.0)
       '@codemirror/lang-markdown': 6.2.2
       '@codemirror/lang-php': 6.0.1
-      '@codemirror/lang-python': 6.1.3(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)
+      '@codemirror/lang-python': 6.1.3(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.0)
       '@codemirror/lang-rust': 6.0.1
-      '@codemirror/lang-sass': 6.0.2(@codemirror/view@6.21.3)
-      '@codemirror/lang-sql': 6.5.4(@codemirror/view@6.21.3)(@lezer/common@1.1.0)
+      '@codemirror/lang-sass': 6.0.2(@codemirror/view@6.22.0)
+      '@codemirror/lang-sql': 6.5.4(@codemirror/view@6.22.0)(@lezer/common@1.1.0)
       '@codemirror/lang-vue': 0.1.2
       '@codemirror/lang-wast': 6.0.1
-      '@codemirror/lang-xml': 6.0.2(@codemirror/view@6.21.3)
-      '@codemirror/language': 6.9.1
+      '@codemirror/lang-xml': 6.0.2(@codemirror/view@6.22.0)
+      '@codemirror/language': 6.9.2
       '@codemirror/legacy-modes': 6.3.3
     transitivePeerDependencies:
       - '@codemirror/state'
@@ -2525,28 +2543,28 @@ packages:
       - '@lezer/common'
     dev: false
 
-  /@codemirror/language@6.9.1:
-    resolution: {integrity: sha512-lWRP3Y9IUdOms6DXuBpoWwjkR7yRmnS0hKYCbSfPz9v6Em1A1UCRujAkDiCrdYfs1Z0Eu4dGtwovNPStIfkgNA==}
+  /@codemirror/language@6.9.2:
+    resolution: {integrity: sha512-QGTQXSpAKDIzaSE96zNK1UfIUhPgkT1CLjh1N5qVzZuxgsEOhz5RqaN8QCIdyOQklGLx3MgHd9YrE3X3+Pl1ow==}
     dependencies:
       '@codemirror/state': 6.3.1
-      '@codemirror/view': 6.21.3
+      '@codemirror/view': 6.22.0
       '@lezer/common': 1.1.0
       '@lezer/highlight': 1.1.6
-      '@lezer/lr': 1.3.13
+      '@lezer/lr': 1.3.14
       style-mod: 4.1.0
     dev: false
 
   /@codemirror/legacy-modes@6.3.3:
     resolution: {integrity: sha512-X0Z48odJ0KIoh/HY8Ltz75/4tDYc9msQf1E/2trlxFaFFhgjpVHjZ/BCXe1Lk7s4Gd67LL/CeEEHNI+xHOiESg==}
     dependencies:
-      '@codemirror/language': 6.9.1
+      '@codemirror/language': 6.9.2
     dev: false
 
   /@codemirror/lint@6.4.2:
     resolution: {integrity: sha512-wzRkluWb1ptPKdzlsrbwwjYCPLgzU6N88YBAmlZi8WFyuiEduSd05MnJYNogzyc8rPK7pj6m95ptUApc8sHKVA==}
     dependencies:
       '@codemirror/state': 6.3.1
-      '@codemirror/view': 6.21.3
+      '@codemirror/view': 6.22.0
       crelt: 1.0.6
     dev: false
 
@@ -2554,7 +2572,7 @@ packages:
     resolution: {integrity: sha512-YoTrvjv9e8EbPs58opjZKyJ3ewFrVSUzQ/4WXlULQLSDDr1nGPJ67mMXFNNVYwdFhybzhrzrtqgHmtpJwIF+8g==}
     dependencies:
       '@codemirror/state': 6.3.1
-      '@codemirror/view': 6.21.3
+      '@codemirror/view': 6.22.0
       crelt: 1.0.6
     dev: false
 
@@ -2565,14 +2583,14 @@ packages:
   /@codemirror/theme-one-dark@6.1.2:
     resolution: {integrity: sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==}
     dependencies:
-      '@codemirror/language': 6.9.1
+      '@codemirror/language': 6.9.2
       '@codemirror/state': 6.3.1
-      '@codemirror/view': 6.21.3
+      '@codemirror/view': 6.22.0
       '@lezer/highlight': 1.1.6
     dev: false
 
-  /@codemirror/view@6.21.3:
-    resolution: {integrity: sha512-8l1aSQ6MygzL4Nx7GVYhucSXvW4jQd0F6Zm3v9Dg+6nZEfwzJVqi4C2zHfDljID+73gsQrWp9TgHc81xU15O4A==}
+  /@codemirror/view@6.22.0:
+    resolution: {integrity: sha512-6zLj4YIoIpfTGKrDMTbeZRpa8ih4EymMCKmddEDcJWrCdp/N1D46B38YEz4creTb4T177AVS9EyXkLeC/HL2jA==}
     dependencies:
       '@codemirror/state': 6.3.1
       style-mod: 4.1.0
@@ -2668,6 +2686,7 @@ packages:
   /@commitlint/load@18.2.0(typescript@5.2.2):
     resolution: {integrity: sha512-xjX3d3CRlOALwImhOsmLYZh14/+gW/KxsY7+bPKrzmGuFailf9K7ckhB071oYZVJdACnpY4hDYiosFyOC+MpAA==}
     engines: {node: '>=v18'}
+    requiresBuild: true
     dependencies:
       '@commitlint/config-validator': 18.1.0
       '@commitlint/execute-rule': 18.1.0
@@ -2756,7 +2775,6 @@ packages:
   /@cspotcode/source-map-support@0.8.1:
     resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
     engines: {node: '>=12'}
-    requiresBuild: true
     dependencies:
       '@jridgewell/trace-mapping': 0.3.9
     dev: true
@@ -3503,7 +3521,6 @@ packages:
 
   /@jridgewell/trace-mapping@0.3.9:
     resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
-    requiresBuild: true
     dependencies:
       '@jridgewell/resolve-uri': 3.1.1
       '@jridgewell/sourcemap-codec': 1.4.15
@@ -3521,14 +3538,14 @@ packages:
     resolution: {integrity: sha512-eS1M3L3U2mDowoFVPG7tEp01SWu9/68Nx3HEBgLJVn3N9ku7g5S7WdFv0jzmcTipAyONYfZJ+7x4WRkfdB2Ung==}
     dependencies:
       '@lezer/highlight': 1.1.6
-      '@lezer/lr': 1.3.13
+      '@lezer/lr': 1.3.14
     dev: false
 
   /@lezer/css@1.1.3:
     resolution: {integrity: sha512-SjSM4pkQnQdJDVc80LYzEaMiNy9txsFbI7HsMgeVF28NdLaAdHNtQ+kB/QqDUzRBV/75NTXjJ/R5IdC8QQGxMg==}
     dependencies:
       '@lezer/highlight': 1.1.6
-      '@lezer/lr': 1.3.13
+      '@lezer/lr': 1.3.14
     dev: false
 
   /@lezer/highlight@1.1.6:
@@ -3542,39 +3559,39 @@ packages:
     dependencies:
       '@lezer/common': 1.1.0
       '@lezer/highlight': 1.1.6
-      '@lezer/lr': 1.3.13
+      '@lezer/lr': 1.3.14
     dev: false
 
   /@lezer/java@1.0.4:
     resolution: {integrity: sha512-POc53LHf2AuNeRXjqZbXNu88GKj0KZTjjSx0L7tYeXlrEHF+3NAQx+dEwKVuCbkl0ZMtpRy2VsDYOV7KKV0oyg==}
     dependencies:
       '@lezer/highlight': 1.1.6
-      '@lezer/lr': 1.3.13
+      '@lezer/lr': 1.3.14
     dev: false
 
-  /@lezer/javascript@1.4.8:
-    resolution: {integrity: sha512-QRmw/5xrcyRLyWr3JT3KCzn2XZr5NYNqQMGsqnYy+FghbQn9DZPuj6JDkE6uSXvfMLpdapu8KBIaeoJFaR4QVw==}
+  /@lezer/javascript@1.4.9:
+    resolution: {integrity: sha512-7Uv8mBBE6l44spgWEZvEMdDqGV+FIuY7kJ1o5TFm+jxIuxydO3PcKJYiINij09igd1D/9P7l2KDqpkN8c3bM6A==}
     dependencies:
       '@lezer/highlight': 1.1.6
-      '@lezer/lr': 1.3.13
+      '@lezer/lr': 1.3.14
     dev: false
 
   /@lezer/json@1.0.1:
     resolution: {integrity: sha512-nkVC27qiEZEjySbi6gQRuMwa2sDu2PtfjSgz0A4QF81QyRGm3kb2YRzLcOPcTEtmcwvrX/cej7mlhbwViA4WJw==}
     dependencies:
       '@lezer/highlight': 1.1.6
-      '@lezer/lr': 1.3.13
+      '@lezer/lr': 1.3.14
     dev: false
 
   /@lezer/lezer@1.1.2:
     resolution: {integrity: sha512-O8yw3CxPhzYHB1hvwbdozjnAslhhR8A5BH7vfEMof0xk3p+/DFDfZkA9Tde6J+88WgtwaHy4Sy6ThZSkaI0Evw==}
     dependencies:
       '@lezer/highlight': 1.1.6
-      '@lezer/lr': 1.3.13
+      '@lezer/lr': 1.3.14
     dev: false
 
-  /@lezer/lr@1.3.13:
-    resolution: {integrity: sha512-RLAbau/4uSzKgIKj96mI5WUtG1qtiR0Frn0Ei9zhPj8YOkHM+1Bb8SgdVvmR/aWJCFIzjo2KFnDiRZ75Xf5NdQ==}
+  /@lezer/lr@1.3.14:
+    resolution: {integrity: sha512-z5mY4LStlA3yL7aHT/rqgG614cfcvklS+8oFRFBYrs4YaWLJyKKM4+nN6KopToX0o9Hj6zmH6M5kinOYuy06ug==}
     dependencies:
       '@lezer/common': 1.1.0
     dev: false
@@ -3590,35 +3607,35 @@ packages:
     resolution: {integrity: sha512-aqdCQJOXJ66De22vzdwnuC502hIaG9EnPK2rSi+ebXyUd+j7GAX1mRjWZOVOmf3GST1YUfUCu6WXDiEgDGOVwA==}
     dependencies:
       '@lezer/highlight': 1.1.6
-      '@lezer/lr': 1.3.13
+      '@lezer/lr': 1.3.14
     dev: false
 
-  /@lezer/python@1.1.8:
-    resolution: {integrity: sha512-1T/XsmeF57ijrjpC0Zmrf9YeO5mn2zC1XeSNrOnc0KB+6PgxJ5m7kWKt0CnwyS74oHQXbJxUUL+QDQJR26c1Gw==}
+  /@lezer/python@1.1.9:
+    resolution: {integrity: sha512-8Ua3p8NdICXR6qWvRCnCx5CI1B0DklZGNtRLwOrIS/OHecHIugRHZyr0NsaaQO2H2Nn34EPlRtltXIirLsry5Q==}
     dependencies:
       '@lezer/highlight': 1.1.6
-      '@lezer/lr': 1.3.13
+      '@lezer/lr': 1.3.14
     dev: false
 
   /@lezer/rust@1.0.1:
     resolution: {integrity: sha512-j+ToFKM6Wpglv3OQ4ebHYdYIMT2dh0ziCCV0rTf47AWiHOVhR0WjaKrBq+yuvDQNEhr5sxPxVI7+naJIgpqcsQ==}
     dependencies:
       '@lezer/highlight': 1.1.6
-      '@lezer/lr': 1.3.13
+      '@lezer/lr': 1.3.14
     dev: false
 
   /@lezer/sass@1.0.3:
     resolution: {integrity: sha512-n4l2nVOB7gWiGU/Cg2IVxpt2Ic9Hgfgy/7gk+p/XJibAsPXs0lSbsfGwQgwsAw9B/euYo3oS6lEFr9WytoqcZg==}
     dependencies:
       '@lezer/highlight': 1.1.6
-      '@lezer/lr': 1.3.13
+      '@lezer/lr': 1.3.14
     dev: false
 
-  /@lezer/xml@1.0.2:
-    resolution: {integrity: sha512-dlngsWceOtQBMuBPw5wtHpaxdPJ71aVntqjbpGkFtWsp4WtQmCnuTjQGocviymydN6M18fhj6UQX3oiEtSuY7w==}
+  /@lezer/xml@1.0.3:
+    resolution: {integrity: sha512-lYT+0TKiDW4jQyz+R/JXQpbWavjIKqyFMvJ73JklyxFmAUnD6Iford98dk0OeVZG0j4MNnR7JQlmwTMpJGrU6A==}
     dependencies:
       '@lezer/highlight': 1.1.6
-      '@lezer/lr': 1.3.13
+      '@lezer/lr': 1.3.14
     dev: false
 
   /@manypkg/find-root@1.1.0:
@@ -3747,14 +3764,14 @@ packages:
   /@nextjournal/lang-clojure@1.0.0:
     resolution: {integrity: sha512-gOCV71XrYD0DhwGoPMWZmZ0r92/lIHsqQu9QWdpZYYBwiChNwMO4sbVMP7eTuAqffFB2BTtCSC+1skSH9d3bNg==}
     dependencies:
-      '@codemirror/language': 6.9.1
+      '@codemirror/language': 6.9.2
       '@nextjournal/lezer-clojure': 1.0.0
     dev: false
 
   /@nextjournal/lezer-clojure@1.0.0:
     resolution: {integrity: sha512-VZyuGu4zw5mkTOwQBTaGVNWmsOZAPw5ZRxu1/Knk/Xfs7EDBIogwIs5UXTYkuECX5ZQB8eOB+wKA2pc7VyqaZQ==}
     dependencies:
-      '@lezer/lr': 1.3.13
+      '@lezer/lr': 1.3.14
     dev: false
 
   /@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1:
@@ -4672,7 +4689,7 @@ packages:
     engines: {node: '>=14.0.0'}
     dev: true
 
-  /@replit/codemirror-lang-csharp@6.2.0(@codemirror/autocomplete@6.10.2)(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)(@lezer/highlight@1.1.6)(@lezer/lr@1.3.13):
+  /@replit/codemirror-lang-csharp@6.2.0(@codemirror/autocomplete@6.10.2)(@codemirror/language@6.9.2)(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.0)(@lezer/highlight@1.1.6)(@lezer/lr@1.3.14):
     resolution: {integrity: sha512-6utbaWkoymhoAXj051mkRp+VIJlpwUgCX9Toevz3YatiZsz512fw3OVCedXQx+WcR0wb6zVHjChnuxqfCLtFVQ==}
     peerDependencies:
       '@codemirror/autocomplete': ^6.0.0
@@ -4683,16 +4700,16 @@ packages:
       '@lezer/highlight': ^1.0.0
       '@lezer/lr': ^1.0.0
     dependencies:
-      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)
-      '@codemirror/language': 6.9.1
+      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.2)(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.0)
+      '@codemirror/language': 6.9.2
       '@codemirror/state': 6.3.1
-      '@codemirror/view': 6.21.3
+      '@codemirror/view': 6.22.0
       '@lezer/common': 1.1.0
       '@lezer/highlight': 1.1.6
-      '@lezer/lr': 1.3.13
+      '@lezer/lr': 1.3.14
     dev: false
 
-  /@replit/codemirror-lang-nix@6.0.1(@codemirror/autocomplete@6.10.2)(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)(@lezer/highlight@1.1.6)(@lezer/lr@1.3.13):
+  /@replit/codemirror-lang-nix@6.0.1(@codemirror/autocomplete@6.10.2)(@codemirror/language@6.9.2)(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.0)(@lezer/highlight@1.1.6)(@lezer/lr@1.3.14):
     resolution: {integrity: sha512-lvzjoYn9nfJzBD5qdm3Ut6G3+Or2wEacYIDJ49h9+19WSChVnxv4ojf+rNmQ78ncuxIt/bfbMvDLMeMP0xze6g==}
     peerDependencies:
       '@codemirror/autocomplete': ^6.0.0
@@ -4703,24 +4720,24 @@ packages:
       '@lezer/highlight': ^1.0.0
       '@lezer/lr': ^1.0.0
     dependencies:
-      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)
-      '@codemirror/language': 6.9.1
+      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.2)(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.0)
+      '@codemirror/language': 6.9.2
       '@codemirror/state': 6.3.1
-      '@codemirror/view': 6.21.3
+      '@codemirror/view': 6.22.0
       '@lezer/common': 1.1.0
       '@lezer/highlight': 1.1.6
-      '@lezer/lr': 1.3.13
+      '@lezer/lr': 1.3.14
     dev: false
 
-  /@replit/codemirror-lang-solidity@6.0.1(@codemirror/language@6.9.1):
+  /@replit/codemirror-lang-solidity@6.0.1(@codemirror/language@6.9.2):
     resolution: {integrity: sha512-kDnak0xZelGmvzJwKTpMTl6gYSfFq9hnxrkbLaMV0CARq/MFvDQJmcmYon/k8uZqXy6DfzewKDV8tx9kY2WUZg==}
     peerDependencies:
       '@codemirror/language': ^6.0.0
     dependencies:
-      '@codemirror/language': 6.9.1
+      '@codemirror/language': 6.9.2
     dev: false
 
-  /@replit/codemirror-lang-svelte@6.0.0(@codemirror/autocomplete@6.10.2)(@codemirror/lang-css@6.2.1)(@codemirror/lang-html@6.4.6)(@codemirror/lang-javascript@6.2.1)(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)(@lezer/highlight@1.1.6)(@lezer/javascript@1.4.8)(@lezer/lr@1.3.13):
+  /@replit/codemirror-lang-svelte@6.0.0(@codemirror/autocomplete@6.10.2)(@codemirror/lang-css@6.2.1)(@codemirror/lang-html@6.4.6)(@codemirror/lang-javascript@6.2.1)(@codemirror/language@6.9.2)(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.0)(@lezer/highlight@1.1.6)(@lezer/javascript@1.4.9)(@lezer/lr@1.3.14):
     resolution: {integrity: sha512-U2OqqgMM6jKelL0GNWbAmqlu1S078zZNoBqlJBW+retTc5M4Mha6/Y2cf4SVg6ddgloJvmcSpt4hHrVoM4ePRA==}
     peerDependencies:
       '@codemirror/autocomplete': ^6.0.0
@@ -4735,17 +4752,17 @@ packages:
       '@lezer/javascript': ^1.2.0
       '@lezer/lr': ^1.0.0
     dependencies:
-      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)
-      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.21.3)
+      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.2)(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.0)
+      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.22.0)
       '@codemirror/lang-html': 6.4.6
       '@codemirror/lang-javascript': 6.2.1
-      '@codemirror/language': 6.9.1
+      '@codemirror/language': 6.9.2
       '@codemirror/state': 6.3.1
-      '@codemirror/view': 6.21.3
+      '@codemirror/view': 6.22.0
       '@lezer/common': 1.1.0
       '@lezer/highlight': 1.1.6
-      '@lezer/javascript': 1.4.8
-      '@lezer/lr': 1.3.13
+      '@lezer/javascript': 1.4.9
+      '@lezer/lr': 1.3.14
     dev: false
 
   /@rollup/plugin-babel@6.0.4(@babel/core@7.23.2)(rollup@4.2.0):
@@ -5820,7 +5837,7 @@ packages:
     dependencies:
       '@babel/generator': 7.23.0
       '@babel/parser': 7.23.0
-      '@babel/traverse': 7.23.2
+      '@babel/traverse': 7.23.0
       '@babel/types': 7.23.0
       '@storybook/csf': 0.1.1
       '@storybook/types': 7.5.2
@@ -6534,22 +6551,18 @@ packages:
 
   /@tsconfig/node10@1.0.9:
     resolution: {integrity: sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==}
-    requiresBuild: true
     dev: true
 
   /@tsconfig/node12@1.0.11:
     resolution: {integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==}
-    requiresBuild: true
     dev: true
 
   /@tsconfig/node14@1.0.3:
     resolution: {integrity: sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==}
-    requiresBuild: true
     dev: true
 
   /@tsconfig/node16@1.0.4:
     resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
-    requiresBuild: true
     dev: true
 
   /@types/aria-query@5.0.1:
@@ -7155,7 +7168,7 @@ packages:
       eslint-visitor-keys: 3.4.3
     dev: true
 
-  /@uiw/codemirror-extensions-basic-setup@4.21.20(@codemirror/autocomplete@6.10.2)(@codemirror/commands@6.3.0)(@codemirror/language@6.9.1)(@codemirror/lint@6.4.2)(@codemirror/search@6.5.4)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3):
+  /@uiw/codemirror-extensions-basic-setup@4.21.20(@codemirror/autocomplete@6.10.2)(@codemirror/commands@6.3.0)(@codemirror/language@6.9.2)(@codemirror/lint@6.4.2)(@codemirror/search@6.5.4)(@codemirror/state@6.3.1)(@codemirror/view@6.22.0):
     resolution: {integrity: sha512-Wyi9q4uw0xGYd/tJ6bULG7tkCLqcUsQT0AQBfCDtnkV3LdiLU0LceTrzJoHJyIKSHsKDJxFQxa1qg3QLt4gIUA==}
     peerDependencies:
       '@codemirror/autocomplete': '>=6.0.0'
@@ -7166,16 +7179,16 @@ packages:
       '@codemirror/state': '>=6.0.0'
       '@codemirror/view': '>=6.0.0'
     dependencies:
-      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)
+      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.2)(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.0)
       '@codemirror/commands': 6.3.0
-      '@codemirror/language': 6.9.1
+      '@codemirror/language': 6.9.2
       '@codemirror/lint': 6.4.2
       '@codemirror/search': 6.5.4
       '@codemirror/state': 6.3.1
-      '@codemirror/view': 6.21.3
+      '@codemirror/view': 6.22.0
     dev: false
 
-  /@uiw/codemirror-extensions-langs@4.21.20(@codemirror/autocomplete@6.10.2)(@codemirror/language-data@6.3.1)(@codemirror/language@6.9.1)(@codemirror/legacy-modes@6.3.3)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)(@lezer/highlight@1.1.6)(@lezer/javascript@1.4.8)(@lezer/lr@1.3.13):
+  /@uiw/codemirror-extensions-langs@4.21.20(@codemirror/autocomplete@6.10.2)(@codemirror/language-data@6.3.1)(@codemirror/language@6.9.2)(@codemirror/legacy-modes@6.3.3)(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.0)(@lezer/highlight@1.1.6)(@lezer/javascript@1.4.9)(@lezer/lr@1.3.14):
     resolution: {integrity: sha512-GtPEubEO1BhHklRoMu/Zf2RjNyugKyxoNvM+XpsAcOFMfBqMdxB3jC9rUGdnafJe8WEGjMSDRuDtJAKXUKbWNw==}
     peerDependencies:
       '@codemirror/language-data': '>=6.0.0'
@@ -7183,29 +7196,29 @@ packages:
     dependencies:
       '@codemirror/lang-angular': 0.1.2
       '@codemirror/lang-cpp': 6.0.2
-      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.21.3)
+      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.22.0)
       '@codemirror/lang-html': 6.4.6
       '@codemirror/lang-java': 6.0.1
       '@codemirror/lang-javascript': 6.2.1
       '@codemirror/lang-json': 6.0.1
-      '@codemirror/lang-less': 6.0.1(@codemirror/view@6.21.3)
+      '@codemirror/lang-less': 6.0.1(@codemirror/view@6.22.0)
       '@codemirror/lang-lezer': 6.0.1
       '@codemirror/lang-markdown': 6.2.2
       '@codemirror/lang-php': 6.0.1
-      '@codemirror/lang-python': 6.1.3(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)
+      '@codemirror/lang-python': 6.1.3(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.0)
       '@codemirror/lang-rust': 6.0.1
-      '@codemirror/lang-sass': 6.0.2(@codemirror/view@6.21.3)
-      '@codemirror/lang-sql': 6.5.4(@codemirror/view@6.21.3)(@lezer/common@1.1.0)
+      '@codemirror/lang-sass': 6.0.2(@codemirror/view@6.22.0)
+      '@codemirror/lang-sql': 6.5.4(@codemirror/view@6.22.0)(@lezer/common@1.1.0)
       '@codemirror/lang-vue': 0.1.2
       '@codemirror/lang-wast': 6.0.1
-      '@codemirror/lang-xml': 6.0.2(@codemirror/view@6.21.3)
-      '@codemirror/language-data': 6.3.1(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)
+      '@codemirror/lang-xml': 6.0.2(@codemirror/view@6.22.0)
+      '@codemirror/language-data': 6.3.1(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.0)
       '@codemirror/legacy-modes': 6.3.3
       '@nextjournal/lang-clojure': 1.0.0
-      '@replit/codemirror-lang-csharp': 6.2.0(@codemirror/autocomplete@6.10.2)(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)(@lezer/highlight@1.1.6)(@lezer/lr@1.3.13)
-      '@replit/codemirror-lang-nix': 6.0.1(@codemirror/autocomplete@6.10.2)(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)(@lezer/highlight@1.1.6)(@lezer/lr@1.3.13)
-      '@replit/codemirror-lang-solidity': 6.0.1(@codemirror/language@6.9.1)
-      '@replit/codemirror-lang-svelte': 6.0.0(@codemirror/autocomplete@6.10.2)(@codemirror/lang-css@6.2.1)(@codemirror/lang-html@6.4.6)(@codemirror/lang-javascript@6.2.1)(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)(@lezer/highlight@1.1.6)(@lezer/javascript@1.4.8)(@lezer/lr@1.3.13)
+      '@replit/codemirror-lang-csharp': 6.2.0(@codemirror/autocomplete@6.10.2)(@codemirror/language@6.9.2)(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.0)(@lezer/highlight@1.1.6)(@lezer/lr@1.3.14)
+      '@replit/codemirror-lang-nix': 6.0.1(@codemirror/autocomplete@6.10.2)(@codemirror/language@6.9.2)(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.0)(@lezer/highlight@1.1.6)(@lezer/lr@1.3.14)
+      '@replit/codemirror-lang-solidity': 6.0.1(@codemirror/language@6.9.2)
+      '@replit/codemirror-lang-svelte': 6.0.0(@codemirror/autocomplete@6.10.2)(@codemirror/lang-css@6.2.1)(@codemirror/lang-html@6.4.6)(@codemirror/lang-javascript@6.2.1)(@codemirror/language@6.9.2)(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.0)(@lezer/highlight@1.1.6)(@lezer/javascript@1.4.9)(@lezer/lr@1.3.14)
       codemirror-lang-mermaid: 0.5.0
     transitivePeerDependencies:
       - '@codemirror/autocomplete'
@@ -7218,29 +7231,29 @@ packages:
       - '@lezer/lr'
     dev: false
 
-  /@uiw/codemirror-theme-material@4.21.20(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3):
+  /@uiw/codemirror-theme-material@4.21.20(@codemirror/language@6.9.2)(@codemirror/state@6.3.1)(@codemirror/view@6.22.0):
     resolution: {integrity: sha512-QAHHzz1E4rO+1cTm0c5TyZ4zzLWkHlNsKR+ILakW8/gCxh3S3nTJwNQYJQ1IhFp4oi72lzFWnYuwkzOSXb4g/A==}
     dependencies:
-      '@uiw/codemirror-themes': 4.21.20(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)
+      '@uiw/codemirror-themes': 4.21.20(@codemirror/language@6.9.2)(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)
     transitivePeerDependencies:
       - '@codemirror/language'
       - '@codemirror/state'
       - '@codemirror/view'
     dev: false
 
-  /@uiw/codemirror-themes@4.21.20(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3):
+  /@uiw/codemirror-themes@4.21.20(@codemirror/language@6.9.2)(@codemirror/state@6.3.1)(@codemirror/view@6.22.0):
     resolution: {integrity: sha512-/Ncc88v5RroeDAOfhao5lmkobmH4aJZqlSAJJTxXE7AzM85BjuCnnUYXVT7VFeEslFtfTiIgriyLmJQoGOi2mA==}
     peerDependencies:
       '@codemirror/language': '>=6.0.0'
       '@codemirror/state': '>=6.0.0'
       '@codemirror/view': '>=6.0.0'
     dependencies:
-      '@codemirror/language': 6.9.1
+      '@codemirror/language': 6.9.2
       '@codemirror/state': 6.3.1
-      '@codemirror/view': 6.21.3
+      '@codemirror/view': 6.22.0
     dev: false
 
-  /@uiw/react-codemirror@4.21.20(@babel/runtime@7.23.2)(@codemirror/autocomplete@6.10.2)(@codemirror/language@6.9.1)(@codemirror/lint@6.4.2)(@codemirror/search@6.5.4)(@codemirror/state@6.3.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.21.3)(codemirror@6.0.1)(react-dom@18.2.0)(react@18.2.0):
+  /@uiw/react-codemirror@4.21.20(@babel/runtime@7.23.2)(@codemirror/autocomplete@6.10.2)(@codemirror/language@6.9.2)(@codemirror/lint@6.4.2)(@codemirror/search@6.5.4)(@codemirror/state@6.3.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.22.0)(codemirror@6.0.1)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-PdyewPvNXnvT3JHj888yjpbWsAGw5qlxW6w1sMdsqJ0R6vPV++ob1iZXCGrM1FVpbqPK0DNfpXvjzp2gIr3lYw==}
     peerDependencies:
       '@babel/runtime': '>=7.11.0'
@@ -7255,8 +7268,8 @@ packages:
       '@codemirror/commands': 6.3.0
       '@codemirror/state': 6.3.1
       '@codemirror/theme-one-dark': 6.1.2
-      '@codemirror/view': 6.21.3
-      '@uiw/codemirror-extensions-basic-setup': 4.21.20(@codemirror/autocomplete@6.10.2)(@codemirror/commands@6.3.0)(@codemirror/language@6.9.1)(@codemirror/lint@6.4.2)(@codemirror/search@6.5.4)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)
+      '@codemirror/view': 6.22.0
+      '@uiw/codemirror-extensions-basic-setup': 4.21.20(@codemirror/autocomplete@6.10.2)(@codemirror/commands@6.3.0)(@codemirror/language@6.9.2)(@codemirror/lint@6.4.2)(@codemirror/search@6.5.4)(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)
       codemirror: 6.0.1(@lezer/common@1.1.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -7629,7 +7642,6 @@ packages:
 
   /arg@4.1.3:
     resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
-    requiresBuild: true
     dev: true
 
   /argparse@1.0.10:
@@ -7942,14 +7954,14 @@ packages:
       - supports-color
     dev: true
 
-  /babel-plugin-polyfill-corejs3@0.8.5(@babel/core@7.23.2):
-    resolution: {integrity: sha512-Q6CdATeAvbScWPNLB8lzSO7fgUVBkQt6zLgNlfyeCr/EQaEQR+bWiBYYPYAFyE528BMjRhL+1QBMOI4jc/c5TA==}
+  /babel-plugin-polyfill-corejs3@0.8.6(@babel/core@7.23.2):
+    resolution: {integrity: sha512-leDIc4l4tUgU7str5BWLS2h8q2N4Nf6lGZP6UrNDxdtfF2g69eJ5L0H7S8A5Ln/arfFAfHor5InAdZuIOwZdgQ==}
     peerDependencies:
       '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
     dependencies:
       '@babel/core': 7.23.2
       '@babel/helper-define-polyfill-provider': 0.4.3(@babel/core@7.23.2)
-      core-js-compat: 3.33.0
+      core-js-compat: 3.33.2
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -8121,15 +8133,26 @@ packages:
       pako: 0.2.9
     dev: true
 
+  /browserslist@4.21.10:
+    resolution: {integrity: sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+    dependencies:
+      caniuse-lite: 1.0.30001525
+      electron-to-chromium: 1.4.508
+      node-releases: 2.0.13
+      update-browserslist-db: 1.0.11(browserslist@4.21.10)
+
   /browserslist@4.22.1:
     resolution: {integrity: sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001550
-      electron-to-chromium: 1.4.557
+      caniuse-lite: 1.0.30001559
+      electron-to-chromium: 1.4.575
       node-releases: 2.0.13
       update-browserslist-db: 1.0.13(browserslist@4.22.1)
+    dev: true
 
   /bser@2.1.1:
     resolution: {integrity: sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==}
@@ -8250,14 +8273,18 @@ packages:
   /caniuse-api@3.0.0:
     resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
     dependencies:
-      browserslist: 4.22.1
-      caniuse-lite: 1.0.30001550
+      browserslist: 4.21.10
+      caniuse-lite: 1.0.30001525
       lodash.memoize: 4.1.2
       lodash.uniq: 4.5.0
     dev: true
 
-  /caniuse-lite@1.0.30001550:
-    resolution: {integrity: sha512-p82WjBYIypO0ukTsd/FG3Xxs+4tFeaY9pfT4amQL8KWtYH7H9nYwReGAbMTJ0hsmRO8IfDtsS6p3ZWj8+1c2RQ==}
+  /caniuse-lite@1.0.30001525:
+    resolution: {integrity: sha512-/3z+wB4icFt3r0USMwxujAqRvaD/B7rvGTsKhbhSQErVrJvkZCLhgNLJxU8MevahQVH6hCU9FsHdNUFbiwmE7Q==}
+
+  /caniuse-lite@1.0.30001559:
+    resolution: {integrity: sha512-cPiMKZgqgkg5LY3/ntGeLFUpi6tzddBNS58A4tnTgQw1zON7u2sZMU7SzOeVH4tj20++9ggL+V6FDOFMTaFFYA==}
+    dev: true
 
   /case-sensitive-paths-webpack-plugin@2.4.0:
     resolution: {integrity: sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==}
@@ -8470,21 +8497,21 @@ packages:
   /codemirror-lang-mermaid@0.5.0:
     resolution: {integrity: sha512-Taw/2gPCyNArQJCxIP/HSUif+3zrvD+6Ugt7KJZ2dUKou/8r3ZhcfG8krNTZfV2iu8AuGnymKuo7bLPFyqsh/A==}
     dependencies:
-      '@codemirror/language': 6.9.1
+      '@codemirror/language': 6.9.2
       '@lezer/highlight': 1.1.6
-      '@lezer/lr': 1.3.13
+      '@lezer/lr': 1.3.14
     dev: false
 
   /codemirror@6.0.1(@lezer/common@1.1.0):
     resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}
     dependencies:
-      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.1)(@codemirror/state@6.3.1)(@codemirror/view@6.21.3)(@lezer/common@1.1.0)
+      '@codemirror/autocomplete': 6.10.2(@codemirror/language@6.9.2)(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)(@lezer/common@1.1.0)
       '@codemirror/commands': 6.3.0
-      '@codemirror/language': 6.9.1
+      '@codemirror/language': 6.9.2
       '@codemirror/lint': 6.4.2
       '@codemirror/search': 6.5.4
       '@codemirror/state': 6.3.1
-      '@codemirror/view': 6.21.3
+      '@codemirror/view': 6.22.0
     transitivePeerDependencies:
       - '@lezer/common'
     dev: false
@@ -8713,11 +8740,11 @@ packages:
   /core-js-compat@3.32.1:
     resolution: {integrity: sha512-GSvKDv4wE0bPnQtjklV101juQ85g6H3rm5PDP20mqlS5j0kXF3pP97YvAu5hl+uFHqMictp3b2VxOHljWMAtuA==}
     dependencies:
-      browserslist: 4.22.1
+      browserslist: 4.21.10
     dev: true
 
-  /core-js-compat@3.33.0:
-    resolution: {integrity: sha512-0w4LcLXsVEuNkIqwjjf9rjCoPhK8uqA4tMRh4Ge26vfLtUutshn+aRJU21I9LCJlh2QQHfisNToLjw1XEJLTWw==}
+  /core-js-compat@3.33.2:
+    resolution: {integrity: sha512-axfo+wxFVxnqf8RvxTzoAlzW4gRoacrHeoFlc9n0x50+7BEyZL/Rt3hicaED1/CEd7I6tPCPVUYcJwCMO5XUYw==}
     dependencies:
       browserslist: 4.22.1
     dev: true
@@ -8793,7 +8820,6 @@ packages:
 
   /create-require@1.1.1:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
-    requiresBuild: true
     dev: true
 
   /crelt@1.0.6:
@@ -9379,7 +9405,6 @@ packages:
   /diff@4.0.2:
     resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
     engines: {node: '>=0.3.1'}
-    requiresBuild: true
     dev: true
 
   /dir-glob@3.0.1:
@@ -9531,8 +9556,12 @@ packages:
       jake: 10.8.7
     dev: true
 
-  /electron-to-chromium@1.4.557:
-    resolution: {integrity: sha512-6x0zsxyMXpnMJnHrondrD3SuAeKcwij9S+83j2qHAQPXbGTDDfgImzzwgGlzrIcXbHQ42tkG4qA6U860cImNhw==}
+  /electron-to-chromium@1.4.508:
+    resolution: {integrity: sha512-FFa8QKjQK/A5QuFr2167myhMesGrhlOBD+3cYNxO9/S4XzHEXesyTD/1/xF644gC8buFPz3ca6G1LOQD0tZrrg==}
+
+  /electron-to-chromium@1.4.575:
+    resolution: {integrity: sha512-kY2BGyvgAHiX899oF6xLXSIf99bAvvdPhDoJwG77nxCSyWYuRH6e9a9a3gpXBvCs6lj4dQZJkfnW2hdKWHEISg==}
+    dev: true
 
   /emittery@0.13.1:
     resolution: {integrity: sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==}
@@ -10190,7 +10219,7 @@ packages:
     resolution: {integrity: sha512-YNF+mZ/Wu2FU/gvmzuWtYc8rloubL7wfXCTgouFrnjGVXPA/EeYYA7pupXWrb3Iv1cTBeSSxxJIbK23l4MRNqg==}
     engines: {node: '>=8.3.0'}
     dependencies:
-      '@babel/traverse': 7.23.2
+      '@babel/traverse': 7.23.0
       '@babel/types': 7.23.0
       c8: 7.14.0
     transitivePeerDependencies:
@@ -10487,19 +10516,12 @@ packages:
       to-regex-range: 5.0.1
     dev: true
 
-  /final-form-arrays@3.0.2(final-form@4.20.10):
-    resolution: {integrity: sha512-TfO8aZNz3RrsZCDx8GHMQcyztDNpGxSSi9w4wpSNKlmv2PfFWVVM8P7Yj5tj4n0OWax+x5YwTLhT5BnqSlCi+w==}
-    peerDependencies:
-      final-form: ^4.18.2
-    dependencies:
-      final-form: 4.20.10
-    dev: false
-
   /final-form@4.20.10:
     resolution: {integrity: sha512-TL48Pi1oNHeMOHrKv1bCJUrWZDcD3DIG6AGYVNOnyZPr7Bd/pStN0pL+lfzF5BNoj/FclaoiaLenk4XUIFVYng==}
     engines: {node: '>=8'}
     dependencies:
       '@babel/runtime': 7.23.2
+    dev: true
 
   /finalhandler@1.2.0:
     resolution: {integrity: sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==}
@@ -10776,10 +10798,10 @@ packages:
 
   /function-bind@1.1.1:
     resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
+    dev: true
 
   /function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
-    dev: true
 
   /function.prototype.name@1.1.6:
     resolution: {integrity: sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==}
@@ -11084,13 +11106,13 @@ packages:
     engines: {node: '>= 0.4.0'}
     dependencies:
       function-bind: 1.1.1
+    dev: true
 
   /hasown@2.0.0:
     resolution: {integrity: sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==}
     engines: {node: '>= 0.4'}
     dependencies:
       function-bind: 1.1.2
-    dev: true
 
   /hast-util-parse-selector@2.2.5:
     resolution: {integrity: sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==}
@@ -11519,12 +11541,12 @@ packages:
     resolution: {integrity: sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==}
     dependencies:
       has: 1.0.3
+    dev: true
 
   /is-core-module@2.13.1:
     resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
     dependencies:
       hasown: 2.0.0
-    dev: true
 
   /is-date-object@1.0.5:
     resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
@@ -12614,7 +12636,6 @@ packages:
 
   /lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-    requiresBuild: true
 
   /lines-and-columns@2.0.3:
     resolution: {integrity: sha512-cNOjgCnLB+FnvWWtyRTzmB3POJ+cXxTA81LoW7u8JdmhfXzriropYwpjShnz1QLLWsQwY7nIxoDmcPTwphDK9w==}
@@ -12870,7 +12891,6 @@ packages:
 
   /make-error@1.3.6:
     resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
-    requiresBuild: true
     dev: true
 
   /makeerror@1.0.12:
@@ -13212,7 +13232,7 @@ packages:
       '@next/env': 13.5.6
       '@swc/helpers': 0.5.2
       busboy: 1.6.0
-      caniuse-lite: 1.0.30001550
+      caniuse-lite: 1.0.30001525
       postcss: 8.4.31
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -13621,7 +13641,6 @@ packages:
   /parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
-    requiresBuild: true
     dependencies:
       callsites: 3.1.0
 
@@ -13828,7 +13847,7 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.22.1
+      browserslist: 4.21.10
       caniuse-api: 3.0.0
       colord: 2.9.3
       postcss: 8.4.31
@@ -13841,7 +13860,7 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.22.1
+      browserslist: 4.21.10
       postcss: 8.4.31
       postcss-value-parser: 4.2.0
     dev: true
@@ -13916,7 +13935,7 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.22.1
+      browserslist: 4.21.10
       caniuse-api: 3.0.0
       cssnano-utils: 3.1.0(postcss@8.4.31)
       postcss: 8.4.31
@@ -13951,7 +13970,7 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.22.1
+      browserslist: 4.21.10
       cssnano-utils: 3.1.0(postcss@8.4.31)
       postcss: 8.4.31
       postcss-value-parser: 4.2.0
@@ -14089,7 +14108,7 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.22.1
+      browserslist: 4.21.10
       postcss: 8.4.31
       postcss-value-parser: 4.2.0
     dev: true
@@ -14132,7 +14151,7 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.22.1
+      browserslist: 4.21.10
       caniuse-api: 3.0.0
       postcss: 8.4.31
     dev: true
@@ -14539,36 +14558,19 @@ packages:
   /react-fast-compare@3.2.2:
     resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
 
-  /react-final-form-arrays@3.1.4(final-form-arrays@3.0.2)(final-form@4.20.10)(react-final-form@6.5.9)(react@18.2.0):
-    resolution: {integrity: sha512-siVFAolUAe29rMR6u8VwepoysUcUdh6MLV2OWnCtKpsPRUdT9VUgECjAPaVMAH2GROZNiVB9On1H9MMrm9gdpg==}
-    peerDependencies:
-      final-form: ^4.15.0
-      final-form-arrays: '>=1.0.4'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || 18
-      react-final-form: ^6.2.1
-    dependencies:
-      '@babel/runtime': 7.23.2
-      final-form: 4.20.10
-      final-form-arrays: 3.0.2(final-form@4.20.10)
-      react: 18.2.0
-      react-final-form: 6.5.9(final-form@4.20.10)(react@18.2.0)
+  /react-flatten-children@1.1.2:
+    resolution: {integrity: sha512-9pnG/uw2Wa0n97s+yBZg/WgfMPE8RC4qNcr6iYbyb19sacCk3gRJCmCzAhTuANSWesFsK9v/yTKW42pkenaAfw==}
     dev: false
 
-  /react-final-form@6.5.9(final-form@4.20.10)(react@18.2.0):
-    resolution: {integrity: sha512-x3XYvozolECp3nIjly+4QqxdjSSWfcnpGEL5K8OBT6xmGrq5kBqbA6+/tOqoom9NwqIPPbxPNsOViFlbKgowbA==}
+  /react-hook-form@7.47.0(react@18.2.0):
+    resolution: {integrity: sha512-F/TroLjTICipmHeFlMrLtNLceO2xr1jU3CyiNla5zdwsGUGu2UOxxR4UyJgLlhMwLW/Wzp4cpJ7CPfgJIeKdSg==}
+    engines: {node: '>=12.22.0'}
     peerDependencies:
-      final-form: ^4.20.4
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || 18
+      react: ^16.8.0 || ^17 || ^18 || 18
     dependencies:
-      '@babel/runtime': 7.23.2
-      final-form: 4.20.10
       react: 18.2.0
     dev: false
 
-  /react-flatten-children@1.1.2:
-    resolution: {integrity: sha512-9pnG/uw2Wa0n97s+yBZg/WgfMPE8RC4qNcr6iYbyb19sacCk3gRJCmCzAhTuANSWesFsK9v/yTKW42pkenaAfw==}
-    dev: false
-
   /react-inspector@6.0.2(react@18.2.0):
     resolution: {integrity: sha512-x+b7LxhmHXjHoU/VrFAzw5iutsILRoYyDq97EDYdFpPLcvqtEzk4ZSZSQjnFPbr5T57tLXnHcqFYoN1pI6u8uQ==}
     peerDependencies:
@@ -14714,6 +14716,27 @@ packages:
       typescript: 5.2.2
     dev: false
 
+  /react-select@5.7.5(@types/react@18.2.34)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-jgYZa2xgKP0DVn5GZk7tZwbRx7kaVz1VqU41S8z1KWmshRDhlrpKS0w80aS1RaK5bVIXpttgSou7XCjWw1ncKA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || 18
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || 18
+    dependencies:
+      '@babel/runtime': 7.23.2
+      '@emotion/cache': 11.11.0
+      '@emotion/react': 11.11.1(@types/react@18.2.34)(react@18.2.0)
+      '@floating-ui/dom': 1.5.1
+      '@types/react-transition-group': 4.4.6
+      memoize-one: 6.0.0
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-transition-group: 4.4.5(react-dom@18.2.0)(react@18.2.0)
+      use-isomorphic-layout-effect: 1.1.2(@types/react@18.2.34)(react@18.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+    dev: false
+
   /react-select@5.7.7(@types/react@18.2.34)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-HhashZZJDRlfF/AKj0a0Lnfs3sRdw/46VJIRd8IbB9/Ovr74+ZIwkAdSBjSPXsFMG+u72c5xShqwLSKIJllzqw==}
     peerDependencies:
@@ -15094,7 +15117,6 @@ packages:
   /resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
-    requiresBuild: true
 
   /resolve-from@5.0.0:
     resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
@@ -15117,7 +15139,7 @@ packages:
     resolution: {integrity: sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==}
     hasBin: true
     dependencies:
-      is-core-module: 2.13.0
+      is-core-module: 2.13.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
@@ -15894,7 +15916,7 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.22.1
+      browserslist: 4.21.10
       postcss: 8.4.31
       postcss-selector-parser: 6.0.13
     dev: true
@@ -16217,7 +16239,6 @@ packages:
   /ts-node@10.9.1(@swc/core@1.3.82)(@types/node@18.18.8)(typescript@5.2.2):
     resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
     hasBin: true
-    requiresBuild: true
     peerDependencies:
       '@swc/core': '>=1.2.50'
       '@swc/wasm': '>=1.2.50'
@@ -16520,6 +16541,16 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /update-browserslist-db@1.0.11(browserslist@4.21.10):
+    resolution: {integrity: sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+    dependencies:
+      browserslist: 4.21.10
+      escalade: 3.1.1
+      picocolors: 1.0.0
+
   /update-browserslist-db@1.0.13(browserslist@4.22.1):
     resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
     hasBin: true
@@ -16529,6 +16560,7 @@ packages:
       browserslist: 4.22.1
       escalade: 3.1.1
       picocolors: 1.0.0
+    dev: true
 
   /uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
@@ -16640,7 +16672,6 @@ packages:
 
   /v8-compile-cache-lib@3.0.1:
     resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
-    requiresBuild: true
     dev: true
 
   /v8-to-istanbul@9.1.0:
@@ -16759,7 +16790,7 @@ packages:
       '@webassemblyjs/wasm-parser': 1.11.6
       acorn: 8.10.0
       acorn-import-assertions: 1.9.0(acorn@8.10.0)
-      browserslist: 4.22.1
+      browserslist: 4.21.10
       chrome-trace-event: 1.0.3
       enhanced-resolve: 5.15.0
       es-module-lexer: 1.3.0
@@ -17097,7 +17128,6 @@ packages:
   /yn@3.1.1:
     resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
     engines: {node: '>=6'}
-    requiresBuild: true
     dev: true
 
   /yocto-queue@0.1.0: