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

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

@@ -1,56 +1,59 @@
 import { Fragment } from 'react'
+import partition from 'lodash/partition'
+
 import {
+  FLEX_STACKER_MODULE_TYPE,
   getDeckDefFromRobotType,
-  getModuleDef2,
+  getModuleDef,
+  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_FLEX_STACKER_FIXTURES,
   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,
-  LabwareDefinition2,
+  LabwareDefinition,
   LabwareLocation,
   ModuleLocation,
   ModuleModel,
   RobotType,
 } from '@opentrons/shared-data'
 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
-  definition: LabwareDefinition2
+  definition: LabwareDefinition
   wellFill?: WellFill
   missingTips?: WellGroup
   /** generic prop to render self-positioned children for each labware */
@@ -64,7 +67,7 @@ export interface LabwareOnDeck {
 export interface ModuleOnDeck {
   moduleModel: ModuleModel
   moduleLocation: ModuleLocation
-  nestedLabwareDef?: LabwareDefinition2 | null
+  nestedLabwareDef?: LabwareDefinition | null
   nestedLabwareWellFill?: WellFill
   innerProps?: ComponentProps<typeof Module>['innerProps']
   /** generic prop to render self-positioned children for each module */
@@ -73,7 +76,28 @@ export interface ModuleOnDeck {
   highlightLabware?: boolean
   highlightShadowLabware?: boolean
   stacked?: boolean
+  hopperLabware?: HopperLabwareProps
+}
+export interface HopperLabwareProps {
+  hopperLabwareDef: LabwareDefinition | 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
+// todo(mm, 2025-07-16): 17.5 mm is a by-eye adjustment that takes us from a little bit
+// left of the hopper to inside the hopper. The fact that we were 17.5 mm left in the
+// first place is weird, and suggests we're doing wrong math somewhere. A more normal
+// thing to expect here would be starting at the extended shuttle position and needing
+// an offset of hundreds of mm to go from there to inside the hopper.
+export const STACKER_HOPPER_LABWARE_X_OFFSET = 17.5
+export const STACKER_HOPPER_LABWARE_Y_OFFSET = 6
+export const STACKER_DECK_VIEW_BOX_EXPANSION = 220
+
 interface BaseDeckProps {
   deckConfig: DeckConfiguration
   robotType: RobotType
@@ -89,7 +113,10 @@ interface BaseDeckProps {
   /** whether to make wrapping svg tag animatable via @react-spring/web, defaults to false */
   animatedSVG?: boolean
   /** extra props to pass to svg tag */
-  svgProps?: ComponentProps<typeof Svg>
+  /** NOTE: typing as any because running into some TS issues with React-spring,
+   * CSS Modules & Styled-components not playing together nicely
+   */
+  svgProps?: any
 }
 
 const LABWARE_OFFSET_DISPLAY_THRESHOLD = 2
@@ -148,10 +175,27 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
       WASTE_CHUTE_STAGING_AREA_FIXTURES.includes(fixture.cutoutFixtureId) &&
       fixture.cutoutId === WASTE_CHUTE_CUTOUT
   )
+  const wasteChuteStackerFixtures = deckConfig.filter(
+    fixture =>
+      fixture.cutoutFixtureId != null &&
+      WASTE_CHUTE_FLEX_STACKER_FIXTURES.includes(fixture.cutoutFixtureId) &&
+      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 +214,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
               }
             />
@@ -244,8 +290,87 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
         </>
       )}
       <>
+        {stackerModules.map(
+          ({
+            moduleModel,
+            moduleLocation,
+            nestedLabwareDef,
+            nestedLabwareWellFill,
+            innerProps,
+            moduleChildren,
+            onLabwareClick,
+            highlightLabware,
+            highlightShadowLabware,
+          }) => {
+            const stackerSlotName = getStackerLocationFromSlot(
+              moduleLocation.slotName
+            )
+            const slotPosition = getPositionFromSlotId(stackerSlotName, deckDef)
+            const moduleDef = getModuleDef(moduleModel)
+            return slotPosition != null ? (
+              <>
+                <StagingAreaFixture
+                  cutoutId={
+                    `cutout${moduleLocation.slotName}` as StagingAreaLocation
+                  }
+                  deckDefinition={deckDef}
+                  slotClipColor={darkFill}
+                  fixtureBaseColor={lightFill}
+                />
+                {wasteChuteStackerFixtures.map(fixture => {
+                  if (fixture.cutoutId === WASTE_CHUTE_CUTOUT) {
+                    return (
+                      <WasteChuteFixture
+                        key={fixture.cutoutId}
+                        cutoutId={fixture.cutoutId}
+                        deckDefinition={deckDef}
+                        fixtureBaseColor={lightFill}
+                        wasteChuteColor={mediumFill}
+                      />
+                    )
+                  }
+                })}
+                <Module
+                  key={`${moduleModel} ${moduleLocation.slotName}`}
+                  def={moduleDef}
+                  x={slotPosition[0]}
+                  y={slotPosition[1] + STACKER_MODULE_Y_OFFSET}
+                  orientation={inferModuleOrientationFromXCoordinate(
+                    slotPosition[0]
+                  )}
+                  innerProps={innerProps}
+                  targetDeckId={deckDef.otId}
+                  targetSlotId={moduleLocation.slotName}
+                  childrenPositioningMode="offsetToSlot"
+                >
+                  {nestedLabwareDef != null ? (
+                    <g
+                      cursor={onLabwareClick != null ? 'pointer' : ''}
+                      transform={`translate(${STACKER_HOPPER_LABWARE_X_OFFSET}, ${STACKER_HOPPER_LABWARE_Y_OFFSET})`}
+                    >
+                      <LabwareRender
+                        definition={nestedLabwareDef}
+                        positioningMode="offsetInSlot"
+                        onLabwareClick={onLabwareClick}
+                        wellFill={nestedLabwareWellFill}
+                        shouldRotateAdapterOrientation={
+                          inferModuleOrientationFromXCoordinate(
+                            slotPosition[0]
+                          ) === 'left' && moduleModel === HEATERSHAKER_MODULE_V1
+                        }
+                        highlight={highlightLabware}
+                        highlightShadow={highlightShadowLabware}
+                      />
+                    </g>
+                  ) : null}
+                  {moduleChildren}
+                </Module>
+              </>
+            ) : null
+          }
+        )}
         {/* render modules, nested labware, and overlays */}
-        {modulesOnDeck.map(
+        {singleLocationModules.map(
           ({
             moduleModel,
             moduleLocation,
@@ -261,7 +386,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
               moduleLocation.slotName,
               deckDef
             )
-            const moduleDef = getModuleDef2(moduleModel)
+            const moduleDef = getModuleDef(moduleModel)
             return slotPosition != null ? (
               <Module
                 key={`${moduleModel} ${moduleLocation.slotName}`}
@@ -272,11 +397,15 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
                   slotPosition[0]
                 )}
                 innerProps={innerProps}
+                targetDeckId={deckDef.otId}
+                targetSlotId={moduleLocation.slotName}
+                childrenPositioningMode="offsetToSlot"
               >
                 {nestedLabwareDef != null ? (
                   <g cursor={onLabwareClick != null ? 'pointer' : ''}>
                     <LabwareRender
                       definition={nestedLabwareDef}
+                      positioningMode="offsetInSlot"
                       onLabwareClick={onLabwareClick}
                       wellFill={nestedLabwareWellFill}
                       shouldRotateAdapterOrientation={
@@ -330,6 +459,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
               >
                 <LabwareRender
                   definition={definition}
+                  positioningMode="offsetInSlot"
                   onLabwareClick={onLabwareClick}
                   wellFill={wellFill ?? undefined}
                   missingTips={missingTips}
@@ -344,17 +474,20 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
         {/* render stacked badge on module labware */}
         {modulesOnDeck.map(
           ({ moduleModel, moduleLocation, stacked = false }) => {
+            const moduleDef = getModuleDef(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 +559,7 @@ function StackedBadge(): JSX.Element {
     </RobotCoordsForeignObject>
   )
 }
+
+function getStackerLocationFromSlot(slotName: string): string {
+  return `${slotName.charAt(0)}4`
+}

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

@@ -1,23 +1,19 @@
+import clsx from 'clsx'
+
+import { PlaceholderStyledText } from '../../atoms'
+import { COLORS } from '../../helix-design-system'
 import { Icon } from '../../icons'
-import { Flex, Text } from '../../primitives'
-import {
-  ALIGN_CENTER,
-  DIRECTION_COLUMN,
-  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 styles from './basedeck.module.css'
 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
@@ -116,32 +112,30 @@ export function WasteChute(props: WasteChuteProps): JSX.Element {
         x={WASTE_CHUTE_X}
         y={-51}
         flexProps={{ flex: '1' }}
-        foreignObjectProps={{ opacity: opacity ?? '1.0', flex: '1' }}
+        foreignObjectProps={{ opacity: opacity ?? 1, flex: '1' }}
       >
         {overlay != null ? (
           overlay
         ) : (
-          <Flex
-            alignItems={ALIGN_CENTER}
-            backgroundColor={backgroundColor}
-            borderRadius="6px"
-            color={wasteIconColor}
-            flexDirection={DIRECTION_COLUMN}
-            gridGap={SPACING.spacing4}
-            justifyContent={JUSTIFY_CENTER}
-            padding={SPACING.spacing8}
-            width="100%"
-            border={showHighlight ? `3px solid ${COLORS.blue50}` : 'none'}
+          <div
+            className={clsx(styles.waste_chute_fixture_container, {
+              [styles.waste_chute_fixture_container_highlight]: showHighlight,
+            })}
+            style={{
+              backgroundColor,
+              color: wasteIconColor,
+            }}
           >
             <Icon name="trash" color={wasteIconColor} height="2rem" />
-            <Text
-              color={COLORS.white}
-              textAlign={TEXT_ALIGN_CENTER}
-              css={TYPOGRAPHY.bodyTextSemiBold}
-            >
-              Waste chute
-            </Text>
-          </Flex>
+            <div className={styles.waste_chute_copy_container}>
+              <PlaceholderStyledText
+                desktopStyle="bodyRegularSemiBold"
+                color={COLORS.white}
+              >
+                Waste chute
+              </PlaceholderStyledText>
+            </div>
+          </div>
         )}
       </RobotCoordsForeignObject>
       {tagInfo != null && tagInfo.length > 0 ? (

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/BaseDeck/basedeck.module.css

@@ -0,0 +1,20 @@
+.waste_chute_copy_container {
+  display: flex;
+  text-align: center;
+}
+
+.waste_chute_fixture_container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  gap: var(--spacing-4);
+  padding-inline: var(--spacing-8);
+}
+
+.waste_chute_fixture_container_highlight {
+  border: 3px solid var(--blue-50);
+}

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

@@ -1,14 +1,18 @@
+import clsx from 'clsx'
+
 import {
   FLEX_ROBOT_TYPE,
   getDeckDefFromRobotType,
+  getSchema2CornerOffsetFromSlot,
+  getSchema2Dimensions,
   opentrons1Trash3200MlFixedV1 as trashLabwareDef,
 } from '@opentrons/shared-data'
+
+import { PlaceholderStyledText } from '../../atoms'
+import { 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 styles from './deck.module.css'
 import { RobotCoordsForeignObject } from './RobotCoordsForeignObject'
 
 import type { RobotType } from '@opentrons/shared-data'
@@ -35,6 +39,9 @@ interface FlexTrashProps {
   showHighlight?: boolean
   /** optional tag info to display a tag below the trash */
   tagInfo?: DeckLabelProps[]
+  onClick?: () => void
+  onMouseEnter?: () => void
+  onMouseLeave?: () => void
 }
 
 /**
@@ -49,6 +56,9 @@ export const FlexTrash = ({
   trashCutoutId,
   showHighlight,
   tagInfo,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
 }: FlexTrashProps): JSX.Element | null => {
   // be sure we don't try to render for an OT-2
   if (robotType !== FLEX_ROBOT_TYPE) return null
@@ -69,11 +79,10 @@ export const FlexTrash = ({
   } = deckDefinition.locations.addressableAreas[0].boundingBox
 
   // adjust for dimensions from trash definition
-  const {
-    x: xAdjustment,
-    y: yAdjustment,
-  } = trashLabwareDef.cornerOffsetFromSlot
-  const { xDimension, yDimension } = trashLabwareDef.dimensions
+  const { x: xAdjustment, y: yAdjustment } = getSchema2CornerOffsetFromSlot(
+    trashLabwareDef
+  )
+  const { xDimension, yDimension } = getSchema2Dimensions(trashLabwareDef)
 
   // rotate trash 180 degrees in column 1
   const rotateDegrees =
@@ -95,28 +104,37 @@ export const FlexTrash = ({
         height={yDimension}
         x={x + xAdjustment}
         y={y + yAdjustment}
-        flexProps={{ flex: '1' }}
-        foreignObjectProps={{ flex: '1' }}
+        flexProps={{
+          flex: '1',
+        }}
+        flexEvents={{
+          onClick: onClick,
+          onMouseEnter: onMouseEnter,
+          onMouseLeave: onMouseLeave,
+        }}
+        foreignObjectProps={{
+          flex: '1',
+          cursor: onClick != null ? 'pointer' : 'default',
+        }}
       >
-        <Flex
-          alignItems={ALIGN_CENTER}
-          backgroundColor={backgroundColor}
-          borderRadius={BORDERS.borderRadius4}
-          justifyContent={JUSTIFY_CENTER}
-          gridGap={SPACING.spacing8}
-          width="100%"
-          border={showHighlight ? `3px solid ${COLORS.blue50}` : 'none'}
+        <div
+          className={clsx(styles.trash_container, {
+            [styles.trash_container_highlight]: showHighlight,
+          })}
+          style={{ backgroundColor }}
         >
           {rotateDegrees === '180' ? (
-            <Text
-              color={COLORS.white}
-              // rotate text back 180 degrees
-              transform={`rotate(${rotateDegrees}deg)`}
-              transformOrigin="center"
-              css={TYPOGRAPHY.bodyTextSemiBold}
+            <div
+              className={styles.trash_container_rotate_copy}
+              style={{ transform: `rotate(${rotateDegrees}deg)` }}
             >
-              Trash bin
-            </Text>
+              <PlaceholderStyledText
+                color={COLORS.white}
+                desktopStyle="bodyDefaultSemiBold"
+              >
+                Trash bin
+              </PlaceholderStyledText>
+            </div>
           ) : null}
           <Icon
             name="trash"
@@ -127,11 +145,14 @@ export const FlexTrash = ({
             transformOrigin="center"
           />
           {rotateDegrees === '0' ? (
-            <Text color={COLORS.white} css={TYPOGRAPHY.bodyTextSemiBold}>
+            <PlaceholderStyledText
+              color={COLORS.white}
+              desktopStyle="bodyDefaultSemiBold"
+            >
               Trash bin
-            </Text>
+            </PlaceholderStyledText>
           ) : null}
-        </Flex>
+        </div>
       </RobotCoordsForeignObject>
       {tagInfo != null && tagInfo.length > 0 ? (
         <DeckLabelSet

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,
+  LabwareDefinition,
 } 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',
@@ -77,7 +78,7 @@ const FLEX_SIMPLEST_DECK_CONFIG: DeckConfiguration = [
 export const MoveLabwareOnDeck: Story = {
   render: args => (
     <MoveLabwareOnDeckComponent
-      movedLabwareDef={fixture96Plate as LabwareDefinition2}
+      movedLabwareDef={fixture96Plate as LabwareDefinition}
       initialLabwareLocation={args.initialLabwareLocation}
       finalLabwareLocation={args.finalLabwareLocation}
       loadedModules={[]}