@pie-element/categorize 11.0.1-next.0 → 11.0.2-esm.0

package/esm/configure.js

@@ -0,0 +1,4667 @@
+import React, { createContext, isValidElement, cloneElement, createRef, Component } from 'react';
+import ReactDOM from 'react-dom';
+import { ModelUpdatedEvent, InsertImageEvent, DeleteImageEvent, InsertSoundEvent, DeleteSoundEvent } from '@pie-framework/pie-configure-events';
+import { renderMath } from '@pie-lib/math-rendering';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { choiceUtils, Checkbox, layout, AlertDialog, InputContainer as InputContainer$1, FeedbackConfig, settings } from '@pie-lib/config-ui';
+import { removeCategory, moveChoiceToCategory, verifyAllowMultiplePlacements, removeChoiceFromCategory, moveChoiceToAlternate, removeChoiceFromAlternate, removeAllChoices, rearrangeChoices, ensureNoExtraChoicesInAnswer, ensureNoExtraChoicesInAlternate, countInAnswer } from '@pie-lib/categorize';
+import EditableHtml from '@pie-lib/editable-html';
+import { Choice as Choice$2, PlaceHolder as PlaceHolder$1, uid, withDragContext } from '@pie-lib/drag';
+import classNames from 'classnames';
+import Info from '@material-ui/icons/Info';
+import Tooltip from '@material-ui/core/Tooltip';
+import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
+import Button from '@material-ui/core/Button';
+import '@material-ui/core/Divider';
+import IconButton from '@material-ui/core/IconButton';
+import RemoveCircleOutlineIcon from '@material-ui/icons/RemoveCircleOutline';
+import { HtmlAndMath, color, InputContainer } from '@pie-lib/render-ui';
+import debug from 'debug';
+import { jsx } from 'react/jsx-runtime';
+import Typography from '@material-ui/core/Typography';
+import DragHandle from '@material-ui/icons/DragHandle';
+import flow from 'lodash/flow';
+import TextField from '@material-ui/core/TextField';
+import cloneDeep from 'lodash/cloneDeep';
+import Translator from '@pie-lib/translator';
+
+function _extends() {
+  _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;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+const getPluginProps = (props = {}, baseInputConfiguration = {}) => _extends({}, baseInputConfiguration, props);
+
+class InputHeader extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    const {
+      focusedEl,
+      index
+    } = this.props;
+
+    if (focusedEl && index && focusedEl === index) {
+      this.inputRef.focus('end', null, true);
+    }
+  }
+
+  render() {
+    const {
+      onChange,
+      configuration,
+      label,
+      classes,
+      className,
+      deleteFocusedEl,
+      disabled,
+      imageSupport,
+      toolbarOpts,
+      spellCheck,
+      error,
+      maxImageWidth,
+      maxImageHeight,
+      uploadSoundSupport,
+      mathMlOptions = {}
+    } = this.props;
+    const {
+      headers,
+      baseInputConfiguration
+    } = configuration;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames(classes.inputHeader, className)
+    }, /*#__PURE__*/React.createElement(EditableHtml, {
+      imageSupport: imageSupport,
+      disabled: disabled,
+      ref: ref => this.inputRef = ref,
+      autoWidthToolbar: true,
+      label: 'label',
+      markup: label,
+      onChange: onChange,
+      className: classes.editor,
+      pluginProps: getPluginProps(headers == null ? void 0 : headers.inputConfiguration, baseInputConfiguration),
+      toolbarOpts: toolbarOpts,
+      spellCheck: spellCheck,
+      error: error,
+      maxImageWidth: maxImageWidth,
+      maxImageHeight: maxImageHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      onDone: () => {
+        deleteFocusedEl && deleteFocusedEl();
+      },
+      mathMlOptions: mathMlOptions
+    }));
+  }
+
+}
+InputHeader.propTypes = {
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  configuration: PropTypes.object.isRequired,
+  deleteFocusedEl: PropTypes.func,
+  disabled: PropTypes.bool,
+  focusedEl: PropTypes.number,
+  index: PropTypes.number,
+  label: PropTypes.string,
+  maxImageWidth: PropTypes.object,
+  maxImageHeight: PropTypes.object,
+  onChange: PropTypes.func,
+  onDelete: PropTypes.func,
+  imageSupport: PropTypes.shape({
+    add: PropTypes.func.isRequired,
+    delete: PropTypes.func.isRequired
+  }),
+  uploadSoundSupport: PropTypes.shape({
+    add: PropTypes.func.isRequired,
+    delete: PropTypes.func.isRequired
+  }),
+  toolbarOpts: PropTypes.object,
+  error: PropTypes.string,
+  spellCheck: PropTypes.bool
+};
+InputHeader.defaultProps = {};
+
+const styles$d = theme => ({
+  editor: {
+    flex: '1',
+    paddingBottom: theme.spacing.unit,
+    maxWidth: '100%'
+  },
+  iconButtonRoot: {
+    width: 'auto',
+    height: 'auto'
+  },
+  inputHeader: {
+    display: 'flex',
+    justifyContent: 'space-between'
+  }
+});
+
+var InputHeader$1 = withStyles(styles$d)(InputHeader);
+
+class RawAddButton extends React.Component {
+  render() {
+    const {
+      classes,
+      className,
+      label,
+      onClick,
+      disabled
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Button, {
+      onClick: onClick,
+      disabled: disabled,
+      className: classNames(classes.addButton, className),
+      size: "small",
+      variant: "contained",
+      color: "primary"
+    }, label);
+  }
+
+}
+RawAddButton.propTypes = {
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  label: PropTypes.string,
+  onClick: PropTypes.func,
+  disabled: PropTypes.bool
+};
+RawAddButton.defaultProps = {
+  label: 'Add'
+};
+
+const styles$c = theme => ({
+  addButton: {
+    height: theme.spacing.unit * 4
+  }
+});
+
+const AddButton = withStyles(styles$c)(RawAddButton);
+const DeleteButton = withStyles(() => ({
+  deleteButton: {
+    margin: 0,
+    padding: 0
+  }
+}))(({
+  classes,
+  label,
+  onClick,
+  disabled
+}) => /*#__PURE__*/React.createElement(Button, {
+  className: classes.deleteButton,
+  onClick: onClick,
+  size: "small",
+  color: "primary",
+  disabled: disabled
+}, label));
+
+class ChoicePreview extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.delete = () => {
+      const {
+        onDelete,
+        choice
+      } = this.props;
+      onDelete(choice);
+    };
+  }
+
+  render() {
+    const {
+      alternateResponseIndex,
+      category,
+      classes,
+      className,
+      choice,
+      choiceIndex
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames(classes.choicePreview, className)
+    }, choice ? /*#__PURE__*/React.createElement(Choice$2, {
+      alternateResponseIndex: alternateResponseIndex,
+      category: category,
+      choice: choice,
+      choiceIndex: choiceIndex,
+      className: classes.overflowChoice,
+      onRemoveChoice: () => this.delete()
+    }, /*#__PURE__*/React.createElement(HtmlAndMath, {
+      html: choice == null ? void 0 : choice.content,
+      className: `${classes.breakWord}`
+    }), /*#__PURE__*/React.createElement(IconButton, {
+      "aria-label": "delete",
+      className: classNames(classes.delete, classes.customColor),
+      onClick: this.delete
+    }, /*#__PURE__*/React.createElement(RemoveCircleOutlineIcon, null))) : null);
+  }
+
+}
+ChoicePreview.propTypes = {
+  alternateResponseIndex: PropTypes.number,
+  category: PropTypes.object,
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  choice: PropTypes.object.isRequired,
+  choiceIndex: PropTypes.number,
+  onDelete: PropTypes.func.isRequired
+};
+ChoicePreview.defaultProps = {};
+
+const styles$b = () => ({
+  choicePreview: {
+    position: 'relative',
+    overflow: 'auto'
+  },
+  delete: {
+    position: 'absolute',
+    right: 0,
+    top: 0
+  },
+  breakWord: {
+    maxWidth: '90%',
+    wordBreak: 'break-all'
+  },
+  customColor: {
+    color: `${color.tertiary()} !important`
+  },
+  overflowChoice: {
+    overflow: 'auto'
+  }
+});
+
+var ChoicePreview$1 = withStyles(styles$b)(ChoicePreview);
+
+/**
+ * Create the React Context
+ */
+
+var DndContext = createContext({
+  dragDropManager: undefined
+});
+
+/**
+ * Use invariant() to assert state which your program assumes to be true.
+ *
+ * Provide sprintf-style format (only %s is supported) and arguments
+ * to provide information about what broke and what you were
+ * expecting.
+ *
+ * The invariant message will be stripped in production, but the invariant
+ * will remain to ensure logic does not differ in production.
+ */
+function invariant(condition, format) {
+  for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    args[_key - 2] = arguments[_key];
+  }
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (format === undefined) {
+      throw new Error('invariant requires an error message argument');
+    }
+  }
+
+  if (!condition) {
+    var error;
+
+    if (format === undefined) {
+      error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
+    } else {
+      var argIndex = 0;
+      error = new Error(format.replace(/%s/g, function () {
+        return args[argIndex++];
+      }));
+      error.name = 'Invariant Violation';
+    }
+
+    error.framesToPop = 1; // we don't care about invariant's own frame
+
+    throw error;
+  }
+}
+
+function _classCallCheck$7(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties$7(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); } }
+
+function _createClass$7(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$7(Constructor.prototype, protoProps); if (staticProps) _defineProperties$7(Constructor, staticProps); return Constructor; }
+
+function _defineProperty$7(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+var isCallingCanDrag = false;
+var isCallingIsDragging = false;
+var DragSourceMonitorImpl = /*#__PURE__*/function () {
+  function DragSourceMonitorImpl(manager) {
+    _classCallCheck$7(this, DragSourceMonitorImpl);
+
+    _defineProperty$7(this, "internalMonitor", void 0);
+
+    _defineProperty$7(this, "sourceId", null);
+
+    this.internalMonitor = manager.getMonitor();
+  }
+
+  _createClass$7(DragSourceMonitorImpl, [{
+    key: "receiveHandlerId",
+    value: function receiveHandlerId(sourceId) {
+      this.sourceId = sourceId;
+    }
+  }, {
+    key: "getHandlerId",
+    value: function getHandlerId() {
+      return this.sourceId;
+    }
+  }, {
+    key: "canDrag",
+    value: function canDrag() {
+      invariant(!isCallingCanDrag, 'You may not call monitor.canDrag() inside your canDrag() implementation. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source-monitor');
+
+      try {
+        isCallingCanDrag = true;
+        return this.internalMonitor.canDragSource(this.sourceId);
+      } finally {
+        isCallingCanDrag = false;
+      }
+    }
+  }, {
+    key: "isDragging",
+    value: function isDragging() {
+      if (!this.sourceId) {
+        return false;
+      }
+
+      invariant(!isCallingIsDragging, 'You may not call monitor.isDragging() inside your isDragging() implementation. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source-monitor');
+
+      try {
+        isCallingIsDragging = true;
+        return this.internalMonitor.isDraggingSource(this.sourceId);
+      } finally {
+        isCallingIsDragging = false;
+      }
+    }
+  }, {
+    key: "subscribeToStateChange",
+    value: function subscribeToStateChange(listener, options) {
+      return this.internalMonitor.subscribeToStateChange(listener, options);
+    }
+  }, {
+    key: "isDraggingSource",
+    value: function isDraggingSource(sourceId) {
+      return this.internalMonitor.isDraggingSource(sourceId);
+    }
+  }, {
+    key: "isOverTarget",
+    value: function isOverTarget(targetId, options) {
+      return this.internalMonitor.isOverTarget(targetId, options);
+    }
+  }, {
+    key: "getTargetIds",
+    value: function getTargetIds() {
+      return this.internalMonitor.getTargetIds();
+    }
+  }, {
+    key: "isSourcePublic",
+    value: function isSourcePublic() {
+      return this.internalMonitor.isSourcePublic();
+    }
+  }, {
+    key: "getSourceId",
+    value: function getSourceId() {
+      return this.internalMonitor.getSourceId();
+    }
+  }, {
+    key: "subscribeToOffsetChange",
+    value: function subscribeToOffsetChange(listener) {
+      return this.internalMonitor.subscribeToOffsetChange(listener);
+    }
+  }, {
+    key: "canDragSource",
+    value: function canDragSource(sourceId) {
+      return this.internalMonitor.canDragSource(sourceId);
+    }
+  }, {
+    key: "canDropOnTarget",
+    value: function canDropOnTarget(targetId) {
+      return this.internalMonitor.canDropOnTarget(targetId);
+    }
+  }, {
+    key: "getItemType",
+    value: function getItemType() {
+      return this.internalMonitor.getItemType();
+    }
+  }, {
+    key: "getItem",
+    value: function getItem() {
+      return this.internalMonitor.getItem();
+    }
+  }, {
+    key: "getDropResult",
+    value: function getDropResult() {
+      return this.internalMonitor.getDropResult();
+    }
+  }, {
+    key: "didDrop",
+    value: function didDrop() {
+      return this.internalMonitor.didDrop();
+    }
+  }, {
+    key: "getInitialClientOffset",
+    value: function getInitialClientOffset() {
+      return this.internalMonitor.getInitialClientOffset();
+    }
+  }, {
+    key: "getInitialSourceClientOffset",
+    value: function getInitialSourceClientOffset() {
+      return this.internalMonitor.getInitialSourceClientOffset();
+    }
+  }, {
+    key: "getSourceClientOffset",
+    value: function getSourceClientOffset() {
+      return this.internalMonitor.getSourceClientOffset();
+    }
+  }, {
+    key: "getClientOffset",
+    value: function getClientOffset() {
+      return this.internalMonitor.getClientOffset();
+    }
+  }, {
+    key: "getDifferenceFromInitialOffset",
+    value: function getDifferenceFromInitialOffset() {
+      return this.internalMonitor.getDifferenceFromInitialOffset();
+    }
+  }]);
+
+  return DragSourceMonitorImpl;
+}();
+
+function _classCallCheck$6(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties$6(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); } }
+
+function _createClass$6(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$6(Constructor.prototype, protoProps); if (staticProps) _defineProperties$6(Constructor, staticProps); return Constructor; }
+
+function _defineProperty$6(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+var isCallingCanDrop = false;
+var DropTargetMonitorImpl = /*#__PURE__*/function () {
+  function DropTargetMonitorImpl(manager) {
+    _classCallCheck$6(this, DropTargetMonitorImpl);
+
+    _defineProperty$6(this, "internalMonitor", void 0);
+
+    _defineProperty$6(this, "targetId", null);
+
+    this.internalMonitor = manager.getMonitor();
+  }
+
+  _createClass$6(DropTargetMonitorImpl, [{
+    key: "receiveHandlerId",
+    value: function receiveHandlerId(targetId) {
+      this.targetId = targetId;
+    }
+  }, {
+    key: "getHandlerId",
+    value: function getHandlerId() {
+      return this.targetId;
+    }
+  }, {
+    key: "subscribeToStateChange",
+    value: function subscribeToStateChange(listener, options) {
+      return this.internalMonitor.subscribeToStateChange(listener, options);
+    }
+  }, {
+    key: "canDrop",
+    value: function canDrop() {
+      // Cut out early if the target id has not been set. This should prevent errors
+      // where the user has an older version of dnd-core like in
+      // https://github.com/react-dnd/react-dnd/issues/1310
+      if (!this.targetId) {
+        return false;
+      }
+
+      invariant(!isCallingCanDrop, 'You may not call monitor.canDrop() inside your canDrop() implementation. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drop-target-monitor');
+
+      try {
+        isCallingCanDrop = true;
+        return this.internalMonitor.canDropOnTarget(this.targetId);
+      } finally {
+        isCallingCanDrop = false;
+      }
+    }
+  }, {
+    key: "isOver",
+    value: function isOver(options) {
+      if (!this.targetId) {
+        return false;
+      }
+
+      return this.internalMonitor.isOverTarget(this.targetId, options);
+    }
+  }, {
+    key: "getItemType",
+    value: function getItemType() {
+      return this.internalMonitor.getItemType();
+    }
+  }, {
+    key: "getItem",
+    value: function getItem() {
+      return this.internalMonitor.getItem();
+    }
+  }, {
+    key: "getDropResult",
+    value: function getDropResult() {
+      return this.internalMonitor.getDropResult();
+    }
+  }, {
+    key: "didDrop",
+    value: function didDrop() {
+      return this.internalMonitor.didDrop();
+    }
+  }, {
+    key: "getInitialClientOffset",
+    value: function getInitialClientOffset() {
+      return this.internalMonitor.getInitialClientOffset();
+    }
+  }, {
+    key: "getInitialSourceClientOffset",
+    value: function getInitialSourceClientOffset() {
+      return this.internalMonitor.getInitialSourceClientOffset();
+    }
+  }, {
+    key: "getSourceClientOffset",
+    value: function getSourceClientOffset() {
+      return this.internalMonitor.getSourceClientOffset();
+    }
+  }, {
+    key: "getClientOffset",
+    value: function getClientOffset() {
+      return this.internalMonitor.getClientOffset();
+    }
+  }, {
+    key: "getDifferenceFromInitialOffset",
+    value: function getDifferenceFromInitialOffset() {
+      return this.internalMonitor.getDifferenceFromInitialOffset();
+    }
+  }]);
+
+  return DropTargetMonitorImpl;
+}();
+
+function throwIfCompositeComponentElement(element) {
+  // Custom components can no longer be wrapped directly in React DnD 2.0
+  // so that we don't need to depend on findDOMNode() from react-dom.
+  if (typeof element.type === 'string') {
+    return;
+  }
+
+  var displayName = element.type.displayName || element.type.name || 'the component';
+  throw new Error('Only native element nodes can now be passed to React DnD connectors.' + "You can either wrap ".concat(displayName, " into a <div>, or turn it into a ") + 'drag source or a drop target itself.');
+}
+
+function wrapHookToRecognizeElement(hook) {
+  return function () {
+    var elementOrNode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+
+    // When passed a node, call the hook straight away.
+    if (!isValidElement(elementOrNode)) {
+      var node = elementOrNode;
+      hook(node, options); // return the node so it can be chained (e.g. when within callback refs
+      // <div ref={node => connectDragSource(connectDropTarget(node))}/>
+
+      return node;
+    } // If passed a ReactElement, clone it and attach this function as a ref.
+    // This helps us achieve a neat API where user doesn't even know that refs
+    // are being used under the hood.
+
+
+    var element = elementOrNode;
+    throwIfCompositeComponentElement(element); // When no options are passed, use the hook directly
+
+    var ref = options ? function (node) {
+      return hook(node, options);
+    } : hook;
+    return cloneWithRef(element, ref);
+  };
+}
+
+function wrapConnectorHooks(hooks) {
+  var wrappedHooks = {};
+  Object.keys(hooks).forEach(function (key) {
+    var hook = hooks[key]; // ref objects should be passed straight through without wrapping
+
+    if (key.endsWith('Ref')) {
+      wrappedHooks[key] = hooks[key];
+    } else {
+      var wrappedHook = wrapHookToRecognizeElement(hook);
+
+      wrappedHooks[key] = function () {
+        return wrappedHook;
+      };
+    }
+  });
+  return wrappedHooks;
+}
+
+function setRef(ref, node) {
+  if (typeof ref === 'function') {
+    ref(node);
+  } else {
+    ref.current = node;
+  }
+}
+
+function cloneWithRef(element, newRef) {
+  var previousRef = element.ref;
+  invariant(typeof previousRef !== 'string', 'Cannot connect React DnD to an element with an existing string ref. ' + 'Please convert it to use a callback ref instead, or wrap it into a <span> or <div>. ' + 'Read more: https://reactjs.org/docs/refs-and-the-dom.html#callback-refs');
+
+  if (!previousRef) {
+    // When there is no ref on the element, use the new ref directly
+    return cloneElement(element, {
+      ref: newRef
+    });
+  } else {
+    return cloneElement(element, {
+      ref: function ref(node) {
+        setRef(previousRef, node);
+        setRef(newRef, node);
+      }
+    });
+  }
+}
+
+function _typeof$2(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof$2 = function _typeof(obj) { return typeof obj; }; } else { _typeof$2 = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof$2(obj); }
+
+function isRef(obj) {
+  return (// eslint-disable-next-line no-prototype-builtins
+    obj !== null && _typeof$2(obj) === 'object' && Object.prototype.hasOwnProperty.call(obj, 'current')
+  );
+}
+
+function shallowEqual(objA, objB, compare, compareContext) {
+  var compareResult = compare ? compare.call(compareContext, objA, objB) : void 0;
+
+  if (compareResult !== void 0) {
+    return !!compareResult;
+  }
+
+  if (objA === objB) {
+    return true;
+  }
+
+  if (typeof objA !== 'object' || !objA || typeof objB !== 'object' || !objB) {
+    return false;
+  }
+
+  var keysA = Object.keys(objA);
+  var keysB = Object.keys(objB);
+
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+
+  var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB); // Test for A's keys different from B.
+
+  for (var idx = 0; idx < keysA.length; idx++) {
+    var key = keysA[idx];
+
+    if (!bHasOwnProperty(key)) {
+      return false;
+    }
+
+    var valueA = objA[key];
+    var valueB = objB[key];
+    compareResult = compare ? compare.call(compareContext, valueA, valueB, key) : void 0;
+
+    if (compareResult === false || compareResult === void 0 && valueA !== valueB) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function _classCallCheck$5(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties$5(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); } }
+
+function _createClass$5(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$5(Constructor.prototype, protoProps); if (staticProps) _defineProperties$5(Constructor, staticProps); return Constructor; }
+
+function _defineProperty$5(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+var SourceConnector = /*#__PURE__*/function () {
+  // The drop target may either be attached via ref or connect function
+  // The drag preview may either be attached via ref or connect function
+  function SourceConnector(backend) {
+    var _this = this;
+
+    _classCallCheck$5(this, SourceConnector);
+
+    _defineProperty$5(this, "hooks", wrapConnectorHooks({
+      dragSource: function dragSource(node, options) {
+        _this.clearDragSource();
+
+        _this.dragSourceOptions = options || null;
+
+        if (isRef(node)) {
+          _this.dragSourceRef = node;
+        } else {
+          _this.dragSourceNode = node;
+        }
+
+        _this.reconnectDragSource();
+      },
+      dragPreview: function dragPreview(node, options) {
+        _this.clearDragPreview();
+
+        _this.dragPreviewOptions = options || null;
+
+        if (isRef(node)) {
+          _this.dragPreviewRef = node;
+        } else {
+          _this.dragPreviewNode = node;
+        }
+
+        _this.reconnectDragPreview();
+      }
+    }));
+
+    _defineProperty$5(this, "handlerId", null);
+
+    _defineProperty$5(this, "dragSourceRef", null);
+
+    _defineProperty$5(this, "dragSourceNode", void 0);
+
+    _defineProperty$5(this, "dragSourceOptionsInternal", null);
+
+    _defineProperty$5(this, "dragSourceUnsubscribe", void 0);
+
+    _defineProperty$5(this, "dragPreviewRef", null);
+
+    _defineProperty$5(this, "dragPreviewNode", void 0);
+
+    _defineProperty$5(this, "dragPreviewOptionsInternal", null);
+
+    _defineProperty$5(this, "dragPreviewUnsubscribe", void 0);
+
+    _defineProperty$5(this, "lastConnectedHandlerId", null);
+
+    _defineProperty$5(this, "lastConnectedDragSource", null);
+
+    _defineProperty$5(this, "lastConnectedDragSourceOptions", null);
+
+    _defineProperty$5(this, "lastConnectedDragPreview", null);
+
+    _defineProperty$5(this, "lastConnectedDragPreviewOptions", null);
+
+    _defineProperty$5(this, "backend", void 0);
+
+    this.backend = backend;
+  }
+
+  _createClass$5(SourceConnector, [{
+    key: "receiveHandlerId",
+    value: function receiveHandlerId(newHandlerId) {
+      if (this.handlerId === newHandlerId) {
+        return;
+      }
+
+      this.handlerId = newHandlerId;
+      this.reconnect();
+    }
+  }, {
+    key: "connectTarget",
+    get: function get() {
+      return this.dragSource;
+    }
+  }, {
+    key: "dragSourceOptions",
+    get: function get() {
+      return this.dragSourceOptionsInternal;
+    },
+    set: function set(options) {
+      this.dragSourceOptionsInternal = options;
+    }
+  }, {
+    key: "dragPreviewOptions",
+    get: function get() {
+      return this.dragPreviewOptionsInternal;
+    },
+    set: function set(options) {
+      this.dragPreviewOptionsInternal = options;
+    }
+  }, {
+    key: "reconnect",
+    value: function reconnect() {
+      this.reconnectDragSource();
+      this.reconnectDragPreview();
+    }
+  }, {
+    key: "reconnectDragSource",
+    value: function reconnectDragSource() {
+      var dragSource = this.dragSource; // if nothing has changed then don't resubscribe
+
+      var didChange = this.didHandlerIdChange() || this.didConnectedDragSourceChange() || this.didDragSourceOptionsChange();
+
+      if (didChange) {
+        this.disconnectDragSource();
+      }
+
+      if (!this.handlerId) {
+        return;
+      }
+
+      if (!dragSource) {
+        this.lastConnectedDragSource = dragSource;
+        return;
+      }
+
+      if (didChange) {
+        this.lastConnectedHandlerId = this.handlerId;
+        this.lastConnectedDragSource = dragSource;
+        this.lastConnectedDragSourceOptions = this.dragSourceOptions;
+        this.dragSourceUnsubscribe = this.backend.connectDragSource(this.handlerId, dragSource, this.dragSourceOptions);
+      }
+    }
+  }, {
+    key: "reconnectDragPreview",
+    value: function reconnectDragPreview() {
+      var dragPreview = this.dragPreview; // if nothing has changed then don't resubscribe
+
+      var didChange = this.didHandlerIdChange() || this.didConnectedDragPreviewChange() || this.didDragPreviewOptionsChange();
+
+      if (didChange) {
+        this.disconnectDragPreview();
+      }
+
+      if (!this.handlerId) {
+        return;
+      }
+
+      if (!dragPreview) {
+        this.lastConnectedDragPreview = dragPreview;
+        return;
+      }
+
+      if (didChange) {
+        this.lastConnectedHandlerId = this.handlerId;
+        this.lastConnectedDragPreview = dragPreview;
+        this.lastConnectedDragPreviewOptions = this.dragPreviewOptions;
+        this.dragPreviewUnsubscribe = this.backend.connectDragPreview(this.handlerId, dragPreview, this.dragPreviewOptions);
+      }
+    }
+  }, {
+    key: "didHandlerIdChange",
+    value: function didHandlerIdChange() {
+      return this.lastConnectedHandlerId !== this.handlerId;
+    }
+  }, {
+    key: "didConnectedDragSourceChange",
+    value: function didConnectedDragSourceChange() {
+      return this.lastConnectedDragSource !== this.dragSource;
+    }
+  }, {
+    key: "didConnectedDragPreviewChange",
+    value: function didConnectedDragPreviewChange() {
+      return this.lastConnectedDragPreview !== this.dragPreview;
+    }
+  }, {
+    key: "didDragSourceOptionsChange",
+    value: function didDragSourceOptionsChange() {
+      return !shallowEqual(this.lastConnectedDragSourceOptions, this.dragSourceOptions);
+    }
+  }, {
+    key: "didDragPreviewOptionsChange",
+    value: function didDragPreviewOptionsChange() {
+      return !shallowEqual(this.lastConnectedDragPreviewOptions, this.dragPreviewOptions);
+    }
+  }, {
+    key: "disconnectDragSource",
+    value: function disconnectDragSource() {
+      if (this.dragSourceUnsubscribe) {
+        this.dragSourceUnsubscribe();
+        this.dragSourceUnsubscribe = undefined;
+      }
+    }
+  }, {
+    key: "disconnectDragPreview",
+    value: function disconnectDragPreview() {
+      if (this.dragPreviewUnsubscribe) {
+        this.dragPreviewUnsubscribe();
+        this.dragPreviewUnsubscribe = undefined;
+        this.dragPreviewNode = null;
+        this.dragPreviewRef = null;
+      }
+    }
+  }, {
+    key: "dragSource",
+    get: function get() {
+      return this.dragSourceNode || this.dragSourceRef && this.dragSourceRef.current;
+    }
+  }, {
+    key: "dragPreview",
+    get: function get() {
+      return this.dragPreviewNode || this.dragPreviewRef && this.dragPreviewRef.current;
+    }
+  }, {
+    key: "clearDragSource",
+    value: function clearDragSource() {
+      this.dragSourceNode = null;
+      this.dragSourceRef = null;
+    }
+  }, {
+    key: "clearDragPreview",
+    value: function clearDragPreview() {
+      this.dragPreviewNode = null;
+      this.dragPreviewRef = null;
+    }
+  }]);
+
+  return SourceConnector;
+}();
+
+function _classCallCheck$4(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties$4(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); } }
+
+function _createClass$4(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$4(Constructor.prototype, protoProps); if (staticProps) _defineProperties$4(Constructor, staticProps); return Constructor; }
+
+function _defineProperty$4(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+var TargetConnector = /*#__PURE__*/function () {
+  // The drop target may either be attached via ref or connect function
+  function TargetConnector(backend) {
+    var _this = this;
+
+    _classCallCheck$4(this, TargetConnector);
+
+    _defineProperty$4(this, "hooks", wrapConnectorHooks({
+      dropTarget: function dropTarget(node, options) {
+        _this.clearDropTarget();
+
+        _this.dropTargetOptions = options;
+
+        if (isRef(node)) {
+          _this.dropTargetRef = node;
+        } else {
+          _this.dropTargetNode = node;
+        }
+
+        _this.reconnect();
+      }
+    }));
+
+    _defineProperty$4(this, "handlerId", null);
+
+    _defineProperty$4(this, "dropTargetRef", null);
+
+    _defineProperty$4(this, "dropTargetNode", void 0);
+
+    _defineProperty$4(this, "dropTargetOptionsInternal", null);
+
+    _defineProperty$4(this, "unsubscribeDropTarget", void 0);
+
+    _defineProperty$4(this, "lastConnectedHandlerId", null);
+
+    _defineProperty$4(this, "lastConnectedDropTarget", null);
+
+    _defineProperty$4(this, "lastConnectedDropTargetOptions", null);
+
+    _defineProperty$4(this, "backend", void 0);
+
+    this.backend = backend;
+  }
+
+  _createClass$4(TargetConnector, [{
+    key: "connectTarget",
+    get: function get() {
+      return this.dropTarget;
+    }
+  }, {
+    key: "reconnect",
+    value: function reconnect() {
+      // if nothing has changed then don't resubscribe
+      var didChange = this.didHandlerIdChange() || this.didDropTargetChange() || this.didOptionsChange();
+
+      if (didChange) {
+        this.disconnectDropTarget();
+      }
+
+      var dropTarget = this.dropTarget;
+
+      if (!this.handlerId) {
+        return;
+      }
+
+      if (!dropTarget) {
+        this.lastConnectedDropTarget = dropTarget;
+        return;
+      }
+
+      if (didChange) {
+        this.lastConnectedHandlerId = this.handlerId;
+        this.lastConnectedDropTarget = dropTarget;
+        this.lastConnectedDropTargetOptions = this.dropTargetOptions;
+        this.unsubscribeDropTarget = this.backend.connectDropTarget(this.handlerId, dropTarget, this.dropTargetOptions);
+      }
+    }
+  }, {
+    key: "receiveHandlerId",
+    value: function receiveHandlerId(newHandlerId) {
+      if (newHandlerId === this.handlerId) {
+        return;
+      }
+
+      this.handlerId = newHandlerId;
+      this.reconnect();
+    }
+  }, {
+    key: "dropTargetOptions",
+    get: function get() {
+      return this.dropTargetOptionsInternal;
+    },
+    set: function set(options) {
+      this.dropTargetOptionsInternal = options;
+    }
+  }, {
+    key: "didHandlerIdChange",
+    value: function didHandlerIdChange() {
+      return this.lastConnectedHandlerId !== this.handlerId;
+    }
+  }, {
+    key: "didDropTargetChange",
+    value: function didDropTargetChange() {
+      return this.lastConnectedDropTarget !== this.dropTarget;
+    }
+  }, {
+    key: "didOptionsChange",
+    value: function didOptionsChange() {
+      return !shallowEqual(this.lastConnectedDropTargetOptions, this.dropTargetOptions);
+    }
+  }, {
+    key: "disconnectDropTarget",
+    value: function disconnectDropTarget() {
+      if (this.unsubscribeDropTarget) {
+        this.unsubscribeDropTarget();
+        this.unsubscribeDropTarget = undefined;
+      }
+    }
+  }, {
+    key: "dropTarget",
+    get: function get() {
+      return this.dropTargetNode || this.dropTargetRef && this.dropTargetRef.current;
+    }
+  }, {
+    key: "clearDropTarget",
+    value: function clearDropTarget() {
+      this.dropTargetRef = null;
+      this.dropTargetNode = null;
+    }
+  }]);
+
+  return TargetConnector;
+}();
+
+function registerTarget(type, target, manager) {
+  var registry = manager.getRegistry();
+  var targetId = registry.addTarget(type, target);
+  return [targetId, function () {
+    return registry.removeTarget(targetId);
+  }];
+}
+function registerSource(type, source, manager) {
+  var registry = manager.getRegistry();
+  var sourceId = registry.addSource(type, source);
+  return [sourceId, function () {
+    return registry.removeSource(sourceId);
+  }];
+}
+
+function _typeof$1(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof$1 = function _typeof(obj) { return typeof obj; }; } else { _typeof$1 = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof$1(obj); }
+
+function getDecoratedComponent(instanceRef) {
+  var currentRef = instanceRef.current;
+
+  if (currentRef == null) {
+    return null;
+  } else if (currentRef.decoratedRef) {
+    // go through the private field in decorateHandler to avoid the invariant hit
+    return currentRef.decoratedRef.current;
+  } else {
+    return currentRef;
+  }
+}
+function isClassComponent(Component) {
+  return Component && Component.prototype && typeof Component.prototype.render === 'function';
+}
+function isRefForwardingComponent(C) {
+  var _item$$$typeof;
+
+  var item = C;
+  return (item === null || item === void 0 ? void 0 : (_item$$$typeof = item.$$typeof) === null || _item$$$typeof === void 0 ? void 0 : _item$$$typeof.toString()) === 'Symbol(react.forward_ref)';
+}
+function isRefable(C) {
+  return isClassComponent(C) || isRefForwardingComponent(C);
+}
+function checkDecoratorArguments(functionName, signature) {
+  if (process.env.NODE_ENV !== 'production') {
+    for (var i = 0; i < (arguments.length <= 2 ? 0 : arguments.length - 2); i++) {
+      var arg = i + 2 < 2 || arguments.length <= i + 2 ? undefined : arguments[i + 2];
+
+      if (arg && arg.prototype && arg.prototype.render) {
+        // eslint-disable-next-line no-console
+        console.error('You seem to be applying the arguments in the wrong order. ' + "It should be ".concat(functionName, "(").concat(signature, ")(Component), not the other way around. ") + 'Read more: http://react-dnd.github.io/react-dnd/docs/troubleshooting#you-seem-to-be-applying-the-arguments-in-the-wrong-order');
+        return;
+      }
+    }
+  }
+}
+function isFunction(input) {
+  return typeof input === 'function';
+}
+function noop() {// noop
+}
+
+function isObjectLike(input) {
+  return _typeof$1(input) === 'object' && input !== null;
+}
+
+function isPlainObject(input) {
+  if (!isObjectLike(input)) {
+    return false;
+  }
+
+  if (Object.getPrototypeOf(input) === null) {
+    return true;
+  }
+
+  var proto = input;
+
+  while (Object.getPrototypeOf(proto) !== null) {
+    proto = Object.getPrototypeOf(proto);
+  }
+
+  return Object.getPrototypeOf(input) === proto;
+}
+function isValidType(type, allowArray) {
+  return typeof type === 'string' || _typeof$1(type) === 'symbol' || !!allowArray && Array.isArray(type) && type.every(function (t) {
+    return isValidType(t, false);
+  });
+}
+
+function _classCallCheck$3(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties$3(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); } }
+
+function _createClass$3(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$3(Constructor.prototype, protoProps); if (staticProps) _defineProperties$3(Constructor, staticProps); return Constructor; }
+
+function _defineProperty$3(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+/**
+ * Provides a set of static methods for creating Disposables.
+ * @param {Function} action Action to run during the first call to dispose.
+ * The action is guaranteed to be run at most once.
+ */
+
+var Disposable = /*#__PURE__*/function () {
+  function Disposable(action) {
+    _classCallCheck$3(this, Disposable);
+
+    _defineProperty$3(this, "isDisposed", false);
+
+    _defineProperty$3(this, "action", void 0);
+
+    this.action = isFunction(action) ? action : noop;
+  }
+  /** Performs the task of cleaning up resources. */
+
+
+  _createClass$3(Disposable, [{
+    key: "dispose",
+    value: function dispose() {
+      if (!this.isDisposed) {
+        this.action();
+        this.isDisposed = true;
+      }
+    }
+  }], [{
+    key: "isDisposable",
+    value:
+    /**
+     * Gets the disposable that does nothing when disposed.
+     */
+
+    /**
+     * Validates whether the given object is a disposable
+     * @param {Object} Object to test whether it has a dispose method
+     * @returns {Boolean} true if a disposable object, else false.
+     */
+    function isDisposable(d) {
+      return Boolean(d && isFunction(d.dispose));
+    }
+  }, {
+    key: "_fixup",
+    value: function _fixup(result) {
+      return Disposable.isDisposable(result) ? result : Disposable.empty;
+    }
+    /**
+     * Creates a disposable object that invokes the specified action when disposed.
+     * @param {Function} dispose Action to run during the first call to dispose.
+     * The action is guaranteed to be run at most once.
+     * @return {Disposable} The disposable object that runs the given action upon disposal.
+     */
+
+  }, {
+    key: "create",
+    value: function create(action) {
+      return new Disposable(action);
+    }
+  }]);
+
+  return Disposable;
+}();
+/**
+ * Represents a group of disposable resources that are disposed together.
+ * @constructor
+ */
+
+_defineProperty$3(Disposable, "empty", {
+  dispose: noop
+});
+
+var CompositeDisposable = /*#__PURE__*/function () {
+  function CompositeDisposable() {
+    _classCallCheck$3(this, CompositeDisposable);
+
+    _defineProperty$3(this, "isDisposed", false);
+
+    _defineProperty$3(this, "disposables", void 0);
+
+    for (var _len = arguments.length, disposables = new Array(_len), _key = 0; _key < _len; _key++) {
+      disposables[_key] = arguments[_key];
+    }
+
+    this.disposables = disposables;
+  }
+  /**
+   * Adds a disposable to the CompositeDisposable or disposes the disposable if the CompositeDisposable is disposed.
+   * @param {Any} item Disposable to add.
+   */
+
+
+  _createClass$3(CompositeDisposable, [{
+    key: "add",
+    value: function add(item) {
+      if (this.isDisposed) {
+        item.dispose();
+      } else {
+        this.disposables.push(item);
+      }
+    }
+    /**
+     * Removes and disposes the first occurrence of a disposable from the CompositeDisposable.
+     * @param {Any} item Disposable to remove.
+     * @returns {Boolean} true if found; false otherwise.
+     */
+
+  }, {
+    key: "remove",
+    value: function remove(item) {
+      var shouldDispose = false;
+
+      if (!this.isDisposed) {
+        var idx = this.disposables.indexOf(item);
+
+        if (idx !== -1) {
+          shouldDispose = true;
+          this.disposables.splice(idx, 1);
+          item.dispose();
+        }
+      }
+
+      return shouldDispose;
+    }
+    /**
+     *  Disposes all disposables in the group and removes them from the group but
+     *  does not dispose the CompositeDisposable.
+     */
+
+  }, {
+    key: "clear",
+    value: function clear() {
+      if (!this.isDisposed) {
+        var len = this.disposables.length;
+        var currentDisposables = new Array(len);
+
+        for (var i = 0; i < len; i++) {
+          currentDisposables[i] = this.disposables[i];
+        }
+
+        this.disposables = [];
+
+        for (var _i = 0; _i < len; _i++) {
+          currentDisposables[_i].dispose();
+        }
+      }
+    }
+    /**
+     *  Disposes all disposables in the group and removes them from the group.
+     */
+
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      if (!this.isDisposed) {
+        this.isDisposed = true;
+        var len = this.disposables.length;
+        var currentDisposables = new Array(len);
+
+        for (var i = 0; i < len; i++) {
+          currentDisposables[i] = this.disposables[i];
+        }
+
+        this.disposables = [];
+
+        for (var _i2 = 0; _i2 < len; _i2++) {
+          currentDisposables[_i2].dispose();
+        }
+      }
+    }
+  }]);
+
+  return CompositeDisposable;
+}();
+/**
+ * Represents a disposable resource whose underlying disposable resource can
+ * be replaced by another disposable resource, causing automatic disposal of
+ * the previous underlying disposable resource.
+ */
+
+var SerialDisposable = /*#__PURE__*/function () {
+  function SerialDisposable() {
+    _classCallCheck$3(this, SerialDisposable);
+
+    _defineProperty$3(this, "isDisposed", false);
+
+    _defineProperty$3(this, "current", void 0);
+  }
+
+  _createClass$3(SerialDisposable, [{
+    key: "getDisposable",
+    value:
+    /**
+     * Gets the underlying disposable.
+     * @returns {Any} the underlying disposable.
+     */
+    function getDisposable() {
+      return this.current;
+    }
+  }, {
+    key: "setDisposable",
+    value: function setDisposable(value) {
+      var shouldDispose = this.isDisposed;
+
+      if (!shouldDispose) {
+        var old = this.current;
+        this.current = value;
+
+        if (old) {
+          old.dispose();
+        }
+      }
+
+      if (shouldDispose && value) {
+        value.dispose();
+      }
+    }
+    /** Performs the task of cleaning up resources. */
+
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      if (!this.isDisposed) {
+        this.isDisposed = true;
+        var old = this.current;
+        this.current = undefined;
+
+        if (old) {
+          old.dispose();
+        }
+      }
+    }
+  }]);
+
+  return SerialDisposable;
+}();
+
+var reactIs$1 = {exports: {}};
+
+var reactIs_production_min = {};
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
+Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
+function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}reactIs_production_min.AsyncMode=l;reactIs_production_min.ConcurrentMode=m;reactIs_production_min.ContextConsumer=k;reactIs_production_min.ContextProvider=h;reactIs_production_min.Element=c;reactIs_production_min.ForwardRef=n;reactIs_production_min.Fragment=e;reactIs_production_min.Lazy=t;reactIs_production_min.Memo=r;reactIs_production_min.Portal=d;
+reactIs_production_min.Profiler=g;reactIs_production_min.StrictMode=f;reactIs_production_min.Suspense=p;reactIs_production_min.isAsyncMode=function(a){return A(a)||z(a)===l};reactIs_production_min.isConcurrentMode=A;reactIs_production_min.isContextConsumer=function(a){return z(a)===k};reactIs_production_min.isContextProvider=function(a){return z(a)===h};reactIs_production_min.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};reactIs_production_min.isForwardRef=function(a){return z(a)===n};reactIs_production_min.isFragment=function(a){return z(a)===e};reactIs_production_min.isLazy=function(a){return z(a)===t};
+reactIs_production_min.isMemo=function(a){return z(a)===r};reactIs_production_min.isPortal=function(a){return z(a)===d};reactIs_production_min.isProfiler=function(a){return z(a)===g};reactIs_production_min.isStrictMode=function(a){return z(a)===f};reactIs_production_min.isSuspense=function(a){return z(a)===p};
+reactIs_production_min.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};reactIs_production_min.typeOf=z;
+
+var reactIs_development = {};
+
+/** @license React v16.13.1
+ * react-is.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+
+if (process.env.NODE_ENV !== "production") {
+  (function() {
+
+// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
+// nor polyfill, then a plain number is used for performance.
+var hasSymbol = typeof Symbol === 'function' && Symbol.for;
+var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
+var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
+var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
+var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
+var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
+var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
+var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
+// (unstable) APIs that have been removed. Can we remove the symbols?
+
+var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
+var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
+var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
+var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
+var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
+var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
+var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
+var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
+var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
+var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
+var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
+
+function isValidElementType(type) {
+  return typeof type === 'string' || typeof type === 'function' || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
+  type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
+}
+
+function typeOf(object) {
+  if (typeof object === 'object' && object !== null) {
+    var $$typeof = object.$$typeof;
+
+    switch ($$typeof) {
+      case REACT_ELEMENT_TYPE:
+        var type = object.type;
+
+        switch (type) {
+          case REACT_ASYNC_MODE_TYPE:
+          case REACT_CONCURRENT_MODE_TYPE:
+          case REACT_FRAGMENT_TYPE:
+          case REACT_PROFILER_TYPE:
+          case REACT_STRICT_MODE_TYPE:
+          case REACT_SUSPENSE_TYPE:
+            return type;
+
+          default:
+            var $$typeofType = type && type.$$typeof;
+
+            switch ($$typeofType) {
+              case REACT_CONTEXT_TYPE:
+              case REACT_FORWARD_REF_TYPE:
+              case REACT_LAZY_TYPE:
+              case REACT_MEMO_TYPE:
+              case REACT_PROVIDER_TYPE:
+                return $$typeofType;
+
+              default:
+                return $$typeof;
+            }
+
+        }
+
+      case REACT_PORTAL_TYPE:
+        return $$typeof;
+    }
+  }
+
+  return undefined;
+} // AsyncMode is deprecated along with isAsyncMode
+
+var AsyncMode = REACT_ASYNC_MODE_TYPE;
+var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
+var ContextConsumer = REACT_CONTEXT_TYPE;
+var ContextProvider = REACT_PROVIDER_TYPE;
+var Element = REACT_ELEMENT_TYPE;
+var ForwardRef = REACT_FORWARD_REF_TYPE;
+var Fragment = REACT_FRAGMENT_TYPE;
+var Lazy = REACT_LAZY_TYPE;
+var Memo = REACT_MEMO_TYPE;
+var Portal = REACT_PORTAL_TYPE;
+var Profiler = REACT_PROFILER_TYPE;
+var StrictMode = REACT_STRICT_MODE_TYPE;
+var Suspense = REACT_SUSPENSE_TYPE;
+var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
+
+function isAsyncMode(object) {
+  {
+    if (!hasWarnedAboutDeprecatedIsAsyncMode) {
+      hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
+
+      console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
+    }
+  }
+
+  return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
+}
+function isConcurrentMode(object) {
+  return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
+}
+function isContextConsumer(object) {
+  return typeOf(object) === REACT_CONTEXT_TYPE;
+}
+function isContextProvider(object) {
+  return typeOf(object) === REACT_PROVIDER_TYPE;
+}
+function isElement(object) {
+  return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+}
+function isForwardRef(object) {
+  return typeOf(object) === REACT_FORWARD_REF_TYPE;
+}
+function isFragment(object) {
+  return typeOf(object) === REACT_FRAGMENT_TYPE;
+}
+function isLazy(object) {
+  return typeOf(object) === REACT_LAZY_TYPE;
+}
+function isMemo(object) {
+  return typeOf(object) === REACT_MEMO_TYPE;
+}
+function isPortal(object) {
+  return typeOf(object) === REACT_PORTAL_TYPE;
+}
+function isProfiler(object) {
+  return typeOf(object) === REACT_PROFILER_TYPE;
+}
+function isStrictMode(object) {
+  return typeOf(object) === REACT_STRICT_MODE_TYPE;
+}
+function isSuspense(object) {
+  return typeOf(object) === REACT_SUSPENSE_TYPE;
+}
+
+reactIs_development.AsyncMode = AsyncMode;
+reactIs_development.ConcurrentMode = ConcurrentMode;
+reactIs_development.ContextConsumer = ContextConsumer;
+reactIs_development.ContextProvider = ContextProvider;
+reactIs_development.Element = Element;
+reactIs_development.ForwardRef = ForwardRef;
+reactIs_development.Fragment = Fragment;
+reactIs_development.Lazy = Lazy;
+reactIs_development.Memo = Memo;
+reactIs_development.Portal = Portal;
+reactIs_development.Profiler = Profiler;
+reactIs_development.StrictMode = StrictMode;
+reactIs_development.Suspense = Suspense;
+reactIs_development.isAsyncMode = isAsyncMode;
+reactIs_development.isConcurrentMode = isConcurrentMode;
+reactIs_development.isContextConsumer = isContextConsumer;
+reactIs_development.isContextProvider = isContextProvider;
+reactIs_development.isElement = isElement;
+reactIs_development.isForwardRef = isForwardRef;
+reactIs_development.isFragment = isFragment;
+reactIs_development.isLazy = isLazy;
+reactIs_development.isMemo = isMemo;
+reactIs_development.isPortal = isPortal;
+reactIs_development.isProfiler = isProfiler;
+reactIs_development.isStrictMode = isStrictMode;
+reactIs_development.isSuspense = isSuspense;
+reactIs_development.isValidElementType = isValidElementType;
+reactIs_development.typeOf = typeOf;
+  })();
+}
+
+if (process.env.NODE_ENV === 'production') {
+  reactIs$1.exports = reactIs_production_min;
+} else {
+  reactIs$1.exports = reactIs_development;
+}
+
+var reactIs = reactIs$1.exports;
+
+/**
+ * Copyright 2015, Yahoo! Inc.
+ * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
+ */
+var REACT_STATICS = {
+  childContextTypes: true,
+  contextType: true,
+  contextTypes: true,
+  defaultProps: true,
+  displayName: true,
+  getDefaultProps: true,
+  getDerivedStateFromError: true,
+  getDerivedStateFromProps: true,
+  mixins: true,
+  propTypes: true,
+  type: true
+};
+var KNOWN_STATICS = {
+  name: true,
+  length: true,
+  prototype: true,
+  caller: true,
+  callee: true,
+  arguments: true,
+  arity: true
+};
+var FORWARD_REF_STATICS = {
+  '$$typeof': true,
+  render: true,
+  defaultProps: true,
+  displayName: true,
+  propTypes: true
+};
+var MEMO_STATICS = {
+  '$$typeof': true,
+  compare: true,
+  defaultProps: true,
+  displayName: true,
+  propTypes: true,
+  type: true
+};
+var TYPE_STATICS = {};
+TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
+TYPE_STATICS[reactIs.Memo] = MEMO_STATICS;
+
+function getStatics(component) {
+  // React v16.11 and below
+  if (reactIs.isMemo(component)) {
+    return MEMO_STATICS;
+  } // React v16.12 and above
+
+
+  return TYPE_STATICS[component['$$typeof']] || REACT_STATICS;
+}
+
+var defineProperty = Object.defineProperty;
+var getOwnPropertyNames = Object.getOwnPropertyNames;
+var getOwnPropertySymbols = Object.getOwnPropertySymbols;
+var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
+var getPrototypeOf = Object.getPrototypeOf;
+var objectPrototype = Object.prototype;
+function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {
+  if (typeof sourceComponent !== 'string') {
+    // don't hoist over string (html) components
+    if (objectPrototype) {
+      var inheritedComponent = getPrototypeOf(sourceComponent);
+
+      if (inheritedComponent && inheritedComponent !== objectPrototype) {
+        hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);
+      }
+    }
+
+    var keys = getOwnPropertyNames(sourceComponent);
+
+    if (getOwnPropertySymbols) {
+      keys = keys.concat(getOwnPropertySymbols(sourceComponent));
+    }
+
+    var targetStatics = getStatics(targetComponent);
+    var sourceStatics = getStatics(sourceComponent);
+
+    for (var i = 0; i < keys.length; ++i) {
+      var key = keys[i];
+
+      if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) {
+        var descriptor = getOwnPropertyDescriptor(sourceComponent, key);
+
+        try {
+          // Avoid failures from read-only properties
+          defineProperty(targetComponent, key, descriptor);
+        } catch (e) {}
+      }
+    }
+  }
+
+  return targetComponent;
+}
+
+var hoistNonReactStatics_cjs = hoistNonReactStatics;
+
+var hoistStatics = hoistNonReactStatics_cjs;
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties$2(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); } }
+
+function _createClass$2(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$2(Constructor.prototype, protoProps); if (staticProps) _defineProperties$2(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function decorateHandler(_ref) {
+  var DecoratedComponent = _ref.DecoratedComponent,
+      createHandler = _ref.createHandler,
+      createMonitor = _ref.createMonitor,
+      createConnector = _ref.createConnector,
+      registerHandler = _ref.registerHandler,
+      containerDisplayName = _ref.containerDisplayName,
+      getType = _ref.getType,
+      collect = _ref.collect,
+      options = _ref.options;
+  var _options$arePropsEqua = options.arePropsEqual,
+      arePropsEqual = _options$arePropsEqua === void 0 ? shallowEqual : _options$arePropsEqua;
+  var Decorated = DecoratedComponent;
+  var displayName = DecoratedComponent.displayName || DecoratedComponent.name || 'Component';
+
+  var DragDropContainer = /*#__PURE__*/function (_Component) {
+    _inherits(DragDropContainer, _Component);
+
+    var _super = _createSuper(DragDropContainer);
+
+    function DragDropContainer(props) {
+      var _this;
+
+      _classCallCheck$2(this, DragDropContainer);
+
+      _this = _super.call(this, props);
+
+      _defineProperty$2(_assertThisInitialized(_this), "decoratedRef", createRef());
+
+      _defineProperty$2(_assertThisInitialized(_this), "handlerId", void 0);
+
+      _defineProperty$2(_assertThisInitialized(_this), "manager", void 0);
+
+      _defineProperty$2(_assertThisInitialized(_this), "handlerMonitor", void 0);
+
+      _defineProperty$2(_assertThisInitialized(_this), "handlerConnector", void 0);
+
+      _defineProperty$2(_assertThisInitialized(_this), "handler", void 0);
+
+      _defineProperty$2(_assertThisInitialized(_this), "disposable", void 0);
+
+      _defineProperty$2(_assertThisInitialized(_this), "currentType", void 0);
+
+      _defineProperty$2(_assertThisInitialized(_this), "handleChange", function () {
+        var nextState = _this.getCurrentState();
+
+        if (!shallowEqual(nextState, _this.state)) {
+          _this.setState(nextState);
+        }
+      });
+
+      _this.disposable = new SerialDisposable();
+
+      _this.receiveProps(props);
+
+      _this.dispose();
+
+      return _this;
+    }
+
+    _createClass$2(DragDropContainer, [{
+      key: "getHandlerId",
+      value: function getHandlerId() {
+        return this.handlerId;
+      }
+    }, {
+      key: "getDecoratedComponentInstance",
+      value: function getDecoratedComponentInstance() {
+        invariant(this.decoratedRef.current, 'In order to access an instance of the decorated component, it must either be a class component or use React.forwardRef()');
+        return this.decoratedRef.current;
+      }
+    }, {
+      key: "shouldComponentUpdate",
+      value: function shouldComponentUpdate(nextProps, nextState) {
+        return !arePropsEqual(nextProps, this.props) || !shallowEqual(nextState, this.state);
+      }
+    }, {
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        this.disposable = new SerialDisposable();
+        this.currentType = undefined;
+        this.receiveProps(this.props);
+        this.handleChange();
+      }
+    }, {
+      key: "componentDidUpdate",
+      value: function componentDidUpdate(prevProps) {
+        if (!arePropsEqual(this.props, prevProps)) {
+          this.receiveProps(this.props);
+          this.handleChange();
+        }
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        this.dispose();
+      }
+    }, {
+      key: "receiveProps",
+      value: function receiveProps(props) {
+        if (!this.handler) {
+          return;
+        }
+
+        this.handler.receiveProps(props);
+        this.receiveType(getType(props));
+      }
+    }, {
+      key: "receiveType",
+      value: function receiveType(type) {
+        if (!this.handlerMonitor || !this.manager || !this.handlerConnector) {
+          return;
+        }
+
+        if (type === this.currentType) {
+          return;
+        }
+
+        this.currentType = type;
+
+        var _registerHandler = registerHandler(type, this.handler, this.manager),
+            _registerHandler2 = _slicedToArray(_registerHandler, 2),
+            handlerId = _registerHandler2[0],
+            unregister = _registerHandler2[1];
+
+        this.handlerId = handlerId;
+        this.handlerMonitor.receiveHandlerId(handlerId);
+        this.handlerConnector.receiveHandlerId(handlerId);
+        var globalMonitor = this.manager.getMonitor();
+        var unsubscribe = globalMonitor.subscribeToStateChange(this.handleChange, {
+          handlerIds: [handlerId]
+        });
+        this.disposable.setDisposable(new CompositeDisposable(new Disposable(unsubscribe), new Disposable(unregister)));
+      }
+    }, {
+      key: "dispose",
+      value: function dispose() {
+        this.disposable.dispose();
+
+        if (this.handlerConnector) {
+          this.handlerConnector.receiveHandlerId(null);
+        }
+      }
+    }, {
+      key: "getCurrentState",
+      value: function getCurrentState() {
+        if (!this.handlerConnector) {
+          return {};
+        }
+
+        var nextState = collect(this.handlerConnector.hooks, this.handlerMonitor, this.props);
+
+        if (process.env.NODE_ENV !== 'production') {
+          invariant(isPlainObject(nextState), 'Expected `collect` specified as the second argument to ' + '%s for %s to return a plain object of props to inject. ' + 'Instead, received %s.', containerDisplayName, displayName, nextState);
+        }
+
+        return nextState;
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var _this2 = this;
+
+        return jsx(DndContext.Consumer, {
+          children: function children(_ref2) {
+            var dragDropManager = _ref2.dragDropManager;
+
+            _this2.receiveDragDropManager(dragDropManager);
+
+            if (typeof requestAnimationFrame !== 'undefined') {
+              requestAnimationFrame(function () {
+                var _this2$handlerConnect;
+
+                return (_this2$handlerConnect = _this2.handlerConnector) === null || _this2$handlerConnect === void 0 ? void 0 : _this2$handlerConnect.reconnect();
+              });
+            }
+
+            return jsx(Decorated, Object.assign({}, _this2.props, _this2.getCurrentState(), {
+              // NOTE: if Decorated is a Function Component, decoratedRef will not be populated unless it's a refforwarding component.
+              ref: isRefable(Decorated) ? _this2.decoratedRef : null
+            }), void 0);
+          }
+        }, void 0);
+      }
+    }, {
+      key: "receiveDragDropManager",
+      value: function receiveDragDropManager(dragDropManager) {
+        if (this.manager !== undefined) {
+          return;
+        }
+
+        invariant(dragDropManager !== undefined, 'Could not find the drag and drop manager in the context of %s. ' + 'Make sure to render a DndProvider component in your top-level component. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/troubleshooting#could-not-find-the-drag-and-drop-manager-in-the-context', displayName, displayName);
+
+        if (dragDropManager === undefined) {
+          return;
+        }
+
+        this.manager = dragDropManager;
+        this.handlerMonitor = createMonitor(dragDropManager);
+        this.handlerConnector = createConnector(dragDropManager.getBackend());
+        this.handler = createHandler(this.handlerMonitor, this.decoratedRef);
+      }
+    }]);
+
+    return DragDropContainer;
+  }(Component);
+
+  _defineProperty$2(DragDropContainer, "DecoratedComponent", DecoratedComponent);
+
+  _defineProperty$2(DragDropContainer, "displayName", "".concat(containerDisplayName, "(").concat(displayName, ")"));
+
+  return hoistStatics(DragDropContainer, DecoratedComponent);
+}
+
+function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties$1(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); } }
+
+function _createClass$1(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$1(Constructor.prototype, protoProps); if (staticProps) _defineProperties$1(Constructor, staticProps); return Constructor; }
+
+function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+var ALLOWED_SPEC_METHODS$1 = ['canDrag', 'beginDrag', 'isDragging', 'endDrag'];
+var REQUIRED_SPEC_METHODS = ['beginDrag'];
+
+var SourceImpl = /*#__PURE__*/function () {
+  function SourceImpl(spec, monitor, ref) {
+    var _this = this;
+
+    _classCallCheck$1(this, SourceImpl);
+
+    _defineProperty$1(this, "props", null);
+
+    _defineProperty$1(this, "spec", void 0);
+
+    _defineProperty$1(this, "monitor", void 0);
+
+    _defineProperty$1(this, "ref", void 0);
+
+    _defineProperty$1(this, "beginDrag", function () {
+      if (!_this.props) {
+        return;
+      }
+
+      var item = _this.spec.beginDrag(_this.props, _this.monitor, _this.ref.current);
+
+      if (process.env.NODE_ENV !== 'production') {
+        invariant(isPlainObject(item), 'beginDrag() must return a plain object that represents the dragged item. ' + 'Instead received %s. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source', item);
+      }
+
+      return item;
+    });
+
+    this.spec = spec;
+    this.monitor = monitor;
+    this.ref = ref;
+  }
+
+  _createClass$1(SourceImpl, [{
+    key: "receiveProps",
+    value: function receiveProps(props) {
+      this.props = props;
+    }
+  }, {
+    key: "canDrag",
+    value: function canDrag() {
+      if (!this.props) {
+        return false;
+      }
+
+      if (!this.spec.canDrag) {
+        return true;
+      }
+
+      return this.spec.canDrag(this.props, this.monitor);
+    }
+  }, {
+    key: "isDragging",
+    value: function isDragging(globalMonitor, sourceId) {
+      if (!this.props) {
+        return false;
+      }
+
+      if (!this.spec.isDragging) {
+        return sourceId === globalMonitor.getSourceId();
+      }
+
+      return this.spec.isDragging(this.props, this.monitor);
+    }
+  }, {
+    key: "endDrag",
+    value: function endDrag() {
+      if (!this.props) {
+        return;
+      }
+
+      if (!this.spec.endDrag) {
+        return;
+      }
+
+      this.spec.endDrag(this.props, this.monitor, getDecoratedComponent(this.ref));
+    }
+  }]);
+
+  return SourceImpl;
+}();
+
+function createSourceFactory(spec) {
+  Object.keys(spec).forEach(function (key) {
+    invariant(ALLOWED_SPEC_METHODS$1.indexOf(key) > -1, 'Expected the drag source specification to only have ' + 'some of the following keys: %s. ' + 'Instead received a specification with an unexpected "%s" key. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source', ALLOWED_SPEC_METHODS$1.join(', '), key);
+    invariant(typeof spec[key] === 'function', 'Expected %s in the drag source specification to be a function. ' + 'Instead received a specification with %s: %s. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source', key, key, spec[key]);
+  });
+  REQUIRED_SPEC_METHODS.forEach(function (key) {
+    invariant(typeof spec[key] === 'function', 'Expected %s in the drag source specification to be a function. ' + 'Instead received a specification with %s: %s. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source', key, key, spec[key]);
+  });
+  return function createSource(monitor, ref) {
+    return new SourceImpl(spec, monitor, ref);
+  };
+}
+
+/**
+ * Decorates a component as a dragsource
+ * @param type The dragsource type
+ * @param spec The drag source specification
+ * @param collect The props collector function
+ * @param options DnD options
+ */
+
+function DragSource(type, spec, collect) {
+  var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  checkDecoratorArguments('DragSource', 'type, spec, collect[, options]', type, spec, collect, options);
+  var getType = type;
+
+  if (typeof type !== 'function') {
+    invariant(isValidType(type), 'Expected "type" provided as the first argument to DragSource to be ' + 'a string, or a function that returns a string given the current props. ' + 'Instead, received %s. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source', type);
+
+    getType = function getType() {
+      return type;
+    };
+  }
+
+  invariant(isPlainObject(spec), 'Expected "spec" provided as the second argument to DragSource to be ' + 'a plain object. Instead, received %s. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source', spec);
+  var createSource = createSourceFactory(spec);
+  invariant(typeof collect === 'function', 'Expected "collect" provided as the third argument to DragSource to be ' + 'a function that returns a plain object of props to inject. ' + 'Instead, received %s. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source', collect);
+  invariant(isPlainObject(options), 'Expected "options" provided as the fourth argument to DragSource to be ' + 'a plain object when specified. ' + 'Instead, received %s. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source', collect);
+  return function decorateSource(DecoratedComponent) {
+    return decorateHandler({
+      containerDisplayName: 'DragSource',
+      createHandler: createSource,
+      registerHandler: registerSource,
+      createConnector: function createConnector(backend) {
+        return new SourceConnector(backend);
+      },
+      createMonitor: function createMonitor(manager) {
+        return new DragSourceMonitorImpl(manager);
+      },
+      DecoratedComponent: DecoratedComponent,
+      getType: getType,
+      collect: collect,
+      options: options
+    });
+  };
+}
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+var ALLOWED_SPEC_METHODS = ['canDrop', 'hover', 'drop'];
+
+var TargetImpl = /*#__PURE__*/function () {
+  function TargetImpl(spec, monitor, ref) {
+    _classCallCheck(this, TargetImpl);
+
+    _defineProperty(this, "props", null);
+
+    _defineProperty(this, "spec", void 0);
+
+    _defineProperty(this, "monitor", void 0);
+
+    _defineProperty(this, "ref", void 0);
+
+    this.spec = spec;
+    this.monitor = monitor;
+    this.ref = ref;
+  }
+
+  _createClass(TargetImpl, [{
+    key: "receiveProps",
+    value: function receiveProps(props) {
+      this.props = props;
+    }
+  }, {
+    key: "receiveMonitor",
+    value: function receiveMonitor(monitor) {
+      this.monitor = monitor;
+    }
+  }, {
+    key: "canDrop",
+    value: function canDrop() {
+      if (!this.spec.canDrop) {
+        return true;
+      }
+
+      return this.spec.canDrop(this.props, this.monitor);
+    }
+  }, {
+    key: "hover",
+    value: function hover() {
+      if (!this.spec.hover || !this.props) {
+        return;
+      }
+
+      this.spec.hover(this.props, this.monitor, getDecoratedComponent(this.ref));
+    }
+  }, {
+    key: "drop",
+    value: function drop() {
+      if (!this.spec.drop) {
+        return undefined;
+      }
+
+      var dropResult = this.spec.drop(this.props, this.monitor, this.ref.current);
+
+      if (process.env.NODE_ENV !== 'production') {
+        invariant(typeof dropResult === 'undefined' || isPlainObject(dropResult), 'drop() must either return undefined, or an object that represents the drop result. ' + 'Instead received %s. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drop-target', dropResult);
+      }
+
+      return dropResult;
+    }
+  }]);
+
+  return TargetImpl;
+}();
+
+function createTargetFactory(spec) {
+  Object.keys(spec).forEach(function (key) {
+    invariant(ALLOWED_SPEC_METHODS.indexOf(key) > -1, 'Expected the drop target specification to only have ' + 'some of the following keys: %s. ' + 'Instead received a specification with an unexpected "%s" key. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drop-target', ALLOWED_SPEC_METHODS.join(', '), key);
+    invariant(typeof spec[key] === 'function', 'Expected %s in the drop target specification to be a function. ' + 'Instead received a specification with %s: %s. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drop-target', key, key, spec[key]);
+  });
+  return function createTarget(monitor, ref) {
+    return new TargetImpl(spec, monitor, ref);
+  };
+}
+
+/**
+ * @param type The accepted target type
+ * @param spec The DropTarget specification
+ * @param collect The props collector function
+ * @param options Options
+ */
+
+function DropTarget(type, spec, collect) {
+  var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  checkDecoratorArguments('DropTarget', 'type, spec, collect[, options]', type, spec, collect, options);
+  var getType = type;
+
+  if (typeof type !== 'function') {
+    invariant(isValidType(type, true), 'Expected "type" provided as the first argument to DropTarget to be ' + 'a string, an array of strings, or a function that returns either given ' + 'the current props. Instead, received %s. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drop-target', type);
+
+    getType = function getType() {
+      return type;
+    };
+  }
+
+  invariant(isPlainObject(spec), 'Expected "spec" provided as the second argument to DropTarget to be ' + 'a plain object. Instead, received %s. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drop-target', spec);
+  var createTarget = createTargetFactory(spec);
+  invariant(typeof collect === 'function', 'Expected "collect" provided as the third argument to DropTarget to be ' + 'a function that returns a plain object of props to inject. ' + 'Instead, received %s. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drop-target', collect);
+  invariant(isPlainObject(options), 'Expected "options" provided as the fourth argument to DropTarget to be ' + 'a plain object when specified. ' + 'Instead, received %s. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drop-target', collect);
+  return function decorateTarget(DecoratedComponent) {
+    return decorateHandler({
+      containerDisplayName: 'DropTarget',
+      createHandler: createTarget,
+      registerHandler: registerTarget,
+      createMonitor: function createMonitor(manager) {
+        return new DropTargetMonitorImpl(manager);
+      },
+      createConnector: function createConnector(backend) {
+        return new TargetConnector(backend);
+      },
+      DecoratedComponent: DecoratedComponent,
+      getType: getType,
+      collect: collect,
+      options: options
+    });
+  };
+}
+
+const log$1 = debug('@pie-element:categorize:configure');
+const Helper = withStyles(theme => ({
+  helper: {
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: theme.typography.fontSize - 2,
+    color: `rgba(${theme.palette.common.black}, 0.4)`,
+    width: '100%',
+    height: '100%'
+  }
+}))(({
+  classes
+}) => /*#__PURE__*/React.createElement("div", {
+  className: classes.helper
+}, "Drag your correct answers here"));
+
+const Previews = ({
+  alternateResponseIndex,
+  category,
+  choices,
+  onDeleteChoice
+}) => /*#__PURE__*/React.createElement(React.Fragment, null, choices.map((c, index) => c && /*#__PURE__*/React.createElement(ChoicePreview$1, {
+  alternateResponseIndex: alternateResponseIndex,
+  category: category,
+  choice: c,
+  key: index,
+  choiceIndex: index,
+  onDelete: choice => onDeleteChoice(choice, index)
+})));
+
+Previews.propTypes = {
+  alternateResponseIndex: PropTypes.number,
+  category: PropTypes.object,
+  choices: PropTypes.array,
+  onDeleteChoice: PropTypes.func
+};
+class DroppablePlaceHolder extends React.Component {
+  render() {
+    const {
+      alternateResponseIndex,
+      isOver,
+      category,
+      choices,
+      classes,
+      className,
+      connectDropTarget,
+      onDeleteChoice
+    } = this.props;
+    return connectDropTarget( /*#__PURE__*/React.createElement("div", {
+      className: classNames(classes.droppablePlaceholder, className)
+    }, /*#__PURE__*/React.createElement(PlaceHolder$1, {
+      isOver: isOver,
+      className: classes.placeHolder
+    }, (choices || []).length === 0 ? /*#__PURE__*/React.createElement(Helper, null) : /*#__PURE__*/React.createElement(Previews, {
+      alternateResponseIndex: alternateResponseIndex,
+      category: category,
+      choices: choices,
+      onDeleteChoice: onDeleteChoice
+    }))));
+  }
+
+}
+DroppablePlaceHolder.propTypes = {
+  alternateResponseIndex: PropTypes.number,
+  category: PropTypes.object,
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  connectDropTarget: PropTypes.func.isRequired,
+  choices: PropTypes.array,
+  onDropChoice: PropTypes.func.isRequired,
+  onMoveChoice: PropTypes.func,
+  isOver: PropTypes.bool,
+  onDeleteChoice: PropTypes.func,
+  categoryId: PropTypes.string.isRequired
+};
+DroppablePlaceHolder.defaultProps = {};
+
+const styles$a = () => ({
+  droppablePlaceholder: {
+    minHeight: '100px'
+  },
+  placeHolder: {
+    width: '100%',
+    minHeight: '100px',
+    height: 'auto'
+  }
+});
+
+const Styled = withStyles(styles$a)(DroppablePlaceHolder);
+const spec$1 = {
+  drop: (props, monitor) => {
+    log$1('[drop] props: ', props);
+    const item = monitor.getItem();
+
+    if (item.from && item.alternateResponseIndex === props.alternateResponseIndex) {
+      props.onMoveChoice(item.choiceId, item.from, props.categoryId, item.choiceIndex, item.alternateResponseIndex);
+    } else if (!item.from) {
+      // avoid dropping choice when user tries to move it to an alternate with other index
+      props.onDropChoice(item, props.categoryId);
+    }
+  },
+  canDrop: (props
+  /*, monitor*/
+  ) => {
+    return !props.disabled;
+  }
+};
+const WithTarget = DropTarget(({
+  uid
+}) => uid, spec$1, (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver()
+}))(Styled);
+var PlaceHolder = uid.withUid(WithTarget);
+
+class Category extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.changeLabel = l => {
+      const {
+        category,
+        onChange
+      } = this.props;
+      category.label = l;
+      onChange(category);
+    };
+  }
+
+  render() {
+    const {
+      alternateResponseIndex,
+      category,
+      classes,
+      className,
+      configuration,
+      deleteFocusedEl,
+      focusedEl,
+      index,
+      error,
+      isDuplicated,
+      onDelete,
+      onDeleteChoice,
+      onAddChoice,
+      onMoveChoice,
+      imageSupport,
+      spellCheck,
+      toolbarOpts,
+      maxImageWidth,
+      maxImageHeight,
+      uploadSoundSupport,
+      mathMlOptions = {}
+    } = this.props;
+    const isCategoryHeaderDisabled = !!alternateResponseIndex || alternateResponseIndex === 0;
+    return /*#__PURE__*/React.createElement(Card, {
+      className: classNames(classes.category, className, {
+        [classes.duplicateError]: isDuplicated
+      })
+    }, /*#__PURE__*/React.createElement("span", null, !isCategoryHeaderDisabled ? /*#__PURE__*/React.createElement(InputHeader$1, {
+      label: category.label,
+      focusedEl: focusedEl,
+      deleteFocusedEl: deleteFocusedEl,
+      index: index,
+      disabled: !!alternateResponseIndex || alternateResponseIndex === 0,
+      error: error,
+      onChange: this.changeLabel,
+      onDelete: onDelete,
+      imageSupport: imageSupport,
+      toolbarOpts: toolbarOpts,
+      spellCheck: spellCheck,
+      maxImageWidth: maxImageWidth,
+      maxImageHeight: maxImageHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      mathMlOptions: mathMlOptions,
+      configuration: configuration
+    }) : /*#__PURE__*/React.createElement("div", {
+      className: classes.categoryHeader,
+      dangerouslySetInnerHTML: {
+        __html: category.label
+      }
+    }), error && /*#__PURE__*/React.createElement("div", {
+      className: classes.errorText
+    }, error)), /*#__PURE__*/React.createElement(PlaceHolder, {
+      className: classes.placeHolder,
+      alternateResponseIndex: alternateResponseIndex,
+      category: category,
+      choices: category.choices,
+      onDeleteChoice: onDeleteChoice,
+      onDropChoice: onAddChoice,
+      onMoveChoice: onMoveChoice,
+      categoryId: category.id
+    }), onDelete && /*#__PURE__*/React.createElement(CardActions, {
+      className: classes.actions
+    }, /*#__PURE__*/React.createElement(DeleteButton, {
+      label: 'delete',
+      onClick: onDelete
+    })));
+  }
+
+}
+Category.propTypes = {
+  alternateResponseIndex: PropTypes.number,
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  category: PropTypes.object.isRequired,
+  configuration: PropTypes.object.isRequired,
+  defaultImageMaxHeight: PropTypes.number,
+  defaultImageMaxWidth: PropTypes.number,
+  deleteFocusedEl: PropTypes.func,
+  focusedEl: PropTypes.number,
+  index: PropTypes.number,
+  error: PropTypes.string,
+  isDuplicated: PropTypes.bool,
+  maxImageWidth: PropTypes.object,
+  maxImageHeight: PropTypes.object,
+  onChange: PropTypes.func,
+  onDelete: PropTypes.func,
+  onDeleteChoice: PropTypes.func,
+  onAddChoice: PropTypes.func,
+  onMoveChoice: PropTypes.func,
+  imageSupport: PropTypes.shape({
+    add: PropTypes.func.isRequired,
+    delete: PropTypes.func.isRequired
+  }),
+  toolbarOpts: PropTypes.object,
+  spellCheck: PropTypes.bool,
+  uploadSoundSupport: PropTypes.shape({
+    add: PropTypes.func.isRequired,
+    delete: PropTypes.func.isRequired
+  })
+};
+Category.defaultProps = {};
+
+const styles$9 = theme => ({
+  placeHolder: {
+    minHeight: '100px'
+  },
+  deleteButton: {
+    margin: 0
+  },
+  actions: {
+    padding: 0,
+    paddingBottom: 0,
+    paddingTop: theme.spacing.unit
+  },
+  iconButtonRoot: {
+    width: 'auto',
+    height: 'auto'
+  },
+  header: {
+    display: 'flex',
+    justifyContent: 'space-between'
+  },
+  category: {
+    minWidth: '196px',
+    padding: theme.spacing.unit,
+    overflow: 'visible'
+  },
+  categoryHeader: {
+    padding: theme.spacing.unit * 2,
+    '& p': {
+      margin: 0
+    }
+  },
+  duplicateError: {
+    border: '1px solid red'
+  },
+  errorText: {
+    fontSize: theme.typography.fontSize - 2,
+    color: theme.palette.error.main,
+    paddingBottom: theme.spacing.unit
+  },
+  editor: {
+    flex: '1',
+    paddingBottom: theme.spacing.unit * 2
+  }
+});
+
+var Category$1 = withStyles(styles$9)(Category);
+
+class Header extends React.Component {
+  render() {
+    const {
+      classes,
+      className,
+      onAdd,
+      label,
+      buttonLabel,
+      info,
+      buttonDisabled,
+      variant,
+      tooltip
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames(classes.header, className)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.titleContainer
+    }, /*#__PURE__*/React.createElement(Typography, {
+      variant: variant || 'title',
+      className: classes.title
+    }, label), info), /*#__PURE__*/React.createElement(Tooltip, {
+      title: tooltip || '',
+      classes: {
+        tooltip: classes.tooltip
+      },
+      enterTouchDelay: 50 // Appear quickly after a touch
+      ,
+      leaveTouchDelay: 3000 // Stay visible for 3 seconds
+
+    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(AddButton, {
+      onClick: onAdd,
+      label: buttonLabel,
+      disabled: buttonDisabled
+    }))));
+  }
+
+}
+Header.propTypes = {
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  buttonLabel: PropTypes.string,
+  onAdd: PropTypes.func.isRequired,
+  label: PropTypes.string.isRequired,
+  info: PropTypes.any,
+  buttonDisabled: PropTypes.bool,
+  variant: PropTypes.string,
+  tooltip: PropTypes.string
+};
+Header.defaultProps = {};
+
+const styles$8 = theme => ({
+  header: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    marginBottom: theme.spacing.unit
+  },
+  titleContainer: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  tooltip: {
+    fontSize: theme.typography.fontSize - 2,
+    whiteSpace: 'pre',
+    maxWidth: '500px'
+  }
+});
+
+var Header$1 = withStyles(styles$8)(Header);
+
+const generateValidationMessage = config => {
+  let {
+    minChoices,
+    maxChoices,
+    maxCategories
+  } = config || {};
+  minChoices = minChoices || 1;
+  const validationMessage = '\nThe choices content should ' + 'not be empty and should be unique.\nThere should be at least 1 ' + (maxCategories ? `and at most ${maxCategories} ` : '') + 'category' + (maxCategories ? 's' : '') + ' defined.' + (minChoices ? `\nThere should be at least ${minChoices} choices defined.` : '') + (maxChoices ? `\nNo more than ${maxChoices} choices should be defined.` : '') + '\nAt least one token should be assigned to at least one category.';
+  return 'Validation requirements:' + validationMessage;
+}; // used in controller too, for consistency modify it there too
+
+const multiplePlacements = {
+  enabled: 'Yes',
+  disabled: 'No',
+  perChoice: 'Set Per Choice'
+}; // Find the length of the largest array from an array
+
+const maxLength = array => (array || []).reduce((max, arr) => {
+  return Math.max(max, arr.length);
+}, 0);
+const getMaxCategoryChoices = model => {
+  const {
+    correctResponse = []
+  } = model || {};
+  return correctResponse.reduce((max, correctRes) => {
+    var _correctRes$choices;
+
+    const correctRespLength = (correctRes == null ? void 0 : (_correctRes$choices = correctRes.choices) == null ? void 0 : _correctRes$choices.length) || 0;
+    const alternates = (correctRes == null ? void 0 : correctRes.alternateResponses) || [];
+    const maxChoices = Math.max(correctRespLength, maxLength(alternates));
+    return maxChoices > max ? maxChoices : max;
+  }, 0);
+};
+
+const styles$7 = theme => ({
+  rowLabel: {
+    gridColumn: '1/3'
+  },
+  rowLabelHolder: {
+    paddingTop: theme.spacing.unit * 2,
+    width: '100%'
+  }
+});
+
+const RowLabel = withStyles(styles$7)(({
+  categoriesPerRow,
+  classes,
+  configuration,
+  disabled,
+  markup,
+  imageSupport,
+  onChange,
+  toolbarOpts,
+  spellCheck,
+  maxImageWidth,
+  maxImageHeight,
+  uploadSoundSupport,
+  mathMlOptions: _mathMlOptions = {}
+}) => {
+  const {
+    rowLabels,
+    baseInputConfiguration
+  } = configuration;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      gridColumn: `1/${categoriesPerRow + 1}`,
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(InputContainer, {
+    label: "Row Label",
+    className: classes.rowLabelHolder
+  }, /*#__PURE__*/React.createElement(EditableHtml, {
+    disabled: disabled,
+    markup: markup,
+    onChange: onChange,
+    imageSupport: imageSupport,
+    nonEmpty: false,
+    toolbarOpts: toolbarOpts,
+    pluginProps: getPluginProps(rowLabels == null ? void 0 : rowLabels.inputConfiguration, baseInputConfiguration),
+    spellCheck: spellCheck,
+    maxImageWidth: maxImageWidth,
+    maxImageHeight: maxImageHeight,
+    uploadSoundSupport: uploadSoundSupport,
+    languageCharactersProps: [{
+      language: 'spanish'
+    }, {
+      language: 'special'
+    }],
+    mathMlOptions: _mathMlOptions
+  })));
+});
+
+const styles$6 = theme => ({
+  categories: {
+    marginBottom: theme.spacing.unit * 3
+  },
+  categoriesHolder: {
+    display: 'grid',
+    gridRowGap: `${theme.spacing.unit}px`,
+    gridColumnGap: `${theme.spacing.unit}px`
+  },
+  row: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(2, 1fr)',
+    gridColumnGap: `${theme.spacing.unit}px`,
+    alignItems: 'baseline',
+    width: '100%',
+    marginTop: theme.spacing.unit,
+    marginBottom: 2 * theme.spacing.unit
+  },
+  rowLabel: {
+    gridColumn: '1/3'
+  },
+  rowLabelHolder: {
+    width: '100%'
+  },
+  tooltip: {
+    fontSize: theme.typography.fontSize - 2,
+    whiteSpace: 'pre',
+    maxWidth: '500px'
+  },
+  errorText: {
+    fontSize: theme.typography.fontSize - 2,
+    color: theme.palette.error.main,
+    paddingTop: theme.spacing.unit / 2
+  }
+});
+
+class Categories extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      focusedEl: null
+    };
+
+    this.add = () => {
+      const {
+        model,
+        categories: oldCategories
+      } = this.props;
+      const {
+        categoriesPerRow,
+        correctResponse,
+        allowAlternateEnabled
+      } = model;
+      const id = choiceUtils.firstAvailableIndex(model.categories.map(a => a.id), 1);
+      const data = {
+        id,
+        label: 'Category ' + id
+      };
+      const addRowLabel = model.categories.length % categoriesPerRow === 0;
+      const rowLabels = [...model.rowLabels];
+
+      if (addRowLabel) {
+        rowLabels.push('');
+      }
+
+      this.setState({
+        focusedEl: oldCategories.length
+      }, () => {
+        this.props.onModelChanged({
+          rowLabels,
+          categories: model.categories.concat([data]),
+          correctResponse: allowAlternateEnabled ? [...correctResponse, {
+            category: id,
+            choices: [],
+            alternateResponses: []
+          }] : correctResponse
+        });
+      });
+    };
+
+    this.deleteFocusedEl = () => {
+      this.setState({
+        focusedEl: null
+      });
+    };
+
+    this.delete = category => {
+      const {
+        model,
+        onModelChanged
+      } = this.props;
+      const index = model.categories.findIndex(a => a.id === category.id);
+
+      if (index !== -1) {
+        model.categories.splice(index, 1);
+        model.correctResponse = removeCategory(category.id, model.correctResponse);
+        onModelChanged(model);
+      }
+    };
+
+    this.change = c => {
+      const {
+        categories
+      } = this.props;
+      const index = categories.findIndex(a => a.id === c.id);
+
+      if (index !== -1) {
+        categories.splice(index, 1, c);
+        this.props.onModelChanged({
+          categories
+        });
+      }
+    };
+
+    this.addChoiceToCategory = (addedChoice, categoryId) => {
+      const {
+        model,
+        onModelChanged
+      } = this.props;
+      let {
+        choices = [],
+        correctResponse = [],
+        maxChoicesPerCategory = 0
+      } = model || {};
+      const choice = (choices || []).find(choice => choice.id === addedChoice.id);
+      correctResponse = moveChoiceToCategory(addedChoice.id, undefined, categoryId, 0, model.correctResponse); // if multiplePlacements not allowed, ensure the consistency in the other categories
+
+      if (choice.categoryCount !== 0) {
+        correctResponse = verifyAllowMultiplePlacements(addedChoice, categoryId, correctResponse);
+      }
+
+      const maxCategoryChoices = getMaxCategoryChoices(model); // when maxChoicesPerCategory is set to 0, there is no limit so it should not be updated
+
+      onModelChanged({
+        correctResponse,
+        maxChoicesPerCategory: maxChoicesPerCategory !== 0 && maxChoicesPerCategory < maxCategoryChoices ? maxChoicesPerCategory + 1 : maxChoicesPerCategory
+      });
+    };
+
+    this.deleteChoiceFromCategory = (category, choice, choiceIndex) => {
+      const {
+        model,
+        onModelChanged
+      } = this.props;
+      const correctResponse = removeChoiceFromCategory(choice.id, category.id, choiceIndex, model.correctResponse);
+      onModelChanged({
+        correctResponse
+      });
+    };
+
+    this.moveChoice = (choiceId, from, to, choiceIndex) => {
+      const {
+        model,
+        onModelChanged
+      } = this.props;
+      let {
+        choices,
+        correctResponse = [],
+        maxChoicesPerCategory = 0
+      } = model || {};
+      const choice = (choices || []).find(choice => choice.id === choiceId);
+
+      if (to === from || !choice) {
+        return;
+      }
+
+      if (choice.categoryCount !== 0) {
+        correctResponse = moveChoiceToCategory(choice.id, from, to, choiceIndex, correctResponse);
+        correctResponse = verifyAllowMultiplePlacements(choice, to, correctResponse);
+      } else if (choice.categoryCount === 0) {
+        correctResponse = moveChoiceToCategory(choice.id, undefined, to, 0, correctResponse);
+      }
+
+      const maxCategoryChoices = getMaxCategoryChoices(model); // when maxChoicesPerCategory is set to 0, there is no limit so it should not be updated
+
+      onModelChanged({
+        correctResponse,
+        maxChoicesPerCategory: maxChoicesPerCategory !== 0 && maxChoicesPerCategory < maxCategoryChoices ? maxChoicesPerCategory + 1 : maxChoicesPerCategory
+      });
+    };
+
+    this.changeRowLabel = (val, index) => {
+      const {
+        model
+      } = this.props;
+      const {
+        rowLabels
+      } = model;
+      const newRowLabels = [...rowLabels];
+
+      if (newRowLabels.length < index) {
+        newRowLabels.push(val);
+      } else {
+        newRowLabels[index] = val;
+      }
+
+      this.props.onModelChanged({
+        rowLabels: newRowLabels
+      });
+    };
+  }
+
+  componentDidMount() {
+    try {
+      // eslint-disable-next-line react/no-find-dom-node
+      const domNode = ReactDOM.findDOMNode(this);
+      renderMath(domNode);
+    } catch (e) {
+      // Added try-catch block to handle "Unable to find node on an unmounted component" error from tests, thrown because of the usage of shallow
+      console.error('DOM not mounted');
+    }
+  }
+
+  componentDidUpdate() {
+    try {
+      // eslint-disable-next-line react/no-find-dom-node
+      const domNode = ReactDOM.findDOMNode(this);
+      renderMath(domNode);
+    } catch (e) {
+      // Added try-catch block to handle "Unable to find node on an unmounted component" error from tests, thrown because of the usage of shallow
+      console.error('DOM not mounted');
+    }
+  }
+
+  render() {
+    const {
+      model,
+      classes,
+      className,
+      categories,
+      imageSupport,
+      uploadSoundSupport,
+      toolbarOpts,
+      spellCheck,
+      configuration,
+      defaultImageMaxHeight,
+      defaultImageMaxWidth,
+      mathMlOptions = {}
+    } = this.props;
+    const {
+      categoriesPerRow,
+      rowLabels,
+      errors
+    } = model;
+    const {
+      associationError,
+      categoriesError,
+      categoriesErrors
+    } = errors || {};
+    const {
+      maxCategories,
+      maxImageWidth = {},
+      maxImageHeight = {}
+    } = configuration || {};
+    const holderStyle = {
+      gridTemplateColumns: `repeat(${categoriesPerRow}, 1fr)`
+    };
+    const validationMessage = generateValidationMessage(configuration);
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames(classes.categories, className)
+    }, /*#__PURE__*/React.createElement(Header$1, {
+      label: "Categories",
+      buttonLabel: "ADD A CATEGORY",
+      onAdd: this.add,
+      info: /*#__PURE__*/React.createElement(Tooltip, {
+        classes: {
+          tooltip: classes.tooltip
+        },
+        disableFocusListener: true,
+        disableTouchListener: true,
+        placement: 'right',
+        title: validationMessage
+      }, /*#__PURE__*/React.createElement(Info, {
+        fontSize: 'small',
+        color: 'primary',
+        style: {
+          marginLeft: '5px'
+        }
+      })),
+      buttonDisabled: maxCategories && categories && maxCategories === categories.length
+    }), /*#__PURE__*/React.createElement("div", {
+      className: classes.categoriesHolder,
+      style: holderStyle
+    }, categories.map((category, index) => {
+      const hasRowLabel = index % categoriesPerRow === 0;
+      const rowIndex = index / categoriesPerRow;
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: index
+      }, hasRowLabel && /*#__PURE__*/React.createElement(RowLabel, {
+        categoriesPerRow: categoriesPerRow,
+        disabled: false,
+        rowIndex: rowIndex,
+        markup: rowLabels[rowIndex] || '',
+        onChange: val => this.changeRowLabel(val, rowIndex),
+        imageSupport: imageSupport,
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheck,
+        maxImageWidth: maxImageWidth && maxImageWidth.rowLabel || defaultImageMaxWidth,
+        maxImageHeight: maxImageHeight && maxImageHeight.rowLabel || defaultImageMaxHeight,
+        uploadSoundSupport: uploadSoundSupport,
+        mathMlOptions: mathMlOptions,
+        configuration: configuration
+      }), /*#__PURE__*/React.createElement(Category$1, {
+        imageSupport: imageSupport,
+        focusedEl: this.state.focusedEl,
+        deleteFocusedEl: this.deleteFocusedEl,
+        index: index,
+        category: category,
+        error: categoriesErrors && categoriesErrors[category.id],
+        onChange: this.change,
+        onDelete: () => this.delete(category),
+        onAddChoice: this.addChoiceToCategory,
+        onMoveChoice: (choiceId, from, to, choiceIndex) => this.moveChoice(choiceId, from, to, choiceIndex),
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheck,
+        onDeleteChoice: (choice, choiceIndex) => this.deleteChoiceFromCategory(category, choice, choiceIndex),
+        maxImageWidth: maxImageWidth && maxImageWidth.categoryLabel || defaultImageMaxWidth,
+        maxImageHeight: maxImageHeight && maxImageHeight.categoryLabel || defaultImageMaxHeight,
+        uploadSoundSupport: uploadSoundSupport,
+        configuration: configuration
+      }));
+    })), associationError && /*#__PURE__*/React.createElement("div", {
+      className: classes.errorText
+    }, associationError), categoriesError && /*#__PURE__*/React.createElement("div", {
+      className: classes.errorText
+    }, categoriesError));
+  }
+
+}
+Categories.propTypes = {
+  defaultImageMaxHeight: PropTypes.number,
+  defaultImageMaxWidth: PropTypes.number,
+  imageSupport: PropTypes.shape({
+    add: PropTypes.func.isRequired,
+    delete: PropTypes.func.isRequired
+  }),
+  uploadSoundSupport: PropTypes.shape({
+    add: PropTypes.func.isRequired,
+    delete: PropTypes.func.isRequired
+  }),
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  categories: PropTypes.array,
+  onModelChanged: PropTypes.func,
+  model: PropTypes.object.isRequired,
+  configuration: PropTypes.object.isRequired,
+  toolbarOpts: PropTypes.object,
+  spellCheck: PropTypes.bool
+};
+var Categories$1 = withStyles(styles$6)(Categories);
+
+const styles$5 = theme => ({
+  categories: {
+    marginBottom: theme.spacing.unit * 2.5
+  },
+  categoriesHolder: {
+    display: 'grid',
+    gridRowGap: `${theme.spacing.unit}px`,
+    gridColumnGap: `${theme.spacing.unit}px`
+  },
+  row: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(2, 1fr)',
+    gridColumnGap: `${theme.spacing.unit}px`,
+    alignItems: 'baseline',
+    width: '100%',
+    marginTop: theme.spacing.unit,
+    marginBottom: 2 * theme.spacing.unit
+  },
+  rowLabel: {
+    gridColumn: '1/3'
+  }
+});
+
+class AlternateResponses extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.addChoiceToCategory = (addedChoice, categoryId) => {
+      const {
+        altIndex,
+        model: {
+          correctResponse,
+          choices,
+          maxChoicesPerCategory = 0
+        },
+        onModelChanged
+      } = this.props;
+      const choice = choices.find(c => c.id === addedChoice.id);
+      correctResponse.forEach(a => {
+        if (a.category === categoryId) {
+          a.alternateResponses = a.alternateResponses || [];
+
+          if (!a.alternateResponses[altIndex]) {
+            a.alternateResponses[altIndex] = [];
+          }
+
+          a.alternateResponses[altIndex].push(addedChoice.id);
+
+          if (choice.categoryCount && choice.categoryCount !== 0) {
+            a.alternateResponses[altIndex] = a.alternateResponses[altIndex].reduce((acc, currentValue) => {
+              if (currentValue === choice.id) {
+                const foundIndex = acc.findIndex(c => c === choice.id);
+
+                if (foundIndex === -1) {
+                  acc.push(currentValue);
+                }
+              } else {
+                acc.push(currentValue);
+              }
+
+              return acc;
+            }, []);
+          }
+
+          return a;
+        } else {
+          if (a.alternateResponses[altIndex] && choice.categoryCount !== 0) {
+            a.alternateResponses[altIndex] = a.alternateResponses[altIndex].filter(c => c !== addedChoice.id);
+            return a;
+          }
+        }
+
+        return a;
+      });
+      const maxCategoryChoices = getMaxCategoryChoices(this.props.model); // when maxChoicesPerCategory is set to 0, there is no limit so it should not be updated
+
+      onModelChanged({
+        correctResponse,
+        maxChoicesPerCategory: maxChoicesPerCategory !== 0 && maxChoicesPerCategory < maxCategoryChoices ? maxChoicesPerCategory + 1 : maxChoicesPerCategory
+      });
+    };
+
+    this.moveChoice = (choiceId, from, to, choiceIndex, alternateIndex) => {
+      const {
+        model,
+        onModelChanged
+      } = this.props;
+      let {
+        choices,
+        correctResponse = [],
+        maxChoicesPerCategory = 0
+      } = model || {};
+      const choice = (choices || []).find(choice => choice.id === choiceId);
+      correctResponse = moveChoiceToAlternate(choiceId, from, to, choiceIndex, correctResponse, alternateIndex, choice == null ? void 0 : choice.categoryCount);
+      const maxCategoryChoices = getMaxCategoryChoices(this.props.model); // when maxChoicesPerCategory is set to 0, there is no limit so it should not be updated
+
+      onModelChanged({
+        correctResponse,
+        maxChoicesPerCategory: maxChoicesPerCategory !== 0 && maxChoicesPerCategory < maxCategoryChoices ? maxChoicesPerCategory + 1 : maxChoicesPerCategory
+      });
+    };
+
+    this.deleteChoiceFromCategory = (category, choice, choiceIndex) => {
+      const {
+        model,
+        altIndex,
+        onModelChanged
+      } = this.props;
+      const correctResponse = removeChoiceFromAlternate(choice.id, category.id, choiceIndex, altIndex, model.correctResponse);
+      onModelChanged({
+        correctResponse
+      });
+    };
+  }
+
+  render() {
+    const {
+      altIndex,
+      model,
+      configuration,
+      classes,
+      className,
+      categories,
+      imageSupport,
+      spellCheck,
+      uploadSoundSupport,
+      mathMlOptions = {}
+    } = this.props;
+    const {
+      categoriesPerRow,
+      errors,
+      rowLabels
+    } = model;
+    const {
+      duplicateAlternate
+    } = errors || {};
+    const holderStyle = {
+      gridTemplateColumns: `repeat(${categoriesPerRow}, 1fr)`
+    };
+    const isDuplicated = duplicateAlternate ? duplicateAlternate.index === altIndex : false;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames(classes.categories, className)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.categoriesHolder,
+      style: holderStyle
+    }, categories.map((category, index) => {
+      const hasRowLabel = index % categoriesPerRow === 0;
+      const rowIndex = index / categoriesPerRow;
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: index
+      }, hasRowLabel && /*#__PURE__*/React.createElement("div", {
+        style: {
+          gridColumn: `1/${categoriesPerRow + 1}`,
+          width: '100%'
+        },
+        className: classes.rowLabel,
+        dangerouslySetInnerHTML: {
+          __html: rowLabels[rowIndex] || ''
+        }
+      }), /*#__PURE__*/React.createElement(Category$1, {
+        key: index,
+        alternateResponseIndex: altIndex,
+        imageSupport: imageSupport,
+        isDuplicated: isDuplicated && duplicateAlternate.category === category.id,
+        category: category,
+        spellCheck: spellCheck,
+        onAddChoice: this.addChoiceToCategory,
+        onDeleteChoice: (choice, choiceIndex) => this.deleteChoiceFromCategory(category, choice, choiceIndex),
+        onMoveChoice: (choiceId, from, to, choiceIndex, alternateIndex) => this.moveChoice(choiceId, from, to, choiceIndex, alternateIndex),
+        uploadSoundSupport: uploadSoundSupport,
+        mathMlOptions: mathMlOptions,
+        configuration: configuration
+      }));
+    })));
+  }
+
+}
+AlternateResponses.propTypes = {
+  altIndex: PropTypes.number.isRequired,
+  configuration: PropTypes.object,
+  imageSupport: PropTypes.shape({
+    add: PropTypes.func.isRequired,
+    delete: PropTypes.func.isRequired
+  }),
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  categories: PropTypes.array,
+  onModelChanged: PropTypes.func,
+  model: PropTypes.object.isRequired,
+  uploadSoundSupport: PropTypes.shape({
+    add: PropTypes.func.isRequired,
+    delete: PropTypes.func.isRequired
+  }),
+  spellCheck: PropTypes.bool
+};
+var AlternateResponses$1 = withStyles(styles$5)(AlternateResponses);
+
+const log = debug('@pie-element:categorize:configure:choice');
+
+const canDrag = props => {
+  if (props.lockChoiceOrder) {
+    return true;
+  }
+
+  const count = props.choice.categoryCount || 0;
+
+  if (count === 0) {
+    return true;
+  } else {
+    return props.correctResponseCount < count;
+  }
+};
+
+class Choice extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.changeContent = content => {
+      const {
+        onChange,
+        choice
+      } = this.props;
+      choice.content = content;
+      onChange(choice);
+    };
+
+    this.changeCategoryCount = () => {
+      const {
+        onChange,
+        choice
+      } = this.props;
+
+      if (choice.categoryCount === 1) {
+        choice.categoryCount = 0;
+      } else {
+        choice.categoryCount = 1;
+      }
+
+      onChange(choice);
+    };
+
+    this.isCheckboxShown = allowMultiplePlacements => allowMultiplePlacements === multiplePlacements.perChoice;
+  }
+
+  render() {
+    const {
+      allowMultiplePlacements,
+      classes,
+      className,
+      configuration,
+      choice,
+      deleteFocusedEl,
+      focusedEl,
+      index,
+      onDelete,
+      connectDropTarget,
+      connectDragSource,
+      connectDragPreview,
+      imageSupport,
+      spellCheck,
+      toolbarOpts,
+      error,
+      maxImageWidth,
+      maxImageHeight,
+      uploadSoundSupport
+    } = this.props;
+    const showRemoveAfterPlacing = this.isCheckboxShown(allowMultiplePlacements);
+    const draggable = canDrag(this.props);
+    return /*#__PURE__*/React.createElement(Card, {
+      className: classNames(classes.choice, className)
+    }, /*#__PURE__*/React.createElement(CardActions, {
+      className: classes.actions
+    }, connectDragSource(connectDropTarget( /*#__PURE__*/React.createElement("span", {
+      className: classNames(classes.dragHandle, draggable === false && classes.dragDisabled)
+    }, /*#__PURE__*/React.createElement(DragHandle, {
+      color: draggable ? 'primary' : 'disabled'
+    }))))), connectDragPreview( /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InputHeader$1, {
+      imageSupport: imageSupport,
+      focusedEl: focusedEl,
+      deleteFocusedEl: deleteFocusedEl,
+      index: index,
+      label: choice.content,
+      onChange: this.changeContent,
+      onDelete: onDelete,
+      toolbarOpts: toolbarOpts,
+      spellCheck: spellCheck,
+      error: error,
+      maxImageWidth: maxImageWidth,
+      maxImageHeight: maxImageHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      configuration: configuration
+    }), error && /*#__PURE__*/React.createElement("div", {
+      className: classes.errorText
+    }, error))), /*#__PURE__*/React.createElement(CardActions, {
+      className: classes.actions
+    }, /*#__PURE__*/React.createElement(DeleteButton, {
+      label: 'delete',
+      onClick: onDelete
+    }), showRemoveAfterPlacing && /*#__PURE__*/React.createElement(Checkbox, {
+      mini: true,
+      label: 'Remove after placing',
+      checked: choice.categoryCount === 1,
+      onChange: this.changeCategoryCount
+    })));
+  }
+
+}
+Choice.propTypes = {
+  allowMultiplePlacements: PropTypes.string,
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  configuration: PropTypes.object.isRequired,
+  choice: PropTypes.object.isRequired,
+  connectDropTarget: PropTypes.func,
+  deleteFocusedEl: PropTypes.func,
+  focusedEl: PropTypes.number,
+  index: PropTypes.number,
+  lockChoiceOrder: PropTypes.bool,
+  maxImageHeight: PropTypes.object,
+  maxImageWidth: PropTypes.object,
+  onChange: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  connectDragSource: PropTypes.func.isRequired,
+  connectDragPreview: PropTypes.func.isRequired,
+  correctResponseCount: PropTypes.number.isRequired,
+  imageSupport: PropTypes.shape({
+    add: PropTypes.func.isRequired,
+    delete: PropTypes.func.isRequired
+  }),
+  toolbarOpts: PropTypes.object,
+  error: PropTypes.string,
+  uploadSoundSupport: PropTypes.shape({
+    add: PropTypes.func.isRequired,
+    delete: PropTypes.func.isRequired
+  }),
+  spellCheck: PropTypes.bool
+};
+Choice.defaultProps = {};
+
+const styles$4 = theme => ({
+  actions: {
+    padding: 0,
+    justifyContent: 'space-between'
+  },
+  choice: {
+    minWidth: '196px',
+    padding: theme.spacing.unit,
+    overflow: 'visible'
+  },
+  dragHandle: {
+    cursor: 'move'
+  },
+  dragDisabled: {
+    cursor: 'inherit'
+  },
+  errorText: {
+    fontSize: theme.typography.fontSize - 2,
+    color: theme.palette.error.main,
+    paddingBottom: theme.spacing.unit
+  }
+});
+
+const StyledChoice = withStyles(styles$4)(Choice);
+const spec = {
+  canDrag,
+  beginDrag: props => {
+    const out = {
+      id: props.choice.id,
+      index: props.index
+    };
+    log('[beginDrag] out:', out);
+    return out;
+  },
+  endDrag: (props, monitor) => {
+    if (!monitor.didDrop()) {
+      const item = monitor.getItem();
+
+      if (item.categoryId) {
+        log('wasnt droppped - what to do?');
+        props.onRemoveChoice(item);
+      }
+    }
+  }
+};
+const specTarget = {
+  drop: (props, monitor) => {
+    log('[drop] props: ', props);
+    const item = monitor.getItem();
+    props.rearrangeChoices(item.index, props.index);
+  },
+  canDrop: (props, monitor) => {
+    const item = monitor.getItem();
+    return props.choice.id !== item.id;
+  }
+};
+var Choice$1 = uid.withUid(flow(DragSource(({
+  uid
+}) => uid, spec, (connect, monitor) => ({
+  connectDragSource: connect.dragSource(),
+  connectDragPreview: connect.dragPreview(),
+  isDragging: monitor.isDragging()
+})), DropTarget(({
+  uid
+}) => uid, specTarget, (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver()
+})))(StyledChoice));
+
+class Config extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.changeLabel = ({
+      target
+    }) => {
+      this.props.onModelChanged({
+        choicesLabel: target.value
+      });
+    };
+  }
+
+  render() {
+    const {
+      classes,
+      className,
+      config,
+      spellCheck
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames(classes.config, className)
+    }, /*#__PURE__*/React.createElement(TextField, {
+      className: classes.label,
+      InputLabelProps: {
+        shrink: true
+      },
+      variant: "outlined",
+      label: "Label",
+      value: config.choicesLabel,
+      onChange: this.changeLabel,
+      spellCheck: spellCheck
+    }));
+  }
+
+}
+Config.propTypes = {
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  config: PropTypes.object,
+  onModelChanged: PropTypes.func,
+  spellCheck: PropTypes.bool
+};
+Config.defaultProps = {};
+
+const styles$3 = theme => ({
+  config: {
+    paddingTop: theme.spacing.unit,
+    marginBottom: theme.spacing.unit
+  },
+  label: {
+    width: '100%'
+  }
+});
+
+var Config$1 = withStyles(styles$3)(Config);
+
+class Choices extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      focusedEl: null
+    };
+
+    this.changeChoice = choice => {
+      const {
+        choices,
+        onModelChanged
+      } = this.props;
+      const index = choices.findIndex(h => h.id === choice.id);
+
+      if (index !== -1) {
+        choices.splice(index, 1, choice);
+        onModelChanged({
+          choices
+        });
+      }
+    };
+
+    this.allChoicesHaveCount = count => {
+      const {
+        choices
+      } = this.props;
+      return Array.isArray(choices) && choices.every(c => c.categoryCount === count);
+    };
+
+    this.addChoice = () => {
+      var _model$choices;
+
+      const {
+        onModelChanged,
+        model,
+        choices: oldChoices
+      } = this.props;
+      let {
+        maxAnswerChoices
+      } = model || {};
+
+      if (maxAnswerChoices && ((_model$choices = model.choices) == null ? void 0 : _model$choices.length) >= maxAnswerChoices) {
+        return;
+      }
+
+      const id = choiceUtils.firstAvailableIndex(model.choices.map(a => a.id), 1);
+      const data = {
+        id,
+        content: 'Choice ' + id
+      };
+      this.setState({
+        focusedEl: oldChoices.length
+      }, () => {
+        onModelChanged({
+          choices: model.choices.concat([data])
+        });
+      });
+    };
+
+    this.deleteFocusedEl = () => {
+      this.setState({
+        focusedEl: null
+      });
+    };
+
+    this.deleteChoice = choice => {
+      const {
+        model,
+        onModelChanged
+      } = this.props;
+      const index = model.choices.findIndex(a => a.id === choice.id);
+
+      if (index !== -1) {
+        model.choices.splice(index, 1);
+        model.correctResponse = removeAllChoices(choice.id, model.correctResponse);
+        onModelChanged(model);
+      }
+    };
+
+    this.rearrangeChoices = (indexFrom, indexTo) => {
+      const {
+        model,
+        onModelChanged
+      } = this.props || {};
+      let {
+        choices
+      } = model || [];
+      choices = rearrangeChoices(choices, indexFrom, indexTo);
+      onModelChanged({
+        choices
+      });
+    };
+  }
+
+  render() {
+    const {
+      focusedEl
+    } = this.state;
+    const {
+      classes,
+      className,
+      choices,
+      model,
+      imageSupport,
+      uploadSoundSupport,
+      onModelChanged,
+      spellCheck,
+      toolbarOpts,
+      configuration,
+      defaultImageMaxWidth,
+      defaultImageMaxHeight
+    } = this.props;
+    const {
+      errors,
+      allowMultiplePlacementsEnabled,
+      lockChoiceOrder,
+      maxAnswerChoices
+    } = model;
+    const {
+      choicesError,
+      choicesErrors
+    } = errors || {};
+    const {
+      maxImageWidth = {},
+      maxImageHeight = {}
+    } = configuration || {};
+    const choiceHolderStyle = {
+      gridTemplateColumns: `repeat(${model.categoriesPerRow}, 1fr)`
+    };
+    const addChoiceButtonTooltip = maxAnswerChoices && (choices == null ? void 0 : choices.length) >= maxAnswerChoices ? `Only ${maxAnswerChoices} allowed maximum` : '';
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames(classes.choices, className)
+    }, /*#__PURE__*/React.createElement(Header$1, {
+      label: "Choices",
+      buttonLabel: "ADD A CHOICE",
+      onAdd: this.addChoice,
+      buttonDisabled: maxAnswerChoices && choices && (choices == null ? void 0 : choices.length) >= maxAnswerChoices,
+      tooltip: addChoiceButtonTooltip
+    }), /*#__PURE__*/React.createElement(Config$1, {
+      config: model,
+      onModelChanged: onModelChanged,
+      spellCheck: spellCheck
+    }), /*#__PURE__*/React.createElement("div", {
+      className: classes.choiceHolder,
+      style: choiceHolderStyle
+    }, choices.map((h, index) => {
+      return /*#__PURE__*/React.createElement(Choice$1, {
+        choice: h,
+        focusedEl: focusedEl,
+        deleteFocusedEl: this.deleteFocusedEl,
+        correctResponseCount: h.correctResponseCount,
+        allowMultiplePlacements: allowMultiplePlacementsEnabled,
+        lockChoiceOrder: lockChoiceOrder,
+        index: index,
+        key: index,
+        imageSupport: imageSupport,
+        onChange: this.changeChoice,
+        onDelete: () => this.deleteChoice(h),
+        rearrangeChoices: (indexFrom, indexTo) => this.rearrangeChoices(indexFrom, indexTo),
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheck,
+        error: choicesErrors && choicesErrors[h.id],
+        maxImageWidth: maxImageWidth && maxImageWidth.choice || defaultImageMaxWidth,
+        maxImageHeight: maxImageHeight && maxImageHeight.choice || defaultImageMaxHeight,
+        uploadSoundSupport: uploadSoundSupport,
+        configuration: configuration
+      });
+    })), choicesError && /*#__PURE__*/React.createElement("div", {
+      className: classes.errorText
+    }, choicesError));
+  }
+
+}
+Choices.propTypes = {
+  model: PropTypes.object.isRequired,
+  configuration: PropTypes.object.isRequired,
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  choices: PropTypes.array.isRequired,
+  defaultImageMaxWidth: PropTypes.number,
+  defaultImageMaxHeight: PropTypes.number,
+  onModelChanged: PropTypes.func.isRequired,
+  imageSupport: PropTypes.shape({
+    add: PropTypes.func.isRequired,
+    delete: PropTypes.func.isRequired
+  }),
+  uploadSoundSupport: PropTypes.shape({
+    add: PropTypes.func.isRequired,
+    delete: PropTypes.func.isRequired
+  }),
+  toolbarOpts: PropTypes.object,
+  spellCheck: PropTypes.bool
+};
+Choices.defaultProps = {};
+
+const styles$2 = theme => ({
+  choiceHolder: {
+    paddingTop: theme.spacing.unit,
+    paddingBottom: theme.spacing.unit,
+    display: 'grid',
+    gridRowGap: `${theme.spacing.unit}px`,
+    gridColumnGap: `${theme.spacing.unit}px`
+  },
+  choices: {
+    marginBottom: theme.spacing.unit * 2.5
+  },
+  errorText: {
+    fontSize: theme.typography.fontSize - 2,
+    color: theme.palette.error.main,
+    paddingTop: theme.spacing.unit / 2
+  }
+});
+
+var Choices$1 = withStyles(styles$2)(Choices);
+
+const buildCategories = (categories, choices, correctResponse) => {
+  const clonedCategories = cloneDeep(categories);
+  return clonedCategories.map(category => {
+    const cr = correctResponse.find(cr => cr.category === category.id);
+
+    if (cr) {
+      category.choices = (cr.choices || []).map(choiceId => {
+        const choice = choices.find(h => h.id === choiceId);
+
+        if (choice) {
+          return Object.assign({}, {
+            id: choice.id,
+            content: choice.content
+          });
+        }
+      });
+    }
+
+    return category;
+  });
+};
+
+const getChoices = (cat, choices, index) => {
+  if (!cat.alternateResponses || cat.alternateResponses.length === 0) {
+    return [];
+  }
+
+  return (cat.alternateResponses[index] || []).map(alt => {
+    return choices.find(ch => ch.id === alt);
+  });
+};
+
+const buildAlternateResponses = (categories, choices, correctResponse) => {
+  const mostAlternates = correctResponse.reduce((mostAlt, cat) => {
+    if (cat.alternateResponses && cat.alternateResponses.length >= mostAlt) {
+      return cat.alternateResponses.length;
+    }
+
+    return mostAlt;
+  }, 0);
+  const alternatesArray = new Array(mostAlternates).fill(0);
+  return alternatesArray.map((val, index) => {
+    return correctResponse.map((cat, catIndex) => {
+      const currentCategory = categories[catIndex];
+      return {
+        id: currentCategory.id,
+        label: currentCategory.label,
+        choices: getChoices(cat, choices, index)
+      };
+    });
+  });
+};
+
+const {
+  translator
+} = Translator;
+const {
+  dropdown,
+  Panel,
+  toggle,
+  radio,
+  numberField
+} = settings;
+const {
+  Provider: IdProvider
+} = uid;
+class Design extends React.Component {
+  constructor(_props) {
+    super(_props);
+
+    this.updateModel = props => {
+      const {
+        model,
+        onChange
+      } = this.props;
+
+      const updatedModel = _extends({}, model, props);
+
+      updatedModel.choices = updatedModel.choices.map(c => _extends({}, c, {
+        categoryCount: this.checkAllowMultiplePlacements(updatedModel.allowMultiplePlacementsEnabled, c)
+      })); //Ensure that there are no extra choices in correctResponse, if the user has decided that only one choice may be used.
+
+      updatedModel.correctResponse = ensureNoExtraChoicesInAnswer(updatedModel.correctResponse || [], updatedModel.choices); //Ensure that there are no extra choices in alternate responses, if the user has decided that only one choice may be used.
+
+      updatedModel.correctResponse = ensureNoExtraChoicesInAlternate(updatedModel.correctResponse || [], updatedModel.choices); //clean categories
+
+      updatedModel.categories = updatedModel.categories.map(c => ({
+        id: c.id,
+        label: c.label
+      }));
+      updatedModel.choices = updatedModel.choices.map(h => ({
+        id: h.id,
+        content: h.content,
+        categoryCount: h.categoryCount
+      })); // ensure that maxChoicesPerCategory is reset if author switch back the corresponding switch (allowMaxChoicesPerCategory)
+
+      updatedModel.maxChoicesPerCategory = updatedModel.allowMaxChoicesPerCategory ? updatedModel.maxChoicesPerCategory : 0;
+      onChange(updatedModel);
+    };
+
+    this.changeRationale = rationale => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      onChange(_extends({}, model, {
+        rationale
+      }));
+    };
+
+    this.changeTeacherInstructions = teacherInstructions => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      onChange(_extends({}, model, {
+        teacherInstructions
+      }));
+    };
+
+    this.changeFeedback = feedback => {
+      this.updateModel({
+        feedback
+      });
+    };
+
+    this.onAddAlternateResponse = () => {
+      const {
+        model: {
+          correctResponse
+        }
+      } = this.props;
+      this.updateModel({
+        correctResponse: (correctResponse || []).map(cr => _extends({}, cr, {
+          alternateResponses: [...(cr.alternateResponses || []), []]
+        }))
+      });
+    };
+
+    this.onPromptChanged = prompt => this.updateModel({
+      prompt
+    });
+
+    this.onRemoveAlternateResponse = index => {
+      const {
+        model: {
+          correctResponse
+        }
+      } = this.props;
+      this.updateModel({
+        correctResponse: (correctResponse || []).map(cr => _extends({}, cr, {
+          alternateResponses: (cr.alternateResponses || []).filter((alt, altIndex) => altIndex !== index)
+        }))
+      });
+    };
+
+    this.countChoiceInCorrectResponse = choice => {
+      const {
+        model
+      } = this.props;
+      return countInAnswer(choice.id, model.correctResponse);
+    };
+
+    this.checkAllowMultiplePlacements = (allowMultiplePlacements, c) => {
+      if (allowMultiplePlacements === multiplePlacements.enabled) {
+        return 0;
+      }
+
+      if (allowMultiplePlacements === multiplePlacements.disabled) {
+        return 1;
+      }
+
+      return c.categoryCount || 0;
+    };
+
+    this.isAlertModalOpened = () => {
+      const {
+        model
+      } = this.props;
+      const {
+        maxChoicesPerCategory = 0
+      } = model || {};
+      const maxChoices = getMaxCategoryChoices(model); // when maxChoicesPerCategory is set to 0, there is no limit so modal should not be opened
+
+      return maxChoicesPerCategory !== 0 ? maxChoices > maxChoicesPerCategory : false;
+    };
+
+    this.onAlertModalCancel = () => {
+      const {
+        model
+      } = this.props;
+      const maxChoices = getMaxCategoryChoices(model);
+      this.updateModel({
+        maxChoicesPerCategory: maxChoices
+      });
+    };
+
+    this.uid = _props.uid || uid.generateId();
+  }
+
+  render() {
+    const {
+      classes,
+      configuration,
+      imageSupport,
+      model,
+      uploadSoundSupport,
+      onConfigurationChanged
+    } = this.props;
+    const {
+      allowAlternate = {},
+      allowMultiplePlacements = {},
+      baseInputConfiguration = {},
+      categoriesPerRow = {},
+      choicesPosition = {},
+      contentDimensions = {},
+      feedback = {},
+      lockChoiceOrder = {},
+      maxImageHeight = {},
+      maxImageWidth = {},
+      maxPlacements = {},
+      minCategoriesPerRow = 1,
+      partialScoring = {},
+      prompt = {},
+      rationale = {},
+      scoringType = {},
+      settingsPanelDisabled,
+      spellCheck = {},
+      studentInstructions = {},
+      teacherInstructions = {},
+      withRubric = {},
+      mathMlOptions = {},
+      language = {},
+      languageChoices = {},
+      allowMaxAnswerChoices = {}
+    } = configuration || {};
+    const {
+      allowAlternateEnabled,
+      allowMaxChoicesPerCategory,
+      errors,
+      feedbackEnabled,
+      maxChoicesPerCategory,
+      promptEnabled,
+      rationaleEnabled,
+      spellCheckEnabled,
+      teacherInstructionsEnabled,
+      toolbarEditorPosition,
+      extraCSSRules
+    } = model || {};
+    const {
+      prompt: promptError,
+      rationale: rationaleError,
+      teacherInstructions: teacherInstructionsError
+    } = errors || {};
+    const toolbarOpts = {
+      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
+    };
+    const config = model.config || {};
+    config.choices = config.choices || {
+      label: '',
+      columns: 2
+    };
+    const categories = buildCategories(model.categories || [], model.choices || [], model.correctResponse || []);
+    const alternateResponses = buildAlternateResponses(model.categories || [], model.choices || [], model.correctResponse || []);
+    const choices = model.choices.map(c => {
+      c.correctResponseCount = this.countChoiceInCorrectResponse(c); // ensure categoryCount is set even though updatedModel hasn't been called
+
+      c.categoryCount = this.checkAllowMultiplePlacements(model.allowMultiplePlacementsEnabled, c);
+      return c;
+    });
+    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+    const panelSettings = {
+      partialScoring: partialScoring.settings && toggle(partialScoring.label),
+      lockChoiceOrder: lockChoiceOrder.settings && toggle(lockChoiceOrder.label),
+      categoriesPerRow: categoriesPerRow.settings && numberField(categoriesPerRow.label, {
+        label: categoriesPerRow.label,
+        min: minCategoriesPerRow,
+        max: 6
+      }),
+      choicesPosition: choicesPosition.settings && radio(choicesPosition.label, ['below', 'above', 'left', 'right']),
+      allowMultiplePlacementsEnabled: allowMultiplePlacements.settings && dropdown(allowMultiplePlacements.label, [multiplePlacements.enabled, multiplePlacements.disabled, multiplePlacements.perChoice]),
+      maxAnswerChoices: allowMaxAnswerChoices.settings && numberField(allowMaxAnswerChoices.label, {
+        label: '',
+        min: (choices == null ? void 0 : choices.length) || 0,
+        max: 30
+      }),
+      allowMaxChoicesPerCategory: maxPlacements.settings && toggle(maxPlacements.label),
+      maxChoicesPerCategory: allowMaxChoicesPerCategory === true && numberField(maxPlacements.label, {
+        label: '',
+        min: 0,
+        max: 30
+      }),
+      promptEnabled: prompt.settings && toggle(prompt.label),
+      feedbackEnabled: feedback.settings && toggle(feedback.label),
+      allowAlternateEnabled: allowAlternate.settings && toggle(allowAlternate.label),
+      'language.enabled': language.settings && toggle(language.label, true),
+      language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options)
+    };
+    const panelProperties = {
+      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+      studentInstructionsEnabled: studentInstructions.settings && toggle(studentInstructions.label),
+      rationaleEnabled: rationale.settings && toggle(rationale.label),
+      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+      scoringType: scoringType.settings && radio(scoringType.label, ['auto', 'rubric']),
+      rubricEnabled: (withRubric == null ? void 0 : withRubric.settings) && toggle(withRubric == null ? void 0 : withRubric.label)
+    };
+    const isOpened = this.isAlertModalOpened();
+    const alertMaxChoicesMsg = translator.t('translation:categorize:maxChoicesPerCategoryRestriction', {
+      lng: model.language,
+      maxChoicesPerCategory
+    });
+    return /*#__PURE__*/React.createElement(IdProvider, {
+      value: this.uid
+    }, /*#__PURE__*/React.createElement(layout.ConfigLayout, {
+      extraCSSRules: extraCSSRules,
+      dimensions: contentDimensions,
+      hideSettings: settingsPanelDisabled,
+      settings: /*#__PURE__*/React.createElement(Panel, {
+        model: model,
+        onChangeModel: this.updateModel,
+        configuration: configuration,
+        onChangeConfiguration: onConfigurationChanged,
+        groups: {
+          Settings: panelSettings,
+          Properties: panelProperties
+        },
+        modal: /*#__PURE__*/React.createElement(AlertDialog, {
+          title: 'Warning',
+          text: alertMaxChoicesMsg,
+          open: isOpened,
+          onClose: this.onAlertModalCancel
+        })
+      })
+    }, teacherInstructionsEnabled && /*#__PURE__*/React.createElement(InputContainer$1, {
+      label: teacherInstructions.label,
+      className: classes.inputContainer
+    }, /*#__PURE__*/React.createElement(EditableHtml, {
+      className: classes.input,
+      markup: model.teacherInstructions || '',
+      onChange: this.changeTeacherInstructions,
+      imageSupport: imageSupport,
+      error: teacherInstructionsError,
+      nonEmpty: false,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(teacherInstructions == null ? void 0 : teacherInstructions.inputConfiguration, baseInputConfiguration),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), teacherInstructionsError && /*#__PURE__*/React.createElement("div", {
+      className: classes.errorText
+    }, teacherInstructionsError)), promptEnabled && /*#__PURE__*/React.createElement(InputContainer$1, {
+      label: prompt.label,
+      className: classes.inputContainer
+    }, /*#__PURE__*/React.createElement(EditableHtml, {
+      className: classes.input,
+      markup: model.prompt || '',
+      onChange: this.onPromptChanged,
+      imageSupport: imageSupport,
+      error: promptError,
+      nonEmpty: false,
+      disableUnderline: true,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(prompt == null ? void 0 : prompt.inputConfiguration, baseInputConfiguration),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxImageWidth && maxImageWidth.prompt,
+      maxImageHeight: maxImageHeight && maxImageHeight.prompt,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), promptError && /*#__PURE__*/React.createElement("div", {
+      className: classes.errorText
+    }, promptError)), /*#__PURE__*/React.createElement(Categories$1, {
+      imageSupport: imageSupport,
+      uploadSoundSupport: uploadSoundSupport,
+      model: model,
+      categories: categories || [],
+      onModelChanged: this.updateModel,
+      toolbarOpts: toolbarOpts,
+      spellCheck: spellCheckEnabled,
+      configuration: configuration,
+      defaultImageMaxWidth: defaultImageMaxWidth,
+      defaultImageMaxHeight: defaultImageMaxHeight,
+      mathMlOptions: mathMlOptions
+    }), /*#__PURE__*/React.createElement(Choices$1, {
+      imageSupport: imageSupport,
+      uploadSoundSupport: uploadSoundSupport,
+      choices: choices,
+      model: model,
+      onModelChanged: this.updateModel,
+      toolbarOpts: toolbarOpts,
+      spellCheck: spellCheckEnabled,
+      configuration: configuration,
+      defaultImageMaxWidth: defaultImageMaxWidth,
+      defaultImageMaxHeight: defaultImageMaxHeight
+    }), allowAlternateEnabled && /*#__PURE__*/React.createElement(Header$1, {
+      className: classes.alternatesHeader,
+      label: "Alternate Responses",
+      buttonLabel: "ADD AN ALTERNATE RESPONSE",
+      onAdd: this.onAddAlternateResponse
+    }), allowAlternateEnabled && alternateResponses.map((categoriesList, index) => {
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: index
+      }, /*#__PURE__*/React.createElement(Header$1, {
+        className: classes.alternatesHeader,
+        variant: 'subtitle1',
+        label: "Alternate Response",
+        buttonLabel: "REMOVE ALTERNATE RESPONSE",
+        onAdd: () => this.onRemoveAlternateResponse(index)
+      }), /*#__PURE__*/React.createElement(AlternateResponses$1, {
+        altIndex: index,
+        imageSupport: imageSupport,
+        model: model,
+        configuration: configuration,
+        categories: categoriesList,
+        onModelChanged: this.updateModel,
+        uploadSoundSupport: uploadSoundSupport,
+        mathMlOptions: mathMlOptions
+      }));
+    }), rationaleEnabled && /*#__PURE__*/React.createElement(InputContainer$1, {
+      label: rationale.label,
+      className: classes.inputContainer
+    }, /*#__PURE__*/React.createElement(EditableHtml, {
+      className: classes.input,
+      markup: model.rationale || '',
+      onChange: this.changeRationale,
+      imageSupport: imageSupport,
+      error: rationaleError,
+      nonEmpty: false,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(prompt == null ? void 0 : prompt.inputConfiguration, baseInputConfiguration),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), rationaleError && /*#__PURE__*/React.createElement("div", {
+      className: classes.errorText
+    }, rationaleError)), feedbackEnabled && /*#__PURE__*/React.createElement(FeedbackConfig, {
+      feedback: model.feedback,
+      onChange: this.changeFeedback,
+      toolbarOpts: toolbarOpts
+    })));
+  }
+
+}
+Design.propTypes = {
+  classes: PropTypes.object.isRequired,
+  configuration: PropTypes.object,
+  className: PropTypes.string,
+  onConfigurationChanged: PropTypes.func,
+  model: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+  uid: PropTypes.string,
+  imageSupport: PropTypes.shape({
+    add: PropTypes.func.isRequired,
+    delete: PropTypes.func.isRequired
+  }),
+  uploadSoundSupport: PropTypes.shape({
+    add: PropTypes.func.isRequired,
+    delete: PropTypes.func.isRequired
+  })
+};
+
+const styles$1 = theme => ({
+  alternatesHeader: {
+    marginBottom: theme.spacing.unit * 2
+  },
+  text: {
+    paddingTop: theme.spacing.unit * 2,
+    paddingBottom: theme.spacing.unit * 2
+  },
+  inputContainer: {
+    width: '100%',
+    paddingTop: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit * 2
+  },
+  title: {
+    marginBottom: theme.spacing.unit * 4
+  },
+  errorText: {
+    fontSize: theme.typography.fontSize - 2,
+    color: theme.palette.error.main,
+    paddingTop: theme.spacing.unit
+  }
+});
+
+var Design$1 = withDragContext(withStyles(styles$1)(Design));
+
+class Main extends React.Component {
+  render() {
+    const {
+      model,
+      onModelChanged,
+      configuration,
+      onConfigurationChanged,
+      imageSupport,
+      uploadSoundSupport
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Design$1, {
+      imageSupport: imageSupport,
+      uploadSoundSupport: uploadSoundSupport,
+      title: "Design",
+      model: model,
+      configuration: configuration,
+      onChange: onModelChanged,
+      onConfigurationChanged: onConfigurationChanged
+    });
+  }
+
+}
+Main.propTypes = {
+  classes: PropTypes.object.isRequired,
+  configuration: PropTypes.object,
+  className: PropTypes.string,
+  onConfigurationChanged: PropTypes.func,
+  model: PropTypes.object.isRequired,
+  onModelChanged: PropTypes.func.isRequired,
+  imageSupport: PropTypes.object,
+  uploadSoundSupport: PropTypes.object
+};
+Main.defaultProps = {};
+
+const styles = () => ({});
+
+var Main$1 = withStyles(styles)(Main);
+
+var defaults = {
+  model: {
+    allowAlternateEnabled: true,
+    allowMaxChoicesPerCategory: false,
+    allowMultiplePlacementsEnabled: multiplePlacements.enabled,
+    alternates: [],
+    categories: [],
+    categoriesPerRow: 2,
+    choices: [],
+    choicesLabel: '',
+    choicesPosition: 'below',
+    correctResponse: [],
+    feedbackEnabled: false,
+    lockChoiceOrder: true,
+    maxAnswerChoices: 6,
+    maxChoicesPerCategory: 0,
+    partialScoring: true,
+    promptEnabled: true,
+    rationaleEnabled: true,
+    rowLabels: [''],
+    studentInstructionsEnabled: true,
+    teacherInstructionsEnabled: true,
+    toolbarEditorPosition: 'bottom',
+    minRowHeight: '80px'
+  },
+  configuration: {
+    baseInputConfiguration: {
+      audio: {
+        disabled: false
+      },
+      video: {
+        disabled: false
+      },
+      image: {
+        disabled: false
+      },
+      textAlign: {
+        disabled: true
+      },
+      showParagraphs: {
+        disabled: false
+      },
+      separateParagraphs: {
+        disabled: true
+      }
+    },
+    spellCheck: {
+      label: 'Spellcheck',
+      settings: false,
+      enabled: true
+    },
+    feedback: {
+      settings: true,
+      label: 'Feedback',
+      enabled: true
+    },
+    lockChoiceOrder: {
+      settings: true,
+      label: 'Lock Choice Order'
+    },
+    choicesPosition: {
+      settings: true,
+      label: 'Choices Position'
+    },
+    allowMultiplePlacements: {
+      settings: true,
+      label: 'Allow Multiple Placements'
+    },
+    maxPlacements: {
+      settings: true,
+      label: 'Max choices per category'
+    },
+    allowAlternate: {
+      settings: true,
+      label: 'Allow Alternate Correct Answers'
+    },
+    categoriesPerRow: {
+      settings: true,
+      label: 'Categories per row'
+    },
+    partialScoring: {
+      settings: false,
+      label: 'Allow Partial Scoring'
+    },
+    prompt: {
+      settings: true,
+      label: 'Prompt',
+      required: false,
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        }
+      }
+    },
+    rationale: {
+      settings: true,
+      label: 'Rationale',
+      required: false,
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        }
+      }
+    },
+    scoringType: {
+      settings: false,
+      label: 'Scoring Type'
+    },
+    settingsPanelDisabled: false,
+    studentInstructions: {
+      settings: false,
+      label: 'Student Instructions'
+    },
+    teacherInstructions: {
+      settings: true,
+      label: 'Teacher Instructions',
+      required: false,
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        }
+      }
+    },
+    headers: {
+      inputConfiguration: {
+        audio: {
+          disabled: true
+        },
+        video: {
+          disabled: true
+        },
+        image: {
+          disabled: false
+        }
+      }
+    },
+    rowLabels: {
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        }
+      }
+    },
+    toolbarEditorPosition: {
+      settings: false,
+      label: 'Toolbar Editor Position'
+    },
+    maxImageWidth: {
+      teacherInstructions: 300,
+      prompt: 300,
+      rationale: 300,
+      rowLabel: 200,
+      categoryLabel: 260,
+      choices: 240
+    },
+    maxImageHeight: {
+      teacherInstructions: 300,
+      prompt: 300,
+      rationale: 300,
+      rowLabel: 100,
+      categoryLabel: 100,
+      choices: 150
+    },
+    withRubric: {
+      settings: false,
+      label: 'Add Rubric'
+    },
+    minCategoriesPerRow: 1,
+    allowMaxAnswerChoices: {
+      settings: true,
+      label: 'Max answer choices'
+    },
+    mathMlOptions: {
+      mmlOutput: false,
+      mmlEditing: false
+    },
+    language: {
+      settings: false,
+      label: 'Specify Language',
+      enabled: false
+    },
+    languageChoices: {
+      label: 'Language Choices',
+      options: []
+    }
+  }
+};
+
+const _excluded = ["alternateResponses"];
+class CategorizeConfigure extends HTMLElement {
+  // PD-2960: make sure we don't have alternates in model or possibility to add them (temporary solution)
+  // this function is used in controller, too
+  constructor() {
+    super();
+    this._model = CategorizeConfigure.createDefaultModel();
+    this._configuration = defaults.configuration;
+  }
+
+  set model(m) {
+    this._model = CategorizeConfigure.createDefaultModel(m);
+
+    if (m.choices && m.choices.length >= m.maxAnswerChoices) {
+      this._model.maxAnswerChoices = m.choices.length;
+      console.warn("Max Answer Choices can't be less than choices length!");
+    }
+
+    this.render();
+  }
+
+  set configuration(c) {
+    var _newConfiguration$lan;
+
+    const newConfiguration = _extends({}, defaults.configuration, c);
+
+    this._configuration = newConfiguration; // if language:enabled is true, then the corresponding default item model should include a language value;
+    // if it is false, then the language field should be omitted from the item model.
+    // if a default item model includes a language value (e.g., en_US) and the corresponding authoring view settings have language:settings = true,
+    // then (a) language:enabled should also be true, and (b) that default language value should be represented in languageChoices[] (as a key).
+
+    if (newConfiguration != null && (_newConfiguration$lan = newConfiguration.language) != null && _newConfiguration$lan.enabled) {
+      var _newConfiguration$lan2, _newConfiguration$lan3;
+
+      if (newConfiguration != null && (_newConfiguration$lan2 = newConfiguration.languageChoices) != null && (_newConfiguration$lan3 = _newConfiguration$lan2.options) != null && _newConfiguration$lan3.length) {
+        this._model.language = newConfiguration == null ? void 0 : newConfiguration.languageChoices.options[0].value;
+      }
+    } else if (newConfiguration.language.settings && this._model.language) {
+      this._configuration.language.enabled = true;
+
+      if (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) {
+        this._configuration.languageChoices.options = [];
+      } // check if the language is already included in the languageChoices.options array
+      // and if not, then add it.
+
+
+      if (!this._configuration.languageChoices.options.find(option => option.value === this._model.language)) {
+        this._configuration.languageChoices.options.push({
+          value: this._model.language,
+          label: this._model.language
+        });
+      }
+    } else {
+      delete this._model.language;
+    }
+
+    this.render();
+  }
+
+  onModelChanged(m) {
+    this._model = m;
+    this.render();
+    this.dispatchEvent(new ModelUpdatedEvent(this._model, false));
+  }
+
+  onConfigurationChanged(c) {
+    this._configuration = c;
+    this.render();
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+  /**
+   *
+   * @param {done, progress, file} handler
+   */
+
+
+  insertImage(handler) {
+    this.dispatchEvent(new InsertImageEvent(handler));
+  }
+
+  onDeleteImage(src, done) {
+    this.dispatchEvent(new DeleteImageEvent(src, done));
+  }
+
+  insertSound(handler) {
+    this.dispatchEvent(new InsertSoundEvent(handler));
+  }
+
+  onDeleteSound(src, done) {
+    this.dispatchEvent(new DeleteSoundEvent(src, done));
+  }
+
+  render() {
+    const el = /*#__PURE__*/React.createElement(Main$1, {
+      model: this._model,
+      configuration: this._configuration,
+      onModelChanged: this.onModelChanged.bind(this),
+      onConfigurationChanged: this.onConfigurationChanged.bind(this),
+      imageSupport: {
+        add: this.insertImage.bind(this),
+        delete: this.onDeleteImage.bind(this)
+      },
+      uploadSoundSupport: {
+        add: this.insertSound.bind(this),
+        delete: this.onDeleteSound.bind(this)
+      }
+    });
+    ReactDOM.render(el, this, () => {
+      renderMath(this);
+    });
+  }
+
+}
+
+CategorizeConfigure.createDefaultModel = (model = {}) => _extends({}, defaults.model, model);
+
+CategorizeConfigure.disableAlternateResponses = m => {
+  let {
+    correctResponse
+  } = m || {};
+  correctResponse = correctResponse || [];
+  const mappedCorrectResponse = correctResponse.map(cr => {
+    const response = _objectWithoutPropertiesLoose(cr, _excluded);
+
+    return response;
+  });
+  return _extends({}, m, {
+    correctResponse: mappedCorrectResponse,
+    allowAlternateEnabled: false
+  });
+};
+
+export { CategorizeConfigure as default };
+//# sourceMappingURL=configure.js.map