feat(components, app): update Chip component for unification

update Chip component for unification. the details are below

close AUTH-214

Author: koji

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<

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 => (

app/src/atoms/Snackbar/Snackbar.stories.tsx

@@ -7,17 +7,17 @@ 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'
 
 export default {
   title: 'ODD/Atoms/Snackbar',
   component: Snackbar,
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const DefaultTemplate: Story<React.ComponentProps<typeof Snackbar>> = args => {

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'

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 => {

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 => {

app/src/atoms/Toast/ODDToast.stories.tsx

@@ -7,16 +7,16 @@ 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'
 
 export default {
   title: 'ODD/Atoms/Toast',
   component: Toast,
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const Template: Story<React.ComponentProps<typeof Toast>> = args => {

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<

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<

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<