From efac75b412dfd4337152c754a8205750f499fcc8 Mon Sep 17 00:00:00 2001
From: Jethary Alcid <66035149+jerader@users.noreply.github.com>
Date: Thu, 19 Dec 2024 19:24:39 -0500
Subject: [PATCH 01/18] fix(protocol-designer): dropdown option text refinement
 (#17151)

closes RQA-3773 and RQA-3774
---
 .../hardware-sim/DeckConfigurator/index.tsx   |  2 +
 .../src/molecules/DropdownMenu/index.tsx      | 28 +++++-
 .../molecules/DropdownStepFormField/index.tsx | 28 +++++-
 .../__tests__/MaterialsListModal.test.tsx     |  2 +-
 .../top-selectors/labware-locations/index.ts  | 14 +--
 .../ui/labware/__tests__/selectors.test.ts    | 44 +++++----
 protocol-designer/src/ui/labware/selectors.ts | 73 +++++++-------
 protocol-designer/src/ui/labware/utils.ts     | 99 ++++++++++++-------
 protocol-designer/src/ui/modules/utils.ts     | 39 +++++---
 9 files changed, 211 insertions(+), 118 deletions(-)

diff --git a/components/src/hardware-sim/DeckConfigurator/index.tsx b/components/src/hardware-sim/DeckConfigurator/index.tsx
index 4a03ff6c866..65bb6968a45 100644
--- a/components/src/hardware-sim/DeckConfigurator/index.tsx
+++ b/components/src/hardware-sim/DeckConfigurator/index.tsx
@@ -38,6 +38,8 @@ import { MagneticBlockFixture } from './MagneticBlockFixture'
 import { ThermocyclerFixture } from './ThermocyclerFixture'
 import { AbsorbanceReaderFixture } from './AbsorbanceReaderFixture'
 
+export * from './constants'
+
 interface DeckConfiguratorProps {
   deckConfig: DeckConfiguration
   handleClickAdd: (cutoutId: CutoutId) => void
diff --git a/components/src/molecules/DropdownMenu/index.tsx b/components/src/molecules/DropdownMenu/index.tsx
index 3fb38f8f531..3b692c0b3dc 100644
--- a/components/src/molecules/DropdownMenu/index.tsx
+++ b/components/src/molecules/DropdownMenu/index.tsx
@@ -24,6 +24,7 @@ import { MenuItem } from '../../atoms/MenuList/MenuItem'
 import { Tooltip } from '../../atoms/Tooltip'
 import { StyledText } from '../../atoms/StyledText'
 import { LiquidIcon } from '../LiquidIcon'
+import { DeckInfoLabel } from '../DeckInfoLabel'
 
 export interface DropdownOption {
   name: string
@@ -32,6 +33,8 @@ export interface DropdownOption {
   liquidColor?: string
   /** optional dropdown option for adding the deck label */
   deckLabel?: string
+  /** subtext below the name */
+  subtext?: string
   disabled?: boolean
   tooltipText?: string
 }
@@ -250,7 +253,11 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
             {currentOption.liquidColor != null ? (
               <LiquidIcon color={currentOption.liquidColor} />
             ) : null}
+            {currentOption.deckLabel != null ? (
+              <DeckInfoLabel deckLabel={currentOption.deckLabel} svgSize={13} />
+            ) : null}
             <Flex
+              flexDirection={DIRECTION_COLUMN}
               css={css`
                 font-weight: ${dropdownType === 'rounded'
                   ? TYPOGRAPHY.pSemiBold
@@ -307,7 +314,26 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
                     {option.liquidColor != null ? (
                       <LiquidIcon color={option.liquidColor} />
                     ) : null}
-                    {option.name}
+                    {option.deckLabel != null ? (
+                      <DeckInfoLabel
+                        deckLabel={option.deckLabel}
+                        svgSize={13}
+                      />
+                    ) : null}
+                    <Flex
+                      flexDirection={DIRECTION_COLUMN}
+                      gridGap={option.subtext != null ? SPACING.spacing4 : '0'}
+                    >
+                      <StyledText desktopStyle="captionRegular">
+                        {option.name}
+                      </StyledText>
+                      <StyledText
+                        desktopStyle="captionRegular"
+                        color={COLORS.black70}
+                      >
+                        {option.subtext}
+                      </StyledText>
+                    </Flex>
                   </Flex>
                 </MenuItem>
                 {option.tooltipText != null ? (
diff --git a/protocol-designer/src/molecules/DropdownStepFormField/index.tsx b/protocol-designer/src/molecules/DropdownStepFormField/index.tsx
index 2714a73156b..d40fcc7063f 100644
--- a/protocol-designer/src/molecules/DropdownStepFormField/index.tsx
+++ b/protocol-designer/src/molecules/DropdownStepFormField/index.tsx
@@ -1,8 +1,10 @@
 import { useTranslation } from 'react-i18next'
 import { useDispatch } from 'react-redux'
 import {
+  ALIGN_CENTER,
   COLORS,
   DIRECTION_COLUMN,
+  DeckInfoLabel,
   DropdownMenu,
   Flex,
   ListItem,
@@ -108,10 +110,28 @@ export function DropdownStepFormField(
             {title}
           </StyledText>
           <ListItem type="noActive">
-            <Flex padding={SPACING.spacing12}>
-              <StyledText desktopStyle="bodyDefaultRegular">
-                {options[0].name}
-              </StyledText>
+            <Flex
+              gridGap={SPACING.spacing8}
+              alignItems={ALIGN_CENTER}
+              padding={SPACING.spacing12}
+            >
+              {options[0].deckLabel != null ? (
+                <DeckInfoLabel deckLabel={options[0].deckLabel} svgSize={13} />
+              ) : null}
+              <Flex
+                flexDirection={DIRECTION_COLUMN}
+                gridGap={options[0].subtext != null ? SPACING.spacing4 : '0'}
+              >
+                <StyledText desktopStyle="captionRegular">
+                  {options[0].name}
+                </StyledText>
+                <StyledText
+                  desktopStyle="captionRegular"
+                  color={COLORS.black70}
+                >
+                  {options[0].subtext}
+                </StyledText>
+              </Flex>
             </Flex>
           </ListItem>
         </Flex>
diff --git a/protocol-designer/src/organisms/MaterialsListModal/__tests__/MaterialsListModal.test.tsx b/protocol-designer/src/organisms/MaterialsListModal/__tests__/MaterialsListModal.test.tsx
index d18fa1e52de..26e2d0fb098 100644
--- a/protocol-designer/src/organisms/MaterialsListModal/__tests__/MaterialsListModal.test.tsx
+++ b/protocol-designer/src/organisms/MaterialsListModal/__tests__/MaterialsListModal.test.tsx
@@ -137,7 +137,7 @@ describe('MaterialsListModal', () => {
           lidTargetTemp: null,
           lidOpen: false,
         },
-        slot: 'span7_8_10_11',
+        slot: '7',
         type: 'thermocyclerModuleType',
       },
     ] as ModuleOnDeck[]
diff --git a/protocol-designer/src/top-selectors/labware-locations/index.ts b/protocol-designer/src/top-selectors/labware-locations/index.ts
index 34cd5fad561..6a2c5143b00 100644
--- a/protocol-designer/src/top-selectors/labware-locations/index.ts
+++ b/protocol-designer/src/top-selectors/labware-locations/index.ts
@@ -166,8 +166,8 @@ export const getUnoccupiedLabwareLocationOptions: Selector<
               {
                 name:
                   modIdWithAdapter != null
-                    ? `${adapterDisplayName} on top of ${moduleUnderAdapter} in slot ${moduleSlotInfo}`
-                    : `${adapterDisplayName} on slot ${adapterSlotInfo}`,
+                    ? `${moduleSlotInfo} on ${moduleUnderAdapter} with ${adapterDisplayName}`
+                    : `${adapterSlotInfo} with ${adapterDisplayName}`,
                 value: labwareId,
               },
             ]
@@ -186,13 +186,9 @@ export const getUnoccupiedLabwareLocationOptions: Selector<
           : [
               ...acc,
               {
-                name: `${getModuleDisplayName(
+                name: `${modOnDeck.slot} on ${getModuleDisplayName(
                   moduleEntities[modId].model
-                )} in slot ${
-                  modOnDeck.slot === 'span7_8_10_11'
-                    ? '7, 8, 10, 11'
-                    : modOnDeck.slot
-                }`,
+                )}`,
                 value: modId,
               },
             ]
@@ -234,7 +230,7 @@ export const getUnoccupiedLabwareLocationOptions: Selector<
         )
       })
       .map(slotId => ({ name: slotId, value: slotId }))
-    const offDeck = { name: 'Off-Deck', value: 'offDeck' }
+    const offDeck = { name: 'Off-deck', value: 'offDeck' }
     const wasteChuteSlot = {
       name: 'Waste Chute in D3',
       value: WASTE_CHUTE_CUTOUT,
diff --git a/protocol-designer/src/ui/labware/__tests__/selectors.test.ts b/protocol-designer/src/ui/labware/__tests__/selectors.test.ts
index 00359673dbb..e2c74b75508 100644
--- a/protocol-designer/src/ui/labware/__tests__/selectors.test.ts
+++ b/protocol-designer/src/ui/labware/__tests__/selectors.test.ts
@@ -9,7 +9,6 @@ import {
   THERMOCYCLER_MODULE_TYPE,
   THERMOCYCLER_MODULE_V1,
 } from '@opentrons/shared-data'
-import { SPAN7_8_10_11_SLOT } from '../../../constants'
 import {
   getDisposalOptions,
   getLabwareOptions,
@@ -102,7 +101,7 @@ describe('labware selectors', () => {
       expect(
         // @ts-expect-error(sa, 2021-6-15): resultFunc
         getDisposalOptions.resultFunc(additionalEquipmentEntities)
-      ).toEqual([{ name: 'Trash Bin', value: mockTrashId }])
+      ).toEqual([{ name: 'Trash bin', value: mockTrashId }])
     })
     it('filters out additional equipment that is NOT trash when multiple trash bins present', () => {
       const mockTrashId = 'mockTrashId'
@@ -129,8 +128,8 @@ describe('labware selectors', () => {
         // @ts-expect-error(sa, 2021-6-15): resultFunc
         getDisposalOptions.resultFunc(additionalEquipmentEntities)
       ).toEqual([
-        { name: 'Trash Bin', value: mockTrashId },
-        { name: 'Trash Bin', value: mockTrashId2 },
+        { name: 'Trash bin', value: mockTrashId },
+        { name: 'Trash bin', value: mockTrashId2 },
       ])
     })
   })
@@ -142,7 +141,12 @@ describe('labware selectors', () => {
         getLabwareOptions.resultFunc(
           {},
           {},
-          { labware: {}, modules: {}, pipettes: {} },
+          {
+            labware: {},
+            modules: {},
+            pipettes: {},
+            additionalEquipmentOnDeck: {},
+          },
           {},
           {},
           {}
@@ -153,13 +157,13 @@ describe('labware selectors', () => {
     it('should return labware options when no modules are present, with no tipracks', () => {
       const labwareEntities = {
         ...tipracks,
-        ...trash,
         ...otherLabware,
       }
       const initialDeckSetup = {
         labware: labwareEntities,
         modules: {},
         pipettes: {},
+        additionalEquipmentOnDeck: {},
       }
       expect(
         // @ts-expect-error(sa, 2021-6-15): resultFunc
@@ -171,13 +175,10 @@ describe('labware selectors', () => {
           {},
           {}
         )
-      ).toEqual([
-        { name: 'Source Plate', value: 'wellPlateId' },
-        { name: 'Trash', value: mockTrash },
-      ])
+      ).toEqual([{ name: 'Source Plate', value: 'wellPlateId' }])
     })
 
-    it('should return labware options with module prefixes when a labware is on module', () => {
+    it('should return labware options with no module prefixes even when a labware is on module', () => {
       const labware = {
         wellPlateId: {
           ...otherLabware.wellPlateId,
@@ -206,6 +207,9 @@ describe('labware selectors', () => {
           ...trash,
           ...labware,
         },
+        additionalEquipmentOnDeck: {
+          trash: { id: 'trash', location: 'cutout12', name: 'trashBin' },
+        },
         modules: {
           magModuleId: {
             id: 'magModuleId',
@@ -223,7 +227,7 @@ describe('labware selectors', () => {
             id: 'thermocyclerId',
             type: THERMOCYCLER_MODULE_TYPE,
             model: THERMOCYCLER_MODULE_V1,
-            slot: SPAN7_8_10_11_SLOT,
+            slot: '8',
           },
           heaterShakerId: {
             id: 'heaterShakerId',
@@ -253,11 +257,11 @@ describe('labware selectors', () => {
           {}
         )
       ).toEqual([
-        { name: 'HS Plate in Heater-Shaker', value: 'hsPlateId' },
-        { name: 'TC Plate in Thermocycler', value: 'tcPlateId' },
-        { name: 'Temp Plate in Temperature Module', value: 'tempPlateId' },
+        { name: 'HS Plate in 6', value: 'hsPlateId' },
+        { name: 'TC Plate in A1+B1', value: 'tcPlateId' },
+        { name: 'Temp Plate in 3', value: 'tempPlateId' },
         { name: 'Trash', value: mockTrash },
-        { name: 'Well Plate in Magnetic Module', value: 'wellPlateId' },
+        { name: 'Well Plate in 1', value: 'wellPlateId' },
       ])
     })
 
@@ -272,7 +276,6 @@ describe('labware selectors', () => {
       const initialDeckSetup = {
         pipettes: {},
         labware: {
-          ...trash,
           ...labware,
         },
         modules: {
@@ -283,6 +286,9 @@ describe('labware selectors', () => {
             slot: '1',
           },
         },
+        additionalEquipmentOnDeck: {
+          trash: { id: 'trash', name: 'trashBin', location: 'cutout12' },
+        },
       }
 
       const nicknames: Record<string, string> = {
@@ -312,14 +318,14 @@ describe('labware selectors', () => {
         )
       ).toEqual([
         { name: 'Trash', value: mockTrash },
-        { name: 'Well Plate in Magnetic Module', value: 'wellPlateId' },
+        { name: 'Well Plate in 1', value: 'wellPlateId' },
       ])
     })
   })
 
   describe('_sortLabwareDropdownOptions', () => {
     const trashOption = {
-      name: 'Trash Bin',
+      name: 'Trash bin',
       value: mockTrash,
     }
     const zzzPlateOption = { name: 'Zzz Plate', value: 'zzz' }
diff --git a/protocol-designer/src/ui/labware/selectors.ts b/protocol-designer/src/ui/labware/selectors.ts
index 2839d001078..34d5818611f 100644
--- a/protocol-designer/src/ui/labware/selectors.ts
+++ b/protocol-designer/src/ui/labware/selectors.ts
@@ -1,25 +1,32 @@
 import { createSelector } from 'reselect'
 import mapValues from 'lodash/mapValues'
 import reduce from 'lodash/reduce'
-import { getIsTiprack, getLabwareDisplayName } from '@opentrons/shared-data'
+import {
+  TRASH_BIN_DISPLAY_NAME,
+  WASTE_CHUTE_DISPLAY_NAME,
+} from '@opentrons/components'
+import {
+  FLEX_ROBOT_TYPE,
+  OT2_ROBOT_TYPE,
+  getIsTiprack,
+  getLabwareDisplayName,
+} from '@opentrons/shared-data'
 import * as stepFormSelectors from '../../step-forms/selectors'
 import { selectors as labwareIngredSelectors } from '../../labware-ingred/selectors'
-import { getModuleShortNames, getModuleUnderLabware } from '../modules/utils'
-import { getLabwareOffDeck, getLabwareInColumn4 } from './utils'
+import { getLabwareLatestSlot } from './utils'
 
 import type {
   LabwareEntity,
   AdditionalEquipmentEntity,
 } from '@opentrons/step-generation'
 import type { DropdownOption } from '@opentrons/components'
+import type { RobotType } from '@opentrons/shared-data'
 import type { Selector } from '../../types'
 import type {
   AllTemporalPropertiesForTimelineFrame,
   SavedStepFormState,
 } from '../../step-forms'
 
-const TRASH = 'Trash Bin'
-
 export const getLabwareNicknamesById: Selector<
   Record<string, string>
 > = createSelector(
@@ -37,8 +44,8 @@ export const _sortLabwareDropdownOptions = (
 ): DropdownOption[] =>
   options.sort((a, b) => {
     // special case for trash (always at the bottom of the list)
-    if (a.name === TRASH) return 1
-    if (b.name === TRASH) return -1
+    if (a.name === TRASH_BIN_DISPLAY_NAME) return 1
+    if (b.name === TRASH_BIN_DISPLAY_NAME) return -1
     // sort by name everything else by name
     return a.name.localeCompare(b.name)
   })
@@ -47,35 +54,21 @@ const getNickname = (
   nicknamesById: Record<string, string>,
   initialDeckSetup: AllTemporalPropertiesForTimelineFrame,
   labwareId: string,
-  savedStepForms: SavedStepFormState
+  savedStepForms: SavedStepFormState,
+  robotType: RobotType
 ): string => {
-  const isOffDeck = getLabwareOffDeck(
+  const latestSlot = getLabwareLatestSlot(
     initialDeckSetup,
     savedStepForms ?? {},
-    labwareId
-  )
-
-  const moduleOnDeck = getModuleUnderLabware(
-    initialDeckSetup,
-    savedStepForms ?? {},
-    labwareId
-  )
-  const module =
-    moduleOnDeck != null ? getModuleShortNames(moduleOnDeck.type) : null
-
-  const isLabwareInColumn4 = getLabwareInColumn4(
-    initialDeckSetup,
-    savedStepForms ?? {},
-    labwareId
+    labwareId,
+    robotType
   )
 
   let nickName: string = nicknamesById[labwareId]
-  if (module != null) {
-    nickName = `${nicknamesById[labwareId]} in ${module}`
-  } else if (isOffDeck) {
+  if (latestSlot != null && latestSlot !== 'offDeck') {
+    nickName = `${nicknamesById[labwareId]} in ${latestSlot}`
+  } else if (latestSlot != null && latestSlot === 'offDeck') {
     nickName = `${nicknamesById[labwareId]} off-deck`
-  } else if (isLabwareInColumn4) {
-    nickName = `${nicknamesById[labwareId]} in staging area slot`
   }
   return nickName
 }
@@ -110,6 +103,12 @@ export const getMoveLabwareOptions: Selector<DropdownOption[]> = createSelector(
     const wasteChuteLocation = Object.values(additionalEquipmentEntities).find(
       aE => aE.name === 'wasteChute'
     )?.location
+    const trashBinLocation = Object.values(additionalEquipmentEntities).find(
+      aE => aE.name === 'trashBin'
+    )?.location
+    const robotType =
+      trashBinLocation === 'cutout12' ? OT2_ROBOT_TYPE : FLEX_ROBOT_TYPE
+
     const moveLabwareOptions = reduce(
       labwareEntities,
       (
@@ -131,7 +130,8 @@ export const getMoveLabwareOptions: Selector<DropdownOption[]> = createSelector(
           nicknamesById,
           initialDeckSetup,
           labwareId,
-          savedStepForms
+          savedStepForms,
+          robotType
         )
 
         //  filter out moving trash, adapters, and labware in
@@ -171,6 +171,12 @@ export const getLabwareOptions: Selector<DropdownOption[]> = createSelector(
     const wasteChuteLocation = Object.values(additionalEquipmentEntities).find(
       aE => aE.name === 'wasteChute'
     )?.location
+    const trashBinLocation = Object.values(additionalEquipmentEntities).find(
+      aE => aE.name === 'trashBin'
+    )?.location
+    const robotType =
+      trashBinLocation === 'cutout12' ? OT2_ROBOT_TYPE : FLEX_ROBOT_TYPE
+
     const labwareOptions = reduce(
       labwareEntities,
       (
@@ -191,7 +197,8 @@ export const getLabwareOptions: Selector<DropdownOption[]> = createSelector(
           nicknamesById,
           initialDeckSetup,
           labwareId,
-          savedStepForms
+          savedStepForms,
+          robotType
         )
 
         return getIsTiprack(labwareEntity.def) ||
@@ -222,7 +229,7 @@ export const getWasteChuteOption: Selector<DropdownOption | null> = createSelect
     const wasteChuteOption: DropdownOption | null =
       wasteChuteEntity != null
         ? {
-            name: 'Waste Chute',
+            name: WASTE_CHUTE_DISPLAY_NAME,
             value: wasteChuteEntity.id,
           }
         : null
@@ -246,7 +253,7 @@ export const getDisposalOptions = createSelector(
           ? [
               ...acc,
               {
-                name: TRASH,
+                name: TRASH_BIN_DISPLAY_NAME,
                 value: additionalEquipment.id ?? '',
               },
             ]
diff --git a/protocol-designer/src/ui/labware/utils.ts b/protocol-designer/src/ui/labware/utils.ts
index 2377f7976db..d55c35b578f 100644
--- a/protocol-designer/src/ui/labware/utils.ts
+++ b/protocol-designer/src/ui/labware/utils.ts
@@ -1,39 +1,54 @@
-import { COLUMN_4_SLOTS } from '@opentrons/step-generation'
+import { getHasWasteChute } from '@opentrons/step-generation'
+import { WASTE_CHUTE_DISPLAY_NAME } from '@opentrons/components'
+import {
+  FLEX_ROBOT_TYPE,
+  TC_MODULE_LOCATION_OT2,
+  TC_MODULE_LOCATION_OT3,
+  THERMOCYCLER_MODULE_TYPE,
+} from '@opentrons/shared-data'
+import type { RobotType } from '@opentrons/shared-data'
 import type { InitialDeckSetup, SavedStepFormState } from '../../step-forms'
 
-export function getLabwareOffDeck(
-  initialDeckSetup: InitialDeckSetup,
-  savedStepFormState: SavedStepFormState,
-  labwareId: string
-): boolean {
-  //  latest moveLabware step related to labwareId
-  const moveLabwareStep = Object.values(savedStepFormState)
-    .filter(
-      state =>
-        state.stepType === 'moveLabware' &&
-        labwareId != null &&
-        state.labware === labwareId
-    )
-    .reverse()[0]
-
-  if (moveLabwareStep?.newLocation === 'offDeck') {
-    return true
-  } else if (
-    moveLabwareStep == null &&
-    initialDeckSetup.labware[labwareId]?.slot === 'offDeck'
-  ) {
-    return true
-  } else return false
+function resolveSlotLocation(
+  modules: InitialDeckSetup['modules'],
+  labware: InitialDeckSetup['labware'],
+  location: string,
+  robotType: RobotType
+): string {
+  const TCSlot =
+    robotType === FLEX_ROBOT_TYPE
+      ? TC_MODULE_LOCATION_OT3
+      : TC_MODULE_LOCATION_OT2
+  if (location === 'offDeck') {
+    return 'offDeck'
+  } else if (modules[location] != null) {
+    return modules[location].type === THERMOCYCLER_MODULE_TYPE
+      ? TCSlot
+      : modules[location].slot
+  } else if (labware[location] != null) {
+    const adapter = labware[location]
+    if (modules[adapter.slot] != null) {
+      return modules[adapter.slot].type === THERMOCYCLER_MODULE_TYPE
+        ? TCSlot
+        : modules[adapter.slot].slot
+    } else {
+      return adapter.slot
+    }
+  } else {
+    return location
+  }
 }
 
-export function getLabwareInColumn4(
+export function getLabwareLatestSlot(
   initialDeckSetup: InitialDeckSetup,
   savedStepForms: SavedStepFormState,
-  labwareId: string
-): boolean {
-  const isStartingInColumn4 = COLUMN_4_SLOTS.includes(
-    initialDeckSetup.labware[labwareId]?.slot
-  )
+  labwareId: string,
+  robotType: RobotType
+): string | null {
+  const { modules, labware, additionalEquipmentOnDeck } = initialDeckSetup
+  const initialSlot = labware[labwareId]?.slot
+  const hasWasteChute = getHasWasteChute(additionalEquipmentOnDeck)
+
   //  latest moveLabware step related to labwareId
   const moveLabwareStep = Object.values(savedStepForms)
     .filter(
@@ -45,13 +60,25 @@ export function getLabwareInColumn4(
     .reverse()[0]
 
   if (
-    moveLabwareStep?.newLocation != null &&
-    COLUMN_4_SLOTS.includes(moveLabwareStep.newLocation as string)
+    hasWasteChute &&
+    (initialSlot === 'D3' || moveLabwareStep?.newLocation === 'D3')
   ) {
-    return true
-  } else if (moveLabwareStep == null && isStartingInColumn4) {
-    return true
+    return WASTE_CHUTE_DISPLAY_NAME
+  }
+
+  if (moveLabwareStep?.newLocation != null) {
+    return resolveSlotLocation(
+      modules,
+      labware,
+      moveLabwareStep.newLocation as string,
+      robotType
+    )
+  } else if (moveLabwareStep == null) {
+    return resolveSlotLocation(modules, labware, initialSlot, robotType)
   } else {
-    return false
+    console.warn(
+      `Expected to find labware's location but could not with initial slot ${initialSlot}`
+    )
+    return null
   }
 }
diff --git a/protocol-designer/src/ui/modules/utils.ts b/protocol-designer/src/ui/modules/utils.ts
index e1d26bb840c..d347c1b5388 100644
--- a/protocol-designer/src/ui/modules/utils.ts
+++ b/protocol-designer/src/ui/modules/utils.ts
@@ -1,7 +1,13 @@
 import values from 'lodash/values'
 import {
-  MAGNETIC_MODULE_V1,
+  ABSORBANCE_READER_TYPE,
   getLabwareDefaultEngageHeight,
+  HEATERSHAKER_MODULE_TYPE,
+  MAGNETIC_BLOCK_TYPE,
+  MAGNETIC_MODULE_TYPE,
+  MAGNETIC_MODULE_V1,
+  TEMPERATURE_MODULE_TYPE,
+  THERMOCYCLER_MODULE_TYPE,
 } from '@opentrons/shared-data'
 import type { DropdownOption } from '@opentrons/components'
 import type { ModuleType } from '@opentrons/shared-data'
@@ -76,17 +82,17 @@ export function getModuleUnderLabware(
 
 export const getModuleShortNames = (type: ModuleType): string => {
   switch (type) {
-    case 'heaterShakerModuleType':
-      return 'Heater-Shaker'
-    case 'magneticBlockType':
+    case HEATERSHAKER_MODULE_TYPE:
+      return 'Heater-Shaker Module'
+    case MAGNETIC_BLOCK_TYPE:
       return 'Magnetic Block'
-    case 'magneticModuleType':
+    case MAGNETIC_MODULE_TYPE:
       return 'Magnetic Module'
-    case 'temperatureModuleType':
+    case TEMPERATURE_MODULE_TYPE:
       return 'Temperature Module'
-    case 'thermocyclerModuleType':
+    case THERMOCYCLER_MODULE_TYPE:
       return 'Thermocycler'
-    case 'absorbanceReaderType':
+    case ABSORBANCE_READER_TYPE:
       return 'Absorbance Reader'
   }
 }
@@ -110,22 +116,25 @@ export function getModuleLabwareOptions(
         )?.id
         if (labwareOnAdapterId != null) {
           return {
-            name: `${nicknamesById[labwareOnAdapterId]} in ${
-              nicknamesById[labware.id]
-            } in ${module} in slot ${moduleOnDeck.slot}`,
+            name: `${nicknamesById[labware.id]} with ${
+              nicknamesById[labwareOnAdapterId]
+            }`,
+            deckLabel: moduleOnDeck.slot,
+            subtext: module,
             value: moduleOnDeck.id,
           }
         } else {
           return {
-            name: `${nicknamesById[labware.id]} in ${module} in slot ${
-              moduleOnDeck.slot
-            }`,
+            name: nicknamesById[labware.id],
+            deckLabel: moduleOnDeck.slot,
+            subtext: module,
             value: moduleOnDeck.id,
           }
         }
       } else {
         return {
-          name: `No labware in ${module} in slot ${moduleOnDeck.slot}`,
+          name: module,
+          deckLabel: moduleOnDeck.slot,
           value: moduleOnDeck.id,
         }
       }

From 47dbbe95d02d7cbcc64ea5d398dca3fd80ec68e4 Mon Sep 17 00:00:00 2001
From: koji <koji.kanao@opentrons.com>
Date: Fri, 20 Dec 2024 09:20:47 -0500
Subject: [PATCH 02/18] chore(protocol-designer): remove classnames from pd
 (#17148)

* chore(protocol-designer): remove classnames from pd
---
 protocol-designer/package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/protocol-designer/package.json b/protocol-designer/package.json
index 95f5acf4813..8be7d0a965b 100755
--- a/protocol-designer/package.json
+++ b/protocol-designer/package.json
@@ -33,7 +33,6 @@
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
     "ajv": "6.12.3",
-    "classnames": "2.2.5",
     "cookie": "0.3.1",
     "core-js": "3.2.1",
     "date-fns": "2.10.0",

From 3f10621d7f4c959fe1cec7c0fbb0b0720390a766 Mon Sep 17 00:00:00 2001
From: koji <koji.kanao@opentrons.com>
Date: Fri, 20 Dec 2024 09:21:22 -0500
Subject: [PATCH 03/18] chore: add a new eslint rule prevent using margin
 (#17024)

* chore: add a new eslint rule prevent using margin
---
 .eslintrc.js                                  | 19 +++++++
 app/src/molecules/Command/CommandText.tsx     | 44 ++++------------
 .../AdditionalCustomLabwareSourceFolder.tsx   |  2 +-
 scripts/eslint-plugin-opentrons/lib/index.js  |  2 +
 .../lib/rules/no-margins-in-css.js            | 46 ++++++++++++++++
 .../lib/rules/no-margins-inline.js            | 52 +++++++++++++++++++
 6 files changed, 131 insertions(+), 34 deletions(-)
 create mode 100644 scripts/eslint-plugin-opentrons/lib/rules/no-margins-in-css.js
 create mode 100644 scripts/eslint-plugin-opentrons/lib/rules/no-margins-inline.js

diff --git a/.eslintrc.js b/.eslintrc.js
index aee75238df0..ec5e3e3536c 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -180,6 +180,8 @@ module.exports = {
       files: ['./protocol-designer/src/**/*.@(ts|tsx)'],
       rules: {
         'opentrons/no-imports-up-the-tree-of-life': 'warn',
+        'opentrons/no-margins-in-css': 'warn',
+        'opentrons/no-margins-inline': 'warn',
       },
     },
     // apply application structure import requirements to app
@@ -187,6 +189,23 @@ module.exports = {
       files: ['./app/src/**/*.@(ts|tsx)'],
       rules: {
         'opentrons/no-imports-across-applications': 'error',
+        'opentrons/no-margins-in-css': 'warn',
+        'opentrons/no-margins-inline': 'warn',
+      },
+    },
+    {
+      files: ['./opentrons-ai-client/src/**/*.@(ts|tsx)'],
+      rules: {
+        'opentrons/no-imports-up-the-tree-of-life': 'warn',
+        'opentrons/no-margins-in-css': 'warn',
+        'opentrons/no-margins-inline': 'warn',
+      },
+    },
+    {
+      files: ['./components/src/**/*.@(ts|tsx)'],
+      rules: {
+        'opentrons/no-margins-in-css': 'warn',
+        'opentrons/no-margins-inline': 'warn',
       },
     },
   ],
diff --git a/app/src/molecules/Command/CommandText.tsx b/app/src/molecules/Command/CommandText.tsx
index e690115a88b..9c43afb4b02 100644
--- a/app/src/molecules/Command/CommandText.tsx
+++ b/app/src/molecules/Command/CommandText.tsx
@@ -1,5 +1,6 @@
 import type * as React from 'react'
 import { pick } from 'lodash'
+import { css } from 'styled-components'
 
 import {
   ALIGN_CENTER,
@@ -174,21 +175,10 @@ function ThermocyclerRunProfile(
       >
         <ul>
           {shouldPropagateTextLimit(propagateTextLimit, isOnDevice) ? (
-            <li
-              css={`
-                margin-left: ${SPACING.spacing4};
-              `}
-            >
-              {stepTexts[0]}
-            </li>
+            <li css={LIST_STYLE}>{stepTexts[0]}</li>
           ) : (
             stepTexts.map((step: string, index: number) => (
-              <li
-                css={`
-                  margin-left: ${SPACING.spacing4};
-                `}
-                key={index}
-              >
+              <li css={LIST_STYLE} key={index}>
                 {' '}
                 {step}
               </li>
@@ -252,11 +242,7 @@ function ThermocyclerRunExtendedProfile(
       >
         <ul>
           {shouldPropagateTextLimit(propagateTextLimit, isOnDevice) ? (
-            <li
-              css={`
-                margin-left: ${SPACING.spacing4};
-              `}
-            >
+            <li css={LIST_STYLE}>
               {profileElementTexts[0].kind === 'step'
                 ? profileElementTexts[0].stepText
                 : profileElementTexts[0].cycleText}
@@ -264,30 +250,18 @@ function ThermocyclerRunExtendedProfile(
           ) : (
             profileElementTexts.map((element, index: number) =>
               element.kind === 'step' ? (
-                <li
-                  css={`
-                    margin-left: ${SPACING.spacing4};
-                  `}
-                  key={`tc-outer-step-${index}`}
-                >
+                <li css={LIST_STYLE} key={`tc-outer-step-${index}`}>
                   {' '}
                   {element.stepText}
                 </li>
               ) : (
-                <li
-                  css={`
-                    margin-left: ${SPACING.spacing4};
-                  `}
-                  key={`tc-outer-step-${index}`}
-                >
+                <li css={LIST_STYLE} key={`tc-outer-step-${index}`}>
                   {element.cycleText}
                   <ul>
                     {element.stepTexts.map(
                       ({ stepText }, stepIndex: number) => (
                         <li
-                          css={`
-                            margin-left: ${SPACING.spacing8};
-                          `}
+                          css={LIST_STYLE}
                           key={`tc-inner-step-${index}.${stepIndex}`}
                         >
                           {' '}
@@ -305,3 +279,7 @@ function ThermocyclerRunExtendedProfile(
     </Flex>
   )
 }
+
+const LIST_STYLE = css`
+  margin-left: ${SPACING.spacing4};
+`
diff --git a/app/src/organisms/Desktop/AdvancedSettings/AdditionalCustomLabwareSourceFolder.tsx b/app/src/organisms/Desktop/AdvancedSettings/AdditionalCustomLabwareSourceFolder.tsx
index 57708f2854d..75c0d411cff 100644
--- a/app/src/organisms/Desktop/AdvancedSettings/AdditionalCustomLabwareSourceFolder.tsx
+++ b/app/src/organisms/Desktop/AdvancedSettings/AdditionalCustomLabwareSourceFolder.tsx
@@ -8,10 +8,10 @@ import {
   Flex,
   Icon,
   JUSTIFY_SPACE_BETWEEN,
+  LegacyStyledText,
   Link,
   SPACING_AUTO,
   SPACING,
-  LegacyStyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
diff --git a/scripts/eslint-plugin-opentrons/lib/index.js b/scripts/eslint-plugin-opentrons/lib/index.js
index 08e970bedf9..654b6681d0c 100644
--- a/scripts/eslint-plugin-opentrons/lib/index.js
+++ b/scripts/eslint-plugin-opentrons/lib/index.js
@@ -4,4 +4,6 @@
 module.exports.rules = {
   'no-imports-up-the-tree-of-life': require('./rules/no-imports-up-the-tree-of-life'),
   'no-imports-across-applications': require('./rules/no-imports-across-applications'),
+  'no-margins-in-css': require('./rules/no-margins-in-css'),
+  'no-margins-inline': require('./rules/no-margins-inline'),
 }
diff --git a/scripts/eslint-plugin-opentrons/lib/rules/no-margins-in-css.js b/scripts/eslint-plugin-opentrons/lib/rules/no-margins-in-css.js
new file mode 100644
index 00000000000..e3a24bbd5ef
--- /dev/null
+++ b/scripts/eslint-plugin-opentrons/lib/rules/no-margins-in-css.js
@@ -0,0 +1,46 @@
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow the use of margin-related properties in css-in-js',
+      category: 'Best Practices',
+      recommended: false,
+    },
+    messages: {
+      noMarginInCssInJs: "Avoid using '{{property}}' in css-in-js.",
+    },
+  },
+  create(context) {
+    return {
+      // Check for CSS-in-JS template literals
+      TaggedTemplateExpression(node) {
+        const forbiddenMargins = [
+          'margin',
+          // 'margin-top',
+          // 'margin-left',
+          // 'margin-right',
+          // 'margin-bottom',
+        ]
+
+        if (node.tag.type === 'Identifier' && node.tag.name === 'css') {
+          const templateLiteral = node.quasi
+          templateLiteral.quasis.forEach(quasi => {
+            const text = quasi.value.raw
+            forbiddenMargins.forEach(property => {
+              const regex = new RegExp(`\\b${property}\\b`, 'i')
+              if (regex.test(text)) {
+                context.report({
+                  node: quasi,
+                  messageId: 'noMarginInCssInJs',
+                  data: {
+                    property,
+                  },
+                })
+              }
+            })
+          })
+        }
+      },
+    }
+  },
+}
diff --git a/scripts/eslint-plugin-opentrons/lib/rules/no-margins-inline.js b/scripts/eslint-plugin-opentrons/lib/rules/no-margins-inline.js
new file mode 100644
index 00000000000..265ce8472da
--- /dev/null
+++ b/scripts/eslint-plugin-opentrons/lib/rules/no-margins-inline.js
@@ -0,0 +1,52 @@
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow the use of margin-related styles',
+      category: 'Best Practices',
+      recommended: false,
+    },
+    messages: {
+      noMarginInline: "Avoid using '{{property}}' in your components.",
+    },
+    schema: [],
+  },
+  create(context) {
+    const forbiddenMargins = [
+      'margin',
+      'marginLeft',
+      'marginRight',
+      'marginTop',
+      'marginBottom',
+      'marginX',
+      'marginY',
+    ]
+
+    return {
+      // Existing visitor for object properties
+      Property(node) {
+        if (forbiddenMargins.includes(node.key.name || node.key.value)) {
+          context.report({
+            node: node.key,
+            messageId: 'noMarginInline',
+            data: {
+              property: node.key.name || node.key.value,
+            },
+          })
+        }
+      },
+      // New visitor for JSX attributes
+      JSXAttribute(node) {
+        if (forbiddenMargins.includes(node.name.name)) {
+          context.report({
+            node: node.name,
+            messageId: 'noMarginInline',
+            data: {
+              property: node.name.name,
+            },
+          })
+        }
+      },
+    }
+  },
+}

From 3fe50e4427435c37c59e021dbe82cec160b12faf Mon Sep 17 00:00:00 2001
From: Nick Diehl <47604184+ncdiehl11@users.noreply.github.com>
Date: Fri, 20 Dec 2024 10:18:35 -0500
Subject: [PATCH 04/18] feat(protocol-designer,-step-generation): add skeleton
 for plate reader steps (#17158)

Here I add a skeleton step form for plate reader step addition (hidden
behind feature flag). I also add the a new `lidOpen` property to the
plate reader's temporal properties interface since we will need to know
this state during step generation in order to perform
initializations/readings and to move labware to and from the module.

Closes AUTH-1196
---
 .../assets/localization/en/application.json   |  1 +
 protocol-designer/src/form-types.ts           |  2 +
 .../StepForm/StepFormToolbox.tsx              |  2 +
 .../StepTools/PlateReaderTools/index.tsx      |  5 +++
 .../ProtocolSteps/StepForm/StepTools/index.ts |  1 +
 .../ProtocolSteps/Timeline/AddStepButton.tsx  | 45 +++++++++----------
 .../src/step-forms/selectors/index.ts         |  1 +
 protocol-designer/src/step-forms/types.ts     |  1 +
 step-generation/src/constants.ts              |  1 +
 step-generation/src/types.ts                  |  1 +
 10 files changed, 36 insertions(+), 24 deletions(-)
 create mode 100644 protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/PlateReaderTools/index.tsx

diff --git a/protocol-designer/src/assets/localization/en/application.json b/protocol-designer/src/assets/localization/en/application.json
index 3692c9a1fac..c825037224b 100644
--- a/protocol-designer/src/assets/localization/en/application.json
+++ b/protocol-designer/src/assets/localization/en/application.json
@@ -39,6 +39,7 @@
     "moveLabware": "move",
     "moveLiquid": "transfer",
     "pause": "pause",
+    "plateReader": "absorbance reader",
     "profile_settings": "profile settings",
     "profile_steps": "profile steps",
     "temperature": "temperature",
diff --git a/protocol-designer/src/form-types.ts b/protocol-designer/src/form-types.ts
index 8e86d72a426..3d6f1bcb38d 100644
--- a/protocol-designer/src/form-types.ts
+++ b/protocol-designer/src/form-types.ts
@@ -143,6 +143,7 @@ export type StepType =
   | 'pause'
   | 'temperature'
   | 'thermocycler'
+  | 'plateReader'
 
 export const stepIconsByType: Record<StepType, IconName> = {
   comment: 'comment',
@@ -155,6 +156,7 @@ export const stepIconsByType: Record<StepType, IconName> = {
   temperature: 'ot-temperature-v2',
   thermocycler: 'ot-thermocycler',
   heaterShaker: 'ot-heater-shaker',
+  plateReader: 'ot-absorbance',
 }
 // ===== Unprocessed form types =====
 export interface AnnotationFields {
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
index d8ec3458985..307e9e4aeac 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
@@ -45,6 +45,7 @@ import {
   MoveLabwareTools,
   MoveLiquidTools,
   PauseTools,
+  PlateReaderTools,
   TemperatureTools,
   ThermocyclerTools,
 } from './StepTools'
@@ -84,6 +85,7 @@ const STEP_FORM_MAP: StepFormMap = {
   thermocycler: ThermocyclerTools,
   heaterShaker: HeaterShakerTools,
   comment: CommentTools,
+  plateReader: PlateReaderTools,
 }
 
 interface StepFormToolboxProps {
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/PlateReaderTools/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/PlateReaderTools/index.tsx
new file mode 100644
index 00000000000..e2c0478bf9e
--- /dev/null
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/PlateReaderTools/index.tsx
@@ -0,0 +1,5 @@
+import type { StepFormProps } from '../../types'
+
+export function PlateReaderTools(props: StepFormProps): JSX.Element {
+  return <div>TODO: ADD PLATE READER TOOLS</div>
+}
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/index.ts b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/index.ts
index 7f0eff60340..f62b0127c36 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/index.ts
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/index.ts
@@ -4,6 +4,7 @@ export { MagnetTools } from './MagnetTools'
 export { MixTools } from './MixTools'
 export { MoveLabwareTools } from './MoveLabwareTools'
 export { MoveLiquidTools } from './MoveLiquidTools'
+export { PlateReaderTools } from './PlateReaderTools'
 export { PauseTools } from './PauseTools'
 export { TemperatureTools } from './TemperatureTools'
 export { ThermocyclerTools } from './ThermocyclerTools'
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx
index 7ce06184378..f9c2aa9d395 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx
@@ -17,6 +17,7 @@ import {
   SecondaryButton,
 } from '@opentrons/components'
 import {
+  ABSORBANCE_READER_TYPE,
   HEATERSHAKER_MODULE_TYPE,
   MAGNETIC_MODULE_TYPE,
   TEMPERATURE_MODULE_TYPE,
@@ -35,7 +36,10 @@ import {
   ConfirmDeleteModal,
   getMainPagePortalEl,
 } from '../../../../organisms'
-import { getEnableComment } from '../../../../feature-flags/selectors'
+import {
+  getEnableAbsorbanceReader,
+  getEnableComment,
+} from '../../../../feature-flags/selectors'
 
 import { AddStepOverflowButton } from './AddStepOverflowButton'
 
@@ -71,32 +75,22 @@ export function AddStepButton(): JSX.Element {
   const [enqueuedStepType, setEnqueuedStepType] = useState<StepType | null>(
     null
   )
+  const enableAbsorbanceReader = useSelector(getEnableAbsorbanceReader)
 
   const getSupportedSteps = (): Array<
     Exclude<StepType, 'manualIntervention'>
-  > =>
-    enableComment
-      ? [
-          'comment',
-          'moveLabware',
-          'moveLiquid',
-          'mix',
-          'pause',
-          'heaterShaker',
-          'magnet',
-          'temperature',
-          'thermocycler',
-        ]
-      : [
-          'moveLabware',
-          'moveLiquid',
-          'mix',
-          'pause',
-          'heaterShaker',
-          'magnet',
-          'temperature',
-          'thermocycler',
-        ]
+  > => [
+    'comment',
+    'moveLabware',
+    'moveLiquid',
+    'mix',
+    'pause',
+    'heaterShaker',
+    'magnet',
+    'temperature',
+    'thermocycler',
+    'plateReader',
+  ]
   const isStepTypeEnabled: Record<
     Exclude<StepType, 'manualIntervention'>,
     boolean
@@ -110,6 +104,9 @@ export function AddStepButton(): JSX.Element {
     temperature: getIsModuleOnDeck(modules, TEMPERATURE_MODULE_TYPE),
     thermocycler: getIsModuleOnDeck(modules, THERMOCYCLER_MODULE_TYPE),
     heaterShaker: getIsModuleOnDeck(modules, HEATERSHAKER_MODULE_TYPE),
+    plateReader:
+      getIsModuleOnDeck(modules, ABSORBANCE_READER_TYPE) &&
+      enableAbsorbanceReader,
   }
 
   const addStep = (stepType: StepType): ReturnType<any> =>
diff --git a/protocol-designer/src/step-forms/selectors/index.ts b/protocol-designer/src/step-forms/selectors/index.ts
index 2fa3a69f122..2fe25dc790f 100644
--- a/protocol-designer/src/step-forms/selectors/index.ts
+++ b/protocol-designer/src/step-forms/selectors/index.ts
@@ -209,6 +209,7 @@ const MAGNETIC_BLOCK_INITIAL_STATE: MagneticBlockState = {
 }
 const ABSORBANCE_READER_INITIAL_STATE: AbsorbanceReaderState = {
   type: ABSORBANCE_READER_TYPE,
+  lidOpen: null,
 }
 
 const _getInitialDeckSetup = (
diff --git a/protocol-designer/src/step-forms/types.ts b/protocol-designer/src/step-forms/types.ts
index b170a128843..cec0a6ee22c 100644
--- a/protocol-designer/src/step-forms/types.ts
+++ b/protocol-designer/src/step-forms/types.ts
@@ -64,6 +64,7 @@ export interface MagneticBlockState {
 }
 export interface AbsorbanceReaderState {
   type: typeof ABSORBANCE_READER_TYPE
+  lidOpen: boolean | null
 }
 export interface ModuleTemporalProperties {
   slot: DeckSlot
diff --git a/step-generation/src/constants.ts b/step-generation/src/constants.ts
index 30c44782e8e..cc215de8c99 100644
--- a/step-generation/src/constants.ts
+++ b/step-generation/src/constants.ts
@@ -58,6 +58,7 @@ export const HEATERSHAKER_MODULE_INITIAL_STATE: HeaterShakerModuleState = {
 
 const ABSORBANCE_READER_INITIAL_STATE: AbsorbanceReaderState = {
   type: 'absorbanceReaderType',
+  lidOpen: null,
 }
 const MAGNETIC_BLOCK_INITIAL_STATE: MagneticBlockState = {
   type: 'magneticBlockType',
diff --git a/step-generation/src/types.ts b/step-generation/src/types.ts
index 021b6cfa515..c1716fa62c3 100644
--- a/step-generation/src/types.ts
+++ b/step-generation/src/types.ts
@@ -77,6 +77,7 @@ export interface MagneticBlockState {
 
 export interface AbsorbanceReaderState {
   type: typeof ABSORBANCE_READER_TYPE
+  lidOpen: boolean | null
 }
 
 export type ModuleState =

From 3db0e4fff2d00dbd2630427f76e4feafe1953347 Mon Sep 17 00:00:00 2001
From: Ryan Howard <ryan.howard@opentrons.com>
Date: Fri, 20 Dec 2024 10:53:16 -0500
Subject: [PATCH 05/18] feat(shared-data): Add support for PEEK pipettes
 (#17036) (#17160)

<!--
Thanks for taking the time to open a Pull Request (PR)! Please make sure
you've read the "Opening Pull Requests" section of our Contributing
Guide:


https://github.com/Opentrons/opentrons/blob/edge/CONTRIBUTING.md#opening-pull-requests

GitHub provides robust markdown to format your PR. Links, diagrams,
pictures, and videos along with text formatting make it possible to
create a rich and informative PR. For more information on GitHub
markdown, see:


https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax

To ensure your code is reviewed quickly and thoroughly, please fill out
the sections below to the best of your ability!
-->

This Adds support for the new oem pipette by doing the following:

- Add support for the flashing and factory testing pipettes with the new
serial number prefix P1KP
- Add the shared data definitions with updated max flowrates
- Add ability to change the max speed when the pipette definition has
the new "highSpeed" quirk
- Disable support for the pressure sensor
  - Don't monitor for over pressure
- Throw errors if trying to enable liquid presence detection on a
pipette
  - Throw errors if trying to explicitly use LLD
  - Support UI differences for the new pipette name

<!--
Describe your PR at a high level. State acceptance criteria and how this
PR fits into other work. Link issues, PRs, and other relevant resources.
-->

<!--
Describe your testing of the PR. Emphasize testing not reflected in the
code. Attach protocols, logs, screenshots and any other assets that
support your testing.
-->

<!--
List changes introduced by this PR considering future developers and the
end user. Give careful thought and clear documentation to breaking
changes.
-->

<!--
- What do you need from reviewers to feel confident this PR is ready to
merge?
- Ask questions. -->

<!--
- Indicate the level of attention this PR needs.
- Provide context to guide reviewers.
- Discuss trade-offs, coupling, and side effects.
- Look for the possibility, even if you think it's small, that your
change may affect some other part of the system.
- For instance, changing return tip behavior may also change the
behavior of labware calibration.
- How do your unit tests and on hands on testing mitigate this PR's
risks and the risk of future regressions?
- Especially in high risk PRs, explain how you know your testing is
enough.
-->

---------

<!--
Thanks for taking the time to open a Pull Request (PR)! Please make sure
you've read the "Opening Pull Requests" section of our Contributing
Guide:


https://github.com/Opentrons/opentrons/blob/edge/CONTRIBUTING.md#opening-pull-requests

GitHub provides robust markdown to format your PR. Links, diagrams,
pictures, and videos along with text formatting make it possible to
create a rich and informative PR. For more information on GitHub
markdown, see:


https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax

To ensure your code is reviewed quickly and thoroughly, please fill out
the sections below to the best of your ability!
-->

# Overview
Mergeback from some of the things I fixed on the chore_release-8.3
branch for the OEM pipettes.
<!--
Describe your PR at a high level. State acceptance criteria and how this
PR fits into other work. Link issues, PRs, and other relevant resources.
-->

## Test Plan and Hands on Testing

<!--
Describe your testing of the PR. Emphasize testing not reflected in the
code. Attach protocols, logs, screenshots and any other assets that
support your testing.
-->

## Changelog

<!--
List changes introduced by this PR considering future developers and the
end user. Give careful thought and clear documentation to breaking
changes.
-->

## Review requests

<!--
- What do you need from reviewers to feel confident this PR is ready to
merge?
- Ask questions.
-->

## Risk assessment

<!--
- Indicate the level of attention this PR needs.
- Provide context to guide reviewers.
- Discuss trade-offs, coupling, and side effects.
- Look for the possibility, even if you think it's small, that your
change may affect some other part of the system.
- For instance, changing return tip behavior may also change the
behavior of labware calibration.
- How do your unit tests and on hands on testing mitigate this PR's
risks and the risk of future regressions?
- Especially in high risk PRs, explain how you know your testing is
enough.
-->

---------

Co-authored-by: Caila Marashaj <98041399+caila-marashaj@users.noreply.github.com>
Co-authored-by: Jethary <jethary@opentrons.com>
---
 .../backends/ot3controller.py                 |   1 +
 .../hardware_control/backends/ot3simulator.py |   3 +
 .../instruments/ot2/pipette.py                |   7 +-
 .../instruments/ot3/pipette.py                |   6 +
 api/src/opentrons/protocol_api/validation.py  |   1 +
 .../resources/pipette_data_provider.py        |   5 +
 .../instruments/test_nozzle_manager.py        |  46 ++-
 .../hardware_control/test_ot3_api.py          | 155 ++++++++-
 .../hardware_control/test_pipette.py          |   5 +-
 api/tests/opentrons/test_execute.py           |   6 +
 .../service/legacy/routers/test_settings.py   |   1 +
 shared-data/command/schemas/10.json           |   1 +
 shared-data/command/schemas/11.json           |   2 +-
 shared-data/js/pipettes.ts                    |  18 +-
 .../definitions/1/pipetteModelSpecs.json      | 195 +++++++++++
 .../definitions/1/pipetteNameSpecs.json       |  48 +++
 .../2/general/eight_channel_em/p1000/1_0.json | 320 ++++++++++++++++++
 .../geometry/eight_channel_em/p1000/1_0.json  |  55 +++
 .../eight_channel_em/p1000/default/1_0.json   | 236 +++++++++++++
 .../pipette/load_data.py                      |  29 +-
 .../pipette/model_constants.py                |   1 -
 .../pipette/mutable_configurations.py         |   3 +
 .../pipette/pipette_definition.py             |  16 +-
 .../pipette/pipette_load_name_conversions.py  |  19 +-
 .../opentrons_shared_data/pipette/types.py    |  22 +-
 .../python/tests/pipette/test_load_data.py    |   8 +-
 .../pipette/test_max_flow_rates_per_volume.py |   1 +
 .../pipette/test_mutable_configurations.py    |   6 +-
 .../test_pipette_load_name_conversions.py     |  28 +-
 .../tests/pipette/test_validate_schema.py     |   6 +
 30 files changed, 1185 insertions(+), 65 deletions(-)
 create mode 100644 shared-data/pipette/definitions/2/general/eight_channel_em/p1000/1_0.json
 create mode 100644 shared-data/pipette/definitions/2/geometry/eight_channel_em/p1000/1_0.json
 create mode 100644 shared-data/pipette/definitions/2/liquid/eight_channel_em/p1000/default/1_0.json

diff --git a/api/src/opentrons/hardware_control/backends/ot3controller.py b/api/src/opentrons/hardware_control/backends/ot3controller.py
index cdbd8818111..84ffbffd8da 100644
--- a/api/src/opentrons/hardware_control/backends/ot3controller.py
+++ b/api/src/opentrons/hardware_control/backends/ot3controller.py
@@ -1072,6 +1072,7 @@ def _build_attached_pip(
                     converted_name.pipette_type,
                     converted_name.pipette_channels,
                     converted_name.pipette_version,
+                    converted_name.oem_type,
                 ),
                 "id": OT3Controller._combine_serial_number(attached),
             }
diff --git a/api/src/opentrons/hardware_control/backends/ot3simulator.py b/api/src/opentrons/hardware_control/backends/ot3simulator.py
index 10f4ebcfe2a..b7466386be6 100644
--- a/api/src/opentrons/hardware_control/backends/ot3simulator.py
+++ b/api/src/opentrons/hardware_control/backends/ot3simulator.py
@@ -511,6 +511,7 @@ def _attached_pipette_to_mount(
                         converted_name.pipette_type,
                         converted_name.pipette_channels,
                         converted_name.pipette_version,
+                        converted_name.oem_type,
                     ),
                     "id": None,
                 }
@@ -533,6 +534,7 @@ def _attached_pipette_to_mount(
                     converted_name.pipette_type,
                     converted_name.pipette_channels,
                     converted_name.pipette_version,
+                    converted_name.oem_type,
                 ),
                 "id": init_instr["id"],
             }
@@ -544,6 +546,7 @@ def _attached_pipette_to_mount(
                     converted_name.pipette_type,
                     converted_name.pipette_channels,
                     converted_name.pipette_version,
+                    converted_name.oem_type,
                 ),
                 "id": None,
             }
diff --git a/api/src/opentrons/hardware_control/instruments/ot2/pipette.py b/api/src/opentrons/hardware_control/instruments/ot2/pipette.py
index 0881999d435..2205da161f1 100644
--- a/api/src/opentrons/hardware_control/instruments/ot2/pipette.py
+++ b/api/src/opentrons/hardware_control/instruments/ot2/pipette.py
@@ -56,6 +56,7 @@
     UlPerMmAction,
     PipetteName,
     PipetteModel,
+    PipetteOEMType,
 )
 from opentrons.hardware_control.dev_types import InstrumentHardwareConfigs
 
@@ -112,17 +113,20 @@ def __init__(
             pipette_type=config.pipette_type,
             pipette_channels=config.channels,
             pipette_generation=config.display_category,
+            oem_type=PipetteOEMType.OT,
         )
         self._acting_as = self._pipette_name
         self._pipette_model = PipetteModelVersionType(
             pipette_type=config.pipette_type,
             pipette_channels=config.channels,
             pipette_version=config.version,
+            oem_type=PipetteOEMType.OT,
         )
         self._valid_nozzle_maps = load_pipette_data.load_valid_nozzle_maps(
             self._pipette_model.pipette_type,
             self._pipette_model.pipette_channels,
             self._pipette_model.pipette_version,
+            PipetteOEMType.OT,
         )
         self._nozzle_offset = self._config.nozzle_offset
         self._nozzle_manager = (
@@ -189,7 +193,7 @@ def act_as(self, name: PipetteNameType) -> None:
         ], f"{self.name} is not back-compatible with {name}"
 
         liquid_model = load_pipette_data.load_liquid_model(
-            name.pipette_type, name.pipette_channels, name.get_version()
+            name.pipette_type, name.pipette_channels, name.get_version(), name.oem_type
         )
         # TODO need to grab name config here to deal with act as test
         self._liquid_class.max_volume = liquid_model["default"].max_volume
@@ -280,6 +284,7 @@ def reload_configurations(self) -> None:
             self._pipette_model.pipette_type,
             self._pipette_model.pipette_channels,
             self._pipette_model.pipette_version,
+            self._pipette_model.oem_type,
         )
         self._config_as_dict = self._config.model_dump()
 
diff --git a/api/src/opentrons/hardware_control/instruments/ot3/pipette.py b/api/src/opentrons/hardware_control/instruments/ot3/pipette.py
index 6098b88b964..bd7671d745d 100644
--- a/api/src/opentrons/hardware_control/instruments/ot3/pipette.py
+++ b/api/src/opentrons/hardware_control/instruments/ot3/pipette.py
@@ -42,6 +42,7 @@
     PipetteName,
     PipetteModel,
     Quirks,
+    PipetteOEMType,
 )
 from opentrons_shared_data.pipette import (
     load_data as load_pipette_data,
@@ -93,22 +94,26 @@ def __init__(
         self._liquid_class_name = pip_types.LiquidClasses.default
         self._liquid_class = self._config.liquid_properties[self._liquid_class_name]
 
+        oem = PipetteOEMType.get_oem_from_quirks(config.quirks)
         # TODO (lc 12-05-2022) figure out how we can safely deprecate "name" and "model"
         self._pipette_name = PipetteNameType(
             pipette_type=config.pipette_type,
             pipette_channels=config.channels,
             pipette_generation=config.display_category,
+            oem_type=oem,
         )
         self._acting_as = self._pipette_name
         self._pipette_model = PipetteModelVersionType(
             pipette_type=config.pipette_type,
             pipette_channels=config.channels,
             pipette_version=config.version,
+            oem_type=oem,
         )
         self._valid_nozzle_maps = load_pipette_data.load_valid_nozzle_maps(
             self._pipette_model.pipette_type,
             self._pipette_model.pipette_channels,
             self._pipette_model.pipette_version,
+            self._pipette_model.oem_type,
         )
         self._nozzle_offset = self._config.nozzle_offset
         self._nozzle_manager = (
@@ -250,6 +255,7 @@ def reload_configurations(self) -> None:
             self._pipette_model.pipette_type,
             self._pipette_model.pipette_channels,
             self._pipette_model.pipette_version,
+            self._pipette_model.oem_type,
         )
         self._config_as_dict = self._config.model_dump()
 
diff --git a/api/src/opentrons/protocol_api/validation.py b/api/src/opentrons/protocol_api/validation.py
index f0db8a71e5e..cd1e5112718 100644
--- a/api/src/opentrons/protocol_api/validation.py
+++ b/api/src/opentrons/protocol_api/validation.py
@@ -72,6 +72,7 @@
     "flex_8channel_50": PipetteNameType.P50_MULTI_FLEX,
     "flex_1channel_1000": PipetteNameType.P1000_SINGLE_FLEX,
     "flex_8channel_1000": PipetteNameType.P1000_MULTI_FLEX,
+    "flex_8channel_1000_em": PipetteNameType.P1000_MULTI_EM,
     "flex_96channel_1000": PipetteNameType.P1000_96,
     "flex_96channel_200": PipetteNameType.P200_96,
 }
diff --git a/api/src/opentrons/protocol_engine/resources/pipette_data_provider.py b/api/src/opentrons/protocol_engine/resources/pipette_data_provider.py
index 4df6b0d4d77..ee721c88f2c 100644
--- a/api/src/opentrons/protocol_engine/resources/pipette_data_provider.py
+++ b/api/src/opentrons/protocol_engine/resources/pipette_data_provider.py
@@ -98,6 +98,7 @@ def configure_virtual_pipette_nozzle_layout(
                 config.pipette_type,
                 config.channels,
                 config.version,
+                pip_types.PipetteOEMType.OT,
             )
             new_nozzle_manager = NozzleConfigurationManager.build_from_config(
                 config, valid_nozzle_maps
@@ -130,6 +131,7 @@ def configure_virtual_pipette_for_volume(
             pipette_model.pipette_type,
             pipette_model.pipette_channels,
             pipette_model.pipette_version,
+            pipette_model.oem_type,
         )
 
         liquid_class = pipette_definition.liquid_class_for_volume_between_default_and_defaultlowvolume(
@@ -163,6 +165,7 @@ def _get_virtual_pipette_full_config_by_model_string(
             pipette_model.pipette_type,
             pipette_model.pipette_channels,
             pipette_model.pipette_version,
+            pipette_model.oem_type,
         )
 
     def _get_virtual_pipette_static_config_by_model(  # noqa: C901
@@ -179,6 +182,7 @@ def _get_virtual_pipette_static_config_by_model(  # noqa: C901
             pipette_model.pipette_type,
             pipette_model.pipette_channels,
             pipette_model.pipette_version,
+            pipette_model.oem_type,
         )
         try:
             tip_type = pip_types.PipetteTipType(
@@ -195,6 +199,7 @@ def _get_virtual_pipette_static_config_by_model(  # noqa: C901
             pipette_model.pipette_type,
             pipette_model.pipette_channels,
             pipette_model.pipette_version,
+            pipette_model.oem_type,
         )
         if pipette_id not in self._nozzle_manager_layout_by_id:
             nozzle_manager = NozzleConfigurationManager.build_from_config(
diff --git a/api/tests/opentrons/hardware_control/instruments/test_nozzle_manager.py b/api/tests/opentrons/hardware_control/instruments/test_nozzle_manager.py
index ba1f10aaaef..066cdbc3caf 100644
--- a/api/tests/opentrons/hardware_control/instruments/test_nozzle_manager.py
+++ b/api/tests/opentrons/hardware_control/instruments/test_nozzle_manager.py
@@ -10,6 +10,7 @@
     PipetteModelType,
     PipetteChannelType,
     PipetteVersionType,
+    PipetteOEMType,
 )
 from opentrons_shared_data.pipette.pipette_definition import (
     PipetteConfigurations,
@@ -261,7 +262,10 @@ def test_single_pipettes_always_full(
     pipette_details: Tuple[PipetteModelType, PipetteVersionType],
 ) -> None:
     config = load_definition(
-        pipette_details[0], PipetteChannelType.SINGLE_CHANNEL, pipette_details[1]
+        pipette_details[0],
+        PipetteChannelType.SINGLE_CHANNEL,
+        pipette_details[1],
+        PipetteOEMType.OT,
     )
     subject = nozzle_manager.NozzleConfigurationManager.build_from_config(
         config, ValidNozzleMaps(maps=A1)
@@ -289,7 +293,10 @@ def test_single_pipette_map_entries(
     pipette_details: Tuple[PipetteModelType, PipetteVersionType],
 ) -> None:
     config = load_definition(
-        pipette_details[0], PipetteChannelType.SINGLE_CHANNEL, pipette_details[1]
+        pipette_details[0],
+        PipetteChannelType.SINGLE_CHANNEL,
+        pipette_details[1],
+        PipetteOEMType.OT,
     )
     subject = nozzle_manager.NozzleConfigurationManager.build_from_config(
         config, ValidNozzleMaps(maps=A1)
@@ -326,7 +333,10 @@ def test_single_pipette_map_geometry(
     pipette_details: Tuple[PipetteModelType, PipetteVersionType],
 ) -> None:
     config = load_definition(
-        pipette_details[0], PipetteChannelType.SINGLE_CHANNEL, pipette_details[1]
+        pipette_details[0],
+        PipetteChannelType.SINGLE_CHANNEL,
+        pipette_details[1],
+        PipetteOEMType.OT,
     )
     subject = nozzle_manager.NozzleConfigurationManager.build_from_config(
         config, ValidNozzleMaps(maps=A1)
@@ -359,7 +369,10 @@ def test_multi_config_identification(
     pipette_details: Tuple[PipetteModelType, PipetteVersionType],
 ) -> None:
     config = load_definition(
-        pipette_details[0], PipetteChannelType.EIGHT_CHANNEL, pipette_details[1]
+        pipette_details[0],
+        PipetteChannelType.EIGHT_CHANNEL,
+        pipette_details[1],
+        PipetteOEMType.OT,
     )
     subject = nozzle_manager.NozzleConfigurationManager.build_from_config(
         config,
@@ -419,7 +432,10 @@ def test_multi_config_map_entries(
     pipette_details: Tuple[PipetteModelType, PipetteVersionType],
 ) -> None:
     config = load_definition(
-        pipette_details[0], PipetteChannelType.EIGHT_CHANNEL, pipette_details[1]
+        pipette_details[0],
+        PipetteChannelType.EIGHT_CHANNEL,
+        pipette_details[1],
+        PipetteOEMType.OT,
     )
     subject = nozzle_manager.NozzleConfigurationManager.build_from_config(
         config,
@@ -485,7 +501,10 @@ def test_multi_config_geometry(
     pipette_details: Tuple[PipetteModelType, PipetteVersionType],
 ) -> None:
     config = load_definition(
-        pipette_details[0], PipetteChannelType.EIGHT_CHANNEL, pipette_details[1]
+        pipette_details[0],
+        PipetteChannelType.EIGHT_CHANNEL,
+        pipette_details[1],
+        PipetteOEMType.OT,
     )
     subject = nozzle_manager.NozzleConfigurationManager.build_from_config(
         config,
@@ -536,7 +555,10 @@ def test_96_config_identification(
     pipette_details: Tuple[PipetteModelType, PipetteVersionType],
 ) -> None:
     config = load_definition(
-        pipette_details[0], PipetteChannelType.NINETY_SIX_CHANNEL, pipette_details[1]
+        pipette_details[0],
+        PipetteChannelType.NINETY_SIX_CHANNEL,
+        pipette_details[1],
+        PipetteOEMType.OT,
     )
     subject = nozzle_manager.NozzleConfigurationManager.build_from_config(
         config,
@@ -651,7 +673,10 @@ def test_96_config_map_entries(
     pipette_details: Tuple[PipetteModelType, PipetteVersionType],
 ) -> None:
     config = load_definition(
-        pipette_details[0], PipetteChannelType.NINETY_SIX_CHANNEL, pipette_details[1]
+        pipette_details[0],
+        PipetteChannelType.NINETY_SIX_CHANNEL,
+        pipette_details[1],
+        PipetteOEMType.OT,
     )
     subject = nozzle_manager.NozzleConfigurationManager.build_from_config(
         config,
@@ -988,7 +1013,10 @@ def test_96_config_geometry(
     pipette_details: Tuple[PipetteModelType, PipetteVersionType],
 ) -> None:
     config = load_definition(
-        pipette_details[0], PipetteChannelType.NINETY_SIX_CHANNEL, pipette_details[1]
+        pipette_details[0],
+        PipetteChannelType.NINETY_SIX_CHANNEL,
+        pipette_details[1],
+        PipetteOEMType.OT,
     )
     subject = nozzle_manager.NozzleConfigurationManager.build_from_config(
         config,
diff --git a/api/tests/opentrons/hardware_control/test_ot3_api.py b/api/tests/opentrons/hardware_control/test_ot3_api.py
index a0775d48e19..200549108db 100644
--- a/api/tests/opentrons/hardware_control/test_ot3_api.py
+++ b/api/tests/opentrons/hardware_control/test_ot3_api.py
@@ -82,6 +82,7 @@
     PipetteChannelType,
     PipetteVersionType,
     LiquidClasses,
+    PipetteOEMType,
 )
 from opentrons_shared_data.pipette import (
     load_data as load_pipette_data,
@@ -381,6 +382,7 @@ class PipetteLoadConfig(TypedDict):
     channels: Literal[1, 8, 96]
     version: Tuple[Literal[1, 2, 3], Literal[0, 1, 2, 3, 4, 5, 6]]
     model: PipetteModel
+    oem_type: PipetteOEMType
 
 
 class GripperLoadConfig(TypedDict):
@@ -402,8 +404,24 @@ class GripperLoadConfig(TypedDict):
     (
         (
             [
-                (OT3Mount.RIGHT, {"channels": 8, "version": (3, 3), "model": "p50"}),
-                (OT3Mount.LEFT, {"channels": 1, "version": (3, 3), "model": "p1000"}),
+                (
+                    OT3Mount.RIGHT,
+                    {
+                        "channels": 8,
+                        "version": (3, 3),
+                        "model": "p50",
+                        "oem_type": PipetteOEMType.OT,
+                    },
+                ),
+                (
+                    OT3Mount.LEFT,
+                    {
+                        "channels": 1,
+                        "version": (3, 3),
+                        "model": "p1000",
+                        "oem_type": PipetteOEMType.OT,
+                    },
+                ),
             ],
             GantryLoad.LOW_THROUGHPUT,
         ),
@@ -413,34 +431,88 @@ class GripperLoadConfig(TypedDict):
             GantryLoad.LOW_THROUGHPUT,
         ),
         (
-            [(OT3Mount.LEFT, {"channels": 8, "version": (3, 3), "model": "p1000"})],
+            [
+                (
+                    OT3Mount.LEFT,
+                    {
+                        "channels": 8,
+                        "version": (3, 3),
+                        "model": "p1000",
+                        "oem_type": "ot",
+                    },
+                )
+            ],
             GantryLoad.LOW_THROUGHPUT,
         ),
         (
-            [(OT3Mount.RIGHT, {"channels": 8, "version": (3, 3), "model": "p1000"})],
+            [
+                (
+                    OT3Mount.RIGHT,
+                    {
+                        "channels": 8,
+                        "version": (3, 3),
+                        "model": "p1000",
+                        "oem_type": "ot",
+                    },
+                )
+            ],
             GantryLoad.LOW_THROUGHPUT,
         ),
         (
-            [(OT3Mount.LEFT, {"channels": 96, "model": "p1000", "version": (3, 3)})],
+            [
+                (
+                    OT3Mount.LEFT,
+                    {
+                        "channels": 96,
+                        "model": "p1000",
+                        "version": (3, 3),
+                        "oem_type": "ot",
+                    },
+                )
+            ],
             GantryLoad.HIGH_THROUGHPUT,
         ),
         (
             [
-                (OT3Mount.LEFT, {"channels": 1, "version": (3, 3), "model": "p1000"}),
+                (
+                    OT3Mount.LEFT,
+                    {
+                        "channels": 1,
+                        "version": (3, 3),
+                        "model": "p1000",
+                        "oem_type": "ot",
+                    },
+                ),
                 (OT3Mount.GRIPPER, {"model": GripperModel.v1, "id": "g12345"}),
             ],
             GantryLoad.LOW_THROUGHPUT,
         ),
         (
             [
-                (OT3Mount.RIGHT, {"channels": 8, "version": (3, 3), "model": "p1000"}),
+                (
+                    OT3Mount.RIGHT,
+                    {
+                        "channels": 8,
+                        "version": (3, 3),
+                        "model": "p1000",
+                        "oem_type": "ot",
+                    },
+                ),
                 (OT3Mount.GRIPPER, {"model": GripperModel.v1, "id": "g12345"}),
             ],
             GantryLoad.LOW_THROUGHPUT,
         ),
         (
             [
-                (OT3Mount.LEFT, {"channels": 96, "model": "p1000", "version": (3, 3)}),
+                (
+                    OT3Mount.LEFT,
+                    {
+                        "channels": 96,
+                        "model": "p1000",
+                        "version": (3, 3),
+                        "oem_type": "ot",
+                    },
+                ),
                 (OT3Mount.GRIPPER, {"model": GripperModel.v1, "id": "g12345"}),
             ],
             GantryLoad.HIGH_THROUGHPUT,
@@ -463,6 +535,7 @@ async def test_gantry_load_transform(
                 PipetteModelType(pair[1]["model"]),
                 PipetteChannelType(pair[1]["channels"]),
                 PipetteVersionType(*pair[1]["version"]),
+                PipetteOEMType(pair[1]["oem_type"]),
             )
             instr_data = AttachedPipette(config=pipette_config, id="fakepip")
             await ot3_hardware.cache_pipette(pair[0], instr_data, None)
@@ -557,9 +630,30 @@ def mock_verify_tip_presence(
 
 
 load_pipette_configs = [
-    {OT3Mount.LEFT: {"channels": 1, "version": (3, 3), "model": "p1000"}},
-    {OT3Mount.RIGHT: {"channels": 8, "version": (3, 3), "model": "p50"}},
-    {OT3Mount.LEFT: {"channels": 96, "model": "p1000", "version": (3, 3)}},
+    {
+        OT3Mount.LEFT: {
+            "channels": 1,
+            "version": (3, 3),
+            "model": "p1000",
+            "oem_type": PipetteOEMType.OT,
+        }
+    },
+    {
+        OT3Mount.RIGHT: {
+            "channels": 8,
+            "version": (3, 3),
+            "model": "p50",
+            "oem_type": PipetteOEMType.OT,
+        }
+    },
+    {
+        OT3Mount.LEFT: {
+            "channels": 96,
+            "model": "p1000",
+            "version": (3, 3),
+            "oem_type": PipetteOEMType.OT,
+        }
+    },
 ]
 
 
@@ -573,6 +667,7 @@ async def prepare_for_mock_blowout(
         PipetteModelType(configs["model"]),
         PipetteChannelType(configs["channels"]),
         PipetteVersionType(*configs["version"]),
+        PipetteOEMType(configs["oem_type"]),
     )
     instr_data = AttachedPipette(config=pipette_config, id="fakepip")
     await ot3_hardware.cache_pipette(mount, instr_data, None)
@@ -804,7 +899,10 @@ async def test_liquid_probe(
 ) -> None:
     instr_data = AttachedPipette(
         config=load_pipette_data.load_definition(
-            PipetteModelType("p1000"), PipetteChannelType(1), PipetteVersionType(3, 4)
+            PipetteModelType("p1000"),
+            PipetteChannelType(1),
+            PipetteVersionType(3, 4),
+            PipetteOEMType.OT,
         ),
         id="fakepip",
     )
@@ -895,7 +993,10 @@ async def test_liquid_probe_plunger_moves(
     #       when approaching its max z distance
     instr_data = AttachedPipette(
         config=load_pipette_data.load_definition(
-            PipetteModelType("p1000"), PipetteChannelType(1), PipetteVersionType(3, 4)
+            PipetteModelType("p1000"),
+            PipetteChannelType(1),
+            PipetteVersionType(3, 4),
+            PipetteOEMType.OT,
         ),
         id="fakepip",
     )
@@ -1002,7 +1103,10 @@ async def test_liquid_probe_mount_moves(
     """Verify move targets for one singular liquid pass probe."""
     instr_data = AttachedPipette(
         config=load_pipette_data.load_definition(
-            PipetteModelType("p1000"), PipetteChannelType(1), PipetteVersionType(3, 4)
+            PipetteModelType("p1000"),
+            PipetteChannelType(1),
+            PipetteVersionType(3, 4),
+            PipetteOEMType.OT,
         ),
         id="fakepip",
     )
@@ -1064,7 +1168,10 @@ async def test_multi_liquid_probe(
 ) -> None:
     instr_data = AttachedPipette(
         config=load_pipette_data.load_definition(
-            PipetteModelType("p1000"), PipetteChannelType(1), PipetteVersionType(3, 4)
+            PipetteModelType("p1000"),
+            PipetteChannelType(1),
+            PipetteVersionType(3, 4),
+            PipetteOEMType.OT,
         ),
         id="fakepip",
     )
@@ -1131,7 +1238,10 @@ async def test_liquid_not_found(
 ) -> None:
     instr_data = AttachedPipette(
         config=load_pipette_data.load_definition(
-            PipetteModelType("p1000"), PipetteChannelType(1), PipetteVersionType(3, 4)
+            PipetteModelType("p1000"),
+            PipetteChannelType(1),
+            PipetteVersionType(3, 4),
+            PipetteOEMType.OT,
         ),
         id="fakepip",
     )
@@ -1599,7 +1709,10 @@ async def test_home_plunger(
     mount = OT3Mount.LEFT
     instr_data = AttachedPipette(
         config=load_pipette_data.load_definition(
-            PipetteModelType("p1000"), PipetteChannelType(1), PipetteVersionType(3, 4)
+            PipetteModelType("p1000"),
+            PipetteChannelType(1),
+            PipetteVersionType(3, 4),
+            PipetteOEMType.OT,
         ),
         id="fakepip",
     )
@@ -1621,6 +1734,7 @@ async def test_prepare_for_aspirate(
             PipetteModelType("p1000"),
             PipetteChannelType(1),
             PipetteVersionType(3, 4),
+            PipetteOEMType.OT,
         ),
         id="fakepip",
     )
@@ -1655,6 +1769,7 @@ async def test_plunger_ready_to_aspirate_after_dispense(
             PipetteModelType("p1000"),
             PipetteChannelType(1),
             PipetteVersionType(3, 4),
+            PipetteOEMType.OT,
         ),
         id="fakepip",
     )
@@ -1680,7 +1795,10 @@ async def test_move_to_plunger_bottom(
     mount = OT3Mount.LEFT
     instr_data = AttachedPipette(
         config=load_pipette_data.load_definition(
-            PipetteModelType("p1000"), PipetteChannelType(1), PipetteVersionType(3, 4)
+            PipetteModelType("p1000"),
+            PipetteChannelType(1),
+            PipetteVersionType(3, 4),
+            PipetteOEMType.OT,
         ),
         id="fakepip",
     )
@@ -2130,6 +2248,7 @@ async def test_home_axis(
             PipetteModelType("p1000"),
             PipetteChannelType(1),
             PipetteVersionType(3, 3),
+            PipetteOEMType.OT,
         )
         instr_data = AttachedPipette(config=pipette_config, id="fakepip")
         await ot3_hardware.cache_pipette(Axis.to_ot3_mount(axis), instr_data, None)
diff --git a/api/tests/opentrons/hardware_control/test_pipette.py b/api/tests/opentrons/hardware_control/test_pipette.py
index 25ac7b0298a..610fcc2a022 100644
--- a/api/tests/opentrons/hardware_control/test_pipette.py
+++ b/api/tests/opentrons/hardware_control/test_pipette.py
@@ -73,7 +73,10 @@ def _create_pipette(
     ) -> ot3_pipette.Pipette:
         return ot3_pipette.Pipette(
             load_pipette_data.load_definition(
-                model.pipette_type, model.pipette_channels, model.pipette_version
+                model.pipette_type,
+                model.pipette_channels,
+                model.pipette_version,
+                model.oem_type,
             ),
             calibration,
             id,
diff --git a/api/tests/opentrons/test_execute.py b/api/tests/opentrons/test_execute.py
index b9f791f4253..1e72a3757bf 100644
--- a/api/tests/opentrons/test_execute.py
+++ b/api/tests/opentrons/test_execute.py
@@ -131,6 +131,7 @@ def test_execute_function_apiv2(
             converted_model_v15.pipette_type,
             converted_model_v15.pipette_channels,
             converted_model_v15.pipette_version,
+            converted_model_v15.oem_type,
         ),
         "id": "testid",
     }
@@ -139,6 +140,7 @@ def test_execute_function_apiv2(
             converted_model_v1.pipette_type,
             converted_model_v1.pipette_channels,
             converted_model_v1.pipette_version,
+            converted_model_v1.oem_type,
         ),
         "id": "testid2",
     }
@@ -177,6 +179,7 @@ def emit_runlog(entry: Any) -> None:
             converted_model_v15.pipette_type,
             converted_model_v15.pipette_channels,
             converted_model_v15.pipette_version,
+            converted_model_v15.oem_type,
         ),
         "id": "testid",
     }
@@ -215,6 +218,7 @@ def emit_runlog(entry: Any) -> None:
             converted_model_v15.pipette_type,
             converted_model_v15.pipette_channels,
             converted_model_v15.pipette_version,
+            converted_model_v15.oem_type,
         ),
         "id": "testid",
     }
@@ -253,6 +257,7 @@ def emit_runlog(entry: Any) -> None:
             converted_model_v15.pipette_type,
             converted_model_v15.pipette_channels,
             converted_model_v15.pipette_version,
+            converted_model_v15.oem_type,
         ),
         "id": "testid",
     }
@@ -292,6 +297,7 @@ def emit_runlog(entry: Any) -> None:
             converted_model_v15.pipette_type,
             converted_model_v15.pipette_channels,
             converted_model_v15.pipette_version,
+            converted_model_v15.oem_type,
         ),
         "id": "testid",
     }
diff --git a/robot-server/tests/service/legacy/routers/test_settings.py b/robot-server/tests/service/legacy/routers/test_settings.py
index 9c52256b82d..4e8ee53b138 100644
--- a/robot-server/tests/service/legacy/routers/test_settings.py
+++ b/robot-server/tests/service/legacy/routers/test_settings.py
@@ -146,6 +146,7 @@ def test_receive_attached_pipette_settings(
                 pip_types.PipetteModelType.p20,
                 pip_types.PipetteChannelType.EIGHT_CHANNEL,
                 pip_types.PipetteVersionType(3, 5),
+                pip_types.PipetteOEMType.OT,
             ),
             pipette_serial_number="P12345",
             pipette_override_path="nope",
diff --git a/shared-data/command/schemas/10.json b/shared-data/command/schemas/10.json
index aced561bdff..fe43bffd92f 100644
--- a/shared-data/command/schemas/10.json
+++ b/shared-data/command/schemas/10.json
@@ -1774,6 +1774,7 @@
         "p1000_single_gen2",
         "p1000_single_flex",
         "p1000_multi_flex",
+        "p1000_multi_em_flex",
         "p1000_96",
         "p200_96"
       ],
diff --git a/shared-data/command/schemas/11.json b/shared-data/command/schemas/11.json
index ac5dd17eeb3..ec0d854e5f9 100644
--- a/shared-data/command/schemas/11.json
+++ b/shared-data/command/schemas/11.json
@@ -3348,7 +3348,7 @@
         "p1000_single_gen2",
         "p1000_single_flex",
         "p1000_multi_flex",
-        "p1000_multi_em",
+        "p1000_multi_em_flex",
         "p1000_96",
         "p200_96"
       ],
diff --git a/shared-data/js/pipettes.ts b/shared-data/js/pipettes.ts
index 2921696b820..134f4efbd82 100644
--- a/shared-data/js/pipettes.ts
+++ b/shared-data/js/pipettes.ts
@@ -186,9 +186,9 @@ const getHighestVersion = (
 }
 const V2_DEFINITION_TYPES = ['general', 'geometry']
 
-/* takes in pipetteName such as 'p300_single' or 'p300_single_gen1' 
+/* takes in pipetteName such as 'p300_single' or 'p300_single_gen1'
 or PipetteModel such as 'p300_single_v1.3' and converts it to channels,
-model, and version in order to return the correct pipette schema v2 json files. 
+model, and version in order to return the correct pipette schema v2 json files.
 **/
 export const getPipetteSpecsV2 = (
   name?: PipetteName | PipetteModel
@@ -200,7 +200,15 @@ export const getPipetteSpecsV2 = (
   const nameSplit = name.split('_')
   const pipetteModel = nameSplit[0] // ex: p300
   const channels = getChannelsFromString(nameSplit[1] as PipChannelString) //  ex: single -> single_channel
-  const pipetteGen = getVersionFromGen(nameSplit[2] as Gen)
+  let version_index: number
+  let oemString: string = ''
+  if (nameSplit.length === 4) {
+    version_index = 3
+    oemString = `_${nameSplit[2]}`
+  } else {
+    version_index = 2
+  }
+  const pipetteGen = getVersionFromGen(nameSplit[version_index] as Gen)
   let version: string = ''
   let majorVersion: number
   //  the first 2 conditions are to accommodate version from the pipetteName
@@ -215,7 +223,7 @@ export const getPipetteSpecsV2 = (
     majorVersion = pipetteGen //  ex: gen1 -> 1
     //  the 'else' is to accommodate the exact version if PipetteModel was added
   } else {
-    const versionNumber = nameSplit[2].split('v')[1]
+    const versionNumber = nameSplit[version_index].split('v')[1]
     if (versionNumber.includes('.')) {
       version = versionNumber.replace('.', '_') // ex: 1.0 -> 1_0
     } else {
@@ -236,7 +244,7 @@ export const getPipetteSpecsV2 = (
       )
       V2_DEFINITION_TYPES.forEach(type => {
         if (
-          `../pipette/definitions/2/${type}/${channels}/${pipetteModel}/${
+          `../pipette/definitions/2/${type}/${channels}${oemString}/${pipetteModel}/${
             version === '' ? highestVersion : version
           }.json` === path
         ) {
diff --git a/shared-data/pipette/definitions/1/pipetteModelSpecs.json b/shared-data/pipette/definitions/1/pipetteModelSpecs.json
index a66312eb522..6a1eea16bd4 100644
--- a/shared-data/pipette/definitions/1/pipetteModelSpecs.json
+++ b/shared-data/pipette/definitions/1/pipetteModelSpecs.json
@@ -8788,6 +8788,201 @@
       "returnTipHeight": 0.71,
       "idleCurrent": 0.3
     },
+    "p1000_multi_em_v3.0": {
+      "name": "p1000_multi_em_flex",
+      "backCompatNames": [],
+      "top": {
+        "value": 0.5,
+        "min": 0,
+        "max": 45,
+        "units": "mm",
+        "type": "float"
+      },
+      "bottom": {
+        "value": 71.5,
+        "min": 55,
+        "max": 80,
+        "type": "float",
+        "units": "mm"
+      },
+      "blowout": {
+        "value": 76.5,
+        "min": 60,
+        "max": 85,
+        "units": "mm",
+        "type": "float"
+      },
+      "dropTip": {
+        "value": 92.5,
+        "min": 78,
+        "max": 110,
+        "units": "mm",
+        "type": "float"
+      },
+      "pickUpCurrent": {
+        "value": 0.5,
+        "min": 0.05,
+        "max": 2.0,
+        "units": "amps",
+        "type": "float"
+      },
+      "pickUpDistance": {
+        "value": 13,
+        "min": 1,
+        "max": 30,
+        "units": "mm",
+        "type": "float"
+      },
+      "pickUpIncrement": {
+        "value": 0.0,
+        "min": 0.0,
+        "max": 10.0,
+        "units": "mm",
+        "type": "float"
+      },
+      "pickUpPresses": {
+        "value": 1,
+        "min": 0,
+        "max": 10,
+        "units": "presses",
+        "type": "int"
+      },
+      "pickUpSpeed": {
+        "value": 10,
+        "min": 1,
+        "max": 30,
+        "units": "mm/s",
+        "type": "float"
+      },
+      "nozzleOffset": [-8.0, -16.0, -259.15],
+      "modelOffset": [0.0, 0.0, 25.14],
+      "ulPerMm": [
+        {
+          "aspirate": [
+            [0.7511, 3.9556, 6.455],
+            [1.3075, 2.1664, 5.8839],
+            [1.8737, 1.1513, 7.2111],
+            [3.177, 0.9374, 7.612],
+            [4.5368, 0.5531, 8.8328],
+            [7.31, 0.3035, 9.9651],
+            [10.0825, 0.1513, 11.0781],
+            [12.9776, 0.1293, 11.2991],
+            [15.9173, 0.0976, 11.7115],
+            [18.8243, 0.06244, 12.2706],
+            [21.8529, 0.07004, 12.1275],
+            [24.8068, 0.04182, 12.7442],
+            [27.7744, 0.0356, 12.8984],
+            [35.2873, 0.03031, 13.04544],
+            [42.799, 0.02015, 13.4038],
+            [50.4562, 0.01956, 13.4293],
+            [58.1081, 0.0145, 13.6843],
+            [65.7267, 0.01036, 13.9252],
+            [73.2857, 0.006776, 14.1606],
+            [81.00159, 0.009126, 13.9883],
+            [88.6617, 0.006448, 14.2052],
+            [103.9829, 0.005074, 14.3271],
+            [119.4408, 0.004878, 14.3476],
+            [134.889, 0.003727, 14.485],
+            [150.273, 0.00258, 14.6402],
+            [181.2798, 0.002559, 14.6427],
+            [212.4724, 0.002242, 14.7002],
+            [243.577, 0.00151, 14.856],
+            [274.7216, 0.001244, 14.9205],
+            [305.8132, 0.0009118, 15.0118],
+            [368.06968, 0.0007321, 15.06677],
+            [430.2513, 0.0004805, 15.1594],
+            [492.3487, 0.0003186, 15.2291],
+            [554.5713, 0.0003031, 15.237],
+            [616.6825, 0.0001981, 15.2948],
+            [694.4168, 0.0001855, 15.3027],
+            [772.0327, 0.0001181, 15.3494],
+            [849.617, 0.00008929, 15.3717],
+            [927.2556, 0.00008601, 15.3745],
+            [1004.87, 0.00006801, 15.3912],
+            [1051.4648, 0.00006824, 15.391]
+          ],
+          "dispense": [
+            [0.7511, 3.9556, 6.455],
+            [1.3075, 2.1664, 5.8839],
+            [1.8737, 1.1513, 7.2111],
+            [3.177, 0.9374, 7.612],
+            [4.5368, 0.5531, 8.8328],
+            [7.31, 0.3035, 9.9651],
+            [10.0825, 0.1513, 11.0781],
+            [12.9776, 0.1293, 11.2991],
+            [15.9173, 0.0976, 11.7115],
+            [18.8243, 0.06244, 12.2706],
+            [21.8529, 0.07004, 12.1275],
+            [24.8068, 0.04182, 12.7442],
+            [27.7744, 0.0356, 12.8984],
+            [35.2873, 0.03031, 13.04544],
+            [42.799, 0.02015, 13.4038],
+            [50.4562, 0.01956, 13.4293],
+            [58.1081, 0.0145, 13.6843],
+            [65.7267, 0.01036, 13.9252],
+            [73.2857, 0.006776, 14.1606],
+            [81.00159, 0.009126, 13.9883],
+            [88.6617, 0.006448, 14.2052],
+            [103.9829, 0.005074, 14.3271],
+            [119.4408, 0.004878, 14.3476],
+            [134.889, 0.003727, 14.485],
+            [150.273, 0.00258, 14.6402],
+            [181.2798, 0.002559, 14.6427],
+            [212.4724, 0.002242, 14.7002],
+            [243.577, 0.00151, 14.856],
+            [274.7216, 0.001244, 14.9205],
+            [305.8132, 0.0009118, 15.0118],
+            [368.06968, 0.0007321, 15.06677],
+            [430.2513, 0.0004805, 15.1594],
+            [492.3487, 0.0003186, 15.2291],
+            [554.5713, 0.0003031, 15.237],
+            [616.6825, 0.0001981, 15.2948],
+            [694.4168, 0.0001855, 15.3027],
+            [772.0327, 0.0001181, 15.3494],
+            [849.617, 0.00008929, 15.3717],
+            [927.2556, 0.00008601, 15.3745],
+            [1004.87, 0.00006801, 15.3912],
+            [1051.4648, 0.00006824, 15.391]
+          ]
+        }
+      ],
+      "plungerCurrent": {
+        "value": 1,
+        "min": 0.1,
+        "max": 1.5,
+        "units": "amps",
+        "type": "float"
+      },
+      "dropTipCurrent": {
+        "value": 1,
+        "min": 0.1,
+        "max": 1.25,
+        "units": "amps",
+        "type": "float"
+      },
+      "dropTipSpeed": {
+        "value": 10,
+        "min": 0.001,
+        "max": 30,
+        "units": "mm/sec",
+        "type": "float"
+      },
+      "tipOverlap": {
+        "default": 10.5,
+        "opentrons/opentrons_flex_96_tiprack_1000ul/1": 10.5,
+        "opentrons/opentrons_flex_96_tiprack_200ul/1": 10.5
+      },
+      "tipLength": {
+        "value": 78.3,
+        "units": "mm",
+        "type": "float",
+        "min": 0,
+        "max": 100
+      },
+      "quirks": ["highSpeed"],
+      "returnTipHeight": 0.71,
+      "idleCurrent": 0.3
+    },
     "p50_multi_v3.0": {
       "name": "p50_multi_flex",
       "backCompatNames": [],
diff --git a/shared-data/pipette/definitions/1/pipetteNameSpecs.json b/shared-data/pipette/definitions/1/pipetteNameSpecs.json
index 61cd56d32f6..7beeb92aabc 100644
--- a/shared-data/pipette/definitions/1/pipetteNameSpecs.json
+++ b/shared-data/pipette/definitions/1/pipetteNameSpecs.json
@@ -599,6 +599,54 @@
       "opentrons/opentrons_flex_96_filtertiprack_50ul/1"
     ]
   },
+  "p1000_multi_em_flex": {
+    "displayName": "Flex 8-Channel EM 1000 μL",
+    "displayCategory": "FLEX",
+    "defaultAspirateFlowRate": {
+      "value": 478,
+      "min": 3,
+      "max": 812,
+      "valuesByApiLevel": {
+        "2.0": 159.04,
+        "2.6": 159.04,
+        "2.14": 478
+      }
+    },
+    "defaultDispenseFlowRate": {
+      "value": 478,
+      "min": 3,
+      "max": 812,
+      "valuesByApiLevel": {
+        "2.0": 159.04,
+        "2.14": 478
+      }
+    },
+    "defaultBlowOutFlowRate": {
+      "value": 478,
+      "min": 3,
+      "max": 812,
+      "valuesByApiLevel": {
+        "2.0": 78.52,
+        "2.14": 478
+      }
+    },
+    "channels": 8,
+    "minVolume": 5,
+    "maxVolume": 1000,
+    "smoothieConfigs": {
+      "stepsPerMM": 2133.33,
+      "homePosition": 230.15,
+      "travelDistance": 80
+    },
+    "defaultTipracks": [
+      "opentrons/opentrons_flex_96_tiprack_1000ul/1",
+      "opentrons/opentrons_flex_96_filtertiprack_1000ul/1",
+      "opentrons/opentrons_flex_96_tiprack_200ul/1",
+      "opentrons/opentrons_flex_96_filtertiprack_200ul/1",
+      "opentrons/opentrons_flex_96_tiprack_50ul/1",
+      "opentrons/opentrons_flex_96_filtertiprack_50ul/1"
+    ]
+  },
   "p50_multi_flex": {
     "displayName": "Flex 8-Channel 50 μL",
     "displayCategory": "FLEX",
diff --git a/shared-data/pipette/definitions/2/general/eight_channel_em/p1000/1_0.json b/shared-data/pipette/definitions/2/general/eight_channel_em/p1000/1_0.json
new file mode 100644
index 00000000000..c267504b404
--- /dev/null
+++ b/shared-data/pipette/definitions/2/general/eight_channel_em/p1000/1_0.json
@@ -0,0 +1,320 @@
+{
+  "$otSharedSchema": "#/pipette/schemas/2/pipettePropertiesSchema.json",
+  "displayName": "FLEX 8-Channel EM 1000 μL",
+  "model": "p1000",
+  "displayCategory": "FLEX",
+  "validNozzleMaps": {
+    "maps": {
+      "SingleA1": ["A1"],
+      "SingleH1": ["H1"],
+      "H1toG1": ["G1", "H1"],
+      "H1toF1": ["F1", "G1", "H1"],
+      "H1toE1": ["E1", "F1", "G1", "H1"],
+      "H1toD1": ["D1", "E1", "F1", "G1", "H1"],
+      "H1toC1": ["C1", "D1", "E1", "F1", "G1", "H1"],
+      "H1toB1": ["B1", "C1", "D1", "E1", "F1", "G1", "H1"],
+      "Full": ["A1", "B1", "C1", "D1", "E1", "F1", "G1", "H1"]
+    }
+  },
+  "pickUpTipConfigurations": {
+    "pressFit": {
+      "presses": 1,
+      "increment": 0.0,
+      "configurationsByNozzleMap": {
+        "SingleA1": {
+          "default": {
+            "speed": 10.0,
+            "distance": 11.0,
+            "current": 0.15,
+            "tipOverlaps": {
+              "v0": {
+                "default": 10.5,
+                "opentrons/opentrons_flex_96_tiprack_200ul/1": 10.1,
+                "opentrons/opentrons_flex_96_tiprack_50ul/1": 10.05,
+                "opentrons/opentrons_flex_96_tiprack_1000ul/1": 10.17,
+                "opentrons/opentrons_flex_96_filtertiprack_200ul/1": 10.1,
+                "opentrons/opentrons_flex_96_filtertiprack_50ul/1": 10.05,
+                "opentrons/opentrons_flex_96_filtertiprack_1000ul/1": 10.17
+              },
+              "v1": {
+                "default": 10.08,
+                "opentrons/opentrons_flex_96_tiprack_200ul/1": 10.1,
+                "opentrons/opentrons_flex_96_tiprack_50ul/1": 10.08,
+                "opentrons/opentrons_flex_96_tiprack_1000ul/1": 10.26,
+                "opentrons/opentrons_flex_96_filtertiprack_200ul/1": 10.1,
+                "opentrons/opentrons_flex_96_filtertiprack_50ul/1": 10.08,
+                "opentrons/opentrons_flex_96_filtertiprack_1000ul/1": 10.26
+              }
+            }
+          }
+        },
+        "SingleH1": {
+          "default": {
+            "speed": 10.0,
+            "distance": 11.0,
+            "current": 0.15,
+            "tipOverlaps": {
+              "v0": {
+                "default": 10.5,
+                "opentrons/opentrons_flex_96_tiprack_200ul/1": 10.1,
+                "opentrons/opentrons_flex_96_tiprack_50ul/1": 10.05,
+                "opentrons/opentrons_flex_96_tiprack_1000ul/1": 10.17,
+                "opentrons/opentrons_flex_96_filtertiprack_200ul/1": 10.1,
+                "opentrons/opentrons_flex_96_filtertiprack_50ul/1": 10.05,
+                "opentrons/opentrons_flex_96_filtertiprack_1000ul/1": 10.17
+              },
+              "v1": {
+                "default": 9.52,
+                "opentrons/opentrons_flex_96_tiprack_200ul/1": 9.71,
+                "opentrons/opentrons_flex_96_tiprack_50ul/1": 9.52,
+                "opentrons/opentrons_flex_96_tiprack_1000ul/1": 10.2,
+                "opentrons/opentrons_flex_96_filtertiprack_200ul/1": 9.71,
+                "opentrons/opentrons_flex_96_filtertiprack_50ul/1": 9.52,
+                "opentrons/opentrons_flex_96_filtertiprack_1000ul/1": 10.2
+              }
+            }
+          }
+        },
+        "H1toG1": {
+          "default": {
+            "speed": 10.0,
+            "distance": 13.0,
+            "current": 0.2,
+            "tipOverlaps": {
+              "v0": {
+                "default": 10.5,
+                "opentrons/opentrons_flex_96_tiprack_200ul/1": 10.1,
+                "opentrons/opentrons_flex_96_tiprack_50ul/1": 10.05,
+                "opentrons/opentrons_flex_96_tiprack_1000ul/1": 10.17,
+                "opentrons/opentrons_flex_96_filtertiprack_200ul/1": 10.1,
+                "opentrons/opentrons_flex_96_filtertiprack_50ul/1": 10.05,
+                "opentrons/opentrons_flex_96_filtertiprack_1000ul/1": 10.17
+              },
+              "v1": {
+                "default": 9.24,
+                "opentrons/opentrons_flex_96_tiprack_200ul/1": 9.52,
+                "opentrons/opentrons_flex_96_tiprack_50ul/1": 9.24,
+                "opentrons/opentrons_flex_96_tiprack_1000ul/1": 9.73,
+                "opentrons/opentrons_flex_96_filtertiprack_200ul/1": 9.52,
+                "opentrons/opentrons_flex_96_filtertiprack_50ul/1": 9.24,
+                "opentrons/opentrons_flex_96_filtertiprack_1000ul/1": 9.73
+              }
+            }
+          }
+        },
+        "H1toF1": {
+          "default": {
+            "speed": 10.0,
+            "distance": 13.0,
+            "current": 0.2,
+            "tipOverlaps": {
+              "v0": {
+                "default": 10.5,
+                "opentrons/opentrons_flex_96_tiprack_200ul/1": 10.1,
+                "opentrons/opentrons_flex_96_tiprack_50ul/1": 10.05,
+                "opentrons/opentrons_flex_96_tiprack_1000ul/1": 10.17,
+                "opentrons/opentrons_flex_96_filtertiprack_200ul/1": 10.1,
+                "opentrons/opentrons_flex_96_filtertiprack_50ul/1": 10.05,
+                "opentrons/opentrons_flex_96_filtertiprack_1000ul/1": 10.17
+              },
+              "v1": {
+                "default": 9.2,
+                "opentrons/opentrons_flex_96_tiprack_200ul/1": 9.3,
+                "opentrons/opentrons_flex_96_tiprack_50ul/1": 9.2,
+                "opentrons/opentrons_flex_96_tiprack_1000ul/1": 9.8,
+                "opentrons/opentrons_flex_96_filtertiprack_200ul/1": 9.3,
+                "opentrons/opentrons_flex_96_filtertiprack_50ul/1": 9.2,
+                "opentrons/opentrons_flex_96_filtertiprack_1000ul/1": 9.8
+              }
+            }
+          }
+        },
+        "H1toE1": {
+          "default": {
+            "speed": 10.0,
+            "distance": 13.0,
+            "current": 0.35,
+            "tipOverlaps": {
+              "v0": {
+                "default": 10.5,
+                "opentrons/opentrons_flex_96_tiprack_200ul/1": 10.1,
+                "opentrons/opentrons_flex_96_tiprack_50ul/1": 10.05,
+                "opentrons/opentrons_flex_96_tiprack_1000ul/1": 10.17,
+                "opentrons/opentrons_flex_96_filtertiprack_200ul/1": 10.1,
+                "opentrons/opentrons_flex_96_filtertiprack_50ul/1": 10.05,
+                "opentrons/opentrons_flex_96_filtertiprack_1000ul/1": 10.17
+              },
+              "v1": {
+                "default": 9.2,
+                "opentrons/opentrons_flex_96_tiprack_200ul/1": 9.3,
+                "opentrons/opentrons_flex_96_tiprack_50ul/1": 9.2,
+                "opentrons/opentrons_flex_96_tiprack_1000ul/1": 9.8,
+                "opentrons/opentrons_flex_96_filtertiprack_200ul/1": 9.3,
+                "opentrons/opentrons_flex_96_filtertiprack_50ul/1": 9.2,
+                "opentrons/opentrons_flex_96_filtertiprack_1000ul/1": 9.8
+              }
+            }
+          }
+        },
+        "H1toD1": {
+          "default": {
+            "speed": 10.0,
+            "distance": 13.0,
+            "current": 0.4,
+            "tipOverlaps": {
+              "v0": {
+                "default": 10.5,
+                "opentrons/opentrons_flex_96_tiprack_200ul/1": 10.1,
+                "opentrons/opentrons_flex_96_tiprack_50ul/1": 10.05,
+                "opentrons/opentrons_flex_96_tiprack_1000ul/1": 10.17,
+                "opentrons/opentrons_flex_96_filtertiprack_200ul/1": 10.1,
+                "opentrons/opentrons_flex_96_filtertiprack_50ul/1": 10.05,
+                "opentrons/opentrons_flex_96_filtertiprack_1000ul/1": 10.17
+              },
+              "v1": {
+                "default": 9.2,
+                "opentrons/opentrons_flex_96_tiprack_200ul/1": 9.3,
+                "opentrons/opentrons_flex_96_tiprack_50ul/1": 9.2,
+                "opentrons/opentrons_flex_96_tiprack_1000ul/1": 9.8,
+                "opentrons/opentrons_flex_96_filtertiprack_200ul/1": 9.3,
+                "opentrons/opentrons_flex_96_filtertiprack_50ul/1": 9.2,
+                "opentrons/opentrons_flex_96_filtertiprack_1000ul/1": 9.8
+              }
+            }
+          }
+        },
+        "H1toC1": {
+          "default": {
+            "speed": 10.0,
+            "distance": 13.0,
+            "current": 0.4,
+            "tipOverlaps": {
+              "v0": {
+                "default": 10.5,
+                "opentrons/opentrons_flex_96_tiprack_200ul/1": 10.1,
+                "opentrons/opentrons_flex_96_tiprack_50ul/1": 10.05,
+                "opentrons/opentrons_flex_96_tiprack_1000ul/1": 10.17,
+                "opentrons/opentrons_flex_96_filtertiprack_200ul/1": 10.1,
+                "opentrons/opentrons_flex_96_filtertiprack_50ul/1": 10.05,
+                "opentrons/opentrons_flex_96_filtertiprack_1000ul/1": 10.17
+              },
+              "v1": {
+                "default": 9.2,
+                "opentrons/opentrons_flex_96_tiprack_200ul/1": 9.3,
+                "opentrons/opentrons_flex_96_tiprack_50ul/1": 9.2,
+                "opentrons/opentrons_flex_96_tiprack_1000ul/1": 9.8,
+                "opentrons/opentrons_flex_96_filtertiprack_200ul/1": 9.3,
+                "opentrons/opentrons_flex_96_filtertiprack_50ul/1": 9.2,
+                "opentrons/opentrons_flex_96_filtertiprack_1000ul/1": 9.8
+              }
+            }
+          }
+        },
+        "H1toB1": {
+          "default": {
+            "speed": 10.0,
+            "distance": 13.0,
+            "current": 0.5,
+            "tipOverlaps": {
+              "v0": {
+                "default": 10.5,
+                "opentrons/opentrons_flex_96_tiprack_200ul/1": 10.1,
+                "opentrons/opentrons_flex_96_tiprack_50ul/1": 10.05,
+                "opentrons/opentrons_flex_96_tiprack_1000ul/1": 10.17,
+                "opentrons/opentrons_flex_96_filtertiprack_200ul/1": 10.1,
+                "opentrons/opentrons_flex_96_filtertiprack_50ul/1": 10.05,
+                "opentrons/opentrons_flex_96_filtertiprack_1000ul/1": 10.17
+              },
+              "v1": {
+                "default": 9.13,
+                "opentrons/opentrons_flex_96_tiprack_200ul/1": 9.23,
+                "opentrons/opentrons_flex_96_tiprack_50ul/1": 9.13,
+                "opentrons/opentrons_flex_96_tiprack_1000ul/1": 9.9,
+                "opentrons/opentrons_flex_96_filtertiprack_200ul/1": 9.23,
+                "opentrons/opentrons_flex_96_filtertiprack_50ul/1": 9.13,
+                "opentrons/opentrons_flex_96_filtertiprack_1000ul/1": 9.9
+              }
+            }
+          }
+        },
+        "Full": {
+          "default": {
+            "speed": 10.0,
+            "distance": 13.0,
+            "current": 0.55,
+            "tipOverlaps": {
+              "v0": {
+                "default": 10.5,
+                "opentrons/opentrons_flex_96_tiprack_200ul/1": 10.1,
+                "opentrons/opentrons_flex_96_tiprack_50ul/1": 10.05,
+                "opentrons/opentrons_flex_96_tiprack_1000ul/1": 10.17,
+                "opentrons/opentrons_flex_96_filtertiprack_200ul/1": 10.1,
+                "opentrons/opentrons_flex_96_filtertiprack_50ul/1": 10.05,
+                "opentrons/opentrons_flex_96_filtertiprack_1000ul/1": 10.17
+              },
+              "v1": {
+                "default": 10.5,
+                "opentrons/opentrons_flex_96_tiprack_200ul/1": 9.42,
+                "opentrons/opentrons_flex_96_tiprack_50ul/1": 9.27,
+                "opentrons/opentrons_flex_96_tiprack_1000ul/1": 9.67,
+                "opentrons/opentrons_flex_96_filtertiprack_200ul/1": 9.42,
+                "opentrons/opentrons_flex_96_filtertiprack_50ul/1": 9.27,
+                "opentrons/opentrons_flex_96_filtertiprack_1000ul/1": 9.67
+              },
+              "v3": {
+                "default": 9.28,
+                "opentrons/opentrons_flex_96_tiprack_200ul/1": 9.37,
+                "opentrons/opentrons_flex_96_tiprack_50ul/1": 9.28,
+                "opentrons/opentrons_flex_96_tiprack_1000ul/1": 9.67,
+                "opentrons/opentrons_flex_96_filtertiprack_200ul/1": 9.37,
+                "opentrons/opentrons_flex_96_filtertiprack_50ul/1": 9.28,
+                "opentrons/opentrons_flex_96_filtertiprack_1000ul/1": 9.67
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "dropTipConfigurations": {
+    "plungerEject": {
+      "current": 1.0,
+      "speed": 10
+    }
+  },
+  "plungerMotorConfigurations": {
+    "idle": 0.3,
+    "run": 1.0
+  },
+  "plungerPositionsConfigurations": {
+    "default": {
+      "top": 0.0,
+      "bottom": 71.5,
+      "blowout": 76.5,
+      "drop": 91.5
+    }
+  },
+  "availableSensors": {
+    "sensors": ["capacitive", "environment"],
+    "capacitive": {
+      "count": 2
+    },
+    "environment": {
+      "count": 1
+    }
+  },
+  "partialTipConfigurations": {
+    "partialTipSupported": true,
+    "availableConfigurations": [1, 2, 3, 4, 5, 6, 7, 8]
+  },
+  "backCompatNames": [],
+  "channels": 8,
+  "shaftDiameter": 4.5,
+  "shaftULperMM": 15.904,
+  "backlashDistance": 0.1,
+  "quirks": ["highSpeed"],
+  "plungerHomingConfigurations": {
+    "current": 1.0,
+    "speed": 30
+  }
+}
diff --git a/shared-data/pipette/definitions/2/geometry/eight_channel_em/p1000/1_0.json b/shared-data/pipette/definitions/2/geometry/eight_channel_em/p1000/1_0.json
new file mode 100644
index 00000000000..b92e7415fe3
--- /dev/null
+++ b/shared-data/pipette/definitions/2/geometry/eight_channel_em/p1000/1_0.json
@@ -0,0 +1,55 @@
+{
+  "$otSharedSchema": "#/pipette/schemas/2/pipetteGeometrySchema.json",
+  "pathTo3D": "pipette/definitions/2/geometry/eight_channel_em/p1000/placeholder.gltf",
+  "nozzleOffset": [-8.0, -16.0, -259.15],
+  "pipetteBoundingBoxOffsets": {
+    "backLeftCorner": [-38.5, 0.0, -259.15],
+    "frontRightCorner": [11.5, -95.0, -259.15]
+  },
+  "orderedRows": [
+    {
+      "key": "A",
+      "orderedNozzles": ["A1"]
+    },
+    {
+      "key": "B",
+      "orderedNozzles": ["B1"]
+    },
+    { "key": "C", "orderedNozzles": ["C1"] },
+    { "key": "D", "orderedNozzles": ["D1"] },
+    { "key": "E", "orderedNozzles": ["E1"] },
+    { "key": "F", "orderedNozzles": ["F1"] },
+    { "key": "G", "orderedNozzles": ["G1"] },
+    { "key": "H", "orderedNozzles": ["H1"] }
+  ],
+  "orderedColumns": [
+    {
+      "key": "1",
+      "orderedNozzles": ["A1", "B1", "C1", "D1", "E1", "F1", "G1", "H1"]
+    }
+  ],
+  "nozzleMap": {
+    "A1": [-8.0, -16.0, -259.15],
+    "B1": [-8.0, -25.0, -259.15],
+    "C1": [-8.0, -34.0, -259.15],
+    "D1": [-8.0, -43.0, -259.15],
+    "E1": [-8.0, -52.0, -259.15],
+    "F1": [-8.0, -61.0, -259.15],
+    "G1": [-8.0, -70.0, -259.15],
+    "H1": [-8.0, -79.0, -259.15]
+  },
+  "lldSettings": {
+    "t50": {
+      "minHeight": 1.0,
+      "minVolume": 0
+    },
+    "t200": {
+      "minHeight": 1.0,
+      "minVolume": 0
+    },
+    "t1000": {
+      "minHeight": 1.5,
+      "minVolume": 0
+    }
+  }
+}
diff --git a/shared-data/pipette/definitions/2/liquid/eight_channel_em/p1000/default/1_0.json b/shared-data/pipette/definitions/2/liquid/eight_channel_em/p1000/default/1_0.json
new file mode 100644
index 00000000000..52c7b58171d
--- /dev/null
+++ b/shared-data/pipette/definitions/2/liquid/eight_channel_em/p1000/default/1_0.json
@@ -0,0 +1,236 @@
+{
+  "$otSharedSchema": "#/pipette/schemas/2/pipetteLiquidPropertiesSchema.json",
+  "supportedTips": {
+    "t50": {
+      "uiMaxFlowRate": 1431.0,
+      "defaultAspirateFlowRate": {
+        "default": 478,
+        "valuesByApiLevel": { "2.14": 478 }
+      },
+      "defaultDispenseFlowRate": {
+        "default": 478,
+        "valuesByApiLevel": { "2.14": 478 }
+      },
+      "defaultBlowOutFlowRate": {
+        "default": 478,
+        "valuesByApiLevel": { "2.14": 478 }
+      },
+      "defaultFlowAcceleration": 24000.0,
+      "defaultTipLength": 57.9,
+      "defaultReturnTipHeight": 0.71,
+      "aspirate": {
+        "default": {
+          "1": [
+            [0.12, -57.973785, 8.495981],
+            [0.11, 40.31047, -3.298129],
+            [0.09, 19.330223, -0.990302],
+            [0.375, 6.200306, 0.19139],
+            [1.17, 4.795927, 0.718032],
+            [1.92, 2.746428, 3.115947],
+            [2.145, 1.592373, 5.331732],
+            [2.4, 1.336497, 5.880586],
+            [2.66, 1.043996, 6.582588],
+            [2.84, 0.280189, 8.614315],
+            [2.985, -0.698973, 11.395134],
+            [3.085, -5.627462, 26.106674],
+            [3.625, 1.899561, 2.885808],
+            [4.43, 1.977851, 2.602006],
+            [5.155, 0.596916, 8.71955],
+            [6.71, 0.366092, 9.909446],
+            [8.62, 0.233878, 10.796602],
+            [11.015, 0.158281, 11.448248],
+            [13.97, 0.101002, 12.079177],
+            [17.545, 0.047056, 12.832813],
+            [22.075, 0.043416, 12.896662],
+            [27.955, 0.049456, 12.763333],
+            [34.695, 0.00096, 14.119053],
+            [43.535, 0.018347, 13.515795],
+            [54.08, 0.001949, 14.229706]
+          ]
+        }
+      },
+      "dispense": {
+        "default": {
+          "1": [
+            [0.12, -57.973785, 8.495981],
+            [0.11, 40.31047, -3.298129],
+            [0.09, 19.330223, -0.990302],
+            [0.375, 6.200306, 0.19139],
+            [1.17, 4.795927, 0.718032],
+            [1.92, 2.746428, 3.115947],
+            [2.145, 1.592373, 5.331732],
+            [2.4, 1.336497, 5.880586],
+            [2.66, 1.043996, 6.582588],
+            [2.84, 0.280189, 8.614315],
+            [2.985, -0.698973, 11.395134],
+            [3.085, -5.627462, 26.106674],
+            [3.625, 1.899561, 2.885808],
+            [4.43, 1.977851, 2.602006],
+            [5.155, 0.596916, 8.71955],
+            [6.71, 0.366092, 9.909446],
+            [8.62, 0.233878, 10.796602],
+            [11.015, 0.158281, 11.448248],
+            [13.97, 0.101002, 12.079177],
+            [17.545, 0.047056, 12.832813],
+            [22.075, 0.043416, 12.896662],
+            [27.955, 0.049456, 12.763333],
+            [34.695, 0.00096, 14.119053],
+            [43.535, 0.018347, 13.515795],
+            [54.08, 0.001949, 14.229706]
+          ]
+        }
+      },
+      "defaultPushOutVolume": 7
+    },
+    "t200": {
+      "uiMaxFlowRate": 1431.0,
+      "defaultAspirateFlowRate": {
+        "default": 716,
+        "valuesByApiLevel": { "2.14": 716 }
+      },
+      "defaultDispenseFlowRate": {
+        "default": 716,
+        "valuesByApiLevel": { "2.14": 716 }
+      },
+      "defaultBlowOutFlowRate": {
+        "default": 716,
+        "valuesByApiLevel": { "2.14": 716 }
+      },
+      "defaultFlowAcceleration": 24000.0,
+      "defaultTipLength": 58.35,
+      "defaultReturnTipHeight": 0.71,
+      "aspirate": {
+        "default": {
+          "1": [
+            [0.28375, -141.180627, 42.499381],
+            [0.26125, 27.065799, -5.240543],
+            [0.715, 4.916546, 0.54595],
+            [1.685, 3.844391, 1.31254],
+            [2.6025, 2.148973, 4.169319],
+            [3.75875, 1.461751, 5.957816],
+            [4.9975, 0.733738, 8.694235],
+            [6.41375, 0.377599, 10.474036],
+            [8.1225, 0.214926, 11.517382],
+            [10.2425, 0.152451, 12.024835],
+            [12.80125, 0.081051, 12.75615],
+            [15.9875, 0.062849, 12.989161],
+            [19.9625, 0.051585, 13.169235],
+            [24.83625, 0.030593, 13.588301],
+            [30.89125, 0.024593, 13.737307],
+            [38.42625, 0.020128, 13.875257],
+            [47.71875, 0.014091, 14.107204],
+            [59.28375, 0.011625, 14.224918],
+            [73.41375, 0.00635, 14.537608],
+            [90.84375, 0.004458, 14.676515],
+            [112.32, 0.003084, 14.801312],
+            [138.7675, 0.002045, 14.917998],
+            [171.29875, 0.001319, 15.018758],
+            [211.27375, 0.000719, 15.121662]
+          ]
+        }
+      },
+      "dispense": {
+        "default": {
+          "1": [
+            [0.28375, -141.180627, 42.499381],
+            [0.26125, 27.065799, -5.240543],
+            [0.715, 4.916546, 0.54595],
+            [1.685, 3.844391, 1.31254],
+            [2.6025, 2.148973, 4.169319],
+            [3.75875, 1.461751, 5.957816],
+            [4.9975, 0.733738, 8.694235],
+            [6.41375, 0.377599, 10.474036],
+            [8.1225, 0.214926, 11.517382],
+            [10.2425, 0.152451, 12.024835],
+            [12.80125, 0.081051, 12.75615],
+            [15.9875, 0.062849, 12.989161],
+            [19.9625, 0.051585, 13.169235],
+            [24.83625, 0.030593, 13.588301],
+            [30.89125, 0.024593, 13.737307],
+            [38.42625, 0.020128, 13.875257],
+            [47.71875, 0.014091, 14.107204],
+            [59.28375, 0.011625, 14.224918],
+            [73.41375, 0.00635, 14.537608],
+            [90.84375, 0.004458, 14.676515],
+            [112.32, 0.003084, 14.801312],
+            [138.7675, 0.002045, 14.917998],
+            [171.29875, 0.001319, 15.018758],
+            [211.27375, 0.000719, 15.121662]
+          ]
+        }
+      },
+      "defaultPushOutVolume": 5
+    },
+    "t1000": {
+      "uiMaxFlowRate": 1431.0,
+      "defaultAspirateFlowRate": {
+        "default": 716,
+        "valuesByApiLevel": { "2.14": 716 }
+      },
+      "defaultDispenseFlowRate": {
+        "default": 716,
+        "valuesByApiLevel": { "2.14": 716 }
+      },
+      "defaultBlowOutFlowRate": {
+        "default": 716,
+        "valuesByApiLevel": { "2.14": 716 }
+      },
+      "defaultFlowAcceleration": 24000.0,
+      "defaultTipLength": 95.6,
+      "defaultReturnTipHeight": 0.82,
+      "aspirate": {
+        "default": {
+          "1": [
+            [2.1443, 1.9858, 4.2677],
+            [3.0286, 1.2526, 5.84],
+            [4.9557, 0.6268, 7.7351],
+            [9.7943, 0.2745, 9.4811],
+            [12.1514, 0.1715, 10.4901],
+            [14.9414, 0.0897, 11.4833],
+            [51.46, 0.0424, 12.1913],
+            [92.68, 0.0095, 13.881],
+            [112.4886, 0.0049, 14.3053],
+            [243.5986, 0.0028, 14.5507],
+            [356.5686, 0.0009, 15.0019],
+            [430.99, 0.0005, 15.1492],
+            [628.7886, 0.0003, 15.2496],
+            [1001.15, 0.0001, 15.3472],
+            [1106.0857, 0.0001, 15.3551]
+          ]
+        }
+      },
+      "dispense": {
+        "default": {
+          "1": [
+            [2.1443, 1.9858, 4.2677],
+            [3.0286, 1.2526, 5.84],
+            [4.9557, 0.6268, 7.7351],
+            [9.7943, 0.2745, 9.4811],
+            [12.1514, 0.1715, 10.4901],
+            [14.9414, 0.0897, 11.4833],
+            [51.46, 0.0424, 12.1913],
+            [92.68, 0.0095, 13.881],
+            [112.4886, 0.0049, 14.3053],
+            [243.5986, 0.0028, 14.5507],
+            [356.5686, 0.0009, 15.0019],
+            [430.99, 0.0005, 15.1492],
+            [628.7886, 0.0003, 15.2496],
+            [1001.15, 0.0001, 15.3472],
+            [1106.0857, 0.0001, 15.3551]
+          ]
+        }
+      },
+      "defaultPushOutVolume": 20
+    }
+  },
+  "maxVolume": 1000,
+  "minVolume": 5,
+  "defaultTipracks": [
+    "opentrons/opentrons_flex_96_tiprack_1000ul/1",
+    "opentrons/opentrons_flex_96_tiprack_200ul/1",
+    "opentrons/opentrons_flex_96_tiprack_50ul/1",
+    "opentrons/opentrons_flex_96_filtertiprack_1000ul/1",
+    "opentrons/opentrons_flex_96_filtertiprack_200ul/1",
+    "opentrons/opentrons_flex_96_filtertiprack_50ul/1"
+  ]
+}
diff --git a/shared-data/python/opentrons_shared_data/pipette/load_data.py b/shared-data/python/opentrons_shared_data/pipette/load_data.py
index 66ba690356a..f495713b3d8 100644
--- a/shared-data/python/opentrons_shared_data/pipette/load_data.py
+++ b/shared-data/python/opentrons_shared_data/pipette/load_data.py
@@ -22,6 +22,7 @@
     PipetteModelMajorVersion,
     PipetteModelMinorVersion,
     LiquidClasses,
+    PipetteOEMType,
 )
 
 
@@ -35,8 +36,10 @@ def _get_configuration_dictionary(
     channels: PipetteChannelType,
     model: PipetteModelType,
     version: PipetteVersionType,
+    oem: PipetteOEMType,
     liquid_class: Optional[LiquidClasses] = None,
 ) -> LoadedConfiguration:
+    oem_extension = f"_{oem.value}" if oem != PipetteOEMType.OT else ""
     if liquid_class:
         config_path = (
             get_shared_data_root()
@@ -44,7 +47,7 @@ def _get_configuration_dictionary(
             / "definitions"
             / "2"
             / config_type
-            / channels.name.lower()
+            / f"{channels.name.lower()}{oem_extension}"
             / model.value
             / liquid_class.name
             / f"{version.major}_{version.minor}.json"
@@ -56,7 +59,7 @@ def _get_configuration_dictionary(
             / "definitions"
             / "2"
             / config_type
-            / channels.name.lower()
+            / f"{channels.name.lower()}{oem_extension}"
             / model.value
             / f"{version.major}_{version.minor}.json"
         )
@@ -68,8 +71,9 @@ def _geometry(
     channels: PipetteChannelType,
     model: PipetteModelType,
     version: PipetteVersionType,
+    oem: PipetteOEMType,
 ) -> LoadedConfiguration:
-    return _get_configuration_dictionary("geometry", channels, model, version)
+    return _get_configuration_dictionary("geometry", channels, model, version, oem)
 
 
 @lru_cache(maxsize=None)
@@ -77,12 +81,13 @@ def _liquid(
     channels: PipetteChannelType,
     model: PipetteModelType,
     version: PipetteVersionType,
+    oem: PipetteOEMType,
 ) -> Dict[str, LoadedConfiguration]:
     liquid_dict = {}
     for liquid_class in LiquidClasses:
         try:
             liquid_dict[liquid_class.name] = _get_configuration_dictionary(
-                "liquid", channels, model, version, liquid_class
+                "liquid", channels, model, version, oem, liquid_class
             )
         except FileNotFoundError:
             continue
@@ -95,8 +100,9 @@ def _physical(
     channels: PipetteChannelType,
     model: PipetteModelType,
     version: PipetteVersionType,
+    oem: PipetteOEMType,
 ) -> LoadedConfiguration:
-    return _get_configuration_dictionary("general", channels, model, version)
+    return _get_configuration_dictionary("general", channels, model, version, oem)
 
 
 def _dirs_in(path: Path) -> Iterator[Path]:
@@ -152,8 +158,9 @@ def load_liquid_model(
     model: PipetteModelType,
     channels: PipetteChannelType,
     version: PipetteVersionType,
+    oem: PipetteOEMType,
 ) -> Dict[str, PipetteLiquidPropertiesDefinition]:
-    liquid_dict = _liquid(channels, model, version)
+    liquid_dict = _liquid(channels, model, version, oem)
     return {
         k: PipetteLiquidPropertiesDefinition.model_validate(v)
         for k, v in liquid_dict.items()
@@ -252,6 +259,7 @@ def load_definition(
     model: PipetteModelType,
     channels: PipetteChannelType,
     version: PipetteVersionType,
+    oem: PipetteOEMType,
 ) -> PipetteConfigurations:
     if (
         version.major not in PipetteModelMajorVersion
@@ -259,9 +267,9 @@ def load_definition(
     ):
         raise KeyError("Pipette version not found.")
 
-    geometry_dict = _geometry(channels, model, version)
-    physical_dict = _physical(channels, model, version)
-    liquid_dict = _liquid(channels, model, version)
+    geometry_dict = _geometry(channels, model, version, oem)
+    physical_dict = _physical(channels, model, version, oem)
+    liquid_dict = _liquid(channels, model, version, oem)
 
     generation = PipetteGenerationType(physical_dict["displayCategory"])
     mount_configs = MOUNT_CONFIG_LOOKUP_TABLE[generation][channels]
@@ -281,6 +289,7 @@ def load_valid_nozzle_maps(
     model: PipetteModelType,
     channels: PipetteChannelType,
     version: PipetteVersionType,
+    oem: PipetteOEMType,
 ) -> ValidNozzleMaps:
     if (
         version.major not in PipetteModelMajorVersion
@@ -288,5 +297,5 @@ def load_valid_nozzle_maps(
     ):
         raise KeyError("Pipette version not found.")
 
-    physical_dict = _physical(channels, model, version)
+    physical_dict = _physical(channels, model, version, oem)
     return ValidNozzleMaps.model_validate(physical_dict["validNozzleMaps"])
diff --git a/shared-data/python/opentrons_shared_data/pipette/model_constants.py b/shared-data/python/opentrons_shared_data/pipette/model_constants.py
index daf9b233e52..7d34e0e5f6a 100644
--- a/shared-data/python/opentrons_shared_data/pipette/model_constants.py
+++ b/shared-data/python/opentrons_shared_data/pipette/model_constants.py
@@ -20,7 +20,6 @@
     PipetteGenerationType.FLEX: {
         PipetteChannelType.SINGLE_CHANNEL: RobotMountConfigs(2133.33, 230.15, 80),
         PipetteChannelType.EIGHT_CHANNEL: RobotMountConfigs(2133.33, 230.15, 80),
-        PipetteChannelType.EIGHT_CHANNEL_EM: RobotMountConfigs(2133.33, 230.15, 80),
         PipetteChannelType.NINETY_SIX_CHANNEL: RobotMountConfigs(2133.33, 230.15, 80),
     },
 }
diff --git a/shared-data/python/opentrons_shared_data/pipette/mutable_configurations.py b/shared-data/python/opentrons_shared_data/pipette/mutable_configurations.py
index 23943ef9082..7214adf2483 100644
--- a/shared-data/python/opentrons_shared_data/pipette/mutable_configurations.py
+++ b/shared-data/python/opentrons_shared_data/pipette/mutable_configurations.py
@@ -238,6 +238,7 @@ def _load_full_mutable_configs(
         pipette_model.pipette_type,
         pipette_model.pipette_channels,
         pipette_model.pipette_version,
+        pipette_model.oem_type,
     )
     base_configs_dict = base_configs.model_dump(by_alias=True)
     full_mutable_configs = _list_all_mutable_configs(overrides, base_configs_dict)
@@ -334,6 +335,7 @@ def load_with_mutable_configurations(
         pipette_model.pipette_type,
         pipette_model.pipette_channels,
         pipette_model.pipette_version,
+        pipette_model.oem_type,
     )
     # Load overrides if we have a pipette id
     if pipette_serial_number:
@@ -431,6 +433,7 @@ def save_overrides(
         pipette_model.pipette_type,
         pipette_model.pipette_channels,
         pipette_model.pipette_version,
+        pipette_model.oem_type,
     )
     base_configs_dict = base_configs.model_dump(by_alias=True)
     try:
diff --git a/shared-data/python/opentrons_shared_data/pipette/pipette_definition.py b/shared-data/python/opentrons_shared_data/pipette/pipette_definition.py
index 2e10ede5093..9f52eaf85f2 100644
--- a/shared-data/python/opentrons_shared_data/pipette/pipette_definition.py
+++ b/shared-data/python/opentrons_shared_data/pipette/pipette_definition.py
@@ -41,9 +41,15 @@ class PipetteNameType:
     pipette_type: pip_types.PipetteModelType
     pipette_channels: pip_types.PipetteChannelType
     pipette_generation: pip_types.PipetteGenerationType
+    oem_type: pip_types.PipetteOEMType
 
     def __repr__(self) -> str:
-        base_name = f"{self.pipette_type.name}_{str(self.pipette_channels)}"
+        oem_name = (
+            f"_{self.oem_type.value}"
+            if self.oem_type != pip_types.PipetteOEMType.OT
+            else ""
+        )
+        base_name = f"{self.pipette_type.name}_{str(self.pipette_channels)}{oem_name}"
         if self.pipette_generation == pip_types.PipetteGenerationType.GEN1:
             return base_name
         elif self.pipette_channels == pip_types.PipetteChannelType.NINETY_SIX_CHANNEL:
@@ -65,9 +71,15 @@ class PipetteModelVersionType:
     pipette_type: pip_types.PipetteModelType
     pipette_channels: pip_types.PipetteChannelType
     pipette_version: pip_types.PipetteVersionType
+    oem_type: pip_types.PipetteOEMType
 
     def __repr__(self) -> str:
-        base_name = f"{self.pipette_type.name}_{str(self.pipette_channels)}"
+        oem_name = (
+            f"_{self.oem_type.value}"
+            if self.oem_type != pip_types.PipetteOEMType.OT
+            else ""
+        )
+        base_name = f"{self.pipette_type.name}_{str(self.pipette_channels)}{oem_name}"
 
         return f"{base_name}_v{self.pipette_version}"
 
diff --git a/shared-data/python/opentrons_shared_data/pipette/pipette_load_name_conversions.py b/shared-data/python/opentrons_shared_data/pipette/pipette_load_name_conversions.py
index 865862bfec2..2c7dd0dc57c 100644
--- a/shared-data/python/opentrons_shared_data/pipette/pipette_load_name_conversions.py
+++ b/shared-data/python/opentrons_shared_data/pipette/pipette_load_name_conversions.py
@@ -11,6 +11,7 @@
     PipetteGenerationType,
     PipetteModelMajorVersionType,
     PipetteModelMinorVersionType,
+    PipetteOEMType,
 )
 from .pipette_definition import (
     PipetteNameType,
@@ -21,6 +22,7 @@
 DEFAULT_MODEL = PipetteModelType.p1000
 DEFAULT_CHANNELS = PipetteChannelType.SINGLE_CHANNEL
 DEFAULT_MODEL_VERSION = PipetteVersionType(major=1, minor=0)
+DEFAULT_OEM = PipetteOEMType.OT
 
 PIPETTE_AVAILABLE_TYPES = [m.name for m in PipetteModelType]
 PIPETTE_CHANNELS_INTS = [c.value for c in PipetteChannelType]
@@ -81,8 +83,6 @@ def channels_from_string(channels: str) -> PipetteChannelType:
     if channels == "96":
         return PipetteChannelType.NINETY_SIX_CHANNEL
     elif "multi" in channels:
-        if "em" in channels:
-            return PipetteChannelType.EIGHT_CHANNEL_EM
         return PipetteChannelType.EIGHT_CHANNEL
     elif channels == "single":
         return PipetteChannelType.SINGLE_CHANNEL
@@ -229,8 +229,8 @@ def convert_to_pipette_name_type(
     channels = channels_from_string(split_pipette_model_or_name[1])
     generation = generation_from_string(split_pipette_model_or_name)
     pipette_type = PipetteModelType[split_pipette_model_or_name[0]]
-
-    return PipetteNameType(pipette_type, channels, generation)
+    oem = PipetteOEMType.get_oem_from_model_str(model_or_name)
+    return PipetteNameType(pipette_type, channels, generation, oem)
 
 
 def convert_pipette_name(
@@ -266,8 +266,8 @@ def convert_pipette_name(
         version = version_from_generation(pipette_name_tuple)
 
     pipette_type = PipetteModelType[split_pipette_name[0]]
-
-    return PipetteModelVersionType(pipette_type, channels, version)
+    oem = PipetteOEMType.get_oem_from_model_str(name)
+    return PipetteModelVersionType(pipette_type, channels, version, oem)
 
 
 def convert_pipette_model(
@@ -304,12 +304,17 @@ def convert_pipette_model(
             pipette_type, parsed_channels, parsed_oem, parsed_version = exploded
             channels = channels_from_string(f"{parsed_channels}_{parsed_oem}")
         version = version_from_string(parsed_version)
+        oem = PipetteOEMType.get_oem_from_model_str(str(model))
     elif model and provided_version:
         pipette_type, parsed_channels = model.split("_")
         channels = channels_from_string(parsed_channels)
         version = version_from_string(provided_version)
+        oem = PipetteOEMType.get_oem_from_model_str(str(model))
     else:
         pipette_type = DEFAULT_MODEL.value
         channels = DEFAULT_CHANNELS
         version = DEFAULT_MODEL_VERSION
-    return PipetteModelVersionType(PipetteModelType[pipette_type], channels, version)
+        oem = DEFAULT_OEM
+    return PipetteModelVersionType(
+        PipetteModelType[pipette_type], channels, version, oem
+    )
diff --git a/shared-data/python/opentrons_shared_data/pipette/types.py b/shared-data/python/opentrons_shared_data/pipette/types.py
index 685dae89957..93bfe2c0593 100644
--- a/shared-data/python/opentrons_shared_data/pipette/types.py
+++ b/shared-data/python/opentrons_shared_data/pipette/types.py
@@ -49,7 +49,6 @@ def check_and_return_type(
 class PipetteChannelType(int, enum.Enum):
     SINGLE_CHANNEL = 1
     EIGHT_CHANNEL = 8
-    EIGHT_CHANNEL_EM = 82
     NINETY_SIX_CHANNEL = 96
 
     def __str__(self) -> str:
@@ -57,8 +56,6 @@ def __str__(self) -> str:
             return "96"
         elif self.value == 8:
             return "multi"
-        elif self.value == 82:
-            return "multi_em"
         else:
             return "single"
 
@@ -115,6 +112,21 @@ class Quirks(enum.Enum):
     highSpeed = "highSpeed"
 
 
+class PipetteOEMType(enum.Enum):
+    OT = "ot"  # opentrons type
+    EM = "em"  # Emulsifying Pipette
+
+    @classmethod
+    def get_oem_from_quirks(cls, quirks: List[Quirks]) -> "PipetteOEMType":
+        """Return an oem type if true based on the quirks."""
+        return cls.EM if Quirks.highSpeed in quirks else cls.OT
+
+    @classmethod
+    def get_oem_from_model_str(cls, model_str: str) -> "PipetteOEMType":
+        """Return an oem type if true based on the model string."""
+        return cls.EM if "multi_em" in model_str else cls.OT
+
+
 class AvailableUnits(enum.Enum):
     mm = "mm"
     amps = "amps"
@@ -220,7 +232,7 @@ def dict_for_encode(self) -> bool:
     "p1000_single_gen2",
     "p1000_single_flex",
     "p1000_multi_flex",
-    "p1000_multi_em",
+    "p1000_multi_em_flex",
     "p1000_96",
     "p200_96",
 ]
@@ -247,7 +259,7 @@ class PipetteNameType(str, enum.Enum):
     P1000_SINGLE_GEN2 = "p1000_single_gen2"
     P1000_SINGLE_FLEX = "p1000_single_flex"
     P1000_MULTI_FLEX = "p1000_multi_flex"
-    P1000_MULTI_EM = "p1000_multi_em"
+    P1000_MULTI_EM = "p1000_multi_em_flex"
     P1000_96 = "p1000_96"
     P200_96 = "p200_96"
 
diff --git a/shared-data/python/tests/pipette/test_load_data.py b/shared-data/python/tests/pipette/test_load_data.py
index 386af05de5b..78b7ac74c5b 100644
--- a/shared-data/python/tests/pipette/test_load_data.py
+++ b/shared-data/python/tests/pipette/test_load_data.py
@@ -9,6 +9,7 @@
     PipetteChannelType,
     PipetteModelType,
     PipetteVersionType,
+    PipetteOEMType,
     PipetteTipType,
     Quirks,
     LiquidClasses,
@@ -20,6 +21,7 @@ def test_load_pipette_definition() -> None:
         PipetteModelType.p50,
         PipetteChannelType.SINGLE_CHANNEL,
         PipetteVersionType(major=3, minor=3),
+        PipetteOEMType.OT,
     )
 
     assert pipette_config_one.channels == 1
@@ -38,6 +40,7 @@ def test_load_pipette_definition() -> None:
         PipetteModelType.p50,
         PipetteChannelType.SINGLE_CHANNEL,
         PipetteVersionType(major=1, minor=0),
+        PipetteOEMType.OT,
     )
 
     assert pipette_config_two.channels == 1
@@ -83,7 +86,10 @@ def test_update_pipette_configuration(
         cast(types.PipetteModel, pipette_model)
     )
     base_configurations = load_data.load_definition(
-        model_name.pipette_type, model_name.pipette_channels, model_name.pipette_version
+        model_name.pipette_type,
+        model_name.pipette_channels,
+        model_name.pipette_version,
+        model_name.oem_type,
     )
 
     updated_configurations = load_data.update_pipette_configuration(
diff --git a/shared-data/python/tests/pipette/test_max_flow_rates_per_volume.py b/shared-data/python/tests/pipette/test_max_flow_rates_per_volume.py
index aae0c1a4e1b..e0797ddec08 100644
--- a/shared-data/python/tests/pipette/test_max_flow_rates_per_volume.py
+++ b/shared-data/python/tests/pipette/test_max_flow_rates_per_volume.py
@@ -75,6 +75,7 @@ def test_max_flow_rates_per_volume(pipette: PipetteModel, action: str) -> None:
         pipette_model_version.pipette_type,
         pipette_model_version.pipette_channels,
         pipette_model_version.pipette_version,
+        pipette_model_version.oem_type,
     )
 
     pipette_model_version_str = f"{pipette_model_version}"
diff --git a/shared-data/python/tests/pipette/test_mutable_configurations.py b/shared-data/python/tests/pipette/test_mutable_configurations.py
index d7a6c8ed1db..322682360c8 100644
--- a/shared-data/python/tests/pipette/test_mutable_configurations.py
+++ b/shared-data/python/tests/pipette/test_mutable_configurations.py
@@ -76,6 +76,7 @@ def test_load_old_overrides_regression(
             pipette_type=types.PipetteModelType.p20,
             pipette_channels=types.PipetteChannelType.SINGLE_CHANNEL,
             pipette_version=types.PipetteVersionType(2, 2),
+            oem_type=types.PipetteOEMType.OT,
         ),
         override_configuration_path,
         "P20SV222021040709",
@@ -269,6 +270,7 @@ def test_load_with_overrides(
         pipette_model.pipette_type,
         pipette_model.pipette_channels,
         pipette_model.pipette_version,
+        pipette_model.oem_type,
     )
 
     if serial_number == TEST_SERIAL_NUMBER:
@@ -454,7 +456,9 @@ def test_loading_does_not_log_warnings(
     load_with_mutable_configurations() suppresses and logs internal exceptions to
     protect its caller, but those are still bugs, and we still want tests to catch them.
     """
-    model = pipette_definition.PipetteModelVersionType(type, channels, version)
+    model = pipette_definition.PipetteModelVersionType(
+        type, channels, version, types.PipetteOEMType.OT
+    )
     (override_configuration_path / filename).write_text(file_contents)
     with caplog.at_level(logging.WARNING):
         mutable_configurations.load_with_mutable_configurations(
diff --git a/shared-data/python/tests/pipette/test_pipette_load_name_conversions.py b/shared-data/python/tests/pipette/test_pipette_load_name_conversions.py
index 6e792560e9c..fdd9ec434cd 100644
--- a/shared-data/python/tests/pipette/test_pipette_load_name_conversions.py
+++ b/shared-data/python/tests/pipette/test_pipette_load_name_conversions.py
@@ -6,6 +6,7 @@
     PipetteModelType,
     PipetteVersionType,
     PipetteGenerationType,
+    PipetteOEMType,
 )
 from opentrons_shared_data.pipette.types import PipetteModel, PipetteName
 from opentrons_shared_data.pipette import (
@@ -23,6 +24,7 @@
                 PipetteModelType.p50,
                 PipetteChannelType.SINGLE_CHANNEL,
                 PipetteVersionType(2, 0),
+                PipetteOEMType.OT,
             ),
         ],
         [
@@ -31,6 +33,7 @@
                 PipetteModelType.p1000,
                 PipetteChannelType.EIGHT_CHANNEL,
                 PipetteVersionType(1, 0),
+                PipetteOEMType.OT,
             ),
         ],
         [
@@ -39,6 +42,7 @@
                 PipetteModelType.p1000,
                 PipetteChannelType.NINETY_SIX_CHANNEL,
                 PipetteVersionType(1, 0),
+                PipetteOEMType.OT,
             ),
         ],
     ],
@@ -59,6 +63,7 @@ def test_convert_pipette_model(
                 PipetteModelType.p50,
                 PipetteChannelType.SINGLE_CHANNEL,
                 PipetteVersionType(2, 0),
+                PipetteOEMType.OT,
             ),
         ],
         [
@@ -68,6 +73,7 @@ def test_convert_pipette_model(
                 PipetteModelType.p1000,
                 PipetteChannelType.EIGHT_CHANNEL,
                 PipetteVersionType(3, 3),
+                PipetteOEMType.OT,
             ),
         ],
         [
@@ -77,6 +83,7 @@ def test_convert_pipette_model(
                 PipetteModelType.p1000,
                 PipetteChannelType.NINETY_SIX_CHANNEL,
                 PipetteVersionType(1, 1),
+                PipetteOEMType.OT,
             ),
         ],
     ],
@@ -96,6 +103,7 @@ def test_convert_pipette_model_provided_version(
                 PipetteModelType.p50,
                 PipetteChannelType.SINGLE_CHANNEL,
                 PipetteVersionType(2, 0),
+                PipetteOEMType.OT,
             ),
         ],
         [
@@ -104,6 +112,7 @@ def test_convert_pipette_model_provided_version(
                 PipetteModelType.p1000,
                 PipetteChannelType.EIGHT_CHANNEL,
                 PipetteVersionType(3, 5),
+                PipetteOEMType.OT,
             ),
         ],
         [
@@ -112,6 +121,7 @@ def test_convert_pipette_model_provided_version(
                 PipetteModelType.p1000,
                 PipetteChannelType.NINETY_SIX_CHANNEL,
                 PipetteVersionType(3, 6),
+                PipetteOEMType.OT,
             ),
         ],
     ],
@@ -123,19 +133,21 @@ def test_convert_pipette_name(
 
 
 @pytest.mark.parametrize(
-    argnames=["model_type", "channels", "generation", "output"],
+    argnames=["model_type", "channels", "generation", "output", "oem"],
     argvalues=[
         [
             PipetteModelType.p50,
             PipetteChannelType.SINGLE_CHANNEL,
             PipetteGenerationType.GEN2,
             "p50_single_gen2",
+            PipetteOEMType.OT,
         ],
         [
             PipetteModelType.p1000,
             PipetteChannelType.EIGHT_CHANNEL,
             PipetteGenerationType.GEN2,
             "p1000_multi_gen2",
+            PipetteOEMType.OT,
         ],
         [
             # 96 channel has a unique "name" right now
@@ -143,6 +155,7 @@ def test_convert_pipette_name(
             PipetteChannelType.NINETY_SIX_CHANNEL,
             PipetteGenerationType.FLEX,
             "p1000_96",
+            PipetteOEMType.OT,
         ],
     ],
 )
@@ -151,35 +164,40 @@ def test_model_version_type_string_version(
     channels: PipetteChannelType,
     generation: PipetteGenerationType,
     output: PipetteName,
+    oem: PipetteOEMType,
 ) -> None:
     data = pc.PipetteNameType(
         pipette_type=model_type,
         pipette_channels=channels,
         pipette_generation=generation,
+        oem_type=oem,
     )
     assert output == str(data)
 
 
 @pytest.mark.parametrize(
-    argnames=["model_type", "channels", "version", "output"],
+    argnames=["model_type", "channels", "version", "output", "oem"],
     argvalues=[
         [
             PipetteModelType.p50,
             PipetteChannelType.SINGLE_CHANNEL,
             PipetteVersionType(1, 0),
             "p50_single_v1",
+            PipetteOEMType.OT,
         ],
         [
             PipetteModelType.p1000,
             PipetteChannelType.EIGHT_CHANNEL,
             PipetteVersionType(2, 1),
             "p1000_multi_v2.1",
+            PipetteOEMType.OT,
         ],
         [
             PipetteModelType.p1000,
             PipetteChannelType.NINETY_SIX_CHANNEL,
             PipetteVersionType(3, 3),
             "p1000_96_v3.3",
+            PipetteOEMType.OT,
         ],
     ],
 )
@@ -188,9 +206,13 @@ def test_name_type_string_generation(
     channels: PipetteChannelType,
     version: PipetteVersionType,
     output: PipetteModel,
+    oem: PipetteOEMType,
 ) -> None:
     data = pc.PipetteModelVersionType(
-        pipette_type=model_type, pipette_channels=channels, pipette_version=version
+        pipette_type=model_type,
+        pipette_channels=channels,
+        pipette_version=version,
+        oem_type=oem,
     )
     assert output == str(data)
 
diff --git a/shared-data/python/tests/pipette/test_validate_schema.py b/shared-data/python/tests/pipette/test_validate_schema.py
index a002c38cfb2..cf1d35288cb 100644
--- a/shared-data/python/tests/pipette/test_validate_schema.py
+++ b/shared-data/python/tests/pipette/test_validate_schema.py
@@ -45,6 +45,7 @@ def test_check_all_models_are_valid() -> None:
                 model_version.pipette_type,
                 model_version.pipette_channels,
                 model_version.pipette_version,
+                model_version.oem_type,
             )
         except json.JSONDecodeError:
             print(
@@ -81,11 +82,13 @@ def test_pick_up_configs_configuration_by_nozzle_map_keys() -> None:
                     model_version.pipette_type,
                     model_version.pipette_channels,
                     model_version.pipette_version,
+                    model_version.oem_type,
                 )
                 valid_nozzle_maps = load_valid_nozzle_maps(
                     model_version.pipette_type,
                     model_version.pipette_channels,
                     model_version.pipette_version,
+                    model_version.oem_type,
                 )
 
                 pipette_maps = list(
@@ -123,11 +126,13 @@ def test_pick_up_configs_configuration_ordered_from_smallest_to_largest() -> Non
                     model_version.pipette_type,
                     model_version.pipette_channels,
                     model_version.pipette_version,
+                    model_version.oem_type,
                 )
                 valid_nozzle_maps = load_valid_nozzle_maps(
                     model_version.pipette_type,
                     model_version.pipette_channels,
                     model_version.pipette_version,
+                    model_version.oem_type,
                 )
 
                 map_keys = list(valid_nozzle_maps.maps.keys())
@@ -154,6 +159,7 @@ def test_serializer() -> None:
         types.PipetteModelType.p1000,
         types.PipetteChannelType.NINETY_SIX_CHANNEL,
         types.PipetteVersionType(3, 3),
+        types.PipetteOEMType.OT,
     )
     quirk_0 = types.Quirks.pickupTipShake
     quirk_1 = types.Quirks.dropTipShake

From a80aa0052c83cb46e9ba626e9df15a9449c924e5 Mon Sep 17 00:00:00 2001
From: Ryan Howard <ryan.howard@opentrons.com>
Date: Fri, 20 Dec 2024 11:40:04 -0500
Subject: [PATCH 06/18] fix(api): missed one link in the chain of loading
 config values (#17154)

<!--
Thanks for taking the time to open a Pull Request (PR)! Please make sure
you've read the "Opening Pull Requests" section of our Contributing
Guide:


https://github.com/Opentrons/opentrons/blob/edge/CONTRIBUTING.md#opening-pull-requests

GitHub provides robust markdown to format your PR. Links, diagrams,
pictures, and videos along with text formatting make it possible to
create a rich and informative PR. For more information on GitHub
markdown, see:


https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax

To ensure your code is reviewed quickly and thoroughly, please fill out
the sections below to the best of your ability!
-->

# Overview

Data was loading in shared data but I didn't realize that the
pipette_handler was truncating the settings.

<!--
Describe your PR at a high level. State acceptance criteria and how this
PR fits into other work. Link issues, PRs, and other relevant resources.
-->

## Test Plan and Hands on Testing

<!--
Describe your testing of the PR. Emphasize testing not reflected in the
code. Attach protocols, logs, screenshots and any other assets that
support your testing.
-->

## Changelog

<!--
List changes introduced by this PR considering future developers and the
end user. Give careful thought and clear documentation to breaking
changes.
-->

## Review requests

<!--
- What do you need from reviewers to feel confident this PR is ready to
merge?
- Ask questions.
-->

## Risk assessment

<!--
- Indicate the level of attention this PR needs.
- Provide context to guide reviewers.
- Discuss trade-offs, coupling, and side effects.
- Look for the possibility, even if you think it's small, that your
change may affect some other part of the system.
- For instance, changing return tip behavior may also change the
behavior of labware calibration.
- How do your unit tests and on hands on testing mitigate this PR's
risks and the risk of future regressions?
- Especially in high risk PRs, explain how you know your testing is
enough.
-->
---
 .../hardware_control/instruments/ot3/pipette_handler.py         | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/api/src/opentrons/hardware_control/instruments/ot3/pipette_handler.py b/api/src/opentrons/hardware_control/instruments/ot3/pipette_handler.py
index 8e4975b3b5b..ef081b95a62 100644
--- a/api/src/opentrons/hardware_control/instruments/ot3/pipette_handler.py
+++ b/api/src/opentrons/hardware_control/instruments/ot3/pipette_handler.py
@@ -237,6 +237,7 @@ def get_attached_instrument(self, mount: OT3Mount) -> PipetteDict:
                 "back_compat_names",
                 "supported_tips",
                 "lld_settings",
+                "available_sensors",
             ]
 
             instr_dict = instr.as_dict()
@@ -289,6 +290,7 @@ def get_attached_instrument(self, mount: OT3Mount) -> PipetteDict:
                 "drop_tip": instr.plunger_positions.drop_tip,
             }
             result["shaft_ul_per_mm"] = instr.config.shaft_ul_per_mm
+            result["available_sensors"] = instr.config.available_sensors
         return cast(PipetteDict, result)
 
     @property

From 04dea6c803bcef7424e6bc59bea8d509e1f59e0b Mon Sep 17 00:00:00 2001
From: koji <koji.kanao@opentrons.com>
Date: Fri, 20 Dec 2024 11:41:43 -0500
Subject: [PATCH 07/18] chore: update vitest and vitest-when (#17149)

* chore: update vitest and vitest-when
---
 .../RobotUpdateProgressModal.test.tsx         |   5 +-
 package.json                                  |   6 +-
 .../src/__tests__/persist.test.ts             |   8 +-
 setup-vitest.ts => setup-vitest.mts           |   0
 vitest.config.ts => vitest.config.mts         |   7 +-
 yarn.lock                                     | 463 +++++++++---------
 6 files changed, 237 insertions(+), 252 deletions(-)
 rename setup-vitest.ts => setup-vitest.mts (100%)
 rename vitest.config.ts => vitest.config.mts (90%)

diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/__tests__/RobotUpdateProgressModal.test.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/__tests__/RobotUpdateProgressModal.test.tsx
index a2139f636bd..176388a5527 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/__tests__/RobotUpdateProgressModal.test.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/__tests__/RobotUpdateProgressModal.test.tsx
@@ -52,6 +52,7 @@ describe('DownloadUpdateModal', () => {
 
   let props: React.ComponentProps<typeof RobotUpdateProgressModal>
   const mockCreateLiveCommand = vi.fn()
+  const mockDispatchStartRobotUpdate = vi.fn()
 
   beforeEach(() => {
     mockCreateLiveCommand.mockResolvedValue(null)
@@ -68,7 +69,9 @@ describe('DownloadUpdateModal', () => {
       progressPercent: 50,
     })
     vi.mocked(getRobotSessionIsManualFile).mockReturnValue(false)
-    vi.mocked(useDispatchStartRobotUpdate).mockReturnValue(vi.fn)
+    vi.mocked(useDispatchStartRobotUpdate).mockReturnValue(
+      mockDispatchStartRobotUpdate
+    )
     vi.mocked(getRobotUpdateDownloadError).mockReturnValue(null)
   })
 
diff --git a/package.json b/package.json
index 17ee30cc3e4..654f12137fc 100755
--- a/package.json
+++ b/package.json
@@ -69,7 +69,7 @@
     "@typescript-eslint/eslint-plugin": "^6.20.0",
     "@typescript-eslint/parser": "^6.20.0",
     "@vitejs/plugin-react": "4.2.0",
-    "@vitest/coverage-v8": "1.3.0",
+    "@vitest/coverage-v8": "2.1.8",
     "ajv": "6.12.3",
     "aws-sdk": "^2.493.0",
     "babel-loader": "^8.2.2",
@@ -151,8 +151,8 @@
     "typescript": "5.3.3",
     "url-loader": "^2.1.0",
     "vite": "5.3.2",
-    "vitest": "1.2.2",
-    "vitest-when": "0.3.1",
+    "vitest": "2.1.8",
+    "vitest-when": "0.5.0",
     "wait-on": "^4.0.2",
     "webpack": "^4.41.6",
     "webpack-bundle-analyzer": "^3.6.0",
diff --git a/protocol-designer/src/__tests__/persist.test.ts b/protocol-designer/src/__tests__/persist.test.ts
index b6683979c6f..4b396924b8b 100644
--- a/protocol-designer/src/__tests__/persist.test.ts
+++ b/protocol-designer/src/__tests__/persist.test.ts
@@ -4,12 +4,14 @@ import type { MockInstance } from 'vitest'
 import * as persist from '../persist'
 
 describe('persist', () => {
-  let getItemSpy: MockInstance<unknown[], unknown>
-  let setItemSpy: MockInstance<unknown[], unknown>
+  let getItemSpy: MockInstance<(key: string) => string | null>
+  let setItemSpy: MockInstance<(key: string, value: string) => void>
 
   beforeEach(() => {
     const LocalStorageProto = Object.getPrototypeOf(global.localStorage)
-    getItemSpy = vi.spyOn(LocalStorageProto, 'getItem')
+    getItemSpy = vi.spyOn(LocalStorageProto, 'getItem') as MockInstance<
+      (key: string) => string | null
+    >
     setItemSpy = vi.spyOn(LocalStorageProto, 'setItem')
   })
 
diff --git a/setup-vitest.ts b/setup-vitest.mts
similarity index 100%
rename from setup-vitest.ts
rename to setup-vitest.mts
diff --git a/vitest.config.ts b/vitest.config.mts
similarity index 90%
rename from vitest.config.ts
rename to vitest.config.mts
index a485e7536bd..1412fdcee4f 100644
--- a/vitest.config.ts
+++ b/vitest.config.mts
@@ -13,7 +13,12 @@ export default mergeConfig(
       environment: 'jsdom',
       allowOnly: true,
       exclude: [...configDefaults.exclude, '**/node_modules/**', '**/dist/**'],
-      setupFiles: ['./setup-vitest.ts'],
+      setupFiles: ['./setup-vitest.mts'],
+      coverage: {
+        exclude: ['**/node_modules/**', '**/dist/**', '**/__tests__/**'],
+        provider: 'v8',
+        reporter: ['text', 'json', 'html'],
+      },
     },
     resolve: {
       alias: {
diff --git a/yarn.lock b/yarn.lock
index ee61c887c8e..56ebcbf301a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -22,7 +22,7 @@
   resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.3.tgz#90749bde8b89cd41764224f5aac29cd4138f75ff"
   integrity sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==
 
-"@ampproject/remapping@^2.2.0", "@ampproject/remapping@^2.2.1":
+"@ampproject/remapping@^2.2.0", "@ampproject/remapping@^2.3.0":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4"
   integrity sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==
@@ -1122,7 +1122,7 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.4.tgz#234487a110d89ad5a3ed4a8a566c36b9453e8c88"
   integrity sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==
 
-"@babel/parser@^7.25.9", "@babel/parser@^7.26.0", "@babel/parser@^7.26.3":
+"@babel/parser@^7.25.4", "@babel/parser@^7.25.9", "@babel/parser@^7.26.0", "@babel/parser@^7.26.3":
   version "7.26.3"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.3.tgz#8c51c5db6ddf08134af1ddbacf16aaab48bac234"
   integrity sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==
@@ -1936,7 +1936,7 @@
     "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.25.9", "@babel/types@^7.26.0", "@babel/types@^7.26.3":
+"@babel/types@^7.25.4", "@babel/types@^7.25.9", "@babel/types@^7.26.0", "@babel/types@^7.26.3":
   version "7.26.3"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.3.tgz#37e79830f04c2b5687acc77db97fbc75fb81f3c0"
   integrity sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==
@@ -3293,7 +3293,12 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
   integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
 
-"@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.18", "@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
+"@jridgewell/sourcemap-codec@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
+  integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
+
+"@jridgewell/trace-mapping@^0.3.18", "@jridgewell/trace-mapping@^0.3.23", "@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
   version "0.3.25"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
   integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
@@ -5690,7 +5695,7 @@
   resolved "https://registry.yarnpkg.com/@types/http-errors/-/http-errors-2.0.4.tgz#7eb47726c391b7345a6ec35ad7f4de469cf5ba4f"
   integrity sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==
 
-"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
+"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz#7739c232a1fee9b4d3ce8985f314c0c6d33549d7"
   integrity sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==
@@ -6285,68 +6290,82 @@
     magic-string "^0.27.0"
     react-refresh "^0.14.0"
 
-"@vitest/coverage-v8@1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@vitest/coverage-v8/-/coverage-v8-1.3.0.tgz#31f98b1bad1d5e9db733a4c1ae8d46dec549cd3c"
-  integrity sha512-e5Y5uK5NNoQMQaNitGQQjo9FoA5ZNcu7Bn6pH+dxUf48u6po1cX38kFBYUHZ9GNVkF4JLbncE0WeWwTw+nLrxg==
+"@vitest/coverage-v8@2.1.8":
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/@vitest/coverage-v8/-/coverage-v8-2.1.8.tgz#738527e6e79cef5004248452527e272e0df12284"
+  integrity sha512-2Y7BPlKH18mAZYAW1tYByudlCYrQyl5RGvnnDYJKW5tCiO5qg3KSAy3XAxcxKz900a0ZXxWtKrMuZLe3lKBpJw==
   dependencies:
-    "@ampproject/remapping" "^2.2.1"
+    "@ampproject/remapping" "^2.3.0"
     "@bcoe/v8-coverage" "^0.2.3"
-    debug "^4.3.4"
+    debug "^4.3.7"
     istanbul-lib-coverage "^3.2.2"
     istanbul-lib-report "^3.0.1"
-    istanbul-lib-source-maps "^4.0.1"
-    istanbul-reports "^3.1.6"
-    magic-string "^0.30.5"
-    magicast "^0.3.3"
-    picocolors "^1.0.0"
-    std-env "^3.5.0"
-    test-exclude "^6.0.0"
-    v8-to-istanbul "^9.2.0"
+    istanbul-lib-source-maps "^5.0.6"
+    istanbul-reports "^3.1.7"
+    magic-string "^0.30.12"
+    magicast "^0.3.5"
+    std-env "^3.8.0"
+    test-exclude "^7.0.1"
+    tinyrainbow "^1.2.0"
+
+"@vitest/expect@2.1.8":
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/@vitest/expect/-/expect-2.1.8.tgz#13fad0e8d5a0bf0feb675dcf1d1f1a36a1773bc1"
+  integrity sha512-8ytZ/fFHq2g4PJVAtDX57mayemKgDR6X3Oa2Foro+EygiOJHUXhCqBAAKQYYajZpFoIfvBCF1j6R6IYRSIUFuw==
+  dependencies:
+    "@vitest/spy" "2.1.8"
+    "@vitest/utils" "2.1.8"
+    chai "^5.1.2"
+    tinyrainbow "^1.2.0"
 
-"@vitest/expect@1.2.2":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@vitest/expect/-/expect-1.2.2.tgz#39ea22e849bbf404b7e5272786551aa99e2663d0"
-  integrity sha512-3jpcdPAD7LwHUUiT2pZTj2U82I2Tcgg2oVPvKxhn6mDI2On6tfvPQTjAI4628GUGDZrCm4Zna9iQHm5cEexOAg==
+"@vitest/mocker@2.1.8":
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/@vitest/mocker/-/mocker-2.1.8.tgz#51dec42ac244e949d20009249e033e274e323f73"
+  integrity sha512-7guJ/47I6uqfttp33mgo6ga5Gr1VnL58rcqYKyShoRK9ebu8T5Rs6HN3s1NABiBeVTdWNrwUMcHH54uXZBN4zA==
   dependencies:
-    "@vitest/spy" "1.2.2"
-    "@vitest/utils" "1.2.2"
-    chai "^4.3.10"
+    "@vitest/spy" "2.1.8"
+    estree-walker "^3.0.3"
+    magic-string "^0.30.12"
 
-"@vitest/runner@1.2.2":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@vitest/runner/-/runner-1.2.2.tgz#8b060a56ecf8b3d607b044d79f5f50d3cd9fee2f"
-  integrity sha512-JctG7QZ4LSDXr5CsUweFgcpEvrcxOV1Gft7uHrvkQ+fsAVylmWQvnaAr/HDp3LAH1fztGMQZugIheTWjaGzYIg==
+"@vitest/pretty-format@2.1.8", "@vitest/pretty-format@^2.1.8":
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/@vitest/pretty-format/-/pretty-format-2.1.8.tgz#88f47726e5d0cf4ba873d50c135b02e4395e2bca"
+  integrity sha512-9HiSZ9zpqNLKlbIDRWOnAWqgcA7xu+8YxXSekhr0Ykab7PAYFkhkwoqVArPOtJhPmYeE2YHgKZlj3CP36z2AJQ==
   dependencies:
-    "@vitest/utils" "1.2.2"
-    p-limit "^5.0.0"
-    pathe "^1.1.1"
+    tinyrainbow "^1.2.0"
 
-"@vitest/snapshot@1.2.2":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@vitest/snapshot/-/snapshot-1.2.2.tgz#f56fd575569774968f3eeba9382a166c26201042"
-  integrity sha512-SmGY4saEw1+bwE1th6S/cZmPxz/Q4JWsl7LvbQIky2tKE35US4gd0Mjzqfr84/4OD0tikGWaWdMja/nWL5NIPA==
+"@vitest/runner@2.1.8":
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/@vitest/runner/-/runner-2.1.8.tgz#b0e2dd29ca49c25e9323ea2a45a5125d8729759f"
+  integrity sha512-17ub8vQstRnRlIU5k50bG+QOMLHRhYPAna5tw8tYbj+jzjcspnwnwtPtiOlkuKC4+ixDPTuLZiqiWWQ2PSXHVg==
   dependencies:
-    magic-string "^0.30.5"
-    pathe "^1.1.1"
-    pretty-format "^29.7.0"
+    "@vitest/utils" "2.1.8"
+    pathe "^1.1.2"
 
-"@vitest/spy@1.2.2":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@vitest/spy/-/spy-1.2.2.tgz#8fc2aeccb96cecbbdd192c643729bd5f97a01c86"
-  integrity sha512-k9Gcahssw8d7X3pSLq3e3XEu/0L78mUkCjivUqCQeXJm9clfXR/Td8+AP+VC1O6fKPIDLcHDTAmBOINVuv6+7g==
+"@vitest/snapshot@2.1.8":
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/@vitest/snapshot/-/snapshot-2.1.8.tgz#d5dc204f4b95dc8b5e468b455dfc99000047d2de"
+  integrity sha512-20T7xRFbmnkfcmgVEz+z3AU/3b0cEzZOt/zmnvZEctg64/QZbSDJEVm9fLnnlSi74KibmRsO9/Qabi+t0vCRPg==
   dependencies:
-    tinyspy "^2.2.0"
+    "@vitest/pretty-format" "2.1.8"
+    magic-string "^0.30.12"
+    pathe "^1.1.2"
 
-"@vitest/utils@1.2.2":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@vitest/utils/-/utils-1.2.2.tgz#94b5a1bd8745ac28cf220a99a8719efea1bcfc83"
-  integrity sha512-WKITBHLsBHlpjnDQahr+XK6RE7MiAsgrIkr0pGhQ9ygoxBfUeG0lUG5iLlzqjmKSlBv3+j5EGsriBzh+C3Tq9g==
+"@vitest/spy@2.1.8":
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/@vitest/spy/-/spy-2.1.8.tgz#bc41af3e1e6a41ae3b67e51f09724136b88fa447"
+  integrity sha512-5swjf2q95gXeYPevtW0BLk6H8+bPlMb4Vw/9Em4hFxDcaOxS+e0LOX4yqNxoHzMR2akEB2xfpnWUzkZokmgWDg==
   dependencies:
-    diff-sequences "^29.6.3"
-    estree-walker "^3.0.3"
-    loupe "^2.3.7"
-    pretty-format "^29.7.0"
+    tinyspy "^3.0.2"
+
+"@vitest/utils@2.1.8":
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/@vitest/utils/-/utils-2.1.8.tgz#f8ef85525f3362ebd37fd25d268745108d6ae388"
+  integrity sha512-dwSoui6djdwbfFmIgbIjX2ZhIoG7Ex/+xpxyiEgIGzjliY8xGkcpITKTlp6B4MgtGkF2ilvm97cPM96XZaAgcA==
+  dependencies:
+    "@vitest/pretty-format" "2.1.8"
+    loupe "^3.1.2"
+    tinyrainbow "^1.2.0"
 
 "@vituum/vite-plugin-postcss@1.1.0":
   version "1.1.0"
@@ -6595,11 +6614,6 @@ acorn-walk@^7.1.1, acorn-walk@^7.2.0:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
 
-acorn-walk@^8.3.2:
-  version "8.3.2"
-  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.3.2.tgz#7703af9415f1b6db9315d6895503862e231d34aa"
-  integrity sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==
-
 acorn@^6.4.1:
   version "6.4.2"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.2.tgz#35866fd710528e92de10cf06016498e47e39e1e6"
@@ -6610,7 +6624,7 @@ acorn@^7.1.1, acorn@^7.4.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
-acorn@^8.10.0, acorn@^8.11.3, acorn@^8.2.4, acorn@^8.8.2, acorn@^8.9.0:
+acorn@^8.11.3, acorn@^8.2.4, acorn@^8.8.2, acorn@^8.9.0:
   version "8.11.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.3.tgz#71e0b14e13a4ec160724b38fb7b0f233b1b81d7a"
   integrity sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==
@@ -7138,10 +7152,10 @@ assert@^2.1.0:
     object.assign "^4.1.4"
     util "^0.12.5"
 
-assertion-error@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-1.1.0.tgz#e60b6b0e8f301bd97e5375215bda406c85118c0b"
-  integrity sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==
+assertion-error@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-2.0.1.tgz#f641a196b335690b1070bf00b6e7593fec190bf7"
+  integrity sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==
 
 assign-symbols@^1.0.0:
   version "1.0.0"
@@ -8200,18 +8214,16 @@ ccount@^2.0.0:
   resolved "https://registry.yarnpkg.com/ccount/-/ccount-2.0.1.tgz#17a3bf82302e0870d6da43a01311a8bc02a3ecf5"
   integrity sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==
 
-chai@^4.3.10:
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/chai/-/chai-4.4.1.tgz#3603fa6eba35425b0f2ac91a009fe924106e50d1"
-  integrity sha512-13sOfMv2+DWduEU+/xbun3LScLoqN17nBeTLUsmDfKdoiC1fr0n9PU4guu4AhRcOVFk/sW8LyZWHuhWtQZiF+g==
+chai@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/chai/-/chai-5.1.2.tgz#3afbc340b994ae3610ca519a6c70ace77ad4378d"
+  integrity sha512-aGtmf24DW6MLHHG5gCx4zaI3uBq3KRtxeVs0DjFH6Z0rDNbsvTxFASFvdj79pxjxZ8/5u3PIiN3IwEIQkiiuPw==
   dependencies:
-    assertion-error "^1.1.0"
-    check-error "^1.0.3"
-    deep-eql "^4.1.3"
-    get-func-name "^2.0.2"
-    loupe "^2.3.6"
-    pathval "^1.1.1"
-    type-detect "^4.0.8"
+    assertion-error "^2.0.1"
+    check-error "^2.1.1"
+    deep-eql "^5.0.1"
+    loupe "^3.1.0"
+    pathval "^2.0.0"
 
 chalk@^1.1.3:
   version "1.1.3"
@@ -8289,12 +8301,10 @@ character-reference-invalid@^2.0.0:
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz#85c66b041e43b47210faf401278abf808ac45cb9"
   integrity sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==
 
-check-error@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.3.tgz#a6502e4312a7ee969f646e83bb3ddd56281bd694"
-  integrity sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==
-  dependencies:
-    get-func-name "^2.0.2"
+check-error@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/check-error/-/check-error-2.1.1.tgz#87eb876ae71ee388fa0471fe423f494be1d96ccc"
+  integrity sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==
 
 check-more-types@^2.24.0:
   version "2.24.0"
@@ -8765,11 +8775,6 @@ conf@^6.2.1:
     semver "^6.2.0"
     write-file-atomic "^3.0.0"
 
-confbox@^0.1.7:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/confbox/-/confbox-0.1.7.tgz#ccfc0a2bcae36a84838e83a3b7f770fb17d6c579"
-  integrity sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==
-
 config-file-ts@0.2.8-rc1:
   version "0.2.8-rc1"
   resolved "https://registry.yarnpkg.com/config-file-ts/-/config-file-ts-0.2.8-rc1.tgz#fb7fc6ccb2e313f69dbeb78f1db0b00038049de0"
@@ -9626,6 +9631,13 @@ debug@^3.1.0, debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
+debug@^4.3.7:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a"
+  integrity sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==
+  dependencies:
+    ms "^2.1.3"
+
 decamelize-keys@^1.0.0, decamelize-keys@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.1.tgz#04a2d523b2f18d80d0158a43b895d56dff8d19d8"
@@ -9742,12 +9754,10 @@ dedent@^0.7.0:
   resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
   integrity sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==
 
-deep-eql@^4.1.3:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-4.1.3.tgz#7c7775513092f7df98d8df9996dd085eb668cc6d"
-  integrity sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==
-  dependencies:
-    type-detect "^4.0.0"
+deep-eql@^5.0.1:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-5.0.2.tgz#4b756d8d770a9257300825d52a2c2cff99c3a341"
+  integrity sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==
 
 deep-equal@^1.0.1:
   version "1.1.2"
@@ -10099,11 +10109,6 @@ dicer@0.2.5:
     readable-stream "1.1.x"
     streamsearch "0.1.2"
 
-diff-sequences@^29.6.3:
-  version "29.6.3"
-  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-29.6.3.tgz#4deaf894d11407c51efc8418012f9e70b84ea921"
-  integrity sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==
-
 diffie-hellman@^5.0.0:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
@@ -10826,6 +10831,11 @@ es-module-lexer@^0.9.3:
   resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz#6f13db00cc38417137daf74366f535c8eb438f19"
   integrity sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==
 
+es-module-lexer@^1.5.4:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.5.4.tgz#a8efec3a3da991e60efa6b633a7cad6ab8d26b78"
+  integrity sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==
+
 es-object-atoms@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.0.0.tgz#ddb55cd47ac2e240701260bc2a8e31ecb643d941"
@@ -11524,6 +11534,11 @@ expand-tilde@^2.0.0, expand-tilde@^2.0.2:
   dependencies:
     homedir-polyfill "^1.0.1"
 
+expect-type@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/expect-type/-/expect-type-1.1.0.tgz#a146e414250d13dfc49eafcfd1344a4060fa4c75"
+  integrity sha512-bFi65yM+xZgk+u/KRIpekdSYkTB5W1pEf0Lt8Q8Msh7b+eQ7LXVtIB1Bkm4fvclDEL1b2CZkMhv2mOeF8tMdkA==
+
 exponential-backoff@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/exponential-backoff/-/exponential-backoff-3.1.1.tgz#64ac7526fe341ab18a39016cd22c787d01e00bf6"
@@ -12379,11 +12394,6 @@ get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
-get-func-name@^2.0.1, get-func-name@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.2.tgz#0d7cf20cd13fda808669ffa88f4ffc7a3943fc41"
-  integrity sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==
-
 get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.2, get-intrinsic@^1.2.3, get-intrinsic@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
@@ -12629,7 +12639,7 @@ glob@^10.0.0:
     minipass "^7.0.4"
     path-scurry "^1.10.2"
 
-glob@^10.3.12:
+glob@^10.3.12, glob@^10.4.1:
   version "10.4.5"
   resolved "https://registry.yarnpkg.com/glob/-/glob-10.4.5.tgz#f4d9f0b90ffdbab09c9d77f5f29b4262517b0956"
   integrity sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==
@@ -14463,16 +14473,16 @@ istanbul-lib-report@^3.0.0, istanbul-lib-report@^3.0.1:
     make-dir "^4.0.0"
     supports-color "^7.1.0"
 
-istanbul-lib-source-maps@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz#895f3a709fcfba34c6de5a42939022f3e4358551"
-  integrity sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==
+istanbul-lib-source-maps@^5.0.6:
+  version "5.0.6"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-5.0.6.tgz#acaef948df7747c8eb5fbf1265cb980f6353a441"
+  integrity sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A==
   dependencies:
+    "@jridgewell/trace-mapping" "^0.3.23"
     debug "^4.1.1"
     istanbul-lib-coverage "^3.0.0"
-    source-map "^0.6.1"
 
-istanbul-reports@^3.1.6:
+istanbul-reports@^3.1.7:
   version "3.1.7"
   resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.1.7.tgz#daed12b9e1dca518e15c056e1e537e741280fa0b"
   integrity sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==
@@ -15050,14 +15060,6 @@ loader-utils@^2.0.0:
     emojis-list "^3.0.0"
     json5 "^2.1.2"
 
-local-pkg@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/local-pkg/-/local-pkg-0.5.0.tgz#093d25a346bae59a99f80e75f6e9d36d7e8c925c"
-  integrity sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==
-  dependencies:
-    mlly "^1.4.2"
-    pkg-types "^1.0.3"
-
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -15240,12 +15242,10 @@ loud-rejection@^1.0.0:
     currently-unhandled "^0.4.1"
     signal-exit "^3.0.0"
 
-loupe@^2.3.6, loupe@^2.3.7:
-  version "2.3.7"
-  resolved "https://registry.yarnpkg.com/loupe/-/loupe-2.3.7.tgz#6e69b7d4db7d3ab436328013d37d1c8c3540c697"
-  integrity sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==
-  dependencies:
-    get-func-name "^2.0.1"
+loupe@^3.1.0, loupe@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/loupe/-/loupe-3.1.2.tgz#c86e0696804a02218f2206124c45d8b15291a240"
+  integrity sha512-23I4pFZHmAemUnz8WZXbYRSKYj801VDaNv9ETuMh7IrMc7VuVVSo+Z9iLE3ni30+U48iDWfi30d3twAXBYmnCg==
 
 lower-case@^1.1.1:
   version "1.1.4"
@@ -15338,20 +15338,27 @@ magic-string@^0.27.0:
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.13"
 
-magic-string@^0.30.0, magic-string@^0.30.5:
+magic-string@^0.30.0:
   version "0.30.10"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.10.tgz#123d9c41a0cb5640c892b041d4cfb3bd0aa4b39e"
   integrity sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.15"
 
-magicast@^0.3.3:
-  version "0.3.4"
-  resolved "https://registry.yarnpkg.com/magicast/-/magicast-0.3.4.tgz#bbda1791d03190a24b00ff3dd18151e7fd381d19"
-  integrity sha512-TyDF/Pn36bBji9rWKHlZe+PZb6Mx5V8IHCSxk7X4aljM4e/vyDvZZYwHewdVaqiA0nb3ghfHU/6AUpDxWoER2Q==
+magic-string@^0.30.12:
+  version "0.30.17"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.17.tgz#450a449673d2460e5bbcfba9a61916a1714c7453"
+  integrity sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==
   dependencies:
-    "@babel/parser" "^7.24.4"
-    "@babel/types" "^7.24.0"
+    "@jridgewell/sourcemap-codec" "^1.5.0"
+
+magicast@^0.3.5:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/magicast/-/magicast-0.3.5.tgz#8301c3c7d66704a0771eb1bad74274f0ec036739"
+  integrity sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==
+  dependencies:
+    "@babel/parser" "^7.25.4"
+    "@babel/types" "^7.25.4"
     source-map-js "^1.2.0"
 
 make-dir@^1.0.0:
@@ -16263,16 +16270,6 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-mlly@^1.4.2, mlly@^1.6.1:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/mlly/-/mlly-1.6.1.tgz#0983067dc3366d6314fc5e12712884e6978d028f"
-  integrity sha512-vLgaHvaeunuOXHSmEbZ9izxPx3USsk8KCQ8iC+aTlp5sKRSoZvwhHh5L9VbKSaVC6sJDqbyohIS76E2VmHIPAA==
-  dependencies:
-    acorn "^8.11.3"
-    pathe "^1.1.2"
-    pkg-types "^1.0.3"
-    ufo "^1.3.2"
-
 mnemonist@0.38.3:
   version "0.38.3"
   resolved "https://registry.yarnpkg.com/mnemonist/-/mnemonist-0.38.3.tgz#35ec79c1c1f4357cfda2fe264659c2775ccd7d9d"
@@ -16369,7 +16366,7 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-ms@2.1.3, ms@^2.0.0, ms@^2.1.1:
+ms@2.1.3, ms@^2.0.0, ms@^2.1.1, ms@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
@@ -17098,13 +17095,6 @@ p-limit@^3.0.2, "p-limit@^3.1.0 ":
   dependencies:
     yocto-queue "^0.1.0"
 
-p-limit@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-5.0.0.tgz#6946d5b7140b649b7a33a027d89b4c625b3a5985"
-  integrity sha512-/Eaoq+QyLSiXQ4lyYV23f14mZRQcXnxfHrN0vCai+ak9G0pp9iEQukIIZq5NccEvwRB8PUnZT0KsOoDCINS1qQ==
-  dependencies:
-    yocto-queue "^1.0.0"
-
 p-locate@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
@@ -17418,15 +17408,15 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-pathe@^1.1.1, pathe@^1.1.2:
+pathe@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.2.tgz#6c4cb47a945692e48a1ddd6e4094d170516437ec"
   integrity sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==
 
-pathval@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/pathval/-/pathval-1.1.1.tgz#8534e77a77ce7ac5a2512ea21e0fdb8fcf6c3d8d"
-  integrity sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==
+pathval@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pathval/-/pathval-2.0.0.tgz#7e2550b422601d4f6b8e26f1301bc8f15a741a25"
+  integrity sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==
 
 pbkdf2@^3.0.3, pbkdf2@^3.1.2:
   version "3.1.2"
@@ -17541,15 +17531,6 @@ pkg-dir@^5.0.0:
   dependencies:
     find-up "^5.0.0"
 
-pkg-types@^1.0.3:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/pkg-types/-/pkg-types-1.1.0.tgz#3ec1bf33379030fd0a34c227b6c650e8ea7ca271"
-  integrity sha512-/RpmvKdxKf8uILTtoOhAgf30wYbP2Qw+L9p3Rvshx1JZVX+XQNZQFjlbmGHEGIm4CkVPlSn+NXmIM8+9oWQaSA==
-  dependencies:
-    confbox "^0.1.7"
-    mlly "^1.6.1"
-    pathe "^1.1.2"
-
 pkg-up@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-3.1.0.tgz#100ec235cc150e4fd42519412596a28512a0def5"
@@ -20790,10 +20771,10 @@ statuses@~1.4.0:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
   integrity sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==
 
-std-env@^3.5.0:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/std-env/-/std-env-3.7.0.tgz#c9f7386ced6ecf13360b6c6c55b8aaa4ef7481d2"
-  integrity sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==
+std-env@^3.8.0:
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/std-env/-/std-env-3.8.0.tgz#b56ffc1baf1a29dcc80a3bdf11d7fca7c315e7d5"
+  integrity sha512-Bc3YwwCB+OzldMxOXJIIvC6cPRWr/LxOp48CdQTOkPyk/t4JWWJbrilwBd7RJzKV8QW7tJkcgAmeuLLJugl5/w==
 
 stdopt@^2.0.0:
   version "2.2.0"
@@ -21106,13 +21087,6 @@ strip-json-comments@~2.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==
 
-strip-literal@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/strip-literal/-/strip-literal-1.3.0.tgz#db3942c2ec1699e6836ad230090b84bb458e3a07"
-  integrity sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==
-  dependencies:
-    acorn "^8.10.0"
-
 strip-outer@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/strip-outer/-/strip-outer-1.0.1.tgz#b2fd2abf6604b9d1e6013057195df836b8a9d631"
@@ -21517,6 +21491,15 @@ test-exclude@^6.0.0:
     glob "^7.1.4"
     minimatch "^3.0.4"
 
+test-exclude@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-7.0.1.tgz#20b3ba4906ac20994e275bbcafd68d510264c2a2"
+  integrity sha512-pFYqmTw68LXVjeWJMST4+borgQP2AyMNbg1BpZh9LbyhUeNkeaPF9gzfPGUAnSMV3qPYdWUwDIjjCLiSDOl7vg==
+  dependencies:
+    "@istanbuljs/schema" "^0.1.2"
+    glob "^10.4.1"
+    minimatch "^9.0.4"
+
 text-extensions@^1.0.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/text-extensions/-/text-extensions-1.9.0.tgz#1853e45fee39c945ce6f6c36b2d659b5aabc2a26"
@@ -21599,25 +21582,35 @@ tiny-warning@^1.0.2:
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
 
-tinybench@^2.5.1:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/tinybench/-/tinybench-2.8.0.tgz#30e19ae3a27508ee18273ffed9ac7018949acd7b"
-  integrity sha512-1/eK7zUnIklz4JUUlL+658n58XO2hHLQfSk1Zf2LKieUjxidN16eKFEoDEfjHc3ohofSSqK3X5yO6VGb6iW8Lw==
+tinybench@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/tinybench/-/tinybench-2.9.0.tgz#103c9f8ba6d7237a47ab6dd1dcff77251863426b"
+  integrity sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==
 
 tinycolor2@^1.4.1:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
   integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
 
-tinypool@^0.8.2:
-  version "0.8.4"
-  resolved "https://registry.yarnpkg.com/tinypool/-/tinypool-0.8.4.tgz#e217fe1270d941b39e98c625dcecebb1408c9aa8"
-  integrity sha512-i11VH5gS6IFeLY3gMBQ00/MmLncVP7JLXOw1vlgkytLmJK7QnEr7NXf0LBdxfmNPAeyetukOk0bOYrJrFGjYJQ==
+tinyexec@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/tinyexec/-/tinyexec-0.3.1.tgz#0ab0daf93b43e2c211212396bdb836b468c97c98"
+  integrity sha512-WiCJLEECkO18gwqIp6+hJg0//p23HXp4S+gGtAKu3mI2F2/sXC4FvHvXvB0zJVVaTPhx1/tOwdbRsa1sOBIKqQ==
 
-tinyspy@^2.2.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/tinyspy/-/tinyspy-2.2.1.tgz#117b2342f1f38a0dbdcc73a50a454883adf861d1"
-  integrity sha512-KYad6Vy5VDWV4GH3fjpseMQ/XU2BhIYP7Vzd0LG44qRWm/Yt2WCOTicFdvmgo6gWaqooMQCawTtILVQJupKu7A==
+tinypool@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/tinypool/-/tinypool-1.0.2.tgz#706193cc532f4c100f66aa00b01c42173d9051b2"
+  integrity sha512-al6n+QEANGFOMf/dmUMsuS5/r9B06uwlyNjZZql/zv8J7ybHCgoihBNORZCY2mzUuAnomQa2JdhyHKzZxPCrFA==
+
+tinyrainbow@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tinyrainbow/-/tinyrainbow-1.2.0.tgz#5c57d2fc0fb3d1afd78465c33ca885d04f02abb5"
+  integrity sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==
+
+tinyspy@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/tinyspy/-/tinyspy-3.0.2.tgz#86dd3cf3d737b15adcf17d7887c84a75201df20a"
+  integrity sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==
 
 tmp-promise@^3.0.2:
   version "3.0.3"
@@ -21878,11 +21871,6 @@ type-check@^0.4.0, type-check@~0.4.0:
   dependencies:
     prelude-ls "^1.2.1"
 
-type-detect@^4.0.0, type-detect@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
-  integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
-
 type-fest@^0.13.1:
   version "0.13.1"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.13.1.tgz#0172cb5bce80b0bd542ea348db50c7e21834d934"
@@ -22022,7 +22010,7 @@ ua-parser-js@^0.7.23, ua-parser-js@^0.7.30:
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.37.tgz#e464e66dac2d33a7a1251d7d7a99d6157ec27832"
   integrity sha512-xV8kqRKM+jhMvcHWUKthV9fNebIzrNy//2O9ZwWcfiBFR5f25XVZPLlEajk/sf3Ra15V92isyQqnIEXRDaZWEA==
 
-ufo@^1.3.2, ufo@^1.4.0:
+ufo@^1.4.0:
   version "1.5.3"
   resolved "https://registry.yarnpkg.com/ufo/-/ufo-1.5.3.tgz#3325bd3c977b6c6cd3160bf4ff52989adc9d3344"
   integrity sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw==
@@ -22613,15 +22601,6 @@ v8-compile-cache@^2.1.0, v8-compile-cache@^2.1.1:
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.4.0.tgz#cdada8bec61e15865f05d097c5f4fd30e94dc128"
   integrity sha512-ocyWc3bAHBB/guyqJQVI5o4BZkPhznPYUG2ea80Gond/BgNWpap8TOmLSeeQG7bnh2KMISxskdADG59j7zruhw==
 
-v8-to-istanbul@^9.2.0:
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-9.2.0.tgz#2ed7644a245cddd83d4e087b9b33b3e62dfd10ad"
-  integrity sha512-/EH/sDgxU2eGxajKdwLCDmQ4FWq+kpi3uCmBGpw1xJtnAxEjlD8j8PEiGWpCIMIs3ciNAgH0d3TTJiUkYzyZjA==
-  dependencies:
-    "@jridgewell/trace-mapping" "^0.3.12"
-    "@types/istanbul-lib-coverage" "^2.0.1"
-    convert-source-map "^2.0.0"
-
 validate-npm-package-license@^3.0.1:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
@@ -22720,15 +22699,15 @@ vfile@^6.0.0:
     unist-util-stringify-position "^4.0.0"
     vfile-message "^4.0.0"
 
-vite-node@1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-1.2.2.tgz#f6d329b06f9032130ae6eac1dc773f3663903c25"
-  integrity sha512-1as4rDTgVWJO3n1uHmUYqq7nsFgINQ9u+mRcXpjeOMJUmviqNKjcZB7UfRZrlM7MjYXMKpuWp5oGkjaFLnjawg==
+vite-node@2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-2.1.8.tgz#9495ca17652f6f7f95ca7c4b568a235e0c8dbac5"
+  integrity sha512-uPAwSr57kYjAUux+8E2j0q0Fxpn8M9VoyfGiRI8Kfktz9NcYMCenwY5RnZxnF1WTu3TGiYipirIzacLL3VVGFg==
   dependencies:
     cac "^6.7.14"
-    debug "^4.3.4"
-    pathe "^1.1.1"
-    picocolors "^1.0.0"
+    debug "^4.3.7"
+    es-module-lexer "^1.5.4"
+    pathe "^1.1.2"
     vite "^5.0.0"
 
 vite@5.3.2:
@@ -22753,37 +22732,38 @@ vite@^5.0, vite@^5.0.0:
   optionalDependencies:
     fsevents "~2.3.3"
 
-vitest-when@0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/vitest-when/-/vitest-when-0.3.1.tgz#72db1c0a8e76fae81f8fc21c6da3c769f8e7f8bb"
-  integrity sha512-qZt4VmuvGtkLEqUpq5AJHQtdfhU8wJH+eXHk+WBo8kFT5zdfVV06+vFgYzvuSOq73srlCEsJ4VJqX7uBtOwWLg==
+vitest-when@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/vitest-when/-/vitest-when-0.5.0.tgz#1cef4713a71c30af741964df780e50485177eaf0"
+  integrity sha512-BYDfzSawgKsV5GX3bU9ZbURuljjBCqi5KPtE2hBn/DsCRThU0z4qH0PAhJGemyKNnR01ADObXkmm1UPDHGzVUw==
+  dependencies:
+    pretty-format "^29.7.0"
 
-vitest@1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/vitest/-/vitest-1.2.2.tgz#9e29ad2a74a5df553c30c5798c57a062d58ce299"
-  integrity sha512-d5Ouvrnms3GD9USIK36KG8OZ5bEvKEkITFtnGv56HFaSlbItJuYr7hv2Lkn903+AvRAgSixiamozUVfORUekjw==
-  dependencies:
-    "@vitest/expect" "1.2.2"
-    "@vitest/runner" "1.2.2"
-    "@vitest/snapshot" "1.2.2"
-    "@vitest/spy" "1.2.2"
-    "@vitest/utils" "1.2.2"
-    acorn-walk "^8.3.2"
-    cac "^6.7.14"
-    chai "^4.3.10"
-    debug "^4.3.4"
-    execa "^8.0.1"
-    local-pkg "^0.5.0"
-    magic-string "^0.30.5"
-    pathe "^1.1.1"
-    picocolors "^1.0.0"
-    std-env "^3.5.0"
-    strip-literal "^1.3.0"
-    tinybench "^2.5.1"
-    tinypool "^0.8.2"
+vitest@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/vitest/-/vitest-2.1.8.tgz#2e6a00bc24833574d535c96d6602fb64163092fa"
+  integrity sha512-1vBKTZskHw/aosXqQUlVWWlGUxSJR8YtiyZDJAFeW2kPAeX6S3Sool0mjspO+kXLuxVWlEDDowBAeqeAQefqLQ==
+  dependencies:
+    "@vitest/expect" "2.1.8"
+    "@vitest/mocker" "2.1.8"
+    "@vitest/pretty-format" "^2.1.8"
+    "@vitest/runner" "2.1.8"
+    "@vitest/snapshot" "2.1.8"
+    "@vitest/spy" "2.1.8"
+    "@vitest/utils" "2.1.8"
+    chai "^5.1.2"
+    debug "^4.3.7"
+    expect-type "^1.1.0"
+    magic-string "^0.30.12"
+    pathe "^1.1.2"
+    std-env "^3.8.0"
+    tinybench "^2.9.0"
+    tinyexec "^0.3.1"
+    tinypool "^1.0.1"
+    tinyrainbow "^1.2.0"
     vite "^5.0.0"
-    vite-node "1.2.2"
-    why-is-node-running "^2.2.2"
+    vite-node "2.1.8"
+    why-is-node-running "^2.3.0"
 
 vituum@^1.1:
   version "1.1.0"
@@ -23217,10 +23197,10 @@ which@^2.0.1, which@^2.0.2:
   dependencies:
     isexe "^2.0.0"
 
-why-is-node-running@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/why-is-node-running/-/why-is-node-running-2.2.2.tgz#4185b2b4699117819e7154594271e7e344c9973e"
-  integrity sha512-6tSwToZxTOcotxHeA+qGCq1mVzKR3CwcJGmVcY+QE8SHy6TnpFnh8PAvPNHYr7EcuVeG0QSMxtYCuO1ta/G/oA==
+why-is-node-running@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/why-is-node-running/-/why-is-node-running-2.3.0.tgz#a3f69a97107f494b3cdc3bdddd883a7d65cebf04"
+  integrity sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==
   dependencies:
     siginfo "^2.0.0"
     stackback "0.0.2"
@@ -23559,11 +23539,6 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
-yocto-queue@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251"
-  integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==
-
 yup@0.32.9:
   version "0.32.9"
   resolved "https://registry.yarnpkg.com/yup/-/yup-0.32.9.tgz#9367bec6b1b0e39211ecbca598702e106019d872"

From e458d067f346eced69181e851e43f6142f670d9d Mon Sep 17 00:00:00 2001
From: Anthony Ngumah <68346382+AnthonyNASC20@users.noreply.github.com>
Date: Fri, 20 Dec 2024 13:23:58 -0500
Subject: [PATCH 08/18] feat(abr-testing): add module tests (#17127)

# Overview
Module testing script for running predefined tests on modules.
(Currently only has heater shaker test)

---------

Co-authored-by: rclarke0 <rhyann.clarke@opentrons.com>
---
 .../abr_testing/tools/module_control.py       | 138 ++++++++++++++++
 abr-testing/abr_testing/tools/test_modules.py | 155 ++++++++++++++++++
 2 files changed, 293 insertions(+)
 create mode 100644 abr-testing/abr_testing/tools/module_control.py
 create mode 100644 abr-testing/abr_testing/tools/test_modules.py

diff --git a/abr-testing/abr_testing/tools/module_control.py b/abr-testing/abr_testing/tools/module_control.py
new file mode 100644
index 00000000000..5bc1f5cfb1d
--- /dev/null
+++ b/abr-testing/abr_testing/tools/module_control.py
@@ -0,0 +1,138 @@
+"""Interface with opentrons modules!"""
+from serial import Serial  # type: ignore[import-untyped]
+import asyncio
+import subprocess
+from typing import Any
+
+# Generic
+_READ_ALL = "readall"
+_READ_LINE = "read"
+_DONE = "done"
+
+# TC commands
+_MOVE_SEAL = "ms"
+_MOVE_LID = "ml"
+tc_gcode_shortcuts = {
+    "status": "M119",
+    _MOVE_SEAL: "M241.D",  # move seal motor
+    _MOVE_LID: "M240.D",  # move lid stepper motor
+    "ol": "M126",  # open lid
+    "cl": "M127",  # close lid
+    "sw": "M901.D",  # status of all switches
+    "lt": "M141.D",  # get lid temperature
+    "pt": "M105.D",  # get plate temperature
+}
+
+# HS Commands
+hs_gcode_shortcuts = {
+    "srpm": "M3 S{rpm}",  # Set RPM
+    "grpm": "M123",  # Get RPM
+    "home": "G28",  # Home
+    "deactivate": "M106",  # Deactivate
+}
+
+gcode_shortcuts = tc_gcode_shortcuts | hs_gcode_shortcuts
+
+
+async def message_read(dev: Serial) -> Any:
+    """Read message."""
+    response = dev.readline().decode()
+    while not response:
+        await asyncio.sleep(1)
+        response = dev.readline().decode()
+    return response
+
+
+async def message_return(dev: Serial) -> Any:
+    """Wait until message becomes available."""
+    try:
+        response = await asyncio.wait_for(message_read(dev), timeout=30)
+        return response
+    except asyncio.exceptions.TimeoutError:
+        print("response timed out.")
+        return ""
+
+
+async def handle_module_gcode_shortcut(
+    dev: Serial, command: str, in_commands: bool, output: str = ""
+) -> None:
+    """Handle debugging commands that require followup."""
+    if in_commands:
+        if command == _MOVE_SEAL:
+            distance = input("enter distance in steps => ")
+            dev.write(
+                f"{gcode_shortcuts[command]} {distance}\n".encode()
+            )  # (+) -> retract, (-) -> engage
+            # print(await message_return(dev))
+        elif command == _MOVE_LID:
+            distance = input(
+                "enter angular distance in degrees => "
+            )  # (+) -> open, (-) -> close
+            dev.write(f"{gcode_shortcuts[command]} {distance}\n".encode())
+            # print(await message_return(dev))
+        # everything else
+        else:
+            dev.write(f"{gcode_shortcuts[command]}\n".encode())
+    else:
+        dev.write(f"{command}\n".encode())
+    try:
+        mr = await message_return(dev)
+        print(mr)
+    except TypeError:
+        print("Invalid input")
+        return
+
+    if output:
+        try:
+            with open(output, "a") as result_file:
+                if "OK" in mr:
+                    status = command + ": SUCCESS"
+                else:
+                    status = command + ": FAILURE"
+                result_file.write(status)
+                result_file.write(f"    {mr}")
+            result_file.close()
+        except FileNotFoundError:
+            print(f"cannot open file: {output}")
+
+
+async def comms_loop(dev: Serial, commands: list, output: str = "") -> bool:
+    """Loop for commands."""
+    _exit = False
+    try:
+        command = commands.pop(0)
+    except IndexError:
+        command = input("\n>>> ")
+    if command == _READ_ALL:
+        print(dev.readlines())
+    elif command == _READ_LINE:
+        print(dev.readline())
+    elif command == _DONE:
+        _exit = True
+    elif command in gcode_shortcuts:
+        await handle_module_gcode_shortcut(dev, command, True, output)
+    else:
+        await handle_module_gcode_shortcut(dev, command, False, output)
+    return _exit
+
+
+async def _main(module: str, commands: list = [], output: str = "") -> bool:
+    """Main process."""
+    module_name = (
+        subprocess.check_output(["find", "/dev/", "-name", f"*{module}*"])
+        .decode()
+        .strip()
+    )
+    if not module_name:
+        print(f"{module} not found. Exiting.")
+        return False
+    dev = Serial(f"{module_name}", 9600, timeout=2)
+    _exit = False
+    while not _exit:
+        _exit = await comms_loop(dev, commands, output)
+    dev.close()
+    return True
+
+
+if __name__ == "__main__":
+    asyncio.run(_main("heatershaker"))
diff --git a/abr-testing/abr_testing/tools/test_modules.py b/abr-testing/abr_testing/tools/test_modules.py
new file mode 100644
index 00000000000..8c372fbff53
--- /dev/null
+++ b/abr-testing/abr_testing/tools/test_modules.py
@@ -0,0 +1,155 @@
+"""Modules Tests Script!"""
+import asyncio
+import time
+from datetime import datetime
+import os
+import module_control  # type: ignore
+from typing import Any, Tuple, Dict
+import traceback
+
+# To run:
+# SSH into robot
+# cd /opt/opentrons-robot-server/abr-testing/tools
+# python3 test_modules.py
+
+
+async def tc_test_1(module: str, path_to_file: str) -> None:
+    """Thermocycler Test 1 Open and Close Lid."""
+    duration = int(input("How long to run this test for? (in seconds): "))
+    start = time.time()
+    while time.time() - start < duration:
+        try:
+            await (tc_open_lid(module, path_to_file))
+        except asyncio.TimeoutError:
+            return
+        time.sleep(5)
+        try:
+            await (tc_close_lid(module, path_to_file))
+        except asyncio.TimeoutError:
+            return
+        time.sleep(5)
+
+
+async def hs_test_1(module: str, path_to_file: str) -> None:
+    """Heater Shaker Test 1. (Home and Shake)."""
+    duration = int(input("How long to run this test for? (in seconds): "))
+    rpm = input("Target RPM (200-3000): ")
+    start = time.time()
+    while time.time() - start < duration:
+        try:
+            await (hs_test_home(module, path_to_file))
+        except asyncio.TimeoutError:
+            return
+        time.sleep(5)
+        try:
+            await (hs_test_set_shake(module, rpm, path_to_file))
+        except asyncio.TimeoutError:
+            return
+        time.sleep(10)
+        try:
+            await (hs_test_set_shake(module, "0", path_to_file))
+        except asyncio.TimeoutError:
+            return
+        time.sleep(10)
+
+
+async def input_codes(module: str, path_to_file: str) -> None:
+    """Opens serial for manual code input."""
+    await module_control._main(module, output=path_to_file)
+
+
+hs_tests: Dict[str, Tuple[Any, str]] = {
+    "Test 1": (hs_test_1, "Repeatedly home heater shaker then set shake speed"),
+    "Input GCodes": (input_codes, "Input g codes"),
+}
+
+tc_tests: Dict[str, Tuple[Any, str]] = {
+    "Test 1": (tc_test_1, "Repeatedly open and close TC lid"),
+    "Input GCodes": (input_codes, "Input g codes"),
+}
+
+global modules
+
+modules = {
+    "heatershaker": hs_tests,
+    "thermocycler": tc_tests,
+}
+
+
+async def main(module: str) -> None:
+    """Select test to be run."""
+    # Select test to run
+    # Set directory for tests
+    BASE_DIRECTORY = "/userfs/data/testing_data/"
+    if not os.path.exists(BASE_DIRECTORY):
+        os.makedirs(BASE_DIRECTORY)
+    tests = modules[module]
+    for i, test in enumerate(tests.keys()):
+        function, description = tests[test]
+        print(f"{i}) {test} : {description}")
+    selected_test = int(input("Please select a test: "))
+    try:
+        function, description = tests[list(tests.keys())[selected_test]]
+        test_dir = BASE_DIRECTORY + f"{module}/test/{list(tests.keys())[selected_test]}"
+        print(f"{i}, {description}")
+        print(f"TEST DIR: {test_dir}")
+        date = datetime.now()
+        filename = f"results_{datetime.strftime(date, '%Y-%m-%d_%H:%M:%S')}.txt"
+        output_file = os.path.join(test_dir, filename)
+        try:
+            if not os.path.exists(test_dir):
+                os.makedirs(test_dir)
+            open(output_file, "a").close()
+        except Exception:
+            traceback.print_exc()
+        print(f"PATH: {output_file} ")
+        await (function(module, output_file))
+    except Exception:
+        print("Failed to run test")
+        traceback.print_exc()
+
+
+# HS Test Functions
+async def hs_test_home(module: str, path_to_file: str) -> None:
+    """Home heater shaker."""
+    hs_gcodes = module_control.hs_gcode_shortcuts
+    home_gcode = hs_gcodes["home"]
+    await (module_control._main(module, [home_gcode, "done"], path_to_file))
+
+
+async def hs_test_set_shake(module: str, rpm: str, path_to_file: str) -> None:
+    """Shake heater shaker at specified speed."""
+    hs_gcodes = module_control.hs_gcode_shortcuts
+    set_shake_gcode = hs_gcodes["srpm"].format(rpm=rpm)
+    await (module_control._main(module, [set_shake_gcode, "done"], path_to_file))
+
+
+async def hs_deactivate(module: str, path_to_file: str) -> None:
+    """Deactivate Heater Shaker."""
+    hs_gcodes = module_control.hs_gcode_shortcuts
+    deactivate_gcode = hs_gcodes["deactivate"]
+    await (module_control._main(module, [deactivate_gcode, "done"], path_to_file))
+
+
+# TC Test Functions
+async def tc_open_lid(module: str, path_to_file: str) -> None:
+    """Open thermocycler lid."""
+    tc_gcodes = module_control.tc_gcode_shortcuts
+    open_lid_gcode = tc_gcodes["ol"]
+    await (module_control._main(module, [open_lid_gcode, "done"], path_to_file))
+
+
+async def tc_close_lid(module: str, path_to_file: str) -> None:
+    """Open thermocycler lid."""
+    tc_gcodes = module_control.tc_gcode_shortcuts
+    close_lid_gcode = tc_gcodes["cl"]
+    await (module_control._main(module, [close_lid_gcode, "done"], path_to_file))
+
+
+if __name__ == "__main__":
+    print("Modules:")
+    for i, module in enumerate(modules):
+        print(f"{i}) {module}")
+    module_int = int(input("Please select a module: "))
+    module = list(modules.keys())[module_int]
+    asyncio.run(main(module))

From 3162131ab33f004859c1a51eaf578d5f174596e4 Mon Sep 17 00:00:00 2001
From: Sarah Breen <sarah.breen@opentrons.com>
Date: Fri, 20 Dec 2024 14:01:51 -0500
Subject: [PATCH 09/18] feat(app): add analytics for localization feature
 (#17130)

fix EXEC-1028
---
 .../SystemLanguagePreferenceModal.test.tsx    | 47 +++++++++++++++++++
 .../SystemLanguagePreferenceModal/index.tsx   | 16 ++++++-
 .../LanguageSetting.tsx                       | 20 +++++++-
 .../__tests__/LanguageSetting.test.tsx        | 14 ++++++
 .../Desktop/AppSettings/GeneralSettings.tsx   | 17 ++++++-
 .../__test__/GeneralSettings.test.tsx         | 14 ++++++
 .../__tests__/ChooseLanguage.test.tsx         | 21 ++++++++-
 app/src/pages/ODD/ChooseLanguage/index.tsx    |  9 ++++
 .../useTrackProtocolRunEvent.test.tsx         |  9 +++-
 .../hooks/useTrackProtocolRunEvent.ts         |  5 +-
 app/src/redux/analytics/constants.ts          | 12 +++++
 11 files changed, 176 insertions(+), 8 deletions(-)

diff --git a/app/src/organisms/Desktop/SystemLanguagePreferenceModal/__tests__/SystemLanguagePreferenceModal.test.tsx b/app/src/organisms/Desktop/SystemLanguagePreferenceModal/__tests__/SystemLanguagePreferenceModal.test.tsx
index 104085fcb15..af4c4feb5d0 100644
--- a/app/src/organisms/Desktop/SystemLanguagePreferenceModal/__tests__/SystemLanguagePreferenceModal.test.tsx
+++ b/app/src/organisms/Desktop/SystemLanguagePreferenceModal/__tests__/SystemLanguagePreferenceModal.test.tsx
@@ -5,6 +5,10 @@ import { describe, it, vi, afterEach, beforeEach, expect } from 'vitest'
 
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
+import {
+  ANALYTICS_LANGUAGE_UPDATED_DESKTOP_APP_MODAL,
+  useTrackEvent,
+} from '/app/redux/analytics'
 import {
   getAppLanguage,
   getStoredSystemLanguage,
@@ -16,6 +20,7 @@ import { SystemLanguagePreferenceModal } from '..'
 vi.mock('react-router-dom')
 vi.mock('/app/redux/config')
 vi.mock('/app/redux/shell')
+vi.mock('/app/redux/analytics')
 
 const render = () => {
   return renderWithProviders(<SystemLanguagePreferenceModal />, {
@@ -24,6 +29,7 @@ const render = () => {
 }
 
 const mockNavigate = vi.fn()
+const mockTrackEvent = vi.fn()
 
 const MOCK_DEFAULT_LANGUAGE = 'en-US'
 
@@ -33,6 +39,7 @@ describe('SystemLanguagePreferenceModal', () => {
     vi.mocked(getSystemLanguage).mockReturnValue(MOCK_DEFAULT_LANGUAGE)
     vi.mocked(getStoredSystemLanguage).mockReturnValue(MOCK_DEFAULT_LANGUAGE)
     vi.mocked(useNavigate).mockReturnValue(mockNavigate)
+    vi.mocked(useTrackEvent).mockReturnValue(mockTrackEvent)
   })
   afterEach(() => {
     vi.resetAllMocks()
@@ -68,6 +75,14 @@ describe('SystemLanguagePreferenceModal', () => {
       'language.systemLanguage',
       MOCK_DEFAULT_LANGUAGE
     )
+    expect(mockTrackEvent).toBeCalledWith({
+      name: ANALYTICS_LANGUAGE_UPDATED_DESKTOP_APP_MODAL,
+      properties: {
+        language: MOCK_DEFAULT_LANGUAGE,
+        systemLanguage: MOCK_DEFAULT_LANGUAGE,
+        modalType: 'appBootModal',
+      },
+    })
   })
 
   it('should default to English (US) if system language is unsupported', () => {
@@ -90,6 +105,14 @@ describe('SystemLanguagePreferenceModal', () => {
       MOCK_DEFAULT_LANGUAGE
     )
     expect(updateConfigValue).toBeCalledWith('language.systemLanguage', 'es-MX')
+    expect(mockTrackEvent).toBeCalledWith({
+      name: ANALYTICS_LANGUAGE_UPDATED_DESKTOP_APP_MODAL,
+      properties: {
+        language: MOCK_DEFAULT_LANGUAGE,
+        systemLanguage: 'es-MX',
+        modalType: 'appBootModal',
+      },
+    })
   })
 
   it('should set a supported app language when system language is an unsupported locale of the same language', () => {
@@ -112,6 +135,14 @@ describe('SystemLanguagePreferenceModal', () => {
       MOCK_DEFAULT_LANGUAGE
     )
     expect(updateConfigValue).toBeCalledWith('language.systemLanguage', 'en-GB')
+    expect(mockTrackEvent).toBeCalledWith({
+      name: ANALYTICS_LANGUAGE_UPDATED_DESKTOP_APP_MODAL,
+      properties: {
+        language: MOCK_DEFAULT_LANGUAGE,
+        systemLanguage: 'en-GB',
+        modalType: 'appBootModal',
+      },
+    })
   })
 
   it('should render the correct header, description, and buttons when system language changes', () => {
@@ -139,6 +170,14 @@ describe('SystemLanguagePreferenceModal', () => {
       'language.systemLanguage',
       'zh-CN'
     )
+    expect(mockTrackEvent).toBeCalledWith({
+      name: ANALYTICS_LANGUAGE_UPDATED_DESKTOP_APP_MODAL,
+      properties: {
+        language: 'zh-CN',
+        systemLanguage: 'zh-CN',
+        modalType: 'systemLanguageUpdateModal',
+      },
+    })
     fireEvent.click(secondaryButton)
     expect(updateConfigValue).toHaveBeenNthCalledWith(
       3,
@@ -168,6 +207,14 @@ describe('SystemLanguagePreferenceModal', () => {
       'language.systemLanguage',
       'zh-Hant'
     )
+    expect(mockTrackEvent).toBeCalledWith({
+      name: ANALYTICS_LANGUAGE_UPDATED_DESKTOP_APP_MODAL,
+      properties: {
+        language: 'zh-CN',
+        systemLanguage: 'zh-Hant',
+        modalType: 'systemLanguageUpdateModal',
+      },
+    })
     fireEvent.click(secondaryButton)
     expect(updateConfigValue).toHaveBeenNthCalledWith(
       3,
diff --git a/app/src/organisms/Desktop/SystemLanguagePreferenceModal/index.tsx b/app/src/organisms/Desktop/SystemLanguagePreferenceModal/index.tsx
index d3b04f19061..f135c0fe10a 100644
--- a/app/src/organisms/Desktop/SystemLanguagePreferenceModal/index.tsx
+++ b/app/src/organisms/Desktop/SystemLanguagePreferenceModal/index.tsx
@@ -16,6 +16,10 @@ import {
 } from '@opentrons/components'
 
 import { LANGUAGES } from '/app/i18n'
+import {
+  ANALYTICS_LANGUAGE_UPDATED_DESKTOP_APP_MODAL,
+  useTrackEvent,
+} from '/app/redux/analytics'
 import {
   getAppLanguage,
   getStoredSystemLanguage,
@@ -32,7 +36,7 @@ type ArrayElement<
 
 export function SystemLanguagePreferenceModal(): JSX.Element | null {
   const { i18n, t } = useTranslation(['app_settings', 'shared', 'branded'])
-
+  const trackEvent = useTrackEvent()
   const [currentOption, setCurrentOption] = useState<DropdownOption>(
     LANGUAGES[0]
   )
@@ -66,6 +70,16 @@ export function SystemLanguagePreferenceModal(): JSX.Element | null {
   const handlePrimaryClick = (): void => {
     dispatch(updateConfigValue('language.appLanguage', currentOption.value))
     dispatch(updateConfigValue('language.systemLanguage', systemLanguage))
+    trackEvent({
+      name: ANALYTICS_LANGUAGE_UPDATED_DESKTOP_APP_MODAL,
+      properties: {
+        language: currentOption.value,
+        systemLanguage,
+        modalType: showUpdateModal
+          ? 'systemLanguageUpdateModal'
+          : 'appBootModal',
+      },
+    })
   }
 
   const handleDropdownClick = (value: string): void => {
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/LanguageSetting.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/LanguageSetting.tsx
index 49f58e26993..50af850a44f 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/LanguageSetting.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/LanguageSetting.tsx
@@ -1,7 +1,8 @@
-import { Fragment } from 'react'
+import { Fragment, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import styled from 'styled-components'
+import uuidv1 from 'uuid/v4'
 
 import {
   BORDERS,
@@ -14,6 +15,8 @@ import {
 } from '@opentrons/components'
 
 import { LANGUAGES } from '/app/i18n'
+import { ANALYTICS_LANGUAGE_UPDATED_ODD_SETTINGS } from '/app/redux/analytics'
+import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation'
 import { getAppLanguage, updateConfigValue } from '/app/redux/config'
 
@@ -42,16 +45,31 @@ interface LanguageSettingProps {
   setCurrentOption: SetSettingOption
 }
 
+const uuid: () => string = uuidv1
+
 export function LanguageSetting({
   setCurrentOption,
 }: LanguageSettingProps): JSX.Element {
   const { t } = useTranslation('app_settings')
   const dispatch = useDispatch<Dispatch>()
+  const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial()
+
+  let transactionId = ''
+  useEffect(() => {
+    transactionId = uuid()
+  }, [])
 
   const appLanguage = useSelector(getAppLanguage)
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
     dispatch(updateConfigValue('language.appLanguage', event.target.value))
+    trackEventWithRobotSerial({
+      name: ANALYTICS_LANGUAGE_UPDATED_ODD_SETTINGS,
+      properties: {
+        language: event.target.value,
+        transactionId,
+      },
+    })
   }
 
   return (
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/LanguageSetting.test.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/LanguageSetting.test.tsx
index 80d35ebea15..fe90eb2e1cb 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/LanguageSetting.test.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/LanguageSetting.test.tsx
@@ -10,14 +10,18 @@ import {
   SIMPLIFIED_CHINESE_DISPLAY_NAME,
   SIMPLIFIED_CHINESE,
 } from '/app/i18n'
+import { ANALYTICS_LANGUAGE_UPDATED_ODD_SETTINGS } from '/app/redux/analytics'
+import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { getAppLanguage, updateConfigValue } from '/app/redux/config'
 import { renderWithProviders } from '/app/__testing-utils__'
 
 import { LanguageSetting } from '../LanguageSetting'
 
 vi.mock('/app/redux/config')
+vi.mock('/app/redux-resources/analytics')
 
 const mockSetCurrentOption = vi.fn()
+const mockTrackEvent = vi.fn()
 
 const render = (props: React.ComponentProps<typeof LanguageSetting>) => {
   return renderWithProviders(<LanguageSetting {...props} />, {
@@ -32,6 +36,9 @@ describe('LanguageSetting', () => {
       setCurrentOption: mockSetCurrentOption,
     }
     vi.mocked(getAppLanguage).mockReturnValue(US_ENGLISH)
+    vi.mocked(useTrackEventWithRobotSerial).mockReturnValue({
+      trackEventWithRobotSerial: mockTrackEvent,
+    })
   })
 
   it('should render text and buttons', () => {
@@ -49,6 +56,13 @@ describe('LanguageSetting', () => {
       'language.appLanguage',
       SIMPLIFIED_CHINESE
     )
+    expect(mockTrackEvent).toHaveBeenCalledWith({
+      name: ANALYTICS_LANGUAGE_UPDATED_ODD_SETTINGS,
+      properties: {
+        language: SIMPLIFIED_CHINESE,
+        transactionId: expect.anything(),
+      },
+    })
   })
 
   it('should call mock function when tapping back button', () => {
diff --git a/app/src/pages/Desktop/AppSettings/GeneralSettings.tsx b/app/src/pages/Desktop/AppSettings/GeneralSettings.tsx
index 85b24816da6..eed4f5be96a 100644
--- a/app/src/pages/Desktop/AppSettings/GeneralSettings.tsx
+++ b/app/src/pages/Desktop/AppSettings/GeneralSettings.tsx
@@ -1,8 +1,9 @@
 // app info card with version and updated
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import { useSelector, useDispatch } from 'react-redux'
+import uuidv1 from 'uuid/v4'
 
 import {
   ALIGN_CENTER,
@@ -41,6 +42,7 @@ import {
 import {
   useTrackEvent,
   ANALYTICS_APP_UPDATE_NOTIFICATIONS_TOGGLED,
+  ANALYTICS_LANGUAGE_UPDATED_DESKTOP_APP_SETTINGS,
 } from '/app/redux/analytics'
 import { getAppLanguage, updateConfigValue } from '/app/redux/config'
 import { UpdateAppModal } from '/app/organisms/Desktop/UpdateAppModal'
@@ -55,6 +57,7 @@ const GITHUB_LINK =
   'https://github.com/Opentrons/opentrons/blob/edge/app-shell/build/release-notes.md'
 
 const ENABLE_APP_UPDATE_NOTIFICATIONS = 'Enable app update notifications'
+const uuid: () => string = uuidv1
 
 export function GeneralSettings(): JSX.Element {
   const { t } = useTranslation(['app_settings', 'shared', 'branded'])
@@ -68,9 +71,19 @@ export function GeneralSettings(): JSX.Element {
 
   const appLanguage = useSelector(getAppLanguage)
   const currentLanguageOption = LANGUAGES.find(lng => lng.value === appLanguage)
-
+  let transactionId = ''
+  useEffect(() => {
+    transactionId = uuid()
+  }, [])
   const handleDropdownClick = (value: string): void => {
     dispatch(updateConfigValue('language.appLanguage', value))
+    trackEvent({
+      name: ANALYTICS_LANGUAGE_UPDATED_DESKTOP_APP_SETTINGS,
+      properties: {
+        language: value,
+        transactionId,
+      },
+    })
   }
 
   const [showUpdateBanner, setShowUpdateBanner] = useState<boolean>(
diff --git a/app/src/pages/Desktop/AppSettings/__test__/GeneralSettings.test.tsx b/app/src/pages/Desktop/AppSettings/__test__/GeneralSettings.test.tsx
index 43d17a4d2cb..a06f4204bd7 100644
--- a/app/src/pages/Desktop/AppSettings/__test__/GeneralSettings.test.tsx
+++ b/app/src/pages/Desktop/AppSettings/__test__/GeneralSettings.test.tsx
@@ -12,6 +12,10 @@ import {
   US_ENGLISH_DISPLAY_NAME,
 } from '/app/i18n'
 import { getAlertIsPermanentlyIgnored } from '/app/redux/alerts'
+import {
+  ANALYTICS_LANGUAGE_UPDATED_DESKTOP_APP_SETTINGS,
+  useTrackEvent,
+} from '/app/redux/analytics'
 import { getAppLanguage, updateConfigValue } from '/app/redux/config'
 import * as Shell from '/app/redux/shell'
 import { GeneralSettings } from '../GeneralSettings'
@@ -32,11 +36,14 @@ const render = (): ReturnType<typeof renderWithProviders> => {
   )
 }
 
+const mockTrackEvent = vi.fn()
+
 describe('GeneralSettings', () => {
   beforeEach(() => {
     vi.mocked(Shell.getAvailableShellUpdate).mockReturnValue(null)
     vi.mocked(getAlertIsPermanentlyIgnored).mockReturnValue(false)
     vi.mocked(getAppLanguage).mockReturnValue(US_ENGLISH)
+    vi.mocked(useTrackEvent).mockReturnValue(mockTrackEvent)
   })
   afterEach(() => {
     vi.resetAllMocks()
@@ -118,5 +125,12 @@ describe('GeneralSettings', () => {
       'language.appLanguage',
       SIMPLIFIED_CHINESE
     )
+    expect(mockTrackEvent).toHaveBeenCalledWith({
+      name: ANALYTICS_LANGUAGE_UPDATED_DESKTOP_APP_SETTINGS,
+      properties: {
+        language: SIMPLIFIED_CHINESE,
+        transactionId: expect.anything(),
+      },
+    })
   })
 })
diff --git a/app/src/pages/ODD/ChooseLanguage/__tests__/ChooseLanguage.test.tsx b/app/src/pages/ODD/ChooseLanguage/__tests__/ChooseLanguage.test.tsx
index 8508a7b4d08..fa5c793e2d2 100644
--- a/app/src/pages/ODD/ChooseLanguage/__tests__/ChooseLanguage.test.tsx
+++ b/app/src/pages/ODD/ChooseLanguage/__tests__/ChooseLanguage.test.tsx
@@ -1,10 +1,12 @@
-import { vi, it, describe, expect } from 'vitest'
+import { vi, it, describe, expect, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import { MemoryRouter } from 'react-router-dom'
 
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
-import { updateConfigValue } from '/app/redux/config'
+import { ANALYTICS_LANGUAGE_UPDATED_ODD_UNBOXING_FLOW } from '/app/redux/analytics'
+import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
+import { updateConfigValue, getAppLanguage } from '/app/redux/config'
 import { ChooseLanguage } from '..'
 
 import type { NavigateFunction } from 'react-router-dom'
@@ -18,6 +20,9 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 vi.mock('/app/redux/config')
+vi.mock('/app/redux-resources/analytics')
+
+const mockTrackEvent = vi.fn()
 
 const render = () => {
   return renderWithProviders(
@@ -31,6 +36,12 @@ const render = () => {
 }
 
 describe('ChooseLanguage', () => {
+  beforeEach(() => {
+    vi.mocked(useTrackEventWithRobotSerial).mockReturnValue({
+      trackEventWithRobotSerial: mockTrackEvent,
+    })
+    vi.mocked(getAppLanguage).mockReturnValue('en-US')
+  })
   it('should render text, language options, and continue button', () => {
     render()
     screen.getByText('Choose your language')
@@ -54,6 +65,12 @@ describe('ChooseLanguage', () => {
   it('should call mockNavigate when tapping continue', () => {
     render()
     fireEvent.click(screen.getByRole('button', { name: 'Continue' }))
+    expect(mockTrackEvent).toHaveBeenCalledWith({
+      name: ANALYTICS_LANGUAGE_UPDATED_ODD_UNBOXING_FLOW,
+      properties: {
+        language: 'en-US',
+      },
+    })
     expect(mockNavigate).toHaveBeenCalledWith('/welcome')
   })
 })
diff --git a/app/src/pages/ODD/ChooseLanguage/index.tsx b/app/src/pages/ODD/ChooseLanguage/index.tsx
index d0110e68591..8ecb87451f7 100644
--- a/app/src/pages/ODD/ChooseLanguage/index.tsx
+++ b/app/src/pages/ODD/ChooseLanguage/index.tsx
@@ -13,6 +13,8 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 
+import { ANALYTICS_LANGUAGE_UPDATED_ODD_UNBOXING_FLOW } from '/app/redux/analytics'
+import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { MediumButton } from '/app/atoms/buttons'
 import { LANGUAGES, US_ENGLISH } from '/app/i18n'
 import { RobotSetupHeader } from '/app/organisms/ODD/RobotSetupHeader'
@@ -24,6 +26,7 @@ export function ChooseLanguage(): JSX.Element {
   const { i18n, t } = useTranslation(['app_settings', 'shared'])
   const navigate = useNavigate()
   const dispatch = useDispatch<Dispatch>()
+  const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial()
 
   const appLanguage = useSelector(getAppLanguage)
 
@@ -69,6 +72,12 @@ export function ChooseLanguage(): JSX.Element {
         <MediumButton
           buttonText={i18n.format(t('shared:continue'), 'capitalize')}
           onClick={() => {
+            trackEventWithRobotSerial({
+              name: ANALYTICS_LANGUAGE_UPDATED_ODD_UNBOXING_FLOW,
+              properties: {
+                language: appLanguage,
+              },
+            })
             navigate('/welcome')
           }}
           width="100%"
diff --git a/app/src/redux-resources/analytics/hooks/__tests__/useTrackProtocolRunEvent.test.tsx b/app/src/redux-resources/analytics/hooks/__tests__/useTrackProtocolRunEvent.test.tsx
index f769dc005c4..c12bcd5dbeb 100644
--- a/app/src/redux-resources/analytics/hooks/__tests__/useTrackProtocolRunEvent.test.tsx
+++ b/app/src/redux-resources/analytics/hooks/__tests__/useTrackProtocolRunEvent.test.tsx
@@ -12,6 +12,7 @@ import {
   useTrackEvent,
   ANALYTICS_PROTOCOL_RUN_ACTION,
 } from '/app/redux/analytics'
+import { getAppLanguage } from '/app/redux/config'
 import { mockConnectableRobot } from '/app/redux/discovery/__fixtures__'
 import { useRobot } from '/app/redux-resources/robots'
 
@@ -23,6 +24,7 @@ vi.mock('../useProtocolRunAnalyticsData')
 vi.mock('/app/redux/discovery')
 vi.mock('/app/redux/pipettes')
 vi.mock('/app/redux/analytics')
+vi.mock('/app/redux/config')
 vi.mock('/app/redux/robot-settings')
 
 const RUN_ID = 'runId'
@@ -55,6 +57,7 @@ describe('useTrackProtocolRunEvent hook', () => {
     )
     vi.mocked(useRobot).mockReturnValue(mockConnectableRobot)
     vi.mocked(useTrackEvent).mockReturnValue(mockTrackEvent)
+    vi.mocked(getAppLanguage).mockReturnValue('en-US')
 
     when(vi.mocked(useProtocolRunAnalyticsData))
       .calledWith(RUN_ID, mockConnectableRobot)
@@ -88,7 +91,11 @@ describe('useTrackProtocolRunEvent hook', () => {
     )
     expect(mockTrackEvent).toHaveBeenCalledWith({
       name: ANALYTICS_PROTOCOL_RUN_ACTION.START,
-      properties: { ...PROTOCOL_PROPERTIES, transactionId: RUN_ID },
+      properties: {
+        ...PROTOCOL_PROPERTIES,
+        transactionId: RUN_ID,
+        appLanguage: 'en-US',
+      },
     })
   })
 
diff --git a/app/src/redux-resources/analytics/hooks/useTrackProtocolRunEvent.ts b/app/src/redux-resources/analytics/hooks/useTrackProtocolRunEvent.ts
index 05c3ce16746..0603994d4b4 100644
--- a/app/src/redux-resources/analytics/hooks/useTrackProtocolRunEvent.ts
+++ b/app/src/redux-resources/analytics/hooks/useTrackProtocolRunEvent.ts
@@ -1,5 +1,7 @@
+import { useSelector } from 'react-redux'
 import { useTrackEvent } from '/app/redux/analytics'
 import { useProtocolRunAnalyticsData } from './useProtocolRunAnalyticsData'
+import { getAppLanguage } from '/app/redux/config'
 import { useRobot } from '/app/redux-resources/robots'
 
 interface ProtocolRunAnalyticsEvent {
@@ -21,7 +23,7 @@ export function useTrackProtocolRunEvent(
     runId,
     robot
   )
-
+  const appLanguage = useSelector(getAppLanguage)
   const trackProtocolRunEvent: TrackProtocolRunEvent = ({
     name,
     properties = {},
@@ -37,6 +39,7 @@ export function useTrackProtocolRunEvent(
             // It's sometimes unavoidable (namely on the desktop app) to prevent sending an event multiple times.
             // In these circumstances, we need an idempotency key to accurately filter events in Mixpanel.
             transactionId: runId,
+            appLanguage,
           },
         })
       })
diff --git a/app/src/redux/analytics/constants.ts b/app/src/redux/analytics/constants.ts
index cde9b0a1d59..aadeb7c6696 100644
--- a/app/src/redux/analytics/constants.ts
+++ b/app/src/redux/analytics/constants.ts
@@ -103,3 +103,15 @@ export const ANALYTICS_QUICK_TRANSFER_RERUN = 'quickTransferReRunFromSummary'
  */
 export const ANALYTICS_RESOURCE_MONITOR_REPORT: 'analytics:RESOURCE_MONITOR_REPORT' =
   'analytics:RESOURCE_MONITOR_REPORT'
+
+/**
+ * Internationalization Analytics
+ */
+export const ANALYTICS_LANGUAGE_UPDATED_ODD_UNBOXING_FLOW: 'languageUpdatedOddUnboxingFlow' =
+  'languageUpdatedOddUnboxingFlow'
+export const ANALYTICS_LANGUAGE_UPDATED_ODD_SETTINGS: 'languageUpdatedOddSettings' =
+  'languageUpdatedOddSettings'
+export const ANALYTICS_LANGUAGE_UPDATED_DESKTOP_APP_MODAL: 'languageUpdatedDesktopAppModal' =
+  'languageUpdatedDesktopAppModal'
+export const ANALYTICS_LANGUAGE_UPDATED_DESKTOP_APP_SETTINGS: 'languageUpdatedDesktopAppSettings' =
+  'languageUpdatedDesktopAppSettings'

From 99da2524454ba535e59cb2dd3e54d40d4a451489 Mon Sep 17 00:00:00 2001
From: Jethary Alcid <66035149+jerader@users.noreply.github.com>
Date: Fri, 20 Dec 2024 14:06:40 -0500
Subject: [PATCH 10/18] fix(protocol-designer): timeline errors/warnings show
 up in mixpanel (#17164)

closes RQA-3778
---
 .../reduxActionToAnalyticsEvent.test.ts         |  7 ++++---
 protocol-designer/src/analytics/middleware.ts   | 17 ++++++++++++-----
 protocol-designer/src/configureStore.ts         |  4 ++--
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/protocol-designer/src/analytics/__tests__/reduxActionToAnalyticsEvent.test.ts b/protocol-designer/src/analytics/__tests__/reduxActionToAnalyticsEvent.test.ts
index 5f5c9aa4012..cecf0755c0a 100644
--- a/protocol-designer/src/analytics/__tests__/reduxActionToAnalyticsEvent.test.ts
+++ b/protocol-designer/src/analytics/__tests__/reduxActionToAnalyticsEvent.test.ts
@@ -154,9 +154,10 @@ describe('reduxActionToAnalyticsEvent', () => {
         id: 'stepId',
         pipette: 'pipetteId',
         otherField: 123,
-        aspirateFlowRate: undefined,
-        dispenseFlowRate: undefined,
-        aspirateAirGap: undefined,
+        aspirateFlowRate: 'default',
+        dispenseFlowRate: 'default',
+        aspirateAirGap: 'default',
+        dispenseAirGap: 'default',
         nested: { inner: true },
         // de-nested fields
         __nested__inner: true,
diff --git a/protocol-designer/src/analytics/middleware.ts b/protocol-designer/src/analytics/middleware.ts
index 29cc66f8a11..661bb2a65ff 100644
--- a/protocol-designer/src/analytics/middleware.ts
+++ b/protocol-designer/src/analytics/middleware.ts
@@ -158,9 +158,14 @@ export const reduxActionToAnalyticsEvent = (
             name: `${modifiedStepName}Step`,
             properties: {
               ...stepArgModified,
-              aspirateAirGap: stepArgModified.aspirateAirGapVolume,
-              aspirateFlowRate: stepArgModified.aspirateFlowRateUlSec,
-              dispenseFlowRate: stepArgModified.dispenseFlowRateUlSec,
+              aspirateAirGap:
+                stepArgModified.aspirateAirGapVolume ?? DEFAULT_VALUE,
+              aspirateFlowRate:
+                stepArgModified.aspirateFlowRateUlSec ?? DEFAULT_VALUE,
+              dispenseFlowRate:
+                stepArgModified.dispenseFlowRateUlSec ?? DEFAULT_VALUE,
+              dispenseAirGap:
+                stepArgModified.dispenseAirGapVolume ?? DEFAULT_VALUE,
               blowoutFlowRate: stepArgModified.blowoutFlowRateUlSec,
               aspirateOffsetFromBottomMm:
                 stepArgModified.aspirateOffsetFromBottomMm ===
@@ -202,8 +207,10 @@ export const reduxActionToAnalyticsEvent = (
             name: `mixStep`,
             properties: {
               ...stepArgModified,
-              aspirateFlowRate: stepArgModified.aspirateFlowRateUlSec,
-              dispenseFlowRate: stepArgModified.dispenseFlowRateUlSec,
+              aspirateFlowRate:
+                stepArgModified.aspirateFlowRateUlSec ?? DEFAULT_VALUE,
+              dispenseFlowRate:
+                stepArgModified.dispenseFlowRateUlSec ?? DEFAULT_VALUE,
               blowoutFlowRate: stepArgModified.blowoutFlowRateUlSec,
               aspirateOffsetFromBottomMm:
                 stepArgModified.aspirateOffsetFromBottomMm ===
diff --git a/protocol-designer/src/configureStore.ts b/protocol-designer/src/configureStore.ts
index f7c31f00810..9f049628c0a 100644
--- a/protocol-designer/src/configureStore.ts
+++ b/protocol-designer/src/configureStore.ts
@@ -89,9 +89,9 @@ export function configureStore(): StoreType {
     /* preloadedState, */
     composeEnhancers(
       applyMiddleware(
-        trackEventMiddleware as Middleware<BaseState, Record<string, any>, any>,
+        thunk,
         timelineMiddleware as Middleware<BaseState, Record<string, any>, any>,
-        thunk
+        trackEventMiddleware as Middleware<BaseState, Record<string, any>, any>
       )
     ) as StoreEnhancer<unknown, unknown>
   )

From 20a23ef452544bb161e5e4e4316ceb99e393d98a Mon Sep 17 00:00:00 2001
From: Alise Au <20424172+ahiuchingau@users.noreply.github.com>
Date: Fri, 20 Dec 2024 14:24:54 -0500
Subject: [PATCH 11/18] feat(api): add hardware controller driver and simulator
 for the Flex Stacker (#17120)

---
 .../communication/serial_connection.py        |  13 +-
 api/src/opentrons/drivers/command_builder.py  |   4 +-
 .../drivers/flex_stacker/__init__.py          |   9 +
 .../drivers/flex_stacker/abstract.py          |  89 ++++++
 .../opentrons/drivers/flex_stacker/driver.py  | 260 ++++++++++++++++++
 .../drivers/flex_stacker/simulator.py         | 109 ++++++++
 .../opentrons/drivers/flex_stacker/types.py   | 138 ++++++++++
 .../drivers/flex_stacker/__init__.py          |   0
 .../drivers/flex_stacker/test_driver.py       | 257 +++++++++++++++++
 9 files changed, 875 insertions(+), 4 deletions(-)
 create mode 100644 api/src/opentrons/drivers/flex_stacker/__init__.py
 create mode 100644 api/src/opentrons/drivers/flex_stacker/abstract.py
 create mode 100644 api/src/opentrons/drivers/flex_stacker/driver.py
 create mode 100644 api/src/opentrons/drivers/flex_stacker/simulator.py
 create mode 100644 api/src/opentrons/drivers/flex_stacker/types.py
 create mode 100644 api/tests/opentrons/drivers/flex_stacker/__init__.py
 create mode 100644 api/tests/opentrons/drivers/flex_stacker/test_driver.py

diff --git a/api/src/opentrons/drivers/asyncio/communication/serial_connection.py b/api/src/opentrons/drivers/asyncio/communication/serial_connection.py
index 294e5779a7b..f925cfe8680 100644
--- a/api/src/opentrons/drivers/asyncio/communication/serial_connection.py
+++ b/api/src/opentrons/drivers/asyncio/communication/serial_connection.py
@@ -298,6 +298,7 @@ async def create(
         alarm_keyword: Optional[str] = None,
         reset_buffer_before_write: bool = False,
         async_error_ack: Optional[str] = None,
+        number_of_retries: int = 0,
     ) -> AsyncResponseSerialConnection:
         """
         Create a connection.
@@ -340,6 +341,7 @@ async def create(
             error_keyword=error_keyword or "err",
             alarm_keyword=alarm_keyword or "alarm",
             async_error_ack=async_error_ack or "async",
+            number_of_retries=number_of_retries,
         )
 
     def __init__(
@@ -352,6 +354,7 @@ def __init__(
         error_keyword: str,
         alarm_keyword: str,
         async_error_ack: str,
+        number_of_retries: int = 0,
     ) -> None:
         """
         Constructor
@@ -383,6 +386,7 @@ def __init__(
         self._name = name
         self._ack = ack.encode()
         self._retry_wait_time_seconds = retry_wait_time_seconds
+        self._number_of_retries = number_of_retries
         self._error_keyword = error_keyword.lower()
         self._alarm_keyword = alarm_keyword.lower()
         self._async_error_ack = async_error_ack.lower()
@@ -403,7 +407,9 @@ async def send_command(
         Raises: SerialException
         """
         return await self.send_data(
-            data=command.build(), retries=retries, timeout=timeout
+            data=command.build(),
+            retries=retries or self._number_of_retries,
+            timeout=timeout,
         )
 
     async def send_data(
@@ -424,7 +430,9 @@ async def send_data(
         async with super().send_data_lock, self._serial.timeout_override(
             "timeout", timeout
         ):
-            return await self._send_data(data=data, retries=retries)
+            return await self._send_data(
+                data=data, retries=retries or self._number_of_retries
+            )
 
     async def _send_data(self, data: str, retries: int = 0) -> str:
         """
@@ -439,6 +447,7 @@ async def _send_data(self, data: str, retries: int = 0) -> str:
         Raises: SerialException
         """
         data_encode = data.encode()
+        retries = retries or self._number_of_retries
 
         for retry in range(retries + 1):
             log.debug(f"{self._name}: Write -> {data_encode!r}")
diff --git a/api/src/opentrons/drivers/command_builder.py b/api/src/opentrons/drivers/command_builder.py
index 99ac5c7890c..ea90a12b946 100644
--- a/api/src/opentrons/drivers/command_builder.py
+++ b/api/src/opentrons/drivers/command_builder.py
@@ -6,7 +6,7 @@
 class CommandBuilder:
     """Class used to build GCODE commands."""
 
-    def __init__(self, terminator: str) -> None:
+    def __init__(self, terminator: str = "\n") -> None:
         """
         Construct a command builder.
 
@@ -17,7 +17,7 @@ def __init__(self, terminator: str) -> None:
         self._elements: List[str] = []
 
     def add_float(
-        self, prefix: str, value: float, precision: Optional[int]
+        self, prefix: str, value: float, precision: Optional[int] = None
     ) -> CommandBuilder:
         """
         Add a float value.
diff --git a/api/src/opentrons/drivers/flex_stacker/__init__.py b/api/src/opentrons/drivers/flex_stacker/__init__.py
new file mode 100644
index 00000000000..cd4866c179a
--- /dev/null
+++ b/api/src/opentrons/drivers/flex_stacker/__init__.py
@@ -0,0 +1,9 @@
+from .abstract import AbstractStackerDriver
+from .driver import FlexStackerDriver
+from .simulator import SimulatingDriver
+
+__all__ = [
+    "AbstractStackerDriver",
+    "FlexStackerDriver",
+    "SimulatingDriver",
+]
diff --git a/api/src/opentrons/drivers/flex_stacker/abstract.py b/api/src/opentrons/drivers/flex_stacker/abstract.py
new file mode 100644
index 00000000000..5ba3cdcb026
--- /dev/null
+++ b/api/src/opentrons/drivers/flex_stacker/abstract.py
@@ -0,0 +1,89 @@
+from typing import Protocol
+
+from .types import (
+    StackerAxis,
+    PlatformStatus,
+    Direction,
+    MoveParams,
+    StackerInfo,
+    LEDColor,
+)
+
+
+class AbstractStackerDriver(Protocol):
+    """Protocol for the Stacker driver."""
+
+    async def connect(self) -> None:
+        """Connect to stacker."""
+        ...
+
+    async def disconnect(self) -> None:
+        """Disconnect from stacker."""
+        ...
+
+    async def is_connected(self) -> bool:
+        """Check connection to stacker."""
+        ...
+
+    async def update_firmware(self, firmware_file_path: str) -> None:
+        """Updates the firmware on the device."""
+        ...
+
+    async def get_device_info(self) -> StackerInfo:
+        """Get Device Info."""
+        ...
+
+    async def set_serial_number(self, sn: str) -> bool:
+        """Set Serial Number."""
+        ...
+
+    async def stop_motors(self) -> bool:
+        """Stop all motor movement."""
+        ...
+
+    async def get_limit_switch(self, axis: StackerAxis, direction: Direction) -> bool:
+        """Get limit switch status.
+
+        :return: True if limit switch is triggered, False otherwise
+        """
+        ...
+
+    async def get_platform_sensor(self, direction: Direction) -> bool:
+        """Get platform sensor status.
+
+        :return: True if platform is present, False otherwise
+        """
+        ...
+
+    async def get_platform_status(self) -> PlatformStatus:
+        """Get platform status."""
+        ...
+
+    async def get_hopper_door_closed(self) -> bool:
+        """Get whether or not door is closed.
+
+        :return: True if door is closed, False otherwise
+        """
+        ...
+
+    async def move_in_mm(
+        self, axis: StackerAxis, distance: float, params: MoveParams | None = None
+    ) -> bool:
+        """Move axis."""
+        ...
+
+    async def move_to_limit_switch(
+        self, axis: StackerAxis, direction: Direction, params: MoveParams | None = None
+    ) -> bool:
+        """Move until limit switch is triggered."""
+        ...
+
+    async def home_axis(self, axis: StackerAxis, direction: Direction) -> bool:
+        """Home axis."""
+        ...
+
+    async def set_led(
+        self, power: float, color: LEDColor | None = None, external: bool | None = None
+    ) -> bool:
+        """Set LED color of status bar."""
+        ...
diff --git a/api/src/opentrons/drivers/flex_stacker/driver.py b/api/src/opentrons/drivers/flex_stacker/driver.py
new file mode 100644
index 00000000000..83671023772
--- /dev/null
+++ b/api/src/opentrons/drivers/flex_stacker/driver.py
@@ -0,0 +1,260 @@
+import asyncio
+import re
+from typing import Optional
+
+from opentrons.drivers.command_builder import CommandBuilder
+from opentrons.drivers.asyncio.communication import AsyncResponseSerialConnection
+
+from .abstract import AbstractStackerDriver
+from .types import (
+    GCODE,
+    StackerAxis,
+    PlatformStatus,
+    Direction,
+    StackerInfo,
+    HardwareRevision,
+    MoveParams,
+    LimitSwitchStatus,
+    LEDColor,
+)
+
+
+FS_BAUDRATE = 115200
+DEFAULT_FS_TIMEOUT = 40
+FS_ACK = "OK\n"
+FS_ERROR_KEYWORD = "err"
+FS_ASYNC_ERROR_ACK = "async"
+DEFAULT_COMMAND_RETRIES = 0
+GCODE_ROUNDING_PRECISION = 2
+
+
+class FlexStackerDriver(AbstractStackerDriver):
+    """FLEX Stacker driver."""
+
+    @classmethod
+    def parse_device_info(cls, response: str) -> StackerInfo:
+        """Parse stacker info."""
+        # TODO: Validate serial number format once established
+        _RE = re.compile(
+            f"^{GCODE.DEVICE_INFO} FW:(?P<fw>\\S+) HW:Opentrons-flex-stacker-(?P<hw>\\S+) SerialNo:(?P<sn>\\S+)$"
+        )
+        m = _RE.match(response)
+        if not m:
+            raise ValueError(f"Incorrect Response for device info: {response}")
+        return StackerInfo(
+            m.group("fw"), HardwareRevision(m.group("hw")), m.group("sn")
+        )
+
+    @classmethod
+    def parse_limit_switch_status(cls, response: str) -> LimitSwitchStatus:
+        """Parse limit switch statuses."""
+        field_names = LimitSwitchStatus.get_fields()
+        pattern = r"\s".join([rf"{name}:(?P<{name}>\d)" for name in field_names])
+        _RE = re.compile(f"^{GCODE.GET_LIMIT_SWITCH} {pattern}$")
+        m = _RE.match(response)
+        if not m:
+            raise ValueError(f"Incorrect Response for limit switch status: {response}")
+        return LimitSwitchStatus(*(bool(int(m.group(name))) for name in field_names))
+
+    @classmethod
+    def parse_platform_sensor_status(cls, response: str) -> PlatformStatus:
+        """Parse platform statuses."""
+        field_names = PlatformStatus.get_fields()
+        pattern = r"\s".join([rf"{name}:(?P<{name}>\d)" for name in field_names])
+        _RE = re.compile(f"^{GCODE.GET_PLATFORM_SENSOR} {pattern}$")
+        m = _RE.match(response)
+        if not m:
+            raise ValueError(f"Incorrect Response for platform status: {response}")
+        return PlatformStatus(*(bool(int(m.group(name))) for name in field_names))
+
+    @classmethod
+    def parse_door_closed(cls, response: str) -> bool:
+        """Parse door closed."""
+        _RE = re.compile(r"^M122 D:(\d)$")
+        match = _RE.match(response)
+        if not match:
+            raise ValueError(f"Incorrect Response for door closed: {response}")
+        return bool(int(match.group(1)))
+
+    @classmethod
+    def append_move_params(
+        cls, command: CommandBuilder, params: MoveParams | None
+    ) -> CommandBuilder:
+        """Append move params."""
+        if params is not None:
+            if params.max_speed is not None:
+                command.add_float("V", params.max_speed, GCODE_ROUNDING_PRECISION)
+            if params.acceleration is not None:
+                command.add_float("A", params.acceleration, GCODE_ROUNDING_PRECISION)
+            if params.max_speed_discont is not None:
+                command.add_float(
+                    "D", params.max_speed_discont, GCODE_ROUNDING_PRECISION
+                )
+        return command
+
+    @classmethod
+    async def create(
+        cls, port: str, loop: Optional[asyncio.AbstractEventLoop]
+    ) -> "FlexStackerDriver":
+        """Create a FLEX Stacker driver."""
+        connection = await AsyncResponseSerialConnection.create(
+            port=port,
+            baud_rate=FS_BAUDRATE,
+            timeout=DEFAULT_FS_TIMEOUT,
+            number_of_retries=DEFAULT_COMMAND_RETRIES,
+            ack=FS_ACK,
+            loop=loop,
+            error_keyword=FS_ERROR_KEYWORD,
+            async_error_ack=FS_ASYNC_ERROR_ACK,
+        )
+        return cls(connection)
+
+    def __init__(self, connection: AsyncResponseSerialConnection) -> None:
+        """
+        Constructor
+
+        Args:
+            connection: Connection to the FLEX Stacker
+        """
+        self._connection = connection
+
+    async def connect(self) -> None:
+        """Connect to stacker."""
+        await self._connection.open()
+
+    async def disconnect(self) -> None:
+        """Disconnect from stacker."""
+        await self._connection.close()
+
+    async def is_connected(self) -> bool:
+        """Check connection to stacker."""
+        return await self._connection.is_open()
+
+    async def get_device_info(self) -> StackerInfo:
+        """Get Device Info."""
+        response = await self._connection.send_command(
+            GCODE.DEVICE_INFO.build_command()
+        )
+        await self._connection.send_command(GCODE.GET_RESET_REASON.build_command())
+        return self.parse_device_info(response)
+
+    async def set_serial_number(self, sn: str) -> bool:
+        """Set Serial Number."""
+        # TODO: validate the serial number format
+        resp = await self._connection.send_command(
+            GCODE.SET_SERIAL_NUMBER.build_command().add_element(sn)
+        )
+        if not re.match(rf"^{GCODE.SET_SERIAL_NUMBER}$", resp):
+            raise ValueError(f"Incorrect Response for set serial number: {resp}")
+        return True
+
+    async def stop_motors(self) -> bool:
+        """Stop all motor movement."""
+        resp = await self._connection.send_command(GCODE.STOP_MOTORS.build_command())
+        if not re.match(rf"^{GCODE.STOP_MOTORS}$", resp):
+            raise ValueError(f"Incorrect Response for stop motors: {resp}")
+        return True
+
+    async def get_limit_switch(self, axis: StackerAxis, direction: Direction) -> bool:
+        """Get limit switch status.
+
+        :return: True if limit switch is triggered, False otherwise
+        """
+        response = await self.get_limit_switches_status()
+        return response.get(axis, direction)
+
+    async def get_limit_switches_status(self) -> LimitSwitchStatus:
+        """Get limit switch statuses for all axes."""
+        response = await self._connection.send_command(
+            GCODE.GET_LIMIT_SWITCH.build_command()
+        )
+        return self.parse_limit_switch_status(response)
+
+    async def get_platform_sensor(self, direction: Direction) -> bool:
+        """Get platform sensor at one direction."""
+        response = await self.get_platform_status()
+        return response.get(direction)
+
+    async def get_platform_status(self) -> PlatformStatus:
+        """Get platform sensor status.
+
+        :return: True if platform is detected, False otherwise
+        """
+        response = await self._connection.send_command(
+            GCODE.GET_PLATFORM_SENSOR.build_command()
+        )
+        return self.parse_platform_sensor_status(response)
+
+    async def get_hopper_door_closed(self) -> bool:
+        """Get whether or not door is closed.
+
+        :return: True if door is closed, False otherwise
+        """
+        response = await self._connection.send_command(
+            GCODE.GET_DOOR_SWITCH.build_command()
+        )
+        return self.parse_door_closed(response)
+
+    async def move_in_mm(
+        self, axis: StackerAxis, distance: float, params: MoveParams | None = None
+    ) -> bool:
+        """Move axis."""
+        command = self.append_move_params(
+            GCODE.MOVE_TO.build_command().add_float(
+                axis.name, distance, GCODE_ROUNDING_PRECISION
+            ),
+            params,
+        )
+        resp = await self._connection.send_command(command)
+        if not re.match(rf"^{GCODE.MOVE_TO}$", resp):
+            raise ValueError(f"Incorrect Response for move to: {resp}")
+        return True
+
+    async def move_to_limit_switch(
+        self, axis: StackerAxis, direction: Direction, params: MoveParams | None = None
+    ) -> bool:
+        """Move until limit switch is triggered."""
+        command = self.append_move_params(
+            GCODE.MOVE_TO_SWITCH.build_command().add_int(axis.name, direction.value),
+            params,
+        )
+        resp = await self._connection.send_command(command)
+        if not re.match(rf"^{GCODE.MOVE_TO_SWITCH}$", resp):
+            raise ValueError(f"Incorrect Response for move to switch: {resp}")
+        return True
+
+    async def home_axis(self, axis: StackerAxis, direction: Direction) -> bool:
+        """Home axis."""
+        resp = await self._connection.send_command(
+            GCODE.HOME_AXIS.build_command().add_int(axis.name, direction.value)
+        )
+        if not re.match(rf"^{GCODE.HOME_AXIS}$", resp):
+            raise ValueError(f"Incorrect Response for home axis: {resp}")
+        return True
+
+    async def set_led(
+        self, power: float, color: LEDColor | None = None, external: bool | None = None
+    ) -> bool:
+        """Set LED color.
+
+        :param power: Power of the LED (0-1.0), 0 is off, 1 is full power
+        :param color: Color of the LED
+        :param external: True if external LED, False if internal LED
+        """
+        power = max(0, min(power, 1.0))
+        command = GCODE.SET_LED.build_command().add_float(
+            "P", power, GCODE_ROUNDING_PRECISION
+        )
+        if color is not None:
+            command.add_int("C", color.value)
+        if external is not None:
+            command.add_int("E", external)
+        resp = await self._connection.send_command(command)
+        if not re.match(rf"^{GCODE.SET_LED}$", resp):
+            raise ValueError(f"Incorrect Response for set led: {resp}")
+        return True
+
+    async def update_firmware(self, firmware_file_path: str) -> None:
+        """Updates the firmware on the device."""
+        # TODO: Implement firmware update
+        pass
diff --git a/api/src/opentrons/drivers/flex_stacker/simulator.py b/api/src/opentrons/drivers/flex_stacker/simulator.py
new file mode 100644
index 00000000000..1e0b59b19de
--- /dev/null
+++ b/api/src/opentrons/drivers/flex_stacker/simulator.py
@@ -0,0 +1,109 @@
+from typing import Optional
+
+from opentrons.util.async_helpers import ensure_yield
+
+from .abstract import AbstractStackerDriver
+from .types import (
+    StackerAxis,
+    PlatformStatus,
+    Direction,
+    StackerInfo,
+    HardwareRevision,
+    MoveParams,
+    LimitSwitchStatus,
+)
+
+
+class SimulatingDriver(AbstractStackerDriver):
+    """FLEX Stacker driver simulator."""
+
+    def __init__(self, serial_number: Optional[str] = None) -> None:
+        self._sn = serial_number or "dummySerialFS"
+        self._limit_switch_status = LimitSwitchStatus(False, False, False, False, False)
+        self._platform_sensor_status = PlatformStatus(False, False)
+        self._door_closed = True
+
+    def set_limit_switch(self, status: LimitSwitchStatus) -> bool:
+        self._limit_switch_status = status
+        return True
+
+    def set_platform_sensor(self, status: PlatformStatus) -> bool:
+        self._platform_sensor_status = status
+        return True
+
+    def set_door_closed(self, door_closed: bool) -> bool:
+        self._door_closed = door_closed
+        return True
+
+    @ensure_yield
+    async def connect(self) -> None:
+        """Connect to stacker."""
+        pass
+
+    @ensure_yield
+    async def disconnect(self) -> None:
+        """Disconnect from stacker."""
+        pass
+
+    @ensure_yield
+    async def is_connected(self) -> bool:
+        """Check connection to stacker."""
+        return True
+
+    @ensure_yield
+    async def get_device_info(self) -> StackerInfo:
+        """Get Device Info."""
+        return StackerInfo(fw="stacker-fw", hw=HardwareRevision.EVT, sn=self._sn)
+
+    @ensure_yield
+    async def set_serial_number(self, sn: str) -> bool:
+        """Set Serial Number."""
+        return True
+
+    @ensure_yield
+    async def stop_motor(self) -> bool:
+        """Stop motor movement."""
+        return True
+
+    @ensure_yield
+    async def get_limit_switch(self, axis: StackerAxis, direction: Direction) -> bool:
+        """Get limit switch status.
+
+        :return: True if limit switch is triggered, False otherwise
+        """
+        return self._limit_switch_status.get(axis, direction)
+
+    @ensure_yield
+    async def get_limit_switches_status(self) -> LimitSwitchStatus:
+        """Get limit switch statuses for all axes."""
+        return self._limit_switch_status
+
+    @ensure_yield
+    async def get_platform_sensor_status(self) -> PlatformStatus:
+        """Get platform sensor status.
+
+        :return: True if platform is detected, False otherwise
+        """
+        return self._platform_sensor_status
+
+    @ensure_yield
+    async def get_hopper_door_closed(self) -> bool:
+        """Get whether or not door is closed.
+
+        :return: True if door is closed, False otherwise
+        """
+        return self._door_closed
+
+    @ensure_yield
+    async def move_in_mm(
+        self, axis: StackerAxis, distance: float, params: MoveParams | None = None
+    ) -> bool:
+        """Move axis."""
+        return True
+
+    @ensure_yield
+    async def move_to_limit_switch(
+        self, axis: StackerAxis, direction: Direction, params: MoveParams | None = None
+    ) -> bool:
+        """Move until limit switch is triggered."""
+        return True
diff --git a/api/src/opentrons/drivers/flex_stacker/types.py b/api/src/opentrons/drivers/flex_stacker/types.py
new file mode 100644
index 00000000000..4035aaaa755
--- /dev/null
+++ b/api/src/opentrons/drivers/flex_stacker/types.py
@@ -0,0 +1,138 @@
+from enum import Enum
+from dataclasses import dataclass, fields
+from typing import List
+
+from opentrons.drivers.command_builder import CommandBuilder
+
+
+class GCODE(str, Enum):
+
+    MOVE_TO = "G0"
+    MOVE_TO_SWITCH = "G5"
+    HOME_AXIS = "G28"
+    STOP_MOTORS = "M0"
+    GET_RESET_REASON = "M114"
+    DEVICE_INFO = "M115"
+    GET_LIMIT_SWITCH = "M119"
+    SET_LED = "M200"
+    GET_PLATFORM_SENSOR = "M121"
+    GET_DOOR_SWITCH = "M122"
+    SET_SERIAL_NUMBER = "M996"
+    ENTER_BOOTLOADER = "dfu"
+
+    def build_command(self) -> CommandBuilder:
+        """Build command."""
+        return CommandBuilder().add_gcode(self)
+
+
+STACKER_VID = 0x483
+STACKER_PID = 0xEF24
+STACKER_FREQ = 115200
+
+
+class HardwareRevision(Enum):
+    """Hardware Revision."""
+
+    NFF = "nff"
+    EVT = "a1"
+
+
+@dataclass
+class StackerInfo:
+    """Stacker Info."""
+
+    fw: str
+    hw: HardwareRevision
+    sn: str
+
+
+class StackerAxis(Enum):
+    """Stacker Axis."""
+
+    X = "X"
+    Z = "Z"
+    L = "L"
+
+    def __str__(self) -> str:
+        """Name."""
+        return self.name
+
+
+class LEDColor(Enum):
+    """Stacker LED Color."""
+
+    WHITE = 0
+    RED = 1
+    GREEN = 2
+    BLUE = 3
+
+
+class Direction(Enum):
+    """Direction."""
+
+    RETRACT = 0  # negative
+    EXTENT = 1  # positive
+
+    def __str__(self) -> str:
+        """Convert to tag for clear logging."""
+        return "negative" if self == Direction.RETRACT else "positive"
+
+    def opposite(self) -> "Direction":
+        """Get opposite direction."""
+        return Direction.EXTENT if self == Direction.RETRACT else Direction.RETRACT
+
+    def distance(self, distance: float) -> float:
+        """Get signed distance, where retract direction is negative."""
+        return distance * -1 if self == Direction.RETRACT else distance
+
+
+@dataclass
+class LimitSwitchStatus:
+    """Stacker Limit Switch Statuses."""
+
+    XE: bool
+    XR: bool
+    ZE: bool
+    ZR: bool
+    LR: bool
+
+    @classmethod
+    def get_fields(cls) -> List[str]:
+        """Get fields."""
+        return [f.name for f in fields(cls)]
+
+    def get(self, axis: StackerAxis, direction: Direction) -> bool:
+        """Get limit switch status."""
+        if axis == StackerAxis.X:
+            return self.XE if direction == Direction.EXTENT else self.XR
+        if axis == StackerAxis.Z:
+            return self.ZE if direction == Direction.EXTENT else self.ZR
+        if direction == Direction.EXTENT:
+            raise ValueError("Latch does not have extent limit switch")
+        return self.LR
+
+
+@dataclass
+class PlatformStatus:
+    """Stacker Platform Statuses."""
+
+    E: bool
+    R: bool
+
+    @classmethod
+    def get_fields(cls) -> List[str]:
+        """Get fields."""
+        return [f.name for f in fields(cls)]
+
+    def get(self, direction: Direction) -> bool:
+        """Get platform status."""
+        return self.E if direction == Direction.EXTENT else self.R
+
+
+@dataclass
+class MoveParams:
+    """Move Parameters."""
+
+    max_speed: float | None = None
+    acceleration: float | None = None
+    max_speed_discont: float | None = None
diff --git a/api/tests/opentrons/drivers/flex_stacker/__init__.py b/api/tests/opentrons/drivers/flex_stacker/__init__.py
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/api/tests/opentrons/drivers/flex_stacker/test_driver.py b/api/tests/opentrons/drivers/flex_stacker/test_driver.py
new file mode 100644
index 00000000000..aea2492cf9e
--- /dev/null
+++ b/api/tests/opentrons/drivers/flex_stacker/test_driver.py
@@ -0,0 +1,257 @@
+import pytest
+from mock import AsyncMock
+from opentrons.drivers.asyncio.communication.serial_connection import (
+    AsyncResponseSerialConnection,
+)
+from opentrons.drivers.flex_stacker.driver import FlexStackerDriver
+from opentrons.drivers.flex_stacker import types
+
+
+@pytest.fixture
+def connection() -> AsyncMock:
+    return AsyncMock(spec=AsyncResponseSerialConnection)
+
+
+@pytest.fixture
+def subject(connection: AsyncMock) -> FlexStackerDriver:
+    connection.send_command.return_value = ""
+    return FlexStackerDriver(connection)
+
+
+async def test_get_device_info(
+    subject: FlexStackerDriver, connection: AsyncMock
+) -> None:
+    """It should send a get device info command"""
+    connection.send_command.return_value = (
+        "M115 FW:0.0.1 HW:Opentrons-flex-stacker-a1 SerialNo:STCA120230605001"
+    )
+    response = await subject.get_device_info()
+    assert response == types.StackerInfo(
+        fw="0.0.1",
+        hw=types.HardwareRevision.EVT,
+        sn="STCA120230605001",
+    )
+
+    device_info = types.GCODE.DEVICE_INFO.build_command()
+    reset_reason = types.GCODE.GET_RESET_REASON.build_command()
+    connection.send_command.assert_any_call(device_info)
+    connection.send_command.assert_called_with(reset_reason)
+    connection.reset_mock()
+
+    # Test invalid response
+    connection.send_command.return_value = "M115 FW:0.0.1 SerialNo:STCA120230605001"
+
+    # This should raise ValueError
+    with pytest.raises(ValueError):
+        response = await subject.get_device_info()
+
+    device_info = types.GCODE.DEVICE_INFO.build_command()
+    reset_reason = types.GCODE.GET_RESET_REASON.build_command()
+    connection.send_command.assert_any_call(device_info)
+    connection.send_command.assert_called_with(reset_reason)
+
+
+async def test_stop_motors(subject: FlexStackerDriver, connection: AsyncMock) -> None:
+    """It should send a stop motors command"""
+    connection.send_command.return_value = "M0"
+    response = await subject.stop_motors()
+    assert response
+
+    stop_motors = types.GCODE.STOP_MOTORS.build_command()
+    connection.send_command.assert_any_call(stop_motors)
+    connection.reset_mock()
+
+    # This should raise ValueError
+    with pytest.raises(ValueError):
+        await subject.get_device_info()
+
+
+async def test_set_serial_number(
+    subject: FlexStackerDriver, connection: AsyncMock
+) -> None:
+    """It should send a set serial number command"""
+    connection.send_command.return_value = "M996"
+
+    serial_number = "Something"
+    response = await subject.set_serial_number(serial_number)
+    assert response
+
+    set_serial_number = types.GCODE.SET_SERIAL_NUMBER.build_command().add_element(
+        serial_number
+    )
+    connection.send_command.assert_any_call(set_serial_number)
+    connection.reset_mock()
+
+    # Test invalid response
+    connection.send_command.return_value = "M9nn"
+    with pytest.raises(ValueError):
+        response = await subject.set_serial_number(serial_number)
+
+    set_serial_number = types.GCODE.SET_SERIAL_NUMBER.build_command().add_element(
+        serial_number
+    )
+    connection.send_command.assert_any_call(set_serial_number)
+    connection.reset_mock()
+
+
+async def test_get_limit_switch(
+    subject: FlexStackerDriver, connection: AsyncMock
+) -> None:
+    """It should send a get limit switch command and return the boolean of one."""
+    connection.send_command.return_value = "M119 XE:1 XR:0 ZE:0 ZR:1 LR:1"
+    response = await subject.get_limit_switch(
+        types.StackerAxis.X, types.Direction.EXTENT
+    )
+    assert response
+
+    limit_switch_status = types.GCODE.GET_LIMIT_SWITCH.build_command()
+    connection.send_command.assert_any_call(limit_switch_status)
+    connection.reset_mock()
+
+
+async def test_get_limit_switches_status(
+    subject: FlexStackerDriver, connection: AsyncMock
+) -> None:
+    """It should send a get limit switch status and return LimitSwitchStatus."""
+    connection.send_command.return_value = "M119 XE:1 XR:0 ZE:0 ZR:1 LR:1"
+    response = await subject.get_limit_switches_status()
+    assert response == types.LimitSwitchStatus(
+        XE=True,
+        XR=False,
+        ZE=False,
+        ZR=True,
+        LR=True,
+    )
+
+    limit_switch_status = types.GCODE.GET_LIMIT_SWITCH.build_command()
+    connection.send_command.assert_any_call(limit_switch_status)
+    connection.reset_mock()
+
+    # Test invalid response
+    connection.send_command.return_value = "M119 XE:b XR:0 ZE:a ZR:1 LR:n"
+    with pytest.raises(ValueError):
+        response = await subject.get_limit_switches_status()
+
+    limit_switch_status = types.GCODE.GET_LIMIT_SWITCH.build_command()
+    connection.send_command.assert_any_call(limit_switch_status)
+
+
+async def test_get_platform_sensor(
+    subject: FlexStackerDriver, connection: AsyncMock
+) -> None:
+    """It should send a get platform sensor command return status of specified sensor."""
+    connection.send_command.return_value = "M121 E:1 R:1"
+    response = await subject.get_platform_sensor(types.Direction.EXTENT)
+    assert response
+
+    platform_sensor = types.GCODE.GET_PLATFORM_SENSOR.build_command()
+    connection.send_command.assert_any_call(platform_sensor)
+    connection.reset_mock()
+
+
+async def test_get_platform_status(
+    subject: FlexStackerDriver, connection: AsyncMock
+) -> None:
+    """it should send a get platform sensors status."""
+    connection.send_command.return_value = "M121 E:0 R:1"
+    response = await subject.get_platform_status()
+    assert response == types.PlatformStatus(
+        E=False,
+        R=True,
+    )
+
+    platform_status = types.GCODE.GET_PLATFORM_SENSOR.build_command()
+    connection.send_command.assert_any_call(platform_status)
+    connection.reset_mock()
+
+    # Test invalid response
+    connection.send_command.return_value = "M121 E:0 R:1 something"
+    with pytest.raises(ValueError):
+        response = await subject.get_platform_status()
+
+    platform_status = types.GCODE.GET_PLATFORM_SENSOR.build_command()
+    connection.send_command.assert_any_call(platform_status)
+
+
+async def test_get_hopper_door_closed(
+    subject: FlexStackerDriver, connection: AsyncMock
+) -> None:
+    """It should send a get door closed command."""
+    connection.send_command.return_value = "M122 D:1"
+    response = await subject.get_hopper_door_closed()
+    assert response
+
+    door_closed = types.GCODE.GET_DOOR_SWITCH.build_command()
+    connection.send_command.assert_any_call(door_closed)
+    connection.reset_mock()
+
+    # Test door open
+    connection.send_command.return_value = "M122 D:0"
+    response = await subject.get_hopper_door_closed()
+    assert not response
+
+    door_closed = types.GCODE.GET_DOOR_SWITCH.build_command()
+    connection.send_command.assert_any_call(door_closed)
+    connection.reset_mock()
+
+    # Test invalid response
+    connection.send_command.return_value = "M122 78gybhjk"
+
+    with pytest.raises(ValueError):
+        response = await subject.get_hopper_door_closed()
+
+    door_closed = types.GCODE.GET_DOOR_SWITCH.build_command()
+    connection.send_command.assert_any_call(door_closed)
+    connection.reset_mock()
+
+
+async def test_move_in_mm(subject: FlexStackerDriver, connection: AsyncMock) -> None:
+    """It should send a move to command"""
+    connection.send_command.return_value = "G0"
+    response = await subject.move_in_mm(types.StackerAxis.X, 10)
+    assert response
+
+    move_to = types.GCODE.MOVE_TO.build_command().add_float("X", 10)
+    connection.send_command.assert_any_call(move_to)
+    connection.reset_mock()
+
+
+async def test_move_to_switch(
+    subject: FlexStackerDriver, connection: AsyncMock
+) -> None:
+    """It should send a move to switch command"""
+    connection.send_command.return_value = "G5"
+    axis = types.StackerAxis.X
+    direction = types.Direction.EXTENT
+    response = await subject.move_to_limit_switch(axis, direction)
+    assert response
+
+    move_to = types.GCODE.MOVE_TO_SWITCH.build_command().add_int(
+        axis.name, direction.value
+    )
+    connection.send_command.assert_any_call(move_to)
+    connection.reset_mock()
+
+
+async def test_home_axis(subject: FlexStackerDriver, connection: AsyncMock) -> None:
+    """It should send a home axis command"""
+    connection.send_command.return_value = "G28"
+    axis = types.StackerAxis.X
+    direction = types.Direction.EXTENT
+    response = await subject.home_axis(axis, direction)
+    assert response
+
+    move_to = types.GCODE.HOME_AXIS.build_command().add_int(axis.name, direction.value)
+    connection.send_command.assert_any_call(move_to)
+    connection.reset_mock()
+
+
+async def test_set_led(subject: FlexStackerDriver, connection: AsyncMock) -> None:
+    """It should send a set led command"""
+    connection.send_command.return_value = "M200"
+    response = await subject.set_led(1, types.LEDColor.RED)
+    assert response
+
+    set_led = types.GCODE.SET_LED.build_command().add_float("P", 1).add_int("C", 1)
+    connection.send_command.assert_any_call(set_led)
+    connection.reset_mock()

From d36b284c294e753696399131eb6c68562f19f9dc Mon Sep 17 00:00:00 2001
From: koji <koji.kanao@opentrons.com>
Date: Fri, 20 Dec 2024 14:31:59 -0500
Subject: [PATCH 12/18] fix(protocol-designer): replace text link style
 (#17163)

* fix(protocol-designer): replace text link style
---
 protocol-designer/src/atoms/constants.ts                  | 7 -------
 protocol-designer/src/organisms/Alerts/ErrorContents.tsx  | 6 +++---
 .../src/organisms/EditInstrumentsModal/index.tsx          | 6 +++---
 protocol-designer/src/organisms/PipetteInfoItem/index.tsx | 6 +++---
 .../src/organisms/TipPositionModal/ZTipPositionModal.tsx  | 4 ++--
 .../src/organisms/TipPositionModal/index.tsx              | 6 +++---
 protocol-designer/src/organisms/WellOrderModal/index.tsx  | 4 ++--
 .../src/pages/CreateNewProtocolWizard/SelectPipettes.tsx  | 4 ++--
 .../src/pages/CreateNewProtocolWizard/WizardBody.tsx      | 4 ++--
 .../src/pages/Designer/DeckSetup/DeckSetupTools.tsx       | 4 ++--
 .../src/pages/Designer/DeckSetup/LabwareTools.tsx         | 4 ++--
 .../Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx   | 4 ++--
 .../StepTools/ThermocyclerTools/ThermocyclerCycle.tsx     | 8 ++++----
 .../StepTools/ThermocyclerTools/ThermocyclerStep.tsx      | 6 +++---
 protocol-designer/src/pages/Landing/index.tsx             | 4 ++--
 .../src/pages/ProtocolOverview/InstrumentsInfo.tsx        | 4 ++--
 .../src/pages/ProtocolOverview/ProtocolMetadata.tsx       | 4 ++--
 .../src/pages/ProtocolOverview/StartingDeck.tsx           | 4 ++--
 protocol-designer/src/pages/Settings/index.tsx            | 6 +++---
 yarn.lock                                                 | 2 +-
 20 files changed, 45 insertions(+), 52 deletions(-)

diff --git a/protocol-designer/src/atoms/constants.ts b/protocol-designer/src/atoms/constants.ts
index 67393baafd9..31fd22da638 100644
--- a/protocol-designer/src/atoms/constants.ts
+++ b/protocol-designer/src/atoms/constants.ts
@@ -6,13 +6,6 @@ import {
 } from '@opentrons/components'
 import type { FlattenSimpleInterpolation } from 'styled-components'
 
-export const BUTTON_LINK_STYLE = css`
-  color: ${COLORS.grey60};
-  &:hover {
-    color: ${COLORS.grey40};
-  }
-`
-
 export const LINK_BUTTON_STYLE = css`
   color: ${COLORS.black90};
 
diff --git a/protocol-designer/src/organisms/Alerts/ErrorContents.tsx b/protocol-designer/src/organisms/Alerts/ErrorContents.tsx
index 73dfa60f995..8320ae8ec1b 100644
--- a/protocol-designer/src/organisms/Alerts/ErrorContents.tsx
+++ b/protocol-designer/src/organisms/Alerts/ErrorContents.tsx
@@ -7,7 +7,7 @@ import {
   SPACING,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import { BUTTON_LINK_STYLE } from '../../atoms'
+import { LINK_BUTTON_STYLE } from '../../atoms'
 import { selectDesignerTab } from '../../file-data/actions'
 
 import type { AlertLevel } from './types'
@@ -38,7 +38,7 @@ export const ErrorContents = (
             <Btn
               width="7.25rem"
               textDecoration={TYPOGRAPHY.textDecorationUnderline}
-              css={BUTTON_LINK_STYLE}
+              css={LINK_BUTTON_STYLE}
               onClick={() => {
                 dispatch(selectDesignerTab({ tab: 'startingDeck' }))
               }}
@@ -58,7 +58,7 @@ export const ErrorContents = (
             <Btn
               width="7.25rem"
               textDecoration={TYPOGRAPHY.textDecorationUnderline}
-              css={BUTTON_LINK_STYLE}
+              css={LINK_BUTTON_STYLE}
               onClick={() => {
                 dispatch(selectDesignerTab({ tab: 'startingDeck' }))
               }}
diff --git a/protocol-designer/src/organisms/EditInstrumentsModal/index.tsx b/protocol-designer/src/organisms/EditInstrumentsModal/index.tsx
index 0140abf8e70..5de4843883c 100644
--- a/protocol-designer/src/organisms/EditInstrumentsModal/index.tsx
+++ b/protocol-designer/src/organisms/EditInstrumentsModal/index.tsx
@@ -64,7 +64,7 @@ import { setFeatureFlags } from '../../feature-flags/actions'
 import { createCustomTiprackDef } from '../../labware-defs/actions'
 import { deleteContainer } from '../../labware-ingred/actions'
 import { selectors as stepFormSelectors } from '../../step-forms'
-import { BUTTON_LINK_STYLE } from '../../atoms'
+import { LINK_BUTTON_STYLE } from '../../atoms'
 import { getMainPagePortalEl } from '../Portal'
 import {
   getSectionsFromPipetteName,
@@ -236,7 +236,7 @@ export function EditInstrumentsModal(
                 {has96Channel ||
                 (leftPipette == null && rightPipette == null) ? null : (
                   <Btn
-                    css={BUTTON_LINK_STYLE}
+                    css={LINK_BUTTON_STYLE}
                     onClick={() =>
                       dispatch(
                         changeSavedStepForm({
@@ -354,7 +354,7 @@ export function EditInstrumentsModal(
                           </StyledText>
                         </Flex>
                         <Btn
-                          css={BUTTON_LINK_STYLE}
+                          css={LINK_BUTTON_STYLE}
                           textDecoration={TYPOGRAPHY.textDecorationUnderline}
                           padding={SPACING.spacing4}
                           id="hello"
diff --git a/protocol-designer/src/organisms/PipetteInfoItem/index.tsx b/protocol-designer/src/organisms/PipetteInfoItem/index.tsx
index 5b98a2c81a2..deff4e274fc 100644
--- a/protocol-designer/src/organisms/PipetteInfoItem/index.tsx
+++ b/protocol-designer/src/organisms/PipetteInfoItem/index.tsx
@@ -12,7 +12,7 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 import { getPipetteSpecsV2 } from '@opentrons/shared-data'
-import { BUTTON_LINK_STYLE } from '../../atoms'
+import { LINK_BUTTON_STYLE } from '../../atoms'
 import { getLabwareDefsByURI } from '../../labware-defs/selectors'
 import type { PipetteMount, PipetteName } from '@opentrons/shared-data'
 
@@ -68,7 +68,7 @@ export function PipetteInfoItem(props: PipetteInfoItemProps): JSX.Element {
           <Btn
             onClick={editClick}
             textDecoration={TYPOGRAPHY.textDecorationUnderline}
-            css={BUTTON_LINK_STYLE}
+            css={LINK_BUTTON_STYLE}
             padding={SPACING.spacing4}
           >
             <StyledText desktopStyle="bodyDefaultRegular">
@@ -80,7 +80,7 @@ export function PipetteInfoItem(props: PipetteInfoItemProps): JSX.Element {
               cleanForm()
             }}
             textDecoration={TYPOGRAPHY.textDecorationUnderline}
-            css={BUTTON_LINK_STYLE}
+            css={LINK_BUTTON_STYLE}
             padding={SPACING.spacing4}
           >
             <StyledText desktopStyle="bodyDefaultRegular">
diff --git a/protocol-designer/src/organisms/TipPositionModal/ZTipPositionModal.tsx b/protocol-designer/src/organisms/TipPositionModal/ZTipPositionModal.tsx
index 7809a976313..81fb4ab3c2d 100644
--- a/protocol-designer/src/organisms/TipPositionModal/ZTipPositionModal.tsx
+++ b/protocol-designer/src/organisms/TipPositionModal/ZTipPositionModal.tsx
@@ -17,7 +17,7 @@ import {
 } from '@opentrons/components'
 import { DEFAULT_MM_BLOWOUT_OFFSET_FROM_TOP } from '../../constants'
 import { getIsTouchTipField } from '../../form-types'
-import { BUTTON_LINK_STYLE } from '../../atoms'
+import { LINK_BUTTON_STYLE } from '../../atoms'
 import { getMainPagePortalEl } from '../Portal'
 import * as utils from './utils'
 import { TOO_MANY_DECIMALS } from './constants'
@@ -156,7 +156,7 @@ export function ZTipPositionModal(props: ZTipPositionModalProps): JSX.Element {
             onClick={() => {
               setValue(utils.roundValue(defaultMm, 'up').toString())
             }}
-            css={BUTTON_LINK_STYLE}
+            css={LINK_BUTTON_STYLE}
           >
             {t('shared:reset_to_default')}
           </Btn>
diff --git a/protocol-designer/src/organisms/TipPositionModal/index.tsx b/protocol-designer/src/organisms/TipPositionModal/index.tsx
index cdef7a6855b..cb06f4c2fc8 100644
--- a/protocol-designer/src/organisms/TipPositionModal/index.tsx
+++ b/protocol-designer/src/organisms/TipPositionModal/index.tsx
@@ -18,7 +18,7 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 import { getIsTouchTipField } from '../../form-types'
-import { BUTTON_LINK_STYLE } from '../../atoms'
+import { LINK_BUTTON_STYLE } from '../../atoms'
 import { getMainPagePortalEl } from '../Portal'
 import { TOO_MANY_DECIMALS, PERCENT_RANGE_TO_SHOW_WARNING } from './constants'
 import * as utils from './utils'
@@ -257,7 +257,7 @@ export function TipPositionModal(
               setYValue('0')
               setZValue('1')
             }}
-            css={BUTTON_LINK_STYLE}
+            css={LINK_BUTTON_STYLE}
           >
             {t('shared:reset_to_default')}
           </Btn>
@@ -331,7 +331,7 @@ export function TipPositionModal(
               </StyledText>
               <Btn
                 fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-                css={BUTTON_LINK_STYLE}
+                css={LINK_BUTTON_STYLE}
                 onClick={() => {
                   setView(view === 'side' ? 'top' : 'side')
                 }}
diff --git a/protocol-designer/src/organisms/WellOrderModal/index.tsx b/protocol-designer/src/organisms/WellOrderModal/index.tsx
index b7b181f6a72..54b4ad437ef 100644
--- a/protocol-designer/src/organisms/WellOrderModal/index.tsx
+++ b/protocol-designer/src/organisms/WellOrderModal/index.tsx
@@ -14,7 +14,7 @@ import {
   DropdownMenu,
   ALIGN_CENTER,
 } from '@opentrons/components'
-import { BUTTON_LINK_STYLE } from '../../atoms'
+import { LINK_BUTTON_STYLE } from '../../atoms'
 import { getMainPagePortalEl } from '../Portal'
 import { WellOrderVisualization } from './WellOrderVisualization'
 import type { WellOrderOption } from '../../form-types'
@@ -164,7 +164,7 @@ export function WellOrderModal(props: WellOrderModalProps): JSX.Element | null {
           padding={`0 ${SPACING.spacing24} ${SPACING.spacing24}`}
           alignItems={ALIGN_CENTER}
         >
-          <Btn onClick={handleReset} css={BUTTON_LINK_STYLE}>
+          <Btn onClick={handleReset} css={LINK_BUTTON_STYLE}>
             {t('shared:reset_to_default')}
           </Btn>
           <Flex gridGap={SPACING.spacing8}>
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx
index bae902d4153..ff96f699267 100644
--- a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx
+++ b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx
@@ -38,7 +38,7 @@ import { setFeatureFlags } from '../../feature-flags/actions'
 import { createCustomTiprackDef } from '../../labware-defs/actions'
 import { useKitchen } from '../../organisms/Kitchen/hooks'
 import { IncompatibleTipsModal, PipetteInfoItem } from '../../organisms'
-import { BUTTON_LINK_STYLE } from '../../atoms'
+import { LINK_BUTTON_STYLE } from '../../atoms'
 import { WizardBody } from './WizardBody'
 import { PIPETTE_GENS, PIPETTE_TYPES, PIPETTE_VOLUMES } from './constants'
 import { getTiprackOptions } from './utils'
@@ -450,7 +450,7 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null {
                 (pipettesByMount.left.tiprackDefURI == null &&
                   pipettesByMount.right.tiprackDefURI == null) ? null : (
                   <Btn
-                    css={BUTTON_LINK_STYLE}
+                    css={LINK_BUTTON_STYLE}
                     onClick={() => {
                       const leftPipetteName = pipettesByMount.left.pipetteName
                       const rightPipetteName = pipettesByMount.right.pipetteName
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx
index d0c9c57cb37..54a629120a9 100644
--- a/protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx
+++ b/protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx
@@ -25,7 +25,7 @@ import three from '../../assets/images/onboarding_animation_3.webm'
 import four from '../../assets/images/onboarding_animation_4.webm'
 import five from '../../assets/images/onboarding_animation_5.webm'
 import six from '../../assets/images/onboarding_animation_6.webm'
-import { BUTTON_LINK_STYLE } from '../../atoms'
+import { LINK_BUTTON_STYLE } from '../../atoms'
 import type { RobotType } from '@opentrons/shared-data'
 
 interface WizardBodyProps {
@@ -144,7 +144,7 @@ export function WizardBody(props: WizardBodyProps): JSX.Element {
           alignItems={ALIGN_CENTER}
         >
           {goBack != null ? (
-            <Btn onClick={goBack} css={BUTTON_LINK_STYLE} height="1.5rem">
+            <Btn onClick={goBack} css={LINK_BUTTON_STYLE} height="1.5rem">
               <StyledText desktopStyle="bodyLargeSemiBold">
                 {t('go_back')}
               </StyledText>
diff --git a/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupTools.tsx b/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupTools.tsx
index c498a71534c..f5b1fe252cd 100644
--- a/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupTools.tsx
+++ b/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupTools.tsx
@@ -55,7 +55,7 @@ import { selectors } from '../../../labware-ingred/selectors'
 import { useKitchen } from '../../../organisms/Kitchen/hooks'
 import { getDismissedHints } from '../../../tutorial/selectors'
 import { createContainerAboveModule } from '../../../step-forms/actions/thunks'
-import { BUTTON_LINK_STYLE, NAV_BAR_HEIGHT_REM } from '../../../atoms'
+import { LINK_BUTTON_STYLE, NAV_BAR_HEIGHT_REM } from '../../../atoms'
 import { ConfirmDeleteStagingAreaModal } from '../../../organisms'
 import { getSlotInformation } from '../utils'
 import { ALL_ORDERED_CATEGORIES, FIXTURES, MOAM_MODELS } from './constants'
@@ -438,7 +438,7 @@ export function DeckSetupTools(props: DeckSetupToolsProps): JSX.Element | null {
                 handleResetToolbox()
               }
             }}
-            css={BUTTON_LINK_STYLE}
+            css={LINK_BUTTON_STYLE}
             textDecoration={TYPOGRAPHY.textDecorationUnderline}
           >
             <StyledText desktopStyle="bodyDefaultRegular">
diff --git a/protocol-designer/src/pages/Designer/DeckSetup/LabwareTools.tsx b/protocol-designer/src/pages/Designer/DeckSetup/LabwareTools.tsx
index ca8feac72d1..d41f2057502 100644
--- a/protocol-designer/src/pages/Designer/DeckSetup/LabwareTools.tsx
+++ b/protocol-designer/src/pages/Designer/DeckSetup/LabwareTools.tsx
@@ -32,7 +32,7 @@ import {
   getModuleType,
 } from '@opentrons/shared-data'
 
-import { BUTTON_LINK_STYLE } from '../../../atoms'
+import { LINK_BUTTON_STYLE } from '../../../atoms'
 import { selectors as stepFormSelectors } from '../../../step-forms'
 import { getOnlyLatestDefs } from '../../../labware-defs'
 import {
@@ -491,7 +491,7 @@ export function LabwareTools(props: LabwareToolsProps): JSX.Element {
         alignItems={ALIGN_CENTER}
         justifyContent={JUSTIFY_CENTER}
       >
-        <StyledLabel css={BUTTON_LINK_STYLE}>
+        <StyledLabel css={LINK_BUTTON_STYLE}>
           <StyledText desktopStyle="bodyDefaultRegular">
             {t('upload_custom_labware')}
           </StyledText>
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
index 307e9e4aeac..475340bf2d4 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
@@ -18,7 +18,7 @@ import {
 } from '@opentrons/components'
 import { stepIconsByType } from '../../../../form-types'
 import {
-  BUTTON_LINK_STYLE,
+  LINK_BUTTON_STYLE,
   LINE_CLAMP_TEXT_STYLE,
   NAV_BAR_HEIGHT_REM,
 } from '../../../../atoms'
@@ -299,7 +299,7 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
             onClick={() => {
               setIsRename(true)
             }}
-            css={BUTTON_LINK_STYLE}
+            css={LINK_BUTTON_STYLE}
             textDecoration={TYPOGRAPHY.textDecorationUnderline}
           >
             <StyledText desktopStyle="bodyDefaultRegular">
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerCycle.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerCycle.tsx
index 9c0e356c158..96d0007e096 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerCycle.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerCycle.tsx
@@ -20,7 +20,7 @@ import {
   StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import { BUTTON_LINK_STYLE } from '../../../../../../atoms'
+import { LINK_BUTTON_STYLE } from '../../../../../../atoms'
 import {
   isTimeFormatMinutesSeconds,
   temperatureRangeFieldValue,
@@ -262,7 +262,7 @@ export function ThermocyclerCycle(props: ThermocyclerCycleProps): JSX.Element {
           whiteSpace={NO_WRAP}
           textDecoration={TYPOGRAPHY.textDecorationUnderline}
           padding={SPACING.spacing4}
-          css={BUTTON_LINK_STYLE}
+          css={LINK_BUTTON_STYLE}
         >
           <StyledText desktopStyle="bodyDefaultRegular">
             {i18n.format(
@@ -329,7 +329,7 @@ export function ThermocyclerCycle(props: ThermocyclerCycleProps): JSX.Element {
           }}
           padding={SPACING.spacing4}
           css={[
-            BUTTON_LINK_STYLE,
+            LINK_BUTTON_STYLE,
             css`
               visibility: ${hover ? 'visible' : 'hidden'};
               opacity: ${hover ? 1 : 0};
@@ -527,7 +527,7 @@ export function ThermocyclerCycle(props: ThermocyclerCycleProps): JSX.Element {
             whiteSpace={NO_WRAP}
             textDecoration={TYPOGRAPHY.textDecorationUnderline}
             padding={SPACING.spacing4}
-            css={BUTTON_LINK_STYLE}
+            css={LINK_BUTTON_STYLE}
           >
             <StyledText desktopStyle="bodyDefaultRegular">
               {i18n.format(
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerStep.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerStep.tsx
index 22dda2fc368..3e45704c94d 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerStep.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerStep.tsx
@@ -18,7 +18,7 @@ import {
   StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import { BUTTON_LINK_STYLE } from '../../../../../../atoms'
+import { LINK_BUTTON_STYLE } from '../../../../../../atoms'
 import {
   temperatureRangeFieldValue,
   isTimeFormatMinutesSeconds,
@@ -160,7 +160,7 @@ export function ThermocyclerStep(props: ThermocyclerStepProps): JSX.Element {
           whiteSpace={NO_WRAP}
           textDecoration={TYPOGRAPHY.textDecorationUnderline}
           padding={SPACING.spacing4}
-          css={BUTTON_LINK_STYLE}
+          css={LINK_BUTTON_STYLE}
         >
           <StyledText desktopStyle="bodyDefaultRegular">
             {i18n.format(
@@ -221,7 +221,7 @@ export function ThermocyclerStep(props: ThermocyclerStepProps): JSX.Element {
           }}
           padding={SPACING.spacing4}
           css={[
-            BUTTON_LINK_STYLE,
+            LINK_BUTTON_STYLE,
             css`
               visibility: ${hover ? 'visible' : 'hidden'};
               opacity: ${hover ? 1 : 0};
diff --git a/protocol-designer/src/pages/Landing/index.tsx b/protocol-designer/src/pages/Landing/index.tsx
index a1ca26b867c..48d2eb27ead 100644
--- a/protocol-designer/src/pages/Landing/index.tsx
+++ b/protocol-designer/src/pages/Landing/index.tsx
@@ -17,7 +17,7 @@ import {
   StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import { BUTTON_LINK_STYLE } from '../../atoms'
+import { LINK_BUTTON_STYLE } from '../../atoms'
 import { AnnouncementModal } from '../../organisms'
 import { actions as loadFileActions } from '../../load-file'
 import { getFileMetadata } from '../../file-data/selectors'
@@ -137,7 +137,7 @@ export function Landing(): JSX.Element {
           />
         </StyledNavLink>
         <StyledLabel>
-          <Flex css={BUTTON_LINK_STYLE}>
+          <Flex css={LINK_BUTTON_STYLE}>
             <StyledText desktopStyle="bodyLargeRegular">
               {t('edit_existing')}
             </StyledText>
diff --git a/protocol-designer/src/pages/ProtocolOverview/InstrumentsInfo.tsx b/protocol-designer/src/pages/ProtocolOverview/InstrumentsInfo.tsx
index 63ce567a805..ee40f77aef4 100644
--- a/protocol-designer/src/pages/ProtocolOverview/InstrumentsInfo.tsx
+++ b/protocol-designer/src/pages/ProtocolOverview/InstrumentsInfo.tsx
@@ -14,7 +14,7 @@ import {
 } from '@opentrons/components'
 import { getPipetteSpecsV2, FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
 
-import { BUTTON_LINK_STYLE } from '../../atoms'
+import { LINK_BUTTON_STYLE } from '../../atoms'
 
 import type { PipetteName, RobotType } from '@opentrons/shared-data'
 import type { AdditionalEquipmentEntities } from '@opentrons/step-generation'
@@ -87,7 +87,7 @@ export function InstrumentsInfo({
             onClick={() => {
               setShowEditInstrumentsModal(true)
             }}
-            css={BUTTON_LINK_STYLE}
+            css={LINK_BUTTON_STYLE}
           >
             <StyledText desktopStyle="bodyDefaultRegular">
               {t('edit')}
diff --git a/protocol-designer/src/pages/ProtocolOverview/ProtocolMetadata.tsx b/protocol-designer/src/pages/ProtocolOverview/ProtocolMetadata.tsx
index d750edaaad5..564c99d9f89 100644
--- a/protocol-designer/src/pages/ProtocolOverview/ProtocolMetadata.tsx
+++ b/protocol-designer/src/pages/ProtocolOverview/ProtocolMetadata.tsx
@@ -12,7 +12,7 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 
-import { BUTTON_LINK_STYLE, LINE_CLAMP_TEXT_STYLE } from '../../atoms'
+import { LINK_BUTTON_STYLE, LINE_CLAMP_TEXT_STYLE } from '../../atoms'
 
 const REQUIRED_APP_VERSION = '8.2.0'
 
@@ -46,7 +46,7 @@ export function ProtocolMetadata({
             onClick={() => {
               setShowEditMetadataModal(true)
             }}
-            css={BUTTON_LINK_STYLE}
+            css={LINK_BUTTON_STYLE}
             data-testid="ProtocolOverview_MetadataEditButton"
           >
             <StyledText desktopStyle="bodyDefaultRegular">
diff --git a/protocol-designer/src/pages/ProtocolOverview/StartingDeck.tsx b/protocol-designer/src/pages/ProtocolOverview/StartingDeck.tsx
index 8dac5003b6f..48e3cb178b4 100644
--- a/protocol-designer/src/pages/ProtocolOverview/StartingDeck.tsx
+++ b/protocol-designer/src/pages/ProtocolOverview/StartingDeck.tsx
@@ -15,7 +15,7 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 
-import { BUTTON_LINK_STYLE } from '../../atoms'
+import { LINK_BUTTON_STYLE } from '../../atoms'
 import { SlotDetailsContainer } from '../../organisms'
 import { getInitialDeckSetup } from '../../step-forms/selectors'
 import { DeckThumbnail } from './DeckThumbnail'
@@ -72,7 +72,7 @@ function StartingDeckHeader(props: StartingDeckHeaderProps): JSX.Element {
             onClick={() => {
               setShowMaterialsListModal(true)
             }}
-            css={BUTTON_LINK_STYLE}
+            css={LINK_BUTTON_STYLE}
           >
             <StyledText desktopStyle="bodyDefaultRegular">
               {t('protocol_overview:materials_list')}
diff --git a/protocol-designer/src/pages/Settings/index.tsx b/protocol-designer/src/pages/Settings/index.tsx
index 63519226a92..fa364525f99 100644
--- a/protocol-designer/src/pages/Settings/index.tsx
+++ b/protocol-designer/src/pages/Settings/index.tsx
@@ -27,7 +27,7 @@ import {
   selectors as tutorialSelectors,
 } from '../../tutorial'
 import { ToggleButton } from '../../atoms/ToggleButton'
-import { BUTTON_LINK_STYLE } from '../../atoms'
+import { LINK_BUTTON_STYLE } from '../../atoms'
 import { actions as featureFlagActions } from '../../feature-flags'
 import { getFeatureFlagData } from '../../feature-flags/selectors'
 import type { FlagTypes } from '../../feature-flags'
@@ -142,7 +142,7 @@ export function Settings(): JSX.Element {
                 </Flex>
                 <Flex gridGap={SPACING.spacing16} alignItems={ALIGN_CENTER}>
                   <LinkComponent
-                    css={BUTTON_LINK_STYLE}
+                    css={LINK_BUTTON_STYLE}
                     textDecoration={TYPOGRAPHY.textDecorationUnderline}
                     href={DOC_URL}
                     external
@@ -154,7 +154,7 @@ export function Settings(): JSX.Element {
                   </LinkComponent>
 
                   <Btn
-                    css={BUTTON_LINK_STYLE}
+                    css={LINK_BUTTON_STYLE}
                     textDecoration={TYPOGRAPHY.textDecorationUnderline}
                     onClick={() => {
                       setShowAnnouncementModal(true)
diff --git a/yarn.lock b/yarn.lock
index 56ebcbf301a..d58c1ef61ac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -22739,7 +22739,7 @@ vitest-when@0.5.0:
   dependencies:
     pretty-format "^29.7.0"
 
-vitest@^2.1.8:
+vitest@2.1.8:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/vitest/-/vitest-2.1.8.tgz#2e6a00bc24833574d535c96d6602fb64163092fa"
   integrity sha512-1vBKTZskHw/aosXqQUlVWWlGUxSJR8YtiyZDJAFeW2kPAeX6S3Sool0mjspO+kXLuxVWlEDDowBAeqeAQefqLQ==

From 35422b60c5feeae7258396de46e6bd6e0d4cb828 Mon Sep 17 00:00:00 2001
From: koji <koji.kanao@opentrons.com>
Date: Fri, 20 Dec 2024 15:01:02 -0500
Subject: [PATCH 13/18] feat(protocol-designer): make timeline responsive
 (#17109)

* feat(protocol-designer): make timeline responsive
---
 .../src/assets/localization/en/button.json    |   2 +-
 .../ProtocolSteps/DraggableSidebar.tsx        | 119 ++++++++++++++++++
 .../ProtocolSteps/Timeline/AddStepButton.tsx  |  59 ++++++---
 .../Timeline/ConnectedStepInfo.tsx            |   3 +
 .../ProtocolSteps/Timeline/DraggableSteps.tsx |  18 ++-
 .../ProtocolSteps/Timeline/PresavedStep.tsx   |   9 +-
 .../ProtocolSteps/Timeline/StepContainer.tsx  |  32 +++--
 ...ubstepsToolbox.tsx => SubStepsToolbox.tsx} |   6 +-
 .../Timeline/TerminalItemStep.tsx             |  10 +-
 .../Timeline/TimelineToolbox.tsx              |  36 ++++--
 .../Timeline/__tests__/AddStepButton.test.tsx |  24 +++-
 .../Timeline/__tests__/StepContainer.test.tsx |   1 +
 .../__tests__/TimelineToolbox.test.tsx        |  16 ++-
 .../Designer/ProtocolSteps/Timeline/index.ts  |   2 +-
 .../Designer/ProtocolSteps/Timeline/utils.ts  |   1 +
 .../__tests__/DraggableSidebar.test.tsx       |  41 ++++++
 .../__tests__/ProtocolSteps.test.tsx          |  15 ++-
 .../pages/Designer/ProtocolSteps/index.tsx    |  20 +--
 18 files changed, 343 insertions(+), 71 deletions(-)
 create mode 100644 protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
 rename protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/{SubstepsToolbox.tsx => SubStepsToolbox.tsx} (96%)
 create mode 100644 protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/DraggableSidebar.test.tsx

diff --git a/protocol-designer/src/assets/localization/en/button.json b/protocol-designer/src/assets/localization/en/button.json
index bedb95b28c1..af643b9b815 100644
--- a/protocol-designer/src/assets/localization/en/button.json
+++ b/protocol-designer/src/assets/localization/en/button.json
@@ -1,5 +1,5 @@
 {
-  "add_step": "+ Add Step",
+  "add_step": "Add Step",
   "add_off_deck": "+ Off-deck labware",
   "cancel": "cancel",
   "close": "close",
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
new file mode 100644
index 00000000000..210abdec6ba
--- /dev/null
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
@@ -0,0 +1,119 @@
+import { useState, useRef, useCallback, useEffect } from 'react'
+import styled from 'styled-components'
+import {
+  Box,
+  COLORS,
+  DIRECTION_COLUMN,
+  DISPLAY_FLEX,
+  Flex,
+  JUSTIFY_SPACE_BETWEEN,
+} from '@opentrons/components'
+import { TimelineToolbox } from './Timeline/TimelineToolbox'
+
+const INITIAL_SIDEBAR_WIDTH = 276
+const MIN_SIDEBAR_WIDTH = 80
+const MAX_SIDEBAR_WIDTH = 350
+
+interface DraggableSidebarProps {
+  setTargetWidth: (width: number) => void
+}
+
+// Note (kk:2024/12/20 the designer will revisit responsive sidebar design in 2025
+// we will need to update the details to align with the updated design
+export function DraggableSidebar({
+  setTargetWidth,
+}: DraggableSidebarProps): JSX.Element {
+  const sidebarRef = useRef<HTMLDivElement>(null)
+  const [isResizing, setIsResizing] = useState(false)
+  const [sidebarWidth, setSidebarWidth] = useState(INITIAL_SIDEBAR_WIDTH)
+
+  const startResizing = useCallback(() => {
+    setIsResizing(true)
+  }, [])
+
+  const stopResizing = useCallback(() => {
+    setIsResizing(false)
+  }, [])
+
+  const resize = useCallback(
+    (mouseMoveEvent: MouseEvent) => {
+      if (isResizing && sidebarRef.current != null) {
+        const newWidth =
+          mouseMoveEvent.clientX -
+          sidebarRef.current.getBoundingClientRect().left
+
+        if (newWidth >= MIN_SIDEBAR_WIDTH && newWidth <= MAX_SIDEBAR_WIDTH) {
+          setSidebarWidth(newWidth)
+          setTargetWidth(newWidth)
+        }
+      }
+    },
+    [isResizing, setTargetWidth]
+  )
+
+  useEffect(() => {
+    window.addEventListener('mousemove', resize)
+    window.addEventListener('mouseup', stopResizing)
+
+    return () => {
+      window.removeEventListener('mousemove', resize)
+      window.removeEventListener('mouseup', stopResizing)
+    }
+  }, [resize, stopResizing])
+
+  return (
+    <Flex
+      flexDirection={DIRECTION_COLUMN}
+      justifyContent={JUSTIFY_SPACE_BETWEEN}
+      height="100%"
+    >
+      <SidebarContainer ref={sidebarRef} resizedWidth={sidebarWidth}>
+        <SidebarContent>
+          <TimelineToolbox sidebarWidth={sidebarWidth} />
+        </SidebarContent>
+        <SidebarResizer dragging={isResizing} onMouseDown={startResizing} />
+      </SidebarContainer>
+    </Flex>
+  )
+}
+
+const SidebarContainer = styled(Box)`
+  display: ${DISPLAY_FLEX};
+  flex-direction: ${DIRECTION_COLUMN};
+  border-right: 1px solid #ccc;
+  position: relative;
+  /* overflow: hidden; */
+  height: 100%;
+`
+
+const SidebarContent = styled(Flex)`
+  flex: 1;
+`
+
+interface SidebarResizerProps {
+  dragging: boolean
+}
+
+const SidebarResizer = styled(Flex)<SidebarResizerProps>`
+  user-select: none;
+  width: 2px;
+  cursor: ew-resize;
+  background-color: #ddd;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  padding: 0;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: ${COLORS.blue50}; /* Hover state */
+  }
+
+  ${props =>
+    props.dragging === true &&
+    `
+    background-color: ${COLORS.blue55}; /* Dragging state */
+  `}
+`
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx
index f9c2aa9d395..e9494eb6e44 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx
@@ -2,19 +2,27 @@ import { useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
+import { css } from 'styled-components'
+
 import {
-  useHoverTooltip,
-  TOOLTIP_TOP,
-  TOOLTIP_FIXED,
-  Tooltip,
+  ALIGN_CENTER,
+  BORDERS,
   COLORS,
   DIRECTION_COLUMN,
+  DISPLAY_FLEX,
   Flex,
-  POSITION_ABSOLUTE,
-  BORDERS,
+  Icon,
+  JUSTIFY_CENTER,
   NO_WRAP,
-  useOnClickOutside,
+  POSITION_ABSOLUTE,
   SecondaryButton,
+  SPACING,
+  StyledText,
+  TOOLTIP_FIXED,
+  TOOLTIP_TOP,
+  Tooltip,
+  useHoverTooltip,
+  useOnClickOutside,
 } from '@opentrons/components'
 import {
   ABSORBANCE_READER_TYPE,
@@ -23,6 +31,7 @@ import {
   TEMPERATURE_MODULE_TYPE,
   THERMOCYCLER_MODULE_TYPE,
 } from '@opentrons/shared-data'
+
 import {
   actions as stepsActions,
   getIsMultiSelectMode,
@@ -40,7 +49,6 @@ import {
   getEnableAbsorbanceReader,
   getEnableComment,
 } from '../../../../feature-flags/selectors'
-
 import { AddStepOverflowButton } from './AddStepOverflowButton'
 
 import type { MouseEvent } from 'react'
@@ -48,7 +56,11 @@ import type { ThunkDispatch } from 'redux-thunk'
 import type { BaseState } from '../../../../types'
 import type { StepType } from '../../../../form-types'
 
-export function AddStepButton(): JSX.Element {
+interface AddStepButtonProps {
+  hasText: boolean
+}
+
+export function AddStepButton({ hasText }: AddStepButtonProps): JSX.Element {
   const { t } = useTranslation(['tooltip', 'button'])
   const enableComment = useSelector(getEnableComment)
   const dispatch = useDispatch<ThunkDispatch<BaseState, any, any>>()
@@ -151,16 +163,8 @@ export function AddStepButton(): JSX.Element {
 
       {showStepOverflowMenu ? (
         <Flex
-          position={POSITION_ABSOLUTE}
-          zIndex={5}
+          css={STEP_OVERFLOW_MENU_STYLE}
           ref={overflowWrapperRef}
-          left="19.5rem"
-          whiteSpace={NO_WRAP}
-          bottom="4.2rem"
-          borderRadius={BORDERS.borderRadius8}
-          boxShadow="0px 1px 3px rgba(0, 0, 0, 0.2)"
-          backgroundColor={COLORS.white}
-          flexDirection={DIRECTION_COLUMN}
           onClick={(e: MouseEvent) => {
             e.preventDefault()
             e.stopPropagation()
@@ -176,6 +180,10 @@ export function AddStepButton(): JSX.Element {
         </Tooltip>
       )}
       <SecondaryButton
+        display={DISPLAY_FLEX}
+        justifyContent={JUSTIFY_CENTER}
+        alignItems={ALIGN_CENTER}
+        gridGap={SPACING.spacing10}
         width="100%"
         {...targetProps}
         id="AddStepButton"
@@ -184,8 +192,21 @@ export function AddStepButton(): JSX.Element {
         }}
         disabled={isStepCreationDisabled}
       >
-        {t('button:add_step')}
+        <Icon name="plus" size="1rem" />
+        {hasText ? <StyledText>{t('button:add_step')}</StyledText> : null}
       </SecondaryButton>
     </>
   )
 }
+
+const STEP_OVERFLOW_MENU_STYLE = css`
+  position: ${POSITION_ABSOLUTE};
+  z-index: 5;
+  right: -7.75rem;
+  white-space: ${NO_WRAP};
+  bottom: 4.2rem;
+  border-radius: ${BORDERS.borderRadius8};
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
+  background-color: ${COLORS.white};
+  flex-direction: ${DIRECTION_COLUMN};
+`
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/ConnectedStepInfo.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/ConnectedStepInfo.tsx
index 70cdf70a984..1a9ac29f33d 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/ConnectedStepInfo.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/ConnectedStepInfo.tsx
@@ -49,6 +49,7 @@ export interface ConnectedStepInfoProps {
   dragHovered?: boolean
   openedOverflowMenuId?: string | null
   setOpenedOverflowMenuId?: Dispatch<SetStateAction<string | null>>
+  sidebarWidth: number
 }
 
 export function ConnectedStepInfo(props: ConnectedStepInfoProps): JSX.Element {
@@ -58,6 +59,7 @@ export function ConnectedStepInfo(props: ConnectedStepInfoProps): JSX.Element {
     dragHovered = false,
     openedOverflowMenuId,
     setOpenedOverflowMenuId,
+    sidebarWidth,
   } = props
   const { t } = useTranslation('application')
   const dispatch = useDispatch<ThunkDispatch<BaseState, any, any>>()
@@ -227,6 +229,7 @@ export function ConnectedStepInfo(props: ConnectedStepInfoProps): JSX.Element {
           step.stepName || t(`stepType.${step.stepType}`)
         }`}
         dragHovered={dragHovered}
+        sidebarWidth={sidebarWidth}
       />
     </>
   )
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/DraggableSteps.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/DraggableSteps.tsx
index 02e1ad772fa..592cdec02f3 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/DraggableSteps.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/DraggableSteps.tsx
@@ -31,6 +31,7 @@ interface DragDropStepProps extends ConnectedStepItemProps {
   orderedStepIds: string[]
   openedOverflowMenuId?: string | null
   setOpenedOverflowMenuId?: Dispatch<SetStateAction<string | null>>
+  sidebarWidth: number
 }
 
 interface DropType {
@@ -46,6 +47,7 @@ function DragDropStep(props: DragDropStepProps): JSX.Element {
     stepNumber,
     openedOverflowMenuId,
     setOpenedOverflowMenuId,
+    sidebarWidth,
   } = props
   const stepRef = useRef<HTMLDivElement>(null)
 
@@ -94,6 +96,7 @@ function DragDropStep(props: DragDropStepProps): JSX.Element {
         stepNumber={stepNumber}
         stepId={stepId}
         dragHovered={hovered}
+        sidebarWidth={sidebarWidth}
       />
     </Box>
   )
@@ -102,9 +105,10 @@ function DragDropStep(props: DragDropStepProps): JSX.Element {
 interface DraggableStepsProps {
   orderedStepIds: StepIdType[]
   reorderSteps: (steps: StepIdType[]) => void
+  sidebarWidth: number
 }
 export function DraggableSteps(props: DraggableStepsProps): JSX.Element | null {
-  const { orderedStepIds, reorderSteps } = props
+  const { orderedStepIds, reorderSteps, sidebarWidth } = props
   const { t } = useTranslation('shared')
   const [openedOverflowMenuId, setOpenedOverflowMenuId] = useState<
     string | null
@@ -146,14 +150,21 @@ export function DraggableSteps(props: DraggableStepsProps): JSX.Element | null {
           orderedStepIds={orderedStepIds}
           openedOverflowMenuId={openedOverflowMenuId}
           setOpenedOverflowMenuId={setOpenedOverflowMenuId}
+          sidebarWidth={sidebarWidth}
         />
       ))}
-      <StepDragPreview />
+      <StepDragPreview sidebarWidth={sidebarWidth} />
     </Flex>
   )
 }
 
-function StepDragPreview(): JSX.Element | null {
+interface StepDragPreviewProps {
+  sidebarWidth: number
+}
+
+function StepDragPreview({
+  sidebarWidth,
+}: StepDragPreviewProps): JSX.Element | null {
   const [{ isDragging, itemType, item, currentOffset }] = useDrag(() => ({
     type: DND_TYPES.STEP_ITEM,
     collect: (monitor: DragLayerMonitor) => ({
@@ -182,6 +193,7 @@ function StepDragPreview(): JSX.Element | null {
       <StepContainer
         iconName={stepIconsByType[stepType]}
         title={stepName || ''}
+        sidebarWidth={sidebarWidth}
       />
     </Flex>
   )
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/PresavedStep.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/PresavedStep.tsx
index 9d0289ddb9c..346c296855f 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/PresavedStep.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/PresavedStep.tsx
@@ -10,7 +10,13 @@ import {
 } from '../../../../ui/steps'
 import { StepContainer } from './StepContainer'
 
-export function PresavedStep(): JSX.Element | null {
+interface PresavedStepProps {
+  sidebarWidth: number
+}
+
+export function PresavedStep({
+  sidebarWidth,
+}: PresavedStepProps): JSX.Element | null {
   const { t } = useTranslation('application')
   const presavedStepForm = useSelector(stepFormSelectors.getPresavedStepForm)
   const stepNumber = useSelector(stepFormSelectors.getOrderedStepIds).length + 1
@@ -39,6 +45,7 @@ export function PresavedStep(): JSX.Element | null {
       hovered={hovered}
       iconName={stepIconsByType[stepType]}
       title={`${stepNumber}. ${t(`stepType.${stepType}`)}`}
+      sidebarWidth={sidebarWidth}
     />
   )
 }
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
index 3db0802fbd5..d0534b234cf 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
@@ -12,6 +12,7 @@ import {
   Divider,
   Flex,
   Icon,
+  JUSTIFY_CENTER,
   JUSTIFY_SPACE_BETWEEN,
   JUSTIFY_START,
   OverflowBtn,
@@ -48,9 +49,12 @@ import type { BaseState } from '../../../../types'
 const STARTING_DECK_STATE = 'Starting deck'
 const FINAL_DECK_STATE = 'Ending deck'
 const PX_HEIGHT_TO_TOP_OF_CONTAINER = 32
+const PX_SIDEBAR_MIN_WIDTH_FOR_ICON = 179
+
 export interface StepContainerProps {
   title: string
   iconName: IconName
+  sidebarWidth: number
   openedOverflowMenuId?: string | null
   setOpenedOverflowMenuId?: Dispatch<SetStateAction<string | null>>
   stepId?: string
@@ -83,6 +87,7 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
     dragHovered = false,
     setOpenedOverflowMenuId,
     openedOverflowMenuId,
+    sidebarWidth,
   } = props
   const [top, setTop] = useState<number>(0)
   const menuRootRef = useRef<HTMLDivElement | null>(null)
@@ -91,6 +96,7 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
   const dispatch = useDispatch<ThunkDispatch<BaseState, any, any>>()
   const multiSelectItemIds = useSelector(getMultiSelectItemIds)
 
+  const hasText = sidebarWidth > PX_SIDEBAR_MIN_WIDTH_FOR_ICON
   let backgroundColor = isStartingOrEndingState ? COLORS.blue20 : COLORS.grey20
   let color = COLORS.black90
   if (selected) {
@@ -183,14 +189,14 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
 
   return (
     <>
-      {showDeleteConfirmation && (
+      {showDeleteConfirmation === true && (
         <ConfirmDeleteModal
           modalType={DELETE_STEP_FORM}
           onCancelClick={cancelDelete}
           onContinueClick={confirmDelete}
         />
       )}
-      {showMultiDeleteConfirmation && (
+      {showMultiDeleteConfirmation === true && (
         <ConfirmDeleteModal
           modalType={DELETE_MULTIPLE_STEP_FORMS}
           onContinueClick={confirmMultiDelete}
@@ -210,7 +216,7 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
           role="button"
           onDoubleClick={onDoubleClick}
           onClick={onClick}
-          padding={`${SPACING.spacing8} ${SPACING.spacing12}`}
+          padding={`${SPACING.spacing4} ${SPACING.spacing12}`}
           borderRadius={BORDERS.borderRadius8}
           width="100%"
           backgroundColor={backgroundColor}
@@ -221,15 +227,15 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
           <Flex
             justifyContent={JUSTIFY_SPACE_BETWEEN}
             alignItems={ALIGN_CENTER}
-            height="1.75rem"
+            height="1.9375rem"
           >
             <Flex
               alignItems={ALIGN_CENTER}
               gridGap={SPACING.spacing8}
-              justifyContent={JUSTIFY_START}
+              justifyContent={hasText ? JUSTIFY_START : JUSTIFY_CENTER}
               width="100%"
             >
-              {iconName && (
+              {iconName != null && (
                 <Icon
                   size="1.25rem"
                   name={iconName}
@@ -237,12 +243,14 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
                   minWidth="1.25rem"
                 />
               )}
-              <StyledText
-                desktopStyle="bodyDefaultRegular"
-                css={LINE_CLAMP_TEXT_STYLE(1)}
-              >
-                {capitalizeFirstLetterAfterNumber(title)}
-              </StyledText>
+              {hasText ? (
+                <StyledText
+                  desktopStyle="bodyDefaultRegular"
+                  css={LINE_CLAMP_TEXT_STYLE(1)}
+                >
+                  {capitalizeFirstLetterAfterNumber(title)}
+                </StyledText>
+              ) : null}
             </Flex>
             {selected && !isStartingOrEndingState ? (
               <OverflowBtn
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/SubstepsToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/SubStepsToolbox.tsx
similarity index 96%
rename from protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/SubstepsToolbox.tsx
rename to protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/SubStepsToolbox.tsx
index eb0a0ba835b..a7e272c3623 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/SubstepsToolbox.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/SubStepsToolbox.tsx
@@ -22,12 +22,12 @@ import { ThermocyclerProfileSubsteps } from './ThermocyclerProfileSubsteps'
 import type { SubstepIdentifier } from '../../../../steplist'
 import type { HoverOnSubstepAction } from '../../../../ui/steps'
 
-interface SubstepsToolboxProps {
+interface SubStepsToolboxProps {
   stepId: string
 }
 
-export function SubstepsToolbox(
-  props: SubstepsToolboxProps
+export function SubStepsToolbox(
+  props: SubStepsToolboxProps
 ): JSX.Element | null {
   const { stepId } = props
   const { t, i18n } = useTranslation([
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TerminalItemStep.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TerminalItemStep.tsx
index ffb13d31a7d..7c92c22376d 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TerminalItemStep.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TerminalItemStep.tsx
@@ -1,6 +1,7 @@
-import { useSelector, useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
+import { useSelector, useDispatch } from 'react-redux'
 import { useConditionalConfirm } from '@opentrons/components'
+
 import {
   getHoveredTerminalItemId,
   getSelectedTerminalItemId,
@@ -11,6 +12,7 @@ import {
   getCurrentFormIsPresaved,
   getCurrentFormHasUnsavedChanges,
 } from '../../../../step-forms/selectors'
+import { START_TERMINAL_ITEM_ID } from '../../../../steplist'
 import {
   CLOSE_STEP_FORM_WITH_CHANGES,
   CLOSE_UNSAVED_STEP_FORM,
@@ -32,10 +34,11 @@ import type { ThunkDispatch } from '../../../../types'
 
 export interface TerminalItemStepProps {
   id: TerminalItemId
+  sidebarWidth: number
 }
 
 export function TerminalItemStep(props: TerminalItemStepProps): JSX.Element {
-  const { id } = props
+  const { id, sidebarWidth } = props
   const { t } = useTranslation('protocol_steps')
   const hovered = useSelector(getHoveredTerminalItemId) === id
   const selected = useSelector(getSelectedTerminalItemId) === id
@@ -84,7 +87,7 @@ export function TerminalItemStep(props: TerminalItemStepProps): JSX.Element {
       <StepContainer
         {...{
           stepId: `TerminalItem_${id}`,
-          iconName: id === '__initial_setup__' ? 'ot-start' : 'ot-end',
+          iconName: id === START_TERMINAL_ITEM_ID ? 'ot-start' : 'ot-end',
           hovered,
           selected,
           title:
@@ -93,6 +96,7 @@ export function TerminalItemStep(props: TerminalItemStepProps): JSX.Element {
           onMouseEnter,
           onMouseLeave,
         }}
+        sidebarWidth={sidebarWidth}
       />
     </>
   )
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx
index 4f99cda8f54..7e7b0d83b6c 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
 import {
   DIRECTION_COLUMN,
   Flex,
+  OVERFLOW_WRAP_ANYWHERE,
   POSITION_RELATIVE,
   SPACING,
   StyledText,
@@ -27,7 +28,14 @@ import { DraggableSteps } from './DraggableSteps'
 import type { StepIdType } from '../../../../form-types'
 import type { ThunkDispatch } from '../../../../types'
 
-export const TimelineToolbox = (): JSX.Element => {
+const SIDEBAR_MIN_WIDTH_FOR_ICON = 179
+interface TimelineToolboxProps {
+  sidebarWidth: number
+}
+
+export const TimelineToolbox = ({
+  sidebarWidth,
+}: TimelineToolboxProps): JSX.Element => {
   const { t } = useTranslation('protocol_steps')
   const orderedStepIds = useSelector(stepFormSelectors.getOrderedStepIds)
   const formData = useSelector(getUnsavedForm)
@@ -64,30 +72,44 @@ export const TimelineToolbox = (): JSX.Element => {
       position={POSITION_RELATIVE}
       height="100%"
       maxHeight={`calc(100vh - ${NAV_BAR_HEIGHT_REM}rem - 2 * ${SPACING.spacing12})`}
-      width="19.5rem"
+      width={`${sidebarWidth / 16}rem`}
       title={
-        <StyledText desktopStyle="bodyLargeSemiBold">
+        <StyledText
+          desktopStyle="bodyLargeSemiBold"
+          overflowWrap={OVERFLOW_WRAP_ANYWHERE}
+        >
           {t('timeline')}
         </StyledText>
       }
       titlePadding={SPACING.spacing12}
       childrenPadding={SPACING.spacing12}
-      confirmButton={formData != null ? undefined : <AddStepButton />}
+      confirmButton={
+        formData != null ? undefined : (
+          <AddStepButton hasText={sidebarWidth > SIDEBAR_MIN_WIDTH_FOR_ICON} />
+        )
+      }
     >
       <Flex
         flexDirection={DIRECTION_COLUMN}
         gridGap={SPACING.spacing4}
         width="100%"
       >
-        <TerminalItemStep id={START_TERMINAL_ITEM_ID} />
+        <TerminalItemStep
+          id={START_TERMINAL_ITEM_ID}
+          sidebarWidth={sidebarWidth}
+        />
         <DraggableSteps
           orderedStepIds={orderedStepIds}
           reorderSteps={(stepIds: StepIdType[]) => {
             dispatch(steplistActions.reorderSteps(stepIds))
           }}
+          sidebarWidth={sidebarWidth}
+        />
+        <PresavedStep sidebarWidth={sidebarWidth} />
+        <TerminalItemStep
+          id={END_TERMINAL_ITEM_ID}
+          sidebarWidth={sidebarWidth}
         />
-        <PresavedStep />
-        <TerminalItemStep id={END_TERMINAL_ITEM_ID} />
       </Flex>
     </Toolbox>
   )
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/AddStepButton.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/AddStepButton.test.tsx
index 4b7b716b0c7..a2fcea0a7e2 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/AddStepButton.test.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/AddStepButton.test.tsx
@@ -1,4 +1,4 @@
-import { describe, it, vi, beforeEach } from 'vitest'
+import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import {
   HEATERSHAKER_MODULE_TYPE,
@@ -20,18 +20,25 @@ import {
 } from '../../../../../step-forms/selectors'
 import { getIsMultiSelectMode } from '../../../../../ui/steps'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../../../../../feature-flags/selectors')
 vi.mock('../../../../../ui/steps')
 vi.mock('../../../../../step-forms/selectors')
 
-const render = () => {
-  return renderWithProviders(<AddStepButton />, {
+const render = (props: ComponentProps<typeof AddStepButton>) => {
+  return renderWithProviders(<AddStepButton {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('AddStepButton', () => {
+  let props: ComponentProps<typeof AddStepButton>
+
   beforeEach(() => {
+    props = {
+      hasText: true,
+    }
     vi.mocked(getEnableComment).mockReturnValue(true)
     vi.mocked(getCurrentFormIsPresaved).mockReturnValue(false)
     vi.mocked(getIsMultiSelectMode).mockReturnValue(false)
@@ -73,8 +80,8 @@ describe('AddStepButton', () => {
   })
 
   it('renders add step button and clicking on it renders the overflow menu with all modules', () => {
-    render()
-    fireEvent.click(screen.getByText('+ Add Step'))
+    render(props)
+    fireEvent.click(screen.getByText('Add Step'))
     screen.getByText('Comment')
     screen.getByText('Transfer')
     screen.getByText('Mix')
@@ -84,4 +91,11 @@ describe('AddStepButton', () => {
     screen.getByText('Temperature')
     screen.getByText('Magnet')
   })
+
+  it('should not render texts if hasText is false', () => {
+    props.hasText = false
+    render(props)
+    const text = screen.queryByText('Add Step')
+    expect(text).toBeNull()
+  })
 })
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepContainer.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepContainer.test.tsx
index 32df562e61a..4933dffe3ed 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepContainer.test.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepContainer.test.tsx
@@ -32,6 +32,7 @@ describe('StepContainer', () => {
       stepId: 'mockStepId',
       hasError: false,
       isStepAfterError: false,
+      sidebarWidth: 350,
     }
     vi.mocked(StepOverflowMenu).mockReturnValue(
       <div>mock StepOverflowMenu</div>
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/TimelineToolbox.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/TimelineToolbox.test.tsx
index c4ae078c572..f6b11ce36a5 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/TimelineToolbox.test.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/TimelineToolbox.test.tsx
@@ -6,25 +6,32 @@ import {
   getOrderedStepIds,
   getUnsavedForm,
 } from '../../../../../step-forms/selectors'
-import { TimelineToolbox } from '../TimelineToolbox'
 import { TerminalItemStep } from '../TerminalItemStep'
 import { DraggableSteps } from '../DraggableSteps'
 import { PresavedStep } from '../PresavedStep'
 import { AddStepButton } from '../AddStepButton'
+import { TimelineToolbox } from '../TimelineToolbox'
+
+import type { ComponentProps } from 'react'
 
 vi.mock('../AddStepButton')
 vi.mock('../DraggableSteps')
 vi.mock('../PresavedStep')
 vi.mock('../TerminalItemStep')
 vi.mock('../../../../../step-forms/selectors')
-const render = () => {
-  return renderWithProviders(<TimelineToolbox />, {
+const render = (props: ComponentProps<typeof TimelineToolbox>) => {
+  return renderWithProviders(<TimelineToolbox {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('TimelineToolbox', () => {
+  let props: ComponentProps<typeof TimelineToolbox>
+
   beforeEach(() => {
+    props = {
+      sidebarWidth: 350,
+    }
     vi.mocked(getOrderedStepIds).mockReturnValue(['mock1Step'])
     vi.mocked(getUnsavedForm).mockReturnValue(null)
     vi.mocked(TerminalItemStep).mockReturnValue(
@@ -34,8 +41,9 @@ describe('TimelineToolbox', () => {
     vi.mocked(PresavedStep).mockReturnValue(<div>mock PresavedStep</div>)
     vi.mocked(AddStepButton).mockReturnValue(<div>mock AddStepButton</div>)
   })
+
   it('renders 2 terminal item steps, a draggable step and presaved step with toolbox title', () => {
-    render()
+    render(props)
     screen.getByText('Timeline')
     screen.getByText('mock AddStepButton')
     screen.getByText('mock PresavedStep')
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/index.ts b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/index.ts
index 2b4945b756b..14a0f0058af 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/index.ts
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/index.ts
@@ -1,2 +1,2 @@
-export * from './SubstepsToolbox'
+export * from './SubStepsToolbox'
 export * from './TimelineToolbox'
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts
index 2d918b7790f..b12d5598ca1 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts
@@ -1,6 +1,7 @@
 import round from 'lodash/round'
 import uniq from 'lodash/uniq'
 import { UAParser } from 'ua-parser-js'
+
 import type { StepIdType } from '../../../../form-types'
 
 export const capitalizeFirstLetterAfterNumber = (title: string): string =>
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/DraggableSidebar.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/DraggableSidebar.test.tsx
new file mode 100644
index 00000000000..4ea6b03d2ab
--- /dev/null
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/DraggableSidebar.test.tsx
@@ -0,0 +1,41 @@
+import { describe, it, vi, beforeEach } from 'vitest'
+import { screen } from '@testing-library/react'
+
+import { i18n } from '../../../../assets/localization'
+import { renderWithProviders } from '../../../../__testing-utils__'
+import { DraggableSidebar } from '../DraggableSidebar'
+
+import type { ComponentProps } from 'react'
+
+vi.mock('../../../../step-forms/selectors')
+vi.mock('../../../../ui/steps/selectors')
+vi.mock('../../../../feature-flags/selectors')
+vi.mock('../Timeline/DraggableSteps')
+vi.mock('../Timeline/PresavedStep')
+vi.mock('../Timeline/AddStepButton')
+
+const mockSetTargetWidth = vi.fn()
+
+const render = (props: ComponentProps<typeof DraggableSidebar>) => {
+  return renderWithProviders(<DraggableSidebar {...props} />, {
+    i18nInstance: i18n,
+  })
+}
+
+describe('DraggableSidebar', () => {
+  let props: ComponentProps<typeof DraggableSidebar>
+  beforeEach(() => {
+    props = {
+      setTargetWidth: mockSetTargetWidth,
+    }
+  })
+
+  it('renders initial timeline toolbox', () => {
+    render(props)
+    screen.getByText('Timeline')
+    screen.getByText('Starting deck')
+    screen.getByText('Ending deck')
+  })
+
+  // ToDo (kk: 2024/12/12): Add more tests
+})
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx
index 9ff98460fc6..31c1c93eafc 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx
@@ -19,8 +19,10 @@ import {
 import { getEnableHotKeysDisplay } from '../../../../feature-flags/selectors'
 import { DeckSetupContainer } from '../../DeckSetup'
 import { OffDeck } from '../../Offdeck'
+import { SubStepsToolbox } from '../Timeline'
+import { DraggableSidebar } from '../DraggableSidebar'
 import { ProtocolSteps } from '..'
-import { SubstepsToolbox, TimelineToolbox } from '../Timeline'
+
 import type { SavedStepFormState } from '../../../../step-forms'
 
 vi.mock('../../Offdeck')
@@ -31,6 +33,7 @@ vi.mock('../StepForm')
 vi.mock('../../DeckSetup')
 vi.mock('../StepSummary.tsx')
 vi.mock('../Timeline')
+vi.mock('../DraggableSidebar')
 vi.mock('../../../../feature-flags/selectors')
 vi.mock('../../../../file-data/selectors')
 vi.mock('../../../../organisms/Alerts')
@@ -64,7 +67,9 @@ describe('ProtocolSteps', () => {
       timeline: [],
       errors: [],
     })
-    vi.mocked(TimelineToolbox).mockReturnValue(<div>mock TimelineToolbox</div>)
+    vi.mocked(DraggableSidebar).mockReturnValue(
+      <div>mock DraggableSidebar</div>
+    )
     vi.mocked(DeckSetupContainer).mockReturnValue(
       <div>mock DeckSetupContainer</div>
     )
@@ -72,7 +77,7 @@ describe('ProtocolSteps', () => {
     vi.mocked(OffDeck).mockReturnValue(<div>mock OffDeck</div>)
     vi.mocked(getUnsavedForm).mockReturnValue(null)
     vi.mocked(getSelectedSubstep).mockReturnValue(null)
-    vi.mocked(SubstepsToolbox).mockReturnValue(<div>mock SubstepsToolbox</div>)
+    vi.mocked(SubStepsToolbox).mockReturnValue(<div>mock SubStepsToolbox</div>)
     vi.mocked(getEnableHotKeysDisplay).mockReturnValue(true)
     vi.mocked(getSavedStepForms).mockReturnValue(
       MOCK_STEP_FORMS as SavedStepFormState
@@ -84,7 +89,7 @@ describe('ProtocolSteps', () => {
 
   it('renders each component in ProtocolSteps', () => {
     render()
-    screen.getByText('mock TimelineToolbox')
+    screen.getByText('mock DraggableSidebar')
     screen.getByText('mock DeckSetupContainer')
   })
 
@@ -98,7 +103,7 @@ describe('ProtocolSteps', () => {
   it('renders the substepToolbox when selectedSubstep is not null', () => {
     vi.mocked(getSelectedSubstep).mockReturnValue('mockId')
     render()
-    screen.getByText('mock SubstepsToolbox')
+    screen.getByText('mock SubStepsToolbox')
   })
 
   it('renders the hot keys display', () => {
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
index 97f337c2dcd..38f4979b0cf 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
+
 import {
   ALIGN_CENTER,
   COLORS,
@@ -10,6 +11,7 @@ import {
   JUSTIFY_CENTER,
   JUSTIFY_SPACE_BETWEEN,
   POSITION_FIXED,
+  POSITION_RELATIVE,
   SPACING,
   StyledText,
   Tag,
@@ -30,7 +32,7 @@ import {
 } from '../../../ui/steps/selectors'
 import { DeckSetupContainer } from '../DeckSetup'
 import { OffDeck } from '../Offdeck'
-import { TimelineToolbox, SubstepsToolbox } from './Timeline'
+import { SubStepsToolbox } from './Timeline'
 import { StepForm } from './StepForm'
 import { StepSummary } from './StepSummary'
 import { BatchEditToolbox } from './BatchEditToolbox'
@@ -39,6 +41,7 @@ import {
   getRobotStateTimeline,
 } from '../../../file-data/selectors'
 import { TimelineAlerts } from '../../../organisms'
+import { DraggableSidebar } from './DraggableSidebar'
 
 const CONTENT_MAX_WIDTH = '44.6704375rem'
 
@@ -56,6 +59,7 @@ export function ProtocolSteps(): JSX.Element {
   const [deckView, setDeckView] = useState<
     typeof leftString | typeof rightString
   >(leftString)
+  const [targetWidth, setTargetWidth] = useState<number>(350)
 
   const currentHoveredStepId = useSelector(getHoveredStepId)
   const currentSelectedStepId = useSelector(getSelectedStepId)
@@ -82,15 +86,17 @@ export function ProtocolSteps(): JSX.Element {
       width="100%"
       padding={SPACING.spacing12}
       gridGap={SPACING.spacing16}
-      justifyContent={JUSTIFY_SPACE_BETWEEN}
     >
-      <TimelineToolbox />
+      <Flex flex="1" height="100%">
+        <DraggableSidebar setTargetWidth={setTargetWidth} />
+      </Flex>
       <Flex
         alignItems={ALIGN_CENTER}
         flexDirection={DIRECTION_COLUMN}
         gridGap={SPACING.spacing16}
-        width="100%"
+        flex="2.85"
         paddingTop={showTimelineAlerts ? '0' : SPACING.spacing24}
+        position={POSITION_RELATIVE}
       >
         <Flex
           flexDirection={DIRECTION_COLUMN}
@@ -142,9 +148,9 @@ export function ProtocolSteps(): JSX.Element {
         {enableHoyKeyDisplay ? (
           <Flex
             position={POSITION_FIXED}
-            left="21rem"
+            left={`calc(1.5rem + ${targetWidth}px)`}
             bottom="0.75rem"
-            gridGap={SPACING.spacing6}
+            gridGap={SPACING.spacing4}
             flexDirection={DIRECTION_COLUMN}
           >
             <Tag
@@ -166,7 +172,7 @@ export function ProtocolSteps(): JSX.Element {
         ) : null}
       </Flex>
       {formData == null && selectedSubstep ? (
-        <SubstepsToolbox stepId={selectedSubstep} />
+        <SubStepsToolbox stepId={selectedSubstep} />
       ) : null}
       <StepForm />
       {isMultiSelectMode ? <BatchEditToolbox /> : null}

From 03fbfc894b111a62b3faa0ac62676270ab0e9b9c Mon Sep 17 00:00:00 2001
From: koji <koji.kanao@opentrons.com>
Date: Mon, 23 Dec 2024 16:44:39 -0500
Subject: [PATCH 14/18] chore(app): update import statements for react (#17170)

* chore(app): update import statements for react
---
 app/src/App/Navbar.tsx                        |  3 +-
 app/src/App/__mocks__/portal.tsx              |  4 +--
 app/src/App/__tests__/hooks.test.tsx          |  4 +--
 app/src/App/index.tsx                         |  5 ++--
 app/src/App/types.ts                          |  4 +--
 app/src/LocalizationProvider.tsx              |  4 +--
 .../__testing-utils__/renderWithProviders.tsx | 13 +++++---
 .../__tests__/InlineNotification.test.tsx     |  7 +++--
 app/src/atoms/InlineNotification/index.tsx    |  6 ++--
 .../__tests__/InstrumentContainer.test.tsx    |  7 +++--
 .../Link/__tests__/ExternalLink.test.tsx      |  7 +++--
 .../__tests__/ProgressBar.test.tsx            |  7 +++--
 app/src/atoms/ProgressBar/index.tsx           |  4 +--
 app/src/atoms/SelectField/index.tsx           |  6 ++--
 .../Skeleton/__tests__/Skeleton.test.tsx      |  5 ++--
 .../Slideout/__tests__/Slideout.test.tsx      |  7 +++--
 app/src/atoms/Slideout/index.tsx              |  8 +++--
 .../AlphanumericKeyboard/index.tsx            |  4 ++-
 .../SoftwareKeyboard/IndividualKey/index.tsx  |  6 ++--
 .../NumericalKeyboard/index.tsx               |  5 ++--
 .../__tests__/StatusLabel.test.tsx            |  7 +++--
 .../StepMeter/__tests__/StepMeter.test.tsx    |  7 +++--
 app/src/atoms/buttons/BackButton.tsx          |  5 ++--
 .../atoms/buttons/FloatingActionButton.tsx    |  4 +--
 app/src/atoms/buttons/IconButton.tsx          |  7 +++--
 app/src/atoms/buttons/MediumButton.tsx        |  6 ++--
 app/src/atoms/buttons/SmallButton.tsx         |  7 +++--
 app/src/atoms/buttons/SubmitPrimaryButton.tsx |  5 ++--
 app/src/atoms/buttons/TextOnlyButton.tsx      |  7 +++--
 app/src/atoms/buttons/ToggleButton.tsx        | 10 +++----
 .../buttons/__tests__/BackButton.test.tsx     |  5 ++--
 .../__tests__/FloatingActionButton.test.tsx   |  7 +++--
 .../buttons/__tests__/MediumButton.test.tsx   |  7 +++--
 .../__tests__/QuaternaryButton.test.tsx       |  7 +++--
 .../buttons/__tests__/SmallButton.test.tsx    |  7 +++--
 .../__tests__/SubmitPrimaryButton.test.tsx    |  6 ++--
 .../buttons/__tests__/TertiaryButton.test.tsx |  7 +++--
 .../buttons/__tests__/ToggleButton.test.tsx   |  7 +++--
 app/src/atoms/structure/Divider.tsx           |  4 +--
 app/src/atoms/structure/Line.tsx              |  4 +--
 .../structure/__tests__/Divider.test.tsx      |  7 +++--
 .../atoms/structure/__tests__/Line.test.tsx   |  7 +++--
 .../__tests__/BackgroundOverlay.test.tsx      |  7 +++--
 app/src/molecules/BackgroundOverlay/index.tsx |  8 ++---
 .../CardButton/__tests__/CardButton.test.tsx  |  7 +++--
 app/src/molecules/Command/CommandText.tsx     |  8 ++---
 .../FileUpload/__tests__/FileUpload.test.tsx  |  7 +++--
 .../__tests__/GenericWizardTile.test.tsx      |  7 +++--
 app/src/molecules/GenericWizardTile/index.tsx | 11 +++----
 .../InProgressModal/InProgressModal.tsx       |  5 ++--
 .../__tests__/InProgressModal.test.tsx        |  7 +++--
 .../__tests__/InfoMessage.test.tsx            |  7 +++--
 app/src/molecules/InstrumentCard/index.tsx    |  5 ++--
 .../InterventionContent/index.tsx             |  9 +++---
 .../molecules/InterventionModal/OneColumn.tsx |  6 ++--
 .../OneColumnOrTwoColumn.tsx                  |  8 ++---
 .../molecules/InterventionModal/TwoColumn.tsx |  6 ++--
 .../__tests__/InterventionModal.test.tsx      |  6 ++--
 .../ModalContentOneColSimpleButtons.test.tsx  |  5 ++--
 app/src/molecules/InterventionModal/index.tsx | 10 +++----
 .../InterventionModal/story-utils/StandIn.tsx |  4 +--
 .../JogControls/ControlContainer.tsx          |  5 ++--
 .../molecules/JogControls/StepSizeControl.tsx |  6 ++--
 .../MiniCard/__tests__/MiniCard.test.tsx      |  7 +++--
 app/src/molecules/MiniCard/index.tsx          |  4 +--
 .../ModuleIcon/__tests__/ModuleIcon.test.tsx  |  6 ++--
 .../ModuleInfo/__tests__/ModuleInfo.test.tsx  |  7 +++--
 .../NavTab/__tests__/NavTab.test.tsx          |  7 +++--
 app/src/molecules/NavTab/index.tsx            |  4 ++-
 .../__tests__/ODDBackButton.test.tsx          |  7 +++--
 app/src/molecules/ODDBackButton/index.tsx     |  6 ++--
 .../NeedHelpLink.tsx                          |  5 ++--
 app/src/molecules/OddModal/OddModal.tsx       |  8 ++---
 .../OddModal/__tests__/OddModal.test.tsx      |  7 +++--
 .../__tests__/OddModalHeader.test.tsx         |  7 +++--
 app/src/molecules/OddModal/types.ts           |  3 +-
 .../__tests__/OffsetVector.test.tsx           |  7 +++--
 app/src/molecules/OffsetVector/index.tsx      |  4 +--
 .../SimpleWizardBodyContent.tsx               |  5 ++--
 .../SimpleWizardInProgressBody.tsx            |  7 +++--
 .../__tests__/SimpleWizardBody.test.tsx       |  7 +++--
 app/src/molecules/SimpleWizardBody/index.tsx  |  9 +++---
 .../__tests__/useToggleGroup.test.tsx         |  8 ++---
 app/src/molecules/UnorderedList/index.tsx     |  5 ++--
 .../__tests__/UpdateBanner.test.tsx           |  7 +++--
 .../__tests__/WizardHeader.test.tsx           |  7 +++--
 .../WizardRequiredEquipmentList/index.tsx     |  4 +--
 app/src/molecules/modals/BottomButtonBar.tsx  |  4 +--
 .../molecules/modals/ScrollableAlertModal.tsx |  5 ++--
 .../AdvancedSettings/OT2AdvancedSettings.tsx  |  4 +--
 .../AdvancedSettings/OverridePathToPython.tsx |  4 +--
 .../AdvancedSettings/UpdatedChannel.tsx       |  4 +--
 .../__tests__/ConnectRobotSlideout.test.tsx   |  9 +++---
 .../__tests__/PreviousVersionModal.test.tsx   |  7 +++--
 .../__tests__/CalibrateDeck.test.tsx          |  6 ++--
 .../__tests__/CalibratePipetteOffset.test.tsx | 15 +++++-----
 .../TipLengthCalibrationInfoBox.tsx           |  5 ++--
 .../AskForCalibrationBlockModal.test.tsx      |  7 +++--
 .../__tests__/CalibrateTipLength.test.tsx     |  6 ++--
 .../__tests__/CalibrationError.test.tsx       |  2 +-
 .../CompleteConfirmation.tsx                  |  7 +++--
 .../Introduction/__tests__/Body.test.tsx      |  5 ++--
 .../__tests__/Introduction.test.tsx           |  7 ++---
 .../__tests__/ChooseTipRack.test.tsx          |  6 ++--
 .../__tests__/ChosenTipRackRender.test.tsx    |  7 +++--
 .../__tests__/CompleteConfirmation.test.tsx   |  5 ++--
 .../__tests__/ConfirmCrashRecovery.test.tsx   |  5 ++--
 .../__tests__/ConfirmExit.test.tsx            |  7 ++---
 .../__tests__/DeckSetup.test.tsx              |  6 ++--
 .../__tests__/MeasureNozzle.test.tsx          |  5 ++--
 .../__tests__/MeasureTip.test.tsx             |  7 ++---
 .../__tests__/SaveXYPoint.test.tsx            |  7 ++---
 .../__tests__/SaveZPoint.test.tsx             |  7 ++---
 .../__tests__/TipConfirmation.test.tsx        |  5 ++--
 .../__tests__/TipPickUp.test.tsx              |  7 ++---
 .../__tests__/CalibrationStatusCard.test.tsx  |  7 +++--
 .../CalibrationHealthCheckResults.test.tsx    |  7 +++--
 .../__tests__/CalibrationResult.test.tsx      |  7 +++--
 .../__tests__/RenderMountInformation.test.tsx |  7 +++--
 .../__tests__/RenderResult.test.tsx           |  7 +++--
 .../__tests__/CheckCalibration.test.tsx       |  7 +++--
 .../__tests__/ChooseProtocolSlideout.test.tsx |  5 ++--
 .../__tests__/ChooseRobotSlideout.test.tsx    |  6 ++--
 .../__tests__/FileCard.test.tsx               |  4 +--
 .../ChooseRobotToRunProtocolSlideout.test.tsx |  4 +--
 .../Devices/ChangePipette/ConfirmPipette.tsx  |  8 ++---
 .../Devices/ChangePipette/InstructionStep.tsx |  5 ++--
 .../ChangePipette/PipetteSelection.tsx        |  5 ++--
 .../__tests__/ChangePipette.test.tsx          |  6 ++--
 .../__tests__/CheckPipettesButton.test.tsx    |  7 +++--
 .../__tests__/ClearDeckModal.test.tsx         |  7 +++--
 .../__tests__/ConfirmPipette.test.tsx         |  6 ++--
 .../__tests__/ExitModal.test.tsx              |  7 +++--
 .../__tests__/InstructionStep.test.tsx        |  7 +++--
 .../__tests__/Instructions.test.tsx           |  7 +++--
 .../__tests__/LevelPipette.test.tsx           |  7 +++--
 .../__tests__/PipetteSelection.test.tsx       |  7 +++--
 .../ConfigurePipette/ConfigFormGroup.tsx      |  6 ++--
 .../__tests__/ConfigFormResetButton.test.tsx  |  7 +++--
 .../__tests__/ConfigFormSubmitButton.test.tsx |  7 +++--
 .../__tests__/ConfigurePipette.test.tsx       |  8 ++---
 .../__tests__/ErrorRecoveryBanner.test.tsx    |  5 ++--
 .../__tests__/AboutGripperSlideout.test.tsx   |  7 +++--
 .../__tests__/GripperCard.test.tsx            |  7 +++--
 .../HistoricalProtocolRunOverflowMenu.tsx     | 12 ++++----
 .../__tests__/AboutPipetteSlideout.test.tsx   |  7 +++--
 .../__tests__/FlexPipetteCard.test.tsx        |  8 ++---
 .../__tests__/PipetteCard.test.tsx            |  6 ++--
 .../__tests__/PipetteOverflowMenu.test.tsx    |  8 ++---
 .../PipetteSettingsSlideout.test.tsx          |  8 ++---
 .../Devices/ProtocolRun/BackToTopButton.tsx   |  5 ++--
 .../Devices/ProtocolRun/EmptySetupStep.tsx    |  7 +++--
 .../ProtocolAnalysisErrorBanner.test.tsx      |  9 +++---
 .../RunHeaderContent/ActionButton/index.tsx   |  5 ++--
 .../RunHeaderContent/LabeledValue.tsx         |  6 ++--
 .../RunHeaderContent/index.tsx                |  7 ++---
 .../HeaterShakerIsRunningModal.test.tsx       |  8 ++---
 .../__tests__/HeaterShakerModuleCard.test.tsx |  7 +++--
 .../__tests__/hooks.test.tsx                  |  6 ++--
 .../__tests__/ConfirmCancelModal.test.tsx     |  6 ++--
 .../ProtocolAnalysisErrorModal.test.tsx       |  9 +++---
 .../__tests__/ProtocolDropTipModal.test.tsx   |  6 ++--
 .../modals/__tests__/RunFailedModal.test.tsx  |  9 +++---
 .../__tests__/ProtocolRunHeader.test.tsx      |  7 +++--
 .../__tests__/LabwareListItem.test.tsx        |  5 ++--
 .../__tests__/OffDeckLabwareList.test.tsx     |  5 ++--
 .../__tests__/SecureLabwareModal.test.tsx     |  7 +++--
 .../__tests__/SetupLabwareList.test.tsx       |  5 ++--
 .../__tests__/SetupLabwareMap.test.tsx        |  4 +--
 .../__tests__/CurrentOffsetsTable.test.tsx    |  6 ++--
 .../__tests__/HowLPCWorksModal.test.tsx       |  7 +++--
 .../__tests__/SetupLiquids.test.tsx           |  7 +++--
 .../__tests__/SetupLiquidsList.test.tsx       |  6 ++--
 .../__tests__/SetupLiquidsMap.test.tsx        |  6 ++--
 .../__tests__/NotConfiguredModal.test.tsx     |  6 ++--
 .../__tests__/SetupFixtureList.test.tsx       |  6 ++--
 .../__tests__/SetupModulesAndDeck.test.tsx    |  7 +++--
 .../__tests__/SetupModulesList.test.tsx       |  6 ++--
 .../__tests__/SetupModulesMap.test.tsx        |  8 ++---
 .../Desktop/Devices/ProtocolRun/SetupStep.tsx |  9 +++---
 .../__tests__/EmptySetupStep.test.tsx         |  7 +++--
 .../__tests__/LabwareInfoOverlay.test.tsx     |  7 +++--
 .../ProtocolRunModuleControls.test.tsx        |  7 ++---
 .../ProtocolRunRuntimeParameters.test.tsx     |  8 ++---
 .../__tests__/SetupCalibrationItem.test.tsx   |  5 ++--
 .../SetupFlexPipetteCalibrationItem.test.tsx  |  7 ++---
 .../SetupPipetteCalibrationItem.test.tsx      |  9 +++---
 .../__tests__/SetupRobotCalibration.test.tsx  |  5 ++--
 .../ProtocolRun/__tests__/SetupStep.test.tsx  |  4 +--
 .../SetupTipLengthCalibrationButton.test.tsx  |  6 ++--
 .../__tests__/DeviceResetModal.test.tsx       |  4 +--
 .../RobotSettings/AdvancedTab/DeviceReset.tsx |  5 ++--
 .../AdvancedTab/DisplayRobotName.tsx          |  5 ++--
 .../RobotSettings/AdvancedTab/FactoryMode.tsx |  5 ++--
 .../AdvancedTab/GantryHoming.tsx              |  4 +--
 .../AdvancedTab/LegacySettings.tsx            |  4 +--
 .../AdvancedTab/ShortTrashBin.tsx             |  4 +--
 .../AdvancedTab/UsageSettings.tsx             |  4 +--
 .../AdvancedTab/UseOlderAspirateBehavior.tsx  |  4 +--
 .../EnableErrorRecoveryMode.test.tsx          |  8 ++---
 .../__tests__/EnableStatusLight.test.tsx      |  7 +++--
 .../__tests__/OpenJupyterControl.test.tsx     |  7 +++--
 .../__tests__/Troubleshooting.test.tsx        |  6 ++--
 .../ConnectNetwork/ConnectModal/FormRow.tsx   |  5 ++--
 .../ConnectNetwork/SelectSsid/index.tsx       |  5 ++--
 .../RobotSettings/ConnectNetwork/types.ts     |  5 ++--
 .../Devices/RobotSettings/SettingToggle.tsx   |  5 ++--
 .../RobotUpdateProgressModal.test.tsx         |  8 ++---
 .../__tests__/UpdateRobotModal.test.tsx       |  6 ++--
 .../__tests__/useRobotUpdateInfo.test.tsx     |  4 +--
 .../Desktop/Devices/RobotStatusHeader.tsx     |  4 +--
 .../Desktop/Devices/RunPreview/index.tsx      |  6 ++--
 .../CalibrationStatusBanner.test.tsx          |  9 +++---
 .../ConnectionTroubleshootingModal.test.tsx   |  7 +++--
 .../Devices/__tests__/EstopBanner.test.tsx    |  7 +++--
 .../__tests__/HistoricalProtocolRun.test.tsx  |  6 ++--
 ...HistoricalProtocolRunOverflowMenu.test.tsx |  6 ++--
 .../Devices/__tests__/RobotCard.test.tsx      |  6 ++--
 .../__tests__/RobotOverflowMenu.test.tsx      |  7 +++--
 .../Devices/__tests__/RobotOverview.test.tsx  |  8 ++---
 .../RobotOverviewOverflowMenu.test.tsx        |  9 +++---
 .../__tests__/RobotStatusHeader.test.tsx      |  6 ++--
 .../__tests__/useCalibrationTaskList.test.tsx |  4 +--
 .../__tests__/useDeckCalibrationData.test.tsx |  9 +++---
 .../usePipetteOffsetCalibration.test.tsx      |  4 +--
 .../usePipetteOffsetCalibrations.test.tsx     |  5 ++--
 .../__tests__/useSyncRobotClock.test.tsx      |  5 ++--
 .../useTipLengthCalibrations.test.tsx         |  5 ++--
 .../useTrackCreateProtocolRunEvent.test.tsx   |  4 +--
 .../HowCalibrationWorksModal.test.tsx         |  9 +++---
 .../AddCustomLabwareSlideout.test.tsx         |  9 +++---
 .../CustomLabwareOverflowMenu.test.tsx        |  6 ++--
 .../__tests__/LabwareCard.test.tsx            |  6 ++--
 .../__tests__/ExpandingTitle.test.tsx         |  7 +++--
 .../__tests__/LabeledValue.test.tsx           |  7 +++--
 .../__tests__/Dimensions.test.tsx             |  7 +++--
 .../LabwareDetails/__tests__/Gallery.test.tsx |  7 +++--
 .../__tests__/LabwareDetails.test.tsx         |  7 +++--
 .../__tests__/ManufacturerDetails.test.tsx    |  7 +++--
 .../__tests__/WellCount.test.tsx              |  7 +++--
 .../__tests__/WellDimensions.test.tsx         |  7 +++--
 .../__tests__/WellProperties.test.tsx         |  7 +++--
 .../__tests__/WellSpacing.test.tsx            |  7 +++--
 .../ProtocolAnalysisStale.tsx                 |  7 +++--
 .../ProtocolAnalysisFailure.test.tsx          |  5 ++--
 .../__tests__/ProtocolParameters.test.tsx     |  6 ++--
 .../__tests__/ProtocolDetails.test.tsx        |  4 +--
 .../__tests__/ProtocolLabwareDetails.test.tsx |  6 ++--
 .../__tests__/ProtocolLiquidsDetails.test.tsx |  6 ++--
 .../RobotConfigurationDetails.test.tsx        |  9 +++---
 .../ConfirmDeleteProtocolModal.tsx            |  7 +++--
 .../ProtocolsLanding/ProtocolOverflowMenu.tsx | 18 +++++------
 .../ConfirmDeleteProtocolModal.test.tsx       |  9 +++---
 .../__tests__/ProtocolList.test.tsx           |  7 +++--
 .../ProtocolsLanding/__tests__/hooks.test.tsx | 14 ++++-----
 .../CalibrationDataDownload.tsx               |  5 ++--
 .../__tests__/ModuleCalibrationItems.test.tsx |  8 ++---
 .../ModuleCalibrationOverflowMenu.test.tsx    |  6 ++--
 .../__tests__/OverflowMenu.test.tsx           |  6 ++--
 .../PipetteOffsetCalibrationItems.test.tsx    |  6 ++--
 .../TipLengthCalibrationItems.test.tsx        |  7 +++--
 .../__tests__/CalibrationHealthCheck.test.tsx |  6 ++--
 .../RobotSettingsDeckCalibration.test.tsx     |  4 +--
 .../RobotSettingsGripperCalibration.test.tsx  |  6 ++--
 .../RobotSettingsModuleCalibration.test.tsx   |  7 +++--
 ...tSettingsPipetteOffsetCalibration.test.tsx |  6 ++--
 .../__tests__/InterventionTicks.test.tsx      |  7 +++--
 .../__tests__/RunProgressMeter.test.tsx       |  6 ++--
 .../hooks/useRunProgressCopy.tsx              |  4 +--
 .../Desktop/RunProgressMeter/index.tsx        |  5 ++--
 .../SendProtocolToFlexSlideout.test.tsx       |  6 ++--
 .../__tests__/UpdateAppModal.test.tsx         |  8 ++---
 .../__tests__/UpdateRobotBanner.test.tsx      |  7 +++--
 .../Desktop/UpdateRobotBanner/index.tsx       |  4 +--
 .../__tests__/AddFixtureModal.test.tsx        |  8 ++---
 ...kConfigurationDiscardChangesModal.test.tsx |  7 +++--
 ...DeckFixtureSetupInstructionsModal.test.tsx |  9 +++---
 .../DeviceDetailsDeckConfiguration.test.tsx   |  6 ++--
 .../__tests__/DropTipWizard.test.tsx          | 11 +++----
 .../__tests__/DropTipWizardHeader.test.tsx    |  6 ++--
 .../__tests__/EstopMissingModal.test.tsx      |  9 +++---
 .../__tests__/EstopPressedModal.test.tsx      |  9 +++---
 .../__tests__/EstopTakeover.test.tsx          |  7 +++--
 .../RecoveryOptions/IgnoreErrorSkipStep.tsx   |  3 +-
 .../__tests__/CancelRun.test.tsx              |  7 +++--
 .../__tests__/FillWellAndSkip.test.tsx        | 16 +++++-----
 .../__tests__/HomeAndRetry.test.tsx           |  7 +++--
 .../__tests__/IgnoreErrorSkipStep.test.tsx    | 12 ++++----
 .../__tests__/ManageTips.test.tsx             |  6 ++--
 .../__tests__/ManualMoveLwAndSkip.test.tsx    |  6 ++--
 .../ManualReplaceLwAndRetry.test.tsx          |  8 ++---
 .../__tests__/RetryNewTips.test.tsx           | 10 +++----
 .../__tests__/RetrySameTips.test.tsx          | 10 +++----
 .../__tests__/RetryStep.test.tsx              |  7 +++--
 .../__tests__/SelectRecoveryOptions.test.tsx  | 10 +++----
 .../__tests__/SkipStepNewTips.test.tsx        |  6 ++--
 .../__tests__/SkipStepSameTips.test.tsx       |  7 +++--
 .../__tests__/ErrorRecoveryFlows.test.tsx     |  6 ++--
 .../__tests__/ErrorRecoveryWizard.test.tsx    | 11 +++----
 .../__tests__/RecoveryDoorOpen.test.tsx       |  6 ++--
 .../__tests__/RecoveryError.test.tsx          |  6 ++--
 .../__tests__/RecoveryInProgress.test.tsx     |  7 +++--
 .../__tests__/RecoverySplash.test.tsx         |  8 ++---
 .../__tests__/RecoveryTakeover.test.tsx       |  8 ++---
 .../__tests__/useRecoveryOptionCopy.test.tsx  |  6 ++--
 .../__tests__/useRecoveryToasts.test.tsx      |  4 +--
 .../shared/LeftColumnLabwareInfo.tsx          |  6 ++--
 .../shared/RecoveryContentWrapper.tsx         | 15 +++++-----
 .../shared/RecoveryInterventionModal.tsx      |  4 +--
 .../ErrorRecoveryFlows/shared/StepInfo.tsx    |  7 ++---
 .../shared/TwoColLwInfoAndDeck.tsx            | 10 +++----
 .../__tests__/ErrorDetailsModal.test.tsx      |  7 +++--
 .../GripperIsHoldingLabware.test.tsx          |  9 +++---
 .../__tests__/GripperReleaseLabware.test.tsx  |  5 ++--
 .../__tests__/LeftColumnLabwareInfo.test.tsx  |  7 +++--
 .../RecoveryDoorOpenSpecial.test.tsx          |  8 ++---
 .../__tests__/RecoveryFooterButtons.test.tsx  |  6 ++--
 .../shared/__tests__/RetryStepInfo.test.tsx   |  5 ++--
 .../shared/__tests__/SelectTips.test.tsx      |  6 ++--
 .../shared/__tests__/SkipStepInfo.test.tsx    |  5 ++--
 .../shared/__tests__/StepInfo.test.tsx        |  7 +++--
 .../shared/__tests__/TipSelection.test.tsx    |  7 +++--
 .../__tests__/TipSelectionModal.test.tsx      |  7 +++--
 .../__tests__/TwoColLwInfoAndDeck.test.tsx    |  6 ++--
 .../__tests__/FirmwareUpdateModal.test.tsx    |  7 +++--
 .../__tests__/UpdateInProgressModal.test.tsx  |  7 +++--
 .../__tests__/UpdateNeededModal.test.tsx      |  6 ++--
 .../__tests__/UpdateResultsModal.test.tsx     |  7 +++--
 .../organisms/GripperWizardFlows/MovePin.tsx  |  8 ++---
 .../__tests__/BeforeBeginning.test.tsx        |  7 +++--
 .../__tests__/ExitConfirmation.test.tsx       |  5 ++--
 .../__tests__/MountGripper.test.tsx           |  7 ++---
 .../__tests__/MovePin.test.tsx                |  7 ++---
 .../__tests__/Success.test.tsx                |  7 ++---
 .../__tests__/UnmountGripper.test.tsx         |  5 ++--
 ...ncompatibleModuleDesktopModalBody.test.tsx |  9 +++---
 .../IncompatibleModuleODDModalBody.test.tsx   |  7 +++--
 .../IncompatibleModuleTakeover.test.tsx       |  7 +++--
 .../useIncompatibleModulesAttached.test.tsx   |  8 ++---
 .../InterventionCommandMesage.test.tsx        |  9 +++---
 .../InterventionCommandMessage.test.tsx       |  9 +++---
 .../__tests__/InterventionModal.test.tsx      |  6 ++--
 .../__tests__/ApplyHistoricOffsets.test.tsx   |  8 ++---
 .../__tests__/LabwareOffsetTable.test.tsx     |  4 ++-
 .../__tests__/useHistoricRunDetails.test.tsx  |  6 ++--
 .../useOffsetCandidatesForAnalysis.test.tsx   |  8 ++---
 .../PrepareSpace.tsx                          |  6 ++--
 .../TwoUpTileLayout.tsx                       |  9 +++---
 .../__tests__/CheckItem.test.tsx              |  6 ++--
 .../__tests__/ExitConfirmation.test.tsx       |  7 +++--
 .../__tests__/PickUpTip.test.tsx              |  9 +++---
 .../__tests__/ResultsSummary.test.tsx         |  7 +++--
 .../__tests__/ReturnTip.test.tsx              |  7 +++--
 .../__tests__/TipConfirmation.test.tsx        |  7 +++--
 .../__tests__/useLaunchLPC.test.tsx           |  4 +--
 .../LiquidDetailCard.tsx                      |  5 ++--
 .../__tests__/LiquidDetailCard.test.tsx       |  7 +++--
 .../LiquidsLabwareDetailsModal.test.tsx       |  8 ++---
 .../__tests__/LocationConflictModal.test.tsx  |  6 ++--
 app/src/organisms/ModuleCard/Collapsible.tsx  |  7 +++--
 .../__tests__/AboutModuleSlideout.test.tsx    |  7 +++--
 .../ModuleCard/__tests__/Collapsible.test.tsx |  7 +++--
 .../__tests__/ConfirmAttachmentModal.test.tsx |  7 +++--
 .../ModuleCard/__tests__/ErrorInfo.test.tsx   |  7 +++--
 .../FirmwareUpdateFailedModal.test.tsx        |  9 +++---
 .../__tests__/HeaterShakerModuleData.test.tsx |  7 +++--
 .../__tests__/HeaterShakerSlideout.test.tsx   |  7 +++--
 .../__tests__/MagneticModuleData.test.tsx     |  7 +++--
 .../__tests__/MagneticModuleSlideout.test.tsx |  7 +++--
 .../ModuleCard/__tests__/ModuleCard.test.tsx  |  8 ++---
 .../__tests__/ModuleOverflowMenu.test.tsx     |  6 ++--
 .../__tests__/ModuleSetupModal.test.tsx       |  7 +++--
 .../__tests__/TemperatureModuleData.test.tsx  |  7 +++--
 .../TemperatureModuleSlideout.test.tsx        |  9 +++---
 .../__tests__/TestShakeSlideout.test.tsx      |  7 +++--
 .../__tests__/ThermocyclerModuleData.test.tsx |  7 ++---
 .../ThermocyclerModuleSlideout.test.tsx       |  9 +++---
 .../ModuleCard/__tests__/hooks.test.tsx       | 30 +++++++++----------
 .../__tests__/ChildNavigation.test.tsx        |  9 +++---
 .../organisms/ODD/ChildNavigation/index.tsx   | 10 +++----
 .../__tests__/InstrumentInfo.test.tsx         | 10 +++----
 .../ODD/InstrumentMountItem/LabeledMount.tsx  |  5 ++--
 .../ProtocolInstrumentMountItem.test.tsx      |  9 +++---
 .../__tests__/ConfirmRobotName.test.tsx       |  6 ++--
 .../Navigation/__tests__/Navigation.test.tsx  |  7 +++--
 .../__tests__/NavigationMenu.test.tsx         |  6 ++--
 .../RestartRobotConfirmationModal.test.tsx    |  7 +++--
 .../AlternativeSecurityTypeModal.test.tsx     |  8 ++---
 .../__tests__/ConnectingNetwork.test.tsx      |  7 +++--
 .../__tests__/DisplayWifiList.test.tsx        |  6 ++--
 .../__tests__/FailedToConnect.test.tsx        |  6 ++--
 .../SelectAuthenticationType.test.tsx         |  8 ++---
 .../__tests__/SetWifiCred.test.tsx            |  7 +++--
 .../__tests__/SetWifiSsid.test.tsx            |  7 +++--
 .../__tests__/WifiConnectionDetails.test.tsx  |  6 ++--
 .../ProtocolSetupDeckConfiguration.test.tsx   |  6 ++--
 .../ProtocolSetupInstruments.tsx              |  6 ++--
 .../__tests__/LabwareMapView.test.tsx         |  4 +--
 .../__tests__/LiquidDetails.test.tsx          |  7 +++--
 .../__tests__/ProtocolSetupLiquids.test.tsx   |  6 ++--
 .../__tests__/FixtureTable.test.tsx           |  7 +++--
 .../__tests__/ModulesAndDeckMapView.test.tsx  |  7 +++--
 .../__tests__/SetupInstructionsModal.test.tsx |  7 +++--
 .../ProtocolSetupOffsets/index.tsx            |  5 ++--
 .../ViewOnlyParameters.tsx                    |  4 +--
 .../__tests__/AnalysisFailedModal.test.tsx    |  7 +++--
 .../__tests__/ChooseCsvFile.test.tsx          |  6 ++--
 .../__tests__/ChooseEnum.test.tsx             |  7 +++--
 .../__tests__/ChooseNumber.test.tsx           |  6 ++--
 .../ProtocolSetupParameters.test.tsx          |  8 ++---
 .../__tests__/ResetValuesModal.test.tsx       |  7 +++--
 .../__tests__/ViewOnlyParameters.test.tsx     |  7 +++--
 .../QuickTransferFlow/CreateNewTransfer.tsx   |  5 ++--
 .../__tests__/ConfirmExitModal.test.tsx       |  7 +++--
 .../__tests__/CreateNewTransfer.test.tsx      |  6 ++--
 .../__tests__/NameQuickTransfer.test.tsx      |  7 +++--
 .../__tests__/Overview.test.tsx               |  7 +++--
 .../AirGap.test.tsx                           |  7 +++--
 .../BlowOut.test.tsx                          |  7 +++--
 .../Delay.test.tsx                            |  7 +++--
 .../FlowRate.test.tsx                         |  7 +++--
 .../Mix.test.tsx                              |  7 +++--
 .../PipettePath.test.tsx                      |  7 +++--
 .../QuickTransferAdvancedSettings.test.tsx    |  7 +++--
 .../TipPosition.test.tsx                      |  7 +++--
 .../TouchTip.test.tsx                         |  7 +++--
 .../__tests__/SelectDestLabware.test.tsx      |  7 +++--
 .../__tests__/SelectPipette.test.tsx          |  7 +++--
 .../__tests__/SelectSourceLabware.test.tsx    |  7 +++--
 .../__tests__/SelectTipRack.test.tsx          |  7 +++--
 .../__tests__/SummaryAndSettings.test.tsx     |  7 +++--
 .../TipManagement/ChangeTip.test.tsx          |  7 +++--
 .../TipManagement/TipDropLocation.test.tsx    |  7 +++--
 .../TipManagement/TipManagement.test.tsx      |  7 +++--
 .../__tests__/VolumeEntry.test.tsx            |  7 +++--
 .../__tests__/RecentRunProtocolCard.test.tsx  |  6 ++--
 .../RecentRunProtocolCarousel.test.tsx        |  8 ++---
 .../__tests__/useHardwareStatusText.test.tsx  |  5 ++--
 .../RobotSettingsSelectAuthenticationType.tsx |  4 +--
 .../RobotSettingsSetWifiCred.tsx              |  4 +--
 .../NetworkSettings/RobotSettingsWifi.tsx     |  4 +--
 .../EthernetConnectionDetails.test.tsx        |  9 +++---
 .../__tests__/NetworkDetailsModal.test.tsx    |  7 +++--
 .../__tests__/NetworkSettings.test.tsx        |  6 ++--
 .../__tests__/WifiConnectionDetails.test.tsx  |  7 +++--
 .../NetworkSettings/index.tsx                 |  4 +--
 .../RobotSettingButton.tsx                    |  6 ++--
 .../__tests__/DeviceReset.test.tsx            |  6 ++--
 .../__tests__/LanguageSetting.test.tsx        |  7 +++--
 .../__tests__/Privacy.test.tsx                |  7 +++--
 .../__tests__/RobotSystemVersion.test.tsx     |  7 +++--
 .../RobotSystemVersionModal.test.tsx          |  9 +++---
 .../__tests__/TextSize.test.tsx               |  7 +++--
 .../__tests__/TouchScreenSleep.test.tsx       |  7 +++--
 .../__tests__/TouchscreenBrightness.test.tsx  |  7 +++--
 .../__tests__/UpdateChannel.test.tsx          |  7 +++--
 .../organisms/ODD/RobotSetupHeader/index.tsx  |  9 +++---
 .../__tests__/ConfirmCancelRunModal.test.tsx  |  6 ++--
 .../CurrentRunningProtocolCommand.test.tsx    |  7 +++--
 .../__tests__/RunFailedModal.test.tsx         |  7 +++--
 .../RunningProtocolCommandList.test.tsx       |  9 +++---
 .../RunningProtocolSkeleton.test.tsx          |  9 +++---
 .../PipetteWizardFlows/CheckPipetteButton.tsx |  5 ++--
 .../PipetteWizardFlows/MountPipette.tsx       |  7 +++--
 .../__tests__/AttachProbe.test.tsx            |  7 +++--
 .../__tests__/BeforeBeginning.test.tsx        |  7 +++--
 .../__tests__/Carriage.test.tsx               |  7 +++--
 .../__tests__/CheckPipetteButton.test.tsx     |  7 +++--
 .../__tests__/ChoosePipette.test.tsx          |  7 +++--
 .../__tests__/DetachPipette.test.tsx          |  7 +++--
 .../__tests__/DetachProbe.test.tsx            |  7 +++--
 .../__tests__/ExitModal.test.tsx              |  7 +++--
 .../__tests__/MountPipette.test.tsx           |  7 +++--
 .../__tests__/MountingPlate.test.tsx          |  7 +++--
 .../__tests__/Results.test.tsx                |  6 ++--
 .../__tests__/UnskippableModal.test.tsx       |  7 +++--
 .../__tests__/hooks.test.tsx                  |  5 ++--
 app/src/organisms/PipetteWizardFlows/types.ts |  5 ++--
 .../organisms/TakeoverModal/TakeoverModal.tsx |  4 +--
 .../__tests__/MaintenanceRunTakeover.test.tsx |  6 ++--
 .../__tests__/TakeoverModal.test.tsx          |  7 +++--
 .../ErrorUpdateSoftware.tsx                   |  5 ++--
 .../__tests__/CompleteUpdateSoftware.test.tsx |  7 +++--
 .../__tests__/ErrorUpdateSoftware.test.tsx    |  7 +++--
 .../__tests__/UpdateSoftware.test.tsx         |  7 +++--
 .../Desktop/Labware/__tests__/hooks.test.tsx  | 22 +++++++-------
 .../DisplayConnectionStatus.test.tsx          |  8 ++---
 .../__tests__/TitleHeader.test.tsx            |  6 ++--
 .../pages/ODD/ConnectViaWifi/SetWifiCred.tsx  |  4 +--
 .../pages/ODD/InitialLoadingScreen/index.tsx  |  5 ++--
 .../pages/ODD/InstrumentsDashboard/index.tsx  |  5 ++--
 .../PinnedProtocolCarousel.tsx                |  6 ++--
 .../ODD/ProtocolDashboard/ProtocolCard.tsx    |  3 +-
 .../DeleteProtocolConfirmationModal.test.tsx  |  7 +++--
 .../__tests__/PinnedProtocol.test.tsx         |  8 ++---
 .../__tests__/ProtocolCard.test.tsx           |  6 ++--
 .../ProtocolDetails/__tests__/Deck.test.tsx   |  6 ++--
 .../__tests__/EmptySection.test.tsx           |  7 +++--
 .../__tests__/Hardware.test.tsx               |  7 +++--
 .../__tests__/Labware.test.tsx                | 17 ++++++-----
 .../__tests__/Liquids.test.tsx                |  6 ++--
 .../__tests__/Parameters.test.tsx             |  7 +++--
 .../__tests__/ConfirmAttachedModal.test.tsx   |  7 +++--
 .../PinnedTransferCarousel.tsx                |  4 +--
 .../DeleteTransferConfirmationModal.test.tsx  |  6 ++--
 .../__tests__/Deck.test.tsx                   |  6 ++--
 .../__tests__/Hardware.test.tsx               |  7 +++--
 .../__tests__/Labware.test.tsx                | 17 +++++------
 .../__tests__/WelcomeModal.test.tsx           |  6 ++--
 .../useProtocolRunAnalyticsData.test.tsx      |  5 ++--
 .../__tests__/useRobotAnalyticsData.test.tsx  |  4 +--
 .../useTrackProtocolRunEvent.test.tsx         |  4 +--
 .../useIsUnboxingFlowOngoing.test.tsx         |  4 +--
 .../robots/hooks/__tests__/useIsFlex.test.tsx |  5 ++--
 .../__tests__/useIsRobotViewable.test.tsx     |  5 ++--
 .../robots/hooks/__tests__/useRobot.test.tsx  |  4 +--
 .../robot-update/__tests__/hooks.test.tsx     |  4 +--
 .../useStoredProtocolAnalysis.test.tsx        |  4 +--
 .../useDeckCalibrationStatus.test.tsx         |  5 ++--
 .../hooks/__tests__/useLights.test.tsx        |  4 +--
 .../useAttachedPipetteCalibrations.test.tsx   |  5 ++--
 .../__tests__/useAttachedPipettes.test.tsx    |  5 ++--
 ...tachedPipettesFromInstrumentsQuery.test.ts |  4 +--
 .../__tests__/useAttachedModules.test.tsx     |  3 +-
 .../hooks/__tests__/useCanDisconnect.test.tsx | 12 ++++----
 .../__tests__/useNetworkConnection.test.tsx   |  6 ++--
 .../__tests__/useProtocolMetadata.test.tsx    |  4 +--
 .../runs/__tests__/useCloneRun.test.tsx       |  8 ++---
 .../__tests__/useLPCDisabledReason.test.tsx   |  6 ++--
 .../useModuleCalibrationStatus.test.tsx       |  9 +++---
 .../useRunCalibrationStatus.test.tsx          | 10 +++----
 app/src/resources/runs/utils.ts               |  8 ++---
 .../useMissingProtocolHardware.test.tsx       | 16 ++++++----
 .../__testing-utils__/renderWithProviders.tsx | 13 +++++---
 .../src/atoms/ToggleButton/index.tsx          |  4 +--
 protocol-designer/src/labware-defs/actions.ts |  8 +++--
 protocol-designer/src/load-file/actions.ts    |  4 ++-
 .../CheckboxExpandStepFormField/index.tsx     |  4 ++-
 .../molecules/CheckboxStepFormField/index.tsx |  7 +++--
 .../Alerts/__tests__/FormAlerts.test.tsx      |  7 +++--
 .../src/organisms/Alerts/types.ts             |  4 ++-
 .../AssignLiquidsModal/LiquidToolbox.tsx      |  6 ++--
 .../BlockingHintModal/useBlockingHint.tsx     |  4 ++-
 .../organisms/ConfirmDeleteModal/index.tsx    |  4 +--
 .../__tests__/EditNickNameModal.test.tsx      |  7 +++--
 .../EditProtocolMetadataModal.test.tsx        |  9 +++---
 .../FileUploadMessagesModal/utils.tsx         |  4 +--
 .../__tests__/IncompatibleTipsModal.test.tsx  |  7 +++--
 .../organisms/Labware/SelectableLabware.tsx   |  7 ++---
 .../src/organisms/Labware/SelectionRect.tsx   | 16 +++++-----
 .../src/organisms/Labware/SingleLabware.tsx   |  4 +--
 .../src/organisms/Labware/WellTooltip.tsx     | 18 +++++------
 .../__tests__/MaterialsListModal.test.tsx     |  6 ++--
 .../src/organisms/Navigation/index.tsx        |  6 ++--
 .../__tests__/PipetteInfoItem.test.tsx        |  7 +++--
 .../__tests__/RenameStepModal.test.tsx        |  6 ++--
 .../__tests__/SelectWellsModal.test.tsx       |  6 ++--
 .../__tests__/SlotInformation.test.tsx        |  6 ++--
 .../TipPositionModal/ZTipPositionModal.tsx    |  5 ++--
 .../__tests__/TipPositionModal.test.tsx       |  6 ++--
 .../__tests__/ZTipPositionModal.test.tsx      |  7 +++--
 .../src/organisms/TipPositionModal/index.tsx  | 13 +++-----
 .../__tests__/WellOrderModal.test.tsx         |  6 ++--
 .../CreateNewProtocolWizard/WizardBody.tsx    |  4 ++-
 .../__tests__/AddMetadata.test.tsx            |  6 ++--
 .../__tests__/SelectFixtures.test.tsx         |  7 +++--
 .../__tests__/SelectGripper.test.tsx          |  6 ++--
 .../__tests__/SelectModules.test.tsx          |  7 +++--
 .../__tests__/SelectPipettes.test.tsx         |  6 ++--
 .../__tests__/SelectRobot.test.tsx            |  7 +++--
 .../__tests__/WizardBody.test.tsx             |  7 +++--
 .../pages/CreateNewProtocolWizard/index.tsx   |  4 ++-
 .../Designer/DeckSetup/DeckItemHover.tsx      |  6 ++--
 .../pages/Designer/DeckSetup/LabwareTools.tsx |  7 +++--
 .../__tests__/DeckSetupTools.test.tsx         |  6 ++--
 .../DeckSetup/__tests__/HoveredItems.test.tsx |  7 +++--
 .../DeckSetup/__tests__/LabwareTools.test.tsx |  7 +++--
 .../__tests__/SelectedHoveredItems.test.tsx   |  7 +++--
 .../__tests__/SlotOverflowMenu.test.tsx       |  6 ++--
 .../src/pages/Designer/DeckSetup/utils.ts     |  3 +-
 .../pages/Designer/LiquidsOverflowMenu.tsx    |  4 +--
 .../Offdeck/__tests__/OffDeckDetails.test.tsx |  6 ++--
 .../StepForm/PipetteFields/PathField.tsx      |  6 ++--
 .../StepForm/StepFormToolbox.tsx              |  4 ++-
 .../ThermocyclerTools/ThermocyclerCycle.tsx   | 13 ++++----
 .../ThermocyclerProfileModal.tsx              |  3 +-
 .../ThermocyclerTools/ThermocyclerStep.tsx    | 13 ++++----
 .../StepTools/__tests__/MagnetTools.test.tsx  |  2 +-
 .../__tests__/TemperatureTools.test.tsx       |  6 ++--
 .../Designer/ProtocolSteps/StepForm/types.ts  |  5 ++--
 .../Timeline/ConnectedStepInfo.tsx            |  5 ++--
 .../Timeline/StepOverflowMenu.tsx             |  8 +++--
 .../Timeline/__tests__/StepContainer.test.tsx |  7 +++--
 .../__tests__/StepOverflowMenu.test.tsx       |  7 +++--
 .../ThermocyclerProfileSubsteps.test.tsx      |  8 ++---
 .../Designer/ProtocolSteps/Timeline/utils.ts  |  3 +-
 protocol-designer/src/pages/Landing/index.tsx |  7 ++---
 .../ProtocolOverview/UnusedModalContent.tsx   |  3 +-
 .../__tests__/DeckThumbnail.test.tsx          |  7 +++--
 .../__tests__/OffdeckThumbnail.test.tsx       |  6 ++--
 .../src/step-forms/selectors/index.ts         |  3 +-
 .../src/steplist/formLevel/errors.ts          |  5 ++--
 .../src/steplist/formLevel/profileErrors.ts   |  4 ++-
 protocol-designer/src/types.ts                |  3 +-
 604 files changed, 2145 insertions(+), 1883 deletions(-)

diff --git a/app/src/App/Navbar.tsx b/app/src/App/Navbar.tsx
index 1d7711563ae..90e62b608ae 100644
--- a/app/src/App/Navbar.tsx
+++ b/app/src/App/Navbar.tsx
@@ -25,6 +25,7 @@ import logoSvgThree from '/app/assets/images/logo_nav_three.svg'
 
 import { NAV_BAR_WIDTH } from './constants'
 
+import type { MouseEvent } from 'react'
 import type { RouteProps } from './types'
 
 const SALESFORCE_HELP_LINK = 'https://support.opentrons.com/s/'
@@ -161,7 +162,7 @@ export function Navbar({ routes }: { routes: RouteProps[] }): JSX.Element {
         <NavIconLink
           role="button"
           data-testid="Navbar_settingsLink"
-          onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+          onClick={(e: MouseEvent<HTMLButtonElement>) => {
             e.preventDefault()
             debouncedNavigate('/app-settings')
           }}
diff --git a/app/src/App/__mocks__/portal.tsx b/app/src/App/__mocks__/portal.tsx
index f80b1deb44e..498f3220f65 100644
--- a/app/src/App/__mocks__/portal.tsx
+++ b/app/src/App/__mocks__/portal.tsx
@@ -1,8 +1,8 @@
 // mock portal for enzyme tests
-import type * as React from 'react'
+import type { ReactNode } from 'react'
 
 interface Props {
-  children: React.ReactNode
+  children: ReactNode
 }
 
 // replace Portal with a pass-through React.Fragment
diff --git a/app/src/App/__tests__/hooks.test.tsx b/app/src/App/__tests__/hooks.test.tsx
index 5b3f315049b..2423414c748 100644
--- a/app/src/App/__tests__/hooks.test.tsx
+++ b/app/src/App/__tests__/hooks.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, describe, beforeEach, afterEach, expect, it } from 'vitest'
 import { renderHook } from '@testing-library/react'
 import { createStore } from 'redux'
@@ -9,11 +8,12 @@ import { i18n } from '/app/i18n'
 import { checkShellUpdate } from '/app/redux/shell'
 import { useSoftwareUpdatePoll } from '../hooks'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { State } from '/app/redux/types'
 
 describe('useSoftwareUpdatePoll', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   let store: Store<State>
   beforeEach(() => {
     vi.useFakeTimers()
diff --git a/app/src/App/index.tsx b/app/src/App/index.tsx
index f0ba1de0304..0ffcf0dd751 100644
--- a/app/src/App/index.tsx
+++ b/app/src/App/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useSelector } from 'react-redux'
 
 import { Flex, POSITION_FIXED, DIRECTION_ROW } from '@opentrons/components'
@@ -9,7 +8,9 @@ import { DesktopApp } from './DesktopApp'
 import { OnDeviceDisplayApp } from './OnDeviceDisplayApp'
 import { TopPortalRoot } from './portal'
 
-const stopEvent = (event: React.MouseEvent): void => {
+import type { MouseEvent } from 'react'
+
+const stopEvent = (event: MouseEvent): void => {
   event.preventDefault()
 }
 
diff --git a/app/src/App/types.ts b/app/src/App/types.ts
index 87d8f77d4a1..c6a0822260d 100644
--- a/app/src/App/types.ts
+++ b/app/src/App/types.ts
@@ -1,11 +1,11 @@
-import type * as React from 'react'
+import type { FC } from 'react'
 
 export interface RouteProps {
   /**
    * the component rendered by a route match
    * drop developed components into slots held by placeholder div components
    */
-  Component: React.FC
+  Component: FC
   /**
    * a route/page name to render in the nav bar
    */
diff --git a/app/src/LocalizationProvider.tsx b/app/src/LocalizationProvider.tsx
index df2bbc8bc40..3c8fcf9feab 100644
--- a/app/src/LocalizationProvider.tsx
+++ b/app/src/LocalizationProvider.tsx
@@ -7,10 +7,10 @@ import { i18n, i18nCb, i18nConfig } from '/app/i18n'
 import { getAppLanguage } from '/app/redux/config'
 import { useIsOEMMode } from '/app/resources/robot-settings/hooks'
 
-import type * as React from 'react'
+import type { ReactNode } from 'react'
 
 export interface LocalizationProviderProps {
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
 export const BRANDED_RESOURCE = 'branded'
diff --git a/app/src/__testing-utils__/renderWithProviders.tsx b/app/src/__testing-utils__/renderWithProviders.tsx
index 11e3ba16d9b..4c3115281f5 100644
--- a/app/src/__testing-utils__/renderWithProviders.tsx
+++ b/app/src/__testing-utils__/renderWithProviders.tsx
@@ -1,6 +1,5 @@
 // render using targetted component using @testing-library/react
 // with wrapping providers for i18next and redux
-import type * as React from 'react'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { I18nextProvider } from 'react-i18next'
 import { Provider } from 'react-redux'
@@ -8,16 +7,22 @@ import { vi } from 'vitest'
 import { render } from '@testing-library/react'
 import { createStore } from 'redux'
 
+import type {
+  ComponentProps,
+  ComponentType,
+  PropsWithChildren,
+  ReactElement,
+} from 'react'
 import type { PreloadedState, Store } from 'redux'
 import type { RenderOptions, RenderResult } from '@testing-library/react'
 
 export interface RenderWithProvidersOptions<State> extends RenderOptions {
   initialState?: State
-  i18nInstance: React.ComponentProps<typeof I18nextProvider>['i18n']
+  i18nInstance: ComponentProps<typeof I18nextProvider>['i18n']
 }
 
 export function renderWithProviders<State>(
-  Component: React.ReactElement,
+  Component: ReactElement,
   options?: RenderWithProvidersOptions<State>
 ): [RenderResult, Store<State>] {
   // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@@ -32,7 +37,7 @@ export function renderWithProviders<State>(
 
   const queryClient = new QueryClient()
 
-  const ProviderWrapper: React.ComponentType<React.PropsWithChildren<{}>> = ({
+  const ProviderWrapper: ComponentType<PropsWithChildren<{}>> = ({
     children,
   }) => {
     const BaseWrapper = (
diff --git a/app/src/atoms/InlineNotification/__tests__/InlineNotification.test.tsx b/app/src/atoms/InlineNotification/__tests__/InlineNotification.test.tsx
index 0e91433e7b2..bb5ba0669b9 100644
--- a/app/src/atoms/InlineNotification/__tests__/InlineNotification.test.tsx
+++ b/app/src/atoms/InlineNotification/__tests__/InlineNotification.test.tsx
@@ -1,18 +1,19 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { screen, fireEvent } from '@testing-library/react'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { InlineNotification } from '..'
 
-const render = (props: React.ComponentProps<typeof InlineNotification>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof InlineNotification>) => {
   return renderWithProviders(<InlineNotification {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('InlineNotification', () => {
-  let props: React.ComponentProps<typeof InlineNotification>
+  let props: ComponentProps<typeof InlineNotification>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/atoms/InlineNotification/index.tsx b/app/src/atoms/InlineNotification/index.tsx
index 5b5bf21aafa..cf413b652cc 100644
--- a/app/src/atoms/InlineNotification/index.tsx
+++ b/app/src/atoms/InlineNotification/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import {
   ALIGN_CENTER,
@@ -19,6 +18,7 @@ import {
   Link,
 } from '@opentrons/components'
 
+import type { MouseEventHandler } from 'react'
 import type { IconProps, StyleProps } from '@opentrons/components'
 
 type InlineNotificationType = 'alert' | 'error' | 'neutral' | 'success'
@@ -32,9 +32,9 @@ export interface InlineNotificationProps extends StyleProps {
   /** Optional dynamic width based on contents */
   hug?: boolean
   /** optional handler to show close button/clear alert  */
-  onCloseClick?: (() => void) | React.MouseEventHandler<HTMLButtonElement>
+  onCloseClick?: (() => void) | MouseEventHandler<HTMLButtonElement>
   linkText?: string
-  onLinkClick?: (() => void) | React.MouseEventHandler<HTMLButtonElement>
+  onLinkClick?: (() => void) | MouseEventHandler<HTMLButtonElement>
 }
 
 const INLINE_NOTIFICATION_PROPS_BY_TYPE: Record<
diff --git a/app/src/atoms/InstrumentContainer/__tests__/InstrumentContainer.test.tsx b/app/src/atoms/InstrumentContainer/__tests__/InstrumentContainer.test.tsx
index e5fa872ab54..318175558fe 100644
--- a/app/src/atoms/InstrumentContainer/__tests__/InstrumentContainer.test.tsx
+++ b/app/src/atoms/InstrumentContainer/__tests__/InstrumentContainer.test.tsx
@@ -1,15 +1,16 @@
-import type * as React from 'react'
 import { describe, it } from 'vitest'
 import { screen } from '@testing-library/react'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { InstrumentContainer } from '..'
 
-const render = (props: React.ComponentProps<typeof InstrumentContainer>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof InstrumentContainer>) => {
   return renderWithProviders(<InstrumentContainer {...props} />)[0]
 }
 
 describe('InstrumentContainer', () => {
-  let props: React.ComponentProps<typeof InstrumentContainer>
+  let props: ComponentProps<typeof InstrumentContainer>
 
   it('renders an instrument display name', () => {
     props = {
diff --git a/app/src/atoms/Link/__tests__/ExternalLink.test.tsx b/app/src/atoms/Link/__tests__/ExternalLink.test.tsx
index f58ad595169..863a10e886e 100644
--- a/app/src/atoms/Link/__tests__/ExternalLink.test.tsx
+++ b/app/src/atoms/Link/__tests__/ExternalLink.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
@@ -6,14 +5,16 @@ import { COLORS } from '@opentrons/components'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { ExternalLink } from '../ExternalLink'
 
+import type { ComponentProps } from 'react'
+
 const TEST_URL = 'https://opentrons.com'
 
-const render = (props: React.ComponentProps<typeof ExternalLink>) => {
+const render = (props: ComponentProps<typeof ExternalLink>) => {
   return renderWithProviders(<ExternalLink {...props} />)[0]
 }
 
 describe('ExternalLink', () => {
-  let props: React.ComponentProps<typeof ExternalLink>
+  let props: ComponentProps<typeof ExternalLink>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/atoms/ProgressBar/__tests__/ProgressBar.test.tsx b/app/src/atoms/ProgressBar/__tests__/ProgressBar.test.tsx
index 6d5b3d3fa40..557a234e969 100644
--- a/app/src/atoms/ProgressBar/__tests__/ProgressBar.test.tsx
+++ b/app/src/atoms/ProgressBar/__tests__/ProgressBar.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'
@@ -7,12 +6,14 @@ import { COLORS } from '@opentrons/components'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { ProgressBar } from '..'
 
-const render = (props: React.ComponentProps<typeof ProgressBar>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ProgressBar>) => {
   return renderWithProviders(<ProgressBar {...props} />)
 }
 
 describe('ProgressBar', () => {
-  let props: React.ComponentProps<typeof ProgressBar>
+  let props: ComponentProps<typeof ProgressBar>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/atoms/ProgressBar/index.tsx b/app/src/atoms/ProgressBar/index.tsx
index 5852dadf2b5..bd598c0105b 100644
--- a/app/src/atoms/ProgressBar/index.tsx
+++ b/app/src/atoms/ProgressBar/index.tsx
@@ -1,7 +1,7 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import { COLORS, Box } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
 import type { FlattenSimpleInterpolation } from 'styled-components'
 
 interface ProgressBarProps {
@@ -12,7 +12,7 @@ interface ProgressBarProps {
   /** extra styles to be filled progress element */
   innerStyles?: FlattenSimpleInterpolation
   /** extra elements to be rendered within container */
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
 export function ProgressBar({
diff --git a/app/src/atoms/SelectField/index.tsx b/app/src/atoms/SelectField/index.tsx
index 50deed28266..a51ed7a9ecd 100644
--- a/app/src/atoms/SelectField/index.tsx
+++ b/app/src/atoms/SelectField/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import find from 'lodash/find'
 import { Select } from './Select'
 import {
@@ -11,6 +10,7 @@ import {
 } from '@opentrons/components'
 import { css } from 'styled-components'
 
+import type { ReactNode } from 'react'
 import type { SelectProps, SelectOption } from './Select'
 import type { ActionMeta, MultiValue, SingleValue } from 'react-select'
 
@@ -32,9 +32,9 @@ export interface SelectFieldProps {
   /** render function for the option label passed to react-select */
   formatOptionLabel?: SelectProps['formatOptionLabel']
   /** optional title */
-  title?: React.ReactNode
+  title?: ReactNode
   /** optional caption. hidden when `error` is given */
-  caption?: React.ReactNode
+  caption?: ReactNode
   /** if included, use error style and display error instead of caption */
   error?: string | null
   /** change handler called with (name, value, actionMeta) */
diff --git a/app/src/atoms/Skeleton/__tests__/Skeleton.test.tsx b/app/src/atoms/Skeleton/__tests__/Skeleton.test.tsx
index b03bd72e98d..471506eb864 100644
--- a/app/src/atoms/Skeleton/__tests__/Skeleton.test.tsx
+++ b/app/src/atoms/Skeleton/__tests__/Skeleton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'
@@ -6,7 +5,9 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { Skeleton } from '..'
 
-const render = (props: React.ComponentProps<typeof Skeleton>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Skeleton>) => {
   return renderWithProviders(<Skeleton {...props} />, {
     i18nInstance: i18n,
   })[0]
diff --git a/app/src/atoms/Slideout/__tests__/Slideout.test.tsx b/app/src/atoms/Slideout/__tests__/Slideout.test.tsx
index 8e3301ad374..cca0cb02929 100644
--- a/app/src/atoms/Slideout/__tests__/Slideout.test.tsx
+++ b/app/src/atoms/Slideout/__tests__/Slideout.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen, fireEvent } from '@testing-library/react'
@@ -6,14 +5,16 @@ import { i18n } from '/app/i18n'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { Slideout } from '..'
 
-const render = (props: React.ComponentProps<typeof Slideout>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Slideout>) => {
   return renderWithProviders(<Slideout {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('Slideout', () => {
-  let props: React.ComponentProps<typeof Slideout>
+  let props: ComponentProps<typeof Slideout>
   const mockOnClick = vi.fn()
   beforeEach(() => {
     props = {
diff --git a/app/src/atoms/Slideout/index.tsx b/app/src/atoms/Slideout/index.tsx
index 53a6888efa0..7260da7c342 100644
--- a/app/src/atoms/Slideout/index.tsx
+++ b/app/src/atoms/Slideout/index.tsx
@@ -22,17 +22,19 @@ import {
 
 import { Divider } from '../structure'
 
+import type { ReactElement, ReactNode } from 'react'
+
 export interface MultiSlideoutSpecs {
   currentStep: number
   maxSteps: number
 }
 export interface SlideoutProps {
-  title: string | React.ReactElement
-  children: React.ReactNode
+  title: string | ReactElement
+  children: ReactNode
   onCloseClick: () => void
   //  isExpanded is for collapse and expand animation
   isExpanded?: boolean
-  footer?: React.ReactNode
+  footer?: ReactNode
   multiSlideoutSpecs?: MultiSlideoutSpecs
 }
 
diff --git a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx
index 3b3bb3ab48c..d536b18b30c 100644
--- a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx
+++ b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx
@@ -7,6 +7,8 @@ import {
   layoutCandidates,
   customDisplay,
 } from '../constants'
+
+import type { MutableRefObject } from 'react'
 import type { KeyboardReactInterface } from 'react-simple-keyboard'
 
 import '../index.css'
@@ -15,7 +17,7 @@ import './index.css'
 // TODO (kk:04/05/2024) add debug to make debugging easy
 interface AlphanumericKeyboardProps {
   onChange: (input: string) => void
-  keyboardRef: React.MutableRefObject<KeyboardReactInterface | null>
+  keyboardRef: MutableRefObject<KeyboardReactInterface | null>
   debug?: boolean
 }
 
diff --git a/app/src/atoms/SoftwareKeyboard/IndividualKey/index.tsx b/app/src/atoms/SoftwareKeyboard/IndividualKey/index.tsx
index 1cc2668d788..23ed71f9851 100644
--- a/app/src/atoms/SoftwareKeyboard/IndividualKey/index.tsx
+++ b/app/src/atoms/SoftwareKeyboard/IndividualKey/index.tsx
@@ -1,6 +1,8 @@
-import type * as React from 'react'
 import { KeyboardReact as Keyboard } from 'react-simple-keyboard'
+
+import type { MutableRefObject } from 'react'
 import type { KeyboardReactInterface } from 'react-simple-keyboard'
+
 import '../index.css'
 import './index.css'
 
@@ -11,7 +13,7 @@ const customDisplay = {
 // TODO (kk:04/05/2024) add debug to make debugging easy
 interface IndividualKeyProps {
   onChange: (input: string) => void
-  keyboardRef: React.MutableRefObject<KeyboardReactInterface | null>
+  keyboardRef: MutableRefObject<KeyboardReactInterface | null>
   keyText: string
   debug?: boolean
 }
diff --git a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.tsx b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.tsx
index 4d3959eb9c3..16180ecbbdb 100644
--- a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.tsx
+++ b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.tsx
@@ -1,15 +1,16 @@
-import type * as React from 'react'
 import { KeyboardReact as Keyboard } from 'react-simple-keyboard'
 import { numericalKeyboardLayout, numericalCustom } from '../constants'
 
+import type { MutableRefObject } from 'react'
 import type { KeyboardReactInterface } from 'react-simple-keyboard'
+
 import '../index.css'
 import './index.css'
 
 // Note (kk:04/05/2024) add debug to make debugging easy
 interface NumericalKeyboardProps {
   onChange: (input: string) => void
-  keyboardRef: React.MutableRefObject<KeyboardReactInterface | null>
+  keyboardRef: MutableRefObject<KeyboardReactInterface | null>
   isDecimal?: boolean
   hasHyphen?: boolean
   debug?: boolean
diff --git a/app/src/atoms/StatusLabel/__tests__/StatusLabel.test.tsx b/app/src/atoms/StatusLabel/__tests__/StatusLabel.test.tsx
index 568326f0065..48a7753cab5 100644
--- a/app/src/atoms/StatusLabel/__tests__/StatusLabel.test.tsx
+++ b/app/src/atoms/StatusLabel/__tests__/StatusLabel.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'
@@ -6,12 +5,14 @@ import { C_SKY_BLUE, COLORS } from '@opentrons/components'
 import { StatusLabel } from '..'
 import { renderWithProviders } from '/app/__testing-utils__'
 
-const render = (props: React.ComponentProps<typeof StatusLabel>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof StatusLabel>) => {
   return renderWithProviders(<StatusLabel {...props} />)[0]
 }
 
 describe('StatusLabel', () => {
-  let props: React.ComponentProps<typeof StatusLabel>
+  let props: ComponentProps<typeof StatusLabel>
 
   it('renders an engaged status label with a blue background and text', () => {
     props = {
diff --git a/app/src/atoms/StepMeter/__tests__/StepMeter.test.tsx b/app/src/atoms/StepMeter/__tests__/StepMeter.test.tsx
index 90f027b0f7a..dcd98b06159 100644
--- a/app/src/atoms/StepMeter/__tests__/StepMeter.test.tsx
+++ b/app/src/atoms/StepMeter/__tests__/StepMeter.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'
@@ -6,14 +5,16 @@ import { i18n } from '/app/i18n'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { StepMeter } from '..'
 
-const render = (props: React.ComponentProps<typeof StepMeter>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof StepMeter>) => {
   return renderWithProviders(<StepMeter {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('StepMeter', () => {
-  let props: React.ComponentProps<typeof StepMeter>
+  let props: ComponentProps<typeof StepMeter>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/atoms/buttons/BackButton.tsx b/app/src/atoms/buttons/BackButton.tsx
index 29657e1f1b2..2819c0eb48e 100644
--- a/app/src/atoms/buttons/BackButton.tsx
+++ b/app/src/atoms/buttons/BackButton.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 
@@ -11,11 +10,13 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 
+import type { HTMLProps } from 'react'
+
 // TODO(bh, 2022-12-7): finish styling when designs finalized
 export function BackButton({
   onClick,
   children,
-}: React.HTMLProps<HTMLButtonElement>): JSX.Element {
+}: HTMLProps<HTMLButtonElement>): JSX.Element {
   const navigate = useNavigate()
   const { t } = useTranslation('shared')
 
diff --git a/app/src/atoms/buttons/FloatingActionButton.tsx b/app/src/atoms/buttons/FloatingActionButton.tsx
index b7e870eab16..6088a5675b4 100644
--- a/app/src/atoms/buttons/FloatingActionButton.tsx
+++ b/app/src/atoms/buttons/FloatingActionButton.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 
 import {
@@ -15,9 +14,10 @@ import {
   StyledText,
 } from '@opentrons/components'
 
+import type { ComponentProps } from 'react'
 import type { IconName } from '@opentrons/components'
 
-interface FloatingActionButtonProps extends React.ComponentProps<typeof Btn> {
+interface FloatingActionButtonProps extends ComponentProps<typeof Btn> {
   buttonText: string
   disabled?: boolean
   iconName?: IconName
diff --git a/app/src/atoms/buttons/IconButton.tsx b/app/src/atoms/buttons/IconButton.tsx
index ee754472ff1..43c935d462f 100644
--- a/app/src/atoms/buttons/IconButton.tsx
+++ b/app/src/atoms/buttons/IconButton.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import {
   BORDERS,
@@ -10,8 +9,10 @@ import {
 } from '@opentrons/components'
 import { ODD_FOCUS_VISIBLE } from './constants'
 
-interface IconButtonProps extends React.ComponentProps<typeof Btn> {
-  iconName: React.ComponentProps<typeof Icon>['name']
+import type { ComponentProps } from 'react'
+
+interface IconButtonProps extends ComponentProps<typeof Btn> {
+  iconName: ComponentProps<typeof Icon>['name']
   hasBackground?: boolean
 }
 
diff --git a/app/src/atoms/buttons/MediumButton.tsx b/app/src/atoms/buttons/MediumButton.tsx
index d784029696a..7439cb39a46 100644
--- a/app/src/atoms/buttons/MediumButton.tsx
+++ b/app/src/atoms/buttons/MediumButton.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import {
   ALIGN_CENTER,
@@ -16,6 +15,7 @@ import {
 } from '@opentrons/components'
 import { ODD_FOCUS_VISIBLE } from './constants'
 
+import type { MouseEventHandler, ReactNode } from 'react'
 import type { IconName, StyleProps } from '@opentrons/components'
 import type { ButtonCategory } from './SmallButton'
 
@@ -28,12 +28,12 @@ type MediumButtonTypes =
   | 'tertiaryLowLight'
 
 interface MediumButtonProps extends StyleProps {
-  buttonText: React.ReactNode
+  buttonText: ReactNode
   buttonType?: MediumButtonTypes
   disabled?: boolean
   iconName?: IconName
   buttonCategory?: ButtonCategory
-  onClick: React.MouseEventHandler
+  onClick: MouseEventHandler
 }
 
 export function MediumButton(props: MediumButtonProps): JSX.Element {
diff --git a/app/src/atoms/buttons/SmallButton.tsx b/app/src/atoms/buttons/SmallButton.tsx
index e659d52fd58..7ad8c3d1a99 100644
--- a/app/src/atoms/buttons/SmallButton.tsx
+++ b/app/src/atoms/buttons/SmallButton.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import {
   ALIGN_CENTER,
@@ -15,6 +14,8 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 import { ODD_FOCUS_VISIBLE } from './constants'
+
+import type { MouseEventHandler, ReactNode } from 'react'
 import type { IconName, StyleProps } from '@opentrons/components'
 
 export type SmallButtonTypes =
@@ -28,9 +29,9 @@ export type ButtonCategory = 'default' | 'rounded'
 
 export type IconPlacement = 'startIcon' | 'endIcon'
 interface SmallButtonProps extends StyleProps {
-  onClick: React.MouseEventHandler
+  onClick: MouseEventHandler
   buttonType?: SmallButtonTypes
-  buttonText: React.ReactNode
+  buttonText: ReactNode
   iconPlacement?: IconPlacement | null
   iconName?: IconName | null
   buttonCategory?: ButtonCategory // if not specified, it will be 'default'
diff --git a/app/src/atoms/buttons/SubmitPrimaryButton.tsx b/app/src/atoms/buttons/SubmitPrimaryButton.tsx
index cdbf3442a65..cc53717bab0 100644
--- a/app/src/atoms/buttons/SubmitPrimaryButton.tsx
+++ b/app/src/atoms/buttons/SubmitPrimaryButton.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import {
   SPACING,
@@ -8,10 +7,12 @@ import {
   styleProps,
 } from '@opentrons/components'
 
+import type { MouseEvent } from 'react'
+
 interface SubmitPrimaryButtonProps {
   form: string
   value: string
-  onClick?: (event: React.MouseEvent<HTMLInputElement>) => unknown
+  onClick?: (event: MouseEvent<HTMLInputElement>) => unknown
   disabled?: boolean
 }
 export const SubmitPrimaryButton = (
diff --git a/app/src/atoms/buttons/TextOnlyButton.tsx b/app/src/atoms/buttons/TextOnlyButton.tsx
index de3bbc969ab..0acdaf058ed 100644
--- a/app/src/atoms/buttons/TextOnlyButton.tsx
+++ b/app/src/atoms/buttons/TextOnlyButton.tsx
@@ -1,7 +1,8 @@
-import type * as React from 'react'
+import { css } from 'styled-components'
 import { Btn, StyledText, COLORS, RESPONSIVENESS } from '@opentrons/components'
+
+import type { ReactNode } from 'react'
 import type { StyleProps } from '@opentrons/components'
-import { css } from 'styled-components'
 
 const GO_BACK_BUTTON_STYLE = css`
   color: ${COLORS.grey50};
@@ -26,7 +27,7 @@ const GO_BACK_BUTTON_DISABLED_STYLE = css`
 
 interface TextOnlyButtonProps extends StyleProps {
   onClick: () => void
-  buttonText: React.ReactNode
+  buttonText: ReactNode
   disabled?: boolean
 }
 
diff --git a/app/src/atoms/buttons/ToggleButton.tsx b/app/src/atoms/buttons/ToggleButton.tsx
index b814f45da1d..42efbde32fb 100644
--- a/app/src/atoms/buttons/ToggleButton.tsx
+++ b/app/src/atoms/buttons/ToggleButton.tsx
@@ -1,8 +1,8 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 
-import { Btn, Icon, COLORS, SIZE_1, SIZE_2 } from '@opentrons/components'
+import { Btn, COLORS, Icon } from '@opentrons/components'
 
+import type { MouseEvent } from 'react'
 import type { StyleProps } from '@opentrons/components'
 
 const TOGGLE_DISABLED_STYLES = css`
@@ -42,7 +42,7 @@ interface ToggleButtonProps extends StyleProps {
   toggledOn: boolean
   disabled?: boolean | null
   id?: string
-  onClick?: (e: React.MouseEvent) => unknown
+  onClick?: (e: MouseEvent) => unknown
 }
 
 export const ToggleButton = (props: ToggleButtonProps): JSX.Element => {
@@ -55,12 +55,12 @@ export const ToggleButton = (props: ToggleButtonProps): JSX.Element => {
       role="switch"
       aria-label={label}
       aria-checked={toggledOn}
-      size={size ?? SIZE_2}
+      size={size ?? '2rem'}
       css={props.toggledOn ? TOGGLE_ENABLED_STYLES : TOGGLE_DISABLED_STYLES}
       {...buttonProps}
     >
       {/* TODO(bh, 2022-10-05): implement small and large sizes from design system */}
-      <Icon name={iconName} height={SIZE_1} />
+      <Icon name={iconName} height="1rem" />
     </Btn>
   )
 }
diff --git a/app/src/atoms/buttons/__tests__/BackButton.test.tsx b/app/src/atoms/buttons/__tests__/BackButton.test.tsx
index 510abd0ee7d..67a65d107da 100644
--- a/app/src/atoms/buttons/__tests__/BackButton.test.tsx
+++ b/app/src/atoms/buttons/__tests__/BackButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -9,7 +8,9 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { BackButton } from '..'
 
-const render = (props?: React.HTMLProps<HTMLButtonElement>) => {
+import type { HTMLProps } from 'react'
+
+const render = (props?: HTMLProps<HTMLButtonElement>) => {
   return renderWithProviders(
     <MemoryRouter
       initialEntries={['/previous-page', '/current-page']}
diff --git a/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx b/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx
index de2bcd49e24..6a5804580b1 100644
--- a/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx
+++ b/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'
@@ -8,14 +7,16 @@ import { i18n } from '/app/i18n'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { FloatingActionButton } from '..'
 
-const render = (props: React.ComponentProps<typeof FloatingActionButton>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof FloatingActionButton>) => {
   return renderWithProviders(<FloatingActionButton {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('FloatingActionButton', () => {
-  let props: React.ComponentProps<typeof FloatingActionButton>
+  let props: ComponentProps<typeof FloatingActionButton>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/atoms/buttons/__tests__/MediumButton.test.tsx b/app/src/atoms/buttons/__tests__/MediumButton.test.tsx
index 988248413d9..1ce59db9217 100644
--- a/app/src/atoms/buttons/__tests__/MediumButton.test.tsx
+++ b/app/src/atoms/buttons/__tests__/MediumButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import '@testing-library/jest-dom/vitest'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -7,12 +6,14 @@ import { renderWithProviders } from '/app/__testing-utils__'
 
 import { MediumButton } from '../MediumButton'
 
-const render = (props: React.ComponentProps<typeof MediumButton>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof MediumButton>) => {
   return renderWithProviders(<MediumButton {...props} />)[0]
 }
 
 describe('MediumButton', () => {
-  let props: React.ComponentProps<typeof MediumButton>
+  let props: ComponentProps<typeof MediumButton>
   beforeEach(() => {
     props = {
       onClick: vi.fn(),
diff --git a/app/src/atoms/buttons/__tests__/QuaternaryButton.test.tsx b/app/src/atoms/buttons/__tests__/QuaternaryButton.test.tsx
index 4e10831c73c..7fd27eb874c 100644
--- a/app/src/atoms/buttons/__tests__/QuaternaryButton.test.tsx
+++ b/app/src/atoms/buttons/__tests__/QuaternaryButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import '@testing-library/jest-dom/vitest'
 import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { screen } from '@testing-library/react'
@@ -7,6 +6,8 @@ import { renderWithProviders } from '/app/__testing-utils__'
 
 import { QuaternaryButton } from '..'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('styled-components', async () => {
   const actual = await vi.importActual(
     'styled-components/dist/styled-components.browser.esm.js'
@@ -14,12 +15,12 @@ vi.mock('styled-components', async () => {
   return actual
 })
 
-const render = (props: React.ComponentProps<typeof QuaternaryButton>) => {
+const render = (props: ComponentProps<typeof QuaternaryButton>) => {
   return renderWithProviders(<QuaternaryButton {...props} />)[0]
 }
 
 describe('QuaternaryButton', () => {
-  let props: React.ComponentProps<typeof QuaternaryButton>
+  let props: ComponentProps<typeof QuaternaryButton>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/atoms/buttons/__tests__/SmallButton.test.tsx b/app/src/atoms/buttons/__tests__/SmallButton.test.tsx
index 283f21daf4e..84341d3b39b 100644
--- a/app/src/atoms/buttons/__tests__/SmallButton.test.tsx
+++ b/app/src/atoms/buttons/__tests__/SmallButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -7,12 +6,14 @@ import { COLORS, BORDERS } from '@opentrons/components'
 import { SmallButton } from '../SmallButton'
 import { renderWithProviders } from '/app/__testing-utils__'
 
-const render = (props: React.ComponentProps<typeof SmallButton>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof SmallButton>) => {
   return renderWithProviders(<SmallButton {...props} />)[0]
 }
 
 describe('SmallButton', () => {
-  let props: React.ComponentProps<typeof SmallButton>
+  let props: ComponentProps<typeof SmallButton>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/atoms/buttons/__tests__/SubmitPrimaryButton.test.tsx b/app/src/atoms/buttons/__tests__/SubmitPrimaryButton.test.tsx
index a62ba9c4a95..6af258d9d3f 100644
--- a/app/src/atoms/buttons/__tests__/SubmitPrimaryButton.test.tsx
+++ b/app/src/atoms/buttons/__tests__/SubmitPrimaryButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -6,15 +5,16 @@ import { COLORS, SPACING, TYPOGRAPHY, BORDERS } from '@opentrons/components'
 import { renderWithProviders } from '/app/__testing-utils__'
 
 import { SubmitPrimaryButton } from '..'
+import type { ComponentProps } from 'react'
 
 const mockOnClick = vi.fn()
 
-const render = (props: React.ComponentProps<typeof SubmitPrimaryButton>) => {
+const render = (props: ComponentProps<typeof SubmitPrimaryButton>) => {
   return renderWithProviders(<SubmitPrimaryButton {...props} />)[0]
 }
 
 describe('SubmitPrimaryButton', () => {
-  let props: React.ComponentProps<typeof SubmitPrimaryButton>
+  let props: ComponentProps<typeof SubmitPrimaryButton>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/atoms/buttons/__tests__/TertiaryButton.test.tsx b/app/src/atoms/buttons/__tests__/TertiaryButton.test.tsx
index 4a3f95369c8..30b15c5bea2 100644
--- a/app/src/atoms/buttons/__tests__/TertiaryButton.test.tsx
+++ b/app/src/atoms/buttons/__tests__/TertiaryButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -7,12 +6,14 @@ import { COLORS, SPACING, TYPOGRAPHY, BORDERS } from '@opentrons/components'
 
 import { TertiaryButton } from '..'
 
-const render = (props: React.ComponentProps<typeof TertiaryButton>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof TertiaryButton>) => {
   return renderWithProviders(<TertiaryButton {...props} />)[0]
 }
 
 describe('TertiaryButton', () => {
-  let props: React.ComponentProps<typeof TertiaryButton>
+  let props: ComponentProps<typeof TertiaryButton>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/atoms/buttons/__tests__/ToggleButton.test.tsx b/app/src/atoms/buttons/__tests__/ToggleButton.test.tsx
index 3f61d43c5d0..29991d4ae0f 100644
--- a/app/src/atoms/buttons/__tests__/ToggleButton.test.tsx
+++ b/app/src/atoms/buttons/__tests__/ToggleButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { screen, fireEvent } from '@testing-library/react'
 import { COLORS, SIZE_2 } from '@opentrons/components'
@@ -6,14 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 
 import { ToggleButton } from '..'
 
+import type { ComponentProps } from 'react'
+
 const mockOnClick = vi.fn()
 
-const render = (props: React.ComponentProps<typeof ToggleButton>) => {
+const render = (props: ComponentProps<typeof ToggleButton>) => {
   return renderWithProviders(<ToggleButton {...props} />)[0]
 }
 
 describe('ToggleButton', () => {
-  let props: React.ComponentProps<typeof ToggleButton>
+  let props: ComponentProps<typeof ToggleButton>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/atoms/structure/Divider.tsx b/app/src/atoms/structure/Divider.tsx
index db55ad84f44..a253f27dce4 100644
--- a/app/src/atoms/structure/Divider.tsx
+++ b/app/src/atoms/structure/Divider.tsx
@@ -1,7 +1,7 @@
-import type * as React from 'react'
 import { Box, COLORS, SPACING } from '@opentrons/components'
+import type { ComponentProps } from 'react'
 
-type Props = React.ComponentProps<typeof Box>
+type Props = ComponentProps<typeof Box>
 
 export function Divider(props: Props): JSX.Element {
   const { marginY } = props
diff --git a/app/src/atoms/structure/Line.tsx b/app/src/atoms/structure/Line.tsx
index ecbbecc24cd..8eb456233f6 100644
--- a/app/src/atoms/structure/Line.tsx
+++ b/app/src/atoms/structure/Line.tsx
@@ -1,7 +1,7 @@
-import type * as React from 'react'
 import { Box, BORDERS } from '@opentrons/components'
+import type { ComponentProps } from 'react'
 
-type Props = React.ComponentProps<typeof Box>
+type Props = ComponentProps<typeof Box>
 
 export function Line(props: Props): JSX.Element {
   return <Box borderBottom={BORDERS.lineBorder} {...props} data-testid="line" />
diff --git a/app/src/atoms/structure/__tests__/Divider.test.tsx b/app/src/atoms/structure/__tests__/Divider.test.tsx
index 27460be938d..0aa40edb9d4 100644
--- a/app/src/atoms/structure/__tests__/Divider.test.tsx
+++ b/app/src/atoms/structure/__tests__/Divider.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'
@@ -6,12 +5,14 @@ import { SPACING, COLORS } from '@opentrons/components'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { Divider } from '../index'
 
-const render = (props: React.ComponentProps<typeof Divider>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Divider>) => {
   return renderWithProviders(<Divider {...props} />)[0]
 }
 
 describe('Divider', () => {
-  let props: React.ComponentProps<typeof Divider>
+  let props: ComponentProps<typeof Divider>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/atoms/structure/__tests__/Line.test.tsx b/app/src/atoms/structure/__tests__/Line.test.tsx
index d9a9caefba2..c4e3e267565 100644
--- a/app/src/atoms/structure/__tests__/Line.test.tsx
+++ b/app/src/atoms/structure/__tests__/Line.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'
@@ -6,12 +5,14 @@ import { SPACING, COLORS } from '@opentrons/components'
 import { Line } from '../index'
 import { renderWithProviders } from '/app/__testing-utils__'
 
-const render = (props: React.ComponentProps<typeof Line>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Line>) => {
   return renderWithProviders(<Line {...props} />)[0]
 }
 
 describe('Line', () => {
-  let props: React.ComponentProps<typeof Line>
+  let props: ComponentProps<typeof Line>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/molecules/BackgroundOverlay/__tests__/BackgroundOverlay.test.tsx b/app/src/molecules/BackgroundOverlay/__tests__/BackgroundOverlay.test.tsx
index e09b3c11765..882c4a644b4 100644
--- a/app/src/molecules/BackgroundOverlay/__tests__/BackgroundOverlay.test.tsx
+++ b/app/src/molecules/BackgroundOverlay/__tests__/BackgroundOverlay.test.tsx
@@ -1,15 +1,16 @@
-import type * as React from 'react'
 import { describe, it, expect, vi } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { BackgroundOverlay } from '..'
 
-const render = (props: React.ComponentProps<typeof BackgroundOverlay>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof BackgroundOverlay>) => {
   return renderWithProviders(<BackgroundOverlay {...props} />)[0]
 }
 
 describe('BackgroundOverlay', () => {
-  let props: React.ComponentProps<typeof BackgroundOverlay>
+  let props: ComponentProps<typeof BackgroundOverlay>
   it('renders background overlay', () => {
     props = { onClick: vi.fn() }
     render(props)
diff --git a/app/src/molecules/BackgroundOverlay/index.tsx b/app/src/molecules/BackgroundOverlay/index.tsx
index 3d6c6d976c6..c0a711ffa91 100644
--- a/app/src/molecules/BackgroundOverlay/index.tsx
+++ b/app/src/molecules/BackgroundOverlay/index.tsx
@@ -1,8 +1,9 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 
 import { COLORS, Flex, POSITION_FIXED } from '@opentrons/components'
 
+import type { ComponentProps, MouseEventHandler } from 'react'
+
 const BACKGROUND_OVERLAY_STYLE = css`
   position: ${POSITION_FIXED};
   inset: 0;
@@ -10,10 +11,9 @@ const BACKGROUND_OVERLAY_STYLE = css`
   background-color: ${COLORS.black90}${COLORS.opacity60HexCode};
 `
 
-export interface BackgroundOverlayProps
-  extends React.ComponentProps<typeof Flex> {
+export interface BackgroundOverlayProps extends ComponentProps<typeof Flex> {
   //  onClick handler so when you click anywhere in the overlay, the modal/menu closes
-  onClick: React.MouseEventHandler
+  onClick: MouseEventHandler
 }
 
 export function BackgroundOverlay(props: BackgroundOverlayProps): JSX.Element {
diff --git a/app/src/molecules/CardButton/__tests__/CardButton.test.tsx b/app/src/molecules/CardButton/__tests__/CardButton.test.tsx
index 820dfbdc4e9..177d61dfd2d 100644
--- a/app/src/molecules/CardButton/__tests__/CardButton.test.tsx
+++ b/app/src/molecules/CardButton/__tests__/CardButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
@@ -7,6 +6,8 @@ import { COLORS } from '@opentrons/components'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { CardButton } from '..'
+
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 const mockNavigate = vi.fn()
@@ -19,7 +20,7 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof CardButton>) => {
+const render = (props: ComponentProps<typeof CardButton>) => {
   return renderWithProviders(
     <MemoryRouter>
       <CardButton {...props} />
@@ -31,7 +32,7 @@ const render = (props: React.ComponentProps<typeof CardButton>) => {
 }
 
 describe('CardButton', () => {
-  let props: React.ComponentProps<typeof CardButton>
+  let props: ComponentProps<typeof CardButton>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/molecules/Command/CommandText.tsx b/app/src/molecules/Command/CommandText.tsx
index 9c43afb4b02..a2d872af5a8 100644
--- a/app/src/molecules/Command/CommandText.tsx
+++ b/app/src/molecules/Command/CommandText.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { pick } from 'lodash'
 import { css } from 'styled-components'
 
@@ -14,6 +13,7 @@ import {
 
 import { useCommandTextString } from '/app/local-resources/commands'
 
+import type { ComponentProps } from 'react'
 import type {
   LabwareDefinition2,
   RobotType,
@@ -27,13 +27,13 @@ import type {
 } from '/app/local-resources/commands'
 
 interface LegacySTProps {
-  as?: React.ComponentProps<typeof LegacyStyledText>['as']
+  as?: ComponentProps<typeof LegacyStyledText>['as']
   modernStyledTextDefaults?: false
 }
 
 interface ModernSTProps {
-  desktopStyle?: React.ComponentProps<typeof StyledText>['desktopStyle']
-  oddStyle?: React.ComponentProps<typeof StyledText>['oddStyle']
+  desktopStyle?: ComponentProps<typeof StyledText>['desktopStyle']
+  oddStyle?: ComponentProps<typeof StyledText>['oddStyle']
   modernStyledTextDefaults: true
 }
 
diff --git a/app/src/molecules/FileUpload/__tests__/FileUpload.test.tsx b/app/src/molecules/FileUpload/__tests__/FileUpload.test.tsx
index cd5b5adfd82..9f3c22db269 100644
--- a/app/src/molecules/FileUpload/__tests__/FileUpload.test.tsx
+++ b/app/src/molecules/FileUpload/__tests__/FileUpload.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -7,7 +6,9 @@ import { i18n } from '/app/i18n'
 import { FileUpload } from '..'
 import testFile from './test-file.png'
 
-const render = (props: React.ComponentProps<typeof FileUpload>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof FileUpload>) => {
   return renderWithProviders(<FileUpload {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -16,7 +17,7 @@ const render = (props: React.ComponentProps<typeof FileUpload>) => {
 const handleClick = vi.fn()
 
 describe('FileUpload', () => {
-  let props: React.ComponentProps<typeof FileUpload>
+  let props: ComponentProps<typeof FileUpload>
 
   beforeEach(() => {
     const file = new File([testFile], 'a-file-to-test.png')
diff --git a/app/src/molecules/GenericWizardTile/__tests__/GenericWizardTile.test.tsx b/app/src/molecules/GenericWizardTile/__tests__/GenericWizardTile.test.tsx
index 1f53800ff6d..ee1d680d4d2 100644
--- a/app/src/molecules/GenericWizardTile/__tests__/GenericWizardTile.test.tsx
+++ b/app/src/molecules/GenericWizardTile/__tests__/GenericWizardTile.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import '@testing-library/jest-dom/vitest'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -7,16 +6,18 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { getIsOnDevice } from '/app/redux/config'
 import { GenericWizardTile } from '..'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/config')
 
-const render = (props: React.ComponentProps<typeof GenericWizardTile>) => {
+const render = (props: ComponentProps<typeof GenericWizardTile>) => {
   return renderWithProviders(<GenericWizardTile {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('GenericWizardTile', () => {
-  let props: React.ComponentProps<typeof GenericWizardTile>
+  let props: ComponentProps<typeof GenericWizardTile>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/molecules/GenericWizardTile/index.tsx b/app/src/molecules/GenericWizardTile/index.tsx
index 24883a6ffea..3948daa292a 100644
--- a/app/src/molecules/GenericWizardTile/index.tsx
+++ b/app/src/molecules/GenericWizardTile/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useSelector } from 'react-redux'
 import styled, { css } from 'styled-components'
 import { useTranslation } from 'react-i18next'
@@ -26,6 +25,8 @@ import { getIsOnDevice } from '/app/redux/config'
 import { NeedHelpLink } from '/app/molecules/OT2CalibrationNeedHelpLink'
 import { SmallButton, TextOnlyButton } from '/app/atoms/buttons'
 
+import type { ReactNode } from 'react'
+
 const ALIGN_BUTTONS = css`
   align-items: ${ALIGN_FLEX_END};
 
@@ -59,13 +60,13 @@ const TILE_CONTAINER_STYLE = css`
   }
 `
 export interface GenericWizardTileProps {
-  rightHandBody: React.ReactNode
-  bodyText: React.ReactNode
-  header: string | React.ReactNode
+  rightHandBody: ReactNode
+  bodyText: ReactNode
+  header: string | ReactNode
   getHelp?: string
   back?: () => void
   proceed?: () => void
-  proceedButtonText?: React.ReactNode
+  proceedButtonText?: ReactNode
   proceedIsDisabled?: boolean
   proceedButton?: JSX.Element
   backIsDisabled?: boolean
diff --git a/app/src/molecules/InProgressModal/InProgressModal.tsx b/app/src/molecules/InProgressModal/InProgressModal.tsx
index c6fefe761a2..82693b34429 100644
--- a/app/src/molecules/InProgressModal/InProgressModal.tsx
+++ b/app/src/molecules/InProgressModal/InProgressModal.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import {
   ALIGN_CENTER,
@@ -13,9 +12,11 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
+
 interface Props {
   //  optional override of the spinner
-  alternativeSpinner?: React.ReactNode
+  alternativeSpinner?: ReactNode
   description?: string
   body?: string
   children?: JSX.Element
diff --git a/app/src/molecules/InProgressModal/__tests__/InProgressModal.test.tsx b/app/src/molecules/InProgressModal/__tests__/InProgressModal.test.tsx
index f670fa221c3..db7ac2294cf 100644
--- a/app/src/molecules/InProgressModal/__tests__/InProgressModal.test.tsx
+++ b/app/src/molecules/InProgressModal/__tests__/InProgressModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi } from 'vitest'
 import { i18n } from '/app/i18n'
@@ -6,15 +5,17 @@ import { getIsOnDevice } from '/app/redux/config'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { InProgressModal } from '../InProgressModal'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/config')
 
-const render = (props: React.ComponentProps<typeof InProgressModal>) => {
+const render = (props: ComponentProps<typeof InProgressModal>) => {
   return renderWithProviders(<InProgressModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 describe('InProgressModal', () => {
-  let props: React.ComponentProps<typeof InProgressModal>
+  let props: ComponentProps<typeof InProgressModal>
   beforeEach(() => {
     vi.mocked(getIsOnDevice).mockReturnValue(false)
   })
diff --git a/app/src/molecules/InfoMessage/__tests__/InfoMessage.test.tsx b/app/src/molecules/InfoMessage/__tests__/InfoMessage.test.tsx
index 5ff6948976f..378e1eff503 100644
--- a/app/src/molecules/InfoMessage/__tests__/InfoMessage.test.tsx
+++ b/app/src/molecules/InfoMessage/__tests__/InfoMessage.test.tsx
@@ -1,18 +1,19 @@
-import type * as React from 'react'
 import { describe, it, beforeEach } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { screen } from '@testing-library/react'
 import { i18n } from '/app/i18n'
 import { InfoMessage } from '..'
 
-const render = (props: React.ComponentProps<typeof InfoMessage>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof InfoMessage>) => {
   return renderWithProviders(<InfoMessage {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('InfoMessage', () => {
-  let props: React.ComponentProps<typeof InfoMessage>
+  let props: ComponentProps<typeof InfoMessage>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/molecules/InstrumentCard/index.tsx b/app/src/molecules/InstrumentCard/index.tsx
index edcee546c32..2cd838a08bd 100644
--- a/app/src/molecules/InstrumentCard/index.tsx
+++ b/app/src/molecules/InstrumentCard/index.tsx
@@ -1,5 +1,3 @@
-import type * as React from 'react'
-
 import {
   ALIGN_CENTER,
   ALIGN_FLEX_START,
@@ -22,6 +20,7 @@ import flexGripper from '/app/assets/images/flex_gripper.png'
 
 import { MenuOverlay } from './MenuOverlay'
 
+import type { ReactNode } from 'react'
 import type { InstrumentDiagramProps, StyleProps } from '@opentrons/components'
 import type { MenuOverlayItemProps } from './MenuOverlay'
 
@@ -33,7 +32,7 @@ interface InstrumentCardProps extends StyleProps {
   instrumentDiagramProps?: InstrumentDiagramProps
   // special casing the gripper at least for now
   isGripperAttached?: boolean
-  banner?: React.ReactNode
+  banner?: ReactNode
   isEstopNotDisengaged: boolean
 }
 
diff --git a/app/src/molecules/InterventionModal/InterventionContent/index.tsx b/app/src/molecules/InterventionModal/InterventionContent/index.tsx
index 8d2bbba9c8c..e9b156cf0e6 100644
--- a/app/src/molecules/InterventionModal/InterventionContent/index.tsx
+++ b/app/src/molecules/InterventionModal/InterventionContent/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import {
   Flex,
   StyledText,
@@ -7,15 +6,17 @@ import {
   RESPONSIVENESS,
 } from '@opentrons/components'
 import { InlineNotification } from '/app/atoms/InlineNotification'
-
 import { InterventionInfo } from './InterventionInfo'
+
+import type { ComponentProps } from 'react'
+
 export type { InterventionInfoProps } from './InterventionInfo'
 export { InterventionInfo }
 
 export interface InterventionContentProps {
   headline: string
-  infoProps: React.ComponentProps<typeof InterventionInfo>
-  notificationProps?: React.ComponentProps<typeof InlineNotification>
+  infoProps: ComponentProps<typeof InterventionInfo>
+  notificationProps?: ComponentProps<typeof InlineNotification>
 }
 
 export function InterventionContent({
diff --git a/app/src/molecules/InterventionModal/OneColumn.tsx b/app/src/molecules/InterventionModal/OneColumn.tsx
index 35a37dd10f9..8fca9f26ff3 100644
--- a/app/src/molecules/InterventionModal/OneColumn.tsx
+++ b/app/src/molecules/InterventionModal/OneColumn.tsx
@@ -1,14 +1,14 @@
-import type * as React from 'react'
-
 import {
   Flex,
   DIRECTION_COLUMN,
   JUSTIFY_SPACE_BETWEEN,
 } from '@opentrons/components'
+
+import type { ReactNode } from 'react'
 import type { StyleProps } from '@opentrons/components'
 
 export interface OneColumnProps extends StyleProps {
-  children: React.ReactNode
+  children: ReactNode
 }
 
 export function OneColumn({
diff --git a/app/src/molecules/InterventionModal/OneColumnOrTwoColumn.tsx b/app/src/molecules/InterventionModal/OneColumnOrTwoColumn.tsx
index db25d343be5..0a02f3397ac 100644
--- a/app/src/molecules/InterventionModal/OneColumnOrTwoColumn.tsx
+++ b/app/src/molecules/InterventionModal/OneColumnOrTwoColumn.tsx
@@ -1,5 +1,3 @@
-import type * as React from 'react'
-
 import { css } from 'styled-components'
 import {
   Flex,
@@ -9,11 +7,13 @@ import {
   WRAP,
   RESPONSIVENESS,
 } from '@opentrons/components'
-import type { StyleProps } from '@opentrons/components'
 import { TWO_COLUMN_ELEMENT_MIN_WIDTH } from './constants'
 
+import type { ReactNode } from 'react'
+import type { StyleProps } from '@opentrons/components'
+
 export interface OneColumnOrTwoColumnProps extends StyleProps {
-  children: [React.ReactNode, React.ReactNode]
+  children: [ReactNode, ReactNode]
 }
 
 export function OneColumnOrTwoColumn({
diff --git a/app/src/molecules/InterventionModal/TwoColumn.tsx b/app/src/molecules/InterventionModal/TwoColumn.tsx
index fc9072232be..600386ec60f 100644
--- a/app/src/molecules/InterventionModal/TwoColumn.tsx
+++ b/app/src/molecules/InterventionModal/TwoColumn.tsx
@@ -1,11 +1,11 @@
-import type * as React from 'react'
-
 import { Flex, Box, DIRECTION_ROW, SPACING, WRAP } from '@opentrons/components'
 import type { StyleProps } from '@opentrons/components'
 import { TWO_COLUMN_ELEMENT_MIN_WIDTH } from './constants'
 
+import type { ReactNode } from 'react'
+
 export interface TwoColumnProps extends StyleProps {
-  children: [React.ReactNode, React.ReactNode]
+  children: [ReactNode, ReactNode]
 }
 
 export function TwoColumn({
diff --git a/app/src/molecules/InterventionModal/__tests__/InterventionModal.test.tsx b/app/src/molecules/InterventionModal/__tests__/InterventionModal.test.tsx
index a063bee13bc..bdbe4c95e70 100644
--- a/app/src/molecules/InterventionModal/__tests__/InterventionModal.test.tsx
+++ b/app/src/molecules/InterventionModal/__tests__/InterventionModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, describe, it, expect, beforeEach } from 'vitest'
 import { when } from 'vitest-when'
 import '@testing-library/jest-dom/vitest'
@@ -12,6 +11,7 @@ import { getIsOnDevice } from '/app/redux/config'
 
 import { InterventionModal } from '../'
 
+import type { ComponentProps } from 'react'
 import type { ModalType } from '../'
 import type { State } from '/app/redux/types'
 
@@ -23,7 +23,7 @@ const MOCK_STATE: State = {
   },
 } as any
 
-const render = (props: React.ComponentProps<typeof InterventionModal>) => {
+const render = (props: ComponentProps<typeof InterventionModal>) => {
   return renderWithProviders(<InterventionModal {...props} />, {
     i18nInstance: i18n,
     initialState: MOCK_STATE,
@@ -31,7 +31,7 @@ const render = (props: React.ComponentProps<typeof InterventionModal>) => {
 }
 
 describe('InterventionModal', () => {
-  let props: React.ComponentProps<typeof InterventionModal>
+  let props: ComponentProps<typeof InterventionModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/molecules/InterventionModal/__tests__/ModalContentOneColSimpleButtons.test.tsx b/app/src/molecules/InterventionModal/__tests__/ModalContentOneColSimpleButtons.test.tsx
index b68e8a379a0..bb25d211619 100644
--- a/app/src/molecules/InterventionModal/__tests__/ModalContentOneColSimpleButtons.test.tsx
+++ b/app/src/molecules/InterventionModal/__tests__/ModalContentOneColSimpleButtons.test.tsx
@@ -1,9 +1,10 @@
-import type * as React from 'react'
 import { vi, describe, it, expect } from 'vitest'
 import { render, screen, fireEvent } from '@testing-library/react'
 
 import { ModalContentOneColSimpleButtons } from '../ModalContentOneColSimpleButtons'
 
+import type { ChangeEventHandler } from 'react'
+
 /* eslint-disable testing-library/no-node-access */
 const inputElForButtonFromButtonText = (text: string): HTMLInputElement =>
   ((screen.getByText(text)?.parentElement?.parentElement
@@ -88,7 +89,7 @@ describe('InterventionModal', () => {
         firstButton={{
           label: 'first button',
           value: 'first',
-          onChange: onChange as React.ChangeEventHandler<HTMLInputElement>,
+          onChange: onChange as ChangeEventHandler<HTMLInputElement>,
         }}
         secondButton={{ label: 'second button', value: 'second' }}
         furtherButtons={[{ label: 'third button', value: 'third' }]}
diff --git a/app/src/molecules/InterventionModal/index.tsx b/app/src/molecules/InterventionModal/index.tsx
index 679d3b3d1f8..3e4801d4922 100644
--- a/app/src/molecules/InterventionModal/index.tsx
+++ b/app/src/molecules/InterventionModal/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useSelector } from 'react-redux'
 import { css } from 'styled-components'
 
@@ -32,6 +31,7 @@ import { DescriptionContent } from './DescriptionContent'
 import { DeckMapContent } from './DeckMapContent'
 import { CategorizedStepContent } from './CategorizedStepContent'
 
+import type { MouseEvent, ReactNode } from 'react'
 import type { FlattenSimpleInterpolation } from 'styled-components'
 import type { IconName } from '@opentrons/components'
 
@@ -116,9 +116,9 @@ const ERROR_COLOR = COLORS.red50
 
 export interface InterventionModalProps {
   /** Optional modal title heading. Aligned to the left. */
-  titleHeading?: React.ReactNode
+  titleHeading?: ReactNode
   /** Optional modal heading right of the icon. Aligned right if titleHeading is supplied, otherwise aligned left. **/
-  iconHeading?: React.ReactNode
+  iconHeading?: ReactNode
   /** Optional onClick for the icon heading and icon. */
   iconHeadingOnClick?: () => void
   /** overall style hint */
@@ -128,7 +128,7 @@ export interface InterventionModalProps {
   /* Optional icon size override. */
   iconSize?: string
   /** modal contents */
-  children: React.ReactNode
+  children: ReactNode
 }
 
 export function InterventionModal({
@@ -160,7 +160,7 @@ export function InterventionModal({
           {...modalStyle}
           flexDirection={DIRECTION_COLUMN}
           border={border}
-          onClick={(e: React.MouseEvent) => {
+          onClick={(e: MouseEvent) => {
             e.stopPropagation()
           }}
         >
diff --git a/app/src/molecules/InterventionModal/story-utils/StandIn.tsx b/app/src/molecules/InterventionModal/story-utils/StandIn.tsx
index 04aa5690e7a..56153551df3 100644
--- a/app/src/molecules/InterventionModal/story-utils/StandIn.tsx
+++ b/app/src/molecules/InterventionModal/story-utils/StandIn.tsx
@@ -1,10 +1,10 @@
-import type * as React from 'react'
 import { Box, BORDERS } from '@opentrons/components'
+import type { ReactNode } from 'react'
 
 export function StandInContent({
   children,
 }: {
-  children?: React.ReactNode
+  children?: ReactNode
 }): JSX.Element {
   return (
     <Box
diff --git a/app/src/molecules/JogControls/ControlContainer.tsx b/app/src/molecules/JogControls/ControlContainer.tsx
index 02e3c0b1692..a319b4f5b63 100644
--- a/app/src/molecules/JogControls/ControlContainer.tsx
+++ b/app/src/molecules/JogControls/ControlContainer.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import {
   BORDERS,
@@ -9,11 +8,13 @@ import {
   SPACING,
   LegacyStyledText,
 } from '@opentrons/components'
+
+import type { ReactNode } from 'react'
 import type { StyleProps } from '@opentrons/components'
 
 interface ControlContainerProps extends StyleProps {
   title: string
-  children: React.ReactNode
+  children: ReactNode
 }
 
 const CONTROL_CHILDREN_STYLES = css`
diff --git a/app/src/molecules/JogControls/StepSizeControl.tsx b/app/src/molecules/JogControls/StepSizeControl.tsx
index 77d1e65b870..e8fd2d98860 100644
--- a/app/src/molecules/JogControls/StepSizeControl.tsx
+++ b/app/src/molecules/JogControls/StepSizeControl.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 import {
@@ -22,6 +21,7 @@ import {
 import { ControlContainer } from './ControlContainer'
 import { TouchControlButton } from './TouchControlButton'
 
+import type { MouseEvent } from 'react'
 import type { StepSize } from './types'
 
 const JUMP_SIZE_SUBTITLE = '- / +'
@@ -107,9 +107,7 @@ export function StepSizeControl(props: StepSizeControlProps): JSX.Element {
     if (i > 0) setCurrentStepSize(stepSizes[i - 1])
   }
 
-  const handleStepSelect = (
-    event: React.MouseEvent<HTMLButtonElement>
-  ): void => {
+  const handleStepSelect = (event: MouseEvent<HTMLButtonElement>): void => {
     setCurrentStepSize(Number(event.currentTarget.value) as StepSize)
     event.currentTarget.blur()
   }
diff --git a/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx b/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx
index fcc76f38505..0e26b805f16 100644
--- a/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx
+++ b/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -6,12 +5,14 @@ import { COLORS, SPACING, BORDERS, CURSOR_POINTER } from '@opentrons/components'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { MiniCard } from '../'
 
-const render = (props: React.ComponentProps<typeof MiniCard>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof MiniCard>) => {
   return renderWithProviders(<MiniCard {...props} />)[0]
 }
 
 describe('MiniCard', () => {
-  let props: React.ComponentProps<typeof MiniCard>
+  let props: ComponentProps<typeof MiniCard>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/molecules/MiniCard/index.tsx b/app/src/molecules/MiniCard/index.tsx
index b65ccbbb59d..d95c42e149f 100644
--- a/app/src/molecules/MiniCard/index.tsx
+++ b/app/src/molecules/MiniCard/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import {
   BORDERS,
@@ -8,12 +7,13 @@ import {
   SPACING,
 } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
 import type { StyleProps } from '@opentrons/components'
 
 interface MiniCardProps extends StyleProps {
   onClick: () => void
   isSelected: boolean
-  children: React.ReactNode
+  children: ReactNode
   isError?: boolean
   isWarning?: boolean
 }
diff --git a/app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx b/app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx
index 73c44639e51..6e20f8997fa 100644
--- a/app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx
+++ b/app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { COLORS, SPACING } from '@opentrons/components'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
@@ -6,6 +5,7 @@ import '@testing-library/jest-dom/vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { ModuleIcon } from '../'
 
+import type { ComponentProps } from 'react'
 import type { AttachedModule } from '/app/redux/modules/types'
 import type * as OpentronsComponents from '@opentrons/components'
 
@@ -17,7 +17,7 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof ModuleIcon>) => {
+const render = (props: ComponentProps<typeof ModuleIcon>) => {
   return renderWithProviders(<ModuleIcon {...props} />)[0]
 }
 
@@ -46,7 +46,7 @@ const mockHeaterShakerModule = {
 } as AttachedModule
 
 describe('ModuleIcon', () => {
-  let props: React.ComponentProps<typeof ModuleIcon>
+  let props: ComponentProps<typeof ModuleIcon>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/molecules/ModuleInfo/__tests__/ModuleInfo.test.tsx b/app/src/molecules/ModuleInfo/__tests__/ModuleInfo.test.tsx
index 1d732faeb18..de5eef75577 100644
--- a/app/src/molecules/ModuleInfo/__tests__/ModuleInfo.test.tsx
+++ b/app/src/molecules/ModuleInfo/__tests__/ModuleInfo.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -7,11 +6,13 @@ import { when } from 'vitest-when'
 import { i18n } from '/app/i18n'
 import { ModuleInfo } from '../ModuleInfo'
 import { useRunHasStarted } from '/app/resources/runs'
+
+import type { ComponentProps } from 'react'
 import type { ModuleModel, ModuleType } from '@opentrons/shared-data'
 
 vi.mock('/app/resources/runs')
 
-const render = (props: React.ComponentProps<typeof ModuleInfo>) => {
+const render = (props: ComponentProps<typeof ModuleInfo>) => {
   return renderWithProviders(<ModuleInfo {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -26,7 +27,7 @@ const mockTCModule = {
 const MOCK_RUN_ID = '1'
 
 describe('ModuleInfo', () => {
-  let props: React.ComponentProps<typeof ModuleInfo>
+  let props: ComponentProps<typeof ModuleInfo>
   beforeEach(() => {
     props = {
       moduleModel: mockTCModule.model,
diff --git a/app/src/molecules/NavTab/__tests__/NavTab.test.tsx b/app/src/molecules/NavTab/__tests__/NavTab.test.tsx
index 176c76b60cc..e6a2c9a504f 100644
--- a/app/src/molecules/NavTab/__tests__/NavTab.test.tsx
+++ b/app/src/molecules/NavTab/__tests__/NavTab.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
 import { describe, it, expect, beforeEach } from 'vitest'
@@ -7,7 +6,9 @@ import { SPACING, COLORS, TYPOGRAPHY, BORDERS } from '@opentrons/components'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { NavTab } from '..'
 
-const render = (props: React.ComponentProps<typeof NavTab>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof NavTab>) => {
   return renderWithProviders(
     <MemoryRouter>
       <NavTab {...props} />
@@ -16,7 +17,7 @@ const render = (props: React.ComponentProps<typeof NavTab>) => {
 }
 
 describe('NavTab', () => {
-  let props: React.ComponentProps<typeof NavTab>
+  let props: ComponentProps<typeof NavTab>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/molecules/NavTab/index.tsx b/app/src/molecules/NavTab/index.tsx
index e170da56e43..6cdf6cb0e6b 100644
--- a/app/src/molecules/NavTab/index.tsx
+++ b/app/src/molecules/NavTab/index.tsx
@@ -3,6 +3,8 @@ import { NavLink } from 'react-router-dom'
 
 import { BORDERS, COLORS, SPACING, TYPOGRAPHY } from '@opentrons/components'
 
+import type { ComponentProps } from 'react'
+
 export const TAB_BORDER_STYLE = css`
   border-bottom-style: ${BORDERS.styleSolid};
   border-bottom-width: 2px;
@@ -15,7 +17,7 @@ interface NavTabProps {
   disabled?: boolean
 }
 
-const StyledNavLink = styled(NavLink)<React.ComponentProps<typeof NavLink>>`
+const StyledNavLink = styled(NavLink)<ComponentProps<typeof NavLink>>`
   padding: 0 ${SPACING.spacing4} ${SPACING.spacing8};
   ${TYPOGRAPHY.labelSemiBold}
   color: ${COLORS.grey50};
diff --git a/app/src/molecules/ODDBackButton/__tests__/ODDBackButton.test.tsx b/app/src/molecules/ODDBackButton/__tests__/ODDBackButton.test.tsx
index 2b520279cf8..5b487b2e7dc 100644
--- a/app/src/molecules/ODDBackButton/__tests__/ODDBackButton.test.tsx
+++ b/app/src/molecules/ODDBackButton/__tests__/ODDBackButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import '@testing-library/jest-dom/vitest'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -6,12 +5,14 @@ import { COLORS } from '@opentrons/components'
 import { ODDBackButton } from '..'
 import { renderWithProviders } from '/app/__testing-utils__'
 
-const render = (props: React.ComponentProps<typeof ODDBackButton>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ODDBackButton>) => {
   return renderWithProviders(<ODDBackButton {...props} />)[0]
 }
 
 describe('ODDBackButton', () => {
-  let props: React.ComponentProps<typeof ODDBackButton>
+  let props: ComponentProps<typeof ODDBackButton>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/molecules/ODDBackButton/index.tsx b/app/src/molecules/ODDBackButton/index.tsx
index 396feaa5e19..0390dc21284 100644
--- a/app/src/molecules/ODDBackButton/index.tsx
+++ b/app/src/molecules/ODDBackButton/index.tsx
@@ -1,5 +1,3 @@
-import type * as React from 'react'
-
 import {
   ALIGN_CENTER,
   Btn,
@@ -11,8 +9,10 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 
+import type { HTMLProps } from 'react'
+
 export function ODDBackButton(
-  props: React.HTMLProps<HTMLButtonElement>
+  props: HTMLProps<HTMLButtonElement>
 ): JSX.Element {
   const { onClick, label } = props
 
diff --git a/app/src/molecules/OT2CalibrationNeedHelpLink/NeedHelpLink.tsx b/app/src/molecules/OT2CalibrationNeedHelpLink/NeedHelpLink.tsx
index a87a7808827..6dd9a5f8d86 100644
--- a/app/src/molecules/OT2CalibrationNeedHelpLink/NeedHelpLink.tsx
+++ b/app/src/molecules/OT2CalibrationNeedHelpLink/NeedHelpLink.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   Flex,
@@ -11,9 +10,11 @@ import {
   SPACING,
 } from '@opentrons/components'
 
+import type { ComponentProps } from 'react'
+
 const SUPPORT_PAGE_URL = 'https://support.opentrons.com/s/ot2-calibration'
 
-interface NeedHelpLinkProps extends React.ComponentProps<typeof Flex> {
+interface NeedHelpLinkProps extends ComponentProps<typeof Flex> {
   href?: string
 }
 
diff --git a/app/src/molecules/OddModal/OddModal.tsx b/app/src/molecules/OddModal/OddModal.tsx
index 9b32974000c..e95aaa1d9a4 100644
--- a/app/src/molecules/OddModal/OddModal.tsx
+++ b/app/src/molecules/OddModal/OddModal.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import {
   ALIGN_CENTER,
   BORDERS,
@@ -11,14 +10,15 @@ import {
 import { BackgroundOverlay } from '../BackgroundOverlay'
 import { OddModalHeader } from './OddModalHeader'
 
+import type { MouseEvent, MouseEventHandler, ReactNode } from 'react'
 import type { StyleProps } from '@opentrons/components'
 import type { OddModalHeaderBaseProps, ModalSize } from './types'
 
 interface OddModalProps extends StyleProps {
   /** clicking anywhere outside of the modal closes it  */
-  onOutsideClick?: React.MouseEventHandler
+  onOutsideClick?: MouseEventHandler
   /** modal content */
-  children: React.ReactNode
+  children: ReactNode
   /** for small, medium, or large modal sizes, medium by default */
   modalSize?: ModalSize
   /** see OddModalHeader component for more details */
@@ -66,7 +66,7 @@ export function OddModal(props: OddModalProps): JSX.Element {
         margin={SPACING.spacing32}
         flexDirection={DIRECTION_COLUMN}
         aria-label={`modal_${modalSize}`}
-        onClick={(e: React.MouseEvent) => {
+        onClick={(e: MouseEvent) => {
           e.stopPropagation()
         }}
       >
diff --git a/app/src/molecules/OddModal/__tests__/OddModal.test.tsx b/app/src/molecules/OddModal/__tests__/OddModal.test.tsx
index d8c129a8b01..9d9097b4729 100644
--- a/app/src/molecules/OddModal/__tests__/OddModal.test.tsx
+++ b/app/src/molecules/OddModal/__tests__/OddModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
@@ -7,14 +6,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { OddModalHeader } from '../OddModalHeader'
 import { OddModal } from '../OddModal'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../OddModalHeader')
 
-const render = (props: React.ComponentProps<typeof OddModal>) => {
+const render = (props: ComponentProps<typeof OddModal>) => {
   return renderWithProviders(<OddModal {...props} />)[0]
 }
 
 describe('OddModal', () => {
-  let props: React.ComponentProps<typeof OddModal>
+  let props: ComponentProps<typeof OddModal>
   beforeEach(() => {
     props = {
       onOutsideClick: vi.fn(),
diff --git a/app/src/molecules/OddModal/__tests__/OddModalHeader.test.tsx b/app/src/molecules/OddModal/__tests__/OddModalHeader.test.tsx
index e824e49648c..94499d35abf 100644
--- a/app/src/molecules/OddModal/__tests__/OddModalHeader.test.tsx
+++ b/app/src/molecules/OddModal/__tests__/OddModalHeader.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import '@testing-library/jest-dom/vitest'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -6,12 +5,14 @@ import { COLORS } from '@opentrons/components'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { OddModalHeader } from '../OddModalHeader'
 
-const render = (props: React.ComponentProps<typeof OddModalHeader>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof OddModalHeader>) => {
   return renderWithProviders(<OddModalHeader {...props} />)[0]
 }
 
 describe('OddModalHeader', () => {
-  let props: React.ComponentProps<typeof OddModalHeader>
+  let props: ComponentProps<typeof OddModalHeader>
   beforeEach(() => {
     props = {
       title: 'title',
diff --git a/app/src/molecules/OddModal/types.ts b/app/src/molecules/OddModal/types.ts
index b0fa6d103ae..e4f07cc52ad 100644
--- a/app/src/molecules/OddModal/types.ts
+++ b/app/src/molecules/OddModal/types.ts
@@ -1,10 +1,11 @@
+import type { MouseEventHandler } from 'react'
 import type { IconName, StyleProps } from '@opentrons/components'
 
 export type ModalSize = 'small' | 'medium' | 'large'
 
 export interface OddModalHeaderBaseProps extends StyleProps {
   title: string | JSX.Element
-  onClick?: React.MouseEventHandler
+  onClick?: MouseEventHandler
   hasExitIcon?: boolean
   iconName?: IconName
   iconColor?: string
diff --git a/app/src/molecules/OffsetVector/__tests__/OffsetVector.test.tsx b/app/src/molecules/OffsetVector/__tests__/OffsetVector.test.tsx
index bb247c0175a..e3b4c87da6c 100644
--- a/app/src/molecules/OffsetVector/__tests__/OffsetVector.test.tsx
+++ b/app/src/molecules/OffsetVector/__tests__/OffsetVector.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
 import { describe, it, expect, beforeEach } from 'vitest'
@@ -7,12 +6,14 @@ import { renderWithProviders } from '/app/__testing-utils__'
 
 import { OffsetVector } from '../'
 
-const render = (props: React.ComponentProps<typeof OffsetVector>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof OffsetVector>) => {
   return renderWithProviders(<OffsetVector {...props} />)[0]
 }
 
 describe('OffsetVector', () => {
-  let props: React.ComponentProps<typeof OffsetVector>
+  let props: ComponentProps<typeof OffsetVector>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/molecules/OffsetVector/index.tsx b/app/src/molecules/OffsetVector/index.tsx
index 155019e8074..af4d8c5dc68 100644
--- a/app/src/molecules/OffsetVector/index.tsx
+++ b/app/src/molecules/OffsetVector/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import {
   Flex,
   SPACING,
@@ -6,13 +5,14 @@ import {
   LegacyStyledText,
 } from '@opentrons/components'
 
+import type { ComponentProps } from 'react'
 import type { StyleProps } from '@opentrons/components'
 
 interface OffsetVectorProps extends StyleProps {
   x: number
   y: number
   z: number
-  as?: React.ComponentProps<typeof LegacyStyledText>['as']
+  as?: ComponentProps<typeof LegacyStyledText>['as']
 }
 
 export function OffsetVector(props: OffsetVectorProps): JSX.Element {
diff --git a/app/src/molecules/SimpleWizardBody/SimpleWizardBodyContent.tsx b/app/src/molecules/SimpleWizardBody/SimpleWizardBodyContent.tsx
index 16113e28c9a..1a179f1b987 100644
--- a/app/src/molecules/SimpleWizardBody/SimpleWizardBodyContent.tsx
+++ b/app/src/molecules/SimpleWizardBody/SimpleWizardBodyContent.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useSelector } from 'react-redux'
 import { css } from 'styled-components'
 import {
@@ -21,13 +20,15 @@ import SuccessIcon from '/app/assets/images/icon_success.png'
 import { getIsOnDevice } from '/app/redux/config'
 
 import { Skeleton } from '/app/atoms/Skeleton'
+
+import type { ReactNode } from 'react'
 import type { RobotType } from '@opentrons/shared-data'
 
 interface Props {
   iconColor: string
   header: string
   isSuccess: boolean
-  children?: React.ReactNode
+  children?: ReactNode
   subHeader?: string | JSX.Element
   isPending?: boolean
   robotType?: RobotType
diff --git a/app/src/molecules/SimpleWizardBody/SimpleWizardInProgressBody.tsx b/app/src/molecules/SimpleWizardBody/SimpleWizardInProgressBody.tsx
index 10882025dfc..92f65aa2cf2 100644
--- a/app/src/molecules/SimpleWizardBody/SimpleWizardInProgressBody.tsx
+++ b/app/src/molecules/SimpleWizardBody/SimpleWizardInProgressBody.tsx
@@ -1,9 +1,10 @@
-import type * as React from 'react'
-import type { StyleProps } from '@opentrons/components'
 import { InProgressModal } from '../InProgressModal/InProgressModal'
 import { SimpleWizardBodyContainer } from './SimpleWizardBodyContainer'
 
-export type SimpleWizardInProgressBodyProps = React.ComponentProps<
+import type { ComponentProps } from 'react'
+import type { StyleProps } from '@opentrons/components'
+
+export type SimpleWizardInProgressBodyProps = ComponentProps<
   typeof InProgressModal
 > &
   StyleProps
diff --git a/app/src/molecules/SimpleWizardBody/__tests__/SimpleWizardBody.test.tsx b/app/src/molecules/SimpleWizardBody/__tests__/SimpleWizardBody.test.tsx
index 9849e8fa03c..f21e14f0580 100644
--- a/app/src/molecules/SimpleWizardBody/__tests__/SimpleWizardBody.test.tsx
+++ b/app/src/molecules/SimpleWizardBody/__tests__/SimpleWizardBody.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { COLORS } from '@opentrons/components'
@@ -7,14 +6,16 @@ import { Skeleton } from '/app/atoms/Skeleton'
 import { getIsOnDevice } from '/app/redux/config'
 import { SimpleWizardBody } from '..'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/atoms/Skeleton')
 vi.mock('/app/redux/config')
 
-const render = (props: React.ComponentProps<typeof SimpleWizardBody>) => {
+const render = (props: ComponentProps<typeof SimpleWizardBody>) => {
   return renderWithProviders(<SimpleWizardBody {...props} />)[0]
 }
 describe('SimpleWizardBody', () => {
-  let props: React.ComponentProps<typeof SimpleWizardBody>
+  let props: ComponentProps<typeof SimpleWizardBody>
   beforeEach(() => {
     props = {
       iconColor: COLORS.red60,
diff --git a/app/src/molecules/SimpleWizardBody/index.tsx b/app/src/molecules/SimpleWizardBody/index.tsx
index b554b71b90e..c49c49be2a8 100644
--- a/app/src/molecules/SimpleWizardBody/index.tsx
+++ b/app/src/molecules/SimpleWizardBody/index.tsx
@@ -1,8 +1,9 @@
-import type * as React from 'react'
-
 import { SimpleWizardBodyContainer } from './SimpleWizardBodyContainer'
 import { SimpleWizardBodyContent } from './SimpleWizardBodyContent'
 import { SimpleWizardInProgressBody } from './SimpleWizardInProgressBody'
+
+import type { ComponentProps } from 'react'
+
 export {
   SimpleWizardBodyContainer,
   SimpleWizardBodyContent,
@@ -10,8 +11,8 @@ export {
 }
 
 export function SimpleWizardBody(
-  props: React.ComponentProps<typeof SimpleWizardBodyContent> &
-    React.ComponentProps<typeof SimpleWizardBodyContainer>
+  props: ComponentProps<typeof SimpleWizardBodyContent> &
+    ComponentProps<typeof SimpleWizardBodyContainer>
 ): JSX.Element {
   const { children, ...rest } = props
   return (
diff --git a/app/src/molecules/ToggleGroup/__tests__/useToggleGroup.test.tsx b/app/src/molecules/ToggleGroup/__tests__/useToggleGroup.test.tsx
index c4829b79615..b90da347489 100644
--- a/app/src/molecules/ToggleGroup/__tests__/useToggleGroup.test.tsx
+++ b/app/src/molecules/ToggleGroup/__tests__/useToggleGroup.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { Provider } from 'react-redux'
 import { createStore } from 'redux'
 import '@testing-library/jest-dom/vitest'
@@ -7,6 +6,7 @@ import { renderHook, render, fireEvent, screen } from '@testing-library/react'
 import { useTrackEvent } from '/app/redux/analytics'
 import { useToggleGroup } from '../useToggleGroup'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { State } from '/app/redux/types'
 
@@ -23,7 +23,7 @@ describe('useToggleGroup', () => {
   })
 
   it('should return default selectedValue and toggle buttons', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
 
@@ -35,7 +35,7 @@ describe('useToggleGroup', () => {
     expect(result.current[0]).toBe('List View')
   })
   it('should record an analytics event for list view', async () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
 
@@ -53,7 +53,7 @@ describe('useToggleGroup', () => {
     })
   })
   it('should record an analytics event for map view', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
 
diff --git a/app/src/molecules/UnorderedList/index.tsx b/app/src/molecules/UnorderedList/index.tsx
index cf9937266a8..f48c3e685ba 100644
--- a/app/src/molecules/UnorderedList/index.tsx
+++ b/app/src/molecules/UnorderedList/index.tsx
@@ -1,9 +1,10 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import { SPACING, LegacyStyledText } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
+
 interface UnorderedListProps {
-  items: React.ReactNode[]
+  items: ReactNode[]
 }
 export function UnorderedList(props: UnorderedListProps): JSX.Element {
   const { items } = props
diff --git a/app/src/molecules/UpdateBanner/__tests__/UpdateBanner.test.tsx b/app/src/molecules/UpdateBanner/__tests__/UpdateBanner.test.tsx
index 52b074b37d8..1f8470efcd0 100644
--- a/app/src/molecules/UpdateBanner/__tests__/UpdateBanner.test.tsx
+++ b/app/src/molecules/UpdateBanner/__tests__/UpdateBanner.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { when } from 'vitest-when'
@@ -9,10 +8,12 @@ import { useIsEstopNotDisengaged } from '/app/resources/devices/hooks/useIsEstop
 import { UpdateBanner } from '..'
 import { renderWithProviders } from '/app/__testing-utils__'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux-resources/robots')
 vi.mock('/app/resources/devices/hooks/useIsEstopNotDisengaged')
 
-const render = (props: React.ComponentProps<typeof UpdateBanner>) => {
+const render = (props: ComponentProps<typeof UpdateBanner>) => {
   return renderWithProviders(<UpdateBanner {...props} />, {
     i18nInstance: i18n,
     initialState: { robotsByName: 'test' },
@@ -20,7 +21,7 @@ const render = (props: React.ComponentProps<typeof UpdateBanner>) => {
 }
 
 describe('Module Update Banner', () => {
-  let props: React.ComponentProps<typeof UpdateBanner>
+  let props: ComponentProps<typeof UpdateBanner>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/molecules/WizardHeader/__tests__/WizardHeader.test.tsx b/app/src/molecules/WizardHeader/__tests__/WizardHeader.test.tsx
index 0e11447cac2..436e594dd59 100644
--- a/app/src/molecules/WizardHeader/__tests__/WizardHeader.test.tsx
+++ b/app/src/molecules/WizardHeader/__tests__/WizardHeader.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -8,17 +7,19 @@ import { StepMeter } from '/app/atoms/StepMeter'
 import { WizardHeader } from '..'
 import { renderWithProviders } from '/app/__testing-utils__'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/atoms/StepMeter')
 vi.mock('/app/redux/config')
 
-const render = (props: React.ComponentProps<typeof WizardHeader>) => {
+const render = (props: ComponentProps<typeof WizardHeader>) => {
   return renderWithProviders(<WizardHeader {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('WizardHeader', () => {
-  let props: React.ComponentProps<typeof WizardHeader>
+  let props: ComponentProps<typeof WizardHeader>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/molecules/WizardRequiredEquipmentList/index.tsx b/app/src/molecules/WizardRequiredEquipmentList/index.tsx
index f6f7457a71a..3a39d904639 100644
--- a/app/src/molecules/WizardRequiredEquipmentList/index.tsx
+++ b/app/src/molecules/WizardRequiredEquipmentList/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import { css } from 'styled-components'
@@ -23,9 +22,10 @@ import { Divider } from '/app/atoms/structure'
 import { labwareImages } from '/app/local-resources/labware'
 import { equipmentImages } from './equipmentImages'
 
+import type { ComponentProps } from 'react'
 import type { StyleProps } from '@opentrons/components'
 interface WizardRequiredEquipmentListProps extends StyleProps {
-  equipmentList: Array<React.ComponentProps<typeof RequiredEquipmentCard>>
+  equipmentList: Array<ComponentProps<typeof RequiredEquipmentCard>>
   footer?: string
 }
 export function WizardRequiredEquipmentList(
diff --git a/app/src/molecules/modals/BottomButtonBar.tsx b/app/src/molecules/modals/BottomButtonBar.tsx
index d5c202e943c..f7f78f067e4 100644
--- a/app/src/molecules/modals/BottomButtonBar.tsx
+++ b/app/src/molecules/modals/BottomButtonBar.tsx
@@ -1,18 +1,18 @@
 // bottom button bar for modals
 // TODO(mc, 2018-08-18): maybe make this the default AlertModal behavior
-import type * as React from 'react'
 import cx from 'classnames'
 
 import { OutlineButton } from '@opentrons/components'
 import styles from './styles.module.css'
 
+import type { ReactNode } from 'react'
 import type { ButtonProps } from '@opentrons/components'
 
 type MaybeButtonProps = ButtonProps | null | undefined
 interface Props {
   buttons: MaybeButtonProps[]
   className?: string | null
-  description?: React.ReactNode | null
+  description?: ReactNode | null
 }
 
 export function BottomButtonBar(props: Props): JSX.Element {
diff --git a/app/src/molecules/modals/ScrollableAlertModal.tsx b/app/src/molecules/modals/ScrollableAlertModal.tsx
index c98846899b8..d8ebdc18543 100644
--- a/app/src/molecules/modals/ScrollableAlertModal.tsx
+++ b/app/src/molecules/modals/ScrollableAlertModal.tsx
@@ -1,12 +1,13 @@
 // AlertModal with vertical scrolling
-import type * as React from 'react'
 import omit from 'lodash/omit'
 
 import { AlertModal } from '@opentrons/components'
 import { BottomButtonBar } from './BottomButtonBar'
 import styles from './styles.module.css'
 
-type Props = React.ComponentProps<typeof AlertModal>
+import type { ComponentProps } from 'react'
+
+type Props = ComponentProps<typeof AlertModal>
 
 export function ScrollableAlertModal(props: Props): JSX.Element {
   return (
diff --git a/app/src/organisms/Desktop/AdvancedSettings/OT2AdvancedSettings.tsx b/app/src/organisms/Desktop/AdvancedSettings/OT2AdvancedSettings.tsx
index 7ab3ebb0bd0..3ff3313a840 100644
--- a/app/src/organisms/Desktop/AdvancedSettings/OT2AdvancedSettings.tsx
+++ b/app/src/organisms/Desktop/AdvancedSettings/OT2AdvancedSettings.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import { css } from 'styled-components'
@@ -17,6 +16,7 @@ import {
 } from '/app/redux/calibration'
 import { getUseTrashSurfaceForTipCal } from '/app/redux/config'
 
+import type { ChangeEvent } from 'react'
 import type { Dispatch, State } from '/app/redux/types'
 
 const ALWAYS_BLOCK: 'always-block' = 'always-block'
@@ -74,7 +74,7 @@ export function OT2AdvancedSettings(): JSX.Element {
               ? ALWAYS_BLOCK
               : ALWAYS_PROMPT
           }
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+          onChange={(event: ChangeEvent<HTMLInputElement>) => {
             // you know this is a limited-selection field whose values are only
             // the elements of BlockSelection; i know this is a limited-selection
             // field whose values are only the elements of BlockSelection; but sadly,
diff --git a/app/src/organisms/Desktop/AdvancedSettings/OverridePathToPython.tsx b/app/src/organisms/Desktop/AdvancedSettings/OverridePathToPython.tsx
index d0e5b7d6d93..a87d739172f 100644
--- a/app/src/organisms/Desktop/AdvancedSettings/OverridePathToPython.tsx
+++ b/app/src/organisms/Desktop/AdvancedSettings/OverridePathToPython.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector, useDispatch } from 'react-redux'
 
@@ -27,6 +26,7 @@ import {
   ANALYTICS_CHANGE_PATH_TO_PYTHON_DIRECTORY,
 } from '/app/redux/analytics'
 
+import type { MouseEventHandler } from 'react'
 import type { Dispatch } from '/app/redux/types'
 
 export function OverridePathToPython(): JSX.Element {
@@ -35,7 +35,7 @@ export function OverridePathToPython(): JSX.Element {
   const dispatch = useDispatch<Dispatch>()
   const trackEvent = useTrackEvent()
 
-  const handleClickPythonDirectoryChange: React.MouseEventHandler<HTMLButtonElement> = _event => {
+  const handleClickPythonDirectoryChange: MouseEventHandler<HTMLButtonElement> = _event => {
     dispatch(changePythonPathOverrideConfig())
     trackEvent({
       name: ANALYTICS_CHANGE_PATH_TO_PYTHON_DIRECTORY,
diff --git a/app/src/organisms/Desktop/AdvancedSettings/UpdatedChannel.tsx b/app/src/organisms/Desktop/AdvancedSettings/UpdatedChannel.tsx
index aca0348cb7b..ec261c75083 100644
--- a/app/src/organisms/Desktop/AdvancedSettings/UpdatedChannel.tsx
+++ b/app/src/organisms/Desktop/AdvancedSettings/UpdatedChannel.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -19,6 +18,7 @@ import {
   updateConfigValue,
 } from '/app/redux/config'
 
+import type { ComponentProps } from 'react'
 import type { SelectOption } from '/app/atoms/SelectField/Select'
 import type { Dispatch } from '/app/redux/types'
 
@@ -31,7 +31,7 @@ export function UpdatedChannel(): JSX.Element {
     dispatch(updateConfigValue('update.channel', value))
   }
 
-  const formatOptionLabel: React.ComponentProps<
+  const formatOptionLabel: ComponentProps<
     typeof SelectField
   >['formatOptionLabel'] = (option, index): JSX.Element => {
     const { label, value } = option
diff --git a/app/src/organisms/Desktop/AppSettings/__tests__/ConnectRobotSlideout.test.tsx b/app/src/organisms/Desktop/AppSettings/__tests__/ConnectRobotSlideout.test.tsx
index c92e1f495a0..4cddd3e1763 100644
--- a/app/src/organisms/Desktop/AppSettings/__tests__/ConnectRobotSlideout.test.tsx
+++ b/app/src/organisms/Desktop/AppSettings/__tests__/ConnectRobotSlideout.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
@@ -8,17 +7,19 @@ import { getConfig } from '/app/redux/config'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { ConnectRobotSlideout } from '../ConnectRobotSlideout'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/discovery')
 vi.mock('/app/redux/config')
 
-const render = (props: React.ComponentProps<typeof ConnectRobotSlideout>) => {
+const render = (props: ComponentProps<typeof ConnectRobotSlideout>) => {
   return renderWithProviders(<ConnectRobotSlideout {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ConnectRobotSlideout', () => {
-  let props: React.ComponentProps<typeof ConnectRobotSlideout>
+  let props: ComponentProps<typeof ConnectRobotSlideout>
 
   beforeEach(() => {
     vi.mocked(getScanning).mockReturnValue(true)
@@ -54,7 +55,7 @@ describe('ConnectRobotSlideout', () => {
       checkIpAndHostname: vi.fn(),
       isExpanded: true,
       onCloseClick: vi.fn(),
-    } as React.ComponentProps<typeof ConnectRobotSlideout>
+    } as ComponentProps<typeof ConnectRobotSlideout>
   })
 
   it('renders correct title, body, and footer for ConnectRobotSlideout', () => {
diff --git a/app/src/organisms/Desktop/AppSettings/__tests__/PreviousVersionModal.test.tsx b/app/src/organisms/Desktop/AppSettings/__tests__/PreviousVersionModal.test.tsx
index b4449623c05..59eff47aa2c 100644
--- a/app/src/organisms/Desktop/AppSettings/__tests__/PreviousVersionModal.test.tsx
+++ b/app/src/organisms/Desktop/AppSettings/__tests__/PreviousVersionModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -10,12 +9,14 @@ import {
   PREVIOUS_RELEASES_URL,
 } from '../PreviousVersionModal'
 
-const render = (props: React.ComponentProps<typeof PreviousVersionModal>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof PreviousVersionModal>) => {
   return renderWithProviders(<PreviousVersionModal {...props} />, {
     i18nInstance: i18n,
   })
 }
-const props: React.ComponentProps<typeof PreviousVersionModal> = {
+const props: ComponentProps<typeof PreviousVersionModal> = {
   closeModal: vi.fn(),
 }
 
diff --git a/app/src/organisms/Desktop/CalibrateDeck/__tests__/CalibrateDeck.test.tsx b/app/src/organisms/Desktop/CalibrateDeck/__tests__/CalibrateDeck.test.tsx
index 3f90064c03c..13415c8e47c 100644
--- a/app/src/organisms/Desktop/CalibrateDeck/__tests__/CalibrateDeck.test.tsx
+++ b/app/src/organisms/Desktop/CalibrateDeck/__tests__/CalibrateDeck.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, describe, beforeEach, expect, it } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 
@@ -14,6 +13,7 @@ import {
   CalibrationError,
 } from '/app/organisms/Desktop/CalibrationError'
 
+import type { ComponentProps, ComponentType } from 'react'
 import type { DeckCalibrationStep } from '/app/redux/sessions/types'
 import type { DispatchRequestsType } from '/app/redux/robot-api'
 
@@ -41,14 +41,14 @@ describe('CalibrateDeck', () => {
     ...mockDeckCalibrationSessionAttributes,
   }
   const render = (
-    props: Partial<React.ComponentProps<typeof CalibrateDeck>> = {}
+    props: Partial<ComponentProps<typeof CalibrateDeck>> = {}
   ) => {
     const {
       showSpinner = false,
       isJogging = false,
       session = mockDeckCalSession,
     } = props
-    return renderWithProviders<React.ComponentType<typeof CalibrateDeck>>(
+    return renderWithProviders<ComponentType<typeof CalibrateDeck>>(
       <CalibrateDeck
         robotName="robot-name"
         session={session}
diff --git a/app/src/organisms/Desktop/CalibratePipetteOffset/__tests__/CalibratePipetteOffset.test.tsx b/app/src/organisms/Desktop/CalibratePipetteOffset/__tests__/CalibratePipetteOffset.test.tsx
index 15117cac92f..ac34e42e5ee 100644
--- a/app/src/organisms/Desktop/CalibratePipetteOffset/__tests__/CalibratePipetteOffset.test.tsx
+++ b/app/src/organisms/Desktop/CalibratePipetteOffset/__tests__/CalibratePipetteOffset.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 import { when } from 'vitest-when'
 import { fireEvent, screen } from '@testing-library/react'
@@ -7,13 +6,15 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import * as Sessions from '/app/redux/sessions'
 import { mockPipetteOffsetCalibrationSessionAttributes } from '/app/redux/sessions/__fixtures__'
-import { CalibratePipetteOffset } from '../index'
-import type { PipetteOffsetCalibrationStep } from '/app/redux/sessions/types'
-import type { DispatchRequestsType } from '/app/redux/robot-api'
 import {
   useCalibrationError,
   CalibrationError,
 } from '/app/organisms/Desktop/CalibrationError'
+import { CalibratePipetteOffset } from '../index'
+
+import type { ComponentProps, ComponentType } from 'react'
+import type { PipetteOffsetCalibrationStep } from '/app/redux/sessions/types'
+import type { DispatchRequestsType } from '/app/redux/robot-api'
 
 vi.mock('@opentrons/shared-data', async importOriginal => {
   const actual = await importOriginal<typeof getDeckDefinitions>()
@@ -35,16 +36,14 @@ interface CalibratePipetteOffsetSpec {
 describe('CalibratePipetteOffset', () => {
   let dispatchRequests: DispatchRequestsType
   const render = (
-    props: Partial<React.ComponentProps<typeof CalibratePipetteOffset>> = {}
+    props: Partial<ComponentProps<typeof CalibratePipetteOffset>> = {}
   ) => {
     const {
       showSpinner = false,
       isJogging = false,
       session = mockPipOffsetCalSession,
     } = props
-    return renderWithProviders<
-      React.ComponentType<typeof CalibratePipetteOffset>
-    >(
+    return renderWithProviders<ComponentType<typeof CalibratePipetteOffset>>(
       <CalibratePipetteOffset
         robotName="robot-name"
         session={session}
diff --git a/app/src/organisms/Desktop/CalibrateTipLength/TipLengthCalibrationInfoBox.tsx b/app/src/organisms/Desktop/CalibrateTipLength/TipLengthCalibrationInfoBox.tsx
index 7bcf3bd81e3..c13d9f5bab9 100644
--- a/app/src/organisms/Desktop/CalibrateTipLength/TipLengthCalibrationInfoBox.tsx
+++ b/app/src/organisms/Desktop/CalibrateTipLength/TipLengthCalibrationInfoBox.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import {
   Box,
   Text,
@@ -7,9 +6,11 @@ import {
   SPACING,
 } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
+
 export interface TipLengthCalibrationInfoBoxProps {
   title: string
-  children: React.ReactNode
+  children: ReactNode
 }
 
 export function TipLengthCalibrationInfoBox(
diff --git a/app/src/organisms/Desktop/CalibrateTipLength/__tests__/AskForCalibrationBlockModal.test.tsx b/app/src/organisms/Desktop/CalibrateTipLength/__tests__/AskForCalibrationBlockModal.test.tsx
index 199ec279988..7ed7cad97e9 100644
--- a/app/src/organisms/Desktop/CalibrateTipLength/__tests__/AskForCalibrationBlockModal.test.tsx
+++ b/app/src/organisms/Desktop/CalibrateTipLength/__tests__/AskForCalibrationBlockModal.test.tsx
@@ -1,17 +1,18 @@
 import { vi, it, describe, expect } from 'vitest'
+import { fireEvent, screen } from '@testing-library/react'
 
 import { renderWithProviders } from '/app/__testing-utils__'
-
 import { i18n } from '/app/i18n'
 import { setUseTrashSurfaceForTipCal } from '/app/redux/calibration'
 import { AskForCalibrationBlockModal } from '../AskForCalibrationBlockModal'
-import { fireEvent, screen } from '@testing-library/react'
+
+import type { ComponentProps } from 'react'
 
 describe('AskForCalibrationBlockModal', () => {
   const onResponse = vi.fn()
   const render = () => {
     return renderWithProviders<
-      React.ComponentProps<typeof AskForCalibrationBlockModal>
+      ComponentProps<typeof AskForCalibrationBlockModal>
     >(
       <AskForCalibrationBlockModal
         onResponse={onResponse}
diff --git a/app/src/organisms/Desktop/CalibrateTipLength/__tests__/CalibrateTipLength.test.tsx b/app/src/organisms/Desktop/CalibrateTipLength/__tests__/CalibrateTipLength.test.tsx
index 7324f182f66..9f19f449888 100644
--- a/app/src/organisms/Desktop/CalibrateTipLength/__tests__/CalibrateTipLength.test.tsx
+++ b/app/src/organisms/Desktop/CalibrateTipLength/__tests__/CalibrateTipLength.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
@@ -15,6 +14,7 @@ import {
   CalibrationError,
 } from '/app/organisms/Desktop/CalibrationError'
 
+import type { ComponentProps, ComponentType } from 'react'
 import type { TipLengthCalibrationStep } from '/app/redux/sessions/types'
 
 vi.mock('@opentrons/shared-data', async importOriginal => {
@@ -41,14 +41,14 @@ describe('CalibrateTipLength', () => {
     ...mockTipLengthCalibrationSessionAttributes,
   }
   const render = (
-    props: Partial<React.ComponentProps<typeof CalibrateTipLength>> = {}
+    props: Partial<ComponentProps<typeof CalibrateTipLength>> = {}
   ) => {
     const {
       showSpinner = false,
       isJogging = false,
       session = mockTipLengthSession,
     } = props
-    return renderWithProviders<React.ComponentType<typeof CalibrateTipLength>>(
+    return renderWithProviders<ComponentType<typeof CalibrateTipLength>>(
       <CalibrateTipLength
         robotName="robot-name"
         session={session}
diff --git a/app/src/organisms/Desktop/CalibrationError/__tests__/CalibrationError.test.tsx b/app/src/organisms/Desktop/CalibrationError/__tests__/CalibrationError.test.tsx
index d8213c793ca..3676c0e95f0 100644
--- a/app/src/organisms/Desktop/CalibrationError/__tests__/CalibrationError.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationError/__tests__/CalibrationError.test.tsx
@@ -8,7 +8,7 @@ import { CalibrationError } from '..'
 import type { ComponentProps } from 'react'
 
 describe('CalibrationError', () => {
-  let props: React.ComponentProps<typeof CalibrationError>
+  let props: ComponentProps<typeof CalibrationError>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/CalibrationPanels/CompleteConfirmation.tsx b/app/src/organisms/Desktop/CalibrationPanels/CompleteConfirmation.tsx
index cbd0e214cd1..3f6de1fed33 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/CompleteConfirmation.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/CompleteConfirmation.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   ALIGN_CENTER,
@@ -16,11 +15,13 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 
+import type { MouseEventHandler, ReactNode } from 'react'
+
 interface CompleteConfirmationProps {
-  proceed: React.MouseEventHandler
+  proceed: MouseEventHandler
   flowName?: string
   body?: string
-  visualAid?: React.ReactNode
+  visualAid?: ReactNode
 }
 
 export function CompleteConfirmation(
diff --git a/app/src/organisms/Desktop/CalibrationPanels/Introduction/__tests__/Body.test.tsx b/app/src/organisms/Desktop/CalibrationPanels/Introduction/__tests__/Body.test.tsx
index c1300fb3218..26682dff0cc 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/Introduction/__tests__/Body.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/Introduction/__tests__/Body.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { it, describe } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -8,7 +7,9 @@ import * as Sessions from '/app/redux/sessions'
 import { i18n } from '/app/i18n'
 import { Body } from '../Body'
 
-const render = (props: React.ComponentProps<typeof Body>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Body>) => {
   return renderWithProviders(<Body {...props} />, {
     i18nInstance: i18n,
   })[0]
diff --git a/app/src/organisms/Desktop/CalibrationPanels/Introduction/__tests__/Introduction.test.tsx b/app/src/organisms/Desktop/CalibrationPanels/Introduction/__tests__/Introduction.test.tsx
index a34460571ed..4005f6c996c 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/Introduction/__tests__/Introduction.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/Introduction/__tests__/Introduction.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 
@@ -9,6 +8,8 @@ import { i18n } from '/app/i18n'
 import { Introduction } from '../'
 import { ChooseTipRack } from '../../ChooseTipRack'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../../ChooseTipRack')
 
 const mockCalInvalidationHandler = vi.fn()
@@ -17,9 +18,7 @@ describe('Introduction', () => {
   const mockSendCommands = vi.fn()
   const mockCleanUpAndExit = vi.fn()
 
-  const render = (
-    props: Partial<React.ComponentProps<typeof Introduction>> = {}
-  ) => {
+  const render = (props: Partial<ComponentProps<typeof Introduction>> = {}) => {
     return renderWithProviders(
       <Introduction
         sendCommands={mockSendCommands}
diff --git a/app/src/organisms/Desktop/CalibrationPanels/__tests__/ChooseTipRack.test.tsx b/app/src/organisms/Desktop/CalibrationPanels/__tests__/ChooseTipRack.test.tsx
index 4bb1cecd0ef..1a8de5f9a00 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/__tests__/ChooseTipRack.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/__tests__/ChooseTipRack.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 
@@ -19,6 +18,7 @@ import {
 import { getCustomTipRackDefinitions } from '/app/redux/custom-labware'
 import { ChooseTipRack } from '../ChooseTipRack'
 
+import type { ComponentProps } from 'react'
 import type { AttachedPipettesByMount } from '/app/redux/pipettes/types'
 
 vi.mock('@opentrons/react-api-client')
@@ -32,14 +32,14 @@ const mockAttachedPipettes: AttachedPipettesByMount = {
   right: null,
 } as any
 
-const render = (props: React.ComponentProps<typeof ChooseTipRack>) => {
+const render = (props: ComponentProps<typeof ChooseTipRack>) => {
   return renderWithProviders(<ChooseTipRack {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ChooseTipRack', () => {
-  let props: React.ComponentProps<typeof ChooseTipRack>
+  let props: ComponentProps<typeof ChooseTipRack>
 
   beforeEach(() => {
     vi.mocked(Select).mockReturnValue(<div>mock select</div>)
diff --git a/app/src/organisms/Desktop/CalibrationPanels/__tests__/ChosenTipRackRender.test.tsx b/app/src/organisms/Desktop/CalibrationPanels/__tests__/ChosenTipRackRender.test.tsx
index 5eb7fa1db8b..27bc9a7d233 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/__tests__/ChosenTipRackRender.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/__tests__/ChosenTipRackRender.test.tsx
@@ -1,13 +1,14 @@
-import type * as React from 'react'
 import { it, describe, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
 import { i18n } from '/app/i18n'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { ChosenTipRackRender } from '../ChosenTipRackRender'
+
+import type { ComponentProps } from 'react'
 import type { SelectOption } from '/app/atoms/SelectField/Select'
 
-const render = (props: React.ComponentProps<typeof ChosenTipRackRender>) => {
+const render = (props: ComponentProps<typeof ChosenTipRackRender>) => {
   return renderWithProviders(<ChosenTipRackRender {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -19,7 +20,7 @@ const mockSelectValue = {
 } as SelectOption
 
 describe('ChosenTipRackRender', () => {
-  let props: React.ComponentProps<typeof ChosenTipRackRender>
+  let props: ComponentProps<typeof ChosenTipRackRender>
   beforeEach(() => {
     props = {
       selectedValue: mockSelectValue,
diff --git a/app/src/organisms/Desktop/CalibrationPanels/__tests__/CompleteConfirmation.test.tsx b/app/src/organisms/Desktop/CalibrationPanels/__tests__/CompleteConfirmation.test.tsx
index 99dc73310d1..8dd9575a2c3 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/__tests__/CompleteConfirmation.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/__tests__/CompleteConfirmation.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect } from 'vitest'
 
@@ -7,10 +6,12 @@ import { i18n } from '/app/i18n'
 
 import { CompleteConfirmation } from '../CompleteConfirmation'
 
+import type { ComponentProps } from 'react'
+
 describe('CompleteConfirmation', () => {
   const mockCleanUpAndExit = vi.fn()
   const render = (
-    props: Partial<React.ComponentProps<typeof CompleteConfirmation>> = {}
+    props: Partial<ComponentProps<typeof CompleteConfirmation>> = {}
   ) => {
     const { proceed = mockCleanUpAndExit, flowName, body, visualAid } = props
     return renderWithProviders(
diff --git a/app/src/organisms/Desktop/CalibrationPanels/__tests__/ConfirmCrashRecovery.test.tsx b/app/src/organisms/Desktop/CalibrationPanels/__tests__/ConfirmCrashRecovery.test.tsx
index 53fb8559e55..11581f72c55 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/__tests__/ConfirmCrashRecovery.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/__tests__/ConfirmCrashRecovery.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect } from 'vitest'
 
@@ -6,11 +5,13 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ConfirmCrashRecovery } from '../ConfirmCrashRecovery'
 
+import type { ComponentProps } from 'react'
+
 describe('ConfirmCrashRecovery', () => {
   const mockBack = vi.fn()
   const mockConfirm = vi.fn()
   const render = (
-    props: Partial<React.ComponentProps<typeof ConfirmCrashRecovery>> = {}
+    props: Partial<ComponentProps<typeof ConfirmCrashRecovery>> = {}
   ) => {
     const { back = mockBack, confirm = mockConfirm } = props
     return renderWithProviders(
diff --git a/app/src/organisms/Desktop/CalibrationPanels/__tests__/ConfirmExit.test.tsx b/app/src/organisms/Desktop/CalibrationPanels/__tests__/ConfirmExit.test.tsx
index 086c122e8bf..c09bf0dcd84 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/__tests__/ConfirmExit.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/__tests__/ConfirmExit.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect } from 'vitest'
 
@@ -7,12 +6,12 @@ import { i18n } from '/app/i18n'
 
 import { ConfirmExit } from '../ConfirmExit'
 
+import type { ComponentProps } from 'react'
+
 describe('ConfirmExit', () => {
   const mockBack = vi.fn()
   const mockExit = vi.fn()
-  const render = (
-    props: Partial<React.ComponentProps<typeof ConfirmExit>> = {}
-  ) => {
+  const render = (props: Partial<ComponentProps<typeof ConfirmExit>> = {}) => {
     const { heading, body } = props
     return renderWithProviders(
       <ConfirmExit
diff --git a/app/src/organisms/Desktop/CalibrationPanels/__tests__/DeckSetup.test.tsx b/app/src/organisms/Desktop/CalibrationPanels/__tests__/DeckSetup.test.tsx
index bfa641e6b26..5560594c981 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/__tests__/DeckSetup.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/__tests__/DeckSetup.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -11,6 +10,7 @@ import {
 import * as Sessions from '/app/redux/sessions'
 import { DeckSetup } from '../DeckSetup'
 
+import type { ComponentProps } from 'react'
 import type { getDeckDefinitions } from '@opentrons/shared-data'
 
 vi.mock('/app/assets/labware/getLabware')
@@ -27,9 +27,7 @@ describe('DeckSetup', () => {
   const mockSendCommands = vi.fn()
   const mockDeleteSession = vi.fn()
 
-  const render = (
-    props: Partial<React.ComponentProps<typeof DeckSetup>> = {}
-  ) => {
+  const render = (props: Partial<ComponentProps<typeof DeckSetup>> = {}) => {
     const {
       mount = 'left',
       isMulti = false,
diff --git a/app/src/organisms/Desktop/CalibrationPanels/__tests__/MeasureNozzle.test.tsx b/app/src/organisms/Desktop/CalibrationPanels/__tests__/MeasureNozzle.test.tsx
index d0de251b0ad..e95c612ec01 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/__tests__/MeasureNozzle.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/__tests__/MeasureNozzle.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect } from 'vitest'
 
@@ -11,11 +10,13 @@ import {
 import * as Sessions from '/app/redux/sessions'
 import { MeasureNozzle } from '../MeasureNozzle'
 
+import type { ComponentProps } from 'react'
+
 describe('MeasureNozzle', () => {
   const mockSendCommands = vi.fn()
   const mockDeleteSession = vi.fn()
   const render = (
-    props: Partial<React.ComponentProps<typeof MeasureNozzle>> = {}
+    props: Partial<ComponentProps<typeof MeasureNozzle>> = {}
   ) => {
     const {
       mount = 'left',
diff --git a/app/src/organisms/Desktop/CalibrationPanels/__tests__/MeasureTip.test.tsx b/app/src/organisms/Desktop/CalibrationPanels/__tests__/MeasureTip.test.tsx
index 70d8ab54a6b..6f37d74fca5 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/__tests__/MeasureTip.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/__tests__/MeasureTip.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect } from 'vitest'
 
@@ -12,12 +11,12 @@ import * as Sessions from '/app/redux/sessions'
 
 import { MeasureTip } from '../MeasureTip'
 
+import type { ComponentProps } from 'react'
+
 describe('MeasureTip', () => {
   const mockSendCommands = vi.fn()
   const mockDeleteSession = vi.fn()
-  const render = (
-    props: Partial<React.ComponentProps<typeof MeasureTip>> = {}
-  ) => {
+  const render = (props: Partial<ComponentProps<typeof MeasureTip>> = {}) => {
     const {
       mount = 'left',
       isMulti = false,
diff --git a/app/src/organisms/Desktop/CalibrationPanels/__tests__/SaveXYPoint.test.tsx b/app/src/organisms/Desktop/CalibrationPanels/__tests__/SaveXYPoint.test.tsx
index 3d7dbda32a9..1965c0b1a14 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/__tests__/SaveXYPoint.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/__tests__/SaveXYPoint.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect } from 'vitest'
 
@@ -9,12 +8,12 @@ import { mockDeckCalTipRack } from '/app/redux/sessions/__fixtures__'
 import * as Sessions from '/app/redux/sessions'
 import { SaveXYPoint } from '../SaveXYPoint'
 
+import type { ComponentProps } from 'react'
+
 describe('SaveXYPoint', () => {
   const mockSendCommands = vi.fn()
   const mockDeleteSession = vi.fn()
-  const render = (
-    props: Partial<React.ComponentProps<typeof SaveXYPoint>> = {}
-  ) => {
+  const render = (props: Partial<ComponentProps<typeof SaveXYPoint>> = {}) => {
     const {
       mount = 'left',
       isMulti = false,
diff --git a/app/src/organisms/Desktop/CalibrationPanels/__tests__/SaveZPoint.test.tsx b/app/src/organisms/Desktop/CalibrationPanels/__tests__/SaveZPoint.test.tsx
index 36f04c1ebb2..dab0a5ee2b4 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/__tests__/SaveZPoint.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/__tests__/SaveZPoint.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect } from 'vitest'
 
@@ -12,13 +11,13 @@ import {
 import * as Sessions from '/app/redux/sessions'
 import { SaveZPoint } from '../SaveZPoint'
 
+import type { ComponentProps } from 'react'
+
 describe('SaveZPoint', () => {
   const mockSendCommands = vi.fn()
   const mockDeleteSession = vi.fn()
 
-  const render = (
-    props: Partial<React.ComponentProps<typeof SaveZPoint>> = {}
-  ) => {
+  const render = (props: Partial<ComponentProps<typeof SaveZPoint>> = {}) => {
     const {
       mount = 'left',
       isMulti = false,
diff --git a/app/src/organisms/Desktop/CalibrationPanels/__tests__/TipConfirmation.test.tsx b/app/src/organisms/Desktop/CalibrationPanels/__tests__/TipConfirmation.test.tsx
index f9eee22d78b..979db72ecb0 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/__tests__/TipConfirmation.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/__tests__/TipConfirmation.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect } from 'vitest'
 
@@ -8,11 +7,13 @@ import { mockDeckCalTipRack } from '/app/redux/sessions/__fixtures__'
 import * as Sessions from '/app/redux/sessions'
 import { TipConfirmation } from '../TipConfirmation'
 
+import type { ComponentProps } from 'react'
+
 describe('TipConfirmation', () => {
   const mockSendCommands = vi.fn()
   const mockDeleteSession = vi.fn()
   const render = (
-    props: Partial<React.ComponentProps<typeof TipConfirmation>> = {}
+    props: Partial<ComponentProps<typeof TipConfirmation>> = {}
   ) => {
     const {
       mount = 'left',
diff --git a/app/src/organisms/Desktop/CalibrationPanels/__tests__/TipPickUp.test.tsx b/app/src/organisms/Desktop/CalibrationPanels/__tests__/TipPickUp.test.tsx
index b6836cf96fb..6b8aac3fe88 100644
--- a/app/src/organisms/Desktop/CalibrationPanels/__tests__/TipPickUp.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationPanels/__tests__/TipPickUp.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect } from 'vitest'
 
@@ -8,12 +7,12 @@ import { mockDeckCalTipRack } from '/app/redux/sessions/__fixtures__'
 import * as Sessions from '/app/redux/sessions'
 import { TipPickUp } from '../TipPickUp'
 
+import type { ComponentProps } from 'react'
+
 describe('TipPickUp', () => {
   const mockSendCommands = vi.fn()
   const mockDeleteSession = vi.fn()
-  const render = (
-    props: Partial<React.ComponentProps<typeof TipPickUp>> = {}
-  ) => {
+  const render = (props: Partial<ComponentProps<typeof TipPickUp>> = {}) => {
     const {
       mount = 'left',
       isMulti = false,
diff --git a/app/src/organisms/Desktop/CalibrationStatusCard/__tests__/CalibrationStatusCard.test.tsx b/app/src/organisms/Desktop/CalibrationStatusCard/__tests__/CalibrationStatusCard.test.tsx
index 400e73b3078..3a3e09c4005 100644
--- a/app/src/organisms/Desktop/CalibrationStatusCard/__tests__/CalibrationStatusCard.test.tsx
+++ b/app/src/organisms/Desktop/CalibrationStatusCard/__tests__/CalibrationStatusCard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -18,9 +17,11 @@ import {
   expectedTaskList,
 } from '../../Devices/hooks/__fixtures__/taskListFixtures'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../../Devices/hooks')
 
-const render = (props: React.ComponentProps<typeof CalibrationStatusCard>) => {
+const render = (props: ComponentProps<typeof CalibrationStatusCard>) => {
   return renderWithProviders(
     <MemoryRouter>
       <CalibrationStatusCard {...props} />
@@ -38,7 +39,7 @@ describe('CalibrationStatusCard', () => {
     vi.mocked(useCalibrationTaskList).mockReturnValue(expectedTaskList)
   })
 
-  const props: React.ComponentProps<typeof CalibrationStatusCard> = {
+  const props: ComponentProps<typeof CalibrationStatusCard> = {
     robotName: 'otie',
     setShowHowCalibrationWorksModal: mockSetShowHowCalibrationWorksModal,
   }
diff --git a/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/CalibrationHealthCheckResults.test.tsx b/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/CalibrationHealthCheckResults.test.tsx
index dbe7c8349a0..bb66e979624 100644
--- a/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/CalibrationHealthCheckResults.test.tsx
+++ b/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/CalibrationHealthCheckResults.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { it, describe, expect, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -8,8 +7,10 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { CalibrationHealthCheckResults } from '../CalibrationHealthCheckResults'
 
+import type { ComponentProps } from 'react'
+
 const render = (
-  props: React.ComponentProps<typeof CalibrationHealthCheckResults>
+  props: ComponentProps<typeof CalibrationHealthCheckResults>
 ) => {
   return renderWithProviders(<CalibrationHealthCheckResults {...props} />, {
     i18nInstance: i18n,
@@ -17,7 +18,7 @@ const render = (
 }
 
 describe('CalibrationHealthCheckResults', () => {
-  let props: React.ComponentProps<typeof CalibrationHealthCheckResults>
+  let props: ComponentProps<typeof CalibrationHealthCheckResults>
   beforeEach(() => {
     props = {
       isCalibrationRecommended: false,
diff --git a/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/CalibrationResult.test.tsx b/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/CalibrationResult.test.tsx
index 70432556944..c4d6bd4e67d 100644
--- a/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/CalibrationResult.test.tsx
+++ b/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/CalibrationResult.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -7,16 +6,18 @@ import { i18n } from '/app/i18n'
 import { RenderResult } from '../RenderResult'
 import { CalibrationResult } from '../CalibrationResult'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../RenderResult')
 
-const render = (props: React.ComponentProps<typeof CalibrationResult>) => {
+const render = (props: ComponentProps<typeof CalibrationResult>) => {
   return renderWithProviders(<CalibrationResult {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('PipetteCalibrationResult', () => {
-  let props: React.ComponentProps<typeof CalibrationResult>
+  let props: ComponentProps<typeof CalibrationResult>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/RenderMountInformation.test.tsx b/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/RenderMountInformation.test.tsx
index bae133b6522..3a5fc13d0c1 100644
--- a/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/RenderMountInformation.test.tsx
+++ b/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/RenderMountInformation.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -10,6 +9,8 @@ import { LEFT, RIGHT } from '/app/redux/pipettes'
 import * as Fixtures from '/app/redux/sessions/__fixtures__'
 import { RenderMountInformation } from '../RenderMountInformation'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/shared-data', async importOriginal => {
   const actual = await importOriginal<typeof getPipetteModelSpecs>()
   return {
@@ -20,14 +21,14 @@ vi.mock('@opentrons/shared-data', async importOriginal => {
 
 const mockSessionDetails = Fixtures.mockRobotCalibrationCheckSessionDetails
 
-const render = (props: React.ComponentProps<typeof RenderMountInformation>) => {
+const render = (props: ComponentProps<typeof RenderMountInformation>) => {
   return renderWithProviders(<RenderMountInformation {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('RenderMountInformation', () => {
-  let props: React.ComponentProps<typeof RenderMountInformation>
+  let props: ComponentProps<typeof RenderMountInformation>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/RenderResult.test.tsx b/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/RenderResult.test.tsx
index 90ed47fc126..7b60f864218 100644
--- a/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/RenderResult.test.tsx
+++ b/app/src/organisms/Desktop/CheckCalibration/ResultsSummary/__tests__/RenderResult.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { it, describe, expect, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -9,14 +8,16 @@ import { i18n } from '/app/i18n'
 
 import { RenderResult } from '../RenderResult'
 
-const render = (props: React.ComponentProps<typeof RenderResult>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof RenderResult>) => {
   return renderWithProviders(<RenderResult {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('RenderResult', () => {
-  let props: React.ComponentProps<typeof RenderResult>
+  let props: ComponentProps<typeof RenderResult>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/CheckCalibration/__tests__/CheckCalibration.test.tsx b/app/src/organisms/Desktop/CheckCalibration/__tests__/CheckCalibration.test.tsx
index d5f5a9814d7..853716d3d46 100644
--- a/app/src/organisms/Desktop/CheckCalibration/__tests__/CheckCalibration.test.tsx
+++ b/app/src/organisms/Desktop/CheckCalibration/__tests__/CheckCalibration.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { when } from 'vitest-when'
 import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest'
@@ -11,6 +10,8 @@ import * as Sessions from '/app/redux/sessions'
 import { mockCalibrationCheckSessionAttributes } from '/app/redux/sessions/__fixtures__'
 
 import { CheckCalibration } from '../index'
+
+import type { ComponentProps, ComponentType } from 'react'
 import type { RobotCalibrationCheckStep } from '/app/redux/sessions/types'
 
 vi.mock('/app/redux/calibration/selectors')
@@ -36,14 +37,14 @@ describe('CheckCalibration', () => {
   }
 
   const render = (
-    props: Partial<React.ComponentProps<typeof CheckCalibration>> = {}
+    props: Partial<ComponentProps<typeof CheckCalibration>> = {}
   ) => {
     const {
       showSpinner = false,
       isJogging = false,
       session = mockCalibrationCheckSession,
     } = props
-    return renderWithProviders<React.ComponentType<typeof CheckCalibration>>(
+    return renderWithProviders<ComponentType<typeof CheckCalibration>>(
       <CheckCalibration
         robotName="robot-name"
         session={session}
diff --git a/app/src/organisms/Desktop/ChooseProtocolSlideout/__tests__/ChooseProtocolSlideout.test.tsx b/app/src/organisms/Desktop/ChooseProtocolSlideout/__tests__/ChooseProtocolSlideout.test.tsx
index fc6a0f281a9..86440066772 100644
--- a/app/src/organisms/Desktop/ChooseProtocolSlideout/__tests__/ChooseProtocolSlideout.test.tsx
+++ b/app/src/organisms/Desktop/ChooseProtocolSlideout/__tests__/ChooseProtocolSlideout.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
@@ -19,6 +18,8 @@ import { useTrackCreateProtocolRunEvent } from '/app/organisms/Desktop/Devices/h
 import { useCreateRunFromProtocol } from '/app/organisms/Desktop/ChooseRobotToRunProtocolSlideout/useCreateRunFromProtocol'
 import { ChooseProtocolSlideout } from '../'
 import { useNotifyDataReady } from '/app/resources/useNotifyDataReady'
+
+import type { ComponentProps } from 'react'
 import type { ProtocolAnalysisOutput } from '@opentrons/shared-data'
 
 vi.mock(
@@ -29,7 +30,7 @@ vi.mock('/app/organisms/Desktop/Devices/hooks')
 vi.mock('/app/redux/config')
 vi.mock('/app/resources/useNotifyDataReady')
 
-const render = (props: React.ComponentProps<typeof ChooseProtocolSlideout>) => {
+const render = (props: ComponentProps<typeof ChooseProtocolSlideout>) => {
   return renderWithProviders(
     <MemoryRouter>
       <ChooseProtocolSlideout {...props} />
diff --git a/app/src/organisms/Desktop/ChooseRobotSlideout/__tests__/ChooseRobotSlideout.test.tsx b/app/src/organisms/Desktop/ChooseRobotSlideout/__tests__/ChooseRobotSlideout.test.tsx
index 998c82462bc..33f601165d2 100644
--- a/app/src/organisms/Desktop/ChooseRobotSlideout/__tests__/ChooseRobotSlideout.test.tsx
+++ b/app/src/organisms/Desktop/ChooseRobotSlideout/__tests__/ChooseRobotSlideout.test.tsx
@@ -1,6 +1,4 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
-
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { OT2_ROBOT_TYPE } from '@opentrons/shared-data'
@@ -22,13 +20,15 @@ import {
 import { getNetworkInterfaces } from '/app/redux/networking'
 import { ChooseRobotSlideout } from '..'
 import { useNotifyDataReady } from '/app/resources/useNotifyDataReady'
+
+import type { ComponentProps } from 'react'
 import type { RunTimeParameter } from '@opentrons/shared-data'
 
 vi.mock('/app/redux/discovery')
 vi.mock('/app/redux/robot-update')
 vi.mock('/app/redux/networking')
 vi.mock('/app/resources/useNotifyDataReady')
-const render = (props: React.ComponentProps<typeof ChooseRobotSlideout>) => {
+const render = (props: ComponentProps<typeof ChooseRobotSlideout>) => {
   return renderWithProviders(
     <MemoryRouter>
       <ChooseRobotSlideout {...props} />
diff --git a/app/src/organisms/Desktop/ChooseRobotSlideout/__tests__/FileCard.test.tsx b/app/src/organisms/Desktop/ChooseRobotSlideout/__tests__/FileCard.test.tsx
index 9a151cd1704..9a150141526 100644
--- a/app/src/organisms/Desktop/ChooseRobotSlideout/__tests__/FileCard.test.tsx
+++ b/app/src/organisms/Desktop/ChooseRobotSlideout/__tests__/FileCard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect } from 'vitest'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
@@ -7,6 +6,7 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { FileCard } from '../FileCard'
 
+import type { ComponentProps } from 'react'
 import type { CsvFileParameter } from '@opentrons/shared-data'
 
 vi.mock('/app/redux/discovery')
@@ -15,7 +15,7 @@ vi.mock('/app/redux/networking')
 vi.mock('/app/resources/useNotifyDataReady')
 vi.mock('/app/redux/config')
 
-const render = (props: React.ComponentProps<typeof FileCard>) => {
+const render = (props: ComponentProps<typeof FileCard>) => {
   return renderWithProviders(
     <MemoryRouter>
       <FileCard {...props} />
diff --git a/app/src/organisms/Desktop/ChooseRobotToRunProtocolSlideout/__tests__/ChooseRobotToRunProtocolSlideout.test.tsx b/app/src/organisms/Desktop/ChooseRobotToRunProtocolSlideout/__tests__/ChooseRobotToRunProtocolSlideout.test.tsx
index 3c6416a5290..19e3d39c370 100644
--- a/app/src/organisms/Desktop/ChooseRobotToRunProtocolSlideout/__tests__/ChooseRobotToRunProtocolSlideout.test.tsx
+++ b/app/src/organisms/Desktop/ChooseRobotToRunProtocolSlideout/__tests__/ChooseRobotToRunProtocolSlideout.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
@@ -32,6 +31,7 @@ import { ChooseRobotToRunProtocolSlideout } from '../'
 import { useNotifyDataReady } from '/app/resources/useNotifyDataReady'
 import { useCurrentRunId, useCloseCurrentRun } from '/app/resources/runs'
 
+import type { ComponentProps } from 'react'
 import type { State } from '/app/redux/types'
 
 vi.mock('/app/organisms/Desktop/Devices/hooks')
@@ -49,7 +49,7 @@ vi.mock('/app/resources/useNotifyDataReady')
 vi.mock('/app/resources/runs')
 
 const render = (
-  props: React.ComponentProps<typeof ChooseRobotToRunProtocolSlideout>
+  props: ComponentProps<typeof ChooseRobotToRunProtocolSlideout>
 ) => {
   return renderWithProviders(
     <MemoryRouter>
diff --git a/app/src/organisms/Desktop/Devices/ChangePipette/ConfirmPipette.tsx b/app/src/organisms/Desktop/Devices/ChangePipette/ConfirmPipette.tsx
index f756059d003..6f6585cefe4 100644
--- a/app/src/organisms/Desktop/Devices/ChangePipette/ConfirmPipette.tsx
+++ b/app/src/organisms/Desktop/Devices/ChangePipette/ConfirmPipette.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { OT2_ROBOT_TYPE } from '@opentrons/shared-data'
 import {
@@ -13,6 +12,7 @@ import { CheckPipettesButton } from './CheckPipettesButton'
 import { SimpleWizardBody } from '/app/molecules/SimpleWizardBody'
 import { LevelPipette } from './LevelPipette'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type {
   PipetteNameSpecs,
   PipetteModelSpecs,
@@ -36,11 +36,9 @@ export interface ConfirmPipetteProps {
   //  wrongWantedPipette is referring to if the user attaches a pipette that is different
   //  from wantedPipette and they want to use it anyway
   wrongWantedPipette: PipetteNameSpecs | null
-  setWrongWantedPipette: React.Dispatch<
-    React.SetStateAction<PipetteNameSpecs | null>
-  >
+  setWrongWantedPipette: Dispatch<SetStateAction<PipetteNameSpecs | null>>
   confirmPipetteLevel: boolean
-  setConfirmPipetteLevel: React.Dispatch<React.SetStateAction<boolean>>
+  setConfirmPipetteLevel: Dispatch<SetStateAction<boolean>>
   tryAgain: () => void
   exit: () => void
   nextStep: () => void
diff --git a/app/src/organisms/Desktop/Devices/ChangePipette/InstructionStep.tsx b/app/src/organisms/Desktop/Devices/ChangePipette/InstructionStep.tsx
index 5b6338be6a5..94d617f2ea4 100644
--- a/app/src/organisms/Desktop/Devices/ChangePipette/InstructionStep.tsx
+++ b/app/src/organisms/Desktop/Devices/ChangePipette/InstructionStep.tsx
@@ -1,14 +1,15 @@
-import type * as React from 'react'
 import { Box, Flex, JUSTIFY_SPACE_EVENLY, SPACING } from '@opentrons/components'
 import type {
   PipetteChannels,
   PipetteDisplayCategory,
 } from '@opentrons/shared-data'
+
+import type { ReactNode } from 'react'
 import type { Mount } from '@opentrons/components'
 import type { Diagram, Direction } from './types'
 
 interface Props {
-  children: React.ReactNode
+  children: ReactNode
   direction: Direction
   mount: Mount
   channels: PipetteChannels
diff --git a/app/src/organisms/Desktop/Devices/ChangePipette/PipetteSelection.tsx b/app/src/organisms/Desktop/Devices/ChangePipette/PipetteSelection.tsx
index c306f132154..f998887afbd 100644
--- a/app/src/organisms/Desktop/Devices/ChangePipette/PipetteSelection.tsx
+++ b/app/src/organisms/Desktop/Devices/ChangePipette/PipetteSelection.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   DIRECTION_COLUMN,
@@ -10,7 +9,9 @@ import {
 import { OT3_PIPETTES } from '@opentrons/shared-data'
 import { PipetteSelect } from '/app/molecules/PipetteSelect'
 
-export type PipetteSelectionProps = React.ComponentProps<typeof PipetteSelect>
+import type { ComponentProps } from 'react'
+
+export type PipetteSelectionProps = ComponentProps<typeof PipetteSelect>
 
 export function PipetteSelection(props: PipetteSelectionProps): JSX.Element {
   const { t } = useTranslation('change_pipette')
diff --git a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ChangePipette.test.tsx b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ChangePipette.test.tsx
index 89112a484d4..6cedab5a47b 100644
--- a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ChangePipette.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ChangePipette.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 
@@ -21,6 +20,7 @@ import { ExitModal } from '../ExitModal'
 import { ConfirmPipette } from '../ConfirmPipette'
 import { ChangePipette } from '..'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 import type { PipetteNameSpecs } from '@opentrons/shared-data'
 import type { AttachedPipette } from '/app/redux/pipettes/types'
@@ -54,7 +54,7 @@ vi.mock('../ConfirmPipette')
 vi.mock('/app/resources/instruments')
 vi.mock('/app/assets/images')
 
-const render = (props: React.ComponentProps<typeof ChangePipette>) => {
+const render = (props: ComponentProps<typeof ChangePipette>) => {
   return renderWithProviders(<ChangePipette {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -78,7 +78,7 @@ const mockAttachedPipettes = {
 }
 
 describe('ChangePipette', () => {
-  let props: React.ComponentProps<typeof ChangePipette>
+  let props: ComponentProps<typeof ChangePipette>
   let dispatchApiRequest: DispatchApiRequestType
 
   beforeEach(() => {
diff --git a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/CheckPipettesButton.test.tsx b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/CheckPipettesButton.test.tsx
index a5fa3a50bd6..ce6f7f2db25 100644
--- a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/CheckPipettesButton.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/CheckPipettesButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 
@@ -8,16 +7,18 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { CheckPipettesButton } from '../CheckPipettesButton'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
 
-const render = (props: React.ComponentProps<typeof CheckPipettesButton>) => {
+const render = (props: ComponentProps<typeof CheckPipettesButton>) => {
   return renderWithProviders(<CheckPipettesButton {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('CheckPipettesButton', () => {
-  let props: React.ComponentProps<typeof CheckPipettesButton>
+  let props: ComponentProps<typeof CheckPipettesButton>
   beforeEach(() => {
     props = {
       robotName: 'otie',
diff --git a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ClearDeckModal.test.tsx b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ClearDeckModal.test.tsx
index f4af4566141..85ae7a52495 100644
--- a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ClearDeckModal.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ClearDeckModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 
@@ -6,13 +5,15 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ClearDeckModal } from '../ClearDeckModal'
 
-const render = (props: React.ComponentProps<typeof ClearDeckModal>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ClearDeckModal>) => {
   return renderWithProviders(<ClearDeckModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 describe('ClearDeckModal', () => {
-  let props: React.ComponentProps<typeof ClearDeckModal>
+  let props: ComponentProps<typeof ClearDeckModal>
   beforeEach(() => {
     props = {
       onContinueClick: vi.fn(),
diff --git a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ConfirmPipette.test.tsx b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ConfirmPipette.test.tsx
index a328df38383..ebb06f3dc91 100644
--- a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ConfirmPipette.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ConfirmPipette.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect } from 'vitest'
 
@@ -9,6 +8,7 @@ import { mockPipetteInfo } from '/app/redux/pipettes/__fixtures__'
 import { CheckPipettesButton } from '../CheckPipettesButton'
 import { ConfirmPipette } from '../ConfirmPipette'
 
+import type { ComponentProps } from 'react'
 import type {
   PipetteModelSpecs,
   PipetteNameSpecs,
@@ -25,7 +25,7 @@ vi.mock('../LevelPipette', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof ConfirmPipette>) => {
+const render = (props: ComponentProps<typeof ConfirmPipette>) => {
   return renderWithProviders(<ConfirmPipette {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -87,7 +87,7 @@ const MOCK_WANTED_PIPETTE = {
 } as PipetteNameSpecs
 
 describe('ConfirmPipette', () => {
-  let props: React.ComponentProps<typeof ConfirmPipette>
+  let props: ComponentProps<typeof ConfirmPipette>
 
   it('Should detach a pipette successfully', () => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ExitModal.test.tsx b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ExitModal.test.tsx
index 29bf417071c..0b4155ebd09 100644
--- a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ExitModal.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/ExitModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 
@@ -6,13 +5,15 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ExitModal } from '../ExitModal'
 
-const render = (props: React.ComponentProps<typeof ExitModal>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ExitModal>) => {
   return renderWithProviders(<ExitModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 describe('ExitModal', () => {
-  let props: React.ComponentProps<typeof ExitModal>
+  let props: ComponentProps<typeof ExitModal>
   beforeEach(() => {
     props = {
       back: vi.fn(),
diff --git a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/InstructionStep.test.tsx b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/InstructionStep.test.tsx
index 80cdde63972..39e53564b68 100644
--- a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/InstructionStep.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/InstructionStep.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { it, describe, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -8,13 +7,15 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { InstructionStep } from '../InstructionStep'
 
-const render = (props: React.ComponentProps<typeof InstructionStep>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof InstructionStep>) => {
   return renderWithProviders(<InstructionStep {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 describe('InstructionStep', () => {
-  let props: React.ComponentProps<typeof InstructionStep>
+  let props: ComponentProps<typeof InstructionStep>
   beforeEach(() => {
     props = {
       children: <div>children</div>,
diff --git a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/Instructions.test.tsx b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/Instructions.test.tsx
index 024be58e798..4f01b748286 100644
--- a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/Instructions.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/Instructions.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 
@@ -12,9 +11,11 @@ import { mockPipetteInfo } from '/app/redux/pipettes/__fixtures__'
 import { Instructions } from '../Instructions'
 import { CheckPipettesButton } from '../CheckPipettesButton'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../CheckPipettesButton')
 
-const render = (props: React.ComponentProps<typeof Instructions>) => {
+const render = (props: ComponentProps<typeof Instructions>) => {
   return renderWithProviders(<Instructions {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -29,7 +30,7 @@ const MOCK_ACTUAL_PIPETTE = {
 } as PipetteModelSpecs
 
 describe('Instructions', () => {
-  let props: React.ComponentProps<typeof Instructions>
+  let props: ComponentProps<typeof Instructions>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/LevelPipette.test.tsx b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/LevelPipette.test.tsx
index 78c2e9f8d6d..3b74cf10ea1 100644
--- a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/LevelPipette.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/LevelPipette.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 
@@ -6,9 +5,11 @@ import { LEFT } from '@opentrons/shared-data'
 import { nestedTextMatcher, renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { LevelPipette } from '../LevelPipette'
+
+import type { ComponentProps } from 'react'
 import type { PipetteNameSpecs } from '@opentrons/shared-data'
 
-const render = (props: React.ComponentProps<typeof LevelPipette>) => {
+const render = (props: ComponentProps<typeof LevelPipette>) => {
   return renderWithProviders(<LevelPipette {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -57,7 +58,7 @@ const MOCK_WANTED_PIPETTE = {
 } as PipetteNameSpecs
 
 describe('LevelPipette', () => {
-  let props: React.ComponentProps<typeof LevelPipette>
+  let props: ComponentProps<typeof LevelPipette>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/PipetteSelection.test.tsx b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/PipetteSelection.test.tsx
index f3619e9930d..9f507dc8a36 100644
--- a/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/PipetteSelection.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ChangePipette/__tests__/PipetteSelection.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -7,15 +6,17 @@ import { i18n } from '/app/i18n'
 import { PipetteSelect } from '/app/molecules/PipetteSelect'
 import { PipetteSelection } from '../PipetteSelection'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/molecules/PipetteSelect')
 
-const render = (props: React.ComponentProps<typeof PipetteSelection>) => {
+const render = (props: ComponentProps<typeof PipetteSelection>) => {
   return renderWithProviders(<PipetteSelection {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 describe('PipetteSelection', () => {
-  let props: React.ComponentProps<typeof PipetteSelection>
+  let props: ComponentProps<typeof PipetteSelection>
   beforeEach(() => {
     props = {
       pipetteName: null,
diff --git a/app/src/organisms/Desktop/Devices/ConfigurePipette/ConfigFormGroup.tsx b/app/src/organisms/Desktop/Devices/ConfigurePipette/ConfigFormGroup.tsx
index 9c8a2c25acf..e006efe1c5c 100644
--- a/app/src/organisms/Desktop/Devices/ConfigurePipette/ConfigFormGroup.tsx
+++ b/app/src/organisms/Desktop/Devices/ConfigurePipette/ConfigFormGroup.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { Controller } from 'react-hook-form'
 import {
   CheckboxField,
@@ -12,11 +11,12 @@ import {
 } from '@opentrons/components'
 import styles from './styles.module.css'
 
+import type { ReactNode } from 'react'
 import type { Control } from 'react-hook-form'
 import type { DisplayFieldProps, DisplayQuirkFieldProps } from './ConfigForm'
 
 export interface FormColumnProps {
-  children: React.ReactNode
+  children: ReactNode
 }
 
 export function FormColumn(props: FormColumnProps): JSX.Element {
@@ -65,7 +65,7 @@ export function ConfigFormGroup(props: ConfigFormGroupProps): JSX.Element {
 export interface ConfigFormRowProps {
   label: string
   labelFor: string
-  children: React.ReactNode
+  children: ReactNode
 }
 
 const FIELD_ID_PREFIX = '__PipetteConfig__'
diff --git a/app/src/organisms/Desktop/Devices/ConfigurePipette/__tests__/ConfigFormResetButton.test.tsx b/app/src/organisms/Desktop/Devices/ConfigurePipette/__tests__/ConfigFormResetButton.test.tsx
index 4c2ec08c7d4..7e26987f573 100644
--- a/app/src/organisms/Desktop/Devices/ConfigurePipette/__tests__/ConfigFormResetButton.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ConfigurePipette/__tests__/ConfigFormResetButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, expect, describe, beforeEach } from 'vitest'
 
@@ -6,14 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ConfigFormResetButton } from '../ConfigFormResetButton'
 
-const render = (props: React.ComponentProps<typeof ConfigFormResetButton>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ConfigFormResetButton>) => {
   return renderWithProviders(<ConfigFormResetButton {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ConfigFormResetButton', () => {
-  let props: React.ComponentProps<typeof ConfigFormResetButton>
+  let props: ComponentProps<typeof ConfigFormResetButton>
   beforeEach(() => {
     props = {
       onClick: vi.fn(),
diff --git a/app/src/organisms/Desktop/Devices/ConfigurePipette/__tests__/ConfigFormSubmitButton.test.tsx b/app/src/organisms/Desktop/Devices/ConfigurePipette/__tests__/ConfigFormSubmitButton.test.tsx
index 3dbab681883..73db2ec1596 100644
--- a/app/src/organisms/Desktop/Devices/ConfigurePipette/__tests__/ConfigFormSubmitButton.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ConfigurePipette/__tests__/ConfigFormSubmitButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { it, expect, describe, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -6,14 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ConfigFormSubmitButton } from '../ConfigFormSubmitButton'
 
-const render = (props: React.ComponentProps<typeof ConfigFormSubmitButton>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ConfigFormSubmitButton>) => {
   return renderWithProviders(<ConfigFormSubmitButton {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ConfigFormSubmitButton', () => {
-  let props: React.ComponentProps<typeof ConfigFormSubmitButton>
+  let props: ComponentProps<typeof ConfigFormSubmitButton>
   beforeEach(() => {
     props = {
       disabled: false,
diff --git a/app/src/organisms/Desktop/Devices/ConfigurePipette/__tests__/ConfigurePipette.test.tsx b/app/src/organisms/Desktop/Devices/ConfigurePipette/__tests__/ConfigurePipette.test.tsx
index 2d7790bdd24..5f810b3b97c 100644
--- a/app/src/organisms/Desktop/Devices/ConfigurePipette/__tests__/ConfigurePipette.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ConfigurePipette/__tests__/ConfigurePipette.test.tsx
@@ -1,6 +1,6 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { vi, it, expect, describe, beforeEach } from 'vitest'
+import { screen } from '@testing-library/react'
 
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
@@ -9,14 +9,14 @@ import { ConfigurePipette } from '../../ConfigurePipette'
 import { mockPipetteSettingsFieldsMap } from '/app/redux/pipettes/__fixtures__'
 import { getConfig } from '/app/redux/config'
 
+import type { ComponentProps } from 'react'
 import type { DispatchApiRequestType } from '/app/redux/robot-api'
 import type { State } from '/app/redux/types'
-import { screen } from '@testing-library/react'
 
 vi.mock('/app/redux/robot-api')
 vi.mock('/app/redux/config')
 
-const render = (props: React.ComponentProps<typeof ConfigurePipette>) => {
+const render = (props: ComponentProps<typeof ConfigurePipette>) => {
   return renderWithProviders(<ConfigurePipette {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -26,7 +26,7 @@ const mockRobotName = 'mockRobotName'
 
 describe('ConfigurePipette', () => {
   let dispatchApiRequest: DispatchApiRequestType
-  let props: React.ComponentProps<typeof ConfigurePipette>
+  let props: ComponentProps<typeof ConfigurePipette>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/ErrorRecoveryBanner/__tests__/ErrorRecoveryBanner.test.tsx b/app/src/organisms/Desktop/Devices/ErrorRecoveryBanner/__tests__/ErrorRecoveryBanner.test.tsx
index fc234a52629..58a79593fe6 100644
--- a/app/src/organisms/Desktop/Devices/ErrorRecoveryBanner/__tests__/ErrorRecoveryBanner.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ErrorRecoveryBanner/__tests__/ErrorRecoveryBanner.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -6,6 +5,8 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { useErrorRecoveryBanner, ErrorRecoveryBanner } from '..'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('..', async importOriginal => {
   const actualReact = await importOriginal<typeof useErrorRecoveryBanner>()
   return {
@@ -14,7 +15,7 @@ vi.mock('..', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof ErrorRecoveryBanner>) => {
+const render = (props: ComponentProps<typeof ErrorRecoveryBanner>) => {
   return renderWithProviders(<ErrorRecoveryBanner {...props} />, {
     i18nInstance: i18n,
   })[0]
diff --git a/app/src/organisms/Desktop/Devices/GripperCard/__tests__/AboutGripperSlideout.test.tsx b/app/src/organisms/Desktop/Devices/GripperCard/__tests__/AboutGripperSlideout.test.tsx
index 9ad4381a40c..373ba5256af 100644
--- a/app/src/organisms/Desktop/Devices/GripperCard/__tests__/AboutGripperSlideout.test.tsx
+++ b/app/src/organisms/Desktop/Devices/GripperCard/__tests__/AboutGripperSlideout.test.tsx
@@ -1,18 +1,19 @@
-import type * as React from 'react'
 import { screen, fireEvent } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { AboutGripperSlideout } from '../AboutGripperSlideout'
 
-const render = (props: React.ComponentProps<typeof AboutGripperSlideout>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof AboutGripperSlideout>) => {
   return renderWithProviders(<AboutGripperSlideout {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('AboutGripperSlideout', () => {
-  let props: React.ComponentProps<typeof AboutGripperSlideout>
+  let props: ComponentProps<typeof AboutGripperSlideout>
   beforeEach(() => {
     props = {
       serialNumber: '123',
diff --git a/app/src/organisms/Desktop/Devices/GripperCard/__tests__/GripperCard.test.tsx b/app/src/organisms/Desktop/Devices/GripperCard/__tests__/GripperCard.test.tsx
index ccdbc80c2b3..32538ba2cb5 100644
--- a/app/src/organisms/Desktop/Devices/GripperCard/__tests__/GripperCard.test.tsx
+++ b/app/src/organisms/Desktop/Devices/GripperCard/__tests__/GripperCard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -7,20 +6,22 @@ import { i18n } from '/app/i18n'
 import { GripperWizardFlows } from '/app/organisms/GripperWizardFlows'
 import { AboutGripperSlideout } from '../AboutGripperSlideout'
 import { GripperCard } from '../'
+
+import type { ComponentProps } from 'react'
 import type { GripperData } from '@opentrons/api-client'
 
 vi.mock('/app/organisms/GripperWizardFlows')
 vi.mock('../AboutGripperSlideout')
 vi.mock('@opentrons/react-api-client')
 
-const render = (props: React.ComponentProps<typeof GripperCard>) => {
+const render = (props: ComponentProps<typeof GripperCard>) => {
   return renderWithProviders(<GripperCard {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('GripperCard', () => {
-  let props: React.ComponentProps<typeof GripperCard>
+  let props: ComponentProps<typeof GripperCard>
   beforeEach(() => {
     props = {
       attachedGripper: {
diff --git a/app/src/organisms/Desktop/Devices/HistoricalProtocolRunOverflowMenu.tsx b/app/src/organisms/Desktop/Devices/HistoricalProtocolRunOverflowMenu.tsx
index 18dc44cb11b..b696d8285cb 100644
--- a/app/src/organisms/Desktop/Devices/HistoricalProtocolRunOverflowMenu.tsx
+++ b/app/src/organisms/Desktop/Devices/HistoricalProtocolRunOverflowMenu.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { NavLink, useNavigate } from 'react-router-dom'
 
@@ -38,6 +37,7 @@ import { useIsEstopNotDisengaged } from '/app/resources/devices'
 import { useTrackProtocolRunEvent } from '/app/redux-resources/analytics'
 import { useRobot } from '/app/redux-resources/robots'
 
+import type { MouseEventHandler } from 'react'
 import type { Run } from '@opentrons/api-client'
 
 export interface HistoricalProtocolRunOverflowMenuProps {
@@ -99,7 +99,7 @@ export function HistoricalProtocolRunOverflowMenu(
 }
 
 interface MenuDropdownProps extends HistoricalProtocolRunOverflowMenuProps {
-  closeOverflowMenu: React.MouseEventHandler<HTMLButtonElement>
+  closeOverflowMenu: MouseEventHandler<HTMLButtonElement>
   downloadRunLog: () => void
   isRunLogLoading: boolean
 }
@@ -126,7 +126,7 @@ function MenuDropdown(props: MenuDropdownProps): JSX.Element {
       `/devices/${robotName}/protocol-runs/${createRunResponse.data.id}/run-preview`
     )
   }
-  const onDownloadClick: React.MouseEventHandler<HTMLButtonElement> = e => {
+  const onDownloadClick: MouseEventHandler<HTMLButtonElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     downloadRunLog()
@@ -143,9 +143,7 @@ function MenuDropdown(props: MenuDropdownProps): JSX.Element {
   const robotSerialNumber =
     robot?.health?.robot_serial ?? robot?.serverHealth?.serialNumber ?? null
 
-  const handleResetClick: React.MouseEventHandler<HTMLButtonElement> = (
-    e
-  ): void => {
+  const handleResetClick: MouseEventHandler<HTMLButtonElement> = (e): void => {
     e.preventDefault()
     e.stopPropagation()
 
@@ -160,7 +158,7 @@ function MenuDropdown(props: MenuDropdownProps): JSX.Element {
     trackProtocolRunEvent({ name: ANALYTICS_PROTOCOL_RUN_ACTION.AGAIN })
   }
 
-  const handleDeleteClick: React.MouseEventHandler<HTMLButtonElement> = e => {
+  const handleDeleteClick: MouseEventHandler<HTMLButtonElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     deleteRun(runId)
diff --git a/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/AboutPipetteSlideout.test.tsx b/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/AboutPipetteSlideout.test.tsx
index dd2274a3ab3..c39a0e286fc 100644
--- a/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/AboutPipetteSlideout.test.tsx
+++ b/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/AboutPipetteSlideout.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -7,16 +6,18 @@ import { i18n } from '/app/i18n'
 import { AboutPipetteSlideout } from '../AboutPipetteSlideout'
 import { mockLeftSpecs } from '/app/redux/pipettes/__fixtures__'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
 
-const render = (props: React.ComponentProps<typeof AboutPipetteSlideout>) => {
+const render = (props: ComponentProps<typeof AboutPipetteSlideout>) => {
   return renderWithProviders(<AboutPipetteSlideout {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('AboutPipetteSlideout', () => {
-  let props: React.ComponentProps<typeof AboutPipetteSlideout>
+  let props: ComponentProps<typeof AboutPipetteSlideout>
   beforeEach(() => {
     props = {
       pipetteId: '123',
diff --git a/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/FlexPipetteCard.test.tsx b/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/FlexPipetteCard.test.tsx
index bd753e9f9d3..6bbb7eacbd9 100644
--- a/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/FlexPipetteCard.test.tsx
+++ b/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/FlexPipetteCard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, afterEach, expect } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -11,8 +10,9 @@ import { FlexPipetteCard } from '../FlexPipetteCard'
 import { ChoosePipette } from '/app/organisms/PipetteWizardFlows/ChoosePipette'
 import { useDropTipWizardFlows } from '/app/organisms/DropTipWizardFlows'
 
-import type { PipetteData } from '@opentrons/api-client'
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
+import type { PipetteData } from '@opentrons/api-client'
 
 vi.mock('/app/organisms/PipetteWizardFlows')
 vi.mock('/app/organisms/PipetteWizardFlows/ChoosePipette')
@@ -20,7 +20,7 @@ vi.mock('../AboutPipetteSlideout')
 vi.mock('/app/organisms/DropTipWizardFlows')
 vi.mock('@opentrons/react-api-client')
 
-const render = (props: React.ComponentProps<typeof FlexPipetteCard>) => {
+const render = (props: ComponentProps<typeof FlexPipetteCard>) => {
   return renderWithProviders(<FlexPipetteCard {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -29,7 +29,7 @@ const render = (props: React.ComponentProps<typeof FlexPipetteCard>) => {
 let mockDTWizToggle: Mock
 
 describe('FlexPipetteCard', () => {
-  let props: React.ComponentProps<typeof FlexPipetteCard>
+  let props: ComponentProps<typeof FlexPipetteCard>
   mockDTWizToggle = vi.fn()
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/PipetteCard.test.tsx b/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/PipetteCard.test.tsx
index e04796bd491..c71ee4ec4b4 100644
--- a/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/PipetteCard.test.tsx
+++ b/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/PipetteCard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
@@ -15,6 +14,7 @@ import { useDropTipWizardFlows } from '/app/organisms/DropTipWizardFlows'
 
 import { mockLeftSpecs, mockRightSpecs } from '/app/redux/pipettes/__fixtures__'
 
+import type { ComponentProps } from 'react'
 import type { DispatchApiRequestType } from '/app/redux/robot-api'
 
 vi.mock('../PipetteOverflowMenu')
@@ -24,7 +24,7 @@ vi.mock('@opentrons/react-api-client')
 vi.mock('/app/redux/pipettes')
 vi.mock('/app/organisms/DropTipWizardFlows')
 
-const render = (props: React.ComponentProps<typeof PipetteCard>) => {
+const render = (props: ComponentProps<typeof PipetteCard>) => {
   return renderWithProviders(<PipetteCard {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -33,7 +33,7 @@ const render = (props: React.ComponentProps<typeof PipetteCard>) => {
 const mockRobotName = 'mockRobotName'
 describe('PipetteCard', () => {
   let dispatchApiRequest: DispatchApiRequestType
-  let props: React.ComponentProps<typeof PipetteCard>
+  let props: ComponentProps<typeof PipetteCard>
 
   beforeEach(() => {
     dispatchApiRequest = vi.fn()
diff --git a/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/PipetteOverflowMenu.test.tsx b/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/PipetteOverflowMenu.test.tsx
index 155d955b6ea..273d6bdf7b6 100644
--- a/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/PipetteOverflowMenu.test.tsx
+++ b/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/PipetteOverflowMenu.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -11,8 +10,9 @@ import {
 } from '/app/redux/pipettes/__fixtures__'
 import { isFlexPipette } from '@opentrons/shared-data'
 
-import type { Mount } from '/app/redux/pipettes/types'
+import type { ComponentProps } from 'react'
 import type * as SharedData from '@opentrons/shared-data'
+import type { Mount } from '/app/redux/pipettes/types'
 
 vi.mock('/app/redux/config')
 vi.mock('@opentrons/shared-data', async importOriginal => {
@@ -23,7 +23,7 @@ vi.mock('@opentrons/shared-data', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof PipetteOverflowMenu>) => {
+const render = (props: ComponentProps<typeof PipetteOverflowMenu>) => {
   return renderWithProviders(<PipetteOverflowMenu {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -31,7 +31,7 @@ const render = (props: React.ComponentProps<typeof PipetteOverflowMenu>) => {
 
 const LEFT = 'left' as Mount
 describe('PipetteOverflowMenu', () => {
-  let props: React.ComponentProps<typeof PipetteOverflowMenu>
+  let props: ComponentProps<typeof PipetteOverflowMenu>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/PipetteSettingsSlideout.test.tsx b/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/PipetteSettingsSlideout.test.tsx
index 37b6f66b863..c75945cd549 100644
--- a/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/PipetteSettingsSlideout.test.tsx
+++ b/app/src/organisms/Desktop/Devices/PipetteCard/__tests__/PipetteSettingsSlideout.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { fireEvent, waitFor, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
@@ -16,13 +15,12 @@ import {
   mockPipetteSettingsFieldsMap,
 } from '/app/redux/pipettes/__fixtures__'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('@opentrons/react-api-client')
 
-const render = (
-  props: React.ComponentProps<typeof PipetteSettingsSlideout>
-) => {
+const render = (props: ComponentProps<typeof PipetteSettingsSlideout>) => {
   return renderWithProviders(<PipetteSettingsSlideout {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -31,7 +29,7 @@ const render = (
 const mockRobotName = 'mockRobotName'
 
 describe('PipetteSettingsSlideout', () => {
-  let props: React.ComponentProps<typeof PipetteSettingsSlideout>
+  let props: ComponentProps<typeof PipetteSettingsSlideout>
   let mockUpdatePipetteSettings: Mock
 
   beforeEach(() => {
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/BackToTopButton.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/BackToTopButton.tsx
index a8524988bf2..909b49f1548 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/BackToTopButton.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/BackToTopButton.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import { useRobot } from '/app/redux-resources/robots'
@@ -10,8 +9,10 @@ import {
   ANALYTICS_PROTOCOL_PROCEED_TO_RUN,
 } from '/app/redux/analytics'
 
+import type { RefObject } from 'react'
+
 interface BackToTopButtonProps {
-  protocolRunHeaderRef: React.RefObject<HTMLDivElement> | null
+  protocolRunHeaderRef: RefObject<HTMLDivElement> | null
   robotName: string
   runId: string
   sourceLocation: string
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/EmptySetupStep.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/EmptySetupStep.tsx
index 24c2b449083..5d9eb70774e 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/EmptySetupStep.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/EmptySetupStep.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import {
   COLORS,
   DIRECTION_COLUMN,
@@ -10,10 +9,12 @@ import {
   JUSTIFY_SPACE_BETWEEN,
 } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
+
 interface EmptySetupStepProps {
-  title: React.ReactNode
+  title: ReactNode
   description: string
-  rightElement?: React.ReactNode
+  rightElement?: ReactNode
 }
 
 export function EmptySetupStep(props: EmptySetupStepProps): JSX.Element {
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderBannerContainer/__tests__/ProtocolAnalysisErrorBanner.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderBannerContainer/__tests__/ProtocolAnalysisErrorBanner.test.tsx
index 5b60de044d7..fceea1d15c0 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderBannerContainer/__tests__/ProtocolAnalysisErrorBanner.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderBannerContainer/__tests__/ProtocolAnalysisErrorBanner.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach } from 'vitest'
 
@@ -6,16 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ProtocolAnalysisErrorBanner } from '../ProtocolAnalysisErrorBanner'
 
-const render = (
-  props: React.ComponentProps<typeof ProtocolAnalysisErrorBanner>
-) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ProtocolAnalysisErrorBanner>) => {
   return renderWithProviders(<ProtocolAnalysisErrorBanner {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ProtocolAnalysisErrorBanner', () => {
-  let props: React.ComponentProps<typeof ProtocolAnalysisErrorBanner>
+  let props: ComponentProps<typeof ProtocolAnalysisErrorBanner>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/ActionButton/index.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/ActionButton/index.tsx
index 4b8c0f68076..31495064a14 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/ActionButton/index.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/ActionButton/index.tsx
@@ -1,5 +1,3 @@
-import type * as React from 'react'
-
 import { RUN_STATUS_STOP_REQUESTED } from '@opentrons/api-client'
 import {
   ALIGN_CENTER,
@@ -28,12 +26,13 @@ import { useActionBtnDisabledUtils, useActionButtonProperties } from './hooks'
 import { getFallbackRobotSerialNumber, isRunAgainStatus } from '../../utils'
 import { useIsRobotOnWrongVersionOfSoftware } from '/app/redux/robot-update'
 
+import type { MutableRefObject } from 'react'
 import type { RunHeaderContentProps } from '..'
 
 export type BaseActionButtonProps = RunHeaderContentProps
 
 interface ActionButtonProps extends BaseActionButtonProps {
-  isResetRunLoadingRef: React.MutableRefObject<boolean>
+  isResetRunLoadingRef: MutableRefObject<boolean>
 }
 
 export function ActionButton(props: ActionButtonProps): JSX.Element {
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/LabeledValue.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/LabeledValue.tsx
index 135dd72bbae..183f6194a3f 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/LabeledValue.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/LabeledValue.tsx
@@ -1,5 +1,3 @@
-import type * as React from 'react'
-
 import {
   DIRECTION_COLUMN,
   COLORS,
@@ -8,9 +6,11 @@ import {
   StyledText,
 } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
+
 interface LabeledValueProps {
   label: string
-  value: React.ReactNode
+  value: ReactNode
 }
 
 export function LabeledValue(props: LabeledValueProps): JSX.Element {
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/index.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/index.tsx
index 51908e4435d..7d653c6f439 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/index.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/index.tsx
@@ -1,16 +1,15 @@
-import type * as React from 'react'
-
 import { RunHeaderSectionUpper } from './RunHeaderSectionUpper'
 import { RunHeaderSectionLower } from './RunHeaderSectionLower'
 
-import type { ProtocolRunHeaderProps } from '..'
+import type { MutableRefObject } from 'react'
 import type { AttachedModule, RunStatus } from '@opentrons/api-client'
+import type { ProtocolRunHeaderProps } from '..'
 import type { RunControls } from '/app/organisms/RunTimeControl'
 import type { UseRunHeaderModalContainerResult } from '../RunHeaderModalContainer'
 
 export type RunHeaderContentProps = ProtocolRunHeaderProps & {
   runStatus: RunStatus | null
-  isResetRunLoadingRef: React.MutableRefObject<boolean>
+  isResetRunLoadingRef: MutableRefObject<boolean>
   attachedModules: AttachedModule[]
   protocolRunControls: RunControls
   runHeaderModalContainerUtils: UseRunHeaderModalContainerResult
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/HeaterShakerIsRunningModal/__tests__/HeaterShakerIsRunningModal.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/HeaterShakerIsRunningModal/__tests__/HeaterShakerIsRunningModal.test.tsx
index 03b59af1b57..5960c2a39fa 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/HeaterShakerIsRunningModal/__tests__/HeaterShakerIsRunningModal.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/HeaterShakerIsRunningModal/__tests__/HeaterShakerIsRunningModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 
@@ -12,6 +11,7 @@ import { HeaterShakerModuleCard } from '../HeaterShakerModuleCard'
 import { useAttachedModules } from '/app/resources/modules'
 import { useMostRecentCompletedAnalysis } from '/app/resources/runs'
 
+import type { ComponentProps } from 'react'
 import type * as ReactApiClient from '@opentrons/react-api-client'
 
 vi.mock('@opentrons/react-api-client', async importOriginal => {
@@ -69,16 +69,14 @@ const mockMovingHeaterShakerTwo = {
   usbPort: { path: '/dev/ot_module_heatershaker0', port: 1 },
 } as any
 
-const render = (
-  props: React.ComponentProps<typeof HeaterShakerIsRunningModal>
-) => {
+const render = (props: ComponentProps<typeof HeaterShakerIsRunningModal>) => {
   return renderWithProviders(<HeaterShakerIsRunningModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('HeaterShakerIsRunningModal', () => {
-  let props: React.ComponentProps<typeof HeaterShakerIsRunningModal>
+  let props: ComponentProps<typeof HeaterShakerIsRunningModal>
   let mockCreateLiveCommand = vi.fn()
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/HeaterShakerIsRunningModal/__tests__/HeaterShakerModuleCard.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/HeaterShakerIsRunningModal/__tests__/HeaterShakerModuleCard.test.tsx
index 4cd20822890..8e98d4778fa 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/HeaterShakerIsRunningModal/__tests__/HeaterShakerModuleCard.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/HeaterShakerIsRunningModal/__tests__/HeaterShakerModuleCard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach } from 'vitest'
 
@@ -8,16 +7,18 @@ import { i18n } from '/app/i18n'
 import { HeaterShakerModuleCard } from '../HeaterShakerModuleCard'
 import { HeaterShakerModuleData } from '/app/organisms/ModuleCard/HeaterShakerModuleData'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/organisms/ModuleCard/HeaterShakerModuleData')
 
-const render = (props: React.ComponentProps<typeof HeaterShakerModuleCard>) => {
+const render = (props: ComponentProps<typeof HeaterShakerModuleCard>) => {
   return renderWithProviders(<HeaterShakerModuleCard {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('HeaterShakerModuleCard', () => {
-  let props: React.ComponentProps<typeof HeaterShakerModuleCard>
+  let props: ComponentProps<typeof HeaterShakerModuleCard>
   beforeEach(() => {
     props = {
       module: mockHeaterShaker,
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/HeaterShakerIsRunningModal/__tests__/hooks.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/HeaterShakerIsRunningModal/__tests__/hooks.test.tsx
index c5028c6a821..8c9c83fcaf9 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/HeaterShakerIsRunningModal/__tests__/hooks.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/HeaterShakerIsRunningModal/__tests__/hooks.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { Provider } from 'react-redux'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { createStore } from 'redux'
@@ -10,6 +9,7 @@ import { RUN_ID_1 } from '/app/resources/runs/__fixtures__'
 import { useMostRecentCompletedAnalysis } from '/app/resources/runs'
 import { useHeaterShakerModuleIdsFromRun } from '../hooks'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { State } from '/app/redux/types'
 
@@ -57,7 +57,7 @@ describe('useHeaterShakerModuleIdsFromRun', () => {
         },
       ],
     } as any)
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
     const { result } = renderHook(
@@ -127,7 +127,7 @@ describe('useHeaterShakerModuleIdsFromRun', () => {
       ],
     } as any)
 
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
     const { result } = renderHook(
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/ConfirmCancelModal.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/ConfirmCancelModal.test.tsx
index c6421040e17..08559f181be 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/ConfirmCancelModal.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/ConfirmCancelModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
@@ -17,6 +16,7 @@ import { useIsFlex } from '/app/redux-resources/robots'
 import { useTrackEvent } from '/app/redux/analytics'
 import { ConfirmCancelModal } from '../ConfirmCancelModal'
 
+import type { ComponentProps } from 'react'
 import type * as ApiClient from '@opentrons/react-api-client'
 
 vi.mock('@opentrons/react-api-client', async importOriginal => {
@@ -30,7 +30,7 @@ vi.mock('/app/redux/analytics')
 vi.mock('/app/redux-resources/analytics')
 vi.mock('/app/redux-resources/robots')
 
-const render = (props: React.ComponentProps<typeof ConfirmCancelModal>) => {
+const render = (props: ComponentProps<typeof ConfirmCancelModal>) => {
   return renderWithProviders(<ConfirmCancelModal {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -43,7 +43,7 @@ let mockTrackProtocolRunEvent: any
 const ROBOT_NAME = 'otie'
 
 describe('ConfirmCancelModal', () => {
-  let props: React.ComponentProps<typeof ConfirmCancelModal>
+  let props: ComponentProps<typeof ConfirmCancelModal>
   beforeEach(() => {
     mockTrackEvent = vi.fn()
     mockStopRun = vi.fn((_runId, opts) => opts.onSuccess())
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/ProtocolAnalysisErrorModal.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/ProtocolAnalysisErrorModal.test.tsx
index 44fcb0278ad..027f6b76b03 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/ProtocolAnalysisErrorModal.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/ProtocolAnalysisErrorModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, expect, vi } from 'vitest'
 
@@ -6,16 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ProtocolAnalysisErrorModal } from '../ProtocolAnalysisErrorModal'
 
-const render = (
-  props: React.ComponentProps<typeof ProtocolAnalysisErrorModal>
-) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ProtocolAnalysisErrorModal>) => {
   return renderWithProviders(<ProtocolAnalysisErrorModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ProtocolAnalysisErrorModal', () => {
-  let props: React.ComponentProps<typeof ProtocolAnalysisErrorModal>
+  let props: ComponentProps<typeof ProtocolAnalysisErrorModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/ProtocolDropTipModal.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/ProtocolDropTipModal.test.tsx
index 0d95071a969..4e583be0648 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/ProtocolDropTipModal.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/ProtocolDropTipModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, expect, beforeEach } from 'vitest'
 import { renderHook, act, screen, fireEvent } from '@testing-library/react'
 
@@ -10,6 +9,7 @@ import {
   ProtocolDropTipModal,
 } from '../ProtocolDropTipModal'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('/app/local-resources/instruments')
@@ -104,14 +104,14 @@ describe('useProtocolDropTipModal', () => {
   })
 })
 
-const render = (props: React.ComponentProps<typeof ProtocolDropTipModal>) => {
+const render = (props: ComponentProps<typeof ProtocolDropTipModal>) => {
   return renderWithProviders(<ProtocolDropTipModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ProtocolDropTipModal', () => {
-  let props: React.ComponentProps<typeof ProtocolDropTipModal>
+  let props: ComponentProps<typeof ProtocolDropTipModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/RunFailedModal.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/RunFailedModal.test.tsx
index d49875a0859..75ea8c0c720 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/RunFailedModal.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/__tests__/RunFailedModal.test.tsx
@@ -1,5 +1,5 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, vi, expect, afterEach } from 'vitest'
+import { fireEvent, screen } from '@testing-library/react'
 
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
@@ -7,8 +7,9 @@ import { useDownloadRunLog } from '../../../../../hooks'
 import { RunFailedModal } from '../RunFailedModal'
 
 import { RUN_STATUS_FAILED } from '@opentrons/api-client'
+
+import type { ComponentProps } from 'react'
 import type { RunError } from '@opentrons/api-client'
-import { fireEvent, screen } from '@testing-library/react'
 
 vi.mock('../../../../../hooks')
 
@@ -25,14 +26,14 @@ const mockError: RunError = {
   wrappedErrors: [],
 }
 
-const render = (props: React.ComponentProps<typeof RunFailedModal>) => {
+const render = (props: ComponentProps<typeof RunFailedModal>) => {
   return renderWithProviders(<RunFailedModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('RunFailedModal - DesktopApp', () => {
-  let props: React.ComponentProps<typeof RunFailedModal>
+  let props: ComponentProps<typeof RunFailedModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/__tests__/ProtocolRunHeader.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/__tests__/ProtocolRunHeader.test.tsx
index e82d58cb75e..f6c88119707 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/__tests__/ProtocolRunHeader.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/__tests__/ProtocolRunHeader.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, expect, beforeEach, afterEach } from 'vitest'
 import { screen } from '@testing-library/react'
 import { useNavigate } from 'react-router-dom'
@@ -26,6 +25,8 @@ import {
   useRunHeaderRunControls,
 } from '../hooks'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('react-router-dom')
 vi.mock('@opentrons/react-api-client')
 vi.mock('/app/redux-resources/robots')
@@ -43,7 +44,7 @@ const MOCK_RUN_ID = 'MOCK_RUN_ID'
 const MOCK_ROBOT = 'MOCK_ROBOT'
 
 describe('ProtocolRunHeader', () => {
-  let props: React.ComponentProps<typeof ProtocolRunHeader>
+  let props: ComponentProps<typeof ProtocolRunHeader>
   const mockNavigate = vi.fn()
 
   beforeEach(() => {
@@ -92,7 +93,7 @@ describe('ProtocolRunHeader', () => {
     vi.resetAllMocks()
   })
 
-  const render = (props: React.ComponentProps<typeof ProtocolRunHeader>) => {
+  const render = (props: ComponentProps<typeof ProtocolRunHeader>) => {
     return renderWithProviders(<ProtocolRunHeader {...props} />, {
       i18nInstance: i18n,
     })[0]
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/LabwareListItem.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/LabwareListItem.test.tsx
index eabef743182..89622cd7e5e 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/LabwareListItem.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/LabwareListItem.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 import { MemoryRouter } from 'react-router-dom'
@@ -21,6 +20,8 @@ import { getLocationInfoNames } from '/app/transformations/commands'
 import { mockLabwareDef } from '/app/organisms/LegacyLabwarePositionCheck/__fixtures__/mockLabwareDef'
 import { SecureLabwareModal } from '../SecureLabwareModal'
 import { LabwareListItem } from '../LabwareListItem'
+
+import type { ComponentProps } from 'react'
 import type {
   LoadLabwareRunTimeCommand,
   ModuleModel,
@@ -78,7 +79,7 @@ const mockThermocyclerModuleDefinition = {
 const mockModuleId = 'moduleId'
 const mockNickName = 'nickName'
 
-const render = (props: React.ComponentProps<typeof LabwareListItem>) => {
+const render = (props: ComponentProps<typeof LabwareListItem>) => {
   return renderWithProviders(
     <MemoryRouter>
       <LabwareListItem {...props} />
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/OffDeckLabwareList.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/OffDeckLabwareList.test.tsx
index 0204958f0f0..b543c3f27c8 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/OffDeckLabwareList.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/OffDeckLabwareList.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
@@ -9,9 +8,11 @@ import { mockLabwareDef } from '/app/organisms/LegacyLabwarePositionCheck/__fixt
 import { LabwareListItem } from '../LabwareListItem'
 import { OffDeckLabwareList } from '../OffDeckLabwareList'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../LabwareListItem')
 
-const render = (props: React.ComponentProps<typeof OffDeckLabwareList>) => {
+const render = (props: ComponentProps<typeof OffDeckLabwareList>) => {
   return renderWithProviders(
     <MemoryRouter>
       <OffDeckLabwareList {...props} />
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/SecureLabwareModal.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/SecureLabwareModal.test.tsx
index 80147006dc1..f367e007375 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/SecureLabwareModal.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/SecureLabwareModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 
@@ -6,7 +5,9 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { SecureLabwareModal } from '../SecureLabwareModal'
 
-const render = (props: React.ComponentProps<typeof SecureLabwareModal>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof SecureLabwareModal>) => {
   return renderWithProviders(<SecureLabwareModal {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -15,7 +16,7 @@ const mockTypeMagDeck = 'magneticModuleType'
 const mockTypeTC = 'thermocyclerModuleType'
 
 describe('SecureLabwareModal', () => {
-  let props: React.ComponentProps<typeof SecureLabwareModal>
+  let props: ComponentProps<typeof SecureLabwareModal>
   beforeEach(() => {
     props = { type: mockTypeMagDeck, onCloseClick: vi.fn() }
   })
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/SetupLabwareList.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/SetupLabwareList.test.tsx
index 85068d39a1b..9f9860de1d4 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/SetupLabwareList.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/SetupLabwareList.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { describe, it, beforeEach, vi } from 'vitest'
 import { screen } from '@testing-library/react'
@@ -9,13 +8,15 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { SetupLabwareList } from '../SetupLabwareList'
 import { LabwareListItem } from '../LabwareListItem'
+
+import type { ComponentProps } from 'react'
 import type { CompletedProtocolAnalysis } from '@opentrons/shared-data'
 
 vi.mock('../LabwareListItem')
 
 const protocolWithTC = (multiple_tipacks_with_tc as unknown) as CompletedProtocolAnalysis
 
-const render = (props: React.ComponentProps<typeof SetupLabwareList>) => {
+const render = (props: ComponentProps<typeof SetupLabwareList>) => {
   return renderWithProviders(
     <MemoryRouter>
       <SetupLabwareList {...props} />
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/SetupLabwareMap.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/SetupLabwareMap.test.tsx
index 40f63cbc170..57a84b1f737 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/SetupLabwareMap.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/SetupLabwareMap.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { MemoryRouter } from 'react-router-dom'
 import { describe, it, beforeEach, vi, afterEach, expect } from 'vitest'
@@ -20,6 +19,7 @@ import {
 } from '/app/transformations/analysis'
 import { SetupLabwareMap } from '../SetupLabwareMap'
 
+import type { ComponentProps } from 'react'
 import type {
   CompletedProtocolAnalysis,
   LabwareDefinition2,
@@ -86,7 +86,7 @@ const mockTCModule = {
   type: 'thermocyclerModuleType' as ModuleType,
 }
 
-const render = (props: React.ComponentProps<typeof SetupLabwareMap>) => {
+const render = (props: ComponentProps<typeof SetupLabwareMap>) => {
   return renderWithProviders(
     <MemoryRouter>
       <SetupLabwareMap {...props} />
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabwarePositionCheck/__tests__/CurrentOffsetsTable.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabwarePositionCheck/__tests__/CurrentOffsetsTable.test.tsx
index 334d5328cec..db2e5a8b5a1 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabwarePositionCheck/__tests__/CurrentOffsetsTable.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabwarePositionCheck/__tests__/CurrentOffsetsTable.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, vi, expect, afterEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -15,6 +14,7 @@ import { useLPCDisabledReason } from '/app/resources/runs'
 import { getLatestCurrentOffsets } from '/app/transformations/runs'
 import { CurrentOffsetsTable } from '../CurrentOffsetsTable'
 
+import type { ComponentProps } from 'react'
 import type { CompletedProtocolAnalysis } from '@opentrons/shared-data'
 import type { LabwareOffset } from '@opentrons/api-client'
 
@@ -31,7 +31,7 @@ vi.mock('@opentrons/shared-data', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof CurrentOffsetsTable>) => {
+const render = (props: ComponentProps<typeof CurrentOffsetsTable>) => {
   return renderWithProviders(<CurrentOffsetsTable {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -64,7 +64,7 @@ const mockCurrentOffsets: LabwareOffset[] = [
 ]
 
 describe('CurrentOffsetsTable', () => {
-  let props: React.ComponentProps<typeof CurrentOffsetsTable>
+  let props: ComponentProps<typeof CurrentOffsetsTable>
   beforeEach(() => {
     props = {
       currentOffsets: mockCurrentOffsets,
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabwarePositionCheck/__tests__/HowLPCWorksModal.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabwarePositionCheck/__tests__/HowLPCWorksModal.test.tsx
index 5dd3d15db69..a12b6948d75 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabwarePositionCheck/__tests__/HowLPCWorksModal.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabwarePositionCheck/__tests__/HowLPCWorksModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 
@@ -6,14 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { HowLPCWorksModal } from '../HowLPCWorksModal'
 
-const render = (props: React.ComponentProps<typeof HowLPCWorksModal>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof HowLPCWorksModal>) => {
   return renderWithProviders(<HowLPCWorksModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('HowLPCWorksModal', () => {
-  let props: React.ComponentProps<typeof HowLPCWorksModal>
+  let props: ComponentProps<typeof HowLPCWorksModal>
   beforeEach(() => {
     props = { onCloseClick: vi.fn() }
   })
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLiquids/__tests__/SetupLiquids.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLiquids/__tests__/SetupLiquids.test.tsx
index 736d5f5bc85..8436072e2f1 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLiquids/__tests__/SetupLiquids.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLiquids/__tests__/SetupLiquids.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 import { screen, fireEvent } from '@testing-library/react'
 
@@ -11,6 +10,8 @@ import { SetupLiquidsList } from '../SetupLiquidsList'
 import { SetupLiquidsMap } from '../SetupLiquidsMap'
 import { useRunHasStarted } from '/app/resources/runs'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/components', async () => {
   const actual = await vi.importActual('@opentrons/components')
   return {
@@ -24,7 +25,7 @@ vi.mock('/app/resources/runs')
 
 describe('SetupLiquids', () => {
   const render = (
-    props: React.ComponentProps<typeof SetupLiquids> & {
+    props: ComponentProps<typeof SetupLiquids> & {
       startConfirmed?: boolean
     }
   ) => {
@@ -47,7 +48,7 @@ describe('SetupLiquids', () => {
     )
   }
 
-  let props: React.ComponentProps<typeof SetupLiquids>
+  let props: ComponentProps<typeof SetupLiquids>
   beforeEach(() => {
     vi.mocked(SetupLiquidsList).mockReturnValue(
       <div>Mock setup liquids list</div>
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLiquids/__tests__/SetupLiquidsList.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLiquids/__tests__/SetupLiquidsList.test.tsx
index 60cb6a759a0..2d96d408044 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLiquids/__tests__/SetupLiquidsList.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLiquids/__tests__/SetupLiquidsList.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { when } from 'vitest-when'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
@@ -25,6 +24,7 @@ import {
 import { LiquidsLabwareDetailsModal } from '/app/organisms/LiquidsLabwareDetailsModal'
 import { useNotifyRunQuery } from '/app/resources/runs'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 import type * as SharedData from '@opentrons/shared-data'
 
@@ -70,7 +70,7 @@ vi.mock('@opentrons/shared-data', async importOriginal => {
 vi.mock('/app/redux/analytics')
 vi.mock('/app/resources/runs')
 
-const render = (props: React.ComponentProps<typeof SetupLiquidsList>) => {
+const render = (props: ComponentProps<typeof SetupLiquidsList>) => {
   return renderWithProviders(<SetupLiquidsList {...props} />, {
     i18nInstance: i18n,
   })
@@ -78,7 +78,7 @@ const render = (props: React.ComponentProps<typeof SetupLiquidsList>) => {
 let mockTrackEvent: Mock
 
 describe('SetupLiquidsList', () => {
-  let props: React.ComponentProps<typeof SetupLiquidsList>
+  let props: ComponentProps<typeof SetupLiquidsList>
   beforeEach(() => {
     props = { runId: '123', robotName: 'test_flex' }
     vi.mocked(getTotalVolumePerLiquidId).mockReturnValue(400)
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLiquids/__tests__/SetupLiquidsMap.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLiquids/__tests__/SetupLiquidsMap.test.tsx
index 023e73af09c..97e96232b7e 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLiquids/__tests__/SetupLiquidsMap.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLiquids/__tests__/SetupLiquidsMap.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, afterEach, expect } from 'vitest'
@@ -35,6 +34,7 @@ import { mockFetchModulesSuccessActionPayloadModules } from '/app/redux/modules/
 
 import { SetupLiquidsMap } from '../SetupLiquidsMap'
 
+import type { ComponentProps } from 'react'
 import type {
   ModuleModel,
   ModuleType,
@@ -102,7 +102,7 @@ const mockMagneticModule = {
   quirks: [],
 }
 
-const render = (props: React.ComponentProps<typeof SetupLiquidsMap>) => {
+const render = (props: ComponentProps<typeof SetupLiquidsMap>) => {
   return renderWithProviders(<SetupLiquidsMap {...props} />, {
     i18nInstance: i18n,
   })
@@ -113,7 +113,7 @@ const mockProtocolAnalysis = {
 } as any
 
 describe('SetupLiquidsMap', () => {
-  let props: React.ComponentProps<typeof SetupLiquidsMap>
+  let props: ComponentProps<typeof SetupLiquidsMap>
   beforeEach(() => {
     props = {
       runId: RUN_ID,
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/NotConfiguredModal.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/NotConfiguredModal.test.tsx
index 9f371faaa64..fc2b584cf22 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/NotConfiguredModal.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/NotConfiguredModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -9,20 +8,21 @@ import { i18n } from '/app/i18n'
 import { NotConfiguredModal } from '../NotConfiguredModal'
 import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration'
 
+import type { ComponentProps } from 'react'
 import type { UseQueryResult } from 'react-query'
 import type { DeckConfiguration } from '@opentrons/shared-data'
 
 vi.mock('@opentrons/react-api-client')
 vi.mock('/app/resources/deck_configuration')
 
-const render = (props: React.ComponentProps<typeof NotConfiguredModal>) => {
+const render = (props: ComponentProps<typeof NotConfiguredModal>) => {
   return renderWithProviders(<NotConfiguredModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('NotConfiguredModal', () => {
-  let props: React.ComponentProps<typeof NotConfiguredModal>
+  let props: ComponentProps<typeof NotConfiguredModal>
   const mockUpdate = vi.fn()
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupFixtureList.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupFixtureList.test.tsx
index dd0236ac96d..61708168788 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupFixtureList.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupFixtureList.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -16,6 +15,7 @@ import { NotConfiguredModal } from '../NotConfiguredModal'
 import { LocationConflictModal } from '/app/organisms/LocationConflictModal'
 import { DeckFixtureSetupInstructionsModal } from '/app/organisms/DeviceDetailsDeckConfiguration/DeckFixtureSetupInstructionsModal'
 
+import type { ComponentProps } from 'react'
 import type { CutoutConfigAndCompatibility } from '/app/resources/deck_configuration/hooks'
 
 vi.mock('/app/resources/deck_configuration/hooks')
@@ -61,14 +61,14 @@ const mockConflictDeckConfigCompatibility: CutoutConfigAndCompatibility[] = [
   },
 ]
 
-const render = (props: React.ComponentProps<typeof SetupFixtureList>) => {
+const render = (props: ComponentProps<typeof SetupFixtureList>) => {
   return renderWithProviders(<SetupFixtureList {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('SetupFixtureList', () => {
-  let props: React.ComponentProps<typeof SetupFixtureList>
+  let props: ComponentProps<typeof SetupFixtureList>
   beforeEach(() => {
     props = {
       deckConfigCompatibility: mockDeckConfigCompatibility,
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesAndDeck.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesAndDeck.test.tsx
index 21926d3c823..615bb5a487d 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesAndDeck.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesAndDeck.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { describe, it, beforeEach, expect, vi } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -20,6 +19,8 @@ import { SetupModulesList } from '../SetupModulesList'
 import { SetupModulesMap } from '../SetupModulesMap'
 import { SetupFixtureList } from '../SetupFixtureList'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux-resources/robots')
 vi.mock('../SetupModulesList')
 vi.mock('../SetupModulesMap')
@@ -31,14 +32,14 @@ vi.mock('/app/resources/runs')
 const MOCK_ROBOT_NAME = 'otie'
 const MOCK_RUN_ID = '1'
 
-const render = (props: React.ComponentProps<typeof SetupModuleAndDeck>) => {
+const render = (props: ComponentProps<typeof SetupModuleAndDeck>) => {
   return renderWithProviders(<SetupModuleAndDeck {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('SetupModuleAndDeck', () => {
-  let props: React.ComponentProps<typeof SetupModuleAndDeck>
+  let props: ComponentProps<typeof SetupModuleAndDeck>
   beforeEach(() => {
     props = {
       robotName: MOCK_ROBOT_NAME,
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesList.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesList.test.tsx
index e62d600cea6..95c95fced5a 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesList.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesList.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
 import { describe, it, beforeEach, expect, vi } from 'vitest'
@@ -27,6 +26,7 @@ import { UnMatchedModuleWarning } from '../UnMatchedModuleWarning'
 import { SetupModulesList } from '../SetupModulesList'
 import { LocationConflictModal } from '/app/organisms/LocationConflictModal'
 
+import type { ComponentProps } from 'react'
 import type { ModuleModel, ModuleType } from '@opentrons/shared-data'
 import type { DiscoveredRobot } from '/app/redux/discovery/types'
 
@@ -77,14 +77,14 @@ const mockCalibratedData = {
   last_modified: '2023-06-01T14:42:20.131798+00:00',
 }
 
-const render = (props: React.ComponentProps<typeof SetupModulesList>) => {
+const render = (props: ComponentProps<typeof SetupModulesList>) => {
   return renderWithProviders(<SetupModulesList {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('SetupModulesList', () => {
-  let props: React.ComponentProps<typeof SetupModulesList>
+  let props: ComponentProps<typeof SetupModulesList>
   let mockChainLiveCommands = vi.fn()
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesMap.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesMap.test.tsx
index 9d9449283dc..c7619b44f9b 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesMap.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesMap.test.tsx
@@ -1,6 +1,4 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
-
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { MemoryRouter } from 'react-router-dom'
 import { describe, it, beforeEach, vi, afterEach, expect } from 'vitest'
@@ -18,6 +16,8 @@ import { useMostRecentCompletedAnalysis } from '/app/resources/runs'
 import { ModuleInfo } from '/app/molecules/ModuleInfo'
 import { SetupModulesMap } from '../SetupModulesMap'
 import { getAttachedProtocolModuleMatches } from '/app/transformations/analysis'
+
+import type { ComponentProps } from 'react'
 import type {
   CompletedProtocolAnalysis,
   ModuleModel,
@@ -47,7 +47,7 @@ vi.mock('/app/transformations/analysis')
 vi.mock('/app/molecules/ModuleInfo')
 vi.mock('/app/resources/modules')
 
-const render = (props: React.ComponentProps<typeof SetupModulesMap>) => {
+const render = (props: ComponentProps<typeof SetupModulesMap>) => {
   return renderWithProviders(
     <MemoryRouter>
       <SetupModulesMap {...props} />
@@ -98,7 +98,7 @@ const mockTCModule = {
 }
 
 describe('SetupModulesMap', () => {
-  let props: React.ComponentProps<typeof SetupModulesMap>
+  let props: ComponentProps<typeof SetupModulesMap>
   beforeEach(() => {
     props = {
       runId: MOCK_RUN_ID,
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupStep.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupStep.tsx
index 25f2baf1d64..2d5fedf7700 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupStep.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupStep.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 
 import {
@@ -18,19 +17,21 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
+
 interface SetupStepProps {
   /** whether or not to show the full contents of the step */
   expanded: boolean
   /** always shown text name of the step */
-  title: React.ReactNode
+  title: ReactNode
   /** always shown text that provides a one sentence explanation of the contents */
   description: string
   /** callback that should toggle the expanded state (managed by parent) */
   toggleExpanded: () => void
   /** contents to be shown only when expanded */
-  children: React.ReactNode
+  children: ReactNode
   /** element to be shown (right aligned) regardless of expanded state */
-  rightElement: React.ReactNode
+  rightElement: ReactNode
 }
 
 const EXPANDED_STYLE = css`
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/EmptySetupStep.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/EmptySetupStep.test.tsx
index 673d8b4806c..b716de57f06 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/EmptySetupStep.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/EmptySetupStep.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -6,14 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { EmptySetupStep } from '../EmptySetupStep'
 
-const render = (props: React.ComponentProps<typeof EmptySetupStep>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof EmptySetupStep>) => {
   return renderWithProviders(<EmptySetupStep {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('EmptySetupStep', () => {
-  let props: React.ComponentProps<typeof EmptySetupStep>
+  let props: ComponentProps<typeof EmptySetupStep>
   beforeEach(() => {
     props = {
       title: 'mockTitle',
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/LabwareInfoOverlay.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/LabwareInfoOverlay.test.tsx
index 0198aa9e448..a47f37e1136 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/LabwareInfoOverlay.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/LabwareInfoOverlay.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, afterEach, expect } from 'vitest'
@@ -13,6 +12,8 @@ import { getLabwareLocation } from '/app/transformations/commands'
 import { LabwareInfoOverlay } from '../LabwareInfoOverlay'
 import { getLabwareDefinitionUri } from '/app/transformations/protocols'
 import { useLabwareOffsetForLabware } from '../useLabwareOffsetForLabware'
+
+import type { ComponentProps } from 'react'
 import type {
   LabwareDefinition2,
   ProtocolFile,
@@ -33,7 +34,7 @@ vi.mock('@opentrons/shared-data', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof LabwareInfoOverlay>) => {
+const render = (props: ComponentProps<typeof LabwareInfoOverlay>) => {
   return renderWithProviders(
     <svg>
       <LabwareInfoOverlay {...props} />
@@ -51,7 +52,7 @@ const MOCK_LABWARE_VECTOR = { x: 1, y: 2, z: 3 }
 const MOCK_RUN_ID = 'fake_run_id'
 
 describe('LabwareInfoOverlay', () => {
-  let props: React.ComponentProps<typeof LabwareInfoOverlay>
+  let props: ComponentProps<typeof LabwareInfoOverlay>
   let labware: LoadedLabware[]
   let labwareDefinitions: ProtocolFile<{}>['labwareDefinitions']
   beforeEach(() => {
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/ProtocolRunModuleControls.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/ProtocolRunModuleControls.test.tsx
index 5dd1507f893..1895c2e4eca 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/ProtocolRunModuleControls.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/ProtocolRunModuleControls.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { describe, it, beforeEach, vi, afterEach } from 'vitest'
 import { screen } from '@testing-library/react'
@@ -15,6 +14,8 @@ import {
   mockThermocycler,
   mockHeaterShaker,
 } from '/app/redux/modules/__fixtures__'
+
+import type { ComponentProps } from 'react'
 import type { ModuleModel, ModuleType } from '@opentrons/shared-data'
 
 vi.mock('@opentrons/react-api-client')
@@ -49,9 +50,7 @@ const mockTCModule = {
 }
 const MOCK_TC_COORDS = [20, 30, 0]
 
-const render = (
-  props: React.ComponentProps<typeof ProtocolRunModuleControls>
-) => {
+const render = (props: ComponentProps<typeof ProtocolRunModuleControls>) => {
   return renderWithProviders(<ProtocolRunModuleControls {...props} />, {
     i18nInstance: i18n,
   })[0]
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/ProtocolRunRuntimeParameters.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/ProtocolRunRuntimeParameters.test.tsx
index 59425f6ff6b..99922644961 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/ProtocolRunRuntimeParameters.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/ProtocolRunRuntimeParameters.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, afterEach, expect } from 'vitest'
 import { screen } from '@testing-library/react'
 import { when } from 'vitest-when'
@@ -16,6 +15,7 @@ import {
 } from '/app/resources/runs/__fixtures__'
 import { ProtocolRunRuntimeParameters } from '../ProtocolRunRunTimeParameters'
 
+import type { ComponentProps } from 'react'
 import type { UseQueryResult } from 'react-query'
 import type { Run } from '@opentrons/api-client'
 import type {
@@ -100,16 +100,14 @@ const mockCsvRtp = {
   },
 }
 
-const render = (
-  props: React.ComponentProps<typeof ProtocolRunRuntimeParameters>
-) => {
+const render = (props: ComponentProps<typeof ProtocolRunRuntimeParameters>) => {
   return renderWithProviders(<ProtocolRunRuntimeParameters {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('ProtocolRunRuntimeParameters', () => {
-  let props: React.ComponentProps<typeof ProtocolRunRuntimeParameters>
+  let props: ComponentProps<typeof ProtocolRunRuntimeParameters>
   beforeEach(() => {
     props = {
       runId: RUN_ID,
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupCalibrationItem.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupCalibrationItem.test.tsx
index e39e5d7c83c..9002eb0da0d 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupCalibrationItem.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupCalibrationItem.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { when } from 'vitest-when'
 import { describe, it, beforeEach, vi, afterEach } from 'vitest'
@@ -9,6 +8,8 @@ import { useRunHasStarted } from '/app/resources/runs'
 import { formatTimestamp } from '/app/transformations/runs'
 import { SetupCalibrationItem } from '../SetupCalibrationItem'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/resources/runs')
 vi.mock('/app/transformations/runs')
 
@@ -21,7 +22,7 @@ describe('SetupCalibrationItem', () => {
     title = 'stub title',
     button = <button>stub button</button>,
     runId = RUN_ID,
-  }: Partial<React.ComponentProps<typeof SetupCalibrationItem>> = {}) => {
+  }: Partial<ComponentProps<typeof SetupCalibrationItem>> = {}) => {
     return renderWithProviders(
       <SetupCalibrationItem
         {...{ subText, calibratedDate, title, button, runId }}
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupFlexPipetteCalibrationItem.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupFlexPipetteCalibrationItem.test.tsx
index 0719c0c13b6..1a2f9e16959 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupFlexPipetteCalibrationItem.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupFlexPipetteCalibrationItem.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, afterEach } from 'vitest'
@@ -11,6 +10,8 @@ import { useMostRecentCompletedAnalysis } from '/app/resources/runs'
 import { PipetteWizardFlows } from '/app/organisms/PipetteWizardFlows'
 import { SetupFlexPipetteCalibrationItem } from '../SetupFlexPipetteCalibrationItem'
 import { modifiedSimpleV6Protocol as _uncastedModifiedSimpleV6Protocol } from '/app/resources/runs/__fixtures__'
+
+import type { ComponentProps } from 'react'
 import type { CompletedProtocolAnalysis } from '@opentrons/shared-data'
 
 vi.mock('@opentrons/react-api-client')
@@ -33,9 +34,7 @@ describe('SetupFlexPipetteCalibrationItem', () => {
   const render = ({
     mount = 'left',
     runId = RUN_ID,
-  }: Partial<
-    React.ComponentProps<typeof SetupFlexPipetteCalibrationItem>
-  > = {}) => {
+  }: Partial<ComponentProps<typeof SetupFlexPipetteCalibrationItem>> = {}) => {
     return renderWithProviders(
       <MemoryRouter>
         <SetupFlexPipetteCalibrationItem
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupPipetteCalibrationItem.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupPipetteCalibrationItem.test.tsx
index effcb32b60f..14528465289 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupPipetteCalibrationItem.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupPipetteCalibrationItem.test.tsx
@@ -1,7 +1,7 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { describe, it, beforeEach, vi, afterEach, expect } from 'vitest'
 import { screen } from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
 
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
@@ -9,7 +9,8 @@ import { mockDeckCalData } from '/app/redux/calibration/__fixtures__'
 import { mockPipetteInfo } from '/app/redux/pipettes/__fixtures__'
 import { useDeckCalibrationData } from '../../hooks'
 import { SetupPipetteCalibrationItem } from '../SetupPipetteCalibrationItem'
-import { MemoryRouter } from 'react-router-dom'
+
+import type { ComponentProps } from 'react'
 
 vi.mock('../../hooks')
 vi.mock('/app/redux-resources/robots')
@@ -23,9 +24,7 @@ describe('SetupPipetteCalibrationItem', () => {
     mount = 'left',
     robotName = ROBOT_NAME,
     runId = RUN_ID,
-  }: Partial<
-    React.ComponentProps<typeof SetupPipetteCalibrationItem>
-  > = {}) => {
+  }: Partial<ComponentProps<typeof SetupPipetteCalibrationItem>> = {}) => {
     return renderWithProviders(
       <MemoryRouter>
         <SetupPipetteCalibrationItem
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupRobotCalibration.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupRobotCalibration.test.tsx
index 8d737f26452..0f8ec67e8dd 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupRobotCalibration.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupRobotCalibration.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, afterEach, expect } from 'vitest'
@@ -19,6 +18,8 @@ import { SetupInstrumentCalibration } from '../SetupInstrumentCalibration'
 import { SetupTipLengthCalibration } from '../SetupTipLengthCalibration'
 import { SetupRobotCalibration } from '../SetupRobotCalibration'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/analytics')
 vi.mock('../../hooks')
 vi.mock('/app/resources/runs')
@@ -40,7 +41,7 @@ describe('SetupRobotCalibration', () => {
     nextStep = 'module_setup_step',
     calibrationStatus = { complete: true },
     expandStep = mockExpandStep,
-  }: Partial<React.ComponentProps<typeof SetupRobotCalibration>> = {}) => {
+  }: Partial<ComponentProps<typeof SetupRobotCalibration>> = {}) => {
     return renderWithProviders(
       <SetupRobotCalibration
         {...{
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupStep.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupStep.test.tsx
index 705866c51b2..4772a33f2bc 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupStep.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupStep.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, afterEach, expect } from 'vitest'
 
@@ -6,6 +5,7 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { SetupStep } from '../SetupStep'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 describe('SetupStep', () => {
@@ -16,7 +16,7 @@ describe('SetupStep', () => {
     toggleExpanded = toggleExpandedMock,
     children = <button>stub children</button>,
     rightElement = <div>right element</div>,
-  }: Partial<React.ComponentProps<typeof SetupStep>> = {}) => {
+  }: Partial<ComponentProps<typeof SetupStep>> = {}) => {
     return renderWithProviders(
       <SetupStep
         {...{
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupTipLengthCalibrationButton.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupTipLengthCalibrationButton.test.tsx
index 4dac2e3c8d5..c32efdf6565 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupTipLengthCalibrationButton.test.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupTipLengthCalibrationButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { screen, fireEvent } from '@testing-library/react'
 import { describe, it, beforeEach, vi, afterEach, expect } from 'vitest'
@@ -15,6 +14,7 @@ import { useRunHasStarted } from '/app/resources/runs'
 import { useDashboardCalibrateTipLength } from '/app/pages/Desktop/Devices/CalibrationDashboard/hooks/useDashboardCalibrateTipLength'
 import { SetupTipLengthCalibrationButton } from '../SetupTipLengthCalibrationButton'
 
+import type { ComponentProps } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 
 vi.mock('@opentrons/components/src/hooks')
@@ -39,9 +39,7 @@ describe('SetupTipLengthCalibrationButton', () => {
     hasCalibrated = false,
     tipRackDefinition = fixtureTiprack300ul as LabwareDefinition2,
     isExtendedPipOffset = false,
-  }: Partial<
-    React.ComponentProps<typeof SetupTipLengthCalibrationButton>
-  > = {}) => {
+  }: Partial<ComponentProps<typeof SetupTipLengthCalibrationButton>> = {}) => {
     return renderWithProviders(
       <SetupTipLengthCalibrationButton
         {...{
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/__tests__/DeviceResetModal.test.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/__tests__/DeviceResetModal.test.tsx
index a5a3a91d219..78e5427bfd5 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/__tests__/DeviceResetModal.test.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/__tests__/DeviceResetModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, expect, beforeEach } from 'vitest'
@@ -9,6 +8,7 @@ import { resetConfig } from '/app/redux/robot-admin'
 import { useDispatchApiRequest } from '/app/redux/robot-api'
 import { DeviceResetModal } from '../DeviceResetModal'
 
+import type { ComponentProps } from 'react'
 import type { DispatchApiRequestType } from '/app/redux/robot-api'
 
 vi.mock('/app/redux-resources/robots')
@@ -18,7 +18,7 @@ vi.mock('/app/redux/robot-api')
 const mockResetOptions = {}
 const mockCloseModal = vi.fn()
 const ROBOT_NAME = 'otie'
-const render = (props: React.ComponentProps<typeof DeviceResetModal>) => {
+const render = (props: ComponentProps<typeof DeviceResetModal>) => {
   return renderWithProviders(
     <MemoryRouter>
       <DeviceResetModal {...props} />
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/DeviceReset.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/DeviceReset.tsx
index 2249e453fe6..b9cd537894a 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/DeviceReset.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/DeviceReset.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import {
@@ -14,6 +13,8 @@ import {
 
 import { TertiaryButton } from '/app/atoms/buttons'
 
+import type { MouseEventHandler } from 'react'
+
 interface DeviceResetProps {
   updateIsExpanded: (
     isExpanded: boolean,
@@ -28,7 +29,7 @@ export function DeviceReset({
 }: DeviceResetProps): JSX.Element {
   const { t } = useTranslation('device_settings')
 
-  const handleClick: React.MouseEventHandler<HTMLButtonElement> = () => {
+  const handleClick: MouseEventHandler<HTMLButtonElement> = () => {
     if (!isRobotBusy) {
       updateIsExpanded(true, 'deviceReset')
     }
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/DisplayRobotName.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/DisplayRobotName.tsx
index c6a380cd6e5..7f1d51022b4 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/DisplayRobotName.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/DisplayRobotName.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import {
@@ -14,6 +13,8 @@ import {
 } from '@opentrons/components'
 
 import { TertiaryButton } from '/app/atoms/buttons'
+
+import type { MouseEventHandler } from 'react'
 interface DisplayRobotNameProps {
   robotName: string
   updateIsExpanded: (
@@ -30,7 +31,7 @@ export function DisplayRobotName({
 }: DisplayRobotNameProps): JSX.Element {
   const { t } = useTranslation('device_settings')
 
-  const handleClick: React.MouseEventHandler<HTMLButtonElement> = () => {
+  const handleClick: MouseEventHandler<HTMLButtonElement> = () => {
     if (!isRobotBusy) {
       updateIsExpanded(true, 'renameRobot')
     }
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/FactoryMode.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/FactoryMode.tsx
index 14cb3766040..8fea7e0f82d 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/FactoryMode.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/FactoryMode.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import {
@@ -14,9 +13,11 @@ import {
 
 import { TertiaryButton } from '/app/atoms/buttons'
 
+import type { Dispatch, SetStateAction } from 'react'
+
 interface FactoryModeProps {
   isRobotBusy: boolean
-  setShowFactoryModeSlideout: React.Dispatch<React.SetStateAction<boolean>>
+  setShowFactoryModeSlideout: Dispatch<SetStateAction<boolean>>
   sn: string | null
 }
 
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/GantryHoming.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/GantryHoming.tsx
index 96ea82a59cf..6537d1fdf1a 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/GantryHoming.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/GantryHoming.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 
@@ -15,6 +14,7 @@ import {
 import { ToggleButton } from '/app/atoms/buttons'
 import { updateSetting } from '/app/redux/robot-settings'
 
+import type { MouseEventHandler } from 'react'
 import type { Dispatch } from '/app/redux/types'
 import type { RobotSettingsField } from '/app/redux/robot-settings/types'
 
@@ -34,7 +34,7 @@ export function GantryHoming({
   const value = settings?.value ? settings.value : false
   const id = settings?.id ? settings.id : 'disableHomeOnBoot'
 
-  const handleClick: React.MouseEventHandler<Element> = () => {
+  const handleClick: MouseEventHandler<Element> = () => {
     if (!isRobotBusy) {
       dispatch(updateSetting(robotName, id, !value))
     }
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/LegacySettings.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/LegacySettings.tsx
index 5ea0ae6e5ec..7947243d13f 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/LegacySettings.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/LegacySettings.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 
@@ -15,6 +14,7 @@ import {
 import { ToggleButton } from '/app/atoms/buttons'
 import { updateSetting } from '/app/redux/robot-settings'
 
+import type { MouseEventHandler } from 'react'
 import type { Dispatch } from '/app/redux/types'
 import type { RobotSettingsField } from '/app/redux/robot-settings/types'
 
@@ -34,7 +34,7 @@ export function LegacySettings({
   const value = settings?.value ? settings.value : false
   const id = settings?.id ? settings.id : 'deckCalibrationDots'
 
-  const handleClick: React.MouseEventHandler<Element> = () => {
+  const handleClick: MouseEventHandler<Element> = () => {
     if (!isRobotBusy) {
       dispatch(updateSetting(robotName, id, !value))
     }
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/ShortTrashBin.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/ShortTrashBin.tsx
index 5bc00476406..6152163c223 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/ShortTrashBin.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/ShortTrashBin.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 
@@ -15,6 +14,7 @@ import {
 import { ToggleButton } from '/app/atoms/buttons'
 import { updateSetting } from '/app/redux/robot-settings'
 
+import type { MouseEventHandler } from 'react'
 import type { Dispatch } from '/app/redux/types'
 import type { RobotSettingsField } from '/app/redux/robot-settings/types'
 
@@ -34,7 +34,7 @@ export function ShortTrashBin({
   const value = settings?.value ? settings.value : false
   const id = settings?.id ? settings.id : 'shortTrashBin'
 
-  const handleClick: React.MouseEventHandler<Element> = () => {
+  const handleClick: MouseEventHandler<Element> = () => {
     if (!isRobotBusy) {
       dispatch(updateSetting(robotName, id, !value))
     }
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/UsageSettings.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/UsageSettings.tsx
index e8843af6019..c44f573f7a2 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/UsageSettings.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/UsageSettings.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 
@@ -15,6 +14,7 @@ import {
 import { ToggleButton } from '/app/atoms/buttons'
 import { updateSetting } from '/app/redux/robot-settings'
 
+import type { MouseEventHandler } from 'react'
 import type { Dispatch } from '/app/redux/types'
 import type { RobotSettingsField } from '/app/redux/robot-settings/types'
 
@@ -34,7 +34,7 @@ export function UsageSettings({
   const value = settings?.value ? settings.value : false
   const id = settings?.id ? settings.id : 'enableDoorSafetySwitch'
 
-  const handleClick: React.MouseEventHandler<Element> = () => {
+  const handleClick: MouseEventHandler<Element> = () => {
     if (!isRobotBusy) {
       dispatch(updateSetting(robotName, id, !value))
     }
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/UseOlderAspirateBehavior.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/UseOlderAspirateBehavior.tsx
index c3496621f18..c12941a12a0 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/UseOlderAspirateBehavior.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/UseOlderAspirateBehavior.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 
@@ -15,6 +14,7 @@ import {
 import { ToggleButton } from '/app/atoms/buttons'
 import { updateSetting } from '/app/redux/robot-settings'
 
+import type { MouseEventHandler } from 'react'
 import type { Dispatch } from '/app/redux/types'
 import type { RobotSettingsField } from '/app/redux/robot-settings/types'
 
@@ -34,7 +34,7 @@ export function UseOlderAspirateBehavior({
   const value = settings?.value ? settings.value : false
   const id = settings?.id ? settings.id : 'useOldAspirationFunctions'
 
-  const handleClick: React.MouseEventHandler<Element> = () => {
+  const handleClick: MouseEventHandler<Element> = () => {
     if (!isRobotBusy) {
       dispatch(updateSetting(robotName, id, !value))
     }
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/EnableErrorRecoveryMode.test.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/EnableErrorRecoveryMode.test.tsx
index 9406e38f768..b3ff80c9341 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/EnableErrorRecoveryMode.test.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/EnableErrorRecoveryMode.test.tsx
@@ -5,21 +5,19 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { useErrorRecoverySettingsToggle } from '/app/resources/errorRecovery'
 import { EnableErrorRecoveryMode } from '../EnableErrorRecoveryMode'
-import type * as React from 'react'
+import type { ComponentProps } from 'react'
 
 vi.mock('/app/resources/errorRecovery')
 
 const mockToggleERSettings = vi.fn()
-const render = (
-  props: React.ComponentProps<typeof EnableErrorRecoveryMode>
-) => {
+const render = (props: ComponentProps<typeof EnableErrorRecoveryMode>) => {
   return renderWithProviders(<EnableErrorRecoveryMode {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('EnableErrorRecoveryMode', () => {
-  let props: React.ComponentProps<typeof EnableErrorRecoveryMode>
+  let props: ComponentProps<typeof EnableErrorRecoveryMode>
 
   beforeEach(() => {
     props = { isRobotBusy: false }
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/EnableStatusLight.test.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/EnableStatusLight.test.tsx
index 2e2cc956bde..c36d79a04db 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/EnableStatusLight.test.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/EnableStatusLight.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, expect, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -8,18 +7,20 @@ import { i18n } from '/app/i18n'
 import { useLEDLights } from '/app/resources/robot-settings'
 import { EnableStatusLight } from '../EnableStatusLight'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/resources/robot-settings')
 
 const ROBOT_NAME = 'otie'
 const mockToggleLights = vi.fn()
-const render = (props: React.ComponentProps<typeof EnableStatusLight>) => {
+const render = (props: ComponentProps<typeof EnableStatusLight>) => {
   return renderWithProviders(<EnableStatusLight {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('EnableStatusLight', () => {
-  let props: React.ComponentProps<typeof EnableStatusLight>
+  let props: ComponentProps<typeof EnableStatusLight>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/OpenJupyterControl.test.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/OpenJupyterControl.test.tsx
index 57a01e25680..b6c5b2d9be4 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/OpenJupyterControl.test.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/OpenJupyterControl.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
@@ -8,6 +7,8 @@ import { i18n } from '/app/i18n'
 import { useTrackEvent, ANALYTICS_JUPYTER_OPEN } from '/app/redux/analytics'
 import { OpenJupyterControl } from '../OpenJupyterControl'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/analytics')
 
 const mockIpAddress = '1.1.1.1'
@@ -18,7 +19,7 @@ global.window = Object.create(window)
 Object.defineProperty(window, 'open', { writable: true, configurable: true })
 window.open = vi.fn()
 
-const render = (props: React.ComponentProps<typeof OpenJupyterControl>) => {
+const render = (props: ComponentProps<typeof OpenJupyterControl>) => {
   return renderWithProviders(
     <MemoryRouter>
       <OpenJupyterControl {...props} />
@@ -28,7 +29,7 @@ const render = (props: React.ComponentProps<typeof OpenJupyterControl>) => {
 }
 
 describe('RobotSettings OpenJupyterControl', () => {
-  let props: React.ComponentProps<typeof OpenJupyterControl>
+  let props: ComponentProps<typeof OpenJupyterControl>
   beforeEach(() => {
     props = {
       robotIp: mockIpAddress,
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/Troubleshooting.test.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/Troubleshooting.test.tsx
index a5f28ee7da2..ef9cc7ff185 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/Troubleshooting.test.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/__tests__/Troubleshooting.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { act, waitFor, screen } from '@testing-library/react'
 import { when } from 'vitest-when'
@@ -16,6 +15,7 @@ import {
 import { useRobot } from '/app/redux-resources/robots'
 import { Troubleshooting } from '../Troubleshooting'
 
+import type { ComponentProps } from 'react'
 import type { HostConfig } from '@opentrons/api-client'
 import type { ToasterContextType } from '/app/organisms/ToasterOven/ToasterContext'
 
@@ -29,7 +29,7 @@ const HOST_CONFIG: HostConfig = { hostname: 'localhost' }
 const MOCK_MAKE_TOAST = vi.fn()
 const MOCK_EAT_TOAST = vi.fn()
 
-const render = (props: React.ComponentProps<typeof Troubleshooting>) => {
+const render = (props: ComponentProps<typeof Troubleshooting>) => {
   return renderWithProviders(
     <MemoryRouter>
       <Troubleshooting {...props} />
@@ -39,7 +39,7 @@ const render = (props: React.ComponentProps<typeof Troubleshooting>) => {
 }
 
 describe('RobotSettings Troubleshooting', () => {
-  let props: React.ComponentProps<typeof Troubleshooting>
+  let props: ComponentProps<typeof Troubleshooting>
   beforeEach(() => {
     props = {
       robotName: ROBOT_NAME,
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/ConnectModal/FormRow.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/ConnectModal/FormRow.tsx
index 1481d3f40f9..fddda5bc96a 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/ConnectModal/FormRow.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/ConnectModal/FormRow.tsx
@@ -1,12 +1,13 @@
 // presentational components for the wifi connect form
-import type * as React from 'react'
 import styled from 'styled-components'
 import { FONT_WEIGHT_SEMIBOLD, SPACING } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
+
 export interface FormRowProps {
   label: string
   labelFor: string
-  children: React.ReactNode
+  children: ReactNode
 }
 
 const StyledRow = styled.div`
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/SelectSsid/index.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/SelectSsid/index.tsx
index a8b04feba4b..02de4cfabaa 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/SelectSsid/index.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/SelectSsid/index.tsx
@@ -1,12 +1,11 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { CONTEXT_MENU } from '@opentrons/components'
 import { SelectField } from '/app/atoms/SelectField'
 import { NetworkOptionLabel, NetworkActionLabel } from './NetworkOptionLabel'
 
+import type { ComponentProps } from 'react'
 import type { TFunction } from 'i18next'
 import type { SelectOptionOrGroup } from '@opentrons/components'
-
 import type { WifiNetwork } from '../types'
 
 export interface SelectSsidProps {
@@ -51,7 +50,7 @@ export function SelectSsid(props: SelectSsidProps): JSX.Element {
     }
   }
 
-  const formatOptionLabel: React.ComponentProps<
+  const formatOptionLabel: ComponentProps<
     typeof SelectField
   >['formatOptionLabel'] = (option, { context }): JSX.Element | null => {
     const { value, label } = option
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/types.ts b/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/types.ts
index 050d26c08c3..ccfa37a7a44 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/types.ts
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/types.ts
@@ -1,3 +1,4 @@
+import type { ChangeEventHandler, FocusEventHandler } from 'react'
 import type { FieldError } from 'react-hook-form'
 import type {
   WifiNetwork,
@@ -80,8 +81,8 @@ export type ConnectFormField =
 export type ConnectFormFieldProps = Readonly<{
   value: string | null
   error: string | null
-  onChange: React.ChangeEventHandler
-  onBlur: React.FocusEventHandler
+  onChange: ChangeEventHandler
+  onBlur: FocusEventHandler
   setValue: (value: string) => unknown
   setTouched: (touched: boolean) => unknown
 }>
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/SettingToggle.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/SettingToggle.tsx
index 4407779d888..bb5b3c0d824 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/SettingToggle.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/SettingToggle.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useDispatch } from 'react-redux'
 
 import {
@@ -13,6 +12,8 @@ import {
 
 import { ToggleButton } from '/app/atoms/buttons'
 import { updateSetting } from '/app/redux/robot-settings'
+
+import type { MouseEventHandler } from 'react'
 import type { Dispatch } from '/app/redux/types'
 import type { RobotSettingsField } from '/app/redux/robot-settings/types'
 
@@ -38,7 +39,7 @@ export function SettingToggle({
 
   if (id == null) return null
 
-  const handleClick: React.MouseEventHandler<Element> = () => {
+  const handleClick: MouseEventHandler<Element> = () => {
     dispatch(updateSetting(robotName, id, !value))
   }
 
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/__tests__/RobotUpdateProgressModal.test.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/__tests__/RobotUpdateProgressModal.test.tsx
index 176388a5527..927c1acfdc8 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/__tests__/RobotUpdateProgressModal.test.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/__tests__/RobotUpdateProgressModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { i18n } from '/app/i18n'
 import { act, fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
@@ -21,6 +20,7 @@ import {
   INIT_STATUS,
 } from '/app/resources/health/hooks'
 
+import type { ComponentProps } from 'react'
 import type { SetStatusBarCreateCommand } from '@opentrons/shared-data'
 import type { RobotUpdateSession } from '/app/redux/robot-update/types'
 
@@ -30,9 +30,7 @@ vi.mock('/app/redux/robot-update')
 vi.mock('/app/redux/robot-update/hooks')
 vi.mock('/app/resources/health/hooks')
 
-const render = (
-  props: React.ComponentProps<typeof RobotUpdateProgressModal>
-) => {
+const render = (props: ComponentProps<typeof RobotUpdateProgressModal>) => {
   return renderWithProviders(<RobotUpdateProgressModal {...props} />, {
     i18nInstance: i18n,
   })
@@ -50,7 +48,7 @@ describe('DownloadUpdateModal', () => {
     error: null,
   }
 
-  let props: React.ComponentProps<typeof RobotUpdateProgressModal>
+  let props: ComponentProps<typeof RobotUpdateProgressModal>
   const mockCreateLiveCommand = vi.fn()
   const mockDispatchStartRobotUpdate = vi.fn()
 
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/__tests__/UpdateRobotModal.test.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/__tests__/UpdateRobotModal.test.tsx
index e77a0df9533..e4c6b7bfb12 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/__tests__/UpdateRobotModal.test.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/__tests__/UpdateRobotModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { createStore } from 'redux'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
@@ -14,6 +13,7 @@ import { getDiscoverableRobotByName } from '/app/redux/discovery'
 import { UpdateRobotModal, RELEASE_NOTES_URL_BASE } from '../UpdateRobotModal'
 import { useIsRobotBusy } from '/app/redux-resources/robots'
 
+import type { ComponentProps } from 'react'
 import type { Store } from 'redux'
 import type { State } from '/app/redux/types'
 
@@ -21,14 +21,14 @@ vi.mock('/app/redux/robot-update')
 vi.mock('/app/redux/discovery')
 vi.mock('/app/redux-resources/robots')
 
-const render = (props: React.ComponentProps<typeof UpdateRobotModal>) => {
+const render = (props: ComponentProps<typeof UpdateRobotModal>) => {
   return renderWithProviders(<UpdateRobotModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('UpdateRobotModal', () => {
-  let props: React.ComponentProps<typeof UpdateRobotModal>
+  let props: ComponentProps<typeof UpdateRobotModal>
   let store: Store<State>
   beforeEach(() => {
     store = createStore(vi.fn(), {})
diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/__tests__/useRobotUpdateInfo.test.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/__tests__/useRobotUpdateInfo.test.tsx
index 2897110aacc..e81d61f1d5c 100644
--- a/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/__tests__/useRobotUpdateInfo.test.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/__tests__/useRobotUpdateInfo.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { renderHook } from '@testing-library/react'
 import { createStore } from 'redux'
 import { I18nextProvider } from 'react-i18next'
@@ -9,6 +8,7 @@ import { i18n } from '/app/i18n'
 import { useRobotUpdateInfo } from '../useRobotUpdateInfo'
 import { getRobotUpdateDownloadProgress } from '/app/redux/robot-update'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { State } from '/app/redux/types'
 import type {
@@ -21,7 +21,7 @@ vi.mock('/app/redux/robot-update')
 
 describe('useRobotUpdateInfo', () => {
   let store: Store<State>
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
 
   const MOCK_ROBOT_NAME = 'testRobot'
   const mockRobotUpdateSession: RobotUpdateSession | null = {
diff --git a/app/src/organisms/Desktop/Devices/RobotStatusHeader.tsx b/app/src/organisms/Desktop/Devices/RobotStatusHeader.tsx
index 77cad0933ea..abeeceddc0b 100644
--- a/app/src/organisms/Desktop/Devices/RobotStatusHeader.tsx
+++ b/app/src/organisms/Desktop/Devices/RobotStatusHeader.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector, useDispatch } from 'react-redux'
 import { Link, useNavigate } from 'react-router-dom'
@@ -35,6 +34,7 @@ import {
 import { getNetworkInterfaces, fetchStatus } from '/app/redux/networking'
 import { useNotifyRunQuery, useCurrentRunId } from '/app/resources/runs'
 
+import type { MouseEvent } from 'react'
 import type { IconName, StyleProps } from '@opentrons/components'
 import type { DiscoveredRobot } from '/app/redux/discovery/types'
 import type { Dispatch, State } from '/app/redux/types'
@@ -79,7 +79,7 @@ export function RobotStatusHeader(props: RobotStatusHeaderProps): JSX.Element {
     currentRunId != null && currentRunStatus != null && displayName != null ? (
       <Flex
         alignItems={ALIGN_CENTER}
-        onClick={(e: React.MouseEvent) => {
+        onClick={(e: MouseEvent) => {
           e.stopPropagation()
         }}
       >
diff --git a/app/src/organisms/Desktop/Devices/RunPreview/index.tsx b/app/src/organisms/Desktop/Devices/RunPreview/index.tsx
index c2a48aba59a..c217833593e 100644
--- a/app/src/organisms/Desktop/Devices/RunPreview/index.tsx
+++ b/app/src/organisms/Desktop/Devices/RunPreview/index.tsx
@@ -33,9 +33,11 @@ import { Divider } from '/app/atoms/structure'
 import { NAV_BAR_WIDTH } from '/app/App/constants'
 import { getLabwareDefinitionsFromCommands } from '/app/local-resources/labware'
 
+import type { ForwardedRef } from 'react'
+import type { ViewportListRef } from 'react-viewport-list'
 import type { RunStatus } from '@opentrons/api-client'
 import type { RobotType } from '@opentrons/shared-data'
-import type { ViewportListRef } from 'react-viewport-list'
+
 const COLOR_FADE_MS = 500
 const LIVE_RUN_COMMANDS_POLL_MS = 3000
 // arbitrary large number of commands
@@ -49,7 +51,7 @@ interface RunPreviewProps {
 }
 export const RunPreviewComponent = (
   { runId, jumpedIndex, makeHandleScrollToStep, robotType }: RunPreviewProps,
-  ref: React.ForwardedRef<ViewportListRef>
+  ref: ForwardedRef<ViewportListRef>
 ): JSX.Element | null => {
   const { t } = useTranslation(['run_details', 'protocol_setup'])
   const robotSideAnalysis = useMostRecentCompletedAnalysis(runId)
diff --git a/app/src/organisms/Desktop/Devices/__tests__/CalibrationStatusBanner.test.tsx b/app/src/organisms/Desktop/Devices/__tests__/CalibrationStatusBanner.test.tsx
index fd50c5185ae..316315515b5 100644
--- a/app/src/organisms/Desktop/Devices/__tests__/CalibrationStatusBanner.test.tsx
+++ b/app/src/organisms/Desktop/Devices/__tests__/CalibrationStatusBanner.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -8,11 +7,11 @@ import { i18n } from '/app/i18n'
 import { CalibrationStatusBanner } from '../CalibrationStatusBanner'
 import { useCalibrationTaskList } from '../hooks'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../hooks')
 
-const render = (
-  props: React.ComponentProps<typeof CalibrationStatusBanner>
-) => {
+const render = (props: ComponentProps<typeof CalibrationStatusBanner>) => {
   return renderWithProviders(
     <MemoryRouter>
       <CalibrationStatusBanner {...props} />
@@ -24,7 +23,7 @@ const render = (
 }
 
 describe('CalibrationStatusBanner', () => {
-  let props: React.ComponentProps<typeof CalibrationStatusBanner>
+  let props: ComponentProps<typeof CalibrationStatusBanner>
   beforeEach(() => {
     props = { robotName: 'otie' }
   })
diff --git a/app/src/organisms/Desktop/Devices/__tests__/ConnectionTroubleshootingModal.test.tsx b/app/src/organisms/Desktop/Devices/__tests__/ConnectionTroubleshootingModal.test.tsx
index d725929a081..a810d459f12 100644
--- a/app/src/organisms/Desktop/Devices/__tests__/ConnectionTroubleshootingModal.test.tsx
+++ b/app/src/organisms/Desktop/Devices/__tests__/ConnectionTroubleshootingModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -6,8 +5,10 @@ import { fireEvent, screen } from '@testing-library/react'
 import { i18n } from '/app/i18n'
 import { ConnectionTroubleshootingModal } from '../ConnectionTroubleshootingModal'
 
+import type { ComponentProps } from 'react'
+
 const render = (
-  props: React.ComponentProps<typeof ConnectionTroubleshootingModal>
+  props: ComponentProps<typeof ConnectionTroubleshootingModal>
 ) => {
   return renderWithProviders(<ConnectionTroubleshootingModal {...props} />, {
     i18nInstance: i18n,
@@ -15,7 +16,7 @@ const render = (
 }
 
 describe('ConnectionTroubleshootingModal', () => {
-  let props: React.ComponentProps<typeof ConnectionTroubleshootingModal>
+  let props: ComponentProps<typeof ConnectionTroubleshootingModal>
   beforeEach(() => {
     props = {
       onClose: vi.fn(),
diff --git a/app/src/organisms/Desktop/Devices/__tests__/EstopBanner.test.tsx b/app/src/organisms/Desktop/Devices/__tests__/EstopBanner.test.tsx
index 7d052568378..4e9f74b6310 100644
--- a/app/src/organisms/Desktop/Devices/__tests__/EstopBanner.test.tsx
+++ b/app/src/organisms/Desktop/Devices/__tests__/EstopBanner.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -6,11 +5,13 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { EstopBanner } from '../EstopBanner'
 
-const render = (props: React.ComponentProps<typeof EstopBanner>) =>
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof EstopBanner>) =>
   renderWithProviders(<EstopBanner {...props} />, { i18nInstance: i18n })
 
 describe('EstopBanner', () => {
-  let props: React.ComponentProps<typeof EstopBanner>
+  let props: ComponentProps<typeof EstopBanner>
   beforeEach(() => {
     props = {
       status: 'physicallyEngaged',
diff --git a/app/src/organisms/Desktop/Devices/__tests__/HistoricalProtocolRun.test.tsx b/app/src/organisms/Desktop/Devices/__tests__/HistoricalProtocolRun.test.tsx
index 070f1c614de..1b9ec0cde4e 100644
--- a/app/src/organisms/Desktop/Devices/__tests__/HistoricalProtocolRun.test.tsx
+++ b/app/src/organisms/Desktop/Devices/__tests__/HistoricalProtocolRun.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -10,6 +9,7 @@ import { useRunStatus, useRunTimestamps } from '/app/resources/runs'
 import { HistoricalProtocolRun } from '../HistoricalProtocolRun'
 import { HistoricalProtocolRunOverflowMenu } from '../HistoricalProtocolRunOverflowMenu'
 
+import type { ComponentProps } from 'react'
 import type { RunStatus, RunData } from '@opentrons/api-client'
 import type { RunTimeParameter } from '@opentrons/shared-data'
 
@@ -25,14 +25,14 @@ const run = {
   runTimeParameters: [] as RunTimeParameter[],
 } as RunData
 
-const render = (props: React.ComponentProps<typeof HistoricalProtocolRun>) => {
+const render = (props: ComponentProps<typeof HistoricalProtocolRun>) => {
   return renderWithProviders(<HistoricalProtocolRun {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('RecentProtocolRuns', () => {
-  let props: React.ComponentProps<typeof HistoricalProtocolRun>
+  let props: ComponentProps<typeof HistoricalProtocolRun>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/__tests__/HistoricalProtocolRunOverflowMenu.test.tsx b/app/src/organisms/Desktop/Devices/__tests__/HistoricalProtocolRunOverflowMenu.test.tsx
index 2b2706c9645..72148f614bf 100644
--- a/app/src/organisms/Desktop/Devices/__tests__/HistoricalProtocolRunOverflowMenu.test.tsx
+++ b/app/src/organisms/Desktop/Devices/__tests__/HistoricalProtocolRunOverflowMenu.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { when } from 'vitest-when'
@@ -23,6 +22,7 @@ import { useIsEstopNotDisengaged } from '/app/resources/devices'
 import { HistoricalProtocolRunOverflowMenu } from '../HistoricalProtocolRunOverflowMenu'
 import { useNotifyAllCommandsQuery } from '/app/resources/runs'
 
+import type { ComponentProps } from 'react'
 import type { UseQueryResult } from 'react-query'
 import type { CommandsData } from '@opentrons/api-client'
 
@@ -40,7 +40,7 @@ vi.mock('/app/redux-resources/analytics')
 vi.mock('@opentrons/react-api-client')
 
 const render = (
-  props: React.ComponentProps<typeof HistoricalProtocolRunOverflowMenu>
+  props: ComponentProps<typeof HistoricalProtocolRunOverflowMenu>
 ) => {
   return renderWithProviders(
     <MemoryRouter>
@@ -59,7 +59,7 @@ let mockTrackProtocolRunEvent: any
 const mockDownloadRunLog = vi.fn()
 
 describe('HistoricalProtocolRunOverflowMenu', () => {
-  let props: React.ComponentProps<typeof HistoricalProtocolRunOverflowMenu>
+  let props: ComponentProps<typeof HistoricalProtocolRunOverflowMenu>
   beforeEach(() => {
     mockTrackEvent = vi.fn()
     vi.mocked(useTrackEvent).mockReturnValue(mockTrackEvent)
diff --git a/app/src/organisms/Desktop/Devices/__tests__/RobotCard.test.tsx b/app/src/organisms/Desktop/Devices/__tests__/RobotCard.test.tsx
index 89d59c47cf8..f2814630b2b 100644
--- a/app/src/organisms/Desktop/Devices/__tests__/RobotCard.test.tsx
+++ b/app/src/organisms/Desktop/Devices/__tests__/RobotCard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { when } from 'vitest-when'
 import { screen } from '@testing-library/react'
@@ -37,6 +36,7 @@ import {
   useErrorRecoveryBanner,
 } from '../ErrorRecoveryBanner'
 
+import type { ComponentProps } from 'react'
 import type { State } from '/app/redux/types'
 
 vi.mock('/app/redux/robot-update/selectors')
@@ -94,7 +94,7 @@ const MOCK_STATE: State = {
   },
 } as any
 
-const render = (props: React.ComponentProps<typeof RobotCard>) => {
+const render = (props: ComponentProps<typeof RobotCard>) => {
   return renderWithProviders(
     <MemoryRouter>
       <RobotCard {...props} />
@@ -107,7 +107,7 @@ const render = (props: React.ComponentProps<typeof RobotCard>) => {
 }
 
 describe('RobotCard', () => {
-  let props: React.ComponentProps<typeof RobotCard>
+  let props: ComponentProps<typeof RobotCard>
 
   beforeEach(() => {
     props = { robot: mockConnectableRobot }
diff --git a/app/src/organisms/Desktop/Devices/__tests__/RobotOverflowMenu.test.tsx b/app/src/organisms/Desktop/Devices/__tests__/RobotOverflowMenu.test.tsx
index b3735e72a77..7f8ce943211 100644
--- a/app/src/organisms/Desktop/Devices/__tests__/RobotOverflowMenu.test.tsx
+++ b/app/src/organisms/Desktop/Devices/__tests__/RobotOverflowMenu.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
@@ -16,6 +15,8 @@ import {
   mockConnectedRobot,
 } from '/app/redux/discovery/__fixtures__'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/robot-update/hooks')
 vi.mock('/app/resources/runs')
 vi.mock('/app/organisms/Desktop/ChooseProtocolSlideout')
@@ -23,7 +24,7 @@ vi.mock('../hooks')
 vi.mock('/app/redux-resources/robots')
 vi.mock('/app/resources/devices/hooks/useIsEstopNotDisengaged')
 
-const render = (props: React.ComponentProps<typeof RobotOverflowMenu>) => {
+const render = (props: ComponentProps<typeof RobotOverflowMenu>) => {
   return renderWithProviders(
     <MemoryRouter>
       <RobotOverflowMenu {...props} />
@@ -35,7 +36,7 @@ const render = (props: React.ComponentProps<typeof RobotOverflowMenu>) => {
 }
 
 describe('RobotOverflowMenu', () => {
-  let props: React.ComponentProps<typeof RobotOverflowMenu>
+  let props: ComponentProps<typeof RobotOverflowMenu>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Devices/__tests__/RobotOverview.test.tsx b/app/src/organisms/Desktop/Devices/__tests__/RobotOverview.test.tsx
index 5d2513bec23..6f262e0a094 100644
--- a/app/src/organisms/Desktop/Devices/__tests__/RobotOverview.test.tsx
+++ b/app/src/organisms/Desktop/Devices/__tests__/RobotOverview.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { when } from 'vitest-when'
 import { screen, fireEvent } from '@testing-library/react'
@@ -48,10 +47,11 @@ import {
   useErrorRecoveryBanner,
 } from '../ErrorRecoveryBanner'
 
+import type { ComponentProps } from 'react'
+import type * as ReactApiClient from '@opentrons/react-api-client'
 import type { Config } from '/app/redux/config/types'
 import type { DiscoveryClientRobotAddress } from '/app/redux/discovery/types'
 import type { State } from '/app/redux/types'
-import type * as ReactApiClient from '@opentrons/react-api-client'
 
 vi.mock('@opentrons/react-api-client', async importOriginal => {
   const actual = await importOriginal<typeof ReactApiClient>()
@@ -104,7 +104,7 @@ const MOCK_STATE: State = {
 
 const mockToggleLights = vi.fn()
 
-const render = (props: React.ComponentProps<typeof RobotOverview>) => {
+const render = (props: ComponentProps<typeof RobotOverview>) => {
   return renderWithProviders(
     <MemoryRouter>
       <RobotOverview robotName={props.robotName} />
@@ -117,7 +117,7 @@ const render = (props: React.ComponentProps<typeof RobotOverview>) => {
 }
 
 describe('RobotOverview', () => {
-  let props: React.ComponentProps<typeof RobotOverview>
+  let props: ComponentProps<typeof RobotOverview>
 
   beforeEach(() => {
     props = { robotName: mockConnectableRobot.name }
diff --git a/app/src/organisms/Desktop/Devices/__tests__/RobotOverviewOverflowMenu.test.tsx b/app/src/organisms/Desktop/Devices/__tests__/RobotOverviewOverflowMenu.test.tsx
index c4d384d0805..21d8e13b666 100644
--- a/app/src/organisms/Desktop/Devices/__tests__/RobotOverviewOverflowMenu.test.tsx
+++ b/app/src/organisms/Desktop/Devices/__tests__/RobotOverviewOverflowMenu.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { when } from 'vitest-when'
@@ -24,6 +23,8 @@ import { handleUpdateBuildroot } from '../RobotSettings/UpdateBuildroot'
 import { useIsEstopNotDisengaged } from '/app/resources/devices/hooks/useIsEstopNotDisengaged'
 import { RobotOverviewOverflowMenu } from '../RobotOverviewOverflowMenu'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/robot-controls')
 vi.mock('/app/redux/robot-admin')
 vi.mock('../hooks')
@@ -36,9 +37,7 @@ vi.mock('../RobotSettings/UpdateBuildroot')
 vi.mock('/app/resources/devices/hooks/useIsEstopNotDisengaged')
 vi.mock('/app/redux-resources/robots')
 
-const render = (
-  props: React.ComponentProps<typeof RobotOverviewOverflowMenu>
-) => {
+const render = (props: ComponentProps<typeof RobotOverviewOverflowMenu>) => {
   return renderWithProviders(
     <MemoryRouter>
       <RobotOverviewOverflowMenu {...props} />
@@ -50,7 +49,7 @@ const render = (
 }
 
 describe('RobotOverviewOverflowMenu', () => {
-  let props: React.ComponentProps<typeof RobotOverviewOverflowMenu>
+  let props: ComponentProps<typeof RobotOverviewOverflowMenu>
   vi.useFakeTimers()
 
   beforeEach(() => {
diff --git a/app/src/organisms/Desktop/Devices/__tests__/RobotStatusHeader.test.tsx b/app/src/organisms/Desktop/Devices/__tests__/RobotStatusHeader.test.tsx
index 465c46cc566..af05d9ce131 100644
--- a/app/src/organisms/Desktop/Devices/__tests__/RobotStatusHeader.test.tsx
+++ b/app/src/organisms/Desktop/Devices/__tests__/RobotStatusHeader.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { RUN_STATUS_RUNNING } from '@opentrons/api-client'
 import { when } from 'vitest-when'
@@ -20,6 +19,7 @@ import { useIsFlex } from '/app/redux-resources/robots'
 import { RobotStatusHeader } from '../RobotStatusHeader'
 import { useNotifyRunQuery, useCurrentRunId } from '/app/resources/runs'
 
+import type { ComponentProps } from 'react'
 import type { DiscoveryClientRobotAddress } from '/app/redux/discovery/types'
 import type { SimpleInterfaceStatus } from '/app/redux/networking/types'
 import type { State } from '/app/redux/types'
@@ -45,7 +45,7 @@ const MOCK_BUZZ = {
 const WIFI_IP = 'wifi-ip'
 const ETHERNET_IP = 'ethernet-ip'
 
-const render = (props: React.ComponentProps<typeof RobotStatusHeader>) => {
+const render = (props: ComponentProps<typeof RobotStatusHeader>) => {
   return renderWithProviders(
     <MemoryRouter>
       <RobotStatusHeader {...props} />
@@ -56,7 +56,7 @@ const render = (props: React.ComponentProps<typeof RobotStatusHeader>) => {
   )
 }
 describe('RobotStatusHeader', () => {
-  let props: React.ComponentProps<typeof RobotStatusHeader>
+  let props: ComponentProps<typeof RobotStatusHeader>
 
   beforeEach(() => {
     props = MOCK_OTIE
diff --git a/app/src/organisms/Desktop/Devices/hooks/__tests__/useCalibrationTaskList.test.tsx b/app/src/organisms/Desktop/Devices/hooks/__tests__/useCalibrationTaskList.test.tsx
index 9d675c77f7e..1ca9c1741c2 100644
--- a/app/src/organisms/Desktop/Devices/hooks/__tests__/useCalibrationTaskList.test.tsx
+++ b/app/src/organisms/Desktop/Devices/hooks/__tests__/useCalibrationTaskList.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { createStore } from 'redux'
 import { I18nextProvider } from 'react-i18next'
 import { Provider } from 'react-redux'
@@ -30,6 +29,7 @@ import {
 } from '../__fixtures__/taskListFixtures'
 import { i18n } from '/app/i18n'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { State } from '/app/redux/types'
 
@@ -41,7 +41,7 @@ const mockTipLengthCalLauncher = vi.fn()
 const mockDeckCalLauncher = vi.fn()
 
 describe('useCalibrationTaskList hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   let store: Store<State>
   const mockDeleteCalibration = vi.fn()
 
diff --git a/app/src/organisms/Desktop/Devices/hooks/__tests__/useDeckCalibrationData.test.tsx b/app/src/organisms/Desktop/Devices/hooks/__tests__/useDeckCalibrationData.test.tsx
index c08f0e3e1e5..1aef843c8ef 100644
--- a/app/src/organisms/Desktop/Devices/hooks/__tests__/useDeckCalibrationData.test.tsx
+++ b/app/src/organisms/Desktop/Devices/hooks/__tests__/useDeckCalibrationData.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { Provider } from 'react-redux'
@@ -15,13 +14,13 @@ import {
 import { getDiscoverableRobotByName } from '/app/redux/discovery'
 import { mockDeckCalData } from '/app/redux/calibration/__fixtures__'
 import { useDispatchApiRequest } from '/app/redux/robot-api'
+import { useDeckCalibrationData } from '..'
+import { mockConnectableRobot } from '/app/redux/discovery/__fixtures__'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { DispatchApiRequestType } from '/app/redux/robot-api'
 
-import { useDeckCalibrationData } from '..'
-import { mockConnectableRobot } from '/app/redux/discovery/__fixtures__'
-
 vi.mock('@opentrons/react-api-client')
 vi.mock('/app/redux/calibration')
 vi.mock('/app/redux/robot-api')
@@ -31,7 +30,7 @@ const store: Store<any> = createStore(vi.fn(), {})
 
 describe('useDeckCalibrationData hook', () => {
   let dispatchApiRequest: DispatchApiRequestType
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     dispatchApiRequest = vi.fn()
     const queryClient = new QueryClient()
diff --git a/app/src/organisms/Desktop/Devices/hooks/__tests__/usePipetteOffsetCalibration.test.tsx b/app/src/organisms/Desktop/Devices/hooks/__tests__/usePipetteOffsetCalibration.test.tsx
index 2c23dcb0f61..50db68fe850 100644
--- a/app/src/organisms/Desktop/Devices/hooks/__tests__/usePipetteOffsetCalibration.test.tsx
+++ b/app/src/organisms/Desktop/Devices/hooks/__tests__/usePipetteOffsetCalibration.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
 import { Provider } from 'react-redux'
@@ -15,6 +14,7 @@ import { useDispatchApiRequest } from '/app/redux/robot-api'
 import { useRobot } from '/app/redux-resources/robots'
 import { usePipetteOffsetCalibration } from '..'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { DiscoveredRobot } from '/app/redux/discovery/types'
 import type { DispatchApiRequestType } from '/app/redux/robot-api'
@@ -32,7 +32,7 @@ const MOUNT = 'left' as Mount
 
 describe('usePipetteOffsetCalibration hook', () => {
   let dispatchApiRequest: DispatchApiRequestType
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     dispatchApiRequest = vi.fn()
     const queryClient = new QueryClient()
diff --git a/app/src/organisms/Desktop/Devices/hooks/__tests__/usePipetteOffsetCalibrations.test.tsx b/app/src/organisms/Desktop/Devices/hooks/__tests__/usePipetteOffsetCalibrations.test.tsx
index 9305b34af38..de390322d11 100644
--- a/app/src/organisms/Desktop/Devices/hooks/__tests__/usePipetteOffsetCalibrations.test.tsx
+++ b/app/src/organisms/Desktop/Devices/hooks/__tests__/usePipetteOffsetCalibrations.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
 import { renderHook } from '@testing-library/react'
@@ -11,12 +10,14 @@ import {
 } from '/app/redux/calibration/pipette-offset/__fixtures__'
 import { usePipetteOffsetCalibrations } from '..'
 
+import type { FunctionComponent, ReactNode } from 'react'
+
 vi.mock('@opentrons/react-api-client')
 
 const CALIBRATION_DATA_POLL_MS = 5000
 
 describe('usePipetteOffsetCalibrations hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     const queryClient = new QueryClient()
     wrapper = ({ children }) => (
diff --git a/app/src/organisms/Desktop/Devices/hooks/__tests__/useSyncRobotClock.test.tsx b/app/src/organisms/Desktop/Devices/hooks/__tests__/useSyncRobotClock.test.tsx
index 02b593fbaab..1ab5c1f55cb 100644
--- a/app/src/organisms/Desktop/Devices/hooks/__tests__/useSyncRobotClock.test.tsx
+++ b/app/src/organisms/Desktop/Devices/hooks/__tests__/useSyncRobotClock.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { Provider } from 'react-redux'
 import { createStore } from 'redux'
@@ -7,6 +6,8 @@ import { QueryClient, QueryClientProvider } from 'react-query'
 
 import { syncSystemTime } from '/app/redux/robot-admin'
 import { useSyncRobotClock } from '..'
+
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 
 vi.mock('/app/redux/discovery')
@@ -14,7 +15,7 @@ vi.mock('/app/redux/discovery')
 const store: Store<any> = createStore(vi.fn(), {})
 
 describe('useSyncRobotClock hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     store.dispatch = vi.fn()
     const queryClient = new QueryClient()
diff --git a/app/src/organisms/Desktop/Devices/hooks/__tests__/useTipLengthCalibrations.test.tsx b/app/src/organisms/Desktop/Devices/hooks/__tests__/useTipLengthCalibrations.test.tsx
index 7281b009b5c..d2cec816973 100644
--- a/app/src/organisms/Desktop/Devices/hooks/__tests__/useTipLengthCalibrations.test.tsx
+++ b/app/src/organisms/Desktop/Devices/hooks/__tests__/useTipLengthCalibrations.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
 import { QueryClient, QueryClientProvider } from 'react-query'
@@ -11,12 +10,14 @@ import {
 } from '/app/redux/calibration/tip-length/__fixtures__'
 import { useTipLengthCalibrations } from '..'
 
+import type { FunctionComponent, ReactNode } from 'react'
+
 vi.mock('@opentrons/react-api-client')
 
 const CALIBRATIONS_FETCH_MS = 5000
 
 describe('useTipLengthCalibrations hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     const queryClient = new QueryClient()
     wrapper = ({ children }) => (
diff --git a/app/src/organisms/Desktop/Devices/hooks/__tests__/useTrackCreateProtocolRunEvent.test.tsx b/app/src/organisms/Desktop/Devices/hooks/__tests__/useTrackCreateProtocolRunEvent.test.tsx
index b8cf7fd9896..1f7eb5041fa 100644
--- a/app/src/organisms/Desktop/Devices/hooks/__tests__/useTrackCreateProtocolRunEvent.test.tsx
+++ b/app/src/organisms/Desktop/Devices/hooks/__tests__/useTrackCreateProtocolRunEvent.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { createStore } from 'redux'
 import { Provider } from 'react-redux'
 import { QueryClient, QueryClientProvider } from 'react-query'
@@ -12,6 +11,7 @@ import { parseProtocolAnalysisOutput } from '/app/transformations/analysis'
 import { useTrackEvent } from '/app/redux/analytics'
 import { storedProtocolData } from '/app/redux/protocol-storage/__fixtures__'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Mock } from 'vitest'
 import type { Store } from 'redux'
 import type { ProtocolAnalyticsData } from '/app/redux/analytics/types'
@@ -28,7 +28,7 @@ const PROTOCOL_PROPERTIES = { protocolType: 'python' } as ProtocolAnalyticsData
 
 let mockTrackEvent: Mock
 let mockGetProtocolRunAnalyticsData: Mock
-let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+let wrapper: FunctionComponent<{ children: ReactNode }>
 let store: Store<any> = createStore(vi.fn(), {})
 
 describe('useTrackCreateProtocolRunEvent hook', () => {
diff --git a/app/src/organisms/Desktop/HowCalibrationWorksModal/__tests__/HowCalibrationWorksModal.test.tsx b/app/src/organisms/Desktop/HowCalibrationWorksModal/__tests__/HowCalibrationWorksModal.test.tsx
index 8eee1543c5a..dfa8ae09955 100644
--- a/app/src/organisms/Desktop/HowCalibrationWorksModal/__tests__/HowCalibrationWorksModal.test.tsx
+++ b/app/src/organisms/Desktop/HowCalibrationWorksModal/__tests__/HowCalibrationWorksModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
@@ -6,16 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { HowCalibrationWorksModal } from '..'
 
-const render = (
-  props: React.ComponentProps<typeof HowCalibrationWorksModal>
-) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof HowCalibrationWorksModal>) => {
   return renderWithProviders(<HowCalibrationWorksModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('HowCalibrationWorksModal', () => {
-  let props: React.ComponentProps<typeof HowCalibrationWorksModal>
+  let props: ComponentProps<typeof HowCalibrationWorksModal>
   beforeEach(() => {
     props = { onCloseClick: vi.fn() }
   })
diff --git a/app/src/organisms/Desktop/Labware/AddCustomLabwareSlideout/__tests__/AddCustomLabwareSlideout.test.tsx b/app/src/organisms/Desktop/Labware/AddCustomLabwareSlideout/__tests__/AddCustomLabwareSlideout.test.tsx
index 1a4fef0be5c..9d67949e289 100644
--- a/app/src/organisms/Desktop/Labware/AddCustomLabwareSlideout/__tests__/AddCustomLabwareSlideout.test.tsx
+++ b/app/src/organisms/Desktop/Labware/AddCustomLabwareSlideout/__tests__/AddCustomLabwareSlideout.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -10,6 +9,8 @@ import {
 import { renderWithProviders } from '/app/__testing-utils__'
 import { AddCustomLabwareSlideout } from '..'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/custom-labware')
 vi.mock('/app/local-resources/labware')
 vi.mock('/app/redux/analytics')
@@ -21,9 +22,7 @@ vi.mock('/app/redux/shell/remote', () => ({
 
 let mockTrackEvent: any
 
-const render = (
-  props: React.ComponentProps<typeof AddCustomLabwareSlideout>
-) => {
+const render = (props: ComponentProps<typeof AddCustomLabwareSlideout>) => {
   return renderWithProviders(
     <MemoryRouter>
       <AddCustomLabwareSlideout {...props} />
@@ -35,7 +34,7 @@ const render = (
 }
 
 describe('AddCustomLabwareSlideout', () => {
-  const props: React.ComponentProps<typeof AddCustomLabwareSlideout> = {
+  const props: ComponentProps<typeof AddCustomLabwareSlideout> = {
     isExpanded: true,
     onCloseClick: vi.fn(() => null),
   }
diff --git a/app/src/organisms/Desktop/Labware/LabwareCard/__tests__/CustomLabwareOverflowMenu.test.tsx b/app/src/organisms/Desktop/Labware/LabwareCard/__tests__/CustomLabwareOverflowMenu.test.tsx
index 588b47ecea3..5e47b3432f4 100644
--- a/app/src/organisms/Desktop/Labware/LabwareCard/__tests__/CustomLabwareOverflowMenu.test.tsx
+++ b/app/src/organisms/Desktop/Labware/LabwareCard/__tests__/CustomLabwareOverflowMenu.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, expect, beforeEach, afterEach } from 'vitest'
 
@@ -9,6 +8,7 @@ import { i18n } from '/app/i18n'
 import { useTrackEvent } from '/app/redux/analytics'
 import { CustomLabwareOverflowMenu } from '../CustomLabwareOverflowMenu'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 import type * as OpentronsComponents from '@opentrons/components'
 
@@ -31,7 +31,7 @@ vi.mock('@opentrons/components', async importOriginal => {
 })
 
 const render = (
-  props: React.ComponentProps<typeof CustomLabwareOverflowMenu>
+  props: ComponentProps<typeof CustomLabwareOverflowMenu>
 ): ReturnType<typeof renderWithProviders> => {
   return renderWithProviders(<CustomLabwareOverflowMenu {...props} />, {
     i18nInstance: i18n,
@@ -39,7 +39,7 @@ const render = (
 }
 
 describe('CustomLabwareOverflowMenu', () => {
-  let props: React.ComponentProps<typeof CustomLabwareOverflowMenu>
+  let props: ComponentProps<typeof CustomLabwareOverflowMenu>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/Labware/LabwareCard/__tests__/LabwareCard.test.tsx b/app/src/organisms/Desktop/Labware/LabwareCard/__tests__/LabwareCard.test.tsx
index 76abb51c72f..2431472e274 100644
--- a/app/src/organisms/Desktop/Labware/LabwareCard/__tests__/LabwareCard.test.tsx
+++ b/app/src/organisms/Desktop/Labware/LabwareCard/__tests__/LabwareCard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach } from 'vitest'
 import { renderWithProviders, nestedTextMatcher } from '/app/__testing-utils__'
@@ -8,6 +7,7 @@ import { mockDefinition } from '/app/redux/custom-labware/__fixtures__'
 import { CustomLabwareOverflowMenu } from '../CustomLabwareOverflowMenu'
 import { LabwareCard } from '..'
 
+import type { ComponentProps } from 'react'
 import type * as OpentronsComponents from '@opentrons/components'
 
 vi.mock('/app/local-resources/labware')
@@ -21,14 +21,14 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof LabwareCard>) => {
+const render = (props: ComponentProps<typeof LabwareCard>) => {
   return renderWithProviders(<LabwareCard {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('LabwareCard', () => {
-  let props: React.ComponentProps<typeof LabwareCard>
+  let props: ComponentProps<typeof LabwareCard>
   beforeEach(() => {
     vi.mocked(CustomLabwareOverflowMenu).mockReturnValue(
       <div>Mock CustomLabwareOverflowMenu</div>
diff --git a/app/src/organisms/Desktop/Labware/LabwareDetails/StyledComponents/__tests__/ExpandingTitle.test.tsx b/app/src/organisms/Desktop/Labware/LabwareDetails/StyledComponents/__tests__/ExpandingTitle.test.tsx
index 6ee44619bc8..b7a872e9a1b 100644
--- a/app/src/organisms/Desktop/Labware/LabwareDetails/StyledComponents/__tests__/ExpandingTitle.test.tsx
+++ b/app/src/organisms/Desktop/Labware/LabwareDetails/StyledComponents/__tests__/ExpandingTitle.test.tsx
@@ -1,11 +1,12 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, beforeEach } from 'vitest'
 import { getFootprintDiagram } from '@opentrons/components'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { ExpandingTitle } from '../ExpandingTitle'
 
-const render = (props: React.ComponentProps<typeof ExpandingTitle>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ExpandingTitle>) => {
   return renderWithProviders(<ExpandingTitle {...props} />)
 }
 
@@ -13,7 +14,7 @@ const diagram = getFootprintDiagram({})
 const DIAGRAM_TEST_ID = 'expanding_title_diagram'
 
 describe('ExpandingTitle', () => {
-  let props: React.ComponentProps<typeof ExpandingTitle>
+  let props: ComponentProps<typeof ExpandingTitle>
   beforeEach(() => {
     props = {
       label: 'Title',
diff --git a/app/src/organisms/Desktop/Labware/LabwareDetails/StyledComponents/__tests__/LabeledValue.test.tsx b/app/src/organisms/Desktop/Labware/LabwareDetails/StyledComponents/__tests__/LabeledValue.test.tsx
index c3a73771f52..196d85cb707 100644
--- a/app/src/organisms/Desktop/Labware/LabwareDetails/StyledComponents/__tests__/LabeledValue.test.tsx
+++ b/app/src/organisms/Desktop/Labware/LabwareDetails/StyledComponents/__tests__/LabeledValue.test.tsx
@@ -1,15 +1,16 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { LabeledValue } from '../LabeledValue'
 
-const render = (props: React.ComponentProps<typeof LabeledValue>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof LabeledValue>) => {
   return renderWithProviders(<LabeledValue {...props} />)
 }
 
 describe('LabeledValue', () => {
-  let props: React.ComponentProps<typeof LabeledValue>
+  let props: ComponentProps<typeof LabeledValue>
   beforeEach(() => {
     props = {
       label: 'height',
diff --git a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/Dimensions.test.tsx b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/Dimensions.test.tsx
index 32de832214c..2afc92ad6cf 100644
--- a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/Dimensions.test.tsx
+++ b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/Dimensions.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -6,14 +5,16 @@ import { i18n } from '/app/i18n'
 import { mockDefinition } from '/app/redux/custom-labware/__fixtures__'
 import { Dimensions } from '../Dimensions'
 
-const render = (props: React.ComponentProps<typeof Dimensions>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Dimensions>) => {
   return renderWithProviders(<Dimensions {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('Dimensions', () => {
-  let props: React.ComponentProps<typeof Dimensions>
+  let props: ComponentProps<typeof Dimensions>
   beforeEach(() => {
     props = {
       definition: mockDefinition,
diff --git a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/Gallery.test.tsx b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/Gallery.test.tsx
index 344981336b0..5a61aa4684c 100644
--- a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/Gallery.test.tsx
+++ b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/Gallery.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, beforeEach } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -6,12 +5,14 @@ import { mockDefinition } from '/app/redux/custom-labware/__fixtures__'
 import { labwareImages } from '../labware-images'
 import { Gallery } from '../Gallery'
 
-const render = (props: React.ComponentProps<typeof Gallery>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Gallery>) => {
   return renderWithProviders(<Gallery {...props} />)
 }
 
 describe('Gallery', () => {
-  let props: React.ComponentProps<typeof Gallery>
+  let props: ComponentProps<typeof Gallery>
   beforeEach(() => {
     labwareImages.mock_definition = ['image1']
     props = {
diff --git a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/LabwareDetails.test.tsx b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/LabwareDetails.test.tsx
index 78c98c50a46..10602db9f9f 100644
--- a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/LabwareDetails.test.tsx
+++ b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/LabwareDetails.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, afterEach, vi, expect } from 'vitest'
 
@@ -17,6 +16,8 @@ import { WellSpacing } from '../WellSpacing'
 
 import { LabwareDetails } from '..'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/local-resources/labware')
 vi.mock('../../LabwareCard/CustomLabwareOverflowMenu')
 vi.mock('../Dimensions')
@@ -28,7 +29,7 @@ vi.mock('../WellDimensions')
 vi.mock('../WellSpacing')
 
 const render = (
-  props: React.ComponentProps<typeof LabwareDetails>
+  props: ComponentProps<typeof LabwareDetails>
 ): ReturnType<typeof renderWithProviders> => {
   return renderWithProviders(<LabwareDetails {...props} />, {
     i18nInstance: i18n,
@@ -36,7 +37,7 @@ const render = (
 }
 
 describe('LabwareDetails', () => {
-  let props: React.ComponentProps<typeof LabwareDetails>
+  let props: ComponentProps<typeof LabwareDetails>
   beforeEach(() => {
     vi.mocked(CustomLabwareOverflowMenu).mockReturnValue(
       <div>Mock CustomLabwareOverflowMenu</div>
diff --git a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/ManufacturerDetails.test.tsx b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/ManufacturerDetails.test.tsx
index 21dc8c8f1a2..9d50aa61500 100644
--- a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/ManufacturerDetails.test.tsx
+++ b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/ManufacturerDetails.test.tsx
@@ -1,18 +1,19 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, expect, beforeEach } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ManufacturerDetails } from '../ManufacturerDetails'
 
-const render = (props: React.ComponentProps<typeof ManufacturerDetails>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ManufacturerDetails>) => {
   return renderWithProviders(<ManufacturerDetails {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('ManufacturerDetails', () => {
-  let props: React.ComponentProps<typeof ManufacturerDetails>
+  let props: ComponentProps<typeof ManufacturerDetails>
   beforeEach(() => {
     props = {
       brand: { brand: 'Opentrons' },
diff --git a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellCount.test.tsx b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellCount.test.tsx
index f833c0c6e3f..6d94737a9c4 100644
--- a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellCount.test.tsx
+++ b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellCount.test.tsx
@@ -1,18 +1,19 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { WellCount } from '../WellCount'
 
-const render = (props: React.ComponentProps<typeof WellCount>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof WellCount>) => {
   return renderWithProviders(<WellCount {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('WellCount', () => {
-  let props: React.ComponentProps<typeof WellCount>
+  let props: ComponentProps<typeof WellCount>
   beforeEach(() => {
     props = {
       count: 1,
diff --git a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellDimensions.test.tsx b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellDimensions.test.tsx
index 3269c3ec241..78af2ac24b2 100644
--- a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellDimensions.test.tsx
+++ b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellDimensions.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach, expect } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -10,14 +9,16 @@ import {
 } from '/app/redux/custom-labware/__fixtures__'
 import { WellDimensions } from '../WellDimensions'
 
-const render = (props: React.ComponentProps<typeof WellDimensions>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof WellDimensions>) => {
   return renderWithProviders(<WellDimensions {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('WellDimensions', () => {
-  let props: React.ComponentProps<typeof WellDimensions>
+  let props: ComponentProps<typeof WellDimensions>
   beforeEach(() => {
     props = {
       labwareParams: mockDefinition.parameters,
diff --git a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellProperties.test.tsx b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellProperties.test.tsx
index 3d21e01f4df..40b17b3b31f 100644
--- a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellProperties.test.tsx
+++ b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellProperties.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, expect, beforeEach } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -6,14 +5,16 @@ import { i18n } from '/app/i18n'
 import { mockCircularLabwareWellGroupProperties } from '/app/redux/custom-labware/__fixtures__'
 import { WellProperties } from '../WellProperties'
 
-const render = (props: React.ComponentProps<typeof WellProperties>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof WellProperties>) => {
   return renderWithProviders(<WellProperties {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('WellProperties', () => {
-  let props: React.ComponentProps<typeof WellProperties>
+  let props: ComponentProps<typeof WellProperties>
   beforeEach(() => {
     props = {
       wellProperties: mockCircularLabwareWellGroupProperties,
diff --git a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellSpacing.test.tsx b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellSpacing.test.tsx
index 5496bbe33f1..59115886e02 100644
--- a/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellSpacing.test.tsx
+++ b/app/src/organisms/Desktop/Labware/LabwareDetails/__tests__/WellSpacing.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach, expect } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -6,14 +5,16 @@ import { i18n } from '/app/i18n'
 import { mockCircularLabwareWellGroupProperties } from '/app/redux/custom-labware/__fixtures__'
 import { WellSpacing } from '../WellSpacing'
 
-const render = (props: React.ComponentProps<typeof WellSpacing>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof WellSpacing>) => {
   return renderWithProviders(<WellSpacing {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('WellSpacing', () => {
-  let props: React.ComponentProps<typeof WellSpacing>
+  let props: ComponentProps<typeof WellSpacing>
   beforeEach(() => {
     props = {
       wellProperties: mockCircularLabwareWellGroupProperties,
diff --git a/app/src/organisms/Desktop/ProtocolAnalysisFailure/ProtocolAnalysisStale.tsx b/app/src/organisms/Desktop/ProtocolAnalysisFailure/ProtocolAnalysisStale.tsx
index 9b3a7c00d14..4daa1b24c80 100644
--- a/app/src/organisms/Desktop/ProtocolAnalysisFailure/ProtocolAnalysisStale.tsx
+++ b/app/src/organisms/Desktop/ProtocolAnalysisFailure/ProtocolAnalysisStale.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useDispatch } from 'react-redux'
 import { useTranslation, Trans } from 'react-i18next'
 
@@ -13,9 +12,11 @@ import {
   TYPOGRAPHY,
   WRAP_REVERSE,
 } from '@opentrons/components'
+import { analyzeProtocol } from '/app/redux/protocol-storage'
 
+import type { MouseEventHandler } from 'react'
 import type { Dispatch } from '/app/redux/types'
-import { analyzeProtocol } from '/app/redux/protocol-storage'
+
 interface ProtocolAnalysisStaleProps {
   protocolKey: string
 }
@@ -27,7 +28,7 @@ export function ProtocolAnalysisStale(
   const { t } = useTranslation(['protocol_list', 'shared'])
   const dispatch = useDispatch<Dispatch>()
 
-  const handleClickReanalyze: React.MouseEventHandler = e => {
+  const handleClickReanalyze: MouseEventHandler = e => {
     e.preventDefault()
     e.stopPropagation()
     dispatch(analyzeProtocol(protocolKey))
diff --git a/app/src/organisms/Desktop/ProtocolAnalysisFailure/__tests__/ProtocolAnalysisFailure.test.tsx b/app/src/organisms/Desktop/ProtocolAnalysisFailure/__tests__/ProtocolAnalysisFailure.test.tsx
index fbdec0a45ec..becdabef509 100644
--- a/app/src/organisms/Desktop/ProtocolAnalysisFailure/__tests__/ProtocolAnalysisFailure.test.tsx
+++ b/app/src/organisms/Desktop/ProtocolAnalysisFailure/__tests__/ProtocolAnalysisFailure.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect } from 'vitest'
@@ -9,8 +8,10 @@ import { i18n } from '/app/i18n'
 import { ProtocolAnalysisFailure } from '..'
 import { analyzeProtocol } from '/app/redux/protocol-storage'
 
+import type { ComponentProps } from 'react'
+
 const render = (
-  props: Partial<React.ComponentProps<typeof ProtocolAnalysisFailure>> = {}
+  props: Partial<ComponentProps<typeof ProtocolAnalysisFailure>> = {}
 ) => {
   return renderWithProviders(
     <MemoryRouter>
diff --git a/app/src/organisms/Desktop/ProtocolDetails/ProtocolParameters/__tests__/ProtocolParameters.test.tsx b/app/src/organisms/Desktop/ProtocolDetails/ProtocolParameters/__tests__/ProtocolParameters.test.tsx
index e52803cc054..78f8184f7a1 100644
--- a/app/src/organisms/Desktop/ProtocolDetails/ProtocolParameters/__tests__/ProtocolParameters.test.tsx
+++ b/app/src/organisms/Desktop/ProtocolDetails/ProtocolParameters/__tests__/ProtocolParameters.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, afterEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -6,6 +5,7 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ProtocolParameters } from '..'
 
+import type { ComponentProps } from 'react'
 import type { RunTimeParameter } from '@opentrons/shared-data'
 import type * as Components from '@opentrons/components'
 
@@ -80,14 +80,14 @@ const mockRunTimeParameter: RunTimeParameter[] = [
   },
 ]
 
-const render = (props: React.ComponentProps<typeof ProtocolParameters>) => {
+const render = (props: ComponentProps<typeof ProtocolParameters>) => {
   return renderWithProviders(<ProtocolParameters {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('ProtocolParameters', () => {
-  let props: React.ComponentProps<typeof ProtocolParameters>
+  let props: ComponentProps<typeof ProtocolParameters>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/ProtocolDetails/__tests__/ProtocolDetails.test.tsx b/app/src/organisms/Desktop/ProtocolDetails/__tests__/ProtocolDetails.test.tsx
index f613c108b77..e9a75149199 100644
--- a/app/src/organisms/Desktop/ProtocolDetails/__tests__/ProtocolDetails.test.tsx
+++ b/app/src/organisms/Desktop/ProtocolDetails/__tests__/ProtocolDetails.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { act, screen, waitFor } from '@testing-library/react'
 import { MemoryRouter } from 'react-router-dom'
 import { describe, it, beforeEach, vi, expect, afterEach } from 'vitest'
@@ -26,6 +25,7 @@ import {
 import { storedProtocolData } from '/app/redux/protocol-storage/__fixtures__'
 import { ProtocolDetails } from '..'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 import type { ProtocolAnalysisOutput } from '@opentrons/shared-data'
 
@@ -37,7 +37,7 @@ vi.mock('/app/organisms/Desktop/ChooseRobotToRunProtocolSlideout')
 vi.mock('/app/organisms/Desktop/SendProtocolToFlexSlideout')
 
 const render = (
-  props: Partial<React.ComponentProps<typeof ProtocolDetails>> = {}
+  props: Partial<ComponentProps<typeof ProtocolDetails>> = {}
 ) => {
   return renderWithProviders(
     <MemoryRouter>
diff --git a/app/src/organisms/Desktop/ProtocolDetails/__tests__/ProtocolLabwareDetails.test.tsx b/app/src/organisms/Desktop/ProtocolDetails/__tests__/ProtocolLabwareDetails.test.tsx
index 93c215643cf..bc25bcb5569 100644
--- a/app/src/organisms/Desktop/ProtocolDetails/__tests__/ProtocolLabwareDetails.test.tsx
+++ b/app/src/organisms/Desktop/ProtocolDetails/__tests__/ProtocolLabwareDetails.test.tsx
@@ -1,10 +1,10 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ProtocolLabwareDetails } from '../ProtocolLabwareDetails'
 
+import type { ComponentProps } from 'react'
 import type { LoadLabwareRunTimeCommand } from '@opentrons/shared-data'
 import type { InfoScreen } from '@opentrons/components'
 
@@ -67,14 +67,14 @@ const mockRequiredLabwareDetails = [
   } as LoadLabwareRunTimeCommand,
 ]
 
-const render = (props: React.ComponentProps<typeof ProtocolLabwareDetails>) => {
+const render = (props: ComponentProps<typeof ProtocolLabwareDetails>) => {
   return renderWithProviders(<ProtocolLabwareDetails {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ProtocolLabwareDetails', () => {
-  let props: React.ComponentProps<typeof ProtocolLabwareDetails>
+  let props: ComponentProps<typeof ProtocolLabwareDetails>
   beforeEach(() => {
     props = {
       requiredLabwareDetails: mockRequiredLabwareDetails,
diff --git a/app/src/organisms/Desktop/ProtocolDetails/__tests__/ProtocolLiquidsDetails.test.tsx b/app/src/organisms/Desktop/ProtocolDetails/__tests__/ProtocolLiquidsDetails.test.tsx
index 69e55cc1097..9a6f233b312 100644
--- a/app/src/organisms/Desktop/ProtocolDetails/__tests__/ProtocolLiquidsDetails.test.tsx
+++ b/app/src/organisms/Desktop/ProtocolDetails/__tests__/ProtocolLiquidsDetails.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi } from 'vitest'
 import { parseLiquidsInLoadOrder } from '@opentrons/shared-data'
@@ -7,6 +6,7 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ProtocolLiquidsDetails } from '../ProtocolLiquidsDetails'
 
+import type { ComponentProps } from 'react'
 import type * as SharedData from '@opentrons/shared-data'
 
 vi.mock('../../Desktop/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList')
@@ -18,14 +18,14 @@ vi.mock('@opentrons/shared-data', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof ProtocolLiquidsDetails>) => {
+const render = (props: ComponentProps<typeof ProtocolLiquidsDetails>) => {
   return renderWithProviders(<ProtocolLiquidsDetails {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('ProtocolLiquidsDetails', () => {
-  let props: React.ComponentProps<typeof ProtocolLiquidsDetails>
+  let props: ComponentProps<typeof ProtocolLiquidsDetails>
   beforeEach(() => {
     props = {
       commands: [],
diff --git a/app/src/organisms/Desktop/ProtocolDetails/__tests__/RobotConfigurationDetails.test.tsx b/app/src/organisms/Desktop/ProtocolDetails/__tests__/RobotConfigurationDetails.test.tsx
index b823732ce95..65ce7d6d24d 100644
--- a/app/src/organisms/Desktop/ProtocolDetails/__tests__/RobotConfigurationDetails.test.tsx
+++ b/app/src/organisms/Desktop/ProtocolDetails/__tests__/RobotConfigurationDetails.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, afterEach, vi } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -7,6 +6,8 @@ import { OT2_STANDARD_MODEL, FLEX_STANDARD_MODEL } from '@opentrons/shared-data'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { RobotConfigurationDetails } from '../RobotConfigurationDetails'
+
+import type { ComponentProps } from 'react'
 import type { LoadModuleRunTimeCommand } from '@opentrons/shared-data'
 
 const mockRequiredModuleDetails = [
@@ -57,16 +58,14 @@ const mockRequiredModuleDetails = [
   } as LoadModuleRunTimeCommand,
 ]
 
-const render = (
-  props: React.ComponentProps<typeof RobotConfigurationDetails>
-) => {
+const render = (props: ComponentProps<typeof RobotConfigurationDetails>) => {
   return renderWithProviders(<RobotConfigurationDetails {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('RobotConfigurationDetails', () => {
-  let props: React.ComponentProps<typeof RobotConfigurationDetails>
+  let props: ComponentProps<typeof RobotConfigurationDetails>
 
   afterEach(() => {
     vi.clearAllMocks()
diff --git a/app/src/organisms/Desktop/ProtocolsLanding/ConfirmDeleteProtocolModal.tsx b/app/src/organisms/Desktop/ProtocolsLanding/ConfirmDeleteProtocolModal.tsx
index 14d75238bcc..439d48a9f0d 100644
--- a/app/src/organisms/Desktop/ProtocolsLanding/ConfirmDeleteProtocolModal.tsx
+++ b/app/src/organisms/Desktop/ProtocolsLanding/ConfirmDeleteProtocolModal.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   AlertPrimaryButton,
@@ -14,9 +13,11 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 
+import type { MouseEventHandler } from 'react'
+
 interface ConfirmDeleteProtocolModalProps {
-  cancelDeleteProtocol: React.MouseEventHandler<HTMLAnchorElement> | undefined
-  handleClickDelete: React.MouseEventHandler<HTMLButtonElement>
+  cancelDeleteProtocol: MouseEventHandler<HTMLAnchorElement> | undefined
+  handleClickDelete: MouseEventHandler<HTMLButtonElement>
 }
 
 export function ConfirmDeleteProtocolModal(
diff --git a/app/src/organisms/Desktop/ProtocolsLanding/ProtocolOverflowMenu.tsx b/app/src/organisms/Desktop/ProtocolsLanding/ProtocolOverflowMenu.tsx
index 0bcc71f8cc0..eacddbdaca3 100644
--- a/app/src/organisms/Desktop/ProtocolsLanding/ProtocolOverflowMenu.tsx
+++ b/app/src/organisms/Desktop/ProtocolsLanding/ProtocolOverflowMenu.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
@@ -35,6 +34,7 @@ import {
 } from '/app/redux/protocol-storage'
 import { ConfirmDeleteProtocolModal } from './ConfirmDeleteProtocolModal'
 
+import type { MouseEvent, MouseEventHandler } from 'react'
 import type { StyleProps } from '@opentrons/components'
 import type { StoredProtocolData } from '/app/redux/protocol-storage'
 import type { Dispatch } from '/app/redux/types'
@@ -77,13 +77,13 @@ export function ProtocolOverflowMenu(
   const robotType =
     mostRecentAnalysis != null ? mostRecentAnalysis?.robotType ?? null : null
 
-  const handleClickShowInFolder: React.MouseEventHandler<HTMLButtonElement> = e => {
+  const handleClickShowInFolder: MouseEventHandler<HTMLButtonElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     dispatch(viewProtocolSourceFolder(protocolKey))
     setShowOverflowMenu(currentShowOverflowMenu => !currentShowOverflowMenu)
   }
-  const handleClickRun: React.MouseEventHandler<HTMLButtonElement> = e => {
+  const handleClickRun: MouseEventHandler<HTMLButtonElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     trackEvent({
@@ -93,25 +93,25 @@ export function ProtocolOverflowMenu(
     handleRunProtocol(storedProtocolData)
     setShowOverflowMenu(currentShowOverflowMenu => !currentShowOverflowMenu)
   }
-  const handleClickSendToOT3: React.MouseEventHandler<HTMLButtonElement> = e => {
+  const handleClickSendToOT3: MouseEventHandler<HTMLButtonElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     handleSendProtocolToFlex(storedProtocolData)
     setShowOverflowMenu(currentShowOverflowMenu => !currentShowOverflowMenu)
   }
-  const handleClickDelete: React.MouseEventHandler<HTMLButtonElement> = e => {
+  const handleClickDelete: MouseEventHandler<HTMLButtonElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     confirmDeleteProtocol()
     setShowOverflowMenu(currentShowOverflowMenu => !currentShowOverflowMenu)
   }
-  const handleClickReanalyze: React.MouseEventHandler<HTMLButtonElement> = e => {
+  const handleClickReanalyze: MouseEventHandler<HTMLButtonElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     dispatch(analyzeProtocol(protocolKey))
     setShowOverflowMenu(currentShowOverflowMenu => !currentShowOverflowMenu)
   }
-  const handleClickTimeline: React.MouseEventHandler<HTMLButtonElement> = e => {
+  const handleClickTimeline: MouseEventHandler<HTMLButtonElement> = e => {
     e.preventDefault()
     navigate(`/protocols/${protocolKey}/timeline`)
     setShowOverflowMenu(prevShowOverflowMenu => !prevShowOverflowMenu)
@@ -121,7 +121,7 @@ export function ProtocolOverflowMenu(
     <Flex
       flexDirection={DIRECTION_COLUMN}
       position={POSITION_RELATIVE}
-      onClick={(e: React.MouseEvent) => {
+      onClick={(e: MouseEvent) => {
         e.stopPropagation()
       }}
     >
@@ -195,7 +195,7 @@ export function ProtocolOverflowMenu(
       {showDeleteConfirmation
         ? createPortal(
             <ConfirmDeleteProtocolModal
-              cancelDeleteProtocol={(e: React.MouseEvent) => {
+              cancelDeleteProtocol={(e: MouseEvent) => {
                 e.preventDefault()
                 e.stopPropagation()
                 cancelDeleteProtocol()
diff --git a/app/src/organisms/Desktop/ProtocolsLanding/__tests__/ConfirmDeleteProtocolModal.test.tsx b/app/src/organisms/Desktop/ProtocolsLanding/__tests__/ConfirmDeleteProtocolModal.test.tsx
index dd19a80d133..8d040851a56 100644
--- a/app/src/organisms/Desktop/ProtocolsLanding/__tests__/ConfirmDeleteProtocolModal.test.tsx
+++ b/app/src/organisms/Desktop/ProtocolsLanding/__tests__/ConfirmDeleteProtocolModal.test.tsx
@@ -1,20 +1,19 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, expect, beforeEach, afterEach } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ConfirmDeleteProtocolModal } from '../ConfirmDeleteProtocolModal'
 
-const render = (
-  props: React.ComponentProps<typeof ConfirmDeleteProtocolModal>
-) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ConfirmDeleteProtocolModal>) => {
   return renderWithProviders(<ConfirmDeleteProtocolModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ConfirmDeleteProtocolModal', () => {
-  let props: React.ComponentProps<typeof ConfirmDeleteProtocolModal>
+  let props: ComponentProps<typeof ConfirmDeleteProtocolModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/ProtocolsLanding/__tests__/ProtocolList.test.tsx b/app/src/organisms/Desktop/ProtocolsLanding/__tests__/ProtocolList.test.tsx
index 59271bc279c..6f3190712c4 100644
--- a/app/src/organisms/Desktop/ProtocolsLanding/__tests__/ProtocolList.test.tsx
+++ b/app/src/organisms/Desktop/ProtocolsLanding/__tests__/ProtocolList.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { BrowserRouter } from 'react-router-dom'
 import { when } from 'vitest-when'
 import { fireEvent, screen } from '@testing-library/react'
@@ -16,13 +15,15 @@ import { useSortedProtocols } from '../hooks'
 import { EmptyStateLinks } from '../EmptyStateLinks'
 import { ProtocolCard } from '../ProtocolCard'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../hooks')
 vi.mock('/app/redux/protocol-storage')
 vi.mock('/app/redux/config')
 vi.mock('../EmptyStateLinks')
 vi.mock('../ProtocolCard')
 
-const render = (props: React.ComponentProps<typeof ProtocolList>) => {
+const render = (props: ComponentProps<typeof ProtocolList>) => {
   return renderWithProviders(
     <BrowserRouter>
       <ProtocolList {...props} />
@@ -34,7 +35,7 @@ const render = (props: React.ComponentProps<typeof ProtocolList>) => {
 }
 
 describe('ProtocolList', () => {
-  let props: React.ComponentProps<typeof ProtocolList>
+  let props: ComponentProps<typeof ProtocolList>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/ProtocolsLanding/__tests__/hooks.test.tsx b/app/src/organisms/Desktop/ProtocolsLanding/__tests__/hooks.test.tsx
index 5d1485fe795..0c10c8fb1ef 100644
--- a/app/src/organisms/Desktop/ProtocolsLanding/__tests__/hooks.test.tsx
+++ b/app/src/organisms/Desktop/ProtocolsLanding/__tests__/hooks.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { Provider } from 'react-redux'
 import { createStore } from 'redux'
 import { renderHook } from '@testing-library/react'
@@ -8,6 +7,7 @@ import { FLEX_ROBOT_TYPE, OT2_ROBOT_TYPE } from '@opentrons/shared-data'
 
 import { useSortedProtocols } from '../hooks'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { ProtocolAnalysisOutput } from '@opentrons/shared-data'
 import type { StoredProtocolData } from '/app/redux/protocol-storage'
@@ -294,7 +294,7 @@ describe('useSortedProtocols', () => {
   })
 
   it('should return an object with protocols sorted alphabetically', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
 
@@ -318,7 +318,7 @@ describe('useSortedProtocols', () => {
   })
 
   it('should return an object with protocols sorted reverse alphabetically', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
 
@@ -342,7 +342,7 @@ describe('useSortedProtocols', () => {
   })
 
   it('should return an object with protocols sorted by most recent modified data', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
 
@@ -366,7 +366,7 @@ describe('useSortedProtocols', () => {
   })
 
   it('should return an object with protocols sorted by oldest modified data', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
 
@@ -390,7 +390,7 @@ describe('useSortedProtocols', () => {
   })
 
   it('should return an object with protocols sorted by flex then ot-2', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
 
@@ -413,7 +413,7 @@ describe('useSortedProtocols', () => {
     )
   })
   it('should return an object with protocols sorted by ot-2 then flex', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
 
diff --git a/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDataDownload.tsx b/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDataDownload.tsx
index 83aeddf3e35..47058491684 100644
--- a/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDataDownload.tsx
+++ b/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDataDownload.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { saveAs } from 'file-saver'
 import { useTranslation, Trans } from 'react-i18next'
 
@@ -32,6 +31,8 @@ import {
 import { useRobot, useIsFlex } from '/app/redux-resources/robots'
 import { useIsEstopNotDisengaged } from '/app/resources/devices/hooks/useIsEstopNotDisengaged'
 
+import type { MouseEventHandler } from 'react'
+
 // TODO(bc, 2022-02-08): replace with support article when available
 const FLEX_CALIBRATION_SUPPORT_URL = 'https://support.opentrons.com'
 
@@ -70,7 +71,7 @@ export function CalibrationDataDownload({
     tipLengthCalibrations != null &&
     tipLengthCalibrations.length > 0
 
-  const onClickSaveAs: React.MouseEventHandler = e => {
+  const onClickSaveAs: MouseEventHandler = e => {
     e.preventDefault()
     doTrackEvent({
       name: ANALYTICS_CALIBRATION_DATA_DOWNLOADED,
diff --git a/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/ModuleCalibrationItems.test.tsx b/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/ModuleCalibrationItems.test.tsx
index 8cb0dd62dc6..ee0529a1c4e 100644
--- a/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/ModuleCalibrationItems.test.tsx
+++ b/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/ModuleCalibrationItems.test.tsx
@@ -1,6 +1,6 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { ABSORBANCE_READER_TYPE } from '@opentrons/shared-data'
 import { i18n } from '/app/i18n'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { mockFetchModulesSuccessActionPayloadModules } from '/app/redux/modules/__fixtures__'
@@ -8,8 +8,8 @@ import { ModuleCalibrationOverflowMenu } from '../ModuleCalibrationOverflowMenu'
 import { formatLastCalibrated } from '../utils'
 import { ModuleCalibrationItems } from '../ModuleCalibrationItems'
 
+import type { ComponentProps } from 'react'
 import type { AttachedModule } from '@opentrons/api-client'
-import { ABSORBANCE_READER_TYPE } from '@opentrons/shared-data'
 
 vi.mock('../ModuleCalibrationOverflowMenu')
 
@@ -55,7 +55,7 @@ const mockCalibratedModule = {
 const ROBOT_NAME = 'mockRobot'
 
 const render = (
-  props: React.ComponentProps<typeof ModuleCalibrationItems>
+  props: ComponentProps<typeof ModuleCalibrationItems>
 ): ReturnType<typeof renderWithProviders> => {
   return renderWithProviders(<ModuleCalibrationItems {...props} />, {
     i18nInstance: i18n,
@@ -63,7 +63,7 @@ const render = (
 }
 
 describe('ModuleCalibrationItems', () => {
-  let props: React.ComponentProps<typeof ModuleCalibrationItems>
+  let props: ComponentProps<typeof ModuleCalibrationItems>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/ModuleCalibrationOverflowMenu.test.tsx b/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/ModuleCalibrationOverflowMenu.test.tsx
index 47b5dbec249..2807269794b 100644
--- a/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/ModuleCalibrationOverflowMenu.test.tsx
+++ b/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/ModuleCalibrationOverflowMenu.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
 import { when } from 'vitest-when'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
@@ -11,6 +10,7 @@ import { useIsEstopNotDisengaged } from '/app/resources/devices/hooks/useIsEstop
 
 import { ModuleCalibrationOverflowMenu } from '../ModuleCalibrationOverflowMenu'
 
+import type { ComponentProps } from 'react'
 import type { Mount } from '@opentrons/components'
 
 vi.mock('@opentrons/react-api-client')
@@ -87,7 +87,7 @@ const mockTCHeating = {
 } as any
 
 const render = (
-  props: React.ComponentProps<typeof ModuleCalibrationOverflowMenu>
+  props: ComponentProps<typeof ModuleCalibrationOverflowMenu>
 ) => {
   return renderWithProviders(<ModuleCalibrationOverflowMenu {...props} />, {
     i18nInstance: i18n,
@@ -97,7 +97,7 @@ const render = (
 const ROBOT_NAME = 'mockRobot'
 
 describe('ModuleCalibrationOverflowMenu', () => {
-  let props: React.ComponentProps<typeof ModuleCalibrationOverflowMenu>
+  let props: ComponentProps<typeof ModuleCalibrationOverflowMenu>
   let mockChainLiveCommands = vi.fn()
 
   beforeEach(() => {
diff --git a/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/OverflowMenu.test.tsx b/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/OverflowMenu.test.tsx
index a0d2ff20096..cf106ccc6b3 100644
--- a/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/OverflowMenu.test.tsx
+++ b/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/OverflowMenu.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { when } from 'vitest-when'
 import '@testing-library/jest-dom/vitest'
@@ -26,10 +25,11 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { useIsEstopNotDisengaged } from '/app/resources/devices'
 import { OverflowMenu } from '../OverflowMenu'
 
+import type { ComponentProps } from 'react'
 import type { Mount } from '@opentrons/components'
 
 const render = (
-  props: React.ComponentProps<typeof OverflowMenu>
+  props: ComponentProps<typeof OverflowMenu>
 ): ReturnType<typeof renderWithProviders> => {
   return renderWithProviders(<OverflowMenu {...props} />, {
     i18nInstance: i18n,
@@ -81,7 +81,7 @@ const RUN_STATUSES = {
 const mockUpdateRobotStatus = vi.fn()
 
 describe('OverflowMenu', () => {
-  let props: React.ComponentProps<typeof OverflowMenu>
+  let props: ComponentProps<typeof OverflowMenu>
   const mockDeleteCalibration = vi.fn()
 
   beforeEach(() => {
diff --git a/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/PipetteOffsetCalibrationItems.test.tsx b/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/PipetteOffsetCalibrationItems.test.tsx
index 2a6cf82726f..bca259d41c5 100644
--- a/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/PipetteOffsetCalibrationItems.test.tsx
+++ b/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/PipetteOffsetCalibrationItems.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
@@ -19,11 +18,12 @@ import { PipetteOffsetCalibrationItems } from '../PipetteOffsetCalibrationItems'
 import { OverflowMenu } from '../OverflowMenu'
 import { formatLastCalibrated } from '../utils'
 
+import type { ComponentProps } from 'react'
 import type { Mount } from '@opentrons/components'
 import type { AttachedPipettesByMount } from '/app/redux/pipettes/types'
 
 const render = (
-  props: React.ComponentProps<typeof PipetteOffsetCalibrationItems>
+  props: ComponentProps<typeof PipetteOffsetCalibrationItems>
 ): ReturnType<typeof renderWithProviders> => {
   return renderWithProviders(<PipetteOffsetCalibrationItems {...props} />, {
     i18nInstance: i18n,
@@ -73,7 +73,7 @@ const mockAttachedPipettes: AttachedPipettesByMount = {
 const mockUpdateRobotStatus = vi.fn()
 
 describe('PipetteOffsetCalibrationItems', () => {
-  let props: React.ComponentProps<typeof PipetteOffsetCalibrationItems>
+  let props: ComponentProps<typeof PipetteOffsetCalibrationItems>
 
   beforeEach(() => {
     vi.mocked(useAttachedPipettesFromInstrumentsQuery).mockReturnValue({
diff --git a/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/TipLengthCalibrationItems.test.tsx b/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/TipLengthCalibrationItems.test.tsx
index 014ec28ee2c..19270615a06 100644
--- a/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/TipLengthCalibrationItems.test.tsx
+++ b/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/__tests__/TipLengthCalibrationItems.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -6,6 +5,8 @@ import { i18n } from '/app/i18n'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { TipLengthCalibrationItems } from '../TipLengthCalibrationItems'
 import { OverflowMenu } from '../OverflowMenu'
+
+import type { ComponentProps } from 'react'
 import type { Mount } from '@opentrons/components'
 
 vi.mock('/app/redux/custom-labware/selectors')
@@ -54,14 +55,14 @@ const mockTipLengthCalibrations = [
 const mockUpdateRobotStatus = vi.fn()
 
 const render = (
-  props: React.ComponentProps<typeof TipLengthCalibrationItems>
+  props: ComponentProps<typeof TipLengthCalibrationItems>
 ): ReturnType<typeof renderWithProviders> => {
   return renderWithProviders(<TipLengthCalibrationItems {...props} />, {
     i18nInstance: i18n,
   })
 }
 describe('TipLengthCalibrationItems', () => {
-  let props: React.ComponentProps<typeof TipLengthCalibrationItems>
+  let props: ComponentProps<typeof TipLengthCalibrationItems>
 
   beforeEach(() => {
     vi.mocked(OverflowMenu).mockReturnValue(<div>mock overflow menu</div>)
diff --git a/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/CalibrationHealthCheck.test.tsx b/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/CalibrationHealthCheck.test.tsx
index ee965c9d042..c434f6c1392 100644
--- a/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/CalibrationHealthCheck.test.tsx
+++ b/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/CalibrationHealthCheck.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import userEvent from '@testing-library/user-event'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
@@ -20,14 +19,13 @@ import {
 } from '/app/redux/calibration/tip-length/__fixtures__'
 import { mockAttachedPipette } from '/app/redux/pipettes/__fixtures__'
 import { useRunStatuses } from '/app/resources/runs'
-
 import {
   useAttachedPipettes,
   useAttachedPipetteCalibrations,
 } from '/app/resources/instruments'
-
 import { CalibrationHealthCheck } from '../CalibrationHealthCheck'
 
+import type { ComponentProps } from 'react'
 import type {
   AttachedPipettesByMount,
   PipetteCalibrationsByMount,
@@ -66,7 +64,7 @@ let mockTrackEvent: any
 const mockDispatchRequests = vi.fn()
 
 const render = (
-  props?: Partial<React.ComponentProps<typeof CalibrationHealthCheck>>
+  props?: Partial<ComponentProps<typeof CalibrationHealthCheck>>
 ) => {
   return renderWithProviders(
     <CalibrationHealthCheck
diff --git a/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsDeckCalibration.test.tsx b/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsDeckCalibration.test.tsx
index 2c46916fc3c..8c7b4951054 100644
--- a/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsDeckCalibration.test.tsx
+++ b/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsDeckCalibration.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach } from 'vitest'
 
@@ -17,6 +16,7 @@ import { renderWithProviders } from '/app/__testing-utils__'
 
 import { RobotSettingsDeckCalibration } from '../RobotSettingsDeckCalibration'
 
+import type { ComponentProps } from 'react'
 import type { AttachedPipettesByMount } from '/app/redux/pipettes/types'
 
 vi.mock('../..//CalibrationStatusCard')
@@ -31,7 +31,7 @@ const mockAttachedPipettes: AttachedPipettesByMount = {
 } as any
 
 const render = (
-  props?: Partial<React.ComponentProps<typeof RobotSettingsDeckCalibration>>
+  props?: Partial<ComponentProps<typeof RobotSettingsDeckCalibration>>
 ) => {
   return renderWithProviders(
     <RobotSettingsDeckCalibration robotName="otie" {...props} />,
diff --git a/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsGripperCalibration.test.tsx b/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsGripperCalibration.test.tsx
index e4a4d48eea1..ff0570443d1 100644
--- a/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsGripperCalibration.test.tsx
+++ b/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsGripperCalibration.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
@@ -10,6 +9,7 @@ import { formatLastCalibrated } from '../CalibrationDetails/utils'
 import { useIsEstopNotDisengaged } from '/app/resources/devices/hooks/useIsEstopNotDisengaged'
 import { RobotSettingsGripperCalibration } from '../RobotSettingsGripperCalibration'
 
+import type { ComponentProps } from 'react'
 import type { GripperData } from '@opentrons/api-client'
 
 vi.mock('/app/organisms/GripperWizardFlows')
@@ -35,7 +35,7 @@ const mockNotCalibratedGripper = {
 const ROBOT_NAME = 'mockRobot'
 
 const render = (
-  props: React.ComponentProps<typeof RobotSettingsGripperCalibration>
+  props: ComponentProps<typeof RobotSettingsGripperCalibration>
 ) => {
   return renderWithProviders(<RobotSettingsGripperCalibration {...props} />, {
     i18nInstance: i18n,
@@ -43,7 +43,7 @@ const render = (
 }
 
 describe('RobotSettingsGripperCalibration', () => {
-  let props: React.ComponentProps<typeof RobotSettingsGripperCalibration>
+  let props: ComponentProps<typeof RobotSettingsGripperCalibration>
   beforeEach(() => {
     vi.mocked(formatLastCalibrated).mockReturnValue('last calibrated 1/2/3')
     vi.mocked(GripperWizardFlows).mockReturnValue(<>Mock Wizard Flow</>)
diff --git a/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsModuleCalibration.test.tsx b/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsModuleCalibration.test.tsx
index 95b71a450af..63d5014da79 100644
--- a/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsModuleCalibration.test.tsx
+++ b/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsModuleCalibration.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach } from 'vitest'
 import { i18n } from '/app/i18n'
@@ -7,10 +6,12 @@ import { mockFetchModulesSuccessActionPayloadModules } from '/app/redux/modules/
 import { RobotSettingsModuleCalibration } from '../RobotSettingsModuleCalibration'
 import { ModuleCalibrationItems } from '../CalibrationDetails/ModuleCalibrationItems'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../CalibrationDetails/ModuleCalibrationItems')
 
 const render = (
-  props: React.ComponentProps<typeof RobotSettingsModuleCalibration>
+  props: ComponentProps<typeof RobotSettingsModuleCalibration>
 ) => {
   return renderWithProviders(<RobotSettingsModuleCalibration {...props} />, {
     i18nInstance: i18n,
@@ -20,7 +21,7 @@ const render = (
 const ROBOT_NAME = 'mockRobot'
 
 describe('RobotSettingsModuleCalibration', () => {
-  let props: React.ComponentProps<typeof RobotSettingsModuleCalibration>
+  let props: ComponentProps<typeof RobotSettingsModuleCalibration>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsPipetteOffsetCalibration.test.tsx b/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsPipetteOffsetCalibration.test.tsx
index 0f628dddfef..6b883499831 100644
--- a/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsPipetteOffsetCalibration.test.tsx
+++ b/app/src/organisms/Desktop/RobotSettingsCalibration/__tests__/RobotSettingsPipetteOffsetCalibration.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { describe, it, vi, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
@@ -18,6 +17,7 @@ import { useIsFlex } from '/app/redux-resources/robots'
 import { RobotSettingsPipetteOffsetCalibration } from '../RobotSettingsPipetteOffsetCalibration'
 import { PipetteOffsetCalibrationItems } from '../CalibrationDetails/PipetteOffsetCalibrationItems'
 
+import type { ComponentProps } from 'react'
 import type { FormattedPipetteOffsetCalibration } from '..'
 
 vi.mock('/app/organisms/Desktop/Devices/hooks')
@@ -29,9 +29,7 @@ const mockFormattedPipetteOffsetCalibrations: FormattedPipetteOffsetCalibration[
 const mockUpdateRobotStatus = vi.fn()
 
 const render = (
-  props?: Partial<
-    React.ComponentProps<typeof RobotSettingsPipetteOffsetCalibration>
-  >
+  props?: Partial<ComponentProps<typeof RobotSettingsPipetteOffsetCalibration>>
 ) => {
   return renderWithProviders(
     <RobotSettingsPipetteOffsetCalibration
diff --git a/app/src/organisms/Desktop/RunProgressMeter/__tests__/InterventionTicks.test.tsx b/app/src/organisms/Desktop/RunProgressMeter/__tests__/InterventionTicks.test.tsx
index c6562476818..b9ae7cd3c01 100644
--- a/app/src/organisms/Desktop/RunProgressMeter/__tests__/InterventionTicks.test.tsx
+++ b/app/src/organisms/Desktop/RunProgressMeter/__tests__/InterventionTicks.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -7,16 +6,18 @@ import { i18n } from '/app/i18n'
 import { InterventionTicks } from '../InterventionTicks'
 import { Tick } from '../Tick'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../Tick')
 
-const render = (props: React.ComponentProps<typeof InterventionTicks>) => {
+const render = (props: ComponentProps<typeof InterventionTicks>) => {
   return renderWithProviders(<InterventionTicks {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('InterventionTicks', () => {
-  let props: React.ComponentProps<typeof InterventionTicks>
+  let props: ComponentProps<typeof InterventionTicks>
   beforeEach(() => {
     vi.mocked(Tick).mockImplementation(({ index }) => (
       <div>MOCK TICK at index: {index}</div>
diff --git a/app/src/organisms/Desktop/RunProgressMeter/__tests__/RunProgressMeter.test.tsx b/app/src/organisms/Desktop/RunProgressMeter/__tests__/RunProgressMeter.test.tsx
index 928bd2572a9..469c056c087 100644
--- a/app/src/organisms/Desktop/RunProgressMeter/__tests__/RunProgressMeter.test.tsx
+++ b/app/src/organisms/Desktop/RunProgressMeter/__tests__/RunProgressMeter.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
@@ -37,6 +36,7 @@ import { RunProgressMeter } from '..'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { useRunningStepCounts } from '/app/resources/protocols/hooks'
 
+import type { ComponentProps } from 'react'
 import type { RunCommandSummary } from '@opentrons/api-client'
 import type * as ApiClient from '@opentrons/react-api-client'
 
@@ -55,7 +55,7 @@ vi.mock('../../Devices/hooks')
 vi.mock('/app/resources/protocols/hooks')
 vi.mock('/app/redux-resources/robots')
 
-const render = (props: React.ComponentProps<typeof RunProgressMeter>) => {
+const render = (props: ComponentProps<typeof RunProgressMeter>) => {
   return renderWithProviders(<RunProgressMeter {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -65,7 +65,7 @@ const NON_DETERMINISTIC_RUN_ID = 'nonDeterministicID'
 const ROBOT_NAME = 'otie'
 
 describe('RunProgressMeter', () => {
-  let props: React.ComponentProps<typeof RunProgressMeter>
+  let props: ComponentProps<typeof RunProgressMeter>
   beforeEach(() => {
     vi.mocked(ProgressBar).mockReturnValue(<div>MOCK PROGRESS BAR</div>)
     vi.mocked(InterventionModal).mockReturnValue(
diff --git a/app/src/organisms/Desktop/RunProgressMeter/hooks/useRunProgressCopy.tsx b/app/src/organisms/Desktop/RunProgressMeter/hooks/useRunProgressCopy.tsx
index 65e2f27d6b3..aaa90997167 100644
--- a/app/src/organisms/Desktop/RunProgressMeter/hooks/useRunProgressCopy.tsx
+++ b/app/src/organisms/Desktop/RunProgressMeter/hooks/useRunProgressCopy.tsx
@@ -4,7 +4,6 @@ import {
   RUN_STATUS_BLOCKED_BY_OPEN_DOOR,
   RUN_STATUS_IDLE,
 } from '@opentrons/api-client'
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { getCommandTextData } from '/app/local-resources/commands'
@@ -13,6 +12,7 @@ import { LegacyStyledText } from '@opentrons/components'
 import { CommandText } from '/app/molecules/Command'
 import { TERMINAL_RUN_STATUSES } from '../constants'
 
+import type { ReactNode } from 'react'
 import type { CommandDetail, RunStatus } from '@opentrons/api-client'
 import type {
   CompletedProtocolAnalysis,
@@ -21,7 +21,7 @@ import type {
 } from '@opentrons/shared-data'
 
 interface UseRunProgressResult {
-  currentStepContents: React.ReactNode
+  currentStepContents: ReactNode
   stepCountStr: string | null
   progressPercentage: number
 }
diff --git a/app/src/organisms/Desktop/RunProgressMeter/index.tsx b/app/src/organisms/Desktop/RunProgressMeter/index.tsx
index fb158f5d686..ecf38cd31f6 100644
--- a/app/src/organisms/Desktop/RunProgressMeter/index.tsx
+++ b/app/src/organisms/Desktop/RunProgressMeter/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import { css } from 'styled-components'
@@ -49,6 +48,8 @@ import { useRobotType } from '/app/redux-resources/robots'
 import { useRunningStepCounts } from '/app/resources/protocols/hooks'
 import { useRunProgressCopy } from './hooks'
 
+import type { MouseEventHandler } from 'react'
+
 interface RunProgressMeterProps {
   runId: string
   robotName: string
@@ -92,7 +93,7 @@ export function RunProgressMeter(props: RunProgressMeterProps): JSX.Element {
 
   const { downloadRunLog } = useDownloadRunLog(robotName, runId)
 
-  const onDownloadClick: React.MouseEventHandler<HTMLAnchorElement> = e => {
+  const onDownloadClick: MouseEventHandler<HTMLAnchorElement> = e => {
     if (downloadIsDisabled) return false
     e.preventDefault()
     e.stopPropagation()
diff --git a/app/src/organisms/Desktop/SendProtocolToFlexSlideout/__tests__/SendProtocolToFlexSlideout.test.tsx b/app/src/organisms/Desktop/SendProtocolToFlexSlideout/__tests__/SendProtocolToFlexSlideout.test.tsx
index 5ed8f96fb1a..08e60f84729 100644
--- a/app/src/organisms/Desktop/SendProtocolToFlexSlideout/__tests__/SendProtocolToFlexSlideout.test.tsx
+++ b/app/src/organisms/Desktop/SendProtocolToFlexSlideout/__tests__/SendProtocolToFlexSlideout.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -36,6 +35,7 @@ import { storedProtocolData as storedProtocolDataFixture } from '/app/redux/prot
 import { SendProtocolToFlexSlideout } from '..'
 import { useNotifyAllRunsQuery } from '/app/resources/runs'
 
+import type { ComponentProps } from 'react'
 import type * as ApiClient from '@opentrons/react-api-client'
 
 vi.mock('@opentrons/react-api-client', async importOriginal => {
@@ -53,9 +53,7 @@ vi.mock('/app/redux/custom-labware')
 vi.mock('/app/redux/protocol-storage/selectors')
 vi.mock('/app/resources/runs')
 
-const render = (
-  props: React.ComponentProps<typeof SendProtocolToFlexSlideout>
-) => {
+const render = (props: ComponentProps<typeof SendProtocolToFlexSlideout>) => {
   return renderWithProviders(
     <MemoryRouter>
       <SendProtocolToFlexSlideout {...props} />
diff --git a/app/src/organisms/Desktop/UpdateAppModal/__tests__/UpdateAppModal.test.tsx b/app/src/organisms/Desktop/UpdateAppModal/__tests__/UpdateAppModal.test.tsx
index 3131bee25a3..4469abc159a 100644
--- a/app/src/organisms/Desktop/UpdateAppModal/__tests__/UpdateAppModal.test.tsx
+++ b/app/src/organisms/Desktop/UpdateAppModal/__tests__/UpdateAppModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen, fireEvent } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -9,10 +8,11 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { useRemoveActiveAppUpdateToast } from '../../Alerts'
 import { UpdateAppModal, RELEASE_NOTES_URL_BASE } from '..'
 
+import type { ComponentProps } from 'react'
+import type * as Dom from 'react-router-dom'
 import type { State } from '/app/redux/types'
 import type { ShellUpdateState } from '/app/redux/shell/types'
 import type * as ShellState from '/app/redux/shell'
-import type * as Dom from 'react-router-dom'
 import type { UpdateAppModalProps } from '..'
 
 vi.mock('/app/redux/shell/update', async importOriginal => {
@@ -35,7 +35,7 @@ vi.mock('../../Alerts')
 
 const getShellUpdateState = Shell.getShellUpdateState
 
-const render = (props: React.ComponentProps<typeof UpdateAppModal>) => {
+const render = (props: ComponentProps<typeof UpdateAppModal>) => {
   return renderWithProviders(<UpdateAppModal {...props} />, {
     i18nInstance: i18n,
     initialState: {
@@ -45,7 +45,7 @@ const render = (props: React.ComponentProps<typeof UpdateAppModal>) => {
 }
 
 describe('UpdateAppModal', () => {
-  let props: React.ComponentProps<typeof UpdateAppModal>
+  let props: ComponentProps<typeof UpdateAppModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/UpdateRobotBanner/__tests__/UpdateRobotBanner.test.tsx b/app/src/organisms/Desktop/UpdateRobotBanner/__tests__/UpdateRobotBanner.test.tsx
index e7d90f70ea3..e1b67d7c9dc 100644
--- a/app/src/organisms/Desktop/UpdateRobotBanner/__tests__/UpdateRobotBanner.test.tsx
+++ b/app/src/organisms/Desktop/UpdateRobotBanner/__tests__/UpdateRobotBanner.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -12,19 +11,21 @@ import {
 import { handleUpdateBuildroot } from '../../Devices/RobotSettings/UpdateBuildroot'
 import { UpdateRobotBanner } from '..'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/robot-update')
 vi.mock('../../Devices/RobotSettings/UpdateBuildroot')
 
 const getUpdateDisplayInfo = Buildroot.getRobotUpdateDisplayInfo
 
-const render = (props: React.ComponentProps<typeof UpdateRobotBanner>) => {
+const render = (props: ComponentProps<typeof UpdateRobotBanner>) => {
   return renderWithProviders(<UpdateRobotBanner {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('UpdateRobotBanner', () => {
-  let props: React.ComponentProps<typeof UpdateRobotBanner>
+  let props: ComponentProps<typeof UpdateRobotBanner>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/Desktop/UpdateRobotBanner/index.tsx b/app/src/organisms/Desktop/UpdateRobotBanner/index.tsx
index e5d7d2d0e85..390f4bc3ac1 100644
--- a/app/src/organisms/Desktop/UpdateRobotBanner/index.tsx
+++ b/app/src/organisms/Desktop/UpdateRobotBanner/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import {
@@ -13,6 +12,7 @@ import {
 import { getRobotUpdateDisplayInfo } from '/app/redux/robot-update'
 import { handleUpdateBuildroot } from '../Devices/RobotSettings/UpdateBuildroot'
 
+import type { MouseEvent } from 'react'
 import type { StyleProps } from '@opentrons/components'
 import type { State } from '/app/redux/types'
 import type { DiscoveredRobot } from '/app/redux/discovery/types'
@@ -35,7 +35,7 @@ export function UpdateRobotBanner(
     robot !== null &&
     robot.healthStatus === 'ok' ? (
     <Flex
-      onClick={(e: React.MouseEvent) => {
+      onClick={(e: MouseEvent) => {
         e.stopPropagation()
       }}
       flexDirection={DIRECTION_COLUMN}
diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/AddFixtureModal.test.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/AddFixtureModal.test.tsx
index 450a64cc0e6..955c9e0f86b 100644
--- a/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/AddFixtureModal.test.tsx
+++ b/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/AddFixtureModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, expect, afterEach } from 'vitest'
 
@@ -16,6 +15,7 @@ import { i18n } from '/app/i18n'
 import { AddFixtureModal } from '../AddFixtureModal'
 import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration'
 
+import type { ComponentProps } from 'react'
 import type { UseQueryResult } from 'react-query'
 import type { DeckConfiguration } from '@opentrons/shared-data'
 import type { Modules } from '@opentrons/api-client'
@@ -26,14 +26,14 @@ vi.mock('/app/resources/deck_configuration')
 const mockCloseModal = vi.fn()
 const mockUpdateDeckConfiguration = vi.fn()
 
-const render = (props: React.ComponentProps<typeof AddFixtureModal>) => {
+const render = (props: ComponentProps<typeof AddFixtureModal>) => {
   return renderWithProviders(<AddFixtureModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('Touchscreen AddFixtureModal', () => {
-  let props: React.ComponentProps<typeof AddFixtureModal>
+  let props: ComponentProps<typeof AddFixtureModal>
 
   beforeEach(() => {
     props = {
@@ -88,7 +88,7 @@ describe('Touchscreen AddFixtureModal', () => {
 })
 
 describe('Desktop AddFixtureModal', () => {
-  let props: React.ComponentProps<typeof AddFixtureModal>
+  let props: ComponentProps<typeof AddFixtureModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/DeckConfigurationDiscardChangesModal.test.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/DeckConfigurationDiscardChangesModal.test.tsx
index fd0e56ffa4d..b0b213170dc 100644
--- a/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/DeckConfigurationDiscardChangesModal.test.tsx
+++ b/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/DeckConfigurationDiscardChangesModal.test.tsx
@@ -1,10 +1,11 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { DeckConfigurationDiscardChangesModal } from '../DeckConfigurationDiscardChangesModal'
+
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 const mockFunc = vi.fn()
@@ -19,7 +20,7 @@ vi.mock('react-router-dom', async importOriginal => {
 })
 
 const render = (
-  props: React.ComponentProps<typeof DeckConfigurationDiscardChangesModal>
+  props: ComponentProps<typeof DeckConfigurationDiscardChangesModal>
 ) => {
   return renderWithProviders(
     <DeckConfigurationDiscardChangesModal {...props} />,
@@ -30,7 +31,7 @@ const render = (
 }
 
 describe('DeckConfigurationDiscardChangesModal', () => {
-  let props: React.ComponentProps<typeof DeckConfigurationDiscardChangesModal>
+  let props: ComponentProps<typeof DeckConfigurationDiscardChangesModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/DeckFixtureSetupInstructionsModal.test.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/DeckFixtureSetupInstructionsModal.test.tsx
index ddc9ff33194..bfd218f5e97 100644
--- a/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/DeckFixtureSetupInstructionsModal.test.tsx
+++ b/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/DeckFixtureSetupInstructionsModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 
@@ -6,12 +5,14 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { DeckFixtureSetupInstructionsModal } from '../DeckFixtureSetupInstructionsModal'
 
+import type { ComponentProps } from 'react'
+
 const mockFunc = vi.fn()
 const PNG_FILE_NAME =
   '/app/src/assets/images/on-device-display/deck_fixture_setup_qrcode.png'
 
 const render = (
-  props: React.ComponentProps<typeof DeckFixtureSetupInstructionsModal>
+  props: ComponentProps<typeof DeckFixtureSetupInstructionsModal>
 ) => {
   return renderWithProviders(<DeckFixtureSetupInstructionsModal {...props} />, {
     i18nInstance: i18n,
@@ -19,7 +20,7 @@ const render = (
 }
 
 describe('Touchscreen DeckFixtureSetupInstructionsModal', () => {
-  let props: React.ComponentProps<typeof DeckFixtureSetupInstructionsModal>
+  let props: ComponentProps<typeof DeckFixtureSetupInstructionsModal>
 
   beforeEach(() => {
     props = {
@@ -49,7 +50,7 @@ describe('Touchscreen DeckFixtureSetupInstructionsModal', () => {
 })
 
 describe('Desktop DeckFixtureSetupInstructionsModal', () => {
-  let props: React.ComponentProps<typeof DeckFixtureSetupInstructionsModal>
+  let props: ComponentProps<typeof DeckFixtureSetupInstructionsModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/DeviceDetailsDeckConfiguration.test.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/DeviceDetailsDeckConfiguration.test.tsx
index 16ef3db90a7..409f0d3f452 100644
--- a/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/DeviceDetailsDeckConfiguration.test.tsx
+++ b/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/DeviceDetailsDeckConfiguration.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { when } from 'vitest-when'
 import { describe, it, beforeEach, vi, afterEach } from 'vitest'
@@ -23,6 +22,7 @@ import {
   useNotifyDeckConfigurationQuery,
 } from '/app/resources/deck_configuration'
 
+import type { ComponentProps } from 'react'
 import type { UseQueryResult } from 'react-query'
 import type { MaintenanceRun } from '@opentrons/api-client'
 import type { DeckConfiguration } from '@opentrons/shared-data'
@@ -62,7 +62,7 @@ const mockCurrnetMaintenanceRun = {
 } as MaintenanceRun
 
 const render = (
-  props: React.ComponentProps<typeof DeviceDetailsDeckConfiguration>
+  props: ComponentProps<typeof DeviceDetailsDeckConfiguration>
 ) => {
   return renderWithProviders(<DeviceDetailsDeckConfiguration {...props} />, {
     i18nInstance: i18n,
@@ -70,7 +70,7 @@ const render = (
 }
 
 describe('DeviceDetailsDeckConfiguration', () => {
-  let props: React.ComponentProps<typeof DeviceDetailsDeckConfiguration>
+  let props: ComponentProps<typeof DeviceDetailsDeckConfiguration>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/DropTipWizardFlows/__tests__/DropTipWizard.test.tsx b/app/src/organisms/DropTipWizardFlows/__tests__/DropTipWizard.test.tsx
index d1108fc3c18..9ea6a6f2363 100644
--- a/app/src/organisms/DropTipWizardFlows/__tests__/DropTipWizard.test.tsx
+++ b/app/src/organisms/DropTipWizardFlows/__tests__/DropTipWizard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, describe, it, expect, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -31,6 +30,8 @@ import {
   CONFIRM_POSITION,
 } from '../constants'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/molecules/InProgressModal')
 vi.mock('../ExitConfirmation')
 vi.mock('../steps')
@@ -38,7 +39,7 @@ vi.mock('../ErrorInfo')
 vi.mock('../DropTipWizardHeader')
 
 const renderDropTipWizardContainer = (
-  props: React.ComponentProps<typeof DropTipWizardContainer>
+  props: ComponentProps<typeof DropTipWizardContainer>
 ) => {
   return renderWithProviders(<DropTipWizardContainer {...props} />, {
     i18nInstance: i18n,
@@ -46,7 +47,7 @@ const renderDropTipWizardContainer = (
 }
 
 describe('DropTipWizardContainer', () => {
-  let props: React.ComponentProps<typeof DropTipWizardContainer>
+  let props: ComponentProps<typeof DropTipWizardContainer>
 
   beforeEach(() => {
     props = mockDropTipWizardContainerProps
@@ -75,7 +76,7 @@ describe('DropTipWizardContainer', () => {
 })
 
 const renderDropTipWizardContent = (
-  props: React.ComponentProps<typeof DropTipWizardContent>
+  props: ComponentProps<typeof DropTipWizardContent>
 ) => {
   return renderWithProviders(<DropTipWizardContent {...props} />, {
     i18nInstance: i18n,
@@ -83,7 +84,7 @@ const renderDropTipWizardContent = (
 }
 
 describe('DropTipWizardContent', () => {
-  let props: React.ComponentProps<typeof DropTipWizardContent>
+  let props: ComponentProps<typeof DropTipWizardContent>
 
   beforeEach(() => {
     props = mockDropTipWizardContainerProps
diff --git a/app/src/organisms/DropTipWizardFlows/__tests__/DropTipWizardHeader.test.tsx b/app/src/organisms/DropTipWizardFlows/__tests__/DropTipWizardHeader.test.tsx
index c5720adf4ab..74bb70f6a8e 100644
--- a/app/src/organisms/DropTipWizardFlows/__tests__/DropTipWizardHeader.test.tsx
+++ b/app/src/organisms/DropTipWizardFlows/__tests__/DropTipWizardHeader.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -10,17 +9,18 @@ import {
   DropTipWizardHeader,
 } from '../DropTipWizardHeader'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 import type { UseWizardExitHeaderProps } from '../DropTipWizardHeader'
 
-const render = (props: React.ComponentProps<typeof DropTipWizardHeader>) => {
+const render = (props: ComponentProps<typeof DropTipWizardHeader>) => {
   return renderWithProviders(<DropTipWizardHeader {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('DropTipWizardHeader', () => {
-  let props: React.ComponentProps<typeof DropTipWizardHeader>
+  let props: ComponentProps<typeof DropTipWizardHeader>
 
   beforeEach(() => {
     props = mockDropTipWizardContainerProps
diff --git a/app/src/organisms/EmergencyStop/__tests__/EstopMissingModal.test.tsx b/app/src/organisms/EmergencyStop/__tests__/EstopMissingModal.test.tsx
index c2ce7cea0e1..c71c0a146ee 100644
--- a/app/src/organisms/EmergencyStop/__tests__/EstopMissingModal.test.tsx
+++ b/app/src/organisms/EmergencyStop/__tests__/EstopMissingModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
@@ -8,16 +7,18 @@ import { i18n } from '/app/i18n'
 import { getIsOnDevice } from '/app/redux/config'
 import { EstopMissingModal } from '../EstopMissingModal'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/config')
 
-const render = (props: React.ComponentProps<typeof EstopMissingModal>) => {
+const render = (props: ComponentProps<typeof EstopMissingModal>) => {
   return renderWithProviders(<EstopMissingModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('EstopMissingModal - Touchscreen', () => {
-  let props: React.ComponentProps<typeof EstopMissingModal>
+  let props: ComponentProps<typeof EstopMissingModal>
 
   beforeEach(() => {
     props = {
@@ -40,7 +41,7 @@ describe('EstopMissingModal - Touchscreen', () => {
 })
 
 describe('EstopMissingModal - Desktop', () => {
-  let props: React.ComponentProps<typeof EstopMissingModal>
+  let props: ComponentProps<typeof EstopMissingModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/EmergencyStop/__tests__/EstopPressedModal.test.tsx b/app/src/organisms/EmergencyStop/__tests__/EstopPressedModal.test.tsx
index 067211c4c06..6d259bd6acb 100644
--- a/app/src/organisms/EmergencyStop/__tests__/EstopPressedModal.test.tsx
+++ b/app/src/organisms/EmergencyStop/__tests__/EstopPressedModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
@@ -10,18 +9,20 @@ import { getIsOnDevice } from '/app/redux/config'
 import { EstopPressedModal } from '../EstopPressedModal'
 import { usePlacePlateReaderLid } from '/app/resources/modules'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
 vi.mock('/app/redux/config')
 vi.mock('/app/resources/modules')
 
-const render = (props: React.ComponentProps<typeof EstopPressedModal>) => {
+const render = (props: ComponentProps<typeof EstopPressedModal>) => {
   return renderWithProviders(<EstopPressedModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('EstopPressedModal - Touchscreen', () => {
-  let props: React.ComponentProps<typeof EstopPressedModal>
+  let props: ComponentProps<typeof EstopPressedModal>
 
   beforeEach(() => {
     props = {
@@ -85,7 +86,7 @@ describe('EstopPressedModal - Touchscreen', () => {
 })
 
 describe('EstopPressedModal - Desktop', () => {
-  let props: React.ComponentProps<typeof EstopPressedModal>
+  let props: ComponentProps<typeof EstopPressedModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/EmergencyStop/__tests__/EstopTakeover.test.tsx b/app/src/organisms/EmergencyStop/__tests__/EstopTakeover.test.tsx
index 3ff0503dc69..4ffd822fb80 100644
--- a/app/src/organisms/EmergencyStop/__tests__/EstopTakeover.test.tsx
+++ b/app/src/organisms/EmergencyStop/__tests__/EstopTakeover.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, expect, vi } from 'vitest'
 import { screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
@@ -19,6 +18,8 @@ import { getLocalRobot } from '/app/redux/discovery'
 import { mockConnectedRobot } from '/app/redux/discovery/__fixtures__'
 import { EstopTakeover } from '../EstopTakeover'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
 vi.mock('../EstopMissingModal')
 vi.mock('../EstopPressedModal')
@@ -33,14 +34,14 @@ const mockPressed = {
   },
 }
 
-const render = (props: React.ComponentProps<typeof EstopTakeover>) => {
+const render = (props: ComponentProps<typeof EstopTakeover>) => {
   return renderWithProviders(<EstopTakeover {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('EstopTakeover', () => {
-  let props: React.ComponentProps<typeof EstopTakeover>
+  let props: ComponentProps<typeof EstopTakeover>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/IgnoreErrorSkipStep.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/IgnoreErrorSkipStep.tsx
index 16cb755d4da..2f8f7016773 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/IgnoreErrorSkipStep.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/IgnoreErrorSkipStep.tsx
@@ -27,6 +27,7 @@ import {
   SkipStepInfo,
 } from '../shared'
 
+import type { ChangeEvent } from 'react'
 import type { RecoveryContentProps } from '../types'
 
 export function IgnoreErrorSkipStep(props: RecoveryContentProps): JSX.Element {
@@ -143,7 +144,7 @@ export function IgnoreErrorStepHome({
       >
         <RecoveryRadioGroup
           value={selectedOption}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          onChange={(e: ChangeEvent<HTMLInputElement>) => {
             setSelectedOption(e.currentTarget.value as IgnoreOption)
           }}
           options={IGNORE_OPTIONS_IN_ORDER.map(option => {
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/CancelRun.test.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/CancelRun.test.tsx
index cbf8126e353..06923d65492 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/CancelRun.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/CancelRun.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, describe, it, expect, beforeEach } from 'vitest'
 import { screen, waitFor } from '@testing-library/react'
 
@@ -9,11 +8,13 @@ import { CancelRun } from '../CancelRun'
 import { RECOVERY_MAP } from '../../constants'
 import { SelectRecoveryOption } from '../SelectRecoveryOption'
 import { clickButtonLabeled } from '../../__tests__/util'
+
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('../SelectRecoveryOption')
 
-const render = (props: React.ComponentProps<typeof CancelRun>) => {
+const render = (props: ComponentProps<typeof CancelRun>) => {
   return renderWithProviders(<CancelRun {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -21,7 +22,7 @@ const render = (props: React.ComponentProps<typeof CancelRun>) => {
 
 describe('RecoveryFooterButtons', () => {
   const { CANCEL_RUN, ROBOT_CANCELING, DROP_TIP_FLOWS } = RECOVERY_MAP
-  let props: React.ComponentProps<typeof CancelRun>
+  let props: ComponentProps<typeof CancelRun>
   let mockGoBackPrevStep: Mock
   let mockhandleMotionRouting: Mock
   let mockProceedToRouteAndStep: Mock
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/FillWellAndSkip.test.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/FillWellAndSkip.test.tsx
index 3c7675ec21c..6f0145a9ef3 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/FillWellAndSkip.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/FillWellAndSkip.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, expect, beforeEach } from 'vitest'
 import { screen, waitFor } from '@testing-library/react'
 
@@ -11,6 +10,7 @@ import { CancelRun } from '../CancelRun'
 import { SelectRecoveryOption } from '../SelectRecoveryOption'
 import { clickButtonLabeled } from '../../__tests__/util'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('../../shared', async () => {
@@ -32,28 +32,26 @@ vi.mock('../CancelRun')
 vi.mock('../SelectRecoveryOption')
 vi.mock('/app/molecules/Command')
 
-const render = (props: React.ComponentProps<typeof FillWellAndSkip>) => {
+const render = (props: ComponentProps<typeof FillWellAndSkip>) => {
   return renderWithProviders(<FillWellAndSkip {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
-const renderFillWell = (props: React.ComponentProps<typeof FillWell>) => {
+const renderFillWell = (props: ComponentProps<typeof FillWell>) => {
   return renderWithProviders(<FillWell {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
-const renderSkipToNextStep = (
-  props: React.ComponentProps<typeof SkipToNextStep>
-) => {
+const renderSkipToNextStep = (props: ComponentProps<typeof SkipToNextStep>) => {
   return renderWithProviders(<SkipToNextStep {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('FillWellAndSkip', () => {
-  let props: React.ComponentProps<typeof FillWellAndSkip>
+  let props: ComponentProps<typeof FillWellAndSkip>
 
   beforeEach(() => {
     props = {
@@ -118,7 +116,7 @@ describe('FillWellAndSkip', () => {
 })
 
 describe('FillWell', () => {
-  let props: React.ComponentProps<typeof FillWell>
+  let props: ComponentProps<typeof FillWell>
 
   beforeEach(() => {
     props = {
@@ -136,7 +134,7 @@ describe('FillWell', () => {
 })
 
 describe('SkipToNextStep', () => {
-  let props: React.ComponentProps<typeof SkipToNextStep>
+  let props: ComponentProps<typeof SkipToNextStep>
   let mockhandleMotionRouting: Mock
   let mockGoBackPrevStep: Mock
   let mockProceedToRouteAndStep: Mock
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/HomeAndRetry.test.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/HomeAndRetry.test.tsx
index 3286041b7fb..aae543bc559 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/HomeAndRetry.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/HomeAndRetry.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, afterEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -10,17 +9,19 @@ import { SelectRecoveryOption } from '../SelectRecoveryOption'
 import { HomeAndRetry } from '../HomeAndRetry'
 import { TipSelection } from '../../shared/TipSelection'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../SelectRecoveryOption')
 vi.mock('../../shared/TipSelection')
 
-const render = (props: React.ComponentProps<typeof HomeAndRetry>) => {
+const render = (props: ComponentProps<typeof HomeAndRetry>) => {
   return renderWithProviders(<HomeAndRetry {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('HomeAndRetry', () => {
-  let props: React.ComponentProps<typeof HomeAndRetry>
+  let props: ComponentProps<typeof HomeAndRetry>
   beforeEach(() => {
     props = {
       ...mockRecoveryContentProps,
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/IgnoreErrorSkipStep.test.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/IgnoreErrorSkipStep.test.tsx
index 547334f77c4..a1655ae57b2 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/IgnoreErrorSkipStep.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/IgnoreErrorSkipStep.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, expect, beforeEach } from 'vitest'
 import { screen, fireEvent, waitFor } from '@testing-library/react'
 
@@ -15,6 +14,7 @@ import { SelectRecoveryOption } from '../SelectRecoveryOption'
 import { clickButtonLabeled } from '../../__tests__/util'
 import { SkipStepInfo } from '/app/organisms/ErrorRecoveryFlows/shared'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('/app/organisms/ErrorRecoveryFlows/shared', async () => {
@@ -31,14 +31,14 @@ vi.mock('/app/organisms/ErrorRecoveryFlows/shared', async () => {
 })
 vi.mock('../SelectRecoveryOption')
 
-const render = (props: React.ComponentProps<typeof IgnoreErrorSkipStep>) => {
+const render = (props: ComponentProps<typeof IgnoreErrorSkipStep>) => {
   return renderWithProviders(<IgnoreErrorSkipStep {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 const renderIgnoreErrorStepHome = (
-  props: React.ComponentProps<typeof IgnoreErrorStepHome>
+  props: ComponentProps<typeof IgnoreErrorStepHome>
 ) => {
   return renderWithProviders(<IgnoreErrorStepHome {...props} />, {
     i18nInstance: i18n,
@@ -46,7 +46,7 @@ const renderIgnoreErrorStepHome = (
 }
 
 describe('IgnoreErrorSkipStep', () => {
-  let props: React.ComponentProps<typeof IgnoreErrorSkipStep>
+  let props: ComponentProps<typeof IgnoreErrorSkipStep>
 
   beforeEach(() => {
     props = {
@@ -98,7 +98,7 @@ describe('IgnoreErrorSkipStep', () => {
 })
 
 describe('IgnoreErrorStepHome', () => {
-  let props: React.ComponentProps<typeof IgnoreErrorStepHome>
+  let props: ComponentProps<typeof IgnoreErrorStepHome>
   let mockIgnoreErrorKindThisRun: Mock
   let mockProceedToRouteAndStep: Mock
   let mockGoBackPrevStep: Mock
@@ -184,7 +184,7 @@ describe('IgnoreErrorStepHome', () => {
 })
 
 describe('IgnoreOptions', () => {
-  let props: React.ComponentProps<typeof IgnoreOptions>
+  let props: ComponentProps<typeof IgnoreOptions>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/ManageTips.test.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/ManageTips.test.tsx
index 941b19081c7..b047f7a463b 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/ManageTips.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/ManageTips.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, expect, beforeEach } from 'vitest'
 import {
   screen,
@@ -18,6 +17,7 @@ import { DT_ROUTES } from '/app/organisms/DropTipWizardFlows/constants'
 import { SelectRecoveryOption } from '../SelectRecoveryOption'
 import { clickButtonLabeled } from '../../__tests__/util'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 import type { PipetteModelSpecs } from '@opentrons/shared-data'
 
@@ -34,14 +34,14 @@ const MOCK_ACTUAL_PIPETTE = {
   },
 } as PipetteModelSpecs
 
-const render = (props: React.ComponentProps<typeof ManageTips>) => {
+const render = (props: ComponentProps<typeof ManageTips>) => {
   return renderWithProviders(<ManageTips {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ManageTips', () => {
-  let props: React.ComponentProps<typeof ManageTips>
+  let props: ComponentProps<typeof ManageTips>
   let mockProceedNextStep: Mock
   let mockProceedToRouteAndStep: Mock
   let mockhandleMotionRouting: Mock
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/ManualMoveLwAndSkip.test.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/ManualMoveLwAndSkip.test.tsx
index 48f8615cf81..8cc5285e31a 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/ManualMoveLwAndSkip.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/ManualMoveLwAndSkip.test.tsx
@@ -6,7 +6,7 @@ import { i18n } from '/app/i18n'
 import { ManualMoveLwAndSkip } from '../ManualMoveLwAndSkip'
 import { RECOVERY_MAP } from '../../constants'
 
-import type * as React from 'react'
+import type { ComponentProps } from 'react'
 
 vi.mock('../../shared', () => ({
   GripperIsHoldingLabware: vi.fn(() => (
@@ -23,7 +23,7 @@ vi.mock('../SelectRecoveryOption', () => ({
 }))
 
 describe('ManualMoveLwAndSkip', () => {
-  let props: React.ComponentProps<typeof ManualMoveLwAndSkip>
+  let props: ComponentProps<typeof ManualMoveLwAndSkip>
 
   beforeEach(() => {
     props = {
@@ -34,7 +34,7 @@ describe('ManualMoveLwAndSkip', () => {
     } as any
   })
 
-  const render = (props: React.ComponentProps<typeof ManualMoveLwAndSkip>) => {
+  const render = (props: ComponentProps<typeof ManualMoveLwAndSkip>) => {
     return renderWithProviders(<ManualMoveLwAndSkip {...props} />, {
       i18nInstance: i18n,
     })[0]
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/ManualReplaceLwAndRetry.test.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/ManualReplaceLwAndRetry.test.tsx
index fb47ccb5f2f..0d25fcda029 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/ManualReplaceLwAndRetry.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/ManualReplaceLwAndRetry.test.tsx
@@ -6,7 +6,7 @@ import { i18n } from '/app/i18n'
 import { ManualReplaceLwAndRetry } from '../ManualReplaceLwAndRetry'
 import { RECOVERY_MAP } from '../../constants'
 
-import type * as React from 'react'
+import type { ComponentProps } from 'react'
 
 vi.mock('../../shared', () => ({
   GripperIsHoldingLabware: vi.fn(() => (
@@ -23,7 +23,7 @@ vi.mock('../SelectRecoveryOption', () => ({
 }))
 
 describe('ManualReplaceLwAndRetry', () => {
-  let props: React.ComponentProps<typeof ManualReplaceLwAndRetry>
+  let props: ComponentProps<typeof ManualReplaceLwAndRetry>
 
   beforeEach(() => {
     props = {
@@ -35,9 +35,7 @@ describe('ManualReplaceLwAndRetry', () => {
     } as any
   })
 
-  const render = (
-    props: React.ComponentProps<typeof ManualReplaceLwAndRetry>
-  ) => {
+  const render = (props: ComponentProps<typeof ManualReplaceLwAndRetry>) => {
     return renderWithProviders(<ManualReplaceLwAndRetry {...props} />, {
       i18nInstance: i18n,
     })[0]
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/RetryNewTips.test.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/RetryNewTips.test.tsx
index dcee4c10c56..cfd55c45d77 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/RetryNewTips.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/RetryNewTips.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, expect, beforeEach, afterEach } from 'vitest'
 import { screen, waitFor } from '@testing-library/react'
 
@@ -10,6 +9,7 @@ import { RECOVERY_MAP } from '../../constants'
 import { SelectRecoveryOption } from '../SelectRecoveryOption'
 import { clickButtonLabeled } from '../../__tests__/util'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('/app/molecules/Command')
@@ -23,14 +23,14 @@ vi.mock('../../shared', async () => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof RetryNewTips>) => {
+const render = (props: ComponentProps<typeof RetryNewTips>) => {
   return renderWithProviders(<RetryNewTips {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 const renderRetryWithNewTips = (
-  props: React.ComponentProps<typeof RetryWithNewTips>
+  props: ComponentProps<typeof RetryWithNewTips>
 ) => {
   return renderWithProviders(<RetryWithNewTips {...props} />, {
     i18nInstance: i18n,
@@ -38,7 +38,7 @@ const renderRetryWithNewTips = (
 }
 
 describe('RetryNewTips', () => {
-  let props: React.ComponentProps<typeof RetryNewTips>
+  let props: ComponentProps<typeof RetryNewTips>
   let mockProceedToRouteAndStep: Mock
 
   beforeEach(() => {
@@ -121,7 +121,7 @@ describe('RetryNewTips', () => {
 })
 
 describe('RetryWithNewTips', () => {
-  let props: React.ComponentProps<typeof RetryWithNewTips>
+  let props: ComponentProps<typeof RetryWithNewTips>
   let mockhandleMotionRouting: Mock
   let mockRetryFailedCommand: Mock
   let mockResumeRun: Mock
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/RetrySameTips.test.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/RetrySameTips.test.tsx
index 4514c9cc350..7457b50f824 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/RetrySameTips.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/RetrySameTips.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, expect, beforeEach, afterEach } from 'vitest'
 import { screen, waitFor } from '@testing-library/react'
 
@@ -10,19 +9,20 @@ import { RECOVERY_MAP } from '../../constants'
 import { SelectRecoveryOption } from '../SelectRecoveryOption'
 import { clickButtonLabeled } from '../../__tests__/util'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('/app/molecules/Command')
 vi.mock('../SelectRecoveryOption')
 
-const render = (props: React.ComponentProps<typeof RetrySameTips>) => {
+const render = (props: ComponentProps<typeof RetrySameTips>) => {
   return renderWithProviders(<RetrySameTips {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 const renderRetrySameTipsInfo = (
-  props: React.ComponentProps<typeof RetrySameTipsInfo>
+  props: ComponentProps<typeof RetrySameTipsInfo>
 ) => {
   return renderWithProviders(<RetrySameTipsInfo {...props} />, {
     i18nInstance: i18n,
@@ -30,7 +30,7 @@ const renderRetrySameTipsInfo = (
 }
 
 describe('RetrySameTips', () => {
-  let props: React.ComponentProps<typeof RetrySameTips>
+  let props: ComponentProps<typeof RetrySameTips>
 
   beforeEach(() => {
     props = {
@@ -72,7 +72,7 @@ describe('RetrySameTips', () => {
 })
 
 describe('RetrySameTipsInfo', () => {
-  let props: React.ComponentProps<typeof RetrySameTipsInfo>
+  let props: ComponentProps<typeof RetrySameTipsInfo>
   let mockhandleMotionRouting: Mock
   let mockRetryFailedCommand: Mock
   let mockResumeRun: Mock
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/RetryStep.test.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/RetryStep.test.tsx
index ec39f5b7c18..f972275c224 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/RetryStep.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/RetryStep.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, afterEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -9,17 +8,19 @@ import { RetryStep } from '../RetryStep'
 import { RECOVERY_MAP } from '../../constants'
 import { SelectRecoveryOption } from '../SelectRecoveryOption'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/molecules/Command')
 vi.mock('../SelectRecoveryOption')
 
-const render = (props: React.ComponentProps<typeof RetryStep>) => {
+const render = (props: ComponentProps<typeof RetryStep>) => {
   return renderWithProviders(<RetryStep {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('RetryStep', () => {
-  let props: React.ComponentProps<typeof RetryStep>
+  let props: ComponentProps<typeof RetryStep>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/SelectRecoveryOptions.test.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/SelectRecoveryOptions.test.tsx
index 62fe8eea3c8..caa67196866 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/SelectRecoveryOptions.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/SelectRecoveryOptions.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, describe, it, expect, beforeEach } from 'vitest'
 import { screen, fireEvent } from '@testing-library/react'
 import { when } from 'vitest-when'
@@ -23,10 +22,11 @@ import {
 import { RECOVERY_MAP, ERROR_KINDS } from '../../constants'
 import { clickButtonLabeled } from '../../__tests__/util'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 const renderSelectRecoveryOption = (
-  props: React.ComponentProps<typeof SelectRecoveryOption>
+  props: ComponentProps<typeof SelectRecoveryOption>
 ) => {
   return renderWithProviders(
     <SelectRecoveryOption {...{ ...mockRecoveryContentProps, ...props }} />,
@@ -37,7 +37,7 @@ const renderSelectRecoveryOption = (
 }
 
 const renderRecoveryOptions = (
-  props: React.ComponentProps<typeof RecoveryOptions>
+  props: ComponentProps<typeof RecoveryOptions>
 ) => {
   return renderWithProviders(<RecoveryOptions {...props} />, {
     i18nInstance: i18n,
@@ -45,7 +45,7 @@ const renderRecoveryOptions = (
 }
 describe('SelectRecoveryOption', () => {
   const { RETRY_STEP, RETRY_NEW_TIPS } = RECOVERY_MAP
-  let props: React.ComponentProps<typeof SelectRecoveryOption>
+  let props: ComponentProps<typeof SelectRecoveryOption>
   let mockProceedToRouteAndStep: Mock
   let mockSetSelectedRecoveryOption: Mock
   let mockGetRecoveryOptionCopy: Mock
@@ -253,7 +253,7 @@ describe('SelectRecoveryOption', () => {
   })
 })
 describe('RecoveryOptions', () => {
-  let props: React.ComponentProps<typeof RecoveryOptions>
+  let props: ComponentProps<typeof RecoveryOptions>
   let mockSetSelectedRoute: Mock
   let mockGetRecoveryOptionCopy: Mock
 
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/SkipStepNewTips.test.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/SkipStepNewTips.test.tsx
index 09afa086dca..a492184cbc7 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/SkipStepNewTips.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/SkipStepNewTips.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, expect, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -9,6 +8,7 @@ import { SkipStepNewTips } from '../SkipStepNewTips'
 import { RECOVERY_MAP } from '../../constants'
 import { SelectRecoveryOption } from '../SelectRecoveryOption'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('/app/molecules/Command')
@@ -23,14 +23,14 @@ vi.mock('../../shared', async () => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof SkipStepNewTips>) => {
+const render = (props: ComponentProps<typeof SkipStepNewTips>) => {
   return renderWithProviders(<SkipStepNewTips {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('SkipStepNewTips', () => {
-  let props: React.ComponentProps<typeof SkipStepNewTips>
+  let props: ComponentProps<typeof SkipStepNewTips>
   let mockProceedToRouteAndStep: Mock
 
   beforeEach(() => {
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/SkipStepSameTips.test.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/SkipStepSameTips.test.tsx
index 157825b3322..eb716694d68 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/SkipStepSameTips.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/SkipStepSameTips.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -10,18 +9,20 @@ import { RECOVERY_MAP } from '../../constants'
 import { SelectRecoveryOption } from '../SelectRecoveryOption'
 import { SkipStepInfo } from '/app/organisms/ErrorRecoveryFlows/shared'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/molecules/Command')
 vi.mock('/app/organisms/ErrorRecoveryFlows/shared')
 vi.mock('../SelectRecoveryOption')
 
-const render = (props: React.ComponentProps<typeof SkipStepSameTips>) => {
+const render = (props: ComponentProps<typeof SkipStepSameTips>) => {
   return renderWithProviders(<SkipStepSameTips {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('SkipStepSameTips', () => {
-  let props: React.ComponentProps<typeof SkipStepSameTips>
+  let props: ComponentProps<typeof SkipStepSameTips>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ErrorRecoveryFlows/__tests__/ErrorRecoveryFlows.test.tsx b/app/src/organisms/ErrorRecoveryFlows/__tests__/ErrorRecoveryFlows.test.tsx
index 2e425b73495..53bc8c15a8b 100644
--- a/app/src/organisms/ErrorRecoveryFlows/__tests__/ErrorRecoveryFlows.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/__tests__/ErrorRecoveryFlows.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, describe, expect, it, beforeEach } from 'vitest'
 import { screen, renderHook } from '@testing-library/react'
 
@@ -24,6 +23,7 @@ import { useERWizard, ErrorRecoveryWizard } from '../ErrorRecoveryWizard'
 import { useRecoverySplash, RecoverySplash } from '../RecoverySplash'
 import { useRunLoadedLabwareDefinitionsByUri } from '/app/resources/runs'
 
+import type { ComponentProps } from 'react'
 import type { RunStatus } from '@opentrons/api-client'
 
 vi.mock('../ErrorRecoveryWizard')
@@ -128,14 +128,14 @@ describe('useErrorRecoveryFlows', () => {
   })
 })
 
-const render = (props: React.ComponentProps<typeof ErrorRecoveryFlows>) => {
+const render = (props: ComponentProps<typeof ErrorRecoveryFlows>) => {
   return renderWithProviders(<ErrorRecoveryFlows {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ErrorRecoveryFlows', () => {
-  let props: React.ComponentProps<typeof ErrorRecoveryFlows>
+  let props: ComponentProps<typeof ErrorRecoveryFlows>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ErrorRecoveryFlows/__tests__/ErrorRecoveryWizard.test.tsx b/app/src/organisms/ErrorRecoveryFlows/__tests__/ErrorRecoveryWizard.test.tsx
index d97072e45f3..1f358fc574c 100644
--- a/app/src/organisms/ErrorRecoveryFlows/__tests__/ErrorRecoveryWizard.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/__tests__/ErrorRecoveryWizard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, describe, it, expect, beforeEach } from 'vitest'
 import { renderHook, act, screen } from '@testing-library/react'
 
@@ -35,6 +34,8 @@ import {
   RecoveryDoorOpenSpecial,
 } from '../shared'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../RecoveryOptions')
 vi.mock('../RecoveryInProgress')
 vi.mock('../RecoveryError')
@@ -96,7 +97,7 @@ describe('useERWizard', () => {
 })
 
 const renderRecoveryComponent = (
-  props: React.ComponentProps<typeof ErrorRecoveryComponent>
+  props: ComponentProps<typeof ErrorRecoveryComponent>
 ) => {
   return renderWithProviders(<ErrorRecoveryComponent {...props} />, {
     i18nInstance: i18n,
@@ -104,7 +105,7 @@ const renderRecoveryComponent = (
 }
 
 describe('ErrorRecoveryComponent', () => {
-  let props: React.ComponentProps<typeof ErrorRecoveryComponent>
+  let props: ComponentProps<typeof ErrorRecoveryComponent>
 
   beforeEach(() => {
     props = mockRecoveryContentProps
@@ -158,7 +159,7 @@ describe('ErrorRecoveryComponent', () => {
 })
 
 const renderRecoveryContent = (
-  props: React.ComponentProps<typeof ErrorRecoveryContent>
+  props: ComponentProps<typeof ErrorRecoveryContent>
 ) => {
   return renderWithProviders(<ErrorRecoveryContent {...props} />, {
     i18nInstance: i18n,
@@ -192,7 +193,7 @@ describe('ErrorRecoveryContent', () => {
     HOME_AND_RETRY,
   } = RECOVERY_MAP
 
-  let props: React.ComponentProps<typeof ErrorRecoveryContent>
+  let props: ComponentProps<typeof ErrorRecoveryContent>
 
   beforeEach(() => {
     props = mockRecoveryContentProps
diff --git a/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryDoorOpen.test.tsx b/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryDoorOpen.test.tsx
index a9fc92e1b84..57b0eff70a9 100644
--- a/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryDoorOpen.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryDoorOpen.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 
 import { screen } from '@testing-library/react'
@@ -10,16 +9,17 @@ import { i18n } from '/app/i18n'
 import { RecoveryDoorOpen } from '../RecoveryDoorOpen'
 import { clickButtonLabeled } from './util'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
-const render = (props: React.ComponentProps<typeof RecoveryDoorOpen>) => {
+const render = (props: ComponentProps<typeof RecoveryDoorOpen>) => {
   return renderWithProviders(<RecoveryDoorOpen {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('RecoveryDoorOpen', () => {
-  let props: React.ComponentProps<typeof RecoveryDoorOpen>
+  let props: ComponentProps<typeof RecoveryDoorOpen>
   let mockResumeRecovery: Mock
   let mockProceedToRouteAndStep: Mock
 
diff --git a/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryError.test.tsx b/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryError.test.tsx
index f46f3f949ba..9d19b32d788 100644
--- a/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryError.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryError.test.tsx
@@ -1,5 +1,4 @@
 /* eslint-disable testing-library/prefer-presence-queries */
-import type * as React from 'react'
 import { describe, it, vi, expect, beforeEach } from 'vitest'
 import { screen, fireEvent, waitFor } from '@testing-library/react'
 
@@ -9,9 +8,10 @@ import { i18n } from '/app/i18n'
 import { RecoveryError } from '../RecoveryError'
 import { RECOVERY_MAP } from '../constants'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
-const render = (props: React.ComponentProps<typeof RecoveryError>) => {
+const render = (props: ComponentProps<typeof RecoveryError>) => {
   return renderWithProviders(<RecoveryError {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -20,7 +20,7 @@ const render = (props: React.ComponentProps<typeof RecoveryError>) => {
 const { ERROR_WHILE_RECOVERING } = RECOVERY_MAP
 
 describe('RecoveryError', () => {
-  let props: React.ComponentProps<typeof RecoveryError>
+  let props: ComponentProps<typeof RecoveryError>
   let proceedToRouteAndStepMock: Mock
   let getRecoverOptionCopyMock: Mock
   let handleMotionRoutingMock: Mock
diff --git a/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryInProgress.test.tsx b/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryInProgress.test.tsx
index 2dfa5711644..b9c6149a696 100644
--- a/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryInProgress.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryInProgress.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { beforeEach, describe, it, vi, afterEach, expect } from 'vitest'
 import { act, renderHook, screen } from '@testing-library/react'
 
@@ -12,7 +11,9 @@ import {
 } from '../RecoveryInProgress'
 import { RECOVERY_MAP } from '../constants'
 
-const render = (props: React.ComponentProps<typeof RecoveryInProgress>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof RecoveryInProgress>) => {
   return renderWithProviders(<RecoveryInProgress {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -28,7 +29,7 @@ describe('RecoveryInProgress', () => {
     ROBOT_SKIPPING_STEP,
     ROBOT_RELEASING_LABWARE,
   } = RECOVERY_MAP
-  let props: React.ComponentProps<typeof RecoveryInProgress>
+  let props: ComponentProps<typeof RecoveryInProgress>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoverySplash.test.tsx b/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoverySplash.test.tsx
index 901ab22e158..17b7f9fd24d 100644
--- a/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoverySplash.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoverySplash.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { fireEvent, screen, waitFor, renderHook } from '@testing-library/react'
@@ -21,6 +20,7 @@ import { StepInfo } from '../shared'
 import { useToaster } from '../../ToasterOven'
 import { clickButtonLabeled } from './util'
 
+import type { ComponentProps, FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 
 vi.mock('/app/redux/config')
@@ -30,7 +30,7 @@ vi.mock('../../ToasterOven')
 const store: Store<any> = createStore(vi.fn(), {})
 
 describe('useRunPausedSplash', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     vi.mocked(getIsOnDevice).mockReturnValue(true)
     const queryClient = new QueryClient()
@@ -65,7 +65,7 @@ describe('useRunPausedSplash', () => {
   })
 })
 
-const render = (props: React.ComponentProps<typeof RecoverySplash>) => {
+const render = (props: ComponentProps<typeof RecoverySplash>) => {
   return renderWithProviders(
     <MemoryRouter>
       <RecoverySplash {...props} />
@@ -77,7 +77,7 @@ const render = (props: React.ComponentProps<typeof RecoverySplash>) => {
 }
 
 describe('RecoverySplash', () => {
-  let props: React.ComponentProps<typeof RecoverySplash>
+  let props: ComponentProps<typeof RecoverySplash>
   const mockToggleERWiz = vi.fn(() => Promise.resolve())
   const mockProceedToRouteAndStep = vi.fn()
   const mockHandleMotionRouting = vi.fn(() => Promise.resolve())
diff --git a/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryTakeover.test.tsx b/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryTakeover.test.tsx
index 1eec7782713..6a71c84ba3c 100644
--- a/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryTakeover.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryTakeover.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, expect, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -14,18 +13,19 @@ import { RecoveryTakeover, RecoveryTakeoverDesktop } from '../RecoveryTakeover'
 import { useUpdateClientDataRecovery } from '/app/resources/client_data'
 import { clickButtonLabeled } from './util'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('/app/resources/client_data')
 
-const render = (props: React.ComponentProps<typeof RecoveryTakeover>) => {
+const render = (props: ComponentProps<typeof RecoveryTakeover>) => {
   return renderWithProviders(<RecoveryTakeover {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('RecoveryTakeover', () => {
-  let props: React.ComponentProps<typeof RecoveryTakeover>
+  let props: ComponentProps<typeof RecoveryTakeover>
   let mockClearClientData: Mock
 
   beforeEach(() => {
@@ -91,7 +91,7 @@ describe('RecoveryTakeover', () => {
 })
 
 describe('RecoveryTakeoverDesktop', () => {
-  let props: React.ComponentProps<typeof RecoveryTakeoverDesktop>
+  let props: ComponentProps<typeof RecoveryTakeoverDesktop>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ErrorRecoveryFlows/hooks/__tests__/useRecoveryOptionCopy.test.tsx b/app/src/organisms/ErrorRecoveryFlows/hooks/__tests__/useRecoveryOptionCopy.test.tsx
index 11e8a574246..0ec262c3f41 100644
--- a/app/src/organisms/ErrorRecoveryFlows/hooks/__tests__/useRecoveryOptionCopy.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/hooks/__tests__/useRecoveryOptionCopy.test.tsx
@@ -1,5 +1,3 @@
-import type * as React from 'react'
-
 import { describe, it } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -10,6 +8,8 @@ import type { ErrorKind, RecoveryRoute } from '../../types'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 
+import type { ComponentProps } from 'react'
+
 function MockRenderCmpt({
   route,
   errorKind,
@@ -26,7 +26,7 @@ function MockRenderCmpt({
   )
 }
 
-const render = (props: React.ComponentProps<typeof MockRenderCmpt>) => {
+const render = (props: ComponentProps<typeof MockRenderCmpt>) => {
   return renderWithProviders(<MockRenderCmpt {...props} />, {
     i18nInstance: i18n,
   })[0]
diff --git a/app/src/organisms/ErrorRecoveryFlows/hooks/__tests__/useRecoveryToasts.test.tsx b/app/src/organisms/ErrorRecoveryFlows/hooks/__tests__/useRecoveryToasts.test.tsx
index 085551f42e7..1ce852e86aa 100644
--- a/app/src/organisms/ErrorRecoveryFlows/hooks/__tests__/useRecoveryToasts.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/hooks/__tests__/useRecoveryToasts.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, describe, it, expect, beforeEach } from 'vitest'
 import { I18nextProvider } from 'react-i18next'
 import { i18n } from '/app/i18n'
@@ -16,6 +15,7 @@ import { RECOVERY_MAP } from '../../constants'
 import { useToaster } from '../../../ToasterOven'
 import { useCommandTextString } from '/app/local-resources/commands'
 
+import type { ReactElement } from 'react'
 import type { Mock } from 'vitest'
 import type { BuildToast } from '../useRecoveryToasts'
 
@@ -42,7 +42,7 @@ const DEFAULT_PROPS: BuildToast = {
 }
 
 // Utility function for rendering with I18nextProvider
-const renderWithI18n = (component: React.ReactElement) => {
+const renderWithI18n = (component: ReactElement) => {
   return render(<I18nextProvider i18n={i18n}>{component}</I18nextProvider>)
 }
 
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/LeftColumnLabwareInfo.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/LeftColumnLabwareInfo.tsx
index 87cdac57255..c6fa3623cf4 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/LeftColumnLabwareInfo.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/LeftColumnLabwareInfo.tsx
@@ -1,11 +1,11 @@
 import { InterventionContent } from '/app/molecules/InterventionModal/InterventionContent'
 
-import type * as React from 'react'
+import type { ComponentProps } from 'react'
 import type { RecoveryContentProps } from '../types'
 
 type LeftColumnLabwareInfoProps = RecoveryContentProps & {
   title: string
-  type: React.ComponentProps<typeof InterventionContent>['infoProps']['type']
+  type: ComponentProps<typeof InterventionContent>['infoProps']['type']
   /* Renders a warning InlineNotification if provided. */
   bannerText?: string
 }
@@ -24,7 +24,7 @@ export function LeftColumnLabwareInfo({
   } = failedLabwareUtils
   const { displayNameNewLoc, displayNameCurrentLoc } = failedLabwareLocations
 
-  const buildNewLocation = (): React.ComponentProps<
+  const buildNewLocation = (): ComponentProps<
     typeof InterventionContent
   >['infoProps']['newLocationProps'] =>
     displayNameNewLoc != null
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryContentWrapper.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryContentWrapper.tsx
index 9274079897f..d7c2abd900f 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryContentWrapper.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryContentWrapper.tsx
@@ -1,7 +1,6 @@
 // TODO: replace this by making these props true of interventionmodal content wrappers
 // once error recovery uses interventionmodal consistently
 
-import type * as React from 'react'
 import { css } from 'styled-components'
 import {
   DIRECTION_COLUMN,
@@ -18,19 +17,21 @@ import {
 } from '/app/molecules/InterventionModal'
 import { RecoveryFooterButtons } from './RecoveryFooterButtons'
 
+import type { ComponentProps, ReactNode } from 'react'
+
 interface SingleColumnContentWrapperProps {
-  children: React.ReactNode
-  footerDetails?: React.ComponentProps<typeof RecoveryFooterButtons>
+  children: ReactNode
+  footerDetails?: ComponentProps<typeof RecoveryFooterButtons>
 }
 
 interface TwoColumnContentWrapperProps {
-  children: [React.ReactNode, React.ReactNode]
-  footerDetails?: React.ComponentProps<typeof RecoveryFooterButtons>
+  children: [ReactNode, ReactNode]
+  footerDetails?: ComponentProps<typeof RecoveryFooterButtons>
 }
 
 interface OneOrTwoColumnContentWrapperProps {
-  children: [React.ReactNode, React.ReactNode]
-  footerDetails?: React.ComponentProps<typeof RecoveryFooterButtons>
+  children: [ReactNode, ReactNode]
+  footerDetails?: ComponentProps<typeof RecoveryFooterButtons>
 }
 // For flex-direction: column recovery content with one column only.
 export function RecoverySingleColumnContentWrapper({
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryInterventionModal.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryInterventionModal.tsx
index 82974023805..73ac8497deb 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryInterventionModal.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryInterventionModal.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { createPortal } from 'react-dom'
 import { css } from 'styled-components'
 
@@ -13,11 +12,12 @@ import {
 import { InterventionModal } from '/app/molecules/InterventionModal'
 import { getModalPortalEl, getTopPortalEl } from '/app/App/portal'
 
+import type { ComponentProps } from 'react'
 import type { ModalType } from '/app/molecules/InterventionModal'
 import type { DesktopSizeType } from '../types'
 
 export type RecoveryInterventionModalProps = Omit<
-  React.ComponentProps<typeof InterventionModal>,
+  ComponentProps<typeof InterventionModal>,
   'type'
 > & {
   /* If on desktop, specifies the hard-coded dimensions height of the modal. */
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/StepInfo.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/StepInfo.tsx
index bbc12ce0429..ba68ee88507 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/StepInfo.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/StepInfo.tsx
@@ -1,11 +1,10 @@
-import type * as React from 'react'
-
 import { useTranslation } from 'react-i18next'
 
 import { Flex, DISPLAY_INLINE, StyledText } from '@opentrons/components'
 
 import { CommandText } from '/app/molecules/Command'
 
+import type { ComponentProps } from 'react'
 import type { StyleProps } from '@opentrons/components'
 import type { RecoveryContentProps } from '../types'
 
@@ -15,8 +14,8 @@ interface StepInfoProps extends StyleProps {
   robotType: RecoveryContentProps['robotType']
   protocolAnalysis: RecoveryContentProps['protocolAnalysis']
   allRunDefs: RecoveryContentProps['allRunDefs']
-  desktopStyle?: React.ComponentProps<typeof StyledText>['desktopStyle']
-  oddStyle?: React.ComponentProps<typeof StyledText>['oddStyle']
+  desktopStyle?: ComponentProps<typeof StyledText>['desktopStyle']
+  oddStyle?: ComponentProps<typeof StyledText>['oddStyle']
 }
 
 export function StepInfo({
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/TwoColLwInfoAndDeck.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/TwoColLwInfoAndDeck.tsx
index 9bf8f12bc22..ad7ac489d7c 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/TwoColLwInfoAndDeck.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/TwoColLwInfoAndDeck.tsx
@@ -1,9 +1,9 @@
 import {
-  Flex,
-  MoveLabwareOnDeck,
   COLORS,
-  Module,
+  Flex,
   LabwareRender,
+  Module,
+  MoveLabwareOnDeck,
 } from '@opentrons/components'
 import { inferModuleOrientationFromXCoordinate } from '@opentrons/shared-data'
 
@@ -14,7 +14,7 @@ import { RecoveryFooterButtons } from './RecoveryFooterButtons'
 import { LeftColumnLabwareInfo } from './LeftColumnLabwareInfo'
 import { RECOVERY_MAP } from '../constants'
 
-import type * as React from 'react'
+import type { ComponentProps } from 'react'
 import type { RecoveryContentProps } from '../types'
 import type { InterventionContent } from '/app/molecules/InterventionModal/InterventionContent'
 
@@ -100,7 +100,7 @@ export function TwoColLwInfoAndDeck(
     }
   }
 
-  const buildType = (): React.ComponentProps<
+  const buildType = (): ComponentProps<
     typeof InterventionContent
   >['infoProps']['type'] => {
     switch (selectedRecoveryOption) {
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/ErrorDetailsModal.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/ErrorDetailsModal.test.tsx
index ce754df9cfa..da76c3e09d9 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/ErrorDetailsModal.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/ErrorDetailsModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, expect, vi } from 'vitest'
 import { screen, act, renderHook } from '@testing-library/react'
 
@@ -17,6 +16,8 @@ import {
   StallErrorBanner,
 } from '../ErrorDetailsModal'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('react-dom', () => ({
   ...vi.importActual('react-dom'),
   createPortal: vi.fn((element, container) => element),
@@ -47,14 +48,14 @@ describe('useErrorDetailsModal', () => {
   })
 })
 
-const render = (props: React.ComponentProps<typeof ErrorDetailsModal>) => {
+const render = (props: ComponentProps<typeof ErrorDetailsModal>) => {
   return renderWithProviders(<ErrorDetailsModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ErrorDetailsModal', () => {
-  let props: React.ComponentProps<typeof ErrorDetailsModal>
+  let props: ComponentProps<typeof ErrorDetailsModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/GripperIsHoldingLabware.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/GripperIsHoldingLabware.test.tsx
index 95af112fa58..adedca04009 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/GripperIsHoldingLabware.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/GripperIsHoldingLabware.test.tsx
@@ -10,13 +10,12 @@ import {
   GripperIsHoldingLabware,
   HOLDING_LABWARE_OPTIONS,
 } from '../GripperIsHoldingLabware'
+import { RECOVERY_MAP } from '/app/organisms/ErrorRecoveryFlows/constants'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
-import { RECOVERY_MAP } from '/app/organisms/ErrorRecoveryFlows/constants'
 
-const render = (
-  props: React.ComponentProps<typeof GripperIsHoldingLabware>
-) => {
+const render = (props: ComponentProps<typeof GripperIsHoldingLabware>) => {
   return renderWithProviders(<GripperIsHoldingLabware {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -26,7 +25,7 @@ let mockProceedToRouteAndStep: Mock
 let mockProceedNextStep: Mock
 
 describe('GripperIsHoldingLabware', () => {
-  let props: React.ComponentProps<typeof GripperIsHoldingLabware>
+  let props: ComponentProps<typeof GripperIsHoldingLabware>
   beforeEach(() => {
     mockProceedToRouteAndStep = vi.fn(() => Promise.resolve())
     mockProceedNextStep = vi.fn(() => Promise.resolve())
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/GripperReleaseLabware.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/GripperReleaseLabware.test.tsx
index 3bdd9f97819..91fdc3d6a9e 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/GripperReleaseLabware.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/GripperReleaseLabware.test.tsx
@@ -7,20 +7,21 @@ import { i18n } from '/app/i18n'
 import { mockRecoveryContentProps } from '/app/organisms/ErrorRecoveryFlows/__fixtures__'
 import { clickButtonLabeled } from '/app/organisms/ErrorRecoveryFlows/__tests__/util'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('/app/assets/videos/error-recovery/Gripper_Release.webm', () => ({
   default: 'mocked-animation-path.webm',
 }))
 
-const render = (props: React.ComponentProps<typeof GripperReleaseLabware>) => {
+const render = (props: ComponentProps<typeof GripperReleaseLabware>) => {
   return renderWithProviders(<GripperReleaseLabware {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('GripperReleaseLabware', () => {
-  let props: React.ComponentProps<typeof GripperReleaseLabware>
+  let props: ComponentProps<typeof GripperReleaseLabware>
   let mockHandleMotionRouting: Mock
 
   beforeEach(() => {
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/LeftColumnLabwareInfo.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/LeftColumnLabwareInfo.test.tsx
index f38e1e06922..c8ab8bc4ad6 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/LeftColumnLabwareInfo.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/LeftColumnLabwareInfo.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, expect, vi } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -8,16 +7,18 @@ import { i18n } from '/app/i18n'
 import { LeftColumnLabwareInfo } from '../LeftColumnLabwareInfo'
 import { InterventionContent } from '/app/molecules/InterventionModal/InterventionContent'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/molecules/InterventionModal/InterventionContent')
 
-const render = (props: React.ComponentProps<typeof LeftColumnLabwareInfo>) => {
+const render = (props: ComponentProps<typeof LeftColumnLabwareInfo>) => {
   return renderWithProviders(<LeftColumnLabwareInfo {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('LeftColumnLabwareInfo', () => {
-  let props: React.ComponentProps<typeof LeftColumnLabwareInfo>
+  let props: ComponentProps<typeof LeftColumnLabwareInfo>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/RecoveryDoorOpenSpecial.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/RecoveryDoorOpenSpecial.test.tsx
index 5cc4ae74b87..b54ccc649d7 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/RecoveryDoorOpenSpecial.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/RecoveryDoorOpenSpecial.test.tsx
@@ -11,11 +11,11 @@ import { i18n } from '/app/i18n'
 import { RecoveryDoorOpenSpecial } from '../RecoveryDoorOpenSpecial'
 import { RECOVERY_MAP } from '../../constants'
 
-import type * as React from 'react'
+import type { ComponentProps } from 'react'
 import { clickButtonLabeled } from '/app/organisms/ErrorRecoveryFlows/__tests__/util'
 
 describe('RecoveryDoorOpenSpecial', () => {
-  let props: React.ComponentProps<typeof RecoveryDoorOpenSpecial>
+  let props: ComponentProps<typeof RecoveryDoorOpenSpecial>
 
   beforeEach(() => {
     props = {
@@ -39,9 +39,7 @@ describe('RecoveryDoorOpenSpecial', () => {
     } as any
   })
 
-  const render = (
-    props: React.ComponentProps<typeof RecoveryDoorOpenSpecial>
-  ) => {
+  const render = (props: ComponentProps<typeof RecoveryDoorOpenSpecial>) => {
     return renderWithProviders(<RecoveryDoorOpenSpecial {...props} />, {
       i18nInstance: i18n,
     })[0]
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/RecoveryFooterButtons.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/RecoveryFooterButtons.test.tsx
index 6381d2b579a..6643dcf8021 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/RecoveryFooterButtons.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/RecoveryFooterButtons.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, describe, it, expect, beforeEach } from 'vitest'
 import { screen, fireEvent } from '@testing-library/react'
 
@@ -8,16 +7,17 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { RecoveryFooterButtons } from '../RecoveryFooterButtons'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
-const render = (props: React.ComponentProps<typeof RecoveryFooterButtons>) => {
+const render = (props: ComponentProps<typeof RecoveryFooterButtons>) => {
   return renderWithProviders(<RecoveryFooterButtons {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('RecoveryFooterButtons', () => {
-  let props: React.ComponentProps<typeof RecoveryFooterButtons>
+  let props: ComponentProps<typeof RecoveryFooterButtons>
   let mockPrimaryBtnOnClick: Mock
   let mockSecondaryBtnOnClick: Mock
   let mockTertiaryBtnOnClick: Mock
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/RetryStepInfo.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/RetryStepInfo.test.tsx
index 94f77910657..810cf1c00f1 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/RetryStepInfo.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/RetryStepInfo.test.tsx
@@ -7,10 +7,11 @@ import { RetryStepInfo } from '../RetryStepInfo'
 import { ERROR_KINDS, RECOVERY_MAP } from '../../constants'
 import { clickButtonLabeled } from '/app/organisms/ErrorRecoveryFlows/__tests__/util'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 describe('RetryStepInfo', () => {
-  let props: React.ComponentProps<typeof RetryStepInfo>
+  let props: ComponentProps<typeof RetryStepInfo>
   let mockHandleMotionRouting: Mock
   let mockRetryFailedCommand: Mock
   let mockResumeRun: Mock
@@ -33,7 +34,7 @@ describe('RetryStepInfo', () => {
     } as any
   })
 
-  const render = (props: React.ComponentProps<typeof RetryStepInfo>) => {
+  const render = (props: ComponentProps<typeof RetryStepInfo>) => {
     return renderWithProviders(<RetryStepInfo {...props} />, {
       i18nInstance: i18n,
     })[0]
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/SelectTips.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/SelectTips.test.tsx
index 08db6269c4d..425bf68b264 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/SelectTips.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/SelectTips.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, expect, beforeEach } from 'vitest'
 import { screen, fireEvent, waitFor } from '@testing-library/react'
 
@@ -9,19 +8,20 @@ import { SelectTips } from '../SelectTips'
 import { RECOVERY_MAP } from '../../constants'
 import { TipSelectionModal } from '../TipSelectionModal'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('../TipSelectionModal')
 vi.mock('../TipSelection')
 
-const render = (props: React.ComponentProps<typeof SelectTips>) => {
+const render = (props: ComponentProps<typeof SelectTips>) => {
   return renderWithProviders(<SelectTips {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('SelectTips', () => {
-  let props: React.ComponentProps<typeof SelectTips>
+  let props: ComponentProps<typeof SelectTips>
   let mockGoBackPrevStep: Mock
   let mockhandleMotionRouting: Mock
   let mockProceedNextStep: Mock
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/SkipStepInfo.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/SkipStepInfo.test.tsx
index 28ef4177648..0bd7b1a5a72 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/SkipStepInfo.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/SkipStepInfo.test.tsx
@@ -7,10 +7,11 @@ import { SkipStepInfo } from '../SkipStepInfo'
 import { RECOVERY_MAP } from '../../constants'
 import { clickButtonLabeled } from '/app/organisms/ErrorRecoveryFlows/__tests__/util'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 describe('SkipStepInfo', () => {
-  let props: React.ComponentProps<typeof SkipStepInfo>
+  let props: ComponentProps<typeof SkipStepInfo>
   let mockHandleMotionRouting: Mock
   let mockSkipFailedCommand: Mock
 
@@ -32,7 +33,7 @@ describe('SkipStepInfo', () => {
     } as any
   })
 
-  const render = (props: React.ComponentProps<typeof SkipStepInfo>) => {
+  const render = (props: ComponentProps<typeof SkipStepInfo>) => {
     return renderWithProviders(<SkipStepInfo {...props} />, {
       i18nInstance: i18n,
     })[0]
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/StepInfo.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/StepInfo.test.tsx
index d6fbb50c345..aefd143aee1 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/StepInfo.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/StepInfo.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -8,16 +7,18 @@ import { i18n } from '/app/i18n'
 import { StepInfo } from '../StepInfo'
 import { CommandText } from '/app/molecules/Command'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/molecules/Command')
 
-const render = (props: React.ComponentProps<typeof StepInfo>) => {
+const render = (props: ComponentProps<typeof StepInfo>) => {
   return renderWithProviders(<StepInfo {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('StepInfo', () => {
-  let props: React.ComponentProps<typeof StepInfo>
+  let props: ComponentProps<typeof StepInfo>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/TipSelection.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/TipSelection.test.tsx
index 9df7f8e02ec..c6bee4f8d55 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/TipSelection.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/TipSelection.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, expect, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -8,16 +7,18 @@ import { i18n } from '/app/i18n'
 import { TipSelection } from '../TipSelection'
 import { WellSelection } from '../../../WellSelection'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../../../WellSelection')
 
-const render = (props: React.ComponentProps<typeof TipSelection>) => {
+const render = (props: ComponentProps<typeof TipSelection>) => {
   return renderWithProviders(<TipSelection {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('TipSelection', () => {
-  let props: React.ComponentProps<typeof TipSelection>
+  let props: ComponentProps<typeof TipSelection>
   beforeEach(() => {
     props = {
       ...mockRecoveryContentProps,
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/TipSelectionModal.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/TipSelectionModal.test.tsx
index fed5a44d4ce..32711ec9762 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/TipSelectionModal.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/TipSelectionModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -8,16 +7,18 @@ import { i18n } from '/app/i18n'
 import { TipSelectionModal } from '../TipSelectionModal'
 import { TipSelection } from '../TipSelection'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../TipSelection')
 
-const render = (props: React.ComponentProps<typeof TipSelectionModal>) => {
+const render = (props: ComponentProps<typeof TipSelectionModal>) => {
   return renderWithProviders(<TipSelectionModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('TipSelectionModal', () => {
-  let props: React.ComponentProps<typeof TipSelectionModal>
+  let props: ComponentProps<typeof TipSelectionModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/TwoColLwInfoAndDeck.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/TwoColLwInfoAndDeck.test.tsx
index 0629038f800..e151cb11d7a 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/TwoColLwInfoAndDeck.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/TwoColLwInfoAndDeck.test.tsx
@@ -11,7 +11,7 @@ import { RECOVERY_MAP } from '../../constants'
 import { LeftColumnLabwareInfo } from '../LeftColumnLabwareInfo'
 import { getSlotNameAndLwLocFrom } from '../../hooks/useDeckMapUtils'
 
-import type * as React from 'react'
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('@opentrons/components', async () => {
@@ -26,14 +26,14 @@ vi.mock('../../hooks/useDeckMapUtils')
 
 let mockProceedNextStep: Mock
 
-const render = (props: React.ComponentProps<typeof TwoColLwInfoAndDeck>) => {
+const render = (props: ComponentProps<typeof TwoColLwInfoAndDeck>) => {
   return renderWithProviders(<TwoColLwInfoAndDeck {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('TwoColLwInfoAndDeck', () => {
-  let props: React.ComponentProps<typeof TwoColLwInfoAndDeck>
+  let props: ComponentProps<typeof TwoColLwInfoAndDeck>
 
   beforeEach(() => {
     mockProceedNextStep = vi.fn()
diff --git a/app/src/organisms/FirmwareUpdateModal/__tests__/FirmwareUpdateModal.test.tsx b/app/src/organisms/FirmwareUpdateModal/__tests__/FirmwareUpdateModal.test.tsx
index bb205f3f852..16aa35ec87d 100644
--- a/app/src/organisms/FirmwareUpdateModal/__tests__/FirmwareUpdateModal.test.tsx
+++ b/app/src/organisms/FirmwareUpdateModal/__tests__/FirmwareUpdateModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { act, screen, waitFor } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -10,6 +9,8 @@ import {
 } from '@opentrons/react-api-client'
 import { i18n } from '/app/i18n'
 import { FirmwareUpdateModal } from '..'
+
+import type { ComponentProps } from 'react'
 import type {
   BadPipette,
   PipetteData,
@@ -18,14 +19,14 @@ import type {
 
 vi.mock('@opentrons/react-api-client')
 
-const render = (props: React.ComponentProps<typeof FirmwareUpdateModal>) => {
+const render = (props: ComponentProps<typeof FirmwareUpdateModal>) => {
   return renderWithProviders(<FirmwareUpdateModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('FirmwareUpdateModal', () => {
-  let props: React.ComponentProps<typeof FirmwareUpdateModal>
+  let props: ComponentProps<typeof FirmwareUpdateModal>
   const refetch = vi.fn(() => Promise.resolve())
   const updateSubsystem = vi.fn(() => Promise.resolve())
   beforeEach(() => {
diff --git a/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateInProgressModal.test.tsx b/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateInProgressModal.test.tsx
index f2ce6047481..2e237468b3d 100644
--- a/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateInProgressModal.test.tsx
+++ b/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateInProgressModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'
@@ -6,14 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { UpdateInProgressModal } from '../UpdateInProgressModal'
 
-const render = (props: React.ComponentProps<typeof UpdateInProgressModal>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof UpdateInProgressModal>) => {
   return renderWithProviders(<UpdateInProgressModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('UpdateInProgressModal', () => {
-  let props: React.ComponentProps<typeof UpdateInProgressModal>
+  let props: ComponentProps<typeof UpdateInProgressModal>
   beforeEach(() => {
     props = {
       subsystem: 'pipette_right',
diff --git a/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateNeededModal.test.tsx b/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateNeededModal.test.tsx
index 53c91223b47..eb8e1cdcc5b 100644
--- a/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateNeededModal.test.tsx
+++ b/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateNeededModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -12,6 +11,7 @@ import { UpdateNeededModal } from '../UpdateNeededModal'
 import { UpdateInProgressModal } from '../UpdateInProgressModal'
 import { UpdateResultsModal } from '../UpdateResultsModal'
 
+import type { ComponentProps } from 'react'
 import type {
   BadPipette,
   SubsystemUpdateProgressData,
@@ -21,14 +21,14 @@ vi.mock('@opentrons/react-api-client')
 vi.mock('../UpdateInProgressModal')
 vi.mock('../UpdateResultsModal')
 
-const render = (props: React.ComponentProps<typeof UpdateNeededModal>) => {
+const render = (props: ComponentProps<typeof UpdateNeededModal>) => {
   return renderWithProviders(<UpdateNeededModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('UpdateNeededModal', () => {
-  let props: React.ComponentProps<typeof UpdateNeededModal>
+  let props: ComponentProps<typeof UpdateNeededModal>
   const refetch = vi.fn(() => Promise.resolve())
   const updateSubsystem = vi.fn(() =>
     Promise.resolve({
diff --git a/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateResultsModal.test.tsx b/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateResultsModal.test.tsx
index 29c5233db45..5c4f3f02473 100644
--- a/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateResultsModal.test.tsx
+++ b/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateResultsModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -6,14 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { UpdateResultsModal } from '../UpdateResultsModal'
 
-const render = (props: React.ComponentProps<typeof UpdateResultsModal>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof UpdateResultsModal>) => {
   return renderWithProviders(<UpdateResultsModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('UpdateResultsModal', () => {
-  let props: React.ComponentProps<typeof UpdateResultsModal>
+  let props: ComponentProps<typeof UpdateResultsModal>
   beforeEach(() => {
     props = {
       isSuccess: true,
diff --git a/app/src/organisms/GripperWizardFlows/MovePin.tsx b/app/src/organisms/GripperWizardFlows/MovePin.tsx
index 1cf5153eaa5..b4cb6ebcf25 100644
--- a/app/src/organisms/GripperWizardFlows/MovePin.tsx
+++ b/app/src/organisms/GripperWizardFlows/MovePin.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation, Trans } from 'react-i18next'
 import { EXTENSION } from '@opentrons/shared-data'
 import {
@@ -25,6 +24,7 @@ import movePinRearToStorage from '/app/assets/videos/gripper-wizards/PIN_FROM_RE
 import calibratingFrontJaw from '/app/assets/videos/gripper-wizards/CALIBRATING_FRONT_JAW.webm'
 import calibratingRearJaw from '/app/assets/videos/gripper-wizards/CALIBRATING_REAR_JAW.webm'
 
+import type { ReactNode } from 'react'
 import type { Coordinates } from '@opentrons/shared-data'
 import type { CreateMaintenanceCommand } from '/app/resources/runs'
 import type { GripperWizardStepProps, MovePinStep } from './types'
@@ -137,10 +137,10 @@ export const MovePin = (props: MovePinProps): JSX.Element | null => {
     [m in typeof movement]: {
       inProgressText: string
       header: string
-      body: React.ReactNode
+      body: ReactNode
       buttonText: string
-      prepImage: React.ReactNode
-      inProgressImage?: React.ReactNode
+      prepImage: ReactNode
+      inProgressImage?: ReactNode
     }
   } = {
     [MOVE_PIN_TO_FRONT_JAW]: {
diff --git a/app/src/organisms/GripperWizardFlows/__tests__/BeforeBeginning.test.tsx b/app/src/organisms/GripperWizardFlows/__tests__/BeforeBeginning.test.tsx
index 888e6ba30b2..da3b45eec62 100644
--- a/app/src/organisms/GripperWizardFlows/__tests__/BeforeBeginning.test.tsx
+++ b/app/src/organisms/GripperWizardFlows/__tests__/BeforeBeginning.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -8,15 +7,17 @@ import { RUN_ID_1 } from '/app/resources/runs/__fixtures__'
 import { BeforeBeginning } from '../BeforeBeginning'
 import { GRIPPER_FLOW_TYPES } from '../constants'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/molecules/InProgressModal/InProgressModal')
 
-const render = (props: React.ComponentProps<typeof BeforeBeginning>) => {
+const render = (props: ComponentProps<typeof BeforeBeginning>) => {
   return renderWithProviders(<BeforeBeginning {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 describe('BeforeBeginning', () => {
-  let props: React.ComponentProps<typeof BeforeBeginning>
+  let props: ComponentProps<typeof BeforeBeginning>
   beforeEach(() => {
     props = {
       goBack: vi.fn(),
diff --git a/app/src/organisms/GripperWizardFlows/__tests__/ExitConfirmation.test.tsx b/app/src/organisms/GripperWizardFlows/__tests__/ExitConfirmation.test.tsx
index 4b20f234bfb..871a58d1ba9 100644
--- a/app/src/organisms/GripperWizardFlows/__tests__/ExitConfirmation.test.tsx
+++ b/app/src/organisms/GripperWizardFlows/__tests__/ExitConfirmation.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, expect } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -7,12 +6,14 @@ import { i18n } from '/app/i18n'
 import { ExitConfirmation } from '../ExitConfirmation'
 import { GRIPPER_FLOW_TYPES } from '../constants'
 
+import type { ComponentProps } from 'react'
+
 describe('ExitConfirmation', () => {
   const mockBack = vi.fn()
   const mockExit = vi.fn()
 
   const render = (
-    props: Partial<React.ComponentProps<typeof ExitConfirmation>> = {}
+    props: Partial<ComponentProps<typeof ExitConfirmation>> = {}
   ) => {
     return renderWithProviders(
       <ExitConfirmation
diff --git a/app/src/organisms/GripperWizardFlows/__tests__/MountGripper.test.tsx b/app/src/organisms/GripperWizardFlows/__tests__/MountGripper.test.tsx
index cb2020c5bfe..f08462126cd 100644
--- a/app/src/organisms/GripperWizardFlows/__tests__/MountGripper.test.tsx
+++ b/app/src/organisms/GripperWizardFlows/__tests__/MountGripper.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -9,6 +8,8 @@ import { i18n } from '/app/i18n'
 import { MountGripper } from '../MountGripper'
 import { GRIPPER_FLOW_TYPES } from '../constants'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
 
 const mockRunId = 'fakeRunId'
@@ -19,9 +20,7 @@ describe('MountGripper', () => {
   let mockChainRunCommands: any
   let mockSetErrorMessage: any
 
-  const render = (
-    props: Partial<React.ComponentProps<typeof MountGripper>> = {}
-  ) => {
+  const render = (props: Partial<ComponentProps<typeof MountGripper>> = {}) => {
     return renderWithProviders(
       <MountGripper
         maintenanceRunId={mockRunId}
diff --git a/app/src/organisms/GripperWizardFlows/__tests__/MovePin.test.tsx b/app/src/organisms/GripperWizardFlows/__tests__/MovePin.test.tsx
index ecf3ef6f3c0..950a47655ef 100644
--- a/app/src/organisms/GripperWizardFlows/__tests__/MovePin.test.tsx
+++ b/app/src/organisms/GripperWizardFlows/__tests__/MovePin.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect, afterEach } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -13,6 +12,8 @@ import {
   REMOVE_PIN_FROM_REAR_JAW,
   SECTIONS,
 } from '../constants'
+
+import type { ComponentProps } from 'react'
 import type { CommandData } from '@opentrons/api-client'
 
 describe('MovePin', () => {
@@ -25,9 +26,7 @@ describe('MovePin', () => {
   const mockSetFrontJawOffset = vi.fn()
   const mockRunId = 'fakeRunId'
 
-  const render = (
-    props: Partial<React.ComponentProps<typeof MovePin>> = {}
-  ) => {
+  const render = (props: Partial<ComponentProps<typeof MovePin>> = {}) => {
     return renderWithProviders(
       <MovePin
         maintenanceRunId={mockRunId}
diff --git a/app/src/organisms/GripperWizardFlows/__tests__/Success.test.tsx b/app/src/organisms/GripperWizardFlows/__tests__/Success.test.tsx
index d071fda3c69..f4dfe01250f 100644
--- a/app/src/organisms/GripperWizardFlows/__tests__/Success.test.tsx
+++ b/app/src/organisms/GripperWizardFlows/__tests__/Success.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, expect } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -13,11 +12,11 @@ import {
   SUCCESSFULLY_DETACHED,
 } from '../constants'
 
+import type { ComponentProps } from 'react'
+
 describe('Success', () => {
   const mockProceed = vi.fn()
-  const render = (
-    props: Partial<React.ComponentProps<typeof Success>> = {}
-  ) => {
+  const render = (props: Partial<ComponentProps<typeof Success>> = {}) => {
     return renderWithProviders(
       <Success
         proceed={mockProceed}
diff --git a/app/src/organisms/GripperWizardFlows/__tests__/UnmountGripper.test.tsx b/app/src/organisms/GripperWizardFlows/__tests__/UnmountGripper.test.tsx
index 73c2d863366..88be05067b6 100644
--- a/app/src/organisms/GripperWizardFlows/__tests__/UnmountGripper.test.tsx
+++ b/app/src/organisms/GripperWizardFlows/__tests__/UnmountGripper.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
 
@@ -11,6 +10,8 @@ import { i18n } from '/app/i18n'
 import { UnmountGripper } from '../UnmountGripper'
 import { GRIPPER_FLOW_TYPES } from '../constants'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
 
 const mockRunId = 'fakeRunId'
@@ -21,7 +22,7 @@ describe('UnmountGripper', () => {
   let mockChainRunCommands: any
   let mockSetErrorMessage: any
   const render = (
-    props: Partial<React.ComponentProps<typeof UnmountGripper>> = {}
+    props: Partial<ComponentProps<typeof UnmountGripper>> = {}
   ) => {
     return renderWithProviders(
       <UnmountGripper
diff --git a/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleDesktopModalBody.test.tsx b/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleDesktopModalBody.test.tsx
index 41edc4439c6..a4bb0f1e1f8 100644
--- a/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleDesktopModalBody.test.tsx
+++ b/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleDesktopModalBody.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi } from 'vitest'
 import { when } from 'vitest-when'
@@ -9,13 +8,13 @@ import { IncompatibleModuleDesktopModalBody } from '../IncompatibleModuleDesktop
 import { useIsFlex } from '/app/redux-resources/robots'
 import * as Fixtures from '../__fixtures__'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux-resources/robots')
 
 const getRenderer = (isFlex: boolean) => {
   when(useIsFlex).calledWith('otie').thenReturn(isFlex)
-  return (
-    props: React.ComponentProps<typeof IncompatibleModuleDesktopModalBody>
-  ) => {
+  return (props: ComponentProps<typeof IncompatibleModuleDesktopModalBody>) => {
     return renderWithProviders(
       <IncompatibleModuleDesktopModalBody {...props} />,
       {
@@ -26,7 +25,7 @@ const getRenderer = (isFlex: boolean) => {
 }
 
 describe('IncompatibleModuleDesktopModalBody', () => {
-  let props: React.ComponentProps<typeof IncompatibleModuleDesktopModalBody>
+  let props: ComponentProps<typeof IncompatibleModuleDesktopModalBody>
   beforeEach(() => {
     props = {
       modules: [],
diff --git a/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleODDModalBody.test.tsx b/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleODDModalBody.test.tsx
index e2d4e1a2af0..9c59e9a821a 100644
--- a/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleODDModalBody.test.tsx
+++ b/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleODDModalBody.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -7,8 +6,10 @@ import { i18n } from '/app/i18n'
 import { IncompatibleModuleODDModalBody } from '../IncompatibleModuleODDModalBody'
 import * as Fixtures from '../__fixtures__'
 
+import type { ComponentProps } from 'react'
+
 const render = (
-  props: React.ComponentProps<typeof IncompatibleModuleODDModalBody>
+  props: ComponentProps<typeof IncompatibleModuleODDModalBody>
 ) => {
   return renderWithProviders(<IncompatibleModuleODDModalBody {...props} />, {
     i18nInstance: i18n,
@@ -16,7 +17,7 @@ const render = (
 }
 
 describe('IncompatibleModuleODDModalBody', () => {
-  let props: React.ComponentProps<typeof IncompatibleModuleODDModalBody>
+  let props: ComponentProps<typeof IncompatibleModuleODDModalBody>
   beforeEach(() => {
     props = {
       modules: [],
diff --git a/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleTakeover.test.tsx b/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleTakeover.test.tsx
index d3da5d17958..24e35265621 100644
--- a/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleTakeover.test.tsx
+++ b/app/src/organisms/IncompatibleModule/__tests__/IncompatibleModuleTakeover.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach, afterEach, expect, vi } from 'vitest'
 import { when } from 'vitest-when'
@@ -18,6 +17,8 @@ import {
 } from '/app/App/portal'
 import * as Fixtures from '../__fixtures__'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../hooks')
 vi.mock('../IncompatibleModuleODDModalBody')
 vi.mock('../IncompatibleModuleDesktopModalBody')
@@ -32,7 +33,7 @@ const getRenderer = (incompatibleModules: AttachedModule[]) => {
   vi.mocked(IncompatibleModuleDesktopModalBody).mockReturnValue(
     <div>TEST ELEMENT DESKTOP</div>
   )
-  return (props: React.ComponentProps<typeof IncompatibleModuleTakeover>) => {
+  return (props: ComponentProps<typeof IncompatibleModuleTakeover>) => {
     const [rendered] = renderWithProviders(
       <>
         <PortalRoot />
@@ -55,7 +56,7 @@ const getRenderer = (incompatibleModules: AttachedModule[]) => {
 }
 
 describe('IncompatibleModuleTakeover', () => {
-  let props: React.ComponentProps<typeof IncompatibleModuleTakeover>
+  let props: ComponentProps<typeof IncompatibleModuleTakeover>
   beforeEach(() => {
     props = { isOnDevice: true }
   })
diff --git a/app/src/organisms/IncompatibleModule/hooks/__tests__/useIncompatibleModulesAttached.test.tsx b/app/src/organisms/IncompatibleModule/hooks/__tests__/useIncompatibleModulesAttached.test.tsx
index 7e1a7342db1..c58d75c7b6d 100644
--- a/app/src/organisms/IncompatibleModule/hooks/__tests__/useIncompatibleModulesAttached.test.tsx
+++ b/app/src/organisms/IncompatibleModule/hooks/__tests__/useIncompatibleModulesAttached.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { QueryClient, QueryClientProvider } from 'react-query'
 
 import { vi, it, expect, describe, beforeEach } from 'vitest'
@@ -8,16 +7,17 @@ import { useIncompatibleModulesAttached } from '..'
 
 import * as Fixtures from '../__fixtures__'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Modules } from '@opentrons/api-client'
 import type { UseQueryResult } from 'react-query'
 vi.mock('@opentrons/react-api-client')
 
 describe('useIncompatibleModulesAttached', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     const queryClient = new QueryClient()
-    const clientProvider: React.FunctionComponent<{
-      children: React.ReactNode
+    const clientProvider: FunctionComponent<{
+      children: ReactNode
     }> = ({ children }) => (
       <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
     )
diff --git a/app/src/organisms/InterventionModal/__tests__/InterventionCommandMesage.test.tsx b/app/src/organisms/InterventionModal/__tests__/InterventionCommandMesage.test.tsx
index 6f3a688b808..a09994c929d 100644
--- a/app/src/organisms/InterventionModal/__tests__/InterventionCommandMesage.test.tsx
+++ b/app/src/organisms/InterventionModal/__tests__/InterventionCommandMesage.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, expect } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -10,16 +9,16 @@ import {
   truncatedCommandMessage,
 } from '../__fixtures__'
 
-const render = (
-  props: React.ComponentProps<typeof InterventionCommandMessage>
-) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof InterventionCommandMessage>) => {
   return renderWithProviders(<InterventionCommandMessage {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('InterventionCommandMessage', () => {
-  let props: React.ComponentProps<typeof InterventionCommandMessage>
+  let props: ComponentProps<typeof InterventionCommandMessage>
 
   it('truncates command text greater than 220 characters long', () => {
     props = { commandMessage: longCommandMessage }
diff --git a/app/src/organisms/InterventionModal/__tests__/InterventionCommandMessage.test.tsx b/app/src/organisms/InterventionModal/__tests__/InterventionCommandMessage.test.tsx
index 6f3a688b808..a09994c929d 100644
--- a/app/src/organisms/InterventionModal/__tests__/InterventionCommandMessage.test.tsx
+++ b/app/src/organisms/InterventionModal/__tests__/InterventionCommandMessage.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, expect } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -10,16 +9,16 @@ import {
   truncatedCommandMessage,
 } from '../__fixtures__'
 
-const render = (
-  props: React.ComponentProps<typeof InterventionCommandMessage>
-) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof InterventionCommandMessage>) => {
   return renderWithProviders(<InterventionCommandMessage {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('InterventionCommandMessage', () => {
-  let props: React.ComponentProps<typeof InterventionCommandMessage>
+  let props: ComponentProps<typeof InterventionCommandMessage>
 
   it('truncates command text greater than 220 characters long', () => {
     props = { commandMessage: longCommandMessage }
diff --git a/app/src/organisms/InterventionModal/__tests__/InterventionModal.test.tsx b/app/src/organisms/InterventionModal/__tests__/InterventionModal.test.tsx
index 59b8c659a1a..bb4799e1754 100644
--- a/app/src/organisms/InterventionModal/__tests__/InterventionModal.test.tsx
+++ b/app/src/organisms/InterventionModal/__tests__/InterventionModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, renderHook, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 
@@ -18,6 +17,7 @@ import {
 import { InterventionModal, useInterventionModal } from '..'
 import { useIsFlex } from '/app/redux-resources/robots'
 
+import type { ComponentProps } from 'react'
 import type { CompletedProtocolAnalysis } from '@opentrons/shared-data'
 import type { RunData } from '@opentrons/api-client'
 
@@ -90,14 +90,14 @@ describe('useInterventionModal', () => {
   })
 })
 
-const render = (props: React.ComponentProps<typeof InterventionModal>) => {
+const render = (props: ComponentProps<typeof InterventionModal>) => {
   return renderWithProviders(<InterventionModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('InterventionModal', () => {
-  let props: React.ComponentProps<typeof InterventionModal>
+  let props: ComponentProps<typeof InterventionModal>
   beforeEach(() => {
     props = {
       robotName: ROBOT_NAME,
diff --git a/app/src/organisms/LegacyApplyHistoricOffsets/__tests__/ApplyHistoricOffsets.test.tsx b/app/src/organisms/LegacyApplyHistoricOffsets/__tests__/ApplyHistoricOffsets.test.tsx
index db70b1c096d..fb39565b161 100644
--- a/app/src/organisms/LegacyApplyHistoricOffsets/__tests__/ApplyHistoricOffsets.test.tsx
+++ b/app/src/organisms/LegacyApplyHistoricOffsets/__tests__/ApplyHistoricOffsets.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi } from 'vitest'
 
@@ -10,6 +9,7 @@ import { getIsLabwareOffsetCodeSnippetsOn } from '/app/redux/config'
 import { getLabwareDefinitionsFromCommands } from '/app/local-resources/labware'
 import { LegacyApplyHistoricOffsets } from '..'
 
+import type { ComponentProps } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type { OffsetCandidate } from '../hooks/useOffsetCandidatesForAnalysis'
 
@@ -64,11 +64,9 @@ const mockFourthCandidate: OffsetCandidate = {
 describe('ApplyHistoricOffsets', () => {
   const mockSetShouldApplyOffsets = vi.fn()
   const render = (
-    props?: Partial<React.ComponentProps<typeof LegacyApplyHistoricOffsets>>
+    props?: Partial<ComponentProps<typeof LegacyApplyHistoricOffsets>>
   ) =>
-    renderWithProviders<
-      React.ComponentProps<typeof LegacyApplyHistoricOffsets>
-    >(
+    renderWithProviders<ComponentProps<typeof LegacyApplyHistoricOffsets>>(
       <LegacyApplyHistoricOffsets
         offsetCandidates={[
           mockFirstCandidate,
diff --git a/app/src/organisms/LegacyApplyHistoricOffsets/__tests__/LabwareOffsetTable.test.tsx b/app/src/organisms/LegacyApplyHistoricOffsets/__tests__/LabwareOffsetTable.test.tsx
index 8b527e239f1..e794e0bc99c 100644
--- a/app/src/organisms/LegacyApplyHistoricOffsets/__tests__/LabwareOffsetTable.test.tsx
+++ b/app/src/organisms/LegacyApplyHistoricOffsets/__tests__/LabwareOffsetTable.test.tsx
@@ -4,6 +4,8 @@ import { fixture96Plate, fixtureTiprackAdapter } from '@opentrons/shared-data'
 import { i18n } from '/app/i18n'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { LabwareOffsetTable } from '../LabwareOffsetTable'
+
+import type { ComponentProps } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type { OffsetCandidate } from '../hooks/useOffsetCandidatesForAnalysis'
 
@@ -52,7 +54,7 @@ const mockFourthCandidate: OffsetCandidate = {
   runCreatedAt: '2022-05-12T13:33:51.012179+00:00',
 }
 const render = () =>
-  renderWithProviders<React.ComponentProps<typeof LabwareOffsetTable>>(
+  renderWithProviders<ComponentProps<typeof LabwareOffsetTable>>(
     <LabwareOffsetTable
       labwareDefinitions={[mockLabwareDef, mockAdapterDef]}
       offsetCandidates={[
diff --git a/app/src/organisms/LegacyApplyHistoricOffsets/hooks/__tests__/useHistoricRunDetails.test.tsx b/app/src/organisms/LegacyApplyHistoricOffsets/hooks/__tests__/useHistoricRunDetails.test.tsx
index a697fabb2d3..2f25f6ea2fa 100644
--- a/app/src/organisms/LegacyApplyHistoricOffsets/hooks/__tests__/useHistoricRunDetails.test.tsx
+++ b/app/src/organisms/LegacyApplyHistoricOffsets/hooks/__tests__/useHistoricRunDetails.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi } from 'vitest'
 import { when } from 'vitest-when'
 import { renderHook, waitFor } from '@testing-library/react'
@@ -8,6 +7,7 @@ import { useHistoricRunDetails } from '../useHistoricRunDetails'
 import { mockRunningRun } from '/app/resources/runs/__fixtures__'
 import { mockSuccessQueryResults } from '../../../../__fixtures__'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { RunData } from '@opentrons/api-client'
 
 vi.mock('/app/resources/runs/useNotifyAllRunsQuery')
@@ -40,7 +40,7 @@ describe('useHistoricRunDetails', () => {
     )
 
   it('returns historical run details with newest first', async () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <div>{children}</div>
     const { result } = renderHook(useHistoricRunDetails, { wrapper })
@@ -57,7 +57,7 @@ describe('useHistoricRunDetails', () => {
           links: {},
         })
       )
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <div>{children}</div>
     const { result } = renderHook(
diff --git a/app/src/organisms/LegacyApplyHistoricOffsets/hooks/__tests__/useOffsetCandidatesForAnalysis.test.tsx b/app/src/organisms/LegacyApplyHistoricOffsets/hooks/__tests__/useOffsetCandidatesForAnalysis.test.tsx
index 832417cb9af..b4581abe15e 100644
--- a/app/src/organisms/LegacyApplyHistoricOffsets/hooks/__tests__/useOffsetCandidatesForAnalysis.test.tsx
+++ b/app/src/organisms/LegacyApplyHistoricOffsets/hooks/__tests__/useOffsetCandidatesForAnalysis.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { when } from 'vitest-when'
 import { renderHook, waitFor } from '@testing-library/react'
@@ -13,6 +12,7 @@ import { getLabwareLocationCombos } from '../getLabwareLocationCombos'
 import { useOffsetCandidatesForAnalysis } from '../useOffsetCandidatesForAnalysis'
 import { storedProtocolData as storedProtocolDataFixture } from '/app/redux/protocol-storage/__fixtures__'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type { OffsetCandidate } from '../useOffsetCandidatesForAnalysis'
 
@@ -102,7 +102,7 @@ describe('useOffsetCandidatesForAnalysis', () => {
   })
 
   it('returns an empty array if robot ip but no analysis output', async () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <div>{children}</div>
     const { result } = renderHook(
@@ -115,7 +115,7 @@ describe('useOffsetCandidatesForAnalysis', () => {
   })
 
   it('returns an empty array if no robot ip', async () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <div>{children}</div>
     const { result } = renderHook(
@@ -131,7 +131,7 @@ describe('useOffsetCandidatesForAnalysis', () => {
     })
   })
   it('returns candidates for each first match with newest first', async () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <div>{children}</div>
     const { result } = renderHook(
diff --git a/app/src/organisms/LegacyLabwarePositionCheck/PrepareSpace.tsx b/app/src/organisms/LegacyLabwarePositionCheck/PrepareSpace.tsx
index 8820acfef33..f77973cbc1f 100644
--- a/app/src/organisms/LegacyLabwarePositionCheck/PrepareSpace.tsx
+++ b/app/src/organisms/LegacyLabwarePositionCheck/PrepareSpace.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import styled, { css } from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
@@ -23,6 +22,7 @@ import { SmallButton } from '/app/atoms/buttons'
 import { NeedHelpLink } from '/app/molecules/OT2CalibrationNeedHelpLink'
 import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration'
 
+import type { ReactNode } from 'react'
 import type {
   CompletedProtocolAnalysis,
   LabwareDefinition2,
@@ -61,8 +61,8 @@ interface PrepareSpaceProps extends Omit<CheckLabwareStep, 'section'> {
   labwareDef: LabwareDefinition2
   protocolData: CompletedProtocolAnalysis
   confirmPlacement: () => void
-  header: React.ReactNode
-  body: React.ReactNode
+  header: ReactNode
+  body: ReactNode
   robotType: RobotType
 }
 export const PrepareSpace = (props: PrepareSpaceProps): JSX.Element | null => {
diff --git a/app/src/organisms/LegacyLabwarePositionCheck/TwoUpTileLayout.tsx b/app/src/organisms/LegacyLabwarePositionCheck/TwoUpTileLayout.tsx
index 7c6cd309bb4..396d49d5150 100644
--- a/app/src/organisms/LegacyLabwarePositionCheck/TwoUpTileLayout.tsx
+++ b/app/src/organisms/LegacyLabwarePositionCheck/TwoUpTileLayout.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import styled, { css } from 'styled-components'
 import {
   DIRECTION_COLUMN,
@@ -12,6 +11,8 @@ import {
   DISPLAY_INLINE_BLOCK,
 } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
+
 const Title = styled.h1`
   ${TYPOGRAPHY.h1Default};
   margin-bottom: ${SPACING.spacing8};
@@ -36,11 +37,11 @@ export interface TwoUpTileLayoutProps {
   /** main header text on left half */
   title: string
   /** paragraph text below title on left half */
-  body: React.ReactNode
+  body: ReactNode
   /** entire contents of the right half */
-  rightElement: React.ReactNode
+  rightElement: ReactNode
   /** footer underneath both halves of content */
-  footer: React.ReactNode
+  footer: ReactNode
 }
 
 export function TwoUpTileLayout(props: TwoUpTileLayoutProps): JSX.Element {
diff --git a/app/src/organisms/LegacyLabwarePositionCheck/__tests__/CheckItem.test.tsx b/app/src/organisms/LegacyLabwarePositionCheck/__tests__/CheckItem.test.tsx
index 17442dfc42b..5c2907c5276 100644
--- a/app/src/organisms/LegacyLabwarePositionCheck/__tests__/CheckItem.test.tsx
+++ b/app/src/organisms/LegacyLabwarePositionCheck/__tests__/CheckItem.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, afterEach, expect } from 'vitest'
 
@@ -15,6 +14,7 @@ import { CheckItem } from '../CheckItem'
 import { SECTIONS } from '../constants'
 import { mockCompletedAnalysis, mockExistingOffsets } from '../__fixtures__'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('/app/redux/config')
@@ -23,14 +23,14 @@ vi.mock('../../Desktop/Devices/hooks')
 const mockStartPosition = { x: 10, y: 20, z: 30 }
 const mockEndPosition = { x: 9, y: 19, z: 29 }
 
-const render = (props: React.ComponentProps<typeof CheckItem>) => {
+const render = (props: ComponentProps<typeof CheckItem>) => {
   return renderWithProviders(<CheckItem {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('CheckItem', () => {
-  let props: React.ComponentProps<typeof CheckItem>
+  let props: ComponentProps<typeof CheckItem>
   let mockChainRunCommands: Mock
 
   beforeEach(() => {
diff --git a/app/src/organisms/LegacyLabwarePositionCheck/__tests__/ExitConfirmation.test.tsx b/app/src/organisms/LegacyLabwarePositionCheck/__tests__/ExitConfirmation.test.tsx
index 6a93da71dc5..e710c991ccb 100644
--- a/app/src/organisms/LegacyLabwarePositionCheck/__tests__/ExitConfirmation.test.tsx
+++ b/app/src/organisms/LegacyLabwarePositionCheck/__tests__/ExitConfirmation.test.tsx
@@ -1,18 +1,19 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, afterEach, expect, vi } from 'vitest'
 import { ExitConfirmation } from '../ExitConfirmation'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 
-const render = (props: React.ComponentProps<typeof ExitConfirmation>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ExitConfirmation>) => {
   return renderWithProviders(<ExitConfirmation {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ExitConfirmation', () => {
-  let props: React.ComponentProps<typeof ExitConfirmation>
+  let props: ComponentProps<typeof ExitConfirmation>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/LegacyLabwarePositionCheck/__tests__/PickUpTip.test.tsx b/app/src/organisms/LegacyLabwarePositionCheck/__tests__/PickUpTip.test.tsx
index c23e1c1af2c..286e6f5f095 100644
--- a/app/src/organisms/LegacyLabwarePositionCheck/__tests__/PickUpTip.test.tsx
+++ b/app/src/organisms/LegacyLabwarePositionCheck/__tests__/PickUpTip.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
 import { it, describe, beforeEach, vi, afterEach, expect } from 'vitest'
 import { FLEX_ROBOT_TYPE, HEATERSHAKER_MODULE_V1 } from '@opentrons/shared-data'
@@ -8,23 +7,25 @@ import { getIsOnDevice } from '/app/redux/config'
 import { PickUpTip } from '../PickUpTip'
 import { SECTIONS } from '../constants'
 import { mockCompletedAnalysis, mockExistingOffsets } from '../__fixtures__'
-import type { CommandData } from '@opentrons/api-client'
 import { nestedTextMatcher, renderWithProviders } from '/app/__testing-utils__'
+
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
+import type { CommandData } from '@opentrons/api-client'
 
 vi.mock('/app/resources/protocols')
 vi.mock('/app/redux/config')
 
 const mockStartPosition = { x: 10, y: 20, z: 30 }
 
-const render = (props: React.ComponentProps<typeof PickUpTip>) => {
+const render = (props: ComponentProps<typeof PickUpTip>) => {
   return renderWithProviders(<PickUpTip {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('PickUpTip', () => {
-  let props: React.ComponentProps<typeof PickUpTip>
+  let props: ComponentProps<typeof PickUpTip>
   let mockChainRunCommands: Mock
 
   beforeEach(() => {
diff --git a/app/src/organisms/LegacyLabwarePositionCheck/__tests__/ResultsSummary.test.tsx b/app/src/organisms/LegacyLabwarePositionCheck/__tests__/ResultsSummary.test.tsx
index 24101904de4..30a29496aaf 100644
--- a/app/src/organisms/LegacyLabwarePositionCheck/__tests__/ResultsSummary.test.tsx
+++ b/app/src/organisms/LegacyLabwarePositionCheck/__tests__/ResultsSummary.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, afterEach, expect, vi } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import { i18n } from '/app/i18n'
@@ -13,16 +12,18 @@ import {
   mockWorkingOffsets,
 } from '../__fixtures__'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/config')
 
-const render = (props: React.ComponentProps<typeof ResultsSummary>) => {
+const render = (props: ComponentProps<typeof ResultsSummary>) => {
   return renderWithProviders(<ResultsSummary {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ResultsSummary', () => {
-  let props: React.ComponentProps<typeof ResultsSummary>
+  let props: ComponentProps<typeof ResultsSummary>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/LegacyLabwarePositionCheck/__tests__/ReturnTip.test.tsx b/app/src/organisms/LegacyLabwarePositionCheck/__tests__/ReturnTip.test.tsx
index 0af86097f9c..112be630a31 100644
--- a/app/src/organisms/LegacyLabwarePositionCheck/__tests__/ReturnTip.test.tsx
+++ b/app/src/organisms/LegacyLabwarePositionCheck/__tests__/ReturnTip.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 
@@ -12,17 +11,19 @@ import { useProtocolMetadata } from '/app/resources/protocols'
 import { getIsOnDevice } from '/app/redux/config'
 import { ReturnTip } from '../ReturnTip'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/config')
 vi.mock('/app/resources/protocols')
 
-const render = (props: React.ComponentProps<typeof ReturnTip>) => {
+const render = (props: ComponentProps<typeof ReturnTip>) => {
   return renderWithProviders(<ReturnTip {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ReturnTip', () => {
-  let props: React.ComponentProps<typeof ReturnTip>
+  let props: ComponentProps<typeof ReturnTip>
   let mockChainRunCommands
 
   beforeEach(() => {
diff --git a/app/src/organisms/LegacyLabwarePositionCheck/__tests__/TipConfirmation.test.tsx b/app/src/organisms/LegacyLabwarePositionCheck/__tests__/TipConfirmation.test.tsx
index 8f8878a7122..a262641fd84 100644
--- a/app/src/organisms/LegacyLabwarePositionCheck/__tests__/TipConfirmation.test.tsx
+++ b/app/src/organisms/LegacyLabwarePositionCheck/__tests__/TipConfirmation.test.tsx
@@ -1,18 +1,19 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, afterEach, expect, vi } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import { TipConfirmation } from '../TipConfirmation'
 import { i18n } from '/app/i18n'
 import { renderWithProviders } from '/app/__testing-utils__'
 
-const render = (props: React.ComponentProps<typeof TipConfirmation>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof TipConfirmation>) => {
   return renderWithProviders(<TipConfirmation {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('TipConfirmation', () => {
-  let props: React.ComponentProps<typeof TipConfirmation>
+  let props: ComponentProps<typeof TipConfirmation>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/LegacyLabwarePositionCheck/__tests__/useLaunchLPC.test.tsx b/app/src/organisms/LegacyLabwarePositionCheck/__tests__/useLaunchLPC.test.tsx
index 070931ee998..83613b0d778 100644
--- a/app/src/organisms/LegacyLabwarePositionCheck/__tests__/useLaunchLPC.test.tsx
+++ b/app/src/organisms/LegacyLabwarePositionCheck/__tests__/useLaunchLPC.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { Provider } from 'react-redux'
 import configureStore from 'redux-mock-store'
 import { when } from 'vitest-when'
@@ -27,6 +26,7 @@ import {
 import { useLaunchLegacyLPC } from '../useLaunchLegacyLPC'
 import { LegacyLabwarePositionCheck } from '..'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Mock } from 'vitest'
 import type { LabwareOffset } from '@opentrons/api-client'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
@@ -57,7 +57,7 @@ const mockCurrentOffsets: LabwareOffset[] = [
 const mockLabwareDef = fixtureTiprack300ul as LabwareDefinition2
 
 describe('useLaunchLPC hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   let mockCreateMaintenanceRun: Mock
   let mockCreateLabwareDefinition: Mock
   let mockDeleteMaintenanceRun: Mock
diff --git a/app/src/organisms/LiquidsLabwareDetailsModal/LiquidDetailCard.tsx b/app/src/organisms/LiquidsLabwareDetailsModal/LiquidDetailCard.tsx
index cb1591dc72f..7dc33069500 100644
--- a/app/src/organisms/LiquidsLabwareDetailsModal/LiquidDetailCard.tsx
+++ b/app/src/organisms/LiquidsLabwareDetailsModal/LiquidDetailCard.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useSelector } from 'react-redux'
 import { css } from 'styled-components'
 import {
@@ -27,6 +26,8 @@ import {
 import { getIsOnDevice } from '/app/redux/config'
 import { getWellRangeForLiquidLabwarePair } from '/app/transformations/analysis'
 
+import type { Dispatch, SetStateAction } from 'react'
+
 export const CARD_OUTLINE_BORDER_STYLE = css`
   border-style: ${BORDERS.styleSolid};
   border-width: 1px;
@@ -56,7 +57,7 @@ interface LiquidDetailCardProps {
   description: string | null
   displayColor: string
   volumeByWell: { [well: string]: number }
-  setSelectedValue: React.Dispatch<React.SetStateAction<string | undefined>>
+  setSelectedValue: Dispatch<SetStateAction<string | undefined>>
   selectedValue: string | undefined
   labwareWellOrdering: string[][]
 }
diff --git a/app/src/organisms/LiquidsLabwareDetailsModal/__tests__/LiquidDetailCard.test.tsx b/app/src/organisms/LiquidsLabwareDetailsModal/__tests__/LiquidDetailCard.test.tsx
index a96c8128897..522fae501b1 100644
--- a/app/src/organisms/LiquidsLabwareDetailsModal/__tests__/LiquidDetailCard.test.tsx
+++ b/app/src/organisms/LiquidsLabwareDetailsModal/__tests__/LiquidDetailCard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 
@@ -12,12 +11,14 @@ import {
 } from '/app/redux/analytics'
 import { getIsOnDevice } from '/app/redux/config'
 import { LiquidDetailCard } from '../LiquidDetailCard'
+
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('/app/redux/analytics')
 vi.mock('/app/redux/config')
 
-const render = (props: React.ComponentProps<typeof LiquidDetailCard>) => {
+const render = (props: ComponentProps<typeof LiquidDetailCard>) => {
   return renderWithProviders(<LiquidDetailCard {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -25,7 +26,7 @@ const render = (props: React.ComponentProps<typeof LiquidDetailCard>) => {
 let mockTrackEvent: Mock
 
 describe('LiquidDetailCard', () => {
-  let props: React.ComponentProps<typeof LiquidDetailCard>
+  let props: ComponentProps<typeof LiquidDetailCard>
 
   beforeEach(() => {
     mockTrackEvent = vi.fn()
diff --git a/app/src/organisms/LiquidsLabwareDetailsModal/__tests__/LiquidsLabwareDetailsModal.test.tsx b/app/src/organisms/LiquidsLabwareDetailsModal/__tests__/LiquidsLabwareDetailsModal.test.tsx
index 967a840ee75..e70756ed3f3 100644
--- a/app/src/organisms/LiquidsLabwareDetailsModal/__tests__/LiquidsLabwareDetailsModal.test.tsx
+++ b/app/src/organisms/LiquidsLabwareDetailsModal/__tests__/LiquidsLabwareDetailsModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, vi, afterEach, expect } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -21,6 +20,7 @@ import {
 import { LiquidsLabwareDetailsModal } from '../LiquidsLabwareDetailsModal'
 import { LiquidDetailCard } from '../LiquidDetailCard'
 
+import type { ComponentProps } from 'react'
 import type * as Components from '@opentrons/components'
 import type * as SharedData from '@opentrons/shared-data'
 
@@ -44,16 +44,14 @@ vi.mock('/app/transformations/commands')
 vi.mock('/app/transformations/analysis')
 vi.mock('../LiquidDetailCard')
 
-const render = (
-  props: React.ComponentProps<typeof LiquidsLabwareDetailsModal>
-) => {
+const render = (props: ComponentProps<typeof LiquidsLabwareDetailsModal>) => {
   return renderWithProviders(<LiquidsLabwareDetailsModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('LiquidsLabwareDetailsModal', () => {
-  let props: React.ComponentProps<typeof LiquidsLabwareDetailsModal>
+  let props: ComponentProps<typeof LiquidsLabwareDetailsModal>
   beforeEach(() => {
     window.HTMLElement.prototype.scrollIntoView = function () {}
     props = {
diff --git a/app/src/organisms/LocationConflictModal/__tests__/LocationConflictModal.test.tsx b/app/src/organisms/LocationConflictModal/__tests__/LocationConflictModal.test.tsx
index 207caa02a1b..1d72ae1b858 100644
--- a/app/src/organisms/LocationConflictModal/__tests__/LocationConflictModal.test.tsx
+++ b/app/src/organisms/LocationConflictModal/__tests__/LocationConflictModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { screen, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
@@ -21,6 +20,7 @@ import { useCloseCurrentRun } from '/app/resources/runs'
 import { LocationConflictModal } from '../LocationConflictModal'
 import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration'
 
+import type { ComponentProps } from 'react'
 import type { UseQueryResult } from 'react-query'
 import type { DeckConfiguration } from '@opentrons/shared-data'
 
@@ -33,7 +33,7 @@ const mockFixture = {
   cutoutFixtureId: STAGING_AREA_RIGHT_SLOT_FIXTURE,
 }
 
-const render = (props: React.ComponentProps<typeof LocationConflictModal>) => {
+const render = (props: ComponentProps<typeof LocationConflictModal>) => {
   return renderWithProviders(
     <MemoryRouter>
       <LocationConflictModal {...props} />
@@ -45,7 +45,7 @@ const render = (props: React.ComponentProps<typeof LocationConflictModal>) => {
 }
 
 describe('LocationConflictModal', () => {
-  let props: React.ComponentProps<typeof LocationConflictModal>
+  let props: ComponentProps<typeof LocationConflictModal>
   const mockUpdate = vi.fn()
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ModuleCard/Collapsible.tsx b/app/src/organisms/ModuleCard/Collapsible.tsx
index cc15a88d4a0..00f032b52ef 100644
--- a/app/src/organisms/ModuleCard/Collapsible.tsx
+++ b/app/src/organisms/ModuleCard/Collapsible.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import {
   ALIGN_CENTER,
@@ -13,13 +12,15 @@ import {
 } from '@opentrons/components'
 import type { IconName } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
+
 interface CollapsibleProps {
   expanded: boolean
-  title: React.ReactNode
+  title: ReactNode
   expandedIcon?: IconName
   collapsedIcon?: IconName
   toggleExpanded: () => void
-  children: React.ReactNode
+  children: ReactNode
 }
 
 const EXPANDED_STYLE = css`
diff --git a/app/src/organisms/ModuleCard/__tests__/AboutModuleSlideout.test.tsx b/app/src/organisms/ModuleCard/__tests__/AboutModuleSlideout.test.tsx
index 35eb81ab169..e397eae0b50 100644
--- a/app/src/organisms/ModuleCard/__tests__/AboutModuleSlideout.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/AboutModuleSlideout.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -20,16 +19,18 @@ import {
 import { useCurrentRunStatus } from '/app/organisms/RunTimeControl'
 import { AboutModuleSlideout } from '../AboutModuleSlideout'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/organisms/RunTimeControl')
 
-const render = (props: React.ComponentProps<typeof AboutModuleSlideout>) => {
+const render = (props: ComponentProps<typeof AboutModuleSlideout>) => {
   return renderWithProviders(<AboutModuleSlideout {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('AboutModuleSlideout', () => {
-  let props: React.ComponentProps<typeof AboutModuleSlideout>
+  let props: ComponentProps<typeof AboutModuleSlideout>
   beforeEach(() => {
     props = {
       module: mockMagneticModule,
diff --git a/app/src/organisms/ModuleCard/__tests__/Collapsible.test.tsx b/app/src/organisms/ModuleCard/__tests__/Collapsible.test.tsx
index 3db479e3228..9ec5f2d0e1b 100644
--- a/app/src/organisms/ModuleCard/__tests__/Collapsible.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/Collapsible.test.tsx
@@ -1,16 +1,17 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { renderWithProviders } from '/app/__testing-utils__'
 import { Collapsible } from '../Collapsible'
 
-const render = (props: React.ComponentProps<typeof Collapsible>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Collapsible>) => {
   return renderWithProviders(<Collapsible {...props} />)[0]
 }
 
 describe('Collapsible', () => {
-  let props: React.ComponentProps<typeof Collapsible>
+  let props: ComponentProps<typeof Collapsible>
   beforeEach(() => {
     props = {
       expanded: false,
diff --git a/app/src/organisms/ModuleCard/__tests__/ConfirmAttachmentModal.test.tsx b/app/src/organisms/ModuleCard/__tests__/ConfirmAttachmentModal.test.tsx
index ccc81bcb167..6c4d41973da 100644
--- a/app/src/organisms/ModuleCard/__tests__/ConfirmAttachmentModal.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/ConfirmAttachmentModal.test.tsx
@@ -1,18 +1,19 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ConfirmAttachmentModal } from '../ConfirmAttachmentModal'
 
-const render = (props: React.ComponentProps<typeof ConfirmAttachmentModal>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ConfirmAttachmentModal>) => {
   return renderWithProviders(<ConfirmAttachmentModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ConfirmAttachmentBanner', () => {
-  let props: React.ComponentProps<typeof ConfirmAttachmentModal>
+  let props: ComponentProps<typeof ConfirmAttachmentModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ModuleCard/__tests__/ErrorInfo.test.tsx b/app/src/organisms/ModuleCard/__tests__/ErrorInfo.test.tsx
index bde80a0d7d2..2a93208d89e 100644
--- a/app/src/organisms/ModuleCard/__tests__/ErrorInfo.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/ErrorInfo.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -9,6 +8,8 @@ import {
   mockTemperatureModule,
   mockThermocycler,
 } from '/app/redux/modules/__fixtures__'
+
+import type { ComponentProps } from 'react'
 import type {
   HeaterShakerModule,
   ThermocyclerModule,
@@ -71,14 +72,14 @@ const mockErrorHeaterShaker = {
   },
 } as HeaterShakerModule
 
-const render = (props: React.ComponentProps<typeof ErrorInfo>) => {
+const render = (props: ComponentProps<typeof ErrorInfo>) => {
   return renderWithProviders(<ErrorInfo {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ErrorInfo', () => {
-  let props: React.ComponentProps<typeof ErrorInfo>
+  let props: ComponentProps<typeof ErrorInfo>
   beforeEach(() => {
     props = {
       attachedModule: mockTemperatureModule,
diff --git a/app/src/organisms/ModuleCard/__tests__/FirmwareUpdateFailedModal.test.tsx b/app/src/organisms/ModuleCard/__tests__/FirmwareUpdateFailedModal.test.tsx
index 13395bcff69..f3eaa7dc0ed 100644
--- a/app/src/organisms/ModuleCard/__tests__/FirmwareUpdateFailedModal.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/FirmwareUpdateFailedModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -6,16 +5,16 @@ import { i18n } from '/app/i18n'
 import { mockTemperatureModule } from '/app/redux/modules/__fixtures__'
 import { FirmwareUpdateFailedModal } from '../FirmwareUpdateFailedModal'
 
-const render = (
-  props: React.ComponentProps<typeof FirmwareUpdateFailedModal>
-) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof FirmwareUpdateFailedModal>) => {
   return renderWithProviders(<FirmwareUpdateFailedModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('FirmwareUpdateFailedModal', () => {
-  let props: React.ComponentProps<typeof FirmwareUpdateFailedModal>
+  let props: ComponentProps<typeof FirmwareUpdateFailedModal>
   beforeEach(() => {
     props = {
       onCloseClick: vi.fn(),
diff --git a/app/src/organisms/ModuleCard/__tests__/HeaterShakerModuleData.test.tsx b/app/src/organisms/ModuleCard/__tests__/HeaterShakerModuleData.test.tsx
index 348fdb614d4..dab6f1fc7ad 100644
--- a/app/src/organisms/ModuleCard/__tests__/HeaterShakerModuleData.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/HeaterShakerModuleData.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -6,16 +5,18 @@ import { i18n } from '/app/i18n'
 import { StatusLabel } from '/app/atoms/StatusLabel'
 import { HeaterShakerModuleData } from '../HeaterShakerModuleData'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/atoms/StatusLabel')
 
-const render = (props: React.ComponentProps<typeof HeaterShakerModuleData>) => {
+const render = (props: ComponentProps<typeof HeaterShakerModuleData>) => {
   return renderWithProviders(<HeaterShakerModuleData {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('HeaterShakerModuleData', () => {
-  let props: React.ComponentProps<typeof HeaterShakerModuleData>
+  let props: ComponentProps<typeof HeaterShakerModuleData>
   beforeEach(() => {
     props = {
       moduleData: {
diff --git a/app/src/organisms/ModuleCard/__tests__/HeaterShakerSlideout.test.tsx b/app/src/organisms/ModuleCard/__tests__/HeaterShakerSlideout.test.tsx
index 883d5b6bb7c..b02e5205f42 100644
--- a/app/src/organisms/ModuleCard/__tests__/HeaterShakerSlideout.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/HeaterShakerSlideout.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -9,16 +8,18 @@ import { i18n } from '/app/i18n'
 import { mockHeaterShaker } from '/app/redux/modules/__fixtures__'
 import { HeaterShakerSlideout } from '../HeaterShakerSlideout'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
 
-const render = (props: React.ComponentProps<typeof HeaterShakerSlideout>) => {
+const render = (props: ComponentProps<typeof HeaterShakerSlideout>) => {
   return renderWithProviders(<HeaterShakerSlideout {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('HeaterShakerSlideout', () => {
-  let props: React.ComponentProps<typeof HeaterShakerSlideout>
+  let props: ComponentProps<typeof HeaterShakerSlideout>
   let mockCreateLiveCommand = vi.fn()
 
   beforeEach(() => {
diff --git a/app/src/organisms/ModuleCard/__tests__/MagneticModuleData.test.tsx b/app/src/organisms/ModuleCard/__tests__/MagneticModuleData.test.tsx
index b6534d233e3..0440b16b251 100644
--- a/app/src/organisms/ModuleCard/__tests__/MagneticModuleData.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/MagneticModuleData.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, it, vi } from 'vitest'
 
@@ -8,16 +7,18 @@ import { StatusLabel } from '/app/atoms/StatusLabel'
 import { MagneticModuleData } from '../MagneticModuleData'
 import { mockMagneticModule } from '/app/redux/modules/__fixtures__'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/atoms/StatusLabel')
 
-const render = (props: React.ComponentProps<typeof MagneticModuleData>) => {
+const render = (props: ComponentProps<typeof MagneticModuleData>) => {
   return renderWithProviders(<MagneticModuleData {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('MagneticModuleData', () => {
-  let props: React.ComponentProps<typeof MagneticModuleData>
+  let props: ComponentProps<typeof MagneticModuleData>
   beforeEach(() => {
     props = {
       moduleHeight: mockMagneticModule.data.height,
diff --git a/app/src/organisms/ModuleCard/__tests__/MagneticModuleSlideout.test.tsx b/app/src/organisms/ModuleCard/__tests__/MagneticModuleSlideout.test.tsx
index fa10546af90..c52817fb517 100644
--- a/app/src/organisms/ModuleCard/__tests__/MagneticModuleSlideout.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/MagneticModuleSlideout.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { COLORS } from '@opentrons/components'
@@ -13,15 +12,17 @@ import {
   mockMagneticModuleGen2,
 } from '/app/redux/modules/__fixtures__'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
 
-const render = (props: React.ComponentProps<typeof MagneticModuleSlideout>) => {
+const render = (props: ComponentProps<typeof MagneticModuleSlideout>) => {
   return renderWithProviders(<MagneticModuleSlideout {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 describe('MagneticModuleSlideout', () => {
-  let props: React.ComponentProps<typeof MagneticModuleSlideout>
+  let props: ComponentProps<typeof MagneticModuleSlideout>
   let mockCreateLiveCommand = vi.fn()
   beforeEach(() => {
     mockCreateLiveCommand = vi.fn()
diff --git a/app/src/organisms/ModuleCard/__tests__/ModuleCard.test.tsx b/app/src/organisms/ModuleCard/__tests__/ModuleCard.test.tsx
index d30a885b759..078dfe12ada 100644
--- a/app/src/organisms/ModuleCard/__tests__/ModuleCard.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/ModuleCard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
@@ -29,12 +28,13 @@ import { FirmwareUpdateFailedModal } from '../FirmwareUpdateFailedModal'
 import { ErrorInfo } from '../ErrorInfo'
 import { ModuleCard } from '..'
 
+import type { ComponentProps } from 'react'
+import type { Mock } from 'vitest'
 import type {
   HeaterShakerModule,
   MagneticModule,
   ThermocyclerModule,
 } from '/app/redux/modules/types'
-import type { Mock } from 'vitest'
 
 vi.mock('../ErrorInfo')
 vi.mock('../MagneticModuleData')
@@ -175,14 +175,14 @@ const mockEatToast = vi.fn()
 
 const MOCK_LATEST_REQUEST_ID = '1234'
 
-const render = (props: React.ComponentProps<typeof ModuleCard>) => {
+const render = (props: ComponentProps<typeof ModuleCard>) => {
   return renderWithProviders(<ModuleCard {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ModuleCard', () => {
-  let props: React.ComponentProps<typeof ModuleCard>
+  let props: ComponentProps<typeof ModuleCard>
   let mockHandleModuleApiRequests: Mock
 
   beforeEach(() => {
diff --git a/app/src/organisms/ModuleCard/__tests__/ModuleOverflowMenu.test.tsx b/app/src/organisms/ModuleCard/__tests__/ModuleOverflowMenu.test.tsx
index 75701934e36..6e54dee83f9 100644
--- a/app/src/organisms/ModuleCard/__tests__/ModuleOverflowMenu.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/ModuleOverflowMenu.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -16,13 +15,14 @@ import { useIsFlex } from '/app/redux-resources/robots'
 import { useCurrentRunId, useRunStatuses } from '/app/resources/runs'
 import { ModuleOverflowMenu } from '../ModuleOverflowMenu'
 
+import type { ComponentProps } from 'react'
 import type { TemperatureStatus } from '@opentrons/api-client'
 
 vi.mock('/app/resources/legacy_sessions')
 vi.mock('/app/redux-resources/robots')
 vi.mock('/app/resources/runs')
 
-const render = (props: React.ComponentProps<typeof ModuleOverflowMenu>) => {
+const render = (props: ComponentProps<typeof ModuleOverflowMenu>) => {
   return renderWithProviders(<ModuleOverflowMenu {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -161,7 +161,7 @@ const mockThermocyclerGen2LidClosed = {
 } as any
 
 describe('ModuleOverflowMenu', () => {
-  let props: React.ComponentProps<typeof ModuleOverflowMenu>
+  let props: ComponentProps<typeof ModuleOverflowMenu>
   beforeEach(() => {
     vi.mocked(useIsLegacySessionInProgress).mockReturnValue(false)
     vi.mocked(useRunStatuses).mockReturnValue({
diff --git a/app/src/organisms/ModuleCard/__tests__/ModuleSetupModal.test.tsx b/app/src/organisms/ModuleCard/__tests__/ModuleSetupModal.test.tsx
index 87f340b2845..1b3abfab5ce 100644
--- a/app/src/organisms/ModuleCard/__tests__/ModuleSetupModal.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/ModuleSetupModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -6,14 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ModuleSetupModal } from '../ModuleSetupModal'
 
-const render = (props: React.ComponentProps<typeof ModuleSetupModal>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ModuleSetupModal>) => {
   return renderWithProviders(<ModuleSetupModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ModuleSetupModal', () => {
-  let props: React.ComponentProps<typeof ModuleSetupModal>
+  let props: ComponentProps<typeof ModuleSetupModal>
   beforeEach(() => {
     props = { close: vi.fn(), moduleDisplayName: 'mockModuleDisplayName' }
   })
diff --git a/app/src/organisms/ModuleCard/__tests__/TemperatureModuleData.test.tsx b/app/src/organisms/ModuleCard/__tests__/TemperatureModuleData.test.tsx
index 5b851ce5796..a9e2d88fb26 100644
--- a/app/src/organisms/ModuleCard/__tests__/TemperatureModuleData.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/TemperatureModuleData.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -8,16 +7,18 @@ import { StatusLabel } from '/app/atoms/StatusLabel'
 import { TemperatureModuleData } from '../TemperatureModuleData'
 import { mockTemperatureModuleGen2 } from '/app/redux/modules/__fixtures__'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/atoms/StatusLabel')
 
-const render = (props: React.ComponentProps<typeof TemperatureModuleData>) => {
+const render = (props: ComponentProps<typeof TemperatureModuleData>) => {
   return renderWithProviders(<TemperatureModuleData {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('TemperatureModuleData', () => {
-  let props: React.ComponentProps<typeof TemperatureModuleData>
+  let props: ComponentProps<typeof TemperatureModuleData>
   beforeEach(() => {
     props = {
       moduleStatus: mockTemperatureModuleGen2.data.status,
diff --git a/app/src/organisms/ModuleCard/__tests__/TemperatureModuleSlideout.test.tsx b/app/src/organisms/ModuleCard/__tests__/TemperatureModuleSlideout.test.tsx
index ce65306741d..12ecc39f2f1 100644
--- a/app/src/organisms/ModuleCard/__tests__/TemperatureModuleSlideout.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/TemperatureModuleSlideout.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -12,18 +11,18 @@ import {
 } from '/app/redux/modules/__fixtures__'
 import { TemperatureModuleSlideout } from '../TemperatureModuleSlideout'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
 
-const render = (
-  props: React.ComponentProps<typeof TemperatureModuleSlideout>
-) => {
+const render = (props: ComponentProps<typeof TemperatureModuleSlideout>) => {
   return renderWithProviders(<TemperatureModuleSlideout {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('TemperatureModuleSlideout', () => {
-  let props: React.ComponentProps<typeof TemperatureModuleSlideout>
+  let props: ComponentProps<typeof TemperatureModuleSlideout>
   let mockCreateLiveCommand = vi.fn()
 
   beforeEach(() => {
diff --git a/app/src/organisms/ModuleCard/__tests__/TestShakeSlideout.test.tsx b/app/src/organisms/ModuleCard/__tests__/TestShakeSlideout.test.tsx
index f11816df8b6..865c656b1ed 100644
--- a/app/src/organisms/ModuleCard/__tests__/TestShakeSlideout.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/TestShakeSlideout.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -12,12 +11,14 @@ import { useLatchControls } from '../hooks'
 import { TestShakeSlideout } from '../TestShakeSlideout'
 import { ModuleSetupModal } from '../ModuleSetupModal'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/config')
 vi.mock('@opentrons/react-api-client')
 vi.mock('../hooks')
 vi.mock('../ModuleSetupModal')
 
-const render = (props: React.ComponentProps<typeof TestShakeSlideout>) => {
+const render = (props: ComponentProps<typeof TestShakeSlideout>) => {
   return renderWithProviders(<TestShakeSlideout {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -90,7 +91,7 @@ const mockMovingHeaterShaker = {
 } as any
 
 describe('TestShakeSlideout', () => {
-  let props: React.ComponentProps<typeof TestShakeSlideout>
+  let props: ComponentProps<typeof TestShakeSlideout>
   let mockCreateLiveCommand = vi.fn()
   const mockToggleLatch = vi.fn()
   beforeEach(() => {
diff --git a/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleData.test.tsx b/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleData.test.tsx
index 0885c74bb5d..fc2346cf9ba 100644
--- a/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleData.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleData.test.tsx
@@ -1,6 +1,4 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
-
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -11,9 +9,10 @@ import {
 } from '/app/redux/modules/__fixtures__'
 import { ThermocyclerModuleData } from '../ThermocyclerModuleData'
 
+import type { ComponentProps } from 'react'
 import type { ThermocyclerData } from '/app/redux/modules/api-types'
 
-const render = (props: React.ComponentProps<typeof ThermocyclerModuleData>) => {
+const render = (props: ComponentProps<typeof ThermocyclerModuleData>) => {
   return renderWithProviders(<ThermocyclerModuleData {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -49,7 +48,7 @@ const mockDataHeating = {
 } as ThermocyclerData
 
 describe('ThermocyclerModuleData', () => {
-  let props: React.ComponentProps<typeof ThermocyclerModuleData>
+  let props: ComponentProps<typeof ThermocyclerModuleData>
   beforeEach(() => {
     props = {
       data: mockThermocycler.data,
diff --git a/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleSlideout.test.tsx b/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleSlideout.test.tsx
index d93a1b1f607..1557b821dd9 100644
--- a/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleSlideout.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleSlideout.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -9,18 +8,18 @@ import { i18n } from '/app/i18n'
 import { mockThermocycler } from '/app/redux/modules/__fixtures__'
 import { ThermocyclerModuleSlideout } from '../ThermocyclerModuleSlideout'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
 
-const render = (
-  props: React.ComponentProps<typeof ThermocyclerModuleSlideout>
-) => {
+const render = (props: ComponentProps<typeof ThermocyclerModuleSlideout>) => {
   return renderWithProviders(<ThermocyclerModuleSlideout {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ThermocyclerModuleSlideout', () => {
-  let props: React.ComponentProps<typeof ThermocyclerModuleSlideout>
+  let props: ComponentProps<typeof ThermocyclerModuleSlideout>
   let mockCreateLiveCommand = vi.fn()
   beforeEach(() => {
     mockCreateLiveCommand = vi.fn()
diff --git a/app/src/organisms/ModuleCard/__tests__/hooks.test.tsx b/app/src/organisms/ModuleCard/__tests__/hooks.test.tsx
index ce0f0450179..2fe0c5502ef 100644
--- a/app/src/organisms/ModuleCard/__tests__/hooks.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/hooks.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { Provider } from 'react-redux'
 import { when } from 'vitest-when'
 import { createStore } from 'redux'
@@ -30,6 +29,7 @@ import {
   useIsHeaterShakerInProtocol,
 } from '../hooks'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { State } from '/app/redux/types'
 
@@ -188,7 +188,7 @@ describe('useLatchControls', () => {
   })
 
   it('should return latch is open and handle latch function and command to close latch', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <I18nextProvider i18n={i18n}>
@@ -212,7 +212,7 @@ describe('useLatchControls', () => {
     })
   })
   it('should return if latch is closed and handle latch function opens latch', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <I18nextProvider i18n={i18n}>
@@ -263,7 +263,7 @@ describe('useModuleOverflowMenu', () => {
     vi.restoreAllMocks()
   })
   it('should return everything for menuItemsByModuleType and create deactive heater command', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <I18nextProvider i18n={i18n}>
@@ -304,7 +304,7 @@ describe('useModuleOverflowMenu', () => {
     const mockAboutClick = vi.fn()
     const mockTestShakeClick = vi.fn()
     const mockHandleWizard = vi.fn()
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <I18nextProvider i18n={i18n}>
@@ -336,7 +336,7 @@ describe('useModuleOverflowMenu', () => {
 
   it('should return only 1 menu button when module is a magnetic module and calls handleClick when module is disengaged', () => {
     const mockHandleClick = vi.fn()
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <I18nextProvider i18n={i18n}>
@@ -366,7 +366,7 @@ describe('useModuleOverflowMenu', () => {
   })
 
   it('should render magnetic module and create disengage command', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <I18nextProvider i18n={i18n}>
@@ -404,7 +404,7 @@ describe('useModuleOverflowMenu', () => {
 
   it('should render temperature module and call handleClick when module is idle', () => {
     const mockHandleClick = vi.fn()
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <I18nextProvider i18n={i18n}>
@@ -433,7 +433,7 @@ describe('useModuleOverflowMenu', () => {
   })
 
   it('should render temp module and create deactivate temp command', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <I18nextProvider i18n={i18n}>
@@ -470,7 +470,7 @@ describe('useModuleOverflowMenu', () => {
 
   it('should render TC module and call handleClick when module is idle', () => {
     const mockHandleClick = vi.fn()
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <I18nextProvider i18n={i18n}>
@@ -499,7 +499,7 @@ describe('useModuleOverflowMenu', () => {
   })
 
   it('should render TC module and create open lid command', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <I18nextProvider i18n={i18n}>
@@ -537,7 +537,7 @@ describe('useModuleOverflowMenu', () => {
   })
 
   it('should render TC module and create deactivate lid command', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <I18nextProvider i18n={i18n}>
@@ -575,7 +575,7 @@ describe('useModuleOverflowMenu', () => {
   })
 
   it('should render TC module gen 2 and create a close lid command', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <I18nextProvider i18n={i18n}>
@@ -650,7 +650,7 @@ describe('useIsHeaterShakerInProtocol', () => {
   })
 
   it('should return true when a heater shaker is in the protocol', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
     const { result } = renderHook(useIsHeaterShakerInProtocol, { wrapper })
@@ -674,7 +674,7 @@ describe('useIsHeaterShakerInProtocol', () => {
           id,
         })),
       } as any)
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
     const { result } = renderHook(useIsHeaterShakerInProtocol, { wrapper })
diff --git a/app/src/organisms/ODD/ChildNavigation/__tests__/ChildNavigation.test.tsx b/app/src/organisms/ODD/ChildNavigation/__tests__/ChildNavigation.test.tsx
index 82a0dfb0b3c..44ff1414dd6 100644
--- a/app/src/organisms/ODD/ChildNavigation/__tests__/ChildNavigation.test.tsx
+++ b/app/src/organisms/ODD/ChildNavigation/__tests__/ChildNavigation.test.tsx
@@ -1,19 +1,20 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 
 import { renderWithProviders } from '/app/__testing-utils__'
 import { ChildNavigation } from '..'
+
+import type { ComponentProps } from 'react'
 import type { SmallButton } from '/app/atoms/buttons'
 
-const render = (props: React.ComponentProps<typeof ChildNavigation>) =>
+const render = (props: ComponentProps<typeof ChildNavigation>) =>
   renderWithProviders(<ChildNavigation {...props} />)
 
 const mockOnClickBack = vi.fn()
 const mockOnClickButton = vi.fn()
 const mockOnClickSecondaryButton = vi.fn()
 
-const mockSecondaryButtonProps: React.ComponentProps<typeof SmallButton> = {
+const mockSecondaryButtonProps: ComponentProps<typeof SmallButton> = {
   onClick: mockOnClickSecondaryButton,
   buttonText: 'Setup Instructions',
   buttonType: 'tertiaryLowLight',
@@ -22,7 +23,7 @@ const mockSecondaryButtonProps: React.ComponentProps<typeof SmallButton> = {
 }
 
 describe('ChildNavigation', () => {
-  let props: React.ComponentProps<typeof ChildNavigation>
+  let props: ComponentProps<typeof ChildNavigation>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/ChildNavigation/index.tsx b/app/src/organisms/ODD/ChildNavigation/index.tsx
index ea6c72f293b..ff1ebed1c95 100644
--- a/app/src/organisms/ODD/ChildNavigation/index.tsx
+++ b/app/src/organisms/ODD/ChildNavigation/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import styled from 'styled-components'
 
 import {
@@ -21,6 +20,7 @@ import { ODD_FOCUS_VISIBLE } from '/app/atoms/buttons/constants'
 import { SmallButton } from '/app/atoms/buttons'
 import { InlineNotification } from '/app/atoms/InlineNotification'
 
+import type { ComponentProps, MouseEventHandler, ReactNode } from 'react'
 import type { IconName, StyleProps } from '@opentrons/components'
 import type { InlineNotificationProps } from '/app/atoms/InlineNotification'
 import type {
@@ -30,15 +30,15 @@ import type {
 
 interface ChildNavigationProps extends StyleProps {
   header: string
-  onClickBack?: React.MouseEventHandler
-  buttonText?: React.ReactNode
+  onClickBack?: MouseEventHandler
+  buttonText?: ReactNode
   inlineNotification?: InlineNotificationProps
-  onClickButton?: React.MouseEventHandler
+  onClickButton?: MouseEventHandler
   buttonType?: SmallButtonTypes
   buttonIsDisabled?: boolean
   iconName?: IconName
   iconPlacement?: IconPlacement
-  secondaryButtonProps?: React.ComponentProps<typeof SmallButton>
+  secondaryButtonProps?: ComponentProps<typeof SmallButton>
   ariaDisabled?: boolean
 }
 
diff --git a/app/src/organisms/ODD/InstrumentInfo/__tests__/InstrumentInfo.test.tsx b/app/src/organisms/ODD/InstrumentInfo/__tests__/InstrumentInfo.test.tsx
index a478716483d..ec8b55bb17a 100644
--- a/app/src/organisms/ODD/InstrumentInfo/__tests__/InstrumentInfo.test.tsx
+++ b/app/src/organisms/ODD/InstrumentInfo/__tests__/InstrumentInfo.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
@@ -8,22 +7,23 @@ import { PipetteWizardFlows } from '/app/organisms/PipetteWizardFlows'
 import { GripperWizardFlows } from '/app/organisms/GripperWizardFlows'
 import { InstrumentInfo } from '..'
 
+import type { ComponentProps } from 'react'
+import type * as ReactRouterDom from 'react-router-dom'
 import type { GripperData } from '@opentrons/api-client'
-import type * as Dom from 'react-router-dom'
 
 const mockNavigate = vi.fn()
 
 vi.mock('/app/organisms/PipetteWizardFlows')
 vi.mock('/app/organisms/GripperWizardFlows')
 vi.mock('react-router-dom', async importOriginal => {
-  const reactRouterDom = await importOriginal<typeof Dom>()
+  const reactRouterDom = await importOriginal<typeof ReactRouterDom>()
   return {
     ...reactRouterDom,
     useNavigate: () => mockNavigate,
   }
 })
 
-const render = (props: React.ComponentProps<typeof InstrumentInfo>) => {
+const render = (props: ComponentProps<typeof InstrumentInfo>) => {
   return renderWithProviders(<InstrumentInfo {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -65,7 +65,7 @@ const mockGripperDataWithCalData: GripperData = {
 }
 
 describe('InstrumentInfo', () => {
-  let props: React.ComponentProps<typeof InstrumentInfo>
+  let props: ComponentProps<typeof InstrumentInfo>
   beforeEach(() => {
     vi.mocked(PipetteWizardFlows).mockReturnValue(
       <div>mock PipetteWizardFlows</div>
diff --git a/app/src/organisms/ODD/InstrumentMountItem/LabeledMount.tsx b/app/src/organisms/ODD/InstrumentMountItem/LabeledMount.tsx
index 20fe3941604..c909e4768f0 100644
--- a/app/src/organisms/ODD/InstrumentMountItem/LabeledMount.tsx
+++ b/app/src/organisms/ODD/InstrumentMountItem/LabeledMount.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 import {
@@ -15,6 +14,8 @@ import {
   TEXT_TRANSFORM_CAPITALIZE,
   TYPOGRAPHY,
 } from '@opentrons/components'
+
+import type { MouseEventHandler } from 'react'
 import type { Mount } from '/app/redux/pipettes/types'
 
 const MountButton = styled.button<{ isAttached: boolean }>`
@@ -34,7 +35,7 @@ const MountButton = styled.button<{ isAttached: boolean }>`
 interface LabeledMountProps {
   mount: Mount | 'extension'
   instrumentName: string | null
-  handleClick: React.MouseEventHandler
+  handleClick: MouseEventHandler
 }
 
 export function LabeledMount(props: LabeledMountProps): JSX.Element {
diff --git a/app/src/organisms/ODD/InstrumentMountItem/__tests__/ProtocolInstrumentMountItem.test.tsx b/app/src/organisms/ODD/InstrumentMountItem/__tests__/ProtocolInstrumentMountItem.test.tsx
index 6c4c308b8d2..52c62382241 100644
--- a/app/src/organisms/ODD/InstrumentMountItem/__tests__/ProtocolInstrumentMountItem.test.tsx
+++ b/app/src/organisms/ODD/InstrumentMountItem/__tests__/ProtocolInstrumentMountItem.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach } from 'vitest'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { LEFT } from '@opentrons/shared-data'
@@ -8,6 +7,8 @@ import { PipetteWizardFlows } from '/app/organisms/PipetteWizardFlows'
 import { GripperWizardFlows } from '/app/organisms/GripperWizardFlows'
 import { ProtocolInstrumentMountItem } from '..'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/organisms/PipetteWizardFlows')
 vi.mock('/app/organisms/GripperWizardFlows')
 vi.mock('../../TakeoverModal')
@@ -51,16 +52,14 @@ const mockLeftPipetteData = {
   ok: true,
 }
 
-const render = (
-  props: React.ComponentProps<typeof ProtocolInstrumentMountItem>
-) => {
+const render = (props: ComponentProps<typeof ProtocolInstrumentMountItem>) => {
   return renderWithProviders(<ProtocolInstrumentMountItem {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ProtocolInstrumentMountItem', () => {
-  let props: React.ComponentProps<typeof ProtocolInstrumentMountItem>
+  let props: ComponentProps<typeof ProtocolInstrumentMountItem>
   beforeEach(() => {
     props = {
       mount: LEFT,
diff --git a/app/src/organisms/ODD/NameRobot/__tests__/ConfirmRobotName.test.tsx b/app/src/organisms/ODD/NameRobot/__tests__/ConfirmRobotName.test.tsx
index d9e8521260e..21d34d3a59d 100644
--- a/app/src/organisms/ODD/NameRobot/__tests__/ConfirmRobotName.test.tsx
+++ b/app/src/organisms/ODD/NameRobot/__tests__/ConfirmRobotName.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -7,6 +6,7 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ConfirmRobotName } from '../ConfirmRobotName'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 const mockNavigate = vi.fn()
@@ -19,7 +19,7 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof ConfirmRobotName>) => {
+const render = (props: ComponentProps<typeof ConfirmRobotName>) => {
   return renderWithProviders(
     <MemoryRouter>
       <ConfirmRobotName {...props} />
@@ -31,7 +31,7 @@ const render = (props: React.ComponentProps<typeof ConfirmRobotName>) => {
 }
 
 describe('ConfirmRobotName', () => {
-  let props: React.ComponentProps<typeof ConfirmRobotName>
+  let props: ComponentProps<typeof ConfirmRobotName>
   beforeEach(() => {
     props = {
       robotName: 'otie',
diff --git a/app/src/organisms/ODD/Navigation/__tests__/Navigation.test.tsx b/app/src/organisms/ODD/Navigation/__tests__/Navigation.test.tsx
index c86ba363d5c..1a212f83e46 100644
--- a/app/src/organisms/ODD/Navigation/__tests__/Navigation.test.tsx
+++ b/app/src/organisms/ODD/Navigation/__tests__/Navigation.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -12,6 +11,8 @@ import { NavigationMenu } from '../NavigationMenu'
 import { Navigation } from '..'
 import { useScrollPosition } from '/app/local-resources/dom-utils'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/resources/networking/hooks/useNetworkConnection')
 vi.mock('/app/redux/discovery')
 vi.mock('../NavigationMenu')
@@ -19,7 +20,7 @@ vi.mock('/app/local-resources/dom-utils')
 
 mockConnectedRobot.name = '12345678901234567'
 
-const render = (props: React.ComponentProps<typeof Navigation>) => {
+const render = (props: ComponentProps<typeof Navigation>) => {
   return renderWithProviders(
     <MemoryRouter>
       <Navigation {...props} />
@@ -29,7 +30,7 @@ const render = (props: React.ComponentProps<typeof Navigation>) => {
 }
 
 describe('Navigation', () => {
-  let props: React.ComponentProps<typeof Navigation>
+  let props: ComponentProps<typeof Navigation>
   beforeEach(() => {
     props = {}
     vi.mocked(getLocalRobot).mockReturnValue(mockConnectedRobot)
diff --git a/app/src/organisms/ODD/Navigation/__tests__/NavigationMenu.test.tsx b/app/src/organisms/ODD/Navigation/__tests__/NavigationMenu.test.tsx
index b40122cdd6b..b4b70528cda 100644
--- a/app/src/organisms/ODD/Navigation/__tests__/NavigationMenu.test.tsx
+++ b/app/src/organisms/ODD/Navigation/__tests__/NavigationMenu.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -9,6 +8,7 @@ import { useLights } from '/app/resources/devices'
 import { RestartRobotConfirmationModal } from '../RestartRobotConfirmationModal'
 import { NavigationMenu } from '../NavigationMenu'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 vi.mock('/app/redux/robot-admin')
@@ -27,14 +27,14 @@ vi.mock('react-router-dom', async importOriginal => {
 
 const mockToggleLights = vi.fn()
 
-const render = (props: React.ComponentProps<typeof NavigationMenu>) => {
+const render = (props: ComponentProps<typeof NavigationMenu>) => {
   return renderWithProviders(<NavigationMenu {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('NavigationMenu', () => {
-  let props: React.ComponentProps<typeof NavigationMenu>
+  let props: ComponentProps<typeof NavigationMenu>
   beforeEach(() => {
     props = {
       onClick: vi.fn(),
diff --git a/app/src/organisms/ODD/Navigation/__tests__/RestartRobotConfirmationModal.test.tsx b/app/src/organisms/ODD/Navigation/__tests__/RestartRobotConfirmationModal.test.tsx
index 8922a4225c2..5b3bc007567 100644
--- a/app/src/organisms/ODD/Navigation/__tests__/RestartRobotConfirmationModal.test.tsx
+++ b/app/src/organisms/ODD/Navigation/__tests__/RestartRobotConfirmationModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -7,12 +6,14 @@ import { i18n } from '/app/i18n'
 import { restartRobot } from '/app/redux/robot-admin'
 import { RestartRobotConfirmationModal } from '../RestartRobotConfirmationModal'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/robot-admin')
 
 const mockFunc = vi.fn()
 
 const render = (
-  props: React.ComponentProps<typeof RestartRobotConfirmationModal>
+  props: ComponentProps<typeof RestartRobotConfirmationModal>
 ) => {
   return renderWithProviders(<RestartRobotConfirmationModal {...props} />, {
     i18nInstance: i18n,
@@ -20,7 +21,7 @@ const render = (
 }
 
 describe('RestartRobotConfirmationModal', () => {
-  let props: React.ComponentProps<typeof RestartRobotConfirmationModal>
+  let props: ComponentProps<typeof RestartRobotConfirmationModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/NetworkSettings/__tests__/AlternativeSecurityTypeModal.test.tsx b/app/src/organisms/ODD/NetworkSettings/__tests__/AlternativeSecurityTypeModal.test.tsx
index a01af9bba66..2707b07a8f5 100644
--- a/app/src/organisms/ODD/NetworkSettings/__tests__/AlternativeSecurityTypeModal.test.tsx
+++ b/app/src/organisms/ODD/NetworkSettings/__tests__/AlternativeSecurityTypeModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -6,6 +5,7 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { AlternativeSecurityTypeModal } from '../AlternativeSecurityTypeModal'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 const mockFunc = vi.fn()
@@ -18,16 +18,14 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (
-  props: React.ComponentProps<typeof AlternativeSecurityTypeModal>
-) => {
+const render = (props: ComponentProps<typeof AlternativeSecurityTypeModal>) => {
   return renderWithProviders(<AlternativeSecurityTypeModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('AlternativeSecurityTypeModal', () => {
-  let props: React.ComponentProps<typeof AlternativeSecurityTypeModal>
+  let props: ComponentProps<typeof AlternativeSecurityTypeModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/NetworkSettings/__tests__/ConnectingNetwork.test.tsx b/app/src/organisms/ODD/NetworkSettings/__tests__/ConnectingNetwork.test.tsx
index e040bee4572..29444afea6d 100644
--- a/app/src/organisms/ODD/NetworkSettings/__tests__/ConnectingNetwork.test.tsx
+++ b/app/src/organisms/ODD/NetworkSettings/__tests__/ConnectingNetwork.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it } from 'vitest'
@@ -7,7 +6,9 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ConnectingNetwork } from '../ConnectingNetwork'
 
-const render = (props: React.ComponentProps<typeof ConnectingNetwork>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ConnectingNetwork>) => {
   return renderWithProviders(
     <MemoryRouter>
       <ConnectingNetwork {...props} />
@@ -19,7 +20,7 @@ const render = (props: React.ComponentProps<typeof ConnectingNetwork>) => {
 }
 
 describe('ConnectingNetwork', () => {
-  let props: React.ComponentProps<typeof ConnectingNetwork>
+  let props: ComponentProps<typeof ConnectingNetwork>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/NetworkSettings/__tests__/DisplayWifiList.test.tsx b/app/src/organisms/ODD/NetworkSettings/__tests__/DisplayWifiList.test.tsx
index e1449be3b9d..11e0ef16a9b 100644
--- a/app/src/organisms/ODD/NetworkSettings/__tests__/DisplayWifiList.test.tsx
+++ b/app/src/organisms/ODD/NetworkSettings/__tests__/DisplayWifiList.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -8,6 +7,7 @@ import * as Fixtures from '/app/redux/networking/__fixtures__'
 import { DisplaySearchNetwork } from '../DisplaySearchNetwork'
 import { DisplayWifiList } from '../DisplayWifiList'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 const mockNavigate = vi.fn()
@@ -31,14 +31,14 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof DisplayWifiList>) => {
+const render = (props: ComponentProps<typeof DisplayWifiList>) => {
   return renderWithProviders(<DisplayWifiList {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('DisplayWifiList', () => {
-  let props: React.ComponentProps<typeof DisplayWifiList>
+  let props: ComponentProps<typeof DisplayWifiList>
   beforeEach(() => {
     props = {
       list: mockWifiList,
diff --git a/app/src/organisms/ODD/NetworkSettings/__tests__/FailedToConnect.test.tsx b/app/src/organisms/ODD/NetworkSettings/__tests__/FailedToConnect.test.tsx
index 3dbf7bf1f46..74e11378af8 100644
--- a/app/src/organisms/ODD/NetworkSettings/__tests__/FailedToConnect.test.tsx
+++ b/app/src/organisms/ODD/NetworkSettings/__tests__/FailedToConnect.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
@@ -7,9 +6,10 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { FailedToConnect } from '../FailedToConnect'
 
+import type { ComponentProps } from 'react'
 import type { RequestState } from '/app/redux/robot-api/types'
 
-const render = (props: React.ComponentProps<typeof FailedToConnect>) => {
+const render = (props: ComponentProps<typeof FailedToConnect>) => {
   return renderWithProviders(
     <MemoryRouter>
       <FailedToConnect {...props} />
@@ -33,7 +33,7 @@ const failureState = {
 } as RequestState
 
 describe('ConnectedResult', () => {
-  let props: React.ComponentProps<typeof FailedToConnect>
+  let props: ComponentProps<typeof FailedToConnect>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/NetworkSettings/__tests__/SelectAuthenticationType.test.tsx b/app/src/organisms/ODD/NetworkSettings/__tests__/SelectAuthenticationType.test.tsx
index bfce05cc22d..2520e944ad7 100644
--- a/app/src/organisms/ODD/NetworkSettings/__tests__/SelectAuthenticationType.test.tsx
+++ b/app/src/organisms/ODD/NetworkSettings/__tests__/SelectAuthenticationType.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { MemoryRouter } from 'react-router-dom'
 import { afterEach, beforeEach, describe, it, vi } from 'vitest'
@@ -11,6 +10,7 @@ import { AlternativeSecurityTypeModal } from '../AlternativeSecurityTypeModal'
 import { SelectAuthenticationType } from '../SelectAuthenticationType'
 import { SetWifiCred } from '../SetWifiCred'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 const mockNavigate = vi.fn()
@@ -36,9 +36,7 @@ const initialMockWifi = {
   type: INTERFACE_WIFI,
 }
 
-const render = (
-  props: React.ComponentProps<typeof SelectAuthenticationType>
-) => {
+const render = (props: ComponentProps<typeof SelectAuthenticationType>) => {
   return renderWithProviders(
     <MemoryRouter>
       <SelectAuthenticationType {...props} />
@@ -50,7 +48,7 @@ const render = (
 }
 
 describe('SelectAuthenticationType', () => {
-  let props: React.ComponentProps<typeof SelectAuthenticationType>
+  let props: ComponentProps<typeof SelectAuthenticationType>
   beforeEach(() => {
     props = {
       selectedAuthType: 'wpa-psk',
diff --git a/app/src/organisms/ODD/NetworkSettings/__tests__/SetWifiCred.test.tsx b/app/src/organisms/ODD/NetworkSettings/__tests__/SetWifiCred.test.tsx
index d1a25f069c9..85cc94d895e 100644
--- a/app/src/organisms/ODD/NetworkSettings/__tests__/SetWifiCred.test.tsx
+++ b/app/src/organisms/ODD/NetworkSettings/__tests__/SetWifiCred.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
@@ -7,11 +6,13 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { SetWifiCred } from '../SetWifiCred'
 
+import type { ComponentProps } from 'react'
+
 const mockSetPassword = vi.fn()
 vi.mock('/app/redux/discovery')
 vi.mock('/app/redux/robot-api')
 
-const render = (props: React.ComponentProps<typeof SetWifiCred>) => {
+const render = (props: ComponentProps<typeof SetWifiCred>) => {
   return renderWithProviders(
     <MemoryRouter>
       <SetWifiCred {...props} />
@@ -23,7 +24,7 @@ const render = (props: React.ComponentProps<typeof SetWifiCred>) => {
 }
 
 describe('SetWifiCred', () => {
-  let props: React.ComponentProps<typeof SetWifiCred>
+  let props: ComponentProps<typeof SetWifiCred>
   beforeEach(() => {
     props = {
       password: 'mock-password',
diff --git a/app/src/organisms/ODD/NetworkSettings/__tests__/SetWifiSsid.test.tsx b/app/src/organisms/ODD/NetworkSettings/__tests__/SetWifiSsid.test.tsx
index 11eab279c37..c5b0ff26ee5 100644
--- a/app/src/organisms/ODD/NetworkSettings/__tests__/SetWifiSsid.test.tsx
+++ b/app/src/organisms/ODD/NetworkSettings/__tests__/SetWifiSsid.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
@@ -7,8 +6,10 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { SetWifiSsid } from '../SetWifiSsid'
 
+import type { ComponentProps } from 'react'
+
 const mockSetSelectedSsid = vi.fn()
-const render = (props: React.ComponentProps<typeof SetWifiSsid>) => {
+const render = (props: ComponentProps<typeof SetWifiSsid>) => {
   return renderWithProviders(
     <MemoryRouter>
       <SetWifiSsid {...props} />
@@ -20,7 +21,7 @@ const render = (props: React.ComponentProps<typeof SetWifiSsid>) => {
 }
 
 describe('SetWifiSsid', () => {
-  let props: React.ComponentProps<typeof SetWifiSsid>
+  let props: ComponentProps<typeof SetWifiSsid>
   beforeEach(() => {
     props = {
       setInputSsid: mockSetSelectedSsid,
diff --git a/app/src/organisms/ODD/NetworkSettings/__tests__/WifiConnectionDetails.test.tsx b/app/src/organisms/ODD/NetworkSettings/__tests__/WifiConnectionDetails.test.tsx
index efcee37e0c6..76e63934328 100644
--- a/app/src/organisms/ODD/NetworkSettings/__tests__/WifiConnectionDetails.test.tsx
+++ b/app/src/organisms/ODD/NetworkSettings/__tests__/WifiConnectionDetails.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
@@ -11,6 +10,7 @@ import * as Fixtures from '/app/redux/networking/__fixtures__'
 import { NetworkDetailsModal } from '../../RobotSettingsDashboard/NetworkSettings/NetworkDetailsModal'
 import { WifiConnectionDetails } from '../WifiConnectionDetails'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 vi.mock('/app/resources/networking/hooks')
@@ -27,7 +27,7 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof WifiConnectionDetails>) => {
+const render = (props: ComponentProps<typeof WifiConnectionDetails>) => {
   return renderWithProviders(
     <MemoryRouter>
       <WifiConnectionDetails {...props} />
@@ -51,7 +51,7 @@ const mockWifiList = [
 ]
 
 describe('WifiConnectionDetails', () => {
-  let props: React.ComponentProps<typeof WifiConnectionDetails>
+  let props: ComponentProps<typeof WifiConnectionDetails>
   beforeEach(() => {
     props = {
       ssid: 'mockWifi',
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupDeckConfiguration/__tests__/ProtocolSetupDeckConfiguration.test.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupDeckConfiguration/__tests__/ProtocolSetupDeckConfiguration.test.tsx
index 84a7fd2eb87..21b26365d81 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupDeckConfiguration/__tests__/ProtocolSetupDeckConfiguration.test.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupDeckConfiguration/__tests__/ProtocolSetupDeckConfiguration.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, afterEach } from 'vitest'
@@ -15,6 +14,7 @@ import { useMostRecentCompletedAnalysis } from '/app/resources/runs'
 import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration'
 import { ProtocolSetupDeckConfiguration } from '..'
 
+import type { ComponentProps } from 'react'
 import type { UseQueryResult } from 'react-query'
 import type {
   CompletedProtocolAnalysis,
@@ -47,7 +47,7 @@ vi.mock('@opentrons/components', async importOriginal => {
 })
 
 const render = (
-  props: React.ComponentProps<typeof ProtocolSetupDeckConfiguration>
+  props: ComponentProps<typeof ProtocolSetupDeckConfiguration>
 ) => {
   return renderWithProviders(<ProtocolSetupDeckConfiguration {...props} />, {
     i18nInstance: i18n,
@@ -55,7 +55,7 @@ const render = (
 }
 
 describe('ProtocolSetupDeckConfiguration', () => {
-  let props: React.ComponentProps<typeof ProtocolSetupDeckConfiguration>
+  let props: ComponentProps<typeof ProtocolSetupDeckConfiguration>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupInstruments/ProtocolSetupInstruments.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupInstruments/ProtocolSetupInstruments.tsx
index 1af859bc431..1826ea10339 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupInstruments/ProtocolSetupInstruments.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupInstruments/ProtocolSetupInstruments.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import {
@@ -16,15 +15,16 @@ import { PipetteRecalibrationODDWarning } from '/app/organisms/ODD/PipetteRecali
 import { getShowPipetteCalibrationWarning } from '/app/transformations/instruments'
 import { useMostRecentCompletedAnalysis } from '/app/resources/runs'
 import { ProtocolInstrumentMountItem } from '/app/organisms/ODD/InstrumentMountItem'
+import { isGripperInCommands } from '/app/resources/protocols/utils'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { GripperData, PipetteData } from '@opentrons/api-client'
 import type { GripperModel } from '@opentrons/shared-data'
 import type { SetupScreens } from '../types'
-import { isGripperInCommands } from '/app/resources/protocols/utils'
 
 export interface ProtocolSetupInstrumentsProps {
   runId: string
-  setSetupScreen: React.Dispatch<React.SetStateAction<SetupScreens>>
+  setSetupScreen: Dispatch<SetStateAction<SetupScreens>>
 }
 
 export function ProtocolSetupInstruments({
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLabware/__tests__/LabwareMapView.test.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLabware/__tests__/LabwareMapView.test.tsx
index 860d927578e..3f387db51f6 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLabware/__tests__/LabwareMapView.test.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLabware/__tests__/LabwareMapView.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { when } from 'vitest-when'
 import { describe, it, vi, beforeEach, afterEach, expect } from 'vitest'
@@ -17,6 +16,7 @@ import { getStandardDeckViewLayerBlockList } from '/app/local-resources/deck_con
 import { mockProtocolModuleInfo } from '../__fixtures__'
 import { LabwareMapView } from '../LabwareMapView'
 
+import type { ComponentProps } from 'react'
 import type {
   getSimplestDeckConfigForProtocol,
   CompletedProtocolAnalysis,
@@ -50,7 +50,7 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof LabwareMapView>) => {
+const render = (props: ComponentProps<typeof LabwareMapView>) => {
   return renderWithProviders(
     <MemoryRouter>
       <LabwareMapView {...props} />
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLiquids/__tests__/LiquidDetails.test.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLiquids/__tests__/LiquidDetails.test.tsx
index 720b6db7545..9d05000cf8f 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLiquids/__tests__/LiquidDetails.test.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLiquids/__tests__/LiquidDetails.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen, fireEvent } from '@testing-library/react'
 import { describe, it, beforeEach, vi } from 'vitest'
 
@@ -13,20 +12,22 @@ import {
   MOCK_LABWARE_INFO_BY_LIQUID_ID,
   MOCK_PROTOCOL_ANALYSIS,
 } from '../fixtures'
+
+import type { ComponentProps } from 'react'
 import type { CompletedProtocolAnalysis } from '@opentrons/shared-data'
 
 vi.mock('/app/transformations/analysis')
 vi.mock('/app/transformations/commands')
 vi.mock('/app/organisms/LiquidsLabwareDetailsModal')
 
-const render = (props: React.ComponentProps<typeof LiquidDetails>) => {
+const render = (props: ComponentProps<typeof LiquidDetails>) => {
   return renderWithProviders(<LiquidDetails {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('LiquidDetails', () => {
-  let props: React.ComponentProps<typeof LiquidDetails>
+  let props: ComponentProps<typeof LiquidDetails>
   beforeEach(() => {
     props = {
       commands: (MOCK_PROTOCOL_ANALYSIS as CompletedProtocolAnalysis).commands,
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLiquids/__tests__/ProtocolSetupLiquids.test.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLiquids/__tests__/ProtocolSetupLiquids.test.tsx
index 487fbbd0bce..eed74fae79d 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLiquids/__tests__/ProtocolSetupLiquids.test.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLiquids/__tests__/ProtocolSetupLiquids.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, vi } from 'vitest'
 import { screen, fireEvent } from '@testing-library/react'
 
@@ -20,6 +19,7 @@ import {
 } from '../fixtures'
 import { ProtocolSetupLiquids } from '..'
 
+import type { ComponentProps } from 'react'
 import type * as SharedData from '@opentrons/shared-data'
 
 vi.mock('/app/transformations/analysis')
@@ -41,13 +41,13 @@ describe('ProtocolSetupLiquids', () => {
     isConfirmed = confirmed
   })
 
-  const render = (props: React.ComponentProps<typeof ProtocolSetupLiquids>) => {
+  const render = (props: ComponentProps<typeof ProtocolSetupLiquids>) => {
     return renderWithProviders(<ProtocolSetupLiquids {...props} />, {
       i18nInstance: i18n,
     })
   }
 
-  let props: React.ComponentProps<typeof ProtocolSetupLiquids>
+  let props: ComponentProps<typeof ProtocolSetupLiquids>
   beforeEach(() => {
     props = {
       runId: RUN_ID_1,
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/__tests__/FixtureTable.test.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/__tests__/FixtureTable.test.tsx
index e6ca8735d77..b5336d9c535 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/__tests__/FixtureTable.test.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/__tests__/FixtureTable.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, afterEach, vi, expect } from 'vitest'
 
@@ -18,6 +17,8 @@ import { FixtureTable } from '../FixtureTable'
 import { getLocalRobot } from '/app/redux/discovery'
 import { mockConnectedRobot } from '/app/redux/discovery/__fixtures__'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/discovery')
 vi.mock('/app/resources/deck_configuration/hooks')
 vi.mock('/app/organisms/LocationConflictModal')
@@ -26,14 +27,14 @@ const mockSetSetupScreen = vi.fn()
 const mockSetCutoutId = vi.fn()
 const mockSetProvidedFixtureOptions = vi.fn()
 
-const render = (props: React.ComponentProps<typeof FixtureTable>) => {
+const render = (props: ComponentProps<typeof FixtureTable>) => {
   return renderWithProviders(<FixtureTable {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('FixtureTable', () => {
-  let props: React.ComponentProps<typeof FixtureTable>
+  let props: ComponentProps<typeof FixtureTable>
   beforeEach(() => {
     props = {
       mostRecentAnalysis: { commands: [], labware: [] } as any,
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/__tests__/ModulesAndDeckMapView.test.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/__tests__/ModulesAndDeckMapView.test.tsx
index d31a0312d02..a06ad0118db 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/__tests__/ModulesAndDeckMapView.test.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/__tests__/ModulesAndDeckMapView.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, afterEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -12,6 +11,8 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ModulesAndDeckMapView } from '../ModulesAndDeckMapView'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/components/src/hardware-sim/BaseDeck')
 vi.mock('@opentrons/api-client')
 vi.mock('@opentrons/shared-data/js/helpers/getSimplestFlexDeckConfig')
@@ -99,14 +100,14 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof ModulesAndDeckMapView>) => {
+const render = (props: ComponentProps<typeof ModulesAndDeckMapView>) => {
   return renderWithProviders(<ModulesAndDeckMapView {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ModulesAndDeckMapView', () => {
-  let props: React.ComponentProps<typeof ModulesAndDeckMapView>
+  let props: ComponentProps<typeof ModulesAndDeckMapView>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/__tests__/SetupInstructionsModal.test.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/__tests__/SetupInstructionsModal.test.tsx
index 8f6f4c01739..f4ac8d4fec1 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/__tests__/SetupInstructionsModal.test.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/__tests__/SetupInstructionsModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, beforeEach, vi } from 'vitest'
 
@@ -7,18 +6,20 @@ import { i18n } from '/app/i18n'
 
 import { SetupInstructionsModal } from '../SetupInstructionsModal'
 
+import type { ComponentProps } from 'react'
+
 const mockSetShowSetupInstructionsModal = vi.fn()
 const QR_CODE_IMAGE_FILE =
   '/app/src/assets/images/on-device-display/setup_instructions_qr_code.png'
 
-const render = (props: React.ComponentProps<typeof SetupInstructionsModal>) => {
+const render = (props: ComponentProps<typeof SetupInstructionsModal>) => {
   return renderWithProviders(<SetupInstructionsModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('SetupInstructionsModal', () => {
-  let props: React.ComponentProps<typeof SetupInstructionsModal>
+  let props: ComponentProps<typeof SetupInstructionsModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupOffsets/index.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupOffsets/index.tsx
index 310c1dadbc4..85e9352d5fe 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupOffsets/index.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupOffsets/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   Chip,
@@ -24,9 +23,11 @@ import {
 } from '/app/resources/runs'
 import { getLatestCurrentOffsets } from '/app/transformations/runs'
 
+import type { Dispatch, SetStateAction } from 'react'
+
 export interface ProtocolSetupOffsetsProps {
   runId: string
-  setSetupScreen: React.Dispatch<React.SetStateAction<SetupScreens>>
+  setSetupScreen: Dispatch<SetStateAction<SetupScreens>>
   lpcDisabledReason: string | null
   launchLPC: () => void
   LPCWizard: JSX.Element | null
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/ViewOnlyParameters.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/ViewOnlyParameters.tsx
index 1946d122848..7f5b73db3b0 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/ViewOnlyParameters.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/ViewOnlyParameters.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { css } from 'styled-components'
 
@@ -22,11 +21,12 @@ import { useMostRecentCompletedAnalysis } from '/app/resources/runs'
 import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation'
 import { useToaster } from '/app/organisms/ToasterOven'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { SetupScreens } from '../types'
 
 export interface ViewOnlyParametersProps {
   runId: string
-  setSetupScreen: React.Dispatch<React.SetStateAction<SetupScreens>>
+  setSetupScreen: Dispatch<SetStateAction<SetupScreens>>
 }
 
 export function ViewOnlyParameters({
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/AnalysisFailedModal.test.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/AnalysisFailedModal.test.tsx
index ac43f26d621..dec3fc608e2 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/AnalysisFailedModal.test.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/AnalysisFailedModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { when } from 'vitest-when'
 import { fireEvent, screen } from '@testing-library/react'
@@ -7,6 +6,8 @@ import { useDismissCurrentRunMutation } from '@opentrons/react-api-client'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { AnalysisFailedModal } from '../AnalysisFailedModal'
+
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 const PROTOCOL_ID = 'mockProtocolId'
@@ -26,14 +27,14 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof AnalysisFailedModal>) => {
+const render = (props: ComponentProps<typeof AnalysisFailedModal>) => {
   return renderWithProviders(<AnalysisFailedModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('AnalysisFailedModal', () => {
-  let props: React.ComponentProps<typeof AnalysisFailedModal>
+  let props: ComponentProps<typeof AnalysisFailedModal>
 
   when(vi.mocked(useDismissCurrentRunMutation))
     .calledWith()
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ChooseCsvFile.test.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ChooseCsvFile.test.tsx
index 2f365fa5fbc..560f9f9490a 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ChooseCsvFile.test.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ChooseCsvFile.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 import { screen, fireEvent } from '@testing-library/react'
 import { when } from 'vitest-when'
@@ -13,6 +12,7 @@ import { getShellUpdateDataFiles } from '/app/redux/shell'
 import { EmptyFile } from '../EmptyFile'
 import { ChooseCsvFile } from '../ChooseCsvFile'
 
+import type { ComponentProps } from 'react'
 import type { CsvFileParameter } from '@opentrons/shared-data'
 
 vi.mock('@opentrons/react-api-client')
@@ -47,14 +47,14 @@ const mockDataOnRobot = {
   },
 }
 
-const render = (props: React.ComponentProps<typeof ChooseCsvFile>) => {
+const render = (props: ComponentProps<typeof ChooseCsvFile>) => {
   return renderWithProviders(<ChooseCsvFile {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('ChooseCsvFile', () => {
-  let props: React.ComponentProps<typeof ChooseCsvFile>
+  let props: ComponentProps<typeof ChooseCsvFile>
   beforeEach(() => {
     props = {
       protocolId: PROTOCOL_ID,
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ChooseEnum.test.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ChooseEnum.test.tsx
index a65c760d544..613e17c9523 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ChooseEnum.test.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ChooseEnum.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { it, describe, beforeEach, vi, expect } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
@@ -7,14 +6,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ChooseEnum } from '../ChooseEnum'
 
+import type { ComponentProps } from 'react'
+
 vi.mocked('../../../../ToasterOven')
-const render = (props: React.ComponentProps<typeof ChooseEnum>) => {
+const render = (props: ComponentProps<typeof ChooseEnum>) => {
   return renderWithProviders(<ChooseEnum {...props} />, {
     i18nInstance: i18n,
   })
 }
 describe('ChooseEnum', () => {
-  let props: React.ComponentProps<typeof ChooseEnum>
+  let props: ComponentProps<typeof ChooseEnum>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ChooseNumber.test.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ChooseNumber.test.tsx
index 611c0e124fc..89af3d22e4c 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ChooseNumber.test.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ChooseNumber.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { it, describe, beforeEach, vi, expect } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
@@ -8,6 +7,7 @@ import { useToaster } from '/app/organisms/ToasterOven'
 import { mockRunTimeParameterData } from '../../__fixtures__'
 import { ChooseNumber } from '../ChooseNumber'
 
+import type { ComponentProps } from 'react'
 import type { NumberParameter } from '@opentrons/shared-data'
 
 vi.mock('/app/organisms/ToasterOven')
@@ -18,14 +18,14 @@ const mockFloatNumberParameterData = mockRunTimeParameterData[6] as NumberParame
 const mockSetParameter = vi.fn()
 const mockMakeSnackbar = vi.fn()
 
-const render = (props: React.ComponentProps<typeof ChooseNumber>) => {
+const render = (props: ComponentProps<typeof ChooseNumber>) => {
   return renderWithProviders(<ChooseNumber {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('ChooseNumber', () => {
-  let props: React.ComponentProps<typeof ChooseNumber>
+  let props: ComponentProps<typeof ChooseNumber>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ProtocolSetupParameters.test.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ProtocolSetupParameters.test.tsx
index 18a01391711..f32442f7fda 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ProtocolSetupParameters.test.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ProtocolSetupParameters.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { it, describe, beforeEach, vi, expect } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -19,6 +18,7 @@ import { mockRunTimeParameterData } from '../../__fixtures__'
 import { useToaster } from '/app/organisms/ToasterOven'
 import { ProtocolSetupParameters } from '..'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 import type { HostConfig } from '@opentrons/api-client'
 import type { CompletedProtocolAnalysis } from '@opentrons/shared-data'
@@ -51,16 +51,14 @@ const mockMostRecentAnalysis = ({
 } as unknown) as CompletedProtocolAnalysis
 const mockMakeSnackbar = vi.fn()
 
-const render = (
-  props: React.ComponentProps<typeof ProtocolSetupParameters>
-) => {
+const render = (props: ComponentProps<typeof ProtocolSetupParameters>) => {
   return renderWithProviders(<ProtocolSetupParameters {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('ProtocolSetupParameters', () => {
-  let props: React.ComponentProps<typeof ProtocolSetupParameters>
+  let props: ComponentProps<typeof ProtocolSetupParameters>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ResetValuesModal.test.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ResetValuesModal.test.tsx
index 4e263f9984b..d777a44da04 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ResetValuesModal.test.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ResetValuesModal.test.tsx
@@ -1,23 +1,24 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ResetValuesModal } from '../ResetValuesModal'
+
+import type { ComponentProps } from 'react'
 import type { RunTimeParameter } from '@opentrons/shared-data'
 
 const mockGoBack = vi.fn()
 const mockSetRunTimeParametersOverrides = vi.fn()
 
-const render = (props: React.ComponentProps<typeof ResetValuesModal>) => {
+const render = (props: ComponentProps<typeof ResetValuesModal>) => {
   return renderWithProviders(<ResetValuesModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('ResetValuesModal', () => {
-  let props: React.ComponentProps<typeof ResetValuesModal>
+  let props: ComponentProps<typeof ResetValuesModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ViewOnlyParameters.test.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ViewOnlyParameters.test.tsx
index aed74fea585..2c0827de156 100644
--- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ViewOnlyParameters.test.tsx
+++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupParameters/__tests__/ViewOnlyParameters.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { it, describe, beforeEach, vi, expect } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -9,17 +8,19 @@ import { useToaster } from '/app/organisms/ToasterOven'
 import { mockRunTimeParameterData } from '../../__fixtures__'
 import { ViewOnlyParameters } from '../ViewOnlyParameters'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/resources/runs')
 vi.mock('/app/organisms/ToasterOven')
 const RUN_ID = 'mockId'
-const render = (props: React.ComponentProps<typeof ViewOnlyParameters>) => {
+const render = (props: ComponentProps<typeof ViewOnlyParameters>) => {
   return renderWithProviders(<ViewOnlyParameters {...props} />, {
     i18nInstance: i18n,
   })
 }
 const mockMakeSnackBar = vi.fn()
 describe('ViewOnlyParameters', () => {
-  let props: React.ComponentProps<typeof ViewOnlyParameters>
+  let props: ComponentProps<typeof ViewOnlyParameters>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/CreateNewTransfer.tsx b/app/src/organisms/ODD/QuickTransferFlow/CreateNewTransfer.tsx
index 10b036b9064..b74ecc7065e 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/CreateNewTransfer.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/CreateNewTransfer.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation, Trans } from 'react-i18next'
 
 import {
@@ -12,11 +11,13 @@ import {
 
 import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation'
 import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration'
+
+import type { ComponentProps } from 'react'
 import type { SmallButton } from '/app/atoms/buttons'
 
 interface CreateNewTransferProps {
   onNext: () => void
-  exitButtonProps: React.ComponentProps<typeof SmallButton>
+  exitButtonProps: ComponentProps<typeof SmallButton>
 }
 
 export function CreateNewTransfer(props: CreateNewTransferProps): JSX.Element {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/ConfirmExitModal.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/ConfirmExitModal.test.tsx
index 4b50c31ca29..18fdc854a85 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/ConfirmExitModal.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/ConfirmExitModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -6,14 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ConfirmExitModal } from '../ConfirmExitModal'
 
-const render = (props: React.ComponentProps<typeof ConfirmExitModal>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ConfirmExitModal>) => {
   return renderWithProviders(<ConfirmExitModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('ConfirmExitModal', () => {
-  let props: React.ComponentProps<typeof ConfirmExitModal>
+  let props: ComponentProps<typeof ConfirmExitModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/CreateNewTransfer.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/CreateNewTransfer.test.tsx
index 178086ae401..7d134e0e2be 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/CreateNewTransfer.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/CreateNewTransfer.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 import { DeckConfigurator } from '@opentrons/components'
@@ -7,6 +6,7 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { CreateNewTransfer } from '../CreateNewTransfer'
 
+import type { ComponentProps } from 'react'
 import type * as OpentronsComponents from '@opentrons/components'
 
 vi.mock('@opentrons/components', async importOriginal => {
@@ -16,14 +16,14 @@ vi.mock('@opentrons/components', async importOriginal => {
     DeckConfigurator: vi.fn(),
   }
 })
-const render = (props: React.ComponentProps<typeof CreateNewTransfer>) => {
+const render = (props: ComponentProps<typeof CreateNewTransfer>) => {
   return renderWithProviders(<CreateNewTransfer {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('CreateNewTransfer', () => {
-  let props: React.ComponentProps<typeof CreateNewTransfer>
+  let props: ComponentProps<typeof CreateNewTransfer>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/NameQuickTransfer.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/NameQuickTransfer.test.tsx
index 363c89cdc82..3b247ce2ef8 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/NameQuickTransfer.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/NameQuickTransfer.test.tsx
@@ -1,10 +1,11 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { NameQuickTransfer } from '../NameQuickTransfer'
+
+import type { ComponentProps } from 'react'
 import type { InputField } from '@opentrons/components'
 
 vi.mock('../utils')
@@ -17,14 +18,14 @@ vi.mock('/app/atoms/InputField', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof NameQuickTransfer>) => {
+const render = (props: ComponentProps<typeof NameQuickTransfer>) => {
   return renderWithProviders(<NameQuickTransfer {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('NameQuickTransfer', () => {
-  let props: React.ComponentProps<typeof NameQuickTransfer>
+  let props: ComponentProps<typeof NameQuickTransfer>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/Overview.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/Overview.test.tsx
index 242b0f58a92..192d378f97c 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/Overview.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/Overview.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, afterEach, vi, beforeEach } from 'vitest'
 
@@ -6,14 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { Overview } from '../Overview'
 
-const render = (props: React.ComponentProps<typeof Overview>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Overview>) => {
   return renderWithProviders(<Overview {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('Overview', () => {
-  let props: React.ComponentProps<typeof Overview>
+  let props: ComponentProps<typeof Overview>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/AirGap.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/AirGap.test.tsx
index a4cc4a2879a..f1e6245389f 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/AirGap.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/AirGap.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -8,6 +7,8 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { AirGap } from '../../QuickTransferAdvancedSettings/AirGap'
+
+import type { ComponentProps } from 'react'
 import type { QuickTransferSummaryState } from '../../types'
 
 vi.mock('/app/redux-resources/analytics')
@@ -21,7 +22,7 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof AirGap>) => {
+const render = (props: ComponentProps<typeof AirGap>) => {
   return renderWithProviders(<AirGap {...props} />, {
     i18nInstance: i18n,
   })
@@ -29,7 +30,7 @@ const render = (props: React.ComponentProps<typeof AirGap>) => {
 let mockTrackEventWithRobotSerial: any
 
 describe('AirGap', () => {
-  let props: React.ComponentProps<typeof AirGap>
+  let props: ComponentProps<typeof AirGap>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/BlowOut.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/BlowOut.test.tsx
index c75788ac8cd..6921e9daea7 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/BlowOut.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/BlowOut.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -7,13 +6,15 @@ import { i18n } from '/app/i18n'
 import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration'
 import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { BlowOut } from '../../QuickTransferAdvancedSettings/BlowOut'
+
+import type { ComponentProps } from 'react'
 import type { QuickTransferSummaryState } from '../../types'
 
 vi.mock('/app/resources/deck_configuration')
 vi.mock('/app/redux-resources/analytics')
 vi.mock('../utils')
 
-const render = (props: React.ComponentProps<typeof BlowOut>) => {
+const render = (props: ComponentProps<typeof BlowOut>) => {
   return renderWithProviders(<BlowOut {...props} />, {
     i18nInstance: i18n,
   })
@@ -21,7 +22,7 @@ const render = (props: React.ComponentProps<typeof BlowOut>) => {
 let mockTrackEventWithRobotSerial: any
 
 describe('BlowOut', () => {
-  let props: React.ComponentProps<typeof BlowOut>
+  let props: ComponentProps<typeof BlowOut>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/Delay.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/Delay.test.tsx
index 957f3eb6e62..32b26e4712f 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/Delay.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/Delay.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -8,6 +7,8 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { Delay } from '../../QuickTransferAdvancedSettings/Delay'
+
+import type { ComponentProps } from 'react'
 import type { QuickTransferSummaryState } from '../../types'
 
 vi.mock('/app/redux-resources/analytics')
@@ -21,7 +22,7 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof Delay>) => {
+const render = (props: ComponentProps<typeof Delay>) => {
   return renderWithProviders(<Delay {...props} />, {
     i18nInstance: i18n,
   })
@@ -29,7 +30,7 @@ const render = (props: React.ComponentProps<typeof Delay>) => {
 let mockTrackEventWithRobotSerial: any
 
 describe('Delay', () => {
-  let props: React.ComponentProps<typeof Delay>
+  let props: ComponentProps<typeof Delay>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/FlowRate.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/FlowRate.test.tsx
index 4b01bb52ebe..413af34ce99 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/FlowRate.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/FlowRate.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -8,6 +7,8 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { FlowRateEntry } from '../../QuickTransferAdvancedSettings/FlowRate'
+
+import type { ComponentProps } from 'react'
 import type { QuickTransferSummaryState } from '../../types'
 
 vi.mock('/app/redux-resources/analytics')
@@ -21,7 +22,7 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof FlowRateEntry>) => {
+const render = (props: ComponentProps<typeof FlowRateEntry>) => {
   return renderWithProviders(<FlowRateEntry {...props} />, {
     i18nInstance: i18n,
   })
@@ -29,7 +30,7 @@ const render = (props: React.ComponentProps<typeof FlowRateEntry>) => {
 let mockTrackEventWithRobotSerial: any
 
 describe('FlowRate', () => {
-  let props: React.ComponentProps<typeof FlowRateEntry>
+  let props: ComponentProps<typeof FlowRateEntry>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/Mix.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/Mix.test.tsx
index c4d1c170be3..298bd040f1c 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/Mix.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/Mix.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -8,6 +7,8 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { Mix } from '../../QuickTransferAdvancedSettings/Mix'
+
+import type { ComponentProps } from 'react'
 import type { QuickTransferSummaryState } from '../../types'
 
 vi.mock('/app/redux-resources/analytics')
@@ -21,7 +22,7 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof Mix>) => {
+const render = (props: ComponentProps<typeof Mix>) => {
   return renderWithProviders(<Mix {...props} />, {
     i18nInstance: i18n,
   })
@@ -29,7 +30,7 @@ const render = (props: React.ComponentProps<typeof Mix>) => {
 let mockTrackEventWithRobotSerial: any
 
 describe('Mix', () => {
-  let props: React.ComponentProps<typeof Mix>
+  let props: ComponentProps<typeof Mix>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/PipettePath.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/PipettePath.test.tsx
index e62571bdc6a..536c14bbbfd 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/PipettePath.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/PipettePath.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -9,6 +8,8 @@ import { i18n } from '/app/i18n'
 import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { PipettePath } from '../../QuickTransferAdvancedSettings/PipettePath'
 import { useBlowOutLocationOptions } from '../../QuickTransferAdvancedSettings/BlowOut'
+
+import type { ComponentProps } from 'react'
 import type { QuickTransferSummaryState } from '../../types'
 
 vi.mock('/app/redux-resources/analytics')
@@ -23,7 +24,7 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof PipettePath>) => {
+const render = (props: ComponentProps<typeof PipettePath>) => {
   return renderWithProviders(<PipettePath {...props} />, {
     i18nInstance: i18n,
   })
@@ -31,7 +32,7 @@ const render = (props: React.ComponentProps<typeof PipettePath>) => {
 let mockTrackEventWithRobotSerial: any
 
 describe('PipettePath', () => {
-  let props: React.ComponentProps<typeof PipettePath>
+  let props: ComponentProps<typeof PipettePath>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/QuickTransferAdvancedSettings.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/QuickTransferAdvancedSettings.test.tsx
index 64e400f5a10..aac998fc8dd 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/QuickTransferAdvancedSettings.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/QuickTransferAdvancedSettings.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -16,6 +15,8 @@ import { TouchTip } from '../../QuickTransferAdvancedSettings/TouchTip'
 import { AirGap } from '../../QuickTransferAdvancedSettings/AirGap'
 import { BlowOut } from '../../QuickTransferAdvancedSettings/BlowOut'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux-resources/analytics')
 vi.mock('/app/organisms/ToasterOven')
 vi.mock('../../QuickTransferAdvancedSettings/PipettePath')
@@ -28,7 +29,7 @@ vi.mock('../../QuickTransferAdvancedSettings/AirGap')
 vi.mock('../../QuickTransferAdvancedSettings/BlowOut')
 
 const render = (
-  props: React.ComponentProps<typeof QuickTransferAdvancedSettings>
+  props: ComponentProps<typeof QuickTransferAdvancedSettings>
 ): any => {
   return renderWithProviders(<QuickTransferAdvancedSettings {...props} />, {
     i18nInstance: i18n,
@@ -38,7 +39,7 @@ let mockTrackEventWithRobotSerial: any
 let mockMakeSnackbar: any
 
 describe('QuickTransferAdvancedSettings', () => {
-  let props: React.ComponentProps<typeof QuickTransferAdvancedSettings>
+  let props: ComponentProps<typeof QuickTransferAdvancedSettings>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/TipPosition.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/TipPosition.test.tsx
index dc109c2c302..02e5022785c 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/TipPosition.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/TipPosition.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -8,6 +7,8 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { TipPositionEntry } from '../../QuickTransferAdvancedSettings/TipPosition'
+
+import type { ComponentProps } from 'react'
 import type { QuickTransferSummaryState } from '../../types'
 
 vi.mock('/app/redux-resources/analytics')
@@ -21,7 +22,7 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof TipPositionEntry>) => {
+const render = (props: ComponentProps<typeof TipPositionEntry>) => {
   return renderWithProviders(<TipPositionEntry {...props} />, {
     i18nInstance: i18n,
   })
@@ -29,7 +30,7 @@ const render = (props: React.ComponentProps<typeof TipPositionEntry>) => {
 let mockTrackEventWithRobotSerial: any
 
 describe('TipPosition', () => {
-  let props: React.ComponentProps<typeof TipPositionEntry>
+  let props: ComponentProps<typeof TipPositionEntry>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/TouchTip.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/TouchTip.test.tsx
index cc30db0a54f..a5338c8aa71 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/TouchTip.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/QuickTransferAdvancedSettings/TouchTip.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -8,6 +7,8 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { TouchTip } from '../../QuickTransferAdvancedSettings/TouchTip'
+
+import type { ComponentProps } from 'react'
 import type { QuickTransferSummaryState } from '../../types'
 
 vi.mock('/app/redux-resources/analytics')
@@ -21,7 +22,7 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof TouchTip>) => {
+const render = (props: ComponentProps<typeof TouchTip>) => {
   return renderWithProviders(<TouchTip {...props} />, {
     i18nInstance: i18n,
   })
@@ -29,7 +30,7 @@ const render = (props: React.ComponentProps<typeof TouchTip>) => {
 let mockTrackEventWithRobotSerial: any
 
 describe('TouchTip', () => {
-  let props: React.ComponentProps<typeof TouchTip>
+  let props: ComponentProps<typeof TouchTip>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectDestLabware.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectDestLabware.test.tsx
index 6448542c14e..38007f7cc58 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectDestLabware.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectDestLabware.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -6,15 +5,17 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { SelectDestLabware } from '../SelectDestLabware'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
-const render = (props: React.ComponentProps<typeof SelectDestLabware>) => {
+const render = (props: ComponentProps<typeof SelectDestLabware>) => {
   return renderWithProviders(<SelectDestLabware {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('SelectDestLabware', () => {
-  let props: React.ComponentProps<typeof SelectDestLabware>
+  let props: ComponentProps<typeof SelectDestLabware>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectPipette.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectPipette.test.tsx
index e32f7645593..b614041b127 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectPipette.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectPipette.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 import { useInstrumentsQuery } from '@opentrons/react-api-client'
@@ -8,17 +7,19 @@ import { i18n } from '/app/i18n'
 import { useIsOEMMode } from '/app/resources/robot-settings/hooks'
 import { SelectPipette } from '../SelectPipette'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
 vi.mock('/app/resources/robot-settings/hooks')
 
-const render = (props: React.ComponentProps<typeof SelectPipette>) => {
+const render = (props: ComponentProps<typeof SelectPipette>) => {
   return renderWithProviders(<SelectPipette {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('SelectPipette', () => {
-  let props: React.ComponentProps<typeof SelectPipette>
+  let props: ComponentProps<typeof SelectPipette>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectSourceLabware.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectSourceLabware.test.tsx
index 73121ea7b2d..99e53fab15b 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectSourceLabware.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectSourceLabware.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -6,15 +5,17 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { SelectSourceLabware } from '../SelectSourceLabware'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
-const render = (props: React.ComponentProps<typeof SelectSourceLabware>) => {
+const render = (props: ComponentProps<typeof SelectSourceLabware>) => {
   return renderWithProviders(<SelectSourceLabware {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('SelectSourceLabware', () => {
-  let props: React.ComponentProps<typeof SelectSourceLabware>
+  let props: ComponentProps<typeof SelectSourceLabware>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectTipRack.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectTipRack.test.tsx
index f4ee22bd2b9..1489e744ec6 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectTipRack.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/SelectTipRack.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -6,15 +5,17 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { SelectTipRack } from '../SelectTipRack'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
-const render = (props: React.ComponentProps<typeof SelectTipRack>) => {
+const render = (props: ComponentProps<typeof SelectTipRack>) => {
   return renderWithProviders(<SelectTipRack {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('SelectTipRack', () => {
-  let props: React.ComponentProps<typeof SelectTipRack>
+  let props: ComponentProps<typeof SelectTipRack>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/SummaryAndSettings.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/SummaryAndSettings.test.tsx
index 0f5f7c7742c..246fa343260 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/SummaryAndSettings.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/SummaryAndSettings.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -16,6 +15,8 @@ import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { SummaryAndSettings } from '../SummaryAndSettings'
 import { NameQuickTransfer } from '../NameQuickTransfer'
 import { Overview } from '../Overview'
+
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 const mockNavigate = vi.fn()
@@ -41,7 +42,7 @@ vi.mock('../utils/createQuickTransferFile')
 vi.mock('@opentrons/react-api-client')
 vi.mock('/app/resources/deck_configuration')
 
-const render = (props: React.ComponentProps<typeof SummaryAndSettings>) => {
+const render = (props: ComponentProps<typeof SummaryAndSettings>) => {
   return renderWithProviders(<SummaryAndSettings {...props} />, {
     i18nInstance: i18n,
   })
@@ -49,7 +50,7 @@ const render = (props: React.ComponentProps<typeof SummaryAndSettings>) => {
 let mockTrackEventWithRobotSerial: any
 
 describe('SummaryAndSettings', () => {
-  let props: React.ComponentProps<typeof SummaryAndSettings>
+  let props: ComponentProps<typeof SummaryAndSettings>
   const createProtocol = vi.fn()
   const createRun = vi.fn()
 
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/TipManagement/ChangeTip.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/TipManagement/ChangeTip.test.tsx
index 213633678e5..cfe5b0a5086 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/TipManagement/ChangeTip.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/TipManagement/ChangeTip.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -8,9 +7,11 @@ import { ANALYTICS_QUICK_TRANSFER_SETTING_SAVED } from '/app/redux/analytics'
 import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { ChangeTip } from '../../TipManagement/ChangeTip'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux-resources/analytics')
 
-const render = (props: React.ComponentProps<typeof ChangeTip>): any => {
+const render = (props: ComponentProps<typeof ChangeTip>): any => {
   return renderWithProviders(<ChangeTip {...props} />, {
     i18nInstance: i18n,
   })
@@ -19,7 +20,7 @@ const render = (props: React.ComponentProps<typeof ChangeTip>): any => {
 let mockTrackEventWithRobotSerial: any
 
 describe('ChangeTip', () => {
-  let props: React.ComponentProps<typeof ChangeTip>
+  let props: ComponentProps<typeof ChangeTip>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/TipManagement/TipDropLocation.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/TipManagement/TipDropLocation.test.tsx
index aed3d143b31..712e7e2217e 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/TipManagement/TipDropLocation.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/TipManagement/TipDropLocation.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -9,10 +8,12 @@ import { ANALYTICS_QUICK_TRANSFER_SETTING_SAVED } from '/app/redux/analytics'
 import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics'
 import { TipDropLocation } from '../../TipManagement/TipDropLocation'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/resources/deck_configuration')
 vi.mock('/app/redux-resources/analytics')
 
-const render = (props: React.ComponentProps<typeof TipDropLocation>): any => {
+const render = (props: ComponentProps<typeof TipDropLocation>): any => {
   return renderWithProviders(<TipDropLocation {...props} />, {
     i18nInstance: i18n,
   })
@@ -20,7 +21,7 @@ const render = (props: React.ComponentProps<typeof TipDropLocation>): any => {
 let mockTrackEventWithRobotSerial: any
 
 describe('TipDropLocation', () => {
-  let props: React.ComponentProps<typeof TipDropLocation>
+  let props: ComponentProps<typeof TipDropLocation>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/TipManagement/TipManagement.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/TipManagement/TipManagement.test.tsx
index 618153a8b53..61f38149a99 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/TipManagement/TipManagement.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/TipManagement/TipManagement.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -10,11 +9,13 @@ import { ChangeTip } from '../../TipManagement/ChangeTip'
 import { TipDropLocation } from '../../TipManagement/TipDropLocation'
 import { TipManagement } from '../../TipManagement/'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../../TipManagement/ChangeTip')
 vi.mock('../../TipManagement/TipDropLocation')
 vi.mock('/app/redux-resources/analytics')
 
-const render = (props: React.ComponentProps<typeof TipManagement>): any => {
+const render = (props: ComponentProps<typeof TipManagement>): any => {
   return renderWithProviders(<TipManagement {...props} />, {
     i18nInstance: i18n,
   })
@@ -22,7 +23,7 @@ const render = (props: React.ComponentProps<typeof TipManagement>): any => {
 let mockTrackEventWithRobotSerial: any
 
 describe('TipManagement', () => {
-  let props: React.ComponentProps<typeof TipManagement>
+  let props: ComponentProps<typeof TipManagement>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/QuickTransferFlow/__tests__/VolumeEntry.test.tsx b/app/src/organisms/ODD/QuickTransferFlow/__tests__/VolumeEntry.test.tsx
index 8a14b9a5993..e96ea2515cd 100644
--- a/app/src/organisms/ODD/QuickTransferFlow/__tests__/VolumeEntry.test.tsx
+++ b/app/src/organisms/ODD/QuickTransferFlow/__tests__/VolumeEntry.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest'
 
@@ -10,6 +9,8 @@ import { NumericalKeyboard } from '/app/atoms/SoftwareKeyboard'
 import { getVolumeRange } from '../utils'
 import { VolumeEntry } from '../VolumeEntry'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/atoms/SoftwareKeyboard')
 vi.mock('../utils')
 
@@ -21,14 +22,14 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof VolumeEntry>) => {
+const render = (props: ComponentProps<typeof VolumeEntry>) => {
   return renderWithProviders(<VolumeEntry {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('VolumeEntry', () => {
-  let props: React.ComponentProps<typeof VolumeEntry>
+  let props: ComponentProps<typeof VolumeEntry>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/RobotDashboard/__tests__/RecentRunProtocolCard.test.tsx b/app/src/organisms/ODD/RobotDashboard/__tests__/RecentRunProtocolCard.test.tsx
index 10ee119176e..cb1b541b39b 100644
--- a/app/src/organisms/ODD/RobotDashboard/__tests__/RecentRunProtocolCard.test.tsx
+++ b/app/src/organisms/ODD/RobotDashboard/__tests__/RecentRunProtocolCard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { formatDistance } from 'date-fns'
 import { MemoryRouter } from 'react-router-dom'
@@ -26,6 +25,7 @@ import { useCloneRun, useNotifyAllRunsQuery } from '/app/resources/runs'
 import { useRerunnableStatusText } from '../hooks'
 import { RecentRunProtocolCard } from '../'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 import type { ProtocolHardware } from '/app/transformations/commands'
 
@@ -103,7 +103,7 @@ const mockBadRunData = {
 
 const mockCloneRun = vi.fn()
 
-const render = (props: React.ComponentProps<typeof RecentRunProtocolCard>) => {
+const render = (props: ComponentProps<typeof RecentRunProtocolCard>) => {
   return renderWithProviders(
     <MemoryRouter>
       <RecentRunProtocolCard {...props} />
@@ -120,7 +120,7 @@ const mockTrackProtocolRunEvent = vi.fn(
 )
 
 describe('RecentRunProtocolCard', () => {
-  let props: React.ComponentProps<typeof RecentRunProtocolCard>
+  let props: ComponentProps<typeof RecentRunProtocolCard>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/RobotDashboard/__tests__/RecentRunProtocolCarousel.test.tsx b/app/src/organisms/ODD/RobotDashboard/__tests__/RecentRunProtocolCarousel.test.tsx
index 277edf80d87..31026884d3c 100644
--- a/app/src/organisms/ODD/RobotDashboard/__tests__/RecentRunProtocolCarousel.test.tsx
+++ b/app/src/organisms/ODD/RobotDashboard/__tests__/RecentRunProtocolCarousel.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { beforeEach, describe, it, vi } from 'vitest'
 
@@ -6,6 +5,7 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { useNotifyAllRunsQuery } from '/app/resources/runs'
 import { RecentRunProtocolCard, RecentRunProtocolCarousel } from '..'
 
+import type { ComponentProps } from 'react'
 import type { RunData } from '@opentrons/api-client'
 
 vi.mock('@opentrons/react-api-client')
@@ -30,14 +30,12 @@ const mockRun = {
   runTimeParameters: [],
 }
 
-const render = (
-  props: React.ComponentProps<typeof RecentRunProtocolCarousel>
-) => {
+const render = (props: ComponentProps<typeof RecentRunProtocolCarousel>) => {
   return renderWithProviders(<RecentRunProtocolCarousel {...props} />)
 }
 
 describe('RecentRunProtocolCarousel', () => {
-  let props: React.ComponentProps<typeof RecentRunProtocolCarousel>
+  let props: ComponentProps<typeof RecentRunProtocolCarousel>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/RobotDashboard/hooks/__tests__/useHardwareStatusText.test.tsx b/app/src/organisms/ODD/RobotDashboard/hooks/__tests__/useHardwareStatusText.test.tsx
index f209e69f5ec..996e00d56c7 100644
--- a/app/src/organisms/ODD/RobotDashboard/hooks/__tests__/useHardwareStatusText.test.tsx
+++ b/app/src/organisms/ODD/RobotDashboard/hooks/__tests__/useHardwareStatusText.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { I18nextProvider } from 'react-i18next'
 import { renderHook } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -7,10 +6,12 @@ import { i18n } from '/app/i18n'
 import { useFeatureFlag } from '/app/redux/config'
 import { useHardwareStatusText } from '..'
 
+import type { FunctionComponent, ReactNode } from 'react'
+
 vi.mock('/app/redux/config')
 
 describe('useHardwareStatusText', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     wrapper = ({ children }) => (
       <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsSelectAuthenticationType.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsSelectAuthenticationType.tsx
index f8ce5e6a205..8193a44b23b 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsSelectAuthenticationType.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsSelectAuthenticationType.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { DIRECTION_COLUMN, Flex } from '@opentrons/components'
@@ -6,6 +5,7 @@ import { DIRECTION_COLUMN, Flex } from '@opentrons/components'
 import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation'
 import { SelectAuthenticationType } from '../../NetworkSettings'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { WifiSecurityType } from '@opentrons/api-client'
 import type { SetSettingOption } from '../types'
 
@@ -13,7 +13,7 @@ interface RobotSettingsSelectAuthenticationTypeProps {
   handleWifiConnect: () => void
   selectedAuthType: WifiSecurityType
   setCurrentOption: SetSettingOption
-  setSelectedAuthType: React.Dispatch<React.SetStateAction<WifiSecurityType>>
+  setSelectedAuthType: Dispatch<SetStateAction<WifiSecurityType>>
 }
 
 /**
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsSetWifiCred.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsSetWifiCred.tsx
index 9204f22f5c4..aaafbf5d590 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsSetWifiCred.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsSetWifiCred.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { DIRECTION_COLUMN, Flex } from '@opentrons/components'
@@ -6,13 +5,14 @@ import { DIRECTION_COLUMN, Flex } from '@opentrons/components'
 import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation'
 import { SetWifiCred } from '../../NetworkSettings/SetWifiCred'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { SetSettingOption } from '../types'
 
 interface RobotSettingsSetWifiCredProps {
   handleConnect: () => void
   password: string
   setCurrentOption: SetSettingOption
-  setPassword: React.Dispatch<React.SetStateAction<string>>
+  setPassword: Dispatch<SetStateAction<string>>
 }
 
 /**
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsWifi.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsWifi.tsx
index add3565fe74..67edb5249ff 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsWifi.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsWifi.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { DIRECTION_COLUMN, Flex } from '@opentrons/components'
@@ -6,11 +5,12 @@ import { DIRECTION_COLUMN, Flex } from '@opentrons/components'
 import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation'
 import { WifiConnectionDetails } from './WifiConnectionDetails'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { WifiSecurityType } from '@opentrons/api-client'
 import type { SetSettingOption } from '../types'
 
 interface RobotSettingsWifiProps {
-  setSelectedSsid: React.Dispatch<React.SetStateAction<string>>
+  setSelectedSsid: Dispatch<SetStateAction<string>>
   setCurrentOption: SetSettingOption
   activeSsid?: string
   connectedWifiAuthType?: WifiSecurityType
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/EthernetConnectionDetails.test.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/EthernetConnectionDetails.test.tsx
index ddefd80196d..d034b6b6e7c 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/EthernetConnectionDetails.test.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/EthernetConnectionDetails.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -11,13 +10,13 @@ import { getLocalRobot } from '/app/redux/discovery'
 import { mockConnectedRobot } from '/app/redux/discovery/__fixtures__'
 import { EthernetConnectionDetails } from '../EthernetConnectionDetails'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/discovery')
 vi.mock('/app/redux/discovery/selectors')
 vi.mock('/app/redux/networking/selectors')
 
-const render = (
-  props: React.ComponentProps<typeof EthernetConnectionDetails>
-) => {
+const render = (props: ComponentProps<typeof EthernetConnectionDetails>) => {
   return renderWithProviders(<EthernetConnectionDetails {...props} />, {
     i18nInstance: i18n,
   })
@@ -31,7 +30,7 @@ const mockEthernet = {
 }
 
 describe('EthernetConnectionDetails', () => {
-  let props: React.ComponentProps<typeof EthernetConnectionDetails>
+  let props: ComponentProps<typeof EthernetConnectionDetails>
   beforeEach(() => {
     props = {
       handleGoBack: vi.fn(),
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/NetworkDetailsModal.test.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/NetworkDetailsModal.test.tsx
index 76b4c6f1be0..6b4048dbcfc 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/NetworkDetailsModal.test.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/NetworkDetailsModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -7,16 +6,18 @@ import { i18n } from '/app/i18n'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { NetworkDetailsModal } from '../NetworkDetailsModal'
 
+import type { ComponentProps } from 'react'
+
 const mockFn = vi.fn()
 
-const render = (props: React.ComponentProps<typeof NetworkDetailsModal>) => {
+const render = (props: ComponentProps<typeof NetworkDetailsModal>) => {
   return renderWithProviders(<NetworkDetailsModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('NetworkDetailsModal', () => {
-  let props: React.ComponentProps<typeof NetworkDetailsModal>
+  let props: ComponentProps<typeof NetworkDetailsModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/NetworkSettings.test.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/NetworkSettings.test.tsx
index 266778c0c81..37a5db9c3f2 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/NetworkSettings.test.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/NetworkSettings.test.tsx
@@ -1,5 +1,4 @@
 /* eslint-disable testing-library/no-node-access */
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -12,6 +11,7 @@ import { WifiConnectionDetails } from '../WifiConnectionDetails'
 import { EthernetConnectionDetails } from '../EthernetConnectionDetails'
 import { NetworkSettings } from '..'
 
+import type { ComponentProps } from 'react'
 import type { DiscoveredRobot } from '/app/redux/discovery/types'
 import type { WifiNetwork } from '/app/redux/networking/types'
 
@@ -22,14 +22,14 @@ vi.mock('../EthernetConnectionDetails')
 
 const mockSetCurrentOption = vi.fn()
 
-const render = (props: React.ComponentProps<typeof NetworkSettings>) => {
+const render = (props: ComponentProps<typeof NetworkSettings>) => {
   return renderWithProviders(<NetworkSettings {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('NetworkSettings', () => {
-  let props: React.ComponentProps<typeof NetworkSettings>
+  let props: ComponentProps<typeof NetworkSettings>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/WifiConnectionDetails.test.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/WifiConnectionDetails.test.tsx
index 9650a89b76c..c7311087fe4 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/WifiConnectionDetails.test.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/__tests__/WifiConnectionDetails.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { when } from 'vitest-when'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
@@ -10,6 +9,8 @@ import { getLocalRobot } from '/app/redux/discovery'
 import * as Networking from '/app/redux/networking'
 import { NetworkDetailsModal } from '../NetworkDetailsModal'
 import { WifiConnectionDetails } from '../WifiConnectionDetails'
+
+import type { ComponentProps } from 'react'
 import type * as Dom from 'react-router-dom'
 import type { State } from '/app/redux/types'
 
@@ -36,14 +37,14 @@ const initialMockWifi = {
   type: Networking.INTERFACE_WIFI,
 }
 
-const render = (props: React.ComponentProps<typeof WifiConnectionDetails>) => {
+const render = (props: ComponentProps<typeof WifiConnectionDetails>) => {
   return renderWithProviders(<WifiConnectionDetails {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('WifiConnectionDetails', () => {
-  let props: React.ComponentProps<typeof WifiConnectionDetails>
+  let props: ComponentProps<typeof WifiConnectionDetails>
   beforeEach(() => {
     props = {
       activeSsid: 'mock wifi ssid',
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/index.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/index.tsx
index db73b89dae3..9afeeb15cc0 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/index.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import { useTranslation } from 'react-i18next'
 
@@ -19,6 +18,7 @@ import {
 
 import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation'
 
+import type { ComponentProps } from 'react'
 import type { IconName, ChipType } from '@opentrons/components'
 import type { NetworkConnection } from '/app/resources/networking/hooks/useNetworkConnection'
 import type { SetSettingOption } from '../types'
@@ -87,7 +87,7 @@ export function NetworkSettings({
   )
 }
 
-interface NetworkSettingButtonProps extends React.ComponentProps<typeof Btn> {
+interface NetworkSettingButtonProps extends ComponentProps<typeof Btn> {
   buttonTitle: string
   iconName: IconName
   chipType: ChipType
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/RobotSettingButton.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/RobotSettingButton.tsx
index f777c9fcb77..1a47e3bbe4e 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/RobotSettingButton.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/RobotSettingButton.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 
 import {
@@ -20,6 +19,7 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 
+import type { MouseEventHandler, ReactNode } from 'react'
 import type { IconName } from '@opentrons/components'
 
 const SETTING_BUTTON_STYLE = css`
@@ -36,10 +36,10 @@ const SETTING_BUTTON_STYLE = css`
 
 interface RobotSettingButtonProps {
   settingName: string
-  onClick: React.MouseEventHandler
+  onClick: MouseEventHandler
   iconName?: IconName
   settingInfo?: string
-  rightElement?: React.ReactNode
+  rightElement?: ReactNode
   dataTestId?: string
 }
 
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/DeviceReset.test.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/DeviceReset.test.tsx
index 9f71205231e..3f273ab2df2 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/DeviceReset.test.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/DeviceReset.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -9,6 +8,7 @@ import { useDispatchApiRequest } from '/app/redux/robot-api'
 
 import { DeviceReset } from '../DeviceReset'
 
+import type { ComponentProps } from 'react'
 import type { DispatchApiRequestType } from '/app/redux/robot-api'
 
 vi.mock('/app/redux/robot-admin')
@@ -47,7 +47,7 @@ const mockResetConfigOptions = [
   },
 ]
 
-const render = (props: React.ComponentProps<typeof DeviceReset>) => {
+const render = (props: ComponentProps<typeof DeviceReset>) => {
   return renderWithProviders(
     <DeviceReset {...props} />,
 
@@ -56,7 +56,7 @@ const render = (props: React.ComponentProps<typeof DeviceReset>) => {
 }
 
 describe('DeviceReset', () => {
-  let props: React.ComponentProps<typeof DeviceReset>
+  let props: ComponentProps<typeof DeviceReset>
   let dispatchApiRequest: DispatchApiRequestType
 
   beforeEach(() => {
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/LanguageSetting.test.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/LanguageSetting.test.tsx
index fe90eb2e1cb..50ce6edc7e6 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/LanguageSetting.test.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/LanguageSetting.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -17,20 +16,22 @@ import { renderWithProviders } from '/app/__testing-utils__'
 
 import { LanguageSetting } from '../LanguageSetting'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/config')
 vi.mock('/app/redux-resources/analytics')
 
 const mockSetCurrentOption = vi.fn()
 const mockTrackEvent = vi.fn()
 
-const render = (props: React.ComponentProps<typeof LanguageSetting>) => {
+const render = (props: ComponentProps<typeof LanguageSetting>) => {
   return renderWithProviders(<LanguageSetting {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('LanguageSetting', () => {
-  let props: React.ComponentProps<typeof LanguageSetting>
+  let props: ComponentProps<typeof LanguageSetting>
   beforeEach(() => {
     props = {
       setCurrentOption: mockSetCurrentOption,
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/Privacy.test.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/Privacy.test.tsx
index 03f4a987462..d281ccecf6f 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/Privacy.test.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/Privacy.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { vi, describe, beforeEach, afterEach, expect, it } from 'vitest'
 
@@ -9,17 +8,19 @@ import { getRobotSettings } from '/app/redux/robot-settings'
 
 import { Privacy } from '../Privacy'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/analytics')
 vi.mock('/app/redux/robot-settings')
 
-const render = (props: React.ComponentProps<typeof Privacy>) => {
+const render = (props: ComponentProps<typeof Privacy>) => {
   return renderWithProviders(<Privacy {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('Privacy', () => {
-  let props: React.ComponentProps<typeof Privacy>
+  let props: ComponentProps<typeof Privacy>
   beforeEach(() => {
     props = {
       robotName: 'Otie',
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/RobotSystemVersion.test.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/RobotSystemVersion.test.tsx
index ad30e2539fa..955161149d8 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/RobotSystemVersion.test.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/RobotSystemVersion.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
@@ -9,12 +8,14 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { RobotSystemVersion } from '../RobotSystemVersion'
 import { RobotSystemVersionModal } from '../RobotSystemVersionModal'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/shell')
 vi.mock('../RobotSystemVersionModal')
 
 const mockBack = vi.fn()
 
-const render = (props: React.ComponentProps<typeof RobotSystemVersion>) => {
+const render = (props: ComponentProps<typeof RobotSystemVersion>) => {
   return renderWithProviders(
     <MemoryRouter>
       <RobotSystemVersion {...props} />
@@ -26,7 +27,7 @@ const render = (props: React.ComponentProps<typeof RobotSystemVersion>) => {
 }
 
 describe('RobotSystemVersion', () => {
-  let props: React.ComponentProps<typeof RobotSystemVersion>
+  let props: ComponentProps<typeof RobotSystemVersion>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/RobotSystemVersionModal.test.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/RobotSystemVersionModal.test.tsx
index 0d7a125eb1f..0b8f891f1a5 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/RobotSystemVersionModal.test.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/RobotSystemVersionModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -6,6 +5,8 @@ import '@testing-library/jest-dom/vitest'
 import { i18n } from '/app/i18n'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { RobotSystemVersionModal } from '../RobotSystemVersionModal'
+
+import type { ComponentProps } from 'react'
 import type * as Dom from 'react-router-dom'
 
 const mockFn = vi.fn()
@@ -19,16 +20,14 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (
-  props: React.ComponentProps<typeof RobotSystemVersionModal>
-) => {
+const render = (props: ComponentProps<typeof RobotSystemVersionModal>) => {
   return renderWithProviders(<RobotSystemVersionModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('RobotSystemVersionModal', () => {
-  let props: React.ComponentProps<typeof RobotSystemVersionModal>
+  let props: ComponentProps<typeof RobotSystemVersionModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/TextSize.test.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/TextSize.test.tsx
index 703323c0d7e..3ca0124810a 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/TextSize.test.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/TextSize.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 
@@ -6,15 +5,17 @@ import { i18n } from '/app/i18n'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { TextSize } from '../TextSize'
 
+import type { ComponentProps } from 'react'
+
 const mockFunc = vi.fn()
-const render = (props: React.ComponentProps<typeof TextSize>) => {
+const render = (props: ComponentProps<typeof TextSize>) => {
   return renderWithProviders(<TextSize {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('TextSize', () => {
-  let props: React.ComponentProps<typeof TextSize>
+  let props: ComponentProps<typeof TextSize>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/TouchScreenSleep.test.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/TouchScreenSleep.test.tsx
index 990c6bcf436..6c75c584cfe 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/TouchScreenSleep.test.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/TouchScreenSleep.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { i18n } from '/app/i18n'
@@ -6,19 +5,21 @@ import { updateConfigValue } from '/app/redux/config'
 import { TouchScreenSleep } from '../TouchScreenSleep'
 import { renderWithProviders } from '/app/__testing-utils__'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/config')
 
 // Note (kj:06/28/2023) this line is to avoid causing errors for scrollIntoView
 window.HTMLElement.prototype.scrollIntoView = vi.fn()
 
-const render = (props: React.ComponentProps<typeof TouchScreenSleep>) => {
+const render = (props: ComponentProps<typeof TouchScreenSleep>) => {
   return renderWithProviders(<TouchScreenSleep {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('TouchScreenSleep', () => {
-  let props: React.ComponentProps<typeof TouchScreenSleep>
+  let props: ComponentProps<typeof TouchScreenSleep>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/TouchscreenBrightness.test.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/TouchscreenBrightness.test.tsx
index 76993c42300..0dd4c87331d 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/TouchscreenBrightness.test.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/TouchscreenBrightness.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 
@@ -10,18 +9,20 @@ import {
 import { renderWithProviders } from '/app/__testing-utils__'
 import { TouchscreenBrightness } from '../TouchscreenBrightness'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/config')
 
 const mockFunc = vi.fn()
 
-const render = (props: React.ComponentProps<typeof TouchscreenBrightness>) => {
+const render = (props: ComponentProps<typeof TouchscreenBrightness>) => {
   return renderWithProviders(<TouchscreenBrightness {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('TouchscreenBrightness', () => {
-  let props: React.ComponentProps<typeof TouchscreenBrightness>
+  let props: ComponentProps<typeof TouchscreenBrightness>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/UpdateChannel.test.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/UpdateChannel.test.tsx
index c25e9582a4b..5cf5d34ffde 100644
--- a/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/UpdateChannel.test.tsx
+++ b/app/src/organisms/ODD/RobotSettingsDashboard/__tests__/UpdateChannel.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -13,6 +12,8 @@ import { renderWithProviders } from '/app/__testing-utils__'
 
 import { UpdateChannel } from '../UpdateChannel'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/config')
 
 const mockChannelOptions = [
@@ -26,14 +27,14 @@ const mockChannelOptions = [
 
 const mockhandleBackPress = vi.fn()
 
-const render = (props: React.ComponentProps<typeof UpdateChannel>) => {
+const render = (props: ComponentProps<typeof UpdateChannel>) => {
   return renderWithProviders(<UpdateChannel {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('UpdateChannel', () => {
-  let props: React.ComponentProps<typeof UpdateChannel>
+  let props: ComponentProps<typeof UpdateChannel>
   beforeEach(() => {
     props = {
       handleBackPress: mockhandleBackPress,
diff --git a/app/src/organisms/ODD/RobotSetupHeader/index.tsx b/app/src/organisms/ODD/RobotSetupHeader/index.tsx
index 6b7a3fa1049..3e828ddb061 100644
--- a/app/src/organisms/ODD/RobotSetupHeader/index.tsx
+++ b/app/src/organisms/ODD/RobotSetupHeader/index.tsx
@@ -1,5 +1,3 @@
-import type * as React from 'react'
-
 import {
   ALIGN_CENTER,
   Btn,
@@ -17,14 +15,15 @@ import {
 import { SmallButton } from '/app/atoms/buttons'
 import { InlineNotification } from '/app/atoms/InlineNotification'
 
+import type { MouseEventHandler, ReactNode } from 'react'
 import type { InlineNotificationProps } from '/app/atoms/InlineNotification'
 
 interface RobotSetupHeaderProps {
   header: string
-  buttonText?: React.ReactNode
+  buttonText?: ReactNode
   inlineNotification?: InlineNotificationProps
-  onClickBack?: React.MouseEventHandler
-  onClickButton?: React.MouseEventHandler
+  onClickBack?: MouseEventHandler
+  onClickButton?: MouseEventHandler
 }
 
 export function RobotSetupHeader({
diff --git a/app/src/organisms/ODD/RunningProtocol/__tests__/ConfirmCancelRunModal.test.tsx b/app/src/organisms/ODD/RunningProtocol/__tests__/ConfirmCancelRunModal.test.tsx
index 69f610d3ef8..bef530f1458 100644
--- a/app/src/organisms/ODD/RunningProtocol/__tests__/ConfirmCancelRunModal.test.tsx
+++ b/app/src/organisms/ODD/RunningProtocol/__tests__/ConfirmCancelRunModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
@@ -21,6 +20,7 @@ import { mockConnectedRobot } from '/app/redux/discovery/__fixtures__'
 import { ConfirmCancelRunModal } from '../ConfirmCancelRunModal'
 import { CancelingRunModal } from '../CancelingRunModal'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 vi.mock('@opentrons/react-api-client')
@@ -46,7 +46,7 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof ConfirmCancelRunModal>) => {
+const render = (props: ComponentProps<typeof ConfirmCancelRunModal>) => {
   return renderWithProviders(
     <MemoryRouter>
       <ConfirmCancelRunModal {...props} />
@@ -63,7 +63,7 @@ const ROBOT_NAME = 'otie'
 const mockFn = vi.fn()
 
 describe('ConfirmCancelRunModal', () => {
-  let props: React.ComponentProps<typeof ConfirmCancelRunModal>
+  let props: ComponentProps<typeof ConfirmCancelRunModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/RunningProtocol/__tests__/CurrentRunningProtocolCommand.test.tsx b/app/src/organisms/ODD/RunningProtocol/__tests__/CurrentRunningProtocolCommand.test.tsx
index 581df7c013c..ceda8df2e42 100644
--- a/app/src/organisms/ODD/RunningProtocol/__tests__/CurrentRunningProtocolCommand.test.tsx
+++ b/app/src/organisms/ODD/RunningProtocol/__tests__/CurrentRunningProtocolCommand.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -12,6 +11,8 @@ import { useRunningStepCounts } from '/app/resources/protocols/hooks'
 import { useNotifyAllCommandsQuery } from '/app/resources/runs'
 import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/resources/runs')
 vi.mock('/app/resources/protocols/hooks')
 
@@ -28,7 +29,7 @@ const mockRunTimer = {
 }
 
 const render = (
-  props: React.ComponentProps<typeof CurrentRunningProtocolCommand>
+  props: ComponentProps<typeof CurrentRunningProtocolCommand>
 ) => {
   return renderWithProviders(<CurrentRunningProtocolCommand {...props} />, {
     i18nInstance: i18n,
@@ -36,7 +37,7 @@ const render = (
 }
 
 describe('CurrentRunningProtocolCommand', () => {
-  let props: React.ComponentProps<typeof CurrentRunningProtocolCommand>
+  let props: ComponentProps<typeof CurrentRunningProtocolCommand>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/RunningProtocol/__tests__/RunFailedModal.test.tsx b/app/src/organisms/ODD/RunningProtocol/__tests__/RunFailedModal.test.tsx
index 8dcfd2e5b88..40e1366d324 100644
--- a/app/src/organisms/ODD/RunningProtocol/__tests__/RunFailedModal.test.tsx
+++ b/app/src/organisms/ODD/RunningProtocol/__tests__/RunFailedModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -12,6 +11,8 @@ import { RunFailedModal } from '../RunFailedModal'
 import type { NavigateFunction } from 'react-router-dom'
 import { RUN_STATUS_FAILED } from '@opentrons/api-client'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('@opentrons/react-api-client')
 
 const RUN_ID = 'mock_runID'
@@ -82,7 +83,7 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof RunFailedModal>) => {
+const render = (props: ComponentProps<typeof RunFailedModal>) => {
   return renderWithProviders(
     <MemoryRouter>
       <RunFailedModal {...props} />
@@ -94,7 +95,7 @@ const render = (props: React.ComponentProps<typeof RunFailedModal>) => {
 }
 
 describe('RunFailedModal', () => {
-  let props: React.ComponentProps<typeof RunFailedModal>
+  let props: ComponentProps<typeof RunFailedModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/ODD/RunningProtocol/__tests__/RunningProtocolCommandList.test.tsx b/app/src/organisms/ODD/RunningProtocol/__tests__/RunningProtocolCommandList.test.tsx
index 199ae940c3b..5f2ceba8121 100644
--- a/app/src/organisms/ODD/RunningProtocol/__tests__/RunningProtocolCommandList.test.tsx
+++ b/app/src/organisms/ODD/RunningProtocol/__tests__/RunningProtocolCommandList.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -10,20 +9,20 @@ import { i18n } from '/app/i18n'
 import { mockRobotSideAnalysis } from '/app/molecules/Command/__fixtures__'
 import { RunningProtocolCommandList } from '../RunningProtocolCommandList'
 
+import type { ComponentProps } from 'react'
+
 const mockPlayRun = vi.fn()
 const mockPauseRun = vi.fn()
 const mockShowModal = vi.fn()
 
-const render = (
-  props: React.ComponentProps<typeof RunningProtocolCommandList>
-) => {
+const render = (props: ComponentProps<typeof RunningProtocolCommandList>) => {
   return renderWithProviders(<RunningProtocolCommandList {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('RunningProtocolCommandList', () => {
-  let props: React.ComponentProps<typeof RunningProtocolCommandList>
+  let props: ComponentProps<typeof RunningProtocolCommandList>
   beforeEach(() => {
     props = {
       runStatus: RUN_STATUS_RUNNING,
diff --git a/app/src/organisms/ODD/RunningProtocol/__tests__/RunningProtocolSkeleton.test.tsx b/app/src/organisms/ODD/RunningProtocol/__tests__/RunningProtocolSkeleton.test.tsx
index 656d4d250d1..fcd48819c49 100644
--- a/app/src/organisms/ODD/RunningProtocol/__tests__/RunningProtocolSkeleton.test.tsx
+++ b/app/src/organisms/ODD/RunningProtocol/__tests__/RunningProtocolSkeleton.test.tsx
@@ -1,18 +1,17 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it } from 'vitest'
 
 import { renderWithProviders } from '/app/__testing-utils__'
 import { RunningProtocolSkeleton } from '../RunningProtocolSkeleton'
 
-const render = (
-  props: React.ComponentProps<typeof RunningProtocolSkeleton>
-) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof RunningProtocolSkeleton>) => {
   return renderWithProviders(<RunningProtocolSkeleton {...props} />)
 }
 
 describe('RunningProtocolSkeleton', () => {
-  let props: React.ComponentProps<typeof RunningProtocolSkeleton>
+  let props: ComponentProps<typeof RunningProtocolSkeleton>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/PipetteWizardFlows/CheckPipetteButton.tsx b/app/src/organisms/PipetteWizardFlows/CheckPipetteButton.tsx
index 2300204b65b..25438c1442c 100644
--- a/app/src/organisms/PipetteWizardFlows/CheckPipetteButton.tsx
+++ b/app/src/organisms/PipetteWizardFlows/CheckPipetteButton.tsx
@@ -1,11 +1,12 @@
-import type * as React from 'react'
 import { useInstrumentsQuery } from '@opentrons/react-api-client'
 import { PrimaryButton } from '@opentrons/components'
 import { SmallButton } from '/app/atoms/buttons'
 
+import type { Dispatch, SetStateAction } from 'react'
+
 interface CheckPipetteButtonProps {
   proceedButtonText: string
-  setFetching: React.Dispatch<React.SetStateAction<boolean>>
+  setFetching: Dispatch<SetStateAction<boolean>>
   isFetching: boolean
   isOnDevice: boolean | null
   proceed?: () => void
diff --git a/app/src/organisms/PipetteWizardFlows/MountPipette.tsx b/app/src/organisms/PipetteWizardFlows/MountPipette.tsx
index 9ba1b036785..b750aee0ad2 100644
--- a/app/src/organisms/PipetteWizardFlows/MountPipette.tsx
+++ b/app/src/organisms/PipetteWizardFlows/MountPipette.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   SINGLE_MOUNT_PIPETTES,
@@ -17,11 +16,13 @@ import { Skeleton } from '/app/atoms/Skeleton'
 import { CheckPipetteButton } from './CheckPipetteButton'
 import { BODY_STYLE, SECTIONS } from './constants'
 import { getPipetteAnimations, getPipetteAnimations96 } from './utils'
+
+import type { Dispatch, ReactNode, SetStateAction } from 'react'
 import type { PipetteWizardStepProps } from './types'
 
 interface MountPipetteProps extends PipetteWizardStepProps {
   isFetching: boolean
-  setFetching: React.Dispatch<React.SetStateAction<boolean>>
+  setFetching: Dispatch<SetStateAction<boolean>>
 }
 const BACKGROUND_SIZE = '47rem'
 
@@ -47,7 +48,7 @@ export const MountPipette = (props: MountPipetteProps): JSX.Element => {
       backgroundSize={BACKGROUND_SIZE}
     />
   )
-  let bodyText: React.ReactNode = <div></div>
+  let bodyText: ReactNode = <div></div>
   if (isFetching) {
     bodyText = (
       <>
diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/AttachProbe.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/AttachProbe.test.tsx
index 00120fe438a..0bbab02ebc5 100644
--- a/app/src/organisms/PipetteWizardFlows/__tests__/AttachProbe.test.tsx
+++ b/app/src/organisms/PipetteWizardFlows/__tests__/AttachProbe.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 
@@ -16,7 +15,9 @@ import { FLOWS } from '../constants'
 import { AttachProbe } from '../AttachProbe'
 import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration'
 
-const render = (props: React.ComponentProps<typeof AttachProbe>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof AttachProbe>) => {
   return renderWithProviders(<AttachProbe {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -24,7 +25,7 @@ const render = (props: React.ComponentProps<typeof AttachProbe>) => {
 vi.mock('/app/resources/deck_configuration')
 
 describe('AttachProbe', () => {
-  let props: React.ComponentProps<typeof AttachProbe>
+  let props: ComponentProps<typeof AttachProbe>
   beforeEach(() => {
     props = {
       mount: LEFT,
diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/BeforeBeginning.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/BeforeBeginning.test.tsx
index a75e8bfe97a..db8b03816c2 100644
--- a/app/src/organisms/PipetteWizardFlows/__tests__/BeforeBeginning.test.tsx
+++ b/app/src/organisms/PipetteWizardFlows/__tests__/BeforeBeginning.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, waitFor, screen } from '@testing-library/react'
 import { describe, it, vi, beforeEach, expect, afterEach } from 'vitest'
 
@@ -19,19 +18,21 @@ import { BeforeBeginning } from '../BeforeBeginning'
 import { FLOWS } from '../constants'
 import { getIsGantryEmpty } from '../utils'
 
+import type { ComponentProps } from 'react'
+
 //  TODO(jr, 11/3/22): uncomment out the get help link when we have
 //  the correct URL to link it to
 vi.mock('/app/molecules/InProgressModal/InProgressModal')
 vi.mock('../utils')
 
-const render = (props: React.ComponentProps<typeof BeforeBeginning>) => {
+const render = (props: ComponentProps<typeof BeforeBeginning>) => {
   return renderWithProviders(<BeforeBeginning {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('BeforeBeginning', () => {
-  let props: React.ComponentProps<typeof BeforeBeginning>
+  let props: ComponentProps<typeof BeforeBeginning>
   beforeEach(() => {
     props = {
       selectedPipette: SINGLE_MOUNT_PIPETTES,
diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/Carriage.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/Carriage.test.tsx
index 17c8140ebe8..389fde2801f 100644
--- a/app/src/organisms/PipetteWizardFlows/__tests__/Carriage.test.tsx
+++ b/app/src/organisms/PipetteWizardFlows/__tests__/Carriage.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 
@@ -11,14 +10,16 @@ import { RUN_ID_1 } from '/app/resources/runs/__fixtures__'
 import { FLOWS } from '../constants'
 import { Carriage } from '../Carriage'
 
-const render = (props: React.ComponentProps<typeof Carriage>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Carriage>) => {
   return renderWithProviders(<Carriage {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('Carriage', () => {
-  let props: React.ComponentProps<typeof Carriage>
+  let props: ComponentProps<typeof Carriage>
   beforeEach(() => {
     props = {
       mount: LEFT,
diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/CheckPipetteButton.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/CheckPipetteButton.test.tsx
index e5dfc5fe3de..76c60357b46 100644
--- a/app/src/organisms/PipetteWizardFlows/__tests__/CheckPipetteButton.test.tsx
+++ b/app/src/organisms/PipetteWizardFlows/__tests__/CheckPipetteButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, waitFor, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 
@@ -7,14 +6,16 @@ import { useInstrumentsQuery } from '@opentrons/react-api-client'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { CheckPipetteButton } from '../CheckPipetteButton'
 
-const render = (props: React.ComponentProps<typeof CheckPipetteButton>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof CheckPipetteButton>) => {
   return renderWithProviders(<CheckPipetteButton {...props} />)[0]
 }
 
 vi.mock('@opentrons/react-api-client')
 
 describe('CheckPipetteButton', () => {
-  let props: React.ComponentProps<typeof CheckPipetteButton>
+  let props: ComponentProps<typeof CheckPipetteButton>
   const refetch = vi.fn(() => Promise.resolve())
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/ChoosePipette.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/ChoosePipette.test.tsx
index bda196f388c..ab14c846013 100644
--- a/app/src/organisms/PipetteWizardFlows/__tests__/ChoosePipette.test.tsx
+++ b/app/src/organisms/PipetteWizardFlows/__tests__/ChoosePipette.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import {
   LEFT,
   NINETY_SIX_CHANNEL,
@@ -17,18 +16,20 @@ import { useAttachedPipettesFromInstrumentsQuery } from '/app/resources/instrume
 import { ChoosePipette } from '../ChoosePipette'
 import { getIsGantryEmpty } from '../utils'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../utils')
 vi.mock('/app/resources/instruments')
 vi.mock('/app/redux/config')
 
-const render = (props: React.ComponentProps<typeof ChoosePipette>) => {
+const render = (props: ComponentProps<typeof ChoosePipette>) => {
   return renderWithProviders(<ChoosePipette {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ChoosePipette', () => {
-  let props: React.ComponentProps<typeof ChoosePipette>
+  let props: ComponentProps<typeof ChoosePipette>
   beforeEach(() => {
     vi.mocked(getIsOnDevice).mockReturnValue(false)
     vi.mocked(getIsGantryEmpty).mockReturnValue(true)
diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/DetachPipette.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/DetachPipette.test.tsx
index d7777ed368c..a8f85ef3d73 100644
--- a/app/src/organisms/PipetteWizardFlows/__tests__/DetachPipette.test.tsx
+++ b/app/src/organisms/PipetteWizardFlows/__tests__/DetachPipette.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 
@@ -19,17 +18,19 @@ import { RUN_ID_1 } from '/app/resources/runs/__fixtures__'
 import { FLOWS } from '../constants'
 import { DetachPipette } from '../DetachPipette'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../CheckPipetteButton')
 vi.mock('/app/molecules/InProgressModal/InProgressModal')
 
-const render = (props: React.ComponentProps<typeof DetachPipette>) => {
+const render = (props: ComponentProps<typeof DetachPipette>) => {
   return renderWithProviders(<DetachPipette {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('DetachPipette', () => {
-  let props: React.ComponentProps<typeof DetachPipette>
+  let props: ComponentProps<typeof DetachPipette>
   beforeEach(() => {
     props = {
       selectedPipette: SINGLE_MOUNT_PIPETTES,
diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/DetachProbe.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/DetachProbe.test.tsx
index 059846aebb5..755c795e0d4 100644
--- a/app/src/organisms/PipetteWizardFlows/__tests__/DetachProbe.test.tsx
+++ b/app/src/organisms/PipetteWizardFlows/__tests__/DetachProbe.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 
@@ -12,16 +11,18 @@ import { RUN_ID_1 } from '/app/resources/runs/__fixtures__'
 import { FLOWS } from '../constants'
 import { DetachProbe } from '../DetachProbe'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/molecules/InProgressModal/InProgressModal')
 
-const render = (props: React.ComponentProps<typeof DetachProbe>) => {
+const render = (props: ComponentProps<typeof DetachProbe>) => {
   return renderWithProviders(<DetachProbe {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('DetachProbe', () => {
-  let props: React.ComponentProps<typeof DetachProbe>
+  let props: ComponentProps<typeof DetachProbe>
   beforeEach(() => {
     props = {
       selectedPipette: SINGLE_MOUNT_PIPETTES,
diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/ExitModal.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/ExitModal.test.tsx
index a30407379a2..b09319fcb94 100644
--- a/app/src/organisms/PipetteWizardFlows/__tests__/ExitModal.test.tsx
+++ b/app/src/organisms/PipetteWizardFlows/__tests__/ExitModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 
@@ -7,14 +6,16 @@ import { i18n } from '/app/i18n'
 import { FLOWS } from '../constants'
 import { ExitModal } from '../ExitModal'
 
-const render = (props: React.ComponentProps<typeof ExitModal>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ExitModal>) => {
   return renderWithProviders(<ExitModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ExitModal', () => {
-  let props: React.ComponentProps<typeof ExitModal>
+  let props: ComponentProps<typeof ExitModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/MountPipette.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/MountPipette.test.tsx
index 4c5d9dda2e0..24e8bb926b8 100644
--- a/app/src/organisms/PipetteWizardFlows/__tests__/MountPipette.test.tsx
+++ b/app/src/organisms/PipetteWizardFlows/__tests__/MountPipette.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, beforeEach, vi } from 'vitest'
 
@@ -16,16 +15,18 @@ import { FLOWS } from '../constants'
 import { CheckPipetteButton } from '../CheckPipetteButton'
 import { MountPipette } from '../MountPipette'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../CheckPipetteButton')
 
-const render = (props: React.ComponentProps<typeof MountPipette>) => {
+const render = (props: ComponentProps<typeof MountPipette>) => {
   return renderWithProviders(<MountPipette {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('MountPipette', () => {
-  let props: React.ComponentProps<typeof MountPipette>
+  let props: ComponentProps<typeof MountPipette>
   beforeEach(() => {
     props = {
       selectedPipette: SINGLE_MOUNT_PIPETTES,
diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/MountingPlate.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/MountingPlate.test.tsx
index 38744ad1bab..2393d1080d5 100644
--- a/app/src/organisms/PipetteWizardFlows/__tests__/MountingPlate.test.tsx
+++ b/app/src/organisms/PipetteWizardFlows/__tests__/MountingPlate.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, waitFor, screen } from '@testing-library/react'
 import { describe, it, expect, beforeEach, vi } from 'vitest'
 
@@ -10,14 +9,16 @@ import { RUN_ID_1 } from '/app/resources/runs/__fixtures__'
 import { FLOWS } from '../constants'
 import { MountingPlate } from '../MountingPlate'
 
-const render = (props: React.ComponentProps<typeof MountingPlate>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof MountingPlate>) => {
   return renderWithProviders(<MountingPlate {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('MountingPlate', () => {
-  let props: React.ComponentProps<typeof MountingPlate>
+  let props: ComponentProps<typeof MountingPlate>
   beforeEach(() => {
     props = {
       mount: LEFT,
diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/Results.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/Results.test.tsx
index 3382ac401a0..df53d95cdb7 100644
--- a/app/src/organisms/PipetteWizardFlows/__tests__/Results.test.tsx
+++ b/app/src/organisms/PipetteWizardFlows/__tests__/Results.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { act, fireEvent, screen, waitFor } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 
@@ -18,19 +17,20 @@ import { RUN_ID_1 } from '/app/resources/runs/__fixtures__'
 import { Results } from '../Results'
 import { FLOWS } from '../constants'
 
+import type { ComponentProps } from 'react'
 import type { Mock } from 'vitest'
 
 vi.mock('@opentrons/react-api-client')
 vi.mock('/app/resources/robot-settings/hooks')
 
-const render = (props: React.ComponentProps<typeof Results>) => {
+const render = (props: ComponentProps<typeof Results>) => {
   return renderWithProviders(<Results {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('Results', () => {
-  let props: React.ComponentProps<typeof Results>
+  let props: ComponentProps<typeof Results>
   let pipettePromise: Promise<void>
   let mockRefetchInstruments: Mock
   beforeEach(() => {
diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/UnskippableModal.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/UnskippableModal.test.tsx
index bc738d0caf3..f2d51af9a5f 100644
--- a/app/src/organisms/PipetteWizardFlows/__tests__/UnskippableModal.test.tsx
+++ b/app/src/organisms/PipetteWizardFlows/__tests__/UnskippableModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi } from 'vitest'
 
@@ -6,14 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { UnskippableModal } from '../UnskippableModal'
 
-const render = (props: React.ComponentProps<typeof UnskippableModal>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof UnskippableModal>) => {
   return renderWithProviders(<UnskippableModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('UnskippableModal', () => {
-  let props: React.ComponentProps<typeof UnskippableModal>
+  let props: ComponentProps<typeof UnskippableModal>
   it('returns the correct information for unskippable modal, pressing return button calls goBack prop', () => {
     props = {
       goBack: vi.fn(),
diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/hooks.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/hooks.test.tsx
index f44bd96fc6e..996ec520af2 100644
--- a/app/src/organisms/PipetteWizardFlows/__tests__/hooks.test.tsx
+++ b/app/src/organisms/PipetteWizardFlows/__tests__/hooks.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, vi, afterEach, expect } from 'vitest'
 import { I18nextProvider } from 'react-i18next'
 import { renderHook } from '@testing-library/react'
@@ -16,6 +15,8 @@ import {
 import { FLOWS } from '../constants'
 import { usePipetteFlowWizardHeaderText } from '../hooks'
 
+import type { FunctionComponent, ReactNode } from 'react'
+
 const BASE_PROPS_FOR_RUN_SETUP = {
   flowType: FLOWS.CALIBRATE,
   selectedPipette: SINGLE_MOUNT_PIPETTES,
@@ -23,7 +24,7 @@ const BASE_PROPS_FOR_RUN_SETUP = {
 }
 
 describe('usePipetteFlowWizardHeaderText', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     wrapper = ({ children }) => (
       <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
diff --git a/app/src/organisms/PipetteWizardFlows/types.ts b/app/src/organisms/PipetteWizardFlows/types.ts
index a8785e8a31c..3870141ab6e 100644
--- a/app/src/organisms/PipetteWizardFlows/types.ts
+++ b/app/src/organisms/PipetteWizardFlows/types.ts
@@ -1,6 +1,7 @@
-import type { SECTIONS, FLOWS } from './constants'
+import type { Dispatch, SetStateAction } from 'react'
 import type { useCreateCommandMutation } from '@opentrons/react-api-client'
 import type { PipetteMount, CreateCommand } from '@opentrons/shared-data'
+import type { SECTIONS, FLOWS } from './constants'
 import type { AttachedPipettesFromInstrumentsQuery } from '/app/resources/instruments'
 
 export type PipetteWizardStep =
@@ -78,7 +79,7 @@ export interface PipetteWizardStepProps {
   isRobotMoving: boolean
   maintenanceRunId?: string
   attachedPipettes: AttachedPipettesFromInstrumentsQuery
-  setShowErrorMessage: React.Dispatch<React.SetStateAction<string | null>>
+  setShowErrorMessage: Dispatch<SetStateAction<string | null>>
   errorMessage: string | null
   selectedPipette: SelectablePipettes
   isOnDevice: boolean | null
diff --git a/app/src/organisms/TakeoverModal/TakeoverModal.tsx b/app/src/organisms/TakeoverModal/TakeoverModal.tsx
index 8f6441124a7..34a0754609e 100644
--- a/app/src/organisms/TakeoverModal/TakeoverModal.tsx
+++ b/app/src/organisms/TakeoverModal/TakeoverModal.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 
@@ -18,12 +17,13 @@ import { getTopPortalEl } from '/app/App/portal'
 import { SmallButton } from '/app/atoms/buttons'
 import { OddModal } from '/app/molecules/OddModal'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { OddModalHeaderBaseProps } from '/app/molecules/OddModal/types'
 
 interface TakeoverModalProps {
   title: string
   showConfirmTerminateModal: boolean
-  setShowConfirmTerminateModal: React.Dispatch<React.SetStateAction<boolean>>
+  setShowConfirmTerminateModal: Dispatch<SetStateAction<boolean>>
   confirmTerminate: () => void
   terminateInProgress: boolean
 }
diff --git a/app/src/organisms/TakeoverModal/__tests__/MaintenanceRunTakeover.test.tsx b/app/src/organisms/TakeoverModal/__tests__/MaintenanceRunTakeover.test.tsx
index 94a59aa903a..92c286e9bbd 100644
--- a/app/src/organisms/TakeoverModal/__tests__/MaintenanceRunTakeover.test.tsx
+++ b/app/src/organisms/TakeoverModal/__tests__/MaintenanceRunTakeover.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -8,6 +7,7 @@ import { useMaintenanceRunTakeover } from '../useMaintenanceRunTakeover'
 import { MaintenanceRunTakeover } from '../MaintenanceRunTakeover'
 import { useNotifyCurrentMaintenanceRun } from '/app/resources/maintenance_runs'
 
+import type { ComponentProps } from 'react'
 import type { MaintenanceRunStatus } from '../MaintenanceRunStatusProvider'
 
 vi.mock('../useMaintenanceRunTakeover')
@@ -21,14 +21,14 @@ const MOCK_MAINTENANCE_RUN: MaintenanceRunStatus = {
   setOddRunIds: () => null,
 }
 
-const render = (props: React.ComponentProps<typeof MaintenanceRunTakeover>) => {
+const render = (props: ComponentProps<typeof MaintenanceRunTakeover>) => {
   return renderWithProviders(<MaintenanceRunTakeover {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('MaintenanceRunTakeover', () => {
-  let props: React.ComponentProps<typeof MaintenanceRunTakeover>
+  let props: ComponentProps<typeof MaintenanceRunTakeover>
   const testComponent = <div>{'Test Component'}</div>
 
   beforeEach(() => {
diff --git a/app/src/organisms/TakeoverModal/__tests__/TakeoverModal.test.tsx b/app/src/organisms/TakeoverModal/__tests__/TakeoverModal.test.tsx
index a902544e4a0..4f3ffd78894 100644
--- a/app/src/organisms/TakeoverModal/__tests__/TakeoverModal.test.tsx
+++ b/app/src/organisms/TakeoverModal/__tests__/TakeoverModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -6,14 +5,16 @@ import { i18n } from '/app/i18n'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { TakeoverModal } from '../TakeoverModal'
 
-const render = (props: React.ComponentProps<typeof TakeoverModal>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof TakeoverModal>) => {
   return renderWithProviders(<TakeoverModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('TakeoverModal', () => {
-  let props: React.ComponentProps<typeof TakeoverModal>
+  let props: ComponentProps<typeof TakeoverModal>
   beforeEach(() => {
     props = {
       showConfirmTerminateModal: false,
diff --git a/app/src/organisms/UpdateRobotSoftware/ErrorUpdateSoftware.tsx b/app/src/organisms/UpdateRobotSoftware/ErrorUpdateSoftware.tsx
index f1629e15b64..ab1b44991b6 100644
--- a/app/src/organisms/UpdateRobotSoftware/ErrorUpdateSoftware.tsx
+++ b/app/src/organisms/UpdateRobotSoftware/ErrorUpdateSoftware.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import {
@@ -14,9 +13,11 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
+
 interface ErrorUpdateSoftwareProps {
   errorMessage: string
-  children: React.ReactNode
+  children: ReactNode
 }
 export function ErrorUpdateSoftware({
   errorMessage,
diff --git a/app/src/organisms/UpdateRobotSoftware/__tests__/CompleteUpdateSoftware.test.tsx b/app/src/organisms/UpdateRobotSoftware/__tests__/CompleteUpdateSoftware.test.tsx
index b6b91424b92..be6d9056cc0 100644
--- a/app/src/organisms/UpdateRobotSoftware/__tests__/CompleteUpdateSoftware.test.tsx
+++ b/app/src/organisms/UpdateRobotSoftware/__tests__/CompleteUpdateSoftware.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -6,16 +5,18 @@ import { i18n } from '/app/i18n'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { CompleteUpdateSoftware } from '../CompleteUpdateSoftware'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/redux/robot-admin')
 
-const render = (props: React.ComponentProps<typeof CompleteUpdateSoftware>) => {
+const render = (props: ComponentProps<typeof CompleteUpdateSoftware>) => {
   return renderWithProviders(<CompleteUpdateSoftware {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('CompleteUpdateSoftware', () => {
-  let props: React.ComponentProps<typeof CompleteUpdateSoftware>
+  let props: ComponentProps<typeof CompleteUpdateSoftware>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/UpdateRobotSoftware/__tests__/ErrorUpdateSoftware.test.tsx b/app/src/organisms/UpdateRobotSoftware/__tests__/ErrorUpdateSoftware.test.tsx
index d1706a4bf18..6f585d31db0 100644
--- a/app/src/organisms/UpdateRobotSoftware/__tests__/ErrorUpdateSoftware.test.tsx
+++ b/app/src/organisms/UpdateRobotSoftware/__tests__/ErrorUpdateSoftware.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -6,14 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ErrorUpdateSoftware } from '../ErrorUpdateSoftware'
 
-const render = (props: React.ComponentProps<typeof ErrorUpdateSoftware>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ErrorUpdateSoftware>) => {
   return renderWithProviders(<ErrorUpdateSoftware {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('ErrorUpdateSoftware', () => {
-  let props: React.ComponentProps<typeof ErrorUpdateSoftware>
+  let props: ComponentProps<typeof ErrorUpdateSoftware>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/organisms/UpdateRobotSoftware/__tests__/UpdateSoftware.test.tsx b/app/src/organisms/UpdateRobotSoftware/__tests__/UpdateSoftware.test.tsx
index 93deeb27956..76344df2c4c 100644
--- a/app/src/organisms/UpdateRobotSoftware/__tests__/UpdateSoftware.test.tsx
+++ b/app/src/organisms/UpdateRobotSoftware/__tests__/UpdateSoftware.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
@@ -6,14 +5,16 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { UpdateSoftware } from '../UpdateSoftware'
 
-const render = (props: React.ComponentProps<typeof UpdateSoftware>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof UpdateSoftware>) => {
   return renderWithProviders(<UpdateSoftware {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('UpdateSoftware', () => {
-  let props: React.ComponentProps<typeof UpdateSoftware>
+  let props: ComponentProps<typeof UpdateSoftware>
   beforeEach(() => {
     props = {
       updateType: 'downloading',
diff --git a/app/src/pages/Desktop/Labware/__tests__/hooks.test.tsx b/app/src/pages/Desktop/Labware/__tests__/hooks.test.tsx
index 5fe55c260dc..c2edcacd08a 100644
--- a/app/src/pages/Desktop/Labware/__tests__/hooks.test.tsx
+++ b/app/src/pages/Desktop/Labware/__tests__/hooks.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { Provider } from 'react-redux'
 import { createStore } from 'redux'
 import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest'
@@ -20,6 +19,7 @@ import {
 import { useLabwareFailure, useNewLabwareName } from '../hooks'
 import { useAllLabware } from '/app/local-resources/labware'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { State } from '/app/redux/types'
 import type { FailedLabwareFile } from '/app/redux/custom-labware/types'
@@ -39,7 +39,7 @@ describe('useAllLabware hook', () => {
   })
 
   it('should return object with only definition and modified date', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
     const { result } = renderHook(() => useAllLabware('reverse', 'all'), {
@@ -53,7 +53,7 @@ describe('useAllLabware hook', () => {
     expect(labware2.definition).toBe(mockValidLabware.definition)
   })
   it('should return alphabetically sorted list', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
     const { result } = renderHook(() => useAllLabware('alphabetical', 'all'), {
@@ -67,7 +67,7 @@ describe('useAllLabware hook', () => {
     expect(labware1.definition).toBe(mockValidLabware.definition)
   })
   it('should return no labware if not the right filter', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
     const { result } = renderHook(() => useAllLabware('reverse', 'reservoir'), {
@@ -80,7 +80,7 @@ describe('useAllLabware hook', () => {
     expect(labware2).toBe(undefined)
   })
   it('should return labware with wellPlate filter', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
     const { result } = renderHook(() => useAllLabware('reverse', 'wellPlate'), {
@@ -94,7 +94,7 @@ describe('useAllLabware hook', () => {
     expect(labware2.definition).toBe(mockValidLabware.definition)
   })
   it('should return custom labware with customLabware filter', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
     const { result } = renderHook(
@@ -127,7 +127,7 @@ describe('useLabwareFailure hook', () => {
     vi.restoreAllMocks()
   })
   it('should return invalid labware definition', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <Provider store={store}>
@@ -147,7 +147,7 @@ describe('useLabwareFailure hook', () => {
       errorMessage: null,
     })
 
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <Provider store={store}>
@@ -170,7 +170,7 @@ describe('useLabwareFailure hook', () => {
       errorMessage: null,
     })
 
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <Provider store={store}>
@@ -190,7 +190,7 @@ describe('useLabwareFailure hook', () => {
       errorMessage: 'error',
     })
 
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => (
       <Provider store={store}>
@@ -217,7 +217,7 @@ describe('useNewLabwareName hook', () => {
   })
 
   it('should return filename as a string', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
     const { result } = renderHook(useNewLabwareName, { wrapper })
diff --git a/app/src/pages/ODD/ConnectViaEthernet/__tests__/DisplayConnectionStatus.test.tsx b/app/src/pages/ODD/ConnectViaEthernet/__tests__/DisplayConnectionStatus.test.tsx
index 9efbfd5c3dc..0caa3a6ba10 100644
--- a/app/src/pages/ODD/ConnectViaEthernet/__tests__/DisplayConnectionStatus.test.tsx
+++ b/app/src/pages/ODD/ConnectViaEthernet/__tests__/DisplayConnectionStatus.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 
@@ -6,6 +5,7 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { DisplayConnectionStatus } from '../DisplayConnectionStatus'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 const mockFunc = vi.fn()
@@ -18,16 +18,14 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (
-  props: React.ComponentProps<typeof DisplayConnectionStatus>
-) => {
+const render = (props: ComponentProps<typeof DisplayConnectionStatus>) => {
   return renderWithProviders(<DisplayConnectionStatus {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('DisplayConnectionStatus', () => {
-  let props: React.ComponentProps<typeof DisplayConnectionStatus>
+  let props: ComponentProps<typeof DisplayConnectionStatus>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/pages/ODD/ConnectViaEthernet/__tests__/TitleHeader.test.tsx b/app/src/pages/ODD/ConnectViaEthernet/__tests__/TitleHeader.test.tsx
index cffa8e9c63a..8c8667619b9 100644
--- a/app/src/pages/ODD/ConnectViaEthernet/__tests__/TitleHeader.test.tsx
+++ b/app/src/pages/ODD/ConnectViaEthernet/__tests__/TitleHeader.test.tsx
@@ -1,10 +1,10 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 
 import { renderWithProviders } from '/app/__testing-utils__'
 import { TitleHeader } from '../TitleHeader'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 const mockNavigate = vi.fn()
@@ -16,12 +16,12 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof TitleHeader>) => {
+const render = (props: ComponentProps<typeof TitleHeader>) => {
   return renderWithProviders(<TitleHeader {...props} />)
 }
 
 describe('TitleHeader', () => {
-  let props: React.ComponentProps<typeof TitleHeader>
+  let props: ComponentProps<typeof TitleHeader>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/pages/ODD/ConnectViaWifi/SetWifiCred.tsx b/app/src/pages/ODD/ConnectViaWifi/SetWifiCred.tsx
index e2716fc2282..2d81286d058 100644
--- a/app/src/pages/ODD/ConnectViaWifi/SetWifiCred.tsx
+++ b/app/src/pages/ODD/ConnectViaWifi/SetWifiCred.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { Flex, DIRECTION_COLUMN } from '@opentrons/components'
@@ -6,13 +5,14 @@ import { Flex, DIRECTION_COLUMN } from '@opentrons/components'
 import { SetWifiCred as SetWifiCredComponent } from '/app/organisms/ODD/NetworkSettings'
 import { RobotSetupHeader } from '/app/organisms/ODD/RobotSetupHeader'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { WifiScreenOption } from './'
 
 interface SetWifiCredProps {
   handleConnect: () => void
   password: string
   setCurrentOption: (option: WifiScreenOption) => void
-  setPassword: React.Dispatch<React.SetStateAction<string>>
+  setPassword: Dispatch<SetStateAction<string>>
 }
 
 export function SetWifiCred({
diff --git a/app/src/pages/ODD/InitialLoadingScreen/index.tsx b/app/src/pages/ODD/InitialLoadingScreen/index.tsx
index f35fad13b56..003d37e549e 100644
--- a/app/src/pages/ODD/InitialLoadingScreen/index.tsx
+++ b/app/src/pages/ODD/InitialLoadingScreen/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useSelector } from 'react-redux'
 import {
   ALIGN_CENTER,
@@ -12,10 +11,12 @@ import {
 import { useRobotSettingsQuery } from '@opentrons/react-api-client'
 import { getIsShellReady } from '/app/redux/shell'
 
+import type { ReactNode } from 'react'
+
 export function InitialLoadingScreen({
   children,
 }: {
-  children?: React.ReactNode
+  children?: ReactNode
 }): JSX.Element {
   const isShellReady = useSelector(getIsShellReady)
 
diff --git a/app/src/pages/ODD/InstrumentsDashboard/index.tsx b/app/src/pages/ODD/InstrumentsDashboard/index.tsx
index acc88714979..49268c0ec51 100644
--- a/app/src/pages/ODD/InstrumentsDashboard/index.tsx
+++ b/app/src/pages/ODD/InstrumentsDashboard/index.tsx
@@ -7,6 +7,7 @@ import { AttachedInstrumentMountItem } from '/app/organisms/ODD/InstrumentMountI
 import { GripperWizardFlows } from '/app/organisms/GripperWizardFlows'
 import { getShowPipetteCalibrationWarning } from '/app/transformations/instruments'
 import { PipetteRecalibrationODDWarning } from '/app/organisms/ODD/PipetteRecalibrationODDWarning'
+import type { ComponentProps } from 'react'
 import type { GripperData, PipetteData } from '@opentrons/api-client'
 
 const FETCH_PIPETTE_CAL_POLL = 10000
@@ -16,8 +17,8 @@ export const InstrumentsDashboard = (): JSX.Element => {
     refetchInterval: FETCH_PIPETTE_CAL_POLL,
   })
   const [wizardProps, setWizardProps] = useState<
-    | React.ComponentProps<typeof GripperWizardFlows>
-    | React.ComponentProps<typeof PipetteWizardFlows>
+    | ComponentProps<typeof GripperWizardFlows>
+    | ComponentProps<typeof PipetteWizardFlows>
     | null
   >(null)
 
diff --git a/app/src/pages/ODD/ProtocolDashboard/PinnedProtocolCarousel.tsx b/app/src/pages/ODD/ProtocolDashboard/PinnedProtocolCarousel.tsx
index 59e9fc5c117..267b77a5cea 100644
--- a/app/src/pages/ODD/ProtocolDashboard/PinnedProtocolCarousel.tsx
+++ b/app/src/pages/ODD/ProtocolDashboard/PinnedProtocolCarousel.tsx
@@ -1,4 +1,4 @@
-import type * as React from 'react'
+import styled from 'styled-components'
 import {
   ALIGN_FLEX_START,
   DIRECTION_ROW,
@@ -9,13 +9,13 @@ import {
 import { useNotifyAllRunsQuery } from '/app/resources/runs'
 import { PinnedProtocol } from './PinnedProtocol'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { ProtocolResource } from '@opentrons/shared-data'
 import type { CardSizeType } from './PinnedProtocol'
-import styled from 'styled-components'
 
 interface PinnedProtocolCarouselProps {
   pinnedProtocols: ProtocolResource[]
-  longPress: React.Dispatch<React.SetStateAction<boolean>>
+  longPress: Dispatch<SetStateAction<boolean>>
   setShowDeleteConfirmationModal: (showDeleteConfirmationModal: boolean) => void
   setTargetProtocolId: (targetProtocolId: string) => void
   isRequiredCSV?: boolean
diff --git a/app/src/pages/ODD/ProtocolDashboard/ProtocolCard.tsx b/app/src/pages/ODD/ProtocolDashboard/ProtocolCard.tsx
index 61a0bcb9061..6786205d889 100644
--- a/app/src/pages/ODD/ProtocolDashboard/ProtocolCard.tsx
+++ b/app/src/pages/ODD/ProtocolDashboard/ProtocolCard.tsx
@@ -35,6 +35,7 @@ import { LongPressModal } from './LongPressModal'
 import { formatTimeWithUtcLabel } from '/app/resources/runs'
 import { useUpdatedLastRunTime } from '/app/pages/ODD/ProtocolDashboard/hooks'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { UseLongPressResult } from '@opentrons/components'
 import type { ProtocolResource } from '@opentrons/shared-data'
 import type { OddModalHeaderBaseProps } from '/app/molecules/OddModal/types'
@@ -43,7 +44,7 @@ const REFETCH_INTERVAL = 5000
 
 interface ProtocolCardProps {
   protocol: ProtocolResource
-  longPress: React.Dispatch<React.SetStateAction<boolean>>
+  longPress: Dispatch<SetStateAction<boolean>>
   setShowDeleteConfirmationModal: (showDeleteConfirmationModal: boolean) => void
   setTargetProtocolId: (targetProtocolId: string) => void
   lastRun?: string
diff --git a/app/src/pages/ODD/ProtocolDashboard/__tests__/DeleteProtocolConfirmationModal.test.tsx b/app/src/pages/ODD/ProtocolDashboard/__tests__/DeleteProtocolConfirmationModal.test.tsx
index 1c55405dbde..059e62f85e5 100644
--- a/app/src/pages/ODD/ProtocolDashboard/__tests__/DeleteProtocolConfirmationModal.test.tsx
+++ b/app/src/pages/ODD/ProtocolDashboard/__tests__/DeleteProtocolConfirmationModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
 import { act, fireEvent, screen } from '@testing-library/react'
@@ -10,6 +9,8 @@ import { useHost, useProtocolQuery } from '@opentrons/react-api-client'
 import { i18n } from '/app/i18n'
 import { useToaster } from '/app/organisms/ToasterOven'
 import { DeleteProtocolConfirmationModal } from '../DeleteProtocolConfirmationModal'
+
+import type { ComponentProps } from 'react'
 import type { HostConfig } from '@opentrons/api-client'
 
 vi.mock('@opentrons/api-client')
@@ -22,7 +23,7 @@ const mockMakeSnackbar = vi.fn()
 const MOCK_HOST_CONFIG = {} as HostConfig
 
 const render = (
-  props: React.ComponentProps<typeof DeleteProtocolConfirmationModal>
+  props: ComponentProps<typeof DeleteProtocolConfirmationModal>
 ) => {
   return renderWithProviders(<DeleteProtocolConfirmationModal {...props} />, {
     i18nInstance: i18n,
@@ -30,7 +31,7 @@ const render = (
 }
 
 describe('DeleteProtocolConfirmationModal', () => {
-  let props: React.ComponentProps<typeof DeleteProtocolConfirmationModal>
+  let props: ComponentProps<typeof DeleteProtocolConfirmationModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/pages/ODD/ProtocolDashboard/__tests__/PinnedProtocol.test.tsx b/app/src/pages/ODD/ProtocolDashboard/__tests__/PinnedProtocol.test.tsx
index f92904573d0..a98f0478d6d 100644
--- a/app/src/pages/ODD/ProtocolDashboard/__tests__/PinnedProtocol.test.tsx
+++ b/app/src/pages/ODD/ProtocolDashboard/__tests__/PinnedProtocol.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 import { act, fireEvent, screen } from '@testing-library/react'
 import { MemoryRouter } from 'react-router-dom'
@@ -10,9 +9,10 @@ import { i18n } from '/app/i18n'
 import { useFeatureFlag } from '/app/redux/config'
 import { PinnedProtocol } from '../PinnedProtocol'
 
+import type { ComponentProps } from 'react'
+import type { NavigateFunction } from 'react-router-dom'
 import type { Chip } from '@opentrons/components'
 import type { ProtocolResource } from '@opentrons/shared-data'
-import type { NavigateFunction } from 'react-router-dom'
 
 const mockNavigate = vi.fn()
 
@@ -50,7 +50,7 @@ const mockProtocol: ProtocolResource = {
   key: '26ed5a82-502f-4074-8981-57cdda1d066d',
 }
 
-const render = (props: React.ComponentProps<typeof PinnedProtocol>) => {
+const render = (props: ComponentProps<typeof PinnedProtocol>) => {
   return renderWithProviders(
     <MemoryRouter>
       <PinnedProtocol {...props} />
@@ -62,7 +62,7 @@ const render = (props: React.ComponentProps<typeof PinnedProtocol>) => {
 }
 
 describe('Pinned Protocol', () => {
-  let props: React.ComponentProps<typeof PinnedProtocol>
+  let props: ComponentProps<typeof PinnedProtocol>
   vi.useFakeTimers()
 
   beforeEach(() => {
diff --git a/app/src/pages/ODD/ProtocolDashboard/__tests__/ProtocolCard.test.tsx b/app/src/pages/ODD/ProtocolDashboard/__tests__/ProtocolCard.test.tsx
index c26b429e29e..5f1587242d8 100644
--- a/app/src/pages/ODD/ProtocolDashboard/__tests__/ProtocolCard.test.tsx
+++ b/app/src/pages/ODD/ProtocolDashboard/__tests__/ProtocolCard.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 import { act, fireEvent, screen } from '@testing-library/react'
 import { MemoryRouter } from 'react-router-dom'
@@ -14,6 +13,7 @@ import { i18n } from '/app/i18n'
 import { useFeatureFlag } from '/app/redux/config'
 import { ProtocolCard } from '../ProtocolCard'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 import type { UseQueryResult } from 'react-query'
 import type {
@@ -77,7 +77,7 @@ const mockProtocolWithCSV: ProtocolResource = {
   key: '26ed5a82-502f-4074-8981-57cdda1d066d',
 }
 
-const render = (props: React.ComponentProps<typeof ProtocolCard>) => {
+const render = (props: ComponentProps<typeof ProtocolCard>) => {
   return renderWithProviders(
     <MemoryRouter>
       <ProtocolCard {...props} />
@@ -89,7 +89,7 @@ const render = (props: React.ComponentProps<typeof ProtocolCard>) => {
 }
 
 describe('ProtocolCard', () => {
-  let props: React.ComponentProps<typeof ProtocolCard>
+  let props: ComponentProps<typeof ProtocolCard>
   vi.useFakeTimers()
 
   beforeEach(() => {
diff --git a/app/src/pages/ODD/ProtocolDetails/__tests__/Deck.test.tsx b/app/src/pages/ODD/ProtocolDetails/__tests__/Deck.test.tsx
index a99e2c3f82e..902cd1d3b8c 100644
--- a/app/src/pages/ODD/ProtocolDetails/__tests__/Deck.test.tsx
+++ b/app/src/pages/ODD/ProtocolDetails/__tests__/Deck.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest'
 import { screen } from '@testing-library/react'
 import { when } from 'vitest-when'
@@ -12,6 +11,7 @@ import {
 import { i18n } from '/app/i18n'
 import { Deck } from '../Deck'
 
+import type { ComponentProps } from 'react'
 import type { UseQueryResult } from 'react-query'
 import type { CompletedProtocolAnalysis } from '@opentrons/shared-data'
 import type { Protocol } from '@opentrons/api-client'
@@ -141,14 +141,14 @@ const MOCK_PROTOCOL_ANALYSIS = {
   ],
 }
 
-const render = (props: React.ComponentProps<typeof Deck>) => {
+const render = (props: ComponentProps<typeof Deck>) => {
   return renderWithProviders(<Deck {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('Deck', () => {
-  let props: React.ComponentProps<typeof Deck>
+  let props: ComponentProps<typeof Deck>
   beforeEach(() => {
     props = {
       protocolId: MOCK_PROTOCOL_ID,
diff --git a/app/src/pages/ODD/ProtocolDetails/__tests__/EmptySection.test.tsx b/app/src/pages/ODD/ProtocolDetails/__tests__/EmptySection.test.tsx
index 32b388ef1f3..9c1832fc08f 100644
--- a/app/src/pages/ODD/ProtocolDetails/__tests__/EmptySection.test.tsx
+++ b/app/src/pages/ODD/ProtocolDetails/__tests__/EmptySection.test.tsx
@@ -1,18 +1,19 @@
-import type * as React from 'react'
 import { it, describe } from 'vitest'
 import { screen } from '@testing-library/react'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { EmptySection } from '../EmptySection'
 
-const render = (props: React.ComponentProps<typeof EmptySection>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof EmptySection>) => {
   return renderWithProviders(<EmptySection {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('EmptySection', () => {
-  let props: React.ComponentProps<typeof EmptySection>
+  let props: ComponentProps<typeof EmptySection>
 
   it('should render text for labware', () => {
     props = {
diff --git a/app/src/pages/ODD/ProtocolDetails/__tests__/Hardware.test.tsx b/app/src/pages/ODD/ProtocolDetails/__tests__/Hardware.test.tsx
index a8f78c8a121..7d03ce6ba3d 100644
--- a/app/src/pages/ODD/ProtocolDetails/__tests__/Hardware.test.tsx
+++ b/app/src/pages/ODD/ProtocolDetails/__tests__/Hardware.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, beforeEach, afterEach } from 'vitest'
 import { screen } from '@testing-library/react'
 import { when } from 'vitest-when'
@@ -12,19 +11,21 @@ import { i18n } from '/app/i18n'
 import { useRequiredProtocolHardware } from '/app/resources/protocols'
 import { Hardware } from '../Hardware'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/resources/protocols')
 vi.mock('/app/redux/config')
 
 const MOCK_PROTOCOL_ID = 'mock_protocol_id'
 
-const render = (props: React.ComponentProps<typeof Hardware>) => {
+const render = (props: ComponentProps<typeof Hardware>) => {
   return renderWithProviders(<Hardware {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('Hardware', () => {
-  let props: React.ComponentProps<typeof Hardware>
+  let props: ComponentProps<typeof Hardware>
   beforeEach(() => {
     props = {
       protocolId: MOCK_PROTOCOL_ID,
diff --git a/app/src/pages/ODD/ProtocolDetails/__tests__/Labware.test.tsx b/app/src/pages/ODD/ProtocolDetails/__tests__/Labware.test.tsx
index 0c1aab61196..14568a6ceb3 100644
--- a/app/src/pages/ODD/ProtocolDetails/__tests__/Labware.test.tsx
+++ b/app/src/pages/ODD/ProtocolDetails/__tests__/Labware.test.tsx
@@ -1,10 +1,6 @@
-import type * as React from 'react'
 import { vi, it, describe, beforeEach, afterEach } from 'vitest'
+import { screen } from '@testing-library/react'
 import { when } from 'vitest-when'
-import { renderWithProviders } from '/app/__testing-utils__'
-import { i18n } from '/app/i18n'
-import { useRequiredProtocolLabware } from '/app/resources/protocols'
-import { Labware } from '../Labware'
 
 import {
   fixtureTiprack10ul,
@@ -12,21 +8,26 @@ import {
   fixture96Plate,
 } from '@opentrons/shared-data'
 
+import { renderWithProviders } from '/app/__testing-utils__'
+import { i18n } from '/app/i18n'
+import { useRequiredProtocolLabware } from '/app/resources/protocols'
+import { Labware } from '../Labware'
+
+import type { ComponentProps } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
-import { screen } from '@testing-library/react'
 
 vi.mock('/app/resources/protocols')
 
 const MOCK_PROTOCOL_ID = 'mock_protocol_id'
 
-const render = (props: React.ComponentProps<typeof Labware>) => {
+const render = (props: ComponentProps<typeof Labware>) => {
   return renderWithProviders(<Labware {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('Labware', () => {
-  let props: React.ComponentProps<typeof Labware>
+  let props: ComponentProps<typeof Labware>
   beforeEach(() => {
     props = {
       protocolId: MOCK_PROTOCOL_ID,
diff --git a/app/src/pages/ODD/ProtocolDetails/__tests__/Liquids.test.tsx b/app/src/pages/ODD/ProtocolDetails/__tests__/Liquids.test.tsx
index be019dd6cf1..23233c6c50d 100644
--- a/app/src/pages/ODD/ProtocolDetails/__tests__/Liquids.test.tsx
+++ b/app/src/pages/ODD/ProtocolDetails/__tests__/Liquids.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, beforeEach } from 'vitest'
 import { when } from 'vitest-when'
 import { screen } from '@testing-library/react'
@@ -16,6 +15,7 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { Liquids } from '../Liquids'
 
+import type { ComponentProps } from 'react'
 import type { UseQueryResult } from 'react-query'
 import type { Protocol } from '@opentrons/api-client'
 import type * as SharedData from '@opentrons/shared-data'
@@ -180,14 +180,14 @@ const MOCK_LABWARE_INFO_BY_LIQUID_ID = {
   ],
 }
 
-const render = (props: React.ComponentProps<typeof Liquids>) => {
+const render = (props: ComponentProps<typeof Liquids>) => {
   return renderWithProviders(<Liquids {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('Liquids', () => {
-  let props: React.ComponentProps<typeof Liquids>
+  let props: ComponentProps<typeof Liquids>
   beforeEach(() => {
     props = {
       protocolId: MOCK_PROTOCOL_ID,
diff --git a/app/src/pages/ODD/ProtocolDetails/__tests__/Parameters.test.tsx b/app/src/pages/ODD/ProtocolDetails/__tests__/Parameters.test.tsx
index f41115cf638..b2d60c57c92 100644
--- a/app/src/pages/ODD/ProtocolDetails/__tests__/Parameters.test.tsx
+++ b/app/src/pages/ODD/ProtocolDetails/__tests__/Parameters.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { it, describe, beforeEach, vi } from 'vitest'
 import { screen } from '@testing-library/react'
@@ -9,17 +8,19 @@ import { useRunTimeParameters } from '/app/resources/protocols'
 import { Parameters } from '../Parameters'
 import { mockRunTimeParameterData } from '/app/organisms/ODD/ProtocolSetup/__fixtures__'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/organisms/ToasterOven')
 vi.mock('/app/resources/protocols')
 
-const render = (props: React.ComponentProps<typeof Parameters>) => {
+const render = (props: ComponentProps<typeof Parameters>) => {
   return renderWithProviders(<Parameters {...props} />, {
     i18nInstance: i18n,
   })
 }
 const MOCK_MAKE_SNACK_BAR = vi.fn()
 describe('Parameters', () => {
-  let props: React.ComponentProps<typeof Parameters>
+  let props: ComponentProps<typeof Parameters>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/pages/ODD/ProtocolSetup/__tests__/ConfirmAttachedModal.test.tsx b/app/src/pages/ODD/ProtocolSetup/__tests__/ConfirmAttachedModal.test.tsx
index f06e36df20d..5a9b2ea98bc 100644
--- a/app/src/pages/ODD/ProtocolSetup/__tests__/ConfirmAttachedModal.test.tsx
+++ b/app/src/pages/ODD/ProtocolSetup/__tests__/ConfirmAttachedModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 
@@ -7,17 +6,19 @@ import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { ConfirmAttachedModal } from '../ConfirmAttachedModal'
 
+import type { ComponentProps } from 'react'
+
 const mockOnCloseClick = vi.fn()
 const mockOnConfirmClick = vi.fn()
 
-const render = (props: React.ComponentProps<typeof ConfirmAttachedModal>) => {
+const render = (props: ComponentProps<typeof ConfirmAttachedModal>) => {
   return renderWithProviders(<ConfirmAttachedModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('ConfirmAttachedModal', () => {
-  let props: React.ComponentProps<typeof ConfirmAttachedModal>
+  let props: ComponentProps<typeof ConfirmAttachedModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/pages/ODD/QuickTransferDashboard/PinnedTransferCarousel.tsx b/app/src/pages/ODD/QuickTransferDashboard/PinnedTransferCarousel.tsx
index 8b6554c3aa1..fc5b127b437 100644
--- a/app/src/pages/ODD/QuickTransferDashboard/PinnedTransferCarousel.tsx
+++ b/app/src/pages/ODD/QuickTransferDashboard/PinnedTransferCarousel.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import styled from 'styled-components'
 import {
   ALIGN_FLEX_START,
@@ -11,12 +10,13 @@ import {
 
 import { PinnedTransfer } from './PinnedTransfer'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { ProtocolResource } from '@opentrons/shared-data'
 import type { CardSizeType } from './PinnedTransfer'
 
 export function PinnedTransferCarousel(props: {
   pinnedTransfers: ProtocolResource[]
-  longPress: React.Dispatch<React.SetStateAction<boolean>>
+  longPress: Dispatch<SetStateAction<boolean>>
   setShowDeleteConfirmationModal: (showDeleteConfirmationModal: boolean) => void
   setTargetTransferId: (targetTransferId: string) => void
 }): JSX.Element {
diff --git a/app/src/pages/ODD/QuickTransferDashboard/__tests__/DeleteTransferConfirmationModal.test.tsx b/app/src/pages/ODD/QuickTransferDashboard/__tests__/DeleteTransferConfirmationModal.test.tsx
index 1b42a6a5e3e..e7cb5ad92e6 100644
--- a/app/src/pages/ODD/QuickTransferDashboard/__tests__/DeleteTransferConfirmationModal.test.tsx
+++ b/app/src/pages/ODD/QuickTransferDashboard/__tests__/DeleteTransferConfirmationModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
 import { act, fireEvent, screen } from '@testing-library/react'
@@ -11,6 +10,7 @@ import { i18n } from '/app/i18n'
 import { useToaster } from '/app/organisms/ToasterOven'
 import { DeleteTransferConfirmationModal } from '../DeleteTransferConfirmationModal'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 import type { HostConfig } from '@opentrons/api-client'
 
@@ -33,7 +33,7 @@ const mockMakeSnackbar = vi.fn()
 const MOCK_HOST_CONFIG = {} as HostConfig
 
 const render = (
-  props: React.ComponentProps<typeof DeleteTransferConfirmationModal>
+  props: ComponentProps<typeof DeleteTransferConfirmationModal>
 ) => {
   return renderWithProviders(<DeleteTransferConfirmationModal {...props} />, {
     i18nInstance: i18n,
@@ -41,7 +41,7 @@ const render = (
 }
 
 describe('DeleteTransferConfirmationModal', () => {
-  let props: React.ComponentProps<typeof DeleteTransferConfirmationModal>
+  let props: ComponentProps<typeof DeleteTransferConfirmationModal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/pages/ODD/QuickTransferDetails/__tests__/Deck.test.tsx b/app/src/pages/ODD/QuickTransferDetails/__tests__/Deck.test.tsx
index e15296037d5..415a25fdc65 100644
--- a/app/src/pages/ODD/QuickTransferDetails/__tests__/Deck.test.tsx
+++ b/app/src/pages/ODD/QuickTransferDetails/__tests__/Deck.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest'
 import { screen } from '@testing-library/react'
 import { when } from 'vitest-when'
@@ -12,6 +11,7 @@ import {
 import { i18n } from '/app/i18n'
 import { Deck } from '../Deck'
 
+import type { ComponentProps } from 'react'
 import type { UseQueryResult } from 'react-query'
 import type { CompletedProtocolAnalysis } from '@opentrons/shared-data'
 import type { Protocol } from '@opentrons/api-client'
@@ -141,14 +141,14 @@ const MOCK_PROTOCOL_ANALYSIS = {
   ],
 }
 
-const render = (props: React.ComponentProps<typeof Deck>) => {
+const render = (props: ComponentProps<typeof Deck>) => {
   return renderWithProviders(<Deck {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('Deck', () => {
-  let props: React.ComponentProps<typeof Deck>
+  let props: ComponentProps<typeof Deck>
   beforeEach(() => {
     props = {
       transferId: MOCK_PROTOCOL_ID,
diff --git a/app/src/pages/ODD/QuickTransferDetails/__tests__/Hardware.test.tsx b/app/src/pages/ODD/QuickTransferDetails/__tests__/Hardware.test.tsx
index 2b4af1a5178..a5f707fdf85 100644
--- a/app/src/pages/ODD/QuickTransferDetails/__tests__/Hardware.test.tsx
+++ b/app/src/pages/ODD/QuickTransferDetails/__tests__/Hardware.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, beforeEach, afterEach } from 'vitest'
 import { screen } from '@testing-library/react'
 import { when } from 'vitest-when'
@@ -12,20 +11,22 @@ import { i18n } from '/app/i18n'
 import { useRequiredProtocolHardware } from '/app/resources/protocols'
 import { Hardware } from '../Hardware'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('/app/transformations/commands')
 vi.mock('/app/resources/protocols')
 vi.mock('/app/redux/config')
 
 const MOCK_PROTOCOL_ID = 'mock_protocol_id'
 
-const render = (props: React.ComponentProps<typeof Hardware>) => {
+const render = (props: ComponentProps<typeof Hardware>) => {
   return renderWithProviders(<Hardware {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('Hardware', () => {
-  let props: React.ComponentProps<typeof Hardware>
+  let props: ComponentProps<typeof Hardware>
   beforeEach(() => {
     props = {
       transferId: MOCK_PROTOCOL_ID,
diff --git a/app/src/pages/ODD/QuickTransferDetails/__tests__/Labware.test.tsx b/app/src/pages/ODD/QuickTransferDetails/__tests__/Labware.test.tsx
index 7dd49d4f279..09f09f73718 100644
--- a/app/src/pages/ODD/QuickTransferDetails/__tests__/Labware.test.tsx
+++ b/app/src/pages/ODD/QuickTransferDetails/__tests__/Labware.test.tsx
@@ -1,32 +1,31 @@
-import type * as React from 'react'
 import { vi, it, describe, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
-import { renderWithProviders } from '/app/__testing-utils__'
-import { i18n } from '/app/i18n'
-import { useRequiredProtocolLabware } from '/app/resources/protocols'
-import { Labware } from '../Labware'
-
+import { screen } from '@testing-library/react'
 import {
   fixtureTiprack10ul,
   fixtureTiprack300ul,
   fixture96Plate,
 } from '@opentrons/shared-data'
+import { renderWithProviders } from '/app/__testing-utils__'
+import { i18n } from '/app/i18n'
+import { useRequiredProtocolLabware } from '/app/resources/protocols'
+import { Labware } from '../Labware'
 
+import type { ComponentProps } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
-import { screen } from '@testing-library/react'
 
 vi.mock('/app/resources/protocols')
 
 const MOCK_PROTOCOL_ID = 'mock_protocol_id'
 
-const render = (props: React.ComponentProps<typeof Labware>) => {
+const render = (props: ComponentProps<typeof Labware>) => {
   return renderWithProviders(<Labware {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('Labware', () => {
-  let props: React.ComponentProps<typeof Labware>
+  let props: ComponentProps<typeof Labware>
   beforeEach(() => {
     props = {
       transferId: MOCK_PROTOCOL_ID,
diff --git a/app/src/pages/ODD/RobotDashboard/__tests__/WelcomeModal.test.tsx b/app/src/pages/ODD/RobotDashboard/__tests__/WelcomeModal.test.tsx
index 7fc9bf46ea2..8258f29f281 100644
--- a/app/src/pages/ODD/RobotDashboard/__tests__/WelcomeModal.test.tsx
+++ b/app/src/pages/ODD/RobotDashboard/__tests__/WelcomeModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 
@@ -9,6 +8,7 @@ import { i18n } from '/app/i18n'
 import { updateConfigValue } from '/app/redux/config'
 import { WelcomeModal } from '../WelcomeModal'
 
+import type { ComponentProps } from 'react'
 import type { SetStatusBarCreateCommand } from '@opentrons/shared-data'
 
 vi.mock('/app/redux/config')
@@ -17,14 +17,14 @@ vi.mock('@opentrons/react-api-client')
 const mockFunc = vi.fn()
 const WELCOME_MODAL_IMAGE_NAME = 'welcome_dashboard_modal.png'
 
-const render = (props: React.ComponentProps<typeof WelcomeModal>) => {
+const render = (props: ComponentProps<typeof WelcomeModal>) => {
   return renderWithProviders(<WelcomeModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('WelcomeModal', () => {
-  let props: React.ComponentProps<typeof WelcomeModal>
+  let props: ComponentProps<typeof WelcomeModal>
   let mockCreateLiveCommand = vi.fn()
 
   beforeEach(() => {
diff --git a/app/src/redux-resources/analytics/hooks/__tests__/useProtocolRunAnalyticsData.test.tsx b/app/src/redux-resources/analytics/hooks/__tests__/useProtocolRunAnalyticsData.test.tsx
index b99b66c8816..1f0501e0c96 100644
--- a/app/src/redux-resources/analytics/hooks/__tests__/useProtocolRunAnalyticsData.test.tsx
+++ b/app/src/redux-resources/analytics/hooks/__tests__/useProtocolRunAnalyticsData.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
 import { renderHook, waitFor } from '@testing-library/react'
@@ -14,6 +13,8 @@ import { useStoredProtocolAnalysis } from '/app/resources/analysis'
 import { useProtocolMetadata } from '/app/resources/protocols'
 import { formatInterval } from '/app/transformations/commands'
 import { mockConnectableRobot } from '/app/redux/discovery/__fixtures__'
+
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 
 vi.mock('/app/redux/analytics/hash')
@@ -23,7 +24,7 @@ vi.mock('/app/resources/analysis')
 vi.mock('/app/resources/runs')
 vi.mock('/app/transformations/commands')
 
-let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+let wrapper: FunctionComponent<{ children: ReactNode }>
 let store: Store<any> = createStore(vi.fn(), {})
 
 const RUN_ID = '1'
diff --git a/app/src/redux-resources/analytics/hooks/__tests__/useRobotAnalyticsData.test.tsx b/app/src/redux-resources/analytics/hooks/__tests__/useRobotAnalyticsData.test.tsx
index a781d71c495..bdb7407f843 100644
--- a/app/src/redux-resources/analytics/hooks/__tests__/useRobotAnalyticsData.test.tsx
+++ b/app/src/redux-resources/analytics/hooks/__tests__/useRobotAnalyticsData.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
 import { renderHook } from '@testing-library/react'
@@ -18,6 +17,7 @@ import {
   getRobotSerialNumber,
 } from '/app/redux/discovery'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { DiscoveredRobot } from '/app/redux/discovery/types'
 import type { AttachedPipettesByMount } from '/app/redux/pipettes/types'
@@ -41,7 +41,7 @@ const ATTACHED_PIPETTES = {
 }
 const ROBOT_SERIAL_NUMBER = 'OT123'
 
-let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+let wrapper: FunctionComponent<{ children: ReactNode }>
 let store: Store<any> = createStore(vi.fn(), {})
 
 describe('useRobotAnalyticsData hook', () => {
diff --git a/app/src/redux-resources/analytics/hooks/__tests__/useTrackProtocolRunEvent.test.tsx b/app/src/redux-resources/analytics/hooks/__tests__/useTrackProtocolRunEvent.test.tsx
index c12bcd5dbeb..b387efa58fd 100644
--- a/app/src/redux-resources/analytics/hooks/__tests__/useTrackProtocolRunEvent.test.tsx
+++ b/app/src/redux-resources/analytics/hooks/__tests__/useTrackProtocolRunEvent.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { createStore } from 'redux'
 import { Provider } from 'react-redux'
 import { QueryClient, QueryClientProvider } from 'react-query'
@@ -16,6 +15,7 @@ import { getAppLanguage } from '/app/redux/config'
 import { mockConnectableRobot } from '/app/redux/discovery/__fixtures__'
 import { useRobot } from '/app/redux-resources/robots'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { Mock } from 'vitest'
 
@@ -33,7 +33,7 @@ const PROTOCOL_PROPERTIES = { protocolType: 'python' }
 
 let mockTrackEvent: Mock
 let mockGetProtocolRunAnalyticsData: Mock
-let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+let wrapper: FunctionComponent<{ children: ReactNode }>
 let store: Store<any> = createStore(vi.fn(), {})
 
 describe('useTrackProtocolRunEvent hook', () => {
diff --git a/app/src/redux-resources/config/__tests__/useIsUnboxingFlowOngoing.test.tsx b/app/src/redux-resources/config/__tests__/useIsUnboxingFlowOngoing.test.tsx
index d7610096015..cc65ca15100 100644
--- a/app/src/redux-resources/config/__tests__/useIsUnboxingFlowOngoing.test.tsx
+++ b/app/src/redux-resources/config/__tests__/useIsUnboxingFlowOngoing.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { renderHook } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { Provider } from 'react-redux'
@@ -7,6 +6,7 @@ import { createStore } from 'redux'
 import { getIsOnDevice, getOnDeviceDisplaySettings } from '/app/redux/config'
 import { useIsUnboxingFlowOngoing } from '../useIsUnboxingFlowOngoing'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { State } from '/app/redux/types'
 
@@ -22,7 +22,7 @@ const mockDisplaySettings = {
 }
 
 describe('useIsUnboxingFlowOngoing', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     wrapper = ({ children }) => <Provider store={store}>{children}</Provider>
     vi.mocked(getOnDeviceDisplaySettings).mockReturnValue(mockDisplaySettings)
diff --git a/app/src/redux-resources/robots/hooks/__tests__/useIsFlex.test.tsx b/app/src/redux-resources/robots/hooks/__tests__/useIsFlex.test.tsx
index acb68840dfe..19ca25dff24 100644
--- a/app/src/redux-resources/robots/hooks/__tests__/useIsFlex.test.tsx
+++ b/app/src/redux-resources/robots/hooks/__tests__/useIsFlex.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
 import { Provider } from 'react-redux'
@@ -9,6 +8,8 @@ import { QueryClient, QueryClientProvider } from 'react-query'
 import { getRobotModelByName } from '/app/redux/discovery'
 
 import { useIsFlex } from '..'
+
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 
 vi.mock('/app/redux/discovery/selectors')
@@ -16,7 +17,7 @@ vi.mock('/app/redux/discovery/selectors')
 const store: Store<any> = createStore(vi.fn(), {})
 
 describe('useIsFlex hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     const queryClient = new QueryClient()
     wrapper = ({ children }) => (
diff --git a/app/src/redux-resources/robots/hooks/__tests__/useIsRobotViewable.test.tsx b/app/src/redux-resources/robots/hooks/__tests__/useIsRobotViewable.test.tsx
index 8b659d25656..38e908b8452 100644
--- a/app/src/redux-resources/robots/hooks/__tests__/useIsRobotViewable.test.tsx
+++ b/app/src/redux-resources/robots/hooks/__tests__/useIsRobotViewable.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
 import { Provider } from 'react-redux'
@@ -13,6 +12,8 @@ import {
   mockUnreachableRobot,
 } from '/app/redux/discovery/__fixtures__'
 import { useIsRobotViewable } from '../useIsRobotViewable'
+
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 
 vi.mock('/app/redux/discovery')
@@ -20,7 +21,7 @@ vi.mock('/app/redux/discovery')
 const store: Store<any> = createStore(vi.fn(), {})
 
 describe('useIsRobotViewable hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     const queryClient = new QueryClient()
     wrapper = ({ children }) => (
diff --git a/app/src/redux-resources/robots/hooks/__tests__/useRobot.test.tsx b/app/src/redux-resources/robots/hooks/__tests__/useRobot.test.tsx
index df7e05347dd..f99452c7994 100644
--- a/app/src/redux-resources/robots/hooks/__tests__/useRobot.test.tsx
+++ b/app/src/redux-resources/robots/hooks/__tests__/useRobot.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { Provider } from 'react-redux'
@@ -11,6 +10,7 @@ import { mockConnectableRobot } from '/app/redux/discovery/__fixtures__'
 
 import { useRobot } from '..'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 
 vi.mock('/app/redux/discovery')
@@ -18,7 +18,7 @@ vi.mock('/app/redux/discovery')
 const store: Store<any> = createStore(vi.fn(), {})
 
 describe('useRobot hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     const queryClient = new QueryClient()
     wrapper = ({ children }) => (
diff --git a/app/src/redux/robot-update/__tests__/hooks.test.tsx b/app/src/redux/robot-update/__tests__/hooks.test.tsx
index 7528bf290bc..bf9cee3afbc 100644
--- a/app/src/redux/robot-update/__tests__/hooks.test.tsx
+++ b/app/src/redux/robot-update/__tests__/hooks.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, describe, it, expect, beforeEach } from 'vitest'
 import { createStore } from 'redux'
 import { renderHook } from '@testing-library/react'
@@ -9,11 +8,12 @@ import { i18n } from '/app/i18n'
 import { useDispatchStartRobotUpdate } from '../hooks'
 import { startRobotUpdate, clearRobotUpdateSession } from '../actions'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { State } from '../../types'
 
 describe('useDispatchStartRobotUpdate', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   let store: Store<State>
   const mockRobotName = 'robotName'
   const mockSystemFile = 'systemFile'
diff --git a/app/src/resources/analysis/hooks/__tests__/useStoredProtocolAnalysis.test.tsx b/app/src/resources/analysis/hooks/__tests__/useStoredProtocolAnalysis.test.tsx
index 2437ed6e1a7..8bebe10c0e7 100644
--- a/app/src/resources/analysis/hooks/__tests__/useStoredProtocolAnalysis.test.tsx
+++ b/app/src/resources/analysis/hooks/__tests__/useStoredProtocolAnalysis.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
 import { QueryClient, QueryClientProvider } from 'react-query'
@@ -25,6 +24,7 @@ import {
 } from '../__fixtures__/storedProtocolAnalysis'
 import { useNotifyRunQuery } from '/app/resources/runs'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { UseQueryResult } from 'react-query'
 import type { Protocol, Run } from '@opentrons/api-client'
@@ -63,7 +63,7 @@ const PROTOCOL_ID = 'the_protocol_id'
 const PROTOCOL_KEY = 'the_protocol_key'
 
 describe('useStoredProtocolAnalysis hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     const queryClient = new QueryClient()
     wrapper = ({ children }) => (
diff --git a/app/src/resources/calibration/__tests__/useDeckCalibrationStatus.test.tsx b/app/src/resources/calibration/__tests__/useDeckCalibrationStatus.test.tsx
index 768c4152ff2..3cf71852f01 100644
--- a/app/src/resources/calibration/__tests__/useDeckCalibrationStatus.test.tsx
+++ b/app/src/resources/calibration/__tests__/useDeckCalibrationStatus.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
 import { Provider } from 'react-redux'
@@ -12,6 +11,8 @@ import { getDiscoverableRobotByName } from '/app/redux/discovery'
 
 import { useDeckCalibrationStatus } from '..'
 import { mockConnectableRobot } from '/app/redux/discovery/__fixtures__'
+
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 
 vi.mock('@opentrons/react-api-client')
@@ -21,7 +22,7 @@ vi.mock('/app/redux/discovery')
 const store: Store<any> = createStore(vi.fn(), {})
 
 describe('useDeckCalibrationStatus hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     const queryClient = new QueryClient()
     wrapper = ({ children }) => (
diff --git a/app/src/resources/devices/hooks/__tests__/useLights.test.tsx b/app/src/resources/devices/hooks/__tests__/useLights.test.tsx
index 7485a61f757..e190902f24b 100644
--- a/app/src/resources/devices/hooks/__tests__/useLights.test.tsx
+++ b/app/src/resources/devices/hooks/__tests__/useLights.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { Provider } from 'react-redux'
 import { createStore } from 'redux'
@@ -11,6 +10,7 @@ import {
 
 import { useLights } from '../useLights'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { Mock } from 'vitest'
 
@@ -19,7 +19,7 @@ vi.mock('@opentrons/react-api-client')
 const store: Store<any> = createStore(vi.fn(), {})
 
 describe('useLights hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   let setLights: Mock
 
   beforeEach(() => {
diff --git a/app/src/resources/instruments/__tests__/useAttachedPipetteCalibrations.test.tsx b/app/src/resources/instruments/__tests__/useAttachedPipetteCalibrations.test.tsx
index ef5309a52d5..02316923bd3 100644
--- a/app/src/resources/instruments/__tests__/useAttachedPipetteCalibrations.test.tsx
+++ b/app/src/resources/instruments/__tests__/useAttachedPipetteCalibrations.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { vi, it, expect, describe, beforeEach } from 'vitest'
 import { Provider } from 'react-redux'
@@ -21,6 +20,8 @@ import {
 } from '/app/redux/calibration/tip-length/__fixtures__'
 
 import { useAttachedPipetteCalibrations } from '..'
+
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { State } from '/app/redux/types'
 
@@ -43,7 +44,7 @@ const PIPETTE_CALIBRATIONS = {
 }
 
 describe('useAttachedPipetteCalibrations hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     const queryClient = new QueryClient()
     wrapper = ({ children }) => (
diff --git a/app/src/resources/instruments/__tests__/useAttachedPipettes.test.tsx b/app/src/resources/instruments/__tests__/useAttachedPipettes.test.tsx
index 35dbd023839..30f9922a1a7 100644
--- a/app/src/resources/instruments/__tests__/useAttachedPipettes.test.tsx
+++ b/app/src/resources/instruments/__tests__/useAttachedPipettes.test.tsx
@@ -8,7 +8,8 @@ import {
   pipetteResponseFixtureLeft,
   pipetteResponseFixtureRight,
 } from '@opentrons/api-client'
-import type * as React from 'react'
+
+import type { FunctionComponent, ReactNode } from 'react'
 import type { UseQueryResult } from 'react-query'
 import type { FetchPipettesResponseBody } from '@opentrons/api-client'
 import type { PipetteModelSpecs } from '@opentrons/shared-data'
@@ -17,7 +18,7 @@ vi.mock('@opentrons/react-api-client')
 vi.mock('@opentrons/shared-data')
 
 describe('useAttachedPipettes hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     vi.mocked(getPipetteModelSpecs).mockReturnValue({
       name: 'mockName',
diff --git a/app/src/resources/instruments/__tests__/useAttachedPipettesFromInstrumentsQuery.test.ts b/app/src/resources/instruments/__tests__/useAttachedPipettesFromInstrumentsQuery.test.ts
index a0ae4757582..cc2bdbdc081 100644
--- a/app/src/resources/instruments/__tests__/useAttachedPipettesFromInstrumentsQuery.test.ts
+++ b/app/src/resources/instruments/__tests__/useAttachedPipettesFromInstrumentsQuery.test.ts
@@ -7,7 +7,7 @@ import {
 } from '@opentrons/api-client'
 import { useIsOEMMode } from '/app/resources/robot-settings/hooks'
 import { useAttachedPipettesFromInstrumentsQuery } from '..'
-import type * as React from 'react'
+import type { FunctionComponent, ReactNode } from 'react'
 
 vi.mock('@opentrons/react-api-client')
 vi.mock('/app/resources/robot-settings/hooks')
@@ -17,7 +17,7 @@ describe('useAttachedPipettesFromInstrumentsQuery hook', () => {
     vi.mocked(useIsOEMMode).mockReturnValue(false)
   })
 
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   it('returns attached pipettes', () => {
     vi.mocked(useInstrumentsQuery).mockReturnValue({
       data: {
diff --git a/app/src/resources/modules/hooks/__tests__/useAttachedModules.test.tsx b/app/src/resources/modules/hooks/__tests__/useAttachedModules.test.tsx
index 49fba0eeaa0..6eec9e0996f 100644
--- a/app/src/resources/modules/hooks/__tests__/useAttachedModules.test.tsx
+++ b/app/src/resources/modules/hooks/__tests__/useAttachedModules.test.tsx
@@ -4,13 +4,14 @@ import { mockModulesResponse } from '@opentrons/api-client'
 import { useModulesQuery } from '@opentrons/react-api-client'
 import { useAttachedModules } from '..'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { UseQueryResult } from 'react-query'
 import type { Modules } from '@opentrons/api-client'
 
 vi.mock('@opentrons/react-api-client')
 
 describe('useAttachedModules hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
 
   it('returns attached modules', () => {
     vi.mocked(useModulesQuery).mockReturnValue({
diff --git a/app/src/resources/networking/hooks/__tests__/useCanDisconnect.test.tsx b/app/src/resources/networking/hooks/__tests__/useCanDisconnect.test.tsx
index 3985dc36ca8..d8788bf7ee1 100644
--- a/app/src/resources/networking/hooks/__tests__/useCanDisconnect.test.tsx
+++ b/app/src/resources/networking/hooks/__tests__/useCanDisconnect.test.tsx
@@ -1,18 +1,18 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { createStore } from 'redux'
 import { Provider } from 'react-redux'
-import { SECURITY_WPA_EAP } from '@opentrons/api-client'
 import { renderHook } from '@testing-library/react'
+import { SECURITY_WPA_EAP } from '@opentrons/api-client'
 import { getRobotApiVersionByName } from '/app/redux/discovery'
 
 import { useIsFlex } from '/app/redux-resources/robots'
 import { useCanDisconnect } from '../useCanDisconnect'
 import { useWifiList } from '../useWifiList'
 
-import type { WifiNetwork } from '@opentrons/api-client'
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
+import type { WifiNetwork } from '@opentrons/api-client'
 import type { State } from '/app/redux/types'
 
 vi.mock('../useWifiList')
@@ -21,9 +21,9 @@ vi.mock('/app/redux/discovery')
 
 const store: Store<State> = createStore(state => state, {})
 
-const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
-  children,
-}) => <Provider store={store}>{children}</Provider>
+const wrapper: FunctionComponent<{ children: ReactNode }> = ({ children }) => (
+  <Provider store={store}>{children}</Provider>
+)
 
 const mockWifiNetwork: WifiNetwork = {
   ssid: 'linksys',
diff --git a/app/src/resources/networking/hooks/__tests__/useNetworkConnection.test.tsx b/app/src/resources/networking/hooks/__tests__/useNetworkConnection.test.tsx
index 2c0e6257e42..9335c7eafea 100644
--- a/app/src/resources/networking/hooks/__tests__/useNetworkConnection.test.tsx
+++ b/app/src/resources/networking/hooks/__tests__/useNetworkConnection.test.tsx
@@ -1,5 +1,3 @@
-import type * as React from 'react'
-
 import { when } from 'vitest-when'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { Provider } from 'react-redux'
@@ -14,6 +12,8 @@ import * as Fixtures from '/app/redux/networking/__fixtures__'
 import { getNetworkInterfaces } from '/app/redux/networking'
 
 import { useNetworkConnection } from '../useNetworkConnection'
+
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 
 vi.mock('/app/redux/networking/selectors')
@@ -48,7 +48,7 @@ const store: Store<any> = createStore(vi.fn(), {})
 
 // ToDo (kj:0202/2023) USB test cases will be added when USB is out
 describe('useNetworkConnection', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
 
   beforeEach(() => {
     wrapper = ({ children }) => (
diff --git a/app/src/resources/protocols/hooks/__tests__/useProtocolMetadata.test.tsx b/app/src/resources/protocols/hooks/__tests__/useProtocolMetadata.test.tsx
index 48ced67d25f..bea57c80284 100644
--- a/app/src/resources/protocols/hooks/__tests__/useProtocolMetadata.test.tsx
+++ b/app/src/resources/protocols/hooks/__tests__/useProtocolMetadata.test.tsx
@@ -1,5 +1,4 @@
 // tests for the HostConfig context and hook
-import type * as React from 'react'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
 import { Provider } from 'react-redux'
@@ -8,6 +7,7 @@ import { renderHook } from '@testing-library/react'
 import { useCurrentProtocol } from '../useCurrentProtocol'
 import { useProtocolMetadata } from '../useProtocolMetadata'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { State } from '/app/redux/types'
 
@@ -39,7 +39,7 @@ describe('useProtocolMetadata', () => {
   })
 
   it('should return author, lastUpdated, method, description, and robot type', () => {
-    const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+    const wrapper: FunctionComponent<{ children: ReactNode }> = ({
       children,
     }) => <Provider store={store}>{children}</Provider>
     const { result } = renderHook(useProtocolMetadata, { wrapper })
diff --git a/app/src/resources/runs/__tests__/useCloneRun.test.tsx b/app/src/resources/runs/__tests__/useCloneRun.test.tsx
index 9323bbf8073..cf9de675f67 100644
--- a/app/src/resources/runs/__tests__/useCloneRun.test.tsx
+++ b/app/src/resources/runs/__tests__/useCloneRun.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { when } from 'vitest-when'
 import { renderHook } from '@testing-library/react'
 import { QueryClient, QueryClientProvider } from 'react-query'
@@ -13,6 +12,7 @@ import {
 import { useCloneRun } from '../useCloneRun'
 import { useNotifyRunQuery } from '../useNotifyRunQuery'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { HostConfig } from '@opentrons/api-client'
 
 vi.mock('@opentrons/react-api-client')
@@ -23,7 +23,7 @@ const RUN_ID_NO_RTP: string = 'run_id_no_rtp'
 const RUN_ID_RTP: string = 'run_id_rtp'
 
 describe('useCloneRun hook', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
 
   beforeEach(() => {
     when(vi.mocked(useHost)).calledWith().thenReturn(HOST_CONFIG)
@@ -90,8 +90,8 @@ describe('useCloneRun hook', () => {
     } as any)
 
     const queryClient = new QueryClient()
-    const clientProvider: React.FunctionComponent<{
-      children: React.ReactNode
+    const clientProvider: FunctionComponent<{
+      children: ReactNode
     }> = ({ children }) => (
       <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
     )
diff --git a/app/src/resources/runs/__tests__/useLPCDisabledReason.test.tsx b/app/src/resources/runs/__tests__/useLPCDisabledReason.test.tsx
index 0be19bc19d3..349804ac58b 100644
--- a/app/src/resources/runs/__tests__/useLPCDisabledReason.test.tsx
+++ b/app/src/resources/runs/__tests__/useLPCDisabledReason.test.tsx
@@ -1,13 +1,14 @@
-import type * as React from 'react'
 import { renderHook } from '@testing-library/react'
 import { Provider } from 'react-redux'
 import { I18nextProvider } from 'react-i18next'
 import { createStore } from 'redux'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
+
 import {
   getLoadedLabwareDefinitionsByUri,
   simple_v6 as _uncastedSimpleV6Protocol,
 } from '@opentrons/shared-data'
+
 import { i18n } from '/app/i18n'
 import { RUN_ID_1 } from '..//__fixtures__'
 import { useStoredProtocolAnalysis } from '/app/resources/analysis'
@@ -17,6 +18,7 @@ import { useRunCalibrationStatus } from '../useRunCalibrationStatus'
 import { useMostRecentCompletedAnalysis } from '../useMostRecentCompletedAnalysis'
 import { useRunHasStarted } from '../useRunHasStarted'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type * as SharedData from '@opentrons/shared-data'
 import type { State } from '/app/redux/types'
@@ -38,7 +40,7 @@ const simpleV6Protocol = (_uncastedSimpleV6Protocol as unknown) as SharedData.Pr
 
 describe('useLPCDisabledReason', () => {
   const store: Store<State> = createStore(vi.fn(), {})
-  const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({
+  const wrapper: FunctionComponent<{ children: ReactNode }> = ({
     children,
   }) => (
     <I18nextProvider i18n={i18n}>
diff --git a/app/src/resources/runs/__tests__/useModuleCalibrationStatus.test.tsx b/app/src/resources/runs/__tests__/useModuleCalibrationStatus.test.tsx
index 5691230dbaf..fef1217b173 100644
--- a/app/src/resources/runs/__tests__/useModuleCalibrationStatus.test.tsx
+++ b/app/src/resources/runs/__tests__/useModuleCalibrationStatus.test.tsx
@@ -1,4 +1,5 @@
-import type * as React from 'react'
+import { Provider } from 'react-redux'
+import { createStore } from 'redux'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { renderHook } from '@testing-library/react'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
@@ -10,15 +11,13 @@ import { useIsFlex } from '/app/redux-resources/robots'
 
 import { mockMagneticModuleGen2 } from '/app/redux/modules/__fixtures__'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { ModuleModel, ModuleType } from '@opentrons/shared-data'
 
-import { Provider } from 'react-redux'
-import { createStore } from 'redux'
-
 vi.mock('/app/redux-resources/robots')
 vi.mock('../useModuleRenderInfoForProtocolById')
 
-let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+let wrapper: FunctionComponent<{ children: ReactNode }>
 
 const mockMagneticModuleDefinition = {
   moduleId: 'someMagneticModule',
diff --git a/app/src/resources/runs/__tests__/useRunCalibrationStatus.test.tsx b/app/src/resources/runs/__tests__/useRunCalibrationStatus.test.tsx
index d0a81ff3e50..a93a3fe5d7a 100644
--- a/app/src/resources/runs/__tests__/useRunCalibrationStatus.test.tsx
+++ b/app/src/resources/runs/__tests__/useRunCalibrationStatus.test.tsx
@@ -1,10 +1,11 @@
-import type * as React from 'react'
+import { Provider } from 'react-redux'
+import { createStore } from 'redux'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { renderHook } from '@testing-library/react'
 import { vi, it, expect, describe, beforeEach } from 'vitest'
 import { when } from 'vitest-when'
-import { mockTipRackDefinition } from '/app/redux/custom-labware/__fixtures__'
 
+import { mockTipRackDefinition } from '/app/redux/custom-labware/__fixtures__'
 import {
   useRunCalibrationStatus,
   useRunPipetteInfoByMount,
@@ -13,9 +14,8 @@ import {
 import { useDeckCalibrationStatus } from '/app/resources/calibration'
 import { useIsFlex } from '/app/redux-resources/robots'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { PipetteInfo } from '/app/redux/pipettes'
-import { Provider } from 'react-redux'
-import { createStore } from 'redux'
 
 vi.mock('../useRunPipetteInfoByMount')
 vi.mock('../useNotifyRunQuery')
@@ -23,7 +23,7 @@ vi.mock('/app/resources/calibration')
 vi.mock('/app/resources/analysis')
 vi.mock('/app/redux-resources/robots')
 
-let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+let wrapper: FunctionComponent<{ children: ReactNode }>
 
 describe('useRunCalibrationStatus hook', () => {
   beforeEach(() => {
diff --git a/app/src/resources/runs/utils.ts b/app/src/resources/runs/utils.ts
index d9b6781f4b2..1ab7c205158 100644
--- a/app/src/resources/runs/utils.ts
+++ b/app/src/resources/runs/utils.ts
@@ -1,6 +1,6 @@
 import { format } from 'date-fns'
 
-import type * as React from 'react'
+import type { Dispatch, SetStateAction } from 'react'
 import type { UseMutateAsyncFunction } from 'react-query'
 import type { CommandData } from '@opentrons/api-client'
 import type { CreateCommand } from '@opentrons/shared-data'
@@ -11,7 +11,7 @@ export const chainRunCommandsRecursive = (
   commands: CreateCommand[],
   createRunCommand: CreateRunCommand,
   continuePastCommandFailure: boolean = true,
-  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>
+  setIsLoading: Dispatch<SetStateAction<boolean>>
 ): Promise<CommandData[]> => {
   if (commands.length < 1) {
     return Promise.reject(new Error('no commands to execute'))
@@ -57,7 +57,7 @@ export const chainLiveCommandsRecursive = (
     CreateLiveCommandMutateParams
   >,
   continuePastCommandFailure: boolean = true,
-  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>
+  setIsLoading: Dispatch<SetStateAction<boolean>>
 ): Promise<CommandData[]> => {
   if (commands.length < 1) {
     return Promise.reject(new Error('no commands to execute'))
@@ -100,7 +100,7 @@ export const chainMaintenanceCommandsRecursive = (
   commands: CreateCommand[],
   createMaintenanceCommand: CreateMaintenanceCommand,
   continuePastCommandFailure: boolean = true,
-  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>
+  setIsLoading: Dispatch<SetStateAction<boolean>>
 ): Promise<CommandData[]> => {
   if (commands.length < 1) {
     return Promise.reject(new Error('no commands to execute'))
diff --git a/app/src/transformations/commands/hooks/__tests__/useMissingProtocolHardware.test.tsx b/app/src/transformations/commands/hooks/__tests__/useMissingProtocolHardware.test.tsx
index 99ce33a9de3..54fd39d607f 100644
--- a/app/src/transformations/commands/hooks/__tests__/useMissingProtocolHardware.test.tsx
+++ b/app/src/transformations/commands/hooks/__tests__/useMissingProtocolHardware.test.tsx
@@ -1,8 +1,7 @@
 import omitBy from 'lodash/omitBy'
 import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest'
-import type { UseQueryResult } from 'react-query'
 import { renderHook } from '@testing-library/react'
-import type { Protocol } from '@opentrons/api-client'
+
 import {
   useProtocolQuery,
   useProtocolAnalysisAsDocumentQuery,
@@ -14,14 +13,19 @@ import {
   WASTE_CHUTE_RIGHT_ADAPTER_NO_COVER_FIXTURE,
   fixtureTiprack300ul,
 } from '@opentrons/shared-data'
+
+import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration/useNotifyDeckConfigurationQuery'
+import { useMissingProtocolHardware } from '../useMissingProtocolHardware'
+import { mockHeaterShaker } from '/app/redux/modules/__fixtures__'
+
+import type { FunctionComponent, ReactNode } from 'react'
+import type { UseQueryResult } from 'react-query'
+import type { Protocol } from '@opentrons/api-client'
 import type {
   CompletedProtocolAnalysis,
   DeckConfiguration,
   LabwareDefinition2,
 } from '@opentrons/shared-data'
-import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration/useNotifyDeckConfigurationQuery'
-import { useMissingProtocolHardware } from '../useMissingProtocolHardware'
-import { mockHeaterShaker } from '/app/redux/modules/__fixtures__'
 
 vi.mock('@opentrons/react-api-client')
 vi.mock('/app/resources/deck_configuration/useNotifyDeckConfigurationQuery')
@@ -161,7 +165,7 @@ const PROTOCOL_ANALYSIS = {
   runTimeParameters: mockRTPData,
 } as any
 describe.only('useMissingProtocolHardware', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   beforeEach(() => {
     vi.mocked(useInstrumentsQuery).mockReturnValue({
       data: { data: [] },
diff --git a/protocol-designer/src/__testing-utils__/renderWithProviders.tsx b/protocol-designer/src/__testing-utils__/renderWithProviders.tsx
index 11e3ba16d9b..4c3115281f5 100644
--- a/protocol-designer/src/__testing-utils__/renderWithProviders.tsx
+++ b/protocol-designer/src/__testing-utils__/renderWithProviders.tsx
@@ -1,6 +1,5 @@
 // render using targetted component using @testing-library/react
 // with wrapping providers for i18next and redux
-import type * as React from 'react'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { I18nextProvider } from 'react-i18next'
 import { Provider } from 'react-redux'
@@ -8,16 +7,22 @@ import { vi } from 'vitest'
 import { render } from '@testing-library/react'
 import { createStore } from 'redux'
 
+import type {
+  ComponentProps,
+  ComponentType,
+  PropsWithChildren,
+  ReactElement,
+} from 'react'
 import type { PreloadedState, Store } from 'redux'
 import type { RenderOptions, RenderResult } from '@testing-library/react'
 
 export interface RenderWithProvidersOptions<State> extends RenderOptions {
   initialState?: State
-  i18nInstance: React.ComponentProps<typeof I18nextProvider>['i18n']
+  i18nInstance: ComponentProps<typeof I18nextProvider>['i18n']
 }
 
 export function renderWithProviders<State>(
-  Component: React.ReactElement,
+  Component: ReactElement,
   options?: RenderWithProvidersOptions<State>
 ): [RenderResult, Store<State>] {
   // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@@ -32,7 +37,7 @@ export function renderWithProviders<State>(
 
   const queryClient = new QueryClient()
 
-  const ProviderWrapper: React.ComponentType<React.PropsWithChildren<{}>> = ({
+  const ProviderWrapper: ComponentType<PropsWithChildren<{}>> = ({
     children,
   }) => {
     const BaseWrapper = (
diff --git a/protocol-designer/src/atoms/ToggleButton/index.tsx b/protocol-designer/src/atoms/ToggleButton/index.tsx
index 0dfb605ec7b..732430b9d4e 100644
--- a/protocol-designer/src/atoms/ToggleButton/index.tsx
+++ b/protocol-designer/src/atoms/ToggleButton/index.tsx
@@ -1,8 +1,8 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 
 import { Btn, Icon, COLORS, Flex } from '@opentrons/components'
 
+import type { MouseEvent } from 'react'
 import type { StyleProps } from '@opentrons/components'
 
 const TOGGLE_DISABLED_STYLES = css`
@@ -42,7 +42,7 @@ interface ToggleButtonProps extends StyleProps {
   label?: string | null
   disabled?: boolean | null
   id?: string
-  onClick?: (e: React.MouseEvent) => void
+  onClick?: (e: MouseEvent) => void
 }
 
 export function ToggleButton(props: ToggleButtonProps): JSX.Element {
diff --git a/protocol-designer/src/labware-defs/actions.ts b/protocol-designer/src/labware-defs/actions.ts
index 20959a37b5d..5a6526d7956 100644
--- a/protocol-designer/src/labware-defs/actions.ts
+++ b/protocol-designer/src/labware-defs/actions.ts
@@ -11,6 +11,8 @@ import {
 } from '@opentrons/shared-data'
 import { getAllWellSetsForLabware } from '../utils'
 import * as labwareDefSelectors from './selectors'
+
+import type { SyntheticEvent } from 'react'
 import type { ThunkAction } from '../types'
 import type { LabwareUploadMessage } from './types'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
@@ -89,7 +91,7 @@ const getIsOverwriteMismatched = (
 const _createCustomLabwareDef: (
   onlyTiprack: boolean
 ) => (
-  event: React.SyntheticEvent<HTMLInputElement>
+  event: SyntheticEvent<HTMLInputElement>
 ) => ThunkAction<any> = onlyTiprack => event => (dispatch, getState) => {
   const customLabwareDefs = values(
     labwareDefSelectors.getCustomLabwareDefsByURI(getState())
@@ -242,11 +244,11 @@ const _createCustomLabwareDef: (
 }
 
 export const createCustomLabwareDef: (
-  event: React.SyntheticEvent<HTMLInputElement>
+  event: SyntheticEvent<HTMLInputElement>
 ) => ThunkAction<any> = _createCustomLabwareDef(false)
 
 export const createCustomTiprackDef: (
-  event: React.SyntheticEvent<HTMLInputElement>
+  event: SyntheticEvent<HTMLInputElement>
 ) => ThunkAction<any> = _createCustomLabwareDef(true)
 
 interface DismissLabwareUploadMessage {
diff --git a/protocol-designer/src/load-file/actions.ts b/protocol-designer/src/load-file/actions.ts
index a698696c525..a42a998edc2 100644
--- a/protocol-designer/src/load-file/actions.ts
+++ b/protocol-designer/src/load-file/actions.ts
@@ -1,6 +1,8 @@
 import { migration } from './migration'
 import { selectors as fileDataSelectors } from '../file-data'
 import { saveFile } from './utils'
+
+import type { SyntheticEvent } from 'react'
 import type { PDProtocolFile } from '../file-types'
 import type { GetState, ThunkAction, ThunkDispatch } from '../types'
 import type {
@@ -32,7 +34,7 @@ export const loadFileAction = (payload: PDProtocolFile): LoadFileAction => ({
 })
 // load file thunk, handles file loading errors
 export const loadProtocolFile = (
-  event: React.SyntheticEvent<HTMLInputElement>
+  event: SyntheticEvent<HTMLInputElement>
 ): ThunkAction<any> => (dispatch: ThunkDispatch<any>, getState: GetState) => {
   const fileError = (
     errorType: FileUploadErrorType,
diff --git a/protocol-designer/src/molecules/CheckboxExpandStepFormField/index.tsx b/protocol-designer/src/molecules/CheckboxExpandStepFormField/index.tsx
index 5c4d749d228..7b58de44ae0 100644
--- a/protocol-designer/src/molecules/CheckboxExpandStepFormField/index.tsx
+++ b/protocol-designer/src/molecules/CheckboxExpandStepFormField/index.tsx
@@ -13,12 +13,14 @@ import {
   useHoverTooltip,
 } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
+
 interface CheckboxExpandStepFormFieldProps {
   title: string
   checkboxUpdateValue: (value: unknown) => void
   checkboxValue: unknown
   isChecked: boolean
-  children?: React.ReactNode
+  children?: ReactNode
   tooltipText?: string | null
   disabled?: boolean
 }
diff --git a/protocol-designer/src/molecules/CheckboxStepFormField/index.tsx b/protocol-designer/src/molecules/CheckboxStepFormField/index.tsx
index bb6d1748418..3ee5c057b7e 100644
--- a/protocol-designer/src/molecules/CheckboxStepFormField/index.tsx
+++ b/protocol-designer/src/molecules/CheckboxStepFormField/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import {
   Checkbox,
   Flex,
@@ -7,13 +6,15 @@ import {
   Tooltip,
   useHoverTooltip,
 } from '@opentrons/components'
+
+import type { ReactElement, ReactNode } from 'react'
 import type { Placement } from '@opentrons/components'
 import type { FieldProps } from '../../pages/Designer/ProtocolSteps/StepForm/types'
 
 type CheckboxStepFormFieldProps = FieldProps & {
-  children?: React.ReactElement
+  children?: ReactElement
   label?: string
-  tooltipContent?: React.ReactNode
+  tooltipContent?: ReactNode
   tooltipPlacement?: Placement
 }
 
diff --git a/protocol-designer/src/organisms/Alerts/__tests__/FormAlerts.test.tsx b/protocol-designer/src/organisms/Alerts/__tests__/FormAlerts.test.tsx
index 14110951a76..da88e015f64 100644
--- a/protocol-designer/src/organisms/Alerts/__tests__/FormAlerts.test.tsx
+++ b/protocol-designer/src/organisms/Alerts/__tests__/FormAlerts.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -18,20 +17,22 @@ import {
   dismissTimelineWarning,
 } from '../../../dismiss/actions'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../../../dismiss/actions')
 vi.mock('../../../ui/steps')
 vi.mock('../../../top-selectors/timelineWarnings')
 vi.mock('../../../dismiss/selectors')
 vi.mock('../../../step-forms/selectors')
 
-const render = (props: React.ComponentProps<typeof FormAlerts>) => {
+const render = (props: ComponentProps<typeof FormAlerts>) => {
   return renderWithProviders(<FormAlerts {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('FormAlerts', () => {
-  let props: React.ComponentProps<typeof FormAlerts>
+  let props: ComponentProps<typeof FormAlerts>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/organisms/Alerts/types.ts b/protocol-designer/src/organisms/Alerts/types.ts
index 0453688d667..c3396ad79d0 100644
--- a/protocol-designer/src/organisms/Alerts/types.ts
+++ b/protocol-designer/src/organisms/Alerts/types.ts
@@ -1,9 +1,11 @@
+import type { ReactNode } from 'react'
+
 export type AlertLevel = 'timeline' | 'form'
 type AlertType = 'error' | 'warning'
 
 interface AlertData {
   title: string
-  description: React.ReactNode
+  description: ReactNode
   dismissId?: string
 }
 
diff --git a/protocol-designer/src/organisms/AssignLiquidsModal/LiquidToolbox.tsx b/protocol-designer/src/organisms/AssignLiquidsModal/LiquidToolbox.tsx
index 269d78d5c05..841923adfec 100644
--- a/protocol-designer/src/organisms/AssignLiquidsModal/LiquidToolbox.tsx
+++ b/protocol-designer/src/organisms/AssignLiquidsModal/LiquidToolbox.tsx
@@ -32,6 +32,8 @@ import {
 import { deselectAllWells } from '../../well-selection/actions'
 import { DefineLiquidsModal } from '../DefineLiquidsModal'
 import { LiquidCard } from './LiquidCard'
+
+import type { ChangeEvent } from 'react'
 import type { DropdownOption } from '@opentrons/components'
 import type { ContentsByWell } from '../../labware-ingred/types'
 
@@ -131,9 +133,7 @@ export function LiquidToolbox(props: LiquidToolboxProps): JSX.Element {
     }
   }
 
-  const handleChangeVolume: (
-    e: React.ChangeEvent<HTMLInputElement>
-  ) => void = e => {
+  const handleChangeVolume: (e: ChangeEvent<HTMLInputElement>) => void = e => {
     const value: string | null | undefined = e.currentTarget.value
     const masked = fieldProcessors.composeMaskers(
       fieldProcessors.maskToFloat,
diff --git a/protocol-designer/src/organisms/BlockingHintModal/useBlockingHint.tsx b/protocol-designer/src/organisms/BlockingHintModal/useBlockingHint.tsx
index 1f9548fc99b..e47341eaf46 100644
--- a/protocol-designer/src/organisms/BlockingHintModal/useBlockingHint.tsx
+++ b/protocol-designer/src/organisms/BlockingHintModal/useBlockingHint.tsx
@@ -1,6 +1,8 @@
 import { useSelector } from 'react-redux'
 import { getDismissedHints } from '../../tutorial/selectors'
 import { BlockingHintModal } from './index'
+
+import type { ReactNode } from 'react'
 import type { HintKey } from '../../tutorial'
 
 export interface HintProps {
@@ -9,7 +11,7 @@ export interface HintProps {
    * useBlockingHint expects the parent to disable the hint on cancel/continue */
   enabled: boolean
   hintKey: HintKey | null
-  content: React.ReactNode
+  content: ReactNode
   handleCancel: () => void
   handleContinue: () => void
 }
diff --git a/protocol-designer/src/organisms/ConfirmDeleteModal/index.tsx b/protocol-designer/src/organisms/ConfirmDeleteModal/index.tsx
index 89de28330b6..70a767706a7 100644
--- a/protocol-designer/src/organisms/ConfirmDeleteModal/index.tsx
+++ b/protocol-designer/src/organisms/ConfirmDeleteModal/index.tsx
@@ -12,7 +12,7 @@ import {
   StyledText,
 } from '@opentrons/components'
 import { getMainPagePortalEl } from '../Portal'
-import type * as React from 'react'
+import type { MouseEvent } from 'react'
 
 export const DELETE_PROFILE_CYCLE: 'deleteProfileCycle' = 'deleteProfileCycle'
 export const CLOSE_STEP_FORM_WITH_CHANGES: 'closeStepFormWithChanges' =
@@ -36,7 +36,7 @@ interface Props {
   modalType: DeleteModalType
   onCancelClick: () => unknown
   // TODO(sa, 2021-7-2): iron out this type, I think the weirdness comes from the return type of onConditionalConfirm
-  onContinueClick: ((event: React.MouseEvent) => unknown) | (() => unknown)
+  onContinueClick: ((event: MouseEvent) => unknown) | (() => unknown)
 }
 
 export function ConfirmDeleteModal(props: Props): JSX.Element {
diff --git a/protocol-designer/src/organisms/EditNickNameModal/__tests__/EditNickNameModal.test.tsx b/protocol-designer/src/organisms/EditNickNameModal/__tests__/EditNickNameModal.test.tsx
index 27b8f43b73c..aba82c9bf2c 100644
--- a/protocol-designer/src/organisms/EditNickNameModal/__tests__/EditNickNameModal.test.tsx
+++ b/protocol-designer/src/organisms/EditNickNameModal/__tests__/EditNickNameModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import { i18n } from '../../../assets/localization'
@@ -7,17 +6,19 @@ import { EditNickNameModal } from '..'
 import { getLabwareNicknamesById } from '../../../ui/labware/selectors'
 import { renameLabware } from '../../../labware-ingred/actions'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../../../ui/labware/selectors')
 vi.mock('../../../labware-ingred/actions')
 
-const render = (props: React.ComponentProps<typeof EditNickNameModal>) => {
+const render = (props: ComponentProps<typeof EditNickNameModal>) => {
   return renderWithProviders(<EditNickNameModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('EditNickNameModal', () => {
-  let props: React.ComponentProps<typeof EditNickNameModal>
+  let props: ComponentProps<typeof EditNickNameModal>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/organisms/EditProtocolMetadataModal/__tests__/EditProtocolMetadataModal.test.tsx b/protocol-designer/src/organisms/EditProtocolMetadataModal/__tests__/EditProtocolMetadataModal.test.tsx
index 3d4b8aace51..6eee963d099 100644
--- a/protocol-designer/src/organisms/EditProtocolMetadataModal/__tests__/EditProtocolMetadataModal.test.tsx
+++ b/protocol-designer/src/organisms/EditProtocolMetadataModal/__tests__/EditProtocolMetadataModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -7,18 +6,18 @@ import { renderWithProviders } from '../../../__testing-utils__'
 import { EditProtocolMetadataModal } from '..'
 import { selectors as fileSelectors } from '../../../file-data'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../../../file-data')
 
-const render = (
-  props: React.ComponentProps<typeof EditProtocolMetadataModal>
-) => {
+const render = (props: ComponentProps<typeof EditProtocolMetadataModal>) => {
   return renderWithProviders(<EditProtocolMetadataModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('EditProtocolMetadataModal', () => {
-  let props: React.ComponentProps<typeof EditProtocolMetadataModal>
+  let props: ComponentProps<typeof EditProtocolMetadataModal>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/organisms/FileUploadMessagesModal/utils.tsx b/protocol-designer/src/organisms/FileUploadMessagesModal/utils.tsx
index 8b10662278f..72f0f9fa2c2 100644
--- a/protocol-designer/src/organisms/FileUploadMessagesModal/utils.tsx
+++ b/protocol-designer/src/organisms/FileUploadMessagesModal/utils.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import {
   COLORS,
@@ -8,11 +7,12 @@ import {
   StyledText,
 } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
 import type { FileUploadMessage } from '../../load-file'
 
 export interface ModalContents {
   title: string
-  body: React.ReactNode
+  body: ReactNode
 }
 
 interface ModalProps {
diff --git a/protocol-designer/src/organisms/IncompatibleTipsModal/__tests__/IncompatibleTipsModal.test.tsx b/protocol-designer/src/organisms/IncompatibleTipsModal/__tests__/IncompatibleTipsModal.test.tsx
index 2a1a8cf7e4e..7cb887d706e 100644
--- a/protocol-designer/src/organisms/IncompatibleTipsModal/__tests__/IncompatibleTipsModal.test.tsx
+++ b/protocol-designer/src/organisms/IncompatibleTipsModal/__tests__/IncompatibleTipsModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import { i18n } from '../../../assets/localization'
@@ -6,16 +5,18 @@ import { renderWithProviders } from '../../../__testing-utils__'
 import { setFeatureFlags } from '../../../feature-flags/actions'
 import { IncompatibleTipsModal } from '..'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../../../feature-flags/actions')
 
-const render = (props: React.ComponentProps<typeof IncompatibleTipsModal>) => {
+const render = (props: ComponentProps<typeof IncompatibleTipsModal>) => {
   return renderWithProviders(<IncompatibleTipsModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('IncompatibleTipsModal', () => {
-  let props: React.ComponentProps<typeof IncompatibleTipsModal>
+  let props: ComponentProps<typeof IncompatibleTipsModal>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/organisms/Labware/SelectableLabware.tsx b/protocol-designer/src/organisms/Labware/SelectableLabware.tsx
index 25c904d7407..27c77f7e7cb 100644
--- a/protocol-designer/src/organisms/Labware/SelectableLabware.tsx
+++ b/protocol-designer/src/organisms/Labware/SelectableLabware.tsx
@@ -12,7 +12,7 @@ import { SingleLabware } from './SingleLabware'
 import { WellTooltip } from './WellTooltip'
 import { SelectionRect } from './SelectionRect'
 
-import type * as React from 'react'
+import type { ComponentProps } from 'react'
 import type {
   WellMouseEvent,
   WellGroup,
@@ -25,10 +25,7 @@ import type { GenericRect } from '../../collision-types'
 import type { NozzleType } from '../../types'
 
 export interface SelectableLabwareProps {
-  labwareProps: Omit<
-    React.ComponentProps<typeof SingleLabware>,
-    'selectedWells'
-  >
+  labwareProps: Omit<ComponentProps<typeof SingleLabware>, 'selectedWells'>
   /** array of primary wells. Overrides labwareProps.selectedWells */
   selectedPrimaryWells: WellGroup
   selectWells: (wellGroup: WellGroup) => unknown
diff --git a/protocol-designer/src/organisms/Labware/SelectionRect.tsx b/protocol-designer/src/organisms/Labware/SelectionRect.tsx
index 73c7229c39e..97e834fdded 100644
--- a/protocol-designer/src/organisms/Labware/SelectionRect.tsx
+++ b/protocol-designer/src/organisms/Labware/SelectionRect.tsx
@@ -1,12 +1,14 @@
-import * as React from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { css } from 'styled-components'
+
+import type { ReactNode, MouseEventHandler } from 'react'
 import type { DragRect, GenericRect } from '../../collision-types'
 
 interface SelectionRectProps {
   onSelectionMove?: (e: MouseEvent, arg: GenericRect) => void
   onSelectionDone?: (e: MouseEvent, arg: GenericRect) => void
   svg?: boolean // set true if this is an embedded SVG
-  children?: React.ReactNode
+  children?: ReactNode
   originXOffset?: number
   originYOffset?: number
 }
@@ -20,9 +22,9 @@ export function SelectionRect(props: SelectionRectProps): JSX.Element {
     originXOffset = 0,
     originYOffset = 0,
   } = props
-  const [positions, setPositions] = React.useState<DragRect | null>(null)
-  const parentRef = React.useRef<HTMLElement | SVGElement | null>(null)
-  const renderRect = (args: DragRect): React.ReactNode => {
+  const [positions, setPositions] = useState<DragRect | null>(null)
+  const parentRef = useRef<HTMLElement | SVGElement | null>(null)
+  const renderRect = (args: DragRect): ReactNode => {
     const { xStart, yStart, xDynamic, yDynamic } = args
     const left = Math.min(xStart, xDynamic)
     const top = Math.min(yStart, yDynamic)
@@ -117,7 +119,7 @@ export function SelectionRect(props: SelectionRectProps): JSX.Element {
     onSelectionDone && finalRect && onSelectionDone(e, finalRect)
   }
 
-  const handleMouseDown: React.MouseEventHandler = e => {
+  const handleMouseDown: MouseEventHandler = e => {
     setPositions({
       xStart: e.clientX,
       xDynamic: e.clientX,
@@ -126,7 +128,7 @@ export function SelectionRect(props: SelectionRectProps): JSX.Element {
     })
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     document.addEventListener('mousemove', handleDrag)
     document.addEventListener('mouseup', handleMouseUp)
     return () => {
diff --git a/protocol-designer/src/organisms/Labware/SingleLabware.tsx b/protocol-designer/src/organisms/Labware/SingleLabware.tsx
index 1952fea3fc8..a0f7e5c4774 100644
--- a/protocol-designer/src/organisms/Labware/SingleLabware.tsx
+++ b/protocol-designer/src/organisms/Labware/SingleLabware.tsx
@@ -1,7 +1,7 @@
 import { LabwareRender, RobotWorkSpace } from '@opentrons/components'
-import type * as React from 'react'
+import type { ComponentProps } from 'react'
 
-type Props = React.ComponentProps<typeof LabwareRender>
+type Props = ComponentProps<typeof LabwareRender>
 
 /** Avoid boilerplate for viewbox-based-on-labware-dimensions */
 export function SingleLabware(props: Props): JSX.Element {
diff --git a/protocol-designer/src/organisms/Labware/WellTooltip.tsx b/protocol-designer/src/organisms/Labware/WellTooltip.tsx
index 51e9236427e..0479aaf58fc 100644
--- a/protocol-designer/src/organisms/Labware/WellTooltip.tsx
+++ b/protocol-designer/src/organisms/Labware/WellTooltip.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { Fragment, useState } from 'react'
 import { useSelector } from 'react-redux'
 import map from 'lodash/map'
 import reduce from 'lodash/reduce'
@@ -9,6 +9,8 @@ import { getMainPagePortalEl } from '../../organisms'
 import { selectors } from '../../labware-ingred/selectors'
 import { formatVolume } from '../../pages/Designer/ProtocolSteps/Timeline/utils'
 import { swatchColors } from '../DefineLiquidsModal/swatchColors'
+
+import type { MouseEvent, ReactNode } from 'react'
 import type { LocationLiquidState } from '@opentrons/step-generation'
 import type { WellIngredientNames } from '../../steplist/types'
 
@@ -19,13 +21,13 @@ interface WellTooltipParams {
   makeHandleMouseEnterWell: (
     wellName: string,
     wellIngreds: LocationLiquidState
-  ) => (e: React.MouseEvent<any>) => void
+  ) => (e: MouseEvent<any>) => void
   handleMouseLeaveWell: (val: unknown) => void
   tooltipWellName?: string | null
 }
 
 interface WellTooltipProps {
-  children: (wellTooltipParams: WellTooltipParams) => React.ReactNode
+  children: (wellTooltipParams: WellTooltipParams) => ReactNode
   ingredNames: WellIngredientNames
 }
 
@@ -46,14 +48,12 @@ const initialTooltipState: State = {
 
 export const WellTooltip = (props: WellTooltipProps): JSX.Element => {
   const { children } = props
-  const [tooltipState, setTooltipState] = React.useState<State>(
-    initialTooltipState
-  )
+  const [tooltipState, setTooltipState] = useState<State>(initialTooltipState)
 
   const makeHandleMouseEnterWell: (
     wellName: string,
     wellIngreds: LocationLiquidState
-  ) => (e: React.MouseEvent) => void = (wellName, wellIngreds) => e => {
+  ) => (e: MouseEvent) => void = (wellName, wellIngreds) => e => {
     const { target } = e
     if (target instanceof Element) {
       const wellBoundingRect = target.getBoundingClientRect()
@@ -211,7 +211,7 @@ export const WellTooltip = (props: WellTooltipProps): JSX.Element => {
                       </tbody>
                     </table>
                     {hasMultipleIngreds && (
-                      <React.Fragment>
+                      <Fragment>
                         <div
                           css={css`
                             height: 1px;
@@ -229,7 +229,7 @@ export const WellTooltip = (props: WellTooltipProps): JSX.Element => {
                           <span>{`${tooltipWellName} Total Volume`}</span>
                           <span>{formatVolume(totalLiquidVolume, 2)}µl</span>
                         </div>
-                      </React.Fragment>
+                      </Fragment>
                     )}
                   </div>
                   <div
diff --git a/protocol-designer/src/organisms/MaterialsListModal/__tests__/MaterialsListModal.test.tsx b/protocol-designer/src/organisms/MaterialsListModal/__tests__/MaterialsListModal.test.tsx
index 26e2d0fb098..7ed8ecc9e33 100644
--- a/protocol-designer/src/organisms/MaterialsListModal/__tests__/MaterialsListModal.test.tsx
+++ b/protocol-designer/src/organisms/MaterialsListModal/__tests__/MaterialsListModal.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -11,6 +10,7 @@ import { getRobotType } from '../../../file-data/selectors'
 import { getInitialDeckSetup } from '../../../step-forms/selectors'
 import { MaterialsListModal } from '..'
 
+import type { ComponentProps } from 'react'
 import type { InfoScreen } from '@opentrons/components'
 import type { LabwareOnDeck, ModuleOnDeck } from '../../../step-forms'
 import type { FixtureInList } from '..'
@@ -63,14 +63,14 @@ const mockLabware = [
   },
 ] as LabwareOnDeck[]
 
-const render = (props: React.ComponentProps<typeof MaterialsListModal>) => {
+const render = (props: ComponentProps<typeof MaterialsListModal>) => {
   return renderWithProviders(<MaterialsListModal {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('MaterialsListModal', () => {
-  let props: React.ComponentProps<typeof MaterialsListModal>
+  let props: ComponentProps<typeof MaterialsListModal>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/organisms/Navigation/index.tsx b/protocol-designer/src/organisms/Navigation/index.tsx
index 0f5b423ddc6..f1487fc6af1 100644
--- a/protocol-designer/src/organisms/Navigation/index.tsx
+++ b/protocol-designer/src/organisms/Navigation/index.tsx
@@ -18,6 +18,8 @@ import { actions as loadFileActions } from '../../load-file'
 import { LINK_BUTTON_STYLE } from '../../atoms'
 import { getHasUnsavedChanges } from '../../load-file/selectors'
 import { SettingsIcon } from '../SettingsIcon'
+
+import type { ChangeEvent } from 'react'
 import type { ThunkDispatch } from '../../types'
 
 export function Navigation(): JSX.Element | null {
@@ -25,9 +27,7 @@ export function Navigation(): JSX.Element | null {
   const location = useLocation()
   const navigate = useNavigate()
   const dispatch: ThunkDispatch<any> = useDispatch()
-  const loadFile = (
-    fileChangeEvent: React.ChangeEvent<HTMLInputElement>
-  ): void => {
+  const loadFile = (fileChangeEvent: ChangeEvent<HTMLInputElement>): void => {
     dispatch(loadFileActions.loadProtocolFile(fileChangeEvent))
     dispatch(toggleNewProtocolModal(false))
   }
diff --git a/protocol-designer/src/organisms/PipetteInfoItem/__tests__/PipetteInfoItem.test.tsx b/protocol-designer/src/organisms/PipetteInfoItem/__tests__/PipetteInfoItem.test.tsx
index ae60f21c4fb..50c05f24fb4 100644
--- a/protocol-designer/src/organisms/PipetteInfoItem/__tests__/PipetteInfoItem.test.tsx
+++ b/protocol-designer/src/organisms/PipetteInfoItem/__tests__/PipetteInfoItem.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -7,16 +6,18 @@ import { renderWithProviders } from '../../../__testing-utils__'
 import { getLabwareDefsByURI } from '../../../labware-defs/selectors'
 import { PipetteInfoItem } from '..'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../../../labware-defs/selectors')
 
-const render = (props: React.ComponentProps<typeof PipetteInfoItem>) => {
+const render = (props: ComponentProps<typeof PipetteInfoItem>) => {
   return renderWithProviders(<PipetteInfoItem {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('PipetteInfoItem', () => {
-  let props: React.ComponentProps<typeof PipetteInfoItem>
+  let props: ComponentProps<typeof PipetteInfoItem>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/organisms/RenameStepModal/__tests__/RenameStepModal.test.tsx b/protocol-designer/src/organisms/RenameStepModal/__tests__/RenameStepModal.test.tsx
index 3bdc35028ae..e9ac1e790d4 100644
--- a/protocol-designer/src/organisms/RenameStepModal/__tests__/RenameStepModal.test.tsx
+++ b/protocol-designer/src/organisms/RenameStepModal/__tests__/RenameStepModal.test.tsx
@@ -6,16 +6,18 @@ import { PAUSE_UNTIL_RESUME } from '../../../constants'
 import { renameStep } from '../../../labware-ingred/actions'
 import { RenameStepModal } from '..'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../../../labware-ingred/actions')
 
-const render = (props: React.ComponentProps<typeof RenameStepModal>) => {
+const render = (props: ComponentProps<typeof RenameStepModal>) => {
   return renderWithProviders(<RenameStepModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('EditNickNameModal', () => {
-  let props: React.ComponentProps<typeof RenameStepModal>
+  let props: ComponentProps<typeof RenameStepModal>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/organisms/SelectWellsModal/__tests__/SelectWellsModal.test.tsx b/protocol-designer/src/organisms/SelectWellsModal/__tests__/SelectWellsModal.test.tsx
index fa1614e240d..104022625c4 100644
--- a/protocol-designer/src/organisms/SelectWellsModal/__tests__/SelectWellsModal.test.tsx
+++ b/protocol-designer/src/organisms/SelectWellsModal/__tests__/SelectWellsModal.test.tsx
@@ -14,6 +14,8 @@ import {
 } from '../../../step-forms/selectors'
 import { SelectableLabware } from '../../Labware/SelectableLabware'
 import { SelectWellsModal } from '..'
+
+import type { ComponentProps } from 'react'
 import type { LabwareDefinition2, PipetteName } from '@opentrons/shared-data'
 
 vi.mock('../../../step-forms/selectors')
@@ -21,7 +23,7 @@ vi.mock('../../../labware-ingred/selectors')
 vi.mock('../../../top-selectors/well-contents')
 vi.mock('../../Labware/SelectableLabware')
 
-const render = (props: React.ComponentProps<typeof SelectWellsModal>) => {
+const render = (props: ComponentProps<typeof SelectWellsModal>) => {
   return renderWithProviders(<SelectWellsModal {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -30,7 +32,7 @@ const render = (props: React.ComponentProps<typeof SelectWellsModal>) => {
 const labwareId = 'mockId'
 const pipId = 'mockPipId'
 describe('SelectWellsModal', () => {
-  let props: React.ComponentProps<typeof SelectWellsModal>
+  let props: ComponentProps<typeof SelectWellsModal>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/organisms/SlotInformation/__tests__/SlotInformation.test.tsx b/protocol-designer/src/organisms/SlotInformation/__tests__/SlotInformation.test.tsx
index 784590aeb20..c72b55e3b54 100644
--- a/protocol-designer/src/organisms/SlotInformation/__tests__/SlotInformation.test.tsx
+++ b/protocol-designer/src/organisms/SlotInformation/__tests__/SlotInformation.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, expect, vi } from 'vitest'
 import { screen } from '@testing-library/react'
 import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
@@ -7,6 +6,7 @@ import { i18n } from '../../../assets/localization'
 
 import { SlotInformation } from '..'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 const mockLiquids = ['Mastermix', 'Ethanol', 'Water']
@@ -24,14 +24,14 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof SlotInformation>) => {
+const render = (props: ComponentProps<typeof SlotInformation>) => {
   return renderWithProviders(<SlotInformation {...props} />, {
     i18nInstance: i18n,
   })
 }
 
 describe('SlotInformation', () => {
-  let props: React.ComponentProps<typeof SlotInformation>
+  let props: ComponentProps<typeof SlotInformation>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/organisms/TipPositionModal/ZTipPositionModal.tsx b/protocol-designer/src/organisms/TipPositionModal/ZTipPositionModal.tsx
index 81fb4ab3c2d..6453824b4d4 100644
--- a/protocol-designer/src/organisms/TipPositionModal/ZTipPositionModal.tsx
+++ b/protocol-designer/src/organisms/TipPositionModal/ZTipPositionModal.tsx
@@ -23,6 +23,7 @@ import * as utils from './utils'
 import { TOO_MANY_DECIMALS } from './constants'
 import { TipPositionZOnlyView } from './TipPositionZOnlyView'
 
+import type { ChangeEvent } from 'react'
 import type { StepFieldName } from '../../form-types'
 
 interface ZTipPositionModalProps {
@@ -131,9 +132,7 @@ export function ZTipPositionModal(props: ZTipPositionModalProps): JSX.Element {
     }
   }
 
-  const handleInputFieldChange = (
-    e: React.ChangeEvent<HTMLInputElement>
-  ): void => {
+  const handleInputFieldChange = (e: ChangeEvent<HTMLInputElement>): void => {
     handleChange(e.currentTarget.value)
     setPristine(false)
   }
diff --git a/protocol-designer/src/organisms/TipPositionModal/__tests__/TipPositionModal.test.tsx b/protocol-designer/src/organisms/TipPositionModal/__tests__/TipPositionModal.test.tsx
index 7a3c871d709..7c1e1da85bb 100644
--- a/protocol-designer/src/organisms/TipPositionModal/__tests__/TipPositionModal.test.tsx
+++ b/protocol-designer/src/organisms/TipPositionModal/__tests__/TipPositionModal.test.tsx
@@ -5,10 +5,10 @@ import { i18n } from '../../../assets/localization'
 import { TipPositionSideView } from '../TipPositionSideView'
 import { TipPositionModal } from '..'
 
-import type * as React from 'react'
+import type { ComponentProps } from 'react'
 
 vi.mock('../TipPositionSideView')
-const render = (props: React.ComponentProps<typeof TipPositionModal>) => {
+const render = (props: ComponentProps<typeof TipPositionModal>) => {
   return renderWithProviders(<TipPositionModal {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -19,7 +19,7 @@ const mockUpdateXSpec = vi.fn()
 const mockUpdateYSpec = vi.fn()
 
 describe('TipPositionModal', () => {
-  let props: React.ComponentProps<typeof TipPositionModal>
+  let props: ComponentProps<typeof TipPositionModal>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/organisms/TipPositionModal/__tests__/ZTipPositionModal.test.tsx b/protocol-designer/src/organisms/TipPositionModal/__tests__/ZTipPositionModal.test.tsx
index 20e148af0de..31e4a4bf86e 100644
--- a/protocol-designer/src/organisms/TipPositionModal/__tests__/ZTipPositionModal.test.tsx
+++ b/protocol-designer/src/organisms/TipPositionModal/__tests__/ZTipPositionModal.test.tsx
@@ -4,17 +4,18 @@ import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../assets/localization'
 import { ZTipPositionModal } from '../ZTipPositionModal'
 import { TipPositionZOnlyView } from '../TipPositionZOnlyView'
-import type * as React from 'react'
+
+import type { ComponentProps } from 'react'
 
 vi.mock('../TipPositionZOnlyView')
-const render = (props: React.ComponentProps<typeof ZTipPositionModal>) => {
+const render = (props: ComponentProps<typeof ZTipPositionModal>) => {
   return renderWithProviders(<ZTipPositionModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('ZTipPositionModal', () => {
-  let props: React.ComponentProps<typeof ZTipPositionModal>
+  let props: ComponentProps<typeof ZTipPositionModal>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/organisms/TipPositionModal/index.tsx b/protocol-designer/src/organisms/TipPositionModal/index.tsx
index cb06f4c2fc8..e3e01447bf0 100644
--- a/protocol-designer/src/organisms/TipPositionModal/index.tsx
+++ b/protocol-designer/src/organisms/TipPositionModal/index.tsx
@@ -25,6 +25,7 @@ import * as utils from './utils'
 import { TipPositionTopView } from './TipPositionTopView'
 import { TipPositionSideView } from './TipPositionSideView'
 
+import type { ChangeEvent } from 'react'
 import type { StepFieldName } from '../../form-types'
 
 type Offset = 'x' | 'y' | 'z'
@@ -179,9 +180,7 @@ export function TipPositionModal(
     }
   }
 
-  const handleZInputFieldChange = (
-    e: React.ChangeEvent<HTMLInputElement>
-  ): void => {
+  const handleZInputFieldChange = (e: ChangeEvent<HTMLInputElement>): void => {
     handleZChange(e.currentTarget.value)
     setPristine(false)
   }
@@ -200,9 +199,7 @@ export function TipPositionModal(
     }
   }
 
-  const handleXInputFieldChange = (
-    e: React.ChangeEvent<HTMLInputElement>
-  ): void => {
+  const handleXInputFieldChange = (e: ChangeEvent<HTMLInputElement>): void => {
     handleXChange(e.currentTarget.value)
     setPristine(false)
   }
@@ -221,9 +218,7 @@ export function TipPositionModal(
     }
   }
 
-  const handleYInputFieldChange = (
-    e: React.ChangeEvent<HTMLInputElement>
-  ): void => {
+  const handleYInputFieldChange = (e: ChangeEvent<HTMLInputElement>): void => {
     handleYChange(e.currentTarget.value)
     setPristine(false)
   }
diff --git a/protocol-designer/src/organisms/WellOrderModal/__tests__/WellOrderModal.test.tsx b/protocol-designer/src/organisms/WellOrderModal/__tests__/WellOrderModal.test.tsx
index 798bd8abc89..7afd6d1c139 100644
--- a/protocol-designer/src/organisms/WellOrderModal/__tests__/WellOrderModal.test.tsx
+++ b/protocol-designer/src/organisms/WellOrderModal/__tests__/WellOrderModal.test.tsx
@@ -4,14 +4,16 @@ import { i18n } from '../../../assets/localization'
 import { renderWithProviders } from '../../../__testing-utils__'
 import { WellOrderModal } from '..'
 
-const render = (props: React.ComponentProps<typeof WellOrderModal>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof WellOrderModal>) => {
   return renderWithProviders(<WellOrderModal {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('WellOrderModal', () => {
-  let props: React.ComponentProps<typeof WellOrderModal>
+  let props: ComponentProps<typeof WellOrderModal>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx
index 54a629120a9..ba3f0648672 100644
--- a/protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx
+++ b/protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx
@@ -26,13 +26,15 @@ import four from '../../assets/images/onboarding_animation_4.webm'
 import five from '../../assets/images/onboarding_animation_5.webm'
 import six from '../../assets/images/onboarding_animation_6.webm'
 import { LINK_BUTTON_STYLE } from '../../atoms'
+
+import type { ReactNode } from 'react'
 import type { RobotType } from '@opentrons/shared-data'
 
 interface WizardBodyProps {
   robotType: RobotType
   stepNumber: number
   header: string
-  children: React.ReactNode
+  children: ReactNode
   proceed: () => void
   disabled?: boolean
   goBack?: () => void
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/AddMetadata.test.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/AddMetadata.test.tsx
index 63bced829a2..2c2731ca9c5 100644
--- a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/AddMetadata.test.tsx
+++ b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/AddMetadata.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
@@ -7,9 +6,10 @@ import { i18n } from '../../../assets/localization'
 import { renderWithProviders } from '../../../__testing-utils__'
 import { AddMetadata } from '../AddMetadata'
 
+import type { ComponentProps } from 'react'
 import type { WizardFormState, WizardTileProps } from '../types'
 
-const render = (props: React.ComponentProps<typeof AddMetadata>) => {
+const render = (props: ComponentProps<typeof AddMetadata>) => {
   return renderWithProviders(<AddMetadata {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -35,7 +35,7 @@ const mockWizardTileProps: Partial<WizardTileProps> = {
 }
 
 describe('AddMetadata', () => {
-  let props: React.ComponentProps<typeof AddMetadata>
+  let props: ComponentProps<typeof AddMetadata>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectFixtures.test.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectFixtures.test.tsx
index 42702c2a507..b4d205aeb71 100644
--- a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectFixtures.test.tsx
+++ b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectFixtures.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
@@ -6,9 +5,11 @@ import { fireEvent, screen } from '@testing-library/react'
 import { i18n } from '../../../assets/localization'
 import { renderWithProviders } from '../../../__testing-utils__'
 import { SelectFixtures } from '../SelectFixtures'
+
+import type { ComponentProps } from 'react'
 import type { WizardFormState, WizardTileProps } from '../types'
 
-const render = (props: React.ComponentProps<typeof SelectFixtures>) => {
+const render = (props: ComponentProps<typeof SelectFixtures>) => {
   return renderWithProviders(<SelectFixtures {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -34,7 +35,7 @@ const mockWizardTileProps: Partial<WizardTileProps> = {
 }
 
 describe('SelectFixtures', () => {
-  let props: React.ComponentProps<typeof SelectFixtures>
+  let props: ComponentProps<typeof SelectFixtures>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectGripper.test.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectGripper.test.tsx
index 87ab1bb07e3..fbd0b4c6388 100644
--- a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectGripper.test.tsx
+++ b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectGripper.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
@@ -7,6 +6,7 @@ import { i18n } from '../../../assets/localization'
 import { renderWithProviders } from '../../../__testing-utils__'
 import { SelectGripper } from '../SelectGripper'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 import type { WizardFormState, WizardTileProps } from '../types'
 
@@ -20,7 +20,7 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof SelectGripper>) => {
+const render = (props: ComponentProps<typeof SelectGripper>) => {
   return renderWithProviders(<SelectGripper {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -45,7 +45,7 @@ const mockWizardTileProps: Partial<WizardTileProps> = {
 }
 
 describe('SelectGripper', () => {
-  let props: React.ComponentProps<typeof SelectGripper>
+  let props: ComponentProps<typeof SelectGripper>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectModules.test.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectModules.test.tsx
index a18f06bf508..30dcf7fae43 100644
--- a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectModules.test.tsx
+++ b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectModules.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { FLEX_ROBOT_TYPE, OT2_ROBOT_TYPE } from '@opentrons/shared-data'
@@ -7,11 +6,13 @@ import { i18n } from '../../../assets/localization'
 import { getEnableAbsorbanceReader } from '../../../feature-flags/selectors'
 import { renderWithProviders } from '../../../__testing-utils__'
 import { SelectModules } from '../SelectModules'
+
+import type { ComponentProps } from 'react'
 import type { WizardFormState, WizardTileProps } from '../types'
 
 vi.mock('../../../feature-flags/selectors')
 
-const render = (props: React.ComponentProps<typeof SelectModules>) => {
+const render = (props: ComponentProps<typeof SelectModules>) => {
   return renderWithProviders(<SelectModules {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -37,7 +38,7 @@ const mockWizardTileProps: Partial<WizardTileProps> = {
 }
 
 describe('SelectModules', () => {
-  let props: React.ComponentProps<typeof SelectModules>
+  let props: ComponentProps<typeof SelectModules>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectPipettes.test.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectPipettes.test.tsx
index 016a143a4bc..7af0b1dc597 100644
--- a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectPipettes.test.tsx
+++ b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectPipettes.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { FLEX_ROBOT_TYPE, OT2_ROBOT_TYPE } from '@opentrons/shared-data'
@@ -12,6 +11,7 @@ import { createCustomTiprackDef } from '../../../labware-defs/actions'
 import { SelectPipettes } from '../SelectPipettes'
 import { getTiprackOptions } from '../utils'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 import type { WizardFormState, WizardTileProps } from '../types'
 
@@ -31,7 +31,7 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof SelectPipettes>) => {
+const render = (props: ComponentProps<typeof SelectPipettes>) => {
   return renderWithProviders(<SelectPipettes {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -56,7 +56,7 @@ const mockWizardTileProps: Partial<WizardTileProps> = {
 }
 
 describe('SelectPipettes', () => {
-  let props: React.ComponentProps<typeof SelectPipettes>
+  let props: ComponentProps<typeof SelectPipettes>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectRobot.test.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectRobot.test.tsx
index 241fdb159ba..29b11194e66 100644
--- a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectRobot.test.tsx
+++ b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectRobot.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
@@ -6,9 +5,11 @@ import { fireEvent, screen } from '@testing-library/react'
 import { i18n } from '../../../assets/localization'
 import { renderWithProviders } from '../../../__testing-utils__'
 import { SelectRobot } from '../SelectRobot'
+
+import type { ComponentProps } from 'react'
 import type { WizardFormState, WizardTileProps } from '../types'
 
-const render = (props: React.ComponentProps<typeof SelectRobot>) => {
+const render = (props: ComponentProps<typeof SelectRobot>) => {
   return renderWithProviders(<SelectRobot {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -32,7 +33,7 @@ const mockWizardTileProps: Partial<WizardTileProps> = {
 }
 
 describe('SelectRobot', () => {
-  let props: React.ComponentProps<typeof SelectRobot>
+  let props: ComponentProps<typeof SelectRobot>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/WizardBody.test.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/WizardBody.test.tsx
index fe33c8266c9..669dc7bac92 100644
--- a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/WizardBody.test.tsx
+++ b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/WizardBody.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -7,14 +6,16 @@ import { i18n } from '../../../assets/localization'
 import { renderWithProviders } from '../../../__testing-utils__'
 import { WizardBody } from '../WizardBody'
 
-const render = (props: React.ComponentProps<typeof WizardBody>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof WizardBody>) => {
   return renderWithProviders(<WizardBody {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('WizardBody', () => {
-  let props: React.ComponentProps<typeof WizardBody>
+  let props: ComponentProps<typeof WizardBody>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/index.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/index.tsx
index df079c72318..d3451605756 100644
--- a/protocol-designer/src/pages/CreateNewProtocolWizard/index.tsx
+++ b/protocol-designer/src/pages/CreateNewProtocolWizard/index.tsx
@@ -46,6 +46,8 @@ import { SelectModules } from './SelectModules'
 import { SelectFixtures } from './SelectFixtures'
 import { AddMetadata } from './AddMetadata'
 import { getTrashSlot } from './utils'
+
+import type { Dispatch, SetStateAction } from 'react'
 import type { ThunkDispatch } from 'redux-thunk'
 import type { NormalizedPipette } from '@opentrons/step-generation'
 import type { BaseState } from '../../types'
@@ -389,7 +391,7 @@ interface CreateFileFormProps {
   createProtocolFile: (values: WizardFormState) => void
   goBack: () => void
   proceed: () => void
-  setWizardSteps: React.Dispatch<React.SetStateAction<WizardStep[]>>
+  setWizardSteps: Dispatch<SetStateAction<WizardStep[]>>
   analyticsStartTime: Date
 }
 
diff --git a/protocol-designer/src/pages/Designer/DeckSetup/DeckItemHover.tsx b/protocol-designer/src/pages/Designer/DeckSetup/DeckItemHover.tsx
index 35961ab04cd..0b480340279 100644
--- a/protocol-designer/src/pages/Designer/DeckSetup/DeckItemHover.tsx
+++ b/protocol-designer/src/pages/Designer/DeckSetup/DeckItemHover.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { css } from 'styled-components'
@@ -18,6 +17,7 @@ import {
 } from '@opentrons/components'
 import { getDeckSetupForActiveItem } from '../../../top-selectors/labware-locations'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type {
   CoordinateTuple,
   DeckSlotId,
@@ -27,12 +27,12 @@ import type { DeckSetupTabType } from '../types'
 
 interface DeckItemHoverProps extends DeckSetupTabType {
   hover: string | null
-  setHover: React.Dispatch<React.SetStateAction<string | null>>
+  setHover: Dispatch<SetStateAction<string | null>>
   slotBoundingBox: Dimensions
   //  can be slotId or labwareId (for off-deck labware)
   itemId: string
   slotPosition: CoordinateTuple | null
-  setShowMenuListForId: React.Dispatch<React.SetStateAction<string | null>>
+  setShowMenuListForId: Dispatch<SetStateAction<string | null>>
   menuListId: DeckSlotId | null
   isSelected?: boolean
 }
diff --git a/protocol-designer/src/pages/Designer/DeckSetup/LabwareTools.tsx b/protocol-designer/src/pages/Designer/DeckSetup/LabwareTools.tsx
index d41f2057502..995b06219d6 100644
--- a/protocol-designer/src/pages/Designer/DeckSetup/LabwareTools.tsx
+++ b/protocol-designer/src/pages/Designer/DeckSetup/LabwareTools.tsx
@@ -61,6 +61,7 @@ import {
   getLabwareCompatibleWithAdapter,
 } from './utils'
 
+import type { ChangeEvent, Dispatch, SetStateAction } from 'react'
 import type { DeckSlotId, LabwareDefinition2 } from '@opentrons/shared-data'
 import type { ModuleOnDeck } from '../../../step-forms'
 import type { ThunkDispatch } from '../../../types'
@@ -75,9 +76,9 @@ interface LabwareToolsProps {
   slot: DeckSlotId
   setHoveredLabware: (defUri: string | null) => void
   searchTerm: string
-  setSearchTerm: React.Dispatch<React.SetStateAction<string>>
+  setSearchTerm: Dispatch<SetStateAction<string>>
   areCategoriesExpanded: CategoryExpand
-  setAreCategoriesExpanded: React.Dispatch<React.SetStateAction<CategoryExpand>>
+  setAreCategoriesExpanded: Dispatch<SetStateAction<CategoryExpand>>
   handleReset: () => void
 }
 
@@ -274,7 +275,7 @@ export function LabwareTools(props: LabwareToolsProps): JSX.Element {
         (isNextToHeaterShaker && robotType === OT2_ROBOT_TYPE) ? (
           <Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}>
             <CheckboxField
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              onChange={(e: ChangeEvent<HTMLInputElement>) => {
                 isNextToHeaterShaker
                   ? setFilterHeight(e.currentTarget.checked)
                   : setFilterRecommended(e.currentTarget.checked)
diff --git a/protocol-designer/src/pages/Designer/DeckSetup/__tests__/DeckSetupTools.test.tsx b/protocol-designer/src/pages/Designer/DeckSetup/__tests__/DeckSetupTools.test.tsx
index 6a0c7d03c87..6d7cc88479e 100644
--- a/protocol-designer/src/pages/Designer/DeckSetup/__tests__/DeckSetupTools.test.tsx
+++ b/protocol-designer/src/pages/Designer/DeckSetup/__tests__/DeckSetupTools.test.tsx
@@ -22,7 +22,7 @@ import { getDeckSetupForActiveItem } from '../../../../top-selectors/labware-loc
 import { DeckSetupTools } from '../DeckSetupTools'
 import { LabwareTools } from '../LabwareTools'
 
-import type * as React from 'react'
+import type { ComponentProps } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 
 vi.mock('../LabwareTools')
@@ -36,7 +36,7 @@ vi.mock('../../../../labware-ingred/selectors')
 vi.mock('../../../../tutorial/selectors')
 vi.mock('../../../../step-forms/selectors')
 vi.mock('../../../../organisms/Kitchen/hooks')
-const render = (props: React.ComponentProps<typeof DeckSetupTools>) => {
+const render = (props: ComponentProps<typeof DeckSetupTools>) => {
   return renderWithProviders(<DeckSetupTools {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -45,7 +45,7 @@ const render = (props: React.ComponentProps<typeof DeckSetupTools>) => {
 const mockMakeSnackbar = vi.fn()
 
 describe('DeckSetupTools', () => {
-  let props: React.ComponentProps<typeof DeckSetupTools>
+  let props: ComponentProps<typeof DeckSetupTools>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/Designer/DeckSetup/__tests__/HoveredItems.test.tsx b/protocol-designer/src/pages/Designer/DeckSetup/__tests__/HoveredItems.test.tsx
index 605af62250e..4f911f558dc 100644
--- a/protocol-designer/src/pages/Designer/DeckSetup/__tests__/HoveredItems.test.tsx
+++ b/protocol-designer/src/pages/Designer/DeckSetup/__tests__/HoveredItems.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'
@@ -14,6 +13,8 @@ import { getCustomLabwareDefsByURI } from '../../../../labware-defs/selectors'
 import { getDesignerTab } from '../../../../file-data/selectors'
 import { FixtureRender } from '../FixtureRender'
 import { HoveredItems } from '../HoveredItems'
+
+import type { ComponentProps } from 'react'
 import type * as OpentronsComponents from '@opentrons/components'
 
 vi.mock('../FixtureRender')
@@ -29,12 +30,12 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof HoveredItems>) => {
+const render = (props: ComponentProps<typeof HoveredItems>) => {
   return renderWithProviders(<HoveredItems {...props} />)[0]
 }
 
 describe('HoveredItems', () => {
-  let props: React.ComponentProps<typeof HoveredItems>
+  let props: ComponentProps<typeof HoveredItems>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/Designer/DeckSetup/__tests__/LabwareTools.test.tsx b/protocol-designer/src/pages/Designer/DeckSetup/__tests__/LabwareTools.test.tsx
index d584faf4d27..ce41f0e9210 100644
--- a/protocol-designer/src/pages/Designer/DeckSetup/__tests__/LabwareTools.test.tsx
+++ b/protocol-designer/src/pages/Designer/DeckSetup/__tests__/LabwareTools.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -21,6 +20,8 @@ import { createCustomLabwareDef } from '../../../../labware-defs/actions'
 import { getCustomLabwareDefsByURI } from '../../../../labware-defs/selectors'
 import { getRobotType } from '../../../../file-data/selectors'
 import { LabwareTools } from '../LabwareTools'
+
+import type { ComponentProps } from 'react'
 import type { LabwareDefinition2, PipetteV2Specs } from '@opentrons/shared-data'
 
 vi.mock('../../../../utils')
@@ -32,14 +33,14 @@ vi.mock('../../../../labware-defs/actions')
 vi.mock('../../../../labware-ingred/selectors')
 vi.mock('../../../../labware-ingred/actions')
 
-const render = (props: React.ComponentProps<typeof LabwareTools>) => {
+const render = (props: ComponentProps<typeof LabwareTools>) => {
   return renderWithProviders(<LabwareTools {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('LabwareTools', () => {
-  let props: React.ComponentProps<typeof LabwareTools>
+  let props: ComponentProps<typeof LabwareTools>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/Designer/DeckSetup/__tests__/SelectedHoveredItems.test.tsx b/protocol-designer/src/pages/Designer/DeckSetup/__tests__/SelectedHoveredItems.test.tsx
index 4c705749bc6..59496c9049b 100644
--- a/protocol-designer/src/pages/Designer/DeckSetup/__tests__/SelectedHoveredItems.test.tsx
+++ b/protocol-designer/src/pages/Designer/DeckSetup/__tests__/SelectedHoveredItems.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'
@@ -17,6 +16,8 @@ import { getDesignerTab } from '../../../../file-data/selectors'
 import { LabwareOnDeck } from '../../../../organisms'
 import { FixtureRender } from '../FixtureRender'
 import { SelectedHoveredItems } from '../SelectedHoveredItems'
+
+import type { ComponentProps } from 'react'
 import type * as OpentronsComponents from '@opentrons/components'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 
@@ -34,12 +35,12 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof SelectedHoveredItems>) => {
+const render = (props: ComponentProps<typeof SelectedHoveredItems>) => {
   return renderWithProviders(<SelectedHoveredItems {...props} />)[0]
 }
 
 describe('SelectedHoveredItems', () => {
-  let props: React.ComponentProps<typeof SelectedHoveredItems>
+  let props: ComponentProps<typeof SelectedHoveredItems>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/Designer/DeckSetup/__tests__/SlotOverflowMenu.test.tsx b/protocol-designer/src/pages/Designer/DeckSetup/__tests__/SlotOverflowMenu.test.tsx
index 3fc9f65f8ea..1924ac7c961 100644
--- a/protocol-designer/src/pages/Designer/DeckSetup/__tests__/SlotOverflowMenu.test.tsx
+++ b/protocol-designer/src/pages/Designer/DeckSetup/__tests__/SlotOverflowMenu.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -19,6 +18,7 @@ import { selectors as labwareIngredSelectors } from '../../../../labware-ingred/
 import { getNextAvailableDeckSlot } from '../../../../labware-ingred/utils'
 import { SlotOverflowMenu } from '../SlotOverflowMenu'
 
+import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 
@@ -41,7 +41,7 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof SlotOverflowMenu>) => {
+const render = (props: ComponentProps<typeof SlotOverflowMenu>) => {
   return renderWithProviders(<SlotOverflowMenu {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -51,7 +51,7 @@ const MOCK_STAGING_AREA_ID = 'MOCK_STAGING_AREA_ID'
 const MOCK_MAKE_SNACKBAR = vi.fn()
 
 describe('SlotOverflowMenu', () => {
-  let props: React.ComponentProps<typeof SlotOverflowMenu>
+  let props: ComponentProps<typeof SlotOverflowMenu>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/Designer/DeckSetup/utils.ts b/protocol-designer/src/pages/Designer/DeckSetup/utils.ts
index a891926d329..a51a850bb84 100644
--- a/protocol-designer/src/pages/Designer/DeckSetup/utils.ts
+++ b/protocol-designer/src/pages/Designer/DeckSetup/utils.ts
@@ -22,6 +22,7 @@ import {
   RECOMMENDED_LABWARE_BY_MODULE,
 } from './constants'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type {
   AddressableAreaName,
   CutoutFixture,
@@ -229,7 +230,7 @@ export function zoomInOnCoordinate(props: ZoomInOnCoordinateProps): string {
 export interface AnimateZoomProps {
   targetViewBox: string
   viewBox: string
-  setViewBox: React.Dispatch<React.SetStateAction<string>>
+  setViewBox: Dispatch<SetStateAction<string>>
 }
 
 type ViewBox = [number, number, number, number]
diff --git a/protocol-designer/src/pages/Designer/LiquidsOverflowMenu.tsx b/protocol-designer/src/pages/Designer/LiquidsOverflowMenu.tsx
index c141ecee427..1a4b2e12c29 100644
--- a/protocol-designer/src/pages/Designer/LiquidsOverflowMenu.tsx
+++ b/protocol-designer/src/pages/Designer/LiquidsOverflowMenu.tsx
@@ -23,7 +23,7 @@ import { LINE_CLAMP_TEXT_STYLE } from '../../atoms'
 import { selectors as labwareIngredSelectors } from '../../labware-ingred/selectors'
 import * as labwareIngredActions from '../../labware-ingred/actions'
 
-import type { MouseEvent } from 'react'
+import type { MouseEvent, RefObject } from 'react'
 import type { ThunkDispatch } from '../../types'
 
 const NAV_HEIGHT = '64px'
@@ -31,7 +31,7 @@ const NAV_HEIGHT = '64px'
 interface LiquidsOverflowMenuProps {
   onClose: () => void
   showLiquidsModal: () => void
-  overflowWrapperRef: React.RefObject<HTMLDivElement>
+  overflowWrapperRef: RefObject<HTMLDivElement>
 }
 
 export function LiquidsOverflowMenu(
diff --git a/protocol-designer/src/pages/Designer/Offdeck/__tests__/OffDeckDetails.test.tsx b/protocol-designer/src/pages/Designer/Offdeck/__tests__/OffDeckDetails.test.tsx
index aa442066194..51c2ccd0f1b 100644
--- a/protocol-designer/src/pages/Designer/Offdeck/__tests__/OffDeckDetails.test.tsx
+++ b/protocol-designer/src/pages/Designer/Offdeck/__tests__/OffDeckDetails.test.tsx
@@ -14,6 +14,8 @@ import { getDeckSetupForActiveItem } from '../../../../top-selectors/labware-loc
 import { getAllWellContentsForActiveItem } from '../../../../top-selectors/well-contents'
 import { OffDeckDetails } from '../OffDeckDetails'
 import { HighlightOffdeckSlot } from '../HighlightOffdeckSlot'
+
+import type { ComponentProps } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type * as Components from '@opentrons/components'
 
@@ -31,14 +33,14 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof OffDeckDetails>) => {
+const render = (props: ComponentProps<typeof OffDeckDetails>) => {
   return renderWithProviders(<OffDeckDetails {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('OffDeckDetails', () => {
-  let props: React.ComponentProps<typeof OffDeckDetails>
+  let props: ComponentProps<typeof OffDeckDetails>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/PathField.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/PathField.tsx
index e9676cbb951..691706a2884 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/PathField.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/PathField.tsx
@@ -17,6 +17,8 @@ import SINGLE_IMAGE from '../../../../../assets/images/path_single_transfers.svg
 import MULTI_DISPENSE_IMAGE from '../../../../../assets/images/path_multi_dispense.svg'
 import MULTI_ASPIRATE_IMAGE from '../../../../../assets/images/path_multi_aspirate.svg'
 import { getDisabledPathMap } from './utils'
+
+import type { ChangeEvent, ReactNode } from 'react'
 import type { PathOption } from '../../../../../form-types'
 import type { FieldProps } from '../types'
 import type { DisabledPathMap, ValuesForPath } from './utils'
@@ -60,10 +62,10 @@ interface PathButtonProps {
   disabled: boolean
   selected: boolean
   subtitle: string
-  onClick: (e: React.ChangeEvent<HTMLInputElement>) => void
+  onClick: (e: ChangeEvent<HTMLInputElement>) => void
   path: PathOption
   id?: string
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
 function PathButton(props: PathButtonProps): JSX.Element {
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
index 475340bf2d4..68637ec0aa5 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
@@ -56,6 +56,8 @@ import {
   capitalizeFirstLetter,
   getIsErrorOnCurrentPage,
 } from './utils'
+
+import type { ComponentType } from 'react'
 import type { StepFieldName } from '../../../../steplist/fieldLevel'
 import type { FormData, StepType } from '../../../../form-types'
 import type { AnalyticsEvent } from '../../../../analytics/mixpanel'
@@ -72,7 +74,7 @@ import {
 } from '../../../../ui/steps/actions/actions'
 
 type StepFormMap = {
-  [K in StepType]?: React.ComponentType<StepFormProps> | null
+  [K in StepType]?: ComponentType<StepFormProps> | null
 }
 
 const STEP_FORM_MAP: StepFormMap = {
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerCycle.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerCycle.tsx
index 96d0007e096..1a26a708ed5 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerCycle.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerCycle.tsx
@@ -33,6 +33,7 @@ import {
 import { uuid } from '../../../../../../utils'
 import { getTimeFromString, getStepIndex } from './utils'
 
+import type { ChangeEvent, Dispatch, SetStateAction } from 'react'
 import type { ThermocyclerStepTypeGeneral } from './ThermocyclerProfileModal'
 import type { ThermocyclerStepType } from './ThermocyclerStep'
 
@@ -57,12 +58,12 @@ interface CycleStepType {
 
 interface ThermocyclerCycleProps {
   steps: ThermocyclerStepTypeGeneral[]
-  setSteps: React.Dispatch<React.SetStateAction<ThermocyclerStepTypeGeneral[]>>
-  setShowCreateNewCycle: React.Dispatch<React.SetStateAction<boolean>>
+  setSteps: Dispatch<SetStateAction<ThermocyclerStepTypeGeneral[]>>
+  setShowCreateNewCycle: Dispatch<SetStateAction<boolean>>
   step?: ThermocyclerCycleType
   backgroundColor?: string
   readOnly?: boolean
-  setIsInEdit: React.Dispatch<React.SetStateAction<boolean>>
+  setIsInEdit: Dispatch<SetStateAction<boolean>>
 }
 
 export function ThermocyclerCycle(props: ThermocyclerCycleProps): JSX.Element {
@@ -394,7 +395,7 @@ export function ThermocyclerCycle(props: ThermocyclerCycleProps): JSX.Element {
                     'capitalize'
                   )}
                   value={stepState.name.value}
-                  onChange={(e: React.ChangeEvent<any>) => {
+                  onChange={(e: ChangeEvent<any>) => {
                     handleValueUpdate(
                       cycleStepId,
                       'name',
@@ -417,7 +418,7 @@ export function ThermocyclerCycle(props: ThermocyclerCycleProps): JSX.Element {
                   )}
                   units={t('units.degrees')}
                   value={stepState.temp.value}
-                  onChange={(e: React.ChangeEvent<any>) => {
+                  onChange={(e: ChangeEvent<any>) => {
                     handleValueUpdate(
                       cycleStepId,
                       'temp',
@@ -454,7 +455,7 @@ export function ThermocyclerCycle(props: ThermocyclerCycleProps): JSX.Element {
                   )}
                   units={t('units.time')}
                   value={stepState.time.value}
-                  onChange={(e: React.ChangeEvent<any>) => {
+                  onChange={(e: ChangeEvent<any>) => {
                     handleValueUpdate(
                       cycleStepId,
                       'time',
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerProfileModal.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerProfileModal.tsx
index 6c952296ad3..b1f87f6f997 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerProfileModal.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerProfileModal.tsx
@@ -17,6 +17,7 @@ import {
 import { ThermocyclerCycle } from './ThermocyclerCycle'
 import { ThermocyclerStep } from './ThermocyclerStep'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { FormData } from '../../../../../../form-types'
 import type { FieldPropsByName } from '../../types'
 import type { ThermocyclerCycleType } from './ThermocyclerCycle'
@@ -29,7 +30,7 @@ export type ThermocyclerStepTypeGeneral =
 interface ThermocyclerModalProps {
   formData: FormData
   propsForFields: FieldPropsByName
-  setShowProfileModal: React.Dispatch<React.SetStateAction<boolean>>
+  setShowProfileModal: Dispatch<SetStateAction<boolean>>
 }
 
 export function ThermocyclerProfileModal(
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerStep.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerStep.tsx
index 3e45704c94d..327e3676690 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerStep.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerStep.tsx
@@ -30,6 +30,7 @@ import {
 import { uuid } from '../../../../../../utils'
 import { getTimeFromString, getStepIndex } from './utils'
 
+import type { ChangeEvent, Dispatch, SetStateAction } from 'react'
 import type { ThermocyclerStepTypeGeneral } from './ThermocyclerProfileModal'
 
 export interface ThermocyclerStepType {
@@ -43,9 +44,9 @@ export interface ThermocyclerStepType {
 
 interface ThermocyclerStepProps {
   steps: ThermocyclerStepTypeGeneral[]
-  setSteps: React.Dispatch<React.SetStateAction<ThermocyclerStepTypeGeneral[]>>
-  setShowCreateNewStep: React.Dispatch<React.SetStateAction<boolean>>
-  setIsInEdit: React.Dispatch<React.SetStateAction<boolean>>
+  setSteps: Dispatch<SetStateAction<ThermocyclerStepTypeGeneral[]>>
+  setShowCreateNewStep: Dispatch<SetStateAction<boolean>>
+  setIsInEdit: Dispatch<SetStateAction<boolean>>
   step?: ThermocyclerStepType
   backgroundColor?: string
   readOnly?: boolean
@@ -263,7 +264,7 @@ export function ThermocyclerStep(props: ThermocyclerStepProps): JSX.Element {
             'capitalize'
           )}
           value={stepState.name.value}
-          onChange={(e: React.ChangeEvent<any>) => {
+          onChange={(e: ChangeEvent<any>) => {
             handleValueUpdate('name', e.target.value as string)
           }}
         />
@@ -280,7 +281,7 @@ export function ThermocyclerStep(props: ThermocyclerStepProps): JSX.Element {
           )}
           units={t('units.degrees')}
           value={stepState.temp.value}
-          onChange={(e: React.ChangeEvent<any>) => {
+          onChange={(e: ChangeEvent<any>) => {
             handleValueUpdate(
               'temp',
               maskToFloat(e.target.value),
@@ -308,7 +309,7 @@ export function ThermocyclerStep(props: ThermocyclerStepProps): JSX.Element {
           )}
           units={t('units.time')}
           value={stepState.time.value}
-          onChange={(e: React.ChangeEvent<any>) => {
+          onChange={(e: ChangeEvent<any>) => {
             handleValueUpdate(
               'time',
               maskToTime(e.target.value),
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/MagnetTools.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/MagnetTools.test.tsx
index 6078835fbf6..7d5c250462e 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/MagnetTools.test.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/MagnetTools.test.tsx
@@ -31,7 +31,7 @@ const render = (props: ComponentProps<typeof MagnetTools>) => {
 }
 
 describe('MagnetTools', () => {
-  let props: React.ComponentProps<typeof MagnetTools>
+  let props: ComponentProps<typeof MagnetTools>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/TemperatureTools.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/TemperatureTools.test.tsx
index 904377f66f4..1df389f2d18 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/TemperatureTools.test.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/TemperatureTools.test.tsx
@@ -7,6 +7,8 @@ import {
   getTemperatureModuleIds,
 } from '../../../../../../ui/modules/selectors'
 import { TemperatureTools } from '../TemperatureTools'
+
+import type { ComponentProps } from 'react'
 import type * as ModulesSelectors from '../../../../../../ui/modules/selectors'
 
 vi.mock('../../../../../../ui/modules/selectors', async importOriginal => {
@@ -17,14 +19,14 @@ vi.mock('../../../../../../ui/modules/selectors', async importOriginal => {
     getTemperatureModuleIds: vi.fn(),
   }
 })
-const render = (props: React.ComponentProps<typeof TemperatureTools>) => {
+const render = (props: ComponentProps<typeof TemperatureTools>) => {
   return renderWithProviders(<TemperatureTools {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('TemperatureTools', () => {
-  let props: React.ComponentProps<typeof TemperatureTools>
+  let props: ComponentProps<typeof TemperatureTools>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/types.ts b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/types.ts
index ffbfd8b32c3..8e05bda853a 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/types.ts
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/types.ts
@@ -1,3 +1,4 @@
+import type { Dispatch, SetStateAction } from 'react'
 import type { FormData, StepFieldName } from '../../../../form-types'
 import type { StepFormErrors } from '../../../../steplist'
 export interface FocusHandlers {
@@ -30,7 +31,7 @@ export interface StepFormProps {
   visibleFormErrors: StepFormErrors
   showFormErrors: boolean
   focusedField?: string | null
-  setShowFormErrors?: React.Dispatch<React.SetStateAction<boolean>>
+  setShowFormErrors?: Dispatch<SetStateAction<boolean>>
   tab: LiquidHandlingTab
-  setTab: React.Dispatch<React.SetStateAction<LiquidHandlingTab>>
+  setTab: Dispatch<SetStateAction<LiquidHandlingTab>>
 }
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/ConnectedStepInfo.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/ConnectedStepInfo.tsx
index 1a9ac29f33d..0051499bf15 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/ConnectedStepInfo.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/ConnectedStepInfo.tsx
@@ -1,5 +1,5 @@
 import { useDispatch, useSelector } from 'react-redux'
-import type { Dispatch, SetStateAction } from 'react'
+
 import { useTranslation } from 'react-i18next'
 import { useConditionalConfirm } from '@opentrons/components'
 import * as timelineWarningSelectors from '../../../../top-selectors/timelineWarnings'
@@ -34,6 +34,7 @@ import {
   nonePressed,
 } from './utils'
 
+import type { Dispatch, MouseEvent, SetStateAction } from 'react'
 import type { ThunkDispatch } from 'redux-thunk'
 import type {
   HoverOnStepAction,
@@ -117,7 +118,7 @@ export function ConnectedStepInfo(props: ConnectedStepInfoProps): JSX.Element {
     dispatch(stepsActions.hoverOnStep(stepId))
   const unhighlightStep = (): HoverOnStepAction =>
     dispatch(stepsActions.hoverOnStep(null))
-  const handleSelectStep = (event: React.MouseEvent): void => {
+  const handleSelectStep = (event: MouseEvent): void => {
     if (selectedStep !== stepId) {
       dispatch(toggleViewSubstep(null))
       dispatch(hoverOnStep(null))
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepOverflowMenu.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepOverflowMenu.tsx
index c26460fe472..465e85b577d 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepOverflowMenu.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepOverflowMenu.tsx
@@ -25,6 +25,8 @@ import {
   getSavedStepForms,
   getUnsavedForm,
 } from '../../../../step-forms/selectors'
+
+import type { Dispatch, MutableRefObject, SetStateAction } from 'react'
 import type { ThunkDispatch } from 'redux-thunk'
 import type { BaseState } from '../../../../types'
 import type { StepIdType } from '../../../../form-types'
@@ -32,9 +34,9 @@ import type { AnalyticsEvent } from '../../../../analytics/mixpanel'
 
 interface StepOverflowMenuProps {
   stepId: string
-  menuRootRef: React.MutableRefObject<HTMLDivElement | null>
+  menuRootRef: MutableRefObject<HTMLDivElement | null>
   top: number
-  setOpenedOverflowMenuId: React.Dispatch<React.SetStateAction<string | null>>
+  setOpenedOverflowMenuId: Dispatch<SetStateAction<string | null>>
   handleEdit: () => void
   confirmDelete: () => void
   confirmMultiDelete: () => void
@@ -106,7 +108,7 @@ export function StepOverflowMenu(props: StepOverflowMenuProps): JSX.Element {
         boxShadow="0px 1px 3px rgba(0, 0, 0, 0.2)"
         backgroundColor={COLORS.white}
         flexDirection={DIRECTION_COLUMN}
-        onClick={(e: React.MouseEvent) => {
+        onClick={(e: MouseEvent) => {
           e.preventDefault()
           e.stopPropagation()
         }}
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepContainer.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepContainer.test.tsx
index 4933dffe3ed..be874bb60d2 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepContainer.test.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepContainer.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -8,19 +7,21 @@ import { getUnsavedForm } from '../../../../../step-forms/selectors'
 import { StepContainer } from '../StepContainer'
 import { StepOverflowMenu } from '../StepOverflowMenu'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../../../../../step-forms/selectors')
 vi.mock('../../../../../ui/steps/actions/actions')
 vi.mock('../../../../../ui/steps/selectors')
 vi.mock('../StepOverflowMenu')
 
-const render = (props: React.ComponentProps<typeof StepContainer>) => {
+const render = (props: ComponentProps<typeof StepContainer>) => {
   return renderWithProviders(<StepContainer {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('StepContainer', () => {
-  let props: React.ComponentProps<typeof StepContainer>
+  let props: ComponentProps<typeof StepContainer>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepOverflowMenu.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepOverflowMenu.test.tsx
index 9c1de4044d0..55197e85ed4 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepOverflowMenu.test.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepOverflowMenu.test.tsx
@@ -20,7 +20,8 @@ import {
   toggleViewSubstep,
 } from '../../../../../ui/steps/actions/actions'
 import { StepOverflowMenu } from '../StepOverflowMenu'
-import type * as React from 'react'
+
+import type { ComponentProps } from 'react'
 import type * as OpentronsComponents from '@opentrons/components'
 
 const mockConfirm = vi.fn()
@@ -46,7 +47,7 @@ vi.mock('@opentrons/components', async importOriginal => {
     })),
   }
 })
-const render = (props: React.ComponentProps<typeof StepOverflowMenu>) => {
+const render = (props: ComponentProps<typeof StepOverflowMenu>) => {
   return renderWithProviders(<StepOverflowMenu {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -54,7 +55,7 @@ const render = (props: React.ComponentProps<typeof StepOverflowMenu>) => {
 
 const moveLiquidStepId = 'mockId'
 describe('StepOverflowMenu', () => {
-  let props: React.ComponentProps<typeof StepOverflowMenu>
+  let props: ComponentProps<typeof StepOverflowMenu>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/ThermocyclerProfileSubsteps.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/ThermocyclerProfileSubsteps.test.tsx
index b4fb8af436f..a665e82b3a4 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/ThermocyclerProfileSubsteps.test.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/ThermocyclerProfileSubsteps.test.tsx
@@ -4,11 +4,11 @@ import { renderWithProviders } from '../../../../../__testing-utils__'
 import { i18n } from '../../../../../assets/localization'
 import { getSavedStepForms } from '../../../../../step-forms/selectors'
 import { ThermocyclerProfileSubsteps } from '../ThermocyclerProfileSubsteps'
+
+import type { ComponentProps } from 'react'
 import type { FormData } from '../../../../../form-types'
 
-const render = (
-  props: React.ComponentProps<typeof ThermocyclerProfileSubsteps>
-) => {
+const render = (props: ComponentProps<typeof ThermocyclerProfileSubsteps>) => {
   return renderWithProviders(<ThermocyclerProfileSubsteps {...props} />, {
     i18nInstance: i18n,
   })[0]
@@ -55,7 +55,7 @@ const MOCK_THERMOCYCLER_SUBSTEP_ITEMS = {
 }
 
 describe('TimelineToolbox', () => {
-  let props: React.ComponentProps<typeof ThermocyclerProfileSubsteps>
+  let props: ComponentProps<typeof ThermocyclerProfileSubsteps>
   beforeEach(() => {
     props = { stepId: THERMOCYCLER_STEP_ID }
     vi.mocked(getSavedStepForms).mockReturnValue({
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts
index b12d5598ca1..0e6620523f7 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts
@@ -2,6 +2,7 @@ import round from 'lodash/round'
 import uniq from 'lodash/uniq'
 import { UAParser } from 'ua-parser-js'
 
+import type { MouseEvent } from 'react'
 import type { StepIdType } from '../../../../form-types'
 
 export const capitalizeFirstLetterAfterNumber = (title: string): string =>
@@ -119,7 +120,7 @@ export const nonePressed = (keysPressed: boolean[]): boolean =>
   keysPressed.every(keyPress => keyPress === false)
 
 export const getMouseClickKeyInfo = (
-  event: React.MouseEvent
+  event: MouseEvent
 ): { isShiftKeyPressed: boolean; isMetaKeyPressed: boolean } => {
   const isMac: boolean = getUserOS() === 'Mac OS'
   const isShiftKeyPressed: boolean = event.shiftKey
diff --git a/protocol-designer/src/pages/Landing/index.tsx b/protocol-designer/src/pages/Landing/index.tsx
index 48d2eb27ead..1e0424c5630 100644
--- a/protocol-designer/src/pages/Landing/index.tsx
+++ b/protocol-designer/src/pages/Landing/index.tsx
@@ -28,6 +28,7 @@ import { useAnnouncements } from '../../organisms/AnnouncementModal/announcement
 import { getLocalStorageItem, localStorageAnnouncementKey } from '../../persist'
 import welcomeImage from '../../assets/images/welcome_page.png'
 
+import type { ChangeEvent, ComponentProps } from 'react'
 import type { ThunkDispatch } from '../../types'
 
 export function Landing(): JSX.Element {
@@ -77,9 +78,7 @@ export function Landing(): JSX.Element {
     }
   }, [metadata, navigate])
 
-  const loadFile = (
-    fileChangeEvent: React.ChangeEvent<HTMLInputElement>
-  ): void => {
+  const loadFile = (fileChangeEvent: ChangeEvent<HTMLInputElement>): void => {
     dispatch(loadFileActions.loadProtocolFile(fileChangeEvent))
   }
 
@@ -165,7 +164,7 @@ const ButtonText = styled.span`
   font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
 `
 
-const StyledNavLink = styled(NavLink)<React.ComponentProps<typeof NavLink>>`
+const StyledNavLink = styled(NavLink)<ComponentProps<typeof NavLink>>`
   color: ${COLORS.white};
   text-decoration: none;
 `
diff --git a/protocol-designer/src/pages/ProtocolOverview/UnusedModalContent.tsx b/protocol-designer/src/pages/ProtocolOverview/UnusedModalContent.tsx
index d9c1a575891..75568b4e9c8 100644
--- a/protocol-designer/src/pages/ProtocolOverview/UnusedModalContent.tsx
+++ b/protocol-designer/src/pages/ProtocolOverview/UnusedModalContent.tsx
@@ -6,6 +6,7 @@ import {
 } from '@opentrons/components'
 import { getModuleDisplayName } from '@opentrons/shared-data'
 
+import type { ReactNode } from 'react'
 import type { ModuleOnDeck, PipetteOnDeck } from '../../step-forms'
 import type { HintKey } from '../../tutorial'
 import type { Fixture } from './index'
@@ -20,7 +21,7 @@ interface MissingContent {
 }
 
 export interface WarningContent {
-  content: React.ReactNode
+  content: ReactNode
   heading?: string
   titleElement?: JSX.Element
   hintKey?: HintKey
diff --git a/protocol-designer/src/pages/ProtocolOverview/__tests__/DeckThumbnail.test.tsx b/protocol-designer/src/pages/ProtocolOverview/__tests__/DeckThumbnail.test.tsx
index f8b4aafd9af..bdae73a3e8f 100644
--- a/protocol-designer/src/pages/ProtocolOverview/__tests__/DeckThumbnail.test.tsx
+++ b/protocol-designer/src/pages/ProtocolOverview/__tests__/DeckThumbnail.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'
@@ -8,6 +7,8 @@ import { getInitialDeckSetup } from '../../../step-forms/selectors'
 import { LabwareOnDeck } from '../../../organisms'
 import { getRobotType } from '../../../file-data/selectors'
 import { DeckThumbnail } from '../DeckThumbnail'
+
+import type { ComponentProps } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type * as Components from '@opentrons/components'
 
@@ -23,12 +24,12 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof DeckThumbnail>) => {
+const render = (props: ComponentProps<typeof DeckThumbnail>) => {
   return renderWithProviders(<DeckThumbnail {...props} />)[0]
 }
 
 describe('DeckThumbnail', () => {
-  let props: React.ComponentProps<typeof DeckThumbnail>
+  let props: ComponentProps<typeof DeckThumbnail>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/pages/ProtocolOverview/__tests__/OffdeckThumbnail.test.tsx b/protocol-designer/src/pages/ProtocolOverview/__tests__/OffdeckThumbnail.test.tsx
index ce96b79923a..027eaaab2a8 100644
--- a/protocol-designer/src/pages/ProtocolOverview/__tests__/OffdeckThumbnail.test.tsx
+++ b/protocol-designer/src/pages/ProtocolOverview/__tests__/OffdeckThumbnail.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { FLEX_ROBOT_TYPE, fixture12Trough } from '@opentrons/shared-data'
@@ -11,6 +10,7 @@ import { getInitialDeckSetup } from '../../../step-forms/selectors'
 import { getAllWellContentsForActiveItem } from '../../../top-selectors/well-contents'
 import { OffDeckThumbnail } from '../OffdeckThumbnail'
 
+import type { ComponentProps } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type * as Components from '@opentrons/components'
 
@@ -26,14 +26,14 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof OffDeckThumbnail>) => {
+const render = (props: ComponentProps<typeof OffDeckThumbnail>) => {
   return renderWithProviders(<OffDeckThumbnail {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('OffDeckThumbnail', () => {
-  let props: React.ComponentProps<typeof OffDeckThumbnail>
+  let props: ComponentProps<typeof OffDeckThumbnail>
 
   beforeEach(() => {
     props = {
diff --git a/protocol-designer/src/step-forms/selectors/index.ts b/protocol-designer/src/step-forms/selectors/index.ts
index 2fe25dc790f..d5a2c308329 100644
--- a/protocol-designer/src/step-forms/selectors/index.ts
+++ b/protocol-designer/src/step-forms/selectors/index.ts
@@ -29,6 +29,7 @@ import { getProfileItemsHaveErrors } from '../utils/getProfileItemsHaveErrors'
 import * as featureFlagSelectors from '../../feature-flags/selectors'
 import { denormalizePipetteEntities, getHydratedForm } from '../utils'
 import { selectors as labwareDefSelectors } from '../../labware-defs'
+import type { ComponentProps } from 'react'
 import type { Selector } from 'reselect'
 import type {
   AdditionalEquipmentEntities,
@@ -400,7 +401,7 @@ export const getEquippedPipetteOptions: Selector<
   )
 })
 // Formats pipette data specifically for file page InstrumentGroup component
-type PipettesForInstrumentGroup = React.ComponentProps<typeof InstrumentGroup>
+type PipettesForInstrumentGroup = ComponentProps<typeof InstrumentGroup>
 export const getPipettesForInstrumentGroup: Selector<
   BaseState,
   PipettesForInstrumentGroup
diff --git a/protocol-designer/src/steplist/formLevel/errors.ts b/protocol-designer/src/steplist/formLevel/errors.ts
index add7662903a..484690e7e37 100644
--- a/protocol-designer/src/steplist/formLevel/errors.ts
+++ b/protocol-designer/src/steplist/formLevel/errors.ts
@@ -1,5 +1,3 @@
-import type * as React from 'react'
-
 import { MAGNETIC_MODULE_V1, MAGNETIC_MODULE_V2 } from '@opentrons/shared-data'
 
 import {
@@ -17,6 +15,7 @@ import { canPipetteUseLabware } from '../../utils'
 import { getWellRatio } from '../utils'
 import { getTimeFromForm } from '../utils/getTimeFromForm'
 
+import type { ReactNode } from 'react'
 import type { LabwareDefinition2, PipetteV2Specs } from '@opentrons/shared-data'
 import type { LabwareEntities, PipetteEntity } from '@opentrons/step-generation'
 import type { StepFieldName } from '../../form-types'
@@ -51,7 +50,7 @@ export type FormErrorKey =
 
 export interface FormError {
   title: string
-  body?: React.ReactNode
+  body?: ReactNode
   dependentFields: StepFieldName[]
   showAtField?: boolean
   showAtForm?: boolean
diff --git a/protocol-designer/src/steplist/formLevel/profileErrors.ts b/protocol-designer/src/steplist/formLevel/profileErrors.ts
index d29a6b67708..dee8090dc8d 100644
--- a/protocol-designer/src/steplist/formLevel/profileErrors.ts
+++ b/protocol-designer/src/steplist/formLevel/profileErrors.ts
@@ -1,13 +1,15 @@
 import uniqBy from 'lodash/uniqBy'
 import { THERMOCYCLER_PROFILE } from '../../constants'
 import { PROFILE_STEP } from '../../form-types'
+
+import type { ReactNode } from 'react'
 import type { ProfileStepItem } from '../../form-types'
 
 // TODO: real HydratedFormData type
 type HydratedFormData = any
 export interface ProfileFormError {
   title: string
-  body?: React.ReactNode
+  body?: ReactNode
   dependentProfileFields: string[]
 }
 type ProfileFormErrorKey = 'INVALID_PROFILE_DURATION'
diff --git a/protocol-designer/src/types.ts b/protocol-designer/src/types.ts
index 274f38948ac..3d19d320b4c 100644
--- a/protocol-designer/src/types.ts
+++ b/protocol-designer/src/types.ts
@@ -1,3 +1,4 @@
+import type { FC } from 'react'
 import type { OutputSelector } from 'reselect'
 import type { NozzleConfigurationStyle } from '@opentrons/shared-data'
 import type { RootState as Analytics } from './analytics'
@@ -51,7 +52,7 @@ export interface RouteProps {
   /** the component rendered by a route match
    * drop developed components into slots held by placeholder div components
    * */
-  Component: React.FC
+  Component: FC
   /** a route/page name to render in the nav bar
    */
   name: string

From cf1c3bdd72164d7b55465ebf95596973b6773398 Mon Sep 17 00:00:00 2001
From: Max Marrone <max@opentrons.com>
Date: Mon, 23 Dec 2024 16:47:35 -0500
Subject: [PATCH 15/18] perf(robot-server): Flatten FastAPI routers (#17169)

---
 robot-server/robot_server/app_setup.py        |   2 +-
 .../robot_server/client_data/router.py        |   3 +-
 robot-server/robot_server/commands/router.py  |   5 +-
 .../robot_server/data_files/router.py         |   5 +-
 .../robot_server/deck_configuration/router.py |   3 +-
 .../error_recovery/settings/router.py         |   3 +-
 .../robot_server/instruments/router.py        |   5 +-
 .../robot_server/labware_offsets/router.py    |  12 +-
 .../maintenance_runs/router/__init__.py       |   4 +-
 .../maintenance_runs/router/base_router.py    |   5 +-
 .../router/commands_router.py                 |   5 +-
 .../maintenance_runs/router/labware_router.py |   6 +-
 robot-server/robot_server/modules/router.py   |   6 +-
 robot-server/robot_server/protocols/router.py |   4 +-
 .../robot_server/robot/control/router.py      |   6 +-
 robot-server/robot_server/robot/router.py     |   4 +-
 robot-server/robot_server/router.py           |  15 +-
 .../robot_server/runs/router/__init__.py      |   4 +-
 .../runs/router/actions_router.py             |   6 +-
 .../robot_server/runs/router/base_router.py   |   6 +-
 .../runs/router/commands_router.py            |   5 +-
 .../router/error_recovery_policy_router.py    |   5 +-
 .../runs/router/labware_router.py             |   6 +-
 .../robot_server/service/labware/router.py    |   5 +-
 .../robot_server/subsystems/router.py         |   6 +-
 robot-server/robot_server/system/router.py    |   5 +-
 .../fastapi_utils/light_router.py             | 306 ++++++++++++++++++
 27 files changed, 395 insertions(+), 52 deletions(-)
 create mode 100644 server-utils/server_utils/fastapi_utils/light_router.py

diff --git a/robot-server/robot_server/app_setup.py b/robot-server/robot_server/app_setup.py
index 2a4d8b1f3da..265a6270033 100644
--- a/robot-server/robot_server/app_setup.py
+++ b/robot-server/robot_server/app_setup.py
@@ -114,7 +114,7 @@ async def _lifespan(app: FastAPI) -> AsyncGenerator[None, None]:
 )
 
 # main router
-app.include_router(router=router)
+router.install_on_app(app)
 
 
 def _get_persistence_directory(settings: RobotServerSettings) -> Optional[Path]:
diff --git a/robot-server/robot_server/client_data/router.py b/robot-server/robot_server/client_data/router.py
index 4a2850cb8c1..847c5da59a9 100644
--- a/robot-server/robot_server/client_data/router.py
+++ b/robot-server/robot_server/client_data/router.py
@@ -4,6 +4,7 @@
 from typing import Annotated, Literal
 
 import fastapi
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from robot_server.client_data.store import (
     ClientData,
@@ -18,7 +19,7 @@
     get_client_data_publisher,
 )
 
-router = fastapi.APIRouter()
+router = LightRouter()
 
 
 Key = Annotated[
diff --git a/robot-server/robot_server/commands/router.py b/robot-server/robot_server/commands/router.py
index 5d99f3e04f7..4d23bb73fbe 100644
--- a/robot-server/robot_server/commands/router.py
+++ b/robot-server/robot_server/commands/router.py
@@ -1,7 +1,8 @@
 """Router for top-level /commands endpoints."""
 from typing import Annotated, Final, List, Literal, Optional, cast
 
-from fastapi import APIRouter, Depends, Query, status
+from fastapi import Depends, Query, status
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from opentrons.protocol_engine import CommandIntent
 from opentrons.protocol_engine.errors import CommandDoesNotExistError
@@ -25,7 +26,7 @@
 _DEFAULT_COMMAND_LIST_LENGTH: Final = 20
 
 
-commands_router = APIRouter()
+commands_router = LightRouter()
 
 
 class CommandNotFound(ErrorDetails):
diff --git a/robot-server/robot_server/data_files/router.py b/robot-server/robot_server/data_files/router.py
index f9c61afb77a..ba5cac2f7fd 100644
--- a/robot-server/robot_server/data_files/router.py
+++ b/robot-server/robot_server/data_files/router.py
@@ -4,8 +4,9 @@
 from textwrap import dedent
 from typing import Annotated, Optional, Literal, Union
 
-from fastapi import APIRouter, UploadFile, File, Form, Depends, Response, status
+from fastapi import UploadFile, File, Form, Depends, Response, status
 from opentrons.protocol_reader import FileHasher, FileReaderWriter
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from robot_server.service.json_api import (
     SimpleBody,
@@ -32,7 +33,7 @@
 from ..protocols.dependencies import get_file_hasher, get_file_reader_writer
 from ..service.dependencies import get_current_time, get_unique_id
 
-datafiles_router = APIRouter()
+datafiles_router = LightRouter()
 
 
 class MultipleDataFileSources(ErrorDetails):
diff --git a/robot-server/robot_server/deck_configuration/router.py b/robot-server/robot_server/deck_configuration/router.py
index 77ad38a3975..ce80acafb2a 100644
--- a/robot-server/robot_server/deck_configuration/router.py
+++ b/robot-server/robot_server/deck_configuration/router.py
@@ -6,6 +6,7 @@
 
 import fastapi
 from starlette.status import HTTP_422_UNPROCESSABLE_ENTITY
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from opentrons_shared_data.deck.types import DeckDefinitionV5
 
@@ -21,7 +22,7 @@
 from .store import DeckConfigurationStore
 
 
-router = fastapi.APIRouter()
+router = LightRouter()
 
 
 @PydanticResponse.wrap_route(
diff --git a/robot-server/robot_server/error_recovery/settings/router.py b/robot-server/robot_server/error_recovery/settings/router.py
index 27dde185f0b..d3c4467a301 100644
--- a/robot-server/robot_server/error_recovery/settings/router.py
+++ b/robot-server/robot_server/error_recovery/settings/router.py
@@ -4,13 +4,14 @@
 from typing import Annotated
 
 import fastapi
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from robot_server.service.json_api import PydanticResponse, RequestModel, SimpleBody
 from .models import RequestData, ResponseData
 from .store import ErrorRecoverySettingStore, get_error_recovery_setting_store
 
 
-router = fastapi.APIRouter()
+router = LightRouter()
 _PATH = "/errorRecovery/settings"
 
 
diff --git a/robot-server/robot_server/instruments/router.py b/robot-server/robot_server/instruments/router.py
index e059876eb37..d0cc4a212ed 100644
--- a/robot-server/robot_server/instruments/router.py
+++ b/robot-server/robot_server/instruments/router.py
@@ -1,7 +1,8 @@
 """Instruments routes."""
 from typing import Annotated, Optional, Dict, List, cast
 
-from fastapi import APIRouter, status, Depends
+from fastapi import status, Depends
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from opentrons.hardware_control.instruments.ot3.instrument_calibration import (
     PipetteOffsetSummary,
@@ -50,7 +51,7 @@
 
 from opentrons.hardware_control import OT3HardwareControlAPI
 
-instruments_router = APIRouter()
+instruments_router = LightRouter()
 
 
 def _pipette_dict_to_pipette_res(
diff --git a/robot-server/robot_server/labware_offsets/router.py b/robot-server/robot_server/labware_offsets/router.py
index 241f5b31505..6aca03e4b18 100644
--- a/robot-server/robot_server/labware_offsets/router.py
+++ b/robot-server/robot_server/labware_offsets/router.py
@@ -6,6 +6,8 @@
 from typing import Annotated, Literal
 
 import fastapi
+from server_utils.fastapi_utils.light_router import LightRouter
+
 from opentrons.protocol_engine import LabwareOffset, LabwareOffsetCreate, ModuleModel
 from opentrons.types import DeckSlotName
 
@@ -24,12 +26,12 @@
 from .fastapi_dependencies import get_labware_offset_store
 
 
-router = fastapi.APIRouter(prefix="/labwareOffsets")
+router = LightRouter()
 
 
 @PydanticResponse.wrap_route(
     router.post,
-    path="",
+    path="/labwareOffsets",
     summary="Store a labware offset",
     description=textwrap.dedent(
         """\
@@ -63,7 +65,7 @@ async def post_labware_offset(  # noqa: D103
 
 @PydanticResponse.wrap_route(
     router.get,
-    path="",
+    path="/labwareOffsets",
     summary="Search for labware offsets",
     description=(
         "Get a filtered list of all the labware offsets currently stored on the robot."
@@ -158,7 +160,7 @@ async def get_labware_offsets(  # noqa: D103
 
 @PydanticResponse.wrap_route(
     router.delete,
-    path="/{id}",
+    path="/labwareOffsets/{id}",
     summary="Delete a single labware offset",
     description="Delete a single labware offset. The deleted offset is returned.",
 )
@@ -181,7 +183,7 @@ async def delete_labware_offset(  # noqa: D103
 
 @PydanticResponse.wrap_route(
     router.delete,
-    path="",
+    path="/labwareOffsets",
     summary="Delete all labware offsets",
 )
 async def delete_all_labware_offsets(  # noqa: D103
diff --git a/robot-server/robot_server/maintenance_runs/router/__init__.py b/robot-server/robot_server/maintenance_runs/router/__init__.py
index 11cdd30950c..b017a0a6adf 100644
--- a/robot-server/robot_server/maintenance_runs/router/__init__.py
+++ b/robot-server/robot_server/maintenance_runs/router/__init__.py
@@ -1,12 +1,12 @@
 """Maintenance Runs router."""
-from fastapi import APIRouter
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from .base_router import base_router
 
 from .commands_router import commands_router
 from .labware_router import labware_router
 
-maintenance_runs_router = APIRouter()
+maintenance_runs_router = LightRouter()
 
 maintenance_runs_router.include_router(base_router)
 maintenance_runs_router.include_router(commands_router)
diff --git a/robot-server/robot_server/maintenance_runs/router/base_router.py b/robot-server/robot_server/maintenance_runs/router/base_router.py
index 6f6abaf89b5..3dd2060c2cd 100644
--- a/robot-server/robot_server/maintenance_runs/router/base_router.py
+++ b/robot-server/robot_server/maintenance_runs/router/base_router.py
@@ -8,8 +8,9 @@
 from typing import Annotated, Optional, Callable
 from typing_extensions import Literal
 
-from fastapi import APIRouter, Depends, status
+from fastapi import Depends, status
 from pydantic import BaseModel, Field
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from robot_server.errors.error_responses import ErrorDetails, ErrorBody
 from robot_server.service.dependencies import get_current_time, get_unique_id
@@ -42,7 +43,7 @@
 from robot_server.service.notifications import get_pe_notify_publishers
 
 log = logging.getLogger(__name__)
-base_router = APIRouter()
+base_router = LightRouter()
 
 
 # TODO (spp, 2023-04-10): move all error types from maintenance & regular runs
diff --git a/robot-server/robot_server/maintenance_runs/router/commands_router.py b/robot-server/robot_server/maintenance_runs/router/commands_router.py
index 6e043006ec3..0bb3d64c192 100644
--- a/robot-server/robot_server/maintenance_runs/router/commands_router.py
+++ b/robot-server/robot_server/maintenance_runs/router/commands_router.py
@@ -3,7 +3,8 @@
 from typing import Annotated, Optional, Union
 from typing_extensions import Final, Literal
 
-from fastapi import APIRouter, Depends, Query, status
+from fastapi import Depends, Query, status
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from opentrons.protocol_engine import (
     CommandPointer,
@@ -39,7 +40,7 @@
 
 _DEFAULT_COMMAND_LIST_LENGTH: Final = 20
 
-commands_router = APIRouter()
+commands_router = LightRouter()
 
 
 class CommandNotFound(ErrorDetails):
diff --git a/robot-server/robot_server/maintenance_runs/router/labware_router.py b/robot-server/robot_server/maintenance_runs/router/labware_router.py
index 938cee77af7..100fafe910a 100644
--- a/robot-server/robot_server/maintenance_runs/router/labware_router.py
+++ b/robot-server/robot_server/maintenance_runs/router/labware_router.py
@@ -1,7 +1,9 @@
 """Router for /maintenance_runs endpoints dealing with labware offsets and definitions."""
 from typing import Annotated
 import logging
-from fastapi import APIRouter, Depends, status
+
+from fastapi import Depends, status
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from opentrons.protocol_engine import LabwareOffsetCreate, LabwareOffset
 from opentrons.protocols.models import LabwareDefinition
@@ -15,7 +17,7 @@
 from .base_router import RunNotFound, RunNotIdle, get_run_data_from_url
 
 log = logging.getLogger(__name__)
-labware_router = APIRouter()
+labware_router = LightRouter()
 
 
 @PydanticResponse.wrap_route(
diff --git a/robot-server/robot_server/modules/router.py b/robot-server/robot_server/modules/router.py
index 2f566eb7207..8bbf8a6ae7a 100644
--- a/robot-server/robot_server/modules/router.py
+++ b/robot-server/robot_server/modules/router.py
@@ -1,7 +1,9 @@
 """Modules routes."""
-from fastapi import APIRouter, Depends, status
 from typing import Annotated, List, Dict
 
+from fastapi import Depends, status
+from server_utils.fastapi_utils.light_router import LightRouter
+
 from opentrons.hardware_control import HardwareControlAPI
 from opentrons.hardware_control.modules import module_calibration
 from opentrons.protocol_engine.types import Vec3f
@@ -21,7 +23,7 @@
 from .module_identifier import ModuleIdentifier
 from .module_data_mapper import ModuleDataMapper
 
-modules_router = APIRouter()
+modules_router = LightRouter()
 
 
 @PydanticResponse.wrap_route(
diff --git a/robot-server/robot_server/protocols/router.py b/robot-server/robot_server/protocols/router.py
index 28294f99c7d..574f9621004 100644
--- a/robot-server/robot_server/protocols/router.py
+++ b/robot-server/robot_server/protocols/router.py
@@ -15,7 +15,6 @@
 from opentrons.util.performance_helpers import TrackingFunctions
 
 from fastapi import (
-    APIRouter,
     Depends,
     File,
     HTTPException,
@@ -26,6 +25,7 @@
 )
 from fastapi.responses import PlainTextResponse
 from pydantic import BaseModel, Field
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from opentrons.protocol_reader import (
     ProtocolReader,
@@ -151,7 +151,7 @@ class ProtocolLinks(BaseModel):
     )
 
 
-protocols_router = APIRouter()
+protocols_router = LightRouter()
 
 
 @PydanticResponse.wrap_route(
diff --git a/robot-server/robot_server/robot/control/router.py b/robot-server/robot_server/robot/control/router.py
index a39e7fcab7e..037ef1dc96a 100644
--- a/robot-server/robot_server/robot/control/router.py
+++ b/robot-server/robot_server/robot/control/router.py
@@ -1,7 +1,9 @@
 """Router for /robot/control endpoints."""
-from fastapi import APIRouter, status, Depends
 from typing import Annotated, TYPE_CHECKING
 
+from fastapi import status, Depends
+from server_utils.fastapi_utils.light_router import LightRouter
+
 from opentrons_shared_data.robot.types import RobotType
 from opentrons_shared_data.robot.types import RobotTypeEnum
 from robot_server.hardware import get_robot_type
@@ -22,7 +24,7 @@
 if TYPE_CHECKING:
     from opentrons.hardware_control.ot3api import OT3API  # noqa: F401
 
-control_router = APIRouter()
+control_router = LightRouter()
 
 
 async def _get_estop_status_response(
diff --git a/robot-server/robot_server/robot/router.py b/robot-server/robot_server/robot/router.py
index 9fff861d4a6..6c6dd6acc05 100644
--- a/robot-server/robot_server/robot/router.py
+++ b/robot-server/robot_server/robot/router.py
@@ -1,8 +1,8 @@
 """Router for /robot endpoints."""
-from fastapi import APIRouter
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from .control.router import control_router
 
-robot_router = APIRouter()
+robot_router = LightRouter()
 
 robot_router.include_router(router=control_router)
diff --git a/robot-server/robot_server/router.py b/robot-server/robot_server/router.py
index 49d835d7eb9..ab5af067637 100644
--- a/robot-server/robot_server/router.py
+++ b/robot-server/robot_server/router.py
@@ -1,5 +1,7 @@
 """Application routes."""
-from fastapi import APIRouter, Depends, status
+from fastapi import Depends, status
+from server_utils.fastapi_utils.light_router import LightRouter
+
 
 from .constants import V1_TAG
 from .errors.error_responses import LegacyErrorResponse
@@ -26,24 +28,31 @@
 from .subsystems.router import subsystems_router
 from .system.router import system_router
 
-router = APIRouter()
+router = LightRouter()
 
 # Legacy routes
 router.include_router(
     router=legacy_routes,
     tags=[V1_TAG],
+    # todo(mm, 2024-12-19): This `responses` setting is preventing us from
+    # porting legacy_routes from fastapi.APIRouter to our LightRouter.
+    # Either teach LightRouter how to handle `responses` or stop doing
+    # a custom 422 response on these endpoints.
     responses={
         status.HTTP_422_UNPROCESSABLE_ENTITY: {
             "model": LegacyErrorResponse,
         }
     },
 )
-
 router.include_router(
     router=health_router,
     tags=["Health", V1_TAG],
     dependencies=[Depends(check_version_header)],
     responses={
+        # todo(mm, 2024-12-19): This `responses` setting is preventing us from
+        # porting health_router from fastapi.APIRouter to our LightRouter.
+        # Either teach LightRouter how to handle `responses` or stop doing
+        # a custom 422 response on these endpoints.
         status.HTTP_422_UNPROCESSABLE_ENTITY: {
             "model": LegacyErrorResponse,
         }
diff --git a/robot-server/robot_server/runs/router/__init__.py b/robot-server/robot_server/runs/router/__init__.py
index d7a1640edb8..fa8be0cee67 100644
--- a/robot-server/robot_server/runs/router/__init__.py
+++ b/robot-server/robot_server/runs/router/__init__.py
@@ -1,5 +1,5 @@
 """Runs router."""
-from fastapi import APIRouter
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from .base_router import base_router
 from .commands_router import commands_router
@@ -7,7 +7,7 @@
 from .labware_router import labware_router
 from .error_recovery_policy_router import error_recovery_policy_router
 
-runs_router = APIRouter()
+runs_router = LightRouter()
 
 runs_router.include_router(base_router)
 runs_router.include_router(commands_router)
diff --git a/robot-server/robot_server/runs/router/actions_router.py b/robot-server/robot_server/runs/router/actions_router.py
index 80a461f3b59..0bfb16185c7 100644
--- a/robot-server/robot_server/runs/router/actions_router.py
+++ b/robot-server/robot_server/runs/router/actions_router.py
@@ -1,10 +1,12 @@
 """Router for /runs actions endpoints."""
 import logging
 
-from fastapi import APIRouter, Depends, status
 from datetime import datetime
 from typing import Annotated, Literal, Union
 
+from fastapi import Depends, status
+from server_utils.fastapi_utils.light_router import LightRouter
+
 from robot_server.errors.error_responses import ErrorDetails, ErrorBody
 from robot_server.service.dependencies import get_current_time, get_unique_id
 from robot_server.service.json_api import RequestModel, SimpleBody, PydanticResponse
@@ -37,7 +39,7 @@
 )
 
 log = logging.getLogger(__name__)
-actions_router = APIRouter()
+actions_router = LightRouter()
 
 
 class RunActionNotAllowed(ErrorDetails):
diff --git a/robot-server/robot_server/runs/router/base_router.py b/robot-server/robot_server/runs/router/base_router.py
index c51c02de1e4..8e478c08de9 100644
--- a/robot-server/robot_server/runs/router/base_router.py
+++ b/robot-server/robot_server/runs/router/base_router.py
@@ -8,8 +8,10 @@
 from textwrap import dedent
 from typing import Annotated, Callable, Final, Literal, Optional, Union
 
-from fastapi import APIRouter, Depends, status, Query
+from fastapi import Depends, status, Query
 from pydantic import BaseModel, Field
+from server_utils.fastapi_utils.light_router import LightRouter
+
 
 from opentrons_shared_data.errors import ErrorCodes
 from opentrons_shared_data.robot.types import RobotTypeEnum
@@ -87,7 +89,7 @@
 from robot_server.service.notifications import get_pe_notify_publishers
 
 log = logging.getLogger(__name__)
-base_router = APIRouter()
+base_router = LightRouter()
 
 _DEFAULT_COMMAND_ERROR_LIST_LENGTH: Final = 20
 
diff --git a/robot-server/robot_server/runs/router/commands_router.py b/robot-server/robot_server/runs/router/commands_router.py
index 55e1826d5e8..b2cbb79b2bb 100644
--- a/robot-server/robot_server/runs/router/commands_router.py
+++ b/robot-server/robot_server/runs/router/commands_router.py
@@ -2,7 +2,8 @@
 import textwrap
 from typing import Annotated, Final, Literal, Optional, Union
 
-from fastapi import APIRouter, Depends, Query, status
+from fastapi import Depends, Query, status
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from opentrons.protocol_engine import (
     CommandPointer,
@@ -44,7 +45,7 @@
 
 _DEFAULT_COMMAND_LIST_LENGTH: Final = 20
 
-commands_router = APIRouter()
+commands_router = LightRouter()
 
 
 class CommandNotFound(ErrorDetails):
diff --git a/robot-server/robot_server/runs/router/error_recovery_policy_router.py b/robot-server/robot_server/runs/router/error_recovery_policy_router.py
index a5c3ae0543d..2b1c786b9d4 100644
--- a/robot-server/robot_server/runs/router/error_recovery_policy_router.py
+++ b/robot-server/robot_server/runs/router/error_recovery_policy_router.py
@@ -4,7 +4,8 @@
 from textwrap import dedent
 from typing import Annotated
 
-from fastapi import status, APIRouter, Depends
+from fastapi import status, Depends
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from robot_server.errors.error_responses import ErrorBody
 from robot_server.service.json_api.request import RequestModel
@@ -20,7 +21,7 @@
 from ..error_recovery_models import ErrorRecoveryPolicy
 
 
-error_recovery_policy_router = APIRouter()
+error_recovery_policy_router = LightRouter()
 
 
 @PydanticResponse.wrap_route(
diff --git a/robot-server/robot_server/runs/router/labware_router.py b/robot-server/robot_server/runs/router/labware_router.py
index 2a0396b3b86..06c16f8b71a 100644
--- a/robot-server/robot_server/runs/router/labware_router.py
+++ b/robot-server/robot_server/runs/router/labware_router.py
@@ -3,12 +3,14 @@
 import logging
 from typing import Annotated, Union
 
-from fastapi import APIRouter, Depends, status
+from fastapi import Depends, status
 
 from opentrons_shared_data.labware.labware_definition import (
     LabwareDefinition as SD_LabwareDefinition,
 )
 
+from server_utils.fastapi_utils.light_router import LightRouter
+
 from opentrons.protocol_engine import LabwareOffsetCreate, LabwareOffset
 from opentrons.protocols.models import LabwareDefinition
 
@@ -26,7 +28,7 @@
 from .base_router import RunNotFound, RunStopped, RunNotIdle, get_run_data_from_url
 
 log = logging.getLogger(__name__)
-labware_router = APIRouter()
+labware_router = LightRouter()
 
 
 @PydanticResponse.wrap_route(
diff --git a/robot-server/robot_server/service/labware/router.py b/robot-server/robot_server/service/labware/router.py
index a90ed1ca867..6d44f2faeee 100644
--- a/robot-server/robot_server/service/labware/router.py
+++ b/robot-server/robot_server/service/labware/router.py
@@ -6,7 +6,8 @@
 from typing import Annotated, Optional
 from typing_extensions import Literal, NoReturn
 
-from fastapi import APIRouter, Depends, status
+from fastapi import Depends, status
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from opentrons_shared_data.errors import ErrorCodes
 from robot_server.errors.error_responses import ErrorDetails, ErrorBody
@@ -15,7 +16,7 @@
 from robot_server.service.errors import RobotServerError, CommonErrorDef
 
 
-router = APIRouter()
+router = LightRouter()
 
 
 class LabwareCalibrationEndpointsRemoved(ErrorDetails):
diff --git a/robot-server/robot_server/subsystems/router.py b/robot-server/robot_server/subsystems/router.py
index 0ce265cc7e6..950cf0505e2 100644
--- a/robot-server/robot_server/subsystems/router.py
+++ b/robot-server/robot_server/subsystems/router.py
@@ -3,9 +3,11 @@
 from datetime import datetime
 from typing import Annotated, Optional, TYPE_CHECKING
 
-from fastapi import APIRouter, status, Depends, Response, Request
+from fastapi import status, Depends, Response, Request
 from typing_extensions import Literal
 
+from server_utils.fastapi_utils.light_router import LightRouter
+
 from robot_server.service.json_api import (
     SimpleMultiBody,
     PydanticResponse,
@@ -45,7 +47,7 @@
 if TYPE_CHECKING:
     from opentrons.hardware_control.ot3api import OT3API  # noqa: F401
 
-subsystems_router = APIRouter()
+subsystems_router = LightRouter()
 
 
 def status_route_for(subsystem: SubSystem) -> str:
diff --git a/robot-server/robot_server/system/router.py b/robot-server/robot_server/system/router.py
index fab9b598ba3..2735dfca01d 100644
--- a/robot-server/robot_server/system/router.py
+++ b/robot-server/robot_server/system/router.py
@@ -5,7 +5,8 @@
 - /system/time: allows the client to read & update robot system time
 """
 from datetime import datetime
-from fastapi import APIRouter
+
+from server_utils.fastapi_utils.light_router import LightRouter
 
 from robot_server.service.json_api.resource_links import ResourceLinkKey, ResourceLink
 
@@ -13,7 +14,7 @@
 from .time_utils import get_system_time, set_system_time
 
 
-system_router = APIRouter()
+system_router = LightRouter()
 """Router for /system endpoints."""
 
 
diff --git a/server-utils/server_utils/fastapi_utils/light_router.py b/server-utils/server_utils/fastapi_utils/light_router.py
new file mode 100644
index 00000000000..82d82893151
--- /dev/null
+++ b/server-utils/server_utils/fastapi_utils/light_router.py
@@ -0,0 +1,306 @@
+"""See the `LightRouter` class."""
+
+from __future__ import annotations
+
+import dataclasses
+import enum
+import typing
+import typing_extensions
+
+import fastapi
+
+
+_FASTAPI_ROUTE_METHOD_NAMES = {
+    "get",
+    "put",
+    "post",
+    "delete",
+    "options",
+    "head",
+    "patch",
+    "trace",
+}
+
+if typing.TYPE_CHECKING:
+    # This is some chicanery so that @router.get(...), @router.post(...), etc. give us
+    # type-checking and autocomplete that exactly match the regular FastAPI version.
+    # These methods have a lot of parameters with complicated types and it would be
+    # a bear to manually keep them in sync with FastAPI.
+
+    _P = typing.ParamSpec("_P")
+    _ReturnT = typing.TypeVar("_ReturnT")
+
+    # `_CallableLike(FastAPI.foo)` produces a callable with the same signature
+    # as `FastAPI.foo()`.
+    class _CallableLike(typing.Generic[_P, _ReturnT]):
+        def __init__(
+            self,
+            method_to_mimic: typing.Callable[
+                typing.Concatenate[
+                    fastapi.FastAPI,  # The `self` parameter, which we throw away.
+                    _P,  # The actual args and kwargs, which we preserve.
+                ],
+                _ReturnT,
+            ],
+        ) -> None:
+            raise NotImplementedError("This is only for type-checking, not runtime.")
+
+        def __call__(self, *args: _P.args, **kwargs: _P.kwargs) -> _ReturnT:
+            raise NotImplementedError("This is only for type-checking, not runtime.")
+
+    class _FastAPIRouteMethods:
+        get: typing.Final = _CallableLike(fastapi.FastAPI.get)
+        put: typing.Final = _CallableLike(fastapi.FastAPI.put)
+        post: typing.Final = _CallableLike(fastapi.FastAPI.post)
+        delete: typing.Final = _CallableLike(fastapi.FastAPI.delete)
+        options: typing.Final = _CallableLike(fastapi.FastAPI.options)
+        head: typing.Final = _CallableLike(fastapi.FastAPI.head)
+        patch: typing.Final = _CallableLike(fastapi.FastAPI.patch)
+        trace: typing.Final = _CallableLike(fastapi.FastAPI.trace)
+
+else:
+
+    class _FastAPIRouteMethods:
+        pass
+
+
+class LightRouter(_FastAPIRouteMethods):
+    """A lightweight drop-in replacement for `fastapi.APIRouter`.
+
+    Use it like `fastapi.APIRouter`:
+
+        foo_router = LightRouter()
+
+        @router.get("/foo/{id}")
+        def get_health(id: str) -> Response:
+            ...
+
+        bar_router = ...
+
+        root_router = LightRouter()
+        root_router.include_router(foo_router)
+        root_router.include_router(bar_router)
+
+        app = fastapi.FastAPI()
+        root_router.install_on_app(app)
+
+    Rationale:
+
+    With FastAPI's standard `FastAPI` and `APIRouter` classes, the `.include_router()`
+    method has a lot of overhead, accounting for something like 30-40% of
+    robot-server's startup time, which is multiple minutes long at the time of writing.
+    (https://github.com/pydantic/pydantic/issues/6768#issuecomment-1644532429)
+
+    We could avoid the overhead by adding endpoints directly to the top-level FastAPI
+    app, "flat," instead of using `.include_router()`. But that would be bad for code
+    organization; we want to keep our tree of sub-routers. So this class reimplements
+    the important parts of `fastapi.APIRouter`, so we can keep our router tree, but
+    in a lighter-weight way.
+
+    When you call `@router.get()` or `router.include_router()` on this class, it appends
+    to a lightweight internal structure and completely avoids slow calls into FastAPI.
+    Later on, when you do `router.install_on_app()`, everything in the tree is added to
+    the FastAPI app.
+    """
+
+    def __init__(self) -> None:
+        self._routes: list[_Endpoint | _IncludedRouter] = []
+
+    def __getattr__(self, name: str) -> object:
+        """Supply the optimized version of `@router.get()`, `@router.post()`, etc.
+
+        See the FastAPI docs for usage details.
+        """
+        if name in _FASTAPI_ROUTE_METHOD_NAMES:
+            return _EndpointCaptor(method_name=name, on_capture=self._routes.append)
+        else:
+            raise AttributeError(name=name)
+
+    def include_router(
+        self,
+        router: LightRouter | fastapi.APIRouter,
+        **kwargs: typing_extensions.Unpack[_RouterIncludeKwargs],
+    ) -> None:
+        """The optimized version of `fastapi.APIRouter.include_router()`.
+
+        See the FastAPI docs for argument details.
+        """  # noqa: D402
+        self._routes.append(_IncludedRouter(router=router, inclusion_kwargs=kwargs))
+
+    def install_on_app(
+        self,
+        app: fastapi.FastAPI,
+        **kwargs: typing_extensions.Unpack[_RouterIncludeKwargs],
+    ) -> None:
+        """The optimized version of `fastapi.FastAPI.include_router()`.
+
+        See the FastAPI docs for argument details..
+        """
+        for route in self._routes:
+            if isinstance(route, _IncludedRouter):
+                router = route.router
+                combined_kwargs = _merge_kwargs(kwargs, route.inclusion_kwargs)
+                if isinstance(router, fastapi.APIRouter):
+                    app.include_router(router, **combined_kwargs)
+                elif isinstance(route.router, LightRouter):
+                    router.install_on_app(app, **combined_kwargs)
+            else:
+                typing_extensions.assert_type(route, _Endpoint)
+                combined_kwargs = _merge_kwargs(
+                    kwargs,
+                    route.kwargs,  # type: ignore[arg-type]
+                )
+                fastapi_method = getattr(app, route.method_name)
+                fastapi_decorator = fastapi_method(*route.args, **combined_kwargs)
+                fastapi_decorator(route.function)
+
+
+class _RouterIncludeKwargs(typing.TypedDict):
+    """The keyword arguments of FastAPI's `.include_router()` method.
+
+    (At least the arguments that we actually use, anyway.)
+    """
+
+    # Arguments with defaults should be annotated as `NotRequired`.
+    # For example, `foo: str | None = None` becomes `NotRequired[str | None]`.
+
+    tags: typing_extensions.NotRequired[list[str | enum.Enum] | None]
+    responses: typing_extensions.NotRequired[
+        dict[int | str, dict[str, typing.Any]] | None
+    ]
+    dependencies: typing_extensions.NotRequired[
+        typing.Sequence[
+            # FastAPI does not publicly expose the type of the result of a
+            # Depends(...) call, so this needs to be Any.
+            typing.Any
+        ]
+        | None
+    ]
+
+
+def _merge_kwargs(
+    from_parent: _RouterIncludeKwargs, from_child: _RouterIncludeKwargs
+) -> _RouterIncludeKwargs:
+    """Merge kwargs from different levels of a FastAPI router tree.
+
+    FastAPI keyword arguments can be specified at multiple levels in the router tree.
+    For example, the top-level router, subrouters, and finally the endpoint function
+    can each specify their own `tags`. The different levels need to be merged
+    carefully and in argument-specific ways if we want to match FastAPI behavior.
+    For example, the final `tags` value should be the concatenation of the values
+    from all levels.
+    """
+    merge_result: _RouterIncludeKwargs = {}
+    remaining_from_parent = from_parent.copy()
+    remaining_from_child = from_child.copy()
+
+    # When we know how to merge a specific argument's values, do so.
+    # This takes care to leave the argument unset if it's unset in both parent and
+    # child, in order to leave the defaulting up to FastAPI.
+    if "tags" in remaining_from_parent or "tags" in remaining_from_child:
+        merge_result["tags"] = [
+            *(remaining_from_parent.get("tags") or []),
+            *(remaining_from_child.get("tags") or []),
+        ]
+        remaining_from_parent.pop("tags", None)
+        remaining_from_child.pop("tags", None)
+
+    # For any argument whose values we don't know how to merge, we can just pass it
+    # along opaquely, as long as the parent and child aren't both trying to set it.
+    #
+    # If the parent and child *are* both trying to set it, then we have a problem.
+    # It would likely be wrong to arbitrarily choose one to override the other,
+    # so we can only raise an error.
+    colliding_keys = set(remaining_from_parent.keys()).intersection(
+        remaining_from_child.keys()
+    )
+    if not colliding_keys:
+        merge_result.update(remaining_from_parent)
+        merge_result.update(remaining_from_child)
+    else:
+        a_collisions: dict[object, object] = {
+            k: remaining_from_parent[k] for k in colliding_keys  # type: ignore[literal-required]
+        }
+        b_collisions: dict[object, object] = {
+            k: remaining_from_child[k] for k in colliding_keys  # type: ignore[literal-required]
+        }
+        raise NotImplementedError(
+            f"These FastAPI keyword arguments appear at different levels "
+            f"in the router tree, and we don't know how to merge their values:\n"
+            f"{a_collisions}\n{b_collisions}\n"
+            f"Modify {__name__} to handle the merge, or avoid the problem by "
+            f"setting the argument at only one level of the router tree."
+        )
+
+    return merge_result
+
+
+@dataclasses.dataclass
+class _IncludedRouter:
+    router: fastapi.APIRouter | LightRouter
+    inclusion_kwargs: _RouterIncludeKwargs
+
+
+_DecoratedFunctionT = typing.TypeVar(
+    "_DecoratedFunctionT", bound=typing.Callable[..., object]
+)
+
+
+class _EndpointCaptor:
+    """A callable that pretends to be a FastAPI path operation decorator.
+
+    `method_name` is the FastAPI method to pretend to be, e.g. "get" or "post".
+
+    Supposing you have an `_EndpointCaptor` named `get`, when this whole enchilada
+    happens:
+
+        @get("/foo/{id}", description="blah blah")
+        def get_some_endpoint(id: str) -> Response:
+            ...
+
+    Then information about the whole enchilada is sent to the `on_capture` callback.
+    """
+
+    def __init__(
+        self,
+        method_name: str,
+        on_capture: typing.Callable[[_Endpoint], None],
+    ) -> None:
+        self._method_name = method_name
+        self._on_capture = on_capture
+
+    def __call__(
+        self, *fastapi_decorator_args: object, **fastapi_decorator_kwargs: object
+    ) -> typing.Callable[[_DecoratedFunctionT], _DecoratedFunctionT]:
+        def decorate(decorated_function: _DecoratedFunctionT) -> _DecoratedFunctionT:
+            self._on_capture(
+                _Endpoint(
+                    method_name=self._method_name,
+                    args=fastapi_decorator_args,
+                    kwargs=fastapi_decorator_kwargs,
+                    function=decorated_function,
+                )
+            )
+            return decorated_function
+
+        return decorate
+
+
+@dataclasses.dataclass
+class _Endpoint:
+    """Information about an endpoint that's been added to a router."""
+
+    method_name: str
+    """The name of the method on the FastAPI class, e.g. "get"."""
+
+    args: tuple[object, ...]
+    """The positional arguments passed to the FastAPI method, e.g. the URL path."""
+
+    kwargs: dict[str, object]
+    """The keyword arguments passed to the FastAPI method, e.g. `description`."""
+
+    function: typing.Callable[..., object]
+    """The function actually implementing the logic of the endpoint.
+
+    (The "path operation function", in FastAPI terms.)
+    """

From dd1359fed986835ebc1cd6e267513f11cc8dbd89 Mon Sep 17 00:00:00 2001
From: koji <koji.kanao@opentrons.com>
Date: Mon, 23 Dec 2024 19:14:44 -0500
Subject: [PATCH 16/18] chore(components): clean up react imports (#17176)

* chore(components): clean up react imports
---
 components/src/alerts/AlertItem.tsx           |  6 ++---
 .../Checkbox/__tests__/Checkbox.test.tsx      |  7 +++---
 components/src/atoms/Checkbox/index.tsx       |  5 ++--
 .../__tests__/CheckboxField.test.tsx          |  7 +++---
 components/src/atoms/CheckboxField/index.tsx  |  9 +++----
 .../src/atoms/Chip/__tests__/Chip.test.tsx    |  9 +++----
 components/src/atoms/Divider/index.tsx        |  5 ++--
 .../InputField/__tests__/InputField.test.tsx  |  7 +++---
 components/src/atoms/InputField/index.tsx     |  3 ++-
 .../ListButtonAccordion.tsx                   |  5 ++--
 .../ListButtonAccordionContainer.tsx          |  5 ++--
 .../ListButton/__tests__/ListButton.test.tsx  |  7 +++---
 .../__tests__/ListButtonAccordion.test.tsx    |  7 +++---
 .../__tests__/ListButtonRadioButton.test.tsx  |  7 +++---
 components/src/atoms/ListButton/index.tsx     |  5 ++--
 .../ListItem/__tests__/ListItem.test.tsx      |  7 +++---
 components/src/atoms/ListItem/index.tsx       |  5 ++--
 components/src/atoms/MenuList/OverflowBtn.tsx | 12 ++++++----
 .../MenuList/__tests__/MenuItem.test.tsx      |  7 +++---
 .../MenuList/__tests__/MenuList.test.tsx      |  7 +++---
 .../MenuList/__tests__/OverflowBtn.test.tsx   |  5 ++--
 components/src/atoms/MenuList/index.tsx       |  8 +++----
 .../Snackbar/__tests__/Snackbar.test.tsx      |  7 +++---
 .../src/atoms/StyledText/LegacyStyledText.tsx |  6 ++---
 .../src/atoms/StyledText/StyledText.tsx       |  6 ++---
 .../src/atoms/Tag/__tests__/Tag.test.tsx      |  7 +++---
 .../atoms/Toast/__tests__/ODDToast.test.tsx   |  7 +++---
 .../src/atoms/Toast/__tests__/Toast.test.tsx  |  7 +++---
 .../__tests__/ToggleGroup.test.tsx            |  7 +++---
 .../atoms/Tooltip/__tests__/Tooltip.test.tsx  |  9 +++----
 components/src/atoms/Tooltip/index.tsx        |  5 ++--
 components/src/atoms/buttons/LargeButton.tsx  |  4 ++--
 components/src/atoms/buttons/RadioButton.tsx  |  9 +++----
 .../__tests__/AlertPrimaryButton.test.tsx     |  7 +++---
 .../__tests__/AltPrimaryButton.test.tsx       |  7 +++---
 .../__tests__/EmptySelectorButton.test.tsx    |  7 +++---
 .../buttons/__tests__/LargeButton.test.tsx    |  7 +++---
 .../buttons/__tests__/PrimaryButton.test.tsx  |  7 +++---
 .../buttons/__tests__/RadioButton.test.tsx    |  7 +++---
 .../__tests__/SecondaryButton.test.tsx        |  7 +++---
 components/src/buttons/Button.tsx             |  8 +++----
 components/src/controls/ControlInfo.tsx       |  6 ++---
 components/src/controls/LabeledButton.tsx     |  4 ++--
 components/src/controls/LabeledCheckbox.tsx   |  7 +++---
 components/src/controls/LabeledControl.tsx    |  8 +++----
 components/src/controls/LabeledRadioGroup.tsx |  5 ++--
 components/src/controls/LabeledToggle.tsx     |  6 ++---
 .../src/controls/StackedLabeledControl.tsx    |  8 +++----
 .../src/forms/DeprecatedCheckboxField.tsx     |  7 +++---
 components/src/forms/FormGroup.tsx            |  5 ++--
 components/src/forms/LegacyInputField.tsx     | 18 +++++++++-----
 components/src/forms/RadioGroup.tsx           |  9 +++----
 components/src/forms/SelectField.tsx          |  6 ++---
 components/src/forms/ToggleField.tsx          |  5 ++--
 .../BaseDeck/SingleSlotFixture.tsx            |  9 ++++---
 .../src/hardware-sim/BaseDeck/SlotBase.tsx    |  4 ++--
 .../src/hardware-sim/BaseDeck/SlotClip.tsx    |  6 ++---
 .../BaseDeck/StagingAreaFixture.tsx           |  9 ++++---
 .../BaseDeck/WasteChuteFixture.tsx            |  8 +++----
 .../BaseDeck/WasteChuteStagingAreaFixture.tsx | 10 ++++----
 .../hardware-sim/Deck/MoveLabwareOnDeck.tsx   | 18 +++++++-------
 .../Deck/RobotCoordsForeignDiv.tsx            |  7 +++---
 .../Deck/RobotCoordsForeignObject.tsx         |  9 +++----
 .../src/hardware-sim/Deck/RobotCoordsText.tsx |  7 +++---
 .../hardware-sim/DeckConfigurator/index.tsx   |  5 ++--
 .../hardware-sim/DeckSlotLocation/index.tsx   |  8 +++----
 .../src/hardware-sim/Labware/Labware.tsx      | 12 ++++++----
 .../hardware-sim/Labware/LabwareRender.tsx    |  5 ++--
 .../Labware/LabwareStackRender.tsx            |  5 ++--
 .../Labware/labwareInternals/FilledWells.tsx  | 12 ++++++----
 .../labwareInternals/LabwareOutline.tsx       |  4 ++--
 .../labwareInternals/LabwareWellLabels.tsx    |  9 +++----
 .../labwareInternals/StaticLabware.tsx        | 13 +++++-----
 .../Labware/labwareInternals/StrokedWells.tsx | 14 ++++++-----
 .../Labware/labwareInternals/StyledWells.tsx  | 14 ++++++-----
 .../Labware/labwareInternals/Well.tsx         | 21 ++++++++--------
 .../Labware/labwareInternals/WellLabels.tsx   | 10 ++++----
 .../Labware/labwareInternals/types.ts         |  4 ++--
 .../src/hardware-sim/Module/ModuleTag.tsx     |  5 ++--
 components/src/hardware-sim/Module/index.tsx  | 20 +++++++---------
 .../Pipette/__tests__/PipetteRender.test.tsx  |  6 ++---
 .../hardware-sim/ProtocolDeck/LabwareInfo.tsx |  5 ++--
 .../src/hardware-sim/ProtocolDeck/index.tsx   |  5 ++--
 .../RobotCoordinateSpace.tsx                  |  5 ++--
 .../RobotCoordinateSpaceWithRef.tsx           |  5 ++--
 components/src/hooks/useDrag.ts               |  2 +-
 components/src/hooks/useInterval.ts           |  5 ++--
 components/src/icons/Icon.tsx                 |  4 ++--
 components/src/instrument/InstrumentInfo.tsx  |  5 ++--
 .../__tests__/InstrumentInfo.test.tsx         |  7 +++---
 .../src/interaction-enhancers/ClickOutside.ts |  7 +++---
 .../interaction-enhancers/HandleKeypress.tsx  |  8 ++++---
 components/src/lists/SidePanelGroup.tsx       |  4 ++--
 components/src/lists/TitledList.tsx           | 24 +++++++++----------
 components/src/modals/AlertModal.tsx          |  6 ++---
 components/src/modals/LegacyModal.tsx         | 12 ++++++----
 components/src/modals/Modal.tsx               | 11 +++++----
 components/src/modals/ModalHeader.tsx         |  9 +++----
 components/src/modals/ModalShell.tsx          | 14 +++++------
 components/src/modals/Overlay.tsx             |  7 +++---
 components/src/modals/SpinnerModalPage.tsx    |  5 ++--
 .../src/modals/__tests__/Modal.test.tsx       |  7 +++---
 .../src/modals/__tests__/ModalHeader.test.tsx |  7 +++---
 .../src/modals/__tests__/ModalShell.test.tsx  |  7 +++---
 .../Banner/__tests__/Banner.test.tsx          |  7 +++---
 components/src/molecules/Banner/index.tsx     | 11 +++++----
 .../__tests__/DeckInfoLabel.test.tsx          |  7 +++---
 .../DeckLabel/__tests__/DeckLabel.test.tsx    |  6 +++--
 .../__tests__/DropdownMenu.test.tsx           |  7 +++---
 .../src/molecules/DropdownMenu/index.tsx      | 22 +++++++++--------
 .../InfoScreen/__tests__/InfoScreen.test.tsx  |  7 +++---
 .../LiquidIcon/__tests__/LiquidIcon.test.tsx  |  7 +++---
 .../__tests__/ParametersTable.test.tsx        |  6 ++---
 .../molecules/Tabs/__tests__/Tabs.test.tsx    |  7 +++---
 components/src/nav/SidePanel.tsx              |  5 ++--
 .../__tests__/DeckLabelSet.test.tsx           |  7 +++---
 .../src/organisms/DeckLabelSet/index.tsx      |  7 +++---
 .../Toolbox/__tests__/Toolbox.test.tsx        |  7 +++---
 components/src/organisms/Toolbox/index.tsx    |  4 +++-
 components/src/primitives/Btn.tsx             |  4 +++-
 components/src/primitives/ForeignObject.tsx   |  5 ++--
 components/src/primitives/Link.tsx            |  5 ++--
 components/src/primitives/Svg.tsx             |  3 ++-
 components/src/primitives/style-props.ts      |  4 +++-
 components/src/primitives/types.ts            |  4 ++--
 components/src/structure/Card.tsx             |  7 +++---
 components/src/structure/LabeledValue.tsx     |  8 +++----
 components/src/structure/Pill.tsx             |  4 ++--
 components/src/structure/TitleBar.tsx         |  9 ++++---
 .../src/testing/utils/renderWithProviders.tsx | 14 +++++++----
 components/src/tooltips/DeprecatedTooltip.tsx | 18 +++++++++-----
 components/src/tooltips/HoverTooltip.tsx      |  7 +++---
 components/src/tooltips/LegacyTooltip.tsx     | 14 +++++------
 components/src/tooltips/types.ts              |  8 +++----
 134 files changed, 561 insertions(+), 465 deletions(-)

diff --git a/components/src/alerts/AlertItem.tsx b/components/src/alerts/AlertItem.tsx
index 708f44f746c..4ef5eb04a8c 100644
--- a/components/src/alerts/AlertItem.tsx
+++ b/components/src/alerts/AlertItem.tsx
@@ -1,9 +1,9 @@
-import type * as React from 'react'
 import cx from 'classnames'
 import { Icon } from '../icons'
 import { IconButton } from '../buttons'
 import styles from './alerts.module.css'
 
+import type { ReactNode } from 'react'
 import type { IconProps } from '../icons'
 
 export type AlertType = 'success' | 'warning' | 'error' | 'info'
@@ -12,9 +12,9 @@ export interface AlertItemProps {
   /** name constant of the icon to display */
   type: AlertType
   /** title/main message of colored alert bar */
-  title: React.ReactNode
+  title: ReactNode
   /** Alert message body contents */
-  children?: React.ReactNode
+  children?: ReactNode
   /** Additional class name */
   className?: string
   /** optional handler to show close button/clear alert  */
diff --git a/components/src/atoms/Checkbox/__tests__/Checkbox.test.tsx b/components/src/atoms/Checkbox/__tests__/Checkbox.test.tsx
index cfee4c22835..1bc8265ad4f 100644
--- a/components/src/atoms/Checkbox/__tests__/Checkbox.test.tsx
+++ b/components/src/atoms/Checkbox/__tests__/Checkbox.test.tsx
@@ -1,16 +1,17 @@
-import type * as React from 'react'
 import { describe, beforeEach, afterEach, vi, expect, it } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
 import { renderWithProviders } from '../../../testing/utils'
 import { Checkbox } from '..'
 
-const render = (props: React.ComponentProps<typeof Checkbox>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Checkbox>) => {
   return renderWithProviders(<Checkbox {...props} />)[0]
 }
 
 describe('Checkbox', () => {
-  let props: React.ComponentProps<typeof Checkbox>
+  let props: ComponentProps<typeof Checkbox>
 
   beforeEach(() => {
     props = {
diff --git a/components/src/atoms/Checkbox/index.tsx b/components/src/atoms/Checkbox/index.tsx
index f4ae61dee1f..c5763665351 100644
--- a/components/src/atoms/Checkbox/index.tsx
+++ b/components/src/atoms/Checkbox/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import { COLORS, BORDERS } from '../../helix-design-system'
 import { Flex } from '../../primitives'
@@ -14,13 +13,15 @@ import {
 import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
 import { StyledText } from '../StyledText'
 
+import type { MouseEventHandler } from 'react'
+
 export interface CheckboxProps {
   /** checkbox is checked if value is true */
   isChecked: boolean
   /** label text that describes the option */
   labelText: string
   /** callback click/tap handler */
-  onClick: React.MouseEventHandler
+  onClick: MouseEventHandler
   /** html tabindex property */
   tabIndex?: number
   /** if disabled is true, mouse events will not trigger onClick callback */
diff --git a/components/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx b/components/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx
index 06fc3153d9e..b3b0e561711 100644
--- a/components/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx
+++ b/components/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, beforeEach, afterEach, vi, expect, it } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
@@ -8,12 +7,14 @@ import { BORDERS, COLORS } from '../../../helix-design-system'
 import { TYPOGRAPHY, SPACING } from '../../../ui-style-constants'
 import { CheckboxField } from '..'
 
-const render = (props: React.ComponentProps<typeof CheckboxField>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof CheckboxField>) => {
   return renderWithProviders(<CheckboxField {...props} />)[0]
 }
 
 describe('CheckboxField', () => {
-  let props: React.ComponentProps<typeof CheckboxField>
+  let props: ComponentProps<typeof CheckboxField>
 
   beforeEach(() => {
     props = {
diff --git a/components/src/atoms/CheckboxField/index.tsx b/components/src/atoms/CheckboxField/index.tsx
index 9f02ef52bc0..1be78e36c1a 100644
--- a/components/src/atoms/CheckboxField/index.tsx
+++ b/components/src/atoms/CheckboxField/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { COLORS, BORDERS } from '../../helix-design-system'
@@ -11,21 +10,23 @@ import {
   JUSTIFY_CENTER,
 } from '../../styles'
 
+import type { ChangeEventHandler, ComponentProps, ReactNode } from 'react'
+
 export interface CheckboxFieldProps {
   /** change handler */
-  onChange: React.ChangeEventHandler
+  onChange: ChangeEventHandler
   /** checkbox is checked if value is true */
   value?: boolean
   /** name of field in form */
   name?: string
   /** label text for checkbox */
-  label?: React.ReactNode
+  label?: ReactNode
   /** checkbox is disabled if value is true */
   disabled?: boolean
   /** html tabindex property */
   tabIndex?: number
   /** props passed into label div. TODO IMMEDIATELY what is the Flow type? */
-  labelProps?: React.ComponentProps<'div'>
+  labelProps?: ComponentProps<'div'>
   /** if true, render indeterminate icon */
   isIndeterminate?: boolean
 }
diff --git a/components/src/atoms/Chip/__tests__/Chip.test.tsx b/components/src/atoms/Chip/__tests__/Chip.test.tsx
index 65de215160f..9fb190e665b 100644
--- a/components/src/atoms/Chip/__tests__/Chip.test.tsx
+++ b/components/src/atoms/Chip/__tests__/Chip.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 import { BORDERS, COLORS } from '../../../helix-design-system'
@@ -6,12 +5,14 @@ import { SPACING } from '../../../ui-style-constants'
 import { renderWithProviders } from '../../../testing/utils'
 import { Chip } from '..'
 
-const render = (props: React.ComponentProps<typeof Chip>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Chip>) => {
   return renderWithProviders(<Chip {...props} />)
 }
 
 describe('Chip Touchscreen', () => {
-  let props: React.ComponentProps<typeof Chip>
+  let props: ComponentProps<typeof Chip>
 
   it('should render text, icon, bgcolor with success colors', () => {
     props = {
@@ -214,7 +215,7 @@ describe('Chip Touchscreen', () => {
 })
 
 describe('Chip Web', () => {
-  let props: React.ComponentProps<typeof Chip>
+  let props: ComponentProps<typeof Chip>
 
   beforeEach(() => {
     Object.defineProperty(window, 'innerWidth', {
diff --git a/components/src/atoms/Divider/index.tsx b/components/src/atoms/Divider/index.tsx
index 7de6a3757f4..df9a9e9af07 100644
--- a/components/src/atoms/Divider/index.tsx
+++ b/components/src/atoms/Divider/index.tsx
@@ -1,7 +1,8 @@
-import type * as React from 'react'
 import { Box, COLORS, SPACING } from '../..'
 
-type Props = React.ComponentProps<typeof Box>
+import type { ComponentProps } from 'react'
+
+type Props = ComponentProps<typeof Box>
 
 export function Divider(props: Props): JSX.Element {
   return (
diff --git a/components/src/atoms/InputField/__tests__/InputField.test.tsx b/components/src/atoms/InputField/__tests__/InputField.test.tsx
index f53d4f4163a..87b3e752272 100644
--- a/components/src/atoms/InputField/__tests__/InputField.test.tsx
+++ b/components/src/atoms/InputField/__tests__/InputField.test.tsx
@@ -1,15 +1,16 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { screen, fireEvent } from '@testing-library/react'
 import { renderWithProviders } from '../../../testing/utils'
 import { InputField } from '..'
 
-const render = (props: React.ComponentProps<typeof InputField>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof InputField>) => {
   return renderWithProviders(<InputField {...props} />)[0]
 }
 
 describe('HeaterShakerSlideout', () => {
-  let props: React.ComponentProps<typeof InputField>
+  let props: ComponentProps<typeof InputField>
   beforeEach(() => {
     props = {
       type: 'number',
diff --git a/components/src/atoms/InputField/index.tsx b/components/src/atoms/InputField/index.tsx
index 001374f71ce..2064bac4d75 100644
--- a/components/src/atoms/InputField/index.tsx
+++ b/components/src/atoms/InputField/index.tsx
@@ -20,6 +20,7 @@ import type {
   ChangeEventHandler,
   FocusEvent,
   MouseEvent,
+  MutableRefObject,
   ReactNode,
 } from 'react'
 import type { IconName } from '../../icons'
@@ -81,7 +82,7 @@ export interface InputFieldProps {
   /** small or medium input field height, relevant only */
   size?: 'medium' | 'small'
   /** react useRef to control input field instead of react event */
-  ref?: React.MutableRefObject<HTMLInputElement | null>
+  ref?: MutableRefObject<HTMLInputElement | null>
   /** optional IconName to display icon aligned to left of input field */
   leftIcon?: IconName
   /** if true, show delete icon aligned to right of input field */
diff --git a/components/src/atoms/ListButton/ListButtonChildren/ListButtonAccordion.tsx b/components/src/atoms/ListButton/ListButtonChildren/ListButtonAccordion.tsx
index 04c42ba654b..2d874f61c99 100644
--- a/components/src/atoms/ListButton/ListButtonChildren/ListButtonAccordion.tsx
+++ b/components/src/atoms/ListButton/ListButtonChildren/ListButtonAccordion.tsx
@@ -1,11 +1,12 @@
-import type * as React from 'react'
 import { Flex } from '../../../primitives'
 import { DIRECTION_COLUMN } from '../../../styles'
 import { SPACING } from '../../../ui-style-constants'
 import { StyledText } from '../../StyledText'
 
+import type { ReactNode } from 'react'
+
 interface ListButtonAccordionProps {
-  children: React.ReactNode
+  children: ReactNode
   // determines if the accordion is expanded or not
   isExpanded?: boolean
   // is it nested into another accordion?
diff --git a/components/src/atoms/ListButton/ListButtonChildren/ListButtonAccordionContainer.tsx b/components/src/atoms/ListButton/ListButtonChildren/ListButtonAccordionContainer.tsx
index 85f76f901b2..d0e8f19821f 100644
--- a/components/src/atoms/ListButton/ListButtonChildren/ListButtonAccordionContainer.tsx
+++ b/components/src/atoms/ListButton/ListButtonChildren/ListButtonAccordionContainer.tsx
@@ -1,9 +1,10 @@
-import type * as React from 'react'
 import { Flex } from '../../../primitives'
 import { DIRECTION_COLUMN } from '../../../styles'
 
+import type { ReactNode } from 'react'
+
 interface ListButtonAccordionContainerProps {
-  children: React.ReactNode
+  children: ReactNode
   id: string
 }
 /*
diff --git a/components/src/atoms/ListButton/__tests__/ListButton.test.tsx b/components/src/atoms/ListButton/__tests__/ListButton.test.tsx
index e7ba460b5e2..fe4e3fb7349 100644
--- a/components/src/atoms/ListButton/__tests__/ListButton.test.tsx
+++ b/components/src/atoms/ListButton/__tests__/ListButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, describe, it, expect, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -7,11 +6,13 @@ import { COLORS } from '../../../helix-design-system'
 
 import { ListButton } from '..'
 
-const render = (props: React.ComponentProps<typeof ListButton>) =>
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ListButton>) =>
   renderWithProviders(<ListButton {...props} />)
 
 describe('ListButton', () => {
-  let props: React.ComponentProps<typeof ListButton>
+  let props: ComponentProps<typeof ListButton>
 
   beforeEach(() => {
     props = {
diff --git a/components/src/atoms/ListButton/__tests__/ListButtonAccordion.test.tsx b/components/src/atoms/ListButton/__tests__/ListButtonAccordion.test.tsx
index 29a2673c773..07ce7452549 100644
--- a/components/src/atoms/ListButton/__tests__/ListButtonAccordion.test.tsx
+++ b/components/src/atoms/ListButton/__tests__/ListButtonAccordion.test.tsx
@@ -1,15 +1,16 @@
-import type * as React from 'react'
 import { describe, it, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 import { renderWithProviders } from '../../../testing/utils'
 
 import { ListButtonAccordion } from '..'
 
-const render = (props: React.ComponentProps<typeof ListButtonAccordion>) =>
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ListButtonAccordion>) =>
   renderWithProviders(<ListButtonAccordion {...props} />)
 
 describe('ListButtonAccordion', () => {
-  let props: React.ComponentProps<typeof ListButtonAccordion>
+  let props: ComponentProps<typeof ListButtonAccordion>
 
   beforeEach(() => {
     props = {
diff --git a/components/src/atoms/ListButton/__tests__/ListButtonRadioButton.test.tsx b/components/src/atoms/ListButton/__tests__/ListButtonRadioButton.test.tsx
index e9448ffabdf..95520a9691b 100644
--- a/components/src/atoms/ListButton/__tests__/ListButtonRadioButton.test.tsx
+++ b/components/src/atoms/ListButton/__tests__/ListButtonRadioButton.test.tsx
@@ -1,15 +1,16 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import { renderWithProviders } from '../../../testing/utils'
 
 import { ListButtonRadioButton } from '..'
 
-const render = (props: React.ComponentProps<typeof ListButtonRadioButton>) =>
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ListButtonRadioButton>) =>
   renderWithProviders(<ListButtonRadioButton {...props} />)
 
 describe('ListButtonRadioButton', () => {
-  let props: React.ComponentProps<typeof ListButtonRadioButton>
+  let props: ComponentProps<typeof ListButtonRadioButton>
 
   beforeEach(() => {
     props = {
diff --git a/components/src/atoms/ListButton/index.tsx b/components/src/atoms/ListButton/index.tsx
index 3f26c830a50..fd4d0cce052 100644
--- a/components/src/atoms/ListButton/index.tsx
+++ b/components/src/atoms/ListButton/index.tsx
@@ -1,9 +1,10 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import { Flex } from '../../primitives'
 import { SPACING } from '../../ui-style-constants'
 import { BORDERS, COLORS } from '../../helix-design-system'
 import { CURSOR_POINTER } from '../../styles'
+
+import type { ReactNode } from 'react'
 import type { StyleProps } from '../../primitives'
 
 export * from './ListButtonChildren/index'
@@ -12,7 +13,7 @@ export type ListButtonType = 'noActive' | 'connected' | 'notConnected'
 
 interface ListButtonProps extends StyleProps {
   type: ListButtonType
-  children: React.ReactNode
+  children: ReactNode
   disabled?: boolean
   onClick?: () => void
 }
diff --git a/components/src/atoms/ListItem/__tests__/ListItem.test.tsx b/components/src/atoms/ListItem/__tests__/ListItem.test.tsx
index ce15aec5d8e..7b603d85868 100644
--- a/components/src/atoms/ListItem/__tests__/ListItem.test.tsx
+++ b/components/src/atoms/ListItem/__tests__/ListItem.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, describe, it, expect, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -7,11 +6,13 @@ import { BORDERS, COLORS } from '../../../helix-design-system'
 
 import { ListItem } from '..'
 
-const render = (props: React.ComponentProps<typeof ListItem>) =>
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ListItem>) =>
   renderWithProviders(<ListItem {...props} />)
 
 describe('ListItem', () => {
-  let props: React.ComponentProps<typeof ListItem>
+  let props: ComponentProps<typeof ListItem>
 
   beforeEach(() => {
     props = {
diff --git a/components/src/atoms/ListItem/index.tsx b/components/src/atoms/ListItem/index.tsx
index 5a47c614ea8..d1d9b8d1312 100644
--- a/components/src/atoms/ListItem/index.tsx
+++ b/components/src/atoms/ListItem/index.tsx
@@ -1,9 +1,10 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import { Flex } from '../../primitives'
 import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
 import { BORDERS, COLORS } from '../../helix-design-system'
 import { FLEX_MAX_CONTENT } from '../../styles'
+
+import type { ReactNode } from 'react'
 import type { StyleProps } from '../../primitives'
 
 export * from './ListItemChildren'
@@ -19,7 +20,7 @@ interface ListItemProps extends StyleProps {
   /** ListItem state type */
   type: ListItemType
   /** ListItem contents */
-  children: React.ReactNode
+  children: ReactNode
   onClick?: () => void
   onMouseEnter?: () => void
   onMouseLeave?: () => void
diff --git a/components/src/atoms/MenuList/OverflowBtn.tsx b/components/src/atoms/MenuList/OverflowBtn.tsx
index efe9195f03d..0414f95f7d3 100644
--- a/components/src/atoms/MenuList/OverflowBtn.tsx
+++ b/components/src/atoms/MenuList/OverflowBtn.tsx
@@ -1,20 +1,22 @@
-import * as React from 'react'
+import { forwardRef } from 'react'
 import { css } from 'styled-components'
 
 import { Btn } from '../../primitives'
 import { BORDERS, COLORS } from '../../helix-design-system'
 import { SPACING } from '../../ui-style-constants'
 
-interface OverflowBtnProps extends React.ComponentProps<typeof Btn> {
+import type { ComponentProps, ForwardedRef, ReactNode } from 'react'
+
+interface OverflowBtnProps extends ComponentProps<typeof Btn> {
   fillColor?: string
 }
 export const OverflowBtn: (
   props: OverflowBtnProps,
-  ref: React.ForwardedRef<HTMLInputElement>
-) => React.ReactNode = React.forwardRef(
+  ref: ForwardedRef<HTMLInputElement>
+) => ReactNode = forwardRef(
   (
     props: OverflowBtnProps,
-    ref: React.ForwardedRef<HTMLInputElement>
+    ref: ForwardedRef<HTMLInputElement>
   ): JSX.Element => {
     const { fillColor, ...restProps } = props
     return (
diff --git a/components/src/atoms/MenuList/__tests__/MenuItem.test.tsx b/components/src/atoms/MenuList/__tests__/MenuItem.test.tsx
index f6d0485be45..4a90984f638 100644
--- a/components/src/atoms/MenuList/__tests__/MenuItem.test.tsx
+++ b/components/src/atoms/MenuList/__tests__/MenuItem.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -8,12 +7,14 @@ import { SPACING, TYPOGRAPHY } from '../../../ui-style-constants'
 
 import { MenuItem } from '../MenuItem'
 
-const render = (props: React.ComponentProps<typeof MenuItem>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof MenuItem>) => {
   return renderWithProviders(<MenuItem {...props} />)[0]
 }
 
 describe('MenuItem', () => {
-  let props: React.ComponentProps<typeof MenuItem>
+  let props: ComponentProps<typeof MenuItem>
 
   beforeEach(() => {
     props = {
diff --git a/components/src/atoms/MenuList/__tests__/MenuList.test.tsx b/components/src/atoms/MenuList/__tests__/MenuList.test.tsx
index e38e145eceb..7b2ccffc42b 100644
--- a/components/src/atoms/MenuList/__tests__/MenuList.test.tsx
+++ b/components/src/atoms/MenuList/__tests__/MenuList.test.tsx
@@ -1,18 +1,19 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 
 import { renderWithProviders } from '../../../testing/utils'
 import { MenuList } from '..'
 
-const render = (props: React.ComponentProps<typeof MenuList>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof MenuList>) => {
   return renderWithProviders(<MenuList {...props} />)[0]
 }
 
 const mockBtn = <div key="fakeKey">mockBtn</div>
 
 describe('MenuList', () => {
-  let props: React.ComponentProps<typeof MenuList>
+  let props: ComponentProps<typeof MenuList>
   beforeEach(() => {
     props = {
       children: mockBtn,
diff --git a/components/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx b/components/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx
index 00f080fae2c..af60a617c41 100644
--- a/components/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx
+++ b/components/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, it, expect, describe } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 
@@ -6,7 +5,9 @@ import { COLORS } from '../../../helix-design-system'
 import { renderWithProviders } from '../../../testing/utils'
 import { OverflowBtn } from '../OverflowBtn'
 
-const render = (props: React.ComponentProps<typeof OverflowBtn>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof OverflowBtn>) => {
   return renderWithProviders(<OverflowBtn {...props} />)[0]
 }
 
diff --git a/components/src/atoms/MenuList/index.tsx b/components/src/atoms/MenuList/index.tsx
index 7b930243ba0..f06fe983523 100644
--- a/components/src/atoms/MenuList/index.tsx
+++ b/components/src/atoms/MenuList/index.tsx
@@ -1,5 +1,3 @@
-import type * as React from 'react'
-
 import { BORDERS, COLORS } from '../../helix-design-system'
 import {
   DIRECTION_COLUMN,
@@ -10,10 +8,12 @@ import { Flex } from '../../primitives'
 import { SPACING } from '../../ui-style-constants'
 import { ModalShell } from '../../modals'
 
+import type { MouseEventHandler, ReactNode } from 'react'
+
 interface MenuListProps {
-  children: React.ReactNode
+  children: ReactNode
   isOnDevice?: boolean
-  onClick?: React.MouseEventHandler
+  onClick?: MouseEventHandler
 }
 
 export const MenuList = (props: MenuListProps): JSX.Element | null => {
diff --git a/components/src/atoms/Snackbar/__tests__/Snackbar.test.tsx b/components/src/atoms/Snackbar/__tests__/Snackbar.test.tsx
index a4ae1f8f6b0..0f093548cdc 100644
--- a/components/src/atoms/Snackbar/__tests__/Snackbar.test.tsx
+++ b/components/src/atoms/Snackbar/__tests__/Snackbar.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen, act } from '@testing-library/react'
@@ -6,12 +5,14 @@ import { renderWithProviders } from '../../../testing/utils'
 import { Snackbar } from '..'
 import { COLORS } from '../../../helix-design-system'
 
-const render = (props: React.ComponentProps<typeof Snackbar>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Snackbar>) => {
   return renderWithProviders(<Snackbar {...props} />)[0]
 }
 
 describe('Snackbar', () => {
-  let props: React.ComponentProps<typeof Snackbar>
+  let props: ComponentProps<typeof Snackbar>
   beforeEach(() => {
     props = {
       message: 'test message',
diff --git a/components/src/atoms/StyledText/LegacyStyledText.tsx b/components/src/atoms/StyledText/LegacyStyledText.tsx
index 83df2c69e06..7816a8967f9 100644
--- a/components/src/atoms/StyledText/LegacyStyledText.tsx
+++ b/components/src/atoms/StyledText/LegacyStyledText.tsx
@@ -2,11 +2,11 @@ import styled, { css } from 'styled-components'
 import { Text } from '../../primitives'
 import { TYPOGRAPHY, RESPONSIVENESS } from '../../ui-style-constants'
 
-import type * as React from 'react'
+import type { ComponentProps, ReactNode } from 'react'
 import type { FlattenSimpleInterpolation } from 'styled-components'
 
-export interface LegacyProps extends React.ComponentProps<typeof Text> {
-  children?: React.ReactNode
+export interface LegacyProps extends ComponentProps<typeof Text> {
+  children?: ReactNode
 }
 
 const styleMap: { [tag: string]: FlattenSimpleInterpolation } = {
diff --git a/components/src/atoms/StyledText/StyledText.tsx b/components/src/atoms/StyledText/StyledText.tsx
index fc33536da9a..df16b3f8b0a 100644
--- a/components/src/atoms/StyledText/StyledText.tsx
+++ b/components/src/atoms/StyledText/StyledText.tsx
@@ -3,7 +3,7 @@ import { Text } from '../../primitives'
 import { TYPOGRAPHY, RESPONSIVENESS } from '../../ui-style-constants'
 import { TYPOGRAPHY as HELIX_TYPOGRAPHY } from '../../helix-design-system/product'
 
-import type * as React from 'react'
+import type { ComponentProps, ReactNode } from 'react'
 import type { FlattenSimpleInterpolation } from 'styled-components'
 
 const helixProductStyleMap = {
@@ -290,10 +290,10 @@ const ODDStyleMap = {
   },
 } as const
 
-export interface Props extends React.ComponentProps<typeof Text> {
+export interface Props extends ComponentProps<typeof Text> {
   oddStyle?: ODDStyles
   desktopStyle?: HelixStyles
-  children?: React.ReactNode
+  children?: ReactNode
 }
 export const ODD_STYLES = Object.keys(ODDStyleMap)
 export const HELIX_STYLES = Object.keys(helixProductStyleMap)
diff --git a/components/src/atoms/Tag/__tests__/Tag.test.tsx b/components/src/atoms/Tag/__tests__/Tag.test.tsx
index dcb25c77d27..9c7ba83731d 100644
--- a/components/src/atoms/Tag/__tests__/Tag.test.tsx
+++ b/components/src/atoms/Tag/__tests__/Tag.test.tsx
@@ -1,16 +1,17 @@
-import type * as React from 'react'
 import { describe, it, expect } from 'vitest'
 import { screen } from '@testing-library/react'
 import { COLORS } from '../../../helix-design-system'
 import { renderWithProviders } from '../../../testing/utils'
 import { Tag } from '../index'
 
-const render = (props: React.ComponentProps<typeof Tag>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Tag>) => {
   return renderWithProviders(<Tag {...props} />)
 }
 
 describe('Tag', () => {
-  let props: React.ComponentProps<typeof Tag>
+  let props: ComponentProps<typeof Tag>
 
   it('should render text, icon with default', () => {
     props = {
diff --git a/components/src/atoms/Toast/__tests__/ODDToast.test.tsx b/components/src/atoms/Toast/__tests__/ODDToast.test.tsx
index d198df7f03e..3999fc8ec6e 100644
--- a/components/src/atoms/Toast/__tests__/ODDToast.test.tsx
+++ b/components/src/atoms/Toast/__tests__/ODDToast.test.tsx
@@ -1,16 +1,17 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { act, fireEvent, screen } from '@testing-library/react'
 import { renderWithProviders } from '../../../testing/utils'
 import { Toast, TOAST_ANIMATION_DURATION } from '..'
 
-const render = (props: React.ComponentProps<typeof Toast>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Toast>) => {
   return renderWithProviders(<Toast {...props} displayType="odd" />)[0]
 }
 
 describe('Toast', () => {
-  let props: React.ComponentProps<typeof Toast>
+  let props: ComponentProps<typeof Toast>
   beforeEach(() => {
     props = {
       id: '1',
diff --git a/components/src/atoms/Toast/__tests__/Toast.test.tsx b/components/src/atoms/Toast/__tests__/Toast.test.tsx
index 5133651ecd6..2d4e189e895 100644
--- a/components/src/atoms/Toast/__tests__/Toast.test.tsx
+++ b/components/src/atoms/Toast/__tests__/Toast.test.tsx
@@ -1,16 +1,17 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { act, fireEvent, screen } from '@testing-library/react'
 import { renderWithProviders } from '../../../testing/utils'
 import { Toast, TOAST_ANIMATION_DURATION } from '..'
 
-const render = (props: React.ComponentProps<typeof Toast>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Toast>) => {
   return renderWithProviders(<Toast {...props} displayType="desktop" />)[0]
 }
 
 describe('Toast', () => {
-  let props: React.ComponentProps<typeof Toast>
+  let props: ComponentProps<typeof Toast>
   beforeEach(() => {
     props = {
       id: '1',
diff --git a/components/src/atoms/ToggleGroup/__tests__/ToggleGroup.test.tsx b/components/src/atoms/ToggleGroup/__tests__/ToggleGroup.test.tsx
index f7beb737696..f754467da5e 100644
--- a/components/src/atoms/ToggleGroup/__tests__/ToggleGroup.test.tsx
+++ b/components/src/atoms/ToggleGroup/__tests__/ToggleGroup.test.tsx
@@ -1,15 +1,16 @@
-import type * as React from 'react'
 import { describe, it, expect, vi } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import { renderWithProviders } from '../../../testing/utils'
 import { ToggleGroup } from '../index'
 
-const render = (props: React.ComponentProps<typeof ToggleGroup>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ToggleGroup>) => {
   return renderWithProviders(<ToggleGroup {...props} />)
 }
 
 describe('ToggleGroup', () => {
-  let props: React.ComponentProps<typeof ToggleGroup>
+  let props: ComponentProps<typeof ToggleGroup>
 
   it('should render text and buttons', () => {
     props = {
diff --git a/components/src/atoms/Tooltip/__tests__/Tooltip.test.tsx b/components/src/atoms/Tooltip/__tests__/Tooltip.test.tsx
index ddc1e4f6a1a..18fe3fcce85 100644
--- a/components/src/atoms/Tooltip/__tests__/Tooltip.test.tsx
+++ b/components/src/atoms/Tooltip/__tests__/Tooltip.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'
@@ -11,7 +10,9 @@ import { POSITION_ABSOLUTE } from '../../../styles'
 import { renderWithProviders } from '../../../testing/utils'
 import { Tooltip } from '..'
 
-const render = (props: React.ComponentProps<typeof Tooltip>) => {
+import type { ComponentProps, ReactNode } from 'react'
+
+const render = (props: ComponentProps<typeof Tooltip>) => {
   return renderWithProviders(<Tooltip {...props} />)[0]
 }
 
@@ -39,11 +40,11 @@ const MockTooltipProps = {
 }
 
 describe('Tooltip', () => {
-  let props: React.ComponentProps<typeof Tooltip>
+  let props: ComponentProps<typeof Tooltip>
 
   beforeEach(() => {
     props = {
-      children: 'mock children' as React.ReactNode,
+      children: 'mock children' as ReactNode,
       tooltipProps: MockTooltipProps,
       key: 'mock key',
     }
diff --git a/components/src/atoms/Tooltip/index.tsx b/components/src/atoms/Tooltip/index.tsx
index 6bc04add77c..9ba18b99e1e 100644
--- a/components/src/atoms/Tooltip/index.tsx
+++ b/components/src/atoms/Tooltip/index.tsx
@@ -1,15 +1,14 @@
-import type * as React from 'react'
-
 import { COLORS } from '../../helix-design-system'
 import { TYPOGRAPHY } from '../../ui-style-constants'
 import { LegacyTooltip } from '../../tooltips'
 import { FLEX_MAX_CONTENT } from '../../styles'
 
+import type { ReactNode } from 'react'
 import type { UseTooltipResultTooltipProps } from '../../tooltips'
 import type { StyleProps } from '../../primitives'
 
 export interface TooltipProps extends StyleProps {
-  children: React.ReactNode
+  children: ReactNode
   tooltipProps: UseTooltipResultTooltipProps & { visible: boolean }
   key?: string
 }
diff --git a/components/src/atoms/buttons/LargeButton.tsx b/components/src/atoms/buttons/LargeButton.tsx
index 67436adf6ed..7bfcf4b6533 100644
--- a/components/src/atoms/buttons/LargeButton.tsx
+++ b/components/src/atoms/buttons/LargeButton.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 
 import { Btn } from '../../primitives'
@@ -16,6 +15,7 @@ import {
 } from '../..'
 import { Icon } from '../../icons'
 
+import type { ReactNode } from 'react'
 import type { StyleProps } from '../../primitives'
 import type { IconName } from '../../icons'
 
@@ -126,7 +126,7 @@ interface LargeButtonProps extends StyleProps {
   type?: 'submit'
   onClick?: () => void
   buttonType?: LargeButtonTypes
-  buttonText: React.ReactNode
+  buttonText: ReactNode
   iconName?: IconName
   disabled?: boolean
   /** aria-disabled for displaying snack bar. */
diff --git a/components/src/atoms/buttons/RadioButton.tsx b/components/src/atoms/buttons/RadioButton.tsx
index a4d1a769144..8b371912e6a 100644
--- a/components/src/atoms/buttons/RadioButton.tsx
+++ b/components/src/atoms/buttons/RadioButton.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import styled, { css } from 'styled-components'
 import { Flex } from '../../primitives'
 import { COLORS, BORDERS } from '../../helix-design-system'
@@ -12,14 +11,16 @@ import {
   Icon,
   StyledText,
 } from '../../index'
+
+import type { ChangeEventHandler, ReactNode } from 'react'
+import type { FlattenSimpleInterpolation } from 'styled-components'
 import type { IconName } from '../../icons'
 import type { StyleProps } from '../../primitives'
-import type { FlattenSimpleInterpolation } from 'styled-components'
 
 interface RadioButtonProps extends StyleProps {
-  buttonLabel: string | React.ReactNode
+  buttonLabel: string | ReactNode
   buttonValue: string | number
-  onChange: React.ChangeEventHandler<HTMLInputElement>
+  onChange: ChangeEventHandler<HTMLInputElement>
   disabled?: boolean
   iconName?: IconName
   isSelected?: boolean
diff --git a/components/src/atoms/buttons/__tests__/AlertPrimaryButton.test.tsx b/components/src/atoms/buttons/__tests__/AlertPrimaryButton.test.tsx
index cad0175d981..61d1b07729c 100644
--- a/components/src/atoms/buttons/__tests__/AlertPrimaryButton.test.tsx
+++ b/components/src/atoms/buttons/__tests__/AlertPrimaryButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, expect } from 'vitest'
 import { screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
@@ -8,12 +7,14 @@ import { TYPOGRAPHY, SPACING } from '../../../ui-style-constants'
 
 import { AlertPrimaryButton } from '../AlertPrimaryButton'
 
-const render = (props: React.ComponentProps<typeof AlertPrimaryButton>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof AlertPrimaryButton>) => {
   return renderWithProviders(<AlertPrimaryButton {...props} />)[0]
 }
 
 describe('AlertPrimaryButton', () => {
-  let props: React.ComponentProps<typeof AlertPrimaryButton>
+  let props: ComponentProps<typeof AlertPrimaryButton>
 
   beforeEach(() => {
     props = {
diff --git a/components/src/atoms/buttons/__tests__/AltPrimaryButton.test.tsx b/components/src/atoms/buttons/__tests__/AltPrimaryButton.test.tsx
index f65613d0561..7697336c219 100644
--- a/components/src/atoms/buttons/__tests__/AltPrimaryButton.test.tsx
+++ b/components/src/atoms/buttons/__tests__/AltPrimaryButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, expect } from 'vitest'
 import { screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
@@ -7,12 +6,14 @@ import { BORDERS, COLORS } from '../../../helix-design-system'
 import { TYPOGRAPHY, SPACING } from '../../../ui-style-constants'
 import { AltPrimaryButton } from '../AltPrimaryButton'
 
-const render = (props: React.ComponentProps<typeof AltPrimaryButton>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof AltPrimaryButton>) => {
   return renderWithProviders(<AltPrimaryButton {...props} />)[0]
 }
 
 describe('AltPrimaryButton', () => {
-  let props: React.ComponentProps<typeof AltPrimaryButton>
+  let props: ComponentProps<typeof AltPrimaryButton>
 
   beforeEach(() => {
     props = {
diff --git a/components/src/atoms/buttons/__tests__/EmptySelectorButton.test.tsx b/components/src/atoms/buttons/__tests__/EmptySelectorButton.test.tsx
index 6fea2d8d297..bf5e2953086 100644
--- a/components/src/atoms/buttons/__tests__/EmptySelectorButton.test.tsx
+++ b/components/src/atoms/buttons/__tests__/EmptySelectorButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
@@ -6,12 +5,14 @@ import { renderWithProviders } from '../../../testing/utils'
 import { JUSTIFY_CENTER, JUSTIFY_START } from '../../../styles'
 import { EmptySelectorButton } from '../EmptySelectorButton'
 
-const render = (props: React.ComponentProps<typeof EmptySelectorButton>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof EmptySelectorButton>) => {
   return renderWithProviders(<EmptySelectorButton {...props} />)[0]
 }
 
 describe('EmptySelectorButton', () => {
-  let props: React.ComponentProps<typeof EmptySelectorButton>
+  let props: ComponentProps<typeof EmptySelectorButton>
   beforeEach(() => {
     props = {
       onClick: vi.fn(),
diff --git a/components/src/atoms/buttons/__tests__/LargeButton.test.tsx b/components/src/atoms/buttons/__tests__/LargeButton.test.tsx
index 52f6c9e71f6..628dd88b541 100644
--- a/components/src/atoms/buttons/__tests__/LargeButton.test.tsx
+++ b/components/src/atoms/buttons/__tests__/LargeButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -7,12 +6,14 @@ import { renderWithProviders } from '../../../testing/utils'
 import { COLORS } from '../../../helix-design-system'
 import { LargeButton } from '../LargeButton'
 
-const render = (props: React.ComponentProps<typeof LargeButton>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof LargeButton>) => {
   return renderWithProviders(<LargeButton {...props} />)[0]
 }
 
 describe('LargeButton', () => {
-  let props: React.ComponentProps<typeof LargeButton>
+  let props: ComponentProps<typeof LargeButton>
   beforeEach(() => {
     props = {
       onClick: vi.fn(),
diff --git a/components/src/atoms/buttons/__tests__/PrimaryButton.test.tsx b/components/src/atoms/buttons/__tests__/PrimaryButton.test.tsx
index 558f4a595eb..8f465d4bc63 100644
--- a/components/src/atoms/buttons/__tests__/PrimaryButton.test.tsx
+++ b/components/src/atoms/buttons/__tests__/PrimaryButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, expect } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
@@ -7,12 +6,14 @@ import { BORDERS, COLORS } from '../../../helix-design-system'
 import { TYPOGRAPHY, SPACING } from '../../../ui-style-constants'
 import { PrimaryButton } from '../PrimaryButton'
 
-const render = (props: React.ComponentProps<typeof PrimaryButton>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof PrimaryButton>) => {
   return renderWithProviders(<PrimaryButton {...props} />)[0]
 }
 
 describe('PrimaryButton', () => {
-  let props: React.ComponentProps<typeof PrimaryButton>
+  let props: ComponentProps<typeof PrimaryButton>
 
   beforeEach(() => {
     props = {
diff --git a/components/src/atoms/buttons/__tests__/RadioButton.test.tsx b/components/src/atoms/buttons/__tests__/RadioButton.test.tsx
index 95aaf6532fc..b259bcc97fb 100644
--- a/components/src/atoms/buttons/__tests__/RadioButton.test.tsx
+++ b/components/src/atoms/buttons/__tests__/RadioButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import '@testing-library/jest-dom/vitest'
 import { screen, queryByAttribute } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
@@ -7,12 +6,14 @@ import { COLORS } from '../../../helix-design-system'
 import { SPACING } from '../../../ui-style-constants'
 import { RadioButton } from '../RadioButton'
 
-const render = (props: React.ComponentProps<typeof RadioButton>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof RadioButton>) => {
   return renderWithProviders(<RadioButton {...props} />)[0]
 }
 
 describe('RadioButton', () => {
-  let props: React.ComponentProps<typeof RadioButton>
+  let props: ComponentProps<typeof RadioButton>
   beforeEach(() => {
     props = {
       onChange: vi.fn(),
diff --git a/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx b/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx
index 8887e679268..c7fdcc3229f 100644
--- a/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx
+++ b/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, expect } from 'vitest'
 import { screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
@@ -8,12 +7,14 @@ import { BORDERS, COLORS } from '../../../helix-design-system'
 
 import { SecondaryButton } from '../SecondaryButton'
 
-const render = (props: React.ComponentProps<typeof SecondaryButton>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof SecondaryButton>) => {
   return renderWithProviders(<SecondaryButton {...props} />)[0]
 }
 
 describe('SecondaryButton', () => {
-  let props: React.ComponentProps<typeof SecondaryButton>
+  let props: ComponentProps<typeof SecondaryButton>
 
   beforeEach(() => {
     props = {
diff --git a/components/src/buttons/Button.tsx b/components/src/buttons/Button.tsx
index 749c4e603a5..3c159a3b759 100644
--- a/components/src/buttons/Button.tsx
+++ b/components/src/buttons/Button.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import cx from 'classnames'
 import omit from 'lodash/omit'
 
@@ -7,6 +6,7 @@ import styles from './buttons.module.css'
 
 import { BUTTON_TYPE_BUTTON } from '../primitives'
 
+import type { ComponentType, MouseEventHandler, ReactNode } from 'react'
 import type { BUTTON_TYPE_SUBMIT, BUTTON_TYPE_RESET } from '../primitives'
 import type { IconName } from '../icons'
 import type { UseHoverTooltipTargetProps } from '../tooltips'
@@ -15,7 +15,7 @@ export interface ButtonProps {
   /** id attribute */
   id?: string
   /** click handler */
-  onClick?: React.MouseEventHandler
+  onClick?: MouseEventHandler
   /** name attribute */
   name?: string
   /** title attribute */
@@ -31,7 +31,7 @@ export interface ButtonProps {
   /** inverts the default color/background/border of default button style */
   inverted?: boolean
   /** contents of the button */
-  children?: React.ReactNode
+  children?: ReactNode
   /** type of button (default "button") */
   type?:
     | typeof BUTTON_TYPE_SUBMIT
@@ -40,7 +40,7 @@ export interface ButtonProps {
   /** ID of form that button is for */
   form?: string
   /** custom element or component to use instead of `<button>` */
-  Component?: React.ComponentType<any> | keyof JSX.IntrinsicElements
+  Component?: ComponentType<any> | keyof JSX.IntrinsicElements
   /** handlers for HoverTooltipComponent */
   hoverTooltipHandlers?: UseHoverTooltipTargetProps | null | undefined
   /** html tabindex property */
diff --git a/components/src/controls/ControlInfo.tsx b/components/src/controls/ControlInfo.tsx
index 81ff686162a..f3bcda14d92 100644
--- a/components/src/controls/ControlInfo.tsx
+++ b/components/src/controls/ControlInfo.tsx
@@ -1,9 +1,9 @@
-import type * as React from 'react'
-
 import styles from './styles.module.css'
 
+import type { ReactNode } from 'react'
+
 export interface ControlInfoProps {
-  children: React.ReactNode
+  children: ReactNode
   className?: string
 }
 
diff --git a/components/src/controls/LabeledButton.tsx b/components/src/controls/LabeledButton.tsx
index fa507869ffd..af5a4ea2f81 100644
--- a/components/src/controls/LabeledButton.tsx
+++ b/components/src/controls/LabeledButton.tsx
@@ -1,16 +1,16 @@
-import type * as React from 'react'
 import cx from 'classnames'
 
 import { OutlineButton } from '../buttons'
 import { LabeledControl } from './LabeledControl'
 import styles from './styles.module.css'
 
+import type { ReactNode } from 'react'
 import type { ButtonProps } from '../buttons'
 
 export interface LabeledButtonProps {
   label: string
   buttonProps: ButtonProps
-  children: React.ReactNode
+  children: ReactNode
 }
 
 export function LabeledButton(props: LabeledButtonProps): JSX.Element {
diff --git a/components/src/controls/LabeledCheckbox.tsx b/components/src/controls/LabeledCheckbox.tsx
index 1479c46bf16..ea0d1108291 100644
--- a/components/src/controls/LabeledCheckbox.tsx
+++ b/components/src/controls/LabeledCheckbox.tsx
@@ -1,17 +1,18 @@
-import type * as React from 'react'
 import cx from 'classnames'
 
 import { DeprecatedCheckboxField } from '../forms'
 import { LabeledControl } from './LabeledControl'
 import styles from './styles.module.css'
 
+import type { ChangeEventHandler, ReactNode } from 'react'
+
 export interface LabeledCheckboxProps {
   label: string
   name: string
   value: boolean
   className?: string
-  children: React.ReactNode
-  onChange: React.ChangeEventHandler<HTMLInputElement>
+  children: ReactNode
+  onChange: ChangeEventHandler<HTMLInputElement>
 }
 
 export function LabeledCheckbox(props: LabeledCheckboxProps): JSX.Element {
diff --git a/components/src/controls/LabeledControl.tsx b/components/src/controls/LabeledControl.tsx
index ce1089b28b3..c777f6252db 100644
--- a/components/src/controls/LabeledControl.tsx
+++ b/components/src/controls/LabeledControl.tsx
@@ -1,12 +1,12 @@
-import type * as React from 'react'
-
 import { ControlInfo } from './ControlInfo'
 import styles from './styles.module.css'
 
+import type { ReactNode } from 'react'
+
 export interface LabeledControlProps {
   label: string
-  control: React.ReactNode
-  children?: React.ReactNode
+  control: ReactNode
+  children?: ReactNode
 }
 
 export function LabeledControl(props: LabeledControlProps): JSX.Element {
diff --git a/components/src/controls/LabeledRadioGroup.tsx b/components/src/controls/LabeledRadioGroup.tsx
index 0811762961f..c5f61b5b297 100644
--- a/components/src/controls/LabeledRadioGroup.tsx
+++ b/components/src/controls/LabeledRadioGroup.tsx
@@ -1,13 +1,12 @@
-import type * as React from 'react'
-
 import { StackedLabeledControl } from './StackedLabeledControl'
 import { RadioGroup } from '../forms'
 
+import type { ReactNode } from 'react'
 import type { RadioGroupProps } from '../forms'
 
 export interface LabeledRadioGroupProps extends RadioGroupProps {
   label: string
-  children: React.ReactNode
+  children: ReactNode
   'data-test'?: string
 }
 
diff --git a/components/src/controls/LabeledToggle.tsx b/components/src/controls/LabeledToggle.tsx
index 3d7adecb4e6..81ab8d6d6f7 100644
--- a/components/src/controls/LabeledToggle.tsx
+++ b/components/src/controls/LabeledToggle.tsx
@@ -1,14 +1,14 @@
-import type * as React from 'react'
-
 import { LabeledControl } from './LabeledControl'
 import { ToggleButton } from './ToggleButton'
 import styles from './styles.module.css'
 
+import type { ReactNode } from 'react'
+
 export interface LabeledToggleProps {
   label: string
   toggledOn: boolean
   disabled?: boolean
-  children?: React.ReactNode
+  children?: ReactNode
   onClick: () => unknown
   /** optional data test id for the container */
   'data-test'?: string
diff --git a/components/src/controls/StackedLabeledControl.tsx b/components/src/controls/StackedLabeledControl.tsx
index 01d1cc91e34..e812d89683b 100644
--- a/components/src/controls/StackedLabeledControl.tsx
+++ b/components/src/controls/StackedLabeledControl.tsx
@@ -1,12 +1,12 @@
-import type * as React from 'react'
-
 import { ControlInfo } from './ControlInfo'
 import styles from './styles.module.css'
 
+import type { ReactNode } from 'react'
+
 export interface StackedLabeledControlProps {
   label: string
-  control: React.ReactNode
-  children?: React.ReactNode
+  control: ReactNode
+  children?: ReactNode
 }
 
 export function StackedLabeledControl(
diff --git a/components/src/forms/DeprecatedCheckboxField.tsx b/components/src/forms/DeprecatedCheckboxField.tsx
index 234c7fa5980..c1d08355c0d 100644
--- a/components/src/forms/DeprecatedCheckboxField.tsx
+++ b/components/src/forms/DeprecatedCheckboxField.tsx
@@ -1,7 +1,8 @@
-import type * as React from 'react'
 import cx from 'classnames'
 import { Icon } from '../icons'
 
+import type { ComponentProps, ChangeEventHandler } from 'react'
+
 import styles from './forms.module.css'
 
 /**
@@ -9,7 +10,7 @@ import styles from './forms.module.css'
  */
 export interface DeprecatedCheckboxFieldProps {
   /** change handler */
-  onChange: React.ChangeEventHandler
+  onChange: ChangeEventHandler
   /** checkbox is checked if value is true */
   value?: boolean
   /** classes to apply */
@@ -27,7 +28,7 @@ export interface DeprecatedCheckboxFieldProps {
   /** html tabindex property */
   tabIndex?: number
   /** props passed into label div. TODO IMMEDIATELY what is the Flow type? */
-  labelProps?: React.ComponentProps<'div'>
+  labelProps?: ComponentProps<'div'>
   /** if true, render indeterminate icon */
   isIndeterminate?: boolean
 }
diff --git a/components/src/forms/FormGroup.tsx b/components/src/forms/FormGroup.tsx
index 8a394a22d82..18d061f8f17 100644
--- a/components/src/forms/FormGroup.tsx
+++ b/components/src/forms/FormGroup.tsx
@@ -1,14 +1,15 @@
-import type * as React from 'react'
 import cx from 'classnames'
 import { Icon } from '../icons'
 import styles from './forms.module.css'
+
+import type { ReactNode } from 'react'
 import type { HoverTooltipHandlers } from '../tooltips'
 
 export interface FormGroupProps {
   /** text label */
   label?: string
   /** form content */
-  children?: React.ReactNode
+  children?: ReactNode
   /** classes to apply */
   className?: string | null | undefined
   /** if is included, FormGroup title will use error style. The content of the string is ignored. */
diff --git a/components/src/forms/LegacyInputField.tsx b/components/src/forms/LegacyInputField.tsx
index 79eb4cbeb38..00d7e358094 100644
--- a/components/src/forms/LegacyInputField.tsx
+++ b/components/src/forms/LegacyInputField.tsx
@@ -1,8 +1,14 @@
-import type * as React from 'react'
 import cx from 'classnames'
 import { Icon } from '../icons'
 import styles from './forms.module.css'
 
+import type {
+  ChangeEventHandler,
+  FocusEvent,
+  MouseEvent,
+  ReactNode,
+} from 'react'
+
 export const INPUT_TYPE_TEXT: 'text' = 'text'
 export const INPUT_TYPE_PASSWORD: 'password' = 'password'
 
@@ -12,7 +18,7 @@ export interface LegacyInputFieldProps {
   /** field is disabled if value is true */
   disabled?: boolean
   /** change handler */
-  onChange?: React.ChangeEventHandler<HTMLInputElement>
+  onChange?: ChangeEventHandler<HTMLInputElement>
   /** classes to apply to outer element */
   className?: string
   /** inline label text. DEPRECATED */
@@ -26,7 +32,7 @@ export interface LegacyInputFieldProps {
   /** placeholder text */
   placeholder?: string
   /** optional suffix component, appears to the right of input text */
-  units?: React.ReactNode // TODO: Ian 2018-10-30 rename to 'suffix'
+  units?: ReactNode // TODO: Ian 2018-10-30 rename to 'suffix'
   /** current value of text in box, defaults to '' */
   value?: string | null | undefined
   /** if included, InputField will use error style and display error instead of caption */
@@ -38,11 +44,11 @@ export interface LegacyInputFieldProps {
   /** optional input type (default "text") */
   type?: typeof INPUT_TYPE_TEXT | typeof INPUT_TYPE_PASSWORD
   /** mouse click handler */
-  onClick?: (event: React.MouseEvent<HTMLInputElement>) => unknown
+  onClick?: (event: MouseEvent<HTMLInputElement>) => unknown
   /** focus handler */
-  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => unknown
+  onFocus?: (event: FocusEvent<HTMLInputElement>) => unknown
   /** blur handler */
-  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => unknown
+  onBlur?: (event: FocusEvent<HTMLInputElement>) => unknown
   /** makes input field read-only */
   readOnly?: boolean | undefined
   /** html tabindex property */
diff --git a/components/src/forms/RadioGroup.tsx b/components/src/forms/RadioGroup.tsx
index c67cd88b06c..7f2ac8e38ef 100644
--- a/components/src/forms/RadioGroup.tsx
+++ b/components/src/forms/RadioGroup.tsx
@@ -1,19 +1,20 @@
-import type * as React from 'react'
 import cx from 'classnames'
 import { Icon } from '../icons'
 import styles from './forms.module.css'
 
+import type { ChangeEventHandler, FocusEventHandler, ReactNode } from 'react'
+
 export interface RadioOption {
   name: string
   value: string
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
 export interface RadioGroupProps {
   /** blur handler */
-  onBlur?: React.FocusEventHandler<HTMLInputElement>
+  onBlur?: FocusEventHandler<HTMLInputElement>
   /** change handler */
-  onChange: React.ChangeEventHandler
+  onChange: ChangeEventHandler
   /** value that is checked */
   value?: string
   /** Array of {name, value} data with optional children */
diff --git a/components/src/forms/SelectField.tsx b/components/src/forms/SelectField.tsx
index e2cbea6d656..08bfa187ac7 100644
--- a/components/src/forms/SelectField.tsx
+++ b/components/src/forms/SelectField.tsx
@@ -1,12 +1,12 @@
-import type * as React from 'react'
 import cx from 'classnames'
 import find from 'lodash/find'
 
 import { Select } from './Select'
 import styles from './SelectField.module.css'
 
-import type { SelectProps } from './Select'
+import type { ReactNode } from 'react'
 import type { ActionMeta, MultiValue, SingleValue } from 'react-select'
+import type { SelectProps } from './Select'
 import type { SelectOption } from '.'
 
 export interface SelectFieldProps {
@@ -29,7 +29,7 @@ export interface SelectFieldProps {
   /** optional className */
   className?: string
   /** optional caption. hidden when `error` is given */
-  caption?: React.ReactNode
+  caption?: ReactNode
   /** if included, use error style and display error instead of caption */
   error?: string | null
   /** change handler called with (name, value) */
diff --git a/components/src/forms/ToggleField.tsx b/components/src/forms/ToggleField.tsx
index 3b3e7485f18..c912475ac21 100644
--- a/components/src/forms/ToggleField.tsx
+++ b/components/src/forms/ToggleField.tsx
@@ -1,12 +1,13 @@
-import type * as React from 'react'
 import cx from 'classnames'
 import { Icon } from '../icons'
 
+import type { ChangeEvent } from 'react'
+
 import styles from './forms.module.css'
 
 export interface ToggleFieldProps {
   /** change handler */
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => unknown
+  onChange: (event: ChangeEvent<HTMLInputElement>) => unknown
   /** checkbox is checked if value is true */
   value?: boolean
   /** classes to apply */
diff --git a/components/src/hardware-sim/BaseDeck/SingleSlotFixture.tsx b/components/src/hardware-sim/BaseDeck/SingleSlotFixture.tsx
index 518347b9dd7..a95b690e8a9 100644
--- a/components/src/hardware-sim/BaseDeck/SingleSlotFixture.tsx
+++ b/components/src/hardware-sim/BaseDeck/SingleSlotFixture.tsx
@@ -1,20 +1,19 @@
-import type * as React from 'react'
-
 import { SlotBase } from './SlotBase'
 import { SlotClip } from './SlotClip'
 
+import type { SVGProps } from 'react'
 import type {
   CutoutId,
   DeckDefinition,
   ModuleType,
 } from '@opentrons/shared-data'
 
-interface SingleSlotFixtureProps extends React.SVGProps<SVGGElement> {
+interface SingleSlotFixtureProps extends SVGProps<SVGGElement> {
   cutoutId: CutoutId
   deckDefinition: DeckDefinition
   moduleType?: ModuleType
-  fixtureBaseColor?: React.SVGProps<SVGPathElement>['fill']
-  slotClipColor?: React.SVGProps<SVGPathElement>['stroke']
+  fixtureBaseColor?: SVGProps<SVGPathElement>['fill']
+  slotClipColor?: SVGProps<SVGPathElement>['stroke']
   showExpansion?: boolean
 }
 
diff --git a/components/src/hardware-sim/BaseDeck/SlotBase.tsx b/components/src/hardware-sim/BaseDeck/SlotBase.tsx
index 1da25dc72da..7bcb2c3d24a 100644
--- a/components/src/hardware-sim/BaseDeck/SlotBase.tsx
+++ b/components/src/hardware-sim/BaseDeck/SlotBase.tsx
@@ -1,5 +1,5 @@
-import type * as React from 'react'
+import type { SVGProps } from 'react'
 
-export function SlotBase(props: React.SVGProps<SVGPathElement>): JSX.Element {
+export function SlotBase(props: SVGProps<SVGPathElement>): JSX.Element {
   return <path fill="#CCCCCC" {...props} />
 }
diff --git a/components/src/hardware-sim/BaseDeck/SlotClip.tsx b/components/src/hardware-sim/BaseDeck/SlotClip.tsx
index 281a79603ea..8bb50d4649e 100644
--- a/components/src/hardware-sim/BaseDeck/SlotClip.tsx
+++ b/components/src/hardware-sim/BaseDeck/SlotClip.tsx
@@ -1,8 +1,8 @@
-import type * as React from 'react'
-
 import { COLORS } from '../../helix-design-system'
 
-export function SlotClip(props: React.SVGProps<SVGPathElement>): JSX.Element {
+import type { SVGProps } from 'react'
+
+export function SlotClip(props: SVGProps<SVGPathElement>): JSX.Element {
   return (
     <path
       fill="none"
diff --git a/components/src/hardware-sim/BaseDeck/StagingAreaFixture.tsx b/components/src/hardware-sim/BaseDeck/StagingAreaFixture.tsx
index 182084167c2..4ba7b857f3f 100644
--- a/components/src/hardware-sim/BaseDeck/StagingAreaFixture.tsx
+++ b/components/src/hardware-sim/BaseDeck/StagingAreaFixture.tsx
@@ -1,8 +1,7 @@
-import type * as React from 'react'
-
 import { SlotBase } from './SlotBase'
 import { SlotClip } from './SlotClip'
 
+import type { SVGProps } from 'react'
 import type { DeckDefinition, ModuleType } from '@opentrons/shared-data'
 
 export type StagingAreaLocation =
@@ -11,12 +10,12 @@ export type StagingAreaLocation =
   | 'cutoutC3'
   | 'cutoutD3'
 
-interface StagingAreaFixtureProps extends React.SVGProps<SVGGElement> {
+interface StagingAreaFixtureProps extends SVGProps<SVGGElement> {
   cutoutId: StagingAreaLocation
   deckDefinition: DeckDefinition
   moduleType?: ModuleType
-  fixtureBaseColor?: React.SVGProps<SVGPathElement>['fill']
-  slotClipColor?: React.SVGProps<SVGPathElement>['stroke']
+  fixtureBaseColor?: SVGProps<SVGPathElement>['fill']
+  slotClipColor?: SVGProps<SVGPathElement>['stroke']
   showExtensions?: boolean
 }
 
diff --git a/components/src/hardware-sim/BaseDeck/WasteChuteFixture.tsx b/components/src/hardware-sim/BaseDeck/WasteChuteFixture.tsx
index cc977a4e8b6..f2cfa05e42a 100644
--- a/components/src/hardware-sim/BaseDeck/WasteChuteFixture.tsx
+++ b/components/src/hardware-sim/BaseDeck/WasteChuteFixture.tsx
@@ -1,5 +1,3 @@
-import type * as React from 'react'
-
 import { Icon } from '../../icons'
 import { Flex, Text } from '../../primitives'
 import {
@@ -18,6 +16,8 @@ import type {
   DeckDefinition,
   ModuleType,
 } from '@opentrons/shared-data'
+
+import type { SVGProps } from 'react'
 import type { DeckLabelProps } from '../../molecules'
 
 const WASTE_CHUTE_WIDTH = 130
@@ -25,11 +25,11 @@ const WASTE_CHUTE_HEIGHT = 138
 const WASTE_CHUTE_X = 322
 const WASTE_CHUTE_Y = -51
 const TAG_HEIGHT = 28
-interface WasteChuteFixtureProps extends React.SVGProps<SVGGElement> {
+interface WasteChuteFixtureProps extends SVGProps<SVGGElement> {
   cutoutId: typeof WASTE_CHUTE_CUTOUT
   deckDefinition: DeckDefinition
   moduleType?: ModuleType
-  fixtureBaseColor?: React.SVGProps<SVGPathElement>['fill']
+  fixtureBaseColor?: SVGProps<SVGPathElement>['fill']
   wasteChuteColor?: string
   showExtensions?: boolean
   /** optional prop to highlight the border of the wasteChute */
diff --git a/components/src/hardware-sim/BaseDeck/WasteChuteStagingAreaFixture.tsx b/components/src/hardware-sim/BaseDeck/WasteChuteStagingAreaFixture.tsx
index 17539777257..808f276dda0 100644
--- a/components/src/hardware-sim/BaseDeck/WasteChuteStagingAreaFixture.tsx
+++ b/components/src/hardware-sim/BaseDeck/WasteChuteStagingAreaFixture.tsx
@@ -1,5 +1,3 @@
-import type * as React from 'react'
-
 import { WASTE_CHUTE_CUTOUT } from '@opentrons/shared-data'
 
 import { COLORS } from '../../helix-design-system'
@@ -7,16 +5,16 @@ import { SlotBase } from './SlotBase'
 import { SlotClip } from './SlotClip'
 import { WasteChute } from './WasteChuteFixture'
 
+import type { SVGProps } from 'react'
 import type { DeckDefinition, ModuleType } from '@opentrons/shared-data'
 import type { DeckLabelProps } from '../../molecules'
 
-interface WasteChuteStagingAreaFixtureProps
-  extends React.SVGProps<SVGGElement> {
+interface WasteChuteStagingAreaFixtureProps extends SVGProps<SVGGElement> {
   cutoutId: typeof WASTE_CHUTE_CUTOUT
   deckDefinition: DeckDefinition
   moduleType?: ModuleType
-  fixtureBaseColor?: React.SVGProps<SVGPathElement>['fill']
-  slotClipColor?: React.SVGProps<SVGPathElement>['stroke']
+  fixtureBaseColor?: SVGProps<SVGPathElement>['fill']
+  slotClipColor?: SVGProps<SVGPathElement>['stroke']
   wasteChuteColor?: string
   showExtensions?: boolean
   showHighlight?: boolean
diff --git a/components/src/hardware-sim/Deck/MoveLabwareOnDeck.tsx b/components/src/hardware-sim/Deck/MoveLabwareOnDeck.tsx
index debc81487ca..ff1cf8483b3 100644
--- a/components/src/hardware-sim/Deck/MoveLabwareOnDeck.tsx
+++ b/components/src/hardware-sim/Deck/MoveLabwareOnDeck.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useLayoutEffect, useMemo, useRef, useState } from 'react'
 import styled from 'styled-components'
 import { animated, useSpring, easings } from '@react-spring/web'
 import {
@@ -22,6 +22,8 @@ import type {
   DeckDefinition,
   DeckConfiguration,
 } from '@opentrons/shared-data'
+
+import type { ReactNode } from 'react'
 import type { StyleProps } from '../../primitives'
 
 const getModulePosition = (
@@ -136,7 +138,7 @@ interface MoveLabwareOnDeckProps extends StyleProps {
   loadedModules: LoadedModule[]
   loadedLabware: LoadedLabware[]
   deckConfig: DeckConfiguration
-  backgroundItems?: React.ReactNode
+  backgroundItems?: ReactNode
   deckFill?: string
 }
 export function MoveLabwareOnDeck(
@@ -153,9 +155,7 @@ export function MoveLabwareOnDeck(
     backgroundItems = null,
     ...styleProps
   } = props
-  const deckDef = React.useMemo(() => getDeckDefFromRobotType(robotType), [
-    robotType,
-  ])
+  const deckDef = useMemo(() => getDeckDefFromRobotType(robotType), [robotType])
 
   const initialSlotId =
     initialLabwareLocation === 'offDeck' ||
@@ -252,9 +252,9 @@ function usePositionChangeReset(
   initialPosition: { x: number; y: number },
   finalPosition: { x: number; y: number }
 ): boolean {
-  const [shouldReset, setShouldReset] = React.useState(false)
+  const [shouldReset, setShouldReset] = useState(false)
 
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (shouldReset) {
       setShouldReset(false)
       return
@@ -274,8 +274,8 @@ function usePositionChangeReset(
     previousFinalRef.current = finalPosition
   }, [initialPosition, finalPosition])
 
-  const previousInitialRef = React.useRef(initialPosition)
-  const previousFinalRef = React.useRef(finalPosition)
+  const previousInitialRef = useRef(initialPosition)
+  const previousFinalRef = useRef(finalPosition)
 
   return shouldReset
 }
diff --git a/components/src/hardware-sim/Deck/RobotCoordsForeignDiv.tsx b/components/src/hardware-sim/Deck/RobotCoordsForeignDiv.tsx
index 27bb77522d0..a831b282cff 100644
--- a/components/src/hardware-sim/Deck/RobotCoordsForeignDiv.tsx
+++ b/components/src/hardware-sim/Deck/RobotCoordsForeignDiv.tsx
@@ -1,14 +1,15 @@
-import type * as React from 'react'
 import { Box } from '../../primitives'
 
+import type { ComponentProps, ReactNode } from 'react'
+
 export interface RobotCoordsForeignDivProps {
   width?: string | number
   height?: string | number
   x?: string | number
   y?: string | number
-  children?: React.ReactNode
+  children?: ReactNode
   outerProps?: any
-  innerDivProps?: React.ComponentProps<typeof Box>
+  innerDivProps?: ComponentProps<typeof Box>
   transformWithSVG?: boolean
   extraTransform?: string
 }
diff --git a/components/src/hardware-sim/Deck/RobotCoordsForeignObject.tsx b/components/src/hardware-sim/Deck/RobotCoordsForeignObject.tsx
index e5c1db1d01d..e303eb18bf1 100644
--- a/components/src/hardware-sim/Deck/RobotCoordsForeignObject.tsx
+++ b/components/src/hardware-sim/Deck/RobotCoordsForeignObject.tsx
@@ -1,15 +1,16 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import { Flex, ForeignObject } from '../../primitives'
 
+import type { ComponentProps, ReactNode } from 'react'
+
 export interface RobotCoordsForeignObjectProps {
   width: string | number
   height: string | number
   x: string | number
   y: string | number
-  children?: React.ReactNode
-  foreignObjectProps?: React.ComponentProps<typeof ForeignObject>
-  flexProps?: React.ComponentProps<typeof Flex>
+  children?: ReactNode
+  foreignObjectProps?: ComponentProps<typeof ForeignObject>
+  flexProps?: ComponentProps<typeof Flex>
 }
 
 export const RobotCoordsForeignObject = (
diff --git a/components/src/hardware-sim/Deck/RobotCoordsText.tsx b/components/src/hardware-sim/Deck/RobotCoordsText.tsx
index 92dabd1cfc4..b42dd8b1a5c 100644
--- a/components/src/hardware-sim/Deck/RobotCoordsText.tsx
+++ b/components/src/hardware-sim/Deck/RobotCoordsText.tsx
@@ -1,10 +1,11 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 
-export interface RobotCoordsTextProps extends React.ComponentProps<'text'> {
+import type { ComponentProps, ReactNode } from 'react'
+
+export interface RobotCoordsTextProps extends ComponentProps<'text'> {
   x: number
   y: number
-  children?: React.ReactNode
+  children?: ReactNode
   canHighlight?: boolean
 }
 
diff --git a/components/src/hardware-sim/DeckConfigurator/index.tsx b/components/src/hardware-sim/DeckConfigurator/index.tsx
index 65bb6968a45..4a90a182cee 100644
--- a/components/src/hardware-sim/DeckConfigurator/index.tsx
+++ b/components/src/hardware-sim/DeckConfigurator/index.tsx
@@ -1,5 +1,3 @@
-import type * as React from 'react'
-
 import {
   getDeckDefFromRobotType,
   FLEX_ROBOT_TYPE,
@@ -27,6 +25,7 @@ import { TrashBinConfigFixture } from './TrashBinConfigFixture'
 import { WasteChuteConfigFixture } from './WasteChuteConfigFixture'
 import { StaticFixture } from './StaticFixture'
 
+import type { ReactNode } from 'react'
 import type {
   CutoutFixtureId,
   CutoutId,
@@ -51,7 +50,7 @@ interface DeckConfiguratorProps {
   darkFill?: string
   editableCutoutIds?: CutoutId[]
   showExpansion?: boolean
-  children?: React.ReactNode
+  children?: ReactNode
   additionalStaticFixtures?: Array<{ location: CutoutId; label: string }>
   height?: string
   selectedCutoutId?: CutoutId
diff --git a/components/src/hardware-sim/DeckSlotLocation/index.tsx b/components/src/hardware-sim/DeckSlotLocation/index.tsx
index 09f912007e0..9cdd5dedca3 100644
--- a/components/src/hardware-sim/DeckSlotLocation/index.tsx
+++ b/components/src/hardware-sim/DeckSlotLocation/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import {
   getPositionFromSlotId,
   OT2_ROBOT_TYPE,
@@ -7,17 +6,18 @@ import {
 
 import { SlotBase } from '../BaseDeck/SlotBase'
 
+import type { SVGProps } from 'react'
 import type {
   DeckDefinition,
   DeckSlot,
   RobotType,
 } from '@opentrons/shared-data'
 
-interface LegacyDeckSlotLocationProps extends React.SVGProps<SVGGElement> {
+interface LegacyDeckSlotLocationProps extends SVGProps<SVGGElement> {
   robotType: RobotType
   slotName: DeckSlot['id']
-  slotBaseColor?: React.SVGProps<SVGPathElement>['fill']
-  slotClipColor?: React.SVGProps<SVGPathElement>['stroke']
+  slotBaseColor?: SVGProps<SVGPathElement>['fill']
+  slotClipColor?: SVGProps<SVGPathElement>['stroke']
 }
 
 type AddressableAreaFromDeckDef = typeof ot2DeckDefV5.locations.addressableAreas[number]
diff --git a/components/src/hardware-sim/Labware/Labware.tsx b/components/src/hardware-sim/Labware/Labware.tsx
index d93c8f95667..5d461cdd5b8 100644
--- a/components/src/hardware-sim/Labware/Labware.tsx
+++ b/components/src/hardware-sim/Labware/Labware.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { Fragment, memo } from 'react'
 import styled from 'styled-components'
 import map from 'lodash/map'
 
@@ -19,6 +19,8 @@ import type {
   WellFill,
   WellStroke,
 } from './labwareInternals/types'
+
+import type { RefObject } from 'react'
 import type { LabwareAdapterLoadName } from './LabwareAdapter'
 
 export interface LabwareProps {
@@ -42,7 +44,7 @@ export interface LabwareProps {
   onMouseEnterWell?: (e: WellMouseEvent) => unknown
   /** Optional callback, called with WellMouseEvent args onMouseLeave */
   onMouseLeaveWell?: (e: WellMouseEvent) => unknown
-  gRef?: React.RefObject<SVGGElement>
+  gRef?: RefObject<SVGGElement>
   onLabwareClick?: () => void
   /** Hide labware outline */
   hideOutline?: boolean
@@ -50,7 +52,7 @@ export interface LabwareProps {
   isInteractive?: boolean
 }
 
-const TipDecoration = React.memo(function TipDecoration(props: {
+const TipDecoration = memo(function TipDecoration(props: {
   well: LabwareWell
 }) {
   const { well } = props
@@ -141,7 +143,7 @@ export const Labware = (props: LabwareProps): JSX.Element => {
         <g>
           {map(definition.wells, (well, wellName) => {
             return (
-              <React.Fragment key={wellName}>
+              <Fragment key={wellName}>
                 <Well
                   wellName={wellName}
                   well={well}
@@ -156,7 +158,7 @@ export const Labware = (props: LabwareProps): JSX.Element => {
                 />
 
                 {isTiprack ? <TipDecoration well={well} /> : null}
-              </React.Fragment>
+              </Fragment>
             )
           })}
         </g>
diff --git a/components/src/hardware-sim/Labware/LabwareRender.tsx b/components/src/hardware-sim/Labware/LabwareRender.tsx
index 64f2f50eaef..935024238f6 100644
--- a/components/src/hardware-sim/Labware/LabwareRender.tsx
+++ b/components/src/hardware-sim/Labware/LabwareRender.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import {
   WellLabels,
   StyledWells,
@@ -17,6 +16,8 @@ import type {
   WellStroke,
   WellGroup,
 } from './labwareInternals/types'
+
+import type { RefObject } from 'react'
 import type { LabwareAdapterLoadName } from './LabwareAdapter'
 
 export const WELL_LABEL_OPTIONS = {
@@ -57,7 +58,7 @@ export interface LabwareRenderProps {
   onMouseEnterWell?: (e: WellMouseEvent) => unknown
   /** Optional callback, called with WellMouseEvent args onMouseLeave */
   onMouseLeaveWell?: (e: WellMouseEvent) => unknown
-  gRef?: React.RefObject<SVGGElement>
+  gRef?: RefObject<SVGGElement>
   onLabwareClick?: () => void
   showBorder?: boolean
   strokeColor?: string
diff --git a/components/src/hardware-sim/Labware/LabwareStackRender.tsx b/components/src/hardware-sim/Labware/LabwareStackRender.tsx
index 92cdc64779f..2d2521adb22 100644
--- a/components/src/hardware-sim/Labware/LabwareStackRender.tsx
+++ b/components/src/hardware-sim/Labware/LabwareStackRender.tsx
@@ -1,13 +1,14 @@
-import type * as React from 'react'
 import { WellLabels, StaticLabware } from './labwareInternals'
 import { LabwareAdapter, labwareAdapterLoadNames } from './LabwareAdapter'
 import { COLORS } from '../../helix-design-system'
 import { Svg } from '../..'
 
+import type { RefObject } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type { HighlightedWellLabels } from './labwareInternals/types'
 import type { LabwareAdapterLoadName } from './LabwareAdapter'
 import type { WellLabelOption } from '../..'
+
 const HIGHLIGHT_COLOR = COLORS.blue30
 const STROKE_WIDTH = 1
 const SKEW_ANGLE_DEGREES = 30
@@ -26,7 +27,7 @@ export interface LabwareStackRenderProps {
   highlightTop: boolean
   /** highlight bottom labware if it exists */
   highlightBottom: boolean
-  gRef?: React.RefObject<SVGGElement>
+  gRef?: RefObject<SVGGElement>
   definitionBottom?: LabwareDefinition2 | null
   shouldRotateAdapterOrientation?: boolean
   /** option to show well labels inside or outside of labware outline */
diff --git a/components/src/hardware-sim/Labware/labwareInternals/FilledWells.tsx b/components/src/hardware-sim/Labware/labwareInternals/FilledWells.tsx
index a8a2bfc14a2..22bf1933224 100644
--- a/components/src/hardware-sim/Labware/labwareInternals/FilledWells.tsx
+++ b/components/src/hardware-sim/Labware/labwareInternals/FilledWells.tsx
@@ -1,9 +1,11 @@
-import * as React from 'react'
+import { memo } from 'react'
 import map from 'lodash/map'
 import { COLORS } from '../../../helix-design-system'
 import { Well } from './Well'
-import type { LabwareDefinition2 } from '@opentrons/shared-data'
+
+import type { MemoExoticComponent, ReactNode } from 'react'
 import type { CSSProperties } from 'styled-components'
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
 
 export interface FilledWellsProps {
   definition: LabwareDefinition2
@@ -15,7 +17,7 @@ function FilledWellsComponent(props: FilledWellsProps): JSX.Element {
   const { definition, fillByWell, strokeColor = COLORS.black90 } = props
   return (
     <>
-      {map<Record<string, CSSProperties['fill']>, React.ReactNode>(
+      {map<Record<string, CSSProperties['fill']>, ReactNode>(
         fillByWell,
         (color: CSSProperties['fill'], wellName: string): JSX.Element => {
           return (
@@ -34,6 +36,6 @@ function FilledWellsComponent(props: FilledWellsProps): JSX.Element {
   )
 }
 
-export const FilledWells: React.MemoExoticComponent<
+export const FilledWells: MemoExoticComponent<
   typeof FilledWellsComponent
-> = React.memo(FilledWellsComponent)
+> = memo(FilledWellsComponent)
diff --git a/components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx b/components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx
index c9ade2facd9..aa2e9799e06 100644
--- a/components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx
+++ b/components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx
@@ -1,7 +1,7 @@
-import type * as React from 'react'
 import { SLOT_RENDER_WIDTH, SLOT_RENDER_HEIGHT } from '@opentrons/shared-data'
 import { COLORS } from '../../../helix-design-system'
 
+import type { SVGProps } from 'react'
 import type { CSSProperties } from 'styled-components'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 
@@ -105,7 +105,7 @@ export function LabwareOutline(props: LabwareOutlineProps): JSX.Element {
   )
 }
 
-interface LabwareBorderProps extends React.SVGProps<SVGRectElement> {
+interface LabwareBorderProps extends SVGProps<SVGRectElement> {
   borderThickness: number
   xDimension: number
   yDimension: number
diff --git a/components/src/hardware-sim/Labware/labwareInternals/LabwareWellLabels.tsx b/components/src/hardware-sim/Labware/labwareInternals/LabwareWellLabels.tsx
index 84de5632085..5e27c7be997 100644
--- a/components/src/hardware-sim/Labware/labwareInternals/LabwareWellLabels.tsx
+++ b/components/src/hardware-sim/Labware/labwareInternals/LabwareWellLabels.tsx
@@ -1,10 +1,11 @@
-import * as React from 'react'
+import { memo } from 'react'
 import { C_BLACK, C_BLUE } from '../../../styles/colors'
 import { RobotCoordsText } from '../../Deck'
+import { TYPOGRAPHY } from '../../../ui-style-constants'
 
+import type { MemoExoticComponent } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type { HighlightedWellLabels } from './types'
-import { TYPOGRAPHY } from '../../../ui-style-constants'
 
 // magic layout numbers to make the letters close to the edges of the labware
 // evaluate values for inside/outside labware outline when needed
@@ -113,6 +114,6 @@ export function LabwareWellLabelsComponent(
  * for use in Labware.tsx component
  * has ODD-specific styling
  */
-export const LabwareWellLabels: React.MemoExoticComponent<
+export const LabwareWellLabels: MemoExoticComponent<
   typeof LabwareWellLabelsComponent
-> = React.memo(LabwareWellLabelsComponent)
+> = memo(LabwareWellLabelsComponent)
diff --git a/components/src/hardware-sim/Labware/labwareInternals/StaticLabware.tsx b/components/src/hardware-sim/Labware/labwareInternals/StaticLabware.tsx
index 878b41aa661..30d11dd29df 100644
--- a/components/src/hardware-sim/Labware/labwareInternals/StaticLabware.tsx
+++ b/components/src/hardware-sim/Labware/labwareInternals/StaticLabware.tsx
@@ -1,5 +1,5 @@
 // Render labware definition to SVG. XY is in robot coordinates.
-import * as React from 'react'
+import { memo, Fragment } from 'react'
 import styled from 'styled-components'
 import flatMap from 'lodash/flatMap'
 
@@ -8,6 +8,7 @@ import { Well } from './Well'
 import { STYLE_BY_WELL_CONTENTS } from './StyledWells'
 import { COLORS } from '../../../helix-design-system'
 
+import type { MemoExoticComponent } from 'react'
 import type { LabwareDefinition2, LabwareWell } from '@opentrons/shared-data'
 import type { WellMouseEvent, WellStroke } from './types'
 import type { CSSProperties } from 'styled-components'
@@ -32,7 +33,7 @@ export interface StaticLabwareProps {
   showBorder?: boolean
 }
 
-const TipDecoration = React.memo(function TipDecoration(props: {
+const TipDecoration = memo(function TipDecoration(props: {
   well: LabwareWell
 }) {
   const { well } = props
@@ -90,7 +91,7 @@ export function StaticLabwareComponent(props: StaticLabwareProps): JSX.Element {
           (row: string[], i: number, c: string[][]) => {
             return row.map(wellName => {
               return (
-                <React.Fragment key={wellName}>
+                <Fragment key={wellName}>
                   <Well
                     wellName={wellName}
                     well={definition.wells[wellName]}
@@ -106,7 +107,7 @@ export function StaticLabwareComponent(props: StaticLabwareProps): JSX.Element {
                   {isTiprack ? (
                     <TipDecoration well={definition.wells[wellName]} />
                   ) : null}
-                </React.Fragment>
+                </Fragment>
               )
             })
           }
@@ -116,6 +117,6 @@ export function StaticLabwareComponent(props: StaticLabwareProps): JSX.Element {
   )
 }
 
-export const StaticLabware: React.MemoExoticComponent<
+export const StaticLabware: MemoExoticComponent<
   typeof StaticLabwareComponent
-> = React.memo(StaticLabwareComponent)
+> = memo(StaticLabwareComponent)
diff --git a/components/src/hardware-sim/Labware/labwareInternals/StrokedWells.tsx b/components/src/hardware-sim/Labware/labwareInternals/StrokedWells.tsx
index 2db4d61da33..cad018f3cd7 100644
--- a/components/src/hardware-sim/Labware/labwareInternals/StrokedWells.tsx
+++ b/components/src/hardware-sim/Labware/labwareInternals/StrokedWells.tsx
@@ -1,10 +1,12 @@
-import * as React from 'react'
+import { memo } from 'react'
 import map from 'lodash/map'
 import { Well } from './Well'
-import type { LabwareDefinition2 } from '@opentrons/shared-data'
-import type { CSSProperties } from 'styled-components'
 import { COLORS } from '../../../helix-design-system'
 
+import type { MemoExoticComponent, ReactNode } from 'react'
+import type { CSSProperties } from 'styled-components'
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+
 export interface StrokedWellProps {
   definition: LabwareDefinition2
   strokeByWell: Record<string, CSSProperties['stroke']>
@@ -14,7 +16,7 @@ export function StrokedWellsComponent(props: StrokedWellProps): JSX.Element {
   const { definition, strokeByWell } = props
   return (
     <>
-      {map<Record<string, CSSProperties['stroke']>, React.ReactNode>(
+      {map<Record<string, CSSProperties['stroke']>, ReactNode>(
         strokeByWell,
         (color: CSSProperties['stroke'], wellName: string): JSX.Element => {
           return (
@@ -33,6 +35,6 @@ export function StrokedWellsComponent(props: StrokedWellProps): JSX.Element {
   )
 }
 
-export const StrokedWells: React.MemoExoticComponent<
+export const StrokedWells: MemoExoticComponent<
   typeof StrokedWellsComponent
-> = React.memo(StrokedWellsComponent)
+> = memo(StrokedWellsComponent)
diff --git a/components/src/hardware-sim/Labware/labwareInternals/StyledWells.tsx b/components/src/hardware-sim/Labware/labwareInternals/StyledWells.tsx
index bb377135024..eeb89fd1d5b 100644
--- a/components/src/hardware-sim/Labware/labwareInternals/StyledWells.tsx
+++ b/components/src/hardware-sim/Labware/labwareInternals/StyledWells.tsx
@@ -1,6 +1,8 @@
-import * as React from 'react'
+import { memo } from 'react'
 import { Well } from './Well'
 import { COLORS } from '../../../helix-design-system'
+
+import type { CSSProperties, MemoExoticComponent } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type { WellGroup } from './types'
 
@@ -19,9 +21,9 @@ export interface StyledWellProps {
 
 export const STYLE_BY_WELL_CONTENTS: {
   [wellContents in WellContents]: {
-    stroke: React.CSSProperties['stroke']
-    fill: React.CSSProperties['fill']
-    strokeWidth: React.CSSProperties['strokeWidth']
+    stroke: CSSProperties['stroke']
+    fill: CSSProperties['fill']
+    strokeWidth: CSSProperties['strokeWidth']
   }
 } = {
   highlightedWell: {
@@ -72,6 +74,6 @@ function StyledWellsComponent(props: StyledWellProps): JSX.Element {
   )
 }
 
-export const StyledWells: React.MemoExoticComponent<
+export const StyledWells: MemoExoticComponent<
   typeof StyledWellsComponent
-> = React.memo(StyledWellsComponent)
+> = memo(StyledWellsComponent)
diff --git a/components/src/hardware-sim/Labware/labwareInternals/Well.tsx b/components/src/hardware-sim/Labware/labwareInternals/Well.tsx
index 850d99f49d9..63e7e1b087f 100644
--- a/components/src/hardware-sim/Labware/labwareInternals/Well.tsx
+++ b/components/src/hardware-sim/Labware/labwareInternals/Well.tsx
@@ -1,7 +1,8 @@
-import * as React from 'react'
-
-import { COLORS } from '../../../helix-design-system'
+import { memo } from 'react'
 import { INTERACTIVE_WELL_DATA_ATTRIBUTE } from '@opentrons/shared-data'
+import { COLORS } from '../../../helix-design-system'
+
+import type { CSSProperties, MouseEvent, MemoExoticComponent } from 'react'
 import type { LabwareWell } from '@opentrons/shared-data'
 import type { WellMouseEvent } from './types'
 import type { StyleProps } from '../../../primitives'
@@ -10,9 +11,9 @@ export interface WellProps extends StyleProps {
   wellName: string
   /** well object from labware definition */
   well: LabwareWell
-  stroke: React.CSSProperties['stroke']
-  strokeWidth: React.CSSProperties['strokeWidth']
-  fill: React.CSSProperties['fill']
+  stroke: CSSProperties['stroke']
+  strokeWidth: CSSProperties['strokeWidth']
+  fill: CSSProperties['fill']
   /** Optional callback, called with WellMouseEvent args onMouseOver */
   onMouseEnterWell?: (e: WellMouseEvent) => unknown
   onMouseLeaveWell?: (e: WellMouseEvent) => unknown
@@ -35,18 +36,18 @@ export function WellComponent(props: WellProps): JSX.Element {
 
   const wellFill = fill ?? COLORS.white
 
-  const pointerEvents: React.CSSProperties['pointerEvents'] = isInteractive
+  const pointerEvents: CSSProperties['pointerEvents'] = isInteractive
     ? 'auto'
     : 'none'
   const commonProps = {
     [INTERACTIVE_WELL_DATA_ATTRIBUTE]: isInteractive ? wellName : undefined,
     onMouseEnter:
       onMouseEnterWell != null
-        ? (event: React.MouseEvent) => onMouseEnterWell({ wellName, event })
+        ? (event: MouseEvent) => onMouseEnterWell({ wellName, event })
         : undefined,
     onMouseLeave:
       onMouseLeaveWell != null
-        ? (event: React.MouseEvent) => onMouseLeaveWell({ wellName, event })
+        ? (event: MouseEvent) => onMouseLeaveWell({ wellName, event })
         : undefined,
     style: { pointerEvents, stroke, strokeWidth, fill: wellFill },
   }
@@ -69,6 +70,6 @@ export function WellComponent(props: WellProps): JSX.Element {
   )
 }
 
-export const Well: React.MemoExoticComponent<typeof WellComponent> = React.memo(
+export const Well: MemoExoticComponent<typeof WellComponent> = memo(
   WellComponent
 )
diff --git a/components/src/hardware-sim/Labware/labwareInternals/WellLabels.tsx b/components/src/hardware-sim/Labware/labwareInternals/WellLabels.tsx
index 59fa2723c34..672ed19d73d 100644
--- a/components/src/hardware-sim/Labware/labwareInternals/WellLabels.tsx
+++ b/components/src/hardware-sim/Labware/labwareInternals/WellLabels.tsx
@@ -1,8 +1,10 @@
-import * as React from 'react'
+import { memo } from 'react'
 import { C_BLACK, C_BLUE } from '../../../styles/colors'
 import { RobotCoordsText } from '../../Deck'
 import { WELL_LABEL_OPTIONS } from '../LabwareRender'
 import { COLORS } from '../../../helix-design-system'
+
+import type { MemoExoticComponent } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type { WellLabelOption } from '../LabwareRender'
 import type { HighlightedWellLabels } from './types'
@@ -116,6 +118,6 @@ export function WellLabelsComponent(props: WellLabelsProps): JSX.Element {
   )
 }
 
-export const WellLabels: React.MemoExoticComponent<
-  typeof WellLabelsComponent
-> = React.memo(WellLabelsComponent)
+export const WellLabels: MemoExoticComponent<typeof WellLabelsComponent> = memo(
+  WellLabelsComponent
+)
diff --git a/components/src/hardware-sim/Labware/labwareInternals/types.ts b/components/src/hardware-sim/Labware/labwareInternals/types.ts
index 337a0932a03..2f4f9be5227 100644
--- a/components/src/hardware-sim/Labware/labwareInternals/types.ts
+++ b/components/src/hardware-sim/Labware/labwareInternals/types.ts
@@ -1,8 +1,8 @@
-import type * as React from 'react'
+import type { MouseEvent } from 'react'
 
 export interface WellMouseEvent {
   wellName: string
-  event: React.MouseEvent
+  event: MouseEvent
 }
 
 // wellName to CSS color, eg {'A1': '#123456'}
diff --git a/components/src/hardware-sim/Module/ModuleTag.tsx b/components/src/hardware-sim/Module/ModuleTag.tsx
index ae49ff2c9bc..ebab7e7916b 100644
--- a/components/src/hardware-sim/Module/ModuleTag.tsx
+++ b/components/src/hardware-sim/Module/ModuleTag.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import {
   RobotCoordsForeignDiv,
   C_MED_LIGHT_GRAY,
@@ -7,12 +6,14 @@ import {
   ALIGN_CENTER,
 } from '../../'
 
+import type { ReactNode } from 'react'
+
 export interface ModuleTagProps {
   x: number
   y: number
   height: number
   width: number
-  children: React.ReactNode
+  children: ReactNode
 }
 
 export const ModuleTag = (props: ModuleTagProps): JSX.Element => {
diff --git a/components/src/hardware-sim/Module/index.tsx b/components/src/hardware-sim/Module/index.tsx
index eb1b5b038a1..e75c8741663 100644
--- a/components/src/hardware-sim/Module/index.tsx
+++ b/components/src/hardware-sim/Module/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import {
   ABSORBANCE_READER_TYPE,
   getModuleType,
@@ -28,6 +27,7 @@ import { MagneticBlock } from './MagneticBlock'
 import { MagneticModule } from './MagneticModule'
 import { PlateReader } from './PlateReader'
 
+import type { ComponentProps, ReactNode } from 'react'
 import type {
   ModuleDefinition,
   ThermocyclerModuleModel,
@@ -43,12 +43,12 @@ interface Props {
   def: ModuleDefinition
   orientation?: 'left' | 'right'
   innerProps?:
-    | React.ComponentProps<typeof Thermocycler>
-    | React.ComponentProps<typeof HeaterShaker>
-    | React.ComponentProps<typeof Temperature>
+    | ComponentProps<typeof Thermocycler>
+    | ComponentProps<typeof HeaterShaker>
+    | ComponentProps<typeof Temperature>
     | {}
-  statusInfo?: React.ReactNode // contents of small status rectangle, not displayed if absent
-  children?: React.ReactNode // contents to be rendered on top of the labware mating surface of the module
+  statusInfo?: ReactNode // contents of small status rectangle, not displayed if absent
+  children?: ReactNode // contents to be rendered on top of the labware mating surface of the module
   targetSlotId?: string
   targetDeckId?: string
 }
@@ -198,15 +198,11 @@ export const Module = (props: Props): JSX.Element => {
     moduleViz = <Thermocycler {...thermocyclerProps} />
   } else if (moduleType === HEATERSHAKER_MODULE_TYPE) {
     moduleViz = (
-      <HeaterShaker
-        {...(innerProps as React.ComponentProps<typeof HeaterShaker>)}
-      />
+      <HeaterShaker {...(innerProps as ComponentProps<typeof HeaterShaker>)} />
     )
   } else if (moduleType === TEMPERATURE_MODULE_TYPE) {
     moduleViz = (
-      <Temperature
-        {...(innerProps as React.ComponentProps<typeof Temperature>)}
-      />
+      <Temperature {...(innerProps as ComponentProps<typeof Temperature>)} />
     )
   } else if (moduleType === ABSORBANCE_READER_TYPE) {
     moduleViz = <PlateReader />
diff --git a/components/src/hardware-sim/Pipette/__tests__/PipetteRender.test.tsx b/components/src/hardware-sim/Pipette/__tests__/PipetteRender.test.tsx
index bf94221fe37..d9c56e1baf1 100644
--- a/components/src/hardware-sim/Pipette/__tests__/PipetteRender.test.tsx
+++ b/components/src/hardware-sim/Pipette/__tests__/PipetteRender.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 import { fixtureTiprack300ul as _fixtureTiprack300ul } from '@opentrons/shared-data'
@@ -14,6 +13,7 @@ import {
   MULTI_CHANNEL_PIPETTE_HEIGHT,
 } from '../constants'
 
+import type { ComponentProps } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 
 vi.mock('../../Deck/RobotCoordsForeignDiv')
@@ -22,12 +22,12 @@ vi.mock('../EightEmanatingNozzles')
 
 const fixtureTiprack300Ul = _fixtureTiprack300ul as LabwareDefinition2
 
-const render = (props: React.ComponentProps<typeof PipetteRender>) => {
+const render = (props: ComponentProps<typeof PipetteRender>) => {
   return renderWithProviders(<PipetteRender {...props} />)[0]
 }
 
 describe('PipetteRender', () => {
-  let props: React.ComponentProps<typeof PipetteRender>
+  let props: ComponentProps<typeof PipetteRender>
   beforeEach(() => {
     props = {
       labwareDef: fixtureTiprack300Ul,
diff --git a/components/src/hardware-sim/ProtocolDeck/LabwareInfo.tsx b/components/src/hardware-sim/ProtocolDeck/LabwareInfo.tsx
index d8c9b44a9f1..20a615dd5ac 100644
--- a/components/src/hardware-sim/ProtocolDeck/LabwareInfo.tsx
+++ b/components/src/hardware-sim/ProtocolDeck/LabwareInfo.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 
 import { RobotCoordsForeignDiv } from '../Deck'
@@ -13,6 +12,8 @@ import {
 import { Box, Flex, Text } from '../../primitives'
 import { TYPOGRAPHY, SPACING } from '../../ui-style-constants'
 import { COLORS } from '../../helix-design-system'
+
+import type { ReactNode } from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 
 const labwareDisplayNameStyle = css`
@@ -26,7 +27,7 @@ const labwareDisplayNameStyle = css`
 `
 export function LabwareInfo(props: {
   def: LabwareDefinition2
-  children: React.ReactNode
+  children: ReactNode
 }): JSX.Element {
   const width = props.def.dimensions.xDimension
   const height = props.def.dimensions.yDimension
diff --git a/components/src/hardware-sim/ProtocolDeck/index.tsx b/components/src/hardware-sim/ProtocolDeck/index.tsx
index 20c3a0c990b..9d6f0fa3c8f 100644
--- a/components/src/hardware-sim/ProtocolDeck/index.tsx
+++ b/components/src/hardware-sim/ProtocolDeck/index.tsx
@@ -1,5 +1,3 @@
-import type * as React from 'react'
-
 import {
   FLEX_ROBOT_TYPE,
   getLabwareDisplayName,
@@ -15,6 +13,7 @@ import { getTopMostLabwareInSlots } from './utils/getLabwareInSlots'
 import { getModulesInSlots } from './utils/getModulesInSlots'
 import { getWellFillFromLabwareId } from './utils/getWellFillFromLabwareId'
 
+import type { ComponentProps } from 'react'
 import type {
   CompletedProtocolAnalysis,
   LabwareDefinition2,
@@ -35,7 +34,7 @@ interface ProtocolDeckProps {
     labwareId: string
   ) => void
   /** extra props to pass through to BaseDeck component */
-  baseDeckProps?: Partial<React.ComponentProps<typeof BaseDeck>>
+  baseDeckProps?: Partial<ComponentProps<typeof BaseDeck>>
 }
 
 export function ProtocolDeck(props: ProtocolDeckProps): JSX.Element | null {
diff --git a/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpace.tsx b/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpace.tsx
index 6c9ccb46338..a9060bc114a 100644
--- a/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpace.tsx
+++ b/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpace.tsx
@@ -1,9 +1,10 @@
 import styled from 'styled-components'
 import { animated } from '@react-spring/web'
-import type * as React from 'react'
 import { Svg } from '../../primitives'
 
-interface RobotCoordinateSpaceProps extends React.ComponentProps<typeof Svg> {
+import type { ComponentProps } from 'react'
+
+interface RobotCoordinateSpaceProps extends ComponentProps<typeof Svg> {
   animated?: boolean
 }
 export function RobotCoordinateSpace(
diff --git a/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx b/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx
index 78ab942ed47..659ccbbb350 100644
--- a/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx
+++ b/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx
@@ -1,15 +1,14 @@
 import { useRef } from 'react'
 import { Svg } from '../../primitives'
 
-import type { ReactNode } from 'react'
+import type { ComponentProps, ReactNode } from 'react'
 import type { DeckDefinition, DeckSlot } from '@opentrons/shared-data'
 
 export interface RobotCoordinateSpaceWithRefRenderProps {
   deckSlotsById: { [slotId: string]: DeckSlot }
 }
 
-interface RobotCoordinateSpaceWithRefProps
-  extends React.ComponentProps<typeof Svg> {
+interface RobotCoordinateSpaceWithRefProps extends ComponentProps<typeof Svg> {
   viewBox?: string | null
   deckDef?: DeckDefinition
   zoomed?: boolean
diff --git a/components/src/hooks/useDrag.ts b/components/src/hooks/useDrag.ts
index 5245909cc03..0d13441421a 100644
--- a/components/src/hooks/useDrag.ts
+++ b/components/src/hooks/useDrag.ts
@@ -75,7 +75,7 @@ export const useDrag = (position: ElementPosition): UseDragResult => {
       transform: `translate3D(${elementPosition.x}px, ${elementPosition.y}px, 0)`,
       width: `${elementPosition.width}px`,
       height: `${elementPosition.height}px`,
-      position: 'absolute' as React.CSSProperties['position'],
+      position: 'absolute' as CSSProperties['position'],
       touchAction: 'none',
     },
     position: elementPosition,
diff --git a/components/src/hooks/useInterval.ts b/components/src/hooks/useInterval.ts
index 19ec5289b55..0ca63cbe117 100644
--- a/components/src/hooks/useInterval.ts
+++ b/components/src/hooks/useInterval.ts
@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react'
 
+import type { MutableRefObject } from 'react'
 /**
  * React hook to call a function on an interval; copied from:
  * https://overreacted.io/making-setinterval-declarative-with-react-hooks/
@@ -15,9 +16,7 @@ export function useInterval(
   delay: number | null,
   immediate: boolean = false
 ): void {
-  const savedCallback: React.MutableRefObject<
-    (() => unknown) | undefined
-  > = useRef()
+  const savedCallback: MutableRefObject<(() => unknown) | undefined> = useRef()
 
   // remember the latest callback
   useEffect(() => {
diff --git a/components/src/icons/Icon.tsx b/components/src/icons/Icon.tsx
index 7aff9bf3750..36287d9bb92 100644
--- a/components/src/icons/Icon.tsx
+++ b/components/src/icons/Icon.tsx
@@ -1,10 +1,10 @@
-import type * as React from 'react'
 import { css, keyframes } from 'styled-components'
 import cx from 'classnames'
 
 import { Svg } from '../primitives'
 import { ICON_DATA_BY_NAME } from './icon-data'
 
+import type { ReactNode } from 'react'
 import type { SvgProps } from '../primitives'
 
 export type IconName = keyof typeof ICON_DATA_BY_NAME
@@ -27,7 +27,7 @@ export interface IconProps extends SvgProps {
   /** inline style passed into the icon svg */
   style?: Record<string, string | number>
   /** optional children */
-  children?: React.ReactNode
+  children?: ReactNode
   id?: string
 }
 
diff --git a/components/src/instrument/InstrumentInfo.tsx b/components/src/instrument/InstrumentInfo.tsx
index 0c11ee9e7cb..d1010f84090 100644
--- a/components/src/instrument/InstrumentInfo.tsx
+++ b/components/src/instrument/InstrumentInfo.tsx
@@ -1,5 +1,3 @@
-import type * as React from 'react'
-
 import { LEFT, RIGHT } from '@opentrons/shared-data'
 import { Flex } from '../primitives'
 import { SPACING, TYPOGRAPHY } from '../ui-style-constants'
@@ -7,6 +5,7 @@ import { LegacyStyledText } from '../atoms'
 import { DIRECTION_COLUMN, JUSTIFY_CENTER } from '../styles'
 import { InstrumentDiagram } from './InstrumentDiagram'
 
+import type { ReactNode } from 'react'
 import type { Mount } from '../robot-types'
 import type { InstrumentDiagramProps } from './InstrumentDiagram'
 
@@ -22,7 +21,7 @@ export interface InstrumentInfoProps {
   /** paired tiprack models */
   tiprackModels?: string[]
   /** children to display under the info */
-  children?: React.ReactNode
+  children?: ReactNode
   /** if true, show labels 'LEFT PIPETTE' / 'RIGHT PIPETTE' */
   showMountLabel?: boolean | null
 }
diff --git a/components/src/instrument/__tests__/InstrumentInfo.test.tsx b/components/src/instrument/__tests__/InstrumentInfo.test.tsx
index 0101f7d6674..b9e7aa54d45 100644
--- a/components/src/instrument/__tests__/InstrumentInfo.test.tsx
+++ b/components/src/instrument/__tests__/InstrumentInfo.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, beforeEach, it, vi } from 'vitest'
 import { LEFT, RIGHT, fixtureP1000SingleV2Specs } from '@opentrons/shared-data'
@@ -6,14 +5,16 @@ import { renderWithProviders } from '../../testing/utils'
 import { InstrumentInfo } from '../InstrumentInfo'
 import { InstrumentDiagram } from '../InstrumentDiagram'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../InstrumentDiagram')
 
-const render = (props: React.ComponentProps<typeof InstrumentInfo>) => {
+const render = (props: ComponentProps<typeof InstrumentInfo>) => {
   return renderWithProviders(<InstrumentInfo {...props} />)[0]
 }
 
 describe('InstrumentInfo', () => {
-  let props: React.ComponentProps<typeof InstrumentInfo>
+  let props: ComponentProps<typeof InstrumentInfo>
 
   beforeEach(() => {
     props = {
diff --git a/components/src/interaction-enhancers/ClickOutside.ts b/components/src/interaction-enhancers/ClickOutside.ts
index 22190606e03..b1d01c6cd59 100644
--- a/components/src/interaction-enhancers/ClickOutside.ts
+++ b/components/src/interaction-enhancers/ClickOutside.ts
@@ -1,7 +1,8 @@
-import * as React from 'react'
+import { Component } from 'react'
+import type { RefCallback } from 'react'
 
 interface ClickOutsideChildParams {
-  ref: React.RefCallback<Element>
+  ref: RefCallback<Element>
 }
 export interface ClickOutsideProps {
   onClickOutside: ((e: MouseEvent) => void) | undefined | null
@@ -9,7 +10,7 @@ export interface ClickOutsideProps {
 }
 
 // TODO: BC: 2019-05-10 this would be much cleaner as a custom hook
-export class ClickOutside extends React.Component<ClickOutsideProps> {
+export class ClickOutside extends Component<ClickOutsideProps> {
   // TODO(mc, 2019-04-19): switch to ref object
   wrapperRef: Element | null
 
diff --git a/components/src/interaction-enhancers/HandleKeypress.tsx b/components/src/interaction-enhancers/HandleKeypress.tsx
index 6b713dcd178..0fb99eae3bb 100644
--- a/components/src/interaction-enhancers/HandleKeypress.tsx
+++ b/components/src/interaction-enhancers/HandleKeypress.tsx
@@ -1,4 +1,6 @@
-import * as React from 'react'
+import { Component } from 'react'
+import type { ReactNode } from 'react'
+
 export interface KeypressHandler {
   key: string
   shiftKey?: boolean | null | undefined
@@ -11,7 +13,7 @@ export interface HandleKeypressProps {
   /** optionally call event.preventDefault if keypress is handled */
   preventDefault?: boolean | null | undefined
   /** wrapped children */
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
 const matchHandler = (e: KeyboardEvent) => (h: KeypressHandler) =>
@@ -23,7 +25,7 @@ const matchHandler = (e: KeyboardEvent) => (h: KeypressHandler) =>
  * `keyup` event. `event.preventDefault` will be called if a key is handled
  * and `props.preventDefault` is true.
  */
-export class HandleKeypress extends React.Component<HandleKeypressProps> {
+export class HandleKeypress extends Component<HandleKeypressProps> {
   handlePressIfKey = (event: KeyboardEvent): void => {
     const pressHandlers = this.props.handlers.filter(matchHandler(event))
 
diff --git a/components/src/lists/SidePanelGroup.tsx b/components/src/lists/SidePanelGroup.tsx
index 4284c5aa45b..c3c4b242ea0 100644
--- a/components/src/lists/SidePanelGroup.tsx
+++ b/components/src/lists/SidePanelGroup.tsx
@@ -1,10 +1,10 @@
 // SidePanelGroup component
-import type * as React from 'react'
 import cx from 'classnames'
 
 import styles from './lists.module.css'
 import { Icon } from '../icons'
 
+import type { ReactNode } from 'react'
 import type { IconName } from '../icons'
 
 // TODO(bc, 2021-03-31): this component is only used in one place
@@ -15,7 +15,7 @@ export interface SidePanelGroupProps {
   /** optional icon left of the title */
   iconName?: IconName
   /** children, most likely one or more TitledList */
-  children?: React.ReactNode
+  children?: ReactNode
   /** additional classnames */
   className?: string
   /** disables the whole SidePanelGroup if true */
diff --git a/components/src/lists/TitledList.tsx b/components/src/lists/TitledList.tsx
index 777b11cc511..7c5e8d0e559 100644
--- a/components/src/lists/TitledList.tsx
+++ b/components/src/lists/TitledList.tsx
@@ -1,10 +1,12 @@
 // TitledList component
-import * as React from 'react'
+import { Children } from 'react'
 import cx from 'classnames'
 
 import { Icon } from '../icons'
 import { LegacyStyledText } from '../atoms'
 import { COLORS } from '../helix-design-system'
+
+import type { MouseEvent, ReactNode } from 'react'
 import type { IconName, IconProps } from '../icons'
 
 import styles from './lists.module.css'
@@ -25,21 +27,21 @@ export interface TitledListProps {
   'data-test'?: string
   // TODO(mc, 2018-01-25): enforce <li> children requirement with flow
   /** children must all be `<li>` */
-  children?: React.ReactNode
+  children?: ReactNode
   /** additional classnames */
   className?: string
   /** component with descriptive text about the list */
-  description?: React.ReactNode
+  description?: ReactNode
   /** optional click action (on title div, not children) */
-  onClick?: (event: React.MouseEvent) => unknown
+  onClick?: (event: MouseEvent) => unknown
   /** optional right click action (on wrapping div) */
-  onContextMenu?: (event: React.MouseEvent) => unknown
+  onContextMenu?: (event: MouseEvent) => unknown
   /** optional mouseEnter action */
-  onMouseEnter?: (event: React.MouseEvent) => unknown
+  onMouseEnter?: (event: MouseEvent) => unknown
   /** optional mouseLeave action */
-  onMouseLeave?: (event: React.MouseEvent) => unknown
+  onMouseLeave?: (event: MouseEvent) => unknown
   /** caret click action; if defined, list is expandable and carat is visible */
-  onCollapseToggle?: (event: React.MouseEvent) => unknown
+  onCollapseToggle?: (event: MouseEvent) => unknown
   /** collapse the list if true (false by default) */
   collapsed?: boolean
   /** set to true when TitledList is selected (eg, user clicked it) */
@@ -74,16 +76,14 @@ export function TitledList(props: TitledListProps): JSX.Element {
 
   // clicking on the carat will not call props.onClick,
   // so prevent bubbling up if there is an onCollapseToggle fn
-  const handleCollapseToggle = (e: React.MouseEvent): void => {
+  const handleCollapseToggle = (e: MouseEvent): void => {
     if (onCollapseToggle && !disabled) {
       e.stopPropagation()
       onCollapseToggle(e)
     }
   }
 
-  const hasValidChildren = React.Children.toArray(props.children).some(
-    child => child
-  )
+  const hasValidChildren = Children.toArray(props.children).some(child => child)
 
   const className = cx(styles.titled_list, props.className, {
     [styles.disabled]: disabled || inert,
diff --git a/components/src/modals/AlertModal.tsx b/components/src/modals/AlertModal.tsx
index 3437bac077d..69fc8d68f07 100644
--- a/components/src/modals/AlertModal.tsx
+++ b/components/src/modals/AlertModal.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import cx from 'classnames'
 
 import { OutlineButton } from '../buttons'
@@ -6,6 +5,7 @@ import { Icon } from '../icons'
 import { LegacyModal } from './LegacyModal'
 import styles from './modals.module.css'
 
+import type { ReactNode } from 'react'
 import type { ButtonProps } from '../buttons'
 import type { IconName } from '../icons'
 
@@ -13,11 +13,11 @@ export interface AlertModalProps {
   /** optional handler for overlay click */
   onCloseClick?: () => unknown
   /** optional modal heading */
-  heading?: React.ReactNode
+  heading?: ReactNode
   /** optional array of `ButtonProps` for `OutlineButton`s at bottom of modal */
   buttons?: Array<ButtonProps | null | undefined>
   /** modal contents */
-  children: React.ReactNode
+  children: ReactNode
   /** optional classes to apply */
   className?: string
   /** optional classes to apply */
diff --git a/components/src/modals/LegacyModal.tsx b/components/src/modals/LegacyModal.tsx
index 310cc1a8c3a..6ff9cf22c2b 100644
--- a/components/src/modals/LegacyModal.tsx
+++ b/components/src/modals/LegacyModal.tsx
@@ -1,17 +1,19 @@
-import * as React from 'react'
+import { Fragment } from 'react'
 import cx from 'classnames'
 import { RemoveScroll } from 'react-remove-scroll'
 
 import { Overlay } from './Overlay'
 import styles from './modals.module.css'
 
+import type { MouseEventHandler, ReactNode, Ref } from 'react'
+
 export interface LegacyModalProps {
   /** handler to close the modal (attached to `Overlay` onClick) */
-  onCloseClick?: React.MouseEventHandler
+  onCloseClick?: MouseEventHandler
   /** Optional styled heading **/
   heading?: string
   /** modal contents */
-  children: React.ReactNode
+  children: ReactNode
   /** classes to apply */
   className?: string
   /** classes to apply to the contents box */
@@ -20,7 +22,7 @@ export interface LegacyModalProps {
   alertOverlay?: boolean
   /** restricts scroll outside of Modal when open, true by default */
   restrictOuterScroll?: boolean
-  innerRef?: React.Ref<HTMLDivElement>
+  innerRef?: Ref<HTMLDivElement>
 }
 
 /**
@@ -37,7 +39,7 @@ export function LegacyModal(props: LegacyModalProps): JSX.Element {
     innerRef,
     restrictOuterScroll = true,
   } = props
-  const Wrapper = restrictOuterScroll ? RemoveScroll : React.Fragment
+  const Wrapper = restrictOuterScroll ? RemoveScroll : Fragment
   return (
     <Wrapper>
       <div
diff --git a/components/src/modals/Modal.tsx b/components/src/modals/Modal.tsx
index 2a622ad083f..304b733de8a 100644
--- a/components/src/modals/Modal.tsx
+++ b/components/src/modals/Modal.tsx
@@ -1,9 +1,10 @@
-import type * as React from 'react'
 import { Box } from '../primitives'
 import { SPACING } from '../ui-style-constants'
 import { COLORS } from '../helix-design-system'
 import { ModalHeader } from './ModalHeader'
 import { ModalShell } from './ModalShell'
+
+import type { MouseEventHandler, ReactNode } from 'react'
 import type { IconProps } from '../icons'
 import type { StyleProps } from '../primitives'
 import type { Position } from './ModalShell'
@@ -12,15 +13,15 @@ type ModalType = 'info' | 'warning' | 'error'
 
 export interface ModalProps extends StyleProps {
   type?: ModalType
-  onClose?: React.MouseEventHandler
+  onClose?: MouseEventHandler
   closeOnOutsideClick?: boolean
-  title?: React.ReactNode
+  title?: ReactNode
   titleElement1?: JSX.Element
   titleElement2?: JSX.Element
   fullPage?: boolean
   childrenPadding?: string | number
-  children?: React.ReactNode
-  footer?: React.ReactNode
+  children?: ReactNode
+  footer?: ReactNode
   zIndexOverlay?: number
   showOverlay?: boolean
   position?: Position
diff --git a/components/src/modals/ModalHeader.tsx b/components/src/modals/ModalHeader.tsx
index 70ab315725a..b505b1f1a47 100644
--- a/components/src/modals/ModalHeader.tsx
+++ b/components/src/modals/ModalHeader.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 
 import { Icon } from '../icons'
@@ -7,17 +6,19 @@ import { LegacyStyledText } from '../atoms'
 import { ALIGN_CENTER, JUSTIFY_CENTER, JUSTIFY_SPACE_BETWEEN } from '../styles'
 import { SPACING, TYPOGRAPHY } from '../ui-style-constants'
 import { COLORS } from '../helix-design-system'
+
+import type { MouseEventHandler, ReactNode } from 'react'
 import type { IconProps } from '../icons'
 
 export interface ModalHeaderProps {
-  title: React.ReactNode
-  onClose?: React.MouseEventHandler
+  title: ReactNode
+  onClose?: MouseEventHandler
   titleElement1?: JSX.Element
   titleElement2?: JSX.Element
   backgroundColor?: string
   color?: string
   icon?: IconProps
-  closeButton?: React.ReactNode
+  closeButton?: ReactNode
 }
 
 const closeIconStyles = css`
diff --git a/components/src/modals/ModalShell.tsx b/components/src/modals/ModalShell.tsx
index d745d8d27a8..c6fa7e5ccb3 100644
--- a/components/src/modals/ModalShell.tsx
+++ b/components/src/modals/ModalShell.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import styled from 'styled-components'
 import {
   ALIGN_CENTER,
@@ -15,18 +14,19 @@ import { BORDERS, COLORS } from '../helix-design-system'
 import { RESPONSIVENESS, SPACING } from '../ui-style-constants'
 import { styleProps } from '../primitives'
 
+import type { MouseEvent, MouseEventHandler, ReactNode } from 'react'
 import type { StyleProps } from '../primitives'
 
 export type Position = 'center' | 'bottomRight'
 export interface ModalShellProps extends StyleProps {
   /** Modal content */
-  children: React.ReactNode
+  children: ReactNode
   /** Optional close on outside click **/
-  onOutsideClick?: React.MouseEventHandler
+  onOutsideClick?: MouseEventHandler
   /** Optional sticky header */
-  header?: React.ReactNode
+  header?: ReactNode
   /** Optional sticky footer */
-  footer?: React.ReactNode
+  footer?: ReactNode
   /** Optional full page takeover */
   fullPage?: boolean
   /** Optional zIndex for the overlay */
@@ -69,7 +69,7 @@ export function ModalShell(props: ModalShellProps): JSX.Element {
       showOverlay={showOverlay}
       zIndex={zIndexOverlay}
       aria-label="BackgroundOverlay_ModalShell"
-      onClick={(e: React.MouseEvent) => {
+      onClick={(e: MouseEvent) => {
         e.stopPropagation()
         if (onOutsideClick != null) onOutsideClick(e)
       }}
@@ -78,7 +78,7 @@ export function ModalShell(props: ModalShellProps): JSX.Element {
         <ModalArea
           aria-label="ModalShell_ModalArea"
           isFullPage={fullPage}
-          onClick={(e: React.MouseEvent) => {
+          onClick={(e: MouseEvent) => {
             e.stopPropagation()
           }}
           {...styleProps}
diff --git a/components/src/modals/Overlay.tsx b/components/src/modals/Overlay.tsx
index e429b251903..4c9adf15418 100644
--- a/components/src/modals/Overlay.tsx
+++ b/components/src/modals/Overlay.tsx
@@ -1,9 +1,10 @@
-import type * as React from 'react'
 import { Flex, POSITION_FIXED } from '..'
 
-export interface OverlayProps extends React.ComponentProps<typeof Flex> {
+import type { ComponentProps, MouseEventHandler } from 'react'
+
+export interface OverlayProps extends ComponentProps<typeof Flex> {
   /** optional onClick handler */
-  onClick?: React.MouseEventHandler
+  onClick?: MouseEventHandler
   alertOverlay?: boolean | null
   backgroundColor?: string
 }
diff --git a/components/src/modals/SpinnerModalPage.tsx b/components/src/modals/SpinnerModalPage.tsx
index 4393631a547..56f2ab0a121 100644
--- a/components/src/modals/SpinnerModalPage.tsx
+++ b/components/src/modals/SpinnerModalPage.tsx
@@ -1,15 +1,14 @@
 // titled modal page component
-import type * as React from 'react'
-
 import { TitleBar } from '../structure'
 import { SpinnerModal } from './SpinnerModal'
 import styles from './modals.module.css'
 
+import type { ComponentProps } from 'react'
 import type { TitleBarProps } from '../structure'
 
 // TODO(mc, 2018-06-20): s/titleBar/titleBarProps
 export interface SpinnerModalPageProps
-  extends React.ComponentProps<typeof SpinnerModal> {
+  extends ComponentProps<typeof SpinnerModal> {
   /** Props for title bar at top of modal page */
   titleBar: TitleBarProps
 }
diff --git a/components/src/modals/__tests__/Modal.test.tsx b/components/src/modals/__tests__/Modal.test.tsx
index 1dfa84cdaca..3fcbc93321e 100644
--- a/components/src/modals/__tests__/Modal.test.tsx
+++ b/components/src/modals/__tests__/Modal.test.tsx
@@ -1,5 +1,4 @@
 //
-import type * as React from 'react'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'
 import { describe, it, expect, beforeEach } from 'vitest'
@@ -7,12 +6,14 @@ import { renderWithProviders } from '../../testing/utils'
 import { COLORS } from '../../helix-design-system'
 import { Modal } from '../Modal'
 
-const render = (props: React.ComponentProps<typeof Modal>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Modal>) => {
   return renderWithProviders(<Modal {...props} />)
 }
 
 describe('Modal', () => {
-  let props: React.ComponentProps<typeof Modal>
+  let props: ComponentProps<typeof Modal>
 
   beforeEach(() => {
     props = {
diff --git a/components/src/modals/__tests__/ModalHeader.test.tsx b/components/src/modals/__tests__/ModalHeader.test.tsx
index d0e790b2fce..bf55110b63f 100644
--- a/components/src/modals/__tests__/ModalHeader.test.tsx
+++ b/components/src/modals/__tests__/ModalHeader.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
@@ -9,14 +8,16 @@ import { COLORS } from '../../helix-design-system'
 import { SPACING } from '../../ui-style-constants'
 import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles'
 
+import type { ComponentProps } from 'react'
+
 const mockClose = vi.fn()
 
-const render = (props: React.ComponentProps<typeof ModalHeader>) => {
+const render = (props: ComponentProps<typeof ModalHeader>) => {
   return renderWithProviders(<ModalHeader {...props} />)
 }
 
 describe('ModalHeader', () => {
-  let props: React.ComponentProps<typeof ModalHeader>
+  let props: ComponentProps<typeof ModalHeader>
 
   beforeEach(() => {
     props = {
diff --git a/components/src/modals/__tests__/ModalShell.test.tsx b/components/src/modals/__tests__/ModalShell.test.tsx
index 1e1be0304f5..72dc77dd707 100644
--- a/components/src/modals/__tests__/ModalShell.test.tsx
+++ b/components/src/modals/__tests__/ModalShell.test.tsx
@@ -1,16 +1,17 @@
-import type * as React from 'react'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'
 import { describe, it, expect, beforeEach } from 'vitest'
 import { renderWithProviders } from '../../testing/utils'
 import { ModalShell } from '../ModalShell'
 
-const render = (props: React.ComponentProps<typeof ModalShell>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ModalShell>) => {
   return renderWithProviders(<ModalShell {...props} />)
 }
 
 describe('ModalShell', () => {
-  let props: React.ComponentProps<typeof ModalShell>
+  let props: ComponentProps<typeof ModalShell>
 
   beforeEach(() => {
     props = {
diff --git a/components/src/molecules/Banner/__tests__/Banner.test.tsx b/components/src/molecules/Banner/__tests__/Banner.test.tsx
index f9ae53a7bf5..d859f4c3bb6 100644
--- a/components/src/molecules/Banner/__tests__/Banner.test.tsx
+++ b/components/src/molecules/Banner/__tests__/Banner.test.tsx
@@ -1,16 +1,17 @@
-import type * as React from 'react'
 import { describe, it, vi, expect, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import { renderWithProviders } from '../../../testing/utils'
 
 import { Banner } from '..'
 
-const render = (props: React.ComponentProps<typeof Banner>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Banner>) => {
   return renderWithProviders(<Banner {...props} />)[0]
 }
 
 describe('Banner', () => {
-  let props: React.ComponentProps<typeof Banner>
+  let props: ComponentProps<typeof Banner>
 
   beforeEach(() => {
     props = {
diff --git a/components/src/molecules/Banner/index.tsx b/components/src/molecules/Banner/index.tsx
index efcfe95bb07..f0863e58e38 100644
--- a/components/src/molecules/Banner/index.tsx
+++ b/components/src/molecules/Banner/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import { Btn, Flex } from '../../primitives'
 import { Icon } from '../../icons'
@@ -9,6 +8,8 @@ import {
   DIRECTION_ROW,
   JUSTIFY_SPACE_BETWEEN,
 } from '../../styles'
+
+import type { MouseEvent, MouseEventHandler, ReactNode } from 'react'
 import type { StyleProps } from '../../primitives'
 import type { IconProps } from '../../icons'
 
@@ -23,15 +24,15 @@ export interface BannerProps extends StyleProps {
   /** name constant of the icon to display */
   type: BannerType
   /** Banner contents */
-  children?: React.ReactNode
+  children?: ReactNode
   /** optional handler to show close button/clear alert  */
-  onCloseClick?: (() => void) | React.MouseEventHandler<HTMLButtonElement>
+  onCloseClick?: (() => void) | MouseEventHandler<HTMLButtonElement>
   /** Override the default Alert Icon */
   icon?: IconProps
   /** some banner onCloseClicks fire events, this allows a spinner after click but before event finishes */
   isCloseActionLoading?: boolean
   /** Override the Exit icon */
-  closeButton?: React.ReactNode
+  closeButton?: ReactNode
   /** Icon margin right for large banners */
   iconMarginRight?: string
   /** Icon margin left for large banners */
@@ -112,7 +113,7 @@ export function Banner(props: BannerProps): JSX.Element {
       justifyContent={JUSTIFY_SPACE_BETWEEN}
       alignItems={ALIGN_CENTER}
       padding={padding ?? SPACING.spacing8}
-      onClick={(e: React.MouseEvent) => {
+      onClick={(e: MouseEvent) => {
         e.stopPropagation()
       }}
       data-testid={`Banner_${type}`}
diff --git a/components/src/molecules/DeckInfoLabel/__tests__/DeckInfoLabel.test.tsx b/components/src/molecules/DeckInfoLabel/__tests__/DeckInfoLabel.test.tsx
index 7a7c7f6a782..cc96b5f1b1d 100644
--- a/components/src/molecules/DeckInfoLabel/__tests__/DeckInfoLabel.test.tsx
+++ b/components/src/molecules/DeckInfoLabel/__tests__/DeckInfoLabel.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, beforeEach, expect } from 'vitest'
 import { renderWithProviders } from '../../../testing/utils'
 import { screen } from '@testing-library/react'
@@ -7,12 +6,14 @@ import { BORDERS, COLORS } from '../../../helix-design-system'
 
 import { DeckInfoLabel } from '..'
 
-const render = (props: React.ComponentProps<typeof DeckInfoLabel>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof DeckInfoLabel>) => {
   return renderWithProviders(<DeckInfoLabel {...props} />)
 }
 
 describe('DeckInfoLabel', () => {
-  let props: React.ComponentProps<typeof DeckInfoLabel>
+  let props: ComponentProps<typeof DeckInfoLabel>
 
   beforeEach(() => {
     props = {
diff --git a/components/src/molecules/DeckLabel/__tests__/DeckLabel.test.tsx b/components/src/molecules/DeckLabel/__tests__/DeckLabel.test.tsx
index f041585b1cd..6802b76bbc3 100644
--- a/components/src/molecules/DeckLabel/__tests__/DeckLabel.test.tsx
+++ b/components/src/molecules/DeckLabel/__tests__/DeckLabel.test.tsx
@@ -7,12 +7,14 @@ import { FLEX_MAX_CONTENT } from '../../../styles'
 import { renderWithProviders } from '../../../testing/utils'
 import { DeckLabel } from '..'
 
-const render = (props: React.ComponentProps<typeof DeckLabel>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof DeckLabel>) => {
   return renderWithProviders(<DeckLabel {...props} />)
 }
 
 describe('DeckLabel', () => {
-  let props: React.ComponentProps<typeof DeckLabel>
+  let props: ComponentProps<typeof DeckLabel>
 
   beforeEach(() => {
     props = {
diff --git a/components/src/molecules/DropdownMenu/__tests__/DropdownMenu.test.tsx b/components/src/molecules/DropdownMenu/__tests__/DropdownMenu.test.tsx
index ee1de9643e5..9bddbac29a4 100644
--- a/components/src/molecules/DropdownMenu/__tests__/DropdownMenu.test.tsx
+++ b/components/src/molecules/DropdownMenu/__tests__/DropdownMenu.test.tsx
@@ -1,9 +1,10 @@
-import type * as React from 'react'
 import { screen, fireEvent } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 
 import { renderWithProviders } from '../../../testing/utils'
 import { DropdownMenu } from '..'
+
+import type { ComponentProps } from 'react'
 import type { DropdownOption } from '..'
 
 const mockOptions: DropdownOption[] = [
@@ -14,12 +15,12 @@ const mockOptions: DropdownOption[] = [
 
 const mockOnClick = vi.fn()
 
-const render = (props: React.ComponentProps<typeof DropdownMenu>) => {
+const render = (props: ComponentProps<typeof DropdownMenu>) => {
   return renderWithProviders(<DropdownMenu {...props} />)
 }
 
 describe('DropdownMenu', () => {
-  let props: React.ComponentProps<typeof DropdownMenu>
+  let props: ComponentProps<typeof DropdownMenu>
 
   beforeEach(() => {
     props = {
diff --git a/components/src/molecules/DropdownMenu/index.tsx b/components/src/molecules/DropdownMenu/index.tsx
index 3b692c0b3dc..b1dd875e573 100644
--- a/components/src/molecules/DropdownMenu/index.tsx
+++ b/components/src/molecules/DropdownMenu/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { Fragment, useEffect, useState } from 'react'
 import { css } from 'styled-components'
 
 import { BORDERS, COLORS } from '../../helix-design-system'
@@ -26,6 +26,8 @@ import { StyledText } from '../../atoms/StyledText'
 import { LiquidIcon } from '../LiquidIcon'
 import { DeckInfoLabel } from '../DeckInfoLabel'
 
+import type { FocusEventHandler } from 'react'
+
 export interface DropdownOption {
   name: string
   value: string
@@ -63,9 +65,9 @@ export interface DropdownMenuProps {
   /** optional error */
   error?: string | null
   /** focus handler */
-  onFocus?: React.FocusEventHandler<HTMLButtonElement>
+  onFocus?: FocusEventHandler<HTMLButtonElement>
   /** blur handler */
-  onBlur?: React.FocusEventHandler<HTMLButtonElement>
+  onBlur?: FocusEventHandler<HTMLButtonElement>
   /** optional disabled */
   disabled?: boolean
   /** optional placement of the menu */
@@ -96,21 +98,21 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
     menuPlacement = 'auto',
   } = props
   const [targetProps, tooltipProps] = useHoverTooltip()
-  const [showDropdownMenu, setShowDropdownMenu] = React.useState<boolean>(false)
+  const [showDropdownMenu, setShowDropdownMenu] = useState<boolean>(false)
   const [optionTargetProps, optionTooltipProps] = useHoverTooltip({
     placement: 'top-end',
   })
 
-  const [dropdownPosition, setDropdownPosition] = React.useState<
-    'top' | 'bottom'
-  >('bottom')
+  const [dropdownPosition, setDropdownPosition] = useState<'top' | 'bottom'>(
+    'bottom'
+  )
   const dropDownMenuWrapperRef = useOnClickOutside<HTMLDivElement>({
     onClickOutside: () => {
       setShowDropdownMenu(false)
     },
   })
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (menuPlacement !== 'auto') {
       setDropdownPosition(menuPlacement)
       return
@@ -293,7 +295,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
             maxHeight="20rem" // Set the maximum display number to 10.
           >
             {filterOptions.map((option, index) => (
-              <React.Fragment key={`${option.name}-${index}`}>
+              <Fragment key={`${option.name}-${index}`}>
                 <MenuItem
                   disabled={option.disabled}
                   zIndex={3}
@@ -341,7 +343,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
                     {option.tooltipText}
                   </Tooltip>
                 ) : null}
-              </React.Fragment>
+              </Fragment>
             ))}
           </Flex>
         )}
diff --git a/components/src/molecules/InfoScreen/__tests__/InfoScreen.test.tsx b/components/src/molecules/InfoScreen/__tests__/InfoScreen.test.tsx
index 8e3e53faed0..d248ca2a669 100644
--- a/components/src/molecules/InfoScreen/__tests__/InfoScreen.test.tsx
+++ b/components/src/molecules/InfoScreen/__tests__/InfoScreen.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, expect, beforeEach } from 'vitest'
 
@@ -6,12 +5,14 @@ import { renderWithProviders } from '../../../testing/utils'
 import { BORDERS, COLORS } from '../../../helix-design-system'
 import { InfoScreen } from '..'
 
-const render = (props: React.ComponentProps<typeof InfoScreen>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof InfoScreen>) => {
   return renderWithProviders(<InfoScreen {...props} />)
 }
 
 describe('InfoScreen', () => {
-  let props: React.ComponentProps<typeof InfoScreen>
+  let props: ComponentProps<typeof InfoScreen>
 
   beforeEach(() => {
     props = {
diff --git a/components/src/molecules/LiquidIcon/__tests__/LiquidIcon.test.tsx b/components/src/molecules/LiquidIcon/__tests__/LiquidIcon.test.tsx
index c50396f47fc..7cbe8c4832a 100644
--- a/components/src/molecules/LiquidIcon/__tests__/LiquidIcon.test.tsx
+++ b/components/src/molecules/LiquidIcon/__tests__/LiquidIcon.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect } from 'vitest'
 import { renderWithProviders } from '../../../testing/utils'
 import { screen } from '@testing-library/react'
@@ -7,12 +6,14 @@ import { BORDERS, COLORS } from '../../../helix-design-system'
 
 import { LiquidIcon } from '..'
 
-const render = (props: React.ComponentProps<typeof LiquidIcon>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof LiquidIcon>) => {
   return renderWithProviders(<LiquidIcon {...props} />)
 }
 
 describe('LiquidIcon', () => {
-  let props: React.ComponentProps<typeof LiquidIcon>
+  let props: ComponentProps<typeof LiquidIcon>
 
   it('should render the proper style for large icon', () => {
     props = {
diff --git a/components/src/molecules/ParametersTable/__tests__/ParametersTable.test.tsx b/components/src/molecules/ParametersTable/__tests__/ParametersTable.test.tsx
index dbe674a60f8..6dcf831f46b 100644
--- a/components/src/molecules/ParametersTable/__tests__/ParametersTable.test.tsx
+++ b/components/src/molecules/ParametersTable/__tests__/ParametersTable.test.tsx
@@ -1,9 +1,9 @@
-import type * as React from 'react'
 import { renderWithProviders } from '../../../testing/utils'
 import { describe, it, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 import { ParametersTable } from '../index'
 
+import type { ComponentProps } from 'react'
 import type { RunTimeParameter } from '@opentrons/shared-data'
 
 const tMock = (key: string) => key
@@ -70,12 +70,12 @@ const mockRunTimeParameter: RunTimeParameter[] = [
   },
 ]
 
-const render = (props: React.ComponentProps<typeof ParametersTable>) => {
+const render = (props: ComponentProps<typeof ParametersTable>) => {
   return renderWithProviders(<ParametersTable {...props} />)
 }
 
 describe('ParametersTable', () => {
-  let props: React.ComponentProps<typeof ParametersTable>
+  let props: ComponentProps<typeof ParametersTable>
 
   beforeEach(() => {
     props = {
diff --git a/components/src/molecules/Tabs/__tests__/Tabs.test.tsx b/components/src/molecules/Tabs/__tests__/Tabs.test.tsx
index f78f2e525e2..595fe1b2070 100644
--- a/components/src/molecules/Tabs/__tests__/Tabs.test.tsx
+++ b/components/src/molecules/Tabs/__tests__/Tabs.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, describe, it, expect, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import { BORDERS, COLORS } from '../../../helix-design-system'
@@ -7,12 +6,14 @@ import { POSITION_RELATIVE } from '../../../styles'
 import { renderWithProviders } from '../../../testing/utils'
 import { Tabs } from '../index'
 
-const render = (props: React.ComponentProps<typeof Tabs>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Tabs>) => {
   return renderWithProviders(<Tabs {...props} />)
 }
 
 describe('Tabs', () => {
-  let props: React.ComponentProps<typeof Tabs>
+  let props: ComponentProps<typeof Tabs>
 
   beforeEach(() => {
     props = {
diff --git a/components/src/nav/SidePanel.tsx b/components/src/nav/SidePanel.tsx
index 40bf476bfc0..1836925e61d 100644
--- a/components/src/nav/SidePanel.tsx
+++ b/components/src/nav/SidePanel.tsx
@@ -1,10 +1,11 @@
 // collapsable side panel
-import type * as React from 'react'
 import styles from './SidePanel.module.css'
 
+import type { ReactNode } from 'react'
+
 export interface SidePanelProps {
   title?: string
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
 export function SidePanel(props: SidePanelProps): JSX.Element {
diff --git a/components/src/organisms/DeckLabelSet/__tests__/DeckLabelSet.test.tsx b/components/src/organisms/DeckLabelSet/__tests__/DeckLabelSet.test.tsx
index 359df2598de..360ceb58d84 100644
--- a/components/src/organisms/DeckLabelSet/__tests__/DeckLabelSet.test.tsx
+++ b/components/src/organisms/DeckLabelSet/__tests__/DeckLabelSet.test.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { screen } from '@testing-library/react'
 
@@ -7,6 +6,8 @@ import { BORDERS, COLORS } from '../../../helix-design-system'
 import { DeckLabel } from '../../../molecules/DeckLabel'
 import { DeckLabelSet } from '..'
 
+import type { ComponentProps } from 'react'
+
 vi.mock('../../../molecules/DeckLabel')
 
 const mockDeckLabels = [
@@ -24,11 +25,11 @@ const mockDeckLabels = [
   },
 ]
 
-const render = (props: React.ComponentProps<typeof DeckLabelSet>) => {
+const render = (props: ComponentProps<typeof DeckLabelSet>) => {
   return renderWithProviders(<DeckLabelSet {...props} />)
 }
 describe('DeckLabelSet', () => {
-  let props: React.ComponentProps<typeof DeckLabelSet>
+  let props: ComponentProps<typeof DeckLabelSet>
 
   beforeEach(() => {
     props = {
diff --git a/components/src/organisms/DeckLabelSet/index.tsx b/components/src/organisms/DeckLabelSet/index.tsx
index e784955b89c..a8c1661d35c 100644
--- a/components/src/organisms/DeckLabelSet/index.tsx
+++ b/components/src/organisms/DeckLabelSet/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { forwardRef } from 'react'
 import styled from 'styled-components'
 import { Box } from '../../primitives'
 import { BORDERS, COLORS } from '../../helix-design-system'
@@ -7,6 +7,7 @@ import { RobotCoordsForeignDiv } from '../../hardware-sim'
 import { DeckLabel } from '../../molecules/DeckLabel'
 import { SPACING } from '../../ui-style-constants'
 
+import type { ForwardedRef } from 'react'
 import type { DeckLabelProps } from '../../molecules/DeckLabel'
 
 interface DeckLabelSetProps {
@@ -20,7 +21,7 @@ interface DeckLabelSetProps {
 
 const DeckLabelSetComponent = (
   props: DeckLabelSetProps,
-  ref: React.ForwardedRef<HTMLDivElement>
+  ref: ForwardedRef<HTMLDivElement>
 ): JSX.Element => {
   const { deckLabels, x, y, width, height, invert = false } = props
 
@@ -56,7 +57,7 @@ const DeckLabelSetComponent = (
   )
 }
 
-export const DeckLabelSet = React.forwardRef<HTMLDivElement, DeckLabelSetProps>(
+export const DeckLabelSet = forwardRef<HTMLDivElement, DeckLabelSetProps>(
   DeckLabelSetComponent
 )
 
diff --git a/components/src/organisms/Toolbox/__tests__/Toolbox.test.tsx b/components/src/organisms/Toolbox/__tests__/Toolbox.test.tsx
index cb102be031b..a98f5e2f7b4 100644
--- a/components/src/organisms/Toolbox/__tests__/Toolbox.test.tsx
+++ b/components/src/organisms/Toolbox/__tests__/Toolbox.test.tsx
@@ -1,15 +1,16 @@
-import type * as React from 'react'
 import { describe, it, expect, vi } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import { renderWithProviders } from '../../../testing/utils'
 import { Toolbox } from '../index'
 
-const render = (props: React.ComponentProps<typeof Toolbox>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Toolbox>) => {
   return renderWithProviders(<Toolbox {...props} />)
 }
 
 describe('Toolbox', () => {
-  let props: React.ComponentProps<typeof Toolbox>
+  let props: ComponentProps<typeof Toolbox>
 
   it('should render text and buttons', () => {
     props = {
diff --git a/components/src/organisms/Toolbox/index.tsx b/components/src/organisms/Toolbox/index.tsx
index 89cfffd983b..8398d476a06 100644
--- a/components/src/organisms/Toolbox/index.tsx
+++ b/components/src/organisms/Toolbox/index.tsx
@@ -11,11 +11,13 @@ import { BORDERS, COLORS } from '../../helix-design-system'
 import { SPACING } from '../../ui-style-constants'
 import { PrimaryButton } from '../../atoms'
 import { textDecorationUnderline } from '../../ui-style-constants/typography'
+
+import type { ReactNode } from 'react'
 import type { StyleProps } from '../../primitives'
 
 export interface ToolboxProps extends StyleProps {
   title: JSX.Element
-  children: React.ReactNode
+  children: ReactNode
   disableCloseButton?: boolean
   confirmButtonText?: string
   onConfirmClick?: () => void
diff --git a/components/src/primitives/Btn.tsx b/components/src/primitives/Btn.tsx
index 03246c7208f..d54f718dfcb 100644
--- a/components/src/primitives/Btn.tsx
+++ b/components/src/primitives/Btn.tsx
@@ -4,6 +4,8 @@ import * as Styles from '../styles'
 import { styleProps, isntStyleProp } from './style-props'
 
 import { RESPONSIVENESS } from '../ui-style-constants'
+
+import type { HTMLProps } from 'react'
 import type { StyledComponent } from 'styled-components'
 import type { StyleProps } from './types'
 
@@ -58,7 +60,7 @@ export const Btn: StyledComponent<
   .withConfig({
     shouldForwardProp: isntStyleProp,
   })
-  .attrs((props: React.HTMLProps<HTMLButtonElement>) => ({
+  .attrs((props: HTMLProps<HTMLButtonElement>) => ({
     type: props.type ?? BUTTON_TYPE_BUTTON,
   }))`
   ${BUTTON_BASE_STYLE}
diff --git a/components/src/primitives/ForeignObject.tsx b/components/src/primitives/ForeignObject.tsx
index 083204d165f..54b4e3a0d3f 100644
--- a/components/src/primitives/ForeignObject.tsx
+++ b/components/src/primitives/ForeignObject.tsx
@@ -2,6 +2,7 @@ import styled from 'styled-components'
 
 import { styleProps, isntStyleProp } from './style-props'
 
+import type { ComponentProps } from 'react'
 import type { StyleProps, PrimitiveComponent } from './types'
 
 export interface ForeignObjectProps extends StyleProps {
@@ -46,9 +47,7 @@ export const ForeignObject: PrimitiveComponent<
     },
   })
   .attrs(
-    (
-      props: ForeignObjectProps
-    ): React.ComponentProps<PrimitiveComponent<'svg'>> => ({
+    (props: ForeignObjectProps): ComponentProps<PrimitiveComponent<'svg'>> => ({
       // map the explicit svgWidth/Height props to width/height attrs
       width: props.svgWidth,
       height: props.svgHeight,
diff --git a/components/src/primitives/Link.tsx b/components/src/primitives/Link.tsx
index 06c0ca50b2e..2885d976642 100644
--- a/components/src/primitives/Link.tsx
+++ b/components/src/primitives/Link.tsx
@@ -1,9 +1,10 @@
 import styled from 'styled-components'
 
 import { styleProps, isntStyleProp } from './style-props'
+import { CURSOR_POINTER } from '../styles'
 
+import type { ComponentProps } from 'react'
 import type { StyleProps, PrimitiveComponent } from './types'
-import { CURSOR_POINTER } from '../styles'
 
 export interface LinkProps extends StyleProps {
   /** render link with target="_blank" */
@@ -20,7 +21,7 @@ export const Link: PrimitiveComponent<'a', LinkProps> = styled.a
     shouldForwardProp: p => isntStyleProp(p) && p !== 'external',
   })
   .attrs(
-    (props: LinkProps): React.ComponentProps<PrimitiveComponent<'a'>> => {
+    (props: LinkProps): ComponentProps<PrimitiveComponent<'a'>> => {
       return props.external === true
         ? { target: '_blank', rel: 'noopener noreferrer' }
         : { tabIndex: '0' }
diff --git a/components/src/primitives/Svg.tsx b/components/src/primitives/Svg.tsx
index 0272c0398a5..18089340feb 100644
--- a/components/src/primitives/Svg.tsx
+++ b/components/src/primitives/Svg.tsx
@@ -2,6 +2,7 @@ import styled from 'styled-components'
 
 import { styleProps, isntStyleProp } from './style-props'
 
+import type { ComponentProps } from 'react'
 import type { StyleProps, PrimitiveComponent } from './types'
 
 export interface SvgProps extends StyleProps {
@@ -44,7 +45,7 @@ export const Svg: PrimitiveComponent<'svg', SvgProps> = styled.svg
     },
   })
   .attrs(
-    (props: SvgProps): React.ComponentProps<PrimitiveComponent<'svg'>> => ({
+    (props: SvgProps): ComponentProps<PrimitiveComponent<'svg'>> => ({
       version: SVG_VERSION,
       xmlns: SVG_NAMESPACE,
       // map the explicit svgWidth/Height props to width/height attrs
diff --git a/components/src/primitives/style-props.ts b/components/src/primitives/style-props.ts
index c6c0710e83f..0f6b1402639 100644
--- a/components/src/primitives/style-props.ts
+++ b/components/src/primitives/style-props.ts
@@ -7,6 +7,8 @@ import type * as Types from './types'
 
 import type { CSSObject } from 'styled-components'
 
+type Text = string | number
+
 const COLOR_PROPS = ['color', 'backgroundColor', 'opacity'] as const
 
 const TYPOGRAPHY_PROPS = [
@@ -193,5 +195,5 @@ export const styleProps = (props: Types.StyleProps): CSSObject => ({
   ...transitionStyles(props),
 })
 
-export const isntStyleProp = (prop: string | React.ReactText): boolean =>
+export const isntStyleProp = (prop: string | Text): boolean =>
   !STYLE_PROPS.includes(prop as typeof STYLE_PROPS[number])
diff --git a/components/src/primitives/types.ts b/components/src/primitives/types.ts
index 889d19230b1..15685a06dcd 100644
--- a/components/src/primitives/types.ts
+++ b/components/src/primitives/types.ts
@@ -1,5 +1,5 @@
 // known style types
-
+import type { ComponentType } from 'react'
 import type { StyledComponent, CSSProperties } from 'styled-components'
 
 export interface ColorProps {
@@ -115,6 +115,6 @@ export interface StyleProps
 }
 
 export type PrimitiveComponent<
-  Instance extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
+  Instance extends keyof JSX.IntrinsicElements | ComponentType<any>,
   Props extends StyleProps = StyleProps
 > = StyledComponent<Instance, any, Props, any>
diff --git a/components/src/structure/Card.tsx b/components/src/structure/Card.tsx
index 8551bedf3fd..852b9413b2b 100644
--- a/components/src/structure/Card.tsx
+++ b/components/src/structure/Card.tsx
@@ -1,16 +1,15 @@
 // Card component with drop shadow
-
-import type * as React from 'react'
 import styled, { css } from 'styled-components'
 import { isntStyleProp, styleProps } from '../primitives'
 import * as styles from '../styles'
 
+import type { ReactNode } from 'react'
 import type { StyleProps, PrimitiveComponent } from '../primitives'
 export interface CardProps extends StyleProps {
   /** Title for card, all cards should receive a title. */
-  title?: React.ReactNode
+  title?: ReactNode
   /** Card contents */
-  children?: React.ReactNode
+  children?: ReactNode
   /** If card can not be used, gray it out and remove pointer events */
   disabled?: boolean
   /** Additional class names */
diff --git a/components/src/structure/LabeledValue.tsx b/components/src/structure/LabeledValue.tsx
index bb80aa47f2c..936cc15e530 100644
--- a/components/src/structure/LabeledValue.tsx
+++ b/components/src/structure/LabeledValue.tsx
@@ -1,15 +1,15 @@
 // Card component with drop shadow
-
-import type * as React from 'react'
 import cx from 'classnames'
 
 import styles from './structure.module.css'
 
+import type { ReactNode } from 'react'
+
 export interface LabeledValueProps {
   /** Label */
-  label: React.ReactNode
+  label: ReactNode
   /** Value */
-  value: React.ReactNode
+  value: ReactNode
   /** Additional className */
   className?: string
   /** Additional value className */
diff --git a/components/src/structure/Pill.tsx b/components/src/structure/Pill.tsx
index ff6b2b7648c..8086240b46a 100644
--- a/components/src/structure/Pill.tsx
+++ b/components/src/structure/Pill.tsx
@@ -1,8 +1,8 @@
-import type * as React from 'react'
 import cx from 'classnames'
 
 import styles from './Pill.module.css'
 
+import type { ReactNode } from 'react'
 import type { UseHoverTooltipTargetProps } from '../tooltips'
 
 // TODO(bc, 2021-03-29): this component is only used in PD
@@ -17,7 +17,7 @@ export interface PillProps {
   /** additional class name */
   className?: string
   /** contents of the pill */
-  children?: React.ReactNode
+  children?: ReactNode
   /** handlers for HoverTooltipComponent */
   hoverTooltipHandlers?: UseHoverTooltipTargetProps | null | undefined
 }
diff --git a/components/src/structure/TitleBar.tsx b/components/src/structure/TitleBar.tsx
index 56fe864688f..8326104df1f 100644
--- a/components/src/structure/TitleBar.tsx
+++ b/components/src/structure/TitleBar.tsx
@@ -1,19 +1,18 @@
 // TitleBar component
-
-import type * as React from 'react'
 import cx from 'classnames'
 
 import { FlatButton } from '../buttons'
 import styles from './structure.module.css'
 
+import type { ReactNode } from 'react'
 import type { ButtonProps } from '../buttons'
 
 export interface TitleBarProps {
   id?: string
-  title: React.ReactNode
-  subtitle?: React.ReactNode
+  title: ReactNode
+  subtitle?: ReactNode
   back?: ButtonProps
-  rightNode?: React.ReactNode
+  rightNode?: ReactNode
   className?: string
 
   // TODO(mc, 2018-04-13): deprecate these props
diff --git a/components/src/testing/utils/renderWithProviders.tsx b/components/src/testing/utils/renderWithProviders.tsx
index 75287feabbc..848dd081c17 100644
--- a/components/src/testing/utils/renderWithProviders.tsx
+++ b/components/src/testing/utils/renderWithProviders.tsx
@@ -1,6 +1,6 @@
 // render using targetted component using @testing-library/react
 // with wrapping providers for i18next and redux
-import type * as React from 'react'
+
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { I18nextProvider } from 'react-i18next'
 import { Provider } from 'react-redux'
@@ -8,16 +8,22 @@ import { vi } from 'vitest'
 import { render } from '@testing-library/react'
 import { createStore } from 'redux'
 
+import type {
+  ComponentProps,
+  ComponentType,
+  PropsWithChildren,
+  ReactElement,
+} from 'react'
 import type { RenderResult, RenderOptions } from '@testing-library/react'
 import type { PreloadedState, Store } from 'redux'
 
 export interface RenderWithProvidersOptions<State> extends RenderOptions {
   initialState?: State
-  i18nInstance: React.ComponentProps<typeof I18nextProvider>['i18n']
+  i18nInstance: ComponentProps<typeof I18nextProvider>['i18n']
 }
 
 export function renderWithProviders<State>(
-  Component: React.ReactElement,
+  Component: ReactElement,
   options?: RenderWithProvidersOptions<State>
 ): [RenderResult, Store<State>] {
   // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@@ -32,7 +38,7 @@ export function renderWithProviders<State>(
 
   const queryClient = new QueryClient()
 
-  const ProviderWrapper: React.ComponentType<React.PropsWithChildren<{}>> = ({
+  const ProviderWrapper: ComponentType<PropsWithChildren<{}>> = ({
     children,
   }) => {
     const BaseWrapper = (
diff --git a/components/src/tooltips/DeprecatedTooltip.tsx b/components/src/tooltips/DeprecatedTooltip.tsx
index 06283a7e0e2..4873626dfda 100644
--- a/components/src/tooltips/DeprecatedTooltip.tsx
+++ b/components/src/tooltips/DeprecatedTooltip.tsx
@@ -1,19 +1,25 @@
-import type * as React from 'react'
 import { Manager, Reference, Popper } from 'react-popper'
 import cx from 'classnames'
 import styles from './tooltips.module.css'
 
+import type {
+  ComponentProps,
+  ComponentType,
+  PropsWithRef,
+  ReactNode,
+} from 'react'
+
 const DISTANCE_FROM_REFERENCE = 8
 
-type PopperProps = React.ComponentProps<typeof Popper>
+type PopperProps = ComponentProps<typeof Popper>
 
 export interface DeprecatedTooltipProps {
   /** show or hide the tooltip */
   open?: boolean
   /** contents of the tooltip */
-  tooltipComponent: React.ReactNode
+  tooltipComponent: ReactNode
   /** optional portal to place the tooltipComponent inside */
-  portal?: React.ComponentType<any>
+  portal?: ComponentType<any>
   /** <https://github.com/FezVrasta/react-popper#placement> */
   placement?: PopperProps['placement']
   /** <https://github.com/FezVrasta/react-popper#positionfixed> */
@@ -21,9 +27,9 @@ export interface DeprecatedTooltipProps {
   /** <https://github.com/FezVrasta/react-popper#modifiers> */
   modifiers?: PopperProps['modifiers']
   /** render function for tooltip'd component */
-  children: (props?: React.PropsWithRef<any>) => JSX.Element | null
+  children: (props?: PropsWithRef<any>) => JSX.Element | null
   /** extra props to pass to the children render function */
-  childProps?: React.PropsWithRef<any>
+  childProps?: PropsWithRef<any>
 }
 
 /**
diff --git a/components/src/tooltips/HoverTooltip.tsx b/components/src/tooltips/HoverTooltip.tsx
index a79e5818297..b7c4198241c 100644
--- a/components/src/tooltips/HoverTooltip.tsx
+++ b/components/src/tooltips/HoverTooltip.tsx
@@ -1,7 +1,8 @@
-import * as React from 'react'
+import { Component } from 'react'
 
 import { DeprecatedTooltip } from './DeprecatedTooltip'
 
+import type { PropsWithRef } from 'react'
 import type { DeprecatedTooltipProps } from './DeprecatedTooltip'
 
 const OPEN_DELAY_MS = 300
@@ -12,7 +13,7 @@ interface MouseHandlers {
   onMouseLeave: () => void
 }
 
-export type HoverTooltipHandlers = React.PropsWithRef<MouseHandlers>
+export type HoverTooltipHandlers = PropsWithRef<MouseHandlers>
 
 export type HoverTooltipProps = DeprecatedTooltipProps
 
@@ -35,7 +36,7 @@ interface HoverTooltipState {
  *
  * @deprecated Use `Tooltip` and `useHoverTooltip` instead
  */
-export class HoverTooltip extends React.Component<
+export class HoverTooltip extends Component<
   HoverTooltipProps,
   HoverTooltipState
 > {
diff --git a/components/src/tooltips/LegacyTooltip.tsx b/components/src/tooltips/LegacyTooltip.tsx
index b0ea0c32ae2..01fa9e14cfe 100644
--- a/components/src/tooltips/LegacyTooltip.tsx
+++ b/components/src/tooltips/LegacyTooltip.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { forwardRef } from 'react'
 import { css } from 'styled-components'
 
 import { BORDERS, COLORS } from '../helix-design-system'
@@ -8,7 +8,7 @@ import { ARROW_SIZE_PX } from './styles'
 import { Box } from '../primitives'
 import { CURSOR_POINTER } from '../styles'
 
-import type { CSSProperties } from 'react'
+import type { CSSProperties, ForwardedRef, ReactNode, RefCallback } from 'react'
 import type { FlattenSimpleInterpolation } from 'styled-components'
 import type { Placement } from './types'
 import type { StyleProps } from '../primitives'
@@ -17,7 +17,7 @@ export interface LegacyTooltipProps extends StyleProps {
   /** Whether or not the tooltip should be rendered */
   visible: boolean
   /** Contents of the tooltip */
-  children?: React.ReactNode
+  children?: ReactNode
   /**
    * Tooltip element ID (provided by useTooltip). Will match
    * targetProps.aria-describedby
@@ -28,7 +28,7 @@ export interface LegacyTooltipProps extends StyleProps {
   /** Inline styles to apply to the tooltip element (provided by useTooltip) */
   style: CSSProperties
   /** React function ref for tooltip's arrow element (provided by useTooltip) */
-  arrowRef: React.RefCallback<HTMLElement | null>
+  arrowRef: RefCallback<HTMLElement | null>
   /** Inline styles to apply to arrow element (provided by useTooltip) */
   arrowStyle: CSSProperties
 }
@@ -37,9 +37,9 @@ export interface LegacyTooltipProps extends StyleProps {
  * Tooltip component that renders based on its `visible` prop. For use with the
  * `useTooltip` and `useHoverTooltip` hooks. See examples in `Tooltip.md`.
  */
-export const LegacyTooltip = React.forwardRef(function TooltipComponent(
+export const LegacyTooltip = forwardRef(function TooltipComponent(
   props: LegacyTooltipProps,
-  ref: React.ForwardedRef<HTMLDivElement>
+  ref: ForwardedRef<HTMLDivElement>
 ) {
   const {
     visible,
@@ -85,7 +85,7 @@ export const LegacyTooltip = React.forwardRef(function TooltipComponent(
 
 export interface ArrowProps {
   placement: Placement | null
-  arrowRef: React.RefCallback<HTMLElement>
+  arrowRef: RefCallback<HTMLElement>
   arrowStyle: CSSProperties
   backgroundColor: string
 }
diff --git a/components/src/tooltips/types.ts b/components/src/tooltips/types.ts
index 04f223f0b9b..dbd1b7ddfa8 100644
--- a/components/src/tooltips/types.ts
+++ b/components/src/tooltips/types.ts
@@ -1,4 +1,4 @@
-import type { CSSProperties } from 'react'
+import type { CSSProperties, RefCallback } from 'react'
 
 import type { Instance, Options, Modifier } from '@popperjs/core/lib/types'
 
@@ -41,16 +41,16 @@ export interface UseTooltipOptions {
 }
 
 export interface UseTooltipResultTargetProps {
-  ref: React.RefCallback<Element | null>
+  ref: RefCallback<Element | null>
   'aria-describedby': string
 }
 
 export interface UseTooltipResultTooltipProps {
   id: string
-  ref: React.RefCallback<HTMLElement | null>
+  ref: RefCallback<HTMLElement | null>
   placement: Placement | null
   style: CSSProperties
-  arrowRef: React.RefCallback<HTMLElement | null>
+  arrowRef: RefCallback<HTMLElement | null>
   arrowStyle: CSSProperties
 }
 

From 6e43168f039559755f539d94eda6ed6514ecc822 Mon Sep 17 00:00:00 2001
From: Max Marrone <max@opentrons.com>
Date: Tue, 24 Dec 2024 15:51:25 -0500
Subject: [PATCH 17/18] perf(robot-server): Avoid creating process pools that
 won't do anything (#17173)

---
 .../robot_server/persistence/_migrations/up_to_3.py         | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/robot-server/robot_server/persistence/_migrations/up_to_3.py b/robot-server/robot_server/persistence/_migrations/up_to_3.py
index b4382545dbf..9fc901d2c0c 100644
--- a/robot-server/robot_server/persistence/_migrations/up_to_3.py
+++ b/robot-server/robot_server/persistence/_migrations/up_to_3.py
@@ -191,6 +191,12 @@ def _migrate_db_commands(
     the work across subprocesses. Each subprocess extracts, migrates, and inserts
     all of the commands for a single run.
     """
+    # Performance optimization: If we have nothing to migrate, don't even create the
+    # process pool. This avoids the heavy imports in the preload.
+    # On my laptop, this shaves ~1.5s off of each of our integration tests.
+    if not run_ids:
+        return
+
     mp = multiprocessing.get_context("forkserver")
     mp.set_forkserver_preload(_up_to_3_worker.imports)
 

From f04b2219d7696c8d0b5fa7cf23b071f437e32062 Mon Sep 17 00:00:00 2001
From: Max Marrone <max@opentrons.com>
Date: Tue, 24 Dec 2024 15:51:42 -0500
Subject: [PATCH 18/18] refactor(robot-server): Fix more Pydantic warnings
 (#17174)

---
 .../robot_server/client_data/router.py        |  2 +-
 robot-server/tests/runs/test_run_store.py     | 23 ++++++++++++++-----
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/robot-server/robot_server/client_data/router.py b/robot-server/robot_server/client_data/router.py
index 847c5da59a9..806e7710634 100644
--- a/robot-server/robot_server/client_data/router.py
+++ b/robot-server/robot_server/client_data/router.py
@@ -25,7 +25,7 @@
 Key = Annotated[
     str,
     fastapi.Path(
-        regex="^[a-zA-Z0-9-_]*$",
+        pattern="^[a-zA-Z0-9-_]*$",
         description=(
             "A key for storing and retrieving the piece of data."
             " This should be chosen to avoid colliding with other clients,"
diff --git a/robot-server/tests/runs/test_run_store.py b/robot-server/tests/runs/test_run_store.py
index 400e5ef6a06..52cf0ba8173 100644
--- a/robot-server/tests/runs/test_run_store.py
+++ b/robot-server/tests/runs/test_run_store.py
@@ -3,6 +3,7 @@
 from datetime import datetime, timezone
 from pathlib import Path
 from typing import List, Optional, Type
+import warnings
 
 import pytest
 from decoy import Decoy
@@ -689,12 +690,22 @@ def test_get_state_summary_failure(
         protocol_id=None,
         created_at=datetime(year=2021, month=1, day=1, tzinfo=timezone.utc),
     )
-    subject.update_run_state(
-        run_id="run-id",
-        summary=invalid_state_summary,
-        commands=[],
-        run_time_parameters=[],
-    )
+
+    with warnings.catch_warnings():
+        # Pydantic raises a warning because invalid_state_summary (deliberately)
+        # has a wrongly-typed value in one of its fields. Ignore the warning.
+        warnings.filterwarnings(
+            action="ignore",
+            category=UserWarning,
+            module="pydantic",
+        )
+        subject.update_run_state(
+            run_id="run-id",
+            summary=invalid_state_summary,
+            commands=[],
+            run_time_parameters=[],
+        )
+
     result = subject.get_state_summary(run_id="run-id")
     assert isinstance(result, BadStateSummary)
     assert result.dataError.code == ErrorCodes.INVALID_STORED_DATA