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] 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
 }