text: import React from 'react';
  import reactCSS from 'reactcss';
  import merge from 'lodash-es/merge';
  import * as color from '../../helpers/color';
  
  import { ColorWrap, EditableInput, Raised } from '../common';
  
  export var Material = function Material(_ref) {
    var onChange = _ref.onChange,
        hex = _ref.hex,
        rgb = _ref.rgb,
        _ref$styles = _ref.styles,
        passedStyles = _ref$styles === undefined ? {} : _ref$styles,
        _ref$className = _ref.className,
        className = _ref$className === undefined ? '' : _ref$className;
  
    var styles = reactCSS(merge({
      'default': {
        material: {
          width: '98px',
          height: '98px',
          padding: '16px',
          fontFamily: 'Roboto'
        },
        HEXwrap: {
          position: 'relative'
        },
        HEXinput: {
          width: '100%',
          marginTop: '12px',
          fontSize: '15px',
          color: '#333',
          padding: '0px',
          border: '0px',
          borderBottom: '2px solid ' + hex,
          outline: 'none',
          height: '30px'
        },
        HEXlabel: {
          position: 'absolute',
          top: '0px',
          left: '0px',
          fontSize: '11px',
          color: '#999999',
          textTransform: 'capitalize'
        },
        Hex: {
          style: {}
        },
        RGBwrap: {
          position: 'relative'
        },
        RGBinput: {
          width: '100%',
          marginTop: '12px',
          fontSize: '15px',
          color: '#333',
          padding: '0px',
          border: '0px',
          borderBottom: '1px solid #eee',
          outline: 'none',
          height: '30px'
        },
        RGBlabel: {
          position: 'absolute',
          top: '0px',
          left: '0px',
          fontSize: '11px',
          color: '#999999',
          textTransform: 'capitalize'
        },
        split: {
          display: 'flex',
          marginRight: '-10px',
          paddingTop: '11px'
        },
        third: {
          flex: '1',
          paddingRight: '10px'
        }
      }
    }, passedStyles));
  
    var handleChange = function handleChange(data, e) {
      if (data.hex) {
        color.isValidHex(data.hex) && onChange({
          hex: data.hex,
          source: 'hex'
        }, e);
      } else if (data.r || data.g || data.b) {
        onChange({
          r: data.r || rgb.r,
          g: data.g || rgb.g,
          b: data.b || rgb.b,
          source: 'rgb'
        }, e);
      }
    };
  
    return React.createElement(
      Raised,
      { styles: passedStyles },
      React.createElement(
        'div',
        { style: styles.material, className: 'material-picker ' + className },
        React.createElement(EditableInput, {
          style: { wrap: styles.HEXwrap, input: styles.HEXinput, label: styles.HEXlabel },
          label: 'hex',
          value: hex,
          onChange: handleChange
        }),
        React.createElement(
          'div',
          { style: styles.split, className: 'flexbox-fix' },
          React.createElement(
            'div',
            { style: styles.third },
            React.createElement(EditableInput, {
              style: { wrap: styles.RGBwrap, input: styles.RGBinput, label: styles.RGBlabel },
              label: 'r', value: rgb.r,
              onChange: handleChange
            })
          ),
          React.createElement(
            'div',
            { style: styles.third },
            React.createElement(EditableInput, {
              style: { wrap: styles.RGBwrap, input: styles.RGBinput, label: styles.RGBlabel },
              label: 'g',
              value: rgb.g,
              onChange: handleChange
            })
          ),
          React.createElement(
            'div',
            { style: styles.third },
            React.createElement(EditableInput, {
              style: { wrap: styles.RGBwrap, input: styles.RGBinput, label: styles.RGBlabel },
              label: 'b',
              value: rgb.b,
              onChange: handleChange
            })
          )
        )
      )
    );
  };
  
  export default ColorWrap(Material);