@opentrons/components 0.1.7-alpha.0 → 0.1.7-alpha.1

package/src/controls/ToggleButton.tsx

@@ -1,25 +1,69 @@
-// reusable toggle button with on off styling for connect to robot and opt in/out
-import cx from 'classnames'
-import { IconButton } from '../buttons'
-import styles from './styles.module.css'
+import { css } from 'styled-components'
 
-import type { ButtonProps } from '../buttons'
+import { COLORS } from '../helix-design-system'
+import { Icon } from '../icons'
+import { Btn, Flex } from '../primitives'
 
-export interface ToggleButtonProps extends ButtonProps {
+import type { MouseEvent } from 'react'
+import type { StyleProps } from '../primitives'
+
+const TOGGLE_DISABLED_STYLES = css`
+  color: ${COLORS.grey50};
+
+  &:hover {
+    color: ${COLORS.grey55};
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px ${COLORS.yellow50};
+  }
+
+  &:disabled {
+    color: ${COLORS.grey30};
+  }
+`
+
+const TOGGLE_ENABLED_STYLES = css`
+  color: ${COLORS.blue50};
+
+  &:hover {
+    color: ${COLORS.blue55};
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px ${COLORS.yellow50};
+  }
+
+  &:disabled {
+    color: ${COLORS.grey30};
+  }
+`
+
+interface ToggleButtonProps extends StyleProps {
   toggledOn: boolean
+  label?: string | null
+  disabled?: boolean | null
+  id?: string
+  onClick?: (e: MouseEvent) => void
 }
 
 export function ToggleButton(props: ToggleButtonProps): JSX.Element {
-  // TODO(mc, 2020-02-04): destructuring `name` to avoid flow error
-  // ButtonProps::name conflicts with IconProps::name, and IconButton
-  // has `name` prop to pass to Icon. IconButton will need to be redone
-  const { toggledOn, name, ...buttonProps } = props
-  const className = cx(styles.robot_item_icon, props.className, {
-    [styles.toggled_on]: toggledOn,
-    [styles.toggled_off]: !toggledOn,
-  })
-
-  const toggleIcon = toggledOn ? 'ot-toggle-switch-on' : 'ot-toggle-switch-off'
-
-  return <IconButton {...buttonProps} name={toggleIcon} className={className} />
+  const { label, toggledOn, disabled, size, ...buttonProps } = props
+  const iconName = toggledOn ? 'ot-toggle-input-on' : 'ot-toggle-input-off'
+
+  return (
+    <Btn
+      disabled={disabled ?? false}
+      role="switch"
+      aria-label={label}
+      aria-checked={toggledOn}
+      size={size ?? '2rem'}
+      css={props.toggledOn ? TOGGLE_ENABLED_STYLES : TOGGLE_DISABLED_STYLES}
+      {...buttonProps}
+    >
+      <Flex>
+        <Icon name={iconName} size="2rem" />
+      </Flex>
+    </Btn>
+  )
 }

package/src/controls/index.ts

@@ -3,7 +3,6 @@
 // belong in the please-refactor-these-to-use-primitives-and-styled-components
 // category). We should move them all.
 export * from './ToggleButton'
-export * from './LabeledToggle'
 export * from './LabeledButton'
 export * from './LabeledCheckbox'
 export * from './LabeledRadioGroup'

package/src/forms/DeprecatedCheckboxField.stories.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 
 import { DeprecatedCheckboxField as DeprecatedCheckboxComponent } from './DeprecatedCheckboxField'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
 
 export default {
   title: 'Library/Molecules/Forms/Deprecated Checkbox Field',

package/src/forms/DeprecatedCheckboxField.tsx

@@ -1,10 +1,10 @@
 import cx from 'classnames'
-import { Icon } from '../icons'
-
-import type { ComponentProps, ChangeEventHandler } from 'react'
 
+import { Icon } from '../icons'
 import styles from './forms.module.css'
 
+import type { ChangeEventHandler, ComponentProps } from 'react'
+
 /**
  * Checkbox Field Properties.
  */

package/src/forms/FormGroup.stories.tsx

@@ -1,9 +1,8 @@
-import type * as React from 'react'
-
-import { FormGroup as FormGroupComponent } from './FormGroup'
 import { DeprecatedCheckboxField } from './DeprecatedCheckboxField.stories'
+import { FormGroup as FormGroupComponent } from './FormGroup'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
 
 export default {
   title: 'Library/Molecules/Forms/Form Group',

package/src/forms/FormGroup.tsx

@@ -1,4 +1,5 @@
 import cx from 'classnames'
+
 import { Icon } from '../icons'
 import styles from './forms.module.css'
 

package/src/forms/InputField.stories.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react'
+
 import { Box, SIZE_6 } from '@opentrons/components'
 
 import { LegacyInputField as InputFieldComponent } from './LegacyInputField'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
 
 export default {
   title: 'Library/Molecules/Forms/Input Field',

package/src/forms/LegacyInputField.tsx

@@ -1,4 +1,5 @@
 import cx from 'classnames'
+
 import { Icon } from '../icons'
 import styles from './forms.module.css'
 

package/src/forms/RadioGroup.stories.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react'
+
 import { Box, SIZE_6 } from '@opentrons/components'
 
 import { RadioGroup as RadioGroupComponent } from './RadioGroup'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
 
 export default {
   title: 'Library/Molecules/Forms/Radio Group',

package/src/forms/RadioGroup.tsx

@@ -1,4 +1,5 @@
 import cx from 'classnames'
+
 import { Icon } from '../icons'
 import styles from './forms.module.css'
 

package/src/forms/Select.stories.tsx

@@ -1,9 +1,8 @@
-import type * as React from 'react'
-
 import { Select } from './Select'
 import styles from './Select.module.css'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
 
 export default {
   title: 'Library/Molecules/Forms/Select',

package/src/forms/Select.tsx

@@ -1,15 +1,15 @@
 import ReactSelect, { components as reactSelectComponents } from 'react-select'
-
 import cx from 'classnames'
 
 import { Icon } from '../icons'
 import styles from './Select.module.css'
+
 import type {
+  CSSObjectWithLabel,
   DropdownIndicatorProps,
-  Props as ReactSelectProps,
   MenuProps,
+  Props as ReactSelectProps,
   StylesConfig,
-  CSSObjectWithLabel,
 } from 'react-select'
 import type { POSITION_ABSOLUTE, POSITION_FIXED } from '../styles'
 

package/src/forms/SelectField.tsx

@@ -6,8 +6,8 @@ import styles from './SelectField.module.css'
 
 import type { ReactNode } from 'react'
 import type { ActionMeta, MultiValue, SingleValue } from 'react-select'
-import type { SelectProps } from './Select'
 import type { SelectOption } from '.'
+import type { SelectProps } from './Select'
 
 export interface SelectFieldProps {
   /** optional HTML id for container */

package/src/forms/ToggleField.stories.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 
 import { ToggleField as ToggleFieldComponent } from './ToggleField'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
 
 const Template: Story<
   React.ComponentProps<typeof ToggleFieldComponent>

package/src/forms/ToggleField.tsx

@@ -1,10 +1,10 @@
 import cx from 'classnames'
+
 import { Icon } from '../icons'
+import styles from './forms.module.css'
 
 import type { ChangeEvent } from 'react'
 
-import styles from './forms.module.css'
-
 export interface ToggleFieldProps {
   /** change handler */
   onChange: (event: ChangeEvent<HTMLInputElement>) => unknown

package/src/hardware-sim/BaseDeck/BaseDeck.stories.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import {
   fixture96Plate,
   fixtureTiprack1000ul,
@@ -17,6 +16,7 @@ import {
 import { BaseDeck as BaseDeckComponent } from './BaseDeck'
 
 import type { Meta, StoryObj } from '@storybook/react'
+import type * as React from 'react'
 import type {
   DeckConfiguration,
   LabwareDefinition2,

package/src/hardware-sim/BaseDeck/BaseDeck.tsx

@@ -1,40 +1,42 @@
 import { Fragment } from 'react'
+import partition from 'lodash/partition'
+
 import {
+  FLEX_STACKER_MODULE_TYPE,
   getDeckDefFromRobotType,
   getModuleDef2,
+  getModuleType,
   getPositionFromSlotId,
+  HEATERSHAKER_MODULE_V1,
   inferModuleOrientationFromXCoordinate,
-  OT2_ROBOT_TYPE,
+  MODULE_FIXTURES_BY_MODEL,
   MOVABLE_TRASH_CUTOUTS,
+  OT2_ROBOT_TYPE,
   SINGLE_SLOT_FIXTURES,
   STAGING_AREA_CUTOUTS,
   STAGING_AREA_RIGHT_SLOT_FIXTURE,
+  STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE,
   TRASH_BIN_ADAPTER_FIXTURE,
   WASTE_CHUTE_CUTOUT,
   WASTE_CHUTE_ONLY_FIXTURES,
   WASTE_CHUTE_STAGING_AREA_FIXTURES,
-  HEATERSHAKER_MODULE_V1,
-  MODULE_FIXTURES_BY_MODEL,
-  STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE,
 } from '@opentrons/shared-data'
 
+import { COLORS } from '../../helix-design-system'
 import { DeckInfoLabel } from '../../molecules/DeckInfoLabel'
-import { RobotCoordinateSpace } from '../RobotCoordinateSpace'
-import { Module } from '../Module'
-import { LabwareRender } from '../Labware'
-import { FlexTrash } from '../Deck/FlexTrash'
+import { SlotLabels } from '../Deck'
 import { DeckFromLayers } from '../Deck/DeckFromLayers'
+import { FlexTrash } from '../Deck/FlexTrash'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
-import { SlotLabels } from '../Deck'
-import { COLORS } from '../../helix-design-system'
-
+import { LabwareRender } from '../Labware'
+import { Module } from '../Module'
+import { RobotCoordinateSpace } from '../RobotCoordinateSpace'
 import { SingleSlotFixture } from './SingleSlotFixture'
 import { StagingAreaFixture } from './StagingAreaFixture'
 import { WasteChuteFixture } from './WasteChuteFixture'
 import { WasteChuteStagingAreaFixture } from './WasteChuteStagingAreaFixture'
 
 import type { ComponentProps, ReactNode } from 'react'
-import type { Svg } from '../../primitives'
 import type {
   CutoutFixtureId,
   DeckConfiguration,
@@ -44,9 +46,10 @@ import type {
   ModuleModel,
   RobotType,
 } from '@opentrons/shared-data'
+import type { Svg } from '../../primitives'
 import type { TrashCutoutId } from '../Deck/FlexTrash'
-import type { StagingAreaLocation } from './StagingAreaFixture'
 import type { WellFill, WellGroup } from '../Labware'
+import type { StagingAreaLocation } from './StagingAreaFixture'
 
 export interface LabwareOnDeck {
   labwareLocation: LabwareLocation
@@ -73,7 +76,22 @@ export interface ModuleOnDeck {
   highlightLabware?: boolean
   highlightShadowLabware?: boolean
   stacked?: boolean
+  hopperLabware?: HopperLabwareProps
+}
+export interface HopperLabwareProps {
+  hopperLabwareDef: LabwareDefinition2 | null
+  hopperLabwareWellFill: WellFill
+  hopperOnLabwareClick: () => void
+  hopperHighlightLabware: boolean
+  hopperStacked: boolean
 }
+
+// these ugly consts are unfortunately necessary as the hopper location exists
+// outside of our deck definition so the render doesn't follow our normal conventions
+export const STACKER_MODULE_Y_OFFSET = -6
+export const STACKER_HOPPER_LABWARE_X_OFFSET = 178.5
+export const STACKER_HOPPER_LABWARE_Y_OFFSET = 7
+export const STACKER_DECK_VIEW_BOX_EXPANSION = 220
 interface BaseDeckProps {
   deckConfig: DeckConfiguration
   robotType: RobotType
@@ -149,9 +167,20 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
       fixture.cutoutId === WASTE_CHUTE_CUTOUT
   )
 
+  const [singleLocationModules, stackerModules] = partition(
+    modulesOnDeck,
+    module => getModuleType(module.moduleModel) !== FLEX_STACKER_MODULE_TYPE
+  )
+
   return (
     <RobotCoordinateSpace
-      viewBox={`${deckDef.cornerOffsetFromOrigin[0]} ${deckDef.cornerOffsetFromOrigin[1]} ${deckDef.dimensions[0]} ${deckDef.dimensions[1]}`}
+      viewBox={`${deckDef.cornerOffsetFromOrigin[0]} ${
+        deckDef.cornerOffsetFromOrigin[1]
+      } ${
+        stackerModules.length > 0
+          ? deckDef.dimensions[0] + STACKER_DECK_VIEW_BOX_EXPANSION
+          : deckDef.dimensions[0]
+      } ${deckDef.dimensions[1]}`}
       animated={animatedSVG}
       {...svgProps}
     >
@@ -170,7 +199,9 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
                 stagingAreaFixtures.length > 0 ||
                 wasteChuteStagingAreaFixtures.length > 0 ||
                 modulesOnDeck.findIndex(
-                  module => module.moduleModel === 'absorbanceReaderV1'
+                  module =>
+                    module.moduleModel === 'absorbanceReaderV1' ||
+                    module.moduleModel === 'flexStackerModuleV1'
                 ) >= 0
               }
             />
@@ -245,7 +276,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
       )}
       <>
         {/* render modules, nested labware, and overlays */}
-        {modulesOnDeck.map(
+        {singleLocationModules.map(
           ({
             moduleModel,
             moduleLocation,
@@ -294,6 +325,68 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
             ) : null
           }
         )}
+        {stackerModules.map(
+          ({
+            moduleModel,
+            moduleLocation,
+            nestedLabwareDef,
+            nestedLabwareWellFill,
+            innerProps,
+            moduleChildren,
+            onLabwareClick,
+            highlightLabware,
+            highlightShadowLabware,
+          }) => {
+            const stackerSlotName = getStackerLocationFromSlot(
+              moduleLocation.slotName
+            )
+            const slotPosition = getPositionFromSlotId(stackerSlotName, deckDef)
+            const moduleDef = getModuleDef2(moduleModel)
+            return slotPosition != null ? (
+              <>
+                <StagingAreaFixture
+                  cutoutId={
+                    `cutout${moduleLocation.slotName}` as StagingAreaLocation
+                  }
+                  deckDefinition={deckDef}
+                  slotClipColor={darkFill}
+                  fixtureBaseColor={lightFill}
+                />
+                <Module
+                  key={`${moduleModel} ${moduleLocation.slotName}`}
+                  def={moduleDef}
+                  x={slotPosition[0]}
+                  y={slotPosition[1] + STACKER_MODULE_Y_OFFSET}
+                  orientation={inferModuleOrientationFromXCoordinate(
+                    slotPosition[0]
+                  )}
+                  innerProps={innerProps}
+                >
+                  {nestedLabwareDef != null ? (
+                    <g
+                      cursor={onLabwareClick != null ? 'pointer' : ''}
+                      transform={`translate(${STACKER_HOPPER_LABWARE_X_OFFSET}, ${STACKER_HOPPER_LABWARE_Y_OFFSET})`}
+                    >
+                      <LabwareRender
+                        definition={nestedLabwareDef}
+                        onLabwareClick={onLabwareClick}
+                        wellFill={nestedLabwareWellFill}
+                        shouldRotateAdapterOrientation={
+                          inferModuleOrientationFromXCoordinate(
+                            slotPosition[0]
+                          ) === 'left' && moduleModel === HEATERSHAKER_MODULE_V1
+                        }
+                        highlight={highlightLabware}
+                        highlightShadow={highlightShadowLabware}
+                      />
+                    </g>
+                  ) : null}
+                  {moduleChildren}
+                </Module>
+              </>
+            ) : null
+          }
+        )}
         {/* render non-module labware and overlays */}
         {labwareOnDeck.map(
           ({
@@ -344,17 +437,20 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
         {/* render stacked badge on module labware */}
         {modulesOnDeck.map(
           ({ moduleModel, moduleLocation, stacked = false }) => {
+            const moduleDef = getModuleDef2(moduleModel)
             const slotPosition = getPositionFromSlotId(
-              moduleLocation.slotName,
+              moduleDef.moduleType === FLEX_STACKER_MODULE_TYPE
+                ? getStackerLocationFromSlot(moduleLocation.slotName)
+                : moduleLocation.slotName,
               deckDef
             )
-            const moduleDef = getModuleDef2(moduleModel)
-
-            const {
+            let {
               x: nestedLabwareOffsetX,
               y: nestedLabwareOffsetY,
             } = moduleDef.labwareOffset
-
+            if (moduleDef.moduleType === FLEX_STACKER_MODULE_TYPE) {
+              nestedLabwareOffsetX += STACKER_HOPPER_LABWARE_X_OFFSET
+            }
             // labwareOffset values are more accurate than our SVG renderings, so ignore any deviations under a certain threshold
             const clampedLabwareOffsetX =
               Math.abs(nestedLabwareOffsetX) > LABWARE_OFFSET_DISPLAY_THRESHOLD
@@ -426,3 +522,7 @@ function StackedBadge(): JSX.Element {
     </RobotCoordsForeignObject>
   )
 }
+
+function getStackerLocationFromSlot(slotName: string): string {
+  return `${slotName.charAt(0)}4`
+}

package/src/hardware-sim/BaseDeck/WasteChuteFixture.tsx

@@ -1,4 +1,6 @@
+import { COLORS } from '../../helix-design-system'
 import { Icon } from '../../icons'
+import { DeckLabelSet } from '../../organisms'
 import { Flex, Text } from '../../primitives'
 import {
   ALIGN_CENTER,
@@ -6,18 +8,16 @@ import {
   JUSTIFY_CENTER,
   TEXT_ALIGN_CENTER,
 } from '../../styles'
-import { DeckLabelSet } from '../../organisms'
 import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-import { COLORS } from '../../helix-design-system'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
 import { SlotBase } from './SlotBase'
+
+import type { SVGProps } from 'react'
 import type {
-  WASTE_CHUTE_CUTOUT,
   DeckDefinition,
   ModuleType,
+  WASTE_CHUTE_CUTOUT,
 } from '@opentrons/shared-data'
-
-import type { SVGProps } from 'react'
 import type { DeckLabelProps } from '../../molecules'
 
 const WASTE_CHUTE_WIDTH = 130

package/src/hardware-sim/BaseDeck/__fixtures__/index.ts

@@ -1,9 +1,9 @@
 import {
-  SINGLE_LEFT_SLOT_FIXTURE,
   SINGLE_CENTER_SLOT_FIXTURE,
-  TRASH_BIN_ADAPTER_FIXTURE,
+  SINGLE_LEFT_SLOT_FIXTURE,
   SINGLE_RIGHT_SLOT_FIXTURE,
   STAGING_AREA_RIGHT_SLOT_FIXTURE,
+  TRASH_BIN_ADAPTER_FIXTURE,
   WASTE_CHUTE_RIGHT_ADAPTER_COVERED_FIXTURE,
 } from '@opentrons/shared-data'
 

package/src/hardware-sim/Deck/DeckFromLayers.tsx

@@ -1,17 +1,18 @@
 import { OT2_ROBOT_TYPE } from '@opentrons/shared-data'
+
+import { ALL_OT2_DECK_LAYERS } from './constants'
 import {
+  CalibrationMarkings,
+  DoorStops,
   FixedBase,
   FixedTrash,
-  DoorStops,
   MetalFrame,
   RemovableDeckOutline,
-  SlotRidges,
-  SlotNumbers,
-  CalibrationMarkings,
   RemovalHandle,
   ScrewHoles,
+  SlotNumbers,
+  SlotRidges,
 } from './OT2Layers'
-import { ALL_OT2_DECK_LAYERS } from './constants'
 
 import type { RobotType } from '@opentrons/shared-data'
 

package/src/hardware-sim/Deck/FlexTrash.tsx

@@ -3,12 +3,13 @@ import {
   getDeckDefFromRobotType,
   opentrons1Trash3200MlFixedV1 as trashLabwareDef,
 } from '@opentrons/shared-data'
+
+import { BORDERS, COLORS } from '../../helix-design-system'
 import { Icon } from '../../icons'
 import { DeckLabelSet } from '../../organisms'
 import { Flex, Text } from '../../primitives'
 import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles'
 import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-import { COLORS, BORDERS } from '../../helix-design-system'
 import { RobotCoordsForeignObject } from './RobotCoordsForeignObject'
 
 import type { RobotType } from '@opentrons/shared-data'

package/src/hardware-sim/Deck/MoveLabwareOnDeck.stories.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import {
   fixture96Plate,
   FLEX_ROBOT_TYPE,
@@ -7,14 +6,16 @@ import {
   SINGLE_RIGHT_SLOT_FIXTURE,
   STAGING_AREA_RIGHT_SLOT_FIXTURE,
 } from '@opentrons/shared-data'
+
 import { MoveLabwareOnDeck as MoveLabwareOnDeckComponent } from './MoveLabwareOnDeck'
+
+import type { Meta, StoryObj } from '@storybook/react'
+import type * as React from 'react'
 import type {
   DeckConfiguration,
   LabwareDefinition2,
 } from '@opentrons/shared-data'
 
-import type { Meta, StoryObj } from '@storybook/react'
-
 const meta: Meta<React.ComponentProps<typeof MoveLabwareOnDeckComponent>> = {
   component: MoveLabwareOnDeckComponent,
   title: 'Library/Molecules/Simulation/MoveLabwareOnDeck',

package/src/hardware-sim/Deck/MoveLabwareOnDeck.tsx

@@ -1,36 +1,36 @@
 import { useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { animated, easings, useSpring } from '@react-spring/web'
 import styled from 'styled-components'
-import { animated, useSpring, easings } from '@react-spring/web'
+
 import {
   getDeckDefFromRobotType,
   getModuleDef2,
   getPositionFromSlotId,
 } from '@opentrons/shared-data'
-import { LabwareRender } from '../Labware'
 
 import { COLORS } from '../../helix-design-system'
-import { IDENTITY_AFFINE_TRANSFORM, multiplyMatrices } from '../utils'
 import { BaseDeck } from '../BaseDeck'
+import { LabwareRender } from '../Labware'
+import { IDENTITY_AFFINE_TRANSFORM, multiplyMatrices } from '../utils'
 
+import type { ReactNode } from 'react'
 import type {
-  LoadedLabware,
-  LoadedModule,
-  Coordinates,
+  DeckConfiguration,
+  DeckDefinition,
   LabwareDefinition2,
   LabwareLocation,
+  LoadedLabware,
+  LoadedModule,
   RobotType,
-  DeckDefinition,
-  DeckConfiguration,
+  Vector3D,
 } from '@opentrons/shared-data'
-
-import type { ReactNode } from 'react'
 import type { StyleProps } from '../../primitives'
 
 const getModulePosition = (
   deckDef: DeckDefinition,
   moduleId: string,
   loadedModules: LoadedModule[]
-): Coordinates | null => {
+): Vector3D | null => {
   const loadedModule = loadedModules.find(m => m.id === moduleId)
   if (loadedModule == null) return null
   const modSlot = deckDef.locations.addressableAreas.find(
@@ -63,7 +63,7 @@ function getLabwareCoordinates({
   location: LabwareLocation
   loadedModules: LoadedModule[]
   loadedLabware: LoadedLabware[]
-}): Coordinates | null {
+}): Vector3D | null {
   if (location === 'offDeck' || location === 'systemLocation') {
     return null
   } else if ('labwareId' in location) {

package/src/hardware-sim/Deck/RobotCoordsForeignObject.tsx

@@ -1,4 +1,5 @@
 import { css } from 'styled-components'
+
 import { Flex, ForeignObject } from '../../primitives'
 
 import type { ComponentProps, ReactNode } from 'react'