From 0657fd82bf34c19090142cd775f416b3caf0a5c7 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 11 Jul 2023 16:17:36 -0400
Subject: [PATCH] refactor(location-field): Adjust CSS for hiding dropdown.

---
 __snapshots__/storybook.test.ts.snap  | 1274 ++++++++++++-------------
 packages/location-field/src/styled.ts |    4 +-
 2 files changed, 639 insertions(+), 639 deletions(-)

diff --git a/__snapshots__/storybook.test.ts.snap b/__snapshots__/storybook.test.ts.snap
index 82768ec26..046e76ebf 100644
--- a/__snapshots__/storybook.test.ts.snap
+++ b/__snapshots__/storybook.test.ts.snap
@@ -182303,17 +182303,17 @@ exports[`Storyshots LocationField/Desktop Context Auto Focus With Multiple Contr
 `;
 
 exports[`Storyshots LocationField/Desktop Context Auto Focus With Multiple Controls 2`] = `
-.c4 {
+.c3 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c5 {
+.c4 {
   color: #333;
 }
 
-.c7 {
+.c6 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -182322,16 +182322,16 @@ exports[`Storyshots LocationField/Desktop Context Auto Focus With Multiple Contr
   width: 0;
 }
 
-.c2 {
+.c1 {
   border: none;
   background: none;
 }
 
-.c3 {
+.c2 {
   width: 30px;
 }
 
-.c9 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -182350,7 +182350,7 @@ exports[`Storyshots LocationField/Desktop Context Auto Focus With Multiple Contr
   z-index: 1000000;
 }
 
-.c1 [aria-expanded="false"] ~ .c8 {
+input[aria-expanded="false"] ~ .c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -182359,7 +182359,7 @@ exports[`Storyshots LocationField/Desktop Context Auto Focus With Multiple Contr
   width: 0;
 }
 
-.c6 {
+.c5 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -182393,13 +182393,13 @@ exports[`Storyshots LocationField/Desktop Context Auto Focus With Multiple Contr
       aria-controls="from-listbox"
       aria-expanded={false}
       aria-label="Open the list of location suggestions"
-      className="c1 c2 c3"
+      className="c1 c2"
       onClick={[Function]}
       tabIndex={-1}
     >
       <svg
         aria-hidden="true"
-        className="c4 c5"
+        className="c3 c4"
         fill="currentColor"
         focusable="false"
         height={13}
@@ -182423,7 +182423,7 @@ exports[`Storyshots LocationField/Desktop Context Auto Focus With Multiple Contr
       aria-label="Select from location"
       aria-required={false}
       autoFocus={true}
-      className="c6 from-form-control"
+      className="c5 from-form-control"
       onChange={[Function]}
       onClick={[Function]}
       onKeyDown={[Function]}
@@ -182432,13 +182432,13 @@ exports[`Storyshots LocationField/Desktop Context Auto Focus With Multiple Contr
       value=""
     />
     <span
-      className="c7"
+      className="c6"
       role="status"
     />
     <ul
       aria-hidden={false}
       aria-label="Suggested locations"
-      className="c8 c9"
+      className="c7 c8"
       id="from-listbox"
       role="listbox"
     />
@@ -182490,17 +182490,17 @@ exports[`Storyshots LocationField/Desktop Context Blank 1`] = `
 `;
 
 exports[`Storyshots LocationField/Desktop Context Blank 2`] = `
-.c4 {
+.c3 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c5 {
+.c4 {
   color: #333;
 }
 
-.c7 {
+.c6 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -182509,16 +182509,16 @@ exports[`Storyshots LocationField/Desktop Context Blank 2`] = `
   width: 0;
 }
 
-.c2 {
+.c1 {
   border: none;
   background: none;
 }
 
-.c3 {
+.c2 {
   width: 30px;
 }
 
-.c9 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -182537,7 +182537,7 @@ exports[`Storyshots LocationField/Desktop Context Blank 2`] = `
   z-index: 1000000;
 }
 
-.c1 [aria-expanded="false"] ~ .c8 {
+input[aria-expanded="false"] ~ .c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -182546,7 +182546,7 @@ exports[`Storyshots LocationField/Desktop Context Blank 2`] = `
   width: 0;
 }
 
-.c6 {
+.c5 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -182570,13 +182570,13 @@ exports[`Storyshots LocationField/Desktop Context Blank 2`] = `
     aria-controls="from-listbox"
     aria-expanded={false}
     aria-label="Open the list of location suggestions"
-    className="c1 c2 c3"
+    className="c1 c2"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c4 c5"
+      className="c3 c4"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -182600,7 +182600,7 @@ exports[`Storyshots LocationField/Desktop Context Blank 2`] = `
     aria-label="Select from location"
     aria-required={false}
     autoFocus={false}
-    className="c6 from-form-control"
+    className="c5 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -182609,13 +182609,13 @@ exports[`Storyshots LocationField/Desktop Context Blank 2`] = `
     value=""
   />
   <span
-    className="c7"
+    className="c6"
     role="status"
   />
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c8 c9"
+    className="c7 c8"
     id="from-listbox"
     role="listbox"
   />
@@ -182661,17 +182661,17 @@ exports[`Storyshots LocationField/Desktop Context Geocoder No Results 1`] = `
 `;
 
 exports[`Storyshots LocationField/Desktop Context Geocoder No Results 2`] = `
-.c4 {
+.c3 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c5 {
+.c4 {
   color: #333;
 }
 
-.c7 {
+.c6 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -182680,16 +182680,16 @@ exports[`Storyshots LocationField/Desktop Context Geocoder No Results 2`] = `
   width: 0;
 }
 
-.c2 {
+.c1 {
   border: none;
   background: none;
 }
 
-.c3 {
+.c2 {
   width: 30px;
 }
 
-.c9 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -182708,7 +182708,7 @@ exports[`Storyshots LocationField/Desktop Context Geocoder No Results 2`] = `
   z-index: 1000000;
 }
 
-.c1 [aria-expanded="false"] ~ .c8 {
+input[aria-expanded="false"] ~ .c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -182717,7 +182717,7 @@ exports[`Storyshots LocationField/Desktop Context Geocoder No Results 2`] = `
   width: 0;
 }
 
-.c6 {
+.c5 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -182741,13 +182741,13 @@ exports[`Storyshots LocationField/Desktop Context Geocoder No Results 2`] = `
     aria-controls="from-listbox"
     aria-expanded={false}
     aria-label="Open the list of location suggestions"
-    className="c1 c2 c3"
+    className="c1 c2"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c4 c5"
+      className="c3 c4"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -182771,7 +182771,7 @@ exports[`Storyshots LocationField/Desktop Context Geocoder No Results 2`] = `
     aria-label="Select from location"
     aria-required={false}
     autoFocus={false}
-    className="c6 from-form-control"
+    className="c5 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -182780,13 +182780,13 @@ exports[`Storyshots LocationField/Desktop Context Geocoder No Results 2`] = `
     value=""
   />
   <span
-    className="c7"
+    className="c6"
     role="status"
   />
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c8 c9"
+    className="c7 c8"
     id="from-listbox"
     role="listbox"
   />
@@ -182837,17 +182837,17 @@ exports[`Storyshots LocationField/Desktop Context Geocoder Unreachable 1`] = `
 `;
 
 exports[`Storyshots LocationField/Desktop Context Geocoder Unreachable 2`] = `
-.c4 {
+.c3 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c5 {
+.c4 {
   color: #333;
 }
 
-.c7 {
+.c6 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -182856,16 +182856,16 @@ exports[`Storyshots LocationField/Desktop Context Geocoder Unreachable 2`] = `
   width: 0;
 }
 
-.c2 {
+.c1 {
   border: none;
   background: none;
 }
 
-.c3 {
+.c2 {
   width: 30px;
 }
 
-.c9 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -182884,7 +182884,7 @@ exports[`Storyshots LocationField/Desktop Context Geocoder Unreachable 2`] = `
   z-index: 1000000;
 }
 
-.c1 [aria-expanded="false"] ~ .c8 {
+input[aria-expanded="false"] ~ .c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -182893,7 +182893,7 @@ exports[`Storyshots LocationField/Desktop Context Geocoder Unreachable 2`] = `
   width: 0;
 }
 
-.c6 {
+.c5 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -182917,13 +182917,13 @@ exports[`Storyshots LocationField/Desktop Context Geocoder Unreachable 2`] = `
     aria-controls="from-listbox"
     aria-expanded={false}
     aria-label="Open the list of location suggestions"
-    className="c1 c2 c3"
+    className="c1 c2"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c4 c5"
+      className="c3 c4"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -182947,7 +182947,7 @@ exports[`Storyshots LocationField/Desktop Context Geocoder Unreachable 2`] = `
     aria-label="Select from location"
     aria-required={false}
     autoFocus={false}
-    className="c6 from-form-control"
+    className="c5 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -182956,13 +182956,13 @@ exports[`Storyshots LocationField/Desktop Context Geocoder Unreachable 2`] = `
     value=""
   />
   <span
-    className="c7"
+    className="c6"
     role="status"
   />
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c8 c9"
+    className="c7 c8"
     id="from-listbox"
     role="listbox"
   />
@@ -183008,17 +183008,17 @@ exports[`Storyshots LocationField/Desktop Context Here Geocoder 1`] = `
 `;
 
 exports[`Storyshots LocationField/Desktop Context Here Geocoder 2`] = `
-.c4 {
+.c3 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c5 {
+.c4 {
   color: #333;
 }
 
-.c7 {
+.c6 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -183027,16 +183027,16 @@ exports[`Storyshots LocationField/Desktop Context Here Geocoder 2`] = `
   width: 0;
 }
 
-.c2 {
+.c1 {
   border: none;
   background: none;
 }
 
-.c3 {
+.c2 {
   width: 30px;
 }
 
-.c9 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -183055,7 +183055,7 @@ exports[`Storyshots LocationField/Desktop Context Here Geocoder 2`] = `
   z-index: 1000000;
 }
 
-.c1 [aria-expanded="false"] ~ .c8 {
+input[aria-expanded="false"] ~ .c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -183064,7 +183064,7 @@ exports[`Storyshots LocationField/Desktop Context Here Geocoder 2`] = `
   width: 0;
 }
 
-.c6 {
+.c5 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -183088,13 +183088,13 @@ exports[`Storyshots LocationField/Desktop Context Here Geocoder 2`] = `
     aria-controls="from-listbox"
     aria-expanded={false}
     aria-label="Open the list of location suggestions"
-    className="c1 c2 c3"
+    className="c1 c2"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c4 c5"
+      className="c3 c4"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -183118,7 +183118,7 @@ exports[`Storyshots LocationField/Desktop Context Here Geocoder 2`] = `
     aria-label="Select from location"
     aria-required={false}
     autoFocus={false}
-    className="c6 from-form-control"
+    className="c5 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -183127,13 +183127,13 @@ exports[`Storyshots LocationField/Desktop Context Here Geocoder 2`] = `
     value=""
   />
   <span
-    className="c7"
+    className="c6"
     role="status"
   />
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c8 c9"
+    className="c7 c8"
     id="from-listbox"
     role="listbox"
   />
@@ -183176,17 +183176,17 @@ exports[`Storyshots LocationField/Desktop Context Location Unavailable 1`] = `
 `;
 
 exports[`Storyshots LocationField/Desktop Context Location Unavailable 2`] = `
-.c4 {
+.c3 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c5 {
+.c4 {
   color: #333;
 }
 
-.c7 {
+.c6 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -183195,16 +183195,16 @@ exports[`Storyshots LocationField/Desktop Context Location Unavailable 2`] = `
   width: 0;
 }
 
-.c2 {
+.c1 {
   border: none;
   background: none;
 }
 
-.c3 {
+.c2 {
   width: 30px;
 }
 
-.c9 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -183223,7 +183223,7 @@ exports[`Storyshots LocationField/Desktop Context Location Unavailable 2`] = `
   z-index: 1000000;
 }
 
-.c1 [aria-expanded="false"] ~ .c8 {
+input[aria-expanded="false"] ~ .c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -183232,7 +183232,7 @@ exports[`Storyshots LocationField/Desktop Context Location Unavailable 2`] = `
   width: 0;
 }
 
-.c6 {
+.c5 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -183256,13 +183256,13 @@ exports[`Storyshots LocationField/Desktop Context Location Unavailable 2`] = `
     aria-controls="from-listbox"
     aria-expanded={false}
     aria-label="Open the list of location suggestions"
-    className="c1 c2 c3"
+    className="c1 c2"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c4 c5"
+      className="c3 c4"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -183286,7 +183286,7 @@ exports[`Storyshots LocationField/Desktop Context Location Unavailable 2`] = `
     aria-label="Select from location"
     aria-required={false}
     autoFocus={false}
-    className="c6 from-form-control"
+    className="c5 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -183295,7 +183295,7 @@ exports[`Storyshots LocationField/Desktop Context Location Unavailable 2`] = `
     value=""
   />
   <span
-    className="c7"
+    className="c6"
     role="status"
   >
     otpUi.LocationField.currentLocationUnavailable
@@ -183303,7 +183303,7 @@ exports[`Storyshots LocationField/Desktop Context Location Unavailable 2`] = `
   <ul
     aria-hidden={true}
     aria-label="Suggested locations"
-    className="c8 c9"
+    className="c7 c8"
     id="from-listbox"
     role="listbox"
   />
@@ -183365,17 +183365,17 @@ exports[`Storyshots LocationField/Desktop Context No Auto Focus With Multiple Co
 `;
 
 exports[`Storyshots LocationField/Desktop Context No Auto Focus With Multiple Controls 2`] = `
-.c4 {
+.c3 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c5 {
+.c4 {
   color: #333;
 }
 
-.c7 {
+.c6 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -183384,16 +183384,16 @@ exports[`Storyshots LocationField/Desktop Context No Auto Focus With Multiple Co
   width: 0;
 }
 
-.c2 {
+.c1 {
   border: none;
   background: none;
 }
 
-.c3 {
+.c2 {
   width: 30px;
 }
 
-.c9 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -183412,7 +183412,7 @@ exports[`Storyshots LocationField/Desktop Context No Auto Focus With Multiple Co
   z-index: 1000000;
 }
 
-.c1 [aria-expanded="false"] ~ .c8 {
+input[aria-expanded="false"] ~ .c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -183421,7 +183421,7 @@ exports[`Storyshots LocationField/Desktop Context No Auto Focus With Multiple Co
   width: 0;
 }
 
-.c6 {
+.c5 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -183455,13 +183455,13 @@ exports[`Storyshots LocationField/Desktop Context No Auto Focus With Multiple Co
       aria-controls="from-listbox"
       aria-expanded={false}
       aria-label="Open the list of location suggestions"
-      className="c1 c2 c3"
+      className="c1 c2"
       onClick={[Function]}
       tabIndex={-1}
     >
       <svg
         aria-hidden="true"
-        className="c4 c5"
+        className="c3 c4"
         fill="currentColor"
         focusable="false"
         height={13}
@@ -183485,7 +183485,7 @@ exports[`Storyshots LocationField/Desktop Context No Auto Focus With Multiple Co
       aria-label="Select from location"
       aria-required={false}
       autoFocus={false}
-      className="c6 from-form-control"
+      className="c5 from-form-control"
       onChange={[Function]}
       onClick={[Function]}
       onKeyDown={[Function]}
@@ -183494,13 +183494,13 @@ exports[`Storyshots LocationField/Desktop Context No Auto Focus With Multiple Co
       value=""
     />
     <span
-      className="c7"
+      className="c6"
       role="status"
     />
     <ul
       aria-hidden={false}
       aria-label="Suggested locations"
-      className="c8 c9"
+      className="c7 c8"
       id="from-listbox"
       role="listbox"
     />
@@ -183554,17 +183554,17 @@ exports[`Storyshots LocationField/Desktop Context Required And Invalid State 1`]
 `;
 
 exports[`Storyshots LocationField/Desktop Context Required And Invalid State 2`] = `
-.c4 {
+.c3 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c5 {
+.c4 {
   color: #333;
 }
 
-.c7 {
+.c6 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -183573,16 +183573,16 @@ exports[`Storyshots LocationField/Desktop Context Required And Invalid State 2`]
   width: 0;
 }
 
-.c2 {
+.c1 {
   border: none;
   background: none;
 }
 
-.c3 {
+.c2 {
   width: 30px;
 }
 
-.c9 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -183601,7 +183601,7 @@ exports[`Storyshots LocationField/Desktop Context Required And Invalid State 2`]
   z-index: 1000000;
 }
 
-.c1 [aria-expanded="false"] ~ .c8 {
+input[aria-expanded="false"] ~ .c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -183610,7 +183610,7 @@ exports[`Storyshots LocationField/Desktop Context Required And Invalid State 2`]
   width: 0;
 }
 
-.c6 {
+.c5 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -183634,13 +183634,13 @@ exports[`Storyshots LocationField/Desktop Context Required And Invalid State 2`]
     aria-controls="from-listbox"
     aria-expanded={false}
     aria-label="Open the list of location suggestions"
-    className="c1 c2 c3"
+    className="c1 c2"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c4 c5"
+      className="c3 c4"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -183664,7 +183664,7 @@ exports[`Storyshots LocationField/Desktop Context Required And Invalid State 2`]
     aria-label="Select from location"
     aria-required={true}
     autoFocus={false}
-    className="c6 from-form-control"
+    className="c5 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -183673,13 +183673,13 @@ exports[`Storyshots LocationField/Desktop Context Required And Invalid State 2`]
     value=""
   />
   <span
-    className="c7"
+    className="c6"
     role="status"
   />
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c8 c9"
+    className="c7 c8"
     id="from-listbox"
     role="listbox"
   />
@@ -183736,17 +183736,17 @@ exports[`Storyshots LocationField/Desktop Context Selected Location 1`] = `
 `;
 
 exports[`Storyshots LocationField/Desktop Context Selected Location 2`] = `
-.c4 {
+.c3 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c5 {
+.c4 {
   color: #f44256;
 }
 
-.c8 {
+.c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -183755,22 +183755,22 @@ exports[`Storyshots LocationField/Desktop Context Selected Location 2`] = `
   width: 0;
 }
 
-.c2 {
+.c1 {
   border: none;
   background: none;
 }
 
-.c7 {
+.c6 {
   color: #888;
   cursor: pointer;
   width: 30px;
 }
 
-.c3 {
+.c2 {
   width: 30px;
 }
 
-.c10 {
+.c9 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -183789,7 +183789,7 @@ exports[`Storyshots LocationField/Desktop Context Selected Location 2`] = `
   z-index: 1000000;
 }
 
-.c1 [aria-expanded="false"] ~ .c9 {
+input[aria-expanded="false"] ~ .c8 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -183798,7 +183798,7 @@ exports[`Storyshots LocationField/Desktop Context Selected Location 2`] = `
   width: 0;
 }
 
-.c6 {
+.c5 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -183822,13 +183822,13 @@ exports[`Storyshots LocationField/Desktop Context Selected Location 2`] = `
     aria-controls="to-listbox"
     aria-expanded={false}
     aria-label="Open the list of location suggestions"
-    className="c1 c2 c3"
+    className="c1 c2"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c4 c5"
+      className="c3 c4"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -183852,7 +183852,7 @@ exports[`Storyshots LocationField/Desktop Context Selected Location 2`] = `
     aria-label="to"
     aria-required={false}
     autoFocus={false}
-    className="c6 to-form-control"
+    className="c5 to-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -183862,12 +183862,12 @@ exports[`Storyshots LocationField/Desktop Context Selected Location 2`] = `
   />
   <button
     aria-label="otpUi.LocationField.clearLocation"
-    className="c2 c7"
+    className="c1 c6"
     onClick={[Function]}
   >
     <svg
       aria-hidden="true"
-      className="c4"
+      className="c3"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -183882,13 +183882,13 @@ exports[`Storyshots LocationField/Desktop Context Selected Location 2`] = `
     </svg>
   </button>
   <span
-    className="c8"
+    className="c7"
     role="status"
   />
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c9 c10"
+    className="c8 c9"
     id="to-listbox"
     role="listbox"
   />
@@ -183950,17 +183950,17 @@ exports[`Storyshots LocationField/Desktop Context Selected Location Custom Clear
 `;
 
 exports[`Storyshots LocationField/Desktop Context Selected Location Custom Clear 2`] = `
-.c4 {
+.c3 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c5 {
+.c4 {
   color: #f44256;
 }
 
-.c8 {
+.c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -183969,22 +183969,22 @@ exports[`Storyshots LocationField/Desktop Context Selected Location Custom Clear
   width: 0;
 }
 
-.c2 {
+.c1 {
   border: none;
   background: none;
 }
 
-.c7 {
+.c6 {
   color: #888;
   cursor: pointer;
   width: 30px;
 }
 
-.c3 {
+.c2 {
   width: 30px;
 }
 
-.c10 {
+.c9 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -184003,7 +184003,7 @@ exports[`Storyshots LocationField/Desktop Context Selected Location Custom Clear
   z-index: 1000000;
 }
 
-.c1 [aria-expanded="false"] ~ .c9 {
+input[aria-expanded="false"] ~ .c8 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -184012,7 +184012,7 @@ exports[`Storyshots LocationField/Desktop Context Selected Location Custom Clear
   width: 0;
 }
 
-.c6 {
+.c5 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -184036,13 +184036,13 @@ exports[`Storyshots LocationField/Desktop Context Selected Location Custom Clear
     aria-controls="to-listbox"
     aria-expanded={false}
     aria-label="Open the list of location suggestions"
-    className="c1 c2 c3"
+    className="c1 c2"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c4 c5"
+      className="c3 c4"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -184066,7 +184066,7 @@ exports[`Storyshots LocationField/Desktop Context Selected Location Custom Clear
     aria-label="to"
     aria-required={false}
     autoFocus={false}
-    className="c6 to-form-control"
+    className="c5 to-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -184076,12 +184076,12 @@ exports[`Storyshots LocationField/Desktop Context Selected Location Custom Clear
   />
   <button
     aria-label="otpUi.LocationField.clearLocation"
-    className="c2 c7"
+    className="c1 c6"
     onClick={[Function]}
   >
     <svg
       aria-hidden="true"
-      className="c4"
+      className="c3"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -184096,13 +184096,13 @@ exports[`Storyshots LocationField/Desktop Context Selected Location Custom Clear
     </svg>
   </button>
   <span
-    className="c8"
+    className="c7"
     role="status"
   />
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c9 c10"
+    className="c8 c9"
     id="to-listbox"
     role="listbox"
   />
@@ -184153,17 +184153,17 @@ exports[`Storyshots LocationField/Desktop Context Slow Geocoder 1`] = `
 `;
 
 exports[`Storyshots LocationField/Desktop Context Slow Geocoder 2`] = `
-.c4 {
+.c3 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c5 {
+.c4 {
   color: #333;
 }
 
-.c7 {
+.c6 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -184172,16 +184172,16 @@ exports[`Storyshots LocationField/Desktop Context Slow Geocoder 2`] = `
   width: 0;
 }
 
-.c2 {
+.c1 {
   border: none;
   background: none;
 }
 
-.c3 {
+.c2 {
   width: 30px;
 }
 
-.c9 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -184200,7 +184200,7 @@ exports[`Storyshots LocationField/Desktop Context Slow Geocoder 2`] = `
   z-index: 1000000;
 }
 
-.c1 [aria-expanded="false"] ~ .c8 {
+input[aria-expanded="false"] ~ .c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -184209,7 +184209,7 @@ exports[`Storyshots LocationField/Desktop Context Slow Geocoder 2`] = `
   width: 0;
 }
 
-.c6 {
+.c5 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -184233,13 +184233,13 @@ exports[`Storyshots LocationField/Desktop Context Slow Geocoder 2`] = `
     aria-controls="from-listbox"
     aria-expanded={false}
     aria-label="Open the list of location suggestions"
-    className="c1 c2 c3"
+    className="c1 c2"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c4 c5"
+      className="c3 c4"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -184263,7 +184263,7 @@ exports[`Storyshots LocationField/Desktop Context Slow Geocoder 2`] = `
     aria-label="Select from location"
     aria-required={false}
     autoFocus={false}
-    className="c6 from-form-control"
+    className="c5 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -184272,13 +184272,13 @@ exports[`Storyshots LocationField/Desktop Context Slow Geocoder 2`] = `
     value=""
   />
   <span
-    className="c7"
+    className="c6"
     role="status"
   />
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c8 c9"
+    className="c7 c8"
     id="from-listbox"
     role="listbox"
   />
@@ -184330,17 +184330,17 @@ exports[`Storyshots LocationField/Desktop Context With Bad Api Key Handles Bad A
 `;
 
 exports[`Storyshots LocationField/Desktop Context With Bad Api Key Handles Bad Autocomplete 2`] = `
-.c4 {
+.c3 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c5 {
+.c4 {
   color: #333;
 }
 
-.c7 {
+.c6 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -184349,16 +184349,16 @@ exports[`Storyshots LocationField/Desktop Context With Bad Api Key Handles Bad A
   width: 0;
 }
 
-.c2 {
+.c1 {
   border: none;
   background: none;
 }
 
-.c3 {
+.c2 {
   width: 30px;
 }
 
-.c9 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -184377,7 +184377,7 @@ exports[`Storyshots LocationField/Desktop Context With Bad Api Key Handles Bad A
   z-index: 1000000;
 }
 
-.c1 [aria-expanded="false"] ~ .c8 {
+input[aria-expanded="false"] ~ .c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -184386,7 +184386,7 @@ exports[`Storyshots LocationField/Desktop Context With Bad Api Key Handles Bad A
   width: 0;
 }
 
-.c6 {
+.c5 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -184410,13 +184410,13 @@ exports[`Storyshots LocationField/Desktop Context With Bad Api Key Handles Bad A
     aria-controls="from-listbox"
     aria-expanded={false}
     aria-label="Open the list of location suggestions"
-    className="c1 c2 c3"
+    className="c1 c2"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c4 c5"
+      className="c3 c4"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -184440,7 +184440,7 @@ exports[`Storyshots LocationField/Desktop Context With Bad Api Key Handles Bad A
     aria-label="Select from location"
     aria-required={false}
     autoFocus={false}
-    className="c6 from-form-control"
+    className="c5 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -184449,13 +184449,13 @@ exports[`Storyshots LocationField/Desktop Context With Bad Api Key Handles Bad A
     value=""
   />
   <span
-    className="c7"
+    className="c6"
     role="status"
   />
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c8 c9"
+    className="c7 c8"
     id="from-listbox"
     role="listbox"
   />
@@ -184519,17 +184519,17 @@ exports[`Storyshots LocationField/Desktop Context With Custom Result Colors And
 `;
 
 exports[`Storyshots LocationField/Desktop Context With Custom Result Colors And Icons 2`] = `
-.c4 {
+.c3 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c5 {
+.c4 {
   color: #333;
 }
 
-.c7 {
+.c6 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -184538,16 +184538,16 @@ exports[`Storyshots LocationField/Desktop Context With Custom Result Colors And
   width: 0;
 }
 
-.c2 {
+.c1 {
   border: none;
   background: none;
 }
 
-.c3 {
+.c2 {
   width: 30px;
 }
 
-.c9 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -184566,7 +184566,7 @@ exports[`Storyshots LocationField/Desktop Context With Custom Result Colors And
   z-index: 1000000;
 }
 
-.c1 [aria-expanded="false"] ~ .c8 {
+input[aria-expanded="false"] ~ .c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -184575,7 +184575,7 @@ exports[`Storyshots LocationField/Desktop Context With Custom Result Colors And
   width: 0;
 }
 
-.c6 {
+.c5 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -184599,13 +184599,13 @@ exports[`Storyshots LocationField/Desktop Context With Custom Result Colors And
     aria-controls="from-listbox"
     aria-expanded={false}
     aria-label="Open the list of location suggestions"
-    className="c1 c2 c3"
+    className="c1 c2"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c4 c5"
+      className="c3 c4"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -184629,7 +184629,7 @@ exports[`Storyshots LocationField/Desktop Context With Custom Result Colors And
     aria-label="Select from location"
     aria-required={false}
     autoFocus={false}
-    className="c6 from-form-control"
+    className="c5 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -184638,13 +184638,13 @@ exports[`Storyshots LocationField/Desktop Context With Custom Result Colors And
     value=""
   />
   <span
-    className="c7"
+    className="c6"
     role="status"
   />
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c8 c9"
+    className="c7 c8"
     id="from-listbox"
     role="listbox"
   />
@@ -185262,17 +185262,17 @@ exports[`Storyshots LocationField/Desktop Context With Prefilled Search 1`] = `
 `;
 
 exports[`Storyshots LocationField/Desktop Context With Prefilled Search 2`] = `
-.c4 {
+.c3 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c5 {
+.c4 {
   color: #333;
 }
 
-.c7 {
+.c6 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -185281,16 +185281,16 @@ exports[`Storyshots LocationField/Desktop Context With Prefilled Search 2`] = `
   width: 0;
 }
 
-.c2 {
+.c1 {
   border: none;
   background: none;
 }
 
-.c3 {
+.c2 {
   width: 30px;
 }
 
-.c9 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -185309,7 +185309,7 @@ exports[`Storyshots LocationField/Desktop Context With Prefilled Search 2`] = `
   z-index: 1000000;
 }
 
-.c1 [aria-expanded="false"] ~ .c8 {
+input[aria-expanded="false"] ~ .c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -185318,7 +185318,7 @@ exports[`Storyshots LocationField/Desktop Context With Prefilled Search 2`] = `
   width: 0;
 }
 
-.c6 {
+.c5 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -185342,13 +185342,13 @@ exports[`Storyshots LocationField/Desktop Context With Prefilled Search 2`] = `
     aria-controls="from-listbox"
     aria-expanded={false}
     aria-label="Open the list of location suggestions"
-    className="c1 c2 c3"
+    className="c1 c2"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c4 c5"
+      className="c3 c4"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -185372,7 +185372,7 @@ exports[`Storyshots LocationField/Desktop Context With Prefilled Search 2`] = `
     aria-label="Select from location"
     aria-required={false}
     autoFocus={false}
-    className="c6 from-form-control"
+    className="c5 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -185381,13 +185381,13 @@ exports[`Storyshots LocationField/Desktop Context With Prefilled Search 2`] = `
     value=""
   />
   <span
-    className="c7"
+    className="c6"
     role="status"
   />
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c8 c9"
+    className="c7 c8"
     id="from-listbox"
     role="listbox"
   />
@@ -185470,17 +185470,17 @@ exports[`Storyshots LocationField/Desktop Context With User Settings 1`] = `
 `;
 
 exports[`Storyshots LocationField/Desktop Context With User Settings 2`] = `
-.c4 {
+.c3 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c5 {
+.c4 {
   color: #333;
 }
 
-.c7 {
+.c6 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -185489,16 +185489,16 @@ exports[`Storyshots LocationField/Desktop Context With User Settings 2`] = `
   width: 0;
 }
 
-.c2 {
+.c1 {
   border: none;
   background: none;
 }
 
-.c3 {
+.c2 {
   width: 30px;
 }
 
-.c9 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -185517,7 +185517,7 @@ exports[`Storyshots LocationField/Desktop Context With User Settings 2`] = `
   z-index: 1000000;
 }
 
-.c1 [aria-expanded="false"] ~ .c8 {
+input[aria-expanded="false"] ~ .c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -185526,7 +185526,7 @@ exports[`Storyshots LocationField/Desktop Context With User Settings 2`] = `
   width: 0;
 }
 
-.c6 {
+.c5 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -185550,13 +185550,13 @@ exports[`Storyshots LocationField/Desktop Context With User Settings 2`] = `
     aria-controls="from-listbox"
     aria-expanded={false}
     aria-label="Open the list of location suggestions"
-    className="c1 c2 c3"
+    className="c1 c2"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c4 c5"
+      className="c3 c4"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -185580,7 +185580,7 @@ exports[`Storyshots LocationField/Desktop Context With User Settings 2`] = `
     aria-label="Select from location"
     aria-required={false}
     autoFocus={false}
-    className="c6 from-form-control"
+    className="c5 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -185589,13 +185589,13 @@ exports[`Storyshots LocationField/Desktop Context With User Settings 2`] = `
     value=""
   />
   <span
-    className="c7"
+    className="c6"
     role="status"
   />
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c8 c9"
+    className="c7 c8"
     id="from-listbox"
     role="listbox"
   />
@@ -185646,17 +185646,17 @@ exports[`Storyshots LocationField/Mobile Context Blank 1`] = `
 `;
 
 exports[`Storyshots LocationField/Mobile Context Blank 2`] = `
-.c4 {
+.c3 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c5 {
+.c4 {
   color: #333;
 }
 
-.c7 {
+.c6 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -185665,16 +185665,16 @@ exports[`Storyshots LocationField/Mobile Context Blank 2`] = `
   width: 0;
 }
 
-.c2 {
+.c1 {
   border: none;
   background: none;
 }
 
-.c3 {
+.c2 {
   width: 30px;
 }
 
-.c9 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -185693,7 +185693,7 @@ exports[`Storyshots LocationField/Mobile Context Blank 2`] = `
   z-index: 1000000;
 }
 
-.c1 [aria-expanded="false"] ~ .c8 {
+input[aria-expanded="false"] ~ .c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -185702,7 +185702,7 @@ exports[`Storyshots LocationField/Mobile Context Blank 2`] = `
   width: 0;
 }
 
-.c6 {
+.c5 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -185717,7 +185717,7 @@ exports[`Storyshots LocationField/Mobile Context Blank 2`] = `
   position: relative;
 }
 
-.c12 {
+.c11 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -185730,34 +185730,34 @@ exports[`Storyshots LocationField/Mobile Context Blank 2`] = `
   white-space: nowrap;
 }
 
-.c11:hover {
+.c10:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c11[aria-hidden="true"]:hover {
+.c10[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c13 {
+.c12 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c15 {
+.c14 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c14 {
+.c13 {
   float: left;
 }
 
-.c10 {
+.c9 {
   border: none;
   box-shadow: none;
   display: block;
@@ -185772,13 +185772,13 @@ exports[`Storyshots LocationField/Mobile Context Blank 2`] = `
     aria-controls="from-listbox"
     aria-expanded={true}
     aria-label="Open the list of location suggestions"
-    className="c1 c2 c3"
+    className="c1 c2"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c4 c5"
+      className="c3 c4"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -185802,7 +185802,7 @@ exports[`Storyshots LocationField/Mobile Context Blank 2`] = `
     aria-label="from"
     aria-required={false}
     autoFocus={false}
-    className="c6 from-form-control"
+    className="c5 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -185811,32 +185811,32 @@ exports[`Storyshots LocationField/Mobile Context Blank 2`] = `
     value=""
   />
   <span
-    className="c7"
+    className="c6"
     role="status"
   />
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c8 c9 c10"
+    className="c7 c8 c9"
     id="from-listbox"
     role="listbox"
   >
     <li
-      className="c11"
+      className="c10"
       role="none"
     >
       <a
-        className="c12"
+        className="c11"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c13"
+          className="c12"
         >
           <span
-            className="c14"
+            className="c13"
             style={
               Object {
                 "color": null,
@@ -185845,7 +185845,7 @@ exports[`Storyshots LocationField/Mobile Context Blank 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c4"
+              className="c3"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -185860,7 +185860,7 @@ exports[`Storyshots LocationField/Mobile Context Blank 2`] = `
             </svg>
           </span>
           <span
-            className="c15"
+            className="c14"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -185910,17 +185910,17 @@ exports[`Storyshots LocationField/Mobile Context Geocoder No Results 1`] = `
 `;
 
 exports[`Storyshots LocationField/Mobile Context Geocoder No Results 2`] = `
-.c4 {
+.c3 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c5 {
+.c4 {
   color: #333;
 }
 
-.c7 {
+.c6 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -185929,16 +185929,16 @@ exports[`Storyshots LocationField/Mobile Context Geocoder No Results 2`] = `
   width: 0;
 }
 
-.c2 {
+.c1 {
   border: none;
   background: none;
 }
 
-.c3 {
+.c2 {
   width: 30px;
 }
 
-.c9 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -185957,7 +185957,7 @@ exports[`Storyshots LocationField/Mobile Context Geocoder No Results 2`] = `
   z-index: 1000000;
 }
 
-.c1 [aria-expanded="false"] ~ .c8 {
+input[aria-expanded="false"] ~ .c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -185966,7 +185966,7 @@ exports[`Storyshots LocationField/Mobile Context Geocoder No Results 2`] = `
   width: 0;
 }
 
-.c6 {
+.c5 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -185981,7 +185981,7 @@ exports[`Storyshots LocationField/Mobile Context Geocoder No Results 2`] = `
   position: relative;
 }
 
-.c12 {
+.c11 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -185994,34 +185994,34 @@ exports[`Storyshots LocationField/Mobile Context Geocoder No Results 2`] = `
   white-space: nowrap;
 }
 
-.c11:hover {
+.c10:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c11[aria-hidden="true"]:hover {
+.c10[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c13 {
+.c12 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c15 {
+.c14 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c14 {
+.c13 {
   float: left;
 }
 
-.c10 {
+.c9 {
   border: none;
   box-shadow: none;
   display: block;
@@ -186036,13 +186036,13 @@ exports[`Storyshots LocationField/Mobile Context Geocoder No Results 2`] = `
     aria-controls="from-listbox"
     aria-expanded={true}
     aria-label="Open the list of location suggestions"
-    className="c1 c2 c3"
+    className="c1 c2"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c4 c5"
+      className="c3 c4"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -186066,7 +186066,7 @@ exports[`Storyshots LocationField/Mobile Context Geocoder No Results 2`] = `
     aria-label="from"
     aria-required={false}
     autoFocus={false}
-    className="c6 from-form-control"
+    className="c5 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -186075,32 +186075,32 @@ exports[`Storyshots LocationField/Mobile Context Geocoder No Results 2`] = `
     value=""
   />
   <span
-    className="c7"
+    className="c6"
     role="status"
   />
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c8 c9 c10"
+    className="c7 c8 c9"
     id="from-listbox"
     role="listbox"
   >
     <li
-      className="c11"
+      className="c10"
       role="none"
     >
       <a
-        className="c12"
+        className="c11"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c13"
+          className="c12"
         >
           <span
-            className="c14"
+            className="c13"
             style={
               Object {
                 "color": null,
@@ -186109,7 +186109,7 @@ exports[`Storyshots LocationField/Mobile Context Geocoder No Results 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c4"
+              className="c3"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -186124,7 +186124,7 @@ exports[`Storyshots LocationField/Mobile Context Geocoder No Results 2`] = `
             </svg>
           </span>
           <span
-            className="c15"
+            className="c14"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -186179,17 +186179,17 @@ exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 1`] = `
 `;
 
 exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 2`] = `
-.c4 {
+.c3 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c5 {
+.c4 {
   color: #333;
 }
 
-.c7 {
+.c6 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -186198,16 +186198,16 @@ exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 2`] = `
   width: 0;
 }
 
-.c2 {
+.c1 {
   border: none;
   background: none;
 }
 
-.c3 {
+.c2 {
   width: 30px;
 }
 
-.c9 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -186226,7 +186226,7 @@ exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 2`] = `
   z-index: 1000000;
 }
 
-.c1 [aria-expanded="false"] ~ .c8 {
+input[aria-expanded="false"] ~ .c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -186235,7 +186235,7 @@ exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 2`] = `
   width: 0;
 }
 
-.c6 {
+.c5 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -186250,7 +186250,7 @@ exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 2`] = `
   position: relative;
 }
 
-.c12 {
+.c11 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -186263,34 +186263,34 @@ exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 2`] = `
   white-space: nowrap;
 }
 
-.c11:hover {
+.c10:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c11[aria-hidden="true"]:hover {
+.c10[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c13 {
+.c12 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c15 {
+.c14 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c14 {
+.c13 {
   float: left;
 }
 
-.c10 {
+.c9 {
   border: none;
   box-shadow: none;
   display: block;
@@ -186305,13 +186305,13 @@ exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 2`] = `
     aria-controls="from-listbox"
     aria-expanded={true}
     aria-label="Open the list of location suggestions"
-    className="c1 c2 c3"
+    className="c1 c2"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c4 c5"
+      className="c3 c4"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -186335,7 +186335,7 @@ exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 2`] = `
     aria-label="from"
     aria-required={false}
     autoFocus={false}
-    className="c6 from-form-control"
+    className="c5 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -186344,32 +186344,32 @@ exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 2`] = `
     value=""
   />
   <span
-    className="c7"
+    className="c6"
     role="status"
   />
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c8 c9 c10"
+    className="c7 c8 c9"
     id="from-listbox"
     role="listbox"
   >
     <li
-      className="c11"
+      className="c10"
       role="none"
     >
       <a
-        className="c12"
+        className="c11"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c13"
+          className="c12"
         >
           <span
-            className="c14"
+            className="c13"
             style={
               Object {
                 "color": null,
@@ -186378,7 +186378,7 @@ exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c4"
+              className="c3"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -186393,7 +186393,7 @@ exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 2`] = `
             </svg>
           </span>
           <span
-            className="c15"
+            className="c14"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -186440,17 +186440,17 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 1`] = `
 `;
 
 exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
-.c4 {
+.c3 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c5 {
+.c4 {
   color: #333;
 }
 
-.c7 {
+.c6 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -186459,16 +186459,16 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
   width: 0;
 }
 
-.c2 {
+.c1 {
   border: none;
   background: none;
 }
 
-.c3 {
+.c2 {
   width: 30px;
 }
 
-.c9 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -186487,7 +186487,7 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
   z-index: 1000000;
 }
 
-.c1 [aria-expanded="false"] ~ .c8 {
+input[aria-expanded="false"] ~ .c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -186496,7 +186496,7 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
   width: 0;
 }
 
-.c6 {
+.c5 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -186511,7 +186511,7 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
   position: relative;
 }
 
-.c12 {
+.c11 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -186524,34 +186524,34 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
   white-space: nowrap;
 }
 
-.c11:hover {
+.c10:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c11[aria-hidden="true"]:hover {
+.c10[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c13 {
+.c12 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c15 {
+.c14 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c14 {
+.c13 {
   float: left;
 }
 
-.c10 {
+.c9 {
   border: none;
   box-shadow: none;
   display: block;
@@ -186566,13 +186566,13 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
     aria-controls="from-listbox"
     aria-expanded={true}
     aria-label="Open the list of location suggestions"
-    className="c1 c2 c3"
+    className="c1 c2"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c4 c5"
+      className="c3 c4"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -186596,7 +186596,7 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
     aria-label="from"
     aria-required={false}
     autoFocus={false}
-    className="c6 from-form-control"
+    className="c5 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -186605,7 +186605,7 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
     value=""
   />
   <span
-    className="c7"
+    className="c6"
     role="status"
   >
     otpUi.LocationField.currentLocationUnavailable
@@ -186613,26 +186613,26 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
   <ul
     aria-hidden={true}
     aria-label="Suggested locations"
-    className="c8 c9 c10"
+    className="c7 c8 c9"
     id="from-listbox"
     role="listbox"
   >
     <li
       aria-hidden={true}
-      className="c11"
+      className="c10"
     >
       <a
-        className="c12"
+        className="c11"
         id="otpui-locf-option-0"
         onClick={null}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c13"
+          className="c12"
         >
           <span
-            className="c14"
+            className="c13"
             style={
               Object {
                 "color": null,
@@ -186641,7 +186641,7 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c4"
+              className="c3"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -186656,7 +186656,7 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
             </svg>
           </span>
           <span
-            className="c15"
+            className="c14"
           >
             otpUi.LocationField.currentLocationUnavailable
           </span>
@@ -186725,17 +186725,17 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 1`] = `
 `;
 
 exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
-.c4 {
+.c3 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c5 {
+.c4 {
   color: #f44256;
 }
 
-.c8 {
+.c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -186744,22 +186744,22 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
   width: 0;
 }
 
-.c2 {
+.c1 {
   border: none;
   background: none;
 }
 
-.c7 {
+.c6 {
   color: #888;
   cursor: pointer;
   width: 30px;
 }
 
-.c3 {
+.c2 {
   width: 30px;
 }
 
-.c10 {
+.c9 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -186778,7 +186778,7 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
   z-index: 1000000;
 }
 
-.c1 [aria-expanded="false"] ~ .c9 {
+input[aria-expanded="false"] ~ .c8 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -186787,7 +186787,7 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
   width: 0;
 }
 
-.c6 {
+.c5 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -186802,7 +186802,7 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
   position: relative;
 }
 
-.c13 {
+.c12 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -186815,34 +186815,34 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
   white-space: nowrap;
 }
 
-.c12:hover {
+.c11:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c12[aria-hidden="true"]:hover {
+.c11[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c14 {
+.c13 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c16 {
+.c15 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c15 {
+.c14 {
   float: left;
 }
 
-.c11 {
+.c10 {
   border: none;
   box-shadow: none;
   display: block;
@@ -186857,13 +186857,13 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
     aria-controls="to-listbox"
     aria-expanded={true}
     aria-label="Open the list of location suggestions"
-    className="c1 c2 c3"
+    className="c1 c2"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c4 c5"
+      className="c3 c4"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -186887,7 +186887,7 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
     aria-label="to"
     aria-required={false}
     autoFocus={false}
-    className="c6 to-form-control"
+    className="c5 to-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -186897,12 +186897,12 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
   />
   <button
     aria-label="otpUi.LocationField.clearLocation"
-    className="c2 c7"
+    className="c1 c6"
     onClick={[Function]}
   >
     <svg
       aria-hidden="true"
-      className="c4"
+      className="c3"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -186917,32 +186917,32 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
     </svg>
   </button>
   <span
-    className="c8"
+    className="c7"
     role="status"
   />
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c9 c10 c11"
+    className="c8 c9 c10"
     id="to-listbox"
     role="listbox"
   >
     <li
-      className="c12"
+      className="c11"
       role="none"
     >
       <a
-        className="c13"
+        className="c12"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c14"
+          className="c13"
         >
           <span
-            className="c15"
+            className="c14"
             style={
               Object {
                 "color": null,
@@ -186951,7 +186951,7 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c4"
+              className="c3"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -186966,7 +186966,7 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
             </svg>
           </span>
           <span
-            className="c16"
+            className="c15"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -187033,17 +187033,17 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
 `;
 
 exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear 2`] = `
-.c4 {
+.c3 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c5 {
+.c4 {
   color: #f44256;
 }
 
-.c8 {
+.c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -187052,22 +187052,22 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
   width: 0;
 }
 
-.c2 {
+.c1 {
   border: none;
   background: none;
 }
 
-.c7 {
+.c6 {
   color: #888;
   cursor: pointer;
   width: 30px;
 }
 
-.c3 {
+.c2 {
   width: 30px;
 }
 
-.c10 {
+.c9 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -187086,7 +187086,7 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
   z-index: 1000000;
 }
 
-.c1 [aria-expanded="false"] ~ .c9 {
+input[aria-expanded="false"] ~ .c8 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -187095,7 +187095,7 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
   width: 0;
 }
 
-.c6 {
+.c5 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -187110,7 +187110,7 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
   position: relative;
 }
 
-.c13 {
+.c12 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -187123,34 +187123,34 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
   white-space: nowrap;
 }
 
-.c12:hover {
+.c11:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c12[aria-hidden="true"]:hover {
+.c11[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c14 {
+.c13 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c16 {
+.c15 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c15 {
+.c14 {
   float: left;
 }
 
-.c11 {
+.c10 {
   border: none;
   box-shadow: none;
   display: block;
@@ -187165,13 +187165,13 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
     aria-controls="to-listbox"
     aria-expanded={true}
     aria-label="Open the list of location suggestions"
-    className="c1 c2 c3"
+    className="c1 c2"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c4 c5"
+      className="c3 c4"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -187195,7 +187195,7 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
     aria-label="to"
     aria-required={false}
     autoFocus={false}
-    className="c6 to-form-control"
+    className="c5 to-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -187205,12 +187205,12 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
   />
   <button
     aria-label="otpUi.LocationField.clearLocation"
-    className="c2 c7"
+    className="c1 c6"
     onClick={[Function]}
   >
     <svg
       aria-hidden="true"
-      className="c4"
+      className="c3"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -187225,32 +187225,32 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
     </svg>
   </button>
   <span
-    className="c8"
+    className="c7"
     role="status"
   />
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c9 c10 c11"
+    className="c8 c9 c10"
     id="to-listbox"
     role="listbox"
   >
     <li
-      className="c12"
+      className="c11"
       role="none"
     >
       <a
-        className="c13"
+        className="c12"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c14"
+          className="c13"
         >
           <span
-            className="c15"
+            className="c14"
             style={
               Object {
                 "color": null,
@@ -187259,7 +187259,7 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
           >
             <svg
               aria-hidden="true"
-              className="c4"
+              className="c3"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -187274,7 +187274,7 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
             </svg>
           </span>
           <span
-            className="c16"
+            className="c15"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -187329,17 +187329,17 @@ exports[`Storyshots LocationField/Mobile Context Slow Geocoder 1`] = `
 `;
 
 exports[`Storyshots LocationField/Mobile Context Slow Geocoder 2`] = `
-.c4 {
+.c3 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c5 {
+.c4 {
   color: #333;
 }
 
-.c7 {
+.c6 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -187348,16 +187348,16 @@ exports[`Storyshots LocationField/Mobile Context Slow Geocoder 2`] = `
   width: 0;
 }
 
-.c2 {
+.c1 {
   border: none;
   background: none;
 }
 
-.c3 {
+.c2 {
   width: 30px;
 }
 
-.c9 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -187376,7 +187376,7 @@ exports[`Storyshots LocationField/Mobile Context Slow Geocoder 2`] = `
   z-index: 1000000;
 }
 
-.c1 [aria-expanded="false"] ~ .c8 {
+input[aria-expanded="false"] ~ .c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -187385,7 +187385,7 @@ exports[`Storyshots LocationField/Mobile Context Slow Geocoder 2`] = `
   width: 0;
 }
 
-.c6 {
+.c5 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -187400,7 +187400,7 @@ exports[`Storyshots LocationField/Mobile Context Slow Geocoder 2`] = `
   position: relative;
 }
 
-.c12 {
+.c11 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -187413,34 +187413,34 @@ exports[`Storyshots LocationField/Mobile Context Slow Geocoder 2`] = `
   white-space: nowrap;
 }
 
-.c11:hover {
+.c10:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c11[aria-hidden="true"]:hover {
+.c10[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c13 {
+.c12 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c15 {
+.c14 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c14 {
+.c13 {
   float: left;
 }
 
-.c10 {
+.c9 {
   border: none;
   box-shadow: none;
   display: block;
@@ -187455,13 +187455,13 @@ exports[`Storyshots LocationField/Mobile Context Slow Geocoder 2`] = `
     aria-controls="from-listbox"
     aria-expanded={true}
     aria-label="Open the list of location suggestions"
-    className="c1 c2 c3"
+    className="c1 c2"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c4 c5"
+      className="c3 c4"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -187485,7 +187485,7 @@ exports[`Storyshots LocationField/Mobile Context Slow Geocoder 2`] = `
     aria-label="from"
     aria-required={false}
     autoFocus={false}
-    className="c6 from-form-control"
+    className="c5 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -187494,32 +187494,32 @@ exports[`Storyshots LocationField/Mobile Context Slow Geocoder 2`] = `
     value=""
   />
   <span
-    className="c7"
+    className="c6"
     role="status"
   />
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c8 c9 c10"
+    className="c7 c8 c9"
     id="from-listbox"
     role="listbox"
   >
     <li
-      className="c11"
+      className="c10"
       role="none"
     >
       <a
-        className="c12"
+        className="c11"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c13"
+          className="c12"
         >
           <span
-            className="c14"
+            className="c13"
             style={
               Object {
                 "color": null,
@@ -187528,7 +187528,7 @@ exports[`Storyshots LocationField/Mobile Context Slow Geocoder 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c4"
+              className="c3"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -187543,7 +187543,7 @@ exports[`Storyshots LocationField/Mobile Context Slow Geocoder 2`] = `
             </svg>
           </span>
           <span
-            className="c15"
+            className="c14"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -187605,17 +187605,17 @@ exports[`Storyshots LocationField/Mobile Context Styled 1`] = `
 `;
 
 exports[`Storyshots LocationField/Mobile Context Styled 2`] = `
-.c5 {
+.c4 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c6 {
+.c5 {
   color: #333;
 }
 
-.c8 {
+.c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -187624,16 +187624,16 @@ exports[`Storyshots LocationField/Mobile Context Styled 2`] = `
   width: 0;
 }
 
-.c3 {
+.c2 {
   border: none;
   background: none;
 }
 
-.c4 {
+.c3 {
   width: 30px;
 }
 
-.c10 {
+.c9 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -187652,7 +187652,7 @@ exports[`Storyshots LocationField/Mobile Context Styled 2`] = `
   z-index: 1000000;
 }
 
-.c2 [aria-expanded="false"] ~ .c9 {
+input[aria-expanded="false"] ~ .c8 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -187661,7 +187661,7 @@ exports[`Storyshots LocationField/Mobile Context Styled 2`] = `
   width: 0;
 }
 
-.c7 {
+.c6 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -187676,7 +187676,7 @@ exports[`Storyshots LocationField/Mobile Context Styled 2`] = `
   position: relative;
 }
 
-.c13 {
+.c12 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -187689,40 +187689,40 @@ exports[`Storyshots LocationField/Mobile Context Styled 2`] = `
   white-space: nowrap;
 }
 
-.c12:hover {
+.c11:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c12[aria-hidden="true"]:hover {
+.c11[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c15 {
+.c14 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c17 {
+.c16 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c16 {
+.c15 {
   float: left;
 }
 
-.c11 {
+.c10 {
   border: none;
   box-shadow: none;
   display: block;
 }
 
-.c1 .c14 {
+.c1 .c13 {
   background-color: pink;
   font-size: 24px;
 }
@@ -187736,13 +187736,13 @@ exports[`Storyshots LocationField/Mobile Context Styled 2`] = `
     aria-controls="from-listbox"
     aria-expanded={true}
     aria-label="Open the list of location suggestions"
-    className="c2 c3 c4"
+    className="c2 c3"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c5 c6"
+      className="c4 c5"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -187766,7 +187766,7 @@ exports[`Storyshots LocationField/Mobile Context Styled 2`] = `
     aria-label="from"
     aria-required={false}
     autoFocus={false}
-    className="c7 from-form-control"
+    className="c6 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -187775,32 +187775,32 @@ exports[`Storyshots LocationField/Mobile Context Styled 2`] = `
     value=""
   />
   <span
-    className="c8"
+    className="c7"
     role="status"
   />
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c9 c10 c11"
+    className="c8 c9 c10"
     id="from-listbox"
     role="listbox"
   >
     <li
-      className="c12"
+      className="c11"
       role="none"
     >
       <a
-        className="c13"
+        className="c12"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c14 c15"
+          className="c13 c14"
         >
           <span
-            className="c16"
+            className="c15"
             style={
               Object {
                 "color": null,
@@ -187809,7 +187809,7 @@ exports[`Storyshots LocationField/Mobile Context Styled 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c5"
+              className="c4"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -187824,7 +187824,7 @@ exports[`Storyshots LocationField/Mobile Context Styled 2`] = `
             </svg>
           </span>
           <span
-            className="c17"
+            className="c16"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -187984,13 +187984,13 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 1`] = `
 `;
 
 exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
-.c4 {
+.c3 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c6 {
+.c5 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -187999,20 +187999,20 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
   width: 0;
 }
 
-.c2 {
+.c1 {
   border: none;
   background: none;
 }
 
-.c18 {
+.c17 {
   clear: both;
 }
 
-.c3 {
+.c2 {
   width: 30px;
 }
 
-.c8 {
+.c7 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -188031,7 +188031,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
   z-index: 1000000;
 }
 
-.c1 [aria-expanded="false"] ~ .c7 {
+input[aria-expanded="false"] ~ .c6 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -188040,7 +188040,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
   width: 0;
 }
 
-.c5 {
+.c4 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -188055,7 +188055,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
   position: relative;
 }
 
-.c12 {
+.c11 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -188068,7 +188068,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
   white-space: nowrap;
 }
 
-.c10 {
+.c9 {
   color: #eee;
   background-color: #333;
   font-size: 12px;
@@ -188080,60 +188080,60 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
   white-space: nowrap;
 }
 
-.c11:hover {
+.c10:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c11[aria-hidden="true"]:hover {
+.c10[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c19 {
+.c18 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c21 {
+.c20 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c20 {
+.c19 {
   float: left;
 }
 
-.c17 {
+.c16 {
   background-color: gray;
   color: white;
   padding: 2px 3px 0px;
   margin-right: 5px;
 }
 
-.c9 {
+.c8 {
   border: none;
   box-shadow: none;
   display: block;
 }
 
-.c15 {
+.c14 {
   margin-left: 30px;
 }
 
-.c14 {
+.c13 {
   font-size: 8px;
 }
 
-.c13 {
+.c12 {
   float: left;
   padding-top: 3px;
 }
 
-.c16 {
+.c15 {
   font-size: 9px;
 }
 
@@ -188146,13 +188146,13 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
     aria-controls="to-listbox"
     aria-expanded={true}
     aria-label="Open the list of location suggestions"
-    className="c1 c2 c3"
+    className="c1 c2"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c4"
+      className="c3"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -188176,7 +188176,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
     aria-label="to"
     aria-required={false}
     autoFocus={false}
-    className="c5 to-form-control"
+    className="c4 to-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -188185,38 +188185,38 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
     value=""
   />
   <span
-    className="c6"
+    className="c5"
     role="status"
   />
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c7 c8 c9"
+    className="c6 c7 c8"
     id="to-listbox"
     role="listbox"
   >
     <h2
-      className="c10"
+      className="c9"
     >
       otpUi.LocationField.nearby
     </h2>
     <li
-      className="c11"
+      className="c10"
       role="none"
     >
       <a
-        className="c12"
+        className="c11"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c13"
+          className="c12"
         >
           <svg
             aria-hidden="true"
-            className="c4"
+            className="c3"
             fill="currentColor"
             focusable="false"
             height={13}
@@ -188230,13 +188230,13 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             />
           </svg>
           <span
-            className="c14"
+            className="c13"
           >
             404 ft
           </span>
         </span>
         <span
-          className="c15"
+          className="c14"
         >
           <span
             className="styled__StopName-sc-xahsq2-20"
@@ -188247,37 +188247,37 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             )
           </span>
           <span
-            className="c16"
+            className="c15"
           >
             <span
-              className="c17"
+              className="c16"
             >
               1
             </span>
           </span>
         </span>
         <div
-          className="c18"
+          className="c17"
         />
       </a>
     </li>
     <li
-      className="c11"
+      className="c10"
       role="none"
     >
       <a
-        className="c12"
+        className="c11"
         id="otpui-locf-option-1"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c13"
+          className="c12"
         >
           <svg
             aria-hidden="true"
-            className="c4"
+            className="c3"
             fill="currentColor"
             focusable="false"
             height={13}
@@ -188291,13 +188291,13 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             />
           </svg>
           <span
-            className="c14"
+            className="c13"
           >
             0.2 mi
           </span>
         </span>
         <span
-          className="c15"
+          className="c14"
         >
           <span
             className="styled__StopName-sc-xahsq2-20"
@@ -188308,41 +188308,41 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             )
           </span>
           <span
-            className="c16"
+            className="c15"
           >
             <span
-              className="c17"
+              className="c16"
             >
               2
             </span>
           </span>
         </span>
         <div
-          className="c18"
+          className="c17"
         />
       </a>
     </li>
     <h2
-      className="c10"
+      className="c9"
     >
       otpUi.LocationField.recentlySearched
     </h2>
     <li
-      className="c11"
+      className="c10"
       role="none"
     >
       <a
-        className="c12"
+        className="c11"
         id="otpui-locf-option-2"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c19"
+          className="c18"
         >
           <span
-            className="c20"
+            className="c19"
             style={
               Object {
                 "color": null,
@@ -188351,7 +188351,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c4"
+              className="c3"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -188366,7 +188366,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             </svg>
           </span>
           <span
-            className="c21"
+            className="c20"
           >
             123 Main St
             
@@ -188375,26 +188375,26 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
       </a>
     </li>
     <h2
-      className="c10"
+      className="c9"
     >
       otpUi.LocationField.myPlaces
     </h2>
     <li
-      className="c11"
+      className="c10"
       role="none"
     >
       <a
-        className="c12"
+        className="c11"
         id="otpui-locf-option-3"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c19"
+          className="c18"
         >
           <span
-            className="c20"
+            className="c19"
             style={
               Object {
                 "color": null,
@@ -188403,7 +188403,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c4"
+              className="c3"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -188418,7 +188418,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             </svg>
           </span>
           <span
-            className="c21"
+            className="c20"
           >
             otpUi.LocationField.parenthesisFormat
           </span>
@@ -188426,21 +188426,21 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
       </a>
     </li>
     <li
-      className="c11"
+      className="c10"
       role="none"
     >
       <a
-        className="c12"
+        className="c11"
         id="otpui-locf-option-4"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c19"
+          className="c18"
         >
           <span
-            className="c20"
+            className="c19"
             style={
               Object {
                 "color": null,
@@ -188449,7 +188449,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c4"
+              className="c3"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -188464,7 +188464,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             </svg>
           </span>
           <span
-            className="c21"
+            className="c20"
           >
             otpUi.LocationField.parenthesisFormat
           </span>
@@ -188472,21 +188472,21 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
       </a>
     </li>
     <li
-      className="c11"
+      className="c10"
       role="none"
     >
       <a
-        className="c12"
+        className="c11"
         id="otpui-locf-option-5"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c19"
+          className="c18"
         >
           <span
-            className="c20"
+            className="c19"
             style={
               Object {
                 "color": null,
@@ -188495,7 +188495,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c4"
+              className="c3"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -188510,7 +188510,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             </svg>
           </span>
           <span
-            className="c21"
+            className="c20"
           >
             Coffee Roasters Shop, 55 Coffee Street
           </span>
@@ -188518,21 +188518,21 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
       </a>
     </li>
     <li
-      className="c11"
+      className="c10"
       role="none"
     >
       <a
-        className="c12"
+        className="c11"
         id="otpui-locf-option-6"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c19"
+          className="c18"
         >
           <span
-            className="c20"
+            className="c19"
             style={
               Object {
                 "color": null,
@@ -188541,7 +188541,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c4"
+              className="c3"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -188556,7 +188556,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             </svg>
           </span>
           <span
-            className="c21"
+            className="c20"
           >
             123 Main St
           </span>
@@ -188564,21 +188564,21 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
       </a>
     </li>
     <li
-      className="c11"
+      className="c10"
       role="none"
     >
       <a
-        className="c12"
+        className="c11"
         id="otpui-locf-option-7"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c19"
+          className="c18"
         >
           <span
-            className="c20"
+            className="c19"
             style={
               Object {
                 "color": null,
@@ -188587,7 +188587,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c4"
+              className="c3"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -188602,7 +188602,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             </svg>
           </span>
           <span
-            className="c21"
+            className="c20"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -188698,17 +188698,17 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 1`] = `
 `;
 
 exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
-.c4 {
+.c3 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c5 {
+.c4 {
   color: #f44256;
 }
 
-.c7 {
+.c6 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -188717,20 +188717,20 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
   width: 0;
 }
 
-.c2 {
+.c1 {
   border: none;
   background: none;
 }
 
-.c19 {
+.c18 {
   clear: both;
 }
 
-.c3 {
+.c2 {
   width: 30px;
 }
 
-.c9 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -188749,7 +188749,7 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
   z-index: 1000000;
 }
 
-.c1 [aria-expanded="false"] ~ .c8 {
+input[aria-expanded="false"] ~ .c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -188758,7 +188758,7 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
   width: 0;
 }
 
-.c6 {
+.c5 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -188773,7 +188773,7 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
   position: relative;
 }
 
-.c13 {
+.c12 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -188786,7 +188786,7 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
   white-space: nowrap;
 }
 
-.c11 {
+.c10 {
   color: #eee;
   background-color: #333;
   font-size: 12px;
@@ -188798,60 +188798,60 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
   white-space: nowrap;
 }
 
-.c12:hover {
+.c11:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c12[aria-hidden="true"]:hover {
+.c11[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c20 {
+.c19 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c22 {
+.c21 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c21 {
+.c20 {
   float: left;
 }
 
-.c18 {
+.c17 {
   background-color: gray;
   color: white;
   padding: 2px 3px 0px;
   margin-right: 5px;
 }
 
-.c10 {
+.c9 {
   border: none;
   box-shadow: none;
   display: block;
 }
 
-.c16 {
+.c15 {
   margin-left: 30px;
 }
 
-.c15 {
+.c14 {
   font-size: 8px;
 }
 
-.c14 {
+.c13 {
   float: left;
   padding-top: 3px;
 }
 
-.c17 {
+.c16 {
   font-size: 9px;
 }
 
@@ -188864,13 +188864,13 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
     aria-controls="to-listbox"
     aria-expanded={true}
     aria-label="Open the list of location suggestions"
-    className="c1 c2 c3"
+    className="c1 c2"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c4 c5"
+      className="c3 c4"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -188894,7 +188894,7 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
     aria-label="to"
     aria-required={false}
     autoFocus={false}
-    className="c6 to-form-control"
+    className="c5 to-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -188903,38 +188903,38 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
     value=""
   />
   <span
-    className="c7"
+    className="c6"
     role="status"
   />
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c8 c9 c10"
+    className="c7 c8 c9"
     id="to-listbox"
     role="listbox"
   >
     <h2
-      className="c11"
+      className="c10"
     >
       otpUi.LocationField.nearby
     </h2>
     <li
-      className="c12"
+      className="c11"
       role="none"
     >
       <a
-        className="c13"
+        className="c12"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c14"
+          className="c13"
         >
           <svg
             aria-hidden="true"
-            className="c4"
+            className="c3"
             fill="currentColor"
             focusable="false"
             height={13}
@@ -188948,13 +188948,13 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
             />
           </svg>
           <span
-            className="c15"
+            className="c14"
           >
             404 ft
           </span>
         </span>
         <span
-          className="c16"
+          className="c15"
         >
           <span
             className="styled__StopName-sc-xahsq2-20"
@@ -188965,37 +188965,37 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
             )
           </span>
           <span
-            className="c17"
+            className="c16"
           >
             <span
-              className="c18"
+              className="c17"
             >
               1
             </span>
           </span>
         </span>
         <div
-          className="c19"
+          className="c18"
         />
       </a>
     </li>
     <li
-      className="c12"
+      className="c11"
       role="none"
     >
       <a
-        className="c13"
+        className="c12"
         id="otpui-locf-option-1"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c14"
+          className="c13"
         >
           <svg
             aria-hidden="true"
-            className="c4"
+            className="c3"
             fill="currentColor"
             focusable="false"
             height={13}
@@ -189009,13 +189009,13 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
             />
           </svg>
           <span
-            className="c15"
+            className="c14"
           >
             0.2 mi
           </span>
         </span>
         <span
-          className="c16"
+          className="c15"
         >
           <span
             className="styled__StopName-sc-xahsq2-20"
@@ -189026,36 +189026,36 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
             )
           </span>
           <span
-            className="c17"
+            className="c16"
           >
             <span
-              className="c18"
+              className="c17"
             >
               2
             </span>
           </span>
         </span>
         <div
-          className="c19"
+          className="c18"
         />
       </a>
     </li>
     <li
-      className="c12"
+      className="c11"
       role="none"
     >
       <a
-        className="c13"
+        className="c12"
         id="otpui-locf-option-2"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c20"
+          className="c19"
         >
           <span
-            className="c21"
+            className="c20"
             style={
               Object {
                 "color": null,
@@ -189064,7 +189064,7 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c4"
+              className="c3"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -189079,7 +189079,7 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
             </svg>
           </span>
           <span
-            className="c22"
+            className="c21"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -189150,17 +189150,17 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 1`] = `
 `;
 
 exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
-.c4 {
+.c3 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c5 {
+.c4 {
   color: #f44256;
 }
 
-.c7 {
+.c6 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -189169,16 +189169,16 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
   width: 0;
 }
 
-.c2 {
+.c1 {
   border: none;
   background: none;
 }
 
-.c3 {
+.c2 {
   width: 30px;
 }
 
-.c9 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -189197,7 +189197,7 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
   z-index: 1000000;
 }
 
-.c1 [aria-expanded="false"] ~ .c8 {
+input[aria-expanded="false"] ~ .c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -189206,7 +189206,7 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
   width: 0;
 }
 
-.c6 {
+.c5 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -189221,7 +189221,7 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
   position: relative;
 }
 
-.c13 {
+.c12 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -189234,7 +189234,7 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
   white-space: nowrap;
 }
 
-.c11 {
+.c10 {
   color: #eee;
   background-color: #333;
   font-size: 12px;
@@ -189246,34 +189246,34 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
   white-space: nowrap;
 }
 
-.c12:hover {
+.c11:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c12[aria-hidden="true"]:hover {
+.c11[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c14 {
+.c13 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c16 {
+.c15 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c15 {
+.c14 {
   float: left;
 }
 
-.c10 {
+.c9 {
   border: none;
   box-shadow: none;
   display: block;
@@ -189288,13 +189288,13 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
     aria-controls="to-listbox"
     aria-expanded={true}
     aria-label="Open the list of location suggestions"
-    className="c1 c2 c3"
+    className="c1 c2"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c4 c5"
+      className="c3 c4"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -189318,7 +189318,7 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
     aria-label="to"
     aria-required={false}
     autoFocus={false}
-    className="c6 to-form-control"
+    className="c5 to-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -189327,37 +189327,37 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
     value=""
   />
   <span
-    className="c7"
+    className="c6"
     role="status"
   />
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c8 c9 c10"
+    className="c7 c8 c9"
     id="to-listbox"
     role="listbox"
   >
     <h2
-      className="c11"
+      className="c10"
     >
       otpUi.LocationField.recentlySearched
     </h2>
     <li
-      className="c12"
+      className="c11"
       role="none"
     >
       <a
-        className="c13"
+        className="c12"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c14"
+          className="c13"
         >
           <span
-            className="c15"
+            className="c14"
             style={
               Object {
                 "color": null,
@@ -189366,7 +189366,7 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c4"
+              className="c3"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -189381,7 +189381,7 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
             </svg>
           </span>
           <span
-            className="c16"
+            className="c15"
           >
             123 Main St
             
@@ -189390,21 +189390,21 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
       </a>
     </li>
     <li
-      className="c12"
+      className="c11"
       role="none"
     >
       <a
-        className="c13"
+        className="c12"
         id="otpui-locf-option-1"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c14"
+          className="c13"
         >
           <span
-            className="c15"
+            className="c14"
             style={
               Object {
                 "color": null,
@@ -189413,7 +189413,7 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c4"
+              className="c3"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -189428,7 +189428,7 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
             </svg>
           </span>
           <span
-            className="c16"
+            className="c15"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -189522,17 +189522,17 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 1`] = `
 `;
 
 exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
-.c4 {
+.c3 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c5 {
+.c4 {
   color: #f44256;
 }
 
-.c7 {
+.c6 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -189541,16 +189541,16 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
   width: 0;
 }
 
-.c2 {
+.c1 {
   border: none;
   background: none;
 }
 
-.c3 {
+.c2 {
   width: 30px;
 }
 
-.c9 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -189569,7 +189569,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
   z-index: 1000000;
 }
 
-.c1 [aria-expanded="false"] ~ .c8 {
+input[aria-expanded="false"] ~ .c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -189578,7 +189578,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
   width: 0;
 }
 
-.c6 {
+.c5 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -189593,7 +189593,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
   position: relative;
 }
 
-.c13 {
+.c12 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -189606,7 +189606,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
   white-space: nowrap;
 }
 
-.c11 {
+.c10 {
   color: #eee;
   background-color: #333;
   font-size: 12px;
@@ -189618,34 +189618,34 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
   white-space: nowrap;
 }
 
-.c12:hover {
+.c11:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c12[aria-hidden="true"]:hover {
+.c11[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c14 {
+.c13 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c16 {
+.c15 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c15 {
+.c14 {
   float: left;
 }
 
-.c10 {
+.c9 {
   border: none;
   box-shadow: none;
   display: block;
@@ -189660,13 +189660,13 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
     aria-controls="to-listbox"
     aria-expanded={true}
     aria-label="Open the list of location suggestions"
-    className="c1 c2 c3"
+    className="c1 c2"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c4 c5"
+      className="c3 c4"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -189690,7 +189690,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
     aria-label="to"
     aria-required={false}
     autoFocus={false}
-    className="c6 to-form-control"
+    className="c5 to-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -189699,37 +189699,37 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
     value=""
   />
   <span
-    className="c7"
+    className="c6"
     role="status"
   />
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c8 c9 c10"
+    className="c7 c8 c9"
     id="to-listbox"
     role="listbox"
   >
     <h2
-      className="c11"
+      className="c10"
     >
       otpUi.LocationField.myPlaces
     </h2>
     <li
-      className="c12"
+      className="c11"
       role="none"
     >
       <a
-        className="c13"
+        className="c12"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c14"
+          className="c13"
         >
           <span
-            className="c15"
+            className="c14"
             style={
               Object {
                 "color": null,
@@ -189738,7 +189738,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c4"
+              className="c3"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -189753,7 +189753,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
             </svg>
           </span>
           <span
-            className="c16"
+            className="c15"
           >
             otpUi.LocationField.parenthesisFormat
           </span>
@@ -189761,21 +189761,21 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
       </a>
     </li>
     <li
-      className="c12"
+      className="c11"
       role="none"
     >
       <a
-        className="c13"
+        className="c12"
         id="otpui-locf-option-1"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c14"
+          className="c13"
         >
           <span
-            className="c15"
+            className="c14"
             style={
               Object {
                 "color": null,
@@ -189784,7 +189784,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c4"
+              className="c3"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -189799,7 +189799,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
             </svg>
           </span>
           <span
-            className="c16"
+            className="c15"
           >
             otpUi.LocationField.parenthesisFormat
           </span>
@@ -189807,21 +189807,21 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
       </a>
     </li>
     <li
-      className="c12"
+      className="c11"
       role="none"
     >
       <a
-        className="c13"
+        className="c12"
         id="otpui-locf-option-2"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c14"
+          className="c13"
         >
           <span
-            className="c15"
+            className="c14"
             style={
               Object {
                 "color": null,
@@ -189830,7 +189830,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c4"
+              className="c3"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -189845,7 +189845,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
             </svg>
           </span>
           <span
-            className="c16"
+            className="c15"
           >
             Coffee Roasters Shop, 55 Coffee Street
           </span>
@@ -189853,21 +189853,21 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
       </a>
     </li>
     <li
-      className="c12"
+      className="c11"
       role="none"
     >
       <a
-        className="c13"
+        className="c12"
         id="otpui-locf-option-3"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c14"
+          className="c13"
         >
           <span
-            className="c15"
+            className="c14"
             style={
               Object {
                 "color": null,
@@ -189876,7 +189876,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c4"
+              className="c3"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -189891,7 +189891,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
             </svg>
           </span>
           <span
-            className="c16"
+            className="c15"
           >
             123 Main St
           </span>
@@ -189899,21 +189899,21 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
       </a>
     </li>
     <li
-      className="c12"
+      className="c11"
       role="none"
     >
       <a
-        className="c13"
+        className="c12"
         id="otpui-locf-option-4"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c14"
+          className="c13"
         >
           <span
-            className="c15"
+            className="c14"
             style={
               Object {
                 "color": null,
@@ -189922,7 +189922,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c4"
+              className="c3"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -189937,7 +189937,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
             </svg>
           </span>
           <span
-            className="c16"
+            className="c15"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
diff --git a/packages/location-field/src/styled.ts b/packages/location-field/src/styled.ts
index 1fb4a41a5..88756f657 100644
--- a/packages/location-field/src/styled.ts
+++ b/packages/location-field/src/styled.ts
@@ -53,8 +53,8 @@ export const MenuItemList = styled.ul.attrs({
   /* this is an annoyingly high number, but is needed to be on top of some otp-rr components */
   z-index: 1000000;
 
-  /* If the associated button is not in an expanded state, hide the list. */
-  ${DropdownButton} [aria-expanded="false"] ~ & {
+  /* If the associated input is not in an expanded state, hide the list. */
+  input[aria-expanded="false"] ~ & {
     ${hiddenCss}
   }
 `;