@lingk/sync 0.1.74 → 0.1.76

package/build/main.js

@@ -335,7 +335,7 @@ module.exports =
 	              });
 	
 	              var resources = [];
-	              bundle.resources && bundle.resources.forEach(function (rsc) {
+	              bundle.resources && bundle.resources.forEach(function (rsc, rscIndex) {
 	
 	                //get resource and joinKey for bundleResource (check both metadatas)
 	                var resourceProvider = rsc.provider.replace('Reader', '').toLowerCase();
@@ -398,7 +398,11 @@ module.exports =
 	                    provider: resourceProvider
 	                  }, deNestedJoinKey.property && { joinKeyName: deNestedJoinKey.property }, joinKeyResourceName && { joinKeyResource: joinKeyResourceName }, deNestedJoinKey.parentsArray && deNestedJoinKey.parentsArray.length > 0 && { joinKeyParents: deNestedJoinKey.parentsArray }, deNestedPrimaryKey.property && { primaryKeyName: deNestedPrimaryKey.property }, primaryKeyResourceName && { primaryKeyResource: primaryKeyResourceName }, deNestedPrimaryKey.parentsArray && deNestedPrimaryKey.parentsArray.length > 0 && { primaryKeyParents: deNestedPrimaryKey.parentsArray }, {
 	                    joinType: rsc.joinType || 'LEFT JOIN'
-	                  }, rscResource.parentRef && { parentRef: rscResource.parentRef }, rsc.parameterFilters && { parameterFilters: rsc.parameterFilters }));
+	                  }, rscResource.parentRef && { parentRef: rscResource.parentRef }, rsc.parameterFilters && { parameterFilters: rsc.parameterFilters }, {
+	                    level: rsc.level || (rscIndex === 0 ? 0 : 1)
+	                  }, primaryKeyResourceName && {
+	                    parentNameAndProvider: primaryKeyResourceName + '_' + resourceProvider
+	                  }));
 	                }
 	              }); // end bundle.resource.forEach
 	
@@ -625,7 +629,7 @@ module.exports =
 /***/ function(module, exports, __webpack_require__) {
 
 	var dP         = __webpack_require__(18)
-	  , createDesc = __webpack_require__(34);
+	  , createDesc = __webpack_require__(35);
 	module.exports = __webpack_require__(9) ? function(object, key, value){
 	  return dP.f(object, key, createDesc(1, value));
 	} : function(object, key, value){
@@ -707,7 +711,7 @@ module.exports =
 /***/ function(module, exports, __webpack_require__) {
 
 	// to indexed object, toObject with fallback for non-array-like ES3 strings
-	var IObject = __webpack_require__(31)
+	var IObject = __webpack_require__(32)
 	  , defined = __webpack_require__(16);
 	module.exports = function(it){
 	  return IObject(defined(it));
@@ -924,8 +928,8 @@ module.exports =
 /* 25 */
 /***/ function(module, exports, __webpack_require__) {
 
-	var shared = __webpack_require__(35)('keys')
-	  , uid    = __webpack_require__(37);
+	var shared = __webpack_require__(36)('keys')
+	  , uid    = __webpack_require__(38);
 	module.exports = function(key){
 	  return shared[key] || (shared[key] = uid(key));
 	};
@@ -1495,6 +1499,42 @@ module.exports =
 
 /***/ },
 /* 27 */
+/***/ function(module, exports, __webpack_require__) {
+
+	/**
+	 * Copyright 2013-present, Facebook, Inc.
+	 * All rights reserved.
+	 *
+	 * This source code is licensed under the BSD-style license found in the
+	 * LICENSE file in the root directory of this source tree. An additional grant
+	 * of patent rights can be found in the PATENTS file in the same directory.
+	 */
+	
+	if (false) {
+	  var REACT_ELEMENT_TYPE = (typeof Symbol === 'function' &&
+	    Symbol.for &&
+	    Symbol.for('react.element')) ||
+	    0xeac7;
+	
+	  var isValidElement = function(object) {
+	    return typeof object === 'object' &&
+	      object !== null &&
+	      object.$$typeof === REACT_ELEMENT_TYPE;
+	  };
+	
+	  // By explicitly using `prop-types` you are opting into new development behavior.
+	  // http://fb.me/prop-types-in-prod
+	  var throwOnDirectAccess = true;
+	  module.exports = require('./factoryWithTypeCheckers')(isValidElement, throwOnDirectAccess);
+	} else {
+	  // By explicitly using `prop-types` you are opting into new production behavior.
+	  // http://fb.me/prop-types-in-prod
+	  module.exports = __webpack_require__(176)();
+	}
+
+
+/***/ },
+/* 28 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -1507,15 +1547,15 @@ module.exports =
 	
 	var _react2 = _interopRequireDefault(_react);
 	
-	var _propTypes = __webpack_require__(39);
+	var _propTypes = __webpack_require__(27);
 	
 	var _propTypes2 = _interopRequireDefault(_propTypes);
 	
-	var _TransitionGroup = __webpack_require__(203);
+	var _TransitionGroup = __webpack_require__(204);
 	
 	var _TransitionGroup2 = _interopRequireDefault(_TransitionGroup);
 	
-	var _CSSTransitionGroupChild = __webpack_require__(202);
+	var _CSSTransitionGroupChild = __webpack_require__(203);
 	
 	var _CSSTransitionGroupChild2 = _interopRequireDefault(_CSSTransitionGroupChild);
 	
@@ -1593,7 +1633,7 @@ module.exports =
 	module.exports = exports['default'];
 
 /***/ },
-/* 28 */
+/* 29 */
 /***/ function(module, exports) {
 
 	var toString = {}.toString;
@@ -1603,7 +1643,7 @@ module.exports =
 	};
 
 /***/ },
-/* 29 */
+/* 30 */
 /***/ function(module, exports, __webpack_require__) {
 
 	var isObject = __webpack_require__(14)
@@ -1615,7 +1655,7 @@ module.exports =
 	};
 
 /***/ },
-/* 30 */
+/* 31 */
 /***/ function(module, exports) {
 
 	// IE 8- don't enum bug keys
@@ -1624,30 +1664,30 @@ module.exports =
 	).split(',');
 
 /***/ },
-/* 31 */
+/* 32 */
 /***/ function(module, exports, __webpack_require__) {
 
 	// fallback for non-array-like ES3 and non-enumerable old V8 strings
-	var cof = __webpack_require__(28);
+	var cof = __webpack_require__(29);
 	module.exports = Object('z').propertyIsEnumerable(0) ? Object : function(it){
 	  return cof(it) == 'String' ? it.split('') : Object(it);
 	};
 
 /***/ },
-/* 32 */,
-/* 33 */
+/* 33 */,
+/* 34 */
 /***/ function(module, exports, __webpack_require__) {
 
 	// 19.1.2.14 / 15.2.3.14 Object.keys(O)
 	var $keys       = __webpack_require__(46)
-	  , enumBugKeys = __webpack_require__(30);
+	  , enumBugKeys = __webpack_require__(31);
 	
 	module.exports = Object.keys || function keys(O){
 	  return $keys(O, enumBugKeys);
 	};
 
 /***/ },
-/* 34 */
+/* 35 */
 /***/ function(module, exports) {
 
 	module.exports = function(bitmap, value){
@@ -1660,7 +1700,7 @@ module.exports =
 	};
 
 /***/ },
-/* 35 */
+/* 36 */
 /***/ function(module, exports, __webpack_require__) {
 
 	var global = __webpack_require__(6)
@@ -1671,7 +1711,7 @@ module.exports =
 	};
 
 /***/ },
-/* 36 */
+/* 37 */
 /***/ function(module, exports, __webpack_require__) {
 
 	// 7.1.13 ToObject(argument)
@@ -1681,7 +1721,7 @@ module.exports =
 	};
 
 /***/ },
-/* 37 */
+/* 38 */
 /***/ function(module, exports) {
 
 	var id = 0
@@ -1691,7 +1731,7 @@ module.exports =
 	};
 
 /***/ },
-/* 38 */
+/* 39 */
 /***/ function(module, exports, __webpack_require__) {
 
 	var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -1744,42 +1784,6 @@ module.exports =
 	}());
 
 
-/***/ },
-/* 39 */
-/***/ function(module, exports, __webpack_require__) {
-
-	/**
-	 * Copyright 2013-present, Facebook, Inc.
-	 * All rights reserved.
-	 *
-	 * This source code is licensed under the BSD-style license found in the
-	 * LICENSE file in the root directory of this source tree. An additional grant
-	 * of patent rights can be found in the PATENTS file in the same directory.
-	 */
-	
-	if (false) {
-	  var REACT_ELEMENT_TYPE = (typeof Symbol === 'function' &&
-	    Symbol.for &&
-	    Symbol.for('react.element')) ||
-	    0xeac7;
-	
-	  var isValidElement = function(object) {
-	    return typeof object === 'object' &&
-	      object !== null &&
-	      object.$$typeof === REACT_ELEMENT_TYPE;
-	  };
-	
-	  // By explicitly using `prop-types` you are opting into new development behavior.
-	  // http://fb.me/prop-types-in-prod
-	  var throwOnDirectAccess = true;
-	  module.exports = require('./factoryWithTypeCheckers')(isValidElement, throwOnDirectAccess);
-	} else {
-	  // By explicitly using `prop-types` you are opting into new production behavior.
-	  // http://fb.me/prop-types-in-prod
-	  module.exports = __webpack_require__(176)();
-	}
-
-
 /***/ },
 /* 40 */
 /***/ function(module, exports) {
@@ -1899,7 +1903,7 @@ module.exports =
 /***/ function(module, exports, __webpack_require__) {
 
 	module.exports = !__webpack_require__(9) && !__webpack_require__(12)(function(){
-	  return Object.defineProperty(__webpack_require__(29)('div'), 'a', {get: function(){ return 7; }}).a != 7;
+	  return Object.defineProperty(__webpack_require__(30)('div'), 'a', {get: function(){ return 7; }}).a != 7;
 	});
 
 /***/ },
@@ -2664,7 +2668,7 @@ module.exports =
 	
 	    // BUNDLES
 	    if (group.resources) {
-	      group.resources = group.resources.map(function (rsc) {
+	      group.resources = group.resources.map(function (rsc, rscIndex) {
 	        //get resource source (check both metadatas)
 	        var dataSourceMetadata = rsc.provider.toLowerCase() === targetProvider.toLowerCase() ? targetMetadata : sourceMetadata;
 	        var sourceResource = dataSourceMetadata.find(function (metaRsc) {
@@ -2715,7 +2719,10 @@ module.exports =
 	            joinType: rsc.joinType
 	          }, rsc.recordTypeId && { recordTypeId: rsc.recordTypeId }, rsc.parameterFilters && { parameterFilters: rsc.parameterFilters.filter(function (pf) {
 	              return pf.val;
-	            }) });
+	            }) }, {
+	            level: rsc.level || (rscIndex === 0 ? 0 : 1),
+	            parentNameAndProvider: primaryKeyResource + '_' + rsc.provider.toLowerCase()
+	          });
 	        } else return null;
 	      });
 	    }
@@ -4616,7 +4623,7 @@ module.exports =
 	
 	var _react2 = _interopRequireDefault(_react);
 	
-	var _propTypes = __webpack_require__(39);
+	var _propTypes = __webpack_require__(27);
 	
 	var _propTypes2 = _interopRequireDefault(_propTypes);
 	
@@ -5473,7 +5480,7 @@ module.exports =
 	  };
 	}
 	
-	function callGenerateRecipe(tenantId, appId, typeId, typeGuid, title, piGuid, mappingGuid, sourceMetadata, destinationMetadata, isManagedPackage, onGenerationError) {
+	function callGenerateRecipe(tenantId, appId, typeId, typeGuid, title, piGuid, mappingGuid, sourceMetadata, destinationMetadata, isManagedPackage, onGenerationError, envName) {
 	  return function (dispatch, getState, api) {
 	    var _getState13 = getState(),
 	        config = _getState13.config;
@@ -5487,7 +5494,8 @@ module.exports =
 	        "schemaMappingGuid": mappingGuid,
 	        "sourceSchema": sourceMetadata,
 	        "destinationSchema": destinationMetadata,
-	        "isManagedPackage": isManagedPackage
+	        "isManagedPackage": isManagedPackage,
+	        "environment": envName
 	      }
 	    }).then(function (res) {
 	      return res;
@@ -5512,7 +5520,7 @@ module.exports =
 	      }
 	    }).then(function (pi) {
 	      if (map.mappings && map.mappings.length > 0 && deployment) {
-	        dispatch(callGenerateRecipe(tenantId, appId, typeId, typeGuid, title, pi.productizedIntegrationGuid, map.schemaMappingGuid, sourceMetadata, destinationMetadata, isManagedPackage, onGenerationError)).then(function (generatedRecipe) {
+	        dispatch(callGenerateRecipe(tenantId, appId, typeId, typeGuid, title, pi.productizedIntegrationGuid, map.schemaMappingGuid, sourceMetadata, destinationMetadata, isManagedPackage, onGenerationError, envName)).then(function (generatedRecipe) {
 	          onGenerate();
 	          if (deployment) {
 	            if (deployment.type === 'once') {
@@ -5747,7 +5755,7 @@ module.exports =
 	function tryGetCredentials(tenantId, appId, credentialType, credsConfig, envName) {
 	  return function (dispatch, getState, api) {
 	    var isOauth = credsConfig && credsConfig.length === 1 && credsConfig[0] === 'Oauth';
-	    if (!isOauth) {
+	    if (!isOauth && envName) {
 	      return dispatch(getCredentialForEnvironment(tenantId, appId, credentialType, envName));
 	    } else return Promise.resolve(null);
 	  };
@@ -5762,7 +5770,7 @@ module.exports =
 	        metadataApi = wiz.metadataApi;
 	
 	    var isOauth = credentials && credentials[0] === 'Oauth';
-	    if (savedEndpoint && savedEndpoint.length > 8 || isOauth) {
+	    if (envName && (isOauth || savedEndpoint && savedEndpoint.length > 8)) {
 	      var isReload = true;
 	      var environment = { name: envName };
 	      return dispatch(callGetMetadata(tenantId, appId, mode, type, metadataEndpoint, metadataApi, savedEndpoint, credentials, null, actualCreds, environment, isReload));
@@ -5838,8 +5846,8 @@ module.exports =
 	        type: types.SET_WIZARD_ENVIRONMENTS,
 	        data: data.map(function (e) {
 	          return {
-	            environmentId: e.Id,
-	            name: e.Name
+	            environmentId: e.id,
+	            name: e.name
 	          };
 	        })
 	      });
@@ -6777,6 +6785,10 @@ module.exports =
 	
 	var _reduxForm = __webpack_require__(2);
 	
+	var _reactDropzone = __webpack_require__(201);
+	
+	var _reactDropzone2 = _interopRequireDefault(_reactDropzone);
+	
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 	
 	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -6859,8 +6871,8 @@ module.exports =
 	      onGenerateUrl: function onGenerateUrl(urlType) {
 	        return getOauthUrl(urlType, mode);
 	      },
-	      mode: mode, inputs: inputs, checking: checking }) : isSFTP ? _react2.default.createElement(SFTP, { step: step, wizard: wizard, onCheck: check, onPasteHeader: true,
-	      mode: mode, inputs: inputs, checking: checking }) : _react2.default.createElement(
+	      mode: mode, inputs: inputs, checking: checking }) : isSFTP ? _react2.default.createElement(SFTP, { step: step, wizard: wizard, onCheck: check,
+	      mode: mode, checking: checking }) : _react2.default.createElement(
 	      'div',
 	      null,
 	      _react2.default.createElement(
@@ -6953,34 +6965,63 @@ module.exports =
 	    var _this = _possibleConstructorReturn(this, (SFTP.__proto__ || Object.getPrototypeOf(SFTP)).call(this));
 	
 	    _this.state = {
-	      resources: []
+	      files: []
 	    };
 	    return _this;
 	  }
 	
 	  _createClass(SFTP, [{
-	    key: 'pasteHeader',
-	    value: function pasteHeader(e) {
-	      e.clipboardData.items[0].getAsString(function (txt) {
-	        if (txt) {
-	          // split on tab (coming out of google sheets or excel... maybe check for commas too?)
-	          var rows = txt.split('\t');
-	          console.log(rows);
-	        }
-	      });
+	    key: 'onDrop',
+	    value: function onDrop(files) {
+	      console.log(files);
+	      this.setState({ files: files });
 	    }
 	  }, {
 	    key: 'render',
 	    value: function render() {
-	      var inputs = this.props.inputs;
+	      var files = this.state.files;
 	
-	      var Textarea = inputs.Textarea;
+	      var hasFile = files && files.length > 0;
 	      return _react2.default.createElement(
 	        'div',
 	        null,
-	        'Paste the Header Row of your CSV here, to',
-	        _react2.default.createElement('br', null),
-	        _react2.default.createElement(Textarea, { onPaste: this.pasteHeader })
+	        _react2.default.createElement(
+	          'div',
+	          { style: { display: 'inline-block' } },
+	          _react2.default.createElement(
+	            _reactDropzone2.default,
+	            { onDrop: this.onDrop.bind(this),
+	              className: 'dropzone' },
+	            _react2.default.createElement(
+	              'p',
+	              null,
+	              'Drop one or more files here, or click to select files to upload.'
+	            )
+	          )
+	        ),
+	        _react2.default.createElement(
+	          'aside',
+	          { style: { marginLeft: 30 } },
+	          _react2.default.createElement(
+	            'h3',
+	            { style: { marginTop: 10 } },
+	            'Dropped files'
+	          ),
+	          _react2.default.createElement(
+	            'ul',
+	            null,
+	            files.map(function (f) {
+	              return _react2.default.createElement(
+	                'li',
+	                { key: f.name },
+	                f.name,
+	                ' - ',
+	                f.size,
+	                ' bytes'
+	              );
+	            })
+	          )
+	        )
 	      );
 	    }
 	  }]);
@@ -7181,7 +7222,7 @@ module.exports =
 	
 	var _react2 = _interopRequireDefault(_react);
 	
-	var _CSSTransitionGroup = __webpack_require__(27);
+	var _CSSTransitionGroup = __webpack_require__(28);
 	
 	var _CSSTransitionGroup2 = _interopRequireDefault(_CSSTransitionGroup);
 	
@@ -8141,7 +8182,7 @@ module.exports =
 	
 	var _react2 = _interopRequireDefault(_react);
 	
-	var _CSSTransitionGroup = __webpack_require__(27);
+	var _CSSTransitionGroup = __webpack_require__(28);
 	
 	var _CSSTransitionGroup2 = _interopRequireDefault(_CSSTransitionGroup);
 	
@@ -8290,9 +8331,12 @@ module.exports =
 	      if (this.finalDelta) {
 	        this.props.changeEntityOrder(this.props.resourceGroupIndex, i, i + this.finalDelta);
 	      }
-	      this.setState({ yPositions: this.elementReorders.map(function () {
+	      this.setState({
+	        yPositions: this.elementReorders.map(function () {
 	          return 0;
-	        }) });
+	        }),
+	        currentlyBeingDragged: null
+	      });
 	      this.props.unPick();
 	      e.stopPropagation();
 	    }
@@ -8314,10 +8358,10 @@ module.exports =
 	          leftClicked = _props3.leftClicked,
 	          sourceSchema = _props3.sourceSchema,
 	          destinationSchema = _props3.destinationSchema,
-	          overflowHidden = _props3.overflowHidden,
 	          showOverflow = _props3.showOverflow,
 	          step = _props3.step,
-	          isReverse = _props3.isReverse;
+	          isReverse = _props3.isReverse,
+	          changeEntityLevel = _props3.changeEntityLevel;
 	      var parameterModalResourceIndex = this.state.parameterModalResourceIndex;
 	
 	
@@ -8346,37 +8390,6 @@ module.exports =
 	        })
 	      })*/
 	
-	      var primaryRscVals = null;
-	      var primaryRscSectionLabels = null;
-	
-	      if (group && group.resources && group.resources[0]) {
-	        var primaryResourceSchema = group.resources[0].provider.toLowerCase() === step.destinationProvider.toLowerCase() ? destinationSchema : sourceSchema;
-	        primaryRscVals = primaryResourceSchema && primaryResourceSchema.find(function (defaultRsc) {
-	          return defaultRsc.name === group.resources[0].name;
-	        }) && [primaryResourceSchema.find(function (defaultRsc) {
-	          return defaultRsc.name === group.resources[0].name;
-	        }).properties.filter(function (f) {
-	          return !f.fake;
-	        })];
-	
-	        var primaryHasParameters = group.resources[0].parentRef && group.resources[0].parentRef.length > 0 && group.resources[0].parentRef.some(function (pr) {
-	          return pr.foreignKeyFields && pr.foreignKeyFields.length > 0;
-	        });
-	
-	        primaryRscSectionLabels = [group.resources[0].name];
-	
-	        if (primaryHasParameters) {
-	          group.resources[0].parentRef.forEach(function (pr) {
-	            var params = [];
-	            primaryRscSectionLabels.push(pr.ref.split('/')[2]);
-	            pr.foreignKeyFields.forEach(function (fkf) {
-	              params.push({ label: fkf });
-	            });
-	            primaryRscVals.push(params);
-	          });
-	        }
-	      }
-	
 	      return _react2.default.createElement(
 	        'div',
 	        { style: { position: 'relative' } },
@@ -8414,9 +8427,8 @@ module.exports =
 	          'div',
 	          { style: {
 	              background: 'white', width: 720, minHeight: 245,
-	              overflow: overflowHidden ? 'hidden' : 'visible',
 	              border: '1px solid rgb(204, 205, 207)', position: 'relative',
-	              height: groupResourcesLength * 58 + 84 + 78
+	              height: groupResourcesLength * 60 + 84 + 78
 	            } },
 	          _react2.default.createElement(
 	            'div',
@@ -8438,6 +8450,46 @@ module.exports =
 	                  { style: { position: 'relative' } },
 	                  group && group.resources && group.resources.map(function (rsc, i) {
 	
+	                    /* PARENT RESOURCE (to join against)*/
+	                    var primaryResource = null;
+	                    var primaryRscVals = null;
+	                    var primaryRscSectionLabels = null;
+	
+	                    if (rsc.parentNameAndProvider) {
+	                      primaryResource = group.resources.find(function (gr) {
+	                        return rsc.parentNameAndProvider.toLowerCase() === (gr.name + '_' + gr.provider).toLowerCase();
+	                      });
+	
+	                      if (primaryResource) {
+	                        var primaryResourceSchema = primaryResource && primaryResource.provider.toLowerCase() === step.destinationProvider.toLowerCase() ? destinationSchema : sourceSchema;
+	                        primaryRscVals = primaryResourceSchema && primaryResourceSchema.find(function (defaultRsc) {
+	                          return defaultRsc.name === primaryResource.name;
+	                        }) && [primaryResourceSchema.find(function (defaultRsc) {
+	                          return defaultRsc.name === primaryResource.name;
+	                        }).properties.filter(function (f) {
+	                          return !f.fake;
+	                        })];
+	
+	                        var primaryHasParameters = primaryResource.parentRef && primaryResource.parentRef.length > 0 && primaryResource.parentRef.some(function (pr) {
+	                          return pr.foreignKeyFields && pr.foreignKeyFields.length > 0;
+	                        });
+	
+	                        primaryRscSectionLabels = [primaryResource.name];
+	
+	                        if (primaryHasParameters) {
+	                          primaryResource.parentRef.forEach(function (pr) {
+	                            var params = [];
+	                            primaryRscSectionLabels.push(pr.ref.split('/')[2]);
+	                            pr.foreignKeyFields.forEach(function (fkf) {
+	                              params.push({ label: fkf });
+	                            });
+	                            primaryRscVals.push(params);
+	                          });
+	                        }
+	                      }
+	                    }
+	
+	                    /* THIS RESOURCE*/
 	                    var isDestinationEntity = rsc.provider.toLowerCase() === step.destinationProvider.toLowerCase();
 	                    var isSelected = selectedEntity.name === rsc.name && selectedEntity.isDestinationEntity === isDestinationEntity;
 	
@@ -8445,6 +8497,10 @@ module.exports =
 	                      return pr.foreignKeyFields && pr.foreignKeyFields.length > 0;
 	                    });
 	
+	                    var hasChildren = group && group.resources && group.resources.find(function (r) {
+	                      return r.primaryKeyResource === rsc.name;
+	                    }) ? true : false;
+	
 	                    var rscSchema = isDestinationEntity ? destinationSchema : sourceSchema;
 	                    var joinRscVals = rscSchema && rscSchema.find(function (defaultRsc) {
 	                      return defaultRsc.name === rsc.name;
@@ -8485,13 +8541,6 @@ module.exports =
 	                      joinKeyLabel += rsc.joinKeyName;
 	                    }
 	
-	                    /*let isDependency = false
-	                    group.resources && group.resources.forEach(gr=>{
-	                      if(gr.parentRef && gr.parentRef.find(pr=>pr===rsc.name)){
-	                        isDependency=true
-	                      }
-	                    })*/
-	
 	                    var rscName = rsc.name;
 	                    if (isReverse) {
 	                      if (rsc.provider.toLowerCase() === step.sourceProvider.toLowerCase()) {
@@ -8503,195 +8552,228 @@ module.exports =
 	                      }
 	                    }
 	
+	                    var canMoveLeft = false;
+	                    var canMoveRight = false;
+	                    if (i > 1) {
+	                      var beforeResourceLevel = group.resources[i - 1].level;
+	                      if (rsc.level > 1 && rsc.level <= beforeResourceLevel + 1) {
+	                        canMoveLeft = true;
+	                      }
+	                      if (rsc.level <= beforeResourceLevel) {
+	                        canMoveRight = true;
+	                      }
+	                    }
+	
 	                    return _react2.default.createElement(
 	                      _reactDraggable2.default,
 	                      { axis: 'y', bounds: 'parent', key: i, handle: '.drag-handle',
 	                        position: { x: 0, y: _this3.state.yPositions[i] },
 	                        onStart: function onStart(e, v) {
 	                          return _this3.handleDragStart(e, v, i);
-	                        }, onDrag: _this3.handleDrag, onStop: _this3.handleDragEnd },
+	                        },
+	                        onDrag: _this3.handleDrag, onStop: _this3.handleDragEnd,
+	                        disabled: hasChildren },
 	                      _react2.default.createElement(
 	                        'div',
-	                        { className: 'schema-panel', style: { zIndex: _this3.state.zIndexes[i] }, onClick: function onClick() {
-	                            return _this3.raiseUp(i);
-	                          } },
+	                        { style: { position: 'relative', zIndex: _this3.state.zIndexes[i] } },
+	                        _react2.default.createElement(LevelArrows, { hasChildren: hasChildren,
+	                          onChange: function onChange(c) {
+	                            return changeEntityLevel(resourceGroupIndex, i, rsc.level + c);
+	                          },
+	                          canMoveRight: canMoveRight, canMoveLeft: canMoveLeft
+	                        }),
 	                        _react2.default.createElement(
 	                          'div',
-	                          { className: 'schema-panel-header' },
+	                          { className: 'schema-panel',
+	                            onClick: function onClick() {
+	                              return _this3.raiseUp(i);
+	                            },
+	                            style: { marginLeft: rsc.level * 18, borderRadius: 4,
+	                              border: '1px solid rgb(\n                              ' + (0 + rsc.level * 10) + ',\n                              ' + (50 + rsc.level * 15) + ',\n                              ' + (100 + rsc.level * 20) + ')'
+	                            } },
 	                          _react2.default.createElement(
 	                            'div',
-	                            { style: { display: 'inline-block', verticalAlign: 'top', margin: '4px 4px 0px 0px', cursor: 'pointer' }, onClick: function onClick(e) {
-	                                return e.stopPropagation();
-	                              },
-	                              className: 'drag-handle' },
+	                            { className: 'schema-panel-header', style: {
+	                                background: 'rgb(\n                                ' + (50 + rsc.level * 10) + ',\n                                ' + (120 + rsc.level * 15) + ',\n                                ' + (180 + rsc.level * 25) + ')'
+	                              } },
 	                            _react2.default.createElement(
-	                              'svg',
-	                              { width: '24', height: '24', viewBox: '0 0 24 24' },
-	                              _react2.default.createElement('path', { fill: '#FFFFFF', d: 'M9,3H11V5H9V3M13,3H15V5H13V3M9,7H11V9H9V7M13,7H15V9H13V7M9,11H11V13H9V11M13,11H15V13H13V11M9,15H11V17H9V15M13,15H15V17H13V15M9,19H11V21H9V19M13,19H15V21H13V19Z' })
-	                            )
-	                          ),
-	                          _react2.default.createElement(
-	                            'div',
-	                            { style: { padding: '7px 0px 0px 5px', fontSize: '14px',
-	                                display: 'inline-block' } },
+	                              'div',
+	                              { style: { display: 'inline-block', verticalAlign: 'top', margin: '4px 4px 0px 0px', cursor: hasChildren ? 'auto' : 'pointer' },
+	                                onClick: function onClick(e) {
+	                                  return e.stopPropagation();
+	                                },
+	                                className: 'drag-handle' },
+	                              _react2.default.createElement(
+	                                'svg',
+	                                { width: '24', height: '24', viewBox: '0 0 24 24',
+	                                  fill: hasChildren ? '#AAAAAA' : '#FFFFFF' },
+	                                _react2.default.createElement('path', { d: 'M9,3H11V5H9V3M13,3H15V5H13V3M9,7H11V9H9V7M13,7H15V9H13V7M9,11H11V13H9V11M13,11H15V13H13V11M9,15H11V17H9V15M13,15H15V17H13V15M9,19H11V21H9V19M13,19H15V21H13V19Z' })
+	                              )
+	                            ),
 	                            _react2.default.createElement(
-	                              'span',
-	                              { style: { maxWidth: 260, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'inline-block' } },
-	                              rscName
+	                              'div',
+	                              { style: { padding: '7px 0px 0px 5px', fontSize: '14px',
+	                                  display: 'inline-block' } },
+	                              _react2.default.createElement(
+	                                'span',
+	                                { style: { maxWidth: 260 - rsc.level * 20, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'inline-block' } },
+	                                rscName
+	                              ),
+	                              hasParameters && _react2.default.createElement(
+	                                'div',
+	                                { className: 'accordion-panel-parameters',
+	                                  onClick: function onClick() {
+	                                    return _this3.setState({
+	                                      parameterModalResourceIndex: i
+	                                    });
+	                                  } },
+	                                _react2.default.createElement(
+	                                  'svg',
+	                                  { fill: '#FFFFFF', height: '28', viewBox: '0 0 24 24', width: '28' },
+	                                  _react2.default.createElement('path', { d: 'M0 0h24v24H0z', fill: 'none' }),
+	                                  _react2.default.createElement('path', { d: 'M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm7-7H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-1.75 9c0 .23-.02.46-.05.68l1.48 1.16c.13.11.17.3.08.45l-1.4 2.42c-.09.15-.27.21-.43.15l-1.74-.7c-.36.28-.76.51-1.18.69l-.26 1.85c-.03.17-.18.3-.35.3h-2.8c-.17 0-.32-.13-.35-.29l-.26-1.85c-.43-.18-.82-.41-1.18-.69l-1.74.7c-.16.06-.34 0-.43-.15l-1.4-2.42c-.09-.15-.05-.34.08-.45l1.48-1.16c-.03-.23-.05-.46-.05-.69 0-.23.02-.46.05-.68l-1.48-1.16c-.13-.11-.17-.3-.08-.45l1.4-2.42c.09-.15.27-.21.43-.15l1.74.7c.36-.28.76-.51 1.18-.69l.26-1.85c.03-.17.18-.3.35-.3h2.8c.17 0 .32.13.35.29l.26 1.85c.43.18.82.41 1.18.69l1.74-.7c.16-.06.34 0 .43.15l1.4 2.42c.09.15.05.34-.08.45l-1.48 1.16c.03.23.05.46.05.69z' })
+	                                )
+	                              )
 	                            ),
-	                            hasParameters && _react2.default.createElement(
+	                            _react2.default.createElement(
 	                              'div',
-	                              { className: 'accordion-panel-parameters',
-	                                onClick: function onClick() {
-	                                  return _this3.setState({
-	                                    parameterModalResourceIndex: i
-	                                  });
+	                              { className: 'accordion-panel-close',
+	                                onClick: function onClick(e) {
+	                                  return didRemoveEntity(e, resourceGroupIndex, rsc.name, i);
 	                                } },
 	                              _react2.default.createElement(
 	                                'svg',
-	                                { fill: '#FFFFFF', height: '28', viewBox: '0 0 24 24', width: '28' },
-	                                _react2.default.createElement('path', { d: 'M0 0h24v24H0z', fill: 'none' }),
-	                                _react2.default.createElement('path', { d: 'M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm7-7H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-1.75 9c0 .23-.02.46-.05.68l1.48 1.16c.13.11.17.3.08.45l-1.4 2.42c-.09.15-.27.21-.43.15l-1.74-.7c-.36.28-.76.51-1.18.69l-.26 1.85c-.03.17-.18.3-.35.3h-2.8c-.17 0-.32-.13-.35-.29l-.26-1.85c-.43-.18-.82-.41-1.18-.69l-1.74.7c-.16.06-.34 0-.43-.15l-1.4-2.42c-.09-.15-.05-.34.08-.45l1.48-1.16c-.03-.23-.05-.46-.05-.69 0-.23.02-.46.05-.68l-1.48-1.16c-.13-.11-.17-.3-.08-.45l1.4-2.42c.09-.15.27-.21.43-.15l1.74.7c.36-.28.76-.51 1.18-.69l.26-1.85c.03-.17.18-.3.35-.3h2.8c.17 0 .32.13.35.29l.26 1.85c.43.18.82.41 1.18.69l1.74-.7c.16-.06.34 0 .43.15l1.4 2.42c.09.15.05.34-.08.45l-1.48 1.16c.03.23.05.46.05.69z' })
+	                                { style: { width: 18, height: 18 }, viewBox: '0 0 60 60' },
+	                                _react2.default.createElement('path', { style: { strokeWidth: 5, strokeLinecap: 'round' },
+	                                  d: 'M 15.674663,15.572746 L 44.587629,44.485711 M 45.118838,15.420972 L 15.522889,45.016920' })
 	                              )
-	                            )
-	                          ),
-	                          _react2.default.createElement(
-	                            'div',
-	                            { className: 'accordion-panel-close',
-	                              onClick: function onClick(e) {
-	                                return didRemoveEntity(e, resourceGroupIndex, rsc.name, i);
-	                              } },
+	                            ),
 	                            _react2.default.createElement(
-	                              'svg',
-	                              { style: { width: 18, height: 18 }, viewBox: '0 0 60 60' },
-	                              _react2.default.createElement('path', { style: { strokeWidth: 5, strokeLinecap: 'round' },
-	                                d: 'M 15.674663,15.572746 L 44.587629,44.485711 M 45.118838,15.420972 L 15.522889,45.016920' })
+	                              'div',
+	                              { className: 'accordion-panel-toggle' + (rsc.joinKeyName && rsc.primaryKeyName ? ' join-ok' : '') },
+	                              i !== 0 ? _react2.default.createElement(
+	                                Button,
+	                                { type: 'brand', iconAlign: 'right',
+	                                  icon: isSelected ? 'chevronup' : 'chevrondown',
+	                                  style: { paddingRight: 38 },
+	                                  onClick: function onClick() {
+	                                    _this3.props.pickEntity({
+	                                      name: rsc.name,
+	                                      isDestinationEntity: rsc.provider.toLowerCase() === step.destinationProvider.toLowerCase()
+	                                    });
+	                                  } },
+	                                joinKeyLabel && primaryKeyLabel ? primaryKeyLabel + ' = ' + joinKeyLabel : 'Configure Join'
+	                              ) : null
 	                            )
 	                          ),
 	                          _react2.default.createElement(
-	                            'div',
-	                            { style: { verticalAlign: 'top', float: 'right', marginRight: 8 } },
-	                            i !== 0 ? _react2.default.createElement(
-	                              Button,
-	                              { type: 'brand', icon: isSelected ? 'chevronup' : 'chevrondown',
-	                                iconAlign: 'right', className: rsc.joinKeyName && rsc.primaryKeyName ? 'join-ok' : '',
-	                                onClick: function onClick() {
-	                                  _this3.props.pickEntity({
-	                                    name: rsc.name,
-	                                    isDestinationEntity: rsc.provider.toLowerCase() === step.destinationProvider.toLowerCase()
-	                                  });
-	                                } },
-	                              joinKeyLabel && primaryKeyLabel ? primaryKeyLabel + ' = ' + joinKeyLabel : 'Configure Join'
-	                            ) : null
-	                          )
-	                        ),
-	                        _react2.default.createElement(
-	                          _CSSTransitionGroup2.default,
-	                          { transitionName: 'panel-collapse', transitionEnterTimeout: 250, transitionLeaveTimeout: 250 },
-	                          isSelected ? _react2.default.createElement(
-	                            'div',
-	                            { className: 'schema-accordion-collapse' },
-	                            _react2.default.createElement(
+	                            _CSSTransitionGroup2.default,
+	                            { transitionName: 'panel-collapse', transitionEnterTimeout: 250, transitionLeaveTimeout: 250 },
+	                            isSelected ? _react2.default.createElement(
 	                              'div',
-	                              { style: { display: 'inline-block', width: '33%', marginTop: 6, verticalAlign: 'top', position: 'relative' } },
+	                              { className: 'schema-accordion-collapse' },
 	                              _react2.default.createElement(
 	                                'div',
-	                                { className: 'labelz', style: { marginBottom: 6 } },
-	                                'Primary Object Join Key'
-	                              ),
-	                              _react2.default.createElement(
-	                                Tooltip,
-	                                { nubbin: 'left-top', popStyle: { width: 180, left: -5 },
-	                                  wrapStyle: { left: 148, top: 2, zIndex: 6003 } },
+	                                { style: { display: 'inline-block', width: '33%', marginTop: 6, verticalAlign: 'top', position: 'relative' } },
 	                                _react2.default.createElement(
-	                                  'p',
-	                                  null,
-	                                  'Choose a Join Key for the Primary object in this group (',
-	                                  group.resources[0].name,
-	                                  ')'
-	                                )
+	                                  'div',
+	                                  { className: 'labelz', style: { marginBottom: 6 } },
+	                                  'Primary Object Join Key'
+	                                ),
+	                                _react2.default.createElement(
+	                                  Tooltip,
+	                                  { nubbin: 'left-top', popStyle: { width: 180, left: -5 },
+	                                    wrapStyle: { left: 148, top: 2, zIndex: 6003 } },
+	                                  _react2.default.createElement(
+	                                    'p',
+	                                    null,
+	                                    'Choose a Join Key for the Primary object in this group (',
+	                                    primaryResource && primaryResource.name,
+	                                    ')'
+	                                  )
+	                                ),
+	                                _react2.default.createElement(_selectWrapper2.default, { label: primaryKeyLabel || 'Primary Join Key',
+	                                  onSelect: function onSelect(v, idx, field) {
+	                                    selectPrimaryKey(v, field, resourceGroupIndex, i);
+	                                  },
+	                                  onClick: showOverflow,
+	                                  type: 'neutral', inputs: inputs,
+	                                  values: primaryRscVals,
+	                                  sectionLabels: primaryRscSectionLabels,
+	                                  fieldPropLabel: 'label',
+	                                  selectedValues: [{
+	                                    label: rsc.primaryKeyName,
+	                                    parents: rsc.primaryKeyParents
+	                                  }],
+	                                  sectionLabelSuffix: 'Fields'
+	                                })
 	                              ),
-	                              _react2.default.createElement(_selectWrapper2.default, { label: primaryKeyLabel || 'Primary Join Key',
-	                                onSelect: function onSelect(v, idx, field) {
-	                                  selectPrimaryKey(v, field, resourceGroupIndex, i);
-	                                },
-	                                onClick: showOverflow,
-	                                type: 'neutral', inputs: inputs,
-	                                values: primaryRscVals,
-	                                sectionLabels: primaryRscSectionLabels,
-	                                fieldPropLabel: 'label',
-	                                selectedValues: [{
-	                                  label: rsc.primaryKeyName,
-	                                  parents: rsc.primaryKeyParents
-	                                }],
-	                                sectionLabelSuffix: 'Fields'
-	                              })
-	                            ),
-	                            _react2.default.createElement(
-	                              'div',
-	                              { style: { display: 'inline-block', width: '33%', marginTop: 6, verticalAlign: 'top', position: 'relative' } },
 	                              _react2.default.createElement(
 	                                'div',
-	                                { className: 'labelz', style: { marginBottom: 6 } },
-	                                'Join Key'
-	                              ),
-	                              _react2.default.createElement(
-	                                Tooltip,
-	                                { nubbin: 'left-top', popStyle: { width: 170, left: -5 },
-	                                  wrapStyle: { left: 50, top: 2, zIndex: 6002 } },
+	                                { style: { display: 'inline-block', width: '33%', marginTop: 6, verticalAlign: 'top', position: 'relative' } },
 	                                _react2.default.createElement(
-	                                  'p',
-	                                  null,
-	                                  'Choose a Join Key for this object (',
-	                                  rsc.name,
-	                                  '), whose value should match the Primary Object Join Key.'
-	                                )
+	                                  'div',
+	                                  { className: 'labelz', style: { marginBottom: 6 } },
+	                                  'Join Key'
+	                                ),
+	                                _react2.default.createElement(
+	                                  Tooltip,
+	                                  { nubbin: 'left-top', popStyle: { width: 170, left: -5 },
+	                                    wrapStyle: { left: 50, top: 2, zIndex: 6002 } },
+	                                  _react2.default.createElement(
+	                                    'p',
+	                                    null,
+	                                    'Choose a Join Key for this object (',
+	                                    rsc.name,
+	                                    '), whose value should match the Primary Object Join Key.'
+	                                  )
+	                                ),
+	                                _react2.default.createElement(_selectWrapper2.default, { label: joinKeyLabel || 'Join Key',
+	                                  onSelect: function onSelect(v, idx, field) {
+	                                    selectJoinKey(v, field, resourceGroupIndex, i);
+	                                  },
+	                                  onClick: showOverflow,
+	                                  type: 'neutral', inputs: inputs,
+	                                  values: joinRscVals,
+	                                  sectionLabels: joinRscSectionLabels,
+	                                  fieldPropLabel: 'label',
+	                                  selectedValues: [{
+	                                    label: rsc.joinKeyName,
+	                                    parents: rsc.joinKeyParents
+	                                  }],
+	                                  sectionLabelSuffix: 'Fields'
+	                                })
 	                              ),
-	                              _react2.default.createElement(_selectWrapper2.default, { label: joinKeyLabel || 'Join Key',
-	                                onSelect: function onSelect(v, idx, field) {
-	                                  selectJoinKey(v, field, resourceGroupIndex, i);
-	                                },
-	                                onClick: showOverflow,
-	                                type: 'neutral', inputs: inputs,
-	                                values: joinRscVals,
-	                                sectionLabels: joinRscSectionLabels,
-	                                fieldPropLabel: 'label',
-	                                selectedValues: [{
-	                                  label: rsc.joinKeyName,
-	                                  parents: rsc.joinKeyParents
-	                                }],
-	                                sectionLabelSuffix: 'Fields'
-	                              })
-	                            ),
-	                            _react2.default.createElement(
-	                              'div',
-	                              { style: { display: 'inline-block', width: '33%', marginTop: 6, position: 'relative', verticalAlign: 'top' } },
 	                              _react2.default.createElement(
-	                                Tooltip,
-	                                { nubbin: 'right-top', popStyle: { width: 300, right: 46 },
-	                                  wrapStyle: { left: 60, top: 2, zIndex: 6003 } },
+	                                'div',
+	                                { style: { display: 'inline-block', width: '33%', marginTop: 6, position: 'relative', verticalAlign: 'top' } },
 	                                _react2.default.createElement(
-	                                  'p',
-	                                  null,
-	                                  'All: ',
-	                                  rsc.name + ' records may or may not have a related ' + group.resources[0].name + ' record'
+	                                  Tooltip,
+	                                  { nubbin: 'right-top', popStyle: { width: 300, right: 46 },
+	                                    wrapStyle: { left: 60, top: 2, zIndex: 9003, position: 'relative' } },
+	                                  _react2.default.createElement(
+	                                    'p',
+	                                    null,
+	                                    'All: ',
+	                                    rsc.name + ' records may or may not have a related ' + (primaryResource && primaryResource.name) + ' record'
+	                                  ),
+	                                  _react2.default.createElement(
+	                                    'p',
+	                                    { style: { marginTop: 6 } },
+	                                    'Matching: ',
+	                                    'Each ' + rsc.name + ' must have at least one related ' + (primaryResource && primaryResource.name) + ' record'
+	                                  )
 	                                ),
-	                                _react2.default.createElement(
-	                                  'p',
-	                                  { style: { marginTop: 6 } },
-	                                  'Matching: ',
-	                                  'Each ' + rsc.name + ' must have at least one related ' + group.resources[0].name + ' record'
-	                                )
-	                              ),
-	                              _react2.default.createElement(_reduxForm.Field, { name: 'resourceGroups.' + resourceGroupIndex + '.resources.' + i + '.joinType',
-	                                component: inputs.rfRadioGroup, label: 'Join Type',
-	                                onClickOption: function onClickOption() {}, options: {
-	                                  'LEFT JOIN': 'All records',
-	                                  'INNER JOIN': 'Matching records'
-	                                } }),
-	                              _react2.default.createElement(_joinVenn2.default, { joinType: rsc.joinType })
-	                            )
-	                          ) : null
+	                                _react2.default.createElement(_reduxForm.Field, { name: 'resourceGroups.' + resourceGroupIndex + '.resources.' + i + '.joinType',
+	                                  component: inputs.rfRadioGroup, label: 'Join Type',
+	                                  onClickOption: function onClickOption() {}, options: {
+	                                    'LEFT JOIN': 'All records',
+	                                    'INNER JOIN': 'Matching records'
+	                                  } }),
+	                                _react2.default.createElement(_joinVenn2.default, { joinType: rsc.joinType })
+	                              )
+	                            ) : null
+	                          )
 	                        )
 	                      )
 	                    );
@@ -8699,12 +8781,12 @@ module.exports =
 	                ),
 	                resourceGroups && resourceGroups.length > 0 ? _react2.default.createElement(
 	                  'div',
-	                  { style: { display: 'inline-block', marginLeft: 11 } },
+	                  { style: { display: 'inline-block', marginLeft: 17 } },
 	                  _react2.default.createElement(_selectWrapper2.default, { label: 'Add Data Source', style: { height: 40 }, onClick: showOverflow,
 	                    onSelect: function onSelect(v, i, entity) {
 	                      return addDefaultEntity(v, i, entity, resourceGroupIndex);
 	                    },
-	                    type: 'neutral', inputs: inputs
+	                    type: 'neutral', inputs: inputs, wrapClass: 'larger-dropdown'
 	                    //selectedValues={resourceGroups && resourceGroups[resourceGroupIndex] && 
 	                    //resourceGroups[resourceGroupIndex].resources} 
 	                    , values: !isReverse ? [sourceSchema, destinationSchema] : [destinationSchema, sourceSchema],
@@ -8770,6 +8852,11 @@ module.exports =
 	            ) : null
 	          )
 	        ),
+	        _react2.default.createElement('div', { style: {
+	            background: '#eCeFeF', width: 245, minHeight: 245, left: 719, top: 0, zIndex: 99999,
+	            height: groupResourcesLength * 60 + 84 + 78, borderLeft: '1px solid rgb(204, 205, 207)',
+	            display: 'inline-block', position: 'absolute'
+	          } }),
 	        _react2.default.createElement(
 	          'div',
 	          { className: 'parameter-modal' },
@@ -8789,6 +8876,41 @@ module.exports =
 	}(_react2.default.Component);
 	
 	exports.default = SchemaAccordion;
+	
+	
+	var LevelArrows = function LevelArrows(_ref2) {
+	  var onChange = _ref2.onChange,
+	      canMoveLeft = _ref2.canMoveLeft,
+	      canMoveRight = _ref2.canMoveRight,
+	      hasChildren = _ref2.hasChildren;
+	  return _react2.default.createElement(
+	    'div',
+	    {
+	      style: { position: 'absolute', zIndex: 7, height: 60, left: -5, paddingTop: 14 } },
+	    _react2.default.createElement(
+	      'div',
+	      { className: 'schema-panel-resource-arrow' },
+	      canMoveLeft && _react2.default.createElement(
+	        'svg',
+	        { height: '18', viewBox: '0 0 24 24', width: '18',
+	          onClick: function onClick() {
+	            return onChange(-1);
+	          } },
+	        _react2.default.createElement('path', { d: 'M0 0h24v24H0z', fill: 'none' }),
+	        _react2.default.createElement('path', { d: 'M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z' })
+	      ),
+	      canMoveRight && _react2.default.createElement(
+	        'svg',
+	        { height: '18', viewBox: '0 0 24 24', width: '18',
+	          onClick: function onClick() {
+	            return onChange(1);
+	          } },
+	        _react2.default.createElement('path', { d: 'M0 0h24v24H0z', fill: 'none' }),
+	        _react2.default.createElement('path', { d: 'M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z' })
+	      )
+	    )
+	  );
+	};
 
 /***/ },
 /* 110 */
@@ -9544,7 +9666,7 @@ module.exports =
 	
 	var _moment2 = _interopRequireDefault(_moment);
 	
-	__webpack_require__(211);
+	__webpack_require__(212);
 	
 	__webpack_require__(171);
 	
@@ -9790,7 +9912,7 @@ module.exports =
 	
 	var _previewTabContent = __webpack_require__(52);
 	
-	var _CSSTransitionGroup = __webpack_require__(27);
+	var _CSSTransitionGroup = __webpack_require__(28);
 	
 	var _CSSTransitionGroup2 = _interopRequireDefault(_CSSTransitionGroup);
 	
@@ -9829,15 +9951,8 @@ module.exports =
 	      newEnvName: ''
 	    };
 	    _this.check = _this.check.bind(_this);
-	    _this.seeFields = _this.seeFields.bind(_this);
-	    _this.getOauthUrl = _this.getOauthUrl.bind(_this);
-	    _this.clickDirection = _this.clickDirection.bind(_this);
-	    _this.selectProvider = _this.selectProvider.bind(_this);
-	    //this.saveEnvironment = this.saveEnvironment.bind(this)
-	    _this.selectEnvironment = _this.selectEnvironment.bind(_this);
 	    _this.tryGetCredentialAndCheck = _this.tryGetCredentialAndCheck.bind(_this);
-	    _this.createEnvironment = _this.createEnvironment.bind(_this);
-	    _this.changeEnvName = _this.changeEnvName.bind(_this);
+	    _this.selectProvider = _this.selectProvider.bind(_this);
 	    return _this;
 	  }
 	
@@ -10094,7 +10209,7 @@ module.exports =
 	              style: { minWidth: 200, textAlign: 'left' },
 	              values: wizard.environments,
 	              title: 'Choose Environment', inputs: inputs, sectionLabelSuffix: '',
-	              onSelect: this.selectEnvironment,
+	              onSelect: this.selectEnvironment.bind(this),
 	              selectedValues: [formValues['environment'] ? { name: formValues['environment'] } : {}],
 	              disabled: wizard.environments && wizard.environments.length > 0 ? false : true
 	            })
@@ -10106,9 +10221,11 @@ module.exports =
 	              'div',
 	              { style: { width: 200, display: 'inline-block' } },
 	              _react2.default.createElement(Input, { type: 'text', label: 'New Environment', value: newEnvName,
-	                onChange: this.changeEnvName, style: { width: 200 },
+	                onChange: this.changeEnvName.bind(this), style: { width: 200 },
 	                onKeyPress: function onKeyPress(e) {
-	                  if (e.key === 'Enter' && !disableCreateEnv) _this5.createEnvironment(newEnvName);
+	                  if (e.key === 'Enter' && !disableCreateEnv) {
+	                    _this5.createEnvironment(newEnvName).bind(_this5);
+	                  }
 	                },
 	                inputRef: function inputRef(ref) {
 	                  return _this5.envNameInput = ref;
@@ -10119,6 +10236,7 @@ module.exports =
 	              Button,
 	              {
 	                type: 'brand',
+	                size: 'small',
 	                onClick: function onClick() {
 	                  return _this5.createEnvironment(newEnvName);
 	                },
@@ -10190,9 +10308,10 @@ module.exports =
 	                    'div',
 	                    { className: 'env-creds' },
 	                    _react2.default.createElement(_envSections2.default, { config: step[m + 'Config'], mode: m, checking: checking,
-	                      wizard: wizard, getOauthUrl: _this5.getOauthUrl, formValues: formValues,
-	                      clickDirection: _this5.clickDirection, inputs: inputs, step: step,
-	                      seeFields: _this5.seeFields, check: _this5.check })
+	                      wizard: wizard, getOauthUrl: _this5.getOauthUrl.bind(_this5),
+	                      formValues: formValues,
+	                      clickDirection: _this5.clickDirection.bind(_this5), inputs: inputs, step: step,
+	                      seeFields: _this5.seeFields.bind(_this5), check: _this5.check })
 	                  )
 	                )
 	              );
@@ -10203,7 +10322,7 @@ module.exports =
 	            return _this5.setState({ showResources: null });
 	          },
 	          mode: this.state.showResources, wizard: wizard, step: step, inputs: inputs,
-	          seeFields: this.seeFields, isReverse: formValues.direction === 'reverse' }),
+	          seeFields: this.seeFields.bind(this), isReverse: formValues.direction === 'reverse' }),
 	        _react2.default.createElement('br', null),
 	        _react2.default.createElement('br', null),
 	        _react2.default.createElement(_navButtons2.default, { nextDisabled: notAllMetadata || !formValues['environment'],
@@ -10862,7 +10981,7 @@ module.exports =
 	
 	var _loadData2 = _interopRequireDefault(_loadData);
 	
-	var _CSSTransitionGroup = __webpack_require__(27);
+	var _CSSTransitionGroup = __webpack_require__(28);
 	
 	var _CSSTransitionGroup2 = _interopRequireDefault(_CSSTransitionGroup);
 	
@@ -12013,11 +12132,12 @@ module.exports =
 	    _this.removeEntity = _this.removeEntity.bind(_this);
 	    _this.addGroup = _this.addGroup.bind(_this);
 	    _this.removeGroup = _this.removeGroup.bind(_this);
+	    _this.changeEntityLevel = _this.changeEntityLevel.bind(_this);
 	    _this.changeEntityOrder = _this.changeEntityOrder.bind(_this);
 	    _this.changeGroupOrder = _this.changeGroupOrder.bind(_this);
 	    _this.openConnectionModal = _this.openConnectionModal.bind(_this);
 	    _this.hideModal = _this.hideModal.bind(_this);
-	    _this.refreshAllPrimaryKeyNames = _this.refreshAllPrimaryKeyNames.bind(_this);
+	    _this.refreshAllPrimaryKeys = _this.refreshAllPrimaryKeys.bind(_this);
 	    _this.selectPrimaryKey = _this.selectPrimaryKey.bind(_this);
 	    _this.selectJoinKey = _this.selectJoinKey.bind(_this);
 	    return _this;
@@ -12123,9 +12243,11 @@ module.exports =
 	      });
 	      if (entityExists) return;
 	
+	      var level = 1;
 	      if (!group.resources || group.resources && group.resources.length === 0) {
 	        group.resources = [];
 	        this.openConnectionModal(group, groupIndex);
+	        level = 0;
 	      }
 	      // ADD PARENTS AS WELL ?
 	      /*if(parentRef && parentRef.length>0){
@@ -12144,10 +12266,11 @@ module.exports =
 	        name: v,
 	        __name: entity.type,
 	        provider: entity.section,
-	        joinType: 'LEFT JOIN'
+	        joinType: 'LEFT JOIN',
+	        level: level
 	      }, entity.parentRef && { parentRef: entity.parentRef }, entity.recordTypeId && { recordTypeId: entity.rtid }));
 	      change('resourceGroups', resourceGroups);
-	      this.forceUpdate();
+	      this.assignAllParents(groupIndex);
 	    }
 	  }, {
 	    key: 'newEntityKeyPress',
@@ -12190,58 +12313,118 @@ module.exports =
 	      group.mappings = mapz;
 	      group.resources.splice(rscIndex, 1);
 	      change('resourceGroups', resourceGroups);
-	      this.forceUpdate();
+	      this.assignAllParents(groupIndex);
 	    }
 	  }, {
-	    key: 'changeEntityOrder',
-	    value: function changeEntityOrder(groupIndex, iStart, iEnd) {
+	    key: 'changeEntityLevel',
+	    value: function changeEntityLevel(groupIndex, entityIndex, newLevel) {
 	      var _props7 = this.props,
 	          change = _props7.change,
 	          formValues = _props7.formValues;
 	
 	      var resourceGroups = [].concat(_toConsumableArray(formValues['resourceGroups']));
 	      var resources = resourceGroups[groupIndex].resources;
-	      resources.splice(iEnd, 0, resources.splice(iStart, 1)[0]);
-	      if (iEnd === 0 || iStart === 0) {
-	        this.refreshAllPrimaryKeyNames(groupIndex);
-	      }
+	      var rsc = resources[entityIndex];
+	      rsc.level = newLevel;
 	      change('resourceGroups', resourceGroups);
+	      this.assignAllParents(groupIndex);
 	      this.forceUpdate();
 	    }
 	  }, {
-	    key: 'refreshAllPrimaryKeyNames',
-	    value: function refreshAllPrimaryKeyNames(groupIndex) {
+	    key: 'changeEntityOrder',
+	    value: function changeEntityOrder(groupIndex, iStart, iEnd) {
 	      var _props8 = this.props,
 	          change = _props8.change,
 	          formValues = _props8.formValues;
 	
 	      var resourceGroups = [].concat(_toConsumableArray(formValues['resourceGroups']));
-	      var group = resourceGroups[groupIndex];
-	      group.sourceKey = null;
-	      group.resources.forEach(function (g) {
-	        g.primaryKeyName = null;
-	      });
-	      change('resourceGroups', resourceGroups);
-	      //this.openConnectionModal(group, groupIndex)
+	      var resources = resourceGroups[groupIndex].resources;
+	
+	      resources.splice(iEnd, 0, resources.splice(iStart, 1)[0]);
+	      if (iEnd === 0) {
+	        resources[0].level = 0;
+	        resources[0].primaryKeyResource = null;
+	        resources[0].parentNameAndProvider = null;
+	        resources[0].primaryKeyName = null;
+	        resources[0].primaryKeyParents = null;
+	        resources[1].level = 1;
+	      }
+	      if (iStart === 0) {
+	        // right now cant drag if 0
+	      }
+	      change('resourceGroups', resourceGroups);
+	      this.assignAllParents(groupIndex);
 	    }
 	  }, {
-	    key: 'changeGroupOrder',
-	    value: function changeGroupOrder(iStart, iEnd) {
+	    key: 'assignAllParents',
+	    value: function assignAllParents(groupIndex) {
 	      var _props9 = this.props,
 	          change = _props9.change,
 	          formValues = _props9.formValues;
 	
 	      var resourceGroups = [].concat(_toConsumableArray(formValues['resourceGroups']));
-	      resourceGroups.splice(iEnd, 0, resourceGroups.splice(iStart, 1)[0]);
+	      var resources = resourceGroups[groupIndex].resources;
+	
+	      resources.forEach(function (eachR, eachI) {
+	        var newParent = '';
+	        var newParentProvider = '';
+	        for (var i = eachI - 1; i >= 0; i--) {
+	          if (resources[i].level < eachR.level) {
+	            newParent = resources[i].name;
+	            newParentProvider = resources[i].provider;
+	            eachR.level = resources[i].level + 1;
+	            break;
+	          }
+	        }
+	        if (newParent && newParentProvider && (newParent + '_' + newParentProvider).toLowerCase() !== (eachR.parentNameAndProvider && eachR.parentNameAndProvider.toLowerCase())) {
+	          eachR.primaryKeyResource = newParent;
+	          eachR.parentNameAndProvider = newParent + '_' + newParentProvider;
+	          eachR.primaryKeyName = null;
+	          eachR.primaryKeyParents = null;
+	        }
+	        if (eachI === 0 && eachR.level !== 0) {
+	          eachR.level = 0;
+	        }
+	      });
 	      change('resourceGroups', resourceGroups);
+	      //this.forceUpdate()
 	    }
 	  }, {
-	    key: 'selectPrimaryKey',
-	    value: function selectPrimaryKey(v, field, rgi, i) {
+	    key: 'refreshAllPrimaryKeys',
+	    value: function refreshAllPrimaryKeys(groupIndex) {
 	      var _props10 = this.props,
 	          change = _props10.change,
 	          formValues = _props10.formValues;
 	
+	      var resourceGroups = [].concat(_toConsumableArray(formValues['resourceGroups']));
+	      var group = resourceGroups[groupIndex];
+	      group.sourceKey = null;
+	      group.resources.forEach(function (r) {
+	        r.primaryKeyName = null;
+	        r.primaryKeyResource = null;
+	        r.primaryKeyParents = null;
+	      });
+	      change('resourceGroups', resourceGroups);
+	      //this.openConnectionModal(group, groupIndex)
+	    }
+	  }, {
+	    key: 'changeGroupOrder',
+	    value: function changeGroupOrder(iStart, iEnd) {
+	      var _props11 = this.props,
+	          change = _props11.change,
+	          formValues = _props11.formValues;
+	
+	      var resourceGroups = [].concat(_toConsumableArray(formValues['resourceGroups']));
+	      resourceGroups.splice(iEnd, 0, resourceGroups.splice(iStart, 1)[0]);
+	      change('resourceGroups', resourceGroups);
+	    }
+	  }, {
+	    key: 'selectPrimaryKey',
+	    value: function selectPrimaryKey(v, field, rgi, i) {
+	      var _props12 = this.props,
+	          change = _props12.change,
+	          formValues = _props12.formValues;
+	
 	      var resourceGroups = [].concat(_toConsumableArray(formValues['resourceGroups']));
 	      var rsc = resourceGroups[rgi].resources[i];
 	      rsc.primaryKeyName = v;
@@ -12254,9 +12437,9 @@ module.exports =
 	  }, {
 	    key: 'selectJoinKey',
 	    value: function selectJoinKey(v, field, rgi, i) {
-	      var _props11 = this.props,
-	          change = _props11.change,
-	          formValues = _props11.formValues;
+	      var _props13 = this.props,
+	          change = _props13.change,
+	          formValues = _props13.formValues;
 	
 	      var resourceGroups = [].concat(_toConsumableArray(formValues['resourceGroups']));
 	      var rsc = resourceGroups[rgi].resources[i];
@@ -12272,15 +12455,15 @@ module.exports =
 	    value: function render() {
 	      var _this2 = this;
 	
-	      var _props12 = this.props,
-	          inputs = _props12.inputs,
-	          handleSubmit = _props12.handleSubmit,
-	          nav = _props12.nav,
-	          formValues = _props12.formValues,
-	          step = _props12.step,
-	          reset = _props12.reset,
-	          wizard = _props12.wizard,
-	          change = _props12.change;
+	      var _props14 = this.props,
+	          inputs = _props14.inputs,
+	          handleSubmit = _props14.handleSubmit,
+	          nav = _props14.nav,
+	          formValues = _props14.formValues,
+	          step = _props14.step,
+	          reset = _props14.reset,
+	          wizard = _props14.wizard,
+	          change = _props14.change;
 	
 	      if (!formValues['resourceGroups']) return _react2.default.createElement('div', null);
 	
@@ -12345,7 +12528,8 @@ module.exports =
 	              changeEntityOrder: this.changeEntityOrder, step: step,
 	              destinationSchema: destinationSchema, isReverse: isReverse,
 	              selectPrimaryKey: this.selectPrimaryKey,
-	              selectJoinKey: this.selectJoinKey, change: change }),
+	              selectJoinKey: this.selectJoinKey, change: change,
+	              changeEntityLevel: this.changeEntityLevel }),
 	            _react2.default.createElement(_bundleTable2.default, { openConnectionModal: this.openConnectionModal, mode: formValues.direction })
 	          ),
 	          _react2.default.createElement('br', null)
@@ -12451,7 +12635,7 @@ module.exports =
 	
 	var _nestExpand2 = _interopRequireDefault(_nestExpand);
 	
-	var _CSSTransitionGroup = __webpack_require__(27);
+	var _CSSTransitionGroup = __webpack_require__(28);
 	
 	var _CSSTransitionGroup2 = _interopRequireDefault(_CSSTransitionGroup);
 	
@@ -13331,7 +13515,7 @@ module.exports =
 	
 	var _react2 = _interopRequireDefault(_react);
 	
-	var _redux = __webpack_require__(212);
+	var _redux = __webpack_require__(213);
 	
 	var _reactRedux = __webpack_require__(65);
 	
@@ -13574,11 +13758,11 @@ module.exports =
 
 	'use strict';
 	// 19.1.2.1 Object.assign(target, source, ...)
-	var getKeys  = __webpack_require__(33)
+	var getKeys  = __webpack_require__(34)
 	  , gOPS     = __webpack_require__(146)
 	  , pIE      = __webpack_require__(148)
-	  , toObject = __webpack_require__(36)
-	  , IObject  = __webpack_require__(31)
+	  , toObject = __webpack_require__(37)
+	  , IObject  = __webpack_require__(32)
 	  , $assign  = Object.assign;
 	
 	// should work with symbols and should have deterministic property order (V8 bug)
@@ -16296,7 +16480,7 @@ module.exports =
 	
 	var _moment2 = _interopRequireDefault(_moment);
 	
-	var _classnames = __webpack_require__(38);
+	var _classnames = __webpack_require__(39);
 	
 	var _classnames2 = _interopRequireDefault(_classnames);
 	
@@ -16482,7 +16666,7 @@ module.exports =
 	
 	var _reactDom2 = _interopRequireDefault(_reactDom);
 	
-	var _classnames3 = __webpack_require__(38);
+	var _classnames3 = __webpack_require__(39);
 	
 	var _classnames4 = _interopRequireDefault(_classnames3);
 	
@@ -17953,8 +18137,1029 @@ module.exports =
 	module.exports = exports['default'];
 
 /***/ },
-/* 201 */,
-/* 202 */
+/* 201 */
+/***/ function(module, exports, __webpack_require__) {
+
+	(function webpackUniversalModuleDefinition(root, factory) {
+		if(true)
+			module.exports = factory(__webpack_require__(1), __webpack_require__(27));
+		else if(typeof define === 'function' && define.amd)
+			define(["react", "prop-types"], factory);
+		else if(typeof exports === 'object')
+			exports["Dropzone"] = factory(require("react"), require("prop-types"));
+		else
+			root["Dropzone"] = factory(root["react"], root["prop-types"]);
+	})(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__) {
+	return /******/ (function(modules) { // webpackBootstrap
+	/******/ 	// The module cache
+	/******/ 	var installedModules = {};
+	/******/
+	/******/ 	// The require function
+	/******/ 	function __webpack_require__(moduleId) {
+	/******/
+	/******/ 		// Check if module is in cache
+	/******/ 		if(installedModules[moduleId]) {
+	/******/ 			return installedModules[moduleId].exports;
+	/******/ 		}
+	/******/ 		// Create a new module (and put it into the cache)
+	/******/ 		var module = installedModules[moduleId] = {
+	/******/ 			i: moduleId,
+	/******/ 			l: false,
+	/******/ 			exports: {}
+	/******/ 		};
+	/******/
+	/******/ 		// Execute the module function
+	/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+	/******/
+	/******/ 		// Flag the module as loaded
+	/******/ 		module.l = true;
+	/******/
+	/******/ 		// Return the exports of the module
+	/******/ 		return module.exports;
+	/******/ 	}
+	/******/
+	/******/
+	/******/ 	// expose the modules object (__webpack_modules__)
+	/******/ 	__webpack_require__.m = modules;
+	/******/
+	/******/ 	// expose the module cache
+	/******/ 	__webpack_require__.c = installedModules;
+	/******/
+	/******/ 	// define getter function for harmony exports
+	/******/ 	__webpack_require__.d = function(exports, name, getter) {
+	/******/ 		if(!__webpack_require__.o(exports, name)) {
+	/******/ 			Object.defineProperty(exports, name, {
+	/******/ 				configurable: false,
+	/******/ 				enumerable: true,
+	/******/ 				get: getter
+	/******/ 			});
+	/******/ 		}
+	/******/ 	};
+	/******/
+	/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+	/******/ 	__webpack_require__.n = function(module) {
+	/******/ 		var getter = module && module.__esModule ?
+	/******/ 			function getDefault() { return module['default']; } :
+	/******/ 			function getModuleExports() { return module; };
+	/******/ 		__webpack_require__.d(getter, 'a', getter);
+	/******/ 		return getter;
+	/******/ 	};
+	/******/
+	/******/ 	// Object.prototype.hasOwnProperty.call
+	/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+	/******/
+	/******/ 	// __webpack_public_path__
+	/******/ 	__webpack_require__.p = "";
+	/******/
+	/******/ 	// Load entry module and return exports
+	/******/ 	return __webpack_require__(__webpack_require__.s = 0);
+	/******/ })
+	/************************************************************************/
+	/******/ ([
+	/* 0 */
+	/***/ (function(module, exports, __webpack_require__) {
+	
+	"use strict";
+	/* WEBPACK VAR INJECTION */(function(process) {
+	
+	Object.defineProperty(exports, "__esModule", {
+	  value: true
+	});
+	
+	var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+	
+	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+	
+	var _react = __webpack_require__(2);
+	
+	var _react2 = _interopRequireDefault(_react);
+	
+	var _propTypes = __webpack_require__(3);
+	
+	var _propTypes2 = _interopRequireDefault(_propTypes);
+	
+	var _utils = __webpack_require__(4);
+	
+	var _styles = __webpack_require__(6);
+	
+	var _styles2 = _interopRequireDefault(_styles);
+	
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+	
+	function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+	
+	function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+	
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+	
+	function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+	
+	function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* eslint prefer-template: 0 */
+	
+	var Dropzone = function (_React$Component) {
+	  _inherits(Dropzone, _React$Component);
+	
+	  function Dropzone(props, context) {
+	    _classCallCheck(this, Dropzone);
+	
+	    var _this = _possibleConstructorReturn(this, (Dropzone.__proto__ || Object.getPrototypeOf(Dropzone)).call(this, props, context));
+	
+	    _this.renderChildren = function (children, isDragActive, isDragAccept, isDragReject) {
+	      if (typeof children === 'function') {
+	        return children(_extends({}, _this.state, {
+	          isDragActive: isDragActive,
+	          isDragAccept: isDragAccept,
+	          isDragReject: isDragReject
+	        }));
+	      }
+	      return children;
+	    };
+	
+	    _this.composeHandlers = _this.composeHandlers.bind(_this);
+	    _this.onClick = _this.onClick.bind(_this);
+	    _this.onDocumentDrop = _this.onDocumentDrop.bind(_this);
+	    _this.onDragEnter = _this.onDragEnter.bind(_this);
+	    _this.onDragLeave = _this.onDragLeave.bind(_this);
+	    _this.onDragOver = _this.onDragOver.bind(_this);
+	    _this.onDragStart = _this.onDragStart.bind(_this);
+	    _this.onDrop = _this.onDrop.bind(_this);
+	    _this.onFileDialogCancel = _this.onFileDialogCancel.bind(_this);
+	    _this.onInputElementClick = _this.onInputElementClick.bind(_this);
+	
+	    _this.setRef = _this.setRef.bind(_this);
+	    _this.setRefs = _this.setRefs.bind(_this);
+	
+	    _this.isFileDialogActive = false;
+	
+	    _this.state = {
+	      draggedFiles: [],
+	      acceptedFiles: [],
+	      rejectedFiles: []
+	    };
+	    return _this;
+	  }
+	
+	  _createClass(Dropzone, [{
+	    key: 'componentDidMount',
+	    value: function componentDidMount() {
+	      var preventDropOnDocument = this.props.preventDropOnDocument;
+	
+	      this.dragTargets = [];
+	
+	      if (preventDropOnDocument) {
+	        document.addEventListener('dragover', _utils.onDocumentDragOver, false);
+	        document.addEventListener('drop', this.onDocumentDrop, false);
+	      }
+	      this.fileInputEl.addEventListener('click', this.onInputElementClick, false);
+	      // Tried implementing addEventListener, but didn't work out
+	      document.body.onfocus = this.onFileDialogCancel;
+	    }
+	  }, {
+	    key: 'componentWillUnmount',
+	    value: function componentWillUnmount() {
+	      var preventDropOnDocument = this.props.preventDropOnDocument;
+	
+	      if (preventDropOnDocument) {
+	        document.removeEventListener('dragover', _utils.onDocumentDragOver);
+	        document.removeEventListener('drop', this.onDocumentDrop);
+	      }
+	      this.fileInputEl.removeEventListener('click', this.onInputElementClick, false);
+	      // Can be replaced with removeEventListener, if addEventListener works
+	      document.body.onfocus = null;
+	    }
+	  }, {
+	    key: 'composeHandlers',
+	    value: function composeHandlers(handler) {
+	      if (this.props.disabled) {
+	        return null;
+	      }
+	
+	      return handler;
+	    }
+	  }, {
+	    key: 'onDocumentDrop',
+	    value: function onDocumentDrop(evt) {
+	      if (this.node.contains(evt.target)) {
+	        // if we intercepted an event for our instance, let it propagate down to the instance's onDrop handler
+	        return;
+	      }
+	      evt.preventDefault();
+	      this.dragTargets = [];
+	    }
+	  }, {
+	    key: 'onDragStart',
+	    value: function onDragStart(evt) {
+	      if (this.props.onDragStart) {
+	        this.props.onDragStart.call(this, evt);
+	      }
+	    }
+	  }, {
+	    key: 'onDragEnter',
+	    value: function onDragEnter(evt) {
+	      evt.preventDefault();
+	
+	      // Count the dropzone and any children that are entered.
+	      if (this.dragTargets.indexOf(evt.target) === -1) {
+	        this.dragTargets.push(evt.target);
+	      }
+	
+	      this.setState({
+	        isDragActive: true, // Do not rely on files for the drag state. It doesn't work in Safari.
+	        draggedFiles: (0, _utils.getDataTransferItems)(evt)
+	      });
+	
+	      if (this.props.onDragEnter) {
+	        this.props.onDragEnter.call(this, evt);
+	      }
+	    }
+	  }, {
+	    key: 'onDragOver',
+	    value: function onDragOver(evt) {
+	      // eslint-disable-line class-methods-use-this
+	      evt.preventDefault();
+	      evt.stopPropagation();
+	      try {
+	        evt.dataTransfer.dropEffect = 'copy'; // eslint-disable-line no-param-reassign
+	      } catch (err) {
+	        // continue regardless of error
+	      }
+	
+	      if (this.props.onDragOver) {
+	        this.props.onDragOver.call(this, evt);
+	      }
+	      return false;
+	    }
+	  }, {
+	    key: 'onDragLeave',
+	    value: function onDragLeave(evt) {
+	      var _this2 = this;
+	
+	      evt.preventDefault();
+	
+	      // Only deactivate once the dropzone and all children have been left.
+	      this.dragTargets = this.dragTargets.filter(function (el) {
+	        return el !== evt.target && _this2.node.contains(el);
+	      });
+	      if (this.dragTargets.length > 0) {
+	        return;
+	      }
+	
+	      // Clear dragging files state
+	      this.setState({
+	        isDragActive: false,
+	        draggedFiles: []
+	      });
+	
+	      if (this.props.onDragLeave) {
+	        this.props.onDragLeave.call(this, evt);
+	      }
+	    }
+	  }, {
+	    key: 'onDrop',
+	    value: function onDrop(evt) {
+	      var _this3 = this;
+	
+	      var _props = this.props,
+	          onDrop = _props.onDrop,
+	          onDropAccepted = _props.onDropAccepted,
+	          onDropRejected = _props.onDropRejected,
+	          multiple = _props.multiple,
+	          disablePreview = _props.disablePreview,
+	          accept = _props.accept;
+	
+	      var fileList = (0, _utils.getDataTransferItems)(evt);
+	      var acceptedFiles = [];
+	      var rejectedFiles = [];
+	
+	      // Stop default browser behavior
+	      evt.preventDefault();
+	
+	      // Reset the counter along with the drag on a drop.
+	      this.dragTargets = [];
+	      this.isFileDialogActive = false;
+	
+	      fileList.forEach(function (file) {
+	        if (!disablePreview) {
+	          try {
+	            file.preview = window.URL.createObjectURL(file); // eslint-disable-line no-param-reassign
+	          } catch (err) {
+	            if (process.env.NODE_ENV !== 'production') {
+	              console.error('Failed to generate preview for file', file, err); // eslint-disable-line no-console
+	            }
+	          }
+	        }
+	
+	        if ((0, _utils.fileAccepted)(file, accept) && (0, _utils.fileMatchSize)(file, _this3.props.maxSize, _this3.props.minSize)) {
+	          acceptedFiles.push(file);
+	        } else {
+	          rejectedFiles.push(file);
+	        }
+	      });
+	
+	      if (!multiple) {
+	        // if not in multi mode add any extra accepted files to rejected.
+	        // This will allow end users to easily ignore a multi file drop in "single" mode.
+	        rejectedFiles.push.apply(rejectedFiles, _toConsumableArray(acceptedFiles.splice(1)));
+	      }
+	
+	      if (onDrop) {
+	        onDrop.call(this, acceptedFiles, rejectedFiles, evt);
+	      }
+	
+	      if (rejectedFiles.length > 0 && onDropRejected) {
+	        onDropRejected.call(this, rejectedFiles, evt);
+	      }
+	
+	      if (acceptedFiles.length > 0 && onDropAccepted) {
+	        onDropAccepted.call(this, acceptedFiles, evt);
+	      }
+	
+	      // Clear files value
+	      this.draggedFiles = null;
+	
+	      // Reset drag state
+	      this.setState({
+	        isDragActive: false,
+	        draggedFiles: [],
+	        acceptedFiles: acceptedFiles,
+	        rejectedFiles: rejectedFiles
+	      });
+	    }
+	  }, {
+	    key: 'onClick',
+	    value: function onClick(evt) {
+	      var _props2 = this.props,
+	          onClick = _props2.onClick,
+	          disableClick = _props2.disableClick;
+	
+	      if (!disableClick) {
+	        evt.stopPropagation();
+	
+	        if (onClick) {
+	          onClick.call(this, evt);
+	        }
+	
+	        // in IE11/Edge the file-browser dialog is blocking, ensure this is behind setTimeout
+	        // this is so react can handle state changes in the onClick prop above above
+	        // see: https://github.com/react-dropzone/react-dropzone/issues/450
+	        setTimeout(this.open.bind(this), 0);
+	      }
+	    }
+	  }, {
+	    key: 'onInputElementClick',
+	    value: function onInputElementClick(evt) {
+	      evt.stopPropagation();
+	      if (this.props.inputProps && this.props.inputProps.onClick) {
+	        this.props.inputProps.onClick();
+	      }
+	    }
+	  }, {
+	    key: 'onFileDialogCancel',
+	    value: function onFileDialogCancel() {
+	      // timeout will not recognize context of this method
+	      var onFileDialogCancel = this.props.onFileDialogCancel;
+	      var fileInputEl = this.fileInputEl;
+	      var isFileDialogActive = this.isFileDialogActive;
+	      // execute the timeout only if the onFileDialogCancel is defined and FileDialog
+	      // is opened in the browser
+	
+	      if (onFileDialogCancel && isFileDialogActive) {
+	        setTimeout(function () {
+	          // Returns an object as FileList
+	          var FileList = fileInputEl.files;
+	          if (!FileList.length) {
+	            isFileDialogActive = false;
+	            onFileDialogCancel();
+	          }
+	        }, 300);
+	      }
+	    }
+	  }, {
+	    key: 'setRef',
+	    value: function setRef(ref) {
+	      this.node = ref;
+	    }
+	  }, {
+	    key: 'setRefs',
+	    value: function setRefs(ref) {
+	      this.fileInputEl = ref;
+	    }
+	    /**
+	     * Open system file upload dialog.
+	     *
+	     * @public
+	     */
+	
+	  }, {
+	    key: 'open',
+	    value: function open() {
+	      this.isFileDialogActive = true;
+	      this.fileInputEl.value = null;
+	      this.fileInputEl.click();
+	    }
+	  }, {
+	    key: 'render',
+	    value: function render() {
+	      var _props3 = this.props,
+	          accept = _props3.accept,
+	          acceptClassName = _props3.acceptClassName,
+	          activeClassName = _props3.activeClassName,
+	          children = _props3.children,
+	          disabled = _props3.disabled,
+	          disabledClassName = _props3.disabledClassName,
+	          inputProps = _props3.inputProps,
+	          multiple = _props3.multiple,
+	          name = _props3.name,
+	          rejectClassName = _props3.rejectClassName,
+	          rest = _objectWithoutProperties(_props3, ['accept', 'acceptClassName', 'activeClassName', 'children', 'disabled', 'disabledClassName', 'inputProps', 'multiple', 'name', 'rejectClassName']);
+	
+	      var acceptStyle = rest.acceptStyle,
+	          activeStyle = rest.activeStyle,
+	          className = rest.className,
+	          disabledStyle = rest.disabledStyle,
+	          rejectStyle = rest.rejectStyle,
+	          style = rest.style,
+	          props = _objectWithoutProperties(rest, ['acceptStyle', 'activeStyle', 'className', 'disabledStyle', 'rejectStyle', 'style']);
+	
+	      var _state = this.state,
+	          isDragActive = _state.isDragActive,
+	          draggedFiles = _state.draggedFiles;
+	
+	      var filesCount = draggedFiles.length;
+	      var isMultipleAllowed = multiple || filesCount <= 1;
+	      var isDragAccept = filesCount > 0 && (0, _utils.allFilesAccepted)(draggedFiles, this.props.accept);
+	      var isDragReject = filesCount > 0 && (!isDragAccept || !isMultipleAllowed);
+	      className = className || '';
+	      var noStyles = !className && !style && !activeStyle && !acceptStyle && !rejectStyle && !disabledStyle;
+	
+	      if (isDragActive && activeClassName) {
+	        className += ' ' + activeClassName;
+	      }
+	      if (isDragAccept && acceptClassName) {
+	        className += ' ' + acceptClassName;
+	      }
+	      if (isDragReject && rejectClassName) {
+	        className += ' ' + rejectClassName;
+	      }
+	      if (disabled && disabledClassName) {
+	        className += ' ' + disabledClassName;
+	      }
+	
+	      if (noStyles) {
+	        style = _styles2.default.default;
+	        activeStyle = _styles2.default.active;
+	        acceptStyle = style.active;
+	        rejectStyle = _styles2.default.rejected;
+	        disabledStyle = _styles2.default.disabled;
+	      }
+	
+	      var appliedStyle = _extends({}, style);
+	      if (activeStyle && isDragActive) {
+	        appliedStyle = _extends({}, style, activeStyle);
+	      }
+	      if (acceptStyle && isDragAccept) {
+	        appliedStyle = _extends({}, appliedStyle, acceptStyle);
+	      }
+	      if (rejectStyle && isDragReject) {
+	        appliedStyle = _extends({}, appliedStyle, rejectStyle);
+	      }
+	      if (disabledStyle && disabled) {
+	        appliedStyle = _extends({}, style, disabledStyle);
+	      }
+	
+	      var inputAttributes = {
+	        accept: accept,
+	        disabled: disabled,
+	        type: 'file',
+	        style: { display: 'none' },
+	        multiple: _utils.supportMultiple && multiple,
+	        ref: this.setRefs,
+	        onChange: this.onDrop,
+	        autoComplete: 'off'
+	      };
+	
+	      if (name && name.length) {
+	        inputAttributes.name = name;
+	      }
+	
+	      // Remove custom properties before passing them to the wrapper div element
+	      var customProps = ['acceptedFiles', 'preventDropOnDocument', 'disablePreview', 'disableClick', 'activeClassName', 'acceptClassName', 'rejectClassName', 'disabledClassName', 'onDropAccepted', 'onDropRejected', 'onFileDialogCancel', 'maxSize', 'minSize'];
+	      var divProps = _extends({}, props);
+	      customProps.forEach(function (prop) {
+	        return delete divProps[prop];
+	      });
+	
+	      return _react2.default.createElement(
+	        'div',
+	        _extends({
+	          className: className,
+	          style: appliedStyle
+	        }, divProps /* expand user provided props first so event handlers are never overridden */, {
+	          onClick: this.composeHandlers(this.onClick),
+	          onDragStart: this.composeHandlers(this.onDragStart),
+	          onDragEnter: this.composeHandlers(this.onDragEnter),
+	          onDragOver: this.composeHandlers(this.onDragOver),
+	          onDragLeave: this.composeHandlers(this.onDragLeave),
+	          onDrop: this.composeHandlers(this.onDrop),
+	          ref: this.setRef,
+	          'aria-disabled': disabled
+	        }),
+	        this.renderChildren(children, isDragActive, isDragAccept, isDragReject),
+	        _react2.default.createElement('input', _extends({}, inputProps /* expand user provided inputProps first so inputAttributes override them */, inputAttributes))
+	      );
+	    }
+	  }]);
+	
+	  return Dropzone;
+	}(_react2.default.Component);
+	
+	exports.default = Dropzone;
+	
+	
+	Dropzone.propTypes = {
+	  /**
+	   * Allow specific types of files. See https://github.com/okonet/attr-accept for more information.
+	   * Keep in mind that mime type determination is not reliable across platforms. CSV files,
+	   * for example, are reported as text/plain under macOS but as application/vnd.ms-excel under
+	   * Windows. In some cases there might not be a mime type set at all.
+	   * See: https://github.com/react-dropzone/react-dropzone/issues/276
+	   */
+	  accept: _propTypes2.default.string,
+	
+	  /**
+	   * Contents of the dropzone
+	   */
+	  children: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.func]),
+	
+	  /**
+	   * Disallow clicking on the dropzone container to open file dialog
+	   */
+	  disableClick: _propTypes2.default.bool,
+	
+	  /**
+	  * Enable/disable the dropzone entirely
+	  */
+	  disabled: _propTypes2.default.bool,
+	
+	  /**
+	   * Enable/disable preview generation
+	   */
+	  disablePreview: _propTypes2.default.bool,
+	
+	  /**
+	   * If false, allow dropped items to take over the current browser window
+	   */
+	  preventDropOnDocument: _propTypes2.default.bool,
+	
+	  /**
+	   * Pass additional attributes to the `<input type="file"/>` tag
+	   */
+	  inputProps: _propTypes2.default.object,
+	
+	  /**
+	   * Allow dropping multiple files
+	   */
+	  multiple: _propTypes2.default.bool,
+	
+	  /**
+	   * `name` attribute for the input tag
+	   */
+	  name: _propTypes2.default.string,
+	
+	  /**
+	   * Maximum file size
+	   */
+	  maxSize: _propTypes2.default.number,
+	
+	  /**
+	   * Minimum file size
+	   */
+	  minSize: _propTypes2.default.number,
+	
+	  /**
+	   * className
+	   */
+	  className: _propTypes2.default.string,
+	
+	  /**
+	   * className for active state
+	   */
+	  activeClassName: _propTypes2.default.string,
+	
+	  /**
+	   * className for accepted state
+	   */
+	  acceptClassName: _propTypes2.default.string,
+	
+	  /**
+	   * className for rejected state
+	   */
+	  rejectClassName: _propTypes2.default.string,
+	
+	  /**
+	   * className for disabled state
+	   */
+	  disabledClassName: _propTypes2.default.string,
+	
+	  /**
+	   * CSS styles to apply
+	   */
+	  style: _propTypes2.default.object,
+	
+	  /**
+	   * CSS styles to apply when drag is active
+	   */
+	  activeStyle: _propTypes2.default.object,
+	
+	  /**
+	   * CSS styles to apply when drop will be accepted
+	   */
+	  acceptStyle: _propTypes2.default.object,
+	
+	  /**
+	   * CSS styles to apply when drop will be rejected
+	   */
+	  rejectStyle: _propTypes2.default.object,
+	
+	  /**
+	   * CSS styles to apply when dropzone is disabled
+	   */
+	  disabledStyle: _propTypes2.default.object,
+	
+	  /**
+	   * onClick callback
+	   * @param {Event} event
+	   */
+	  onClick: _propTypes2.default.func,
+	
+	  /**
+	   * onDrop callback
+	   */
+	  onDrop: _propTypes2.default.func,
+	
+	  /**
+	   * onDropAccepted callback
+	   */
+	  onDropAccepted: _propTypes2.default.func,
+	
+	  /**
+	   * onDropRejected callback
+	   */
+	  onDropRejected: _propTypes2.default.func,
+	
+	  /**
+	   * onDragStart callback
+	   */
+	  onDragStart: _propTypes2.default.func,
+	
+	  /**
+	   * onDragEnter callback
+	   */
+	  onDragEnter: _propTypes2.default.func,
+	
+	  /**
+	   * onDragOver callback
+	   */
+	  onDragOver: _propTypes2.default.func,
+	
+	  /**
+	   * onDragLeave callback
+	   */
+	  onDragLeave: _propTypes2.default.func,
+	
+	  /**
+	   * Provide a callback on clicking the cancel button of the file dialog
+	   */
+	  onFileDialogCancel: _propTypes2.default.func
+	};
+	
+	Dropzone.defaultProps = {
+	  preventDropOnDocument: true,
+	  disabled: false,
+	  disablePreview: false,
+	  disableClick: false,
+	  multiple: true,
+	  maxSize: Infinity,
+	  minSize: 0
+	};
+	module.exports = exports['default'];
+	/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1)))
+	
+	/***/ }),
+	/* 1 */
+	/***/ (function(module, exports) {
+	
+	// shim for using process in browser
+	var process = module.exports = {};
+	
+	// cached from whatever global is present so that test runners that stub it
+	// don't break things.  But we need to wrap it in a try catch in case it is
+	// wrapped in strict mode code which doesn't define any globals.  It's inside a
+	// function because try/catches deoptimize in certain engines.
+	
+	var cachedSetTimeout;
+	var cachedClearTimeout;
+	
+	function defaultSetTimout() {
+	    throw new Error('setTimeout has not been defined');
+	}
+	function defaultClearTimeout () {
+	    throw new Error('clearTimeout has not been defined');
+	}
+	(function () {
+	    try {
+	        if (typeof setTimeout === 'function') {
+	            cachedSetTimeout = setTimeout;
+	        } else {
+	            cachedSetTimeout = defaultSetTimout;
+	        }
+	    } catch (e) {
+	        cachedSetTimeout = defaultSetTimout;
+	    }
+	    try {
+	        if (typeof clearTimeout === 'function') {
+	            cachedClearTimeout = clearTimeout;
+	        } else {
+	            cachedClearTimeout = defaultClearTimeout;
+	        }
+	    } catch (e) {
+	        cachedClearTimeout = defaultClearTimeout;
+	    }
+	} ())
+	function runTimeout(fun) {
+	    if (cachedSetTimeout === setTimeout) {
+	        //normal enviroments in sane situations
+	        return setTimeout(fun, 0);
+	    }
+	    // if setTimeout wasn't available but was latter defined
+	    if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) {
+	        cachedSetTimeout = setTimeout;
+	        return setTimeout(fun, 0);
+	    }
+	    try {
+	        // when when somebody has screwed with setTimeout but no I.E. maddness
+	        return cachedSetTimeout(fun, 0);
+	    } catch(e){
+	        try {
+	            // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
+	            return cachedSetTimeout.call(null, fun, 0);
+	        } catch(e){
+	            // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error
+	            return cachedSetTimeout.call(this, fun, 0);
+	        }
+	    }
+	
+	
+	}
+	function runClearTimeout(marker) {
+	    if (cachedClearTimeout === clearTimeout) {
+	        //normal enviroments in sane situations
+	        return clearTimeout(marker);
+	    }
+	    // if clearTimeout wasn't available but was latter defined
+	    if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) {
+	        cachedClearTimeout = clearTimeout;
+	        return clearTimeout(marker);
+	    }
+	    try {
+	        // when when somebody has screwed with setTimeout but no I.E. maddness
+	        return cachedClearTimeout(marker);
+	    } catch (e){
+	        try {
+	            // When we are in I.E. but the script has been evaled so I.E. doesn't  trust the global object when called normally
+	            return cachedClearTimeout.call(null, marker);
+	        } catch (e){
+	            // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error.
+	            // Some versions of I.E. have different rules for clearTimeout vs setTimeout
+	            return cachedClearTimeout.call(this, marker);
+	        }
+	    }
+	
+	
+	
+	}
+	var queue = [];
+	var draining = false;
+	var currentQueue;
+	var queueIndex = -1;
+	
+	function cleanUpNextTick() {
+	    if (!draining || !currentQueue) {
+	        return;
+	    }
+	    draining = false;
+	    if (currentQueue.length) {
+	        queue = currentQueue.concat(queue);
+	    } else {
+	        queueIndex = -1;
+	    }
+	    if (queue.length) {
+	        drainQueue();
+	    }
+	}
+	
+	function drainQueue() {
+	    if (draining) {
+	        return;
+	    }
+	    var timeout = runTimeout(cleanUpNextTick);
+	    draining = true;
+	
+	    var len = queue.length;
+	    while(len) {
+	        currentQueue = queue;
+	        queue = [];
+	        while (++queueIndex < len) {
+	            if (currentQueue) {
+	                currentQueue[queueIndex].run();
+	            }
+	        }
+	        queueIndex = -1;
+	        len = queue.length;
+	    }
+	    currentQueue = null;
+	    draining = false;
+	    runClearTimeout(timeout);
+	}
+	
+	process.nextTick = function (fun) {
+	    var args = new Array(arguments.length - 1);
+	    if (arguments.length > 1) {
+	        for (var i = 1; i < arguments.length; i++) {
+	            args[i - 1] = arguments[i];
+	        }
+	    }
+	    queue.push(new Item(fun, args));
+	    if (queue.length === 1 && !draining) {
+	        runTimeout(drainQueue);
+	    }
+	};
+	
+	// v8 likes predictible objects
+	function Item(fun, array) {
+	    this.fun = fun;
+	    this.array = array;
+	}
+	Item.prototype.run = function () {
+	    this.fun.apply(null, this.array);
+	};
+	process.title = 'browser';
+	process.browser = true;
+	process.env = {};
+	process.argv = [];
+	process.version = ''; // empty string to avoid regexp issues
+	process.versions = {};
+	
+	function noop() {}
+	
+	process.on = noop;
+	process.addListener = noop;
+	process.once = noop;
+	process.off = noop;
+	process.removeListener = noop;
+	process.removeAllListeners = noop;
+	process.emit = noop;
+	process.prependListener = noop;
+	process.prependOnceListener = noop;
+	
+	process.listeners = function (name) { return [] }
+	
+	process.binding = function (name) {
+	    throw new Error('process.binding is not supported');
+	};
+	
+	process.cwd = function () { return '/' };
+	process.chdir = function (dir) {
+	    throw new Error('process.chdir is not supported');
+	};
+	process.umask = function() { return 0; };
+	
+	
+	/***/ }),
+	/* 2 */
+	/***/ (function(module, exports) {
+	
+	module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
+	
+	/***/ }),
+	/* 3 */
+	/***/ (function(module, exports) {
+	
+	module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
+	
+	/***/ }),
+	/* 4 */
+	/***/ (function(module, exports, __webpack_require__) {
+	
+	"use strict";
+	
+	
+	Object.defineProperty(exports, "__esModule", {
+	  value: true
+	});
+	exports.supportMultiple = undefined;
+	exports.getDataTransferItems = getDataTransferItems;
+	exports.fileAccepted = fileAccepted;
+	exports.fileMatchSize = fileMatchSize;
+	exports.allFilesAccepted = allFilesAccepted;
+	exports.onDocumentDragOver = onDocumentDragOver;
+	
+	var _attrAccept = __webpack_require__(5);
+	
+	var _attrAccept2 = _interopRequireDefault(_attrAccept);
+	
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+	
+	var supportMultiple = exports.supportMultiple = typeof document !== 'undefined' && document && document.createElement ? 'multiple' in document.createElement('input') : true;
+	
+	function getDataTransferItems(event) {
+	  var dataTransferItemsList = [];
+	  if (event.dataTransfer) {
+	    var dt = event.dataTransfer;
+	    if (dt.files && dt.files.length) {
+	      dataTransferItemsList = dt.files;
+	    } else if (dt.items && dt.items.length) {
+	      // During the drag even the dataTransfer.files is null
+	      // but Chrome implements some drag store, which is accesible via dataTransfer.items
+	      dataTransferItemsList = dt.items;
+	    }
+	  } else if (event.target && event.target.files) {
+	    dataTransferItemsList = event.target.files;
+	  }
+	  // Convert from DataTransferItemsList to the native Array
+	  return Array.prototype.slice.call(dataTransferItemsList);
+	}
+	
+	// Firefox versions prior to 53 return a bogus MIME type for every file drag, so dragovers with
+	// that MIME type will always be accepted
+	function fileAccepted(file, accept) {
+	  return file.type === 'application/x-moz-file' || (0, _attrAccept2.default)(file, accept);
+	}
+	
+	function fileMatchSize(file, maxSize, minSize) {
+	  return file.size <= maxSize && file.size >= minSize;
+	}
+	
+	function allFilesAccepted(files, accept) {
+	  return files.every(function (file) {
+	    return fileAccepted(file, accept);
+	  });
+	}
+	
+	// allow the entire document to be a drag target
+	function onDocumentDragOver(evt) {
+	  evt.preventDefault();
+	}
+	
+	/***/ }),
+	/* 5 */
+	/***/ (function(module, exports) {
+	
+	module.exports=function(t){function n(e){if(r[e])return r[e].exports;var o=r[e]={exports:{},id:e,loaded:!1};return t[e].call(o.exports,o,o.exports,n),o.loaded=!0,o.exports}var r={};return n.m=t,n.c=r,n.p="",n(0)}([function(t,n,r){"use strict";n.__esModule=!0,r(8),r(9),n["default"]=function(t,n){if(t&&n){var r=function(){var r=Array.isArray(n)?n:n.split(","),e=t.name||"",o=t.type||"",i=o.replace(/\/.*$/,"");return{v:r.some(function(t){var n=t.trim();return"."===n.charAt(0)?e.toLowerCase().endsWith(n.toLowerCase()):/\/\*$/.test(n)?i===n.replace(/\/.*$/,""):o===n})}}();if("object"==typeof r)return r.v}return!0},t.exports=n["default"]},function(t,n){var r=t.exports={version:"1.2.2"};"number"==typeof __e&&(__e=r)},function(t,n){var r=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=r)},function(t,n,r){var e=r(2),o=r(1),i=r(4),u=r(19),c="prototype",f=function(t,n){return function(){return t.apply(n,arguments)}},s=function(t,n,r){var a,p,l,y,d=t&s.G,h=t&s.P,v=d?e:t&s.S?e[n]||(e[n]={}):(e[n]||{})[c],x=d?o:o[n]||(o[n]={});d&&(r=n);for(a in r)p=!(t&s.F)&&v&&a in v,l=(p?v:r)[a],y=t&s.B&&p?f(l,e):h&&"function"==typeof l?f(Function.call,l):l,v&&!p&&u(v,a,l),x[a]!=l&&i(x,a,y),h&&((x[c]||(x[c]={}))[a]=l)};e.core=o,s.F=1,s.G=2,s.S=4,s.P=8,s.B=16,s.W=32,t.exports=s},function(t,n,r){var e=r(5),o=r(18);t.exports=r(22)?function(t,n,r){return e.setDesc(t,n,o(1,r))}:function(t,n,r){return t[n]=r,t}},function(t,n){var r=Object;t.exports={create:r.create,getProto:r.getPrototypeOf,isEnum:{}.propertyIsEnumerable,getDesc:r.getOwnPropertyDescriptor,setDesc:r.defineProperty,setDescs:r.defineProperties,getKeys:r.keys,getNames:r.getOwnPropertyNames,getSymbols:r.getOwnPropertySymbols,each:[].forEach}},function(t,n){var r=0,e=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++r+e).toString(36))}},function(t,n,r){var e=r(20)("wks"),o=r(2).Symbol;t.exports=function(t){return e[t]||(e[t]=o&&o[t]||(o||r(6))("Symbol."+t))}},function(t,n,r){r(26),t.exports=r(1).Array.some},function(t,n,r){r(25),t.exports=r(1).String.endsWith},function(t,n){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,n){var r={}.toString;t.exports=function(t){return r.call(t).slice(8,-1)}},function(t,n,r){var e=r(10);t.exports=function(t,n,r){if(e(t),void 0===n)return t;switch(r){case 1:return function(r){return t.call(n,r)};case 2:return function(r,e){return t.call(n,r,e)};case 3:return function(r,e,o){return t.call(n,r,e,o)}}return function(){return t.apply(n,arguments)}}},function(t,n){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on  "+t);return t}},function(t,n,r){t.exports=function(t){var n=/./;try{"/./"[t](n)}catch(e){try{return n[r(7)("match")]=!1,!"/./"[t](n)}catch(o){}}return!0}},function(t,n){t.exports=function(t){try{return!!t()}catch(n){return!0}}},function(t,n){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,n,r){var e=r(16),o=r(11),i=r(7)("match");t.exports=function(t){var n;return e(t)&&(void 0!==(n=t[i])?!!n:"RegExp"==o(t))}},function(t,n){t.exports=function(t,n){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:n}}},function(t,n,r){var e=r(2),o=r(4),i=r(6)("src"),u="toString",c=Function[u],f=(""+c).split(u);r(1).inspectSource=function(t){return c.call(t)},(t.exports=function(t,n,r,u){"function"==typeof r&&(o(r,i,t[n]?""+t[n]:f.join(String(n))),"name"in r||(r.name=n)),t===e?t[n]=r:(u||delete t[n],o(t,n,r))})(Function.prototype,u,function(){return"function"==typeof this&&this[i]||c.call(this)})},function(t,n,r){var e=r(2),o="__core-js_shared__",i=e[o]||(e[o]={});t.exports=function(t){return i[t]||(i[t]={})}},function(t,n,r){var e=r(17),o=r(13);t.exports=function(t,n,r){if(e(n))throw TypeError("String#"+r+" doesn't accept regex!");return String(o(t))}},function(t,n,r){t.exports=!r(15)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(t,n){var r=Math.ceil,e=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?e:r)(t)}},function(t,n,r){var e=r(23),o=Math.min;t.exports=function(t){return t>0?o(e(t),9007199254740991):0}},function(t,n,r){"use strict";var e=r(3),o=r(24),i=r(21),u="endsWith",c=""[u];e(e.P+e.F*r(14)(u),"String",{endsWith:function(t){var n=i(this,t,u),r=arguments,e=r.length>1?r[1]:void 0,f=o(n.length),s=void 0===e?f:Math.min(o(e),f),a=String(t);return c?c.call(n,a,s):n.slice(s-a.length,s)===a}})},function(t,n,r){var e=r(5),o=r(3),i=r(1).Array||Array,u={},c=function(t,n){e.each.call(t.split(","),function(t){void 0==n&&t in i?u[t]=i[t]:t in[]&&(u[t]=r(12)(Function.call,[][t],n))})};c("pop,reverse,shift,keys,values,entries",1),c("indexOf,every,some,forEach,map,filter,find,findIndex,includes",3),c("join,slice,concat,push,splice,unshift,sort,lastIndexOf,reduce,reduceRight,copyWithin,fill"),o(o.S,"Array",u)}]);
+	
+	/***/ }),
+	/* 6 */
+	/***/ (function(module, exports, __webpack_require__) {
+	
+	"use strict";
+	
+	
+	Object.defineProperty(exports, "__esModule", {
+	  value: true
+	});
+	exports.default = {
+	  rejected: {
+	    borderStyle: 'solid',
+	    borderColor: '#c66',
+	    backgroundColor: '#eee'
+	  },
+	  disabled: {
+	    opacity: 0.5
+	  },
+	  active: {
+	    borderStyle: 'solid',
+	    borderColor: '#6c6',
+	    backgroundColor: '#eee'
+	  },
+	  default: {
+	    width: 200,
+	    height: 200,
+	    borderWidth: 2,
+	    borderColor: '#666',
+	    borderStyle: 'dashed',
+	    borderRadius: 5
+	  }
+	};
+	module.exports = exports['default'];
+	
+	/***/ })
+	/******/ ]);
+	});
+	//# sourceMappingURL=index.js.map
+
+/***/ },
+/* 202 */,
+/* 203 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -17963,25 +19168,25 @@ module.exports =
 	
 	var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 	
-	var _addClass = __webpack_require__(204);
+	var _addClass = __webpack_require__(205);
 	
 	var _addClass2 = _interopRequireDefault(_addClass);
 	
-	var _removeClass = __webpack_require__(206);
+	var _removeClass = __webpack_require__(207);
 	
 	var _removeClass2 = _interopRequireDefault(_removeClass);
 	
-	var _requestAnimationFrame = __webpack_require__(208);
+	var _requestAnimationFrame = __webpack_require__(209);
 	
 	var _requestAnimationFrame2 = _interopRequireDefault(_requestAnimationFrame);
 	
-	var _properties = __webpack_require__(207);
+	var _properties = __webpack_require__(208);
 	
 	var _react = __webpack_require__(1);
 	
 	var _react2 = _interopRequireDefault(_react);
 	
-	var _propTypes = __webpack_require__(39);
+	var _propTypes = __webpack_require__(27);
 	
 	var _propTypes2 = _interopRequireDefault(_propTypes);
 	
@@ -18188,7 +19393,7 @@ module.exports =
 	module.exports = exports['default'];
 
 /***/ },
-/* 203 */
+/* 204 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -18205,15 +19410,15 @@ module.exports =
 	
 	var _react2 = _interopRequireDefault(_react);
 	
-	var _propTypes = __webpack_require__(39);
+	var _propTypes = __webpack_require__(27);
 	
 	var _propTypes2 = _interopRequireDefault(_propTypes);
 	
-	var _warning = __webpack_require__(210);
+	var _warning = __webpack_require__(211);
 	
 	var _warning2 = _interopRequireDefault(_warning);
 	
-	var _ChildMapping = __webpack_require__(209);
+	var _ChildMapping = __webpack_require__(210);
 	
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 	
@@ -18465,7 +19670,7 @@ module.exports =
 	module.exports = exports['default'];
 
 /***/ },
-/* 204 */
+/* 205 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -18475,7 +19680,7 @@ module.exports =
 	});
 	exports.default = addClass;
 	
-	var _hasClass = __webpack_require__(205);
+	var _hasClass = __webpack_require__(206);
 	
 	var _hasClass2 = _interopRequireDefault(_hasClass);
 	
@@ -18487,7 +19692,7 @@ module.exports =
 	module.exports = exports['default'];
 
 /***/ },
-/* 205 */
+/* 206 */
 /***/ function(module, exports) {
 
 	"use strict";
@@ -18502,7 +19707,7 @@ module.exports =
 	module.exports = exports["default"];
 
 /***/ },
-/* 206 */
+/* 207 */
 /***/ function(module, exports) {
 
 	'use strict';
@@ -18512,7 +19717,7 @@ module.exports =
 	};
 
 /***/ },
-/* 207 */
+/* 208 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -18627,7 +19832,7 @@ module.exports =
 	}
 
 /***/ },
-/* 208 */
+/* 209 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -18685,7 +19890,7 @@ module.exports =
 	module.exports = exports['default'];
 
 /***/ },
-/* 209 */
+/* 210 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -18781,7 +19986,7 @@ module.exports =
 	}
 
 /***/ },
-/* 210 */
+/* 211 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -18847,13 +20052,13 @@ module.exports =
 
 
 /***/ },
-/* 211 */
+/* 212 */
 /***/ function(module, exports) {
 
 	module.exports = require("moment-timezone");
 
 /***/ },
-/* 212 */
+/* 213 */
 /***/ function(module, exports) {
 
 	module.exports = require("redux");