hunk.code_window:                   "cacheOptions": false,
                     "captureMenuScroll": false,
                     "closeMenuOnSelect": true,
                     "components": Object {},
                     "controlShouldRenderValue": true,
                     "createOptionLabelFirst": false,
                     "defaultInputValue": "",
                     "defaultMenuIsOpen": false,
                     "defaultOptions": false,
                     "defaultValue": null,
                     "escapeClearsValue": false,
  
hunk.labels: keep keep keep keep keep replace keep keep keep keep keep
hunk.after_edit:                   "createOptionPosition": "last",
  
hunk.file_path: src/__tests__/__snapshots__/AsyncCreatable.test.js.snap
hunk.type: replace
file: import React, { Component } from 'react';
  import CodeSandboxer from 'react-codesandboxer';
  import { replaceImports } from 'codesandboxer';
  import { CodeBlock } from './markdown/renderer';
  import pkg from '../package.json';
  import { colors } from '../src/theme';
  import Svg from './Svg';
  
  const gitInfo = {
    account: 'JedWatson',
    repository: 'react-select',
    branch: 'v2',
    host: 'github',
  };
  
  const importReplacements = [
    ['src/*', 'react-select/lib/'],
    ['src', 'react-select'],
  ];
  
  const sourceUrl = `https://github.com/${gitInfo.account}/react-select/tree/${
    gitInfo.branch
  }`;
  
  export default class ExampleWrapper extends Component {
    state = { isHovered: false, showCode: false };
    static defaultProps = { isEditable: true };
    handleEnter = () => this.setState({ isHovered: true });
    handleLeave = () => this.setState({ isHovered: false });
    renderCodeSample = () => {
      let { raw } = this.props;
      let { showCode } = this.state;
  
      if (!showCode || !raw) {
        return null;
      } else {
        return (
          <CodeBlock
            codeinfo={['jsx']}
            /*
              CodeSandboxer currently does not export its tools to resolve absolute
              paths, so we replace on relative paths. This will cause incorrect
              displays if our examples are not from docs/examples/file.js
            */
            literal={replaceImports(raw, [
              ['../../src/*', 'react-select/lib/'],
              ['../../src', 'react-select'],
            ])}
          />
        );
      }
    };
  
    renderSourceViewOption = () => {
      let { raw } = this.props;
      let { showCode } = this.state;
  
      if (!raw) {
        return (
          <Action
            href={`${sourceUrl}/${this.props.urlPath}`}
            tag="a"
            target="_blank"
            title="View Source"
          >
            <SourceIcon />
          </Action>
        );
      } else {
        return (
          <Action
            onClick={() => this.setState({ showCode: !showCode })}
            title="View Source"
          >
            <SourceIcon />
          </Action>
        );
      }
    };
  
    renderCSBButton = () => {
      let { isEditable, raw, urlPath } = this.props;
  
      if (isEditable) {
        return (
          <CodeSandboxer
            example={raw}
            examplePath={urlPath}
            pkgJSON={pkg}
            gitInfo={gitInfo}
            importReplacements={importReplacements}
            dependencies={{
              [pkg.name]: pkg.version,
            }}
          >
            {({ isLoading }) => (
              <Action title="Edit in CodeSandbox">
                {isLoading ? <Spinner /> : <NewWindowIcon />}
              </Action>
            )}
          </CodeSandboxer>
        );
      } else {
        return null;
      }
    };
  
    render() {
      const { isHovered } = this.state;
  
      return (
        <div onMouseEnter={this.handleEnter} onMouseLeave={this.handleLeave}>
          <ExampleHeading>
            <h4>{this.props.label}</h4>
            <Actions show={isHovered}>
              {this.renderSourceViewOption()}
              {this.renderCSBButton()}
            </Actions>
          </ExampleHeading>
          {this.renderCodeSample()}
          {this.props.children}
        </div>
      );
    }
  }
  
  const ExampleHeading = (props: any) => (
    <div
      css={{
        alignItems: 'center',
        display: 'flex',
        justifyContent: 'space-between',
        paddingBottom: '1em',
        paddingTop: '1.25em',
  
        '& > h4': {
          margin: 0,
        },
      }}
      {...props}
    />
  );
  
  // ==============================
  // Source & Sandbox Actions
  // ==============================
  
  const SourceIcon = (props: any) => (
    <Svg alt="Source Code Icon" size={16} {...props}>
      <path d="M5.719 14.75c-0.236 0-0.474-0.083-0.664-0.252l-5.060-4.498 5.341-4.748c0.412-0.365 1.044-0.33 1.411 0.083s0.33 1.045-0.083 1.412l-3.659 3.253 3.378 3.002c0.413 0.367 0.45 0.999 0.083 1.412-0.197 0.223-0.472 0.336-0.747 0.336zM14.664 14.748l5.341-4.748-5.060-4.498c-0.413-0.367-1.045-0.33-1.411 0.083s-0.33 1.045 0.083 1.412l3.378 3.003-3.659 3.252c-0.413 0.367-0.45 0.999-0.083 1.412 0.197 0.223 0.472 0.336 0.747 0.336 0.236 0 0.474-0.083 0.664-0.252zM9.986 16.165l2-12c0.091-0.545-0.277-1.060-0.822-1.151-0.547-0.092-1.061 0.277-1.15 0.822l-2 12c-0.091 0.545 0.277 1.060 0.822 1.151 0.056 0.009 0.11 0.013 0.165 0.013 0.48 0 0.904-0.347 0.985-0.835z" />
    </Svg>
  );
  const NewWindowIcon = (props: any) => (
    <Svg alt="New Window Icon" size={16} {...props}>
      <path d="M18.174 1.826c-1.102-1.102-2.082-0.777-2.082-0.777l-8.639 8.632-1.453 4.319 4.317-1.454 8.634-8.638c0 0 0.324-0.98-0.777-2.082zM10.605 11.605l-0.471 0.47-1.473 0.5c-0.104-0.24-0.234-0.477-0.498-0.74s-0.5-0.394-0.74-0.498l0.5-1.473 0.471-0.47c0 0 0.776-0.089 1.537 0.673 0.762 0.761 0.674 1.538 0.674 1.538zM16 17h-13v-13h5l2-2h-7c-1.1 0-2 0.9-2 2v13c0 1.1 0.9 2 2 2h13c1.1 0 2-0.9 2-2v-7l-2 2v5z" />
    </Svg>
  );
  
  type ActionProps = {
    children: string,
    css?: Object,
    tag: 'a' | 'button',
  };
  const Action = ({ css, tag: Tag = 'button', ...props }: ActionProps) => {
    return (
      <Tag
        css={{
          alignItems: 'center',
          background: 0,
          border: 0,
          borderRadius: 3,
          boxSizing: 'border-box',
          color: colors.neutral40,
          cursor: 'pointer',
          display: 'flex',
          fontSize: 'inherit',
          height: 24,
          marginLeft: 2,
          justifyContent: 'center',
          position: 'relative',
          transition: 'background-color 150ms, box-shadow 150ms, color 150ms',
          width: 30,
  
          ':hover': {
            backgroundColor: colors.neutral5,
            color: colors.text,
            outline: 0,
          },
          ':active': {
            backgroundColor: colors.neutral10,
            bottom: -1,
          },
          ':focus': {
            outline: 0,
          },
  
          ...css,
        }}
        {...props}
      />
    );
  };
  const Actions = ({ show, ...props }) => (
    <div
      css={{
        alignItems: 'center',
        display: 'flex',
        justifyContent: 'space-between',
        opacity: show ? 1 : 0,
        transition: 'opacity 260ms, visibility 260ms',
        transitionDelay: '260ms',
        visibility: show ? 'visible' : 'hidden',
      }}
      {...props}
    />
  );
  
  // ==============================
  // Spinner
  // ==============================
  
  const Spinner = () => {
    const offset = 187;
    const duration = '1.4s';
    const size = 16;
  
    return (
      <div css={{ height: size, width: size }}>
        <style>{`
        @keyframes rotator {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(270deg); }
        }
  
        @keyframes dash {
         0% { stroke-dashoffset: ${offset}; }
         50% {
           stroke-dashoffset: ${offset / 4};
           transform:rotate(135deg);
         }
         100% {
           stroke-dashoffset: ${offset};
           transform:rotate(450deg);
         }
        }`}</style>
        <svg
          css={{ animation: `rotator ${duration} linear infinite` }}
          width={size}
          height={size}
          viewBox="0 0 66 66"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle
            css={{
              strokeDasharray: offset,
              strokeDashoffset: 0,
              transformOrigin: 'center',
              animation: `dash ${duration} ease-in-out infinite`,
            }}
            fill="none"
            stroke="currentColor"
            strokeWidth="7"
            strokeLinecap="round"
            cx="33"
            cy="33"
            r="30"
          />
        </svg>
      </div>
    );
  };
  