From 563ee5d14e9c5a7a38ff48c9cef363dad4bf9a0f Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Wed, 20 Mar 2024 17:59:13 -0400
Subject: [PATCH] feat(components, app): update Chip component for unification

update Chip component for unification. the details are below

close AUTH-214
---
 .../InlineNotification.stories.tsx            |  4 ++--
 app/src/atoms/ListItem/ListItem.stories.tsx   | 10 +++++++---
 app/src/atoms/Snackbar/Snackbar.stories.tsx   |  4 ++--
 .../CustomKeyboard/CustomKeyboard.stories.tsx |  4 ++--
 .../NormalKeyboard/NormalKeyboard.stories.tsx |  6 +++---
 .../Numpad/Numpad.stories.tsx                 |  4 ++--
 app/src/atoms/Toast/ODDToast.stories.tsx      |  4 ++--
 .../buttons/FloatingActionButton.stories.tsx  |  5 ++---
 app/src/atoms/buttons/LargeButton.stories.tsx |  4 ++--
 .../atoms/buttons/MediumButton.stories.tsx    |  5 ++---
 app/src/atoms/buttons/RadioButton.stories.tsx |  4 ++--
 app/src/atoms/buttons/SmallButton.stories.tsx |  4 ++--
 .../atoms/buttons/TabbedButton.stories.tsx    |  4 ++--
 .../BackgroundOverlay.stories.tsx             |  5 ++---
 .../CardButton/CardButton.stories.tsx         |  5 ++---
 app/src/molecules/Modal/Modal.stories.tsx     |  5 ++---
 .../molecules/Modal/ModalHeader.stories.tsx   |  5 ++---
 .../Modal/SmallModalChildren.stories.tsx      |  4 ++--
 .../ODDBackButton/ODDBackButton.stories.tsx   |  4 ++--
 .../ChildNavigation.stories.tsx               |  4 ++--
 .../AddFixtureModal.stories.tsx               |  4 ++--
 ...nfigurationDiscardChangesModal.stories.tsx |  4 ++--
 ...ckFixtureSetupInstructionModal.stories.tsx |  4 ++--
 .../ProtocolRunRunTimeParameters.tsx          |  1 -
 .../EmergencyStop/EstopPressedModal.tsx       |  2 +-
 .../TouchscreenEstopMissingModal.stories.tsx  |  5 +++--
 .../TouchscreenEstopPressedModal.stories.tsx  |  5 +++--
 .../TerseOffsetTable.stories.tsx              |  6 +++---
 .../RobotDashboard/RecentRunProtocolCard.tsx  |  2 +-
 .../FixtureTable.tsx                          |  2 +-
 .../ModuleTable.tsx                           |  2 +-
 .../ResetValuesModal.stories.tsx              |  5 ++---
 .../NetworkSettings/index.tsx                 | 19 +++++++++----------
 app/src/pages/ProtocolDetails/index.tsx       |  2 +-
 .../src/atoms/Chip/Chip.stories.tsx           | 12 +++++++-----
 .../src/atoms/Chip/__tests__/Chip.test.tsx    |  4 ++--
 {app => components}/src/atoms/Chip/index.tsx  |  2 +-
 components/src/atoms/index.ts                 |  3 ++-
 components/src/ui-style-constants/index.ts    |  3 ++-
 .../src/ui-style-constants/viewport.ts        |  0
 40 files changed, 91 insertions(+), 90 deletions(-)
 rename {app => components}/src/atoms/Chip/Chip.stories.tsx (74%)
 rename {app => components}/src/atoms/Chip/__tests__/Chip.test.tsx (98%)
 rename {app => components}/src/atoms/Chip/index.tsx (98%)
 rename app/src/DesignTokens/constants.ts => components/src/ui-style-constants/viewport.ts (100%)

diff --git a/app/src/atoms/InlineNotification/InlineNotification.stories.tsx b/app/src/atoms/InlineNotification/InlineNotification.stories.tsx
index 313d278c0fa..ec3af22be3e 100644
--- a/app/src/atoms/InlineNotification/InlineNotification.stories.tsx
+++ b/app/src/atoms/InlineNotification/InlineNotification.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { VIEWPORT } from '@opentrons/components'
 import { InlineNotification } from '.'
 import type { Story, Meta } from '@storybook/react'
 
@@ -26,7 +26,7 @@ export default {
       defaultValue: true,
     },
   },
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const Template: Story<
diff --git a/app/src/atoms/ListItem/ListItem.stories.tsx b/app/src/atoms/ListItem/ListItem.stories.tsx
index 28c6d1cca90..c6b55e06d38 100644
--- a/app/src/atoms/ListItem/ListItem.stories.tsx
+++ b/app/src/atoms/ListItem/ListItem.stories.tsx
@@ -1,6 +1,10 @@
 import * as React from 'react'
-import { DIRECTION_COLUMN, Flex, SPACING } from '@opentrons/components'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import {
+  DIRECTION_COLUMN,
+  Flex,
+  SPACING,
+  VIEWPORT,
+} from '@opentrons/components'
 import { StyledText } from '../text'
 import { ListItem } from '.'
 import type { Story, Meta } from '@storybook/react'
@@ -15,7 +19,7 @@ export default {
       },
     },
   },
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const ListItemTemplate: Story<React.ComponentProps<typeof ListItem>> = args => (
diff --git a/app/src/atoms/Snackbar/Snackbar.stories.tsx b/app/src/atoms/Snackbar/Snackbar.stories.tsx
index f1bbb35048a..55581813ab4 100644
--- a/app/src/atoms/Snackbar/Snackbar.stories.tsx
+++ b/app/src/atoms/Snackbar/Snackbar.stories.tsx
@@ -7,9 +7,9 @@ import {
   JUSTIFY_CENTER,
   PrimaryButton,
   SPACING,
+  VIEWPORT,
 } from '@opentrons/components'
 import { StyledText } from '../text'
-import { touchScreenViewport } from '../../DesignTokens/constants'
 
 import { Snackbar } from './index'
 import type { Story, Meta } from '@storybook/react'
@@ -17,7 +17,7 @@ import type { Story, Meta } from '@storybook/react'
 export default {
   title: 'ODD/Atoms/Snackbar',
   component: Snackbar,
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const DefaultTemplate: Story<React.ComponentProps<typeof Snackbar>> = args => {
diff --git a/app/src/atoms/SoftwareKeyboard/CustomKeyboard/CustomKeyboard.stories.tsx b/app/src/atoms/SoftwareKeyboard/CustomKeyboard/CustomKeyboard.stories.tsx
index e298911ee0f..97def6fe114 100644
--- a/app/src/atoms/SoftwareKeyboard/CustomKeyboard/CustomKeyboard.stories.tsx
+++ b/app/src/atoms/SoftwareKeyboard/CustomKeyboard/CustomKeyboard.stories.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react'
 import {
-  Flex,
   DIRECTION_COLUMN,
+  Flex,
   POSITION_ABSOLUTE,
   SPACING,
+  VIEWPORT,
 } from '@opentrons/components'
-import { touchScreenViewport } from '../../../DesignTokens/constants'
 import { InputField } from '../../InputField'
 import { CustomKeyboard } from './'
 import '../index.css'
diff --git a/app/src/atoms/SoftwareKeyboard/NormalKeyboard/NormalKeyboard.stories.tsx b/app/src/atoms/SoftwareKeyboard/NormalKeyboard/NormalKeyboard.stories.tsx
index c245ca23be9..7883d6fbdd0 100644
--- a/app/src/atoms/SoftwareKeyboard/NormalKeyboard/NormalKeyboard.stories.tsx
+++ b/app/src/atoms/SoftwareKeyboard/NormalKeyboard/NormalKeyboard.stories.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react'
 import {
-  Flex,
   DIRECTION_COLUMN,
+  Flex,
   POSITION_ABSOLUTE,
   SPACING,
+  VIEWPORT,
 } from '@opentrons/components'
-import { touchScreenViewport } from '../../../DesignTokens/constants'
 import { InputField } from '../../InputField'
 import { NormalKeyboard } from '.'
 
@@ -17,7 +17,7 @@ import type { Story, Meta } from '@storybook/react'
 export default {
   title: 'ODD/Atoms/SoftwareKeyboard/NormalKeyboard',
   component: NormalKeyboard,
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const Template: Story<React.ComponentProps<typeof NormalKeyboard>> = args => {
diff --git a/app/src/atoms/SoftwareKeyboard/Numpad/Numpad.stories.tsx b/app/src/atoms/SoftwareKeyboard/Numpad/Numpad.stories.tsx
index f87ca54481b..d5a569cd284 100644
--- a/app/src/atoms/SoftwareKeyboard/Numpad/Numpad.stories.tsx
+++ b/app/src/atoms/SoftwareKeyboard/Numpad/Numpad.stories.tsx
@@ -4,8 +4,8 @@ import {
   DIRECTION_COLUMN,
   POSITION_ABSOLUTE,
   SPACING,
+  VIEWPORT,
 } from '@opentrons/components'
-import { touchScreenViewport } from '../../../DesignTokens/constants'
 import { InputField } from '../../InputField'
 import { Numpad } from './'
 import '../index.css'
@@ -16,7 +16,7 @@ import type { Story, Meta } from '@storybook/react'
 export default {
   title: 'ODD/Atoms/SoftwareKeyboard/Numpad',
   component: Numpad,
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const Template: Story<React.ComponentProps<typeof Numpad>> = args => {
diff --git a/app/src/atoms/Toast/ODDToast.stories.tsx b/app/src/atoms/Toast/ODDToast.stories.tsx
index 2f0e72fb0b7..958b115ac16 100644
--- a/app/src/atoms/Toast/ODDToast.stories.tsx
+++ b/app/src/atoms/Toast/ODDToast.stories.tsx
@@ -7,8 +7,8 @@ import {
   POSITION_FIXED,
   PrimaryButton,
   SPACING,
+  VIEWPORT,
 } from '@opentrons/components'
-import { touchScreenViewport } from '../../DesignTokens/constants'
 import { StyledText } from '../text'
 import { Toast } from '.'
 import type { Story, Meta } from '@storybook/react'
@@ -16,7 +16,7 @@ import type { Story, Meta } from '@storybook/react'
 export default {
   title: 'ODD/Atoms/Toast',
   component: Toast,
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const Template: Story<React.ComponentProps<typeof Toast>> = args => {
diff --git a/app/src/atoms/buttons/FloatingActionButton.stories.tsx b/app/src/atoms/buttons/FloatingActionButton.stories.tsx
index 820f1ec9618..a7526805a20 100644
--- a/app/src/atoms/buttons/FloatingActionButton.stories.tsx
+++ b/app/src/atoms/buttons/FloatingActionButton.stories.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react'
-import { ICON_DATA_BY_NAME } from '@opentrons/components'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { ICON_DATA_BY_NAME, VIEWPORT } from '@opentrons/components'
 import { FloatingActionButton } from './'
 
 import type { Story, Meta } from '@storybook/react'
@@ -17,7 +16,7 @@ export default {
     },
     onClick: { action: 'clicked' },
   },
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const FloatingActionButtonTemplate: Story<
diff --git a/app/src/atoms/buttons/LargeButton.stories.tsx b/app/src/atoms/buttons/LargeButton.stories.tsx
index 737dada7656..f1f9427a4cf 100644
--- a/app/src/atoms/buttons/LargeButton.stories.tsx
+++ b/app/src/atoms/buttons/LargeButton.stories.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { VIEWPORT } from '@opentrons/components'
 import { LargeButton } from './'
 import type { Story, Meta } from '@storybook/react'
 
 export default {
   title: 'ODD/Atoms/Buttons/LargeButton',
   argTypes: { onClick: { action: 'clicked' } },
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const LargeButtonTemplate: Story<
diff --git a/app/src/atoms/buttons/MediumButton.stories.tsx b/app/src/atoms/buttons/MediumButton.stories.tsx
index 17d67f76093..667947b7e08 100644
--- a/app/src/atoms/buttons/MediumButton.stories.tsx
+++ b/app/src/atoms/buttons/MediumButton.stories.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react'
-import { ICON_DATA_BY_NAME } from '@opentrons/components'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { ICON_DATA_BY_NAME, VIEWPORT } from '@opentrons/components'
 import { MediumButton } from './'
 import type { Story, Meta } from '@storybook/react'
 
@@ -29,7 +28,7 @@ export default {
       defaultValue: undefined,
     },
   },
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const MediumButtonTemplate: Story<
diff --git a/app/src/atoms/buttons/RadioButton.stories.tsx b/app/src/atoms/buttons/RadioButton.stories.tsx
index 7bb570ffae9..3869cb70cc7 100644
--- a/app/src/atoms/buttons/RadioButton.stories.tsx
+++ b/app/src/atoms/buttons/RadioButton.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { VIEWPORT } from '@opentrons/components'
 
 import { RadioButton } from './'
 import type { Story, Meta } from '@storybook/react'
@@ -16,7 +16,7 @@ export default {
     },
     onClick: { action: 'clicked' },
   },
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const RadioButtonTemplate: Story<
diff --git a/app/src/atoms/buttons/SmallButton.stories.tsx b/app/src/atoms/buttons/SmallButton.stories.tsx
index cb1263f8a6c..f587f7f4e13 100644
--- a/app/src/atoms/buttons/SmallButton.stories.tsx
+++ b/app/src/atoms/buttons/SmallButton.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { VIEWPORT } from '@opentrons/components'
 import { SmallButton } from './'
 
 import type { Story, Meta } from '@storybook/react'
@@ -8,7 +8,7 @@ export default {
   title: 'ODD/Atoms/Buttons/SmallButton',
   argTypes: { onClick: { action: 'clicked' } },
   component: SmallButton,
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const Template: Story<React.ComponentProps<typeof SmallButton>> = args => (
diff --git a/app/src/atoms/buttons/TabbedButton.stories.tsx b/app/src/atoms/buttons/TabbedButton.stories.tsx
index 27efbc36a87..60c5131da3b 100644
--- a/app/src/atoms/buttons/TabbedButton.stories.tsx
+++ b/app/src/atoms/buttons/TabbedButton.stories.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { VIEWPORT } from '@opentrons/components'
 import { TabbedButton } from './'
 import type { Story, Meta } from '@storybook/react'
 
 export default {
   title: 'ODD/Atoms/Buttons/TabbedButton',
   argTypes: { onClick: { action: 'clicked' } },
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const TabbedButtonTemplate: Story<
diff --git a/app/src/molecules/BackgroundOverlay/BackgroundOverlay.stories.tsx b/app/src/molecules/BackgroundOverlay/BackgroundOverlay.stories.tsx
index e0b8c9bee1c..c021f25a47e 100644
--- a/app/src/molecules/BackgroundOverlay/BackgroundOverlay.stories.tsx
+++ b/app/src/molecules/BackgroundOverlay/BackgroundOverlay.stories.tsx
@@ -1,13 +1,12 @@
 import * as React from 'react'
-import { Flex, PrimaryButton } from '@opentrons/components'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { Flex, PrimaryButton, VIEWPORT } from '@opentrons/components'
 import { StyledText } from '../../atoms/text'
 import { BackgroundOverlay } from './index'
 import type { Story, Meta } from '@storybook/react'
 
 export default {
   title: 'ODD/Molecules/BackgroundOverlay',
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const Template: Story<
diff --git a/app/src/molecules/CardButton/CardButton.stories.tsx b/app/src/molecules/CardButton/CardButton.stories.tsx
index 38ce4a0f609..3ac71a8e3bf 100644
--- a/app/src/molecules/CardButton/CardButton.stories.tsx
+++ b/app/src/molecules/CardButton/CardButton.stories.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
-import { Flex, SPACING } from '@opentrons/components'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { Flex, SPACING, VIEWPORT } from '@opentrons/components'
 import { GlobalStyle } from '../../atoms/GlobalStyle'
 import { CardButton } from '.'
 
@@ -10,7 +9,7 @@ import type { Story, Meta } from '@storybook/react'
 export default {
   title: 'ODD/Molecules/CardButton',
   component: CardButton,
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
   decorators: [
     Story => (
       <>
diff --git a/app/src/molecules/Modal/Modal.stories.tsx b/app/src/molecules/Modal/Modal.stories.tsx
index e29a6197224..09456d77828 100644
--- a/app/src/molecules/Modal/Modal.stories.tsx
+++ b/app/src/molecules/Modal/Modal.stories.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react'
-import { COLORS, Flex, BORDERS, SPACING } from '@opentrons/components'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { COLORS, Flex, BORDERS, SPACING, VIEWPORT } from '@opentrons/components'
 import { Modal } from './Modal'
 import type { Story, Meta } from '@storybook/react'
 
@@ -13,7 +12,7 @@ export default {
     },
     onOutsideClick: { action: 'clicked' },
   },
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const Template: Story<React.ComponentProps<typeof Modal>> = args => (
diff --git a/app/src/molecules/Modal/ModalHeader.stories.tsx b/app/src/molecules/Modal/ModalHeader.stories.tsx
index 0beabe6ba1b..92e9c83f9b4 100644
--- a/app/src/molecules/Modal/ModalHeader.stories.tsx
+++ b/app/src/molecules/Modal/ModalHeader.stories.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react'
-import { COLORS } from '@opentrons/components'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { COLORS, VIEWPORT } from '@opentrons/components'
 import { ModalHeader } from './ModalHeader'
 import type { Story, Meta } from '@storybook/react'
 
@@ -24,7 +23,7 @@ export default {
     },
     onClick: { action: 'clicked' },
   },
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const Template: Story<React.ComponentProps<typeof ModalHeader>> = args => (
diff --git a/app/src/molecules/Modal/SmallModalChildren.stories.tsx b/app/src/molecules/Modal/SmallModalChildren.stories.tsx
index cdea430b18f..c1889ca718e 100644
--- a/app/src/molecules/Modal/SmallModalChildren.stories.tsx
+++ b/app/src/molecules/Modal/SmallModalChildren.stories.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { VIEWPORT } from '@opentrons/components'
 import { SmallModalChildren } from './SmallModalChildren'
 import type { Story, Meta } from '@storybook/react'
 
 export default {
   title: 'ODD/Molecules/Modals/SmallModalChildren',
   argTypes: { onClick: { action: 'clicked' } },
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const Template: Story<
diff --git a/app/src/molecules/ODDBackButton/ODDBackButton.stories.tsx b/app/src/molecules/ODDBackButton/ODDBackButton.stories.tsx
index 14a0d050ba5..6fad4d7ae4a 100644
--- a/app/src/molecules/ODDBackButton/ODDBackButton.stories.tsx
+++ b/app/src/molecules/ODDBackButton/ODDBackButton.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { VIEWPORT } from '@opentrons/components'
 import { ODDBackButton } from '.'
 import type { Story, Meta } from '@storybook/react'
 
@@ -8,7 +8,7 @@ export default {
   argTypes: {
     onClick: { action: 'clicked' },
   },
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const ODDBackButtonTemplate: Story<
diff --git a/app/src/organisms/ChildNavigation/ChildNavigation.stories.tsx b/app/src/organisms/ChildNavigation/ChildNavigation.stories.tsx
index c39b4b20dc1..da15b3af90e 100644
--- a/app/src/organisms/ChildNavigation/ChildNavigation.stories.tsx
+++ b/app/src/organisms/ChildNavigation/ChildNavigation.stories.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { VIEWPORT } from '@opentrons/components'
 import { SmallButton } from '../../atoms/buttons'
 import { ChildNavigation } from '.'
 import type { Story, Meta } from '@storybook/react'
 
 export default {
   title: 'ODD/Organisms/ChildNavigation',
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const Template: Story<React.ComponentProps<typeof ChildNavigation>> = args => (
diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.stories.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.stories.tsx
index cc5ddd4f4e7..034a18c1e77 100644
--- a/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.stories.tsx
+++ b/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { QueryClient, QueryClientProvider } from 'react-query'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { VIEWPORT } from '@opentrons/components'
 import { AddFixtureModal } from './AddFixtureModal'
 import type { Story, Meta } from '@storybook/react'
 
@@ -13,7 +13,7 @@ export default {
     },
     onOutsideClick: { action: 'clicked' },
   },
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const queryClient = new QueryClient()
diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/DeckConfigurationDiscardChangesModal.stories.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/DeckConfigurationDiscardChangesModal.stories.tsx
index d6b26521619..0fdee52a94e 100644
--- a/app/src/organisms/DeviceDetailsDeckConfiguration/DeckConfigurationDiscardChangesModal.stories.tsx
+++ b/app/src/organisms/DeviceDetailsDeckConfiguration/DeckConfigurationDiscardChangesModal.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { VIEWPORT } from '@opentrons/components'
 import { DeckConfigurationDiscardChangesModal } from './DeckConfigurationDiscardChangesModal'
 import type { Story, Meta } from '@storybook/react'
 
@@ -12,7 +12,7 @@ export default {
     },
     onOutsideClick: { action: 'clicked' },
   },
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const Template: Story<
diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/TouchScreenDeckFixtureSetupInstructionModal.stories.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/TouchScreenDeckFixtureSetupInstructionModal.stories.tsx
index 5fcc8d339a9..ec078d74eea 100644
--- a/app/src/organisms/DeviceDetailsDeckConfiguration/TouchScreenDeckFixtureSetupInstructionModal.stories.tsx
+++ b/app/src/organisms/DeviceDetailsDeckConfiguration/TouchScreenDeckFixtureSetupInstructionModal.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { VIEWPORT } from '@opentrons/components'
 import { DeckFixtureSetupInstructionsModal } from './DeckFixtureSetupInstructionsModal'
 import type { Story, Meta } from '@storybook/react'
 
@@ -12,7 +12,7 @@ export default {
     },
     onOutsideClick: { action: 'clicked' },
   },
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const Template: Story<
diff --git a/app/src/organisms/Devices/ProtocolRun/ProtocolRunRunTimeParameters.tsx b/app/src/organisms/Devices/ProtocolRun/ProtocolRunRunTimeParameters.tsx
index cb7766e9976..eae028f23eb 100644
--- a/app/src/organisms/Devices/ProtocolRun/ProtocolRunRunTimeParameters.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/ProtocolRunRunTimeParameters.tsx
@@ -16,7 +16,6 @@ import {
 import { StyledText } from '../../../atoms/text'
 import { Banner } from '../../../atoms/Banner'
 import { Divider } from '../../../atoms/structure'
-// import { Chip } from '../../../atoms/Chip'
 import { NoParameter } from '../../ProtocolDetails/ProtocolParameters/NoParameter'
 import { useMostRecentCompletedAnalysis } from '../../LabwarePositionCheck/useMostRecentCompletedAnalysis'
 
diff --git a/app/src/organisms/EmergencyStop/EstopPressedModal.tsx b/app/src/organisms/EmergencyStop/EstopPressedModal.tsx
index 3773a58bac8..6f5d31209a1 100644
--- a/app/src/organisms/EmergencyStop/EstopPressedModal.tsx
+++ b/app/src/organisms/EmergencyStop/EstopPressedModal.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 import {
   ALIGN_CENTER,
   BORDERS,
+  Chip,
   COLORS,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
@@ -21,7 +22,6 @@ import { useAcknowledgeEstopDisengageMutation } from '@opentrons/react-api-clien
 
 import { getTopPortalEl } from '../../App/portal'
 import { Banner } from '../../atoms/Banner'
-import { Chip } from '../../atoms/Chip'
 import { ListItem } from '../../atoms/ListItem'
 import { SmallButton } from '../../atoms/buttons'
 import { StyledText } from '../../atoms/text'
diff --git a/app/src/organisms/EmergencyStop/TouchscreenEstopMissingModal.stories.tsx b/app/src/organisms/EmergencyStop/TouchscreenEstopMissingModal.stories.tsx
index 0dd2f63e1d3..f2bb0cf2e7f 100644
--- a/app/src/organisms/EmergencyStop/TouchscreenEstopMissingModal.stories.tsx
+++ b/app/src/organisms/EmergencyStop/TouchscreenEstopMissingModal.stories.tsx
@@ -2,7 +2,8 @@ import * as React from 'react'
 import { Provider } from 'react-redux'
 import { createStore } from 'redux'
 
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { VIEWPORT } from '@opentrons/components'
+
 import { configReducer } from '../../redux/config/reducer'
 import { EstopMissingModal } from '.'
 
@@ -12,7 +13,7 @@ import type { Story, Meta } from '@storybook/react'
 export default {
   title: 'ODD/Organisms/EstopMissingModal',
   component: EstopMissingModal,
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const dummyConfig = {
diff --git a/app/src/organisms/EmergencyStop/TouchscreenEstopPressedModal.stories.tsx b/app/src/organisms/EmergencyStop/TouchscreenEstopPressedModal.stories.tsx
index c2dcf554f65..7ea8618203d 100644
--- a/app/src/organisms/EmergencyStop/TouchscreenEstopPressedModal.stories.tsx
+++ b/app/src/organisms/EmergencyStop/TouchscreenEstopPressedModal.stories.tsx
@@ -3,7 +3,8 @@ import { Provider } from 'react-redux'
 import { createStore } from 'redux'
 import { QueryClient, QueryClientProvider } from 'react-query'
 
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { VIEWPORT } from '@opentrons/components'
+
 import { configReducer } from '../../redux/config/reducer'
 import { EstopPressedModal } from '.'
 
@@ -13,7 +14,7 @@ import type { Story, Meta } from '@storybook/react'
 export default {
   title: 'ODD/Organisms/EstopPressedModal',
   component: EstopPressedModal,
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const dummyConfig = {
diff --git a/app/src/organisms/LabwarePositionCheck/TerseOffsetTable.stories.tsx b/app/src/organisms/LabwarePositionCheck/TerseOffsetTable.stories.tsx
index 2077ce88598..8acb76eee45 100644
--- a/app/src/organisms/LabwarePositionCheck/TerseOffsetTable.stories.tsx
+++ b/app/src/organisms/LabwarePositionCheck/TerseOffsetTable.stories.tsx
@@ -5,24 +5,24 @@ import {
   Flex,
   JUSTIFY_SPACE_BETWEEN,
   SPACING,
+  VIEWPORT,
 } from '@opentrons/components'
 import {
   fixture12Trough,
   fixtureTiprack10ul,
-  LabwareDefinition2,
   getLabwareDefURI,
 } from '@opentrons/shared-data'
 
-import { touchScreenViewport } from '../../DesignTokens/constants'
 import { SmallButton } from '../../atoms/buttons'
 import { TerseOffsetTable } from './ResultsSummary'
 
 import type { Story, Meta } from '@storybook/react'
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
 
 export default {
   title: 'ODD/Organisms/TerseOffsetTable',
   component: TerseOffsetTable,
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 // Note: 59rem(944px) is the size of ODD
diff --git a/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx b/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx
index 083a1b6d121..0fb424be5c4 100644
--- a/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx
+++ b/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx
@@ -7,6 +7,7 @@ import { formatDistance } from 'date-fns'
 import {
   BORDERS,
   COLORS,
+  Chip,
   DIRECTION_COLUMN,
   Flex,
   Icon,
@@ -26,7 +27,6 @@ import {
 } from '@opentrons/api-client'
 
 import { StyledText } from '../../../atoms/text'
-import { Chip } from '../../../atoms/Chip'
 import { ODD_FOCUS_VISIBLE } from '../../../atoms/buttons//constants'
 import { useTrackEvent } from '../../../redux/analytics'
 import { Skeleton } from '../../../atoms/Skeleton'
diff --git a/app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx
index 8a8435ea788..c9d7324c19d 100644
--- a/app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx
+++ b/app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx
@@ -4,6 +4,7 @@ import {
   ALIGN_CENTER,
   BORDERS,
   COLORS,
+  Chip,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
   Flex,
@@ -20,7 +21,6 @@ import {
 } from '@opentrons/shared-data'
 
 import { SmallButton } from '../../atoms/buttons'
-import { Chip } from '../../atoms/Chip'
 import { StyledText } from '../../atoms/text'
 import { useDeckConfigurationCompatibility } from '../../resources/deck_configuration/hooks'
 import { getRequiredDeckConfig } from '../../resources/deck_configuration/utils'
diff --git a/app/src/organisms/ProtocolSetupModulesAndDeck/ModuleTable.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/ModuleTable.tsx
index ae7d75206b0..3161a6b83c4 100644
--- a/app/src/organisms/ProtocolSetupModulesAndDeck/ModuleTable.tsx
+++ b/app/src/organisms/ProtocolSetupModulesAndDeck/ModuleTable.tsx
@@ -6,6 +6,7 @@ import {
   ALIGN_CENTER,
   BORDERS,
   COLORS,
+  Chip,
   DIRECTION_COLUMN,
   Flex,
   Icon,
@@ -28,7 +29,6 @@ import {
 } from '@opentrons/shared-data'
 
 import { SmallButton } from '../../atoms/buttons'
-import { Chip } from '../../atoms/Chip'
 import { StyledText } from '../../atoms/text'
 import { getModulePrepCommands } from '../../organisms/Devices/getModulePrepCommands'
 import { getModuleTooHot } from '../../organisms/Devices/getModuleTooHot'
diff --git a/app/src/organisms/ProtocolSetupParameters/ResetValuesModal.stories.tsx b/app/src/organisms/ProtocolSetupParameters/ResetValuesModal.stories.tsx
index ae7454efc47..975d8104a26 100644
--- a/app/src/organisms/ProtocolSetupParameters/ResetValuesModal.stories.tsx
+++ b/app/src/organisms/ProtocolSetupParameters/ResetValuesModal.stories.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react'
-
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { VIEWPORT } from '@opentrons/components'
 import { ResetValuesModal } from './ResetValuesModal'
 
 import type { Story, Meta } from '@storybook/react'
@@ -8,7 +7,7 @@ import type { Story, Meta } from '@storybook/react'
 export default {
   title: 'ODD/Organisms/ResetValuesModal',
   component: ResetValuesModal,
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const Template: Story<React.ComponentProps<typeof ResetValuesModal>> = args => (
diff --git a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/index.tsx b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/index.tsx
index 3aadf02256d..43ec7b44d58 100644
--- a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/index.tsx
+++ b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/index.tsx
@@ -3,25 +3,24 @@ import { css } from 'styled-components'
 import { useTranslation } from 'react-i18next'
 
 import {
-  Flex,
-  SPACING,
-  COLORS,
-  Icon,
+  ALIGN_CENTER,
+  BORDERS,
   Btn,
-  DIRECTION_ROW,
+  Chip,
+  COLORS,
   DIRECTION_COLUMN,
-  ALIGN_CENTER,
+  DIRECTION_ROW,
+  Flex,
+  Icon,
+  SPACING,
   TYPOGRAPHY,
-  BORDERS,
 } from '@opentrons/components'
 
 import { StyledText } from '../../../atoms/text'
-import { Chip } from '../../../atoms/Chip'
 import { ChildNavigation } from '../../../organisms/ChildNavigation'
 
-import type { IconName } from '@opentrons/components'
+import type { IconName, ChipType } from '@opentrons/components'
 import type { NetworkConnection } from '../../../resources/networking/hooks/useNetworkConnection'
-import type { ChipType } from '../../../atoms/Chip'
 import type { SetSettingOption } from '../../../pages/RobotSettingsDashboard'
 
 export type ConnectionType = 'wifi' | 'ethernet' | 'usb'
diff --git a/app/src/pages/ProtocolDetails/index.tsx b/app/src/pages/ProtocolDetails/index.tsx
index 35fe96061ed..a5556a88bec 100644
--- a/app/src/pages/ProtocolDetails/index.tsx
+++ b/app/src/pages/ProtocolDetails/index.tsx
@@ -9,6 +9,7 @@ import {
   ALIGN_CENTER,
   BORDERS,
   Btn,
+  Chip,
   COLORS,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
@@ -30,7 +31,6 @@ import {
 } from '@opentrons/react-api-client'
 import { MAXIMUM_PINNED_PROTOCOLS } from '../../App/constants'
 import { MediumButton, SmallButton, TabbedButton } from '../../atoms/buttons'
-import { Chip } from '../../atoms/Chip'
 import { StyledText } from '../../atoms/text'
 import {
   ProtocolDetailsHeaderChipSkeleton,
diff --git a/app/src/atoms/Chip/Chip.stories.tsx b/components/src/atoms/Chip/Chip.stories.tsx
similarity index 74%
rename from app/src/atoms/Chip/Chip.stories.tsx
rename to components/src/atoms/Chip/Chip.stories.tsx
index 3909f479d49..24fbe08d2bf 100644
--- a/app/src/atoms/Chip/Chip.stories.tsx
+++ b/components/src/atoms/Chip/Chip.stories.tsx
@@ -1,11 +1,13 @@
 import * as React from 'react'
-import { Flex, COLORS, SPACING } from '@opentrons/components'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+
+import { Flex } from '../../primitives'
+import { COLORS } from '../../helix-design-system'
+import { SPACING, VIEWPORT } from '../../ui-style-constants'
 import { Chip } from '.'
 import type { Story, Meta } from '@storybook/react'
 
 export default {
-  title: 'ODD/Atoms/Chip',
+  title: 'Library/Atoms/Chip',
   argTypes: {
     type: {
       options: ['basic', 'error', 'info', 'neutral', 'success', 'warning'],
@@ -16,7 +18,7 @@ export default {
     },
   },
   component: Chip,
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 interface ChipStorybookProps extends React.ComponentProps<typeof Chip> {
@@ -27,7 +29,7 @@ interface ChipStorybookProps extends React.ComponentProps<typeof Chip> {
 const Template: Story<ChipStorybookProps> = ({ ...args }) => (
   <Flex
     padding={SPACING.spacing16}
-    backgroundColor={COLORS.grey50}
+    backgroundColor={COLORS.white}
     width="59rem"
   >
     <Chip {...args} />
diff --git a/app/src/atoms/Chip/__tests__/Chip.test.tsx b/components/src/atoms/Chip/__tests__/Chip.test.tsx
similarity index 98%
rename from app/src/atoms/Chip/__tests__/Chip.test.tsx
rename to components/src/atoms/Chip/__tests__/Chip.test.tsx
index d0115028b90..8cd67065771 100644
--- a/app/src/atoms/Chip/__tests__/Chip.test.tsx
+++ b/components/src/atoms/Chip/__tests__/Chip.test.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react'
 import { describe, it, expect } from 'vitest'
 import { screen } from '@testing-library/react'
-import { BORDERS, COLORS } from '@opentrons/components'
-import { renderWithProviders } from '../../../__testing-utils__'
+import { BORDERS, COLORS } from '../../../helix-design-system'
+import { renderWithProviders } from '../../../testing/utils'
 import { Chip } from '..'
 
 const render = (props: React.ComponentProps<typeof Chip>) => {
diff --git a/app/src/atoms/Chip/index.tsx b/components/src/atoms/Chip/index.tsx
similarity index 98%
rename from app/src/atoms/Chip/index.tsx
rename to components/src/atoms/Chip/index.tsx
index 3e7a12741a2..2a68a2689e5 100644
--- a/app/src/atoms/Chip/index.tsx
+++ b/components/src/atoms/Chip/index.tsx
@@ -11,7 +11,7 @@ import {
   COLORS,
 } from '@opentrons/components'
 
-import { StyledText } from '../text'
+import { StyledText } from '../../../../app/src/atoms/text'
 
 import type { IconName, StyleProps } from '@opentrons/components'
 
diff --git a/components/src/atoms/index.ts b/components/src/atoms/index.ts
index 7fd589ac7bb..e6abccf579e 100644
--- a/components/src/atoms/index.ts
+++ b/components/src/atoms/index.ts
@@ -1,3 +1,4 @@
+export * from './buttons'
 export * from './CheckboxField'
+export * from './Chip'
 export * from './StepMeter'
-export * from './buttons'
diff --git a/components/src/ui-style-constants/index.ts b/components/src/ui-style-constants/index.ts
index 21a599f031c..e61234d0e96 100644
--- a/components/src/ui-style-constants/index.ts
+++ b/components/src/ui-style-constants/index.ts
@@ -1,3 +1,4 @@
 export * as RESPONSIVENESS from './responsiveness'
-export * as TYPOGRAPHY from './typography'
 export * as SPACING from './spacing'
+export * as TYPOGRAPHY from './typography'
+export * as VIEWPORT from './viewport'
diff --git a/app/src/DesignTokens/constants.ts b/components/src/ui-style-constants/viewport.ts
similarity index 100%
rename from app/src/DesignTokens/constants.ts
rename to components/src/ui-style-constants/viewport.ts