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

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

@@ -1,468 +0,0 @@
-import { screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it } from 'vitest'
-
-import { Chip } from '..'
-import { BORDERS, COLORS } from '../../../helix-design-system'
-import { renderWithProviders } from '../../../testing/utils'
-import { SPACING } from '../../../ui-style-constants'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof Chip>) => {
-  return renderWithProviders(<Chip {...props} />)
-}
-
-describe('Chip Touchscreen', () => {
-  let props: ComponentProps<typeof Chip>
-
-  it('should render text, icon, bgcolor with success colors', () => {
-    props = {
-      text: 'mockSuccess',
-      type: 'success',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_success')
-    const chipText = screen.getByText('mockSuccess')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.green35}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.green60}`)
-    const icon = screen.getByLabelText('icon_mockSuccess')
-    expect(icon).toHaveStyle(`color: ${COLORS.green60}`)
-    // ToDo (kk:03/28/2024) seems that jsdom doesn't support switching via media query
-    // I will keep investigating this
-    // expect(icon).toHaveStyle(`width: 1.5rem`)
-  })
-
-  it('should render text, icon, no bgcolor with success colors and bg false', () => {
-    props = {
-      background: false,
-      text: 'mockSuccess',
-      type: 'success',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_success')
-    const chipText = screen.getByText('mockSuccess')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.green60}`)
-    const icon = screen.getByLabelText('icon_mockSuccess')
-    expect(icon).toHaveStyle(`color: ${COLORS.green60}`)
-  })
-
-  it('should render text, icon, bgcolor with warning colors', () => {
-    props = {
-      text: 'mockWarning',
-      type: 'warning',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_warning')
-    const chipText = screen.getByText('mockWarning')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.yellow35}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.yellow60}`)
-    const icon = screen.getByLabelText('icon_mockWarning')
-    expect(icon).toHaveStyle(`color: ${COLORS.yellow60}`)
-  })
-
-  it('should render text, icon, no bgcolor with warning colors and bg false', () => {
-    props = {
-      background: false,
-      text: 'mockWarning',
-      type: 'warning',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_warning')
-    const chipText = screen.getByText('mockWarning')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.yellow60}`)
-    const icon = screen.getByLabelText('icon_mockWarning')
-    expect(icon).toHaveStyle(`color: ${COLORS.yellow60}`)
-  })
-
-  it('should render text, icon, bgcolor with neutral colors', () => {
-    props = {
-      text: 'mockNeutral',
-      type: 'neutral',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_neutral')
-    const chipText = screen.getByText('mockNeutral')
-    expect(chip).toHaveStyle(
-      `background-color: ${COLORS.black90}${COLORS.opacity20HexCode}`
-    )
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
-    const icon = screen.getByLabelText('icon_mockNeutral')
-    expect(icon).toHaveStyle(`color: ${COLORS.grey60}`)
-  })
-
-  it('should render text, icon, no bgcolor with neutral colors and bg false', () => {
-    props = {
-      background: false,
-      text: 'mockNeutral',
-      type: 'neutral',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_neutral')
-    const chipText = screen.getByText('mockNeutral')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
-    const icon = screen.getByLabelText('icon_mockNeutral')
-    expect(icon).toHaveStyle(`color: ${COLORS.grey60}`)
-  })
-
-  it('should render text, icon, bgcolor with error colors', () => {
-    props = {
-      text: 'mockError',
-      type: 'error',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_error')
-    const chipText = screen.getByText('mockError')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.red35}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.red60}`)
-    const icon = screen.getByLabelText('icon_mockError')
-    expect(icon).toHaveStyle(`color: ${COLORS.red60}`)
-  })
-
-  it('should render text, icon, no bgcolor with error colors and bg false', () => {
-    props = {
-      background: false,
-      text: 'mockError',
-      type: 'error',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_error')
-    const chipText = screen.getByText('mockError')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.red60}`)
-    const icon = screen.getByLabelText('icon_mockError')
-    expect(icon).toHaveStyle(`color: ${COLORS.red60}`)
-  })
-
-  it('should render text, icon, bgcolor with info colors', () => {
-    props = {
-      text: 'mockInfo',
-      type: 'info',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_info')
-    const chipText = screen.getByText('mockInfo')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.blue35}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.blue60}`)
-    const icon = screen.getByLabelText('icon_mockInfo')
-    expect(icon).toHaveStyle(`color: ${COLORS.blue60}`)
-  })
-
-  it('should render text, icon, no bgcolor with info colors and bg false', () => {
-    props = {
-      background: false,
-      text: 'mockInfo',
-      type: 'info',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_info')
-    const chipText = screen.getByText('mockInfo')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.blue60}`)
-    const icon = screen.getByLabelText('icon_mockInfo')
-    expect(icon).toHaveStyle(`color: ${COLORS.blue60}`)
-  })
-  it('renders no icon when hasIcon is false', () => {
-    props = {
-      text: 'mockInfo',
-      hasIcon: false,
-      type: 'info',
-    }
-    render(props)
-    expect(screen.queryByText('icon_mockInfo')).not.toBeInTheDocument()
-  })
-
-  it('render text with smaller padding and smaller icon when chip size is small and background is false', () => {
-    props = {
-      background: false,
-      text: 'mockInfo',
-      type: 'info',
-      chipSize: 'small',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_info')
-    expect(chip).toHaveStyle(`padding: ${SPACING.spacing4} 0`)
-    const icon = screen.getByLabelText('icon_mockInfo')
-    expect(icon).toHaveStyle(`width: 0.75rem`)
-  })
-
-  // ToDo (kk:03/28/2024) seems that jsdom doesn't support switching via media query
-  // I will keep investigating this
-  // it('render text with smaller padding and smaller icon when chip size is small and background is true', () => {
-  //   props = {
-  //     background: true,
-  //     text: 'mockInfo',
-  //     type: 'info',
-  //     chipSize: 'small',
-  //   }
-  //   render(props)
-  //   const chip = screen.getByTestId('Chip_info')
-  //   expect(chip).toHaveStyle(`padding: ${SPACING.spacing4} ${SPACING.spacing8}`)
-  //   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', () => {
-  let props: ComponentProps<typeof Chip>
-
-  beforeEach(() => {
-    Object.defineProperty(window, 'innerWidth', {
-      writable: true,
-      configurable: true,
-      value: 1024,
-    })
-
-    Object.defineProperty(window, 'innerHeight', {
-      writable: true,
-      configurable: true,
-      value: 768,
-    })
-  })
-  it('should render text, icon, bgcolor with success colors', () => {
-    props = {
-      text: 'mockSuccess',
-      type: 'success',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_success')
-    const chipText = screen.getByText('mockSuccess')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.green35}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.green60}`)
-    // expect(chipText).toHaveStyle(
-    //   `padding: ${SPACING.spacing2} ${SPACING.spacing8}`
-    // )
-    const icon = screen.getByLabelText('icon_mockSuccess')
-    expect(icon).toHaveStyle(`color: ${COLORS.green60}`)
-    expect(icon).toHaveStyle(`width: 1rem`)
-  })
-
-  it('should render text, icon, no bgcolor with success colors and bg false', () => {
-    props = {
-      background: false,
-      text: 'mockSuccess',
-      type: 'success',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_success')
-    const chipText = screen.getByText('mockSuccess')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.green60}`)
-    const icon = screen.getByLabelText('icon_mockSuccess')
-    expect(icon).toHaveStyle(`color: ${COLORS.green60}`)
-  })
-
-  it('should render text, icon, bgcolor with warning colors', () => {
-    props = {
-      text: 'mockWarning',
-      type: 'warning',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_warning')
-    const chipText = screen.getByText('mockWarning')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.yellow35}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.yellow60}`)
-    const icon = screen.getByLabelText('icon_mockWarning')
-    expect(icon).toHaveStyle(`color: ${COLORS.yellow60}`)
-  })
-
-  it('should render text, icon, no bgcolor with warning colors and bg false', () => {
-    props = {
-      background: false,
-      text: 'mockWarning',
-      type: 'warning',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_warning')
-    const chipText = screen.getByText('mockWarning')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.yellow60}`)
-    const icon = screen.getByLabelText('icon_mockWarning')
-    expect(icon).toHaveStyle(`color: ${COLORS.yellow60}`)
-  })
-
-  it('should render text, icon, bgcolor with neutral colors', () => {
-    props = {
-      text: 'mockNeutral',
-      type: 'neutral',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_neutral')
-    const chipText = screen.getByText('mockNeutral')
-    expect(chip).toHaveStyle(
-      `background-color: ${COLORS.black90}${COLORS.opacity20HexCode}`
-    )
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
-    const icon = screen.getByLabelText('icon_mockNeutral')
-    expect(icon).toHaveStyle(`color: ${COLORS.grey60}`)
-  })
-
-  it('should render text, icon, no bgcolor with neutral colors and bg false', () => {
-    props = {
-      background: false,
-      text: 'mockNeutral',
-      type: 'neutral',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_neutral')
-    const chipText = screen.getByText('mockNeutral')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
-    const icon = screen.getByLabelText('icon_mockNeutral')
-    expect(icon).toHaveStyle(`color: ${COLORS.grey60}`)
-  })
-
-  it('should render text, icon, bgcolor with error colors', () => {
-    props = {
-      text: 'mockError',
-      type: 'error',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_error')
-    const chipText = screen.getByText('mockError')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.red35}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.red60}`)
-    const icon = screen.getByLabelText('icon_mockError')
-    expect(icon).toHaveStyle(`color: ${COLORS.red60}`)
-  })
-
-  it('should render text, icon, no bgcolor with error colors and bg false', () => {
-    props = {
-      background: false,
-      text: 'mockError',
-      type: 'error',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_error')
-    const chipText = screen.getByText('mockError')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.red60}`)
-    const icon = screen.getByLabelText('icon_mockError')
-    expect(icon).toHaveStyle(`color: ${COLORS.red60}`)
-  })
-
-  it('should render text, icon, bgcolor with info colors', () => {
-    props = {
-      text: 'mockInfo',
-      type: 'info',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_info')
-    const chipText = screen.getByText('mockInfo')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.blue35}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.blue60}`)
-    const icon = screen.getByLabelText('icon_mockInfo')
-    expect(icon).toHaveStyle(`color: ${COLORS.blue60}`)
-  })
-
-  it('should render text, icon, no bgcolor with info colors and bg false', () => {
-    props = {
-      background: false,
-      text: 'mockInfo',
-      type: 'info',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_info')
-    const chipText = screen.getByText('mockInfo')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.blue60}`)
-    const icon = screen.getByLabelText('icon_mockInfo')
-    expect(icon).toHaveStyle(`color: ${COLORS.blue60}`)
-  })
-  it('renders no icon when hasIcon is false', () => {
-    props = {
-      text: 'mockInfo',
-      hasIcon: false,
-      type: 'info',
-    }
-    render(props)
-    expect(screen.queryByText('icon_mockInfo')).not.toBeInTheDocument()
-  })
-
-  it('render text with smaller padding and smaller icon when chip size is small and background is false', () => {
-    props = {
-      background: false,
-      text: 'mockInfo',
-      type: 'info',
-      chipSize: 'small',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_info')
-    expect(chip).toHaveStyle(`padding: ${SPACING.spacing4} 0`)
-    const icon = screen.getByLabelText('icon_mockInfo')
-    expect(icon).toHaveStyle(`width: 0.75rem`)
-  })
-
-  it('render text with smaller padding and smaller icon when chip size is small and background is true', () => {
-    props = {
-      background: true,
-      text: 'mockInfo',
-      type: 'info',
-      chipSize: 'small',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_info')
-    expect(chip).toHaveStyle(`padding: ${SPACING.spacing4} ${SPACING.spacing6}`)
-    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,198 +0,0 @@
-import { css } from 'styled-components'
-
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { Icon } from '../../icons'
-import { Flex } from '../../primitives'
-import { ALIGN_CENTER, DIRECTION_ROW, FLEX_MAX_CONTENT } from '../../styles'
-import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-import { LegacyStyledText } from '../StyledText'
-
-import type { FlattenSimpleInterpolation } from 'styled-components'
-import type { IconName } from '../../icons'
-import type { StyleProps } from '../../primitives'
-
-export type ChipType = 'error' | 'info' | 'neutral' | 'success' | 'warning'
-
-type ChipSize = 'medium' | 'small'
-
-interface ChipProps extends StyleProps {
-  /** Display background color? */
-  background?: boolean
-  /** Chip icon */
-  iconName?: IconName
-  /** Chip content */
-  text: string
-  /** name constant of the text color and the icon color to display */
-  type: ChipType
-  /** has icon */
-  hasIcon?: boolean
-  /** Chip size medium is the default size */
-  chipSize?: ChipSize
-  /** icon should pulse */
-  pulseIcon?: boolean
-}
-
-const CHIP_PROPS_BY_TYPE: Record<
-  ChipType,
-  {
-    backgroundColor: string
-    borderRadius: string
-    iconColor?: string
-    iconName?: IconName
-    textColor: string
-  }
-> = {
-  error: {
-    backgroundColor: COLORS.red35,
-    borderRadius: BORDERS.borderRadiusFull,
-    iconColor: COLORS.red60,
-    textColor: COLORS.red60,
-  },
-  info: {
-    backgroundColor: COLORS.blue35,
-    borderRadius: BORDERS.borderRadiusFull,
-    iconColor: COLORS.blue60,
-    textColor: COLORS.blue60,
-  },
-  neutral: {
-    backgroundColor: `${COLORS.black90}${COLORS.opacity20HexCode}`,
-    borderRadius: BORDERS.borderRadiusFull,
-    iconColor: COLORS.grey60,
-    textColor: COLORS.grey60,
-  },
-  success: {
-    backgroundColor: COLORS.green35,
-    borderRadius: BORDERS.borderRadiusFull,
-    iconColor: COLORS.green60,
-    iconName: 'ot-check',
-    textColor: COLORS.green60,
-  },
-  warning: {
-    backgroundColor: COLORS.yellow35,
-    borderRadius: BORDERS.borderRadiusFull,
-    iconColor: COLORS.yellow60,
-    textColor: COLORS.yellow60,
-  },
-}
-
-export function Chip(props: ChipProps): JSX.Element {
-  const {
-    background,
-    iconName,
-    type,
-    text,
-    hasIcon = true,
-    chipSize = 'medium',
-    pulseIcon = false,
-    ...styleProps
-  } = props
-  const backgroundColor =
-    background === false
-      ? 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 smallSize = iconName === 'connection-status' ? '0.5rem' : '0.75rem'
-
-  return (
-    <Flex
-      alignItems={ALIGN_CENTER}
-      backgroundColor={backgroundColor}
-      borderRadius={CHIP_PROPS_BY_TYPE[type].borderRadius}
-      flexDirection={DIRECTION_ROW}
-      height={FLEX_MAX_CONTENT}
-      css={
-        chipSize === 'medium'
-          ? MEDIUM_CONTAINER_STYLE(background)
-          : SMALL_CONTAINER_STYLE(background)
-      }
-      data-testid={`Chip_${type}`}
-      {...styleProps}
-    >
-      {hasIcon ? (
-        <Icon
-          name={icon}
-          color={iconColor}
-          aria-label={`icon_${text}`}
-          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(chipSize)}
-        color={CHIP_PROPS_BY_TYPE[type].textColor}
-      >
-        {text}
-      </LegacyStyledText>
-    </Flex>
-  )
-}
-
-const WEB_MEDIUM_TEXT_STYLE = css`
-  font-size: ${TYPOGRAPHY.fontSizeH4};
-  line-height: ${TYPOGRAPHY.lineHeight20};
-  font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
-`
-const WEB_SMALL_TEXT_STYLE = css`
-  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/Divider/index.tsx

@@ -1,16 +0,0 @@
-import { Box, COLORS, SPACING } from '../..'
-
-import type { ComponentProps } from 'react'
-
-type Props = ComponentProps<typeof Box>
-
-export function Divider(props: Props): JSX.Element {
-  return (
-    <Box
-      borderBottom={`1px solid ${String(COLORS.grey30)}`}
-      marginY={SPACING.spacing4}
-      {...props}
-      data-testid="divider"
-    />
-  )
-}