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

package/src/hardware-sim/DeckConfigurator/StagingAreaConfigItem.tsx

@@ -1,107 +0,0 @@
-import { useTranslation } from 'react-i18next'
-
-import { getAALocationForCutoutAndFixtureId } from '@opentrons/shared-data'
-
-import { StyledText } from '../../atoms/StyledText/StyledText'
-import { COLORS } from '../../helix-design-system'
-import { Icon } from '../../icons'
-import { Btn } from '../../primitives'
-import { TYPOGRAPHY } from '../../ui-style-constants'
-import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
-import {
-  COLUMN_DEFAULT_SINGLE_SLOT_FIXTURE_WIDTH,
-  COLUMN_DEFAULT_X_ADJUSTMENT,
-  CONFIG_STYLE_EDITABLE,
-  CONFIG_STYLE_READ_ONLY,
-  CONFIG_STYLE_SELECTED,
-  FIXTURE_HEIGHT,
-  Y_ADJUSTMENT,
-} from './constants'
-
-import type {
-  AddressableAreaNamesWithFakes,
-  CutoutFixtureIdsWithFakes,
-  CutoutId,
-  DeckDefinition,
-} from '@opentrons/shared-data'
-
-interface StagingAreaConfigItemProps {
-  deckDefinition: DeckDefinition
-  fixtureLocation: CutoutId
-  cutoutFixtureId: CutoutFixtureIdsWithFakes
-  addressableAreaId: AddressableAreaNamesWithFakes
-  handleClickRemove?: (
-    fixtureLocation: CutoutId,
-    cutoutFixtureId: CutoutFixtureIdsWithFakes,
-    addressableAreaId: AddressableAreaNamesWithFakes
-  ) => void
-  selected?: boolean
-}
-
-export function StagingAreaConfigItem(
-  props: StagingAreaConfigItemProps
-): JSX.Element {
-  const { t } = useTranslation('deck_configuration')
-
-  const {
-    deckDefinition,
-    handleClickRemove,
-    fixtureLocation,
-    cutoutFixtureId,
-    addressableAreaId,
-    selected = false,
-  } = props
-
-  const stagingAreaCutout = deckDefinition.locations.cutouts.find(
-    cutout => cutout.id === fixtureLocation
-  )
-  const offsetVector = getAALocationForCutoutAndFixtureId(
-    addressableAreaId,
-    deckDefinition
-  )
-  /**
-   * deck definition cutout position is the position of the single slot located within that cutout
-   * so, to get the position of the cutout itself we must add an adjustment to the slot position
-   */
-  const [xSlotPosition = 0, ySlotPosition = 0] =
-    stagingAreaCutout?.position ?? []
-
-  const x = xSlotPosition + COLUMN_DEFAULT_X_ADJUSTMENT + offsetVector[0]
-  const y = ySlotPosition + Y_ADJUSTMENT
-
-  const editableStyle = selected ? CONFIG_STYLE_SELECTED : CONFIG_STYLE_EDITABLE
-  const handleRemoveClick = (): void => {
-    if (handleClickRemove != null) {
-      handleClickRemove(fixtureLocation, cutoutFixtureId, addressableAreaId)
-    }
-  }
-  return (
-    <RobotCoordsForeignObject
-      width={COLUMN_DEFAULT_SINGLE_SLOT_FIXTURE_WIDTH}
-      height={FIXTURE_HEIGHT}
-      x={x}
-      y={y}
-      flexProps={{ flex: '1' }}
-      foreignObjectProps={{ flex: '1' }}
-    >
-      <Btn
-        css={handleClickRemove != null ? editableStyle : CONFIG_STYLE_READ_ONLY}
-        cursor={handleClickRemove != null ? 'pointer' : 'default'}
-        onClick={handleRemoveClick}
-        height="100%"
-      >
-        <StyledText
-          oddStyle="smallBodyTextSemiBold"
-          desktopStyle="bodyDefaultSemiBold"
-          css={TYPOGRAPHY.smallBodyTextSemiBold}
-        >
-          {t('staging_area')}
-        </StyledText>
-
-        {handleClickRemove != null ? (
-          <Icon name="remove" color={COLORS.white} size="2rem" />
-        ) : null}
-      </Btn>
-    </RobotCoordsForeignObject>
-  )
-}

package/src/hardware-sim/DeckConfigurator/StaticItem.tsx

@@ -1,61 +0,0 @@
-import { StyledText } from '../../atoms/StyledText/StyledText'
-import { Box } from '../../primitives'
-import { TYPOGRAPHY } from '../../ui-style-constants'
-import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
-import {
-  COLUMN_DEFAULT_SINGLE_SLOT_FIXTURE_WIDTH,
-  COLUMN_DEFAULT_X_ADJUSTMENT,
-  CONFIG_STYLE_READ_ONLY,
-  FIXTURE_HEIGHT,
-  Y_ADJUSTMENT,
-} from './constants'
-
-import type { CutoutId, DeckDefinition } from '@opentrons/shared-data'
-
-interface StaticFixtureProps {
-  deckDefinition: DeckDefinition
-  fixtureLocation: CutoutId
-  label: string
-}
-
-/**
- * this component allows us to add static labeled fixtures to the center column of a deck
- * config map
- */
-
-export function StaticItem(props: StaticFixtureProps): JSX.Element {
-  const { deckDefinition, fixtureLocation, label } = props
-
-  const staticCutout = deckDefinition.locations.cutouts.find(
-    cutout => cutout.id === fixtureLocation
-  )
-
-  /**
-   * deck definition cutout position is the position of the single slot located within that cutout
-   * so, to get the position of the cutout itself we must add an adjustment to the slot position
-   */
-  const [xSlotPosition = 0, ySlotPosition = 0] = staticCutout?.position ?? []
-  const y = ySlotPosition + Y_ADJUSTMENT
-  const x = xSlotPosition + COLUMN_DEFAULT_X_ADJUSTMENT
-
-  return (
-    <RobotCoordsForeignObject
-      width={COLUMN_DEFAULT_SINGLE_SLOT_FIXTURE_WIDTH}
-      height={FIXTURE_HEIGHT}
-      x={x}
-      y={y}
-      flexProps={{ flex: '1' }}
-      foreignObjectProps={{ flex: '1' }}
-    >
-      <Box css={CONFIG_STYLE_READ_ONLY} height="100%" cursor="default">
-        <StyledText
-          oddStyle="smallBodyTextSemiBold"
-          desktopStyle="bodyDefaultSemiBold"
-          css={TYPOGRAPHY.smallBodyTextSemiBold}
-        >
-          {label}
-        </StyledText>
-      </Box>
-    </RobotCoordsForeignObject>
-  )
-}

package/src/hardware-sim/DeckConfigurator/TemperatureModuleItem.tsx

@@ -1,119 +0,0 @@
-import { useTranslation } from 'react-i18next'
-
-import { SINGLE_LEFT_CUTOUTS } from '@opentrons/shared-data'
-
-import { StyledText } from '../../atoms/StyledText/StyledText'
-import { COLORS } from '../../helix-design-system'
-import { Icon } from '../../icons'
-import { Btn } from '../../primitives'
-import { TYPOGRAPHY } from '../../ui-style-constants'
-import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
-import {
-  COLUMN_1_SINGLE_SLOT_FIXTURE_WIDTH,
-  COLUMN_1_X_ADJUSTMENT,
-  COLUMN_DEFAULT_X_ADJUSTMENT,
-  CONFIG_STYLE_EDITABLE,
-  CONFIG_STYLE_READ_ONLY,
-  CONFIG_STYLE_SELECTED,
-  FIXTURE_HEIGHT,
-  LARGE_SINGLE_ITEM_SLOT_WIDTH,
-  Y_ADJUSTMENT,
-} from './constants'
-
-import type {
-  AddressableAreaNamesWithFakes,
-  CutoutFixtureIdsWithFakes,
-  CutoutId,
-  DeckDefinition,
-} from '@opentrons/shared-data'
-
-// TODO(BC, 2024-03-21): This component is almost identical to HeaterShakerFixture, consider consolidating?
-
-interface TemperatureModuleFixtureProps {
-  deckDefinition: DeckDefinition
-  fixtureLocation: CutoutId
-  cutoutFixtureId: CutoutFixtureIdsWithFakes
-  addressableAreaId: AddressableAreaNamesWithFakes
-  handleClickRemove?: (
-    fixtureLocation: CutoutId,
-    cutoutFixtureId: CutoutFixtureIdsWithFakes,
-    addressableAreaId: AddressableAreaNamesWithFakes
-  ) => void
-  selected?: boolean
-}
-
-export function TemperatureModuleItem(
-  props: TemperatureModuleFixtureProps
-): JSX.Element {
-  const { t } = useTranslation('deck_configuration')
-
-  const {
-    deckDefinition,
-    handleClickRemove,
-    fixtureLocation,
-    cutoutFixtureId,
-    addressableAreaId,
-    selected = false,
-  } = props
-
-  const cutoutDef = deckDefinition.locations.cutouts.find(
-    cutout => cutout.id === fixtureLocation
-  )
-
-  /**
-   * deck definition cutout position is the position of the single slot located within that cutout
-   * so, to get the position of the cutout itself we must add an adjustment to the slot position
-   * the adjustment for x is different for right side/left side
-   */
-  const [xSlotPosition = 0, ySlotPosition = 0] = cutoutDef?.position ?? []
-
-  const isColumnOne = SINGLE_LEFT_CUTOUTS.includes(fixtureLocation)
-  const xAdjustment = isColumnOne
-    ? COLUMN_1_X_ADJUSTMENT
-    : COLUMN_DEFAULT_X_ADJUSTMENT
-  const x = xSlotPosition + xAdjustment
-
-  const y = ySlotPosition + Y_ADJUSTMENT
-
-  const editableStyle = selected ? CONFIG_STYLE_SELECTED : CONFIG_STYLE_EDITABLE
-
-  const handleRemoveClick = (): void => {
-    if (handleClickRemove != null) {
-      handleClickRemove(fixtureLocation, cutoutFixtureId, addressableAreaId)
-    }
-  }
-  return (
-    <RobotCoordsForeignObject
-      width={
-        isColumnOne
-          ? COLUMN_1_SINGLE_SLOT_FIXTURE_WIDTH
-          : LARGE_SINGLE_ITEM_SLOT_WIDTH
-      }
-      height={FIXTURE_HEIGHT}
-      x={x}
-      y={y}
-      flexProps={{ flex: '1' }}
-      foreignObjectProps={{ flex: '1' }}
-    >
-      <Btn
-        css={handleClickRemove != null ? editableStyle : CONFIG_STYLE_READ_ONLY}
-        cursor={handleClickRemove != null ? 'pointer' : 'default'}
-        onClick={handleRemoveClick}
-        height="100%"
-        data-testid={addressableAreaId}
-      >
-        <StyledText
-          oddStyle="smallBodyTextSemiBold"
-          desktopStyle="bodyDefaultSemiBold"
-          css={TYPOGRAPHY.smallBodyTextSemiBold}
-        >
-          {t('temperature')}
-        </StyledText>
-
-        {handleClickRemove != null ? (
-          <Icon name="remove" color={COLORS.white} size="2rem" />
-        ) : null}
-      </Btn>
-    </RobotCoordsForeignObject>
-  )
-}

package/src/hardware-sim/DeckConfigurator/ThermocyclerItem.tsx

@@ -1,99 +0,0 @@
-import { useTranslation } from 'react-i18next'
-
-import { StyledText } from '../../atoms/StyledText/StyledText'
-import { COLORS } from '../../helix-design-system'
-import { Icon } from '../../icons'
-import { Btn } from '../../primitives'
-import { TYPOGRAPHY } from '../../ui-style-constants'
-import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
-import {
-  COLUMN_1_X_ADJUSTMENT,
-  CONFIG_STYLE_EDITABLE,
-  CONFIG_STYLE_READ_ONLY,
-  CONFIG_STYLE_SELECTED,
-  THERMOCYCLER_FIXTURE_HEIGHT,
-  THERMOCYCLER_FIXTURE_WIDTH,
-  Y_ADJUSTMENT,
-} from './constants'
-
-import type {
-  AddressableAreaNamesWithFakes,
-  CutoutFixtureIdsWithFakes,
-  CutoutId,
-  DeckDefinition,
-} from '@opentrons/shared-data'
-
-interface ThermocyclerItemProps {
-  deckDefinition: DeckDefinition
-  fixtureLocation: CutoutId
-  cutoutFixtureId: CutoutFixtureIdsWithFakes
-  addressableAreaId: AddressableAreaNamesWithFakes
-  handleClickRemove?: (
-    fixtureLocation: CutoutId,
-    cutoutFixtureId: CutoutFixtureIdsWithFakes,
-    addressableAreaId: AddressableAreaNamesWithFakes
-  ) => void
-  selected?: boolean
-}
-
-export function ThermocyclerItem(props: ThermocyclerItemProps): JSX.Element {
-  const { t } = useTranslation('deck_configuration')
-
-  const {
-    deckDefinition,
-    handleClickRemove,
-    fixtureLocation,
-    cutoutFixtureId,
-    addressableAreaId,
-    selected = false,
-  } = props
-
-  const cutoutDef = deckDefinition.locations.cutouts.find(
-    cutout => cutout.id === fixtureLocation
-  )
-
-  /**
-   * deck definition cutout position is the position of the single slot located within that cutout
-   * so, to get the position of the cutout itself we must add an adjustment to the slot position
-   * the adjustment for x is different for right side/left side
-   */
-  const [xSlotPosition = 0, ySlotPosition = 0] = cutoutDef?.position ?? []
-  const x = xSlotPosition + COLUMN_1_X_ADJUSTMENT
-  const y = ySlotPosition + Y_ADJUSTMENT
-
-  const editableStyle = selected ? CONFIG_STYLE_SELECTED : CONFIG_STYLE_EDITABLE
-  const handleRemoveClick = (): void => {
-    if (handleClickRemove != null) {
-      handleClickRemove(fixtureLocation, cutoutFixtureId, addressableAreaId)
-    }
-  }
-  return (
-    <RobotCoordsForeignObject
-      width={THERMOCYCLER_FIXTURE_WIDTH}
-      height={THERMOCYCLER_FIXTURE_HEIGHT}
-      x={x}
-      y={y}
-      flexProps={{ flex: '1' }}
-      foreignObjectProps={{ flex: '1' }}
-    >
-      <Btn
-        css={handleClickRemove != null ? editableStyle : CONFIG_STYLE_READ_ONLY}
-        cursor={handleClickRemove != null ? 'pointer' : 'default'}
-        onClick={handleRemoveClick}
-        height="100%"
-      >
-        <StyledText
-          oddStyle="smallBodyTextSemiBold"
-          desktopStyle="bodyDefaultSemiBold"
-          css={TYPOGRAPHY.smallBodyTextSemiBold}
-        >
-          {t('thermocycler')}
-        </StyledText>
-
-        {handleClickRemove != null ? (
-          <Icon name="remove" color={COLORS.white} size="2rem" />
-        ) : null}
-      </Btn>
-    </RobotCoordsForeignObject>
-  )
-}

package/src/hardware-sim/DeckConfigurator/TrashBinConfigItem.tsx

@@ -1,114 +0,0 @@
-import { useTranslation } from 'react-i18next'
-
-import { SINGLE_LEFT_CUTOUTS } from '@opentrons/shared-data'
-
-import { StyledText } from '../../atoms/StyledText/StyledText'
-import { COLORS } from '../../helix-design-system'
-import { Icon } from '../../icons'
-import { Btn } from '../../primitives'
-import { TYPOGRAPHY } from '../../ui-style-constants'
-import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
-import {
-  COLUMN_1_SINGLE_SLOT_FIXTURE_WIDTH,
-  COLUMN_1_X_ADJUSTMENT,
-  COLUMN_DEFAULT_X_ADJUSTMENT,
-  CONFIG_STYLE_EDITABLE,
-  CONFIG_STYLE_READ_ONLY,
-  CONFIG_STYLE_SELECTED,
-  FIXTURE_HEIGHT,
-  LARGE_SINGLE_ITEM_SLOT_WIDTH,
-  Y_ADJUSTMENT,
-} from './constants'
-
-import type {
-  AddressableAreaNamesWithFakes,
-  CutoutFixtureIdsWithFakes,
-  CutoutId,
-  DeckDefinition,
-} from '@opentrons/shared-data'
-
-interface TrashBinConfigItemProps {
-  deckDefinition: DeckDefinition
-  fixtureLocation: CutoutId
-  cutoutFixtureId: CutoutFixtureIdsWithFakes
-  addressableAreaId: AddressableAreaNamesWithFakes
-  handleClickRemove?: (
-    fixtureLocation: CutoutId,
-    cutoutFixtureId: CutoutFixtureIdsWithFakes,
-    addressableAreaId: AddressableAreaNamesWithFakes
-  ) => void
-  selected?: boolean
-}
-
-export function TrashBinConfigItem(
-  props: TrashBinConfigItemProps
-): JSX.Element {
-  const { t } = useTranslation('deck_configuration')
-
-  const {
-    deckDefinition,
-    handleClickRemove,
-    fixtureLocation,
-    cutoutFixtureId,
-    addressableAreaId,
-    selected = false,
-  } = props
-
-  const trashBinCutout = deckDefinition.locations.cutouts.find(
-    cutout => cutout.id === fixtureLocation
-  )
-
-  /**
-   * deck definition cutout position is the position of the single slot located within that cutout
-   * so, to get the position of the cutout itself we must add an adjustment to the slot position
-   * the adjustment for x is different for right side/left side
-   */
-  const [xSlotPosition = 0, ySlotPosition = 0] = trashBinCutout?.position ?? []
-
-  const isColumnOne = SINGLE_LEFT_CUTOUTS.includes(fixtureLocation)
-  const xAdjustment = isColumnOne
-    ? COLUMN_1_X_ADJUSTMENT
-    : COLUMN_DEFAULT_X_ADJUSTMENT
-  const x = xSlotPosition + xAdjustment
-
-  const y = ySlotPosition + Y_ADJUSTMENT
-
-  const editableStyle = selected ? CONFIG_STYLE_SELECTED : CONFIG_STYLE_EDITABLE
-  const handleRemoveClick = (): void => {
-    if (handleClickRemove != null) {
-      handleClickRemove(fixtureLocation, cutoutFixtureId, addressableAreaId)
-    }
-  }
-  return (
-    <RobotCoordsForeignObject
-      width={
-        isColumnOne
-          ? COLUMN_1_SINGLE_SLOT_FIXTURE_WIDTH
-          : LARGE_SINGLE_ITEM_SLOT_WIDTH
-      }
-      height={FIXTURE_HEIGHT}
-      x={x}
-      y={y}
-      flexProps={{ flex: '1' }}
-      foreignObjectProps={{ flex: '1' }}
-    >
-      <Btn
-        css={handleClickRemove != null ? editableStyle : CONFIG_STYLE_READ_ONLY}
-        cursor={handleClickRemove != null ? 'pointer' : 'default'}
-        onClick={handleRemoveClick}
-        height="100%"
-      >
-        <StyledText
-          oddStyle="smallBodyTextSemiBold"
-          desktopStyle="bodyDefaultSemiBold"
-          css={TYPOGRAPHY.smallBodyTextSemiBold}
-        >
-          {t('trash_bin')}
-        </StyledText>
-        {handleClickRemove != null ? (
-          <Icon name="remove" color={COLORS.white} size="2rem" />
-        ) : null}
-      </Btn>
-    </RobotCoordsForeignObject>
-  )
-}

package/src/hardware-sim/DeckConfigurator/WasteChuteConfigItem.tsx

@@ -1,107 +0,0 @@
-import { useTranslation } from 'react-i18next'
-
-import { DEFAULT_AA_FOR_WASTE_CHUTE } from '@opentrons/shared-data'
-
-import { StyledText } from '../../atoms/StyledText/StyledText'
-import { COLORS } from '../../helix-design-system'
-import { Icon } from '../../icons'
-import { Btn } from '../../primitives'
-import { TYPOGRAPHY } from '../../ui-style-constants'
-import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
-import {
-  COLUMN_DEFAULT_SINGLE_SLOT_FIXTURE_WIDTH,
-  COLUMN_DEFAULT_X_ADJUSTMENT,
-  CONFIG_STYLE_EDITABLE,
-  CONFIG_STYLE_READ_ONLY,
-  CONFIG_STYLE_SELECTED,
-  FIXTURE_HEIGHT,
-  Y_ADJUSTMENT,
-} from './constants'
-
-import type {
-  AddressableAreaNamesWithFakes,
-  CutoutFixtureIdsWithFakes,
-  CutoutId,
-  DeckDefinition,
-} from '@opentrons/shared-data'
-
-interface WasteChuteConfigItemProps {
-  deckDefinition: DeckDefinition
-  fixtureLocation: CutoutId
-  cutoutFixtureId: CutoutFixtureIdsWithFakes
-  handleClickRemove?: (
-    fixtureLocation: CutoutId,
-    cutoutFixtureId: CutoutFixtureIdsWithFakes,
-    addressableAreaId: AddressableAreaNamesWithFakes
-  ) => void
-  hasStagingAreas?: boolean
-  selected?: boolean
-}
-
-export function WasteChuteConfigFixture(
-  props: WasteChuteConfigItemProps
-): JSX.Element {
-  const { t } = useTranslation('deck_configuration')
-
-  const {
-    deckDefinition,
-    handleClickRemove,
-    fixtureLocation,
-    cutoutFixtureId,
-    selected = false,
-  } = props
-
-  const wasteChuteCutout = deckDefinition.locations.cutouts.find(
-    cutout => cutout.id === fixtureLocation
-  )
-
-  /**
-   * deck definition cutout position is the position of the single slot located within that cutout
-   * so, to get the position of the cutout itself we must add an adjustment to the slot position
-   */
-  const [xSlotPosition = 0, ySlotPosition = 0] =
-    wasteChuteCutout?.position ?? []
-
-  const x = xSlotPosition + COLUMN_DEFAULT_X_ADJUSTMENT
-  const y = ySlotPosition + Y_ADJUSTMENT
-
-  const editableStyle = selected ? CONFIG_STYLE_SELECTED : CONFIG_STYLE_EDITABLE
-  const handleRemoveClick = (): void => {
-    if (handleClickRemove != null) {
-      handleClickRemove(
-        fixtureLocation,
-        cutoutFixtureId,
-        DEFAULT_AA_FOR_WASTE_CHUTE
-      )
-    }
-  }
-  return (
-    <RobotCoordsForeignObject
-      width={COLUMN_DEFAULT_SINGLE_SLOT_FIXTURE_WIDTH}
-      height={FIXTURE_HEIGHT}
-      x={x}
-      y={y}
-      flexProps={{ flex: '1' }}
-      foreignObjectProps={{ flex: '1' }}
-    >
-      <Btn
-        css={handleClickRemove != null ? editableStyle : CONFIG_STYLE_READ_ONLY}
-        cursor={handleClickRemove != null ? 'pointer' : 'default'}
-        onClick={handleRemoveClick}
-        height="100%"
-      >
-        <StyledText
-          oddStyle="smallBodyTextSemiBold"
-          desktopStyle="bodyDefaultSemiBold"
-          css={TYPOGRAPHY.smallBodyTextSemiBold}
-        >
-          {t('waste')}
-        </StyledText>
-
-        {handleClickRemove != null ? (
-          <Icon name="remove" color={COLORS.white} size="2rem" />
-        ) : null}
-      </Btn>
-    </RobotCoordsForeignObject>
-  )
-}

package/src/hardware-sim/DeckConfigurator/constants.ts

@@ -1,77 +0,0 @@
-import { css } from 'styled-components'
-
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles'
-import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
-
-/**
- * These are Flex deck configurator-only values to position a foreign object
- * Position is relative to deck definition slot positions and a custom stroke applied to the single slot fixture SVG
- */
-export const FIXTURE_HEIGHT = 102.0
-export const THERMOCYCLER_FIXTURE_HEIGHT = 290.0
-export const COLUMN_1_SINGLE_SLOT_FIXTURE_WIDTH = 243.5
-export const COLUMN_DEFAULT_SINGLE_SLOT_FIXTURE_WIDTH = 159.0
-export const LARGE_SINGLE_ITEM_SLOT_WIDTH = 250
-export const THERMOCYCLER_FIXTURE_WIDTH = 243.5
-
-export const COLUMN_1_X_ADJUSTMENT = -100
-export const COLUMN_DEFAULT_X_ADJUSTMENT = -15.5
-export const STACKER_X_ADJUSTMENT = -12.5
-export const Y_ADJUSTMENT = -8
-
-// common config styles for staging area, trash bin, waste chute
-export const CONFIG_STYLE_READ_ONLY = css`
-  display: ${DISPLAY_FLEX};
-  align-items: ${ALIGN_CENTER};
-  background-color: ${COLORS.grey50};
-  border-radius: ${BORDERS.borderRadius4};
-  color: ${COLORS.white};
-  grid-gap: ${SPACING.spacing8};
-  justify-content: ${JUSTIFY_CENTER};
-  width: 100%;
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    background-color: ${COLORS.grey55};
-  }
-`
-
-export const CONFIG_STYLE_EDITABLE = css`
-  ${CONFIG_STYLE_READ_ONLY}
-
-  &:active {
-    background-color: ${COLORS.grey60};
-  }
-
-  &:hover {
-    background-color: ${COLORS.grey55};
-  }
-
-  &:focus-visible {
-    border: 3px solid ${COLORS.yellow50};
-    background-color: ${COLORS.grey55};
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      background-color: ${COLORS.grey60};
-    }
-  }
-`
-
-export const CONFIG_STYLE_SELECTED = css`
-  ${CONFIG_STYLE_EDITABLE}
-  background-color: ${COLORS.blue50};
-
-  &:active {
-    background-color: ${COLORS.blue60};
-  }
-
-  &:hover {
-    background-color: ${COLORS.blue55};
-  }
-
-  &:focus-visible {
-    border: 3px solid ${COLORS.yellow50};
-    background-color: ${COLORS.blue55};
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      background-color: ${COLORS.blue60};
-    }
-  }
-`