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

package/src/atoms/Chip/__tests__/Chip.test.tsx

@@ -1,9 +1,10 @@
-import { describe, it, expect, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { Chip } from '..'
 import { BORDERS, COLORS } from '../../../helix-design-system'
-import { SPACING } from '../../../ui-style-constants'
 import { renderWithProviders } from '../../../testing/utils'
-import { Chip } from '..'
+import { SPACING } from '../../../ui-style-constants'
 
 import type { ComponentProps } from 'react'
 
@@ -212,6 +213,24 @@ describe('Chip Touchscreen', () => {
   //   const icon = screen.getByLabelText('icon_mockInfo')
   //   expect(icon).toHaveStyle(`width: 1.25rem`)
   // })
+  it('renders a pulsing icon when pulseIcon is true', () => {
+    props = { text: 'mockPulse', type: 'info', pulseIcon: true }
+    render(props)
+    const animate = screen.getByTestId('Chip_info_icon_animate')
+    expect(animate).toHaveAttribute('attributeName', 'fill')
+    expect(animate).toHaveAttribute('values', `${COLORS.blue60}; transparent`)
+    expect(animate).toHaveAttribute('dur', '1s')
+    expect(animate).toHaveAttribute('calcMode', 'discrete')
+    expect(animate).toHaveAttribute('repeatCount', 'indefinite')
+  })
+
+  it('does not render a pulsing icon when pulseIcon is false', () => {
+    props = { text: 'mockNoPulse', type: 'info', pulseIcon: false }
+    render(props)
+    expect(
+      screen.queryByTestId('Chip_info_icon_animate')
+    ).not.toBeInTheDocument()
+  })
 })
 
 describe('Chip Web', () => {
@@ -427,4 +446,23 @@ describe('Chip Web', () => {
     const icon = screen.getByLabelText('icon_mockInfo')
     expect(icon).toHaveStyle(`width: 0.75rem`)
   })
+
+  it('renders a pulsing icon when pulseIcon is true', () => {
+    props = { text: 'mockPulse', type: 'success', pulseIcon: true }
+    render(props)
+    const animate = screen.getByTestId('Chip_success_icon_animate')
+    expect(animate).toHaveAttribute('attributeName', 'fill')
+    expect(animate).toHaveAttribute('values', `${COLORS.green60}; transparent`)
+    expect(animate).toHaveAttribute('dur', '1s')
+    expect(animate).toHaveAttribute('calcMode', 'discrete')
+    expect(animate).toHaveAttribute('repeatCount', 'indefinite')
+  })
+
+  it('does not render a pulsing icon when pulseIcon is false', () => {
+    props = { text: 'mockNoPulse', type: 'success', pulseIcon: false }
+    render(props)
+    expect(
+      screen.queryByTestId('Chip_success_icon_animate')
+    ).not.toBeInTheDocument()
+  })
 })

package/src/atoms/Chip/index.tsx

@@ -1,11 +1,13 @@
 import { css } from 'styled-components'
+
 import { BORDERS, COLORS } from '../../helix-design-system'
+import { Icon } from '../../icons'
 import { Flex } from '../../primitives'
-import { LegacyStyledText } from '../StyledText'
 import { ALIGN_CENTER, DIRECTION_ROW, FLEX_MAX_CONTENT } from '../../styles'
 import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-import { Icon } from '../../icons'
+import { LegacyStyledText } from '../StyledText'
 
+import type { FlattenSimpleInterpolation } from 'styled-components'
 import type { IconName } from '../../icons'
 import type { StyleProps } from '../../primitives'
 
@@ -26,6 +28,8 @@ interface ChipProps extends StyleProps {
   hasIcon?: boolean
   /** Chip size medium is the default size */
   chipSize?: ChipSize
+  /** icon should pulse */
+  pulseIcon?: boolean
 }
 
 const CHIP_PROPS_BY_TYPE: Record<
@@ -79,6 +83,7 @@ export function Chip(props: ChipProps): JSX.Element {
     text,
     hasIcon = true,
     chipSize = 'medium',
+    pulseIcon = false,
     ...styleProps
   } = props
   const backgroundColor =
@@ -86,48 +91,9 @@ export function Chip(props: ChipProps): JSX.Element {
       ? COLORS.transparent
       : CHIP_PROPS_BY_TYPE[type].backgroundColor
   const icon = iconName ?? CHIP_PROPS_BY_TYPE[type].iconName ?? 'ot-alert'
+  const iconColor = CHIP_PROPS_BY_TYPE[type].iconColor
 
-  const MEDIUM_CONTAINER_STYLE = css`
-    padding: ${SPACING.spacing2} ${background === false ? 0 : SPACING.spacing8};
-    grid-gap: ${SPACING.spacing4};
-
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      padding: ${SPACING.spacing8}
-        ${background === false ? 0 : SPACING.spacing16};
-      grid-gap: ${SPACING.spacing8};
-    }
-  `
-
-  const SMALL_CONTAINER_STYLE = css`
-    padding: ${SPACING.spacing4} ${background === false ? 0 : SPACING.spacing6};
-    grid-gap: ${SPACING.spacing4};
-
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      padding: ${SPACING.spacing4}
-        ${background === false ? 0 : SPACING.spacing8};
-      grid-gap: ${SPACING.spacing4};
-    }
-  `
-
-  const ICON_STYLE = css`
-    width: ${chipSize === 'medium' ? '1rem' : '0.75rem'};
-    height: ${chipSize === 'medium' ? '1rem' : '0.75rem'};
-
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      width: ${chipSize === 'medium' ? '1.5rem' : '1.25rem'};
-      height: ${chipSize === 'medium' ? '1.5rem' : '1.25rem'};
-    }
-  `
-
-  const TEXT_STYLE = css`
-    ${chipSize === 'medium' ? WEB_MEDIUM_TEXT_STYLE : WEB_SMALL_TEXT_STYLE}
-
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      ${chipSize === 'medium'
-        ? TYPOGRAPHY.bodyTextSemiBold
-        : TYPOGRAPHY.smallBodyTextSemiBold}
-    }
-  `
+  const smallSize = iconName === 'connection-status' ? '0.5rem' : '0.75rem'
 
   return (
     <Flex
@@ -137,7 +103,9 @@ export function Chip(props: ChipProps): JSX.Element {
       flexDirection={DIRECTION_ROW}
       height={FLEX_MAX_CONTENT}
       css={
-        chipSize === 'medium' ? MEDIUM_CONTAINER_STYLE : SMALL_CONTAINER_STYLE
+        chipSize === 'medium'
+          ? MEDIUM_CONTAINER_STYLE(background)
+          : SMALL_CONTAINER_STYLE(background)
       }
       data-testid={`Chip_${type}`}
       {...styleProps}
@@ -145,13 +113,24 @@ export function Chip(props: ChipProps): JSX.Element {
       {hasIcon ? (
         <Icon
           name={icon}
-          color={CHIP_PROPS_BY_TYPE[type].iconColor}
+          color={iconColor}
           aria-label={`icon_${text}`}
-          css={ICON_STYLE}
-        />
+          css={ICON_STYLE(chipSize, smallSize)}
+        >
+          {pulseIcon ? (
+            <animate
+              attributeName="fill"
+              values={`${iconColor}; transparent`}
+              dur="1s"
+              calcMode="discrete"
+              repeatCount="indefinite"
+              data-testid={`Chip_${type}_icon_animate`}
+            />
+          ) : null}
+        </Icon>
       ) : null}
       <LegacyStyledText
-        css={TEXT_STYLE}
+        css={TEXT_STYLE(chipSize)}
         color={CHIP_PROPS_BY_TYPE[type].textColor}
       >
         {text}
@@ -166,7 +145,54 @@ const WEB_MEDIUM_TEXT_STYLE = css`
   font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
 `
 const WEB_SMALL_TEXT_STYLE = css`
-  font-size: ${TYPOGRAPHY.fontSizeLabel};
-  line-height: ${TYPOGRAPHY.lineHeight12};
+  font-size: ${TYPOGRAPHY.fontSizeP};
+  line-height: ${TYPOGRAPHY.lineHeight16};
   font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
 `
+
+const ICON_STYLE = (
+  chipSize: ChipSize,
+  smallSize: string
+): FlattenSimpleInterpolation => css`
+  width: ${chipSize === 'medium' ? '1rem' : smallSize};
+  height: ${chipSize === 'medium' ? '1rem' : smallSize};
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    width: ${chipSize === 'medium' ? '1.5rem' : '1.25rem'};
+    height: ${chipSize === 'medium' ? '1.5rem' : '1.25rem'};
+  }
+`
+
+const TEXT_STYLE = (chipSize: ChipSize): FlattenSimpleInterpolation => css`
+  ${chipSize === 'medium' ? WEB_MEDIUM_TEXT_STYLE : WEB_SMALL_TEXT_STYLE}
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    ${chipSize === 'medium'
+      ? TYPOGRAPHY.bodyTextSemiBold
+      : TYPOGRAPHY.smallBodyTextSemiBold}
+  }
+`
+
+const MEDIUM_CONTAINER_STYLE = (
+  background?: boolean
+): FlattenSimpleInterpolation => css`
+  padding: ${SPACING.spacing2} ${background === false ? 0 : SPACING.spacing8};
+  grid-gap: ${SPACING.spacing4};
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    padding: ${SPACING.spacing8} ${background === false ? 0 : SPACING.spacing16};
+    grid-gap: ${SPACING.spacing8};
+  }
+`
+
+const SMALL_CONTAINER_STYLE = (
+  background?: boolean
+): FlattenSimpleInterpolation => css`
+  padding: ${SPACING.spacing4} ${background === false ? 0 : SPACING.spacing6};
+  grid-gap: ${SPACING.spacing4};
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    padding: ${SPACING.spacing4} ${background === false ? 0 : SPACING.spacing8};
+    grid-gap: ${SPACING.spacing4};
+  }
+`

package/src/atoms/InlineNotification/InlineNotification.stories.tsx

@@ -0,0 +1,107 @@
+import { VIEWPORT } from '../../ui-style-constants'
+import { InlineNotification } from './index'
+
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
+
+export default {
+  title: 'Helix/Atoms/InlineNotification',
+  argTypes: {
+    hug: {
+      control: {
+        type: 'boolean',
+      },
+      defaultValue: false,
+    },
+    type: {
+      options: ['alert', 'error', 'neutral', 'success'],
+      control: {
+        type: 'select',
+      },
+      defaultValue: 'success',
+    },
+    onCloseClick: {
+      control: {
+        type: 'boolean',
+      },
+      defaultValue: true,
+    },
+    hasMessage: {
+      control: {
+        type: 'boolean',
+      },
+      defaultValue: true,
+    },
+    message: {
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'hasMessage' },
+    },
+    hasLink: {
+      control: {
+        type: 'boolean',
+      },
+      defaultValue: false,
+    },
+    linkText: {
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'hasLink' },
+    },
+  },
+  parameters: VIEWPORT.touchScreenViewport,
+} as Meta
+
+export interface WrapperProps extends React.ComponentProps<InlineNotification> {
+  hasMessage: boolean
+  hasLink: boolean
+}
+
+function Wrapper(props: WrapperProps): JSX.Element {
+  return (
+    <InlineNotification
+      {...props}
+      onCloseClick={
+        props.onCloseClick
+          ? () => {
+              console.log('Close clicked')
+            }
+          : undefined
+      }
+      message={props.hasMessage ? props.message : undefined}
+      linkText={props.hasLink ? props.linkText : undefined}
+      onLinkClick={
+        props.hasLink
+          ? () => {
+              console.log('Link clicked')
+            }
+          : undefined
+      }
+    />
+  )
+}
+
+const Template: Story<React.ComponentProps<typeof Wrapper>> = args => (
+  <Wrapper {...args} />
+)
+
+export const InlineNotificationComponent = Template.bind({})
+InlineNotificationComponent.args = {
+  heading: 'awesome',
+  message: 'you did it',
+  type: 'success',
+  hasMessage: true,
+  hasLink: false,
+}
+
+export const InlineNotificationWithLink = Template.bind({})
+InlineNotificationWithLink.args = {
+  heading: 'Something has happened',
+  message: 'Here is an alert about it',
+  type: 'neutral',
+  hasMessage: true,
+  hasLink: true,
+  linkText: 'Link',
+}

package/src/atoms/InlineNotification/__tests__/InlineNotification.test.tsx

@@ -0,0 +1,66 @@
+import { fireEvent, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { InlineNotification } from '..'
+import { renderWithProviders } from '../../../testing/utils'
+
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof InlineNotification>) => {
+  return renderWithProviders(<InlineNotification {...props} />)[0]
+}
+
+describe('InlineNotification', () => {
+  let props: ComponentProps<typeof InlineNotification>
+
+  beforeEach(() => {
+    props = {
+      type: 'success',
+      heading: 'TITLE',
+    }
+  })
+  it('renders success inline notification', () => {
+    render(props)
+    screen.getByLabelText('icon_success')
+    screen.getByText('TITLE')
+  })
+  it('renders success inline notification with exit button and when click dismisses inline notification', () => {
+    props = {
+      type: 'success',
+      heading: 'TITLE',
+      onCloseClick: vi.fn(),
+    }
+    render(props)
+    screen.getByText('TITLE')
+    const btn = screen.getByLabelText('close_icon')
+    fireEvent.click(btn)
+    expect(props.onCloseClick).toHaveBeenCalled()
+  })
+  it('renders alert inline notification', () => {
+    props = {
+      type: 'alert',
+      heading: 'TITLE',
+    }
+    render(props)
+    screen.getByLabelText('icon_alert')
+    screen.getByText('TITLE')
+  })
+  it('renders error inline notification', () => {
+    props = {
+      type: 'error',
+      heading: 'TITLE',
+    }
+    render(props)
+    screen.getByLabelText('icon_error')
+    screen.getByText('TITLE')
+  })
+  it('renders neutral inline notification', () => {
+    props = {
+      type: 'neutral',
+      heading: 'TITLE',
+    }
+    render(props)
+    screen.getByLabelText('icon_neutral')
+    screen.getByText('TITLE')
+  })
+})

package/src/atoms/InlineNotification/index.tsx

@@ -0,0 +1,197 @@
+import { css } from 'styled-components'
+
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { Icon } from '../../icons'
+import { Box, Btn, Flex, Link } from '../../primitives'
+import {
+  ALIGN_CENTER,
+  DIRECTION_ROW,
+  JUSTIFY_FLEX_END,
+  JUSTIFY_FLEX_START,
+  JUSTIFY_SPACE_BETWEEN,
+} from '../../styles'
+import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { StyledText } from '../StyledText'
+
+import type { MouseEventHandler } from 'react'
+import type { IconProps } from '../../icons'
+import type { StyleProps } from '../../primitives'
+
+type InlineNotificationType = 'alert' | 'error' | 'neutral' | 'success'
+
+export interface InlineNotificationProps extends StyleProps {
+  /** name constant of the icon to display */
+  type: InlineNotificationType
+  /** InlineNotification contents */
+  heading: string
+  message?: string
+  /** Optional dynamic width based on contents */
+  hug?: boolean
+  /** optional handler to show close button/clear alert  */
+  onCloseClick?: (() => void) | MouseEventHandler<HTMLButtonElement>
+  linkText?: string
+  onLinkClick?: (() => void) | MouseEventHandler<HTMLButtonElement>
+}
+
+const INLINE_NOTIFICATION_PROPS_BY_TYPE: Record<
+  InlineNotificationType,
+  { icon: IconProps; backgroundColor: string; color: string }
+> = {
+  alert: {
+    icon: { name: 'ot-alert' },
+    backgroundColor: COLORS.yellow30,
+    color: COLORS.yellow60,
+  },
+  error: {
+    icon: { name: 'ot-alert' },
+    backgroundColor: COLORS.red30,
+    color: COLORS.red60,
+  },
+  neutral: {
+    icon: { name: 'information' },
+    backgroundColor: COLORS.blue30,
+    color: COLORS.blue60,
+  },
+  success: {
+    icon: { name: 'ot-check' },
+    backgroundColor: COLORS.green30,
+    color: COLORS.green60,
+  },
+}
+
+export function InlineNotification(
+  props: InlineNotificationProps
+): JSX.Element {
+  const {
+    heading,
+    hug = false,
+    onCloseClick,
+    message,
+    type,
+    linkText,
+    onLinkClick,
+  } = props
+  const fullHeading = `${heading}${message ? '. ' : ''}`
+  const fullmessage = `${message}.`
+  const inlineNotificationProps = INLINE_NOTIFICATION_PROPS_BY_TYPE[type]
+  const iconProps = {
+    ...inlineNotificationProps.icon,
+    color: INLINE_NOTIFICATION_PROPS_BY_TYPE[type].color,
+    size: '100%',
+  }
+  return (
+    <Flex
+      alignItems={ALIGN_CENTER}
+      backgroundColor={INLINE_NOTIFICATION_PROPS_BY_TYPE[type].backgroundColor}
+      data-testid={`InlineNotification_${type}`}
+      flexDirection={DIRECTION_ROW}
+      justifyContent={JUSTIFY_SPACE_BETWEEN}
+      width={hug ? 'max-content' : '100%'}
+      css={css`
+        gap: ${SPACING.spacing8};
+        border-radius: ${BORDERS.borderRadius4};
+        padding: ${SPACING.spacing8} ${SPACING.spacing12};
+        @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+          gap: ${SPACING.spacing12};
+          border-radius: ${BORDERS.borderRadius8};
+          padding: ${SPACING.spacing12} ${SPACING.spacing16};
+        }
+      `}
+    >
+      <Flex
+        justifyContent={JUSTIFY_FLEX_START}
+        alignItems={ALIGN_CENTER}
+        flexDirection={DIRECTION_ROW}
+        css={css`
+          gap: ${SPACING.spacing8};
+          @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+            gap: ${SPACING.spacing12};
+          }
+        `}
+      >
+        <Box
+          css={css`
+            width: ${SPACING.spacing16};
+            height: ${SPACING.spacing16};
+            @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+              width: 1.75rem;
+              height: 1.75rem;
+            }
+          `}
+        >
+          <Icon {...iconProps} aria-label={`icon_${type}`} />
+        </Box>
+        <Flex flex="1" alignItems={ALIGN_CENTER}>
+          <StyledText
+            oddStyle="bodyTextRegular"
+            desktopStyle="bodyDefaultRegular"
+          >
+            <span
+              css={`
+                font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
+              `}
+            >
+              {fullHeading}
+            </span>
+            {/* this break is because the desktop wants this on two lines, but also wants/
+              inline text layout on ODD. Soooo here you go */}
+            <br
+              css={`
+                @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+                  display: none;
+                }
+              `}
+            />
+            {message != null && fullmessage}
+          </StyledText>
+        </Flex>
+      </Flex>
+      <Flex
+        alignItems={ALIGN_CENTER}
+        justifyContent={JUSTIFY_FLEX_END}
+        gap={SPACING.spacing16}
+      >
+        {linkText && (
+          <Link onClick={onLinkClick}>
+            <StyledText
+              oddStyle="bodyTextRegular"
+              desktopStyle="bodyDefaultRegular"
+              textDecoration="underline"
+            >
+              {linkText}{' '}
+            </StyledText>
+          </Link>
+        )}
+        {onCloseClick && (
+          <Btn
+            data-testid="InlineNotification_close-button"
+            onClick={onCloseClick}
+            css={css`
+              width: 28px;
+              height: 28px;
+              @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+                width: ${SPACING.spacing48};
+                height: ${SPACING.spacing48};
+              }
+            `}
+            width=""
+            height="fit-content"
+          >
+            <Icon
+              aria-label="close_icon"
+              name="close"
+              css={css`
+                width: 28px;
+                height: 28px;
+                @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+                  width: ${SPACING.spacing48};
+                  height: ${SPACING.spacing48};
+                }
+              `}
+            />
+          </Btn>
+        )}
+      </Flex>
+    </Flex>
+  )
+}

package/src/atoms/InputField/InputField.stories.tsx

@@ -1,11 +1,14 @@
 import * as React from 'react'
+
 import {
   DIRECTION_COLUMN,
   Flex,
   SPACING,
   VIEWPORT,
 } from '@opentrons/components'
+
 import { InputField as InputFieldComponent } from './index'
+
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof InputFieldComponent> = {

package/src/atoms/InputField/__tests__/InputField.test.tsx

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

package/src/atoms/InputField/index.tsx

@@ -1,6 +1,8 @@
 import { forwardRef } from 'react'
 import styled, { css } from 'styled-components'
 
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { Icon } from '../../icons'
 import { Flex } from '../../primitives'
 import {
   ALIGN_CENTER,
@@ -9,12 +11,10 @@ import {
   NO_WRAP,
   TEXT_ALIGN_RIGHT,
 } from '../../styles'
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { Icon } from '../../icons'
-import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-import { Tooltip } from '../Tooltip'
 import { useHoverTooltip } from '../../tooltips'
+import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { StyledText } from '../StyledText'
+import { Tooltip } from '../Tooltip'
 
 import type {
   ChangeEventHandler,

package/src/atoms/ListButton/ListButton.stories.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react'
+
+import { StyledText } from '../..'
 import { STYLE_PROPS } from '../../primitives'
+import { ListButton as ListButtonComponent } from './index'
 import {
   ListButtonAccordion,
   ListButtonAccordionContainer,
   ListButtonRadioButton,
 } from './ListButtonChildren/index'
-import { StyledText } from '../..'
-import { ListButton as ListButtonComponent } from './index'
+
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof ListButtonComponent> = {

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

@@ -1,9 +1,10 @@
 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 { SPACING } from '../../../ui-style-constants'
+import { StyledText } from '../../StyledText'
 
 import type { ChangeEventHandler, MouseEvent } from 'react'
 import type { StyleProps } from '../../../primitives'