diff --git a/lib/components/form/advanced-settings-button.tsx b/lib/components/form/advanced-settings-button.tsx
index 0449dc85d..63351e9c8 100644
--- a/lib/components/form/advanced-settings-button.tsx
+++ b/lib/components/form/advanced-settings-button.tsx
@@ -1,6 +1,7 @@
-import { ArrowRight } from '@styled-icons/fa-solid'
-import { FormattedMessage } from 'react-intl'
+import { Gear } from '@styled-icons/fa-solid'
+import { useIntl } from 'react-intl'
 
+import { Button } from './batch-styled'
 import { grey } from '../util/colors'
 import React from 'react'
 import styled from 'styled-components'
@@ -9,21 +10,29 @@ interface Props {
   onClick: () => void
 }
 
-const StyledTransparentButton = styled.button`
-  align-items: center;
-  background: transparent;
-  border: none;
-  color: ${grey[800]};
-  display: flex;
-  gap: 7px;
-  margin-bottom: 5px;
+const StyledAdvancedSettingsButton = styled(Button)`
+  border: 2px solid ${grey[700]};
+  color: ${grey[700]};
+  background: white;
 `
 
-const AdvancedSettingsButton = ({ onClick }: Props): JSX.Element => (
-  <StyledTransparentButton id="open-advanced-settings-button" onClick={onClick}>
-    <FormattedMessage id="components.BatchSearchScreen.moreOptions" />
-    <ArrowRight size={18} />
-  </StyledTransparentButton>
-)
+const AdvancedSettingsButton = ({ onClick }: Props): JSX.Element => {
+  const intl = useIntl()
+
+  const label = intl.formatMessage({
+    id: 'components.BatchSearchScreen.moreOptions'
+  })
+
+  return (
+    <StyledAdvancedSettingsButton
+      aria-label={label}
+      id="open-advanced-settings-button"
+      onClick={onClick}
+      title={label}
+    >
+      <Gear size={30} />
+    </StyledAdvancedSettingsButton>
+  )
+}
 
 export default AdvancedSettingsButton
diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx
index ea085d017..27c18eec1 100644
--- a/lib/components/form/advanced-settings-panel.tsx
+++ b/lib/components/form/advanced-settings-panel.tsx
@@ -92,22 +92,6 @@ const ReturnToTripPlanButton = styled.button`
 
 const DtSelectorContainer = styled.div`
   margin: 2em 0;
-
-  .date-time-modal {
-    padding: 0;
-
-    .main-panel {
-      margin: 0;
-
-      button {
-        padding: 6px 0;
-      }
-
-      .date-time-selector {
-        margin: 15px 0;
-      }
-    }
-  }
 `
 
 const AdvancedSettingsPanel = ({
diff --git a/lib/components/form/batch-settings.tsx b/lib/components/form/batch-settings.tsx
index 23bd13a6c..29fa385b2 100644
--- a/lib/components/form/batch-settings.tsx
+++ b/lib/components/form/batch-settings.tsx
@@ -25,10 +25,11 @@ import {
 import {
   MainSettingsRow,
   ModeSelectorContainer,
-  PlanTripButton
+  PlanTripButton,
+  TripFormButtonContainer
 } from './batch-styled'
 import AdvancedSettingsButton from './advanced-settings-button'
-import DateTimeButton from './date-time-button'
+import DateTimeModal from './date-time-modal'
 
 // TYPESCRIPT TODO: better types
 type Props = {
@@ -41,7 +42,6 @@ type Props = {
   openAdvancedSettings: () => void
   routingQuery: any
   setQueryParam: (evt: any) => void
-  spacedOutModeSelector?: boolean
 }
 
 export function setModeButtonEnabled(enabledKeys: string[]) {
@@ -65,14 +65,10 @@ function BatchSettings({
   onPlanTripClick,
   openAdvancedSettings,
   routingQuery,
-  setQueryParam,
-  spacedOutModeSelector
+  setQueryParam
 }: Props) {
   const intl = useIntl()
 
-  // Whether the date/time selector is open
-  const [dateTimeOpen, setDateTimeOpen] = useState(false)
-
   // @ts-expect-error Context not typed
   const { ModeIcon } = useContext(ComponentContext)
 
@@ -89,10 +85,9 @@ function BatchSettings({
   const accentColor = getDarkenedBaseColor()
 
   return (
-    <MainSettingsRow>
-      <DateTimeButton open={dateTimeOpen} setOpen={setDateTimeOpen} />
-      <AdvancedSettingsButton onClick={openAdvancedSettings} />
-      <ModeSelectorContainer squashed={!spacedOutModeSelector}>
+    <MainSettingsRow className="main-settings-row">
+      <DateTimeModal />
+      <ModeSelectorContainer>
         <MetroModeSelector
           accentColor={baseColor}
           activeHoverColor={accentColor.toHexString()}
@@ -107,23 +102,26 @@ function BatchSettings({
             onSettingsUpdate(setQueryParam)
           )}
         />
-        <PlanTripButton
-          id="plan-trip"
-          onClick={_planTrip}
-          title={intl.formatMessage({
-            id: 'components.BatchSettings.planTripTooltip'
-          })}
-        >
-          <StyledIconWrapper style={{ fontSize: '1.6em' }}>
-            {hasValidLocation(currentQuery, 'from') &&
-            hasValidLocation(currentQuery, 'to') &&
-            !!activeSearch ? (
-              <SyncAlt />
-            ) : (
-              <Search />
-            )}
-          </StyledIconWrapper>
-        </PlanTripButton>
+        <TripFormButtonContainer className="trip-form-buttons">
+          <AdvancedSettingsButton onClick={openAdvancedSettings} />
+          <PlanTripButton
+            id="plan-trip"
+            onClick={_planTrip}
+            title={intl.formatMessage({
+              id: 'components.BatchSettings.planTripTooltip'
+            })}
+          >
+            <StyledIconWrapper style={{ fontSize: '1.6em' }}>
+              {hasValidLocation(currentQuery, 'from') &&
+              hasValidLocation(currentQuery, 'to') &&
+              !!activeSearch ? (
+                <SyncAlt />
+              ) : (
+                <Search />
+              )}
+            </StyledIconWrapper>
+          </PlanTripButton>
+        </TripFormButtonContainer>
       </ModeSelectorContainer>
     </MainSettingsRow>
   )
@@ -145,8 +143,7 @@ const mapStateToProps = (state: any) => {
       modes?.initialState?.enabledModeButtons ||
       {},
     fillModeIcons: state.otp.config.itinerary?.fillModeIcons,
-    modeButtonOptions: modes?.modeButtons || [],
-    spacedOutModeSelector: modes?.spacedOut
+    modeButtonOptions: modes?.modeButtons || []
   }
 }
 
diff --git a/lib/components/form/batch-styled.ts b/lib/components/form/batch-styled.ts
index 4fe5d9da5..325219567 100644
--- a/lib/components/form/batch-styled.ts
+++ b/lib/components/form/batch-styled.ts
@@ -44,6 +44,11 @@ export const Button = styled.button`
   ${buttonCss}
 `
 
+export const TripFormButtonContainer = styled.div`
+  display: flex;
+  gap: 2px;
+`
+
 export const PlanTripButton = styled(Button)`
   background-color: green;
   color: #ffffffdd;
@@ -61,7 +66,7 @@ export const PlanTripButton = styled(Button)`
   }
 `
 
-export const ModeSelectorContainer = styled.div<{ squashed?: boolean }>`
+export const ModeSelectorContainer = styled.div`
   align-items: flex-start;
   display: flex;
   float: right;
@@ -69,14 +74,7 @@ export const ModeSelectorContainer = styled.div<{ squashed?: boolean }>`
   width: 100%;
 
   ${PlanTripButton} {
-    border-bottom-left-radius: ${(props) => (props.squashed ? 0 : 'invalid')};
-    border-top-left-radius: ${(props) => (props.squashed ? 0 : 'invalid')};
     margin-top: 0px;
-    margin-left: ${(props) => (props.squashed ? 0 : '3px')};
-  }
-  label:last-of-type {
-    border-bottom-right-radius: ${(props) => (props.squashed ? 0 : 'invalid')};
-    border-top-right-radius: ${(props) => (props.squashed ? 0 : 'invalid')};
   }
   fieldset {
     gap: 0 2px;
@@ -89,15 +87,7 @@ export const ModeSelectorContainer = styled.div<{ squashed?: boolean }>`
 `
 
 export const MainSettingsRow = styled.div`
-  align-items: top;
   display: flex;
-  flex-flow: wrap;
-  gap: 5px 0;
-  justify-content: space-between;
-  margin-bottom: 5px;
-
-  label {
-    /* Cancel bottom margin of bootstrap labels in mode selector. */
-    margin-bottom: 0;
-  }
+  flex-direction: column;
+  gap: 10px;
 `
diff --git a/lib/components/form/date-time-button.tsx b/lib/components/form/date-time-button.tsx
deleted file mode 100644
index 26d554322..000000000
--- a/lib/components/form/date-time-button.tsx
+++ /dev/null
@@ -1,211 +0,0 @@
-import {
-  arrow,
-  FloatingFocusManager,
-  offset,
-  safePolygon,
-  shift,
-  useClick,
-  useDismiss,
-  useFloating,
-  useHover,
-  useInteractions,
-  useRole
-} from '@floating-ui/react'
-import { FormattedMessage } from 'react-intl'
-import React, { HTMLAttributes, useCallback, useRef, useState } from 'react'
-import styled from 'styled-components'
-
-import InvisibleA11yLabel from '../util/invisible-a11y-label'
-
-import { activeCss, boxShadowCss, buttonPixels } from './batch-styled'
-import DateTimeModal from './date-time-modal'
-import DateTimePreview from './date-time-preview'
-
-const ButtonWrapper = styled.span`
-  position: relative;
-
-  & > button {
-    background-color: var(--main-base-color, rgba(0, 0, 0, 0.5));
-    border-radius: 5px;
-    border: none;
-    color: var(--main-color, white);
-    cursor: pointer;
-    font-size: 12px;
-    height: ${buttonPixels}px;
-    padding: 4px 5px;
-    text-align: left;
-    transition: all 250ms cubic-bezier(0.27, 0.01, 0.38, 1.06);
-    white-space: nowrap;
-    width: 120px;
-  }
-
-  & > button:hover,
-  & > button[aria-expanded='true'] {
-    ${activeCss}
-    ${boxShadowCss}
-  }
-
-  /* Remove pointer events triggered by children of the button.
-     (they interfere with the floating-ui hover interaction handler.) */
-  & > button > * {
-    pointer-events: none;
-  }
-`
-
-const HoverPanel = styled.div`
-  min-width: min(400px, 100vw);
-  max-width: 100vw;
-  padding: 0 10px;
-  width: 33vw;
-  z-index: 100;
-`
-
-// Ideally, import styles below from mode selector package.
-const HoverInnerContainer = styled.div`
-  background: #fff;
-  border-radius: 4px;
-  padding: 0px 20px 10px;
-  ${boxShadowCss}
-`
-
-const Arrow = styled.div`
-  background: #fff;
-  height: 10px;
-  margin-top: -5px;
-  position: absolute;
-  transform: rotate(-45deg);
-  width: 10px;
-  ${boxShadowCss}
-`
-
-interface DateTimeButtonProps extends HTMLAttributes<HTMLSpanElement> {
-  open: boolean
-  setOpen: (arg: boolean) => void
-}
-
-/**
- * Button and popup component for the date & time selector.
- */
-export default function DateTimeButton({
-  open,
-  setOpen,
-  style
-}: DateTimeButtonProps): JSX.Element {
-  const arrowRef = useRef(null)
-  // State used to keep the popup open when triggered by keyboard while moving the mouse around.
-  const [openWithKeyboard, setOpenWithKeyboard] = useState(false)
-  const onOpenChange = useCallback(
-    (value) => {
-      setOpen(value)
-      if (!value) {
-        setOpenWithKeyboard(false)
-      }
-    },
-    [setOpen, setOpenWithKeyboard]
-  )
-  const {
-    context,
-    floating,
-    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
-    reference,
-    strategy,
-    x,
-    y
-  } = useFloating({
-    middleware: [offset(8), shift(), arrow({ element: arrowRef })],
-    onOpenChange,
-    open
-  })
-
-  const { getFloatingProps, getReferenceProps } = useInteractions([
-    useHover(context, {
-      // Enable hover only if no popup has been triggered via keyboard.
-      // (This keeps the keyboard-triggered popups open while moving mouse around.)
-      enabled: !openWithKeyboard,
-      handleClose: safePolygon({
-        blockPointerEvents: false,
-        buffer: 0,
-        restMs: 500
-      })
-    }),
-    useClick(context),
-    useRole(context),
-    useDismiss(context)
-  ])
-
-  const interactionProps = getReferenceProps()
-
-  // ARIA roles are added by the `useRole` hook.
-  // Remove the aria-controls, aria-expanded, and aria-haspopup props from the span, they will
-  // instead be passed to the button for keyboard/screen reader users to trigger the popup.
-  const {
-    'aria-controls': ariaControls,
-    'aria-expanded': ariaExpanded,
-    'aria-haspopup': ariaHasPopup,
-    ...spanInteractionProps
-  } = interactionProps
-
-  const handleButtonClick = useCallback(
-    (e) => {
-      setOpenWithKeyboard(true)
-      if (typeof interactionProps.onClick === 'function') {
-        interactionProps.onClick(e)
-      }
-    },
-    [interactionProps]
-  )
-
-  return (
-    <ButtonWrapper style={style}>
-      <button
-        {...interactionProps}
-        id="date-time-button"
-        // Separate handler to communicate to the parent element
-        // which item had a popup triggered using the keyboard.
-        onClick={handleButtonClick}
-        // This will trigger mouse effects such as showing popup on hover of on check.
-        ref={reference}
-        // Required by linter settings
-        type="button"
-      >
-        <InvisibleA11yLabel>
-          <span id="date-time-settings-label">
-            <FormattedMessage id="components.DateTimePreview.editDepartOrArrival" />
-          </span>
-          {' - '}
-        </InvisibleA11yLabel>
-        <span {...spanInteractionProps}>
-          <DateTimePreview />
-        </span>
-      </button>
-      {open && (
-        <FloatingFocusManager
-          context={context}
-          // Restore the keyboard focus AND show focus cue on hovering out of the label
-          // only if this component triggered the popup using the keyboard.
-          // (Don't show focus cue if the popup was not triggered via keyboard.)
-          returnFocus={openWithKeyboard}
-        >
-          <HoverPanel
-            {...getFloatingProps()}
-            aria-labelledby="date-time-settings-label"
-            ref={floating}
-            style={{
-              left: x ?? 0,
-              position: strategy,
-              top: y ?? 0
-            }}
-          >
-            <Arrow
-              ref={arrowRef}
-              style={{ left: arrowX ?? 0, top: arrowY ?? 0 }}
-            />
-            <HoverInnerContainer>
-              <DateTimeModal />
-            </HoverInnerContainer>
-          </HoverPanel>
-        </FloatingFocusManager>
-      )}
-    </ButtonWrapper>
-  )
-}
diff --git a/lib/components/form/date-time-modal.tsx b/lib/components/form/date-time-modal.tsx
index e9f31407b..421562574 100644
--- a/lib/components/form/date-time-modal.tsx
+++ b/lib/components/form/date-time-modal.tsx
@@ -1,4 +1,5 @@
 import { connect } from 'react-redux'
+import { DateTimeSelector } from '@opentripplanner/trip-form'
 import coreUtils from '@opentripplanner/core-utils'
 import React, { useCallback } from 'react'
 
@@ -7,8 +8,6 @@ import * as narrativeActions from '../../actions/narrative'
 import { AppConfig } from '../../util/config-types'
 import { AppReduxState, FilterType, SortType } from '../../util/state-types'
 
-import { StyledDateTimeSelector } from './styled'
-
 type Props = {
   config: AppConfig
   date: string
@@ -66,26 +65,22 @@ function DateTimeModal({
     [setQueryParam, updateItineraryFilter, sort, syncSortWithDepartArrive]
   )
   return (
-    <div className="date-time-modal">
-      <div className="main-panel">
-        <StyledDateTimeSelector
-          className={`date-time-selector ${touchClassName}`}
-          date={date}
-          dateFormatLegacy={dateFormatLegacy}
-          departArrive={departArrive}
-          onQueryParamChange={setQueryParamMiddleware}
-          time={time}
-          // These props below are for legacy browsers
-          // that don't support `<input type="time|date">`.
-          // These props are not relevant in modern browsers,
-          // where `<input type="time|date">` already
-          // formats the time|date according to the OS settings.
-          // eslint-disable-next-line react/jsx-sort-props
-          timeFormatLegacy={timeFormatLegacy}
-          timeZone={homeTimezone}
-        />
-      </div>
-    </div>
+    <DateTimeSelector
+      className={`date-time-selector ${touchClassName}`}
+      date={date}
+      dateFormatLegacy={dateFormatLegacy}
+      departArrive={departArrive}
+      onQueryParamChange={setQueryParamMiddleware}
+      time={time}
+      // These props below are for legacy browsers
+      // that don't support `<input type="time|date">`.
+      // These props are not relevant in modern browsers,
+      // where `<input type="time|date">` already
+      // formats the time|date according to the OS settings.
+      // eslint-disable-next-line react/jsx-sort-props
+      timeFormatLegacy={timeFormatLegacy}
+      timeZone={homeTimezone}
+    />
   )
 }
 
diff --git a/lib/components/form/form.css b/lib/components/form/form.css
index 9f694e155..0d77b7d56 100644
--- a/lib/components/form/form.css
+++ b/lib/components/form/form.css
@@ -26,16 +26,6 @@
   z-index: 100;
 }
 
-/* Date-Time Modal */
-
-.otp .date-time-modal .button-row {
-  margin-bottom: 20px;
-}
-
-.otp .date-time-modal .button-row .selected {
-  background-color: #ccc;
-}
-
 /* Date/Time selectors */
 
 /* Remove up/down arrows on date/time input (to save on width) */
@@ -53,34 +43,6 @@
   -webkit-appearance: none;
 }
 
-.otp .date-time-selector .col-xs-4,
-.otp .date-time-selector .col-xs-6 {
-  padding-left: 5px;
-  padding-right: 5px;
-}
-
-.otp .date-time-selector .date-option-button {
-  width: 100%;
-  font-size: 14px;
-}
-
-.otp .date-time-selector .date-selector,
-.otp .date-time-selector .time-selector {
-  font-size: 16px;
-  width: 100%;
-  -webkit-appearance: textfield;
-  -moz-appearance: textfield;
-  appearance: textfield;
-  box-shadow: none;
-  text-align: center;
-}
-
-.otp.mobile .date-time-selector .date-selector,
-.otp.mobile .date-time-selector .time-selector {
-  font-size: 20px;
-  padding-bottom: 10px;
-}
-
 /* switch button */
 .otp .switch-button .hidden {
   display: inline-block;
@@ -188,6 +150,26 @@
   outline: none;
 }
 
+.otp .main-settings-row {
+  container-type: inline-size;
+  container-name: main-settings-row;
+  display: flex;
+}
+
+
+
+@container main-settings-row (max-width: 370px) {
+
+  .mode-selector-container {
+    justify-content: end !important;
+  }
+
+  .otp .metro-mode-selector {
+    display: none;
+  }
+
+}
+
 /* General settings */
 
 .otp.mobile .dropdown-selector {
diff --git a/lib/components/form/styled.ts b/lib/components/form/styled.ts
index 5033db42f..69b6b78ad 100644
--- a/lib/components/form/styled.ts
+++ b/lib/components/form/styled.ts
@@ -1,11 +1,11 @@
+import { Input, MenuItemLi } from '@opentripplanner/location-field/lib/styled'
+
 import { blue, grey } from '../util/colors'
+import { prefersReducedMotion } from '../util/prefersReducedMotion'
 import {
-  DateTimeSelector,
   SettingsSelectorPanel,
   Styled as TripFormClasses
 } from '@opentripplanner/trip-form'
-import { Input, MenuItemLi } from '@opentripplanner/location-field/lib/styled'
-import { prefersReducedMotion } from '../util/prefersReducedMotion'
 import LocationField from '@opentripplanner/location-field'
 import styled, { css } from 'styled-components'
 
@@ -190,28 +190,6 @@ export const StyledSettingsSelectorPanel = styled(SettingsSelectorPanel)`
   }
 `
 
-export const StyledDateTimeSelector = styled(DateTimeSelector)`
-  margin: 0 -15px 15px;
-
-  ${TripFormClasses.DateTimeSelector.DateTimeRow} {
-    margin: 20px 0px 15px;
-    input {
-      ${commonInputCss}
-      background-color: #fff;
-      border: 0;
-      border-bottom: 1px solid #000;
-      box-shadow: none;
-      outline: none;
-      text-align: center;
-    }
-  }
-  ${TripFormClasses.ModeButton.Button} {
-    ${commonButtonCss}
-    font-size: 14px;
-    height: 35px;
-  }
-`
-
 export const UnpaddedList = styled.ul`
   padding: 0;
 `
diff --git a/lib/components/mobile/date-time-screen.tsx b/lib/components/mobile/date-time-screen.tsx
index 3754c6d5b..b0254cbee 100644
--- a/lib/components/mobile/date-time-screen.tsx
+++ b/lib/components/mobile/date-time-screen.tsx
@@ -26,10 +26,7 @@ const MobileDateTimeScreen = ({ setMobileScreen }: Props) => {
         showBackButton
       />
       <main tabIndex={-1}>
-        <div className="options-main-content mobile-padding">
-          <DateTimeModal />
-        </div>
-
+        <DateTimeModal />
         <div className="options-lower-tray mobile-padding">
           <PlanTripButton
             onClick={useCallback(
diff --git a/package.json b/package.json
index 7b69da5c0..086acb9b0 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,6 @@
     "@auth0/auth0-react": "^1.1.0",
     "@bugsnag/js": "^7.17.0",
     "@bugsnag/plugin-react": "^7.17.0",
-    "@floating-ui/react": "^0.19.2",
     "@opentripplanner/base-map": "4.0.0",
     "@opentripplanner/building-blocks": "2.0.0",
     "@opentripplanner/core-utils": "12.0.0",
@@ -63,7 +62,7 @@
     "@opentripplanner/transit-vehicle-overlay": "5.0.0",
     "@opentripplanner/transitive-overlay": "4.0.0",
     "@opentripplanner/trip-details": "6.0.0",
-    "@opentripplanner/trip-form": "4.0.0",
+    "@opentripplanner/trip-form": "../otp-ui/packages/trip-form",
     "@opentripplanner/trip-viewer-overlay": "3.0.0",
     "@opentripplanner/vehicle-rental-overlay": "3.0.0",
     "@styled-icons/fa-regular": "^10.34.0",
diff --git a/yarn.lock b/yarn.lock
index 1a65ef7a9..77b87be07 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2408,7 +2408,7 @@
   resolved "https://registry.yarnpkg.com/@opentripplanner/building-blocks/-/building-blocks-2.0.0.tgz#8282c01dff7db5c7e809f6ea91cb52df559a2f9d"
   integrity sha512-N07rDaZL8fp552eI9/0j1udKjc0uOpvO0Wv1P19Ge0a4roques463MJgWJ026fbopRCi3uwbc/gYTlh4/ske9A==
 
-"@opentripplanner/building-blocks@^1.0.3", "@opentripplanner/building-blocks@^1.2.2":
+"@opentripplanner/building-blocks@^1.2.2":
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/@opentripplanner/building-blocks/-/building-blocks-1.2.3.tgz#404e8f9038867d66d55f51adf8855b1326c51ed5"
   integrity sha512-I0AxiZrTZu+e7+av4u0tHW2ijqpxH0AkLHrhf75BHf1Ep2FOGxaul/v+8UT18mNYiM5eHNstOX3XiXaDjtCUaw==
@@ -2698,14 +2698,12 @@
     flat "^5.0.2"
     react-animate-height "^3.0.4"
 
-"@opentripplanner/trip-form@4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/trip-form/-/trip-form-4.0.0.tgz#27b36a0504e46cfda1cdf50c971b5cea03de8ae2"
-  integrity sha512-Cg8SlAVN8M+qoWpz8jAkwuqllIPgrL2PVewTPuDPsIQ8i5B7xo5KKE3TPo7cQUM+jE6WEshpvv0FIdMF+NAlNg==
+"@opentripplanner/trip-form@../otp-ui/packages/trip-form":
+  version "4.1.0"
   dependencies:
     "@floating-ui/react" "^0.19.2"
-    "@opentripplanner/building-blocks" "^1.0.3"
-    "@opentripplanner/core-utils" "^11.4.4"
+    "@opentripplanner/building-blocks" "^2.0.0"
+    "@opentripplanner/core-utils" "^12.0.0"
     "@styled-icons/bootstrap" "^10.34.0"
     "@styled-icons/boxicons-regular" "^10.38.0"
     "@styled-icons/fa-regular" "^10.37.0"