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

package/src/organisms/DeckLabelSet/index.tsx

@@ -1,10 +1,12 @@
 import { forwardRef } from 'react'
 import styled from 'styled-components'
-import { Box } from '../../primitives'
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { RobotCoordsForeignDiv } from '../../hardware-sim'
 
+import { RobotCoordsForeignDiv } from '../../hardware-sim'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { DeckInfoLabel } from '../../molecules'
 import { DeckLabel } from '../../molecules/DeckLabel'
+import { Box } from '../../primitives'
+import { POSITION_ABSOLUTE, POSITION_RELATIVE } from '../../styles'
 import { SPACING } from '../../ui-style-constants'
 
 import type { ForwardedRef } from 'react'
@@ -17,42 +19,60 @@ interface DeckLabelSetProps {
   width: number
   height: number
   invert?: boolean
+  showModuleIcon?: boolean
 }
 
 const DeckLabelSetComponent = (
   props: DeckLabelSetProps,
   ref: ForwardedRef<HTMLDivElement>
 ): JSX.Element => {
-  const { deckLabels, x, y, width, height, invert = false } = props
+  const {
+    deckLabels,
+    x,
+    y,
+    width,
+    height,
+    invert = false,
+    showModuleIcon = false,
+  } = props
 
   return (
     <RobotCoordsForeignDiv
       x={x}
       y={y}
       innerDivProps={{
-        style: {
-          transform: `rotate(180deg) scaleX(-1) scaleY(${invert ? '-1' : '1'})`,
-        },
+        transform: `rotate(180deg) scaleX(-1) scaleY(${invert ? '-1' : '1'})`,
       }}
     >
-      <StyledBox
-        width={width}
-        height={height}
-        data-testid="DeckLabeSet"
-        isZoomed={deckLabels.length > 0 ? deckLabels[0].isZoomed : true}
-      />
-      <LabelContainer ref={ref}>
-        {deckLabels.length > 0
-          ? deckLabels.map((deckLabel, index) => (
-              <DeckLabel
-                key={`DeckLabel_${index}`}
-                maxWidth={`calc(${width}px - 8px)`}
-                {...deckLabel}
-                isLast={deckLabels.length - 1 === index}
-              />
-            ))
-          : null}
-      </LabelContainer>
+      <Box position={POSITION_RELATIVE} width="100%" height="100%">
+        <StyledBox
+          width={width}
+          height={height}
+          isZoomed={deckLabels.length > 0 ? deckLabels[0].isZoomed : true}
+          data-testid="DeckLabeSet"
+        />
+        {showModuleIcon && (
+          <IconWrapper leftPosition={width - 16}>
+            <DeckInfoLabel
+              iconName="stacked"
+              highlight
+              transform="scale(0.75)"
+            />
+          </IconWrapper>
+        )}
+        <LabelContainer ref={ref}>
+          {deckLabels.length > 0
+            ? deckLabels.map((deckLabel, index) => (
+                <DeckLabel
+                  key={`DeckLabel_${index}`}
+                  maxWidth={`calc(${width}px - 8px)`}
+                  {...deckLabel}
+                  isLast={deckLabels.length - 1 === index}
+                />
+              ))
+            : null}
+        </LabelContainer>
+      </Box>
     </RobotCoordsForeignDiv>
   )
 }
@@ -91,3 +111,14 @@ const LabelContainer = styled.div`
     border-bottom-left-radius: ${BORDERS.borderRadius4};
   }
 `
+
+interface IconWrapperProps {
+  leftPosition: number
+}
+
+const IconWrapper = styled(Box)<IconWrapperProps>`
+  position: ${POSITION_ABSOLUTE};
+  top: -${SPACING.spacing8};
+  left: ${props => `${props.leftPosition}px`};
+  z-index: 3;
+`

package/src/organisms/FixtureOption/__tests__/FixtureOption.test.tsx

@@ -0,0 +1,40 @@
+import { fireEvent, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { renderWithProviders } from '../../../testing/utils'
+import { FixtureOption } from '../index'
+
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof FixtureOption>) => {
+  return renderWithProviders(<FixtureOption {...props} />)
+}
+
+describe('FixtureOption', () => {
+  let props: ComponentProps<typeof FixtureOption>
+
+  it('should render text and buttons for desktop app', () => {
+    props = {
+      onClickHandler: vi.fn(),
+      optionName: 'mockOption',
+      buttonText: 'mockText',
+    }
+    render(props)
+    screen.getByText('mockOption')
+    screen.getByText('mockText')
+    fireEvent.click(screen.getByTestId('mockOption'))
+    expect(props.onClickHandler).toHaveBeenCalled()
+  })
+  it('should render text and buttons for odd', () => {
+    props = {
+      onClickHandler: vi.fn(),
+      optionName: 'mockOption',
+      buttonText: 'mockText',
+    }
+    render(props)
+    screen.getByText('mockOption')
+    screen.getByText('mockText')
+    fireEvent.click(screen.getByRole('button'))
+    expect(props.onClickHandler).toHaveBeenCalled()
+  })
+})

package/src/organisms/FixtureOption/index.tsx

@@ -0,0 +1,63 @@
+import { TertiaryButton } from '../../atoms/buttons'
+import { ListItem } from '../../atoms/ListItem/index'
+import { StyledText } from '../../atoms/StyledText'
+import { Flex } from '../../primitives'
+import {
+  ALIGN_CENTER,
+  JUSTIFY_FLEX_END,
+  JUSTIFY_SPACE_BETWEEN,
+} from '../../styles'
+import { SPACING } from '../../ui-style-constants'
+
+import type { MouseEventHandler } from 'react'
+
+interface FixtureOptionProps {
+  onClickHandler: MouseEventHandler
+  secondaryOnClickHandler?: MouseEventHandler
+  optionName: string
+  secondaryButtonText?: string
+  buttonText: string
+}
+export function FixtureOption(props: FixtureOptionProps): JSX.Element {
+  const {
+    onClickHandler,
+    optionName,
+    buttonText,
+    secondaryOnClickHandler,
+    secondaryButtonText,
+  } = props
+  return (
+    <ListItem
+      type="default"
+      padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
+      alignItems={ALIGN_CENTER}
+      justifyContent={JUSTIFY_SPACE_BETWEEN}
+    >
+      <StyledText
+        desktopStyle="bodyDefaultSemiBold"
+        oddStyle="bodyTextSemiBold"
+      >
+        {optionName}
+      </StyledText>
+      <Flex gridGap={SPACING.spacing4} justifyContent={JUSTIFY_FLEX_END}>
+        {secondaryOnClickHandler !== null &&
+        secondaryButtonText !== undefined ? (
+          <TertiaryButton
+            buttonType="secondary"
+            onClick={secondaryOnClickHandler}
+            data-testid={optionName}
+          >
+            {secondaryButtonText}
+          </TertiaryButton>
+        ) : null}
+        <TertiaryButton
+          buttonType="primary"
+          onClick={onClickHandler}
+          data-testid={optionName}
+        >
+          {buttonText}
+        </TertiaryButton>
+      </Flex>
+    </ListItem>
+  )
+}

package/src/organisms/ProtocolDeck/index.tsx

@@ -0,0 +1,118 @@
+import { useMemo } from 'react'
+
+import {
+  FLEX_ROBOT_TYPE,
+  getLabwareDefinitionsByURIForProtocol,
+  getLabwareInfoByLiquidId,
+  getLabwareOnDeck,
+  getSimplestDeckConfigForProtocol,
+  getStackedItemsOnStartingDeck,
+  getStacksOnModules,
+  getStandardDeckViewLayerBlockList,
+  getTopLabwareFromStack,
+  getWellFillFromLabwareId,
+} from '@opentrons/shared-data'
+
+import { BaseDeck } from '../../hardware-sim/BaseDeck'
+
+import type { ComponentProps } from 'react'
+import type {
+  CompletedProtocolAnalysis,
+  ProtocolAnalysisOutput,
+} from '@opentrons/shared-data'
+import type { LabwareOnDeck } from '../../hardware-sim/BaseDeck'
+
+interface ProtocolDeckProps {
+  protocolAnalysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput | null
+  /** extra props to pass through to BaseDeck component */
+  baseDeckProps?: Partial<ComponentProps<typeof BaseDeck>>
+}
+
+export function ProtocolDeck(props: ProtocolDeckProps): JSX.Element | null {
+  const { protocolAnalysis, baseDeckProps } = props
+  const startingDeck = useMemo(
+    () =>
+      getStackedItemsOnStartingDeck(
+        protocolAnalysis?.commands ?? [],
+        protocolAnalysis?.labware ?? [],
+        protocolAnalysis?.modules ?? []
+      ),
+    [protocolAnalysis]
+  )
+  const labwareDefinitionsByURI = useMemo(
+    () =>
+      getLabwareDefinitionsByURIForProtocol(protocolAnalysis?.commands ?? []),
+    [protocolAnalysis]
+  )
+  if (protocolAnalysis == null || (protocolAnalysis?.errors ?? []).length > 0)
+    return null
+
+  const robotType = protocolAnalysis.robotType ?? FLEX_ROBOT_TYPE
+  const deckConfig = getSimplestDeckConfigForProtocol(protocolAnalysis)
+  const labwareByLiquidId = getLabwareInfoByLiquidId(protocolAnalysis.commands)
+
+  const modulesOnDeck = Object.entries(getStacksOnModules(startingDeck)).map(
+    ([slotName, { allItemsInStack: stackedItems, moduleInStack: module }]) => {
+      const topLabwareInfo = getTopLabwareFromStack(stackedItems)
+      const topLabwareDefinition =
+        topLabwareInfo != null
+          ? labwareDefinitionsByURI[topLabwareInfo.definitionUri]
+          : null
+
+      return {
+        moduleModel: module.moduleModel,
+        moduleLocation: { slotName: module.moduleSlotName },
+        nestedLabwareDef: topLabwareDefinition,
+        nestedLabwareWellFill:
+          topLabwareInfo != null
+            ? getWellFillFromLabwareId(
+                topLabwareInfo.labwareId,
+                protocolAnalysis.liquids,
+                labwareByLiquidId
+              )
+            : undefined,
+      }
+    }
+  )
+
+  const labwareOnDeck: Array<LabwareOnDeck | null> = Object.entries(
+    getLabwareOnDeck(startingDeck)
+  ).map(([slotName, stackedItems]) => {
+    const topLabwareInfo = getTopLabwareFromStack(stackedItems)
+    const topLabwareDefinition =
+      topLabwareInfo != null
+        ? labwareDefinitionsByURI[topLabwareInfo.definitionUri]
+        : null
+    return topLabwareDefinition != null && topLabwareInfo != null
+      ? {
+          definition: topLabwareDefinition,
+          labwareLocation: { slotName },
+          wellFill: getWellFillFromLabwareId(
+            topLabwareInfo.labwareId,
+            protocolAnalysis.liquids,
+            labwareByLiquidId
+          ),
+        }
+      : null
+  })
+  const labwareOnDeckFiltered: LabwareOnDeck[] = labwareOnDeck.filter(
+    (labware): labware is LabwareOnDeck => labware != null
+  )
+
+  return (
+    <BaseDeck
+      deckConfig={deckConfig}
+      deckLayerBlocklist={getStandardDeckViewLayerBlockList(robotType)}
+      robotType={robotType}
+      labwareOnDeck={labwareOnDeckFiltered}
+      modulesOnDeck={modulesOnDeck}
+      {...{
+        svgProps: {
+          'aria-label': 'protocol deck map',
+          ...(baseDeckProps?.svgProps ?? {}),
+        },
+        ...baseDeckProps,
+      }}
+    />
+  )
+}

package/src/organisms/ProtocolTimelineScrubber/CommandItem.tsx

@@ -1,15 +1,17 @@
 import { useState } from 'react'
-import { Flex } from '../../primitives'
+
+import { LegacyStyledText } from '../../atoms'
 import { COLORS } from '../../helix-design-system'
-import { SPACING } from '../../ui-style-constants'
+import { Flex } from '../../primitives'
 import { ALIGN_FLEX_END, DIRECTION_COLUMN, OVERFLOW_SCROLL } from '../../styles'
-import { LegacyStyledText } from '../../atoms'
-import { COMMAND_WIDTH_PX } from './index'
+import { SPACING } from '../../ui-style-constants'
 import { CommandText } from '../CommandText'
+import { COMMAND_WIDTH_PX } from './index'
 import { getCommandTextData } from './utils'
+
 import type {
   CompletedProtocolAnalysis,
-  LabwareDefinition2,
+  LabwareDefinition,
   ProtocolAnalysisOutput,
   RobotType,
   RunTimeCommand,
@@ -22,7 +24,7 @@ interface CommandItemProps {
   setCurrentCommandIndex: (index: number) => void
   analysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput
   robotType: RobotType
-  allRunDefs: LabwareDefinition2[]
+  allRunDefs: LabwareDefinition[]
 }
 export function CommandItem({
   index,

package/src/organisms/ProtocolTimelineScrubber/PipetteVisuals.tsx

@@ -1,13 +1,15 @@
 import { useState } from 'react'
+
+import { LegacyStyledText } from '../../atoms'
+import { COLORS } from '../../helix-design-system'
 import { Box, Flex } from '../../primitives'
 import {
   ALIGN_CENTER,
   DIRECTION_COLUMN,
   TEXT_TRANSFORM_UPPERCASE,
 } from '../../styles'
-import { LegacyStyledText } from '../../atoms'
 import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-import { COLORS } from '../../helix-design-system'
+
 import type {
   CompletedProtocolAnalysis,
   ProtocolAnalysisOutput,
@@ -58,7 +60,7 @@ export function PipetteMountViz(
       ) : null}
       {pipetteEntity != null && pipetteId != null ? (
         <PipetteSideView
-          allNozzlesHaveTips={timelineFrame.tipState.pipettes[pipetteId]}
+          allNozzlesHaveTips={timelineFrame.tipState.pipettes[pipetteId].hasTip}
           allNozzleTipContents={Object.values(
             timelineFrame.liquidState.pipettes[pipetteId]
           )}

package/src/organisms/ProtocolTimelineScrubber/index.tsx

@@ -1,17 +1,20 @@
-import { useMemo, useState, useEffect, useRef } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import ViewportList from 'react-viewport-list'
 import map from 'lodash/map'
 import reduce from 'lodash/reduce'
-import ViewportList from 'react-viewport-list'
 
-import {
-  constructInvariantContextFromRunCommands,
-  getResultingTimelineFrameFromRunCommands,
-} from '@opentrons/step-generation'
 import {
   FLEX_ROBOT_TYPE,
-  THERMOCYCLER_MODULE_TYPE,
   getSimplestDeckConfigForProtocol,
+  THERMOCYCLER_MODULE_TYPE,
 } from '@opentrons/shared-data'
+import {
+  constructInvariantContextFromRunCommands,
+  getResultingTimelineFrameFromRunCommands,
+  getSlotInLocationStack,
+  getTopmostLabwareOnModuleFromStackRobotState,
+} from '@opentrons/step-generation'
+
 import {
   ALIGN_CENTER,
   ALIGN_STRETCH,
@@ -25,13 +28,13 @@ import {
   PrimaryButton,
   SPACING,
 } from '../..'
-import { PipetteMountViz } from './PipetteVisuals'
 import { getLabwareDefinitionsFromCommands } from '../CommandText/useCommandTextString/utils/getLabwareDefinitionsFromCommands'
+import { CommandItem } from './CommandItem'
+import { PipetteMountViz } from './PipetteVisuals'
 import {
   getAllWellContentsForActiveItem,
   wellFillFromWellContents,
 } from './utils'
-import { CommandItem } from './CommandItem'
 
 import type { ComponentProps } from 'react'
 import type { ViewportListRef } from 'react-viewport-list'
@@ -146,11 +149,12 @@ export function ProtocolTimelineScrubber(
             robotType={robotType ?? FLEX_ROBOT_TYPE}
             deckConfig={getSimplestDeckConfigForProtocol(analysis)}
             modulesOnDeck={map(robotState.modules, (module, moduleId) => {
-              const labwareInModuleId =
-                Object.entries(robotState.labware).find(
-                  ([labwareId, labware]) => labware.slot === moduleId
-                )?.[0] ?? null
-
+              const topLabwareId = getTopmostLabwareOnModuleFromStackRobotState(
+                moduleId,
+                robotState.labware
+              )
+              const topLabwareEntity =
+                invariantContext.labwareEntities[topLabwareId]
               const getModuleInnerProps = (
                 moduleState: ModuleTemporalProperties['moduleState']
               ): ComponentProps<typeof Module>['innerProps'] => {
@@ -179,36 +183,9 @@ export function ProtocolTimelineScrubber(
                 }
               }
 
-              const adapterId =
-                labwareInModuleId != null
-                  ? invariantContext.labwareEntities[labwareInModuleId].id
-                  : null
-              const labwareTempProperties =
-                adapterId != null
-                  ? Object.entries(robotState.labware).find(
-                      ([labwareId, labware]) => labware.slot === adapterId
-                    )
-                  : null
-
-              const labwareDef =
-                labwareTempProperties != null
-                  ? invariantContext.labwareEntities[labwareTempProperties[0]]
-                      .def
-                  : null
-              let nestedDef
-              let labwareId = null
-              if (labwareDef != null && labwareTempProperties != null) {
-                labwareId = labwareTempProperties[0]
-                nestedDef = labwareDef
-              } else if (labwareInModuleId != null) {
-                labwareId = labwareInModuleId
-                nestedDef =
-                  invariantContext.labwareEntities[labwareInModuleId]?.def
-              }
-
               const wellContents =
-                allWellContentsForActiveItem && labwareId != null
-                  ? allWellContentsForActiveItem[labwareId]
+                allWellContentsForActiveItem && topLabwareEntity != null
+                  ? allWellContentsForActiveItem[topLabwareEntity.id]
                   : null
               const nestedFill = wellFillFromWellContents(
                 wellContents,
@@ -218,7 +195,7 @@ export function ProtocolTimelineScrubber(
               return {
                 moduleModel: invariantContext.moduleEntities[moduleId].model,
                 moduleLocation: { slotName: module.slot },
-                nestedLabwareDef: nestedDef,
+                nestedLabwareDef: topLabwareEntity?.def,
                 nestedLabwareWellFill: nestedFill,
                 innerProps: getModuleInnerProps(module.moduleState),
               }
@@ -237,7 +214,7 @@ export function ProtocolTimelineScrubber(
                   )
                 : {}
               const labwareLocation: LabwareLocation = {
-                slotName: labware.slot,
+                slotName: getSlotInLocationStack(labware.stack),
               }
               const wellContents =
                 allWellContentsForActiveItem && labwareId != null

package/src/organisms/ProtocolTimelineScrubber/utils.ts

@@ -1,12 +1,14 @@
-import reduce from 'lodash/reduce'
-import omitBy from 'lodash/omitBy'
 import mapValues from 'lodash/mapValues'
+import omitBy from 'lodash/omitBy'
+import reduce from 'lodash/reduce'
+
 import { DEFAULT_LIQUID_COLORS } from '@opentrons/shared-data'
+
 import { COLORS } from '../../helix-design-system'
-import type { WellFill } from '../../hardware-sim'
+
 import type {
   CompletedProtocolAnalysis,
-  LabwareDefinition2,
+  LabwareDefinition,
   ProtocolAnalysisOutput,
   RunTimeCommand,
 } from '@opentrons/shared-data'
@@ -16,6 +18,7 @@ import type {
   SingleLabwareLiquidState,
   TimelineFrame,
 } from '@opentrons/step-generation'
+import type { WellFill } from '../../hardware-sim'
 import type { CommandTextData } from './types'
 
 //  copied from protocol-designer
@@ -38,7 +41,7 @@ export type ContentsByWell = {
 
 const MIXED_WELL_COLOR = COLORS.grey50
 
-function getAllWellsForLabware(def: LabwareDefinition2): string[] {
+function getAllWellsForLabware(def: LabwareDefinition): string[] {
   return Object.keys(def.wells)
 }
 
@@ -61,7 +64,7 @@ function _wellContentsForWell(
 
 export function _wellContentsForLabware(
   labwareLiquids: SingleLabwareLiquidState,
-  labwareDef: LabwareDefinition2
+  labwareDef: LabwareDefinition
 ): ContentsByWell {
   const allWellsForContainer = getAllWellsForLabware(labwareDef)
   return reduce(

package/src/organisms/Toolbox/Toolbox.stories.tsx

@@ -1,5 +1,6 @@
 import { STYLE_PROPS } from '../../primitives'
 import { Toolbox as ToolboxComponent } from './index'
+
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof ToolboxComponent> = {

package/src/organisms/Toolbox/__tests__/Toolbox.test.tsx

@@ -1,5 +1,6 @@
-import { describe, it, expect, vi } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
 import { renderWithProviders } from '../../../testing/utils'
 import { Toolbox } from '../index'
 

package/src/organisms/Toolbox/index.tsx

@@ -1,4 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
+
+import { PrimaryButton } from '../../atoms'
+import { BORDERS, COLORS } from '../../helix-design-system'
 import { Box, Btn, Flex } from '../../primitives'
 import {
   ALIGN_CENTER,
@@ -7,9 +10,7 @@ import {
   NO_WRAP,
   POSITION_RELATIVE,
 } from '../../styles'
-import { BORDERS, COLORS } from '../../helix-design-system'
 import { SPACING } from '../../ui-style-constants'
-import { PrimaryButton } from '../../atoms'
 import { textDecorationUnderline } from '../../ui-style-constants/typography'
 
 import type { ReactNode } from 'react'

package/src/organisms/index.ts

@@ -2,3 +2,5 @@ export * from './DeckLabelSet'
 export * from './Toolbox'
 export * from './ProtocolTimelineScrubber'
 export * from './CommandText'
+export * from './FixtureOption'
+export * from './ProtocolDeck'

package/src/primitives/Box.stories.tsx

@@ -1,4 +1,4 @@
-import { COLORS, BORDERS } from '../helix-design-system'
+import { BORDERS, COLORS } from '../helix-design-system'
 import { SPACING } from '../ui-style-constants'
 import { Box as BoxComponent } from './Box'
 

package/src/primitives/Box.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { styleProps, isntStyleProp } from './style-props'
+import { isntStyleProp, styleProps } from './style-props'
 
 import type { PrimitiveComponent } from './types'
 

package/src/primitives/Btn.stories.tsx

@@ -1,17 +1,17 @@
-import type * as React from 'react'
+import { Box } from './Box'
 import {
-  PrimaryBtn,
-  SecondaryBtn,
-  NewPrimaryBtn,
-  NewSecondaryBtn,
+  LightSecondaryBtn,
   NewAlertPrimaryBtn,
   NewAlertSecondaryBtn,
-  LightSecondaryBtn,
+  NewPrimaryBtn,
+  NewSecondaryBtn,
+  PrimaryBtn,
+  SecondaryBtn,
   TertiaryBtn,
 } from './Btn'
-import { Box } from './Box'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
 
 export default {
   title: 'Library/Atoms/Btn',

package/src/primitives/Btn.tsx

@@ -1,12 +1,11 @@
 import styled, { css } from 'styled-components'
 
 import * as Styles from '../styles'
-import { styleProps, isntStyleProp } from './style-props'
-
 import { RESPONSIVENESS } from '../ui-style-constants'
+import { isntStyleProp, styleProps } from './style-props'
 
-import type { HTMLProps } from 'react'
 import type { StyledComponent } from 'styled-components'
+import type { HTMLProps } from 'react'
 import type { StyleProps } from './types'
 
 export const BUTTON_TYPE_SUBMIT: 'submit' = 'submit'

package/src/primitives/Flex.stories.tsx

@@ -1,8 +1,8 @@
-import { BORDERS, COLORS } from '../helix-design-system'
-import { SPACING } from '../ui-style-constants'
-import { DIRECTION_COLUMN, JUSTIFY_SPACE_AROUND } from '../styles'
 import { LegacyStyledText } from '../atoms/StyledText'
+import { BORDERS, COLORS } from '../helix-design-system'
 import { Box, Flex as FlexComponent } from '../primitives'
+import { DIRECTION_COLUMN, JUSTIFY_SPACE_AROUND } from '../styles'
+import { SPACING } from '../ui-style-constants'
 
 import type { Meta, StoryObj } from '@storybook/react'