@opentrons/components 0.1.6-alpha.9 → 0.1.7-alpha.1

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

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

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import { Btn } from '../../primitives';
-interface OverflowBtnProps extends React.ComponentProps<typeof Btn> {
+import type { ComponentProps, ForwardedRef, ReactNode } from 'react';
+interface OverflowBtnProps extends ComponentProps<typeof Btn> {
     fillColor?: string;
 }
-export declare const OverflowBtn: (props: OverflowBtnProps, ref: React.ForwardedRef<HTMLInputElement>) => React.ReactNode;
+export declare const OverflowBtn: (props: OverflowBtnProps, ref: ForwardedRef<HTMLInputElement>) => ReactNode;
 export {};

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

@@ -1,8 +1,8 @@
-import type * as React from 'react';
+import type { MouseEventHandler, ReactNode } from 'react';
 interface MenuListProps {
-    children: React.ReactNode;
+    children: ReactNode;
     isOnDevice?: boolean;
-    onClick?: React.MouseEventHandler;
+    onClick?: MouseEventHandler;
 }
 export declare const MenuList: (props: MenuListProps) => JSX.Element | null;
 export {};

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

@@ -1,6 +1,6 @@
 import { Text } from '../../primitives';
-import type * as React from 'react';
-export interface LegacyProps extends React.ComponentProps<typeof Text> {
-    children?: React.ReactNode;
+import type { ComponentProps, ReactNode } from 'react';
+export interface LegacyProps extends ComponentProps<typeof Text> {
+    children?: ReactNode;
 }
 export declare const LegacyStyledText: (props: LegacyProps) => JSX.Element;

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

@@ -1,6 +1,6 @@
 import { Text } from '../../primitives';
-import type * as React from 'react';
 import type { FlattenSimpleInterpolation } from 'styled-components';
+import type { ComponentProps, ReactNode } from 'react';
 declare const helixProductStyleMap: {
     readonly displayBold: {
         readonly as: "h1";
@@ -50,6 +50,10 @@ declare const helixProductStyleMap: {
         readonly as: "p";
         readonly style: FlattenSimpleInterpolation;
     };
+    readonly bodyDefaultRegLink: {
+        readonly as: "p";
+        readonly style: FlattenSimpleInterpolation;
+    };
     readonly captionSemiBold: {
         readonly as: "label";
         readonly style: FlattenSimpleInterpolation;
@@ -141,10 +145,10 @@ declare const ODDStyleMap: {
         readonly style: FlattenSimpleInterpolation;
     };
 };
-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 declare const ODD_STYLES: string[];
 export declare const HELIX_STYLES: string[];

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,6 @@
 import type { IconName } from '../../icons';
-export type TagType = 'default' | 'interactive' | 'branded';
+import type { LiquidIconProps } from '../../molecules/LiquidIcon';
+export type TagType = 'default' | 'interactive' | 'branded' | 'onColor';
 export interface TagProps {
     /** Tag content */
     text: string;
@@ -7,7 +8,10 @@ export interface TagProps {
     type: TagType;
     /** iconLocation */
     iconPosition?: 'left' | 'right';
-    /** Tagicon */
+    /** Tag icon */
     iconName?: IconName;
+    shrinkToContent?: boolean;
+    /** liquid icon */
+    liquidIcon?: LiquidIconProps;
 }
 export declare function Tag(props: TagProps): JSX.Element;

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

@@ -1,5 +1,5 @@
-import type { StyleProps } from '../../primitives';
 import type { IconProps } from '../../icons';
+import type { StyleProps } from '../../primitives';
 export declare const SUCCESS_TOAST: 'success';
 export declare const WARNING_TOAST: 'warning';
 export declare const ERROR_TOAST: 'error';

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

@@ -1,8 +1,8 @@
-import type * as React from 'react';
-import type { UseTooltipResultTooltipProps } from '../../tooltips';
+import type { ReactNode } from 'react';
 import type { StyleProps } from '../../primitives';
+import type { UseTooltipResultTooltipProps } from '../../tooltips';
 export interface TooltipProps extends StyleProps {
-    children: React.ReactNode;
+    children: ReactNode;
     tooltipProps: UseTooltipResultTooltipProps & {
         visible: boolean;
     };

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

@@ -1,13 +1,13 @@
-import type * as React from 'react';
-import type { StyleProps } from '../../primitives';
+import type { ReactNode } from 'react';
 import type { IconName } from '../../icons';
+import type { StyleProps } from '../../primitives';
 type LargeButtonTypes = 'primary' | 'secondary' | 'alert' | 'alertStroke' | 'alertAlt' | 'stroke';
 interface LargeButtonProps extends StyleProps {
     /** used for form submission */
     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,54 @@
-import type * as React from 'react';
+import type { ChangeEventHandler, MouseEventHandler, 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;
+    /** Radio button label */
+    buttonLabel: string | ReactNode;
+    /** Radio button value */
     buttonValue: string | number;
-    onChange: React.ChangeEventHandler<HTMLInputElement>;
+    /** Radio button onChange handler */
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    /** Radio button disabled state. This will be replaced with aria-disabled in the future. */
     disabled?: boolean;
+    /** Radio button icon name */
     iconName?: IconName;
+    /** Radio button tag text */
+    tagText?: string;
+    /** Radio button isSelected state */
     isSelected?: boolean;
+    /** Radio button largeDesktopBorderRadius state */
     largeDesktopBorderRadius?: boolean;
+    /** Radio button radioButtonType state */
     radioButtonType?: 'large' | 'small';
-    subButtonLabel?: string;
+    /**
+     *  id is used for the special case in ODD where the screen has two radio buttons.
+     *  The screen that uses this prop is CSV runtime parameter CSV file selection screen.
+     *  Basically, this would not be used in desktop app/web app.
+     */
     id?: string;
+    /** Radio button maxLines for label */
     maxLines?: number;
+    /** used for mouseEnter and mouseLeave */
     setNoHover?: () => void;
     setHovered?: () => void;
     error?: string | null;
+    /** Radio button buttonSubLabel */
+    buttonSubLabel?: RadioButtonSubLabel;
+    /** testid is used for testing */
+    testid?: string;
+    /**
+     * with the changes in UX and accessibility support, 'disabled' will eventually be replaced with 'aria-disabled' in the future.
+     */
+    ariaDisabled?: boolean;
+    /**
+     *  onClick is needed for RadioButton since onChange requires actual selected value change.
+     *  For this case, selected value change shouldn't be happened.
+     */
+    onClick?: MouseEventHandler;
 }
 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

@@ -3,10 +3,12 @@ export * from './Checkbox';
 export * from './CheckboxField';
 export * from './Chip';
 export * from './Divider';
+export * from './InlineNotification';
 export * from './InputField';
 export * from './ListButton';
 export * from './ListItem';
 export * from './ListItem/ListItemChildren//ListItemDescriptor';
+export * from './ListTable';
 export * from './MenuList';
 export * from './MenuList/MenuItem';
 export * from './MenuList/OverflowBtn';
@@ -14,6 +16,7 @@ export * from './Snackbar';
 export * from './StepMeter';
 export * from './StepMeter';
 export * from './StyledText';
+export * from './SubListTable';
 export * from './Tag';
 export * from './Toast';
 export * from './ToggleGroup';

package/lib/buttons/Button.d.ts

@@ -1,13 +1,13 @@
-import type * as React from 'react';
 import { BUTTON_TYPE_BUTTON } from '../primitives';
-import type { BUTTON_TYPE_SUBMIT, BUTTON_TYPE_RESET } from '../primitives';
+import type { ComponentType, MouseEventHandler, ReactNode } from 'react';
 import type { IconName } from '../icons';
+import type { BUTTON_TYPE_RESET, BUTTON_TYPE_SUBMIT } from '../primitives';
 import type { UseHoverTooltipTargetProps } from '../tooltips';
 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/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/ToggleButton.d.ts

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

package/lib/controls/index.d.ts

@@ -1,6 +1,4 @@
 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 { ChangeEventHandler, ComponentProps } 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,7 +1,7 @@
-import type * as React from 'react';
-import type { SelectProps } from './Select';
+import type { ReactNode } from 'react';
 import type { ActionMeta } from 'react-select';
 import type { SelectOption } from '.';
+import type { SelectProps } from './Select';
 export interface SelectFieldProps {
     /** optional HTML id for container */
     id?: SelectProps['id'];
@@ -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,7 +1,7 @@
-import * as React from 'react';
 import { Module } from '../Module';
-import type { Svg } from '../../primitives';
+import type { ComponentProps, ReactNode } from 'react';
 import type { DeckConfiguration, LabwareDefinition2, LabwareLocation, ModuleLocation, ModuleModel, RobotType } from '@opentrons/shared-data';
+import type { Svg } from '../../primitives';
 import type { WellFill, WellGroup } from '../Labware';
 export interface LabwareOnDeck {
     labwareLocation: LabwareLocation;
@@ -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,14 +20,26 @@ 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;
     stacked?: boolean;
+    hopperLabware?: HopperLabwareProps;
+}
+export interface HopperLabwareProps {
+    hopperLabwareDef: LabwareDefinition2 | null;
+    hopperLabwareWellFill: WellFill;
+    hopperOnLabwareClick: () => void;
+    hopperHighlightLabware: boolean;
+    hopperStacked: boolean;
 }
+export declare const STACKER_MODULE_Y_OFFSET = -6;
+export declare const STACKER_HOPPER_LABWARE_X_OFFSET = 178.5;
+export declare const STACKER_HOPPER_LABWARE_Y_OFFSET = 7;
+export declare const STACKER_DECK_VIEW_BOX_EXPANSION = 220;
 interface BaseDeckProps {
     deckConfig: DeckConfiguration;
     robotType: RobotType;
@@ -38,12 +50,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;