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

package/src/hooks/useSelectDeckLocation/index.tsx

@@ -1,16 +1,18 @@
-import { useState, Fragment } from 'react'
-import isEqual from 'lodash/isEqual'
+import { Fragment, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import isEqual from 'lodash/isEqual'
+
 import {
   FLEX_CUTOUT_BY_SLOT_ID,
-  FLEX_SINGLE_SLOT_BY_CUTOUT_ID,
   FLEX_ROBOT_TYPE,
+  FLEX_SINGLE_SLOT_BY_CUTOUT_ID,
   getDeckDefFromRobotType,
-  getPositionFromSlotId,
   getFixtureDisplayName,
+  getPositionFromSlotId,
   isAddressableAreaStandardSlot,
   OT2_ROBOT_TYPE,
 } from '@opentrons/shared-data'
+
 import {
   DeckFromLayers,
   LegacyDeckSlotLocation,
@@ -21,16 +23,16 @@ import {
   SingleSlotFixture,
   SlotLabels,
 } from '../../hardware-sim'
+import { COLORS } from '../../helix-design-system'
 import { Icon } from '../../icons'
 import { Text } from '../../primitives'
 import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles'
 import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-import { COLORS } from '../../helix-design-system'
 
 import type {
-  CutoutConfig,
   AddressableArea,
   CoordinateTuple,
+  CutoutConfig,
   CutoutFixtureId,
   DeckDefinition,
   ModuleLocation,

package/src/hooks/useSwipe.ts

@@ -1,6 +1,7 @@
-import { useState, useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import interact from 'interactjs'
-import type { MutableRefObject, CSSProperties } from 'react'
+
+import type { CSSProperties, MutableRefObject } from 'react'
 
 interface UseSwipeResult {
   ref: MutableRefObject<null>

package/src/i18n.ts

@@ -1,10 +1,12 @@
+import { initReactI18next } from 'react-i18next'
 import i18n from 'i18next'
 import capitalize from 'lodash/capitalize'
 import startCase from 'lodash/startCase'
-import { initReactI18next } from 'react-i18next'
-import { resources } from './assets/localization'
+
 import { titleCase } from '@opentrons/shared-data'
 
+import { resources } from './assets/localization'
+
 import type { InitOptions } from 'i18next'
 
 export const US_ENGLISH = 'en-US'

package/src/icons/Icon.stories.tsx

@@ -1,7 +1,8 @@
 import { Flex, STYLE_PROPS } from '../primitives'
 import { SPACING } from '../ui-style-constants'
-import { ICON_DATA_BY_NAME } from './icon-data'
 import { Icon as IconComponent } from './Icon'
+import { ICON_DATA_BY_NAME } from './icon-data'
+
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof IconComponent> = {

package/src/icons/Icon.tsx

@@ -1,5 +1,5 @@
-import { css, keyframes } from 'styled-components'
 import cx from 'classnames'
+import { css, keyframes } from 'styled-components'
 
 import { Svg } from '../primitives'
 import { ICON_DATA_BY_NAME } from './icon-data'

package/src/icons/IconList.stories.tsx

@@ -1,20 +1,21 @@
 import * as React from 'react'
 
 import {
-  Text,
-  Flex,
-  DIRECTION_COLUMN,
-  WRAP,
-  TYPOGRAPHY,
   ALIGN_CENTER,
+  BORDERS,
   COLORS,
+  DIRECTION_COLUMN,
+  Flex,
   SPACING,
-  BORDERS,
+  Text,
+  TYPOGRAPHY,
+  WRAP,
 } from '@opentrons/components'
-import { ICON_DATA_BY_NAME } from './icon-data'
+
 import { Icon as IconComponent } from './Icon'
+import { ICON_DATA_BY_NAME } from './icon-data'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
 import type { IconName } from './Icon'
 
 export default {

package/src/icons/ModuleIcon.tsx

@@ -1,14 +1,15 @@
-import { Icon } from './Icon'
 import {
+  ABSORBANCE_READER_TYPE,
+  FLEX_STACKER_MODULE_TYPE,
   HEATERSHAKER_MODULE_TYPE,
-  TEMPERATURE_MODULE_TYPE,
+  MAGNETIC_BLOCK_TYPE,
   MAGNETIC_MODULE_TYPE,
+  TEMPERATURE_MODULE_TYPE,
   THERMOCYCLER_MODULE_TYPE,
-  MAGNETIC_BLOCK_TYPE,
-  ABSORBANCE_READER_TYPE,
-  FLEX_STACKER_MODULE_TYPE,
 } from '@opentrons/shared-data'
 
+import { Icon } from './Icon'
+
 import type { ModuleType } from '@opentrons/shared-data'
 import type { StyleProps } from '../primitives/types'
 
@@ -19,7 +20,7 @@ export type ModuleIconName =
   | 'ot-magnet-v2'
   | 'ot-thermocycler'
   | 'ot-absorbance'
-  | 'stacked'
+  | 'ot-flex-stacker'
 
 export const MODULE_ICON_NAME_BY_TYPE: {
   [type in ModuleType]: ModuleIconName
@@ -30,7 +31,7 @@ export const MODULE_ICON_NAME_BY_TYPE: {
   [MAGNETIC_MODULE_TYPE]: 'ot-magnet-v2',
   [THERMOCYCLER_MODULE_TYPE]: 'ot-thermocycler',
   [ABSORBANCE_READER_TYPE]: 'ot-absorbance',
-  [FLEX_STACKER_MODULE_TYPE]: 'stacked',
+  [FLEX_STACKER_MODULE_TYPE]: 'ot-flex-stacker',
 }
 
 interface ModuleIconProps extends StyleProps {

package/src/icons/NotificationIcon.tsx

@@ -2,7 +2,7 @@ import { COLOR_WARNING } from '../styles'
 import { Icon } from './Icon'
 import { ICON_DATA_BY_NAME } from './icon-data'
 
-import type { IconProps, IconName } from './Icon'
+import type { IconName, IconProps } from './Icon'
 
 export interface NotificationIconProps extends IconProps {
   /** name constant of the optional notifcation icon to display */

package/src/icons/icon-data.ts

@@ -441,6 +441,11 @@ export const ICON_DATA_BY_NAME: Record<
     path: 'M23 0h1v24H0V0h1v23h22z',
     viewBox: '0 0 24 24',
   },
+  'ot-flex-stacker': {
+    path:
+      'M14.3 8.75789H1.7C1.3134 8.75789 1 9.05951 1 9.43158V10.7789C1 11.151 1.3134 11.4526 1.7 11.4526H14.3C14.6866 11.4526 15 11.151 15 10.7789V9.43158C15 9.05951 14.6866 8.75789 14.3 8.75789ZM14.3 12.8H1.7C1.3134 12.8 1 13.1016 1 13.4737V14.8211C1 15.1931 1.3134 15.4947 1.7 15.4947H14.3C14.6866 15.4947 15 15.1931 15 14.8211V13.4737C15 13.1016 14.6866 12.8 14.3 12.8ZM8.0875 7.32632L11.2375 3.78947C11.325 3.70526 11.2375 3.62105 11.15 3.62105H4.7625C4.675 3.62105 4.5875 3.78947 4.675 3.78947L7.825 7.32632H8.0875ZM9.05 0H6.8625V5.55789H9.05V0Z',
+    viewBox: '0 0 16 16',
+  },
   'ot-heater-shaker': {
     path:
       'M10.0673 2.95C10.0673 1.87304 9.0488 1 7.79243 1C6.53607 1 5.51758 1.87304 5.51758 2.95C5.51758 5.10687 5.63384 6.80816 5.82919 8.10699C4.73271 8.75798 4 9.93802 4 11.2857C4 13.3371 5.69759 15 7.79167 15C9.88575 15 11.5833 13.3371 11.5833 11.2857C11.5833 9.85314 10.7554 8.60999 9.54271 7.99036C9.86372 6.608 10.0673 4.88684 10.0673 2.95ZM7.79243 2.3C8.21122 2.3 8.55072 2.59101 8.55072 2.95V4.9H7.03415V2.95C7.03415 2.59101 7.37364 2.3 7.79243 2.3ZM2.27929 3.3654C2.29023 3.31226 2.25753 3.25967 2.20484 3.24674L1.30047 3.02476C1.24538 3.01124 1.19004 3.04619 1.17925 3.10188C0.910517 4.48945 0.967614 5.92042 1.34594 7.28202C1.3629 7.34304 1.43201 7.37221 1.48796 7.34255L2.30932 6.90723C2.35045 6.88543 2.37103 6.83814 2.35952 6.79304C2.07343 5.67126 2.04602 4.49918 2.27929 3.3654ZM4.27705 3.36031C4.28442 3.30912 4.25203 3.26047 4.20184 3.24804L3.30306 3.02541C3.24734 3.01161 3.19142 3.04745 3.18134 3.10396C2.93318 4.49526 2.99334 5.92402 3.35747 7.2894C3.37399 7.35133 3.44409 7.38105 3.50049 7.35059L4.32474 6.90549C4.36372 6.88444 4.38416 6.84025 4.37535 6.79683C4.14583 5.66539 4.11259 4.50294 4.27705 3.36031ZM11.4461 6.90575C11.4069 6.88457 11.3865 6.84002 11.3956 6.7964C11.6325 5.66616 11.6626 4.50237 11.4846 3.36147C11.4765 3.30982 11.5091 3.26036 11.5599 3.2479L12.4675 3.02514C12.5231 3.01148 12.5789 3.04731 12.589 3.10374C12.8372 4.49511 12.777 5.92395 12.4129 7.2894C12.3964 7.35133 12.3263 7.38105 12.2699 7.35059L11.4461 6.90575ZM13.3998 6.79315C13.3884 6.83821 13.4089 6.88539 13.45 6.90716L14.2719 7.34278C14.3277 7.37236 14.3967 7.34342 14.4138 7.28262C14.7976 5.92195 14.8581 4.49027 14.5902 3.10195C14.5794 3.04624 14.5241 3.01125 14.4689 3.02478L13.5639 3.24691C13.5115 3.25978 13.4788 3.3119 13.4893 3.36483C13.7145 4.49999 13.6839 5.67116 13.3998 6.79315Z',

package/src/instrument/InstrumentDiagram.stories.tsx

@@ -1,10 +1,11 @@
-import type * as React from 'react'
 import keyBy from 'lodash/keyBy'
+
 import { getAllPipetteNames, getPipetteNameSpecs } from '@opentrons/shared-data'
 
 import { InstrumentDiagram as InstrumentDiagramComponent } from './InstrumentDiagram'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
 
 const allPipetteSpecsByDisplayNames = keyBy(
   getAllPipetteNames().map(getPipetteNameSpecs),

package/src/instrument/InstrumentDiagram.tsx

@@ -1,17 +1,18 @@
 import { Flex } from '../primitives'
 import { ALIGN_CENTER, JUSTIFY_CENTER } from '../styles'
-import singleSrc from './single_channel_GEN1_800px.png'
-import multiSrc from './multi-channel_GEN1_800px.png'
-import singleGEN2Src from './single-channel_GEN2_800px.png'
-import multiGEN2Src from './multi-channel_GEN2_800px.png'
-import singleFlexSrc from './single-channel-flex.png'
-import eightChannelFlexSrc from './eight-channel-flex.png'
-import ninetySixSrc from './ninety-six-channel-gen1.png'
 
 import type { FlattenSimpleInterpolation } from 'styled-components'
 import type { PipetteV2Specs } from '@opentrons/shared-data'
-import type { Mount } from '../robot-types'
 import type { StyleProps } from '..'
+import type { Mount } from '../robot-types'
+
+import eightChannelFlexSrc from './eight-channel-flex.png'
+import multiSrc from './multi-channel_GEN1_800px.png'
+import multiGEN2Src from './multi-channel_GEN2_800px.png'
+import ninetySixSrc from './ninety-six-channel-gen1.png'
+import singleSrc from './single_channel_GEN1_800px.png'
+import singleGEN2Src from './single-channel_GEN2_800px.png'
+import singleFlexSrc from './single-channel-flex.png'
 
 export interface InstrumentDiagramProps extends StyleProps {
   mount: Mount

package/src/instrument/InstrumentGroup.stories.tsx

@@ -1,11 +1,12 @@
-import type * as React from 'react'
-import reduce from 'lodash/reduce'
 import keyBy from 'lodash/keyBy'
+import reduce from 'lodash/reduce'
+
 import { getAllPipetteNames, getPipetteNameSpecs } from '@opentrons/shared-data'
 
 import { InstrumentGroup as InstrumentGroupComponent } from './InstrumentGroup'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
 
 const allPipetteSpecsByDisplayNames = keyBy(
   getAllPipetteNames().map(getPipetteNameSpecs),

package/src/instrument/InstrumentGroup.tsx

@@ -1,5 +1,5 @@
-import { InstrumentInfo } from './InstrumentInfo'
 import styles from './instrument.module.css'
+import { InstrumentInfo } from './InstrumentInfo'
 
 import type { InstrumentInfoProps } from './InstrumentInfo'
 

package/src/instrument/InstrumentInfo.tsx

@@ -1,16 +1,16 @@
 import { LEFT, RIGHT } from '@opentrons/shared-data'
-import { Flex } from '../primitives'
-import { SPACING, TYPOGRAPHY } from '../ui-style-constants'
+
 import { LegacyStyledText } from '../atoms'
+import { Flex } from '../primitives'
 import { DIRECTION_COLUMN, JUSTIFY_CENTER } from '../styles'
+import { SPACING, TYPOGRAPHY } from '../ui-style-constants'
+import styles from './instrument.module.css'
 import { InstrumentDiagram } from './InstrumentDiagram'
 
 import type { ReactNode } from 'react'
 import type { Mount } from '../robot-types'
 import type { InstrumentDiagramProps } from './InstrumentDiagram'
 
-import styles from './instrument.module.css'
-
 export interface InstrumentInfoProps {
   /** 'left' or 'right' */
   mount: Mount

package/src/instrument/__tests__/InstrumentInfo.test.tsx

@@ -1,9 +1,11 @@
 import { screen } from '@testing-library/react'
-import { describe, beforeEach, it, vi } from 'vitest'
-import { LEFT, RIGHT, fixtureP1000SingleV2Specs } from '@opentrons/shared-data'
+import { beforeEach, describe, it, vi } from 'vitest'
+
+import { fixtureP1000SingleV2Specs, LEFT, RIGHT } from '@opentrons/shared-data'
+
 import { renderWithProviders } from '../../testing/utils'
-import { InstrumentInfo } from '../InstrumentInfo'
 import { InstrumentDiagram } from '../InstrumentDiagram'
+import { InstrumentInfo } from '../InstrumentInfo'
 
 import type { ComponentProps } from 'react'
 

package/src/instrument/index.ts

@@ -1,4 +1,3 @@
 export * from './InstrumentDiagram'
 export * from './InstrumentGroup'
 export * from './InstrumentInfo'
-export * from './PipetteSelect'

package/src/interaction-enhancers/ClickOutside.ts

@@ -1,4 +1,5 @@
 import { Component } from 'react'
+
 import type { RefCallback } from 'react'
 
 interface ClickOutsideChildParams {

package/src/interaction-enhancers/HandleKeypress.tsx

@@ -1,4 +1,5 @@
 import { Component } from 'react'
+
 import type { ReactNode } from 'react'
 
 export interface KeypressHandler {

package/src/interaction-enhancers/__tests__/useHover.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it } from 'vitest'
+
 describe('useHover hook', () => {
   it.todo('replace deprecated enzyme test')
 })

package/src/interaction-enhancers/useHover.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 export interface UseHoverOptions {
   enterDelay?: number

package/src/legacy-hardware-sim/LabwareNameOverlay.tsx

@@ -1,4 +1,5 @@
 import cx from 'classnames'
+
 import styles from './LabwareNameOverlay.module.css'
 
 export interface LabwareNameOverlayProps {

package/src/legacy-hardware-sim/ModuleItem.tsx

@@ -9,12 +9,12 @@ import {
   THERMOCYCLER_MODULE_V1,
 } from '@opentrons/shared-data'
 
-import { Icon } from '../icons'
 import { RobotCoordsForeignDiv } from '../hardware-sim/Deck'
+import { Icon } from '../icons'
 import styles from './ModuleItem.module.css'
 
+import type { DeckSlot, ModuleModel } from '@opentrons/shared-data'
 import type { IconName } from '../icons'
-import type { ModuleModel, DeckSlot } from '@opentrons/shared-data'
 
 const FLIPPED_SLOTS = ['3', '6', '9']
 export interface ModuleProps {

package/src/lists/SidePanelGroup.tsx

@@ -1,8 +1,8 @@
 // SidePanelGroup component
 import cx from 'classnames'
 
-import styles from './lists.module.css'
 import { Icon } from '../icons'
+import styles from './lists.module.css'
 
 import type { ReactNode } from 'react'
 import type { IconName } from '../icons'

package/src/lists/TitledList.tsx

@@ -2,15 +2,14 @@
 import { Children } from 'react'
 import cx from 'classnames'
 
-import { Icon } from '../icons'
 import { LegacyStyledText } from '../atoms'
 import { COLORS } from '../helix-design-system'
+import { Icon } from '../icons'
+import styles from './lists.module.css'
 
 import type { MouseEvent, ReactNode } from 'react'
 import type { IconName, IconProps } from '../icons'
 
-import styles from './lists.module.css'
-
 // TODO(bc, 2021-03-31): reconsider whether this belongs in components library
 // it is bloated with application specific functionality
 

package/src/modals/LegacyModal.tsx

@@ -1,9 +1,9 @@
 import { Fragment } from 'react'
-import cx from 'classnames'
 import { RemoveScroll } from 'react-remove-scroll'
+import cx from 'classnames'
 
-import { Overlay } from './Overlay'
 import styles from './modals.module.css'
+import { Overlay } from './Overlay'
 
 import type { MouseEventHandler, ReactNode, Ref } from 'react'
 

package/src/modals/Modal.stories.tsx

@@ -1,7 +1,7 @@
 import { PrimaryButton, StyledText } from '../atoms'
-import { SPACING } from '../ui-style-constants'
 import { Flex, STYLE_PROPS } from '../primitives'
 import { JUSTIFY_END } from '../styles'
+import { SPACING } from '../ui-style-constants'
 import { Modal as ModalComponent } from './Modal'
 
 import type { Meta, StoryObj } from '@storybook/react'

package/src/modals/Modal.tsx

@@ -1,6 +1,6 @@
+import { COLORS } from '../helix-design-system'
 import { Box } from '../primitives'
 import { SPACING } from '../ui-style-constants'
-import { COLORS } from '../helix-design-system'
 import { ModalHeader } from './ModalHeader'
 import { ModalShell } from './ModalShell'
 

package/src/modals/ModalHeader.tsx

@@ -1,8 +1,9 @@
 import styled, { css } from 'styled-components'
 
+import { StyledText } from '../atoms'
+import { COLORS } from '../helix-design-system'
 import { Icon } from '../icons'
 import { Box, Btn, Flex } from '../primitives'
-import { StyledText } from '../atoms'
 import {
   ALIGN_CENTER,
   DISPLAY_FLEX,
@@ -10,7 +11,6 @@ import {
   JUSTIFY_SPACE_BETWEEN,
 } from '../styles'
 import { SPACING } from '../ui-style-constants'
-import { COLORS } from '../helix-design-system'
 
 import type { MouseEventHandler, ReactNode } from 'react'
 import type { IconProps } from '../icons'

package/src/modals/ModalShell.tsx

@@ -1,4 +1,7 @@
 import styled from 'styled-components'
+
+import { BORDERS, COLORS } from '../helix-design-system'
+import { styleProps } from '../primitives'
 import {
   ALIGN_CENTER,
   ALIGN_END,
@@ -11,9 +14,7 @@ import {
   POSITION_RELATIVE,
   POSITION_STICKY,
 } from '../styles'
-import { BORDERS, COLORS } from '../helix-design-system'
 import { RESPONSIVENESS, SPACING } from '../ui-style-constants'
-import { styleProps } from '../primitives'
 
 import type { MouseEvent, MouseEventHandler, ReactNode } from 'react'
 import type { StyleProps } from '../primitives'

package/src/modals/SpinnerModal.tsx

@@ -1,9 +1,9 @@
 // titled modal page component
 import cx from 'classnames'
-import { Overlay } from './Overlay'
-import { Icon } from '../icons'
 
+import { Icon } from '../icons'
 import styles from './modals.module.css'
+import { Overlay } from './Overlay'
 
 export interface SpinnerModalProps {
   /** Additional/Override style */

package/src/modals/SpinnerModalPage.tsx

@@ -1,7 +1,7 @@
 // titled modal page component
 import { TitleBar } from '../structure'
-import { SpinnerModal } from './SpinnerModal'
 import styles from './modals.module.css'
+import { SpinnerModal } from './SpinnerModal'
 
 import type { ComponentProps } from 'react'
 import type { TitleBarProps } from '../structure'

package/src/modals/__tests__/Modal.test.tsx

@@ -1,9 +1,11 @@
 //
 import '@testing-library/jest-dom/vitest'
+
 import { screen } from '@testing-library/react'
-import { describe, it, expect, beforeEach } from 'vitest'
-import { renderWithProviders } from '../../testing/utils'
+import { beforeEach, describe, expect, it } from 'vitest'
+
 import { COLORS } from '../../helix-design-system'
+import { renderWithProviders } from '../../testing/utils'
 import { Modal } from '../Modal'
 
 import type { ComponentProps } from 'react'

package/src/modals/__tests__/ModalHeader.test.tsx

@@ -1,10 +1,12 @@
-import { screen, fireEvent } from '@testing-library/react'
+import { fireEvent, screen } from '@testing-library/react'
+
 import '@testing-library/jest-dom/vitest'
-import { describe, it, expect, vi, beforeEach } from 'vitest'
 
-import { renderWithProviders } from '../../testing/utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
 import { COLORS } from '../../helix-design-system'
 import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles'
+import { renderWithProviders } from '../../testing/utils'
 import { ModalHeader } from '../ModalHeader'
 
 import type { ComponentProps } from 'react'

package/src/modals/__tests__/ModalShell.test.tsx

@@ -1,6 +1,8 @@
 import '@testing-library/jest-dom/vitest'
+
 import { screen } from '@testing-library/react'
-import { describe, it, expect, beforeEach } from 'vitest'
+import { beforeEach, describe, expect, it } from 'vitest'
+
 import { renderWithProviders } from '../../testing/utils'
 import { ModalShell } from '../ModalShell'
 

package/src/molecules/Banner/Banner.stories.tsx

@@ -1,5 +1,5 @@
-import { STYLE_PROPS } from '../../primitives'
 import { StyledText } from '../../atoms/StyledText'
+import { STYLE_PROPS } from '../../primitives'
 import { Banner } from './index'
 
 import type { Meta, StoryObj } from '@storybook/react'

package/src/molecules/Banner/__tests__/Banner.test.tsx

@@ -1,8 +1,8 @@
-import { describe, it, vi, expect, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
-import { renderWithProviders } from '../../../testing/utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { Banner } from '..'
+import { renderWithProviders } from '../../../testing/utils'
 
 import type { ComponentProps } from 'react'
 

package/src/molecules/Banner/index.tsx

@@ -1,17 +1,18 @@
 import { css } from 'styled-components'
-import { Btn, Flex } from '../../primitives'
-import { Icon } from '../../icons'
+
 import { BORDERS, COLORS } from '../../helix-design-system'
-import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { Icon } from '../../icons'
+import { Btn, Flex } from '../../primitives'
 import {
   ALIGN_CENTER,
   DIRECTION_ROW,
   JUSTIFY_SPACE_BETWEEN,
 } from '../../styles'
+import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 
 import type { MouseEvent, MouseEventHandler, ReactNode } from 'react'
-import type { StyleProps } from '../../primitives'
 import type { IconProps } from '../../icons'
+import type { StyleProps } from '../../primitives'
 
 export type BannerType =
   | 'success'

package/src/molecules/DeckInfoLabel/DeckInfoLabel.stories.tsx

@@ -1,7 +1,7 @@
+import { DeckInfoLabel } from '.'
 import { customViewports } from '../../../../.storybook/preview'
 import { Flex } from '../../primitives'
 import { SPACING } from '../../ui-style-constants'
-import { DeckInfoLabel } from '.'
 
 import type { Meta, StoryObj } from '@storybook/react'
 

package/src/molecules/DeckInfoLabel/__tests__/DeckInfoLabel.test.tsx

@@ -1,10 +1,10 @@
-import { describe, it, beforeEach, expect } from 'vitest'
-import { renderWithProviders } from '../../../testing/utils'
 import { screen } from '@testing-library/react'
-import { SPACING } from '../../../ui-style-constants'
-import { BORDERS, COLORS } from '../../../helix-design-system'
+import { beforeEach, describe, expect, it } from 'vitest'
 
 import { DeckInfoLabel } from '..'
+import { BORDERS, COLORS } from '../../../helix-design-system'
+import { renderWithProviders } from '../../../testing/utils'
+import { SPACING } from '../../../ui-style-constants'
 
 import type { ComponentProps } from 'react'
 

package/src/molecules/DeckLabel/__tests__/DeckLabel.test.tsx

@@ -1,11 +1,11 @@
 import { screen } from '@testing-library/react'
-import { describe, it, beforeEach, expect } from 'vitest'
+import { beforeEach, describe, expect, it } from 'vitest'
 
+import { DeckLabel } from '..'
 import { COLORS } from '../../../helix-design-system'
-import { SPACING } from '../../../ui-style-constants'
 import { FLEX_MAX_CONTENT } from '../../../styles'
 import { renderWithProviders } from '../../../testing/utils'
-import { DeckLabel } from '..'
+import { SPACING } from '../../../ui-style-constants'
 
 import type { ComponentProps } from 'react'
 

package/src/molecules/DeckLabel/index.tsx

@@ -1,11 +1,13 @@
 import { css } from 'styled-components'
+
 import { getModuleType } from '@opentrons/shared-data'
+
+import { StyledText } from '../../atoms'
+import { COLORS } from '../../helix-design-system'
+import { ModuleIcon } from '../../icons'
 import { Flex } from '../../primitives'
 import { ALIGN_CENTER, FLEX_MAX_CONTENT } from '../../styles'
-import { COLORS } from '../../helix-design-system'
 import { SPACING } from '../../ui-style-constants'
-import { StyledText } from '../../atoms'
-import { ModuleIcon } from '../../icons'
 
 import type { FlattenSimpleInterpolation } from 'styled-components'
 import type { ModuleModel } from '@opentrons/shared-data'

package/src/molecules/DropdownMenu/__tests__/DropdownMenu.test.tsx

@@ -1,8 +1,8 @@
-import { screen, fireEvent } from '@testing-library/react'
-import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { fireEvent, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { renderWithProviders } from '../../../testing/utils'
 import { DropdownMenu } from '..'
+import { renderWithProviders } from '../../../testing/utils'
 
 import type { ComponentProps } from 'react'
 import type { DropdownOption } from '..'