From 7e7052aab430ba3f573d3b47caf2aff2bbb2e774 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 16 Nov 2023 14:29:37 -0500
Subject: [PATCH] fix: hide carets when sensible

---
 __snapshots__/storybook.test.ts.snap          | 672 +++---------------
 .../src/AccessLegBody/index.tsx               |   4 +-
 .../src/TransitLegBody/index.tsx              |   4 +-
 yarn.lock                                     |  22 +-
 4 files changed, 102 insertions(+), 600 deletions(-)

diff --git a/__snapshots__/storybook.test.ts.snap b/__snapshots__/storybook.test.ts.snap
index 8dd625ea5..08a641635 100644
--- a/__snapshots__/storybook.test.ts.snap
+++ b/__snapshots__/storybook.test.ts.snap
@@ -12384,25 +12384,6 @@ exports[`Storyshots ItineraryBody/otp-react-redux Bike Rental Transit Itinerary
             </svg>
              
             2 alerts
-            <span
-              className="c31"
-            >
-              <svg
-                aria-hidden="true"
-                className="c8"
-                fill="currentColor"
-                focusable="false"
-                height={15}
-                viewBox="0 0 320 512"
-                width={15}
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
           </button>
           <div
             aria-hidden={false}
@@ -15801,25 +15782,6 @@ exports[`Storyshots ItineraryBody/otp-react-redux Bike Transit Bike Itinerary 2`
             </svg>
              
             2 alerts
-            <span
-              className="c31"
-            >
-              <svg
-                aria-hidden="true"
-                className="c8"
-                fill="currentColor"
-                focusable="false"
-                height={15}
-                viewBox="0 0 320 512"
-                width={15}
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
           </button>
           <div
             aria-hidden={false}
@@ -17062,22 +17024,22 @@ exports[`Storyshots ItineraryBody/otp-react-redux Custom Time Column 2`] = `
   border-color: #8c8c8c;
 }
 
-.c38 {
+.c37 {
   color: #008;
   cursor: pointer;
   margin-left: 5px;
 }
 
-.c38:hover {
+.c37:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c39 {
+.c38 {
   padding-left: 0px;
 }
 
-.c39:before {
+.c38:before {
   content: "|";
   color: black;
   margin-right: 5px;
@@ -17125,7 +17087,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Custom Time Column 2`] = `
   position: relative;
 }
 
-.c35::before {
+.c47::before {
   content: "";
   margin: 0 0.125em;
 }
@@ -17186,17 +17148,17 @@ exports[`Storyshots ItineraryBody/otp-react-redux Custom Time Column 2`] = `
   font-weight: inherit;
 }
 
-.c43 {
+.c42 {
   font-size: 13px;
   font-weight: 500;
 }
 
-.c42 {
+.c41 {
   font-weight: 800;
   margin-right: 6px;
 }
 
-.c40 {
+.c39 {
   color: #807373;
   margin-top: 5px;
 }
@@ -17277,7 +17239,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Custom Time Column 2`] = `
   margin-top: -14px;
 }
 
-.c36 {
+.c35 {
   display: block;
   list-style: none;
   padding: 0;
@@ -17332,11 +17294,11 @@ exports[`Storyshots ItineraryBody/otp-react-redux Custom Time Column 2`] = `
   position: relative;
 }
 
-.c45 {
+.c44 {
   margin-top: 5px;
 }
 
-.c46 {
+.c45 {
   color: #676767;
   display: -webkit-box;
   display: -webkit-flex;
@@ -17348,26 +17310,26 @@ exports[`Storyshots ItineraryBody/otp-react-redux Custom Time Column 2`] = `
   font-size: 14px;
 }
 
-.c47 {
+.c46 {
   padding: 0;
 }
 
-.c44 {
+.c43 {
   margin-top: 5px;
 }
 
-.c44 a {
+.c43 a {
   color: #337ab7;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c44 a:hover {
+.c43 a:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c44 img {
+.c43 img {
   margin-left: 5px;
   vertical-align: middle;
 }
@@ -17381,7 +17343,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Custom Time Column 2`] = `
   font-family: Hind,sans-serif;
 }
 
-.c1 .c41 {
+.c1 .c40 {
   background-color: rgb(15,106,172);
   border-color: white;
   border-image: initial;
@@ -17470,7 +17432,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Custom Time Column 2`] = `
   z-index: 10;
 }
 
-.c37 {
+.c36 {
   background-color: gray;
   left: 5px;
   right: 5px;
@@ -17867,25 +17829,6 @@ exports[`Storyshots ItineraryBody/otp-react-redux Custom Time Column 2`] = `
               onClick={[Function]}
             >
               1 min
-              <span
-                className="c35"
-              >
-                <svg
-                  aria-hidden="true"
-                  className="c8"
-                  fill="currentColor"
-                  focusable="false"
-                  height={15}
-                  viewBox="0 0 320 512"
-                  width={15}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
               <span
                 className="c19"
               >
@@ -17908,7 +17851,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Custom Time Column 2`] = `
               style={Object {}}
             >
               <ol
-                className="c36"
+                className="c35"
               />
             </div>
           </div>
@@ -17923,7 +17866,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Custom Time Column 2`] = `
       className="c4 c5"
     >
       <div
-        className="c37"
+        className="c36"
       />
       <span
         className="c7"
@@ -18028,7 +17971,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Custom Time Column 2`] = `
       >
         Stop ID 
         <a
-          className="c38 c39"
+          className="c37 c38"
           onClick={[Function]}
         >
           Stop Viewer
@@ -18051,7 +17994,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Custom Time Column 2`] = `
                 Ride
               </span>
               <span
-                className="c23 c40"
+                className="c23 c39"
               >
                 <span
                   className="c24"
@@ -18084,13 +18027,13 @@ exports[`Storyshots ItineraryBody/otp-react-redux Custom Time Column 2`] = `
                     </svg>
                   </span>
                   <span
-                    className="c41 c42"
+                    className="c40 c41"
                   >
                     20
                   </span>
                 </span>
                 <span
-                  className="c43"
+                  className="c42"
                 >
                   <span>
                     Burnside/Stark
@@ -18122,7 +18065,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Custom Time Column 2`] = `
           role="group"
         >
           <div
-            className="c44"
+            className="c43"
           >
             Service operated by 
             <a
@@ -18147,20 +18090,20 @@ exports[`Storyshots ItineraryBody/otp-react-redux Custom Time Column 2`] = `
             />
           </div>
           <div
-            className="c45"
+            className="c44"
           >
             <div
-              className="c46"
+              className="c45"
             >
               <button
-                className="c27 c47"
+                className="c27 c46"
                 onClick={[Function]}
               >
                 Ride 
                 6 min
                  / 3 stops
                 <span
-                  className="c35"
+                  className="c47"
                 >
                   <svg
                     aria-hidden="true"
@@ -18185,7 +18128,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Custom Time Column 2`] = `
                 </span>
               </button>
               <a
-                className="c38 c39"
+                className="c37 c38"
                 onClick={[Function]}
                 type="button"
               >
@@ -18425,25 +18368,6 @@ exports[`Storyshots ItineraryBody/otp-react-redux Custom Time Column 2`] = `
               onClick={[Function]}
             >
               1 min
-              <span
-                className="c35"
-              >
-                <svg
-                  aria-hidden="true"
-                  className="c8"
-                  fill="currentColor"
-                  focusable="false"
-                  height={15}
-                  viewBox="0 0 320 512"
-                  width={15}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
               <span
                 className="c19"
               >
@@ -18466,7 +18390,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Custom Time Column 2`] = `
               style={Object {}}
             >
               <ol
-                className="c36"
+                className="c35"
               />
             </div>
           </div>
@@ -29216,25 +29140,6 @@ exports[`Storyshots ItineraryBody/otp-react-redux Hide Driving Directions 2`] =
             </svg>
              
             2 alerts
-            <span
-              className="c33"
-            >
-              <svg
-                aria-hidden="true"
-                className="c8"
-                fill="currentColor"
-                focusable="false"
-                height={15}
-                viewBox="0 0 320 512"
-                width={15}
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
           </button>
           <div
             aria-hidden={false}
@@ -43140,25 +43045,6 @@ exports[`Storyshots ItineraryBody/otp-react-redux Park And Ride Itinerary 2`] =
             </svg>
              
             2 alerts
-            <span
-              className="c31"
-            >
-              <svg
-                aria-hidden="true"
-                className="c8"
-                fill="currentColor"
-                focusable="false"
-                height={15}
-                viewBox="0 0 320 512"
-                width={15}
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
           </button>
           <div
             aria-hidden={false}
@@ -50405,22 +50291,22 @@ exports[`Storyshots ItineraryBody/otp-react-redux Tnc Transit Itinerary 2`] = `
   border-color: #8c8c8c;
 }
 
-.c38 {
+.c37 {
   color: #008;
   cursor: pointer;
   margin-left: 5px;
 }
 
-.c38:hover {
+.c37:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c39 {
+.c38 {
   padding-left: 0px;
 }
 
-.c39:before {
+.c38:before {
   content: "|";
   color: black;
   margin-right: 5px;
@@ -50468,7 +50354,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Tnc Transit Itinerary 2`] = `
   position: relative;
 }
 
-.c35::before {
+.c47::before {
   content: "";
   margin: 0 0.125em;
 }
@@ -50529,17 +50415,17 @@ exports[`Storyshots ItineraryBody/otp-react-redux Tnc Transit Itinerary 2`] = `
   font-weight: inherit;
 }
 
-.c43 {
+.c42 {
   font-size: 13px;
   font-weight: 500;
 }
 
-.c42 {
+.c41 {
   font-weight: 800;
   margin-right: 6px;
 }
 
-.c40 {
+.c39 {
   color: #807373;
   margin-top: 5px;
 }
@@ -50620,7 +50506,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Tnc Transit Itinerary 2`] = `
   margin-top: -14px;
 }
 
-.c36 {
+.c35 {
   display: block;
   list-style: none;
   padding: 0;
@@ -50675,11 +50561,11 @@ exports[`Storyshots ItineraryBody/otp-react-redux Tnc Transit Itinerary 2`] = `
   position: relative;
 }
 
-.c45 {
+.c44 {
   margin-top: 5px;
 }
 
-.c46 {
+.c45 {
   color: #676767;
   display: -webkit-box;
   display: -webkit-flex;
@@ -50691,26 +50577,26 @@ exports[`Storyshots ItineraryBody/otp-react-redux Tnc Transit Itinerary 2`] = `
   font-size: 14px;
 }
 
-.c47 {
+.c46 {
   padding: 0;
 }
 
-.c44 {
+.c43 {
   margin-top: 5px;
 }
 
-.c44 a {
+.c43 a {
   color: #337ab7;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c44 a:hover {
+.c43 a:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c44 img {
+.c43 img {
   margin-left: 5px;
   vertical-align: middle;
 }
@@ -50724,7 +50610,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Tnc Transit Itinerary 2`] = `
   font-family: Hind,sans-serif;
 }
 
-.c1 .c41 {
+.c1 .c40 {
   background-color: rgb(15,106,172);
   border-color: white;
   border-image: initial;
@@ -50813,7 +50699,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Tnc Transit Itinerary 2`] = `
   z-index: 10;
 }
 
-.c37 {
+.c36 {
   background-color: gray;
   left: 5px;
   right: 5px;
@@ -51118,25 +51004,6 @@ exports[`Storyshots ItineraryBody/otp-react-redux Tnc Transit Itinerary 2`] = `
               onClick={[Function]}
             >
               1 min
-              <span
-                className="c35"
-              >
-                <svg
-                  aria-hidden="true"
-                  className="c8"
-                  fill="currentColor"
-                  focusable="false"
-                  height={15}
-                  viewBox="0 0 320 512"
-                  width={15}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
               <span
                 className="c19"
               >
@@ -51159,7 +51026,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Tnc Transit Itinerary 2`] = `
               style={Object {}}
             >
               <ol
-                className="c36"
+                className="c35"
               />
             </div>
           </div>
@@ -51174,7 +51041,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Tnc Transit Itinerary 2`] = `
       className="c4 c5"
     >
       <div
-        className="c37"
+        className="c36"
       />
       <span
         className="c7"
@@ -51241,7 +51108,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Tnc Transit Itinerary 2`] = `
       >
         Stop ID 792
         <a
-          className="c38 c39"
+          className="c37 c38"
           onClick={[Function]}
         >
           Stop Viewer
@@ -51264,7 +51131,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Tnc Transit Itinerary 2`] = `
                 Ride
               </span>
               <span
-                className="c23 c40"
+                className="c23 c39"
               >
                 <span
                   className="c24"
@@ -51297,13 +51164,13 @@ exports[`Storyshots ItineraryBody/otp-react-redux Tnc Transit Itinerary 2`] = `
                     </svg>
                   </span>
                   <span
-                    className="c41 c42"
+                    className="c40 c41"
                   >
                     20
                   </span>
                 </span>
                 <span
-                  className="c43"
+                  className="c42"
                 >
                   <span>
                     Burnside/Stark
@@ -51335,7 +51202,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Tnc Transit Itinerary 2`] = `
           role="group"
         >
           <div
-            className="c44"
+            className="c43"
           >
             Service operated by 
             <a
@@ -51367,20 +51234,20 @@ exports[`Storyshots ItineraryBody/otp-react-redux Tnc Transit Itinerary 2`] = `
             />
           </div>
           <div
-            className="c45"
+            className="c44"
           >
             <div
-              className="c46"
+              className="c45"
             >
               <button
-                className="c27 c47"
+                className="c27 c46"
                 onClick={[Function]}
               >
                 Ride 
                 6 min
                  / 3 stops
                 <span
-                  className="c35"
+                  className="c47"
                 >
                   <svg
                     aria-hidden="true"
@@ -51405,7 +51272,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Tnc Transit Itinerary 2`] = `
                 </span>
               </button>
               <a
-                className="c38 c39"
+                className="c37 c38"
                 onClick={[Function]}
                 type="button"
               >
@@ -51542,7 +51409,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Tnc Transit Itinerary 2`] = `
       >
         Stop ID 13327
         <a
-          className="c38 c39"
+          className="c37 c38"
           onClick={[Function]}
         >
           Stop Viewer
@@ -51618,25 +51485,6 @@ exports[`Storyshots ItineraryBody/otp-react-redux Tnc Transit Itinerary 2`] = `
               onClick={[Function]}
             >
               1 min
-              <span
-                className="c35"
-              >
-                <svg
-                  aria-hidden="true"
-                  className="c8"
-                  fill="currentColor"
-                  focusable="false"
-                  height={15}
-                  viewBox="0 0 320 512"
-                  width={15}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
               <span
                 className="c19"
               >
@@ -51659,7 +51507,7 @@ exports[`Storyshots ItineraryBody/otp-react-redux Tnc Transit Itinerary 2`] = `
               style={Object {}}
             >
               <ol
-                className="c36"
+                className="c35"
               />
             </div>
           </div>
@@ -60548,25 +60396,6 @@ exports[`Storyshots ItineraryBody/otp-react-redux Two Alerts Not Always Collapsi
             </svg>
              
             2 alerts
-            <span
-              className="c31"
-            >
-              <svg
-                aria-hidden="true"
-                className="c8"
-                fill="currentColor"
-                focusable="false"
-                height={15}
-                viewBox="0 0 320 512"
-                width={15}
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
           </button>
           <div
             aria-hidden={false}
@@ -65242,25 +65071,6 @@ exports[`Storyshots ItineraryBody/otp-react-redux Two Alerts Without Collapsing
             </svg>
              
             2 alerts
-            <span
-              className="c31"
-            >
-              <svg
-                aria-hidden="true"
-                className="c8"
-                fill="currentColor"
-                focusable="false"
-                height={15}
-                viewBox="0 0 320 512"
-                width={15}
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
           </button>
           <div
             aria-hidden={false}
@@ -69224,25 +69034,6 @@ exports[`Storyshots ItineraryBody/otp-react-redux Walk Interlined Transit Itiner
               onClick={[Function]}
             >
               0 min
-              <span
-                className="c31"
-              >
-                <svg
-                  aria-hidden="true"
-                  className="c8"
-                  fill="currentColor"
-                  focusable="false"
-                  height={15}
-                  viewBox="0 0 320 512"
-                  width={15}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
               <span
                 className="c19"
               >
@@ -82566,25 +82357,6 @@ exports[`Storyshots ItineraryBody/otp-react-redux Zero Alerts Always Collapsing
               onClick={[Function]}
             >
               0 min
-              <span
-                className="c31"
-              >
-                <svg
-                  aria-hidden="true"
-                  className="c8"
-                  fill="currentColor"
-                  focusable="false"
-                  height={15}
-                  viewBox="0 0 320 512"
-                  width={15}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
               <span
                 className="c19"
               >
@@ -87364,25 +87136,6 @@ exports[`Storyshots ItineraryBody/otp-react-redux Zero Alerts Not Always Collaps
               onClick={[Function]}
             >
               0 min
-              <span
-                className="c31"
-              >
-                <svg
-                  aria-hidden="true"
-                  className="c8"
-                  fill="currentColor"
-                  focusable="false"
-                  height={15}
-                  viewBox="0 0 320 512"
-                  width={15}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
               <span
                 className="c19"
               >
@@ -92161,25 +91914,6 @@ exports[`Storyshots ItineraryBody/otp-react-redux Zero Alerts Without Collapsing
               onClick={[Function]}
             >
               0 min
-              <span
-                className="c31"
-              >
-                <svg
-                  aria-hidden="true"
-                  className="c8"
-                  fill="currentColor"
-                  focusable="false"
-                  height={15}
-                  viewBox="0 0 320 512"
-                  width={15}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
               <span
                 className="c19"
               >
@@ -101251,25 +100985,6 @@ exports[`Storyshots ItineraryBody/otp-ui Bike Rental Transit Itinerary 2`] = `
             </svg>
              
             2 alerts
-            <span
-              className="c21"
-            >
-              <svg
-                aria-hidden="true"
-                className="c22"
-                fill="currentColor"
-                focusable="false"
-                height={15}
-                viewBox="0 0 320 512"
-                width={15}
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
           </button>
           <div
             aria-hidden={false}
@@ -104682,25 +104397,6 @@ exports[`Storyshots ItineraryBody/otp-ui Bike Transit Bike Itinerary 2`] = `
             </svg>
              
             2 alerts
-            <span
-              className="c21"
-            >
-              <svg
-                aria-hidden="true"
-                className="c22"
-                fill="currentColor"
-                focusable="false"
-                height={15}
-                viewBox="0 0 320 512"
-                width={15}
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
           </button>
           <div
             aria-hidden={false}
@@ -118019,25 +117715,6 @@ exports[`Storyshots ItineraryBody/otp-ui Hide Driving Directions 2`] = `
             </svg>
              
             2 alerts
-            <span
-              className="c28"
-            >
-              <svg
-                aria-hidden="true"
-                className="c29"
-                fill="currentColor"
-                focusable="false"
-                height={15}
-                viewBox="0 0 320 512"
-                width={15}
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
           </button>
           <div
             aria-hidden={false}
@@ -131653,25 +131330,6 @@ exports[`Storyshots ItineraryBody/otp-ui Park And Ride Itinerary 2`] = `
             </svg>
              
             2 alerts
-            <span
-              className="c21"
-            >
-              <svg
-                aria-hidden="true"
-                className="c22"
-                fill="currentColor"
-                focusable="false"
-                height={15}
-                viewBox="0 0 320 512"
-                width={15}
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
           </button>
           <div
             aria-hidden={false}
@@ -140531,7 +140189,7 @@ exports[`Storyshots ItineraryBody/otp-ui Tnc Transit Itinerary 1`] = `
 `;
 
 exports[`Storyshots ItineraryBody/otp-ui Tnc Transit Itinerary 2`] = `
-.c31 {
+.c41 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
@@ -140708,7 +140366,7 @@ exports[`Storyshots ItineraryBody/otp-ui Tnc Transit Itinerary 2`] = `
   position: relative;
 }
 
-.c30::before {
+.c40::before {
   content: "";
   margin: 0 0.125em;
 }
@@ -140739,7 +140397,7 @@ exports[`Storyshots ItineraryBody/otp-ui Tnc Transit Itinerary 2`] = `
   transform: translateX(-50%);
 }
 
-.c33 {
+.c31 {
   border-left: solid 8px #008ab0;
   height: 100%;
   width: 0;
@@ -140806,17 +140464,17 @@ exports[`Storyshots ItineraryBody/otp-ui Tnc Transit Itinerary 2`] = `
   font-weight: inherit;
 }
 
-.c38 {
+.c36 {
   font-size: 13px;
   font-weight: 500;
 }
 
-.c37 {
+.c35 {
   font-weight: 800;
   margin-right: 6px;
 }
 
-.c36 {
+.c34 {
   color: #807373;
   margin-top: 5px;
 }
@@ -140929,7 +140587,7 @@ exports[`Storyshots ItineraryBody/otp-ui Tnc Transit Itinerary 2`] = `
   margin-top: -14px;
 }
 
-.c34 {
+.c32 {
   text-align: center;
   min-width: 30px;
   min-height: 30px;
@@ -140958,7 +140616,7 @@ exports[`Storyshots ItineraryBody/otp-ui Tnc Transit Itinerary 2`] = `
   cursor: default;
 }
 
-.c35 {
+.c33 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -140970,7 +140628,7 @@ exports[`Storyshots ItineraryBody/otp-ui Tnc Transit Itinerary 2`] = `
   border: 0;
 }
 
-.c32 {
+.c30 {
   display: block;
   list-style: none;
   padding: 0;
@@ -141025,11 +140683,11 @@ exports[`Storyshots ItineraryBody/otp-ui Tnc Transit Itinerary 2`] = `
   position: relative;
 }
 
-.c39 {
+.c37 {
   margin-top: 5px;
 }
 
-.c40 {
+.c38 {
   color: #676767;
   display: -webkit-box;
   display: -webkit-flex;
@@ -141041,7 +140699,7 @@ exports[`Storyshots ItineraryBody/otp-ui Tnc Transit Itinerary 2`] = `
   font-size: 14px;
 }
 
-.c41 {
+.c39 {
   padding: 0;
 }
 
@@ -141324,25 +140982,6 @@ exports[`Storyshots ItineraryBody/otp-ui Tnc Transit Itinerary 2`] = `
               onClick={[Function]}
             >
               1 min
-              <span
-                className="c30"
-              >
-                <svg
-                  aria-hidden="true"
-                  className="c31"
-                  fill="currentColor"
-                  focusable="false"
-                  height={15}
-                  viewBox="0 0 320 512"
-                  width={15}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
               <span
                 className="c10"
               >
@@ -141365,7 +141004,7 @@ exports[`Storyshots ItineraryBody/otp-ui Tnc Transit Itinerary 2`] = `
               style={Object {}}
             >
               <ol
-                className="c32"
+                className="c30"
               />
             </div>
           </div>
@@ -141408,14 +141047,14 @@ exports[`Storyshots ItineraryBody/otp-ui Tnc Transit Itinerary 2`] = `
         className="c3"
       >
         <div
-          className="c33"
+          className="c31"
           mode="BUS"
         />
         <div
           className="c5"
         >
           <div
-            className="c34"
+            className="c32"
           >
             <span
               aria-hidden={true}
@@ -141424,7 +141063,7 @@ exports[`Storyshots ItineraryBody/otp-ui Tnc Transit Itinerary 2`] = `
               20
             </span>
             <span
-              className="c35"
+              className="c33"
             >
               Burnside/Stark
             </span>
@@ -141472,17 +141111,17 @@ exports[`Storyshots ItineraryBody/otp-ui Tnc Transit Itinerary 2`] = `
                 Ride
               </span>
               <span
-                className="c14 c36"
+                className="c14 c34"
               >
                 <div>
                   <span
-                    className="c37"
+                    className="c35"
                   >
                     20
                   </span>
                 </div>
                 <span
-                  className="c38"
+                  className="c36"
                 >
                   <span>
                     Burnside/Stark
@@ -141528,24 +141167,24 @@ exports[`Storyshots ItineraryBody/otp-ui Tnc Transit Itinerary 2`] = `
             />
           </div>
           <div
-            className="c39"
+            className="c37"
           >
             <div
-              className="c40"
+              className="c38"
             >
               <button
-                className="c17 c41"
+                className="c17 c39"
                 onClick={[Function]}
               >
                 Ride 
                 6 min
                  / 3 stops
                 <span
-                  className="c30"
+                  className="c40"
                 >
                   <svg
                     aria-hidden="true"
-                    className="c31"
+                    className="c41"
                     fill="currentColor"
                     focusable="false"
                     height={15}
@@ -141755,25 +141394,6 @@ exports[`Storyshots ItineraryBody/otp-ui Tnc Transit Itinerary 2`] = `
               onClick={[Function]}
             >
               1 min
-              <span
-                className="c30"
-              >
-                <svg
-                  aria-hidden="true"
-                  className="c31"
-                  fill="currentColor"
-                  focusable="false"
-                  height={15}
-                  viewBox="0 0 320 512"
-                  width={15}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
               <span
                 className="c10"
               >
@@ -141796,7 +141416,7 @@ exports[`Storyshots ItineraryBody/otp-ui Tnc Transit Itinerary 2`] = `
               style={Object {}}
             >
               <ol
-                className="c32"
+                className="c30"
               />
             </div>
           </div>
@@ -142030,7 +141650,7 @@ exports[`Storyshots ItineraryBody/otp-ui Tnc Transit Itinerary 2`] = `
           >
             <svg
               aria-hidden="true"
-              className="c31 c52"
+              className="c41 c52"
               fill="currentColor"
               focusable="false"
               height={25}
@@ -146026,25 +145646,6 @@ exports[`Storyshots ItineraryBody/otp-ui Two Alert Without Collapsing Prop 2`] =
             </svg>
              
             2 alerts
-            <span
-              className="c21"
-            >
-              <svg
-                aria-hidden="true"
-                className="c22"
-                fill="currentColor"
-                focusable="false"
-                height={15}
-                viewBox="0 0 320 512"
-                width={15}
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
           </button>
           <div
             aria-hidden={false}
@@ -155384,25 +154985,6 @@ exports[`Storyshots ItineraryBody/otp-ui Two Alerts Not Always Collapsing 2`] =
             </svg>
              
             2 alerts
-            <span
-              className="c21"
-            >
-              <svg
-                aria-hidden="true"
-                className="c22"
-                fill="currentColor"
-                focusable="false"
-                height={15}
-                viewBox="0 0 320 512"
-                width={15}
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
           </button>
           <div
             aria-hidden={false}
@@ -159314,25 +158896,6 @@ exports[`Storyshots ItineraryBody/otp-ui Walk Interlined Transit Itinerary 2`] =
               onClick={[Function]}
             >
               0 min
-              <span
-                className="c21"
-              >
-                <svg
-                  aria-hidden="true"
-                  className="c22"
-                  fill="currentColor"
-                  focusable="false"
-                  height={15}
-                  viewBox="0 0 320 512"
-                  width={15}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
               <span
                 className="c10"
               >
@@ -180041,25 +179604,6 @@ exports[`Storyshots ItineraryBody/otp-ui Zero Alerts Always Collapsing 2`] = `
               onClick={[Function]}
             >
               0 min
-              <span
-                className="c21"
-              >
-                <svg
-                  aria-hidden="true"
-                  className="c22"
-                  fill="currentColor"
-                  focusable="false"
-                  height={15}
-                  viewBox="0 0 320 512"
-                  width={15}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
               <span
                 className="c10"
               >
@@ -184708,25 +184252,6 @@ exports[`Storyshots ItineraryBody/otp-ui Zero Alerts Not Always Collapsing 2`] =
               onClick={[Function]}
             >
               0 min
-              <span
-                className="c21"
-              >
-                <svg
-                  aria-hidden="true"
-                  className="c22"
-                  fill="currentColor"
-                  focusable="false"
-                  height={15}
-                  viewBox="0 0 320 512"
-                  width={15}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
               <span
                 className="c10"
               >
@@ -189374,25 +188899,6 @@ exports[`Storyshots ItineraryBody/otp-ui Zero Alerts Without Collapsing Prop 2`]
               onClick={[Function]}
             >
               0 min
-              <span
-                className="c21"
-              >
-                <svg
-                  aria-hidden="true"
-                  className="c22"
-                  fill="currentColor"
-                  focusable="false"
-                  height={15}
-                  viewBox="0 0 320 512"
-                  width={15}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
               <span
                 className="c10"
               >
diff --git a/packages/itinerary-body/src/AccessLegBody/index.tsx b/packages/itinerary-body/src/AccessLegBody/index.tsx
index 5ab1c8e31..4f9a3e51b 100644
--- a/packages/itinerary-body/src/AccessLegBody/index.tsx
+++ b/packages/itinerary-body/src/AccessLegBody/index.tsx
@@ -138,7 +138,9 @@ class AccessLegBody extends Component<Props, State> {
                     onClick={this.onStepsHeaderClick}
                   >
                     <Duration seconds={leg.duration} />
-                    {leg.steps && <S.CaretToggle expanded={expanded} />}
+                    {leg.steps && leg.steps.length > 0 && (
+                      <S.CaretToggle expanded={expanded} />
+                    )}
 
                     <S.InvisibleAdditionalDetails>
                       <FormattedMessage
diff --git a/packages/itinerary-body/src/TransitLegBody/index.tsx b/packages/itinerary-body/src/TransitLegBody/index.tsx
index f162656fd..0c5e19890 100644
--- a/packages/itinerary-body/src/TransitLegBody/index.tsx
+++ b/packages/itinerary-body/src/TransitLegBody/index.tsx
@@ -300,7 +300,9 @@ class TransitLegBody extends Component<Props, State> {
                     alertCount: alerts.length
                   }}
                 />
-                <S.CaretToggle expanded={alertsExpanded} />
+                {!shouldOnlyShowAlertsExpanded && (
+                  <S.CaretToggle expanded={alertsExpanded} />
+                )}
               </S.TransitAlertToggle>
             )}
 
diff --git a/yarn.lock b/yarn.lock
index cde8ef964..0bd4801d9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3241,23 +3241,15 @@
   resolved "https://registry.yarnpkg.com/@open-draft/until/-/until-1.0.3.tgz#db9cc719191a62e7d9200f6e7bab21c5b848adca"
   integrity sha512-Aq58f5HiWdyDlFffbbSjAlv596h/cOnt2DO1w3DOC7OJ5EHs0hd/nycJfiu9RJbT6Yk6F1knnRRXNSpxoIVZ9Q==
 
-"@opentripplanner/core-utils@11.1.2":
-  version "11.1.2"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-11.1.2.tgz#a99d1fa4fb1f587d58fae8fcfd70a3bfe4eed424"
-  integrity sha512-Rn1tBm5F+nt/A4/0cpq6cyNTprSsxfFslujMoZ4P4r6fZ7YTx0d25di+MZ/CZgSlCzHJIiGAfi8DsfJ7yStcTA==
+"@opentripplanner/geocoder@^1.4.2":
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/geocoder/-/geocoder-1.4.2.tgz#0f827dffca42c7f7a23063b54990a291dd028b80"
+  integrity sha512-yzMVrKXEHO6Y50j9kntk1+odvHaqn9K9D4aKJAd+EabhiZckesfScLb0updmWRUloEWjN45nuDSFto8fbU7Uiw==
   dependencies:
+    "@conveyal/geocoder-arcgis-geojson" "^0.0.3"
     "@conveyal/lonlat" "^1.4.1"
-    "@mapbox/polyline" "^1.1.0"
-    "@opentripplanner/geocoder" "^1.4.2"
-    "@styled-icons/foundation" "^10.34.0"
-    "@turf/along" "^6.0.1"
-    chroma-js "^2.4.2"
-    date-fns "^2.28.0"
-    date-fns-tz "^1.2.2"
-    graphql "^16.6.0"
-    lodash.clonedeep "^4.5.0"
-    lodash.isequal "^4.5.0"
-    qs "^6.9.1"
+    isomorphic-mapzen-search "^1.6.1"
+    lodash.memoize "^4.1.2"
 
 "@opentripplanner/types@7.0.0-alpha.2":
   version "7.0.0-alpha.2"