<|start_filename|>src/components/AvatarRow/AvatarRow.storiesHelpers.js<|end_filename|>
import React from 'react'
import AvatarRow from './AvatarRow'
import { generateAvatarList } from '../../utilities/specs/avatar.specs'
import { Resizable } from 're-resizable'

export const AvatarRowPlayground = () => {
  const [avatars, setAvatars] = React.useState(generateAvatarList(3, true))

  const handleClick = () => {
    setAvatars([...avatars, ...generateAvatarList(1, true)])
  }

  return (
    <>
      <Resizable
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          outline: 'solid 1px #444cf770',
          backgroundColor: '#e5e5f730',
          backgroundImage: 'radial-gradient(#444cf770 0.5px, #e5e5f730 0.5px)',
          backgroundSize: '10px 10px',
        }}
        defaultSize={{
          width: '50%',
          height: 200,
        }}
      >
        <AvatarRow size="lg" gap={10} avatars={avatars} />
      </Resizable>
      <br />
      <br />
      <button onClick={handleClick}>increase avatar count</button>
    </>
  )
}


<|start_filename|>src/styles/mixins/focusRing.css.js<|end_filename|>
import { css } from 'styled-components'
import { getColor } from '../../styles/utilities/color'

export const focusShadow = `
  0 0 0 2px ${getColor('blue.500')};
`
export const focusShadowWithInset = `
  0 0 0 2px ${getColor('blue.500')}, inset 0 0 0 2px white;
`

export const focusRing = css`
  outline: none;
  position: relative;

  &:before {
    content: '';
    border-radius: inherit;
    bottom: -2px;
    box-shadow: ${focusShadow};
    left: -2px;
    pointer-events: none;
    position: absolute;
    right: -2px;
    top: -2px;
    opacity: 0;
    background: transparent;
    z-index: 3;
  }

  &:focus,
  &.is-focused {
    &:before {
      opacity: 1;
    }
  }

  &:focus:not(:focus-visible) {
    &:before {
      opacity: 0;
    }
  }

  &:focus-visible {
    &:before {
      opacity: 1 !important;
      transition: opacity ease 0.2s;
    }
  }
`


<|start_filename|>src/components/MessageCard/MessageCard.test.js<|end_filename|>
import React from 'react'
import { mount, render } from 'enzyme'
import MessageCard from './MessageCard'
import {
  TitleUI,
  SubtitleUI,
  BodyUI,
  ActionUI,
  ImageUI,
} from './MessageCard.css'
import { MessageCardButton as Button } from './MessageCard.Button'
import { act } from 'react-dom/test-utils'

describe('className', () => {
  test('Has default className', () => {
    const wrapper = render(<MessageCard />)
    const el = wrapper.find('.c-MessageCard')

    expect(el.length).toBeTruthy()
  })

  test('Can render custom className', () => {
    const customClassName = 'blue'
    const wrapper = render(<MessageCard className={customClassName} />)
    const el = wrapper.find('.c-MessageCard')

    expect(el.hasClass(customClassName)).toBeTruthy()
  })
})

describe('Mobile', () => {
  test('Should not have mobile styles by default', () => {
    const wrapper = mount(<MessageCard />)
    const el = wrapper.find('div.c-MessageCard')

    expect(el.getDOMNode().classList.contains('is-mobile')).toBeFalsy()
  })

  test('Should have mobile styles if specified', () => {
    const wrapper = mount(<MessageCard isMobile />)
    const el = wrapper.find('div.c-MessageCard')

    expect(el.getDOMNode().classList.contains('is-mobile')).toBeTruthy()
  })
})

describe('Align', () => {
  test('Has default alignment of right', () => {
    const wrapper = mount(<MessageCard />)
    const el = wrapper.find('div.c-MessageCard')

    expect(el.getDOMNode().classList.contains('is-align-right')).toBeTruthy()
  })

  test('Can change alignment styles, if specified', () => {
    const wrapper = mount(<MessageCard align="left" />)
    const el = wrapper.find('div.c-MessageCard')

    expect(el.getDOMNode().classList.contains('is-align-left')).toBeTruthy()
  })
})

describe('Visibility', () => {
  jest.useFakeTimers()

  test('Should be visible by default if there is no image', () => {
    const onShowSpy = jest.fn()
    const wrapper = mount(<MessageCard onShow={onShowSpy} />)

    expect(cardWrapperVisible(wrapper)).toEqual(false)
    expect(onShowSpy).not.toHaveBeenCalled()

    act(() => {
      jest.runAllTimers()
      wrapper.update()
    })

    expect(cardWrapperVisible(wrapper)).toEqual(true)
    expect(onShowSpy).toHaveBeenCalled()
  })

  test('Should not be visible by default if there is an image, but become visible when image loads', () => {
    const onShowSpy = jest.fn()
    const wrapper = mount(
      <MessageCard
        image={{ url: 'https://path.to/image.png' }}
        onShow={onShowSpy}
      />
    )

    expect(cardWrapperVisible(wrapper)).toEqual(false)
    expect(onShowSpy).not.toHaveBeenCalled()

    jest.runAllTimers()
    wrapper.update()

    expect(cardWrapperVisible(wrapper)).toEqual(false)
    expect(onShowSpy).not.toHaveBeenCalled()

    wrapper.find('img').simulate('load')

    act(() => {
      jest.runAllTimers()
      wrapper.update()
    })

    expect(wrapper.find('img')).toHaveLength(1)
    expect(cardWrapperVisible(wrapper)).toEqual(true)
    expect(onShowSpy).toHaveBeenCalled()
  })

  test('Should become visible without image if image fails to load', () => {
    const onShowSpy = jest.fn()
    const wrapper = mount(
      <MessageCard
        image={{ url: 'https://path.to/image.png' }}
        onShow={onShowSpy}
      />
    )

    expect(cardWrapperVisible(wrapper)).toEqual(false)
    expect(onShowSpy).not.toHaveBeenCalled()

    jest.runAllTimers()
    wrapper.update()

    expect(cardWrapperVisible(wrapper)).toEqual(false)
    expect(onShowSpy).not.toHaveBeenCalled()

    wrapper.find('img').simulate('error')

    act(() => {
      jest.runAllTimers()
      wrapper.update()
    })

    expect(wrapper.find('img')).toHaveLength(0)
    expect(cardWrapperVisible(wrapper)).toEqual(true)
    expect(onShowSpy).toHaveBeenCalled()
  })

  function cardWrapperVisible(wrapper) {
    return wrapper.find('.c-MessageCardWrapper').at(0).prop('visible')
  }
})

describe('Animation', () => {
  test('Should have no animation by default', () => {
    const wrapper = mount(<MessageCard />)

    expect(cardWrapperAnimation(wrapper)).toEqual(false)
  })

  test('Should have animation if withAnimation is true', () => {
    const wrapper = mount(<MessageCard withAnimation />)

    expect(cardWrapperAnimation(wrapper)).toEqual(true)
  })

  function cardWrapperAnimation(wrapper) {
    return wrapper.find('.c-MessageCardWrapper').at(0).prop('withAnimation')
  }
})

describe('Body', () => {
  test('Does not render body if is not passed down as a prop', () => {
    const wrapper = mount(<MessageCard />)
    const o = wrapper.find(BodyUI)

    expect(o.length).toBe(0)
  })

  test('Renders body if it is passed down as a prop', () => {
    const wrapper = mount(<MessageCard body="Santa!" />)
    const o = wrapper.find(BodyUI)

    expect(o.length).toBe(1)
    expect(o.html()).toContain('Santa!')
  })

  test('Renders html in body', () => {
    const wrapper = mount(<MessageCard body="<span>Santa!</span>" />)
    const o = wrapper.find(BodyUI)

    expect(o.render().find('span').length).toBe(1)
  })

  test('Renders new line without html in body', () => {
    const body = 'this is a new line\nwith another line'
    const wrapper = mount(<MessageCard body={body} />)
    const o = wrapper.find(BodyUI)

    expect(o.render().find('br').length).toBe(1)
  })

  test('Accepts a custom onBodyClick callback', () => {
    const body = 'some text with a <a href="#">link</a> in it'
    const callback = jest.fn()
    const wrapper = mount(<MessageCard body={body} onBodyClick={callback} />)

    wrapper.simulate('click')
    expect(callback).not.toHaveBeenCalled()

    wrapper.find(BodyUI).simulate('click')
    expect(callback).toHaveBeenCalled()
  })
})

describe('Title', () => {
  test('Does not render title if is not passed down as a prop', () => {
    const wrapper = mount(<MessageCard />)
    const o = wrapper.find(TitleUI)

    expect(o.length).toBe(0)
  })

  test('Renders title if it is passed down as a prop', () => {
    const wrapper = mount(<MessageCard title="Santa!" />)
    const o = wrapper.find(TitleUI)

    expect(o.length).toBe(1)
    expect(o.html()).toContain('Santa!')
  })
})

describe('Subtitle', () => {
  test('Does not render subtitle if is not passed down as a prop', () => {
    const wrapper = mount(<MessageCard />)
    const o = wrapper.find(SubtitleUI)

    expect(o.length).toBe(0)
  })

  test('Renders subtitle if it is passed down as a prop', () => {
    const wrapper = mount(<MessageCard subtitle="Santa!" />)
    const o = wrapper.find(SubtitleUI)

    expect(o.length).toBe(1)
    expect(o.html()).toContain('Santa!')
  })
})

describe('image', () => {
  test('Does not render image if is not passed down as a prop', () => {
    const wrapper = mount(<MessageCard />)
    const image = wrapper.find('img')

    expect(image).toHaveLength(0)
  })

  test('Renders image if it is passed down as a prop', () => {
    const wrapper = mount(
      <MessageCard image={{ url: 'https://path.to/image.png' }} />
    )
    const image = wrapper.find('img')

    expect(image).toHaveLength(1)
    expect(image.prop('src')).toEqual('https://path.to/image.png')
  })

  test('Sets size of image when provided', () => {
    const wrapper = mount(
      <MessageCard
        image={{
          url: 'https://path.to/image.png',
          width: '100',
          height: '200',
        }}
      />
    )
    const image = wrapper.find(ImageUI)

    expect(image.prop('width')).toEqual('100px')
    expect(image.prop('height')).toEqual('200px')
  })

  test('Scales size of image when larger than fits and width is bigger', () => {
    const wrapper = mount(
      <MessageCard
        image={{
          url: 'https://path.to/image.png',
          width: '800',
          height: '300',
        }}
      />
    )
    const image = wrapper.find(ImageUI)

    expect(image.prop('height')).toEqual('96.75px')
    expect(image.prop('width')).toEqual('258px')
  })

  test('Scales size of image when larger than fits and height is bigger', () => {
    const wrapper = mount(
      <MessageCard
        image={{
          url: 'https://path.to/image.png',
          width: '300',
          height: '800',
        }}
      />
    )
    const image = wrapper.find(ImageUI)

    expect(image.prop('height')).toEqual('258px')
    expect(image.prop('width')).toEqual('96.75px')
  })

  test('Sets default size of image when not provided', () => {
    const wrapper = mount(
      <MessageCard image={{ url: 'https://path.to/image.png' }} />
    )
    const image = wrapper.find(ImageUI)

    expect(image.prop('width')).toEqual('100%')
    expect(image.prop('height')).toEqual('auto')
  })

  test('Sets provided alt text', () => {
    const wrapper = mount(
      <MessageCard
        image={{ url: 'https://path.to/image.png', altText: 'Alt text' }}
      />
    )
    const image = wrapper.find('img')

    expect(image.prop('alt')).toEqual('Alt text')
  })

  test('Sets default alt text', () => {
    const wrapper = mount(
      <MessageCard image={{ url: 'https://path.to/image.png' }} />
    )
    const image = wrapper.find('img')

    expect(image.prop('alt')).toEqual('Message image')
  })
})

describe('Action', () => {
  test('Does not render action if is not passed down as a prop', () => {
    const wrapper = mount(<MessageCard />)
    const o = wrapper.find(ActionUI)

    expect(o.length).toBe(0)
  })

  test('Renders action if it is passed down as a prop', () => {
    const action = () => <div>Click here</div>
    const wrapper = mount(<MessageCard action={action} />)
    const o = wrapper.find(ActionUI)

    expect(o.length).toBe(1)
    expect(o.html()).toContain('Click here')
  })

  test('Should remove the box shadow', () => {
    const wrapper = mount(<MessageCard isWithBoxShadow={false} />)
    const el = wrapper.find('div.c-MessageCard')

    expect(el.getDOMNode().classList.contains('is-with-box-shadow')).toBeFalsy()
  })
})

describe('UrlAttachmentImage', () => {
  test('Does not render if url not provided', () => {
    const wrapper = mount(<MessageCard.UrlAttachmentImage />)
    const image = wrapper.find('img')

    expect(image.length).toBe(0)
  })

  test('Renders image when url provided', () => {
    const wrapper = mount(
      <MessageCard.UrlAttachmentImage url="https://example.com" />
    )
    const image = wrapper.find('img')

    expect(image.length).toBe(1)
    expect(image.prop('src')).toEqual('https://example.com')
  })

  test('Allows to provide alt text', () => {
    const wrapper = mount(
      <MessageCard.UrlAttachmentImage
        url="https://example.com"
        altText="My alt text"
      />
    )
    const image = wrapper.find('img')

    expect(image.prop('alt')).toEqual('My alt text')
  })
})

describe('Message Button Children', () => {
  test('Can render children', () => {
    const children = 'Hello world'
    const wrapper = mount(<Button>{children}</Button>)

    expect(wrapper.html()).toContain(children)
  })
})

describe('Message Button onClick', () => {
  test('Can accept custom onClick callback', () => {
    const callback = jest.fn()
    const wrapper = mount(<Button onClick={callback}>Click Me</Button>)
    wrapper.simulate('click')

    expect(callback).toHaveBeenCalled()
  })
})


<|start_filename|>src/utilities/pkg.js<|end_filename|>
export default {
  version: '3.32.0',
}


<|start_filename|>src/components/ConditionField/ConditionField.test.js<|end_filename|>
import React from 'react'
import { render, screen, waitFor, within } from '@testing-library/react'
import user from '@testing-library/user-event'
import ConditionField from './ConditionField'

describe('Group', () => {
  test('Renders an AddButton by default', () => {
    const { getByRole } = render(<ConditionField.Group />)

    expect(getByRole('button')).toBeInTheDocument()
  })

  test('Can hide AddButton', () => {
    const { queryByRole } = render(
      <ConditionField.Group isAddEnabled={false} />
    )

    expect(queryByRole('button')).toBe(null)
  })

  test('Can render ConditionField within a Group', () => {
    render(
      <ConditionField.Group>
        <ConditionField />
      </ConditionField.Group>
    )
  })

  test('Does not render OR operator if there are no children', () => {
    const { container } = render(<ConditionField.Group />)

    expect(container.querySelector('.c-ConditionOr')).toBe(null)
  })

  test('Does not render OR operator if there is one child', () => {
    const { container } = render(
      <ConditionField.Group>
        <ConditionField />
      </ConditionField.Group>
    )

    expect(container.querySelector('.c-ConditionOr')).toBe(null)
  })

  test('Renders OR operator if there is two children', () => {
    const { container } = render(
      <ConditionField.Group>
        <ConditionField />
        <ConditionField />
      </ConditionField.Group>
    )

    expect(container.querySelector('.is-or')).toBeInTheDocument()
  })

  test('Renders one fewer OR operator compared to children', () => {
    const { container } = render(
      <ConditionField.Group>
        <ConditionField />
        <ConditionField />
        <ConditionField />
        <ConditionField />
      </ConditionField.Group>
    )

    expect(
      container.querySelectorAll('[data-cy="ConditionFieldOr"]').length
    ).toBe(3)
  })
})

describe('Tooltip', () => {
  test('Renders a Tooltip', () => {
    const { container } = render(<ConditionField />)

    expect(container.querySelectorAll('.TooltipTrigger').length).toBeTruthy()
  })
})

describe('With selectable conjunction', () => {
  jest.setTimeout(10000)
  test('should display selectable conjunction button with AND/OR options', async () => {
    const dropdownTrigger = () =>
      screen.queryByRole('button', {
        name: 'toggle menu',
      })

    const conjunctionMenu = () => screen.getByRole('listbox')
    render(
      <ConditionField.Group canChangeConjunction>
        <ConditionField />
      </ConditionField.Group>
    )

    expect(dropdownTrigger()).toBeInTheDocument()

    user.click(dropdownTrigger())

    await waitFor(() => {
      expect(conjunctionMenu()).toBeInTheDocument()
      expect(
        within(conjunctionMenu())
          .getAllByRole('option')
          .map(el => el.textContent)
      ).toEqual(['OR', 'AND'])
    })
  })

  test('should display OR selected when no conjunction provided', async () => {
    const dropdownTrigger = () =>
      screen.queryByRole('button', {
        name: 'toggle menu',
      })

    render(
      <ConditionField.Group canChangeConjunction>
        <ConditionField />
      </ConditionField.Group>
    )

    user.click(dropdownTrigger())

    await waitFor(() => {
      expect(screen.getByRole('button', { name: 'or' })).toBeInTheDocument()
    })
  })

  test('should mark provided item as selected', async () => {
    const dropdownTrigger = () =>
      screen.queryByRole('button', {
        name: 'toggle menu',
      })

    const conjunctionMenu = () => screen.getByRole('listbox')
    render(
      <ConditionField.Group canChangeConjunction conjunction={'and'}>
        <ConditionField />
      </ConditionField.Group>
    )

    user.click(dropdownTrigger())

    await waitFor(() => {
      expect(
        within(conjunctionMenu())
          .getAllByRole('option')
          .find(el => el.classList.contains('is-selected')).textContent
      ).toEqual('AND')
    })
  })

  test('should make a callback when conjunction changed', async () => {
    const dropdownTrigger = () =>
      screen.queryByRole('button', {
        name: 'toggle menu',
      })

    const conjunctionMenu = () => screen.getByRole('listbox')
    const mock = jest.fn()
    render(
      <ConditionField.Group canChangeConjunction onConjunctionChange={mock}>
        <ConditionField />
      </ConditionField.Group>
    )

    user.click(dropdownTrigger())
    user.click(within(conjunctionMenu()).getByRole('option', { name: 'AND' }))

    await waitFor(() => {
      expect(mock).toHaveBeenCalledWith('and')
    })
  })

  test('should render OR conjunction by default when more than one Field', () => {
    const { container } = render(
      <ConditionField.Group canChangeConjunction>
        <ConditionField />
        <ConditionField />
      </ConditionField.Group>
    )

    expect(getOrConjunctions(container)).toHaveLength(1)
    expect(getAndConjunctions(container)).toHaveLength(0)
  })

  test('should render AND conjunction when more than one Field', () => {
    const { container } = render(
      <ConditionField.Group canChangeConjunction conjunction={'and'}>
        <ConditionField />
        <ConditionField />
      </ConditionField.Group>
    )

    expect(getAndConjunctions(container)).toHaveLength(1)
    expect(getOrConjunctions(container)).toHaveLength(0)
  })

  test('should disable button to add, but not switch', () => {
    const dropdownTrigger = () =>
      screen.queryByRole('button', {
        name: 'toggle menu',
      })

    render(
      <ConditionField.Group canChangeConjunction isAddEnabled={false}>
        <ConditionField />
        <ConditionField />
      </ConditionField.Group>
    )

    expect(dropdownTrigger()).not.toBeDisabled()
    expect(screen.getByRole('button', { name: 'or' })).toBeDisabled()
  })

  test('should not display dropdown when flag is set to false', () => {
    const dropdownTrigger = () =>
      screen.queryByRole('button', {
        name: 'toggle menu',
      })

    render(
      <ConditionField.Group canChangeConjunction={false}>
        <ConditionField />
        <ConditionField />
      </ConditionField.Group>
    )

    expect(dropdownTrigger()).not.toBeInTheDocument()
    expect(screen.getByRole('button', { name: 'or' })).toBeInTheDocument()
  })

  function getOrConjunctions(container) {
    return container.querySelectorAll('.c-ConditionOperator.is-or')
  }

  function getAndConjunctions(container) {
    return container.querySelectorAll('.c-ConditionOperator.is-and')
  }
})

describe('onRemove', () => {
  test('Renders a remove button', () => {
    const { getByRole, getByTitle } = render(<ConditionField />)

    expect(getByRole('button')).toBeInTheDocument()
    expect(getByTitle('collapse')).toBeInTheDocument()
  })

  test('Does not render a remove button', () => {
    const { queryByRole, queryByTitle } = render(
      <ConditionField isWithRemove={false} />
    )

    expect(queryByRole('button')).toBe(null)
    expect(queryByTitle('collapse')).toBe(null)
  })

  test('Fires onRemove callback when remove button is clicked', async () => {
    const spy = jest.fn()
    const { getByRole } = render(<ConditionField onRemove={spy} />)

    user.click(getByRole('button'))

    await waitFor(() => {
      expect(spy).toHaveBeenCalled()
    })
  })
})


<|start_filename|>src/components/AvatarRow/AvatarRow.utils.js<|end_filename|>
export const MARGIN_LEFT = 2

export function splitAvatarsArray(avatars, itemsDisplayed) {
  const hiddenAvatars =
    itemsDisplayed < avatars.length
      ? avatars.slice(itemsDisplayed - 1, avatars.length)
      : []

  const shownAvatars = hiddenAvatars.length
    ? avatars.slice(0, itemsDisplayed - 1)
    : avatars

  return { shownAvatars, hiddenAvatars }
}

export function getNumberOfItemsToDisplay({
  avatarSize,
  containerWidth,
  gap,
  numberOfAvatars,
  numberOfItemsOnDisplay,
}) {
  /** Only act if we have more than 1 avatar */
  if (!containerWidth || numberOfAvatars <= 1) {
    return
  }

  /** The total space for the avatars is comprised of:
   * Avatar space: Number of avatars * the size of the avatar
   * +
   * Margin space: gap between avatars * the number of gaps. For example, for 3 avatars, there are 2 gaps => [AV]gap[AV]gap[AV]
   */
  const spaceForAllAvatars =
    avatarSize * numberOfAvatars + (numberOfAvatars - 1) * gap

  if (containerWidth >= spaceForAllAvatars) {
    return numberOfAvatars
  } else {
    const numberOfGaps = numberOfItemsOnDisplay - 1
    const itemsThatFit = Math.floor(
      (containerWidth - numberOfGaps * gap) / avatarSize
    )

    return itemsThatFit > 0 ? itemsThatFit : 1
  }
}


<|start_filename|>src/components/Button/Button.test.js<|end_filename|>
import React from 'react'
import { mount } from 'enzyme'
import Button from './Button'
import Icon from '../Icon'

describe('ClassNames', () => {
  test('Accepts custom className', () => {
    const wrapper = mount(<Button className="foo bar baz">Click Me</Button>)
    const classNames = wrapper.find('button.c-Button').prop('className')

    expect(classNames).toContain('foo')
    expect(classNames).toContain('bar')
    expect(classNames).toContain('baz')
  })
})

describe('Kind', () => {
  test('Adds the respective classNames', () => {
    const primary = mount(<Button kind="primary">Primary</Button>)
    const link = mount(<Button kind="link">Plain</Button>)

    expect(primary.find('button.c-Button').hasClass('is-primary')).toBe(true)
    expect(link.find('button.c-Button').hasClass('is-link')).toBe(true)
  })

  test('Creates a button with type="submit"', () => {
    const wrapper = mount(<Button submit>Submit</Button>)

    expect(wrapper.find('button').prop('type')).toBe('submit')
  })

  test('Can create block buttons, if specified', () => {
    const wrapper = mount(<Button isBlock>Button</Button>)

    expect(wrapper.find('button.c-Button').hasClass('is-block')).toBe(true)
  })

  test('Does not render Block style, if spefied', () => {
    const wrapper = mount(<Button isBlock={false}>Button</Button>)

    expect(wrapper.find('button.c-Button').hasClass('is-block')).toBe(false)
  })
})

describe('Sizes', () => {
  test('Adds the respective classNames', () => {
    const lg = mount(<Button size="lg">Large</Button>)
    const md = mount(<Button size="md">Medium</Button>)
    const sm = mount(<Button size="sm">Small</Button>)
    const xl = mount(<Button size="lgxl">ExtraLarge</Button>)

    expect(lg.find('button.c-Button').hasClass('is-lg')).toBe(true)
    expect(md.find('button.c-Button').hasClass('is-md')).toBe(true)
    expect(sm.find('button.c-Button').hasClass('is-sm')).toBe(true)
    expect(xl.find('button.c-Button').hasClass('is-xl')).toBe(true)
  })
})

describe('States', () => {
  test('Adds the respective classNames', () => {
    const success = mount(<Button state="success">Success</Button>)
    const danger = mount(<Button state="danger">Danger</Button>)
    const warning = mount(<Button state="warning">Warning</Button>)

    expect(success.find('button.c-Button').hasClass('is-success')).toBe(true)
    expect(danger.find('button.c-Button').hasClass('is-danger')).toBe(true)
    expect(warning.find('button.c-Button').hasClass('is-warning')).toBe(true)
  })

  test('Adds the active classNames', () => {
    const wrapper = mount(<Button isActive>Button</Button>)

    expect(wrapper.find('button.c-Button').hasClass('is-active')).toBe(true)
  })

  test('Adds the focus classNames', () => {
    const wrapper = mount(<Button isFocused>Button</Button>)

    expect(wrapper.find('button.c-Button').hasClass('is-focused')).toBe(true)
  })

  test('Adds the hover classNames', () => {
    const wrapper = mount(<Button isHovered>Button</Button>)

    expect(wrapper.find('button.c-Button').hasClass('is-hovered')).toBe(true)
  })

  test('Disables the button', () => {
    const callback = jest.fn()
    const disabledButton = mount(
      <Button disabled onClick={callback}>
        Disabled
      </Button>
    )
    disabledButton.simulate('click')

    expect(disabledButton.prop('disabled')).toBe(true)
    expect(callback).not.toBeCalled()
  })
})

describe('Styles', () => {
  test('Applies suffix styles', () => {
    const wrapper = mount(<Button isSuffix>Click Me</Button>)

    expect(wrapper.find('button.c-Button').hasClass('is-suffix')).toBe(true)
  })
})

describe('Themes', () => {
  test('Does not have a theme className by default', () => {
    const wrapper = mount(<Button />)

    expect(wrapper.props().theme).not.toBeTruthy()
  })

  test('Can add theme className', () => {
    const wrapper = mount(<Button theme="editing" />)

    expect(wrapper.find('button.c-Button').hasClass('is-editing')).toBeTruthy()
  })
})

describe('Styles', () => {
  test('Renders isFirst styles', () => {
    const wrapper = mount(<Button isFirst />)

    expect(wrapper.find('button.c-Button').hasClass('is-first')).toBe(true)
  })

  test('Renders isNotOnly styles', () => {
    const wrapper = mount(<Button isNotOnly />)

    expect(wrapper.find('button.c-Button').hasClass('is-notOnly')).toBe(true)
  })

  test('Renders isLast styles', () => {
    const wrapper = mount(<Button isLast />)

    expect(wrapper.find('button.c-Button').hasClass('is-last')).toBe(true)
  })
})

describe('Events', () => {
  test('Fires onBlur callback', () => {
    const spy = jest.fn()
    const wrapper = mount(<Button onBlur={spy} />)

    wrapper.simulate('blur')

    expect(spy).toHaveBeenCalled()
  })

  test('Fires onClick callback', () => {
    const spy = jest.fn()
    const wrapper = mount(<Button onClick={spy} />)

    wrapper.simulate('click')

    expect(spy).toHaveBeenCalled()
  })

  test('Fires onFocus callback', () => {
    const spy = jest.fn()
    const wrapper = mount(<Button onFocus={spy} />)

    wrapper.simulate('focus')

    expect(spy).toHaveBeenCalled()
  })
})

describe('Focus', () => {
  test('Renders FocusUI on focus', () => {
    const wrapper = mount(<Button kind="primary" />)
    wrapper.simulate('focus')

    const o = wrapper.find('span.c-ButtonFocus')

    expect(o.length).toBe(1)
  })

  test('Does not render FocusUI on certain buttons', () => {
    const wrapper = mount(<Button kind="link" />)
    wrapper.simulate('focus')

    const o = wrapper.find('span.c-ButtonFocus')

    expect(o.length).toBe(0)
  })

  test('Does not render FocusUI if disabled', () => {
    const wrapper = mount(<Button kind="primary" disabled />)
    wrapper.simulate('focus')

    const o = wrapper.find('span.c-ButtonFocus')

    expect(o.length).toBe(0)
  })

  test('Can be rendered with prop', () => {
    const wrapper = mount(<Button kind="primary" isFocused />)

    const o = wrapper.find('span.c-ButtonFocus')

    expect(o.length).toBe(1)
  })

  test('Passes isFirst, isNotOnly, and isLast props', () => {
    const wrapper = mount(
      <Button kind="primary" isFocused isFirst isNotOnly isLast />
    )

    const o = wrapper.find('span.c-ButtonFocus')

    expect(o.length).toBe(1)
    expect(o.hasClass('is-first'))
    expect(o.hasClass('is-notOnly'))
    expect(o.hasClass('is-last'))
  })
})

describe('Ref', () => {
  test('Can retrieve button ref from ref prop', () => {
    let ref
    mount(<Button kind="primary" innerRef={node => (ref = node)} />)

    expect(ref).toBeTruthy()
  })

  test('Can retrieve button ref from buttonRef prop', () => {
    let ref
    mount(<Button kind="primary" buttonRef={node => (ref = node)} />)

    expect(ref).toBeTruthy()
    expect(ref.tagName).toBe('BUTTON')
  })
})

describe('Icon', () => {
  test('Can render an Icon', () => {
    const wrapper = mount(
      <Button>
        <Icon />
      </Button>
    )

    expect(wrapper.find('Icon').length).toBe(1)
  })

  test('Can render an Icon + Text', () => {
    const wrapper = mount(
      <Button>
        <Icon /> News
      </Button>
    )

    expect(wrapper.find('Icon').length).toBe(1)
    expect(wrapper.text()).toContain('News')
  })

  test('Provides Icon with offsetLeft prop', () => {
    const wrapper = mount(
      <Button>
        <Icon /> News
      </Button>
    )

    expect(wrapper.find('Icon').prop('offsetLeft')).toBe(true)
    expect(wrapper.find('Icon').prop('offsetRight')).toBe(false)
    expect(wrapper.text()).toContain('News')
  })

  test('Provides Icon with offsetRight prop', () => {
    const wrapper = mount(
      <Button>
        News <Icon />
      </Button>
    )

    expect(wrapper.find('Icon').prop('offsetLeft')).toBe(false)
    expect(wrapper.find('Icon').prop('offsetRight')).toBe(true)
    expect(wrapper.text()).toContain('News')
  })
})

describe('Content event propagation', () => {
  test('Allows content event propagation by default', () => {
    const spy = jest.fn()
    const wrapper = mount(
      <Button onClick={spy}>
        <Icon />
      </Button>
    )
    const el = wrapper.find('Icon').last()

    el.simulate('click')

    expect(spy).toHaveBeenCalled()
  })
})

describe('Link', () => {
  test('Can render a link, if href is defined', () => {
    const wrapper = mount(<Button href="/" />)

    expect(wrapper.find('a').length).toBeTruthy()
    expect(wrapper.find('button').length).toBeFalsy()
  })

  test('Can render a link, if to is defined', () => {
    const wrapper = mount(<Button to="/" />)

    expect(wrapper.find('a').length).toBeTruthy()
    expect(wrapper.find('button').length).toBeFalsy()
  })

  test('Can render a link based props', () => {
    const wrapper = mount(<Button href="/" target="_blank" />)
    const el = wrapper.find('a').first()

    expect(el.length).toBeTruthy()
    expect(el.prop('target')).toBe('_blank')
  })

  test('Changes back to <button>, if href is removed', () => {
    const wrapper = mount(<Button href="/" />)

    expect(wrapper.find('a').length).toBeTruthy()

    wrapper.setProps({ href: null })

    expect(wrapper.find('a').length).toBeFalsy()
    expect(wrapper.find('button').length).toBeTruthy()
  })
})

describe('Loading', () => {
  test('Add loading className, if isLoading', () => {
    const wrapper = mount(<Button isLoading />)
    const el = wrapper.find('button')

    expect(el.hasClass('is-loading')).toBeTruthy()
  })

  test('Renders a spinner if isLoading', () => {
    const wrapper = mount(<Button isLoading />)
    const el = wrapper.find('div.c-Spinner')

    expect(el.length).toBeTruthy()
  })

  test('Does not renders a spinner if not isLoading', () => {
    const wrapper = mount(<Button isLoading={false} />)
    const el = wrapper.find('div.c-Spinner')

    expect(el.length).toBeFalsy()
  })

  test('Becomes disabled if isLoading, by default', () => {
    const wrapper = mount(<Button isLoading />)
    const el = wrapper.find('button')

    expect(el.prop('disabled')).toBe(true)
  })

  test('Does not become disabled, if specified', () => {
    const wrapper = mount(<Button isLoading disableOnLoading={false} />)
    const el = wrapper.find('button')

    expect(el.prop('disabled')).toBe(false)
  })

  test('Add special spinButtonOnLoading, if isLoading and enabled', () => {
    const wrapper = mount(<Button isLoading spinButtonOnLoading />)
    const el = wrapper.find('button')

    expect(el.hasClass('is-spinButtonOnLoading')).toBeTruthy()
  })
})


<|start_filename|>src/components/ScrollableContainer/ScrollableContainer.css.js<|end_filename|>
import React from 'react'
import styled from 'styled-components'
import SimpleBar from 'simplebar-react'
import 'simplebar/dist/simplebar.min.css'

export const ContainerScrollUI = styled('div')`
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
  width: ${({ $width }) => $width};
  height: ${({ $height }) => $height};
`

export const HeaderUI = styled(({ component, ref, ...props }) =>
  React.cloneElement(component, { ref, ...props })
)`
  width: 100%;
  transition: box-shadow 0.2s;
  z-index: 3;
  flex-shrink: 0;
  flex-grow: 0;
`

export const BodyUI = styled(({ component, ref, ...props }) =>
  React.cloneElement(component, { ref, ...props })
)`
  width: 100%;
  flex-grow: 1;
  overflow: auto;
`

export const SimpleBarUI = styled(SimpleBar)`
  height: ${({ $height }) => $height};
`

export const FooterUI = styled(({ component, ref, ...props }) =>
  React.cloneElement(component, { ref, ...props })
)`
  width: 100%;
  transition: box-shadow 0.2s;
  z-index: 3;
  flex-shrink: 0;
  flex-grow: 0;
`


<|start_filename|>src/components/MessageCard/MessageCard.css.js<|end_filename|>
import styled from 'styled-components'
import { makeFontFamily, setFontSize } from '../../styles/utilities/font'
import { getColor } from '../../styles/utilities/color'
import { FONT_FAMILY } from '../../styles/configs/constants'
import { d600Effect } from '../../styles/mixins/depth.css'
import Card from '../Card'
import Button from '../Button'
import Heading from '../Heading'
import Image from '../Image'
import ArticleCard from '../ArticleCard'

export const MAX_IMAGE_SIZE = 258

const fontFamily = makeFontFamily('Barlow')

export const MessageCardUI = styled(Card)`
  border-color: transparent !important;
  background-color: white;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 17px 0 20px;
  width: 300px;
  word-break: break-word;
  display: flex;
  flex-direction: column;

  overflow: auto;
  // The margin right is necessary to move scrollbar a bit to the right, from the edge - it wouldn't be distinguishable to the user when no scrollbar
  margin-right: 2px;

  &.is-align-right {
    border-bottom-right-radius: 4px;
  }
  &.is-align-left {
    border-bottom-left-radius: 4px;
  }
  &.is-with-box-shadow {
    ${d600Effect}
  }
  &.is-mobile {
    width: 100%;

    .is-h4 {
      font-size: 20px !important;
      line-height: 24px !important;
    }

    .is-h5 {
      font-size: 14px !important;
      margin-top: 10px;
    }

    .c-Text {
      font-size: 14px !important;
      line-height: 22px;
      margin-top: 20px;
    }

    .c-Button {
      margin-top: 30px;
      font-size: 16px !important;
      height: 65px !important;
    }
  }
`

export const MessageCardWrapperUI = styled('div')`
  opacity: ${({ visible }) => (visible ? '1' : '0')};
  transform: translateY(${({ visible }) => (visible ? '0' : '12px')});
  transition: ${({ withAnimation }) =>
    withAnimation ? `all 300ms ease-in-out` : 'none'};
`

export const TitleUI = styled(Heading)`
  ${fontFamily};
  line-height: 22px !important;
  padding: 0 20px;
  flex: 0 0 auto;
`

export const SubtitleUI = styled(Heading)`
  ${setFontSize(12)};
  line-height: 18px !important;
  margin-top: 6px;
  padding: 0 20px;
  flex: 0 0 auto;
`

const editorHtmlFontSize = 14

export const ContentUI = styled.div`
  margin-top: ${({ withMargin }) => (withMargin ? '20px' : '0')};
  padding: 0 18px 0 20px;
  display: flex;
  flex-direction: column;

  & > * + * {
    margin-top: 20px;
  }
`

export const BodyUI = styled.div`
  color: ${getColor('charcoal.700')};
  font-size: ${editorHtmlFontSize}px;
  line-height: 22px;
  flex: 1 1 100%;

  p {
    font-size: ${editorHtmlFontSize}px;
    margin: 15px 0;
    padding: 0;

    &:first-child {
      margin-top: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  ul,
  ol {
    padding: 0;
    margin: 15px 0 0;

    ul.& {
      list-style-type: disc;
    }
    ol.& {
      list-style-type: decimal;
    }

    & > ul {
      list-style-type: circle;
      margin-left: 15px;
      margin-top: 0;

      & > ul {
        list-style-type: square;

        & > ul {
          list-style-type: disc;
        }
      }
    }

    & > ol {
      list-style-type: lower-latin;
      margin-left: 15px;
      margin-top: 0;

      & > ol {
        list-style-type: lower-roman;

        & > ol {
          list-style-type: decimal;
        }
      }
    }

    &:first-child {
      margin-top: 0;
    }
  }

  ul li {
    font-size: ${editorHtmlFontSize}px;
    margin-left: 30px;
    padding-left: 7px;

    @-moz-document url-prefix() {
      & {
        margin-left: 26px;
        padding-left: 12px;
      }
    }
  }

  ol li {
    font-size: ${editorHtmlFontSize}px;
    margin-left: 27px;
    padding-left: 10px;
  }

  blockquote {
    margin: 15px 0 0 15px;
    padding: 0 25px 0 20px;
    border-left: 2px solid ${getColor('grey.500')};
    color: ${getColor('charcoal.400')};

    &:first-child {
      margin-top: 0;
    }

    p {
      font-size: ${editorHtmlFontSize}px;
    }
  }

  code.inline-code {
    display: inline-block;
    color: ${getColor('red.500')};
    caret-color: ${getColor('red.500')};
    padding: 0 7px;
    font-size: 12px;
    position: relative;
    margin: 0 1px;
    background: ${getColor('grey.300')};
    border-radius: 4px;
    font-family: var(--HSDSGlobalFontFamilyMono);
    min-height: 24px;
    line-height: 24px;

    b,
    strong {
      color: ${getColor('red.500')};
    }
  }

  pre {
    font-family: var(--HSDSGlobalFontFamilyMono);
    margin: 15px 0;
    padding: 15px 25px;
    border: 1px solid ${getColor('grey.500')};
    border-radius: 2px;
    background-color: ${getColor('grey.200')};
    color: ${getColor('charcoal.800')};
    word-wrap: break-word;
    white-space: pre-wrap;
    font-size: 12px;

    &:first-child {
      margin-top: 8px;
    }

    p {
      font-size: 12px;
      margin: 0;
    }
  }

  a {
    color: ${getColor('link.base')};
    cursor: pointer;
    text-decoration: none;

    &:hover,
    &:focus {
      color: ${getColor('link.hover')};
      outline-width: 0;
      text-decoration: underline;
    }

    &:active {
      color: ${getColor('link.active')};
      text-decoration: underline;
      outline-width: 0;
    }
  }

  b,
  strong {
    font-weight: bold;
    color: ${getColor('charcoal.800')};
  }
  i,
  em {
    font-style: italic;
  }
  u {
    text-decoration: none;
    border-bottom: 1px solid currentColor;
  }
  s {
    text-decoration: line-through;
  }
`

export const ActionUI = styled('div')`
  margin-top: 20px;
  padding: 0 20px;
  flex: 0 0 auto;
`

export const ActionButtonUI = styled(Button)`
  ${setFontSize(14)};
  font-family: ${FONT_FAMILY};
  height: 54px !important;
  line-height: normal !important;
`

export const ImageUI = styled(Image)`
  border-radius: 3px;
  height: ${({ height }) => height};
  width: ${({ width }) => width};
  max-height: ${MAX_IMAGE_SIZE}px;
`

export const ImageContainerUI = styled('div')`
  display: flex;
  justify-content: center;
  width: 100%;
  max-height: ${MAX_IMAGE_SIZE}px;
`

export const UrlAttachmentImageUI = styled('div')`
  height: 80px;
  margin: 16px 0 -22px 0;
  overflow: hidden;

  img {
    border-radius: 4px;
    width: 100%;
  }
`

export const MessageArticleCardUI = styled(ArticleCard)`
  border: none;
  border-radius: 8px 4px 4px 8px !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.15) !important;
  margin-top: 6px;

  &:hover:after {
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
  }
`


<|start_filename|>src/components/DropList/DropList.togglers.css.js<|end_filename|>
import styled from 'styled-components'
import { getColor } from '../../styles/utilities/color'
import HSDSButton from '../Button'

import { FocusUI } from '../Button/Button.css'
import config from '../Button/Button.config'

import {
  focusRing,
  focusShadowWithInset,
} from '../../styles/mixins/focusRing.css'

export const NavLinkTogglerUI = styled('button')`
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 55px;
  padding: 0 18px;
  background: transparent;
  border: 0;
  font-family: var(--HSDSGlobalFontFamily);
  font-size: 14px;
  color: ${getColor('blue.300')};
  cursor: pointer;

  &.is-active {
    color: white;
  }

  .c-Icon {
    margin: 3px 0 0 3px;
  }
`

export const SplitButtonUI = styled(HSDSButton)`
  &.is-primary {
    margin-right: 0;
    ${FocusUI} {
      box-shadow: ${focusShadowWithInset};
    }
  }
`

export const SplitButtonTogglerUI = styled(HSDSButton)`
  &.SplitButton__Toggler {
    min-width: 30px !important;
    padding: 0;

    pointer-events: all;

    &.is-primary {
      box-shadow: -1px 0 0 ${getColor('blue.600')};

      ${FocusUI} {
        box-shadow: ${focusShadowWithInset};
      }

      &.is-success {
        box-shadow: -1px 0 0 ${getColor('green.600')};
      }
      &.is-danger {
        box-shadow: -1px 0 0 ${getColor('red.600')};
      }
      &[disabled] {
        box-shadow: -1px 0 0 ${getColor('grey.600')};
      }
    }

    .c-Button__content {
      padding-top: 2px;
      width: 16px;
    }
  }
`

export const SelectUI = styled('button')`
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 150px;
  height: 40px;
  padding: 0 15px;
  margin: 0;
  background: white;
  border: 0;
  box-shadow: inset 0 0 0 1px ${getColor('grey.800')};
  box-sizing: border-box;
  border-radius: 3px;
  font-family: var(--HSDSGlobalFontFamily);
  font-size: 13px;
  color: ${getColor('charcoal.600')};

  &.is-error {
    box-shadow: inset 0 0 0 2px ${getColor('red.500')};
    padding-right: 10px;
  }

  &.is-active,
  &:focus {
    outline: 0;
    box-shadow: inset 0 0 0 2px ${getColor('blue.500')};
  }

  &[disabled] {
    cursor: not-allowed;
    color: ${getColor('charcoal.200')};
  }
`

export const SelectArrowsUI = styled('div')`
  margin-left: auto;
  width: 7px;
  height: 14px;
  position: relative;

  &::before,
  &::after {
    content: '';
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    position: absolute;
    left: 0;
  }

  &::before {
    border-bottom: 6px solid ${getColor('charcoal.700')};
    top: 0;
  }

  &::after {
    border-top: 6px solid ${getColor('charcoal.700')};
    bottom: 0;
  }
`

export const SelectErrorTooltipIconUI = styled('div')`
  margin-left: 8px;
`

export const MeatButtonUI = styled('button')`
  width: 24px;
  height: 24px;
  padding: 0.5px 0px 0px 0.5px;
  border: 0;
  border-radius: 3px;
  background-color: transparent;

  &:hover {
    cursor: pointer;
  }

  &:focus {
    outline: 0;
    box-shadow: inset 0 0 0 2px ${getColor('blue.500')};
  }
`

export const IconButtonUI = styled('button')`
  ${focusRing}

  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 34px;
  padding: 5px;
  border: 0;
  border-radius: 3px;
  background-color: white;
  color: ${getColor('charcoal.400')};

  &.is-circle {
    border-radius: 200%;
    width: 36px;
    height: 36px;
    padding: 4px;
  }

  &:hover {
    cursor: pointer;
    background-color: ${getColor('grey.300')};
  }

  &:hover {
    color: ${getColor('charcoal.500')};
  }

  &.is-active,
  &[aria-expanded='true'] {
    color: ${getColor('charcoal.700')};

    &:not(:focus-visible) {
      background-color: ${getColor('grey.300')};
    }
  }

  .is-iconName-caret-down {
    margin-left: -3px;
  }
`


<|start_filename|>src/components/Pagination/Pagination.css.js<|end_filename|>
import styled from 'styled-components'
import { getColor } from '../../styles/utilities/color'
import Button from '../Button'
import config from '../Button/Button.config'
import { focusRing } from '../../styles/mixins/focusRing.css'

export const PaginationUI = styled.nav`
  padding: 0 10px;
  min-height: 36px;
  display: flex;
  align-items: center;
  width: 100%;
`

export const NavigationUI = styled('div')`
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
`

export const InformationUI = styled('div')`
  flex: 1 1 100%;
  white-space: nowrap;
  color: ${getColor('charcoal.200')};
  padding: 10px 0;
`

export const RangeUI = styled('span')`
  color: ${getColor('charcoal.600')};
  font-weight: 600;
`

export const ButtonIconUI = styled(Button)`
  ${focusRing}
  &.is-default {
    width: 26px;
    height: 26px;
  }
  &.is-default:focus,
  &.is-default.is-focused {
    color: ${config.default.colorActive};
  }

  & + & {
    margin-left: 2px;
  }
`


<|start_filename|>src/components/Condition/Condition.css.js<|end_filename|>
import styled from 'styled-components'
import { getColor } from '../../styles/utilities/color'
import Centralize from '../Centralize'
import Flexy from '../Flexy'
import Button from '../Button'
import { SplittedButton } from '../DropList/DropList.togglers'

export const config = {
  backgroundColor: getColor('grey.200'),
  border: `1px solid ${getColor('border.ui')}`,
  borderRadius: '3px',
  padding: '10px',
  optionsWidth: '170px',
  operatorBorderWidth: '2px',
  operatorHeight: '56px',
}

export const ConditionUI = styled('div')`
  color: ${getColor('text.subtle')};
`

export const ConditionContentUI = styled(Flexy)`
  background-color: ${config.backgroundColor};
  border: ${config.border};
  border-radius: ${config.borderRadius};
  padding: ${config.padding};
`

export const OptionsWrapperUI = styled(Flexy.Item)`
  width: ${config.optionsWidth};

  .SelectTagToggler {
    width: 100%;
  }
`

export const SelectedOptionUI = styled(Flexy)`
  align-items: center;
  height: 40px;
  font-weight: 500;
  font-size: 14px;
  color: ${getColor('charcoal.700')};
  padding: 0 16px;
`

export const OperatorUI = styled('div')`
  background: ${getColor('grey.600')};
  border-radius: ${config.operatorBorderWidth};
  box-shadow: 0 0 0 ${config.operatorBorderWidth} white;
  color: white;
  display: inline-block;
  margin: 5px 0;
  padding: 3px 5px;
  text-transform: uppercase;
  line-height: 1;

  &.is-borderless {
    box-shadow: none;
  }
`

export const SplittedButtonUI = styled(SplittedButton)`
  & .c-ControlGroupItem {
    margin-top: 2px;
    margin-bottom: 2px;

    & .SplitButton__Action {
      min-width: 32px;
      text-transform: uppercase;
      padding: 0 6px;
    }

    & .SplitButton__Toggler {
      /* There's already important used in a component, so I have to use it to overwrite */
      min-width: 20px !important;
      width: 20px;
    }

    & ul {
      overflow-y: hidden;
    }

    & .DropList__Select {
      width: 80px;
    }
  }
`

export const ButtonWrapperUI = styled('div')`
  ${({ align }) => `text-align: ${align};`};
`

export const ButtonUI = styled(Button)`
  box-shadow: 0 0 0 ${config.operatorBorderWidth} white;
  margin-bottom: ${config.operatorBorderWidth};
  margin-top: ${config.operatorBorderWidth};
  text-transform: uppercase;

  &.is-borderless {
    box-shadow: none;
    margin-bottom: 0;
    margin-top: 0;
  }

  .c-Icon {
    margin: 0 0 0 -8px !important;
  }

  &.is-or {
    .c-Button__content {
      position: relative;
      top: -1px;
    }

    .c-Icon {
      margin: -0.5px -2px -0.5px -6px !important;
    }
  }
`

export const OperatorWrapperBaseUI = styled(Centralize)`
  position: relative;
  height: ${config.operatorHeight};

  &::before {
    background: ${getColor('border.ui')};
    bottom: 0;
    content: '';
    height: 100%;
    left: 50%;
    margin-left: -0.5px;
    position: absolute;
    top: 0;
    width: 1px;
  }

  > * {
    z-index: 1;
  }
`

export const AndWrapperUI = OperatorWrapperBaseUI


<|start_filename|>src/components/SimpleModal/SimpleModal.css.js<|end_filename|>
import styled from 'styled-components'
import { getColor } from '../../styles/utilities/color'
import { rgba } from '../../utilities/color'
import { defaultAnimation as overlayAnimation } from '../../hooks/useAnimatedRender'

export const CloseModalButtonUI = styled('button')`
  position: absolute;
  padding: 5px;
  background: #fff;
  border: 0;
  border-radius: 50%;
  color: ${getColor('charcoal.400')};
  top: 10px;
  right: 10px;
  height: 28px;
  width: 28px;
  background-color: ${getColor('grey.300')};
  z-index: ${({ $zIndex }) => $zIndex};

  &:hover {
    color: ${getColor('charcoal.600')};
    background-color: ${getColor('grey.400')};
    cursor: pointer;
  }

  &:active,
  &:focus {
    outline: 0;
    box-shadow: 0 0 0 2px ${getColor('blue.400')};
  }
`

export const SimpleModalOverlayUI = styled('div')`
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: ${rgba(getColor('blue.800'), 0.7)};
  z-index: ${({ $zIndex }) => $zIndex};
  ${overlayAnimation}
`

export const SimpleModalUI = styled('div')`
  position: relative;
  width: ${({ width }) => width};
  height: ${({ height }) => height};
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
`


<|start_filename|>src/components/TagList/TagList.css.js<|end_filename|>
import styled from 'styled-components'
import { getColor } from '../../styles/utilities/color'
import { setFontSize } from '../../styles/utilities/font'
import { darken } from '../../utilities/color'
import { focusRing } from '../../styles/mixins/focusRing.css'

export const ShowAllButtonUI = styled.button`
  ${focusRing}
  margin-left: 8px;
  border-radius: 3px;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  height: 28px;
  min-width: 28px;
  border: 1px solid ${getColor('grey.400')};
  color: ${getColor('charcoal.600')};
  background-color: ${getColor('grey.400')};
  box-shadow: none;
  font-size: 12px;
  line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

  &:hover {
    cursor: pointer;
    border-color: ${darken(getColor('grey.400'), 30)};
  }
`

export const ListUI = styled.ul`
  display: block;
  margin: 0 0 8px 0;
  padding: 0;
  max-width: 100%;
`

export const ItemUI = styled.li`
  display: inline-flex;
  margin: 0 8px 8px 0;
  max-width: 100%;
  padding: 0;
  align-items: center;
  list-style: none;
`

export const TagListUI = styled('div')`
  &.is-sm {
    ${ListUI} {
      margin: 0 0 4px 0;
    }
    ${ItemUI} {
      margin: 0 4px 4px 0;
    }

    ${ShowAllButtonUI} {
      height: 18px;
      min-width: 18px;
    }
  }

  &.is-md {
    ${ListUI} {
      margin: 0 0 8px 0;
    }
    ${ItemUI} {
      margin: 0 4px 4px 0;
    }

    ${ShowAllButtonUI} {
      height: 22px;
      min-width: 22px;
    }
  }
`

export const ClearAllUI = styled('button')`
  ${focusRing}
  border: none;
  background: none;
  cursor: pointer;
  padding: 0 4px;
  height: 16px;
  line-height: 1;
  margin-left: 8px;
  color: ${getColor('charcoal.200')};
  ${setFontSize(12)};

  &:hover {
    color: ${getColor('charcoal.400')};
  }
`

export default TagListUI
