remove React for ReactNode

app/src/atoms/ProgressBar/index.tsx

@@ -1,7 +1,7 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import { COLORS, Box } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
 import type { FlattenSimpleInterpolation } from 'styled-components'
 
 interface ProgressBarProps {
@@ -12,7 +12,7 @@ interface ProgressBarProps {
   /** extra styles to be filled progress element */
   innerStyles?: FlattenSimpleInterpolation
   /** extra elements to be rendered within container */
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
 export function ProgressBar({

app/src/atoms/SelectField/index.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import find from 'lodash/find'
 import { Select } from './Select'
 import {
@@ -11,6 +10,7 @@ import {
 } from '@opentrons/components'
 import { css } from 'styled-components'
 
+import type { ReactNode } from 'react'
 import type { SelectProps, SelectOption } from './Select'
 import type { ActionMeta, MultiValue, SingleValue } from 'react-select'
 
@@ -32,9 +32,9 @@ export interface SelectFieldProps {
   /** render function for the option label passed to react-select */
   formatOptionLabel?: SelectProps['formatOptionLabel']
   /** optional title */
-  title?: React.ReactNode
+  title?: ReactNode
   /** optional caption. hidden when `error` is given */
-  caption?: React.ReactNode
+  caption?: ReactNode
   /** if included, use error style and display error instead of caption */
   error?: string | null
   /** change handler called with (name, value, actionMeta) */

app/src/atoms/Slideout/index.tsx

@@ -22,17 +22,19 @@ import {
 
 import { Divider } from '../structure'
 
+import type { ReactElement, ReactNode } from 'react'
+
 export interface MultiSlideoutSpecs {
   currentStep: number
   maxSteps: number
 }
 export interface SlideoutProps {
-  title: string | React.ReactElement
-  children: React.ReactNode
+  title: string | ReactElement
+  children: ReactNode
   onCloseClick: () => void
   //  isExpanded is for collapse and expand animation
   isExpanded?: boolean
-  footer?: React.ReactNode
+  footer?: ReactNode
   multiSlideoutSpecs?: MultiSlideoutSpecs
 }
 

app/src/molecules/GenericWizardTile/index.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useSelector } from 'react-redux'
 import styled, { css } from 'styled-components'
 import { useTranslation } from 'react-i18next'
@@ -26,6 +25,8 @@ import { getIsOnDevice } from '/app/redux/config'
 import { NeedHelpLink } from '/app/molecules/OT2CalibrationNeedHelpLink'
 import { SmallButton, TextOnlyButton } from '/app/atoms/buttons'
 
+import type { ReactNode } from 'react'
+
 const ALIGN_BUTTONS = css`
   align-items: ${ALIGN_FLEX_END};
 
@@ -59,13 +60,13 @@ const TILE_CONTAINER_STYLE = css`
   }
 `
 export interface GenericWizardTileProps {
-  rightHandBody: React.ReactNode
-  bodyText: React.ReactNode
-  header: string | React.ReactNode
+  rightHandBody: ReactNode
+  bodyText: ReactNode
+  header: string | ReactNode
   getHelp?: string
   back?: () => void
   proceed?: () => void
-  proceedButtonText?: React.ReactNode
+  proceedButtonText?: ReactNode
   proceedIsDisabled?: boolean
   proceedButton?: JSX.Element
   backIsDisabled?: boolean

app/src/molecules/InProgressModal/InProgressModal.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import {
   ALIGN_CENTER,
@@ -13,9 +12,11 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
+
 interface Props {
   //  optional override of the spinner
-  alternativeSpinner?: React.ReactNode
+  alternativeSpinner?: ReactNode
   description?: string
   body?: string
   children?: JSX.Element

app/src/molecules/InstrumentCard/index.tsx

@@ -1,5 +1,3 @@
-import type * as React from 'react'
-
 import {
   ALIGN_CENTER,
   ALIGN_FLEX_START,
@@ -22,6 +20,7 @@ import flexGripper from '/app/assets/images/flex_gripper.png'
 
 import { MenuOverlay } from './MenuOverlay'
 
+import type { ReactNode } from 'react'
 import type { InstrumentDiagramProps, StyleProps } from '@opentrons/components'
 import type { MenuOverlayItemProps } from './MenuOverlay'
 
@@ -33,7 +32,7 @@ interface InstrumentCardProps extends StyleProps {
   instrumentDiagramProps?: InstrumentDiagramProps
   // special casing the gripper at least for now
   isGripperAttached?: boolean
-  banner?: React.ReactNode
+  banner?: ReactNode
   isEstopNotDisengaged: boolean
 }
 

app/src/molecules/InterventionModal/OneColumn.tsx

@@ -1,14 +1,14 @@
-import type * as React from 'react'
-
 import {
   Flex,
   DIRECTION_COLUMN,
   JUSTIFY_SPACE_BETWEEN,
 } from '@opentrons/components'
+
+import type { ReactNode } from 'react'
 import type { StyleProps } from '@opentrons/components'
 
 export interface OneColumnProps extends StyleProps {
-  children: React.ReactNode
+  children: ReactNode
 }
 
 export function OneColumn({

app/src/molecules/InterventionModal/OneColumnOrTwoColumn.tsx

@@ -1,5 +1,3 @@
-import type * as React from 'react'
-
 import { css } from 'styled-components'
 import {
   Flex,
@@ -9,11 +7,13 @@ import {
   WRAP,
   RESPONSIVENESS,
 } from '@opentrons/components'
-import type { StyleProps } from '@opentrons/components'
 import { TWO_COLUMN_ELEMENT_MIN_WIDTH } from './constants'
 
+import type { ReactNode } from 'react'
+import type { StyleProps } from '@opentrons/components'
+
 export interface OneColumnOrTwoColumnProps extends StyleProps {
-  children: [React.ReactNode, React.ReactNode]
+  children: [ReactNode, ReactNode]
 }
 
 export function OneColumnOrTwoColumn({

app/src/molecules/InterventionModal/TwoColumn.tsx

@@ -1,11 +1,11 @@
-import type * as React from 'react'
-
 import { Flex, Box, DIRECTION_ROW, SPACING, WRAP } from '@opentrons/components'
 import type { StyleProps } from '@opentrons/components'
 import { TWO_COLUMN_ELEMENT_MIN_WIDTH } from './constants'
 
+import type { ReactNode } from 'react'
+
 export interface TwoColumnProps extends StyleProps {
-  children: [React.ReactNode, React.ReactNode]
+  children: [ReactNode, ReactNode]
 }
 
 export function TwoColumn({

app/src/molecules/InterventionModal/index.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useSelector } from 'react-redux'
 import { css } from 'styled-components'
 
@@ -32,6 +31,7 @@ import { DescriptionContent } from './DescriptionContent'
 import { DeckMapContent } from './DeckMapContent'
 import { CategorizedStepContent } from './CategorizedStepContent'
 
+import type { MouseEvent, ReactNode } from 'react'
 import type { FlattenSimpleInterpolation } from 'styled-components'
 import type { IconName } from '@opentrons/components'
 
@@ -116,9 +116,9 @@ const ERROR_COLOR = COLORS.red50
 
 export interface InterventionModalProps {
   /** Optional modal title heading. Aligned to the left. */
-  titleHeading?: React.ReactNode
+  titleHeading?: ReactNode
   /** Optional modal heading right of the icon. Aligned right if titleHeading is supplied, otherwise aligned left. **/
-  iconHeading?: React.ReactNode
+  iconHeading?: ReactNode
   /** Optional onClick for the icon heading and icon. */
   iconHeadingOnClick?: () => void
   /** overall style hint */
@@ -128,7 +128,7 @@ export interface InterventionModalProps {
   /* Optional icon size override. */
   iconSize?: string
   /** modal contents */
-  children: React.ReactNode
+  children: ReactNode
 }
 
 export function InterventionModal({
@@ -160,7 +160,7 @@ export function InterventionModal({
           {...modalStyle}
           flexDirection={DIRECTION_COLUMN}
           border={border}
-          onClick={(e: React.MouseEvent) => {
+          onClick={(e: MouseEvent) => {
             e.stopPropagation()
           }}
         >

app/src/molecules/InterventionModal/story-utils/StandIn.tsx

@@ -1,10 +1,10 @@
-import type * as React from 'react'
 import { Box, BORDERS } from '@opentrons/components'
+import type { ReactNode } from 'react'
 
 export function StandInContent({
   children,
 }: {
-  children?: React.ReactNode
+  children?: ReactNode
 }): JSX.Element {
   return (
     <Box

app/src/molecules/JogControls/ControlContainer.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import {
   BORDERS,
@@ -9,11 +8,13 @@ import {
   SPACING,
   LegacyStyledText,
 } from '@opentrons/components'
+
+import type { ReactNode } from 'react'
 import type { StyleProps } from '@opentrons/components'
 
 interface ControlContainerProps extends StyleProps {
   title: string
-  children: React.ReactNode
+  children: ReactNode
 }
 
 const CONTROL_CHILDREN_STYLES = css`

app/src/molecules/MiniCard/index.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import {
   BORDERS,
@@ -8,12 +7,13 @@ import {
   SPACING,
 } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
 import type { StyleProps } from '@opentrons/components'
 
 interface MiniCardProps extends StyleProps {
   onClick: () => void
   isSelected: boolean
-  children: React.ReactNode
+  children: ReactNode
   isError?: boolean
   isWarning?: boolean
 }

app/src/molecules/OddModal/OddModal.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import {
   ALIGN_CENTER,
   BORDERS,
@@ -11,14 +10,15 @@ import {
 import { BackgroundOverlay } from '../BackgroundOverlay'
 import { OddModalHeader } from './OddModalHeader'
 
+import type { MouseEvent, MouseEventHandler, ReactNode } from 'react'
 import type { StyleProps } from '@opentrons/components'
 import type { OddModalHeaderBaseProps, ModalSize } from './types'
 
 interface OddModalProps extends StyleProps {
   /** clicking anywhere outside of the modal closes it  */
-  onOutsideClick?: React.MouseEventHandler
+  onOutsideClick?: MouseEventHandler
   /** modal content */
-  children: React.ReactNode
+  children: ReactNode
   /** for small, medium, or large modal sizes, medium by default */
   modalSize?: ModalSize
   /** see OddModalHeader component for more details */
@@ -66,7 +66,7 @@ export function OddModal(props: OddModalProps): JSX.Element {
         margin={SPACING.spacing32}
         flexDirection={DIRECTION_COLUMN}
         aria-label={`modal_${modalSize}`}
-        onClick={(e: React.MouseEvent) => {
+        onClick={(e: MouseEvent) => {
           e.stopPropagation()
         }}
       >

app/src/molecules/SimpleWizardBody/SimpleWizardBodyContent.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useSelector } from 'react-redux'
 import { css } from 'styled-components'
 import {
@@ -21,13 +20,15 @@ import SuccessIcon from '/app/assets/images/icon_success.png'
 import { getIsOnDevice } from '/app/redux/config'
 
 import { Skeleton } from '/app/atoms/Skeleton'
+
+import type { ReactNode } from 'react'
 import type { RobotType } from '@opentrons/shared-data'
 
 interface Props {
   iconColor: string
   header: string
   isSuccess: boolean
-  children?: React.ReactNode
+  children?: ReactNode
   subHeader?: string | JSX.Element
   isPending?: boolean
   robotType?: RobotType

app/src/molecules/UnorderedList/index.tsx

@@ -1,9 +1,10 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import { SPACING, LegacyStyledText } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
+
 interface UnorderedListProps {
-  items: React.ReactNode[]
+  items: ReactNode[]
 }
 export function UnorderedList(props: UnorderedListProps): JSX.Element {
   const { items } = props

app/src/molecules/modals/BottomButtonBar.tsx

@@ -1,18 +1,18 @@
 // bottom button bar for modals
 // TODO(mc, 2018-08-18): maybe make this the default AlertModal behavior
-import type * as React from 'react'
 import cx from 'classnames'
 
 import { OutlineButton } from '@opentrons/components'
 import styles from './styles.module.css'
 
+import type { ReactNode } from 'react'
 import type { ButtonProps } from '@opentrons/components'
 
 type MaybeButtonProps = ButtonProps | null | undefined
 interface Props {
   buttons: MaybeButtonProps[]
   className?: string | null
-  description?: React.ReactNode | null
+  description?: ReactNode | null
 }
 
 export function BottomButtonBar(props: Props): JSX.Element {

app/src/organisms/Desktop/CalibrateTipLength/TipLengthCalibrationInfoBox.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import {
   Box,
   Text,
@@ -7,9 +6,11 @@ import {
   SPACING,
 } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
+
 export interface TipLengthCalibrationInfoBoxProps {
   title: string
-  children: React.ReactNode
+  children: ReactNode
 }
 
 export function TipLengthCalibrationInfoBox(