@opentrons/components 0.1.6-alpha.8 → 0.1.7-alpha.0

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

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export interface SubListTableProps {
+    children: ReactNode;
+    headers?: [string?, string?, string?, string?];
+}
+export declare function SubListTable({ headers, children, }: SubListTableProps): JSX.Element;

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

@@ -1,5 +1,5 @@
 import type { IconName } from '../../icons';
-export type TagType = 'default' | 'interactive' | 'branded';
+export type TagType = 'default' | 'interactive' | 'branded' | 'onColor';
 export interface TagProps {
     /** Tag content */
     text: string;
@@ -9,5 +9,6 @@ export interface TagProps {
     iconPosition?: 'left' | 'right';
     /** Tagicon */
     iconName?: IconName;
+    shrinkToContent?: boolean;
 }
 export declare function Tag(props: TagProps): JSX.Element;

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

@@ -1,8 +1,8 @@
-import type * as React from 'react';
+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;
     };

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

@@ -1,4 +1,4 @@
-import type * as React from 'react';
+import type { ReactNode } from 'react';
 import type { StyleProps } from '../../primitives';
 import type { IconName } from '../../icons';
 type LargeButtonTypes = 'primary' | 'secondary' | 'alert' | 'alertStroke' | 'alertAlt' | 'stroke';
@@ -7,7 +7,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. */

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

@@ -1,21 +1,26 @@
-import type * as React from 'react';
+import type { ChangeEventHandler, ReactNode } from 'react';
 import type { IconName } from '../../icons';
 import type { StyleProps } from '../../primitives';
+export interface RadioButtonSubLabel {
+    label: ReactNode;
+    align?: 'horizontal' | 'vertical';
+}
 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;
+    tagText?: string;
     isSelected?: boolean;
     largeDesktopBorderRadius?: boolean;
     radioButtonType?: 'large' | 'small';
-    subButtonLabel?: string;
     id?: string;
     maxLines?: number;
     setNoHover?: () => void;
     setHovered?: () => void;
     error?: string | null;
+    buttonSubLabel?: RadioButtonSubLabel;
 }
 export declare function RadioButton(props: RadioButtonProps): JSX.Element;
 export {};

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

@@ -2,6 +2,7 @@ import type { StyleProps } from '../../index';
 interface SecondaryButtonProps extends StyleProps {
     /** button action is dangerous and may have non-reversible side-effects for user */
     isDangerous?: boolean;
+    'aria-disabled'?: boolean;
 }
 export declare const SecondaryButton: import("styled-components").StyledComponent<"button", any, SecondaryButtonProps, never>;
 export {};

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

@@ -0,0 +1,3 @@
+export declare const TertiaryButton: import("styled-components").StyledComponent<"button", any, import("../../primitives").StyleProps & {
+    buttonType: 'primary' | 'secondary' | 'white';
+}, any>;

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

@@ -4,3 +4,4 @@ export * from './LargeButton';
 export * from './PrimaryButton';
 export * from './RadioButton';
 export * from './SecondaryButton';
+export * from './TertiaryButton';

package/lib/atoms/index.d.ts

@@ -18,3 +18,5 @@ export * from './Tag';
 export * from './Toast';
 export * from './ToggleGroup';
 export * from './Tooltip';
+export * from './ListTable';
+export * from './SubListTable';

package/lib/buttons/Button.d.ts

@@ -1,5 +1,5 @@
-import type * as React from 'react';
 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';
@@ -7,7 +7,7 @@ export interface ButtonProps {
     /** id attribute */
     id?: string;
     /** click handler */
-    onClick?: React.MouseEventHandler;
+    onClick?: MouseEventHandler;
     /** name attribute */
     name?: string;
     /** title attribute */
@@ -23,13 +23,13 @@ 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 | typeof BUTTON_TYPE_RESET | typeof BUTTON_TYPE_BUTTON;
     /** 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 */

package/lib/controls/ControlInfo.d.ts

@@ -1,6 +1,6 @@
-import type * as React from 'react';
+import type { ReactNode } from 'react';
 export interface ControlInfoProps {
-    children: React.ReactNode;
+    children: ReactNode;
     className?: string;
 }
 export declare function ControlInfo(props: ControlInfoProps): JSX.Element;

package/lib/controls/LabeledButton.d.ts

@@ -1,8 +1,8 @@
-import type * as React from 'react';
+import type { ReactNode } from 'react';
 import type { ButtonProps } from '../buttons';
 export interface LabeledButtonProps {
     label: string;
     buttonProps: ButtonProps;
-    children: React.ReactNode;
+    children: ReactNode;
 }
 export declare function LabeledButton(props: LabeledButtonProps): JSX.Element;

package/lib/controls/LabeledCheckbox.d.ts

@@ -1,10 +1,10 @@
-import type * as React from 'react';
+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 declare function LabeledCheckbox(props: LabeledCheckboxProps): JSX.Element;

package/lib/controls/LabeledControl.d.ts

@@ -1,7 +1,7 @@
-import type * as React from 'react';
+import type { ReactNode } from 'react';
 export interface LabeledControlProps {
     label: string;
-    control: React.ReactNode;
-    children?: React.ReactNode;
+    control: ReactNode;
+    children?: ReactNode;
 }
 export declare function LabeledControl(props: LabeledControlProps): JSX.Element;

package/lib/controls/LabeledRadioGroup.d.ts

@@ -1,8 +1,8 @@
-import type * as React from 'react';
+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;
 }
 export declare function LabeledRadioGroup(props: LabeledRadioGroupProps): JSX.Element;

package/lib/controls/LabeledToggle.d.ts

@@ -1,9 +1,9 @@
-import type * as React from 'react';
+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;

package/lib/controls/StackedLabeledControl.d.ts

@@ -1,7 +1,7 @@
-import type * as React from 'react';
+import type { ReactNode } from 'react';
 export interface StackedLabeledControlProps {
     label: string;
-    control: React.ReactNode;
-    children?: React.ReactNode;
+    control: ReactNode;
+    children?: ReactNode;
 }
 export declare function StackedLabeledControl(props: StackedLabeledControlProps): JSX.Element;

package/lib/controls/index.d.ts

@@ -1,6 +1,5 @@
 export * from './ToggleButton';
 export * from './LabeledToggle';
 export * from './LabeledButton';
-export * from './LabeledSelect';
 export * from './LabeledCheckbox';
 export * from './LabeledRadioGroup';

package/lib/forms/DeprecatedCheckboxField.d.ts

@@ -1,10 +1,10 @@
-import type * as React from 'react';
+import type { ComponentProps, ChangeEventHandler } from 'react';
 /**
  * Checkbox Field Properties.
  */
 export interface DeprecatedCheckboxFieldProps {
     /** change handler */
-    onChange: React.ChangeEventHandler;
+    onChange: ChangeEventHandler;
     /** checkbox is checked if value is true */
     value?: boolean;
     /** classes to apply */
@@ -22,7 +22,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;
 }

package/lib/forms/FormGroup.d.ts

@@ -1,10 +1,10 @@
-import type * as React from 'react';
+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. */

package/lib/forms/LegacyInputField.d.ts

@@ -1,11 +1,11 @@
-import type * as React from 'react';
+import type { ChangeEventHandler, FocusEvent, MouseEvent, ReactNode } from 'react';
 export declare const INPUT_TYPE_TEXT: 'text';
 export declare const INPUT_TYPE_PASSWORD: 'password';
 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 */
@@ -19,7 +19,7 @@ export interface LegacyInputFieldProps {
     /** placeholder text */
     placeholder?: string;
     /** optional suffix component, appears to the right of input text */
-    units?: React.ReactNode;
+    units?: ReactNode;
     /** 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 */
@@ -31,11 +31,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 */

package/lib/forms/RadioGroup.d.ts

@@ -1,14 +1,14 @@
-import type * as React from 'react';
+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 */

package/lib/forms/SelectField.d.ts

@@ -1,6 +1,6 @@
-import type * as React from 'react';
-import type { SelectProps } from './Select';
+import type { ReactNode } from 'react';
 import type { ActionMeta } from 'react-select';
+import type { SelectProps } from './Select';
 import type { SelectOption } from '.';
 export interface SelectFieldProps {
     /** optional HTML id for container */
@@ -22,7 +22,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) */

package/lib/forms/ToggleField.d.ts

@@ -1,7 +1,7 @@
-import type * as React from 'react';
+import type { ChangeEvent } from 'react';
 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 */

package/lib/forms/index.d.ts

@@ -1,5 +1,4 @@
 export * from './DeprecatedCheckboxField';
-export * from './DropdownField';
 export * from './FormGroup';
 export * from './LegacyInputField';
 export * from './RadioGroup';

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { Module } from '../Module';
+import type { ComponentProps, ReactNode } from 'react';
 import type { Svg } from '../../primitives';
 import type { DeckConfiguration, LabwareDefinition2, LabwareLocation, ModuleLocation, ModuleModel, RobotType } from '@opentrons/shared-data';
 import type { WellFill, WellGroup } from '../Labware';
@@ -9,7 +9,7 @@ export interface LabwareOnDeck {
     wellFill?: WellFill;
     missingTips?: WellGroup;
     /** generic prop to render self-positioned children for each labware */
-    labwareChildren?: React.ReactNode;
+    labwareChildren?: ReactNode;
     onLabwareClick?: () => void;
     highlight?: boolean;
     highlightShadow?: boolean;
@@ -20,9 +20,9 @@ export interface ModuleOnDeck {
     moduleLocation: ModuleLocation;
     nestedLabwareDef?: LabwareDefinition2 | null;
     nestedLabwareWellFill?: WellFill;
-    innerProps?: React.ComponentProps<typeof Module>['innerProps'];
+    innerProps?: ComponentProps<typeof Module>['innerProps'];
     /** generic prop to render self-positioned children for each module */
-    moduleChildren?: React.ReactNode;
+    moduleChildren?: ReactNode;
     onLabwareClick?: () => void;
     highlightLabware?: boolean;
     highlightShadowLabware?: boolean;
@@ -38,12 +38,12 @@ interface BaseDeckProps {
     lightFill?: string;
     mediumFill?: string;
     darkFill?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     showSlotLabels?: boolean;
     /** whether to make wrapping svg tag animatable via @react-spring/web, defaults to false */
     animatedSVG?: boolean;
     /** extra props to pass to svg tag */
-    svgProps?: React.ComponentProps<typeof Svg>;
+    svgProps?: ComponentProps<typeof Svg>;
 }
 export declare function BaseDeck(props: BaseDeckProps): JSX.Element;
 export {};

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

@@ -1,11 +1,11 @@
-import type * as React from 'react';
+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;
 }
 export declare function SingleSlotFixture(props: SingleSlotFixtureProps): JSX.Element | null;

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

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

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

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

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

@@ -1,12 +1,12 @@
-import type * as React from 'react';
+import type { SVGProps } from 'react';
 import type { DeckDefinition, ModuleType } from '@opentrons/shared-data';
 export type StagingAreaLocation = 'cutoutA3' | 'cutoutB3' | '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;
 }
 export declare function StagingAreaFixture(props: StagingAreaFixtureProps): JSX.Element | null;

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

@@ -1,17 +1,26 @@
-import type * as React from 'react';
 import type { WASTE_CHUTE_CUTOUT, DeckDefinition, ModuleType } from '@opentrons/shared-data';
-interface WasteChuteFixtureProps extends React.SVGProps<SVGGElement> {
+import type { SVGProps } from 'react';
+import type { DeckLabelProps } from '../../molecules';
+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 */
+    showHighlight?: boolean;
+    /** optional tag info to display a tag below the waste */
+    tagInfo?: DeckLabelProps[];
 }
 export declare function WasteChuteFixture(props: WasteChuteFixtureProps): JSX.Element | null;
 interface WasteChuteProps {
     wasteIconColor: string;
     backgroundColor: string;
+    showHighlight?: boolean;
+    tagInfo?: DeckLabelProps[];
+    overlay?: JSX.Element;
+    opacity?: string;
 }
 /**
  * a deck map foreign object representing the physical location of the waste chute connected to the deck

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

@@ -1,14 +1,17 @@
-import type * as React from 'react';
 import { WASTE_CHUTE_CUTOUT } from '@opentrons/shared-data';
+import type { SVGProps } from 'react';
 import type { DeckDefinition, ModuleType } from '@opentrons/shared-data';
-interface WasteChuteStagingAreaFixtureProps extends React.SVGProps<SVGGElement> {
+import type { DeckLabelProps } from '../../molecules';
+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;
+    tagInfo?: DeckLabelProps[];
 }
 export declare function WasteChuteStagingAreaFixture(props: WasteChuteStagingAreaFixtureProps): JSX.Element | null;
 export {};

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

@@ -1,4 +1,5 @@
 import type { RobotType } from '@opentrons/shared-data';
+export * from './OT2Layers';
 export interface DeckFromLayersProps {
     robotType: RobotType;
     layerBlocklist: string[];

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

@@ -1,14 +1,19 @@
 import type { RobotType } from '@opentrons/shared-data';
+import type { DeckLabelProps } from '../../molecules';
 export type TrashCutoutId = 'cutoutA1' | 'cutoutB1' | 'cutoutC1' | 'cutoutD1' | 'cutoutA3' | 'cutoutB3' | 'cutoutC3' | 'cutoutD3';
 interface FlexTrashProps {
     robotType: RobotType;
     trashIconColor: string;
     backgroundColor: string;
     trashCutoutId?: TrashCutoutId;
+    /** optional prop to highlight the border of the trashBin */
+    showHighlight?: boolean;
+    /** optional tag info to display a tag below the trash */
+    tagInfo?: DeckLabelProps[];
 }
 /**
  * Component to render Opentrons Flex trash
  * For use as a RobotWorkspace child component
  */
-export declare const FlexTrash: ({ robotType, trashIconColor, backgroundColor, trashCutoutId, }: FlexTrashProps) => JSX.Element | null;
+export declare const FlexTrash: ({ robotType, trashIconColor, backgroundColor, trashCutoutId, showHighlight, tagInfo, }: FlexTrashProps) => JSX.Element | null;
 export {};

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import type { LoadedLabware, LoadedModule, LabwareDefinition2, LabwareLocation, RobotType, DeckConfiguration } from '@opentrons/shared-data';
+import type { ReactNode } from 'react';
 import type { StyleProps } from '../../primitives';
 interface MoveLabwareOnDeckProps extends StyleProps {
     robotType: RobotType;
@@ -9,7 +9,7 @@ interface MoveLabwareOnDeckProps extends StyleProps {
     loadedModules: LoadedModule[];
     loadedLabware: LoadedLabware[];
     deckConfig: DeckConfiguration;
-    backgroundItems?: React.ReactNode;
+    backgroundItems?: ReactNode;
     deckFill?: string;
 }
 export declare function MoveLabwareOnDeck(props: MoveLabwareOnDeckProps): JSX.Element | null;

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

@@ -1,5 +1,8 @@
 export declare function FixedBase(): JSX.Element;
-export declare function FixedTrash(): JSX.Element;
+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;
@@ -8,3 +11,4 @@ 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 {};

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

@@ -1,14 +1,16 @@
-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;
+    /** optional data-testid to test foreignObjects in cypress */
+    dataTestId?: string;
 }
 export declare const RobotCoordsForeignDiv: (props: RobotCoordsForeignDivProps) => JSX.Element;

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

@@ -1,12 +1,12 @@
-import type * as React from 'react';
 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 declare const RobotCoordsForeignObject: (props: RobotCoordsForeignObjectProps) => JSX.Element;

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

@@ -1,8 +1,9 @@
-import type * as React from 'react';
-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;
 }
 /** SVG text reflected to use take robot coordinates as props */
 export declare function RobotCoordsText(props: RobotCoordsTextProps): JSX.Element;