From 63f9b911ed8ca47e51fbfd52ab873f7b3badf95d Mon Sep 17 00:00:00 2001
From: Matthias Prost <mprost@scaleway.com>
Date: Tue, 4 Mar 2025 17:03:14 +0100
Subject: [PATCH] feat: new component SelectableCardOptionGroup (#4798)

* chore(devdeps): update dependency @eslint/compat to v1.2.7 (#4804)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(devdeps): update dependency @types/node to v22.13.5 (#4805)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(devdeps): update dependency eslint-plugin-oxlint to v0.15.12 (#4806)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(devdeps): update dependency publint to v0.3.6 (#4808)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix: unit input styling (#4809)

* chore: release (#4803)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* chore(devdeps): update dependency postcss to v8.5.3 (#4807)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency @scaleway/regex to v5.2.2 (#4811)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(devdeps): update actions/setup-node action to v4.2.0 (#4813)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(devdeps): update node.js to v22.14.0 (#4814)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(devdeps): update pnpm/action-setup action to v4.1.0 (#4815)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency react-router-dom to v7.2.0 (#4816)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(devdeps): update dependency happy-dom to v17 (#4819)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* docs: fix code editor in storybook (#4812)

* docs: fix code editor in storybook

* fix: failing test

* chore(devdeps): update dependency @scaleway/eslint-config-react to v5.2.7 (#4769)

* chore(devdeps): update dependency @scaleway/eslint-config-react to v5.2.7

* fix: remove duplicate type

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Matthias <mprost@scaleway.com>

* fix: lockfile (#4825)

* fix(deps): update dependency jsdom to v26 (#4821)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency react-toastify to v11 (#4613)

* fix(deps): update dependency react-toastify to v11

* chore: add changeset renovate-8950968

* fix: new version of react toastify

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Scaleway Bot <github@scaleway.com>
Co-authored-by: Matthias Prost <mprost@scaleway.com>

* fix(deps): update code editor to v4.23.8 (#4751)

* fix(deps): update code editor to v4.23.8

* chore: add changeset renovate-28121ac

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Scaleway Bot <github@scaleway.com>

* refactor(Icon): remove fixed size by using normal one (#4810)

* chore(devdeps): update pnpm to v10 (#4820)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency react-select to v5.10.0 (#4817)

* fix(deps): update dependency react-select to v5.10.0

* chore: add changeset renovate-e0b54b9

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Scaleway Bot <github@scaleway.com>
Co-authored-by: Matthias Prost <mprost@scaleway.com>

* chore(devdeps): update dependency happy-dom to v17.1.8 (#4829)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(devdeps): update dependency turbo to v2.4.4 (#4831)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(devdeps): update dependency vite to v6.2.0 (#4832)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(devdeps): update dependency @changesets/cli to v2.28.1 (#4834)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(devdeps): update dependency @eslint/eslintrc to v3.3.0 (#4835)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(devdeps): update dependency @size-limit/file to v11.2.0 (#4836)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* feat: new component for options

* feat: add more features

* fix: unit tests

* fix: feedback alex

* fix: feedback mathieu

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: lisalupi <106706307+lisalupi@users.noreply.github.com>
Co-authored-by: Scaleway Bot <github@scaleway.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/bright-weeks-wonder.md             |     5 +
 .changeset/sweet-cycles-mate.md               |     9 +
 .../__snapshots__/index.test.tsx.snap         |    18 +-
 .../__snapshots__/index.test.tsx.snap         |    16 +-
 .../__snapshots__/index.test.tsx.snap         |    68 +-
 .../__tests__/index.test.tsx                  |     2 +-
 .../__snapshots__/index.test.tsx.snap         |    45 +-
 .../__snapshots__/index.test.tsx.snap         |    33 +-
 .../__stories__/Error.stories.tsx             |    45 +
 .../__stories__/Playground.stories.tsx        |     5 +
 .../__stories__/Required.stories.tsx          |    44 +
 .../__stories__/Template.stories.tsx          |    38 +
 .../__stories__/assets/centos.svg             |     9 +
 .../__stories__/assets/debian.svg             |     9 +
 .../__stories__/assets/ubuntu.svg             |     9 +
 .../__stories__/constants.tsx                 |    55 +
 .../__stories__/index.stories.tsx             |    76 +
 .../__snapshots__/index.test.tsx.snap         |  1134 ++
 .../__tests__/index.test.tsx                  |    46 +
 .../SelectableCardOptionGroupField/index.tsx  |    82 +
 .../__snapshots__/index.test.tsx.snap         |    26 +-
 .../__snapshots__/index.test.tsx.snap         |   200 +-
 .../__snapshots__/index.test.tsx.snap         |   189 +-
 .../__snapshots__/index.test.tsx.snap         |   138 +-
 .../__snapshots__/index.test.tsx.snap         |   158 +-
 .../__snapshots__/index.test.tsx.snap         |   383 +-
 .../__snapshots__/index.test.tsx.snap         |    51 +-
 packages/form/src/components/index.ts         |     1 +
 .../__snapshots__/index.test.tsx.snap         |  1942 +--
 .../__snapshots__/index.test.tsx.snap         |    64 +-
 packages/ui/src/components/Label/index.tsx    |    56 +-
 .../__snapshots__/index.test.tsx.snap         |   210 +-
 .../__snapshots__/index.test.tsx.snap         |    22 +-
 packages/ui/src/components/Popup/index.tsx    |    26 +-
 .../__snapshots__/index.test.tsx.snap         |   171 +-
 .../__snapshots__/index.test.tsx.snap         |    29 +-
 packages/ui/src/components/Radio/index.tsx    |    16 +-
 .../__snapshots__/index.test.tsx.snap         |    32 +-
 .../src/components/SelectInputV2/Dropdown.tsx |     3 +-
 .../components/SelectInputV2/SelectBar.tsx    |    19 +-
 .../ui/src/components/SelectInputV2/index.tsx |     4 +-
 .../__snapshots__/index.test.tsx.snap         |   191 +-
 .../src/components/SelectableCard/index.tsx   |    18 +-
 .../__snapshots__/index.test.tsx.snap         |    43 +-
 .../__tests__/index.test.tsx                  |     2 +-
 .../SelectableCardOptionGroup/Provider.ts     |    39 +
 .../__stories__/Columns.stories.tsx           |    26 +
 .../__stories__/Disabled.stories.tsx          |     7 +
 .../__stories__/Error.stories.tsx             |     7 +
 .../__stories__/Examples.stories.tsx          |   115 +
 .../__stories__/Playground.stories.tsx        |    22 +
 .../__stories__/Sizes.stories.tsx             |   111 +
 .../__stories__/Template.stories.tsx          |    80 +
 .../__stories__/assets/centos.svg             |     9 +
 .../__stories__/assets/debian.svg             |     9 +
 .../__stories__/assets/ubuntu.svg             |     9 +
 .../__stories__/constants.tsx                 |    55 +
 .../__stories__/index.stories.tsx             |    14 +
 .../__snapshots__/index.test.tsx.snap         | 13830 ++++++++++++++++
 .../__tests__/index.test.tsx                  |   458 +
 .../components/Image.tsx                      |    35 +
 .../components/Option.tsx                     |   173 +
 .../SelectableCardOptionGroup/index.tsx       |   123 +
 .../SelectableCardOptionGroup/types.ts        |     1 +
 .../__snapshots__/index.test.tsx.snap         |    52 +-
 .../__snapshots__/index.test.tsx.snap         |    82 +-
 .../__snapshots__/index.test.tsx.snap         |   753 +-
 .../__snapshots__/index.test.tsx.snap         |   449 +-
 .../__snapshots__/index.test.tsx.snap         |  1670 +-
 .../__snapshots__/index.test.tsx.snap         |  1485 +-
 .../__snapshots__/index.test.tsx.snap         |    94 +-
 packages/ui/src/components/index.ts           |     1 +
 packages/ui/src/types.ts                      |     7 +
 73 files changed, 21242 insertions(+), 4216 deletions(-)
 create mode 100644 .changeset/bright-weeks-wonder.md
 create mode 100644 .changeset/sweet-cycles-mate.md
 create mode 100644 packages/form/src/components/SelectableCardOptionGroupField/__stories__/Error.stories.tsx
 create mode 100644 packages/form/src/components/SelectableCardOptionGroupField/__stories__/Playground.stories.tsx
 create mode 100644 packages/form/src/components/SelectableCardOptionGroupField/__stories__/Required.stories.tsx
 create mode 100644 packages/form/src/components/SelectableCardOptionGroupField/__stories__/Template.stories.tsx
 create mode 100644 packages/form/src/components/SelectableCardOptionGroupField/__stories__/assets/centos.svg
 create mode 100644 packages/form/src/components/SelectableCardOptionGroupField/__stories__/assets/debian.svg
 create mode 100644 packages/form/src/components/SelectableCardOptionGroupField/__stories__/assets/ubuntu.svg
 create mode 100644 packages/form/src/components/SelectableCardOptionGroupField/__stories__/constants.tsx
 create mode 100644 packages/form/src/components/SelectableCardOptionGroupField/__stories__/index.stories.tsx
 create mode 100644 packages/form/src/components/SelectableCardOptionGroupField/__tests__/__snapshots__/index.test.tsx.snap
 create mode 100644 packages/form/src/components/SelectableCardOptionGroupField/__tests__/index.test.tsx
 create mode 100644 packages/form/src/components/SelectableCardOptionGroupField/index.tsx
 create mode 100644 packages/ui/src/components/SelectableCardOptionGroup/Provider.ts
 create mode 100644 packages/ui/src/components/SelectableCardOptionGroup/__stories__/Columns.stories.tsx
 create mode 100644 packages/ui/src/components/SelectableCardOptionGroup/__stories__/Disabled.stories.tsx
 create mode 100644 packages/ui/src/components/SelectableCardOptionGroup/__stories__/Error.stories.tsx
 create mode 100644 packages/ui/src/components/SelectableCardOptionGroup/__stories__/Examples.stories.tsx
 create mode 100644 packages/ui/src/components/SelectableCardOptionGroup/__stories__/Playground.stories.tsx
 create mode 100644 packages/ui/src/components/SelectableCardOptionGroup/__stories__/Sizes.stories.tsx
 create mode 100644 packages/ui/src/components/SelectableCardOptionGroup/__stories__/Template.stories.tsx
 create mode 100644 packages/ui/src/components/SelectableCardOptionGroup/__stories__/assets/centos.svg
 create mode 100644 packages/ui/src/components/SelectableCardOptionGroup/__stories__/assets/debian.svg
 create mode 100644 packages/ui/src/components/SelectableCardOptionGroup/__stories__/assets/ubuntu.svg
 create mode 100644 packages/ui/src/components/SelectableCardOptionGroup/__stories__/constants.tsx
 create mode 100644 packages/ui/src/components/SelectableCardOptionGroup/__stories__/index.stories.tsx
 create mode 100644 packages/ui/src/components/SelectableCardOptionGroup/__tests__/__snapshots__/index.test.tsx.snap
 create mode 100644 packages/ui/src/components/SelectableCardOptionGroup/__tests__/index.test.tsx
 create mode 100644 packages/ui/src/components/SelectableCardOptionGroup/components/Image.tsx
 create mode 100644 packages/ui/src/components/SelectableCardOptionGroup/components/Option.tsx
 create mode 100644 packages/ui/src/components/SelectableCardOptionGroup/index.tsx
 create mode 100644 packages/ui/src/components/SelectableCardOptionGroup/types.ts

diff --git a/.changeset/bright-weeks-wonder.md b/.changeset/bright-weeks-wonder.md
new file mode 100644
index 0000000000..8f49f514ea
--- /dev/null
+++ b/.changeset/bright-weeks-wonder.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/form": minor
+---
+
+- New component `<SelectableCardOptionGroupField />`
diff --git a/.changeset/sweet-cycles-mate.md b/.changeset/sweet-cycles-mate.md
new file mode 100644
index 0000000000..9eca5561cd
--- /dev/null
+++ b/.changeset/sweet-cycles-mate.md
@@ -0,0 +1,9 @@
+---
+"@ultraviolet/ui": minor
+---
+
+- `<Popup />`: fix when there is no animation to not add a `setTimeout` to close the popup. This will improve the behavior of `<SelectInputV2 />` and make the testing less random.
+- `<SelectableCard />`: remove pointer events on the radio. We were already doing it with the checkbox version. Also improved tabulation to be more accessible.
+- `<Label />`: improve component to accept `as` prop that can take either `label` or `legend`. It also accept `sentiment` and `disabled` props now. The mouse pointer will be a pointer as well when `htmlFor` is passed.
+- `<SelectInputV2 />`: improve the focusable elements and fix a visual bug to double click to open the dropdown. Also when there is no space in the input the text will be ellipsis.
+- New component `<SelectableCardOptionGroup />`
diff --git a/packages/form/src/components/RadioField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/RadioField/__tests__/__snapshots__/index.test.tsx.snap
index c5e953001d..001d38e78c 100644
--- a/packages/form/src/components/RadioField/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/form/src/components/RadioField/__tests__/__snapshots__/index.test.tsx.snap
@@ -188,7 +188,7 @@ exports[`RadioField > should render correctly 1`] = `
             aria-disabled="false"
             aria-invalid="false"
             class="emotion-4 emotion-5"
-            id="test-test"
+            id=":r0:"
             name="test"
             type="radio"
             value="test"
@@ -220,7 +220,7 @@ exports[`RadioField > should render correctly 1`] = `
           </svg>
           <label
             class="emotion-12 emotion-13 emotion-14"
-            for="test-test"
+            for=":r0:"
           >
             Radio field
           </label>
@@ -420,7 +420,7 @@ exports[`RadioField > should render correctly checked 1`] = `
             aria-invalid="false"
             checked=""
             class="emotion-4 emotion-5"
-            id="test-checked"
+            id=":r8:"
             name="test"
             type="radio"
             value="checked"
@@ -452,7 +452,7 @@ exports[`RadioField > should render correctly checked 1`] = `
           </svg>
           <label
             class="emotion-12 emotion-13 emotion-14"
-            for="test-checked"
+            for=":r8:"
           >
             Radio field checked
           </label>
@@ -652,7 +652,7 @@ exports[`RadioField > should render correctly disabled 1`] = `
             aria-invalid="false"
             class="emotion-4 emotion-5"
             disabled=""
-            id="test-disabled"
+            id=":r5:"
             name="test"
             type="radio"
             value="disabled"
@@ -684,7 +684,7 @@ exports[`RadioField > should render correctly disabled 1`] = `
           </svg>
           <label
             class="emotion-12 emotion-13 emotion-14"
-            for="test-disabled"
+            for=":r5:"
           >
             Radio field disabled
           </label>
@@ -869,7 +869,7 @@ exports[`RadioField > should render correctly with aria-label 1`] = `
             aria-invalid="false"
             aria-label="Radio field"
             class="emotion-4 emotion-5"
-            id="test-test"
+            id=":r3:"
             name="test"
             type="radio"
             value="test"
@@ -1094,7 +1094,7 @@ exports[`RadioField > should trigger events correctly 1`] = `
             aria-disabled="false"
             aria-invalid="false"
             class="emotion-4 emotion-5"
-            id="test-events"
+            id=":rb:"
             name="test"
             type="radio"
             value="events"
@@ -1126,7 +1126,7 @@ exports[`RadioField > should trigger events correctly 1`] = `
           </svg>
           <label
             class="emotion-12 emotion-13 emotion-14"
-            for="test-events"
+            for=":rb:"
           >
             Radio field events
           </label>
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 661d5086f0..4bc4a3b104 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
@@ -320,7 +320,7 @@ exports[`RadioField > should render correctly checked 1`] = `
                     aria-disabled="false"
                     aria-invalid="false"
                     class="emotion-16 emotion-17"
-                    id="radio-value-1"
+                    id=":r1:"
                     name="radio"
                     type="radio"
                     value="value-1"
@@ -352,7 +352,7 @@ exports[`RadioField > should render correctly checked 1`] = `
                   </svg>
                   <label
                     class="emotion-24 emotion-25 emotion-9"
-                    for="radio-value-1"
+                    for=":r1:"
                   >
                     Radio 1
                   </label>
@@ -371,7 +371,7 @@ exports[`RadioField > should render correctly checked 1`] = `
                     aria-disabled="false"
                     aria-invalid="false"
                     class="emotion-16 emotion-17"
-                    id="radio-value-2"
+                    id=":r4:"
                     name="radio"
                     type="radio"
                     value="value-2"
@@ -403,7 +403,7 @@ exports[`RadioField > should render correctly checked 1`] = `
                   </svg>
                   <label
                     class="emotion-24 emotion-25 emotion-9"
-                    for="radio-value-2"
+                    for=":r4:"
                   >
                     Radio 2
                   </label>
@@ -738,7 +738,7 @@ exports[`RadioField > should trigger events correctly 1`] = `
                     aria-disabled="false"
                     aria-invalid="false"
                     class="emotion-16 emotion-17"
-                    id="test-value-1"
+                    id=":r8:"
                     name="test"
                     type="radio"
                     value="value-1"
@@ -770,7 +770,7 @@ exports[`RadioField > should trigger events correctly 1`] = `
                   </svg>
                   <label
                     class="emotion-24 emotion-25 emotion-9"
-                    for="test-value-1"
+                    for=":r8:"
                   >
                     Radio 1
                   </label>
@@ -789,7 +789,7 @@ exports[`RadioField > should trigger events correctly 1`] = `
                     aria-disabled="false"
                     aria-invalid="false"
                     class="emotion-16 emotion-17"
-                    id="test-value-2"
+                    id=":rb:"
                     name="test"
                     type="radio"
                     value="value-2"
@@ -821,7 +821,7 @@ exports[`RadioField > should trigger events correctly 1`] = `
                   </svg>
                   <label
                     class="emotion-24 emotion-25 emotion-9"
-                    for="test-value-2"
+                    for=":rb:"
                   >
                     Radio 2
                   </label>
diff --git a/packages/form/src/components/SelectInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/SelectInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap
index 05651e4af4..8ee3ec465a 100644
--- a/packages/form/src/components/SelectInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/form/src/components/SelectInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap
@@ -112,12 +112,16 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-6[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-6[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-6[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -176,6 +180,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
   text-decoration: none;
   text-overflow: ellipsis;
   overflow: hidden;
+  white-space: nowrap;
 }
 
 .emotion-11 {
@@ -519,7 +524,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
           aria-describedby=":rh:"
           class="emotion-2 emotion-3"
           data-container-full-width="true"
-          tabindex="0"
+          tabindex="-1"
         >
           <div
             class="emotion-4 emotion-5"
@@ -976,12 +981,16 @@ exports[`SelectInputField > should render correctly 1`] = `
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-6[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-6[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-6[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -1101,7 +1110,7 @@ exports[`SelectInputField > should render correctly 1`] = `
           aria-describedby=":r1:"
           class="emotion-2 emotion-3"
           data-container-full-width="true"
-          tabindex="0"
+          tabindex="-1"
         >
           <div
             class="emotion-4 emotion-5"
@@ -1244,12 +1253,16 @@ exports[`SelectInputField > should render correctly disabled 1`] = `
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-6[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-6[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-6[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -1369,7 +1382,7 @@ exports[`SelectInputField > should render correctly disabled 1`] = `
           aria-describedby=":r5:"
           class="emotion-2 emotion-3"
           data-container-full-width="true"
-          tabindex="0"
+          tabindex="-1"
         >
           <div
             class="emotion-4 emotion-5"
@@ -1512,12 +1525,16 @@ exports[`SelectInputField > should render correctly grouped 1`] = `
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-6[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-6[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-6[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -1637,7 +1654,7 @@ exports[`SelectInputField > should render correctly grouped 1`] = `
           aria-describedby=":rd:"
           class="emotion-2 emotion-3"
           data-container-full-width="true"
-          tabindex="0"
+          tabindex="-1"
         >
           <div
             class="emotion-4 emotion-5"
@@ -1780,12 +1797,16 @@ exports[`SelectInputField > should render correctly multiselect 1`] = `
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-6[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-6[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-6[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -1905,7 +1926,7 @@ exports[`SelectInputField > should render correctly multiselect 1`] = `
           aria-describedby=":r9:"
           class="emotion-2 emotion-3"
           data-container-full-width="true"
-          tabindex="0"
+          tabindex="-1"
         >
           <div
             class="emotion-4 emotion-5"
@@ -2048,12 +2069,16 @@ exports[`SelectInputField > should trigger events 1`] = `
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-6[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-6[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-6[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -2112,6 +2137,7 @@ exports[`SelectInputField > should trigger events 1`] = `
   text-decoration: none;
   text-overflow: ellipsis;
   overflow: hidden;
+  white-space: nowrap;
 }
 
 .emotion-11 {
@@ -2167,11 +2193,11 @@ exports[`SelectInputField > should trigger events 1`] = `
         class="emotion-0 emotion-1"
       >
         <div
-          aria-controls=":r1d:"
-          aria-describedby=":r1d:"
+          aria-controls=":r24:"
+          aria-describedby=":r24:"
           class="emotion-2 emotion-3"
           data-container-full-width="true"
-          tabindex="0"
+          tabindex="-1"
         >
           <div
             class="emotion-4 emotion-5"
@@ -2187,7 +2213,7 @@ exports[`SelectInputField > should trigger events 1`] = `
               data-size="large"
               data-state="neutral"
               data-testid="select-input-test"
-              id=":r1c:"
+              id=":r23:"
               role="combobox"
               tabindex="0"
             >
diff --git a/packages/form/src/components/SelectInputFieldV2/__tests__/index.test.tsx b/packages/form/src/components/SelectInputFieldV2/__tests__/index.test.tsx
index bfb19e0c7a..4647954cbd 100644
--- a/packages/form/src/components/SelectInputFieldV2/__tests__/index.test.tsx
+++ b/packages/form/src/components/SelectInputFieldV2/__tests__/index.test.tsx
@@ -46,7 +46,7 @@ describe('SelectInputField', () => {
     act(() => mercury.click())
     act(() => select.click())
     await waitFor(() => {
-      expect(mercury).toBeVisible()
+      expect(screen.getByTestId(`option-stack-mercury`)).toBeVisible()
     })
     expect(asFragment()).toMatchSnapshot()
   })
diff --git a/packages/form/src/components/SelectableCardField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/SelectableCardField/__tests__/__snapshots__/index.test.tsx.snap
index 3dff627215..0e9a0545ab 100644
--- a/packages/form/src/components/SelectableCardField/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/form/src/components/SelectableCardField/__tests__/__snapshots__/index.test.tsx.snap
@@ -74,8 +74,8 @@ exports[`SelectableCardField > should render correctly 1`] = `
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-0 .emotion-3,
-.emotion-0 .eqr7bqq1 {
+.emotion-0[data-has-label='true'] .emotion-3,
+.emotion-0[data-has-label='true'] .eqr7bqq1 {
   width: 100%;
 }
 
@@ -124,6 +124,7 @@ exports[`SelectableCardField > should render correctly 1`] = `
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
+  pointer-events: none;
 }
 
 .emotion-5[aria-disabled='false'],
@@ -333,7 +334,7 @@ exports[`SelectableCardField > should render correctly 1`] = `
               aria-disabled="false"
               aria-invalid="false"
               class="emotion-7 emotion-8"
-              id="test-test"
+              id=":r1:"
               name="test"
               tabindex="-1"
               type="radio"
@@ -366,7 +367,7 @@ exports[`SelectableCardField > should render correctly 1`] = `
             </svg>
             <label
               class="emotion-15 emotion-16 emotion-17"
-              for="test-test"
+              for=":r1:"
             >
               test
             </label>
@@ -458,8 +459,8 @@ exports[`SelectableCardField > should render correctly checked 1`] = `
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-0 .emotion-3,
-.emotion-0 .eqr7bqq1 {
+.emotion-0[data-has-label='true'] .emotion-3,
+.emotion-0[data-has-label='true'] .eqr7bqq1 {
   width: 100%;
 }
 
@@ -508,6 +509,7 @@ exports[`SelectableCardField > should render correctly checked 1`] = `
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
+  pointer-events: none;
 }
 
 .emotion-5[aria-disabled='false'],
@@ -718,7 +720,7 @@ exports[`SelectableCardField > should render correctly checked 1`] = `
               aria-invalid="false"
               checked=""
               class="emotion-7 emotion-8"
-              id="test-checked"
+              id=":r9:"
               name="test"
               tabindex="-1"
               type="radio"
@@ -751,7 +753,7 @@ exports[`SelectableCardField > should render correctly checked 1`] = `
             </svg>
             <label
               class="emotion-15 emotion-16 emotion-17"
-              for="test-checked"
+              for=":r9:"
             >
               test
             </label>
@@ -843,8 +845,8 @@ exports[`SelectableCardField > should render correctly disabled 1`] = `
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-0 .emotion-3,
-.emotion-0 .eqr7bqq1 {
+.emotion-0[data-has-label='true'] .emotion-3,
+.emotion-0[data-has-label='true'] .eqr7bqq1 {
   width: 100%;
 }
 
@@ -893,6 +895,7 @@ exports[`SelectableCardField > should render correctly disabled 1`] = `
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
+  pointer-events: none;
 }
 
 .emotion-5[aria-disabled='false'],
@@ -1102,7 +1105,7 @@ exports[`SelectableCardField > should render correctly disabled 1`] = `
               aria-invalid="false"
               class="emotion-7 emotion-8"
               disabled=""
-              id="test-disabled"
+              id=":r5:"
               name="test"
               tabindex="-1"
               type="radio"
@@ -1135,7 +1138,7 @@ exports[`SelectableCardField > should render correctly disabled 1`] = `
             </svg>
             <label
               class="emotion-15 emotion-16 emotion-17"
-              for="test-disabled"
+              for=":r5:"
             >
               test
             </label>
@@ -1227,8 +1230,8 @@ exports[`SelectableCardField > should render correctly with errors 1`] = `
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-0 .emotion-3,
-.emotion-0 .eqr7bqq1 {
+.emotion-0[data-has-label='true'] .emotion-3,
+.emotion-0[data-has-label='true'] .eqr7bqq1 {
   width: 100%;
 }
 
@@ -1277,6 +1280,7 @@ exports[`SelectableCardField > should render correctly with errors 1`] = `
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
+  pointer-events: none;
 }
 
 .emotion-5[aria-disabled='false'],
@@ -1486,7 +1490,7 @@ exports[`SelectableCardField > should render correctly with errors 1`] = `
               aria-disabled="false"
               aria-invalid="true"
               class="emotion-7 emotion-8"
-              id="test-checked"
+              id=":rh:"
               name="test"
               tabindex="-1"
               type="radio"
@@ -1519,7 +1523,7 @@ exports[`SelectableCardField > should render correctly with errors 1`] = `
             </svg>
             <label
               class="emotion-15 emotion-16 emotion-17"
-              for="test-checked"
+              for=":rh:"
             >
               test
             </label>
@@ -1616,8 +1620,8 @@ exports[`SelectableCardField > should trigger events correctly 1`] = `
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-0 .emotion-3,
-.emotion-0 .eqr7bqq1 {
+.emotion-0[data-has-label='true'] .emotion-3,
+.emotion-0[data-has-label='true'] .eqr7bqq1 {
   width: 100%;
 }
 
@@ -1666,6 +1670,7 @@ exports[`SelectableCardField > should trigger events correctly 1`] = `
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
+  pointer-events: none;
 }
 
 .emotion-5[aria-disabled='false'],
@@ -1875,7 +1880,7 @@ exports[`SelectableCardField > should trigger events correctly 1`] = `
               aria-disabled="false"
               aria-invalid="false"
               class="emotion-7 emotion-8"
-              id="test-events"
+              id=":rd:"
               name="test"
               tabindex="-1"
               type="radio"
@@ -1908,7 +1913,7 @@ exports[`SelectableCardField > should trigger events correctly 1`] = `
             </svg>
             <label
               class="emotion-15 emotion-16 emotion-17"
-              for="test-events"
+              for=":rd:"
             >
               test
             </label>
diff --git a/packages/form/src/components/SelectableCardGroupField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/SelectableCardGroupField/__tests__/__snapshots__/index.test.tsx.snap
index 1a6613e992..40705ebdff 100644
--- a/packages/form/src/components/SelectableCardGroupField/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/form/src/components/SelectableCardGroupField/__tests__/__snapshots__/index.test.tsx.snap
@@ -151,8 +151,8 @@ exports[`SelectableCardField > should render correctly 1`] = `
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-10 .emotion-13,
-.emotion-10 .eqr7bqq1 {
+.emotion-10[data-has-label='true'] .emotion-13,
+.emotion-10[data-has-label='true'] .eqr7bqq1 {
   width: 100%;
 }
 
@@ -201,6 +201,7 @@ exports[`SelectableCardField > should render correctly 1`] = `
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
+  pointer-events: none;
 }
 
 .emotion-15[aria-disabled='false'],
@@ -395,7 +396,7 @@ exports[`SelectableCardField > should render correctly 1`] = `
                       aria-disabled="false"
                       aria-invalid="false"
                       class="emotion-17 emotion-18"
-                      id="test-radio 1"
+                      id=":r2:"
                       name="test"
                       tabindex="-1"
                       type="radio"
@@ -428,7 +429,7 @@ exports[`SelectableCardField > should render correctly 1`] = `
                     </svg>
                     <label
                       class="emotion-25 emotion-26 emotion-7"
-                      for="test-radio 1"
+                      for=":r2:"
                     >
                       Radio 1
                     </label>
@@ -459,7 +460,7 @@ exports[`SelectableCardField > should render correctly 1`] = `
                       aria-disabled="false"
                       aria-invalid="false"
                       class="emotion-17 emotion-18"
-                      id="test-radio 2"
+                      id=":r6:"
                       name="test"
                       tabindex="-1"
                       type="radio"
@@ -492,7 +493,7 @@ exports[`SelectableCardField > should render correctly 1`] = `
                     </svg>
                     <label
                       class="emotion-25 emotion-26 emotion-7"
-                      for="test-radio 2"
+                      for=":r6:"
                     >
                       Radio 2
                     </label>
@@ -659,8 +660,8 @@ exports[`SelectableCardField > should render correctly checked as a checkbox 1`]
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-10 .ehkrmld6,
-.emotion-10 .emotion-14 {
+.emotion-10[data-has-label='true'] .ehkrmld6,
+.emotion-10[data-has-label='true'] .emotion-14 {
   width: 100%;
 }
 
@@ -1029,6 +1030,7 @@ exports[`SelectableCardField > should render correctly checked as a checkbox 1`]
                     class="emotion-15 emotion-16"
                     id=":rg:"
                     name="test"
+                    tabindex="-1"
                     type="checkbox"
                     value="checked"
                   />
@@ -1235,8 +1237,8 @@ exports[`SelectableCardField > should render correctly checked as radiofield 1`]
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-10 .emotion-13,
-.emotion-10 .eqr7bqq1 {
+.emotion-10[data-has-label='true'] .emotion-13,
+.emotion-10[data-has-label='true'] .eqr7bqq1 {
   width: 100%;
 }
 
@@ -1285,6 +1287,7 @@ exports[`SelectableCardField > should render correctly checked as radiofield 1`]
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
+  pointer-events: none;
 }
 
 .emotion-15[aria-disabled='false'],
@@ -1481,7 +1484,7 @@ exports[`SelectableCardField > should render correctly checked as radiofield 1`]
                       aria-invalid="false"
                       checked=""
                       class="emotion-17 emotion-18"
-                      id="test-checked"
+                      id=":rb:"
                       name="test"
                       tabindex="-1"
                       type="radio"
@@ -1514,7 +1517,7 @@ exports[`SelectableCardField > should render correctly checked as radiofield 1`]
                     </svg>
                     <label
                       class="emotion-25 emotion-26 emotion-7"
-                      for="test-checked"
+                      for=":rb:"
                     >
                       Radio 1
                     </label>
@@ -1681,8 +1684,8 @@ exports[`SelectableCardField > should trigger events correctly 1`] = `
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-10 .ehkrmld6,
-.emotion-10 .emotion-14 {
+.emotion-10[data-has-label='true'] .ehkrmld6,
+.emotion-10[data-has-label='true'] .emotion-14 {
   width: 100%;
 }
 
@@ -2049,6 +2052,7 @@ exports[`SelectableCardField > should trigger events correctly 1`] = `
                     class="emotion-15 emotion-16"
                     id=":rl:"
                     name="test"
+                    tabindex="-1"
                     type="checkbox"
                     value="radio 1"
                   />
@@ -2118,6 +2122,7 @@ exports[`SelectableCardField > should trigger events correctly 1`] = `
                     class="emotion-15 emotion-16"
                     id=":rp:"
                     name="test"
+                    tabindex="-1"
                     type="checkbox"
                     value="radio 2"
                   />
diff --git a/packages/form/src/components/SelectableCardOptionGroupField/__stories__/Error.stories.tsx b/packages/form/src/components/SelectableCardOptionGroupField/__stories__/Error.stories.tsx
new file mode 100644
index 0000000000..5b78da99ed
--- /dev/null
+++ b/packages/form/src/components/SelectableCardOptionGroupField/__stories__/Error.stories.tsx
@@ -0,0 +1,45 @@
+import type { StoryFn } from '@storybook/react'
+import { Stack } from '@ultraviolet/ui'
+import type { ComponentProps } from 'react'
+import { SelectableCardOptionGroupField } from '..'
+import { Submit } from '../..'
+import centos from './assets/centos.svg'
+import debian from './assets/debian.svg'
+import ubuntu from './assets/ubuntu.svg'
+import { centosOptions, debianOptions, ubuntuOptions } from './constants'
+
+export const Error: StoryFn<
+  ComponentProps<typeof SelectableCardOptionGroupField>
+> = args => (
+  <Stack gap={1}>
+    <SelectableCardOptionGroupField {...args}>
+      <SelectableCardOptionGroupField.Option
+        value="ubuntu"
+        label="Ubuntu"
+        options={ubuntuOptions}
+        image={ubuntu}
+      />
+      <SelectableCardOptionGroupField.Option
+        value="debian"
+        label="Debian"
+        options={debianOptions}
+        image={debian}
+      />
+      <SelectableCardOptionGroupField.Option
+        value="centos"
+        label="CentOS"
+        options={centosOptions}
+        image={centos}
+      />
+    </SelectableCardOptionGroupField>
+    <Submit>Submit</Submit>
+  </Stack>
+)
+
+Error.args = {
+  name: 'os',
+  legend: 'Choose your OS',
+  helper: 'Choose the OS and version you need to install on your server',
+  error: 'Select at list one OS',
+  required: true,
+}
diff --git a/packages/form/src/components/SelectableCardOptionGroupField/__stories__/Playground.stories.tsx b/packages/form/src/components/SelectableCardOptionGroupField/__stories__/Playground.stories.tsx
new file mode 100644
index 0000000000..365b5253d0
--- /dev/null
+++ b/packages/form/src/components/SelectableCardOptionGroupField/__stories__/Playground.stories.tsx
@@ -0,0 +1,5 @@
+import { Template } from './Template.stories'
+
+export const Playground = Template.bind({})
+
+Playground.args = { ...Template.args }
diff --git a/packages/form/src/components/SelectableCardOptionGroupField/__stories__/Required.stories.tsx b/packages/form/src/components/SelectableCardOptionGroupField/__stories__/Required.stories.tsx
new file mode 100644
index 0000000000..4d2998d48d
--- /dev/null
+++ b/packages/form/src/components/SelectableCardOptionGroupField/__stories__/Required.stories.tsx
@@ -0,0 +1,44 @@
+import type { StoryFn } from '@storybook/react'
+import { Stack } from '@ultraviolet/ui'
+import type { ComponentProps } from 'react'
+import { SelectableCardOptionGroupField } from '..'
+import { Submit } from '../..'
+import centos from './assets/centos.svg'
+import debian from './assets/debian.svg'
+import ubuntu from './assets/ubuntu.svg'
+import { centosOptions, debianOptions, ubuntuOptions } from './constants'
+
+export const Required: StoryFn<
+  ComponentProps<typeof SelectableCardOptionGroupField>
+> = args => (
+  <Stack gap={1}>
+    <SelectableCardOptionGroupField {...args}>
+      <SelectableCardOptionGroupField.Option
+        value="ubuntu"
+        label="Ubuntu"
+        options={ubuntuOptions}
+        image={ubuntu}
+      />
+      <SelectableCardOptionGroupField.Option
+        value="debian"
+        label="Debian"
+        options={debianOptions}
+        image={debian}
+      />
+      <SelectableCardOptionGroupField.Option
+        value="centos"
+        label="CentOS"
+        options={centosOptions}
+        image={centos}
+      />
+    </SelectableCardOptionGroupField>
+    <Submit>Submit</Submit>
+  </Stack>
+)
+
+Required.args = {
+  name: 'os',
+  legend: 'Choose your OS',
+  helper: 'Choose the OS and version you need to install on your server',
+  required: true,
+}
diff --git a/packages/form/src/components/SelectableCardOptionGroupField/__stories__/Template.stories.tsx b/packages/form/src/components/SelectableCardOptionGroupField/__stories__/Template.stories.tsx
new file mode 100644
index 0000000000..4bee3e8ad3
--- /dev/null
+++ b/packages/form/src/components/SelectableCardOptionGroupField/__stories__/Template.stories.tsx
@@ -0,0 +1,38 @@
+import type { StoryFn } from '@storybook/react'
+import type { ComponentProps } from 'react'
+import { SelectableCardOptionGroupField } from '../..'
+import centos from './assets/centos.svg'
+import debian from './assets/debian.svg'
+import ubuntu from './assets/ubuntu.svg'
+import { centosOptions, debianOptions, ubuntuOptions } from './constants'
+
+export const Template: StoryFn<
+  ComponentProps<typeof SelectableCardOptionGroupField>
+> = args => (
+  <SelectableCardOptionGroupField {...args}>
+    <SelectableCardOptionGroupField.Option
+      value="ubuntu"
+      label="Ubuntu"
+      options={ubuntuOptions}
+      image={ubuntu}
+    />
+    <SelectableCardOptionGroupField.Option
+      value="debian"
+      label="Debian"
+      options={debianOptions}
+      image={debian}
+    />
+    <SelectableCardOptionGroupField.Option
+      value="centos"
+      label="CentOS"
+      options={centosOptions}
+      image={centos}
+    />
+  </SelectableCardOptionGroupField>
+)
+
+Template.args = {
+  name: 'os',
+  legend: 'Choose your OS',
+  helper: 'Choose the OS and version you need to install on your server',
+}
diff --git a/packages/form/src/components/SelectableCardOptionGroupField/__stories__/assets/centos.svg b/packages/form/src/components/SelectableCardOptionGroupField/__stories__/assets/centos.svg
new file mode 100644
index 0000000000..92cb5b3869
--- /dev/null
+++ b/packages/form/src/components/SelectableCardOptionGroupField/__stories__/assets/centos.svg
@@ -0,0 +1,9 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="40" height="40" fill="url(#pattern0_18586_112473)"/>
+<defs>
+<pattern id="pattern0_18586_112473" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_18586_112473" transform="scale(0.01)"/>
+</pattern>
+<image id="image0_18586_112473" width="100" height="100" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAK3ElEQVR4Ae3d728UxxkH8LT9H/qylUJs0tL2VaSqb5r2XdVXadUXVUXaNCltSdWSvmnAlSKlUkAySI0EVAnllwPGNhBccDAkwW1pbMWGGI7gGNtng2MTgW3sw8bYPp/vvtUzu4+ZW+/e/prZ2zt2pWHs893eznzueXZ2d2554olkSXog6YEq7wEAX6JS5c2sjOaZGP8AQCVBKSebhAFzSVDKBSJjZG+eBJUEpUwaJsZeAiCITHOtKBIK/S1JX1H5ACjGaHoKGSrNtXKk7I1qex7r93HESFCi/1wA2FOUphjBWhdHyp7ot/QxeEfPGIyToOj7VPjGSFC0Yuz2lKYYwVoXR8pufVv6GKwZQDgMxklQwn9alGE8TigAvgbgBQ3lQ0pTucnLeNizFQ+7/7KmzHdtMY49uMOl+mH3q1hM7Vxbru3Cysx1WjUtXQC2aijPhP84BlwDgOfMxkVe5RenHEFWMjci3x7pDV8J2J3hX8YgH33+Glr7fxq6DE+/J9o1er8Drf0/c1zf+Gwn3EDuXPkcB7673bYc/N4ODLVdE+/V13LJ9jlOr3V6vOU5cfKA1ll+kLNDv8L+3m+GKn0TR0QHDd47hQO93yq5rpGZdleQ2903sfvJbY5lz1N16D/xiXjP1OEux+eVWof8t4bv14t1VQWIHwyCVwFCnakSpWpA+ibe8RwZHIWqQNagHAoeKVUBEgRDZYRwyimKlIAoFQ8SFEMHiIpIqWiQvokG32mK05UukDUoBzt97egrFGQD/O7AZQj+WeU+hNMW10Xpi0Zf6+o8wVQsSP9kkxkd72J/74aSw1sGsNY6QQjgs+PGcPj60e5qB6FjlQ24MdUcCkUbiIzR6B2DoqtCI4QPHsOhaAFxw6DUVSJ9VQjIBlCKSt35p01qklFO+kpfykEIo+WyiNrrdpGxrg6UvkqlsAoAMTBEK4ESKC1m+vKOohRExjjWszYKCKOxm5vhiBJzkEcYdG7qZuZ90SDnSPGHogzEB0b95iOgQotdpMQYpBiDThQevPJtzygDUydc05cSEMJovmR0sEtkEMSbT24TxQklpiBrMXjI6g3luOggN5TQIBJGX5NDmjrWI7aFMfg4hWDsUGII4oyhGiUUSAiMUigxA3lBjKboI+V2PUNFpAQGWVeHviYjTfmNDMbg2hopDc/uFBEVi+sho5kOsTFuGH4ihdIWLXbpKxBIEcYl29EUIdFiTVOMYK1llMHWq+K15Qb5CW+FV4wgKDemjhft6H2DCAyjsylC1hzgSX/3isE4MorZF38Of3E8wBrMrwSco40Yn/2f62VXhpBrL+mLI0VG8QUidbYrxsvGaIo722tNKG9uMc7RAeiM/KsQJgZ9W0ks7UO/tjkS59MkpesgKJ5BJAwa4tpHhrFPqX/5CP5e4hq8G05dTR13B9XRfZNLxhjvGhYbEXaSgz+UFozMnHOf5NBzE9fNoasrxh+OhsIgLAZJpcYYRj+KjEEzNto3H1UCQmnMD8rs0pgryPzEnNi2KDBkkO3b23DypHFeTGukWDHoQs7Z3xmnEsJGCO9XvKAM3jO+S1hYWUSmqcZmslwNCksZA6Plsm2a4iP0nX9sDB0ZnMo4Qt54ow1Pr9+qF8UOgzZENYjXSJnLjosOX0ofs6DUgB6j5eHkXGQYcoQQSG3Nq/pQnDB0gXhBoX0IUFikjn+E8ggDwPTtHstEOekIfdef1EWGXYQQiBaUUhg6QdxQaJRVQH4SwAFG4cgwH0sVzVwkDPN6x64t6jHsIkQ5ihuGDJJZHMHk/DUN5VMsrdw3UtDyxOr6l3IZBqFbaggU8STjZ3oslZ1fwt2rY7ibGsPCvXnx5+npeZw+1IkTezuUl3PmUT6nLAZREileMAjk3Z/vMxpNDddVUuNYzCyY/Y0vANDVIipn6XjW3Nb9AKiI76YDoOmQ/DyKJBDGtdQYaFiqs7yypVGkKxkkFIpXDAKJquyt+SvS7avf69hhPbFgbnPRjQLMx0T00DCURj7WTor6d9+jrzhiMLobiowURwzG94wSZww/KGY7KH2JY4E4RAZjcO0JpRJA5FmFdBQsRwX/XDUg1KA4o1gxaFsZwVqb7YjV/sNXdMgNiiOKHwxuSxxRPKUqboBce0V5b1MDVrI55DSXQr7Aw958oVDIGgUTvM0AdgDYLP3eAxSyRkGeXpzP57G8nNNbsjn87fXTtqO5wBhSo+gAS1zzoDO79CnlnSvXfC6ro6MfTU3dyktzczdGRsRhBNLpu2g23+PWrSmsrOQf0LaaGNTnpCZQ6MAwvzCJbLpJlPzsiADNz40gO2w8xn9TVo+eEe+h5cDQKwqDbNz4tu2ngvNmkFr+RB1r/Bjrax8dR5w69YkAYYxbmQ9w90EvgQgUAslN9EhngmuQHTGmGK3e8Ez6Xru411bI32fPPGsLIrdDyen4UulLF4jcCCsG4RIIpS3qAZoVSaftG64+I6OMF4PQDc5qkB02ZkjqQLEDkduhBMMtUnSAyI2wwyCQwcE74tPIGHw9RUJBfu6WFCHmHec0olhB5HYoxSiFohpEboQTxttv/Udg5PM5ERmMwTWh5PLGua+Fy69FhiKDyO3QguGEwpdwVexD5Ea4YXxxewZLyw8cJ1bMLAyhsEyXcAtwRjG+NKQqfTFIZJdw7VB4kkNYED8Y5899itbW3pIg0wsD4sY1dPOaqFAYJNJJDnYolD9++fy+wKMsvxjfeHqb2KmXihABMtGD+ye+I2CiQJlt+6FIpeY/+mecMAbX5uhLTJS7eHEg0OntIBg8yvICQsNZbyjGJLfA6au5Fstj7QwS/UQ5CWV1Kqnfaw5BMfyCaEcpvlsdoZRnKimh8O2ZLlz4THw6vKKEwQgCog1FwsiO/osjpPy3Z3p+4z7QyIgWN5SwGEFBPKOkPaYvCWMp3YjZMz+IDwiNsujUhhuKCowwIMpQLBh0FoBHWeX+OoK4xR8Pe0uhqMIICxIaxQaD1hlLEOosOxSVGCpAvKLwXK/V0ZcDRqxB7FBov0KL2xE4HfTRcQato1Shk4teh73UWU7Fy5BYRiEYWmifYZ1XHNsI4Y6UI0UlBq1fFYjfSHHCiH2EWFFURQavVyWId5RG28jg6It9hHDnUaRQ4d+55rO2XtMUv45q1SBeUaxpijGorhgQuSP55zAYukC8oTjvjyoWJCyGTpAwKBUJQsPfM6eviJFKw+HONWmMI8it1pGyVtNP83osj50X27jY/5bjCG31+eYoriJBqKNpWMsohw99FAhFG4jAECew4QeDcCoWRAWKFpAQGBUPEhZFOUhIjKoACYOiFEQBRtWABEVRBqIIo6pAgqAoAVGIETuQ+vp2vPTSgVBl06ZD6P7YuFXHhx/0lVxXV1fa9eTiSmYA8/990b5c/I05+QHIjp21f47Tax0ep/+WyVzKf8WQtyTKOptznpdFs07KuJQV5KsAfqS4/BjAv6lDRzMXcD79W9vSPvSi40S5toFf2L7m/eHf4858L1vRRF/V207r+zpPAqmaGsBXAIg729D/pMDTRMPU8n1UaNZ81XRWVA1RiZJgKFJTgZJgKMLg1YRBSTC4FxXXQVASDMUI1tX5QUkwrL2n6XcvKAmGps53Wm0plATDqdc0P26HkmBo7nS31RejvLP632EkB31uPafx7zKKeT4kOQLX2N+eVi2hJBieeiyCJwH4cgRvk7xF0gNJD5S9B/4PaQv3ck2g594AAAAASUVORK5CYII="/>
+</defs>
+</svg>
diff --git a/packages/form/src/components/SelectableCardOptionGroupField/__stories__/assets/debian.svg b/packages/form/src/components/SelectableCardOptionGroupField/__stories__/assets/debian.svg
new file mode 100644
index 0000000000..4a300e588d
--- /dev/null
+++ b/packages/form/src/components/SelectableCardOptionGroupField/__stories__/assets/debian.svg
@@ -0,0 +1,9 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="40" height="40" fill="url(#pattern0_18586_23790)"/>
+<defs>
+<pattern id="pattern0_18586_23790" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_18586_23790" transform="scale(0.01)"/>
+</pattern>
+<image id="image0_18586_23790" width="100" height="100" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAALu0lEQVR4Ae1dCYwkVRnu8Yq7OzNd//O+8L42UVC80BjXC1yZnen6H+CdiPcRFY1HjAE0imIUMYKoES8iKojJajRKRJfbXdyd3e76n4IG7wUVD1hxQWUX873u6q2prumuqn41VT1Tm2yqpuu9/6z33v/+41WjUf+rJVBLoJZALYFaArUEagnUEqglUEugahLYObPl3o1GY2rPjP8Yo/zjO7TwhKrRuOrpMY2N9zDkv8Io/pko/rcofatR+k6j9HZR/BVR+lOBap3QaR5LEMbO9fwA47WOWJzefB9R/Lr2LD8DSlz1giqawWDD/P1E+R8SxX/uKQBKSP5P/FtDumOI/xZtI6T/0/2bbxDiLxjlv2hbY9PdiqZ9VcE3s/OPEo+/aIhvjwrX1T0ULIo/DIWvKsG5ZiZQCw8Rpb9qSN/hSvgj4OwXzz9DlP96Q3yeKP0dodbLXPM1cfB2No68u/H4VKP0/hECTJ6ulpvGcvyOKa7TbB15ZWN+ZuIE6YJgM72wUUi3y1ZEDP9+Q3yaIX7/TnpB0wWflYcBKygg/rxRvC8mjMJHQRZ8Qvo3MstPrbxAxyEQZqiQ/kcWwUTbWsuJ+DIhfbaQ/zFYT4Gn32GIXx6QP2c8njdNPk7If6sh/yOi+CKj+FeG+GAUTtp7If1frDPj8FzZvgHxsdhLpBVGtJ0Q/zNQ/rt3ey0PDJrGpuksjGJfAqUZ0hccMoeXMaMT1h9YZlnwVb5t4PGrhPh/USGnvMecfk572r+vKyZ3zPj3Ckh/AEpOSYOdSkXxma5oKBWOIX5jnikDZjBGVVHEQ8mG+FsZlTLZIwUjIwvDRvGPMf8HzdbRnSY/oihlROEazz8xy0Y08PzXRPtPzH3QnH8KFsVUCiH9V7g2ymJOiJ9llL4lHa18O3gri9bceNPuMYT4epjCuRE56mhmW09Lu67AJG43jt7gCHXxYLBopnnbhPTvjfI/vdtrPax4qkZjgFLSeg0mZpHH3D/KooKTL6DWKz/YaNxltJhWtoU1jxNM34EXjPSBKozskdIJiD8zQHyEQVH64l6waSSsshoEHn9yGA/9Z6S3lkVjKrxwzA1zicBlcmGjcddUwEpshMCYKP5FX/CRF2rgtwqsf8uKynj8tgGCQ2Y8PnXZjhV8YC2vFC4XuHEqRz7WgoDmn2iIb0pUiKdPqRzRKQgKFH85kR/SW+ERhlUmxGdVbtRLU+tEwjE6SH8iBe+VbLLo8UMT91K9aUqUfpd4fHLl4vai9M+TFCLE36wcsRlVL6S/EecNjk4kVlzdOGqdEL83I8him/d2uQOxDFF8zbbGpnsWi70LfXtj8yx2+nDFwzNrEySI3xKohWeOO52Ix8+NK8S65Yl/COxw+68Ej6lxBMRfjxNsSN+M4Z4aSM6Gdnet+NtDXerENwnxx/MmNmB9TM5+4X0gG3lilTHjEeZM3NkSX4rhnFPOI7thRAjx16IvghBfgfh8h1qb201+cmdGP66j/KOwARXiz4riX8LzPBJ4QoPEl07pO9vNLQ9Hc+BL6LbyPwXkvykqlPAe01VR1CBDxSh9rcWF3bLic9sz848dhQ9TF4wPuHWy5mcFnv/2kLf+lfTlSOID3lAxo2go/Ll9K8N9RuQaeOwXgbw7Ivk6CAUbN/H8w7PiQaYL1r0sxgbWp74iQj6JfxBM+48H/jBzMistTtsvrp9/YGLgiXhXFmazEGWT6Kwy9MUO0nVSp5gGzdYjjdK3RZVi/XU0d1iP/qnS/XLL7cpF6WOyCDlt24D0m42dovT2nY0t69P2c9VOlP5TVCF2lJL/Plfwx4Yjin8yQKDiHWMDTgAA87WnjFuwhiQ0Kfwno3hvnF/T9J9XOOI0CJD9keRiF/JfmqZ/1jah8hHezdrXVXtR/Me4QiqTfooNX5Ltj4wOVwII4SABuysIvgFe2PD3lb4iSjigEMXXVKZOJT6nIueqCCEZT58CQWD3XQT8tDCF9K/jCsFCjz1RWhiFtjOoywhNQAiM+HrXCLF4C/EfgAeJ0K7hZ4GXuIaQviALjELbDsyppC93jTBQ/JLu6LCjL7WZ6poOwBsIvCFW4vknFoErF0xR/JfYCIFn1+k/uLetQki3nQLOCMw6L2PBKiH+buC1NmUEVVxzOBCjCkEc2jU2rBs9hWxzDTsLPLhmDOnFKL8dz38OahqzwCm0bTxxGm+za4RCfLoVAvEueAZcw08Lz/rBbMpSL0Gb+KADT0Fa9OnaidL/ir4xoaMtXe90rcIRAjxtWnh2ul7uWxmaOyzKK/xoyKh3j2kMiPE6jyJcJrbOI7Tkep7VMUjO3TUg/Z4lCiE+vTLmbsiVsfm4h2os2rMLTw+fubpCyaEgUKTpCm5WOKK0CelAYWpl3O1RRuIK2ePNPyn63MU9dv49H5Z1t7uAmQUGIoHxxD8ExrLAWLG28ZQfpAEVgVyIrw7fzjzxj3FoGkgDIj4YxkDGgVtIXyH991BQuPaCPs5xdY/W6E6NCKU6RzAEoCG+LOQR05aQvmpI83IfxaesjqdbRVBkI3yhp9XO3ysTv7abwdDlTvoAnIiVHR0Q/JKFDpZQgdmJtrq2b23pxaK9vtjwCend4egwxJcW8bI5hSnEP+0TDGGR7hQVurUvwJIsEz7XKTMRYDjQwBD/LsLbfpw6FGlSzVtkJUaItolyQdN/oWtqMRowfXRjMHxFiBO7eNe42s3W86NVVNj8wkWSN6fLNX1D4dkjKMJppHdFqHVop5wPUbwPVzyyO4R4T18pODlozKAV+mNtQEpoNAoKxRTFT04xDO+GU91CwYTXosxSKMMeUrPhxfe3qUAR68cQ78q7B+rWs+hLBoJPiPVML2wcLoGKPe0etXdopw6lFFkrAd8RkpwDz+de4Or88EXA7hknzCFbcZSY4CjEFBg0+bXxIJvlQfFFlcizGsVI/DnykOJBGyTOxdu5/NsmV3h8Es4xMbPHKBsviZ2xhUx8OCVx6AA2q6h5tAfeqNYJqOWAuZ5YYqD4OijbJb0rDkuIv9d/S23cW984brZ5CiamULzfTTrwj0emS9zRGaVp5D1pMR6/egXoTsHamE2WeGPDhb2gNNI4qdioCfGPROkbIVBrISk+U4ivHAgNLDE+eJ/dgROfVpmMkThzef8+lKITWUtIC+b4vDCz9kOcxCh9Cdwqu2f1o9HfltghKdtrHYFkNtR4IEO9Vw9famw+K3+Z2xviYHBa4L1CfH57HT84M8CcHWBkoLzMlg6Q/pyNYTT5OOyNYL6iNCHrsU45SSm3Wzx4s0Q5pBezpv674MaWmnn+4agVgY/Nxr+7BzG7AF9tGPbw4pilE1WKEL+h2hysQuoM8fejSgjvcQAN8nJLT9VfhTIfyhLyk0IlRK/I/8XcXmR521DC1vJDUbwjqoz+PfE5a1kupfGOXW5fCVG7H0Gl7qH4pdG2VhFP4asFyUrh89aqUErl21Y6RUdH7x57klIJW8vIjdIXJo0S8fx3rmW5lMb7nnVzD4pG3ULl4Kys0oha64jh7AsV0b+SviNvIGmty9MJ/4mbRdKyUgfSOGFiNQHpfQdqoHIVR4evJj4nihckYCdV6yIev5Iu+okSWtHE2rPf46Yw6ZtxCEzRuGv4y0ggIP5of3HvK4f3TtTp0MvwNrE/G6W/FFcKUv0nlqFJJxxJBEmfh0C8pOwa9EmXbW76ERcJj1haMlpszTfP5wZcdxxLAlPLHOV9m5DeMhbkunN+CSR+SIX4IL6sU5vE+eU6Vk+7T4kdDIZAV/jxr7GA153zSaCX0X4oT7ebAXmreHwSIK6KjMJ8oim3F04MtVmI/X2KTd6+CjWGRR2qWS7HE4AdiWw4mXrgLGDSB4o6rW4CxFI+ich4xKYxmqOLYhp8tL586tYwBSjOQU3IkgJT0ltXXZL0JOrYlp15fDIqpnqnO1yLUYSjxJFUXcdZStQq1hpbhEP+HCqh8FUE5Bh3PH+hcqf0lCinGnUtgVoCtQRqCdQSqCVQS6CWQC2Bikng/5T4f/AL21LEAAAAAElFTkSuQmCC"/>
+</defs>
+</svg>
diff --git a/packages/form/src/components/SelectableCardOptionGroupField/__stories__/assets/ubuntu.svg b/packages/form/src/components/SelectableCardOptionGroupField/__stories__/assets/ubuntu.svg
new file mode 100644
index 0000000000..50679b4a2c
--- /dev/null
+++ b/packages/form/src/components/SelectableCardOptionGroupField/__stories__/assets/ubuntu.svg
@@ -0,0 +1,9 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="56" height="56" fill="url(#pattern0_18224_181061)"/>
+<defs>
+<pattern id="pattern0_18224_181061" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_18224_181061" transform="scale(0.01)"/>
+</pattern>
+<image id="image0_18224_181061" width="100" height="100" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAS8klEQVR4AeVdC3RU1bkeeSjBB5DZJ1Rvl9fW3qr1anXVF+GRAMmcfYK0tBYLVqkI+MRrQXttV4siFtQqpWpZiljFhRUfrSirvq0K1YtQ6guLkjn7ZJJJSAh5hyTkMfnv+veZmczjvB/JBM9aZ82cvffZ+9/fv5///+//BALD5No/+xQSloTzw2LwB0wiP2eUrJVF8phMycsKJS/hzSjZxih5nIlkHaNkOaPBH8kh8j05NLFgmFQzN8msmDN+vCwKlFHye0bJHkZJJ6MEXN4djJJPGRXWK5R8PyqelJ+btc8RqlgZ+bYsBn/LKNnvEnjLjFMoYQolv1Nowbk5AsPQkvHFzBODskhWMEqig8UEg3JqGRXWVJQJXxtaVIagdEUMXqRQ8poBOJZbuS95iGS7IgpThwCawS0SK8ko+cQXEN3PMVqNICxLgjS4KA1Caaxs4jnDjBGZzPkiTPMnDQJU/hax53uB0YySp4dRj8hkRObztrrQxOP9Rc2n3JlIrmCU9B1FzEgyRxHJYp9g8zZbCASOgbmBkUwkrx6NjEivU/CD6Nyv53mLoMe5VYSCZzJK2tMJd72hS7bMHMy3Ww4VFHoMozfZMVFYmIOADRYzl3mDoke5MCn4h68wMxJM3+wRnO6yYSLZOmyZIQnASsdDeNpxUF44gt/hojHAxPwEyHZ/33GHpsu3GSWvDFtmUAJy8Vg4tP5/oevznRBrb4a+poPQ+dF2qFuzCMJTRgNDhtnfcP7TJazOXh/OKym5ZBxEb5gGsc520Lt6D1ZDxWXfdMIQfGePM1QdvhXXOzgldmjfE4NQtaRQjw9p4f29PaB8/z+AUUc95R8O4bX3Wlz5M7Sg2h9GkvTiHNHX3pwGvNFD1793q8OXgzJlSp6zh67N1AoVFjkYU5NgDPm7YhBqVy0wwl8zrmrB+U7nE5Ap+YVNmM2T4w48vunLHXAdtNjw1GPh8PatmqAbBTY+fhfIM09yXHdZKphsjrKNFFwckgs78PiqRy4dD/KMEyA8bQwfTsKTRwK/p4zmYRiHaXiPTFkpIUO69u0xwl4zrvXVTRAuynPMEEZJr6dCyaFdUeFeYRyUXxIAZfbJUH2LCI1/ugvaXn8aOj/ZAd3yXug5UMHvbmUfdH68Hdre2gINT6yCmuVloMw+hTOLSQWceZ2fvq8JulFg69+egHDxWDcMAZkKO230Af2kjJL5gz/2C8DEIAey8uoLoOUvf+SAG4FmFHek/GO+6cN9R8tfHzFKqhlXt2axm81ikpGKGLxJH2kLMe8WB0YNughdEkAuOQnq1/0cemorNQFyEqiUTQRWVgCVC863/bqLnXuSGYlGXTlr3AQL0GsnYRL5cyKjwfrFZenhna/ZBs3shYZHfgVy6TguJjm8Y5tZ8mR8w8Y7gbmY0LNxE97QRtskNCzmn52dmQ+idOwR08emTcLKpScnAfHqT3/3EZCnHw98LinKg56qctOs2999EcJFx2W1cre4VEikyAT+7OjB0YELgD2i/b0X4eD9N4IcmsArj8A1bVlnCpjdBO3bX4LyySP50BWeehw0v/CwZha4Q69/6FbAVZlDeZYhE9EeLBtxgxClTJjmthWYvh/KB2XOf0Jf8yEOSn9fL8gzTlQB4L3mBOjv6dYEzE1g89YNyVUXMh6Xxwd+PRcaHlsBhx6+DaqXSyDPON7VvsO07ijYpGSeAQvSo3zvHaUToGrxxQD9/WnY4vISV0JYIQSq/oGlafFePXR+9r66HMaycJ8iFQAL5fOVHf+Pm04xaNjKrYBukuZAOuo6T2jEZpKRO0JLJ0DNrbN0sY1ccXZymAhPGQW9h2p007qNaHv7eYguncHLw5043jh/1d4xH2puuxRQKuwnFpZsvny1KBTzoWrRxYY4diufq0NKvJUiMHoX6jC65c+4PqPr8w/hSPkn0NfSoJfcMLy/uwv6j3SmpalZJg0sNhyIaiwwc5dOv1CD0SLcQiYOW40AypxT0yqs91B399XqEEIJ3113faGKO1CB1Pz8QxC9oYi3aty9oyIJNX78nnos39HjMFS1eBI0P7MWemojesVYCuc91h9mcBwr6NdO02VK3PDZIeAGS2JJXU31tagTuBkS/T1HIMyXqKoeInLluVBz66UcfJRTqfoJIx0FzgsCXyTgsFe1ZBJ07HrDrFjN+FhHG8jTT0gOo143WFkSHtZlCKOk2usCMT9cYra9/ZxmhfUCW1/ZpAKRmGDdTLLYIKaMhsqFF0BPjaJXpG54x+43ARnrBzaMklZNhuD5DF8KFINcyKdbW52I1pc3comu1zSFJ4+Cxqfu0SlVP7h25ZUgl6r7JK9p0hTPy1JwtdcFYX7hacdCX1uTfk01YuruXsjF6H5synC4w6V1ze0/0ChZPwiHUb7Td6bONetdj2b1EkbJl14zBIWEDRtW6NdSI+bAL3/EhYte05KZH+5z0NDBztW8ZZ0vvZZJpC6NIaxkwrhMgt0/CxAuzoP+vj7Lda5d9bNBYUaibnJoPN9vWCYQIC6GN1pQGCxujFZrJRNOTTIlfsDSrFvZixeDUP+HZZbr2vLSY1yulQBrsH5x+Gp8arVlOhs3rebGdV7TJ9Pgz5IMiZ92tQe4EbcpgfLCkdB7sMpSRXE37sIwzSXdAoQLR0J31X5LtPa1NkI5GtGZ1N9B/NOpDMGjx94VghuzhRdYqiAmit5Y5F3ZTuohCRC56rvW6b15plNbLaN6KqkM8eIc+EBhJeOg+S/rLVUQ9eK4FPW0QThgCvbQw//3qiWa29/a4sfkHuMMQQ8JtsFACakYTFp+sIz1OYo0rAoF1d7hwyRplym8l5xriSEoL+N6FbtlmKSPhCZ+I4DuKuwwRJ6p6izq190CbW8+Ax0fvgHNzz0I0ZtL0uaB6I3FppVD2RSfO0wItUOfm7RIS3fll6Z0Y4KKy073XJwii2R6AN1MWKoEih+mHguNT6zSJbjngAKReWfxVYiq+LlcNy1GoMZOlU15OH+5YC7fNz12hyHNicjaO67wXGciU3JtIO7IxXQMR2a0/f35BD2Gv5XXXMjzK588ytBgAXuRQ0NmU3otNbJM5kkCVC44z7BuiUiUOnuuL5HIfQH0qmNGPOq669fenKDF9DfWdRjk4uNVs5uf/rduelU0kgPzRwpjUH2bqcnUqkDHztfcWjNmNSqFCptwyNpgxhDUNcQ6O7To0g1r2PAbrtPAFVRPtZyVDpVL5ZMCWUSZ0eJ3fPmkEdB76EAWvZkBPdGw5xJgdDEVQH9ThpWUBIheb0/mg8R3R76A8knHcMVR25tbMusDR+TPcmpCT2JQOh6ql1E4sGLewH3HfIgunQ7Rm4oH7uumQObqMplHSo+zGbYDewg6/jJsqXX3LMkC1CwAFTtoDI0TZdMTd2cl79r7IWeWWdlDE4/DqJXbGDcHtO+2xJCD916bBahZQKzzMB9jceJr3HhnVnLUgeNQ6IDoQXjHCjN8mft246SObvH0K4lDlk0xNaLfU7kfyi/BIWsMtL2+OYshaJDADdGMyh6KuFA+VF1z0cDQlBimls6AyqvOg8j876j3vDOBhbw2FQp+gHPIRkOGoI1UUV6WRUYWwhkBXCoamgDlU0bx+SQjGmJtzapBwlCAblAmHo/ura/OJDfruaeGeT6p4xHzgJVD/zjsHHrkV1lE6QX093arln9lBRCZd6Zesniv9KXr6/d4A2Zgw+SNLxbTpTkR0bHrTc+XvYySzThkLTfrIRiPSv6Of72boMfwt/p/SvkuFsXU7Tte0k1btWSy5+IHK3XRTYPyrJ+eo0tvakTzC3/03NxUlsgDAZkGf6hLYGpriotOmrc+mkpX2v++pnqoXHShuoMVg1B9SygtPvOh6Zm1qj1vajlD+B9Hgob1t2eSqflce9dVnhziScNeJNcH0K9tWqARIGjrVJwHyg9Pg8Y/reSCRVwt4T6jdsU8KJ+Kiht1CEJbKogZq297ayv5HGO5fCPaPIgLTx3N90eaHMgIjFx+hg+9OzgzgE6GbQPCxe/5XOWKQ1mmgBDF732NdRlV0H7EQ/z+WJcYrBy1mIfD1byztInMCI0dbh0wd9XKy2GYLArf4joRjxwVJydS7PotWzdkVEP7EcX3uSCCxz2RVWO+9ndeGDDicwi+VifAI4QJhnjsKVSA6HVTtDmgEZqQDmsROShhUgFELv+2BmXaQWgA7gNd0RQVrrDe6wLQcKDPgpAOq4zHmsOFI5Lzj9e0mOUXnnQMdH1p7fx6rKPdFwmDIpJnkwxRJDLbjGjb8WI+oMTX6tX05wf4gsF2OS6HDDy1hSenrF5NW37v+XKX11kSrkkyBI/qeg+Ean1uttJKBaLm9jl+n8dIH2rEID/akEqD2X8262RfFiFcn57kSCCAQkbmNVNQ0tv45G/N6pgWj3KzxOFPr+lJy08MQmT+2QAWduUJAlu3Pc6tMdPycdlD43kdSuUF/y9Tcr8PBXED5dgRe8qtml/MTp419IWmmSdC9PqpAP3mIpIEM5BxuHr0Y4nONYWZHMFPNvhReTxMWbtifrJeVv80bb4XuIWLNy1QHarQ30nhCH7k2SodiXQH77vet+FU99w6WmH7wRTcZ+B+w86FBhVJhy9uDusgQ+MnuCI/Ph269u22QwZP2/X5Lu8luwMNrSuzcySfmSjc6wdDEBDczaMW0crVH+tLGx4iPzkDqq4t5BtInJcsDRtYZsk4QHFIxU/OgLa3nrVSdFYaPCvPMUlx8+QlRqj+SDIg8w9+zMTLwjLzwgOUVq6D99+UHB4Q0IRLpe7Il9C4cSU31cHDM6i7wB02d81RPJaLctCiEH1bRa44Bw6tv92ybEqPLjw17OeZ9cis4FmZfEh7Vih5NxNIr57ReA6PGhtdPTUVUD4ZN4mqLApP3GpesRjfUHZ9+j60v7eV350fvQc9UdlUqKmZn0YgGjogzQlaPP+VhL1p4Gs9+O1WA4cRdCymd0UXX5wcklBwiZo5v67OPe/wBUfFnFOTk37Fj7/FbdDq8PAQP/FrU0g5MDeYMlKhwlwtHmSFMUpkz1tDCqGcKRo9pf3vL4A8bQyvCB6wrFt9jS+86KnazzWZqk4/7loD3WskblxEoKuNFJp9+J+998jiRDyAiWSWDwSkVRCHgsorzwWUDfGrvx8YegPik6d6rt3I0bFTTqHnIZx7+EID3WkUj+U2V2hZU7d6EVQtuogbX/h14jaBqyKRJXr4a4bLItmXeNnPX5Ql4RmR+oduS47XuP9o1LDlcsqExHuogkZnmdxn1rTjuAcgLY9DeNygbtUCX4SIcSxrNUE3CqyQ8i/xkxHJvHGPUJwHLOHohfeQYAJDz375UpofpSjgq7GuvTtN825+8RH1eLbnQ5dQZoS9bpypzZbnhKoO8nFY8fpqePxOdV9SnAetf9tkOfv6B5ereyKv6iqSD3UBN4tAX7PJluwVQVbymXUyND55N/S1WXcJboawcukp3BofDd3sXnKJd0vfqlJyihnuhvFD8+Ucgc8nuAqqXjoT2t5+1rHbJQQfre/R8BudyDQ/r+3Wz4hJqoWJeytFRRJ+bQi21UhGyftD0lPivQn3A7gDr5j7X1C78iruxxfPZ3Szvdz9Evq5Qn9X6Fa2u2IfoBFby1/X87SomuU2xAlHyh9vN8JeM67l5Y0DcjUrPVwjDS6SrOJtmq6i+LQxjJLuoWQKLxsn/FA+t6jHhQAKLXHVhFYu3HcWik0wrChP1erhXiJFBoU9LuF7SxN5ncDWV59yqwfpd+WvV4tD+KXLIWeIRsuzQxMy6/AHr+jArh/c+NQaV6oAVJFrYeo6jFGyzA4AOZc2lA9199g/WlG18MK0nmavXsIa18AbZYAGwfYI8k8W5IQOlBLj2RWrV7fyb8d2YzINvm6EpWdxMiXvOQEjJ94R8/nKzSpDnH6HSqHkI88At5IRfvgqJwB2MK9w4eZt+q5qkVmxtiaILDjPqUG1gt9csYKjp2kYJf8crkzB00+yGITGzfdyP/DoMQ7lWkfYXq7Ycv4Bl2AFrAyM8BRoO5kxkWwftkxJqHmnjOJHtPGYNmoo8WOTCSt+m3X715AyI8E4NIO0SXiaKP4oeXdbAo+c+MWvkR0lwNpuLOhANCeYkElEXP3b+1ViDDrvycQhp57jEuLhO9lbXLWhbApds+cU+EbEyJJw89HaU2Qq/Mao7jkbF7eqf+soYswu1/qMXOAW2q76bcniM9MPWPrWRy6AbYcG/MyPTEmNz+DZXiUZ0HNQpuQ6O3UclmkVKT/EKNltAISXoDrIK/gZEwsuG5bguiEajwHj9zMYJS05wJwONHwOS/nfcVOno+ZdOVRQyCh5lFFSO4jMqcfDMrh/OmqA9KMirGTCqTIVro7rXhRGScwDJvXjB2tQzIPfhS+fNfGbftD+lckTAQxTUoyuVJlE7mM0+GTcG96O+Hy0m9HgB+jiKM7ItUwK3sBocCYOjclD+TmO2P8DvzAr+pmwf54AAAAASUVORK5CYII="/>
+</defs>
+</svg>
diff --git a/packages/form/src/components/SelectableCardOptionGroupField/__stories__/constants.tsx b/packages/form/src/components/SelectableCardOptionGroupField/__stories__/constants.tsx
new file mode 100644
index 0000000000..54c2390510
--- /dev/null
+++ b/packages/form/src/components/SelectableCardOptionGroupField/__stories__/constants.tsx
@@ -0,0 +1,55 @@
+import type { SelectInputV2 } from '@ultraviolet/ui'
+import { Badge } from '@ultraviolet/ui'
+import type { ComponentProps } from 'react'
+
+export const ubuntuOptions: ComponentProps<typeof SelectInputV2>['options'] = [
+  {
+    label: 'Ubuntu 20.04 Focal Fossa',
+    value: 'ubuntu-20.04',
+  },
+  {
+    label: 'Ubuntu 18.04 LTS',
+    value: 'ubuntu-18.04',
+  },
+]
+
+export const ubuntuOptionsLegacy: ComponentProps<
+  typeof SelectInputV2
+>['options'] = [
+  {
+    label: 'Ubuntu 20.04 Focal Fossa',
+    value: 'ubuntu-20.04',
+  },
+  {
+    label: 'Ubuntu 18.04 LTS',
+    value: 'ubuntu-18.04',
+    description: 'This version is legacy please choose a higher version.',
+    optionalInfo: (
+      <Badge sentiment="warning" size="small">
+        Legacy
+      </Badge>
+    ),
+  },
+]
+
+export const debianOptions: ComponentProps<typeof SelectInputV2>['options'] = [
+  {
+    label: 'Debian 10',
+    value: 'debian-10',
+  },
+  {
+    label: 'Debian 9',
+    value: 'debian-9',
+  },
+]
+
+export const centosOptions: ComponentProps<typeof SelectInputV2>['options'] = [
+  {
+    label: 'CentOS 8',
+    value: 'centos-8',
+  },
+  {
+    label: 'CentOS 7',
+    value: 'centos-7',
+  },
+]
diff --git a/packages/form/src/components/SelectableCardOptionGroupField/__stories__/index.stories.tsx b/packages/form/src/components/SelectableCardOptionGroupField/__stories__/index.stories.tsx
new file mode 100644
index 0000000000..0fba28078b
--- /dev/null
+++ b/packages/form/src/components/SelectableCardOptionGroupField/__stories__/index.stories.tsx
@@ -0,0 +1,76 @@
+import type { Meta } from '@storybook/react'
+import { Snippet, Stack, Text } from '@ultraviolet/ui'
+import { Form, SelectableCardOptionGroupField } from '../..'
+import { useForm } from '../../..'
+import { mockErrors } from '../../../mocks'
+
+export default {
+  component: SelectableCardOptionGroupField,
+  subcomponents: {
+    'SelectableCardOptionGroupField.Option':
+      SelectableCardOptionGroupField.Option,
+  },
+  decorators: [
+    ChildStory => {
+      const methods = useForm()
+      const {
+        errors,
+        isDirty,
+        isSubmitting,
+        touchedFields,
+        submitCount,
+        dirtyFields,
+        isValid,
+        isLoading,
+        isSubmitted,
+        isValidating,
+        isSubmitSuccessful,
+      } = methods.formState
+
+      return (
+        <Form onSubmit={() => {}} errors={mockErrors} methods={methods}>
+          <Stack gap={2}>
+            <ChildStory />
+            <Stack gap={1}>
+              <Text variant="bodyStrong" as="p">
+                Form input values:
+              </Text>
+              <Snippet prefix="lines" initiallyExpanded>
+                {JSON.stringify(methods.watch(), null, 1)}
+              </Snippet>
+            </Stack>
+            <Stack gap={1}>
+              <Text variant="bodyStrong" as="p">
+                Form values:
+              </Text>
+              <Snippet prefix="lines">
+                {JSON.stringify(
+                  {
+                    errors,
+                    isDirty,
+                    isSubmitting,
+                    touchedFields,
+                    submitCount,
+                    dirtyFields,
+                    isValid,
+                    isLoading,
+                    isSubmitted,
+                    isValidating,
+                    isSubmitSuccessful,
+                  },
+                  null,
+                  1,
+                )}
+              </Snippet>
+            </Stack>
+          </Stack>
+        </Form>
+      )
+    },
+  ],
+  title: 'Form/Components/Fields/SelectableCardOptionGroupField',
+} as Meta
+
+export { Playground } from './Playground.stories'
+export { Required } from './Required.stories'
+export { Error } from './Error.stories'
diff --git a/packages/form/src/components/SelectableCardOptionGroupField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/SelectableCardOptionGroupField/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000000..4e1fb8a474
--- /dev/null
+++ b/packages/form/src/components/SelectableCardOptionGroupField/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,1134 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`SelectableCardOptionGroupField > should render correctly 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.75rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-7 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: text;
+}
+
+.emotion-9 {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+}
+
+.emotion-12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding: 1rem;
+  border-radius: 0.25rem;
+  -webkit-transition: border-color 200ms ease,box-shadow 200ms ease;
+  transition: border-color 200ms ease,box-shadow 200ms ease;
+  cursor: pointer;
+  background: #ffffff;
+  border: 1px solid #d9dadd;
+  color: #3f4250;
+  padding: 0;
+  padding-top: 1rem;
+  cursor: pointer;
+}
+
+.emotion-12[data-has-label='false']>:first-child {
+  margin-bottom: -0.25rem;
+}
+
+.emotion-12[data-checked='true'] {
+  border: 1px solid #8c40ef;
+}
+
+.emotion-12[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-12[data-disabled='true'] {
+  border: 1px solid #e9eaeb;
+  color: #b5b7bd;
+  background: #f3f3f4;
+  cursor: not-allowed;
+}
+
+.emotion-12[data-image="illustration"] {
+  padding: 0rem;
+}
+
+.emotion-12[data-image="icon"] {
+  padding: 0rem;
+  padding-right: 1rem;
+}
+
+.emotion-12:hover:not([data-error='true']):not([data-disabled='true']),
+.emotion-12:active:not([data-error='true']):not([data-disabled='true']) {
+  border: 1px solid #8c40ef;
+}
+
+.emotion-12:hover:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'],
+.emotion-12:active:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'] {
+  box-shadow: 0px 4px 16px 4px #f6f3ffcc;
+}
+
+.emotion-12[data-has-label='true'] .emotion-15,
+.emotion-12[data-has-label='true'] .eqr7bqq1 {
+  width: 100%;
+}
+
+.emotion-12 .emotion-15 {
+  position: absolute;
+  padding: 8px;
+  margin-top: -1rem;
+}
+
+.emotion-14 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-17 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  gap: 0.5rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  pointer-events: none;
+}
+
+.emotion-17[aria-disabled='false'],
+.emotion-17[aria-disabled='false']>label {
+  cursor: pointer;
+}
+
+.emotion-17:hover[aria-disabled='false'] .emotion-20+.emotion-22 {
+  fill: #8c40ef;
+}
+
+.emotion-17:hover[aria-disabled='false'] .emotion-20+.emotion-22 .emotion-24 {
+  fill: #e5dbfd;
+}
+
+.emotion-17:hover[aria-disabled='false'] .emotion-20[aria-invalid='true']+.emotion-22 {
+  fill: #b3144d;
+}
+
+.emotion-17:hover[aria-disabled='false'] .emotion-20[aria-invalid='true']+.emotion-22 .emotion-24 {
+  fill: #ffd3e3;
+}
+
+.emotion-17[aria-disabled='true'] {
+  cursor: not-allowed;
+  color: #b5b7bd;
+}
+
+.emotion-17[aria-disabled='true']>label,
+.emotion-17[aria-disabled='true'] .emotion-20 {
+  cursor: not-allowed;
+}
+
+.emotion-17[aria-disabled='true'] .emotion-22 {
+  fill: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-17[aria-disabled='true'] .emotion-22 .emotion-24 {
+  fill: #f3f3f4;
+}
+
+.emotion-17[data-checked='true'] {
+  color: #641cb3;
+}
+
+.emotion-17[data-error='true'] {
+  color: #b3144d;
+}
+
+.emotion-17[aria-disabled='true'] {
+  color: #b5b7bd;
+}
+
+.emotion-19 {
+  cursor: pointer;
+  position: absolute;
+  height: 1.5rem;
+  width: 1.5rem;
+  opacity: 0;
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.emotion-19+.emotion-22 .emotion-26 {
+  transform-origin: center;
+  -webkit-transition: 200ms -webkit-transform ease-in-out;
+  transition: 200ms transform ease-in-out;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+}
+
+.emotion-19:checked+svg .emotion-26 {
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
+
+.emotion-19:checked[aria-disabled='false'][aria-invalid='false']+.emotion-22 {
+  fill: #8c40ef;
+}
+
+.emotion-19:checked[aria-disabled='true'][aria-invalid='false']+.emotion-22 {
+  fill: #d8c5fc;
+}
+
+.emotion-19[aria-invalid='true']:not([aria-disabled='true'])+.emotion-22 {
+  fill: #e51963;
+}
+
+.emotion-19[aria-disabled='false']:active+.emotion-22 {
+  background-color: #5e127e40;
+  fill: #8c40ef;
+}
+
+.emotion-19[aria-disabled='false']:active+.emotion-22 .emotion-24 {
+  fill: #f1eefc;
+}
+
+.emotion-19[aria-disabled='false']:focus-visible+.emotion-22 {
+  outline: -webkit-focus-ring-color auto 1px;
+}
+
+.emotion-19[aria-invalid='true']:focus+.emotion-22 {
+  background-color: #f91b6c40;
+  fill: #e51963;
+}
+
+.emotion-19[aria-invalid='true']:focus+.emotion-22 .emotion-24 {
+  fill: #ffebf2;
+}
+
+.emotion-21 {
+  height: 1.5rem;
+  width: 1.5rem;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  border-radius: 100%;
+  fill: #d9dadd;
+}
+
+.emotion-21 .emotion-24 {
+  fill: #ffffff;
+}
+
+.emotion-27 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.emotion-27[data-has-label='true'] {
+  padding-left: 2rem;
+}
+
+.emotion-27[data-has-label='false'] {
+  display: contents;
+}
+
+.emotion-29 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 1rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+}
+
+.emotion-31 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+  padding: 0 1rem;
+}
+
+.emotion-33[data-disabled='true'] {
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+}
+
+.emotion-35 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.emotion-38 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.emotion-41 {
+  width: 100%;
+}
+
+.emotion-41 .emotion-48 {
+  border-radius: 0 0 0.25rem 0.25rem;
+  border-bottom: 0!important;
+  border-right: 0!important;
+  border-left: 0!important;
+}
+
+.emotion-41 .emotion-48:hover,
+.emotion-41 .emotion-48:focus,
+.emotion-41 .emotion-48:active {
+  border-color: #d9dadd!important;
+  outline: none;
+}
+
+.emotion-43 {
+  display: inherit;
+}
+
+.emotion-43[data-container-full-width="true"] {
+  width: 100%;
+}
+
+.emotion-45 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-47 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0.5rem;
+  padding-right: 0;
+  padding-left: 1rem;
+  cursor: pointer;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  width: 100%;
+  overflow: hidden;
+}
+
+.emotion-47[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-47[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-47[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-47[data-state='neutral'] {
+  border: 1px solid #d9dadd;
+}
+
+.emotion-47[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-47[data-state='neutral']:not([data-disabled='true']):hover {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-47[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.emotion-47[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
+.emotion-47[data-state='success'] {
+  border: 1px solid #22674e;
+}
+
+.emotion-47[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-47[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
+.emotion-47[data-state='danger'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-47[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-47[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
+}
+
+.emotion-47:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
+}
+
+.emotion-47[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-47[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-50 {
+  color: #727683;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-52 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding-right: 1rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-54 {
+  vertical-align: middle;
+  fill: #3f4250;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
+}
+
+.emotion-54 .fillStroke {
+  stroke: #3f4250;
+  fill: none;
+}
+
+<div
+    data-testid="testing"
+  >
+    <form
+      novalidate=""
+    >
+      <div
+        class="emotion-0 emotion-1"
+      >
+        <fieldset
+          class="emotion-2 emotion-3"
+        >
+          <div
+            class="emotion-4 emotion-1"
+          >
+            <legend
+              class="emotion-6 emotion-7 emotion-8"
+            >
+              Select your OS
+            </legend>
+            <div
+              class="emotion-9 emotion-10"
+            >
+              <div
+                class="emotion-11 emotion-12 emotion-13"
+                data-checked="false"
+                data-disabled="false"
+                data-error="false"
+                data-has-label="false"
+                data-image="none"
+                data-type="radio"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="emotion-14 emotion-15"
+                >
+                  <div
+                    aria-disabled="false"
+                    class="emotion-16 emotion-17 emotion-18"
+                    data-checked="false"
+                    data-error="false"
+                  >
+                    <input
+                      aria-disabled="false"
+                      aria-invalid="false"
+                      class="emotion-19 emotion-20"
+                      id=":r1:"
+                      tabindex="-1"
+                      type="radio"
+                      value="ubuntu"
+                    />
+                    <svg
+                      class="emotion-21 emotion-22"
+                      viewBox="0 0 24 24"
+                    >
+                      <g>
+                        <circle
+                          cx="12"
+                          cy="12"
+                          r="10"
+                          stroke-width="2"
+                        />
+                        <circle
+                          class="emotion-23 emotion-24"
+                          cx="12"
+                          cy="12"
+                          r="8"
+                        />
+                        <circle
+                          class="emotion-25 emotion-26"
+                          cx="12"
+                          cy="12"
+                          r="5"
+                        />
+                      </g>
+                    </svg>
+                  </div>
+                </div>
+                <div
+                  class="emotion-27 emotion-28"
+                  data-has-label="false"
+                >
+                  <div
+                    class="emotion-29 emotion-30"
+                  >
+                    <div
+                      class="emotion-31 emotion-32"
+                    >
+                      <img
+                        alt="Ubuntu"
+                        class="emotion-33 emotion-34"
+                        src="/src/components/SelectableCardOptionGroupField/__stories__/assets/ubuntu.svg"
+                        width="56"
+                      />
+                      <div
+                        class="emotion-35 emotion-1"
+                      >
+                        <label
+                          class="emotion-6 emotion-38 emotion-8"
+                          for=":r1:"
+                        >
+                          Ubuntu
+                        </label>
+                      </div>
+                    </div>
+                    <div
+                      aria-label="selectable-card-option"
+                      class="emotion-40 emotion-41 emotion-42"
+                    >
+                      <div
+                        aria-controls=":r7:"
+                        aria-describedby=":r7:"
+                        class="emotion-43 emotion-44"
+                        data-container-full-width="true"
+                        tabindex="-1"
+                      >
+                        <div
+                          aria-label="Ubuntu option"
+                          class="emotion-45 emotion-1"
+                        >
+                          <div
+                            aria-expanded="false"
+                            aria-haspopup="listbox"
+                            class="emotion-47 emotion-48"
+                            data-disabled="false"
+                            data-dropdownvisible="false"
+                            data-readonly="false"
+                            data-size="medium"
+                            data-state="neutral"
+                            data-testid="select-input-selectable-card-option"
+                            id=":r6:"
+                            role="combobox"
+                            tabindex="0"
+                          >
+                            <p
+                              class="emotion-49 emotion-50 emotion-8"
+                            >
+                              Select item
+                            </p>
+                            <div
+                              class="emotion-52 emotion-53"
+                            >
+                              <svg
+                                aria-label="show dropdown"
+                                class="emotion-54 emotion-55"
+                                viewBox="0 0 20 20"
+                              >
+                                <path
+                                  clip-rule="evenodd"
+                                  d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                  fill-rule="evenodd"
+                                />
+                              </svg>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="emotion-11 emotion-12 emotion-13"
+                data-checked="false"
+                data-disabled="false"
+                data-error="false"
+                data-has-label="false"
+                data-image="none"
+                data-type="radio"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="emotion-14 emotion-15"
+                >
+                  <div
+                    aria-disabled="false"
+                    class="emotion-16 emotion-17 emotion-18"
+                    data-checked="false"
+                    data-error="false"
+                  >
+                    <input
+                      aria-disabled="false"
+                      aria-invalid="false"
+                      class="emotion-19 emotion-20"
+                      id=":ra:"
+                      tabindex="-1"
+                      type="radio"
+                      value="debian"
+                    />
+                    <svg
+                      class="emotion-21 emotion-22"
+                      viewBox="0 0 24 24"
+                    >
+                      <g>
+                        <circle
+                          cx="12"
+                          cy="12"
+                          r="10"
+                          stroke-width="2"
+                        />
+                        <circle
+                          class="emotion-23 emotion-24"
+                          cx="12"
+                          cy="12"
+                          r="8"
+                        />
+                        <circle
+                          class="emotion-25 emotion-26"
+                          cx="12"
+                          cy="12"
+                          r="5"
+                        />
+                      </g>
+                    </svg>
+                  </div>
+                </div>
+                <div
+                  class="emotion-27 emotion-28"
+                  data-has-label="false"
+                >
+                  <div
+                    class="emotion-29 emotion-30"
+                  >
+                    <div
+                      class="emotion-31 emotion-32"
+                    >
+                      <img
+                        alt="Debian"
+                        class="emotion-33 emotion-34"
+                        src="/src/components/SelectableCardOptionGroupField/__stories__/assets/debian.svg"
+                        width="56"
+                      />
+                      <div
+                        class="emotion-35 emotion-1"
+                      >
+                        <label
+                          class="emotion-6 emotion-38 emotion-8"
+                          for=":ra:"
+                        >
+                          Debian
+                        </label>
+                      </div>
+                    </div>
+                    <div
+                      aria-label="selectable-card-option"
+                      class="emotion-40 emotion-41 emotion-42"
+                    >
+                      <div
+                        aria-controls=":rg:"
+                        aria-describedby=":rg:"
+                        class="emotion-43 emotion-44"
+                        data-container-full-width="true"
+                        tabindex="-1"
+                      >
+                        <div
+                          aria-label="Debian option"
+                          class="emotion-45 emotion-1"
+                        >
+                          <div
+                            aria-expanded="false"
+                            aria-haspopup="listbox"
+                            class="emotion-47 emotion-48"
+                            data-disabled="false"
+                            data-dropdownvisible="false"
+                            data-readonly="false"
+                            data-size="medium"
+                            data-state="neutral"
+                            data-testid="select-input-selectable-card-option"
+                            id=":rf:"
+                            role="combobox"
+                            tabindex="0"
+                          >
+                            <p
+                              class="emotion-49 emotion-50 emotion-8"
+                            >
+                              Select item
+                            </p>
+                            <div
+                              class="emotion-52 emotion-53"
+                            >
+                              <svg
+                                aria-label="show dropdown"
+                                class="emotion-54 emotion-55"
+                                viewBox="0 0 20 20"
+                              >
+                                <path
+                                  clip-rule="evenodd"
+                                  d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                  fill-rule="evenodd"
+                                />
+                              </svg>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="emotion-11 emotion-12 emotion-13"
+                data-checked="false"
+                data-disabled="false"
+                data-error="false"
+                data-has-label="false"
+                data-image="none"
+                data-type="radio"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="emotion-14 emotion-15"
+                >
+                  <div
+                    aria-disabled="false"
+                    class="emotion-16 emotion-17 emotion-18"
+                    data-checked="false"
+                    data-error="false"
+                  >
+                    <input
+                      aria-disabled="false"
+                      aria-invalid="false"
+                      class="emotion-19 emotion-20"
+                      id=":rj:"
+                      tabindex="-1"
+                      type="radio"
+                      value="centos"
+                    />
+                    <svg
+                      class="emotion-21 emotion-22"
+                      viewBox="0 0 24 24"
+                    >
+                      <g>
+                        <circle
+                          cx="12"
+                          cy="12"
+                          r="10"
+                          stroke-width="2"
+                        />
+                        <circle
+                          class="emotion-23 emotion-24"
+                          cx="12"
+                          cy="12"
+                          r="8"
+                        />
+                        <circle
+                          class="emotion-25 emotion-26"
+                          cx="12"
+                          cy="12"
+                          r="5"
+                        />
+                      </g>
+                    </svg>
+                  </div>
+                </div>
+                <div
+                  class="emotion-27 emotion-28"
+                  data-has-label="false"
+                >
+                  <div
+                    class="emotion-29 emotion-30"
+                  >
+                    <div
+                      class="emotion-31 emotion-32"
+                    >
+                      <img
+                        alt="CentOS"
+                        class="emotion-33 emotion-34"
+                        src="/src/components/SelectableCardOptionGroupField/__stories__/assets/centos.svg"
+                        width="56"
+                      />
+                      <div
+                        class="emotion-35 emotion-1"
+                      >
+                        <label
+                          class="emotion-6 emotion-38 emotion-8"
+                          for=":rj:"
+                        >
+                          CentOS
+                        </label>
+                      </div>
+                    </div>
+                    <div
+                      aria-label="selectable-card-option"
+                      class="emotion-40 emotion-41 emotion-42"
+                    >
+                      <div
+                        aria-controls=":rp:"
+                        aria-describedby=":rp:"
+                        class="emotion-43 emotion-44"
+                        data-container-full-width="true"
+                        tabindex="-1"
+                      >
+                        <div
+                          aria-label="CentOS option"
+                          class="emotion-45 emotion-1"
+                        >
+                          <div
+                            aria-expanded="false"
+                            aria-haspopup="listbox"
+                            class="emotion-47 emotion-48"
+                            data-disabled="false"
+                            data-dropdownvisible="false"
+                            data-readonly="false"
+                            data-size="medium"
+                            data-state="neutral"
+                            data-testid="select-input-selectable-card-option"
+                            id=":ro:"
+                            role="combobox"
+                            tabindex="0"
+                          >
+                            <p
+                              class="emotion-49 emotion-50 emotion-8"
+                            >
+                              Select item
+                            </p>
+                            <div
+                              class="emotion-52 emotion-53"
+                            >
+                              <svg
+                                aria-label="show dropdown"
+                                class="emotion-54 emotion-55"
+                                viewBox="0 0 20 20"
+                              >
+                                <path
+                                  clip-rule="evenodd"
+                                  d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                  fill-rule="evenodd"
+                                />
+                              </svg>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </fieldset>
+      </div>
+    </form>
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/form/src/components/SelectableCardOptionGroupField/__tests__/index.test.tsx b/packages/form/src/components/SelectableCardOptionGroupField/__tests__/index.test.tsx
new file mode 100644
index 0000000000..b9f67962e7
--- /dev/null
+++ b/packages/form/src/components/SelectableCardOptionGroupField/__tests__/index.test.tsx
@@ -0,0 +1,46 @@
+import { renderWithForm } from '@utils/test'
+import { describe, expect, test } from 'vitest'
+import { SelectableCardOptionGroupField } from '../..'
+import centos from '../__stories__/assets/centos.svg'
+import debian from '../__stories__/assets/debian.svg'
+import ubuntu from '../__stories__/assets/ubuntu.svg'
+import {
+  centosOptions,
+  debianOptions,
+  ubuntuOptions,
+} from '../__stories__/constants'
+
+describe('SelectableCardOptionGroupField', () => {
+  test('should render correctly', () => {
+    const { asFragment } = renderWithForm(
+      <SelectableCardOptionGroupField
+        name="os"
+        value="ubuntu"
+        optionValue="ubuntu-20.04"
+        onChange={() => {}}
+        onChangeOption={() => {}}
+        legend="Select your OS"
+      >
+        <SelectableCardOptionGroupField.Option
+          value="ubuntu"
+          label="Ubuntu"
+          options={ubuntuOptions}
+          image={ubuntu}
+        />
+        <SelectableCardOptionGroupField.Option
+          value="debian"
+          label="Debian"
+          options={debianOptions}
+          image={debian}
+        />
+        <SelectableCardOptionGroupField.Option
+          value="centos"
+          label="CentOS"
+          options={centosOptions}
+          image={centos}
+        />
+      </SelectableCardOptionGroupField>,
+    )
+    expect(asFragment()).toMatchSnapshot()
+  })
+})
diff --git a/packages/form/src/components/SelectableCardOptionGroupField/index.tsx b/packages/form/src/components/SelectableCardOptionGroupField/index.tsx
new file mode 100644
index 0000000000..85e49c6375
--- /dev/null
+++ b/packages/form/src/components/SelectableCardOptionGroupField/index.tsx
@@ -0,0 +1,82 @@
+import { SelectableCardOptionGroup } from '@ultraviolet/ui'
+import type { ComponentProps, JSX } from 'react'
+import type { FieldPath, FieldValues } from 'react-hook-form'
+import { useController } from 'react-hook-form'
+import { useErrors } from '../../providers'
+import type { BaseFieldProps } from '../../types'
+
+type SelectableCardOptionGroupFieldProps<
+  TFieldValues extends FieldValues,
+  TFieldName extends FieldPath<TFieldValues>,
+> = ComponentProps<typeof SelectableCardOptionGroup> &
+  BaseFieldProps<TFieldValues, TFieldName> &
+  Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'>
+
+export const SelectableCardOptionGroupField = <
+  TFieldValues extends FieldValues,
+  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  className,
+  legend,
+  control,
+  name,
+  onChange,
+  onChangeOption,
+  required = false,
+  children,
+  label = '',
+  error: customError,
+  helper,
+  columns,
+  shouldUnregister = false,
+  validate,
+}: SelectableCardOptionGroupFieldProps<
+  TFieldValues,
+  TFieldName
+>): JSX.Element => {
+  const { getError } = useErrors()
+  const {
+    field,
+    fieldState: { error },
+  } = useController<TFieldValues, TFieldName>({
+    name,
+    control,
+    shouldUnregister,
+    rules: {
+      required,
+      validate,
+    },
+  })
+
+  const { field: optionField } = useController({
+    name: `${name}-option`,
+    shouldUnregister,
+    rules: { required },
+  })
+
+  return (
+    <SelectableCardOptionGroup
+      legend={legend}
+      name={name}
+      value={field.value as string}
+      optionValue={String(optionField.value)}
+      onChange={event => {
+        field.onChange(event)
+        onChange?.(event)
+      }}
+      onChangeOption={(value: string) => {
+        optionField.onChange(value)
+        onChangeOption?.(value)
+      }}
+      error={getError({ label }, error) ?? customError}
+      className={className}
+      columns={columns}
+      helper={helper}
+      required={required}
+    >
+      {children}
+    </SelectableCardOptionGroup>
+  )
+}
+
+SelectableCardOptionGroupField.Option = SelectableCardOptionGroup.Option
diff --git a/packages/form/src/components/SwitchButtonField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/SwitchButtonField/__tests__/__snapshots__/index.test.tsx.snap
index 74bf8a263c..1ca97b785e 100644
--- a/packages/form/src/components/SwitchButtonField/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/form/src/components/SwitchButtonField/__tests__/__snapshots__/index.test.tsx.snap
@@ -108,8 +108,8 @@ exports[`SwitchButtonField > should render correctly 1`] = `
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-3 .emotion-6,
-.emotion-3 .eqr7bqq1 {
+.emotion-3[data-has-label='true'] .emotion-6,
+.emotion-3[data-has-label='true'] .eqr7bqq1 {
   width: 100%;
 }
 
@@ -181,6 +181,7 @@ exports[`SwitchButtonField > should render correctly 1`] = `
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
+  pointer-events: none;
 }
 
 .emotion-8[aria-disabled='false'],
@@ -363,7 +364,7 @@ exports[`SwitchButtonField > should render correctly 1`] = `
                   aria-disabled="false"
                   aria-invalid="false"
                   class="emotion-10 emotion-11"
-                  id="test-left"
+                  id=":r2:"
                   name="test"
                   tabindex="-1"
                   type="radio"
@@ -396,7 +397,7 @@ exports[`SwitchButtonField > should render correctly 1`] = `
                 </svg>
                 <label
                   class="emotion-18 emotion-19 emotion-20"
-                  for="test-left"
+                  for=":r2:"
                 >
                   Left Button Label
                 </label>
@@ -426,7 +427,7 @@ exports[`SwitchButtonField > should render correctly 1`] = `
                   aria-invalid="false"
                   checked=""
                   class="emotion-10 emotion-11"
-                  id="test-right"
+                  id=":r6:"
                   name="test"
                   tabindex="-1"
                   type="radio"
@@ -459,7 +460,7 @@ exports[`SwitchButtonField > should render correctly 1`] = `
                 </svg>
                 <label
                   class="emotion-18 emotion-19 emotion-20"
-                  for="test-right"
+                  for=":r6:"
                 >
                   Right Button Label
                 </label>
@@ -581,8 +582,8 @@ exports[`SwitchButtonField > should works with defaultValues 1`] = `
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-3 .emotion-6,
-.emotion-3 .eqr7bqq1 {
+.emotion-3[data-has-label='true'] .emotion-6,
+.emotion-3[data-has-label='true'] .eqr7bqq1 {
   width: 100%;
 }
 
@@ -654,6 +655,7 @@ exports[`SwitchButtonField > should works with defaultValues 1`] = `
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
+  pointer-events: none;
 }
 
 .emotion-8[aria-disabled='false'],
@@ -890,7 +892,7 @@ exports[`SwitchButtonField > should works with defaultValues 1`] = `
                   aria-disabled="false"
                   aria-invalid="false"
                   class="emotion-10 emotion-11"
-                  id="test-left"
+                  id=":rb:"
                   name="test"
                   tabindex="-1"
                   type="radio"
@@ -923,7 +925,7 @@ exports[`SwitchButtonField > should works with defaultValues 1`] = `
                 </svg>
                 <label
                   class="emotion-18 emotion-19 emotion-20"
-                  for="test-left"
+                  for=":rb:"
                 >
                   Left Button Label
                 </label>
@@ -953,7 +955,7 @@ exports[`SwitchButtonField > should works with defaultValues 1`] = `
                   aria-invalid="false"
                   checked=""
                   class="emotion-10 emotion-11"
-                  id="test-right"
+                  id=":rf:"
                   name="test"
                   tabindex="-1"
                   type="radio"
@@ -986,7 +988,7 @@ exports[`SwitchButtonField > should works with defaultValues 1`] = `
                 </svg>
                 <label
                   class="emotion-18 emotion-19 emotion-20"
-                  for="test-right"
+                  for=":rf:"
                 >
                   Right Button Label
                 </label>
diff --git a/packages/form/src/components/TagInputField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/TagInputField/__tests__/__snapshots__/index.test.tsx.snap
index c4a4b37850..ff51dfa285 100644
--- a/packages/form/src/components/TagInputField/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/form/src/components/TagInputField/__tests__/__snapshots__/index.test.tsx.snap
@@ -186,8 +186,8 @@ exports[`TagInputField > should render correctly with regex 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -196,9 +196,10 @@ exports[`TagInputField > should render correctly with regex 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -212,35 +213,35 @@ exports[`TagInputField > should render correctly with regex 1`] = `
   border-radius: 0.25rem;
 }
 
-.emotion-4:focus-within {
+.emotion-5:focus-within {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-4[data-success="true"] {
+.emotion-5[data-success="true"] {
   border-color: #22674e;
 }
 
-.emotion-4[data-error="true"] {
+.emotion-5[data-error="true"] {
   border-color: #b3144d;
 }
 
-.emotion-4:hover {
+.emotion-5:hover {
   border-color: #792dd4;
 }
 
-.emotion-4[data-readonly="true"] {
+.emotion-5[data-readonly="true"] {
   border-color: #d9dadd;
   background: #f9f9fa;
 }
 
-.emotion-4[data-disabled="true"] {
+.emotion-5[data-disabled="true"] {
   border-color: #e9eaeb;
   background: #f3f3f4;
   cursor: not-allowed;
 }
 
-.emotion-6 {
+.emotion-7 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -260,7 +261,7 @@ exports[`TagInputField > should render correctly with regex 1`] = `
   flex: 1;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -286,7 +287,7 @@ exports[`TagInputField > should render correctly with regex 1`] = `
   border: solid 1px #d9dadd;
 }
 
-.emotion-11 {
+.emotion-12 {
   font-size: 0.75rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -301,7 +302,7 @@ exports[`TagInputField > should render correctly with regex 1`] = `
   max-width: 14.5rem;
 }
 
-.emotion-13 {
+.emotion-14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -324,7 +325,7 @@ exports[`TagInputField > should render correctly with regex 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-16 {
+.emotion-17 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -370,22 +371,22 @@ exports[`TagInputField > should render correctly with regex 1`] = `
   padding: 0.125rem;
 }
 
-.emotion-16:hover {
+.emotion-17:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-16:active {
+.emotion-17:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-16:hover,
-.emotion-16:active {
+.emotion-17:hover,
+.emotion-17:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-18 {
+.emotion-19 {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -394,16 +395,16 @@ exports[`TagInputField > should render correctly with regex 1`] = `
   min-height: 16px;
 }
 
-.emotion-18 .fillStroke {
+.emotion-19 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
 
-.emotion-18 path {
+.emotion-19 path {
   fill: currentColor;
 }
 
-.emotion-20 {
+.emotion-21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -419,27 +420,27 @@ exports[`TagInputField > should render correctly with regex 1`] = `
   height: 100%;
 }
 
-.emotion-20::-webkit-input-placeholder {
+.emotion-21::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-20::-moz-placeholder {
+.emotion-21::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-20:-ms-input-placeholder {
+.emotion-21:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-20::placeholder {
+.emotion-21::placeholder {
   color: #727683;
 }
 
-.emotion-20[data-size="large"] {
+.emotion-21[data-size="large"] {
   font-size: 1rem;
 }
 
-.emotion-22 {
+.emotion-23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -451,7 +452,7 @@ exports[`TagInputField > should render correctly with regex 1`] = `
   gap: 0.5rem;
 }
 
-.emotion-24 {
+.emotion-25 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -490,22 +491,22 @@ exports[`TagInputField > should render correctly with regex 1`] = `
   color: #3f4250;
 }
 
-.emotion-24:hover {
+.emotion-25:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-24:active {
+.emotion-25:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-24:hover,
-.emotion-24:active {
+.emotion-25:hover,
+.emotion-25:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-28 {
+.emotion-29 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -546,7 +547,7 @@ exports[`TagInputField > should render correctly with regex 1`] = `
   color: #ffffff;
 }
 
-.emotion-28:hover {
+.emotion-29:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -561,42 +562,42 @@ exports[`TagInputField > should render correctly with regex 1`] = `
         class="emotion-0 emotion-1"
       >
         <label
-          class="emotion-2 emotion-3"
+          class="emotion-2 emotion-3 emotion-4"
           for=":r2:"
         >
           Test
         </label>
         <div>
           <div
-            class="emotion-4 emotion-5"
+            class="emotion-5 emotion-6"
             data-disabled="false"
             data-error="false"
             data-readonly="false"
             data-success="false"
           >
             <div
-              class="emotion-6 emotion-7"
+              class="emotion-7 emotion-8"
             >
               <span
-                class="emotion-8 emotion-9"
+                class="emotion-9 emotion-10"
               >
                 <div
-                  class="emotion-10 emotion-11 emotion-3"
+                  class="emotion-11 emotion-12 emotion-4"
                 >
                   <div
-                    class="emotion-13 emotion-1"
+                    class="emotion-14 emotion-1"
                   >
                     4
                   </div>
                 </div>
                 <button
                   aria-label="Close tag"
-                  class="emotion-15 emotion-16 emotion-17"
+                  class="emotion-16 emotion-17 emotion-18"
                   data-testid="close-tag"
                   type="button"
                 >
                   <svg
-                    class="emotion-18 emotion-19"
+                    class="emotion-19 emotion-20"
                     viewBox="0 0 16 16"
                     xmlns="http://www.w3.org/2000/svg"
                   >
@@ -607,7 +608,7 @@ exports[`TagInputField > should render correctly with regex 1`] = `
                 </button>
               </span>
               <input
-                class="emotion-20 emotion-21"
+                class="emotion-21 emotion-22"
                 data-size="large"
                 id=":r2:"
                 name="test"
@@ -617,15 +618,15 @@ exports[`TagInputField > should render correctly with regex 1`] = `
               />
             </div>
             <div
-              class="emotion-22 emotion-23"
+              class="emotion-23 emotion-24"
             >
               <button
                 aria-label="clear value"
-                class="emotion-24 emotion-17"
+                class="emotion-25 emotion-18"
                 type="button"
               >
                 <svg
-                  class="emotion-18 emotion-19"
+                  class="emotion-19 emotion-20"
                   viewBox="0 0 16 16"
                   xmlns="http://www.w3.org/2000/svg"
                 >
@@ -639,7 +640,7 @@ exports[`TagInputField > should render correctly with regex 1`] = `
         </div>
       </div>
       <button
-        class="emotion-28 emotion-29"
+        class="emotion-29 emotion-30"
         disabled=""
         type="submit"
       >
@@ -675,8 +676,8 @@ exports[`TagInputField > should works with defaultValues 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -685,9 +686,10 @@ exports[`TagInputField > should works with defaultValues 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -701,35 +703,35 @@ exports[`TagInputField > should works with defaultValues 1`] = `
   border-radius: 0.25rem;
 }
 
-.emotion-4:focus-within {
+.emotion-5:focus-within {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-4[data-success="true"] {
+.emotion-5[data-success="true"] {
   border-color: #22674e;
 }
 
-.emotion-4[data-error="true"] {
+.emotion-5[data-error="true"] {
   border-color: #b3144d;
 }
 
-.emotion-4:hover {
+.emotion-5:hover {
   border-color: #792dd4;
 }
 
-.emotion-4[data-readonly="true"] {
+.emotion-5[data-readonly="true"] {
   border-color: #d9dadd;
   background: #f9f9fa;
 }
 
-.emotion-4[data-disabled="true"] {
+.emotion-5[data-disabled="true"] {
   border-color: #e9eaeb;
   background: #f3f3f4;
   cursor: not-allowed;
 }
 
-.emotion-6 {
+.emotion-7 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -749,7 +751,7 @@ exports[`TagInputField > should works with defaultValues 1`] = `
   flex: 1;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -775,7 +777,7 @@ exports[`TagInputField > should works with defaultValues 1`] = `
   border: solid 1px #d9dadd;
 }
 
-.emotion-11 {
+.emotion-12 {
   font-size: 0.75rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -790,7 +792,7 @@ exports[`TagInputField > should works with defaultValues 1`] = `
   max-width: 14.5rem;
 }
 
-.emotion-13 {
+.emotion-14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -813,7 +815,7 @@ exports[`TagInputField > should works with defaultValues 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-16 {
+.emotion-17 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -859,22 +861,22 @@ exports[`TagInputField > should works with defaultValues 1`] = `
   padding: 0.125rem;
 }
 
-.emotion-16:hover {
+.emotion-17:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-16:active {
+.emotion-17:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-16:hover,
-.emotion-16:active {
+.emotion-17:hover,
+.emotion-17:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-18 {
+.emotion-19 {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -883,16 +885,16 @@ exports[`TagInputField > should works with defaultValues 1`] = `
   min-height: 16px;
 }
 
-.emotion-18 .fillStroke {
+.emotion-19 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
 
-.emotion-18 path {
+.emotion-19 path {
   fill: currentColor;
 }
 
-.emotion-20 {
+.emotion-21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -908,27 +910,27 @@ exports[`TagInputField > should works with defaultValues 1`] = `
   height: 100%;
 }
 
-.emotion-20::-webkit-input-placeholder {
+.emotion-21::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-20::-moz-placeholder {
+.emotion-21::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-20:-ms-input-placeholder {
+.emotion-21:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-20::placeholder {
+.emotion-21::placeholder {
   color: #727683;
 }
 
-.emotion-20[data-size="large"] {
+.emotion-21[data-size="large"] {
   font-size: 1rem;
 }
 
-.emotion-22 {
+.emotion-23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -940,7 +942,7 @@ exports[`TagInputField > should works with defaultValues 1`] = `
   gap: 0.5rem;
 }
 
-.emotion-24 {
+.emotion-25 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -979,22 +981,22 @@ exports[`TagInputField > should works with defaultValues 1`] = `
   color: #3f4250;
 }
 
-.emotion-24:hover {
+.emotion-25:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-24:active {
+.emotion-25:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-24:hover,
-.emotion-24:active {
+.emotion-25:hover,
+.emotion-25:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-28 {
+.emotion-29 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1033,17 +1035,17 @@ exports[`TagInputField > should works with defaultValues 1`] = `
   color: #ffffff;
 }
 
-.emotion-28:hover {
+.emotion-29:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-28:active {
+.emotion-29:active {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-28:hover,
-.emotion-28:active {
+.emotion-29:hover,
+.emotion-29:active {
   background: #792dd4;
   color: #f9f9fa;
 }
@@ -1058,42 +1060,42 @@ exports[`TagInputField > should works with defaultValues 1`] = `
         class="emotion-0 emotion-1"
       >
         <label
-          class="emotion-2 emotion-3"
+          class="emotion-2 emotion-3 emotion-4"
           for=":r9:"
         >
           Test
         </label>
         <div>
           <div
-            class="emotion-4 emotion-5"
+            class="emotion-5 emotion-6"
             data-disabled="false"
             data-error="false"
             data-readonly="false"
             data-success="false"
           >
             <div
-              class="emotion-6 emotion-7"
+              class="emotion-7 emotion-8"
             >
               <span
-                class="emotion-8 emotion-9"
+                class="emotion-9 emotion-10"
               >
                 <div
-                  class="emotion-10 emotion-11 emotion-3"
+                  class="emotion-11 emotion-12 emotion-4"
                 >
                   <div
-                    class="emotion-13 emotion-1"
+                    class="emotion-14 emotion-1"
                   >
                     First
                   </div>
                 </div>
                 <button
                   aria-label="Close tag"
-                  class="emotion-15 emotion-16 emotion-17"
+                  class="emotion-16 emotion-17 emotion-18"
                   data-testid="close-tag"
                   type="button"
                 >
                   <svg
-                    class="emotion-18 emotion-19"
+                    class="emotion-19 emotion-20"
                     viewBox="0 0 16 16"
                     xmlns="http://www.w3.org/2000/svg"
                   >
@@ -1104,7 +1106,7 @@ exports[`TagInputField > should works with defaultValues 1`] = `
                 </button>
               </span>
               <input
-                class="emotion-20 emotion-21"
+                class="emotion-21 emotion-22"
                 data-size="large"
                 id=":r9:"
                 name="test"
@@ -1114,15 +1116,15 @@ exports[`TagInputField > should works with defaultValues 1`] = `
               />
             </div>
             <div
-              class="emotion-22 emotion-23"
+              class="emotion-23 emotion-24"
             >
               <button
                 aria-label="clear value"
-                class="emotion-24 emotion-17"
+                class="emotion-25 emotion-18"
                 type="button"
               >
                 <svg
-                  class="emotion-18 emotion-19"
+                  class="emotion-19 emotion-20"
                   viewBox="0 0 16 16"
                   xmlns="http://www.w3.org/2000/svg"
                 >
@@ -1136,7 +1138,7 @@ exports[`TagInputField > should works with defaultValues 1`] = `
         </div>
       </div>
       <button
-        class="emotion-28 emotion-29"
+        class="emotion-29 emotion-30"
         type="submit"
       >
         Submit
diff --git a/packages/form/src/components/TextAreaField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/TextAreaField/__tests__/__snapshots__/index.test.tsx.snap
index 6c86e60a3e..678713e33c 100644
--- a/packages/form/src/components/TextAreaField/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/form/src/components/TextAreaField/__tests__/__snapshots__/index.test.tsx.snap
@@ -25,8 +25,8 @@ exports[`TextAreaField > should render correctly 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -35,9 +35,10 @@ exports[`TextAreaField > should render correctly 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -45,7 +46,7 @@ exports[`TextAreaField > should render correctly 1`] = `
   display: flex;
 }
 
-.emotion-6 {
+.emotion-7 {
   width: 100%;
   resize: vertical;
   background: #ffffff;
@@ -56,68 +57,68 @@ exports[`TextAreaField > should render correctly 1`] = `
   padding-right: calc(1.5rem + 0px + 0px);
 }
 
-.emotion-6::-webkit-input-placeholder {
+.emotion-7::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::-moz-placeholder {
+.emotion-7::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-6:-ms-input-placeholder {
+.emotion-7:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::placeholder {
+.emotion-7::placeholder {
   color: #727683;
 }
 
-.emotion-6[data-success='true'] {
+.emotion-7[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-6[data-error='true'] {
+.emotion-7[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-6[data-readonly='true'] {
+.emotion-7[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-6:disabled {
+.emotion-7:disabled {
   background: #f3f3f4;
   border-color: #e9eaeb;
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::-webkit-input-placeholder {
+.emotion-7:disabled::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::-moz-placeholder {
+.emotion-7:disabled::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled:-ms-input-placeholder {
+.emotion-7:disabled:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::placeholder {
+.emotion-7:disabled::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:not(:disabled):hover {
+.emotion-7:not(:disabled):hover {
   border-color: #8c40ef;
 }
 
-.emotion-6:not(:disabled):focus {
+.emotion-7:not(:disabled):focus {
   outline: none;
   border-color: #8c40ef;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -153,17 +154,17 @@ exports[`TextAreaField > should render correctly 1`] = `
         class="emotion-0 emotion-1"
       >
         <label
-          class="emotion-2 emotion-3"
+          class="emotion-2 emotion-3 emotion-4"
           for=":r0:"
         >
           Test
         </label>
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-5 emotion-6"
         >
           <textarea
             aria-invalid="false"
-            class="emotion-6 emotion-7"
+            class="emotion-7 emotion-8"
             data-error="false"
             data-readonly="false"
             data-success="false"
@@ -172,7 +173,7 @@ exports[`TextAreaField > should render correctly 1`] = `
             rows="3"
           />
           <div
-            class="emotion-8 emotion-9"
+            class="emotion-9 emotion-10"
           />
         </div>
       </div>
@@ -229,8 +230,8 @@ exports[`TextAreaField > should render correctly generated 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -239,9 +240,10 @@ exports[`TextAreaField > should render correctly generated 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-6 {
+.emotion-7 {
   color: #b3144d;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -253,7 +255,7 @@ exports[`TextAreaField > should render correctly generated 1`] = `
   text-decoration: none;
 }
 
-.emotion-8 {
+.emotion-9 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -261,7 +263,7 @@ exports[`TextAreaField > should render correctly generated 1`] = `
   display: flex;
 }
 
-.emotion-10 {
+.emotion-11 {
   width: 100%;
   resize: vertical;
   background: #ffffff;
@@ -272,68 +274,68 @@ exports[`TextAreaField > should render correctly generated 1`] = `
   padding-right: calc(1.5rem + 300px + 0px);
 }
 
-.emotion-10::-webkit-input-placeholder {
+.emotion-11::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-10::-moz-placeholder {
+.emotion-11::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-10:-ms-input-placeholder {
+.emotion-11:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-10::placeholder {
+.emotion-11::placeholder {
   color: #727683;
 }
 
-.emotion-10[data-success='true'] {
+.emotion-11[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-10[data-error='true'] {
+.emotion-11[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-10[data-readonly='true'] {
+.emotion-11[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-10:disabled {
+.emotion-11:disabled {
   background: #f3f3f4;
   border-color: #e9eaeb;
   color: #b5b7bd;
 }
 
-.emotion-10:disabled::-webkit-input-placeholder {
+.emotion-11:disabled::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10:disabled::-moz-placeholder {
+.emotion-11:disabled::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10:disabled:-ms-input-placeholder {
+.emotion-11:disabled:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10:disabled::placeholder {
+.emotion-11:disabled::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10:not(:disabled):hover {
+.emotion-11:not(:disabled):hover {
   border-color: #8c40ef;
 }
 
-.emotion-10:not(:disabled):focus {
+.emotion-11:not(:disabled):focus {
   outline: none;
   border-color: #8c40ef;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-12 {
+.emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -359,7 +361,7 @@ exports[`TextAreaField > should render correctly generated 1`] = `
   right: 0.5rem;
 }
 
-.emotion-14 {
+.emotion-15 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -398,22 +400,22 @@ exports[`TextAreaField > should render correctly generated 1`] = `
   color: #3f4250;
 }
 
-.emotion-14:hover {
+.emotion-15:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-14:active {
+.emotion-15:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-14:hover,
-.emotion-14:active {
+.emotion-15:hover,
+.emotion-15:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-16 {
+.emotion-17 {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -422,16 +424,16 @@ exports[`TextAreaField > should render correctly generated 1`] = `
   min-height: 16px;
 }
 
-.emotion-16 .fillStroke {
+.emotion-17 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
 
-.emotion-16 path {
+.emotion-17 path {
   fill: currentColor;
 }
 
-.emotion-18 {
+.emotion-19 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -470,17 +472,17 @@ exports[`TextAreaField > should render correctly generated 1`] = `
   color: #ffffff;
 }
 
-.emotion-18:hover {
+.emotion-19:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-18:active {
+.emotion-19:active {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-18:hover,
-.emotion-18:active {
+.emotion-19:hover,
+.emotion-19:active {
   background: #792dd4;
   color: #f9f9fa;
 }
@@ -498,23 +500,23 @@ exports[`TextAreaField > should render correctly generated 1`] = `
           class="emotion-2 emotion-1"
         >
           <label
-            class="emotion-4 emotion-5"
+            class="emotion-4 emotion-5 emotion-6"
             for=":r7:"
           >
             Test
           </label>
           <span
-            class="emotion-6 emotion-5"
+            class="emotion-7 emotion-6"
           >
             *
           </span>
         </div>
         <div
-          class="emotion-8 emotion-9"
+          class="emotion-9 emotion-10"
         >
           <textarea
             aria-invalid="false"
-            class="emotion-10 emotion-11"
+            class="emotion-11 emotion-12"
             data-error="false"
             data-readonly="false"
             data-success="false"
@@ -525,15 +527,15 @@ exports[`TextAreaField > should render correctly generated 1`] = `
             This is an example
           </textarea>
           <div
-            class="emotion-12 emotion-13"
+            class="emotion-13 emotion-14"
           >
             <button
               aria-label="clear value"
-              class="emotion-14 emotion-15"
+              class="emotion-15 emotion-16"
               type="button"
             >
               <svg
-                class="emotion-16 emotion-17"
+                class="emotion-17 emotion-18"
                 viewBox="0 0 16 16"
                 xmlns="http://www.w3.org/2000/svg"
               >
@@ -546,7 +548,7 @@ exports[`TextAreaField > should render correctly generated 1`] = `
         </div>
       </div>
       <button
-        class="emotion-18 emotion-19"
+        class="emotion-19 emotion-20"
         type="submit"
       >
         Submit
@@ -581,8 +583,8 @@ exports[`TextAreaField > should submit with onSubmitEnter prop 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -591,9 +593,10 @@ exports[`TextAreaField > should submit with onSubmitEnter prop 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -601,7 +604,7 @@ exports[`TextAreaField > should submit with onSubmitEnter prop 1`] = `
   display: flex;
 }
 
-.emotion-6 {
+.emotion-7 {
   width: 100%;
   resize: vertical;
   background: #ffffff;
@@ -612,68 +615,68 @@ exports[`TextAreaField > should submit with onSubmitEnter prop 1`] = `
   padding-right: calc(1.5rem + 0px + 0px);
 }
 
-.emotion-6::-webkit-input-placeholder {
+.emotion-7::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::-moz-placeholder {
+.emotion-7::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-6:-ms-input-placeholder {
+.emotion-7:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::placeholder {
+.emotion-7::placeholder {
   color: #727683;
 }
 
-.emotion-6[data-success='true'] {
+.emotion-7[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-6[data-error='true'] {
+.emotion-7[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-6[data-readonly='true'] {
+.emotion-7[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-6:disabled {
+.emotion-7:disabled {
   background: #f3f3f4;
   border-color: #e9eaeb;
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::-webkit-input-placeholder {
+.emotion-7:disabled::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::-moz-placeholder {
+.emotion-7:disabled::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled:-ms-input-placeholder {
+.emotion-7:disabled:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::placeholder {
+.emotion-7:disabled::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:not(:disabled):hover {
+.emotion-7:not(:disabled):hover {
   border-color: #8c40ef;
 }
 
-.emotion-6:not(:disabled):focus {
+.emotion-7:not(:disabled):focus {
   outline: none;
   border-color: #8c40ef;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -699,7 +702,7 @@ exports[`TextAreaField > should submit with onSubmitEnter prop 1`] = `
   right: 0.5rem;
 }
 
-.emotion-10 {
+.emotion-11 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -738,17 +741,17 @@ exports[`TextAreaField > should submit with onSubmitEnter prop 1`] = `
   color: #ffffff;
 }
 
-.emotion-10:hover {
+.emotion-11:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-10:active {
+.emotion-11:active {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-10:hover,
-.emotion-10:active {
+.emotion-11:hover,
+.emotion-11:active {
   background: #792dd4;
   color: #f9f9fa;
 }
@@ -763,17 +766,17 @@ exports[`TextAreaField > should submit with onSubmitEnter prop 1`] = `
         class="emotion-0 emotion-1"
       >
         <label
-          class="emotion-2 emotion-3"
+          class="emotion-2 emotion-3 emotion-4"
           for=":r3:"
         >
           Test
         </label>
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-5 emotion-6"
         >
           <textarea
             aria-invalid="false"
-            class="emotion-6 emotion-7"
+            class="emotion-7 emotion-8"
             data-error="false"
             data-readonly="false"
             data-success="false"
@@ -784,12 +787,12 @@ exports[`TextAreaField > should submit with onSubmitEnter prop 1`] = `
             This is an example
           </textarea>
           <div
-            class="emotion-8 emotion-9"
+            class="emotion-9 emotion-10"
           />
         </div>
       </div>
       <button
-        class="emotion-10 emotion-11"
+        class="emotion-11 emotion-12"
         type="submit"
       >
         Submit
diff --git a/packages/form/src/components/TextInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/TextInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap
index d5377c6717..5e91969811 100644
--- a/packages/form/src/components/TextInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/form/src/components/TextInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap
@@ -25,8 +25,8 @@ exports[`TextInputFieldV2 > should render correctly 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -35,9 +35,10 @@ exports[`TextInputFieldV2 > should render correctly 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -51,69 +52,69 @@ exports[`TextInputFieldV2 > should render correctly 1`] = `
   border-radius: 0.25rem;
 }
 
-.emotion-4>.emotion-7 {
+.emotion-5>.emotion-8 {
   color: #3f4250;
 }
 
-.emotion-4>.emotion-7::-webkit-input-placeholder {
+.emotion-5>.emotion-8::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7::-moz-placeholder {
+.emotion-5>.emotion-8::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7:-ms-input-placeholder {
+.emotion-5>.emotion-8:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7::placeholder {
+.emotion-5>.emotion-8::placeholder {
   color: #727683;
 }
 
-.emotion-4[data-success='true'] {
+.emotion-5[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-4[data-error='true'] {
+.emotion-5[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-4[data-readonly='true'] {
+.emotion-5[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-4[data-disabled='true'] {
+.emotion-5[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7 {
+.emotion-5[data-disabled='true']>.emotion-8 {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::-webkit-input-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::-moz-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7:-ms-input-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-5:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-6 {
+.emotion-7 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -126,11 +127,11 @@ exports[`TextInputFieldV2 > should render correctly 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-6[data-size='large'] {
+.emotion-7[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-6[data-size='small'] {
+.emotion-7[data-size='small'] {
   padding-left: 0.5rem;
 }
 
@@ -144,14 +145,14 @@ exports[`TextInputFieldV2 > should render correctly 1`] = `
         class="emotion-0 emotion-1"
       >
         <label
-          class="emotion-2 emotion-3"
+          class="emotion-2 emotion-3 emotion-4"
           for=":r0:"
         >
           Test
         </label>
         <div>
           <div
-            class="emotion-4 emotion-5"
+            class="emotion-5 emotion-6"
             data-disabled="false"
             data-error="false"
             data-readonly="false"
@@ -159,7 +160,7 @@ exports[`TextInputFieldV2 > should render correctly 1`] = `
           >
             <input
               aria-invalid="false"
-              class="emotion-6 emotion-7"
+              class="emotion-7 emotion-8"
               data-size="large"
               id=":r0:"
               name="test"
@@ -222,8 +223,8 @@ exports[`TextInputFieldV2 > should render correctly generated 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -232,9 +233,10 @@ exports[`TextInputFieldV2 > should render correctly generated 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-6 {
+.emotion-7 {
   color: #b3144d;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -246,7 +248,7 @@ exports[`TextInputFieldV2 > should render correctly generated 1`] = `
   text-decoration: none;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -260,69 +262,69 @@ exports[`TextInputFieldV2 > should render correctly generated 1`] = `
   border-radius: 0.25rem;
 }
 
-.emotion-8>.emotion-11 {
+.emotion-9>.emotion-12 {
   color: #3f4250;
 }
 
-.emotion-8>.emotion-11::-webkit-input-placeholder {
+.emotion-9>.emotion-12::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::-moz-placeholder {
+.emotion-9>.emotion-12::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11:-ms-input-placeholder {
+.emotion-9>.emotion-12:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::placeholder {
+.emotion-9>.emotion-12::placeholder {
   color: #727683;
 }
 
-.emotion-8[data-success='true'] {
+.emotion-9[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11 {
+.emotion-9[data-disabled='true']>.emotion-12 {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-webkit-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-moz-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11:-ms-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-9:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-10 {
+.emotion-11 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -335,15 +337,15 @@ exports[`TextInputFieldV2 > should render correctly generated 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-10[data-size='large'] {
+.emotion-11[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-10[data-size='small'] {
+.emotion-11[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-12 {
+.emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -367,7 +369,7 @@ exports[`TextInputFieldV2 > should render correctly generated 1`] = `
   padding: 0 1rem;
 }
 
-.emotion-14 {
+.emotion-15 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -406,22 +408,22 @@ exports[`TextInputFieldV2 > should render correctly generated 1`] = `
   color: #3f4250;
 }
 
-.emotion-14:hover {
+.emotion-15:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-14:active {
+.emotion-15:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-14:hover,
-.emotion-14:active {
+.emotion-15:hover,
+.emotion-15:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-16 {
+.emotion-17 {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -430,16 +432,16 @@ exports[`TextInputFieldV2 > should render correctly generated 1`] = `
   min-height: 16px;
 }
 
-.emotion-16 .fillStroke {
+.emotion-17 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
 
-.emotion-16 path {
+.emotion-17 path {
   fill: currentColor;
 }
 
-.emotion-18 {
+.emotion-19 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -478,17 +480,17 @@ exports[`TextInputFieldV2 > should render correctly generated 1`] = `
   color: #ffffff;
 }
 
-.emotion-18:hover {
+.emotion-19:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-18:active {
+.emotion-19:active {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-18:hover,
-.emotion-18:active {
+.emotion-19:hover,
+.emotion-19:active {
   background: #792dd4;
   color: #f9f9fa;
 }
@@ -506,20 +508,20 @@ exports[`TextInputFieldV2 > should render correctly generated 1`] = `
           class="emotion-2 emotion-1"
         >
           <label
-            class="emotion-4 emotion-5"
+            class="emotion-4 emotion-5 emotion-6"
             for=":r3:"
           >
             Test
           </label>
           <span
-            class="emotion-6 emotion-5"
+            class="emotion-7 emotion-6"
           >
             *
           </span>
         </div>
         <div>
           <div
-            class="emotion-8 emotion-9"
+            class="emotion-9 emotion-10"
             data-disabled="false"
             data-error="false"
             data-readonly="false"
@@ -527,7 +529,7 @@ exports[`TextInputFieldV2 > should render correctly generated 1`] = `
           >
             <input
               aria-invalid="false"
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
               data-size="large"
               id=":r3:"
               name="test"
@@ -536,15 +538,15 @@ exports[`TextInputFieldV2 > should render correctly generated 1`] = `
               value="This is an example"
             />
             <div
-              class="emotion-12 emotion-13"
+              class="emotion-13 emotion-14"
             >
               <button
                 aria-label="clear value"
-                class="emotion-14 emotion-15"
+                class="emotion-15 emotion-16"
                 type="button"
               >
                 <svg
-                  class="emotion-16 emotion-17"
+                  class="emotion-17 emotion-18"
                   viewBox="0 0 16 16"
                   xmlns="http://www.w3.org/2000/svg"
                 >
@@ -558,7 +560,7 @@ exports[`TextInputFieldV2 > should render correctly generated 1`] = `
         </div>
       </div>
       <button
-        class="emotion-18 emotion-19"
+        class="emotion-19 emotion-20"
         type="submit"
       >
         Submit
diff --git a/packages/form/src/components/TimeInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/TimeInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap
index 1d69cb1163..64c14a4def 100644
--- a/packages/form/src/components/TimeInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/form/src/components/TimeInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap
@@ -25,8 +25,8 @@ exports[`TextInputFieldV2 > should render correctly 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -35,9 +35,10 @@ exports[`TextInputFieldV2 > should render correctly 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -69,41 +70,41 @@ exports[`TextInputFieldV2 > should render correctly 1`] = `
   border: 1px solid #d9dadd;
 }
 
-.emotion-4:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-5:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-4[data-disabled="false"]:hover,
-.emotion-4 [data-disabled="false"]:focus {
+.emotion-5[data-disabled="false"]:hover,
+.emotion-5 [data-disabled="false"]:focus {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-4:focus-within {
+.emotion-5:focus-within {
   border-color: #792dd4;
 }
 
-.emotion-4[data-size='small'] {
+.emotion-5[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-4[data-size='medium'] {
+.emotion-5[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-4[data-size='large'] {
+.emotion-5[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-4[data-readonly='true'] {
+.emotion-5[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-4[data-disabled='true'] {
+.emotion-5[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
@@ -113,20 +114,20 @@ exports[`TextInputFieldV2 > should render correctly 1`] = `
   user-select: none;
 }
 
-.emotion-4[data-error='true'] {
+.emotion-5[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-4[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-5[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-4[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+.emotion-5[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
   border-color: #92103f;
 }
 
-.emotion-6 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -149,7 +150,7 @@ exports[`TextInputFieldV2 > should render correctly 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-10 {
+.emotion-11 {
   border: none;
   outline: none;
   background: transparent;
@@ -162,30 +163,30 @@ exports[`TextInputFieldV2 > should render correctly 1`] = `
   caret-color: transparent;
 }
 
-.emotion-10[data-size='large'] {
+.emotion-11[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-10:not(:disabled):hover {
+.emotion-11:not(:disabled):hover {
   background-color: #e9eaeb;
   color: #727683;
 }
 
-.emotion-10:not(:disabled):active,
-.emotion-10:not(:disabled):focus {
+.emotion-11:not(:disabled):active,
+.emotion-11:not(:disabled):focus {
   background-color: #e9eaeb;
   color: #3f4250;
 }
 
-.emotion-10:-moz-read-only {
+.emotion-11:-moz-read-only {
   cursor: default;
 }
 
-.emotion-10:read-only {
+.emotion-11:read-only {
   cursor: default;
 }
 
-.emotion-10:disabled {
+.emotion-11:disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -193,19 +194,19 @@ exports[`TextInputFieldV2 > should render correctly 1`] = `
   user-select: none;
 }
 
-.emotion-10[data-period="true"] {
+.emotion-11[data-period="true"] {
   color: #727683;
 }
 
-.emotion-10::-moz-selection {
+.emotion-11::-moz-selection {
   background: none;
 }
 
-.emotion-10::selection {
+.emotion-11::selection {
   background: none;
 }
 
-.emotion-13 {
+.emotion-14 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -228,29 +229,29 @@ exports[`TextInputFieldV2 > should render correctly 1`] = `
         class="emotion-0 emotion-1"
       >
         <label
-          class="emotion-2 emotion-3"
+          class="emotion-2 emotion-3 emotion-4"
           for=":r0:"
         >
           Test
         </label>
         <div
           aria-required="false"
-          class="emotion-4 emotion-5"
+          class="emotion-5 emotion-6"
           data-disabled="false"
           data-error="false"
           data-readonly="false"
           data-size="medium"
         >
           <div
-            class="emotion-6 emotion-1"
+            class="emotion-7 emotion-1"
           >
             <div
-              class="emotion-6 emotion-1"
+              class="emotion-7 emotion-1"
             >
               <input
                 aria-valuemax="23"
                 aria-valuemin="0"
-                class="emotion-10 emotion-11"
+                class="emotion-11 emotion-12"
                 data-size="medium"
                 data-testid="hours-input"
                 placeholder="00"
@@ -258,18 +259,18 @@ exports[`TextInputFieldV2 > should render correctly 1`] = `
                 value=""
               />
               <span
-                class="emotion-12 emotion-13 emotion-3"
+                class="emotion-13 emotion-14 emotion-4"
               >
                 :
               </span>
             </div>
             <div
-              class="emotion-6 emotion-1"
+              class="emotion-7 emotion-1"
             >
               <input
                 aria-valuemax="59"
                 aria-valuemin="0"
-                class="emotion-10 emotion-11"
+                class="emotion-11 emotion-12"
                 data-size="medium"
                 data-testid="minutes-input"
                 placeholder="00"
@@ -277,18 +278,18 @@ exports[`TextInputFieldV2 > should render correctly 1`] = `
                 value=""
               />
               <span
-                class="emotion-12 emotion-13 emotion-3"
+                class="emotion-13 emotion-14 emotion-4"
               >
                 :
               </span>
             </div>
             <div
-              class="emotion-6 emotion-1"
+              class="emotion-7 emotion-1"
             >
               <input
                 aria-valuemax="59"
                 aria-valuemin="0"
-                class="emotion-10 emotion-11"
+                class="emotion-11 emotion-12"
                 data-size="medium"
                 data-testid="seconds-input"
                 placeholder="00"
@@ -329,8 +330,8 @@ exports[`TextInputFieldV2 > should render correctly disabled 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -339,9 +340,10 @@ exports[`TextInputFieldV2 > should render correctly disabled 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -373,41 +375,41 @@ exports[`TextInputFieldV2 > should render correctly disabled 1`] = `
   border: 1px solid #d9dadd;
 }
 
-.emotion-4:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-5:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-4[data-disabled="false"]:hover,
-.emotion-4 [data-disabled="false"]:focus {
+.emotion-5[data-disabled="false"]:hover,
+.emotion-5 [data-disabled="false"]:focus {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-4:focus-within {
+.emotion-5:focus-within {
   border-color: #792dd4;
 }
 
-.emotion-4[data-size='small'] {
+.emotion-5[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-4[data-size='medium'] {
+.emotion-5[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-4[data-size='large'] {
+.emotion-5[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-4[data-readonly='true'] {
+.emotion-5[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-4[data-disabled='true'] {
+.emotion-5[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
@@ -417,20 +419,20 @@ exports[`TextInputFieldV2 > should render correctly disabled 1`] = `
   user-select: none;
 }
 
-.emotion-4[data-error='true'] {
+.emotion-5[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-4[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-5[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-4[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+.emotion-5[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
   border-color: #92103f;
 }
 
-.emotion-6 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -453,7 +455,7 @@ exports[`TextInputFieldV2 > should render correctly disabled 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-10 {
+.emotion-11 {
   border: none;
   outline: none;
   background: transparent;
@@ -466,30 +468,30 @@ exports[`TextInputFieldV2 > should render correctly disabled 1`] = `
   caret-color: transparent;
 }
 
-.emotion-10[data-size='large'] {
+.emotion-11[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-10:not(:disabled):hover {
+.emotion-11:not(:disabled):hover {
   background-color: #e9eaeb;
   color: #727683;
 }
 
-.emotion-10:not(:disabled):active,
-.emotion-10:not(:disabled):focus {
+.emotion-11:not(:disabled):active,
+.emotion-11:not(:disabled):focus {
   background-color: #e9eaeb;
   color: #3f4250;
 }
 
-.emotion-10:-moz-read-only {
+.emotion-11:-moz-read-only {
   cursor: default;
 }
 
-.emotion-10:read-only {
+.emotion-11:read-only {
   cursor: default;
 }
 
-.emotion-10:disabled {
+.emotion-11:disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -497,19 +499,19 @@ exports[`TextInputFieldV2 > should render correctly disabled 1`] = `
   user-select: none;
 }
 
-.emotion-10[data-period="true"] {
+.emotion-11[data-period="true"] {
   color: #727683;
 }
 
-.emotion-10::-moz-selection {
+.emotion-11::-moz-selection {
   background: none;
 }
 
-.emotion-10::selection {
+.emotion-11::selection {
   background: none;
 }
 
-.emotion-13 {
+.emotion-14 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -532,29 +534,29 @@ exports[`TextInputFieldV2 > should render correctly disabled 1`] = `
         class="emotion-0 emotion-1"
       >
         <label
-          class="emotion-2 emotion-3"
+          class="emotion-2 emotion-3 emotion-4"
           for=":r4:"
         >
           Test
         </label>
         <div
           aria-required="false"
-          class="emotion-4 emotion-5"
+          class="emotion-5 emotion-6"
           data-disabled="false"
           data-error="false"
           data-readonly="false"
           data-size="medium"
         >
           <div
-            class="emotion-6 emotion-1"
+            class="emotion-7 emotion-1"
           >
             <div
-              class="emotion-6 emotion-1"
+              class="emotion-7 emotion-1"
             >
               <input
                 aria-valuemax="23"
                 aria-valuemin="0"
-                class="emotion-10 emotion-11"
+                class="emotion-11 emotion-12"
                 data-size="medium"
                 data-testid="hours-input"
                 placeholder="00"
@@ -562,18 +564,18 @@ exports[`TextInputFieldV2 > should render correctly disabled 1`] = `
                 value=""
               />
               <span
-                class="emotion-12 emotion-13 emotion-3"
+                class="emotion-13 emotion-14 emotion-4"
               >
                 :
               </span>
             </div>
             <div
-              class="emotion-6 emotion-1"
+              class="emotion-7 emotion-1"
             >
               <input
                 aria-valuemax="59"
                 aria-valuemin="0"
-                class="emotion-10 emotion-11"
+                class="emotion-11 emotion-12"
                 data-size="medium"
                 data-testid="minutes-input"
                 placeholder="00"
@@ -581,18 +583,18 @@ exports[`TextInputFieldV2 > should render correctly disabled 1`] = `
                 value=""
               />
               <span
-                class="emotion-12 emotion-13 emotion-3"
+                class="emotion-13 emotion-14 emotion-4"
               >
                 :
               </span>
             </div>
             <div
-              class="emotion-6 emotion-1"
+              class="emotion-7 emotion-1"
             >
               <input
                 aria-valuemax="59"
                 aria-valuemin="0"
-                class="emotion-10 emotion-11"
+                class="emotion-11 emotion-12"
                 data-size="medium"
                 data-testid="seconds-input"
                 placeholder="00"
diff --git a/packages/form/src/components/UnitInputField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/UnitInputField/__tests__/__snapshots__/index.test.tsx.snap
index 5986154acf..56e697d87d 100644
--- a/packages/form/src/components/UnitInputField/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/form/src/components/UnitInputField/__tests__/__snapshots__/index.test.tsx.snap
@@ -48,8 +48,8 @@ exports[`UnitInputField > should handles onChange and selection 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -58,9 +58,10 @@ exports[`UnitInputField > should handles onChange and selection 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-6 {
+.emotion-7 {
   color: #b3144d;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -72,7 +73,7 @@ exports[`UnitInputField > should handles onChange and selection 1`] = `
   text-decoration: none;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -98,41 +99,41 @@ exports[`UnitInputField > should handles onChange and selection 1`] = `
   background-color: #ffffff;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):focus,
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):active {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
   border-color: #792dd4;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):focus>.emotion-11,
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+    ):not([data-error='true']):focus>.emotion-12,
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):active>.emotion-11 {
+    ):not([data-error='true']):active>.emotion-12 {
   border-right-color: #8c40ef;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):focus-within {
   border-color: #792dd4;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):focus-within>.emotion-11 {
+    ):not([data-error='true']):focus-within>.emotion-12 {
   border-right-color: #8c40ef;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
     ):not([data-readonly='true']):hover,
-.emotion-8:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
     ):focus {
   -webkit-text-decoration: none;
@@ -140,90 +141,90 @@ exports[`UnitInputField > should handles onChange and selection 1`] = `
   border-color: #8c40ef;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
-    ):not([data-readonly='true']):hover>.emotion-11,
-.emotion-8:not([data-disabled='true']):not([data-error='true']):not(
+    ):not([data-readonly='true']):hover>.emotion-12,
+.emotion-9:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
-    ):focus>.emotion-11 {
+    ):focus>.emotion-12 {
   border-right-color: #8c40ef;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-8[data-readonly='true']:active {
+.emotion-9[data-readonly='true']:active {
   border-color: #d9dadd;
 }
 
-.emotion-8[data-size='small'] {
+.emotion-9[data-size='small'] {
   height: 2rem;
 }
 
-.emotion-8[data-size='medium'] {
+.emotion-9[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-8[data-size='large'] {
+.emotion-9[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-8[data-success='true'] {
+.emotion-9[data-success='true'] {
   border: 1px solid #22674e;
 }
 
-.emotion-8[data-success='true']>.emotion-11 {
+.emotion-9[data-success='true']>.emotion-12 {
   border-right-color: #22674e;
 }
 
-.emotion-8[data-success='true']:active {
+.emotion-9[data-success='true']:active {
   border: 1px solid #22674e;
   box-shadow: 0px 0px 0px 3px #45d19f40;
 }
 
-.emotion-8[data-success='true']:active>.emotion-11 {
+.emotion-9[data-success='true']:active>.emotion-12 {
   border-right-color: #22674e;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-8[data-error='true']>.emotion-11 {
+.emotion-9[data-error='true']>.emotion-12 {
   border-right-color: #b3144d;
 }
 
-.emotion-8[data-error='true']>.emotion-11:hover {
+.emotion-9[data-error='true']>.emotion-12:hover {
   border-right-color: #b3144d;
 }
 
-.emotion-8[data-error='true']:active {
+.emotion-9[data-error='true']:active {
   border: 1px solid #b3144d;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-8[data-error='true']:active>.emotion-11 {
+.emotion-9[data-error='true']:active>.emotion-12 {
   border-right-color: #b3144d;
 }
 
-.emotion-8[data-error='true']:active>.emotion-11:hover {
+.emotion-9[data-error='true']:active>.emotion-12:hover {
   border-right-color: #b3144d;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11 {
+.emotion-9[data-disabled='true']>.emotion-12 {
   border-right-color: #e9eaeb;
 }
 
-.emotion-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -241,7 +242,7 @@ exports[`UnitInputField > should handles onChange and selection 1`] = `
   height: 100%;
 }
 
-.emotion-12 {
+.emotion-13 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -255,51 +256,51 @@ exports[`UnitInputField > should handles onChange and selection 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-12[data-size="small"] {
+.emotion-13[data-size="small"] {
   padding-left: 0.5rem;
 }
 
-.emotion-12[data-size="large"] {
+.emotion-13[data-size="large"] {
   font-size: 1rem;
 }
 
-.emotion-12::-webkit-input-placeholder {
+.emotion-13::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-12::-moz-placeholder {
+.emotion-13::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-12:-ms-input-placeholder {
+.emotion-13:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-12::placeholder {
+.emotion-13::placeholder {
   color: #727683;
 }
 
-.emotion-12:disabled {
+.emotion-13:disabled {
   cursor: not-allowed;
 }
 
-.emotion-12:disabled::-webkit-input-placeholder {
+.emotion-13:disabled::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12:disabled::-moz-placeholder {
+.emotion-13:disabled::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12:disabled:-ms-input-placeholder {
+.emotion-13:disabled:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12:disabled::placeholder {
+.emotion-13:disabled::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-14 {
+.emotion-15 {
   width: 12.6rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -307,29 +308,29 @@ exports[`UnitInputField > should handles onChange and selection 1`] = `
   display: flex;
 }
 
-.emotion-17 {
+.emotion-18 {
   width: 100%;
 }
 
-.emotion-17 #unit {
+.emotion-18 #unit {
   border: none;
   background: transparent;
 }
 
-.emotion-17 #unit:focus,
-.emotion-17 #unit:active {
+.emotion-18 #unit:focus,
+.emotion-18 #unit:active {
   box-shadow: none;
 }
 
-.emotion-19 {
+.emotion-20 {
   display: inherit;
 }
 
-.emotion-19[data-container-full-width="true"] {
+.emotion-20[data-container-full-width="true"] {
   width: 100%;
 }
 
-.emotion-23 {
+.emotion-24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -364,81 +365,85 @@ exports[`UnitInputField > should handles onChange and selection 1`] = `
   overflow: hidden;
 }
 
-.emotion-23[data-size='small'] {
+.emotion-24[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-23[data-size='medium'] {
+.emotion-24[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-23[data-size='large'] {
+.emotion-24[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-23[data-state='neutral'] {
+.emotion-24[data-state='neutral'] {
   border: 1px solid #d9dadd;
 }
 
-.emotion-23[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-24[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-23[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-23[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-24[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-23[data-state='neutral'][data-dropdownvisible='true'] {
+.emotion-24[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.emotion-24[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
 
-.emotion-23[data-state='success'] {
+.emotion-24[data-state='success'] {
   border: 1px solid #22674e;
 }
 
-.emotion-23[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-24[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #1b533f;
   box-shadow: 0px 0px 0px 3px #45d19f40;
 }
 
-.emotion-23[data-state='success'][data-dropdownvisible='true'] {
+.emotion-24[data-state='success'][data-dropdownvisible='true'] {
   border-color: #1b533f;
 }
 
-.emotion-23[data-state='danger'] {
+.emotion-24[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-23[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-24[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-23[data-state='danger'][data-dropdownvisible='true'] {
+.emotion-24[data-state='danger'][data-dropdownvisible='true'] {
   border-color: #92103f;
 }
 
-.emotion-23:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-24:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-23[data-readonly='true'] {
+.emotion-24[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-23[data-disabled='true'] {
+.emotion-24[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
 }
 
-.emotion-26 {
+.emotion-27 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -450,9 +455,10 @@ exports[`UnitInputField > should handles onChange and selection 1`] = `
   text-decoration: none;
   text-overflow: ellipsis;
   overflow: hidden;
+  white-space: nowrap;
 }
 
-.emotion-28 {
+.emotion-29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -480,7 +486,7 @@ exports[`UnitInputField > should handles onChange and selection 1`] = `
   display: flex;
 }
 
-.emotion-30 {
+.emotion-31 {
   vertical-align: middle;
   fill: #3f4250;
   height: 1rem;
@@ -489,12 +495,12 @@ exports[`UnitInputField > should handles onChange and selection 1`] = `
   min-height: 1rem;
 }
 
-.emotion-30 .fillStroke {
+.emotion-31 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
 
-.emotion-32 {
+.emotion-33 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -533,17 +539,17 @@ exports[`UnitInputField > should handles onChange and selection 1`] = `
   color: #ffffff;
 }
 
-.emotion-32:hover {
+.emotion-33:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-32:active {
+.emotion-33:active {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-32:hover,
-.emotion-32:active {
+.emotion-33:hover,
+.emotion-33:active {
   background: #792dd4;
   color: #f9f9fa;
 }
@@ -561,19 +567,19 @@ exports[`UnitInputField > should handles onChange and selection 1`] = `
           class="emotion-2 emotion-1"
         >
           <label
-            class="emotion-4 emotion-5"
+            class="emotion-4 emotion-5 emotion-6"
             for=":r6:"
           >
             Test
           </label>
           <span
-            class="emotion-6 emotion-5"
+            class="emotion-7 emotion-6"
           >
             *
           </span>
         </div>
         <div
-          class="emotion-8 emotion-9"
+          class="emotion-9 emotion-10"
           data-disabled="false"
           data-error="false"
           data-readonly="false"
@@ -581,12 +587,12 @@ exports[`UnitInputField > should handles onChange and selection 1`] = `
           data-success="false"
         >
           <div
-            class="emotion-10 emotion-11"
+            class="emotion-11 emotion-12"
             id="input-field"
           >
             <input
               aria-invalid="false"
-              class="emotion-12 emotion-13"
+              class="emotion-13 emotion-14"
               data-size="large"
               data-testid="unit-input"
               id=":r6:"
@@ -602,19 +608,19 @@ exports[`UnitInputField > should handles onChange and selection 1`] = `
           </div>
            
           <div
-            class="emotion-14 emotion-15"
+            class="emotion-15 emotion-16"
             width="12.6rem"
           >
             <div
               aria-label="test-unit"
-              class="emotion-16 emotion-17 emotion-18"
+              class="emotion-17 emotion-18 emotion-19"
             >
               <div
                 aria-controls=":ra:"
                 aria-describedby=":ra:"
-                class="emotion-19 emotion-20"
+                class="emotion-20 emotion-21"
                 data-container-full-width="true"
-                tabindex="0"
+                tabindex="-1"
               >
                 <div
                   class="emotion-0 emotion-1"
@@ -622,7 +628,7 @@ exports[`UnitInputField > should handles onChange and selection 1`] = `
                   <div
                     aria-expanded="false"
                     aria-haspopup="listbox"
-                    class="emotion-23 emotion-24"
+                    class="emotion-24 emotion-25"
                     data-disabled="false"
                     data-dropdownvisible="false"
                     data-readonly="false"
@@ -634,16 +640,16 @@ exports[`UnitInputField > should handles onChange and selection 1`] = `
                     tabindex="0"
                   >
                     <div
-                      class="emotion-25 emotion-26 emotion-5"
+                      class="emotion-26 emotion-27 emotion-6"
                     >
                       Days
                     </div>
                     <div
-                      class="emotion-28 emotion-29"
+                      class="emotion-29 emotion-30"
                     >
                       <svg
                         aria-label="show dropdown"
-                        class="emotion-30 emotion-31"
+                        class="emotion-31 emotion-32"
                         viewBox="0 0 20 20"
                       >
                         <path
@@ -661,7 +667,7 @@ exports[`UnitInputField > should handles onChange and selection 1`] = `
         </div>
       </div>
       <button
-        class="emotion-32 emotion-33"
+        class="emotion-33 emotion-34"
         type="submit"
       >
         Submit
@@ -696,8 +702,8 @@ exports[`UnitInputField > should render correctly 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -706,9 +712,10 @@ exports[`UnitInputField > should render correctly 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -734,41 +741,41 @@ exports[`UnitInputField > should render correctly 1`] = `
   background-color: #ffffff;
 }
 
-.emotion-4:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-5:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):focus,
-.emotion-4:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-5:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):active {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
   border-color: #792dd4;
 }
 
-.emotion-4:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-5:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):focus>.emotion-7,
-.emotion-4:not([data-disabled='true']):not([data-readonly='true']):not(
+    ):not([data-error='true']):focus>.emotion-8,
+.emotion-5:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):active>.emotion-7 {
+    ):not([data-error='true']):active>.emotion-8 {
   border-right-color: #8c40ef;
 }
 
-.emotion-4:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-5:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):focus-within {
   border-color: #792dd4;
 }
 
-.emotion-4:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-5:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):focus-within>.emotion-7 {
+    ):not([data-error='true']):focus-within>.emotion-8 {
   border-right-color: #8c40ef;
 }
 
-.emotion-4:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-5:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
     ):not([data-readonly='true']):hover,
-.emotion-4:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-5:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
     ):focus {
   -webkit-text-decoration: none;
@@ -776,90 +783,90 @@ exports[`UnitInputField > should render correctly 1`] = `
   border-color: #8c40ef;
 }
 
-.emotion-4:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-5:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
-    ):not([data-readonly='true']):hover>.emotion-7,
-.emotion-4:not([data-disabled='true']):not([data-error='true']):not(
+    ):not([data-readonly='true']):hover>.emotion-8,
+.emotion-5:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
-    ):focus>.emotion-7 {
+    ):focus>.emotion-8 {
   border-right-color: #8c40ef;
 }
 
-.emotion-4[data-readonly='true'] {
+.emotion-5[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-4[data-readonly='true']:active {
+.emotion-5[data-readonly='true']:active {
   border-color: #d9dadd;
 }
 
-.emotion-4[data-size='small'] {
+.emotion-5[data-size='small'] {
   height: 2rem;
 }
 
-.emotion-4[data-size='medium'] {
+.emotion-5[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-4[data-size='large'] {
+.emotion-5[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-4[data-success='true'] {
+.emotion-5[data-success='true'] {
   border: 1px solid #22674e;
 }
 
-.emotion-4[data-success='true']>.emotion-7 {
+.emotion-5[data-success='true']>.emotion-8 {
   border-right-color: #22674e;
 }
 
-.emotion-4[data-success='true']:active {
+.emotion-5[data-success='true']:active {
   border: 1px solid #22674e;
   box-shadow: 0px 0px 0px 3px #45d19f40;
 }
 
-.emotion-4[data-success='true']:active>.emotion-7 {
+.emotion-5[data-success='true']:active>.emotion-8 {
   border-right-color: #22674e;
 }
 
-.emotion-4[data-error='true'] {
+.emotion-5[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-4[data-error='true']>.emotion-7 {
+.emotion-5[data-error='true']>.emotion-8 {
   border-right-color: #b3144d;
 }
 
-.emotion-4[data-error='true']>.emotion-7:hover {
+.emotion-5[data-error='true']>.emotion-8:hover {
   border-right-color: #b3144d;
 }
 
-.emotion-4[data-error='true']:active {
+.emotion-5[data-error='true']:active {
   border: 1px solid #b3144d;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-4[data-error='true']:active>.emotion-7 {
+.emotion-5[data-error='true']:active>.emotion-8 {
   border-right-color: #b3144d;
 }
 
-.emotion-4[data-error='true']:active>.emotion-7:hover {
+.emotion-5[data-error='true']:active>.emotion-8:hover {
   border-right-color: #b3144d;
 }
 
-.emotion-4[data-disabled='true'] {
+.emotion-5[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7 {
+.emotion-5[data-disabled='true']>.emotion-8 {
   border-right-color: #e9eaeb;
 }
 
-.emotion-6 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -877,7 +884,7 @@ exports[`UnitInputField > should render correctly 1`] = `
   height: 100%;
 }
 
-.emotion-8 {
+.emotion-9 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -891,51 +898,51 @@ exports[`UnitInputField > should render correctly 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-8[data-size="small"] {
+.emotion-9[data-size="small"] {
   padding-left: 0.5rem;
 }
 
-.emotion-8[data-size="large"] {
+.emotion-9[data-size="large"] {
   font-size: 1rem;
 }
 
-.emotion-8::-webkit-input-placeholder {
+.emotion-9::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-8::-moz-placeholder {
+.emotion-9::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-8:-ms-input-placeholder {
+.emotion-9:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-8::placeholder {
+.emotion-9::placeholder {
   color: #727683;
 }
 
-.emotion-8:disabled {
+.emotion-9:disabled {
   cursor: not-allowed;
 }
 
-.emotion-8:disabled::-webkit-input-placeholder {
+.emotion-9:disabled::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8:disabled::-moz-placeholder {
+.emotion-9:disabled::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8:disabled:-ms-input-placeholder {
+.emotion-9:disabled:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8:disabled::placeholder {
+.emotion-9:disabled::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10 {
+.emotion-11 {
   width: 12.6rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -943,29 +950,29 @@ exports[`UnitInputField > should render correctly 1`] = `
   display: flex;
 }
 
-.emotion-13 {
+.emotion-14 {
   width: 100%;
 }
 
-.emotion-13 #unit {
+.emotion-14 #unit {
   border: none;
   background: transparent;
 }
 
-.emotion-13 #unit:focus,
-.emotion-13 #unit:active {
+.emotion-14 #unit:focus,
+.emotion-14 #unit:active {
   box-shadow: none;
 }
 
-.emotion-15 {
+.emotion-16 {
   display: inherit;
 }
 
-.emotion-15[data-container-full-width="true"] {
+.emotion-16[data-container-full-width="true"] {
   width: 100%;
 }
 
-.emotion-19 {
+.emotion-20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1000,81 +1007,85 @@ exports[`UnitInputField > should render correctly 1`] = `
   overflow: hidden;
 }
 
-.emotion-19[data-size='small'] {
+.emotion-20[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-19[data-size='medium'] {
+.emotion-20[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-19[data-size='large'] {
+.emotion-20[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-19[data-state='neutral'] {
+.emotion-20[data-state='neutral'] {
   border: 1px solid #d9dadd;
 }
 
-.emotion-19[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-20[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-19[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-19[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-20[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-19[data-state='neutral'][data-dropdownvisible='true'] {
+.emotion-20[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.emotion-20[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
 
-.emotion-19[data-state='success'] {
+.emotion-20[data-state='success'] {
   border: 1px solid #22674e;
 }
 
-.emotion-19[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-20[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #1b533f;
   box-shadow: 0px 0px 0px 3px #45d19f40;
 }
 
-.emotion-19[data-state='success'][data-dropdownvisible='true'] {
+.emotion-20[data-state='success'][data-dropdownvisible='true'] {
   border-color: #1b533f;
 }
 
-.emotion-19[data-state='danger'] {
+.emotion-20[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-19[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-20[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-19[data-state='danger'][data-dropdownvisible='true'] {
+.emotion-20[data-state='danger'][data-dropdownvisible='true'] {
   border-color: #92103f;
 }
 
-.emotion-19:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-20:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-19[data-readonly='true'] {
+.emotion-20[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-19[data-disabled='true'] {
+.emotion-20[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
 }
 
-.emotion-22 {
+.emotion-23 {
   color: #727683;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -1090,7 +1101,7 @@ exports[`UnitInputField > should render correctly 1`] = `
   user-select: none;
 }
 
-.emotion-24 {
+.emotion-25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1118,7 +1129,7 @@ exports[`UnitInputField > should render correctly 1`] = `
   display: flex;
 }
 
-.emotion-26 {
+.emotion-27 {
   vertical-align: middle;
   fill: #3f4250;
   height: 1rem;
@@ -1127,7 +1138,7 @@ exports[`UnitInputField > should render correctly 1`] = `
   min-height: 1rem;
 }
 
-.emotion-26 .fillStroke {
+.emotion-27 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
@@ -1142,13 +1153,13 @@ exports[`UnitInputField > should render correctly 1`] = `
         class="emotion-0 emotion-1"
       >
         <label
-          class="emotion-2 emotion-3"
+          class="emotion-2 emotion-3 emotion-4"
           for=":r0:"
         >
           Test
         </label>
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-5 emotion-6"
           data-disabled="false"
           data-error="false"
           data-readonly="false"
@@ -1156,12 +1167,12 @@ exports[`UnitInputField > should render correctly 1`] = `
           data-success="false"
         >
           <div
-            class="emotion-6 emotion-7"
+            class="emotion-7 emotion-8"
             id="input-field"
           >
             <input
               aria-invalid="false"
-              class="emotion-8 emotion-9"
+              class="emotion-9 emotion-10"
               data-size="large"
               data-testid="unit-input"
               id=":r0:"
@@ -1175,19 +1186,19 @@ exports[`UnitInputField > should render correctly 1`] = `
           </div>
            
           <div
-            class="emotion-10 emotion-11"
+            class="emotion-11 emotion-12"
             width="12.6rem"
           >
             <div
               aria-label="test-unit"
-              class="emotion-12 emotion-13 emotion-14"
+              class="emotion-13 emotion-14 emotion-15"
             >
               <div
                 aria-controls=":r3:"
                 aria-describedby=":r3:"
-                class="emotion-15 emotion-16"
+                class="emotion-16 emotion-17"
                 data-container-full-width="true"
-                tabindex="0"
+                tabindex="-1"
               >
                 <div
                   class="emotion-0 emotion-1"
@@ -1195,7 +1206,7 @@ exports[`UnitInputField > should render correctly 1`] = `
                   <div
                     aria-expanded="false"
                     aria-haspopup="listbox"
-                    class="emotion-19 emotion-20"
+                    class="emotion-20 emotion-21"
                     data-disabled="false"
                     data-dropdownvisible="false"
                     data-readonly="false"
@@ -1207,16 +1218,16 @@ exports[`UnitInputField > should render correctly 1`] = `
                     tabindex="0"
                   >
                     <p
-                      class="emotion-21 emotion-22 emotion-3"
+                      class="emotion-22 emotion-23 emotion-4"
                     >
                       Select item
                     </p>
                     <div
-                      class="emotion-24 emotion-25"
+                      class="emotion-25 emotion-26"
                     >
                       <svg
                         aria-label="show dropdown"
-                        class="emotion-26 emotion-27"
+                        class="emotion-27 emotion-28"
                         viewBox="0 0 20 20"
                       >
                         <path
diff --git a/packages/form/src/components/VerificationCodeField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/VerificationCodeField/__tests__/__snapshots__/index.test.tsx.snap
index af4600f9a5..635c38851e 100644
--- a/packages/form/src/components/VerificationCodeField/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/form/src/components/VerificationCodeField/__tests__/__snapshots__/index.test.tsx.snap
@@ -39,8 +39,8 @@ exports[`VerificationCodeField > should render correctly 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -49,9 +49,10 @@ exports[`VerificationCodeField > should render correctly 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: text;
 }
 
-.emotion-6 {
+.emotion-7 {
   color: #b3144d;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -63,7 +64,7 @@ exports[`VerificationCodeField > should render correctly 1`] = `
   text-decoration: none;
 }
 
-.emotion-8 {
+.emotion-9 {
   background: #ffffff;
   color: #3f4250;
   font-size: 1rem;
@@ -79,54 +80,54 @@ exports[`VerificationCodeField > should render correctly 1`] = `
   border: solid 1px #d9dadd;
 }
 
-.emotion-8[aria-invalid='true'] {
+.emotion-9[aria-invalid='true'] {
   border-color: #b3144d;
 }
 
-.emotion-8[data-success='true'] {
+.emotion-9[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-8:hover,
-.emotion-8:focus {
+.emotion-9:hover,
+.emotion-9:focus {
   border-color: #792dd4;
 }
 
-.emotion-8:hover[aria-invalid='true'],
-.emotion-8:focus[aria-invalid='true'] {
+.emotion-9:hover[aria-invalid='true'],
+.emotion-9:focus[aria-invalid='true'] {
   border-color: #92103f;
 }
 
-.emotion-8:hover[data-success='true'],
-.emotion-8:focus[data-success='true'] {
+.emotion-9:hover[data-success='true'],
+.emotion-9:focus[data-success='true'] {
   border-color: #1b533f;
 }
 
-.emotion-8:focus {
+.emotion-9:focus {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-8:last-child {
+.emotion-9:last-child {
   margin-right: 0;
 }
 
-.emotion-8::-webkit-input-placeholder {
+.emotion-9::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-8::-moz-placeholder {
+.emotion-9::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-8:-ms-input-placeholder {
+.emotion-9:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-8::placeholder {
+.emotion-9::placeholder {
   color: #727683;
 }
 
-.emotion-8:disabled {
+.emotion-9:disabled {
   cursor: not-allowed;
   background: #f3f3f4;
   color: #b5b7bd;
@@ -146,12 +147,12 @@ exports[`VerificationCodeField > should render correctly 1`] = `
           class="emotion-2 emotion-3"
         >
           <label
-            class="emotion-4 emotion-5"
+            class="emotion-4 emotion-5 emotion-6"
           >
             Code
           </label>
           <span
-            class="emotion-6 emotion-5"
+            class="emotion-7 emotion-6"
           >
             *
           </span>
@@ -160,7 +161,7 @@ exports[`VerificationCodeField > should render correctly 1`] = `
           <input
             aria-invalid="false"
             aria-label="Verification code 0"
-            class="emotion-8 emotion-9"
+            class="emotion-9 emotion-10"
             data-success="false"
             data-testid="0"
             id="verification-code-input-0"
@@ -173,7 +174,7 @@ exports[`VerificationCodeField > should render correctly 1`] = `
           <input
             aria-invalid="false"
             aria-label="Verification code 1"
-            class="emotion-8 emotion-9"
+            class="emotion-9 emotion-10"
             data-success="false"
             data-testid="1"
             id="verification-code-input-1"
@@ -186,7 +187,7 @@ exports[`VerificationCodeField > should render correctly 1`] = `
           <input
             aria-invalid="false"
             aria-label="Verification code 2"
-            class="emotion-8 emotion-9"
+            class="emotion-9 emotion-10"
             data-success="false"
             data-testid="2"
             id="verification-code-input-2"
@@ -199,7 +200,7 @@ exports[`VerificationCodeField > should render correctly 1`] = `
           <input
             aria-invalid="false"
             aria-label="Verification code 3"
-            class="emotion-8 emotion-9"
+            class="emotion-9 emotion-10"
             data-success="false"
             data-testid="3"
             id="verification-code-input-3"
diff --git a/packages/form/src/components/index.ts b/packages/form/src/components/index.ts
index f365b1c7ed..f05d856a75 100644
--- a/packages/form/src/components/index.ts
+++ b/packages/form/src/components/index.ts
@@ -24,3 +24,4 @@ export { UnitInputField } from './UnitInputField'
 export { SliderField } from './SliderField'
 export { SwitchButtonField } from './SwitchButtonField'
 export { VerificationCodeField } from './VerificationCodeField'
+export { SelectableCardOptionGroupField } from './SelectableCardOptionGroupField'
diff --git a/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap
index aebee8cfec..65a2595a5b 100644
--- a/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap
@@ -37,8 +37,8 @@ exports[`DateInput > render correctly with showMonthYearPicker 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
-  color: #222638;
+.emotion-7 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -47,9 +47,10 @@ exports[`DateInput > render correctly with showMonthYearPicker 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -63,69 +64,69 @@ exports[`DateInput > render correctly with showMonthYearPicker 1`] = `
   border-radius: 0.25rem;
 }
 
-.emotion-8>.emotion-11 {
+.emotion-9>.emotion-12 {
   color: #3f4250;
 }
 
-.emotion-8>.emotion-11::-webkit-input-placeholder {
+.emotion-9>.emotion-12::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::-moz-placeholder {
+.emotion-9>.emotion-12::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11:-ms-input-placeholder {
+.emotion-9>.emotion-12:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::placeholder {
+.emotion-9>.emotion-12::placeholder {
   color: #727683;
 }
 
-.emotion-8[data-success='true'] {
+.emotion-9[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11 {
+.emotion-9[data-disabled='true']>.emotion-12 {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-webkit-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-moz-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11:-ms-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-9:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-10 {
+.emotion-11 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -138,15 +139,15 @@ exports[`DateInput > render correctly with showMonthYearPicker 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-10[data-size='large'] {
+.emotion-11[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-10[data-size='small'] {
+.emotion-11[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-12 {
+.emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -172,7 +173,7 @@ exports[`DateInput > render correctly with showMonthYearPicker 1`] = `
   border-color: inherit;
 }
 
-.emotion-14 {
+.emotion-15 {
   vertical-align: middle;
   fill: #3f4250;
   height: 1.25rem;
@@ -181,7 +182,7 @@ exports[`DateInput > render correctly with showMonthYearPicker 1`] = `
   min-height: 1.25rem;
 }
 
-.emotion-14 .fillStroke {
+.emotion-15 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
@@ -202,14 +203,14 @@ exports[`DateInput > render correctly with showMonthYearPicker 1`] = `
           class="emotion-4 emotion-5"
         >
           <label
-            class="emotion-6 emotion-7"
+            class="emotion-6 emotion-7 emotion-8"
             for=":r6a:"
           >
             Date
           </label>
           <div>
             <div
-              class="emotion-8 emotion-9"
+              class="emotion-9 emotion-10"
               data-disabled="false"
               data-error="false"
               data-readonly="false"
@@ -218,16 +219,16 @@ exports[`DateInput > render correctly with showMonthYearPicker 1`] = `
               <input
                 aria-invalid="false"
                 autocomplete="false"
-                class="emotion-10 emotion-11"
+                class="emotion-11 emotion-12"
                 data-size="large"
                 id=":r6a:"
                 type="text"
               />
               <div
-                class="emotion-12 emotion-13"
+                class="emotion-13 emotion-14"
               >
                 <svg
-                  class="emotion-14 emotion-15"
+                  class="emotion-15 emotion-16"
                   viewBox="0 0 20 20"
                 >
                   <path
@@ -303,8 +304,8 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
-  color: #222638;
+.emotion-7 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -313,9 +314,10 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -331,69 +333,69 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date
   border: 1px solid #8c40ef;
 }
 
-.emotion-8>.emotion-11 {
+.emotion-9>.emotion-12 {
   color: #3f4250;
 }
 
-.emotion-8>.emotion-11::-webkit-input-placeholder {
+.emotion-9>.emotion-12::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::-moz-placeholder {
+.emotion-9>.emotion-12::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11:-ms-input-placeholder {
+.emotion-9>.emotion-12:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::placeholder {
+.emotion-9>.emotion-12::placeholder {
   color: #727683;
 }
 
-.emotion-8[data-success='true'] {
+.emotion-9[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11 {
+.emotion-9[data-disabled='true']>.emotion-12 {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-webkit-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-moz-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11:-ms-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-9:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-10 {
+.emotion-11 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -406,15 +408,15 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date
   font-size: 0.875rem;
 }
 
-.emotion-10[data-size='large'] {
+.emotion-11[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-10[data-size='small'] {
+.emotion-11[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-12 {
+.emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -440,7 +442,7 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date
   border-color: inherit;
 }
 
-.emotion-14 {
+.emotion-15 {
   vertical-align: middle;
   fill: #3f4250;
   height: 1.25rem;
@@ -449,12 +451,12 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date
   min-height: 1.25rem;
 }
 
-.emotion-14 .fillStroke {
+.emotion-15 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
 
-.emotion-17 {
+.emotion-18 {
   background: #151a2d;
   color: #ffffff;
   border-radius: 0.25rem;
@@ -481,12 +483,12 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date
   box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
 }
 
-.emotion-17[data-animated="true"] {
+.emotion-18[data-animated="true"] {
   -webkit-animation: 0ms animation-0 forwards;
   animation: 0ms animation-0 forwards;
 }
 
-.emotion-17[data-has-arrow="true"]::after {
+.emotion-18[data-has-arrow="true"]::after {
   content: " ";
   position: absolute;
   top: -5px;
@@ -502,11 +504,11 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date
   pointer-events: none;
 }
 
-.emotion-17[data-visible-in-dom="false"] {
+.emotion-18[data-visible-in-dom="false"] {
   display: none;
 }
 
-.emotion-19 {
+.emotion-20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -529,7 +531,7 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date
   flex-wrap: nowrap;
 }
 
-.emotion-21 {
+.emotion-22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -552,7 +554,7 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date
   width: 100%;
 }
 
-.emotion-23 {
+.emotion-24 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -591,22 +593,22 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date
   color: #3f4250;
 }
 
-.emotion-23:hover {
+.emotion-24:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-23:active {
+.emotion-24:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-23:hover,
-.emotion-23:active {
+.emotion-24:hover,
+.emotion-24:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-25 {
+.emotion-26 {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -615,16 +617,16 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date
   min-height: 16px;
 }
 
-.emotion-25 .fillStroke {
+.emotion-26 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
 
-.emotion-25 path {
+.emotion-26 path {
   fill: currentColor;
 }
 
-.emotion-28 {
+.emotion-29 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -637,7 +639,7 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date
   text-transform: capitalize;
 }
 
-.emotion-34 {
+.emotion-35 {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 0.5rem;
@@ -651,7 +653,7 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date
   justify-content: normal;
 }
 
-.emotion-37 {
+.emotion-38 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -694,40 +696,40 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date
   text-transform: capitalize;
 }
 
-.emotion-37:hover {
+.emotion-38:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-37:active {
+.emotion-38:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-37:hover,
-.emotion-37:active {
+.emotion-38:hover,
+.emotion-38:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-37[aria-label="in-range"] {
+.emotion-38[aria-label="in-range"] {
   color: #521094;
   background-color: #f1eefc;
 }
 
-.emotion-37[aria-label="in-range"]:hover {
+.emotion-38[aria-label="in-range"]:hover {
   color: #ffffff;
   background-color: #792dd4;
 }
 
-.emotion-37[aria-label="not-current"] {
+.emotion-38[aria-label="not-current"] {
   color: #b5b7bd;
 }
 
-.emotion-37[aria-label="selected"] {
+.emotion-38[aria-label="selected"] {
   color: #ffffff;
 }
 
-.emotion-40 {
+.emotion-41 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -770,36 +772,36 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date
   text-transform: capitalize;
 }
 
-.emotion-40:hover {
+.emotion-41:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-40:active {
+.emotion-41:active {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-40:hover,
-.emotion-40:active {
+.emotion-41:hover,
+.emotion-41:active {
   background: #792dd4;
   color: #f9f9fa;
 }
 
-.emotion-40[aria-label="in-range"] {
+.emotion-41[aria-label="in-range"] {
   color: #521094;
   background-color: #f1eefc;
 }
 
-.emotion-40[aria-label="in-range"]:hover {
+.emotion-41[aria-label="in-range"]:hover {
   color: #ffffff;
   background-color: #792dd4;
 }
 
-.emotion-40[aria-label="not-current"] {
+.emotion-41[aria-label="not-current"] {
   color: #b5b7bd;
 }
 
-.emotion-40[aria-label="selected"] {
+.emotion-41[aria-label="selected"] {
   color: #ffffff;
 }
 
@@ -819,14 +821,14 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date
           class="emotion-4 emotion-5"
         >
           <label
-            class="emotion-6 emotion-7"
+            class="emotion-6 emotion-7 emotion-8"
             for=":r6e:"
           >
             Date
           </label>
           <div>
             <div
-              class="emotion-8 emotion-9"
+              class="emotion-9 emotion-10"
               data-disabled="false"
               data-error="false"
               data-readonly="false"
@@ -835,7 +837,7 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date
               <input
                 aria-invalid="false"
                 autocomplete="false"
-                class="emotion-10 emotion-11"
+                class="emotion-11 emotion-12"
                 data-size="large"
                 id=":r6e:"
                 placeholder="YYYY-MM-DD"
@@ -843,10 +845,10 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date
                 value="02/1995"
               />
               <div
-                class="emotion-12 emotion-13"
+                class="emotion-13 emotion-14"
               >
                 <svg
-                  class="emotion-14 emotion-15"
+                  class="emotion-15 emotion-16"
                   viewBox="0 0 20 20"
                 >
                   <path
@@ -862,7 +864,7 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date
           </div>
         </div>
         <div
-          class="emotion-16 emotion-17 emotion-18"
+          class="emotion-17 emotion-18 emotion-19"
           data-animated="false"
           data-has-arrow="false"
           id=":r6d:"
@@ -870,18 +872,18 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date
           style="opacity: 1;"
         >
           <div
-            class="emotion-19 emotion-5"
+            class="emotion-20 emotion-5"
           >
             <div
-              class="emotion-21 emotion-5"
+              class="emotion-22 emotion-5"
             >
               <button
-                class="emotion-23 emotion-24"
+                class="emotion-24 emotion-25"
                 data-testid="previous-month"
                 type="button"
               >
                 <svg
-                  class="emotion-25 emotion-26"
+                  class="emotion-26 emotion-27"
                   viewBox="0 0 16 16"
                   xmlns="http://www.w3.org/2000/svg"
                 >
@@ -893,17 +895,17 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date
                 </svg>
               </button>
               <span
-                class="emotion-27 emotion-28 emotion-7"
+                class="emotion-28 emotion-29 emotion-8"
               >
                  1995
               </span>
               <button
-                class="emotion-23 emotion-24"
+                class="emotion-24 emotion-25"
                 data-testid="next-month"
                 type="button"
               >
                 <svg
-                  class="emotion-25 emotion-26"
+                  class="emotion-26 emotion-27"
                   viewBox="0 0 16 16"
                   xmlns="http://www.w3.org/2000/svg"
                 >
@@ -916,88 +918,88 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date
               </button>
             </div>
             <div
-              class="emotion-34 emotion-35"
+              class="emotion-35 emotion-36"
             >
               <button
                 aria-label="neutral"
-                class="emotion-36 emotion-37 emotion-24"
+                class="emotion-37 emotion-38 emotion-25"
                 type="button"
               >
                 Jan
               </button>
               <button
                 aria-label="selected"
-                class="emotion-36 emotion-40 emotion-41"
+                class="emotion-37 emotion-41 emotion-42"
                 type="button"
               >
                 Feb
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-36 emotion-37 emotion-24"
+                class="emotion-37 emotion-38 emotion-25"
                 type="button"
               >
                 Mar
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-36 emotion-37 emotion-24"
+                class="emotion-37 emotion-38 emotion-25"
                 type="button"
               >
                 Apr
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-36 emotion-37 emotion-24"
+                class="emotion-37 emotion-38 emotion-25"
                 type="button"
               >
                 May
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-36 emotion-37 emotion-24"
+                class="emotion-37 emotion-38 emotion-25"
                 type="button"
               >
                 Jun
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-36 emotion-37 emotion-24"
+                class="emotion-37 emotion-38 emotion-25"
                 type="button"
               >
                 Jul
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-36 emotion-37 emotion-24"
+                class="emotion-37 emotion-38 emotion-25"
                 type="button"
               >
                 Aug
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-36 emotion-37 emotion-24"
+                class="emotion-37 emotion-38 emotion-25"
                 type="button"
               >
                 Sep
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-36 emotion-37 emotion-24"
+                class="emotion-37 emotion-38 emotion-25"
                 type="button"
               >
                 Oct
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-36 emotion-37 emotion-24"
+                class="emotion-37 emotion-38 emotion-25"
                 type="button"
               >
                 Nov
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-36 emotion-37 emotion-24"
+                class="emotion-37 emotion-38 emotion-25"
                 type="button"
               >
                 Dec
@@ -1066,8 +1068,8 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
-  color: #222638;
+.emotion-7 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -1076,9 +1078,10 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1094,69 +1097,69 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon
   border: 1px solid #8c40ef;
 }
 
-.emotion-8>.emotion-11 {
+.emotion-9>.emotion-12 {
   color: #3f4250;
 }
 
-.emotion-8>.emotion-11::-webkit-input-placeholder {
+.emotion-9>.emotion-12::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::-moz-placeholder {
+.emotion-9>.emotion-12::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11:-ms-input-placeholder {
+.emotion-9>.emotion-12:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::placeholder {
+.emotion-9>.emotion-12::placeholder {
   color: #727683;
 }
 
-.emotion-8[data-success='true'] {
+.emotion-9[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11 {
+.emotion-9[data-disabled='true']>.emotion-12 {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-webkit-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-moz-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11:-ms-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-9:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-10 {
+.emotion-11 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -1169,15 +1172,15 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon
   font-size: 0.875rem;
 }
 
-.emotion-10[data-size='large'] {
+.emotion-11[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-10[data-size='small'] {
+.emotion-11[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-12 {
+.emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1203,7 +1206,7 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon
   border-color: inherit;
 }
 
-.emotion-14 {
+.emotion-15 {
   vertical-align: middle;
   fill: #3f4250;
   height: 1.25rem;
@@ -1212,12 +1215,12 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon
   min-height: 1.25rem;
 }
 
-.emotion-14 .fillStroke {
+.emotion-15 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
 
-.emotion-17 {
+.emotion-18 {
   background: #151a2d;
   color: #ffffff;
   border-radius: 0.25rem;
@@ -1244,12 +1247,12 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon
   box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
 }
 
-.emotion-17[data-animated="true"] {
+.emotion-18[data-animated="true"] {
   -webkit-animation: 0ms animation-0 forwards;
   animation: 0ms animation-0 forwards;
 }
 
-.emotion-17[data-has-arrow="true"]::after {
+.emotion-18[data-has-arrow="true"]::after {
   content: " ";
   position: absolute;
   top: -5px;
@@ -1265,11 +1268,11 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon
   pointer-events: none;
 }
 
-.emotion-17[data-visible-in-dom="false"] {
+.emotion-18[data-visible-in-dom="false"] {
   display: none;
 }
 
-.emotion-19 {
+.emotion-20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1292,7 +1295,7 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon
   flex-wrap: nowrap;
 }
 
-.emotion-21 {
+.emotion-22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1315,7 +1318,7 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon
   width: 100%;
 }
 
-.emotion-23 {
+.emotion-24 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1354,22 +1357,22 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon
   color: #3f4250;
 }
 
-.emotion-23:hover {
+.emotion-24:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-23:active {
+.emotion-24:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-23:hover,
-.emotion-23:active {
+.emotion-24:hover,
+.emotion-24:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-25 {
+.emotion-26 {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -1378,16 +1381,16 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon
   min-height: 16px;
 }
 
-.emotion-25 .fillStroke {
+.emotion-26 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
 
-.emotion-25 path {
+.emotion-26 path {
   fill: currentColor;
 }
 
-.emotion-28 {
+.emotion-29 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -1400,7 +1403,7 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon
   text-transform: capitalize;
 }
 
-.emotion-34 {
+.emotion-35 {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 0.5rem;
@@ -1414,7 +1417,7 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon
   justify-content: normal;
 }
 
-.emotion-37 {
+.emotion-38 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1457,40 +1460,40 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon
   text-transform: capitalize;
 }
 
-.emotion-37:hover {
+.emotion-38:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-37:active {
+.emotion-38:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-37:hover,
-.emotion-37:active {
+.emotion-38:hover,
+.emotion-38:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-37[aria-label="in-range"] {
+.emotion-38[aria-label="in-range"] {
   color: #521094;
   background-color: #f1eefc;
 }
 
-.emotion-37[aria-label="in-range"]:hover {
+.emotion-38[aria-label="in-range"]:hover {
   color: #ffffff;
   background-color: #792dd4;
 }
 
-.emotion-37[aria-label="not-current"] {
+.emotion-38[aria-label="not-current"] {
   color: #b5b7bd;
 }
 
-.emotion-37[aria-label="selected"] {
+.emotion-38[aria-label="selected"] {
   color: #ffffff;
 }
 
-.emotion-40 {
+.emotion-41 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1535,30 +1538,30 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon
   text-transform: capitalize;
 }
 
-.emotion-40:hover {
+.emotion-41:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-40[aria-label="in-range"] {
+.emotion-41[aria-label="in-range"] {
   color: #521094;
   background-color: #f1eefc;
 }
 
-.emotion-40[aria-label="in-range"]:hover {
+.emotion-41[aria-label="in-range"]:hover {
   color: #ffffff;
   background-color: #792dd4;
 }
 
-.emotion-40[aria-label="not-current"] {
+.emotion-41[aria-label="not-current"] {
   color: #b5b7bd;
 }
 
-.emotion-40[aria-label="selected"] {
+.emotion-41[aria-label="selected"] {
   color: #ffffff;
 }
 
-.emotion-64 {
+.emotion-65 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1602,26 +1605,26 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon
   text-transform: capitalize;
 }
 
-.emotion-64:hover {
+.emotion-65:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-64[aria-label="in-range"] {
+.emotion-65[aria-label="in-range"] {
   color: #521094;
   background-color: #f1eefc;
 }
 
-.emotion-64[aria-label="in-range"]:hover {
+.emotion-65[aria-label="in-range"]:hover {
   color: #ffffff;
   background-color: #792dd4;
 }
 
-.emotion-64[aria-label="not-current"] {
+.emotion-65[aria-label="not-current"] {
   color: #b5b7bd;
 }
 
-.emotion-64[aria-label="selected"] {
+.emotion-65[aria-label="selected"] {
   color: #ffffff;
 }
 
@@ -1641,14 +1644,14 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon
           class="emotion-4 emotion-5"
         >
           <label
-            class="emotion-6 emotion-7"
+            class="emotion-6 emotion-7 emotion-8"
             for=":rpd:"
           >
             Date
           </label>
           <div>
             <div
-              class="emotion-8 emotion-9"
+              class="emotion-9 emotion-10"
               data-disabled="false"
               data-error="false"
               data-readonly="false"
@@ -1657,7 +1660,7 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon
               <input
                 aria-invalid="false"
                 autocomplete="false"
-                class="emotion-10 emotion-11"
+                class="emotion-11 emotion-12"
                 data-size="large"
                 id=":rpd:"
                 placeholder="YYYY-MM-DD"
@@ -1665,10 +1668,10 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon
                 value="02/1995"
               />
               <div
-                class="emotion-12 emotion-13"
+                class="emotion-13 emotion-14"
               >
                 <svg
-                  class="emotion-14 emotion-15"
+                  class="emotion-15 emotion-16"
                   viewBox="0 0 20 20"
                 >
                   <path
@@ -1684,7 +1687,7 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon
           </div>
         </div>
         <div
-          class="emotion-16 emotion-17 emotion-18"
+          class="emotion-17 emotion-18 emotion-19"
           data-animated="false"
           data-has-arrow="false"
           id=":rpc:"
@@ -1692,18 +1695,18 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon
           style="opacity: 1;"
         >
           <div
-            class="emotion-19 emotion-5"
+            class="emotion-20 emotion-5"
           >
             <div
-              class="emotion-21 emotion-5"
+              class="emotion-22 emotion-5"
             >
               <button
-                class="emotion-23 emotion-24"
+                class="emotion-24 emotion-25"
                 data-testid="previous-month"
                 type="button"
               >
                 <svg
-                  class="emotion-25 emotion-26"
+                  class="emotion-26 emotion-27"
                   viewBox="0 0 16 16"
                   xmlns="http://www.w3.org/2000/svg"
                 >
@@ -1715,17 +1718,17 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon
                 </svg>
               </button>
               <span
-                class="emotion-27 emotion-28 emotion-7"
+                class="emotion-28 emotion-29 emotion-8"
               >
                  1995
               </span>
               <button
-                class="emotion-23 emotion-24"
+                class="emotion-24 emotion-25"
                 data-testid="next-month"
                 type="button"
               >
                 <svg
-                  class="emotion-25 emotion-26"
+                  class="emotion-26 emotion-27"
                   viewBox="0 0 16 16"
                   xmlns="http://www.w3.org/2000/svg"
                 >
@@ -1738,18 +1741,18 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon
               </button>
             </div>
             <div
-              class="emotion-34 emotion-35"
+              class="emotion-35 emotion-36"
             >
               <button
                 aria-label="neutral"
-                class="emotion-36 emotion-37 emotion-24"
+                class="emotion-37 emotion-38 emotion-25"
                 type="button"
               >
                 Jan
               </button>
               <button
                 aria-label="selected"
-                class="emotion-36 emotion-40 emotion-41"
+                class="emotion-37 emotion-41 emotion-42"
                 disabled=""
                 type="button"
               >
@@ -1757,56 +1760,56 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-36 emotion-37 emotion-24"
+                class="emotion-37 emotion-38 emotion-25"
                 type="button"
               >
                 Mar
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-36 emotion-37 emotion-24"
+                class="emotion-37 emotion-38 emotion-25"
                 type="button"
               >
                 Apr
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-36 emotion-37 emotion-24"
+                class="emotion-37 emotion-38 emotion-25"
                 type="button"
               >
                 May
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-36 emotion-37 emotion-24"
+                class="emotion-37 emotion-38 emotion-25"
                 type="button"
               >
                 Jun
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-36 emotion-37 emotion-24"
+                class="emotion-37 emotion-38 emotion-25"
                 type="button"
               >
                 Jul
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-36 emotion-37 emotion-24"
+                class="emotion-37 emotion-38 emotion-25"
                 type="button"
               >
                 Aug
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-36 emotion-37 emotion-24"
+                class="emotion-37 emotion-38 emotion-25"
                 type="button"
               >
                 Sep
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-36 emotion-64 emotion-24"
+                class="emotion-37 emotion-65 emotion-25"
                 disabled=""
                 type="button"
               >
@@ -1814,14 +1817,14 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-36 emotion-37 emotion-24"
+                class="emotion-37 emotion-38 emotion-25"
                 type="button"
               >
                 Nov
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-36 emotion-37 emotion-24"
+                class="emotion-37 emotion-38 emotion-25"
                 type="button"
               >
                 Dec
@@ -1872,8 +1875,8 @@ exports[`DateInput > renders correctly custom format with range 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
-  color: #222638;
+.emotion-7 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -1882,9 +1885,10 @@ exports[`DateInput > renders correctly custom format with range 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1898,69 +1902,69 @@ exports[`DateInput > renders correctly custom format with range 1`] = `
   border-radius: 0.25rem;
 }
 
-.emotion-8>.emotion-11 {
+.emotion-9>.emotion-12 {
   color: #3f4250;
 }
 
-.emotion-8>.emotion-11::-webkit-input-placeholder {
+.emotion-9>.emotion-12::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::-moz-placeholder {
+.emotion-9>.emotion-12::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11:-ms-input-placeholder {
+.emotion-9>.emotion-12:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::placeholder {
+.emotion-9>.emotion-12::placeholder {
   color: #727683;
 }
 
-.emotion-8[data-success='true'] {
+.emotion-9[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11 {
+.emotion-9[data-disabled='true']>.emotion-12 {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-webkit-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-moz-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11:-ms-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-9:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-10 {
+.emotion-11 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -1973,15 +1977,15 @@ exports[`DateInput > renders correctly custom format with range 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-10[data-size='large'] {
+.emotion-11[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-10[data-size='small'] {
+.emotion-11[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-12 {
+.emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2007,7 +2011,7 @@ exports[`DateInput > renders correctly custom format with range 1`] = `
   border-color: inherit;
 }
 
-.emotion-14 {
+.emotion-15 {
   vertical-align: middle;
   fill: #3f4250;
   height: 1.25rem;
@@ -2016,7 +2020,7 @@ exports[`DateInput > renders correctly custom format with range 1`] = `
   min-height: 1.25rem;
 }
 
-.emotion-14 .fillStroke {
+.emotion-15 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
@@ -2037,14 +2041,14 @@ exports[`DateInput > renders correctly custom format with range 1`] = `
           class="emotion-4 emotion-5"
         >
           <label
-            class="emotion-6 emotion-7"
+            class="emotion-6 emotion-7 emotion-8"
             for=":rrl:"
           >
             Date
           </label>
           <div>
             <div
-              class="emotion-8 emotion-9"
+              class="emotion-9 emotion-10"
               data-disabled="false"
               data-error="false"
               data-readonly="false"
@@ -2053,7 +2057,7 @@ exports[`DateInput > renders correctly custom format with range 1`] = `
               <input
                 aria-invalid="false"
                 autocomplete="false"
-                class="emotion-10 emotion-11"
+                class="emotion-11 emotion-12"
                 data-size="large"
                 id=":rrl:"
                 name="test"
@@ -2061,10 +2065,10 @@ exports[`DateInput > renders correctly custom format with range 1`] = `
                 value="1995-12-11T03:24:00.000Z - 1995-12-11T03:24:00.000Z"
               />
               <div
-                class="emotion-12 emotion-13"
+                class="emotion-13 emotion-14"
               >
                 <svg
-                  class="emotion-14 emotion-15"
+                  class="emotion-15 emotion-16"
                   viewBox="0 0 20 20"
                 >
                   <path
@@ -2122,8 +2126,8 @@ exports[`DateInput > renders correctly disabled 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
-  color: #222638;
+.emotion-7 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -2132,9 +2136,10 @@ exports[`DateInput > renders correctly disabled 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2148,69 +2153,69 @@ exports[`DateInput > renders correctly disabled 1`] = `
   border-radius: 0.25rem;
 }
 
-.emotion-8>.emotion-11 {
+.emotion-9>.emotion-12 {
   color: #3f4250;
 }
 
-.emotion-8>.emotion-11::-webkit-input-placeholder {
+.emotion-9>.emotion-12::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::-moz-placeholder {
+.emotion-9>.emotion-12::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11:-ms-input-placeholder {
+.emotion-9>.emotion-12:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::placeholder {
+.emotion-9>.emotion-12::placeholder {
   color: #727683;
 }
 
-.emotion-8[data-success='true'] {
+.emotion-9[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11 {
+.emotion-9[data-disabled='true']>.emotion-12 {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-webkit-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-moz-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11:-ms-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-9:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-10 {
+.emotion-11 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -2223,15 +2228,15 @@ exports[`DateInput > renders correctly disabled 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-10[data-size='large'] {
+.emotion-11[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-10[data-size='small'] {
+.emotion-11[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-12 {
+.emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2257,7 +2262,7 @@ exports[`DateInput > renders correctly disabled 1`] = `
   border-color: inherit;
 }
 
-.emotion-14 {
+.emotion-15 {
   vertical-align: middle;
   fill: #b5b7bd;
   height: 1.25rem;
@@ -2266,7 +2271,7 @@ exports[`DateInput > renders correctly disabled 1`] = `
   min-height: 1.25rem;
 }
 
-.emotion-14 .fillStroke {
+.emotion-15 .fillStroke {
   stroke: #b5b7bd;
   fill: none;
 }
@@ -2287,14 +2292,14 @@ exports[`DateInput > renders correctly disabled 1`] = `
           class="emotion-4 emotion-5"
         >
           <label
-            class="emotion-6 emotion-7"
+            class="emotion-6 emotion-7 emotion-8"
             for=":r5:"
           >
             Date
           </label>
           <div>
             <div
-              class="emotion-8 emotion-9"
+              class="emotion-9 emotion-10"
               data-disabled="true"
               data-error="false"
               data-readonly="false"
@@ -2303,17 +2308,17 @@ exports[`DateInput > renders correctly disabled 1`] = `
               <input
                 aria-invalid="false"
                 autocomplete="false"
-                class="emotion-10 emotion-11"
+                class="emotion-11 emotion-12"
                 data-size="large"
                 disabled=""
                 id=":r5:"
                 type="text"
               />
               <div
-                class="emotion-12 emotion-13"
+                class="emotion-13 emotion-14"
               >
                 <svg
-                  class="emotion-14 emotion-15"
+                  class="emotion-15 emotion-16"
                   viewBox="0 0 20 20"
                 >
                   <path
@@ -2371,8 +2376,8 @@ exports[`DateInput > renders correctly disabled 2`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
-  color: #222638;
+.emotion-7 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -2381,9 +2386,10 @@ exports[`DateInput > renders correctly disabled 2`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2397,69 +2403,69 @@ exports[`DateInput > renders correctly disabled 2`] = `
   border-radius: 0.25rem;
 }
 
-.emotion-8>.emotion-11 {
+.emotion-9>.emotion-12 {
   color: #3f4250;
 }
 
-.emotion-8>.emotion-11::-webkit-input-placeholder {
+.emotion-9>.emotion-12::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::-moz-placeholder {
+.emotion-9>.emotion-12::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11:-ms-input-placeholder {
+.emotion-9>.emotion-12:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::placeholder {
+.emotion-9>.emotion-12::placeholder {
   color: #727683;
 }
 
-.emotion-8[data-success='true'] {
+.emotion-9[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11 {
+.emotion-9[data-disabled='true']>.emotion-12 {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-webkit-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-moz-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11:-ms-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-9:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-10 {
+.emotion-11 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -2472,15 +2478,15 @@ exports[`DateInput > renders correctly disabled 2`] = `
   font-size: 0.875rem;
 }
 
-.emotion-10[data-size='large'] {
+.emotion-11[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-10[data-size='small'] {
+.emotion-11[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-12 {
+.emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2506,7 +2512,7 @@ exports[`DateInput > renders correctly disabled 2`] = `
   border-color: inherit;
 }
 
-.emotion-14 {
+.emotion-15 {
   vertical-align: middle;
   fill: #b5b7bd;
   height: 1.25rem;
@@ -2515,7 +2521,7 @@ exports[`DateInput > renders correctly disabled 2`] = `
   min-height: 1.25rem;
 }
 
-.emotion-14 .fillStroke {
+.emotion-15 .fillStroke {
   stroke: #b5b7bd;
   fill: none;
 }
@@ -2536,14 +2542,14 @@ exports[`DateInput > renders correctly disabled 2`] = `
           class="emotion-4 emotion-5"
         >
           <label
-            class="emotion-6 emotion-7"
+            class="emotion-6 emotion-7 emotion-8"
             for=":r71:"
           >
             Date
           </label>
           <div>
             <div
-              class="emotion-8 emotion-9"
+              class="emotion-9 emotion-10"
               data-disabled="true"
               data-error="false"
               data-readonly="false"
@@ -2552,17 +2558,17 @@ exports[`DateInput > renders correctly disabled 2`] = `
               <input
                 aria-invalid="false"
                 autocomplete="false"
-                class="emotion-10 emotion-11"
+                class="emotion-11 emotion-12"
                 data-size="large"
                 disabled=""
                 id=":r71:"
                 type="text"
               />
               <div
-                class="emotion-12 emotion-13"
+                class="emotion-13 emotion-14"
               >
                 <svg
-                  class="emotion-14 emotion-15"
+                  class="emotion-15 emotion-16"
                   viewBox="0 0 20 20"
                 >
                   <path
@@ -2620,8 +2626,8 @@ exports[`DateInput > renders correctly error 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
-  color: #222638;
+.emotion-7 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -2630,9 +2636,10 @@ exports[`DateInput > renders correctly error 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2646,69 +2653,69 @@ exports[`DateInput > renders correctly error 1`] = `
   border-radius: 0.25rem;
 }
 
-.emotion-8>.emotion-11 {
+.emotion-9>.emotion-12 {
   color: #3f4250;
 }
 
-.emotion-8>.emotion-11::-webkit-input-placeholder {
+.emotion-9>.emotion-12::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::-moz-placeholder {
+.emotion-9>.emotion-12::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11:-ms-input-placeholder {
+.emotion-9>.emotion-12:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::placeholder {
+.emotion-9>.emotion-12::placeholder {
   color: #727683;
 }
 
-.emotion-8[data-success='true'] {
+.emotion-9[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11 {
+.emotion-9[data-disabled='true']>.emotion-12 {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-webkit-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-moz-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11:-ms-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-9:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-10 {
+.emotion-11 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -2721,15 +2728,15 @@ exports[`DateInput > renders correctly error 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-10[data-size='large'] {
+.emotion-11[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-10[data-size='small'] {
+.emotion-11[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-12 {
+.emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2753,7 +2760,7 @@ exports[`DateInput > renders correctly error 1`] = `
   padding: 0 1rem;
 }
 
-.emotion-14 {
+.emotion-15 {
   vertical-align: middle;
   fill: #b3144d;
   height: 1rem;
@@ -2762,12 +2769,12 @@ exports[`DateInput > renders correctly error 1`] = `
   min-height: 1rem;
 }
 
-.emotion-14 .fillStroke {
+.emotion-15 .fillStroke {
   stroke: #b3144d;
   fill: none;
 }
 
-.emotion-16 {
+.emotion-17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2793,7 +2800,7 @@ exports[`DateInput > renders correctly error 1`] = `
   border-color: inherit;
 }
 
-.emotion-18 {
+.emotion-19 {
   vertical-align: middle;
   fill: #3f4250;
   height: 1.25rem;
@@ -2802,12 +2809,12 @@ exports[`DateInput > renders correctly error 1`] = `
   min-height: 1.25rem;
 }
 
-.emotion-18 .fillStroke {
+.emotion-19 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
 
-.emotion-20 {
+.emotion-21 {
   color: #b3144d;
   font-size: 0.75rem;
   font-family: Inter,Asap,sans-serif;
@@ -2835,14 +2842,14 @@ exports[`DateInput > renders correctly error 1`] = `
           class="emotion-4 emotion-5"
         >
           <label
-            class="emotion-6 emotion-7"
+            class="emotion-6 emotion-7 emotion-8"
             for=":re:"
           >
             Date
           </label>
           <div>
             <div
-              class="emotion-8 emotion-9"
+              class="emotion-9 emotion-10"
               data-disabled="false"
               data-error="true"
               data-readonly="false"
@@ -2851,16 +2858,16 @@ exports[`DateInput > renders correctly error 1`] = `
               <input
                 aria-invalid="true"
                 autocomplete="false"
-                class="emotion-10 emotion-11"
+                class="emotion-11 emotion-12"
                 data-size="large"
                 id=":re:"
                 type="text"
               />
               <div
-                class="emotion-12 emotion-13"
+                class="emotion-13 emotion-14"
               >
                 <svg
-                  class="emotion-14 emotion-15"
+                  class="emotion-15 emotion-16"
                   viewBox="0 0 20 20"
                 >
                   <path
@@ -2871,10 +2878,10 @@ exports[`DateInput > renders correctly error 1`] = `
                 </svg>
               </div>
               <div
-                class="emotion-16 emotion-17"
+                class="emotion-17 emotion-18"
               >
                 <svg
-                  class="emotion-18 emotion-15"
+                  class="emotion-19 emotion-16"
                   viewBox="0 0 20 20"
                 >
                   <path
@@ -2889,7 +2896,7 @@ exports[`DateInput > renders correctly error 1`] = `
             </div>
           </div>
           <p
-            class="emotion-20 emotion-7"
+            class="emotion-21 emotion-8"
           >
             error
           </p>
@@ -2937,8 +2944,8 @@ exports[`DateInput > renders correctly error disabled 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
-  color: #222638;
+.emotion-7 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -2947,9 +2954,10 @@ exports[`DateInput > renders correctly error disabled 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2963,69 +2971,69 @@ exports[`DateInput > renders correctly error disabled 1`] = `
   border-radius: 0.25rem;
 }
 
-.emotion-8>.emotion-11 {
+.emotion-9>.emotion-12 {
   color: #3f4250;
 }
 
-.emotion-8>.emotion-11::-webkit-input-placeholder {
+.emotion-9>.emotion-12::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::-moz-placeholder {
+.emotion-9>.emotion-12::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11:-ms-input-placeholder {
+.emotion-9>.emotion-12:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::placeholder {
+.emotion-9>.emotion-12::placeholder {
   color: #727683;
 }
 
-.emotion-8[data-success='true'] {
+.emotion-9[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11 {
+.emotion-9[data-disabled='true']>.emotion-12 {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-webkit-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-moz-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11:-ms-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-9:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-10 {
+.emotion-11 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -3038,15 +3046,15 @@ exports[`DateInput > renders correctly error disabled 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-10[data-size='large'] {
+.emotion-11[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-10[data-size='small'] {
+.emotion-11[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-12 {
+.emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3070,7 +3078,7 @@ exports[`DateInput > renders correctly error disabled 1`] = `
   padding: 0 1rem;
 }
 
-.emotion-14 {
+.emotion-15 {
   vertical-align: middle;
   fill: #ffbbd3;
   height: 1rem;
@@ -3079,12 +3087,12 @@ exports[`DateInput > renders correctly error disabled 1`] = `
   min-height: 1rem;
 }
 
-.emotion-14 .fillStroke {
+.emotion-15 .fillStroke {
   stroke: #ffbbd3;
   fill: none;
 }
 
-.emotion-16 {
+.emotion-17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3110,7 +3118,7 @@ exports[`DateInput > renders correctly error disabled 1`] = `
   border-color: inherit;
 }
 
-.emotion-18 {
+.emotion-19 {
   vertical-align: middle;
   fill: #b5b7bd;
   height: 1.25rem;
@@ -3119,12 +3127,12 @@ exports[`DateInput > renders correctly error disabled 1`] = `
   min-height: 1.25rem;
 }
 
-.emotion-18 .fillStroke {
+.emotion-19 .fillStroke {
   stroke: #b5b7bd;
   fill: none;
 }
 
-.emotion-20 {
+.emotion-21 {
   color: #ffbbd3;
   font-size: 0.75rem;
   font-family: Inter,Asap,sans-serif;
@@ -3152,14 +3160,14 @@ exports[`DateInput > renders correctly error disabled 1`] = `
           class="emotion-4 emotion-5"
         >
           <label
-            class="emotion-6 emotion-7"
+            class="emotion-6 emotion-7 emotion-8"
             for=":rj:"
           >
             Date
           </label>
           <div>
             <div
-              class="emotion-8 emotion-9"
+              class="emotion-9 emotion-10"
               data-disabled="true"
               data-error="true"
               data-readonly="false"
@@ -3168,17 +3176,17 @@ exports[`DateInput > renders correctly error disabled 1`] = `
               <input
                 aria-invalid="true"
                 autocomplete="false"
-                class="emotion-10 emotion-11"
+                class="emotion-11 emotion-12"
                 data-size="large"
                 disabled=""
                 id=":rj:"
                 type="text"
               />
               <div
-                class="emotion-12 emotion-13"
+                class="emotion-13 emotion-14"
               >
                 <svg
-                  class="emotion-14 emotion-15"
+                  class="emotion-15 emotion-16"
                   viewBox="0 0 20 20"
                 >
                   <path
@@ -3189,10 +3197,10 @@ exports[`DateInput > renders correctly error disabled 1`] = `
                 </svg>
               </div>
               <div
-                class="emotion-16 emotion-17"
+                class="emotion-17 emotion-18"
               >
                 <svg
-                  class="emotion-18 emotion-15"
+                  class="emotion-19 emotion-16"
                   viewBox="0 0 20 20"
                 >
                   <path
@@ -3207,7 +3215,7 @@ exports[`DateInput > renders correctly error disabled 1`] = `
             </div>
           </div>
           <p
-            class="emotion-20 emotion-7"
+            class="emotion-21 emotion-8"
           >
             error
           </p>
@@ -3278,8 +3286,8 @@ exports[`DateInput > renders correctly error disabled required 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-8 {
-  color: #222638;
+.emotion-9 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -3288,9 +3296,10 @@ exports[`DateInput > renders correctly error disabled required 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-10 {
+.emotion-11 {
   color: #b3144d;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -3302,7 +3311,7 @@ exports[`DateInput > renders correctly error disabled required 1`] = `
   text-decoration: none;
 }
 
-.emotion-12 {
+.emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3316,69 +3325,69 @@ exports[`DateInput > renders correctly error disabled required 1`] = `
   border-radius: 0.25rem;
 }
 
-.emotion-12>.emotion-15 {
+.emotion-13>.emotion-16 {
   color: #3f4250;
 }
 
-.emotion-12>.emotion-15::-webkit-input-placeholder {
+.emotion-13>.emotion-16::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-12>.emotion-15::-moz-placeholder {
+.emotion-13>.emotion-16::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-12>.emotion-15:-ms-input-placeholder {
+.emotion-13>.emotion-16:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-12>.emotion-15::placeholder {
+.emotion-13>.emotion-16::placeholder {
   color: #727683;
 }
 
-.emotion-12[data-success='true'] {
+.emotion-13[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-12[data-error='true'] {
+.emotion-13[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-12[data-readonly='true'] {
+.emotion-13[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-12[data-disabled='true'] {
+.emotion-13[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-12[data-disabled='true']>.emotion-15 {
+.emotion-13[data-disabled='true']>.emotion-16 {
   color: #b5b7bd;
 }
 
-.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
+.emotion-13[data-disabled='true']>.emotion-16::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
+.emotion-13[data-disabled='true']>.emotion-16::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
+.emotion-13[data-disabled='true']>.emotion-16:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12[data-disabled='true']>.emotion-15::placeholder {
+.emotion-13[data-disabled='true']>.emotion-16::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-13:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-14 {
+.emotion-15 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -3391,15 +3400,15 @@ exports[`DateInput > renders correctly error disabled required 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-14[data-size='large'] {
+.emotion-15[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-14[data-size='small'] {
+.emotion-15[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-16 {
+.emotion-17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3423,7 +3432,7 @@ exports[`DateInput > renders correctly error disabled required 1`] = `
   padding: 0 1rem;
 }
 
-.emotion-18 {
+.emotion-19 {
   vertical-align: middle;
   fill: #ffbbd3;
   height: 1rem;
@@ -3432,12 +3441,12 @@ exports[`DateInput > renders correctly error disabled required 1`] = `
   min-height: 1rem;
 }
 
-.emotion-18 .fillStroke {
+.emotion-19 .fillStroke {
   stroke: #ffbbd3;
   fill: none;
 }
 
-.emotion-20 {
+.emotion-21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3463,7 +3472,7 @@ exports[`DateInput > renders correctly error disabled required 1`] = `
   border-color: inherit;
 }
 
-.emotion-22 {
+.emotion-23 {
   vertical-align: middle;
   fill: #b5b7bd;
   height: 1.25rem;
@@ -3472,12 +3481,12 @@ exports[`DateInput > renders correctly error disabled required 1`] = `
   min-height: 1.25rem;
 }
 
-.emotion-22 .fillStroke {
+.emotion-23 .fillStroke {
   stroke: #b5b7bd;
   fill: none;
 }
 
-.emotion-24 {
+.emotion-25 {
   color: #ffbbd3;
   font-size: 0.75rem;
   font-family: Inter,Asap,sans-serif;
@@ -3508,20 +3517,20 @@ exports[`DateInput > renders correctly error disabled required 1`] = `
             class="emotion-6 emotion-5"
           >
             <label
-              class="emotion-8 emotion-9"
+              class="emotion-8 emotion-9 emotion-10"
               for=":ro:"
             >
               Date
             </label>
             <span
-              class="emotion-10 emotion-9"
+              class="emotion-11 emotion-10"
             >
               *
             </span>
           </div>
           <div>
             <div
-              class="emotion-12 emotion-13"
+              class="emotion-13 emotion-14"
               data-disabled="true"
               data-error="true"
               data-readonly="false"
@@ -3530,7 +3539,7 @@ exports[`DateInput > renders correctly error disabled required 1`] = `
               <input
                 aria-invalid="true"
                 autocomplete="false"
-                class="emotion-14 emotion-15"
+                class="emotion-15 emotion-16"
                 data-size="large"
                 disabled=""
                 id=":ro:"
@@ -3538,10 +3547,10 @@ exports[`DateInput > renders correctly error disabled required 1`] = `
                 type="text"
               />
               <div
-                class="emotion-16 emotion-17"
+                class="emotion-17 emotion-18"
               >
                 <svg
-                  class="emotion-18 emotion-19"
+                  class="emotion-19 emotion-20"
                   viewBox="0 0 20 20"
                 >
                   <path
@@ -3552,10 +3561,10 @@ exports[`DateInput > renders correctly error disabled required 1`] = `
                 </svg>
               </div>
               <div
-                class="emotion-20 emotion-21"
+                class="emotion-21 emotion-22"
               >
                 <svg
-                  class="emotion-22 emotion-19"
+                  class="emotion-23 emotion-20"
                   viewBox="0 0 20 20"
                 >
                   <path
@@ -3570,7 +3579,7 @@ exports[`DateInput > renders correctly error disabled required 1`] = `
             </div>
           </div>
           <p
-            class="emotion-24 emotion-9"
+            class="emotion-25 emotion-10"
           >
             error
           </p>
@@ -3618,8 +3627,8 @@ exports[`DateInput > renders correctly min-max 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
-  color: #222638;
+.emotion-7 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -3628,9 +3637,10 @@ exports[`DateInput > renders correctly min-max 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3644,69 +3654,69 @@ exports[`DateInput > renders correctly min-max 1`] = `
   border-radius: 0.25rem;
 }
 
-.emotion-8>.emotion-11 {
+.emotion-9>.emotion-12 {
   color: #3f4250;
 }
 
-.emotion-8>.emotion-11::-webkit-input-placeholder {
+.emotion-9>.emotion-12::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::-moz-placeholder {
+.emotion-9>.emotion-12::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11:-ms-input-placeholder {
+.emotion-9>.emotion-12:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::placeholder {
+.emotion-9>.emotion-12::placeholder {
   color: #727683;
 }
 
-.emotion-8[data-success='true'] {
+.emotion-9[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11 {
+.emotion-9[data-disabled='true']>.emotion-12 {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-webkit-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-moz-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11:-ms-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-9:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-10 {
+.emotion-11 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -3719,15 +3729,15 @@ exports[`DateInput > renders correctly min-max 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-10[data-size='large'] {
+.emotion-11[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-10[data-size='small'] {
+.emotion-11[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-12 {
+.emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3753,7 +3763,7 @@ exports[`DateInput > renders correctly min-max 1`] = `
   border-color: inherit;
 }
 
-.emotion-14 {
+.emotion-15 {
   vertical-align: middle;
   fill: #3f4250;
   height: 1.25rem;
@@ -3762,7 +3772,7 @@ exports[`DateInput > renders correctly min-max 1`] = `
   min-height: 1.25rem;
 }
 
-.emotion-14 .fillStroke {
+.emotion-15 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
@@ -3783,14 +3793,14 @@ exports[`DateInput > renders correctly min-max 1`] = `
           class="emotion-4 emotion-5"
         >
           <label
-            class="emotion-6 emotion-7"
+            class="emotion-6 emotion-7 emotion-8"
             for=":ru:"
           >
             Date
           </label>
           <div>
             <div
-              class="emotion-8 emotion-9"
+              class="emotion-9 emotion-10"
               data-disabled="false"
               data-error="false"
               data-readonly="false"
@@ -3799,16 +3809,16 @@ exports[`DateInput > renders correctly min-max 1`] = `
               <input
                 aria-invalid="false"
                 autocomplete="false"
-                class="emotion-10 emotion-11"
+                class="emotion-11 emotion-12"
                 data-size="large"
                 id=":ru:"
                 type="text"
               />
               <div
-                class="emotion-12 emotion-13"
+                class="emotion-13 emotion-14"
               >
                 <svg
-                  class="emotion-14 emotion-15"
+                  class="emotion-15 emotion-16"
                   viewBox="0 0 20 20"
                 >
                   <path
@@ -3889,8 +3899,8 @@ exports[`DateInput > renders correctly required 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-8 {
-  color: #222638;
+.emotion-9 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -3899,9 +3909,10 @@ exports[`DateInput > renders correctly required 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-10 {
+.emotion-11 {
   color: #b3144d;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -3913,7 +3924,7 @@ exports[`DateInput > renders correctly required 1`] = `
   text-decoration: none;
 }
 
-.emotion-12 {
+.emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3927,69 +3938,69 @@ exports[`DateInput > renders correctly required 1`] = `
   border-radius: 0.25rem;
 }
 
-.emotion-12>.emotion-15 {
+.emotion-13>.emotion-16 {
   color: #3f4250;
 }
 
-.emotion-12>.emotion-15::-webkit-input-placeholder {
+.emotion-13>.emotion-16::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-12>.emotion-15::-moz-placeholder {
+.emotion-13>.emotion-16::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-12>.emotion-15:-ms-input-placeholder {
+.emotion-13>.emotion-16:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-12>.emotion-15::placeholder {
+.emotion-13>.emotion-16::placeholder {
   color: #727683;
 }
 
-.emotion-12[data-success='true'] {
+.emotion-13[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-12[data-error='true'] {
+.emotion-13[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-12[data-readonly='true'] {
+.emotion-13[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-12[data-disabled='true'] {
+.emotion-13[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-12[data-disabled='true']>.emotion-15 {
+.emotion-13[data-disabled='true']>.emotion-16 {
   color: #b5b7bd;
 }
 
-.emotion-12[data-disabled='true']>.emotion-15::-webkit-input-placeholder {
+.emotion-13[data-disabled='true']>.emotion-16::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12[data-disabled='true']>.emotion-15::-moz-placeholder {
+.emotion-13[data-disabled='true']>.emotion-16::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12[data-disabled='true']>.emotion-15:-ms-input-placeholder {
+.emotion-13[data-disabled='true']>.emotion-16:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12[data-disabled='true']>.emotion-15::placeholder {
+.emotion-13[data-disabled='true']>.emotion-16::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-13:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-14 {
+.emotion-15 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -4002,15 +4013,15 @@ exports[`DateInput > renders correctly required 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-14[data-size='large'] {
+.emotion-15[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-14[data-size='small'] {
+.emotion-15[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-16 {
+.emotion-17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4036,7 +4047,7 @@ exports[`DateInput > renders correctly required 1`] = `
   border-color: inherit;
 }
 
-.emotion-18 {
+.emotion-19 {
   vertical-align: middle;
   fill: #3f4250;
   height: 1.25rem;
@@ -4045,7 +4056,7 @@ exports[`DateInput > renders correctly required 1`] = `
   min-height: 1.25rem;
 }
 
-.emotion-18 .fillStroke {
+.emotion-19 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
@@ -4069,20 +4080,20 @@ exports[`DateInput > renders correctly required 1`] = `
             class="emotion-6 emotion-5"
           >
             <label
-              class="emotion-8 emotion-9"
+              class="emotion-8 emotion-9 emotion-10"
               for=":r9:"
             >
               Date
             </label>
             <span
-              class="emotion-10 emotion-9"
+              class="emotion-11 emotion-10"
             >
               *
             </span>
           </div>
           <div>
             <div
-              class="emotion-12 emotion-13"
+              class="emotion-13 emotion-14"
               data-disabled="false"
               data-error="false"
               data-readonly="false"
@@ -4091,17 +4102,17 @@ exports[`DateInput > renders correctly required 1`] = `
               <input
                 aria-invalid="false"
                 autocomplete="false"
-                class="emotion-14 emotion-15"
+                class="emotion-15 emotion-16"
                 data-size="large"
                 id=":r9:"
                 required=""
                 type="text"
               />
               <div
-                class="emotion-16 emotion-17"
+                class="emotion-17 emotion-18"
               >
                 <svg
-                  class="emotion-18 emotion-19"
+                  class="emotion-19 emotion-20"
                   viewBox="0 0 20 20"
                 >
                   <path
@@ -4177,8 +4188,8 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
-  color: #222638;
+.emotion-7 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -4187,9 +4198,10 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4205,69 +4217,69 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
   border: 1px solid #8c40ef;
 }
 
-.emotion-8>.emotion-11 {
+.emotion-9>.emotion-12 {
   color: #3f4250;
 }
 
-.emotion-8>.emotion-11::-webkit-input-placeholder {
+.emotion-9>.emotion-12::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::-moz-placeholder {
+.emotion-9>.emotion-12::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11:-ms-input-placeholder {
+.emotion-9>.emotion-12:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::placeholder {
+.emotion-9>.emotion-12::placeholder {
   color: #727683;
 }
 
-.emotion-8[data-success='true'] {
+.emotion-9[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11 {
+.emotion-9[data-disabled='true']>.emotion-12 {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-webkit-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-moz-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11:-ms-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-9:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-10 {
+.emotion-11 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -4280,15 +4292,15 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-10[data-size='large'] {
+.emotion-11[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-10[data-size='small'] {
+.emotion-11[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-12 {
+.emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4314,7 +4326,7 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
   border-color: inherit;
 }
 
-.emotion-14 {
+.emotion-15 {
   vertical-align: middle;
   fill: #3f4250;
   height: 1.25rem;
@@ -4323,12 +4335,12 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
   min-height: 1.25rem;
 }
 
-.emotion-14 .fillStroke {
+.emotion-15 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
 
-.emotion-17 {
+.emotion-18 {
   background: #151a2d;
   color: #ffffff;
   border-radius: 0.25rem;
@@ -4355,12 +4367,12 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
   box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
 }
 
-.emotion-17[data-animated="true"] {
+.emotion-18[data-animated="true"] {
   -webkit-animation: 0ms animation-0 forwards;
   animation: 0ms animation-0 forwards;
 }
 
-.emotion-17[data-has-arrow="true"]::after {
+.emotion-18[data-has-arrow="true"]::after {
   content: " ";
   position: absolute;
   top: -5px;
@@ -4376,11 +4388,11 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
   pointer-events: none;
 }
 
-.emotion-17[data-visible-in-dom="false"] {
+.emotion-18[data-visible-in-dom="false"] {
   display: none;
 }
 
-.emotion-19 {
+.emotion-20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4403,7 +4415,7 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-21 {
+.emotion-22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4426,7 +4438,7 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
   width: 100%;
 }
 
-.emotion-23 {
+.emotion-24 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4465,22 +4477,22 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
   color: #3f4250;
 }
 
-.emotion-23:hover {
+.emotion-24:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-23:active {
+.emotion-24:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-23:hover,
-.emotion-23:active {
+.emotion-24:hover,
+.emotion-24:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-25 {
+.emotion-26 {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -4489,16 +4501,16 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
   min-height: 16px;
 }
 
-.emotion-25 .fillStroke {
+.emotion-26 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
 
-.emotion-25 path {
+.emotion-26 path {
   fill: currentColor;
 }
 
-.emotion-28 {
+.emotion-29 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -4511,7 +4523,7 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
   text-transform: capitalize;
 }
 
-.emotion-34 {
+.emotion-35 {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 0.5rem;
@@ -4525,7 +4537,7 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
   justify-content: normal;
 }
 
-.emotion-37 {
+.emotion-38 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -4539,11 +4551,11 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
   text-transform: lowercase;
 }
 
-.emotion-37::first-letter {
+.emotion-38::first-letter {
   text-transform: uppercase;
 }
 
-.emotion-58 {
+.emotion-59 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4586,41 +4598,41 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
   color: #727683;
 }
 
-.emotion-58:hover {
+.emotion-59:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-58:active {
+.emotion-59:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-58:hover,
-.emotion-58:active {
+.emotion-59:hover,
+.emotion-59:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-58[aria-label="in-range"] {
+.emotion-59[aria-label="in-range"] {
   color: #521094;
   background-color: #f1eefc;
 }
 
-.emotion-58[aria-label="in-range"]:hover {
+.emotion-59[aria-label="in-range"]:hover {
   color: #ffffff;
   background-color: #792dd4;
 }
 
-.emotion-58[aria-label="not-current"],
-.emotion-58:disabled {
+.emotion-59[aria-label="not-current"],
+.emotion-59:disabled {
   color: #b5b7bd;
 }
 
-.emotion-58[aria-label="selected"] {
+.emotion-59[aria-label="selected"] {
   color: #ffffff;
 }
 
-.emotion-100 {
+.emotion-101 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4663,41 +4675,41 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
   color: #727683;
 }
 
-.emotion-100:hover {
+.emotion-101:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-100:active {
+.emotion-101:active {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-100:hover,
-.emotion-100:active {
+.emotion-101:hover,
+.emotion-101:active {
   background: #792dd4;
   color: #f9f9fa;
 }
 
-.emotion-100[aria-label="in-range"] {
+.emotion-101[aria-label="in-range"] {
   color: #521094;
   background-color: #f1eefc;
 }
 
-.emotion-100[aria-label="in-range"]:hover {
+.emotion-101[aria-label="in-range"]:hover {
   color: #ffffff;
   background-color: #792dd4;
 }
 
-.emotion-100[aria-label="not-current"],
-.emotion-100:disabled {
+.emotion-101[aria-label="not-current"],
+.emotion-101:disabled {
   color: #b5b7bd;
 }
 
-.emotion-100[aria-label="selected"] {
+.emotion-101[aria-label="selected"] {
   color: #ffffff;
 }
 
-.emotion-103 {
+.emotion-104 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4741,27 +4753,27 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
   color: #727683;
 }
 
-.emotion-103:hover {
+.emotion-104:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-103[aria-label="in-range"] {
+.emotion-104[aria-label="in-range"] {
   color: #521094;
   background-color: #f1eefc;
 }
 
-.emotion-103[aria-label="in-range"]:hover {
+.emotion-104[aria-label="in-range"]:hover {
   color: #ffffff;
   background-color: #792dd4;
 }
 
-.emotion-103[aria-label="not-current"],
-.emotion-103:disabled {
+.emotion-104[aria-label="not-current"],
+.emotion-104:disabled {
   color: #b5b7bd;
 }
 
-.emotion-103[aria-label="selected"] {
+.emotion-104[aria-label="selected"] {
   color: #ffffff;
 }
 
@@ -4781,14 +4793,14 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
           class="emotion-4 emotion-5"
         >
           <label
-            class="emotion-6 emotion-7"
+            class="emotion-6 emotion-7 emotion-8"
             for=":raf:"
           >
             Date
           </label>
           <div>
             <div
-              class="emotion-8 emotion-9"
+              class="emotion-9 emotion-10"
               data-disabled="false"
               data-error="false"
               data-readonly="false"
@@ -4797,7 +4809,7 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
               <input
                 aria-invalid="false"
                 autocomplete="false"
-                class="emotion-10 emotion-11"
+                class="emotion-11 emotion-12"
                 data-size="large"
                 id=":raf:"
                 placeholder="YYYY-MM-DD"
@@ -4805,10 +4817,10 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
                 value="12/11/1995"
               />
               <div
-                class="emotion-12 emotion-13"
+                class="emotion-13 emotion-14"
               >
                 <svg
-                  class="emotion-14 emotion-15"
+                  class="emotion-15 emotion-16"
                   viewBox="0 0 20 20"
                 >
                   <path
@@ -4824,7 +4836,7 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
           </div>
         </div>
         <div
-          class="emotion-16 emotion-17 emotion-18"
+          class="emotion-17 emotion-18 emotion-19"
           data-animated="false"
           data-has-arrow="false"
           id=":rae:"
@@ -4832,18 +4844,18 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
           style="opacity: 1;"
         >
           <div
-            class="emotion-19 emotion-5"
+            class="emotion-20 emotion-5"
           >
             <div
-              class="emotion-21 emotion-5"
+              class="emotion-22 emotion-5"
             >
               <button
-                class="emotion-23 emotion-24"
+                class="emotion-24 emotion-25"
                 data-testid="previous-month"
                 type="button"
               >
                 <svg
-                  class="emotion-25 emotion-26"
+                  class="emotion-26 emotion-27"
                   viewBox="0 0 16 16"
                   xmlns="http://www.w3.org/2000/svg"
                 >
@@ -4855,17 +4867,17 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
                 </svg>
               </button>
               <span
-                class="emotion-27 emotion-28 emotion-7"
+                class="emotion-28 emotion-29 emotion-8"
               >
                 December 1995
               </span>
               <button
-                class="emotion-23 emotion-24"
+                class="emotion-24 emotion-25"
                 data-testid="next-month"
                 type="button"
               >
                 <svg
-                  class="emotion-25 emotion-26"
+                  class="emotion-26 emotion-27"
                   viewBox="0 0 16 16"
                   xmlns="http://www.w3.org/2000/svg"
                 >
@@ -4878,46 +4890,46 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
               </button>
             </div>
             <div
-              class="emotion-34 emotion-35"
+              class="emotion-35 emotion-36"
             >
               <p
-                class="emotion-36 emotion-37 emotion-7"
+                class="emotion-37 emotion-38 emotion-8"
               >
                 Mo
               </p>
               <p
-                class="emotion-36 emotion-37 emotion-7"
+                class="emotion-37 emotion-38 emotion-8"
               >
                 Tu
               </p>
               <p
-                class="emotion-36 emotion-37 emotion-7"
+                class="emotion-37 emotion-38 emotion-8"
               >
                 We
               </p>
               <p
-                class="emotion-36 emotion-37 emotion-7"
+                class="emotion-37 emotion-38 emotion-8"
               >
                 Th
               </p>
               <p
-                class="emotion-36 emotion-37 emotion-7"
+                class="emotion-37 emotion-38 emotion-8"
               >
                 Fr
               </p>
               <p
-                class="emotion-36 emotion-37 emotion-7"
+                class="emotion-37 emotion-38 emotion-8"
               >
                 Sa
               </p>
               <p
-                class="emotion-36 emotion-37 emotion-7"
+                class="emotion-37 emotion-38 emotion-8"
               >
                 Su
               </p>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayLastMonth"
                 type="button"
               >
@@ -4925,7 +4937,7 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayLastMonth"
                 type="button"
               >
@@ -4933,7 +4945,7 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayLastMonth"
                 type="button"
               >
@@ -4941,7 +4953,7 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayLastMonth"
                 type="button"
               >
@@ -4949,84 +4961,84 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 1
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 2
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 3
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 4
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 5
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 6
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 7
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 8
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 9
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 10
               </button>
               <button
                 aria-label="selected"
-                class="emotion-57 emotion-100 emotion-101"
+                class="emotion-58 emotion-101 emotion-102"
                 type="button"
               >
                 11
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-103 emotion-24"
+                class="emotion-58 emotion-104 emotion-25"
                 disabled=""
                 type="button"
               >
@@ -5034,7 +5046,7 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-103 emotion-24"
+                class="emotion-58 emotion-104 emotion-25"
                 disabled=""
                 type="button"
               >
@@ -5042,7 +5054,7 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-103 emotion-24"
+                class="emotion-58 emotion-104 emotion-25"
                 disabled=""
                 type="button"
               >
@@ -5050,126 +5062,126 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 15
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 16
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 17
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 18
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 19
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 20
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 21
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 22
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 23
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 24
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 25
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 26
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 27
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 28
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 29
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 30
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 31
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayNextMonth"
                 type="button"
               >
@@ -5177,7 +5189,7 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayNextMonth"
                 type="button"
               >
@@ -5185,7 +5197,7 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayNextMonth"
                 type="button"
               >
@@ -5193,7 +5205,7 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayNextMonth"
                 type="button"
               >
@@ -5201,7 +5213,7 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayNextMonth"
                 type="button"
               >
@@ -5209,7 +5221,7 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayNextMonth"
                 type="button"
               >
@@ -5217,7 +5229,7 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayNextMonth"
                 type="button"
               >
@@ -5287,8 +5299,8 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
-  color: #222638;
+.emotion-7 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -5297,9 +5309,10 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5315,69 +5328,69 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
   border: 1px solid #8c40ef;
 }
 
-.emotion-8>.emotion-11 {
+.emotion-9>.emotion-12 {
   color: #3f4250;
 }
 
-.emotion-8>.emotion-11::-webkit-input-placeholder {
+.emotion-9>.emotion-12::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::-moz-placeholder {
+.emotion-9>.emotion-12::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11:-ms-input-placeholder {
+.emotion-9>.emotion-12:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::placeholder {
+.emotion-9>.emotion-12::placeholder {
   color: #727683;
 }
 
-.emotion-8[data-success='true'] {
+.emotion-9[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11 {
+.emotion-9[data-disabled='true']>.emotion-12 {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-webkit-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-moz-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11:-ms-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-9:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-10 {
+.emotion-11 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -5390,15 +5403,15 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-10[data-size='large'] {
+.emotion-11[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-10[data-size='small'] {
+.emotion-11[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-12 {
+.emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5424,7 +5437,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
   border-color: inherit;
 }
 
-.emotion-14 {
+.emotion-15 {
   vertical-align: middle;
   fill: #3f4250;
   height: 1.25rem;
@@ -5433,12 +5446,12 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
   min-height: 1.25rem;
 }
 
-.emotion-14 .fillStroke {
+.emotion-15 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
 
-.emotion-17 {
+.emotion-18 {
   background: #151a2d;
   color: #ffffff;
   border-radius: 0.25rem;
@@ -5465,12 +5478,12 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
   box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
 }
 
-.emotion-17[data-animated="true"] {
+.emotion-18[data-animated="true"] {
   -webkit-animation: 0ms animation-0 forwards;
   animation: 0ms animation-0 forwards;
 }
 
-.emotion-17[data-has-arrow="true"]::after {
+.emotion-18[data-has-arrow="true"]::after {
   content: " ";
   position: absolute;
   top: -5px;
@@ -5486,11 +5499,11 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
   pointer-events: none;
 }
 
-.emotion-17[data-visible-in-dom="false"] {
+.emotion-18[data-visible-in-dom="false"] {
   display: none;
 }
 
-.emotion-19 {
+.emotion-20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5513,7 +5526,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-21 {
+.emotion-22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5536,7 +5549,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
   width: 100%;
 }
 
-.emotion-23 {
+.emotion-24 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -5575,22 +5588,22 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
   color: #3f4250;
 }
 
-.emotion-23:hover {
+.emotion-24:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-23:active {
+.emotion-24:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-23:hover,
-.emotion-23:active {
+.emotion-24:hover,
+.emotion-24:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-25 {
+.emotion-26 {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -5599,16 +5612,16 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
   min-height: 16px;
 }
 
-.emotion-25 .fillStroke {
+.emotion-26 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
 
-.emotion-25 path {
+.emotion-26 path {
   fill: currentColor;
 }
 
-.emotion-28 {
+.emotion-29 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -5621,7 +5634,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
   text-transform: capitalize;
 }
 
-.emotion-34 {
+.emotion-35 {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 0.5rem;
@@ -5635,7 +5648,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
   justify-content: normal;
 }
 
-.emotion-37 {
+.emotion-38 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -5649,11 +5662,11 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
   text-transform: lowercase;
 }
 
-.emotion-37::first-letter {
+.emotion-38::first-letter {
   text-transform: uppercase;
 }
 
-.emotion-58 {
+.emotion-59 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -5696,37 +5709,37 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
   color: #727683;
 }
 
-.emotion-58:hover {
+.emotion-59:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-58:active {
+.emotion-59:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-58:hover,
-.emotion-58:active {
+.emotion-59:hover,
+.emotion-59:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-58[aria-label="in-range"] {
+.emotion-59[aria-label="in-range"] {
   color: #521094;
   background-color: #f1eefc;
 }
 
-.emotion-58[aria-label="in-range"]:hover {
+.emotion-59[aria-label="in-range"]:hover {
   color: #ffffff;
   background-color: #792dd4;
 }
 
-.emotion-58[aria-label="not-current"],
-.emotion-58:disabled {
+.emotion-59[aria-label="not-current"],
+.emotion-59:disabled {
   color: #b5b7bd;
 }
 
-.emotion-58[aria-label="selected"] {
+.emotion-59[aria-label="selected"] {
   color: #ffffff;
 }
 
@@ -5746,14 +5759,14 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
           class="emotion-4 emotion-5"
         >
           <label
-            class="emotion-6 emotion-7"
+            class="emotion-6 emotion-7 emotion-8"
             for=":r2q:"
           >
             Date
           </label>
           <div>
             <div
-              class="emotion-8 emotion-9"
+              class="emotion-9 emotion-10"
               data-disabled="false"
               data-error="false"
               data-readonly="false"
@@ -5762,16 +5775,16 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
               <input
                 aria-invalid="false"
                 autocomplete="false"
-                class="emotion-10 emotion-11"
+                class="emotion-11 emotion-12"
                 data-size="large"
                 id=":r2q:"
                 type="text"
               />
               <div
-                class="emotion-12 emotion-13"
+                class="emotion-13 emotion-14"
               >
                 <svg
-                  class="emotion-14 emotion-15"
+                  class="emotion-15 emotion-16"
                   viewBox="0 0 20 20"
                 >
                   <path
@@ -5787,7 +5800,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
           </div>
         </div>
         <div
-          class="emotion-16 emotion-17 emotion-18"
+          class="emotion-17 emotion-18 emotion-19"
           data-animated="false"
           data-has-arrow="false"
           id=":r2p:"
@@ -5795,18 +5808,18 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
           style="opacity: 1;"
         >
           <div
-            class="emotion-19 emotion-5"
+            class="emotion-20 emotion-5"
           >
             <div
-              class="emotion-21 emotion-5"
+              class="emotion-22 emotion-5"
             >
               <button
-                class="emotion-23 emotion-24"
+                class="emotion-24 emotion-25"
                 data-testid="previous-month"
                 type="button"
               >
                 <svg
-                  class="emotion-25 emotion-26"
+                  class="emotion-26 emotion-27"
                   viewBox="0 0 16 16"
                   xmlns="http://www.w3.org/2000/svg"
                 >
@@ -5818,17 +5831,17 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
                 </svg>
               </button>
               <span
-                class="emotion-27 emotion-28 emotion-7"
+                class="emotion-28 emotion-29 emotion-8"
               >
                 enero 2021
               </span>
               <button
-                class="emotion-23 emotion-24"
+                class="emotion-24 emotion-25"
                 data-testid="next-month"
                 type="button"
               >
                 <svg
-                  class="emotion-25 emotion-26"
+                  class="emotion-26 emotion-27"
                   viewBox="0 0 16 16"
                   xmlns="http://www.w3.org/2000/svg"
                 >
@@ -5841,46 +5854,46 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
               </button>
             </div>
             <div
-              class="emotion-34 emotion-35"
+              class="emotion-35 emotion-36"
             >
               <p
-                class="emotion-36 emotion-37 emotion-7"
+                class="emotion-37 emotion-38 emotion-8"
               >
                 lu
               </p>
               <p
-                class="emotion-36 emotion-37 emotion-7"
+                class="emotion-37 emotion-38 emotion-8"
               >
                 ma
               </p>
               <p
-                class="emotion-36 emotion-37 emotion-7"
+                class="emotion-37 emotion-38 emotion-8"
               >
                 mi
               </p>
               <p
-                class="emotion-36 emotion-37 emotion-7"
+                class="emotion-37 emotion-38 emotion-8"
               >
                 ju
               </p>
               <p
-                class="emotion-36 emotion-37 emotion-7"
+                class="emotion-37 emotion-38 emotion-8"
               >
                 vi
               </p>
               <p
-                class="emotion-36 emotion-37 emotion-7"
+                class="emotion-37 emotion-38 emotion-8"
               >
                 sá
               </p>
               <p
-                class="emotion-36 emotion-37 emotion-7"
+                class="emotion-37 emotion-38 emotion-8"
               >
                 do
               </p>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayLastMonth"
                 type="button"
               >
@@ -5888,7 +5901,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayLastMonth"
                 type="button"
               >
@@ -5896,7 +5909,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayLastMonth"
                 type="button"
               >
@@ -5904,7 +5917,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayLastMonth"
                 type="button"
               >
@@ -5912,224 +5925,224 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 1
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 2
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 3
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 4
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 5
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 6
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 7
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 8
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 9
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 10
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 11
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 12
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 13
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 14
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 15
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 16
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 17
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 18
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 19
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 20
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 21
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 22
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 23
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 24
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 25
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 26
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 27
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 28
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 29
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 30
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 31
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayNextMonth"
                 type="button"
               >
@@ -6137,7 +6150,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayNextMonth"
                 type="button"
               >
@@ -6145,7 +6158,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayNextMonth"
                 type="button"
               >
@@ -6153,7 +6166,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayNextMonth"
                 type="button"
               >
@@ -6161,7 +6174,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayNextMonth"
                 type="button"
               >
@@ -6169,7 +6182,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayNextMonth"
                 type="button"
               >
@@ -6177,7 +6190,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayNextMonth"
                 type="button"
               >
@@ -6247,8 +6260,8 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
-  color: #222638;
+.emotion-7 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -6257,9 +6270,10 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6275,69 +6289,69 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
   border: 1px solid #8c40ef;
 }
 
-.emotion-8>.emotion-11 {
+.emotion-9>.emotion-12 {
   color: #3f4250;
 }
 
-.emotion-8>.emotion-11::-webkit-input-placeholder {
+.emotion-9>.emotion-12::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::-moz-placeholder {
+.emotion-9>.emotion-12::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11:-ms-input-placeholder {
+.emotion-9>.emotion-12:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::placeholder {
+.emotion-9>.emotion-12::placeholder {
   color: #727683;
 }
 
-.emotion-8[data-success='true'] {
+.emotion-9[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11 {
+.emotion-9[data-disabled='true']>.emotion-12 {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-webkit-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-moz-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11:-ms-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-9:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-10 {
+.emotion-11 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -6350,15 +6364,15 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-10[data-size='large'] {
+.emotion-11[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-10[data-size='small'] {
+.emotion-11[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-12 {
+.emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6384,7 +6398,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
   border-color: inherit;
 }
 
-.emotion-14 {
+.emotion-15 {
   vertical-align: middle;
   fill: #3f4250;
   height: 1.25rem;
@@ -6393,12 +6407,12 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
   min-height: 1.25rem;
 }
 
-.emotion-14 .fillStroke {
+.emotion-15 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
 
-.emotion-17 {
+.emotion-18 {
   background: #151a2d;
   color: #ffffff;
   border-radius: 0.25rem;
@@ -6425,12 +6439,12 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
   box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
 }
 
-.emotion-17[data-animated="true"] {
+.emotion-18[data-animated="true"] {
   -webkit-animation: 0ms animation-0 forwards;
   animation: 0ms animation-0 forwards;
 }
 
-.emotion-17[data-has-arrow="true"]::after {
+.emotion-18[data-has-arrow="true"]::after {
   content: " ";
   position: absolute;
   top: -5px;
@@ -6446,11 +6460,11 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
   pointer-events: none;
 }
 
-.emotion-17[data-visible-in-dom="false"] {
+.emotion-18[data-visible-in-dom="false"] {
   display: none;
 }
 
-.emotion-19 {
+.emotion-20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6473,7 +6487,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-21 {
+.emotion-22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6496,7 +6510,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
   width: 100%;
 }
 
-.emotion-23 {
+.emotion-24 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -6535,22 +6549,22 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
   color: #3f4250;
 }
 
-.emotion-23:hover {
+.emotion-24:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-23:active {
+.emotion-24:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-23:hover,
-.emotion-23:active {
+.emotion-24:hover,
+.emotion-24:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-25 {
+.emotion-26 {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -6559,16 +6573,16 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
   min-height: 16px;
 }
 
-.emotion-25 .fillStroke {
+.emotion-26 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
 
-.emotion-25 path {
+.emotion-26 path {
   fill: currentColor;
 }
 
-.emotion-28 {
+.emotion-29 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -6581,7 +6595,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
   text-transform: capitalize;
 }
 
-.emotion-34 {
+.emotion-35 {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 0.5rem;
@@ -6595,7 +6609,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
   justify-content: normal;
 }
 
-.emotion-37 {
+.emotion-38 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -6609,11 +6623,11 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
   text-transform: lowercase;
 }
 
-.emotion-37::first-letter {
+.emotion-38::first-letter {
   text-transform: uppercase;
 }
 
-.emotion-58 {
+.emotion-59 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -6656,37 +6670,37 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
   color: #727683;
 }
 
-.emotion-58:hover {
+.emotion-59:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-58:active {
+.emotion-59:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-58:hover,
-.emotion-58:active {
+.emotion-59:hover,
+.emotion-59:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-58[aria-label="in-range"] {
+.emotion-59[aria-label="in-range"] {
   color: #521094;
   background-color: #f1eefc;
 }
 
-.emotion-58[aria-label="in-range"]:hover {
+.emotion-59[aria-label="in-range"]:hover {
   color: #ffffff;
   background-color: #792dd4;
 }
 
-.emotion-58[aria-label="not-current"],
-.emotion-58:disabled {
+.emotion-59[aria-label="not-current"],
+.emotion-59:disabled {
   color: #b5b7bd;
 }
 
-.emotion-58[aria-label="selected"] {
+.emotion-59[aria-label="selected"] {
   color: #ffffff;
 }
 
@@ -6706,14 +6720,14 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
           class="emotion-4 emotion-5"
         >
           <label
-            class="emotion-6 emotion-7"
+            class="emotion-6 emotion-7 emotion-8"
             for=":r12:"
           >
             Date
           </label>
           <div>
             <div
-              class="emotion-8 emotion-9"
+              class="emotion-9 emotion-10"
               data-disabled="false"
               data-error="false"
               data-readonly="false"
@@ -6722,16 +6736,16 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
               <input
                 aria-invalid="false"
                 autocomplete="false"
-                class="emotion-10 emotion-11"
+                class="emotion-11 emotion-12"
                 data-size="large"
                 id=":r12:"
                 type="text"
               />
               <div
-                class="emotion-12 emotion-13"
+                class="emotion-13 emotion-14"
               >
                 <svg
-                  class="emotion-14 emotion-15"
+                  class="emotion-15 emotion-16"
                   viewBox="0 0 20 20"
                 >
                   <path
@@ -6747,7 +6761,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
           </div>
         </div>
         <div
-          class="emotion-16 emotion-17 emotion-18"
+          class="emotion-17 emotion-18 emotion-19"
           data-animated="false"
           data-has-arrow="false"
           id=":r11:"
@@ -6755,18 +6769,18 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
           style="opacity: 1;"
         >
           <div
-            class="emotion-19 emotion-5"
+            class="emotion-20 emotion-5"
           >
             <div
-              class="emotion-21 emotion-5"
+              class="emotion-22 emotion-5"
             >
               <button
-                class="emotion-23 emotion-24"
+                class="emotion-24 emotion-25"
                 data-testid="previous-month"
                 type="button"
               >
                 <svg
-                  class="emotion-25 emotion-26"
+                  class="emotion-26 emotion-27"
                   viewBox="0 0 16 16"
                   xmlns="http://www.w3.org/2000/svg"
                 >
@@ -6778,17 +6792,17 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
                 </svg>
               </button>
               <span
-                class="emotion-27 emotion-28 emotion-7"
+                class="emotion-28 emotion-29 emotion-8"
               >
                 janvier 2021
               </span>
               <button
-                class="emotion-23 emotion-24"
+                class="emotion-24 emotion-25"
                 data-testid="next-month"
                 type="button"
               >
                 <svg
-                  class="emotion-25 emotion-26"
+                  class="emotion-26 emotion-27"
                   viewBox="0 0 16 16"
                   xmlns="http://www.w3.org/2000/svg"
                 >
@@ -6801,46 +6815,46 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
               </button>
             </div>
             <div
-              class="emotion-34 emotion-35"
+              class="emotion-35 emotion-36"
             >
               <p
-                class="emotion-36 emotion-37 emotion-7"
+                class="emotion-37 emotion-38 emotion-8"
               >
                 lu
               </p>
               <p
-                class="emotion-36 emotion-37 emotion-7"
+                class="emotion-37 emotion-38 emotion-8"
               >
                 ma
               </p>
               <p
-                class="emotion-36 emotion-37 emotion-7"
+                class="emotion-37 emotion-38 emotion-8"
               >
                 me
               </p>
               <p
-                class="emotion-36 emotion-37 emotion-7"
+                class="emotion-37 emotion-38 emotion-8"
               >
                 je
               </p>
               <p
-                class="emotion-36 emotion-37 emotion-7"
+                class="emotion-37 emotion-38 emotion-8"
               >
                 ve
               </p>
               <p
-                class="emotion-36 emotion-37 emotion-7"
+                class="emotion-37 emotion-38 emotion-8"
               >
                 sa
               </p>
               <p
-                class="emotion-36 emotion-37 emotion-7"
+                class="emotion-37 emotion-38 emotion-8"
               >
                 di
               </p>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayLastMonth"
                 type="button"
               >
@@ -6848,7 +6862,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayLastMonth"
                 type="button"
               >
@@ -6856,7 +6870,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayLastMonth"
                 type="button"
               >
@@ -6864,7 +6878,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayLastMonth"
                 type="button"
               >
@@ -6872,224 +6886,224 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 1
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 2
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 3
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 4
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 5
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 6
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 7
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 8
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 9
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 10
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 11
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 12
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 13
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 14
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 15
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 16
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 17
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 18
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 19
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 20
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 21
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 22
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 23
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 24
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 25
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 26
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 27
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 28
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 29
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 30
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 31
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayNextMonth"
                 type="button"
               >
@@ -7097,7 +7111,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayNextMonth"
                 type="button"
               >
@@ -7105,7 +7119,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayNextMonth"
                 type="button"
               >
@@ -7113,7 +7127,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayNextMonth"
                 type="button"
               >
@@ -7121,7 +7135,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayNextMonth"
                 type="button"
               >
@@ -7129,7 +7143,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayNextMonth"
                 type="button"
               >
@@ -7137,7 +7151,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayNextMonth"
                 type="button"
               >
@@ -7207,8 +7221,8 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
-  color: #222638;
+.emotion-7 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -7217,9 +7231,10 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7235,69 +7250,69 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
   border: 1px solid #8c40ef;
 }
 
-.emotion-8>.emotion-11 {
+.emotion-9>.emotion-12 {
   color: #3f4250;
 }
 
-.emotion-8>.emotion-11::-webkit-input-placeholder {
+.emotion-9>.emotion-12::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::-moz-placeholder {
+.emotion-9>.emotion-12::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11:-ms-input-placeholder {
+.emotion-9>.emotion-12:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::placeholder {
+.emotion-9>.emotion-12::placeholder {
   color: #727683;
 }
 
-.emotion-8[data-success='true'] {
+.emotion-9[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11 {
+.emotion-9[data-disabled='true']>.emotion-12 {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-webkit-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-moz-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11:-ms-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-9:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-10 {
+.emotion-11 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -7310,15 +7325,15 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-10[data-size='large'] {
+.emotion-11[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-10[data-size='small'] {
+.emotion-11[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-12 {
+.emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7344,7 +7359,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
   border-color: inherit;
 }
 
-.emotion-14 {
+.emotion-15 {
   vertical-align: middle;
   fill: #3f4250;
   height: 1.25rem;
@@ -7353,12 +7368,12 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
   min-height: 1.25rem;
 }
 
-.emotion-14 .fillStroke {
+.emotion-15 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
 
-.emotion-17 {
+.emotion-18 {
   background: #151a2d;
   color: #ffffff;
   border-radius: 0.25rem;
@@ -7385,12 +7400,12 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
   box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
 }
 
-.emotion-17[data-animated="true"] {
+.emotion-18[data-animated="true"] {
   -webkit-animation: 0ms animation-0 forwards;
   animation: 0ms animation-0 forwards;
 }
 
-.emotion-17[data-has-arrow="true"]::after {
+.emotion-18[data-has-arrow="true"]::after {
   content: " ";
   position: absolute;
   top: -5px;
@@ -7406,11 +7421,11 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
   pointer-events: none;
 }
 
-.emotion-17[data-visible-in-dom="false"] {
+.emotion-18[data-visible-in-dom="false"] {
   display: none;
 }
 
-.emotion-19 {
+.emotion-20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7433,7 +7448,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-21 {
+.emotion-22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7456,7 +7471,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
   width: 100%;
 }
 
-.emotion-23 {
+.emotion-24 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -7495,22 +7510,22 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
   color: #3f4250;
 }
 
-.emotion-23:hover {
+.emotion-24:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-23:active {
+.emotion-24:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-23:hover,
-.emotion-23:active {
+.emotion-24:hover,
+.emotion-24:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-25 {
+.emotion-26 {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -7519,16 +7534,16 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
   min-height: 16px;
 }
 
-.emotion-25 .fillStroke {
+.emotion-26 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
 
-.emotion-25 path {
+.emotion-26 path {
   fill: currentColor;
 }
 
-.emotion-28 {
+.emotion-29 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -7541,7 +7556,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
   text-transform: capitalize;
 }
 
-.emotion-34 {
+.emotion-35 {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 0.5rem;
@@ -7555,7 +7570,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
   justify-content: normal;
 }
 
-.emotion-37 {
+.emotion-38 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -7569,11 +7584,11 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
   text-transform: lowercase;
 }
 
-.emotion-37::first-letter {
+.emotion-38::first-letter {
   text-transform: uppercase;
 }
 
-.emotion-58 {
+.emotion-59 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -7616,37 +7631,37 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
   color: #727683;
 }
 
-.emotion-58:hover {
+.emotion-59:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-58:active {
+.emotion-59:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-58:hover,
-.emotion-58:active {
+.emotion-59:hover,
+.emotion-59:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-58[aria-label="in-range"] {
+.emotion-59[aria-label="in-range"] {
   color: #521094;
   background-color: #f1eefc;
 }
 
-.emotion-58[aria-label="in-range"]:hover {
+.emotion-59[aria-label="in-range"]:hover {
   color: #ffffff;
   background-color: #792dd4;
 }
 
-.emotion-58[aria-label="not-current"],
-.emotion-58:disabled {
+.emotion-59[aria-label="not-current"],
+.emotion-59:disabled {
   color: #b5b7bd;
 }
 
-.emotion-58[aria-label="selected"] {
+.emotion-59[aria-label="selected"] {
   color: #ffffff;
 }
 
@@ -7666,14 +7681,14 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
           class="emotion-4 emotion-5"
         >
           <label
-            class="emotion-6 emotion-7"
+            class="emotion-6 emotion-7 emotion-8"
             for=":r4i:"
           >
             Date
           </label>
           <div>
             <div
-              class="emotion-8 emotion-9"
+              class="emotion-9 emotion-10"
               data-disabled="false"
               data-error="false"
               data-readonly="false"
@@ -7682,16 +7697,16 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
               <input
                 aria-invalid="false"
                 autocomplete="false"
-                class="emotion-10 emotion-11"
+                class="emotion-11 emotion-12"
                 data-size="large"
                 id=":r4i:"
                 type="text"
               />
               <div
-                class="emotion-12 emotion-13"
+                class="emotion-13 emotion-14"
               >
                 <svg
-                  class="emotion-14 emotion-15"
+                  class="emotion-15 emotion-16"
                   viewBox="0 0 20 20"
                 >
                   <path
@@ -7707,7 +7722,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
           </div>
         </div>
         <div
-          class="emotion-16 emotion-17 emotion-18"
+          class="emotion-17 emotion-18 emotion-19"
           data-animated="false"
           data-has-arrow="false"
           id=":r4h:"
@@ -7715,18 +7730,18 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
           style="opacity: 1;"
         >
           <div
-            class="emotion-19 emotion-5"
+            class="emotion-20 emotion-5"
           >
             <div
-              class="emotion-21 emotion-5"
+              class="emotion-22 emotion-5"
             >
               <button
-                class="emotion-23 emotion-24"
+                class="emotion-24 emotion-25"
                 data-testid="previous-month"
                 type="button"
               >
                 <svg
-                  class="emotion-25 emotion-26"
+                  class="emotion-26 emotion-27"
                   viewBox="0 0 16 16"
                   xmlns="http://www.w3.org/2000/svg"
                 >
@@ -7738,17 +7753,17 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
                 </svg>
               </button>
               <span
-                class="emotion-27 emotion-28 emotion-7"
+                class="emotion-28 emotion-29 emotion-8"
               >
                 январь 2021
               </span>
               <button
-                class="emotion-23 emotion-24"
+                class="emotion-24 emotion-25"
                 data-testid="next-month"
                 type="button"
               >
                 <svg
-                  class="emotion-25 emotion-26"
+                  class="emotion-26 emotion-27"
                   viewBox="0 0 16 16"
                   xmlns="http://www.w3.org/2000/svg"
                 >
@@ -7761,46 +7776,46 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
               </button>
             </div>
             <div
-              class="emotion-34 emotion-35"
+              class="emotion-35 emotion-36"
             >
               <p
-                class="emotion-36 emotion-37 emotion-7"
+                class="emotion-37 emotion-38 emotion-8"
               >
                 по
               </p>
               <p
-                class="emotion-36 emotion-37 emotion-7"
+                class="emotion-37 emotion-38 emotion-8"
               >
                 вт
               </p>
               <p
-                class="emotion-36 emotion-37 emotion-7"
+                class="emotion-37 emotion-38 emotion-8"
               >
                 ср
               </p>
               <p
-                class="emotion-36 emotion-37 emotion-7"
+                class="emotion-37 emotion-38 emotion-8"
               >
                 че
               </p>
               <p
-                class="emotion-36 emotion-37 emotion-7"
+                class="emotion-37 emotion-38 emotion-8"
               >
                 пя
               </p>
               <p
-                class="emotion-36 emotion-37 emotion-7"
+                class="emotion-37 emotion-38 emotion-8"
               >
                 су
               </p>
               <p
-                class="emotion-36 emotion-37 emotion-7"
+                class="emotion-37 emotion-38 emotion-8"
               >
                 во
               </p>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayLastMonth"
                 type="button"
               >
@@ -7808,7 +7823,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayLastMonth"
                 type="button"
               >
@@ -7816,7 +7831,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayLastMonth"
                 type="button"
               >
@@ -7824,7 +7839,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayLastMonth"
                 type="button"
               >
@@ -7832,224 +7847,224 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 1
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 2
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 3
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 4
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 5
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 6
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 7
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 8
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 9
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 10
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 11
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 12
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 13
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 14
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 15
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 16
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 17
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 18
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 19
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 20
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 21
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 22
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 23
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 24
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 25
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 26
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 27
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 28
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 29
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 30
               </button>
               <button
                 aria-label="neutral"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 type="button"
               >
                 31
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayNextMonth"
                 type="button"
               >
@@ -8057,7 +8072,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayNextMonth"
                 type="button"
               >
@@ -8065,7 +8080,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayNextMonth"
                 type="button"
               >
@@ -8073,7 +8088,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayNextMonth"
                 type="button"
               >
@@ -8081,7 +8096,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayNextMonth"
                 type="button"
               >
@@ -8089,7 +8104,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayNextMonth"
                 type="button"
               >
@@ -8097,7 +8112,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
               </button>
               <button
                 aria-label="not-current"
-                class="emotion-57 emotion-58 emotion-24"
+                class="emotion-58 emotion-59 emotion-25"
                 data-testid="dayNextMonth"
                 type="button"
               >
@@ -8149,8 +8164,8 @@ exports[`DateInput > renders correctly with default props 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
-  color: #222638;
+.emotion-7 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -8159,9 +8174,10 @@ exports[`DateInput > renders correctly with default props 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8175,69 +8191,69 @@ exports[`DateInput > renders correctly with default props 1`] = `
   border-radius: 0.25rem;
 }
 
-.emotion-8>.emotion-11 {
+.emotion-9>.emotion-12 {
   color: #3f4250;
 }
 
-.emotion-8>.emotion-11::-webkit-input-placeholder {
+.emotion-9>.emotion-12::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::-moz-placeholder {
+.emotion-9>.emotion-12::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11:-ms-input-placeholder {
+.emotion-9>.emotion-12:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-8>.emotion-11::placeholder {
+.emotion-9>.emotion-12::placeholder {
   color: #727683;
 }
 
-.emotion-8[data-success='true'] {
+.emotion-9[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11 {
+.emotion-9[data-disabled='true']>.emotion-12 {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-webkit-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::-moz-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11:-ms-input-placeholder {
+.emotion-9[data-disabled='true']>.emotion-12:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11::placeholder {
+.emotion-9[data-disabled='true']>.emotion-12::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-9:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-10 {
+.emotion-11 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -8250,15 +8266,15 @@ exports[`DateInput > renders correctly with default props 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-10[data-size='large'] {
+.emotion-11[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-10[data-size='small'] {
+.emotion-11[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-12 {
+.emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8284,7 +8300,7 @@ exports[`DateInput > renders correctly with default props 1`] = `
   border-color: inherit;
 }
 
-.emotion-14 {
+.emotion-15 {
   vertical-align: middle;
   fill: #3f4250;
   height: 1.25rem;
@@ -8293,7 +8309,7 @@ exports[`DateInput > renders correctly with default props 1`] = `
   min-height: 1.25rem;
 }
 
-.emotion-14 .fillStroke {
+.emotion-15 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
@@ -8314,14 +8330,14 @@ exports[`DateInput > renders correctly with default props 1`] = `
           class="emotion-4 emotion-5"
         >
           <label
-            class="emotion-6 emotion-7"
+            class="emotion-6 emotion-7 emotion-8"
             for=":r1:"
           >
             Date
           </label>
           <div>
             <div
-              class="emotion-8 emotion-9"
+              class="emotion-9 emotion-10"
               data-disabled="false"
               data-error="false"
               data-readonly="false"
@@ -8330,7 +8346,7 @@ exports[`DateInput > renders correctly with default props 1`] = `
               <input
                 aria-invalid="false"
                 autocomplete="false"
-                class="emotion-10 emotion-11"
+                class="emotion-11 emotion-12"
                 data-size="large"
                 id=":r1:"
                 name="test"
@@ -8338,10 +8354,10 @@ exports[`DateInput > renders correctly with default props 1`] = `
                 value="1995-12-17T03:24:00.000Z"
               />
               <div
-                class="emotion-12 emotion-13"
+                class="emotion-13 emotion-14"
               >
                 <svg
-                  class="emotion-14 emotion-15"
+                  class="emotion-15 emotion-16"
                   viewBox="0 0 20 20"
                 >
                   <path
diff --git a/packages/ui/src/components/Label/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Label/__tests__/__snapshots__/index.test.tsx.snap
index 5785c1d78c..59c9216ab9 100644
--- a/packages/ui/src/components/Label/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Label/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,8 +2,8 @@
 
 exports[`DateInput > renders correctly large 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  color: #222638;
+  .emotion-1 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -12,13 +12,14 @@ exports[`DateInput > renders correctly large 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: text;
 }
 
 <div
     data-testid="testing"
   >
     <label
-      class="emotion-0 emotion-1"
+      class="emotion-0 emotion-1 emotion-2"
     >
       Label
     </label>
@@ -28,8 +29,8 @@ exports[`DateInput > renders correctly large 1`] = `
 
 exports[`DateInput > renders correctly medium 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  color: #222638;
+  .emotion-1 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -38,13 +39,14 @@ exports[`DateInput > renders correctly medium 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: text;
 }
 
 <div
     data-testid="testing"
   >
     <label
-      class="emotion-0 emotion-1"
+      class="emotion-0 emotion-1 emotion-2"
     >
       Label
     </label>
@@ -77,8 +79,8 @@ exports[`DateInput > renders correctly required 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -87,9 +89,10 @@ exports[`DateInput > renders correctly required 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: text;
 }
 
-.emotion-4 {
+.emotion-5 {
   color: #b3144d;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -108,12 +111,12 @@ exports[`DateInput > renders correctly required 1`] = `
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
       >
         Label
       </label>
       <span
-        class="emotion-4 emotion-3"
+        class="emotion-5 emotion-4"
       >
         *
       </span>
@@ -124,8 +127,8 @@ exports[`DateInput > renders correctly required 1`] = `
 
 exports[`DateInput > renders correctly small 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  color: #222638;
+  .emotion-1 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -134,13 +137,14 @@ exports[`DateInput > renders correctly small 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: text;
 }
 
 <div
     data-testid="testing"
   >
     <label
-      class="emotion-0 emotion-1"
+      class="emotion-0 emotion-1 emotion-2"
     >
       Label
     </label>
@@ -150,8 +154,8 @@ exports[`DateInput > renders correctly small 1`] = `
 
 exports[`DateInput > renders correctly with default props 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  color: #222638;
+  .emotion-1 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -160,13 +164,14 @@ exports[`DateInput > renders correctly with default props 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: text;
 }
 
 <div
     data-testid="testing"
   >
     <label
-      class="emotion-0 emotion-1"
+      class="emotion-0 emotion-1 emotion-2"
     >
       Label
     </label>
@@ -176,8 +181,8 @@ exports[`DateInput > renders correctly with default props 1`] = `
 
 exports[`DateInput > renders correctly with htmlFor 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  color: #222638;
+  .emotion-1 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -186,6 +191,7 @@ exports[`DateInput > renders correctly with htmlFor 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
 <div
@@ -193,7 +199,7 @@ exports[`DateInput > renders correctly with htmlFor 1`] = `
   >
     <div>
       <label
-        class="emotion-0 emotion-1"
+        class="emotion-0 emotion-1 emotion-2"
         for="id"
         id="id-label"
       >
@@ -233,8 +239,8 @@ exports[`DateInput > renders correctly with label description (ReactNode) 1`] =
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -243,6 +249,7 @@ exports[`DateInput > renders correctly with label description (ReactNode) 1`] =
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: text;
 }
 
 <div
@@ -252,7 +259,7 @@ exports[`DateInput > renders correctly with label description (ReactNode) 1`] =
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
       >
         Label
       </label>
@@ -289,8 +296,8 @@ exports[`DateInput > renders correctly with label description (string) 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -299,9 +306,10 @@ exports[`DateInput > renders correctly with label description (string) 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: text;
 }
 
-.emotion-4 {
+.emotion-5 {
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -319,12 +327,12 @@ exports[`DateInput > renders correctly with label description (string) 1`] = `
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
       >
         Label
       </label>
       <span
-        class="emotion-4 emotion-3"
+        class="emotion-5 emotion-4"
       >
         test
       </span>
diff --git a/packages/ui/src/components/Label/index.tsx b/packages/ui/src/components/Label/index.tsx
index 15caddfe3b..ad89682f8e 100644
--- a/packages/ui/src/components/Label/index.tsx
+++ b/packages/ui/src/components/Label/index.tsx
@@ -1,67 +1,95 @@
-import type { ReactNode } from 'react'
+import styled from '@emotion/styled'
+import type { ComponentProps, ReactNode } from 'react'
 import { Stack } from '../Stack'
 import { Text } from '../Text'
 
+const TextPointer = styled(Text)`
+  cursor: ${({ disabled, htmlFor }) => {
+    if (disabled) {
+      return 'not-allowed'
+    }
+
+    if (htmlFor) {
+      return 'pointer'
+    }
+
+    return 'text'
+  }};
+`
+
 const LabelRequiredOrNot = ({
   children,
   required,
   id,
   size,
   htmlFor,
+  as,
+  sentiment,
+  disabled,
 }: LabelProps) =>
   required ? (
     <Stack direction="row" gap="0.5" alignItems="start">
-      <Text
-        as="label"
+      <TextPointer
+        as={as === 'label' ? 'label' : 'legend'}
         id={id}
         variant={size === 'large' ? 'bodyStrong' : 'bodySmallStrong'}
-        sentiment="neutral"
+        sentiment={sentiment}
         htmlFor={htmlFor}
-        prominence="strong"
+        disabled={disabled}
       >
         {children}
-      </Text>
+      </TextPointer>
       <Text
         as="span"
         variant={size === 'large' ? 'bodyStrong' : 'bodySmallStrong'}
         sentiment="danger"
         aria-label="required"
+        disabled={disabled}
       >
         *
       </Text>
     </Stack>
   ) : (
-    <Text
-      as="label"
+    <TextPointer
+      as={as === 'label' ? 'label' : 'legend'}
       id={id}
       variant={size === 'large' ? 'bodyStrong' : 'bodySmallStrong'}
-      sentiment="neutral"
+      sentiment={sentiment}
       htmlFor={htmlFor}
-      prominence="strong"
+      disabled={disabled}
     >
       {children}
-    </Text>
+    </TextPointer>
   )
 
 type LabelProps = {
+  /**
+   * As can help you to define a label or a legend in case you are using it inside a fieldset
+   */
+  as?: 'label' | 'legend'
   children?: string
   labelDescription?: ReactNode
   required?: boolean
   size?: 'small' | 'medium' | 'large'
   htmlFor?: string
   id?: string
+  sentiment?: ComponentProps<typeof Text>['sentiment']
+  disabled?: boolean
 }
 
 /**
  * Label is used inside all of our input components, but it can be used outside for design purposes
  */
 export const Label = ({
+  as = 'label',
   children,
   labelDescription,
   required,
   size = 'large',
   htmlFor,
   id,
+  sentiment = 'neutral',
+  disabled,
 }: LabelProps) =>
   labelDescription ? (
     <Stack direction="row" gap="1" alignItems="center">
@@ -70,6 +98,9 @@ export const Label = ({
         size={size}
         htmlFor={htmlFor}
         id={id}
+        as={as}
+        sentiment={sentiment}
+        disabled={disabled}
       >
         {children}
       </LabelRequiredOrNot>
@@ -87,6 +118,9 @@ export const Label = ({
       size={size}
       htmlFor={htmlFor}
       id={id}
+      as={as}
+      sentiment={sentiment}
+      disabled={disabled}
     >
       {children}
     </LabelRequiredOrNot>
diff --git a/packages/ui/src/components/NumberInputV2/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/NumberInputV2/__tests__/__snapshots__/index.test.tsx.snap
index e8d7bba9c7..497a18b86d 100644
--- a/packages/ui/src/components/NumberInputV2/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/NumberInputV2/__tests__/__snapshots__/index.test.tsx.snap
@@ -7876,8 +7876,8 @@ exports[`NumberInputV2 > should renders correctly with label 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -7886,9 +7886,10 @@ exports[`NumberInputV2 > should renders correctly with label 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7907,52 +7908,52 @@ exports[`NumberInputV2 > should renders correctly with label 1`] = `
   border-radius: 0.25rem;
 }
 
-.emotion-4:focus-within {
+.emotion-5:focus-within {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-4[data-success='true'] {
+.emotion-5[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-4[data-error='true'] {
+.emotion-5[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-4:hover {
+.emotion-5:hover {
   border-color: #792dd4;
 }
 
-.emotion-4[data-readonly='true'] {
+.emotion-5[data-readonly='true'] {
   border-color: #d9dadd;
   background: #f9f9fa;
   cursor: not-allowed;
 }
 
-.emotion-4[data-disabled='true'] {
+.emotion-5[data-disabled='true'] {
   border-color: #e9eaeb;
   background: #f3f3f4;
   cursor: not-allowed;
 }
 
-.emotion-4[data-controls='false']>.emotion-12 {
+.emotion-5[data-controls='false']>.emotion-13 {
   border-width: 0;
 }
 
-.emotion-4[data-size='small'] {
+.emotion-5[data-size='small'] {
   height: 2rem;
 }
 
-.emotion-4[data-size='medium'] {
+.emotion-5[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-4[data-size='large'] {
+.emotion-5[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-6 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7976,20 +7977,20 @@ exports[`NumberInputV2 > should renders correctly with label 1`] = `
   padding: 0.125rem 0.5rem;
 }
 
-.emotion-6[data-size='small'] {
+.emotion-7[data-size='small'] {
   height: 2rem;
 }
 
-.emotion-6[data-size='medium'] {
+.emotion-7[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-6[data-size='large'] {
+.emotion-7[data-size='large'] {
   height: 3rem;
   padding: 0.25rem 0.5rem;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -8028,22 +8029,22 @@ exports[`NumberInputV2 > should renders correctly with label 1`] = `
   color: #3f4250;
 }
 
-.emotion-8:hover {
+.emotion-9:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-8:active {
+.emotion-9:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-8:hover,
-.emotion-8:active {
+.emotion-9:hover,
+.emotion-9:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-10 {
+.emotion-11 {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -8052,16 +8053,16 @@ exports[`NumberInputV2 > should renders correctly with label 1`] = `
   min-height: 16px;
 }
 
-.emotion-10 .fillStroke {
+.emotion-11 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
 
-.emotion-10 path {
+.emotion-11 path {
   fill: currentColor;
 }
 
-.emotion-13 {
+.emotion-14 {
   display: grid;
   grid-template-columns: 1fr auto;
   -webkit-align-items: center;
@@ -8078,7 +8079,7 @@ exports[`NumberInputV2 > should renders correctly with label 1`] = `
   width: 100%;
 }
 
-.emotion-15 {
+.emotion-16 {
   outline: none;
   border: none;
   padding: 0;
@@ -8093,18 +8094,18 @@ exports[`NumberInputV2 > should renders correctly with label 1`] = `
   background: none;
 }
 
-.emotion-15[data-has-unit='true'] {
+.emotion-16[data-has-unit='true'] {
   text-align: left;
   padding: 0.5rem 0 0.5rem 0.5rem;
 }
 
-.emotion-15::-webkit-outer-spin-button,
-.emotion-15::-webkit-inner-spin-button {
+.emotion-16::-webkit-outer-spin-button,
+.emotion-16::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
-.emotion-15 {
+.emotion-16 {
   -moz-appearance: textfield;
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
@@ -8112,15 +8113,15 @@ exports[`NumberInputV2 > should renders correctly with label 1`] = `
   appearance: textfield;
 }
 
-.emotion-15[data-size='small'] {
+.emotion-16[data-size='small'] {
   height: 2rem;
 }
 
-.emotion-15[data-size='medium'] {
+.emotion-16[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-15[data-size='large'] {
+.emotion-16[data-size='large'] {
   height: 3rem;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -8128,34 +8129,34 @@ exports[`NumberInputV2 > should renders correctly with label 1`] = `
   line-height: 1.5rem;
 }
 
-.emotion-15:-moz-read-only {
+.emotion-16:-moz-read-only {
   color: #3f4250;
   background: #f9f9fa;
   border-block: 1px solid #d9dadd;
 }
 
-.emotion-15:read-only {
+.emotion-16:read-only {
   color: #3f4250;
   background: #f9f9fa;
   border-block: 1px solid #d9dadd;
 }
 
-.emotion-15:-moz-read-only~.e1b9qdjy2 {
+.emotion-16:-moz-read-only~.e1b9qdjy2 {
   background: #f9f9fa;
 }
 
-.emotion-15:read-only~.e1b9qdjy2 {
+.emotion-16:read-only~.e1b9qdjy2 {
   background: #f9f9fa;
 }
 
-.emotion-15:disabled {
+.emotion-16:disabled {
   color: #b5b7bd;
   background: #f3f3f4;
   cursor: not-allowed;
   border-block: 1px solid #e9eaeb;
 }
 
-.emotion-15:disabled~.e1b9qdjy2 {
+.emotion-16:disabled~.e1b9qdjy2 {
   background: #f3f3f4;
   cursor: not-allowed;
   -webkit-user-select: none;
@@ -8164,12 +8165,12 @@ exports[`NumberInputV2 > should renders correctly with label 1`] = `
   user-select: none;
 }
 
-.emotion-15:placeholder-shown~.e1b9qdjy2 {
+.emotion-16:placeholder-shown~.e1b9qdjy2 {
   color: #727683;
   font-size: 1rem;
 }
 
-.emotion-15[data-controls='false'] {
+.emotion-16[data-controls='false'] {
   text-align: left;
 }
 
@@ -8180,14 +8181,14 @@ exports[`NumberInputV2 > should renders correctly with label 1`] = `
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
         for=":ra:"
       >
         Label
       </label>
       <div>
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-5 emotion-6"
           data-controls="true"
           data-disabled="false"
           data-error="false"
@@ -8196,16 +8197,16 @@ exports[`NumberInputV2 > should renders correctly with label 1`] = `
           data-unit="false"
         >
           <div
-            class="emotion-6 emotion-7"
+            class="emotion-7 emotion-8"
             data-size="large"
           >
             <button
               aria-label="minus"
-              class="emotion-8 emotion-9"
+              class="emotion-9 emotion-10"
               type="button"
             >
               <svg
-                class="emotion-10 emotion-11"
+                class="emotion-11 emotion-12"
                 viewBox="0 0 16 16"
                 xmlns="http://www.w3.org/2000/svg"
               >
@@ -8216,10 +8217,10 @@ exports[`NumberInputV2 > should renders correctly with label 1`] = `
             </button>
           </div>
           <div
-            class="emotion-12 emotion-13 emotion-14"
+            class="emotion-13 emotion-14 emotion-15"
           >
             <input
-              class="emotion-15 emotion-16"
+              class="emotion-16 emotion-17"
               data-controls="true"
               data-has-unit="false"
               data-size="large"
@@ -8231,16 +8232,16 @@ exports[`NumberInputV2 > should renders correctly with label 1`] = `
             />
           </div>
           <div
-            class="emotion-6 emotion-7"
+            class="emotion-7 emotion-8"
             data-size="large"
           >
             <button
               aria-label="plus"
-              class="emotion-8 emotion-9"
+              class="emotion-9 emotion-10"
               type="button"
             >
               <svg
-                class="emotion-10 emotion-11"
+                class="emotion-11 emotion-12"
                 viewBox="0 0 16 16"
                 xmlns="http://www.w3.org/2000/svg"
               >
@@ -8305,8 +8306,8 @@ exports[`NumberInputV2 > should renders correctly with label description 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -8315,9 +8316,10 @@ exports[`NumberInputV2 > should renders correctly with label description 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-6 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8336,52 +8338,52 @@ exports[`NumberInputV2 > should renders correctly with label description 1`] = `
   border-radius: 0.25rem;
 }
 
-.emotion-6:focus-within {
+.emotion-7:focus-within {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-6[data-success='true'] {
+.emotion-7[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-6[data-error='true'] {
+.emotion-7[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-6:hover {
+.emotion-7:hover {
   border-color: #792dd4;
 }
 
-.emotion-6[data-readonly='true'] {
+.emotion-7[data-readonly='true'] {
   border-color: #d9dadd;
   background: #f9f9fa;
   cursor: not-allowed;
 }
 
-.emotion-6[data-disabled='true'] {
+.emotion-7[data-disabled='true'] {
   border-color: #e9eaeb;
   background: #f3f3f4;
   cursor: not-allowed;
 }
 
-.emotion-6[data-controls='false']>.emotion-14 {
+.emotion-7[data-controls='false']>.emotion-15 {
   border-width: 0;
 }
 
-.emotion-6[data-size='small'] {
+.emotion-7[data-size='small'] {
   height: 2rem;
 }
 
-.emotion-6[data-size='medium'] {
+.emotion-7[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-6[data-size='large'] {
+.emotion-7[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8405,20 +8407,20 @@ exports[`NumberInputV2 > should renders correctly with label description 1`] = `
   padding: 0.125rem 0.5rem;
 }
 
-.emotion-8[data-size='small'] {
+.emotion-9[data-size='small'] {
   height: 2rem;
 }
 
-.emotion-8[data-size='medium'] {
+.emotion-9[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-8[data-size='large'] {
+.emotion-9[data-size='large'] {
   height: 3rem;
   padding: 0.25rem 0.5rem;
 }
 
-.emotion-10 {
+.emotion-11 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -8457,22 +8459,22 @@ exports[`NumberInputV2 > should renders correctly with label description 1`] = `
   color: #3f4250;
 }
 
-.emotion-10:hover {
+.emotion-11:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-10:active {
+.emotion-11:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-10:hover,
-.emotion-10:active {
+.emotion-11:hover,
+.emotion-11:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-12 {
+.emotion-13 {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -8481,16 +8483,16 @@ exports[`NumberInputV2 > should renders correctly with label description 1`] = `
   min-height: 16px;
 }
 
-.emotion-12 .fillStroke {
+.emotion-13 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
 
-.emotion-12 path {
+.emotion-13 path {
   fill: currentColor;
 }
 
-.emotion-15 {
+.emotion-16 {
   display: grid;
   grid-template-columns: 1fr auto;
   -webkit-align-items: center;
@@ -8507,7 +8509,7 @@ exports[`NumberInputV2 > should renders correctly with label description 1`] = `
   width: 100%;
 }
 
-.emotion-17 {
+.emotion-18 {
   outline: none;
   border: none;
   padding: 0;
@@ -8522,18 +8524,18 @@ exports[`NumberInputV2 > should renders correctly with label description 1`] = `
   background: none;
 }
 
-.emotion-17[data-has-unit='true'] {
+.emotion-18[data-has-unit='true'] {
   text-align: left;
   padding: 0.5rem 0 0.5rem 0.5rem;
 }
 
-.emotion-17::-webkit-outer-spin-button,
-.emotion-17::-webkit-inner-spin-button {
+.emotion-18::-webkit-outer-spin-button,
+.emotion-18::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
-.emotion-17 {
+.emotion-18 {
   -moz-appearance: textfield;
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
@@ -8541,15 +8543,15 @@ exports[`NumberInputV2 > should renders correctly with label description 1`] = `
   appearance: textfield;
 }
 
-.emotion-17[data-size='small'] {
+.emotion-18[data-size='small'] {
   height: 2rem;
 }
 
-.emotion-17[data-size='medium'] {
+.emotion-18[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-17[data-size='large'] {
+.emotion-18[data-size='large'] {
   height: 3rem;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -8557,34 +8559,34 @@ exports[`NumberInputV2 > should renders correctly with label description 1`] = `
   line-height: 1.5rem;
 }
 
-.emotion-17:-moz-read-only {
+.emotion-18:-moz-read-only {
   color: #3f4250;
   background: #f9f9fa;
   border-block: 1px solid #d9dadd;
 }
 
-.emotion-17:read-only {
+.emotion-18:read-only {
   color: #3f4250;
   background: #f9f9fa;
   border-block: 1px solid #d9dadd;
 }
 
-.emotion-17:-moz-read-only~.e1b9qdjy2 {
+.emotion-18:-moz-read-only~.e1b9qdjy2 {
   background: #f9f9fa;
 }
 
-.emotion-17:read-only~.e1b9qdjy2 {
+.emotion-18:read-only~.e1b9qdjy2 {
   background: #f9f9fa;
 }
 
-.emotion-17:disabled {
+.emotion-18:disabled {
   color: #b5b7bd;
   background: #f3f3f4;
   cursor: not-allowed;
   border-block: 1px solid #e9eaeb;
 }
 
-.emotion-17:disabled~.e1b9qdjy2 {
+.emotion-18:disabled~.e1b9qdjy2 {
   background: #f3f3f4;
   cursor: not-allowed;
   -webkit-user-select: none;
@@ -8593,12 +8595,12 @@ exports[`NumberInputV2 > should renders correctly with label description 1`] = `
   user-select: none;
 }
 
-.emotion-17:placeholder-shown~.e1b9qdjy2 {
+.emotion-18:placeholder-shown~.e1b9qdjy2 {
   color: #727683;
   font-size: 1rem;
 }
 
-.emotion-17[data-controls='false'] {
+.emotion-18[data-controls='false'] {
   text-align: left;
 }
 
@@ -8612,7 +8614,7 @@ exports[`NumberInputV2 > should renders correctly with label description 1`] = `
         class="emotion-2 emotion-1"
       >
         <label
-          class="emotion-4 emotion-5"
+          class="emotion-4 emotion-5 emotion-6"
           for=":rf:"
         />
         <div>
@@ -8621,7 +8623,7 @@ exports[`NumberInputV2 > should renders correctly with label description 1`] = `
       </div>
       <div>
         <div
-          class="emotion-6 emotion-7"
+          class="emotion-7 emotion-8"
           data-controls="true"
           data-disabled="false"
           data-error="false"
@@ -8630,16 +8632,16 @@ exports[`NumberInputV2 > should renders correctly with label description 1`] = `
           data-unit="false"
         >
           <div
-            class="emotion-8 emotion-9"
+            class="emotion-9 emotion-10"
             data-size="large"
           >
             <button
               aria-label="minus"
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
               type="button"
             >
               <svg
-                class="emotion-12 emotion-13"
+                class="emotion-13 emotion-14"
                 viewBox="0 0 16 16"
                 xmlns="http://www.w3.org/2000/svg"
               >
@@ -8650,10 +8652,10 @@ exports[`NumberInputV2 > should renders correctly with label description 1`] = `
             </button>
           </div>
           <div
-            class="emotion-14 emotion-15 emotion-16"
+            class="emotion-15 emotion-16 emotion-17"
           >
             <input
-              class="emotion-17 emotion-18"
+              class="emotion-18 emotion-19"
               data-controls="true"
               data-has-unit="false"
               data-size="large"
@@ -8665,16 +8667,16 @@ exports[`NumberInputV2 > should renders correctly with label description 1`] = `
             />
           </div>
           <div
-            class="emotion-8 emotion-9"
+            class="emotion-9 emotion-10"
             data-size="large"
           >
             <button
               aria-label="plus"
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
               type="button"
             >
               <svg
-                class="emotion-12 emotion-13"
+                class="emotion-13 emotion-14"
                 viewBox="0 0 16 16"
                 xmlns="http://www.w3.org/2000/svg"
               >
diff --git a/packages/ui/src/components/Pagination/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Pagination/__tests__/__snapshots__/index.test.tsx.snap
index 4e0e3ec443..ff85efa497 100644
--- a/packages/ui/src/components/Pagination/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Pagination/__tests__/__snapshots__/index.test.tsx.snap
@@ -2741,12 +2741,16 @@ exports[`Pagination > should render correctly with perPage - default values 1`]
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-13[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-13[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-13[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-13[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-13[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -2805,6 +2809,7 @@ exports[`Pagination > should render correctly with perPage - default values 1`]
   text-decoration: none;
   text-overflow: ellipsis;
   overflow: hidden;
+  white-space: nowrap;
 }
 
 .emotion-18 {
@@ -3145,7 +3150,7 @@ exports[`Pagination > should render correctly with perPage - default values 1`]
             aria-describedby=":r1f:"
             class="emotion-9 emotion-10"
             data-container-full-width="true"
-            tabindex="0"
+            tabindex="-1"
           >
             <div
               class="emotion-11 emotion-1"
@@ -3451,12 +3456,16 @@ exports[`Pagination > should render correctly with perPage 1`] = `
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-13[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-13[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-13[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-13[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-13[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -3515,6 +3524,7 @@ exports[`Pagination > should render correctly with perPage 1`] = `
   text-decoration: none;
   text-overflow: ellipsis;
   overflow: hidden;
+  white-space: nowrap;
 }
 
 .emotion-18 {
@@ -3855,7 +3865,7 @@ exports[`Pagination > should render correctly with perPage 1`] = `
             aria-describedby=":r1u:"
             class="emotion-9 emotion-10"
             data-container-full-width="true"
-            tabindex="0"
+            tabindex="-1"
           >
             <div
               class="emotion-11 emotion-1"
diff --git a/packages/ui/src/components/Popup/index.tsx b/packages/ui/src/components/Popup/index.tsx
index ceab3c60e2..bf44e6fd33 100644
--- a/packages/ui/src/components/Popup/index.tsx
+++ b/packages/ui/src/components/Popup/index.tsx
@@ -307,16 +307,30 @@ export const Popup = forwardRef(
      * popup from dom.
      */
     const closePopup = useCallback(() => {
-      debounceTimer.current = setTimeout(
-        () => {
+      const closeFunction = () => {
+        if (!disableAnimation) {
           setReverseAnimation(true)
+
           timer.current = setTimeout(() => {
-            unmountPopupFromDom()
             onClose?.()
+            unmountPopupFromDom()
           }, animationDuration)
-        },
-        debounceDelay && !disableAnimation ? debounceDelay : 0,
-      )
+        } else {
+          onClose?.()
+          unmountPopupFromDom()
+        }
+      }
+
+      if (!disableAnimation) {
+        debounceTimer.current = setTimeout(
+          () => {
+            closeFunction()
+          },
+          debounceDelay && !disableAnimation ? debounceDelay : 0,
+        )
+      } else {
+        closeFunction()
+      }
     }, [
       animationDuration,
       disableAnimation,
diff --git a/packages/ui/src/components/ProgressBar/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/ProgressBar/__tests__/__snapshots__/index.test.tsx.snap
index af78034e90..0a47e21856 100644
--- a/packages/ui/src/components/ProgressBar/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/ProgressBar/__tests__/__snapshots__/index.test.tsx.snap
@@ -211,8 +211,8 @@ exports[`ProgressBar > renders correctly with label, labelDescription and showPr
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
-  color: #222638;
+.emotion-7 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -221,9 +221,10 @@ exports[`ProgressBar > renders correctly with label, labelDescription and showPr
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: text;
 }
 
-.emotion-8 {
+.emotion-9 {
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -234,7 +235,7 @@ exports[`ProgressBar > renders correctly with label, labelDescription and showPr
   text-decoration: none;
 }
 
-.emotion-10 {
+.emotion-11 {
   color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
@@ -247,7 +248,7 @@ exports[`ProgressBar > renders correctly with label, labelDescription and showPr
   text-align: right;
 }
 
-.emotion-12 {
+.emotion-13 {
   overflow: hidden;
   position: relative;
   height: 0.25rem;
@@ -258,7 +259,7 @@ exports[`ProgressBar > renders correctly with label, labelDescription and showPr
   width: 100%;
 }
 
-.emotion-14 {
+.emotion-15 {
   border-radius: 0.25rem;
   position: absolute;
   top: 0;
@@ -283,18 +284,18 @@ exports[`ProgressBar > renders correctly with label, labelDescription and showPr
           class="emotion-4 emotion-1"
         >
           <label
-            class="emotion-6 emotion-7"
+            class="emotion-6 emotion-7 emotion-8"
           >
             Label
           </label>
           <span
-            class="emotion-8 emotion-7"
+            class="emotion-9 emotion-8"
           >
             Label
           </span>
         </div>
         <label
-          class="emotion-10 emotion-7"
+          class="emotion-11 emotion-8"
         >
           40%
         </label>
@@ -303,11 +304,11 @@ exports[`ProgressBar > renders correctly with label, labelDescription and showPr
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="40"
-        class="emotion-12 emotion-13"
+        class="emotion-13 emotion-14"
         role="progressbar"
       >
         <div
-          class="emotion-14 emotion-15"
+          class="emotion-15 emotion-16"
         />
       </div>
     </div>
@@ -363,8 +364,8 @@ exports[`ProgressBar > renders correctly with label, labelDescription and showPr
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -373,9 +374,10 @@ exports[`ProgressBar > renders correctly with label, labelDescription and showPr
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: text;
 }
 
-.emotion-6 {
+.emotion-7 {
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -386,7 +388,7 @@ exports[`ProgressBar > renders correctly with label, labelDescription and showPr
   text-decoration: none;
 }
 
-.emotion-8 {
+.emotion-9 {
   overflow: hidden;
   position: relative;
   height: 0.25rem;
@@ -397,7 +399,7 @@ exports[`ProgressBar > renders correctly with label, labelDescription and showPr
   width: 100%;
 }
 
-.emotion-10 {
+.emotion-11 {
   border-radius: 0.25rem;
   position: absolute;
   top: 0;
@@ -409,7 +411,7 @@ exports[`ProgressBar > renders correctly with label, labelDescription and showPr
   width: 40%;
 }
 
-.emotion-12 {
+.emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -435,7 +437,7 @@ exports[`ProgressBar > renders correctly with label, labelDescription and showPr
   width: fit-content;
 }
 
-.emotion-15 {
+.emotion-16 {
   color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
@@ -460,12 +462,12 @@ exports[`ProgressBar > renders correctly with label, labelDescription and showPr
         class="emotion-2 emotion-1"
       >
         <label
-          class="emotion-4 emotion-5"
+          class="emotion-4 emotion-5 emotion-6"
         >
           Label
         </label>
         <span
-          class="emotion-6 emotion-5"
+          class="emotion-7 emotion-6"
         >
           Label
         </span>
@@ -474,18 +476,18 @@ exports[`ProgressBar > renders correctly with label, labelDescription and showPr
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="40"
-        class="emotion-8 emotion-9"
+        class="emotion-9 emotion-10"
         role="progressbar"
       >
         <div
-          class="emotion-10 emotion-11"
+          class="emotion-11 emotion-12"
         />
       </div>
       <div
-        class="emotion-12 emotion-13"
+        class="emotion-13 emotion-14"
       >
         <label
-          class="emotion-14 emotion-15 emotion-5"
+          class="emotion-15 emotion-16 emotion-6"
         >
           40%
         </label>
@@ -566,8 +568,8 @@ exports[`ProgressBar > renders correctly with label, labelDescription as ReactNo
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
-  color: #222638;
+.emotion-7 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -576,9 +578,10 @@ exports[`ProgressBar > renders correctly with label, labelDescription as ReactNo
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: text;
 }
 
-.emotion-8 {
+.emotion-9 {
   overflow: hidden;
   position: relative;
   height: 0.25rem;
@@ -589,7 +592,7 @@ exports[`ProgressBar > renders correctly with label, labelDescription as ReactNo
   width: 100%;
 }
 
-.emotion-10 {
+.emotion-11 {
   border-radius: 0.25rem;
   position: absolute;
   top: 0;
@@ -614,7 +617,7 @@ exports[`ProgressBar > renders correctly with label, labelDescription as ReactNo
           class="emotion-4 emotion-1"
         >
           <label
-            class="emotion-6 emotion-7"
+            class="emotion-6 emotion-7 emotion-8"
           >
             Label
           </label>
@@ -627,11 +630,11 @@ exports[`ProgressBar > renders correctly with label, labelDescription as ReactNo
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="40"
-        class="emotion-8 emotion-9"
+        class="emotion-9 emotion-10"
         role="progressbar"
       >
         <div
-          class="emotion-10 emotion-11"
+          class="emotion-11 emotion-12"
         />
       </div>
     </div>
@@ -687,8 +690,8 @@ exports[`ProgressBar > renders correctly with label, labelDescription as ReactNo
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -697,9 +700,10 @@ exports[`ProgressBar > renders correctly with label, labelDescription as ReactNo
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: text;
 }
 
-.emotion-6 {
+.emotion-7 {
   overflow: hidden;
   position: relative;
   height: 0.25rem;
@@ -710,7 +714,7 @@ exports[`ProgressBar > renders correctly with label, labelDescription as ReactNo
   width: 100%;
 }
 
-.emotion-8 {
+.emotion-9 {
   border-radius: 0.25rem;
   position: absolute;
   top: 0;
@@ -732,7 +736,7 @@ exports[`ProgressBar > renders correctly with label, labelDescription as ReactNo
         class="emotion-2 emotion-1"
       >
         <label
-          class="emotion-4 emotion-5"
+          class="emotion-4 emotion-5 emotion-6"
         >
           Label
         </label>
@@ -744,11 +748,11 @@ exports[`ProgressBar > renders correctly with label, labelDescription as ReactNo
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="40"
-        class="emotion-6 emotion-7"
+        class="emotion-7 emotion-8"
         role="progressbar"
       >
         <div
-          class="emotion-8 emotion-9"
+          class="emotion-9 emotion-10"
         />
       </div>
     </div>
@@ -781,8 +785,8 @@ exports[`ProgressBar > renders correctly with max 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -791,9 +795,10 @@ exports[`ProgressBar > renders correctly with max 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: text;
 }
 
-.emotion-4 {
+.emotion-5 {
   overflow: hidden;
   position: relative;
   height: 0.25rem;
@@ -804,7 +809,7 @@ exports[`ProgressBar > renders correctly with max 1`] = `
   width: 100%;
 }
 
-.emotion-6 {
+.emotion-7 {
   border-radius: 0.25rem;
   position: absolute;
   top: 0;
@@ -823,7 +828,7 @@ exports[`ProgressBar > renders correctly with max 1`] = `
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
       >
         label
       </label>
@@ -831,11 +836,11 @@ exports[`ProgressBar > renders correctly with max 1`] = `
         aria-valuemax="10"
         aria-valuemin="0"
         aria-valuenow="4"
-        class="emotion-4 emotion-5"
+        class="emotion-5 emotion-6"
         role="progressbar"
       >
         <div
-          class="emotion-6 emotion-7"
+          class="emotion-7 emotion-8"
         />
       </div>
     </div>
@@ -891,8 +896,8 @@ exports[`ProgressBar > renders correctly with only label, direction column 1`] =
   width: 100%;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -901,9 +906,10 @@ exports[`ProgressBar > renders correctly with only label, direction column 1`] =
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: text;
 }
 
-.emotion-6 {
+.emotion-7 {
   overflow: hidden;
   position: relative;
   height: 0.25rem;
@@ -914,7 +920,7 @@ exports[`ProgressBar > renders correctly with only label, direction column 1`] =
   width: 100%;
 }
 
-.emotion-8 {
+.emotion-9 {
   border-radius: 0.25rem;
   position: absolute;
   top: 0;
@@ -936,7 +942,7 @@ exports[`ProgressBar > renders correctly with only label, direction column 1`] =
         class="emotion-2 emotion-1"
       >
         <label
-          class="emotion-4 emotion-5"
+          class="emotion-4 emotion-5 emotion-6"
         >
           label
         </label>
@@ -945,11 +951,11 @@ exports[`ProgressBar > renders correctly with only label, direction column 1`] =
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="40"
-        class="emotion-6 emotion-7"
+        class="emotion-7 emotion-8"
         role="progressbar"
       >
         <div
-          class="emotion-8 emotion-9"
+          class="emotion-9 emotion-10"
         />
       </div>
     </div>
@@ -1006,8 +1012,8 @@ exports[`ProgressBar > renders correctly with only showProgress, direction colum
   width: 100%;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -1016,9 +1022,10 @@ exports[`ProgressBar > renders correctly with only showProgress, direction colum
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: text;
 }
 
-.emotion-6 {
+.emotion-7 {
   color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
@@ -1031,7 +1038,7 @@ exports[`ProgressBar > renders correctly with only showProgress, direction colum
   text-align: right;
 }
 
-.emotion-8 {
+.emotion-9 {
   overflow: hidden;
   position: relative;
   height: 0.25rem;
@@ -1042,7 +1049,7 @@ exports[`ProgressBar > renders correctly with only showProgress, direction colum
   width: 100%;
 }
 
-.emotion-10 {
+.emotion-11 {
   border-radius: 0.25rem;
   position: absolute;
   top: 0;
@@ -1064,10 +1071,10 @@ exports[`ProgressBar > renders correctly with only showProgress, direction colum
         class="emotion-2 emotion-1"
       >
         <label
-          class="emotion-4 emotion-5"
+          class="emotion-4 emotion-5 emotion-6"
         />
         <label
-          class="emotion-6 emotion-5"
+          class="emotion-7 emotion-6"
         >
           40%
         </label>
@@ -1076,11 +1083,11 @@ exports[`ProgressBar > renders correctly with only showProgress, direction colum
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="40"
-        class="emotion-8 emotion-9"
+        class="emotion-9 emotion-10"
         role="progressbar"
       >
         <div
-          class="emotion-10 emotion-11"
+          class="emotion-11 emotion-12"
         />
       </div>
     </div>
@@ -1256,8 +1263,8 @@ exports[`ProgressBar > renders correctly with suffix and prefix, direction colum
   width: 100%;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -1266,9 +1273,10 @@ exports[`ProgressBar > renders correctly with suffix and prefix, direction colum
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: text;
 }
 
-.emotion-6 {
+.emotion-7 {
   color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
@@ -1281,7 +1289,7 @@ exports[`ProgressBar > renders correctly with suffix and prefix, direction colum
   text-align: right;
 }
 
-.emotion-8 {
+.emotion-9 {
   overflow: hidden;
   position: relative;
   height: 0.25rem;
@@ -1292,7 +1300,7 @@ exports[`ProgressBar > renders correctly with suffix and prefix, direction colum
   width: 100%;
 }
 
-.emotion-10 {
+.emotion-11 {
   border-radius: 0.25rem;
   position: absolute;
   top: 0;
@@ -1314,12 +1322,12 @@ exports[`ProgressBar > renders correctly with suffix and prefix, direction colum
         class="emotion-2 emotion-1"
       >
         <label
-          class="emotion-4 emotion-5"
+          class="emotion-4 emotion-5 emotion-6"
         >
           label
         </label>
         <label
-          class="emotion-6 emotion-5"
+          class="emotion-7 emotion-6"
         >
           prefix40suffix
         </label>
@@ -1328,11 +1336,11 @@ exports[`ProgressBar > renders correctly with suffix and prefix, direction colum
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="40"
-        class="emotion-8 emotion-9"
+        class="emotion-9 emotion-10"
         role="progressbar"
       >
         <div
-          class="emotion-10 emotion-11"
+          class="emotion-11 emotion-12"
         />
       </div>
     </div>
@@ -1365,8 +1373,8 @@ exports[`ProgressBar > renders correctly with suffix and prefix, direction row 1
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -1375,9 +1383,10 @@ exports[`ProgressBar > renders correctly with suffix and prefix, direction row 1
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: text;
 }
 
-.emotion-4 {
+.emotion-5 {
   overflow: hidden;
   position: relative;
   height: 0.25rem;
@@ -1388,7 +1397,7 @@ exports[`ProgressBar > renders correctly with suffix and prefix, direction row 1
   width: 100%;
 }
 
-.emotion-6 {
+.emotion-7 {
   border-radius: 0.25rem;
   position: absolute;
   top: 0;
@@ -1400,7 +1409,7 @@ exports[`ProgressBar > renders correctly with suffix and prefix, direction row 1
   width: 40%;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1426,7 +1435,7 @@ exports[`ProgressBar > renders correctly with suffix and prefix, direction row 1
   width: fit-content;
 }
 
-.emotion-11 {
+.emotion-12 {
   color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
@@ -1448,7 +1457,7 @@ exports[`ProgressBar > renders correctly with suffix and prefix, direction row 1
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
       >
         label
       </label>
@@ -1456,18 +1465,18 @@ exports[`ProgressBar > renders correctly with suffix and prefix, direction row 1
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="40"
-        class="emotion-4 emotion-5"
+        class="emotion-5 emotion-6"
         role="progressbar"
       >
         <div
-          class="emotion-6 emotion-7"
+          class="emotion-7 emotion-8"
         />
       </div>
       <div
-        class="emotion-8 emotion-9"
+        class="emotion-9 emotion-10"
       >
         <label
-          class="emotion-10 emotion-11 emotion-3"
+          class="emotion-11 emotion-12 emotion-4"
         >
           prefix40suffix
         </label>
diff --git a/packages/ui/src/components/Radio/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Radio/__tests__/__snapshots__/index.test.tsx.snap
index b9a943ec07..a4e138bc05 100644
--- a/packages/ui/src/components/Radio/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Radio/__tests__/__snapshots__/index.test.tsx.snap
@@ -185,7 +185,7 @@ exports[`Radio > renders correctly 1`] = `
           aria-disabled="false"
           aria-invalid="false"
           class="emotion-4 emotion-5"
-          id="radio-choice"
+          id=":r0:"
           name="radio"
           type="radio"
           value="choice"
@@ -217,7 +217,7 @@ exports[`Radio > renders correctly 1`] = `
         </svg>
         <label
           class="emotion-12 emotion-13 emotion-14"
-          for="radio-choice"
+          for=":r0:"
         >
           Choice
         </label>
@@ -413,7 +413,7 @@ exports[`Radio > renders correctly when checked 1`] = `
           aria-invalid="false"
           checked=""
           class="emotion-4 emotion-5"
-          id="radio-choice"
+          id=":rc:"
           name="radio"
           type="radio"
           value="choice"
@@ -445,7 +445,7 @@ exports[`Radio > renders correctly when checked 1`] = `
         </svg>
         <label
           class="emotion-12 emotion-13 emotion-14"
-          for="radio-choice"
+          for=":rc:"
         >
           Choice
         </label>
@@ -641,7 +641,7 @@ exports[`Radio > renders correctly when disabled 1`] = `
           aria-invalid="false"
           class="emotion-4 emotion-5"
           disabled=""
-          id="radio-choice"
+          id=":r3:"
           name="radio"
           type="radio"
           value="choice"
@@ -673,7 +673,7 @@ exports[`Radio > renders correctly when disabled 1`] = `
         </svg>
         <label
           class="emotion-12 emotion-13 emotion-14"
-          for="radio-choice"
+          for=":r3:"
         >
           Choice
         </label>
@@ -869,7 +869,7 @@ exports[`Radio > renders correctly when error 1`] = `
           aria-disabled="false"
           aria-invalid="true"
           class="emotion-4 emotion-5"
-          id="radio-choice"
+          id=":rf:"
           name="radio"
           type="radio"
           value="choice"
@@ -901,7 +901,7 @@ exports[`Radio > renders correctly when error 1`] = `
         </svg>
         <label
           class="emotion-12 emotion-13 emotion-14"
-          for="radio-choice"
+          for=":rf:"
         >
           Choice
         </label>
@@ -1109,7 +1109,7 @@ exports[`Radio > renders correctly when helper 1`] = `
           aria-disabled="false"
           aria-invalid="false"
           class="emotion-4 emotion-5"
-          id="radio-choice"
+          id=":ri:"
           name="radio"
           type="radio"
           value="choice"
@@ -1141,7 +1141,7 @@ exports[`Radio > renders correctly when helper 1`] = `
         </svg>
         <label
           class="emotion-12 emotion-13 emotion-14"
-          for="radio-choice"
+          for=":ri:"
         >
           Choice
         </label>
@@ -1355,7 +1355,7 @@ exports[`Radio > renders correctly with tooltip 1`] = `
             aria-disabled="false"
             aria-invalid="false"
             class="emotion-6 emotion-7"
-            id="radio-choice"
+            id=":r6:"
             name="radio"
             type="radio"
             value="choice"
@@ -1387,7 +1387,7 @@ exports[`Radio > renders correctly with tooltip 1`] = `
           </svg>
           <label
             class="emotion-14 emotion-15 emotion-16"
-            for="radio-choice"
+            for=":r6:"
           >
             Choice
           </label>
@@ -1584,8 +1584,7 @@ exports[`Radio > renders without name 1`] = `
           aria-invalid="false"
           class="emotion-4 emotion-5"
           disabled=""
-          id=":r9:-choice"
-          name=":r9:"
+          id=":r9:"
           type="radio"
           value="choice"
         />
@@ -1616,7 +1615,7 @@ exports[`Radio > renders without name 1`] = `
         </svg>
         <label
           class="emotion-12 emotion-13 emotion-14"
-          for=":r9:-choice"
+          for=":r9:"
         >
           Choice
         </label>
diff --git a/packages/ui/src/components/Radio/index.tsx b/packages/ui/src/components/Radio/index.tsx
index 7a3035a2cc..4bd0f0ea3b 100644
--- a/packages/ui/src/components/Radio/index.tsx
+++ b/packages/ui/src/components/Radio/index.tsx
@@ -168,6 +168,7 @@ type RadioProps = {
     | 'required'
     | 'tabIndex'
     | 'checked'
+    | 'onClick'
   > &
   LabelProp
 
@@ -194,11 +195,12 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
       'aria-label': ariaLabel,
       'data-testid': dataTestId,
       tabIndex,
+      id,
     },
     forwadedRef,
   ) => {
-    const id = useId()
-    const computedName = name ?? id
+    const generatedId = useId()
+    const localId = id || generatedId
 
     return (
       <Tooltip text={tooltip}>
@@ -216,14 +218,14 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
               aria-disabled={disabled}
               aria-label={ariaLabel}
               checked={checked}
-              id={`${computedName}-${value}`}
+              id={localId}
               onChange={onChange}
               onFocus={onFocus}
               onKeyDown={onKeyDown}
               onBlur={onBlur}
               value={value}
               disabled={disabled}
-              name={computedName}
+              name={name}
               autoFocus={autoFocus}
               ref={forwadedRef}
               tabIndex={tabIndex}
@@ -238,14 +240,12 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
                     as="label"
                     variant="body"
                     prominence="default"
-                    htmlFor={`${computedName}-${value}`}
+                    htmlFor={localId}
                   >
                     {label}
                   </StyledTextLabel>
                 ) : (
-                  <StyledLabel htmlFor={`${computedName}-${value}`}>
-                    {label}
-                  </StyledLabel>
+                  <StyledLabel htmlFor={id}>{label}</StyledLabel>
                 )}
               </>
             ) : null}
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 6edb66fbd6..eaa834929a 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
@@ -318,7 +318,7 @@ exports[`RadioGroup > renders correctly 1`] = `
                   aria-invalid="false"
                   checked=""
                   class="emotion-16 emotion-17"
-                  id="radio-value-1"
+                  id=":r1:"
                   name="radio"
                   type="radio"
                   value="value-1"
@@ -350,7 +350,7 @@ exports[`RadioGroup > renders correctly 1`] = `
                 </svg>
                 <label
                   class="emotion-24 emotion-25 emotion-9"
-                  for="radio-value-1"
+                  for=":r1:"
                 >
                   Radio 1
                 </label>
@@ -369,7 +369,7 @@ exports[`RadioGroup > renders correctly 1`] = `
                   aria-disabled="false"
                   aria-invalid="false"
                   class="emotion-16 emotion-17"
-                  id="radio-value-2"
+                  id=":r4:"
                   name="radio"
                   type="radio"
                   value="value-2"
@@ -401,7 +401,7 @@ exports[`RadioGroup > renders correctly 1`] = `
                 </svg>
                 <label
                   class="emotion-24 emotion-25 emotion-9"
-                  for="radio-value-2"
+                  for=":r4:"
                 >
                   Radio 2
                 </label>
@@ -733,7 +733,7 @@ exports[`RadioGroup > renders correctly with direction row 1`] = `
                   aria-invalid="false"
                   checked=""
                   class="emotion-16 emotion-17"
-                  id="radio-value-1"
+                  id=":r8:"
                   name="radio"
                   type="radio"
                   value="value-1"
@@ -765,7 +765,7 @@ exports[`RadioGroup > renders correctly with direction row 1`] = `
                 </svg>
                 <label
                   class="emotion-24 emotion-25 emotion-9"
-                  for="radio-value-1"
+                  for=":r8:"
                 >
                   Radio 1
                 </label>
@@ -784,7 +784,7 @@ exports[`RadioGroup > renders correctly with direction row 1`] = `
                   aria-disabled="false"
                   aria-invalid="false"
                   class="emotion-16 emotion-17"
-                  id="radio-value-2"
+                  id=":rb:"
                   name="radio"
                   type="radio"
                   value="value-2"
@@ -816,7 +816,7 @@ exports[`RadioGroup > renders correctly with direction row 1`] = `
                 </svg>
                 <label
                   class="emotion-24 emotion-25 emotion-9"
-                  for="radio-value-2"
+                  for=":rb:"
                 >
                   Radio 2
                 </label>
@@ -1160,7 +1160,7 @@ exports[`RadioGroup > renders correctly with error content 1`] = `
                   aria-invalid="true"
                   checked=""
                   class="emotion-16 emotion-17"
-                  id="radio-value-1"
+                  id=":rn:"
                   name="radio"
                   type="radio"
                   value="value-1"
@@ -1192,7 +1192,7 @@ exports[`RadioGroup > renders correctly with error content 1`] = `
                 </svg>
                 <label
                   class="emotion-24 emotion-25 emotion-9"
-                  for="radio-value-1"
+                  for=":rn:"
                 >
                   Radio 1
                 </label>
@@ -1211,7 +1211,7 @@ exports[`RadioGroup > renders correctly with error content 1`] = `
                   aria-disabled="false"
                   aria-invalid="true"
                   class="emotion-16 emotion-17"
-                  id="radio-value-2"
+                  id=":rq:"
                   name="radio"
                   type="radio"
                   value="value-2"
@@ -1243,7 +1243,7 @@ exports[`RadioGroup > renders correctly with error content 1`] = `
                 </svg>
                 <label
                   class="emotion-24 emotion-25 emotion-9"
-                  for="radio-value-2"
+                  for=":rq:"
                 >
                   Radio 2
                 </label>
@@ -1592,7 +1592,7 @@ exports[`RadioGroup > renders correctly with helper content 1`] = `
                   aria-invalid="false"
                   checked=""
                   class="emotion-16 emotion-17"
-                  id="radio-value-1"
+                  id=":rf:"
                   name="radio"
                   type="radio"
                   value="value-1"
@@ -1624,7 +1624,7 @@ exports[`RadioGroup > renders correctly with helper content 1`] = `
                 </svg>
                 <label
                   class="emotion-24 emotion-25 emotion-9"
-                  for="radio-value-1"
+                  for=":rf:"
                 >
                   Radio 1
                 </label>
@@ -1643,7 +1643,7 @@ exports[`RadioGroup > renders correctly with helper content 1`] = `
                   aria-disabled="false"
                   aria-invalid="false"
                   class="emotion-16 emotion-17"
-                  id="radio-value-2"
+                  id=":ri:"
                   name="radio"
                   type="radio"
                   value="value-2"
@@ -1675,7 +1675,7 @@ exports[`RadioGroup > renders correctly with helper content 1`] = `
                 </svg>
                 <label
                   class="emotion-24 emotion-25 emotion-9"
-                  for="radio-value-2"
+                  for=":ri:"
                 >
                   Radio 2
                 </label>
diff --git a/packages/ui/src/components/SelectInputV2/Dropdown.tsx b/packages/ui/src/components/SelectInputV2/Dropdown.tsx
index adf3cae6ae..6f6d58c75f 100644
--- a/packages/ui/src/components/SelectInputV2/Dropdown.tsx
+++ b/packages/ui/src/components/SelectInputV2/Dropdown.tsx
@@ -847,11 +847,12 @@ export const Dropdown = ({
       maxWidth={maxWidth ?? refSelect.current?.offsetWidth}
       hasArrow={false}
       ref={ref}
-      tabIndex={0}
+      tabIndex={-1}
       role="dialog"
       debounceDelay={0}
       containerFullWidth
       hideOnClickOutside
+      onClose={() => setIsDropdownVisible(false)}
       align="start"
     >
       {children}
diff --git a/packages/ui/src/components/SelectInputV2/SelectBar.tsx b/packages/ui/src/components/SelectInputV2/SelectBar.tsx
index 47bde3dac7..e9b447e0cb 100644
--- a/packages/ui/src/components/SelectInputV2/SelectBar.tsx
+++ b/packages/ui/src/components/SelectInputV2/SelectBar.tsx
@@ -24,7 +24,7 @@ type SelectBarProps = {
   readOnly: boolean
   placeholder: string
   success?: string
-  error?: string
+  error?: string | boolean
   autoFocus?: boolean
   innerRef: RefObject<HTMLDivElement | null>
   id?: string
@@ -51,7 +51,7 @@ const Placeholder = styled(Text)`
 user-select: none;
 `
 
-const StyledInputWrapper = styled(Stack)<{
+export const StyledInputWrapper = styled(Stack)<{
   'data-readonly': boolean
   'data-disabled': boolean
   'data-size': 'small' | 'medium' | 'large'
@@ -87,12 +87,16 @@ const StyledInputWrapper = styled(Stack)<{
       border-color: ${({ theme }) => theme.colors.primary.borderHover};
       box-shadow: ${({ theme }) => theme.shadows.focusPrimary};
     }
-    &:not([data-disabled='true']):hover,
-    :not([data-disabled='true']):focus {
+    &:not([data-disabled='true']):hover {
       border-color: ${({ theme }) => theme.colors.primary.borderHover};
       outline: none;
     }
 
+    &:not([data-disabled='true']):focus-visible {
+      outline: 5px auto Highlight;
+      outline: 5px auto -webkit-focus-ring-color;
+    }
+
     &[data-dropdownvisible='true'] {
     border-color: ${({ theme }) => theme.colors.primary.borderHover};
   }
@@ -139,13 +143,16 @@ const StyledInputWrapper = styled(Stack)<{
     cursor: not-allowed;
   }
 `
+
 const CustomTag = styled(Tag)`
   height: fit-content;
   width: fit-content;
 `
+
 const SelectedValues = styled(Text)`
-text-overflow: ellipsis;
-overflow: hidden;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 `
 
 const isValidSelectedValue = (selectedValue: string, options: DataType) =>
diff --git a/packages/ui/src/components/SelectInputV2/index.tsx b/packages/ui/src/components/SelectInputV2/index.tsx
index 7dc36f7fb2..c788649486 100644
--- a/packages/ui/src/components/SelectInputV2/index.tsx
+++ b/packages/ui/src/components/SelectInputV2/index.tsx
@@ -81,7 +81,7 @@ type SelectInputV2Props<IsMulti extends undefined | boolean = false> = {
   /**
    * Display an error message under the select bar
    */
-  error?: string
+  error?: string | boolean
   /**
    * Display a success message under the select bar
    */
@@ -249,7 +249,7 @@ export const SelectInputV2 = <IsMulti extends undefined | boolean>({
             {helper}
           </HelperText>
         ) : null}
-        {error || success ? (
+        {(error && typeof error === 'string') || success ? (
           <HelperText
             variant="caption"
             as="p"
diff --git a/packages/ui/src/components/SelectableCard/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/SelectableCard/__tests__/__snapshots__/index.test.tsx.snap
index 61f533eb10..88ca4e2d9d 100644
--- a/packages/ui/src/components/SelectableCard/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/SelectableCard/__tests__/__snapshots__/index.test.tsx.snap
@@ -8,9 +8,9 @@ exports[`SelectableCard > renders correctly with aria label 1`] = `
   display: -ms-flexbox;
   display: flex;
   gap: 0.25rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-align-items: start;
   -webkit-box-align: start;
   -ms-flex-align: start;
@@ -23,9 +23,6 @@ exports[`SelectableCard > renders correctly with aria label 1`] = `
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
   padding: 1rem;
   border-radius: 0.25rem;
   -webkit-transition: border-color 200ms ease,box-shadow 200ms ease;
@@ -74,8 +71,8 @@ exports[`SelectableCard > renders correctly with aria label 1`] = `
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-0 .emotion-3,
-.emotion-0 .eqr7bqq1 {
+.emotion-0[data-has-label='true'] .emotion-3,
+.emotion-0[data-has-label='true'] .eqr7bqq1 {
   width: 100%;
 }
 
@@ -124,6 +121,7 @@ exports[`SelectableCard > renders correctly with aria label 1`] = `
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
+  pointer-events: none;
 }
 
 .emotion-5[aria-disabled='false'],
@@ -318,7 +316,7 @@ exports[`SelectableCard > renders correctly with aria label 1`] = `
             aria-invalid="false"
             aria-label="test"
             class="emotion-7 emotion-8"
-            id="radio-choice"
+            id=":r5:"
             name="radio"
             tabindex="-1"
             type="radio"
@@ -370,9 +368,9 @@ exports[`SelectableCard > renders correctly with checkbox type 1`] = `
   display: -ms-flexbox;
   display: flex;
   gap: 0.25rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-align-items: start;
   -webkit-box-align: start;
   -ms-flex-align: start;
@@ -385,9 +383,6 @@ exports[`SelectableCard > renders correctly with checkbox type 1`] = `
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
   padding: 1rem;
   border-radius: 0.25rem;
   -webkit-transition: border-color 200ms ease,box-shadow 200ms ease;
@@ -436,8 +431,8 @@ exports[`SelectableCard > renders correctly with checkbox type 1`] = `
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-0 .ehkrmld6,
-.emotion-0 .emotion-4 {
+.emotion-0[data-has-label='true'] .ehkrmld6,
+.emotion-0[data-has-label='true'] .emotion-4 {
   width: 100%;
 }
 
@@ -754,6 +749,7 @@ exports[`SelectableCard > renders correctly with checkbox type 1`] = `
           class="emotion-5 emotion-6"
           id=":r8:"
           name="checkbox"
+          tabindex="-1"
           type="checkbox"
           value="choice"
         />
@@ -804,9 +800,9 @@ exports[`SelectableCard > renders correctly with checkbox type and checked prop
   display: -ms-flexbox;
   display: flex;
   gap: 0.25rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-align-items: start;
   -webkit-box-align: start;
   -ms-flex-align: start;
@@ -819,9 +815,6 @@ exports[`SelectableCard > renders correctly with checkbox type and checked prop
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
   padding: 1rem;
   border-radius: 0.25rem;
   -webkit-transition: border-color 200ms ease,box-shadow 200ms ease;
@@ -870,8 +863,8 @@ exports[`SelectableCard > renders correctly with checkbox type and checked prop
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-0 .ehkrmld6,
-.emotion-0 .emotion-4 {
+.emotion-0[data-has-label='true'] .ehkrmld6,
+.emotion-0[data-has-label='true'] .emotion-4 {
   width: 100%;
 }
 
@@ -1189,6 +1182,7 @@ exports[`SelectableCard > renders correctly with checkbox type and checked prop
           class="emotion-5 emotion-6"
           id=":rk:"
           name="radio"
+          tabindex="-1"
           type="checkbox"
           value="choice"
         />
@@ -1239,9 +1233,9 @@ exports[`SelectableCard > renders correctly with checkbox type and disabled prop
   display: -ms-flexbox;
   display: flex;
   gap: 0.25rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-align-items: start;
   -webkit-box-align: start;
   -ms-flex-align: start;
@@ -1254,9 +1248,6 @@ exports[`SelectableCard > renders correctly with checkbox type and disabled prop
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
   padding: 1rem;
   border-radius: 0.25rem;
   -webkit-transition: border-color 200ms ease,box-shadow 200ms ease;
@@ -1305,8 +1296,8 @@ exports[`SelectableCard > renders correctly with checkbox type and disabled prop
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-0 .ehkrmld6,
-.emotion-0 .emotion-4 {
+.emotion-0[data-has-label='true'] .ehkrmld6,
+.emotion-0[data-has-label='true'] .emotion-4 {
   width: 100%;
 }
 
@@ -1623,6 +1614,7 @@ exports[`SelectableCard > renders correctly with checkbox type and disabled prop
           disabled=""
           id=":rq:"
           name="radio"
+          tabindex="-1"
           type="checkbox"
           value="choice"
         />
@@ -1739,8 +1731,8 @@ exports[`SelectableCard > renders correctly with checkbox type and isError prop
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-0 .ehkrmld6,
-.emotion-0 .emotion-4 {
+.emotion-0[data-has-label='true'] .ehkrmld6,
+.emotion-0[data-has-label='true'] .emotion-4 {
   width: 100%;
 }
 
@@ -2120,6 +2112,7 @@ exports[`SelectableCard > renders correctly with checkbox type and isError prop
           class="emotion-5 emotion-6"
           id=":rt:"
           name="radio"
+          tabindex="-1"
           type="checkbox"
           value="choice"
         />
@@ -2284,8 +2277,8 @@ exports[`SelectableCard > renders correctly with checkbox type and tooltip prop
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-4 .ehkrmld6,
-.emotion-4 .emotion-8 {
+.emotion-4[data-has-label='true'] .ehkrmld6,
+.emotion-4[data-has-label='true'] .emotion-8 {
   width: 100%;
 }
 
@@ -2672,6 +2665,7 @@ exports[`SelectableCard > renders correctly with checkbox type and tooltip prop
               class="emotion-9 emotion-10"
               id=":r19:"
               name="checkbox"
+              tabindex="-1"
               type="checkbox"
               value="choice"
             />
@@ -2804,8 +2798,8 @@ exports[`SelectableCard > renders correctly with complex children 1`] = `
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-0 .ehkrmld6,
-.emotion-0 .emotion-4 {
+.emotion-0[data-has-label='true'] .ehkrmld6,
+.emotion-0[data-has-label='true'] .emotion-4 {
   width: 100%;
 }
 
@@ -3183,6 +3177,7 @@ exports[`SelectableCard > renders correctly with complex children 1`] = `
           disabled=""
           id=":r1d:"
           name="radio"
+          tabindex="-1"
           type="checkbox"
           value="choice"
         />
@@ -3317,8 +3312,8 @@ exports[`SelectableCard > renders correctly with default props 1`] = `
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-0 .emotion-3,
-.emotion-0 .eqr7bqq1 {
+.emotion-0[data-has-label='true'] .emotion-3,
+.emotion-0[data-has-label='true'] .eqr7bqq1 {
   width: 100%;
 }
 
@@ -3367,6 +3362,7 @@ exports[`SelectableCard > renders correctly with default props 1`] = `
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
+  pointer-events: none;
 }
 
 .emotion-5[aria-disabled='false'],
@@ -3571,7 +3567,7 @@ exports[`SelectableCard > renders correctly with default props 1`] = `
             aria-disabled="false"
             aria-invalid="false"
             class="emotion-7 emotion-8"
-            id="radio-choice"
+            id=":r1:"
             name="radio"
             tabindex="-1"
             type="radio"
@@ -3604,7 +3600,7 @@ exports[`SelectableCard > renders correctly with default props 1`] = `
           </svg>
           <label
             class="emotion-15 emotion-16 emotion-17"
-            for="radio-choice"
+            for=":r1:"
           >
             test
           </label>
@@ -3695,8 +3691,8 @@ exports[`SelectableCard > renders correctly with illustration 1`] = `
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-0 .emotion-7,
-.emotion-0 .eqr7bqq1 {
+.emotion-0[data-has-label='true'] .emotion-7,
+.emotion-0[data-has-label='true'] .eqr7bqq1 {
   width: 100%;
 }
 
@@ -3772,8 +3768,8 @@ exports[`SelectableCard > renders correctly with illustration 1`] = `
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-0 .emotion-7,
-.emotion-0 .eqr7bqq1 {
+.emotion-0[data-has-label='true'] .emotion-7,
+.emotion-0[data-has-label='true'] .eqr7bqq1 {
   width: 100%;
 }
 
@@ -3899,6 +3895,7 @@ exports[`SelectableCard > renders correctly with illustration 1`] = `
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
+  pointer-events: none;
 }
 
 .emotion-9[aria-disabled='false'],
@@ -4280,8 +4277,9 @@ exports[`SelectableCard > renders correctly with illustration 1`] = `
                 aria-disabled="false"
                 aria-invalid="false"
                 class="emotion-11 emotion-12"
-                id="label-14-label-14"
+                id=":r1l:"
                 name="label-14"
+                tabindex="-1"
                 type="radio"
                 value="label-14"
               />
@@ -4312,7 +4310,7 @@ exports[`SelectableCard > renders correctly with illustration 1`] = `
               </svg>
               <label
                 class="emotion-19 emotion-20 emotion-21"
-                for="label-14-label-14"
+                for=":r1l:"
               >
                 label
               </label>
@@ -4418,8 +4416,8 @@ exports[`SelectableCard > renders correctly with productIcon 1`] = `
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-0 .emotion-7,
-.emotion-0 .eqr7bqq1 {
+.emotion-0[data-has-label='true'] .emotion-7,
+.emotion-0[data-has-label='true'] .eqr7bqq1 {
   width: 100%;
 }
 
@@ -4495,8 +4493,8 @@ exports[`SelectableCard > renders correctly with productIcon 1`] = `
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-0 .emotion-7,
-.emotion-0 .eqr7bqq1 {
+.emotion-0[data-has-label='true'] .emotion-7,
+.emotion-0[data-has-label='true'] .eqr7bqq1 {
   width: 100%;
 }
 
@@ -4622,6 +4620,7 @@ exports[`SelectableCard > renders correctly with productIcon 1`] = `
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
+  pointer-events: none;
 }
 
 .emotion-9[aria-disabled='false'],
@@ -4996,8 +4995,9 @@ exports[`SelectableCard > renders correctly with productIcon 1`] = `
                 aria-disabled="false"
                 aria-invalid="false"
                 class="emotion-11 emotion-12"
-                id="label-14-label-14"
+                id=":r1p:"
                 name="label-14"
+                tabindex="-1"
                 type="radio"
                 value="label-14"
               />
@@ -5028,7 +5028,7 @@ exports[`SelectableCard > renders correctly with productIcon 1`] = `
               </svg>
               <label
                 class="emotion-19 emotion-20 emotion-21"
-                for="label-14-label-14"
+                for=":r1p:"
               >
                 label
               </label>
@@ -5102,9 +5102,9 @@ exports[`SelectableCard > renders correctly with radio type and checked prop 1`]
   display: -ms-flexbox;
   display: flex;
   gap: 0.25rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-align-items: start;
   -webkit-box-align: start;
   -ms-flex-align: start;
@@ -5117,9 +5117,6 @@ exports[`SelectableCard > renders correctly with radio type and checked prop 1`]
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
   padding: 1rem;
   border-radius: 0.25rem;
   -webkit-transition: border-color 200ms ease,box-shadow 200ms ease;
@@ -5168,8 +5165,8 @@ exports[`SelectableCard > renders correctly with radio type and checked prop 1`]
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-0 .emotion-3,
-.emotion-0 .eqr7bqq1 {
+.emotion-0[data-has-label='true'] .emotion-3,
+.emotion-0[data-has-label='true'] .eqr7bqq1 {
   width: 100%;
 }
 
@@ -5218,6 +5215,7 @@ exports[`SelectableCard > renders correctly with radio type and checked prop 1`]
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
+  pointer-events: none;
 }
 
 .emotion-5[aria-disabled='false'],
@@ -5413,7 +5411,7 @@ exports[`SelectableCard > renders correctly with radio type and checked prop 1`]
             aria-label="test"
             checked=""
             class="emotion-7 emotion-8"
-            id="radio-choice"
+            id=":rh:"
             name="radio"
             tabindex="-1"
             type="radio"
@@ -5465,9 +5463,9 @@ exports[`SelectableCard > renders correctly with radio type and disabled prop 1`
   display: -ms-flexbox;
   display: flex;
   gap: 0.25rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-align-items: start;
   -webkit-box-align: start;
   -ms-flex-align: start;
@@ -5480,9 +5478,6 @@ exports[`SelectableCard > renders correctly with radio type and disabled prop 1`
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
   padding: 1rem;
   border-radius: 0.25rem;
   -webkit-transition: border-color 200ms ease,box-shadow 200ms ease;
@@ -5531,8 +5526,8 @@ exports[`SelectableCard > renders correctly with radio type and disabled prop 1`
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-0 .emotion-3,
-.emotion-0 .eqr7bqq1 {
+.emotion-0[data-has-label='true'] .emotion-3,
+.emotion-0[data-has-label='true'] .eqr7bqq1 {
   width: 100%;
 }
 
@@ -5581,6 +5576,7 @@ exports[`SelectableCard > renders correctly with radio type and disabled prop 1`
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
+  pointer-events: none;
 }
 
 .emotion-5[aria-disabled='false'],
@@ -5775,7 +5771,7 @@ exports[`SelectableCard > renders correctly with radio type and disabled prop 1`
             aria-label="test"
             class="emotion-7 emotion-8"
             disabled=""
-            id="radio-choice"
+            id=":rn:"
             name="radio"
             tabindex="-1"
             type="radio"
@@ -5893,8 +5889,8 @@ exports[`SelectableCard > renders correctly with radio type and isError prop 1`]
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-0 .emotion-3,
-.emotion-0 .eqr7bqq1 {
+.emotion-0[data-has-label='true'] .emotion-3,
+.emotion-0[data-has-label='true'] .eqr7bqq1 {
   width: 100%;
 }
 
@@ -5943,6 +5939,7 @@ exports[`SelectableCard > renders correctly with radio type and isError prop 1`]
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
+  pointer-events: none;
 }
 
 .emotion-5[aria-disabled='false'],
@@ -6149,7 +6146,7 @@ exports[`SelectableCard > renders correctly with radio type and isError prop 1`]
             aria-disabled="false"
             aria-invalid="true"
             class="emotion-7 emotion-8"
-            id="radio-choice"
+            id=":r11:"
             name="radio"
             tabindex="-1"
             type="radio"
@@ -6182,7 +6179,7 @@ exports[`SelectableCard > renders correctly with radio type and isError prop 1`]
           </svg>
           <label
             class="emotion-15 emotion-16 emotion-17"
-            for="radio-choice"
+            for=":r11:"
           >
             test
           </label>
@@ -6307,8 +6304,8 @@ exports[`SelectableCard > renders correctly with radio type and tooltip prop 1`]
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-4 .emotion-7,
-.emotion-4 .eqr7bqq1 {
+.emotion-4[data-has-label='true'] .emotion-7,
+.emotion-4[data-has-label='true'] .eqr7bqq1 {
   width: 100%;
 }
 
@@ -6357,6 +6354,7 @@ exports[`SelectableCard > renders correctly with radio type and tooltip prop 1`]
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
+  pointer-events: none;
 }
 
 .emotion-9[aria-disabled='false'],
@@ -6570,7 +6568,7 @@ exports[`SelectableCard > renders correctly with radio type and tooltip prop 1`]
                 aria-disabled="false"
                 aria-invalid="false"
                 class="emotion-11 emotion-12"
-                id="radio-choice"
+                id=":r15:"
                 name="radio"
                 tabindex="-1"
                 type="radio"
@@ -6603,7 +6601,7 @@ exports[`SelectableCard > renders correctly with radio type and tooltip prop 1`]
               </svg>
               <label
                 class="emotion-19 emotion-20 emotion-21"
-                for="radio-choice"
+                for=":r15:"
               >
                 test
               </label>
@@ -6630,9 +6628,9 @@ exports[`SelectableCard > renders correctly with showTick and type checkbox 1`]
   display: -ms-flexbox;
   display: flex;
   gap: 0.25rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-align-items: start;
   -webkit-box-align: start;
   -ms-flex-align: start;
@@ -6645,9 +6643,6 @@ exports[`SelectableCard > renders correctly with showTick and type checkbox 1`]
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
   padding: 1rem;
   border-radius: 0.25rem;
   -webkit-transition: border-color 200ms ease,box-shadow 200ms ease;
@@ -6696,8 +6691,8 @@ exports[`SelectableCard > renders correctly with showTick and type checkbox 1`]
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-0 .ehkrmld6,
-.emotion-0 .emotion-4 {
+.emotion-0[data-has-label='true'] .ehkrmld6,
+.emotion-0[data-has-label='true'] .emotion-4 {
   width: 100%;
 }
 
@@ -7006,6 +7001,7 @@ exports[`SelectableCard > renders correctly with showTick and type checkbox 1`]
           class="emotion-5 emotion-6"
           id=":re:"
           name="checkbox"
+          tabindex="-1"
           type="checkbox"
           value="choice"
         />
@@ -7056,9 +7052,9 @@ exports[`SelectableCard > renders correctly with showTick and type radio 1`] = `
   display: -ms-flexbox;
   display: flex;
   gap: 0.25rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-align-items: start;
   -webkit-box-align: start;
   -ms-flex-align: start;
@@ -7071,9 +7067,6 @@ exports[`SelectableCard > renders correctly with showTick and type radio 1`] = `
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
   padding: 1rem;
   border-radius: 0.25rem;
   -webkit-transition: border-color 200ms ease,box-shadow 200ms ease;
@@ -7122,8 +7115,8 @@ exports[`SelectableCard > renders correctly with showTick and type radio 1`] = `
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-0 .emotion-3,
-.emotion-0 .eqr7bqq1 {
+.emotion-0[data-has-label='true'] .emotion-3,
+.emotion-0[data-has-label='true'] .eqr7bqq1 {
   width: 100%;
 }
 
@@ -7172,6 +7165,7 @@ exports[`SelectableCard > renders correctly with showTick and type radio 1`] = `
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
+  pointer-events: none;
 }
 
 .emotion-5[aria-disabled='false'],
@@ -7358,8 +7352,9 @@ exports[`SelectableCard > renders correctly with showTick and type radio 1`] = `
             aria-invalid="false"
             aria-label="test"
             class="emotion-7 emotion-8"
-            id="checkbox-choice"
+            id=":rb:"
             name="checkbox"
+            tabindex="-1"
             type="radio"
             value="choice"
           />
diff --git a/packages/ui/src/components/SelectableCard/index.tsx b/packages/ui/src/components/SelectableCard/index.tsx
index d2158ab719..aa01a0518f 100644
--- a/packages/ui/src/components/SelectableCard/index.tsx
+++ b/packages/ui/src/components/SelectableCard/index.tsx
@@ -75,8 +75,10 @@ const Container = styled(Stack)`
     }
   }
 
-  ${RadioStack}, ${CheckboxContainer} {
-    width: 100%;
+  &[data-has-label='true'] {
+    ${RadioStack}, ${CheckboxContainer} {
+      width: 100%;
+    }
   }
 `
 const StyledDiv = styled.div`
@@ -149,7 +151,10 @@ const StyledElement = styled('div', {
   }
 `
 
-const StyledRadio = StyledElement.withComponent(Radio)
+const OverloadedRadio = StyledElement.withComponent(Radio)
+const StyledRadio = styled(OverloadedRadio)`
+  pointer-events: none;
+`
 const OverloadedCheckbox = StyledElement.withComponent(Checkbox)
 const StyledCheckbox = styled(OverloadedCheckbox)`
   label {
@@ -348,9 +353,9 @@ export const SelectableCard = forwardRef(
           data-image={image}
           ref={ref}
           alignItems="start"
-          direction="column"
+          direction={label ? 'column' : 'row'}
           gap={0.5}
-          flex={1}
+          flex={label ? 1 : undefined}
           tabIndex={disabled ? undefined : 0}
           role="button"
         >
@@ -370,7 +375,7 @@ export const SelectableCard = forwardRef(
                 id={id}
                 ref={innerRef}
                 data-error={isError}
-                tabIndex={!showTick ? -1 : undefined}
+                tabIndex={-1}
                 {...(label ? { label } : { 'aria-label': ariaLabel as string })}
               />
             ) : (
@@ -388,6 +393,7 @@ export const SelectableCard = forwardRef(
                 id={id}
                 ref={innerRef}
                 data-error={isError}
+                tabIndex={-1}
                 {...(label
                   ? { children: label, 'aria-label': undefined }
                   : { 'aria-label': ariaLabel as string })}
diff --git a/packages/ui/src/components/SelectableCardGroup/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/SelectableCardGroup/__tests__/__snapshots__/index.test.tsx.snap
index 4b5f79488f..9b9f7c43c7 100644
--- a/packages/ui/src/components/SelectableCardGroup/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/SelectableCardGroup/__tests__/__snapshots__/index.test.tsx.snap
@@ -151,8 +151,8 @@ exports[`SelectableCardGroup > renders correctly 1`] = `
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-10 .ehkrmld6,
-.emotion-10 .emotion-14 {
+.emotion-10[data-has-label='true'] .ehkrmld6,
+.emotion-10[data-has-label='true'] .emotion-14 {
   width: 100%;
 }
 
@@ -517,6 +517,7 @@ exports[`SelectableCardGroup > renders correctly 1`] = `
                   class="emotion-15 emotion-16"
                   id=":r2:"
                   name="checkbox"
+                  tabindex="-1"
                   type="checkbox"
                   value="value-1"
                 />
@@ -586,6 +587,7 @@ exports[`SelectableCardGroup > renders correctly 1`] = `
                   class="emotion-15 emotion-16"
                   id=":r6:"
                   name="checkbox"
+                  tabindex="-1"
                   type="checkbox"
                   value="value-2"
                 />
@@ -791,8 +793,8 @@ exports[`SelectableCardGroup > renders correctly as a radio 1`] = `
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-10 .emotion-13,
-.emotion-10 .eqr7bqq1 {
+.emotion-10[data-has-label='true'] .emotion-13,
+.emotion-10[data-has-label='true'] .eqr7bqq1 {
   width: 100%;
 }
 
@@ -841,6 +843,7 @@ exports[`SelectableCardGroup > renders correctly as a radio 1`] = `
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
+  pointer-events: none;
 }
 
 .emotion-15[aria-disabled='false'],
@@ -1045,7 +1048,7 @@ exports[`SelectableCardGroup > renders correctly as a radio 1`] = `
                     aria-invalid="true"
                     checked=""
                     class="emotion-17 emotion-18"
-                    id="radio-value-1"
+                    id=":r1h:"
                     name="radio"
                     tabindex="-1"
                     type="radio"
@@ -1078,7 +1081,7 @@ exports[`SelectableCardGroup > renders correctly as a radio 1`] = `
                   </svg>
                   <label
                     class="emotion-25 emotion-26 emotion-7"
-                    for="radio-value-1"
+                    for=":r1h:"
                   >
                     Radio 1
                   </label>
@@ -1109,7 +1112,7 @@ exports[`SelectableCardGroup > renders correctly as a radio 1`] = `
                     aria-disabled="false"
                     aria-invalid="true"
                     class="emotion-17 emotion-18"
-                    id="radio-value-2"
+                    id=":r1l:"
                     name="radio"
                     tabindex="-1"
                     type="radio"
@@ -1142,7 +1145,7 @@ exports[`SelectableCardGroup > renders correctly as a radio 1`] = `
                   </svg>
                   <label
                     class="emotion-25 emotion-26 emotion-7"
-                    for="radio-value-2"
+                    for=":r1l:"
                   >
                     Radio 2
                   </label>
@@ -1328,8 +1331,8 @@ exports[`SelectableCardGroup > renders correctly required and showTick 1`] = `
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-13 .ehkrmld6,
-.emotion-13 .emotion-17 {
+.emotion-13[data-has-label='true'] .ehkrmld6,
+.emotion-13[data-has-label='true'] .emotion-17 {
   width: 100%;
 }
 
@@ -1698,6 +1701,7 @@ exports[`SelectableCardGroup > renders correctly required and showTick 1`] = `
                   class="emotion-18 emotion-19"
                   id=":ru:"
                   name="checkbox"
+                  tabindex="-1"
                   type="checkbox"
                   value="value-1"
                 />
@@ -1767,6 +1771,7 @@ exports[`SelectableCardGroup > renders correctly required and showTick 1`] = `
                   class="emotion-18 emotion-19"
                   id=":r12:"
                   name="checkbox"
+                  tabindex="-1"
                   type="checkbox"
                   value="value-2"
                 />
@@ -1972,8 +1977,8 @@ exports[`SelectableCardGroup > renders correctly with direction multiple columns
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-10 .ehkrmld6,
-.emotion-10 .emotion-14 {
+.emotion-10[data-has-label='true'] .ehkrmld6,
+.emotion-10[data-has-label='true'] .emotion-14 {
   width: 100%;
 }
 
@@ -2338,6 +2343,7 @@ exports[`SelectableCardGroup > renders correctly with direction multiple columns
                   class="emotion-15 emotion-16"
                   id=":rb:"
                   name="checkbox"
+                  tabindex="-1"
                   type="checkbox"
                   value="value-1"
                 />
@@ -2407,6 +2413,7 @@ exports[`SelectableCardGroup > renders correctly with direction multiple columns
                   class="emotion-15 emotion-16"
                   id=":rf:"
                   name="checkbox"
+                  tabindex="-1"
                   type="checkbox"
                   value="value-2"
                 />
@@ -2612,8 +2619,8 @@ exports[`SelectableCardGroup > renders correctly with error content 1`] = `
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-10 .ehkrmld6,
-.emotion-10 .emotion-14 {
+.emotion-10[data-has-label='true'] .ehkrmld6,
+.emotion-10[data-has-label='true'] .emotion-14 {
   width: 100%;
 }
 
@@ -2991,6 +2998,7 @@ exports[`SelectableCardGroup > renders correctly with error content 1`] = `
                   class="emotion-15 emotion-16"
                   id=":r17:"
                   name="checkbox"
+                  tabindex="-1"
                   type="checkbox"
                   value="value-1"
                 />
@@ -3061,6 +3069,7 @@ exports[`SelectableCardGroup > renders correctly with error content 1`] = `
                   class="emotion-15 emotion-16"
                   id=":r1b:"
                   name="checkbox"
+                  tabindex="-1"
                   type="checkbox"
                   value="value-2"
                 />
@@ -3271,8 +3280,8 @@ exports[`SelectableCardGroup > renders correctly with helper content 1`] = `
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-10 .ehkrmld6,
-.emotion-10 .emotion-14 {
+.emotion-10[data-has-label='true'] .ehkrmld6,
+.emotion-10[data-has-label='true'] .emotion-14 {
   width: 100%;
 }
 
@@ -3649,6 +3658,7 @@ exports[`SelectableCardGroup > renders correctly with helper content 1`] = `
                   class="emotion-15 emotion-16"
                   id=":rk:"
                   name="checkbox"
+                  tabindex="-1"
                   type="checkbox"
                   value="value-1"
                 />
@@ -3718,6 +3728,7 @@ exports[`SelectableCardGroup > renders correctly with helper content 1`] = `
                   class="emotion-15 emotion-16"
                   id=":ro:"
                   name="checkbox"
+                  tabindex="-1"
                   type="checkbox"
                   value="value-2"
                 />
diff --git a/packages/ui/src/components/SelectableCardGroup/__tests__/index.test.tsx b/packages/ui/src/components/SelectableCardGroup/__tests__/index.test.tsx
index 42b9f1b6fd..51a89acf97 100644
--- a/packages/ui/src/components/SelectableCardGroup/__tests__/index.test.tsx
+++ b/packages/ui/src/components/SelectableCardGroup/__tests__/index.test.tsx
@@ -91,7 +91,7 @@ describe('SelectableCardGroup', () => {
       </SelectableCardGroup>,
     ))
 
-  test('throws if SelectableCardGroup.Card sed without SelectableCardGroup', () => {
+  test('throws if SelectableCardGroup.Card is used without SelectableCardGroup', () => {
     expect(() =>
       render(<SelectableCardGroup.Card value="value-1" label="Checkbox 1" />),
     ).toThrow(
diff --git a/packages/ui/src/components/SelectableCardOptionGroup/Provider.ts b/packages/ui/src/components/SelectableCardOptionGroup/Provider.ts
new file mode 100644
index 0000000000..6b9f2282b6
--- /dev/null
+++ b/packages/ui/src/components/SelectableCardOptionGroup/Provider.ts
@@ -0,0 +1,39 @@
+import type { ComponentProps, InputHTMLAttributes } from 'react'
+import { createContext, useContext } from 'react'
+import type { SelectInputV2 } from '../SelectInputV2'
+import type { Sizes } from './types'
+
+type SelectableCardOptionGroupContextType = {
+  groupName?: string
+  groupValue?: string
+  error: boolean
+  onChangeOption: (value: string) => void
+  disabled?: boolean
+  size: Sizes
+  optionValue?: ComponentProps<typeof SelectInputV2>['value']
+} & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange'>> &
+  Pick<InputHTMLAttributes<HTMLInputElement>, 'required'>
+
+export const SelectableCardOptionGroupContext =
+  createContext<SelectableCardOptionGroupContextType>({
+    groupName: '',
+    onChange: () => {},
+    onChangeOption: () => {},
+    required: false,
+    error: false,
+    disabled: false,
+    size: 'large',
+    optionValue: '',
+  })
+
+export const useSelectableCardOptionGroup = () => {
+  const context = useContext(SelectableCardOptionGroupContext)
+
+  if (!context) {
+    throw new Error(
+      'SelectableCardOptionGroup.Option must be used inside a SelectableCardOptionGroup',
+    )
+  }
+
+  return context
+}
diff --git a/packages/ui/src/components/SelectableCardOptionGroup/__stories__/Columns.stories.tsx b/packages/ui/src/components/SelectableCardOptionGroup/__stories__/Columns.stories.tsx
new file mode 100644
index 0000000000..15cff9c22e
--- /dev/null
+++ b/packages/ui/src/components/SelectableCardOptionGroup/__stories__/Columns.stories.tsx
@@ -0,0 +1,26 @@
+import { Template } from './Template.stories'
+
+export const Columns = Template.bind({})
+
+Columns.args = {
+  ...Template.args,
+  columns: 2,
+  legend: 'Choose your OS (2 columns)',
+}
+
+Columns.decorators = [
+  Story => (
+    <div style={{ height: '550px' }}>
+      <Story />
+    </div>
+  ),
+]
+
+Columns.parameters = {
+  docs: {
+    description: {
+      story:
+        'You can set the number of columns you want using `columns` prop. If you set 2 columns and you have 3 items, the 3rd one will be in a new row.',
+    },
+  },
+}
diff --git a/packages/ui/src/components/SelectableCardOptionGroup/__stories__/Disabled.stories.tsx b/packages/ui/src/components/SelectableCardOptionGroup/__stories__/Disabled.stories.tsx
new file mode 100644
index 0000000000..e2fd67a396
--- /dev/null
+++ b/packages/ui/src/components/SelectableCardOptionGroup/__stories__/Disabled.stories.tsx
@@ -0,0 +1,7 @@
+import { Template } from './Template.stories'
+
+export const Disabled = Template.bind({})
+
+Disabled.args = { ...Template.args, disabled: true }
+
+Disabled.decorators = Template.decorators
diff --git a/packages/ui/src/components/SelectableCardOptionGroup/__stories__/Error.stories.tsx b/packages/ui/src/components/SelectableCardOptionGroup/__stories__/Error.stories.tsx
new file mode 100644
index 0000000000..ef976a4d06
--- /dev/null
+++ b/packages/ui/src/components/SelectableCardOptionGroup/__stories__/Error.stories.tsx
@@ -0,0 +1,7 @@
+import { Template } from './Template.stories'
+
+export const Error = Template.bind({})
+
+Error.args = { ...Template.args, error: 'Please select an option' }
+
+Error.decorators = Template.decorators
diff --git a/packages/ui/src/components/SelectableCardOptionGroup/__stories__/Examples.stories.tsx b/packages/ui/src/components/SelectableCardOptionGroup/__stories__/Examples.stories.tsx
new file mode 100644
index 0000000000..967805fc59
--- /dev/null
+++ b/packages/ui/src/components/SelectableCardOptionGroup/__stories__/Examples.stories.tsx
@@ -0,0 +1,115 @@
+import type { StoryFn } from '@storybook/react'
+import { useState } from 'react'
+import { SelectableCardOptionGroup } from '..'
+import { Badge } from '../../Badge'
+import { Stack } from '../../Stack'
+import { Text } from '../../Text'
+import centos from './assets/centos.svg'
+import debian from './assets/debian.svg'
+import ubuntu from './assets/ubuntu.svg'
+import { centosOptions, debianOptions, ubuntuOptionsLegacy } from './constants'
+
+export const Examples: StoryFn<typeof SelectableCardOptionGroup> = args => {
+  const [value, onChange] = useState<string>()
+  const [option, onChangeOption] = useState<string>()
+
+  return (
+    <Stack direction="column" gap={8}>
+      <SelectableCardOptionGroup
+        {...args}
+        value={value}
+        optionValue={option}
+        onChangeOption={(newValue: string) => onChangeOption(newValue)}
+        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+          onChange(event.currentTarget.value)
+        }
+        size="large"
+        columns={4}
+      >
+        <SelectableCardOptionGroup.Option
+          value="ubuntu"
+          label="Ubuntu"
+          labelDescription={
+            <Badge sentiment="primary" size="small">
+              NEW
+            </Badge>
+          }
+          options={ubuntuOptionsLegacy}
+          image={ubuntu}
+        >
+          <Text
+            as="p"
+            variant="bodySmall"
+            sentiment="neutral"
+            prominence="weak"
+            placement="center"
+          >
+            New versions has been added recently
+          </Text>
+        </SelectableCardOptionGroup.Option>
+        <SelectableCardOptionGroup.Option
+          value="debian"
+          label="Debian"
+          options={debianOptions}
+          image={debian}
+        >
+          <Text
+            as="p"
+            variant="bodySmall"
+            sentiment="neutral"
+            prominence="weak"
+            placement="center"
+          >
+            Easy to configure and maintain
+          </Text>
+        </SelectableCardOptionGroup.Option>
+        <SelectableCardOptionGroup.Option
+          value="centos"
+          label="CentOS"
+          options={centosOptions}
+          image={centos}
+        >
+          <Text
+            as="p"
+            variant="bodySmall"
+            sentiment="neutral"
+            prominence="weak"
+            placement="center"
+          >
+            Used by many enterprises
+          </Text>
+        </SelectableCardOptionGroup.Option>
+      </SelectableCardOptionGroup>
+      <Stack>
+        <Text as="h2" variant="bodyStrong">
+          Debug:
+        </Text>
+        <Text as="p" variant="body">
+          Selected OS:{' '}
+          <Text as="span" variant="bodyStrong">
+            {value}
+          </Text>
+        </Text>
+        <Text as="p" variant="body">
+          Selected OS version:{' '}
+          <Text as="span" variant="bodyStrong">
+            {option}
+          </Text>
+        </Text>
+      </Stack>
+    </Stack>
+  )
+}
+
+Examples.args = {
+  legend: 'Choose your OS',
+  helper: 'Choose the OS and version you need to install on your server',
+}
+
+Examples.decorators = [
+  Story => (
+    <div style={{ height: '400px' }}>
+      <Story />
+    </div>
+  ),
+]
diff --git a/packages/ui/src/components/SelectableCardOptionGroup/__stories__/Playground.stories.tsx b/packages/ui/src/components/SelectableCardOptionGroup/__stories__/Playground.stories.tsx
new file mode 100644
index 0000000000..2a04c4d722
--- /dev/null
+++ b/packages/ui/src/components/SelectableCardOptionGroup/__stories__/Playground.stories.tsx
@@ -0,0 +1,22 @@
+import { Template } from './Template.stories'
+
+export const Playground = Template.bind({})
+
+Playground.args = { ...Template.args }
+
+Playground.decorators = Template.decorators
+
+Playground.parameters = {
+  docs: {
+    description: {
+      story: `SelectableCardOptionGroup is a complex component made out of 2 components (SelectableCard and SelectInputV2). Therefore there is 2 value and 2 onChange to handle:
+- \`value\`: The current value of the SelectableCard component.
+- \`valueOption\`: The current value of the SelectInputV2 component.
+- \`onChange\`: The handler function to update the value of the SelectableCard component.
+- \`onChangeOption\`: The handler function to update the value of the SelectInputV2 component.
+
+**Be aware that once you click on the component, the first value of options will be selected by default.**
+      `,
+    },
+  },
+}
diff --git a/packages/ui/src/components/SelectableCardOptionGroup/__stories__/Sizes.stories.tsx b/packages/ui/src/components/SelectableCardOptionGroup/__stories__/Sizes.stories.tsx
new file mode 100644
index 0000000000..16a347767d
--- /dev/null
+++ b/packages/ui/src/components/SelectableCardOptionGroup/__stories__/Sizes.stories.tsx
@@ -0,0 +1,111 @@
+import type { StoryFn } from '@storybook/react'
+import { useState } from 'react'
+import { SelectableCardOptionGroup } from '..'
+import { Stack } from '../../Stack'
+import { Text } from '../../Text'
+import centos from './assets/centos.svg'
+import debian from './assets/debian.svg'
+import ubuntu from './assets/ubuntu.svg'
+import { centosOptions, debianOptions, ubuntuOptions } from './constants'
+
+export const Sizes: StoryFn<typeof SelectableCardOptionGroup> = args => {
+  const [value, onChange] = useState<string>()
+  const [option, onChangeOption] = useState<string>()
+
+  return (
+    <Stack direction="column" gap={8}>
+      <Stack direction="column" gap={4}>
+        <SelectableCardOptionGroup
+          {...args}
+          legend={`${args.legend} (large)`}
+          value={value}
+          optionValue={option}
+          onChangeOption={(newValue: string) => onChangeOption(newValue)}
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+            onChange(event.currentTarget.value)
+          }
+          size="large"
+        >
+          <SelectableCardOptionGroup.Option
+            value="ubuntu"
+            label="Ubuntu"
+            options={ubuntuOptions}
+            image={ubuntu}
+          />
+          <SelectableCardOptionGroup.Option
+            value="debian"
+            label="Debian"
+            options={debianOptions}
+            image={debian}
+          />
+          <SelectableCardOptionGroup.Option
+            value="centos"
+            label="CentOS"
+            options={centosOptions}
+            image={centos}
+          />
+        </SelectableCardOptionGroup>
+        <SelectableCardOptionGroup
+          {...args}
+          value={value}
+          optionValue={option}
+          onChangeOption={(newValue: string) => onChangeOption(newValue)}
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+            onChange(event.currentTarget.value)
+          }
+          size="medium"
+          legend={`${args.legend} (medium)`}
+        >
+          <SelectableCardOptionGroup.Option
+            value="ubuntu"
+            label="Ubuntu"
+            options={ubuntuOptions}
+            image={ubuntu}
+          />
+          <SelectableCardOptionGroup.Option
+            value="debian"
+            label="Debian"
+            options={debianOptions}
+            image={debian}
+          />
+          <SelectableCardOptionGroup.Option
+            value="centos"
+            label="CentOS"
+            options={centosOptions}
+            image={centos}
+          />
+        </SelectableCardOptionGroup>
+      </Stack>
+      <Stack>
+        <Text as="h2" variant="bodyStrong">
+          Debug:
+        </Text>
+        <Text as="p" variant="body">
+          Selected OS:{' '}
+          <Text as="span" variant="bodyStrong">
+            {value}
+          </Text>
+        </Text>
+        <Text as="p" variant="body">
+          Selected OS version:{' '}
+          <Text as="span" variant="bodyStrong">
+            {option}
+          </Text>
+        </Text>
+      </Stack>
+    </Stack>
+  )
+}
+
+Sizes.args = {
+  legend: 'Choose your OS',
+  helper: 'Choose the OS and version you need to install on your server',
+}
+
+Sizes.decorators = [
+  Story => (
+    <div style={{ height: '600px' }}>
+      <Story />
+    </div>
+  ),
+]
diff --git a/packages/ui/src/components/SelectableCardOptionGroup/__stories__/Template.stories.tsx b/packages/ui/src/components/SelectableCardOptionGroup/__stories__/Template.stories.tsx
new file mode 100644
index 0000000000..28a2312a30
--- /dev/null
+++ b/packages/ui/src/components/SelectableCardOptionGroup/__stories__/Template.stories.tsx
@@ -0,0 +1,80 @@
+import type { StoryFn } from '@storybook/react'
+import { useState } from 'react'
+import { SelectableCardOptionGroup } from '..'
+import { Stack } from '../../Stack'
+import { Text } from '../../Text'
+import centos from './assets/centos.svg'
+import debian from './assets/debian.svg'
+import ubuntu from './assets/ubuntu.svg'
+import { centosOptions, debianOptions, ubuntuOptions } from './constants'
+
+export const Template: StoryFn<typeof SelectableCardOptionGroup> = args => {
+  const [value, onChange] = useState<string>()
+  const [option, onChangeOption] = useState<string>()
+
+  return (
+    <Stack direction="column" gap={8}>
+      <SelectableCardOptionGroup
+        {...args}
+        value={value}
+        optionValue={option}
+        onChangeOption={(newValue: string) => {
+          onChangeOption(newValue)
+        }}
+        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+          console.log('ok')
+          onChange(event.currentTarget.value)
+        }}
+      >
+        <SelectableCardOptionGroup.Option
+          value="ubuntu"
+          label="Ubuntu"
+          options={ubuntuOptions}
+          image={ubuntu}
+        />
+        <SelectableCardOptionGroup.Option
+          value="debian"
+          label="Debian"
+          options={debianOptions}
+          image={debian}
+        />
+        <SelectableCardOptionGroup.Option
+          value="centos"
+          label="CentOS"
+          options={centosOptions}
+          image={centos}
+        />
+      </SelectableCardOptionGroup>
+      <Stack>
+        <Text as="h2" variant="bodyStrong">
+          Debug:
+        </Text>
+        <Text as="p" variant="body">
+          Selected OS:{' '}
+          <Text as="span" variant="bodyStrong">
+            {value}
+          </Text>
+        </Text>
+        <Text as="p" variant="body">
+          Selected OS version:{' '}
+          <Text as="span" variant="bodyStrong">
+            {option}
+          </Text>
+        </Text>
+      </Stack>
+    </Stack>
+  )
+}
+
+Template.args = {
+  legend: 'Choose your OS',
+  helper: 'Choose the OS and version you need to install on your server',
+}
+
+Template.decorators = [
+  Story => (
+    <div style={{ height: '350px' }}>
+      <Story />
+    </div>
+  ),
+]
diff --git a/packages/ui/src/components/SelectableCardOptionGroup/__stories__/assets/centos.svg b/packages/ui/src/components/SelectableCardOptionGroup/__stories__/assets/centos.svg
new file mode 100644
index 0000000000..92cb5b3869
--- /dev/null
+++ b/packages/ui/src/components/SelectableCardOptionGroup/__stories__/assets/centos.svg
@@ -0,0 +1,9 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="40" height="40" fill="url(#pattern0_18586_112473)"/>
+<defs>
+<pattern id="pattern0_18586_112473" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_18586_112473" transform="scale(0.01)"/>
+</pattern>
+<image id="image0_18586_112473" width="100" height="100" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAK3ElEQVR4Ae3d728UxxkH8LT9H/qylUJs0tL2VaSqb5r2XdVXadUXVUXaNCltSdWSvmnAlSKlUkAySI0EVAnllwPGNhBccDAkwW1pbMWGGI7gGNtng2MTgW3sw8bYPp/vvtUzu4+ZW+/e/prZ2zt2pWHs893eznzueXZ2d2554olkSXog6YEq7wEAX6JS5c2sjOaZGP8AQCVBKSebhAFzSVDKBSJjZG+eBJUEpUwaJsZeAiCITHOtKBIK/S1JX1H5ACjGaHoKGSrNtXKk7I1qex7r93HESFCi/1wA2FOUphjBWhdHyp7ot/QxeEfPGIyToOj7VPjGSFC0Yuz2lKYYwVoXR8pufVv6GKwZQDgMxklQwn9alGE8TigAvgbgBQ3lQ0pTucnLeNizFQ+7/7KmzHdtMY49uMOl+mH3q1hM7Vxbru3Cysx1WjUtXQC2aijPhP84BlwDgOfMxkVe5RenHEFWMjci3x7pDV8J2J3hX8YgH33+Glr7fxq6DE+/J9o1er8Drf0/c1zf+Gwn3EDuXPkcB7673bYc/N4ODLVdE+/V13LJ9jlOr3V6vOU5cfKA1ll+kLNDv8L+3m+GKn0TR0QHDd47hQO93yq5rpGZdleQ2903sfvJbY5lz1N16D/xiXjP1OEux+eVWof8t4bv14t1VQWIHwyCVwFCnakSpWpA+ibe8RwZHIWqQNagHAoeKVUBEgRDZYRwyimKlIAoFQ8SFEMHiIpIqWiQvokG32mK05UukDUoBzt97egrFGQD/O7AZQj+WeU+hNMW10Xpi0Zf6+o8wVQsSP9kkxkd72J/74aSw1sGsNY6QQjgs+PGcPj60e5qB6FjlQ24MdUcCkUbiIzR6B2DoqtCI4QPHsOhaAFxw6DUVSJ9VQjIBlCKSt35p01qklFO+kpfykEIo+WyiNrrdpGxrg6UvkqlsAoAMTBEK4ESKC1m+vKOohRExjjWszYKCKOxm5vhiBJzkEcYdG7qZuZ90SDnSPGHogzEB0b95iOgQotdpMQYpBiDThQevPJtzygDUydc05cSEMJovmR0sEtkEMSbT24TxQklpiBrMXjI6g3luOggN5TQIBJGX5NDmjrWI7aFMfg4hWDsUGII4oyhGiUUSAiMUigxA3lBjKboI+V2PUNFpAQGWVeHviYjTfmNDMbg2hopDc/uFBEVi+sho5kOsTFuGH4ihdIWLXbpKxBIEcYl29EUIdFiTVOMYK1llMHWq+K15Qb5CW+FV4wgKDemjhft6H2DCAyjsylC1hzgSX/3isE4MorZF38Of3E8wBrMrwSco40Yn/2f62VXhpBrL+mLI0VG8QUidbYrxsvGaIo722tNKG9uMc7RAeiM/KsQJgZ9W0ks7UO/tjkS59MkpesgKJ5BJAwa4tpHhrFPqX/5CP5e4hq8G05dTR13B9XRfZNLxhjvGhYbEXaSgz+UFozMnHOf5NBzE9fNoasrxh+OhsIgLAZJpcYYRj+KjEEzNto3H1UCQmnMD8rs0pgryPzEnNi2KDBkkO3b23DypHFeTGukWDHoQs7Z3xmnEsJGCO9XvKAM3jO+S1hYWUSmqcZmslwNCksZA6Plsm2a4iP0nX9sDB0ZnMo4Qt54ow1Pr9+qF8UOgzZENYjXSJnLjosOX0ofs6DUgB6j5eHkXGQYcoQQSG3Nq/pQnDB0gXhBoX0IUFikjn+E8ggDwPTtHstEOekIfdef1EWGXYQQiBaUUhg6QdxQaJRVQH4SwAFG4cgwH0sVzVwkDPN6x64t6jHsIkQ5ihuGDJJZHMHk/DUN5VMsrdw3UtDyxOr6l3IZBqFbaggU8STjZ3oslZ1fwt2rY7ibGsPCvXnx5+npeZw+1IkTezuUl3PmUT6nLAZREileMAjk3Z/vMxpNDddVUuNYzCyY/Y0vANDVIipn6XjW3Nb9AKiI76YDoOmQ/DyKJBDGtdQYaFiqs7yypVGkKxkkFIpXDAKJquyt+SvS7avf69hhPbFgbnPRjQLMx0T00DCURj7WTor6d9+jrzhiMLobiowURwzG94wSZww/KGY7KH2JY4E4RAZjcO0JpRJA5FmFdBQsRwX/XDUg1KA4o1gxaFsZwVqb7YjV/sNXdMgNiiOKHwxuSxxRPKUqboBce0V5b1MDVrI55DSXQr7Aw958oVDIGgUTvM0AdgDYLP3eAxSyRkGeXpzP57G8nNNbsjn87fXTtqO5wBhSo+gAS1zzoDO79CnlnSvXfC6ro6MfTU3dyktzczdGRsRhBNLpu2g23+PWrSmsrOQf0LaaGNTnpCZQ6MAwvzCJbLpJlPzsiADNz40gO2w8xn9TVo+eEe+h5cDQKwqDbNz4tu2ngvNmkFr+RB1r/Bjrax8dR5w69YkAYYxbmQ9w90EvgQgUAslN9EhngmuQHTGmGK3e8Ez6Xru411bI32fPPGsLIrdDyen4UulLF4jcCCsG4RIIpS3qAZoVSaftG64+I6OMF4PQDc5qkB02ZkjqQLEDkduhBMMtUnSAyI2wwyCQwcE74tPIGHw9RUJBfu6WFCHmHec0olhB5HYoxSiFohpEboQTxttv/Udg5PM5ERmMwTWh5PLGua+Fy69FhiKDyO3QguGEwpdwVexD5Ea4YXxxewZLyw8cJ1bMLAyhsEyXcAtwRjG+NKQqfTFIZJdw7VB4kkNYED8Y5899itbW3pIg0wsD4sY1dPOaqFAYJNJJDnYolD9++fy+wKMsvxjfeHqb2KmXihABMtGD+ye+I2CiQJlt+6FIpeY/+mecMAbX5uhLTJS7eHEg0OntIBg8yvICQsNZbyjGJLfA6au5Fstj7QwS/UQ5CWV1Kqnfaw5BMfyCaEcpvlsdoZRnKimh8O2ZLlz4THw6vKKEwQgCog1FwsiO/osjpPy3Z3p+4z7QyIgWN5SwGEFBPKOkPaYvCWMp3YjZMz+IDwiNsujUhhuKCowwIMpQLBh0FoBHWeX+OoK4xR8Pe0uhqMIICxIaxQaD1hlLEOosOxSVGCpAvKLwXK/V0ZcDRqxB7FBov0KL2xE4HfTRcQato1Shk4teh73UWU7Fy5BYRiEYWmifYZ1XHNsI4Y6UI0UlBq1fFYjfSHHCiH2EWFFURQavVyWId5RG28jg6It9hHDnUaRQ4d+55rO2XtMUv45q1SBeUaxpijGorhgQuSP55zAYukC8oTjvjyoWJCyGTpAwKBUJQsPfM6eviJFKw+HONWmMI8it1pGyVtNP83osj50X27jY/5bjCG31+eYoriJBqKNpWMsohw99FAhFG4jAECew4QeDcCoWRAWKFpAQGBUPEhZFOUhIjKoACYOiFEQBRtWABEVRBqIIo6pAgqAoAVGIETuQ+vp2vPTSgVBl06ZD6P7YuFXHhx/0lVxXV1fa9eTiSmYA8/990b5c/I05+QHIjp21f47Tax0ep/+WyVzKf8WQtyTKOptznpdFs07KuJQV5KsAfqS4/BjAv6lDRzMXcD79W9vSPvSi40S5toFf2L7m/eHf4858L1vRRF/V207r+zpPAqmaGsBXAIg729D/pMDTRMPU8n1UaNZ81XRWVA1RiZJgKFJTgZJgKMLg1YRBSTC4FxXXQVASDMUI1tX5QUkwrL2n6XcvKAmGps53Wm0plATDqdc0P26HkmBo7nS31RejvLP632EkB31uPafx7zKKeT4kOQLX2N+eVi2hJBieeiyCJwH4cgRvk7xF0gNJD5S9B/4PaQv3ck2g594AAAAASUVORK5CYII="/>
+</defs>
+</svg>
diff --git a/packages/ui/src/components/SelectableCardOptionGroup/__stories__/assets/debian.svg b/packages/ui/src/components/SelectableCardOptionGroup/__stories__/assets/debian.svg
new file mode 100644
index 0000000000..4a300e588d
--- /dev/null
+++ b/packages/ui/src/components/SelectableCardOptionGroup/__stories__/assets/debian.svg
@@ -0,0 +1,9 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="40" height="40" fill="url(#pattern0_18586_23790)"/>
+<defs>
+<pattern id="pattern0_18586_23790" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_18586_23790" transform="scale(0.01)"/>
+</pattern>
+<image id="image0_18586_23790" width="100" height="100" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAALu0lEQVR4Ae1dCYwkVRnu8Yq7OzNd//O+8L42UVC80BjXC1yZnen6H+CdiPcRFY1HjAE0imIUMYKoES8iKojJajRKRJfbXdyd3e76n4IG7wUVD1hxQWUX873u6q2prumuqn41VT1Tm2yqpuu9/6z33v/+41WjUf+rJVBLoJZALYFaArUEagnUEqglUEugahLYObPl3o1GY2rPjP8Yo/zjO7TwhKrRuOrpMY2N9zDkv8Io/pko/rcofatR+k6j9HZR/BVR+lOBap3QaR5LEMbO9fwA47WOWJzefB9R/Lr2LD8DSlz1giqawWDD/P1E+R8SxX/uKQBKSP5P/FtDumOI/xZtI6T/0/2bbxDiLxjlv2hbY9PdiqZ9VcE3s/OPEo+/aIhvjwrX1T0ULIo/DIWvKsG5ZiZQCw8Rpb9qSN/hSvgj4OwXzz9DlP96Q3yeKP0dodbLXPM1cfB2No68u/H4VKP0/hECTJ6ulpvGcvyOKa7TbB15ZWN+ZuIE6YJgM72wUUi3y1ZEDP9+Q3yaIX7/TnpB0wWflYcBKygg/rxRvC8mjMJHQRZ8Qvo3MstPrbxAxyEQZqiQ/kcWwUTbWsuJ+DIhfbaQ/zFYT4Gn32GIXx6QP2c8njdNPk7If6sh/yOi+CKj+FeG+GAUTtp7If1frDPj8FzZvgHxsdhLpBVGtJ0Q/zNQ/rt3ey0PDJrGpuksjGJfAqUZ0hccMoeXMaMT1h9YZlnwVb5t4PGrhPh/USGnvMecfk572r+vKyZ3zPj3Ckh/AEpOSYOdSkXxma5oKBWOIX5jnikDZjBGVVHEQ8mG+FsZlTLZIwUjIwvDRvGPMf8HzdbRnSY/oihlROEazz8xy0Y08PzXRPtPzH3QnH8KFsVUCiH9V7g2ymJOiJ9llL4lHa18O3gri9bceNPuMYT4epjCuRE56mhmW09Lu67AJG43jt7gCHXxYLBopnnbhPTvjfI/vdtrPax4qkZjgFLSeg0mZpHH3D/KooKTL6DWKz/YaNxltJhWtoU1jxNM34EXjPSBKozskdIJiD8zQHyEQVH64l6waSSsshoEHn9yGA/9Z6S3lkVjKrxwzA1zicBlcmGjcddUwEpshMCYKP5FX/CRF2rgtwqsf8uKynj8tgGCQ2Y8PnXZjhV8YC2vFC4XuHEqRz7WgoDmn2iIb0pUiKdPqRzRKQgKFH85kR/SW+ERhlUmxGdVbtRLU+tEwjE6SH8iBe+VbLLo8UMT91K9aUqUfpd4fHLl4vai9M+TFCLE36wcsRlVL6S/EecNjk4kVlzdOGqdEL83I8him/d2uQOxDFF8zbbGpnsWi70LfXtj8yx2+nDFwzNrEySI3xKohWeOO52Ix8+NK8S65Yl/COxw+68Ej6lxBMRfjxNsSN+M4Z4aSM6Gdnet+NtDXerENwnxx/MmNmB9TM5+4X0gG3lilTHjEeZM3NkSX4rhnFPOI7thRAjx16IvghBfgfh8h1qb201+cmdGP66j/KOwARXiz4riX8LzPBJ4QoPEl07pO9vNLQ9Hc+BL6LbyPwXkvykqlPAe01VR1CBDxSh9rcWF3bLic9sz848dhQ9TF4wPuHWy5mcFnv/2kLf+lfTlSOID3lAxo2go/Ll9K8N9RuQaeOwXgbw7Ivk6CAUbN/H8w7PiQaYL1r0sxgbWp74iQj6JfxBM+48H/jBzMistTtsvrp9/YGLgiXhXFmazEGWT6Kwy9MUO0nVSp5gGzdYjjdK3RZVi/XU0d1iP/qnS/XLL7cpF6WOyCDlt24D0m42dovT2nY0t69P2c9VOlP5TVCF2lJL/Plfwx4Yjin8yQKDiHWMDTgAA87WnjFuwhiQ0Kfwno3hvnF/T9J9XOOI0CJD9keRiF/JfmqZ/1jah8hHezdrXVXtR/Me4QiqTfooNX5Ltj4wOVwII4SABuysIvgFe2PD3lb4iSjigEMXXVKZOJT6nIueqCCEZT58CQWD3XQT8tDCF9K/jCsFCjz1RWhiFtjOoywhNQAiM+HrXCLF4C/EfgAeJ0K7hZ4GXuIaQviALjELbDsyppC93jTBQ/JLu6LCjL7WZ6poOwBsIvCFW4vknFoErF0xR/JfYCIFn1+k/uLetQki3nQLOCMw6L2PBKiH+buC1NmUEVVxzOBCjCkEc2jU2rBs9hWxzDTsLPLhmDOnFKL8dz38OahqzwCm0bTxxGm+za4RCfLoVAvEueAZcw08Lz/rBbMpSL0Gb+KADT0Fa9OnaidL/ir4xoaMtXe90rcIRAjxtWnh2ul7uWxmaOyzKK/xoyKh3j2kMiPE6jyJcJrbOI7Tkep7VMUjO3TUg/Z4lCiE+vTLmbsiVsfm4h2os2rMLTw+fubpCyaEgUKTpCm5WOKK0CelAYWpl3O1RRuIK2ePNPyn63MU9dv49H5Z1t7uAmQUGIoHxxD8ExrLAWLG28ZQfpAEVgVyIrw7fzjzxj3FoGkgDIj4YxkDGgVtIXyH991BQuPaCPs5xdY/W6E6NCKU6RzAEoCG+LOQR05aQvmpI83IfxaesjqdbRVBkI3yhp9XO3ysTv7abwdDlTvoAnIiVHR0Q/JKFDpZQgdmJtrq2b23pxaK9vtjwCend4egwxJcW8bI5hSnEP+0TDGGR7hQVurUvwJIsEz7XKTMRYDjQwBD/LsLbfpw6FGlSzVtkJUaItolyQdN/oWtqMRowfXRjMHxFiBO7eNe42s3W86NVVNj8wkWSN6fLNX1D4dkjKMJppHdFqHVop5wPUbwPVzyyO4R4T18pODlozKAV+mNtQEpoNAoKxRTFT04xDO+GU91CwYTXosxSKMMeUrPhxfe3qUAR68cQ78q7B+rWs+hLBoJPiPVML2wcLoGKPe0etXdopw6lFFkrAd8RkpwDz+de4Or88EXA7hknzCFbcZSY4CjEFBg0+bXxIJvlQfFFlcizGsVI/DnykOJBGyTOxdu5/NsmV3h8Es4xMbPHKBsviZ2xhUx8OCVx6AA2q6h5tAfeqNYJqOWAuZ5YYqD4OijbJb0rDkuIv9d/S23cW984brZ5CiamULzfTTrwj0emS9zRGaVp5D1pMR6/egXoTsHamE2WeGPDhb2gNNI4qdioCfGPROkbIVBrISk+U4ivHAgNLDE+eJ/dgROfVpmMkThzef8+lKITWUtIC+b4vDCz9kOcxCh9Cdwqu2f1o9HfltghKdtrHYFkNtR4IEO9Vw9famw+K3+Z2xviYHBa4L1CfH57HT84M8CcHWBkoLzMlg6Q/pyNYTT5OOyNYL6iNCHrsU45SSm3Wzx4s0Q5pBezpv674MaWmnn+4agVgY/Nxr+7BzG7AF9tGPbw4pilE1WKEL+h2hysQuoM8fejSgjvcQAN8nJLT9VfhTIfyhLyk0IlRK/I/8XcXmR521DC1vJDUbwjqoz+PfE5a1kupfGOXW5fCVG7H0Gl7qH4pdG2VhFP4asFyUrh89aqUErl21Y6RUdH7x57klIJW8vIjdIXJo0S8fx3rmW5lMb7nnVzD4pG3ULl4Kys0oha64jh7AsV0b+SviNvIGmty9MJ/4mbRdKyUgfSOGFiNQHpfQdqoHIVR4evJj4nihckYCdV6yIev5Iu+okSWtHE2rPf46Yw6ZtxCEzRuGv4y0ggIP5of3HvK4f3TtTp0MvwNrE/G6W/FFcKUv0nlqFJJxxJBEmfh0C8pOwa9EmXbW76ERcJj1haMlpszTfP5wZcdxxLAlPLHOV9m5DeMhbkunN+CSR+SIX4IL6sU5vE+eU6Vk+7T4kdDIZAV/jxr7GA153zSaCX0X4oT7ebAXmreHwSIK6KjMJ8oim3F04MtVmI/X2KTd6+CjWGRR2qWS7HE4AdiWw4mXrgLGDSB4o6rW4CxFI+ich4xKYxmqOLYhp8tL586tYwBSjOQU3IkgJT0ltXXZL0JOrYlp15fDIqpnqnO1yLUYSjxJFUXcdZStQq1hpbhEP+HCqh8FUE5Bh3PH+hcqf0lCinGnUtgVoCtQRqCdQSqCVQS6CWQC2Bikng/5T4f/AL21LEAAAAAElFTkSuQmCC"/>
+</defs>
+</svg>
diff --git a/packages/ui/src/components/SelectableCardOptionGroup/__stories__/assets/ubuntu.svg b/packages/ui/src/components/SelectableCardOptionGroup/__stories__/assets/ubuntu.svg
new file mode 100644
index 0000000000..50679b4a2c
--- /dev/null
+++ b/packages/ui/src/components/SelectableCardOptionGroup/__stories__/assets/ubuntu.svg
@@ -0,0 +1,9 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="56" height="56" fill="url(#pattern0_18224_181061)"/>
+<defs>
+<pattern id="pattern0_18224_181061" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_18224_181061" transform="scale(0.01)"/>
+</pattern>
+<image id="image0_18224_181061" width="100" height="100" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAS8klEQVR4AeVdC3RU1bkeeSjBB5DZJ1Rvl9fW3qr1anXVF+GRAMmcfYK0tBYLVqkI+MRrQXttV4siFtQqpWpZiljFhRUfrSirvq0K1YtQ6guLkjn7ZJJJSAh5hyTkMfnv+veZmczjvB/JBM9aZ82cvffZ+9/fv5///+//BALD5No/+xQSloTzw2LwB0wiP2eUrJVF8phMycsKJS/hzSjZxih5nIlkHaNkOaPBH8kh8j05NLFgmFQzN8msmDN+vCwKlFHye0bJHkZJJ6MEXN4djJJPGRXWK5R8PyqelJ+btc8RqlgZ+bYsBn/LKNnvEnjLjFMoYQolv1Nowbk5AsPQkvHFzBODskhWMEqig8UEg3JqGRXWVJQJXxtaVIagdEUMXqRQ8poBOJZbuS95iGS7IgpThwCawS0SK8ko+cQXEN3PMVqNICxLgjS4KA1Caaxs4jnDjBGZzPkiTPMnDQJU/hax53uB0YySp4dRj8hkRObztrrQxOP9Rc2n3JlIrmCU9B1FzEgyRxHJYp9g8zZbCASOgbmBkUwkrx6NjEivU/CD6Nyv53mLoMe5VYSCZzJK2tMJd72hS7bMHMy3Ww4VFHoMozfZMVFYmIOADRYzl3mDoke5MCn4h68wMxJM3+wRnO6yYSLZOmyZIQnASsdDeNpxUF44gt/hojHAxPwEyHZ/33GHpsu3GSWvDFtmUAJy8Vg4tP5/oevznRBrb4a+poPQ+dF2qFuzCMJTRgNDhtnfcP7TJazOXh/OKym5ZBxEb5gGsc520Lt6D1ZDxWXfdMIQfGePM1QdvhXXOzgldmjfE4NQtaRQjw9p4f29PaB8/z+AUUc95R8O4bX3Wlz5M7Sg2h9GkvTiHNHX3pwGvNFD1793q8OXgzJlSp6zh67N1AoVFjkYU5NgDPm7YhBqVy0wwl8zrmrB+U7nE5Ap+YVNmM2T4w48vunLHXAdtNjw1GPh8PatmqAbBTY+fhfIM09yXHdZKphsjrKNFFwckgs78PiqRy4dD/KMEyA8bQwfTsKTRwK/p4zmYRiHaXiPTFkpIUO69u0xwl4zrvXVTRAuynPMEEZJr6dCyaFdUeFeYRyUXxIAZfbJUH2LCI1/ugvaXn8aOj/ZAd3yXug5UMHvbmUfdH68Hdre2gINT6yCmuVloMw+hTOLSQWceZ2fvq8JulFg69+egHDxWDcMAZkKO230Af2kjJL5gz/2C8DEIAey8uoLoOUvf+SAG4FmFHek/GO+6cN9R8tfHzFKqhlXt2axm81ikpGKGLxJH2kLMe8WB0YNughdEkAuOQnq1/0cemorNQFyEqiUTQRWVgCVC863/bqLnXuSGYlGXTlr3AQL0GsnYRL5cyKjwfrFZenhna/ZBs3shYZHfgVy6TguJjm8Y5tZ8mR8w8Y7gbmY0LNxE97QRtskNCzmn52dmQ+idOwR08emTcLKpScnAfHqT3/3EZCnHw98LinKg56qctOs2999EcJFx2W1cre4VEikyAT+7OjB0YELgD2i/b0X4eD9N4IcmsArj8A1bVlnCpjdBO3bX4LyySP50BWeehw0v/CwZha4Q69/6FbAVZlDeZYhE9EeLBtxgxClTJjmthWYvh/KB2XOf0Jf8yEOSn9fL8gzTlQB4L3mBOjv6dYEzE1g89YNyVUXMh6Xxwd+PRcaHlsBhx6+DaqXSyDPON7VvsO07ijYpGSeAQvSo3zvHaUToGrxxQD9/WnY4vISV0JYIQSq/oGlafFePXR+9r66HMaycJ8iFQAL5fOVHf+Pm04xaNjKrYBukuZAOuo6T2jEZpKRO0JLJ0DNrbN0sY1ccXZymAhPGQW9h2p007qNaHv7eYguncHLw5043jh/1d4xH2puuxRQKuwnFpZsvny1KBTzoWrRxYY4diufq0NKvJUiMHoX6jC65c+4PqPr8w/hSPkn0NfSoJfcMLy/uwv6j3SmpalZJg0sNhyIaiwwc5dOv1CD0SLcQiYOW40AypxT0yqs91B399XqEEIJ3113faGKO1CB1Pz8QxC9oYi3aty9oyIJNX78nnos39HjMFS1eBI0P7MWemojesVYCuc91h9mcBwr6NdO02VK3PDZIeAGS2JJXU31tagTuBkS/T1HIMyXqKoeInLluVBz66UcfJRTqfoJIx0FzgsCXyTgsFe1ZBJ07HrDrFjN+FhHG8jTT0gOo143WFkSHtZlCKOk2usCMT9cYra9/ZxmhfUCW1/ZpAKRmGDdTLLYIKaMhsqFF0BPjaJXpG54x+43ARnrBzaMklZNhuD5DF8KFINcyKdbW52I1pc3comu1zSFJ4+Cxqfu0SlVP7h25ZUgl6r7JK9p0hTPy1JwtdcFYX7hacdCX1uTfk01YuruXsjF6H5synC4w6V1ze0/0ChZPwiHUb7Td6bONetdj2b1EkbJl14zBIWEDRtW6NdSI+bAL3/EhYte05KZH+5z0NDBztW8ZZ0vvZZJpC6NIaxkwrhMgt0/CxAuzoP+vj7Lda5d9bNBYUaibnJoPN9vWCYQIC6GN1pQGCxujFZrJRNOTTIlfsDSrFvZixeDUP+HZZbr2vLSY1yulQBrsH5x+Gp8arVlOhs3rebGdV7TJ9Pgz5IMiZ92tQe4EbcpgfLCkdB7sMpSRXE37sIwzSXdAoQLR0J31X5LtPa1NkI5GtGZ1N9B/NOpDMGjx94VghuzhRdYqiAmit5Y5F3ZTuohCRC56rvW6b15plNbLaN6KqkM8eIc+EBhJeOg+S/rLVUQ9eK4FPW0QThgCvbQw//3qiWa29/a4sfkHuMMQQ8JtsFACakYTFp+sIz1OYo0rAoF1d7hwyRplym8l5xriSEoL+N6FbtlmKSPhCZ+I4DuKuwwRJ6p6izq190CbW8+Ax0fvgHNzz0I0ZtL0uaB6I3FppVD2RSfO0wItUOfm7RIS3fll6Z0Y4KKy073XJwii2R6AN1MWKoEih+mHguNT6zSJbjngAKReWfxVYiq+LlcNy1GoMZOlU15OH+5YC7fNz12hyHNicjaO67wXGciU3JtIO7IxXQMR2a0/f35BD2Gv5XXXMjzK588ytBgAXuRQ0NmU3otNbJM5kkCVC44z7BuiUiUOnuuL5HIfQH0qmNGPOq669fenKDF9DfWdRjk4uNVs5uf/rduelU0kgPzRwpjUH2bqcnUqkDHztfcWjNmNSqFCptwyNpgxhDUNcQ6O7To0g1r2PAbrtPAFVRPtZyVDpVL5ZMCWUSZ0eJ3fPmkEdB76EAWvZkBPdGw5xJgdDEVQH9ThpWUBIheb0/mg8R3R76A8knHcMVR25tbMusDR+TPcmpCT2JQOh6ql1E4sGLewH3HfIgunQ7Rm4oH7uumQObqMplHSo+zGbYDewg6/jJsqXX3LMkC1CwAFTtoDI0TZdMTd2cl79r7IWeWWdlDE4/DqJXbGDcHtO+2xJCD916bBahZQKzzMB9jceJr3HhnVnLUgeNQ6IDoQXjHCjN8mft246SObvH0K4lDlk0xNaLfU7kfyi/BIWsMtL2+OYshaJDADdGMyh6KuFA+VF1z0cDQlBimls6AyqvOg8j876j3vDOBhbw2FQp+gHPIRkOGoI1UUV6WRUYWwhkBXCoamgDlU0bx+SQjGmJtzapBwlCAblAmHo/ura/OJDfruaeGeT6p4xHzgJVD/zjsHHrkV1lE6QX093arln9lBRCZd6Zesniv9KXr6/d4A2Zgw+SNLxbTpTkR0bHrTc+XvYySzThkLTfrIRiPSv6Of72boMfwt/p/SvkuFsXU7Tte0k1btWSy5+IHK3XRTYPyrJ+eo0tvakTzC3/03NxUlsgDAZkGf6hLYGpriotOmrc+mkpX2v++pnqoXHShuoMVg1B9SygtPvOh6Zm1qj1vajlD+B9Hgob1t2eSqflce9dVnhziScNeJNcH0K9tWqARIGjrVJwHyg9Pg8Y/reSCRVwt4T6jdsU8KJ+Kiht1CEJbKogZq297ayv5HGO5fCPaPIgLTx3N90eaHMgIjFx+hg+9OzgzgE6GbQPCxe/5XOWKQ1mmgBDF732NdRlV0H7EQ/z+WJcYrBy1mIfD1byztInMCI0dbh0wd9XKy2GYLArf4joRjxwVJydS7PotWzdkVEP7EcX3uSCCxz2RVWO+9ndeGDDicwi+VifAI4QJhnjsKVSA6HVTtDmgEZqQDmsROShhUgFELv+2BmXaQWgA7gNd0RQVrrDe6wLQcKDPgpAOq4zHmsOFI5Lzj9e0mOUXnnQMdH1p7fx6rKPdFwmDIpJnkwxRJDLbjGjb8WI+oMTX6tX05wf4gsF2OS6HDDy1hSenrF5NW37v+XKX11kSrkkyBI/qeg+Ean1uttJKBaLm9jl+n8dIH2rEID/akEqD2X8262RfFiFcn57kSCCAQkbmNVNQ0tv45G/N6pgWj3KzxOFPr+lJy08MQmT+2QAWduUJAlu3Pc6tMdPycdlD43kdSuUF/y9Tcr8PBXED5dgRe8qtml/MTp419IWmmSdC9PqpAP3mIpIEM5BxuHr0Y4nONYWZHMFPNvhReTxMWbtifrJeVv80bb4XuIWLNy1QHarQ30nhCH7k2SodiXQH77vet+FU99w6WmH7wRTcZ+B+w86FBhVJhy9uDusgQ+MnuCI/Ph269u22QwZP2/X5Lu8luwMNrSuzcySfmSjc6wdDEBDczaMW0crVH+tLGx4iPzkDqq4t5BtInJcsDRtYZsk4QHFIxU/OgLa3nrVSdFYaPCvPMUlx8+QlRqj+SDIg8w9+zMTLwjLzwgOUVq6D99+UHB4Q0IRLpe7Il9C4cSU31cHDM6i7wB02d81RPJaLctCiEH1bRa44Bw6tv92ybEqPLjw17OeZ9cis4FmZfEh7Vih5NxNIr57ReA6PGhtdPTUVUD4ZN4mqLApP3GpesRjfUHZ9+j60v7eV350fvQc9UdlUqKmZn0YgGjogzQlaPP+VhL1p4Gs9+O1WA4cRdCymd0UXX5wcklBwiZo5v67OPe/wBUfFnFOTk37Fj7/FbdDq8PAQP/FrU0g5MDeYMlKhwlwtHmSFMUpkz1tDCqGcKRo9pf3vL4A8bQyvCB6wrFt9jS+86KnazzWZqk4/7loD3WskblxEoKuNFJp9+J+998jiRDyAiWSWDwSkVRCHgsorzwWUDfGrvx8YegPik6d6rt3I0bFTTqHnIZx7+EID3WkUj+U2V2hZU7d6EVQtuogbX/h14jaBqyKRJXr4a4bLItmXeNnPX5Ql4RmR+oduS47XuP9o1LDlcsqExHuogkZnmdxn1rTjuAcgLY9DeNygbtUCX4SIcSxrNUE3CqyQ8i/xkxHJvHGPUJwHLOHohfeQYAJDz375UpofpSjgq7GuvTtN825+8RH1eLbnQ5dQZoS9bpypzZbnhKoO8nFY8fpqePxOdV9SnAetf9tkOfv6B5ereyKv6iqSD3UBN4tAX7PJluwVQVbymXUyND55N/S1WXcJboawcukp3BofDd3sXnKJd0vfqlJyihnuhvFD8+Ucgc8nuAqqXjoT2t5+1rHbJQQfre/R8BudyDQ/r+3Wz4hJqoWJeytFRRJ+bQi21UhGyftD0lPivQn3A7gDr5j7X1C78iruxxfPZ3Szvdz9Evq5Qn9X6Fa2u2IfoBFby1/X87SomuU2xAlHyh9vN8JeM67l5Y0DcjUrPVwjDS6SrOJtmq6i+LQxjJLuoWQKLxsn/FA+t6jHhQAKLXHVhFYu3HcWik0wrChP1erhXiJFBoU9LuF7SxN5ncDWV59yqwfpd+WvV4tD+KXLIWeIRsuzQxMy6/AHr+jArh/c+NQaV6oAVJFrYeo6jFGyzA4AOZc2lA9199g/WlG18MK0nmavXsIa18AbZYAGwfYI8k8W5IQOlBLj2RWrV7fyb8d2YzINvm6EpWdxMiXvOQEjJ94R8/nKzSpDnH6HSqHkI88At5IRfvgqJwB2MK9w4eZt+q5qkVmxtiaILDjPqUG1gt9csYKjp2kYJf8crkzB00+yGITGzfdyP/DoMQ7lWkfYXq7Ycv4Bl2AFrAyM8BRoO5kxkWwftkxJqHmnjOJHtPGYNmoo8WOTCSt+m3X715AyI8E4NIO0SXiaKP4oeXdbAo+c+MWvkR0lwNpuLOhANCeYkElEXP3b+1ViDDrvycQhp57jEuLhO9lbXLWhbApds+cU+EbEyJJw89HaU2Qq/Mao7jkbF7eqf+soYswu1/qMXOAW2q76bcniM9MPWPrWRy6AbYcG/MyPTEmNz+DZXiUZ0HNQpuQ6O3UclmkVKT/EKNltAISXoDrIK/gZEwsuG5bguiEajwHj9zMYJS05wJwONHwOS/nfcVOno+ZdOVRQyCh5lFFSO4jMqcfDMrh/OmqA9KMirGTCqTIVro7rXhRGScwDJvXjB2tQzIPfhS+fNfGbftD+lckTAQxTUoyuVJlE7mM0+GTcG96O+Hy0m9HgB+jiKM7ItUwK3sBocCYOjclD+TmO2P8DvzAr+pmwf54AAAAASUVORK5CYII="/>
+</defs>
+</svg>
diff --git a/packages/ui/src/components/SelectableCardOptionGroup/__stories__/constants.tsx b/packages/ui/src/components/SelectableCardOptionGroup/__stories__/constants.tsx
new file mode 100644
index 0000000000..60927d6182
--- /dev/null
+++ b/packages/ui/src/components/SelectableCardOptionGroup/__stories__/constants.tsx
@@ -0,0 +1,55 @@
+import type { ComponentProps } from 'react'
+import { Badge } from '../../Badge'
+import type { SelectInputV2 } from '../../SelectInputV2'
+
+export const ubuntuOptions: ComponentProps<typeof SelectInputV2>['options'] = [
+  {
+    label: 'Ubuntu 20.04 Focal Fossa',
+    value: 'ubuntu-20.04',
+  },
+  {
+    label: 'Ubuntu 18.04 LTS',
+    value: 'ubuntu-18.04',
+  },
+]
+
+export const ubuntuOptionsLegacy: ComponentProps<
+  typeof SelectInputV2
+>['options'] = [
+  {
+    label: 'Ubuntu 20.04 Focal Fossa',
+    value: 'ubuntu-20.04',
+  },
+  {
+    label: 'Ubuntu 18.04 LTS',
+    value: 'ubuntu-18.04',
+    description: 'This version is legacy please choose a higher version.',
+    optionalInfo: (
+      <Badge sentiment="warning" size="small">
+        Legacy
+      </Badge>
+    ),
+  },
+]
+
+export const debianOptions: ComponentProps<typeof SelectInputV2>['options'] = [
+  {
+    label: 'Debian 10',
+    value: 'debian-10',
+  },
+  {
+    label: 'Debian 9',
+    value: 'debian-9',
+  },
+]
+
+export const centosOptions: ComponentProps<typeof SelectInputV2>['options'] = [
+  {
+    label: 'CentOS 8',
+    value: 'centos-8',
+  },
+  {
+    label: 'CentOS 7',
+    value: 'centos-7',
+  },
+]
diff --git a/packages/ui/src/components/SelectableCardOptionGroup/__stories__/index.stories.tsx b/packages/ui/src/components/SelectableCardOptionGroup/__stories__/index.stories.tsx
new file mode 100644
index 0000000000..15adb73598
--- /dev/null
+++ b/packages/ui/src/components/SelectableCardOptionGroup/__stories__/index.stories.tsx
@@ -0,0 +1,14 @@
+import type { Meta } from '@storybook/react'
+import { SelectableCardOptionGroup } from '..'
+
+export default {
+  component: SelectableCardOptionGroup,
+  title: 'Components/Data Entry/SelectableCardOptionGroup',
+} as Meta<typeof SelectableCardOptionGroup>
+
+export { Playground } from './Playground.stories'
+export { Sizes } from './Sizes.stories'
+export { Columns } from './Columns.stories'
+export { Disabled } from './Disabled.stories'
+export { Error } from './Error.stories'
+export { Examples } from './Examples.stories'
diff --git a/packages/ui/src/components/SelectableCardOptionGroup/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/SelectableCardOptionGroup/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000000..72d568359e
--- /dev/null
+++ b/packages/ui/src/components/SelectableCardOptionGroup/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,13830 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`SelectableCardOptionGroup > onChange and onChangeOption are being called 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.75rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-6 {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+}
+
+.emotion-9 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding: 1rem;
+  border-radius: 0.25rem;
+  -webkit-transition: border-color 200ms ease,box-shadow 200ms ease;
+  transition: border-color 200ms ease,box-shadow 200ms ease;
+  cursor: pointer;
+  background: #ffffff;
+  border: 1px solid #d9dadd;
+  color: #3f4250;
+  padding: 0;
+  padding-top: 1rem;
+  cursor: pointer;
+}
+
+.emotion-9[data-has-label='false']>:first-child {
+  margin-bottom: -0.25rem;
+}
+
+.emotion-9[data-checked='true'] {
+  border: 1px solid #8c40ef;
+}
+
+.emotion-9[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-9[data-disabled='true'] {
+  border: 1px solid #e9eaeb;
+  color: #b5b7bd;
+  background: #f3f3f4;
+  cursor: not-allowed;
+}
+
+.emotion-9[data-image="illustration"] {
+  padding: 0rem;
+}
+
+.emotion-9[data-image="icon"] {
+  padding: 0rem;
+  padding-right: 1rem;
+}
+
+.emotion-9:hover:not([data-error='true']):not([data-disabled='true']),
+.emotion-9:active:not([data-error='true']):not([data-disabled='true']) {
+  border: 1px solid #8c40ef;
+}
+
+.emotion-9:hover:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'],
+.emotion-9:active:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'] {
+  box-shadow: 0px 4px 16px 4px #f6f3ffcc;
+}
+
+.emotion-9[data-has-label='true'] .emotion-12,
+.emotion-9[data-has-label='true'] .eqr7bqq1 {
+  width: 100%;
+}
+
+.emotion-9 .emotion-12 {
+  position: absolute;
+  padding: 8px;
+  margin-top: -1rem;
+}
+
+.emotion-11 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-14 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  gap: 0.5rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  pointer-events: none;
+}
+
+.emotion-14[aria-disabled='false'],
+.emotion-14[aria-disabled='false']>label {
+  cursor: pointer;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17+.emotion-19 {
+  fill: #8c40ef;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17+.emotion-19 .emotion-21 {
+  fill: #e5dbfd;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17[aria-invalid='true']+.emotion-19 {
+  fill: #b3144d;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17[aria-invalid='true']+.emotion-19 .emotion-21 {
+  fill: #ffd3e3;
+}
+
+.emotion-14[aria-disabled='true'] {
+  cursor: not-allowed;
+  color: #b5b7bd;
+}
+
+.emotion-14[aria-disabled='true']>label,
+.emotion-14[aria-disabled='true'] .emotion-17 {
+  cursor: not-allowed;
+}
+
+.emotion-14[aria-disabled='true'] .emotion-19 {
+  fill: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-14[aria-disabled='true'] .emotion-19 .emotion-21 {
+  fill: #f3f3f4;
+}
+
+.emotion-14[data-checked='true'] {
+  color: #641cb3;
+}
+
+.emotion-14[data-error='true'] {
+  color: #b3144d;
+}
+
+.emotion-14[aria-disabled='true'] {
+  color: #b5b7bd;
+}
+
+.emotion-16 {
+  cursor: pointer;
+  position: absolute;
+  height: 1.5rem;
+  width: 1.5rem;
+  opacity: 0;
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.emotion-16+.emotion-19 .emotion-23 {
+  transform-origin: center;
+  -webkit-transition: 200ms -webkit-transform ease-in-out;
+  transition: 200ms transform ease-in-out;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+}
+
+.emotion-16:checked+svg .emotion-23 {
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
+
+.emotion-16:checked[aria-disabled='false'][aria-invalid='false']+.emotion-19 {
+  fill: #8c40ef;
+}
+
+.emotion-16:checked[aria-disabled='true'][aria-invalid='false']+.emotion-19 {
+  fill: #d8c5fc;
+}
+
+.emotion-16[aria-invalid='true']:not([aria-disabled='true'])+.emotion-19 {
+  fill: #e51963;
+}
+
+.emotion-16[aria-disabled='false']:active+.emotion-19 {
+  background-color: #5e127e40;
+  fill: #8c40ef;
+}
+
+.emotion-16[aria-disabled='false']:active+.emotion-19 .emotion-21 {
+  fill: #f1eefc;
+}
+
+.emotion-16[aria-disabled='false']:focus-visible+.emotion-19 {
+  outline: -webkit-focus-ring-color auto 1px;
+}
+
+.emotion-16[aria-invalid='true']:focus+.emotion-19 {
+  background-color: #f91b6c40;
+  fill: #e51963;
+}
+
+.emotion-16[aria-invalid='true']:focus+.emotion-19 .emotion-21 {
+  fill: #ffebf2;
+}
+
+.emotion-18 {
+  height: 1.5rem;
+  width: 1.5rem;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  border-radius: 100%;
+  fill: #d9dadd;
+}
+
+.emotion-18 .emotion-21 {
+  fill: #ffffff;
+}
+
+.emotion-24 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.emotion-24[data-has-label='true'] {
+  padding-left: 2rem;
+}
+
+.emotion-24[data-has-label='false'] {
+  display: contents;
+}
+
+.emotion-26 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 1rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+}
+
+.emotion-28 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+  padding: 0 1rem;
+}
+
+.emotion-30[data-disabled='true'] {
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+}
+
+.emotion-32 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.emotion-35 {
+  color: #641cb3;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.emotion-38 {
+  width: 100%;
+}
+
+.emotion-38 .emotion-45 {
+  border-radius: 0 0 0.25rem 0.25rem;
+  border-bottom: 0!important;
+  border-right: 0!important;
+  border-left: 0!important;
+}
+
+.emotion-38 .emotion-45:hover,
+.emotion-38 .emotion-45:focus,
+.emotion-38 .emotion-45:active {
+  border-color: #d9dadd!important;
+  outline: none;
+}
+
+.emotion-40 {
+  display: inherit;
+}
+
+.emotion-40[data-container-full-width="true"] {
+  width: 100%;
+}
+
+.emotion-42 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-44 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0.5rem;
+  padding-right: 0;
+  padding-left: 1rem;
+  cursor: pointer;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  width: 100%;
+  overflow: hidden;
+}
+
+.emotion-44[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-44[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-44[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-44[data-state='neutral'] {
+  border: 1px solid #d9dadd;
+}
+
+.emotion-44[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-44[data-state='neutral']:not([data-disabled='true']):hover {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-44[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.emotion-44[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
+.emotion-44[data-state='success'] {
+  border: 1px solid #22674e;
+}
+
+.emotion-44[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-44[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
+.emotion-44[data-state='danger'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-44[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-44[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
+}
+
+.emotion-44:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
+}
+
+.emotion-44[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-44[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-47 {
+  color: #3f4250;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.emotion-49 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding-right: 1rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-51 {
+  vertical-align: middle;
+  fill: #3f4250;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
+}
+
+.emotion-51 .fillStroke {
+  stroke: #3f4250;
+  fill: none;
+}
+
+.emotion-80 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.emotion-92 {
+  color: #727683;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <fieldset
+        class="emotion-2 emotion-3"
+      >
+        <div
+          class="emotion-4 emotion-1"
+        >
+          <div
+            class="emotion-6 emotion-7"
+          >
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="true"
+              data-disabled="false"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="true"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    checked=""
+                    class="emotion-16 emotion-17"
+                    id=":r99:"
+                    tabindex="-1"
+                    type="radio"
+                    value="ubuntu"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="Ubuntu"
+                      class="emotion-30 emotion-31"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/ubuntu.svg"
+                      width="56"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    >
+                      <label
+                        class="emotion-34 emotion-35 emotion-36"
+                        for=":r99:"
+                      >
+                        Ubuntu
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-37 emotion-38 emotion-39"
+                  >
+                    <div
+                      aria-controls=":r9f:"
+                      aria-describedby=":r9f:"
+                      class="emotion-40 emotion-41"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="Ubuntu option"
+                        class="emotion-42 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-44 emotion-45"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r9e:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <div
+                            class="emotion-46 emotion-47 emotion-36"
+                          >
+                            Ubuntu 20.04 Focal Fossa
+                          </div>
+                          <div
+                            class="emotion-49 emotion-50"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-51 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="false"
+              data-disabled="false"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="false"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    class="emotion-16 emotion-17"
+                    id=":r9i:"
+                    tabindex="-1"
+                    type="radio"
+                    value="debian"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="Debian"
+                      class="emotion-30 emotion-31"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/debian.svg"
+                      width="56"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    >
+                      <label
+                        class="emotion-34 emotion-80 emotion-36"
+                        for=":r9i:"
+                      >
+                        Debian
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-37 emotion-38 emotion-39"
+                  >
+                    <div
+                      aria-controls=":r9o:"
+                      aria-describedby=":r9o:"
+                      class="emotion-40 emotion-41"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="Debian option"
+                        class="emotion-42 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-44 emotion-45"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r9n:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <p
+                            class="emotion-91 emotion-92 emotion-36"
+                          >
+                            Select item
+                          </p>
+                          <div
+                            class="emotion-49 emotion-50"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-51 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="false"
+              data-disabled="false"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="false"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    class="emotion-16 emotion-17"
+                    id=":r9r:"
+                    tabindex="-1"
+                    type="radio"
+                    value="centos"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="CentOS"
+                      class="emotion-30 emotion-31"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/centos.svg"
+                      width="56"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    >
+                      <label
+                        class="emotion-34 emotion-80 emotion-36"
+                        for=":r9r:"
+                      >
+                        CentOS
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-37 emotion-38 emotion-39"
+                  >
+                    <div
+                      aria-controls=":ra1:"
+                      aria-describedby=":ra1:"
+                      class="emotion-40 emotion-41"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="CentOS option"
+                        class="emotion-42 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-44 emotion-45"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":ra0:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <p
+                            class="emotion-91 emotion-92 emotion-36"
+                          >
+                            Select item
+                          </p>
+                          <div
+                            class="emotion-49 emotion-50"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-51 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </fieldset>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectableCardOptionGroup > renders correctly 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.75rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-7 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: text;
+}
+
+.emotion-9 {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+}
+
+.emotion-12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding: 1rem;
+  border-radius: 0.25rem;
+  -webkit-transition: border-color 200ms ease,box-shadow 200ms ease;
+  transition: border-color 200ms ease,box-shadow 200ms ease;
+  cursor: pointer;
+  background: #ffffff;
+  border: 1px solid #d9dadd;
+  color: #3f4250;
+  padding: 0;
+  padding-top: 1rem;
+  cursor: pointer;
+}
+
+.emotion-12[data-has-label='false']>:first-child {
+  margin-bottom: -0.25rem;
+}
+
+.emotion-12[data-checked='true'] {
+  border: 1px solid #8c40ef;
+}
+
+.emotion-12[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-12[data-disabled='true'] {
+  border: 1px solid #e9eaeb;
+  color: #b5b7bd;
+  background: #f3f3f4;
+  cursor: not-allowed;
+}
+
+.emotion-12[data-image="illustration"] {
+  padding: 0rem;
+}
+
+.emotion-12[data-image="icon"] {
+  padding: 0rem;
+  padding-right: 1rem;
+}
+
+.emotion-12:hover:not([data-error='true']):not([data-disabled='true']),
+.emotion-12:active:not([data-error='true']):not([data-disabled='true']) {
+  border: 1px solid #8c40ef;
+}
+
+.emotion-12:hover:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'],
+.emotion-12:active:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'] {
+  box-shadow: 0px 4px 16px 4px #f6f3ffcc;
+}
+
+.emotion-12[data-has-label='true'] .emotion-15,
+.emotion-12[data-has-label='true'] .eqr7bqq1 {
+  width: 100%;
+}
+
+.emotion-12 .emotion-15 {
+  position: absolute;
+  padding: 8px;
+  margin-top: -1rem;
+}
+
+.emotion-14 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-17 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  gap: 0.5rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  pointer-events: none;
+}
+
+.emotion-17[aria-disabled='false'],
+.emotion-17[aria-disabled='false']>label {
+  cursor: pointer;
+}
+
+.emotion-17:hover[aria-disabled='false'] .emotion-20+.emotion-22 {
+  fill: #8c40ef;
+}
+
+.emotion-17:hover[aria-disabled='false'] .emotion-20+.emotion-22 .emotion-24 {
+  fill: #e5dbfd;
+}
+
+.emotion-17:hover[aria-disabled='false'] .emotion-20[aria-invalid='true']+.emotion-22 {
+  fill: #b3144d;
+}
+
+.emotion-17:hover[aria-disabled='false'] .emotion-20[aria-invalid='true']+.emotion-22 .emotion-24 {
+  fill: #ffd3e3;
+}
+
+.emotion-17[aria-disabled='true'] {
+  cursor: not-allowed;
+  color: #b5b7bd;
+}
+
+.emotion-17[aria-disabled='true']>label,
+.emotion-17[aria-disabled='true'] .emotion-20 {
+  cursor: not-allowed;
+}
+
+.emotion-17[aria-disabled='true'] .emotion-22 {
+  fill: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-17[aria-disabled='true'] .emotion-22 .emotion-24 {
+  fill: #f3f3f4;
+}
+
+.emotion-17[data-checked='true'] {
+  color: #641cb3;
+}
+
+.emotion-17[data-error='true'] {
+  color: #b3144d;
+}
+
+.emotion-17[aria-disabled='true'] {
+  color: #b5b7bd;
+}
+
+.emotion-19 {
+  cursor: pointer;
+  position: absolute;
+  height: 1.5rem;
+  width: 1.5rem;
+  opacity: 0;
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.emotion-19+.emotion-22 .emotion-26 {
+  transform-origin: center;
+  -webkit-transition: 200ms -webkit-transform ease-in-out;
+  transition: 200ms transform ease-in-out;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+}
+
+.emotion-19:checked+svg .emotion-26 {
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
+
+.emotion-19:checked[aria-disabled='false'][aria-invalid='false']+.emotion-22 {
+  fill: #8c40ef;
+}
+
+.emotion-19:checked[aria-disabled='true'][aria-invalid='false']+.emotion-22 {
+  fill: #d8c5fc;
+}
+
+.emotion-19[aria-invalid='true']:not([aria-disabled='true'])+.emotion-22 {
+  fill: #e51963;
+}
+
+.emotion-19[aria-disabled='false']:active+.emotion-22 {
+  background-color: #5e127e40;
+  fill: #8c40ef;
+}
+
+.emotion-19[aria-disabled='false']:active+.emotion-22 .emotion-24 {
+  fill: #f1eefc;
+}
+
+.emotion-19[aria-disabled='false']:focus-visible+.emotion-22 {
+  outline: -webkit-focus-ring-color auto 1px;
+}
+
+.emotion-19[aria-invalid='true']:focus+.emotion-22 {
+  background-color: #f91b6c40;
+  fill: #e51963;
+}
+
+.emotion-19[aria-invalid='true']:focus+.emotion-22 .emotion-24 {
+  fill: #ffebf2;
+}
+
+.emotion-21 {
+  height: 1.5rem;
+  width: 1.5rem;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  border-radius: 100%;
+  fill: #d9dadd;
+}
+
+.emotion-21 .emotion-24 {
+  fill: #ffffff;
+}
+
+.emotion-27 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.emotion-27[data-has-label='true'] {
+  padding-left: 2rem;
+}
+
+.emotion-27[data-has-label='false'] {
+  display: contents;
+}
+
+.emotion-29 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 1rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+}
+
+.emotion-31 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+  padding: 0 1rem;
+}
+
+.emotion-33[data-disabled='true'] {
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+}
+
+.emotion-35 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.emotion-38 {
+  color: #641cb3;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.emotion-41 {
+  width: 100%;
+}
+
+.emotion-41 .emotion-48 {
+  border-radius: 0 0 0.25rem 0.25rem;
+  border-bottom: 0!important;
+  border-right: 0!important;
+  border-left: 0!important;
+}
+
+.emotion-41 .emotion-48:hover,
+.emotion-41 .emotion-48:focus,
+.emotion-41 .emotion-48:active {
+  border-color: #d9dadd!important;
+  outline: none;
+}
+
+.emotion-43 {
+  display: inherit;
+}
+
+.emotion-43[data-container-full-width="true"] {
+  width: 100%;
+}
+
+.emotion-45 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-47 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0.5rem;
+  padding-right: 0;
+  padding-left: 1rem;
+  cursor: pointer;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  width: 100%;
+  overflow: hidden;
+}
+
+.emotion-47[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-47[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-47[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-47[data-state='neutral'] {
+  border: 1px solid #d9dadd;
+}
+
+.emotion-47[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-47[data-state='neutral']:not([data-disabled='true']):hover {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-47[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.emotion-47[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
+.emotion-47[data-state='success'] {
+  border: 1px solid #22674e;
+}
+
+.emotion-47[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-47[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
+.emotion-47[data-state='danger'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-47[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-47[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
+}
+
+.emotion-47:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
+}
+
+.emotion-47[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-47[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-50 {
+  color: #3f4250;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.emotion-52 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding-right: 1rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-54 {
+  vertical-align: middle;
+  fill: #3f4250;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
+}
+
+.emotion-54 .fillStroke {
+  stroke: #3f4250;
+  fill: none;
+}
+
+.emotion-83 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.emotion-95 {
+  color: #727683;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <fieldset
+        class="emotion-2 emotion-3"
+      >
+        <div
+          class="emotion-4 emotion-1"
+        >
+          <legend
+            class="emotion-6 emotion-7 emotion-8"
+          >
+            Select your OS
+          </legend>
+          <div
+            class="emotion-9 emotion-10"
+          >
+            <div
+              class="emotion-11 emotion-12 emotion-13"
+              data-checked="true"
+              data-disabled="false"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-14 emotion-15"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-16 emotion-17 emotion-18"
+                  data-checked="true"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    checked=""
+                    class="emotion-19 emotion-20"
+                    id=":r1:"
+                    tabindex="-1"
+                    type="radio"
+                    value="ubuntu"
+                  />
+                  <svg
+                    class="emotion-21 emotion-22"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-23 emotion-24"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-25 emotion-26"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-27 emotion-28"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-29 emotion-30"
+                >
+                  <div
+                    class="emotion-31 emotion-32"
+                  >
+                    <img
+                      alt="Ubuntu"
+                      class="emotion-33 emotion-34"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/ubuntu.svg"
+                      width="56"
+                    />
+                    <div
+                      class="emotion-35 emotion-1"
+                    >
+                      <label
+                        class="emotion-6 emotion-38 emotion-8"
+                        for=":r1:"
+                      >
+                        Ubuntu
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-40 emotion-41 emotion-42"
+                  >
+                    <div
+                      aria-controls=":r7:"
+                      aria-describedby=":r7:"
+                      class="emotion-43 emotion-44"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="Ubuntu option"
+                        class="emotion-45 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-47 emotion-48"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r6:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <div
+                            class="emotion-49 emotion-50 emotion-8"
+                          >
+                            Ubuntu 20.04 Focal Fossa
+                          </div>
+                          <div
+                            class="emotion-52 emotion-53"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-54 emotion-55"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="emotion-11 emotion-12 emotion-13"
+              data-checked="false"
+              data-disabled="false"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-14 emotion-15"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-16 emotion-17 emotion-18"
+                  data-checked="false"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    class="emotion-19 emotion-20"
+                    id=":ra:"
+                    tabindex="-1"
+                    type="radio"
+                    value="debian"
+                  />
+                  <svg
+                    class="emotion-21 emotion-22"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-23 emotion-24"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-25 emotion-26"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-27 emotion-28"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-29 emotion-30"
+                >
+                  <div
+                    class="emotion-31 emotion-32"
+                  >
+                    <img
+                      alt="Debian"
+                      class="emotion-33 emotion-34"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/debian.svg"
+                      width="56"
+                    />
+                    <div
+                      class="emotion-35 emotion-1"
+                    >
+                      <label
+                        class="emotion-6 emotion-83 emotion-8"
+                        for=":ra:"
+                      >
+                        Debian
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-40 emotion-41 emotion-42"
+                  >
+                    <div
+                      aria-controls=":rg:"
+                      aria-describedby=":rg:"
+                      class="emotion-43 emotion-44"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="Debian option"
+                        class="emotion-45 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-47 emotion-48"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":rf:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <p
+                            class="emotion-94 emotion-95 emotion-8"
+                          >
+                            Select item
+                          </p>
+                          <div
+                            class="emotion-52 emotion-53"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-54 emotion-55"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="emotion-11 emotion-12 emotion-13"
+              data-checked="false"
+              data-disabled="false"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-14 emotion-15"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-16 emotion-17 emotion-18"
+                  data-checked="false"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    class="emotion-19 emotion-20"
+                    id=":rj:"
+                    tabindex="-1"
+                    type="radio"
+                    value="centos"
+                  />
+                  <svg
+                    class="emotion-21 emotion-22"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-23 emotion-24"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-25 emotion-26"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-27 emotion-28"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-29 emotion-30"
+                >
+                  <div
+                    class="emotion-31 emotion-32"
+                  >
+                    <img
+                      alt="CentOS"
+                      class="emotion-33 emotion-34"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/centos.svg"
+                      width="56"
+                    />
+                    <div
+                      class="emotion-35 emotion-1"
+                    >
+                      <label
+                        class="emotion-6 emotion-83 emotion-8"
+                        for=":rj:"
+                      >
+                        CentOS
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-40 emotion-41 emotion-42"
+                  >
+                    <div
+                      aria-controls=":rp:"
+                      aria-describedby=":rp:"
+                      class="emotion-43 emotion-44"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="CentOS option"
+                        class="emotion-45 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-47 emotion-48"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":ro:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <p
+                            class="emotion-94 emotion-95 emotion-8"
+                          >
+                            Select item
+                          </p>
+                          <div
+                            class="emotion-52 emotion-53"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-54 emotion-55"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </fieldset>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectableCardOptionGroup > renders correctly 4 columns 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.75rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-6 {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 1rem;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+}
+
+.emotion-9 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding: 1rem;
+  border-radius: 0.25rem;
+  -webkit-transition: border-color 200ms ease,box-shadow 200ms ease;
+  transition: border-color 200ms ease,box-shadow 200ms ease;
+  cursor: pointer;
+  background: #ffffff;
+  border: 1px solid #d9dadd;
+  color: #3f4250;
+  padding: 0;
+  padding-top: 1rem;
+  cursor: pointer;
+}
+
+.emotion-9[data-has-label='false']>:first-child {
+  margin-bottom: -0.25rem;
+}
+
+.emotion-9[data-checked='true'] {
+  border: 1px solid #8c40ef;
+}
+
+.emotion-9[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-9[data-disabled='true'] {
+  border: 1px solid #e9eaeb;
+  color: #b5b7bd;
+  background: #f3f3f4;
+  cursor: not-allowed;
+}
+
+.emotion-9[data-image="illustration"] {
+  padding: 0rem;
+}
+
+.emotion-9[data-image="icon"] {
+  padding: 0rem;
+  padding-right: 1rem;
+}
+
+.emotion-9:hover:not([data-error='true']):not([data-disabled='true']),
+.emotion-9:active:not([data-error='true']):not([data-disabled='true']) {
+  border: 1px solid #8c40ef;
+}
+
+.emotion-9:hover:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'],
+.emotion-9:active:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'] {
+  box-shadow: 0px 4px 16px 4px #f6f3ffcc;
+}
+
+.emotion-9[data-has-label='true'] .emotion-12,
+.emotion-9[data-has-label='true'] .eqr7bqq1 {
+  width: 100%;
+}
+
+.emotion-9 .emotion-12 {
+  position: absolute;
+  padding: 8px;
+  margin-top: -1rem;
+}
+
+.emotion-11 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-14 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  gap: 0.5rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  pointer-events: none;
+}
+
+.emotion-14[aria-disabled='false'],
+.emotion-14[aria-disabled='false']>label {
+  cursor: pointer;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17+.emotion-19 {
+  fill: #8c40ef;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17+.emotion-19 .emotion-21 {
+  fill: #e5dbfd;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17[aria-invalid='true']+.emotion-19 {
+  fill: #b3144d;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17[aria-invalid='true']+.emotion-19 .emotion-21 {
+  fill: #ffd3e3;
+}
+
+.emotion-14[aria-disabled='true'] {
+  cursor: not-allowed;
+  color: #b5b7bd;
+}
+
+.emotion-14[aria-disabled='true']>label,
+.emotion-14[aria-disabled='true'] .emotion-17 {
+  cursor: not-allowed;
+}
+
+.emotion-14[aria-disabled='true'] .emotion-19 {
+  fill: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-14[aria-disabled='true'] .emotion-19 .emotion-21 {
+  fill: #f3f3f4;
+}
+
+.emotion-14[data-checked='true'] {
+  color: #641cb3;
+}
+
+.emotion-14[data-error='true'] {
+  color: #b3144d;
+}
+
+.emotion-14[aria-disabled='true'] {
+  color: #b5b7bd;
+}
+
+.emotion-16 {
+  cursor: pointer;
+  position: absolute;
+  height: 1.5rem;
+  width: 1.5rem;
+  opacity: 0;
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.emotion-16+.emotion-19 .emotion-23 {
+  transform-origin: center;
+  -webkit-transition: 200ms -webkit-transform ease-in-out;
+  transition: 200ms transform ease-in-out;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+}
+
+.emotion-16:checked+svg .emotion-23 {
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
+
+.emotion-16:checked[aria-disabled='false'][aria-invalid='false']+.emotion-19 {
+  fill: #8c40ef;
+}
+
+.emotion-16:checked[aria-disabled='true'][aria-invalid='false']+.emotion-19 {
+  fill: #d8c5fc;
+}
+
+.emotion-16[aria-invalid='true']:not([aria-disabled='true'])+.emotion-19 {
+  fill: #e51963;
+}
+
+.emotion-16[aria-disabled='false']:active+.emotion-19 {
+  background-color: #5e127e40;
+  fill: #8c40ef;
+}
+
+.emotion-16[aria-disabled='false']:active+.emotion-19 .emotion-21 {
+  fill: #f1eefc;
+}
+
+.emotion-16[aria-disabled='false']:focus-visible+.emotion-19 {
+  outline: -webkit-focus-ring-color auto 1px;
+}
+
+.emotion-16[aria-invalid='true']:focus+.emotion-19 {
+  background-color: #f91b6c40;
+  fill: #e51963;
+}
+
+.emotion-16[aria-invalid='true']:focus+.emotion-19 .emotion-21 {
+  fill: #ffebf2;
+}
+
+.emotion-18 {
+  height: 1.5rem;
+  width: 1.5rem;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  border-radius: 100%;
+  fill: #d9dadd;
+}
+
+.emotion-18 .emotion-21 {
+  fill: #ffffff;
+}
+
+.emotion-24 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.emotion-24[data-has-label='true'] {
+  padding-left: 2rem;
+}
+
+.emotion-24[data-has-label='false'] {
+  display: contents;
+}
+
+.emotion-26 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 1rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+}
+
+.emotion-28 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+  padding: 0 1rem;
+}
+
+.emotion-30[data-disabled='true'] {
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+}
+
+.emotion-32 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.emotion-35 {
+  color: #641cb3;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.emotion-38 {
+  width: 100%;
+}
+
+.emotion-38 .emotion-45 {
+  border-radius: 0 0 0.25rem 0.25rem;
+  border-bottom: 0!important;
+  border-right: 0!important;
+  border-left: 0!important;
+}
+
+.emotion-38 .emotion-45:hover,
+.emotion-38 .emotion-45:focus,
+.emotion-38 .emotion-45:active {
+  border-color: #d9dadd!important;
+  outline: none;
+}
+
+.emotion-40 {
+  display: inherit;
+}
+
+.emotion-40[data-container-full-width="true"] {
+  width: 100%;
+}
+
+.emotion-42 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-44 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0.5rem;
+  padding-right: 0;
+  padding-left: 1rem;
+  cursor: pointer;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  width: 100%;
+  overflow: hidden;
+}
+
+.emotion-44[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-44[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-44[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-44[data-state='neutral'] {
+  border: 1px solid #d9dadd;
+}
+
+.emotion-44[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-44[data-state='neutral']:not([data-disabled='true']):hover {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-44[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.emotion-44[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
+.emotion-44[data-state='success'] {
+  border: 1px solid #22674e;
+}
+
+.emotion-44[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-44[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
+.emotion-44[data-state='danger'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-44[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-44[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
+}
+
+.emotion-44:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
+}
+
+.emotion-44[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-44[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-47 {
+  color: #3f4250;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.emotion-49 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding-right: 1rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-51 {
+  vertical-align: middle;
+  fill: #3f4250;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
+}
+
+.emotion-51 .fillStroke {
+  stroke: #3f4250;
+  fill: none;
+}
+
+.emotion-80 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.emotion-92 {
+  color: #727683;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <fieldset
+        class="emotion-2 emotion-3"
+      >
+        <div
+          class="emotion-4 emotion-1"
+        >
+          <div
+            class="emotion-6 emotion-7"
+          >
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="true"
+              data-disabled="false"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="true"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    checked=""
+                    class="emotion-16 emotion-17"
+                    id=":r7i:"
+                    tabindex="-1"
+                    type="radio"
+                    value="ubuntu"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="Ubuntu"
+                      class="emotion-30 emotion-31"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/ubuntu.svg"
+                      width="56"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    >
+                      <label
+                        class="emotion-34 emotion-35 emotion-36"
+                        for=":r7i:"
+                      >
+                        Ubuntu
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-37 emotion-38 emotion-39"
+                  >
+                    <div
+                      aria-controls=":r7o:"
+                      aria-describedby=":r7o:"
+                      class="emotion-40 emotion-41"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="Ubuntu option"
+                        class="emotion-42 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-44 emotion-45"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r7n:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <div
+                            class="emotion-46 emotion-47 emotion-36"
+                          >
+                            Ubuntu 20.04 Focal Fossa
+                          </div>
+                          <div
+                            class="emotion-49 emotion-50"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-51 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="false"
+              data-disabled="false"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="false"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    class="emotion-16 emotion-17"
+                    id=":r7r:"
+                    tabindex="-1"
+                    type="radio"
+                    value="debian"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="Debian"
+                      class="emotion-30 emotion-31"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/debian.svg"
+                      width="56"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    >
+                      <label
+                        class="emotion-34 emotion-80 emotion-36"
+                        for=":r7r:"
+                      >
+                        Debian
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-37 emotion-38 emotion-39"
+                  >
+                    <div
+                      aria-controls=":r81:"
+                      aria-describedby=":r81:"
+                      class="emotion-40 emotion-41"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="Debian option"
+                        class="emotion-42 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-44 emotion-45"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r80:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <p
+                            class="emotion-91 emotion-92 emotion-36"
+                          >
+                            Select item
+                          </p>
+                          <div
+                            class="emotion-49 emotion-50"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-51 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="false"
+              data-disabled="false"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="false"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    class="emotion-16 emotion-17"
+                    id=":r84:"
+                    tabindex="-1"
+                    type="radio"
+                    value="centos"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="CentOS"
+                      class="emotion-30 emotion-31"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/centos.svg"
+                      width="56"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    >
+                      <label
+                        class="emotion-34 emotion-80 emotion-36"
+                        for=":r84:"
+                      >
+                        CentOS
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-37 emotion-38 emotion-39"
+                  >
+                    <div
+                      aria-controls=":r8a:"
+                      aria-describedby=":r8a:"
+                      class="emotion-40 emotion-41"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="CentOS option"
+                        class="emotion-42 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-44 emotion-45"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r89:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <p
+                            class="emotion-91 emotion-92 emotion-36"
+                          >
+                            Select item
+                          </p>
+                          <div
+                            class="emotion-49 emotion-50"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-51 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </fieldset>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectableCardOptionGroup > renders correctly with all options disabled 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.75rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-6 {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+}
+
+.emotion-9 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding: 1rem;
+  border-radius: 0.25rem;
+  -webkit-transition: border-color 200ms ease,box-shadow 200ms ease;
+  transition: border-color 200ms ease,box-shadow 200ms ease;
+  cursor: pointer;
+  background: #ffffff;
+  border: 1px solid #d9dadd;
+  color: #3f4250;
+  padding: 0;
+  padding-top: 1rem;
+  cursor: pointer;
+}
+
+.emotion-9[data-has-label='false']>:first-child {
+  margin-bottom: -0.25rem;
+}
+
+.emotion-9[data-checked='true'] {
+  border: 1px solid #8c40ef;
+}
+
+.emotion-9[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-9[data-disabled='true'] {
+  border: 1px solid #e9eaeb;
+  color: #b5b7bd;
+  background: #f3f3f4;
+  cursor: not-allowed;
+}
+
+.emotion-9[data-image="illustration"] {
+  padding: 0rem;
+}
+
+.emotion-9[data-image="icon"] {
+  padding: 0rem;
+  padding-right: 1rem;
+}
+
+.emotion-9:hover:not([data-error='true']):not([data-disabled='true']),
+.emotion-9:active:not([data-error='true']):not([data-disabled='true']) {
+  border: 1px solid #8c40ef;
+}
+
+.emotion-9:hover:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'],
+.emotion-9:active:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'] {
+  box-shadow: 0px 4px 16px 4px #f6f3ffcc;
+}
+
+.emotion-9[data-has-label='true'] .emotion-12,
+.emotion-9[data-has-label='true'] .eqr7bqq1 {
+  width: 100%;
+}
+
+.emotion-9 .emotion-12 {
+  position: absolute;
+  padding: 8px;
+  margin-top: -1rem;
+}
+
+.emotion-11 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-14 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  gap: 0.5rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  pointer-events: none;
+}
+
+.emotion-14[aria-disabled='false'],
+.emotion-14[aria-disabled='false']>label {
+  cursor: pointer;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17+.emotion-19 {
+  fill: #8c40ef;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17+.emotion-19 .emotion-21 {
+  fill: #e5dbfd;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17[aria-invalid='true']+.emotion-19 {
+  fill: #b3144d;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17[aria-invalid='true']+.emotion-19 .emotion-21 {
+  fill: #ffd3e3;
+}
+
+.emotion-14[aria-disabled='true'] {
+  cursor: not-allowed;
+  color: #b5b7bd;
+}
+
+.emotion-14[aria-disabled='true']>label,
+.emotion-14[aria-disabled='true'] .emotion-17 {
+  cursor: not-allowed;
+}
+
+.emotion-14[aria-disabled='true'] .emotion-19 {
+  fill: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-14[aria-disabled='true'] .emotion-19 .emotion-21 {
+  fill: #f3f3f4;
+}
+
+.emotion-14[data-checked='true'] {
+  color: #641cb3;
+}
+
+.emotion-14[data-error='true'] {
+  color: #b3144d;
+}
+
+.emotion-14[aria-disabled='true'] {
+  color: #b5b7bd;
+}
+
+.emotion-16 {
+  cursor: pointer;
+  position: absolute;
+  height: 1.5rem;
+  width: 1.5rem;
+  opacity: 0;
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.emotion-16+.emotion-19 .emotion-23 {
+  transform-origin: center;
+  -webkit-transition: 200ms -webkit-transform ease-in-out;
+  transition: 200ms transform ease-in-out;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+}
+
+.emotion-16:checked+svg .emotion-23 {
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
+
+.emotion-16:checked[aria-disabled='false'][aria-invalid='false']+.emotion-19 {
+  fill: #8c40ef;
+}
+
+.emotion-16:checked[aria-disabled='true'][aria-invalid='false']+.emotion-19 {
+  fill: #d8c5fc;
+}
+
+.emotion-16[aria-invalid='true']:not([aria-disabled='true'])+.emotion-19 {
+  fill: #e51963;
+}
+
+.emotion-16[aria-disabled='false']:active+.emotion-19 {
+  background-color: #5e127e40;
+  fill: #8c40ef;
+}
+
+.emotion-16[aria-disabled='false']:active+.emotion-19 .emotion-21 {
+  fill: #f1eefc;
+}
+
+.emotion-16[aria-disabled='false']:focus-visible+.emotion-19 {
+  outline: -webkit-focus-ring-color auto 1px;
+}
+
+.emotion-16[aria-invalid='true']:focus+.emotion-19 {
+  background-color: #f91b6c40;
+  fill: #e51963;
+}
+
+.emotion-16[aria-invalid='true']:focus+.emotion-19 .emotion-21 {
+  fill: #ffebf2;
+}
+
+.emotion-18 {
+  height: 1.5rem;
+  width: 1.5rem;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  border-radius: 100%;
+  fill: #d9dadd;
+}
+
+.emotion-18 .emotion-21 {
+  fill: #ffffff;
+}
+
+.emotion-24 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.emotion-24[data-has-label='true'] {
+  padding-left: 2rem;
+}
+
+.emotion-24[data-has-label='false'] {
+  display: contents;
+}
+
+.emotion-26 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 1rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+}
+
+.emotion-28 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+  padding: 0 1rem;
+}
+
+.emotion-30[data-disabled='true'] {
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+}
+
+.emotion-32 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.emotion-35 {
+  color: #d8c5fc;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: not-allowed;
+}
+
+.emotion-38 {
+  width: 100%;
+}
+
+.emotion-38 .emotion-45 {
+  border-radius: 0 0 0.25rem 0.25rem;
+  border-bottom: 0!important;
+  border-right: 0!important;
+  border-left: 0!important;
+}
+
+.emotion-38 .emotion-45:hover,
+.emotion-38 .emotion-45:focus,
+.emotion-38 .emotion-45:active {
+  border-color: #e9eaeb!important;
+  outline: none;
+}
+
+.emotion-40 {
+  display: inherit;
+}
+
+.emotion-40[data-container-full-width="true"] {
+  width: 100%;
+}
+
+.emotion-42 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-44 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0.5rem;
+  padding-right: 0;
+  padding-left: 1rem;
+  cursor: pointer;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  width: 100%;
+  overflow: hidden;
+}
+
+.emotion-44[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-44[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-44[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-44[data-state='neutral'] {
+  border: 1px solid #d9dadd;
+}
+
+.emotion-44[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-44[data-state='neutral']:not([data-disabled='true']):hover {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-44[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.emotion-44[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
+.emotion-44[data-state='success'] {
+  border: 1px solid #22674e;
+}
+
+.emotion-44[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-44[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
+.emotion-44[data-state='danger'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-44[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-44[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
+}
+
+.emotion-44:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
+}
+
+.emotion-44[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-44[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-47 {
+  color: #b5b7bd;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.emotion-49 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding-right: 1rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-51 {
+  vertical-align: middle;
+  fill: #b5b7bd;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
+}
+
+.emotion-51 .fillStroke {
+  stroke: #b5b7bd;
+  fill: none;
+}
+
+.emotion-80 {
+  color: #b5b7bd;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: not-allowed;
+}
+
+.emotion-92 {
+  color: #b5b7bd;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <fieldset
+        class="emotion-2 emotion-3"
+      >
+        <div
+          class="emotion-4 emotion-1"
+        >
+          <div
+            class="emotion-6 emotion-7"
+          >
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="true"
+              data-disabled="true"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="true"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="true"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="true"
+                    aria-invalid="false"
+                    checked=""
+                    class="emotion-16 emotion-17"
+                    disabled=""
+                    id=":r3a:"
+                    tabindex="-1"
+                    type="radio"
+                    value="ubuntu"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="Ubuntu"
+                      class="emotion-30 emotion-31"
+                      data-disabled="true"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/ubuntu.svg"
+                      width="56"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    >
+                      <label
+                        class="emotion-34 emotion-35 emotion-36"
+                        for=":r3a:"
+                      >
+                        Ubuntu
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-37 emotion-38 emotion-39"
+                  >
+                    <div
+                      aria-controls=":r3g:"
+                      aria-describedby=":r3g:"
+                      class="emotion-40 emotion-41"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="Ubuntu option"
+                        class="emotion-42 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-44 emotion-45"
+                          data-disabled="true"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r3f:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <div
+                            class="emotion-46 emotion-47 emotion-36"
+                          >
+                            Ubuntu 20.04 Focal Fossa
+                          </div>
+                          <div
+                            class="emotion-49 emotion-50"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-51 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="false"
+              data-disabled="true"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="true"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="false"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="true"
+                    aria-invalid="false"
+                    class="emotion-16 emotion-17"
+                    disabled=""
+                    id=":r3j:"
+                    tabindex="-1"
+                    type="radio"
+                    value="debian"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="Debian"
+                      class="emotion-30 emotion-31"
+                      data-disabled="true"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/debian.svg"
+                      width="56"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    >
+                      <label
+                        class="emotion-34 emotion-80 emotion-36"
+                        for=":r3j:"
+                      >
+                        Debian
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-37 emotion-38 emotion-39"
+                  >
+                    <div
+                      aria-controls=":r3p:"
+                      aria-describedby=":r3p:"
+                      class="emotion-40 emotion-41"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="Debian option"
+                        class="emotion-42 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-44 emotion-45"
+                          data-disabled="true"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r3o:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <p
+                            class="emotion-91 emotion-92 emotion-36"
+                          >
+                            Select item
+                          </p>
+                          <div
+                            class="emotion-49 emotion-50"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-51 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="false"
+              data-disabled="true"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="true"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="false"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="true"
+                    aria-invalid="false"
+                    class="emotion-16 emotion-17"
+                    disabled=""
+                    id=":r3s:"
+                    tabindex="-1"
+                    type="radio"
+                    value="centos"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="CentOS"
+                      class="emotion-30 emotion-31"
+                      data-disabled="true"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/centos.svg"
+                      width="56"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    >
+                      <label
+                        class="emotion-34 emotion-80 emotion-36"
+                        for=":r3s:"
+                      >
+                        CentOS
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-37 emotion-38 emotion-39"
+                  >
+                    <div
+                      aria-controls=":r42:"
+                      aria-describedby=":r42:"
+                      class="emotion-40 emotion-41"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="CentOS option"
+                        class="emotion-42 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-44 emotion-45"
+                          data-disabled="true"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r41:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <p
+                            class="emotion-91 emotion-92 emotion-36"
+                          >
+                            Select item
+                          </p>
+                          <div
+                            class="emotion-49 emotion-50"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-51 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </fieldset>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectableCardOptionGroup > renders correctly with aria-label 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.75rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-6 {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+}
+
+.emotion-9 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding: 1rem;
+  border-radius: 0.25rem;
+  -webkit-transition: border-color 200ms ease,box-shadow 200ms ease;
+  transition: border-color 200ms ease,box-shadow 200ms ease;
+  cursor: pointer;
+  background: #ffffff;
+  border: 1px solid #d9dadd;
+  color: #3f4250;
+  padding: 0;
+  padding-top: 1rem;
+  cursor: pointer;
+}
+
+.emotion-9[data-has-label='false']>:first-child {
+  margin-bottom: -0.25rem;
+}
+
+.emotion-9[data-checked='true'] {
+  border: 1px solid #8c40ef;
+}
+
+.emotion-9[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-9[data-disabled='true'] {
+  border: 1px solid #e9eaeb;
+  color: #b5b7bd;
+  background: #f3f3f4;
+  cursor: not-allowed;
+}
+
+.emotion-9[data-image="illustration"] {
+  padding: 0rem;
+}
+
+.emotion-9[data-image="icon"] {
+  padding: 0rem;
+  padding-right: 1rem;
+}
+
+.emotion-9:hover:not([data-error='true']):not([data-disabled='true']),
+.emotion-9:active:not([data-error='true']):not([data-disabled='true']) {
+  border: 1px solid #8c40ef;
+}
+
+.emotion-9:hover:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'],
+.emotion-9:active:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'] {
+  box-shadow: 0px 4px 16px 4px #f6f3ffcc;
+}
+
+.emotion-9[data-has-label='true'] .emotion-12,
+.emotion-9[data-has-label='true'] .eqr7bqq1 {
+  width: 100%;
+}
+
+.emotion-9 .emotion-12 {
+  position: absolute;
+  padding: 8px;
+  margin-top: -1rem;
+}
+
+.emotion-11 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-14 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  gap: 0.5rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  pointer-events: none;
+}
+
+.emotion-14[aria-disabled='false'],
+.emotion-14[aria-disabled='false']>label {
+  cursor: pointer;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17+.emotion-19 {
+  fill: #8c40ef;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17+.emotion-19 .emotion-21 {
+  fill: #e5dbfd;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17[aria-invalid='true']+.emotion-19 {
+  fill: #b3144d;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17[aria-invalid='true']+.emotion-19 .emotion-21 {
+  fill: #ffd3e3;
+}
+
+.emotion-14[aria-disabled='true'] {
+  cursor: not-allowed;
+  color: #b5b7bd;
+}
+
+.emotion-14[aria-disabled='true']>label,
+.emotion-14[aria-disabled='true'] .emotion-17 {
+  cursor: not-allowed;
+}
+
+.emotion-14[aria-disabled='true'] .emotion-19 {
+  fill: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-14[aria-disabled='true'] .emotion-19 .emotion-21 {
+  fill: #f3f3f4;
+}
+
+.emotion-14[data-checked='true'] {
+  color: #641cb3;
+}
+
+.emotion-14[data-error='true'] {
+  color: #b3144d;
+}
+
+.emotion-14[aria-disabled='true'] {
+  color: #b5b7bd;
+}
+
+.emotion-16 {
+  cursor: pointer;
+  position: absolute;
+  height: 1.5rem;
+  width: 1.5rem;
+  opacity: 0;
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.emotion-16+.emotion-19 .emotion-23 {
+  transform-origin: center;
+  -webkit-transition: 200ms -webkit-transform ease-in-out;
+  transition: 200ms transform ease-in-out;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+}
+
+.emotion-16:checked+svg .emotion-23 {
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
+
+.emotion-16:checked[aria-disabled='false'][aria-invalid='false']+.emotion-19 {
+  fill: #8c40ef;
+}
+
+.emotion-16:checked[aria-disabled='true'][aria-invalid='false']+.emotion-19 {
+  fill: #d8c5fc;
+}
+
+.emotion-16[aria-invalid='true']:not([aria-disabled='true'])+.emotion-19 {
+  fill: #e51963;
+}
+
+.emotion-16[aria-disabled='false']:active+.emotion-19 {
+  background-color: #5e127e40;
+  fill: #8c40ef;
+}
+
+.emotion-16[aria-disabled='false']:active+.emotion-19 .emotion-21 {
+  fill: #f1eefc;
+}
+
+.emotion-16[aria-disabled='false']:focus-visible+.emotion-19 {
+  outline: -webkit-focus-ring-color auto 1px;
+}
+
+.emotion-16[aria-invalid='true']:focus+.emotion-19 {
+  background-color: #f91b6c40;
+  fill: #e51963;
+}
+
+.emotion-16[aria-invalid='true']:focus+.emotion-19 .emotion-21 {
+  fill: #ffebf2;
+}
+
+.emotion-18 {
+  height: 1.5rem;
+  width: 1.5rem;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  border-radius: 100%;
+  fill: #d9dadd;
+}
+
+.emotion-18 .emotion-21 {
+  fill: #ffffff;
+}
+
+.emotion-24 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.emotion-24[data-has-label='true'] {
+  padding-left: 2rem;
+}
+
+.emotion-24[data-has-label='false'] {
+  display: contents;
+}
+
+.emotion-26 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 1rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+}
+
+.emotion-28 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+  padding: 0 1rem;
+}
+
+.emotion-30[data-disabled='true'] {
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+}
+
+.emotion-32 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.emotion-35 {
+  width: 100%;
+}
+
+.emotion-35 .emotion-42 {
+  border-radius: 0 0 0.25rem 0.25rem;
+  border-bottom: 0!important;
+  border-right: 0!important;
+  border-left: 0!important;
+}
+
+.emotion-35 .emotion-42:hover,
+.emotion-35 .emotion-42:focus,
+.emotion-35 .emotion-42:active {
+  border-color: #d9dadd!important;
+  outline: none;
+}
+
+.emotion-37 {
+  display: inherit;
+}
+
+.emotion-37[data-container-full-width="true"] {
+  width: 100%;
+}
+
+.emotion-39 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-41 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0.5rem;
+  padding-right: 0;
+  padding-left: 1rem;
+  cursor: pointer;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  width: 100%;
+  overflow: hidden;
+}
+
+.emotion-41[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-41[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-41[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-41[data-state='neutral'] {
+  border: 1px solid #d9dadd;
+}
+
+.emotion-41[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-41[data-state='neutral']:not([data-disabled='true']):hover {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-41[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.emotion-41[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
+.emotion-41[data-state='success'] {
+  border: 1px solid #22674e;
+}
+
+.emotion-41[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-41[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
+.emotion-41[data-state='danger'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-41[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-41[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
+}
+
+.emotion-41:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
+}
+
+.emotion-41[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-41[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-44 {
+  color: #3f4250;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.emotion-46 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding-right: 1rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-48 {
+  vertical-align: middle;
+  fill: #3f4250;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
+}
+
+.emotion-48 .fillStroke {
+  stroke: #3f4250;
+  fill: none;
+}
+
+.emotion-86 {
+  color: #727683;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <fieldset
+        class="emotion-2 emotion-3"
+      >
+        <div
+          class="emotion-4 emotion-1"
+        >
+          <div
+            class="emotion-6 emotion-7"
+          >
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="true"
+              data-disabled="false"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="true"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    aria-label="Ubuntu"
+                    checked=""
+                    class="emotion-16 emotion-17"
+                    id=":r1p:"
+                    tabindex="-1"
+                    type="radio"
+                    value="ubuntu"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="ubuntu"
+                      class="emotion-30 emotion-31"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/ubuntu.svg"
+                      width="40"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    />
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-34 emotion-35 emotion-36"
+                  >
+                    <div
+                      aria-controls=":r1s:"
+                      aria-describedby=":r1s:"
+                      class="emotion-37 emotion-38"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="ubuntu option"
+                        class="emotion-39 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-41 emotion-42"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r1r:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <div
+                            class="emotion-43 emotion-44 emotion-45"
+                          >
+                            Ubuntu 20.04 Focal Fossa
+                          </div>
+                          <div
+                            class="emotion-46 emotion-47"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-48 emotion-49"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="false"
+              data-disabled="false"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="false"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    aria-label="Debian"
+                    class="emotion-16 emotion-17"
+                    id=":r21:"
+                    tabindex="-1"
+                    type="radio"
+                    value="debian"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="debian"
+                      class="emotion-30 emotion-31"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/debian.svg"
+                      width="40"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    />
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-34 emotion-35 emotion-36"
+                  >
+                    <div
+                      aria-controls=":r24:"
+                      aria-describedby=":r24:"
+                      class="emotion-37 emotion-38"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="debian option"
+                        class="emotion-39 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-41 emotion-42"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r23:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <p
+                            class="emotion-85 emotion-86 emotion-45"
+                          >
+                            Select item
+                          </p>
+                          <div
+                            class="emotion-46 emotion-47"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-48 emotion-49"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="false"
+              data-disabled="false"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="false"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    aria-label="CentOS"
+                    class="emotion-16 emotion-17"
+                    id=":r29:"
+                    tabindex="-1"
+                    type="radio"
+                    value="centos"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="centos"
+                      class="emotion-30 emotion-31"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/centos.svg"
+                      width="40"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    />
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-34 emotion-35 emotion-36"
+                  >
+                    <div
+                      aria-controls=":r2c:"
+                      aria-describedby=":r2c:"
+                      class="emotion-37 emotion-38"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="centos option"
+                        class="emotion-39 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-41 emotion-42"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r2b:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <p
+                            class="emotion-85 emotion-86 emotion-45"
+                          >
+                            Select item
+                          </p>
+                          <div
+                            class="emotion-46 emotion-47"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-48 emotion-49"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </fieldset>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectableCardOptionGroup > renders correctly with error as boolean 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.75rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-6 {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+}
+
+.emotion-9 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding: 1rem;
+  border-radius: 0.25rem;
+  -webkit-transition: border-color 200ms ease,box-shadow 200ms ease;
+  transition: border-color 200ms ease,box-shadow 200ms ease;
+  cursor: pointer;
+  background: #ffffff;
+  border: 1px solid #d9dadd;
+  color: #3f4250;
+  padding: 0;
+  padding-top: 1rem;
+  cursor: pointer;
+}
+
+.emotion-9[data-has-label='false']>:first-child {
+  margin-bottom: -0.25rem;
+}
+
+.emotion-9[data-checked='true'] {
+  border: 1px solid #8c40ef;
+}
+
+.emotion-9[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-9[data-disabled='true'] {
+  border: 1px solid #e9eaeb;
+  color: #b5b7bd;
+  background: #f3f3f4;
+  cursor: not-allowed;
+}
+
+.emotion-9[data-image="illustration"] {
+  padding: 0rem;
+}
+
+.emotion-9[data-image="icon"] {
+  padding: 0rem;
+  padding-right: 1rem;
+}
+
+.emotion-9:hover:not([data-error='true']):not([data-disabled='true']),
+.emotion-9:active:not([data-error='true']):not([data-disabled='true']) {
+  border: 1px solid #8c40ef;
+}
+
+.emotion-9:hover:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'],
+.emotion-9:active:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'] {
+  box-shadow: 0px 4px 16px 4px #f6f3ffcc;
+}
+
+.emotion-9[data-has-label='true'] .emotion-12,
+.emotion-9[data-has-label='true'] .eqr7bqq1 {
+  width: 100%;
+}
+
+.emotion-9 .emotion-12 {
+  position: absolute;
+  padding: 8px;
+  margin-top: -1rem;
+}
+
+.emotion-11 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-14 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  gap: 0.5rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  pointer-events: none;
+}
+
+.emotion-14[aria-disabled='false'],
+.emotion-14[aria-disabled='false']>label {
+  cursor: pointer;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17+.emotion-19 {
+  fill: #8c40ef;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17+.emotion-19 .emotion-21 {
+  fill: #e5dbfd;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17[aria-invalid='true']+.emotion-19 {
+  fill: #b3144d;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17[aria-invalid='true']+.emotion-19 .emotion-21 {
+  fill: #ffd3e3;
+}
+
+.emotion-14[aria-disabled='true'] {
+  cursor: not-allowed;
+  color: #b5b7bd;
+}
+
+.emotion-14[aria-disabled='true']>label,
+.emotion-14[aria-disabled='true'] .emotion-17 {
+  cursor: not-allowed;
+}
+
+.emotion-14[aria-disabled='true'] .emotion-19 {
+  fill: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-14[aria-disabled='true'] .emotion-19 .emotion-21 {
+  fill: #f3f3f4;
+}
+
+.emotion-14[data-checked='true'] {
+  color: #641cb3;
+}
+
+.emotion-14[data-error='true'] {
+  color: #b3144d;
+}
+
+.emotion-14[aria-disabled='true'] {
+  color: #b5b7bd;
+}
+
+.emotion-16 {
+  cursor: pointer;
+  position: absolute;
+  height: 1.5rem;
+  width: 1.5rem;
+  opacity: 0;
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.emotion-16+.emotion-19 .emotion-23 {
+  transform-origin: center;
+  -webkit-transition: 200ms -webkit-transform ease-in-out;
+  transition: 200ms transform ease-in-out;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+}
+
+.emotion-16:checked+svg .emotion-23 {
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
+
+.emotion-16:checked[aria-disabled='false'][aria-invalid='false']+.emotion-19 {
+  fill: #8c40ef;
+}
+
+.emotion-16:checked[aria-disabled='true'][aria-invalid='false']+.emotion-19 {
+  fill: #d8c5fc;
+}
+
+.emotion-16[aria-invalid='true']:not([aria-disabled='true'])+.emotion-19 {
+  fill: #e51963;
+}
+
+.emotion-16[aria-disabled='false']:active+.emotion-19 {
+  background-color: #5e127e40;
+  fill: #8c40ef;
+}
+
+.emotion-16[aria-disabled='false']:active+.emotion-19 .emotion-21 {
+  fill: #f1eefc;
+}
+
+.emotion-16[aria-disabled='false']:focus-visible+.emotion-19 {
+  outline: -webkit-focus-ring-color auto 1px;
+}
+
+.emotion-16[aria-invalid='true']:focus+.emotion-19 {
+  background-color: #f91b6c40;
+  fill: #e51963;
+}
+
+.emotion-16[aria-invalid='true']:focus+.emotion-19 .emotion-21 {
+  fill: #ffebf2;
+}
+
+.emotion-18 {
+  height: 1.5rem;
+  width: 1.5rem;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  border-radius: 100%;
+  fill: #d9dadd;
+}
+
+.emotion-18 .emotion-21 {
+  fill: #ffffff;
+}
+
+.emotion-24 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.emotion-24[data-has-label='true'] {
+  padding-left: 2rem;
+}
+
+.emotion-24[data-has-label='false'] {
+  display: contents;
+}
+
+.emotion-26 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 1rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+}
+
+.emotion-28 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+  padding: 0 1rem;
+}
+
+.emotion-30[data-disabled='true'] {
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+}
+
+.emotion-32 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.emotion-35 {
+  color: #641cb3;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.emotion-38 {
+  width: 100%;
+}
+
+.emotion-38 .emotion-45 {
+  border-radius: 0 0 0.25rem 0.25rem;
+  border-bottom: 0!important;
+  border-right: 0!important;
+  border-left: 0!important;
+}
+
+.emotion-38 .emotion-45:hover,
+.emotion-38 .emotion-45:focus,
+.emotion-38 .emotion-45:active {
+  border-color: #b3144d!important;
+  outline: none;
+}
+
+.emotion-40 {
+  display: inherit;
+}
+
+.emotion-40[data-container-full-width="true"] {
+  width: 100%;
+}
+
+.emotion-42 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-44 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0.5rem;
+  padding-right: 0;
+  padding-left: 1rem;
+  cursor: pointer;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  width: 100%;
+  overflow: hidden;
+}
+
+.emotion-44[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-44[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-44[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-44[data-state='neutral'] {
+  border: 1px solid #d9dadd;
+}
+
+.emotion-44[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-44[data-state='neutral']:not([data-disabled='true']):hover {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-44[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.emotion-44[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
+.emotion-44[data-state='success'] {
+  border: 1px solid #22674e;
+}
+
+.emotion-44[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-44[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
+.emotion-44[data-state='danger'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-44[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-44[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
+}
+
+.emotion-44:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
+}
+
+.emotion-44[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-44[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-47 {
+  color: #3f4250;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.emotion-49 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding-right: 1rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-51 {
+  vertical-align: middle;
+  fill: #b3144d;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
+}
+
+.emotion-51 .fillStroke {
+  stroke: #b3144d;
+  fill: none;
+}
+
+.emotion-53 {
+  vertical-align: middle;
+  fill: #3f4250;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
+}
+
+.emotion-53 .fillStroke {
+  stroke: #3f4250;
+  fill: none;
+}
+
+.emotion-82 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.emotion-94 {
+  color: #727683;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <fieldset
+        class="emotion-2 emotion-3"
+      >
+        <div
+          class="emotion-4 emotion-1"
+        >
+          <div
+            class="emotion-6 emotion-7"
+          >
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="true"
+              data-disabled="false"
+              data-error="true"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="true"
+                  data-error="true"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="true"
+                    checked=""
+                    class="emotion-16 emotion-17"
+                    id=":r5s:"
+                    tabindex="-1"
+                    type="radio"
+                    value="ubuntu"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="Ubuntu"
+                      class="emotion-30 emotion-31"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/ubuntu.svg"
+                      width="56"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    >
+                      <label
+                        class="emotion-34 emotion-35 emotion-36"
+                        for=":r5s:"
+                      >
+                        Ubuntu
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-37 emotion-38 emotion-39"
+                  >
+                    <div
+                      aria-controls=":r62:"
+                      aria-describedby=":r62:"
+                      class="emotion-40 emotion-41"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="Ubuntu option"
+                        class="emotion-42 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-44 emotion-45"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="danger"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r61:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <div
+                            class="emotion-46 emotion-47 emotion-36"
+                          >
+                            Ubuntu 20.04 Focal Fossa
+                          </div>
+                          <div
+                            class="emotion-49 emotion-50"
+                          >
+                            <svg
+                              class="emotion-51 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM10 5C10.4142 5 10.75 5.33579 10.75 5.75V10.25C10.75 10.6642 10.4142 11 10 11C9.58579 11 9.25 10.6642 9.25 10.25V5.75C9.25 5.33579 9.58579 5 10 5ZM10 15C10.5523 15 11 14.5523 11 14C11 13.4477 10.5523 13 10 13C9.44771 13 9 13.4477 9 14C9 14.5523 9.44771 15 10 15Z"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-53 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="false"
+              data-disabled="false"
+              data-error="true"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="false"
+                  data-error="true"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="true"
+                    class="emotion-16 emotion-17"
+                    id=":r65:"
+                    tabindex="-1"
+                    type="radio"
+                    value="debian"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="Debian"
+                      class="emotion-30 emotion-31"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/debian.svg"
+                      width="56"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    >
+                      <label
+                        class="emotion-34 emotion-82 emotion-36"
+                        for=":r65:"
+                      >
+                        Debian
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-37 emotion-38 emotion-39"
+                  >
+                    <div
+                      aria-controls=":r6b:"
+                      aria-describedby=":r6b:"
+                      class="emotion-40 emotion-41"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="Debian option"
+                        class="emotion-42 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-44 emotion-45"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="danger"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r6a:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <p
+                            class="emotion-93 emotion-94 emotion-36"
+                          >
+                            Select item
+                          </p>
+                          <div
+                            class="emotion-49 emotion-50"
+                          >
+                            <svg
+                              class="emotion-51 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM10 5C10.4142 5 10.75 5.33579 10.75 5.75V10.25C10.75 10.6642 10.4142 11 10 11C9.58579 11 9.25 10.6642 9.25 10.25V5.75C9.25 5.33579 9.58579 5 10 5ZM10 15C10.5523 15 11 14.5523 11 14C11 13.4477 10.5523 13 10 13C9.44771 13 9 13.4477 9 14C9 14.5523 9.44771 15 10 15Z"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-53 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="false"
+              data-disabled="false"
+              data-error="true"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="false"
+                  data-error="true"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="true"
+                    class="emotion-16 emotion-17"
+                    id=":r6e:"
+                    tabindex="-1"
+                    type="radio"
+                    value="centos"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="CentOS"
+                      class="emotion-30 emotion-31"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/centos.svg"
+                      width="56"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    >
+                      <label
+                        class="emotion-34 emotion-82 emotion-36"
+                        for=":r6e:"
+                      >
+                        CentOS
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-37 emotion-38 emotion-39"
+                  >
+                    <div
+                      aria-controls=":r6k:"
+                      aria-describedby=":r6k:"
+                      class="emotion-40 emotion-41"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="CentOS option"
+                        class="emotion-42 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-44 emotion-45"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="danger"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r6j:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <p
+                            class="emotion-93 emotion-94 emotion-36"
+                          >
+                            Select item
+                          </p>
+                          <div
+                            class="emotion-49 emotion-50"
+                          >
+                            <svg
+                              class="emotion-51 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM10 5C10.4142 5 10.75 5.33579 10.75 5.75V10.25C10.75 10.6642 10.4142 11 10 11C9.58579 11 9.25 10.6642 9.25 10.25V5.75C9.25 5.33579 9.58579 5 10 5ZM10 15C10.5523 15 11 14.5523 11 14C11 13.4477 10.5523 13 10 13C9.44771 13 9 13.4477 9 14C9 14.5523 9.44771 15 10 15Z"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-53 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </fieldset>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectableCardOptionGroup > renders correctly with error message 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.75rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-6 {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+}
+
+.emotion-9 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding: 1rem;
+  border-radius: 0.25rem;
+  -webkit-transition: border-color 200ms ease,box-shadow 200ms ease;
+  transition: border-color 200ms ease,box-shadow 200ms ease;
+  cursor: pointer;
+  background: #ffffff;
+  border: 1px solid #d9dadd;
+  color: #3f4250;
+  padding: 0;
+  padding-top: 1rem;
+  cursor: pointer;
+}
+
+.emotion-9[data-has-label='false']>:first-child {
+  margin-bottom: -0.25rem;
+}
+
+.emotion-9[data-checked='true'] {
+  border: 1px solid #8c40ef;
+}
+
+.emotion-9[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-9[data-disabled='true'] {
+  border: 1px solid #e9eaeb;
+  color: #b5b7bd;
+  background: #f3f3f4;
+  cursor: not-allowed;
+}
+
+.emotion-9[data-image="illustration"] {
+  padding: 0rem;
+}
+
+.emotion-9[data-image="icon"] {
+  padding: 0rem;
+  padding-right: 1rem;
+}
+
+.emotion-9:hover:not([data-error='true']):not([data-disabled='true']),
+.emotion-9:active:not([data-error='true']):not([data-disabled='true']) {
+  border: 1px solid #8c40ef;
+}
+
+.emotion-9:hover:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'],
+.emotion-9:active:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'] {
+  box-shadow: 0px 4px 16px 4px #f6f3ffcc;
+}
+
+.emotion-9[data-has-label='true'] .emotion-12,
+.emotion-9[data-has-label='true'] .eqr7bqq1 {
+  width: 100%;
+}
+
+.emotion-9 .emotion-12 {
+  position: absolute;
+  padding: 8px;
+  margin-top: -1rem;
+}
+
+.emotion-11 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-14 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  gap: 0.5rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  pointer-events: none;
+}
+
+.emotion-14[aria-disabled='false'],
+.emotion-14[aria-disabled='false']>label {
+  cursor: pointer;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17+.emotion-19 {
+  fill: #8c40ef;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17+.emotion-19 .emotion-21 {
+  fill: #e5dbfd;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17[aria-invalid='true']+.emotion-19 {
+  fill: #b3144d;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17[aria-invalid='true']+.emotion-19 .emotion-21 {
+  fill: #ffd3e3;
+}
+
+.emotion-14[aria-disabled='true'] {
+  cursor: not-allowed;
+  color: #b5b7bd;
+}
+
+.emotion-14[aria-disabled='true']>label,
+.emotion-14[aria-disabled='true'] .emotion-17 {
+  cursor: not-allowed;
+}
+
+.emotion-14[aria-disabled='true'] .emotion-19 {
+  fill: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-14[aria-disabled='true'] .emotion-19 .emotion-21 {
+  fill: #f3f3f4;
+}
+
+.emotion-14[data-checked='true'] {
+  color: #641cb3;
+}
+
+.emotion-14[data-error='true'] {
+  color: #b3144d;
+}
+
+.emotion-14[aria-disabled='true'] {
+  color: #b5b7bd;
+}
+
+.emotion-16 {
+  cursor: pointer;
+  position: absolute;
+  height: 1.5rem;
+  width: 1.5rem;
+  opacity: 0;
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.emotion-16+.emotion-19 .emotion-23 {
+  transform-origin: center;
+  -webkit-transition: 200ms -webkit-transform ease-in-out;
+  transition: 200ms transform ease-in-out;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+}
+
+.emotion-16:checked+svg .emotion-23 {
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
+
+.emotion-16:checked[aria-disabled='false'][aria-invalid='false']+.emotion-19 {
+  fill: #8c40ef;
+}
+
+.emotion-16:checked[aria-disabled='true'][aria-invalid='false']+.emotion-19 {
+  fill: #d8c5fc;
+}
+
+.emotion-16[aria-invalid='true']:not([aria-disabled='true'])+.emotion-19 {
+  fill: #e51963;
+}
+
+.emotion-16[aria-disabled='false']:active+.emotion-19 {
+  background-color: #5e127e40;
+  fill: #8c40ef;
+}
+
+.emotion-16[aria-disabled='false']:active+.emotion-19 .emotion-21 {
+  fill: #f1eefc;
+}
+
+.emotion-16[aria-disabled='false']:focus-visible+.emotion-19 {
+  outline: -webkit-focus-ring-color auto 1px;
+}
+
+.emotion-16[aria-invalid='true']:focus+.emotion-19 {
+  background-color: #f91b6c40;
+  fill: #e51963;
+}
+
+.emotion-16[aria-invalid='true']:focus+.emotion-19 .emotion-21 {
+  fill: #ffebf2;
+}
+
+.emotion-18 {
+  height: 1.5rem;
+  width: 1.5rem;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  border-radius: 100%;
+  fill: #d9dadd;
+}
+
+.emotion-18 .emotion-21 {
+  fill: #ffffff;
+}
+
+.emotion-24 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.emotion-24[data-has-label='true'] {
+  padding-left: 2rem;
+}
+
+.emotion-24[data-has-label='false'] {
+  display: contents;
+}
+
+.emotion-26 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 1rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+}
+
+.emotion-28 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+  padding: 0 1rem;
+}
+
+.emotion-30[data-disabled='true'] {
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+}
+
+.emotion-32 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.emotion-35 {
+  color: #641cb3;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.emotion-38 {
+  width: 100%;
+}
+
+.emotion-38 .emotion-45 {
+  border-radius: 0 0 0.25rem 0.25rem;
+  border-bottom: 0!important;
+  border-right: 0!important;
+  border-left: 0!important;
+}
+
+.emotion-38 .emotion-45:hover,
+.emotion-38 .emotion-45:focus,
+.emotion-38 .emotion-45:active {
+  border-color: #b3144d!important;
+  outline: none;
+}
+
+.emotion-40 {
+  display: inherit;
+}
+
+.emotion-40[data-container-full-width="true"] {
+  width: 100%;
+}
+
+.emotion-42 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-44 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0.5rem;
+  padding-right: 0;
+  padding-left: 1rem;
+  cursor: pointer;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  width: 100%;
+  overflow: hidden;
+}
+
+.emotion-44[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-44[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-44[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-44[data-state='neutral'] {
+  border: 1px solid #d9dadd;
+}
+
+.emotion-44[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-44[data-state='neutral']:not([data-disabled='true']):hover {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-44[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.emotion-44[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
+.emotion-44[data-state='success'] {
+  border: 1px solid #22674e;
+}
+
+.emotion-44[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-44[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
+.emotion-44[data-state='danger'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-44[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-44[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
+}
+
+.emotion-44:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
+}
+
+.emotion-44[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-44[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-47 {
+  color: #3f4250;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.emotion-49 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding-right: 1rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-51 {
+  vertical-align: middle;
+  fill: #b3144d;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
+}
+
+.emotion-51 .fillStroke {
+  stroke: #b3144d;
+  fill: none;
+}
+
+.emotion-53 {
+  vertical-align: middle;
+  fill: #3f4250;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
+}
+
+.emotion-53 .fillStroke {
+  stroke: #3f4250;
+  fill: none;
+}
+
+.emotion-82 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.emotion-94 {
+  color: #727683;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-149 {
+  color: #b3144d;
+  font-size: 0.75rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <fieldset
+        class="emotion-2 emotion-3"
+      >
+        <div
+          class="emotion-4 emotion-1"
+        >
+          <div
+            class="emotion-6 emotion-7"
+          >
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="true"
+              data-disabled="false"
+              data-error="true"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="true"
+                  data-error="true"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="true"
+                    checked=""
+                    class="emotion-16 emotion-17"
+                    id=":r50:"
+                    tabindex="-1"
+                    type="radio"
+                    value="ubuntu"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="Ubuntu"
+                      class="emotion-30 emotion-31"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/ubuntu.svg"
+                      width="56"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    >
+                      <label
+                        class="emotion-34 emotion-35 emotion-36"
+                        for=":r50:"
+                      >
+                        Ubuntu
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-37 emotion-38 emotion-39"
+                  >
+                    <div
+                      aria-controls=":r56:"
+                      aria-describedby=":r56:"
+                      class="emotion-40 emotion-41"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="Ubuntu option"
+                        class="emotion-42 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-44 emotion-45"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="danger"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r55:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <div
+                            class="emotion-46 emotion-47 emotion-36"
+                          >
+                            Ubuntu 20.04 Focal Fossa
+                          </div>
+                          <div
+                            class="emotion-49 emotion-50"
+                          >
+                            <svg
+                              class="emotion-51 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM10 5C10.4142 5 10.75 5.33579 10.75 5.75V10.25C10.75 10.6642 10.4142 11 10 11C9.58579 11 9.25 10.6642 9.25 10.25V5.75C9.25 5.33579 9.58579 5 10 5ZM10 15C10.5523 15 11 14.5523 11 14C11 13.4477 10.5523 13 10 13C9.44771 13 9 13.4477 9 14C9 14.5523 9.44771 15 10 15Z"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-53 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="false"
+              data-disabled="false"
+              data-error="true"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="false"
+                  data-error="true"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="true"
+                    class="emotion-16 emotion-17"
+                    id=":r59:"
+                    tabindex="-1"
+                    type="radio"
+                    value="debian"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="Debian"
+                      class="emotion-30 emotion-31"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/debian.svg"
+                      width="56"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    >
+                      <label
+                        class="emotion-34 emotion-82 emotion-36"
+                        for=":r59:"
+                      >
+                        Debian
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-37 emotion-38 emotion-39"
+                  >
+                    <div
+                      aria-controls=":r5f:"
+                      aria-describedby=":r5f:"
+                      class="emotion-40 emotion-41"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="Debian option"
+                        class="emotion-42 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-44 emotion-45"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="danger"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r5e:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <p
+                            class="emotion-93 emotion-94 emotion-36"
+                          >
+                            Select item
+                          </p>
+                          <div
+                            class="emotion-49 emotion-50"
+                          >
+                            <svg
+                              class="emotion-51 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM10 5C10.4142 5 10.75 5.33579 10.75 5.75V10.25C10.75 10.6642 10.4142 11 10 11C9.58579 11 9.25 10.6642 9.25 10.25V5.75C9.25 5.33579 9.58579 5 10 5ZM10 15C10.5523 15 11 14.5523 11 14C11 13.4477 10.5523 13 10 13C9.44771 13 9 13.4477 9 14C9 14.5523 9.44771 15 10 15Z"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-53 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="false"
+              data-disabled="false"
+              data-error="true"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="false"
+                  data-error="true"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="true"
+                    class="emotion-16 emotion-17"
+                    id=":r5i:"
+                    tabindex="-1"
+                    type="radio"
+                    value="centos"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="CentOS"
+                      class="emotion-30 emotion-31"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/centos.svg"
+                      width="56"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    >
+                      <label
+                        class="emotion-34 emotion-82 emotion-36"
+                        for=":r5i:"
+                      >
+                        CentOS
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-37 emotion-38 emotion-39"
+                  >
+                    <div
+                      aria-controls=":r5o:"
+                      aria-describedby=":r5o:"
+                      class="emotion-40 emotion-41"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="CentOS option"
+                        class="emotion-42 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-44 emotion-45"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="danger"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r5n:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <p
+                            class="emotion-93 emotion-94 emotion-36"
+                          >
+                            Select item
+                          </p>
+                          <div
+                            class="emotion-49 emotion-50"
+                          >
+                            <svg
+                              class="emotion-51 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM10 5C10.4142 5 10.75 5.33579 10.75 5.75V10.25C10.75 10.6642 10.4142 11 10 11C9.58579 11 9.25 10.6642 9.25 10.25V5.75C9.25 5.33579 9.58579 5 10 5ZM10 15C10.5523 15 11 14.5523 11 14C11 13.4477 10.5523 13 10 13C9.44771 13 9 13.4477 9 14C9 14.5523 9.44771 15 10 15Z"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-53 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </fieldset>
+      <span
+        class="emotion-149 emotion-36"
+      >
+        Error message
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectableCardOptionGroup > renders correctly with helper 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.75rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-6 {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+}
+
+.emotion-9 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding: 1rem;
+  border-radius: 0.25rem;
+  -webkit-transition: border-color 200ms ease,box-shadow 200ms ease;
+  transition: border-color 200ms ease,box-shadow 200ms ease;
+  cursor: pointer;
+  background: #ffffff;
+  border: 1px solid #d9dadd;
+  color: #3f4250;
+  padding: 0;
+  padding-top: 1rem;
+  cursor: pointer;
+}
+
+.emotion-9[data-has-label='false']>:first-child {
+  margin-bottom: -0.25rem;
+}
+
+.emotion-9[data-checked='true'] {
+  border: 1px solid #8c40ef;
+}
+
+.emotion-9[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-9[data-disabled='true'] {
+  border: 1px solid #e9eaeb;
+  color: #b5b7bd;
+  background: #f3f3f4;
+  cursor: not-allowed;
+}
+
+.emotion-9[data-image="illustration"] {
+  padding: 0rem;
+}
+
+.emotion-9[data-image="icon"] {
+  padding: 0rem;
+  padding-right: 1rem;
+}
+
+.emotion-9:hover:not([data-error='true']):not([data-disabled='true']),
+.emotion-9:active:not([data-error='true']):not([data-disabled='true']) {
+  border: 1px solid #8c40ef;
+}
+
+.emotion-9:hover:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'],
+.emotion-9:active:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'] {
+  box-shadow: 0px 4px 16px 4px #f6f3ffcc;
+}
+
+.emotion-9[data-has-label='true'] .emotion-12,
+.emotion-9[data-has-label='true'] .eqr7bqq1 {
+  width: 100%;
+}
+
+.emotion-9 .emotion-12 {
+  position: absolute;
+  padding: 8px;
+  margin-top: -1rem;
+}
+
+.emotion-11 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-14 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  gap: 0.5rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  pointer-events: none;
+}
+
+.emotion-14[aria-disabled='false'],
+.emotion-14[aria-disabled='false']>label {
+  cursor: pointer;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17+.emotion-19 {
+  fill: #8c40ef;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17+.emotion-19 .emotion-21 {
+  fill: #e5dbfd;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17[aria-invalid='true']+.emotion-19 {
+  fill: #b3144d;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17[aria-invalid='true']+.emotion-19 .emotion-21 {
+  fill: #ffd3e3;
+}
+
+.emotion-14[aria-disabled='true'] {
+  cursor: not-allowed;
+  color: #b5b7bd;
+}
+
+.emotion-14[aria-disabled='true']>label,
+.emotion-14[aria-disabled='true'] .emotion-17 {
+  cursor: not-allowed;
+}
+
+.emotion-14[aria-disabled='true'] .emotion-19 {
+  fill: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-14[aria-disabled='true'] .emotion-19 .emotion-21 {
+  fill: #f3f3f4;
+}
+
+.emotion-14[data-checked='true'] {
+  color: #641cb3;
+}
+
+.emotion-14[data-error='true'] {
+  color: #b3144d;
+}
+
+.emotion-14[aria-disabled='true'] {
+  color: #b5b7bd;
+}
+
+.emotion-16 {
+  cursor: pointer;
+  position: absolute;
+  height: 1.5rem;
+  width: 1.5rem;
+  opacity: 0;
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.emotion-16+.emotion-19 .emotion-23 {
+  transform-origin: center;
+  -webkit-transition: 200ms -webkit-transform ease-in-out;
+  transition: 200ms transform ease-in-out;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+}
+
+.emotion-16:checked+svg .emotion-23 {
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
+
+.emotion-16:checked[aria-disabled='false'][aria-invalid='false']+.emotion-19 {
+  fill: #8c40ef;
+}
+
+.emotion-16:checked[aria-disabled='true'][aria-invalid='false']+.emotion-19 {
+  fill: #d8c5fc;
+}
+
+.emotion-16[aria-invalid='true']:not([aria-disabled='true'])+.emotion-19 {
+  fill: #e51963;
+}
+
+.emotion-16[aria-disabled='false']:active+.emotion-19 {
+  background-color: #5e127e40;
+  fill: #8c40ef;
+}
+
+.emotion-16[aria-disabled='false']:active+.emotion-19 .emotion-21 {
+  fill: #f1eefc;
+}
+
+.emotion-16[aria-disabled='false']:focus-visible+.emotion-19 {
+  outline: -webkit-focus-ring-color auto 1px;
+}
+
+.emotion-16[aria-invalid='true']:focus+.emotion-19 {
+  background-color: #f91b6c40;
+  fill: #e51963;
+}
+
+.emotion-16[aria-invalid='true']:focus+.emotion-19 .emotion-21 {
+  fill: #ffebf2;
+}
+
+.emotion-18 {
+  height: 1.5rem;
+  width: 1.5rem;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  border-radius: 100%;
+  fill: #d9dadd;
+}
+
+.emotion-18 .emotion-21 {
+  fill: #ffffff;
+}
+
+.emotion-24 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.emotion-24[data-has-label='true'] {
+  padding-left: 2rem;
+}
+
+.emotion-24[data-has-label='false'] {
+  display: contents;
+}
+
+.emotion-26 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 1rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+}
+
+.emotion-28 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+  padding: 0 1rem;
+}
+
+.emotion-30[data-disabled='true'] {
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+}
+
+.emotion-32 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.emotion-35 {
+  color: #641cb3;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.emotion-38 {
+  width: 100%;
+}
+
+.emotion-38 .emotion-45 {
+  border-radius: 0 0 0.25rem 0.25rem;
+  border-bottom: 0!important;
+  border-right: 0!important;
+  border-left: 0!important;
+}
+
+.emotion-38 .emotion-45:hover,
+.emotion-38 .emotion-45:focus,
+.emotion-38 .emotion-45:active {
+  border-color: #d9dadd!important;
+  outline: none;
+}
+
+.emotion-40 {
+  display: inherit;
+}
+
+.emotion-40[data-container-full-width="true"] {
+  width: 100%;
+}
+
+.emotion-42 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-44 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0.5rem;
+  padding-right: 0;
+  padding-left: 1rem;
+  cursor: pointer;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  width: 100%;
+  overflow: hidden;
+}
+
+.emotion-44[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-44[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-44[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-44[data-state='neutral'] {
+  border: 1px solid #d9dadd;
+}
+
+.emotion-44[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-44[data-state='neutral']:not([data-disabled='true']):hover {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-44[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.emotion-44[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
+.emotion-44[data-state='success'] {
+  border: 1px solid #22674e;
+}
+
+.emotion-44[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-44[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
+.emotion-44[data-state='danger'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-44[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-44[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
+}
+
+.emotion-44:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
+}
+
+.emotion-44[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-44[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-47 {
+  color: #3f4250;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.emotion-49 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding-right: 1rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-51 {
+  vertical-align: middle;
+  fill: #3f4250;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
+}
+
+.emotion-51 .fillStroke {
+  stroke: #3f4250;
+  fill: none;
+}
+
+.emotion-80 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.emotion-92 {
+  color: #727683;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-143 {
+  color: #727683;
+  font-size: 0.75rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <fieldset
+        class="emotion-2 emotion-3"
+      >
+        <div
+          class="emotion-4 emotion-1"
+        >
+          <div
+            class="emotion-6 emotion-7"
+          >
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="true"
+              data-disabled="false"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="true"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    checked=""
+                    class="emotion-16 emotion-17"
+                    id=":r8d:"
+                    tabindex="-1"
+                    type="radio"
+                    value="ubuntu"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="Ubuntu"
+                      class="emotion-30 emotion-31"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/ubuntu.svg"
+                      width="56"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    >
+                      <label
+                        class="emotion-34 emotion-35 emotion-36"
+                        for=":r8d:"
+                      >
+                        Ubuntu
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-37 emotion-38 emotion-39"
+                  >
+                    <div
+                      aria-controls=":r8j:"
+                      aria-describedby=":r8j:"
+                      class="emotion-40 emotion-41"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="Ubuntu option"
+                        class="emotion-42 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-44 emotion-45"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r8i:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <div
+                            class="emotion-46 emotion-47 emotion-36"
+                          >
+                            Ubuntu 20.04 Focal Fossa
+                          </div>
+                          <div
+                            class="emotion-49 emotion-50"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-51 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="false"
+              data-disabled="false"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="false"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    class="emotion-16 emotion-17"
+                    id=":r8m:"
+                    tabindex="-1"
+                    type="radio"
+                    value="debian"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="Debian"
+                      class="emotion-30 emotion-31"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/debian.svg"
+                      width="56"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    >
+                      <label
+                        class="emotion-34 emotion-80 emotion-36"
+                        for=":r8m:"
+                      >
+                        Debian
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-37 emotion-38 emotion-39"
+                  >
+                    <div
+                      aria-controls=":r8s:"
+                      aria-describedby=":r8s:"
+                      class="emotion-40 emotion-41"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="Debian option"
+                        class="emotion-42 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-44 emotion-45"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r8r:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <p
+                            class="emotion-91 emotion-92 emotion-36"
+                          >
+                            Select item
+                          </p>
+                          <div
+                            class="emotion-49 emotion-50"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-51 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="false"
+              data-disabled="false"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="false"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    class="emotion-16 emotion-17"
+                    id=":r8v:"
+                    tabindex="-1"
+                    type="radio"
+                    value="centos"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="CentOS"
+                      class="emotion-30 emotion-31"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/centos.svg"
+                      width="56"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    >
+                      <label
+                        class="emotion-34 emotion-80 emotion-36"
+                        for=":r8v:"
+                      >
+                        CentOS
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-37 emotion-38 emotion-39"
+                  >
+                    <div
+                      aria-controls=":r95:"
+                      aria-describedby=":r95:"
+                      class="emotion-40 emotion-41"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="CentOS option"
+                        class="emotion-42 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-44 emotion-45"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r94:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <p
+                            class="emotion-91 emotion-92 emotion-36"
+                          >
+                            Select item
+                          </p>
+                          <div
+                            class="emotion-49 emotion-50"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-51 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </fieldset>
+      <span
+        class="emotion-143 emotion-36"
+      >
+        Helper message
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectableCardOptionGroup > renders correctly with id 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.75rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-6 {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+}
+
+.emotion-9 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding: 1rem;
+  border-radius: 0.25rem;
+  -webkit-transition: border-color 200ms ease,box-shadow 200ms ease;
+  transition: border-color 200ms ease,box-shadow 200ms ease;
+  cursor: pointer;
+  background: #ffffff;
+  border: 1px solid #d9dadd;
+  color: #3f4250;
+  padding: 0;
+  padding-top: 1rem;
+  cursor: pointer;
+}
+
+.emotion-9[data-has-label='false']>:first-child {
+  margin-bottom: -0.25rem;
+}
+
+.emotion-9[data-checked='true'] {
+  border: 1px solid #8c40ef;
+}
+
+.emotion-9[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-9[data-disabled='true'] {
+  border: 1px solid #e9eaeb;
+  color: #b5b7bd;
+  background: #f3f3f4;
+  cursor: not-allowed;
+}
+
+.emotion-9[data-image="illustration"] {
+  padding: 0rem;
+}
+
+.emotion-9[data-image="icon"] {
+  padding: 0rem;
+  padding-right: 1rem;
+}
+
+.emotion-9:hover:not([data-error='true']):not([data-disabled='true']),
+.emotion-9:active:not([data-error='true']):not([data-disabled='true']) {
+  border: 1px solid #8c40ef;
+}
+
+.emotion-9:hover:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'],
+.emotion-9:active:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'] {
+  box-shadow: 0px 4px 16px 4px #f6f3ffcc;
+}
+
+.emotion-9[data-has-label='true'] .emotion-12,
+.emotion-9[data-has-label='true'] .eqr7bqq1 {
+  width: 100%;
+}
+
+.emotion-9 .emotion-12 {
+  position: absolute;
+  padding: 8px;
+  margin-top: -1rem;
+}
+
+.emotion-11 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-14 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  gap: 0.5rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  pointer-events: none;
+}
+
+.emotion-14[aria-disabled='false'],
+.emotion-14[aria-disabled='false']>label {
+  cursor: pointer;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17+.emotion-19 {
+  fill: #8c40ef;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17+.emotion-19 .emotion-21 {
+  fill: #e5dbfd;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17[aria-invalid='true']+.emotion-19 {
+  fill: #b3144d;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17[aria-invalid='true']+.emotion-19 .emotion-21 {
+  fill: #ffd3e3;
+}
+
+.emotion-14[aria-disabled='true'] {
+  cursor: not-allowed;
+  color: #b5b7bd;
+}
+
+.emotion-14[aria-disabled='true']>label,
+.emotion-14[aria-disabled='true'] .emotion-17 {
+  cursor: not-allowed;
+}
+
+.emotion-14[aria-disabled='true'] .emotion-19 {
+  fill: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-14[aria-disabled='true'] .emotion-19 .emotion-21 {
+  fill: #f3f3f4;
+}
+
+.emotion-14[data-checked='true'] {
+  color: #641cb3;
+}
+
+.emotion-14[data-error='true'] {
+  color: #b3144d;
+}
+
+.emotion-14[aria-disabled='true'] {
+  color: #b5b7bd;
+}
+
+.emotion-16 {
+  cursor: pointer;
+  position: absolute;
+  height: 1.5rem;
+  width: 1.5rem;
+  opacity: 0;
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.emotion-16+.emotion-19 .emotion-23 {
+  transform-origin: center;
+  -webkit-transition: 200ms -webkit-transform ease-in-out;
+  transition: 200ms transform ease-in-out;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+}
+
+.emotion-16:checked+svg .emotion-23 {
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
+
+.emotion-16:checked[aria-disabled='false'][aria-invalid='false']+.emotion-19 {
+  fill: #8c40ef;
+}
+
+.emotion-16:checked[aria-disabled='true'][aria-invalid='false']+.emotion-19 {
+  fill: #d8c5fc;
+}
+
+.emotion-16[aria-invalid='true']:not([aria-disabled='true'])+.emotion-19 {
+  fill: #e51963;
+}
+
+.emotion-16[aria-disabled='false']:active+.emotion-19 {
+  background-color: #5e127e40;
+  fill: #8c40ef;
+}
+
+.emotion-16[aria-disabled='false']:active+.emotion-19 .emotion-21 {
+  fill: #f1eefc;
+}
+
+.emotion-16[aria-disabled='false']:focus-visible+.emotion-19 {
+  outline: -webkit-focus-ring-color auto 1px;
+}
+
+.emotion-16[aria-invalid='true']:focus+.emotion-19 {
+  background-color: #f91b6c40;
+  fill: #e51963;
+}
+
+.emotion-16[aria-invalid='true']:focus+.emotion-19 .emotion-21 {
+  fill: #ffebf2;
+}
+
+.emotion-18 {
+  height: 1.5rem;
+  width: 1.5rem;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  border-radius: 100%;
+  fill: #d9dadd;
+}
+
+.emotion-18 .emotion-21 {
+  fill: #ffffff;
+}
+
+.emotion-24 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.emotion-24[data-has-label='true'] {
+  padding-left: 2rem;
+}
+
+.emotion-24[data-has-label='false'] {
+  display: contents;
+}
+
+.emotion-26 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 1rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+}
+
+.emotion-28 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+  padding: 0 1rem;
+}
+
+.emotion-30[data-disabled='true'] {
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+}
+
+.emotion-32 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.emotion-35 {
+  color: #641cb3;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.emotion-38 {
+  width: 100%;
+}
+
+.emotion-38 .emotion-45 {
+  border-radius: 0 0 0.25rem 0.25rem;
+  border-bottom: 0!important;
+  border-right: 0!important;
+  border-left: 0!important;
+}
+
+.emotion-38 .emotion-45:hover,
+.emotion-38 .emotion-45:focus,
+.emotion-38 .emotion-45:active {
+  border-color: #d9dadd!important;
+  outline: none;
+}
+
+.emotion-40 {
+  display: inherit;
+}
+
+.emotion-40[data-container-full-width="true"] {
+  width: 100%;
+}
+
+.emotion-42 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-44 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0.5rem;
+  padding-right: 0;
+  padding-left: 1rem;
+  cursor: pointer;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  width: 100%;
+  overflow: hidden;
+}
+
+.emotion-44[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-44[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-44[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-44[data-state='neutral'] {
+  border: 1px solid #d9dadd;
+}
+
+.emotion-44[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-44[data-state='neutral']:not([data-disabled='true']):hover {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-44[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.emotion-44[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
+.emotion-44[data-state='success'] {
+  border: 1px solid #22674e;
+}
+
+.emotion-44[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-44[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
+.emotion-44[data-state='danger'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-44[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-44[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
+}
+
+.emotion-44:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
+}
+
+.emotion-44[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-44[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-47 {
+  color: #3f4250;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.emotion-49 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding-right: 1rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-51 {
+  vertical-align: middle;
+  fill: #3f4250;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
+}
+
+.emotion-51 .fillStroke {
+  stroke: #3f4250;
+  fill: none;
+}
+
+.emotion-80 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.emotion-92 {
+  color: #727683;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <fieldset
+        class="emotion-2 emotion-3"
+      >
+        <div
+          class="emotion-4 emotion-1"
+        >
+          <div
+            class="emotion-6 emotion-7"
+          >
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="true"
+              data-disabled="false"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="true"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    checked=""
+                    class="emotion-16 emotion-17"
+                    id="ubuntu-option"
+                    tabindex="-1"
+                    type="radio"
+                    value="ubuntu"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="Ubuntu"
+                      class="emotion-30 emotion-31"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/ubuntu.svg"
+                      width="40"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    >
+                      <label
+                        class="emotion-34 emotion-35 emotion-36"
+                        for="ubuntu-option"
+                      >
+                        Ubuntu
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-37 emotion-38 emotion-39"
+                  >
+                    <div
+                      aria-controls=":r2l:"
+                      aria-describedby=":r2l:"
+                      class="emotion-40 emotion-41"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="Ubuntu option"
+                        class="emotion-42 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-44 emotion-45"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r2k:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <div
+                            class="emotion-46 emotion-47 emotion-36"
+                          >
+                            Ubuntu 20.04 Focal Fossa
+                          </div>
+                          <div
+                            class="emotion-49 emotion-50"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-51 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="false"
+              data-disabled="false"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="false"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    class="emotion-16 emotion-17"
+                    id="debian-option"
+                    tabindex="-1"
+                    type="radio"
+                    value="debian"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="Debian"
+                      class="emotion-30 emotion-31"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/debian.svg"
+                      width="40"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    >
+                      <label
+                        class="emotion-34 emotion-80 emotion-36"
+                        for="debian-option"
+                      >
+                        Debian
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-37 emotion-38 emotion-39"
+                  >
+                    <div
+                      aria-controls=":r2u:"
+                      aria-describedby=":r2u:"
+                      class="emotion-40 emotion-41"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="Debian option"
+                        class="emotion-42 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-44 emotion-45"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r2t:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <p
+                            class="emotion-91 emotion-92 emotion-36"
+                          >
+                            Select item
+                          </p>
+                          <div
+                            class="emotion-49 emotion-50"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-51 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="false"
+              data-disabled="false"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="false"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    class="emotion-16 emotion-17"
+                    id="centos-option"
+                    tabindex="-1"
+                    type="radio"
+                    value="centos"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="CentOS"
+                      class="emotion-30 emotion-31"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/centos.svg"
+                      width="40"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    >
+                      <label
+                        class="emotion-34 emotion-80 emotion-36"
+                        for="centos-option"
+                      >
+                        CentOS
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-37 emotion-38 emotion-39"
+                  >
+                    <div
+                      aria-controls=":r37:"
+                      aria-describedby=":r37:"
+                      class="emotion-40 emotion-41"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="CentOS option"
+                        class="emotion-42 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-44 emotion-45"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r36:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <p
+                            class="emotion-91 emotion-92 emotion-36"
+                          >
+                            Select item
+                          </p>
+                          <div
+                            class="emotion-49 emotion-50"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-51 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </fieldset>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectableCardOptionGroup > renders correctly with image as ReactNode 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.75rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-6 {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+}
+
+.emotion-9 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding: 1rem;
+  border-radius: 0.25rem;
+  -webkit-transition: border-color 200ms ease,box-shadow 200ms ease;
+  transition: border-color 200ms ease,box-shadow 200ms ease;
+  cursor: pointer;
+  background: #ffffff;
+  border: 1px solid #d9dadd;
+  color: #3f4250;
+  padding: 0;
+  padding-top: 1rem;
+  cursor: pointer;
+}
+
+.emotion-9[data-has-label='false']>:first-child {
+  margin-bottom: -0.25rem;
+}
+
+.emotion-9[data-checked='true'] {
+  border: 1px solid #8c40ef;
+}
+
+.emotion-9[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-9[data-disabled='true'] {
+  border: 1px solid #e9eaeb;
+  color: #b5b7bd;
+  background: #f3f3f4;
+  cursor: not-allowed;
+}
+
+.emotion-9[data-image="illustration"] {
+  padding: 0rem;
+}
+
+.emotion-9[data-image="icon"] {
+  padding: 0rem;
+  padding-right: 1rem;
+}
+
+.emotion-9:hover:not([data-error='true']):not([data-disabled='true']),
+.emotion-9:active:not([data-error='true']):not([data-disabled='true']) {
+  border: 1px solid #8c40ef;
+}
+
+.emotion-9:hover:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'],
+.emotion-9:active:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'] {
+  box-shadow: 0px 4px 16px 4px #f6f3ffcc;
+}
+
+.emotion-9[data-has-label='true'] .emotion-12,
+.emotion-9[data-has-label='true'] .eqr7bqq1 {
+  width: 100%;
+}
+
+.emotion-9 .emotion-12 {
+  position: absolute;
+  padding: 8px;
+  margin-top: -1rem;
+}
+
+.emotion-11 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-14 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  gap: 0.5rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  pointer-events: none;
+}
+
+.emotion-14[aria-disabled='false'],
+.emotion-14[aria-disabled='false']>label {
+  cursor: pointer;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17+.emotion-19 {
+  fill: #8c40ef;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17+.emotion-19 .emotion-21 {
+  fill: #e5dbfd;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17[aria-invalid='true']+.emotion-19 {
+  fill: #b3144d;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17[aria-invalid='true']+.emotion-19 .emotion-21 {
+  fill: #ffd3e3;
+}
+
+.emotion-14[aria-disabled='true'] {
+  cursor: not-allowed;
+  color: #b5b7bd;
+}
+
+.emotion-14[aria-disabled='true']>label,
+.emotion-14[aria-disabled='true'] .emotion-17 {
+  cursor: not-allowed;
+}
+
+.emotion-14[aria-disabled='true'] .emotion-19 {
+  fill: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-14[aria-disabled='true'] .emotion-19 .emotion-21 {
+  fill: #f3f3f4;
+}
+
+.emotion-14[data-checked='true'] {
+  color: #641cb3;
+}
+
+.emotion-14[data-error='true'] {
+  color: #b3144d;
+}
+
+.emotion-14[aria-disabled='true'] {
+  color: #b5b7bd;
+}
+
+.emotion-16 {
+  cursor: pointer;
+  position: absolute;
+  height: 1.5rem;
+  width: 1.5rem;
+  opacity: 0;
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.emotion-16+.emotion-19 .emotion-23 {
+  transform-origin: center;
+  -webkit-transition: 200ms -webkit-transform ease-in-out;
+  transition: 200ms transform ease-in-out;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+}
+
+.emotion-16:checked+svg .emotion-23 {
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
+
+.emotion-16:checked[aria-disabled='false'][aria-invalid='false']+.emotion-19 {
+  fill: #8c40ef;
+}
+
+.emotion-16:checked[aria-disabled='true'][aria-invalid='false']+.emotion-19 {
+  fill: #d8c5fc;
+}
+
+.emotion-16[aria-invalid='true']:not([aria-disabled='true'])+.emotion-19 {
+  fill: #e51963;
+}
+
+.emotion-16[aria-disabled='false']:active+.emotion-19 {
+  background-color: #5e127e40;
+  fill: #8c40ef;
+}
+
+.emotion-16[aria-disabled='false']:active+.emotion-19 .emotion-21 {
+  fill: #f1eefc;
+}
+
+.emotion-16[aria-disabled='false']:focus-visible+.emotion-19 {
+  outline: -webkit-focus-ring-color auto 1px;
+}
+
+.emotion-16[aria-invalid='true']:focus+.emotion-19 {
+  background-color: #f91b6c40;
+  fill: #e51963;
+}
+
+.emotion-16[aria-invalid='true']:focus+.emotion-19 .emotion-21 {
+  fill: #ffebf2;
+}
+
+.emotion-18 {
+  height: 1.5rem;
+  width: 1.5rem;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  border-radius: 100%;
+  fill: #d9dadd;
+}
+
+.emotion-18 .emotion-21 {
+  fill: #ffffff;
+}
+
+.emotion-24 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.emotion-24[data-has-label='true'] {
+  padding-left: 2rem;
+}
+
+.emotion-24[data-has-label='false'] {
+  display: contents;
+}
+
+.emotion-26 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 1rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+}
+
+.emotion-28 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+  padding: 0 1rem;
+}
+
+.emotion-30 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.emotion-33 {
+  color: #641cb3;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.emotion-36 {
+  width: 100%;
+}
+
+.emotion-36 .emotion-43 {
+  border-radius: 0 0 0.25rem 0.25rem;
+  border-bottom: 0!important;
+  border-right: 0!important;
+  border-left: 0!important;
+}
+
+.emotion-36 .emotion-43:hover,
+.emotion-36 .emotion-43:focus,
+.emotion-36 .emotion-43:active {
+  border-color: #d9dadd!important;
+  outline: none;
+}
+
+.emotion-38 {
+  display: inherit;
+}
+
+.emotion-38[data-container-full-width="true"] {
+  width: 100%;
+}
+
+.emotion-40 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-42 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0.5rem;
+  padding-right: 0;
+  padding-left: 1rem;
+  cursor: pointer;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  width: 100%;
+  overflow: hidden;
+}
+
+.emotion-42[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-42[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-42[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-42[data-state='neutral'] {
+  border: 1px solid #d9dadd;
+}
+
+.emotion-42[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-42[data-state='neutral']:not([data-disabled='true']):hover {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-42[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.emotion-42[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
+.emotion-42[data-state='success'] {
+  border: 1px solid #22674e;
+}
+
+.emotion-42[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-42[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
+.emotion-42[data-state='danger'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-42[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-42[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
+}
+
+.emotion-42:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
+}
+
+.emotion-42[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-42[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-45 {
+  color: #3f4250;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.emotion-47 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding-right: 1rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-49 {
+  vertical-align: middle;
+  fill: #3f4250;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
+}
+
+.emotion-49 .fillStroke {
+  stroke: #3f4250;
+  fill: none;
+}
+
+.emotion-76 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.emotion-88 {
+  color: #727683;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <fieldset
+        class="emotion-2 emotion-3"
+      >
+        <div
+          class="emotion-4 emotion-1"
+        >
+          <div
+            class="emotion-6 emotion-7"
+          >
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="true"
+              data-disabled="false"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="true"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    checked=""
+                    class="emotion-16 emotion-17"
+                    id=":r6n:"
+                    tabindex="-1"
+                    type="radio"
+                    value="ubuntu"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="Ubuntu"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/ubuntu.svg"
+                    />
+                    <div
+                      class="emotion-30 emotion-1"
+                    >
+                      <label
+                        class="emotion-32 emotion-33 emotion-34"
+                        for=":r6n:"
+                      >
+                        Ubuntu
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-35 emotion-36 emotion-37"
+                  >
+                    <div
+                      aria-controls=":r6t:"
+                      aria-describedby=":r6t:"
+                      class="emotion-38 emotion-39"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="Ubuntu option"
+                        class="emotion-40 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-42 emotion-43"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r6s:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <div
+                            class="emotion-44 emotion-45 emotion-34"
+                          >
+                            Ubuntu 20.04 Focal Fossa
+                          </div>
+                          <div
+                            class="emotion-47 emotion-48"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-49 emotion-50"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="false"
+              data-disabled="false"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="false"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    class="emotion-16 emotion-17"
+                    id=":r70:"
+                    tabindex="-1"
+                    type="radio"
+                    value="debian"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="Debian"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/debian.svg"
+                    />
+                    <div
+                      class="emotion-30 emotion-1"
+                    >
+                      <label
+                        class="emotion-32 emotion-76 emotion-34"
+                        for=":r70:"
+                      >
+                        Debian
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-35 emotion-36 emotion-37"
+                  >
+                    <div
+                      aria-controls=":r76:"
+                      aria-describedby=":r76:"
+                      class="emotion-38 emotion-39"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="Debian option"
+                        class="emotion-40 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-42 emotion-43"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r75:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <p
+                            class="emotion-87 emotion-88 emotion-34"
+                          >
+                            Select item
+                          </p>
+                          <div
+                            class="emotion-47 emotion-48"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-49 emotion-50"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="false"
+              data-disabled="false"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="false"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    class="emotion-16 emotion-17"
+                    id=":r79:"
+                    tabindex="-1"
+                    type="radio"
+                    value="centos"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="CentOS"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/centos.svg"
+                    />
+                    <div
+                      class="emotion-30 emotion-1"
+                    >
+                      <label
+                        class="emotion-32 emotion-76 emotion-34"
+                        for=":r79:"
+                      >
+                        CentOS
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-35 emotion-36 emotion-37"
+                  >
+                    <div
+                      aria-controls=":r7f:"
+                      aria-describedby=":r7f:"
+                      class="emotion-38 emotion-39"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="CentOS option"
+                        class="emotion-40 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-42 emotion-43"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r7e:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <p
+                            class="emotion-87 emotion-88 emotion-34"
+                          >
+                            Select item
+                          </p>
+                          <div
+                            class="emotion-47 emotion-48"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-49 emotion-50"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </fieldset>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectableCardOptionGroup > renders correctly with medium size 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.75rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-6 {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+}
+
+.emotion-9 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding: 1rem;
+  border-radius: 0.25rem;
+  -webkit-transition: border-color 200ms ease,box-shadow 200ms ease;
+  transition: border-color 200ms ease,box-shadow 200ms ease;
+  cursor: pointer;
+  background: #ffffff;
+  border: 1px solid #d9dadd;
+  color: #3f4250;
+  padding: 0;
+  padding-top: 1rem;
+  cursor: pointer;
+}
+
+.emotion-9[data-has-label='false']>:first-child {
+  margin-bottom: -0.25rem;
+}
+
+.emotion-9[data-checked='true'] {
+  border: 1px solid #8c40ef;
+}
+
+.emotion-9[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-9[data-disabled='true'] {
+  border: 1px solid #e9eaeb;
+  color: #b5b7bd;
+  background: #f3f3f4;
+  cursor: not-allowed;
+}
+
+.emotion-9[data-image="illustration"] {
+  padding: 0rem;
+}
+
+.emotion-9[data-image="icon"] {
+  padding: 0rem;
+  padding-right: 1rem;
+}
+
+.emotion-9:hover:not([data-error='true']):not([data-disabled='true']),
+.emotion-9:active:not([data-error='true']):not([data-disabled='true']) {
+  border: 1px solid #8c40ef;
+}
+
+.emotion-9:hover:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'],
+.emotion-9:active:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'] {
+  box-shadow: 0px 4px 16px 4px #f6f3ffcc;
+}
+
+.emotion-9[data-has-label='true'] .emotion-12,
+.emotion-9[data-has-label='true'] .eqr7bqq1 {
+  width: 100%;
+}
+
+.emotion-9 .emotion-12 {
+  position: absolute;
+  padding: 8px;
+  margin-top: -1rem;
+}
+
+.emotion-11 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-14 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  gap: 0.5rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  pointer-events: none;
+}
+
+.emotion-14[aria-disabled='false'],
+.emotion-14[aria-disabled='false']>label {
+  cursor: pointer;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17+.emotion-19 {
+  fill: #8c40ef;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17+.emotion-19 .emotion-21 {
+  fill: #e5dbfd;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17[aria-invalid='true']+.emotion-19 {
+  fill: #b3144d;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17[aria-invalid='true']+.emotion-19 .emotion-21 {
+  fill: #ffd3e3;
+}
+
+.emotion-14[aria-disabled='true'] {
+  cursor: not-allowed;
+  color: #b5b7bd;
+}
+
+.emotion-14[aria-disabled='true']>label,
+.emotion-14[aria-disabled='true'] .emotion-17 {
+  cursor: not-allowed;
+}
+
+.emotion-14[aria-disabled='true'] .emotion-19 {
+  fill: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-14[aria-disabled='true'] .emotion-19 .emotion-21 {
+  fill: #f3f3f4;
+}
+
+.emotion-14[data-checked='true'] {
+  color: #641cb3;
+}
+
+.emotion-14[data-error='true'] {
+  color: #b3144d;
+}
+
+.emotion-14[aria-disabled='true'] {
+  color: #b5b7bd;
+}
+
+.emotion-16 {
+  cursor: pointer;
+  position: absolute;
+  height: 1.5rem;
+  width: 1.5rem;
+  opacity: 0;
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.emotion-16+.emotion-19 .emotion-23 {
+  transform-origin: center;
+  -webkit-transition: 200ms -webkit-transform ease-in-out;
+  transition: 200ms transform ease-in-out;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+}
+
+.emotion-16:checked+svg .emotion-23 {
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
+
+.emotion-16:checked[aria-disabled='false'][aria-invalid='false']+.emotion-19 {
+  fill: #8c40ef;
+}
+
+.emotion-16:checked[aria-disabled='true'][aria-invalid='false']+.emotion-19 {
+  fill: #d8c5fc;
+}
+
+.emotion-16[aria-invalid='true']:not([aria-disabled='true'])+.emotion-19 {
+  fill: #e51963;
+}
+
+.emotion-16[aria-disabled='false']:active+.emotion-19 {
+  background-color: #5e127e40;
+  fill: #8c40ef;
+}
+
+.emotion-16[aria-disabled='false']:active+.emotion-19 .emotion-21 {
+  fill: #f1eefc;
+}
+
+.emotion-16[aria-disabled='false']:focus-visible+.emotion-19 {
+  outline: -webkit-focus-ring-color auto 1px;
+}
+
+.emotion-16[aria-invalid='true']:focus+.emotion-19 {
+  background-color: #f91b6c40;
+  fill: #e51963;
+}
+
+.emotion-16[aria-invalid='true']:focus+.emotion-19 .emotion-21 {
+  fill: #ffebf2;
+}
+
+.emotion-18 {
+  height: 1.5rem;
+  width: 1.5rem;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  border-radius: 100%;
+  fill: #d9dadd;
+}
+
+.emotion-18 .emotion-21 {
+  fill: #ffffff;
+}
+
+.emotion-24 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.emotion-24[data-has-label='true'] {
+  padding-left: 2rem;
+}
+
+.emotion-24[data-has-label='false'] {
+  display: contents;
+}
+
+.emotion-26 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 1rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+}
+
+.emotion-28 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+  padding: 0 1rem;
+}
+
+.emotion-30[data-disabled='true'] {
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+}
+
+.emotion-32 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.emotion-35 {
+  color: #641cb3;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.emotion-38 {
+  width: 100%;
+}
+
+.emotion-38 .emotion-45 {
+  border-radius: 0 0 0.25rem 0.25rem;
+  border-bottom: 0!important;
+  border-right: 0!important;
+  border-left: 0!important;
+}
+
+.emotion-38 .emotion-45:hover,
+.emotion-38 .emotion-45:focus,
+.emotion-38 .emotion-45:active {
+  border-color: #d9dadd!important;
+  outline: none;
+}
+
+.emotion-40 {
+  display: inherit;
+}
+
+.emotion-40[data-container-full-width="true"] {
+  width: 100%;
+}
+
+.emotion-42 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-44 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0.5rem;
+  padding-right: 0;
+  padding-left: 1rem;
+  cursor: pointer;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  width: 100%;
+  overflow: hidden;
+}
+
+.emotion-44[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-44[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-44[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-44[data-state='neutral'] {
+  border: 1px solid #d9dadd;
+}
+
+.emotion-44[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-44[data-state='neutral']:not([data-disabled='true']):hover {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-44[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.emotion-44[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
+.emotion-44[data-state='success'] {
+  border: 1px solid #22674e;
+}
+
+.emotion-44[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-44[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
+.emotion-44[data-state='danger'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-44[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-44[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
+}
+
+.emotion-44:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
+}
+
+.emotion-44[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-44[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-47 {
+  color: #3f4250;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.emotion-49 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding-right: 1rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-51 {
+  vertical-align: middle;
+  fill: #3f4250;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
+}
+
+.emotion-51 .fillStroke {
+  stroke: #3f4250;
+  fill: none;
+}
+
+.emotion-80 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.emotion-92 {
+  color: #727683;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <fieldset
+        class="emotion-2 emotion-3"
+      >
+        <div
+          class="emotion-4 emotion-1"
+        >
+          <div
+            class="emotion-6 emotion-7"
+          >
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="true"
+              data-disabled="false"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="true"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    checked=""
+                    class="emotion-16 emotion-17"
+                    id=":rs:"
+                    tabindex="-1"
+                    type="radio"
+                    value="ubuntu"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="Ubuntu"
+                      class="emotion-30 emotion-31"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/ubuntu.svg"
+                      width="40"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    >
+                      <label
+                        class="emotion-34 emotion-35 emotion-36"
+                        for=":rs:"
+                      >
+                        Ubuntu
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-37 emotion-38 emotion-39"
+                  >
+                    <div
+                      aria-controls=":r12:"
+                      aria-describedby=":r12:"
+                      class="emotion-40 emotion-41"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="Ubuntu option"
+                        class="emotion-42 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-44 emotion-45"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r11:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <div
+                            class="emotion-46 emotion-47 emotion-36"
+                          >
+                            Ubuntu 20.04 Focal Fossa
+                          </div>
+                          <div
+                            class="emotion-49 emotion-50"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-51 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="false"
+              data-disabled="false"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="false"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    class="emotion-16 emotion-17"
+                    id=":r15:"
+                    tabindex="-1"
+                    type="radio"
+                    value="debian"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="Debian"
+                      class="emotion-30 emotion-31"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/debian.svg"
+                      width="40"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    >
+                      <label
+                        class="emotion-34 emotion-80 emotion-36"
+                        for=":r15:"
+                      >
+                        Debian
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-37 emotion-38 emotion-39"
+                  >
+                    <div
+                      aria-controls=":r1b:"
+                      aria-describedby=":r1b:"
+                      class="emotion-40 emotion-41"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="Debian option"
+                        class="emotion-42 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-44 emotion-45"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r1a:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <p
+                            class="emotion-91 emotion-92 emotion-36"
+                          >
+                            Select item
+                          </p>
+                          <div
+                            class="emotion-49 emotion-50"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-51 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="false"
+              data-disabled="false"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="false"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    class="emotion-16 emotion-17"
+                    id=":r1e:"
+                    tabindex="-1"
+                    type="radio"
+                    value="centos"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="CentOS"
+                      class="emotion-30 emotion-31"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/centos.svg"
+                      width="40"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    >
+                      <label
+                        class="emotion-34 emotion-80 emotion-36"
+                        for=":r1e:"
+                      >
+                        CentOS
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-37 emotion-38 emotion-39"
+                  >
+                    <div
+                      aria-controls=":r1k:"
+                      aria-describedby=":r1k:"
+                      class="emotion-40 emotion-41"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="CentOS option"
+                        class="emotion-42 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-44 emotion-45"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r1j:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <p
+                            class="emotion-91 emotion-92 emotion-36"
+                          >
+                            Select item
+                          </p>
+                          <div
+                            class="emotion-49 emotion-50"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-51 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </fieldset>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectableCardOptionGroup > renders correctly with partial disabled 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.75rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-6 {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+}
+
+.emotion-9 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding: 1rem;
+  border-radius: 0.25rem;
+  -webkit-transition: border-color 200ms ease,box-shadow 200ms ease;
+  transition: border-color 200ms ease,box-shadow 200ms ease;
+  cursor: pointer;
+  background: #ffffff;
+  border: 1px solid #d9dadd;
+  color: #3f4250;
+  padding: 0;
+  padding-top: 1rem;
+  cursor: pointer;
+}
+
+.emotion-9[data-has-label='false']>:first-child {
+  margin-bottom: -0.25rem;
+}
+
+.emotion-9[data-checked='true'] {
+  border: 1px solid #8c40ef;
+}
+
+.emotion-9[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-9[data-disabled='true'] {
+  border: 1px solid #e9eaeb;
+  color: #b5b7bd;
+  background: #f3f3f4;
+  cursor: not-allowed;
+}
+
+.emotion-9[data-image="illustration"] {
+  padding: 0rem;
+}
+
+.emotion-9[data-image="icon"] {
+  padding: 0rem;
+  padding-right: 1rem;
+}
+
+.emotion-9:hover:not([data-error='true']):not([data-disabled='true']),
+.emotion-9:active:not([data-error='true']):not([data-disabled='true']) {
+  border: 1px solid #8c40ef;
+}
+
+.emotion-9:hover:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'],
+.emotion-9:active:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'] {
+  box-shadow: 0px 4px 16px 4px #f6f3ffcc;
+}
+
+.emotion-9[data-has-label='true'] .emotion-12,
+.emotion-9[data-has-label='true'] .eqr7bqq1 {
+  width: 100%;
+}
+
+.emotion-9 .emotion-12 {
+  position: absolute;
+  padding: 8px;
+  margin-top: -1rem;
+}
+
+.emotion-11 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-14 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  gap: 0.5rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  pointer-events: none;
+}
+
+.emotion-14[aria-disabled='false'],
+.emotion-14[aria-disabled='false']>label {
+  cursor: pointer;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17+.emotion-19 {
+  fill: #8c40ef;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17+.emotion-19 .emotion-21 {
+  fill: #e5dbfd;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17[aria-invalid='true']+.emotion-19 {
+  fill: #b3144d;
+}
+
+.emotion-14:hover[aria-disabled='false'] .emotion-17[aria-invalid='true']+.emotion-19 .emotion-21 {
+  fill: #ffd3e3;
+}
+
+.emotion-14[aria-disabled='true'] {
+  cursor: not-allowed;
+  color: #b5b7bd;
+}
+
+.emotion-14[aria-disabled='true']>label,
+.emotion-14[aria-disabled='true'] .emotion-17 {
+  cursor: not-allowed;
+}
+
+.emotion-14[aria-disabled='true'] .emotion-19 {
+  fill: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-14[aria-disabled='true'] .emotion-19 .emotion-21 {
+  fill: #f3f3f4;
+}
+
+.emotion-14[data-checked='true'] {
+  color: #641cb3;
+}
+
+.emotion-14[data-error='true'] {
+  color: #b3144d;
+}
+
+.emotion-14[aria-disabled='true'] {
+  color: #b5b7bd;
+}
+
+.emotion-16 {
+  cursor: pointer;
+  position: absolute;
+  height: 1.5rem;
+  width: 1.5rem;
+  opacity: 0;
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.emotion-16+.emotion-19 .emotion-23 {
+  transform-origin: center;
+  -webkit-transition: 200ms -webkit-transform ease-in-out;
+  transition: 200ms transform ease-in-out;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+}
+
+.emotion-16:checked+svg .emotion-23 {
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
+
+.emotion-16:checked[aria-disabled='false'][aria-invalid='false']+.emotion-19 {
+  fill: #8c40ef;
+}
+
+.emotion-16:checked[aria-disabled='true'][aria-invalid='false']+.emotion-19 {
+  fill: #d8c5fc;
+}
+
+.emotion-16[aria-invalid='true']:not([aria-disabled='true'])+.emotion-19 {
+  fill: #e51963;
+}
+
+.emotion-16[aria-disabled='false']:active+.emotion-19 {
+  background-color: #5e127e40;
+  fill: #8c40ef;
+}
+
+.emotion-16[aria-disabled='false']:active+.emotion-19 .emotion-21 {
+  fill: #f1eefc;
+}
+
+.emotion-16[aria-disabled='false']:focus-visible+.emotion-19 {
+  outline: -webkit-focus-ring-color auto 1px;
+}
+
+.emotion-16[aria-invalid='true']:focus+.emotion-19 {
+  background-color: #f91b6c40;
+  fill: #e51963;
+}
+
+.emotion-16[aria-invalid='true']:focus+.emotion-19 .emotion-21 {
+  fill: #ffebf2;
+}
+
+.emotion-18 {
+  height: 1.5rem;
+  width: 1.5rem;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  border-radius: 100%;
+  fill: #d9dadd;
+}
+
+.emotion-18 .emotion-21 {
+  fill: #ffffff;
+}
+
+.emotion-24 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.emotion-24[data-has-label='true'] {
+  padding-left: 2rem;
+}
+
+.emotion-24[data-has-label='false'] {
+  display: contents;
+}
+
+.emotion-26 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 1rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+}
+
+.emotion-28 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+  padding: 0 1rem;
+}
+
+.emotion-30[data-disabled='true'] {
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+}
+
+.emotion-32 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.emotion-35 {
+  color: #641cb3;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.emotion-38 {
+  width: 100%;
+}
+
+.emotion-38 .emotion-45 {
+  border-radius: 0 0 0.25rem 0.25rem;
+  border-bottom: 0!important;
+  border-right: 0!important;
+  border-left: 0!important;
+}
+
+.emotion-38 .emotion-45:hover,
+.emotion-38 .emotion-45:focus,
+.emotion-38 .emotion-45:active {
+  border-color: #d9dadd!important;
+  outline: none;
+}
+
+.emotion-40 {
+  display: inherit;
+}
+
+.emotion-40[data-container-full-width="true"] {
+  width: 100%;
+}
+
+.emotion-42 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-44 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0.5rem;
+  padding-right: 0;
+  padding-left: 1rem;
+  cursor: pointer;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  width: 100%;
+  overflow: hidden;
+}
+
+.emotion-44[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-44[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-44[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-44[data-state='neutral'] {
+  border: 1px solid #d9dadd;
+}
+
+.emotion-44[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-44[data-state='neutral']:not([data-disabled='true']):hover {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-44[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.emotion-44[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
+.emotion-44[data-state='success'] {
+  border: 1px solid #22674e;
+}
+
+.emotion-44[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-44[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
+.emotion-44[data-state='danger'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-44[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-44[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
+}
+
+.emotion-44:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
+}
+
+.emotion-44[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-44[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-47 {
+  color: #3f4250;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.emotion-49 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding-right: 1rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-51 {
+  vertical-align: middle;
+  fill: #3f4250;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
+}
+
+.emotion-51 .fillStroke {
+  stroke: #3f4250;
+  fill: none;
+}
+
+.emotion-80 {
+  color: #b5b7bd;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: not-allowed;
+}
+
+.emotion-83 {
+  width: 100%;
+}
+
+.emotion-83 .emotion-45 {
+  border-radius: 0 0 0.25rem 0.25rem;
+  border-bottom: 0!important;
+  border-right: 0!important;
+  border-left: 0!important;
+}
+
+.emotion-83 .emotion-45:hover,
+.emotion-83 .emotion-45:focus,
+.emotion-83 .emotion-45:active {
+  border-color: #e9eaeb!important;
+  outline: none;
+}
+
+.emotion-92 {
+  color: #b5b7bd;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-96 {
+  vertical-align: middle;
+  fill: #b5b7bd;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
+}
+
+.emotion-96 .fillStroke {
+  stroke: #b5b7bd;
+  fill: none;
+}
+
+.emotion-125 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.emotion-137 {
+  color: #727683;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <fieldset
+        class="emotion-2 emotion-3"
+      >
+        <div
+          class="emotion-4 emotion-1"
+        >
+          <div
+            class="emotion-6 emotion-7"
+          >
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="true"
+              data-disabled="false"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="true"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    checked=""
+                    class="emotion-16 emotion-17"
+                    id=":r45:"
+                    tabindex="-1"
+                    type="radio"
+                    value="ubuntu"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="Ubuntu"
+                      class="emotion-30 emotion-31"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/ubuntu.svg"
+                      width="56"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    >
+                      <label
+                        class="emotion-34 emotion-35 emotion-36"
+                        for=":r45:"
+                      >
+                        Ubuntu
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-37 emotion-38 emotion-39"
+                  >
+                    <div
+                      aria-controls=":r4b:"
+                      aria-describedby=":r4b:"
+                      class="emotion-40 emotion-41"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="Ubuntu option"
+                        class="emotion-42 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-44 emotion-45"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r4a:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <div
+                            class="emotion-46 emotion-47 emotion-36"
+                          >
+                            Ubuntu 20.04 Focal Fossa
+                          </div>
+                          <div
+                            class="emotion-49 emotion-50"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-51 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="false"
+              data-disabled="true"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="true"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="false"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="true"
+                    aria-invalid="false"
+                    class="emotion-16 emotion-17"
+                    disabled=""
+                    id=":r4e:"
+                    tabindex="-1"
+                    type="radio"
+                    value="debian"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="Debian"
+                      class="emotion-30 emotion-31"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/debian.svg"
+                      width="56"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    >
+                      <label
+                        class="emotion-34 emotion-80 emotion-36"
+                        for=":r4e:"
+                      >
+                        Debian
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-37 emotion-83 emotion-39"
+                  >
+                    <div
+                      aria-controls=":r4k:"
+                      aria-describedby=":r4k:"
+                      class="emotion-40 emotion-41"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="Debian option"
+                        class="emotion-42 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-44 emotion-45"
+                          data-disabled="true"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r4j:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <p
+                            class="emotion-91 emotion-92 emotion-36"
+                          >
+                            Select item
+                          </p>
+                          <div
+                            class="emotion-49 emotion-50"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-96 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+              data-checked="false"
+              data-disabled="false"
+              data-error="false"
+              data-has-label="false"
+              data-image="none"
+              data-type="radio"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="emotion-11 emotion-12"
+              >
+                <div
+                  aria-disabled="false"
+                  class="emotion-13 emotion-14 emotion-15"
+                  data-checked="false"
+                  data-error="false"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    class="emotion-16 emotion-17"
+                    id=":r4n:"
+                    tabindex="-1"
+                    type="radio"
+                    value="centos"
+                  />
+                  <svg
+                    class="emotion-18 emotion-19"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke-width="2"
+                      />
+                      <circle
+                        class="emotion-20 emotion-21"
+                        cx="12"
+                        cy="12"
+                        r="8"
+                      />
+                      <circle
+                        class="emotion-22 emotion-23"
+                        cx="12"
+                        cy="12"
+                        r="5"
+                      />
+                    </g>
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="emotion-24 emotion-25"
+                data-has-label="false"
+              >
+                <div
+                  class="emotion-26 emotion-27"
+                >
+                  <div
+                    class="emotion-28 emotion-29"
+                  >
+                    <img
+                      alt="CentOS"
+                      class="emotion-30 emotion-31"
+                      src="/src/components/SelectableCardOptionGroup/__stories__/assets/centos.svg"
+                      width="56"
+                    />
+                    <div
+                      class="emotion-32 emotion-1"
+                    >
+                      <label
+                        class="emotion-34 emotion-125 emotion-36"
+                        for=":r4n:"
+                      >
+                        CentOS
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    aria-label="selectable-card-option"
+                    class="emotion-37 emotion-38 emotion-39"
+                  >
+                    <div
+                      aria-controls=":r4t:"
+                      aria-describedby=":r4t:"
+                      class="emotion-40 emotion-41"
+                      data-container-full-width="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        aria-label="CentOS option"
+                        class="emotion-42 emotion-1"
+                      >
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="emotion-44 emotion-45"
+                          data-disabled="false"
+                          data-dropdownvisible="false"
+                          data-readonly="false"
+                          data-size="medium"
+                          data-state="neutral"
+                          data-testid="select-input-selectable-card-option"
+                          id=":r4s:"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <p
+                            class="emotion-91 emotion-137 emotion-36"
+                          >
+                            Select item
+                          </p>
+                          <div
+                            class="emotion-49 emotion-50"
+                          >
+                            <svg
+                              aria-label="show dropdown"
+                              class="emotion-51 emotion-52"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </fieldset>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/ui/src/components/SelectableCardOptionGroup/__tests__/index.test.tsx b/packages/ui/src/components/SelectableCardOptionGroup/__tests__/index.test.tsx
new file mode 100644
index 0000000000..d3f0659664
--- /dev/null
+++ b/packages/ui/src/components/SelectableCardOptionGroup/__tests__/index.test.tsx
@@ -0,0 +1,458 @@
+import { screen, waitFor } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
+import { renderWithTheme } from '@utils/test'
+import { describe, expect, test, vi } from 'vitest'
+import { SelectableCardOptionGroup } from '..'
+import centos from '../__stories__/assets/centos.svg'
+import debian from '../__stories__/assets/debian.svg'
+import ubuntu from '../__stories__/assets/ubuntu.svg'
+import {
+  centosOptions,
+  debianOptions,
+  ubuntuOptions,
+} from '../__stories__/constants'
+
+describe('SelectableCardOptionGroup', () => {
+  test('renders correctly', () => {
+    const { asFragment } = renderWithTheme(
+      <SelectableCardOptionGroup
+        value="ubuntu"
+        optionValue="ubuntu-20.04"
+        onChange={() => {}}
+        onChangeOption={() => {}}
+        legend="Select your OS"
+      >
+        <SelectableCardOptionGroup.Option
+          value="ubuntu"
+          label="Ubuntu"
+          options={ubuntuOptions}
+          image={ubuntu}
+        />
+        <SelectableCardOptionGroup.Option
+          value="debian"
+          label="Debian"
+          options={debianOptions}
+          image={debian}
+        />
+        <SelectableCardOptionGroup.Option
+          value="centos"
+          label="CentOS"
+          options={centosOptions}
+          image={centos}
+        />
+      </SelectableCardOptionGroup>,
+    )
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  test('renders correctly with medium size', () => {
+    const { asFragment } = renderWithTheme(
+      <SelectableCardOptionGroup
+        value="ubuntu"
+        optionValue="ubuntu-20.04"
+        onChange={() => {}}
+        onChangeOption={() => {}}
+        size="medium"
+      >
+        <SelectableCardOptionGroup.Option
+          value="ubuntu"
+          label="Ubuntu"
+          options={ubuntuOptions}
+          image={ubuntu}
+        />
+        <SelectableCardOptionGroup.Option
+          value="debian"
+          label="Debian"
+          options={debianOptions}
+          image={debian}
+        />
+        <SelectableCardOptionGroup.Option
+          value="centos"
+          label="CentOS"
+          options={centosOptions}
+          image={centos}
+        />
+      </SelectableCardOptionGroup>,
+    )
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  test('renders correctly with aria-label', () => {
+    const { asFragment } = renderWithTheme(
+      <SelectableCardOptionGroup
+        value="ubuntu"
+        optionValue="ubuntu-20.04"
+        onChange={() => {}}
+        onChangeOption={() => {}}
+        size="medium"
+        aria-label="Select your OS"
+      >
+        <SelectableCardOptionGroup.Option
+          value="ubuntu"
+          aria-label="Ubuntu"
+          options={ubuntuOptions}
+          image={ubuntu}
+        />
+        <SelectableCardOptionGroup.Option
+          value="debian"
+          aria-label="Debian"
+          options={debianOptions}
+          image={debian}
+        />
+        <SelectableCardOptionGroup.Option
+          value="centos"
+          aria-label="CentOS"
+          options={centosOptions}
+          image={centos}
+        />
+      </SelectableCardOptionGroup>,
+    )
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  test('renders correctly with id', () => {
+    const { asFragment } = renderWithTheme(
+      <SelectableCardOptionGroup
+        value="ubuntu"
+        optionValue="ubuntu-20.04"
+        onChange={() => {}}
+        onChangeOption={() => {}}
+        size="medium"
+      >
+        <SelectableCardOptionGroup.Option
+          value="ubuntu"
+          label="Ubuntu"
+          options={ubuntuOptions}
+          image={ubuntu}
+          id="ubuntu-option"
+        />
+        <SelectableCardOptionGroup.Option
+          value="debian"
+          label="Debian"
+          options={debianOptions}
+          image={debian}
+          id="debian-option"
+        />
+        <SelectableCardOptionGroup.Option
+          value="centos"
+          label="CentOS"
+          options={centosOptions}
+          image={centos}
+          id="centos-option"
+        />
+      </SelectableCardOptionGroup>,
+    )
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  test('renders correctly with all options disabled', () => {
+    const { asFragment } = renderWithTheme(
+      <SelectableCardOptionGroup
+        value="ubuntu"
+        optionValue="ubuntu-20.04"
+        onChange={() => {}}
+        onChangeOption={() => {}}
+        disabled
+      >
+        <SelectableCardOptionGroup.Option
+          value="ubuntu"
+          label="Ubuntu"
+          options={ubuntuOptions}
+          image={ubuntu}
+        />
+        <SelectableCardOptionGroup.Option
+          value="debian"
+          label="Debian"
+          options={debianOptions}
+          image={debian}
+        />
+        <SelectableCardOptionGroup.Option
+          value="centos"
+          label="CentOS"
+          options={centosOptions}
+          image={centos}
+        />
+      </SelectableCardOptionGroup>,
+    )
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  test('renders correctly with partial disabled', async () => {
+    const onChange = vi.fn()
+    const onChangeOption = vi.fn()
+
+    const { asFragment } = renderWithTheme(
+      <SelectableCardOptionGroup
+        value="ubuntu"
+        optionValue="ubuntu-20.04"
+        onChange={onChange}
+        onChangeOption={onChangeOption}
+      >
+        <SelectableCardOptionGroup.Option
+          value="ubuntu"
+          label="Ubuntu"
+          options={ubuntuOptions}
+          image={ubuntu}
+        />
+        <SelectableCardOptionGroup.Option
+          value="debian"
+          label="Debian"
+          options={debianOptions}
+          image={debian}
+          disabled
+        />
+        <SelectableCardOptionGroup.Option
+          value="centos"
+          label="CentOS"
+          options={centosOptions}
+          image={centos}
+        />
+      </SelectableCardOptionGroup>,
+    )
+
+    await userEvent.click(screen.getByText('Debian'))
+    expect(onChange).toHaveBeenCalledTimes(0)
+
+    await userEvent.click(screen.getByLabelText('Debian option'))
+    expect(onChangeOption).toHaveBeenCalledTimes(0)
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  test('renders correctly with error message', () => {
+    const { asFragment } = renderWithTheme(
+      <SelectableCardOptionGroup
+        value="ubuntu"
+        optionValue="ubuntu-20.04"
+        onChange={() => {}}
+        onChangeOption={() => {}}
+        error="Error message"
+      >
+        <SelectableCardOptionGroup.Option
+          value="ubuntu"
+          label="Ubuntu"
+          options={ubuntuOptions}
+          image={ubuntu}
+        />
+        <SelectableCardOptionGroup.Option
+          value="debian"
+          label="Debian"
+          options={debianOptions}
+          image={debian}
+        />
+        <SelectableCardOptionGroup.Option
+          value="centos"
+          label="CentOS"
+          options={centosOptions}
+          image={centos}
+        />
+      </SelectableCardOptionGroup>,
+    )
+    expect(screen.getByText('Error message')).toBeInTheDocument()
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  test('renders correctly with error as boolean', () => {
+    const { asFragment } = renderWithTheme(
+      <SelectableCardOptionGroup
+        value="ubuntu"
+        optionValue="ubuntu-20.04"
+        onChange={() => {}}
+        onChangeOption={() => {}}
+        error
+      >
+        <SelectableCardOptionGroup.Option
+          value="ubuntu"
+          label="Ubuntu"
+          options={ubuntuOptions}
+          image={ubuntu}
+        />
+        <SelectableCardOptionGroup.Option
+          value="debian"
+          label="Debian"
+          options={debianOptions}
+          image={debian}
+        />
+        <SelectableCardOptionGroup.Option
+          value="centos"
+          label="CentOS"
+          options={centosOptions}
+          image={centos}
+        />
+      </SelectableCardOptionGroup>,
+    )
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  test('renders correctly with image as ReactNode', () => {
+    const { asFragment } = renderWithTheme(
+      <SelectableCardOptionGroup
+        value="ubuntu"
+        optionValue="ubuntu-20.04"
+        onChange={() => {}}
+        onChangeOption={() => {}}
+      >
+        <SelectableCardOptionGroup.Option
+          value="ubuntu"
+          label="Ubuntu"
+          options={ubuntuOptions}
+          image={<img src={ubuntu} alt="Ubuntu" />}
+        />
+        <SelectableCardOptionGroup.Option
+          value="debian"
+          label="Debian"
+          options={debianOptions}
+          image={<img src={debian} alt="Debian" />}
+        />
+        <SelectableCardOptionGroup.Option
+          value="centos"
+          label="CentOS"
+          options={centosOptions}
+          image={<img src={centos} alt="CentOS" />}
+        />
+      </SelectableCardOptionGroup>,
+    )
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  test('renders correctly 4 columns', () => {
+    const { asFragment } = renderWithTheme(
+      <SelectableCardOptionGroup
+        value="ubuntu"
+        optionValue="ubuntu-20.04"
+        onChange={() => {}}
+        onChangeOption={() => {}}
+        columns={4}
+      >
+        <SelectableCardOptionGroup.Option
+          value="ubuntu"
+          label="Ubuntu"
+          options={ubuntuOptions}
+          image={ubuntu}
+        />
+        <SelectableCardOptionGroup.Option
+          value="debian"
+          label="Debian"
+          options={debianOptions}
+          image={debian}
+        />
+        <SelectableCardOptionGroup.Option
+          value="centos"
+          label="CentOS"
+          options={centosOptions}
+          image={centos}
+        />
+      </SelectableCardOptionGroup>,
+    )
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  test('renders correctly with helper', () => {
+    const { asFragment } = renderWithTheme(
+      <SelectableCardOptionGroup
+        value="ubuntu"
+        optionValue="ubuntu-20.04"
+        onChange={() => {}}
+        onChangeOption={() => {}}
+        helper="Helper message"
+      >
+        <SelectableCardOptionGroup.Option
+          value="ubuntu"
+          label="Ubuntu"
+          options={ubuntuOptions}
+          image={ubuntu}
+        />
+        <SelectableCardOptionGroup.Option
+          value="debian"
+          label="Debian"
+          options={debianOptions}
+          image={debian}
+        />
+        <SelectableCardOptionGroup.Option
+          value="centos"
+          label="CentOS"
+          options={centosOptions}
+          image={centos}
+        />
+      </SelectableCardOptionGroup>,
+    )
+    expect(screen.getByText('Helper message')).toBeInTheDocument()
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  test('onChange and onChangeOption are being called', async () => {
+    const onChange = vi.fn()
+    const onChangeOption = vi.fn()
+
+    const { asFragment } = renderWithTheme(
+      <SelectableCardOptionGroup
+        value="ubuntu"
+        optionValue="ubuntu-20.04"
+        onChange={onChange}
+        onChangeOption={onChangeOption}
+      >
+        <SelectableCardOptionGroup.Option
+          value="ubuntu"
+          label="Ubuntu"
+          options={ubuntuOptions}
+          image={ubuntu}
+        />
+        <SelectableCardOptionGroup.Option
+          value="debian"
+          label="Debian"
+          options={debianOptions}
+          image={debian}
+        />
+        <SelectableCardOptionGroup.Option
+          value="centos"
+          label="CentOS"
+          options={centosOptions}
+          image={centos}
+        />
+      </SelectableCardOptionGroup>,
+    )
+
+    await userEvent.click(screen.getByText('Debian'))
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalledTimes(2)
+    })
+
+    await userEvent.click(screen.getByLabelText('Debian option'))
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  test('tabulation works in correct order selectable card > select input', async () => {
+    renderWithTheme(
+      <SelectableCardOptionGroup
+        value="ubuntu"
+        optionValue="ubuntu-20.04"
+        onChange={() => {}}
+        onChangeOption={() => {}}
+      >
+        <SelectableCardOptionGroup.Option
+          value="ubuntu"
+          label="Ubuntu"
+          options={ubuntuOptions}
+          image={ubuntu}
+        />
+      </SelectableCardOptionGroup>,
+    )
+
+    await userEvent.keyboard('{tab}')
+    expect(screen.getByRole('button')).toHaveFocus() // This is the selectable card
+
+    await userEvent.keyboard('{tab}')
+    expect(screen.getByRole('combobox')).toHaveFocus() // This is the select input
+  })
+})
diff --git a/packages/ui/src/components/SelectableCardOptionGroup/components/Image.tsx b/packages/ui/src/components/SelectableCardOptionGroup/components/Image.tsx
new file mode 100644
index 0000000000..576657ae34
--- /dev/null
+++ b/packages/ui/src/components/SelectableCardOptionGroup/components/Image.tsx
@@ -0,0 +1,35 @@
+import styled from '@emotion/styled'
+import { useSelectableCardOptionGroup } from '../Provider'
+import type { Sizes } from '../types'
+
+const StyledImage = styled.img`
+  &[data-disabled='true'] {
+    filter: grayscale(100%);
+  }
+`
+
+const IMAGE_SIZES = {
+  large: 56,
+  medium: 40,
+} as const
+
+type ImageType = {
+  src: string
+  alt?: string
+  className?: string
+  size: Sizes
+}
+
+export const Image = ({ src, alt, size, className }: ImageType) => {
+  const { disabled } = useSelectableCardOptionGroup()
+
+  return (
+    <StyledImage
+      src={src}
+      alt={alt}
+      width={IMAGE_SIZES[size]}
+      data-disabled={disabled}
+      className={className}
+    />
+  )
+}
diff --git a/packages/ui/src/components/SelectableCardOptionGroup/components/Option.tsx b/packages/ui/src/components/SelectableCardOptionGroup/components/Option.tsx
new file mode 100644
index 0000000000..3c8908fb4c
--- /dev/null
+++ b/packages/ui/src/components/SelectableCardOptionGroup/components/Option.tsx
@@ -0,0 +1,173 @@
+import styled from '@emotion/styled'
+import { type ComponentProps, type ReactNode, useId } from 'react'
+import { Label } from '../../Label'
+import { RadioStack } from '../../Radio'
+import { SelectInputV2 } from '../../SelectInputV2'
+import { StyledInputWrapper } from '../../SelectInputV2/SelectBar'
+import { SelectableCard } from '../../SelectableCard'
+import { Stack } from '../../Stack'
+import { useSelectableCardOptionGroup } from '../Provider'
+import { Image } from './Image'
+
+const StyledSelectableCard = styled(SelectableCard)`
+  padding: 0;
+  padding-top: ${({ theme }) => theme.space[2]};
+
+  ${RadioStack} {
+    position: absolute;
+    padding: 8px;
+    margin-top: -${({ theme }) => theme.space[2]};
+  }
+
+  cursor: pointer;
+`
+
+const FullHeightStack = styled(Stack)`
+  height: 100%;
+`
+
+const StyledSelectInputV2 = styled(SelectInputV2, {
+  shouldForwardProp: prop => !['checked'].includes(prop),
+})<{ checked: boolean }>`
+  ${StyledInputWrapper} {
+    border-radius: 0 0 ${({ theme }) => theme.radii.default} ${({ theme }) => theme.radii.default};
+    border-bottom: 0 !important;
+    border-right: 0 !important;
+    border-left: 0 !important;
+  }
+
+  ${StyledInputWrapper}:hover, ${StyledInputWrapper}:focus, ${StyledInputWrapper}:active {
+    border-color: ${({ theme, disabled, error }) => {
+      if (disabled) {
+        return theme.colors.neutral.borderDisabled
+      }
+
+      if (error) {
+        return theme.colors.danger.border
+      }
+
+      return theme.colors.neutral.border
+    }} !important;
+    outline: none;
+  }
+`
+
+const StyledPaddedStack = styled(Stack)`
+  padding: 0 ${({ theme }) => theme.space[2]};
+`
+
+type OptionProps = Omit<ComponentProps<typeof SelectableCard>, 'onChange'> & {
+  value: string
+  className?: string
+  children?: ReactNode
+  options: ComponentProps<typeof SelectInputV2>['options']
+  optionValue?: ComponentProps<typeof SelectInputV2>['value']
+  image?: ReactNode
+  labelDescription?: ComponentProps<typeof Label>['labelDescription']
+  id?: string
+}
+
+export const Option = ({
+  value,
+  label,
+  labelDescription,
+  'aria-label': ariaLabel,
+  children,
+  className,
+  options,
+  image,
+  disabled,
+  id,
+}: OptionProps) => {
+  const {
+    onChange,
+    onChangeOption,
+    groupValue,
+    disabled: groupDisabled,
+    size,
+    error,
+    optionValue,
+  } = useSelectableCardOptionGroup()
+
+  const generatedId = useId()
+  const inputId = id || generatedId
+
+  return (
+    <StyledSelectableCard
+      value={value}
+      onChange={event => {
+        onChange?.(event)
+        if (Array.isArray(options)) {
+          onChangeOption?.(options?.[0]?.value)
+        }
+      }}
+      className={className}
+      type="radio"
+      showTick
+      disabled={disabled || groupDisabled}
+      checked={groupValue === value}
+      isError={error}
+      {...(label ? { id: inputId } : { 'aria-label': ariaLabel as string })}
+    >
+      <FullHeightStack
+        direction="column"
+        width="100%"
+        flex="1 1 auto"
+        justifyContent="space-between"
+        gap={2}
+      >
+        <StyledPaddedStack
+          direction="column"
+          alignItems="center"
+          justifyContent="center"
+          width="100%"
+          gap={1}
+        >
+          {typeof image === 'string' ? (
+            <Image
+              src={image}
+              alt={typeof label === 'string' ? label : value}
+              size={size}
+            />
+          ) : (
+            image
+          )}
+          <Stack
+            direction="column"
+            alignItems="center"
+            justifyContent="center"
+            width="100%"
+            gap={0.5}
+          >
+            {typeof label === 'string' ? (
+              <Label
+                sentiment={groupValue === value ? 'primary' : 'neutral'}
+                htmlFor={inputId}
+                disabled={disabled || groupDisabled}
+                labelDescription={labelDescription}
+              >
+                {label}
+              </Label>
+            ) : (
+              label
+            )}
+            {children}
+          </Stack>
+        </StyledPaddedStack>
+        <StyledSelectInputV2
+          value={optionValue}
+          onChange={onChangeOption}
+          options={options}
+          name="selectable-card-option"
+          size="medium"
+          disabled={disabled || groupDisabled}
+          error={error}
+          checked={groupValue === value}
+          aria-label={
+            typeof label === 'string' ? `${label} option` : `${value} option`
+          }
+        />
+      </FullHeightStack>
+    </StyledSelectableCard>
+  )
+}
diff --git a/packages/ui/src/components/SelectableCardOptionGroup/index.tsx b/packages/ui/src/components/SelectableCardOptionGroup/index.tsx
new file mode 100644
index 0000000000..87eb95cdbc
--- /dev/null
+++ b/packages/ui/src/components/SelectableCardOptionGroup/index.tsx
@@ -0,0 +1,123 @@
+import styled from '@emotion/styled'
+import type { ComponentProps, InputHTMLAttributes, ReactNode } from 'react'
+import { useMemo } from 'react'
+import { Label } from '../Label'
+import { Row } from '../Row'
+import { Stack } from '../Stack'
+import { Text } from '../Text'
+import { SelectableCardOptionGroupContext } from './Provider'
+import { Option } from './components/Option'
+import type { Sizes } from './types'
+
+const FieldSet = styled.fieldset`
+  border: none;
+  padding: 0;
+  margin: 0;
+`
+
+type SelectableCardOptionGroupProps = {
+  legend?: string
+  legendDescription?: ReactNode
+  className?: string
+  required?: boolean
+  columns?: number
+  children: ReactNode
+  helper?: ReactNode
+  error?: ReactNode
+  /**
+   * The value that is selected among selectable card options.
+   */
+  value?: ComponentProps<typeof Option>['value']
+  /**
+   * The value that is selected among select input options.
+   */
+  optionValue?: ComponentProps<typeof Option>['optionValue']
+  onChangeOption: (value: string) => void
+  disabled?: boolean
+  size?: Sizes
+} & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange'>> &
+  Pick<InputHTMLAttributes<HTMLInputElement>, 'name'>
+
+/**
+ * SelectableCardOptionGroup gives you a group of SelectInput within a SelectableCard component.
+ * It's an input that provide the choice of one value and sub options to choose from.
+ *
+ * **Be aware that once you click on the component, the first value of options will be selected by default.**
+ */
+export const SelectableCardOptionGroup = ({
+  legend,
+  legendDescription,
+  className,
+  required,
+  columns = 3,
+  children,
+  helper,
+  error,
+  onChange,
+  value,
+  optionValue,
+  onChangeOption,
+  name,
+  disabled,
+  size = 'large',
+}: SelectableCardOptionGroupProps) => {
+  const contextValue = useMemo(
+    () => ({
+      groupName: name,
+      groupValue: value,
+      onChange,
+      onChangeOption,
+      optionValue,
+      required,
+      disabled,
+      error: !!error,
+      size,
+    }),
+    [
+      disabled,
+      error,
+      name,
+      onChange,
+      onChangeOption,
+      optionValue,
+      required,
+      value,
+      size,
+    ],
+  )
+
+  return (
+    <SelectableCardOptionGroupContext.Provider value={contextValue}>
+      <Stack gap={1}>
+        <FieldSet className={className}>
+          <Stack gap={1.5}>
+            {legend ? (
+              <Label
+                as="legend"
+                required={required}
+                labelDescription={legendDescription}
+              >
+                {legend}
+              </Label>
+            ) : null}
+            <Row gap={2} templateColumns={`repeat(${columns}, minmax(0, 1fr))`}>
+              {children}
+            </Row>
+          </Stack>
+        </FieldSet>
+        {(error && typeof error === 'string') || helper ? (
+          <Text
+            as="span"
+            variant="caption"
+            prominence="weak"
+            sentiment={error ? 'danger' : 'neutral'}
+          >
+            {helper || error}
+          </Text>
+        ) : null}
+      </Stack>
+    </SelectableCardOptionGroupContext.Provider>
+  )
+}
+
+SelectableCardOptionGroup.Option = Option
diff --git a/packages/ui/src/components/SelectableCardOptionGroup/types.ts b/packages/ui/src/components/SelectableCardOptionGroup/types.ts
new file mode 100644
index 0000000000..970062f5d8
--- /dev/null
+++ b/packages/ui/src/components/SelectableCardOptionGroup/types.ts
@@ -0,0 +1 @@
+export type Sizes = 'large' | 'medium'
diff --git a/packages/ui/src/components/SwitchButton/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/SwitchButton/__tests__/__snapshots__/index.test.tsx.snap
index 7737395e2f..b591f4eba8 100644
--- a/packages/ui/src/components/SwitchButton/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/SwitchButton/__tests__/__snapshots__/index.test.tsx.snap
@@ -220,8 +220,8 @@ exports[`SwitchButton > renders correctly 1`] = `
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-3 .emotion-6,
-.emotion-3 .eqr7bqq1 {
+.emotion-3[data-has-label='true'] .emotion-6,
+.emotion-3[data-has-label='true'] .eqr7bqq1 {
   width: 100%;
 }
 
@@ -293,6 +293,7 @@ exports[`SwitchButton > renders correctly 1`] = `
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
+  pointer-events: none;
 }
 
 .emotion-8[aria-disabled='false'],
@@ -472,7 +473,7 @@ exports[`SwitchButton > renders correctly 1`] = `
                 aria-disabled="false"
                 aria-invalid="false"
                 class="emotion-10 emotion-11"
-                id="test-left"
+                id=":r2:"
                 name="test"
                 tabindex="-1"
                 type="radio"
@@ -505,7 +506,7 @@ exports[`SwitchButton > renders correctly 1`] = `
               </svg>
               <label
                 class="emotion-18 emotion-19 emotion-20"
-                for="test-left"
+                for=":r2:"
               >
                 Left
               </label>
@@ -535,7 +536,7 @@ exports[`SwitchButton > renders correctly 1`] = `
                 aria-invalid="false"
                 checked=""
                 class="emotion-10 emotion-11"
-                id="test-right"
+                id=":r6:"
                 name="test"
                 tabindex="-1"
                 type="radio"
@@ -568,7 +569,7 @@ exports[`SwitchButton > renders correctly 1`] = `
               </svg>
               <label
                 class="emotion-18 emotion-19 emotion-20"
-                for="test-right"
+                for=":r6:"
               >
                 Right
               </label>
@@ -689,8 +690,8 @@ exports[`SwitchButton > renders correctly medium 1`] = `
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-3 .emotion-6,
-.emotion-3 .eqr7bqq1 {
+.emotion-3[data-has-label='true'] .emotion-6,
+.emotion-3[data-has-label='true'] .eqr7bqq1 {
   width: 100%;
 }
 
@@ -762,6 +763,7 @@ exports[`SwitchButton > renders correctly medium 1`] = `
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
+  pointer-events: none;
 }
 
 .emotion-8[aria-disabled='false'],
@@ -941,7 +943,7 @@ exports[`SwitchButton > renders correctly medium 1`] = `
                 aria-disabled="false"
                 aria-invalid="false"
                 class="emotion-10 emotion-11"
-                id="test-left"
+                id=":rb:"
                 name="test"
                 tabindex="-1"
                 type="radio"
@@ -974,7 +976,7 @@ exports[`SwitchButton > renders correctly medium 1`] = `
               </svg>
               <label
                 class="emotion-18 emotion-19 emotion-20"
-                for="test-left"
+                for=":rb:"
               >
                 Left
               </label>
@@ -1004,7 +1006,7 @@ exports[`SwitchButton > renders correctly medium 1`] = `
                 aria-invalid="false"
                 checked=""
                 class="emotion-10 emotion-11"
-                id="test-right"
+                id=":rf:"
                 name="test"
                 tabindex="-1"
                 type="radio"
@@ -1037,7 +1039,7 @@ exports[`SwitchButton > renders correctly medium 1`] = `
               </svg>
               <label
                 class="emotion-18 emotion-19 emotion-20"
-                for="test-right"
+                for=":rf:"
               >
                 Right
               </label>
@@ -1158,8 +1160,8 @@ exports[`SwitchButton > renders correctly with right value 1`] = `
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-3 .emotion-6,
-.emotion-3 .eqr7bqq1 {
+.emotion-3[data-has-label='true'] .emotion-6,
+.emotion-3[data-has-label='true'] .eqr7bqq1 {
   width: 100%;
 }
 
@@ -1231,6 +1233,7 @@ exports[`SwitchButton > renders correctly with right value 1`] = `
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
+  pointer-events: none;
 }
 
 .emotion-8[aria-disabled='false'],
@@ -1410,7 +1413,7 @@ exports[`SwitchButton > renders correctly with right value 1`] = `
                 aria-disabled="false"
                 aria-invalid="false"
                 class="emotion-10 emotion-11"
-                id="test-left"
+                id=":rk:"
                 name="test"
                 tabindex="-1"
                 type="radio"
@@ -1443,7 +1446,7 @@ exports[`SwitchButton > renders correctly with right value 1`] = `
               </svg>
               <label
                 class="emotion-18 emotion-19 emotion-20"
-                for="test-left"
+                for=":rk:"
               >
                 Left
               </label>
@@ -1473,7 +1476,7 @@ exports[`SwitchButton > renders correctly with right value 1`] = `
                 aria-invalid="false"
                 checked=""
                 class="emotion-10 emotion-11"
-                id="test-right"
+                id=":ro:"
                 name="test"
                 tabindex="-1"
                 type="radio"
@@ -1506,7 +1509,7 @@ exports[`SwitchButton > renders correctly with right value 1`] = `
               </svg>
               <label
                 class="emotion-18 emotion-19 emotion-20"
-                for="test-right"
+                for=":ro:"
               >
                 Right
               </label>
@@ -1635,8 +1638,8 @@ exports[`SwitchButton > renders with tooltip 1`] = `
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-5 .emotion-8,
-.emotion-5 .eqr7bqq1 {
+.emotion-5[data-has-label='true'] .emotion-8,
+.emotion-5[data-has-label='true'] .eqr7bqq1 {
   width: 100%;
 }
 
@@ -1708,6 +1711,7 @@ exports[`SwitchButton > renders with tooltip 1`] = `
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
+  pointer-events: none;
 }
 
 .emotion-10[aria-disabled='false'],
@@ -1893,7 +1897,7 @@ exports[`SwitchButton > renders with tooltip 1`] = `
                   aria-disabled="false"
                   aria-invalid="false"
                   class="emotion-12 emotion-13"
-                  id="test-left"
+                  id=":rt:"
                   name="test"
                   tabindex="-1"
                   type="radio"
@@ -1926,7 +1930,7 @@ exports[`SwitchButton > renders with tooltip 1`] = `
                 </svg>
                 <label
                   class="emotion-20 emotion-21 emotion-22"
-                  for="test-left"
+                  for=":rt:"
                 >
                   Left
                 </label>
@@ -1956,7 +1960,7 @@ exports[`SwitchButton > renders with tooltip 1`] = `
                   aria-invalid="false"
                   checked=""
                   class="emotion-12 emotion-13"
-                  id="test-right"
+                  id=":r11:"
                   name="test"
                   tabindex="-1"
                   type="radio"
@@ -1989,7 +1993,7 @@ exports[`SwitchButton > renders with tooltip 1`] = `
                 </svg>
                 <label
                   class="emotion-20 emotion-21 emotion-22"
-                  for="test-right"
+                  for=":r11:"
                 >
                   Right
                 </label>
diff --git a/packages/ui/src/components/TagInput/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/TagInput/__tests__/__snapshots__/index.test.tsx.snap
index 75e3abb0eb..f8e3439f80 100644
--- a/packages/ui/src/components/TagInput/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/TagInput/__tests__/__snapshots__/index.test.tsx.snap
@@ -659,8 +659,8 @@ exports[`TagInput > should renders correctly with label 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -669,9 +669,10 @@ exports[`TagInput > should renders correctly with label 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -685,35 +686,35 @@ exports[`TagInput > should renders correctly with label 1`] = `
   border-radius: 0.25rem;
 }
 
-.emotion-4:focus-within {
+.emotion-5:focus-within {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-4[data-success="true"] {
+.emotion-5[data-success="true"] {
   border-color: #22674e;
 }
 
-.emotion-4[data-error="true"] {
+.emotion-5[data-error="true"] {
   border-color: #b3144d;
 }
 
-.emotion-4:hover {
+.emotion-5:hover {
   border-color: #792dd4;
 }
 
-.emotion-4[data-readonly="true"] {
+.emotion-5[data-readonly="true"] {
   border-color: #d9dadd;
   background: #f9f9fa;
 }
 
-.emotion-4[data-disabled="true"] {
+.emotion-5[data-disabled="true"] {
   border-color: #e9eaeb;
   background: #f3f3f4;
   cursor: not-allowed;
 }
 
-.emotion-6 {
+.emotion-7 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -733,7 +734,7 @@ exports[`TagInput > should renders correctly with label 1`] = `
   flex: 1;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -749,23 +750,23 @@ exports[`TagInput > should renders correctly with label 1`] = `
   height: 100%;
 }
 
-.emotion-8::-webkit-input-placeholder {
+.emotion-9::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-8::-moz-placeholder {
+.emotion-9::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-8:-ms-input-placeholder {
+.emotion-9:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-8::placeholder {
+.emotion-9::placeholder {
   color: #727683;
 }
 
-.emotion-8[data-size="large"] {
+.emotion-9[data-size="large"] {
   font-size: 1rem;
 }
 
@@ -776,24 +777,24 @@ exports[`TagInput > should renders correctly with label 1`] = `
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
         for=":r6:"
       >
         Label
       </label>
       <div>
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-5 emotion-6"
           data-disabled="false"
           data-error="false"
           data-readonly="false"
           data-success="false"
         >
           <div
-            class="emotion-6 emotion-7"
+            class="emotion-7 emotion-8"
           >
             <input
-              class="emotion-8 emotion-9"
+              class="emotion-9 emotion-10"
               data-size="large"
               id=":r6:"
               type="text"
@@ -855,8 +856,8 @@ exports[`TagInput > should renders correctly with labelDescription 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -865,9 +866,10 @@ exports[`TagInput > should renders correctly with labelDescription 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-6 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -881,35 +883,35 @@ exports[`TagInput > should renders correctly with labelDescription 1`] = `
   border-radius: 0.25rem;
 }
 
-.emotion-6:focus-within {
+.emotion-7:focus-within {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-6[data-success="true"] {
+.emotion-7[data-success="true"] {
   border-color: #22674e;
 }
 
-.emotion-6[data-error="true"] {
+.emotion-7[data-error="true"] {
   border-color: #b3144d;
 }
 
-.emotion-6:hover {
+.emotion-7:hover {
   border-color: #792dd4;
 }
 
-.emotion-6[data-readonly="true"] {
+.emotion-7[data-readonly="true"] {
   border-color: #d9dadd;
   background: #f9f9fa;
 }
 
-.emotion-6[data-disabled="true"] {
+.emotion-7[data-disabled="true"] {
   border-color: #e9eaeb;
   background: #f3f3f4;
   cursor: not-allowed;
 }
 
-.emotion-8 {
+.emotion-9 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -929,7 +931,7 @@ exports[`TagInput > should renders correctly with labelDescription 1`] = `
   flex: 1;
 }
 
-.emotion-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -945,23 +947,23 @@ exports[`TagInput > should renders correctly with labelDescription 1`] = `
   height: 100%;
 }
 
-.emotion-10::-webkit-input-placeholder {
+.emotion-11::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-10::-moz-placeholder {
+.emotion-11::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-10:-ms-input-placeholder {
+.emotion-11:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-10::placeholder {
+.emotion-11::placeholder {
   color: #727683;
 }
 
-.emotion-10[data-size="large"] {
+.emotion-11[data-size="large"] {
   font-size: 1rem;
 }
 
@@ -975,7 +977,7 @@ exports[`TagInput > should renders correctly with labelDescription 1`] = `
         class="emotion-2 emotion-1"
       >
         <label
-          class="emotion-4 emotion-5"
+          class="emotion-4 emotion-5 emotion-6"
           for=":r9:"
         />
         <div>
@@ -984,17 +986,17 @@ exports[`TagInput > should renders correctly with labelDescription 1`] = `
       </div>
       <div>
         <div
-          class="emotion-6 emotion-7"
+          class="emotion-7 emotion-8"
           data-disabled="false"
           data-error="false"
           data-readonly="false"
           data-success="false"
         >
           <div
-            class="emotion-8 emotion-9"
+            class="emotion-9 emotion-10"
           >
             <input
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
               data-size="large"
               id=":r9:"
               type="text"
diff --git a/packages/ui/src/components/TextArea/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/TextArea/__tests__/__snapshots__/index.test.tsx.snap
index edd78d8b3c..1717ad5b3a 100644
--- a/packages/ui/src/components/TextArea/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/TextArea/__tests__/__snapshots__/index.test.tsx.snap
@@ -48,8 +48,8 @@ exports[`TextArea > should render correctly when input  has a error sentiment 1`
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -58,10 +58,11 @@ exports[`TextArea > should render correctly when input  has a error sentiment 1`
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -70,9 +71,10 @@ exports[`TextArea > should render correctly when input  has a error sentiment 1`
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -80,7 +82,7 @@ exports[`TextArea > should render correctly when input  has a error sentiment 1`
   display: flex;
 }
 
-.emotion-4 {
+.emotion-5 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -88,7 +90,7 @@ exports[`TextArea > should render correctly when input  has a error sentiment 1`
   display: flex;
 }
 
-.emotion-6 {
+.emotion-7 {
   width: 100%;
   resize: vertical;
   background: #ffffff;
@@ -99,68 +101,68 @@ exports[`TextArea > should render correctly when input  has a error sentiment 1`
   padding-right: calc(1.5rem + 0px + 16px);
 }
 
-.emotion-6::-webkit-input-placeholder {
+.emotion-7::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::-moz-placeholder {
+.emotion-7::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-6:-ms-input-placeholder {
+.emotion-7:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::placeholder {
+.emotion-7::placeholder {
   color: #727683;
 }
 
-.emotion-6[data-success='true'] {
+.emotion-7[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-6[data-error='true'] {
+.emotion-7[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-6[data-readonly='true'] {
+.emotion-7[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-6:disabled {
+.emotion-7:disabled {
   background: #f3f3f4;
   border-color: #e9eaeb;
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::-webkit-input-placeholder {
+.emotion-7:disabled::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::-moz-placeholder {
+.emotion-7:disabled::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled:-ms-input-placeholder {
+.emotion-7:disabled:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::placeholder {
+.emotion-7:disabled::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:not(:disabled):hover {
+.emotion-7:not(:disabled):hover {
   border-color: #8c40ef;
 }
 
-.emotion-6:not(:disabled):focus {
+.emotion-7:not(:disabled):focus {
   outline: none;
   border-color: #8c40ef;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -186,7 +188,7 @@ exports[`TextArea > should render correctly when input  has a error sentiment 1`
   right: 0.5rem;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -212,7 +214,7 @@ exports[`TextArea > should render correctly when input  has a error sentiment 1`
   right: 0.5rem;
 }
 
-.emotion-10 {
+.emotion-11 {
   vertical-align: middle;
   fill: #b3144d;
   height: 1rem;
@@ -221,12 +223,12 @@ exports[`TextArea > should render correctly when input  has a error sentiment 1`
   min-height: 1rem;
 }
 
-.emotion-10 .fillStroke {
+.emotion-11 .fillStroke {
   stroke: #b3144d;
   fill: none;
 }
 
-.emotion-12 {
+.emotion-13 {
   display: grid;
   grid-template-columns: minmax(0, 1fr) min-content;
   gap: 0.5rem;
@@ -240,7 +242,7 @@ exports[`TextArea > should render correctly when input  has a error sentiment 1`
   justify-content: normal;
 }
 
-.emotion-14 {
+.emotion-15 {
   color: #b3144d;
   font-size: 0.75rem;
   font-family: Inter,Asap,sans-serif;
@@ -259,17 +261,17 @@ exports[`TextArea > should render correctly when input  has a error sentiment 1`
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
         for=":rs:"
       >
         Test
       </label>
       <div
-        class="emotion-4 emotion-5"
+        class="emotion-5 emotion-6"
       >
         <textarea
           aria-invalid="true"
-          class="emotion-6 emotion-7"
+          class="emotion-7 emotion-8"
           data-error="true"
           data-readonly="false"
           data-success="false"
@@ -279,10 +281,10 @@ exports[`TextArea > should render correctly when input  has a error sentiment 1`
           test
         </textarea>
         <div
-          class="emotion-8 emotion-9"
+          class="emotion-9 emotion-10"
         >
           <svg
-            class="emotion-10 emotion-11"
+            class="emotion-11 emotion-12"
             viewBox="0 0 20 20"
           >
             <path
@@ -294,11 +296,11 @@ exports[`TextArea > should render correctly when input  has a error sentiment 1`
         </div>
       </div>
       <div
-        class="emotion-12 emotion-13"
+        class="emotion-13 emotion-14"
       >
         <div>
           <p
-            class="emotion-14 emotion-3"
+            class="emotion-15 emotion-4"
           >
             success
           </p>
@@ -357,8 +359,8 @@ exports[`TextArea > should render correctly when input has a success sentiment 1
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -367,10 +369,11 @@ exports[`TextArea > should render correctly when input has a success sentiment 1
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -379,9 +382,10 @@ exports[`TextArea > should render correctly when input has a success sentiment 1
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -389,7 +393,7 @@ exports[`TextArea > should render correctly when input has a success sentiment 1
   display: flex;
 }
 
-.emotion-4 {
+.emotion-5 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -397,7 +401,7 @@ exports[`TextArea > should render correctly when input has a success sentiment 1
   display: flex;
 }
 
-.emotion-6 {
+.emotion-7 {
   width: 100%;
   resize: vertical;
   background: #ffffff;
@@ -408,68 +412,68 @@ exports[`TextArea > should render correctly when input has a success sentiment 1
   padding-right: calc(1.5rem + 0px + 16px);
 }
 
-.emotion-6::-webkit-input-placeholder {
+.emotion-7::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::-moz-placeholder {
+.emotion-7::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-6:-ms-input-placeholder {
+.emotion-7:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::placeholder {
+.emotion-7::placeholder {
   color: #727683;
 }
 
-.emotion-6[data-success='true'] {
+.emotion-7[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-6[data-error='true'] {
+.emotion-7[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-6[data-readonly='true'] {
+.emotion-7[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-6:disabled {
+.emotion-7:disabled {
   background: #f3f3f4;
   border-color: #e9eaeb;
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::-webkit-input-placeholder {
+.emotion-7:disabled::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::-moz-placeholder {
+.emotion-7:disabled::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled:-ms-input-placeholder {
+.emotion-7:disabled:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::placeholder {
+.emotion-7:disabled::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:not(:disabled):hover {
+.emotion-7:not(:disabled):hover {
   border-color: #8c40ef;
 }
 
-.emotion-6:not(:disabled):focus {
+.emotion-7:not(:disabled):focus {
   outline: none;
   border-color: #8c40ef;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -495,7 +499,7 @@ exports[`TextArea > should render correctly when input has a success sentiment 1
   right: 0.5rem;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -521,7 +525,7 @@ exports[`TextArea > should render correctly when input has a success sentiment 1
   right: 0.5rem;
 }
 
-.emotion-10 {
+.emotion-11 {
   vertical-align: middle;
   fill: #22674e;
   height: 16px;
@@ -530,12 +534,12 @@ exports[`TextArea > should render correctly when input has a success sentiment 1
   min-height: 16px;
 }
 
-.emotion-10 .fillStroke {
+.emotion-11 .fillStroke {
   stroke: #22674e;
   fill: none;
 }
 
-.emotion-12 {
+.emotion-13 {
   display: grid;
   grid-template-columns: minmax(0, 1fr) min-content;
   gap: 0.5rem;
@@ -549,7 +553,7 @@ exports[`TextArea > should render correctly when input has a success sentiment 1
   justify-content: normal;
 }
 
-.emotion-14 {
+.emotion-15 {
   color: #22674e;
   font-size: 0.75rem;
   font-family: Inter,Asap,sans-serif;
@@ -568,17 +572,17 @@ exports[`TextArea > should render correctly when input has a success sentiment 1
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
         for=":ro:"
       >
         Test
       </label>
       <div
-        class="emotion-4 emotion-5"
+        class="emotion-5 emotion-6"
       >
         <textarea
           aria-invalid="false"
-          class="emotion-6 emotion-7"
+          class="emotion-7 emotion-8"
           data-error="false"
           data-readonly="false"
           data-success="true"
@@ -588,10 +592,10 @@ exports[`TextArea > should render correctly when input has a success sentiment 1
           test
         </textarea>
         <div
-          class="emotion-8 emotion-9"
+          class="emotion-9 emotion-10"
         >
           <svg
-            class="emotion-10 emotion-11"
+            class="emotion-11 emotion-12"
             viewBox="0 0 20 20"
           >
             <path
@@ -603,11 +607,11 @@ exports[`TextArea > should render correctly when input has a success sentiment 1
         </div>
       </div>
       <div
-        class="emotion-12 emotion-13"
+        class="emotion-13 emotion-14"
       >
         <div>
           <p
-            class="emotion-14 emotion-3"
+            class="emotion-15 emotion-4"
           >
             success
           </p>
@@ -666,8 +670,8 @@ exports[`TextArea > should render correctly when input is disabled 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -676,10 +680,11 @@ exports[`TextArea > should render correctly when input is disabled 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -688,9 +693,10 @@ exports[`TextArea > should render correctly when input is disabled 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -698,7 +704,7 @@ exports[`TextArea > should render correctly when input is disabled 1`] = `
   display: flex;
 }
 
-.emotion-4 {
+.emotion-5 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -706,7 +712,7 @@ exports[`TextArea > should render correctly when input is disabled 1`] = `
   display: flex;
 }
 
-.emotion-6 {
+.emotion-7 {
   width: 100%;
   resize: vertical;
   background: #ffffff;
@@ -717,68 +723,68 @@ exports[`TextArea > should render correctly when input is disabled 1`] = `
   padding-right: calc(1.5rem + 0px + 0px);
 }
 
-.emotion-6::-webkit-input-placeholder {
+.emotion-7::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::-moz-placeholder {
+.emotion-7::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-6:-ms-input-placeholder {
+.emotion-7:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::placeholder {
+.emotion-7::placeholder {
   color: #727683;
 }
 
-.emotion-6[data-success='true'] {
+.emotion-7[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-6[data-error='true'] {
+.emotion-7[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-6[data-readonly='true'] {
+.emotion-7[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-6:disabled {
+.emotion-7:disabled {
   background: #f3f3f4;
   border-color: #e9eaeb;
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::-webkit-input-placeholder {
+.emotion-7:disabled::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::-moz-placeholder {
+.emotion-7:disabled::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled:-ms-input-placeholder {
+.emotion-7:disabled:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::placeholder {
+.emotion-7:disabled::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:not(:disabled):hover {
+.emotion-7:not(:disabled):hover {
   border-color: #8c40ef;
 }
 
-.emotion-6:not(:disabled):focus {
+.emotion-7:not(:disabled):focus {
   outline: none;
   border-color: #8c40ef;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-6 {
+.emotion-7 {
   width: 100%;
   resize: vertical;
   background: #ffffff;
@@ -789,68 +795,68 @@ exports[`TextArea > should render correctly when input is disabled 1`] = `
   padding-right: calc(1.5rem + 0px + 0px);
 }
 
-.emotion-6::-webkit-input-placeholder {
+.emotion-7::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::-moz-placeholder {
+.emotion-7::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-6:-ms-input-placeholder {
+.emotion-7:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::placeholder {
+.emotion-7::placeholder {
   color: #727683;
 }
 
-.emotion-6[data-success='true'] {
+.emotion-7[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-6[data-error='true'] {
+.emotion-7[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-6[data-readonly='true'] {
+.emotion-7[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-6:disabled {
+.emotion-7:disabled {
   background: #f3f3f4;
   border-color: #e9eaeb;
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::-webkit-input-placeholder {
+.emotion-7:disabled::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::-moz-placeholder {
+.emotion-7:disabled::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled:-ms-input-placeholder {
+.emotion-7:disabled:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::placeholder {
+.emotion-7:disabled::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:not(:disabled):hover {
+.emotion-7:not(:disabled):hover {
   border-color: #8c40ef;
 }
 
-.emotion-6:not(:disabled):focus {
+.emotion-7:not(:disabled):focus {
   outline: none;
   border-color: #8c40ef;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -876,7 +882,7 @@ exports[`TextArea > should render correctly when input is disabled 1`] = `
   right: 0.5rem;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -909,17 +915,17 @@ exports[`TextArea > should render correctly when input is disabled 1`] = `
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
         for=":ra:"
       >
         Test
       </label>
       <div
-        class="emotion-4 emotion-5"
+        class="emotion-5 emotion-6"
       >
         <textarea
           aria-invalid="false"
-          class="emotion-6 emotion-7"
+          class="emotion-7 emotion-8"
           data-error="false"
           data-readonly="false"
           data-success="false"
@@ -930,7 +936,7 @@ exports[`TextArea > should render correctly when input is disabled 1`] = `
           test
         </textarea>
         <div
-          class="emotion-8 emotion-9"
+          class="emotion-9 emotion-10"
         />
       </div>
     </div>
@@ -986,8 +992,8 @@ exports[`TextArea > should render correctly when input is readOnly 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -996,10 +1002,11 @@ exports[`TextArea > should render correctly when input is readOnly 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -1008,9 +1015,10 @@ exports[`TextArea > should render correctly when input is readOnly 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1018,7 +1026,7 @@ exports[`TextArea > should render correctly when input is readOnly 1`] = `
   display: flex;
 }
 
-.emotion-4 {
+.emotion-5 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1026,7 +1034,7 @@ exports[`TextArea > should render correctly when input is readOnly 1`] = `
   display: flex;
 }
 
-.emotion-6 {
+.emotion-7 {
   width: 100%;
   resize: vertical;
   background: #ffffff;
@@ -1037,68 +1045,68 @@ exports[`TextArea > should render correctly when input is readOnly 1`] = `
   padding-right: calc(1.5rem + 0px + 0px);
 }
 
-.emotion-6::-webkit-input-placeholder {
+.emotion-7::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::-moz-placeholder {
+.emotion-7::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-6:-ms-input-placeholder {
+.emotion-7:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::placeholder {
+.emotion-7::placeholder {
   color: #727683;
 }
 
-.emotion-6[data-success='true'] {
+.emotion-7[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-6[data-error='true'] {
+.emotion-7[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-6[data-readonly='true'] {
+.emotion-7[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-6:disabled {
+.emotion-7:disabled {
   background: #f3f3f4;
   border-color: #e9eaeb;
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::-webkit-input-placeholder {
+.emotion-7:disabled::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::-moz-placeholder {
+.emotion-7:disabled::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled:-ms-input-placeholder {
+.emotion-7:disabled:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::placeholder {
+.emotion-7:disabled::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:not(:disabled):hover {
+.emotion-7:not(:disabled):hover {
   border-color: #8c40ef;
 }
 
-.emotion-6:not(:disabled):focus {
+.emotion-7:not(:disabled):focus {
   outline: none;
   border-color: #8c40ef;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-6 {
+.emotion-7 {
   width: 100%;
   resize: vertical;
   background: #ffffff;
@@ -1109,68 +1117,68 @@ exports[`TextArea > should render correctly when input is readOnly 1`] = `
   padding-right: calc(1.5rem + 0px + 0px);
 }
 
-.emotion-6::-webkit-input-placeholder {
+.emotion-7::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::-moz-placeholder {
+.emotion-7::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-6:-ms-input-placeholder {
+.emotion-7:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::placeholder {
+.emotion-7::placeholder {
   color: #727683;
 }
 
-.emotion-6[data-success='true'] {
+.emotion-7[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-6[data-error='true'] {
+.emotion-7[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-6[data-readonly='true'] {
+.emotion-7[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-6:disabled {
+.emotion-7:disabled {
   background: #f3f3f4;
   border-color: #e9eaeb;
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::-webkit-input-placeholder {
+.emotion-7:disabled::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::-moz-placeholder {
+.emotion-7:disabled::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled:-ms-input-placeholder {
+.emotion-7:disabled:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::placeholder {
+.emotion-7:disabled::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:not(:disabled):hover {
+.emotion-7:not(:disabled):hover {
   border-color: #8c40ef;
 }
 
-.emotion-6:not(:disabled):focus {
+.emotion-7:not(:disabled):focus {
   outline: none;
   border-color: #8c40ef;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1196,7 +1204,7 @@ exports[`TextArea > should render correctly when input is readOnly 1`] = `
   right: 0.5rem;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1229,17 +1237,17 @@ exports[`TextArea > should render correctly when input is readOnly 1`] = `
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
         for=":rd:"
       >
         Test
       </label>
       <div
-        class="emotion-4 emotion-5"
+        class="emotion-5 emotion-6"
       >
         <textarea
           aria-invalid="false"
-          class="emotion-6 emotion-7"
+          class="emotion-7 emotion-8"
           data-error="false"
           data-readonly="true"
           data-success="false"
@@ -1249,7 +1257,7 @@ exports[`TextArea > should render correctly when input is readOnly 1`] = `
           test
         </textarea>
         <div
-          class="emotion-8 emotion-9"
+          class="emotion-9 emotion-10"
         />
       </div>
     </div>
@@ -1328,8 +1336,8 @@ exports[`TextArea > should render correctly when it is required 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -1338,10 +1346,11 @@ exports[`TextArea > should render correctly when it is required 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -1350,9 +1359,10 @@ exports[`TextArea > should render correctly when it is required 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-6 {
+.emotion-7 {
   color: #b3144d;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -1364,7 +1374,7 @@ exports[`TextArea > should render correctly when it is required 1`] = `
   text-decoration: none;
 }
 
-.emotion-8 {
+.emotion-9 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1372,7 +1382,7 @@ exports[`TextArea > should render correctly when it is required 1`] = `
   display: flex;
 }
 
-.emotion-8 {
+.emotion-9 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1380,7 +1390,7 @@ exports[`TextArea > should render correctly when it is required 1`] = `
   display: flex;
 }
 
-.emotion-10 {
+.emotion-11 {
   width: 100%;
   resize: vertical;
   background: #ffffff;
@@ -1391,68 +1401,68 @@ exports[`TextArea > should render correctly when it is required 1`] = `
   padding-right: calc(1.5rem + 0px + 0px);
 }
 
-.emotion-10::-webkit-input-placeholder {
+.emotion-11::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-10::-moz-placeholder {
+.emotion-11::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-10:-ms-input-placeholder {
+.emotion-11:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-10::placeholder {
+.emotion-11::placeholder {
   color: #727683;
 }
 
-.emotion-10[data-success='true'] {
+.emotion-11[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-10[data-error='true'] {
+.emotion-11[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-10[data-readonly='true'] {
+.emotion-11[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-10:disabled {
+.emotion-11:disabled {
   background: #f3f3f4;
   border-color: #e9eaeb;
   color: #b5b7bd;
 }
 
-.emotion-10:disabled::-webkit-input-placeholder {
+.emotion-11:disabled::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10:disabled::-moz-placeholder {
+.emotion-11:disabled::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10:disabled:-ms-input-placeholder {
+.emotion-11:disabled:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10:disabled::placeholder {
+.emotion-11:disabled::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10:not(:disabled):hover {
+.emotion-11:not(:disabled):hover {
   border-color: #8c40ef;
 }
 
-.emotion-10:not(:disabled):focus {
+.emotion-11:not(:disabled):focus {
   outline: none;
   border-color: #8c40ef;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-10 {
+.emotion-11 {
   width: 100%;
   resize: vertical;
   background: #ffffff;
@@ -1463,68 +1473,68 @@ exports[`TextArea > should render correctly when it is required 1`] = `
   padding-right: calc(1.5rem + 0px + 0px);
 }
 
-.emotion-10::-webkit-input-placeholder {
+.emotion-11::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-10::-moz-placeholder {
+.emotion-11::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-10:-ms-input-placeholder {
+.emotion-11:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-10::placeholder {
+.emotion-11::placeholder {
   color: #727683;
 }
 
-.emotion-10[data-success='true'] {
+.emotion-11[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-10[data-error='true'] {
+.emotion-11[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-10[data-readonly='true'] {
+.emotion-11[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-10:disabled {
+.emotion-11:disabled {
   background: #f3f3f4;
   border-color: #e9eaeb;
   color: #b5b7bd;
 }
 
-.emotion-10:disabled::-webkit-input-placeholder {
+.emotion-11:disabled::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10:disabled::-moz-placeholder {
+.emotion-11:disabled::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10:disabled:-ms-input-placeholder {
+.emotion-11:disabled:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10:disabled::placeholder {
+.emotion-11:disabled::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10:not(:disabled):hover {
+.emotion-11:not(:disabled):hover {
   border-color: #8c40ef;
 }
 
-.emotion-10:not(:disabled):focus {
+.emotion-11:not(:disabled):focus {
   outline: none;
   border-color: #8c40ef;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-12 {
+.emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1550,7 +1560,7 @@ exports[`TextArea > should render correctly when it is required 1`] = `
   right: 0.5rem;
 }
 
-.emotion-12 {
+.emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1586,23 +1596,23 @@ exports[`TextArea > should render correctly when it is required 1`] = `
         class="emotion-2 emotion-1"
       >
         <label
-          class="emotion-4 emotion-5"
+          class="emotion-4 emotion-5 emotion-6"
           for=":rg:"
         >
           Test
         </label>
         <span
-          class="emotion-6 emotion-5"
+          class="emotion-7 emotion-6"
         >
           *
         </span>
       </div>
       <div
-        class="emotion-8 emotion-9"
+        class="emotion-9 emotion-10"
       >
         <textarea
           aria-invalid="false"
-          class="emotion-10 emotion-11"
+          class="emotion-11 emotion-12"
           data-error="false"
           data-readonly="false"
           data-success="false"
@@ -1612,7 +1622,7 @@ exports[`TextArea > should render correctly when it is required 1`] = `
           test
         </textarea>
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-13 emotion-14"
         />
       </div>
     </div>
@@ -1645,8 +1655,8 @@ exports[`TextArea > should render correctly with basic props 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -1655,9 +1665,10 @@ exports[`TextArea > should render correctly with basic props 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1665,7 +1676,7 @@ exports[`TextArea > should render correctly with basic props 1`] = `
   display: flex;
 }
 
-.emotion-6 {
+.emotion-7 {
   width: 100%;
   resize: vertical;
   background: #ffffff;
@@ -1676,68 +1687,68 @@ exports[`TextArea > should render correctly with basic props 1`] = `
   padding-right: calc(1.5rem + 0px + 0px);
 }
 
-.emotion-6::-webkit-input-placeholder {
+.emotion-7::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::-moz-placeholder {
+.emotion-7::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-6:-ms-input-placeholder {
+.emotion-7:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::placeholder {
+.emotion-7::placeholder {
   color: #727683;
 }
 
-.emotion-6[data-success='true'] {
+.emotion-7[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-6[data-error='true'] {
+.emotion-7[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-6[data-readonly='true'] {
+.emotion-7[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-6:disabled {
+.emotion-7:disabled {
   background: #f3f3f4;
   border-color: #e9eaeb;
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::-webkit-input-placeholder {
+.emotion-7:disabled::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::-moz-placeholder {
+.emotion-7:disabled::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled:-ms-input-placeholder {
+.emotion-7:disabled:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::placeholder {
+.emotion-7:disabled::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:not(:disabled):hover {
+.emotion-7:not(:disabled):hover {
   border-color: #8c40ef;
 }
 
-.emotion-6:not(:disabled):focus {
+.emotion-7:not(:disabled):focus {
   outline: none;
   border-color: #8c40ef;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1770,17 +1781,17 @@ exports[`TextArea > should render correctly with basic props 1`] = `
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
         for=":r0:"
       >
         Test
       </label>
       <div
-        class="emotion-4 emotion-5"
+        class="emotion-5 emotion-6"
       >
         <textarea
           aria-invalid="false"
-          class="emotion-6 emotion-7"
+          class="emotion-7 emotion-8"
           data-error="false"
           data-readonly="false"
           data-success="false"
@@ -1790,7 +1801,7 @@ exports[`TextArea > should render correctly with basic props 1`] = `
           test
         </textarea>
         <div
-          class="emotion-8 emotion-9"
+          class="emotion-9 emotion-10"
         />
       </div>
     </div>
@@ -1846,8 +1857,8 @@ exports[`TextArea > should render correctly with maxlength 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -1856,10 +1867,11 @@ exports[`TextArea > should render correctly with maxlength 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -1868,9 +1880,10 @@ exports[`TextArea > should render correctly with maxlength 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1878,7 +1891,7 @@ exports[`TextArea > should render correctly with maxlength 1`] = `
   display: flex;
 }
 
-.emotion-4 {
+.emotion-5 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1886,7 +1899,7 @@ exports[`TextArea > should render correctly with maxlength 1`] = `
   display: flex;
 }
 
-.emotion-6 {
+.emotion-7 {
   width: 100%;
   resize: vertical;
   background: #ffffff;
@@ -1897,68 +1910,68 @@ exports[`TextArea > should render correctly with maxlength 1`] = `
   padding-right: calc(1.5rem + 0px + 0px);
 }
 
-.emotion-6::-webkit-input-placeholder {
+.emotion-7::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::-moz-placeholder {
+.emotion-7::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-6:-ms-input-placeholder {
+.emotion-7:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::placeholder {
+.emotion-7::placeholder {
   color: #727683;
 }
 
-.emotion-6[data-success='true'] {
+.emotion-7[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-6[data-error='true'] {
+.emotion-7[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-6[data-readonly='true'] {
+.emotion-7[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-6:disabled {
+.emotion-7:disabled {
   background: #f3f3f4;
   border-color: #e9eaeb;
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::-webkit-input-placeholder {
+.emotion-7:disabled::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::-moz-placeholder {
+.emotion-7:disabled::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled:-ms-input-placeholder {
+.emotion-7:disabled:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::placeholder {
+.emotion-7:disabled::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:not(:disabled):hover {
+.emotion-7:not(:disabled):hover {
   border-color: #8c40ef;
 }
 
-.emotion-6:not(:disabled):focus {
+.emotion-7:not(:disabled):focus {
   outline: none;
   border-color: #8c40ef;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-6 {
+.emotion-7 {
   width: 100%;
   resize: vertical;
   background: #ffffff;
@@ -1969,68 +1982,68 @@ exports[`TextArea > should render correctly with maxlength 1`] = `
   padding-right: calc(1.5rem + 0px + 0px);
 }
 
-.emotion-6::-webkit-input-placeholder {
+.emotion-7::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::-moz-placeholder {
+.emotion-7::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-6:-ms-input-placeholder {
+.emotion-7:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::placeholder {
+.emotion-7::placeholder {
   color: #727683;
 }
 
-.emotion-6[data-success='true'] {
+.emotion-7[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-6[data-error='true'] {
+.emotion-7[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-6[data-readonly='true'] {
+.emotion-7[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-6:disabled {
+.emotion-7:disabled {
   background: #f3f3f4;
   border-color: #e9eaeb;
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::-webkit-input-placeholder {
+.emotion-7:disabled::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::-moz-placeholder {
+.emotion-7:disabled::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled:-ms-input-placeholder {
+.emotion-7:disabled:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::placeholder {
+.emotion-7:disabled::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:not(:disabled):hover {
+.emotion-7:not(:disabled):hover {
   border-color: #8c40ef;
 }
 
-.emotion-6:not(:disabled):focus {
+.emotion-7:not(:disabled):focus {
   outline: none;
   border-color: #8c40ef;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2056,7 +2069,7 @@ exports[`TextArea > should render correctly with maxlength 1`] = `
   right: 0.5rem;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2082,7 +2095,7 @@ exports[`TextArea > should render correctly with maxlength 1`] = `
   right: 0.5rem;
 }
 
-.emotion-10 {
+.emotion-11 {
   display: grid;
   grid-template-columns: minmax(0, 1fr) min-content;
   gap: 0.5rem;
@@ -2096,7 +2109,7 @@ exports[`TextArea > should render correctly with maxlength 1`] = `
   justify-content: normal;
 }
 
-.emotion-12 {
+.emotion-13 {
   color: #727683;
   font-size: 0.75rem;
   font-family: Inter,Asap,sans-serif;
@@ -2115,17 +2128,17 @@ exports[`TextArea > should render correctly with maxlength 1`] = `
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
         for=":rk:"
       >
         Test
       </label>
       <div
-        class="emotion-4 emotion-5"
+        class="emotion-5 emotion-6"
       >
         <textarea
           aria-invalid="false"
-          class="emotion-6 emotion-7"
+          class="emotion-7 emotion-8"
           data-error="false"
           data-readonly="false"
           data-success="false"
@@ -2136,15 +2149,15 @@ exports[`TextArea > should render correctly with maxlength 1`] = `
           test
         </textarea>
         <div
-          class="emotion-8 emotion-9"
+          class="emotion-9 emotion-10"
         />
       </div>
       <div
-        class="emotion-10 emotion-11"
+        class="emotion-11 emotion-12"
       >
         <div />
         <div
-          class="emotion-12 emotion-3"
+          class="emotion-13 emotion-4"
         >
           4/3
         </div>
@@ -2202,8 +2215,8 @@ exports[`TextArea > should render with AutoExpandMax 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -2212,10 +2225,11 @@ exports[`TextArea > should render with AutoExpandMax 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -2224,9 +2238,10 @@ exports[`TextArea > should render with AutoExpandMax 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2234,7 +2249,7 @@ exports[`TextArea > should render with AutoExpandMax 1`] = `
   display: flex;
 }
 
-.emotion-4 {
+.emotion-5 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2242,7 +2257,7 @@ exports[`TextArea > should render with AutoExpandMax 1`] = `
   display: flex;
 }
 
-.emotion-6 {
+.emotion-7 {
   width: 100%;
   resize: vertical;
   background: #ffffff;
@@ -2253,68 +2268,68 @@ exports[`TextArea > should render with AutoExpandMax 1`] = `
   padding-right: calc(1.5rem + 0px + 16px);
 }
 
-.emotion-6::-webkit-input-placeholder {
+.emotion-7::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::-moz-placeholder {
+.emotion-7::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-6:-ms-input-placeholder {
+.emotion-7:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::placeholder {
+.emotion-7::placeholder {
   color: #727683;
 }
 
-.emotion-6[data-success='true'] {
+.emotion-7[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-6[data-error='true'] {
+.emotion-7[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-6[data-readonly='true'] {
+.emotion-7[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-6:disabled {
+.emotion-7:disabled {
   background: #f3f3f4;
   border-color: #e9eaeb;
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::-webkit-input-placeholder {
+.emotion-7:disabled::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::-moz-placeholder {
+.emotion-7:disabled::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled:-ms-input-placeholder {
+.emotion-7:disabled:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::placeholder {
+.emotion-7:disabled::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:not(:disabled):hover {
+.emotion-7:not(:disabled):hover {
   border-color: #8c40ef;
 }
 
-.emotion-6:not(:disabled):focus {
+.emotion-7:not(:disabled):focus {
   outline: none;
   border-color: #8c40ef;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2340,7 +2355,7 @@ exports[`TextArea > should render with AutoExpandMax 1`] = `
   right: 0.5rem;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2366,7 +2381,7 @@ exports[`TextArea > should render with AutoExpandMax 1`] = `
   right: 0.5rem;
 }
 
-.emotion-10 {
+.emotion-11 {
   vertical-align: middle;
   fill: #b3144d;
   height: 1rem;
@@ -2375,12 +2390,12 @@ exports[`TextArea > should render with AutoExpandMax 1`] = `
   min-height: 1rem;
 }
 
-.emotion-10 .fillStroke {
+.emotion-11 .fillStroke {
   stroke: #b3144d;
   fill: none;
 }
 
-.emotion-12 {
+.emotion-13 {
   display: grid;
   grid-template-columns: minmax(0, 1fr) min-content;
   gap: 0.5rem;
@@ -2394,7 +2409,7 @@ exports[`TextArea > should render with AutoExpandMax 1`] = `
   justify-content: normal;
 }
 
-.emotion-14 {
+.emotion-15 {
   color: #b3144d;
   font-size: 0.75rem;
   font-family: Inter,Asap,sans-serif;
@@ -2413,17 +2428,17 @@ exports[`TextArea > should render with AutoExpandMax 1`] = `
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
         for=":r14:"
       >
         Test
       </label>
       <div
-        class="emotion-4 emotion-5"
+        class="emotion-5 emotion-6"
       >
         <textarea
           aria-invalid="true"
-          class="emotion-6 emotion-7"
+          class="emotion-7 emotion-8"
           data-error="true"
           data-readonly="false"
           data-success="false"
@@ -2434,10 +2449,10 @@ exports[`TextArea > should render with AutoExpandMax 1`] = `
           test
         </textarea>
         <div
-          class="emotion-8 emotion-9"
+          class="emotion-9 emotion-10"
         >
           <svg
-            class="emotion-10 emotion-11"
+            class="emotion-11 emotion-12"
             viewBox="0 0 20 20"
           >
             <path
@@ -2449,11 +2464,11 @@ exports[`TextArea > should render with AutoExpandMax 1`] = `
         </div>
       </div>
       <div
-        class="emotion-12 emotion-13"
+        class="emotion-13 emotion-14"
       >
         <div>
           <p
-            class="emotion-14 emotion-3"
+            class="emotion-15 emotion-4"
           >
             success
           </p>
@@ -2512,8 +2527,8 @@ exports[`TextArea > should render with AutoExpandMax and rows 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -2522,10 +2537,11 @@ exports[`TextArea > should render with AutoExpandMax and rows 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -2534,9 +2550,10 @@ exports[`TextArea > should render with AutoExpandMax and rows 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2544,7 +2561,7 @@ exports[`TextArea > should render with AutoExpandMax and rows 1`] = `
   display: flex;
 }
 
-.emotion-4 {
+.emotion-5 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2552,7 +2569,7 @@ exports[`TextArea > should render with AutoExpandMax and rows 1`] = `
   display: flex;
 }
 
-.emotion-6 {
+.emotion-7 {
   width: 100%;
   resize: vertical;
   background: #ffffff;
@@ -2563,68 +2580,68 @@ exports[`TextArea > should render with AutoExpandMax and rows 1`] = `
   padding-right: calc(1.5rem + 0px + 16px);
 }
 
-.emotion-6::-webkit-input-placeholder {
+.emotion-7::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::-moz-placeholder {
+.emotion-7::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-6:-ms-input-placeholder {
+.emotion-7:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::placeholder {
+.emotion-7::placeholder {
   color: #727683;
 }
 
-.emotion-6[data-success='true'] {
+.emotion-7[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-6[data-error='true'] {
+.emotion-7[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-6[data-readonly='true'] {
+.emotion-7[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-6:disabled {
+.emotion-7:disabled {
   background: #f3f3f4;
   border-color: #e9eaeb;
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::-webkit-input-placeholder {
+.emotion-7:disabled::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::-moz-placeholder {
+.emotion-7:disabled::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled:-ms-input-placeholder {
+.emotion-7:disabled:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::placeholder {
+.emotion-7:disabled::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:not(:disabled):hover {
+.emotion-7:not(:disabled):hover {
   border-color: #8c40ef;
 }
 
-.emotion-6:not(:disabled):focus {
+.emotion-7:not(:disabled):focus {
   outline: none;
   border-color: #8c40ef;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2650,7 +2667,7 @@ exports[`TextArea > should render with AutoExpandMax and rows 1`] = `
   right: 0.5rem;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2676,7 +2693,7 @@ exports[`TextArea > should render with AutoExpandMax and rows 1`] = `
   right: 0.5rem;
 }
 
-.emotion-10 {
+.emotion-11 {
   vertical-align: middle;
   fill: #b3144d;
   height: 1rem;
@@ -2685,12 +2702,12 @@ exports[`TextArea > should render with AutoExpandMax and rows 1`] = `
   min-height: 1rem;
 }
 
-.emotion-10 .fillStroke {
+.emotion-11 .fillStroke {
   stroke: #b3144d;
   fill: none;
 }
 
-.emotion-12 {
+.emotion-13 {
   display: grid;
   grid-template-columns: minmax(0, 1fr) min-content;
   gap: 0.5rem;
@@ -2704,7 +2721,7 @@ exports[`TextArea > should render with AutoExpandMax and rows 1`] = `
   justify-content: normal;
 }
 
-.emotion-14 {
+.emotion-15 {
   color: #b3144d;
   font-size: 0.75rem;
   font-family: Inter,Asap,sans-serif;
@@ -2723,17 +2740,17 @@ exports[`TextArea > should render with AutoExpandMax and rows 1`] = `
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
         for=":r18:"
       >
         Test
       </label>
       <div
-        class="emotion-4 emotion-5"
+        class="emotion-5 emotion-6"
       >
         <textarea
           aria-invalid="true"
-          class="emotion-6 emotion-7"
+          class="emotion-7 emotion-8"
           data-error="true"
           data-readonly="false"
           data-success="false"
@@ -2744,10 +2761,10 @@ exports[`TextArea > should render with AutoExpandMax and rows 1`] = `
           test
         </textarea>
         <div
-          class="emotion-8 emotion-9"
+          class="emotion-9 emotion-10"
         >
           <svg
-            class="emotion-10 emotion-11"
+            class="emotion-11 emotion-12"
             viewBox="0 0 20 20"
           >
             <path
@@ -2759,11 +2776,11 @@ exports[`TextArea > should render with AutoExpandMax and rows 1`] = `
         </div>
       </div>
       <div
-        class="emotion-12 emotion-13"
+        class="emotion-13 emotion-14"
       >
         <div>
           <p
-            class="emotion-14 emotion-3"
+            class="emotion-15 emotion-4"
           >
             success
           </p>
@@ -2822,8 +2839,8 @@ exports[`TextArea > should render with auto rows 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -2832,10 +2849,11 @@ exports[`TextArea > should render with auto rows 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -2844,9 +2862,10 @@ exports[`TextArea > should render with auto rows 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2854,7 +2873,7 @@ exports[`TextArea > should render with auto rows 1`] = `
   display: flex;
 }
 
-.emotion-4 {
+.emotion-5 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2862,7 +2881,7 @@ exports[`TextArea > should render with auto rows 1`] = `
   display: flex;
 }
 
-.emotion-6 {
+.emotion-7 {
   width: 100%;
   resize: vertical;
   background: #ffffff;
@@ -2873,68 +2892,68 @@ exports[`TextArea > should render with auto rows 1`] = `
   padding-right: calc(1.5rem + 0px + 16px);
 }
 
-.emotion-6::-webkit-input-placeholder {
+.emotion-7::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::-moz-placeholder {
+.emotion-7::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-6:-ms-input-placeholder {
+.emotion-7:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::placeholder {
+.emotion-7::placeholder {
   color: #727683;
 }
 
-.emotion-6[data-success='true'] {
+.emotion-7[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-6[data-error='true'] {
+.emotion-7[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-6[data-readonly='true'] {
+.emotion-7[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-6:disabled {
+.emotion-7:disabled {
   background: #f3f3f4;
   border-color: #e9eaeb;
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::-webkit-input-placeholder {
+.emotion-7:disabled::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::-moz-placeholder {
+.emotion-7:disabled::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled:-ms-input-placeholder {
+.emotion-7:disabled:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:disabled::placeholder {
+.emotion-7:disabled::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-6:not(:disabled):hover {
+.emotion-7:not(:disabled):hover {
   border-color: #8c40ef;
 }
 
-.emotion-6:not(:disabled):focus {
+.emotion-7:not(:disabled):focus {
   outline: none;
   border-color: #8c40ef;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2960,7 +2979,7 @@ exports[`TextArea > should render with auto rows 1`] = `
   right: 0.5rem;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2986,7 +3005,7 @@ exports[`TextArea > should render with auto rows 1`] = `
   right: 0.5rem;
 }
 
-.emotion-10 {
+.emotion-11 {
   vertical-align: middle;
   fill: #b3144d;
   height: 1rem;
@@ -2995,12 +3014,12 @@ exports[`TextArea > should render with auto rows 1`] = `
   min-height: 1rem;
 }
 
-.emotion-10 .fillStroke {
+.emotion-11 .fillStroke {
   stroke: #b3144d;
   fill: none;
 }
 
-.emotion-12 {
+.emotion-13 {
   display: grid;
   grid-template-columns: minmax(0, 1fr) min-content;
   gap: 0.5rem;
@@ -3014,7 +3033,7 @@ exports[`TextArea > should render with auto rows 1`] = `
   justify-content: normal;
 }
 
-.emotion-14 {
+.emotion-15 {
   color: #b3144d;
   font-size: 0.75rem;
   font-family: Inter,Asap,sans-serif;
@@ -3033,17 +3052,17 @@ exports[`TextArea > should render with auto rows 1`] = `
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
         for=":r10:"
       >
         Test
       </label>
       <div
-        class="emotion-4 emotion-5"
+        class="emotion-5 emotion-6"
       >
         <textarea
           aria-invalid="true"
-          class="emotion-6 emotion-7"
+          class="emotion-7 emotion-8"
           data-error="true"
           data-readonly="false"
           data-success="false"
@@ -3054,10 +3073,10 @@ exports[`TextArea > should render with auto rows 1`] = `
           test
         </textarea>
         <div
-          class="emotion-8 emotion-9"
+          class="emotion-9 emotion-10"
         >
           <svg
-            class="emotion-10 emotion-11"
+            class="emotion-11 emotion-12"
             viewBox="0 0 20 20"
           >
             <path
@@ -3069,11 +3088,11 @@ exports[`TextArea > should render with auto rows 1`] = `
         </div>
       </div>
       <div
-        class="emotion-12 emotion-13"
+        class="emotion-13 emotion-14"
       >
         <div>
           <p
-            class="emotion-14 emotion-3"
+            class="emotion-15 emotion-4"
           >
             success
           </p>
diff --git a/packages/ui/src/components/TextInputV2/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/TextInputV2/__tests__/__snapshots__/index.test.tsx.snap
index 9c40de40a6..c00517704b 100644
--- a/packages/ui/src/components/TextInputV2/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/TextInputV2/__tests__/__snapshots__/index.test.tsx.snap
@@ -48,8 +48,8 @@ exports[`TextInputV2 > should render correctly when input  has a error sentiment
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -58,10 +58,11 @@ exports[`TextInputV2 > should render correctly when input  has a error sentiment
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -70,9 +71,10 @@ exports[`TextInputV2 > should render correctly when input  has a error sentiment
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -86,69 +88,69 @@ exports[`TextInputV2 > should render correctly when input  has a error sentiment
   border-radius: 0.25rem;
 }
 
-.emotion-4>.emotion-7 {
+.emotion-5>.emotion-8 {
   color: #3f4250;
 }
 
-.emotion-4>.emotion-7::-webkit-input-placeholder {
+.emotion-5>.emotion-8::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7::-moz-placeholder {
+.emotion-5>.emotion-8::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7:-ms-input-placeholder {
+.emotion-5>.emotion-8:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7::placeholder {
+.emotion-5>.emotion-8::placeholder {
   color: #727683;
 }
 
-.emotion-4[data-success='true'] {
+.emotion-5[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-4[data-error='true'] {
+.emotion-5[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-4[data-readonly='true'] {
+.emotion-5[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-4[data-disabled='true'] {
+.emotion-5[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7 {
+.emotion-5[data-disabled='true']>.emotion-8 {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::-webkit-input-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::-moz-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7:-ms-input-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-5:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -162,69 +164,69 @@ exports[`TextInputV2 > should render correctly when input  has a error sentiment
   border-radius: 0.25rem;
 }
 
-.emotion-4>.emotion-7 {
+.emotion-5>.emotion-8 {
   color: #3f4250;
 }
 
-.emotion-4>.emotion-7::-webkit-input-placeholder {
+.emotion-5>.emotion-8::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7::-moz-placeholder {
+.emotion-5>.emotion-8::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7:-ms-input-placeholder {
+.emotion-5>.emotion-8:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7::placeholder {
+.emotion-5>.emotion-8::placeholder {
   color: #727683;
 }
 
-.emotion-4[data-success='true'] {
+.emotion-5[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-4[data-error='true'] {
+.emotion-5[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-4[data-readonly='true'] {
+.emotion-5[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-4[data-disabled='true'] {
+.emotion-5[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7 {
+.emotion-5[data-disabled='true']>.emotion-8 {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::-webkit-input-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::-moz-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7:-ms-input-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-5:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-6 {
+.emotion-7 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -237,15 +239,15 @@ exports[`TextInputV2 > should render correctly when input  has a error sentiment
   font-size: 0.875rem;
 }
 
-.emotion-6[data-size='large'] {
+.emotion-7[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-6[data-size='small'] {
+.emotion-7[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-6 {
+.emotion-7 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -258,15 +260,15 @@ exports[`TextInputV2 > should render correctly when input  has a error sentiment
   font-size: 0.875rem;
 }
 
-.emotion-6[data-size='large'] {
+.emotion-7[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-6[data-size='small'] {
+.emotion-7[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -290,7 +292,7 @@ exports[`TextInputV2 > should render correctly when input  has a error sentiment
   padding: 0 1rem;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -314,7 +316,7 @@ exports[`TextInputV2 > should render correctly when input  has a error sentiment
   padding: 0 1rem;
 }
 
-.emotion-10 {
+.emotion-11 {
   vertical-align: middle;
   fill: #b3144d;
   height: 1rem;
@@ -323,12 +325,12 @@ exports[`TextInputV2 > should render correctly when input  has a error sentiment
   min-height: 1rem;
 }
 
-.emotion-10 .fillStroke {
+.emotion-11 .fillStroke {
   stroke: #b3144d;
   fill: none;
 }
 
-.emotion-12 {
+.emotion-13 {
   color: #b3144d;
   font-size: 0.75rem;
   font-family: Inter,Asap,sans-serif;
@@ -347,14 +349,14 @@ exports[`TextInputV2 > should render correctly when input  has a error sentiment
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
         for=":rk:"
       >
         Test
       </label>
       <div>
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-5 emotion-6"
           data-disabled="false"
           data-error="true"
           data-readonly="false"
@@ -362,17 +364,17 @@ exports[`TextInputV2 > should render correctly when input  has a error sentiment
         >
           <input
             aria-invalid="true"
-            class="emotion-6 emotion-7"
+            class="emotion-7 emotion-8"
             data-size="large"
             id=":rk:"
             type="text"
             value="test"
           />
           <div
-            class="emotion-8 emotion-9"
+            class="emotion-9 emotion-10"
           >
             <svg
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
               viewBox="0 0 20 20"
             >
               <path
@@ -385,7 +387,7 @@ exports[`TextInputV2 > should render correctly when input  has a error sentiment
         </div>
       </div>
       <p
-        class="emotion-12 emotion-3"
+        class="emotion-13 emotion-4"
       >
         success
       </p>
@@ -442,8 +444,8 @@ exports[`TextInputV2 > should render correctly when input has a success sentimen
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -452,10 +454,11 @@ exports[`TextInputV2 > should render correctly when input has a success sentimen
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -464,9 +467,10 @@ exports[`TextInputV2 > should render correctly when input has a success sentimen
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -480,69 +484,69 @@ exports[`TextInputV2 > should render correctly when input has a success sentimen
   border-radius: 0.25rem;
 }
 
-.emotion-4>.emotion-7 {
+.emotion-5>.emotion-8 {
   color: #3f4250;
 }
 
-.emotion-4>.emotion-7::-webkit-input-placeholder {
+.emotion-5>.emotion-8::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7::-moz-placeholder {
+.emotion-5>.emotion-8::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7:-ms-input-placeholder {
+.emotion-5>.emotion-8:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7::placeholder {
+.emotion-5>.emotion-8::placeholder {
   color: #727683;
 }
 
-.emotion-4[data-success='true'] {
+.emotion-5[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-4[data-error='true'] {
+.emotion-5[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-4[data-readonly='true'] {
+.emotion-5[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-4[data-disabled='true'] {
+.emotion-5[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7 {
+.emotion-5[data-disabled='true']>.emotion-8 {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::-webkit-input-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::-moz-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7:-ms-input-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-5:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -556,69 +560,69 @@ exports[`TextInputV2 > should render correctly when input has a success sentimen
   border-radius: 0.25rem;
 }
 
-.emotion-4>.emotion-7 {
+.emotion-5>.emotion-8 {
   color: #3f4250;
 }
 
-.emotion-4>.emotion-7::-webkit-input-placeholder {
+.emotion-5>.emotion-8::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7::-moz-placeholder {
+.emotion-5>.emotion-8::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7:-ms-input-placeholder {
+.emotion-5>.emotion-8:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7::placeholder {
+.emotion-5>.emotion-8::placeholder {
   color: #727683;
 }
 
-.emotion-4[data-success='true'] {
+.emotion-5[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-4[data-error='true'] {
+.emotion-5[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-4[data-readonly='true'] {
+.emotion-5[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-4[data-disabled='true'] {
+.emotion-5[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7 {
+.emotion-5[data-disabled='true']>.emotion-8 {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::-webkit-input-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::-moz-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7:-ms-input-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-5:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-6 {
+.emotion-7 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -631,15 +635,15 @@ exports[`TextInputV2 > should render correctly when input has a success sentimen
   font-size: 0.875rem;
 }
 
-.emotion-6[data-size='large'] {
+.emotion-7[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-6[data-size='small'] {
+.emotion-7[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-6 {
+.emotion-7 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -652,15 +656,15 @@ exports[`TextInputV2 > should render correctly when input has a success sentimen
   font-size: 0.875rem;
 }
 
-.emotion-6[data-size='large'] {
+.emotion-7[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-6[data-size='small'] {
+.emotion-7[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -684,7 +688,7 @@ exports[`TextInputV2 > should render correctly when input has a success sentimen
   padding: 0 1rem;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -708,7 +712,7 @@ exports[`TextInputV2 > should render correctly when input has a success sentimen
   padding: 0 1rem;
 }
 
-.emotion-10 {
+.emotion-11 {
   vertical-align: middle;
   fill: #22674e;
   height: 1rem;
@@ -717,12 +721,12 @@ exports[`TextInputV2 > should render correctly when input has a success sentimen
   min-height: 1rem;
 }
 
-.emotion-10 .fillStroke {
+.emotion-11 .fillStroke {
   stroke: #22674e;
   fill: none;
 }
 
-.emotion-12 {
+.emotion-13 {
   color: #22674e;
   font-size: 0.75rem;
   font-family: Inter,Asap,sans-serif;
@@ -741,14 +745,14 @@ exports[`TextInputV2 > should render correctly when input has a success sentimen
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
         for=":rg:"
       >
         Test
       </label>
       <div>
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-5 emotion-6"
           data-disabled="false"
           data-error="false"
           data-readonly="false"
@@ -756,17 +760,17 @@ exports[`TextInputV2 > should render correctly when input has a success sentimen
         >
           <input
             aria-invalid="false"
-            class="emotion-6 emotion-7"
+            class="emotion-7 emotion-8"
             data-size="large"
             id=":rg:"
             type="text"
             value="test"
           />
           <div
-            class="emotion-8 emotion-9"
+            class="emotion-9 emotion-10"
           >
             <svg
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
               viewBox="0 0 20 20"
             >
               <path
@@ -779,7 +783,7 @@ exports[`TextInputV2 > should render correctly when input has a success sentimen
         </div>
       </div>
       <p
-        class="emotion-12 emotion-3"
+        class="emotion-13 emotion-4"
       >
         success
       </p>
@@ -836,8 +840,8 @@ exports[`TextInputV2 > should render correctly when input is disabled 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -846,10 +850,11 @@ exports[`TextInputV2 > should render correctly when input is disabled 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -858,9 +863,10 @@ exports[`TextInputV2 > should render correctly when input is disabled 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -874,69 +880,69 @@ exports[`TextInputV2 > should render correctly when input is disabled 1`] = `
   border-radius: 0.25rem;
 }
 
-.emotion-4>.emotion-7 {
+.emotion-5>.emotion-8 {
   color: #3f4250;
 }
 
-.emotion-4>.emotion-7::-webkit-input-placeholder {
+.emotion-5>.emotion-8::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7::-moz-placeholder {
+.emotion-5>.emotion-8::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7:-ms-input-placeholder {
+.emotion-5>.emotion-8:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7::placeholder {
+.emotion-5>.emotion-8::placeholder {
   color: #727683;
 }
 
-.emotion-4[data-success='true'] {
+.emotion-5[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-4[data-error='true'] {
+.emotion-5[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-4[data-readonly='true'] {
+.emotion-5[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-4[data-disabled='true'] {
+.emotion-5[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7 {
+.emotion-5[data-disabled='true']>.emotion-8 {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::-webkit-input-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::-moz-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7:-ms-input-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-5:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -950,69 +956,69 @@ exports[`TextInputV2 > should render correctly when input is disabled 1`] = `
   border-radius: 0.25rem;
 }
 
-.emotion-4>.emotion-7 {
+.emotion-5>.emotion-8 {
   color: #3f4250;
 }
 
-.emotion-4>.emotion-7::-webkit-input-placeholder {
+.emotion-5>.emotion-8::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7::-moz-placeholder {
+.emotion-5>.emotion-8::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7:-ms-input-placeholder {
+.emotion-5>.emotion-8:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7::placeholder {
+.emotion-5>.emotion-8::placeholder {
   color: #727683;
 }
 
-.emotion-4[data-success='true'] {
+.emotion-5[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-4[data-error='true'] {
+.emotion-5[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-4[data-readonly='true'] {
+.emotion-5[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-4[data-disabled='true'] {
+.emotion-5[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7 {
+.emotion-5[data-disabled='true']>.emotion-8 {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::-webkit-input-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::-moz-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7:-ms-input-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-5:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-6 {
+.emotion-7 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -1025,15 +1031,15 @@ exports[`TextInputV2 > should render correctly when input is disabled 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-6[data-size='large'] {
+.emotion-7[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-6[data-size='small'] {
+.emotion-7[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-6 {
+.emotion-7 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -1046,11 +1052,11 @@ exports[`TextInputV2 > should render correctly when input is disabled 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-6[data-size='large'] {
+.emotion-7[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-6[data-size='small'] {
+.emotion-7[data-size='small'] {
   padding-left: 0.5rem;
 }
 
@@ -1061,14 +1067,14 @@ exports[`TextInputV2 > should render correctly when input is disabled 1`] = `
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
         for=":ra:"
       >
         Test
       </label>
       <div>
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-5 emotion-6"
           data-disabled="true"
           data-error="false"
           data-readonly="false"
@@ -1076,7 +1082,7 @@ exports[`TextInputV2 > should render correctly when input is disabled 1`] = `
         >
           <input
             aria-invalid="false"
-            class="emotion-6 emotion-7"
+            class="emotion-7 emotion-8"
             data-size="large"
             disabled=""
             id=":ra:"
@@ -1138,8 +1144,8 @@ exports[`TextInputV2 > should render correctly when input is readOnly 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -1148,10 +1154,11 @@ exports[`TextInputV2 > should render correctly when input is readOnly 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -1160,9 +1167,10 @@ exports[`TextInputV2 > should render correctly when input is readOnly 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1176,69 +1184,69 @@ exports[`TextInputV2 > should render correctly when input is readOnly 1`] = `
   border-radius: 0.25rem;
 }
 
-.emotion-4>.emotion-7 {
+.emotion-5>.emotion-8 {
   color: #3f4250;
 }
 
-.emotion-4>.emotion-7::-webkit-input-placeholder {
+.emotion-5>.emotion-8::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7::-moz-placeholder {
+.emotion-5>.emotion-8::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7:-ms-input-placeholder {
+.emotion-5>.emotion-8:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7::placeholder {
+.emotion-5>.emotion-8::placeholder {
   color: #727683;
 }
 
-.emotion-4[data-success='true'] {
+.emotion-5[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-4[data-error='true'] {
+.emotion-5[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-4[data-readonly='true'] {
+.emotion-5[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-4[data-disabled='true'] {
+.emotion-5[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7 {
+.emotion-5[data-disabled='true']>.emotion-8 {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::-webkit-input-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::-moz-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7:-ms-input-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-5:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1252,69 +1260,69 @@ exports[`TextInputV2 > should render correctly when input is readOnly 1`] = `
   border-radius: 0.25rem;
 }
 
-.emotion-4>.emotion-7 {
+.emotion-5>.emotion-8 {
   color: #3f4250;
 }
 
-.emotion-4>.emotion-7::-webkit-input-placeholder {
+.emotion-5>.emotion-8::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7::-moz-placeholder {
+.emotion-5>.emotion-8::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7:-ms-input-placeholder {
+.emotion-5>.emotion-8:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7::placeholder {
+.emotion-5>.emotion-8::placeholder {
   color: #727683;
 }
 
-.emotion-4[data-success='true'] {
+.emotion-5[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-4[data-error='true'] {
+.emotion-5[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-4[data-readonly='true'] {
+.emotion-5[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-4[data-disabled='true'] {
+.emotion-5[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7 {
+.emotion-5[data-disabled='true']>.emotion-8 {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::-webkit-input-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::-moz-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7:-ms-input-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-5:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-6 {
+.emotion-7 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -1327,15 +1335,15 @@ exports[`TextInputV2 > should render correctly when input is readOnly 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-6[data-size='large'] {
+.emotion-7[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-6[data-size='small'] {
+.emotion-7[data-size='small'] {
   padding-left: 0.5rem;
 }
 
-.emotion-6 {
+.emotion-7 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -1348,11 +1356,11 @@ exports[`TextInputV2 > should render correctly when input is readOnly 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-6[data-size='large'] {
+.emotion-7[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-6[data-size='small'] {
+.emotion-7[data-size='small'] {
   padding-left: 0.5rem;
 }
 
@@ -1363,14 +1371,14 @@ exports[`TextInputV2 > should render correctly when input is readOnly 1`] = `
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
         for=":rd:"
       >
         Test
       </label>
       <div>
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-5 emotion-6"
           data-disabled="false"
           data-error="false"
           data-readonly="true"
@@ -1378,7 +1386,7 @@ exports[`TextInputV2 > should render correctly when input is readOnly 1`] = `
         >
           <input
             aria-invalid="false"
-            class="emotion-6 emotion-7"
+            class="emotion-7 emotion-8"
             data-size="large"
             id=":rd:"
             readonly=""
@@ -1417,8 +1425,8 @@ exports[`TextInputV2 > should render correctly with basic props 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -1427,9 +1435,10 @@ exports[`TextInputV2 > should render correctly with basic props 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1443,69 +1452,69 @@ exports[`TextInputV2 > should render correctly with basic props 1`] = `
   border-radius: 0.25rem;
 }
 
-.emotion-4>.emotion-7 {
+.emotion-5>.emotion-8 {
   color: #3f4250;
 }
 
-.emotion-4>.emotion-7::-webkit-input-placeholder {
+.emotion-5>.emotion-8::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7::-moz-placeholder {
+.emotion-5>.emotion-8::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7:-ms-input-placeholder {
+.emotion-5>.emotion-8:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-4>.emotion-7::placeholder {
+.emotion-5>.emotion-8::placeholder {
   color: #727683;
 }
 
-.emotion-4[data-success='true'] {
+.emotion-5[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-4[data-error='true'] {
+.emotion-5[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-4[data-readonly='true'] {
+.emotion-5[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-4[data-disabled='true'] {
+.emotion-5[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7 {
+.emotion-5[data-disabled='true']>.emotion-8 {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::-webkit-input-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::-moz-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7:-ms-input-placeholder {
+.emotion-5[data-disabled='true']>.emotion-8:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7::placeholder {
+.emotion-5[data-disabled='true']>.emotion-8::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-4:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-5:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-6 {
+.emotion-7 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -1518,11 +1527,11 @@ exports[`TextInputV2 > should render correctly with basic props 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-6[data-size='large'] {
+.emotion-7[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-6[data-size='small'] {
+.emotion-7[data-size='small'] {
   padding-left: 0.5rem;
 }
 
@@ -1533,14 +1542,14 @@ exports[`TextInputV2 > should render correctly with basic props 1`] = `
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
         for=":r0:"
       >
         Test
       </label>
       <div>
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-5 emotion-6"
           data-disabled="false"
           data-error="false"
           data-readonly="false"
@@ -1548,7 +1557,7 @@ exports[`TextInputV2 > should render correctly with basic props 1`] = `
         >
           <input
             aria-invalid="false"
-            class="emotion-6 emotion-7"
+            class="emotion-7 emotion-8"
             data-size="large"
             id=":r0:"
             type="text"
diff --git a/packages/ui/src/components/TimeInputV2/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/TimeInputV2/__tests__/__snapshots__/index.test.tsx.snap
index 1f62307264..55f7f9eb56 100644
--- a/packages/ui/src/components/TimeInputV2/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/TimeInputV2/__tests__/__snapshots__/index.test.tsx.snap
@@ -94,8 +94,8 @@ exports[`TimeInput > renders can move with arrow keys - 12-hour format 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -104,10 +104,11 @@ exports[`TimeInput > renders can move with arrow keys - 12-hour format 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -116,9 +117,10 @@ exports[`TimeInput > renders can move with arrow keys - 12-hour format 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-6 {
+.emotion-7 {
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -129,7 +131,7 @@ exports[`TimeInput > renders can move with arrow keys - 12-hour format 1`] = `
   text-decoration: none;
 }
 
-.emotion-6 {
+.emotion-7 {
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -140,7 +142,7 @@ exports[`TimeInput > renders can move with arrow keys - 12-hour format 1`] = `
   text-decoration: none;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -172,41 +174,41 @@ exports[`TimeInput > renders can move with arrow keys - 12-hour format 1`] = `
   border: 1px solid #d9dadd;
 }
 
-.emotion-8:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-9:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-8[data-disabled="false"]:hover,
-.emotion-8 [data-disabled="false"]:focus {
+.emotion-9[data-disabled="false"]:hover,
+.emotion-9 [data-disabled="false"]:focus {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-8:focus-within {
+.emotion-9:focus-within {
   border-color: #792dd4;
 }
 
-.emotion-8[data-size='small'] {
+.emotion-9[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-8[data-size='medium'] {
+.emotion-9[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-8[data-size='large'] {
+.emotion-9[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
@@ -216,20 +218,20 @@ exports[`TimeInput > renders can move with arrow keys - 12-hour format 1`] = `
   user-select: none;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-9[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+.emotion-9[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
   border-color: #92103f;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -261,41 +263,41 @@ exports[`TimeInput > renders can move with arrow keys - 12-hour format 1`] = `
   border: 1px solid #d9dadd;
 }
 
-.emotion-8:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-9:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-8[data-disabled="false"]:hover,
-.emotion-8 [data-disabled="false"]:focus {
+.emotion-9[data-disabled="false"]:hover,
+.emotion-9 [data-disabled="false"]:focus {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-8:focus-within {
+.emotion-9:focus-within {
   border-color: #792dd4;
 }
 
-.emotion-8[data-size='small'] {
+.emotion-9[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-8[data-size='medium'] {
+.emotion-9[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-8[data-size='large'] {
+.emotion-9[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
@@ -305,20 +307,20 @@ exports[`TimeInput > renders can move with arrow keys - 12-hour format 1`] = `
   user-select: none;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-9[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+.emotion-9[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
   border-color: #92103f;
 }
 
-.emotion-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -341,7 +343,7 @@ exports[`TimeInput > renders can move with arrow keys - 12-hour format 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -364,7 +366,7 @@ exports[`TimeInput > renders can move with arrow keys - 12-hour format 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-14 {
+.emotion-15 {
   border: none;
   outline: none;
   background: transparent;
@@ -377,30 +379,30 @@ exports[`TimeInput > renders can move with arrow keys - 12-hour format 1`] = `
   caret-color: transparent;
 }
 
-.emotion-14[data-size='large'] {
+.emotion-15[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-14:not(:disabled):hover {
+.emotion-15:not(:disabled):hover {
   background-color: #e9eaeb;
   color: #727683;
 }
 
-.emotion-14:not(:disabled):active,
-.emotion-14:not(:disabled):focus {
+.emotion-15:not(:disabled):active,
+.emotion-15:not(:disabled):focus {
   background-color: #e9eaeb;
   color: #3f4250;
 }
 
-.emotion-14:-moz-read-only {
+.emotion-15:-moz-read-only {
   cursor: default;
 }
 
-.emotion-14:read-only {
+.emotion-15:read-only {
   cursor: default;
 }
 
-.emotion-14:disabled {
+.emotion-15:disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -408,19 +410,19 @@ exports[`TimeInput > renders can move with arrow keys - 12-hour format 1`] = `
   user-select: none;
 }
 
-.emotion-14[data-period="true"] {
+.emotion-15[data-period="true"] {
   color: #727683;
 }
 
-.emotion-14::-moz-selection {
+.emotion-15::-moz-selection {
   background: none;
 }
 
-.emotion-14::selection {
+.emotion-15::selection {
   background: none;
 }
 
-.emotion-14 {
+.emotion-15 {
   border: none;
   outline: none;
   background: transparent;
@@ -433,30 +435,30 @@ exports[`TimeInput > renders can move with arrow keys - 12-hour format 1`] = `
   caret-color: transparent;
 }
 
-.emotion-14[data-size='large'] {
+.emotion-15[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-14:not(:disabled):hover {
+.emotion-15:not(:disabled):hover {
   background-color: #e9eaeb;
   color: #727683;
 }
 
-.emotion-14:not(:disabled):active,
-.emotion-14:not(:disabled):focus {
+.emotion-15:not(:disabled):active,
+.emotion-15:not(:disabled):focus {
   background-color: #e9eaeb;
   color: #3f4250;
 }
 
-.emotion-14:-moz-read-only {
+.emotion-15:-moz-read-only {
   cursor: default;
 }
 
-.emotion-14:read-only {
+.emotion-15:read-only {
   cursor: default;
 }
 
-.emotion-14:disabled {
+.emotion-15:disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -464,19 +466,19 @@ exports[`TimeInput > renders can move with arrow keys - 12-hour format 1`] = `
   user-select: none;
 }
 
-.emotion-14[data-period="true"] {
+.emotion-15[data-period="true"] {
   color: #727683;
 }
 
-.emotion-14::-moz-selection {
+.emotion-15::-moz-selection {
   background: none;
 }
 
-.emotion-14::selection {
+.emotion-15::selection {
   background: none;
 }
 
-.emotion-17 {
+.emotion-18 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -489,7 +491,7 @@ exports[`TimeInput > renders can move with arrow keys - 12-hour format 1`] = `
   padding-inline: 0.125rem;
 }
 
-.emotion-17 {
+.emotion-18 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -502,7 +504,7 @@ exports[`TimeInput > renders can move with arrow keys - 12-hour format 1`] = `
   padding-inline: 0.125rem;
 }
 
-.emotion-32 {
+.emotion-33 {
   color: #727683;
   font-size: 0.75rem;
   font-family: Inter,Asap,sans-serif;
@@ -514,7 +516,7 @@ exports[`TimeInput > renders can move with arrow keys - 12-hour format 1`] = `
   text-decoration: none;
 }
 
-.emotion-32 {
+.emotion-33 {
   color: #727683;
   font-size: 0.75rem;
   font-family: Inter,Asap,sans-serif;
@@ -536,35 +538,35 @@ exports[`TimeInput > renders can move with arrow keys - 12-hour format 1`] = `
         class="emotion-2 emotion-1"
       >
         <label
-          class="emotion-4 emotion-5"
+          class="emotion-4 emotion-5 emotion-6"
           for=":r24:"
         >
           label
         </label>
         <span
-          class="emotion-6 emotion-5"
+          class="emotion-7 emotion-6"
         >
           labeldescription
         </span>
       </div>
       <div
-        class="emotion-8 emotion-9"
+        class="emotion-9 emotion-10"
         data-disabled="false"
         data-error="false"
         data-readonly="false"
         data-size="medium"
       >
         <div
-          class="emotion-10 emotion-1"
+          class="emotion-11 emotion-1"
         >
           <div
-            class="emotion-10 emotion-1"
+            class="emotion-11 emotion-1"
           >
             <input
               aria-valuemax="12"
               aria-valuemin="1"
               aria-valuenow="12"
-              class="emotion-14 emotion-15"
+              class="emotion-15 emotion-16"
               data-size="medium"
               data-testid="hours-input"
               placeholder="00"
@@ -572,19 +574,19 @@ exports[`TimeInput > renders can move with arrow keys - 12-hour format 1`] = `
               value="12"
             />
             <span
-              class="emotion-16 emotion-17 emotion-5"
+              class="emotion-17 emotion-18 emotion-6"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-10 emotion-1"
+            class="emotion-11 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
               aria-valuenow="23"
-              class="emotion-14 emotion-15"
+              class="emotion-15 emotion-16"
               data-size="medium"
               data-testid="minutes-input"
               placeholder="00"
@@ -592,19 +594,19 @@ exports[`TimeInput > renders can move with arrow keys - 12-hour format 1`] = `
               value="23"
             />
             <span
-              class="emotion-16 emotion-17 emotion-5"
+              class="emotion-17 emotion-18 emotion-6"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-10 emotion-1"
+            class="emotion-11 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
               aria-valuenow="14"
-              class="emotion-14 emotion-15"
+              class="emotion-15 emotion-16"
               data-size="medium"
               data-testid="seconds-input"
               placeholder="00"
@@ -617,7 +619,7 @@ exports[`TimeInput > renders can move with arrow keys - 12-hour format 1`] = `
             aria-valuemin="0"
             aria-valuenow="12"
             aria-valuetext="pm"
-            class="emotion-14 emotion-15"
+            class="emotion-15 emotion-16"
             data-period="true"
             data-size="medium"
             data-testid="am-pm-input"
@@ -628,7 +630,7 @@ exports[`TimeInput > renders can move with arrow keys - 12-hour format 1`] = `
         </div>
       </div>
       <p
-        class="emotion-32 emotion-5"
+        class="emotion-33 emotion-6"
       >
         helper
       </p>
@@ -731,8 +733,8 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -741,10 +743,11 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -753,9 +756,10 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-6 {
+.emotion-7 {
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -766,7 +770,7 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = `
   text-decoration: none;
 }
 
-.emotion-6 {
+.emotion-7 {
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -777,7 +781,7 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = `
   text-decoration: none;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -809,41 +813,41 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = `
   border: 1px solid #d9dadd;
 }
 
-.emotion-8:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-9:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-8[data-disabled="false"]:hover,
-.emotion-8 [data-disabled="false"]:focus {
+.emotion-9[data-disabled="false"]:hover,
+.emotion-9 [data-disabled="false"]:focus {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-8:focus-within {
+.emotion-9:focus-within {
   border-color: #792dd4;
 }
 
-.emotion-8[data-size='small'] {
+.emotion-9[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-8[data-size='medium'] {
+.emotion-9[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-8[data-size='large'] {
+.emotion-9[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
@@ -853,20 +857,20 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = `
   user-select: none;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-9[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+.emotion-9[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
   border-color: #92103f;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -898,41 +902,41 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = `
   border: 1px solid #d9dadd;
 }
 
-.emotion-8:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-9:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-8[data-disabled="false"]:hover,
-.emotion-8 [data-disabled="false"]:focus {
+.emotion-9[data-disabled="false"]:hover,
+.emotion-9 [data-disabled="false"]:focus {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-8:focus-within {
+.emotion-9:focus-within {
   border-color: #792dd4;
 }
 
-.emotion-8[data-size='small'] {
+.emotion-9[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-8[data-size='medium'] {
+.emotion-9[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-8[data-size='large'] {
+.emotion-9[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
@@ -942,20 +946,20 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = `
   user-select: none;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-9[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+.emotion-9[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
   border-color: #92103f;
 }
 
-.emotion-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -978,7 +982,7 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1001,7 +1005,7 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-14 {
+.emotion-15 {
   border: none;
   outline: none;
   background: transparent;
@@ -1014,30 +1018,30 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = `
   caret-color: transparent;
 }
 
-.emotion-14[data-size='large'] {
+.emotion-15[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-14:not(:disabled):hover {
+.emotion-15:not(:disabled):hover {
   background-color: #e9eaeb;
   color: #727683;
 }
 
-.emotion-14:not(:disabled):active,
-.emotion-14:not(:disabled):focus {
+.emotion-15:not(:disabled):active,
+.emotion-15:not(:disabled):focus {
   background-color: #e9eaeb;
   color: #3f4250;
 }
 
-.emotion-14:-moz-read-only {
+.emotion-15:-moz-read-only {
   cursor: default;
 }
 
-.emotion-14:read-only {
+.emotion-15:read-only {
   cursor: default;
 }
 
-.emotion-14:disabled {
+.emotion-15:disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -1045,19 +1049,19 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = `
   user-select: none;
 }
 
-.emotion-14[data-period="true"] {
+.emotion-15[data-period="true"] {
   color: #727683;
 }
 
-.emotion-14::-moz-selection {
+.emotion-15::-moz-selection {
   background: none;
 }
 
-.emotion-14::selection {
+.emotion-15::selection {
   background: none;
 }
 
-.emotion-14 {
+.emotion-15 {
   border: none;
   outline: none;
   background: transparent;
@@ -1070,30 +1074,30 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = `
   caret-color: transparent;
 }
 
-.emotion-14[data-size='large'] {
+.emotion-15[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-14:not(:disabled):hover {
+.emotion-15:not(:disabled):hover {
   background-color: #e9eaeb;
   color: #727683;
 }
 
-.emotion-14:not(:disabled):active,
-.emotion-14:not(:disabled):focus {
+.emotion-15:not(:disabled):active,
+.emotion-15:not(:disabled):focus {
   background-color: #e9eaeb;
   color: #3f4250;
 }
 
-.emotion-14:-moz-read-only {
+.emotion-15:-moz-read-only {
   cursor: default;
 }
 
-.emotion-14:read-only {
+.emotion-15:read-only {
   cursor: default;
 }
 
-.emotion-14:disabled {
+.emotion-15:disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -1101,19 +1105,19 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = `
   user-select: none;
 }
 
-.emotion-14[data-period="true"] {
+.emotion-15[data-period="true"] {
   color: #727683;
 }
 
-.emotion-14::-moz-selection {
+.emotion-15::-moz-selection {
   background: none;
 }
 
-.emotion-14::selection {
+.emotion-15::selection {
   background: none;
 }
 
-.emotion-17 {
+.emotion-18 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -1126,7 +1130,7 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = `
   padding-inline: 0.125rem;
 }
 
-.emotion-17 {
+.emotion-18 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -1139,7 +1143,7 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = `
   padding-inline: 0.125rem;
 }
 
-.emotion-32 {
+.emotion-33 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1178,22 +1182,22 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = `
   color: #3f4250;
 }
 
-.emotion-32:hover {
+.emotion-33:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-32:active {
+.emotion-33:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-32:hover,
-.emotion-32:active {
+.emotion-33:hover,
+.emotion-33:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-32 {
+.emotion-33 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1232,22 +1236,22 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = `
   color: #3f4250;
 }
 
-.emotion-32:hover {
+.emotion-33:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-32:active {
+.emotion-33:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-32:hover,
-.emotion-32:active {
+.emotion-33:hover,
+.emotion-33:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-34 {
+.emotion-35 {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -1256,16 +1260,16 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = `
   min-height: 16px;
 }
 
-.emotion-34 .fillStroke {
+.emotion-35 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
 
-.emotion-34 path {
+.emotion-35 path {
   fill: currentColor;
 }
 
-.emotion-34 {
+.emotion-35 {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -1274,16 +1278,16 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = `
   min-height: 16px;
 }
 
-.emotion-34 .fillStroke {
+.emotion-35 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
 
-.emotion-34 path {
+.emotion-35 path {
   fill: currentColor;
 }
 
-.emotion-36 {
+.emotion-37 {
   color: #727683;
   font-size: 0.75rem;
   font-family: Inter,Asap,sans-serif;
@@ -1295,7 +1299,7 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = `
   text-decoration: none;
 }
 
-.emotion-36 {
+.emotion-37 {
   color: #727683;
   font-size: 0.75rem;
   font-family: Inter,Asap,sans-serif;
@@ -1317,35 +1321,35 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = `
         class="emotion-2 emotion-1"
       >
         <label
-          class="emotion-4 emotion-5"
+          class="emotion-4 emotion-5 emotion-6"
           for=":r2a:"
         >
           label
         </label>
         <span
-          class="emotion-6 emotion-5"
+          class="emotion-7 emotion-6"
         >
           labeldescription
         </span>
       </div>
       <div
-        class="emotion-8 emotion-9"
+        class="emotion-9 emotion-10"
         data-disabled="false"
         data-error="false"
         data-readonly="false"
         data-size="medium"
       >
         <div
-          class="emotion-10 emotion-1"
+          class="emotion-11 emotion-1"
         >
           <div
-            class="emotion-10 emotion-1"
+            class="emotion-11 emotion-1"
           >
             <input
               aria-valuemax="23"
               aria-valuemin="0"
               aria-valuenow="23"
-              class="emotion-14 emotion-15"
+              class="emotion-15 emotion-16"
               data-size="medium"
               data-testid="hours-input"
               placeholder="00"
@@ -1353,19 +1357,19 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = `
               value="23"
             />
             <span
-              class="emotion-16 emotion-17 emotion-5"
+              class="emotion-17 emotion-18 emotion-6"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-10 emotion-1"
+            class="emotion-11 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
               aria-valuenow="23"
-              class="emotion-14 emotion-15"
+              class="emotion-15 emotion-16"
               data-size="medium"
               data-testid="minutes-input"
               placeholder="00"
@@ -1373,19 +1377,19 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = `
               value="23"
             />
             <span
-              class="emotion-16 emotion-17 emotion-5"
+              class="emotion-17 emotion-18 emotion-6"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-10 emotion-1"
+            class="emotion-11 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
               aria-valuenow="14"
-              class="emotion-14 emotion-15"
+              class="emotion-15 emotion-16"
               data-size="medium"
               data-testid="seconds-input"
               placeholder="00"
@@ -1399,12 +1403,12 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = `
         >
           <button
             aria-label="clear value"
-            class="emotion-32 emotion-33"
+            class="emotion-33 emotion-34"
             data-testid="clear"
             type="button"
           >
             <svg
-              class="emotion-34 emotion-35"
+              class="emotion-35 emotion-36"
               viewBox="0 0 16 16"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -1416,7 +1420,7 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = `
         </div>
       </div>
       <p
-        class="emotion-36 emotion-5"
+        class="emotion-37 emotion-6"
       >
         helper
       </p>
@@ -1450,8 +1454,8 @@ exports[`TimeInput > renders correctly clearable 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -1460,9 +1464,10 @@ exports[`TimeInput > renders correctly clearable 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1494,41 +1499,41 @@ exports[`TimeInput > renders correctly clearable 1`] = `
   border: 1px solid #d9dadd;
 }
 
-.emotion-4:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-5:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-4[data-disabled="false"]:hover,
-.emotion-4 [data-disabled="false"]:focus {
+.emotion-5[data-disabled="false"]:hover,
+.emotion-5 [data-disabled="false"]:focus {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-4:focus-within {
+.emotion-5:focus-within {
   border-color: #792dd4;
 }
 
-.emotion-4[data-size='small'] {
+.emotion-5[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-4[data-size='medium'] {
+.emotion-5[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-4[data-size='large'] {
+.emotion-5[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-4[data-readonly='true'] {
+.emotion-5[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-4[data-disabled='true'] {
+.emotion-5[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
@@ -1538,20 +1543,20 @@ exports[`TimeInput > renders correctly clearable 1`] = `
   user-select: none;
 }
 
-.emotion-4[data-error='true'] {
+.emotion-5[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-4[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-5[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-4[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+.emotion-5[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
   border-color: #92103f;
 }
 
-.emotion-6 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1574,7 +1579,7 @@ exports[`TimeInput > renders correctly clearable 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-10 {
+.emotion-11 {
   border: none;
   outline: none;
   background: transparent;
@@ -1587,30 +1592,30 @@ exports[`TimeInput > renders correctly clearable 1`] = `
   caret-color: transparent;
 }
 
-.emotion-10[data-size='large'] {
+.emotion-11[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-10:not(:disabled):hover {
+.emotion-11:not(:disabled):hover {
   background-color: #e9eaeb;
   color: #727683;
 }
 
-.emotion-10:not(:disabled):active,
-.emotion-10:not(:disabled):focus {
+.emotion-11:not(:disabled):active,
+.emotion-11:not(:disabled):focus {
   background-color: #e9eaeb;
   color: #3f4250;
 }
 
-.emotion-10:-moz-read-only {
+.emotion-11:-moz-read-only {
   cursor: default;
 }
 
-.emotion-10:read-only {
+.emotion-11:read-only {
   cursor: default;
 }
 
-.emotion-10:disabled {
+.emotion-11:disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -1618,19 +1623,19 @@ exports[`TimeInput > renders correctly clearable 1`] = `
   user-select: none;
 }
 
-.emotion-10[data-period="true"] {
+.emotion-11[data-period="true"] {
   color: #727683;
 }
 
-.emotion-10::-moz-selection {
+.emotion-11::-moz-selection {
   background: none;
 }
 
-.emotion-10::selection {
+.emotion-11::selection {
   background: none;
 }
 
-.emotion-13 {
+.emotion-14 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -1643,7 +1648,7 @@ exports[`TimeInput > renders correctly clearable 1`] = `
   padding-inline: 0.125rem;
 }
 
-.emotion-26 {
+.emotion-27 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1666,7 +1671,7 @@ exports[`TimeInput > renders correctly clearable 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-28 {
+.emotion-29 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1705,22 +1710,22 @@ exports[`TimeInput > renders correctly clearable 1`] = `
   color: #3f4250;
 }
 
-.emotion-28:hover {
+.emotion-29:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-28:active {
+.emotion-29:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-28:hover,
-.emotion-28:active {
+.emotion-29:hover,
+.emotion-29:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-30 {
+.emotion-31 {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -1729,12 +1734,12 @@ exports[`TimeInput > renders correctly clearable 1`] = `
   min-height: 16px;
 }
 
-.emotion-30 .fillStroke {
+.emotion-31 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
 
-.emotion-30 path {
+.emotion-31 path {
   fill: currentColor;
 }
 
@@ -1745,28 +1750,28 @@ exports[`TimeInput > renders correctly clearable 1`] = `
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
         for=":rg:"
       >
         test
       </label>
       <div
-        class="emotion-4 emotion-5"
+        class="emotion-5 emotion-6"
         data-disabled="false"
         data-error="false"
         data-readonly="false"
         data-size="medium"
       >
         <div
-          class="emotion-6 emotion-1"
+          class="emotion-7 emotion-1"
         >
           <div
-            class="emotion-6 emotion-1"
+            class="emotion-7 emotion-1"
           >
             <input
               aria-valuemax="23"
               aria-valuemin="0"
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
               data-size="medium"
               data-testid="hours-input"
               placeholder="00"
@@ -1774,18 +1779,18 @@ exports[`TimeInput > renders correctly clearable 1`] = `
               value=""
             />
             <span
-              class="emotion-12 emotion-13 emotion-3"
+              class="emotion-13 emotion-14 emotion-4"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-6 emotion-1"
+            class="emotion-7 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
               data-size="medium"
               data-testid="minutes-input"
               placeholder="00"
@@ -1793,18 +1798,18 @@ exports[`TimeInput > renders correctly clearable 1`] = `
               value=""
             />
             <span
-              class="emotion-12 emotion-13 emotion-3"
+              class="emotion-13 emotion-14 emotion-4"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-6 emotion-1"
+            class="emotion-7 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
               data-size="medium"
               data-testid="seconds-input"
               placeholder="00"
@@ -1814,16 +1819,16 @@ exports[`TimeInput > renders correctly clearable 1`] = `
           </div>
         </div>
         <div
-          class="emotion-26 emotion-1"
+          class="emotion-27 emotion-1"
         >
           <button
             aria-label="clear value"
-            class="emotion-28 emotion-29"
+            class="emotion-29 emotion-30"
             data-testid="clear"
             type="button"
           >
             <svg
-              class="emotion-30 emotion-31"
+              class="emotion-31 emotion-32"
               viewBox="0 0 16 16"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -1933,8 +1938,8 @@ exports[`TimeInput > renders correctly clearable 2`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -1943,10 +1948,11 @@ exports[`TimeInput > renders correctly clearable 2`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -1955,9 +1961,10 @@ exports[`TimeInput > renders correctly clearable 2`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-6 {
+.emotion-7 {
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -1968,7 +1975,7 @@ exports[`TimeInput > renders correctly clearable 2`] = `
   text-decoration: none;
 }
 
-.emotion-6 {
+.emotion-7 {
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -1979,7 +1986,7 @@ exports[`TimeInput > renders correctly clearable 2`] = `
   text-decoration: none;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2011,41 +2018,41 @@ exports[`TimeInput > renders correctly clearable 2`] = `
   border: 1px solid #d9dadd;
 }
 
-.emotion-8:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-9:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-8[data-disabled="false"]:hover,
-.emotion-8 [data-disabled="false"]:focus {
+.emotion-9[data-disabled="false"]:hover,
+.emotion-9 [data-disabled="false"]:focus {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-8:focus-within {
+.emotion-9:focus-within {
   border-color: #792dd4;
 }
 
-.emotion-8[data-size='small'] {
+.emotion-9[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-8[data-size='medium'] {
+.emotion-9[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-8[data-size='large'] {
+.emotion-9[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
@@ -2055,20 +2062,20 @@ exports[`TimeInput > renders correctly clearable 2`] = `
   user-select: none;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-9[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+.emotion-9[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
   border-color: #92103f;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2100,41 +2107,41 @@ exports[`TimeInput > renders correctly clearable 2`] = `
   border: 1px solid #d9dadd;
 }
 
-.emotion-8:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-9:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-8[data-disabled="false"]:hover,
-.emotion-8 [data-disabled="false"]:focus {
+.emotion-9[data-disabled="false"]:hover,
+.emotion-9 [data-disabled="false"]:focus {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-8:focus-within {
+.emotion-9:focus-within {
   border-color: #792dd4;
 }
 
-.emotion-8[data-size='small'] {
+.emotion-9[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-8[data-size='medium'] {
+.emotion-9[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-8[data-size='large'] {
+.emotion-9[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
@@ -2144,20 +2151,20 @@ exports[`TimeInput > renders correctly clearable 2`] = `
   user-select: none;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-9[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+.emotion-9[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
   border-color: #92103f;
 }
 
-.emotion-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2180,7 +2187,7 @@ exports[`TimeInput > renders correctly clearable 2`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2203,7 +2210,7 @@ exports[`TimeInput > renders correctly clearable 2`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-14 {
+.emotion-15 {
   border: none;
   outline: none;
   background: transparent;
@@ -2216,30 +2223,30 @@ exports[`TimeInput > renders correctly clearable 2`] = `
   caret-color: transparent;
 }
 
-.emotion-14[data-size='large'] {
+.emotion-15[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-14:not(:disabled):hover {
+.emotion-15:not(:disabled):hover {
   background-color: #e9eaeb;
   color: #727683;
 }
 
-.emotion-14:not(:disabled):active,
-.emotion-14:not(:disabled):focus {
+.emotion-15:not(:disabled):active,
+.emotion-15:not(:disabled):focus {
   background-color: #e9eaeb;
   color: #3f4250;
 }
 
-.emotion-14:-moz-read-only {
+.emotion-15:-moz-read-only {
   cursor: default;
 }
 
-.emotion-14:read-only {
+.emotion-15:read-only {
   cursor: default;
 }
 
-.emotion-14:disabled {
+.emotion-15:disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -2247,19 +2254,19 @@ exports[`TimeInput > renders correctly clearable 2`] = `
   user-select: none;
 }
 
-.emotion-14[data-period="true"] {
+.emotion-15[data-period="true"] {
   color: #727683;
 }
 
-.emotion-14::-moz-selection {
+.emotion-15::-moz-selection {
   background: none;
 }
 
-.emotion-14::selection {
+.emotion-15::selection {
   background: none;
 }
 
-.emotion-14 {
+.emotion-15 {
   border: none;
   outline: none;
   background: transparent;
@@ -2272,30 +2279,30 @@ exports[`TimeInput > renders correctly clearable 2`] = `
   caret-color: transparent;
 }
 
-.emotion-14[data-size='large'] {
+.emotion-15[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-14:not(:disabled):hover {
+.emotion-15:not(:disabled):hover {
   background-color: #e9eaeb;
   color: #727683;
 }
 
-.emotion-14:not(:disabled):active,
-.emotion-14:not(:disabled):focus {
+.emotion-15:not(:disabled):active,
+.emotion-15:not(:disabled):focus {
   background-color: #e9eaeb;
   color: #3f4250;
 }
 
-.emotion-14:-moz-read-only {
+.emotion-15:-moz-read-only {
   cursor: default;
 }
 
-.emotion-14:read-only {
+.emotion-15:read-only {
   cursor: default;
 }
 
-.emotion-14:disabled {
+.emotion-15:disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -2303,19 +2310,19 @@ exports[`TimeInput > renders correctly clearable 2`] = `
   user-select: none;
 }
 
-.emotion-14[data-period="true"] {
+.emotion-15[data-period="true"] {
   color: #727683;
 }
 
-.emotion-14::-moz-selection {
+.emotion-15::-moz-selection {
   background: none;
 }
 
-.emotion-14::selection {
+.emotion-15::selection {
   background: none;
 }
 
-.emotion-17 {
+.emotion-18 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -2328,7 +2335,7 @@ exports[`TimeInput > renders correctly clearable 2`] = `
   padding-inline: 0.125rem;
 }
 
-.emotion-17 {
+.emotion-18 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -2341,7 +2348,7 @@ exports[`TimeInput > renders correctly clearable 2`] = `
   padding-inline: 0.125rem;
 }
 
-.emotion-34 {
+.emotion-35 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2380,22 +2387,22 @@ exports[`TimeInput > renders correctly clearable 2`] = `
   color: #3f4250;
 }
 
-.emotion-34:hover {
+.emotion-35:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-34:active {
+.emotion-35:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-34:hover,
-.emotion-34:active {
+.emotion-35:hover,
+.emotion-35:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-34 {
+.emotion-35 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2434,22 +2441,22 @@ exports[`TimeInput > renders correctly clearable 2`] = `
   color: #3f4250;
 }
 
-.emotion-34:hover {
+.emotion-35:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-34:active {
+.emotion-35:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-34:hover,
-.emotion-34:active {
+.emotion-35:hover,
+.emotion-35:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-36 {
+.emotion-37 {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -2458,16 +2465,16 @@ exports[`TimeInput > renders correctly clearable 2`] = `
   min-height: 16px;
 }
 
-.emotion-36 .fillStroke {
+.emotion-37 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
 
-.emotion-36 path {
+.emotion-37 path {
   fill: currentColor;
 }
 
-.emotion-36 {
+.emotion-37 {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -2476,16 +2483,16 @@ exports[`TimeInput > renders correctly clearable 2`] = `
   min-height: 16px;
 }
 
-.emotion-36 .fillStroke {
+.emotion-37 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
 
-.emotion-36 path {
+.emotion-37 path {
   fill: currentColor;
 }
 
-.emotion-38 {
+.emotion-39 {
   color: #727683;
   font-size: 0.75rem;
   font-family: Inter,Asap,sans-serif;
@@ -2497,7 +2504,7 @@ exports[`TimeInput > renders correctly clearable 2`] = `
   text-decoration: none;
 }
 
-.emotion-38 {
+.emotion-39 {
   color: #727683;
   font-size: 0.75rem;
   font-family: Inter,Asap,sans-serif;
@@ -2519,35 +2526,35 @@ exports[`TimeInput > renders correctly clearable 2`] = `
         class="emotion-2 emotion-1"
       >
         <label
-          class="emotion-4 emotion-5"
+          class="emotion-4 emotion-5 emotion-6"
           for=":r1t:"
         >
           label
         </label>
         <span
-          class="emotion-6 emotion-5"
+          class="emotion-7 emotion-6"
         >
           labeldescription
         </span>
       </div>
       <div
-        class="emotion-8 emotion-9"
+        class="emotion-9 emotion-10"
         data-disabled="false"
         data-error="false"
         data-readonly="false"
         data-size="medium"
       >
         <div
-          class="emotion-10 emotion-1"
+          class="emotion-11 emotion-1"
         >
           <div
-            class="emotion-10 emotion-1"
+            class="emotion-11 emotion-1"
           >
             <input
               aria-valuemax="12"
               aria-valuemin="1"
               aria-valuenow="12"
-              class="emotion-14 emotion-15"
+              class="emotion-15 emotion-16"
               data-size="medium"
               data-testid="hours-input"
               placeholder="00"
@@ -2555,19 +2562,19 @@ exports[`TimeInput > renders correctly clearable 2`] = `
               value="12"
             />
             <span
-              class="emotion-16 emotion-17 emotion-5"
+              class="emotion-17 emotion-18 emotion-6"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-10 emotion-1"
+            class="emotion-11 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
               aria-valuenow="0"
-              class="emotion-14 emotion-15"
+              class="emotion-15 emotion-16"
               data-size="medium"
               data-testid="minutes-input"
               placeholder="00"
@@ -2575,19 +2582,19 @@ exports[`TimeInput > renders correctly clearable 2`] = `
               value="00"
             />
             <span
-              class="emotion-16 emotion-17 emotion-5"
+              class="emotion-17 emotion-18 emotion-6"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-10 emotion-1"
+            class="emotion-11 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
               aria-valuenow="0"
-              class="emotion-14 emotion-15"
+              class="emotion-15 emotion-16"
               data-size="medium"
               data-testid="seconds-input"
               placeholder="00"
@@ -2600,7 +2607,7 @@ exports[`TimeInput > renders correctly clearable 2`] = `
             aria-valuemin="0"
             aria-valuenow="0"
             aria-valuetext="am"
-            class="emotion-14 emotion-15"
+            class="emotion-15 emotion-16"
             data-period="true"
             data-size="medium"
             data-testid="am-pm-input"
@@ -2614,12 +2621,12 @@ exports[`TimeInput > renders correctly clearable 2`] = `
         >
           <button
             aria-label="clear value"
-            class="emotion-34 emotion-35"
+            class="emotion-35 emotion-36"
             data-testid="clear"
             type="button"
           >
             <svg
-              class="emotion-36 emotion-37"
+              class="emotion-37 emotion-38"
               viewBox="0 0 16 16"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -2631,7 +2638,7 @@ exports[`TimeInput > renders correctly clearable 2`] = `
         </div>
       </div>
       <p
-        class="emotion-38 emotion-5"
+        class="emotion-39 emotion-6"
       >
         helper
       </p>
@@ -2734,8 +2741,8 @@ exports[`TimeInput > renders correctly controlled - 12-hour format 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -2744,10 +2751,11 @@ exports[`TimeInput > renders correctly controlled - 12-hour format 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -2756,9 +2764,10 @@ exports[`TimeInput > renders correctly controlled - 12-hour format 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-6 {
+.emotion-7 {
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -2769,7 +2778,7 @@ exports[`TimeInput > renders correctly controlled - 12-hour format 1`] = `
   text-decoration: none;
 }
 
-.emotion-6 {
+.emotion-7 {
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -2780,7 +2789,7 @@ exports[`TimeInput > renders correctly controlled - 12-hour format 1`] = `
   text-decoration: none;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2812,41 +2821,41 @@ exports[`TimeInput > renders correctly controlled - 12-hour format 1`] = `
   border: 1px solid #d9dadd;
 }
 
-.emotion-8:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-9:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-8[data-disabled="false"]:hover,
-.emotion-8 [data-disabled="false"]:focus {
+.emotion-9[data-disabled="false"]:hover,
+.emotion-9 [data-disabled="false"]:focus {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-8:focus-within {
+.emotion-9:focus-within {
   border-color: #792dd4;
 }
 
-.emotion-8[data-size='small'] {
+.emotion-9[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-8[data-size='medium'] {
+.emotion-9[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-8[data-size='large'] {
+.emotion-9[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
@@ -2856,20 +2865,20 @@ exports[`TimeInput > renders correctly controlled - 12-hour format 1`] = `
   user-select: none;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-9[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+.emotion-9[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
   border-color: #92103f;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2901,41 +2910,41 @@ exports[`TimeInput > renders correctly controlled - 12-hour format 1`] = `
   border: 1px solid #d9dadd;
 }
 
-.emotion-8:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-9:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-8[data-disabled="false"]:hover,
-.emotion-8 [data-disabled="false"]:focus {
+.emotion-9[data-disabled="false"]:hover,
+.emotion-9 [data-disabled="false"]:focus {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-8:focus-within {
+.emotion-9:focus-within {
   border-color: #792dd4;
 }
 
-.emotion-8[data-size='small'] {
+.emotion-9[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-8[data-size='medium'] {
+.emotion-9[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-8[data-size='large'] {
+.emotion-9[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
@@ -2945,20 +2954,20 @@ exports[`TimeInput > renders correctly controlled - 12-hour format 1`] = `
   user-select: none;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-9[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+.emotion-9[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
   border-color: #92103f;
 }
 
-.emotion-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2981,7 +2990,7 @@ exports[`TimeInput > renders correctly controlled - 12-hour format 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3004,7 +3013,7 @@ exports[`TimeInput > renders correctly controlled - 12-hour format 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-14 {
+.emotion-15 {
   border: none;
   outline: none;
   background: transparent;
@@ -3017,30 +3026,30 @@ exports[`TimeInput > renders correctly controlled - 12-hour format 1`] = `
   caret-color: transparent;
 }
 
-.emotion-14[data-size='large'] {
+.emotion-15[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-14:not(:disabled):hover {
+.emotion-15:not(:disabled):hover {
   background-color: #e9eaeb;
   color: #727683;
 }
 
-.emotion-14:not(:disabled):active,
-.emotion-14:not(:disabled):focus {
+.emotion-15:not(:disabled):active,
+.emotion-15:not(:disabled):focus {
   background-color: #e9eaeb;
   color: #3f4250;
 }
 
-.emotion-14:-moz-read-only {
+.emotion-15:-moz-read-only {
   cursor: default;
 }
 
-.emotion-14:read-only {
+.emotion-15:read-only {
   cursor: default;
 }
 
-.emotion-14:disabled {
+.emotion-15:disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -3048,19 +3057,19 @@ exports[`TimeInput > renders correctly controlled - 12-hour format 1`] = `
   user-select: none;
 }
 
-.emotion-14[data-period="true"] {
+.emotion-15[data-period="true"] {
   color: #727683;
 }
 
-.emotion-14::-moz-selection {
+.emotion-15::-moz-selection {
   background: none;
 }
 
-.emotion-14::selection {
+.emotion-15::selection {
   background: none;
 }
 
-.emotion-14 {
+.emotion-15 {
   border: none;
   outline: none;
   background: transparent;
@@ -3073,30 +3082,30 @@ exports[`TimeInput > renders correctly controlled - 12-hour format 1`] = `
   caret-color: transparent;
 }
 
-.emotion-14[data-size='large'] {
+.emotion-15[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-14:not(:disabled):hover {
+.emotion-15:not(:disabled):hover {
   background-color: #e9eaeb;
   color: #727683;
 }
 
-.emotion-14:not(:disabled):active,
-.emotion-14:not(:disabled):focus {
+.emotion-15:not(:disabled):active,
+.emotion-15:not(:disabled):focus {
   background-color: #e9eaeb;
   color: #3f4250;
 }
 
-.emotion-14:-moz-read-only {
+.emotion-15:-moz-read-only {
   cursor: default;
 }
 
-.emotion-14:read-only {
+.emotion-15:read-only {
   cursor: default;
 }
 
-.emotion-14:disabled {
+.emotion-15:disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -3104,19 +3113,19 @@ exports[`TimeInput > renders correctly controlled - 12-hour format 1`] = `
   user-select: none;
 }
 
-.emotion-14[data-period="true"] {
+.emotion-15[data-period="true"] {
   color: #727683;
 }
 
-.emotion-14::-moz-selection {
+.emotion-15::-moz-selection {
   background: none;
 }
 
-.emotion-14::selection {
+.emotion-15::selection {
   background: none;
 }
 
-.emotion-17 {
+.emotion-18 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -3129,7 +3138,7 @@ exports[`TimeInput > renders correctly controlled - 12-hour format 1`] = `
   padding-inline: 0.125rem;
 }
 
-.emotion-17 {
+.emotion-18 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -3142,7 +3151,7 @@ exports[`TimeInput > renders correctly controlled - 12-hour format 1`] = `
   padding-inline: 0.125rem;
 }
 
-.emotion-32 {
+.emotion-33 {
   color: #727683;
   font-size: 0.75rem;
   font-family: Inter,Asap,sans-serif;
@@ -3154,7 +3163,7 @@ exports[`TimeInput > renders correctly controlled - 12-hour format 1`] = `
   text-decoration: none;
 }
 
-.emotion-32 {
+.emotion-33 {
   color: #727683;
   font-size: 0.75rem;
   font-family: Inter,Asap,sans-serif;
@@ -3176,35 +3185,35 @@ exports[`TimeInput > renders correctly controlled - 12-hour format 1`] = `
         class="emotion-2 emotion-1"
       >
         <label
-          class="emotion-4 emotion-5"
+          class="emotion-4 emotion-5 emotion-6"
           for=":r1h:"
         >
           label
         </label>
         <span
-          class="emotion-6 emotion-5"
+          class="emotion-7 emotion-6"
         >
           labeldescription
         </span>
       </div>
       <div
-        class="emotion-8 emotion-9"
+        class="emotion-9 emotion-10"
         data-disabled="false"
         data-error="false"
         data-readonly="false"
         data-size="medium"
       >
         <div
-          class="emotion-10 emotion-1"
+          class="emotion-11 emotion-1"
         >
           <div
-            class="emotion-10 emotion-1"
+            class="emotion-11 emotion-1"
           >
             <input
               aria-valuemax="12"
               aria-valuemin="1"
               aria-valuenow="12"
-              class="emotion-14 emotion-15"
+              class="emotion-15 emotion-16"
               data-size="medium"
               data-testid="hours-input"
               placeholder="00"
@@ -3212,19 +3221,19 @@ exports[`TimeInput > renders correctly controlled - 12-hour format 1`] = `
               value="12"
             />
             <span
-              class="emotion-16 emotion-17 emotion-5"
+              class="emotion-17 emotion-18 emotion-6"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-10 emotion-1"
+            class="emotion-11 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
               aria-valuenow="23"
-              class="emotion-14 emotion-15"
+              class="emotion-15 emotion-16"
               data-size="medium"
               data-testid="minutes-input"
               placeholder="00"
@@ -3232,19 +3241,19 @@ exports[`TimeInput > renders correctly controlled - 12-hour format 1`] = `
               value="23"
             />
             <span
-              class="emotion-16 emotion-17 emotion-5"
+              class="emotion-17 emotion-18 emotion-6"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-10 emotion-1"
+            class="emotion-11 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
               aria-valuenow="7"
-              class="emotion-14 emotion-15"
+              class="emotion-15 emotion-16"
               data-size="medium"
               data-testid="seconds-input"
               placeholder="00"
@@ -3257,7 +3266,7 @@ exports[`TimeInput > renders correctly controlled - 12-hour format 1`] = `
             aria-valuemin="0"
             aria-valuenow="0"
             aria-valuetext="am"
-            class="emotion-14 emotion-15"
+            class="emotion-15 emotion-16"
             data-period="true"
             data-size="medium"
             data-testid="am-pm-input"
@@ -3268,7 +3277,7 @@ exports[`TimeInput > renders correctly controlled - 12-hour format 1`] = `
         </div>
       </div>
       <p
-        class="emotion-32 emotion-5"
+        class="emotion-33 emotion-6"
       >
         helper
       </p>
@@ -3371,8 +3380,8 @@ exports[`TimeInput > renders correctly controlled - 24-hours format 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -3381,10 +3390,11 @@ exports[`TimeInput > renders correctly controlled - 24-hours format 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -3393,9 +3403,10 @@ exports[`TimeInput > renders correctly controlled - 24-hours format 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-6 {
+.emotion-7 {
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -3406,7 +3417,7 @@ exports[`TimeInput > renders correctly controlled - 24-hours format 1`] = `
   text-decoration: none;
 }
 
-.emotion-6 {
+.emotion-7 {
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -3417,7 +3428,7 @@ exports[`TimeInput > renders correctly controlled - 24-hours format 1`] = `
   text-decoration: none;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3449,41 +3460,41 @@ exports[`TimeInput > renders correctly controlled - 24-hours format 1`] = `
   border: 1px solid #d9dadd;
 }
 
-.emotion-8:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-9:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-8[data-disabled="false"]:hover,
-.emotion-8 [data-disabled="false"]:focus {
+.emotion-9[data-disabled="false"]:hover,
+.emotion-9 [data-disabled="false"]:focus {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-8:focus-within {
+.emotion-9:focus-within {
   border-color: #792dd4;
 }
 
-.emotion-8[data-size='small'] {
+.emotion-9[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-8[data-size='medium'] {
+.emotion-9[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-8[data-size='large'] {
+.emotion-9[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
@@ -3493,20 +3504,20 @@ exports[`TimeInput > renders correctly controlled - 24-hours format 1`] = `
   user-select: none;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-9[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+.emotion-9[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
   border-color: #92103f;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3538,41 +3549,41 @@ exports[`TimeInput > renders correctly controlled - 24-hours format 1`] = `
   border: 1px solid #d9dadd;
 }
 
-.emotion-8:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-9:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-8[data-disabled="false"]:hover,
-.emotion-8 [data-disabled="false"]:focus {
+.emotion-9[data-disabled="false"]:hover,
+.emotion-9 [data-disabled="false"]:focus {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-8:focus-within {
+.emotion-9:focus-within {
   border-color: #792dd4;
 }
 
-.emotion-8[data-size='small'] {
+.emotion-9[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-8[data-size='medium'] {
+.emotion-9[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-8[data-size='large'] {
+.emotion-9[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
@@ -3582,20 +3593,20 @@ exports[`TimeInput > renders correctly controlled - 24-hours format 1`] = `
   user-select: none;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-9[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+.emotion-9[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
   border-color: #92103f;
 }
 
-.emotion-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3618,7 +3629,7 @@ exports[`TimeInput > renders correctly controlled - 24-hours format 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3641,7 +3652,7 @@ exports[`TimeInput > renders correctly controlled - 24-hours format 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-14 {
+.emotion-15 {
   border: none;
   outline: none;
   background: transparent;
@@ -3654,30 +3665,30 @@ exports[`TimeInput > renders correctly controlled - 24-hours format 1`] = `
   caret-color: transparent;
 }
 
-.emotion-14[data-size='large'] {
+.emotion-15[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-14:not(:disabled):hover {
+.emotion-15:not(:disabled):hover {
   background-color: #e9eaeb;
   color: #727683;
 }
 
-.emotion-14:not(:disabled):active,
-.emotion-14:not(:disabled):focus {
+.emotion-15:not(:disabled):active,
+.emotion-15:not(:disabled):focus {
   background-color: #e9eaeb;
   color: #3f4250;
 }
 
-.emotion-14:-moz-read-only {
+.emotion-15:-moz-read-only {
   cursor: default;
 }
 
-.emotion-14:read-only {
+.emotion-15:read-only {
   cursor: default;
 }
 
-.emotion-14:disabled {
+.emotion-15:disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -3685,19 +3696,19 @@ exports[`TimeInput > renders correctly controlled - 24-hours format 1`] = `
   user-select: none;
 }
 
-.emotion-14[data-period="true"] {
+.emotion-15[data-period="true"] {
   color: #727683;
 }
 
-.emotion-14::-moz-selection {
+.emotion-15::-moz-selection {
   background: none;
 }
 
-.emotion-14::selection {
+.emotion-15::selection {
   background: none;
 }
 
-.emotion-14 {
+.emotion-15 {
   border: none;
   outline: none;
   background: transparent;
@@ -3710,30 +3721,30 @@ exports[`TimeInput > renders correctly controlled - 24-hours format 1`] = `
   caret-color: transparent;
 }
 
-.emotion-14[data-size='large'] {
+.emotion-15[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-14:not(:disabled):hover {
+.emotion-15:not(:disabled):hover {
   background-color: #e9eaeb;
   color: #727683;
 }
 
-.emotion-14:not(:disabled):active,
-.emotion-14:not(:disabled):focus {
+.emotion-15:not(:disabled):active,
+.emotion-15:not(:disabled):focus {
   background-color: #e9eaeb;
   color: #3f4250;
 }
 
-.emotion-14:-moz-read-only {
+.emotion-15:-moz-read-only {
   cursor: default;
 }
 
-.emotion-14:read-only {
+.emotion-15:read-only {
   cursor: default;
 }
 
-.emotion-14:disabled {
+.emotion-15:disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -3741,19 +3752,19 @@ exports[`TimeInput > renders correctly controlled - 24-hours format 1`] = `
   user-select: none;
 }
 
-.emotion-14[data-period="true"] {
+.emotion-15[data-period="true"] {
   color: #727683;
 }
 
-.emotion-14::-moz-selection {
+.emotion-15::-moz-selection {
   background: none;
 }
 
-.emotion-14::selection {
+.emotion-15::selection {
   background: none;
 }
 
-.emotion-17 {
+.emotion-18 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -3766,7 +3777,7 @@ exports[`TimeInput > renders correctly controlled - 24-hours format 1`] = `
   padding-inline: 0.125rem;
 }
 
-.emotion-17 {
+.emotion-18 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -3779,7 +3790,7 @@ exports[`TimeInput > renders correctly controlled - 24-hours format 1`] = `
   padding-inline: 0.125rem;
 }
 
-.emotion-30 {
+.emotion-31 {
   color: #727683;
   font-size: 0.75rem;
   font-family: Inter,Asap,sans-serif;
@@ -3791,7 +3802,7 @@ exports[`TimeInput > renders correctly controlled - 24-hours format 1`] = `
   text-decoration: none;
 }
 
-.emotion-30 {
+.emotion-31 {
   color: #727683;
   font-size: 0.75rem;
   font-family: Inter,Asap,sans-serif;
@@ -3813,35 +3824,35 @@ exports[`TimeInput > renders correctly controlled - 24-hours format 1`] = `
         class="emotion-2 emotion-1"
       >
         <label
-          class="emotion-4 emotion-5"
+          class="emotion-4 emotion-5 emotion-6"
           for=":r1n:"
         >
           label
         </label>
         <span
-          class="emotion-6 emotion-5"
+          class="emotion-7 emotion-6"
         >
           labeldescription
         </span>
       </div>
       <div
-        class="emotion-8 emotion-9"
+        class="emotion-9 emotion-10"
         data-disabled="false"
         data-error="false"
         data-readonly="false"
         data-size="medium"
       >
         <div
-          class="emotion-10 emotion-1"
+          class="emotion-11 emotion-1"
         >
           <div
-            class="emotion-10 emotion-1"
+            class="emotion-11 emotion-1"
           >
             <input
               aria-valuemax="23"
               aria-valuemin="0"
               aria-valuenow="23"
-              class="emotion-14 emotion-15"
+              class="emotion-15 emotion-16"
               data-size="medium"
               data-testid="hours-input"
               placeholder="00"
@@ -3849,19 +3860,19 @@ exports[`TimeInput > renders correctly controlled - 24-hours format 1`] = `
               value="23"
             />
             <span
-              class="emotion-16 emotion-17 emotion-5"
+              class="emotion-17 emotion-18 emotion-6"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-10 emotion-1"
+            class="emotion-11 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
               aria-valuenow="32"
-              class="emotion-14 emotion-15"
+              class="emotion-15 emotion-16"
               data-size="medium"
               data-testid="minutes-input"
               placeholder="00"
@@ -3869,19 +3880,19 @@ exports[`TimeInput > renders correctly controlled - 24-hours format 1`] = `
               value="32"
             />
             <span
-              class="emotion-16 emotion-17 emotion-5"
+              class="emotion-17 emotion-18 emotion-6"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-10 emotion-1"
+            class="emotion-11 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
               aria-valuenow="31"
-              class="emotion-14 emotion-15"
+              class="emotion-15 emotion-16"
               data-size="medium"
               data-testid="seconds-input"
               placeholder="00"
@@ -3892,7 +3903,7 @@ exports[`TimeInput > renders correctly controlled - 24-hours format 1`] = `
         </div>
       </div>
       <p
-        class="emotion-30 emotion-5"
+        class="emotion-31 emotion-6"
       >
         helper
       </p>
@@ -3926,8 +3937,8 @@ exports[`TimeInput > renders correctly disabled 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -3936,9 +3947,10 @@ exports[`TimeInput > renders correctly disabled 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3970,41 +3982,41 @@ exports[`TimeInput > renders correctly disabled 1`] = `
   border: 1px solid #d9dadd;
 }
 
-.emotion-4:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-5:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-4[data-disabled="false"]:hover,
-.emotion-4 [data-disabled="false"]:focus {
+.emotion-5[data-disabled="false"]:hover,
+.emotion-5 [data-disabled="false"]:focus {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-4:focus-within {
+.emotion-5:focus-within {
   border-color: #792dd4;
 }
 
-.emotion-4[data-size='small'] {
+.emotion-5[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-4[data-size='medium'] {
+.emotion-5[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-4[data-size='large'] {
+.emotion-5[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-4[data-readonly='true'] {
+.emotion-5[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-4[data-disabled='true'] {
+.emotion-5[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
@@ -4014,20 +4026,20 @@ exports[`TimeInput > renders correctly disabled 1`] = `
   user-select: none;
 }
 
-.emotion-4[data-error='true'] {
+.emotion-5[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-4[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-5[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-4[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+.emotion-5[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
   border-color: #92103f;
 }
 
-.emotion-6 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4050,7 +4062,7 @@ exports[`TimeInput > renders correctly disabled 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-10 {
+.emotion-11 {
   border: none;
   outline: none;
   background: transparent;
@@ -4063,30 +4075,30 @@ exports[`TimeInput > renders correctly disabled 1`] = `
   caret-color: transparent;
 }
 
-.emotion-10[data-size='large'] {
+.emotion-11[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-10:not(:disabled):hover {
+.emotion-11:not(:disabled):hover {
   background-color: #e9eaeb;
   color: #727683;
 }
 
-.emotion-10:not(:disabled):active,
-.emotion-10:not(:disabled):focus {
+.emotion-11:not(:disabled):active,
+.emotion-11:not(:disabled):focus {
   background-color: #e9eaeb;
   color: #3f4250;
 }
 
-.emotion-10:-moz-read-only {
+.emotion-11:-moz-read-only {
   cursor: default;
 }
 
-.emotion-10:read-only {
+.emotion-11:read-only {
   cursor: default;
 }
 
-.emotion-10:disabled {
+.emotion-11:disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -4094,19 +4106,19 @@ exports[`TimeInput > renders correctly disabled 1`] = `
   user-select: none;
 }
 
-.emotion-10[data-period="true"] {
+.emotion-11[data-period="true"] {
   color: #727683;
 }
 
-.emotion-10::-moz-selection {
+.emotion-11::-moz-selection {
   background: none;
 }
 
-.emotion-10::selection {
+.emotion-11::selection {
   background: none;
 }
 
-.emotion-13 {
+.emotion-14 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -4126,28 +4138,28 @@ exports[`TimeInput > renders correctly disabled 1`] = `
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
         for=":r3:"
       >
         test
       </label>
       <div
-        class="emotion-4 emotion-5"
+        class="emotion-5 emotion-6"
         data-disabled="true"
         data-error="false"
         data-readonly="false"
         data-size="medium"
       >
         <div
-          class="emotion-6 emotion-1"
+          class="emotion-7 emotion-1"
         >
           <div
-            class="emotion-6 emotion-1"
+            class="emotion-7 emotion-1"
           >
             <input
               aria-valuemax="23"
               aria-valuemin="0"
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
               data-size="medium"
               data-testid="hours-input"
               disabled=""
@@ -4156,18 +4168,18 @@ exports[`TimeInput > renders correctly disabled 1`] = `
               value=""
             />
             <span
-              class="emotion-12 emotion-13 emotion-3"
+              class="emotion-13 emotion-14 emotion-4"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-6 emotion-1"
+            class="emotion-7 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
               data-size="medium"
               data-testid="minutes-input"
               disabled=""
@@ -4176,18 +4188,18 @@ exports[`TimeInput > renders correctly disabled 1`] = `
               value=""
             />
             <span
-              class="emotion-12 emotion-13 emotion-3"
+              class="emotion-13 emotion-14 emotion-4"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-6 emotion-1"
+            class="emotion-7 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
               data-size="medium"
               data-testid="seconds-input"
               disabled=""
@@ -4228,8 +4240,8 @@ exports[`TimeInput > renders correctly large 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -4238,9 +4250,10 @@ exports[`TimeInput > renders correctly large 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4272,41 +4285,41 @@ exports[`TimeInput > renders correctly large 1`] = `
   border: 1px solid #d9dadd;
 }
 
-.emotion-4:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-5:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-4[data-disabled="false"]:hover,
-.emotion-4 [data-disabled="false"]:focus {
+.emotion-5[data-disabled="false"]:hover,
+.emotion-5 [data-disabled="false"]:focus {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-4:focus-within {
+.emotion-5:focus-within {
   border-color: #792dd4;
 }
 
-.emotion-4[data-size='small'] {
+.emotion-5[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-4[data-size='medium'] {
+.emotion-5[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-4[data-size='large'] {
+.emotion-5[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-4[data-readonly='true'] {
+.emotion-5[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-4[data-disabled='true'] {
+.emotion-5[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
@@ -4316,20 +4329,20 @@ exports[`TimeInput > renders correctly large 1`] = `
   user-select: none;
 }
 
-.emotion-4[data-error='true'] {
+.emotion-5[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-4[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-5[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-4[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+.emotion-5[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
   border-color: #92103f;
 }
 
-.emotion-6 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4352,7 +4365,7 @@ exports[`TimeInput > renders correctly large 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-10 {
+.emotion-11 {
   border: none;
   outline: none;
   background: transparent;
@@ -4365,30 +4378,30 @@ exports[`TimeInput > renders correctly large 1`] = `
   caret-color: transparent;
 }
 
-.emotion-10[data-size='large'] {
+.emotion-11[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-10:not(:disabled):hover {
+.emotion-11:not(:disabled):hover {
   background-color: #e9eaeb;
   color: #727683;
 }
 
-.emotion-10:not(:disabled):active,
-.emotion-10:not(:disabled):focus {
+.emotion-11:not(:disabled):active,
+.emotion-11:not(:disabled):focus {
   background-color: #e9eaeb;
   color: #3f4250;
 }
 
-.emotion-10:-moz-read-only {
+.emotion-11:-moz-read-only {
   cursor: default;
 }
 
-.emotion-10:read-only {
+.emotion-11:read-only {
   cursor: default;
 }
 
-.emotion-10:disabled {
+.emotion-11:disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -4396,19 +4409,19 @@ exports[`TimeInput > renders correctly large 1`] = `
   user-select: none;
 }
 
-.emotion-10[data-period="true"] {
+.emotion-11[data-period="true"] {
   color: #727683;
 }
 
-.emotion-10::-moz-selection {
+.emotion-11::-moz-selection {
   background: none;
 }
 
-.emotion-10::selection {
+.emotion-11::selection {
   background: none;
 }
 
-.emotion-13 {
+.emotion-14 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -4428,28 +4441,28 @@ exports[`TimeInput > renders correctly large 1`] = `
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
         for=":ru:"
       >
         test
       </label>
       <div
-        class="emotion-4 emotion-5"
+        class="emotion-5 emotion-6"
         data-disabled="false"
         data-error="false"
         data-readonly="false"
         data-size="large"
       >
         <div
-          class="emotion-6 emotion-1"
+          class="emotion-7 emotion-1"
         >
           <div
-            class="emotion-6 emotion-1"
+            class="emotion-7 emotion-1"
           >
             <input
               aria-valuemax="23"
               aria-valuemin="0"
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
               data-size="large"
               data-testid="hours-input"
               placeholder="00"
@@ -4457,18 +4470,18 @@ exports[`TimeInput > renders correctly large 1`] = `
               value=""
             />
             <span
-              class="emotion-12 emotion-13 emotion-3"
+              class="emotion-13 emotion-14 emotion-4"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-6 emotion-1"
+            class="emotion-7 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
               data-size="large"
               data-testid="minutes-input"
               placeholder="00"
@@ -4476,18 +4489,18 @@ exports[`TimeInput > renders correctly large 1`] = `
               value=""
             />
             <span
-              class="emotion-12 emotion-13 emotion-3"
+              class="emotion-13 emotion-14 emotion-4"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-6 emotion-1"
+            class="emotion-7 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
               data-size="large"
               data-testid="seconds-input"
               placeholder="00"
@@ -4527,8 +4540,8 @@ exports[`TimeInput > renders correctly readOnly 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -4537,9 +4550,10 @@ exports[`TimeInput > renders correctly readOnly 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4571,41 +4585,41 @@ exports[`TimeInput > renders correctly readOnly 1`] = `
   border: 1px solid #d9dadd;
 }
 
-.emotion-4:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-5:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-4[data-disabled="false"]:hover,
-.emotion-4 [data-disabled="false"]:focus {
+.emotion-5[data-disabled="false"]:hover,
+.emotion-5 [data-disabled="false"]:focus {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-4:focus-within {
+.emotion-5:focus-within {
   border-color: #792dd4;
 }
 
-.emotion-4[data-size='small'] {
+.emotion-5[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-4[data-size='medium'] {
+.emotion-5[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-4[data-size='large'] {
+.emotion-5[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-4[data-readonly='true'] {
+.emotion-5[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-4[data-disabled='true'] {
+.emotion-5[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
@@ -4615,20 +4629,20 @@ exports[`TimeInput > renders correctly readOnly 1`] = `
   user-select: none;
 }
 
-.emotion-4[data-error='true'] {
+.emotion-5[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-4[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-5[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-4[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+.emotion-5[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
   border-color: #92103f;
 }
 
-.emotion-6 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4651,7 +4665,7 @@ exports[`TimeInput > renders correctly readOnly 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-10 {
+.emotion-11 {
   border: none;
   outline: none;
   background: transparent;
@@ -4664,30 +4678,30 @@ exports[`TimeInput > renders correctly readOnly 1`] = `
   caret-color: transparent;
 }
 
-.emotion-10[data-size='large'] {
+.emotion-11[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-10:not(:disabled):hover {
+.emotion-11:not(:disabled):hover {
   background-color: #e9eaeb;
   color: #727683;
 }
 
-.emotion-10:not(:disabled):active,
-.emotion-10:not(:disabled):focus {
+.emotion-11:not(:disabled):active,
+.emotion-11:not(:disabled):focus {
   background-color: #e9eaeb;
   color: #3f4250;
 }
 
-.emotion-10:-moz-read-only {
+.emotion-11:-moz-read-only {
   cursor: default;
 }
 
-.emotion-10:read-only {
+.emotion-11:read-only {
   cursor: default;
 }
 
-.emotion-10:disabled {
+.emotion-11:disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -4695,19 +4709,19 @@ exports[`TimeInput > renders correctly readOnly 1`] = `
   user-select: none;
 }
 
-.emotion-10[data-period="true"] {
+.emotion-11[data-period="true"] {
   color: #727683;
 }
 
-.emotion-10::-moz-selection {
+.emotion-11::-moz-selection {
   background: none;
 }
 
-.emotion-10::selection {
+.emotion-11::selection {
   background: none;
 }
 
-.emotion-13 {
+.emotion-14 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -4727,28 +4741,28 @@ exports[`TimeInput > renders correctly readOnly 1`] = `
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
         for=":r7:"
       >
         test
       </label>
       <div
-        class="emotion-4 emotion-5"
+        class="emotion-5 emotion-6"
         data-disabled="false"
         data-error="false"
         data-readonly="true"
         data-size="medium"
       >
         <div
-          class="emotion-6 emotion-1"
+          class="emotion-7 emotion-1"
         >
           <div
-            class="emotion-6 emotion-1"
+            class="emotion-7 emotion-1"
           >
             <input
               aria-valuemax="23"
               aria-valuemin="0"
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
               data-size="medium"
               data-testid="hours-input"
               placeholder="00"
@@ -4757,18 +4771,18 @@ exports[`TimeInput > renders correctly readOnly 1`] = `
               value=""
             />
             <span
-              class="emotion-12 emotion-13 emotion-3"
+              class="emotion-13 emotion-14 emotion-4"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-6 emotion-1"
+            class="emotion-7 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
               data-size="medium"
               data-testid="minutes-input"
               placeholder="00"
@@ -4777,18 +4791,18 @@ exports[`TimeInput > renders correctly readOnly 1`] = `
               value=""
             />
             <span
-              class="emotion-12 emotion-13 emotion-3"
+              class="emotion-13 emotion-14 emotion-4"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-6 emotion-1"
+            class="emotion-7 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
               data-size="medium"
               data-testid="seconds-input"
               placeholder="00"
@@ -4852,8 +4866,8 @@ exports[`TimeInput > renders correctly required 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -4862,9 +4876,10 @@ exports[`TimeInput > renders correctly required 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-6 {
+.emotion-7 {
   color: #b3144d;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
@@ -4876,7 +4891,7 @@ exports[`TimeInput > renders correctly required 1`] = `
   text-decoration: none;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4908,41 +4923,41 @@ exports[`TimeInput > renders correctly required 1`] = `
   border: 1px solid #d9dadd;
 }
 
-.emotion-8:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-9:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-8[data-disabled="false"]:hover,
-.emotion-8 [data-disabled="false"]:focus {
+.emotion-9[data-disabled="false"]:hover,
+.emotion-9 [data-disabled="false"]:focus {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-8:focus-within {
+.emotion-9:focus-within {
   border-color: #792dd4;
 }
 
-.emotion-8[data-size='small'] {
+.emotion-9[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-8[data-size='medium'] {
+.emotion-9[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-8[data-size='large'] {
+.emotion-9[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
@@ -4952,20 +4967,20 @@ exports[`TimeInput > renders correctly required 1`] = `
   user-select: none;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-9[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+.emotion-9[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
   border-color: #92103f;
 }
 
-.emotion-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4988,7 +5003,7 @@ exports[`TimeInput > renders correctly required 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-14 {
+.emotion-15 {
   border: none;
   outline: none;
   background: transparent;
@@ -5001,30 +5016,30 @@ exports[`TimeInput > renders correctly required 1`] = `
   caret-color: transparent;
 }
 
-.emotion-14[data-size='large'] {
+.emotion-15[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-14:not(:disabled):hover {
+.emotion-15:not(:disabled):hover {
   background-color: #e9eaeb;
   color: #727683;
 }
 
-.emotion-14:not(:disabled):active,
-.emotion-14:not(:disabled):focus {
+.emotion-15:not(:disabled):active,
+.emotion-15:not(:disabled):focus {
   background-color: #e9eaeb;
   color: #3f4250;
 }
 
-.emotion-14:-moz-read-only {
+.emotion-15:-moz-read-only {
   cursor: default;
 }
 
-.emotion-14:read-only {
+.emotion-15:read-only {
   cursor: default;
 }
 
-.emotion-14:disabled {
+.emotion-15:disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -5032,19 +5047,19 @@ exports[`TimeInput > renders correctly required 1`] = `
   user-select: none;
 }
 
-.emotion-14[data-period="true"] {
+.emotion-15[data-period="true"] {
   color: #727683;
 }
 
-.emotion-14::-moz-selection {
+.emotion-15::-moz-selection {
   background: none;
 }
 
-.emotion-14::selection {
+.emotion-15::selection {
   background: none;
 }
 
-.emotion-17 {
+.emotion-18 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -5067,35 +5082,35 @@ exports[`TimeInput > renders correctly required 1`] = `
         class="emotion-2 emotion-1"
       >
         <label
-          class="emotion-4 emotion-5"
+          class="emotion-4 emotion-5 emotion-6"
           for=":rl:"
         >
           test
         </label>
         <span
-          class="emotion-6 emotion-5"
+          class="emotion-7 emotion-6"
         >
           *
         </span>
       </div>
       <div
         aria-required="true"
-        class="emotion-8 emotion-9"
+        class="emotion-9 emotion-10"
         data-disabled="false"
         data-error="false"
         data-readonly="false"
         data-size="medium"
       >
         <div
-          class="emotion-10 emotion-1"
+          class="emotion-11 emotion-1"
         >
           <div
-            class="emotion-10 emotion-1"
+            class="emotion-11 emotion-1"
           >
             <input
               aria-valuemax="23"
               aria-valuemin="0"
-              class="emotion-14 emotion-15"
+              class="emotion-15 emotion-16"
               data-size="medium"
               data-testid="hours-input"
               placeholder="00"
@@ -5103,18 +5118,18 @@ exports[`TimeInput > renders correctly required 1`] = `
               value=""
             />
             <span
-              class="emotion-16 emotion-17 emotion-5"
+              class="emotion-17 emotion-18 emotion-6"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-10 emotion-1"
+            class="emotion-11 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
-              class="emotion-14 emotion-15"
+              class="emotion-15 emotion-16"
               data-size="medium"
               data-testid="minutes-input"
               placeholder="00"
@@ -5122,18 +5137,18 @@ exports[`TimeInput > renders correctly required 1`] = `
               value=""
             />
             <span
-              class="emotion-16 emotion-17 emotion-5"
+              class="emotion-17 emotion-18 emotion-6"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-10 emotion-1"
+            class="emotion-11 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
-              class="emotion-14 emotion-15"
+              class="emotion-15 emotion-16"
               data-size="medium"
               data-testid="seconds-input"
               placeholder="00"
@@ -5173,8 +5188,8 @@ exports[`TimeInput > renders correctly small 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -5183,9 +5198,10 @@ exports[`TimeInput > renders correctly small 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5217,41 +5233,41 @@ exports[`TimeInput > renders correctly small 1`] = `
   border: 1px solid #d9dadd;
 }
 
-.emotion-4:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-5:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-4[data-disabled="false"]:hover,
-.emotion-4 [data-disabled="false"]:focus {
+.emotion-5[data-disabled="false"]:hover,
+.emotion-5 [data-disabled="false"]:focus {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-4:focus-within {
+.emotion-5:focus-within {
   border-color: #792dd4;
 }
 
-.emotion-4[data-size='small'] {
+.emotion-5[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-4[data-size='medium'] {
+.emotion-5[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-4[data-size='large'] {
+.emotion-5[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-4[data-readonly='true'] {
+.emotion-5[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-4[data-disabled='true'] {
+.emotion-5[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
@@ -5261,20 +5277,20 @@ exports[`TimeInput > renders correctly small 1`] = `
   user-select: none;
 }
 
-.emotion-4[data-error='true'] {
+.emotion-5[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-4[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-5[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-4[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+.emotion-5[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
   border-color: #92103f;
 }
 
-.emotion-6 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5297,7 +5313,7 @@ exports[`TimeInput > renders correctly small 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-10 {
+.emotion-11 {
   border: none;
   outline: none;
   background: transparent;
@@ -5310,30 +5326,30 @@ exports[`TimeInput > renders correctly small 1`] = `
   caret-color: transparent;
 }
 
-.emotion-10[data-size='large'] {
+.emotion-11[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-10:not(:disabled):hover {
+.emotion-11:not(:disabled):hover {
   background-color: #e9eaeb;
   color: #727683;
 }
 
-.emotion-10:not(:disabled):active,
-.emotion-10:not(:disabled):focus {
+.emotion-11:not(:disabled):active,
+.emotion-11:not(:disabled):focus {
   background-color: #e9eaeb;
   color: #3f4250;
 }
 
-.emotion-10:-moz-read-only {
+.emotion-11:-moz-read-only {
   cursor: default;
 }
 
-.emotion-10:read-only {
+.emotion-11:read-only {
   cursor: default;
 }
 
-.emotion-10:disabled {
+.emotion-11:disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -5341,19 +5357,19 @@ exports[`TimeInput > renders correctly small 1`] = `
   user-select: none;
 }
 
-.emotion-10[data-period="true"] {
+.emotion-11[data-period="true"] {
   color: #727683;
 }
 
-.emotion-10::-moz-selection {
+.emotion-11::-moz-selection {
   background: none;
 }
 
-.emotion-10::selection {
+.emotion-11::selection {
   background: none;
 }
 
-.emotion-13 {
+.emotion-14 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -5373,28 +5389,28 @@ exports[`TimeInput > renders correctly small 1`] = `
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
         for=":rq:"
       >
         test
       </label>
       <div
-        class="emotion-4 emotion-5"
+        class="emotion-5 emotion-6"
         data-disabled="false"
         data-error="false"
         data-readonly="false"
         data-size="small"
       >
         <div
-          class="emotion-6 emotion-1"
+          class="emotion-7 emotion-1"
         >
           <div
-            class="emotion-6 emotion-1"
+            class="emotion-7 emotion-1"
           >
             <input
               aria-valuemax="23"
               aria-valuemin="0"
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
               data-size="small"
               data-testid="hours-input"
               placeholder="00"
@@ -5402,18 +5418,18 @@ exports[`TimeInput > renders correctly small 1`] = `
               value=""
             />
             <span
-              class="emotion-12 emotion-13 emotion-3"
+              class="emotion-13 emotion-14 emotion-4"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-6 emotion-1"
+            class="emotion-7 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
               data-size="small"
               data-testid="minutes-input"
               placeholder="00"
@@ -5421,18 +5437,18 @@ exports[`TimeInput > renders correctly small 1`] = `
               value=""
             />
             <span
-              class="emotion-12 emotion-13 emotion-3"
+              class="emotion-13 emotion-14 emotion-4"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-6 emotion-1"
+            class="emotion-7 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
               data-size="small"
               data-testid="seconds-input"
               placeholder="00"
@@ -5472,8 +5488,8 @@ exports[`TimeInput > renders correctly with 12-hour format 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -5482,9 +5498,10 @@ exports[`TimeInput > renders correctly with 12-hour format 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5516,41 +5533,41 @@ exports[`TimeInput > renders correctly with 12-hour format 1`] = `
   border: 1px solid #d9dadd;
 }
 
-.emotion-4:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-5:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-4[data-disabled="false"]:hover,
-.emotion-4 [data-disabled="false"]:focus {
+.emotion-5[data-disabled="false"]:hover,
+.emotion-5 [data-disabled="false"]:focus {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-4:focus-within {
+.emotion-5:focus-within {
   border-color: #792dd4;
 }
 
-.emotion-4[data-size='small'] {
+.emotion-5[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-4[data-size='medium'] {
+.emotion-5[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-4[data-size='large'] {
+.emotion-5[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-4[data-readonly='true'] {
+.emotion-5[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-4[data-disabled='true'] {
+.emotion-5[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
@@ -5560,20 +5577,20 @@ exports[`TimeInput > renders correctly with 12-hour format 1`] = `
   user-select: none;
 }
 
-.emotion-4[data-error='true'] {
+.emotion-5[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-4[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-5[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-4[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+.emotion-5[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
   border-color: #92103f;
 }
 
-.emotion-6 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5596,7 +5613,7 @@ exports[`TimeInput > renders correctly with 12-hour format 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-10 {
+.emotion-11 {
   border: none;
   outline: none;
   background: transparent;
@@ -5609,30 +5626,30 @@ exports[`TimeInput > renders correctly with 12-hour format 1`] = `
   caret-color: transparent;
 }
 
-.emotion-10[data-size='large'] {
+.emotion-11[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-10:not(:disabled):hover {
+.emotion-11:not(:disabled):hover {
   background-color: #e9eaeb;
   color: #727683;
 }
 
-.emotion-10:not(:disabled):active,
-.emotion-10:not(:disabled):focus {
+.emotion-11:not(:disabled):active,
+.emotion-11:not(:disabled):focus {
   background-color: #e9eaeb;
   color: #3f4250;
 }
 
-.emotion-10:-moz-read-only {
+.emotion-11:-moz-read-only {
   cursor: default;
 }
 
-.emotion-10:read-only {
+.emotion-11:read-only {
   cursor: default;
 }
 
-.emotion-10:disabled {
+.emotion-11:disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -5640,19 +5657,19 @@ exports[`TimeInput > renders correctly with 12-hour format 1`] = `
   user-select: none;
 }
 
-.emotion-10[data-period="true"] {
+.emotion-11[data-period="true"] {
   color: #727683;
 }
 
-.emotion-10::-moz-selection {
+.emotion-11::-moz-selection {
   background: none;
 }
 
-.emotion-10::selection {
+.emotion-11::selection {
   background: none;
 }
 
-.emotion-13 {
+.emotion-14 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -5672,28 +5689,28 @@ exports[`TimeInput > renders correctly with 12-hour format 1`] = `
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
         for=":r12:"
       >
         test
       </label>
       <div
-        class="emotion-4 emotion-5"
+        class="emotion-5 emotion-6"
         data-disabled="false"
         data-error="false"
         data-readonly="false"
         data-size="medium"
       >
         <div
-          class="emotion-6 emotion-1"
+          class="emotion-7 emotion-1"
         >
           <div
-            class="emotion-6 emotion-1"
+            class="emotion-7 emotion-1"
           >
             <input
               aria-valuemax="12"
               aria-valuemin="1"
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
               data-size="medium"
               data-testid="hours-input"
               placeholder="00"
@@ -5701,18 +5718,18 @@ exports[`TimeInput > renders correctly with 12-hour format 1`] = `
               value=""
             />
             <span
-              class="emotion-12 emotion-13 emotion-3"
+              class="emotion-13 emotion-14 emotion-4"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-6 emotion-1"
+            class="emotion-7 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
               data-size="medium"
               data-testid="minutes-input"
               placeholder="00"
@@ -5720,18 +5737,18 @@ exports[`TimeInput > renders correctly with 12-hour format 1`] = `
               value=""
             />
             <span
-              class="emotion-12 emotion-13 emotion-3"
+              class="emotion-13 emotion-14 emotion-4"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-6 emotion-1"
+            class="emotion-7 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
               data-size="medium"
               data-testid="seconds-input"
               placeholder="00"
@@ -5743,7 +5760,7 @@ exports[`TimeInput > renders correctly with 12-hour format 1`] = `
             aria-valuemax="12"
             aria-valuemin="0"
             aria-valuenow="12"
-            class="emotion-10 emotion-11"
+            class="emotion-11 emotion-12"
             data-period="true"
             data-size="medium"
             data-testid="am-pm-input"
@@ -6063,8 +6080,8 @@ exports[`TimeInput > renders correctly with error 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -6073,9 +6090,10 @@ exports[`TimeInput > renders correctly with error 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6107,41 +6125,41 @@ exports[`TimeInput > renders correctly with error 1`] = `
   border: 1px solid #d9dadd;
 }
 
-.emotion-4:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-5:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-4[data-disabled="false"]:hover,
-.emotion-4 [data-disabled="false"]:focus {
+.emotion-5[data-disabled="false"]:hover,
+.emotion-5 [data-disabled="false"]:focus {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-4:focus-within {
+.emotion-5:focus-within {
   border-color: #792dd4;
 }
 
-.emotion-4[data-size='small'] {
+.emotion-5[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-4[data-size='medium'] {
+.emotion-5[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-4[data-size='large'] {
+.emotion-5[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-4[data-readonly='true'] {
+.emotion-5[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-4[data-disabled='true'] {
+.emotion-5[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
@@ -6151,20 +6169,20 @@ exports[`TimeInput > renders correctly with error 1`] = `
   user-select: none;
 }
 
-.emotion-4[data-error='true'] {
+.emotion-5[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-4[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-5[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-4[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+.emotion-5[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
   border-color: #92103f;
 }
 
-.emotion-6 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6187,7 +6205,7 @@ exports[`TimeInput > renders correctly with error 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-10 {
+.emotion-11 {
   border: none;
   outline: none;
   background: transparent;
@@ -6200,30 +6218,30 @@ exports[`TimeInput > renders correctly with error 1`] = `
   caret-color: transparent;
 }
 
-.emotion-10[data-size='large'] {
+.emotion-11[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-10:not(:disabled):hover {
+.emotion-11:not(:disabled):hover {
   background-color: #e9eaeb;
   color: #727683;
 }
 
-.emotion-10:not(:disabled):active,
-.emotion-10:not(:disabled):focus {
+.emotion-11:not(:disabled):active,
+.emotion-11:not(:disabled):focus {
   background-color: #e9eaeb;
   color: #3f4250;
 }
 
-.emotion-10:-moz-read-only {
+.emotion-11:-moz-read-only {
   cursor: default;
 }
 
-.emotion-10:read-only {
+.emotion-11:read-only {
   cursor: default;
 }
 
-.emotion-10:disabled {
+.emotion-11:disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -6231,19 +6249,19 @@ exports[`TimeInput > renders correctly with error 1`] = `
   user-select: none;
 }
 
-.emotion-10[data-period="true"] {
+.emotion-11[data-period="true"] {
   color: #727683;
 }
 
-.emotion-10::-moz-selection {
+.emotion-11::-moz-selection {
   background: none;
 }
 
-.emotion-10::selection {
+.emotion-11::selection {
   background: none;
 }
 
-.emotion-13 {
+.emotion-14 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -6256,7 +6274,7 @@ exports[`TimeInput > renders correctly with error 1`] = `
   padding-inline: 0.125rem;
 }
 
-.emotion-26 {
+.emotion-27 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6279,7 +6297,7 @@ exports[`TimeInput > renders correctly with error 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-28 {
+.emotion-29 {
   vertical-align: middle;
   fill: #b3144d;
   height: 1rem;
@@ -6288,12 +6306,12 @@ exports[`TimeInput > renders correctly with error 1`] = `
   min-height: 1rem;
 }
 
-.emotion-28 .fillStroke {
+.emotion-29 .fillStroke {
   stroke: #b3144d;
   fill: none;
 }
 
-.emotion-30 {
+.emotion-31 {
   color: #b3144d;
   font-size: 0.75rem;
   font-family: Inter,Asap,sans-serif;
@@ -6312,28 +6330,28 @@ exports[`TimeInput > renders correctly with error 1`] = `
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
         for=":rb:"
       >
         test
       </label>
       <div
-        class="emotion-4 emotion-5"
+        class="emotion-5 emotion-6"
         data-disabled="false"
         data-error="true"
         data-readonly="false"
         data-size="medium"
       >
         <div
-          class="emotion-6 emotion-1"
+          class="emotion-7 emotion-1"
         >
           <div
-            class="emotion-6 emotion-1"
+            class="emotion-7 emotion-1"
           >
             <input
               aria-valuemax="23"
               aria-valuemin="0"
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
               data-size="medium"
               data-testid="hours-input"
               placeholder="00"
@@ -6341,18 +6359,18 @@ exports[`TimeInput > renders correctly with error 1`] = `
               value=""
             />
             <span
-              class="emotion-12 emotion-13 emotion-3"
+              class="emotion-13 emotion-14 emotion-4"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-6 emotion-1"
+            class="emotion-7 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
               data-size="medium"
               data-testid="minutes-input"
               placeholder="00"
@@ -6360,18 +6378,18 @@ exports[`TimeInput > renders correctly with error 1`] = `
               value=""
             />
             <span
-              class="emotion-12 emotion-13 emotion-3"
+              class="emotion-13 emotion-14 emotion-4"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-6 emotion-1"
+            class="emotion-7 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
               data-size="medium"
               data-testid="seconds-input"
               placeholder="00"
@@ -6381,10 +6399,10 @@ exports[`TimeInput > renders correctly with error 1`] = `
           </div>
         </div>
         <div
-          class="emotion-26 emotion-1"
+          class="emotion-27 emotion-1"
         >
           <svg
-            class="emotion-28 emotion-29"
+            class="emotion-29 emotion-30"
             viewBox="0 0 20 20"
           >
             <path
@@ -6396,7 +6414,7 @@ exports[`TimeInput > renders correctly with error 1`] = `
         </div>
       </div>
       <p
-        class="emotion-30 emotion-3"
+        class="emotion-31 emotion-4"
       >
         error
       </p>
@@ -6453,8 +6471,8 @@ exports[`TimeInput > renders correctly with helper and error 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -6463,9 +6481,10 @@ exports[`TimeInput > renders correctly with helper and error 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-6 {
+.emotion-7 {
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -6476,7 +6495,7 @@ exports[`TimeInput > renders correctly with helper and error 1`] = `
   text-decoration: none;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6508,41 +6527,41 @@ exports[`TimeInput > renders correctly with helper and error 1`] = `
   border: 1px solid #d9dadd;
 }
 
-.emotion-8:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-9:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-8[data-disabled="false"]:hover,
-.emotion-8 [data-disabled="false"]:focus {
+.emotion-9[data-disabled="false"]:hover,
+.emotion-9 [data-disabled="false"]:focus {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-8:focus-within {
+.emotion-9:focus-within {
   border-color: #792dd4;
 }
 
-.emotion-8[data-size='small'] {
+.emotion-9[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-8[data-size='medium'] {
+.emotion-9[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-8[data-size='large'] {
+.emotion-9[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
@@ -6552,20 +6571,20 @@ exports[`TimeInput > renders correctly with helper and error 1`] = `
   user-select: none;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-9[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+.emotion-9[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
   border-color: #92103f;
 }
 
-.emotion-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6588,7 +6607,7 @@ exports[`TimeInput > renders correctly with helper and error 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-14 {
+.emotion-15 {
   border: none;
   outline: none;
   background: transparent;
@@ -6601,30 +6620,30 @@ exports[`TimeInput > renders correctly with helper and error 1`] = `
   caret-color: transparent;
 }
 
-.emotion-14[data-size='large'] {
+.emotion-15[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-14:not(:disabled):hover {
+.emotion-15:not(:disabled):hover {
   background-color: #e9eaeb;
   color: #727683;
 }
 
-.emotion-14:not(:disabled):active,
-.emotion-14:not(:disabled):focus {
+.emotion-15:not(:disabled):active,
+.emotion-15:not(:disabled):focus {
   background-color: #e9eaeb;
   color: #3f4250;
 }
 
-.emotion-14:-moz-read-only {
+.emotion-15:-moz-read-only {
   cursor: default;
 }
 
-.emotion-14:read-only {
+.emotion-15:read-only {
   cursor: default;
 }
 
-.emotion-14:disabled {
+.emotion-15:disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -6632,19 +6651,19 @@ exports[`TimeInput > renders correctly with helper and error 1`] = `
   user-select: none;
 }
 
-.emotion-14[data-period="true"] {
+.emotion-15[data-period="true"] {
   color: #727683;
 }
 
-.emotion-14::-moz-selection {
+.emotion-15::-moz-selection {
   background: none;
 }
 
-.emotion-14::selection {
+.emotion-15::selection {
   background: none;
 }
 
-.emotion-17 {
+.emotion-18 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -6657,7 +6676,7 @@ exports[`TimeInput > renders correctly with helper and error 1`] = `
   padding-inline: 0.125rem;
 }
 
-.emotion-32 {
+.emotion-33 {
   vertical-align: middle;
   fill: #b3144d;
   height: 1rem;
@@ -6666,12 +6685,12 @@ exports[`TimeInput > renders correctly with helper and error 1`] = `
   min-height: 1rem;
 }
 
-.emotion-32 .fillStroke {
+.emotion-33 .fillStroke {
   stroke: #b3144d;
   fill: none;
 }
 
-.emotion-34 {
+.emotion-35 {
   color: #b3144d;
   font-size: 0.75rem;
   font-family: Inter,Asap,sans-serif;
@@ -6693,34 +6712,34 @@ exports[`TimeInput > renders correctly with helper and error 1`] = `
         class="emotion-2 emotion-1"
       >
         <label
-          class="emotion-4 emotion-5"
+          class="emotion-4 emotion-5 emotion-6"
           for=":r1b:"
         >
           label
         </label>
         <span
-          class="emotion-6 emotion-5"
+          class="emotion-7 emotion-6"
         >
           label description
         </span>
       </div>
       <div
-        class="emotion-8 emotion-9"
+        class="emotion-9 emotion-10"
         data-disabled="false"
         data-error="true"
         data-readonly="false"
         data-size="medium"
       >
         <div
-          class="emotion-10 emotion-1"
+          class="emotion-11 emotion-1"
         >
           <div
-            class="emotion-10 emotion-1"
+            class="emotion-11 emotion-1"
           >
             <input
               aria-valuemax="23"
               aria-valuemin="0"
-              class="emotion-14 emotion-15"
+              class="emotion-15 emotion-16"
               data-size="medium"
               data-testid="hours-input"
               placeholder="00"
@@ -6728,18 +6747,18 @@ exports[`TimeInput > renders correctly with helper and error 1`] = `
               value=""
             />
             <span
-              class="emotion-16 emotion-17 emotion-5"
+              class="emotion-17 emotion-18 emotion-6"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-10 emotion-1"
+            class="emotion-11 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
-              class="emotion-14 emotion-15"
+              class="emotion-15 emotion-16"
               data-size="medium"
               data-testid="minutes-input"
               placeholder="00"
@@ -6747,18 +6766,18 @@ exports[`TimeInput > renders correctly with helper and error 1`] = `
               value=""
             />
             <span
-              class="emotion-16 emotion-17 emotion-5"
+              class="emotion-17 emotion-18 emotion-6"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-10 emotion-1"
+            class="emotion-11 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
-              class="emotion-14 emotion-15"
+              class="emotion-15 emotion-16"
               data-size="medium"
               data-testid="seconds-input"
               placeholder="00"
@@ -6771,7 +6790,7 @@ exports[`TimeInput > renders correctly with helper and error 1`] = `
           class="emotion-2 emotion-1"
         >
           <svg
-            class="emotion-32 emotion-33"
+            class="emotion-33 emotion-34"
             viewBox="0 0 20 20"
           >
             <path
@@ -6783,7 +6802,7 @@ exports[`TimeInput > renders correctly with helper and error 1`] = `
         </div>
       </div>
       <p
-        class="emotion-34 emotion-5"
+        class="emotion-35 emotion-6"
       />
     </div>
   </div>
@@ -6838,8 +6857,8 @@ exports[`TimeInput > renders correctly with label description and helper 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -6848,9 +6867,10 @@ exports[`TimeInput > renders correctly with label description and helper 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-6 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6882,41 +6902,41 @@ exports[`TimeInput > renders correctly with label description and helper 1`] = `
   border: 1px solid #d9dadd;
 }
 
-.emotion-6:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-7:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-6[data-disabled="false"]:hover,
-.emotion-6 [data-disabled="false"]:focus {
+.emotion-7[data-disabled="false"]:hover,
+.emotion-7 [data-disabled="false"]:focus {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-6:focus-within {
+.emotion-7:focus-within {
   border-color: #792dd4;
 }
 
-.emotion-6[data-size='small'] {
+.emotion-7[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-6[data-size='medium'] {
+.emotion-7[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-6[data-size='large'] {
+.emotion-7[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-6[data-readonly='true'] {
+.emotion-7[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-6[data-disabled='true'] {
+.emotion-7[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
@@ -6926,20 +6946,20 @@ exports[`TimeInput > renders correctly with label description and helper 1`] = `
   user-select: none;
 }
 
-.emotion-6[data-error='true'] {
+.emotion-7[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-6[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-7[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-6[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+.emotion-7[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
   border-color: #92103f;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6962,7 +6982,7 @@ exports[`TimeInput > renders correctly with label description and helper 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-12 {
+.emotion-13 {
   border: none;
   outline: none;
   background: transparent;
@@ -6975,30 +6995,30 @@ exports[`TimeInput > renders correctly with label description and helper 1`] = `
   caret-color: transparent;
 }
 
-.emotion-12[data-size='large'] {
+.emotion-13[data-size='large'] {
   font-size: 1rem;
 }
 
-.emotion-12:not(:disabled):hover {
+.emotion-13:not(:disabled):hover {
   background-color: #e9eaeb;
   color: #727683;
 }
 
-.emotion-12:not(:disabled):active,
-.emotion-12:not(:disabled):focus {
+.emotion-13:not(:disabled):active,
+.emotion-13:not(:disabled):focus {
   background-color: #e9eaeb;
   color: #3f4250;
 }
 
-.emotion-12:-moz-read-only {
+.emotion-13:-moz-read-only {
   cursor: default;
 }
 
-.emotion-12:read-only {
+.emotion-13:read-only {
   cursor: default;
 }
 
-.emotion-12:disabled {
+.emotion-13:disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -7006,19 +7026,19 @@ exports[`TimeInput > renders correctly with label description and helper 1`] = `
   user-select: none;
 }
 
-.emotion-12[data-period="true"] {
+.emotion-13[data-period="true"] {
   color: #727683;
 }
 
-.emotion-12::-moz-selection {
+.emotion-13::-moz-selection {
   background: none;
 }
 
-.emotion-12::selection {
+.emotion-13::selection {
   background: none;
 }
 
-.emotion-15 {
+.emotion-16 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -7031,7 +7051,7 @@ exports[`TimeInput > renders correctly with label description and helper 1`] = `
   padding-inline: 0.125rem;
 }
 
-.emotion-28 {
+.emotion-29 {
   color: #727683;
   font-size: 0.75rem;
   font-family: Inter,Asap,sans-serif;
@@ -7053,7 +7073,7 @@ exports[`TimeInput > renders correctly with label description and helper 1`] = `
         class="emotion-2 emotion-1"
       >
         <label
-          class="emotion-4 emotion-5"
+          class="emotion-4 emotion-5 emotion-6"
           for=":r16:"
         >
           label
@@ -7063,22 +7083,22 @@ exports[`TimeInput > renders correctly with label description and helper 1`] = `
         </h1>
       </div>
       <div
-        class="emotion-6 emotion-7"
+        class="emotion-7 emotion-8"
         data-disabled="false"
         data-error="false"
         data-readonly="false"
         data-size="medium"
       >
         <div
-          class="emotion-8 emotion-1"
+          class="emotion-9 emotion-1"
         >
           <div
-            class="emotion-8 emotion-1"
+            class="emotion-9 emotion-1"
           >
             <input
               aria-valuemax="23"
               aria-valuemin="0"
-              class="emotion-12 emotion-13"
+              class="emotion-13 emotion-14"
               data-size="medium"
               data-testid="hours-input"
               placeholder="00"
@@ -7086,18 +7106,18 @@ exports[`TimeInput > renders correctly with label description and helper 1`] = `
               value=""
             />
             <span
-              class="emotion-14 emotion-15 emotion-5"
+              class="emotion-15 emotion-16 emotion-6"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-8 emotion-1"
+            class="emotion-9 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
-              class="emotion-12 emotion-13"
+              class="emotion-13 emotion-14"
               data-size="medium"
               data-testid="minutes-input"
               placeholder="00"
@@ -7105,18 +7125,18 @@ exports[`TimeInput > renders correctly with label description and helper 1`] = `
               value=""
             />
             <span
-              class="emotion-14 emotion-15 emotion-5"
+              class="emotion-15 emotion-16 emotion-6"
             >
               :
             </span>
           </div>
           <div
-            class="emotion-8 emotion-1"
+            class="emotion-9 emotion-1"
           >
             <input
               aria-valuemax="59"
               aria-valuemin="0"
-              class="emotion-12 emotion-13"
+              class="emotion-13 emotion-14"
               data-size="medium"
               data-testid="seconds-input"
               placeholder="00"
@@ -7127,7 +7147,7 @@ exports[`TimeInput > renders correctly with label description and helper 1`] = `
         </div>
       </div>
       <p
-        class="emotion-28 emotion-5"
+        class="emotion-29 emotion-6"
       >
         helper
       </p>
diff --git a/packages/ui/src/components/UnitInput/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/UnitInput/__tests__/__snapshots__/index.test.tsx.snap
index 75fbd2bdd4..09504931a1 100644
--- a/packages/ui/src/components/UnitInput/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/UnitInput/__tests__/__snapshots__/index.test.tsx.snap
@@ -637,12 +637,16 @@ exports[`UnitInput > renders click 1`] = `
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-17[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-17[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-17[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-17[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-17[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -746,12 +750,16 @@ exports[`UnitInput > renders click 1`] = `
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-17[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-17[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-17[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-17[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-17[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -1172,7 +1180,7 @@ exports[`UnitInput > renders click 1`] = `
               aria-describedby=":rm:"
               class="emotion-13 emotion-14"
               data-container-full-width="true"
-              tabindex="0"
+              tabindex="-1"
             >
               <div
                 class="emotion-0 emotion-1"
@@ -1661,12 +1669,16 @@ exports[`UnitInput > renders with default props 1`] = `
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-17[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-17[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-17[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-17[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-17[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -1817,7 +1829,7 @@ exports[`UnitInput > renders with default props 1`] = `
               aria-describedby=":r2:"
               class="emotion-13 emotion-14"
               data-container-full-width="true"
-              tabindex="0"
+              tabindex="-1"
             >
               <div
                 class="emotion-0 emotion-1"
@@ -1938,8 +1950,8 @@ exports[`UnitInput > renders with default value 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -1948,9 +1960,10 @@ exports[`UnitInput > renders with default value 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-6 {
+.emotion-7 {
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -1961,7 +1974,7 @@ exports[`UnitInput > renders with default value 1`] = `
   text-decoration: none;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1987,41 +2000,41 @@ exports[`UnitInput > renders with default value 1`] = `
   background-color: #ffffff;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):focus,
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):active {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
   border-color: #792dd4;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):focus>.emotion-11,
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+    ):not([data-error='true']):focus>.emotion-12,
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):active>.emotion-11 {
+    ):not([data-error='true']):active>.emotion-12 {
   border-right-color: #8c40ef;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):focus-within {
   border-color: #792dd4;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):focus-within>.emotion-11 {
+    ):not([data-error='true']):focus-within>.emotion-12 {
   border-right-color: #8c40ef;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
     ):not([data-readonly='true']):hover,
-.emotion-8:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
     ):focus {
   -webkit-text-decoration: none;
@@ -2029,90 +2042,90 @@ exports[`UnitInput > renders with default value 1`] = `
   border-color: #8c40ef;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
-    ):not([data-readonly='true']):hover>.emotion-11,
-.emotion-8:not([data-disabled='true']):not([data-error='true']):not(
+    ):not([data-readonly='true']):hover>.emotion-12,
+.emotion-9:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
-    ):focus>.emotion-11 {
+    ):focus>.emotion-12 {
   border-right-color: #8c40ef;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-8[data-readonly='true']:active {
+.emotion-9[data-readonly='true']:active {
   border-color: #d9dadd;
 }
 
-.emotion-8[data-size='small'] {
+.emotion-9[data-size='small'] {
   height: 2rem;
 }
 
-.emotion-8[data-size='medium'] {
+.emotion-9[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-8[data-size='large'] {
+.emotion-9[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-8[data-success='true'] {
+.emotion-9[data-success='true'] {
   border: 1px solid #22674e;
 }
 
-.emotion-8[data-success='true']>.emotion-11 {
+.emotion-9[data-success='true']>.emotion-12 {
   border-right-color: #22674e;
 }
 
-.emotion-8[data-success='true']:active {
+.emotion-9[data-success='true']:active {
   border: 1px solid #22674e;
   box-shadow: 0px 0px 0px 3px #45d19f40;
 }
 
-.emotion-8[data-success='true']:active>.emotion-11 {
+.emotion-9[data-success='true']:active>.emotion-12 {
   border-right-color: #22674e;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-8[data-error='true']>.emotion-11 {
+.emotion-9[data-error='true']>.emotion-12 {
   border-right-color: #b3144d;
 }
 
-.emotion-8[data-error='true']>.emotion-11:hover {
+.emotion-9[data-error='true']>.emotion-12:hover {
   border-right-color: #b3144d;
 }
 
-.emotion-8[data-error='true']:active {
+.emotion-9[data-error='true']:active {
   border: 1px solid #b3144d;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-8[data-error='true']:active>.emotion-11 {
+.emotion-9[data-error='true']:active>.emotion-12 {
   border-right-color: #b3144d;
 }
 
-.emotion-8[data-error='true']:active>.emotion-11:hover {
+.emotion-9[data-error='true']:active>.emotion-12:hover {
   border-right-color: #b3144d;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11 {
+.emotion-9[data-disabled='true']>.emotion-12 {
   border-right-color: #e9eaeb;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2138,41 +2151,41 @@ exports[`UnitInput > renders with default value 1`] = `
   background-color: #ffffff;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):focus,
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):active {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
   border-color: #792dd4;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):focus>.emotion-11,
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+    ):not([data-error='true']):focus>.emotion-12,
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):active>.emotion-11 {
+    ):not([data-error='true']):active>.emotion-12 {
   border-right-color: #8c40ef;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):focus-within {
   border-color: #792dd4;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):focus-within>.emotion-11 {
+    ):not([data-error='true']):focus-within>.emotion-12 {
   border-right-color: #8c40ef;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
     ):not([data-readonly='true']):hover,
-.emotion-8:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
     ):focus {
   -webkit-text-decoration: none;
@@ -2180,90 +2193,90 @@ exports[`UnitInput > renders with default value 1`] = `
   border-color: #8c40ef;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
-    ):not([data-readonly='true']):hover>.emotion-11,
-.emotion-8:not([data-disabled='true']):not([data-error='true']):not(
+    ):not([data-readonly='true']):hover>.emotion-12,
+.emotion-9:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
-    ):focus>.emotion-11 {
+    ):focus>.emotion-12 {
   border-right-color: #8c40ef;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-8[data-readonly='true']:active {
+.emotion-9[data-readonly='true']:active {
   border-color: #d9dadd;
 }
 
-.emotion-8[data-size='small'] {
+.emotion-9[data-size='small'] {
   height: 2rem;
 }
 
-.emotion-8[data-size='medium'] {
+.emotion-9[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-8[data-size='large'] {
+.emotion-9[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-8[data-success='true'] {
+.emotion-9[data-success='true'] {
   border: 1px solid #22674e;
 }
 
-.emotion-8[data-success='true']>.emotion-11 {
+.emotion-9[data-success='true']>.emotion-12 {
   border-right-color: #22674e;
 }
 
-.emotion-8[data-success='true']:active {
+.emotion-9[data-success='true']:active {
   border: 1px solid #22674e;
   box-shadow: 0px 0px 0px 3px #45d19f40;
 }
 
-.emotion-8[data-success='true']:active>.emotion-11 {
+.emotion-9[data-success='true']:active>.emotion-12 {
   border-right-color: #22674e;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-8[data-error='true']>.emotion-11 {
+.emotion-9[data-error='true']>.emotion-12 {
   border-right-color: #b3144d;
 }
 
-.emotion-8[data-error='true']>.emotion-11:hover {
+.emotion-9[data-error='true']>.emotion-12:hover {
   border-right-color: #b3144d;
 }
 
-.emotion-8[data-error='true']:active {
+.emotion-9[data-error='true']:active {
   border: 1px solid #b3144d;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-8[data-error='true']:active>.emotion-11 {
+.emotion-9[data-error='true']:active>.emotion-12 {
   border-right-color: #b3144d;
 }
 
-.emotion-8[data-error='true']:active>.emotion-11:hover {
+.emotion-9[data-error='true']:active>.emotion-12:hover {
   border-right-color: #b3144d;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11 {
+.emotion-9[data-disabled='true']>.emotion-12 {
   border-right-color: #e9eaeb;
 }
 
-.emotion-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2281,7 +2294,7 @@ exports[`UnitInput > renders with default value 1`] = `
   height: 100%;
 }
 
-.emotion-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2299,7 +2312,7 @@ exports[`UnitInput > renders with default value 1`] = `
   height: 100%;
 }
 
-.emotion-12 {
+.emotion-13 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -2313,51 +2326,51 @@ exports[`UnitInput > renders with default value 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-12[data-size="small"] {
+.emotion-13[data-size="small"] {
   padding-left: 0.5rem;
 }
 
-.emotion-12[data-size="large"] {
+.emotion-13[data-size="large"] {
   font-size: 1rem;
 }
 
-.emotion-12::-webkit-input-placeholder {
+.emotion-13::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-12::-moz-placeholder {
+.emotion-13::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-12:-ms-input-placeholder {
+.emotion-13:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-12::placeholder {
+.emotion-13::placeholder {
   color: #727683;
 }
 
-.emotion-12:disabled {
+.emotion-13:disabled {
   cursor: not-allowed;
 }
 
-.emotion-12:disabled::-webkit-input-placeholder {
+.emotion-13:disabled::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12:disabled::-moz-placeholder {
+.emotion-13:disabled::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12:disabled:-ms-input-placeholder {
+.emotion-13:disabled:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12:disabled::placeholder {
+.emotion-13:disabled::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12 {
+.emotion-13 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -2371,51 +2384,51 @@ exports[`UnitInput > renders with default value 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-12[data-size="small"] {
+.emotion-13[data-size="small"] {
   padding-left: 0.5rem;
 }
 
-.emotion-12[data-size="large"] {
+.emotion-13[data-size="large"] {
   font-size: 1rem;
 }
 
-.emotion-12::-webkit-input-placeholder {
+.emotion-13::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-12::-moz-placeholder {
+.emotion-13::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-12:-ms-input-placeholder {
+.emotion-13:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-12::placeholder {
+.emotion-13::placeholder {
   color: #727683;
 }
 
-.emotion-12:disabled {
+.emotion-13:disabled {
   cursor: not-allowed;
 }
 
-.emotion-12:disabled::-webkit-input-placeholder {
+.emotion-13:disabled::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12:disabled::-moz-placeholder {
+.emotion-13:disabled::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12:disabled:-ms-input-placeholder {
+.emotion-13:disabled:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12:disabled::placeholder {
+.emotion-13:disabled::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-14 {
+.emotion-15 {
   width: 12.6rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2423,7 +2436,7 @@ exports[`UnitInput > renders with default value 1`] = `
   display: flex;
 }
 
-.emotion-14 {
+.emotion-15 {
   width: 12.6rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2431,51 +2444,51 @@ exports[`UnitInput > renders with default value 1`] = `
   display: flex;
 }
 
-.emotion-17 {
+.emotion-18 {
   width: 100%;
 }
 
-.emotion-17 #unit {
+.emotion-18 #unit {
   border: none;
   background: transparent;
 }
 
-.emotion-17 #unit:focus,
-.emotion-17 #unit:active {
+.emotion-18 #unit:focus,
+.emotion-18 #unit:active {
   box-shadow: none;
 }
 
-.emotion-17 {
+.emotion-18 {
   width: 100%;
 }
 
-.emotion-17 #unit {
+.emotion-18 #unit {
   border: none;
   background: transparent;
 }
 
-.emotion-17 #unit:focus,
-.emotion-17 #unit:active {
+.emotion-18 #unit:focus,
+.emotion-18 #unit:active {
   box-shadow: none;
 }
 
-.emotion-19 {
+.emotion-20 {
   display: inherit;
 }
 
-.emotion-19[data-container-full-width="true"] {
+.emotion-20[data-container-full-width="true"] {
   width: 100%;
 }
 
-.emotion-19 {
+.emotion-20 {
   display: inherit;
 }
 
-.emotion-19[data-container-full-width="true"] {
+.emotion-20[data-container-full-width="true"] {
   width: 100%;
 }
 
-.emotion-23 {
+.emotion-24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2510,81 +2523,85 @@ exports[`UnitInput > renders with default value 1`] = `
   overflow: hidden;
 }
 
-.emotion-23[data-size='small'] {
+.emotion-24[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-23[data-size='medium'] {
+.emotion-24[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-23[data-size='large'] {
+.emotion-24[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-23[data-state='neutral'] {
+.emotion-24[data-state='neutral'] {
   border: 1px solid #d9dadd;
 }
 
-.emotion-23[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-24[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-23[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-23[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-24[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-23[data-state='neutral'][data-dropdownvisible='true'] {
+.emotion-24[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.emotion-24[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
 
-.emotion-23[data-state='success'] {
+.emotion-24[data-state='success'] {
   border: 1px solid #22674e;
 }
 
-.emotion-23[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-24[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #1b533f;
   box-shadow: 0px 0px 0px 3px #45d19f40;
 }
 
-.emotion-23[data-state='success'][data-dropdownvisible='true'] {
+.emotion-24[data-state='success'][data-dropdownvisible='true'] {
   border-color: #1b533f;
 }
 
-.emotion-23[data-state='danger'] {
+.emotion-24[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-23[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-24[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-23[data-state='danger'][data-dropdownvisible='true'] {
+.emotion-24[data-state='danger'][data-dropdownvisible='true'] {
   border-color: #92103f;
 }
 
-.emotion-23:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-24:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-23[data-readonly='true'] {
+.emotion-24[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-23[data-disabled='true'] {
+.emotion-24[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
 }
 
-.emotion-23 {
+.emotion-24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2619,81 +2636,85 @@ exports[`UnitInput > renders with default value 1`] = `
   overflow: hidden;
 }
 
-.emotion-23[data-size='small'] {
+.emotion-24[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-23[data-size='medium'] {
+.emotion-24[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-23[data-size='large'] {
+.emotion-24[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-23[data-state='neutral'] {
+.emotion-24[data-state='neutral'] {
   border: 1px solid #d9dadd;
 }
 
-.emotion-23[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-24[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-23[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-23[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-24[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-23[data-state='neutral'][data-dropdownvisible='true'] {
+.emotion-24[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.emotion-24[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
 
-.emotion-23[data-state='success'] {
+.emotion-24[data-state='success'] {
   border: 1px solid #22674e;
 }
 
-.emotion-23[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-24[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #1b533f;
   box-shadow: 0px 0px 0px 3px #45d19f40;
 }
 
-.emotion-23[data-state='success'][data-dropdownvisible='true'] {
+.emotion-24[data-state='success'][data-dropdownvisible='true'] {
   border-color: #1b533f;
 }
 
-.emotion-23[data-state='danger'] {
+.emotion-24[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-23[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-24[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-23[data-state='danger'][data-dropdownvisible='true'] {
+.emotion-24[data-state='danger'][data-dropdownvisible='true'] {
   border-color: #92103f;
 }
 
-.emotion-23:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-24:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-23[data-readonly='true'] {
+.emotion-24[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-23[data-disabled='true'] {
+.emotion-24[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
 }
 
-.emotion-26 {
+.emotion-27 {
   color: #b5b7bd;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -2705,9 +2726,10 @@ exports[`UnitInput > renders with default value 1`] = `
   text-decoration: none;
   text-overflow: ellipsis;
   overflow: hidden;
+  white-space: nowrap;
 }
 
-.emotion-28 {
+.emotion-29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2735,7 +2757,7 @@ exports[`UnitInput > renders with default value 1`] = `
   display: flex;
 }
 
-.emotion-28 {
+.emotion-29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2763,7 +2785,7 @@ exports[`UnitInput > renders with default value 1`] = `
   display: flex;
 }
 
-.emotion-30 {
+.emotion-31 {
   vertical-align: middle;
   fill: #b5b7bd;
   height: 1rem;
@@ -2772,7 +2794,7 @@ exports[`UnitInput > renders with default value 1`] = `
   min-height: 1rem;
 }
 
-.emotion-30 .fillStroke {
+.emotion-31 .fillStroke {
   stroke: #b5b7bd;
   fill: none;
 }
@@ -2787,17 +2809,17 @@ exports[`UnitInput > renders with default value 1`] = `
         class="emotion-2 emotion-1"
       >
         <label
-          class="emotion-4 emotion-5"
+          class="emotion-4 emotion-5 emotion-6"
           for=":r32:"
         />
         <span
-          class="emotion-6 emotion-5"
+          class="emotion-7 emotion-6"
         >
           label information
         </span>
       </div>
       <div
-        class="emotion-8 emotion-9"
+        class="emotion-9 emotion-10"
         data-disabled="true"
         data-error="false"
         data-readonly="false"
@@ -2805,12 +2827,12 @@ exports[`UnitInput > renders with default value 1`] = `
         data-success="false"
       >
         <div
-          class="emotion-10 emotion-11"
+          class="emotion-11 emotion-12"
           id="input-field"
         >
           <input
             aria-invalid="false"
-            class="emotion-12 emotion-13"
+            class="emotion-13 emotion-14"
             data-size="large"
             data-testid="unit-input"
             disabled=""
@@ -2826,19 +2848,19 @@ exports[`UnitInput > renders with default value 1`] = `
         </div>
          
         <div
-          class="emotion-14 emotion-15"
+          class="emotion-15 emotion-16"
           width="12.6rem"
         >
           <div
             aria-label="test-unit"
-            class="emotion-16 emotion-17 emotion-18"
+            class="emotion-17 emotion-18 emotion-19"
           >
             <div
               aria-controls=":r36:"
               aria-describedby=":r36:"
-              class="emotion-19 emotion-20"
+              class="emotion-20 emotion-21"
               data-container-full-width="true"
-              tabindex="0"
+              tabindex="-1"
             >
               <div
                 class="emotion-0 emotion-1"
@@ -2846,7 +2868,7 @@ exports[`UnitInput > renders with default value 1`] = `
                 <div
                   aria-expanded="false"
                   aria-haspopup="listbox"
-                  class="emotion-23 emotion-24"
+                  class="emotion-24 emotion-25"
                   data-disabled="true"
                   data-dropdownvisible="false"
                   data-readonly="false"
@@ -2858,16 +2880,16 @@ exports[`UnitInput > renders with default value 1`] = `
                   tabindex="0"
                 >
                   <div
-                    class="emotion-25 emotion-26 emotion-5"
+                    class="emotion-26 emotion-27 emotion-6"
                   >
                     KB
                   </div>
                   <div
-                    class="emotion-28 emotion-29"
+                    class="emotion-29 emotion-30"
                   >
                     <svg
                       aria-label="show dropdown"
-                      class="emotion-30 emotion-31"
+                      class="emotion-31 emotion-32"
                       viewBox="0 0 20 20"
                     >
                       <path
@@ -3507,12 +3529,16 @@ exports[`UnitInput > renders with disabled and placeHolder 1`] = `
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-17[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-17[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-17[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-17[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-17[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -3616,12 +3642,16 @@ exports[`UnitInput > renders with disabled and placeHolder 1`] = `
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-17[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-17[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-17[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-17[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-17[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -3801,7 +3831,7 @@ exports[`UnitInput > renders with disabled and placeHolder 1`] = `
               aria-describedby=":r16:"
               class="emotion-13 emotion-14"
               data-container-full-width="true"
-              tabindex="0"
+              tabindex="-1"
             >
               <div
                 class="emotion-0 emotion-1"
@@ -4484,12 +4514,16 @@ exports[`UnitInput > renders with error  and success 1`] = `
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-19[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-19[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-19[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-19[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-19[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -4593,12 +4627,16 @@ exports[`UnitInput > renders with error  and success 1`] = `
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-19[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-19[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-19[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-19[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-19[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -4815,7 +4853,7 @@ exports[`UnitInput > renders with error  and success 1`] = `
               aria-describedby=":r1n:"
               class="emotion-15 emotion-16"
               data-container-full-width="true"
-              tabindex="0"
+              tabindex="-1"
             >
               <div
                 class="emotion-0 emotion-1"
@@ -5501,12 +5539,16 @@ exports[`UnitInput > renders with error 1`] = `
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-19[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-19[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-19[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-19[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-19[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -5610,12 +5652,16 @@ exports[`UnitInput > renders with error 1`] = `
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-19[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-19[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-19[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-19[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-19[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -5831,7 +5877,7 @@ exports[`UnitInput > renders with error 1`] = `
               aria-describedby=":r1h:"
               class="emotion-15 emotion-16"
               data-container-full-width="true"
-              tabindex="0"
+              tabindex="-1"
             >
               <div
                 class="emotion-0 emotion-1"
@@ -5957,8 +6003,8 @@ exports[`UnitInput > renders with label and label information 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -5967,9 +6013,10 @@ exports[`UnitInput > renders with label and label information 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-6 {
+.emotion-7 {
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -5980,7 +6027,7 @@ exports[`UnitInput > renders with label and label information 1`] = `
   text-decoration: none;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6006,41 +6053,41 @@ exports[`UnitInput > renders with label and label information 1`] = `
   background-color: #ffffff;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):focus,
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):active {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
   border-color: #792dd4;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):focus>.emotion-11,
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+    ):not([data-error='true']):focus>.emotion-12,
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):active>.emotion-11 {
+    ):not([data-error='true']):active>.emotion-12 {
   border-right-color: #8c40ef;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):focus-within {
   border-color: #792dd4;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):focus-within>.emotion-11 {
+    ):not([data-error='true']):focus-within>.emotion-12 {
   border-right-color: #8c40ef;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
     ):not([data-readonly='true']):hover,
-.emotion-8:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
     ):focus {
   -webkit-text-decoration: none;
@@ -6048,90 +6095,90 @@ exports[`UnitInput > renders with label and label information 1`] = `
   border-color: #8c40ef;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
-    ):not([data-readonly='true']):hover>.emotion-11,
-.emotion-8:not([data-disabled='true']):not([data-error='true']):not(
+    ):not([data-readonly='true']):hover>.emotion-12,
+.emotion-9:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
-    ):focus>.emotion-11 {
+    ):focus>.emotion-12 {
   border-right-color: #8c40ef;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-8[data-readonly='true']:active {
+.emotion-9[data-readonly='true']:active {
   border-color: #d9dadd;
 }
 
-.emotion-8[data-size='small'] {
+.emotion-9[data-size='small'] {
   height: 2rem;
 }
 
-.emotion-8[data-size='medium'] {
+.emotion-9[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-8[data-size='large'] {
+.emotion-9[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-8[data-success='true'] {
+.emotion-9[data-success='true'] {
   border: 1px solid #22674e;
 }
 
-.emotion-8[data-success='true']>.emotion-11 {
+.emotion-9[data-success='true']>.emotion-12 {
   border-right-color: #22674e;
 }
 
-.emotion-8[data-success='true']:active {
+.emotion-9[data-success='true']:active {
   border: 1px solid #22674e;
   box-shadow: 0px 0px 0px 3px #45d19f40;
 }
 
-.emotion-8[data-success='true']:active>.emotion-11 {
+.emotion-9[data-success='true']:active>.emotion-12 {
   border-right-color: #22674e;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-8[data-error='true']>.emotion-11 {
+.emotion-9[data-error='true']>.emotion-12 {
   border-right-color: #b3144d;
 }
 
-.emotion-8[data-error='true']>.emotion-11:hover {
+.emotion-9[data-error='true']>.emotion-12:hover {
   border-right-color: #b3144d;
 }
 
-.emotion-8[data-error='true']:active {
+.emotion-9[data-error='true']:active {
   border: 1px solid #b3144d;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-8[data-error='true']:active>.emotion-11 {
+.emotion-9[data-error='true']:active>.emotion-12 {
   border-right-color: #b3144d;
 }
 
-.emotion-8[data-error='true']:active>.emotion-11:hover {
+.emotion-9[data-error='true']:active>.emotion-12:hover {
   border-right-color: #b3144d;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11 {
+.emotion-9[data-disabled='true']>.emotion-12 {
   border-right-color: #e9eaeb;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6157,41 +6204,41 @@ exports[`UnitInput > renders with label and label information 1`] = `
   background-color: #ffffff;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):focus,
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):active {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
   border-color: #792dd4;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):focus>.emotion-11,
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+    ):not([data-error='true']):focus>.emotion-12,
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):active>.emotion-11 {
+    ):not([data-error='true']):active>.emotion-12 {
   border-right-color: #8c40ef;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):focus-within {
   border-color: #792dd4;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):focus-within>.emotion-11 {
+    ):not([data-error='true']):focus-within>.emotion-12 {
   border-right-color: #8c40ef;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
     ):not([data-readonly='true']):hover,
-.emotion-8:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
     ):focus {
   -webkit-text-decoration: none;
@@ -6199,90 +6246,90 @@ exports[`UnitInput > renders with label and label information 1`] = `
   border-color: #8c40ef;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
-    ):not([data-readonly='true']):hover>.emotion-11,
-.emotion-8:not([data-disabled='true']):not([data-error='true']):not(
+    ):not([data-readonly='true']):hover>.emotion-12,
+.emotion-9:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
-    ):focus>.emotion-11 {
+    ):focus>.emotion-12 {
   border-right-color: #8c40ef;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-8[data-readonly='true']:active {
+.emotion-9[data-readonly='true']:active {
   border-color: #d9dadd;
 }
 
-.emotion-8[data-size='small'] {
+.emotion-9[data-size='small'] {
   height: 2rem;
 }
 
-.emotion-8[data-size='medium'] {
+.emotion-9[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-8[data-size='large'] {
+.emotion-9[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-8[data-success='true'] {
+.emotion-9[data-success='true'] {
   border: 1px solid #22674e;
 }
 
-.emotion-8[data-success='true']>.emotion-11 {
+.emotion-9[data-success='true']>.emotion-12 {
   border-right-color: #22674e;
 }
 
-.emotion-8[data-success='true']:active {
+.emotion-9[data-success='true']:active {
   border: 1px solid #22674e;
   box-shadow: 0px 0px 0px 3px #45d19f40;
 }
 
-.emotion-8[data-success='true']:active>.emotion-11 {
+.emotion-9[data-success='true']:active>.emotion-12 {
   border-right-color: #22674e;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-8[data-error='true']>.emotion-11 {
+.emotion-9[data-error='true']>.emotion-12 {
   border-right-color: #b3144d;
 }
 
-.emotion-8[data-error='true']>.emotion-11:hover {
+.emotion-9[data-error='true']>.emotion-12:hover {
   border-right-color: #b3144d;
 }
 
-.emotion-8[data-error='true']:active {
+.emotion-9[data-error='true']:active {
   border: 1px solid #b3144d;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-8[data-error='true']:active>.emotion-11 {
+.emotion-9[data-error='true']:active>.emotion-12 {
   border-right-color: #b3144d;
 }
 
-.emotion-8[data-error='true']:active>.emotion-11:hover {
+.emotion-9[data-error='true']:active>.emotion-12:hover {
   border-right-color: #b3144d;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11 {
+.emotion-9[data-disabled='true']>.emotion-12 {
   border-right-color: #e9eaeb;
 }
 
-.emotion-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6300,7 +6347,7 @@ exports[`UnitInput > renders with label and label information 1`] = `
   height: 100%;
 }
 
-.emotion-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6318,7 +6365,7 @@ exports[`UnitInput > renders with label and label information 1`] = `
   height: 100%;
 }
 
-.emotion-12 {
+.emotion-13 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -6332,51 +6379,51 @@ exports[`UnitInput > renders with label and label information 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-12[data-size="small"] {
+.emotion-13[data-size="small"] {
   padding-left: 0.5rem;
 }
 
-.emotion-12[data-size="large"] {
+.emotion-13[data-size="large"] {
   font-size: 1rem;
 }
 
-.emotion-12::-webkit-input-placeholder {
+.emotion-13::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-12::-moz-placeholder {
+.emotion-13::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-12:-ms-input-placeholder {
+.emotion-13:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-12::placeholder {
+.emotion-13::placeholder {
   color: #727683;
 }
 
-.emotion-12:disabled {
+.emotion-13:disabled {
   cursor: not-allowed;
 }
 
-.emotion-12:disabled::-webkit-input-placeholder {
+.emotion-13:disabled::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12:disabled::-moz-placeholder {
+.emotion-13:disabled::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12:disabled:-ms-input-placeholder {
+.emotion-13:disabled:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12:disabled::placeholder {
+.emotion-13:disabled::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12 {
+.emotion-13 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -6390,51 +6437,51 @@ exports[`UnitInput > renders with label and label information 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-12[data-size="small"] {
+.emotion-13[data-size="small"] {
   padding-left: 0.5rem;
 }
 
-.emotion-12[data-size="large"] {
+.emotion-13[data-size="large"] {
   font-size: 1rem;
 }
 
-.emotion-12::-webkit-input-placeholder {
+.emotion-13::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-12::-moz-placeholder {
+.emotion-13::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-12:-ms-input-placeholder {
+.emotion-13:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-12::placeholder {
+.emotion-13::placeholder {
   color: #727683;
 }
 
-.emotion-12:disabled {
+.emotion-13:disabled {
   cursor: not-allowed;
 }
 
-.emotion-12:disabled::-webkit-input-placeholder {
+.emotion-13:disabled::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12:disabled::-moz-placeholder {
+.emotion-13:disabled::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12:disabled:-ms-input-placeholder {
+.emotion-13:disabled:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12:disabled::placeholder {
+.emotion-13:disabled::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-14 {
+.emotion-15 {
   width: 12.6rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6442,7 +6489,7 @@ exports[`UnitInput > renders with label and label information 1`] = `
   display: flex;
 }
 
-.emotion-14 {
+.emotion-15 {
   width: 12.6rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6450,51 +6497,51 @@ exports[`UnitInput > renders with label and label information 1`] = `
   display: flex;
 }
 
-.emotion-17 {
+.emotion-18 {
   width: 100%;
 }
 
-.emotion-17 #unit {
+.emotion-18 #unit {
   border: none;
   background: transparent;
 }
 
-.emotion-17 #unit:focus,
-.emotion-17 #unit:active {
+.emotion-18 #unit:focus,
+.emotion-18 #unit:active {
   box-shadow: none;
 }
 
-.emotion-17 {
+.emotion-18 {
   width: 100%;
 }
 
-.emotion-17 #unit {
+.emotion-18 #unit {
   border: none;
   background: transparent;
 }
 
-.emotion-17 #unit:focus,
-.emotion-17 #unit:active {
+.emotion-18 #unit:focus,
+.emotion-18 #unit:active {
   box-shadow: none;
 }
 
-.emotion-19 {
+.emotion-20 {
   display: inherit;
 }
 
-.emotion-19[data-container-full-width="true"] {
+.emotion-20[data-container-full-width="true"] {
   width: 100%;
 }
 
-.emotion-19 {
+.emotion-20 {
   display: inherit;
 }
 
-.emotion-19[data-container-full-width="true"] {
+.emotion-20[data-container-full-width="true"] {
   width: 100%;
 }
 
-.emotion-23 {
+.emotion-24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6529,81 +6576,85 @@ exports[`UnitInput > renders with label and label information 1`] = `
   overflow: hidden;
 }
 
-.emotion-23[data-size='small'] {
+.emotion-24[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-23[data-size='medium'] {
+.emotion-24[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-23[data-size='large'] {
+.emotion-24[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-23[data-state='neutral'] {
+.emotion-24[data-state='neutral'] {
   border: 1px solid #d9dadd;
 }
 
-.emotion-23[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-24[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-23[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-23[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-24[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-23[data-state='neutral'][data-dropdownvisible='true'] {
+.emotion-24[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.emotion-24[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
 
-.emotion-23[data-state='success'] {
+.emotion-24[data-state='success'] {
   border: 1px solid #22674e;
 }
 
-.emotion-23[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-24[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #1b533f;
   box-shadow: 0px 0px 0px 3px #45d19f40;
 }
 
-.emotion-23[data-state='success'][data-dropdownvisible='true'] {
+.emotion-24[data-state='success'][data-dropdownvisible='true'] {
   border-color: #1b533f;
 }
 
-.emotion-23[data-state='danger'] {
+.emotion-24[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-23[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-24[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-23[data-state='danger'][data-dropdownvisible='true'] {
+.emotion-24[data-state='danger'][data-dropdownvisible='true'] {
   border-color: #92103f;
 }
 
-.emotion-23:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-24:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-23[data-readonly='true'] {
+.emotion-24[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-23[data-disabled='true'] {
+.emotion-24[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
 }
 
-.emotion-23 {
+.emotion-24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6638,81 +6689,85 @@ exports[`UnitInput > renders with label and label information 1`] = `
   overflow: hidden;
 }
 
-.emotion-23[data-size='small'] {
+.emotion-24[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-23[data-size='medium'] {
+.emotion-24[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-23[data-size='large'] {
+.emotion-24[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-23[data-state='neutral'] {
+.emotion-24[data-state='neutral'] {
   border: 1px solid #d9dadd;
 }
 
-.emotion-23[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-24[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-23[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-23[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-24[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-23[data-state='neutral'][data-dropdownvisible='true'] {
+.emotion-24[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.emotion-24[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
 
-.emotion-23[data-state='success'] {
+.emotion-24[data-state='success'] {
   border: 1px solid #22674e;
 }
 
-.emotion-23[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-24[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #1b533f;
   box-shadow: 0px 0px 0px 3px #45d19f40;
 }
 
-.emotion-23[data-state='success'][data-dropdownvisible='true'] {
+.emotion-24[data-state='success'][data-dropdownvisible='true'] {
   border-color: #1b533f;
 }
 
-.emotion-23[data-state='danger'] {
+.emotion-24[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-23[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-24[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-23[data-state='danger'][data-dropdownvisible='true'] {
+.emotion-24[data-state='danger'][data-dropdownvisible='true'] {
   border-color: #92103f;
 }
 
-.emotion-23:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-24:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-23[data-readonly='true'] {
+.emotion-24[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-23[data-disabled='true'] {
+.emotion-24[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
 }
 
-.emotion-26 {
+.emotion-27 {
   color: #b5b7bd;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -6728,7 +6783,7 @@ exports[`UnitInput > renders with label and label information 1`] = `
   user-select: none;
 }
 
-.emotion-28 {
+.emotion-29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6756,7 +6811,7 @@ exports[`UnitInput > renders with label and label information 1`] = `
   display: flex;
 }
 
-.emotion-28 {
+.emotion-29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6784,7 +6839,7 @@ exports[`UnitInput > renders with label and label information 1`] = `
   display: flex;
 }
 
-.emotion-30 {
+.emotion-31 {
   vertical-align: middle;
   fill: #b5b7bd;
   height: 1rem;
@@ -6793,7 +6848,7 @@ exports[`UnitInput > renders with label and label information 1`] = `
   min-height: 1rem;
 }
 
-.emotion-30 .fillStroke {
+.emotion-31 .fillStroke {
   stroke: #b5b7bd;
   fill: none;
 }
@@ -6808,19 +6863,19 @@ exports[`UnitInput > renders with label and label information 1`] = `
         class="emotion-2 emotion-1"
       >
         <label
-          class="emotion-4 emotion-5"
+          class="emotion-4 emotion-5 emotion-6"
           for=":r2k:"
         >
           label
         </label>
         <span
-          class="emotion-6 emotion-5"
+          class="emotion-7 emotion-6"
         >
           label information
         </span>
       </div>
       <div
-        class="emotion-8 emotion-9"
+        class="emotion-9 emotion-10"
         data-disabled="true"
         data-error="false"
         data-readonly="false"
@@ -6828,12 +6883,12 @@ exports[`UnitInput > renders with label and label information 1`] = `
         data-success="false"
       >
         <div
-          class="emotion-10 emotion-11"
+          class="emotion-11 emotion-12"
           id="input-field"
         >
           <input
             aria-invalid="false"
-            class="emotion-12 emotion-13"
+            class="emotion-13 emotion-14"
             data-size="large"
             data-testid="unit-input"
             disabled=""
@@ -6848,19 +6903,19 @@ exports[`UnitInput > renders with label and label information 1`] = `
         </div>
          
         <div
-          class="emotion-14 emotion-15"
+          class="emotion-15 emotion-16"
           width="12.6rem"
         >
           <div
             aria-label="test-unit"
-            class="emotion-16 emotion-17 emotion-18"
+            class="emotion-17 emotion-18 emotion-19"
           >
             <div
               aria-controls=":r2o:"
               aria-describedby=":r2o:"
-              class="emotion-19 emotion-20"
+              class="emotion-20 emotion-21"
               data-container-full-width="true"
-              tabindex="0"
+              tabindex="-1"
             >
               <div
                 class="emotion-0 emotion-1"
@@ -6868,7 +6923,7 @@ exports[`UnitInput > renders with label and label information 1`] = `
                 <div
                   aria-expanded="false"
                   aria-haspopup="listbox"
-                  class="emotion-23 emotion-24"
+                  class="emotion-24 emotion-25"
                   data-disabled="true"
                   data-dropdownvisible="false"
                   data-readonly="false"
@@ -6880,16 +6935,16 @@ exports[`UnitInput > renders with label and label information 1`] = `
                   tabindex="0"
                 >
                   <p
-                    class="emotion-25 emotion-26 emotion-5"
+                    class="emotion-26 emotion-27 emotion-6"
                   >
                     Select item
                   </p>
                   <div
-                    class="emotion-28 emotion-29"
+                    class="emotion-29 emotion-30"
                   >
                     <svg
                       aria-label="show dropdown"
-                      class="emotion-30 emotion-31"
+                      class="emotion-31 emotion-32"
                       viewBox="0 0 20 20"
                     >
                       <path
@@ -6958,8 +7013,8 @@ exports[`UnitInput > renders with label and no label information 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -6968,9 +7023,10 @@ exports[`UnitInput > renders with label and no label information 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6996,41 +7052,41 @@ exports[`UnitInput > renders with label and no label information 1`] = `
   background-color: #ffffff;
 }
 
-.emotion-4:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-5:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):focus,
-.emotion-4:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-5:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):active {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
   border-color: #792dd4;
 }
 
-.emotion-4:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-5:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):focus>.emotion-7,
-.emotion-4:not([data-disabled='true']):not([data-readonly='true']):not(
+    ):not([data-error='true']):focus>.emotion-8,
+.emotion-5:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):active>.emotion-7 {
+    ):not([data-error='true']):active>.emotion-8 {
   border-right-color: #8c40ef;
 }
 
-.emotion-4:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-5:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):focus-within {
   border-color: #792dd4;
 }
 
-.emotion-4:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-5:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):focus-within>.emotion-7 {
+    ):not([data-error='true']):focus-within>.emotion-8 {
   border-right-color: #8c40ef;
 }
 
-.emotion-4:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-5:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
     ):not([data-readonly='true']):hover,
-.emotion-4:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-5:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
     ):focus {
   -webkit-text-decoration: none;
@@ -7038,90 +7094,90 @@ exports[`UnitInput > renders with label and no label information 1`] = `
   border-color: #8c40ef;
 }
 
-.emotion-4:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-5:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
-    ):not([data-readonly='true']):hover>.emotion-7,
-.emotion-4:not([data-disabled='true']):not([data-error='true']):not(
+    ):not([data-readonly='true']):hover>.emotion-8,
+.emotion-5:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
-    ):focus>.emotion-7 {
+    ):focus>.emotion-8 {
   border-right-color: #8c40ef;
 }
 
-.emotion-4[data-readonly='true'] {
+.emotion-5[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-4[data-readonly='true']:active {
+.emotion-5[data-readonly='true']:active {
   border-color: #d9dadd;
 }
 
-.emotion-4[data-size='small'] {
+.emotion-5[data-size='small'] {
   height: 2rem;
 }
 
-.emotion-4[data-size='medium'] {
+.emotion-5[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-4[data-size='large'] {
+.emotion-5[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-4[data-success='true'] {
+.emotion-5[data-success='true'] {
   border: 1px solid #22674e;
 }
 
-.emotion-4[data-success='true']>.emotion-7 {
+.emotion-5[data-success='true']>.emotion-8 {
   border-right-color: #22674e;
 }
 
-.emotion-4[data-success='true']:active {
+.emotion-5[data-success='true']:active {
   border: 1px solid #22674e;
   box-shadow: 0px 0px 0px 3px #45d19f40;
 }
 
-.emotion-4[data-success='true']:active>.emotion-7 {
+.emotion-5[data-success='true']:active>.emotion-8 {
   border-right-color: #22674e;
 }
 
-.emotion-4[data-error='true'] {
+.emotion-5[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-4[data-error='true']>.emotion-7 {
+.emotion-5[data-error='true']>.emotion-8 {
   border-right-color: #b3144d;
 }
 
-.emotion-4[data-error='true']>.emotion-7:hover {
+.emotion-5[data-error='true']>.emotion-8:hover {
   border-right-color: #b3144d;
 }
 
-.emotion-4[data-error='true']:active {
+.emotion-5[data-error='true']:active {
   border: 1px solid #b3144d;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-4[data-error='true']:active>.emotion-7 {
+.emotion-5[data-error='true']:active>.emotion-8 {
   border-right-color: #b3144d;
 }
 
-.emotion-4[data-error='true']:active>.emotion-7:hover {
+.emotion-5[data-error='true']:active>.emotion-8:hover {
   border-right-color: #b3144d;
 }
 
-.emotion-4[data-disabled='true'] {
+.emotion-5[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7 {
+.emotion-5[data-disabled='true']>.emotion-8 {
   border-right-color: #e9eaeb;
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7147,41 +7203,41 @@ exports[`UnitInput > renders with label and no label information 1`] = `
   background-color: #ffffff;
 }
 
-.emotion-4:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-5:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):focus,
-.emotion-4:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-5:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):active {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
   border-color: #792dd4;
 }
 
-.emotion-4:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-5:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):focus>.emotion-7,
-.emotion-4:not([data-disabled='true']):not([data-readonly='true']):not(
+    ):not([data-error='true']):focus>.emotion-8,
+.emotion-5:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):active>.emotion-7 {
+    ):not([data-error='true']):active>.emotion-8 {
   border-right-color: #8c40ef;
 }
 
-.emotion-4:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-5:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):focus-within {
   border-color: #792dd4;
 }
 
-.emotion-4:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-5:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):focus-within>.emotion-7 {
+    ):not([data-error='true']):focus-within>.emotion-8 {
   border-right-color: #8c40ef;
 }
 
-.emotion-4:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-5:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
     ):not([data-readonly='true']):hover,
-.emotion-4:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-5:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
     ):focus {
   -webkit-text-decoration: none;
@@ -7189,90 +7245,90 @@ exports[`UnitInput > renders with label and no label information 1`] = `
   border-color: #8c40ef;
 }
 
-.emotion-4:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-5:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
-    ):not([data-readonly='true']):hover>.emotion-7,
-.emotion-4:not([data-disabled='true']):not([data-error='true']):not(
+    ):not([data-readonly='true']):hover>.emotion-8,
+.emotion-5:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
-    ):focus>.emotion-7 {
+    ):focus>.emotion-8 {
   border-right-color: #8c40ef;
 }
 
-.emotion-4[data-readonly='true'] {
+.emotion-5[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-4[data-readonly='true']:active {
+.emotion-5[data-readonly='true']:active {
   border-color: #d9dadd;
 }
 
-.emotion-4[data-size='small'] {
+.emotion-5[data-size='small'] {
   height: 2rem;
 }
 
-.emotion-4[data-size='medium'] {
+.emotion-5[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-4[data-size='large'] {
+.emotion-5[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-4[data-success='true'] {
+.emotion-5[data-success='true'] {
   border: 1px solid #22674e;
 }
 
-.emotion-4[data-success='true']>.emotion-7 {
+.emotion-5[data-success='true']>.emotion-8 {
   border-right-color: #22674e;
 }
 
-.emotion-4[data-success='true']:active {
+.emotion-5[data-success='true']:active {
   border: 1px solid #22674e;
   box-shadow: 0px 0px 0px 3px #45d19f40;
 }
 
-.emotion-4[data-success='true']:active>.emotion-7 {
+.emotion-5[data-success='true']:active>.emotion-8 {
   border-right-color: #22674e;
 }
 
-.emotion-4[data-error='true'] {
+.emotion-5[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-4[data-error='true']>.emotion-7 {
+.emotion-5[data-error='true']>.emotion-8 {
   border-right-color: #b3144d;
 }
 
-.emotion-4[data-error='true']>.emotion-7:hover {
+.emotion-5[data-error='true']>.emotion-8:hover {
   border-right-color: #b3144d;
 }
 
-.emotion-4[data-error='true']:active {
+.emotion-5[data-error='true']:active {
   border: 1px solid #b3144d;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-4[data-error='true']:active>.emotion-7 {
+.emotion-5[data-error='true']:active>.emotion-8 {
   border-right-color: #b3144d;
 }
 
-.emotion-4[data-error='true']:active>.emotion-7:hover {
+.emotion-5[data-error='true']:active>.emotion-8:hover {
   border-right-color: #b3144d;
 }
 
-.emotion-4[data-disabled='true'] {
+.emotion-5[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
 }
 
-.emotion-4[data-disabled='true']>.emotion-7 {
+.emotion-5[data-disabled='true']>.emotion-8 {
   border-right-color: #e9eaeb;
 }
 
-.emotion-6 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7290,7 +7346,7 @@ exports[`UnitInput > renders with label and no label information 1`] = `
   height: 100%;
 }
 
-.emotion-6 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7308,7 +7364,7 @@ exports[`UnitInput > renders with label and no label information 1`] = `
   height: 100%;
 }
 
-.emotion-8 {
+.emotion-9 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -7322,51 +7378,51 @@ exports[`UnitInput > renders with label and no label information 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-8[data-size="small"] {
+.emotion-9[data-size="small"] {
   padding-left: 0.5rem;
 }
 
-.emotion-8[data-size="large"] {
+.emotion-9[data-size="large"] {
   font-size: 1rem;
 }
 
-.emotion-8::-webkit-input-placeholder {
+.emotion-9::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-8::-moz-placeholder {
+.emotion-9::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-8:-ms-input-placeholder {
+.emotion-9:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-8::placeholder {
+.emotion-9::placeholder {
   color: #727683;
 }
 
-.emotion-8:disabled {
+.emotion-9:disabled {
   cursor: not-allowed;
 }
 
-.emotion-8:disabled::-webkit-input-placeholder {
+.emotion-9:disabled::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8:disabled::-moz-placeholder {
+.emotion-9:disabled::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8:disabled:-ms-input-placeholder {
+.emotion-9:disabled:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8:disabled::placeholder {
+.emotion-9:disabled::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8 {
+.emotion-9 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -7380,51 +7436,51 @@ exports[`UnitInput > renders with label and no label information 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-8[data-size="small"] {
+.emotion-9[data-size="small"] {
   padding-left: 0.5rem;
 }
 
-.emotion-8[data-size="large"] {
+.emotion-9[data-size="large"] {
   font-size: 1rem;
 }
 
-.emotion-8::-webkit-input-placeholder {
+.emotion-9::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-8::-moz-placeholder {
+.emotion-9::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-8:-ms-input-placeholder {
+.emotion-9:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-8::placeholder {
+.emotion-9::placeholder {
   color: #727683;
 }
 
-.emotion-8:disabled {
+.emotion-9:disabled {
   cursor: not-allowed;
 }
 
-.emotion-8:disabled::-webkit-input-placeholder {
+.emotion-9:disabled::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8:disabled::-moz-placeholder {
+.emotion-9:disabled::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8:disabled:-ms-input-placeholder {
+.emotion-9:disabled:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-8:disabled::placeholder {
+.emotion-9:disabled::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-10 {
+.emotion-11 {
   width: 12.6rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -7432,7 +7488,7 @@ exports[`UnitInput > renders with label and no label information 1`] = `
   display: flex;
 }
 
-.emotion-10 {
+.emotion-11 {
   width: 12.6rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -7440,51 +7496,51 @@ exports[`UnitInput > renders with label and no label information 1`] = `
   display: flex;
 }
 
-.emotion-13 {
+.emotion-14 {
   width: 100%;
 }
 
-.emotion-13 #unit {
+.emotion-14 #unit {
   border: none;
   background: transparent;
 }
 
-.emotion-13 #unit:focus,
-.emotion-13 #unit:active {
+.emotion-14 #unit:focus,
+.emotion-14 #unit:active {
   box-shadow: none;
 }
 
-.emotion-13 {
+.emotion-14 {
   width: 100%;
 }
 
-.emotion-13 #unit {
+.emotion-14 #unit {
   border: none;
   background: transparent;
 }
 
-.emotion-13 #unit:focus,
-.emotion-13 #unit:active {
+.emotion-14 #unit:focus,
+.emotion-14 #unit:active {
   box-shadow: none;
 }
 
-.emotion-15 {
+.emotion-16 {
   display: inherit;
 }
 
-.emotion-15[data-container-full-width="true"] {
+.emotion-16[data-container-full-width="true"] {
   width: 100%;
 }
 
-.emotion-15 {
+.emotion-16 {
   display: inherit;
 }
 
-.emotion-15[data-container-full-width="true"] {
+.emotion-16[data-container-full-width="true"] {
   width: 100%;
 }
 
-.emotion-19 {
+.emotion-20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7519,81 +7575,85 @@ exports[`UnitInput > renders with label and no label information 1`] = `
   overflow: hidden;
 }
 
-.emotion-19[data-size='small'] {
+.emotion-20[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-19[data-size='medium'] {
+.emotion-20[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-19[data-size='large'] {
+.emotion-20[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-19[data-state='neutral'] {
+.emotion-20[data-state='neutral'] {
   border: 1px solid #d9dadd;
 }
 
-.emotion-19[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-20[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-19[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-19[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-20[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-19[data-state='neutral'][data-dropdownvisible='true'] {
+.emotion-20[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.emotion-20[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
 
-.emotion-19[data-state='success'] {
+.emotion-20[data-state='success'] {
   border: 1px solid #22674e;
 }
 
-.emotion-19[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-20[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #1b533f;
   box-shadow: 0px 0px 0px 3px #45d19f40;
 }
 
-.emotion-19[data-state='success'][data-dropdownvisible='true'] {
+.emotion-20[data-state='success'][data-dropdownvisible='true'] {
   border-color: #1b533f;
 }
 
-.emotion-19[data-state='danger'] {
+.emotion-20[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-19[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-20[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-19[data-state='danger'][data-dropdownvisible='true'] {
+.emotion-20[data-state='danger'][data-dropdownvisible='true'] {
   border-color: #92103f;
 }
 
-.emotion-19:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-20:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-19[data-readonly='true'] {
+.emotion-20[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-19[data-disabled='true'] {
+.emotion-20[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
 }
 
-.emotion-19 {
+.emotion-20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7628,81 +7688,85 @@ exports[`UnitInput > renders with label and no label information 1`] = `
   overflow: hidden;
 }
 
-.emotion-19[data-size='small'] {
+.emotion-20[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-19[data-size='medium'] {
+.emotion-20[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-19[data-size='large'] {
+.emotion-20[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-19[data-state='neutral'] {
+.emotion-20[data-state='neutral'] {
   border: 1px solid #d9dadd;
 }
 
-.emotion-19[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-20[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-19[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-19[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-20[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-19[data-state='neutral'][data-dropdownvisible='true'] {
+.emotion-20[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.emotion-20[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
 
-.emotion-19[data-state='success'] {
+.emotion-20[data-state='success'] {
   border: 1px solid #22674e;
 }
 
-.emotion-19[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-20[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #1b533f;
   box-shadow: 0px 0px 0px 3px #45d19f40;
 }
 
-.emotion-19[data-state='success'][data-dropdownvisible='true'] {
+.emotion-20[data-state='success'][data-dropdownvisible='true'] {
   border-color: #1b533f;
 }
 
-.emotion-19[data-state='danger'] {
+.emotion-20[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-19[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-20[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-19[data-state='danger'][data-dropdownvisible='true'] {
+.emotion-20[data-state='danger'][data-dropdownvisible='true'] {
   border-color: #92103f;
 }
 
-.emotion-19:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-20:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-19[data-readonly='true'] {
+.emotion-20[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-19[data-disabled='true'] {
+.emotion-20[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
 }
 
-.emotion-22 {
+.emotion-23 {
   color: #b5b7bd;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -7718,7 +7782,7 @@ exports[`UnitInput > renders with label and no label information 1`] = `
   user-select: none;
 }
 
-.emotion-24 {
+.emotion-25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7746,7 +7810,7 @@ exports[`UnitInput > renders with label and no label information 1`] = `
   display: flex;
 }
 
-.emotion-24 {
+.emotion-25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7774,7 +7838,7 @@ exports[`UnitInput > renders with label and no label information 1`] = `
   display: flex;
 }
 
-.emotion-26 {
+.emotion-27 {
   vertical-align: middle;
   fill: #b5b7bd;
   height: 1rem;
@@ -7783,7 +7847,7 @@ exports[`UnitInput > renders with label and no label information 1`] = `
   min-height: 1rem;
 }
 
-.emotion-26 .fillStroke {
+.emotion-27 .fillStroke {
   stroke: #b5b7bd;
   fill: none;
 }
@@ -7795,13 +7859,13 @@ exports[`UnitInput > renders with label and no label information 1`] = `
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
         for=":r2e:"
       >
         label
       </label>
       <div
-        class="emotion-4 emotion-5"
+        class="emotion-5 emotion-6"
         data-disabled="true"
         data-error="false"
         data-readonly="false"
@@ -7809,12 +7873,12 @@ exports[`UnitInput > renders with label and no label information 1`] = `
         data-success="false"
       >
         <div
-          class="emotion-6 emotion-7"
+          class="emotion-7 emotion-8"
           id="input-field"
         >
           <input
             aria-invalid="false"
-            class="emotion-8 emotion-9"
+            class="emotion-9 emotion-10"
             data-size="large"
             data-testid="unit-input"
             disabled=""
@@ -7829,19 +7893,19 @@ exports[`UnitInput > renders with label and no label information 1`] = `
         </div>
          
         <div
-          class="emotion-10 emotion-11"
+          class="emotion-11 emotion-12"
           width="12.6rem"
         >
           <div
             aria-label="test-unit"
-            class="emotion-12 emotion-13 emotion-14"
+            class="emotion-13 emotion-14 emotion-15"
           >
             <div
               aria-controls=":r2h:"
               aria-describedby=":r2h:"
-              class="emotion-15 emotion-16"
+              class="emotion-16 emotion-17"
               data-container-full-width="true"
-              tabindex="0"
+              tabindex="-1"
             >
               <div
                 class="emotion-0 emotion-1"
@@ -7849,7 +7913,7 @@ exports[`UnitInput > renders with label and no label information 1`] = `
                 <div
                   aria-expanded="false"
                   aria-haspopup="listbox"
-                  class="emotion-19 emotion-20"
+                  class="emotion-20 emotion-21"
                   data-disabled="true"
                   data-dropdownvisible="false"
                   data-readonly="false"
@@ -7861,16 +7925,16 @@ exports[`UnitInput > renders with label and no label information 1`] = `
                   tabindex="0"
                 >
                   <p
-                    class="emotion-21 emotion-22 emotion-3"
+                    class="emotion-22 emotion-23 emotion-4"
                   >
                     Select item
                   </p>
                   <div
-                    class="emotion-24 emotion-25"
+                    class="emotion-25 emotion-26"
                   >
                     <svg
                       aria-label="show dropdown"
-                      class="emotion-26 emotion-27"
+                      class="emotion-27 emotion-28"
                       viewBox="0 0 20 20"
                     >
                       <path
@@ -8230,12 +8294,16 @@ exports[`UnitInput > renders with min max 1`] = `
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-17[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-17[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-17[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-17[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-17[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -8386,7 +8454,7 @@ exports[`UnitInput > renders with min max 1`] = `
               aria-describedby=":r7:"
               class="emotion-13 emotion-14"
               data-container-full-width="true"
-              tabindex="0"
+              tabindex="-1"
             >
               <div
                 class="emotion-0 emotion-1"
@@ -8507,8 +8575,8 @@ exports[`UnitInput > renders with no label and label information 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -8517,9 +8585,10 @@ exports[`UnitInput > renders with no label and label information 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.emotion-6 {
+.emotion-7 {
   font-size: 0.875rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -8530,7 +8599,7 @@ exports[`UnitInput > renders with no label and label information 1`] = `
   text-decoration: none;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8556,41 +8625,41 @@ exports[`UnitInput > renders with no label and label information 1`] = `
   background-color: #ffffff;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):focus,
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):active {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
   border-color: #792dd4;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):focus>.emotion-11,
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+    ):not([data-error='true']):focus>.emotion-12,
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):active>.emotion-11 {
+    ):not([data-error='true']):active>.emotion-12 {
   border-right-color: #8c40ef;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):focus-within {
   border-color: #792dd4;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):focus-within>.emotion-11 {
+    ):not([data-error='true']):focus-within>.emotion-12 {
   border-right-color: #8c40ef;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
     ):not([data-readonly='true']):hover,
-.emotion-8:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
     ):focus {
   -webkit-text-decoration: none;
@@ -8598,90 +8667,90 @@ exports[`UnitInput > renders with no label and label information 1`] = `
   border-color: #8c40ef;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
-    ):not([data-readonly='true']):hover>.emotion-11,
-.emotion-8:not([data-disabled='true']):not([data-error='true']):not(
+    ):not([data-readonly='true']):hover>.emotion-12,
+.emotion-9:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
-    ):focus>.emotion-11 {
+    ):focus>.emotion-12 {
   border-right-color: #8c40ef;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-8[data-readonly='true']:active {
+.emotion-9[data-readonly='true']:active {
   border-color: #d9dadd;
 }
 
-.emotion-8[data-size='small'] {
+.emotion-9[data-size='small'] {
   height: 2rem;
 }
 
-.emotion-8[data-size='medium'] {
+.emotion-9[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-8[data-size='large'] {
+.emotion-9[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-8[data-success='true'] {
+.emotion-9[data-success='true'] {
   border: 1px solid #22674e;
 }
 
-.emotion-8[data-success='true']>.emotion-11 {
+.emotion-9[data-success='true']>.emotion-12 {
   border-right-color: #22674e;
 }
 
-.emotion-8[data-success='true']:active {
+.emotion-9[data-success='true']:active {
   border: 1px solid #22674e;
   box-shadow: 0px 0px 0px 3px #45d19f40;
 }
 
-.emotion-8[data-success='true']:active>.emotion-11 {
+.emotion-9[data-success='true']:active>.emotion-12 {
   border-right-color: #22674e;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-8[data-error='true']>.emotion-11 {
+.emotion-9[data-error='true']>.emotion-12 {
   border-right-color: #b3144d;
 }
 
-.emotion-8[data-error='true']>.emotion-11:hover {
+.emotion-9[data-error='true']>.emotion-12:hover {
   border-right-color: #b3144d;
 }
 
-.emotion-8[data-error='true']:active {
+.emotion-9[data-error='true']:active {
   border: 1px solid #b3144d;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-8[data-error='true']:active>.emotion-11 {
+.emotion-9[data-error='true']:active>.emotion-12 {
   border-right-color: #b3144d;
 }
 
-.emotion-8[data-error='true']:active>.emotion-11:hover {
+.emotion-9[data-error='true']:active>.emotion-12:hover {
   border-right-color: #b3144d;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11 {
+.emotion-9[data-disabled='true']>.emotion-12 {
   border-right-color: #e9eaeb;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8707,41 +8776,41 @@ exports[`UnitInput > renders with no label and label information 1`] = `
   background-color: #ffffff;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):focus,
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):active {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
   border-color: #792dd4;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):focus>.emotion-11,
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+    ):not([data-error='true']):focus>.emotion-12,
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):active>.emotion-11 {
+    ):not([data-error='true']):active>.emotion-12 {
   border-right-color: #8c40ef;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
     ):not([data-error='true']):focus-within {
   border-color: #792dd4;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-readonly='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-readonly='true']):not(
       [data-success='true']
-    ):not([data-error='true']):focus-within>.emotion-11 {
+    ):not([data-error='true']):focus-within>.emotion-12 {
   border-right-color: #8c40ef;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
     ):not([data-readonly='true']):hover,
-.emotion-8:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
     ):focus {
   -webkit-text-decoration: none;
@@ -8749,90 +8818,90 @@ exports[`UnitInput > renders with no label and label information 1`] = `
   border-color: #8c40ef;
 }
 
-.emotion-8:not([data-disabled='true']):not([data-error='true']):not(
+.emotion-9:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
-    ):not([data-readonly='true']):hover>.emotion-11,
-.emotion-8:not([data-disabled='true']):not([data-error='true']):not(
+    ):not([data-readonly='true']):hover>.emotion-12,
+.emotion-9:not([data-disabled='true']):not([data-error='true']):not(
       [data-success='true']
-    ):focus>.emotion-11 {
+    ):focus>.emotion-12 {
   border-right-color: #8c40ef;
 }
 
-.emotion-8[data-readonly='true'] {
+.emotion-9[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-8[data-readonly='true']:active {
+.emotion-9[data-readonly='true']:active {
   border-color: #d9dadd;
 }
 
-.emotion-8[data-size='small'] {
+.emotion-9[data-size='small'] {
   height: 2rem;
 }
 
-.emotion-8[data-size='medium'] {
+.emotion-9[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-8[data-size='large'] {
+.emotion-9[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-8[data-success='true'] {
+.emotion-9[data-success='true'] {
   border: 1px solid #22674e;
 }
 
-.emotion-8[data-success='true']>.emotion-11 {
+.emotion-9[data-success='true']>.emotion-12 {
   border-right-color: #22674e;
 }
 
-.emotion-8[data-success='true']:active {
+.emotion-9[data-success='true']:active {
   border: 1px solid #22674e;
   box-shadow: 0px 0px 0px 3px #45d19f40;
 }
 
-.emotion-8[data-success='true']:active>.emotion-11 {
+.emotion-9[data-success='true']:active>.emotion-12 {
   border-right-color: #22674e;
 }
 
-.emotion-8[data-error='true'] {
+.emotion-9[data-error='true'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-8[data-error='true']>.emotion-11 {
+.emotion-9[data-error='true']>.emotion-12 {
   border-right-color: #b3144d;
 }
 
-.emotion-8[data-error='true']>.emotion-11:hover {
+.emotion-9[data-error='true']>.emotion-12:hover {
   border-right-color: #b3144d;
 }
 
-.emotion-8[data-error='true']:active {
+.emotion-9[data-error='true']:active {
   border: 1px solid #b3144d;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-8[data-error='true']:active>.emotion-11 {
+.emotion-9[data-error='true']:active>.emotion-12 {
   border-right-color: #b3144d;
 }
 
-.emotion-8[data-error='true']:active>.emotion-11:hover {
+.emotion-9[data-error='true']:active>.emotion-12:hover {
   border-right-color: #b3144d;
 }
 
-.emotion-8[data-disabled='true'] {
+.emotion-9[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
 }
 
-.emotion-8[data-disabled='true']>.emotion-11 {
+.emotion-9[data-disabled='true']>.emotion-12 {
   border-right-color: #e9eaeb;
 }
 
-.emotion-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8850,7 +8919,7 @@ exports[`UnitInput > renders with no label and label information 1`] = `
   height: 100%;
 }
 
-.emotion-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8868,7 +8937,7 @@ exports[`UnitInput > renders with no label and label information 1`] = `
   height: 100%;
 }
 
-.emotion-12 {
+.emotion-13 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -8882,51 +8951,51 @@ exports[`UnitInput > renders with no label and label information 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-12[data-size="small"] {
+.emotion-13[data-size="small"] {
   padding-left: 0.5rem;
 }
 
-.emotion-12[data-size="large"] {
+.emotion-13[data-size="large"] {
   font-size: 1rem;
 }
 
-.emotion-12::-webkit-input-placeholder {
+.emotion-13::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-12::-moz-placeholder {
+.emotion-13::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-12:-ms-input-placeholder {
+.emotion-13:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-12::placeholder {
+.emotion-13::placeholder {
   color: #727683;
 }
 
-.emotion-12:disabled {
+.emotion-13:disabled {
   cursor: not-allowed;
 }
 
-.emotion-12:disabled::-webkit-input-placeholder {
+.emotion-13:disabled::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12:disabled::-moz-placeholder {
+.emotion-13:disabled::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12:disabled:-ms-input-placeholder {
+.emotion-13:disabled:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12:disabled::placeholder {
+.emotion-13:disabled::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12 {
+.emotion-13 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -8940,51 +9009,51 @@ exports[`UnitInput > renders with no label and label information 1`] = `
   font-size: 0.875rem;
 }
 
-.emotion-12[data-size="small"] {
+.emotion-13[data-size="small"] {
   padding-left: 0.5rem;
 }
 
-.emotion-12[data-size="large"] {
+.emotion-13[data-size="large"] {
   font-size: 1rem;
 }
 
-.emotion-12::-webkit-input-placeholder {
+.emotion-13::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-12::-moz-placeholder {
+.emotion-13::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-12:-ms-input-placeholder {
+.emotion-13:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-12::placeholder {
+.emotion-13::placeholder {
   color: #727683;
 }
 
-.emotion-12:disabled {
+.emotion-13:disabled {
   cursor: not-allowed;
 }
 
-.emotion-12:disabled::-webkit-input-placeholder {
+.emotion-13:disabled::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12:disabled::-moz-placeholder {
+.emotion-13:disabled::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12:disabled:-ms-input-placeholder {
+.emotion-13:disabled:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-12:disabled::placeholder {
+.emotion-13:disabled::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-14 {
+.emotion-15 {
   width: 12.6rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -8992,7 +9061,7 @@ exports[`UnitInput > renders with no label and label information 1`] = `
   display: flex;
 }
 
-.emotion-14 {
+.emotion-15 {
   width: 12.6rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -9000,51 +9069,51 @@ exports[`UnitInput > renders with no label and label information 1`] = `
   display: flex;
 }
 
-.emotion-17 {
+.emotion-18 {
   width: 100%;
 }
 
-.emotion-17 #unit {
+.emotion-18 #unit {
   border: none;
   background: transparent;
 }
 
-.emotion-17 #unit:focus,
-.emotion-17 #unit:active {
+.emotion-18 #unit:focus,
+.emotion-18 #unit:active {
   box-shadow: none;
 }
 
-.emotion-17 {
+.emotion-18 {
   width: 100%;
 }
 
-.emotion-17 #unit {
+.emotion-18 #unit {
   border: none;
   background: transparent;
 }
 
-.emotion-17 #unit:focus,
-.emotion-17 #unit:active {
+.emotion-18 #unit:focus,
+.emotion-18 #unit:active {
   box-shadow: none;
 }
 
-.emotion-19 {
+.emotion-20 {
   display: inherit;
 }
 
-.emotion-19[data-container-full-width="true"] {
+.emotion-20[data-container-full-width="true"] {
   width: 100%;
 }
 
-.emotion-19 {
+.emotion-20 {
   display: inherit;
 }
 
-.emotion-19[data-container-full-width="true"] {
+.emotion-20[data-container-full-width="true"] {
   width: 100%;
 }
 
-.emotion-23 {
+.emotion-24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9079,81 +9148,85 @@ exports[`UnitInput > renders with no label and label information 1`] = `
   overflow: hidden;
 }
 
-.emotion-23[data-size='small'] {
+.emotion-24[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-23[data-size='medium'] {
+.emotion-24[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-23[data-size='large'] {
+.emotion-24[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-23[data-state='neutral'] {
+.emotion-24[data-state='neutral'] {
   border: 1px solid #d9dadd;
 }
 
-.emotion-23[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-24[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-23[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-23[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-24[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-23[data-state='neutral'][data-dropdownvisible='true'] {
+.emotion-24[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.emotion-24[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
 
-.emotion-23[data-state='success'] {
+.emotion-24[data-state='success'] {
   border: 1px solid #22674e;
 }
 
-.emotion-23[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-24[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #1b533f;
   box-shadow: 0px 0px 0px 3px #45d19f40;
 }
 
-.emotion-23[data-state='success'][data-dropdownvisible='true'] {
+.emotion-24[data-state='success'][data-dropdownvisible='true'] {
   border-color: #1b533f;
 }
 
-.emotion-23[data-state='danger'] {
+.emotion-24[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-23[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-24[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-23[data-state='danger'][data-dropdownvisible='true'] {
+.emotion-24[data-state='danger'][data-dropdownvisible='true'] {
   border-color: #92103f;
 }
 
-.emotion-23:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-24:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-23[data-readonly='true'] {
+.emotion-24[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-23[data-disabled='true'] {
+.emotion-24[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
 }
 
-.emotion-23 {
+.emotion-24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9188,81 +9261,85 @@ exports[`UnitInput > renders with no label and label information 1`] = `
   overflow: hidden;
 }
 
-.emotion-23[data-size='small'] {
+.emotion-24[data-size='small'] {
   height: 2rem;
   padding-left: 0.5rem;
 }
 
-.emotion-23[data-size='medium'] {
+.emotion-24[data-size='medium'] {
   height: 2.5rem;
 }
 
-.emotion-23[data-size='large'] {
+.emotion-24[data-size='large'] {
   height: 3rem;
 }
 
-.emotion-23[data-state='neutral'] {
+.emotion-24[data-state='neutral'] {
   border: 1px solid #d9dadd;
 }
 
-.emotion-23[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-24[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #792dd4;
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-23[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-23[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-24[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
-.emotion-23[data-state='neutral'][data-dropdownvisible='true'] {
+.emotion-24[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.emotion-24[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
 
-.emotion-23[data-state='success'] {
+.emotion-24[data-state='success'] {
   border: 1px solid #22674e;
 }
 
-.emotion-23[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-24[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #1b533f;
   box-shadow: 0px 0px 0px 3px #45d19f40;
 }
 
-.emotion-23[data-state='success'][data-dropdownvisible='true'] {
+.emotion-24[data-state='success'][data-dropdownvisible='true'] {
   border-color: #1b533f;
 }
 
-.emotion-23[data-state='danger'] {
+.emotion-24[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-23[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+.emotion-24[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
   border-color: #92103f;
   box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-23[data-state='danger'][data-dropdownvisible='true'] {
+.emotion-24[data-state='danger'][data-dropdownvisible='true'] {
   border-color: #92103f;
 }
 
-.emotion-23:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-24:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-23[data-readonly='true'] {
+.emotion-24[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
   cursor: default;
 }
 
-.emotion-23[data-disabled='true'] {
+.emotion-24[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
   cursor: not-allowed;
 }
 
-.emotion-26 {
+.emotion-27 {
   color: #b5b7bd;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -9278,7 +9355,7 @@ exports[`UnitInput > renders with no label and label information 1`] = `
   user-select: none;
 }
 
-.emotion-28 {
+.emotion-29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9306,7 +9383,7 @@ exports[`UnitInput > renders with no label and label information 1`] = `
   display: flex;
 }
 
-.emotion-28 {
+.emotion-29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9334,7 +9411,7 @@ exports[`UnitInput > renders with no label and label information 1`] = `
   display: flex;
 }
 
-.emotion-30 {
+.emotion-31 {
   vertical-align: middle;
   fill: #b5b7bd;
   height: 1rem;
@@ -9343,7 +9420,7 @@ exports[`UnitInput > renders with no label and label information 1`] = `
   min-height: 1rem;
 }
 
-.emotion-30 .fillStroke {
+.emotion-31 .fillStroke {
   stroke: #b5b7bd;
   fill: none;
 }
@@ -9358,17 +9435,17 @@ exports[`UnitInput > renders with no label and label information 1`] = `
         class="emotion-2 emotion-1"
       >
         <label
-          class="emotion-4 emotion-5"
+          class="emotion-4 emotion-5 emotion-6"
           for=":r2r:"
         />
         <span
-          class="emotion-6 emotion-5"
+          class="emotion-7 emotion-6"
         >
           label information
         </span>
       </div>
       <div
-        class="emotion-8 emotion-9"
+        class="emotion-9 emotion-10"
         data-disabled="true"
         data-error="false"
         data-readonly="false"
@@ -9376,12 +9453,12 @@ exports[`UnitInput > renders with no label and label information 1`] = `
         data-success="false"
       >
         <div
-          class="emotion-10 emotion-11"
+          class="emotion-11 emotion-12"
           id="input-field"
         >
           <input
             aria-invalid="false"
-            class="emotion-12 emotion-13"
+            class="emotion-13 emotion-14"
             data-size="large"
             data-testid="unit-input"
             disabled=""
@@ -9396,19 +9473,19 @@ exports[`UnitInput > renders with no label and label information 1`] = `
         </div>
          
         <div
-          class="emotion-14 emotion-15"
+          class="emotion-15 emotion-16"
           width="12.6rem"
         >
           <div
             aria-label="test-unit"
-            class="emotion-16 emotion-17 emotion-18"
+            class="emotion-17 emotion-18 emotion-19"
           >
             <div
               aria-controls=":r2v:"
               aria-describedby=":r2v:"
-              class="emotion-19 emotion-20"
+              class="emotion-20 emotion-21"
               data-container-full-width="true"
-              tabindex="0"
+              tabindex="-1"
             >
               <div
                 class="emotion-0 emotion-1"
@@ -9416,7 +9493,7 @@ exports[`UnitInput > renders with no label and label information 1`] = `
                 <div
                   aria-expanded="false"
                   aria-haspopup="listbox"
-                  class="emotion-23 emotion-24"
+                  class="emotion-24 emotion-25"
                   data-disabled="true"
                   data-dropdownvisible="false"
                   data-readonly="false"
@@ -9428,16 +9505,16 @@ exports[`UnitInput > renders with no label and label information 1`] = `
                   tabindex="0"
                 >
                   <p
-                    class="emotion-25 emotion-26 emotion-5"
+                    class="emotion-26 emotion-27 emotion-6"
                   >
                     Select item
                   </p>
                   <div
-                    class="emotion-28 emotion-29"
+                    class="emotion-29 emotion-30"
                   >
                     <svg
                       aria-label="show dropdown"
-                      class="emotion-30 emotion-31"
+                      class="emotion-31 emotion-32"
                       viewBox="0 0 20 20"
                     >
                       <path
@@ -10077,12 +10154,16 @@ exports[`UnitInput > renders with size large 1`] = `
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-17[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-17[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-17[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-17[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-17[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -10186,12 +10267,16 @@ exports[`UnitInput > renders with size large 1`] = `
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-17[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-17[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-17[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-17[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-17[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -10384,7 +10469,7 @@ exports[`UnitInput > renders with size large 1`] = `
               aria-describedby=":r11:"
               class="emotion-13 emotion-14"
               data-container-full-width="true"
-              tabindex="0"
+              tabindex="-1"
             >
               <div
                 class="emotion-0 emotion-1"
@@ -10773,12 +10858,16 @@ exports[`UnitInput > renders with size medioum 1`] = `
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-17[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-17[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-17[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-17[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-17[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -10929,7 +11018,7 @@ exports[`UnitInput > renders with size medioum 1`] = `
               aria-describedby=":rh:"
               class="emotion-13 emotion-14"
               data-container-full-width="true"
-              tabindex="0"
+              tabindex="-1"
             >
               <div
                 class="emotion-0 emotion-1"
@@ -11318,12 +11407,16 @@ exports[`UnitInput > renders with size small 1`] = `
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-17[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-17[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-17[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-17[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-17[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -11474,7 +11567,7 @@ exports[`UnitInput > renders with size small 1`] = `
               aria-describedby=":rc:"
               class="emotion-13 emotion-14"
               data-container-full-width="true"
-              tabindex="0"
+              tabindex="-1"
             >
               <div
                 class="emotion-0 emotion-1"
@@ -12157,12 +12250,16 @@ exports[`UnitInput > renders with success 1`] = `
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-19[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-19[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-19[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-19[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-19[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -12266,12 +12363,16 @@ exports[`UnitInput > renders with success 1`] = `
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-19[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-19[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-19[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-19[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-19[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -12487,7 +12588,7 @@ exports[`UnitInput > renders with success 1`] = `
               aria-describedby=":r1b:"
               class="emotion-15 emotion-16"
               data-container-full-width="true"
-              tabindex="0"
+              tabindex="-1"
             >
               <div
                 class="emotion-0 emotion-1"
diff --git a/packages/ui/src/components/VerificationCode/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/VerificationCode/__tests__/__snapshots__/index.test.tsx.snap
index c1890cde38..19f02d8e02 100644
--- a/packages/ui/src/components/VerificationCode/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/VerificationCode/__tests__/__snapshots__/index.test.tsx.snap
@@ -506,8 +506,8 @@ exports[`VerificationCode > render correctly with label 1`] = `
   gap: 0.25rem;
 }
 
-.emotion-2 {
-  color: #222638;
+.emotion-3 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -516,9 +516,10 @@ exports[`VerificationCode > render correctly with label 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: text;
 }
 
-.emotion-4 {
+.emotion-5 {
   background: #ffffff;
   color: #3f4250;
   font-size: 1rem;
@@ -534,54 +535,54 @@ exports[`VerificationCode > render correctly with label 1`] = `
   border: solid 1px #d9dadd;
 }
 
-.emotion-4[aria-invalid='true'] {
+.emotion-5[aria-invalid='true'] {
   border-color: #b3144d;
 }
 
-.emotion-4[data-success='true'] {
+.emotion-5[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-4:hover,
-.emotion-4:focus {
+.emotion-5:hover,
+.emotion-5:focus {
   border-color: #792dd4;
 }
 
-.emotion-4:hover[aria-invalid='true'],
-.emotion-4:focus[aria-invalid='true'] {
+.emotion-5:hover[aria-invalid='true'],
+.emotion-5:focus[aria-invalid='true'] {
   border-color: #92103f;
 }
 
-.emotion-4:hover[data-success='true'],
-.emotion-4:focus[data-success='true'] {
+.emotion-5:hover[data-success='true'],
+.emotion-5:focus[data-success='true'] {
   border-color: #1b533f;
 }
 
-.emotion-4:focus {
+.emotion-5:focus {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-4:last-child {
+.emotion-5:last-child {
   margin-right: 0;
 }
 
-.emotion-4::-webkit-input-placeholder {
+.emotion-5::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-4::-moz-placeholder {
+.emotion-5::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-4:-ms-input-placeholder {
+.emotion-5:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-4::placeholder {
+.emotion-5::placeholder {
   color: #727683;
 }
 
-.emotion-4:disabled {
+.emotion-5:disabled {
   cursor: not-allowed;
   background: #f3f3f4;
   color: #b5b7bd;
@@ -595,7 +596,7 @@ exports[`VerificationCode > render correctly with label 1`] = `
       class="emotion-0 emotion-1"
     >
       <label
-        class="emotion-2 emotion-3"
+        class="emotion-2 emotion-3 emotion-4"
       >
         test
       </label>
@@ -603,7 +604,7 @@ exports[`VerificationCode > render correctly with label 1`] = `
         <input
           aria-invalid="false"
           aria-label="Verification code 0"
-          class="emotion-4 emotion-5"
+          class="emotion-5 emotion-6"
           data-success="false"
           data-testid="0"
           id=":re:-0"
@@ -615,7 +616,7 @@ exports[`VerificationCode > render correctly with label 1`] = `
         <input
           aria-invalid="false"
           aria-label="Verification code 1"
-          class="emotion-4 emotion-5"
+          class="emotion-5 emotion-6"
           data-success="false"
           data-testid="1"
           id=":re:-1"
@@ -627,7 +628,7 @@ exports[`VerificationCode > render correctly with label 1`] = `
         <input
           aria-invalid="false"
           aria-label="Verification code 2"
-          class="emotion-4 emotion-5"
+          class="emotion-5 emotion-6"
           data-success="false"
           data-testid="2"
           id=":re:-2"
@@ -639,7 +640,7 @@ exports[`VerificationCode > render correctly with label 1`] = `
         <input
           aria-invalid="false"
           aria-label="Verification code 3"
-          class="emotion-4 emotion-5"
+          class="emotion-5 emotion-6"
           data-success="false"
           data-testid="3"
           id=":re:-3"
@@ -693,8 +694,8 @@ exports[`VerificationCode > render correctly with labelDescription 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-4 {
-  color: #222638;
+.emotion-5 {
+  color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -703,9 +704,10 @@ exports[`VerificationCode > render correctly with labelDescription 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  cursor: text;
 }
 
-.emotion-6 {
+.emotion-7 {
   background: #ffffff;
   color: #3f4250;
   font-size: 1rem;
@@ -721,54 +723,54 @@ exports[`VerificationCode > render correctly with labelDescription 1`] = `
   border: solid 1px #d9dadd;
 }
 
-.emotion-6[aria-invalid='true'] {
+.emotion-7[aria-invalid='true'] {
   border-color: #b3144d;
 }
 
-.emotion-6[data-success='true'] {
+.emotion-7[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-6:hover,
-.emotion-6:focus {
+.emotion-7:hover,
+.emotion-7:focus {
   border-color: #792dd4;
 }
 
-.emotion-6:hover[aria-invalid='true'],
-.emotion-6:focus[aria-invalid='true'] {
+.emotion-7:hover[aria-invalid='true'],
+.emotion-7:focus[aria-invalid='true'] {
   border-color: #92103f;
 }
 
-.emotion-6:hover[data-success='true'],
-.emotion-6:focus[data-success='true'] {
+.emotion-7:hover[data-success='true'],
+.emotion-7:focus[data-success='true'] {
   border-color: #1b533f;
 }
 
-.emotion-6:focus {
+.emotion-7:focus {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-6:last-child {
+.emotion-7:last-child {
   margin-right: 0;
 }
 
-.emotion-6::-webkit-input-placeholder {
+.emotion-7::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::-moz-placeholder {
+.emotion-7::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-6:-ms-input-placeholder {
+.emotion-7:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-6::placeholder {
+.emotion-7::placeholder {
   color: #727683;
 }
 
-.emotion-6:disabled {
+.emotion-7:disabled {
   cursor: not-allowed;
   background: #f3f3f4;
   color: #b5b7bd;
@@ -785,7 +787,7 @@ exports[`VerificationCode > render correctly with labelDescription 1`] = `
         class="emotion-2 emotion-3"
       >
         <label
-          class="emotion-4 emotion-5"
+          class="emotion-4 emotion-5 emotion-6"
         >
           test
         </label>
@@ -797,7 +799,7 @@ exports[`VerificationCode > render correctly with labelDescription 1`] = `
         <input
           aria-invalid="false"
           aria-label="Verification code 0"
-          class="emotion-6 emotion-7"
+          class="emotion-7 emotion-8"
           data-success="false"
           data-testid="0"
           id=":rn:-0"
@@ -809,7 +811,7 @@ exports[`VerificationCode > render correctly with labelDescription 1`] = `
         <input
           aria-invalid="false"
           aria-label="Verification code 1"
-          class="emotion-6 emotion-7"
+          class="emotion-7 emotion-8"
           data-success="false"
           data-testid="1"
           id=":rn:-1"
@@ -821,7 +823,7 @@ exports[`VerificationCode > render correctly with labelDescription 1`] = `
         <input
           aria-invalid="false"
           aria-label="Verification code 2"
-          class="emotion-6 emotion-7"
+          class="emotion-7 emotion-8"
           data-success="false"
           data-testid="2"
           id=":rn:-2"
@@ -833,7 +835,7 @@ exports[`VerificationCode > render correctly with labelDescription 1`] = `
         <input
           aria-invalid="false"
           aria-label="Verification code 3"
-          class="emotion-6 emotion-7"
+          class="emotion-7 emotion-8"
           data-success="false"
           data-testid="3"
           id=":rn:-3"
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 2b5a99961a..a921b6b93f 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -47,6 +47,7 @@ export { Row } from './Row'
 export { SearchInput } from './SearchInput'
 export { SelectableCard } from './SelectableCard'
 export { SelectableCardGroup } from './SelectableCardGroup'
+export { SelectableCardOptionGroup } from './SelectableCardOptionGroup'
 export { SelectInput, type SelectOption } from './SelectInput'
 export { SelectInputV2 } from './SelectInputV2'
 export { Separator } from './Separator'
diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
index d69588eb38..f348cd122b 100644
--- a/packages/ui/src/types.ts
+++ b/packages/ui/src/types.ts
@@ -38,8 +38,15 @@ export type LabelProp =
   | {
       label: ReactNode
       'aria-label'?: never
+      id?: string
     }
   | {
       label?: never
       'aria-label': string
+      id?: string
+    }
+  | {
+      label?: never
+      'aria-label'?: never
+      id: string
     }