hunk.code_window: export type Props = {
     /* Aria label (for assistive tech) */
     'aria-label'?: string,
     /* HTML ID of an element that should be used as the label (for assistive tech) */
     'aria-labelledby'?: string,
     ariaLiveMessages?: AriaLiveMessagesProps,
     /* Focus the control when it is mounted */
     autoFocus?: boolean,
     /* Remove the currently focused option when the user presses backspace when Select isClearable or isMulti */
     backspaceRemovesValue: boolean,
  
hunk.labels: keep keep keep keep add keep keep keep keep keep
hunk.after_edit:   /* Used to set the priority with which screen reader should treat updates to live regions. The possible settings are: off, polite (default) or assertive */
     'aria-live'?: AriaLiveProp,
     /* Customize the messages used by the aria-live component */
  
hunk.file_path: packages/react-select/src/Select.js
hunk.type: add
file: import React from 'react';
  import chroma from 'chroma-js';
  
  import { colourOptions } from '../data';
  import Select from 'react-select';
  
  const colourStyles = {
    control: styles => ({ ...styles, backgroundColor: 'white' }),
    option: (styles, { data, isDisabled, isFocused, isSelected }) => {
      const color = chroma(data.color);
      return {
        ...styles,
        backgroundColor: isDisabled
          ? null
          : isSelected
          ? data.color
          : isFocused
          ? color.alpha(0.1).css()
          : null,
        color: isDisabled
          ? '#ccc'
          : isSelected
          ? chroma.contrast(color, 'white') > 2
            ? 'white'
            : 'black'
          : data.color,
        cursor: isDisabled ? 'not-allowed' : 'default',
  
        ':active': {
          ...styles[':active'],
          backgroundColor:
            !isDisabled && (isSelected ? data.color : color.alpha(0.3).css()),
        },
      };
    },
    multiValue: (styles, { data }) => {
      const color = chroma(data.color);
      return {
        ...styles,
        backgroundColor: color.alpha(0.1).css(),
      };
    },
    multiValueLabel: (styles, { data }) => ({
      ...styles,
      color: data.color,
    }),
    multiValueRemove: (styles, { data }) => ({
      ...styles,
      color: data.color,
      ':hover': {
        backgroundColor: data.color,
        color: 'white',
      },
    }),
  };
  
  export default () => (
    <Select
      closeMenuOnSelect={false}
      defaultValue={[colourOptions[0], colourOptions[1]]}
      isMulti
      options={colourOptions}
      styles={colourStyles}
    />
  );
  