hunk.code_window:       globals: globals,
       },
       external: external,
       plugins: [babel(babelOptions(false)), resolve(), commonjs()],
     },
     {
       input: 'src/index.umd.js',
       output: {
         name: name,
  
hunk.labels: keep keep keep replace keep keep keep keep keep
hunk.after_edit:     plugins: [babel(babelOptions()), resolve(), commonjs()],
  
hunk.file_path: rollup.config.js
hunk.type: replace
file: import React from 'react';
  
  import Select, { components } from '../../src';
  import { colourOptions, groupedOptions } from '../data';
  import EditorPanelIcon from '@atlaskit/icon/glyph/editor/panel';
  import Tooltip from '@atlaskit/tooltip';
  
  const groupStyles = {
    border: '2px dotted #2684FF',
    color: 'white',
    background: '#2684FF',
    padding: '5px 0px',
    display: 'flex',
  };
  
  const GroupHeading = (props) => (
    <div style={groupStyles}>
      <components.GroupHeading {...props}/>
      <Tooltip content="Custom GroupHeading Component">
        <EditorPanelIcon/>
      </Tooltip>
    </div>
  );
  
  export default () => (
    <Select
      defaultValue={colourOptions[1]}
      options={groupedOptions}
      components={{ GroupHeading }}
      styles={{ groupHeading: (base) => ({ ...base, flex: '1 1', color: 'white', margin: 0 }) }}
    />
  );
  