From fda50c598e164647715190bae012369e55932990 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 18 Apr 2024 13:09:42 -0400
Subject: [PATCH 01/31] avoid non-itin-view jumping

---
 lib/components/app/responsive-webapp.js      |  4 +++-
 lib/components/map/route-preview-overlay.tsx | 16 ++++++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/lib/components/app/responsive-webapp.js b/lib/components/app/responsive-webapp.js
index 74fea9add..668434186 100644
--- a/lib/components/app/responsive-webapp.js
+++ b/lib/components/app/responsive-webapp.js
@@ -62,6 +62,7 @@ class ResponsiveWebapp extends Component {
       formChanged,
       intl,
       location,
+      mainPanelContent,
       map,
       matchContentToUrl,
       query,
@@ -98,7 +99,7 @@ class ResponsiveWebapp extends Component {
         setLocationToCurrent({ locationType: 'from' }, intl)
         setMapCenter(map, pt)
       }
-    } else if (query.from && query.to) {
+    } else if (query.from && query.to && mainPanelContent === null) {
       map?.fitBounds([query.from, query.to], {
         duration: 500,
         padding: getFitBoundsPadding(map, 0.2)
@@ -259,6 +260,7 @@ const mapStateToProps = (state) => {
     activeSearchId: state.otp.activeSearchId,
     currentPosition: state.otp.location.currentPosition,
     locale: state.otp.ui.locale,
+    mainPanelContent: state.otp.ui.mainPanelContent,
     mobileScreen: state.otp.ui.mobileScreen,
     modeGroups: state.otp.config.modeGroups,
     popupContent: state.otp.ui.popup,
diff --git a/lib/components/map/route-preview-overlay.tsx b/lib/components/map/route-preview-overlay.tsx
index 8b02e7362..0559cf021 100644
--- a/lib/components/map/route-preview-overlay.tsx
+++ b/lib/components/map/route-preview-overlay.tsx
@@ -14,6 +14,7 @@ import {
 type Props = {
   from: Location
   geometries: string[]
+  mainPanelContent: number | null
   to: Location
   visible?: boolean
 }
@@ -21,17 +22,23 @@ type Props = {
  * This overlay will display thin gray lines for a set of geometries. It's to be used
  * as a stopgap until we make full use of Transitive!
  */
-const RoutePreviewOverlay = ({ from, geometries, to, visible }: Props) => {
+const RoutePreviewOverlay = ({
+  from,
+  geometries,
+  mainPanelContent,
+  to,
+  visible
+}: Props) => {
   // Center the map over the endpoints when this overlay is shown.
   const { current: map } = useMap()
   useEffect(() => {
-    if (visible) {
+    if (visible && mainPanelContent === null) {
       map?.fitBounds([from, to], {
         duration: 500,
         padding: getFitBoundsPadding(map, 0.2)
       })
     }
-  }, [map, visible, from, to])
+  }, [map, visible, from, to, mainPanelContent])
 
   if (!geometries || !visible) return <></>
 
@@ -76,7 +83,7 @@ const RoutePreviewOverlay = ({ from, geometries, to, visible }: Props) => {
 
 // TODO: Typescript state
 const mapStateToProps = (state: any) => {
-  const { activeSearchId, config } = state.otp
+  const { activeSearchId, config, ui } = state.otp
   // Only show this overlay if the metro UI is explicitly enabled
   if (config.itinerary?.showFirstResultByDefault !== false) {
     return {}
@@ -102,6 +109,7 @@ const mapStateToProps = (state: any) => {
   return {
     from,
     geometries,
+    mainPanelContent: ui.mainPanelContent,
     to,
     visible:
       // We need an explicit check for undefined and null because 0

From 5684c3f8174b60de664febb000ff791e67dbf48b Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 16 May 2024 13:32:50 -0400
Subject: [PATCH 02/31] refactor(RouteRow): Convert to TypeScript

---
 lib/components/util/types.ts                  |  4 +-
 .../viewers/{RouteRow.js => RouteRow.tsx}     | 77 +++++++++++++------
 2 files changed, 55 insertions(+), 26 deletions(-)
 rename lib/components/viewers/{RouteRow.js => RouteRow.tsx} (75%)

diff --git a/lib/components/util/types.ts b/lib/components/util/types.ts
index fb08c83ae..9b21030fa 100644
--- a/lib/components/util/types.ts
+++ b/lib/components/util/types.ts
@@ -58,8 +58,8 @@ export interface Time {
 }
 
 export interface ViewedRouteState {
-  patternId?: string
-  routeId: string
+  patternId?: string | null
+  routeId: string | null
 }
 
 export interface RouteVehicle {
diff --git a/lib/components/viewers/RouteRow.js b/lib/components/viewers/RouteRow.tsx
similarity index 75%
rename from lib/components/viewers/RouteRow.js
rename to lib/components/viewers/RouteRow.tsx
index d6d40a059..378203e47 100644
--- a/lib/components/viewers/RouteRow.js
+++ b/lib/components/viewers/RouteRow.tsx
@@ -1,7 +1,6 @@
-// TODO: Typescript, which doesn't make sense to do in this file until common types are established
-/* eslint-disable react/prop-types */
 import { ArrowRight } from '@styled-icons/fa-solid'
 import { Button } from 'react-bootstrap'
+import { IntlShape } from 'react-intl'
 import React, { PureComponent } from 'react'
 import styled from 'styled-components'
 
@@ -10,11 +9,29 @@ import { ComponentContext } from '../../util/contexts'
 import { getFormattedMode } from '../../util/i18n'
 import { getModeFromRoute } from '../../util/viewer'
 import { Icon } from '../util/styledIcon'
+import { SetViewedRouteHandler, ViewedRouteObject } from '../util/types'
+import { TransitOperatorConfig } from '../../util/config-types'
 import InvisibleA11yLabel from '../util/invisible-a11y-label'
 import OperatorLogo from '../util/operator-logo'
 
 import RouteName from './route-name'
 
+interface ButtonProps {
+  display?: boolean
+  patternActive?: boolean
+}
+
+interface Props {
+  findRouteIfNeeded: ({ routeId }: { routeId: string }) => void
+  initialRender?: boolean
+  intl: IntlShape
+  isActive?: boolean
+  operator: TransitOperatorConfig
+  patternActive?: boolean
+  route?: ViewedRouteObject
+  setViewedRoute: SetViewedRouteHandler
+}
+
 export const StyledRouteRow = styled.li`
   align-items: center;
   background-color: transparent;
@@ -26,7 +43,7 @@ export const StyledRouteRow = styled.li`
   position: relative;
 `
 // Route Row Button sits invisible on top of the route name and info.
-export const RouteRowButton = styled(Button)`
+export const RouteRowButton = styled(Button)<ButtonProps>`
   align-items: center;
   display: flex;
   min-height: 50px;
@@ -68,7 +85,7 @@ const RouteDetailsContainer = styled.div`
   overflow: hidden;
 `
 
-const PatternButton = styled.button`
+const PatternButton = styled.button<ButtonProps>`
   background: transparent;
   border: none;
   border-radius: 50%;
@@ -99,61 +116,73 @@ const PatternButton = styled.button`
   }
 `
 
-export class RouteRow extends PureComponent {
+export class RouteRow extends PureComponent<Props> {
+  activeRef: React.RefObject<HTMLLIElement>
+
   static contextType = ComponentContext
 
-  constructor(props) {
+  constructor(props: Props) {
     super(props)
     // Create a ref used to scroll to
-    this.activeRef = React.createRef()
+    this.activeRef = React.createRef<HTMLLIElement>()
   }
 
-  componentDidMount = () => {
+  componentDidMount = (): void => {
     const { isActive, route } = this.props
     if (isActive && route?.id) {
       // This is fired when coming back from the route details view
-      this.activeRef.current.scrollIntoView()
+      this.activeRef.current?.scrollIntoView()
     }
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(): void {
     /*
        If the initial route row list is being rendered and there is an active
        route, scroll to it. The initialRender prop prohibits the row being scrolled to
        if the user has clicked on a route
     */
     if (this.props.isActive && this.props.initialRender) {
-      this.activeRef.current.scrollIntoView()
+      this.activeRef.current?.scrollIntoView()
     }
   }
 
-  _onFocusOrEnter = () => {
+  _onFocusOrEnter = (): void => {
     const { findRouteIfNeeded, route } = this.props
-    findRouteIfNeeded({ routeId: route.id })
+    const id = route?.id
+    if (id) {
+      findRouteIfNeeded({ routeId: id })
+    }
   }
 
-  _onClick = () => {
+  _onClick = (): void => {
     const { isActive, route, setViewedRoute } = this.props
     if (isActive) {
       // Deselect current route if active.
       setViewedRoute({ patternId: null, routeId: null })
     } else {
-      // Otherwise, set active and fetch route patterns.
-      setViewedRoute({ routeId: route.id })
+      const id = route?.id
+      if (id) {
+        // Otherwise, set active and fetch route patterns.
+        setViewedRoute({ routeId: route?.id })
+      }
     }
   }
 
-  _patternButtonClicked = () => {
+  _patternButtonClicked = (): void => {
     const { route, setViewedRoute } = this.props
-    const { id, patterns } = route
-    const firstPattern = route && patterns && Object.values(patterns)?.[0]?.id
-    setViewedRoute({ patternId: firstPattern, routeId: id })
+    if (route) {
+      const { id, patterns } = route
+      const firstPattern = patterns && Object.values(patterns)?.[0]?.id
+      setViewedRoute({ patternId: firstPattern, routeId: id })
+    }
   }
 
-  render() {
+  render(): JSX.Element | null {
     const { intl, isActive, operator, route } = this.props
     const { ModeIcon, RouteRenderer } = this.context
 
+    if (!route) return null
+
     const patternViewerButtonText = intl.formatMessage({
       description: 'identifies the purpose of the pattern viewer button',
       id: 'components.RouteViewer.openPatternViewer'
@@ -185,9 +214,9 @@ export class RouteRow extends PureComponent {
                   )}
                   height={28}
                   leg={{
-                    routeId: route?.id,
-                    routeLongName: route?.longName,
-                    routeShortName: route?.shortName
+                    routeId: route.id,
+                    routeLongName: route.longName,
+                    routeShortName: route.shortName
                   }}
                   mode={getModeFromRoute(route)}
                   role="img"

From a725ee7978425fb9c8989ed904462f8cc311ac0d Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 16 May 2024 15:07:02 -0400
Subject: [PATCH 03/31] refactor(RouteRow): Rename file

---
 lib/components/viewers/{RouteRow.tsx => route-row.tsx} | 0
 lib/components/viewers/route-viewer.tsx                | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename lib/components/viewers/{RouteRow.tsx => route-row.tsx} (100%)

diff --git a/lib/components/viewers/RouteRow.tsx b/lib/components/viewers/route-row.tsx
similarity index 100%
rename from lib/components/viewers/RouteRow.tsx
rename to lib/components/viewers/route-row.tsx
diff --git a/lib/components/viewers/route-viewer.tsx b/lib/components/viewers/route-viewer.tsx
index 0a5cbbf32..83e15b79c 100644
--- a/lib/components/viewers/route-viewer.tsx
+++ b/lib/components/viewers/route-viewer.tsx
@@ -25,7 +25,7 @@ import {
 import { StyledIconWrapper } from '../util/styledIcon'
 import PageTitle from '../util/page-title'
 
-import { RouteRow } from './RouteRow'
+import { RouteRow } from './route-row'
 import VehiclePositionRetriever from './vehicle-position-retriever'
 
 interface FilterProps {

From 3aaf5a71792187bc933f8910c7a226bb16bbf7e6 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 16 May 2024 17:02:49 -0400
Subject: [PATCH 04/31] refactor(RouteRow): Use Link component for linking to
 routes.

---
 lib/components/viewers/route-row.tsx | 25 +++++--------------------
 1 file changed, 5 insertions(+), 20 deletions(-)

diff --git a/lib/components/viewers/route-row.tsx b/lib/components/viewers/route-row.tsx
index 378203e47..69cfb4958 100644
--- a/lib/components/viewers/route-row.tsx
+++ b/lib/components/viewers/route-row.tsx
@@ -1,5 +1,4 @@
 import { ArrowRight } from '@styled-icons/fa-solid'
-import { Button } from 'react-bootstrap'
 import { IntlShape } from 'react-intl'
 import React, { PureComponent } from 'react'
 import styled from 'styled-components'
@@ -12,6 +11,7 @@ import { Icon } from '../util/styledIcon'
 import { SetViewedRouteHandler, ViewedRouteObject } from '../util/types'
 import { TransitOperatorConfig } from '../../util/config-types'
 import InvisibleA11yLabel from '../util/invisible-a11y-label'
+import Link from '../util/link'
 import OperatorLogo from '../util/operator-logo'
 
 import RouteName from './route-name'
@@ -43,7 +43,7 @@ export const StyledRouteRow = styled.li`
   position: relative;
 `
 // Route Row Button sits invisible on top of the route name and info.
-export const RouteRowButton = styled(Button)<ButtonProps>`
+export const RouteRowLink = styled(Link)<ButtonProps>`
   align-items: center;
   display: flex;
   min-height: 50px;
@@ -154,20 +154,6 @@ export class RouteRow extends PureComponent<Props> {
     }
   }
 
-  _onClick = (): void => {
-    const { isActive, route, setViewedRoute } = this.props
-    if (isActive) {
-      // Deselect current route if active.
-      setViewedRoute({ patternId: null, routeId: null })
-    } else {
-      const id = route?.id
-      if (id) {
-        // Otherwise, set active and fetch route patterns.
-        setViewedRoute({ routeId: route?.id })
-      }
-    }
-  }
-
   _patternButtonClicked = (): void => {
     const { route, setViewedRoute } = this.props
     if (route) {
@@ -194,14 +180,13 @@ export class RouteRow extends PureComponent<Props> {
 
     return (
       <StyledRouteRow ref={this.activeRef}>
-        <RouteRowButton
-          aria-pressed={isActive || false}
+        <RouteRowLink
           className="clear-button-formatting"
-          onClick={this._onClick}
           onFocus={this._onFocusOrEnter}
           onMouseEnter={this._onFocusOrEnter}
           onTouchStart={this._onFocusOrEnter}
           patternActive={isActive}
+          to={`/route/${route.id}`}
         >
           <RouteDetailsContainer>
             <OperatorLogo operator={operator} />
@@ -227,7 +212,7 @@ export class RouteRow extends PureComponent<Props> {
             <RouteName route={route} RouteRenderer={RouteRenderer} />
           </RouteDetailsContainer>
           <InvisibleA11yLabel>({routeMapToggleText})</InvisibleA11yLabel>
-        </RouteRowButton>
+        </RouteRowLink>
         <PatternButton
           aria-label={patternViewerButtonText}
           display={isActive}

From 5458d6d0de93fdf86c238f76edff62c7bb171313 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 16 May 2024 17:26:44 -0400
Subject: [PATCH 05/31] refactor(RouteRow): Remove patternActive and toggle
 text.

---
 lib/components/viewers/route-row.tsx | 22 ++++------------------
 1 file changed, 4 insertions(+), 18 deletions(-)

diff --git a/lib/components/viewers/route-row.tsx b/lib/components/viewers/route-row.tsx
index 69cfb4958..96ffaa213 100644
--- a/lib/components/viewers/route-row.tsx
+++ b/lib/components/viewers/route-row.tsx
@@ -10,7 +10,6 @@ import { getModeFromRoute } from '../../util/viewer'
 import { Icon } from '../util/styledIcon'
 import { SetViewedRouteHandler, ViewedRouteObject } from '../util/types'
 import { TransitOperatorConfig } from '../../util/config-types'
-import InvisibleA11yLabel from '../util/invisible-a11y-label'
 import Link from '../util/link'
 import OperatorLogo from '../util/operator-logo'
 
@@ -18,7 +17,6 @@ import RouteName from './route-name'
 
 interface ButtonProps {
   display?: boolean
-  patternActive?: boolean
 }
 
 interface Props {
@@ -27,7 +25,6 @@ interface Props {
   intl: IntlShape
   isActive?: boolean
   operator: TransitOperatorConfig
-  patternActive?: boolean
   route?: ViewedRouteObject
   setViewedRoute: SetViewedRouteHandler
 }
@@ -43,7 +40,7 @@ export const StyledRouteRow = styled.li`
   position: relative;
 `
 // Route Row Button sits invisible on top of the route name and info.
-export const RouteRowLink = styled(Link)<ButtonProps>`
+export const RouteRowLink = styled(Link)`
   align-items: center;
   display: flex;
   min-height: 50px;
@@ -53,15 +50,9 @@ export const RouteRowLink = styled(Link)<ButtonProps>`
   transition: all ease-out 0.1s;
   width: 100%;
 
-  &:before {
-    background-color: ${(props) => (props.patternActive ? blue[50] : 'white')};
+  &.active {
+    background-color: ${blue[50]};
     border-radius: 4px;
-    content: '';
-    height: 100%;
-    position: absolute;
-    top: 0;
-    width: 100%;
-    z-index: -4;
   }
 `
 
@@ -173,10 +164,6 @@ export class RouteRow extends PureComponent<Props> {
       description: 'identifies the purpose of the pattern viewer button',
       id: 'components.RouteViewer.openPatternViewer'
     })
-    const routeMapToggleText = intl.formatMessage({
-      description: 'identifies the behavior of the route viewer button',
-      id: 'components.RouteViewer.toggleRouteOnMap'
-    })
 
     return (
       <StyledRouteRow ref={this.activeRef}>
@@ -185,8 +172,8 @@ export class RouteRow extends PureComponent<Props> {
           onFocus={this._onFocusOrEnter}
           onMouseEnter={this._onFocusOrEnter}
           onTouchStart={this._onFocusOrEnter}
-          patternActive={isActive}
           to={`/route/${route.id}`}
+          tracking
         >
           <RouteDetailsContainer>
             <OperatorLogo operator={operator} />
@@ -211,7 +198,6 @@ export class RouteRow extends PureComponent<Props> {
             )}
             <RouteName route={route} RouteRenderer={RouteRenderer} />
           </RouteDetailsContainer>
-          <InvisibleA11yLabel>({routeMapToggleText})</InvisibleA11yLabel>
         </RouteRowLink>
         <PatternButton
           aria-label={patternViewerButtonText}

From 0cac0a30d9f4e7608e2cea3e972152594f27bb0c Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 16 May 2024 17:57:22 -0400
Subject: [PATCH 06/31] refactor(RouteRow): Convert pattern viewer button to
 Link, remove unused code

---
 lib/components/viewers/route-row.tsx    | 50 ++++++++++++-------------
 lib/components/viewers/route-viewer.tsx | 12 +-----
 2 files changed, 26 insertions(+), 36 deletions(-)

diff --git a/lib/components/viewers/route-row.tsx b/lib/components/viewers/route-row.tsx
index 96ffaa213..a35320578 100644
--- a/lib/components/viewers/route-row.tsx
+++ b/lib/components/viewers/route-row.tsx
@@ -8,17 +8,13 @@ import { ComponentContext } from '../../util/contexts'
 import { getFormattedMode } from '../../util/i18n'
 import { getModeFromRoute } from '../../util/viewer'
 import { Icon } from '../util/styledIcon'
-import { SetViewedRouteHandler, ViewedRouteObject } from '../util/types'
 import { TransitOperatorConfig } from '../../util/config-types'
+import { ViewedRouteObject } from '../util/types'
 import Link from '../util/link'
 import OperatorLogo from '../util/operator-logo'
 
 import RouteName from './route-name'
 
-interface ButtonProps {
-  display?: boolean
-}
-
 interface Props {
   findRouteIfNeeded: ({ routeId }: { routeId: string }) => void
   initialRender?: boolean
@@ -26,7 +22,6 @@ interface Props {
   isActive?: boolean
   operator: TransitOperatorConfig
   route?: ViewedRouteObject
-  setViewedRoute: SetViewedRouteHandler
 }
 
 export const StyledRouteRow = styled.li`
@@ -76,23 +71,25 @@ const RouteDetailsContainer = styled.div`
   overflow: hidden;
 `
 
-const PatternButton = styled.button<ButtonProps>`
+const PatternViewerLink = styled(Link)`
   background: transparent;
   border: none;
   border-radius: 50%;
   color: ${blue[900]};
   height: 40px;
+  line-height: 40px;
   margin-right: 8px;
   position: absolute;
   right: 5px;
+  text-align: center;
   transition: all ease-out 0.1s;
-  z-index: ${(props) => (props.display ? 2 : -2)};
   width: 40px;
+  z-index: -2;
 
   svg {
     height: 22px !important;
     margin-top: -3px;
-    opacity: ${(props) => (props.display ? '80%' : 0)};
+    opacity: 0;
     width: 22px !important;
   }
 
@@ -105,6 +102,14 @@ const PatternButton = styled.button<ButtonProps>`
     background: #fff;
     transition: all ease-out 0.1s;
   }
+
+  ${RouteRowLink}.active + & {
+    z-index: 2;
+
+    svg {
+      opacity: 80%;
+    }
+  }
 `
 
 export class RouteRow extends PureComponent<Props> {
@@ -145,22 +150,16 @@ export class RouteRow extends PureComponent<Props> {
     }
   }
 
-  _patternButtonClicked = (): void => {
-    const { route, setViewedRoute } = this.props
-    if (route) {
-      const { id, patterns } = route
-      const firstPattern = patterns && Object.values(patterns)?.[0]?.id
-      setViewedRoute({ patternId: firstPattern, routeId: id })
-    }
-  }
-
   render(): JSX.Element | null {
     const { intl, isActive, operator, route } = this.props
     const { ModeIcon, RouteRenderer } = this.context
 
     if (!route) return null
 
-    const patternViewerButtonText = intl.formatMessage({
+    const { patterns } = route
+    const firstPattern = patterns && Object.values(patterns)?.[0]?.id
+
+    const patternViewerLinkText = intl.formatMessage({
       description: 'identifies the purpose of the pattern viewer button',
       id: 'components.RouteViewer.openPatternViewer'
     })
@@ -199,19 +198,18 @@ export class RouteRow extends PureComponent<Props> {
             <RouteName route={route} RouteRenderer={RouteRenderer} />
           </RouteDetailsContainer>
         </RouteRowLink>
-        <PatternButton
-          aria-label={patternViewerButtonText}
-          display={isActive}
+        <PatternViewerLink
+          aria-label={patternViewerLinkText}
           id={`open-route-button-${route.shortName || route.longName}-${
             operator.name || '' // don't print 'undefined' if there is no operator.
           }`}
-          onClick={this._patternButtonClicked}
-          // Cannot keyboard navigate to the button unless it is visible
+          // Cannot keyboard navigate to the link unless it is visible
           tabIndex={isActive ? 0 : -1}
-          title={patternViewerButtonText}
+          title={patternViewerLinkText}
+          to={`/route/${route.id}/pattern/${firstPattern}`}
         >
           <Icon Icon={ArrowRight} />
-        </PatternButton>
+        </PatternViewerLink>
       </StyledRouteRow>
     )
   }
diff --git a/lib/components/viewers/route-viewer.tsx b/lib/components/viewers/route-viewer.tsx
index 83e15b79c..5cddf0194 100644
--- a/lib/components/viewers/route-viewer.tsx
+++ b/lib/components/viewers/route-viewer.tsx
@@ -17,12 +17,8 @@ import {
 } from '../../util/state'
 import { getFormattedMode } from '../../util/i18n'
 import { getRouteOrPatternViewerTitle } from '../../util/viewer'
-import {
-  SetViewedRouteHandler,
-  ViewedRouteObject,
-  ViewedRouteState
-} from '../util/types'
 import { StyledIconWrapper } from '../util/styledIcon'
+import { ViewedRouteObject, ViewedRouteState } from '../util/types'
 import PageTitle from '../util/page-title'
 
 import { RouteRow } from './route-row'
@@ -47,7 +43,6 @@ interface Props {
   routes: Route[]
   setMainPanelContent: (panelId: number | null) => void
   setRouteViewerFilter: (filter: FilterProps) => void
-  setViewedRoute: SetViewedRouteHandler
   transitOperators: TransitOperator[]
   viewedRoute?: ViewedRouteState
   viewedRouteObject?: ViewedRouteObject
@@ -125,7 +120,6 @@ class RouteViewer extends Component<Props, State> {
       intl,
       modes,
       routes: sortedRoutes,
-      setViewedRoute,
       transitOperators,
       viewedRoute,
       viewedRouteObject
@@ -254,7 +248,6 @@ class RouteViewer extends Component<Props, State> {
                 key={route.id}
                 operator={operator}
                 route={route}
-                setViewedRoute={setViewedRoute}
               />
             )
           })}
@@ -289,8 +282,7 @@ const mapDispatchToProps = {
   findRouteIfNeeded: apiActions.findRouteIfNeeded,
   findRoutesIfNeeded: apiActions.findRoutesIfNeeded,
   setMainPanelContent: uiActions.setMainPanelContent,
-  setRouteViewerFilter: uiActions.setRouteViewerFilter,
-  setViewedRoute: uiActions.setViewedRoute
+  setRouteViewerFilter: uiActions.setRouteViewerFilter
 }
 
 export default connect(

From 6fe24f35750591deca0889a6347b807e5c1cfb7f Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 16 May 2024 18:09:57 -0400
Subject: [PATCH 07/31] refactor(RouteRow): Refactor variables.

---
 lib/components/viewers/route-row.tsx | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/lib/components/viewers/route-row.tsx b/lib/components/viewers/route-row.tsx
index a35320578..10ce10c3a 100644
--- a/lib/components/viewers/route-row.tsx
+++ b/lib/components/viewers/route-row.tsx
@@ -156,7 +156,9 @@ export class RouteRow extends PureComponent<Props> {
 
     if (!route) return null
 
-    const { patterns } = route
+    const { id, longName, mode, patterns, shortName } = route
+    const modeFromRoute = getModeFromRoute(route)
+    const routePath = `/route/${id}`
     const firstPattern = patterns && Object.values(patterns)?.[0]?.id
 
     const patternViewerLinkText = intl.formatMessage({
@@ -171,25 +173,25 @@ export class RouteRow extends PureComponent<Props> {
           onFocus={this._onFocusOrEnter}
           onMouseEnter={this._onFocusOrEnter}
           onTouchStart={this._onFocusOrEnter}
-          to={`/route/${route.id}`}
+          to={routePath}
           tracking
         >
           <RouteDetailsContainer>
             <OperatorLogo operator={operator} />
-            {route.mode && operator.routeIcons !== false && (
+            {mode && operator.routeIcons !== false && (
               <ModeIconElement>
                 <ModeIcon
                   aria-label={getFormattedMode(
-                    getModeFromRoute(route).toLowerCase(),
+                    modeFromRoute.toLowerCase(),
                     intl
                   )}
                   height={28}
                   leg={{
-                    routeId: route.id,
-                    routeLongName: route.longName,
-                    routeShortName: route.shortName
+                    routeId: id,
+                    routeLongName: longName,
+                    routeShortName: shortName
                   }}
-                  mode={getModeFromRoute(route)}
+                  mode={modeFromRoute}
                   role="img"
                   width={28}
                 />
@@ -200,13 +202,13 @@ export class RouteRow extends PureComponent<Props> {
         </RouteRowLink>
         <PatternViewerLink
           aria-label={patternViewerLinkText}
-          id={`open-route-button-${route.shortName || route.longName}-${
+          id={`open-route-button-${shortName || longName}-${
             operator.name || '' // don't print 'undefined' if there is no operator.
           }`}
           // Cannot keyboard navigate to the link unless it is visible
           tabIndex={isActive ? 0 : -1}
           title={patternViewerLinkText}
-          to={`/route/${route.id}/pattern/${firstPattern}`}
+          to={`${routePath}/pattern/${firstPattern}`}
         >
           <Icon Icon={ArrowRight} />
         </PatternViewerLink>

From 9260f14a6769f91dba30126fb14b4f6bc4e651f2 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 16 May 2024 18:16:14 -0400
Subject: [PATCH 08/31] refactor(RouteViewer): Adjust types

---
 lib/components/viewers/route-viewer.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/lib/components/viewers/route-viewer.tsx b/lib/components/viewers/route-viewer.tsx
index 5cddf0194..4520ae837 100644
--- a/lib/components/viewers/route-viewer.tsx
+++ b/lib/components/viewers/route-viewer.tsx
@@ -3,13 +3,14 @@ import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
 import { Filter } from '@styled-icons/fa-solid/Filter'
 import { FormattedMessage, injectIntl, IntlShape } from 'react-intl'
-import { Route, TransitOperator } from '@opentripplanner/types'
+import { Route } from '@opentripplanner/types'
 import { Search } from '@styled-icons/fa-solid/Search'
 import coreUtils from '@opentripplanner/core-utils'
 import React, { Component, FormEvent } from 'react'
 
 import * as apiActions from '../../actions/api'
 import * as uiActions from '../../actions/ui'
+import { AppReduxState } from '../../util/state-types'
 import {
   getAgenciesFromRoutes,
   getModesForActiveAgencyFilter,
@@ -18,6 +19,7 @@ import {
 import { getFormattedMode } from '../../util/i18n'
 import { getRouteOrPatternViewerTitle } from '../../util/viewer'
 import { StyledIconWrapper } from '../util/styledIcon'
+import { TransitOperatorConfig } from '../../util/config-types'
 import { ViewedRouteObject, ViewedRouteState } from '../util/types'
 import PageTitle from '../util/page-title'
 
@@ -43,7 +45,7 @@ interface Props {
   routes: Route[]
   setMainPanelContent: (panelId: number | null) => void
   setRouteViewerFilter: (filter: FilterProps) => void
-  transitOperators: TransitOperator[]
+  transitOperators: TransitOperatorConfig[]
   viewedRoute?: ViewedRouteState
   viewedRouteObject?: ViewedRouteObject
 }
@@ -265,14 +267,14 @@ class RouteViewer extends Component<Props, State> {
 
 // connect to redux store
 
-const mapStateToProps = (state: any) => {
+const mapStateToProps = (state: AppReduxState) => {
   const { viewedRoute } = state.otp.ui
   return {
     agencies: getAgenciesFromRoutes(state),
     filter: state.otp.ui.routeViewer.filter,
     modes: getModesForActiveAgencyFilter(state),
     routes: getSortedFilteredRoutes(state),
-    transitOperators: state.otp.config.transitOperators,
+    transitOperators: state.otp.config.transitOperators || [],
     viewedRoute,
     viewedRouteObject: state.otp.transitIndex.routes?.[viewedRoute?.routeId]
   }

From 196d1a2679986208eaa52373e3a22aa0b4805be4 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 17 May 2024 08:13:18 -0400
Subject: [PATCH 09/31] chore(i18n): Remove unused strings

---
 i18n/en-US.yml             |   1 -
 i18n/es.yml                |   1 -
 i18n/fr.yml                |   1 -
 i18n/ko.yml                |   1 -
 i18n/ru.yml                |   1 -
 i18n/tl.yml                |   1 -
 i18n/vi.yml                |   1 -
 i18n/zh.yml                |   1 -
 lib/util/account-routes.js | 103 +++++++++++++++++++++++++++++++++++++
 lib/util/webapp-routes.js  |   1 +
 10 files changed, 104 insertions(+), 8 deletions(-)
 create mode 100644 lib/util/account-routes.js

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index 3be68a8c6..51815816f 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -496,7 +496,6 @@ components:
     shortTitle: View Routes
     stopsInDirectionOfTravel: "Stops in this direction of travel:"
     title: Route Viewer
-    toggleRouteOnMap: Toggle route on map
   SaveTripButton:
     cantSaveText: Cannot save
     cantSaveTooltip: >-
diff --git a/i18n/es.yml b/i18n/es.yml
index 31c17586c..986cf7037 100644
--- a/i18n/es.yml
+++ b/i18n/es.yml
@@ -511,7 +511,6 @@ components:
     shortTitle: Ver rutas
     stopsInDirectionOfTravel: "Paradas en este sentido de la marcha:"
     title: Visor de rutas
-    toggleRouteOnMap: Cambiar la ruta en el mapa
   SaveTripButton:
     cantSaveText: No se puede guardar
     cantSaveTooltip: >-
diff --git a/i18n/fr.yml b/i18n/fr.yml
index ad2a17b26..ff8f6deaf 100644
--- a/i18n/fr.yml
+++ b/i18n/fr.yml
@@ -519,7 +519,6 @@ components:
     shortTitle: Index des lignes
     stopsInDirectionOfTravel: "Arrêts dans cette direction :"
     title: Index des lignes
-    toggleRouteOnMap: Afficher ou masquer la ligne sur la carte
   SaveTripButton:
     cantSaveText: Impossible d'enregistrer
     cantSaveTooltip: >-
diff --git a/i18n/ko.yml b/i18n/ko.yml
index 33d3dcbc9..e83ad24a5 100644
--- a/i18n/ko.yml
+++ b/i18n/ko.yml
@@ -428,7 +428,6 @@ components:
     shortTitle: 경로 보기
     stopsInDirectionOfTravel: "이동편 이 방향의 정류장:"
     title: 경로 뷰어
-    toggleRouteOnMap: 지도에서 경로 토글
   SaveTripButton:
     cantSaveText: 저장할 수 없음
     cantSaveTooltip: 대중교통을 포함하고 렌트 또는 차량 호출을 포함하지 않는 트립 일정만 모니터링할 수 있습니다.
diff --git a/i18n/ru.yml b/i18n/ru.yml
index c76c0406a..6fefb7846 100644
--- a/i18n/ru.yml
+++ b/i18n/ru.yml
@@ -469,7 +469,6 @@ components:
     shortTitle: Просмотр маршрутов
     stopsInDirectionOfTravel: "Остановки в этом направлении движения:"
     title: Средство просмотра маршрутов
-    toggleRouteOnMap: Переключить маршрут на карте
   SaveTripButton:
     cantSaveText: Невозможно сохранить
     cantSaveTooltip: >-
diff --git a/i18n/tl.yml b/i18n/tl.yml
index 24c16d44e..363b5d212 100644
--- a/i18n/tl.yml
+++ b/i18n/tl.yml
@@ -476,7 +476,6 @@ components:
     shortTitle: Tingnan ang Mga Ruta
     stopsInDirectionOfTravel: "Mga hintuan sa direksyong ito ng paglalakbay:"
     title: Viewer ng Ruta
-    toggleRouteOnMap: I-toggle ang ruta sa mapa
   SaveTripButton:
     cantSaveText: Hindi ma-save
     cantSaveTooltip: >-
diff --git a/i18n/vi.yml b/i18n/vi.yml
index dba6ed8fd..28e814180 100644
--- a/i18n/vi.yml
+++ b/i18n/vi.yml
@@ -471,7 +471,6 @@ components:
     shortTitle: Xem các tuyến đường
     stopsInDirectionOfTravel: "Các trạm dừng trong hướng di chuyển này:"
     title: Xem tuyến đường
-    toggleRouteOnMap: Chuyển đổi tuyến đường trên bản đồ
   SaveTripButton:
     cantSaveText: Không thể tiết kiệm
     cantSaveTooltip: >-
diff --git a/i18n/zh.yml b/i18n/zh.yml
index 7c822d921..e065ded22 100644
--- a/i18n/zh.yml
+++ b/i18n/zh.yml
@@ -427,7 +427,6 @@ components:
     shortTitle: 查看路线
     stopsInDirectionOfTravel: 行程此方向上的公车站：
     title: 路线查看器
-    toggleRouteOnMap: 在地图上切换路线
   SaveTripButton:
     cantSaveText: 无法保存
     cantSaveTooltip: 只有包括交通的行程而没有租车或叫车的行程可以被监控.
diff --git a/lib/util/account-routes.js b/lib/util/account-routes.js
new file mode 100644
index 000000000..c092aaa8f
--- /dev/null
+++ b/lib/util/account-routes.js
@@ -0,0 +1,103 @@
+import React, { lazy, Suspense } from 'react'
+
+import RedirectWithQuery from '../components/form/redirect-with-query'
+import SavedTripList from '../components/user/monitored-trip/saved-trip-list'
+
+import {
+  ACCOUNT_PATH,
+  ACCOUNT_SETTINGS_PATH,
+  CREATE_ACCOUNT_PATH,
+  CREATE_ACCOUNT_PLACES_PATH,
+  CREATE_ACCOUNT_VERIFY_PATH,
+  MOBILITY_PATH,
+  PLACES_PATH,
+  TRIPS_PATH
+} from './constants'
+
+/*
+
+Handles for the following routes, basically /account/*:
+/account
+/account/trips
+/account/trips/:id
+/account/create/verify
+/account/create
+/account/create/:id
+/account/create/places/:id
+/account/mobilityProfile
+/account/mobilityProfile/:id
+/account/settings
+/account/places/:id
+*/
+
+const SavedTripScreen = lazy(() =>
+  import('../components/user/monitored-trip/saved-trip-screen')
+)
+const UserAccountScreen = lazy(() =>
+  import('../components/user/user-account-screen')
+)
+const FavoritePlaceScreen = lazy(() =>
+  import('../components/user/places/favorite-place-screen')
+)
+
+/**
+ * Contains mapping of the component(s) to display for each URL route.
+ *
+ * Note: This object is moved out of ResponsiveWebApp to avoid an error importing
+ * a YML file from @opentripplanner/trip-details during the a11y build/test.
+ */
+// TODO: A number of these routes are ignored during a11y testing as no server mocks are available
+const routes = [
+  {
+    a11yIgnore: true,
+    component: (props) => (
+      <Suspense fallback={<span />}>
+        <FavoritePlaceScreen {...props} />
+      </Suspense>
+    ),
+    path: [`${CREATE_ACCOUNT_PLACES_PATH}/:id`, `${PLACES_PATH}/:id`]
+  },
+  {
+    a11yIgnore: true,
+    component: (props) => (
+      <Suspense fallback={<span />}>
+        <SavedTripScreen {...props} />
+      </Suspense>
+    ),
+    path: `${TRIPS_PATH}/:id`
+  },
+  {
+    a11yIgnore: true,
+    children: <RedirectWithQuery to={TRIPS_PATH} />,
+    exact: true,
+    path: ACCOUNT_PATH
+  },
+  {
+    a11yIgnore: true,
+    children: <RedirectWithQuery to={CREATE_ACCOUNT_VERIFY_PATH} />,
+    exact: true,
+    path: CREATE_ACCOUNT_PATH
+  },
+  {
+    a11yIgnore: true,
+    // This route lets new or existing users edit or set up their account.
+    component: (props) => (
+      <Suspense fallback={<span />}>
+        <UserAccountScreen {...props} />
+      </Suspense>
+    ),
+    path: [
+      `${CREATE_ACCOUNT_PATH}/:step`,
+      `${MOBILITY_PATH}/:step`,
+      `${MOBILITY_PATH}/`,
+      ACCOUNT_SETTINGS_PATH
+    ]
+  },
+  {
+    a11yIgnore: true,
+    component: SavedTripList,
+    path: TRIPS_PATH
+  }
+]
+
+export default routes
diff --git a/lib/util/webapp-routes.js b/lib/util/webapp-routes.js
index a76508043..0d977bd12 100644
--- a/lib/util/webapp-routes.js
+++ b/lib/util/webapp-routes.js
@@ -50,6 +50,7 @@ const routes = [
       // Route viewer (and route ID).
       '/route',
       '/route/:id',
+      '/route/:id/pattern',
       '/route/:id/pattern/:patternId',
       // Stop viewer (and stop ID).
       '/schedule',

From 4f1ac107fcb9e53510afaad403b98e86026616c5 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 17 May 2024 09:02:17 -0400
Subject: [PATCH 10/31] refactor(RouteRow): Set hover color to inherit.

---
 lib/components/viewers/route-row.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/lib/components/viewers/route-row.tsx b/lib/components/viewers/route-row.tsx
index 10ce10c3a..43a593bd0 100644
--- a/lib/components/viewers/route-row.tsx
+++ b/lib/components/viewers/route-row.tsx
@@ -45,6 +45,10 @@ export const RouteRowLink = styled(Link)`
   transition: all ease-out 0.1s;
   width: 100%;
 
+  &:hover {
+    color: inherit;
+  }
+
   &.active {
     background-color: ${blue[50]};
     border-radius: 4px;

From 8d844c3104c97b1888a4204883302feeb9eaebec Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 17 May 2024 13:21:23 -0400
Subject: [PATCH 11/31] refactor(account-routes,webapp-routes): Remove files
 not intended for this PR...

---
 lib/util/account-routes.js | 103 -------------------------------------
 lib/util/webapp-routes.js  |   1 -
 2 files changed, 104 deletions(-)
 delete mode 100644 lib/util/account-routes.js

diff --git a/lib/util/account-routes.js b/lib/util/account-routes.js
deleted file mode 100644
index c092aaa8f..000000000
--- a/lib/util/account-routes.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import React, { lazy, Suspense } from 'react'
-
-import RedirectWithQuery from '../components/form/redirect-with-query'
-import SavedTripList from '../components/user/monitored-trip/saved-trip-list'
-
-import {
-  ACCOUNT_PATH,
-  ACCOUNT_SETTINGS_PATH,
-  CREATE_ACCOUNT_PATH,
-  CREATE_ACCOUNT_PLACES_PATH,
-  CREATE_ACCOUNT_VERIFY_PATH,
-  MOBILITY_PATH,
-  PLACES_PATH,
-  TRIPS_PATH
-} from './constants'
-
-/*
-
-Handles for the following routes, basically /account/*:
-/account
-/account/trips
-/account/trips/:id
-/account/create/verify
-/account/create
-/account/create/:id
-/account/create/places/:id
-/account/mobilityProfile
-/account/mobilityProfile/:id
-/account/settings
-/account/places/:id
-*/
-
-const SavedTripScreen = lazy(() =>
-  import('../components/user/monitored-trip/saved-trip-screen')
-)
-const UserAccountScreen = lazy(() =>
-  import('../components/user/user-account-screen')
-)
-const FavoritePlaceScreen = lazy(() =>
-  import('../components/user/places/favorite-place-screen')
-)
-
-/**
- * Contains mapping of the component(s) to display for each URL route.
- *
- * Note: This object is moved out of ResponsiveWebApp to avoid an error importing
- * a YML file from @opentripplanner/trip-details during the a11y build/test.
- */
-// TODO: A number of these routes are ignored during a11y testing as no server mocks are available
-const routes = [
-  {
-    a11yIgnore: true,
-    component: (props) => (
-      <Suspense fallback={<span />}>
-        <FavoritePlaceScreen {...props} />
-      </Suspense>
-    ),
-    path: [`${CREATE_ACCOUNT_PLACES_PATH}/:id`, `${PLACES_PATH}/:id`]
-  },
-  {
-    a11yIgnore: true,
-    component: (props) => (
-      <Suspense fallback={<span />}>
-        <SavedTripScreen {...props} />
-      </Suspense>
-    ),
-    path: `${TRIPS_PATH}/:id`
-  },
-  {
-    a11yIgnore: true,
-    children: <RedirectWithQuery to={TRIPS_PATH} />,
-    exact: true,
-    path: ACCOUNT_PATH
-  },
-  {
-    a11yIgnore: true,
-    children: <RedirectWithQuery to={CREATE_ACCOUNT_VERIFY_PATH} />,
-    exact: true,
-    path: CREATE_ACCOUNT_PATH
-  },
-  {
-    a11yIgnore: true,
-    // This route lets new or existing users edit or set up their account.
-    component: (props) => (
-      <Suspense fallback={<span />}>
-        <UserAccountScreen {...props} />
-      </Suspense>
-    ),
-    path: [
-      `${CREATE_ACCOUNT_PATH}/:step`,
-      `${MOBILITY_PATH}/:step`,
-      `${MOBILITY_PATH}/`,
-      ACCOUNT_SETTINGS_PATH
-    ]
-  },
-  {
-    a11yIgnore: true,
-    component: SavedTripList,
-    path: TRIPS_PATH
-  }
-]
-
-export default routes
diff --git a/lib/util/webapp-routes.js b/lib/util/webapp-routes.js
index 0d977bd12..a76508043 100644
--- a/lib/util/webapp-routes.js
+++ b/lib/util/webapp-routes.js
@@ -50,7 +50,6 @@ const routes = [
       // Route viewer (and route ID).
       '/route',
       '/route/:id',
-      '/route/:id/pattern',
       '/route/:id/pattern/:patternId',
       // Stop viewer (and stop ID).
       '/schedule',

From 819394167d64a070ff37dbc9c65aa8e6a989613f Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Tue, 21 May 2024 11:30:54 -0400
Subject: [PATCH 12/31] fix: refactor adding NO_TRANSIT_CONNECTION error so it
 does not render in cases where there are transit itineraries

---
 lib/actions/apiV2.js                              |  8 --------
 lib/components/narrative/narrative-itineraries.js | 11 +++++++++--
 lib/util/state.js                                 | 12 ++++++++++++
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/lib/actions/apiV2.js b/lib/actions/apiV2.js
index 73c0c47ad..736b790a2 100644
--- a/lib/actions/apiV2.js
+++ b/lib/actions/apiV2.js
@@ -1131,14 +1131,6 @@ export function routingQuery(searchId = null, updateSearchInReducer) {
                 }
               }
 
-              // If there are no itineraries, generate an error
-              // so we're not left with an empty results container.
-              if (withCollapsedShortNames.length === 0) {
-                response.data.plan.routingErrors.push({
-                  code: 'NO_TRANSIT_CONNECTION'
-                })
-              }
-
               return {
                 index,
                 response: {
diff --git a/lib/components/narrative/narrative-itineraries.js b/lib/components/narrative/narrative-itineraries.js
index 4b7c14b45..efccef8c4 100644
--- a/lib/components/narrative/narrative-itineraries.js
+++ b/lib/components/narrative/narrative-itineraries.js
@@ -12,8 +12,8 @@ import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
 
 import * as uiActions from '../../actions/ui'
 import { ComponentContext } from '../../util/contexts'
-import { firstTransitLegIsRealtime } from '../../util/viewer'
 import {
+  createNoItinerariesErr,
   getActiveItineraries,
   getActiveSearch,
   getRealtimeEffects,
@@ -21,6 +21,7 @@ import {
   getVisibleItineraryIndex,
   sortItinerariesInPlaceIfNeeded
 } from '../../util/state'
+import { firstTransitLegIsRealtime } from '../../util/viewer'
 import {
   getFirstLegStartTime,
   itinerariesAreEqual,
@@ -604,6 +605,12 @@ const mapStateToProps = (state) => {
   // Sort the merged (displayed) itineraries if needed
   sortItinerariesInPlaceIfNeeded(mergedItineraries, state)
 
+  const otp2Errors = activeSearch?.response?.reduce(
+    reduceErrorsFromResponse,
+    {}
+  )
+  const errorsWithNoItineraries = createNoItinerariesErr(state, otp2Errors)
+
   return {
     // swap out realtime itineraries with non-realtime depending on boolean
     activeItinerary,
@@ -616,7 +623,7 @@ const mapStateToProps = (state) => {
     errorMessages,
     errors: getResponsesWithErrors(state),
     // TODO: Destroy otp1 errors and rename this
-    errorsOtp2: activeSearch?.response?.reduce(reduceErrorsFromResponse, {}),
+    errorsOtp2: errorsWithNoItineraries,
     groupItineraries,
     groupTransitModes,
     itineraries: allItineraries,
diff --git a/lib/util/state.js b/lib/util/state.js
index 47a777ed6..c58ffb650 100644
--- a/lib/util/state.js
+++ b/lib/util/state.js
@@ -118,6 +118,18 @@ export const getActiveItineraries = createSelector(
   }
 )
 
+/**
+ * If there are no itineraries, generate an error
+ * so we're not left with an empty results container.
+ */
+export const createNoItinerariesErr = (state, errors) => {
+  const itineraries = getActiveItineraries(state)
+  if (errors && itineraries.length === 0) {
+    errors.NO_TRANSIT_CONNECTION = new Set()
+  }
+  return errors
+}
+
 /**
  * Helper method to sort itineraries.
  * As the name indicates, it will mutate the order in the specified array.

From 3cde728d5279e8f6ce95ccf751f002c83509976e Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Fri, 24 May 2024 14:00:10 -0400
Subject: [PATCH 13/31] update otp-ui packages and import focus trap

---
 lib/components/map/point-popup.tsx | 71 ++++++------------------------
 package.json                       |  4 +-
 yarn.lock                          | 28 ++++++------
 3 files changed, 30 insertions(+), 73 deletions(-)

diff --git a/lib/components/map/point-popup.tsx b/lib/components/map/point-popup.tsx
index b13e3ce3a..1ce3f5728 100644
--- a/lib/components/map/point-popup.tsx
+++ b/lib/components/map/point-popup.tsx
@@ -4,12 +4,12 @@ import { Search } from '@styled-icons/fa-solid/Search'
 import { useIntl, WrappedComponentProps } from 'react-intl'
 import { useMap } from 'react-map-gl'
 import FromToLocationPicker from '@opentripplanner/from-to-location-picker'
-import React, { useCallback, useMemo } from 'react'
+import React, { useCallback } from 'react'
 import styled from 'styled-components'
 import type { Location } from '@opentripplanner/types'
 
 import * as mapActions from '../../actions/map'
-import { getEntryRelativeTo } from '../util/get-entry-relative-to'
+import { FocusTrapWrapper } from '@opentripplanner/map-popup/lib'
 import { Icon } from '../util/styledIcon'
 import { renderCoordinates } from '../../util/i18n'
 import { SetLocationHandler, ZoomToPlaceHandler } from '../util/types'
@@ -51,49 +51,6 @@ function MapPopup({
   const intl = useIntl()
   const { current: map } = useMap()
 
-  /**
-   * Creates a focus trap within map popup that can be dismissed with esc.
-   * https://medium.com/cstech/achieving-focus-trapping-in-a-react-modal-component-3f28f596f35b
-   */
-
-  /**
-   * Check to see which keys are down by tracking keyUp and keyDown events
-   * in order to see when "tab" and "shift" are pressed at the same time.
-   */
-  let keysDown: string[] = useMemo(() => [], [])
-
-  // Argument for document.querySelectorAll to target focusable elements.
-  const queryId = 'button#zoom-btn, #from-to button'
-
-  const _handleKeyDown = useCallback(
-    (e) => {
-      keysDown.push(e.key)
-      const element = e.target as HTMLElement
-      switch (e.key) {
-        case 'Escape':
-          clearMapPopupLocation()
-          break
-        case 'Tab':
-          if (keysDown.includes('Shift')) {
-            e.preventDefault()
-            getEntryRelativeTo(queryId, element, -1)?.focus()
-          } else {
-            e.preventDefault()
-            getEntryRelativeTo(queryId, element, 1)?.focus()
-          }
-          break
-        case ' ':
-          break
-        default:
-      }
-    },
-    [clearMapPopupLocation, keysDown]
-  )
-
-  const _handleKeyUp = (e: any) => {
-    keysDown = keysDown.filter((key) => key !== e.key)
-  }
-
   // Memoize callbacks that shouldn't change from one render to the next.
   const onSetLocationFromPopup = useCallback(
     (payload) => {
@@ -116,16 +73,16 @@ function MapPopup({
   })
 
   return (
-    <div onKeyDown={_handleKeyDown} onKeyUp={_handleKeyUp} role="presentation">
-      <Popup
-        closeButton={false}
-        closeOnClick
-        latitude={mapPopupLocation.lat}
-        longitude={mapPopupLocation.lon}
-        onClose={clearMapPopupLocation}
-        // Override inline style supplied by react-map-gl to accommodate long "plan a trip" translations.
-        style={{ maxWidth: '260px', width: '260px' }}
-      >
+    <Popup
+      closeButton={false}
+      closeOnClick
+      latitude={mapPopupLocation.lat}
+      longitude={mapPopupLocation.lon}
+      onClose={clearMapPopupLocation}
+      // Override inline style supplied by react-map-gl to accommodate long "plan a trip" translations.
+      style={{ maxWidth: '260px', width: '260px' }}
+    >
+      <FocusTrapWrapper closePopup={clearMapPopupLocation} id="stop-popup">
         <PopupTitleWrapper>
           <PopupTitle>
             {typeof popupName === 'string' && popupName.split(',').length > 3
@@ -148,8 +105,8 @@ function MapPopup({
             setLocation={onSetLocationFromPopup}
           />
         </div>
-      </Popup>
-    </div>
+      </FocusTrapWrapper>
+    </Popup>
   )
 }
 
diff --git a/package.json b/package.json
index 9e33a58a0..bf546fa3c 100644
--- a/package.json
+++ b/package.json
@@ -50,10 +50,10 @@
     "@opentripplanner/geocoder": "^2.2.2",
     "@opentripplanner/humanize-distance": "^1.2.0",
     "@opentripplanner/icons": "^2.0.10",
-    "@opentripplanner/itinerary-body": "^5.2.8",
+    "@opentripplanner/itinerary-body": "^5.3.0",
     "@opentripplanner/location-field": "^2.0.17",
     "@opentripplanner/location-icon": "^1.4.1",
-    "@opentripplanner/map-popup": "^3.0.3",
+    "@opentripplanner/map-popup": "^3.1.0",
     "@opentripplanner/otp2-tile-overlay": "^1.0.12",
     "@opentripplanner/park-and-ride-overlay": "^2.0.8",
     "@opentripplanner/printable-itinerary": "^2.0.20",
diff --git a/yarn.lock b/yarn.lock
index 78e072aa4..2cddcde2c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2434,7 +2434,7 @@
     "@opentripplanner/location-icon" "^1.4.1"
     flat "^5.0.2"
 
-"@opentripplanner/geocoder@^2.0.1", "@opentripplanner/geocoder@^2.2.2":
+"@opentripplanner/geocoder@^2.2.2":
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/@opentripplanner/geocoder/-/geocoder-2.2.2.tgz#8ddc669287ccdfff1a5cce14d1fa8049421c6480"
   integrity sha512-tJIOOE5N9kpMj0ji1YyVfWwg4yAFVs7Ks+EET67acql768bXwRE6rHoX6oaHvKhbCDjaQ7kuPIwi1BYWHQgg0Q==
@@ -2458,14 +2458,14 @@
     "@opentripplanner/core-utils" "^11.2.3"
     prop-types "^15.7.2"
 
-"@opentripplanner/itinerary-body@^5.2.6", "@opentripplanner/itinerary-body@^5.2.8":
-  version "5.2.8"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-5.2.8.tgz#12cb356dc3c203af9603541d46b2c30f0cc8dbe1"
-  integrity sha512-D/gH80BlTR/J4XYyhVG234J5qVatzYwEjObHUY01u17X+uUgRcl05zv9vNSLx9Va0UDxPc7oR+Ro5VnkW+QkKA==
+"@opentripplanner/itinerary-body@^5.2.6", "@opentripplanner/itinerary-body@^5.3.0":
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-5.3.0.tgz#1a611dc6c49438666e58c34d0f1f88ab6ff48f2d"
+  integrity sha512-yNMluEX4jJMEdvObGcivnJCS8wMqzZ1j+zJ/40oE9uK9XNyT6o3ascpcsDPN45ZJTIUBoj1FVhItvrfLxaRYMA==
   dependencies:
-    "@opentripplanner/core-utils" "^11.2.3"
+    "@opentripplanner/core-utils" "^11.3.1"
     "@opentripplanner/humanize-distance" "^1.2.0"
-    "@opentripplanner/icons" "^2.0.9"
+    "@opentripplanner/icons" "^2.0.10"
     "@opentripplanner/location-icon" "^1.4.1"
     "@styled-icons/fa-solid" "^10.34.0"
     "@styled-icons/foundation" "^10.34.0"
@@ -2497,14 +2497,14 @@
     "@styled-icons/fa-regular" "^10.34.0"
     "@styled-icons/fa-solid" "^10.34.0"
 
-"@opentripplanner/map-popup@^3.0.2", "@opentripplanner/map-popup@^3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/map-popup/-/map-popup-3.0.3.tgz#4ded505bcf23f505b07abfe5d24142eb2faa483a"
-  integrity sha512-AvXLUfnEj5PoDHd8eFdpMXsXqmLyreSPPeiVIggNvZUDTm6uHpCAovSrSOOoFT3nOIEaUw4TCcjamJeV0gaNJw==
+"@opentripplanner/map-popup@^3.0.2", "@opentripplanner/map-popup@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/map-popup/-/map-popup-3.1.0.tgz#51627e4d4c902d10bec6fffa2c3e3eed0994a42c"
+  integrity sha512-UzQ9OYOslNqDxvGWIPOZ4KyIJ7R0CO2riC56AJeHz5EI0JSv1Rlt1b6JTz0BtJ9cbHksB2QB43x8bJs6if7mfg==
   dependencies:
-    "@opentripplanner/base-map" "^3.0.16"
-    "@opentripplanner/core-utils" "^11.2.3"
-    "@opentripplanner/from-to-location-picker" "^2.1.11"
+    "@opentripplanner/base-map" "^3.1.0"
+    "@opentripplanner/core-utils" "^11.3.1"
+    "@opentripplanner/from-to-location-picker" "^2.1.12"
     flat "^5.0.2"
 
 "@opentripplanner/otp2-tile-overlay@^1.0.12":

From 0be3161ac16acf46160c8de8db3b557d5a618592 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 24 May 2024 14:35:01 -0400
Subject: [PATCH 14/31] fix(apiV2): Don't perform query and UI changes on
 invalid mode selection.

---
 lib/actions/apiV2.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/lib/actions/apiV2.js b/lib/actions/apiV2.js
index fd0042f3d..b51cf1cbc 100644
--- a/lib/actions/apiV2.js
+++ b/lib/actions/apiV2.js
@@ -1005,6 +1005,10 @@ export function routingQuery(searchId = null, updateSearchInReducer) {
     // This is likely due to the fact that BICYCLE_RENT is treated as a transit submode.
     const combinations = modes ? [baseQuery] : generateCombinations(baseQuery)
 
+    if (combinations.length === 0) {
+      return RoutingQueryCallResult.INVALID_MODE_SELECTION
+    }
+
     dispatch(
       routingRequest({
         activeItinerary,
@@ -1171,9 +1175,7 @@ export function routingQuery(searchId = null, updateSearchInReducer) {
       dispatch(updateOtpUrlParams(state, searchId))
     }
 
-    return combinations.length === 0
-      ? RoutingQueryCallResult.INVALID_MODE_SELECTION
-      : RoutingQueryCallResult.SUCCESS
+    return RoutingQueryCallResult.SUCCESS
   }
 }
 

From 176a483d61077ec1272855efdd25127aec8b9076 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 24 May 2024 15:14:02 -0400
Subject: [PATCH 15/31] chore(codespell): Ignore MapPin

---
 .github/workflows/codespell.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/codespell.yml b/.github/workflows/codespell.yml
index b1568432d..06c6da3f4 100644
--- a/.github/workflows/codespell.yml
+++ b/.github/workflows/codespell.yml
@@ -12,6 +12,7 @@ jobs:
       - uses: codespell-project/actions-codespell@master
         with:
           check_filenames: true
+          ignore_words_list: MapPin
           # skip git, yarn, pixel test script and HAR file, and all i18n resources.
           # Also, the a11y test file has a false positive and the ignore list does not work
           # see https://github.com/opentripplanner/otp-react-redux/pull/436/checks?check_run_id=3369380014

From 478e6ae798d86dc4e301f60e397f2f5c1dabb56a Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Fri, 24 May 2024 15:28:25 -0500
Subject: [PATCH 16/31] fix import order and update codespell ignore_words_list

---
 .github/workflows/codespell.yml    | 1 +
 lib/components/map/point-popup.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/codespell.yml b/.github/workflows/codespell.yml
index b1568432d..06c6da3f4 100644
--- a/.github/workflows/codespell.yml
+++ b/.github/workflows/codespell.yml
@@ -12,6 +12,7 @@ jobs:
       - uses: codespell-project/actions-codespell@master
         with:
           check_filenames: true
+          ignore_words_list: MapPin
           # skip git, yarn, pixel test script and HAR file, and all i18n resources.
           # Also, the a11y test file has a false positive and the ignore list does not work
           # see https://github.com/opentripplanner/otp-react-redux/pull/436/checks?check_run_id=3369380014
diff --git a/lib/components/map/point-popup.tsx b/lib/components/map/point-popup.tsx
index 1ce3f5728..6b7c4c24f 100644
--- a/lib/components/map/point-popup.tsx
+++ b/lib/components/map/point-popup.tsx
@@ -1,4 +1,5 @@
 import { connect } from 'react-redux'
+import { FocusTrapWrapper } from '@opentripplanner/map-popup/lib'
 import { Popup } from '@opentripplanner/base-map'
 import { Search } from '@styled-icons/fa-solid/Search'
 import { useIntl, WrappedComponentProps } from 'react-intl'
@@ -9,7 +10,6 @@ import styled from 'styled-components'
 import type { Location } from '@opentripplanner/types'
 
 import * as mapActions from '../../actions/map'
-import { FocusTrapWrapper } from '@opentripplanner/map-popup/lib'
 import { Icon } from '../util/styledIcon'
 import { renderCoordinates } from '../../util/i18n'
 import { SetLocationHandler, ZoomToPlaceHandler } from '../util/types'

From f385a1360eaf5c8855e75d480905080a9578d8c9 Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Fri, 24 May 2024 15:30:13 -0500
Subject: [PATCH 17/31] update snapshots

---
 .../viewers/__snapshots__/nearby-view.js.snap | 1154 ++++++++---------
 .../stop-schedule-viewer.ts.snap              |    6 +-
 2 files changed, 580 insertions(+), 580 deletions(-)

diff --git a/__tests__/components/viewers/__snapshots__/nearby-view.js.snap b/__tests__/components/viewers/__snapshots__/nearby-view.js.snap
index 82a1f7065..3c60f41c2 100644
--- a/__tests__/components/viewers/__snapshots__/nearby-view.js.snap
+++ b/__tests__/components/viewers/__snapshots__/nearby-view.js.snap
@@ -45,7 +45,7 @@ exports[`components > viewers > nearby view renders nothing on a blank page 1`]
           className="nearby-view base-color-bg"
         >
           <div
-            className="sc-cuWdqJ cZFGA-D nearby-view base-color-bg"
+            className="sc-fTACoA bTJfzH nearby-view base-color-bg"
           >
             <Connect(PageTitle)
               title="components.NearbyView.header"
@@ -84,7 +84,7 @@ exports[`components > viewers > nearby view renders nothing on a blank page 1`]
               }
             >
               <ol
-                className="sc-dcwqsv bgYBAJ base-color-bg"
+                className="sc-ehsPLh bsdzfb base-color-bg"
                 style={
                   Object {
                     "marginTop": 0,
@@ -4078,7 +4078,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
           className="nearby-view base-color-bg"
         >
           <div
-            className="sc-cuWdqJ cZFGA-D nearby-view base-color-bg"
+            className="sc-fTACoA bTJfzH nearby-view base-color-bg"
           >
             <Connect(PageTitle)
               title="components.NearbyView.header"
@@ -4117,7 +4117,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
               }
             >
               <ol
-                className="sc-dcwqsv bgYBAJ base-color-bg"
+                className="sc-ehsPLh bsdzfb base-color-bg"
                 style={
                   Object {
                     "marginTop": 0,
@@ -4221,15 +4221,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-ehsPLh kxBipD"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <styled.div>
                               <div
-                                className="sc-hFXoIY jfMSdz"
+                                className="sc-iuAqRD gAoDco"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-iuAqRD ffydil"
+                                    className="sc-DJgqy jIxkFu"
                                   >
                                     <IconWithText
                                       icon={
@@ -4264,7 +4264,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -4310,7 +4310,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-dwqccx bGdJor"
+                                      className="sc-gUUBao eMZwka"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -4329,7 +4329,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-gUUBao dCmAkv"
+                                className="sc-hJxDiT gGpYuf"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -4403,11 +4403,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <DotCircle
-                                                      className="sc-aKXVD bNLtzV"
+                                                      className="sc-kmATbt bhVrag"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-aKXVD bNLtzV"
+                                                        className="sc-kmATbt bhVrag"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -4419,7 +4419,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -4432,7 +4432,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -4480,11 +4480,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <MapMarkerAlt
-                                                      className="sc-cvJIAo esTqCF"
+                                                      className="sc-dkmKIT cEQWzV"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-cvJIAo esTqCF"
+                                                        className="sc-dkmKIT cEQWzV"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -4496,7 +4496,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -4509,7 +4509,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -4652,15 +4652,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-ehsPLh kxBipD"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <styled.div>
                               <div
-                                className="sc-hFXoIY jfMSdz"
+                                className="sc-iuAqRD gAoDco"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-iuAqRD ffydil"
+                                    className="sc-DJgqy jIxkFu"
                                   >
                                     <IconWithText
                                       icon={
@@ -4695,7 +4695,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -4741,7 +4741,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-dwqccx bGdJor"
+                                      className="sc-gUUBao eMZwka"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -4760,7 +4760,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-gUUBao dCmAkv"
+                                className="sc-hJxDiT gGpYuf"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -4834,11 +4834,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <DotCircle
-                                                      className="sc-aKXVD bNLtzV"
+                                                      className="sc-kmATbt bhVrag"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-aKXVD bNLtzV"
+                                                        className="sc-kmATbt bhVrag"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -4850,7 +4850,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -4863,7 +4863,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -4911,11 +4911,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <MapMarkerAlt
-                                                      className="sc-cvJIAo esTqCF"
+                                                      className="sc-dkmKIT cEQWzV"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-cvJIAo esTqCF"
+                                                        className="sc-dkmKIT cEQWzV"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -4927,7 +4927,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -4940,7 +4940,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -5083,15 +5083,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-ehsPLh kxBipD"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <styled.div>
                               <div
-                                className="sc-hFXoIY jfMSdz"
+                                className="sc-iuAqRD gAoDco"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-iuAqRD ffydil"
+                                    className="sc-DJgqy jIxkFu"
                                   >
                                     <IconWithText
                                       icon={
@@ -5126,7 +5126,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -5172,7 +5172,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-dwqccx bGdJor"
+                                      className="sc-gUUBao eMZwka"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -5191,7 +5191,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-gUUBao dCmAkv"
+                                className="sc-hJxDiT gGpYuf"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -5265,11 +5265,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <DotCircle
-                                                      className="sc-aKXVD bNLtzV"
+                                                      className="sc-kmATbt bhVrag"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-aKXVD bNLtzV"
+                                                        className="sc-kmATbt bhVrag"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -5281,7 +5281,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -5294,7 +5294,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -5342,11 +5342,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <MapMarkerAlt
-                                                      className="sc-cvJIAo esTqCF"
+                                                      className="sc-dkmKIT cEQWzV"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-cvJIAo esTqCF"
+                                                        className="sc-dkmKIT cEQWzV"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -5358,7 +5358,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -5371,7 +5371,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -7704,7 +7704,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-ehsPLh kxBipD"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -10014,11 +10014,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-hFXoIY jfMSdz"
+                                    className="sc-iuAqRD gAoDco"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-iuAqRD ffydil"
+                                        className="sc-DJgqy jIxkFu"
                                       >
                                         <span>
                                           Roosevelt Station - Bay 2
@@ -10030,7 +10030,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-dwqccx bGdJor"
+                                          className="sc-gUUBao eMZwka"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -10049,7 +10049,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-gUUBao dCmAkv"
+                                    className="sc-hJxDiT gGpYuf"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -10106,7 +10106,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             >
                                               <Styled(styled.span)>
                                                 <span
-                                                  className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                  className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                 >
                                                   <Calendar>
                                                     <StyledIconBase
@@ -11326,11 +11326,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <DotCircle
-                                                          className="sc-aKXVD bNLtzV"
+                                                          className="sc-kmATbt bhVrag"
                                                           size="0.9em"
                                                         >
                                                           <StyledIconBase
-                                                            className="sc-aKXVD bNLtzV"
+                                                            className="sc-kmATbt bhVrag"
                                                             iconAttrs={
                                                               Object {
                                                                 "fill": "currentColor",
@@ -11342,7 +11342,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             size="0.9em"
                                                           >
                                                             <ForwardRef
-                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                               iconAttrs={
                                                                 Object {
                                                                   "fill": "currentColor",
@@ -11355,7 +11355,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             >
                                                               <svg
                                                                 aria-hidden="true"
-                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                                 fill="currentColor"
                                                                 focusable="false"
                                                                 height="0.9em"
@@ -11403,11 +11403,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <MapMarkerAlt
-                                                          className="sc-cvJIAo esTqCF"
+                                                          className="sc-dkmKIT cEQWzV"
                                                           size="0.9em"
                                                         >
                                                           <StyledIconBase
-                                                            className="sc-cvJIAo esTqCF"
+                                                            className="sc-dkmKIT cEQWzV"
                                                             iconAttrs={
                                                               Object {
                                                                 "fill": "currentColor",
@@ -11419,7 +11419,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             size="0.9em"
                                                           >
                                                             <ForwardRef
-                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                               iconAttrs={
                                                                 Object {
                                                                   "fill": "currentColor",
@@ -11432,7 +11432,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             >
                                                               <svg
                                                                 aria-hidden="true"
-                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                                 fill="currentColor"
                                                                 focusable="false"
                                                                 height="0.9em"
@@ -11481,7 +11481,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-liccgK cELqZs"
+                                  className="sc-cuWdqJ jWwXYb"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -11657,7 +11657,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy"
+                                        className="sc-clhTte ctsdph"
                                       >
                                         <div
                                           className="header stop-view"
@@ -11705,7 +11705,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="45"
                                                 >
                                                   <span
-                                                    className="sc-fTACoA MLrMk"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -11732,7 +11732,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-clhTte dZqpkF"
+                                              className="sc-kJFuxL eQoNJh"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -11756,7 +11756,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -11867,7 +11867,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -11879,10 +11879,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -11893,7 +11893,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -11905,7 +11905,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -11928,7 +11928,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -12027,7 +12027,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -12039,10 +12039,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -12053,7 +12053,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -12065,7 +12065,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -12088,7 +12088,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -12187,7 +12187,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -12243,7 +12243,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -12467,7 +12467,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy"
+                                        className="sc-clhTte ctsdph"
                                       >
                                         <div
                                           className="header stop-view"
@@ -12515,7 +12515,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="62"
                                                 >
                                                   <span
-                                                    className="sc-fTACoA MLrMk"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -12542,7 +12542,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-clhTte dZqpkF"
+                                              className="sc-kJFuxL eQoNJh"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -12566,7 +12566,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -12677,7 +12677,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -12689,10 +12689,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -12703,7 +12703,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -12715,7 +12715,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -12738,7 +12738,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -12837,7 +12837,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -12893,7 +12893,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -12992,7 +12992,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -13048,7 +13048,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -13207,7 +13207,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy"
+                                        className="sc-clhTte ctsdph"
                                       >
                                         <div
                                           className="header stop-view"
@@ -13255,7 +13255,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="79"
                                                 >
                                                   <span
-                                                    className="sc-fTACoA MLrMk"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -13282,7 +13282,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-clhTte dZqpkF"
+                                              className="sc-kJFuxL eQoNJh"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -13306,7 +13306,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -13417,7 +13417,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -13429,10 +13429,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -13443,7 +13443,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -13455,7 +13455,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -13478,7 +13478,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -13577,7 +13577,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -13633,7 +13633,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -13732,7 +13732,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -13788,7 +13788,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -15327,7 +15327,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-ehsPLh kxBipD"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -16833,11 +16833,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-hFXoIY jfMSdz"
+                                    className="sc-iuAqRD gAoDco"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-iuAqRD ffydil"
+                                        className="sc-DJgqy jIxkFu"
                                       >
                                         <span>
                                           Roosevelt
@@ -16849,7 +16849,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-dwqccx bGdJor"
+                                          className="sc-gUUBao eMZwka"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -16868,7 +16868,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-gUUBao dCmAkv"
+                                    className="sc-hJxDiT gGpYuf"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -16925,7 +16925,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             >
                                               <Styled(styled.span)>
                                                 <span
-                                                  className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                  className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                 >
                                                   <Calendar>
                                                     <StyledIconBase
@@ -17743,11 +17743,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <DotCircle
-                                                          className="sc-aKXVD bNLtzV"
+                                                          className="sc-kmATbt bhVrag"
                                                           size="0.9em"
                                                         >
                                                           <StyledIconBase
-                                                            className="sc-aKXVD bNLtzV"
+                                                            className="sc-kmATbt bhVrag"
                                                             iconAttrs={
                                                               Object {
                                                                 "fill": "currentColor",
@@ -17759,7 +17759,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             size="0.9em"
                                                           >
                                                             <ForwardRef
-                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                               iconAttrs={
                                                                 Object {
                                                                   "fill": "currentColor",
@@ -17772,7 +17772,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             >
                                                               <svg
                                                                 aria-hidden="true"
-                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                                 fill="currentColor"
                                                                 focusable="false"
                                                                 height="0.9em"
@@ -17820,11 +17820,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <MapMarkerAlt
-                                                          className="sc-cvJIAo esTqCF"
+                                                          className="sc-dkmKIT cEQWzV"
                                                           size="0.9em"
                                                         >
                                                           <StyledIconBase
-                                                            className="sc-cvJIAo esTqCF"
+                                                            className="sc-dkmKIT cEQWzV"
                                                             iconAttrs={
                                                               Object {
                                                                 "fill": "currentColor",
@@ -17836,7 +17836,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             size="0.9em"
                                                           >
                                                             <ForwardRef
-                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                               iconAttrs={
                                                                 Object {
                                                                   "fill": "currentColor",
@@ -17849,7 +17849,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             >
                                                               <svg
                                                                 aria-hidden="true"
-                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                                 fill="currentColor"
                                                                 focusable="false"
                                                                 height="0.9em"
@@ -17898,7 +17898,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-liccgK cELqZs"
+                                  className="sc-cuWdqJ jWwXYb"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -18009,7 +18009,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy"
+                                        className="sc-clhTte ctsdph"
                                       >
                                         <div
                                           className="header stop-view"
@@ -18057,7 +18057,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="1 Line"
                                                 >
                                                   <span
-                                                    className="sc-fTACoA NVRqI"
+                                                    className="sc-bTRMho cyqbfo"
                                                     color="28813F"
                                                     style={
                                                       Object {
@@ -18084,7 +18084,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-clhTte dZqpkF"
+                                              className="sc-kJFuxL eQoNJh"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -18108,7 +18108,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -18219,7 +18219,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -18275,7 +18275,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -18374,7 +18374,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -18430,7 +18430,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -18529,7 +18529,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -18585,7 +18585,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -18692,7 +18692,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy"
+                                        className="sc-clhTte ctsdph"
                                       >
                                         <div
                                           className="header stop-view"
@@ -18740,7 +18740,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="1 Line"
                                                 >
                                                   <span
-                                                    className="sc-fTACoA NVRqI"
+                                                    className="sc-bTRMho cyqbfo"
                                                     color="28813F"
                                                     style={
                                                       Object {
@@ -18767,7 +18767,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-clhTte dZqpkF"
+                                              className="sc-kJFuxL eQoNJh"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -18791,7 +18791,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -18902,7 +18902,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -18958,7 +18958,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="saturday"
@@ -19182,7 +19182,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy"
+                                        className="sc-clhTte ctsdph"
                                       >
                                         <div
                                           className="header stop-view"
@@ -19230,7 +19230,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="1 Line"
                                                 >
                                                   <span
-                                                    className="sc-fTACoA NVRqI"
+                                                    className="sc-bTRMho cyqbfo"
                                                     color="28813F"
                                                     style={
                                                       Object {
@@ -19257,7 +19257,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-clhTte dZqpkF"
+                                              className="sc-kJFuxL eQoNJh"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -19281,7 +19281,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -19392,7 +19392,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -19448,7 +19448,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="saturday"
@@ -19547,7 +19547,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -19603,7 +19603,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="saturday"
@@ -19702,7 +19702,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -19758,7 +19758,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="saturday"
@@ -19911,15 +19911,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-ehsPLh kxBipD"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <styled.div>
                               <div
-                                className="sc-hFXoIY jfMSdz"
+                                className="sc-iuAqRD gAoDco"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-iuAqRD ffydil"
+                                    className="sc-DJgqy jIxkFu"
                                   >
                                     <IconWithText
                                       icon={
@@ -19954,7 +19954,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -20000,7 +20000,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-dwqccx bGdJor"
+                                      className="sc-gUUBao eMZwka"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -20019,7 +20019,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-gUUBao dCmAkv"
+                                className="sc-hJxDiT gGpYuf"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -20093,11 +20093,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <DotCircle
-                                                      className="sc-aKXVD bNLtzV"
+                                                      className="sc-kmATbt bhVrag"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-aKXVD bNLtzV"
+                                                        className="sc-kmATbt bhVrag"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -20109,7 +20109,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -20122,7 +20122,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -20170,11 +20170,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <MapMarkerAlt
-                                                      className="sc-cvJIAo esTqCF"
+                                                      className="sc-dkmKIT cEQWzV"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-cvJIAo esTqCF"
+                                                        className="sc-dkmKIT cEQWzV"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -20186,7 +20186,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -20199,7 +20199,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -20342,15 +20342,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-ehsPLh kxBipD"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <styled.div>
                               <div
-                                className="sc-hFXoIY jfMSdz"
+                                className="sc-iuAqRD gAoDco"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-iuAqRD ffydil"
+                                    className="sc-DJgqy jIxkFu"
                                   >
                                     <IconWithText
                                       icon={
@@ -20385,7 +20385,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -20431,7 +20431,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-dwqccx bGdJor"
+                                      className="sc-gUUBao eMZwka"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -20450,7 +20450,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-gUUBao dCmAkv"
+                                className="sc-hJxDiT gGpYuf"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -20524,11 +20524,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <DotCircle
-                                                      className="sc-aKXVD bNLtzV"
+                                                      className="sc-kmATbt bhVrag"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-aKXVD bNLtzV"
+                                                        className="sc-kmATbt bhVrag"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -20540,7 +20540,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -20553,7 +20553,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -20601,11 +20601,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <MapMarkerAlt
-                                                      className="sc-cvJIAo esTqCF"
+                                                      className="sc-dkmKIT cEQWzV"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-cvJIAo esTqCF"
+                                                        className="sc-dkmKIT cEQWzV"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -20617,7 +20617,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -20630,7 +20630,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -20773,15 +20773,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-ehsPLh kxBipD"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <styled.div>
                               <div
-                                className="sc-hFXoIY jfMSdz"
+                                className="sc-iuAqRD gAoDco"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-iuAqRD ffydil"
+                                    className="sc-DJgqy jIxkFu"
                                   >
                                     <IconWithText
                                       icon={
@@ -20816,7 +20816,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -20862,7 +20862,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-dwqccx bGdJor"
+                                      className="sc-gUUBao eMZwka"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -20881,7 +20881,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-gUUBao dCmAkv"
+                                className="sc-hJxDiT gGpYuf"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -20955,11 +20955,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <DotCircle
-                                                      className="sc-aKXVD bNLtzV"
+                                                      className="sc-kmATbt bhVrag"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-aKXVD bNLtzV"
+                                                        className="sc-kmATbt bhVrag"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -20971,7 +20971,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -20984,7 +20984,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -21032,11 +21032,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <MapMarkerAlt
-                                                      className="sc-cvJIAo esTqCF"
+                                                      className="sc-dkmKIT cEQWzV"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-cvJIAo esTqCF"
+                                                        className="sc-dkmKIT cEQWzV"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -21048,7 +21048,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -21061,7 +21061,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -23702,7 +23702,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-ehsPLh kxBipD"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -26320,11 +26320,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-hFXoIY jfMSdz"
+                                    className="sc-iuAqRD gAoDco"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-iuAqRD ffydil"
+                                        className="sc-DJgqy jIxkFu"
                                       >
                                         <span>
                                           Roosevelt Station - Bay 1
@@ -26336,7 +26336,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-dwqccx bGdJor"
+                                          className="sc-gUUBao eMZwka"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -26355,7 +26355,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-gUUBao dCmAkv"
+                                    className="sc-hJxDiT gGpYuf"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -26412,7 +26412,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             >
                                               <Styled(styled.span)>
                                                 <span
-                                                  className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                  className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                 >
                                                   <Calendar>
                                                     <StyledIconBase
@@ -27786,11 +27786,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <DotCircle
-                                                          className="sc-aKXVD bNLtzV"
+                                                          className="sc-kmATbt bhVrag"
                                                           size="0.9em"
                                                         >
                                                           <StyledIconBase
-                                                            className="sc-aKXVD bNLtzV"
+                                                            className="sc-kmATbt bhVrag"
                                                             iconAttrs={
                                                               Object {
                                                                 "fill": "currentColor",
@@ -27802,7 +27802,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             size="0.9em"
                                                           >
                                                             <ForwardRef
-                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                               iconAttrs={
                                                                 Object {
                                                                   "fill": "currentColor",
@@ -27815,7 +27815,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             >
                                                               <svg
                                                                 aria-hidden="true"
-                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                                 fill="currentColor"
                                                                 focusable="false"
                                                                 height="0.9em"
@@ -27863,11 +27863,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <MapMarkerAlt
-                                                          className="sc-cvJIAo esTqCF"
+                                                          className="sc-dkmKIT cEQWzV"
                                                           size="0.9em"
                                                         >
                                                           <StyledIconBase
-                                                            className="sc-cvJIAo esTqCF"
+                                                            className="sc-dkmKIT cEQWzV"
                                                             iconAttrs={
                                                               Object {
                                                                 "fill": "currentColor",
@@ -27879,7 +27879,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             size="0.9em"
                                                           >
                                                             <ForwardRef
-                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                               iconAttrs={
                                                                 Object {
                                                                   "fill": "currentColor",
@@ -27892,7 +27892,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             >
                                                               <svg
                                                                 aria-hidden="true"
-                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                                 fill="currentColor"
                                                                 focusable="false"
                                                                 height="0.9em"
@@ -27941,7 +27941,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-liccgK cELqZs"
+                                  className="sc-cuWdqJ jWwXYb"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -28117,7 +28117,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy"
+                                        className="sc-clhTte ctsdph"
                                       >
                                         <div
                                           className="header stop-view"
@@ -28165,7 +28165,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="45"
                                                 >
                                                   <span
-                                                    className="sc-fTACoA MLrMk"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -28192,7 +28192,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-clhTte dZqpkF"
+                                              className="sc-kJFuxL eQoNJh"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -28216,7 +28216,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -28327,7 +28327,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -28339,10 +28339,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -28353,7 +28353,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -28365,7 +28365,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -28388,7 +28388,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -28487,7 +28487,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -28499,10 +28499,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -28513,7 +28513,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -28525,7 +28525,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -28548,7 +28548,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -28647,7 +28647,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -28703,7 +28703,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -28940,7 +28940,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy"
+                                        className="sc-clhTte ctsdph"
                                       >
                                         <div
                                           className="header stop-view"
@@ -28988,7 +28988,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="62"
                                                 >
                                                   <span
-                                                    className="sc-fTACoA MLrMk"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -29015,7 +29015,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-clhTte dZqpkF"
+                                              className="sc-kJFuxL eQoNJh"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -29039,7 +29039,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -29150,7 +29150,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -29162,10 +29162,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -29176,7 +29176,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -29188,7 +29188,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -29211,7 +29211,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -29310,7 +29310,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -29366,7 +29366,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -29465,7 +29465,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -29477,10 +29477,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -29491,7 +29491,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -29503,7 +29503,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -29526,7 +29526,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -29685,7 +29685,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy"
+                                        className="sc-clhTte ctsdph"
                                       >
                                         <div
                                           className="header stop-view"
@@ -29733,7 +29733,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="79"
                                                 >
                                                   <span
-                                                    className="sc-fTACoA MLrMk"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -29760,7 +29760,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-clhTte dZqpkF"
+                                              className="sc-kJFuxL eQoNJh"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -29784,7 +29784,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -29895,7 +29895,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -29951,7 +29951,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -30050,7 +30050,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -30106,7 +30106,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -30205,7 +30205,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -30261,7 +30261,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -30368,7 +30368,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy"
+                                        className="sc-clhTte ctsdph"
                                       >
                                         <div
                                           className="header stop-view"
@@ -30416,7 +30416,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="988"
                                                 >
                                                   <span
-                                                    className="sc-fTACoA MLrMk"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -30443,7 +30443,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-clhTte dZqpkF"
+                                              className="sc-kJFuxL eQoNJh"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -30467,7 +30467,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -30578,7 +30578,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -30634,7 +30634,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -30787,15 +30787,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-ehsPLh kxBipD"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <styled.div>
                               <div
-                                className="sc-hFXoIY jfMSdz"
+                                className="sc-iuAqRD gAoDco"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-iuAqRD ffydil"
+                                    className="sc-DJgqy jIxkFu"
                                   >
                                     <IconWithText
                                       icon={
@@ -30830,7 +30830,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -30876,7 +30876,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-dwqccx bGdJor"
+                                      className="sc-gUUBao eMZwka"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -30895,7 +30895,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-gUUBao dCmAkv"
+                                className="sc-hJxDiT gGpYuf"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -30969,11 +30969,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <DotCircle
-                                                      className="sc-aKXVD bNLtzV"
+                                                      className="sc-kmATbt bhVrag"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-aKXVD bNLtzV"
+                                                        className="sc-kmATbt bhVrag"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -30985,7 +30985,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -30998,7 +30998,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -31046,11 +31046,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <MapMarkerAlt
-                                                      className="sc-cvJIAo esTqCF"
+                                                      className="sc-dkmKIT cEQWzV"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-cvJIAo esTqCF"
+                                                        className="sc-dkmKIT cEQWzV"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -31062,7 +31062,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -31075,7 +31075,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -31218,15 +31218,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-ehsPLh kxBipD"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <styled.div>
                               <div
-                                className="sc-hFXoIY jfMSdz"
+                                className="sc-iuAqRD gAoDco"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-iuAqRD ffydil"
+                                    className="sc-DJgqy jIxkFu"
                                   >
                                     <IconWithText
                                       icon={
@@ -31261,7 +31261,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -31307,7 +31307,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-dwqccx bGdJor"
+                                      className="sc-gUUBao eMZwka"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -31326,7 +31326,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-gUUBao dCmAkv"
+                                className="sc-hJxDiT gGpYuf"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -31400,11 +31400,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <DotCircle
-                                                      className="sc-aKXVD bNLtzV"
+                                                      className="sc-kmATbt bhVrag"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-aKXVD bNLtzV"
+                                                        className="sc-kmATbt bhVrag"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -31416,7 +31416,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -31429,7 +31429,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -31477,11 +31477,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <MapMarkerAlt
-                                                      className="sc-cvJIAo esTqCF"
+                                                      className="sc-dkmKIT cEQWzV"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-cvJIAo esTqCF"
+                                                        className="sc-dkmKIT cEQWzV"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -31493,7 +31493,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -31506,7 +31506,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -31649,15 +31649,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-ehsPLh kxBipD"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <styled.div>
                               <div
-                                className="sc-hFXoIY jfMSdz"
+                                className="sc-iuAqRD gAoDco"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-iuAqRD ffydil"
+                                    className="sc-DJgqy jIxkFu"
                                   >
                                     <IconWithText
                                       icon={
@@ -31692,7 +31692,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -31738,7 +31738,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-dwqccx bGdJor"
+                                      className="sc-gUUBao eMZwka"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -31757,7 +31757,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-gUUBao dCmAkv"
+                                className="sc-hJxDiT gGpYuf"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -31831,11 +31831,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <DotCircle
-                                                      className="sc-aKXVD bNLtzV"
+                                                      className="sc-kmATbt bhVrag"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-aKXVD bNLtzV"
+                                                        className="sc-kmATbt bhVrag"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -31847,7 +31847,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -31860,7 +31860,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -31908,11 +31908,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <MapMarkerAlt
-                                                      className="sc-cvJIAo esTqCF"
+                                                      className="sc-dkmKIT cEQWzV"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-cvJIAo esTqCF"
+                                                        className="sc-dkmKIT cEQWzV"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -31924,7 +31924,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -31937,7 +31937,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -32080,15 +32080,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-ehsPLh kxBipD"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <styled.div>
                               <div
-                                className="sc-hFXoIY jfMSdz"
+                                className="sc-iuAqRD gAoDco"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-iuAqRD ffydil"
+                                    className="sc-DJgqy jIxkFu"
                                   >
                                     <IconWithText
                                       icon={
@@ -32123,7 +32123,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -32169,7 +32169,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-dwqccx bGdJor"
+                                      className="sc-gUUBao eMZwka"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -32188,7 +32188,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-gUUBao dCmAkv"
+                                className="sc-hJxDiT gGpYuf"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -32262,11 +32262,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <DotCircle
-                                                      className="sc-aKXVD bNLtzV"
+                                                      className="sc-kmATbt bhVrag"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-aKXVD bNLtzV"
+                                                        className="sc-kmATbt bhVrag"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -32278,7 +32278,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -32291,7 +32291,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -32339,11 +32339,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <MapMarkerAlt
-                                                      className="sc-cvJIAo esTqCF"
+                                                      className="sc-dkmKIT cEQWzV"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-cvJIAo esTqCF"
+                                                        className="sc-dkmKIT cEQWzV"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -32355,7 +32355,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -32368,7 +32368,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -32511,15 +32511,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-ehsPLh kxBipD"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <styled.div>
                               <div
-                                className="sc-hFXoIY jfMSdz"
+                                className="sc-iuAqRD gAoDco"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-iuAqRD ffydil"
+                                    className="sc-DJgqy jIxkFu"
                                   >
                                     <IconWithText
                                       icon={
@@ -32554,7 +32554,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -32600,7 +32600,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-dwqccx bGdJor"
+                                      className="sc-gUUBao eMZwka"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -32619,7 +32619,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-gUUBao dCmAkv"
+                                className="sc-hJxDiT gGpYuf"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -32693,11 +32693,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <DotCircle
-                                                      className="sc-aKXVD bNLtzV"
+                                                      className="sc-kmATbt bhVrag"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-aKXVD bNLtzV"
+                                                        className="sc-kmATbt bhVrag"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -32709,7 +32709,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -32722,7 +32722,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -32770,11 +32770,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <MapMarkerAlt
-                                                      className="sc-cvJIAo esTqCF"
+                                                      className="sc-dkmKIT cEQWzV"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-cvJIAo esTqCF"
+                                                        className="sc-dkmKIT cEQWzV"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -32786,7 +32786,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -32799,7 +32799,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -34328,7 +34328,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-ehsPLh kxBipD"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -35834,11 +35834,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-hFXoIY jfMSdz"
+                                    className="sc-iuAqRD gAoDco"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-iuAqRD ffydil"
+                                        className="sc-DJgqy jIxkFu"
                                       >
                                         <span>
                                           Roosevelt Station Bay 5 - Bay 5
@@ -35850,7 +35850,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-dwqccx bGdJor"
+                                          className="sc-gUUBao eMZwka"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -35869,7 +35869,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-gUUBao dCmAkv"
+                                    className="sc-hJxDiT gGpYuf"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -35926,7 +35926,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             >
                                               <Styled(styled.span)>
                                                 <span
-                                                  className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                  className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                 >
                                                   <Calendar>
                                                     <StyledIconBase
@@ -36744,11 +36744,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <DotCircle
-                                                          className="sc-aKXVD bNLtzV"
+                                                          className="sc-kmATbt bhVrag"
                                                           size="0.9em"
                                                         >
                                                           <StyledIconBase
-                                                            className="sc-aKXVD bNLtzV"
+                                                            className="sc-kmATbt bhVrag"
                                                             iconAttrs={
                                                               Object {
                                                                 "fill": "currentColor",
@@ -36760,7 +36760,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             size="0.9em"
                                                           >
                                                             <ForwardRef
-                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                               iconAttrs={
                                                                 Object {
                                                                   "fill": "currentColor",
@@ -36773,7 +36773,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             >
                                                               <svg
                                                                 aria-hidden="true"
-                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                                 fill="currentColor"
                                                                 focusable="false"
                                                                 height="0.9em"
@@ -36821,11 +36821,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <MapMarkerAlt
-                                                          className="sc-cvJIAo esTqCF"
+                                                          className="sc-dkmKIT cEQWzV"
                                                           size="0.9em"
                                                         >
                                                           <StyledIconBase
-                                                            className="sc-cvJIAo esTqCF"
+                                                            className="sc-dkmKIT cEQWzV"
                                                             iconAttrs={
                                                               Object {
                                                                 "fill": "currentColor",
@@ -36837,7 +36837,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             size="0.9em"
                                                           >
                                                             <ForwardRef
-                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                               iconAttrs={
                                                                 Object {
                                                                   "fill": "currentColor",
@@ -36850,7 +36850,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             >
                                                               <svg
                                                                 aria-hidden="true"
-                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                                 fill="currentColor"
                                                                 focusable="false"
                                                                 height="0.9em"
@@ -36899,7 +36899,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-liccgK cELqZs"
+                                  className="sc-cuWdqJ jWwXYb"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -37010,7 +37010,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy"
+                                        className="sc-clhTte ctsdph"
                                       >
                                         <div
                                           className="header stop-view"
@@ -37058,7 +37058,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="67"
                                                 >
                                                   <span
-                                                    className="sc-fTACoA MLrMk"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -37085,7 +37085,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-clhTte dZqpkF"
+                                              className="sc-kJFuxL eQoNJh"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -37109,7 +37109,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -37220,7 +37220,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -37232,10 +37232,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -37246,7 +37246,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -37258,7 +37258,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -37281,7 +37281,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -37380,7 +37380,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -37436,7 +37436,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -37535,7 +37535,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -37591,7 +37591,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -37815,7 +37815,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy"
+                                        className="sc-clhTte ctsdph"
                                       >
                                         <div
                                           className="header stop-view"
@@ -37863,7 +37863,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="73"
                                                 >
                                                   <span
-                                                    className="sc-fTACoA MLrMk"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -37890,7 +37890,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-clhTte dZqpkF"
+                                              className="sc-kJFuxL eQoNJh"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -37914,7 +37914,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -38025,7 +38025,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -38081,7 +38081,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -38180,7 +38180,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -38236,7 +38236,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -38335,7 +38335,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -38391,7 +38391,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -38498,7 +38498,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy"
+                                        className="sc-clhTte ctsdph"
                                       >
                                         <div
                                           className="header stop-view"
@@ -38546,7 +38546,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="984"
                                                 >
                                                   <span
-                                                    className="sc-fTACoA MLrMk"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -38573,7 +38573,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-clhTte dZqpkF"
+                                              className="sc-kJFuxL eQoNJh"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -38597,7 +38597,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -38708,7 +38708,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -38764,7 +38764,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -38917,15 +38917,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-ehsPLh kxBipD"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <styled.div>
                               <div
-                                className="sc-hFXoIY jfMSdz"
+                                className="sc-iuAqRD gAoDco"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-iuAqRD ffydil"
+                                    className="sc-DJgqy jIxkFu"
                                   >
                                     <IconWithText
                                       icon={
@@ -38960,7 +38960,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -39006,7 +39006,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-dwqccx bGdJor"
+                                      className="sc-gUUBao eMZwka"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -39025,7 +39025,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-gUUBao dCmAkv"
+                                className="sc-hJxDiT gGpYuf"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -39099,11 +39099,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <DotCircle
-                                                      className="sc-aKXVD bNLtzV"
+                                                      className="sc-kmATbt bhVrag"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-aKXVD bNLtzV"
+                                                        className="sc-kmATbt bhVrag"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -39115,7 +39115,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -39128,7 +39128,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -39176,11 +39176,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <MapMarkerAlt
-                                                      className="sc-cvJIAo esTqCF"
+                                                      className="sc-dkmKIT cEQWzV"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-cvJIAo esTqCF"
+                                                        className="sc-dkmKIT cEQWzV"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -39192,7 +39192,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -39205,7 +39205,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -41434,7 +41434,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-ehsPLh kxBipD"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -43640,11 +43640,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-hFXoIY jfMSdz"
+                                    className="sc-iuAqRD gAoDco"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-iuAqRD ffydil"
+                                        className="sc-DJgqy jIxkFu"
                                       >
                                         <span>
                                           Roosevelt
@@ -43656,7 +43656,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-dwqccx bGdJor"
+                                          className="sc-gUUBao eMZwka"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -43675,7 +43675,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-gUUBao dCmAkv"
+                                    className="sc-hJxDiT gGpYuf"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -43732,7 +43732,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             >
                                               <Styled(styled.span)>
                                                 <span
-                                                  className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                  className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                 >
                                                   <Calendar>
                                                     <StyledIconBase
@@ -44900,11 +44900,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <DotCircle
-                                                          className="sc-aKXVD bNLtzV"
+                                                          className="sc-kmATbt bhVrag"
                                                           size="0.9em"
                                                         >
                                                           <StyledIconBase
-                                                            className="sc-aKXVD bNLtzV"
+                                                            className="sc-kmATbt bhVrag"
                                                             iconAttrs={
                                                               Object {
                                                                 "fill": "currentColor",
@@ -44916,7 +44916,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             size="0.9em"
                                                           >
                                                             <ForwardRef
-                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                               iconAttrs={
                                                                 Object {
                                                                   "fill": "currentColor",
@@ -44929,7 +44929,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             >
                                                               <svg
                                                                 aria-hidden="true"
-                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                                 fill="currentColor"
                                                                 focusable="false"
                                                                 height="0.9em"
@@ -44977,11 +44977,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <MapMarkerAlt
-                                                          className="sc-cvJIAo esTqCF"
+                                                          className="sc-dkmKIT cEQWzV"
                                                           size="0.9em"
                                                         >
                                                           <StyledIconBase
-                                                            className="sc-cvJIAo esTqCF"
+                                                            className="sc-dkmKIT cEQWzV"
                                                             iconAttrs={
                                                               Object {
                                                                 "fill": "currentColor",
@@ -44993,7 +44993,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             size="0.9em"
                                                           >
                                                             <ForwardRef
-                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                               iconAttrs={
                                                                 Object {
                                                                   "fill": "currentColor",
@@ -45006,7 +45006,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             >
                                                               <svg
                                                                 aria-hidden="true"
-                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                                 fill="currentColor"
                                                                 focusable="false"
                                                                 height="0.9em"
@@ -45055,7 +45055,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-liccgK cELqZs"
+                                  className="sc-cuWdqJ jWwXYb"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -45322,7 +45322,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy"
+                                        className="sc-clhTte ctsdph"
                                       >
                                         <div
                                           className="header stop-view"
@@ -45370,7 +45370,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="1 Line"
                                                 >
                                                   <span
-                                                    className="sc-fTACoA NVRqI"
+                                                    className="sc-bTRMho cyqbfo"
                                                     color="28813F"
                                                     style={
                                                       Object {
@@ -45397,7 +45397,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-clhTte dZqpkF"
+                                              className="sc-kJFuxL eQoNJh"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -45421,7 +45421,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -45532,7 +45532,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -45544,10 +45544,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -45558,7 +45558,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -45570,7 +45570,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -45593,7 +45593,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -45692,7 +45692,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -45704,10 +45704,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -45718,7 +45718,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -45730,7 +45730,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -45753,7 +45753,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -45852,7 +45852,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -45864,10 +45864,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -45878,7 +45878,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -45890,7 +45890,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -45913,7 +45913,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -48564,7 +48564,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-ehsPLh kxBipD"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -51182,11 +51182,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-hFXoIY jfMSdz"
+                                    className="sc-iuAqRD gAoDco"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-iuAqRD ffydil"
+                                        className="sc-DJgqy jIxkFu"
                                       >
                                         <span>
                                           Roosevelt Station - Bay 3
@@ -51198,7 +51198,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-dwqccx bGdJor"
+                                          className="sc-gUUBao eMZwka"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -51217,7 +51217,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-gUUBao dCmAkv"
+                                    className="sc-hJxDiT gGpYuf"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -51274,7 +51274,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             >
                                               <Styled(styled.span)>
                                                 <span
-                                                  className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                  className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                 >
                                                   <Calendar>
                                                     <StyledIconBase
@@ -52648,11 +52648,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <DotCircle
-                                                          className="sc-aKXVD bNLtzV"
+                                                          className="sc-kmATbt bhVrag"
                                                           size="0.9em"
                                                         >
                                                           <StyledIconBase
-                                                            className="sc-aKXVD bNLtzV"
+                                                            className="sc-kmATbt bhVrag"
                                                             iconAttrs={
                                                               Object {
                                                                 "fill": "currentColor",
@@ -52664,7 +52664,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             size="0.9em"
                                                           >
                                                             <ForwardRef
-                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                               iconAttrs={
                                                                 Object {
                                                                   "fill": "currentColor",
@@ -52677,7 +52677,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             >
                                                               <svg
                                                                 aria-hidden="true"
-                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                                 fill="currentColor"
                                                                 focusable="false"
                                                                 height="0.9em"
@@ -52725,11 +52725,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <MapMarkerAlt
-                                                          className="sc-cvJIAo esTqCF"
+                                                          className="sc-dkmKIT cEQWzV"
                                                           size="0.9em"
                                                         >
                                                           <StyledIconBase
-                                                            className="sc-cvJIAo esTqCF"
+                                                            className="sc-dkmKIT cEQWzV"
                                                             iconAttrs={
                                                               Object {
                                                                 "fill": "currentColor",
@@ -52741,7 +52741,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             size="0.9em"
                                                           >
                                                             <ForwardRef
-                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                               iconAttrs={
                                                                 Object {
                                                                   "fill": "currentColor",
@@ -52754,7 +52754,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             >
                                                               <svg
                                                                 aria-hidden="true"
-                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                                 fill="currentColor"
                                                                 focusable="false"
                                                                 height="0.9em"
@@ -52803,7 +52803,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-liccgK cELqZs"
+                                  className="sc-cuWdqJ jWwXYb"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -52914,7 +52914,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy"
+                                        className="sc-clhTte ctsdph"
                                       >
                                         <div
                                           className="header stop-view"
@@ -52962,7 +52962,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="522"
                                                 >
                                                   <span
-                                                    className="sc-fTACoA bFfeuI"
+                                                    className="sc-bTRMho jinUgQ"
                                                     color="2B376E"
                                                     style={
                                                       Object {
@@ -52989,7 +52989,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-clhTte dZqpkF"
+                                              className="sc-kJFuxL eQoNJh"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -53013,7 +53013,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -53124,7 +53124,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -53180,7 +53180,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -53279,7 +53279,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -53335,7 +53335,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -53434,7 +53434,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -53490,7 +53490,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -53649,7 +53649,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy"
+                                        className="sc-clhTte ctsdph"
                                       >
                                         <div
                                           className="header stop-view"
@@ -53697,7 +53697,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="67"
                                                 >
                                                   <span
-                                                    className="sc-fTACoA MLrMk"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -53724,7 +53724,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-clhTte dZqpkF"
+                                              className="sc-kJFuxL eQoNJh"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -53748,7 +53748,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -53859,7 +53859,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -53871,10 +53871,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -53885,7 +53885,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -53897,7 +53897,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -53920,7 +53920,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -54019,7 +54019,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -54075,7 +54075,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -54174,7 +54174,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -54230,7 +54230,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -54389,7 +54389,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy"
+                                        className="sc-clhTte ctsdph"
                                       >
                                         <div
                                           className="header stop-view"
@@ -54437,7 +54437,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="522"
                                                 >
                                                   <span
-                                                    className="sc-fTACoA bFfeuI"
+                                                    className="sc-bTRMho jinUgQ"
                                                     color="2B376E"
                                                     style={
                                                       Object {
@@ -54464,7 +54464,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-clhTte dZqpkF"
+                                              className="sc-kJFuxL eQoNJh"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -54488,7 +54488,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -54599,7 +54599,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -54655,7 +54655,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -54754,7 +54754,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -54810,7 +54810,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -54909,7 +54909,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -54965,7 +54965,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -55189,7 +55189,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy"
+                                        className="sc-clhTte ctsdph"
                                       >
                                         <div
                                           className="header stop-view"
@@ -55237,7 +55237,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="73"
                                                 >
                                                   <span
-                                                    className="sc-fTACoA MLrMk"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -55264,7 +55264,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-clhTte dZqpkF"
+                                              className="sc-kJFuxL eQoNJh"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -55288,7 +55288,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -55399,7 +55399,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -55455,7 +55455,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -55554,7 +55554,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -55610,7 +55610,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -55709,7 +55709,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -55765,7 +55765,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -55924,7 +55924,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy"
+                                        className="sc-clhTte ctsdph"
                                       >
                                         <div
                                           className="header stop-view"
@@ -55972,7 +55972,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="322"
                                                 >
                                                   <span
-                                                    className="sc-fTACoA MLrMk"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -55999,7 +55999,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-clhTte dZqpkF"
+                                              className="sc-kJFuxL eQoNJh"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -56023,7 +56023,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -56134,7 +56134,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -56190,7 +56190,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -56289,7 +56289,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -56345,7 +56345,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -56444,7 +56444,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -56500,7 +56500,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -56633,7 +56633,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy"
+                                        className="sc-clhTte ctsdph"
                                       >
                                         <div
                                           className="header stop-view"
@@ -56681,7 +56681,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="322"
                                                 >
                                                   <span
-                                                    className="sc-fTACoA MLrMk"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -56708,7 +56708,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-clhTte dZqpkF"
+                                              className="sc-kJFuxL eQoNJh"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -56732,7 +56732,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -56843,7 +56843,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -56899,7 +56899,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -56998,7 +56998,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -57054,7 +57054,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -57153,7 +57153,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -57209,7 +57209,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -57362,15 +57362,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-ehsPLh kxBipD"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <styled.div>
                               <div
-                                className="sc-hFXoIY jfMSdz"
+                                className="sc-iuAqRD gAoDco"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-iuAqRD ffydil"
+                                    className="sc-DJgqy jIxkFu"
                                   >
                                     <IconWithText
                                       icon={
@@ -57405,7 +57405,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -57451,7 +57451,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-dwqccx bGdJor"
+                                      className="sc-gUUBao eMZwka"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -57470,7 +57470,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-gUUBao dCmAkv"
+                                className="sc-hJxDiT gGpYuf"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -57544,11 +57544,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <DotCircle
-                                                      className="sc-aKXVD bNLtzV"
+                                                      className="sc-kmATbt bhVrag"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-aKXVD bNLtzV"
+                                                        className="sc-kmATbt bhVrag"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -57560,7 +57560,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -57573,7 +57573,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -57621,11 +57621,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <MapMarkerAlt
-                                                      className="sc-cvJIAo esTqCF"
+                                                      className="sc-dkmKIT cEQWzV"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-cvJIAo esTqCF"
+                                                        className="sc-dkmKIT cEQWzV"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -57637,7 +57637,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -57650,7 +57650,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -59983,7 +59983,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-ehsPLh kxBipD"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -62293,11 +62293,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-hFXoIY jfMSdz"
+                                    className="sc-iuAqRD gAoDco"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-iuAqRD ffydil"
+                                        className="sc-DJgqy jIxkFu"
                                       >
                                         <span>
                                           NE 65th St & 14th Ave NE
@@ -62309,7 +62309,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-dwqccx bGdJor"
+                                          className="sc-gUUBao eMZwka"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -62328,7 +62328,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-gUUBao dCmAkv"
+                                    className="sc-hJxDiT gGpYuf"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -62385,7 +62385,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             >
                                               <Styled(styled.span)>
                                                 <span
-                                                  className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                  className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                 >
                                                   <Calendar>
                                                     <StyledIconBase
@@ -63605,11 +63605,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <DotCircle
-                                                          className="sc-aKXVD bNLtzV"
+                                                          className="sc-kmATbt bhVrag"
                                                           size="0.9em"
                                                         >
                                                           <StyledIconBase
-                                                            className="sc-aKXVD bNLtzV"
+                                                            className="sc-kmATbt bhVrag"
                                                             iconAttrs={
                                                               Object {
                                                                 "fill": "currentColor",
@@ -63621,7 +63621,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             size="0.9em"
                                                           >
                                                             <ForwardRef
-                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                               iconAttrs={
                                                                 Object {
                                                                   "fill": "currentColor",
@@ -63634,7 +63634,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             >
                                                               <svg
                                                                 aria-hidden="true"
-                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-aKXVD bNLtzV"
+                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
                                                                 fill="currentColor"
                                                                 focusable="false"
                                                                 height="0.9em"
@@ -63682,11 +63682,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <MapMarkerAlt
-                                                          className="sc-cvJIAo esTqCF"
+                                                          className="sc-dkmKIT cEQWzV"
                                                           size="0.9em"
                                                         >
                                                           <StyledIconBase
-                                                            className="sc-cvJIAo esTqCF"
+                                                            className="sc-dkmKIT cEQWzV"
                                                             iconAttrs={
                                                               Object {
                                                                 "fill": "currentColor",
@@ -63698,7 +63698,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             size="0.9em"
                                                           >
                                                             <ForwardRef
-                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                               iconAttrs={
                                                                 Object {
                                                                   "fill": "currentColor",
@@ -63711,7 +63711,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             >
                                                               <svg
                                                                 aria-hidden="true"
-                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cvJIAo esTqCF"
+                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
                                                                 fill="currentColor"
                                                                 focusable="false"
                                                                 height="0.9em"
@@ -63760,7 +63760,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-liccgK cELqZs"
+                                  className="sc-cuWdqJ jWwXYb"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -63936,7 +63936,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy"
+                                        className="sc-clhTte ctsdph"
                                       >
                                         <div
                                           className="header stop-view"
@@ -63984,7 +63984,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="45"
                                                 >
                                                   <span
-                                                    className="sc-fTACoA MLrMk"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -64011,7 +64011,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-clhTte dZqpkF"
+                                              className="sc-kJFuxL eQoNJh"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -64035,7 +64035,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -64146,7 +64146,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -64158,10 +64158,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -64172,7 +64172,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -64184,7 +64184,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -64207,7 +64207,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -64306,7 +64306,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -64318,10 +64318,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -64332,7 +64332,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -64344,7 +64344,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -64367,7 +64367,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -64466,7 +64466,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -64522,7 +64522,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -64746,7 +64746,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy"
+                                        className="sc-clhTte ctsdph"
                                       >
                                         <div
                                           className="header stop-view"
@@ -64794,7 +64794,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="62"
                                                 >
                                                   <span
-                                                    className="sc-fTACoA MLrMk"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -64821,7 +64821,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-clhTte dZqpkF"
+                                              className="sc-kJFuxL eQoNJh"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -64845,7 +64845,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -64956,7 +64956,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -64968,10 +64968,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -64982,7 +64982,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -64994,7 +64994,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -65017,7 +65017,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -65116,7 +65116,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -65172,7 +65172,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -65271,7 +65271,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -65327,7 +65327,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -65486,7 +65486,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy"
+                                        className="sc-clhTte ctsdph"
                                       >
                                         <div
                                           className="header stop-view"
@@ -65534,7 +65534,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="79"
                                                 >
                                                   <span
-                                                    className="sc-fTACoA MLrMk"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -65561,7 +65561,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-clhTte dZqpkF"
+                                              className="sc-kJFuxL eQoNJh"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -65585,7 +65585,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -65696,7 +65696,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -65708,10 +65708,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -65722,7 +65722,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -65734,7 +65734,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -65757,7 +65757,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -65856,7 +65856,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -65912,7 +65912,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -66011,7 +66011,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -66067,7 +66067,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-hkwmXC eVsZcu"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
diff --git a/__tests__/components/viewers/__snapshots__/stop-schedule-viewer.ts.snap b/__tests__/components/viewers/__snapshots__/stop-schedule-viewer.ts.snap
index 40efcb9b9..888e4ad46 100644
--- a/__tests__/components/viewers/__snapshots__/stop-schedule-viewer.ts.snap
+++ b/__tests__/components/viewers/__snapshots__/stop-schedule-viewer.ts.snap
@@ -211,7 +211,7 @@ exports[`components > viewers > stop viewer should render with initial stop id a
                         >
                           <Styled(styled.span)>
                             <span
-                              className="sc-dkAqVg sc-jifHHV dwdQnb czUBjn"
+                              className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                             >
                               <ArrowLeft>
                                 <StyledIconBase
@@ -267,11 +267,11 @@ exports[`components > viewers > stop viewer should render with initial stop id a
                 </div>
                 <styled.div>
                   <div
-                    className="sc-gUUBao kMeMAw"
+                    className="sc-hJxDiT dbjOgr"
                   >
                     <styled.div>
                       <div
-                        className="sc-edoYdd jGAQLh"
+                        className="sc-jlIlqL sdJoA"
                       >
                         <h1>
                           <FormattedMessage

From 6852042a79e3dc191dcbea0e22a976e205432d48 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 29 May 2024 11:21:29 -0400
Subject: [PATCH 18/31] update yarn lock

---
 yarn.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/yarn.lock b/yarn.lock
index 78e072aa4..f950b13b7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2434,7 +2434,7 @@
     "@opentripplanner/location-icon" "^1.4.1"
     flat "^5.0.2"
 
-"@opentripplanner/geocoder@^2.0.1", "@opentripplanner/geocoder@^2.2.2":
+"@opentripplanner/geocoder@^2.2.2":
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/@opentripplanner/geocoder/-/geocoder-2.2.2.tgz#8ddc669287ccdfff1a5cce14d1fa8049421c6480"
   integrity sha512-tJIOOE5N9kpMj0ji1YyVfWwg4yAFVs7Ks+EET67acql768bXwRE6rHoX6oaHvKhbCDjaQ7kuPIwi1BYWHQgg0Q==

From 87aea76f2e20b54481afe50b408f00531ccaf901 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 29 May 2024 11:27:16 -0400
Subject: [PATCH 19/31] stop codespell fixing correct word

---
 .github/workflows/codespell.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/codespell.yml b/.github/workflows/codespell.yml
index b1568432d..753c8a436 100644
--- a/.github/workflows/codespell.yml
+++ b/.github/workflows/codespell.yml
@@ -16,3 +16,4 @@ jobs:
           # Also, the a11y test file has a false positive and the ignore list does not work
           # see https://github.com/opentripplanner/otp-react-redux/pull/436/checks?check_run_id=3369380014
           skip: ./.git,yarn.lock,./a11y/a11y.test.js,./a11y/mocks,./percy/percy.test.js,./percy/mock.har,./i18n,./__tests__/mocks,otpSchema.json,./percy/mocks/*.json
+          ignore_words_list: MapPin

From bf505a4f1213b8a2949957f20cc00cab181ee737 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 29 May 2024 11:32:48 -0400
Subject: [PATCH 20/31] slow down map panning

---
 lib/actions/map.js                           | 2 +-
 lib/components/app/responsive-webapp.js      | 2 +-
 lib/components/map/route-preview-overlay.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/actions/map.js b/lib/actions/map.js
index 17cb19a69..933457b2f 100644
--- a/lib/actions/map.js
+++ b/lib/actions/map.js
@@ -22,7 +22,7 @@ export function setMapCenter(map /* MapRef */, location) {
     const { lat, lon } = location
     if (map && !isNaN(lat) && !isNaN(lon)) {
       const center = [lon, lat]
-      map.panTo(center)
+      map.panTo(center, { speed: 0.8 })
     }
   }
 }
diff --git a/lib/components/app/responsive-webapp.js b/lib/components/app/responsive-webapp.js
index 668434186..734ba04b6 100644
--- a/lib/components/app/responsive-webapp.js
+++ b/lib/components/app/responsive-webapp.js
@@ -101,7 +101,7 @@ class ResponsiveWebapp extends Component {
       }
     } else if (query.from && query.to && mainPanelContent === null) {
       map?.fitBounds([query.from, query.to], {
-        duration: 500,
+        duration: 600,
         padding: getFitBoundsPadding(map, 0.2)
       })
     } else if (query.from && !query.to) {
diff --git a/lib/components/map/route-preview-overlay.tsx b/lib/components/map/route-preview-overlay.tsx
index d1ebc7beb..1e071c0c3 100644
--- a/lib/components/map/route-preview-overlay.tsx
+++ b/lib/components/map/route-preview-overlay.tsx
@@ -35,7 +35,7 @@ const RoutePreviewOverlay = ({
   useEffect(() => {
     if (visible && mainPanelContent === null) {
       map?.fitBounds([from, to], {
-        duration: 500,
+        duration: 600,
         padding: getFitBoundsPadding(map, 0.2)
       })
     }

From caece5280cfe073480208e81e5601f263e9fed40 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 29 May 2024 11:57:47 -0400
Subject: [PATCH 21/31] feat: add `map. autoFlyOnTripFormUpdate` config key

---
 example-config.yml                      |  1 +
 lib/components/app/responsive-webapp.js | 24 ++++++++++++++----------
 lib/util/config-types.ts                |  1 +
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/example-config.yml b/example-config.yml
index 6f534b86a..ee1008107 100644
--- a/example-config.yml
+++ b/example-config.yml
@@ -115,6 +115,7 @@ persistence:
 map:
   initLat: 45.52
   initLon: -122.682
+  # autoFlyOnTripFormUpdate: false
   baseLayers:
     - name: Streets
       # These tiles are free to use, but not in production
diff --git a/lib/components/app/responsive-webapp.js b/lib/components/app/responsive-webapp.js
index 734ba04b6..dc7d26f72 100644
--- a/lib/components/app/responsive-webapp.js
+++ b/lib/components/app/responsive-webapp.js
@@ -58,6 +58,7 @@ class ResponsiveWebapp extends Component {
   componentDidUpdate(prevProps) {
     const {
       activeSearchId,
+      autoFly,
       currentPosition,
       formChanged,
       intl,
@@ -99,15 +100,17 @@ class ResponsiveWebapp extends Component {
         setLocationToCurrent({ locationType: 'from' }, intl)
         setMapCenter(map, pt)
       }
-    } else if (query.from && query.to && mainPanelContent === null) {
-      map?.fitBounds([query.from, query.to], {
-        duration: 600,
-        padding: getFitBoundsPadding(map, 0.2)
-      })
-    } else if (query.from && !query.to) {
-      setMapCenter(map, query.from)
-    } else if (query.to && !query.from) {
-      setMapCenter(map, query.to)
+    } else if (mainPanelContent === null && autoFly !== false) {
+      if (query.from && query.to) {
+        map?.fitBounds([query.from, query.to], {
+          duration: 600,
+          padding: getFitBoundsPadding(map, 0.2)
+        })
+      } else if (query.from && !query.to) {
+        setMapCenter(map, query.from)
+      } else if (query.to && !query.from) {
+        setMapCenter(map, query.to)
+      }
     }
 
     // If the path changes (e.g., via a back button press) check whether the
@@ -417,9 +420,10 @@ class RouterWrapperWithAuth0 extends Component {
 }
 
 const mapStateToWrapperProps = (state) => {
-  const { homeTimezone, persistence, reactRouter } = state.otp.config
+  const { homeTimezone, map, persistence, reactRouter } = state.otp.config
   return {
     auth0Config: getAuth0Config(persistence),
+    autoFly: map.autoFlyOnTripFormUpdate,
     defaultLocale: getDefaultLocale(state.otp.config, state.user.loggedInUser),
     homeTimezone,
     locale: state.otp.ui.locale,
diff --git a/lib/util/config-types.ts b/lib/util/config-types.ts
index 89f060b1f..22530305e 100644
--- a/lib/util/config-types.ts
+++ b/lib/util/config-types.ts
@@ -220,6 +220,7 @@ export type SupportedOverlays =
   | MapTileLayerConfig
 
 export interface MapConfig {
+  autoFlyOnTripFormUpdate?: boolean
   baseLayers?: BaseLayerConfig[]
   initLat?: number
   initLon?: number

From ebee018b56eac682bae680aeec3ae24c98c49e21 Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Wed, 29 May 2024 11:44:35 -0500
Subject: [PATCH 22/31] Only add NO_TRANSIT_CONNECTION after all results have
 compiled

---
 lib/actions/apiV2.js                              | 13 ++++++-------
 lib/components/narrative/narrative-itineraries.js |  6 +++++-
 lib/util/state.js                                 |  4 ++--
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/lib/actions/apiV2.js b/lib/actions/apiV2.js
index 1057eb65f..4f4e0d2dc 100644
--- a/lib/actions/apiV2.js
+++ b/lib/actions/apiV2.js
@@ -1105,17 +1105,16 @@ export function routingQuery(searchId = null, updateSearchInReducer) {
                 returned even if trips were returned, since it is on a mode-by-mode basis.
                 there is a chance for user confusion! 
                 
-                By checking if itineraries exist, we can hide this error when it is
-                not applicable. */
+               We'll reintroduce this error later once all the results are compiled */
+
+              response.data.plan.routingErrors =
+                response.data?.plan?.routingErrors.filter(
+                  (re) => re?.code !== 'NO_TRANSIT_CONNECTION'
+                )
               if (
                 getActiveItineraries(getState())?.length > 0 &&
                 response?.data?.plan
               ) {
-                response.data.plan.routingErrors =
-                  response.data?.plan?.routingErrors.filter(
-                    (re) => re?.code !== 'NO_TRANSIT_CONNECTION'
-                  )
-
                 // Add accessibility error, if it is turned on
                 const state = getState()
                 const { displayA11yError } = state.otp.config?.itinerary
diff --git a/lib/components/narrative/narrative-itineraries.js b/lib/components/narrative/narrative-itineraries.js
index efccef8c4..0a61f65c9 100644
--- a/lib/components/narrative/narrative-itineraries.js
+++ b/lib/components/narrative/narrative-itineraries.js
@@ -609,7 +609,11 @@ const mapStateToProps = (state) => {
     reduceErrorsFromResponse,
     {}
   )
-  const errorsWithNoItineraries = createNoItinerariesErr(state, otp2Errors)
+  const errorsWithNoItineraries = createNoItinerariesErr(
+    state,
+    otp2Errors,
+    pending
+  )
 
   return {
     // swap out realtime itineraries with non-realtime depending on boolean
diff --git a/lib/util/state.js b/lib/util/state.js
index c58ffb650..9ceb2b350 100644
--- a/lib/util/state.js
+++ b/lib/util/state.js
@@ -122,9 +122,9 @@ export const getActiveItineraries = createSelector(
  * If there are no itineraries, generate an error
  * so we're not left with an empty results container.
  */
-export const createNoItinerariesErr = (state, errors) => {
+export const createNoItinerariesErr = (state, errors, pending) => {
   const itineraries = getActiveItineraries(state)
-  if (errors && itineraries.length === 0) {
+  if (errors && itineraries.length === 0 && !pending) {
     errors.NO_TRANSIT_CONNECTION = new Set()
   }
   return errors

From 16deb4789f19a05c1db3689a86d51d76460badd0 Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Wed, 29 May 2024 11:57:22 -0500
Subject: [PATCH 23/31] Add ignored word

---
 .github/workflows/codespell.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/codespell.yml b/.github/workflows/codespell.yml
index b1568432d..06c6da3f4 100644
--- a/.github/workflows/codespell.yml
+++ b/.github/workflows/codespell.yml
@@ -12,6 +12,7 @@ jobs:
       - uses: codespell-project/actions-codespell@master
         with:
           check_filenames: true
+          ignore_words_list: MapPin
           # skip git, yarn, pixel test script and HAR file, and all i18n resources.
           # Also, the a11y test file has a false positive and the ignore list does not work
           # see https://github.com/opentripplanner/otp-react-redux/pull/436/checks?check_run_id=3369380014

From da29ad94668a3d2c23cc562f0ca3e5a4c07dd0c7 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 30 May 2024 11:05:02 -0400
Subject: [PATCH 24/31] explicitly save sessionId when starting over

---
 lib/reducers/create-otp-reducer.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index a2c39ddc2..45d4bdf80 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -153,6 +153,10 @@ export function getInitialState(userDefinedConfig) {
     ...(transitModeSettings || [])
   ]
 
+  const sessionId = new URLSearchParams(
+    document.location.hash.split('#/')[1]
+  ).get('sessionId')
+
   return {
     activeSearchId: 0,
     config,
@@ -164,7 +168,9 @@ export function getInitialState(userDefinedConfig) {
         type: config.itinerary?.defaultSort || 'BEST'
       }
     },
-    initialUrl: window.location.pathname,
+    initialUrl: `${window.location.pathname}${
+      sessionId ? `?sessionId=${sessionId}` : ''
+    }`,
     lastActionMillis: 0,
     location: {
       currentPosition: {

From cc61f840bc42041be5dd694e231fde4d1ca6edef Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 30 May 2024 11:05:55 -0400
Subject: [PATCH 25/31] safer hash check

---
 lib/reducers/create-otp-reducer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index 45d4bdf80..e692d97a4 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -154,7 +154,7 @@ export function getInitialState(userDefinedConfig) {
   ]
 
   const sessionId = new URLSearchParams(
-    document.location.hash.split('#/')[1]
+    document.location.hash.split('#/')?.[1]
   ).get('sessionId')
 
   return {

From 566e514d28d4bb5ed1ccafb4fdc53d62dd88b47e Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 30 May 2024 17:44:20 -0400
Subject: [PATCH 26/31] refactor(RouteRow): Add background on hover, outline
 when active.

---
 lib/components/viewers/route-row.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/lib/components/viewers/route-row.tsx b/lib/components/viewers/route-row.tsx
index 43a593bd0..159210ce4 100644
--- a/lib/components/viewers/route-row.tsx
+++ b/lib/components/viewers/route-row.tsx
@@ -37,6 +37,7 @@ export const StyledRouteRow = styled.li`
 // Route Row Button sits invisible on top of the route name and info.
 export const RouteRowLink = styled(Link)`
   align-items: center;
+  border-radius: 4px;
   display: flex;
   min-height: 50px;
   padding: 5px;
@@ -46,12 +47,17 @@ export const RouteRowLink = styled(Link)`
   width: 100%;
 
   &:hover {
+    background-color: ${blue[50]};
     color: inherit;
+    text-decoration: none;
   }
 
   &.active {
     background-color: ${blue[50]};
-    border-radius: 4px;
+    color: inherit;
+    outline: 2px solid ${blue[200]};
+    outline-offset: -2px;
+    text-decoration: none;
   }
 `
 

From a9005e311d2be396d4998529e6ec3b91315c142f Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 30 May 2024 17:56:19 -0400
Subject: [PATCH 27/31] refactor(RouteRow): Set outline on hover and background
 when active.

---
 lib/components/viewers/route-row.tsx | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/lib/components/viewers/route-row.tsx b/lib/components/viewers/route-row.tsx
index 159210ce4..d6a47074b 100644
--- a/lib/components/viewers/route-row.tsx
+++ b/lib/components/viewers/route-row.tsx
@@ -38,26 +38,23 @@ export const StyledRouteRow = styled.li`
 export const RouteRowLink = styled(Link)`
   align-items: center;
   border-radius: 4px;
+  color: inherit !important;
   display: flex;
   min-height: 50px;
   padding: 5px;
   // Make sure route details always leaves enough room for pattern button
   padding-right: 55px;
+  text-decoration: none !important;
   transition: all ease-out 0.1s;
   width: 100%;
 
   &:hover {
-    background-color: ${blue[50]};
-    color: inherit;
-    text-decoration: none;
+    outline: 2px solid ${blue[200]};
+    outline-offset: -2px;
   }
 
   &.active {
     background-color: ${blue[50]};
-    color: inherit;
-    outline: 2px solid ${blue[200]};
-    outline-offset: -2px;
-    text-decoration: none;
   }
 `
 

From 1a30a84553d7c1c444df6a2dece9d60145979dc1 Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Fri, 31 May 2024 11:41:58 -0500
Subject: [PATCH 28/31] refactor: inline errors from activeSearch

---
 lib/components/narrative/narrative-itineraries.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/lib/components/narrative/narrative-itineraries.js b/lib/components/narrative/narrative-itineraries.js
index 0a61f65c9..06e5adaf9 100644
--- a/lib/components/narrative/narrative-itineraries.js
+++ b/lib/components/narrative/narrative-itineraries.js
@@ -605,13 +605,9 @@ const mapStateToProps = (state) => {
   // Sort the merged (displayed) itineraries if needed
   sortItinerariesInPlaceIfNeeded(mergedItineraries, state)
 
-  const otp2Errors = activeSearch?.response?.reduce(
-    reduceErrorsFromResponse,
-    {}
-  )
   const errorsWithNoItineraries = createNoItinerariesErr(
     state,
-    otp2Errors,
+    activeSearch?.response?.reduce(reduceErrorsFromResponse, {}),
     pending
   )
 

From e8b3a85fe0e51e00f2857f685c418823d6e9c098 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Fri, 31 May 2024 14:52:08 -0400
Subject: [PATCH 29/31] finish merge

---
 .github/workflows/codespell.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.github/workflows/codespell.yml b/.github/workflows/codespell.yml
index 2e01c715b..06c6da3f4 100644
--- a/.github/workflows/codespell.yml
+++ b/.github/workflows/codespell.yml
@@ -17,4 +17,3 @@ jobs:
           # Also, the a11y test file has a false positive and the ignore list does not work
           # see https://github.com/opentripplanner/otp-react-redux/pull/436/checks?check_run_id=3369380014
           skip: ./.git,yarn.lock,./a11y/a11y.test.js,./a11y/mocks,./percy/percy.test.js,./percy/mock.har,./i18n,./__tests__/mocks,otpSchema.json,./percy/mocks/*.json
-          ignore_words_list: MapPin

From ec9b5527f61e24d4c9a952b5ab9d3754e0582d7d Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 31 May 2024 15:02:48 -0400
Subject: [PATCH 30/31] refactor(RouteRow): Increase link border radius

---
 lib/components/viewers/route-row.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/components/viewers/route-row.tsx b/lib/components/viewers/route-row.tsx
index d6a47074b..6e1aebe98 100644
--- a/lib/components/viewers/route-row.tsx
+++ b/lib/components/viewers/route-row.tsx
@@ -37,7 +37,7 @@ export const StyledRouteRow = styled.li`
 // Route Row Button sits invisible on top of the route name and info.
 export const RouteRowLink = styled(Link)`
   align-items: center;
-  border-radius: 4px;
+  border-radius: 10px;
   color: inherit !important;
   display: flex;
   min-height: 50px;

From 06ae19cec9bbd59eccf24a2e11b854f2699af2c0 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Mon, 3 Jun 2024 15:06:40 -0400
Subject: [PATCH 31/31] address pr feedback

---
 lib/reducers/create-otp-reducer.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index e692d97a4..69b33584d 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -16,7 +16,7 @@ import { getISOLikeTimestamp } from '../util/state'
 import { MainPanelContent, MobileScreens } from '../actions/ui-constants'
 
 const { filterProfileOptions } = coreUtils.profile
-const { getDefaultQuery } = coreUtils.query
+const { getDefaultQuery, getUrlParams } = coreUtils.query
 const { getItem } = coreUtils.storage
 const { getUserTimezone } = coreUtils.time
 
@@ -153,9 +153,7 @@ export function getInitialState(userDefinedConfig) {
     ...(transitModeSettings || [])
   ]
 
-  const sessionId = new URLSearchParams(
-    document.location.hash.split('#/')?.[1]
-  ).get('sessionId')
+  const sessionId = new URLSearchParams(getUrlParams()).get('sessionId')
 
   return {
     activeSearchId: 0,