From a7f9b9e431b343cc3477e88b66f6480bc064de3a Mon Sep 17 00:00:00 2001
From: Matthias <mprost@scaleway.com>
Date: Tue, 23 Sep 2025 17:11:59 +0200
Subject: [PATCH] refactor: group input to use vanilla extract

---
 .changeset/evil-loops-check.md                |   5 +
 .../__snapshots__/index.test.tsx.snap         | 244 +++---
 .../__snapshots__/index.test.tsx.snap         |  20 +-
 .../__snapshots__/index.test.tsx.snap         | 132 ++--
 .../__snapshots__/index.test.tsx.snap         | 732 ++++++++----------
 .../ui/src/components/CheckboxGroup/index.tsx |  24 +-
 .../components/CheckboxGroup/styles.css.ts    |  13 +
 .../__snapshots__/index.test.tsx.snap         |  40 +-
 .../ui/src/components/RadioGroup/index.tsx    |  12 +-
 .../src/components/RadioGroup/styles.css.ts   |   7 +
 .../__snapshots__/index.test.tsx.snap         | 330 ++++----
 .../ui/src/components/ToggleGroup/index.tsx   |  12 +-
 .../src/components/ToggleGroup/styles.css.ts  |   7 +
 13 files changed, 706 insertions(+), 872 deletions(-)
 create mode 100644 .changeset/evil-loops-check.md
 create mode 100644 packages/ui/src/components/CheckboxGroup/styles.css.ts
 create mode 100644 packages/ui/src/components/RadioGroup/styles.css.ts
 create mode 100644 packages/ui/src/components/ToggleGroup/styles.css.ts

diff --git a/.changeset/evil-loops-check.md b/.changeset/evil-loops-check.md
new file mode 100644
index 0000000000..c8424693f7
--- /dev/null
+++ b/.changeset/evil-loops-check.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": minor
+---
+
+Refactor `<RadioGroup />`, `<CheckboxGroup />` and `<ToggleGroup />` to use vanilla extract
diff --git a/packages/form/src/components/CheckboxGroupField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/CheckboxGroupField/__tests__/__snapshots__/index.test.tsx.snap
index 82a254cab1..7a786d0767 100644
--- a/packages/form/src/components/CheckboxGroupField/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/form/src/components/CheckboxGroupField/__tests__/__snapshots__/index.test.tsx.snap
@@ -3,12 +3,6 @@
 exports[`checkboxField > should render correctly checked 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-.emotion-3 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -21,65 +15,65 @@ exports[`checkboxField > should render correctly checked 1`] = `
   gap: 0.5rem;
 }
 
-.emotion-3 .eqr7bqq3 {
+.emotion-0 .eqr7bqq3 {
   cursor: pointer;
 }
 
-.emotion-3[aria-disabled='true'] {
+.emotion-0[aria-disabled='true'] {
   cursor: not-allowed;
   color: #b5b7bd;
 }
 
-.emotion-3[aria-disabled='true'] .eqr7bqq3 {
+.emotion-0[aria-disabled='true'] .eqr7bqq3 {
   cursor: not-allowed;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-5 {
   fill: #e9eaeb;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-5 .emotion-7 {
   stroke: #d9dadd;
   fill: #f3f3f4;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]:checked+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]:checked+.emotion-5 {
   fill: #ffd3e3;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]:checked+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]:checked+.emotion-5 .emotion-7 {
   stroke: #ffd3e3;
   fill: #ffd3e3;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]+.emotion-5 {
   fill: #ffebf2;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]+.emotion-5 .emotion-7 {
   stroke: #ffbbd3;
   fill: #ffebf2;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6:checked+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3:checked+.emotion-5 {
   fill: #e5dbfd;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6:checked+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3:checked+.emotion-5 .emotion-7 {
   stroke: #d8c5fc;
   fill: #d8c5fc;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-checked="mixed"]+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-checked="mixed"]+.emotion-5 {
   fill: #e5dbfd;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-checked="mixed"]+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-checked="mixed"]+.emotion-5 .emotion-7 {
   stroke: #e5dbfd;
   fill: #e5dbfd;
 }
 
-.emotion-3 .emotion-6:checked+.emotion-8 path {
+.emotion-0 .emotion-3:checked+.emotion-5 path {
   transform-origin: center;
   -webkit-transition: 200ms -webkit-transform ease-in-out;
   transition: 200ms transform ease-in-out;
@@ -93,66 +87,60 @@ exports[`checkboxField > should render correctly checked 1`] = `
   transform: translate(2px, 2px);
 }
 
-.emotion-3 .emotion-6:checked+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3:checked+.emotion-5 .emotion-7 {
   fill: #8c40ef;
   stroke: #8c40ef;
 }
 
-.emotion-3 .emotion-6[aria-invalid="true"]:checked+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3[aria-invalid="true"]:checked+.emotion-5 .emotion-7 {
   fill: #e51963;
   stroke: #e51963;
 }
 
-.emotion-3 .emotion-6[aria-checked="mixed"]+.emotion-8 .eqr7bqq5 {
+.emotion-0 .emotion-3[aria-checked="mixed"]+.emotion-5 .eqr7bqq5 {
   fill: #ffffff;
 }
 
-.emotion-3 .emotion-6[aria-checked="mixed"]+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3[aria-checked="mixed"]+.emotion-5 .emotion-7 {
   fill: #8c40ef;
   stroke: #8c40ef;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='false'][aria-checked='false']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='false'][aria-checked='false']+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #e5dbfd;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='false'][aria-checked='true']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='false'][aria-checked='true']+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #792dd4;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='false'][aria-checked='mixed']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='false'][aria-checked='mixed']+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #792dd4;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='true'][aria-checked='false']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='true'][aria-checked='false']+.emotion-5 .emotion-7 {
   stroke: #92103f;
   fill: #ffd3e3;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='true'][aria-checked='true']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='true'][aria-checked='true']+.emotion-5 .emotion-7 {
   stroke: #d6175c;
   fill: #d6175c;
 }
 
-.emotion-3 .emotion-6[aria-invalid="true"]+.emotion-8 {
+.emotion-0 .emotion-3[aria-invalid="true"]+.emotion-5 {
   fill: #e51963;
 }
 
-.emotion-3 .emotion-6[aria-invalid="true"]+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3[aria-invalid="true"]+.emotion-5 .emotion-7 {
   stroke: #e51963;
   fill: #ffebf2;
 }
 
-.emotion-3 label {
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
-.emotion-5 {
+.emotion-2 {
   position: absolute;
   white-space: nowrap;
   height: 1.5rem;
@@ -161,57 +149,57 @@ exports[`checkboxField > should render correctly checked 1`] = `
   border-width: 0;
 }
 
-.emotion-5:not(:disabled) {
+.emotion-2:not(:disabled) {
   cursor: pointer;
 }
 
-.emotion-5:disabled {
+.emotion-2:disabled {
   cursor: not-allowed;
 }
 
-.emotion-5:not(:disabled):checked+.emotion-8,
-.emotion-5:not(:disabled)[aria-checked='mixed']+.emotion-8 {
+.emotion-2:not(:disabled):checked+.emotion-5,
+.emotion-2:not(:disabled)[aria-checked='mixed']+.emotion-5 {
   fill: #8c40ef;
 }
 
-.emotion-5:not(:disabled):checked+.emotion-8 .emotion-10,
-.emotion-5:not(:disabled)[aria-checked='mixed']+.emotion-8 .emotion-10 {
+.emotion-2:not(:disabled):checked+.emotion-5 .emotion-7,
+.emotion-2:not(:disabled)[aria-checked='mixed']+.emotion-5 .emotion-7 {
   stroke: #8c40ef;
 }
 
-.emotion-5:not(:disabled)[aria-invalid='true']+.emotion-8,
-.emotion-5:not(:disabled)[aria-invalid='mixed']+.emotion-8 {
+.emotion-2:not(:disabled)[aria-invalid='true']+.emotion-5,
+.emotion-2:not(:disabled)[aria-invalid='mixed']+.emotion-5 {
   fill: #ffebf2;
 }
 
-.emotion-5:not(:disabled)[aria-invalid='true']+.emotion-8 .emotion-10,
-.emotion-5:not(:disabled)[aria-invalid='mixed']+.emotion-8 .emotion-10 {
+.emotion-2:not(:disabled)[aria-invalid='true']+.emotion-5 .emotion-7,
+.emotion-2:not(:disabled)[aria-invalid='mixed']+.emotion-5 .emotion-7 {
   stroke: #b3144d;
 }
 
-.emotion-5:focus+.emotion-8 {
+.emotion-2:focus+.emotion-5 {
   background-color: #f1eefc;
   fill: #ffebf2;
   outline: 1px solid 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-5:focus+.emotion-8 .emotion-10 {
+.emotion-2:focus+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #e5dbfd;
 }
 
-.emotion-5[aria-invalid='true']:focus+.emotion-8 {
+.emotion-2[aria-invalid='true']:focus+.emotion-5 {
   background-color: #ffebf2;
   fill: #ffebf2;
   outline: 1px solid 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-5[aria-invalid='true']:focus+.emotion-8 .emotion-10 {
+.emotion-2[aria-invalid='true']:focus+.emotion-5 .emotion-7 {
   stroke: #92103f;
   fill: #ffd3e3;
 }
 
-.emotion-7 {
+.emotion-4 {
   border-radius: 0.25rem;
   height: 1.5rem;
   width: 1.5rem;
@@ -219,7 +207,7 @@ exports[`checkboxField > should render correctly checked 1`] = `
   min-height: 1.5rem;
 }
 
-.emotion-7 path {
+.emotion-4 path {
   fill: #ffffff;
   -webkit-transform: translate(2px, 2px);
   -moz-transform: translate(2px, 2px);
@@ -231,12 +219,12 @@ exports[`checkboxField > should render correctly checked 1`] = `
   transform: scale(0);
 }
 
-.emotion-9 {
+.emotion-6 {
   fill: #ffffff;
   stroke: #d9dadd;
 }
 
-.emotion-11 {
+.emotion-8 {
   width: 100%;
   cursor: pointer;
 }
@@ -252,7 +240,7 @@ exports[`checkboxField > should render correctly checked 1`] = `
         class="uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u7 uv_toi52u5d"
       >
         <fieldset
-          class="emotion-0 emotion-1"
+          class="uv_19cjf6j0"
         >
           <div
             class="uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u27 uv_toi52u5d"
@@ -271,27 +259,27 @@ exports[`checkboxField > should render correctly checked 1`] = `
             >
               <div
                 aria-disabled="false"
-                class="emotion-2 emotion-3 emotion-4"
+                class="uv_19cjf6j1 emotion-0 emotion-1"
                 data-checked="false"
                 data-error="false"
               >
                 <input
                   aria-checked="false"
                   aria-invalid="false"
-                  class="emotion-5 emotion-6"
+                  class="emotion-2 emotion-3"
                   id="«r1»"
                   name="Checkbox.value-1"
                   type="checkbox"
                   value="value-1"
                 />
                 <svg
-                  class="emotion-7 emotion-8"
+                  class="emotion-4 emotion-5"
                   fill="none"
                   viewBox="0 0 24 24"
                 >
                   <g>
                     <rect
-                      class="emotion-9 emotion-10"
+                      class="emotion-6 emotion-7"
                       height="16"
                       rx="0.125rem"
                       stroke-width="2"
@@ -320,7 +308,7 @@ exports[`checkboxField > should render correctly checked 1`] = `
                     style="--uv_4k0ekn3: 1;"
                   >
                     <label
-                      class="emotion-11 emotion-12 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow8 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+                      class="emotion-8 emotion-9 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow8 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
                       for="«r1»"
                     >
                       Checkbox 1
@@ -330,27 +318,27 @@ exports[`checkboxField > should render correctly checked 1`] = `
               </div>
               <div
                 aria-disabled="false"
-                class="emotion-2 emotion-3 emotion-4"
+                class="uv_19cjf6j1 emotion-0 emotion-1"
                 data-checked="true"
                 data-error="false"
               >
                 <input
                   aria-checked="true"
                   aria-invalid="false"
-                  class="emotion-5 emotion-6"
+                  class="emotion-2 emotion-3"
                   id="«r4»"
                   name="Checkbox.value-2"
                   type="checkbox"
                   value="value-2"
                 />
                 <svg
-                  class="emotion-7 emotion-8"
+                  class="emotion-4 emotion-5"
                   fill="none"
                   viewBox="0 0 24 24"
                 >
                   <g>
                     <rect
-                      class="emotion-9 emotion-10"
+                      class="emotion-6 emotion-7"
                       height="16"
                       rx="0.125rem"
                       stroke-width="2"
@@ -379,7 +367,7 @@ exports[`checkboxField > should render correctly checked 1`] = `
                     style="--uv_4k0ekn3: 1;"
                   >
                     <label
-                      class="emotion-11 emotion-12 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow8 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+                      class="emotion-8 emotion-9 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow8 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
                       for="«r4»"
                     >
                       Checkbox 2
@@ -399,12 +387,6 @@ exports[`checkboxField > should render correctly checked 1`] = `
 exports[`checkboxField > should trigger events correctly with required prop 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-.emotion-3 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -417,65 +399,65 @@ exports[`checkboxField > should trigger events correctly with required prop 1`]
   gap: 0.5rem;
 }
 
-.emotion-3 .eqr7bqq3 {
+.emotion-0 .eqr7bqq3 {
   cursor: pointer;
 }
 
-.emotion-3[aria-disabled='true'] {
+.emotion-0[aria-disabled='true'] {
   cursor: not-allowed;
   color: #b5b7bd;
 }
 
-.emotion-3[aria-disabled='true'] .eqr7bqq3 {
+.emotion-0[aria-disabled='true'] .eqr7bqq3 {
   cursor: not-allowed;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-5 {
   fill: #e9eaeb;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-5 .emotion-7 {
   stroke: #d9dadd;
   fill: #f3f3f4;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]:checked+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]:checked+.emotion-5 {
   fill: #ffd3e3;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]:checked+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]:checked+.emotion-5 .emotion-7 {
   stroke: #ffd3e3;
   fill: #ffd3e3;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]+.emotion-5 {
   fill: #ffebf2;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]+.emotion-5 .emotion-7 {
   stroke: #ffbbd3;
   fill: #ffebf2;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6:checked+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3:checked+.emotion-5 {
   fill: #e5dbfd;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6:checked+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3:checked+.emotion-5 .emotion-7 {
   stroke: #d8c5fc;
   fill: #d8c5fc;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-checked="mixed"]+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-checked="mixed"]+.emotion-5 {
   fill: #e5dbfd;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-checked="mixed"]+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-checked="mixed"]+.emotion-5 .emotion-7 {
   stroke: #e5dbfd;
   fill: #e5dbfd;
 }
 
-.emotion-3 .emotion-6:checked+.emotion-8 path {
+.emotion-0 .emotion-3:checked+.emotion-5 path {
   transform-origin: center;
   -webkit-transition: 200ms -webkit-transform ease-in-out;
   transition: 200ms transform ease-in-out;
@@ -489,66 +471,60 @@ exports[`checkboxField > should trigger events correctly with required prop 1`]
   transform: translate(2px, 2px);
 }
 
-.emotion-3 .emotion-6:checked+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3:checked+.emotion-5 .emotion-7 {
   fill: #8c40ef;
   stroke: #8c40ef;
 }
 
-.emotion-3 .emotion-6[aria-invalid="true"]:checked+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3[aria-invalid="true"]:checked+.emotion-5 .emotion-7 {
   fill: #e51963;
   stroke: #e51963;
 }
 
-.emotion-3 .emotion-6[aria-checked="mixed"]+.emotion-8 .eqr7bqq5 {
+.emotion-0 .emotion-3[aria-checked="mixed"]+.emotion-5 .eqr7bqq5 {
   fill: #ffffff;
 }
 
-.emotion-3 .emotion-6[aria-checked="mixed"]+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3[aria-checked="mixed"]+.emotion-5 .emotion-7 {
   fill: #8c40ef;
   stroke: #8c40ef;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='false'][aria-checked='false']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='false'][aria-checked='false']+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #e5dbfd;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='false'][aria-checked='true']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='false'][aria-checked='true']+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #792dd4;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='false'][aria-checked='mixed']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='false'][aria-checked='mixed']+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #792dd4;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='true'][aria-checked='false']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='true'][aria-checked='false']+.emotion-5 .emotion-7 {
   stroke: #92103f;
   fill: #ffd3e3;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='true'][aria-checked='true']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='true'][aria-checked='true']+.emotion-5 .emotion-7 {
   stroke: #d6175c;
   fill: #d6175c;
 }
 
-.emotion-3 .emotion-6[aria-invalid="true"]+.emotion-8 {
+.emotion-0 .emotion-3[aria-invalid="true"]+.emotion-5 {
   fill: #e51963;
 }
 
-.emotion-3 .emotion-6[aria-invalid="true"]+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3[aria-invalid="true"]+.emotion-5 .emotion-7 {
   stroke: #e51963;
   fill: #ffebf2;
 }
 
-.emotion-3 label {
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
-.emotion-5 {
+.emotion-2 {
   position: absolute;
   white-space: nowrap;
   height: 1.5rem;
@@ -557,57 +533,57 @@ exports[`checkboxField > should trigger events correctly with required prop 1`]
   border-width: 0;
 }
 
-.emotion-5:not(:disabled) {
+.emotion-2:not(:disabled) {
   cursor: pointer;
 }
 
-.emotion-5:disabled {
+.emotion-2:disabled {
   cursor: not-allowed;
 }
 
-.emotion-5:not(:disabled):checked+.emotion-8,
-.emotion-5:not(:disabled)[aria-checked='mixed']+.emotion-8 {
+.emotion-2:not(:disabled):checked+.emotion-5,
+.emotion-2:not(:disabled)[aria-checked='mixed']+.emotion-5 {
   fill: #8c40ef;
 }
 
-.emotion-5:not(:disabled):checked+.emotion-8 .emotion-10,
-.emotion-5:not(:disabled)[aria-checked='mixed']+.emotion-8 .emotion-10 {
+.emotion-2:not(:disabled):checked+.emotion-5 .emotion-7,
+.emotion-2:not(:disabled)[aria-checked='mixed']+.emotion-5 .emotion-7 {
   stroke: #8c40ef;
 }
 
-.emotion-5:not(:disabled)[aria-invalid='true']+.emotion-8,
-.emotion-5:not(:disabled)[aria-invalid='mixed']+.emotion-8 {
+.emotion-2:not(:disabled)[aria-invalid='true']+.emotion-5,
+.emotion-2:not(:disabled)[aria-invalid='mixed']+.emotion-5 {
   fill: #ffebf2;
 }
 
-.emotion-5:not(:disabled)[aria-invalid='true']+.emotion-8 .emotion-10,
-.emotion-5:not(:disabled)[aria-invalid='mixed']+.emotion-8 .emotion-10 {
+.emotion-2:not(:disabled)[aria-invalid='true']+.emotion-5 .emotion-7,
+.emotion-2:not(:disabled)[aria-invalid='mixed']+.emotion-5 .emotion-7 {
   stroke: #b3144d;
 }
 
-.emotion-5:focus+.emotion-8 {
+.emotion-2:focus+.emotion-5 {
   background-color: #f1eefc;
   fill: #ffebf2;
   outline: 1px solid 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-5:focus+.emotion-8 .emotion-10 {
+.emotion-2:focus+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #e5dbfd;
 }
 
-.emotion-5[aria-invalid='true']:focus+.emotion-8 {
+.emotion-2[aria-invalid='true']:focus+.emotion-5 {
   background-color: #ffebf2;
   fill: #ffebf2;
   outline: 1px solid 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-5[aria-invalid='true']:focus+.emotion-8 .emotion-10 {
+.emotion-2[aria-invalid='true']:focus+.emotion-5 .emotion-7 {
   stroke: #92103f;
   fill: #ffd3e3;
 }
 
-.emotion-7 {
+.emotion-4 {
   border-radius: 0.25rem;
   height: 1.5rem;
   width: 1.5rem;
@@ -615,7 +591,7 @@ exports[`checkboxField > should trigger events correctly with required prop 1`]
   min-height: 1.5rem;
 }
 
-.emotion-7 path {
+.emotion-4 path {
   fill: #ffffff;
   -webkit-transform: translate(2px, 2px);
   -moz-transform: translate(2px, 2px);
@@ -627,12 +603,12 @@ exports[`checkboxField > should trigger events correctly with required prop 1`]
   transform: scale(0);
 }
 
-.emotion-9 {
+.emotion-6 {
   fill: #ffffff;
   stroke: #d9dadd;
 }
 
-.emotion-11 {
+.emotion-8 {
   width: 100%;
   cursor: pointer;
 }
@@ -648,7 +624,7 @@ exports[`checkboxField > should trigger events correctly with required prop 1`]
         class="uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u7 uv_toi52u5d"
       >
         <fieldset
-          class="emotion-0 emotion-1"
+          class="uv_19cjf6j0"
         >
           <div
             class="uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u27 uv_toi52u5d"
@@ -676,27 +652,27 @@ exports[`checkboxField > should trigger events correctly with required prop 1`]
             >
               <div
                 aria-disabled="false"
-                class="emotion-2 emotion-3 emotion-4"
+                class="uv_19cjf6j1 emotion-0 emotion-1"
                 data-checked="false"
                 data-error="false"
               >
                 <input
                   aria-checked="false"
                   aria-invalid="false"
-                  class="emotion-5 emotion-6"
+                  class="emotion-2 emotion-3"
                   id="«r9»"
                   name="test.value-1"
                   type="checkbox"
                   value="value-1"
                 />
                 <svg
-                  class="emotion-7 emotion-8"
+                  class="emotion-4 emotion-5"
                   fill="none"
                   viewBox="0 0 24 24"
                 >
                   <g>
                     <rect
-                      class="emotion-9 emotion-10"
+                      class="emotion-6 emotion-7"
                       height="16"
                       rx="0.125rem"
                       stroke-width="2"
@@ -725,7 +701,7 @@ exports[`checkboxField > should trigger events correctly with required prop 1`]
                     style="--uv_4k0ekn3: 1;"
                   >
                     <label
-                      class="emotion-11 emotion-12 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow8 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+                      class="emotion-8 emotion-9 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow8 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
                       for="«r9»"
                     >
                       Checkbox 1
@@ -735,27 +711,27 @@ exports[`checkboxField > should trigger events correctly with required prop 1`]
               </div>
               <div
                 aria-disabled="false"
-                class="emotion-2 emotion-3 emotion-4"
+                class="uv_19cjf6j1 emotion-0 emotion-1"
                 data-checked="false"
                 data-error="false"
               >
                 <input
                   aria-checked="false"
                   aria-invalid="false"
-                  class="emotion-5 emotion-6"
+                  class="emotion-2 emotion-3"
                   id="«rc»"
                   name="test.value-2"
                   type="checkbox"
                   value="value-2"
                 />
                 <svg
-                  class="emotion-7 emotion-8"
+                  class="emotion-4 emotion-5"
                   fill="none"
                   viewBox="0 0 24 24"
                 >
                   <g>
                     <rect
-                      class="emotion-9 emotion-10"
+                      class="emotion-6 emotion-7"
                       height="16"
                       rx="0.125rem"
                       stroke-width="2"
@@ -784,7 +760,7 @@ exports[`checkboxField > should trigger events correctly with required prop 1`]
                     style="--uv_4k0ekn3: 1;"
                   >
                     <label
-                      class="emotion-11 emotion-12 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow8 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+                      class="emotion-8 emotion-9 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow8 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
                       for="«rc»"
                     >
                       Checkbox 2
diff --git a/packages/form/src/components/RadioGroupField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/RadioGroupField/__tests__/__snapshots__/index.test.tsx.snap
index 820471abca..ed54404d86 100644
--- a/packages/form/src/components/RadioGroupField/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/form/src/components/RadioGroupField/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,13 +2,7 @@
 
 exports[`radioField > should render correctly checked 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <form
@@ -19,7 +13,7 @@ exports[`radioField > should render correctly checked 1`] = `
         class="uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u7 uv_toi52u5d"
       >
         <fieldset
-          class="emotion-0 emotion-1"
+          class="uv_1ec5h6m0"
         >
           <div
             class="uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u27 uv_toi52u5d"
@@ -149,13 +143,7 @@ exports[`radioField > should render correctly checked 1`] = `
 
 exports[`radioField > should trigger events correctly 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <form
@@ -166,7 +154,7 @@ exports[`radioField > should trigger events correctly 1`] = `
         class="uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u7 uv_toi52u5d"
       >
         <fieldset
-          class="emotion-0 emotion-1"
+          class="uv_1ec5h6m0"
         >
           <div
             class="uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u27 uv_toi52u5d"
diff --git a/packages/form/src/components/ToggleGroupField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/ToggleGroupField/__tests__/__snapshots__/index.test.tsx.snap
index 89dba6fc40..e498c5ced0 100644
--- a/packages/form/src/components/ToggleGroupField/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/form/src/components/ToggleGroupField/__tests__/__snapshots__/index.test.tsx.snap
@@ -3,12 +3,6 @@
 exports[`groupField > should render correctly checked 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-.emotion-2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -27,16 +21,16 @@ exports[`groupField > should render correctly checked 1`] = `
   flex-direction: row-reverse;
 }
 
-.emotion-2:active .emotion-5[data-disabled='false']:after {
+.emotion-0:active .emotion-3[data-disabled='false']:after {
   width: calc(1rem * 1.3775);
 }
 
-.emotion-2[aria-disabled="true"] {
+.emotion-0[aria-disabled="true"] {
   cursor: not-allowed;
   color: #b5b7bd;
 }
 
-.emotion-4 {
+.emotion-2 {
   box-sizing: content-box;
   outline: none;
   overflow: hidden;
@@ -58,11 +52,11 @@ exports[`groupField > should render correctly checked 1`] = `
   height: 1.5rem;
 }
 
-.emotion-4:hover {
+.emotion-2:hover {
   background-color: #d9dadd;
 }
 
-.emotion-4:after {
+.emotion-2:after {
   content: "";
   position: absolute;
   top: calc(1.5rem / 2 - 1rem / 2);
@@ -75,25 +69,25 @@ exports[`groupField > should render correctly checked 1`] = `
   transition: all 300ms;
 }
 
-.emotion-4:focus-within,
-.emotion-4:focus {
+.emotion-2:focus-within,
+.emotion-2:focus {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-4[data-disabled="false"]:active:after {
+.emotion-2[data-disabled="false"]:active:after {
   width: calc(1rem * 1.3775);
 }
 
-.emotion-4:has(:checked) {
+.emotion-2:has(:checked) {
   color: #222638;
   background-color: #8c40ef;
 }
 
-.emotion-4:has(:checked):hover {
+.emotion-2:has(:checked):hover {
   background-color: #792dd4;
 }
 
-.emotion-4:has(:checked):after {
+.emotion-2:has(:checked):after {
   left: calc(100% - 5px);
   -webkit-transform: translateX(-100%);
   -moz-transform: translateX(-100%);
@@ -101,41 +95,41 @@ exports[`groupField > should render correctly checked 1`] = `
   transform: translateX(-100%);
 }
 
-.emotion-4:has(:checked):focus-within,
-.emotion-4:has(:checked):focus {
+.emotion-2:has(:checked):focus-within,
+.emotion-2:has(:checked):focus {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-4[data-disabled="true"] {
+.emotion-2[data-disabled="true"] {
   background: #f3f3f4;
 }
 
-.emotion-4[data-disabled="true"]:has(:checked) {
+.emotion-2[data-disabled="true"]:has(:checked) {
   background: #e5dbfd;
 }
 
-.emotion-4[data-error="true"] {
+.emotion-2[data-error="true"] {
   background-color: #ffebf2;
 }
 
-.emotion-4[data-error="true"]:focus-within,
-.emotion-4[data-error="true"]:focus {
+.emotion-2[data-error="true"]:focus-within,
+.emotion-2[data-error="true"]:focus {
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-4[data-error="true"]:has(:checked) {
+.emotion-2[data-error="true"]:has(:checked) {
   background-color: #e51963;
 }
 
-.emotion-4[data-error="true"][data-disabled="true"] {
+.emotion-2[data-error="true"][data-disabled="true"] {
   background-color: #fff3f7;
 }
 
-.emotion-4[data-error="true"][data-disabled="true"]:has(:checked) {
+.emotion-2[data-error="true"][data-disabled="true"]:has(:checked) {
   background-color: #ffd3e3;
 }
 
-.emotion-6 {
+.emotion-4 {
   position: absolute;
   opacity: 0;
   top: 0;
@@ -145,7 +139,7 @@ exports[`groupField > should render correctly checked 1`] = `
   cursor: pointer;
 }
 
-.emotion-6[disabled] {
+.emotion-4[disabled] {
   cursor: not-allowed;
 }
 
@@ -160,7 +154,7 @@ exports[`groupField > should render correctly checked 1`] = `
         class="uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u7 uv_toi52u5d"
       >
         <fieldset
-          class="emotion-0 emotion-1"
+          class="uv_l0r03j0"
         >
           <div
             class="uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u27 uv_toi52u5d"
@@ -179,7 +173,7 @@ exports[`groupField > should render correctly checked 1`] = `
             >
               <label
                 aria-disabled="false"
-                class="emotion-2 emotion-3"
+                class="emotion-0 emotion-1"
               >
                 <div
                   class="uv_toi52u0 uv_toi52u4j uv_toi52u2d uv_toi52u7d uv_toi52u21 uv_toi52u5d"
@@ -196,13 +190,13 @@ exports[`groupField > should render correctly checked 1`] = `
                   </div>
                 </div>
                 <div
-                  class="emotion-4 emotion-5"
+                  class="emotion-2 emotion-3"
                   data-disabled="false"
                   data-error="false"
                 >
                   <input
                     aria-invalid="false"
-                    class="emotion-6 emotion-7"
+                    class="emotion-4 emotion-5"
                     id="«r1»"
                     name="Group.value-1"
                     type="checkbox"
@@ -212,7 +206,7 @@ exports[`groupField > should render correctly checked 1`] = `
               </label>
               <label
                 aria-disabled="false"
-                class="emotion-2 emotion-3"
+                class="emotion-0 emotion-1"
               >
                 <div
                   class="uv_toi52u0 uv_toi52u4j uv_toi52u2d uv_toi52u7d uv_toi52u21 uv_toi52u5d"
@@ -229,13 +223,13 @@ exports[`groupField > should render correctly checked 1`] = `
                   </div>
                 </div>
                 <div
-                  class="emotion-4 emotion-5"
+                  class="emotion-2 emotion-3"
                   data-disabled="false"
                   data-error="false"
                 >
                   <input
                     aria-invalid="false"
-                    class="emotion-6 emotion-7"
+                    class="emotion-4 emotion-5"
                     id="«r4»"
                     name="Group.value-2"
                     type="checkbox"
@@ -255,12 +249,6 @@ exports[`groupField > should render correctly checked 1`] = `
 exports[`groupField > should trigger events correctly with required prop 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-.emotion-2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -279,16 +267,16 @@ exports[`groupField > should trigger events correctly with required prop 1`] = `
   flex-direction: row-reverse;
 }
 
-.emotion-2:active .emotion-5[data-disabled='false']:after {
+.emotion-0:active .emotion-3[data-disabled='false']:after {
   width: calc(1rem * 1.3775);
 }
 
-.emotion-2[aria-disabled="true"] {
+.emotion-0[aria-disabled="true"] {
   cursor: not-allowed;
   color: #b5b7bd;
 }
 
-.emotion-4 {
+.emotion-2 {
   box-sizing: content-box;
   outline: none;
   overflow: hidden;
@@ -310,11 +298,11 @@ exports[`groupField > should trigger events correctly with required prop 1`] = `
   height: 1.5rem;
 }
 
-.emotion-4:hover {
+.emotion-2:hover {
   background-color: #d9dadd;
 }
 
-.emotion-4:after {
+.emotion-2:after {
   content: "";
   position: absolute;
   top: calc(1.5rem / 2 - 1rem / 2);
@@ -327,25 +315,25 @@ exports[`groupField > should trigger events correctly with required prop 1`] = `
   transition: all 300ms;
 }
 
-.emotion-4:focus-within,
-.emotion-4:focus {
+.emotion-2:focus-within,
+.emotion-2:focus {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-4[data-disabled="false"]:active:after {
+.emotion-2[data-disabled="false"]:active:after {
   width: calc(1rem * 1.3775);
 }
 
-.emotion-4:has(:checked) {
+.emotion-2:has(:checked) {
   color: #222638;
   background-color: #8c40ef;
 }
 
-.emotion-4:has(:checked):hover {
+.emotion-2:has(:checked):hover {
   background-color: #792dd4;
 }
 
-.emotion-4:has(:checked):after {
+.emotion-2:has(:checked):after {
   left: calc(100% - 5px);
   -webkit-transform: translateX(-100%);
   -moz-transform: translateX(-100%);
@@ -353,41 +341,41 @@ exports[`groupField > should trigger events correctly with required prop 1`] = `
   transform: translateX(-100%);
 }
 
-.emotion-4:has(:checked):focus-within,
-.emotion-4:has(:checked):focus {
+.emotion-2:has(:checked):focus-within,
+.emotion-2:has(:checked):focus {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-4[data-disabled="true"] {
+.emotion-2[data-disabled="true"] {
   background: #f3f3f4;
 }
 
-.emotion-4[data-disabled="true"]:has(:checked) {
+.emotion-2[data-disabled="true"]:has(:checked) {
   background: #e5dbfd;
 }
 
-.emotion-4[data-error="true"] {
+.emotion-2[data-error="true"] {
   background-color: #ffebf2;
 }
 
-.emotion-4[data-error="true"]:focus-within,
-.emotion-4[data-error="true"]:focus {
+.emotion-2[data-error="true"]:focus-within,
+.emotion-2[data-error="true"]:focus {
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-4[data-error="true"]:has(:checked) {
+.emotion-2[data-error="true"]:has(:checked) {
   background-color: #e51963;
 }
 
-.emotion-4[data-error="true"][data-disabled="true"] {
+.emotion-2[data-error="true"][data-disabled="true"] {
   background-color: #fff3f7;
 }
 
-.emotion-4[data-error="true"][data-disabled="true"]:has(:checked) {
+.emotion-2[data-error="true"][data-disabled="true"]:has(:checked) {
   background-color: #ffd3e3;
 }
 
-.emotion-6 {
+.emotion-4 {
   position: absolute;
   opacity: 0;
   top: 0;
@@ -397,7 +385,7 @@ exports[`groupField > should trigger events correctly with required prop 1`] = `
   cursor: pointer;
 }
 
-.emotion-6[disabled] {
+.emotion-4[disabled] {
   cursor: not-allowed;
 }
 
@@ -412,7 +400,7 @@ exports[`groupField > should trigger events correctly with required prop 1`] = `
         class="uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u7 uv_toi52u5d"
       >
         <fieldset
-          class="emotion-0 emotion-1"
+          class="uv_l0r03j0"
         >
           <div
             class="uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u27 uv_toi52u5d"
@@ -440,7 +428,7 @@ exports[`groupField > should trigger events correctly with required prop 1`] = `
             >
               <label
                 aria-disabled="false"
-                class="emotion-2 emotion-3"
+                class="emotion-0 emotion-1"
               >
                 <div
                   class="uv_toi52u0 uv_toi52u4j uv_toi52u2d uv_toi52u7d uv_toi52u21 uv_toi52u5d"
@@ -457,13 +445,13 @@ exports[`groupField > should trigger events correctly with required prop 1`] = `
                   </div>
                 </div>
                 <div
-                  class="emotion-4 emotion-5"
+                  class="emotion-2 emotion-3"
                   data-disabled="false"
                   data-error="true"
                 >
                   <input
                     aria-invalid="true"
-                    class="emotion-6 emotion-7"
+                    class="emotion-4 emotion-5"
                     id="«r9»"
                     name="test.value-1"
                     type="checkbox"
@@ -473,7 +461,7 @@ exports[`groupField > should trigger events correctly with required prop 1`] = `
               </label>
               <label
                 aria-disabled="false"
-                class="emotion-2 emotion-3"
+                class="emotion-0 emotion-1"
               >
                 <div
                   class="uv_toi52u0 uv_toi52u4j uv_toi52u2d uv_toi52u7d uv_toi52u21 uv_toi52u5d"
@@ -490,13 +478,13 @@ exports[`groupField > should trigger events correctly with required prop 1`] = `
                   </div>
                 </div>
                 <div
-                  class="emotion-4 emotion-5"
+                  class="emotion-2 emotion-3"
                   data-disabled="false"
                   data-error="true"
                 >
                   <input
                     aria-invalid="true"
-                    class="emotion-6 emotion-7"
+                    class="emotion-4 emotion-5"
                     id="«rc»"
                     name="test.value-2"
                     type="checkbox"
diff --git a/packages/ui/src/components/CheckboxGroup/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/CheckboxGroup/__tests__/__snapshots__/index.test.tsx.snap
index c26ccf589c..d7579490b6 100644
--- a/packages/ui/src/components/CheckboxGroup/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/CheckboxGroup/__tests__/__snapshots__/index.test.tsx.snap
@@ -3,12 +3,6 @@
 exports[`checkboxGroup > renders correctly 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-.emotion-3 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -21,65 +15,65 @@ exports[`checkboxGroup > renders correctly 1`] = `
   gap: 0.5rem;
 }
 
-.emotion-3 .eqr7bqq3 {
+.emotion-0 .eqr7bqq3 {
   cursor: pointer;
 }
 
-.emotion-3[aria-disabled='true'] {
+.emotion-0[aria-disabled='true'] {
   cursor: not-allowed;
   color: #b5b7bd;
 }
 
-.emotion-3[aria-disabled='true'] .eqr7bqq3 {
+.emotion-0[aria-disabled='true'] .eqr7bqq3 {
   cursor: not-allowed;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-5 {
   fill: #e9eaeb;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-5 .emotion-7 {
   stroke: #d9dadd;
   fill: #f3f3f4;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]:checked+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]:checked+.emotion-5 {
   fill: #ffd3e3;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]:checked+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]:checked+.emotion-5 .emotion-7 {
   stroke: #ffd3e3;
   fill: #ffd3e3;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]+.emotion-5 {
   fill: #ffebf2;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]+.emotion-5 .emotion-7 {
   stroke: #ffbbd3;
   fill: #ffebf2;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6:checked+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3:checked+.emotion-5 {
   fill: #e5dbfd;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6:checked+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3:checked+.emotion-5 .emotion-7 {
   stroke: #d8c5fc;
   fill: #d8c5fc;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-checked="mixed"]+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-checked="mixed"]+.emotion-5 {
   fill: #e5dbfd;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-checked="mixed"]+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-checked="mixed"]+.emotion-5 .emotion-7 {
   stroke: #e5dbfd;
   fill: #e5dbfd;
 }
 
-.emotion-3 .emotion-6:checked+.emotion-8 path {
+.emotion-0 .emotion-3:checked+.emotion-5 path {
   transform-origin: center;
   -webkit-transition: 200ms -webkit-transform ease-in-out;
   transition: 200ms transform ease-in-out;
@@ -93,66 +87,60 @@ exports[`checkboxGroup > renders correctly 1`] = `
   transform: translate(2px, 2px);
 }
 
-.emotion-3 .emotion-6:checked+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3:checked+.emotion-5 .emotion-7 {
   fill: #8c40ef;
   stroke: #8c40ef;
 }
 
-.emotion-3 .emotion-6[aria-invalid="true"]:checked+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3[aria-invalid="true"]:checked+.emotion-5 .emotion-7 {
   fill: #e51963;
   stroke: #e51963;
 }
 
-.emotion-3 .emotion-6[aria-checked="mixed"]+.emotion-8 .eqr7bqq5 {
+.emotion-0 .emotion-3[aria-checked="mixed"]+.emotion-5 .eqr7bqq5 {
   fill: #ffffff;
 }
 
-.emotion-3 .emotion-6[aria-checked="mixed"]+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3[aria-checked="mixed"]+.emotion-5 .emotion-7 {
   fill: #8c40ef;
   stroke: #8c40ef;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='false'][aria-checked='false']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='false'][aria-checked='false']+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #e5dbfd;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='false'][aria-checked='true']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='false'][aria-checked='true']+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #792dd4;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='false'][aria-checked='mixed']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='false'][aria-checked='mixed']+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #792dd4;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='true'][aria-checked='false']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='true'][aria-checked='false']+.emotion-5 .emotion-7 {
   stroke: #92103f;
   fill: #ffd3e3;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='true'][aria-checked='true']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='true'][aria-checked='true']+.emotion-5 .emotion-7 {
   stroke: #d6175c;
   fill: #d6175c;
 }
 
-.emotion-3 .emotion-6[aria-invalid="true"]+.emotion-8 {
+.emotion-0 .emotion-3[aria-invalid="true"]+.emotion-5 {
   fill: #e51963;
 }
 
-.emotion-3 .emotion-6[aria-invalid="true"]+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3[aria-invalid="true"]+.emotion-5 .emotion-7 {
   stroke: #e51963;
   fill: #ffebf2;
 }
 
-.emotion-3 label {
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
-.emotion-5 {
+.emotion-2 {
   position: absolute;
   white-space: nowrap;
   height: 1.5rem;
@@ -161,57 +149,57 @@ exports[`checkboxGroup > renders correctly 1`] = `
   border-width: 0;
 }
 
-.emotion-5:not(:disabled) {
+.emotion-2:not(:disabled) {
   cursor: pointer;
 }
 
-.emotion-5:disabled {
+.emotion-2:disabled {
   cursor: not-allowed;
 }
 
-.emotion-5:not(:disabled):checked+.emotion-8,
-.emotion-5:not(:disabled)[aria-checked='mixed']+.emotion-8 {
+.emotion-2:not(:disabled):checked+.emotion-5,
+.emotion-2:not(:disabled)[aria-checked='mixed']+.emotion-5 {
   fill: #8c40ef;
 }
 
-.emotion-5:not(:disabled):checked+.emotion-8 .emotion-10,
-.emotion-5:not(:disabled)[aria-checked='mixed']+.emotion-8 .emotion-10 {
+.emotion-2:not(:disabled):checked+.emotion-5 .emotion-7,
+.emotion-2:not(:disabled)[aria-checked='mixed']+.emotion-5 .emotion-7 {
   stroke: #8c40ef;
 }
 
-.emotion-5:not(:disabled)[aria-invalid='true']+.emotion-8,
-.emotion-5:not(:disabled)[aria-invalid='mixed']+.emotion-8 {
+.emotion-2:not(:disabled)[aria-invalid='true']+.emotion-5,
+.emotion-2:not(:disabled)[aria-invalid='mixed']+.emotion-5 {
   fill: #ffebf2;
 }
 
-.emotion-5:not(:disabled)[aria-invalid='true']+.emotion-8 .emotion-10,
-.emotion-5:not(:disabled)[aria-invalid='mixed']+.emotion-8 .emotion-10 {
+.emotion-2:not(:disabled)[aria-invalid='true']+.emotion-5 .emotion-7,
+.emotion-2:not(:disabled)[aria-invalid='mixed']+.emotion-5 .emotion-7 {
   stroke: #b3144d;
 }
 
-.emotion-5:focus+.emotion-8 {
+.emotion-2:focus+.emotion-5 {
   background-color: #f1eefc;
   fill: #ffebf2;
   outline: 1px solid 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-5:focus+.emotion-8 .emotion-10 {
+.emotion-2:focus+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #e5dbfd;
 }
 
-.emotion-5[aria-invalid='true']:focus+.emotion-8 {
+.emotion-2[aria-invalid='true']:focus+.emotion-5 {
   background-color: #ffebf2;
   fill: #ffebf2;
   outline: 1px solid 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-5[aria-invalid='true']:focus+.emotion-8 .emotion-10 {
+.emotion-2[aria-invalid='true']:focus+.emotion-5 .emotion-7 {
   stroke: #92103f;
   fill: #ffd3e3;
 }
 
-.emotion-7 {
+.emotion-4 {
   border-radius: 0.25rem;
   height: 1.5rem;
   width: 1.5rem;
@@ -219,7 +207,7 @@ exports[`checkboxGroup > renders correctly 1`] = `
   min-height: 1.5rem;
 }
 
-.emotion-7 path {
+.emotion-4 path {
   fill: #ffffff;
   -webkit-transform: translate(2px, 2px);
   -moz-transform: translate(2px, 2px);
@@ -231,12 +219,12 @@ exports[`checkboxGroup > renders correctly 1`] = `
   transform: scale(0);
 }
 
-.emotion-9 {
+.emotion-6 {
   fill: #ffffff;
   stroke: #d9dadd;
 }
 
-.emotion-11 {
+.emotion-8 {
   width: 100%;
   cursor: pointer;
 }
@@ -248,7 +236,7 @@ exports[`checkboxGroup > renders correctly 1`] = `
       class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
     >
       <fieldset
-        class="emotion-0 emotion-1"
+        class="styles__19cjf6j0"
       >
         <div
           class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -267,27 +255,27 @@ exports[`checkboxGroup > renders correctly 1`] = `
           >
             <div
               aria-disabled="false"
-              class="emotion-2 emotion-3 emotion-4"
+              class="styles__19cjf6j1 emotion-0 emotion-1"
               data-checked="false"
               data-error="false"
             >
               <input
                 aria-checked="false"
                 aria-invalid="false"
-                class="emotion-5 emotion-6"
+                class="emotion-2 emotion-3"
                 id="«r1»"
                 name="Checkbox.value-1"
                 type="checkbox"
                 value="value-1"
               />
               <svg
-                class="emotion-7 emotion-8"
+                class="emotion-4 emotion-5"
                 fill="none"
                 viewBox="0 0 24 24"
               >
                 <g>
                   <rect
-                    class="emotion-9 emotion-10"
+                    class="emotion-6 emotion-7"
                     height="16"
                     rx="0.125rem"
                     stroke-width="2"
@@ -316,7 +304,7 @@ exports[`checkboxGroup > renders correctly 1`] = `
                   style="--_4k0ekn3: 1;"
                 >
                   <label
-                    class="emotion-11 emotion-12 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_default__m4c9owi style_variant_body__m4c9owm style_disabled_false__m4c9ow1b style_undefined_compound_24__m4c9ow20 style_undefined_compound_72__m4c9ow3c"
+                    class="emotion-8 emotion-9 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_default__m4c9owi style_variant_body__m4c9owm style_disabled_false__m4c9ow1b style_undefined_compound_24__m4c9ow20 style_undefined_compound_72__m4c9ow3c"
                     for="«r1»"
                   >
                     Checkbox 1
@@ -326,27 +314,27 @@ exports[`checkboxGroup > renders correctly 1`] = `
             </div>
             <div
               aria-disabled="false"
-              class="emotion-2 emotion-3 emotion-4"
+              class="styles__19cjf6j1 emotion-0 emotion-1"
               data-checked="false"
               data-error="false"
             >
               <input
                 aria-checked="false"
                 aria-invalid="false"
-                class="emotion-5 emotion-6"
+                class="emotion-2 emotion-3"
                 id="«r4»"
                 name="Checkbox.value-2"
                 type="checkbox"
                 value="value-2"
               />
               <svg
-                class="emotion-7 emotion-8"
+                class="emotion-4 emotion-5"
                 fill="none"
                 viewBox="0 0 24 24"
               >
                 <g>
                   <rect
-                    class="emotion-9 emotion-10"
+                    class="emotion-6 emotion-7"
                     height="16"
                     rx="0.125rem"
                     stroke-width="2"
@@ -375,7 +363,7 @@ exports[`checkboxGroup > renders correctly 1`] = `
                   style="--_4k0ekn3: 1;"
                 >
                   <label
-                    class="emotion-11 emotion-12 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_default__m4c9owi style_variant_body__m4c9owm style_disabled_false__m4c9ow1b style_undefined_compound_24__m4c9ow20 style_undefined_compound_72__m4c9ow3c"
+                    class="emotion-8 emotion-9 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_default__m4c9owi style_variant_body__m4c9owm style_disabled_false__m4c9ow1b style_undefined_compound_24__m4c9ow20 style_undefined_compound_72__m4c9ow3c"
                     for="«r4»"
                   >
                     Checkbox 2
@@ -394,12 +382,6 @@ exports[`checkboxGroup > renders correctly 1`] = `
 exports[`checkboxGroup > renders correctly with direction row 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-.emotion-3 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -412,65 +394,65 @@ exports[`checkboxGroup > renders correctly with direction row 1`] = `
   gap: 0.5rem;
 }
 
-.emotion-3 .eqr7bqq3 {
+.emotion-0 .eqr7bqq3 {
   cursor: pointer;
 }
 
-.emotion-3[aria-disabled='true'] {
+.emotion-0[aria-disabled='true'] {
   cursor: not-allowed;
   color: #b5b7bd;
 }
 
-.emotion-3[aria-disabled='true'] .eqr7bqq3 {
+.emotion-0[aria-disabled='true'] .eqr7bqq3 {
   cursor: not-allowed;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-5 {
   fill: #e9eaeb;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-5 .emotion-7 {
   stroke: #d9dadd;
   fill: #f3f3f4;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]:checked+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]:checked+.emotion-5 {
   fill: #ffd3e3;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]:checked+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]:checked+.emotion-5 .emotion-7 {
   stroke: #ffd3e3;
   fill: #ffd3e3;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]+.emotion-5 {
   fill: #ffebf2;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]+.emotion-5 .emotion-7 {
   stroke: #ffbbd3;
   fill: #ffebf2;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6:checked+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3:checked+.emotion-5 {
   fill: #e5dbfd;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6:checked+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3:checked+.emotion-5 .emotion-7 {
   stroke: #d8c5fc;
   fill: #d8c5fc;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-checked="mixed"]+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-checked="mixed"]+.emotion-5 {
   fill: #e5dbfd;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-checked="mixed"]+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-checked="mixed"]+.emotion-5 .emotion-7 {
   stroke: #e5dbfd;
   fill: #e5dbfd;
 }
 
-.emotion-3 .emotion-6:checked+.emotion-8 path {
+.emotion-0 .emotion-3:checked+.emotion-5 path {
   transform-origin: center;
   -webkit-transition: 200ms -webkit-transform ease-in-out;
   transition: 200ms transform ease-in-out;
@@ -484,66 +466,60 @@ exports[`checkboxGroup > renders correctly with direction row 1`] = `
   transform: translate(2px, 2px);
 }
 
-.emotion-3 .emotion-6:checked+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3:checked+.emotion-5 .emotion-7 {
   fill: #8c40ef;
   stroke: #8c40ef;
 }
 
-.emotion-3 .emotion-6[aria-invalid="true"]:checked+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3[aria-invalid="true"]:checked+.emotion-5 .emotion-7 {
   fill: #e51963;
   stroke: #e51963;
 }
 
-.emotion-3 .emotion-6[aria-checked="mixed"]+.emotion-8 .eqr7bqq5 {
+.emotion-0 .emotion-3[aria-checked="mixed"]+.emotion-5 .eqr7bqq5 {
   fill: #ffffff;
 }
 
-.emotion-3 .emotion-6[aria-checked="mixed"]+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3[aria-checked="mixed"]+.emotion-5 .emotion-7 {
   fill: #8c40ef;
   stroke: #8c40ef;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='false'][aria-checked='false']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='false'][aria-checked='false']+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #e5dbfd;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='false'][aria-checked='true']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='false'][aria-checked='true']+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #792dd4;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='false'][aria-checked='mixed']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='false'][aria-checked='mixed']+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #792dd4;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='true'][aria-checked='false']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='true'][aria-checked='false']+.emotion-5 .emotion-7 {
   stroke: #92103f;
   fill: #ffd3e3;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='true'][aria-checked='true']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='true'][aria-checked='true']+.emotion-5 .emotion-7 {
   stroke: #d6175c;
   fill: #d6175c;
 }
 
-.emotion-3 .emotion-6[aria-invalid="true"]+.emotion-8 {
+.emotion-0 .emotion-3[aria-invalid="true"]+.emotion-5 {
   fill: #e51963;
 }
 
-.emotion-3 .emotion-6[aria-invalid="true"]+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3[aria-invalid="true"]+.emotion-5 .emotion-7 {
   stroke: #e51963;
   fill: #ffebf2;
 }
 
-.emotion-3 label {
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
-.emotion-5 {
+.emotion-2 {
   position: absolute;
   white-space: nowrap;
   height: 1.5rem;
@@ -552,57 +528,57 @@ exports[`checkboxGroup > renders correctly with direction row 1`] = `
   border-width: 0;
 }
 
-.emotion-5:not(:disabled) {
+.emotion-2:not(:disabled) {
   cursor: pointer;
 }
 
-.emotion-5:disabled {
+.emotion-2:disabled {
   cursor: not-allowed;
 }
 
-.emotion-5:not(:disabled):checked+.emotion-8,
-.emotion-5:not(:disabled)[aria-checked='mixed']+.emotion-8 {
+.emotion-2:not(:disabled):checked+.emotion-5,
+.emotion-2:not(:disabled)[aria-checked='mixed']+.emotion-5 {
   fill: #8c40ef;
 }
 
-.emotion-5:not(:disabled):checked+.emotion-8 .emotion-10,
-.emotion-5:not(:disabled)[aria-checked='mixed']+.emotion-8 .emotion-10 {
+.emotion-2:not(:disabled):checked+.emotion-5 .emotion-7,
+.emotion-2:not(:disabled)[aria-checked='mixed']+.emotion-5 .emotion-7 {
   stroke: #8c40ef;
 }
 
-.emotion-5:not(:disabled)[aria-invalid='true']+.emotion-8,
-.emotion-5:not(:disabled)[aria-invalid='mixed']+.emotion-8 {
+.emotion-2:not(:disabled)[aria-invalid='true']+.emotion-5,
+.emotion-2:not(:disabled)[aria-invalid='mixed']+.emotion-5 {
   fill: #ffebf2;
 }
 
-.emotion-5:not(:disabled)[aria-invalid='true']+.emotion-8 .emotion-10,
-.emotion-5:not(:disabled)[aria-invalid='mixed']+.emotion-8 .emotion-10 {
+.emotion-2:not(:disabled)[aria-invalid='true']+.emotion-5 .emotion-7,
+.emotion-2:not(:disabled)[aria-invalid='mixed']+.emotion-5 .emotion-7 {
   stroke: #b3144d;
 }
 
-.emotion-5:focus+.emotion-8 {
+.emotion-2:focus+.emotion-5 {
   background-color: #f1eefc;
   fill: #ffebf2;
   outline: 1px solid 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-5:focus+.emotion-8 .emotion-10 {
+.emotion-2:focus+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #e5dbfd;
 }
 
-.emotion-5[aria-invalid='true']:focus+.emotion-8 {
+.emotion-2[aria-invalid='true']:focus+.emotion-5 {
   background-color: #ffebf2;
   fill: #ffebf2;
   outline: 1px solid 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-5[aria-invalid='true']:focus+.emotion-8 .emotion-10 {
+.emotion-2[aria-invalid='true']:focus+.emotion-5 .emotion-7 {
   stroke: #92103f;
   fill: #ffd3e3;
 }
 
-.emotion-7 {
+.emotion-4 {
   border-radius: 0.25rem;
   height: 1.5rem;
   width: 1.5rem;
@@ -610,7 +586,7 @@ exports[`checkboxGroup > renders correctly with direction row 1`] = `
   min-height: 1.5rem;
 }
 
-.emotion-7 path {
+.emotion-4 path {
   fill: #ffffff;
   -webkit-transform: translate(2px, 2px);
   -moz-transform: translate(2px, 2px);
@@ -622,12 +598,12 @@ exports[`checkboxGroup > renders correctly with direction row 1`] = `
   transform: scale(0);
 }
 
-.emotion-9 {
+.emotion-6 {
   fill: #ffffff;
   stroke: #d9dadd;
 }
 
-.emotion-11 {
+.emotion-8 {
   width: 100%;
   cursor: pointer;
 }
@@ -639,7 +615,7 @@ exports[`checkboxGroup > renders correctly with direction row 1`] = `
       class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
     >
       <fieldset
-        class="emotion-0 emotion-1"
+        class="styles__19cjf6j0"
       >
         <div
           class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -658,27 +634,27 @@ exports[`checkboxGroup > renders correctly with direction row 1`] = `
           >
             <div
               aria-disabled="false"
-              class="emotion-2 emotion-3 emotion-4"
+              class="styles__19cjf6j1 emotion-0 emotion-1"
               data-checked="false"
               data-error="false"
             >
               <input
                 aria-checked="false"
                 aria-invalid="false"
-                class="emotion-5 emotion-6"
+                class="emotion-2 emotion-3"
                 id="«rf»"
                 name="Checkbox.value-1"
                 type="checkbox"
                 value="value-1"
               />
               <svg
-                class="emotion-7 emotion-8"
+                class="emotion-4 emotion-5"
                 fill="none"
                 viewBox="0 0 24 24"
               >
                 <g>
                   <rect
-                    class="emotion-9 emotion-10"
+                    class="emotion-6 emotion-7"
                     height="16"
                     rx="0.125rem"
                     stroke-width="2"
@@ -707,7 +683,7 @@ exports[`checkboxGroup > renders correctly with direction row 1`] = `
                   style="--_4k0ekn3: 1;"
                 >
                   <label
-                    class="emotion-11 emotion-12 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_default__m4c9owi style_variant_body__m4c9owm style_disabled_false__m4c9ow1b style_undefined_compound_24__m4c9ow20 style_undefined_compound_72__m4c9ow3c"
+                    class="emotion-8 emotion-9 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_default__m4c9owi style_variant_body__m4c9owm style_disabled_false__m4c9ow1b style_undefined_compound_24__m4c9ow20 style_undefined_compound_72__m4c9ow3c"
                     for="«rf»"
                   >
                     Checkbox 1
@@ -717,27 +693,27 @@ exports[`checkboxGroup > renders correctly with direction row 1`] = `
             </div>
             <div
               aria-disabled="false"
-              class="emotion-2 emotion-3 emotion-4"
+              class="styles__19cjf6j1 emotion-0 emotion-1"
               data-checked="false"
               data-error="false"
             >
               <input
                 aria-checked="false"
                 aria-invalid="false"
-                class="emotion-5 emotion-6"
+                class="emotion-2 emotion-3"
                 id="«ri»"
                 name="Checkbox.value-2"
                 type="checkbox"
                 value="value-2"
               />
               <svg
-                class="emotion-7 emotion-8"
+                class="emotion-4 emotion-5"
                 fill="none"
                 viewBox="0 0 24 24"
               >
                 <g>
                   <rect
-                    class="emotion-9 emotion-10"
+                    class="emotion-6 emotion-7"
                     height="16"
                     rx="0.125rem"
                     stroke-width="2"
@@ -766,7 +742,7 @@ exports[`checkboxGroup > renders correctly with direction row 1`] = `
                   style="--_4k0ekn3: 1;"
                 >
                   <label
-                    class="emotion-11 emotion-12 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_default__m4c9owi style_variant_body__m4c9owm style_disabled_false__m4c9ow1b style_undefined_compound_24__m4c9ow20 style_undefined_compound_72__m4c9ow3c"
+                    class="emotion-8 emotion-9 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_default__m4c9owi style_variant_body__m4c9owm style_disabled_false__m4c9ow1b style_undefined_compound_24__m4c9ow20 style_undefined_compound_72__m4c9ow3c"
                     for="«ri»"
                   >
                     Checkbox 2
@@ -785,12 +761,6 @@ exports[`checkboxGroup > renders correctly with direction row 1`] = `
 exports[`checkboxGroup > renders correctly with error content 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-.emotion-3 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -803,65 +773,65 @@ exports[`checkboxGroup > renders correctly with error content 1`] = `
   gap: 0.5rem;
 }
 
-.emotion-3 .eqr7bqq3 {
+.emotion-0 .eqr7bqq3 {
   cursor: pointer;
 }
 
-.emotion-3[aria-disabled='true'] {
+.emotion-0[aria-disabled='true'] {
   cursor: not-allowed;
   color: #b5b7bd;
 }
 
-.emotion-3[aria-disabled='true'] .eqr7bqq3 {
+.emotion-0[aria-disabled='true'] .eqr7bqq3 {
   cursor: not-allowed;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-5 {
   fill: #e9eaeb;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-5 .emotion-7 {
   stroke: #d9dadd;
   fill: #f3f3f4;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]:checked+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]:checked+.emotion-5 {
   fill: #ffd3e3;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]:checked+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]:checked+.emotion-5 .emotion-7 {
   stroke: #ffd3e3;
   fill: #ffd3e3;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]+.emotion-5 {
   fill: #ffebf2;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]+.emotion-5 .emotion-7 {
   stroke: #ffbbd3;
   fill: #ffebf2;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6:checked+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3:checked+.emotion-5 {
   fill: #e5dbfd;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6:checked+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3:checked+.emotion-5 .emotion-7 {
   stroke: #d8c5fc;
   fill: #d8c5fc;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-checked="mixed"]+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-checked="mixed"]+.emotion-5 {
   fill: #e5dbfd;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-checked="mixed"]+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-checked="mixed"]+.emotion-5 .emotion-7 {
   stroke: #e5dbfd;
   fill: #e5dbfd;
 }
 
-.emotion-3 .emotion-6:checked+.emotion-8 path {
+.emotion-0 .emotion-3:checked+.emotion-5 path {
   transform-origin: center;
   -webkit-transition: 200ms -webkit-transform ease-in-out;
   transition: 200ms transform ease-in-out;
@@ -875,66 +845,60 @@ exports[`checkboxGroup > renders correctly with error content 1`] = `
   transform: translate(2px, 2px);
 }
 
-.emotion-3 .emotion-6:checked+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3:checked+.emotion-5 .emotion-7 {
   fill: #8c40ef;
   stroke: #8c40ef;
 }
 
-.emotion-3 .emotion-6[aria-invalid="true"]:checked+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3[aria-invalid="true"]:checked+.emotion-5 .emotion-7 {
   fill: #e51963;
   stroke: #e51963;
 }
 
-.emotion-3 .emotion-6[aria-checked="mixed"]+.emotion-8 .eqr7bqq5 {
+.emotion-0 .emotion-3[aria-checked="mixed"]+.emotion-5 .eqr7bqq5 {
   fill: #ffffff;
 }
 
-.emotion-3 .emotion-6[aria-checked="mixed"]+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3[aria-checked="mixed"]+.emotion-5 .emotion-7 {
   fill: #8c40ef;
   stroke: #8c40ef;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='false'][aria-checked='false']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='false'][aria-checked='false']+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #e5dbfd;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='false'][aria-checked='true']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='false'][aria-checked='true']+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #792dd4;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='false'][aria-checked='mixed']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='false'][aria-checked='mixed']+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #792dd4;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='true'][aria-checked='false']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='true'][aria-checked='false']+.emotion-5 .emotion-7 {
   stroke: #92103f;
   fill: #ffd3e3;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='true'][aria-checked='true']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='true'][aria-checked='true']+.emotion-5 .emotion-7 {
   stroke: #d6175c;
   fill: #d6175c;
 }
 
-.emotion-3 .emotion-6[aria-invalid="true"]+.emotion-8 {
+.emotion-0 .emotion-3[aria-invalid="true"]+.emotion-5 {
   fill: #e51963;
 }
 
-.emotion-3 .emotion-6[aria-invalid="true"]+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3[aria-invalid="true"]+.emotion-5 .emotion-7 {
   stroke: #e51963;
   fill: #ffebf2;
 }
 
-.emotion-3 label {
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
-.emotion-5 {
+.emotion-2 {
   position: absolute;
   white-space: nowrap;
   height: 1.5rem;
@@ -943,57 +907,57 @@ exports[`checkboxGroup > renders correctly with error content 1`] = `
   border-width: 0;
 }
 
-.emotion-5:not(:disabled) {
+.emotion-2:not(:disabled) {
   cursor: pointer;
 }
 
-.emotion-5:disabled {
+.emotion-2:disabled {
   cursor: not-allowed;
 }
 
-.emotion-5:not(:disabled):checked+.emotion-8,
-.emotion-5:not(:disabled)[aria-checked='mixed']+.emotion-8 {
+.emotion-2:not(:disabled):checked+.emotion-5,
+.emotion-2:not(:disabled)[aria-checked='mixed']+.emotion-5 {
   fill: #8c40ef;
 }
 
-.emotion-5:not(:disabled):checked+.emotion-8 .emotion-10,
-.emotion-5:not(:disabled)[aria-checked='mixed']+.emotion-8 .emotion-10 {
+.emotion-2:not(:disabled):checked+.emotion-5 .emotion-7,
+.emotion-2:not(:disabled)[aria-checked='mixed']+.emotion-5 .emotion-7 {
   stroke: #8c40ef;
 }
 
-.emotion-5:not(:disabled)[aria-invalid='true']+.emotion-8,
-.emotion-5:not(:disabled)[aria-invalid='mixed']+.emotion-8 {
+.emotion-2:not(:disabled)[aria-invalid='true']+.emotion-5,
+.emotion-2:not(:disabled)[aria-invalid='mixed']+.emotion-5 {
   fill: #ffebf2;
 }
 
-.emotion-5:not(:disabled)[aria-invalid='true']+.emotion-8 .emotion-10,
-.emotion-5:not(:disabled)[aria-invalid='mixed']+.emotion-8 .emotion-10 {
+.emotion-2:not(:disabled)[aria-invalid='true']+.emotion-5 .emotion-7,
+.emotion-2:not(:disabled)[aria-invalid='mixed']+.emotion-5 .emotion-7 {
   stroke: #b3144d;
 }
 
-.emotion-5:focus+.emotion-8 {
+.emotion-2:focus+.emotion-5 {
   background-color: #f1eefc;
   fill: #ffebf2;
   outline: 1px solid 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-5:focus+.emotion-8 .emotion-10 {
+.emotion-2:focus+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #e5dbfd;
 }
 
-.emotion-5[aria-invalid='true']:focus+.emotion-8 {
+.emotion-2[aria-invalid='true']:focus+.emotion-5 {
   background-color: #ffebf2;
   fill: #ffebf2;
   outline: 1px solid 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-5[aria-invalid='true']:focus+.emotion-8 .emotion-10 {
+.emotion-2[aria-invalid='true']:focus+.emotion-5 .emotion-7 {
   stroke: #92103f;
   fill: #ffd3e3;
 }
 
-.emotion-7 {
+.emotion-4 {
   border-radius: 0.25rem;
   height: 1.5rem;
   width: 1.5rem;
@@ -1001,7 +965,7 @@ exports[`checkboxGroup > renders correctly with error content 1`] = `
   min-height: 1.5rem;
 }
 
-.emotion-7 path {
+.emotion-4 path {
   fill: #ffffff;
   -webkit-transform: translate(2px, 2px);
   -moz-transform: translate(2px, 2px);
@@ -1013,12 +977,12 @@ exports[`checkboxGroup > renders correctly with error content 1`] = `
   transform: scale(0);
 }
 
-.emotion-9 {
+.emotion-6 {
   fill: #ffffff;
   stroke: #d9dadd;
 }
 
-.emotion-11 {
+.emotion-8 {
   width: 100%;
   cursor: pointer;
 }
@@ -1030,7 +994,7 @@ exports[`checkboxGroup > renders correctly with error content 1`] = `
       class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
     >
       <fieldset
-        class="emotion-0 emotion-1"
+        class="styles__19cjf6j0"
       >
         <div
           class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -1049,7 +1013,7 @@ exports[`checkboxGroup > renders correctly with error content 1`] = `
           >
             <div
               aria-disabled="false"
-              class="emotion-2 emotion-3 emotion-4"
+              class="styles__19cjf6j1 emotion-0 emotion-1"
               data-checked="false"
               data-error="true"
             >
@@ -1057,20 +1021,20 @@ exports[`checkboxGroup > renders correctly with error content 1`] = `
                 aria-checked="false"
                 aria-describedby="«ru»-hint"
                 aria-invalid="true"
-                class="emotion-5 emotion-6"
+                class="emotion-2 emotion-3"
                 id="«ru»"
                 name="Checkbox.value-1"
                 type="checkbox"
                 value="value-1"
               />
               <svg
-                class="emotion-7 emotion-8"
+                class="emotion-4 emotion-5"
                 fill="none"
                 viewBox="0 0 24 24"
               >
                 <g>
                   <rect
-                    class="emotion-9 emotion-10"
+                    class="emotion-6 emotion-7"
                     height="16"
                     rx="0.125rem"
                     stroke-width="2"
@@ -1099,7 +1063,7 @@ exports[`checkboxGroup > renders correctly with error content 1`] = `
                   style="--_4k0ekn3: 1;"
                 >
                   <label
-                    class="emotion-11 emotion-12 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_default__m4c9owi style_variant_body__m4c9owm style_disabled_false__m4c9ow1b style_undefined_compound_24__m4c9ow20 style_undefined_compound_72__m4c9ow3c"
+                    class="emotion-8 emotion-9 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_default__m4c9owi style_variant_body__m4c9owm style_disabled_false__m4c9ow1b style_undefined_compound_24__m4c9ow20 style_undefined_compound_72__m4c9ow3c"
                     for="«ru»"
                   >
                     Checkbox 1
@@ -1109,7 +1073,7 @@ exports[`checkboxGroup > renders correctly with error content 1`] = `
             </div>
             <div
               aria-disabled="false"
-              class="emotion-2 emotion-3 emotion-4"
+              class="styles__19cjf6j1 emotion-0 emotion-1"
               data-checked="false"
               data-error="true"
             >
@@ -1117,20 +1081,20 @@ exports[`checkboxGroup > renders correctly with error content 1`] = `
                 aria-checked="false"
                 aria-describedby="«r11»-hint"
                 aria-invalid="true"
-                class="emotion-5 emotion-6"
+                class="emotion-2 emotion-3"
                 id="«r11»"
                 name="Checkbox.value-2"
                 type="checkbox"
                 value="value-2"
               />
               <svg
-                class="emotion-7 emotion-8"
+                class="emotion-4 emotion-5"
                 fill="none"
                 viewBox="0 0 24 24"
               >
                 <g>
                   <rect
-                    class="emotion-9 emotion-10"
+                    class="emotion-6 emotion-7"
                     height="16"
                     rx="0.125rem"
                     stroke-width="2"
@@ -1159,7 +1123,7 @@ exports[`checkboxGroup > renders correctly with error content 1`] = `
                   style="--_4k0ekn3: 1;"
                 >
                   <label
-                    class="emotion-11 emotion-12 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_default__m4c9owi style_variant_body__m4c9owm style_disabled_false__m4c9ow1b style_undefined_compound_24__m4c9ow20 style_undefined_compound_72__m4c9ow3c"
+                    class="emotion-8 emotion-9 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_default__m4c9owi style_variant_body__m4c9owm style_disabled_false__m4c9ow1b style_undefined_compound_24__m4c9ow20 style_undefined_compound_72__m4c9ow3c"
                     for="«r11»"
                   >
                     Checkbox 2
@@ -1183,12 +1147,6 @@ exports[`checkboxGroup > renders correctly with error content 1`] = `
 exports[`checkboxGroup > renders correctly with helper content 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-.emotion-3 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1201,65 +1159,65 @@ exports[`checkboxGroup > renders correctly with helper content 1`] = `
   gap: 0.5rem;
 }
 
-.emotion-3 .eqr7bqq3 {
+.emotion-0 .eqr7bqq3 {
   cursor: pointer;
 }
 
-.emotion-3[aria-disabled='true'] {
+.emotion-0[aria-disabled='true'] {
   cursor: not-allowed;
   color: #b5b7bd;
 }
 
-.emotion-3[aria-disabled='true'] .eqr7bqq3 {
+.emotion-0[aria-disabled='true'] .eqr7bqq3 {
   cursor: not-allowed;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-5 {
   fill: #e9eaeb;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-5 .emotion-7 {
   stroke: #d9dadd;
   fill: #f3f3f4;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]:checked+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]:checked+.emotion-5 {
   fill: #ffd3e3;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]:checked+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]:checked+.emotion-5 .emotion-7 {
   stroke: #ffd3e3;
   fill: #ffd3e3;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]+.emotion-5 {
   fill: #ffebf2;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]+.emotion-5 .emotion-7 {
   stroke: #ffbbd3;
   fill: #ffebf2;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6:checked+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3:checked+.emotion-5 {
   fill: #e5dbfd;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6:checked+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3:checked+.emotion-5 .emotion-7 {
   stroke: #d8c5fc;
   fill: #d8c5fc;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-checked="mixed"]+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-checked="mixed"]+.emotion-5 {
   fill: #e5dbfd;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-checked="mixed"]+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-checked="mixed"]+.emotion-5 .emotion-7 {
   stroke: #e5dbfd;
   fill: #e5dbfd;
 }
 
-.emotion-3 .emotion-6:checked+.emotion-8 path {
+.emotion-0 .emotion-3:checked+.emotion-5 path {
   transform-origin: center;
   -webkit-transition: 200ms -webkit-transform ease-in-out;
   transition: 200ms transform ease-in-out;
@@ -1273,66 +1231,60 @@ exports[`checkboxGroup > renders correctly with helper content 1`] = `
   transform: translate(2px, 2px);
 }
 
-.emotion-3 .emotion-6:checked+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3:checked+.emotion-5 .emotion-7 {
   fill: #8c40ef;
   stroke: #8c40ef;
 }
 
-.emotion-3 .emotion-6[aria-invalid="true"]:checked+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3[aria-invalid="true"]:checked+.emotion-5 .emotion-7 {
   fill: #e51963;
   stroke: #e51963;
 }
 
-.emotion-3 .emotion-6[aria-checked="mixed"]+.emotion-8 .eqr7bqq5 {
+.emotion-0 .emotion-3[aria-checked="mixed"]+.emotion-5 .eqr7bqq5 {
   fill: #ffffff;
 }
 
-.emotion-3 .emotion-6[aria-checked="mixed"]+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3[aria-checked="mixed"]+.emotion-5 .emotion-7 {
   fill: #8c40ef;
   stroke: #8c40ef;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='false'][aria-checked='false']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='false'][aria-checked='false']+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #e5dbfd;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='false'][aria-checked='true']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='false'][aria-checked='true']+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #792dd4;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='false'][aria-checked='mixed']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='false'][aria-checked='mixed']+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #792dd4;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='true'][aria-checked='false']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='true'][aria-checked='false']+.emotion-5 .emotion-7 {
   stroke: #92103f;
   fill: #ffd3e3;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='true'][aria-checked='true']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='true'][aria-checked='true']+.emotion-5 .emotion-7 {
   stroke: #d6175c;
   fill: #d6175c;
 }
 
-.emotion-3 .emotion-6[aria-invalid="true"]+.emotion-8 {
+.emotion-0 .emotion-3[aria-invalid="true"]+.emotion-5 {
   fill: #e51963;
 }
 
-.emotion-3 .emotion-6[aria-invalid="true"]+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3[aria-invalid="true"]+.emotion-5 .emotion-7 {
   stroke: #e51963;
   fill: #ffebf2;
 }
 
-.emotion-3 label {
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
-.emotion-5 {
+.emotion-2 {
   position: absolute;
   white-space: nowrap;
   height: 1.5rem;
@@ -1341,57 +1293,57 @@ exports[`checkboxGroup > renders correctly with helper content 1`] = `
   border-width: 0;
 }
 
-.emotion-5:not(:disabled) {
+.emotion-2:not(:disabled) {
   cursor: pointer;
 }
 
-.emotion-5:disabled {
+.emotion-2:disabled {
   cursor: not-allowed;
 }
 
-.emotion-5:not(:disabled):checked+.emotion-8,
-.emotion-5:not(:disabled)[aria-checked='mixed']+.emotion-8 {
+.emotion-2:not(:disabled):checked+.emotion-5,
+.emotion-2:not(:disabled)[aria-checked='mixed']+.emotion-5 {
   fill: #8c40ef;
 }
 
-.emotion-5:not(:disabled):checked+.emotion-8 .emotion-10,
-.emotion-5:not(:disabled)[aria-checked='mixed']+.emotion-8 .emotion-10 {
+.emotion-2:not(:disabled):checked+.emotion-5 .emotion-7,
+.emotion-2:not(:disabled)[aria-checked='mixed']+.emotion-5 .emotion-7 {
   stroke: #8c40ef;
 }
 
-.emotion-5:not(:disabled)[aria-invalid='true']+.emotion-8,
-.emotion-5:not(:disabled)[aria-invalid='mixed']+.emotion-8 {
+.emotion-2:not(:disabled)[aria-invalid='true']+.emotion-5,
+.emotion-2:not(:disabled)[aria-invalid='mixed']+.emotion-5 {
   fill: #ffebf2;
 }
 
-.emotion-5:not(:disabled)[aria-invalid='true']+.emotion-8 .emotion-10,
-.emotion-5:not(:disabled)[aria-invalid='mixed']+.emotion-8 .emotion-10 {
+.emotion-2:not(:disabled)[aria-invalid='true']+.emotion-5 .emotion-7,
+.emotion-2:not(:disabled)[aria-invalid='mixed']+.emotion-5 .emotion-7 {
   stroke: #b3144d;
 }
 
-.emotion-5:focus+.emotion-8 {
+.emotion-2:focus+.emotion-5 {
   background-color: #f1eefc;
   fill: #ffebf2;
   outline: 1px solid 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-5:focus+.emotion-8 .emotion-10 {
+.emotion-2:focus+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #e5dbfd;
 }
 
-.emotion-5[aria-invalid='true']:focus+.emotion-8 {
+.emotion-2[aria-invalid='true']:focus+.emotion-5 {
   background-color: #ffebf2;
   fill: #ffebf2;
   outline: 1px solid 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-5[aria-invalid='true']:focus+.emotion-8 .emotion-10 {
+.emotion-2[aria-invalid='true']:focus+.emotion-5 .emotion-7 {
   stroke: #92103f;
   fill: #ffd3e3;
 }
 
-.emotion-7 {
+.emotion-4 {
   border-radius: 0.25rem;
   height: 1.5rem;
   width: 1.5rem;
@@ -1399,7 +1351,7 @@ exports[`checkboxGroup > renders correctly with helper content 1`] = `
   min-height: 1.5rem;
 }
 
-.emotion-7 path {
+.emotion-4 path {
   fill: #ffffff;
   -webkit-transform: translate(2px, 2px);
   -moz-transform: translate(2px, 2px);
@@ -1411,12 +1363,12 @@ exports[`checkboxGroup > renders correctly with helper content 1`] = `
   transform: scale(0);
 }
 
-.emotion-9 {
+.emotion-6 {
   fill: #ffffff;
   stroke: #d9dadd;
 }
 
-.emotion-11 {
+.emotion-8 {
   width: 100%;
   cursor: pointer;
 }
@@ -1428,7 +1380,7 @@ exports[`checkboxGroup > renders correctly with helper content 1`] = `
       class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
     >
       <fieldset
-        class="emotion-0 emotion-1"
+        class="styles__19cjf6j0"
       >
         <div
           class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -1447,27 +1399,27 @@ exports[`checkboxGroup > renders correctly with helper content 1`] = `
           >
             <div
               aria-disabled="false"
-              class="emotion-2 emotion-3 emotion-4"
+              class="styles__19cjf6j1 emotion-0 emotion-1"
               data-checked="false"
               data-error="false"
             >
               <input
                 aria-checked="false"
                 aria-invalid="false"
-                class="emotion-5 emotion-6"
+                class="emotion-2 emotion-3"
                 id="«rm»"
                 name="Checkbox.value-1"
                 type="checkbox"
                 value="value-1"
               />
               <svg
-                class="emotion-7 emotion-8"
+                class="emotion-4 emotion-5"
                 fill="none"
                 viewBox="0 0 24 24"
               >
                 <g>
                   <rect
-                    class="emotion-9 emotion-10"
+                    class="emotion-6 emotion-7"
                     height="16"
                     rx="0.125rem"
                     stroke-width="2"
@@ -1496,7 +1448,7 @@ exports[`checkboxGroup > renders correctly with helper content 1`] = `
                   style="--_4k0ekn3: 1;"
                 >
                   <label
-                    class="emotion-11 emotion-12 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_default__m4c9owi style_variant_body__m4c9owm style_disabled_false__m4c9ow1b style_undefined_compound_24__m4c9ow20 style_undefined_compound_72__m4c9ow3c"
+                    class="emotion-8 emotion-9 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_default__m4c9owi style_variant_body__m4c9owm style_disabled_false__m4c9ow1b style_undefined_compound_24__m4c9ow20 style_undefined_compound_72__m4c9ow3c"
                     for="«rm»"
                   >
                     Checkbox 1
@@ -1506,27 +1458,27 @@ exports[`checkboxGroup > renders correctly with helper content 1`] = `
             </div>
             <div
               aria-disabled="false"
-              class="emotion-2 emotion-3 emotion-4"
+              class="styles__19cjf6j1 emotion-0 emotion-1"
               data-checked="false"
               data-error="false"
             >
               <input
                 aria-checked="false"
                 aria-invalid="false"
-                class="emotion-5 emotion-6"
+                class="emotion-2 emotion-3"
                 id="«rp»"
                 name="Checkbox.value-2"
                 type="checkbox"
                 value="value-2"
               />
               <svg
-                class="emotion-7 emotion-8"
+                class="emotion-4 emotion-5"
                 fill="none"
                 viewBox="0 0 24 24"
               >
                 <g>
                   <rect
-                    class="emotion-9 emotion-10"
+                    class="emotion-6 emotion-7"
                     height="16"
                     rx="0.125rem"
                     stroke-width="2"
@@ -1555,7 +1507,7 @@ exports[`checkboxGroup > renders correctly with helper content 1`] = `
                   style="--_4k0ekn3: 1;"
                 >
                   <label
-                    class="emotion-11 emotion-12 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_default__m4c9owi style_variant_body__m4c9owm style_disabled_false__m4c9ow1b style_undefined_compound_24__m4c9ow20 style_undefined_compound_72__m4c9ow3c"
+                    class="emotion-8 emotion-9 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_default__m4c9owi style_variant_body__m4c9owm style_disabled_false__m4c9ow1b style_undefined_compound_24__m4c9ow20 style_undefined_compound_72__m4c9ow3c"
                     for="«rp»"
                   >
                     Checkbox 2
@@ -1579,12 +1531,6 @@ exports[`checkboxGroup > renders correctly with helper content 1`] = `
 exports[`checkboxGroup > renders correctly with no CheckboxGroup.Checkbox name 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-.emotion-3 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1597,65 +1543,65 @@ exports[`checkboxGroup > renders correctly with no CheckboxGroup.Checkbox name 1
   gap: 0.5rem;
 }
 
-.emotion-3 .eqr7bqq3 {
+.emotion-0 .eqr7bqq3 {
   cursor: pointer;
 }
 
-.emotion-3[aria-disabled='true'] {
+.emotion-0[aria-disabled='true'] {
   cursor: not-allowed;
   color: #b5b7bd;
 }
 
-.emotion-3[aria-disabled='true'] .eqr7bqq3 {
+.emotion-0[aria-disabled='true'] .eqr7bqq3 {
   cursor: not-allowed;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-5 {
   fill: #e9eaeb;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-5 .emotion-7 {
   stroke: #d9dadd;
   fill: #f3f3f4;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]:checked+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]:checked+.emotion-5 {
   fill: #ffd3e3;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]:checked+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]:checked+.emotion-5 .emotion-7 {
   stroke: #ffd3e3;
   fill: #ffd3e3;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]+.emotion-5 {
   fill: #ffebf2;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]+.emotion-5 .emotion-7 {
   stroke: #ffbbd3;
   fill: #ffebf2;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6:checked+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3:checked+.emotion-5 {
   fill: #e5dbfd;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6:checked+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3:checked+.emotion-5 .emotion-7 {
   stroke: #d8c5fc;
   fill: #d8c5fc;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-checked="mixed"]+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-checked="mixed"]+.emotion-5 {
   fill: #e5dbfd;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-checked="mixed"]+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-checked="mixed"]+.emotion-5 .emotion-7 {
   stroke: #e5dbfd;
   fill: #e5dbfd;
 }
 
-.emotion-3 .emotion-6:checked+.emotion-8 path {
+.emotion-0 .emotion-3:checked+.emotion-5 path {
   transform-origin: center;
   -webkit-transition: 200ms -webkit-transform ease-in-out;
   transition: 200ms transform ease-in-out;
@@ -1669,66 +1615,60 @@ exports[`checkboxGroup > renders correctly with no CheckboxGroup.Checkbox name 1
   transform: translate(2px, 2px);
 }
 
-.emotion-3 .emotion-6:checked+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3:checked+.emotion-5 .emotion-7 {
   fill: #8c40ef;
   stroke: #8c40ef;
 }
 
-.emotion-3 .emotion-6[aria-invalid="true"]:checked+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3[aria-invalid="true"]:checked+.emotion-5 .emotion-7 {
   fill: #e51963;
   stroke: #e51963;
 }
 
-.emotion-3 .emotion-6[aria-checked="mixed"]+.emotion-8 .eqr7bqq5 {
+.emotion-0 .emotion-3[aria-checked="mixed"]+.emotion-5 .eqr7bqq5 {
   fill: #ffffff;
 }
 
-.emotion-3 .emotion-6[aria-checked="mixed"]+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3[aria-checked="mixed"]+.emotion-5 .emotion-7 {
   fill: #8c40ef;
   stroke: #8c40ef;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='false'][aria-checked='false']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='false'][aria-checked='false']+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #e5dbfd;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='false'][aria-checked='true']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='false'][aria-checked='true']+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #792dd4;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='false'][aria-checked='mixed']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='false'][aria-checked='mixed']+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #792dd4;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='true'][aria-checked='false']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='true'][aria-checked='false']+.emotion-5 .emotion-7 {
   stroke: #92103f;
   fill: #ffd3e3;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='true'][aria-checked='true']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='true'][aria-checked='true']+.emotion-5 .emotion-7 {
   stroke: #d6175c;
   fill: #d6175c;
 }
 
-.emotion-3 .emotion-6[aria-invalid="true"]+.emotion-8 {
+.emotion-0 .emotion-3[aria-invalid="true"]+.emotion-5 {
   fill: #e51963;
 }
 
-.emotion-3 .emotion-6[aria-invalid="true"]+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3[aria-invalid="true"]+.emotion-5 .emotion-7 {
   stroke: #e51963;
   fill: #ffebf2;
 }
 
-.emotion-3 label {
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
-.emotion-5 {
+.emotion-2 {
   position: absolute;
   white-space: nowrap;
   height: 1.5rem;
@@ -1737,57 +1677,57 @@ exports[`checkboxGroup > renders correctly with no CheckboxGroup.Checkbox name 1
   border-width: 0;
 }
 
-.emotion-5:not(:disabled) {
+.emotion-2:not(:disabled) {
   cursor: pointer;
 }
 
-.emotion-5:disabled {
+.emotion-2:disabled {
   cursor: not-allowed;
 }
 
-.emotion-5:not(:disabled):checked+.emotion-8,
-.emotion-5:not(:disabled)[aria-checked='mixed']+.emotion-8 {
+.emotion-2:not(:disabled):checked+.emotion-5,
+.emotion-2:not(:disabled)[aria-checked='mixed']+.emotion-5 {
   fill: #8c40ef;
 }
 
-.emotion-5:not(:disabled):checked+.emotion-8 .emotion-10,
-.emotion-5:not(:disabled)[aria-checked='mixed']+.emotion-8 .emotion-10 {
+.emotion-2:not(:disabled):checked+.emotion-5 .emotion-7,
+.emotion-2:not(:disabled)[aria-checked='mixed']+.emotion-5 .emotion-7 {
   stroke: #8c40ef;
 }
 
-.emotion-5:not(:disabled)[aria-invalid='true']+.emotion-8,
-.emotion-5:not(:disabled)[aria-invalid='mixed']+.emotion-8 {
+.emotion-2:not(:disabled)[aria-invalid='true']+.emotion-5,
+.emotion-2:not(:disabled)[aria-invalid='mixed']+.emotion-5 {
   fill: #ffebf2;
 }
 
-.emotion-5:not(:disabled)[aria-invalid='true']+.emotion-8 .emotion-10,
-.emotion-5:not(:disabled)[aria-invalid='mixed']+.emotion-8 .emotion-10 {
+.emotion-2:not(:disabled)[aria-invalid='true']+.emotion-5 .emotion-7,
+.emotion-2:not(:disabled)[aria-invalid='mixed']+.emotion-5 .emotion-7 {
   stroke: #b3144d;
 }
 
-.emotion-5:focus+.emotion-8 {
+.emotion-2:focus+.emotion-5 {
   background-color: #f1eefc;
   fill: #ffebf2;
   outline: 1px solid 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-5:focus+.emotion-8 .emotion-10 {
+.emotion-2:focus+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #e5dbfd;
 }
 
-.emotion-5[aria-invalid='true']:focus+.emotion-8 {
+.emotion-2[aria-invalid='true']:focus+.emotion-5 {
   background-color: #ffebf2;
   fill: #ffebf2;
   outline: 1px solid 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-5[aria-invalid='true']:focus+.emotion-8 .emotion-10 {
+.emotion-2[aria-invalid='true']:focus+.emotion-5 .emotion-7 {
   stroke: #92103f;
   fill: #ffd3e3;
 }
 
-.emotion-7 {
+.emotion-4 {
   border-radius: 0.25rem;
   height: 1.5rem;
   width: 1.5rem;
@@ -1795,7 +1735,7 @@ exports[`checkboxGroup > renders correctly with no CheckboxGroup.Checkbox name 1
   min-height: 1.5rem;
 }
 
-.emotion-7 path {
+.emotion-4 path {
   fill: #ffffff;
   -webkit-transform: translate(2px, 2px);
   -moz-transform: translate(2px, 2px);
@@ -1807,12 +1747,12 @@ exports[`checkboxGroup > renders correctly with no CheckboxGroup.Checkbox name 1
   transform: scale(0);
 }
 
-.emotion-9 {
+.emotion-6 {
   fill: #ffffff;
   stroke: #d9dadd;
 }
 
-.emotion-11 {
+.emotion-8 {
   width: 100%;
   cursor: pointer;
 }
@@ -1824,7 +1764,7 @@ exports[`checkboxGroup > renders correctly with no CheckboxGroup.Checkbox name 1
       class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
     >
       <fieldset
-        class="emotion-0 emotion-1"
+        class="styles__19cjf6j0"
       >
         <div
           class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -1843,27 +1783,27 @@ exports[`checkboxGroup > renders correctly with no CheckboxGroup.Checkbox name 1
           >
             <div
               aria-disabled="false"
-              class="emotion-2 emotion-3 emotion-4"
+              class="styles__19cjf6j1 emotion-0 emotion-1"
               data-checked="false"
               data-error="false"
             >
               <input
                 aria-checked="false"
                 aria-invalid="false"
-                class="emotion-5 emotion-6"
+                class="emotion-2 emotion-3"
                 id="«r8»"
                 name="Checkbox."
                 type="checkbox"
                 value="value-1"
               />
               <svg
-                class="emotion-7 emotion-8"
+                class="emotion-4 emotion-5"
                 fill="none"
                 viewBox="0 0 24 24"
               >
                 <g>
                   <rect
-                    class="emotion-9 emotion-10"
+                    class="emotion-6 emotion-7"
                     height="16"
                     rx="0.125rem"
                     stroke-width="2"
@@ -1892,7 +1832,7 @@ exports[`checkboxGroup > renders correctly with no CheckboxGroup.Checkbox name 1
                   style="--_4k0ekn3: 1;"
                 >
                   <label
-                    class="emotion-11 emotion-12 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_default__m4c9owi style_variant_body__m4c9owm style_disabled_false__m4c9ow1b style_undefined_compound_24__m4c9ow20 style_undefined_compound_72__m4c9ow3c"
+                    class="emotion-8 emotion-9 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_default__m4c9owi style_variant_body__m4c9owm style_disabled_false__m4c9ow1b style_undefined_compound_24__m4c9ow20 style_undefined_compound_72__m4c9ow3c"
                     for="«r8»"
                   >
                     Checkbox 1
@@ -1902,27 +1842,27 @@ exports[`checkboxGroup > renders correctly with no CheckboxGroup.Checkbox name 1
             </div>
             <div
               aria-disabled="false"
-              class="emotion-2 emotion-3 emotion-4"
+              class="styles__19cjf6j1 emotion-0 emotion-1"
               data-checked="false"
               data-error="false"
             >
               <input
                 aria-checked="false"
                 aria-invalid="false"
-                class="emotion-5 emotion-6"
+                class="emotion-2 emotion-3"
                 id="«rb»"
                 name="Checkbox."
                 type="checkbox"
                 value="value-2"
               />
               <svg
-                class="emotion-7 emotion-8"
+                class="emotion-4 emotion-5"
                 fill="none"
                 viewBox="0 0 24 24"
               >
                 <g>
                   <rect
-                    class="emotion-9 emotion-10"
+                    class="emotion-6 emotion-7"
                     height="16"
                     rx="0.125rem"
                     stroke-width="2"
@@ -1951,7 +1891,7 @@ exports[`checkboxGroup > renders correctly with no CheckboxGroup.Checkbox name 1
                   style="--_4k0ekn3: 1;"
                 >
                   <label
-                    class="emotion-11 emotion-12 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_default__m4c9owi style_variant_body__m4c9owm style_disabled_false__m4c9ow1b style_undefined_compound_24__m4c9ow20 style_undefined_compound_72__m4c9ow3c"
+                    class="emotion-8 emotion-9 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_default__m4c9owi style_variant_body__m4c9owm style_disabled_false__m4c9ow1b style_undefined_compound_24__m4c9ow20 style_undefined_compound_72__m4c9ow3c"
                     for="«rb»"
                   >
                     Checkbox 2
@@ -1970,12 +1910,6 @@ exports[`checkboxGroup > renders correctly with no CheckboxGroup.Checkbox name 1
 exports[`checkboxGroup > renders correctly with required prop 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-.emotion-3 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1988,65 +1922,65 @@ exports[`checkboxGroup > renders correctly with required prop 1`] = `
   gap: 0.5rem;
 }
 
-.emotion-3 .eqr7bqq3 {
+.emotion-0 .eqr7bqq3 {
   cursor: pointer;
 }
 
-.emotion-3[aria-disabled='true'] {
+.emotion-0[aria-disabled='true'] {
   cursor: not-allowed;
   color: #b5b7bd;
 }
 
-.emotion-3[aria-disabled='true'] .eqr7bqq3 {
+.emotion-0[aria-disabled='true'] .eqr7bqq3 {
   cursor: not-allowed;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-5 {
   fill: #e9eaeb;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-5 .emotion-7 {
   stroke: #d9dadd;
   fill: #f3f3f4;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]:checked+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]:checked+.emotion-5 {
   fill: #ffd3e3;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]:checked+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]:checked+.emotion-5 .emotion-7 {
   stroke: #ffd3e3;
   fill: #ffd3e3;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]+.emotion-5 {
   fill: #ffebf2;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-invalid="true"]+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-invalid="true"]+.emotion-5 .emotion-7 {
   stroke: #ffbbd3;
   fill: #ffebf2;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6:checked+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3:checked+.emotion-5 {
   fill: #e5dbfd;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6:checked+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3:checked+.emotion-5 .emotion-7 {
   stroke: #d8c5fc;
   fill: #d8c5fc;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-checked="mixed"]+.emotion-8 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-checked="mixed"]+.emotion-5 {
   fill: #e5dbfd;
 }
 
-.emotion-3[aria-disabled='true'] .emotion-6[aria-checked="mixed"]+.emotion-8 .emotion-10 {
+.emotion-0[aria-disabled='true'] .emotion-3[aria-checked="mixed"]+.emotion-5 .emotion-7 {
   stroke: #e5dbfd;
   fill: #e5dbfd;
 }
 
-.emotion-3 .emotion-6:checked+.emotion-8 path {
+.emotion-0 .emotion-3:checked+.emotion-5 path {
   transform-origin: center;
   -webkit-transition: 200ms -webkit-transform ease-in-out;
   transition: 200ms transform ease-in-out;
@@ -2060,66 +1994,60 @@ exports[`checkboxGroup > renders correctly with required prop 1`] = `
   transform: translate(2px, 2px);
 }
 
-.emotion-3 .emotion-6:checked+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3:checked+.emotion-5 .emotion-7 {
   fill: #8c40ef;
   stroke: #8c40ef;
 }
 
-.emotion-3 .emotion-6[aria-invalid="true"]:checked+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3[aria-invalid="true"]:checked+.emotion-5 .emotion-7 {
   fill: #e51963;
   stroke: #e51963;
 }
 
-.emotion-3 .emotion-6[aria-checked="mixed"]+.emotion-8 .eqr7bqq5 {
+.emotion-0 .emotion-3[aria-checked="mixed"]+.emotion-5 .eqr7bqq5 {
   fill: #ffffff;
 }
 
-.emotion-3 .emotion-6[aria-checked="mixed"]+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3[aria-checked="mixed"]+.emotion-5 .emotion-7 {
   fill: #8c40ef;
   stroke: #8c40ef;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='false'][aria-checked='false']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='false'][aria-checked='false']+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #e5dbfd;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='false'][aria-checked='true']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='false'][aria-checked='true']+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #792dd4;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='false'][aria-checked='mixed']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='false'][aria-checked='mixed']+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #792dd4;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='true'][aria-checked='false']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='true'][aria-checked='false']+.emotion-5 .emotion-7 {
   stroke: #92103f;
   fill: #ffd3e3;
 }
 
-.emotion-3:hover[aria-disabled='false'] .emotion-6[aria-invalid='true'][aria-checked='true']+.emotion-8 .emotion-10 {
+.emotion-0:hover[aria-disabled='false'] .emotion-3[aria-invalid='true'][aria-checked='true']+.emotion-5 .emotion-7 {
   stroke: #d6175c;
   fill: #d6175c;
 }
 
-.emotion-3 .emotion-6[aria-invalid="true"]+.emotion-8 {
+.emotion-0 .emotion-3[aria-invalid="true"]+.emotion-5 {
   fill: #e51963;
 }
 
-.emotion-3 .emotion-6[aria-invalid="true"]+.emotion-8 .emotion-10 {
+.emotion-0 .emotion-3[aria-invalid="true"]+.emotion-5 .emotion-7 {
   stroke: #e51963;
   fill: #ffebf2;
 }
 
-.emotion-3 label {
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
-.emotion-5 {
+.emotion-2 {
   position: absolute;
   white-space: nowrap;
   height: 1.5rem;
@@ -2128,57 +2056,57 @@ exports[`checkboxGroup > renders correctly with required prop 1`] = `
   border-width: 0;
 }
 
-.emotion-5:not(:disabled) {
+.emotion-2:not(:disabled) {
   cursor: pointer;
 }
 
-.emotion-5:disabled {
+.emotion-2:disabled {
   cursor: not-allowed;
 }
 
-.emotion-5:not(:disabled):checked+.emotion-8,
-.emotion-5:not(:disabled)[aria-checked='mixed']+.emotion-8 {
+.emotion-2:not(:disabled):checked+.emotion-5,
+.emotion-2:not(:disabled)[aria-checked='mixed']+.emotion-5 {
   fill: #8c40ef;
 }
 
-.emotion-5:not(:disabled):checked+.emotion-8 .emotion-10,
-.emotion-5:not(:disabled)[aria-checked='mixed']+.emotion-8 .emotion-10 {
+.emotion-2:not(:disabled):checked+.emotion-5 .emotion-7,
+.emotion-2:not(:disabled)[aria-checked='mixed']+.emotion-5 .emotion-7 {
   stroke: #8c40ef;
 }
 
-.emotion-5:not(:disabled)[aria-invalid='true']+.emotion-8,
-.emotion-5:not(:disabled)[aria-invalid='mixed']+.emotion-8 {
+.emotion-2:not(:disabled)[aria-invalid='true']+.emotion-5,
+.emotion-2:not(:disabled)[aria-invalid='mixed']+.emotion-5 {
   fill: #ffebf2;
 }
 
-.emotion-5:not(:disabled)[aria-invalid='true']+.emotion-8 .emotion-10,
-.emotion-5:not(:disabled)[aria-invalid='mixed']+.emotion-8 .emotion-10 {
+.emotion-2:not(:disabled)[aria-invalid='true']+.emotion-5 .emotion-7,
+.emotion-2:not(:disabled)[aria-invalid='mixed']+.emotion-5 .emotion-7 {
   stroke: #b3144d;
 }
 
-.emotion-5:focus+.emotion-8 {
+.emotion-2:focus+.emotion-5 {
   background-color: #f1eefc;
   fill: #ffebf2;
   outline: 1px solid 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-5:focus+.emotion-8 .emotion-10 {
+.emotion-2:focus+.emotion-5 .emotion-7 {
   stroke: #792dd4;
   fill: #e5dbfd;
 }
 
-.emotion-5[aria-invalid='true']:focus+.emotion-8 {
+.emotion-2[aria-invalid='true']:focus+.emotion-5 {
   background-color: #ffebf2;
   fill: #ffebf2;
   outline: 1px solid 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-5[aria-invalid='true']:focus+.emotion-8 .emotion-10 {
+.emotion-2[aria-invalid='true']:focus+.emotion-5 .emotion-7 {
   stroke: #92103f;
   fill: #ffd3e3;
 }
 
-.emotion-7 {
+.emotion-4 {
   border-radius: 0.25rem;
   height: 1.5rem;
   width: 1.5rem;
@@ -2186,7 +2114,7 @@ exports[`checkboxGroup > renders correctly with required prop 1`] = `
   min-height: 1.5rem;
 }
 
-.emotion-7 path {
+.emotion-4 path {
   fill: #ffffff;
   -webkit-transform: translate(2px, 2px);
   -moz-transform: translate(2px, 2px);
@@ -2198,12 +2126,12 @@ exports[`checkboxGroup > renders correctly with required prop 1`] = `
   transform: scale(0);
 }
 
-.emotion-9 {
+.emotion-6 {
   fill: #ffffff;
   stroke: #d9dadd;
 }
 
-.emotion-11 {
+.emotion-8 {
   width: 100%;
   cursor: pointer;
 }
@@ -2215,7 +2143,7 @@ exports[`checkboxGroup > renders correctly with required prop 1`] = `
       class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
     >
       <fieldset
-        class="emotion-0 emotion-1"
+        class="styles__19cjf6j0"
       >
         <div
           class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -2243,27 +2171,27 @@ exports[`checkboxGroup > renders correctly with required prop 1`] = `
           >
             <div
               aria-disabled="false"
-              class="emotion-2 emotion-3 emotion-4"
+              class="styles__19cjf6j1 emotion-0 emotion-1"
               data-checked="false"
               data-error="false"
             >
               <input
                 aria-checked="false"
                 aria-invalid="false"
-                class="emotion-5 emotion-6"
+                class="emotion-2 emotion-3"
                 id="«r17»"
                 name="Checkbox.value-1"
                 type="checkbox"
                 value="value-1"
               />
               <svg
-                class="emotion-7 emotion-8"
+                class="emotion-4 emotion-5"
                 fill="none"
                 viewBox="0 0 24 24"
               >
                 <g>
                   <rect
-                    class="emotion-9 emotion-10"
+                    class="emotion-6 emotion-7"
                     height="16"
                     rx="0.125rem"
                     stroke-width="2"
@@ -2292,7 +2220,7 @@ exports[`checkboxGroup > renders correctly with required prop 1`] = `
                   style="--_4k0ekn3: 1;"
                 >
                   <label
-                    class="emotion-11 emotion-12 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_default__m4c9owi style_variant_body__m4c9owm style_disabled_false__m4c9ow1b style_undefined_compound_24__m4c9ow20 style_undefined_compound_72__m4c9ow3c"
+                    class="emotion-8 emotion-9 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_default__m4c9owi style_variant_body__m4c9owm style_disabled_false__m4c9ow1b style_undefined_compound_24__m4c9ow20 style_undefined_compound_72__m4c9ow3c"
                     for="«r17»"
                   >
                     Checkbox 1
@@ -2302,27 +2230,27 @@ exports[`checkboxGroup > renders correctly with required prop 1`] = `
             </div>
             <div
               aria-disabled="false"
-              class="emotion-2 emotion-3 emotion-4"
+              class="styles__19cjf6j1 emotion-0 emotion-1"
               data-checked="false"
               data-error="false"
             >
               <input
                 aria-checked="false"
                 aria-invalid="false"
-                class="emotion-5 emotion-6"
+                class="emotion-2 emotion-3"
                 id="«r1a»"
                 name="Checkbox.value-2"
                 type="checkbox"
                 value="value-2"
               />
               <svg
-                class="emotion-7 emotion-8"
+                class="emotion-4 emotion-5"
                 fill="none"
                 viewBox="0 0 24 24"
               >
                 <g>
                   <rect
-                    class="emotion-9 emotion-10"
+                    class="emotion-6 emotion-7"
                     height="16"
                     rx="0.125rem"
                     stroke-width="2"
@@ -2351,7 +2279,7 @@ exports[`checkboxGroup > renders correctly with required prop 1`] = `
                   style="--_4k0ekn3: 1;"
                 >
                   <label
-                    class="emotion-11 emotion-12 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_default__m4c9owi style_variant_body__m4c9owm style_disabled_false__m4c9ow1b style_undefined_compound_24__m4c9ow20 style_undefined_compound_72__m4c9ow3c"
+                    class="emotion-8 emotion-9 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_default__m4c9owi style_variant_body__m4c9owm style_disabled_false__m4c9ow1b style_undefined_compound_24__m4c9ow20 style_undefined_compound_72__m4c9ow3c"
                     for="«r1a»"
                   >
                     Checkbox 2
diff --git a/packages/ui/src/components/CheckboxGroup/index.tsx b/packages/ui/src/components/CheckboxGroup/index.tsx
index 643a5143fa..b740805e18 100644
--- a/packages/ui/src/components/CheckboxGroup/index.tsx
+++ b/packages/ui/src/components/CheckboxGroup/index.tsx
@@ -1,12 +1,12 @@
 'use client'
 
-import styled from '@emotion/styled'
 import type { ComponentProps, InputHTMLAttributes, ReactNode } from 'react'
 import { createContext, useContext, useMemo } from 'react'
 import { Checkbox } from '../Checkbox'
 import { Label } from '../Label'
 import { Stack } from '../Stack'
 import { Text } from '../Text'
+import { checkbox, fieldset } from './styles.css'
 
 type CheckboxGroupContextType = {
   groupName: string
@@ -19,12 +19,6 @@ const CheckboxGroupContext = createContext<
   CheckboxGroupContextType | undefined
 >(undefined)
 
-const StyledCheckbox = styled(Checkbox)`
-  label {
-    width: fit-content;
-  }
-`
-
 type CheckboxGroupCheckboxProps = Omit<
   ComponentProps<typeof Checkbox>,
   'onChange' | 'checked'
@@ -61,10 +55,10 @@ export const CheckboxGroupCheckbox = ({
   const checkboxValue = `${value}`
 
   return (
-    <StyledCheckbox
+    <Checkbox
       autoFocus={autoFocus}
       checked={groupValues?.includes(checkboxValue)}
-      className={className}
+      className={`${className ? `${className} ` : ''}${checkbox}`}
       data-testid={dataTestId}
       disabled={disabled}
       error={error || errorContext}
@@ -78,16 +72,10 @@ export const CheckboxGroupCheckbox = ({
       value={checkboxValue}
     >
       {children}
-    </StyledCheckbox>
+    </Checkbox>
   )
 }
 
-const FieldSet = styled.fieldset`
-  border: none;
-  padding: 0;
-  margin: 0;
-`
-
 type CheckboxGroupProps = {
   legend?: string
   legendDescription?: ReactNode
@@ -133,7 +121,7 @@ export const CheckboxGroup = ({
   return (
     <CheckboxGroupContext.Provider value={contextValue}>
       <Stack gap={1}>
-        <FieldSet className={className}>
+        <fieldset className={`${className ? `${className} ` : ''}${fieldset}`}>
           <Stack gap={1.5}>
             {legend || description ? (
               <Stack gap={0.5}>
@@ -162,7 +150,7 @@ export const CheckboxGroup = ({
               {children}
             </Stack>
           </Stack>
-        </FieldSet>
+        </fieldset>
         {helper ? (
           <Text
             as="span"
diff --git a/packages/ui/src/components/CheckboxGroup/styles.css.ts b/packages/ui/src/components/CheckboxGroup/styles.css.ts
new file mode 100644
index 0000000000..1be9fa8fdb
--- /dev/null
+++ b/packages/ui/src/components/CheckboxGroup/styles.css.ts
@@ -0,0 +1,13 @@
+import { globalStyle, style } from '@vanilla-extract/css'
+
+export const fieldset = style({
+  border: 'none',
+  padding: 0,
+  margin: 0,
+})
+
+export const checkbox = style({})
+
+globalStyle(`${checkbox} label`, {
+  width: 'fit-content',
+})
diff --git a/packages/ui/src/components/RadioGroup/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/RadioGroup/__tests__/__snapshots__/index.test.tsx.snap
index 35f1938f24..e9da02e0fd 100644
--- a/packages/ui/src/components/RadioGroup/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/RadioGroup/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,20 +2,14 @@
 
 exports[`radioGroup > renders correctly 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <div
       class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
     >
       <fieldset
-        class="emotion-0 emotion-1"
+        class="styles__1ec5h6m0"
       >
         <div
           class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -145,20 +139,14 @@ exports[`radioGroup > renders correctly 1`] = `
 
 exports[`radioGroup > renders correctly with direction row 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <div
       class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
     >
       <fieldset
-        class="emotion-0 emotion-1"
+        class="styles__1ec5h6m0"
       >
         <div
           class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -288,20 +276,14 @@ exports[`radioGroup > renders correctly with direction row 1`] = `
 
 exports[`radioGroup > renders correctly with error content 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <div
       class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
     >
       <fieldset
-        class="emotion-0 emotion-1"
+        class="styles__1ec5h6m0"
       >
         <div
           class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -436,20 +418,14 @@ exports[`radioGroup > renders correctly with error content 1`] = `
 
 exports[`radioGroup > renders correctly with helper content 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <div
       class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
     >
       <fieldset
-        class="emotion-0 emotion-1"
+        class="styles__1ec5h6m0"
       >
         <div
           class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
diff --git a/packages/ui/src/components/RadioGroup/index.tsx b/packages/ui/src/components/RadioGroup/index.tsx
index 372b99668a..28a808980d 100644
--- a/packages/ui/src/components/RadioGroup/index.tsx
+++ b/packages/ui/src/components/RadioGroup/index.tsx
@@ -1,12 +1,12 @@
 'use client'
 
-import styled from '@emotion/styled'
 import type { ComponentProps, InputHTMLAttributes, ReactNode } from 'react'
 import { createContext, useContext, useMemo } from 'react'
 import { Label } from '../Label'
 import { Radio } from '../Radio'
 import { Stack } from '../Stack'
 import { Text } from '../Text'
+import { fieldset } from './styles.css'
 
 type RadioGroupContextType = {
   groupName?: string
@@ -66,12 +66,6 @@ const RadioGroupRadio = ({
   )
 }
 
-const FieldSet = styled.fieldset`
-  border: none;
-  padding: 0;
-  margin: 0;
-`
-
 type RadioGroupProps = {
   legend?: string
   legendDescription?: ReactNode
@@ -116,7 +110,7 @@ export const RadioGroup = ({
   return (
     <RadioGroupContext.Provider value={contextValue}>
       <Stack gap={1}>
-        <FieldSet className={className}>
+        <fieldset className={`${className ? `${className} ` : ''}${fieldset}`}>
           <Stack gap={1.5}>
             {legend || description ? (
               <Stack gap={0.5}>
@@ -149,7 +143,7 @@ export const RadioGroup = ({
               {children}
             </Stack>
           </Stack>
-        </FieldSet>
+        </fieldset>
         {helper ? (
           <Text
             as="span"
diff --git a/packages/ui/src/components/RadioGroup/styles.css.ts b/packages/ui/src/components/RadioGroup/styles.css.ts
new file mode 100644
index 0000000000..ac49c1e34a
--- /dev/null
+++ b/packages/ui/src/components/RadioGroup/styles.css.ts
@@ -0,0 +1,7 @@
+import { style } from '@vanilla-extract/css'
+
+export const fieldset = style({
+  border: 'none',
+  padding: 0,
+  margin: 0,
+})
diff --git a/packages/ui/src/components/ToggleGroup/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/ToggleGroup/__tests__/__snapshots__/index.test.tsx.snap
index 254d94d175..c2bc57d5d9 100644
--- a/packages/ui/src/components/ToggleGroup/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/ToggleGroup/__tests__/__snapshots__/index.test.tsx.snap
@@ -3,12 +3,6 @@
 exports[`toggleGroup > renders correctly 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-.emotion-2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -27,16 +21,16 @@ exports[`toggleGroup > renders correctly 1`] = `
   flex-direction: row-reverse;
 }
 
-.emotion-2:active .emotion-5[data-disabled='false']:after {
+.emotion-0:active .emotion-3[data-disabled='false']:after {
   width: calc(1rem * 1.3775);
 }
 
-.emotion-2[aria-disabled="true"] {
+.emotion-0[aria-disabled="true"] {
   cursor: not-allowed;
   color: #b5b7bd;
 }
 
-.emotion-4 {
+.emotion-2 {
   box-sizing: content-box;
   outline: none;
   overflow: hidden;
@@ -58,11 +52,11 @@ exports[`toggleGroup > renders correctly 1`] = `
   height: 1.5rem;
 }
 
-.emotion-4:hover {
+.emotion-2:hover {
   background-color: #d9dadd;
 }
 
-.emotion-4:after {
+.emotion-2:after {
   content: "";
   position: absolute;
   top: calc(1.5rem / 2 - 1rem / 2);
@@ -75,25 +69,25 @@ exports[`toggleGroup > renders correctly 1`] = `
   transition: all 300ms;
 }
 
-.emotion-4:focus-within,
-.emotion-4:focus {
+.emotion-2:focus-within,
+.emotion-2:focus {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-4[data-disabled="false"]:active:after {
+.emotion-2[data-disabled="false"]:active:after {
   width: calc(1rem * 1.3775);
 }
 
-.emotion-4:has(:checked) {
+.emotion-2:has(:checked) {
   color: #222638;
   background-color: #8c40ef;
 }
 
-.emotion-4:has(:checked):hover {
+.emotion-2:has(:checked):hover {
   background-color: #792dd4;
 }
 
-.emotion-4:has(:checked):after {
+.emotion-2:has(:checked):after {
   left: calc(100% - 5px);
   -webkit-transform: translateX(-100%);
   -moz-transform: translateX(-100%);
@@ -101,41 +95,41 @@ exports[`toggleGroup > renders correctly 1`] = `
   transform: translateX(-100%);
 }
 
-.emotion-4:has(:checked):focus-within,
-.emotion-4:has(:checked):focus {
+.emotion-2:has(:checked):focus-within,
+.emotion-2:has(:checked):focus {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-4[data-disabled="true"] {
+.emotion-2[data-disabled="true"] {
   background: #f3f3f4;
 }
 
-.emotion-4[data-disabled="true"]:has(:checked) {
+.emotion-2[data-disabled="true"]:has(:checked) {
   background: #e5dbfd;
 }
 
-.emotion-4[data-error="true"] {
+.emotion-2[data-error="true"] {
   background-color: #ffebf2;
 }
 
-.emotion-4[data-error="true"]:focus-within,
-.emotion-4[data-error="true"]:focus {
+.emotion-2[data-error="true"]:focus-within,
+.emotion-2[data-error="true"]:focus {
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-4[data-error="true"]:has(:checked) {
+.emotion-2[data-error="true"]:has(:checked) {
   background-color: #e51963;
 }
 
-.emotion-4[data-error="true"][data-disabled="true"] {
+.emotion-2[data-error="true"][data-disabled="true"] {
   background-color: #fff3f7;
 }
 
-.emotion-4[data-error="true"][data-disabled="true"]:has(:checked) {
+.emotion-2[data-error="true"][data-disabled="true"]:has(:checked) {
   background-color: #ffd3e3;
 }
 
-.emotion-6 {
+.emotion-4 {
   position: absolute;
   opacity: 0;
   top: 0;
@@ -145,7 +139,7 @@ exports[`toggleGroup > renders correctly 1`] = `
   cursor: pointer;
 }
 
-.emotion-6[disabled] {
+.emotion-4[disabled] {
   cursor: not-allowed;
 }
 
@@ -156,7 +150,7 @@ exports[`toggleGroup > renders correctly 1`] = `
       class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
     >
       <fieldset
-        class="emotion-0 emotion-1"
+        class="styles__l0r03j0"
       >
         <div
           class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -175,7 +169,7 @@ exports[`toggleGroup > renders correctly 1`] = `
           >
             <label
               aria-disabled="false"
-              class="emotion-2 emotion-3"
+              class="emotion-0 emotion-1"
             >
               <div
                 class="styles__toi52u0 styles_alignItems_baseline_xxsmall__toi52u4j styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.125rem_xxsmall__toi52u21 styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -192,13 +186,13 @@ exports[`toggleGroup > renders correctly 1`] = `
                 </div>
               </div>
               <div
-                class="emotion-4 emotion-5"
+                class="emotion-2 emotion-3"
                 data-disabled="false"
                 data-error="false"
               >
                 <input
                   aria-invalid="false"
-                  class="emotion-6 emotion-7"
+                  class="emotion-4 emotion-5"
                   id="«r1»"
                   name="Toggle.value-1"
                   type="checkbox"
@@ -208,7 +202,7 @@ exports[`toggleGroup > renders correctly 1`] = `
             </label>
             <label
               aria-disabled="false"
-              class="emotion-2 emotion-3"
+              class="emotion-0 emotion-1"
             >
               <div
                 class="styles__toi52u0 styles_alignItems_baseline_xxsmall__toi52u4j styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.125rem_xxsmall__toi52u21 styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -225,13 +219,13 @@ exports[`toggleGroup > renders correctly 1`] = `
                 </div>
               </div>
               <div
-                class="emotion-4 emotion-5"
+                class="emotion-2 emotion-3"
                 data-disabled="false"
                 data-error="false"
               >
                 <input
                   aria-invalid="false"
-                  class="emotion-6 emotion-7"
+                  class="emotion-4 emotion-5"
                   id="«r4»"
                   name="Toggle.value-2"
                   type="checkbox"
@@ -250,12 +244,6 @@ exports[`toggleGroup > renders correctly 1`] = `
 exports[`toggleGroup > renders correctly with direction row 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-.emotion-2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -274,16 +262,16 @@ exports[`toggleGroup > renders correctly with direction row 1`] = `
   flex-direction: row-reverse;
 }
 
-.emotion-2:active .emotion-5[data-disabled='false']:after {
+.emotion-0:active .emotion-3[data-disabled='false']:after {
   width: calc(1rem * 1.3775);
 }
 
-.emotion-2[aria-disabled="true"] {
+.emotion-0[aria-disabled="true"] {
   cursor: not-allowed;
   color: #b5b7bd;
 }
 
-.emotion-4 {
+.emotion-2 {
   box-sizing: content-box;
   outline: none;
   overflow: hidden;
@@ -305,11 +293,11 @@ exports[`toggleGroup > renders correctly with direction row 1`] = `
   height: 1.5rem;
 }
 
-.emotion-4:hover {
+.emotion-2:hover {
   background-color: #d9dadd;
 }
 
-.emotion-4:after {
+.emotion-2:after {
   content: "";
   position: absolute;
   top: calc(1.5rem / 2 - 1rem / 2);
@@ -322,25 +310,25 @@ exports[`toggleGroup > renders correctly with direction row 1`] = `
   transition: all 300ms;
 }
 
-.emotion-4:focus-within,
-.emotion-4:focus {
+.emotion-2:focus-within,
+.emotion-2:focus {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-4[data-disabled="false"]:active:after {
+.emotion-2[data-disabled="false"]:active:after {
   width: calc(1rem * 1.3775);
 }
 
-.emotion-4:has(:checked) {
+.emotion-2:has(:checked) {
   color: #222638;
   background-color: #8c40ef;
 }
 
-.emotion-4:has(:checked):hover {
+.emotion-2:has(:checked):hover {
   background-color: #792dd4;
 }
 
-.emotion-4:has(:checked):after {
+.emotion-2:has(:checked):after {
   left: calc(100% - 5px);
   -webkit-transform: translateX(-100%);
   -moz-transform: translateX(-100%);
@@ -348,41 +336,41 @@ exports[`toggleGroup > renders correctly with direction row 1`] = `
   transform: translateX(-100%);
 }
 
-.emotion-4:has(:checked):focus-within,
-.emotion-4:has(:checked):focus {
+.emotion-2:has(:checked):focus-within,
+.emotion-2:has(:checked):focus {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-4[data-disabled="true"] {
+.emotion-2[data-disabled="true"] {
   background: #f3f3f4;
 }
 
-.emotion-4[data-disabled="true"]:has(:checked) {
+.emotion-2[data-disabled="true"]:has(:checked) {
   background: #e5dbfd;
 }
 
-.emotion-4[data-error="true"] {
+.emotion-2[data-error="true"] {
   background-color: #ffebf2;
 }
 
-.emotion-4[data-error="true"]:focus-within,
-.emotion-4[data-error="true"]:focus {
+.emotion-2[data-error="true"]:focus-within,
+.emotion-2[data-error="true"]:focus {
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-4[data-error="true"]:has(:checked) {
+.emotion-2[data-error="true"]:has(:checked) {
   background-color: #e51963;
 }
 
-.emotion-4[data-error="true"][data-disabled="true"] {
+.emotion-2[data-error="true"][data-disabled="true"] {
   background-color: #fff3f7;
 }
 
-.emotion-4[data-error="true"][data-disabled="true"]:has(:checked) {
+.emotion-2[data-error="true"][data-disabled="true"]:has(:checked) {
   background-color: #ffd3e3;
 }
 
-.emotion-6 {
+.emotion-4 {
   position: absolute;
   opacity: 0;
   top: 0;
@@ -392,7 +380,7 @@ exports[`toggleGroup > renders correctly with direction row 1`] = `
   cursor: pointer;
 }
 
-.emotion-6[disabled] {
+.emotion-4[disabled] {
   cursor: not-allowed;
 }
 
@@ -403,7 +391,7 @@ exports[`toggleGroup > renders correctly with direction row 1`] = `
       class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
     >
       <fieldset
-        class="emotion-0 emotion-1"
+        class="styles__l0r03j0"
       >
         <div
           class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -422,7 +410,7 @@ exports[`toggleGroup > renders correctly with direction row 1`] = `
           >
             <label
               aria-disabled="false"
-              class="emotion-2 emotion-3"
+              class="emotion-0 emotion-1"
             >
               <div
                 class="styles__toi52u0 styles_alignItems_baseline_xxsmall__toi52u4j styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.125rem_xxsmall__toi52u21 styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -439,13 +427,13 @@ exports[`toggleGroup > renders correctly with direction row 1`] = `
                 </div>
               </div>
               <div
-                class="emotion-4 emotion-5"
+                class="emotion-2 emotion-3"
                 data-disabled="false"
                 data-error="false"
               >
                 <input
                   aria-invalid="false"
-                  class="emotion-6 emotion-7"
+                  class="emotion-4 emotion-5"
                   id="«r8»"
                   name="Toggle.value-1"
                   type="checkbox"
@@ -455,7 +443,7 @@ exports[`toggleGroup > renders correctly with direction row 1`] = `
             </label>
             <label
               aria-disabled="false"
-              class="emotion-2 emotion-3"
+              class="emotion-0 emotion-1"
             >
               <div
                 class="styles__toi52u0 styles_alignItems_baseline_xxsmall__toi52u4j styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.125rem_xxsmall__toi52u21 styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -472,13 +460,13 @@ exports[`toggleGroup > renders correctly with direction row 1`] = `
                 </div>
               </div>
               <div
-                class="emotion-4 emotion-5"
+                class="emotion-2 emotion-3"
                 data-disabled="false"
                 data-error="false"
               >
                 <input
                   aria-invalid="false"
-                  class="emotion-6 emotion-7"
+                  class="emotion-4 emotion-5"
                   id="«rb»"
                   name="Toggle.value-2"
                   type="checkbox"
@@ -497,12 +485,6 @@ exports[`toggleGroup > renders correctly with direction row 1`] = `
 exports[`toggleGroup > renders correctly with error content 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-.emotion-2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -521,16 +503,16 @@ exports[`toggleGroup > renders correctly with error content 1`] = `
   flex-direction: row-reverse;
 }
 
-.emotion-2:active .emotion-5[data-disabled='false']:after {
+.emotion-0:active .emotion-3[data-disabled='false']:after {
   width: calc(1rem * 1.3775);
 }
 
-.emotion-2[aria-disabled="true"] {
+.emotion-0[aria-disabled="true"] {
   cursor: not-allowed;
   color: #b5b7bd;
 }
 
-.emotion-4 {
+.emotion-2 {
   box-sizing: content-box;
   outline: none;
   overflow: hidden;
@@ -552,11 +534,11 @@ exports[`toggleGroup > renders correctly with error content 1`] = `
   height: 1.5rem;
 }
 
-.emotion-4:hover {
+.emotion-2:hover {
   background-color: #d9dadd;
 }
 
-.emotion-4:after {
+.emotion-2:after {
   content: "";
   position: absolute;
   top: calc(1.5rem / 2 - 1rem / 2);
@@ -569,25 +551,25 @@ exports[`toggleGroup > renders correctly with error content 1`] = `
   transition: all 300ms;
 }
 
-.emotion-4:focus-within,
-.emotion-4:focus {
+.emotion-2:focus-within,
+.emotion-2:focus {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-4[data-disabled="false"]:active:after {
+.emotion-2[data-disabled="false"]:active:after {
   width: calc(1rem * 1.3775);
 }
 
-.emotion-4:has(:checked) {
+.emotion-2:has(:checked) {
   color: #222638;
   background-color: #8c40ef;
 }
 
-.emotion-4:has(:checked):hover {
+.emotion-2:has(:checked):hover {
   background-color: #792dd4;
 }
 
-.emotion-4:has(:checked):after {
+.emotion-2:has(:checked):after {
   left: calc(100% - 5px);
   -webkit-transform: translateX(-100%);
   -moz-transform: translateX(-100%);
@@ -595,41 +577,41 @@ exports[`toggleGroup > renders correctly with error content 1`] = `
   transform: translateX(-100%);
 }
 
-.emotion-4:has(:checked):focus-within,
-.emotion-4:has(:checked):focus {
+.emotion-2:has(:checked):focus-within,
+.emotion-2:has(:checked):focus {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-4[data-disabled="true"] {
+.emotion-2[data-disabled="true"] {
   background: #f3f3f4;
 }
 
-.emotion-4[data-disabled="true"]:has(:checked) {
+.emotion-2[data-disabled="true"]:has(:checked) {
   background: #e5dbfd;
 }
 
-.emotion-4[data-error="true"] {
+.emotion-2[data-error="true"] {
   background-color: #ffebf2;
 }
 
-.emotion-4[data-error="true"]:focus-within,
-.emotion-4[data-error="true"]:focus {
+.emotion-2[data-error="true"]:focus-within,
+.emotion-2[data-error="true"]:focus {
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-4[data-error="true"]:has(:checked) {
+.emotion-2[data-error="true"]:has(:checked) {
   background-color: #e51963;
 }
 
-.emotion-4[data-error="true"][data-disabled="true"] {
+.emotion-2[data-error="true"][data-disabled="true"] {
   background-color: #fff3f7;
 }
 
-.emotion-4[data-error="true"][data-disabled="true"]:has(:checked) {
+.emotion-2[data-error="true"][data-disabled="true"]:has(:checked) {
   background-color: #ffd3e3;
 }
 
-.emotion-6 {
+.emotion-4 {
   position: absolute;
   opacity: 0;
   top: 0;
@@ -639,7 +621,7 @@ exports[`toggleGroup > renders correctly with error content 1`] = `
   cursor: pointer;
 }
 
-.emotion-6[disabled] {
+.emotion-4[disabled] {
   cursor: not-allowed;
 }
 
@@ -650,7 +632,7 @@ exports[`toggleGroup > renders correctly with error content 1`] = `
       class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
     >
       <fieldset
-        class="emotion-0 emotion-1"
+        class="styles__l0r03j0"
       >
         <div
           class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -669,7 +651,7 @@ exports[`toggleGroup > renders correctly with error content 1`] = `
           >
             <label
               aria-disabled="false"
-              class="emotion-2 emotion-3"
+              class="emotion-0 emotion-1"
             >
               <div
                 class="styles__toi52u0 styles_alignItems_baseline_xxsmall__toi52u4j styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.125rem_xxsmall__toi52u21 styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -686,13 +668,13 @@ exports[`toggleGroup > renders correctly with error content 1`] = `
                 </div>
               </div>
               <div
-                class="emotion-4 emotion-5"
+                class="emotion-2 emotion-3"
                 data-disabled="false"
                 data-error="true"
               >
                 <input
                   aria-invalid="true"
-                  class="emotion-6 emotion-7"
+                  class="emotion-4 emotion-5"
                   id="«rn»"
                   name="Toggle.value-1"
                   type="checkbox"
@@ -702,7 +684,7 @@ exports[`toggleGroup > renders correctly with error content 1`] = `
             </label>
             <label
               aria-disabled="false"
-              class="emotion-2 emotion-3"
+              class="emotion-0 emotion-1"
             >
               <div
                 class="styles__toi52u0 styles_alignItems_baseline_xxsmall__toi52u4j styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.125rem_xxsmall__toi52u21 styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -719,13 +701,13 @@ exports[`toggleGroup > renders correctly with error content 1`] = `
                 </div>
               </div>
               <div
-                class="emotion-4 emotion-5"
+                class="emotion-2 emotion-3"
                 data-disabled="false"
                 data-error="true"
               >
                 <input
                   aria-invalid="true"
-                  class="emotion-6 emotion-7"
+                  class="emotion-4 emotion-5"
                   id="«rq»"
                   name="Toggle.value-2"
                   type="checkbox"
@@ -749,12 +731,6 @@ exports[`toggleGroup > renders correctly with error content 1`] = `
 exports[`toggleGroup > renders correctly with helper content 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-.emotion-2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -773,16 +749,16 @@ exports[`toggleGroup > renders correctly with helper content 1`] = `
   flex-direction: row-reverse;
 }
 
-.emotion-2:active .emotion-5[data-disabled='false']:after {
+.emotion-0:active .emotion-3[data-disabled='false']:after {
   width: calc(1rem * 1.3775);
 }
 
-.emotion-2[aria-disabled="true"] {
+.emotion-0[aria-disabled="true"] {
   cursor: not-allowed;
   color: #b5b7bd;
 }
 
-.emotion-4 {
+.emotion-2 {
   box-sizing: content-box;
   outline: none;
   overflow: hidden;
@@ -804,11 +780,11 @@ exports[`toggleGroup > renders correctly with helper content 1`] = `
   height: 1.5rem;
 }
 
-.emotion-4:hover {
+.emotion-2:hover {
   background-color: #d9dadd;
 }
 
-.emotion-4:after {
+.emotion-2:after {
   content: "";
   position: absolute;
   top: calc(1.5rem / 2 - 1rem / 2);
@@ -821,25 +797,25 @@ exports[`toggleGroup > renders correctly with helper content 1`] = `
   transition: all 300ms;
 }
 
-.emotion-4:focus-within,
-.emotion-4:focus {
+.emotion-2:focus-within,
+.emotion-2:focus {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-4[data-disabled="false"]:active:after {
+.emotion-2[data-disabled="false"]:active:after {
   width: calc(1rem * 1.3775);
 }
 
-.emotion-4:has(:checked) {
+.emotion-2:has(:checked) {
   color: #222638;
   background-color: #8c40ef;
 }
 
-.emotion-4:has(:checked):hover {
+.emotion-2:has(:checked):hover {
   background-color: #792dd4;
 }
 
-.emotion-4:has(:checked):after {
+.emotion-2:has(:checked):after {
   left: calc(100% - 5px);
   -webkit-transform: translateX(-100%);
   -moz-transform: translateX(-100%);
@@ -847,41 +823,41 @@ exports[`toggleGroup > renders correctly with helper content 1`] = `
   transform: translateX(-100%);
 }
 
-.emotion-4:has(:checked):focus-within,
-.emotion-4:has(:checked):focus {
+.emotion-2:has(:checked):focus-within,
+.emotion-2:has(:checked):focus {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-4[data-disabled="true"] {
+.emotion-2[data-disabled="true"] {
   background: #f3f3f4;
 }
 
-.emotion-4[data-disabled="true"]:has(:checked) {
+.emotion-2[data-disabled="true"]:has(:checked) {
   background: #e5dbfd;
 }
 
-.emotion-4[data-error="true"] {
+.emotion-2[data-error="true"] {
   background-color: #ffebf2;
 }
 
-.emotion-4[data-error="true"]:focus-within,
-.emotion-4[data-error="true"]:focus {
+.emotion-2[data-error="true"]:focus-within,
+.emotion-2[data-error="true"]:focus {
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-4[data-error="true"]:has(:checked) {
+.emotion-2[data-error="true"]:has(:checked) {
   background-color: #e51963;
 }
 
-.emotion-4[data-error="true"][data-disabled="true"] {
+.emotion-2[data-error="true"][data-disabled="true"] {
   background-color: #fff3f7;
 }
 
-.emotion-4[data-error="true"][data-disabled="true"]:has(:checked) {
+.emotion-2[data-error="true"][data-disabled="true"]:has(:checked) {
   background-color: #ffd3e3;
 }
 
-.emotion-6 {
+.emotion-4 {
   position: absolute;
   opacity: 0;
   top: 0;
@@ -891,7 +867,7 @@ exports[`toggleGroup > renders correctly with helper content 1`] = `
   cursor: pointer;
 }
 
-.emotion-6[disabled] {
+.emotion-4[disabled] {
   cursor: not-allowed;
 }
 
@@ -902,7 +878,7 @@ exports[`toggleGroup > renders correctly with helper content 1`] = `
       class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
     >
       <fieldset
-        class="emotion-0 emotion-1"
+        class="styles__l0r03j0"
       >
         <div
           class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -921,7 +897,7 @@ exports[`toggleGroup > renders correctly with helper content 1`] = `
           >
             <label
               aria-disabled="false"
-              class="emotion-2 emotion-3"
+              class="emotion-0 emotion-1"
             >
               <div
                 class="styles__toi52u0 styles_alignItems_baseline_xxsmall__toi52u4j styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.125rem_xxsmall__toi52u21 styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -938,13 +914,13 @@ exports[`toggleGroup > renders correctly with helper content 1`] = `
                 </div>
               </div>
               <div
-                class="emotion-4 emotion-5"
+                class="emotion-2 emotion-3"
                 data-disabled="false"
                 data-error="false"
               >
                 <input
                   aria-invalid="false"
-                  class="emotion-6 emotion-7"
+                  class="emotion-4 emotion-5"
                   id="«rf»"
                   name="Toggle.value-1"
                   type="checkbox"
@@ -954,7 +930,7 @@ exports[`toggleGroup > renders correctly with helper content 1`] = `
             </label>
             <label
               aria-disabled="false"
-              class="emotion-2 emotion-3"
+              class="emotion-0 emotion-1"
             >
               <div
                 class="styles__toi52u0 styles_alignItems_baseline_xxsmall__toi52u4j styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.125rem_xxsmall__toi52u21 styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -971,13 +947,13 @@ exports[`toggleGroup > renders correctly with helper content 1`] = `
                 </div>
               </div>
               <div
-                class="emotion-4 emotion-5"
+                class="emotion-2 emotion-3"
                 data-disabled="false"
                 data-error="false"
               >
                 <input
                   aria-invalid="false"
-                  class="emotion-6 emotion-7"
+                  class="emotion-4 emotion-5"
                   id="«ri»"
                   name="Toggle.value-2"
                   type="checkbox"
@@ -1001,12 +977,6 @@ exports[`toggleGroup > renders correctly with helper content 1`] = `
 exports[`toggleGroup > renders correctly with required prop 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-.emotion-2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1025,16 +995,16 @@ exports[`toggleGroup > renders correctly with required prop 1`] = `
   flex-direction: row-reverse;
 }
 
-.emotion-2:active .emotion-5[data-disabled='false']:after {
+.emotion-0:active .emotion-3[data-disabled='false']:after {
   width: calc(1rem * 1.3775);
 }
 
-.emotion-2[aria-disabled="true"] {
+.emotion-0[aria-disabled="true"] {
   cursor: not-allowed;
   color: #b5b7bd;
 }
 
-.emotion-4 {
+.emotion-2 {
   box-sizing: content-box;
   outline: none;
   overflow: hidden;
@@ -1056,11 +1026,11 @@ exports[`toggleGroup > renders correctly with required prop 1`] = `
   height: 1.5rem;
 }
 
-.emotion-4:hover {
+.emotion-2:hover {
   background-color: #d9dadd;
 }
 
-.emotion-4:after {
+.emotion-2:after {
   content: "";
   position: absolute;
   top: calc(1.5rem / 2 - 1rem / 2);
@@ -1073,25 +1043,25 @@ exports[`toggleGroup > renders correctly with required prop 1`] = `
   transition: all 300ms;
 }
 
-.emotion-4:focus-within,
-.emotion-4:focus {
+.emotion-2:focus-within,
+.emotion-2:focus {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-4[data-disabled="false"]:active:after {
+.emotion-2[data-disabled="false"]:active:after {
   width: calc(1rem * 1.3775);
 }
 
-.emotion-4:has(:checked) {
+.emotion-2:has(:checked) {
   color: #222638;
   background-color: #8c40ef;
 }
 
-.emotion-4:has(:checked):hover {
+.emotion-2:has(:checked):hover {
   background-color: #792dd4;
 }
 
-.emotion-4:has(:checked):after {
+.emotion-2:has(:checked):after {
   left: calc(100% - 5px);
   -webkit-transform: translateX(-100%);
   -moz-transform: translateX(-100%);
@@ -1099,41 +1069,41 @@ exports[`toggleGroup > renders correctly with required prop 1`] = `
   transform: translateX(-100%);
 }
 
-.emotion-4:has(:checked):focus-within,
-.emotion-4:has(:checked):focus {
+.emotion-2:has(:checked):focus-within,
+.emotion-2:has(:checked):focus {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-4[data-disabled="true"] {
+.emotion-2[data-disabled="true"] {
   background: #f3f3f4;
 }
 
-.emotion-4[data-disabled="true"]:has(:checked) {
+.emotion-2[data-disabled="true"]:has(:checked) {
   background: #e5dbfd;
 }
 
-.emotion-4[data-error="true"] {
+.emotion-2[data-error="true"] {
   background-color: #ffebf2;
 }
 
-.emotion-4[data-error="true"]:focus-within,
-.emotion-4[data-error="true"]:focus {
+.emotion-2[data-error="true"]:focus-within,
+.emotion-2[data-error="true"]:focus {
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-4[data-error="true"]:has(:checked) {
+.emotion-2[data-error="true"]:has(:checked) {
   background-color: #e51963;
 }
 
-.emotion-4[data-error="true"][data-disabled="true"] {
+.emotion-2[data-error="true"][data-disabled="true"] {
   background-color: #fff3f7;
 }
 
-.emotion-4[data-error="true"][data-disabled="true"]:has(:checked) {
+.emotion-2[data-error="true"][data-disabled="true"]:has(:checked) {
   background-color: #ffd3e3;
 }
 
-.emotion-6 {
+.emotion-4 {
   position: absolute;
   opacity: 0;
   top: 0;
@@ -1143,7 +1113,7 @@ exports[`toggleGroup > renders correctly with required prop 1`] = `
   cursor: pointer;
 }
 
-.emotion-6[disabled] {
+.emotion-4[disabled] {
   cursor: not-allowed;
 }
 
@@ -1154,7 +1124,7 @@ exports[`toggleGroup > renders correctly with required prop 1`] = `
       class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
     >
       <fieldset
-        class="emotion-0 emotion-1"
+        class="styles__l0r03j0"
       >
         <div
           class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -1182,7 +1152,7 @@ exports[`toggleGroup > renders correctly with required prop 1`] = `
           >
             <label
               aria-disabled="false"
-              class="emotion-2 emotion-3"
+              class="emotion-0 emotion-1"
             >
               <div
                 class="styles__toi52u0 styles_alignItems_baseline_xxsmall__toi52u4j styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.125rem_xxsmall__toi52u21 styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -1199,13 +1169,13 @@ exports[`toggleGroup > renders correctly with required prop 1`] = `
                 </div>
               </div>
               <div
-                class="emotion-4 emotion-5"
+                class="emotion-2 emotion-3"
                 data-disabled="false"
                 data-error="false"
               >
                 <input
                   aria-invalid="false"
-                  class="emotion-6 emotion-7"
+                  class="emotion-4 emotion-5"
                   id="«r10»"
                   name="Toggle.value-1"
                   type="checkbox"
@@ -1215,7 +1185,7 @@ exports[`toggleGroup > renders correctly with required prop 1`] = `
             </label>
             <label
               aria-disabled="false"
-              class="emotion-2 emotion-3"
+              class="emotion-0 emotion-1"
             >
               <div
                 class="styles__toi52u0 styles_alignItems_baseline_xxsmall__toi52u4j styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.125rem_xxsmall__toi52u21 styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -1232,13 +1202,13 @@ exports[`toggleGroup > renders correctly with required prop 1`] = `
                 </div>
               </div>
               <div
-                class="emotion-4 emotion-5"
+                class="emotion-2 emotion-3"
                 data-disabled="false"
                 data-error="false"
               >
                 <input
                   aria-invalid="false"
-                  class="emotion-6 emotion-7"
+                  class="emotion-4 emotion-5"
                   id="«r13»"
                   name="Toggle.value-2"
                   type="checkbox"
diff --git a/packages/ui/src/components/ToggleGroup/index.tsx b/packages/ui/src/components/ToggleGroup/index.tsx
index 4a15e737cb..937379185e 100644
--- a/packages/ui/src/components/ToggleGroup/index.tsx
+++ b/packages/ui/src/components/ToggleGroup/index.tsx
@@ -1,12 +1,12 @@
 'use client'
 
-import styled from '@emotion/styled'
 import type { ComponentProps, InputHTMLAttributes, ReactNode } from 'react'
 import { createContext, useContext, useMemo } from 'react'
 import { Label } from '../Label'
 import { Stack } from '../Stack'
 import { Text } from '../Text'
 import { Toggle } from '../Toggle'
+import { fieldset } from './styles.css'
 
 type ToggleGroupContextType = {
   groupName: string
@@ -66,12 +66,6 @@ export const ToggleGroupToggle = ({
   )
 }
 
-const FieldSet = styled.fieldset`
-  border: none;
-  padding: 0;
-  margin: 0;
-`
-
 type ToggleGroupProps = {
   legend?: string
   legendDescription?: ReactNode
@@ -113,7 +107,7 @@ export const ToggleGroup = ({
   return (
     <ToggleGroupContext.Provider value={contextValue}>
       <Stack gap={1}>
-        <FieldSet className={className}>
+        <fieldset className={`${className ? `${className} ` : ''}${fieldset}`}>
           <Stack gap={1.5}>
             {legend || description ? (
               <Stack gap={0.5}>
@@ -142,7 +136,7 @@ export const ToggleGroup = ({
               {children}
             </Stack>
           </Stack>
-        </FieldSet>
+        </fieldset>
         {helper ? (
           <Text as="p" prominence="weak" sentiment="neutral" variant="caption">
             {helper}
diff --git a/packages/ui/src/components/ToggleGroup/styles.css.ts b/packages/ui/src/components/ToggleGroup/styles.css.ts
new file mode 100644
index 0000000000..ac49c1e34a
--- /dev/null
+++ b/packages/ui/src/components/ToggleGroup/styles.css.ts
@@ -0,0 +1,7 @@
+import { style } from '@vanilla-extract/css'
+
+export const fieldset = style({
+  border: 'none',
+  padding: 0,
+  margin: 0,
+})