diff --git a/.changeset/ten-pans-sleep.md b/.changeset/ten-pans-sleep.md
new file mode 100644
index 0000000000..d05ea69b15
--- /dev/null
+++ b/.changeset/ten-pans-sleep.md
@@ -0,0 +1,9 @@
+---
+"@ultraviolet/ui": patch
+---
+
+`<SelectInputV2 />`:
+- Hide search when less than 6 items (even when `searchable = true`)
+- Clickable `footer` to close the dropdown
+- `clearable = false` by default now
+- Dropdown will close when clicking outside when it is inside a modal
\ No newline at end of file
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 db2f4bbccc..0279adc318 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
@@ -207,74 +207,6 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
 }
 
 .emotion-13 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  height: 32px;
-  padding: 0 8px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 8px;
-  border-radius: 4px;
-  box-sizing: border-box;
-  width: 32px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  outline-offset: 2px;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 14px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 20px;
-  paragraph-spacing: 0;
-  text-case: none;
-  background: none;
-  border: none;
-  color: #3f4250;
-}
-
-.emotion-13:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-13:active {
-  box-shadow: 0px 0px 0px 3px #151a2d5c;
-}
-
-.emotion-13:hover,
-.emotion-13:active {
-  background: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-15 {
-  vertical-align: middle;
-  fill: currentColor;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
-}
-
-.emotion-15 .fillStroke {
-  stroke: currentColor;
-  fill: none;
-}
-
-.emotion-17 {
   vertical-align: middle;
   fill: #3f4250;
   height: 16px;
@@ -283,12 +215,12 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
   min-height: 16px;
 }
 
-.emotion-17 .fillStroke {
+.emotion-13 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
 
-.emotion-20 {
+.emotion-16 {
   background: #151a2d;
   color: #ffffff;
   border-radius: 4px;
@@ -315,12 +247,12 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
   margin-bottom: 80px;
 }
 
-.emotion-20[data-animated="true"] {
+.emotion-16[data-animated="true"] {
   -webkit-animation: 0ms animation-0 forwards;
   animation: 0ms animation-0 forwards;
 }
 
-.emotion-20[data-has-arrow="true"]::after {
+.emotion-16[data-has-arrow="true"]::after {
   content: " ";
   position: absolute;
   top: -5px;
@@ -336,11 +268,11 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
   pointer-events: none;
 }
 
-.emotion-20[data-visible-in-dom="false"] {
+.emotion-16[data-visible-in-dom="false"] {
   display: none;
 }
 
-.emotion-22 {
+.emotion-18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -363,7 +295,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
   flex-wrap: nowrap;
 }
 
-.emotion-24 {
+.emotion-20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -391,11 +323,11 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
   padding-top: 4px;
 }
 
-.emotion-24[data-grouped="true"] {
+.emotion-20[data-grouped="true"] {
   padding-top: 0;
 }
 
-.emotion-26 {
+.emotion-22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -418,13 +350,13 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
   flex-wrap: nowrap;
 }
 
-.emotion-28 {
+.emotion-24 {
   position: -webkit-sticky;
   position: sticky;
   top: 0px;
 }
 
-.emotion-30 {
+.emotion-26 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -450,21 +382,21 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
   margin-bottom: 2px;
 }
 
-.emotion-30:focus {
+.emotion-26:focus {
   background-color: #f9f9fa;
   outline: none;
 }
 
-.emotion-30[data-selectgroup='true'] {
+.emotion-26[data-selectgroup='true'] {
   padding-left: 16px;
   border-left: 4px solid #f9f9fa;
 }
 
-.emotion-30[data-selectgroup='true']:focus {
+.emotion-26[data-selectgroup='true']:focus {
   background-color: #e9eaeb;
 }
 
-.emotion-32 {
+.emotion-28 {
   color: #3f4250;
   font-size: 12px;
   font-family: Inter,Asap,sans-serif;
@@ -477,7 +409,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
   text-align: left;
 }
 
-.emotion-36 {
+.emotion-32 {
   text-align: left;
   border: none;
   background-color: #ffffff;
@@ -488,32 +420,32 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
   border-radius: 4px;
 }
 
-.emotion-36:hover,
-.emotion-36:focus {
+.emotion-32:hover,
+.emotion-32:focus {
   background-color: #f1eefc;
   color: #641cb3;
   cursor: pointer;
   outline: none;
 }
 
-.emotion-36[data-selected='true'] {
+.emotion-32[data-selected='true'] {
   background-color: #f1eefc;
 }
 
-.emotion-36[disabled] {
+.emotion-32[disabled] {
   background-color: #f3f3f4;
   color: #b5b7bd;
 }
 
-.emotion-36[disabled]:hover,
-.emotion-36 [disabled]:focus {
+.emotion-32[disabled]:hover,
+.emotion-32 [disabled]:focus {
   background-color: #f3f3f4;
   color: #b5b7bd;
   cursor: not-allowed;
   outline: none;
 }
 
-.emotion-40 {
+.emotion-36 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -536,7 +468,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
   overflow: hidden;
 }
 
-.emotion-43 {
+.emotion-39 {
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -558,7 +490,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
   max-width: 100%;
 }
 
-.emotion-63 {
+.emotion-59 {
   color: #727683;
   font-size: 14px;
   font-family: Inter,Asap,sans-serif;
@@ -614,25 +546,9 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
               <div
                 class="emotion-11 emotion-12"
               >
-                <button
-                  aria-label="clear value"
-                  class="emotion-13 emotion-14"
-                  data-testid="clear-all"
-                  type="button"
-                >
-                  <svg
-                    class="emotion-15 emotion-16"
-                    viewBox="0 0 16 16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94z"
-                    />
-                  </svg>
-                </button>
                 <svg
                   aria-label="show dropdown"
-                  class="emotion-17 emotion-18"
+                  class="emotion-13 emotion-14"
                   viewBox="0 0 20 20"
                 >
                   <path
@@ -645,7 +561,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
             </div>
           </div>
           <div
-            class="emotion-19 emotion-20 emotion-21"
+            class="emotion-15 emotion-16 emotion-17"
             data-animated="false"
             data-has-arrow="false"
             id=":rh:"
@@ -653,22 +569,22 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
             style="opacity: 1;"
           >
             <div
-              class="emotion-22 emotion-5"
+              class="emotion-18 emotion-5"
             >
               <div
-                class="emotion-24 emotion-25"
+                class="emotion-20 emotion-21"
                 data-grouped="true"
                 id="select-dropdown"
                 role="listbox"
               >
                 <div
-                  class="emotion-26 emotion-5"
+                  class="emotion-22 emotion-5"
                 >
                   <div
-                    class="emotion-28 emotion-29"
+                    class="emotion-24 emotion-25"
                   >
                     <button
-                      class="emotion-30 emotion-31"
+                      class="emotion-26 emotion-27"
                       data-selectgroup="false"
                       data-testid="group-0"
                       role="group"
@@ -676,19 +592,19 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
                       type="button"
                     >
                       <span
-                        class="emotion-32 emotion-10"
+                        class="emotion-28 emotion-10"
                       >
                         TERRESTRIAL PLANETS
                       </span>
                     </button>
                   </div>
                   <div
-                    class="emotion-26 emotion-5"
+                    class="emotion-22 emotion-5"
                     id="items"
                   >
                     <div
                       aria-label="mercury"
-                      class="emotion-36 emotion-37"
+                      class="emotion-32 emotion-33"
                       data-selected="true"
                       data-testid="option-mercury"
                       id="option-0"
@@ -700,10 +616,10 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
                         data-testid="option-stack-mercury"
                       >
                         <div
-                          class="emotion-40 emotion-41"
+                          class="emotion-36 emotion-37"
                         >
                           <span
-                            class="emotion-42 emotion-43 emotion-10"
+                            class="emotion-38 emotion-39 emotion-10"
                           >
                             Mercury
                           </span>
@@ -712,7 +628,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
                     </div>
                     <div
                       aria-label="venus"
-                      class="emotion-36 emotion-37"
+                      class="emotion-32 emotion-33"
                       data-selected="false"
                       data-testid="option-venus"
                       id="option-1"
@@ -724,10 +640,10 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
                         data-testid="option-stack-venus"
                       >
                         <div
-                          class="emotion-40 emotion-41"
+                          class="emotion-36 emotion-37"
                         >
                           <span
-                            class="emotion-42 emotion-43 emotion-10"
+                            class="emotion-38 emotion-39 emotion-10"
                           >
                             Venus
                           </span>
@@ -736,7 +652,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
                     </div>
                     <div
                       aria-label="earth"
-                      class="emotion-36 emotion-37"
+                      class="emotion-32 emotion-33"
                       data-selected="false"
                       data-testid="option-earth"
                       id="option-2"
@@ -748,16 +664,16 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
                         data-testid="option-stack-earth"
                       >
                         <div
-                          class="emotion-40 emotion-41"
+                          class="emotion-36 emotion-37"
                         >
                           <span
-                            class="emotion-42 emotion-43 emotion-10"
+                            class="emotion-38 emotion-39 emotion-10"
                           >
                             Earth
                           </span>
                         </div>
                         <span
-                          class="emotion-63 emotion-10"
+                          class="emotion-59 emotion-10"
                         >
                           Our home planet
                         </span>
@@ -765,7 +681,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
                     </div>
                     <div
                       aria-label="mars"
-                      class="emotion-36 emotion-37"
+                      class="emotion-32 emotion-33"
                       data-selected="false"
                       data-testid="option-mars"
                       disabled=""
@@ -778,10 +694,10 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
                         data-testid="option-stack-mars"
                       >
                         <div
-                          class="emotion-40 emotion-41"
+                          class="emotion-36 emotion-37"
                         >
                           <span
-                            class="emotion-42 emotion-43 emotion-10"
+                            class="emotion-38 emotion-39 emotion-10"
                           >
                             Mars
                           </span>
@@ -790,7 +706,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
                     </div>
                     <div
                       aria-label="pluto"
-                      class="emotion-36 emotion-37"
+                      class="emotion-32 emotion-33"
                       data-selected="false"
                       data-testid="option-pluto"
                       id="option-4"
@@ -802,16 +718,16 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
                         data-testid="option-stack-pluto"
                       >
                         <div
-                          class="emotion-40 emotion-41"
+                          class="emotion-36 emotion-37"
                         >
                           <span
-                            class="emotion-42 emotion-43 emotion-10"
+                            class="emotion-38 emotion-39 emotion-10"
                           >
                             Pluto
                           </span>
                         </div>
                         <span
-                          class="emotion-63 emotion-10"
+                          class="emotion-59 emotion-10"
                         >
                           Pluto does not fit the usual classification of either terrestrial or Jovian planets, but is rocky
                         </span>
@@ -820,13 +736,13 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
                   </div>
                 </div>
                 <div
-                  class="emotion-26 emotion-5"
+                  class="emotion-22 emotion-5"
                 >
                   <div
-                    class="emotion-28 emotion-29"
+                    class="emotion-24 emotion-25"
                   >
                     <button
-                      class="emotion-30 emotion-31"
+                      class="emotion-26 emotion-27"
                       data-selectgroup="false"
                       data-testid="group-1"
                       role="group"
@@ -834,19 +750,19 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
                       type="button"
                     >
                       <span
-                        class="emotion-32 emotion-10"
+                        class="emotion-28 emotion-10"
                       >
                         JOVIAN PLANETS
                       </span>
                     </button>
                   </div>
                   <div
-                    class="emotion-26 emotion-5"
+                    class="emotion-22 emotion-5"
                     id="items"
                   >
                     <div
                       aria-label="jupiter"
-                      class="emotion-36 emotion-37"
+                      class="emotion-32 emotion-33"
                       data-selected="false"
                       data-testid="option-jupiter"
                       id="option-0"
@@ -858,16 +774,16 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
                         data-testid="option-stack-jupiter"
                       >
                         <div
-                          class="emotion-40 emotion-41"
+                          class="emotion-36 emotion-37"
                         >
                           <span
-                            class="emotion-42 emotion-43 emotion-10"
+                            class="emotion-38 emotion-39 emotion-10"
                           >
                             Jupiter
                           </span>
                         </div>
                         <span
-                          class="emotion-63 emotion-10"
+                          class="emotion-59 emotion-10"
                         >
                           Jupiter is the fifth planet from the Sun and the largest in the Solar System. It is a gas giant with a mass more than two and a half times that of all the other planets in the Solar System combined, and slightly less than one one-thousandth the mass of the Sun.
                         </span>
@@ -875,7 +791,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
                     </div>
                     <div
                       aria-label="saturn"
-                      class="emotion-36 emotion-37"
+                      class="emotion-32 emotion-33"
                       data-selected="false"
                       data-testid="option-saturn"
                       id="option-1"
@@ -887,10 +803,10 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
                         data-testid="option-stack-saturn"
                       >
                         <div
-                          class="emotion-40 emotion-41"
+                          class="emotion-36 emotion-37"
                         >
                           <span
-                            class="emotion-42 emotion-43 emotion-10"
+                            class="emotion-38 emotion-39 emotion-10"
                           >
                             Saturn
                           </span>
@@ -899,7 +815,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
                     </div>
                     <div
                       aria-label="uranus"
-                      class="emotion-36 emotion-37"
+                      class="emotion-32 emotion-33"
                       data-selected="false"
                       data-testid="option-uranus"
                       id="option-2"
@@ -911,10 +827,10 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
                         data-testid="option-stack-uranus"
                       >
                         <div
-                          class="emotion-40 emotion-41"
+                          class="emotion-36 emotion-37"
                         >
                           <span
-                            class="emotion-42 emotion-43 emotion-10"
+                            class="emotion-38 emotion-39 emotion-10"
                           >
                             Uranus
                           </span>
@@ -923,7 +839,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
                     </div>
                     <div
                       aria-label="neptune"
-                      class="emotion-36 emotion-37"
+                      class="emotion-32 emotion-33"
                       data-selected="false"
                       data-testid="option-neptune"
                       id="option-3"
@@ -935,10 +851,10 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
                         data-testid="option-stack-neptune"
                       >
                         <div
-                          class="emotion-40 emotion-41"
+                          class="emotion-36 emotion-37"
                         >
                           <span
-                            class="emotion-42 emotion-43 emotion-10"
+                            class="emotion-38 emotion-39 emotion-10"
                           >
                             Neptune
                           </span>
@@ -2218,74 +2134,6 @@ exports[`SelectInputField > should trigger events 1`] = `
 }
 
 .emotion-13 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  height: 32px;
-  padding: 0 8px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 8px;
-  border-radius: 4px;
-  box-sizing: border-box;
-  width: 32px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  outline-offset: 2px;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 14px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 20px;
-  paragraph-spacing: 0;
-  text-case: none;
-  background: none;
-  border: none;
-  color: #3f4250;
-}
-
-.emotion-13:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-13:active {
-  box-shadow: 0px 0px 0px 3px #151a2d5c;
-}
-
-.emotion-13:hover,
-.emotion-13:active {
-  background: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-15 {
-  vertical-align: middle;
-  fill: currentColor;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
-}
-
-.emotion-15 .fillStroke {
-  stroke: currentColor;
-  fill: none;
-}
-
-.emotion-17 {
   vertical-align: middle;
   fill: #3f4250;
   height: 16px;
@@ -2294,7 +2142,7 @@ exports[`SelectInputField > should trigger events 1`] = `
   min-height: 16px;
 }
 
-.emotion-17 .fillStroke {
+.emotion-13 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
@@ -2310,8 +2158,8 @@ exports[`SelectInputField > should trigger events 1`] = `
         class="emotion-0 emotion-1"
       >
         <div
-          aria-controls=":r1e:"
-          aria-describedby=":r1e:"
+          aria-controls=":r1d:"
+          aria-describedby=":r1d:"
           class="emotion-2 emotion-3"
           data-container-full-width="true"
           tabindex="0"
@@ -2330,7 +2178,7 @@ exports[`SelectInputField > should trigger events 1`] = `
               data-size="large"
               data-state="neutral"
               data-testid="select-input-test"
-              id=":r1d:"
+              id=":r1c:"
               role="combobox"
               tabindex="0"
             >
@@ -2342,25 +2190,9 @@ exports[`SelectInputField > should trigger events 1`] = `
               <div
                 class="emotion-11 emotion-12"
               >
-                <button
-                  aria-label="clear value"
-                  class="emotion-13 emotion-14"
-                  data-testid="clear-all"
-                  type="button"
-                >
-                  <svg
-                    class="emotion-15 emotion-16"
-                    viewBox="0 0 16 16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94z"
-                    />
-                  </svg>
-                </button>
                 <svg
                   aria-label="show dropdown"
-                  class="emotion-17 emotion-18"
+                  class="emotion-13 emotion-14"
                   viewBox="0 0 20 20"
                 >
                   <path
diff --git a/packages/ui/src/components/SelectInputV2/Dropdown.tsx b/packages/ui/src/components/SelectInputV2/Dropdown.tsx
index 53996ddab1..e35e8ab631 100644
--- a/packages/ui/src/components/SelectInputV2/Dropdown.tsx
+++ b/packages/ui/src/components/SelectInputV2/Dropdown.tsx
@@ -26,7 +26,7 @@ export type DropdownProps = {
   descriptionDirection: 'row' | 'column'
   searchable: boolean
   placeholder: string
-  footer?: ReactNode
+  footer?: ((closeDropdown: () => void) => ReactNode) | ReactNode
   refSelect: RefObject<HTMLDivElement>
   loadMore?: ReactNode
   optionalInfoPlacement: 'left' | 'right'
@@ -226,8 +226,8 @@ const handleClickOutside = (
     !ref.current.contains(event.target as Node) &&
     !refSelect.current?.contains(event.target as Node)
   ) {
-    setIsDropdownVisibile(false) // hide dropdown when clicking outside of the dropdown
-    onSearch(options) // reset displayed options to default when dropdown is hidden
+    setIsDropdownVisibile(false)
+    onSearch(options)
   }
 }
 
@@ -682,6 +682,7 @@ export const Dropdown = ({
     searchInput,
     options,
     displayedOptions,
+    numberOfOptions,
   } = useSelectInput()
   const theme = useTheme()
   const [searchBarActive, setSearchBarActive] = useState(false)
@@ -774,6 +775,7 @@ export const Dropdown = ({
           options,
         ),
       )
+
       if (!searchable) {
         document.removeEventListener('keydown', event =>
           handleKeyDown(
@@ -800,7 +802,10 @@ export const Dropdown = ({
     searchable,
   ])
 
+  // No data is displayed (because of the search or because no data is provided)
+  // Set to true when noData by default
   const isEmpty = useMemo(() => {
+    if (numberOfOptions === 0) return true
     if (Array.isArray(displayedOptions)) {
       return !(displayedOptions.length > 0)
     }
@@ -812,14 +817,28 @@ export const Dropdown = ({
     }
 
     return true
-  }, [displayedOptions])
+  }, [displayedOptions, numberOfOptions])
+
+  const computedFooter = useMemo(() => {
+    if (footer) {
+      if (typeof footer === 'function') {
+        return (
+          <PopupFooter>{footer(() => setIsDropdownVisible(false))}</PopupFooter>
+        )
+      }
+
+      return <PopupFooter>{footer}</PopupFooter>
+    }
+
+    return null
+  }, [footer, setIsDropdownVisible])
 
   return (
     <StyledPopup
       visible={isDropdownVisible}
       text={
         <Stack>
-          {searchable && !isLoading ? (
+          {searchable && !isLoading && numberOfOptions >= 6 ? (
             <SearchBarDropdown
               placeholder={placeholder}
               displayedOptions={displayedOptions}
@@ -835,7 +854,7 @@ export const Dropdown = ({
             defaultSearchValue={defaultSearchValue}
             isLoading={isLoading}
           />
-          {footer ? <PopupFooter>{footer}</PopupFooter> : null}
+          {computedFooter}
         </Stack>
       }
       placement="bottom"
diff --git a/packages/ui/src/components/SelectInputV2/__stories__/EmptyState.stories.tsx b/packages/ui/src/components/SelectInputV2/__stories__/EmptyState.stories.tsx
index 35fbd96faa..fb520ceffd 100644
--- a/packages/ui/src/components/SelectInputV2/__stories__/EmptyState.stories.tsx
+++ b/packages/ui/src/components/SelectInputV2/__stories__/EmptyState.stories.tsx
@@ -1,4 +1,8 @@
 import type { StoryFn } from '@storybook/react'
+import {
+  DynamicIllustration,
+  // @ts-expect-error can't import ultraviolet/illustration in ui (cyclic dependencies)
+} from '@ultraviolet/illustrations'
 import { SelectInputV2 } from '..'
 import { EmptyState as EmptyStateComponent } from '../../EmptyState'
 import { Link } from '../../Link'
@@ -35,9 +39,8 @@ export const EmptyState: StoryFn<typeof SelectInputV2> = args => (
       {...args}
       emptyState={
         <EmptyStateComponent
-          bordered
           description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-          image="static/media/packages/ui/src/components/EmptyState/__stories__/illustrations/kapsule.webp"
+          image={<DynamicIllustration name="empty" width="120px" />}
           learnMore={{
             link: 'https://scaleway.com',
             text: 'Learn more',
@@ -54,8 +57,8 @@ export const EmptyState: StoryFn<typeof SelectInputV2> = args => (
 EmptyState.args = {
   ...Template.args,
   options: {},
-  searchable: false,
 }
+
 EmptyState.decorators = [
   StoryComponent => (
     <div style={{ height: '80px' }}>
diff --git a/packages/ui/src/components/SelectInputV2/__stories__/Footer.stories.tsx b/packages/ui/src/components/SelectInputV2/__stories__/Footer.stories.tsx
index ca92f99819..9d259dea87 100644
--- a/packages/ui/src/components/SelectInputV2/__stories__/Footer.stories.tsx
+++ b/packages/ui/src/components/SelectInputV2/__stories__/Footer.stories.tsx
@@ -1,10 +1,10 @@
+import type { StoryFn } from '@storybook/react'
+import { SelectInputV2 } from '..'
 import { Button } from '../../Button'
 import { Stack } from '../../Stack'
 import { Template } from './Template.stories'
 import { dataGrouped } from './resources'
 
-export const Footer = Template.bind({})
-
 const PopupFooter = () => (
   <Stack direction="row" gap="1" width="100%">
     <Button variant="outlined" sentiment="primary" fullWidth>
@@ -16,6 +16,43 @@ const PopupFooter = () => (
   </Stack>
 )
 
+const PopupFooteronClick = ({
+  closeDropdown,
+}: { closeDropdown: () => void }) => (
+  <Stack direction="row" gap="1" width="100%">
+    <Button
+      variant="outlined"
+      sentiment="primary"
+      fullWidth
+      onClick={() => closeDropdown()}
+    >
+      Click me (close the dropdown)
+    </Button>
+    <Button variant="filled" sentiment="primary" fullWidth>
+      Click me (do not close the dropdown)
+    </Button>
+  </Stack>
+)
+
+export const Footer: StoryFn<typeof SelectInputV2> = args => (
+  <Stack gap={2}>
+    <SelectInputV2
+      {...args}
+      label="Default footer"
+      options={dataGrouped}
+      footer={<PopupFooter />}
+    />
+    <SelectInputV2
+      {...args}
+      label="Function footer"
+      options={dataGrouped}
+      footer={closeDropdown => (
+        <PopupFooteronClick closeDropdown={closeDropdown} />
+      )}
+    />
+  </Stack>
+)
+
 Footer.args = {
   ...Template.args,
   options: dataGrouped,
@@ -32,7 +69,8 @@ Footer.decorators = [
 Footer.parameters = {
   docs: {
     description: {
-      story: 'Set a custom footer to the dropdown using the `Footer` prop.',
+      story:
+        'Set a custom footer to the dropdown using the `Footer` prop. Footer can be a function with prop `closeDropdown` to hide the dropdown',
     },
   },
 }
diff --git a/packages/ui/src/components/SelectInputV2/__stories__/Modal.stories.tsx b/packages/ui/src/components/SelectInputV2/__stories__/Modal.stories.tsx
index 49d6bda223..7e8814572e 100644
--- a/packages/ui/src/components/SelectInputV2/__stories__/Modal.stories.tsx
+++ b/packages/ui/src/components/SelectInputV2/__stories__/Modal.stories.tsx
@@ -2,6 +2,8 @@ import type { StoryFn } from '@storybook/react'
 import { SelectInputV2 } from '..'
 import { Button } from '../../Button'
 import { Modal as ModalComponent } from '../../Modal'
+import { Stack } from '../../Stack'
+import { Text } from '../../Text'
 import { dataGrouped } from './resources'
 
 export const Modal: StoryFn<typeof SelectInputV2> = args => (
@@ -9,7 +11,24 @@ export const Modal: StoryFn<typeof SelectInputV2> = args => (
     disclosure={<Button type="button">Modal</Button>}
     placement="bottom"
   >
-    <SelectInputV2 {...args} label="Label" />
+    <Stack gap={2}>
+      <Text as="h1" variant="heading" sentiment="neutral">
+        Title
+      </Text>
+      <Text as="p" variant="body" sentiment="neutral">
+        This is an example of SelectInput inside a modal.
+      </Text>
+      <SelectInputV2 {...args} label="Label" />
+      <Text as="p" variant="body" sentiment="neutral">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </Text>
+    </Stack>
   </ModalComponent>
 )
 
diff --git a/packages/ui/src/components/SelectInputV2/__stories__/Searchable.stories.tsx b/packages/ui/src/components/SelectInputV2/__stories__/Searchable.stories.tsx
new file mode 100644
index 0000000000..d29eecc829
--- /dev/null
+++ b/packages/ui/src/components/SelectInputV2/__stories__/Searchable.stories.tsx
@@ -0,0 +1,40 @@
+import type { StoryFn } from '@storybook/react'
+import { SelectInputV2 } from '..'
+import { Stack } from '../../Stack'
+import { OptionalInfo, OptionalInfo2 } from './resources'
+
+export const Searchable: StoryFn<typeof SelectInputV2> = args => (
+  <Stack gap="2" width="50%">
+    <SelectInputV2
+      {...args}
+      options={OptionalInfo}
+      label="Searchable true : >= 6 elements"
+      searchable
+    />
+    <SelectInputV2
+      {...args}
+      options={OptionalInfo2}
+      optionalInfoPlacement="right"
+      label="Searchable true : <6 elements"
+      searchable
+    />
+  </Stack>
+)
+
+Searchable.args = {
+  name: 'example',
+  placeholder: 'Select item',
+  placeholderSearch: 'Search in list',
+  searchable: false,
+  disabled: false,
+  helper: 'helper',
+}
+
+Searchable.parameters = {
+  docs: {
+    description: {
+      story:
+        'Add a search bar in the dropdown to search through the different options. If there are less than 6 options, the search bar will **not** appear, even if the prop is set to `true`.',
+    },
+  },
+}
diff --git a/packages/ui/src/components/SelectInputV2/__stories__/index.stories.tsx b/packages/ui/src/components/SelectInputV2/__stories__/index.stories.tsx
index 3838ba4a5f..a83749a450 100644
--- a/packages/ui/src/components/SelectInputV2/__stories__/index.stories.tsx
+++ b/packages/ui/src/components/SelectInputV2/__stories__/index.stories.tsx
@@ -29,3 +29,4 @@ export { IsLoading } from './IsLoading.stories'
 export { SelectAll } from './SelectAll.stories'
 export { Controlled } from './Controlled.stories'
 export { Modal } from './Modal.stories'
+export { Searchable } from './Searchable.stories'
diff --git a/packages/ui/src/components/SelectInputV2/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/SelectInputV2/__tests__/__snapshots__/index.test.tsx.snap
index b161f503a4..036482f691 100644
--- a/packages/ui/src/components/SelectInputV2/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/SelectInputV2/__tests__/__snapshots__/index.test.tsx.snap
@@ -61,7 +61,7 @@ exports[`SelectInputV2 > renders correctly 1`] = `
 }
 
 .emotion-8 {
-  color: #3f4250;
+  color: #222638;
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -104,18 +104,7 @@ exports[`SelectInputV2 > renders correctly 1`] = `
   background: #ffffff;
   border-radius: 4px;
   width: 100%;
-}
-
-.emotion-10[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-  cursor: default;
-}
-
-.emotion-10[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-  cursor: not-allowed;
+  overflow: hidden;
 }
 
 .emotion-10[data-size='small'] {
@@ -135,33 +124,64 @@ exports[`SelectInputV2 > renders correctly 1`] = `
   border: 1px solid #d9dadd;
 }
 
+.emotion-10[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-10[data-state='neutral']:not([data-disabled='true']):hover,
+.emotion-10[data-state='neutral']:not([data-disabled='true']):focus {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-10[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
 .emotion-10[data-state='success'] {
   border: 1px solid #22674e;
 }
 
+.emotion-10[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-10[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
 .emotion-10[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-10:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
+.emotion-10[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-10:not([data-disabled='true']):not([data-readonly]):active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
+.emotion-10[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
 }
 
-.emotion-10:not([data-disabled='true']):hover,
-.emotion-10:not([data-disabled='true']):focus {
-  border-color: #792dd4;
-  outline: none;
+.emotion-10:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
 }
 
-.emotion-10[data-dropdownvisible='true'] {
-  border-color: #792dd4;
+.emotion-10[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
 }
 
-.emotion-12 {
+.emotion-10[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-13 {
   color: #727683;
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
@@ -171,9 +191,13 @@ exports[`SelectInputV2 > renders correctly 1`] = `
   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-14 {
+.emotion-15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -201,7 +225,7 @@ exports[`SelectInputV2 > renders correctly 1`] = `
   display: flex;
 }
 
-.emotion-16 {
+.emotion-17 {
   vertical-align: middle;
   fill: #3f4250;
   height: 16px;
@@ -210,7 +234,7 @@ exports[`SelectInputV2 > renders correctly 1`] = `
   min-height: 16px;
 }
 
-.emotion-16 .fillStroke {
+.emotion-17 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
@@ -257,22 +281,21 @@ exports[`SelectInputV2 > renders correctly 1`] = `
             tabindex="0"
           >
             <p
-              class="emotion-12 emotion-9"
+              class="emotion-12 emotion-13 emotion-9"
             >
               Select item
             </p>
             <div
-              class="emotion-14 emotion-15"
+              class="emotion-15 emotion-16"
             >
               <svg
                 aria-label="show dropdown"
-                class="emotion-16 emotion-17"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
+                class="emotion-17 emotion-18"
+                viewBox="0 0 20 20"
               >
                 <path
                   clip-rule="evenodd"
-                  d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06"
+                  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>
@@ -354,18 +377,7 @@ exports[`SelectInputV2 > renders correctly disabled 1`] = `
   background: #ffffff;
   border-radius: 4px;
   width: 100%;
-}
-
-.emotion-6[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-  cursor: default;
-}
-
-.emotion-6[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-  cursor: not-allowed;
+  overflow: hidden;
 }
 
 .emotion-6[data-size='small'] {
@@ -385,33 +397,64 @@ exports[`SelectInputV2 > renders correctly disabled 1`] = `
   border: 1px solid #d9dadd;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  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 {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
 .emotion-6[data-state='success'] {
   border: 1px solid #22674e;
 }
 
+.emotion-6[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-6[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
 .emotion-6[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
+.emotion-6[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
+.emotion-6[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
 }
 
-.emotion-6:not([data-disabled='true']):hover,
-.emotion-6:not([data-disabled='true']):focus {
-  border-color: #792dd4;
-  outline: none;
+.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
 }
 
-.emotion-6[data-dropdownvisible='true'] {
-  border-color: #792dd4;
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
 }
 
-.emotion-8 {
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-9 {
   color: #b5b7bd;
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
@@ -421,9 +464,13 @@ exports[`SelectInputV2 > renders correctly disabled 1`] = `
   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-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -451,7 +498,7 @@ exports[`SelectInputV2 > renders correctly disabled 1`] = `
   display: flex;
 }
 
-.emotion-12 {
+.emotion-13 {
   vertical-align: middle;
   fill: #b5b7bd;
   height: 16px;
@@ -460,7 +507,7 @@ exports[`SelectInputV2 > renders correctly disabled 1`] = `
   min-height: 16px;
 }
 
-.emotion-12 .fillStroke {
+.emotion-13 .fillStroke {
   stroke: #b5b7bd;
   fill: none;
 }
@@ -473,8 +520,8 @@ exports[`SelectInputV2 > renders correctly disabled 1`] = `
       class="emotion-0 emotion-1"
     >
       <div
-        aria-controls=":ran:"
-        aria-describedby=":ran:"
+        aria-controls=":rai:"
+        aria-describedby=":rai:"
         class="emotion-2 emotion-3"
         data-container-full-width="true"
         tabindex="0"
@@ -492,27 +539,26 @@ exports[`SelectInputV2 > renders correctly disabled 1`] = `
             data-size="large"
             data-state="neutral"
             data-testid="select-input-test"
-            id=":ram:"
+            id=":rah:"
             role="combobox"
             tabindex="0"
           >
             <p
-              class="emotion-8 emotion-9"
+              class="emotion-8 emotion-9 emotion-10"
             >
               placeholder
             </p>
             <div
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
             >
               <svg
                 aria-label="show dropdown"
-                class="emotion-12 emotion-13"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
+                class="emotion-13 emotion-14"
+                viewBox="0 0 20 20"
               >
                 <path
                   clip-rule="evenodd"
-                  d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06"
+                  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>
@@ -612,18 +658,7 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
   background: #ffffff;
   border-radius: 4px;
   width: 100%;
-}
-
-.emotion-6[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-  cursor: default;
-}
-
-.emotion-6[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-  cursor: not-allowed;
+  overflow: hidden;
 }
 
 .emotion-6[data-size='small'] {
@@ -643,33 +678,64 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
   border: 1px solid #d9dadd;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  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 {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
 .emotion-6[data-state='success'] {
   border: 1px solid #22674e;
 }
 
+.emotion-6[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-6[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
 .emotion-6[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
+.emotion-6[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
+.emotion-6[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
 }
 
-.emotion-6:not([data-disabled='true']):hover,
-.emotion-6:not([data-disabled='true']):focus {
-  border-color: #792dd4;
-  outline: none;
+.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
 }
 
-.emotion-6[data-dropdownvisible='true'] {
-  border-color: #792dd4;
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
 }
 
-.emotion-8 {
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-9 {
   color: #727683;
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
@@ -679,9 +745,13 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
   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-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -709,7 +779,7 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
   display: flex;
 }
 
-.emotion-12 {
+.emotion-13 {
   vertical-align: middle;
   fill: #3f4250;
   height: 16px;
@@ -718,12 +788,12 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
   min-height: 16px;
 }
 
-.emotion-12 .fillStroke {
+.emotion-13 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
 
-.emotion-15 {
+.emotion-16 {
   background: #151a2d;
   color: #ffffff;
   border-radius: 4px;
@@ -747,14 +817,15 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
   color: #3f4250;
   box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
   padding: 0;
+  margin-bottom: 80px;
 }
 
-.emotion-15[data-animated="true"] {
+.emotion-16[data-animated="true"] {
   -webkit-animation: 0ms animation-0 forwards;
   animation: 0ms animation-0 forwards;
 }
 
-.emotion-15[data-has-arrow="true"]::after {
+.emotion-16[data-has-arrow="true"]::after {
   content: " ";
   position: absolute;
   top: -5px;
@@ -770,11 +841,11 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
   pointer-events: none;
 }
 
-.emotion-15[data-visible-in-dom="false"] {
+.emotion-16[data-visible-in-dom="false"] {
   display: none;
 }
 
-.emotion-17 {
+.emotion-18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -797,7 +868,7 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-20 {
+.emotion-21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -824,7 +895,7 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
   padding-right: 16px;
 }
 
-.emotion-22 {
+.emotion-23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -838,69 +909,69 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
   border-radius: 4px;
 }
 
-.emotion-22>.emotion-29 {
+.emotion-23>.emotion-30 {
   color: #3f4250;
 }
 
-.emotion-22>.emotion-29::-webkit-input-placeholder {
+.emotion-23>.emotion-30::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-22>.emotion-29::-moz-placeholder {
+.emotion-23>.emotion-30::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-22>.emotion-29:-ms-input-placeholder {
+.emotion-23>.emotion-30:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-22>.emotion-29::placeholder {
+.emotion-23>.emotion-30::placeholder {
   color: #727683;
 }
 
-.emotion-22[data-success='true'] {
+.emotion-23[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-22[data-error='true'] {
+.emotion-23[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-22[data-readonly='true'] {
+.emotion-23[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-22[data-disabled='true'] {
+.emotion-23[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29 {
+.emotion-23[data-disabled='true']>.emotion-30 {
   color: #b5b7bd;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29::-webkit-input-placeholder {
+.emotion-23[data-disabled='true']>.emotion-30::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29::-moz-placeholder {
+.emotion-23[data-disabled='true']>.emotion-30::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29:-ms-input-placeholder {
+.emotion-23[data-disabled='true']>.emotion-30:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29::placeholder {
+.emotion-23[data-disabled='true']>.emotion-30::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-22:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-23:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-24 {
+.emotion-25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -926,11 +997,11 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
   border-color: inherit;
 }
 
-.emotion-24[data-size="small"] {
+.emotion-25[data-size="small"] {
   padding: 8px;
 }
 
-.emotion-28 {
+.emotion-29 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -943,15 +1014,15 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
   font-size: 14px;
 }
 
-.emotion-28[data-size='large'] {
+.emotion-29[data-size='large'] {
   font-size: 16px;
 }
 
-.emotion-28[data-size='small'] {
+.emotion-29[data-size='small'] {
   padding-left: 8px;
 }
 
-.emotion-30 {
+.emotion-31 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -979,11 +1050,11 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
   padding-top: 4px;
 }
 
-.emotion-30[data-grouped="true"] {
+.emotion-31[data-grouped="true"] {
   padding-top: 0;
 }
 
-.emotion-32 {
+.emotion-33 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1006,13 +1077,13 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-34 {
+.emotion-35 {
   position: -webkit-sticky;
   position: sticky;
   top: 0px;
 }
 
-.emotion-36 {
+.emotion-37 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1038,21 +1109,22 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
   margin-bottom: 2px;
 }
 
-.emotion-36:focus {
+.emotion-37:focus {
   background-color: #f9f9fa;
   outline: none;
 }
 
-.emotion-36[data-selectgroup='true'] {
+.emotion-37[data-selectgroup='true'] {
   padding-left: 16px;
   border-left: 4px solid #f9f9fa;
 }
 
-.emotion-36[data-selectgroup='true']:focus {
+.emotion-37[data-selectgroup='true']:focus {
   background-color: #e9eaeb;
 }
 
-.emotion-38 {
+.emotion-39 {
+  color: #3f4250;
   font-size: 12px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -1064,7 +1136,7 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
   text-align: left;
 }
 
-.emotion-42 {
+.emotion-43 {
   text-align: left;
   border: none;
   background-color: #ffffff;
@@ -1075,32 +1147,32 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
   border-radius: 4px;
 }
 
-.emotion-42:hover,
-.emotion-42:focus {
+.emotion-43:hover,
+.emotion-43:focus {
   background-color: #f1eefc;
   color: #641cb3;
   cursor: pointer;
   outline: none;
 }
 
-.emotion-42[data-selected='true'] {
+.emotion-43[data-selected='true'] {
   background-color: #f1eefc;
 }
 
-.emotion-42[disabled] {
+.emotion-43[disabled] {
   background-color: #f3f3f4;
   color: #b5b7bd;
 }
 
-.emotion-42[disabled]:hover,
-.emotion-42 [disabled]:focus {
+.emotion-43[disabled]:hover,
+.emotion-43 [disabled]:focus {
   background-color: #f3f3f4;
   color: #b5b7bd;
   cursor: not-allowed;
   outline: none;
 }
 
-.emotion-46 {
+.emotion-47 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1120,9 +1192,10 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
+  overflow: hidden;
 }
 
-.emotion-48 {
+.emotion-50 {
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -1132,9 +1205,19 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   text-align: left;
+  overflow: auto;
+  text-overflow: ellipsis;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  max-width: 100%;
 }
 
-.emotion-66 {
+.emotion-70 {
   color: #727683;
   font-size: 14px;
   font-family: Inter,Asap,sans-serif;
@@ -1147,7 +1230,7 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
   text-align: left;
 }
 
-.emotion-130 {
+.emotion-140 {
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -1158,7 +1241,7 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
   text-decoration: none;
 }
 
-.emotion-133 {
+.emotion-143 {
   font-size: 12px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -1225,22 +1308,21 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
             tabindex="0"
           >
             <p
-              class="emotion-8 emotion-9"
+              class="emotion-8 emotion-9 emotion-10"
             >
               placeholder
             </p>
             <div
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
             >
               <svg
                 aria-label="show dropdown"
-                class="emotion-12 emotion-13"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
+                class="emotion-13 emotion-14"
+                viewBox="0 0 20 20"
               >
                 <path
                   clip-rule="evenodd"
-                  d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06"
+                  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>
@@ -1248,7 +1330,7 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
           </div>
         </div>
         <div
-          class="emotion-14 emotion-15 emotion-16"
+          class="emotion-15 emotion-16 emotion-17"
           data-animated="false"
           data-has-arrow="false"
           id=":r1j:"
@@ -1256,31 +1338,30 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
           style="opacity: 1;"
         >
           <div
-            class="emotion-17 emotion-5"
+            class="emotion-18 emotion-5"
           >
             <div
-              class="emotion-19 emotion-20 emotion-5"
+              class="emotion-20 emotion-21 emotion-5"
             >
               <div>
                 <div
-                  class="emotion-22 emotion-23"
+                  class="emotion-23 emotion-24"
                   data-disabled="false"
                   data-error="false"
                   data-readonly="false"
                   data-success="false"
                 >
                   <div
-                    class="emotion-24 emotion-25"
+                    class="emotion-25 emotion-26"
                     data-size="medium"
                   >
                     <svg
-                      class="emotion-12 emotion-13"
-                      viewBox="0 0 16 16"
-                      xmlns="http://www.w3.org/2000/svg"
+                      class="emotion-13 emotion-14"
+                      viewBox="0 0 20 20"
                     >
                       <path
                         clip-rule="evenodd"
-                        d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06zM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0"
+                        d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11M2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9"
                         fill-rule="evenodd"
                       />
                     </svg>
@@ -1288,7 +1369,7 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
                   <input
                     aria-invalid="false"
                     aria-label="search-bar"
-                    class="emotion-28 emotion-29"
+                    class="emotion-29 emotion-30"
                     data-size="medium"
                     data-testid="search-bar"
                     id=":r1m:"
@@ -1300,19 +1381,19 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
               </div>
             </div>
             <div
-              class="emotion-30 emotion-31"
+              class="emotion-31 emotion-32"
               data-grouped="true"
               id="select-dropdown"
               role="listbox"
             >
               <div
-                class="emotion-32 emotion-5"
+                class="emotion-33 emotion-5"
               >
                 <div
-                  class="emotion-34 emotion-35"
+                  class="emotion-35 emotion-36"
                 >
                   <button
-                    class="emotion-36 emotion-37"
+                    class="emotion-37 emotion-38"
                     data-selectgroup="false"
                     data-testid="group-0"
                     role="group"
@@ -1320,157 +1401,157 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
                     type="button"
                   >
                     <span
-                      class="emotion-38 emotion-9"
+                      class="emotion-39 emotion-10"
                     >
                       TERRESTRIAL PLANETS
                     </span>
                   </button>
                 </div>
                 <div
-                  class="emotion-32 emotion-5"
+                  class="emotion-33 emotion-5"
                   id="items"
                 >
-                  <button
+                  <div
                     aria-label="mercury"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-mercury"
                     id="option-0"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-mercury"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Mercury
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="venus"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-venus"
                     id="option-1"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-venus"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Venus
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="earth"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-earth"
                     id="option-2"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-earth"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Earth
                         </span>
                       </div>
                       <span
-                        class="emotion-66 emotion-9"
+                        class="emotion-70 emotion-10"
                       >
                         Our home planet
                       </span>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="mars"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-mars"
                     disabled=""
                     id="option-3"
                     role="option"
-                    type="button"
+                    tabindex="-1"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-mars"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Mars
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="pluto"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-pluto"
                     id="option-4"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-pluto"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Pluto
                         </span>
                       </div>
                       <span
-                        class="emotion-66 emotion-9"
+                        class="emotion-70 emotion-10"
                       >
                         Pluto does not fit the usual classification of either terrestrial or Jovian planets, but is rocky
                       </span>
                     </div>
-                  </button>
+                  </div>
                 </div>
               </div>
               <div
-                class="emotion-32 emotion-5"
+                class="emotion-33 emotion-5"
               >
                 <div
-                  class="emotion-34 emotion-35"
+                  class="emotion-35 emotion-36"
                 >
                   <button
-                    class="emotion-36 emotion-37"
+                    class="emotion-37 emotion-38"
                     data-selectgroup="false"
                     data-testid="group-1"
                     role="group"
@@ -1478,118 +1559,118 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
                     type="button"
                   >
                     <span
-                      class="emotion-38 emotion-9"
+                      class="emotion-39 emotion-10"
                     >
                       JOVIAN PLANETS
                     </span>
                   </button>
                 </div>
                 <div
-                  class="emotion-32 emotion-5"
+                  class="emotion-33 emotion-5"
                   id="items"
                 >
-                  <button
+                  <div
                     aria-label="jupiter"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-jupiter"
                     id="option-0"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-jupiter"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Jupiter
                         </span>
                       </div>
                       <span
-                        class="emotion-66 emotion-9"
+                        class="emotion-70 emotion-10"
                       >
                         Jupiter is the fifth planet from the Sun and the largest in the Solar System. It is a gas giant with a mass more than two and a half times that of all the other planets in the Solar System combined, and slightly less than one one-thousandth the mass of the Sun.
                       </span>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="saturn"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-saturn"
                     id="option-1"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-saturn"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Saturn
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="uranus"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-uranus"
                     id="option-2"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-uranus"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Uranus
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="neptune"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-neptune"
                     id="option-3"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-neptune"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           <div
-                            class="emotion-130 emotion-9"
+                            class="emotion-140 emotion-10"
                           >
                             Neptune 
                             <span
-                              class="emotion-132 emotion-133 emotion-9"
+                              class="emotion-142 emotion-143 emotion-10"
                             >
                               Label
                             </span>
@@ -1597,7 +1678,7 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
                         </span>
                       </div>
                     </div>
-                  </button>
+                  </div>
                 </div>
               </div>
             </div>
@@ -1678,18 +1759,7 @@ exports[`SelectInputV2 > renders correctly loadMore 1`] = `
   background: #ffffff;
   border-radius: 4px;
   width: 100%;
-}
-
-.emotion-6[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-  cursor: default;
-}
-
-.emotion-6[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-  cursor: not-allowed;
+  overflow: hidden;
 }
 
 .emotion-6[data-size='small'] {
@@ -1709,33 +1779,64 @@ exports[`SelectInputV2 > renders correctly loadMore 1`] = `
   border: 1px solid #d9dadd;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  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 {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
 .emotion-6[data-state='success'] {
   border: 1px solid #22674e;
 }
 
+.emotion-6[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-6[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
 .emotion-6[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
+.emotion-6[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
+.emotion-6[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
 }
 
-.emotion-6:not([data-disabled='true']):hover,
-.emotion-6:not([data-disabled='true']):focus {
-  border-color: #792dd4;
-  outline: none;
+.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
 }
 
-.emotion-6[data-dropdownvisible='true'] {
-  border-color: #792dd4;
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
 }
 
-.emotion-8 {
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-9 {
   color: #727683;
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
@@ -1745,9 +1846,13 @@ exports[`SelectInputV2 > renders correctly loadMore 1`] = `
   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-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1775,7 +1880,7 @@ exports[`SelectInputV2 > renders correctly loadMore 1`] = `
   display: flex;
 }
 
-.emotion-12 {
+.emotion-13 {
   vertical-align: middle;
   fill: #3f4250;
   height: 16px;
@@ -1784,7 +1889,7 @@ exports[`SelectInputV2 > renders correctly loadMore 1`] = `
   min-height: 16px;
 }
 
-.emotion-12 .fillStroke {
+.emotion-13 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
@@ -1797,8 +1902,8 @@ exports[`SelectInputV2 > renders correctly loadMore 1`] = `
       class="emotion-0 emotion-1"
     >
       <div
-        aria-controls=":rad:"
-        aria-describedby=":rad:"
+        aria-controls=":raa:"
+        aria-describedby=":raa:"
         class="emotion-2 emotion-3"
         data-container-full-width="true"
         tabindex="0"
@@ -1816,27 +1921,26 @@ exports[`SelectInputV2 > renders correctly loadMore 1`] = `
             data-size="large"
             data-state="neutral"
             data-testid="select-input-test"
-            id=":rac:"
+            id=":ra9:"
             role="combobox"
             tabindex="0"
           >
             <p
-              class="emotion-8 emotion-9"
+              class="emotion-8 emotion-9 emotion-10"
             >
               placeholder
             </p>
             <div
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
             >
               <svg
                 aria-label="show dropdown"
-                class="emotion-12 emotion-13"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
+                class="emotion-13 emotion-14"
+                viewBox="0 0 20 20"
               >
                 <path
                   clip-rule="evenodd"
-                  d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06"
+                  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>
@@ -1946,18 +2050,7 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = `
   background: #ffffff;
   border-radius: 4px;
   width: 100%;
-}
-
-.emotion-6[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-  cursor: default;
-}
-
-.emotion-6[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-  cursor: not-allowed;
+  overflow: hidden;
 }
 
 .emotion-6[data-size='small'] {
@@ -1977,33 +2070,64 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = `
   border: 1px solid #d9dadd;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  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 {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
 .emotion-6[data-state='success'] {
   border: 1px solid #22674e;
 }
 
+.emotion-6[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-6[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
 .emotion-6[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
+.emotion-6[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
+.emotion-6[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
 }
 
-.emotion-6:not([data-disabled='true']):hover,
-.emotion-6:not([data-disabled='true']):focus {
-  border-color: #792dd4;
-  outline: none;
+.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
 }
 
-.emotion-6[data-dropdownvisible='true'] {
-  border-color: #792dd4;
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
 }
 
-.emotion-8 {
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-9 {
   color: #727683;
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
@@ -2013,9 +2137,13 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = `
   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-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2043,7 +2171,7 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = `
   display: flex;
 }
 
-.emotion-12 {
+.emotion-13 {
   vertical-align: middle;
   fill: #3f4250;
   height: 16px;
@@ -2052,12 +2180,12 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = `
   min-height: 16px;
 }
 
-.emotion-12 .fillStroke {
+.emotion-13 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
 
-.emotion-15 {
+.emotion-16 {
   background: #151a2d;
   color: #ffffff;
   border-radius: 4px;
@@ -2081,14 +2209,15 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = `
   color: #3f4250;
   box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
   padding: 0;
+  margin-bottom: 80px;
 }
 
-.emotion-15[data-animated="true"] {
+.emotion-16[data-animated="true"] {
   -webkit-animation: 0ms animation-0 forwards;
   animation: 0ms animation-0 forwards;
 }
 
-.emotion-15[data-has-arrow="true"]::after {
+.emotion-16[data-has-arrow="true"]::after {
   content: " ";
   position: absolute;
   top: -5px;
@@ -2104,11 +2233,11 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = `
   pointer-events: none;
 }
 
-.emotion-15[data-visible-in-dom="false"] {
+.emotion-16[data-visible-in-dom="false"] {
   display: none;
 }
 
-.emotion-17 {
+.emotion-18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2131,7 +2260,7 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-19 {
+.emotion-20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2159,11 +2288,11 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = `
   padding-top: 4px;
 }
 
-.emotion-19[data-grouped="true"] {
+.emotion-20[data-grouped="true"] {
   padding-top: 0;
 }
 
-.emotion-21 {
+.emotion-22 {
   position: relative;
   width: 100%;
   overflow: hidden;
@@ -2179,7 +2308,7 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = `
   height: 100%;
 }
 
-.emotion-23 {
+.emotion-24 {
   min-height: 200px;
   width: 100%;
   height: 100%;
@@ -2189,11 +2318,11 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = `
   margin: 0;
 }
 
-.emotion-23>.emotion-26:not(:last-child) {
+.emotion-24>.emotion-27:not(:last-child) {
   border-bottom: 1px solid #d9dadd;
 }
 
-.emotion-25 {
+.emotion-26 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2205,7 +2334,7 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = `
   padding: 24px 16px;
 }
 
-.emotion-27 {
+.emotion-28 {
   margin-right: 8px;
   width: 32px;
   height: 32px;
@@ -2214,7 +2343,7 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = `
   background-color: #e9eaeb;
 }
 
-.emotion-29 {
+.emotion-30 {
   height: 12px;
   width: 120px;
   max-width: 100%;
@@ -2222,7 +2351,7 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = `
   background-color: #e9eaeb;
 }
 
-.emotion-43 {
+.emotion-44 {
   position: absolute;
   top: 0;
   height: 100%;
@@ -2243,7 +2372,7 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = `
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .emotion-43 {
+  .emotion-44 {
     -webkit-animation: unset;
     animation: unset;
   }
@@ -2257,8 +2386,8 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = `
       class="emotion-0 emotion-1"
     >
       <div
-        aria-controls=":r1tk:"
-        aria-describedby=":r1tk:"
+        aria-controls=":r1sl:"
+        aria-describedby=":r1sl:"
         class="emotion-2 emotion-3"
         data-container-full-width="true"
         tabindex="0"
@@ -2276,27 +2405,26 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = `
             data-size="large"
             data-state="neutral"
             data-testid="select-input-test"
-            id=":r1tj:"
+            id=":r1sk:"
             role="combobox"
             tabindex="0"
           >
             <p
-              class="emotion-8 emotion-9"
+              class="emotion-8 emotion-9 emotion-10"
             >
               placeholder
             </p>
             <div
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
             >
               <svg
                 aria-label="show dropdown"
-                class="emotion-12 emotion-13"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
+                class="emotion-13 emotion-14"
+                viewBox="0 0 20 20"
               >
                 <path
                   clip-rule="evenodd"
-                  d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06"
+                  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>
@@ -2304,18 +2432,18 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = `
           </div>
         </div>
         <div
-          class="emotion-14 emotion-15 emotion-16"
+          class="emotion-15 emotion-16 emotion-17"
           data-animated="false"
           data-has-arrow="false"
-          id=":r1tk:"
+          id=":r1sl:"
           role="dialog"
           style="opacity: 1;"
         >
           <div
-            class="emotion-17 emotion-5"
+            class="emotion-18 emotion-5"
           >
             <div
-              class="emotion-19 emotion-20"
+              class="emotion-20 emotion-21"
               data-grouped="true"
               id="select-dropdown"
               role="listbox"
@@ -2323,44 +2451,44 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = `
               <div
                 aria-busy="true"
                 aria-live="polite"
-                class="emotion-21 emotion-22"
+                class="emotion-22 emotion-23"
               >
                 <ul
-                  class="emotion-23 emotion-24"
+                  class="emotion-24 emotion-25"
                 >
                   <li
-                    class="emotion-25 emotion-26"
+                    class="emotion-26 emotion-27"
                   >
                     <div
-                      class="emotion-27 emotion-28"
+                      class="emotion-28 emotion-29"
                     />
                     <div
-                      class="emotion-29 emotion-30"
+                      class="emotion-30 emotion-31"
                     />
                   </li>
                   <li
-                    class="emotion-25 emotion-26"
+                    class="emotion-26 emotion-27"
                   >
                     <div
-                      class="emotion-27 emotion-28"
+                      class="emotion-28 emotion-29"
                     />
                     <div
-                      class="emotion-29 emotion-30"
+                      class="emotion-30 emotion-31"
                     />
                   </li>
                   <li
-                    class="emotion-25 emotion-26"
+                    class="emotion-26 emotion-27"
                   >
                     <div
-                      class="emotion-27 emotion-28"
+                      class="emotion-28 emotion-29"
                     />
                     <div
-                      class="emotion-29 emotion-30"
+                      class="emotion-30 emotion-31"
                     />
                   </li>
                 </ul>
                 <div
-                  class="emotion-43 emotion-44"
+                  class="emotion-44 emotion-45"
                 />
               </div>
             </div>
@@ -2469,18 +2597,7 @@ exports[`SelectInputV2 > renders correctly loading - ungrouped data 1`] = `
   background: #ffffff;
   border-radius: 4px;
   width: 100%;
-}
-
-.emotion-6[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-  cursor: default;
-}
-
-.emotion-6[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-  cursor: not-allowed;
+  overflow: hidden;
 }
 
 .emotion-6[data-size='small'] {
@@ -2500,33 +2617,64 @@ exports[`SelectInputV2 > renders correctly loading - ungrouped data 1`] = `
   border: 1px solid #d9dadd;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  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 {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
 .emotion-6[data-state='success'] {
   border: 1px solid #22674e;
 }
 
+.emotion-6[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-6[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
 .emotion-6[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
+.emotion-6[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
+.emotion-6[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
 }
 
-.emotion-6:not([data-disabled='true']):hover,
-.emotion-6:not([data-disabled='true']):focus {
-  border-color: #792dd4;
-  outline: none;
+.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
 }
 
-.emotion-6[data-dropdownvisible='true'] {
-  border-color: #792dd4;
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
 }
 
-.emotion-8 {
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-9 {
   color: #727683;
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
@@ -2536,9 +2684,13 @@ exports[`SelectInputV2 > renders correctly loading - ungrouped data 1`] = `
   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-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2566,7 +2718,7 @@ exports[`SelectInputV2 > renders correctly loading - ungrouped data 1`] = `
   display: flex;
 }
 
-.emotion-12 {
+.emotion-13 {
   vertical-align: middle;
   fill: #3f4250;
   height: 16px;
@@ -2575,12 +2727,12 @@ exports[`SelectInputV2 > renders correctly loading - ungrouped data 1`] = `
   min-height: 16px;
 }
 
-.emotion-12 .fillStroke {
+.emotion-13 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
 
-.emotion-15 {
+.emotion-16 {
   background: #151a2d;
   color: #ffffff;
   border-radius: 4px;
@@ -2604,14 +2756,15 @@ exports[`SelectInputV2 > renders correctly loading - ungrouped data 1`] = `
   color: #3f4250;
   box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
   padding: 0;
+  margin-bottom: 80px;
 }
 
-.emotion-15[data-animated="true"] {
+.emotion-16[data-animated="true"] {
   -webkit-animation: 0ms animation-0 forwards;
   animation: 0ms animation-0 forwards;
 }
 
-.emotion-15[data-has-arrow="true"]::after {
+.emotion-16[data-has-arrow="true"]::after {
   content: " ";
   position: absolute;
   top: -5px;
@@ -2627,11 +2780,11 @@ exports[`SelectInputV2 > renders correctly loading - ungrouped data 1`] = `
   pointer-events: none;
 }
 
-.emotion-15[data-visible-in-dom="false"] {
+.emotion-16[data-visible-in-dom="false"] {
   display: none;
 }
 
-.emotion-17 {
+.emotion-18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2654,7 +2807,7 @@ exports[`SelectInputV2 > renders correctly loading - ungrouped data 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-19 {
+.emotion-20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2682,11 +2835,11 @@ exports[`SelectInputV2 > renders correctly loading - ungrouped data 1`] = `
   padding-top: 4px;
 }
 
-.emotion-19[data-grouped="true"] {
+.emotion-20[data-grouped="true"] {
   padding-top: 0;
 }
 
-.emotion-21 {
+.emotion-22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2709,7 +2862,7 @@ exports[`SelectInputV2 > renders correctly loading - ungrouped data 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-23 {
+.emotion-24 {
   position: relative;
   width: 100%;
   overflow: hidden;
@@ -2725,7 +2878,7 @@ exports[`SelectInputV2 > renders correctly loading - ungrouped data 1`] = `
   height: 100%;
 }
 
-.emotion-25 {
+.emotion-26 {
   min-height: 200px;
   width: 100%;
   height: 100%;
@@ -2735,11 +2888,11 @@ exports[`SelectInputV2 > renders correctly loading - ungrouped data 1`] = `
   margin: 0;
 }
 
-.emotion-25>.emotion-28:not(:last-child) {
+.emotion-26>.emotion-29:not(:last-child) {
   border-bottom: 1px solid #d9dadd;
 }
 
-.emotion-27 {
+.emotion-28 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2751,7 +2904,7 @@ exports[`SelectInputV2 > renders correctly loading - ungrouped data 1`] = `
   padding: 24px 16px;
 }
 
-.emotion-29 {
+.emotion-30 {
   margin-right: 8px;
   width: 32px;
   height: 32px;
@@ -2760,7 +2913,7 @@ exports[`SelectInputV2 > renders correctly loading - ungrouped data 1`] = `
   background-color: #e9eaeb;
 }
 
-.emotion-31 {
+.emotion-32 {
   height: 12px;
   width: 120px;
   max-width: 100%;
@@ -2768,7 +2921,7 @@ exports[`SelectInputV2 > renders correctly loading - ungrouped data 1`] = `
   background-color: #e9eaeb;
 }
 
-.emotion-45 {
+.emotion-46 {
   position: absolute;
   top: 0;
   height: 100%;
@@ -2789,7 +2942,7 @@ exports[`SelectInputV2 > renders correctly loading - ungrouped data 1`] = `
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .emotion-45 {
+  .emotion-46 {
     -webkit-animation: unset;
     animation: unset;
   }
@@ -2803,8 +2956,8 @@ exports[`SelectInputV2 > renders correctly loading - ungrouped data 1`] = `
       class="emotion-0 emotion-1"
     >
       <div
-        aria-controls=":r1to:"
-        aria-describedby=":r1to:"
+        aria-controls=":r1sp:"
+        aria-describedby=":r1sp:"
         class="emotion-2 emotion-3"
         data-container-full-width="true"
         tabindex="0"
@@ -2822,27 +2975,26 @@ exports[`SelectInputV2 > renders correctly loading - ungrouped data 1`] = `
             data-size="large"
             data-state="neutral"
             data-testid="select-input-test"
-            id=":r1tn:"
+            id=":r1so:"
             role="combobox"
             tabindex="0"
           >
             <p
-              class="emotion-8 emotion-9"
+              class="emotion-8 emotion-9 emotion-10"
             >
               placeholder
             </p>
             <div
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
             >
               <svg
                 aria-label="show dropdown"
-                class="emotion-12 emotion-13"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
+                class="emotion-13 emotion-14"
+                viewBox="0 0 20 20"
               >
                 <path
                   clip-rule="evenodd"
-                  d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06"
+                  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>
@@ -2850,67 +3002,68 @@ exports[`SelectInputV2 > renders correctly loading - ungrouped data 1`] = `
           </div>
         </div>
         <div
-          class="emotion-14 emotion-15 emotion-16"
+          class="emotion-15 emotion-16 emotion-17"
           data-animated="false"
           data-has-arrow="false"
-          id=":r1to:"
+          id=":r1sp:"
           role="dialog"
           style="opacity: 1;"
         >
           <div
-            class="emotion-17 emotion-5"
+            class="emotion-18 emotion-5"
           >
             <div
-              class="emotion-19 emotion-20"
+              class="emotion-20 emotion-21"
               data-grouped="false"
               id="select-dropdown"
               role="listbox"
+              tabindex="-1"
             >
               <div
-                class="emotion-21 emotion-5"
+                class="emotion-22 emotion-5"
                 id="items"
               >
                 <div
                   aria-busy="true"
                   aria-live="polite"
-                  class="emotion-23 emotion-24"
+                  class="emotion-24 emotion-25"
                 >
                   <ul
-                    class="emotion-25 emotion-26"
+                    class="emotion-26 emotion-27"
                   >
                     <li
-                      class="emotion-27 emotion-28"
+                      class="emotion-28 emotion-29"
                     >
                       <div
-                        class="emotion-29 emotion-30"
+                        class="emotion-30 emotion-31"
                       />
                       <div
-                        class="emotion-31 emotion-32"
+                        class="emotion-32 emotion-33"
                       />
                     </li>
                     <li
-                      class="emotion-27 emotion-28"
+                      class="emotion-28 emotion-29"
                     >
                       <div
-                        class="emotion-29 emotion-30"
+                        class="emotion-30 emotion-31"
                       />
                       <div
-                        class="emotion-31 emotion-32"
+                        class="emotion-32 emotion-33"
                       />
                     </li>
                     <li
-                      class="emotion-27 emotion-28"
+                      class="emotion-28 emotion-29"
                     >
                       <div
-                        class="emotion-29 emotion-30"
+                        class="emotion-30 emotion-31"
                       />
                       <div
-                        class="emotion-31 emotion-32"
+                        class="emotion-32 emotion-33"
                       />
                     </li>
                   </ul>
                   <div
-                    class="emotion-45 emotion-46"
+                    class="emotion-46 emotion-47"
                   />
                 </div>
               </div>
@@ -3010,18 +3163,7 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
   background: #ffffff;
   border-radius: 4px;
   width: 100%;
-}
-
-.emotion-6[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-  cursor: default;
-}
-
-.emotion-6[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-  cursor: not-allowed;
+  overflow: hidden;
 }
 
 .emotion-6[data-size='small'] {
@@ -3041,30 +3183,61 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
   border: 1px solid #d9dadd;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  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 {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
 .emotion-6[data-state='success'] {
   border: 1px solid #22674e;
 }
 
+.emotion-6[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-6[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
 .emotion-6[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
+.emotion-6[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
+.emotion-6[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
 }
 
-.emotion-6:not([data-disabled='true']):hover,
-.emotion-6:not([data-disabled='true']):focus {
-  border-color: #792dd4;
-  outline: none;
+.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
 }
 
-.emotion-6[data-dropdownvisible='true'] {
-  border-color: #792dd4;
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
 }
 
 .emotion-8 {
@@ -3241,60 +3414,6 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
 }
 
 .emotion-23 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  height: 32px;
-  padding: 0 8px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 8px;
-  border-radius: 4px;
-  box-sizing: border-box;
-  width: 32px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  outline-offset: 2px;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 14px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 20px;
-  paragraph-spacing: 0;
-  text-case: none;
-  background: none;
-  border: none;
-  color: #3f4250;
-}
-
-.emotion-23:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-23:active {
-  box-shadow: 0px 0px 0px 3px #151a2d5c;
-}
-
-.emotion-23:hover,
-.emotion-23:active {
-  background: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-27 {
   vertical-align: middle;
   fill: #3f4250;
   height: 16px;
@@ -3303,12 +3422,12 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
   min-height: 16px;
 }
 
-.emotion-27 .fillStroke {
+.emotion-23 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
 
-.emotion-30 {
+.emotion-26 {
   background: #151a2d;
   color: #ffffff;
   border-radius: 4px;
@@ -3332,14 +3451,15 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
   color: #3f4250;
   box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
   padding: 0;
+  margin-bottom: 80px;
 }
 
-.emotion-30[data-animated="true"] {
+.emotion-26[data-animated="true"] {
   -webkit-animation: 0ms animation-0 forwards;
   animation: 0ms animation-0 forwards;
 }
 
-.emotion-30[data-has-arrow="true"]::after {
+.emotion-26[data-has-arrow="true"]::after {
   content: " ";
   position: absolute;
   top: -5px;
@@ -3355,11 +3475,11 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
   pointer-events: none;
 }
 
-.emotion-30[data-visible-in-dom="false"] {
+.emotion-26[data-visible-in-dom="false"] {
   display: none;
 }
 
-.emotion-32 {
+.emotion-28 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3382,7 +3502,7 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-35 {
+.emotion-31 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3409,7 +3529,7 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
   padding-right: 16px;
 }
 
-.emotion-37 {
+.emotion-33 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3423,69 +3543,69 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
   border-radius: 4px;
 }
 
-.emotion-37>.emotion-44 {
+.emotion-33>.emotion-40 {
   color: #3f4250;
 }
 
-.emotion-37>.emotion-44::-webkit-input-placeholder {
+.emotion-33>.emotion-40::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-37>.emotion-44::-moz-placeholder {
+.emotion-33>.emotion-40::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-37>.emotion-44:-ms-input-placeholder {
+.emotion-33>.emotion-40:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-37>.emotion-44::placeholder {
+.emotion-33>.emotion-40::placeholder {
   color: #727683;
 }
 
-.emotion-37[data-success='true'] {
+.emotion-33[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-37[data-error='true'] {
+.emotion-33[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-37[data-readonly='true'] {
+.emotion-33[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-37[data-disabled='true'] {
+.emotion-33[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-37[data-disabled='true']>.emotion-44 {
+.emotion-33[data-disabled='true']>.emotion-40 {
   color: #b5b7bd;
 }
 
-.emotion-37[data-disabled='true']>.emotion-44::-webkit-input-placeholder {
+.emotion-33[data-disabled='true']>.emotion-40::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-37[data-disabled='true']>.emotion-44::-moz-placeholder {
+.emotion-33[data-disabled='true']>.emotion-40::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-37[data-disabled='true']>.emotion-44:-ms-input-placeholder {
+.emotion-33[data-disabled='true']>.emotion-40:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-37[data-disabled='true']>.emotion-44::placeholder {
+.emotion-33[data-disabled='true']>.emotion-40::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-37:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-33:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-39 {
+.emotion-35 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3511,11 +3631,11 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
   border-color: inherit;
 }
 
-.emotion-39[data-size="small"] {
+.emotion-35[data-size="small"] {
   padding: 8px;
 }
 
-.emotion-43 {
+.emotion-39 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -3528,15 +3648,15 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
   font-size: 14px;
 }
 
-.emotion-43[data-size='large'] {
+.emotion-39[data-size='large'] {
   font-size: 16px;
 }
 
-.emotion-43[data-size='small'] {
+.emotion-39[data-size='small'] {
   padding-left: 8px;
 }
 
-.emotion-45 {
+.emotion-41 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3564,11 +3684,11 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
   padding-top: 4px;
 }
 
-.emotion-45[data-grouped="true"] {
+.emotion-41[data-grouped="true"] {
   padding-top: 0;
 }
 
-.emotion-47 {
+.emotion-43 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3591,13 +3711,13 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-49 {
+.emotion-45 {
   position: -webkit-sticky;
   position: sticky;
   top: 0px;
 }
 
-.emotion-51 {
+.emotion-47 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3623,21 +3743,22 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
   margin-bottom: 2px;
 }
 
-.emotion-51:focus {
+.emotion-47:focus {
   background-color: #f9f9fa;
   outline: none;
 }
 
-.emotion-51[data-selectgroup='true'] {
+.emotion-47[data-selectgroup='true'] {
   padding-left: 16px;
   border-left: 4px solid #f9f9fa;
 }
 
-.emotion-51[data-selectgroup='true']:focus {
+.emotion-47[data-selectgroup='true']:focus {
   background-color: #e9eaeb;
 }
 
-.emotion-53 {
+.emotion-49 {
+  color: #3f4250;
   font-size: 12px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -3649,7 +3770,7 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
   text-align: left;
 }
 
-.emotion-57 {
+.emotion-53 {
   text-align: left;
   border: none;
   background-color: #ffffff;
@@ -3660,32 +3781,32 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
   border-radius: 4px;
 }
 
-.emotion-57:hover,
-.emotion-57:focus {
+.emotion-53:hover,
+.emotion-53:focus {
   background-color: #f1eefc;
   color: #641cb3;
   cursor: pointer;
   outline: none;
 }
 
-.emotion-57[data-selected='true'] {
+.emotion-53[data-selected='true'] {
   background-color: #f1eefc;
 }
 
-.emotion-57[disabled] {
+.emotion-53[disabled] {
   background-color: #f3f3f4;
   color: #b5b7bd;
 }
 
-.emotion-57[disabled]:hover,
-.emotion-57 [disabled]:focus {
+.emotion-53[disabled]:hover,
+.emotion-53 [disabled]:focus {
   background-color: #f3f3f4;
   color: #b5b7bd;
   cursor: not-allowed;
   outline: none;
 }
 
-.emotion-60 {
+.emotion-56 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -3706,65 +3827,65 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
   pointer-events: none;
 }
 
-.emotion-60 .emotion-73 {
+.emotion-56 .emotion-69 {
   cursor: pointer;
 }
 
-.emotion-60[aria-disabled='true'] {
+.emotion-56[aria-disabled='true'] {
   cursor: not-allowed;
   color: #b5b7bd;
 }
 
-.emotion-60[aria-disabled='true'] .emotion-73 {
+.emotion-56[aria-disabled='true'] .emotion-69 {
   cursor: not-allowed;
 }
 
-.emotion-60[aria-disabled='true'] .emotion-65 {
+.emotion-56[aria-disabled='true'] .emotion-61 {
   fill: #e9eaeb;
 }
 
-.emotion-60[aria-disabled='true'] .emotion-65 .emotion-67 {
+.emotion-56[aria-disabled='true'] .emotion-61 .emotion-63 {
   stroke: #d9dadd;
   fill: #f3f3f4;
 }
 
-.emotion-60[aria-disabled='true'] .emotion-63[aria-invalid="true"]:checked+.emotion-65 {
+.emotion-56[aria-disabled='true'] .emotion-59[aria-invalid="true"]:checked+.emotion-61 {
   fill: #ffd3e3;
 }
 
-.emotion-60[aria-disabled='true'] .emotion-63[aria-invalid="true"]:checked+.emotion-65 .emotion-67 {
+.emotion-56[aria-disabled='true'] .emotion-59[aria-invalid="true"]:checked+.emotion-61 .emotion-63 {
   stroke: #ffd3e3;
   fill: #ffd3e3;
 }
 
-.emotion-60[aria-disabled='true'] .emotion-63[aria-invalid="true"]+.emotion-65 {
+.emotion-56[aria-disabled='true'] .emotion-59[aria-invalid="true"]+.emotion-61 {
   fill: #ffebf2;
 }
 
-.emotion-60[aria-disabled='true'] .emotion-63[aria-invalid="true"]+.emotion-65 .emotion-67 {
+.emotion-56[aria-disabled='true'] .emotion-59[aria-invalid="true"]+.emotion-61 .emotion-63 {
   stroke: #ffbbd3;
   fill: #ffebf2;
 }
 
-.emotion-60[aria-disabled='true'] .emotion-63:checked+.emotion-65 {
+.emotion-56[aria-disabled='true'] .emotion-59:checked+.emotion-61 {
   fill: #e5dbfd;
 }
 
-.emotion-60[aria-disabled='true'] .emotion-63:checked+.emotion-65 .emotion-67 {
+.emotion-56[aria-disabled='true'] .emotion-59:checked+.emotion-61 .emotion-63 {
   stroke: #d8c5fc;
   fill: #d8c5fc;
 }
 
-.emotion-60[aria-disabled='true'] .emotion-63[aria-checked="mixed"]+.emotion-65 {
+.emotion-56[aria-disabled='true'] .emotion-59[aria-checked="mixed"]+.emotion-61 {
   fill: #e5dbfd;
 }
 
-.emotion-60[aria-disabled='true'] .emotion-63[aria-checked="mixed"]+.emotion-65 .emotion-67 {
+.emotion-56[aria-disabled='true'] .emotion-59[aria-checked="mixed"]+.emotion-61 .emotion-63 {
   stroke: #e5dbfd;
   fill: #e5dbfd;
 }
 
-.emotion-60 .emotion-63:checked+.emotion-65 path {
+.emotion-56 .emotion-59:checked+.emotion-61 path {
   transform-origin: center;
   -webkit-transition: 200ms -webkit-transform ease-in-out;
   transition: 200ms transform ease-in-out;
@@ -3778,60 +3899,60 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
   transform: translate(2px, 2px);
 }
 
-.emotion-60 .emotion-63:checked+.emotion-65 .emotion-67 {
+.emotion-56 .emotion-59:checked+.emotion-61 .emotion-63 {
   fill: #8c40ef;
   stroke: #8c40ef;
 }
 
-.emotion-60 .emotion-63[aria-invalid="true"]:checked+.emotion-65 .emotion-67 {
+.emotion-56 .emotion-59[aria-invalid="true"]:checked+.emotion-61 .emotion-63 {
   fill: #e51963;
   stroke: #e51963;
 }
 
-.emotion-60 .emotion-63[aria-checked="mixed"]+.emotion-65 .eqr7bqq5 {
+.emotion-56 .emotion-59[aria-checked="mixed"]+.emotion-61 .eqr7bqq6 {
   fill: #ffffff;
 }
 
-.emotion-60 .emotion-63[aria-checked="mixed"]+.emotion-65 .emotion-67 {
+.emotion-56 .emotion-59[aria-checked="mixed"]+.emotion-61 .emotion-63 {
   fill: #8c40ef;
   stroke: #8c40ef;
 }
 
-.emotion-60:hover[aria-disabled='false'] .emotion-63[aria-invalid='false'][aria-checked='false']+.emotion-65 .emotion-67 {
+.emotion-56:hover[aria-disabled='false'] .emotion-59[aria-invalid='false'][aria-checked='false']+.emotion-61 .emotion-63 {
   stroke: #792dd4;
   fill: #e5dbfd;
 }
 
-.emotion-60:hover[aria-disabled='false'] .emotion-63[aria-invalid='false'][aria-checked='true']+.emotion-65 .emotion-67 {
+.emotion-56:hover[aria-disabled='false'] .emotion-59[aria-invalid='false'][aria-checked='true']+.emotion-61 .emotion-63 {
   stroke: #792dd4;
   fill: #792dd4;
 }
 
-.emotion-60:hover[aria-disabled='false'] .emotion-63[aria-invalid='false'][aria-checked='mixed']+.emotion-65 .emotion-67 {
+.emotion-56:hover[aria-disabled='false'] .emotion-59[aria-invalid='false'][aria-checked='mixed']+.emotion-61 .emotion-63 {
   stroke: #792dd4;
   fill: #792dd4;
 }
 
-.emotion-60:hover[aria-disabled='false'] .emotion-63[aria-invalid='true'][aria-checked='false']+.emotion-65 .emotion-67 {
+.emotion-56:hover[aria-disabled='false'] .emotion-59[aria-invalid='true'][aria-checked='false']+.emotion-61 .emotion-63 {
   stroke: #92103f;
   fill: #ffd3e3;
 }
 
-.emotion-60:hover[aria-disabled='false'] .emotion-63[aria-invalid='true'][aria-checked='true']+.emotion-65 .emotion-67 {
+.emotion-56:hover[aria-disabled='false'] .emotion-59[aria-invalid='true'][aria-checked='true']+.emotion-61 .emotion-63 {
   stroke: #d6175c;
   fill: #d6175c;
 }
 
-.emotion-60 .emotion-63[aria-invalid="true"]+.emotion-65 {
+.emotion-56 .emotion-59[aria-invalid="true"]+.emotion-61 {
   fill: #e51963;
 }
 
-.emotion-60 .emotion-63[aria-invalid="true"]+.emotion-65 .emotion-67 {
+.emotion-56 .emotion-59[aria-invalid="true"]+.emotion-61 .emotion-63 {
   stroke: #e51963;
   fill: #ffebf2;
 }
 
-.emotion-62 {
+.emotion-58 {
   position: absolute;
   white-space: nowrap;
   height: 24px;
@@ -3840,57 +3961,57 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
   border-width: 0;
 }
 
-.emotion-62:not(:disabled) {
+.emotion-58:not(:disabled) {
   cursor: pointer;
 }
 
-.emotion-62:disabled {
+.emotion-58:disabled {
   cursor: not-allowed;
 }
 
-.emotion-62:not(:disabled):checked+.emotion-65,
-.emotion-62:not(:disabled)[aria-checked='mixed']+.emotion-65 {
+.emotion-58:not(:disabled):checked+.emotion-61,
+.emotion-58:not(:disabled)[aria-checked='mixed']+.emotion-61 {
   fill: #8c40ef;
 }
 
-.emotion-62:not(:disabled):checked+.emotion-65 .emotion-67,
-.emotion-62:not(:disabled)[aria-checked='mixed']+.emotion-65 .emotion-67 {
+.emotion-58:not(:disabled):checked+.emotion-61 .emotion-63,
+.emotion-58:not(:disabled)[aria-checked='mixed']+.emotion-61 .emotion-63 {
   stroke: #8c40ef;
 }
 
-.emotion-62:not(:disabled)[aria-invalid='true']+.emotion-65,
-.emotion-62:not(:disabled)[aria-invalid='mixed']+.emotion-65 {
+.emotion-58:not(:disabled)[aria-invalid='true']+.emotion-61,
+.emotion-58:not(:disabled)[aria-invalid='mixed']+.emotion-61 {
   fill: #ffebf2;
 }
 
-.emotion-62:not(:disabled)[aria-invalid='true']+.emotion-65 .emotion-67,
-.emotion-62:not(:disabled)[aria-invalid='mixed']+.emotion-65 .emotion-67 {
+.emotion-58:not(:disabled)[aria-invalid='true']+.emotion-61 .emotion-63,
+.emotion-58:not(:disabled)[aria-invalid='mixed']+.emotion-61 .emotion-63 {
   stroke: #b3144d;
 }
 
-.emotion-62:focus+.emotion-65 {
+.emotion-58:focus+.emotion-61 {
   background-color: #f1eefc;
   fill: #ffebf2;
   outline: 1px solid 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-62:focus+.emotion-65 .emotion-67 {
+.emotion-58:focus+.emotion-61 .emotion-63 {
   stroke: #792dd4;
   fill: #e5dbfd;
 }
 
-.emotion-62[aria-invalid='true']:focus+.emotion-65 {
+.emotion-58[aria-invalid='true']:focus+.emotion-61 {
   background-color: #ffebf2;
   fill: #ffebf2;
   outline: 1px solid 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-62[aria-invalid='true']:focus+.emotion-65 .emotion-67 {
+.emotion-58[aria-invalid='true']:focus+.emotion-61 .emotion-63 {
   stroke: #92103f;
   fill: #ffd3e3;
 }
 
-.emotion-64 {
+.emotion-60 {
   border-radius: 4px;
   height: 24px;
   width: 24px;
@@ -3898,7 +4019,7 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
   min-height: 24px;
 }
 
-.emotion-64 path {
+.emotion-60 path {
   fill: #ffffff;
   -webkit-transform: translate(2px, 2px);
   -moz-transform: translate(2px, 2px);
@@ -3910,17 +4031,17 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
   transform: scale(0);
 }
 
-.emotion-66 {
+.emotion-62 {
   fill: #ffffff;
   stroke: #d9dadd;
 }
 
-.emotion-68 {
+.emotion-64 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  gap: 2px;
+  gap: 4px;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
@@ -3941,7 +4062,7 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
   flex: 1;
 }
 
-.emotion-70 {
+.emotion-66 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3967,11 +4088,12 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
   flex: 1;
 }
 
-.emotion-72 {
+.emotion-68 {
   width: 100%;
+  cursor: pointer;
 }
 
-.emotion-76 {
+.emotion-72 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3991,9 +4113,10 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
+  overflow: hidden;
 }
 
-.emotion-78 {
+.emotion-75 {
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -4003,9 +4126,19 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   text-align: left;
+  overflow: auto;
+  text-overflow: ellipsis;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  max-width: 100%;
 }
 
-.emotion-126 {
+.emotion-125 {
   color: #727683;
   font-size: 14px;
   font-family: Inter,Asap,sans-serif;
@@ -4018,7 +4151,7 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
   text-align: left;
 }
 
-.emotion-280 {
+.emotion-285 {
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -4029,7 +4162,7 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
   text-decoration: none;
 }
 
-.emotion-283 {
+.emotion-288 {
   font-size: 12px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -4072,8 +4205,8 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
       class="emotion-0 emotion-1"
     >
       <div
-        aria-controls=":r4i:"
-        aria-describedby=":r4i:"
+        aria-controls=":r4g:"
+        aria-describedby=":r4g:"
         class="emotion-2 emotion-3"
         data-container-full-width="true"
         tabindex="0"
@@ -4091,7 +4224,7 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
             data-size="large"
             data-state="neutral"
             data-testid="select-input-test"
-            id=":r4h:"
+            id=":r4f:"
             role="combobox"
             tabindex="0"
           >
@@ -4128,31 +4261,14 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
             <div
               class="emotion-21 emotion-22"
             >
-              <button
-                aria-label="clear value"
-                class="emotion-23 emotion-18"
-                data-testid="clear-all"
-                type="button"
-              >
-                <svg
-                  class="emotion-19 emotion-20"
-                  viewBox="0 0 16 16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94z"
-                  />
-                </svg>
-              </button>
               <svg
                 aria-label="show dropdown"
-                class="emotion-27 emotion-20"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
+                class="emotion-23 emotion-24"
+                viewBox="0 0 20 20"
               >
                 <path
                   clip-rule="evenodd"
-                  d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06"
+                  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>
@@ -4160,39 +4276,38 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
           </div>
         </div>
         <div
-          class="emotion-29 emotion-30 emotion-31"
+          class="emotion-25 emotion-26 emotion-27"
           data-animated="false"
           data-has-arrow="false"
-          id=":r4i:"
+          id=":r4g:"
           role="dialog"
           style="opacity: 1;"
         >
           <div
-            class="emotion-32 emotion-5"
+            class="emotion-28 emotion-5"
           >
             <div
-              class="emotion-34 emotion-35 emotion-5"
+              class="emotion-30 emotion-31 emotion-5"
             >
               <div>
                 <div
-                  class="emotion-37 emotion-38"
+                  class="emotion-33 emotion-34"
                   data-disabled="false"
                   data-error="false"
                   data-readonly="false"
                   data-success="false"
                 >
                   <div
-                    class="emotion-39 emotion-40"
+                    class="emotion-35 emotion-36"
                     data-size="medium"
                   >
                     <svg
-                      class="emotion-27 emotion-20"
-                      viewBox="0 0 16 16"
-                      xmlns="http://www.w3.org/2000/svg"
+                      class="emotion-23 emotion-24"
+                      viewBox="0 0 20 20"
                     >
                       <path
                         clip-rule="evenodd"
-                        d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06zM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0"
+                        d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11M2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9"
                         fill-rule="evenodd"
                       />
                     </svg>
@@ -4200,10 +4315,10 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
                   <input
                     aria-invalid="false"
                     aria-label="search-bar"
-                    class="emotion-43 emotion-44"
+                    class="emotion-39 emotion-40"
                     data-size="medium"
                     data-testid="search-bar"
-                    id=":r4n:"
+                    id=":r4k:"
                     placeholder="placeholdersearch"
                     type="text"
                     value=""
@@ -4212,19 +4327,19 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
               </div>
             </div>
             <div
-              class="emotion-45 emotion-46"
+              class="emotion-41 emotion-42"
               data-grouped="true"
               id="select-dropdown"
               role="listbox"
             >
               <div
-                class="emotion-47 emotion-5"
+                class="emotion-43 emotion-5"
               >
                 <div
-                  class="emotion-49 emotion-50"
+                  class="emotion-45 emotion-46"
                 >
                   <button
-                    class="emotion-51 emotion-52"
+                    class="emotion-47 emotion-48"
                     data-selectgroup="false"
                     data-testid="group-0"
                     role="group"
@@ -4232,49 +4347,49 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
                     type="button"
                   >
                     <span
-                      class="emotion-53 emotion-15"
+                      class="emotion-49 emotion-15"
                     >
                       TERRESTRIAL PLANETS
                     </span>
                   </button>
                 </div>
                 <div
-                  class="emotion-47 emotion-5"
+                  class="emotion-43 emotion-5"
                   id="items"
                 >
-                  <button
+                  <div
                     aria-label="mercury"
-                    class="emotion-57 emotion-58"
+                    class="emotion-53 emotion-54"
                     data-selected="false"
                     data-testid="option-mercury"
                     id="option-0"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       aria-disabled="false"
-                      class="emotion-59 emotion-60 emotion-61"
+                      class="emotion-55 emotion-56 emotion-57"
                       data-checked="false"
                       data-error="false"
                     >
                       <input
                         aria-checked="false"
                         aria-invalid="false"
-                        class="emotion-62 emotion-63"
-                        id=":r4q:"
+                        class="emotion-58 emotion-59"
+                        id=":r4n:"
                         tabindex="-1"
                         type="checkbox"
                         value="mercury"
                       />
                       <svg
-                        class="emotion-64 emotion-65"
+                        class="emotion-60 emotion-61"
                         fill="none"
                         size="24"
                         viewBox="0 0 24 24"
                       >
                         <g>
                           <rect
-                            class="emotion-66 emotion-67"
+                            class="emotion-62 emotion-63"
                             height="16"
                             rx="2px"
                             stroke-width="2"
@@ -4295,24 +4410,24 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
                         </g>
                       </svg>
                       <div
-                        class="emotion-68 emotion-5"
+                        class="emotion-64 emotion-5"
                       >
                         <div
-                          class="emotion-70 emotion-5"
+                          class="emotion-66 emotion-5"
                         >
                           <label
-                            class="emotion-72 emotion-73"
-                            for=":r4q:"
+                            class="emotion-68 emotion-69"
+                            for=":r4n:"
                           >
                             <div
                               class="emotion-4 emotion-5"
                               data-testid="option-stack-mercury"
                             >
                               <div
-                                class="emotion-76 emotion-5"
+                                class="emotion-72 emotion-73"
                               >
                                 <span
-                                  class="emotion-78 emotion-15"
+                                  class="emotion-74 emotion-75 emotion-15"
                                 >
                                   Mercury
                                 </span>
@@ -4322,40 +4437,40 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
                         </div>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="venus"
-                    class="emotion-57 emotion-58"
+                    class="emotion-53 emotion-54"
                     data-selected="false"
                     data-testid="option-venus"
                     id="option-1"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       aria-disabled="false"
-                      class="emotion-59 emotion-60 emotion-61"
+                      class="emotion-55 emotion-56 emotion-57"
                       data-checked="false"
                       data-error="false"
                     >
                       <input
                         aria-checked="false"
                         aria-invalid="false"
-                        class="emotion-62 emotion-63"
-                        id=":r4u:"
+                        class="emotion-58 emotion-59"
+                        id=":r4r:"
                         tabindex="-1"
                         type="checkbox"
                         value="venus"
                       />
                       <svg
-                        class="emotion-64 emotion-65"
+                        class="emotion-60 emotion-61"
                         fill="none"
                         size="24"
                         viewBox="0 0 24 24"
                       >
                         <g>
                           <rect
-                            class="emotion-66 emotion-67"
+                            class="emotion-62 emotion-63"
                             height="16"
                             rx="2px"
                             stroke-width="2"
@@ -4376,24 +4491,24 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
                         </g>
                       </svg>
                       <div
-                        class="emotion-68 emotion-5"
+                        class="emotion-64 emotion-5"
                       >
                         <div
-                          class="emotion-70 emotion-5"
+                          class="emotion-66 emotion-5"
                         >
                           <label
-                            class="emotion-72 emotion-73"
-                            for=":r4u:"
+                            class="emotion-68 emotion-69"
+                            for=":r4r:"
                           >
                             <div
                               class="emotion-4 emotion-5"
                               data-testid="option-stack-venus"
                             >
                               <div
-                                class="emotion-76 emotion-5"
+                                class="emotion-72 emotion-73"
                               >
                                 <span
-                                  class="emotion-78 emotion-15"
+                                  class="emotion-74 emotion-75 emotion-15"
                                 >
                                   Venus
                                 </span>
@@ -4403,40 +4518,40 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
                         </div>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="earth"
-                    class="emotion-57 emotion-58"
+                    class="emotion-53 emotion-54"
                     data-selected="false"
                     data-testid="option-earth"
                     id="option-2"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       aria-disabled="false"
-                      class="emotion-59 emotion-60 emotion-61"
+                      class="emotion-55 emotion-56 emotion-57"
                       data-checked="false"
                       data-error="false"
                     >
                       <input
                         aria-checked="false"
                         aria-invalid="false"
-                        class="emotion-62 emotion-63"
-                        id=":r52:"
+                        class="emotion-58 emotion-59"
+                        id=":r4v:"
                         tabindex="-1"
                         type="checkbox"
                         value="earth"
                       />
                       <svg
-                        class="emotion-64 emotion-65"
+                        class="emotion-60 emotion-61"
                         fill="none"
                         size="24"
                         viewBox="0 0 24 24"
                       >
                         <g>
                           <rect
-                            class="emotion-66 emotion-67"
+                            class="emotion-62 emotion-63"
                             height="16"
                             rx="2px"
                             stroke-width="2"
@@ -4457,30 +4572,30 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
                         </g>
                       </svg>
                       <div
-                        class="emotion-68 emotion-5"
+                        class="emotion-64 emotion-5"
                       >
                         <div
-                          class="emotion-70 emotion-5"
+                          class="emotion-66 emotion-5"
                         >
                           <label
-                            class="emotion-72 emotion-73"
-                            for=":r52:"
+                            class="emotion-68 emotion-69"
+                            for=":r4v:"
                           >
                             <div
                               class="emotion-4 emotion-5"
                               data-testid="option-stack-earth"
                             >
                               <div
-                                class="emotion-76 emotion-5"
+                                class="emotion-72 emotion-73"
                               >
                                 <span
-                                  class="emotion-78 emotion-15"
+                                  class="emotion-74 emotion-75 emotion-15"
                                 >
                                   Earth
                                 </span>
                               </div>
                               <span
-                                class="emotion-126 emotion-15"
+                                class="emotion-125 emotion-15"
                               >
                                 Our home planet
                               </span>
@@ -4489,42 +4604,42 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
                         </div>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="mars"
-                    class="emotion-57 emotion-58"
+                    class="emotion-53 emotion-54"
                     data-selected="false"
                     data-testid="option-mars"
                     disabled=""
                     id="option-3"
                     role="option"
-                    type="button"
+                    tabindex="-1"
                   >
                     <div
                       aria-disabled="true"
-                      class="emotion-59 emotion-60 emotion-61"
+                      class="emotion-55 emotion-56 emotion-57"
                       data-checked="false"
                       data-error="false"
                     >
                       <input
                         aria-checked="false"
                         aria-invalid="false"
-                        class="emotion-62 emotion-63"
+                        class="emotion-58 emotion-59"
                         disabled=""
-                        id=":r57:"
+                        id=":r54:"
                         tabindex="-1"
                         type="checkbox"
                         value="mars"
                       />
                       <svg
-                        class="emotion-64 emotion-65"
+                        class="emotion-60 emotion-61"
                         fill="none"
                         size="24"
                         viewBox="0 0 24 24"
                       >
                         <g>
                           <rect
-                            class="emotion-66 emotion-67"
+                            class="emotion-62 emotion-63"
                             height="16"
                             rx="2px"
                             stroke-width="2"
@@ -4545,24 +4660,24 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
                         </g>
                       </svg>
                       <div
-                        class="emotion-68 emotion-5"
+                        class="emotion-64 emotion-5"
                       >
                         <div
-                          class="emotion-70 emotion-5"
+                          class="emotion-66 emotion-5"
                         >
                           <label
-                            class="emotion-72 emotion-73"
-                            for=":r57:"
+                            class="emotion-68 emotion-69"
+                            for=":r54:"
                           >
                             <div
                               class="emotion-4 emotion-5"
                               data-testid="option-stack-mars"
                             >
                               <div
-                                class="emotion-76 emotion-5"
+                                class="emotion-72 emotion-73"
                               >
                                 <span
-                                  class="emotion-78 emotion-15"
+                                  class="emotion-74 emotion-75 emotion-15"
                                 >
                                   Mars
                                 </span>
@@ -4572,19 +4687,19 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
                         </div>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="pluto"
-                    class="emotion-57 emotion-58"
+                    class="emotion-53 emotion-54"
                     data-selected="true"
                     data-testid="option-pluto"
                     id="option-4"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       aria-disabled="false"
-                      class="emotion-59 emotion-60 emotion-61"
+                      class="emotion-55 emotion-56 emotion-57"
                       data-checked="true"
                       data-error="false"
                     >
@@ -4592,21 +4707,21 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
                         aria-checked="true"
                         aria-invalid="false"
                         checked=""
-                        class="emotion-62 emotion-63"
-                        id=":r5b:"
+                        class="emotion-58 emotion-59"
+                        id=":r58:"
                         tabindex="-1"
                         type="checkbox"
                         value="pluto"
                       />
                       <svg
-                        class="emotion-64 emotion-65"
+                        class="emotion-60 emotion-61"
                         fill="none"
                         size="24"
                         viewBox="0 0 24 24"
                       >
                         <g>
                           <rect
-                            class="emotion-66 emotion-67"
+                            class="emotion-62 emotion-63"
                             height="16"
                             rx="2px"
                             stroke-width="2"
@@ -4627,30 +4742,30 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
                         </g>
                       </svg>
                       <div
-                        class="emotion-68 emotion-5"
+                        class="emotion-64 emotion-5"
                       >
                         <div
-                          class="emotion-70 emotion-5"
+                          class="emotion-66 emotion-5"
                         >
                           <label
-                            class="emotion-72 emotion-73"
-                            for=":r5b:"
+                            class="emotion-68 emotion-69"
+                            for=":r58:"
                           >
                             <div
                               class="emotion-4 emotion-5"
                               data-testid="option-stack-pluto"
                             >
                               <div
-                                class="emotion-76 emotion-5"
+                                class="emotion-72 emotion-73"
                               >
                                 <span
-                                  class="emotion-78 emotion-15"
+                                  class="emotion-74 emotion-75 emotion-15"
                                 >
                                   Pluto
                                 </span>
                               </div>
                               <span
-                                class="emotion-126 emotion-15"
+                                class="emotion-125 emotion-15"
                               >
                                 Pluto does not fit the usual classification of either terrestrial or Jovian planets, but is rocky
                               </span>
@@ -4659,17 +4774,17 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
                         </div>
                       </div>
                     </div>
-                  </button>
+                  </div>
                 </div>
               </div>
               <div
-                class="emotion-47 emotion-5"
+                class="emotion-43 emotion-5"
               >
                 <div
-                  class="emotion-49 emotion-50"
+                  class="emotion-45 emotion-46"
                 >
                   <button
-                    class="emotion-51 emotion-52"
+                    class="emotion-47 emotion-48"
                     data-selectgroup="false"
                     data-testid="group-1"
                     role="group"
@@ -4677,49 +4792,49 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
                     type="button"
                   >
                     <span
-                      class="emotion-53 emotion-15"
+                      class="emotion-49 emotion-15"
                     >
                       JOVIAN PLANETS
                     </span>
                   </button>
                 </div>
                 <div
-                  class="emotion-47 emotion-5"
+                  class="emotion-43 emotion-5"
                   id="items"
                 >
-                  <button
+                  <div
                     aria-label="jupiter"
-                    class="emotion-57 emotion-58"
+                    class="emotion-53 emotion-54"
                     data-selected="false"
                     data-testid="option-jupiter"
                     id="option-0"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       aria-disabled="false"
-                      class="emotion-59 emotion-60 emotion-61"
+                      class="emotion-55 emotion-56 emotion-57"
                       data-checked="false"
                       data-error="false"
                     >
                       <input
                         aria-checked="false"
                         aria-invalid="false"
-                        class="emotion-62 emotion-63"
-                        id=":r5h:"
+                        class="emotion-58 emotion-59"
+                        id=":r5e:"
                         tabindex="-1"
                         type="checkbox"
                         value="jupiter"
                       />
                       <svg
-                        class="emotion-64 emotion-65"
+                        class="emotion-60 emotion-61"
                         fill="none"
                         size="24"
                         viewBox="0 0 24 24"
                       >
                         <g>
                           <rect
-                            class="emotion-66 emotion-67"
+                            class="emotion-62 emotion-63"
                             height="16"
                             rx="2px"
                             stroke-width="2"
@@ -4740,30 +4855,30 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
                         </g>
                       </svg>
                       <div
-                        class="emotion-68 emotion-5"
+                        class="emotion-64 emotion-5"
                       >
                         <div
-                          class="emotion-70 emotion-5"
+                          class="emotion-66 emotion-5"
                         >
                           <label
-                            class="emotion-72 emotion-73"
-                            for=":r5h:"
+                            class="emotion-68 emotion-69"
+                            for=":r5e:"
                           >
                             <div
                               class="emotion-4 emotion-5"
                               data-testid="option-stack-jupiter"
                             >
                               <div
-                                class="emotion-76 emotion-5"
+                                class="emotion-72 emotion-73"
                               >
                                 <span
-                                  class="emotion-78 emotion-15"
+                                  class="emotion-74 emotion-75 emotion-15"
                                 >
                                   Jupiter
                                 </span>
                               </div>
                               <span
-                                class="emotion-126 emotion-15"
+                                class="emotion-125 emotion-15"
                               >
                                 Jupiter is the fifth planet from the Sun and the largest in the Solar System. It is a gas giant with a mass more than two and a half times that of all the other planets in the Solar System combined, and slightly less than one one-thousandth the mass of the Sun.
                               </span>
@@ -4772,40 +4887,40 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
                         </div>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="saturn"
-                    class="emotion-57 emotion-58"
+                    class="emotion-53 emotion-54"
                     data-selected="false"
                     data-testid="option-saturn"
                     id="option-1"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       aria-disabled="false"
-                      class="emotion-59 emotion-60 emotion-61"
+                      class="emotion-55 emotion-56 emotion-57"
                       data-checked="false"
                       data-error="false"
                     >
                       <input
                         aria-checked="false"
                         aria-invalid="false"
-                        class="emotion-62 emotion-63"
-                        id=":r5m:"
+                        class="emotion-58 emotion-59"
+                        id=":r5j:"
                         tabindex="-1"
                         type="checkbox"
                         value="saturn"
                       />
                       <svg
-                        class="emotion-64 emotion-65"
+                        class="emotion-60 emotion-61"
                         fill="none"
                         size="24"
                         viewBox="0 0 24 24"
                       >
                         <g>
                           <rect
-                            class="emotion-66 emotion-67"
+                            class="emotion-62 emotion-63"
                             height="16"
                             rx="2px"
                             stroke-width="2"
@@ -4826,24 +4941,24 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
                         </g>
                       </svg>
                       <div
-                        class="emotion-68 emotion-5"
+                        class="emotion-64 emotion-5"
                       >
                         <div
-                          class="emotion-70 emotion-5"
+                          class="emotion-66 emotion-5"
                         >
                           <label
-                            class="emotion-72 emotion-73"
-                            for=":r5m:"
+                            class="emotion-68 emotion-69"
+                            for=":r5j:"
                           >
                             <div
                               class="emotion-4 emotion-5"
                               data-testid="option-stack-saturn"
                             >
                               <div
-                                class="emotion-76 emotion-5"
+                                class="emotion-72 emotion-73"
                               >
                                 <span
-                                  class="emotion-78 emotion-15"
+                                  class="emotion-74 emotion-75 emotion-15"
                                 >
                                   Saturn
                                 </span>
@@ -4853,40 +4968,40 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
                         </div>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="uranus"
-                    class="emotion-57 emotion-58"
+                    class="emotion-53 emotion-54"
                     data-selected="false"
                     data-testid="option-uranus"
                     id="option-2"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       aria-disabled="false"
-                      class="emotion-59 emotion-60 emotion-61"
+                      class="emotion-55 emotion-56 emotion-57"
                       data-checked="false"
                       data-error="false"
                     >
                       <input
                         aria-checked="false"
                         aria-invalid="false"
-                        class="emotion-62 emotion-63"
-                        id=":r5q:"
+                        class="emotion-58 emotion-59"
+                        id=":r5n:"
                         tabindex="-1"
                         type="checkbox"
                         value="uranus"
                       />
                       <svg
-                        class="emotion-64 emotion-65"
+                        class="emotion-60 emotion-61"
                         fill="none"
                         size="24"
                         viewBox="0 0 24 24"
                       >
                         <g>
                           <rect
-                            class="emotion-66 emotion-67"
+                            class="emotion-62 emotion-63"
                             height="16"
                             rx="2px"
                             stroke-width="2"
@@ -4907,24 +5022,24 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
                         </g>
                       </svg>
                       <div
-                        class="emotion-68 emotion-5"
+                        class="emotion-64 emotion-5"
                       >
                         <div
-                          class="emotion-70 emotion-5"
+                          class="emotion-66 emotion-5"
                         >
                           <label
-                            class="emotion-72 emotion-73"
-                            for=":r5q:"
+                            class="emotion-68 emotion-69"
+                            for=":r5n:"
                           >
                             <div
                               class="emotion-4 emotion-5"
                               data-testid="option-stack-uranus"
                             >
                               <div
-                                class="emotion-76 emotion-5"
+                                class="emotion-72 emotion-73"
                               >
                                 <span
-                                  class="emotion-78 emotion-15"
+                                  class="emotion-74 emotion-75 emotion-15"
                                 >
                                   Uranus
                                 </span>
@@ -4934,40 +5049,40 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
                         </div>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="neptune"
-                    class="emotion-57 emotion-58"
+                    class="emotion-53 emotion-54"
                     data-selected="false"
                     data-testid="option-neptune"
                     id="option-3"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       aria-disabled="false"
-                      class="emotion-59 emotion-60 emotion-61"
+                      class="emotion-55 emotion-56 emotion-57"
                       data-checked="false"
                       data-error="false"
                     >
                       <input
                         aria-checked="false"
                         aria-invalid="false"
-                        class="emotion-62 emotion-63"
-                        id=":r5u:"
+                        class="emotion-58 emotion-59"
+                        id=":r5r:"
                         tabindex="-1"
                         type="checkbox"
                         value="neptune"
                       />
                       <svg
-                        class="emotion-64 emotion-65"
+                        class="emotion-60 emotion-61"
                         fill="none"
                         size="24"
                         viewBox="0 0 24 24"
                       >
                         <g>
                           <rect
-                            class="emotion-66 emotion-67"
+                            class="emotion-62 emotion-63"
                             height="16"
                             rx="2px"
                             stroke-width="2"
@@ -4988,31 +5103,31 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
                         </g>
                       </svg>
                       <div
-                        class="emotion-68 emotion-5"
+                        class="emotion-64 emotion-5"
                       >
                         <div
-                          class="emotion-70 emotion-5"
+                          class="emotion-66 emotion-5"
                         >
                           <label
-                            class="emotion-72 emotion-73"
-                            for=":r5u:"
+                            class="emotion-68 emotion-69"
+                            for=":r5r:"
                           >
                             <div
                               class="emotion-4 emotion-5"
                               data-testid="option-stack-neptune"
                             >
                               <div
-                                class="emotion-76 emotion-5"
+                                class="emotion-72 emotion-73"
                               >
                                 <span
-                                  class="emotion-78 emotion-15"
+                                  class="emotion-74 emotion-75 emotion-15"
                                 >
                                   <div
-                                    class="emotion-280 emotion-15"
+                                    class="emotion-285 emotion-15"
                                   >
                                     Neptune 
                                     <span
-                                      class="emotion-282 emotion-283 emotion-15"
+                                      class="emotion-287 emotion-288 emotion-15"
                                     >
                                       Label
                                     </span>
@@ -5024,7 +5139,7 @@ exports[`SelectInputV2 > renders correctly multiselect 1`] = `
                         </div>
                       </div>
                     </div>
-                  </button>
+                  </div>
                 </div>
               </div>
             </div>
@@ -5105,18 +5220,7 @@ exports[`SelectInputV2 > renders correctly not clearable 1`] = `
   background: #ffffff;
   border-radius: 4px;
   width: 100%;
-}
-
-.emotion-6[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-  cursor: default;
-}
-
-.emotion-6[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-  cursor: not-allowed;
+  overflow: hidden;
 }
 
 .emotion-6[data-size='small'] {
@@ -5136,33 +5240,65 @@ exports[`SelectInputV2 > renders correctly not clearable 1`] = `
   border: 1px solid #d9dadd;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  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 {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
 .emotion-6[data-state='success'] {
   border: 1px solid #22674e;
 }
 
+.emotion-6[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-6[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
 .emotion-6[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
+.emotion-6[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
+.emotion-6[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
 }
 
-.emotion-6:not([data-disabled='true']):hover,
-.emotion-6:not([data-disabled='true']):focus {
-  border-color: #792dd4;
-  outline: none;
+.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
 }
 
-.emotion-6[data-dropdownvisible='true'] {
-  border-color: #792dd4;
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
 }
 
-.emotion-8 {
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-9 {
+  color: #3f4250;
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -5171,9 +5307,11 @@ exports[`SelectInputV2 > renders correctly not clearable 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
-.emotion-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5201,7 +5339,7 @@ exports[`SelectInputV2 > renders correctly not clearable 1`] = `
   display: flex;
 }
 
-.emotion-12 {
+.emotion-13 {
   vertical-align: middle;
   fill: #3f4250;
   height: 16px;
@@ -5210,7 +5348,7 @@ exports[`SelectInputV2 > renders correctly not clearable 1`] = `
   min-height: 16px;
 }
 
-.emotion-12 .fillStroke {
+.emotion-13 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
@@ -5246,23 +5384,22 @@ exports[`SelectInputV2 > renders correctly not clearable 1`] = `
             role="combobox"
             tabindex="0"
           >
-            <p
-              class="emotion-8 emotion-9"
+            <div
+              class="emotion-8 emotion-9 emotion-10"
             >
               Jupiter
-            </p>
+            </div>
             <div
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
             >
               <svg
                 aria-label="show dropdown"
-                class="emotion-12 emotion-13"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
+                class="emotion-13 emotion-14"
+                viewBox="0 0 20 20"
               >
                 <path
                   clip-rule="evenodd"
-                  d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06"
+                  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>
@@ -5344,18 +5481,7 @@ exports[`SelectInputV2 > renders correctly readOnly 1`] = `
   background: #ffffff;
   border-radius: 4px;
   width: 100%;
-}
-
-.emotion-6[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-  cursor: default;
-}
-
-.emotion-6[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-  cursor: not-allowed;
+  overflow: hidden;
 }
 
 .emotion-6[data-size='small'] {
@@ -5375,45 +5501,80 @@ exports[`SelectInputV2 > renders correctly readOnly 1`] = `
   border: 1px solid #d9dadd;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  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 {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
 .emotion-6[data-state='success'] {
   border: 1px solid #22674e;
 }
 
-.emotion-6[data-state='danger'] {
-  border: 1px solid #b3144d;
+.emotion-6[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
+.emotion-6[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
+.emotion-6[data-state='danger'] {
+  border: 1px solid #b3144d;
 }
 
-.emotion-6:not([data-disabled='true']):hover,
-.emotion-6:not([data-disabled='true']):focus {
-  border-color: #792dd4;
-  outline: none;
+.emotion-6[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-6[data-dropdownvisible='true'] {
-  border-color: #792dd4;
+.emotion-6[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
 }
 
-.emotion-8 {
-  color: #727683;
-  font-size: 16px;
-  font-family: Inter,Asap,sans-serif;
+.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
+}
+
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-9 {
+  color: #727683;
+  font-size: 16px;
+  font-family: Inter,Asap,sans-serif;
   font-weight: 400;
   letter-spacing: 0;
   line-height: 24px;
   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-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5441,7 +5602,7 @@ exports[`SelectInputV2 > renders correctly readOnly 1`] = `
   display: flex;
 }
 
-.emotion-12 {
+.emotion-13 {
   vertical-align: middle;
   fill: #b5b7bd;
   height: 16px;
@@ -5450,7 +5611,7 @@ exports[`SelectInputV2 > renders correctly readOnly 1`] = `
   min-height: 16px;
 }
 
-.emotion-12 .fillStroke {
+.emotion-13 .fillStroke {
   stroke: #b5b7bd;
   fill: none;
 }
@@ -5463,8 +5624,8 @@ exports[`SelectInputV2 > renders correctly readOnly 1`] = `
       class="emotion-0 emotion-1"
     >
       <div
-        aria-controls=":rbl:"
-        aria-describedby=":rbl:"
+        aria-controls=":rbg:"
+        aria-describedby=":rbg:"
         class="emotion-2 emotion-3"
         data-container-full-width="true"
         tabindex="0"
@@ -5482,27 +5643,26 @@ exports[`SelectInputV2 > renders correctly readOnly 1`] = `
             data-size="large"
             data-state="neutral"
             data-testid="select-input-test"
-            id=":rbk:"
+            id=":rbf:"
             role="combobox"
             tabindex="0"
           >
             <p
-              class="emotion-8 emotion-9"
+              class="emotion-8 emotion-9 emotion-10"
             >
               placeholder
             </p>
             <div
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
             >
               <svg
                 aria-label="show dropdown"
-                class="emotion-12 emotion-13"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
+                class="emotion-13 emotion-14"
+                viewBox="0 0 20 20"
               >
                 <path
                   clip-rule="evenodd"
-                  d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06"
+                  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>
@@ -5576,7 +5736,7 @@ exports[`SelectInputV2 > renders correctly required 1`] = `
 }
 
 .emotion-8 {
-  color: #3f4250;
+  color: #222638;
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -5633,18 +5793,7 @@ exports[`SelectInputV2 > renders correctly required 1`] = `
   background: #ffffff;
   border-radius: 4px;
   width: 100%;
-}
-
-.emotion-12[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-  cursor: default;
-}
-
-.emotion-12[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-  cursor: not-allowed;
+  overflow: hidden;
 }
 
 .emotion-12[data-size='small'] {
@@ -5664,33 +5813,64 @@ exports[`SelectInputV2 > renders correctly required 1`] = `
   border: 1px solid #d9dadd;
 }
 
+.emotion-12[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-12[data-state='neutral']:not([data-disabled='true']):hover,
+.emotion-12[data-state='neutral']:not([data-disabled='true']):focus {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-12[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
 .emotion-12[data-state='success'] {
   border: 1px solid #22674e;
 }
 
+.emotion-12[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-12[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
 .emotion-12[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
+.emotion-12[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-12:not([data-disabled='true']):not([data-readonly]):active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
+.emotion-12[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
 }
 
-.emotion-12:not([data-disabled='true']):hover,
-.emotion-12:not([data-disabled='true']):focus {
-  border-color: #792dd4;
-  outline: none;
+.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
 }
 
-.emotion-12[data-dropdownvisible='true'] {
-  border-color: #792dd4;
+.emotion-12[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
 }
 
-.emotion-14 {
+.emotion-12[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-15 {
   color: #727683;
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
@@ -5700,9 +5880,13 @@ exports[`SelectInputV2 > renders correctly required 1`] = `
   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-16 {
+.emotion-17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5730,7 +5914,7 @@ exports[`SelectInputV2 > renders correctly required 1`] = `
   display: flex;
 }
 
-.emotion-18 {
+.emotion-19 {
   vertical-align: middle;
   fill: #3f4250;
   height: 16px;
@@ -5739,7 +5923,7 @@ exports[`SelectInputV2 > renders correctly required 1`] = `
   min-height: 16px;
 }
 
-.emotion-18 .fillStroke {
+.emotion-19 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
@@ -5771,8 +5955,7 @@ exports[`SelectInputV2 > renders correctly required 1`] = `
             </label>
             <svg
               class="emotion-10 emotion-11"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
             >
               <path
                 d="M10 2h4l-.79 7.91 6.45-4.64 2 3.46L14.42 12l7.24 3.27-2 3.46-6.45-4.64L14 22h-4l.79-7.91-6.45 4.64-2-3.46L9.58 12 2.34 8.73l2-3.46 6.45 4.64z"
@@ -5795,22 +5978,21 @@ exports[`SelectInputV2 > renders correctly required 1`] = `
             tabindex="0"
           >
             <p
-              class="emotion-14 emotion-9"
+              class="emotion-14 emotion-15 emotion-9"
             >
               Select item
             </p>
             <div
-              class="emotion-16 emotion-17"
+              class="emotion-17 emotion-18"
             >
               <svg
                 aria-label="show dropdown"
-                class="emotion-18 emotion-11"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
+                class="emotion-19 emotion-11"
+                viewBox="0 0 20 20"
               >
                 <path
                   clip-rule="evenodd"
-                  d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06"
+                  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>
@@ -5910,18 +6092,7 @@ exports[`SelectInputV2 > renders correctly required 2`] = `
   background: #ffffff;
   border-radius: 4px;
   width: 100%;
-}
-
-.emotion-6[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-  cursor: default;
-}
-
-.emotion-6[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-  cursor: not-allowed;
+  overflow: hidden;
 }
 
 .emotion-6[data-size='small'] {
@@ -5941,33 +6112,64 @@ exports[`SelectInputV2 > renders correctly required 2`] = `
   border: 1px solid #d9dadd;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  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 {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
 .emotion-6[data-state='success'] {
   border: 1px solid #22674e;
 }
 
+.emotion-6[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-6[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
 .emotion-6[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
+.emotion-6[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
+.emotion-6[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
 }
 
-.emotion-6:not([data-disabled='true']):hover,
-.emotion-6:not([data-disabled='true']):focus {
-  border-color: #792dd4;
-  outline: none;
+.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
 }
 
-.emotion-6[data-dropdownvisible='true'] {
-  border-color: #792dd4;
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
 }
 
-.emotion-8 {
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-9 {
   color: #727683;
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
@@ -5977,9 +6179,13 @@ exports[`SelectInputV2 > renders correctly required 2`] = `
   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-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6007,7 +6213,7 @@ exports[`SelectInputV2 > renders correctly required 2`] = `
   display: flex;
 }
 
-.emotion-12 {
+.emotion-13 {
   vertical-align: middle;
   fill: #3f4250;
   height: 16px;
@@ -6016,12 +6222,12 @@ exports[`SelectInputV2 > renders correctly required 2`] = `
   min-height: 16px;
 }
 
-.emotion-12 .fillStroke {
+.emotion-13 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
 
-.emotion-15 {
+.emotion-16 {
   background: #151a2d;
   color: #ffffff;
   border-radius: 4px;
@@ -6045,14 +6251,15 @@ exports[`SelectInputV2 > renders correctly required 2`] = `
   color: #3f4250;
   box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
   padding: 0;
+  margin-bottom: 80px;
 }
 
-.emotion-15[data-animated="true"] {
+.emotion-16[data-animated="true"] {
   -webkit-animation: 0ms animation-0 forwards;
   animation: 0ms animation-0 forwards;
 }
 
-.emotion-15[data-has-arrow="true"]::after {
+.emotion-16[data-has-arrow="true"]::after {
   content: " ";
   position: absolute;
   top: -5px;
@@ -6068,11 +6275,11 @@ exports[`SelectInputV2 > renders correctly required 2`] = `
   pointer-events: none;
 }
 
-.emotion-15[data-visible-in-dom="false"] {
+.emotion-16[data-visible-in-dom="false"] {
   display: none;
 }
 
-.emotion-17 {
+.emotion-18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6095,7 +6302,7 @@ exports[`SelectInputV2 > renders correctly required 2`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-20 {
+.emotion-21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6122,7 +6329,7 @@ exports[`SelectInputV2 > renders correctly required 2`] = `
   padding-right: 16px;
 }
 
-.emotion-22 {
+.emotion-23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6136,69 +6343,69 @@ exports[`SelectInputV2 > renders correctly required 2`] = `
   border-radius: 4px;
 }
 
-.emotion-22>.emotion-29 {
+.emotion-23>.emotion-30 {
   color: #3f4250;
 }
 
-.emotion-22>.emotion-29::-webkit-input-placeholder {
+.emotion-23>.emotion-30::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-22>.emotion-29::-moz-placeholder {
+.emotion-23>.emotion-30::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-22>.emotion-29:-ms-input-placeholder {
+.emotion-23>.emotion-30:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-22>.emotion-29::placeholder {
+.emotion-23>.emotion-30::placeholder {
   color: #727683;
 }
 
-.emotion-22[data-success='true'] {
+.emotion-23[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-22[data-error='true'] {
+.emotion-23[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-22[data-readonly='true'] {
+.emotion-23[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-22[data-disabled='true'] {
+.emotion-23[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29 {
+.emotion-23[data-disabled='true']>.emotion-30 {
   color: #b5b7bd;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29::-webkit-input-placeholder {
+.emotion-23[data-disabled='true']>.emotion-30::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29::-moz-placeholder {
+.emotion-23[data-disabled='true']>.emotion-30::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29:-ms-input-placeholder {
+.emotion-23[data-disabled='true']>.emotion-30:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29::placeholder {
+.emotion-23[data-disabled='true']>.emotion-30::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-22:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-23:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-24 {
+.emotion-25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6224,11 +6431,11 @@ exports[`SelectInputV2 > renders correctly required 2`] = `
   border-color: inherit;
 }
 
-.emotion-24[data-size="small"] {
+.emotion-25[data-size="small"] {
   padding: 8px;
 }
 
-.emotion-28 {
+.emotion-29 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -6241,15 +6448,15 @@ exports[`SelectInputV2 > renders correctly required 2`] = `
   font-size: 14px;
 }
 
-.emotion-28[data-size='large'] {
+.emotion-29[data-size='large'] {
   font-size: 16px;
 }
 
-.emotion-28[data-size='small'] {
+.emotion-29[data-size='small'] {
   padding-left: 8px;
 }
 
-.emotion-30 {
+.emotion-31 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6277,11 +6484,11 @@ exports[`SelectInputV2 > renders correctly required 2`] = `
   padding-top: 4px;
 }
 
-.emotion-30[data-grouped="true"] {
+.emotion-31[data-grouped="true"] {
   padding-top: 0;
 }
 
-.emotion-32 {
+.emotion-33 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6304,7 +6511,7 @@ exports[`SelectInputV2 > renders correctly required 2`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-34 {
+.emotion-35 {
   text-align: left;
   border: none;
   background-color: #ffffff;
@@ -6315,32 +6522,32 @@ exports[`SelectInputV2 > renders correctly required 2`] = `
   border-radius: 4px;
 }
 
-.emotion-34:hover,
-.emotion-34:focus {
+.emotion-35:hover,
+.emotion-35:focus {
   background-color: #f1eefc;
   color: #641cb3;
   cursor: pointer;
   outline: none;
 }
 
-.emotion-34[data-selected='true'] {
+.emotion-35[data-selected='true'] {
   background-color: #f1eefc;
 }
 
-.emotion-34[disabled] {
+.emotion-35[disabled] {
   background-color: #f3f3f4;
   color: #b5b7bd;
 }
 
-.emotion-34[disabled]:hover,
-.emotion-34 [disabled]:focus {
+.emotion-35[disabled]:hover,
+.emotion-35 [disabled]:focus {
   background-color: #f3f3f4;
   color: #b5b7bd;
   cursor: not-allowed;
   outline: none;
 }
 
-.emotion-38 {
+.emotion-39 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6360,9 +6567,10 @@ exports[`SelectInputV2 > renders correctly required 2`] = `
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
+  overflow: hidden;
 }
 
-.emotion-40 {
+.emotion-42 {
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -6372,9 +6580,19 @@ exports[`SelectInputV2 > renders correctly required 2`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   text-align: left;
+  overflow: auto;
+  text-overflow: ellipsis;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  max-width: 100%;
 }
 
-.emotion-58 {
+.emotion-62 {
   color: #727683;
   font-size: 14px;
   font-family: Inter,Asap,sans-serif;
@@ -6387,7 +6605,7 @@ exports[`SelectInputV2 > renders correctly required 2`] = `
   text-align: left;
 }
 
-.emotion-104 {
+.emotion-113 {
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -6398,7 +6616,7 @@ exports[`SelectInputV2 > renders correctly required 2`] = `
   text-decoration: none;
 }
 
-.emotion-107 {
+.emotion-116 {
   font-size: 12px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -6441,8 +6659,8 @@ exports[`SelectInputV2 > renders correctly required 2`] = `
       class="emotion-0 emotion-1"
     >
       <div
-        aria-controls=":rar:"
-        aria-describedby=":rar:"
+        aria-controls=":ram:"
+        aria-describedby=":ram:"
         class="emotion-2 emotion-3"
         data-container-full-width="true"
         tabindex="0"
@@ -6460,27 +6678,26 @@ exports[`SelectInputV2 > renders correctly required 2`] = `
             data-size="large"
             data-state="neutral"
             data-testid="select-input-test"
-            id=":raq:"
+            id=":ral:"
             role="combobox"
             tabindex="0"
           >
             <p
-              class="emotion-8 emotion-9"
+              class="emotion-8 emotion-9 emotion-10"
             >
               placeholder
             </p>
             <div
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
             >
               <svg
                 aria-label="show dropdown"
-                class="emotion-12 emotion-13"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
+                class="emotion-13 emotion-14"
+                viewBox="0 0 20 20"
               >
                 <path
                   clip-rule="evenodd"
-                  d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06"
+                  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>
@@ -6488,39 +6705,38 @@ exports[`SelectInputV2 > renders correctly required 2`] = `
           </div>
         </div>
         <div
-          class="emotion-14 emotion-15 emotion-16"
+          class="emotion-15 emotion-16 emotion-17"
           data-animated="false"
           data-has-arrow="false"
-          id=":rar:"
+          id=":ram:"
           role="dialog"
           style="opacity: 1;"
         >
           <div
-            class="emotion-17 emotion-5"
+            class="emotion-18 emotion-5"
           >
             <div
-              class="emotion-19 emotion-20 emotion-5"
+              class="emotion-20 emotion-21 emotion-5"
             >
               <div>
                 <div
-                  class="emotion-22 emotion-23"
+                  class="emotion-23 emotion-24"
                   data-disabled="false"
                   data-error="false"
                   data-readonly="false"
                   data-success="false"
                 >
                   <div
-                    class="emotion-24 emotion-25"
+                    class="emotion-25 emotion-26"
                     data-size="medium"
                   >
                     <svg
-                      class="emotion-12 emotion-13"
-                      viewBox="0 0 16 16"
-                      xmlns="http://www.w3.org/2000/svg"
+                      class="emotion-13 emotion-14"
+                      viewBox="0 0 20 20"
                     >
                       <path
                         clip-rule="evenodd"
-                        d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06zM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0"
+                        d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11M2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9"
                         fill-rule="evenodd"
                       />
                     </svg>
@@ -6528,10 +6744,10 @@ exports[`SelectInputV2 > renders correctly required 2`] = `
                   <input
                     aria-invalid="false"
                     aria-label="search-bar"
-                    class="emotion-28 emotion-29"
+                    class="emotion-29 emotion-30"
                     data-size="medium"
                     data-testid="search-bar"
-                    id=":rau:"
+                    id=":rap:"
                     placeholder="placeholdersearch"
                     type="text"
                     value=""
@@ -6540,105 +6756,106 @@ exports[`SelectInputV2 > renders correctly required 2`] = `
               </div>
             </div>
             <div
-              class="emotion-30 emotion-31"
+              class="emotion-31 emotion-32"
               data-grouped="false"
               id="select-dropdown"
               role="listbox"
+              tabindex="-1"
             >
               <div
-                class="emotion-32 emotion-5"
+                class="emotion-33 emotion-5"
                 id="items"
               >
-                <button
+                <div
                   aria-label="mercury"
-                  class="emotion-34 emotion-35"
+                  class="emotion-35 emotion-36"
                   data-selected="false"
                   data-testid="option-mercury"
                   id="option-0"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-mercury"
                   >
                     <div
-                      class="emotion-38 emotion-5"
+                      class="emotion-39 emotion-40"
                     >
                       <span
-                        class="emotion-40 emotion-9"
+                        class="emotion-41 emotion-42 emotion-10"
                       >
                         Mercury
                       </span>
                     </div>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="venus"
-                  class="emotion-34 emotion-35"
+                  class="emotion-35 emotion-36"
                   data-selected="false"
                   data-testid="option-venus"
                   id="option-1"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-venus"
                   >
                     <div
-                      class="emotion-38 emotion-5"
+                      class="emotion-39 emotion-40"
                     >
                       <span
-                        class="emotion-40 emotion-9"
+                        class="emotion-41 emotion-42 emotion-10"
                       >
                         Venus
                       </span>
                     </div>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="earth"
-                  class="emotion-34 emotion-35"
+                  class="emotion-35 emotion-36"
                   data-selected="false"
                   data-testid="option-earth"
                   id="option-2"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-earth"
                   >
                     <div
-                      class="emotion-38 emotion-5"
+                      class="emotion-39 emotion-40"
                     >
                       <span
-                        class="emotion-40 emotion-9"
+                        class="emotion-41 emotion-42 emotion-10"
                       >
                         Earth
                       </span>
                     </div>
                     <span
-                      class="emotion-58 emotion-9"
+                      class="emotion-62 emotion-10"
                     >
                       Our home planet
                     </span>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="mars"
-                  class="emotion-34 emotion-35"
+                  class="emotion-35 emotion-36"
                   data-selected="false"
                   data-testid="option-mars"
                   disabled=""
                   id="option-3"
                   role="option"
-                  type="button"
+                  tabindex="-1"
                 >
                   <div
-                    aria-controls=":rb7:"
-                    aria-describedby=":rb7:"
+                    aria-controls=":rb2:"
+                    aria-describedby=":rb2:"
                     class="emotion-2 emotion-3"
                     tabindex="0"
                   >
@@ -6647,119 +6864,119 @@ exports[`SelectInputV2 > renders correctly required 2`] = `
                       data-testid="option-stack-mars"
                     >
                       <div
-                        class="emotion-38 emotion-5"
+                        class="emotion-39 emotion-40"
                       >
                         <span
-                          class="emotion-40 emotion-9"
+                          class="emotion-41 emotion-42 emotion-10"
                         >
                           Mars
                         </span>
                       </div>
                     </div>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="jupiter"
-                  class="emotion-34 emotion-35"
+                  class="emotion-35 emotion-36"
                   data-selected="false"
                   data-testid="option-jupiter"
                   id="option-4"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-jupiter"
                   >
                     <div
-                      class="emotion-38 emotion-5"
+                      class="emotion-39 emotion-40"
                     >
                       <span
-                        class="emotion-40 emotion-9"
+                        class="emotion-41 emotion-42 emotion-10"
                       >
                         Jupiter
                       </span>
                     </div>
                     <span
-                      class="emotion-58 emotion-9"
+                      class="emotion-62 emotion-10"
                     >
                       Jupiter is the fifth planet from the Sun and the largest in the Solar System. It is a gas giant with a mass more than two and a half times that of all the other planets in the Solar System combined, and slightly less than one one-thousandth the mass of the Sun.
                     </span>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="saturn"
-                  class="emotion-34 emotion-35"
+                  class="emotion-35 emotion-36"
                   data-selected="false"
                   data-testid="option-saturn"
                   id="option-5"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-saturn"
                   >
                     <div
-                      class="emotion-38 emotion-5"
+                      class="emotion-39 emotion-40"
                     >
                       <span
-                        class="emotion-40 emotion-9"
+                        class="emotion-41 emotion-42 emotion-10"
                       >
                         Saturn
                       </span>
                     </div>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="uranus"
-                  class="emotion-34 emotion-35"
+                  class="emotion-35 emotion-36"
                   data-selected="false"
                   data-testid="option-uranus"
                   id="option-6"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-uranus"
                   >
                     <div
-                      class="emotion-38 emotion-5"
+                      class="emotion-39 emotion-40"
                     >
                       <span
-                        class="emotion-40 emotion-9"
+                        class="emotion-41 emotion-42 emotion-10"
                       >
                         Uranus
                       </span>
                     </div>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="neptune"
-                  class="emotion-34 emotion-35"
+                  class="emotion-35 emotion-36"
                   data-selected="false"
                   data-testid="option-neptune"
                   id="option-7"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-neptune"
                   >
                     <div
-                      class="emotion-38 emotion-5"
+                      class="emotion-39 emotion-40"
                     >
                       <span
-                        class="emotion-40 emotion-9"
+                        class="emotion-41 emotion-42 emotion-10"
                       >
                         <div
-                          class="emotion-104 emotion-9"
+                          class="emotion-113 emotion-10"
                         >
                           Neptune 
                           <span
-                            class="emotion-106 emotion-107 emotion-9"
+                            class="emotion-115 emotion-116 emotion-10"
                           >
                             Label
                           </span>
@@ -6767,7 +6984,7 @@ exports[`SelectInputV2 > renders correctly required 2`] = `
                       </span>
                     </div>
                   </div>
-                </button>
+                </div>
               </div>
             </div>
           </div>
@@ -6839,7 +7056,7 @@ exports[`SelectInputV2 > renders correctly small 1`] = `
 }
 
 .emotion-8 {
-  color: #3f4250;
+  color: #222638;
   font-size: 14px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -6882,18 +7099,7 @@ exports[`SelectInputV2 > renders correctly small 1`] = `
   background: #ffffff;
   border-radius: 4px;
   width: 100%;
-}
-
-.emotion-10[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-  cursor: default;
-}
-
-.emotion-10[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-  cursor: not-allowed;
+  overflow: hidden;
 }
 
 .emotion-10[data-size='small'] {
@@ -6913,33 +7119,64 @@ exports[`SelectInputV2 > renders correctly small 1`] = `
   border: 1px solid #d9dadd;
 }
 
+.emotion-10[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-10[data-state='neutral']:not([data-disabled='true']):hover,
+.emotion-10[data-state='neutral']:not([data-disabled='true']):focus {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-10[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
 .emotion-10[data-state='success'] {
   border: 1px solid #22674e;
 }
 
+.emotion-10[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-10[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
 .emotion-10[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-10:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
+.emotion-10[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-10:not([data-disabled='true']):not([data-readonly]):active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
+.emotion-10[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
 }
 
-.emotion-10:not([data-disabled='true']):hover,
-.emotion-10:not([data-disabled='true']):focus {
-  border-color: #792dd4;
-  outline: none;
+.emotion-10:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
 }
 
-.emotion-10[data-dropdownvisible='true'] {
-  border-color: #792dd4;
+.emotion-10[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
 }
 
-.emotion-12 {
+.emotion-10[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-13 {
   color: #727683;
   font-size: 14px;
   font-family: Inter,Asap,sans-serif;
@@ -6949,9 +7186,13 @@ exports[`SelectInputV2 > renders correctly small 1`] = `
   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-14 {
+.emotion-15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6979,7 +7220,7 @@ exports[`SelectInputV2 > renders correctly small 1`] = `
   display: flex;
 }
 
-.emotion-16 {
+.emotion-17 {
   vertical-align: middle;
   fill: #3f4250;
   height: 16px;
@@ -6988,7 +7229,7 @@ exports[`SelectInputV2 > renders correctly small 1`] = `
   min-height: 16px;
 }
 
-.emotion-16 .fillStroke {
+.emotion-17 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
@@ -7035,22 +7276,21 @@ exports[`SelectInputV2 > renders correctly small 1`] = `
             tabindex="0"
           >
             <p
-              class="emotion-12 emotion-9"
+              class="emotion-12 emotion-13 emotion-9"
             >
               Select item
             </p>
             <div
-              class="emotion-14 emotion-15"
+              class="emotion-15 emotion-16"
             >
               <svg
                 aria-label="show dropdown"
-                class="emotion-16 emotion-17"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
+                class="emotion-17 emotion-18"
+                viewBox="0 0 20 20"
               >
                 <path
                   clip-rule="evenodd"
-                  d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06"
+                  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>
@@ -7132,18 +7372,7 @@ exports[`SelectInputV2 > renders correctly unclosable tags when readonly 1`] = `
   background: #ffffff;
   border-radius: 4px;
   width: 100%;
-}
-
-.emotion-6[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-  cursor: default;
-}
-
-.emotion-6[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-  cursor: not-allowed;
+  overflow: hidden;
 }
 
 .emotion-6[data-size='small'] {
@@ -7163,30 +7392,61 @@ exports[`SelectInputV2 > renders correctly unclosable tags when readonly 1`] = `
   border: 1px solid #d9dadd;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  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 {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
 .emotion-6[data-state='success'] {
   border: 1px solid #22674e;
 }
 
+.emotion-6[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-6[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
 .emotion-6[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
+.emotion-6[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
+.emotion-6[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
 }
 
-.emotion-6:not([data-disabled='true']):hover,
-.emotion-6:not([data-disabled='true']):focus {
-  border-color: #792dd4;
-  outline: none;
+.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
 }
 
-.emotion-6[data-dropdownvisible='true'] {
-  border-color: #792dd4;
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
 }
 
 .emotion-8 {
@@ -7288,65 +7548,6 @@ exports[`SelectInputV2 > renders correctly unclosable tags when readonly 1`] = `
 }
 
 .emotion-18 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  height: 32px;
-  padding: 0 8px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 8px;
-  border-radius: 4px;
-  box-sizing: border-box;
-  width: 32px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: not-allowed;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  outline-offset: 2px;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 14px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 20px;
-  paragraph-spacing: 0;
-  text-case: none;
-  background: none;
-  border: none;
-  color: #3f4250;
-  color: #b5b7bd;
-}
-
-.emotion-18:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-20 {
-  vertical-align: middle;
-  fill: currentColor;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
-}
-
-.emotion-20 .fillStroke {
-  stroke: currentColor;
-  fill: none;
-}
-
-.emotion-22 {
   vertical-align: middle;
   fill: #b5b7bd;
   height: 16px;
@@ -7355,7 +7556,7 @@ exports[`SelectInputV2 > renders correctly unclosable tags when readonly 1`] = `
   min-height: 16px;
 }
 
-.emotion-22 .fillStroke {
+.emotion-18 .fillStroke {
   stroke: #b5b7bd;
   fill: none;
 }
@@ -7368,8 +7569,8 @@ exports[`SelectInputV2 > renders correctly unclosable tags when readonly 1`] = `
       class="emotion-0 emotion-1"
     >
       <div
-        aria-controls=":rk2:"
-        aria-describedby=":rk2:"
+        aria-controls=":rjs:"
+        aria-describedby=":rjs:"
         class="emotion-2 emotion-3"
         data-container-full-width="true"
         tabindex="0"
@@ -7387,7 +7588,7 @@ exports[`SelectInputV2 > renders correctly unclosable tags when readonly 1`] = `
             data-size="large"
             data-state="neutral"
             data-testid="select-input-test"
-            id=":rk1:"
+            id=":rjr:"
             role="combobox"
             tabindex="0"
           >
@@ -7408,32 +7609,14 @@ exports[`SelectInputV2 > renders correctly unclosable tags when readonly 1`] = `
             <div
               class="emotion-16 emotion-17"
             >
-              <button
-                aria-label="clear value"
-                class="emotion-18 emotion-19"
-                data-testid="clear-all"
-                disabled=""
-                type="button"
-              >
-                <svg
-                  class="emotion-20 emotion-21"
-                  viewBox="0 0 16 16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94z"
-                  />
-                </svg>
-              </button>
               <svg
                 aria-label="show dropdown"
-                class="emotion-22 emotion-21"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
+                class="emotion-18 emotion-19"
+                viewBox="0 0 20 20"
               >
                 <path
                   clip-rule="evenodd"
-                  d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06"
+                  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>
@@ -7533,18 +7716,7 @@ exports[`SelectInputV2 > renders correctly ungrouped 1`] = `
   background: #ffffff;
   border-radius: 4px;
   width: 100%;
-}
-
-.emotion-6[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-  cursor: default;
-}
-
-.emotion-6[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-  cursor: not-allowed;
+  overflow: hidden;
 }
 
 .emotion-6[data-size='small'] {
@@ -7564,33 +7736,64 @@ exports[`SelectInputV2 > renders correctly ungrouped 1`] = `
   border: 1px solid #d9dadd;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  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 {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
 .emotion-6[data-state='success'] {
   border: 1px solid #22674e;
 }
 
+.emotion-6[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-6[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
 .emotion-6[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
+.emotion-6[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
+.emotion-6[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
 }
 
-.emotion-6:not([data-disabled='true']):hover,
-.emotion-6:not([data-disabled='true']):focus {
-  border-color: #792dd4;
-  outline: none;
+.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
 }
 
-.emotion-6[data-dropdownvisible='true'] {
-  border-color: #792dd4;
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
 }
 
-.emotion-8 {
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-9 {
   color: #727683;
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
@@ -7600,9 +7803,13 @@ exports[`SelectInputV2 > renders correctly ungrouped 1`] = `
   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-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7630,7 +7837,7 @@ exports[`SelectInputV2 > renders correctly ungrouped 1`] = `
   display: flex;
 }
 
-.emotion-12 {
+.emotion-13 {
   vertical-align: middle;
   fill: #3f4250;
   height: 16px;
@@ -7639,12 +7846,12 @@ exports[`SelectInputV2 > renders correctly ungrouped 1`] = `
   min-height: 16px;
 }
 
-.emotion-12 .fillStroke {
+.emotion-13 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
 
-.emotion-15 {
+.emotion-16 {
   background: #151a2d;
   color: #ffffff;
   border-radius: 4px;
@@ -7668,14 +7875,15 @@ exports[`SelectInputV2 > renders correctly ungrouped 1`] = `
   color: #3f4250;
   box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
   padding: 0;
+  margin-bottom: 80px;
 }
 
-.emotion-15[data-animated="true"] {
+.emotion-16[data-animated="true"] {
   -webkit-animation: 0ms animation-0 forwards;
   animation: 0ms animation-0 forwards;
 }
 
-.emotion-15[data-has-arrow="true"]::after {
+.emotion-16[data-has-arrow="true"]::after {
   content: " ";
   position: absolute;
   top: -5px;
@@ -7691,11 +7899,11 @@ exports[`SelectInputV2 > renders correctly ungrouped 1`] = `
   pointer-events: none;
 }
 
-.emotion-15[data-visible-in-dom="false"] {
+.emotion-16[data-visible-in-dom="false"] {
   display: none;
 }
 
-.emotion-17 {
+.emotion-18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7718,7 +7926,7 @@ exports[`SelectInputV2 > renders correctly ungrouped 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-20 {
+.emotion-21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7745,7 +7953,7 @@ exports[`SelectInputV2 > renders correctly ungrouped 1`] = `
   padding-right: 16px;
 }
 
-.emotion-22 {
+.emotion-23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7757,73 +7965,71 @@ exports[`SelectInputV2 > renders correctly ungrouped 1`] = `
   background: #ffffff;
   border: 1px solid #d9dadd;
   border-radius: 4px;
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
-  border: 1px solid #8c40ef;
 }
 
-.emotion-22>.emotion-29 {
+.emotion-23>.emotion-30 {
   color: #3f4250;
 }
 
-.emotion-22>.emotion-29::-webkit-input-placeholder {
+.emotion-23>.emotion-30::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-22>.emotion-29::-moz-placeholder {
+.emotion-23>.emotion-30::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-22>.emotion-29:-ms-input-placeholder {
+.emotion-23>.emotion-30:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-22>.emotion-29::placeholder {
+.emotion-23>.emotion-30::placeholder {
   color: #727683;
 }
 
-.emotion-22[data-success='true'] {
+.emotion-23[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-22[data-error='true'] {
+.emotion-23[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-22[data-readonly='true'] {
+.emotion-23[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-22[data-disabled='true'] {
+.emotion-23[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29 {
+.emotion-23[data-disabled='true']>.emotion-30 {
   color: #b5b7bd;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29::-webkit-input-placeholder {
+.emotion-23[data-disabled='true']>.emotion-30::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29::-moz-placeholder {
+.emotion-23[data-disabled='true']>.emotion-30::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29:-ms-input-placeholder {
+.emotion-23[data-disabled='true']>.emotion-30:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29::placeholder {
+.emotion-23[data-disabled='true']>.emotion-30::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-22:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-23:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-24 {
+.emotion-25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7849,11 +8055,11 @@ exports[`SelectInputV2 > renders correctly ungrouped 1`] = `
   border-color: inherit;
 }
 
-.emotion-24[data-size="small"] {
+.emotion-25[data-size="small"] {
   padding: 8px;
 }
 
-.emotion-28 {
+.emotion-29 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -7866,15 +8072,15 @@ exports[`SelectInputV2 > renders correctly ungrouped 1`] = `
   font-size: 14px;
 }
 
-.emotion-28[data-size='large'] {
+.emotion-29[data-size='large'] {
   font-size: 16px;
 }
 
-.emotion-28[data-size='small'] {
+.emotion-29[data-size='small'] {
   padding-left: 8px;
 }
 
-.emotion-30 {
+.emotion-31 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7902,11 +8108,11 @@ exports[`SelectInputV2 > renders correctly ungrouped 1`] = `
   padding-top: 4px;
 }
 
-.emotion-30[data-grouped="true"] {
+.emotion-31[data-grouped="true"] {
   padding-top: 0;
 }
 
-.emotion-32 {
+.emotion-33 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7929,7 +8135,7 @@ exports[`SelectInputV2 > renders correctly ungrouped 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-34 {
+.emotion-35 {
   text-align: left;
   border: none;
   background-color: #ffffff;
@@ -7940,32 +8146,32 @@ exports[`SelectInputV2 > renders correctly ungrouped 1`] = `
   border-radius: 4px;
 }
 
-.emotion-34:hover,
-.emotion-34:focus {
+.emotion-35:hover,
+.emotion-35:focus {
   background-color: #f1eefc;
   color: #641cb3;
   cursor: pointer;
   outline: none;
 }
 
-.emotion-34[data-selected='true'] {
+.emotion-35[data-selected='true'] {
   background-color: #f1eefc;
 }
 
-.emotion-34[disabled] {
+.emotion-35[disabled] {
   background-color: #f3f3f4;
   color: #b5b7bd;
 }
 
-.emotion-34[disabled]:hover,
-.emotion-34 [disabled]:focus {
+.emotion-35[disabled]:hover,
+.emotion-35 [disabled]:focus {
   background-color: #f3f3f4;
   color: #b5b7bd;
   cursor: not-allowed;
   outline: none;
 }
 
-.emotion-38 {
+.emotion-39 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7985,9 +8191,10 @@ exports[`SelectInputV2 > renders correctly ungrouped 1`] = `
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
+  overflow: hidden;
 }
 
-.emotion-40 {
+.emotion-42 {
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -7997,9 +8204,19 @@ exports[`SelectInputV2 > renders correctly ungrouped 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   text-align: left;
+  overflow: auto;
+  text-overflow: ellipsis;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  max-width: 100%;
 }
 
-.emotion-58 {
+.emotion-62 {
   color: #727683;
   font-size: 14px;
   font-family: Inter,Asap,sans-serif;
@@ -8012,7 +8229,7 @@ exports[`SelectInputV2 > renders correctly ungrouped 1`] = `
   text-align: left;
 }
 
-.emotion-104 {
+.emotion-113 {
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -8023,7 +8240,7 @@ exports[`SelectInputV2 > renders correctly ungrouped 1`] = `
   text-decoration: none;
 }
 
-.emotion-107 {
+.emotion-116 {
   font-size: 12px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -8090,22 +8307,21 @@ exports[`SelectInputV2 > renders correctly ungrouped 1`] = `
             tabindex="0"
           >
             <p
-              class="emotion-8 emotion-9"
+              class="emotion-8 emotion-9 emotion-10"
             >
               placeholder
             </p>
             <div
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
             >
               <svg
                 aria-label="show dropdown"
-                class="emotion-12 emotion-13"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
+                class="emotion-13 emotion-14"
+                viewBox="0 0 20 20"
               >
                 <path
                   clip-rule="evenodd"
-                  d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06"
+                  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>
@@ -8113,7 +8329,7 @@ exports[`SelectInputV2 > renders correctly ungrouped 1`] = `
           </div>
         </div>
         <div
-          class="emotion-14 emotion-15 emotion-16"
+          class="emotion-15 emotion-16 emotion-17"
           data-animated="false"
           data-has-arrow="false"
           id=":rp:"
@@ -8121,31 +8337,30 @@ exports[`SelectInputV2 > renders correctly ungrouped 1`] = `
           style="opacity: 1;"
         >
           <div
-            class="emotion-17 emotion-5"
+            class="emotion-18 emotion-5"
           >
             <div
-              class="emotion-19 emotion-20 emotion-5"
+              class="emotion-20 emotion-21 emotion-5"
             >
               <div>
                 <div
-                  class="emotion-22 emotion-23"
+                  class="emotion-23 emotion-24"
                   data-disabled="false"
                   data-error="false"
                   data-readonly="false"
                   data-success="false"
                 >
                   <div
-                    class="emotion-24 emotion-25"
+                    class="emotion-25 emotion-26"
                     data-size="medium"
                   >
                     <svg
-                      class="emotion-12 emotion-13"
-                      viewBox="0 0 16 16"
-                      xmlns="http://www.w3.org/2000/svg"
+                      class="emotion-13 emotion-14"
+                      viewBox="0 0 20 20"
                     >
                       <path
                         clip-rule="evenodd"
-                        d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06zM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0"
+                        d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11M2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9"
                         fill-rule="evenodd"
                       />
                     </svg>
@@ -8153,7 +8368,7 @@ exports[`SelectInputV2 > renders correctly ungrouped 1`] = `
                   <input
                     aria-invalid="false"
                     aria-label="search-bar"
-                    class="emotion-28 emotion-29"
+                    class="emotion-29 emotion-30"
                     data-size="medium"
                     data-testid="search-bar"
                     id=":rs:"
@@ -8165,101 +8380,102 @@ exports[`SelectInputV2 > renders correctly ungrouped 1`] = `
               </div>
             </div>
             <div
-              class="emotion-30 emotion-31"
+              class="emotion-31 emotion-32"
               data-grouped="false"
               id="select-dropdown"
               role="listbox"
+              tabindex="-1"
             >
               <div
-                class="emotion-32 emotion-5"
+                class="emotion-33 emotion-5"
                 id="items"
               >
-                <button
+                <div
                   aria-label="mercury"
-                  class="emotion-34 emotion-35"
+                  class="emotion-35 emotion-36"
                   data-selected="false"
                   data-testid="option-mercury"
                   id="option-0"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-mercury"
                   >
                     <div
-                      class="emotion-38 emotion-5"
+                      class="emotion-39 emotion-40"
                     >
                       <span
-                        class="emotion-40 emotion-9"
+                        class="emotion-41 emotion-42 emotion-10"
                       >
                         Mercury
                       </span>
                     </div>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="venus"
-                  class="emotion-34 emotion-35"
+                  class="emotion-35 emotion-36"
                   data-selected="false"
                   data-testid="option-venus"
                   id="option-1"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-venus"
                   >
                     <div
-                      class="emotion-38 emotion-5"
+                      class="emotion-39 emotion-40"
                     >
                       <span
-                        class="emotion-40 emotion-9"
+                        class="emotion-41 emotion-42 emotion-10"
                       >
                         Venus
                       </span>
                     </div>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="earth"
-                  class="emotion-34 emotion-35"
+                  class="emotion-35 emotion-36"
                   data-selected="false"
                   data-testid="option-earth"
                   id="option-2"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-earth"
                   >
                     <div
-                      class="emotion-38 emotion-5"
+                      class="emotion-39 emotion-40"
                     >
                       <span
-                        class="emotion-40 emotion-9"
+                        class="emotion-41 emotion-42 emotion-10"
                       >
                         Earth
                       </span>
                     </div>
                     <span
-                      class="emotion-58 emotion-9"
+                      class="emotion-62 emotion-10"
                     >
                       Our home planet
                     </span>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="mars"
-                  class="emotion-34 emotion-35"
+                  class="emotion-35 emotion-36"
                   data-selected="false"
                   data-testid="option-mars"
                   disabled=""
                   id="option-3"
                   role="option"
-                  type="button"
+                  tabindex="-1"
                 >
                   <div
                     aria-controls=":r15:"
@@ -8272,119 +8488,119 @@ exports[`SelectInputV2 > renders correctly ungrouped 1`] = `
                       data-testid="option-stack-mars"
                     >
                       <div
-                        class="emotion-38 emotion-5"
+                        class="emotion-39 emotion-40"
                       >
                         <span
-                          class="emotion-40 emotion-9"
+                          class="emotion-41 emotion-42 emotion-10"
                         >
                           Mars
                         </span>
                       </div>
                     </div>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="jupiter"
-                  class="emotion-34 emotion-35"
+                  class="emotion-35 emotion-36"
                   data-selected="false"
                   data-testid="option-jupiter"
                   id="option-4"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-jupiter"
                   >
                     <div
-                      class="emotion-38 emotion-5"
+                      class="emotion-39 emotion-40"
                     >
                       <span
-                        class="emotion-40 emotion-9"
+                        class="emotion-41 emotion-42 emotion-10"
                       >
                         Jupiter
                       </span>
                     </div>
                     <span
-                      class="emotion-58 emotion-9"
+                      class="emotion-62 emotion-10"
                     >
                       Jupiter is the fifth planet from the Sun and the largest in the Solar System. It is a gas giant with a mass more than two and a half times that of all the other planets in the Solar System combined, and slightly less than one one-thousandth the mass of the Sun.
                     </span>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="saturn"
-                  class="emotion-34 emotion-35"
+                  class="emotion-35 emotion-36"
                   data-selected="false"
                   data-testid="option-saturn"
                   id="option-5"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-saturn"
                   >
                     <div
-                      class="emotion-38 emotion-5"
+                      class="emotion-39 emotion-40"
                     >
                       <span
-                        class="emotion-40 emotion-9"
+                        class="emotion-41 emotion-42 emotion-10"
                       >
                         Saturn
                       </span>
                     </div>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="uranus"
-                  class="emotion-34 emotion-35"
+                  class="emotion-35 emotion-36"
                   data-selected="false"
                   data-testid="option-uranus"
                   id="option-6"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-uranus"
                   >
                     <div
-                      class="emotion-38 emotion-5"
+                      class="emotion-39 emotion-40"
                     >
                       <span
-                        class="emotion-40 emotion-9"
+                        class="emotion-41 emotion-42 emotion-10"
                       >
                         Uranus
                       </span>
                     </div>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="neptune"
-                  class="emotion-34 emotion-35"
+                  class="emotion-35 emotion-36"
                   data-selected="false"
                   data-testid="option-neptune"
                   id="option-7"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-neptune"
                   >
                     <div
-                      class="emotion-38 emotion-5"
+                      class="emotion-39 emotion-40"
                     >
                       <span
-                        class="emotion-40 emotion-9"
+                        class="emotion-41 emotion-42 emotion-10"
                       >
                         <div
-                          class="emotion-104 emotion-9"
+                          class="emotion-113 emotion-10"
                         >
                           Neptune 
                           <span
-                            class="emotion-106 emotion-107 emotion-9"
+                            class="emotion-115 emotion-116 emotion-10"
                           >
                             Label
                           </span>
@@ -8392,7 +8608,7 @@ exports[`SelectInputV2 > renders correctly ungrouped 1`] = `
                       </span>
                     </div>
                   </div>
-                </button>
+                </div>
               </div>
             </div>
           </div>
@@ -8490,18 +8706,7 @@ exports[`SelectInputV2 > renders correctly with default value 1`] = `
   background: #ffffff;
   border-radius: 4px;
   width: 100%;
-}
-
-.emotion-6[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-  cursor: default;
-}
-
-.emotion-6[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-  cursor: not-allowed;
+  overflow: hidden;
 }
 
 .emotion-6[data-size='small'] {
@@ -8521,33 +8726,65 @@ exports[`SelectInputV2 > renders correctly with default value 1`] = `
   border: 1px solid #d9dadd;
 }
 
-.emotion-6[data-state='success'] {
-  border: 1px solid #22674e;
+.emotion-6[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-6[data-state='danger'] {
-  border: 1px solid #b3144d;
+.emotion-6[data-state='neutral']:not([data-disabled='true']):hover,
+.emotion-6[data-state='neutral']:not([data-disabled='true']):focus {
+  border-color: #792dd4;
+  outline: none;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
+.emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
+.emotion-6[data-state='success'] {
+  border: 1px solid #22674e;
 }
 
-.emotion-6:not([data-disabled='true']):hover,
-.emotion-6:not([data-disabled='true']):focus {
-  border-color: #792dd4;
-  outline: none;
+.emotion-6[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
 }
 
-.emotion-6[data-dropdownvisible='true'] {
-  border-color: #792dd4;
+.emotion-6[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
 }
 
-.emotion-8 {
+.emotion-6[data-state='danger'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-6[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-6[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
+}
+
+.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
+}
+
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-9 {
+  color: #3f4250;
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -8556,9 +8793,11 @@ exports[`SelectInputV2 > renders correctly with default value 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
-.emotion-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8586,75 +8825,7 @@ exports[`SelectInputV2 > renders correctly with default value 1`] = `
   display: flex;
 }
 
-.emotion-12 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  height: 32px;
-  padding: 0 8px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 8px;
-  border-radius: 4px;
-  box-sizing: border-box;
-  width: 32px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  outline-offset: 2px;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 14px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 20px;
-  paragraph-spacing: 0;
-  text-case: none;
-  background: none;
-  border: none;
-  color: #3f4250;
-}
-
-.emotion-12:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-12:active {
-  box-shadow: 0px 0px 0px 3px #151a2d5c;
-}
-
-.emotion-12:hover,
-.emotion-12:active {
-  background: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-14 {
-  vertical-align: middle;
-  fill: currentColor;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
-}
-
-.emotion-14 .fillStroke {
-  stroke: currentColor;
-  fill: none;
-}
-
-.emotion-16 {
+.emotion-13 {
   vertical-align: middle;
   fill: #3f4250;
   height: 16px;
@@ -8663,12 +8834,12 @@ exports[`SelectInputV2 > renders correctly with default value 1`] = `
   min-height: 16px;
 }
 
-.emotion-16 .fillStroke {
+.emotion-13 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
 
-.emotion-19 {
+.emotion-16 {
   background: #151a2d;
   color: #ffffff;
   border-radius: 4px;
@@ -8692,14 +8863,15 @@ exports[`SelectInputV2 > renders correctly with default value 1`] = `
   color: #3f4250;
   box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
   padding: 0;
+  margin-bottom: 80px;
 }
 
-.emotion-19[data-animated="true"] {
+.emotion-16[data-animated="true"] {
   -webkit-animation: 0ms animation-0 forwards;
   animation: 0ms animation-0 forwards;
 }
 
-.emotion-19[data-has-arrow="true"]::after {
+.emotion-16[data-has-arrow="true"]::after {
   content: " ";
   position: absolute;
   top: -5px;
@@ -8715,11 +8887,11 @@ exports[`SelectInputV2 > renders correctly with default value 1`] = `
   pointer-events: none;
 }
 
-.emotion-19[data-visible-in-dom="false"] {
+.emotion-16[data-visible-in-dom="false"] {
   display: none;
 }
 
-.emotion-21 {
+.emotion-18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8742,7 +8914,7 @@ exports[`SelectInputV2 > renders correctly with default value 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-24 {
+.emotion-21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8769,7 +8941,7 @@ exports[`SelectInputV2 > renders correctly with default value 1`] = `
   padding-right: 16px;
 }
 
-.emotion-26 {
+.emotion-23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8783,69 +8955,69 @@ exports[`SelectInputV2 > renders correctly with default value 1`] = `
   border-radius: 4px;
 }
 
-.emotion-26>.emotion-33 {
+.emotion-23>.emotion-30 {
   color: #3f4250;
 }
 
-.emotion-26>.emotion-33::-webkit-input-placeholder {
+.emotion-23>.emotion-30::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-26>.emotion-33::-moz-placeholder {
+.emotion-23>.emotion-30::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-26>.emotion-33:-ms-input-placeholder {
+.emotion-23>.emotion-30:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-26>.emotion-33::placeholder {
+.emotion-23>.emotion-30::placeholder {
   color: #727683;
 }
 
-.emotion-26[data-success='true'] {
+.emotion-23[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-26[data-error='true'] {
+.emotion-23[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-26[data-readonly='true'] {
+.emotion-23[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-26[data-disabled='true'] {
+.emotion-23[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-26[data-disabled='true']>.emotion-33 {
+.emotion-23[data-disabled='true']>.emotion-30 {
   color: #b5b7bd;
 }
 
-.emotion-26[data-disabled='true']>.emotion-33::-webkit-input-placeholder {
+.emotion-23[data-disabled='true']>.emotion-30::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-26[data-disabled='true']>.emotion-33::-moz-placeholder {
+.emotion-23[data-disabled='true']>.emotion-30::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-26[data-disabled='true']>.emotion-33:-ms-input-placeholder {
+.emotion-23[data-disabled='true']>.emotion-30:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-26[data-disabled='true']>.emotion-33::placeholder {
+.emotion-23[data-disabled='true']>.emotion-30::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-26:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-23:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-28 {
+.emotion-25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8871,11 +9043,11 @@ exports[`SelectInputV2 > renders correctly with default value 1`] = `
   border-color: inherit;
 }
 
-.emotion-28[data-size="small"] {
+.emotion-25[data-size="small"] {
   padding: 8px;
 }
 
-.emotion-32 {
+.emotion-29 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -8888,15 +9060,15 @@ exports[`SelectInputV2 > renders correctly with default value 1`] = `
   font-size: 14px;
 }
 
-.emotion-32[data-size='large'] {
+.emotion-29[data-size='large'] {
   font-size: 16px;
 }
 
-.emotion-32[data-size='small'] {
+.emotion-29[data-size='small'] {
   padding-left: 8px;
 }
 
-.emotion-34 {
+.emotion-31 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8924,11 +9096,11 @@ exports[`SelectInputV2 > renders correctly with default value 1`] = `
   padding-top: 4px;
 }
 
-.emotion-34[data-grouped="true"] {
+.emotion-31[data-grouped="true"] {
   padding-top: 0;
 }
 
-.emotion-36 {
+.emotion-33 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8951,13 +9123,13 @@ exports[`SelectInputV2 > renders correctly with default value 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-38 {
+.emotion-35 {
   position: -webkit-sticky;
   position: sticky;
   top: 0px;
 }
 
-.emotion-40 {
+.emotion-37 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8983,21 +9155,22 @@ exports[`SelectInputV2 > renders correctly with default value 1`] = `
   margin-bottom: 2px;
 }
 
-.emotion-40:focus {
+.emotion-37:focus {
   background-color: #f9f9fa;
   outline: none;
 }
 
-.emotion-40[data-selectgroup='true'] {
+.emotion-37[data-selectgroup='true'] {
   padding-left: 16px;
   border-left: 4px solid #f9f9fa;
 }
 
-.emotion-40[data-selectgroup='true']:focus {
+.emotion-37[data-selectgroup='true']:focus {
   background-color: #e9eaeb;
 }
 
-.emotion-42 {
+.emotion-39 {
+  color: #3f4250;
   font-size: 12px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -9009,7 +9182,7 @@ exports[`SelectInputV2 > renders correctly with default value 1`] = `
   text-align: left;
 }
 
-.emotion-46 {
+.emotion-43 {
   text-align: left;
   border: none;
   background-color: #ffffff;
@@ -9020,32 +9193,32 @@ exports[`SelectInputV2 > renders correctly with default value 1`] = `
   border-radius: 4px;
 }
 
-.emotion-46:hover,
-.emotion-46:focus {
+.emotion-43:hover,
+.emotion-43:focus {
   background-color: #f1eefc;
   color: #641cb3;
   cursor: pointer;
   outline: none;
 }
 
-.emotion-46[data-selected='true'] {
+.emotion-43[data-selected='true'] {
   background-color: #f1eefc;
 }
 
-.emotion-46[disabled] {
+.emotion-43[disabled] {
   background-color: #f3f3f4;
   color: #b5b7bd;
 }
 
-.emotion-46[disabled]:hover,
-.emotion-46 [disabled]:focus {
+.emotion-43[disabled]:hover,
+.emotion-43 [disabled]:focus {
   background-color: #f3f3f4;
   color: #b5b7bd;
   cursor: not-allowed;
   outline: none;
 }
 
-.emotion-50 {
+.emotion-47 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9065,9 +9238,10 @@ exports[`SelectInputV2 > renders correctly with default value 1`] = `
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
+  overflow: hidden;
 }
 
-.emotion-52 {
+.emotion-50 {
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -9077,6 +9251,16 @@ exports[`SelectInputV2 > renders correctly with default value 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   text-align: left;
+  overflow: auto;
+  text-overflow: ellipsis;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  max-width: 100%;
 }
 
 .emotion-70 {
@@ -9092,7 +9276,18 @@ exports[`SelectInputV2 > renders correctly with default value 1`] = `
   text-align: left;
 }
 
-.emotion-137 {
+.emotion-140 {
+  font-size: 16px;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 24px;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-143 {
   font-size: 12px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -9158,39 +9353,22 @@ exports[`SelectInputV2 > renders correctly with default value 1`] = `
             role="combobox"
             tabindex="0"
           >
-            <p
-              class="emotion-8 emotion-9"
+            <div
+              class="emotion-8 emotion-9 emotion-10"
             >
               Pluto
-            </p>
+            </div>
             <div
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
             >
-              <button
-                aria-label="clear value"
-                class="emotion-12 emotion-13"
-                data-testid="clear-all"
-                type="button"
-              >
-                <svg
-                  class="emotion-14 emotion-15"
-                  viewBox="0 0 16 16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94z"
-                  />
-                </svg>
-              </button>
               <svg
                 aria-label="show dropdown"
-                class="emotion-16 emotion-15"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
+                class="emotion-13 emotion-14"
+                viewBox="0 0 20 20"
               >
                 <path
                   clip-rule="evenodd"
-                  d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06"
+                  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>
@@ -9198,7 +9376,7 @@ exports[`SelectInputV2 > renders correctly with default value 1`] = `
           </div>
         </div>
         <div
-          class="emotion-18 emotion-19 emotion-20"
+          class="emotion-15 emotion-16 emotion-17"
           data-animated="false"
           data-has-arrow="false"
           id=":r2i:"
@@ -9206,31 +9384,30 @@ exports[`SelectInputV2 > renders correctly with default value 1`] = `
           style="opacity: 1;"
         >
           <div
-            class="emotion-21 emotion-5"
+            class="emotion-18 emotion-5"
           >
             <div
-              class="emotion-23 emotion-24 emotion-5"
+              class="emotion-20 emotion-21 emotion-5"
             >
               <div>
                 <div
-                  class="emotion-26 emotion-27"
+                  class="emotion-23 emotion-24"
                   data-disabled="false"
                   data-error="false"
                   data-readonly="false"
                   data-success="false"
                 >
                   <div
-                    class="emotion-28 emotion-29"
+                    class="emotion-25 emotion-26"
                     data-size="medium"
                   >
                     <svg
-                      class="emotion-16 emotion-15"
-                      viewBox="0 0 16 16"
-                      xmlns="http://www.w3.org/2000/svg"
+                      class="emotion-13 emotion-14"
+                      viewBox="0 0 20 20"
                     >
                       <path
                         clip-rule="evenodd"
-                        d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06zM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0"
+                        d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11M2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9"
                         fill-rule="evenodd"
                       />
                     </svg>
@@ -9238,10 +9415,10 @@ exports[`SelectInputV2 > renders correctly with default value 1`] = `
                   <input
                     aria-invalid="false"
                     aria-label="search-bar"
-                    class="emotion-32 emotion-33"
+                    class="emotion-29 emotion-30"
                     data-size="medium"
                     data-testid="search-bar"
-                    id=":r2m:"
+                    id=":r2l:"
                     placeholder="placeholdersearch"
                     type="text"
                     value=""
@@ -9250,19 +9427,19 @@ exports[`SelectInputV2 > renders correctly with default value 1`] = `
               </div>
             </div>
             <div
-              class="emotion-34 emotion-35"
+              class="emotion-31 emotion-32"
               data-grouped="true"
               id="select-dropdown"
               role="listbox"
             >
               <div
-                class="emotion-36 emotion-5"
+                class="emotion-33 emotion-5"
               >
                 <div
-                  class="emotion-38 emotion-39"
+                  class="emotion-35 emotion-36"
                 >
                   <button
-                    class="emotion-40 emotion-41"
+                    class="emotion-37 emotion-38"
                     data-selectgroup="false"
                     data-testid="group-0"
                     role="group"
@@ -9270,157 +9447,157 @@ exports[`SelectInputV2 > renders correctly with default value 1`] = `
                     type="button"
                   >
                     <span
-                      class="emotion-42 emotion-9"
+                      class="emotion-39 emotion-10"
                     >
                       TERRESTRIAL PLANETS
                     </span>
                   </button>
                 </div>
                 <div
-                  class="emotion-36 emotion-5"
+                  class="emotion-33 emotion-5"
                   id="items"
                 >
-                  <button
+                  <div
                     aria-label="mercury"
-                    class="emotion-46 emotion-47"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-mercury"
                     id="option-0"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-mercury"
                     >
                       <div
-                        class="emotion-50 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-52 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Mercury
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="venus"
-                    class="emotion-46 emotion-47"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-venus"
                     id="option-1"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-venus"
                     >
                       <div
-                        class="emotion-50 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-52 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Venus
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="earth"
-                    class="emotion-46 emotion-47"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-earth"
                     id="option-2"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-earth"
                     >
                       <div
-                        class="emotion-50 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-52 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Earth
                         </span>
                       </div>
                       <span
-                        class="emotion-70 emotion-9"
+                        class="emotion-70 emotion-10"
                       >
                         Our home planet
                       </span>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="mars"
-                    class="emotion-46 emotion-47"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-mars"
                     disabled=""
                     id="option-3"
                     role="option"
-                    type="button"
+                    tabindex="-1"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-mars"
                     >
                       <div
-                        class="emotion-50 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-52 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Mars
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="pluto"
-                    class="emotion-46 emotion-47"
+                    class="emotion-43 emotion-44"
                     data-selected="true"
                     data-testid="option-pluto"
                     id="option-4"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-pluto"
                     >
                       <div
-                        class="emotion-50 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-52 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Pluto
                         </span>
                       </div>
                       <span
-                        class="emotion-70 emotion-9"
+                        class="emotion-70 emotion-10"
                       >
                         Pluto does not fit the usual classification of either terrestrial or Jovian planets, but is rocky
                       </span>
                     </div>
-                  </button>
+                  </div>
                 </div>
               </div>
               <div
-                class="emotion-36 emotion-5"
+                class="emotion-33 emotion-5"
               >
                 <div
-                  class="emotion-38 emotion-39"
+                  class="emotion-35 emotion-36"
                 >
                   <button
-                    class="emotion-40 emotion-41"
+                    class="emotion-37 emotion-38"
                     data-selectgroup="false"
                     data-testid="group-1"
                     role="group"
@@ -9428,118 +9605,118 @@ exports[`SelectInputV2 > renders correctly with default value 1`] = `
                     type="button"
                   >
                     <span
-                      class="emotion-42 emotion-9"
+                      class="emotion-39 emotion-10"
                     >
                       JOVIAN PLANETS
                     </span>
                   </button>
                 </div>
                 <div
-                  class="emotion-36 emotion-5"
+                  class="emotion-33 emotion-5"
                   id="items"
                 >
-                  <button
+                  <div
                     aria-label="jupiter"
-                    class="emotion-46 emotion-47"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-jupiter"
                     id="option-0"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-jupiter"
                     >
                       <div
-                        class="emotion-50 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-52 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Jupiter
                         </span>
                       </div>
                       <span
-                        class="emotion-70 emotion-9"
+                        class="emotion-70 emotion-10"
                       >
                         Jupiter is the fifth planet from the Sun and the largest in the Solar System. It is a gas giant with a mass more than two and a half times that of all the other planets in the Solar System combined, and slightly less than one one-thousandth the mass of the Sun.
                       </span>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="saturn"
-                    class="emotion-46 emotion-47"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-saturn"
                     id="option-1"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-saturn"
                     >
                       <div
-                        class="emotion-50 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-52 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Saturn
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="uranus"
-                    class="emotion-46 emotion-47"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-uranus"
                     id="option-2"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-uranus"
                     >
                       <div
-                        class="emotion-50 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-52 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Uranus
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="neptune"
-                    class="emotion-46 emotion-47"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-neptune"
                     id="option-3"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-neptune"
                     >
                       <div
-                        class="emotion-50 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-52 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           <div
-                            class="emotion-8 emotion-9"
+                            class="emotion-140 emotion-10"
                           >
                             Neptune 
                             <span
-                              class="emotion-136 emotion-137 emotion-9"
+                              class="emotion-142 emotion-143 emotion-10"
                             >
                               Label
                             </span>
@@ -9547,7 +9724,7 @@ exports[`SelectInputV2 > renders correctly with default value 1`] = `
                         </span>
                       </div>
                     </div>
-                  </button>
+                  </div>
                 </div>
               </div>
             </div>
@@ -9646,18 +9823,7 @@ exports[`SelectInputV2 > renders correctly with emptyState 1`] = `
   background: #ffffff;
   border-radius: 4px;
   width: 100%;
-}
-
-.emotion-6[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-  cursor: default;
-}
-
-.emotion-6[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-  cursor: not-allowed;
+  overflow: hidden;
 }
 
 .emotion-6[data-size='small'] {
@@ -9677,35 +9843,66 @@ exports[`SelectInputV2 > renders correctly with emptyState 1`] = `
   border: 1px solid #d9dadd;
 }
 
-.emotion-6[data-state='success'] {
-  border: 1px solid #22674e;
+.emotion-6[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-6[data-state='danger'] {
-  border: 1px solid #b3144d;
+.emotion-6[data-state='neutral']:not([data-disabled='true']):hover,
+.emotion-6[data-state='neutral']:not([data-disabled='true']):focus {
+  border-color: #792dd4;
+  outline: none;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
+.emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
+.emotion-6[data-state='success'] {
+  border: 1px solid #22674e;
 }
 
-.emotion-6:not([data-disabled='true']):hover,
-.emotion-6:not([data-disabled='true']):focus {
-  border-color: #792dd4;
-  outline: none;
+.emotion-6[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
 }
 
-.emotion-6[data-dropdownvisible='true'] {
-  border-color: #792dd4;
+.emotion-6[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
 }
 
-.emotion-8 {
-  color: #727683;
-  font-size: 16px;
+.emotion-6[data-state='danger'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-6[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-6[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
+}
+
+.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
+}
+
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-9 {
+  color: #727683;
+  font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
   letter-spacing: 0;
@@ -9713,9 +9910,13 @@ exports[`SelectInputV2 > renders correctly with emptyState 1`] = `
   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-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9743,7 +9944,7 @@ exports[`SelectInputV2 > renders correctly with emptyState 1`] = `
   display: flex;
 }
 
-.emotion-12 {
+.emotion-13 {
   vertical-align: middle;
   fill: #3f4250;
   height: 16px;
@@ -9752,12 +9953,12 @@ exports[`SelectInputV2 > renders correctly with emptyState 1`] = `
   min-height: 16px;
 }
 
-.emotion-12 .fillStroke {
+.emotion-13 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
 
-.emotion-15 {
+.emotion-16 {
   background: #151a2d;
   color: #ffffff;
   border-radius: 4px;
@@ -9781,14 +9982,15 @@ exports[`SelectInputV2 > renders correctly with emptyState 1`] = `
   color: #3f4250;
   box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
   padding: 0;
+  margin-bottom: 80px;
 }
 
-.emotion-15[data-animated="true"] {
+.emotion-16[data-animated="true"] {
   -webkit-animation: 0ms animation-0 forwards;
   animation: 0ms animation-0 forwards;
 }
 
-.emotion-15[data-has-arrow="true"]::after {
+.emotion-16[data-has-arrow="true"]::after {
   content: " ";
   position: absolute;
   top: -5px;
@@ -9804,11 +10006,11 @@ exports[`SelectInputV2 > renders correctly with emptyState 1`] = `
   pointer-events: none;
 }
 
-.emotion-15[data-visible-in-dom="false"] {
+.emotion-16[data-visible-in-dom="false"] {
   display: none;
 }
 
-.emotion-17 {
+.emotion-18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9832,160 +10034,6 @@ exports[`SelectInputV2 > renders correctly with emptyState 1`] = `
 }
 
 .emotion-20 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 4px;
-  -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;
-  padding-top: 12px;
-  padding-bottom: 12px;
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.emotion-22 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  height: 40px;
-  background: #ffffff;
-  border: 1px solid #d9dadd;
-  border-radius: 4px;
-}
-
-.emotion-22>.emotion-29 {
-  color: #3f4250;
-}
-
-.emotion-22>.emotion-29::-webkit-input-placeholder {
-  color: #727683;
-}
-
-.emotion-22>.emotion-29::-moz-placeholder {
-  color: #727683;
-}
-
-.emotion-22>.emotion-29:-ms-input-placeholder {
-  color: #727683;
-}
-
-.emotion-22>.emotion-29::placeholder {
-  color: #727683;
-}
-
-.emotion-22[data-success='true'] {
-  border-color: #22674e;
-}
-
-.emotion-22[data-error='true'] {
-  border-color: #b3144d;
-}
-
-.emotion-22[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-}
-
-.emotion-22[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-}
-
-.emotion-22[data-disabled='true']>.emotion-29 {
-  color: #b5b7bd;
-}
-
-.emotion-22[data-disabled='true']>.emotion-29::-webkit-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-22[data-disabled='true']>.emotion-29::-moz-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-22[data-disabled='true']>.emotion-29:-ms-input-placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-22[data-disabled='true']>.emotion-29::placeholder {
-  color: #b5b7bd;
-}
-
-.emotion-22:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
-}
-
-.emotion-24 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0;
-  -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: 16px;
-  border-right: 1px solid;
-  border-color: inherit;
-}
-
-.emotion-24[data-size="small"] {
-  padding: 8px;
-}
-
-.emotion-28 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  border: none;
-  outline: none;
-  height: 100%;
-  width: 100%;
-  padding-left: 16px;
-  background: transparent;
-  font-size: 14px;
-}
-
-.emotion-28[data-size='large'] {
-  font-size: 16px;
-}
-
-.emotion-28[data-size='small'] {
-  padding-left: 8px;
-}
-
-.emotion-30 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -10017,8 +10065,8 @@ exports[`SelectInputV2 > renders correctly with emptyState 1`] = `
       class="emotion-0 emotion-1"
     >
       <div
-        aria-controls=":rah:"
-        aria-describedby=":rah:"
+        aria-controls=":rae:"
+        aria-describedby=":rae:"
         class="emotion-2 emotion-3"
         data-container-full-width="true"
         tabindex="0"
@@ -10036,27 +10084,26 @@ exports[`SelectInputV2 > renders correctly with emptyState 1`] = `
             data-size="large"
             data-state="neutral"
             data-testid="select-input-emptystate"
-            id=":rag:"
+            id=":rad:"
             role="combobox"
             tabindex="0"
           >
             <p
-              class="emotion-8 emotion-9"
+              class="emotion-8 emotion-9 emotion-10"
             >
               placeholder
             </p>
             <div
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
             >
               <svg
                 aria-label="show dropdown"
-                class="emotion-12 emotion-13"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
+                class="emotion-13 emotion-14"
+                viewBox="0 0 20 20"
               >
                 <path
                   clip-rule="evenodd"
-                  d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06"
+                  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>
@@ -10064,59 +10111,18 @@ exports[`SelectInputV2 > renders correctly with emptyState 1`] = `
           </div>
         </div>
         <div
-          class="emotion-14 emotion-15 emotion-16"
+          class="emotion-15 emotion-16 emotion-17"
           data-animated="false"
           data-has-arrow="false"
-          id=":rah:"
+          id=":rae:"
           role="dialog"
           style="opacity: 1;"
         >
           <div
-            class="emotion-17 emotion-5"
+            class="emotion-18 emotion-5"
           >
             <div
-              class="emotion-19 emotion-20 emotion-5"
-            >
-              <div>
-                <div
-                  class="emotion-22 emotion-23"
-                  data-disabled="false"
-                  data-error="false"
-                  data-readonly="false"
-                  data-success="false"
-                >
-                  <div
-                    class="emotion-24 emotion-25"
-                    data-size="medium"
-                  >
-                    <svg
-                      class="emotion-12 emotion-13"
-                      viewBox="0 0 16 16"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06zM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </div>
-                  <input
-                    aria-invalid="false"
-                    aria-label="search-bar"
-                    class="emotion-28 emotion-29"
-                    data-size="medium"
-                    data-testid="search-bar"
-                    id=":rak:"
-                    placeholder="placeholdersearch"
-                    type="text"
-                    value=""
-                  />
-                </div>
-              </div>
-            </div>
-            <div
-              class="emotion-30 emotion-31"
+              class="emotion-20 emotion-21"
             >
               no option
             </div>
@@ -10215,18 +10221,7 @@ exports[`SelectInputV2 > renders correctly with error 1`] = `
   background: #ffffff;
   border-radius: 4px;
   width: 100%;
-}
-
-.emotion-6[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-  cursor: default;
-}
-
-.emotion-6[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-  cursor: not-allowed;
+  overflow: hidden;
 }
 
 .emotion-6[data-size='small'] {
@@ -10246,33 +10241,64 @@ exports[`SelectInputV2 > renders correctly with error 1`] = `
   border: 1px solid #d9dadd;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  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 {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
 .emotion-6[data-state='success'] {
   border: 1px solid #22674e;
 }
 
+.emotion-6[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-6[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
 .emotion-6[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
+.emotion-6[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
+.emotion-6[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
 }
 
-.emotion-6:not([data-disabled='true']):hover,
-.emotion-6:not([data-disabled='true']):focus {
-  border-color: #792dd4;
-  outline: none;
+.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
 }
 
-.emotion-6[data-dropdownvisible='true'] {
-  border-color: #792dd4;
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
 }
 
-.emotion-8 {
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-9 {
   color: #727683;
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
@@ -10282,9 +10308,13 @@ exports[`SelectInputV2 > renders correctly with error 1`] = `
   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-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -10312,7 +10342,7 @@ exports[`SelectInputV2 > renders correctly with error 1`] = `
   display: flex;
 }
 
-.emotion-12 {
+.emotion-13 {
   vertical-align: middle;
   fill: #b3144d;
   height: 1em;
@@ -10321,12 +10351,12 @@ exports[`SelectInputV2 > renders correctly with error 1`] = `
   min-height: 1em;
 }
 
-.emotion-12 .fillStroke {
+.emotion-13 .fillStroke {
   stroke: #b3144d;
   fill: none;
 }
 
-.emotion-14 {
+.emotion-15 {
   vertical-align: middle;
   fill: #3f4250;
   height: 16px;
@@ -10335,12 +10365,12 @@ exports[`SelectInputV2 > renders correctly with error 1`] = `
   min-height: 16px;
 }
 
-.emotion-14 .fillStroke {
+.emotion-15 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
 
-.emotion-17 {
+.emotion-18 {
   background: #151a2d;
   color: #ffffff;
   border-radius: 4px;
@@ -10364,14 +10394,15 @@ exports[`SelectInputV2 > renders correctly with error 1`] = `
   color: #3f4250;
   box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
   padding: 0;
+  margin-bottom: 80px;
 }
 
-.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;
@@ -10387,11 +10418,11 @@ exports[`SelectInputV2 > renders correctly with error 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;
@@ -10414,7 +10445,7 @@ exports[`SelectInputV2 > renders correctly with error 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-22 {
+.emotion-23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -10441,7 +10472,7 @@ exports[`SelectInputV2 > renders correctly with error 1`] = `
   padding-right: 16px;
 }
 
-.emotion-24 {
+.emotion-25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -10455,69 +10486,69 @@ exports[`SelectInputV2 > renders correctly with error 1`] = `
   border-radius: 4px;
 }
 
-.emotion-24>.emotion-31 {
+.emotion-25>.emotion-32 {
   color: #3f4250;
 }
 
-.emotion-24>.emotion-31::-webkit-input-placeholder {
+.emotion-25>.emotion-32::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-24>.emotion-31::-moz-placeholder {
+.emotion-25>.emotion-32::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-24>.emotion-31:-ms-input-placeholder {
+.emotion-25>.emotion-32:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-24>.emotion-31::placeholder {
+.emotion-25>.emotion-32::placeholder {
   color: #727683;
 }
 
-.emotion-24[data-success='true'] {
+.emotion-25[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-24[data-error='true'] {
+.emotion-25[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-24[data-readonly='true'] {
+.emotion-25[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-24[data-disabled='true'] {
+.emotion-25[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-24[data-disabled='true']>.emotion-31 {
+.emotion-25[data-disabled='true']>.emotion-32 {
   color: #b5b7bd;
 }
 
-.emotion-24[data-disabled='true']>.emotion-31::-webkit-input-placeholder {
+.emotion-25[data-disabled='true']>.emotion-32::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-24[data-disabled='true']>.emotion-31::-moz-placeholder {
+.emotion-25[data-disabled='true']>.emotion-32::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-24[data-disabled='true']>.emotion-31:-ms-input-placeholder {
+.emotion-25[data-disabled='true']>.emotion-32:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-24[data-disabled='true']>.emotion-31::placeholder {
+.emotion-25[data-disabled='true']>.emotion-32::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-24:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-25:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-26 {
+.emotion-27 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -10543,11 +10574,11 @@ exports[`SelectInputV2 > renders correctly with error 1`] = `
   border-color: inherit;
 }
 
-.emotion-26[data-size="small"] {
+.emotion-27[data-size="small"] {
   padding: 8px;
 }
 
-.emotion-30 {
+.emotion-31 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -10560,15 +10591,15 @@ exports[`SelectInputV2 > renders correctly with error 1`] = `
   font-size: 14px;
 }
 
-.emotion-30[data-size='large'] {
+.emotion-31[data-size='large'] {
   font-size: 16px;
 }
 
-.emotion-30[data-size='small'] {
+.emotion-31[data-size='small'] {
   padding-left: 8px;
 }
 
-.emotion-32 {
+.emotion-33 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -10596,11 +10627,11 @@ exports[`SelectInputV2 > renders correctly with error 1`] = `
   padding-top: 4px;
 }
 
-.emotion-32[data-grouped="true"] {
+.emotion-33[data-grouped="true"] {
   padding-top: 0;
 }
 
-.emotion-34 {
+.emotion-35 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -10623,7 +10654,7 @@ exports[`SelectInputV2 > renders correctly with error 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-36 {
+.emotion-37 {
   text-align: left;
   border: none;
   background-color: #ffffff;
@@ -10634,32 +10665,32 @@ exports[`SelectInputV2 > renders correctly with error 1`] = `
   border-radius: 4px;
 }
 
-.emotion-36:hover,
-.emotion-36:focus {
+.emotion-37:hover,
+.emotion-37:focus {
   background-color: #f1eefc;
   color: #641cb3;
   cursor: pointer;
   outline: none;
 }
 
-.emotion-36[data-selected='true'] {
+.emotion-37[data-selected='true'] {
   background-color: #f1eefc;
 }
 
-.emotion-36[disabled] {
+.emotion-37[disabled] {
   background-color: #f3f3f4;
   color: #b5b7bd;
 }
 
-.emotion-36[disabled]:hover,
-.emotion-36 [disabled]:focus {
+.emotion-37[disabled]:hover,
+.emotion-37 [disabled]:focus {
   background-color: #f3f3f4;
   color: #b5b7bd;
   cursor: not-allowed;
   outline: none;
 }
 
-.emotion-40 {
+.emotion-41 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -10679,9 +10710,10 @@ exports[`SelectInputV2 > renders correctly with error 1`] = `
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
+  overflow: hidden;
 }
 
-.emotion-42 {
+.emotion-44 {
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -10691,9 +10723,19 @@ exports[`SelectInputV2 > renders correctly with error 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   text-align: left;
+  overflow: auto;
+  text-overflow: ellipsis;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  max-width: 100%;
 }
 
-.emotion-60 {
+.emotion-64 {
   color: #727683;
   font-size: 14px;
   font-family: Inter,Asap,sans-serif;
@@ -10706,7 +10748,7 @@ exports[`SelectInputV2 > renders correctly with error 1`] = `
   text-align: left;
 }
 
-.emotion-106 {
+.emotion-115 {
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -10717,7 +10759,7 @@ exports[`SelectInputV2 > renders correctly with error 1`] = `
   text-decoration: none;
 }
 
-.emotion-109 {
+.emotion-118 {
   font-size: 12px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -10752,7 +10794,7 @@ exports[`SelectInputV2 > renders correctly with error 1`] = `
   border: 1px solid #d9dadd;
 }
 
-.emotion-112 {
+.emotion-121 {
   color: #b3144d;
   font-size: 12px;
   font-family: Inter,Asap,sans-serif;
@@ -10773,8 +10815,8 @@ exports[`SelectInputV2 > renders correctly with error 1`] = `
       class="emotion-0 emotion-1"
     >
       <div
-        aria-controls=":rbp:"
-        aria-describedby=":rbp:"
+        aria-controls=":rbk:"
+        aria-describedby=":rbk:"
         class="emotion-2 emotion-3"
         data-container-full-width="true"
         tabindex="0"
@@ -10792,22 +10834,21 @@ exports[`SelectInputV2 > renders correctly with error 1`] = `
             data-size="large"
             data-state="danger"
             data-testid="select-input-test"
-            id=":rbo:"
+            id=":rbj:"
             role="combobox"
             tabindex="0"
           >
             <p
-              class="emotion-8 emotion-9"
+              class="emotion-8 emotion-9 emotion-10"
             >
               placeholder
             </p>
             <div
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
             >
               <svg
-                class="emotion-12 emotion-13"
+                class="emotion-13 emotion-14"
                 viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
               >
                 <path
                   clip-rule="evenodd"
@@ -10817,13 +10858,12 @@ exports[`SelectInputV2 > renders correctly with error 1`] = `
               </svg>
               <svg
                 aria-label="show dropdown"
-                class="emotion-14 emotion-13"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
+                class="emotion-15 emotion-14"
+                viewBox="0 0 20 20"
               >
                 <path
                   clip-rule="evenodd"
-                  d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06"
+                  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>
@@ -10831,39 +10871,38 @@ exports[`SelectInputV2 > renders correctly with error 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=":rbp:"
+          id=":rbk:"
           role="dialog"
           style="opacity: 1;"
         >
           <div
-            class="emotion-19 emotion-5"
+            class="emotion-20 emotion-5"
           >
             <div
-              class="emotion-21 emotion-22 emotion-5"
+              class="emotion-22 emotion-23 emotion-5"
             >
               <div>
                 <div
-                  class="emotion-24 emotion-25"
+                  class="emotion-25 emotion-26"
                   data-disabled="false"
                   data-error="false"
                   data-readonly="false"
                   data-success="false"
                 >
                   <div
-                    class="emotion-26 emotion-27"
+                    class="emotion-27 emotion-28"
                     data-size="medium"
                   >
                     <svg
-                      class="emotion-14 emotion-13"
-                      viewBox="0 0 16 16"
-                      xmlns="http://www.w3.org/2000/svg"
+                      class="emotion-15 emotion-14"
+                      viewBox="0 0 20 20"
                     >
                       <path
                         clip-rule="evenodd"
-                        d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06zM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0"
+                        d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11M2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9"
                         fill-rule="evenodd"
                       />
                     </svg>
@@ -10871,10 +10910,10 @@ exports[`SelectInputV2 > renders correctly with error 1`] = `
                   <input
                     aria-invalid="false"
                     aria-label="search-bar"
-                    class="emotion-30 emotion-31"
+                    class="emotion-31 emotion-32"
                     data-size="medium"
                     data-testid="search-bar"
-                    id=":rbt:"
+                    id=":rbo:"
                     placeholder="placeholdersearch"
                     type="text"
                     value=""
@@ -10883,105 +10922,106 @@ exports[`SelectInputV2 > renders correctly with error 1`] = `
               </div>
             </div>
             <div
-              class="emotion-32 emotion-33"
+              class="emotion-33 emotion-34"
               data-grouped="false"
               id="select-dropdown"
               role="listbox"
+              tabindex="-1"
             >
               <div
-                class="emotion-34 emotion-5"
+                class="emotion-35 emotion-5"
                 id="items"
               >
-                <button
+                <div
                   aria-label="mercury"
-                  class="emotion-36 emotion-37"
+                  class="emotion-37 emotion-38"
                   data-selected="false"
                   data-testid="option-mercury"
                   id="option-0"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-mercury"
                   >
                     <div
-                      class="emotion-40 emotion-5"
+                      class="emotion-41 emotion-42"
                     >
                       <span
-                        class="emotion-42 emotion-9"
+                        class="emotion-43 emotion-44 emotion-10"
                       >
                         Mercury
                       </span>
                     </div>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="venus"
-                  class="emotion-36 emotion-37"
+                  class="emotion-37 emotion-38"
                   data-selected="false"
                   data-testid="option-venus"
                   id="option-1"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-venus"
                   >
                     <div
-                      class="emotion-40 emotion-5"
+                      class="emotion-41 emotion-42"
                     >
                       <span
-                        class="emotion-42 emotion-9"
+                        class="emotion-43 emotion-44 emotion-10"
                       >
                         Venus
                       </span>
                     </div>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="earth"
-                  class="emotion-36 emotion-37"
+                  class="emotion-37 emotion-38"
                   data-selected="false"
                   data-testid="option-earth"
                   id="option-2"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-earth"
                   >
                     <div
-                      class="emotion-40 emotion-5"
+                      class="emotion-41 emotion-42"
                     >
                       <span
-                        class="emotion-42 emotion-9"
+                        class="emotion-43 emotion-44 emotion-10"
                       >
                         Earth
                       </span>
                     </div>
                     <span
-                      class="emotion-60 emotion-9"
+                      class="emotion-64 emotion-10"
                     >
                       Our home planet
                     </span>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="mars"
-                  class="emotion-36 emotion-37"
+                  class="emotion-37 emotion-38"
                   data-selected="false"
                   data-testid="option-mars"
                   disabled=""
                   id="option-3"
                   role="option"
-                  type="button"
+                  tabindex="-1"
                 >
                   <div
-                    aria-controls=":rc6:"
-                    aria-describedby=":rc6:"
+                    aria-controls=":rc1:"
+                    aria-describedby=":rc1:"
                     class="emotion-2 emotion-3"
                     tabindex="0"
                   >
@@ -10990,119 +11030,119 @@ exports[`SelectInputV2 > renders correctly with error 1`] = `
                       data-testid="option-stack-mars"
                     >
                       <div
-                        class="emotion-40 emotion-5"
+                        class="emotion-41 emotion-42"
                       >
                         <span
-                          class="emotion-42 emotion-9"
+                          class="emotion-43 emotion-44 emotion-10"
                         >
                           Mars
                         </span>
                       </div>
                     </div>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="jupiter"
-                  class="emotion-36 emotion-37"
+                  class="emotion-37 emotion-38"
                   data-selected="false"
                   data-testid="option-jupiter"
                   id="option-4"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-jupiter"
                   >
                     <div
-                      class="emotion-40 emotion-5"
+                      class="emotion-41 emotion-42"
                     >
                       <span
-                        class="emotion-42 emotion-9"
+                        class="emotion-43 emotion-44 emotion-10"
                       >
                         Jupiter
                       </span>
                     </div>
                     <span
-                      class="emotion-60 emotion-9"
+                      class="emotion-64 emotion-10"
                     >
                       Jupiter is the fifth planet from the Sun and the largest in the Solar System. It is a gas giant with a mass more than two and a half times that of all the other planets in the Solar System combined, and slightly less than one one-thousandth the mass of the Sun.
                     </span>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="saturn"
-                  class="emotion-36 emotion-37"
+                  class="emotion-37 emotion-38"
                   data-selected="false"
                   data-testid="option-saturn"
                   id="option-5"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-saturn"
                   >
                     <div
-                      class="emotion-40 emotion-5"
+                      class="emotion-41 emotion-42"
                     >
                       <span
-                        class="emotion-42 emotion-9"
+                        class="emotion-43 emotion-44 emotion-10"
                       >
                         Saturn
                       </span>
                     </div>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="uranus"
-                  class="emotion-36 emotion-37"
+                  class="emotion-37 emotion-38"
                   data-selected="false"
                   data-testid="option-uranus"
                   id="option-6"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-uranus"
                   >
                     <div
-                      class="emotion-40 emotion-5"
+                      class="emotion-41 emotion-42"
                     >
                       <span
-                        class="emotion-42 emotion-9"
+                        class="emotion-43 emotion-44 emotion-10"
                       >
                         Uranus
                       </span>
                     </div>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="neptune"
-                  class="emotion-36 emotion-37"
+                  class="emotion-37 emotion-38"
                   data-selected="false"
                   data-testid="option-neptune"
                   id="option-7"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-neptune"
                   >
                     <div
-                      class="emotion-40 emotion-5"
+                      class="emotion-41 emotion-42"
                     >
                       <span
-                        class="emotion-42 emotion-9"
+                        class="emotion-43 emotion-44 emotion-10"
                       >
                         <div
-                          class="emotion-106 emotion-9"
+                          class="emotion-115 emotion-10"
                         >
                           Neptune 
                           <span
-                            class="emotion-108 emotion-109 emotion-9"
+                            class="emotion-117 emotion-118 emotion-10"
                           >
                             Label
                           </span>
@@ -11110,14 +11150,14 @@ exports[`SelectInputV2 > renders correctly with error 1`] = `
                       </span>
                     </div>
                   </div>
-                </button>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
       <p
-        class="emotion-111 emotion-112 emotion-9"
+        class="emotion-120 emotion-121 emotion-10"
       >
         error
       </p>
@@ -11213,18 +11253,7 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
   background: #ffffff;
   border-radius: 4px;
   width: 100%;
-}
-
-.emotion-6[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-  cursor: default;
-}
-
-.emotion-6[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-  cursor: not-allowed;
+  overflow: hidden;
 }
 
 .emotion-6[data-size='small'] {
@@ -11244,33 +11273,65 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
   border: 1px solid #d9dadd;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  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 {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
 .emotion-6[data-state='success'] {
   border: 1px solid #22674e;
 }
 
+.emotion-6[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-6[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
 .emotion-6[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
+.emotion-6[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
+.emotion-6[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
 }
 
-.emotion-6:not([data-disabled='true']):hover,
-.emotion-6:not([data-disabled='true']):focus {
-  border-color: #792dd4;
-  outline: none;
+.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
 }
 
-.emotion-6[data-dropdownvisible='true'] {
-  border-color: #792dd4;
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
 }
 
-.emotion-8 {
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-9 {
+  color: #3f4250;
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -11279,9 +11340,11 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
-.emotion-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -11309,75 +11372,7 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
   display: flex;
 }
 
-.emotion-12 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  height: 32px;
-  padding: 0 8px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 8px;
-  border-radius: 4px;
-  box-sizing: border-box;
-  width: 32px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  outline-offset: 2px;
-  white-space: nowrap;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 14px;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 20px;
-  paragraph-spacing: 0;
-  text-case: none;
-  background: none;
-  border: none;
-  color: #3f4250;
-}
-
-.emotion-12:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-12:active {
-  box-shadow: 0px 0px 0px 3px #151a2d5c;
-}
-
-.emotion-12:hover,
-.emotion-12:active {
-  background: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-14 {
-  vertical-align: middle;
-  fill: currentColor;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
-}
-
-.emotion-14 .fillStroke {
-  stroke: currentColor;
-  fill: none;
-}
-
-.emotion-16 {
+.emotion-13 {
   vertical-align: middle;
   fill: #3f4250;
   height: 16px;
@@ -11386,12 +11381,12 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
   min-height: 16px;
 }
 
-.emotion-16 .fillStroke {
+.emotion-13 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
 
-.emotion-19 {
+.emotion-16 {
   background: #151a2d;
   color: #ffffff;
   border-radius: 4px;
@@ -11415,14 +11410,15 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
   color: #3f4250;
   box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
   padding: 0;
+  margin-bottom: 80px;
 }
 
-.emotion-19[data-animated="true"] {
+.emotion-16[data-animated="true"] {
   -webkit-animation: 0ms animation-0 forwards;
   animation: 0ms animation-0 forwards;
 }
 
-.emotion-19[data-has-arrow="true"]::after {
+.emotion-16[data-has-arrow="true"]::after {
   content: " ";
   position: absolute;
   top: -5px;
@@ -11438,11 +11434,11 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
   pointer-events: none;
 }
 
-.emotion-19[data-visible-in-dom="false"] {
+.emotion-16[data-visible-in-dom="false"] {
   display: none;
 }
 
-.emotion-21 {
+.emotion-18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -11465,7 +11461,7 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-24 {
+.emotion-21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -11492,7 +11488,7 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
   padding-right: 16px;
 }
 
-.emotion-26 {
+.emotion-23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -11506,69 +11502,69 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
   border-radius: 4px;
 }
 
-.emotion-26>.emotion-33 {
+.emotion-23>.emotion-30 {
   color: #3f4250;
 }
 
-.emotion-26>.emotion-33::-webkit-input-placeholder {
+.emotion-23>.emotion-30::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-26>.emotion-33::-moz-placeholder {
+.emotion-23>.emotion-30::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-26>.emotion-33:-ms-input-placeholder {
+.emotion-23>.emotion-30:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-26>.emotion-33::placeholder {
+.emotion-23>.emotion-30::placeholder {
   color: #727683;
 }
 
-.emotion-26[data-success='true'] {
+.emotion-23[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-26[data-error='true'] {
+.emotion-23[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-26[data-readonly='true'] {
+.emotion-23[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-26[data-disabled='true'] {
+.emotion-23[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-26[data-disabled='true']>.emotion-33 {
+.emotion-23[data-disabled='true']>.emotion-30 {
   color: #b5b7bd;
 }
 
-.emotion-26[data-disabled='true']>.emotion-33::-webkit-input-placeholder {
+.emotion-23[data-disabled='true']>.emotion-30::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-26[data-disabled='true']>.emotion-33::-moz-placeholder {
+.emotion-23[data-disabled='true']>.emotion-30::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-26[data-disabled='true']>.emotion-33:-ms-input-placeholder {
+.emotion-23[data-disabled='true']>.emotion-30:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-26[data-disabled='true']>.emotion-33::placeholder {
+.emotion-23[data-disabled='true']>.emotion-30::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-26:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-23:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-28 {
+.emotion-25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -11594,11 +11590,11 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
   border-color: inherit;
 }
 
-.emotion-28[data-size="small"] {
+.emotion-25[data-size="small"] {
   padding: 8px;
 }
 
-.emotion-32 {
+.emotion-29 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -11611,15 +11607,15 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
   font-size: 14px;
 }
 
-.emotion-32[data-size='large'] {
+.emotion-29[data-size='large'] {
   font-size: 16px;
 }
 
-.emotion-32[data-size='small'] {
+.emotion-29[data-size='small'] {
   padding-left: 8px;
 }
 
-.emotion-34 {
+.emotion-31 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -11647,11 +11643,11 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
   padding-top: 4px;
 }
 
-.emotion-34[data-grouped="true"] {
+.emotion-31[data-grouped="true"] {
   padding-top: 0;
 }
 
-.emotion-36 {
+.emotion-33 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -11674,13 +11670,13 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-38 {
+.emotion-35 {
   position: -webkit-sticky;
   position: sticky;
   top: 0px;
 }
 
-.emotion-40 {
+.emotion-37 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -11706,21 +11702,22 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
   margin-bottom: 2px;
 }
 
-.emotion-40:focus {
+.emotion-37:focus {
   background-color: #f9f9fa;
   outline: none;
 }
 
-.emotion-40[data-selectgroup='true'] {
+.emotion-37[data-selectgroup='true'] {
   padding-left: 16px;
   border-left: 4px solid #f9f9fa;
 }
 
-.emotion-40[data-selectgroup='true']:focus {
+.emotion-37[data-selectgroup='true']:focus {
   background-color: #e9eaeb;
 }
 
-.emotion-42 {
+.emotion-39 {
+  color: #3f4250;
   font-size: 12px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -11732,7 +11729,7 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
   text-align: left;
 }
 
-.emotion-46 {
+.emotion-43 {
   text-align: left;
   border: none;
   background-color: #ffffff;
@@ -11743,32 +11740,32 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
   border-radius: 4px;
 }
 
-.emotion-46:hover,
-.emotion-46:focus {
+.emotion-43:hover,
+.emotion-43:focus {
   background-color: #f1eefc;
   color: #641cb3;
   cursor: pointer;
   outline: none;
 }
 
-.emotion-46[data-selected='true'] {
+.emotion-43[data-selected='true'] {
   background-color: #f1eefc;
 }
 
-.emotion-46[disabled] {
+.emotion-43[disabled] {
   background-color: #f3f3f4;
   color: #b5b7bd;
 }
 
-.emotion-46[disabled]:hover,
-.emotion-46 [disabled]:focus {
+.emotion-43[disabled]:hover,
+.emotion-43 [disabled]:focus {
   background-color: #f3f3f4;
   color: #b5b7bd;
   cursor: not-allowed;
   outline: none;
 }
 
-.emotion-50 {
+.emotion-47 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -11788,9 +11785,10 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
+  overflow: hidden;
 }
 
-.emotion-52 {
+.emotion-50 {
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -11800,6 +11798,16 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   text-align: left;
+  overflow: auto;
+  text-overflow: ellipsis;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  max-width: 100%;
 }
 
 .emotion-70 {
@@ -11815,7 +11823,18 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
   text-align: left;
 }
 
-.emotion-137 {
+.emotion-140 {
+  font-size: 16px;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 24px;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-143 {
   font-size: 12px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -11850,7 +11869,7 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
   border: 1px solid #d9dadd;
 }
 
-.emotion-139 {
+.emotion-145 {
   width: 100%;
   padding: 12px 16px 12px 16px;
   box-shadow: 0px 4px 24px 6px #d9dadd66;
@@ -11864,8 +11883,8 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
       class="emotion-0 emotion-1"
     >
       <div
-        aria-controls=":r3i:"
-        aria-describedby=":r3i:"
+        aria-controls=":r3h:"
+        aria-describedby=":r3h:"
         class="emotion-2 emotion-3"
         data-container-full-width="true"
         tabindex="0"
@@ -11883,43 +11902,26 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
             data-size="large"
             data-state="neutral"
             data-testid="select-input-test"
-            id=":r3h:"
+            id=":r3g:"
             role="combobox"
             tabindex="0"
           >
-            <p
-              class="emotion-8 emotion-9"
+            <div
+              class="emotion-8 emotion-9 emotion-10"
             >
               Pluto
-            </p>
+            </div>
             <div
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
             >
-              <button
-                aria-label="clear value"
-                class="emotion-12 emotion-13"
-                data-testid="clear-all"
-                type="button"
-              >
-                <svg
-                  class="emotion-14 emotion-15"
-                  viewBox="0 0 16 16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94z"
-                  />
-                </svg>
-              </button>
               <svg
                 aria-label="show dropdown"
-                class="emotion-16 emotion-15"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
+                class="emotion-13 emotion-14"
+                viewBox="0 0 20 20"
               >
                 <path
                   clip-rule="evenodd"
-                  d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06"
+                  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>
@@ -11927,39 +11929,38 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
           </div>
         </div>
         <div
-          class="emotion-18 emotion-19 emotion-20"
+          class="emotion-15 emotion-16 emotion-17"
           data-animated="false"
           data-has-arrow="false"
-          id=":r3i:"
+          id=":r3h:"
           role="dialog"
           style="opacity: 1;"
         >
           <div
-            class="emotion-21 emotion-5"
+            class="emotion-18 emotion-5"
           >
             <div
-              class="emotion-23 emotion-24 emotion-5"
+              class="emotion-20 emotion-21 emotion-5"
             >
               <div>
                 <div
-                  class="emotion-26 emotion-27"
+                  class="emotion-23 emotion-24"
                   data-disabled="false"
                   data-error="false"
                   data-readonly="false"
                   data-success="false"
                 >
                   <div
-                    class="emotion-28 emotion-29"
+                    class="emotion-25 emotion-26"
                     data-size="medium"
                   >
                     <svg
-                      class="emotion-16 emotion-15"
-                      viewBox="0 0 16 16"
-                      xmlns="http://www.w3.org/2000/svg"
+                      class="emotion-13 emotion-14"
+                      viewBox="0 0 20 20"
                     >
                       <path
                         clip-rule="evenodd"
-                        d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06zM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0"
+                        d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11M2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9"
                         fill-rule="evenodd"
                       />
                     </svg>
@@ -11967,10 +11968,10 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
                   <input
                     aria-invalid="false"
                     aria-label="search-bar"
-                    class="emotion-32 emotion-33"
+                    class="emotion-29 emotion-30"
                     data-size="medium"
                     data-testid="search-bar"
-                    id=":r3m:"
+                    id=":r3k:"
                     placeholder="placeholdersearch"
                     type="text"
                     value=""
@@ -11979,19 +11980,19 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
               </div>
             </div>
             <div
-              class="emotion-34 emotion-35"
+              class="emotion-31 emotion-32"
               data-grouped="true"
               id="select-dropdown"
               role="listbox"
             >
               <div
-                class="emotion-36 emotion-5"
+                class="emotion-33 emotion-5"
               >
                 <div
-                  class="emotion-38 emotion-39"
+                  class="emotion-35 emotion-36"
                 >
                   <button
-                    class="emotion-40 emotion-41"
+                    class="emotion-37 emotion-38"
                     data-selectgroup="false"
                     data-testid="group-0"
                     role="group"
@@ -11999,157 +12000,157 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
                     type="button"
                   >
                     <span
-                      class="emotion-42 emotion-9"
+                      class="emotion-39 emotion-10"
                     >
                       TERRESTRIAL PLANETS
                     </span>
                   </button>
                 </div>
                 <div
-                  class="emotion-36 emotion-5"
+                  class="emotion-33 emotion-5"
                   id="items"
                 >
-                  <button
+                  <div
                     aria-label="mercury"
-                    class="emotion-46 emotion-47"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-mercury"
                     id="option-0"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-mercury"
                     >
                       <div
-                        class="emotion-50 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-52 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Mercury
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="venus"
-                    class="emotion-46 emotion-47"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-venus"
                     id="option-1"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-venus"
                     >
                       <div
-                        class="emotion-50 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-52 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Venus
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="earth"
-                    class="emotion-46 emotion-47"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-earth"
                     id="option-2"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-earth"
                     >
                       <div
-                        class="emotion-50 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-52 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Earth
                         </span>
                       </div>
                       <span
-                        class="emotion-70 emotion-9"
+                        class="emotion-70 emotion-10"
                       >
                         Our home planet
                       </span>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="mars"
-                    class="emotion-46 emotion-47"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-mars"
                     disabled=""
                     id="option-3"
                     role="option"
-                    type="button"
+                    tabindex="-1"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-mars"
                     >
                       <div
-                        class="emotion-50 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-52 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Mars
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="pluto"
-                    class="emotion-46 emotion-47"
+                    class="emotion-43 emotion-44"
                     data-selected="true"
                     data-testid="option-pluto"
                     id="option-4"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-pluto"
                     >
                       <div
-                        class="emotion-50 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-52 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Pluto
                         </span>
                       </div>
                       <span
-                        class="emotion-70 emotion-9"
+                        class="emotion-70 emotion-10"
                       >
                         Pluto does not fit the usual classification of either terrestrial or Jovian planets, but is rocky
                       </span>
                     </div>
-                  </button>
+                  </div>
                 </div>
               </div>
               <div
-                class="emotion-36 emotion-5"
+                class="emotion-33 emotion-5"
               >
                 <div
-                  class="emotion-38 emotion-39"
+                  class="emotion-35 emotion-36"
                 >
                   <button
-                    class="emotion-40 emotion-41"
+                    class="emotion-37 emotion-38"
                     data-selectgroup="false"
                     data-testid="group-1"
                     role="group"
@@ -12157,118 +12158,118 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
                     type="button"
                   >
                     <span
-                      class="emotion-42 emotion-9"
+                      class="emotion-39 emotion-10"
                     >
                       JOVIAN PLANETS
                     </span>
                   </button>
                 </div>
                 <div
-                  class="emotion-36 emotion-5"
+                  class="emotion-33 emotion-5"
                   id="items"
                 >
-                  <button
+                  <div
                     aria-label="jupiter"
-                    class="emotion-46 emotion-47"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-jupiter"
                     id="option-0"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-jupiter"
                     >
                       <div
-                        class="emotion-50 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-52 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Jupiter
                         </span>
                       </div>
                       <span
-                        class="emotion-70 emotion-9"
+                        class="emotion-70 emotion-10"
                       >
                         Jupiter is the fifth planet from the Sun and the largest in the Solar System. It is a gas giant with a mass more than two and a half times that of all the other planets in the Solar System combined, and slightly less than one one-thousandth the mass of the Sun.
                       </span>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="saturn"
-                    class="emotion-46 emotion-47"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-saturn"
                     id="option-1"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-saturn"
                     >
                       <div
-                        class="emotion-50 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-52 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Saturn
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="uranus"
-                    class="emotion-46 emotion-47"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-uranus"
                     id="option-2"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-uranus"
                     >
                       <div
-                        class="emotion-50 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-52 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Uranus
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="neptune"
-                    class="emotion-46 emotion-47"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-neptune"
                     id="option-3"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-neptune"
                     >
                       <div
-                        class="emotion-50 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-52 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           <div
-                            class="emotion-8 emotion-9"
+                            class="emotion-140 emotion-10"
                           >
                             Neptune 
                             <span
-                              class="emotion-136 emotion-137 emotion-9"
+                              class="emotion-142 emotion-143 emotion-10"
                             >
                               Label
                             </span>
@@ -12276,14 +12277,275 @@ exports[`SelectInputV2 > renders correctly with footer 1`] = `
                         </span>
                       </div>
                     </div>
-                  </button>
+                  </div>
                 </div>
               </div>
             </div>
             <div
-              class="emotion-139 emotion-140"
+              class="emotion-145 emotion-146"
+            >
+              this is a footer
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectInputV2 > renders correctly with function footer 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  width: 100%;
+}
+
+.emotion-2 {
+  display: inherit;
+}
+
+.emotion-2[data-container-full-width="true"] {
+  width: 100%;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 4px;
+  -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: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 8px;
+  -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: 8px;
+  padding-right: 0;
+  padding-left: 16px;
+  cursor: pointer;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 4px;
+  width: 100%;
+  overflow: hidden;
+}
+
+.emotion-6[data-size='small'] {
+  height: 32px;
+  padding-left: 8px;
+}
+
+.emotion-6[data-size='medium'] {
+  height: 40px;
+}
+
+.emotion-6[data-size='large'] {
+  height: 48px;
+}
+
+.emotion-6[data-state='neutral'] {
+  border: 1px solid #d9dadd;
+}
+
+.emotion-6[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  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 {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
+.emotion-6[data-state='success'] {
+  border: 1px solid #22674e;
+}
+
+.emotion-6[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-6[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
+.emotion-6[data-state='danger'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-6[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-6[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
+}
+
+.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
+}
+
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-9 {
+  color: #3f4250;
+  font-size: 16px;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 24px;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.emotion-11 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 8px;
+  -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: 16px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-13 {
+  vertical-align: middle;
+  fill: #3f4250;
+  height: 16px;
+  width: 16px;
+  min-width: 16px;
+  min-height: 16px;
+}
+
+.emotion-13 .fillStroke {
+  stroke: #3f4250;
+  fill: none;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      aria-label="test"
+      class="emotion-0 emotion-1"
+    >
+      <div
+        aria-controls=":r1st:"
+        aria-describedby=":r1st:"
+        class="emotion-2 emotion-3"
+        data-container-full-width="true"
+        tabindex="0"
+      >
+        <div
+          class="emotion-4 emotion-5"
+        >
+          <div
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            class="emotion-6 emotion-7"
+            data-disabled="false"
+            data-dropdownvisible="false"
+            data-readonly="false"
+            data-size="large"
+            data-state="neutral"
+            data-testid="select-input-test"
+            id=":r1ss:"
+            role="combobox"
+            tabindex="0"
+          >
+            <div
+              class="emotion-8 emotion-9 emotion-10"
+            >
+              Pluto
+            </div>
+            <div
+              class="emotion-11 emotion-12"
             >
-              this is a footer
+              <svg
+                aria-label="show dropdown"
+                class="emotion-13 emotion-14"
+                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>
@@ -12380,18 +12642,7 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   background: #ffffff;
   border-radius: 4px;
   width: 100%;
-}
-
-.emotion-6[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-  cursor: default;
-}
-
-.emotion-6[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-  cursor: not-allowed;
+  overflow: hidden;
 }
 
 .emotion-6[data-size='small'] {
@@ -12411,33 +12662,64 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   border: 1px solid #d9dadd;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  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 {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
 .emotion-6[data-state='success'] {
   border: 1px solid #22674e;
 }
 
+.emotion-6[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-6[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
 .emotion-6[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
+.emotion-6[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
+.emotion-6[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
 }
 
-.emotion-6:not([data-disabled='true']):hover,
-.emotion-6:not([data-disabled='true']):focus {
-  border-color: #792dd4;
-  outline: none;
+.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
 }
 
-.emotion-6[data-dropdownvisible='true'] {
-  border-color: #792dd4;
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
 }
 
-.emotion-8 {
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-9 {
   color: #727683;
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
@@ -12447,9 +12729,13 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   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-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -12477,7 +12763,7 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   display: flex;
 }
 
-.emotion-12 {
+.emotion-13 {
   vertical-align: middle;
   fill: #3f4250;
   height: 16px;
@@ -12486,12 +12772,12 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   min-height: 16px;
 }
 
-.emotion-12 .fillStroke {
+.emotion-13 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
 
-.emotion-15 {
+.emotion-16 {
   background: #151a2d;
   color: #ffffff;
   border-radius: 4px;
@@ -12515,14 +12801,15 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   color: #3f4250;
   box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
   padding: 0;
+  margin-bottom: 80px;
 }
 
-.emotion-15[data-animated="true"] {
+.emotion-16[data-animated="true"] {
   -webkit-animation: 0ms animation-0 forwards;
   animation: 0ms animation-0 forwards;
 }
 
-.emotion-15[data-has-arrow="true"]::after {
+.emotion-16[data-has-arrow="true"]::after {
   content: " ";
   position: absolute;
   top: -5px;
@@ -12538,11 +12825,11 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   pointer-events: none;
 }
 
-.emotion-15[data-visible-in-dom="false"] {
+.emotion-16[data-visible-in-dom="false"] {
   display: none;
 }
 
-.emotion-17 {
+.emotion-18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -12565,7 +12852,7 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   flex-wrap: nowrap;
 }
 
-.emotion-20 {
+.emotion-21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -12592,7 +12879,7 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   padding-right: 16px;
 }
 
-.emotion-22 {
+.emotion-23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -12606,69 +12893,69 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   border-radius: 4px;
 }
 
-.emotion-22>.emotion-29 {
+.emotion-23>.emotion-30 {
   color: #3f4250;
 }
 
-.emotion-22>.emotion-29::-webkit-input-placeholder {
+.emotion-23>.emotion-30::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-22>.emotion-29::-moz-placeholder {
+.emotion-23>.emotion-30::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-22>.emotion-29:-ms-input-placeholder {
+.emotion-23>.emotion-30:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-22>.emotion-29::placeholder {
+.emotion-23>.emotion-30::placeholder {
   color: #727683;
 }
 
-.emotion-22[data-success='true'] {
+.emotion-23[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-22[data-error='true'] {
+.emotion-23[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-22[data-readonly='true'] {
+.emotion-23[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-22[data-disabled='true'] {
+.emotion-23[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29 {
+.emotion-23[data-disabled='true']>.emotion-30 {
   color: #b5b7bd;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29::-webkit-input-placeholder {
+.emotion-23[data-disabled='true']>.emotion-30::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29::-moz-placeholder {
+.emotion-23[data-disabled='true']>.emotion-30::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29:-ms-input-placeholder {
+.emotion-23[data-disabled='true']>.emotion-30:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29::placeholder {
+.emotion-23[data-disabled='true']>.emotion-30::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-22:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-23:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-24 {
+.emotion-25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -12694,11 +12981,11 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   border-color: inherit;
 }
 
-.emotion-24[data-size="small"] {
+.emotion-25[data-size="small"] {
   padding: 8px;
 }
 
-.emotion-28 {
+.emotion-29 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -12711,15 +12998,15 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   font-size: 14px;
 }
 
-.emotion-28[data-size='large'] {
+.emotion-29[data-size='large'] {
   font-size: 16px;
 }
 
-.emotion-28[data-size='small'] {
+.emotion-29[data-size='small'] {
   padding-left: 8px;
 }
 
-.emotion-30 {
+.emotion-31 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -12747,11 +13034,11 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   padding-top: 4px;
 }
 
-.emotion-30[data-grouped="true"] {
+.emotion-31[data-grouped="true"] {
   padding-top: 0;
 }
 
-.emotion-32 {
+.emotion-33 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -12774,13 +13061,13 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   flex-wrap: nowrap;
 }
 
-.emotion-34 {
+.emotion-35 {
   position: -webkit-sticky;
   position: sticky;
   top: 0px;
 }
 
-.emotion-36 {
+.emotion-37 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -12806,21 +13093,22 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   margin-bottom: 2px;
 }
 
-.emotion-36:focus {
+.emotion-37:focus {
   background-color: #f9f9fa;
   outline: none;
 }
 
-.emotion-36[data-selectgroup='true'] {
+.emotion-37[data-selectgroup='true'] {
   padding-left: 16px;
   border-left: 4px solid #f9f9fa;
 }
 
-.emotion-36[data-selectgroup='true']:focus {
+.emotion-37[data-selectgroup='true']:focus {
   background-color: #e9eaeb;
 }
 
-.emotion-38 {
+.emotion-39 {
+  color: #3f4250;
   font-size: 12px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -12832,7 +13120,7 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   text-align: left;
 }
 
-.emotion-42 {
+.emotion-43 {
   text-align: left;
   border: none;
   background-color: #ffffff;
@@ -12843,32 +13131,32 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   border-radius: 4px;
 }
 
-.emotion-42:hover,
-.emotion-42:focus {
+.emotion-43:hover,
+.emotion-43:focus {
   background-color: #f1eefc;
   color: #641cb3;
   cursor: pointer;
   outline: none;
 }
 
-.emotion-42[data-selected='true'] {
+.emotion-43[data-selected='true'] {
   background-color: #f1eefc;
 }
 
-.emotion-42[disabled] {
+.emotion-43[disabled] {
   background-color: #f3f3f4;
   color: #b5b7bd;
 }
 
-.emotion-42[disabled]:hover,
-.emotion-42 [disabled]:focus {
+.emotion-43[disabled]:hover,
+.emotion-43 [disabled]:focus {
   background-color: #f3f3f4;
   color: #b5b7bd;
   cursor: not-allowed;
   outline: none;
 }
 
-.emotion-44 {
+.emotion-45 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -12891,7 +13179,7 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   flex-wrap: nowrap;
 }
 
-.emotion-47 {
+.emotion-48 {
   font-size: 12px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -12926,7 +13214,31 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   border: 1px solid #d9dadd;
 }
 
-.emotion-51 {
+.emotion-50 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 4px;
+  -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;
+  overflow: hidden;
+}
+
+.emotion-53 {
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -12936,9 +13248,19 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   -webkit-text-decoration: none;
   text-decoration: none;
   text-align: left;
+  overflow: auto;
+  text-overflow: ellipsis;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  max-width: 100%;
 }
 
-.emotion-66 {
+.emotion-69 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -12960,7 +13282,7 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   flex-wrap: nowrap;
 }
 
-.emotion-72 {
+.emotion-76 {
   color: #727683;
   font-size: 14px;
   font-family: Inter,Asap,sans-serif;
@@ -12973,7 +13295,7 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   text-align: left;
 }
 
-.emotion-90 {
+.emotion-96 {
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -12993,8 +13315,8 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
       class="emotion-0 emotion-1"
     >
       <div
-        aria-controls=":r89:"
-        aria-describedby=":r89:"
+        aria-controls=":r86:"
+        aria-describedby=":r86:"
         class="emotion-2 emotion-3"
         data-container-full-width="true"
         tabindex="0"
@@ -13012,27 +13334,26 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
             data-size="large"
             data-state="neutral"
             data-testid="select-input-test"
-            id=":r88:"
+            id=":r85:"
             role="combobox"
             tabindex="0"
           >
             <p
-              class="emotion-8 emotion-9"
+              class="emotion-8 emotion-9 emotion-10"
             >
               placeholder
             </p>
             <div
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
             >
               <svg
                 aria-label="show dropdown"
-                class="emotion-12 emotion-13"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
+                class="emotion-13 emotion-14"
+                viewBox="0 0 20 20"
               >
                 <path
                   clip-rule="evenodd"
-                  d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06"
+                  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>
@@ -13040,39 +13361,38 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
           </div>
         </div>
         <div
-          class="emotion-14 emotion-15 emotion-16"
+          class="emotion-15 emotion-16 emotion-17"
           data-animated="false"
           data-has-arrow="false"
-          id=":r89:"
+          id=":r86:"
           role="dialog"
           style="opacity: 1;"
         >
           <div
-            class="emotion-17 emotion-5"
+            class="emotion-18 emotion-5"
           >
             <div
-              class="emotion-19 emotion-20 emotion-5"
+              class="emotion-20 emotion-21 emotion-5"
             >
               <div>
                 <div
-                  class="emotion-22 emotion-23"
+                  class="emotion-23 emotion-24"
                   data-disabled="false"
                   data-error="false"
                   data-readonly="false"
                   data-success="false"
                 >
                   <div
-                    class="emotion-24 emotion-25"
+                    class="emotion-25 emotion-26"
                     data-size="medium"
                   >
                     <svg
-                      class="emotion-12 emotion-13"
-                      viewBox="0 0 16 16"
-                      xmlns="http://www.w3.org/2000/svg"
+                      class="emotion-13 emotion-14"
+                      viewBox="0 0 20 20"
                     >
                       <path
                         clip-rule="evenodd"
-                        d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06zM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0"
+                        d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11M2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9"
                         fill-rule="evenodd"
                       />
                     </svg>
@@ -13080,10 +13400,10 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
                   <input
                     aria-invalid="false"
                     aria-label="search-bar"
-                    class="emotion-28 emotion-29"
+                    class="emotion-29 emotion-30"
                     data-size="medium"
                     data-testid="search-bar"
-                    id=":r8c:"
+                    id=":r89:"
                     placeholder="placeholdersearch"
                     type="text"
                     value=""
@@ -13092,19 +13412,19 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
               </div>
             </div>
             <div
-              class="emotion-30 emotion-31"
+              class="emotion-31 emotion-32"
               data-grouped="true"
               id="select-dropdown"
               role="listbox"
             >
               <div
-                class="emotion-32 emotion-5"
+                class="emotion-33 emotion-5"
               >
                 <div
-                  class="emotion-34 emotion-35"
+                  class="emotion-35 emotion-36"
                 >
                   <button
-                    class="emotion-36 emotion-37"
+                    class="emotion-37 emotion-38"
                     data-selectgroup="false"
                     data-testid="group-0"
                     role="group"
@@ -13112,170 +13432,170 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
                     type="button"
                   >
                     <span
-                      class="emotion-38 emotion-9"
+                      class="emotion-39 emotion-10"
                     >
                       TERRESTRIAL PLANETS
                     </span>
                   </button>
                 </div>
                 <div
-                  class="emotion-32 emotion-5"
+                  class="emotion-33 emotion-5"
                   id="items"
                 >
-                  <button
+                  <div
                     aria-label="mercury"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-mercury"
                     id="option-0"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
-                      class="emotion-44 emotion-5"
+                      class="emotion-45 emotion-5"
                     >
                       <span
-                        class="emotion-46 emotion-47 emotion-9"
+                        class="emotion-47 emotion-48 emotion-10"
                       >
                         Optional info
                       </span>
                       <div
-                        class="emotion-4 emotion-5"
+                        class="emotion-50 emotion-51"
                         data-testid="option-stack-mercury"
                       >
                         <span
-                          class="emotion-51 emotion-9"
+                          class="emotion-52 emotion-53 emotion-10"
                         >
                           Mercury
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="venus"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-venus"
                     id="option-1"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
-                      class="emotion-44 emotion-5"
+                      class="emotion-45 emotion-5"
                     >
                       <span
-                        class="emotion-46 emotion-47 emotion-9"
+                        class="emotion-47 emotion-48 emotion-10"
                       >
                         Optional info
                       </span>
                       <div
-                        class="emotion-4 emotion-5"
+                        class="emotion-50 emotion-51"
                         data-testid="option-stack-venus"
                       >
                         <span
-                          class="emotion-51 emotion-9"
+                          class="emotion-52 emotion-53 emotion-10"
                         >
                           Venus
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="earth"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-earth"
                     id="option-2"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
-                      class="emotion-66 emotion-5"
+                      class="emotion-69 emotion-5"
                     >
                       <div
-                        class="emotion-4 emotion-5"
+                        class="emotion-50 emotion-51"
                         data-testid="option-stack-earth"
                       >
                         <span
-                          class="emotion-51 emotion-9"
+                          class="emotion-52 emotion-53 emotion-10"
                         >
                           Earth
                         </span>
                         <span
-                          class="emotion-72 emotion-9"
+                          class="emotion-76 emotion-10"
                         >
                           Our home planet
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="mars"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-mars"
                     id="option-3"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
-                      class="emotion-66 emotion-5"
+                      class="emotion-69 emotion-5"
                     >
                       <div
-                        class="emotion-4 emotion-5"
+                        class="emotion-50 emotion-51"
                         data-testid="option-stack-mars"
                       >
                         <span
-                          class="emotion-51 emotion-9"
+                          class="emotion-52 emotion-53 emotion-10"
                         >
                           Mars
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="pluto"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-pluto"
                     id="option-4"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
-                      class="emotion-66 emotion-5"
+                      class="emotion-69 emotion-5"
                     >
                       <div
-                        class="emotion-4 emotion-5"
+                        class="emotion-50 emotion-51"
                         data-testid="option-stack-pluto"
                       >
                         <span
-                          class="emotion-51 emotion-9"
+                          class="emotion-52 emotion-53 emotion-10"
                         >
                           <div
-                            class="emotion-90 emotion-9"
+                            class="emotion-96 emotion-10"
                           >
                             Pluto
                           </div>
                         </span>
                         <span
-                          class="emotion-72 emotion-9"
+                          class="emotion-76 emotion-10"
                         >
                           Pluto does not fit the usual classification of either terrestrial or Jovian planets, but is rocky
                         </span>
                       </div>
                     </div>
-                  </button>
+                  </div>
                 </div>
               </div>
               <div
-                class="emotion-32 emotion-5"
+                class="emotion-33 emotion-5"
               >
                 <div
-                  class="emotion-34 emotion-35"
+                  class="emotion-35 emotion-36"
                 >
                   <button
-                    class="emotion-36 emotion-37"
+                    class="emotion-37 emotion-38"
                     data-selectgroup="false"
                     data-testid="group-1"
                     role="group"
@@ -13283,127 +13603,127 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
                     type="button"
                   >
                     <span
-                      class="emotion-38 emotion-9"
+                      class="emotion-39 emotion-10"
                     >
                       JOVIAN PLANETS
                     </span>
                   </button>
                 </div>
                 <div
-                  class="emotion-32 emotion-5"
+                  class="emotion-33 emotion-5"
                   id="items"
                 >
-                  <button
+                  <div
                     aria-label="jupiter"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-jupiter"
                     id="option-0"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
-                      class="emotion-44 emotion-5"
+                      class="emotion-45 emotion-5"
                     >
                       <span
-                        class="emotion-46 emotion-47 emotion-9"
+                        class="emotion-47 emotion-48 emotion-10"
                       >
                         Optional info
                       </span>
                       <div
-                        class="emotion-4 emotion-5"
+                        class="emotion-50 emotion-51"
                         data-testid="option-stack-jupiter"
                       >
                         <span
-                          class="emotion-51 emotion-9"
+                          class="emotion-52 emotion-53 emotion-10"
                         >
                           Jupiter
                         </span>
                         <span
-                          class="emotion-72 emotion-9"
+                          class="emotion-76 emotion-10"
                         >
                           Jupiter is the fifth planet from the Sun and the largest in the Solar System. It is a gas giant with a mass more than two and a half times that of all the other planets in the Solar System combined, and slightly less than one one-thousandth the mass of the Sun.
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="saturn"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-saturn"
                     id="option-1"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
-                      class="emotion-66 emotion-5"
+                      class="emotion-69 emotion-5"
                     >
                       <div
-                        class="emotion-4 emotion-5"
+                        class="emotion-50 emotion-51"
                         data-testid="option-stack-saturn"
                       >
                         <span
-                          class="emotion-51 emotion-9"
+                          class="emotion-52 emotion-53 emotion-10"
                         >
                           Saturn
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="uranus"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-uranus"
                     id="option-2"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
-                      class="emotion-44 emotion-5"
+                      class="emotion-45 emotion-5"
                     >
                       <span
-                        class="emotion-46 emotion-47 emotion-9"
+                        class="emotion-47 emotion-48 emotion-10"
                       >
                         Optional info
                       </span>
                       <div
-                        class="emotion-4 emotion-5"
+                        class="emotion-50 emotion-51"
                         data-testid="option-stack-uranus"
                       >
                         <span
-                          class="emotion-51 emotion-9"
+                          class="emotion-52 emotion-53 emotion-10"
                         >
                           Uranus
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="neptune"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-neptune"
                     id="option-3"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
-                      class="emotion-66 emotion-5"
+                      class="emotion-69 emotion-5"
                     >
                       <div
-                        class="emotion-4 emotion-5"
+                        class="emotion-50 emotion-51"
                         data-testid="option-stack-neptune"
                       >
                         <span
-                          class="emotion-51 emotion-9"
+                          class="emotion-52 emotion-53 emotion-10"
                         >
                           Neptune
                         </span>
                       </div>
                     </div>
-                  </button>
+                  </div>
                 </div>
               </div>
             </div>
@@ -13497,23 +13817,12 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   padding: 8px;
   padding-right: 0;
   padding-left: 16px;
-  cursor: pointer;
-  box-shadow: none;
-  background: #ffffff;
-  border-radius: 4px;
-  width: 100%;
-}
-
-.emotion-6[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-  cursor: default;
-}
-
-.emotion-6[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-  cursor: not-allowed;
+  cursor: pointer;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 4px;
+  width: 100%;
+  overflow: hidden;
 }
 
 .emotion-6[data-size='small'] {
@@ -13533,33 +13842,64 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   border: 1px solid #d9dadd;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  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 {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
 .emotion-6[data-state='success'] {
   border: 1px solid #22674e;
 }
 
+.emotion-6[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-6[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
 .emotion-6[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
+.emotion-6[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
+.emotion-6[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
 }
 
-.emotion-6:not([data-disabled='true']):hover,
-.emotion-6:not([data-disabled='true']):focus {
-  border-color: #792dd4;
-  outline: none;
+.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
 }
 
-.emotion-6[data-dropdownvisible='true'] {
-  border-color: #792dd4;
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
 }
 
-.emotion-8 {
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-9 {
   color: #727683;
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
@@ -13569,9 +13909,13 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   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-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -13599,7 +13943,7 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   display: flex;
 }
 
-.emotion-12 {
+.emotion-13 {
   vertical-align: middle;
   fill: #3f4250;
   height: 16px;
@@ -13608,12 +13952,12 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   min-height: 16px;
 }
 
-.emotion-12 .fillStroke {
+.emotion-13 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
 
-.emotion-15 {
+.emotion-16 {
   background: #151a2d;
   color: #ffffff;
   border-radius: 4px;
@@ -13637,14 +13981,15 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   color: #3f4250;
   box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
   padding: 0;
+  margin-bottom: 80px;
 }
 
-.emotion-15[data-animated="true"] {
+.emotion-16[data-animated="true"] {
   -webkit-animation: 0ms animation-0 forwards;
   animation: 0ms animation-0 forwards;
 }
 
-.emotion-15[data-has-arrow="true"]::after {
+.emotion-16[data-has-arrow="true"]::after {
   content: " ";
   position: absolute;
   top: -5px;
@@ -13660,11 +14005,11 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   pointer-events: none;
 }
 
-.emotion-15[data-visible-in-dom="false"] {
+.emotion-16[data-visible-in-dom="false"] {
   display: none;
 }
 
-.emotion-17 {
+.emotion-18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -13687,7 +14032,7 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   flex-wrap: nowrap;
 }
 
-.emotion-20 {
+.emotion-21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -13714,7 +14059,7 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   padding-right: 16px;
 }
 
-.emotion-22 {
+.emotion-23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -13728,69 +14073,69 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   border-radius: 4px;
 }
 
-.emotion-22>.emotion-29 {
+.emotion-23>.emotion-30 {
   color: #3f4250;
 }
 
-.emotion-22>.emotion-29::-webkit-input-placeholder {
+.emotion-23>.emotion-30::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-22>.emotion-29::-moz-placeholder {
+.emotion-23>.emotion-30::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-22>.emotion-29:-ms-input-placeholder {
+.emotion-23>.emotion-30:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-22>.emotion-29::placeholder {
+.emotion-23>.emotion-30::placeholder {
   color: #727683;
 }
 
-.emotion-22[data-success='true'] {
+.emotion-23[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-22[data-error='true'] {
+.emotion-23[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-22[data-readonly='true'] {
+.emotion-23[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-22[data-disabled='true'] {
+.emotion-23[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29 {
+.emotion-23[data-disabled='true']>.emotion-30 {
   color: #b5b7bd;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29::-webkit-input-placeholder {
+.emotion-23[data-disabled='true']>.emotion-30::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29::-moz-placeholder {
+.emotion-23[data-disabled='true']>.emotion-30::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29:-ms-input-placeholder {
+.emotion-23[data-disabled='true']>.emotion-30:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29::placeholder {
+.emotion-23[data-disabled='true']>.emotion-30::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-22:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-23:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-24 {
+.emotion-25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -13816,11 +14161,11 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   border-color: inherit;
 }
 
-.emotion-24[data-size="small"] {
+.emotion-25[data-size="small"] {
   padding: 8px;
 }
 
-.emotion-28 {
+.emotion-29 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -13833,15 +14178,15 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   font-size: 14px;
 }
 
-.emotion-28[data-size='large'] {
+.emotion-29[data-size='large'] {
   font-size: 16px;
 }
 
-.emotion-28[data-size='small'] {
+.emotion-29[data-size='small'] {
   padding-left: 8px;
 }
 
-.emotion-30 {
+.emotion-31 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -13869,11 +14214,11 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   padding-top: 4px;
 }
 
-.emotion-30[data-grouped="true"] {
+.emotion-31[data-grouped="true"] {
   padding-top: 0;
 }
 
-.emotion-32 {
+.emotion-33 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -13896,13 +14241,13 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   flex-wrap: nowrap;
 }
 
-.emotion-34 {
+.emotion-35 {
   position: -webkit-sticky;
   position: sticky;
   top: 0px;
 }
 
-.emotion-36 {
+.emotion-37 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -13928,21 +14273,22 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   margin-bottom: 2px;
 }
 
-.emotion-36:focus {
+.emotion-37:focus {
   background-color: #f9f9fa;
   outline: none;
 }
 
-.emotion-36[data-selectgroup='true'] {
+.emotion-37[data-selectgroup='true'] {
   padding-left: 16px;
   border-left: 4px solid #f9f9fa;
 }
 
-.emotion-36[data-selectgroup='true']:focus {
+.emotion-37[data-selectgroup='true']:focus {
   background-color: #e9eaeb;
 }
 
-.emotion-38 {
+.emotion-39 {
+  color: #3f4250;
   font-size: 12px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -13954,7 +14300,7 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   text-align: left;
 }
 
-.emotion-42 {
+.emotion-43 {
   text-align: left;
   border: none;
   background-color: #ffffff;
@@ -13965,32 +14311,32 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   border-radius: 4px;
 }
 
-.emotion-42:hover,
-.emotion-42:focus {
+.emotion-43:hover,
+.emotion-43:focus {
   background-color: #f1eefc;
   color: #641cb3;
   cursor: pointer;
   outline: none;
 }
 
-.emotion-42[data-selected='true'] {
+.emotion-43[data-selected='true'] {
   background-color: #f1eefc;
 }
 
-.emotion-42[disabled] {
+.emotion-43[disabled] {
   background-color: #f3f3f4;
   color: #b5b7bd;
 }
 
-.emotion-42[disabled]:hover,
-.emotion-42 [disabled]:focus {
+.emotion-43[disabled]:hover,
+.emotion-43 [disabled]:focus {
   background-color: #f3f3f4;
   color: #b5b7bd;
   cursor: not-allowed;
   outline: none;
 }
 
-.emotion-46 {
+.emotion-47 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -14010,9 +14356,10 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
+  overflow: hidden;
 }
 
-.emotion-48 {
+.emotion-50 {
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -14022,15 +14369,25 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   -webkit-text-decoration: none;
   text-decoration: none;
   text-align: left;
+  overflow: auto;
+  text-overflow: ellipsis;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  max-width: 100%;
 }
 
-.emotion-50 {
+.emotion-52 {
   -webkit-align-content: center;
   -ms-flex-line-pack: center;
   align-content: center;
 }
 
-.emotion-53 {
+.emotion-55 {
   font-size: 12px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -14065,7 +14422,7 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   border: 1px solid #d9dadd;
 }
 
-.emotion-76 {
+.emotion-80 {
   color: #727683;
   font-size: 14px;
   font-family: Inter,Asap,sans-serif;
@@ -14078,7 +14435,7 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
   text-align: left;
 }
 
-.emotion-94 {
+.emotion-100 {
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -14098,8 +14455,8 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
       class="emotion-0 emotion-1"
     >
       <div
-        aria-controls=":r9b:"
-        aria-describedby=":r9b:"
+        aria-controls=":r98:"
+        aria-describedby=":r98:"
         class="emotion-2 emotion-3"
         data-container-full-width="true"
         tabindex="0"
@@ -14117,27 +14474,26 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
             data-size="large"
             data-state="neutral"
             data-testid="select-input-test"
-            id=":r9a:"
+            id=":r97:"
             role="combobox"
             tabindex="0"
           >
             <p
-              class="emotion-8 emotion-9"
+              class="emotion-8 emotion-9 emotion-10"
             >
               placeholder
             </p>
             <div
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
             >
               <svg
                 aria-label="show dropdown"
-                class="emotion-12 emotion-13"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
+                class="emotion-13 emotion-14"
+                viewBox="0 0 20 20"
               >
                 <path
                   clip-rule="evenodd"
-                  d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06"
+                  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>
@@ -14145,39 +14501,38 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
           </div>
         </div>
         <div
-          class="emotion-14 emotion-15 emotion-16"
+          class="emotion-15 emotion-16 emotion-17"
           data-animated="false"
           data-has-arrow="false"
-          id=":r9b:"
+          id=":r98:"
           role="dialog"
           style="opacity: 1;"
         >
           <div
-            class="emotion-17 emotion-5"
+            class="emotion-18 emotion-5"
           >
             <div
-              class="emotion-19 emotion-20 emotion-5"
+              class="emotion-20 emotion-21 emotion-5"
             >
               <div>
                 <div
-                  class="emotion-22 emotion-23"
+                  class="emotion-23 emotion-24"
                   data-disabled="false"
                   data-error="false"
                   data-readonly="false"
                   data-success="false"
                 >
                   <div
-                    class="emotion-24 emotion-25"
+                    class="emotion-25 emotion-26"
                     data-size="medium"
                   >
                     <svg
-                      class="emotion-12 emotion-13"
-                      viewBox="0 0 16 16"
-                      xmlns="http://www.w3.org/2000/svg"
+                      class="emotion-13 emotion-14"
+                      viewBox="0 0 20 20"
                     >
                       <path
                         clip-rule="evenodd"
-                        d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06zM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0"
+                        d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11M2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9"
                         fill-rule="evenodd"
                       />
                     </svg>
@@ -14185,10 +14540,10 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
                   <input
                     aria-invalid="false"
                     aria-label="search-bar"
-                    class="emotion-28 emotion-29"
+                    class="emotion-29 emotion-30"
                     data-size="medium"
                     data-testid="search-bar"
-                    id=":r9e:"
+                    id=":r9b:"
                     placeholder="placeholdersearch"
                     type="text"
                     value=""
@@ -14197,19 +14552,19 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
               </div>
             </div>
             <div
-              class="emotion-30 emotion-31"
+              class="emotion-31 emotion-32"
               data-grouped="true"
               id="select-dropdown"
               role="listbox"
             >
               <div
-                class="emotion-32 emotion-5"
+                class="emotion-33 emotion-5"
               >
                 <div
-                  class="emotion-34 emotion-35"
+                  class="emotion-35 emotion-36"
                 >
                   <button
-                    class="emotion-36 emotion-37"
+                    class="emotion-37 emotion-38"
                     data-selectgroup="false"
                     data-testid="group-0"
                     role="group"
@@ -14217,178 +14572,178 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
                     type="button"
                   >
                     <span
-                      class="emotion-38 emotion-9"
+                      class="emotion-39 emotion-10"
                     >
                       TERRESTRIAL PLANETS
                     </span>
                   </button>
                 </div>
                 <div
-                  class="emotion-32 emotion-5"
+                  class="emotion-33 emotion-5"
                   id="items"
                 >
-                  <button
+                  <div
                     aria-label="mercury"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-mercury"
                     id="option-0"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-mercury"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Mercury
                         </span>
                         <div
-                          class="emotion-50 emotion-51"
+                          class="emotion-52 emotion-53"
                         >
                           <span
-                            class="emotion-52 emotion-53 emotion-9"
+                            class="emotion-54 emotion-55 emotion-10"
                           >
                             Optional info
                           </span>
                         </div>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="venus"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-venus"
                     id="option-1"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-venus"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Venus
                         </span>
                         <div
-                          class="emotion-50 emotion-51"
+                          class="emotion-52 emotion-53"
                         >
                           <span
-                            class="emotion-52 emotion-53 emotion-9"
+                            class="emotion-54 emotion-55 emotion-10"
                           >
                             Optional info
                           </span>
                         </div>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="earth"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-earth"
                     id="option-2"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-earth"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Earth
                         </span>
                       </div>
                       <span
-                        class="emotion-76 emotion-9"
+                        class="emotion-80 emotion-10"
                       >
                         Our home planet
                       </span>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="mars"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-mars"
                     id="option-3"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-mars"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Mars
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="pluto"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-pluto"
                     id="option-4"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-pluto"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           <div
-                            class="emotion-94 emotion-9"
+                            class="emotion-100 emotion-10"
                           >
                             Pluto
                           </div>
                         </span>
                       </div>
                       <span
-                        class="emotion-76 emotion-9"
+                        class="emotion-80 emotion-10"
                       >
                         Pluto does not fit the usual classification of either terrestrial or Jovian planets, but is rocky
                       </span>
                     </div>
-                  </button>
+                  </div>
                 </div>
               </div>
               <div
-                class="emotion-32 emotion-5"
+                class="emotion-33 emotion-5"
               >
                 <div
-                  class="emotion-34 emotion-35"
+                  class="emotion-35 emotion-36"
                 >
                   <button
-                    class="emotion-36 emotion-37"
+                    class="emotion-37 emotion-38"
                     data-selectgroup="false"
                     data-testid="group-1"
                     role="group"
@@ -14396,135 +14751,135 @@ exports[`SelectInputV2 > renders correctly with label on the bottom and optional
                     type="button"
                   >
                     <span
-                      class="emotion-38 emotion-9"
+                      class="emotion-39 emotion-10"
                     >
                       JOVIAN PLANETS
                     </span>
                   </button>
                 </div>
                 <div
-                  class="emotion-32 emotion-5"
+                  class="emotion-33 emotion-5"
                   id="items"
                 >
-                  <button
+                  <div
                     aria-label="jupiter"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-jupiter"
                     id="option-0"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-jupiter"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Jupiter
                         </span>
                         <div
-                          class="emotion-50 emotion-51"
+                          class="emotion-52 emotion-53"
                         >
                           <span
-                            class="emotion-52 emotion-53 emotion-9"
+                            class="emotion-54 emotion-55 emotion-10"
                           >
                             Optional info
                           </span>
                         </div>
                       </div>
                       <span
-                        class="emotion-76 emotion-9"
+                        class="emotion-80 emotion-10"
                       >
                         Jupiter is the fifth planet from the Sun and the largest in the Solar System. It is a gas giant with a mass more than two and a half times that of all the other planets in the Solar System combined, and slightly less than one one-thousandth the mass of the Sun.
                       </span>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="saturn"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-saturn"
                     id="option-1"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-saturn"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Saturn
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="uranus"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-uranus"
                     id="option-2"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-uranus"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Uranus
                         </span>
                         <div
-                          class="emotion-50 emotion-51"
+                          class="emotion-52 emotion-53"
                         >
                           <span
-                            class="emotion-52 emotion-53 emotion-9"
+                            class="emotion-54 emotion-55 emotion-10"
                           >
                             Optional info
                           </span>
                         </div>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="neptune"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-neptune"
                     id="option-3"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
                       class="emotion-4 emotion-5"
                       data-testid="option-stack-neptune"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Neptune
                         </span>
                       </div>
                     </div>
-                  </button>
+                  </div>
                 </div>
               </div>
             </div>
@@ -14623,18 +14978,7 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   background: #ffffff;
   border-radius: 4px;
   width: 100%;
-}
-
-.emotion-6[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-  cursor: default;
-}
-
-.emotion-6[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-  cursor: not-allowed;
+  overflow: hidden;
 }
 
 .emotion-6[data-size='small'] {
@@ -14654,33 +14998,64 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   border: 1px solid #d9dadd;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  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 {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
 .emotion-6[data-state='success'] {
   border: 1px solid #22674e;
 }
 
+.emotion-6[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-6[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
 .emotion-6[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
+.emotion-6[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
+.emotion-6[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
 }
 
-.emotion-6:not([data-disabled='true']):hover,
-.emotion-6:not([data-disabled='true']):focus {
-  border-color: #792dd4;
-  outline: none;
+.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
 }
 
-.emotion-6[data-dropdownvisible='true'] {
-  border-color: #792dd4;
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
 }
 
-.emotion-8 {
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-9 {
   color: #727683;
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
@@ -14690,9 +15065,13 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   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-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -14720,7 +15099,7 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   display: flex;
 }
 
-.emotion-12 {
+.emotion-13 {
   vertical-align: middle;
   fill: #3f4250;
   height: 16px;
@@ -14729,12 +15108,12 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   min-height: 16px;
 }
 
-.emotion-12 .fillStroke {
+.emotion-13 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
 
-.emotion-15 {
+.emotion-16 {
   background: #151a2d;
   color: #ffffff;
   border-radius: 4px;
@@ -14758,14 +15137,15 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   color: #3f4250;
   box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
   padding: 0;
+  margin-bottom: 80px;
 }
 
-.emotion-15[data-animated="true"] {
+.emotion-16[data-animated="true"] {
   -webkit-animation: 0ms animation-0 forwards;
   animation: 0ms animation-0 forwards;
 }
 
-.emotion-15[data-has-arrow="true"]::after {
+.emotion-16[data-has-arrow="true"]::after {
   content: " ";
   position: absolute;
   top: -5px;
@@ -14781,11 +15161,11 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   pointer-events: none;
 }
 
-.emotion-15[data-visible-in-dom="false"] {
+.emotion-16[data-visible-in-dom="false"] {
   display: none;
 }
 
-.emotion-17 {
+.emotion-18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -14808,7 +15188,7 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   flex-wrap: nowrap;
 }
 
-.emotion-20 {
+.emotion-21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -14835,7 +15215,7 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   padding-right: 16px;
 }
 
-.emotion-22 {
+.emotion-23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -14849,69 +15229,69 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   border-radius: 4px;
 }
 
-.emotion-22>.emotion-29 {
+.emotion-23>.emotion-30 {
   color: #3f4250;
 }
 
-.emotion-22>.emotion-29::-webkit-input-placeholder {
+.emotion-23>.emotion-30::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-22>.emotion-29::-moz-placeholder {
+.emotion-23>.emotion-30::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-22>.emotion-29:-ms-input-placeholder {
+.emotion-23>.emotion-30:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-22>.emotion-29::placeholder {
+.emotion-23>.emotion-30::placeholder {
   color: #727683;
 }
 
-.emotion-22[data-success='true'] {
+.emotion-23[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-22[data-error='true'] {
+.emotion-23[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-22[data-readonly='true'] {
+.emotion-23[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-22[data-disabled='true'] {
+.emotion-23[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29 {
+.emotion-23[data-disabled='true']>.emotion-30 {
   color: #b5b7bd;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29::-webkit-input-placeholder {
+.emotion-23[data-disabled='true']>.emotion-30::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29::-moz-placeholder {
+.emotion-23[data-disabled='true']>.emotion-30::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29:-ms-input-placeholder {
+.emotion-23[data-disabled='true']>.emotion-30:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29::placeholder {
+.emotion-23[data-disabled='true']>.emotion-30::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-22:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-23:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-24 {
+.emotion-25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -14937,11 +15317,11 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   border-color: inherit;
 }
 
-.emotion-24[data-size="small"] {
+.emotion-25[data-size="small"] {
   padding: 8px;
 }
 
-.emotion-28 {
+.emotion-29 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -14954,15 +15334,15 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   font-size: 14px;
 }
 
-.emotion-28[data-size='large'] {
+.emotion-29[data-size='large'] {
   font-size: 16px;
 }
 
-.emotion-28[data-size='small'] {
+.emotion-29[data-size='small'] {
   padding-left: 8px;
 }
 
-.emotion-30 {
+.emotion-31 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -14990,11 +15370,11 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   padding-top: 4px;
 }
 
-.emotion-30[data-grouped="true"] {
+.emotion-31[data-grouped="true"] {
   padding-top: 0;
 }
 
-.emotion-32 {
+.emotion-33 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -15017,13 +15397,13 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   flex-wrap: nowrap;
 }
 
-.emotion-34 {
+.emotion-35 {
   position: -webkit-sticky;
   position: sticky;
   top: 0px;
 }
 
-.emotion-36 {
+.emotion-37 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -15049,21 +15429,22 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   margin-bottom: 2px;
 }
 
-.emotion-36:focus {
+.emotion-37:focus {
   background-color: #f9f9fa;
   outline: none;
 }
 
-.emotion-36[data-selectgroup='true'] {
+.emotion-37[data-selectgroup='true'] {
   padding-left: 16px;
   border-left: 4px solid #f9f9fa;
 }
 
-.emotion-36[data-selectgroup='true']:focus {
+.emotion-37[data-selectgroup='true']:focus {
   background-color: #e9eaeb;
 }
 
-.emotion-38 {
+.emotion-39 {
+  color: #3f4250;
   font-size: 12px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -15075,7 +15456,7 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   text-align: left;
 }
 
-.emotion-42 {
+.emotion-43 {
   text-align: left;
   border: none;
   background-color: #ffffff;
@@ -15086,32 +15467,32 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   border-radius: 4px;
 }
 
-.emotion-42:hover,
-.emotion-42:focus {
+.emotion-43:hover,
+.emotion-43:focus {
   background-color: #f1eefc;
   color: #641cb3;
   cursor: pointer;
   outline: none;
 }
 
-.emotion-42[data-selected='true'] {
+.emotion-43[data-selected='true'] {
   background-color: #f1eefc;
 }
 
-.emotion-42[disabled] {
+.emotion-43[disabled] {
   background-color: #f3f3f4;
   color: #b5b7bd;
 }
 
-.emotion-42[disabled]:hover,
-.emotion-42 [disabled]:focus {
+.emotion-43[disabled]:hover,
+.emotion-43 [disabled]:focus {
   background-color: #f3f3f4;
   color: #b5b7bd;
   cursor: not-allowed;
   outline: none;
 }
 
-.emotion-44 {
+.emotion-45 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -15133,7 +15514,7 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   flex-wrap: nowrap;
 }
 
-.emotion-46 {
+.emotion-47 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -15154,9 +15535,10 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
+  overflow: hidden;
 }
 
-.emotion-48 {
+.emotion-50 {
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -15166,15 +15548,25 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   -webkit-text-decoration: none;
   text-decoration: none;
   text-align: left;
+  overflow: auto;
+  text-overflow: ellipsis;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  max-width: 100%;
 }
 
-.emotion-50 {
+.emotion-52 {
   -webkit-align-content: center;
   -ms-flex-line-pack: center;
   align-content: center;
 }
 
-.emotion-53 {
+.emotion-55 {
   font-size: 12px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -15209,7 +15601,7 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   border: 1px solid #d9dadd;
 }
 
-.emotion-76 {
+.emotion-80 {
   color: #727683;
   font-size: 14px;
   font-family: Inter,Asap,sans-serif;
@@ -15222,7 +15614,7 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   text-align: left;
 }
 
-.emotion-94 {
+.emotion-100 {
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -15242,8 +15634,8 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
       class="emotion-0 emotion-1"
     >
       <div
-        aria-controls=":r65:"
-        aria-describedby=":r65:"
+        aria-controls=":r62:"
+        aria-describedby=":r62:"
         class="emotion-2 emotion-3"
         data-container-full-width="true"
         tabindex="0"
@@ -15261,27 +15653,26 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
             data-size="large"
             data-state="neutral"
             data-testid="select-input-test"
-            id=":r64:"
+            id=":r61:"
             role="combobox"
             tabindex="0"
           >
             <p
-              class="emotion-8 emotion-9"
+              class="emotion-8 emotion-9 emotion-10"
             >
               placeholder
             </p>
             <div
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
             >
               <svg
                 aria-label="show dropdown"
-                class="emotion-12 emotion-13"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
+                class="emotion-13 emotion-14"
+                viewBox="0 0 20 20"
               >
                 <path
                   clip-rule="evenodd"
-                  d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06"
+                  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>
@@ -15289,39 +15680,38 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
           </div>
         </div>
         <div
-          class="emotion-14 emotion-15 emotion-16"
+          class="emotion-15 emotion-16 emotion-17"
           data-animated="false"
           data-has-arrow="false"
-          id=":r65:"
+          id=":r62:"
           role="dialog"
           style="opacity: 1;"
         >
           <div
-            class="emotion-17 emotion-5"
+            class="emotion-18 emotion-5"
           >
             <div
-              class="emotion-19 emotion-20 emotion-5"
+              class="emotion-20 emotion-21 emotion-5"
             >
               <div>
                 <div
-                  class="emotion-22 emotion-23"
+                  class="emotion-23 emotion-24"
                   data-disabled="false"
                   data-error="false"
                   data-readonly="false"
                   data-success="false"
                 >
                   <div
-                    class="emotion-24 emotion-25"
+                    class="emotion-25 emotion-26"
                     data-size="medium"
                   >
                     <svg
-                      class="emotion-12 emotion-13"
-                      viewBox="0 0 16 16"
-                      xmlns="http://www.w3.org/2000/svg"
+                      class="emotion-13 emotion-14"
+                      viewBox="0 0 20 20"
                     >
                       <path
                         clip-rule="evenodd"
-                        d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06zM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0"
+                        d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11M2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9"
                         fill-rule="evenodd"
                       />
                     </svg>
@@ -15329,10 +15719,10 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
                   <input
                     aria-invalid="false"
                     aria-label="search-bar"
-                    class="emotion-28 emotion-29"
+                    class="emotion-29 emotion-30"
                     data-size="medium"
                     data-testid="search-bar"
-                    id=":r68:"
+                    id=":r65:"
                     placeholder="placeholdersearch"
                     type="text"
                     value=""
@@ -15341,19 +15731,19 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
               </div>
             </div>
             <div
-              class="emotion-30 emotion-31"
+              class="emotion-31 emotion-32"
               data-grouped="true"
               id="select-dropdown"
               role="listbox"
             >
               <div
-                class="emotion-32 emotion-5"
+                class="emotion-33 emotion-5"
               >
                 <div
-                  class="emotion-34 emotion-35"
+                  class="emotion-35 emotion-36"
                 >
                   <button
-                    class="emotion-36 emotion-37"
+                    class="emotion-37 emotion-38"
                     data-selectgroup="false"
                     data-testid="group-0"
                     role="group"
@@ -15361,178 +15751,178 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
                     type="button"
                   >
                     <span
-                      class="emotion-38 emotion-9"
+                      class="emotion-39 emotion-10"
                     >
                       TERRESTRIAL PLANETS
                     </span>
                   </button>
                 </div>
                 <div
-                  class="emotion-32 emotion-5"
+                  class="emotion-33 emotion-5"
                   id="items"
                 >
-                  <button
+                  <div
                     aria-label="mercury"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-mercury"
                     id="option-0"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
-                      class="emotion-44 emotion-5"
+                      class="emotion-45 emotion-5"
                       data-testid="option-stack-mercury"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Mercury
                         </span>
                       </div>
                       <div
-                        class="emotion-50 emotion-51"
+                        class="emotion-52 emotion-53"
                       >
                         <span
-                          class="emotion-52 emotion-53 emotion-9"
+                          class="emotion-54 emotion-55 emotion-10"
                         >
                           Optional info
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="venus"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-venus"
                     id="option-1"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
-                      class="emotion-44 emotion-5"
+                      class="emotion-45 emotion-5"
                       data-testid="option-stack-venus"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Venus
                         </span>
                       </div>
                       <div
-                        class="emotion-50 emotion-51"
+                        class="emotion-52 emotion-53"
                       >
                         <span
-                          class="emotion-52 emotion-53 emotion-9"
+                          class="emotion-54 emotion-55 emotion-10"
                         >
                           Optional info
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="earth"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-earth"
                     id="option-2"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
-                      class="emotion-44 emotion-5"
+                      class="emotion-45 emotion-5"
                       data-testid="option-stack-earth"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Earth
                         </span>
                         <span
-                          class="emotion-76 emotion-9"
+                          class="emotion-80 emotion-10"
                         >
                           Our home planet
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="mars"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-mars"
                     id="option-3"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
-                      class="emotion-44 emotion-5"
+                      class="emotion-45 emotion-5"
                       data-testid="option-stack-mars"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Mars
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="pluto"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-pluto"
                     id="option-4"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
-                      class="emotion-44 emotion-5"
+                      class="emotion-45 emotion-5"
                       data-testid="option-stack-pluto"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           <div
-                            class="emotion-94 emotion-9"
+                            class="emotion-100 emotion-10"
                           >
                             Pluto
                           </div>
                         </span>
                         <span
-                          class="emotion-76 emotion-9"
+                          class="emotion-80 emotion-10"
                         >
                           Pluto does not fit the usual classification of either terrestrial or Jovian planets, but is rocky
                         </span>
                       </div>
                     </div>
-                  </button>
+                  </div>
                 </div>
               </div>
               <div
-                class="emotion-32 emotion-5"
+                class="emotion-33 emotion-5"
               >
                 <div
-                  class="emotion-34 emotion-35"
+                  class="emotion-35 emotion-36"
                 >
                   <button
-                    class="emotion-36 emotion-37"
+                    class="emotion-37 emotion-38"
                     data-selectgroup="false"
                     data-testid="group-1"
                     role="group"
@@ -15540,135 +15930,135 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
                     type="button"
                   >
                     <span
-                      class="emotion-38 emotion-9"
+                      class="emotion-39 emotion-10"
                     >
                       JOVIAN PLANETS
                     </span>
                   </button>
                 </div>
                 <div
-                  class="emotion-32 emotion-5"
+                  class="emotion-33 emotion-5"
                   id="items"
                 >
-                  <button
+                  <div
                     aria-label="jupiter"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-jupiter"
                     id="option-0"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
-                      class="emotion-44 emotion-5"
+                      class="emotion-45 emotion-5"
                       data-testid="option-stack-jupiter"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Jupiter
                         </span>
                         <span
-                          class="emotion-76 emotion-9"
+                          class="emotion-80 emotion-10"
                         >
                           Jupiter is the fifth planet from the Sun and the largest in the Solar System. It is a gas giant with a mass more than two and a half times that of all the other planets in the Solar System combined, and slightly less than one one-thousandth the mass of the Sun.
                         </span>
                       </div>
                       <div
-                        class="emotion-50 emotion-51"
+                        class="emotion-52 emotion-53"
                       >
                         <span
-                          class="emotion-52 emotion-53 emotion-9"
+                          class="emotion-54 emotion-55 emotion-10"
                         >
                           Optional info
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="saturn"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-saturn"
                     id="option-1"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
-                      class="emotion-44 emotion-5"
+                      class="emotion-45 emotion-5"
                       data-testid="option-stack-saturn"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Saturn
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="uranus"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-uranus"
                     id="option-2"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
-                      class="emotion-44 emotion-5"
+                      class="emotion-45 emotion-5"
                       data-testid="option-stack-uranus"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Uranus
                         </span>
                       </div>
                       <div
-                        class="emotion-50 emotion-51"
+                        class="emotion-52 emotion-53"
                       >
                         <span
-                          class="emotion-52 emotion-53 emotion-9"
+                          class="emotion-54 emotion-55 emotion-10"
                         >
                           Optional info
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="neptune"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-neptune"
                     id="option-3"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
-                      class="emotion-44 emotion-5"
+                      class="emotion-45 emotion-5"
                       data-testid="option-stack-neptune"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Neptune
                         </span>
                       </div>
                     </div>
-                  </button>
+                  </div>
                 </div>
               </div>
             </div>
@@ -15767,18 +16157,7 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   background: #ffffff;
   border-radius: 4px;
   width: 100%;
-}
-
-.emotion-6[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-  cursor: default;
-}
-
-.emotion-6[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-  cursor: not-allowed;
+  overflow: hidden;
 }
 
 .emotion-6[data-size='small'] {
@@ -15798,33 +16177,64 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   border: 1px solid #d9dadd;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  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 {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
 .emotion-6[data-state='success'] {
   border: 1px solid #22674e;
 }
 
+.emotion-6[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-6[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
 .emotion-6[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
+.emotion-6[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
+.emotion-6[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
 }
 
-.emotion-6:not([data-disabled='true']):hover,
-.emotion-6:not([data-disabled='true']):focus {
-  border-color: #792dd4;
-  outline: none;
+.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
 }
 
-.emotion-6[data-dropdownvisible='true'] {
-  border-color: #792dd4;
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
 }
 
-.emotion-8 {
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-9 {
   color: #727683;
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
@@ -15834,9 +16244,13 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   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-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -15864,7 +16278,7 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   display: flex;
 }
 
-.emotion-12 {
+.emotion-13 {
   vertical-align: middle;
   fill: #3f4250;
   height: 16px;
@@ -15873,12 +16287,12 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   min-height: 16px;
 }
 
-.emotion-12 .fillStroke {
+.emotion-13 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
 
-.emotion-15 {
+.emotion-16 {
   background: #151a2d;
   color: #ffffff;
   border-radius: 4px;
@@ -15902,14 +16316,15 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   color: #3f4250;
   box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
   padding: 0;
+  margin-bottom: 80px;
 }
 
-.emotion-15[data-animated="true"] {
+.emotion-16[data-animated="true"] {
   -webkit-animation: 0ms animation-0 forwards;
   animation: 0ms animation-0 forwards;
 }
 
-.emotion-15[data-has-arrow="true"]::after {
+.emotion-16[data-has-arrow="true"]::after {
   content: " ";
   position: absolute;
   top: -5px;
@@ -15925,11 +16340,11 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   pointer-events: none;
 }
 
-.emotion-15[data-visible-in-dom="false"] {
+.emotion-16[data-visible-in-dom="false"] {
   display: none;
 }
 
-.emotion-17 {
+.emotion-18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -15952,7 +16367,7 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   flex-wrap: nowrap;
 }
 
-.emotion-20 {
+.emotion-21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -15979,7 +16394,7 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   padding-right: 16px;
 }
 
-.emotion-22 {
+.emotion-23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -15993,69 +16408,69 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   border-radius: 4px;
 }
 
-.emotion-22>.emotion-29 {
+.emotion-23>.emotion-30 {
   color: #3f4250;
 }
 
-.emotion-22>.emotion-29::-webkit-input-placeholder {
+.emotion-23>.emotion-30::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-22>.emotion-29::-moz-placeholder {
+.emotion-23>.emotion-30::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-22>.emotion-29:-ms-input-placeholder {
+.emotion-23>.emotion-30:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-22>.emotion-29::placeholder {
+.emotion-23>.emotion-30::placeholder {
   color: #727683;
 }
 
-.emotion-22[data-success='true'] {
+.emotion-23[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-22[data-error='true'] {
+.emotion-23[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-22[data-readonly='true'] {
+.emotion-23[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-22[data-disabled='true'] {
+.emotion-23[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29 {
+.emotion-23[data-disabled='true']>.emotion-30 {
   color: #b5b7bd;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29::-webkit-input-placeholder {
+.emotion-23[data-disabled='true']>.emotion-30::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29::-moz-placeholder {
+.emotion-23[data-disabled='true']>.emotion-30::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29:-ms-input-placeholder {
+.emotion-23[data-disabled='true']>.emotion-30:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-22[data-disabled='true']>.emotion-29::placeholder {
+.emotion-23[data-disabled='true']>.emotion-30::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-22:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-23:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-24 {
+.emotion-25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -16081,11 +16496,11 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   border-color: inherit;
 }
 
-.emotion-24[data-size="small"] {
+.emotion-25[data-size="small"] {
   padding: 8px;
 }
 
-.emotion-28 {
+.emotion-29 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -16098,15 +16513,15 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   font-size: 14px;
 }
 
-.emotion-28[data-size='large'] {
+.emotion-29[data-size='large'] {
   font-size: 16px;
 }
 
-.emotion-28[data-size='small'] {
+.emotion-29[data-size='small'] {
   padding-left: 8px;
 }
 
-.emotion-30 {
+.emotion-31 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -16134,11 +16549,11 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   padding-top: 4px;
 }
 
-.emotion-30[data-grouped="true"] {
+.emotion-31[data-grouped="true"] {
   padding-top: 0;
 }
 
-.emotion-32 {
+.emotion-33 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -16161,13 +16576,13 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   flex-wrap: nowrap;
 }
 
-.emotion-34 {
+.emotion-35 {
   position: -webkit-sticky;
   position: sticky;
   top: 0px;
 }
 
-.emotion-36 {
+.emotion-37 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -16193,21 +16608,22 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   margin-bottom: 2px;
 }
 
-.emotion-36:focus {
+.emotion-37:focus {
   background-color: #f9f9fa;
   outline: none;
 }
 
-.emotion-36[data-selectgroup='true'] {
+.emotion-37[data-selectgroup='true'] {
   padding-left: 16px;
   border-left: 4px solid #f9f9fa;
 }
 
-.emotion-36[data-selectgroup='true']:focus {
+.emotion-37[data-selectgroup='true']:focus {
   background-color: #e9eaeb;
 }
 
-.emotion-38 {
+.emotion-39 {
+  color: #3f4250;
   font-size: 12px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -16219,7 +16635,7 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   text-align: left;
 }
 
-.emotion-42 {
+.emotion-43 {
   text-align: left;
   border: none;
   background-color: #ffffff;
@@ -16230,32 +16646,32 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   border-radius: 4px;
 }
 
-.emotion-42:hover,
-.emotion-42:focus {
+.emotion-43:hover,
+.emotion-43:focus {
   background-color: #f1eefc;
   color: #641cb3;
   cursor: pointer;
   outline: none;
 }
 
-.emotion-42[data-selected='true'] {
+.emotion-43[data-selected='true'] {
   background-color: #f1eefc;
 }
 
-.emotion-42[disabled] {
+.emotion-43[disabled] {
   background-color: #f3f3f4;
   color: #b5b7bd;
 }
 
-.emotion-42[disabled]:hover,
-.emotion-42 [disabled]:focus {
+.emotion-43[disabled]:hover,
+.emotion-43 [disabled]:focus {
   background-color: #f3f3f4;
   color: #b5b7bd;
   cursor: not-allowed;
   outline: none;
 }
 
-.emotion-44 {
+.emotion-45 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -16277,7 +16693,7 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   flex-wrap: nowrap;
 }
 
-.emotion-46 {
+.emotion-47 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -16298,9 +16714,10 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
+  overflow: hidden;
 }
 
-.emotion-48 {
+.emotion-50 {
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -16310,15 +16727,25 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   -webkit-text-decoration: none;
   text-decoration: none;
   text-align: left;
+  overflow: auto;
+  text-overflow: ellipsis;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  max-width: 100%;
 }
 
-.emotion-50 {
+.emotion-52 {
   -webkit-align-content: center;
   -ms-flex-line-pack: center;
   align-content: center;
 }
 
-.emotion-53 {
+.emotion-55 {
   font-size: 12px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -16353,7 +16780,7 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   border: 1px solid #d9dadd;
 }
 
-.emotion-76 {
+.emotion-80 {
   color: #727683;
   font-size: 14px;
   font-family: Inter,Asap,sans-serif;
@@ -16366,7 +16793,7 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
   text-align: left;
 }
 
-.emotion-94 {
+.emotion-100 {
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -16386,8 +16813,8 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
       class="emotion-0 emotion-1"
     >
       <div
-        aria-controls=":r77:"
-        aria-describedby=":r77:"
+        aria-controls=":r74:"
+        aria-describedby=":r74:"
         class="emotion-2 emotion-3"
         data-container-full-width="true"
         tabindex="0"
@@ -16405,27 +16832,26 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
             data-size="large"
             data-state="neutral"
             data-testid="select-input-test"
-            id=":r76:"
+            id=":r73:"
             role="combobox"
             tabindex="0"
           >
             <p
-              class="emotion-8 emotion-9"
+              class="emotion-8 emotion-9 emotion-10"
             >
               placeholder
             </p>
             <div
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
             >
               <svg
                 aria-label="show dropdown"
-                class="emotion-12 emotion-13"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
+                class="emotion-13 emotion-14"
+                viewBox="0 0 20 20"
               >
                 <path
                   clip-rule="evenodd"
-                  d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06"
+                  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>
@@ -16433,39 +16859,38 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
           </div>
         </div>
         <div
-          class="emotion-14 emotion-15 emotion-16"
+          class="emotion-15 emotion-16 emotion-17"
           data-animated="false"
           data-has-arrow="false"
-          id=":r77:"
+          id=":r74:"
           role="dialog"
           style="opacity: 1;"
         >
           <div
-            class="emotion-17 emotion-5"
+            class="emotion-18 emotion-5"
           >
             <div
-              class="emotion-19 emotion-20 emotion-5"
+              class="emotion-20 emotion-21 emotion-5"
             >
               <div>
                 <div
-                  class="emotion-22 emotion-23"
+                  class="emotion-23 emotion-24"
                   data-disabled="false"
                   data-error="false"
                   data-readonly="false"
                   data-success="false"
                 >
                   <div
-                    class="emotion-24 emotion-25"
+                    class="emotion-25 emotion-26"
                     data-size="medium"
                   >
                     <svg
-                      class="emotion-12 emotion-13"
-                      viewBox="0 0 16 16"
-                      xmlns="http://www.w3.org/2000/svg"
+                      class="emotion-13 emotion-14"
+                      viewBox="0 0 20 20"
                     >
                       <path
                         clip-rule="evenodd"
-                        d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06zM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0"
+                        d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11M2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9"
                         fill-rule="evenodd"
                       />
                     </svg>
@@ -16473,10 +16898,10 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
                   <input
                     aria-invalid="false"
                     aria-label="search-bar"
-                    class="emotion-28 emotion-29"
+                    class="emotion-29 emotion-30"
                     data-size="medium"
                     data-testid="search-bar"
-                    id=":r7a:"
+                    id=":r77:"
                     placeholder="placeholdersearch"
                     type="text"
                     value=""
@@ -16485,19 +16910,19 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
               </div>
             </div>
             <div
-              class="emotion-30 emotion-31"
+              class="emotion-31 emotion-32"
               data-grouped="true"
               id="select-dropdown"
               role="listbox"
             >
               <div
-                class="emotion-32 emotion-5"
+                class="emotion-33 emotion-5"
               >
                 <div
-                  class="emotion-34 emotion-35"
+                  class="emotion-35 emotion-36"
                 >
                   <button
-                    class="emotion-36 emotion-37"
+                    class="emotion-37 emotion-38"
                     data-selectgroup="false"
                     data-testid="group-0"
                     role="group"
@@ -16505,178 +16930,178 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
                     type="button"
                   >
                     <span
-                      class="emotion-38 emotion-9"
+                      class="emotion-39 emotion-10"
                     >
                       TERRESTRIAL PLANETS
                     </span>
                   </button>
                 </div>
                 <div
-                  class="emotion-32 emotion-5"
+                  class="emotion-33 emotion-5"
                   id="items"
                 >
-                  <button
+                  <div
                     aria-label="mercury"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-mercury"
                     id="option-0"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
-                      class="emotion-44 emotion-5"
+                      class="emotion-45 emotion-5"
                       data-testid="option-stack-mercury"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Mercury
                         </span>
                       </div>
                       <div
-                        class="emotion-50 emotion-51"
+                        class="emotion-52 emotion-53"
                       >
                         <span
-                          class="emotion-52 emotion-53 emotion-9"
+                          class="emotion-54 emotion-55 emotion-10"
                         >
                           Optional info
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="venus"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-venus"
                     id="option-1"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
-                      class="emotion-44 emotion-5"
+                      class="emotion-45 emotion-5"
                       data-testid="option-stack-venus"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Venus
                         </span>
                       </div>
                       <div
-                        class="emotion-50 emotion-51"
+                        class="emotion-52 emotion-53"
                       >
                         <span
-                          class="emotion-52 emotion-53 emotion-9"
+                          class="emotion-54 emotion-55 emotion-10"
                         >
                           Optional info
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="earth"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-earth"
                     id="option-2"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
-                      class="emotion-44 emotion-5"
+                      class="emotion-45 emotion-5"
                       data-testid="option-stack-earth"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Earth
                         </span>
                         <span
-                          class="emotion-76 emotion-9"
+                          class="emotion-80 emotion-10"
                         >
                           Our home planet
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="mars"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-mars"
                     id="option-3"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
-                      class="emotion-44 emotion-5"
+                      class="emotion-45 emotion-5"
                       data-testid="option-stack-mars"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Mars
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="pluto"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-pluto"
                     id="option-4"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
-                      class="emotion-44 emotion-5"
+                      class="emotion-45 emotion-5"
                       data-testid="option-stack-pluto"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           <div
-                            class="emotion-94 emotion-9"
+                            class="emotion-100 emotion-10"
                           >
                             Pluto
                           </div>
                         </span>
                         <span
-                          class="emotion-76 emotion-9"
+                          class="emotion-80 emotion-10"
                         >
                           Pluto does not fit the usual classification of either terrestrial or Jovian planets, but is rocky
                         </span>
                       </div>
                     </div>
-                  </button>
+                  </div>
                 </div>
               </div>
               <div
-                class="emotion-32 emotion-5"
+                class="emotion-33 emotion-5"
               >
                 <div
-                  class="emotion-34 emotion-35"
+                  class="emotion-35 emotion-36"
                 >
                   <button
-                    class="emotion-36 emotion-37"
+                    class="emotion-37 emotion-38"
                     data-selectgroup="false"
                     data-testid="group-1"
                     role="group"
@@ -16684,135 +17109,135 @@ exports[`SelectInputV2 > renders correctly with label on the right and optional
                     type="button"
                   >
                     <span
-                      class="emotion-38 emotion-9"
+                      class="emotion-39 emotion-10"
                     >
                       JOVIAN PLANETS
                     </span>
                   </button>
                 </div>
                 <div
-                  class="emotion-32 emotion-5"
+                  class="emotion-33 emotion-5"
                   id="items"
                 >
-                  <button
+                  <div
                     aria-label="jupiter"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-jupiter"
                     id="option-0"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
-                      class="emotion-44 emotion-5"
+                      class="emotion-45 emotion-5"
                       data-testid="option-stack-jupiter"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Jupiter
                         </span>
                         <span
-                          class="emotion-76 emotion-9"
+                          class="emotion-80 emotion-10"
                         >
                           Jupiter is the fifth planet from the Sun and the largest in the Solar System. It is a gas giant with a mass more than two and a half times that of all the other planets in the Solar System combined, and slightly less than one one-thousandth the mass of the Sun.
                         </span>
                       </div>
                       <div
-                        class="emotion-50 emotion-51"
+                        class="emotion-52 emotion-53"
                       >
                         <span
-                          class="emotion-52 emotion-53 emotion-9"
+                          class="emotion-54 emotion-55 emotion-10"
                         >
                           Optional info
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="saturn"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-saturn"
                     id="option-1"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
-                      class="emotion-44 emotion-5"
+                      class="emotion-45 emotion-5"
                       data-testid="option-stack-saturn"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Saturn
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="uranus"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-uranus"
                     id="option-2"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
-                      class="emotion-44 emotion-5"
+                      class="emotion-45 emotion-5"
                       data-testid="option-stack-uranus"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Uranus
                         </span>
                       </div>
                       <div
-                        class="emotion-50 emotion-51"
+                        class="emotion-52 emotion-53"
                       >
                         <span
-                          class="emotion-52 emotion-53 emotion-9"
+                          class="emotion-54 emotion-55 emotion-10"
                         >
                           Optional info
                         </span>
                       </div>
                     </div>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     aria-label="neptune"
-                    class="emotion-42 emotion-43"
+                    class="emotion-43 emotion-44"
                     data-selected="false"
                     data-testid="option-neptune"
                     id="option-3"
                     role="option"
-                    type="button"
+                    tabindex="0"
                   >
                     <div
-                      class="emotion-44 emotion-5"
+                      class="emotion-45 emotion-5"
                       data-testid="option-stack-neptune"
                     >
                       <div
-                        class="emotion-46 emotion-5"
+                        class="emotion-47 emotion-48"
                       >
                         <span
-                          class="emotion-48 emotion-9"
+                          class="emotion-49 emotion-50 emotion-10"
                         >
                           Neptune
                         </span>
                       </div>
                     </div>
-                  </button>
+                  </div>
                 </div>
               </div>
             </div>
@@ -16911,18 +17336,7 @@ exports[`SelectInputV2 > renders correctly with not searchable 1`] = `
   background: #ffffff;
   border-radius: 4px;
   width: 100%;
-}
-
-.emotion-6[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-  cursor: default;
-}
-
-.emotion-6[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-  cursor: not-allowed;
+  overflow: hidden;
 }
 
 .emotion-6[data-size='small'] {
@@ -16942,33 +17356,64 @@ exports[`SelectInputV2 > renders correctly with not searchable 1`] = `
   border: 1px solid #d9dadd;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  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 {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
 .emotion-6[data-state='success'] {
   border: 1px solid #22674e;
 }
 
+.emotion-6[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-6[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
 .emotion-6[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
+.emotion-6[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
+.emotion-6[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
 }
 
-.emotion-6:not([data-disabled='true']):hover,
-.emotion-6:not([data-disabled='true']):focus {
-  border-color: #792dd4;
-  outline: none;
+.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
 }
 
-.emotion-6[data-dropdownvisible='true'] {
-  border-color: #792dd4;
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
 }
 
-.emotion-8 {
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-9 {
   color: #727683;
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
@@ -16978,9 +17423,13 @@ exports[`SelectInputV2 > renders correctly with not searchable 1`] = `
   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-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -17008,7 +17457,7 @@ exports[`SelectInputV2 > renders correctly with not searchable 1`] = `
   display: flex;
 }
 
-.emotion-12 {
+.emotion-13 {
   vertical-align: middle;
   fill: #3f4250;
   height: 16px;
@@ -17017,12 +17466,12 @@ exports[`SelectInputV2 > renders correctly with not searchable 1`] = `
   min-height: 16px;
 }
 
-.emotion-12 .fillStroke {
+.emotion-13 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
 
-.emotion-15 {
+.emotion-16 {
   background: #151a2d;
   color: #ffffff;
   border-radius: 4px;
@@ -17046,14 +17495,15 @@ exports[`SelectInputV2 > renders correctly with not searchable 1`] = `
   color: #3f4250;
   box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
   padding: 0;
+  margin-bottom: 80px;
 }
 
-.emotion-15[data-animated="true"] {
+.emotion-16[data-animated="true"] {
   -webkit-animation: 0ms animation-0 forwards;
   animation: 0ms animation-0 forwards;
 }
 
-.emotion-15[data-has-arrow="true"]::after {
+.emotion-16[data-has-arrow="true"]::after {
   content: " ";
   position: absolute;
   top: -5px;
@@ -17069,11 +17519,11 @@ exports[`SelectInputV2 > renders correctly with not searchable 1`] = `
   pointer-events: none;
 }
 
-.emotion-15[data-visible-in-dom="false"] {
+.emotion-16[data-visible-in-dom="false"] {
   display: none;
 }
 
-.emotion-17 {
+.emotion-18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -17096,7 +17546,7 @@ exports[`SelectInputV2 > renders correctly with not searchable 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-19 {
+.emotion-20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -17124,11 +17574,11 @@ exports[`SelectInputV2 > renders correctly with not searchable 1`] = `
   padding-top: 4px;
 }
 
-.emotion-19[data-grouped="true"] {
+.emotion-20[data-grouped="true"] {
   padding-top: 0;
 }
 
-.emotion-21 {
+.emotion-22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -17151,7 +17601,7 @@ exports[`SelectInputV2 > renders correctly with not searchable 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-23 {
+.emotion-24 {
   text-align: left;
   border: none;
   background-color: #ffffff;
@@ -17162,32 +17612,32 @@ exports[`SelectInputV2 > renders correctly with not searchable 1`] = `
   border-radius: 4px;
 }
 
-.emotion-23:hover,
-.emotion-23:focus {
+.emotion-24:hover,
+.emotion-24:focus {
   background-color: #f1eefc;
   color: #641cb3;
   cursor: pointer;
   outline: none;
 }
 
-.emotion-23[data-selected='true'] {
+.emotion-24[data-selected='true'] {
   background-color: #f1eefc;
 }
 
-.emotion-23[disabled] {
+.emotion-24[disabled] {
   background-color: #f3f3f4;
   color: #b5b7bd;
 }
 
-.emotion-23[disabled]:hover,
-.emotion-23 [disabled]:focus {
+.emotion-24[disabled]:hover,
+.emotion-24 [disabled]:focus {
   background-color: #f3f3f4;
   color: #b5b7bd;
   cursor: not-allowed;
   outline: none;
 }
 
-.emotion-27 {
+.emotion-28 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -17207,9 +17657,10 @@ exports[`SelectInputV2 > renders correctly with not searchable 1`] = `
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
+  overflow: hidden;
 }
 
-.emotion-29 {
+.emotion-31 {
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -17219,9 +17670,19 @@ exports[`SelectInputV2 > renders correctly with not searchable 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   text-align: left;
+  overflow: auto;
+  text-overflow: ellipsis;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  max-width: 100%;
 }
 
-.emotion-47 {
+.emotion-51 {
   color: #727683;
   font-size: 14px;
   font-family: Inter,Asap,sans-serif;
@@ -17234,7 +17695,7 @@ exports[`SelectInputV2 > renders correctly with not searchable 1`] = `
   text-align: left;
 }
 
-.emotion-93 {
+.emotion-102 {
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -17245,7 +17706,7 @@ exports[`SelectInputV2 > renders correctly with not searchable 1`] = `
   text-decoration: none;
 }
 
-.emotion-96 {
+.emotion-105 {
   font-size: 12px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -17288,8 +17749,8 @@ exports[`SelectInputV2 > renders correctly with not searchable 1`] = `
       class="emotion-0 emotion-1"
     >
       <div
-        aria-controls=":rdf:"
-        aria-describedby=":rdf:"
+        aria-controls=":rda:"
+        aria-describedby=":rda:"
         class="emotion-2 emotion-3"
         data-container-full-width="true"
         tabindex="0"
@@ -17307,27 +17768,26 @@ exports[`SelectInputV2 > renders correctly with not searchable 1`] = `
             data-size="large"
             data-state="neutral"
             data-testid="select-input-test"
-            id=":rde:"
+            id=":rd9:"
             role="combobox"
             tabindex="0"
           >
             <p
-              class="emotion-8 emotion-9"
+              class="emotion-8 emotion-9 emotion-10"
             >
               placeholder
             </p>
             <div
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
             >
               <svg
                 aria-label="show dropdown"
-                class="emotion-12 emotion-13"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
+                class="emotion-13 emotion-14"
+                viewBox="0 0 20 20"
               >
                 <path
                   clip-rule="evenodd"
-                  d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06"
+                  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>
@@ -17335,116 +17795,117 @@ exports[`SelectInputV2 > renders correctly with not searchable 1`] = `
           </div>
         </div>
         <div
-          class="emotion-14 emotion-15 emotion-16"
+          class="emotion-15 emotion-16 emotion-17"
           data-animated="false"
           data-has-arrow="false"
-          id=":rdf:"
+          id=":rda:"
           role="dialog"
           style="opacity: 1;"
         >
           <div
-            class="emotion-17 emotion-5"
+            class="emotion-18 emotion-5"
           >
             <div
-              class="emotion-19 emotion-20"
+              class="emotion-20 emotion-21"
               data-grouped="false"
               id="select-dropdown"
               role="listbox"
+              tabindex="-1"
             >
               <div
-                class="emotion-21 emotion-5"
+                class="emotion-22 emotion-5"
                 id="items"
               >
-                <button
+                <div
                   aria-label="mercury"
-                  class="emotion-23 emotion-24"
+                  class="emotion-24 emotion-25"
                   data-selected="false"
                   data-testid="option-mercury"
                   id="option-0"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-mercury"
                   >
                     <div
-                      class="emotion-27 emotion-5"
+                      class="emotion-28 emotion-29"
                     >
                       <span
-                        class="emotion-29 emotion-9"
+                        class="emotion-30 emotion-31 emotion-10"
                       >
                         Mercury
                       </span>
                     </div>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="venus"
-                  class="emotion-23 emotion-24"
+                  class="emotion-24 emotion-25"
                   data-selected="false"
                   data-testid="option-venus"
                   id="option-1"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-venus"
                   >
                     <div
-                      class="emotion-27 emotion-5"
+                      class="emotion-28 emotion-29"
                     >
                       <span
-                        class="emotion-29 emotion-9"
+                        class="emotion-30 emotion-31 emotion-10"
                       >
                         Venus
                       </span>
                     </div>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="earth"
-                  class="emotion-23 emotion-24"
+                  class="emotion-24 emotion-25"
                   data-selected="false"
                   data-testid="option-earth"
                   id="option-2"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-earth"
                   >
                     <div
-                      class="emotion-27 emotion-5"
+                      class="emotion-28 emotion-29"
                     >
                       <span
-                        class="emotion-29 emotion-9"
+                        class="emotion-30 emotion-31 emotion-10"
                       >
                         Earth
                       </span>
                     </div>
                     <span
-                      class="emotion-47 emotion-9"
+                      class="emotion-51 emotion-10"
                     >
                       Our home planet
                     </span>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="mars"
-                  class="emotion-23 emotion-24"
+                  class="emotion-24 emotion-25"
                   data-selected="false"
                   data-testid="option-mars"
                   disabled=""
                   id="option-3"
                   role="option"
-                  type="button"
+                  tabindex="-1"
                 >
                   <div
-                    aria-controls=":rdp:"
-                    aria-describedby=":rdp:"
+                    aria-controls=":rdk:"
+                    aria-describedby=":rdk:"
                     class="emotion-2 emotion-3"
                     tabindex="0"
                   >
@@ -17453,119 +17914,119 @@ exports[`SelectInputV2 > renders correctly with not searchable 1`] = `
                       data-testid="option-stack-mars"
                     >
                       <div
-                        class="emotion-27 emotion-5"
+                        class="emotion-28 emotion-29"
                       >
                         <span
-                          class="emotion-29 emotion-9"
+                          class="emotion-30 emotion-31 emotion-10"
                         >
                           Mars
                         </span>
                       </div>
                     </div>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="jupiter"
-                  class="emotion-23 emotion-24"
+                  class="emotion-24 emotion-25"
                   data-selected="false"
                   data-testid="option-jupiter"
                   id="option-4"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-jupiter"
                   >
                     <div
-                      class="emotion-27 emotion-5"
+                      class="emotion-28 emotion-29"
                     >
                       <span
-                        class="emotion-29 emotion-9"
+                        class="emotion-30 emotion-31 emotion-10"
                       >
                         Jupiter
                       </span>
                     </div>
                     <span
-                      class="emotion-47 emotion-9"
+                      class="emotion-51 emotion-10"
                     >
                       Jupiter is the fifth planet from the Sun and the largest in the Solar System. It is a gas giant with a mass more than two and a half times that of all the other planets in the Solar System combined, and slightly less than one one-thousandth the mass of the Sun.
                     </span>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="saturn"
-                  class="emotion-23 emotion-24"
+                  class="emotion-24 emotion-25"
                   data-selected="false"
                   data-testid="option-saturn"
                   id="option-5"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-saturn"
                   >
                     <div
-                      class="emotion-27 emotion-5"
+                      class="emotion-28 emotion-29"
                     >
                       <span
-                        class="emotion-29 emotion-9"
+                        class="emotion-30 emotion-31 emotion-10"
                       >
                         Saturn
                       </span>
                     </div>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="uranus"
-                  class="emotion-23 emotion-24"
+                  class="emotion-24 emotion-25"
                   data-selected="false"
                   data-testid="option-uranus"
                   id="option-6"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-uranus"
                   >
                     <div
-                      class="emotion-27 emotion-5"
+                      class="emotion-28 emotion-29"
                     >
                       <span
-                        class="emotion-29 emotion-9"
+                        class="emotion-30 emotion-31 emotion-10"
                       >
                         Uranus
                       </span>
                     </div>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="neptune"
-                  class="emotion-23 emotion-24"
+                  class="emotion-24 emotion-25"
                   data-selected="false"
                   data-testid="option-neptune"
                   id="option-7"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-neptune"
                   >
                     <div
-                      class="emotion-27 emotion-5"
+                      class="emotion-28 emotion-29"
                     >
                       <span
-                        class="emotion-29 emotion-9"
+                        class="emotion-30 emotion-31 emotion-10"
                       >
                         <div
-                          class="emotion-93 emotion-9"
+                          class="emotion-102 emotion-10"
                         >
                           Neptune 
                           <span
-                            class="emotion-95 emotion-96 emotion-9"
+                            class="emotion-104 emotion-105 emotion-10"
                           >
                             Label
                           </span>
@@ -17573,7 +18034,7 @@ exports[`SelectInputV2 > renders correctly with not searchable 1`] = `
                       </span>
                     </div>
                   </div>
-                </button>
+                </div>
               </div>
             </div>
           </div>
@@ -17671,18 +18132,7 @@ exports[`SelectInputV2 > renders correctly with success 1`] = `
   background: #ffffff;
   border-radius: 4px;
   width: 100%;
-}
-
-.emotion-6[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-  cursor: default;
-}
-
-.emotion-6[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-  cursor: not-allowed;
+  overflow: hidden;
 }
 
 .emotion-6[data-size='small'] {
@@ -17702,33 +18152,64 @@ exports[`SelectInputV2 > renders correctly with success 1`] = `
   border: 1px solid #d9dadd;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  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 {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
 .emotion-6[data-state='success'] {
   border: 1px solid #22674e;
 }
 
+.emotion-6[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-6[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
 .emotion-6[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
+.emotion-6[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-6:not([data-disabled='true']):not([data-readonly]):active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
+.emotion-6[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
 }
 
-.emotion-6:not([data-disabled='true']):hover,
-.emotion-6:not([data-disabled='true']):focus {
-  border-color: #792dd4;
-  outline: none;
+.emotion-6:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
 }
 
-.emotion-6[data-dropdownvisible='true'] {
-  border-color: #792dd4;
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
 }
 
-.emotion-8 {
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-9 {
   color: #727683;
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
@@ -17738,9 +18219,13 @@ exports[`SelectInputV2 > renders correctly with success 1`] = `
   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-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -17768,7 +18253,7 @@ exports[`SelectInputV2 > renders correctly with success 1`] = `
   display: flex;
 }
 
-.emotion-12 {
+.emotion-13 {
   vertical-align: middle;
   fill: #22674e;
   height: 1em;
@@ -17777,12 +18262,12 @@ exports[`SelectInputV2 > renders correctly with success 1`] = `
   min-height: 1em;
 }
 
-.emotion-12 .fillStroke {
+.emotion-13 .fillStroke {
   stroke: #22674e;
   fill: none;
 }
 
-.emotion-14 {
+.emotion-15 {
   vertical-align: middle;
   fill: #3f4250;
   height: 16px;
@@ -17791,12 +18276,12 @@ exports[`SelectInputV2 > renders correctly with success 1`] = `
   min-height: 16px;
 }
 
-.emotion-14 .fillStroke {
+.emotion-15 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
 
-.emotion-17 {
+.emotion-18 {
   background: #151a2d;
   color: #ffffff;
   border-radius: 4px;
@@ -17820,14 +18305,15 @@ exports[`SelectInputV2 > renders correctly with success 1`] = `
   color: #3f4250;
   box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
   padding: 0;
+  margin-bottom: 80px;
 }
 
-.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;
@@ -17843,11 +18329,11 @@ exports[`SelectInputV2 > renders correctly with success 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;
@@ -17870,7 +18356,7 @@ exports[`SelectInputV2 > renders correctly with success 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-22 {
+.emotion-23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -17897,7 +18383,7 @@ exports[`SelectInputV2 > renders correctly with success 1`] = `
   padding-right: 16px;
 }
 
-.emotion-24 {
+.emotion-25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -17911,69 +18397,69 @@ exports[`SelectInputV2 > renders correctly with success 1`] = `
   border-radius: 4px;
 }
 
-.emotion-24>.emotion-31 {
+.emotion-25>.emotion-32 {
   color: #3f4250;
 }
 
-.emotion-24>.emotion-31::-webkit-input-placeholder {
+.emotion-25>.emotion-32::-webkit-input-placeholder {
   color: #727683;
 }
 
-.emotion-24>.emotion-31::-moz-placeholder {
+.emotion-25>.emotion-32::-moz-placeholder {
   color: #727683;
 }
 
-.emotion-24>.emotion-31:-ms-input-placeholder {
+.emotion-25>.emotion-32:-ms-input-placeholder {
   color: #727683;
 }
 
-.emotion-24>.emotion-31::placeholder {
+.emotion-25>.emotion-32::placeholder {
   color: #727683;
 }
 
-.emotion-24[data-success='true'] {
+.emotion-25[data-success='true'] {
   border-color: #22674e;
 }
 
-.emotion-24[data-error='true'] {
+.emotion-25[data-error='true'] {
   border-color: #b3144d;
 }
 
-.emotion-24[data-readonly='true'] {
+.emotion-25[data-readonly='true'] {
   background: #f9f9fa;
   border-color: #d9dadd;
 }
 
-.emotion-24[data-disabled='true'] {
+.emotion-25[data-disabled='true'] {
   background: #f3f3f4;
   border-color: #e9eaeb;
 }
 
-.emotion-24[data-disabled='true']>.emotion-31 {
+.emotion-25[data-disabled='true']>.emotion-32 {
   color: #b5b7bd;
 }
 
-.emotion-24[data-disabled='true']>.emotion-31::-webkit-input-placeholder {
+.emotion-25[data-disabled='true']>.emotion-32::-webkit-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-24[data-disabled='true']>.emotion-31::-moz-placeholder {
+.emotion-25[data-disabled='true']>.emotion-32::-moz-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-24[data-disabled='true']>.emotion-31:-ms-input-placeholder {
+.emotion-25[data-disabled='true']>.emotion-32:-ms-input-placeholder {
   color: #b5b7bd;
 }
 
-.emotion-24[data-disabled='true']>.emotion-31::placeholder {
+.emotion-25[data-disabled='true']>.emotion-32::placeholder {
   color: #b5b7bd;
 }
 
-.emotion-24:not([data-disabled='true']):not([data-readonly]):hover {
+.emotion-25:not([data-disabled='true']):not([data-readonly]):hover {
   border-color: #8c40ef;
 }
 
-.emotion-26 {
+.emotion-27 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -17999,11 +18485,11 @@ exports[`SelectInputV2 > renders correctly with success 1`] = `
   border-color: inherit;
 }
 
-.emotion-26[data-size="small"] {
+.emotion-27[data-size="small"] {
   padding: 8px;
 }
 
-.emotion-30 {
+.emotion-31 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -18016,15 +18502,15 @@ exports[`SelectInputV2 > renders correctly with success 1`] = `
   font-size: 14px;
 }
 
-.emotion-30[data-size='large'] {
+.emotion-31[data-size='large'] {
   font-size: 16px;
 }
 
-.emotion-30[data-size='small'] {
+.emotion-31[data-size='small'] {
   padding-left: 8px;
 }
 
-.emotion-32 {
+.emotion-33 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -18052,11 +18538,11 @@ exports[`SelectInputV2 > renders correctly with success 1`] = `
   padding-top: 4px;
 }
 
-.emotion-32[data-grouped="true"] {
+.emotion-33[data-grouped="true"] {
   padding-top: 0;
 }
 
-.emotion-34 {
+.emotion-35 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -18079,7 +18565,7 @@ exports[`SelectInputV2 > renders correctly with success 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-36 {
+.emotion-37 {
   text-align: left;
   border: none;
   background-color: #ffffff;
@@ -18090,32 +18576,32 @@ exports[`SelectInputV2 > renders correctly with success 1`] = `
   border-radius: 4px;
 }
 
-.emotion-36:hover,
-.emotion-36:focus {
+.emotion-37:hover,
+.emotion-37:focus {
   background-color: #f1eefc;
   color: #641cb3;
   cursor: pointer;
   outline: none;
 }
 
-.emotion-36[data-selected='true'] {
+.emotion-37[data-selected='true'] {
   background-color: #f1eefc;
 }
 
-.emotion-36[disabled] {
+.emotion-37[disabled] {
   background-color: #f3f3f4;
   color: #b5b7bd;
 }
 
-.emotion-36[disabled]:hover,
-.emotion-36 [disabled]:focus {
+.emotion-37[disabled]:hover,
+.emotion-37 [disabled]:focus {
   background-color: #f3f3f4;
   color: #b5b7bd;
   cursor: not-allowed;
   outline: none;
 }
 
-.emotion-40 {
+.emotion-41 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -18135,9 +18621,10 @@ exports[`SelectInputV2 > renders correctly with success 1`] = `
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
+  overflow: hidden;
 }
 
-.emotion-42 {
+.emotion-44 {
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -18147,9 +18634,19 @@ exports[`SelectInputV2 > renders correctly with success 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   text-align: left;
+  overflow: auto;
+  text-overflow: ellipsis;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  max-width: 100%;
 }
 
-.emotion-60 {
+.emotion-64 {
   color: #727683;
   font-size: 14px;
   font-family: Inter,Asap,sans-serif;
@@ -18162,7 +18659,7 @@ exports[`SelectInputV2 > renders correctly with success 1`] = `
   text-align: left;
 }
 
-.emotion-106 {
+.emotion-115 {
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -18173,7 +18670,7 @@ exports[`SelectInputV2 > renders correctly with success 1`] = `
   text-decoration: none;
 }
 
-.emotion-109 {
+.emotion-118 {
   font-size: 12px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 400;
@@ -18208,7 +18705,7 @@ exports[`SelectInputV2 > renders correctly with success 1`] = `
   border: 1px solid #d9dadd;
 }
 
-.emotion-112 {
+.emotion-121 {
   color: #22674e;
   font-size: 12px;
   font-family: Inter,Asap,sans-serif;
@@ -18229,8 +18726,8 @@ exports[`SelectInputV2 > renders correctly with success 1`] = `
       class="emotion-0 emotion-1"
     >
       <div
-        aria-controls=":rck:"
-        aria-describedby=":rck:"
+        aria-controls=":rcf:"
+        aria-describedby=":rcf:"
         class="emotion-2 emotion-3"
         data-container-full-width="true"
         tabindex="0"
@@ -18248,22 +18745,21 @@ exports[`SelectInputV2 > renders correctly with success 1`] = `
             data-size="large"
             data-state="success"
             data-testid="select-input-test"
-            id=":rcj:"
+            id=":rce:"
             role="combobox"
             tabindex="0"
           >
             <p
-              class="emotion-8 emotion-9"
+              class="emotion-8 emotion-9 emotion-10"
             >
               placeholder
             </p>
             <div
-              class="emotion-10 emotion-11"
+              class="emotion-11 emotion-12"
             >
               <svg
-                class="emotion-12 emotion-13"
+                class="emotion-13 emotion-14"
                 viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
               >
                 <path
                   clip-rule="evenodd"
@@ -18273,13 +18769,12 @@ exports[`SelectInputV2 > renders correctly with success 1`] = `
               </svg>
               <svg
                 aria-label="show dropdown"
-                class="emotion-14 emotion-13"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
+                class="emotion-15 emotion-14"
+                viewBox="0 0 20 20"
               >
                 <path
                   clip-rule="evenodd"
-                  d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06"
+                  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>
@@ -18287,39 +18782,38 @@ exports[`SelectInputV2 > renders correctly with success 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=":rck:"
+          id=":rcf:"
           role="dialog"
           style="opacity: 1;"
         >
           <div
-            class="emotion-19 emotion-5"
+            class="emotion-20 emotion-5"
           >
             <div
-              class="emotion-21 emotion-22 emotion-5"
+              class="emotion-22 emotion-23 emotion-5"
             >
               <div>
                 <div
-                  class="emotion-24 emotion-25"
+                  class="emotion-25 emotion-26"
                   data-disabled="false"
                   data-error="false"
                   data-readonly="false"
                   data-success="false"
                 >
                   <div
-                    class="emotion-26 emotion-27"
+                    class="emotion-27 emotion-28"
                     data-size="medium"
                   >
                     <svg
-                      class="emotion-14 emotion-13"
-                      viewBox="0 0 16 16"
-                      xmlns="http://www.w3.org/2000/svg"
+                      class="emotion-15 emotion-14"
+                      viewBox="0 0 20 20"
                     >
                       <path
                         clip-rule="evenodd"
-                        d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06zM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0"
+                        d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11M2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9"
                         fill-rule="evenodd"
                       />
                     </svg>
@@ -18327,10 +18821,10 @@ exports[`SelectInputV2 > renders correctly with success 1`] = `
                   <input
                     aria-invalid="false"
                     aria-label="search-bar"
-                    class="emotion-30 emotion-31"
+                    class="emotion-31 emotion-32"
                     data-size="medium"
                     data-testid="search-bar"
-                    id=":rco:"
+                    id=":rcj:"
                     placeholder="placeholdersearch"
                     type="text"
                     value=""
@@ -18339,105 +18833,106 @@ exports[`SelectInputV2 > renders correctly with success 1`] = `
               </div>
             </div>
             <div
-              class="emotion-32 emotion-33"
+              class="emotion-33 emotion-34"
               data-grouped="false"
               id="select-dropdown"
               role="listbox"
+              tabindex="-1"
             >
               <div
-                class="emotion-34 emotion-5"
+                class="emotion-35 emotion-5"
                 id="items"
               >
-                <button
+                <div
                   aria-label="mercury"
-                  class="emotion-36 emotion-37"
+                  class="emotion-37 emotion-38"
                   data-selected="false"
                   data-testid="option-mercury"
                   id="option-0"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-mercury"
                   >
                     <div
-                      class="emotion-40 emotion-5"
+                      class="emotion-41 emotion-42"
                     >
                       <span
-                        class="emotion-42 emotion-9"
+                        class="emotion-43 emotion-44 emotion-10"
                       >
                         Mercury
                       </span>
                     </div>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="venus"
-                  class="emotion-36 emotion-37"
+                  class="emotion-37 emotion-38"
                   data-selected="false"
                   data-testid="option-venus"
                   id="option-1"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-venus"
                   >
                     <div
-                      class="emotion-40 emotion-5"
+                      class="emotion-41 emotion-42"
                     >
                       <span
-                        class="emotion-42 emotion-9"
+                        class="emotion-43 emotion-44 emotion-10"
                       >
                         Venus
                       </span>
                     </div>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="earth"
-                  class="emotion-36 emotion-37"
+                  class="emotion-37 emotion-38"
                   data-selected="false"
                   data-testid="option-earth"
                   id="option-2"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-earth"
                   >
                     <div
-                      class="emotion-40 emotion-5"
+                      class="emotion-41 emotion-42"
                     >
                       <span
-                        class="emotion-42 emotion-9"
+                        class="emotion-43 emotion-44 emotion-10"
                       >
                         Earth
                       </span>
                     </div>
                     <span
-                      class="emotion-60 emotion-9"
+                      class="emotion-64 emotion-10"
                     >
                       Our home planet
                     </span>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="mars"
-                  class="emotion-36 emotion-37"
+                  class="emotion-37 emotion-38"
                   data-selected="false"
                   data-testid="option-mars"
                   disabled=""
                   id="option-3"
                   role="option"
-                  type="button"
+                  tabindex="-1"
                 >
                   <div
-                    aria-controls=":rd1:"
-                    aria-describedby=":rd1:"
+                    aria-controls=":rcs:"
+                    aria-describedby=":rcs:"
                     class="emotion-2 emotion-3"
                     tabindex="0"
                   >
@@ -18446,119 +18941,119 @@ exports[`SelectInputV2 > renders correctly with success 1`] = `
                       data-testid="option-stack-mars"
                     >
                       <div
-                        class="emotion-40 emotion-5"
+                        class="emotion-41 emotion-42"
                       >
                         <span
-                          class="emotion-42 emotion-9"
+                          class="emotion-43 emotion-44 emotion-10"
                         >
                           Mars
                         </span>
                       </div>
                     </div>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="jupiter"
-                  class="emotion-36 emotion-37"
+                  class="emotion-37 emotion-38"
                   data-selected="false"
                   data-testid="option-jupiter"
                   id="option-4"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-jupiter"
                   >
                     <div
-                      class="emotion-40 emotion-5"
+                      class="emotion-41 emotion-42"
                     >
                       <span
-                        class="emotion-42 emotion-9"
+                        class="emotion-43 emotion-44 emotion-10"
                       >
                         Jupiter
                       </span>
                     </div>
                     <span
-                      class="emotion-60 emotion-9"
+                      class="emotion-64 emotion-10"
                     >
                       Jupiter is the fifth planet from the Sun and the largest in the Solar System. It is a gas giant with a mass more than two and a half times that of all the other planets in the Solar System combined, and slightly less than one one-thousandth the mass of the Sun.
                     </span>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="saturn"
-                  class="emotion-36 emotion-37"
+                  class="emotion-37 emotion-38"
                   data-selected="false"
                   data-testid="option-saturn"
                   id="option-5"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-saturn"
                   >
                     <div
-                      class="emotion-40 emotion-5"
+                      class="emotion-41 emotion-42"
                     >
                       <span
-                        class="emotion-42 emotion-9"
+                        class="emotion-43 emotion-44 emotion-10"
                       >
                         Saturn
                       </span>
                     </div>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="uranus"
-                  class="emotion-36 emotion-37"
+                  class="emotion-37 emotion-38"
                   data-selected="false"
                   data-testid="option-uranus"
                   id="option-6"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-uranus"
                   >
                     <div
-                      class="emotion-40 emotion-5"
+                      class="emotion-41 emotion-42"
                     >
                       <span
-                        class="emotion-42 emotion-9"
+                        class="emotion-43 emotion-44 emotion-10"
                       >
                         Uranus
                       </span>
                     </div>
                   </div>
-                </button>
-                <button
+                </div>
+                <div
                   aria-label="neptune"
-                  class="emotion-36 emotion-37"
+                  class="emotion-37 emotion-38"
                   data-selected="false"
                   data-testid="option-neptune"
                   id="option-7"
                   role="option"
-                  type="button"
+                  tabindex="0"
                 >
                   <div
                     class="emotion-4 emotion-5"
                     data-testid="option-stack-neptune"
                   >
                     <div
-                      class="emotion-40 emotion-5"
+                      class="emotion-41 emotion-42"
                     >
                       <span
-                        class="emotion-42 emotion-9"
+                        class="emotion-43 emotion-44 emotion-10"
                       >
                         <div
-                          class="emotion-106 emotion-9"
+                          class="emotion-115 emotion-10"
                         >
                           Neptune 
                           <span
-                            class="emotion-108 emotion-109 emotion-9"
+                            class="emotion-117 emotion-118 emotion-10"
                           >
                             Label
                           </span>
@@ -18566,14 +19061,14 @@ exports[`SelectInputV2 > renders correctly with success 1`] = `
                       </span>
                     </div>
                   </div>
-                </button>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
       <p
-        class="emotion-111 emotion-112 emotion-9"
+        class="emotion-120 emotion-121 emotion-10"
       >
         success
       </p>
@@ -18643,7 +19138,7 @@ exports[`SelectInputV2 > renders correctly with tooltip 1`] = `
 }
 
 .emotion-8 {
-  color: #3f4250;
+  color: #222638;
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
   font-weight: 500;
@@ -18686,18 +19181,7 @@ exports[`SelectInputV2 > renders correctly with tooltip 1`] = `
   background: #ffffff;
   border-radius: 4px;
   width: 100%;
-}
-
-.emotion-12[data-readonly='true'] {
-  background: #f9f9fa;
-  border-color: #d9dadd;
-  cursor: default;
-}
-
-.emotion-12[data-disabled='true'] {
-  background: #f3f3f4;
-  border-color: #e9eaeb;
-  cursor: not-allowed;
+  overflow: hidden;
 }
 
 .emotion-12[data-size='small'] {
@@ -18717,33 +19201,64 @@ exports[`SelectInputV2 > renders correctly with tooltip 1`] = `
   border: 1px solid #d9dadd;
 }
 
+.emotion-12[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-12[data-state='neutral']:not([data-disabled='true']):hover,
+.emotion-12[data-state='neutral']:not([data-disabled='true']):focus {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-12[data-state='neutral'][data-dropdownvisible='true'] {
+  border-color: #792dd4;
+}
+
 .emotion-12[data-state='success'] {
   border: 1px solid #22674e;
 }
 
+.emotion-12[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #1b533f;
+  box-shadow: 0px 0px 0px 3px #45d19f40;
+}
+
+.emotion-12[data-state='success'][data-dropdownvisible='true'] {
+  border-color: #1b533f;
+}
+
 .emotion-12[data-state='danger'] {
   border: 1px solid #b3144d;
 }
 
-.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
-  border-color: #8c40ef;
+.emotion-12[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
 }
 
-.emotion-12:not([data-disabled='true']):not([data-readonly]):active {
-  box-shadow: 0px 0px 0px 3px #8c40ef40;
+.emotion-12[data-state='danger'][data-dropdownvisible='true'] {
+  border-color: #92103f;
 }
 
-.emotion-12:not([data-disabled='true']):hover,
-.emotion-12:not([data-disabled='true']):focus {
-  border-color: #792dd4;
-  outline: none;
+.emotion-12:not([data-disabled='true']):not([data-readonly]):hover {
+  border-color: #8c40ef;
 }
 
-.emotion-12[data-dropdownvisible='true'] {
-  border-color: #792dd4;
+.emotion-12[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
 }
 
-.emotion-14 {
+.emotion-12[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+}
+
+.emotion-15 {
   color: #727683;
   font-size: 16px;
   font-family: Inter,Asap,sans-serif;
@@ -18753,9 +19268,13 @@ exports[`SelectInputV2 > renders correctly with tooltip 1`] = `
   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-16 {
+.emotion-17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -18783,7 +19302,7 @@ exports[`SelectInputV2 > renders correctly with tooltip 1`] = `
   display: flex;
 }
 
-.emotion-18 {
+.emotion-19 {
   vertical-align: middle;
   fill: #3f4250;
   height: 16px;
@@ -18792,7 +19311,7 @@ exports[`SelectInputV2 > renders correctly with tooltip 1`] = `
   min-height: 16px;
 }
 
-.emotion-18 .fillStroke {
+.emotion-19 .fillStroke {
   stroke: #3f4250;
   fill: none;
 }
@@ -18845,22 +19364,21 @@ exports[`SelectInputV2 > renders correctly with tooltip 1`] = `
               tabindex="0"
             >
               <p
-                class="emotion-14 emotion-9"
+                class="emotion-14 emotion-15 emotion-9"
               >
                 Select item
               </p>
               <div
-                class="emotion-16 emotion-17"
+                class="emotion-17 emotion-18"
               >
                 <svg
                   aria-label="show dropdown"
-                  class="emotion-18 emotion-19"
-                  viewBox="0 0 16 16"
-                  xmlns="http://www.w3.org/2000/svg"
+                  class="emotion-19 emotion-20"
+                  viewBox="0 0 20 20"
                 >
                   <path
                     clip-rule="evenodd"
-                    d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06"
+                    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>
diff --git a/packages/ui/src/components/SelectInputV2/__tests__/index.test.tsx b/packages/ui/src/components/SelectInputV2/__tests__/index.test.tsx
index fdf6ea809b..052eb5f806 100644
--- a/packages/ui/src/components/SelectInputV2/__tests__/index.test.tsx
+++ b/packages/ui/src/components/SelectInputV2/__tests__/index.test.tsx
@@ -504,6 +504,7 @@ describe('SelectInputV2', () => {
         placeholder="placeholder"
         placeholderSearch="placeholdersearch"
         searchable={false}
+        clearable
         value={dataUnGrouped[4].value}
       />,
     )
@@ -1234,4 +1235,43 @@ describe('SelectInputV2', () => {
     await userEvent.click(input)
     expect(asFragment()).toMatchSnapshot()
   })
+
+  test.skip('renders correctly with function footer', async () => {
+    const f = vi.fn(() => {})
+
+    const { asFragment } = renderWithTheme(
+      <SelectInputV2
+        name="test"
+        options={dataGrouped}
+        placeholder="placeholder"
+        placeholderSearch="placeholdersearch"
+        value={dataGrouped['terrestrial planets'][4].value}
+        footer={closeDropdown => (
+          <button
+            onClick={() => {
+              f()
+              closeDropdown()
+            }}
+            type="button"
+            data-testid="buttonclose"
+          >
+            click
+          </button>
+        )}
+      />,
+    )
+    const input = screen.getByText('Pluto')
+    await userEvent.click(input)
+
+    const footer = screen.getByTestId('buttonclose')
+    const dropdown = screen.getByRole('dialog')
+    expect(dropdown).toBeVisible()
+
+    await userEvent.click(footer)
+
+    expect(f).toHaveBeenCalledOnce()
+    setTimeout(() => expect(dropdown).not.toBeVisible(), 500)
+
+    expect(asFragment()).toMatchSnapshot()
+  })
 })
diff --git a/packages/ui/src/components/SelectInputV2/index.tsx b/packages/ui/src/components/SelectInputV2/index.tsx
index 744eb8f3c9..969da005de 100644
--- a/packages/ui/src/components/SelectInputV2/index.tsx
+++ b/packages/ui/src/components/SelectInputV2/index.tsx
@@ -77,7 +77,7 @@ type SelectInputV2Props<IsMulti extends undefined | boolean = false> = {
   /**
    * To add custom fixed elements at the bottom of the dropdown
    */
-  footer?: ReactNode
+  footer?: ((closeDropdown: () => void) => ReactNode) | ReactNode
   /**
    * Display an error message under the select bar
    */
@@ -159,7 +159,7 @@ export const SelectInputV2 = <IsMulti extends undefined | boolean>({
   searchable = true,
   disabled = false,
   readOnly = false,
-  clearable = true,
+  clearable = false,
   multiselect = false,
   required = false,
   labelDescription,