diff --git a/__snapshots__/storybook.test.ts.snap b/__snapshots__/storybook.test.ts.snap
index 75a2850e6..5a66041e9 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`] = `
-.c3 {
+.c4 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c4 {
+.c5 {
   color: #333;
 }
 
-.c6 {
+.c7 {
   -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;
 }
 
-.c1 {
+.c2 {
   border: none;
   background: none;
 }
 
-.c2 {
+.c3 {
   width: 30px;
 }
 
-.c7 {
+.c9 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -182350,7 +182350,16 @@ exports[`Storyshots LocationField/Desktop Context Auto Focus With Multiple Contr
   z-index: 1000000;
 }
 
-.c5 {
+.c1 [aria-expanded="false"] ~ .c8 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
+.c6 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -182384,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"
+      className="c1 c2 c3"
       onClick={[Function]}
       tabIndex={-1}
     >
       <svg
         aria-hidden="true"
-        className="c3 c4"
+        className="c4 c5"
         fill="currentColor"
         focusable="false"
         height={13}
@@ -182414,7 +182423,7 @@ exports[`Storyshots LocationField/Desktop Context Auto Focus With Multiple Contr
       aria-label="Select from location"
       aria-required={false}
       autoFocus={true}
-      className="c5 from-form-control"
+      className="c6 from-form-control"
       onChange={[Function]}
       onClick={[Function]}
       onKeyDown={[Function]}
@@ -182423,12 +182432,12 @@ exports[`Storyshots LocationField/Desktop Context Auto Focus With Multiple Contr
       value=""
     />
     <span
-      className="c6"
+      className="c7"
       role="status"
     />
     <ul
       aria-label="Suggested locations"
-      className="c7"
+      className="c8 c9"
       id="from-listbox"
       role="listbox"
     />
@@ -182480,17 +182489,17 @@ exports[`Storyshots LocationField/Desktop Context Blank 1`] = `
 `;
 
 exports[`Storyshots LocationField/Desktop Context Blank 2`] = `
-.c3 {
+.c4 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c4 {
+.c5 {
   color: #333;
 }
 
-.c6 {
+.c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -182499,16 +182508,16 @@ exports[`Storyshots LocationField/Desktop Context Blank 2`] = `
   width: 0;
 }
 
-.c1 {
+.c2 {
   border: none;
   background: none;
 }
 
-.c2 {
+.c3 {
   width: 30px;
 }
 
-.c7 {
+.c9 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -182527,7 +182536,16 @@ exports[`Storyshots LocationField/Desktop Context Blank 2`] = `
   z-index: 1000000;
 }
 
-.c5 {
+.c1 [aria-expanded="false"] ~ .c8 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
+.c6 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -182551,13 +182569,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"
+    className="c1 c2 c3"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c3 c4"
+      className="c4 c5"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -182581,7 +182599,7 @@ exports[`Storyshots LocationField/Desktop Context Blank 2`] = `
     aria-label="Select from location"
     aria-required={false}
     autoFocus={false}
-    className="c5 from-form-control"
+    className="c6 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -182590,12 +182608,12 @@ exports[`Storyshots LocationField/Desktop Context Blank 2`] = `
     value=""
   />
   <span
-    className="c6"
+    className="c7"
     role="status"
   />
   <ul
     aria-label="Suggested locations"
-    className="c7"
+    className="c8 c9"
     id="from-listbox"
     role="listbox"
   />
@@ -182641,17 +182659,17 @@ exports[`Storyshots LocationField/Desktop Context Geocoder No Results 1`] = `
 `;
 
 exports[`Storyshots LocationField/Desktop Context Geocoder No Results 2`] = `
-.c3 {
+.c4 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c4 {
+.c5 {
   color: #333;
 }
 
-.c6 {
+.c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -182660,16 +182678,16 @@ exports[`Storyshots LocationField/Desktop Context Geocoder No Results 2`] = `
   width: 0;
 }
 
-.c1 {
+.c2 {
   border: none;
   background: none;
 }
 
-.c2 {
+.c3 {
   width: 30px;
 }
 
-.c7 {
+.c9 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -182688,7 +182706,16 @@ exports[`Storyshots LocationField/Desktop Context Geocoder No Results 2`] = `
   z-index: 1000000;
 }
 
-.c5 {
+.c1 [aria-expanded="false"] ~ .c8 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
+.c6 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -182712,13 +182739,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"
+    className="c1 c2 c3"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c3 c4"
+      className="c4 c5"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -182742,7 +182769,7 @@ exports[`Storyshots LocationField/Desktop Context Geocoder No Results 2`] = `
     aria-label="Select from location"
     aria-required={false}
     autoFocus={false}
-    className="c5 from-form-control"
+    className="c6 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -182751,12 +182778,12 @@ exports[`Storyshots LocationField/Desktop Context Geocoder No Results 2`] = `
     value=""
   />
   <span
-    className="c6"
+    className="c7"
     role="status"
   />
   <ul
     aria-label="Suggested locations"
-    className="c7"
+    className="c8 c9"
     id="from-listbox"
     role="listbox"
   />
@@ -182807,17 +182834,17 @@ exports[`Storyshots LocationField/Desktop Context Geocoder Unreachable 1`] = `
 `;
 
 exports[`Storyshots LocationField/Desktop Context Geocoder Unreachable 2`] = `
-.c3 {
+.c4 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c4 {
+.c5 {
   color: #333;
 }
 
-.c6 {
+.c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -182826,16 +182853,16 @@ exports[`Storyshots LocationField/Desktop Context Geocoder Unreachable 2`] = `
   width: 0;
 }
 
-.c1 {
+.c2 {
   border: none;
   background: none;
 }
 
-.c2 {
+.c3 {
   width: 30px;
 }
 
-.c7 {
+.c9 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -182854,7 +182881,16 @@ exports[`Storyshots LocationField/Desktop Context Geocoder Unreachable 2`] = `
   z-index: 1000000;
 }
 
-.c5 {
+.c1 [aria-expanded="false"] ~ .c8 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
+.c6 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -182878,13 +182914,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"
+    className="c1 c2 c3"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c3 c4"
+      className="c4 c5"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -182908,7 +182944,7 @@ exports[`Storyshots LocationField/Desktop Context Geocoder Unreachable 2`] = `
     aria-label="Select from location"
     aria-required={false}
     autoFocus={false}
-    className="c5 from-form-control"
+    className="c6 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -182917,12 +182953,12 @@ exports[`Storyshots LocationField/Desktop Context Geocoder Unreachable 2`] = `
     value=""
   />
   <span
-    className="c6"
+    className="c7"
     role="status"
   />
   <ul
     aria-label="Suggested locations"
-    className="c7"
+    className="c8 c9"
     id="from-listbox"
     role="listbox"
   />
@@ -182968,17 +183004,17 @@ exports[`Storyshots LocationField/Desktop Context Here Geocoder 1`] = `
 `;
 
 exports[`Storyshots LocationField/Desktop Context Here Geocoder 2`] = `
-.c3 {
+.c4 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c4 {
+.c5 {
   color: #333;
 }
 
-.c6 {
+.c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -182987,16 +183023,16 @@ exports[`Storyshots LocationField/Desktop Context Here Geocoder 2`] = `
   width: 0;
 }
 
-.c1 {
+.c2 {
   border: none;
   background: none;
 }
 
-.c2 {
+.c3 {
   width: 30px;
 }
 
-.c7 {
+.c9 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -183015,7 +183051,16 @@ exports[`Storyshots LocationField/Desktop Context Here Geocoder 2`] = `
   z-index: 1000000;
 }
 
-.c5 {
+.c1 [aria-expanded="false"] ~ .c8 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
+.c6 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -183039,13 +183084,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"
+    className="c1 c2 c3"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c3 c4"
+      className="c4 c5"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -183069,7 +183114,7 @@ exports[`Storyshots LocationField/Desktop Context Here Geocoder 2`] = `
     aria-label="Select from location"
     aria-required={false}
     autoFocus={false}
-    className="c5 from-form-control"
+    className="c6 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -183078,12 +183123,12 @@ exports[`Storyshots LocationField/Desktop Context Here Geocoder 2`] = `
     value=""
   />
   <span
-    className="c6"
+    className="c7"
     role="status"
   />
   <ul
     aria-label="Suggested locations"
-    className="c7"
+    className="c8 c9"
     id="from-listbox"
     role="listbox"
   />
@@ -183126,17 +183171,17 @@ exports[`Storyshots LocationField/Desktop Context Location Unavailable 1`] = `
 `;
 
 exports[`Storyshots LocationField/Desktop Context Location Unavailable 2`] = `
-.c3 {
+.c4 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c4 {
+.c5 {
   color: #333;
 }
 
-.c6 {
+.c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -183145,16 +183190,16 @@ exports[`Storyshots LocationField/Desktop Context Location Unavailable 2`] = `
   width: 0;
 }
 
-.c1 {
+.c2 {
   border: none;
   background: none;
 }
 
-.c2 {
+.c3 {
   width: 30px;
 }
 
-.c7 {
+.c9 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -183173,7 +183218,16 @@ exports[`Storyshots LocationField/Desktop Context Location Unavailable 2`] = `
   z-index: 1000000;
 }
 
-.c5 {
+.c1 [aria-expanded="false"] ~ .c8 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
+.c6 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -183197,13 +183251,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"
+    className="c1 c2 c3"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c3 c4"
+      className="c4 c5"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -183227,7 +183281,7 @@ exports[`Storyshots LocationField/Desktop Context Location Unavailable 2`] = `
     aria-label="Select from location"
     aria-required={false}
     autoFocus={false}
-    className="c5 from-form-control"
+    className="c6 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -183236,14 +183290,14 @@ exports[`Storyshots LocationField/Desktop Context Location Unavailable 2`] = `
     value=""
   />
   <span
-    className="c6"
+    className="c7"
     role="status"
   >
     otpUi.LocationField.currentLocationUnavailable
   </span>
   <ul
     aria-label="Suggested locations"
-    className="c7"
+    className="c8 c9"
     id="from-listbox"
     role="listbox"
   />
@@ -183305,17 +183359,17 @@ exports[`Storyshots LocationField/Desktop Context No Auto Focus With Multiple Co
 `;
 
 exports[`Storyshots LocationField/Desktop Context No Auto Focus With Multiple Controls 2`] = `
-.c3 {
+.c4 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c4 {
+.c5 {
   color: #333;
 }
 
-.c6 {
+.c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -183324,16 +183378,16 @@ exports[`Storyshots LocationField/Desktop Context No Auto Focus With Multiple Co
   width: 0;
 }
 
-.c1 {
+.c2 {
   border: none;
   background: none;
 }
 
-.c2 {
+.c3 {
   width: 30px;
 }
 
-.c7 {
+.c9 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -183352,7 +183406,16 @@ exports[`Storyshots LocationField/Desktop Context No Auto Focus With Multiple Co
   z-index: 1000000;
 }
 
-.c5 {
+.c1 [aria-expanded="false"] ~ .c8 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
+.c6 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -183386,13 +183449,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"
+      className="c1 c2 c3"
       onClick={[Function]}
       tabIndex={-1}
     >
       <svg
         aria-hidden="true"
-        className="c3 c4"
+        className="c4 c5"
         fill="currentColor"
         focusable="false"
         height={13}
@@ -183416,7 +183479,7 @@ exports[`Storyshots LocationField/Desktop Context No Auto Focus With Multiple Co
       aria-label="Select from location"
       aria-required={false}
       autoFocus={false}
-      className="c5 from-form-control"
+      className="c6 from-form-control"
       onChange={[Function]}
       onClick={[Function]}
       onKeyDown={[Function]}
@@ -183425,12 +183488,12 @@ exports[`Storyshots LocationField/Desktop Context No Auto Focus With Multiple Co
       value=""
     />
     <span
-      className="c6"
+      className="c7"
       role="status"
     />
     <ul
       aria-label="Suggested locations"
-      className="c7"
+      className="c8 c9"
       id="from-listbox"
       role="listbox"
     />
@@ -183484,17 +183547,17 @@ exports[`Storyshots LocationField/Desktop Context Required And Invalid State 1`]
 `;
 
 exports[`Storyshots LocationField/Desktop Context Required And Invalid State 2`] = `
-.c3 {
+.c4 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c4 {
+.c5 {
   color: #333;
 }
 
-.c6 {
+.c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -183503,16 +183566,16 @@ exports[`Storyshots LocationField/Desktop Context Required And Invalid State 2`]
   width: 0;
 }
 
-.c1 {
+.c2 {
   border: none;
   background: none;
 }
 
-.c2 {
+.c3 {
   width: 30px;
 }
 
-.c7 {
+.c9 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -183531,7 +183594,16 @@ exports[`Storyshots LocationField/Desktop Context Required And Invalid State 2`]
   z-index: 1000000;
 }
 
-.c5 {
+.c1 [aria-expanded="false"] ~ .c8 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
+.c6 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -183555,13 +183627,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"
+    className="c1 c2 c3"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c3 c4"
+      className="c4 c5"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -183585,7 +183657,7 @@ exports[`Storyshots LocationField/Desktop Context Required And Invalid State 2`]
     aria-label="Select from location"
     aria-required={true}
     autoFocus={false}
-    className="c5 from-form-control"
+    className="c6 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -183594,12 +183666,12 @@ exports[`Storyshots LocationField/Desktop Context Required And Invalid State 2`]
     value=""
   />
   <span
-    className="c6"
+    className="c7"
     role="status"
   />
   <ul
     aria-label="Suggested locations"
-    className="c7"
+    className="c8 c9"
     id="from-listbox"
     role="listbox"
   />
@@ -183656,17 +183728,17 @@ exports[`Storyshots LocationField/Desktop Context Selected Location 1`] = `
 `;
 
 exports[`Storyshots LocationField/Desktop Context Selected Location 2`] = `
-.c3 {
+.c4 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c4 {
+.c5 {
   color: #f44256;
 }
 
-.c7 {
+.c8 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -183675,22 +183747,22 @@ exports[`Storyshots LocationField/Desktop Context Selected Location 2`] = `
   width: 0;
 }
 
-.c1 {
+.c2 {
   border: none;
   background: none;
 }
 
-.c6 {
+.c7 {
   color: #888;
   cursor: pointer;
   width: 30px;
 }
 
-.c2 {
+.c3 {
   width: 30px;
 }
 
-.c8 {
+.c10 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -183709,7 +183781,16 @@ exports[`Storyshots LocationField/Desktop Context Selected Location 2`] = `
   z-index: 1000000;
 }
 
-.c5 {
+.c1 [aria-expanded="false"] ~ .c9 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
+.c6 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -183733,13 +183814,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"
+    className="c1 c2 c3"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c3 c4"
+      className="c4 c5"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -183763,7 +183844,7 @@ exports[`Storyshots LocationField/Desktop Context Selected Location 2`] = `
     aria-label="to"
     aria-required={false}
     autoFocus={false}
-    className="c5 to-form-control"
+    className="c6 to-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -183773,12 +183854,12 @@ exports[`Storyshots LocationField/Desktop Context Selected Location 2`] = `
   />
   <button
     aria-label="otpUi.LocationField.clearLocation"
-    className="c1 c6"
+    className="c2 c7"
     onClick={[Function]}
   >
     <svg
       aria-hidden="true"
-      className="c3"
+      className="c4"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -183793,12 +183874,12 @@ exports[`Storyshots LocationField/Desktop Context Selected Location 2`] = `
     </svg>
   </button>
   <span
-    className="c7"
+    className="c8"
     role="status"
   />
   <ul
     aria-label="Suggested locations"
-    className="c8"
+    className="c9 c10"
     id="to-listbox"
     role="listbox"
   />
@@ -183860,17 +183941,17 @@ exports[`Storyshots LocationField/Desktop Context Selected Location Custom Clear
 `;
 
 exports[`Storyshots LocationField/Desktop Context Selected Location Custom Clear 2`] = `
-.c3 {
+.c4 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c4 {
+.c5 {
   color: #f44256;
 }
 
-.c7 {
+.c8 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -183879,22 +183960,22 @@ exports[`Storyshots LocationField/Desktop Context Selected Location Custom Clear
   width: 0;
 }
 
-.c1 {
+.c2 {
   border: none;
   background: none;
 }
 
-.c6 {
+.c7 {
   color: #888;
   cursor: pointer;
   width: 30px;
 }
 
-.c2 {
+.c3 {
   width: 30px;
 }
 
-.c8 {
+.c10 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -183913,7 +183994,16 @@ exports[`Storyshots LocationField/Desktop Context Selected Location Custom Clear
   z-index: 1000000;
 }
 
-.c5 {
+.c1 [aria-expanded="false"] ~ .c9 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
+.c6 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -183937,13 +184027,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"
+    className="c1 c2 c3"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c3 c4"
+      className="c4 c5"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -183967,7 +184057,7 @@ exports[`Storyshots LocationField/Desktop Context Selected Location Custom Clear
     aria-label="to"
     aria-required={false}
     autoFocus={false}
-    className="c5 to-form-control"
+    className="c6 to-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -183977,12 +184067,12 @@ exports[`Storyshots LocationField/Desktop Context Selected Location Custom Clear
   />
   <button
     aria-label="otpUi.LocationField.clearLocation"
-    className="c1 c6"
+    className="c2 c7"
     onClick={[Function]}
   >
     <svg
       aria-hidden="true"
-      className="c3"
+      className="c4"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -183997,12 +184087,12 @@ exports[`Storyshots LocationField/Desktop Context Selected Location Custom Clear
     </svg>
   </button>
   <span
-    className="c7"
+    className="c8"
     role="status"
   />
   <ul
     aria-label="Suggested locations"
-    className="c8"
+    className="c9 c10"
     id="to-listbox"
     role="listbox"
   />
@@ -184053,17 +184143,17 @@ exports[`Storyshots LocationField/Desktop Context Slow Geocoder 1`] = `
 `;
 
 exports[`Storyshots LocationField/Desktop Context Slow Geocoder 2`] = `
-.c3 {
+.c4 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c4 {
+.c5 {
   color: #333;
 }
 
-.c6 {
+.c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -184072,16 +184162,16 @@ exports[`Storyshots LocationField/Desktop Context Slow Geocoder 2`] = `
   width: 0;
 }
 
-.c1 {
+.c2 {
   border: none;
   background: none;
 }
 
-.c2 {
+.c3 {
   width: 30px;
 }
 
-.c7 {
+.c9 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -184100,7 +184190,16 @@ exports[`Storyshots LocationField/Desktop Context Slow Geocoder 2`] = `
   z-index: 1000000;
 }
 
-.c5 {
+.c1 [aria-expanded="false"] ~ .c8 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
+.c6 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -184124,13 +184223,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"
+    className="c1 c2 c3"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c3 c4"
+      className="c4 c5"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -184154,7 +184253,7 @@ exports[`Storyshots LocationField/Desktop Context Slow Geocoder 2`] = `
     aria-label="Select from location"
     aria-required={false}
     autoFocus={false}
-    className="c5 from-form-control"
+    className="c6 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -184163,12 +184262,12 @@ exports[`Storyshots LocationField/Desktop Context Slow Geocoder 2`] = `
     value=""
   />
   <span
-    className="c6"
+    className="c7"
     role="status"
   />
   <ul
     aria-label="Suggested locations"
-    className="c7"
+    className="c8 c9"
     id="from-listbox"
     role="listbox"
   />
@@ -184220,17 +184319,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`] = `
-.c3 {
+.c4 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c4 {
+.c5 {
   color: #333;
 }
 
-.c6 {
+.c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -184239,16 +184338,16 @@ exports[`Storyshots LocationField/Desktop Context With Bad Api Key Handles Bad A
   width: 0;
 }
 
-.c1 {
+.c2 {
   border: none;
   background: none;
 }
 
-.c2 {
+.c3 {
   width: 30px;
 }
 
-.c7 {
+.c9 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -184267,7 +184366,16 @@ exports[`Storyshots LocationField/Desktop Context With Bad Api Key Handles Bad A
   z-index: 1000000;
 }
 
-.c5 {
+.c1 [aria-expanded="false"] ~ .c8 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
+.c6 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -184291,13 +184399,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"
+    className="c1 c2 c3"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c3 c4"
+      className="c4 c5"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -184321,7 +184429,7 @@ exports[`Storyshots LocationField/Desktop Context With Bad Api Key Handles Bad A
     aria-label="Select from location"
     aria-required={false}
     autoFocus={false}
-    className="c5 from-form-control"
+    className="c6 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -184330,12 +184438,12 @@ exports[`Storyshots LocationField/Desktop Context With Bad Api Key Handles Bad A
     value=""
   />
   <span
-    className="c6"
+    className="c7"
     role="status"
   />
   <ul
     aria-label="Suggested locations"
-    className="c7"
+    className="c8 c9"
     id="from-listbox"
     role="listbox"
   />
@@ -184399,17 +184507,17 @@ exports[`Storyshots LocationField/Desktop Context With Custom Result Colors And
 `;
 
 exports[`Storyshots LocationField/Desktop Context With Custom Result Colors And Icons 2`] = `
-.c3 {
+.c4 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c4 {
+.c5 {
   color: #333;
 }
 
-.c6 {
+.c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -184418,16 +184526,16 @@ exports[`Storyshots LocationField/Desktop Context With Custom Result Colors And
   width: 0;
 }
 
-.c1 {
+.c2 {
   border: none;
   background: none;
 }
 
-.c2 {
+.c3 {
   width: 30px;
 }
 
-.c7 {
+.c9 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -184446,7 +184554,16 @@ exports[`Storyshots LocationField/Desktop Context With Custom Result Colors And
   z-index: 1000000;
 }
 
-.c5 {
+.c1 [aria-expanded="false"] ~ .c8 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
+.c6 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -184470,13 +184587,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"
+    className="c1 c2 c3"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c3 c4"
+      className="c4 c5"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -184500,7 +184617,7 @@ exports[`Storyshots LocationField/Desktop Context With Custom Result Colors And
     aria-label="Select from location"
     aria-required={false}
     autoFocus={false}
-    className="c5 from-form-control"
+    className="c6 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -184509,12 +184626,12 @@ exports[`Storyshots LocationField/Desktop Context With Custom Result Colors And
     value=""
   />
   <span
-    className="c6"
+    className="c7"
     role="status"
   />
   <ul
     aria-label="Suggested locations"
-    className="c7"
+    className="c8 c9"
     id="from-listbox"
     role="listbox"
   />
@@ -185132,17 +185249,17 @@ exports[`Storyshots LocationField/Desktop Context With Prefilled Search 1`] = `
 `;
 
 exports[`Storyshots LocationField/Desktop Context With Prefilled Search 2`] = `
-.c3 {
+.c4 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c4 {
+.c5 {
   color: #333;
 }
 
-.c6 {
+.c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -185151,16 +185268,16 @@ exports[`Storyshots LocationField/Desktop Context With Prefilled Search 2`] = `
   width: 0;
 }
 
-.c1 {
+.c2 {
   border: none;
   background: none;
 }
 
-.c2 {
+.c3 {
   width: 30px;
 }
 
-.c7 {
+.c9 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -185179,7 +185296,16 @@ exports[`Storyshots LocationField/Desktop Context With Prefilled Search 2`] = `
   z-index: 1000000;
 }
 
-.c5 {
+.c1 [aria-expanded="false"] ~ .c8 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
+.c6 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -185203,13 +185329,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"
+    className="c1 c2 c3"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c3 c4"
+      className="c4 c5"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -185233,7 +185359,7 @@ exports[`Storyshots LocationField/Desktop Context With Prefilled Search 2`] = `
     aria-label="Select from location"
     aria-required={false}
     autoFocus={false}
-    className="c5 from-form-control"
+    className="c6 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -185242,12 +185368,12 @@ exports[`Storyshots LocationField/Desktop Context With Prefilled Search 2`] = `
     value=""
   />
   <span
-    className="c6"
+    className="c7"
     role="status"
   />
   <ul
     aria-label="Suggested locations"
-    className="c7"
+    className="c8 c9"
     id="from-listbox"
     role="listbox"
   />
@@ -185330,17 +185456,17 @@ exports[`Storyshots LocationField/Desktop Context With User Settings 1`] = `
 `;
 
 exports[`Storyshots LocationField/Desktop Context With User Settings 2`] = `
-.c3 {
+.c4 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c4 {
+.c5 {
   color: #333;
 }
 
-.c6 {
+.c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -185349,16 +185475,16 @@ exports[`Storyshots LocationField/Desktop Context With User Settings 2`] = `
   width: 0;
 }
 
-.c1 {
+.c2 {
   border: none;
   background: none;
 }
 
-.c2 {
+.c3 {
   width: 30px;
 }
 
-.c7 {
+.c9 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -185377,7 +185503,16 @@ exports[`Storyshots LocationField/Desktop Context With User Settings 2`] = `
   z-index: 1000000;
 }
 
-.c5 {
+.c1 [aria-expanded="false"] ~ .c8 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
+.c6 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -185401,13 +185536,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"
+    className="c1 c2 c3"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c3 c4"
+      className="c4 c5"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -185431,7 +185566,7 @@ exports[`Storyshots LocationField/Desktop Context With User Settings 2`] = `
     aria-label="Select from location"
     aria-required={false}
     autoFocus={false}
-    className="c5 from-form-control"
+    className="c6 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -185440,12 +185575,12 @@ exports[`Storyshots LocationField/Desktop Context With User Settings 2`] = `
     value=""
   />
   <span
-    className="c6"
+    className="c7"
     role="status"
   />
   <ul
     aria-label="Suggested locations"
-    className="c7"
+    className="c8 c9"
     id="from-listbox"
     role="listbox"
   />
@@ -185496,17 +185631,17 @@ exports[`Storyshots LocationField/Mobile Context Blank 1`] = `
 `;
 
 exports[`Storyshots LocationField/Mobile Context Blank 2`] = `
-.c3 {
+.c4 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c4 {
+.c5 {
   color: #333;
 }
 
-.c6 {
+.c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -185515,16 +185650,16 @@ exports[`Storyshots LocationField/Mobile Context Blank 2`] = `
   width: 0;
 }
 
-.c1 {
+.c2 {
   border: none;
   background: none;
 }
 
-.c2 {
+.c3 {
   width: 30px;
 }
 
-.c7 {
+.c9 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -185543,7 +185678,16 @@ exports[`Storyshots LocationField/Mobile Context Blank 2`] = `
   z-index: 1000000;
 }
 
-.c5 {
+.c1 [aria-expanded="false"] ~ .c8 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
+.c6 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -185558,7 +185702,7 @@ exports[`Storyshots LocationField/Mobile Context Blank 2`] = `
   position: relative;
 }
 
-.c10 {
+.c12 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -185571,34 +185715,34 @@ exports[`Storyshots LocationField/Mobile Context Blank 2`] = `
   white-space: nowrap;
 }
 
-.c9:hover {
+.c11:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c9[aria-hidden="true"]:hover {
+.c11[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c11 {
+.c13 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c13 {
+.c15 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c12 {
+.c14 {
   float: left;
 }
 
-.c8 {
+.c10 {
   border: none;
   box-shadow: none;
   display: block;
@@ -185613,13 +185757,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"
+    className="c1 c2 c3"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c3 c4"
+      className="c4 c5"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -185637,13 +185781,13 @@ exports[`Storyshots LocationField/Mobile Context Blank 2`] = `
     aria-activedescendant={null}
     aria-autocomplete="list"
     aria-controls="from-listbox"
-    aria-expanded={false}
+    aria-expanded={true}
     aria-haspopup="listbox"
     aria-invalid={false}
     aria-label="from"
     aria-required={false}
     autoFocus={false}
-    className="c5 from-form-control"
+    className="c6 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -185652,31 +185796,31 @@ exports[`Storyshots LocationField/Mobile Context Blank 2`] = `
     value=""
   />
   <span
-    className="c6"
+    className="c7"
     role="status"
   />
   <ul
     aria-label="Suggested locations"
-    className="c7 c8"
+    className="c8 c9 c10"
     id="from-listbox"
     role="listbox"
   >
     <li
-      className="c9"
+      className="c11"
       role="none"
     >
       <a
-        className="c10"
+        className="c12"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c11"
+          className="c13"
         >
           <span
-            className="c12"
+            className="c14"
             style={
               Object {
                 "color": null,
@@ -185685,7 +185829,7 @@ exports[`Storyshots LocationField/Mobile Context Blank 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c3"
+              className="c4"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -185700,7 +185844,7 @@ exports[`Storyshots LocationField/Mobile Context Blank 2`] = `
             </svg>
           </span>
           <span
-            className="c13"
+            className="c15"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -185750,17 +185894,17 @@ exports[`Storyshots LocationField/Mobile Context Geocoder No Results 1`] = `
 `;
 
 exports[`Storyshots LocationField/Mobile Context Geocoder No Results 2`] = `
-.c3 {
+.c4 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c4 {
+.c5 {
   color: #333;
 }
 
-.c6 {
+.c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -185769,16 +185913,16 @@ exports[`Storyshots LocationField/Mobile Context Geocoder No Results 2`] = `
   width: 0;
 }
 
-.c1 {
+.c2 {
   border: none;
   background: none;
 }
 
-.c2 {
+.c3 {
   width: 30px;
 }
 
-.c7 {
+.c9 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -185797,7 +185941,16 @@ exports[`Storyshots LocationField/Mobile Context Geocoder No Results 2`] = `
   z-index: 1000000;
 }
 
-.c5 {
+.c1 [aria-expanded="false"] ~ .c8 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
+.c6 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -185812,7 +185965,7 @@ exports[`Storyshots LocationField/Mobile Context Geocoder No Results 2`] = `
   position: relative;
 }
 
-.c10 {
+.c12 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -185825,34 +185978,34 @@ exports[`Storyshots LocationField/Mobile Context Geocoder No Results 2`] = `
   white-space: nowrap;
 }
 
-.c9:hover {
+.c11:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c9[aria-hidden="true"]:hover {
+.c11[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c11 {
+.c13 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c13 {
+.c15 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c12 {
+.c14 {
   float: left;
 }
 
-.c8 {
+.c10 {
   border: none;
   box-shadow: none;
   display: block;
@@ -185867,13 +186020,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"
+    className="c1 c2 c3"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c3 c4"
+      className="c4 c5"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -185891,13 +186044,13 @@ exports[`Storyshots LocationField/Mobile Context Geocoder No Results 2`] = `
     aria-activedescendant={null}
     aria-autocomplete="list"
     aria-controls="from-listbox"
-    aria-expanded={false}
+    aria-expanded={true}
     aria-haspopup="listbox"
     aria-invalid={false}
     aria-label="from"
     aria-required={false}
     autoFocus={false}
-    className="c5 from-form-control"
+    className="c6 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -185906,31 +186059,31 @@ exports[`Storyshots LocationField/Mobile Context Geocoder No Results 2`] = `
     value=""
   />
   <span
-    className="c6"
+    className="c7"
     role="status"
   />
   <ul
     aria-label="Suggested locations"
-    className="c7 c8"
+    className="c8 c9 c10"
     id="from-listbox"
     role="listbox"
   >
     <li
-      className="c9"
+      className="c11"
       role="none"
     >
       <a
-        className="c10"
+        className="c12"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c11"
+          className="c13"
         >
           <span
-            className="c12"
+            className="c14"
             style={
               Object {
                 "color": null,
@@ -185939,7 +186092,7 @@ exports[`Storyshots LocationField/Mobile Context Geocoder No Results 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c3"
+              className="c4"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -185954,7 +186107,7 @@ exports[`Storyshots LocationField/Mobile Context Geocoder No Results 2`] = `
             </svg>
           </span>
           <span
-            className="c13"
+            className="c15"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -186009,17 +186162,17 @@ exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 1`] = `
 `;
 
 exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 2`] = `
-.c3 {
+.c4 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c4 {
+.c5 {
   color: #333;
 }
 
-.c6 {
+.c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -186028,16 +186181,16 @@ exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 2`] = `
   width: 0;
 }
 
-.c1 {
+.c2 {
   border: none;
   background: none;
 }
 
-.c2 {
+.c3 {
   width: 30px;
 }
 
-.c7 {
+.c9 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -186056,7 +186209,16 @@ exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 2`] = `
   z-index: 1000000;
 }
 
-.c5 {
+.c1 [aria-expanded="false"] ~ .c8 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
+.c6 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -186071,7 +186233,7 @@ exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 2`] = `
   position: relative;
 }
 
-.c10 {
+.c12 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -186084,34 +186246,34 @@ exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 2`] = `
   white-space: nowrap;
 }
 
-.c9:hover {
+.c11:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c9[aria-hidden="true"]:hover {
+.c11[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c11 {
+.c13 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c13 {
+.c15 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c12 {
+.c14 {
   float: left;
 }
 
-.c8 {
+.c10 {
   border: none;
   box-shadow: none;
   display: block;
@@ -186126,13 +186288,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"
+    className="c1 c2 c3"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c3 c4"
+      className="c4 c5"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -186150,13 +186312,13 @@ exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 2`] = `
     aria-activedescendant={null}
     aria-autocomplete="list"
     aria-controls="from-listbox"
-    aria-expanded={false}
+    aria-expanded={true}
     aria-haspopup="listbox"
     aria-invalid={false}
     aria-label="from"
     aria-required={false}
     autoFocus={false}
-    className="c5 from-form-control"
+    className="c6 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -186165,31 +186327,31 @@ exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 2`] = `
     value=""
   />
   <span
-    className="c6"
+    className="c7"
     role="status"
   />
   <ul
     aria-label="Suggested locations"
-    className="c7 c8"
+    className="c8 c9 c10"
     id="from-listbox"
     role="listbox"
   >
     <li
-      className="c9"
+      className="c11"
       role="none"
     >
       <a
-        className="c10"
+        className="c12"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c11"
+          className="c13"
         >
           <span
-            className="c12"
+            className="c14"
             style={
               Object {
                 "color": null,
@@ -186198,7 +186360,7 @@ exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c3"
+              className="c4"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -186213,7 +186375,7 @@ exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 2`] = `
             </svg>
           </span>
           <span
-            className="c13"
+            className="c15"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -186260,17 +186422,17 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 1`] = `
 `;
 
 exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
-.c3 {
+.c4 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c4 {
+.c5 {
   color: #333;
 }
 
-.c6 {
+.c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -186279,16 +186441,16 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
   width: 0;
 }
 
-.c1 {
+.c2 {
   border: none;
   background: none;
 }
 
-.c2 {
+.c3 {
   width: 30px;
 }
 
-.c7 {
+.c9 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -186307,7 +186469,16 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
   z-index: 1000000;
 }
 
-.c5 {
+.c1 [aria-expanded="false"] ~ .c8 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
+.c6 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -186322,7 +186493,7 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
   position: relative;
 }
 
-.c10 {
+.c12 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -186335,34 +186506,34 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
   white-space: nowrap;
 }
 
-.c9:hover {
+.c11:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c9[aria-hidden="true"]:hover {
+.c11[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c11 {
+.c13 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c13 {
+.c15 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c12 {
+.c14 {
   float: left;
 }
 
-.c8 {
+.c10 {
   border: none;
   box-shadow: none;
   display: block;
@@ -186377,13 +186548,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"
+    className="c1 c2 c3"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c3 c4"
+      className="c4 c5"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -186401,13 +186572,13 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
     aria-activedescendant={null}
     aria-autocomplete="list"
     aria-controls="from-listbox"
-    aria-expanded={false}
+    aria-expanded={true}
     aria-haspopup="listbox"
     aria-invalid={false}
     aria-label="from"
     aria-required={false}
     autoFocus={false}
-    className="c5 from-form-control"
+    className="c6 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -186416,33 +186587,33 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
     value=""
   />
   <span
-    className="c6"
+    className="c7"
     role="status"
   >
     otpUi.LocationField.currentLocationUnavailable
   </span>
   <ul
     aria-label="Suggested locations"
-    className="c7 c8"
+    className="c8 c9 c10"
     id="from-listbox"
     role="listbox"
   >
     <li
       aria-hidden={true}
-      className="c9"
+      className="c11"
     >
       <a
-        className="c10"
+        className="c12"
         id="otpui-locf-option-0"
         onClick={null}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c11"
+          className="c13"
         >
           <span
-            className="c12"
+            className="c14"
             style={
               Object {
                 "color": null,
@@ -186451,7 +186622,7 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c3"
+              className="c4"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -186466,7 +186637,7 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
             </svg>
           </span>
           <span
-            className="c13"
+            className="c15"
           >
             otpUi.LocationField.currentLocationUnavailable
           </span>
@@ -186535,17 +186706,17 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 1`] = `
 `;
 
 exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
-.c3 {
+.c4 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c4 {
+.c5 {
   color: #f44256;
 }
 
-.c7 {
+.c8 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -186554,22 +186725,22 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
   width: 0;
 }
 
-.c1 {
+.c2 {
   border: none;
   background: none;
 }
 
-.c6 {
+.c7 {
   color: #888;
   cursor: pointer;
   width: 30px;
 }
 
-.c2 {
+.c3 {
   width: 30px;
 }
 
-.c8 {
+.c10 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -186588,7 +186759,16 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
   z-index: 1000000;
 }
 
-.c5 {
+.c1 [aria-expanded="false"] ~ .c9 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
+.c6 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -186603,7 +186783,7 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
   position: relative;
 }
 
-.c11 {
+.c13 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -186616,34 +186796,34 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
   white-space: nowrap;
 }
 
-.c10:hover {
+.c12:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c10[aria-hidden="true"]:hover {
+.c12[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c12 {
+.c14 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c14 {
+.c16 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c13 {
+.c15 {
   float: left;
 }
 
-.c9 {
+.c11 {
   border: none;
   box-shadow: none;
   display: block;
@@ -186658,13 +186838,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"
+    className="c1 c2 c3"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c3 c4"
+      className="c4 c5"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -186682,13 +186862,13 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
     aria-activedescendant={null}
     aria-autocomplete="list"
     aria-controls="to-listbox"
-    aria-expanded={false}
+    aria-expanded={true}
     aria-haspopup="listbox"
     aria-invalid={false}
     aria-label="to"
     aria-required={false}
     autoFocus={false}
-    className="c5 to-form-control"
+    className="c6 to-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -186698,12 +186878,12 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
   />
   <button
     aria-label="otpUi.LocationField.clearLocation"
-    className="c1 c6"
+    className="c2 c7"
     onClick={[Function]}
   >
     <svg
       aria-hidden="true"
-      className="c3"
+      className="c4"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -186718,31 +186898,31 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
     </svg>
   </button>
   <span
-    className="c7"
+    className="c8"
     role="status"
   />
   <ul
     aria-label="Suggested locations"
-    className="c8 c9"
+    className="c9 c10 c11"
     id="to-listbox"
     role="listbox"
   >
     <li
-      className="c10"
+      className="c12"
       role="none"
     >
       <a
-        className="c11"
+        className="c13"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c12"
+          className="c14"
         >
           <span
-            className="c13"
+            className="c15"
             style={
               Object {
                 "color": null,
@@ -186751,7 +186931,7 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c3"
+              className="c4"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -186766,7 +186946,7 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
             </svg>
           </span>
           <span
-            className="c14"
+            className="c16"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -186833,17 +187013,17 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
 `;
 
 exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear 2`] = `
-.c3 {
+.c4 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c4 {
+.c5 {
   color: #f44256;
 }
 
-.c7 {
+.c8 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -186852,22 +187032,22 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
   width: 0;
 }
 
-.c1 {
+.c2 {
   border: none;
   background: none;
 }
 
-.c6 {
+.c7 {
   color: #888;
   cursor: pointer;
   width: 30px;
 }
 
-.c2 {
+.c3 {
   width: 30px;
 }
 
-.c8 {
+.c10 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -186886,7 +187066,16 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
   z-index: 1000000;
 }
 
-.c5 {
+.c1 [aria-expanded="false"] ~ .c9 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
+.c6 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -186901,7 +187090,7 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
   position: relative;
 }
 
-.c11 {
+.c13 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -186914,34 +187103,34 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
   white-space: nowrap;
 }
 
-.c10:hover {
+.c12:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c10[aria-hidden="true"]:hover {
+.c12[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c12 {
+.c14 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c14 {
+.c16 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c13 {
+.c15 {
   float: left;
 }
 
-.c9 {
+.c11 {
   border: none;
   box-shadow: none;
   display: block;
@@ -186956,13 +187145,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"
+    className="c1 c2 c3"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c3 c4"
+      className="c4 c5"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -186980,13 +187169,13 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
     aria-activedescendant={null}
     aria-autocomplete="list"
     aria-controls="to-listbox"
-    aria-expanded={false}
+    aria-expanded={true}
     aria-haspopup="listbox"
     aria-invalid={false}
     aria-label="to"
     aria-required={false}
     autoFocus={false}
-    className="c5 to-form-control"
+    className="c6 to-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -186996,12 +187185,12 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
   />
   <button
     aria-label="otpUi.LocationField.clearLocation"
-    className="c1 c6"
+    className="c2 c7"
     onClick={[Function]}
   >
     <svg
       aria-hidden="true"
-      className="c3"
+      className="c4"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -187016,31 +187205,31 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
     </svg>
   </button>
   <span
-    className="c7"
+    className="c8"
     role="status"
   />
   <ul
     aria-label="Suggested locations"
-    className="c8 c9"
+    className="c9 c10 c11"
     id="to-listbox"
     role="listbox"
   >
     <li
-      className="c10"
+      className="c12"
       role="none"
     >
       <a
-        className="c11"
+        className="c13"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c12"
+          className="c14"
         >
           <span
-            className="c13"
+            className="c15"
             style={
               Object {
                 "color": null,
@@ -187049,7 +187238,7 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
           >
             <svg
               aria-hidden="true"
-              className="c3"
+              className="c4"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -187064,7 +187253,7 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
             </svg>
           </span>
           <span
-            className="c14"
+            className="c16"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -187119,17 +187308,17 @@ exports[`Storyshots LocationField/Mobile Context Slow Geocoder 1`] = `
 `;
 
 exports[`Storyshots LocationField/Mobile Context Slow Geocoder 2`] = `
-.c3 {
+.c4 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c4 {
+.c5 {
   color: #333;
 }
 
-.c6 {
+.c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -187138,16 +187327,16 @@ exports[`Storyshots LocationField/Mobile Context Slow Geocoder 2`] = `
   width: 0;
 }
 
-.c1 {
+.c2 {
   border: none;
   background: none;
 }
 
-.c2 {
+.c3 {
   width: 30px;
 }
 
-.c7 {
+.c9 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -187166,7 +187355,16 @@ exports[`Storyshots LocationField/Mobile Context Slow Geocoder 2`] = `
   z-index: 1000000;
 }
 
-.c5 {
+.c1 [aria-expanded="false"] ~ .c8 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
+.c6 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -187181,7 +187379,7 @@ exports[`Storyshots LocationField/Mobile Context Slow Geocoder 2`] = `
   position: relative;
 }
 
-.c10 {
+.c12 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -187194,34 +187392,34 @@ exports[`Storyshots LocationField/Mobile Context Slow Geocoder 2`] = `
   white-space: nowrap;
 }
 
-.c9:hover {
+.c11:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c9[aria-hidden="true"]:hover {
+.c11[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c11 {
+.c13 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c13 {
+.c15 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c12 {
+.c14 {
   float: left;
 }
 
-.c8 {
+.c10 {
   border: none;
   box-shadow: none;
   display: block;
@@ -187236,13 +187434,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"
+    className="c1 c2 c3"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c3 c4"
+      className="c4 c5"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -187260,13 +187458,13 @@ exports[`Storyshots LocationField/Mobile Context Slow Geocoder 2`] = `
     aria-activedescendant={null}
     aria-autocomplete="list"
     aria-controls="from-listbox"
-    aria-expanded={false}
+    aria-expanded={true}
     aria-haspopup="listbox"
     aria-invalid={false}
     aria-label="from"
     aria-required={false}
     autoFocus={false}
-    className="c5 from-form-control"
+    className="c6 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -187275,31 +187473,31 @@ exports[`Storyshots LocationField/Mobile Context Slow Geocoder 2`] = `
     value=""
   />
   <span
-    className="c6"
+    className="c7"
     role="status"
   />
   <ul
     aria-label="Suggested locations"
-    className="c7 c8"
+    className="c8 c9 c10"
     id="from-listbox"
     role="listbox"
   >
     <li
-      className="c9"
+      className="c11"
       role="none"
     >
       <a
-        className="c10"
+        className="c12"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c11"
+          className="c13"
         >
           <span
-            className="c12"
+            className="c14"
             style={
               Object {
                 "color": null,
@@ -187308,7 +187506,7 @@ exports[`Storyshots LocationField/Mobile Context Slow Geocoder 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c3"
+              className="c4"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -187323,7 +187521,7 @@ exports[`Storyshots LocationField/Mobile Context Slow Geocoder 2`] = `
             </svg>
           </span>
           <span
-            className="c13"
+            className="c15"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -187385,17 +187583,17 @@ exports[`Storyshots LocationField/Mobile Context Styled 1`] = `
 `;
 
 exports[`Storyshots LocationField/Mobile Context Styled 2`] = `
-.c4 {
+.c5 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c5 {
+.c6 {
   color: #333;
 }
 
-.c7 {
+.c8 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -187404,16 +187602,16 @@ exports[`Storyshots LocationField/Mobile Context Styled 2`] = `
   width: 0;
 }
 
-.c2 {
+.c3 {
   border: none;
   background: none;
 }
 
-.c3 {
+.c4 {
   width: 30px;
 }
 
-.c8 {
+.c10 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -187432,7 +187630,16 @@ exports[`Storyshots LocationField/Mobile Context Styled 2`] = `
   z-index: 1000000;
 }
 
-.c6 {
+.c2 [aria-expanded="false"] ~ .c9 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
+.c7 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -187447,7 +187654,7 @@ exports[`Storyshots LocationField/Mobile Context Styled 2`] = `
   position: relative;
 }
 
-.c11 {
+.c13 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -187460,40 +187667,40 @@ exports[`Storyshots LocationField/Mobile Context Styled 2`] = `
   white-space: nowrap;
 }
 
-.c10:hover {
+.c12:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c10[aria-hidden="true"]:hover {
+.c12[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c13 {
+.c15 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c15 {
+.c17 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c14 {
+.c16 {
   float: left;
 }
 
-.c9 {
+.c11 {
   border: none;
   box-shadow: none;
   display: block;
 }
 
-.c1 .c12 {
+.c1 .c14 {
   background-color: pink;
   font-size: 24px;
 }
@@ -187507,13 +187714,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"
+    className="c2 c3 c4"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c4 c5"
+      className="c5 c6"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -187531,13 +187738,13 @@ exports[`Storyshots LocationField/Mobile Context Styled 2`] = `
     aria-activedescendant={null}
     aria-autocomplete="list"
     aria-controls="from-listbox"
-    aria-expanded={false}
+    aria-expanded={true}
     aria-haspopup="listbox"
     aria-invalid={false}
     aria-label="from"
     aria-required={false}
     autoFocus={false}
-    className="c6 from-form-control"
+    className="c7 from-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -187546,31 +187753,31 @@ exports[`Storyshots LocationField/Mobile Context Styled 2`] = `
     value=""
   />
   <span
-    className="c7"
+    className="c8"
     role="status"
   />
   <ul
     aria-label="Suggested locations"
-    className="c8 c9"
+    className="c9 c10 c11"
     id="from-listbox"
     role="listbox"
   >
     <li
-      className="c10"
+      className="c12"
       role="none"
     >
       <a
-        className="c11"
+        className="c13"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c12 c13"
+          className="c14 c15"
         >
           <span
-            className="c14"
+            className="c16"
             style={
               Object {
                 "color": null,
@@ -187579,7 +187786,7 @@ exports[`Storyshots LocationField/Mobile Context Styled 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c4"
+              className="c5"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -187594,7 +187801,7 @@ exports[`Storyshots LocationField/Mobile Context Styled 2`] = `
             </svg>
           </span>
           <span
-            className="c15"
+            className="c17"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -187754,13 +187961,13 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 1`] = `
 `;
 
 exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
-.c3 {
+.c4 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c5 {
+.c6 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -187769,20 +187976,20 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
   width: 0;
 }
 
-.c1 {
+.c2 {
   border: none;
   background: none;
 }
 
-.c16 {
+.c18 {
   clear: both;
 }
 
-.c2 {
+.c3 {
   width: 30px;
 }
 
-.c6 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -187801,7 +188008,16 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
   z-index: 1000000;
 }
 
-.c4 {
+.c1 [aria-expanded="false"] ~ .c7 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
+.c5 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -187816,7 +188032,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
   position: relative;
 }
 
-.c10 {
+.c12 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -187829,7 +188045,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
   white-space: nowrap;
 }
 
-.c8 {
+.c10 {
   color: #eee;
   background-color: #333;
   font-size: 12px;
@@ -187841,60 +188057,60 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
   white-space: nowrap;
 }
 
-.c9:hover {
+.c11:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c9[aria-hidden="true"]:hover {
+.c11[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c17 {
+.c19 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c19 {
+.c21 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c18 {
+.c20 {
   float: left;
 }
 
-.c15 {
+.c17 {
   background-color: gray;
   color: white;
   padding: 2px 3px 0px;
   margin-right: 5px;
 }
 
-.c7 {
+.c9 {
   border: none;
   box-shadow: none;
   display: block;
 }
 
-.c13 {
+.c15 {
   margin-left: 30px;
 }
 
-.c12 {
+.c14 {
   font-size: 8px;
 }
 
-.c11 {
+.c13 {
   float: left;
   padding-top: 3px;
 }
 
-.c14 {
+.c16 {
   font-size: 9px;
 }
 
@@ -187907,13 +188123,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"
+    className="c1 c2 c3"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c3"
+      className="c4"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -187931,13 +188147,13 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
     aria-activedescendant={null}
     aria-autocomplete="list"
     aria-controls="to-listbox"
-    aria-expanded={false}
+    aria-expanded={true}
     aria-haspopup="listbox"
     aria-invalid={false}
     aria-label="to"
     aria-required={false}
     autoFocus={false}
-    className="c4 to-form-control"
+    className="c5 to-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -187946,37 +188162,37 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
     value=""
   />
   <span
-    className="c5"
+    className="c6"
     role="status"
   />
   <ul
     aria-label="Suggested locations"
-    className="c6 c7"
+    className="c7 c8 c9"
     id="to-listbox"
     role="listbox"
   >
     <h2
-      className="c8"
+      className="c10"
     >
       otpUi.LocationField.nearby
     </h2>
     <li
-      className="c9"
+      className="c11"
       role="none"
     >
       <a
-        className="c10"
+        className="c12"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c11"
+          className="c13"
         >
           <svg
             aria-hidden="true"
-            className="c3"
+            className="c4"
             fill="currentColor"
             focusable="false"
             height={13}
@@ -187990,13 +188206,13 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             />
           </svg>
           <span
-            className="c12"
+            className="c14"
           >
             404 ft
           </span>
         </span>
         <span
-          className="c13"
+          className="c15"
         >
           <span
             className="styled__StopName-sc-xahsq2-20"
@@ -188007,37 +188223,37 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             )
           </span>
           <span
-            className="c14"
+            className="c16"
           >
             <span
-              className="c15"
+              className="c17"
             >
               1
             </span>
           </span>
         </span>
         <div
-          className="c16"
+          className="c18"
         />
       </a>
     </li>
     <li
-      className="c9"
+      className="c11"
       role="none"
     >
       <a
-        className="c10"
+        className="c12"
         id="otpui-locf-option-1"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c11"
+          className="c13"
         >
           <svg
             aria-hidden="true"
-            className="c3"
+            className="c4"
             fill="currentColor"
             focusable="false"
             height={13}
@@ -188051,13 +188267,13 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             />
           </svg>
           <span
-            className="c12"
+            className="c14"
           >
             0.2 mi
           </span>
         </span>
         <span
-          className="c13"
+          className="c15"
         >
           <span
             className="styled__StopName-sc-xahsq2-20"
@@ -188068,41 +188284,41 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             )
           </span>
           <span
-            className="c14"
+            className="c16"
           >
             <span
-              className="c15"
+              className="c17"
             >
               2
             </span>
           </span>
         </span>
         <div
-          className="c16"
+          className="c18"
         />
       </a>
     </li>
     <h2
-      className="c8"
+      className="c10"
     >
       otpUi.LocationField.recentlySearched
     </h2>
     <li
-      className="c9"
+      className="c11"
       role="none"
     >
       <a
-        className="c10"
+        className="c12"
         id="otpui-locf-option-2"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c17"
+          className="c19"
         >
           <span
-            className="c18"
+            className="c20"
             style={
               Object {
                 "color": null,
@@ -188111,7 +188327,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c3"
+              className="c4"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -188126,7 +188342,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             </svg>
           </span>
           <span
-            className="c19"
+            className="c21"
           >
             123 Main St
             
@@ -188135,26 +188351,26 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
       </a>
     </li>
     <h2
-      className="c8"
+      className="c10"
     >
       otpUi.LocationField.myPlaces
     </h2>
     <li
-      className="c9"
+      className="c11"
       role="none"
     >
       <a
-        className="c10"
+        className="c12"
         id="otpui-locf-option-3"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c17"
+          className="c19"
         >
           <span
-            className="c18"
+            className="c20"
             style={
               Object {
                 "color": null,
@@ -188163,7 +188379,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c3"
+              className="c4"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -188178,7 +188394,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             </svg>
           </span>
           <span
-            className="c19"
+            className="c21"
           >
             otpUi.LocationField.parenthesisFormat
           </span>
@@ -188186,21 +188402,21 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
       </a>
     </li>
     <li
-      className="c9"
+      className="c11"
       role="none"
     >
       <a
-        className="c10"
+        className="c12"
         id="otpui-locf-option-4"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c17"
+          className="c19"
         >
           <span
-            className="c18"
+            className="c20"
             style={
               Object {
                 "color": null,
@@ -188209,7 +188425,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c3"
+              className="c4"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -188224,7 +188440,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             </svg>
           </span>
           <span
-            className="c19"
+            className="c21"
           >
             otpUi.LocationField.parenthesisFormat
           </span>
@@ -188232,21 +188448,21 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
       </a>
     </li>
     <li
-      className="c9"
+      className="c11"
       role="none"
     >
       <a
-        className="c10"
+        className="c12"
         id="otpui-locf-option-5"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c17"
+          className="c19"
         >
           <span
-            className="c18"
+            className="c20"
             style={
               Object {
                 "color": null,
@@ -188255,7 +188471,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c3"
+              className="c4"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -188270,7 +188486,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             </svg>
           </span>
           <span
-            className="c19"
+            className="c21"
           >
             Coffee Roasters Shop, 55 Coffee Street
           </span>
@@ -188278,21 +188494,21 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
       </a>
     </li>
     <li
-      className="c9"
+      className="c11"
       role="none"
     >
       <a
-        className="c10"
+        className="c12"
         id="otpui-locf-option-6"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c17"
+          className="c19"
         >
           <span
-            className="c18"
+            className="c20"
             style={
               Object {
                 "color": null,
@@ -188301,7 +188517,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c3"
+              className="c4"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -188316,7 +188532,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             </svg>
           </span>
           <span
-            className="c19"
+            className="c21"
           >
             123 Main St
           </span>
@@ -188324,21 +188540,21 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
       </a>
     </li>
     <li
-      className="c9"
+      className="c11"
       role="none"
     >
       <a
-        className="c10"
+        className="c12"
         id="otpui-locf-option-7"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c17"
+          className="c19"
         >
           <span
-            className="c18"
+            className="c20"
             style={
               Object {
                 "color": null,
@@ -188347,7 +188563,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c3"
+              className="c4"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -188362,7 +188578,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             </svg>
           </span>
           <span
-            className="c19"
+            className="c21"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -188458,17 +188674,17 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 1`] = `
 `;
 
 exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
-.c3 {
+.c4 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c4 {
+.c5 {
   color: #f44256;
 }
 
-.c6 {
+.c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -188477,20 +188693,20 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
   width: 0;
 }
 
-.c1 {
+.c2 {
   border: none;
   background: none;
 }
 
-.c17 {
+.c19 {
   clear: both;
 }
 
-.c2 {
+.c3 {
   width: 30px;
 }
 
-.c7 {
+.c9 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -188509,7 +188725,16 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
   z-index: 1000000;
 }
 
-.c5 {
+.c1 [aria-expanded="false"] ~ .c8 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
+.c6 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -188524,7 +188749,7 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
   position: relative;
 }
 
-.c11 {
+.c13 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -188537,7 +188762,7 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
   white-space: nowrap;
 }
 
-.c9 {
+.c11 {
   color: #eee;
   background-color: #333;
   font-size: 12px;
@@ -188549,60 +188774,60 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
   white-space: nowrap;
 }
 
-.c10:hover {
+.c12:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c10[aria-hidden="true"]:hover {
+.c12[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c18 {
+.c20 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c20 {
+.c22 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c19 {
+.c21 {
   float: left;
 }
 
-.c16 {
+.c18 {
   background-color: gray;
   color: white;
   padding: 2px 3px 0px;
   margin-right: 5px;
 }
 
-.c8 {
+.c10 {
   border: none;
   box-shadow: none;
   display: block;
 }
 
-.c14 {
+.c16 {
   margin-left: 30px;
 }
 
-.c13 {
+.c15 {
   font-size: 8px;
 }
 
-.c12 {
+.c14 {
   float: left;
   padding-top: 3px;
 }
 
-.c15 {
+.c17 {
   font-size: 9px;
 }
 
@@ -188615,13 +188840,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"
+    className="c1 c2 c3"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c3 c4"
+      className="c4 c5"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -188639,13 +188864,13 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
     aria-activedescendant={null}
     aria-autocomplete="list"
     aria-controls="to-listbox"
-    aria-expanded={false}
+    aria-expanded={true}
     aria-haspopup="listbox"
     aria-invalid={false}
     aria-label="to"
     aria-required={false}
     autoFocus={false}
-    className="c5 to-form-control"
+    className="c6 to-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -188654,37 +188879,37 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
     value=""
   />
   <span
-    className="c6"
+    className="c7"
     role="status"
   />
   <ul
     aria-label="Suggested locations"
-    className="c7 c8"
+    className="c8 c9 c10"
     id="to-listbox"
     role="listbox"
   >
     <h2
-      className="c9"
+      className="c11"
     >
       otpUi.LocationField.nearby
     </h2>
     <li
-      className="c10"
+      className="c12"
       role="none"
     >
       <a
-        className="c11"
+        className="c13"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c12"
+          className="c14"
         >
           <svg
             aria-hidden="true"
-            className="c3"
+            className="c4"
             fill="currentColor"
             focusable="false"
             height={13}
@@ -188698,13 +188923,13 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
             />
           </svg>
           <span
-            className="c13"
+            className="c15"
           >
             404 ft
           </span>
         </span>
         <span
-          className="c14"
+          className="c16"
         >
           <span
             className="styled__StopName-sc-xahsq2-20"
@@ -188715,37 +188940,37 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
             )
           </span>
           <span
-            className="c15"
+            className="c17"
           >
             <span
-              className="c16"
+              className="c18"
             >
               1
             </span>
           </span>
         </span>
         <div
-          className="c17"
+          className="c19"
         />
       </a>
     </li>
     <li
-      className="c10"
+      className="c12"
       role="none"
     >
       <a
-        className="c11"
+        className="c13"
         id="otpui-locf-option-1"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c12"
+          className="c14"
         >
           <svg
             aria-hidden="true"
-            className="c3"
+            className="c4"
             fill="currentColor"
             focusable="false"
             height={13}
@@ -188759,13 +188984,13 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
             />
           </svg>
           <span
-            className="c13"
+            className="c15"
           >
             0.2 mi
           </span>
         </span>
         <span
-          className="c14"
+          className="c16"
         >
           <span
             className="styled__StopName-sc-xahsq2-20"
@@ -188776,36 +189001,36 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
             )
           </span>
           <span
-            className="c15"
+            className="c17"
           >
             <span
-              className="c16"
+              className="c18"
             >
               2
             </span>
           </span>
         </span>
         <div
-          className="c17"
+          className="c19"
         />
       </a>
     </li>
     <li
-      className="c10"
+      className="c12"
       role="none"
     >
       <a
-        className="c11"
+        className="c13"
         id="otpui-locf-option-2"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c18"
+          className="c20"
         >
           <span
-            className="c19"
+            className="c21"
             style={
               Object {
                 "color": null,
@@ -188814,7 +189039,7 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c3"
+              className="c4"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -188829,7 +189054,7 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
             </svg>
           </span>
           <span
-            className="c20"
+            className="c22"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -188900,17 +189125,17 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 1`] = `
 `;
 
 exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
-.c3 {
+.c4 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c4 {
+.c5 {
   color: #f44256;
 }
 
-.c6 {
+.c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -188919,16 +189144,16 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
   width: 0;
 }
 
-.c1 {
+.c2 {
   border: none;
   background: none;
 }
 
-.c2 {
+.c3 {
   width: 30px;
 }
 
-.c7 {
+.c9 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -188947,7 +189172,16 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
   z-index: 1000000;
 }
 
-.c5 {
+.c1 [aria-expanded="false"] ~ .c8 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
+.c6 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -188962,7 +189196,7 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
   position: relative;
 }
 
-.c11 {
+.c13 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -188975,7 +189209,7 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
   white-space: nowrap;
 }
 
-.c9 {
+.c11 {
   color: #eee;
   background-color: #333;
   font-size: 12px;
@@ -188987,34 +189221,34 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
   white-space: nowrap;
 }
 
-.c10:hover {
+.c12:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c10[aria-hidden="true"]:hover {
+.c12[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c12 {
+.c14 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c14 {
+.c16 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c13 {
+.c15 {
   float: left;
 }
 
-.c8 {
+.c10 {
   border: none;
   box-shadow: none;
   display: block;
@@ -189029,13 +189263,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"
+    className="c1 c2 c3"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c3 c4"
+      className="c4 c5"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -189053,13 +189287,13 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
     aria-activedescendant={null}
     aria-autocomplete="list"
     aria-controls="to-listbox"
-    aria-expanded={false}
+    aria-expanded={true}
     aria-haspopup="listbox"
     aria-invalid={false}
     aria-label="to"
     aria-required={false}
     autoFocus={false}
-    className="c5 to-form-control"
+    className="c6 to-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -189068,36 +189302,36 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
     value=""
   />
   <span
-    className="c6"
+    className="c7"
     role="status"
   />
   <ul
     aria-label="Suggested locations"
-    className="c7 c8"
+    className="c8 c9 c10"
     id="to-listbox"
     role="listbox"
   >
     <h2
-      className="c9"
+      className="c11"
     >
       otpUi.LocationField.recentlySearched
     </h2>
     <li
-      className="c10"
+      className="c12"
       role="none"
     >
       <a
-        className="c11"
+        className="c13"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c12"
+          className="c14"
         >
           <span
-            className="c13"
+            className="c15"
             style={
               Object {
                 "color": null,
@@ -189106,7 +189340,7 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c3"
+              className="c4"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -189121,7 +189355,7 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
             </svg>
           </span>
           <span
-            className="c14"
+            className="c16"
           >
             123 Main St
             
@@ -189130,21 +189364,21 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
       </a>
     </li>
     <li
-      className="c10"
+      className="c12"
       role="none"
     >
       <a
-        className="c11"
+        className="c13"
         id="otpui-locf-option-1"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c12"
+          className="c14"
         >
           <span
-            className="c13"
+            className="c15"
             style={
               Object {
                 "color": null,
@@ -189153,7 +189387,7 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c3"
+              className="c4"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -189168,7 +189402,7 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
             </svg>
           </span>
           <span
-            className="c14"
+            className="c16"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -189262,17 +189496,17 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 1`] = `
 `;
 
 exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
-.c3 {
+.c4 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
 }
 
-.c4 {
+.c5 {
   color: #f44256;
 }
 
-.c6 {
+.c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -189281,16 +189515,16 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
   width: 0;
 }
 
-.c1 {
+.c2 {
   border: none;
   background: none;
 }
 
-.c2 {
+.c3 {
   width: 30px;
 }
 
-.c7 {
+.c9 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -189309,7 +189543,16 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
   z-index: 1000000;
 }
 
-.c5 {
+.c1 [aria-expanded="false"] ~ .c8 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
+.c6 {
   border: none;
   box-shadow: none;
   font-size: 17px;
@@ -189324,7 +189567,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
   position: relative;
 }
 
-.c11 {
+.c13 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -189337,7 +189580,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
   white-space: nowrap;
 }
 
-.c9 {
+.c11 {
   color: #eee;
   background-color: #333;
   font-size: 12px;
@@ -189349,34 +189592,34 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
   white-space: nowrap;
 }
 
-.c10:hover {
+.c12:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c10[aria-hidden="true"]:hover {
+.c12[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c12 {
+.c14 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c14 {
+.c16 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c13 {
+.c15 {
   float: left;
 }
 
-.c8 {
+.c10 {
   border: none;
   box-shadow: none;
   display: block;
@@ -189391,13 +189634,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"
+    className="c1 c2 c3"
     onClick={[Function]}
     tabIndex={-1}
   >
     <svg
       aria-hidden="true"
-      className="c3 c4"
+      className="c4 c5"
       fill="currentColor"
       focusable="false"
       height={13}
@@ -189415,13 +189658,13 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
     aria-activedescendant={null}
     aria-autocomplete="list"
     aria-controls="to-listbox"
-    aria-expanded={false}
+    aria-expanded={true}
     aria-haspopup="listbox"
     aria-invalid={false}
     aria-label="to"
     aria-required={false}
     autoFocus={false}
-    className="c5 to-form-control"
+    className="c6 to-form-control"
     onChange={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -189430,36 +189673,36 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
     value=""
   />
   <span
-    className="c6"
+    className="c7"
     role="status"
   />
   <ul
     aria-label="Suggested locations"
-    className="c7 c8"
+    className="c8 c9 c10"
     id="to-listbox"
     role="listbox"
   >
     <h2
-      className="c9"
+      className="c11"
     >
       otpUi.LocationField.myPlaces
     </h2>
     <li
-      className="c10"
+      className="c12"
       role="none"
     >
       <a
-        className="c11"
+        className="c13"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c12"
+          className="c14"
         >
           <span
-            className="c13"
+            className="c15"
             style={
               Object {
                 "color": null,
@@ -189468,7 +189711,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c3"
+              className="c4"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -189483,7 +189726,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
             </svg>
           </span>
           <span
-            className="c14"
+            className="c16"
           >
             otpUi.LocationField.parenthesisFormat
           </span>
@@ -189491,21 +189734,21 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
       </a>
     </li>
     <li
-      className="c10"
+      className="c12"
       role="none"
     >
       <a
-        className="c11"
+        className="c13"
         id="otpui-locf-option-1"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c12"
+          className="c14"
         >
           <span
-            className="c13"
+            className="c15"
             style={
               Object {
                 "color": null,
@@ -189514,7 +189757,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c3"
+              className="c4"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -189529,7 +189772,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
             </svg>
           </span>
           <span
-            className="c14"
+            className="c16"
           >
             otpUi.LocationField.parenthesisFormat
           </span>
@@ -189537,21 +189780,21 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
       </a>
     </li>
     <li
-      className="c10"
+      className="c12"
       role="none"
     >
       <a
-        className="c11"
+        className="c13"
         id="otpui-locf-option-2"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c12"
+          className="c14"
         >
           <span
-            className="c13"
+            className="c15"
             style={
               Object {
                 "color": null,
@@ -189560,7 +189803,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c3"
+              className="c4"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -189575,7 +189818,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
             </svg>
           </span>
           <span
-            className="c14"
+            className="c16"
           >
             Coffee Roasters Shop, 55 Coffee Street
           </span>
@@ -189583,21 +189826,21 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
       </a>
     </li>
     <li
-      className="c10"
+      className="c12"
       role="none"
     >
       <a
-        className="c11"
+        className="c13"
         id="otpui-locf-option-3"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c12"
+          className="c14"
         >
           <span
-            className="c13"
+            className="c15"
             style={
               Object {
                 "color": null,
@@ -189606,7 +189849,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c3"
+              className="c4"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -189621,7 +189864,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
             </svg>
           </span>
           <span
-            className="c14"
+            className="c16"
           >
             123 Main St
           </span>
@@ -189629,21 +189872,21 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
       </a>
     </li>
     <li
-      className="c10"
+      className="c12"
       role="none"
     >
       <a
-        className="c11"
+        className="c13"
         id="otpui-locf-option-4"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c12"
+          className="c14"
         >
           <span
-            className="c13"
+            className="c15"
             style={
               Object {
                 "color": null,
@@ -189652,7 +189895,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c3"
+              className="c4"
               fill="currentColor"
               focusable="false"
               height={13}
@@ -189667,7 +189910,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
             </svg>
           </span>
           <span
-            className="c14"
+            className="c16"
           >
             otpUi.LocationField.useCurrentLocation
           </span>