text: import React from 'react';
  import styled, { css } from 'react-emotion';
  import ReactToggled from 'react-toggled';
  import { colors, colorsRaw, shadows, transitions } from './styles';
  
  const ToggleContainer = styled.span`
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 40px;
    height: 20px;
    cursor: pointer;
  `;
  
  const ToggleHandle = styled.span`
    ${shadows.dropDeep};
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: ${colorsRaw.white};
    transition: transform ${transitions.main};
  
    ${props =>
      props.isActive &&
      css`
        transform: translateX(20px);
      `};
  `;
  
  const ToggleBackground = styled.span`
    width: 34px;
    height: 14px;
    border-radius: 10px;
    background-color: ${colors.active};
  `;
  
  const Toggle = ({
    active,
    onChange,
    onFocus,
    onBlur,
    className,
    Container = ToggleContainer,
    Background = ToggleBackground,
    Handle = ToggleHandle,
  }) => (
    <ReactToggled on={active} onToggle={onChange}>
      {({ on, getElementTogglerProps }) => (
        <Container
          role="switch"
          aria-checked={on.toString()}
          onFocus={onFocus}
          onBlur={onBlur}
          className={className}
          {...getElementTogglerProps()}
        >
          <Background isActive={on} />
          <Handle isActive={on} />
        </Container>
      )}
    </ReactToggled>
  );
  
  const StyledToggle = styled(Toggle)``;
  
  export { StyledToggle as default, ToggleContainer, ToggleBackground, ToggleHandle };
  