From 3e7eb707c05ab31d67082b96e5630f26baf4e0cf Mon Sep 17 00:00:00 2001
From: donskov <donskovdmitriyv@gmail.com>
Date: Wed, 28 Feb 2024 18:38:58 +0200
Subject: [PATCH] feat(react-components): add Autocomplete "label" prop support

---
 .../__snapshots__/autocomplete.test.tsx.snap  | 934 ++++++++----------
 .../src/Autocomplete/autocomplete.tsx         |  80 +-
 .../src/hooks/use_autocomplete.ts             |   7 +
 3 files changed, 488 insertions(+), 533 deletions(-)

diff --git a/packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap b/packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap
index d2168b26..bb52bd04 100644
--- a/packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap
+++ b/packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap
@@ -3,15 +3,6 @@
 exports[`<Autocomplete /> should pass className 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  position: relative;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  width: 100%;
-}
-
-.emotion-1 {
   margin: 0;
   color: var(--pv-color-black);
   font-weight: var(--pv-text-b3-weight);
@@ -43,53 +34,53 @@ exports[`<Autocomplete /> should pass className 1`] = `
   cursor: pointer;
   font-family: inherit;
   height: var(--pv-size-base-7);
+  position: relative;
   border-color: var(--pv-color-gray-8);
 }
 
-.emotion-1:hover {
+.emotion-0:hover {
   background-color: var(--pv-color-gray-3);
   border-color: var(--pv-color-gray-7);
 }
 
-.emotion-1:disabled {
+.emotion-0:disabled {
   cursor: not-allowed;
   background-color: var(--pv-color-gray-1);
   border-color: var(--pv-color-gray-5);
   color: var(--pv-color-gray-7);
 }
 
-.emotion-1:not(:disabled) {
+.emotion-0:not(:disabled) {
   color: var(--pv-color-black);
 }
 
-.emotion-1:not(:disabled)[aria-placeholder] {
+.emotion-0:not(:disabled)[aria-placeholder] {
   color: var(--pv-color-gray-9);
 }
 
-.emotion-1:not(:disabled)[aria-invalid] {
+.emotion-0:not(:disabled)[aria-invalid] {
   background-color: var(--pv-color-wrong-tint-5);
   border-color: var(--pv-color-wrong-tint-3);
 }
 
-.emotion-1:not(:disabled):focus-visible {
+.emotion-0:not(:disabled):focus-visible {
   background-color: var(--pv-color-secondary-tint-5);
   border-color: var(--pv-color-secondary-tint-3);
 }
 
-.emotion-2 {
+.emotion-1 {
   position: absolute;
   right: 0px;
   top: calc(50% - 12px);
-  pointer-events: none;
   margin: 0px var(--pv-size-base);
   color: var(--pv-color-gray-10);
 }
 
-.emotion-2[aria-disabled="true"] {
-  color: var(--pv-color-gray-7);
+.emotion-1[aria-disabled="true"] {
+  color: inherit;
 }
 
-.emotion-3 {
+.emotion-2 {
   bottom: 0;
   left: 0;
   height: 100%;
@@ -101,56 +92,49 @@ exports[`<Autocomplete /> should pass className 1`] = `
 }
 
 <div
-    class="emotion-0"
+    class="my-class-name"
   >
     <button
       aria-autocomplete="list"
       aria-controls="test-id-listbox"
       aria-expanded="false"
       aria-placeholder="true"
-      class="my-class-name emotion-1"
+      class="emotion-0"
+      id="test-id-toggle-button"
       role="combobox"
       type="button"
-    />
-    <svg
-      aria-disabled="false"
-      aria-hidden="true"
-      class="emotion-2"
-      fill="none"
-      height="24px"
-      viewBox="0 0 24 24"
-      width="24px"
-      xmlns="http://www.w3.org/2000/svg"
     >
-      <path
-        d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
-        fill="currentColor"
+      <svg
+        aria-disabled="false"
+        aria-hidden="true"
+        class="emotion-1"
+        fill="none"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
+          fill="currentColor"
+        />
+      </svg>
+      <input
+        aria-hidden="true"
+        autocomplete="off"
+        class="emotion-2"
+        id="test-id"
+        tabindex="-1"
+        type="text"
+        value=""
       />
-    </svg>
-    <input
-      aria-hidden="true"
-      autocomplete="off"
-      class="emotion-3"
-      id="test-id"
-      tabindex="-1"
-      type="text"
-      value=""
-    />
+    </button>
   </div>
 </DocumentFragment>
 `;
 
 exports[`<Autocomplete /> should pass error 1`] = `
 .emotion-0 {
-  position: relative;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  width: 100%;
-}
-
-.emotion-1 {
   margin: 0;
   color: var(--pv-color-black);
   font-weight: var(--pv-text-b3-weight);
@@ -182,53 +166,53 @@ exports[`<Autocomplete /> should pass error 1`] = `
   cursor: pointer;
   font-family: inherit;
   height: var(--pv-size-base-7);
+  position: relative;
   border-color: var(--pv-color-gray-8);
 }
 
-.emotion-1:hover {
+.emotion-0:hover {
   background-color: var(--pv-color-gray-3);
   border-color: var(--pv-color-gray-7);
 }
 
-.emotion-1:disabled {
+.emotion-0:disabled {
   cursor: not-allowed;
   background-color: var(--pv-color-gray-1);
   border-color: var(--pv-color-gray-5);
   color: var(--pv-color-gray-7);
 }
 
-.emotion-1:not(:disabled) {
+.emotion-0:not(:disabled) {
   color: var(--pv-color-black);
 }
 
-.emotion-1:not(:disabled)[aria-placeholder] {
+.emotion-0:not(:disabled)[aria-placeholder] {
   color: var(--pv-color-gray-9);
 }
 
-.emotion-1:not(:disabled)[aria-invalid] {
+.emotion-0:not(:disabled)[aria-invalid] {
   background-color: var(--pv-color-wrong-tint-5);
   border-color: var(--pv-color-wrong-tint-3);
 }
 
-.emotion-1:not(:disabled):focus-visible {
+.emotion-0:not(:disabled):focus-visible {
   background-color: var(--pv-color-secondary-tint-5);
   border-color: var(--pv-color-secondary-tint-3);
 }
 
-.emotion-2 {
+.emotion-1 {
   position: absolute;
   right: 0px;
   top: calc(50% - 12px);
-  pointer-events: none;
   margin: 0px var(--pv-size-base);
   color: var(--pv-color-gray-10);
 }
 
-.emotion-2[aria-disabled="true"] {
-  color: var(--pv-color-gray-7);
+.emotion-1[aria-disabled="true"] {
+  color: inherit;
 }
 
-.emotion-3 {
+.emotion-2 {
   bottom: 0;
   left: 0;
   height: 100%;
@@ -239,7 +223,7 @@ exports[`<Autocomplete /> should pass error 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-4 {
+.emotion-3 {
   margin: 0;
   color: var(--pv-color-wrong);
   font-weight: var(--pv-text-c2-weight);
@@ -249,7 +233,7 @@ exports[`<Autocomplete /> should pass error 1`] = `
   margin-top: 2px;
 }
 
-.emotion-5 {
+.emotion-4 {
   position: fixed;
   z-index: 1300;
   top: 0;
@@ -258,7 +242,7 @@ exports[`<Autocomplete /> should pass error 1`] = `
   left: 0;
 }
 
-.emotion-6 {
+.emotion-5 {
   background: var(--pv-color-black);
   z-index: -1;
   position: fixed;
@@ -270,7 +254,7 @@ exports[`<Autocomplete /> should pass error 1`] = `
   background-color: transparent;
 }
 
-.emotion-7 {
+.emotion-6 {
   outline: 0;
   max-width: calc(100% - 32px);
   min-width: 16px;
@@ -282,17 +266,17 @@ exports[`<Autocomplete /> should pass error 1`] = `
   min-width: 240px;
 }
 
-.emotion-8 {
+.emotion-7 {
   border-color: var(--pv-color-gray-3);
   border-style: solid;
   border-width: 0px 0px 1px 0px;
 }
 
-.emotion-9 {
+.emotion-8 {
   padding: var(--pv-size-base-3) var(--pv-size-base-3) var(--pv-size-base-2);
 }
 
-.emotion-10 {
+.emotion-9 {
   margin: 0;
   color: var(--pv-color-black);
   font-weight: var(--pv-text-b3-weight);
@@ -323,49 +307,49 @@ exports[`<Autocomplete /> should pass error 1`] = `
   border-color: var(--pv-color-gray-8);
 }
 
-.emotion-10::-webkit-input-placeholder {
+.emotion-9::-webkit-input-placeholder {
   color: var(--pv-color-gray-9);
 }
 
-.emotion-10::-moz-placeholder {
+.emotion-9::-moz-placeholder {
   color: var(--pv-color-gray-9);
 }
 
-.emotion-10:-ms-input-placeholder {
+.emotion-9:-ms-input-placeholder {
   color: var(--pv-color-gray-9);
 }
 
-.emotion-10::placeholder {
+.emotion-9::placeholder {
   color: var(--pv-color-gray-9);
 }
 
-.emotion-10:hover {
+.emotion-9:hover {
   background-color: var(--pv-color-gray-3);
   border-color: var(--pv-color-gray-7);
 }
 
-.emotion-10:disabled {
+.emotion-9:disabled {
   cursor: not-allowed;
   background-color: var(--pv-color-gray-1);
   border-color: var(--pv-color-gray-5);
   color: var(--pv-color-gray-7);
 }
 
-.emotion-10:not(:disabled)[aria-invalid] {
+.emotion-9:not(:disabled)[aria-invalid] {
   background-color: var(--pv-color-wrong-tint-5);
   border-color: var(--pv-color-wrong-tint-3);
 }
 
-.emotion-10:not(:disabled):focus-visible {
+.emotion-9:not(:disabled):focus-visible {
   background-color: var(--pv-color-secondary-tint-5);
   border-color: var(--pv-color-secondary-tint-3);
 }
 
-.emotion-11 {
+.emotion-10 {
   padding: var(--pv-size-base-3) var(--pv-size-base-2);
 }
 
-.emotion-12 {
+.emotion-11 {
   margin: 0;
   color: var(--pv-color-gray-10);
   font-weight: var(--pv-text-b2-weight);
@@ -376,76 +360,77 @@ exports[`<Autocomplete /> should pass error 1`] = `
 
 <body>
   <div>
-    <div
-      class="emotion-0"
-    >
+    <div>
       <button
         aria-autocomplete="list"
         aria-controls="test-id-listbox"
         aria-expanded="true"
         aria-invalid="true"
         aria-placeholder="true"
-        class="emotion-1"
+        class="emotion-0"
+        id="test-id-toggle-button"
         role="combobox"
         type="button"
-      />
-      <svg
-        aria-disabled="false"
-        aria-hidden="true"
-        class="emotion-2"
-        fill="none"
-        height="24px"
-        viewBox="0 0 24 24"
-        width="24px"
-        xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
-          fill="currentColor"
+        <svg
+          aria-disabled="false"
+          aria-hidden="true"
+          class="emotion-1"
+          fill="none"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
+            fill="currentColor"
+          />
+        </svg>
+        <input
+          aria-hidden="true"
+          autocomplete="off"
+          class="emotion-2"
+          id="test-id"
+          tabindex="-1"
+          type="text"
+          value=""
         />
-      </svg>
-      <input
-        aria-hidden="true"
-        autocomplete="off"
+      </button>
+      <p
         class="emotion-3"
-        id="test-id"
-        tabindex="-1"
-        type="text"
-        value=""
-      />
+      >
+        Error text
+      </p>
     </div>
-    <p
-      class="emotion-4"
-    >
-      Error text
-    </p>
   </div>
   <div
     aria-hidden="false"
-    class="emotion-5"
+    class="emotion-4"
     role="presentation"
   >
     <div
       aria-hidden="true"
-      class="emotion-6"
+      class="emotion-5"
       style="opacity: 0.5; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
     />
     <div
-      class="emotion-7"
+      class="emotion-6"
       style="opacity: 1; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; position: absolute; left: 0px; top: 0px; width: 0px;"
       tabindex="-1"
     >
       <div
-        class="emotion-8"
+        class="emotion-7"
       >
         <div
-          class="emotion-9"
+          class="emotion-8"
         >
           <input
             autocapitalize="none"
             autocomplete="off"
             autocorrect="false"
-            class="emotion-10"
+            class="emotion-9"
+            id="test-id-input"
             placeholder="Search"
             spellcheck="false"
             type="text"
@@ -454,10 +439,10 @@ exports[`<Autocomplete /> should pass error 1`] = `
         </div>
       </div>
       <div
-        class="emotion-11"
+        class="emotion-10"
       >
         <p
-          class="emotion-12"
+          class="emotion-11"
         >
           No options
         </p>
@@ -469,15 +454,6 @@ exports[`<Autocomplete /> should pass error 1`] = `
 
 exports[`<Autocomplete /> should pass loading 1`] = `
 .emotion-0 {
-  position: relative;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  width: 100%;
-}
-
-.emotion-1 {
   margin: 0;
   color: var(--pv-color-black);
   font-weight: var(--pv-text-b3-weight);
@@ -509,53 +485,53 @@ exports[`<Autocomplete /> should pass loading 1`] = `
   cursor: pointer;
   font-family: inherit;
   height: var(--pv-size-base-7);
+  position: relative;
   border-color: var(--pv-color-gray-8);
 }
 
-.emotion-1:hover {
+.emotion-0:hover {
   background-color: var(--pv-color-gray-3);
   border-color: var(--pv-color-gray-7);
 }
 
-.emotion-1:disabled {
+.emotion-0:disabled {
   cursor: not-allowed;
   background-color: var(--pv-color-gray-1);
   border-color: var(--pv-color-gray-5);
   color: var(--pv-color-gray-7);
 }
 
-.emotion-1:not(:disabled) {
+.emotion-0:not(:disabled) {
   color: var(--pv-color-black);
 }
 
-.emotion-1:not(:disabled)[aria-placeholder] {
+.emotion-0:not(:disabled)[aria-placeholder] {
   color: var(--pv-color-gray-9);
 }
 
-.emotion-1:not(:disabled)[aria-invalid] {
+.emotion-0:not(:disabled)[aria-invalid] {
   background-color: var(--pv-color-wrong-tint-5);
   border-color: var(--pv-color-wrong-tint-3);
 }
 
-.emotion-1:not(:disabled):focus-visible {
+.emotion-0:not(:disabled):focus-visible {
   background-color: var(--pv-color-secondary-tint-5);
   border-color: var(--pv-color-secondary-tint-3);
 }
 
-.emotion-2 {
+.emotion-1 {
   position: absolute;
   right: 0px;
   top: calc(50% - 12px);
-  pointer-events: none;
   margin: 0px var(--pv-size-base);
   color: var(--pv-color-gray-10);
 }
 
-.emotion-2[aria-disabled="true"] {
-  color: var(--pv-color-gray-7);
+.emotion-1[aria-disabled="true"] {
+  color: inherit;
 }
 
-.emotion-3 {
+.emotion-2 {
   bottom: 0;
   left: 0;
   height: 100%;
@@ -566,7 +542,7 @@ exports[`<Autocomplete /> should pass loading 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-4 {
+.emotion-3 {
   position: fixed;
   z-index: 1300;
   top: 0;
@@ -575,7 +551,7 @@ exports[`<Autocomplete /> should pass loading 1`] = `
   left: 0;
 }
 
-.emotion-5 {
+.emotion-4 {
   background: var(--pv-color-black);
   z-index: -1;
   position: fixed;
@@ -587,7 +563,7 @@ exports[`<Autocomplete /> should pass loading 1`] = `
   background-color: transparent;
 }
 
-.emotion-6 {
+.emotion-5 {
   outline: 0;
   max-width: calc(100% - 32px);
   min-width: 16px;
@@ -599,17 +575,17 @@ exports[`<Autocomplete /> should pass loading 1`] = `
   min-width: 240px;
 }
 
-.emotion-7 {
+.emotion-6 {
   border-color: var(--pv-color-gray-3);
   border-style: solid;
   border-width: 0px 0px 1px 0px;
 }
 
-.emotion-8 {
+.emotion-7 {
   padding: var(--pv-size-base-3) var(--pv-size-base-3) var(--pv-size-base-2);
 }
 
-.emotion-9 {
+.emotion-8 {
   margin: 0;
   color: var(--pv-color-black);
   font-weight: var(--pv-text-b3-weight);
@@ -640,49 +616,49 @@ exports[`<Autocomplete /> should pass loading 1`] = `
   border-color: var(--pv-color-gray-8);
 }
 
-.emotion-9::-webkit-input-placeholder {
+.emotion-8::-webkit-input-placeholder {
   color: var(--pv-color-gray-9);
 }
 
-.emotion-9::-moz-placeholder {
+.emotion-8::-moz-placeholder {
   color: var(--pv-color-gray-9);
 }
 
-.emotion-9:-ms-input-placeholder {
+.emotion-8:-ms-input-placeholder {
   color: var(--pv-color-gray-9);
 }
 
-.emotion-9::placeholder {
+.emotion-8::placeholder {
   color: var(--pv-color-gray-9);
 }
 
-.emotion-9:hover {
+.emotion-8:hover {
   background-color: var(--pv-color-gray-3);
   border-color: var(--pv-color-gray-7);
 }
 
-.emotion-9:disabled {
+.emotion-8:disabled {
   cursor: not-allowed;
   background-color: var(--pv-color-gray-1);
   border-color: var(--pv-color-gray-5);
   color: var(--pv-color-gray-7);
 }
 
-.emotion-9:not(:disabled)[aria-invalid] {
+.emotion-8:not(:disabled)[aria-invalid] {
   background-color: var(--pv-color-wrong-tint-5);
   border-color: var(--pv-color-wrong-tint-3);
 }
 
-.emotion-9:not(:disabled):focus-visible {
+.emotion-8:not(:disabled):focus-visible {
   background-color: var(--pv-color-secondary-tint-5);
   border-color: var(--pv-color-secondary-tint-3);
 }
 
-.emotion-10 {
+.emotion-9 {
   padding: var(--pv-size-base-3) var(--pv-size-base-2);
 }
 
-.emotion-11 {
+.emotion-10 {
   margin: 0;
   color: var(--pv-color-gray-10);
   font-weight: var(--pv-text-b2-weight);
@@ -693,71 +669,72 @@ exports[`<Autocomplete /> should pass loading 1`] = `
 
 <body>
   <div>
-    <div
-      class="emotion-0"
-    >
+    <div>
       <button
         aria-autocomplete="list"
         aria-controls="test-id-listbox"
         aria-expanded="true"
         aria-placeholder="true"
-        class="emotion-1"
+        class="emotion-0"
+        id="test-id-toggle-button"
         role="combobox"
         type="button"
-      />
-      <svg
-        aria-disabled="false"
-        aria-hidden="true"
-        class="emotion-2"
-        fill="none"
-        height="24px"
-        viewBox="0 0 24 24"
-        width="24px"
-        xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
-          fill="currentColor"
+        <svg
+          aria-disabled="false"
+          aria-hidden="true"
+          class="emotion-1"
+          fill="none"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
+            fill="currentColor"
+          />
+        </svg>
+        <input
+          aria-hidden="true"
+          autocomplete="off"
+          class="emotion-2"
+          id="test-id"
+          tabindex="-1"
+          type="text"
+          value=""
         />
-      </svg>
-      <input
-        aria-hidden="true"
-        autocomplete="off"
-        class="emotion-3"
-        id="test-id"
-        tabindex="-1"
-        type="text"
-        value=""
-      />
+      </button>
     </div>
   </div>
   <div
     aria-hidden="false"
-    class="emotion-4"
+    class="emotion-3"
     role="presentation"
   >
     <div
       aria-hidden="true"
-      class="emotion-5"
+      class="emotion-4"
       style="opacity: 0.5; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
     />
     <div
-      class="emotion-6"
+      class="emotion-5"
       style="opacity: 1; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; position: absolute; left: 0px; top: 0px; width: 0px;"
       tabindex="-1"
     >
       <div
-        class="emotion-7"
+        class="emotion-6"
       >
         <div
-          class="emotion-8"
+          class="emotion-7"
         >
           <input
             autocapitalize="none"
             autocomplete="off"
             autocorrect="false"
-            class="emotion-9"
+            class="emotion-8"
             disabled=""
+            id="test-id-input"
             placeholder="Search"
             spellcheck="false"
             type="text"
@@ -766,10 +743,10 @@ exports[`<Autocomplete /> should pass loading 1`] = `
         </div>
       </div>
       <div
-        class="emotion-10"
+        class="emotion-9"
       >
         <p
-          class="emotion-11"
+          class="emotion-10"
         >
           Loading...
         </p>
@@ -781,15 +758,6 @@ exports[`<Autocomplete /> should pass loading 1`] = `
 
 exports[`<Autocomplete /> should pass options 1`] = `
 .emotion-0 {
-  position: relative;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  width: 100%;
-}
-
-.emotion-1 {
   margin: 0;
   color: var(--pv-color-black);
   font-weight: var(--pv-text-b3-weight);
@@ -821,53 +789,53 @@ exports[`<Autocomplete /> should pass options 1`] = `
   cursor: pointer;
   font-family: inherit;
   height: var(--pv-size-base-7);
+  position: relative;
   border-color: var(--pv-color-gray-8);
 }
 
-.emotion-1:hover {
+.emotion-0:hover {
   background-color: var(--pv-color-gray-3);
   border-color: var(--pv-color-gray-7);
 }
 
-.emotion-1:disabled {
+.emotion-0:disabled {
   cursor: not-allowed;
   background-color: var(--pv-color-gray-1);
   border-color: var(--pv-color-gray-5);
   color: var(--pv-color-gray-7);
 }
 
-.emotion-1:not(:disabled) {
+.emotion-0:not(:disabled) {
   color: var(--pv-color-black);
 }
 
-.emotion-1:not(:disabled)[aria-placeholder] {
+.emotion-0:not(:disabled)[aria-placeholder] {
   color: var(--pv-color-gray-9);
 }
 
-.emotion-1:not(:disabled)[aria-invalid] {
+.emotion-0:not(:disabled)[aria-invalid] {
   background-color: var(--pv-color-wrong-tint-5);
   border-color: var(--pv-color-wrong-tint-3);
 }
 
-.emotion-1:not(:disabled):focus-visible {
+.emotion-0:not(:disabled):focus-visible {
   background-color: var(--pv-color-secondary-tint-5);
   border-color: var(--pv-color-secondary-tint-3);
 }
 
-.emotion-2 {
+.emotion-1 {
   position: absolute;
   right: 0px;
   top: calc(50% - 12px);
-  pointer-events: none;
   margin: 0px var(--pv-size-base);
   color: var(--pv-color-gray-10);
 }
 
-.emotion-2[aria-disabled="true"] {
-  color: var(--pv-color-gray-7);
+.emotion-1[aria-disabled="true"] {
+  color: inherit;
 }
 
-.emotion-3 {
+.emotion-2 {
   bottom: 0;
   left: 0;
   height: 100%;
@@ -878,7 +846,7 @@ exports[`<Autocomplete /> should pass options 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-4 {
+.emotion-3 {
   position: fixed;
   z-index: 1300;
   top: 0;
@@ -887,7 +855,7 @@ exports[`<Autocomplete /> should pass options 1`] = `
   left: 0;
 }
 
-.emotion-5 {
+.emotion-4 {
   background: var(--pv-color-black);
   z-index: -1;
   position: fixed;
@@ -899,7 +867,7 @@ exports[`<Autocomplete /> should pass options 1`] = `
   background-color: transparent;
 }
 
-.emotion-6 {
+.emotion-5 {
   outline: 0;
   max-width: calc(100% - 32px);
   min-width: 16px;
@@ -911,17 +879,17 @@ exports[`<Autocomplete /> should pass options 1`] = `
   min-width: 240px;
 }
 
-.emotion-7 {
+.emotion-6 {
   border-color: var(--pv-color-gray-3);
   border-style: solid;
   border-width: 0px 0px 1px 0px;
 }
 
-.emotion-8 {
+.emotion-7 {
   padding: var(--pv-size-base-3) var(--pv-size-base-3) var(--pv-size-base-2);
 }
 
-.emotion-9 {
+.emotion-8 {
   margin: 0;
   color: var(--pv-color-black);
   font-weight: var(--pv-text-b3-weight);
@@ -952,45 +920,45 @@ exports[`<Autocomplete /> should pass options 1`] = `
   border-color: var(--pv-color-gray-8);
 }
 
-.emotion-9::-webkit-input-placeholder {
+.emotion-8::-webkit-input-placeholder {
   color: var(--pv-color-gray-9);
 }
 
-.emotion-9::-moz-placeholder {
+.emotion-8::-moz-placeholder {
   color: var(--pv-color-gray-9);
 }
 
-.emotion-9:-ms-input-placeholder {
+.emotion-8:-ms-input-placeholder {
   color: var(--pv-color-gray-9);
 }
 
-.emotion-9::placeholder {
+.emotion-8::placeholder {
   color: var(--pv-color-gray-9);
 }
 
-.emotion-9:hover {
+.emotion-8:hover {
   background-color: var(--pv-color-gray-3);
   border-color: var(--pv-color-gray-7);
 }
 
-.emotion-9:disabled {
+.emotion-8:disabled {
   cursor: not-allowed;
   background-color: var(--pv-color-gray-1);
   border-color: var(--pv-color-gray-5);
   color: var(--pv-color-gray-7);
 }
 
-.emotion-9:not(:disabled)[aria-invalid] {
+.emotion-8:not(:disabled)[aria-invalid] {
   background-color: var(--pv-color-wrong-tint-5);
   border-color: var(--pv-color-wrong-tint-3);
 }
 
-.emotion-9:not(:disabled):focus-visible {
+.emotion-8:not(:disabled):focus-visible {
   background-color: var(--pv-color-secondary-tint-5);
   border-color: var(--pv-color-secondary-tint-3);
 }
 
-.emotion-10 {
+.emotion-9 {
   max-height: 36vh;
   overflow-y: auto;
   margin: 0;
@@ -999,7 +967,7 @@ exports[`<Autocomplete /> should pass options 1`] = `
   padding: 10px 0;
 }
 
-.emotion-11 {
+.emotion-10 {
   padding: 0px var(--pv-size-base-2);
   font-family: inherit;
   outline: none;
@@ -1033,19 +1001,19 @@ exports[`<Autocomplete /> should pass options 1`] = `
   color: var(--pv-color-black);
 }
 
-.emotion-11:hover {
+.emotion-10:hover {
   background-color: var(--pv-color-gray-2);
 }
 
-.emotion-11[data-focused="true"] {
+.emotion-10[data-focused="true"] {
   background-color: var(--pv-color-gray-3);
 }
 
-.emotion-11[aria-selected="true"] {
+.emotion-10[aria-selected="true"] {
   background-color: var(--pv-color-gray-4);
 }
 
-.emotion-12 {
+.emotion-11 {
   margin: 0;
   color: inherit;
   font-weight: var(--pv-text-b3-weight);
@@ -1059,70 +1027,71 @@ exports[`<Autocomplete /> should pass options 1`] = `
 
 <body>
   <div>
-    <div
-      class="emotion-0"
-    >
+    <div>
       <button
         aria-autocomplete="list"
         aria-controls="test-id-listbox"
         aria-expanded="true"
         aria-placeholder="true"
-        class="emotion-1"
+        class="emotion-0"
+        id="test-id-toggle-button"
         role="combobox"
         type="button"
-      />
-      <svg
-        aria-disabled="false"
-        aria-hidden="true"
-        class="emotion-2"
-        fill="none"
-        height="24px"
-        viewBox="0 0 24 24"
-        width="24px"
-        xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
-          fill="currentColor"
+        <svg
+          aria-disabled="false"
+          aria-hidden="true"
+          class="emotion-1"
+          fill="none"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
+            fill="currentColor"
+          />
+        </svg>
+        <input
+          aria-hidden="true"
+          autocomplete="off"
+          class="emotion-2"
+          id="test-id"
+          tabindex="-1"
+          type="text"
+          value=""
         />
-      </svg>
-      <input
-        aria-hidden="true"
-        autocomplete="off"
-        class="emotion-3"
-        id="test-id"
-        tabindex="-1"
-        type="text"
-        value=""
-      />
+      </button>
     </div>
   </div>
   <div
     aria-hidden="false"
-    class="emotion-4"
+    class="emotion-3"
     role="presentation"
   >
     <div
       aria-hidden="true"
-      class="emotion-5"
+      class="emotion-4"
       style="opacity: 0.5; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
     />
     <div
-      class="emotion-6"
+      class="emotion-5"
       style="opacity: 1; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; position: absolute; left: 0px; top: 0px; width: 0px;"
       tabindex="-1"
     >
       <div
-        class="emotion-7"
+        class="emotion-6"
       >
         <div
-          class="emotion-8"
+          class="emotion-7"
         >
           <input
             autocapitalize="none"
             autocomplete="off"
             autocorrect="false"
-            class="emotion-9"
+            class="emotion-8"
+            id="test-id-input"
             placeholder="Search"
             spellcheck="false"
             type="text"
@@ -1131,35 +1100,35 @@ exports[`<Autocomplete /> should pass options 1`] = `
         </div>
       </div>
       <ul
-        class="emotion-10"
+        class="emotion-9"
         id="test-id-listbox"
         role="listbox"
         tabindex="-1"
       >
         <li
           aria-selected="false"
-          class="emotion-11"
+          class="emotion-10"
           data-option-index="0"
           id="test-id-option-0"
           role="option"
           tabindex="-1"
         >
           <p
-            class="emotion-12"
+            class="emotion-11"
           >
             test-1
           </p>
         </li>
         <li
           aria-selected="false"
-          class="emotion-11"
+          class="emotion-10"
           data-option-index="1"
           id="test-id-option-1"
           role="option"
           tabindex="-1"
         >
           <p
-            class="emotion-12"
+            class="emotion-11"
           >
             test-2
           </p>
@@ -1173,15 +1142,6 @@ exports[`<Autocomplete /> should pass options 1`] = `
 exports[`<Autocomplete /> should render with default multiple styles 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  position: relative;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  width: 100%;
-}
-
-.emotion-1 {
   margin: 0;
   color: var(--pv-color-black);
   font-weight: var(--pv-text-b3-weight);
@@ -1213,6 +1173,7 @@ exports[`<Autocomplete /> should render with default multiple styles 1`] = `
   cursor: pointer;
   font-family: inherit;
   height: var(--pv-size-base-7);
+  position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1224,50 +1185,49 @@ exports[`<Autocomplete /> should render with default multiple styles 1`] = `
   border-color: var(--pv-color-gray-8);
 }
 
-.emotion-1:hover {
+.emotion-0:hover {
   background-color: var(--pv-color-gray-3);
   border-color: var(--pv-color-gray-7);
 }
 
-.emotion-1:disabled {
+.emotion-0:disabled {
   cursor: not-allowed;
   background-color: var(--pv-color-gray-1);
   border-color: var(--pv-color-gray-5);
   color: var(--pv-color-gray-7);
 }
 
-.emotion-1:not(:disabled) {
+.emotion-0:not(:disabled) {
   color: var(--pv-color-black);
 }
 
-.emotion-1:not(:disabled)[aria-placeholder] {
+.emotion-0:not(:disabled)[aria-placeholder] {
   color: var(--pv-color-gray-9);
 }
 
-.emotion-1:not(:disabled)[aria-invalid] {
+.emotion-0:not(:disabled)[aria-invalid] {
   background-color: var(--pv-color-wrong-tint-5);
   border-color: var(--pv-color-wrong-tint-3);
 }
 
-.emotion-1:not(:disabled):focus-visible {
+.emotion-0:not(:disabled):focus-visible {
   background-color: var(--pv-color-secondary-tint-5);
   border-color: var(--pv-color-secondary-tint-3);
 }
 
-.emotion-2 {
+.emotion-1 {
   position: absolute;
   right: 0px;
   top: calc(50% - 12px);
-  pointer-events: none;
   margin: 0px var(--pv-size-base);
   color: var(--pv-color-gray-10);
 }
 
-.emotion-2[aria-disabled="true"] {
-  color: var(--pv-color-gray-7);
+.emotion-1[aria-disabled="true"] {
+  color: inherit;
 }
 
-.emotion-3 {
+.emotion-2 {
   bottom: 0;
   left: 0;
   height: 100%;
@@ -1278,42 +1238,42 @@ exports[`<Autocomplete /> should render with default multiple styles 1`] = `
   box-sizing: border-box;
 }
 
-<div
-    class="emotion-0"
-  >
+<div>
     <button
       aria-autocomplete="list"
       aria-controls="test-id-listbox"
       aria-expanded="false"
       aria-placeholder="true"
-      class="emotion-1"
+      class="emotion-0"
+      id="test-id-toggle-button"
       role="combobox"
       type="button"
-    />
-    <svg
-      aria-disabled="false"
-      aria-hidden="true"
-      class="emotion-2"
-      fill="none"
-      height="24px"
-      viewBox="0 0 24 24"
-      width="24px"
-      xmlns="http://www.w3.org/2000/svg"
     >
-      <path
-        d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
-        fill="currentColor"
+      <svg
+        aria-disabled="false"
+        aria-hidden="true"
+        class="emotion-1"
+        fill="none"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
+          fill="currentColor"
+        />
+      </svg>
+      <input
+        aria-hidden="true"
+        autocomplete="off"
+        class="emotion-2"
+        id="test-id"
+        tabindex="-1"
+        type="text"
+        value=""
       />
-    </svg>
-    <input
-      aria-hidden="true"
-      autocomplete="off"
-      class="emotion-3"
-      id="test-id"
-      tabindex="-1"
-      type="text"
-      value=""
-    />
+    </button>
   </div>
 </DocumentFragment>
 `;
@@ -1321,15 +1281,6 @@ exports[`<Autocomplete /> should render with default multiple styles 1`] = `
 exports[`<Autocomplete /> should render with default styles 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  position: relative;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  width: 100%;
-}
-
-.emotion-1 {
   margin: 0;
   color: var(--pv-color-black);
   font-weight: var(--pv-text-b3-weight);
@@ -1361,53 +1312,53 @@ exports[`<Autocomplete /> should render with default styles 1`] = `
   cursor: pointer;
   font-family: inherit;
   height: var(--pv-size-base-7);
+  position: relative;
   border-color: var(--pv-color-gray-8);
 }
 
-.emotion-1:hover {
+.emotion-0:hover {
   background-color: var(--pv-color-gray-3);
   border-color: var(--pv-color-gray-7);
 }
 
-.emotion-1:disabled {
+.emotion-0:disabled {
   cursor: not-allowed;
   background-color: var(--pv-color-gray-1);
   border-color: var(--pv-color-gray-5);
   color: var(--pv-color-gray-7);
 }
 
-.emotion-1:not(:disabled) {
+.emotion-0:not(:disabled) {
   color: var(--pv-color-black);
 }
 
-.emotion-1:not(:disabled)[aria-placeholder] {
+.emotion-0:not(:disabled)[aria-placeholder] {
   color: var(--pv-color-gray-9);
 }
 
-.emotion-1:not(:disabled)[aria-invalid] {
+.emotion-0:not(:disabled)[aria-invalid] {
   background-color: var(--pv-color-wrong-tint-5);
   border-color: var(--pv-color-wrong-tint-3);
 }
 
-.emotion-1:not(:disabled):focus-visible {
+.emotion-0:not(:disabled):focus-visible {
   background-color: var(--pv-color-secondary-tint-5);
   border-color: var(--pv-color-secondary-tint-3);
 }
 
-.emotion-2 {
+.emotion-1 {
   position: absolute;
   right: 0px;
   top: calc(50% - 12px);
-  pointer-events: none;
   margin: 0px var(--pv-size-base);
   color: var(--pv-color-gray-10);
 }
 
-.emotion-2[aria-disabled="true"] {
-  color: var(--pv-color-gray-7);
+.emotion-1[aria-disabled="true"] {
+  color: inherit;
 }
 
-.emotion-3 {
+.emotion-2 {
   bottom: 0;
   left: 0;
   height: 100%;
@@ -1418,42 +1369,42 @@ exports[`<Autocomplete /> should render with default styles 1`] = `
   box-sizing: border-box;
 }
 
-<div
-    class="emotion-0"
-  >
+<div>
     <button
       aria-autocomplete="list"
       aria-controls="test-id-listbox"
       aria-expanded="false"
       aria-placeholder="true"
-      class="emotion-1"
+      class="emotion-0"
+      id="test-id-toggle-button"
       role="combobox"
       type="button"
-    />
-    <svg
-      aria-disabled="false"
-      aria-hidden="true"
-      class="emotion-2"
-      fill="none"
-      height="24px"
-      viewBox="0 0 24 24"
-      width="24px"
-      xmlns="http://www.w3.org/2000/svg"
     >
-      <path
-        d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
-        fill="currentColor"
+      <svg
+        aria-disabled="false"
+        aria-hidden="true"
+        class="emotion-1"
+        fill="none"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
+          fill="currentColor"
+        />
+      </svg>
+      <input
+        aria-hidden="true"
+        autocomplete="off"
+        class="emotion-2"
+        id="test-id"
+        tabindex="-1"
+        type="text"
+        value=""
       />
-    </svg>
-    <input
-      aria-hidden="true"
-      autocomplete="off"
-      class="emotion-3"
-      id="test-id"
-      tabindex="-1"
-      type="text"
-      value=""
-    />
+    </button>
   </div>
 </DocumentFragment>
 `;
@@ -1461,15 +1412,6 @@ exports[`<Autocomplete /> should render with default styles 1`] = `
 exports[`<Autocomplete /> sizes size "large" 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  position: relative;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  width: 100%;
-}
-
-.emotion-1 {
   margin: 0;
   color: var(--pv-color-black);
   font-weight: var(--pv-text-b3-weight);
@@ -1501,53 +1443,53 @@ exports[`<Autocomplete /> sizes size "large" 1`] = `
   cursor: pointer;
   font-family: inherit;
   height: var(--pv-size-base-8);
+  position: relative;
   border-color: var(--pv-color-gray-8);
 }
 
-.emotion-1:hover {
+.emotion-0:hover {
   background-color: var(--pv-color-gray-3);
   border-color: var(--pv-color-gray-7);
 }
 
-.emotion-1:disabled {
+.emotion-0:disabled {
   cursor: not-allowed;
   background-color: var(--pv-color-gray-1);
   border-color: var(--pv-color-gray-5);
   color: var(--pv-color-gray-7);
 }
 
-.emotion-1:not(:disabled) {
+.emotion-0:not(:disabled) {
   color: var(--pv-color-black);
 }
 
-.emotion-1:not(:disabled)[aria-placeholder] {
+.emotion-0:not(:disabled)[aria-placeholder] {
   color: var(--pv-color-gray-9);
 }
 
-.emotion-1:not(:disabled)[aria-invalid] {
+.emotion-0:not(:disabled)[aria-invalid] {
   background-color: var(--pv-color-wrong-tint-5);
   border-color: var(--pv-color-wrong-tint-3);
 }
 
-.emotion-1:not(:disabled):focus-visible {
+.emotion-0:not(:disabled):focus-visible {
   background-color: var(--pv-color-secondary-tint-5);
   border-color: var(--pv-color-secondary-tint-3);
 }
 
-.emotion-2 {
+.emotion-1 {
   position: absolute;
   right: 0px;
   top: calc(50% - 12px);
-  pointer-events: none;
   margin: 0px var(--pv-size-base);
   color: var(--pv-color-gray-10);
 }
 
-.emotion-2[aria-disabled="true"] {
-  color: var(--pv-color-gray-7);
+.emotion-1[aria-disabled="true"] {
+  color: inherit;
 }
 
-.emotion-3 {
+.emotion-2 {
   bottom: 0;
   left: 0;
   height: 100%;
@@ -1558,42 +1500,42 @@ exports[`<Autocomplete /> sizes size "large" 1`] = `
   box-sizing: border-box;
 }
 
-<div
-    class="emotion-0"
-  >
+<div>
     <button
       aria-autocomplete="list"
       aria-controls="test-id-listbox"
       aria-expanded="false"
       aria-placeholder="true"
-      class="emotion-1"
+      class="emotion-0"
+      id="test-id-toggle-button"
       role="combobox"
       type="button"
-    />
-    <svg
-      aria-disabled="false"
-      aria-hidden="true"
-      class="emotion-2"
-      fill="none"
-      height="24px"
-      viewBox="0 0 24 24"
-      width="24px"
-      xmlns="http://www.w3.org/2000/svg"
     >
-      <path
-        d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
-        fill="currentColor"
+      <svg
+        aria-disabled="false"
+        aria-hidden="true"
+        class="emotion-1"
+        fill="none"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
+          fill="currentColor"
+        />
+      </svg>
+      <input
+        aria-hidden="true"
+        autocomplete="off"
+        class="emotion-2"
+        id="test-id"
+        tabindex="-1"
+        type="text"
+        value=""
       />
-    </svg>
-    <input
-      aria-hidden="true"
-      autocomplete="off"
-      class="emotion-3"
-      id="test-id"
-      tabindex="-1"
-      type="text"
-      value=""
-    />
+    </button>
   </div>
 </DocumentFragment>
 `;
@@ -1601,15 +1543,6 @@ exports[`<Autocomplete /> sizes size "large" 1`] = `
 exports[`<Autocomplete /> sizes size "medium" 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  position: relative;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  width: 100%;
-}
-
-.emotion-1 {
   margin: 0;
   color: var(--pv-color-black);
   font-weight: var(--pv-text-b3-weight);
@@ -1641,53 +1574,53 @@ exports[`<Autocomplete /> sizes size "medium" 1`] = `
   cursor: pointer;
   font-family: inherit;
   height: var(--pv-size-base-7);
+  position: relative;
   border-color: var(--pv-color-gray-8);
 }
 
-.emotion-1:hover {
+.emotion-0:hover {
   background-color: var(--pv-color-gray-3);
   border-color: var(--pv-color-gray-7);
 }
 
-.emotion-1:disabled {
+.emotion-0:disabled {
   cursor: not-allowed;
   background-color: var(--pv-color-gray-1);
   border-color: var(--pv-color-gray-5);
   color: var(--pv-color-gray-7);
 }
 
-.emotion-1:not(:disabled) {
+.emotion-0:not(:disabled) {
   color: var(--pv-color-black);
 }
 
-.emotion-1:not(:disabled)[aria-placeholder] {
+.emotion-0:not(:disabled)[aria-placeholder] {
   color: var(--pv-color-gray-9);
 }
 
-.emotion-1:not(:disabled)[aria-invalid] {
+.emotion-0:not(:disabled)[aria-invalid] {
   background-color: var(--pv-color-wrong-tint-5);
   border-color: var(--pv-color-wrong-tint-3);
 }
 
-.emotion-1:not(:disabled):focus-visible {
+.emotion-0:not(:disabled):focus-visible {
   background-color: var(--pv-color-secondary-tint-5);
   border-color: var(--pv-color-secondary-tint-3);
 }
 
-.emotion-2 {
+.emotion-1 {
   position: absolute;
   right: 0px;
   top: calc(50% - 12px);
-  pointer-events: none;
   margin: 0px var(--pv-size-base);
   color: var(--pv-color-gray-10);
 }
 
-.emotion-2[aria-disabled="true"] {
-  color: var(--pv-color-gray-7);
+.emotion-1[aria-disabled="true"] {
+  color: inherit;
 }
 
-.emotion-3 {
+.emotion-2 {
   bottom: 0;
   left: 0;
   height: 100%;
@@ -1698,42 +1631,42 @@ exports[`<Autocomplete /> sizes size "medium" 1`] = `
   box-sizing: border-box;
 }
 
-<div
-    class="emotion-0"
-  >
+<div>
     <button
       aria-autocomplete="list"
       aria-controls="test-id-listbox"
       aria-expanded="false"
       aria-placeholder="true"
-      class="emotion-1"
+      class="emotion-0"
+      id="test-id-toggle-button"
       role="combobox"
       type="button"
-    />
-    <svg
-      aria-disabled="false"
-      aria-hidden="true"
-      class="emotion-2"
-      fill="none"
-      height="24px"
-      viewBox="0 0 24 24"
-      width="24px"
-      xmlns="http://www.w3.org/2000/svg"
     >
-      <path
-        d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
-        fill="currentColor"
+      <svg
+        aria-disabled="false"
+        aria-hidden="true"
+        class="emotion-1"
+        fill="none"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
+          fill="currentColor"
+        />
+      </svg>
+      <input
+        aria-hidden="true"
+        autocomplete="off"
+        class="emotion-2"
+        id="test-id"
+        tabindex="-1"
+        type="text"
+        value=""
       />
-    </svg>
-    <input
-      aria-hidden="true"
-      autocomplete="off"
-      class="emotion-3"
-      id="test-id"
-      tabindex="-1"
-      type="text"
-      value=""
-    />
+    </button>
   </div>
 </DocumentFragment>
 `;
@@ -1741,15 +1674,6 @@ exports[`<Autocomplete /> sizes size "medium" 1`] = `
 exports[`<Autocomplete /> sizes size "small" 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  position: relative;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  width: 100%;
-}
-
-.emotion-1 {
   margin: 0;
   color: var(--pv-color-black);
   font-weight: var(--pv-text-c1-weight);
@@ -1781,53 +1705,53 @@ exports[`<Autocomplete /> sizes size "small" 1`] = `
   cursor: pointer;
   font-family: inherit;
   height: var(--pv-size-base-6);
+  position: relative;
   border-color: var(--pv-color-gray-8);
 }
 
-.emotion-1:hover {
+.emotion-0:hover {
   background-color: var(--pv-color-gray-3);
   border-color: var(--pv-color-gray-7);
 }
 
-.emotion-1:disabled {
+.emotion-0:disabled {
   cursor: not-allowed;
   background-color: var(--pv-color-gray-1);
   border-color: var(--pv-color-gray-5);
   color: var(--pv-color-gray-7);
 }
 
-.emotion-1:not(:disabled) {
+.emotion-0:not(:disabled) {
   color: var(--pv-color-black);
 }
 
-.emotion-1:not(:disabled)[aria-placeholder] {
+.emotion-0:not(:disabled)[aria-placeholder] {
   color: var(--pv-color-gray-9);
 }
 
-.emotion-1:not(:disabled)[aria-invalid] {
+.emotion-0:not(:disabled)[aria-invalid] {
   background-color: var(--pv-color-wrong-tint-5);
   border-color: var(--pv-color-wrong-tint-3);
 }
 
-.emotion-1:not(:disabled):focus-visible {
+.emotion-0:not(:disabled):focus-visible {
   background-color: var(--pv-color-secondary-tint-5);
   border-color: var(--pv-color-secondary-tint-3);
 }
 
-.emotion-2 {
+.emotion-1 {
   position: absolute;
   right: 0px;
   top: calc(50% - 12px);
-  pointer-events: none;
   margin: 0px var(--pv-size-base);
   color: var(--pv-color-gray-10);
 }
 
-.emotion-2[aria-disabled="true"] {
-  color: var(--pv-color-gray-7);
+.emotion-1[aria-disabled="true"] {
+  color: inherit;
 }
 
-.emotion-3 {
+.emotion-2 {
   bottom: 0;
   left: 0;
   height: 100%;
@@ -1838,42 +1762,42 @@ exports[`<Autocomplete /> sizes size "small" 1`] = `
   box-sizing: border-box;
 }
 
-<div
-    class="emotion-0"
-  >
+<div>
     <button
       aria-autocomplete="list"
       aria-controls="test-id-listbox"
       aria-expanded="false"
       aria-placeholder="true"
-      class="emotion-1"
+      class="emotion-0"
+      id="test-id-toggle-button"
       role="combobox"
       type="button"
-    />
-    <svg
-      aria-disabled="false"
-      aria-hidden="true"
-      class="emotion-2"
-      fill="none"
-      height="24px"
-      viewBox="0 0 24 24"
-      width="24px"
-      xmlns="http://www.w3.org/2000/svg"
     >
-      <path
-        d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
-        fill="currentColor"
+      <svg
+        aria-disabled="false"
+        aria-hidden="true"
+        class="emotion-1"
+        fill="none"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
+          fill="currentColor"
+        />
+      </svg>
+      <input
+        aria-hidden="true"
+        autocomplete="off"
+        class="emotion-2"
+        id="test-id"
+        tabindex="-1"
+        type="text"
+        value=""
       />
-    </svg>
-    <input
-      aria-hidden="true"
-      autocomplete="off"
-      class="emotion-3"
-      id="test-id"
-      tabindex="-1"
-      type="text"
-      value=""
-    />
+    </button>
   </div>
 </DocumentFragment>
 `;
diff --git a/packages/react-components/src/Autocomplete/autocomplete.tsx b/packages/react-components/src/Autocomplete/autocomplete.tsx
index 7ef5ec05..a2ece872 100644
--- a/packages/react-components/src/Autocomplete/autocomplete.tsx
+++ b/packages/react-components/src/Autocomplete/autocomplete.tsx
@@ -43,6 +43,10 @@ Multiple extends boolean | undefined = undefined,
    * The short hint displayed in the `input` before the user enters a value.
    */
   placeholder?: string;
+  /**
+   * The label content.
+   */
+  label?: string;
   /**
    * Text to display when there are no options.
    */
@@ -118,12 +122,6 @@ Multiple extends boolean | undefined = undefined,
 /**
  * Styles.
  */
-const AutocompleteRoot = styled('div')({
-  position: 'relative',
-  display: 'inline-flex',
-  width: '100%',
-});
-
 const AutocompleteField = styled(Typography)<
 TypographyOwnProps & Required<Pick<AutocompleteOwnProps<any, boolean>, 'size' | 'multiple'>>
 >(
@@ -143,6 +141,7 @@ TypographyOwnProps & Required<Pick<AutocompleteOwnProps<any, boolean>, 'size' |
     cursor: 'pointer',
     fontFamily: 'inherit',
     height: 'var(--pv-size-base-8)',
+    position: 'relative',
     ...(props.size === 'small' && {
       height: 'var(--pv-size-base-6)',
     }),
@@ -215,11 +214,10 @@ const AutocompleteArrowIcon = styled(ArrowDropDownIcon)({
   position: 'absolute',
   right: '0px',
   top: 'calc(50% - 12px)',
-  pointerEvents: 'none',
   margin: '0px var(--pv-size-base)',
   color: 'var(--pv-color-gray-10)',
   '&[aria-disabled="true"]': {
-    color: 'var(--pv-color-gray-7)',
+    color: 'inherit',
   },
 });
 
@@ -359,6 +357,12 @@ const AutocompleteCreateNewButton = styled(Button)({
 const AutocompleteError = styled(Typography)({
   marginTop: '2px',
 });
+
+const AutocompleteLabel = styled('label')({
+  label: 'TextField-label',
+  marginBottom: '2px',
+  display: 'inline-block',
+});
 /**
  *
  */
@@ -373,6 +377,7 @@ Multiple extends boolean | undefined = false,
     className,
     size,
     placeholder,
+    label,
     disableSearch,
     disabled = false,
     noOptionsText,
@@ -399,6 +404,7 @@ Multiple extends boolean | undefined = false,
     searchValue,
     groupedOptions,
     getRootProps,
+    getInputLabelProps,
     getInputProps,
     getListboxProps,
     getOptionProps,
@@ -494,22 +500,19 @@ Multiple extends boolean | undefined = false,
   const isValueEmpty = renderedValue === null;
 
   const defaultRenderRoot: AutocompleteOwnProps<T, Multiple>['renderRoot'] = (propsRoot, valueRoot) => (
-    <AutocompleteRoot>
-      <AutocompleteField
-        {...propsRoot}
-        noWrap
-        // @ts-ignore
-        component="button"
-        type="button"
-        variant={size === 'small' ? 'c1' : 'b3'}
-        className={className}
-        aria-invalid={error || undefined}
-        aria-placeholder={isValueEmpty || undefined}
-        multiple={multiple}
-        size={size}
-      >
-        {isValueEmpty ? placeholder : renderedValue}
-      </AutocompleteField>
+    <AutocompleteField
+      {...propsRoot}
+      noWrap
+      // @ts-ignore
+      component="button"
+      type="button"
+      variant={size === 'small' ? 'c1' : 'b3'}
+      aria-invalid={error || undefined}
+      aria-placeholder={isValueEmpty || undefined}
+      multiple={multiple}
+      size={size}
+    >
+      {isValueEmpty ? placeholder : renderedValue}
       <AutocompleteArrowIcon
         aria-disabled={disabled}
         aria-hidden
@@ -527,7 +530,7 @@ Multiple extends boolean | undefined = false,
         readOnly={readOnly}
         onChange={() => { }}
       />
-    </AutocompleteRoot>
+    </AutocompleteField>
   );
 
   const renderOption = renderOptionProp || defaultRenderOption;
@@ -540,8 +543,28 @@ Multiple extends boolean | undefined = false,
   };
 
   return (
-    <>
-      {renderRoot({ ...getRootProps(), disabled }, value, getTagProps)}
+    <div className={className}>
+      {label && (
+        <AutocompleteLabel
+          {...getInputLabelProps()}
+        >
+          <Typography
+            component="span"
+            variant="c2"
+            color="gray-10"
+          >
+            {label}
+          </Typography>
+        </AutocompleteLabel>
+      )}
+      {renderRoot(
+        {
+          ...getRootProps(),
+          disabled,
+        },
+        value,
+        getTagProps,
+      )}
       {error && errorText && (
         <AutocompleteError
           variant="c2"
@@ -563,6 +586,7 @@ Multiple extends boolean | undefined = false,
             borderWidth={1}
           >
             <AutocompleteSearchInput
+              id={otherInputProps.id}
               inputProps={otherInputProps}
               onChange={onChange}
               placeholder="Search"
@@ -633,7 +657,7 @@ Multiple extends boolean | undefined = false,
           </Box>
         )}
       </AutocompletePopover>
-    </>
+    </div>
   );
 };
 
diff --git a/packages/react-components/src/hooks/use_autocomplete.ts b/packages/react-components/src/hooks/use_autocomplete.ts
index 236a2ad6..8ada1741 100644
--- a/packages/react-components/src/hooks/use_autocomplete.ts
+++ b/packages/react-components/src/hooks/use_autocomplete.ts
@@ -124,6 +124,7 @@ Multiple extends boolean | undefined = undefined,
   id: string;
   getOptionProps: (option: T, index: number) => React.HTMLAttributes<HTMLLIElement>;
   getListboxProps: () => React.HTMLAttributes<HTMLUListElement>;
+  getInputLabelProps: () => React.HTMLAttributes<HTMLLabelElement>;
   getRootProps: () => React.HTMLAttributes<HTMLDivElement>;
   getInputProps: () => React.HTMLAttributes<HTMLInputElement>;
   getClearProps: () => React.HTMLAttributes<HTMLDivElement>;
@@ -551,9 +552,14 @@ Multiple extends boolean | undefined = false,
       'aria-expanded': popupOpen,
       'aria-autocomplete': 'list',
       'aria-controls': `${id}-listbox`,
+      id: `${id}-toggle-button`,
       role: 'combobox',
       onClick: handleClick,
     }),
+    getInputLabelProps: () => ({
+      id: `${id}-label`,
+      htmlFor: `${id}-toggle-button`,
+    }),
     getListboxProps: () => ({
       ref: handleListboxRef,
       role: 'listbox',
@@ -561,6 +567,7 @@ Multiple extends boolean | undefined = false,
       id: `${id}-listbox`,
     }),
     getInputProps: () => ({
+      id: `${id}-input`,
       type: 'search',
       value: searchValue,
       autoComplete: 'off',