@opentrons/components 0.3.14-alpha.0 → 0.3.16-alpha.0

package/README.md

@@ -8,7 +8,7 @@
 
 ## Version
 
-`0.3.14-alpha.0`
+`0.3.16-alpha.0`
 
 ## License
 

package/lib/alerts/AlertItem.d.ts

@@ -18,4 +18,4 @@ export interface AlertItemProps {
 /**
  * @deprecated Use 'Banner' instead
  */
-export declare function AlertItem(props: AlertItemProps): JSX.Element;
+export declare function AlertItem(props: AlertItemProps): ReactNode;

package/lib/atoms/AnimationVideo/index.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 export type AnimationVideoProps = ComponentProps<'video'>;
 /**
  * A `<video>` tag with default props for showing a looping animation.
@@ -10,4 +10,4 @@ export type AnimationVideoProps = ComponentProps<'video'>;
  * </AnimationVideo>
  * ```
  */
-export declare function AnimationVideo(props: AnimationVideoProps): JSX.Element;
+export declare function AnimationVideo(props: AnimationVideoProps): ReactNode;

package/lib/atoms/Checkbox/index.d.ts

@@ -1,4 +1,4 @@
-import type { ChangeEventHandler } from 'react';
+import type { ChangeEventHandler, ReactNode } from 'react';
 export interface CheckboxProps {
     /** checkbox is checked if value is true */
     isChecked: boolean;
@@ -15,11 +15,11 @@ export interface CheckboxProps {
     /** optional width for helix */
     width?: string;
 }
-export declare function Checkbox(props: CheckboxProps): JSX.Element;
+export declare function Checkbox(props: CheckboxProps): ReactNode;
 interface CheckProps {
     isChecked: boolean;
     color?: string;
     disabled?: boolean;
 }
-export declare function Check(props: CheckProps): JSX.Element;
+export declare function Check(props: CheckProps): ReactNode;
 export {};

package/lib/atoms/CheckboxBasic/index.d.ts

@@ -1,4 +1,4 @@
-import type { ChangeEventHandler } from 'react';
+import type { ChangeEventHandler, ReactNode } from 'react';
 export interface CheckboxBasicProps {
     /** false = unchecked, true = checked, 'indeterminate' = partial-select dash */
     checked: boolean | 'indeterminate';
@@ -13,4 +13,4 @@ export interface CheckboxBasicProps {
      */
     backgroundColor?: string;
 }
-export declare function CheckboxBasic(props: CheckboxBasicProps): JSX.Element;
+export declare function CheckboxBasic(props: CheckboxBasicProps): ReactNode;

package/lib/atoms/CheckboxField/index.d.ts

@@ -19,4 +19,4 @@ export interface CheckboxFieldProps {
     /** optional padding */
     padding?: string;
 }
-export declare function CheckboxField(props: CheckboxFieldProps): JSX.Element;
+export declare function CheckboxField(props: CheckboxFieldProps): ReactNode;

package/lib/atoms/Chip/index.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { IconName } from '../../icons';
 import type { StyleProps } from '../../primitives';
 export type ChipType = 'error' | 'info' | 'neutral' | 'success' | 'warning';
@@ -18,5 +19,5 @@ interface ChipProps extends StyleProps {
     /** icon should pulse */
     pulseIcon?: boolean;
 }
-export declare function Chip(props: ChipProps): JSX.Element;
+export declare function Chip(props: ChipProps): ReactNode;
 export {};

package/lib/atoms/CodeBlock/index.d.ts

@@ -2,5 +2,5 @@ import type { ReactNode } from 'react';
 interface CodeBlockProps {
     children: ReactNode | string;
 }
-export declare function CodeBlock({ children }: CodeBlockProps): JSX.Element;
+export declare function CodeBlock({ children }: CodeBlockProps): ReactNode;
 export {};

package/lib/atoms/Divider/index.d.ts

@@ -1,5 +1,5 @@
 import { Box } from '../..';
-import type { ComponentProps } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 type Props = ComponentProps<typeof Box>;
-export declare function Divider(props: Props): JSX.Element;
+export declare function Divider(props: Props): ReactNode;
 export {};

package/lib/atoms/FixedTrashText/index.d.ts

@@ -1 +1,2 @@
-export declare function FixedTrashText(): JSX.Element;
+import type { ReactNode } from 'react';
+export declare function FixedTrashText(): ReactNode;

package/lib/atoms/InlineNotification/index.d.ts

@@ -1,4 +1,4 @@
-import type { MouseEventHandler } from 'react';
+import type { MouseEventHandler, ReactNode } from 'react';
 import type { StyleProps } from '../../primitives';
 type InlineNotificationType = 'alert' | 'error' | 'neutral' | 'success';
 export interface InlineNotificationProps extends StyleProps {
@@ -13,6 +13,7 @@ export interface InlineNotificationProps extends StyleProps {
     onCloseClick?: (() => void) | MouseEventHandler<HTMLButtonElement>;
     linkText?: string;
     onLinkClick?: (() => void) | MouseEventHandler<HTMLAnchorElement>;
+    className?: string;
 }
-export declare function InlineNotification(props: InlineNotificationProps): JSX.Element;
+export declare function InlineNotification(props: InlineNotificationProps): ReactNode;
 export {};

package/lib/atoms/ListButton/ListButtonChildren/ListButtonAccordion.d.ts

@@ -6,5 +6,5 @@ interface ListButtonAccordionProps {
     mainHeadline?: string;
     headline?: string;
 }
-export declare function ListButtonAccordion(props: ListButtonAccordionProps): JSX.Element;
+export declare function ListButtonAccordion(props: ListButtonAccordionProps): ReactNode;
 export {};

package/lib/atoms/ListButton/ListButtonChildren/ListButtonAccordionContainer.d.ts

@@ -3,5 +3,5 @@ interface ListButtonAccordionContainerProps {
     children: ReactNode;
     id: string;
 }
-export declare function ListButtonAccordionContainer(props: ListButtonAccordionContainerProps): JSX.Element;
+export declare function ListButtonAccordionContainer(props: ListButtonAccordionContainerProps): ReactNode;
 export {};

package/lib/atoms/ListButton/index.d.ts

@@ -14,4 +14,4 @@ interface ListButtonProps extends StyleProps {
     /** optional data-testid value for testing */
     testId?: string;
 }
-export declare function ListButton(props: ListButtonProps): JSX.Element;
+export declare function ListButton(props: ListButtonProps): ReactNode;

package/lib/atoms/ListItem/ListItemChildren/ListItemCustomize.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { DropdownMenuProps } from '../../../molecules/DropdownMenu';
 import type { TagProps } from '../../Tag/index';
 interface ListItemCustomizeProps {
@@ -11,5 +12,5 @@ interface ListItemCustomizeProps {
     /** optional placement of the menu */
     menuPlacement?: 'auto' | 'top' | 'bottom';
 }
-export declare function ListItemCustomize(props: ListItemCustomizeProps): JSX.Element;
+export declare function ListItemCustomize(props: ListItemCustomizeProps): ReactNode;
 export {};

package/lib/atoms/ListItem/ListItemChildren/ListItemDescriptor.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 interface ListItemDescriptorProps {
     /** ListItemDescriptor size type */
     type: 'default' | 'large';
@@ -8,5 +9,5 @@ interface ListItemDescriptorProps {
     /** ListItemDescriptor flex direction */
     changeFlexDirection?: boolean;
 }
-export declare const ListItemDescriptor: (props: ListItemDescriptorProps) => JSX.Element;
+export declare const ListItemDescriptor: (props: ListItemDescriptorProps) => ReactNode;
 export {};

package/lib/atoms/ListItem/index.d.ts

@@ -11,4 +11,4 @@ interface ListItemProps extends StyleProps {
     onMouseEnter?: () => void;
     onMouseLeave?: () => void;
 }
-export declare function ListItem(props: ListItemProps): JSX.Element;
+export declare function ListItem(props: ListItemProps): ReactNode;

package/lib/atoms/ListTable/index.d.ts

@@ -3,4 +3,4 @@ export interface ListTableProps {
     children: ReactNode;
     headers?: [ReactNode?, ReactNode?, ReactNode?, ReactNode?];
 }
-export declare function ListTable({ headers, children }: ListTableProps): JSX.Element;
+export declare function ListTable({ headers, children }: ListTableProps): ReactNode;

package/lib/atoms/MenuList/index.d.ts

@@ -3,6 +3,7 @@ interface MenuListProps {
     children: ReactNode;
     isOnDevice?: boolean;
     onClick?: MouseEventHandler;
+    opensUpward?: boolean;
 }
 export declare const MenuList: (props: MenuListProps) => JSX.Element | null;
 export {};

package/lib/atoms/Slider/index.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 interface SliderProps {
     /** Value of slider as percentage */
     value: number;
@@ -10,5 +11,5 @@ interface SliderProps {
     /** Gap between label and slider: "large" (8px) or "small" (4px). Defaults to "large". */
     type?: 'small' | 'large';
 }
-export declare function Slider({ value, label, adjustValue, backgroundColor, type, }: SliderProps): JSX.Element;
+export declare function Slider({ value, label, adjustValue, backgroundColor, type, }: SliderProps): ReactNode;
 export {};

package/lib/atoms/Snackbar/index.d.ts

@@ -1,7 +1,8 @@
+import type { ReactNode } from 'react';
 import type { StyleProps } from '../../primitives';
 export interface SnackbarProps extends StyleProps {
     message: string;
     onClose?: () => void;
     duration?: number;
 }
-export declare function Snackbar(props: SnackbarProps): JSX.Element;
+export declare function Snackbar(props: SnackbarProps): ReactNode;

package/lib/atoms/StepMeter/index.d.ts

@@ -1,6 +1,7 @@
+import type { ReactNode } from 'react';
 interface StepMeterProps {
     totalSteps: number;
     currentStep: number | null;
 }
-export declare const StepMeter: (props: StepMeterProps) => JSX.Element;
+export declare const StepMeter: (props: StepMeterProps) => ReactNode;
 export {};

package/lib/atoms/StorageBar/index.d.ts

@@ -1,7 +1,8 @@
+import type { ReactNode } from 'react';
 interface StorageBarProps {
     percentUsed: number;
     label: string;
     t?: (key: string, opts?: Record<string, unknown>) => string;
 }
-export declare function StorageBar({ percentUsed, label, t, }: StorageBarProps): JSX.Element;
+export declare function StorageBar({ percentUsed, label, t, }: StorageBarProps): ReactNode;
 export {};

package/lib/atoms/StyledText/PlaceholderStyledText.d.ts

@@ -10,5 +10,5 @@ interface PlaceholderStyledTextProps {
  * USED FOR PROTOCOL LIBRARY TO NOT USE STYLED-COMPONENTS. USE THIS
  * UNTIL WE MIGRATE STYLEDTEXT PROPERLY
  */
-export declare const PlaceholderStyledText: (props: PlaceholderStyledTextProps) => JSX.Element;
+export declare const PlaceholderStyledText: (props: PlaceholderStyledTextProps) => ReactNode;
 export {};

package/lib/atoms/SubListTable/index.d.ts

@@ -3,4 +3,4 @@ export interface SubListTableProps {
     children: ReactNode;
     headers?: [string?, string?, string?, string?];
 }
-export declare function SubListTable({ headers, children, }: SubListTableProps): JSX.Element;
+export declare function SubListTable({ headers, children, }: SubListTableProps): ReactNode;

package/lib/atoms/Tag/index.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { IconName } from '../../icons';
 import type { LiquidIconProps } from '../../molecules/LiquidIcon';
 export type TagType = 'default' | 'interactive' | 'branded' | 'onColor' | 'flex';
@@ -14,4 +15,4 @@ export interface TagProps {
     /** liquid icon */
     liquidIcon?: LiquidIconProps;
 }
-export declare function Tag(props: TagProps): JSX.Element;
+export declare function Tag(props: TagProps): ReactNode;

package/lib/atoms/Toast/index.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { IconProps } from '../../icons';
 import type { StyleProps } from '../../primitives';
 export declare const SUCCESS_TOAST: 'success';
@@ -22,4 +23,4 @@ export interface ToastProps extends StyleProps {
     onLinkClick?: () => void;
 }
 export declare const TOAST_ANIMATION_DURATION = 500;
-export declare function Toast(props: ToastProps): JSX.Element;
+export declare function Toast(props: ToastProps): ReactNode;

package/lib/atoms/ToggleGroup/index.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 interface ToggleGroupProps {
     leftText: string;
     rightText: string;
@@ -5,5 +6,5 @@ interface ToggleGroupProps {
     rightClick: () => void;
     selectedValue: string;
 }
-export declare const ToggleGroup: (props: ToggleGroupProps) => JSX.Element;
+export declare const ToggleGroup: (props: ToggleGroupProps) => ReactNode;
 export {};

package/lib/atoms/Tooltip/index.d.ts

@@ -8,4 +8,4 @@ export interface TooltipProps extends StyleProps {
     };
     key?: string;
 }
-export declare function Tooltip(props: TooltipProps): JSX.Element;
+export declare function Tooltip(props: TooltipProps): ReactNode;

package/lib/atoms/buttons/BasicButton.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps, MouseEvent } from 'react';
+import type { ComponentProps, MouseEvent, ReactNode } from 'react';
 import type { IconName } from '../../icons';
 interface BasicButtonProps {
     children: string;
@@ -9,5 +9,5 @@ interface BasicButtonProps {
     tabIndex?: number;
     iconName?: IconName;
 }
-export declare function BasicButton({ children, onClick, isDisabled, underLine, tabIndex, iconName, ...props }: BasicButtonProps): JSX.Element;
+export declare function BasicButton({ children, onClick, isDisabled, underLine, tabIndex, iconName, ...props }: BasicButtonProps): ReactNode;
 export {};

package/lib/atoms/buttons/EmptySelectorButton.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { IconName } from '../../index';
 interface EmptySelectorButtonProps {
     onClick: () => void;
@@ -6,5 +7,5 @@ interface EmptySelectorButtonProps {
     iconName?: IconName;
     disabled?: boolean;
 }
-export declare function EmptySelectorButton(props: EmptySelectorButtonProps): JSX.Element;
+export declare function EmptySelectorButton(props: EmptySelectorButtonProps): ReactNode;
 export {};

package/lib/atoms/buttons/LargeButton.d.ts

@@ -13,5 +13,5 @@ interface LargeButtonProps extends StyleProps {
     /** aria-disabled for displaying snack bar. */
     ariaDisabled?: boolean;
 }
-export declare function LargeButton(props: LargeButtonProps): JSX.Element;
+export declare function LargeButton(props: LargeButtonProps): ReactNode;
 export {};

package/lib/atoms/buttons/PrimaryButton/index.d.ts

@@ -1,6 +1,6 @@
-import type { ComponentProps } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 import type { StyleProps } from '../../../primitives/types';
 export type PrimaryButtonProps = ComponentProps<'button'> & StyleProps & {
     variant?: 'default' | 'alt' | 'warning';
 };
-export declare function PrimaryButton(props: PrimaryButtonProps): JSX.Element;
+export declare function PrimaryButton(props: PrimaryButtonProps): ReactNode;

package/lib/atoms/buttons/RadioButton.d.ts

@@ -50,5 +50,5 @@ interface RadioButtonProps extends StyleProps {
      */
     onClick?: MouseEventHandler;
 }
-export declare function RadioButton(props: RadioButtonProps): JSX.Element;
+export declare function RadioButton(props: RadioButtonProps): ReactNode;
 export {};

package/lib/atoms/buttons/TertiaryButton.d.ts

@@ -1,8 +1,8 @@
 import { Btn } from '../../primitives';
-import type { ComponentProps } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 type ButtonType = 'primary' | 'secondary' | 'white';
 type TertiaryButtonProps = Omit<ComponentProps<typeof Btn>, 'ref'> & {
     buttonType: ButtonType;
 };
-export declare function TertiaryButton({ buttonType, ...props }: TertiaryButtonProps): JSX.Element;
+export declare function TertiaryButton({ buttonType, ...props }: TertiaryButtonProps): ReactNode;
 export {};

package/lib/buttons/Button.d.ts

@@ -47,4 +47,4 @@ export interface ButtonProps {
  * ```
  * @deprecated Use {@link Btn}
  */
-export declare function Button(props: ButtonProps): JSX.Element;
+export declare function Button(props: ButtonProps): ReactNode;

package/lib/buttons/DeprecatedPrimaryButton.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { ButtonProps } from './Button';
 /**
  * Primary application button. Fills its container and has a dark
@@ -5,4 +6,4 @@ import type { ButtonProps } from './Button';
  *
  * @deprecated Use {@link PrimaryButton}
  */
-export declare function DeprecatedPrimaryButton(props: ButtonProps): JSX.Element;
+export declare function DeprecatedPrimaryButton(props: ButtonProps): ReactNode;

package/lib/buttons/FlatButton.d.ts

@@ -1,5 +1,6 @@
+import type { ReactNode } from 'react';
 import type { ButtonProps } from './Button';
 /**
  * Flat-styled button with a default width of `9rem` and no background fill
  */
-export declare function FlatButton(props: ButtonProps): JSX.Element;
+export declare function FlatButton(props: ButtonProps): ReactNode;

package/lib/buttons/IconButton.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { IconProps } from '../icons';
 import type { ButtonProps } from './Button';
 interface Props extends ButtonProps {
@@ -10,5 +11,5 @@ interface Props extends ButtonProps {
  *
  * @deprecated Use {@link Btn} and {@link Icon}
  */
-export declare function IconButton(props: Props): JSX.Element;
+export declare function IconButton(props: Props): ReactNode;
 export {};

package/lib/buttons/OutlineButton.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { ButtonProps } from './Button';
 /**
  * Button with no background fill and a dark border.
@@ -5,4 +6,4 @@ import type { ButtonProps } from './Button';
  *
  * @deprecated Use {@link SecondaryBtn}
  */
-export declare function OutlineButton(props: ButtonProps): JSX.Element;
+export declare function OutlineButton(props: ButtonProps): ReactNode;

package/lib/controls/ControlInfo.d.ts

@@ -3,4 +3,4 @@ export interface ControlInfoProps {
     children: ReactNode;
     className?: string;
 }
-export declare function ControlInfo(props: ControlInfoProps): JSX.Element;
+export declare function ControlInfo(props: ControlInfoProps): ReactNode;

package/lib/controls/LabeledButton.d.ts

@@ -5,4 +5,4 @@ export interface LabeledButtonProps {
     buttonProps: ButtonProps;
     children: ReactNode;
 }
-export declare function LabeledButton(props: LabeledButtonProps): JSX.Element;
+export declare function LabeledButton(props: LabeledButtonProps): ReactNode;

package/lib/controls/LabeledCheckbox.d.ts

@@ -7,4 +7,4 @@ export interface LabeledCheckboxProps {
     children: ReactNode;
     onChange: ChangeEventHandler<HTMLInputElement>;
 }
-export declare function LabeledCheckbox(props: LabeledCheckboxProps): JSX.Element;
+export declare function LabeledCheckbox(props: LabeledCheckboxProps): ReactNode;

package/lib/controls/LabeledControl.d.ts

@@ -4,4 +4,4 @@ export interface LabeledControlProps {
     control: ReactNode;
     children?: ReactNode;
 }
-export declare function LabeledControl(props: LabeledControlProps): JSX.Element;
+export declare function LabeledControl(props: LabeledControlProps): ReactNode;

package/lib/controls/LabeledRadioGroup.d.ts

@@ -5,4 +5,4 @@ export interface LabeledRadioGroupProps extends RadioGroupProps {
     children: ReactNode;
     'data-test'?: string;
 }
-export declare function LabeledRadioGroup(props: LabeledRadioGroupProps): JSX.Element;
+export declare function LabeledRadioGroup(props: LabeledRadioGroupProps): ReactNode;

package/lib/controls/StackedLabeledControl.d.ts

@@ -4,4 +4,4 @@ export interface StackedLabeledControlProps {
     control: ReactNode;
     children?: ReactNode;
 }
-export declare function StackedLabeledControl(props: StackedLabeledControlProps): JSX.Element;
+export declare function StackedLabeledControl(props: StackedLabeledControlProps): ReactNode;

package/lib/controls/ToggleButton.d.ts

@@ -1,4 +1,4 @@
-import type { MouseEvent } from 'react';
+import type { MouseEvent, ReactNode } from 'react';
 import type { StyleProps } from '../primitives';
 interface ToggleButtonProps extends StyleProps {
     toggledOn: boolean;
@@ -7,5 +7,5 @@ interface ToggleButtonProps extends StyleProps {
     id?: string;
     onClick?: (e: MouseEvent) => void;
 }
-export declare function ToggleButton(props: ToggleButtonProps): JSX.Element;
+export declare function ToggleButton(props: ToggleButtonProps): ReactNode;
 export {};

package/lib/forms/DeprecatedCheckboxField.d.ts

@@ -1,4 +1,4 @@
-import type { ChangeEventHandler, ComponentProps } from 'react';
+import type { ChangeEventHandler, ComponentProps, ReactNode } from 'react';
 /**
  * Checkbox Field Properties.
  */
@@ -30,4 +30,4 @@ export interface DeprecatedCheckboxFieldProps {
  * Checkbox Form Field
  * @deprecated
  */
-export declare function DeprecatedCheckboxField(props: DeprecatedCheckboxFieldProps): JSX.Element;
+export declare function DeprecatedCheckboxField(props: DeprecatedCheckboxFieldProps): ReactNode;

package/lib/forms/FormGroup.d.ts

@@ -16,4 +16,4 @@ export interface FormGroupProps {
     /** boolean indicating formGroup used in pipette Settings slideout */
     isPipetteSettingsSlideout?: boolean;
 }
-export declare function FormGroup(props: FormGroupProps): JSX.Element;
+export declare function FormGroup(props: FormGroupProps): ReactNode;

package/lib/forms/LegacyInputField.d.ts

@@ -48,4 +48,4 @@ export interface LegacyInputFieldProps {
 /**
  * @deprecated Use `InputField`
  */
-export declare function LegacyInputField(props: LegacyInputFieldProps): JSX.Element;
+export declare function LegacyInputField(props: LegacyInputFieldProps): ReactNode;

package/lib/forms/RadioGroup.d.ts

@@ -26,4 +26,4 @@ export interface RadioGroupProps {
     /** optional prop to turn radio field blue when checked */
     useBlueChecked?: boolean;
 }
-export declare function RadioGroup(props: RadioGroupProps): JSX.Element;
+export declare function RadioGroup(props: RadioGroupProps): ReactNode;

package/lib/forms/Select.d.ts

@@ -1,4 +1,5 @@
 import { components as reactSelectComponents } from 'react-select';
+import type { ReactNode } from 'react';
 import type { Props as ReactSelectProps } from 'react-select';
 import type { POSITION_ABSOLUTE, POSITION_FIXED } from '../styles';
 export { reactSelectComponents };
@@ -23,4 +24,4 @@ export type SelectPlacement = typeof PLACEMENT_AUTO | typeof PLACEMENT_BOTTOM |
 export type SelectPosition = typeof POSITION_ABSOLUTE | typeof POSITION_FIXED;
 export type SelectOptionContext = typeof CONTEXT_MENU | typeof CONTEXT_VALUE;
 export type SelectProps = ReactSelectProps<SelectOption>;
-export declare function Select(props: SelectProps): JSX.Element;
+export declare function Select(props: SelectProps): ReactNode;

package/lib/forms/SelectField.d.ts

@@ -30,4 +30,4 @@ export interface SelectFieldProps {
     /** blur handler called with (name) */
     onLoseFocus?: (name: string) => void;
 }
-export declare function SelectField(props: SelectFieldProps): JSX.Element;
+export declare function SelectField(props: SelectFieldProps): ReactNode;

package/lib/forms/ToggleField.d.ts

@@ -1,4 +1,4 @@
-import type { ChangeEvent } from 'react';
+import type { ChangeEvent, ReactNode } from 'react';
 export interface ToggleFieldProps {
     /** change handler */
     onChange: (event: ChangeEvent<HTMLInputElement>) => unknown;
@@ -19,4 +19,4 @@ export interface ToggleFieldProps {
     /** html tabindex property */
     tabIndex?: number;
 }
-export declare function ToggleField(props: ToggleFieldProps): JSX.Element;
+export declare function ToggleField(props: ToggleFieldProps): ReactNode;

package/lib/hardware-sim/BaseDeck/BaseDeck.d.ts

@@ -65,5 +65,5 @@ interface BaseDeckProps {
      */
     svgProps?: any;
 }
-export declare function BaseDeck(props: BaseDeckProps): JSX.Element;
+export declare function BaseDeck(props: BaseDeckProps): ReactNode;
 export {};

package/lib/hardware-sim/BaseDeck/MiddleSlot.d.ts

@@ -1,8 +1,8 @@
-import type { SVGProps } from 'react';
+import type { ReactNode, SVGProps } from 'react';
 export interface MiddleSlotProps {
     showSlotClips: boolean;
     fixtureBaseColor: SVGProps<SVGPathElement>['fill'];
     slotClipColor: SVGProps<SVGPathElement>['stroke'];
     stroke?: string;
 }
-export declare function MiddleSlot(props: MiddleSlotProps): JSX.Element;
+export declare function MiddleSlot(props: MiddleSlotProps): ReactNode;

package/lib/hardware-sim/BaseDeck/SlotBase.d.ts

@@ -1,2 +1,2 @@
-import type { SVGProps } from 'react';
-export declare function SlotBase(props: SVGProps<SVGPathElement>): JSX.Element;
+import type { ReactNode, SVGProps } from 'react';
+export declare function SlotBase(props: SVGProps<SVGPathElement>): ReactNode;

package/lib/hardware-sim/BaseDeck/SlotClip.d.ts

@@ -1,2 +1,2 @@
-import type { SVGProps } from 'react';
-export declare function SlotClip(props: SVGProps<SVGPathElement>): JSX.Element;
+import type { ReactNode, SVGProps } from 'react';
+export declare function SlotClip(props: SVGProps<SVGPathElement>): ReactNode;

package/lib/hardware-sim/BaseDeck/StackedBadge.d.ts

@@ -1 +1,2 @@
-export declare function StackedBadge(): JSX.Element;
+import type { ReactNode } from 'react';
+export declare function StackedBadge(): ReactNode;

package/lib/hardware-sim/BaseDeck/WasteChuteFixture.d.ts

@@ -1,4 +1,4 @@
-import type { SVGProps } from 'react';
+import type { ReactNode, SVGProps } from 'react';
 import type { DeckDefinition, ModuleType, WASTE_CHUTE_CUTOUT } from '@opentrons/shared-data';
 import type { DeckLabelProps } from '../../molecules';
 interface WasteChuteFixtureProps extends SVGProps<SVGGElement> {
@@ -25,5 +25,5 @@ interface WasteChuteProps {
 /**
  * a deck map foreign object representing the physical location of the waste chute connected to the deck
  */
-export declare function WasteChute(props: WasteChuteProps): JSX.Element;
+export declare function WasteChute(props: WasteChuteProps): ReactNode;
 export {};

package/lib/hardware-sim/Deck/OT2Layers.d.ts

@@ -1,14 +1,15 @@
-export declare function FixedBase(): JSX.Element;
+import type { ReactNode } from 'react';
+export declare function FixedBase(): ReactNode;
 interface FixedTrashProps {
     highlight?: boolean;
 }
-export declare function FixedTrash(props: FixedTrashProps): JSX.Element;
-export declare function DoorStops(): JSX.Element;
-export declare function MetalFrame(): JSX.Element;
-export declare function RemovableDeckOutline(): JSX.Element;
-export declare function SlotRidges(): JSX.Element;
-export declare function SlotNumbers(): JSX.Element;
-export declare function CalibrationMarkings(): JSX.Element;
-export declare function RemovalHandle(): JSX.Element;
-export declare function ScrewHoles(): JSX.Element;
+export declare function FixedTrash(props: FixedTrashProps): ReactNode;
+export declare function DoorStops(): ReactNode;
+export declare function MetalFrame(): ReactNode;
+export declare function RemovableDeckOutline(): ReactNode;
+export declare function SlotRidges(): ReactNode;
+export declare function SlotNumbers(): ReactNode;
+export declare function CalibrationMarkings(): ReactNode;
+export declare function RemovalHandle(): ReactNode;
+export declare function ScrewHoles(): ReactNode;
 export {};