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

package/lib/hardware-sim/Labware/LabwareStackRender.d.ts

@@ -1,20 +0,0 @@
-import type { RefObject } from 'react';
-import type { LabwareDefinition2 } from '@opentrons/shared-data';
-import type { HighlightedWellLabels } from './labwareInternals/types';
-import type { WellLabelOption } from '../..';
-export interface LabwareStackRenderProps {
-    /** Labware definitions in stack to render */
-    definitionTop: LabwareDefinition2;
-    /** option to highlight well labels with specified color */
-    highlightedWellLabels?: HighlightedWellLabels;
-    /** highlight top labware */
-    highlightTop: boolean;
-    /** highlight bottom labware if it exists */
-    highlightBottom: boolean;
-    gRef?: RefObject<SVGGElement>;
-    definitionBottom?: LabwareDefinition2 | null;
-    shouldRotateAdapterOrientation?: boolean;
-    /** option to show well labels inside or outside of labware outline */
-    wellLabelOption?: WellLabelOption;
-}
-export declare const LabwareStackRender: (props: LabwareStackRenderProps) => JSX.Element;

package/lib/hardware-sim/ProtocolDeck/LabwareInfo.d.ts

@@ -1,6 +0,0 @@
-import type { ReactNode } from 'react';
-import type { LabwareDefinition2 } from '@opentrons/shared-data';
-export declare function LabwareInfo(props: {
-    def: LabwareDefinition2;
-    children: ReactNode;
-}): JSX.Element;

package/lib/hardware-sim/ProtocolDeck/types.d.ts

@@ -1,8 +0,0 @@
-export interface LabwareByLiquidId {
-    [liquidId: string]: Array<{
-        labwareId: string;
-        volumeByWell: {
-            [well: string]: number;
-        };
-    }>;
-}

package/lib/hardware-sim/ProtocolDeck/utils/getInitiallyLoadedLabwareByAdapter.d.ts

@@ -1,5 +0,0 @@
-import type { LoadLabwareRunTimeCommand, RunTimeCommand } from '@opentrons/shared-data';
-export interface LoadedLabwareByAdapter {
-    [labwareId: string]: LoadLabwareRunTimeCommand;
-}
-export declare function getInitialLoadedLabwareByAdapter(commands: RunTimeCommand[]): LoadedLabwareByAdapter;

package/lib/hardware-sim/ProtocolDeck/utils/getLabwareInSlots.d.ts

@@ -1,12 +0,0 @@
-import type { CompletedProtocolAnalysis, ProtocolAnalysisOutput, LabwareDefinition2 } from '@opentrons/shared-data';
-interface LabwareInSlot {
-    labwareId: string;
-    labwareDef: LabwareDefinition2;
-    labwareNickName: string | null;
-    location: {
-        slotName: string;
-    };
-}
-export declare const getInitialAndMovedLabwareInSlots: (protocolAnalysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput) => LabwareInSlot[];
-export declare const getTopMostLabwareInSlots: (protocolAnalysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput) => LabwareInSlot[];
-export {};

package/lib/hardware-sim/ProtocolDeck/utils/getLabwareInfoByLiquidId.d.ts

@@ -1,3 +0,0 @@
-import type { RunTimeCommand } from '@opentrons/shared-data';
-import type { LabwareByLiquidId } from '../types';
-export declare function getLabwareInfoByLiquidId(commands: RunTimeCommand[]): LabwareByLiquidId;

package/lib/hardware-sim/ProtocolDeck/utils/getModulesInSlots.d.ts

@@ -1,10 +0,0 @@
-import type { CompletedProtocolAnalysis, ProtocolAnalysisOutput, ModuleLocation, ModuleModel, LabwareDefinition2 } from '@opentrons/shared-data';
-interface ModuleInSlot {
-    moduleModel: ModuleModel;
-    moduleLocation: ModuleLocation;
-    nestedLabwareId: string | null;
-    nestedLabwareDef: LabwareDefinition2 | null;
-    nestedLabwareNickName: string | null;
-}
-export declare const getModulesInSlots: (protocolAnalysis: ProtocolAnalysisOutput | CompletedProtocolAnalysis) => ModuleInSlot[];
-export {};

package/lib/hardware-sim/ProtocolDeck/utils/getStandardDeckViewLayerBlockList.d.ts

@@ -1,2 +0,0 @@
-import type { RobotType } from '@opentrons/shared-data';
-export declare const getStandardDeckViewLayerBlockList: (robotType: RobotType) => string[];

package/lib/hardware-sim/ProtocolDeck/utils/getWellFillFromLabwareId.d.ts

@@ -1,4 +0,0 @@
-import type { Liquid } from '@opentrons/shared-data';
-import type { WellFill } from '../../Labware';
-import type { LabwareByLiquidId } from '../types';
-export declare function getWellFillFromLabwareId(labwareId: string, liquidsInLoadOrder: Liquid[], labwareByLiquidId: LabwareByLiquidId): WellFill;

package/lib/hardware-sim/ProtocolDeck/utils/index.d.ts

@@ -1,4 +0,0 @@
-export * from './getLabwareInSlots';
-export * from './getStandardDeckViewLayerBlockList';
-export * from './getLabwareInfoByLiquidId';
-export * from './getWellFillFromLabwareId';

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

@@ -1,3 +0,0 @@
-import type { AffineTransformMatrix } from '@opentrons/shared-data';
-export declare const IDENTITY_AFFINE_TRANSFORM: AffineTransformMatrix;
-export declare function multiplyMatrices(a: number[][], b: number[][]): number[][];

package/lib/instrument/InstrumentGroup.d.ts

@@ -1,11 +0,0 @@
-import type { InstrumentInfoProps } from './InstrumentInfo';
-export interface InstrumentGroupProps {
-    showMountLabel?: boolean | null | undefined;
-    left?: InstrumentInfoProps | null | undefined;
-    right?: InstrumentInfoProps | null | undefined;
-}
-/**
- * Renders a left and right pipette diagram & info.
- * Takes child `InstrumentInfo` props in `right` and `left` props.
- */
-export declare function InstrumentGroup(props: InstrumentGroupProps): JSX.Element;

package/lib/instrument/InstrumentInfo.d.ts

@@ -1,18 +0,0 @@
-import type { ReactNode } from 'react';
-import type { Mount } from '../robot-types';
-import type { InstrumentDiagramProps } from './InstrumentDiagram';
-export interface InstrumentInfoProps {
-    /** 'left' or 'right' */
-    mount: Mount;
-    /** human-readable description, eg 'p300 Single-channel' */
-    description: string;
-    /** specs of mounted pipette */
-    pipetteSpecs?: InstrumentDiagramProps['pipetteSpecs'] | null;
-    /** paired tiprack models */
-    tiprackModels?: string[];
-    /** children to display under the info */
-    children?: ReactNode;
-    /** if true, show labels 'LEFT PIPETTE' / 'RIGHT PIPETTE' */
-    showMountLabel?: boolean | null;
-}
-export declare function InstrumentInfo(props: InstrumentInfoProps): JSX.Element;

package/lib/instrument/PipetteSelect.d.ts

@@ -1,20 +0,0 @@
-import type { ActionMeta } from 'react-select';
-import type { SelectOption } from '../forms';
-export interface PipetteSelectProps {
-    /** currently selected value, optional in case selecting triggers immediate action */
-    pipetteName?: string | null;
-    /** react-select change handler */
-    onPipetteChange: (pipetteName: string | null, e: ActionMeta<SelectOption>) => void;
-    /** list of pipette names to omit */
-    nameBlocklist?: string[];
-    /** whether or not "None" shows up as the default option */
-    enableNoneOption?: boolean;
-    /** input tabIndex */
-    tabIndex?: string | number;
-    /** classes to apply to the top-level component */
-    className?: string;
-    /** custom id to be applied. likely to be used as a data test id for e2e testing */
-    id?: string;
-    disabled?: boolean;
-}
-export declare const PipetteSelect: (props: PipetteSelectProps) => JSX.Element;

package/lib/legacy-hardware-sim/ModuleItem.d.ts

@@ -1,17 +0,0 @@
-import type { ModuleModel, DeckSlot } from '@opentrons/shared-data';
-export interface ModuleProps {
-    /** module model */
-    model: ModuleModel;
-    /** display mode: 'default', 'present', 'missing', or 'info' */
-    mode: 'default' | 'present' | 'missing' | 'info';
-    /** slot details of the location of this module */
-    slot: DeckSlot;
-    /** USB port detail of the connected module */
-    usbInfoString?: string;
-}
-/**
- * Legacy App-specific Module Rendering. Removable after Protocol Upload Revamp release
- *
- * @deprecated Use {@link Module}
- */
-export declare function ModuleItem(props: ModuleProps): JSX.Element;

package/lib/lists/TitledList.d.ts

@@ -1,44 +0,0 @@
-import type { MouseEvent, ReactNode } from 'react';
-import type { IconName, IconProps } from '../icons';
-export interface TitledListProps {
-    /** id attribute */
-    id?: string;
-    /** text of title */
-    title: string;
-    /** optional icon left of the title */
-    iconName?: IconName | null | undefined;
-    /** props passed down to icon (`className` and `name` are ignored) */
-    iconProps?: Omit<IconProps, 'name'>;
-    /** optional data test id for the container */
-    'data-test'?: string;
-    /** children must all be `<li>` */
-    children?: ReactNode;
-    /** additional classnames */
-    className?: string;
-    /** component with descriptive text about the list */
-    description?: ReactNode;
-    /** optional click action (on title div, not children) */
-    onClick?: (event: MouseEvent) => unknown;
-    /** optional right click action (on wrapping div) */
-    onContextMenu?: (event: MouseEvent) => unknown;
-    /** optional mouseEnter action */
-    onMouseEnter?: (event: MouseEvent) => unknown;
-    /** optional mouseLeave action */
-    onMouseLeave?: (event: MouseEvent) => unknown;
-    /** caret click action; if defined, list is expandable and carat is visible */
-    onCollapseToggle?: (event: MouseEvent) => unknown;
-    /** collapse the list if true (false by default) */
-    collapsed?: boolean;
-    /** set to true when TitledList is selected (eg, user clicked it) */
-    selected?: boolean;
-    /** set to true when TitledList is hovered (but not when its contents are hovered) */
-    hovered?: boolean;
-    /** disables the whole TitledList if true */
-    disabled?: boolean;
-    /** appear disabled, but preserve collapsibility */
-    inert?: boolean;
-}
-/**
- * An ordered list with optional title, icon, and description.
- */
-export declare function TitledList(props: TitledListProps): JSX.Element;

package/lib/structure/Card.d.ts

@@ -1,18 +0,0 @@
-import type { ReactNode } from 'react';
-import type { StyleProps } from '../primitives';
-export interface CardProps extends StyleProps {
-    /** Title for card, all cards should receive a title. */
-    title?: ReactNode;
-    /** Card contents */
-    children?: ReactNode;
-    /** If card can not be used, gray it out and remove pointer events */
-    disabled?: boolean;
-    /** Additional class names */
-    className?: string;
-}
-/**
- * Renders a basic card element with a white background, dropshadow, and zero padding.
- *
- * Titles and other children handle their own styles and layout.
- */
-export declare function Card(props: CardProps): JSX.Element;

package/src/atoms/ListButton/ListButtonChildren/ListButtonRadioButton.tsx

@@ -1,108 +0,0 @@
-import styled, { css } from 'styled-components'
-import { SPACING } from '../../../ui-style-constants'
-import { BORDERS, COLORS } from '../../../helix-design-system'
-import { Flex } from '../../../primitives'
-import { StyledText } from '../../StyledText'
-import { CURSOR_POINTER } from '../../../styles'
-
-import type { ChangeEventHandler, MouseEvent } from 'react'
-import type { StyleProps } from '../../../primitives'
-
-interface ListButtonRadioButtonProps extends StyleProps {
-  buttonText: string
-  buttonValue: string | number
-  onChange: ChangeEventHandler<HTMLInputElement>
-  setNoHover?: () => void
-  setHovered?: () => void
-  disabled?: boolean
-  isSelected?: boolean
-  id?: string
-}
-
-//  used for helix and as a child button to ListButtonAccordion
-export function ListButtonRadioButton(
-  props: ListButtonRadioButtonProps
-): JSX.Element {
-  const {
-    buttonText,
-    buttonValue,
-    isSelected = false,
-    onChange,
-    disabled = false,
-    setHovered,
-    setNoHover,
-    id = buttonText,
-  } = props
-
-  return (
-    <Flex
-      width="100%"
-      margin={SPACING.spacing4}
-      onClick={(e: MouseEvent) => {
-        e.stopPropagation()
-      }}
-    >
-      <SettingButton
-        checked={isSelected}
-        id={id}
-        disabled={disabled}
-        onChange={onChange}
-        type="radio"
-        value={buttonValue}
-      />
-      <SettingButtonLabel
-        role="label"
-        isSelected={isSelected}
-        disabled={disabled}
-        htmlFor={id}
-        onMouseEnter={setHovered}
-        onMouseLeave={setNoHover}
-      >
-        <StyledText desktopStyle="bodyDefaultRegular">{buttonText}</StyledText>
-      </SettingButtonLabel>
-    </Flex>
-  )
-}
-
-const SettingButton = styled.input`
-  display: none;
-`
-
-const AVAILABLE_BUTTON_STYLE = css`
-  background: ${COLORS.white};
-  color: ${COLORS.black90};
-
-  &:hover {
-    background-color: ${COLORS.grey10};
-  }
-`
-
-const SELECTED_BUTTON_STYLE = css`
-  background: ${COLORS.blue50};
-  color: ${COLORS.white};
-
-  &:active {
-    background-color: ${COLORS.blue60};
-  }
-`
-
-const DISABLED_STYLE = css`
-  color: ${COLORS.grey40};
-  background-color: ${COLORS.grey10};
-`
-
-interface ButtonLabelProps {
-  isSelected: boolean
-  disabled: boolean
-}
-
-const SettingButtonLabel = styled.label<ButtonLabelProps>`
-  border-radius: ${BORDERS.borderRadius8};
-  cursor: ${CURSOR_POINTER};
-  padding: 14px ${SPACING.spacing12};
-  width: 100%;
-
-  ${({ isSelected }) =>
-    isSelected ? SELECTED_BUTTON_STYLE : AVAILABLE_BUTTON_STYLE}
-  ${({ disabled }) => disabled && DISABLED_STYLE}
-`

package/src/atoms/ListButton/__tests__/ListButtonRadioButton.test.tsx

@@ -1,28 +0,0 @@
-import { describe, it, beforeEach, vi, expect } from 'vitest'
-import { fireEvent, screen } from '@testing-library/react'
-import { renderWithProviders } from '../../../testing/utils'
-
-import { ListButtonRadioButton } from '..'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof ListButtonRadioButton>) =>
-  renderWithProviders(<ListButtonRadioButton {...props} />)
-
-describe('ListButtonRadioButton', () => {
-  let props: ComponentProps<typeof ListButtonRadioButton>
-
-  beforeEach(() => {
-    props = {
-      buttonText: 'mock text',
-      buttonValue: 'mockValue',
-      onChange: vi.fn(),
-    }
-  })
-
-  it('should render non nested accordion', () => {
-    render(props)
-    fireEvent.click(screen.getByText('mock text'))
-    expect(props.onChange).toHaveBeenCalled()
-  })
-})

package/src/controls/LabeledToggle.tsx

@@ -1,35 +0,0 @@
-import { LabeledControl } from './LabeledControl'
-import { ToggleButton } from './ToggleButton'
-import styles from './styles.module.css'
-
-import type { ReactNode } from 'react'
-
-export interface LabeledToggleProps {
-  label: string
-  toggledOn: boolean
-  disabled?: boolean
-  children?: ReactNode
-  onClick: () => unknown
-  /** optional data test id for the container */
-  'data-test'?: string
-}
-
-export function LabeledToggle(props: LabeledToggleProps): JSX.Element {
-  const { label, toggledOn, disabled, onClick } = props
-
-  return (
-    <LabeledControl
-      label={label}
-      control={
-        <ToggleButton
-          className={styles.labeled_toggle_button}
-          toggledOn={toggledOn}
-          disabled={disabled}
-          onClick={onClick}
-        />
-      }
-    >
-      {props.children}
-    </LabeledControl>
-  )
-}

package/src/hardware-sim/Labware/LabwareStackRender.tsx

@@ -1,273 +0,0 @@
-import { WellLabels, StaticLabware } from './labwareInternals'
-import { LabwareAdapter, labwareAdapterLoadNames } from './LabwareAdapter'
-import { COLORS } from '../../helix-design-system'
-import { Svg } from '../..'
-
-import type { RefObject } from 'react'
-import type { LabwareDefinition2 } from '@opentrons/shared-data'
-import type { HighlightedWellLabels } from './labwareInternals/types'
-import type { LabwareAdapterLoadName } from './LabwareAdapter'
-import type { WellLabelOption } from '../..'
-
-const HIGHLIGHT_COLOR = COLORS.blue30
-const STROKE_WIDTH = 1
-const SKEW_ANGLE_DEGREES = 30
-const ROTATE_ANGLE_DEGREES = 30
-const SKEW_ANGLE_RADIANS = (SKEW_ANGLE_DEGREES * Math.PI) / 180
-const ROTATE_ANGLE_RADIANS = (ROTATE_ANGLE_DEGREES * Math.PI) / 180
-const COSINE_SKEW_ANGLE = Math.cos(SKEW_ANGLE_RADIANS)
-const STACK_SEPARATION_MM = 20
-
-export interface LabwareStackRenderProps {
-  /** Labware definitions in stack to render */
-  definitionTop: LabwareDefinition2
-  /** option to highlight well labels with specified color */
-  highlightedWellLabels?: HighlightedWellLabels
-  /** highlight top labware */
-  highlightTop: boolean
-  /** highlight bottom labware if it exists */
-  highlightBottom: boolean
-  gRef?: RefObject<SVGGElement>
-  definitionBottom?: LabwareDefinition2 | null
-  shouldRotateAdapterOrientation?: boolean
-  /** option to show well labels inside or outside of labware outline */
-  wellLabelOption?: WellLabelOption
-}
-
-// calculate overall height for viewbox
-const getLabwareFaceHeightIso = (definition: LabwareDefinition2): number => {
-  const { xDimension, yDimension } = definition.dimensions
-  return Math.round(
-    xDimension * Math.sin(SKEW_ANGLE_RADIANS) +
-      (yDimension / Math.cos(SKEW_ANGLE_RADIANS)) *
-        Math.cos(SKEW_ANGLE_RADIANS + ROTATE_ANGLE_RADIANS)
-  )
-}
-
-const getLabwareHeightIso = (definition: LabwareDefinition2): number => {
-  const { zDimension } = definition.dimensions
-  return Math.round(getLabwareFaceHeightIso(definition) + zDimension)
-}
-
-const getXMinForViewbox = (definition: LabwareDefinition2): number => {
-  const { yDimension } = definition.dimensions
-  return Math.round(
-    (yDimension / Math.cos(SKEW_ANGLE_RADIANS)) *
-      Math.cos(Math.PI / 2 - (SKEW_ANGLE_RADIANS + ROTATE_ANGLE_RADIANS))
-  )
-}
-
-const getLabwareWidthIso = (definition: LabwareDefinition2): number => {
-  const { xDimension } = definition.dimensions
-  return (
-    getXMinForViewbox(definition) + xDimension * Math.cos(ROTATE_ANGLE_RADIANS)
-  )
-}
-
-export const LabwareStackRender = (
-  props: LabwareStackRenderProps
-): JSX.Element => {
-  const {
-    gRef,
-    definitionTop,
-    definitionBottom,
-    highlightTop,
-    wellLabelOption,
-    shouldRotateAdapterOrientation,
-    highlightBottom = false,
-  } = props
-
-  const labwareLoadNameTop = definitionTop.parameters.loadName
-  const fillColorTop = highlightTop ? HIGHLIGHT_COLOR : COLORS.white
-  const fillColorBottom = highlightBottom ? HIGHLIGHT_COLOR : COLORS.white
-
-  // only one labware (top)
-  if (
-    definitionBottom == null ||
-    definitionBottom.parameters.loadName === 'opentrons_flex_96_tiprack_adapter'
-  ) {
-    const { xDimension, yDimension } = definitionTop.dimensions
-    const isTopAdapter = labwareAdapterLoadNames.includes(
-      definitionTop.parameters.loadName
-    )
-
-    return isTopAdapter ? (
-      // adapter render
-      <Svg
-        viewBox={`0 0 ${xDimension} ${yDimension}`}
-        transform={
-          shouldRotateAdapterOrientation
-            ? `rotate(180, ${xDimension / 2}, ${yDimension / 2})`
-            : 'rotate(0, 0, 0)'
-        }
-        maxWidth="100%"
-        maxHeight="100%"
-      >
-        <LabwareAdapter
-          labwareLoadName={labwareLoadNameTop as LabwareAdapterLoadName}
-        />
-      </Svg>
-    ) : (
-      // isometric view of labware
-      <Svg
-        viewBox={`-${getXMinForViewbox(definitionTop)} -${
-          definitionTop.dimensions.zDimension
-        } ${getLabwareWidthIso(definitionTop)} ${
-          getLabwareFaceHeightIso(definitionTop) +
-          definitionTop.dimensions.zDimension
-        }`}
-        transform="scale(1, -1)"
-        maxWidth="100%"
-        maxHeight="100%"
-      >
-        <g
-          transform={`rotate(${SKEW_ANGLE_DEGREES}) skewX(-${SKEW_ANGLE_DEGREES}) scale(${COSINE_SKEW_ANGLE}, ${COSINE_SKEW_ANGLE})`}
-          ref={gRef}
-          fill={fillColorTop}
-        >
-          <StaticLabware
-            definition={definitionTop}
-            fill={fillColorTop}
-            showRadius={false}
-          />
-          {wellLabelOption != null &&
-          definitionTop.metadata.displayCategory !== 'adapter' ? (
-            <WellLabels
-              definition={definitionTop}
-              wellLabelOption={wellLabelOption}
-              wellLabelColor={fillColorTop}
-              highlightedWellLabels={props.highlightedWellLabels}
-            />
-          ) : null}
-        </g>
-        <rect
-          width={definitionTop.dimensions.yDimension - STROKE_WIDTH}
-          height={definitionTop.dimensions.zDimension - STROKE_WIDTH}
-          transform={`rotate(180) skewY(-${SKEW_ANGLE_DEGREES}) scale(${COSINE_SKEW_ANGLE}, ${COSINE_SKEW_ANGLE})`}
-          strokeWidth={STROKE_WIDTH}
-          stroke={COLORS.black90}
-          fill={fillColorTop}
-        />
-        <rect
-          width={definitionTop.dimensions.xDimension - STROKE_WIDTH}
-          height={definitionTop.dimensions.zDimension - STROKE_WIDTH}
-          transform={`skewY(${SKEW_ANGLE_DEGREES}) scale(${
-            COSINE_SKEW_ANGLE ** 2
-          }, -${COSINE_SKEW_ANGLE}) `}
-          strokeWidth={STROKE_WIDTH}
-          stroke={COLORS.black90}
-          fill={fillColorTop}
-        />
-      </Svg>
-    )
-  }
-
-  const xMinForViewbox = Math.min(
-    ...[definitionTop, definitionBottom].map(def => getXMinForViewbox(def))
-  )
-
-  const totalAssemblyHeight =
-    getLabwareHeightIso(definitionTop) +
-    STACK_SEPARATION_MM +
-    definitionBottom.dimensions.zDimension
-
-  return (
-    <Svg
-      viewBox={`-${xMinForViewbox} -${
-        definitionBottom.dimensions.zDimension
-      } ${getLabwareWidthIso(definitionTop)} ${totalAssemblyHeight}`}
-      transform="scale(1, -1)"
-      maxWidth="100%"
-      maxHeight="100%"
-    >
-      {/* bottom labware/adapter */}
-      {definitionBottom.parameters.loadName ===
-      'opentrons_flex_96_tiprack_adapter' ? null : (
-        <>
-          <g
-            transform={`rotate(${SKEW_ANGLE_DEGREES}) skewX(-${SKEW_ANGLE_DEGREES}) scale(${COSINE_SKEW_ANGLE}, ${COSINE_SKEW_ANGLE})`}
-            ref={gRef}
-            fill={fillColorBottom}
-          >
-            <StaticLabware
-              definition={definitionBottom}
-              fill={fillColorBottom}
-              showRadius={false}
-            />
-            {wellLabelOption != null &&
-            definitionBottom.metadata.displayCategory !== 'adapter' ? (
-              <WellLabels
-                definition={definitionTop}
-                wellLabelOption={wellLabelOption}
-                wellLabelColor={fillColorBottom}
-                highlightedWellLabels={props.highlightedWellLabels}
-              />
-            ) : null}
-          </g>
-          <rect
-            width={definitionBottom.dimensions.yDimension - STROKE_WIDTH}
-            height={definitionBottom.dimensions.zDimension - STROKE_WIDTH}
-            transform={`rotate(180) skewY(-${SKEW_ANGLE_DEGREES}) scale(${COSINE_SKEW_ANGLE}, ${COSINE_SKEW_ANGLE})`}
-            strokeWidth={STROKE_WIDTH}
-            stroke={COLORS.black90}
-            fill={fillColorBottom}
-          />
-          <rect
-            width={definitionBottom.dimensions.xDimension - STROKE_WIDTH}
-            height={definitionBottom.dimensions.zDimension - STROKE_WIDTH}
-            transform={`skewY(${SKEW_ANGLE_DEGREES}) scale(${
-              COSINE_SKEW_ANGLE ** 2
-            }, -${COSINE_SKEW_ANGLE}) `}
-            strokeWidth={STROKE_WIDTH}
-            stroke={COLORS.black90}
-            fill={fillColorBottom}
-          />
-        </>
-      )}
-      {/* top labware/adapter */}
-      <g
-        transform={`translate(0, ${
-          definitionTop.dimensions.zDimension + STACK_SEPARATION_MM
-        }) rotate(${SKEW_ANGLE_DEGREES}) skewX(-${SKEW_ANGLE_DEGREES}) scale(${COSINE_SKEW_ANGLE}, ${COSINE_SKEW_ANGLE})`}
-        ref={gRef}
-      >
-        <StaticLabware
-          definition={definitionTop}
-          fill={fillColorTop}
-          showRadius={false}
-        />
-        {wellLabelOption != null &&
-        definitionTop.metadata.displayCategory !== 'adapter' ? (
-          <WellLabels
-            definition={definitionTop}
-            wellLabelOption={wellLabelOption}
-            wellLabelColor={fillColorTop}
-            highlightedWellLabels={props.highlightedWellLabels}
-          />
-        ) : null}
-      </g>
-      <rect
-        width={definitionTop.dimensions.yDimension - STROKE_WIDTH}
-        height={definitionTop.dimensions.zDimension - STROKE_WIDTH}
-        transform={`translate(0, ${
-          definitionTop.dimensions.zDimension + STACK_SEPARATION_MM
-        }) rotate(180) skewY(-${SKEW_ANGLE_DEGREES}) scale(${COSINE_SKEW_ANGLE}, ${COSINE_SKEW_ANGLE})`}
-        strokeWidth={STROKE_WIDTH}
-        stroke={COLORS.black90}
-        fill={fillColorTop}
-      />
-      <rect
-        width={definitionTop.dimensions.xDimension - STROKE_WIDTH}
-        height={definitionTop.dimensions.zDimension - STROKE_WIDTH}
-        transform={`translate(0, ${
-          definitionTop.dimensions.zDimension + STACK_SEPARATION_MM
-        }) skewY(${SKEW_ANGLE_DEGREES}) scale(${
-          COSINE_SKEW_ANGLE ** 2
-        } , -${COSINE_SKEW_ANGLE}) `}
-        strokeWidth={STROKE_WIDTH}
-        stroke={COLORS.black90}
-        fill={fillColorTop}
-      />
-    </Svg>
-  )
-}