@pie-element/multi-trait-rubric 6.0.2-esm.0 → 6.2.0

package/esm/configure.js

@@ -1,4679 +0,0 @@
-import { ModelUpdatedEvent, InsertSoundEvent, DeleteSoundEvent, InsertImageEvent, DeleteImageEvent } from '@pie-framework/pie-configure-events';
-import React, { createContext, isValidElement, cloneElement, createRef, Component } from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import cloneDeep from 'lodash/cloneDeep';
-import isEmpty from 'lodash/isEmpty';
-import debounce from 'lodash/debounce';
-import { withStyles } from '@material-ui/core/styles';
-import { withDragContext } from '@pie-lib/drag';
-import { layout, settings } from '@pie-lib/config-ui';
-import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
-import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
-import { color } from '@pie-lib/render-ui';
-import IconButton from '@material-ui/core/IconButton';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import MoreVertIcon from '@material-ui/icons/MoreVert';
-import classnames from 'classnames';
-import EditableHtml, { DEFAULT_PLUGINS } from '@pie-lib/editable-html';
-import FormControl from '@material-ui/core/FormControl';
-import InputLabel from '@material-ui/core/InputLabel';
-import Select from '@material-ui/core/Select';
-import InputBase from '@material-ui/core/InputBase';
-import grey from '@material-ui/core/colors/grey';
-import Dialog from '@material-ui/core/Dialog';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import Button from '@material-ui/core/Button';
-import debug from 'debug';
-import DragIndicatorIcon from '@material-ui/icons/DragIndicator';
-import { jsx } from 'react/jsx-runtime';
-
-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;
-}
-
-var defaults = {
-  model: {
-    addScaleEnabled: true,
-    description: false,
-    excludeZero: false,
-    halfScoring: false,
-    maxPointsEnabled: true,
-    pointLabels: true,
-    scales: [],
-    standards: false,
-    visibleToStudent: true
-  },
-  configuration: {
-    baseInputConfiguration: {
-      audio: {
-        disabled: false
-      },
-      video: {
-        disabled: false
-      },
-      image: {
-        disabled: false
-      },
-      textAlign: {
-        disabled: true
-      },
-      showParagraphs: {
-        disabled: false
-      },
-      separateParagraphs: {
-        disabled: true
-      }
-    },
-    expandedInput: {
-      inputConfiguration: {
-        math: {
-          disabled: true
-        },
-        audio: {
-          disabled: false
-        },
-        video: {
-          disabled: false
-        },
-        image: {
-          disabled: false
-        }
-      }
-    },
-    labelInput: {
-      inputConfiguration: {
-        math: {
-          disabled: true
-        },
-        audio: {
-          disabled: true
-        },
-        video: {
-          disabled: true
-        },
-        image: {
-          disabled: true
-        }
-      }
-    },
-    excludeZeroDialogBoxContent: {
-      title: 'Exclude 0 (Zero) from Score Point Values.',
-      text: `<div>
-        You are about to exclude 0 from score point values.
-        <br/>
-        Some of the existing data has to be changed.
-        <br/>
-        Please choose if you want to:
-        <ul>
-          <li>
-            shift Labels and Descriptions to the left
-          </li>
-          <li>
-            remove 0 column with its Label and Description
-          </li>
-        </ul>
-      </div>`
-    },
-    includeZeroDialogBoxContent: {
-      title: 'Include 0 (Zero) in Score Point Values.',
-      text: `<div>
-        You are about to include 0 in score point values.
-        <br/>
-        Some of the existing data has to be changed.
-        <br/>
-        Please choose if you want to:
-        <ul>
-          <li>
-            shift Labels and Descriptions to the right
-          </li>
-          <li>
-            add 0 column with empty Label and Descriptions
-          </li>
-        </ul>
-      </div>`
-    },
-    deleteScaleDialogBoxContent: {
-      title: 'Delete Scale',
-      text: 'Are you sure you want to delete this scale?'
-    },
-    maxPointsDialogBoxContent: {
-      title: 'Decreasing Max Points.',
-      text: ` You are about to decrease max score point value.
-        <br/>
-        All the Labels and Descriptions for scores above Max Point will be deleted.`
-    },
-    settingsPanelDisabled: false,
-    spellCheck: {
-      label: 'Spellcheck',
-      settings: false,
-      enabled: true
-    },
-    showExcludeZero: {
-      settings: true,
-      label: 'Exclude Zero'
-    },
-    showScorePointLabels: {
-      settings: true,
-      label: 'Show Score Point Labels'
-    },
-    showDescription: {
-      settings: true,
-      label: 'Show Description'
-    },
-    showVisibleToStudent: {
-      settings: true,
-      label: 'Visible to Student'
-    },
-    showHalfScoring: {
-      settings: true,
-      label: 'Half Scoring'
-    },
-    // commenting this in order to use the dynamic width if the width was not set by the client (PD-3203)
-    // width: '900px',
-    // these should not be set to true (should not be used) for now
-    showStandards: {
-      settings: false,
-      label: 'Show Standards'
-    },
-    showLevelTagInput: {
-      settings: false,
-      label: 'Show Level Tag Input',
-      enabled: false
-    },
-    dragAndDrop: {
-      settings: true,
-      label: 'Enable Drag and Drop',
-      enabled: false
-    },
-    showMaxPoint: {
-      settings: true,
-      label: 'Show Max Points Dropdown'
-    },
-    addScale: {
-      settings: true,
-      label: 'Add Scale Available'
-    },
-    minNoOfTraits: 1,
-    maxNoOfTraits: 10,
-    minNoOfScales: 1,
-    maxNoOfScales: 10,
-    defaultTraitLabel: 'Trait',
-    mathMlOptions: {
-      mmlOutput: false,
-      mmlEditing: false
-    },
-    maxMaxPoints: 10
-  }
-};
-
-const {
-  configuration: {
-    excludeZeroDialogBoxContent,
-    includeZeroDialogBoxContent,
-    deleteScaleDialogBoxContent,
-    maxPointsDialogBoxContent
-  }
-} = defaults;
-const excludeZeroTypes = {
-  remove0: 'remove0',
-  add0: 'add0',
-  shiftLeft: 'shiftLeft',
-  shiftRight: 'shiftRight'
-};
-
-const styles$4 = theme => ({
-  root: {
-    padding: theme.spacing.unit * 2.5
-  },
-  title: {
-    padding: `0 0 ${theme.spacing.unit * 2}px 0`,
-    '& h2': {
-      fontSize: '20px',
-      lineHeight: '23px',
-      fontFamily: 'Cerebri Sans',
-      color: color.text()
-    }
-  },
-  text: {
-    paddingLeft: '0',
-    '& p': {
-      fontSize: theme.typography.fontSize + 2,
-      fontFamily: 'Cerebri Sans',
-      color: color.text()
-    }
-  },
-  button: {
-    padding: `${theme.spacing.unit * 1.5}px ${theme.spacing.unit * 2}px`,
-    borderRadius: '4px',
-    fontSize: theme.typography.fontSize,
-    fontFamily: 'Cerebri Sans',
-    lineHeight: '14px',
-    textTransform: 'none',
-    background: color.primary(),
-    color: theme.palette.common.white
-  },
-  cancelButton: {
-    background: color.secondaryBackground(),
-    color: color.text()
-  }
-});
-
-const RawExcludeZeroDialog = ({
-  open,
-  changeExcludeZero,
-  cancel,
-  classes
-}) => /*#__PURE__*/React.createElement(Dialog, {
-  open: open,
-  classes: {
-    paper: classes.root
-  }
-}, /*#__PURE__*/React.createElement(DialogTitle, {
-  classes: {
-    root: classes.title
-  }
-}, excludeZeroDialogBoxContent.title), /*#__PURE__*/React.createElement(DialogContent, {
-  classes: {
-    root: classes.text
-  }
-}, /*#__PURE__*/React.createElement(DialogContentText, null, /*#__PURE__*/React.createElement("div", {
-  dangerouslySetInnerHTML: {
-    __html: excludeZeroDialogBoxContent.text
-  }
-}))), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
-  classes: {
-    root: `${classes.button} ${classes.cancelButton}`
-  },
-  onClick: () => cancel()
-}, "Cancel"), /*#__PURE__*/React.createElement(Button, {
-  classes: {
-    root: classes.button
-  },
-  onClick: () => changeExcludeZero(excludeZeroTypes.shiftLeft)
-}, "Shift to Left"), /*#__PURE__*/React.createElement(Button, {
-  classes: {
-    root: classes.button
-  },
-  onClick: () => changeExcludeZero(excludeZeroTypes.remove0)
-}, "Remove 0 column")));
-
-RawExcludeZeroDialog.propTypes = {
-  classes: PropTypes.object,
-  open: PropTypes.bool,
-  changeExcludeZero: PropTypes.func,
-  cancel: PropTypes.func
-};
-const ExcludeZeroDialog = withStyles(styles$4)(RawExcludeZeroDialog);
-
-const RawIncludeZeroDialog = ({
-  open,
-  changeExcludeZero,
-  cancel,
-  classes
-}) => /*#__PURE__*/React.createElement(Dialog, {
-  open: open,
-  classes: {
-    paper: classes.root
-  }
-}, /*#__PURE__*/React.createElement(DialogTitle, {
-  classes: {
-    root: classes.title
-  }
-}, includeZeroDialogBoxContent.title), /*#__PURE__*/React.createElement(DialogContent, {
-  classes: {
-    root: classes.text
-  }
-}, /*#__PURE__*/React.createElement(DialogContentText, null, /*#__PURE__*/React.createElement("div", {
-  dangerouslySetInnerHTML: {
-    __html: includeZeroDialogBoxContent.text
-  }
-}))), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
-  classes: {
-    root: `${classes.button} ${classes.cancelButton}`
-  },
-  onClick: () => cancel()
-}, "Cancel"), /*#__PURE__*/React.createElement(Button, {
-  classes: {
-    root: classes.button
-  },
-  onClick: () => changeExcludeZero(excludeZeroTypes.shiftRight)
-}, "Shift to Right"), /*#__PURE__*/React.createElement(Button, {
-  classes: {
-    root: classes.button
-  },
-  onClick: () => changeExcludeZero(excludeZeroTypes.add0)
-}, "Add 0 column")));
-
-RawIncludeZeroDialog.propTypes = {
-  classes: PropTypes.object,
-  open: PropTypes.bool,
-  changeExcludeZero: PropTypes.func,
-  cancel: PropTypes.func
-};
-const IncludeZeroDialog = withStyles(styles$4)(RawIncludeZeroDialog);
-
-const RawDecreaseMaxPoints = ({
-  open,
-  deleteScorePoints,
-  cancel,
-  classes
-}) => /*#__PURE__*/React.createElement(Dialog, {
-  open: open,
-  classes: {
-    paper: classes.root
-  }
-}, /*#__PURE__*/React.createElement(DialogTitle, {
-  classes: {
-    root: classes.title
-  }
-}, maxPointsDialogBoxContent.title), /*#__PURE__*/React.createElement(DialogContent, {
-  classes: {
-    root: classes.text
-  }
-}, /*#__PURE__*/React.createElement(DialogContentText, null, /*#__PURE__*/React.createElement("div", {
-  dangerouslySetInnerHTML: {
-    __html: maxPointsDialogBoxContent.text
-  }
-}))), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
-  classes: {
-    root: `${classes.button} ${classes.cancelButton}`
-  },
-  onClick: cancel
-}, "Cancel"), /*#__PURE__*/React.createElement(Button, {
-  classes: {
-    root: classes.button
-  },
-  onClick: deleteScorePoints
-}, "Confirm")));
-
-RawDecreaseMaxPoints.propTypes = {
-  classes: PropTypes.object,
-  open: PropTypes.bool,
-  deleteScorePoints: PropTypes.func,
-  cancel: PropTypes.func
-};
-const DecreaseMaxPoints = withStyles(styles$4)(RawDecreaseMaxPoints);
-
-const RawDeleteScale = ({
-  open,
-  scaleIndex,
-  deleteScale,
-  cancel,
-  classes
-}) => /*#__PURE__*/React.createElement(Dialog, {
-  open: open,
-  classes: {
-    paper: classes.root
-  }
-}, /*#__PURE__*/React.createElement(DialogTitle, {
-  classes: {
-    root: classes.title
-  }
-}, `${deleteScaleDialogBoxContent.title} #${scaleIndex + 1}`), /*#__PURE__*/React.createElement(DialogContent, {
-  classes: {
-    root: classes.text
-  }
-}, /*#__PURE__*/React.createElement(DialogContentText, null, /*#__PURE__*/React.createElement("div", {
-  dangerouslySetInnerHTML: {
-    __html: deleteScaleDialogBoxContent.text
-  }
-}))), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
-  classes: {
-    root: `${classes.button} ${classes.cancelButton}`
-  },
-  onClick: cancel
-}, "Cancel"), /*#__PURE__*/React.createElement(Button, {
-  classes: {
-    root: classes.button
-  },
-  onClick: deleteScale
-}, "Delete")));
-
-RawDeleteScale.propTypes = {
-  classes: PropTypes.object,
-  open: PropTypes.bool,
-  scaleIndex: PropTypes.number,
-  deleteScale: PropTypes.func,
-  cancel: PropTypes.func
-};
-const DeleteScale = withStyles(styles$4)(RawDeleteScale);
-
-const RawDeleteTrait = ({
-  open,
-  deleteTrait,
-  cancel,
-  classes,
-  traitLabel
-}) => /*#__PURE__*/React.createElement(Dialog, {
-  open: open,
-  classes: {
-    paper: classes.root
-  }
-}, /*#__PURE__*/React.createElement(DialogTitle, {
-  classes: {
-    root: classes.title
-  }
-}, "Delete ", traitLabel), /*#__PURE__*/React.createElement(DialogContent, {
-  classes: {
-    root: classes.text
-  }
-}, /*#__PURE__*/React.createElement(DialogContentText, null, /*#__PURE__*/React.createElement("div", {
-  dangerouslySetInnerHTML: {
-    __html: `Are you sure you want to delete this ${traitLabel}?`
-  }
-}))), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
-  classes: {
-    root: `${classes.button} ${classes.cancelButton}`
-  },
-  onClick: cancel
-}, "Cancel"), /*#__PURE__*/React.createElement(Button, {
-  classes: {
-    root: classes.button
-  },
-  onClick: deleteTrait
-}, "Delete")));
-
-RawDeleteTrait.propTypes = {
-  classes: PropTypes.object,
-  open: PropTypes.bool,
-  deleteTrait: PropTypes.func,
-  cancel: PropTypes.func,
-  traitLabel: PropTypes.string
-};
-const DeleteTrait = withStyles(styles$4)(RawDeleteTrait);
-
-const RawInfoDialog = ({
-  classes,
-  open,
-  text,
-  onClose
-}) => /*#__PURE__*/React.createElement(Dialog, {
-  open: open,
-  classes: {
-    paper: classes.root
-  }
-}, /*#__PURE__*/React.createElement(DialogTitle, {
-  classes: {
-    root: classes.title
-  }
-}, text), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
-  classes: {
-    root: classes.button
-  },
-  onClick: onClose
-}, "OK")));
-
-RawInfoDialog.propTypes = {
-  classes: PropTypes.object,
-  open: PropTypes.bool,
-  text: PropTypes.string,
-  cancel: PropTypes.func,
-  onClose: PropTypes.func
-};
-const InfoDialog = withStyles(styles$4)(RawInfoDialog);
-
-const _excluded = ["scorePointsDescriptors"],
-      _excluded2 = ["scorePointsDescriptors"],
-      _excluded3 = ["scorePointsDescriptors"],
-      _excluded4 = ["scorePointsDescriptors"];
-const filteredDefaultPlugins = (DEFAULT_PLUGINS || []).filter(p => p !== 'table' && p !== 'bulleted-list' && p !== 'numbered-list');
-const addOrRemoveScaleColumn = (scales, excludeZeroType) => {
-  if (!scales || !scales.length) {
-    return [];
-  }
-
-  return scales.reduce((acc, scale) => {
-    let {
-      scorePointsLabels,
-      traits
-    } = scale || {};
-
-    if (scorePointsLabels.length < 1) {
-      return acc;
-    }
-
-    switch (excludeZeroType) {
-      case excludeZeroTypes.remove0:
-        {
-          // removes column 0
-          scorePointsLabels = scorePointsLabels.slice(1);
-          traits = traits.map(_ref => {
-            let {
-              scorePointsDescriptors
-            } = _ref,
-                trait = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-            return _extends({}, trait, {
-              scorePointsDescriptors: scorePointsDescriptors.slice(1)
-            });
-          });
-          break;
-        }
-
-      case excludeZeroTypes.add0:
-        {
-          // adds empty column at start
-          scorePointsLabels = ['', ...scorePointsLabels];
-          traits = traits.map(_ref2 => {
-            let {
-              scorePointsDescriptors
-            } = _ref2,
-                trait = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-
-            return _extends({}, trait, {
-              scorePointsDescriptors: ['', ...scorePointsDescriptors]
-            });
-          });
-          break;
-        }
-
-      case excludeZeroTypes.shiftLeft:
-        {
-          // removes last column
-          scorePointsLabels = scorePointsLabels.slice(0, -1);
-          traits = traits.map(_ref3 => {
-            let {
-              scorePointsDescriptors
-            } = _ref3,
-                trait = _objectWithoutPropertiesLoose(_ref3, _excluded3);
-
-            return _extends({}, trait, {
-              scorePointsDescriptors: scorePointsDescriptors.slice(0, -1)
-            });
-          });
-          break;
-        }
-
-      case excludeZeroTypes.shiftRight:
-        {
-          // adds empty column at end
-          scorePointsLabels = [...scorePointsLabels, ''];
-          traits = traits.map(_ref4 => {
-            let {
-              scorePointsDescriptors
-            } = _ref4,
-                trait = _objectWithoutPropertiesLoose(_ref4, _excluded4);
-
-            return _extends({}, trait, {
-              scorePointsDescriptors: [...scorePointsDescriptors, '']
-            });
-          });
-          break;
-        }
-    }
-
-    acc.push(_extends({}, scale, {
-      scorePointsLabels,
-      traits
-    }));
-    return acc;
-  }, []);
-};
-
-const BlockWidth = 200;
-const PrimaryBlockWidth = 200;
-const DragHandleSpace = 32;
-const HeaderHeight = '100px';
-const HeaderHeightLarge = '160px';
-const InputHeight = '120px';
-const greyBorder = `solid 1px ${grey[400]}`;
-const Padding = '8px 4px';
-const MultiTraitButton = withStyles(theme => ({
-  button: {
-    fontSize: theme.typography.fontSize + 2,
-    textAlign: 'right',
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    padding: `${theme.spacing.unit * 1.5}px ${theme.spacing.unit * 2}px`,
-    width: '114px',
-    background: color.secondaryBackground(),
-    borderRadius: '4px',
-    justifyContent: 'space-around',
-    color: color.text(),
-    cursor: 'pointer'
-  }
-}))(({
-  classes,
-  children,
-  onClick
-}) => /*#__PURE__*/React.createElement("div", {
-  className: classes.button,
-  onClick: onClick
-}, /*#__PURE__*/React.createElement("strong", null, "+"), /*#__PURE__*/React.createElement("div", null, children)));
-const PrimaryBlock = withStyles({
-  primaryBlock: {
-    width: `${PrimaryBlockWidth}px`,
-    minWidth: `${PrimaryBlockWidth}px`,
-    position: 'relative',
-    padding: '0 10px',
-    boxSizing: 'border-box'
-  }
-})(({
-  classes,
-  children,
-  className
-}) => /*#__PURE__*/React.createElement("div", {
-  className: classnames(classes.primaryBlock, className)
-}, children));
-const Block = withStyles(theme => ({
-  block: {
-    width: `${BlockWidth}px`,
-    minWidth: `${BlockWidth}px`,
-    '& ul, ol': {
-      marginBlockStart: 0,
-      paddingInlineStart: theme.spacing.unit * 2
-    }
-  }
-}))(({
-  classes,
-  children
-}) => /*#__PURE__*/React.createElement("div", {
-  className: classes.block
-}, children));
-const SecondaryBlock = withStyles({
-  secondaryBlock: {
-    display: 'flex',
-    overflowX: 'hidden',
-    alignItems: 'flex-end',
-    // this is needed to show the editor toolbar!!!
-    paddingBottom: '30px'
-  }
-})(({
-  classes,
-  children,
-  setRef,
-  width
-}) => /*#__PURE__*/React.createElement("div", {
-  className: classes.secondaryBlock,
-  style: {
-    width: width
-  },
-  ref: setRef
-}, children));
-const Row = withStyles({
-  row: {
-    display: 'flex'
-  }
-})(({
-  classes,
-  children,
-  className,
-  height
-}) => /*#__PURE__*/React.createElement("div", {
-  className: classnames(classes.row, className),
-  style: {
-    height
-  }
-}, children));
-
-const ScorePoint = withStyles(theme => ({
-  scorePointBoxWrapper: {
-    padding: '0 10px'
-  },
-  scorePointBox: {
-    display: 'flex',
-    borderRadius: '4px',
-    background: 'white',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    border: greyBorder
-  },
-  scorePointBoxDisabled: {
-    background: 'none',
-    justifyContent: 'center',
-    border: '0'
-  },
-  subLabel: {
-    width: '24px',
-    textAlign: 'center'
-  },
-  editableLabel: {
-    textAlign: 'left',
-    flex: 1,
-    border: 'none',
-    '& div': {
-      padding: 0
-    },
-    '& > div': {
-      border: 'none',
-      borderLeft: greyBorder,
-      borderRadius: 0,
-      padding: Padding
-    }
-  },
-  slateEditor: {
-    fontFamily: 'Cerebri'
-  },
-  errorText: {
-    fontSize: theme.typography.fontSize - 2,
-    color: theme.palette.error.main,
-    paddingBottom: theme.spacing.unit
-  }
-}))(({
-  classes,
-  error: _error = '',
-  scorePointsValue,
-  scoreDescriptor,
-  pluginProps,
-  onChange,
-  showScorePointLabels,
-  alignToRight,
-  spellCheck,
-  uploadSoundSupport,
-  imageSupport: _imageSupport = {},
-  mathMlOptions: _mathMlOptions = {}
-}) => {
-  const scoreBoxClasses = showScorePointLabels ? classes.scorePointBox : `${classes.scorePointBox} ${classes.scorePointBoxDisabled}`;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.scorePointBoxWrapper
-  }, /*#__PURE__*/React.createElement("div", {
-    className: scoreBoxClasses
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.subLabel
-  }, scorePointsValue), showScorePointLabels ? /*#__PURE__*/React.createElement(EditableHtml, {
-    className: classes.editableLabel,
-    classes: {
-      slateEditor: classes.slateEditor
-    },
-    error: _error,
-    markup: scoreDescriptor,
-    placeholder: " Enter Label",
-    onChange: onChange,
-    pluginProps: pluginProps,
-    activePlugins: filteredDefaultPlugins,
-    spellCheck: spellCheck,
-    toolbarOpts: alignToRight ? {
-      alignment: 'right'
-    } : {},
-    uploadSoundSupport: uploadSoundSupport,
-    languageCharactersProps: [{
-      language: 'spanish'
-    }, {
-      language: 'special'
-    }],
-    mathMlOptions: _mathMlOptions,
-    imageSupport: _imageSupport
-  }) : null));
-});
-
-const inputStyles = theme => ({
-  root: {
-    background: theme.palette.common.white,
-    'label + &': {
-      marginTop: theme.spacing.unit * 2.5,
-      marginBottom: 0,
-      width: '80px'
-    }
-  },
-  input: {
-    borderRadius: '4px',
-    position: 'relative',
-    border: greyBorder,
-    fontSize: theme.typography.fontSize,
-    fontFamily: 'Cerebri Sans',
-    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 1.5}px`,
-    '&:focus': {
-      borderRadius: '4px'
-    }
-  }
-});
-
-const BootstrapInput = withStyles(inputStyles)(InputBase);
-
-const createMaxScoreOptions = maxMaxPoints => Array.from({
-  length: maxMaxPoints
-}, (_, i) => i + 1);
-
-const MaxPointsPicker = withStyles({})(({
-  maxPoints,
-  onChange,
-  maxMaxPoints
-}) => /*#__PURE__*/React.createElement(FormControl, null, /*#__PURE__*/React.createElement(InputLabel, null, "Max Points"), /*#__PURE__*/React.createElement(Select, {
-  value: maxPoints,
-  onChange: onChange,
-  input: /*#__PURE__*/React.createElement(BootstrapInput, null)
-}, createMaxScoreOptions(maxMaxPoints).map(maxScore => /*#__PURE__*/React.createElement(MenuItem, {
-  key: `menu-item-${maxScore}`,
-  value: maxScore
-}, maxScore)))));
-const SimpleInput = withStyles(theme => ({
-  simpleInput: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    margin: `${theme.spacing.unit * 1.5}px 0`
-  },
-  editableLevel: {
-    background: theme.palette.common.white,
-    width: '60%'
-  },
-  slateEditor: {
-    fontFamily: 'Cerebri'
-  }
-}))(({
-  classes,
-  markup,
-  onChange,
-  pluginProps,
-  label,
-  spellCheck,
-  uploadSoundSupport,
-  mathMlOptions: _mathMlOptions2 = {},
-  imageSupport: _imageSupport2 = {}
-}) => /*#__PURE__*/React.createElement("div", {
-  className: classes.simpleInput
-}, label && /*#__PURE__*/React.createElement("div", null, label), /*#__PURE__*/React.createElement(EditableHtml, {
-  className: classes.editableLevel,
-  classes: {
-    slateEditor: classes.slateEditor
-  },
-  markup: markup,
-  onChange: onChange,
-  placeholder: "Trait Label",
-  pluginProps: pluginProps,
-  activePlugins: filteredDefaultPlugins,
-  spellCheck: spellCheck,
-  uploadSoundSupport: uploadSoundSupport,
-  languageCharactersProps: [{
-    language: 'spanish'
-  }, {
-    language: 'special'
-  }],
-  mathMlOptions: _mathMlOptions2,
-  imageSupport: _imageSupport2
-})));
-const UnderlinedInput = withStyles(theme => ({
-  underlinedInputWrapper: {
-    width: '100%',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  editableLevel: {
-    background: theme.palette.common.white,
-    width: '100%',
-    '& div': {
-      padding: 0
-    },
-    '& > div': {
-      border: 'none',
-      borderBottom: greyBorder,
-      borderRadius: 0,
-      padding: Padding
-    }
-  },
-  slateEditor: {
-    fontFamily: 'Cerebri'
-  }
-}))(({
-  classes,
-  error,
-  markup,
-  onChange,
-  pluginProps,
-  label,
-  placeholder,
-  spellCheck,
-  uploadSoundSupport,
-  imageSupport: _imageSupport3 = {},
-  mathMlOptions: _mathMlOptions3 = {}
-}) => /*#__PURE__*/React.createElement("div", {
-  className: classes.underlinedInputWrapper
-}, label && /*#__PURE__*/React.createElement("div", null, label), /*#__PURE__*/React.createElement(EditableHtml, {
-  className: classes.editableLevel,
-  classes: {
-    slateEditor: classes.slateEditor
-  },
-  error: error,
-  markup: markup,
-  onChange: onChange,
-  placeholder: placeholder,
-  pluginProps: pluginProps,
-  activePlugins: filteredDefaultPlugins,
-  spellCheck: spellCheck,
-  uploadSoundSupport: uploadSoundSupport,
-  languageCharactersProps: [{
-    language: 'spanish'
-  }, {
-    language: 'special'
-  }],
-  mathMlOptions: _mathMlOptions3,
-  imageSupport: _imageSupport3
-})));
-const ExpandedInput = withStyles({
-  slateEditor: {
-    fontFamily: 'Cerebri',
-    height: InputHeight,
-    padding: 0
-  },
-  prompt: {
-    border: 'none',
-    margin: '10px',
-    marginTop: 0
-  }
-})(({
-  classes,
-  error,
-  markup,
-  onChange,
-  pluginProps,
-  placeholder,
-  alignToRight,
-  spellCheck,
-  uploadSoundSupport,
-  mathMlOptions: _mathMlOptions4 = {},
-  imageSupport: _imageSupport4 = {}
-}) => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(EditableHtml, {
-  className: classes.prompt,
-  classes: {
-    slateEditor: classes.slateEditor
-  },
-  error: error,
-  markup: markup,
-  onChange: onChange,
-  placeholder: placeholder,
-  pluginProps: pluginProps,
-  toolbarOpts: alignToRight ? {
-    alignment: 'right'
-  } : {},
-  spellCheck: spellCheck,
-  uploadSoundSupport: uploadSoundSupport,
-  languageCharactersProps: [{
-    language: 'spanish'
-  }, {
-    language: 'special'
-  }],
-  autoWidthToolbar: true,
-  mathMlOptions: _mathMlOptions4,
-  imageSupport: _imageSupport4
-})));
-const ScaleSettings = withStyles({
-  scaleSettings: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'flex-end'
-  }
-})(({
-  classes,
-  children
-}) => /*#__PURE__*/React.createElement("div", {
-  className: classes.scaleSettings
-}, children));
-const Arrow = withStyles(theme => ({
-  arrow: {
-    position: 'absolute',
-    zIndex: 10,
-    cursor: 'pointer',
-    right: 0,
-    alignItems: 'flex-start',
-    justifyContent: 'center',
-    background: `linear-gradient(to left, ${theme.palette.common.white}, ${color.background()})`,
-    boxSizing: 'border-box'
-  },
-  innerGrey: {
-    position: 'absolute',
-    zIndex: 11,
-    cursor: 'pointer',
-    right: 0,
-    alignItems: 'flex-start',
-    justifyContent: 'center',
-    background: `linear-gradient(to left, ${theme.palette.common.white}, ${color.background()})`,
-    boxSizing: 'border-box',
-    '& svg': {
-      position: 'absolute',
-      bottom: '-24px'
-    }
-  }
-}))(({
-  classes,
-  children,
-  className,
-  show,
-  width,
-  onClick,
-  left,
-  showLevelTagInput
-}) => /*#__PURE__*/React.createElement("div", {
-  className: classnames(classes.arrow, className),
-  style: {
-    height: '-webkit-fill-available',
-    display: show ? 'flex' : 'none',
-    width: width,
-    left: left,
-    background: left ? `linear-gradient(to right, white, ${color.background()})` : undefined
-  },
-  onClick: onClick
-}, /*#__PURE__*/React.createElement("div", {
-  className: classnames(classes.innerGrey, className),
-  style: {
-    display: show ? 'flex' : 'none',
-    width: width,
-    height: showLevelTagInput ? HeaderHeightLarge : HeaderHeight,
-    left: 0,
-    background: left ? `linear-gradient(to right, ${color.secondaryBackground()}, ${color.background()})` : undefined
-  },
-  onClick: onClick
-}, children)));
-
-const styles$3 = theme => ({
-  label: {
-    textAlign: 'center',
-    width: '140px',
-    border: 'none',
-    margin: theme.spacing.unit,
-    padding: '10px 0',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-around'
-  },
-  greyHeader: {
-    background: color.secondaryBackground(),
-    borderRadius: '4px',
-    position: 'relative',
-    marginBottom: theme.spacing.unit * 2
-  },
-  primaryBlockGreyHeader: {
-    paddingTop: theme.spacing.unit * 1.5
-  },
-  scorePointErrorText: {
-    position: 'absolute',
-    fontSize: theme.typography.fontSize - 2,
-    color: theme.palette.error.main,
-    paddingTop: theme.spacing.unit / 2
-  }
-});
-
-class TraitsHeaderTile extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      anchorEl: null
-    };
-
-    this.onScorePointLabelChange = ({
-      scorePointLabel,
-      value
-    }) => {
-      const {
-        scorePointsLabels,
-        onScaleChange
-      } = this.props;
-      if (value < 0 || value >= scorePointsLabels.length) return;
-      scorePointsLabels[value] = scorePointLabel;
-      onScaleChange({
-        scorePointsLabels
-      });
-    };
-
-    this.handleClick = event => this.setState({
-      anchorEl: event.currentTarget
-    });
-
-    this.handleClose = () => this.setState({
-      anchorEl: null
-    });
-
-    this.scrollToPosition = position => this.secondaryBlock.scrollTo({
-      left: position
-    });
-
-    this.openMenu = () => {
-      this.props.showDeleteScaleModal();
-      this.handleClose();
-    };
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.currentPosition !== this.props.currentPosition) {
-      this.scrollToPosition(nextProps.currentPosition);
-    }
-  }
-
-  render() {
-    const {
-      scorePointsValues,
-      scorePointsLabels,
-      traitLabel,
-      classes,
-      currentPosition,
-      showStandards,
-      onTraitLabelChange,
-      showDescription,
-      showLevelTagInput,
-      maxPoints,
-      updateMaxPointsFieldValue,
-      scaleIndex,
-      showScorePointLabels,
-      secondaryBlockWidth,
-      setSecondaryBlockRef,
-      spellCheck,
-      uploadSoundSupport,
-      maxPointsEnabled,
-      mathMlOptions = {},
-      errors = {},
-      maxMaxPoints,
-      labelPluginProps = {},
-      imageSupport = {}
-    } = this.props;
-    const {
-      anchorEl
-    } = this.state;
-    return /*#__PURE__*/React.createElement(Row, {
-      className: classes.greyHeader,
-      height: showLevelTagInput ? HeaderHeightLarge : HeaderHeight
-    }, /*#__PURE__*/React.createElement(PrimaryBlock, {
-      className: classes.primaryBlockGreyHeader
-    }, showLevelTagInput && /*#__PURE__*/React.createElement(SimpleInput, {
-      markup: traitLabel || 'Trait',
-      onChange: onTraitLabelChange,
-      pluginProps: labelPluginProps,
-      spellCheck: spellCheck,
-      label: "Level Label",
-      uploadSoundSupport: uploadSoundSupport,
-      mathMlOptions: mathMlOptions,
-      imageSupport: imageSupport
-    }), /*#__PURE__*/React.createElement(ScaleSettings, null, /*#__PURE__*/React.createElement("div", null, "Scale ", scaleIndex + 1), maxPointsEnabled && /*#__PURE__*/React.createElement(MaxPointsPicker, {
-      maxPoints: maxPoints,
-      maxMaxPoints: maxMaxPoints,
-      onChange: updateMaxPointsFieldValue
-    }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconButton, {
-      "aria-label": "more",
-      "aria-controls": "long-menu",
-      "aria-haspopup": "true",
-      onClick: this.handleClick
-    }, /*#__PURE__*/React.createElement(MoreVertIcon, null)), /*#__PURE__*/React.createElement(Menu, {
-      id: "long-menu",
-      anchorEl: anchorEl,
-      keepMounted: true,
-      open: !!anchorEl,
-      onClose: this.handleClose
-    }, ['Remove Scale'].map(option => /*#__PURE__*/React.createElement(MenuItem, {
-      key: option,
-      onClick: this.openMenu
-    }, option)))))), /*#__PURE__*/React.createElement(SecondaryBlock, {
-      setRef: ref => {
-        if (ref) {
-          this.secondaryBlock = ref;
-          setSecondaryBlockRef(ref);
-        }
-      },
-      width: `${secondaryBlockWidth}px`
-    }, showStandards && /*#__PURE__*/React.createElement(Block, null, /*#__PURE__*/React.createElement("div", {
-      className: classes.label
-    }, "Standard(s)")), showDescription && /*#__PURE__*/React.createElement(Block, null, /*#__PURE__*/React.createElement("div", {
-      className: classes.label
-    }, "Description")), scorePointsValues.map((scorePointsValue, index) => {
-      const adjustedBlockWidth = BlockWidth + 2 * 8; // 8 is padding
-
-      const remainingSpace = secondaryBlockWidth - adjustedBlockWidth * index + currentPosition - 128;
-      const value = scorePointsValues.length - index - 1;
-      let scoreDescriptor;
-      let error;
-
-      try {
-        scoreDescriptor = scorePointsLabels[value] || '';
-        error = errors[value] || '';
-      } catch (e) {
-        scoreDescriptor = '';
-      }
-
-      return /*#__PURE__*/React.createElement(Block, {
-        key: `secondary-block-part-${index}`
-      }, /*#__PURE__*/React.createElement(ScorePoint, {
-        scorePointsValue: scorePointsValue,
-        error: error,
-        scoreDescriptor: scoreDescriptor,
-        pluginProps: labelPluginProps,
-        showScorePointLabels: showScorePointLabels,
-        onChange: scorePointLabel => this.onScorePointLabelChange({
-          scorePointLabel,
-          value
-        }),
-        alignToRight: remainingSpace < 296 && scorePointsValue < maxPoints // 296 is the space required for the toolbar
-        ,
-        spellCheck: spellCheck,
-        uploadSoundSupport: uploadSoundSupport,
-        mathMlOptions: mathMlOptions,
-        imageSupport: imageSupport
-      }), error && /*#__PURE__*/React.createElement("div", {
-        className: classes.scorePointErrorText
-      }, error));
-    })));
-  }
-
-}
-TraitsHeaderTile.propTypes = {
-  maxPointsEnabled: PropTypes.bool,
-  spellCheck: PropTypes.bool,
-  errors: PropTypes.object
-};
-TraitsHeaderTile.propTypes = {
-  classes: PropTypes.object.isRequired,
-  onTraitLabelChange: PropTypes.func,
-  onScaleChange: PropTypes.func,
-  scorePointsValues: PropTypes.arrayOf(PropTypes.number),
-  scorePointsLabels: PropTypes.arrayOf(PropTypes.string),
-  traitLabel: PropTypes.string,
-  showStandards: PropTypes.bool,
-  showLevelTagInput: PropTypes.bool,
-  showDescription: PropTypes.bool,
-  maxPoints: PropTypes.number,
-  updateMaxPointsFieldValue: PropTypes.func,
-  scaleIndex: PropTypes.number,
-  currentPosition: PropTypes.number,
-  secondaryBlockWidth: PropTypes.number,
-  showDeleteScaleModal: PropTypes.func,
-  showScorePointLabels: PropTypes.bool,
-  setSecondaryBlockRef: PropTypes.func,
-  uploadSoundSupport: PropTypes.object,
-  maxMaxPoints: PropTypes.number,
-  labelPluginProps: PropTypes.object,
-  imageSupport: PropTypes.shape({
-    add: PropTypes.func.isRequired,
-    delete: PropTypes.func.isRequired
-  })
-};
-var TraitsHeader = withStyles(styles$3)(TraitsHeaderTile);
-
-/**
- * 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 = debug('@pie-element:placement-ordering:configure:trait-tile');
-
-const styles$2 = theme => ({
-  actions: {
-    color: color.text()
-  },
-  primaryBlock: {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-    marginBottom: theme.spacing.unit * 5
-  },
-  controls: {
-    display: 'flex',
-    alignItems: 'center',
-    width: '100%',
-    cursor: 'pointer'
-  },
-  options: {
-    marginLeft: 'auto'
-  },
-  dragHandle: {},
-  removeLabel: {
-    display: 'flex',
-    whiteSpace: 'break-spaces'
-  },
-  errorText: {
-    fontSize: theme.typography.fontSize - 2,
-    color: theme.palette.error.main,
-    paddingBottom: theme.spacing.unit
-  }
-});
-
-class TraitTile extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {};
-
-    this.onTraitChanged = params => {
-      const {
-        trait,
-        onTraitChanged
-      } = this.props;
-      if (isEmpty(params)) return;
-      Object.keys(params).forEach(key => {
-        trait[key] = params[key];
-      });
-      onTraitChanged(trait);
-    };
-
-    this.onScorePointDescriptorChange = ({
-      descriptor,
-      value
-    }) => {
-      const {
-        trait: {
-          scorePointsDescriptors
-        }
-      } = this.props;
-      if (value < 0 || value >= scorePointsDescriptors.length) return;
-      scorePointsDescriptors[value] = descriptor;
-      this.onTraitChanged({
-        scorePointsDescriptors
-      });
-    };
-
-    this.handleClick = event => this.setState({
-      anchorEl: event.currentTarget
-    });
-
-    this.handleClose = () => this.setState({
-      anchorEl: null
-    });
-
-    this.scrollToPosition = position => this.secondaryBlock.scrollTo({
-      left: position
-    });
-
-    this.openMenu = () => {
-      this.props.onTraitRemoved();
-      this.handleClose();
-    };
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.currentPosition !== this.props.currentPosition || this.secondaryBlock && this.secondaryBlock.scrollLeft !== nextProps.currentPosition) {
-      this.scrollToPosition(nextProps.currentPosition);
-    }
-  }
-
-  render() {
-    const {
-      classes,
-      connectDragSource,
-      connectDropTarget,
-      connectDragPreview,
-      error,
-      trait: {
-        name,
-        standards,
-        description,
-        scorePointsDescriptors
-      },
-      traitLabel,
-      scorePointsValues,
-      showStandards,
-      showDescription,
-      enableDragAndDrop,
-      currentPosition,
-      secondaryBlockWidth,
-      spellCheck,
-      maxPoints,
-      uploadSoundSupport,
-      mathMlOptions = {},
-      expandedPluginProps = {},
-      labelPluginProps = {},
-      imageSupport = {}
-    } = this.props;
-    const {
-      anchorEl
-    } = this.state;
-    return connectDragPreview(connectDropTarget( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(PrimaryBlock, {
-      className: classes.primaryBlock
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classes.controls
-    }, enableDragAndDrop ? connectDragSource( /*#__PURE__*/React.createElement("span", {
-      className: classes.dragHandle
-    }, /*#__PURE__*/React.createElement(DragIndicatorIcon, {
-      className: classes.actions
-    }))) : null, /*#__PURE__*/React.createElement(IconButton, {
-      className: classes.options,
-      "aria-label": "more",
-      "aria-controls": "long-menu",
-      "aria-haspopup": "true",
-      onClick: this.handleClick
-    }, /*#__PURE__*/React.createElement(MoreVertIcon, null)), /*#__PURE__*/React.createElement(Menu, {
-      id: "long-menu",
-      anchorEl: anchorEl,
-      keepMounted: true,
-      open: !!anchorEl,
-      onClose: this.handleClose
-    }, /*#__PURE__*/React.createElement(MenuItem, {
-      onClick: this.openMenu
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classes.removeLabel,
-      dangerouslySetInnerHTML: {
-        __html: `Remove ${name || traitLabel}`
-      }
-    })))), /*#__PURE__*/React.createElement(UnderlinedInput, {
-      markup: name,
-      error: (error == null ? void 0 : error.name) || '',
-      onChange: name => this.onTraitChanged({
-        name
-      }),
-      pluginProps: labelPluginProps,
-      placeholder: `Enter ${traitLabel}`,
-      spellCheck: spellCheck,
-      uploadSoundSupport: uploadSoundSupport,
-      mathMlOptions: mathMlOptions,
-      imageSupport: imageSupport
-    }), error && /*#__PURE__*/React.createElement("div", {
-      className: classes.errorText
-    }, error.name || '')), /*#__PURE__*/React.createElement(SecondaryBlock, {
-      setRef: ref => {
-        this.secondaryBlock = ref;
-      },
-      width: `${secondaryBlockWidth}px`
-    }, showStandards && standards && /*#__PURE__*/React.createElement(Block, null, /*#__PURE__*/React.createElement(ExpandedInput, {
-      placeholder: "Standards",
-      markup: standards.join(','),
-      onChange: standards => this.onTraitChanged({
-        standards: standards.split(',')
-      }),
-      pluginProps: expandedPluginProps,
-      spellCheck: spellCheck,
-      uploadSoundSupport: uploadSoundSupport,
-      mathMlOptions: mathMlOptions,
-      imageSupport: imageSupport
-    })), showDescription && /*#__PURE__*/React.createElement(Block, null, /*#__PURE__*/React.createElement(ExpandedInput, {
-      placeholder: "Enter Description",
-      markup: description,
-      error: (error == null ? void 0 : error.description) || '',
-      onChange: description => this.onTraitChanged({
-        description
-      }),
-      pluginProps: expandedPluginProps,
-      spellCheck: spellCheck,
-      uploadSoundSupport: uploadSoundSupport,
-      mathMlOptions: mathMlOptions,
-      imageSupport: imageSupport
-    }), error && /*#__PURE__*/React.createElement("div", {
-      className: classes.errorText
-    }, error.description || '')), (scorePointsValues || []).map((scorePointsValue, index) => {
-      const adjustedBlockWidth = BlockWidth + 2 * 8; // 8 is padding
-
-      const remainingSpace = secondaryBlockWidth - adjustedBlockWidth * index + currentPosition - 98;
-      const value = scorePointsValues.length - index - 1;
-      let scoreDescriptor;
-
-      try {
-        scoreDescriptor = scorePointsDescriptors[value] || '';
-      } catch (e) {
-        scoreDescriptor = '';
-      }
-
-      return /*#__PURE__*/React.createElement(Block, {
-        key: `key-key-${index}`
-      }, /*#__PURE__*/React.createElement(ExpandedInput, {
-        placeholder: "Enter Descriptor",
-        markup: scoreDescriptor,
-        onChange: descriptor => this.onScorePointDescriptorChange({
-          descriptor,
-          value
-        }),
-        pluginProps: expandedPluginProps,
-        alignToRight: remainingSpace < 296 && scorePointsValue < maxPoints // 296 is the space required for the toolbar
-        ,
-        spellCheck: spellCheck,
-        uploadSoundSupport: uploadSoundSupport,
-        mathMlOptions: mathMlOptions,
-        imageSupport: imageSupport
-      }));
-    }))))));
-  }
-
-}
-TraitTile.propTypes = {
-  spellCheck: PropTypes.bool,
-  uploadSoundSupport: PropTypes.object
-};
-TraitTile.propTypes = {
-  connectDragSource: PropTypes.func.isRequired,
-  connectDropTarget: PropTypes.func.isRequired,
-  connectDragPreview: PropTypes.func.isRequired,
-  classes: PropTypes.object.isRequired,
-  error: PropTypes.object,
-  isDragging: PropTypes.bool.isRequired,
-  id: PropTypes.any,
-  isOver: PropTypes.bool,
-  index: PropTypes.number,
-  onTraitChanged: PropTypes.func.isRequired,
-  onTraitRemoved: PropTypes.func.isRequired,
-  trait: PropTypes.shape({
-    name: PropTypes.string,
-    standards: PropTypes.arrayOf(PropTypes.string),
-    scorePointsDescriptors: PropTypes.arrayOf(PropTypes.string),
-    description: PropTypes.string
-  }),
-  traitLabel: PropTypes.string,
-  scorePointsValues: PropTypes.arrayOf(PropTypes.number),
-  showStandards: PropTypes.bool,
-  showDescription: PropTypes.bool,
-  maxPoints: PropTypes.number,
-  enableDragAndDrop: PropTypes.bool,
-  currentPosition: PropTypes.number,
-  secondaryBlockWidth: PropTypes.number,
-  expandedPluginProps: PropTypes.object,
-  labelPluginProps: PropTypes.object,
-  imageSupport: PropTypes.shape({
-    add: PropTypes.func.isRequired,
-    delete: PropTypes.func.isRequired
-  })
-};
-const StyledTrait = withStyles(styles$2)(TraitTile);
-const NAME = 'trait-config';
-const traitSource = {
-  beginDrag(props) {
-    return {
-      name: props.trait.name,
-      index: props.index
-    };
-  }
-
-};
-const StyledSource = DragSource(NAME, traitSource, (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  connectDragPreview: connect.dragPreview(),
-  isDragging: monitor.isDragging()
-}))(StyledTrait);
-const traitTarget = {
-  hover() {
-    log('[hover]');
-  },
-
-  drop(props, monitor) {
-    const item = monitor.getItem();
-    log('[drop] item: ', item, 'didDrop?', monitor.didDrop());
-    props.onTraitDropped(item, props.index);
-  }
-
-};
-const StyledSourceAndTarget = DropTarget(NAME, traitTarget, (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver()
-}))(StyledSource);
-
-const AdjustedBlockWidth = BlockWidth + 2 * 8; // 8 is padding
-
-const styles$1 = theme => ({
-  scaleWrapper: {
-    display: 'flex',
-    flexDirection: 'column',
-    wordBreak: 'break-word',
-    position: 'relative',
-    marginBottom: theme.spacing.unit * 2.5
-  },
-  maxPoints: {
-    width: '300px',
-    marginTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit * 4
-  },
-  trait: {
-    background: color.secondaryBackground(),
-    marginTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit * 2,
-    padding: theme.spacing.unit * 2
-  }
-});
-
-class Scale extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      showDecreaseMaxPointsDialog: false,
-      showDeleteScaleDialog: false,
-      showDeleteTraitDialog: false,
-      currentPosition: 0,
-      showRight: null,
-      showLeft: null,
-      showInfoDialog: false,
-      infoDialogText: ''
-    };
-
-    this.set = newState => this.setState(newState);
-
-    this.updateMaxPointsFieldValue = ({
-      target
-    }) => {
-      const {
-        scale,
-        scaleIndex,
-        onScaleChanged
-      } = this.props || {};
-      const {
-        maxPoints
-      } = scale;
-      const numberValue = parseInt(target.value, 10);
-      this.setState({
-        currentPosition: 0,
-        showLeft: false,
-        showRight: this.secondaryBlockRef && this.secondaryBlockRef.scrollWidth - this.secondaryBlockRef.offsetWidth
-      });
-
-      if (numberValue < maxPoints) {
-        this.showDecreaseMaxPointsModal({
-          newMaxPoints: numberValue
-        });
-      } else {
-        onScaleChanged(scaleIndex, {
-          maxPoints: numberValue
-        });
-      }
-    };
-
-    this.showDecreaseMaxPointsModal = ({
-      newMaxPoints
-    }) => this.set({
-      showDecreaseMaxPointsDialog: true,
-      newMaxPoints
-    });
-
-    this.hideDecreaseMaxPointsModal = () => this.set({
-      showDecreaseMaxPointsDialog: false,
-      newMaxPoints: undefined
-    });
-
-    this.changeMaxPoints = () => {
-      const {
-        newMaxPoints
-      } = this.state || {};
-      const {
-        scaleIndex,
-        onScaleChanged
-      } = this.props || {};
-
-      if (newMaxPoints) {
-        onScaleChanged(scaleIndex, {
-          maxPoints: newMaxPoints
-        });
-      }
-
-      this.hideDecreaseMaxPointsModal();
-    };
-
-    this.showDeleteScaleModal = () => this.set({
-      showDeleteScaleDialog: true
-    });
-
-    this.hideDeleteScaleModal = () => this.set({
-      showDeleteScaleDialog: false
-    });
-
-    this.deleteScale = () => {
-      const {
-        scaleIndex,
-        onScaleRemoved
-      } = this.props || {};
-      this.hideDeleteScaleModal();
-      onScaleRemoved(scaleIndex);
-    };
-
-    this.showDeleteTraitModal = traitToDeleteIndex => this.set({
-      showDeleteTraitDialog: true,
-      traitToDeleteIndex
-    });
-
-    this.hideDeleteTraitModal = () => this.set({
-      showDeleteTraitDialog: false,
-      traitToDeleteIndex: undefined
-    });
-
-    this.onTraitRemoved = () => {
-      const {
-        traitToDeleteIndex
-      } = this.state;
-      const {
-        scale,
-        scaleIndex,
-        onScaleChanged,
-        minNoOfTraits
-      } = this.props || {};
-      let {
-        traits,
-        traitLabel
-      } = scale || {};
-      if (traitToDeleteIndex < 0 || traitToDeleteIndex >= traits.length) return;
-
-      if (traits.length === minNoOfTraits) {
-        this.set({
-          infoDialogText: `There can't be less than ${minNoOfTraits} ${(traitLabel || 'trait').toLowerCase()}s.`,
-          showInfoDialog: true
-        });
-        return false;
-      }
-
-      traits = [...traits.slice(0, traitToDeleteIndex), ...traits.slice(traitToDeleteIndex + 1)];
-      onScaleChanged(scaleIndex, {
-        traits
-      });
-      this.hideDeleteTraitModal();
-    };
-
-    this.onTraitAdded = () => {
-      const {
-        scale,
-        scaleIndex,
-        onScaleChanged,
-        maxNoOfTraits
-      } = this.props || {};
-      const {
-        traits,
-        scorePointsLabels
-      } = scale || {};
-
-      if (traits.length === maxNoOfTraits) {
-        this.set({
-          infoDialogText: `There can't be more than ${maxNoOfTraits} scales.`,
-          showInfoDialog: true
-        });
-        return false;
-      }
-
-      traits.push({
-        name: '',
-        description: '',
-        standards: [],
-        scorePointsDescriptors: Array.from({
-          length: scorePointsLabels.length
-        }, () => '')
-      });
-      onScaleChanged(scaleIndex, {
-        traits
-      });
-    };
-
-    this.onTraitChanged = (traitIndex, trait) => {
-      const {
-        scale,
-        scaleIndex,
-        onScaleChanged
-      } = this.props || {};
-      const {
-        traits
-      } = scale || {};
-
-      if (traitIndex >= 0 && traitIndex < traits.length) {
-        traits[traitIndex] = trait;
-        onScaleChanged(scaleIndex, {
-          traits
-        });
-      }
-    };
-
-    this.onTraitDropped = (source, newIndex) => {
-      const {
-        scale,
-        scaleIndex,
-        onScaleChanged
-      } = this.props || {};
-      const {
-        traits
-      } = scale || {};
-      const {
-        index: oldIndex
-      } = source;
-      const cup = traits[oldIndex];
-      const remainingTraits = traits.filter((item, index) => index !== oldIndex);
-      const newTraits = [...remainingTraits.slice(0, newIndex), cup, ...remainingTraits.slice(newIndex)];
-      onScaleChanged(scaleIndex, {
-        traits: newTraits
-      });
-    };
-
-    this.decreasePosition = () => {
-      const {
-        currentPosition
-      } = this.state;
-      const decreasedPosition = currentPosition - (currentPosition === AdjustedBlockWidth / 2 ? AdjustedBlockWidth / 2 : AdjustedBlockWidth);
-      this.setState({
-        currentPosition: decreasedPosition,
-        showRight: decreasedPosition < this.secondaryBlockRef.scrollWidth - this.secondaryBlockRef.offsetWidth,
-        showLeft: decreasedPosition > 0
-      });
-    };
-
-    this.increasePosition = () => {
-      const {
-        currentPosition
-      } = this.state;
-      const increasedPosition = currentPosition + (currentPosition === 0 ? AdjustedBlockWidth / 2 : AdjustedBlockWidth);
-      this.setState({
-        currentPosition: increasedPosition,
-        showRight: increasedPosition < this.secondaryBlockRef.scrollWidth - this.secondaryBlockRef.offsetWidth,
-        showLeft: increasedPosition > 0
-      });
-    };
-  }
-
-  componentDidMount() {
-    if (this.state.showRight === null && this.secondaryBlockRef) {
-      this.setState({
-        showRight: this.secondaryBlockRef.scrollWidth - this.secondaryBlockRef.offsetWidth
-      });
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.scale.maxPoints !== this.props.scale.maxPoints || prevProps.showDescription !== this.props.showDescription || prevProps.excludeZero !== this.props.excludeZero) {
-      this.setState({
-        showRight: this.secondaryBlockRef.scrollWidth - this.secondaryBlockRef.offsetWidth
-      });
-    }
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.excludeZero !== this.props.excludeZero || nextProps.showStandards !== this.props.showStandards || nextProps.showDescription !== this.props.showDescription) {
-      this.setState({
-        currentPosition: 0,
-        showLeft: false,
-        showRight: this.secondaryBlockRef && this.secondaryBlockRef.scrollWidth - this.secondaryBlockRef.offsetWidth
-      });
-    }
-  } // Max Points
-
-
-  render() {
-    const {
-      classes,
-      errors,
-      scale,
-      scaleIndex,
-      showStandards,
-      onScaleChanged,
-      excludeZero,
-      showDescription,
-      showLevelTagInput,
-      showScorePointLabels,
-      enableDragAndDrop,
-      spellCheck,
-      width,
-      uploadSoundSupport,
-      maxPointsEnabled,
-      mathMlOptions = {},
-      maxMaxPoints,
-      expandedPluginProps = {},
-      labelPluginProps = {},
-      imageSupport = {}
-    } = this.props || {};
-    const {
-      maxPoints,
-      scorePointsLabels,
-      traitLabel,
-      traits
-    } = scale || {};
-    const {
-      showDecreaseMaxPointsDialog,
-      showDeleteScaleDialog,
-      showDeleteTraitDialog,
-      currentPosition,
-      showRight,
-      showLeft,
-      showInfoDialog,
-      infoDialogText
-    } = this.state;
-    const {
-      traitsErrors,
-      scorePointsErrors
-    } = errors || {};
-    const currentScaleTraitsErrors = traitsErrors && traitsErrors[scaleIndex] || {};
-    const currentScalePointsLabelsErrors = scorePointsErrors && scorePointsErrors[scaleIndex] || {};
-    const scorePointsValues = [];
-    const secondaryBlockWidth = parseInt(width) - DragHandleSpace - PrimaryBlockWidth || 320; // 320 is minWidth
-    // determining the score points values
-
-    for (let pointValue = maxPoints; pointValue >= excludeZero ? 1 : 0; pointValue -= 1) {
-      scorePointsValues.push(pointValue);
-    }
-
-    return /*#__PURE__*/React.createElement("div", {
-      key: `scale-${scaleIndex}`,
-      className: classes.scaleWrapper,
-      ref: ref => {
-        this.scaleWrapper = ref;
-      }
-    }, /*#__PURE__*/React.createElement(TraitsHeader, {
-      setSecondaryBlockRef: ref => {
-        if (ref) {
-          this.secondaryBlockRef = ref;
-        }
-      },
-      key: 'header-key',
-      errors: currentScalePointsLabelsErrors,
-      traitLabel: traitLabel,
-      scorePointsValues: scorePointsValues,
-      scorePointsLabels: scorePointsLabels,
-      onScaleChange: params => onScaleChanged(scaleIndex, params),
-      onTraitLabelChange: label => onScaleChanged(scaleIndex, {
-        traitLabel: label
-      }),
-      showStandards: showStandards,
-      showDescription: showDescription,
-      showLevelTagInput: showLevelTagInput,
-      showScorePointLabels: showScorePointLabels,
-      maxPoints: maxPoints,
-      updateMaxPointsFieldValue: this.updateMaxPointsFieldValue,
-      scaleIndex: scaleIndex,
-      showDeleteScaleModal: this.showDeleteScaleModal,
-      currentPosition: currentPosition,
-      secondaryBlockWidth: secondaryBlockWidth,
-      spellCheck: spellCheck,
-      uploadSoundSupport: uploadSoundSupport,
-      maxPointsEnabled: maxPointsEnabled,
-      mathMlOptions: mathMlOptions,
-      maxMaxPoints: maxMaxPoints,
-      expandedPluginProps: expandedPluginProps,
-      labelPluginProps: labelPluginProps,
-      imageSupport: imageSupport
-    }), traits.map((trait, index) => /*#__PURE__*/React.createElement(StyledSourceAndTarget, {
-      key: index,
-      index: index,
-      error: currentScaleTraitsErrors && currentScaleTraitsErrors[index],
-      trait: trait,
-      traitLabel: traitLabel || 'Trait',
-      scorePointsValues: scorePointsValues,
-      scorePointsLabels: scorePointsLabels,
-      onTraitRemoved: () => this.showDeleteTraitModal(index),
-      onTraitChanged: trait => this.onTraitChanged(index, trait),
-      onTraitDropped: this.onTraitDropped,
-      showStandards: showStandards,
-      showDescription: showDescription,
-      maxPoints: maxPoints,
-      currentPosition: currentPosition,
-      enableDragAndDrop: enableDragAndDrop,
-      secondaryBlockWidth: secondaryBlockWidth,
-      spellCheck: spellCheck,
-      uploadSoundSupport: uploadSoundSupport,
-      mathMlOptions: mathMlOptions,
-      expandedPluginProps: expandedPluginProps,
-      labelPluginProps: labelPluginProps,
-      imageSupport: imageSupport
-    })), /*#__PURE__*/React.createElement(Arrow, {
-      width: `${AdjustedBlockWidth / 2}px`,
-      show: showLeft,
-      onClick: this.decreasePosition,
-      left: `${PrimaryBlockWidth}px`,
-      showLevelTagInput: showLevelTagInput
-    }, /*#__PURE__*/React.createElement(ArrowBackIosIcon, null)), /*#__PURE__*/React.createElement(Arrow, {
-      width: `${AdjustedBlockWidth / 2}px`,
-      show: showRight,
-      onClick: this.increasePosition,
-      showLevelTagInput: showLevelTagInput
-    }, /*#__PURE__*/React.createElement(ArrowForwardIosIcon, null)), /*#__PURE__*/React.createElement(MultiTraitButton, {
-      onClick: this.onTraitAdded
-    }, /*#__PURE__*/React.createElement("div", {
-      dangerouslySetInnerHTML: {
-        __html: `Add ${traitLabel || ' Trait'}`
-      }
-    })), /*#__PURE__*/React.createElement(DecreaseMaxPoints, {
-      open: !!showDecreaseMaxPointsDialog,
-      deleteScorePoints: this.changeMaxPoints,
-      cancel: this.hideDecreaseMaxPointsModal
-    }), /*#__PURE__*/React.createElement(DeleteScale, {
-      open: !!showDeleteScaleDialog,
-      scaleIndex: scaleIndex,
-      deleteScale: this.deleteScale,
-      cancel: this.hideDeleteScaleModal
-    }), /*#__PURE__*/React.createElement(DeleteTrait, {
-      open: !!showDeleteTraitDialog,
-      deleteTrait: this.onTraitRemoved,
-      cancel: this.hideDeleteTraitModal,
-      traitLabel: traitLabel.toLowerCase()
-    }), /*#__PURE__*/React.createElement(InfoDialog, {
-      open: showInfoDialog,
-      text: infoDialogText,
-      onClose: () => this.set({
-        showInfoDialog: false
-      })
-    }));
-  }
-
-}
-Scale.propTypes = {
-  classes: PropTypes.object,
-  errors: PropTypes.object,
-  scale: PropTypes.shape({
-    maxPoints: PropTypes.number,
-    scorePointsLabels: PropTypes.arrayOf(PropTypes.string),
-    traitLabel: PropTypes.string,
-    traits: PropTypes.arrayOf(PropTypes.shape({
-      name: PropTypes.string,
-      standards: PropTypes.arrayOf(PropTypes.string),
-      scorePointsDescriptors: PropTypes.arrayOf(PropTypes.string),
-      description: PropTypes.string
-    }))
-  }),
-  width: PropTypes.string,
-  excludeZero: PropTypes.bool,
-  scaleIndex: PropTypes.number,
-  onScaleChanged: PropTypes.func,
-  onScaleRemoved: PropTypes.func,
-  showStandards: PropTypes.bool,
-  showLevelTagInput: PropTypes.bool,
-  showDescription: PropTypes.bool,
-  uploadSoundSupport: PropTypes.object,
-  showScorePointLabels: PropTypes.bool,
-  enableDragAndDrop: PropTypes.bool,
-  expandedPluginProps: PropTypes.object,
-  labelPluginProps: PropTypes.object
-};
-var Scale$1 = withDragContext(withStyles(styles$1)(Scale));
-
-const {
-  Panel,
-  toggle
-} = settings;
-const MIN_WIDTH = '650px';
-
-const styles = theme => ({
-  design: {
-    fontFamily: 'Cerebri Sans',
-    fontSize: theme.typography.fontSize
-  }
-});
-
-const ShowModal = ({
-  showExcludeZeroDialog,
-  excludeZero,
-  changeExcludeZero,
-  cancel
-}) => {
-  if (showExcludeZeroDialog && !excludeZero) {
-    return /*#__PURE__*/React.createElement(ExcludeZeroDialog, {
-      open: showExcludeZeroDialog && !excludeZero,
-      changeExcludeZero: changeExcludeZero,
-      cancel: cancel
-    });
-  } else if (showExcludeZeroDialog && excludeZero) {
-    return /*#__PURE__*/React.createElement(IncludeZeroDialog, {
-      open: showExcludeZeroDialog && excludeZero,
-      changeExcludeZero: changeExcludeZero,
-      cancel: cancel
-    });
-  } else {
-    return null;
-  }
-};
-
-ShowModal.propTypes = {
-  showExcludeZeroDialog: PropTypes.bool,
-  excludeZero: PropTypes.bool,
-  changeExcludeZero: PropTypes.func,
-  cancel: PropTypes.func
-};
-class Main extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      showDecreaseMaxPointsDialog: false,
-      showDeleteScaleDialog: false,
-      showDeleteTraitDialog: false,
-      showExcludeZeroDialog: false,
-      showInfoDialog: false,
-      infoDialogText: '',
-      adjustedWidth: MIN_WIDTH,
-      initialUpdateCompleted: false // flag to track the initial update of the div width
-
-    };
-    this.updateDivWidthDebounced = debounce(() => this.updateDivWidth(), 50);
-
-    this.onScaleAdded = () => {
-      var _scales$;
-
-      const {
-        model,
-        onModelChanged,
-        configuration
-      } = this.props;
-      let {
-        scales,
-        excludeZero
-      } = model || {};
-      const {
-        maxNoOfScales
-      } = configuration || {};
-      let {
-        defaultTraitLabel
-      } = configuration || '';
-
-      if (!scales.length) {
-        scales = [];
-      } // if no default trait label is defined, take the trait label of the first scale
-
-
-      defaultTraitLabel = typeof defaultTraitLabel === 'string' ? defaultTraitLabel : ((_scales$ = scales[0]) == null ? void 0 : _scales$.traitLabel) || '';
-
-      if (scales.length === maxNoOfScales) {
-        this.set({
-          infoDialogText: `There can't be more than ${maxNoOfScales} scales.`,
-          showInfoDialog: true
-        });
-        return false;
-      }
-
-      scales.push({
-        maxPoints: 1,
-        scorePointsLabels: excludeZero ? [''] : ['', ''],
-        traitLabel: defaultTraitLabel,
-        traits: []
-      });
-      onModelChanged(_extends({}, model, {
-        scales
-      }));
-    };
-
-    this.onScaleChanged = (scaleIndex, params) => {
-      const {
-        model,
-        onModelChanged
-      } = this.props;
-      let scales = cloneDeep((model || {}).scales);
-      if (scaleIndex < 0 || scaleIndex >= scales.length || isEmpty(params)) return false;
-      Object.keys(params).forEach(key => {
-        scales[scaleIndex][key] = params[key];
-      });
-
-      if (model.excludeZero && params.maxPoints === 1) {
-        // excludeZero should be false and disabled when maxPoints is 1 for any scale
-        model.excludeZero = false;
-        scales = addOrRemoveScaleColumn(scales, excludeZeroTypes.add0);
-      }
-
-      onModelChanged(_extends({}, model, {
-        scales
-      }));
-    };
-
-    this.onScaleRemoved = scaleIndex => {
-      const {
-        model,
-        onModelChanged,
-        configuration
-      } = this.props;
-      let {
-        scales
-      } = model || {};
-      const {
-        minNoOfScales
-      } = configuration || {};
-      if (scaleIndex < 0 || scaleIndex >= scales.length) return false;
-
-      if (scales.length === minNoOfScales) {
-        this.set({
-          infoDialogText: `There can't be less than ${minNoOfScales} scales.`,
-          showInfoDialog: true
-        });
-        return false;
-      }
-
-      scales = [...scales.slice(0, scaleIndex), ...scales.slice(scaleIndex + 1)];
-      onModelChanged(_extends({}, model, {
-        scales
-      }));
-    };
-
-    this.onHalfScoringChanged = () => {
-      const {
-        model,
-        onModelChanged
-      } = this.props;
-      let {
-        halfScoring
-      } = model || {};
-      onModelChanged(_extends({}, model, {
-        halfScoring: !halfScoring
-      }));
-    };
-
-    this.onVisibleToStudentChanged = () => {
-      const {
-        model,
-        onModelChanged
-      } = this.props;
-      let {
-        visibleToStudent
-      } = model || {};
-      onModelChanged(_extends({}, model, {
-        visibleToStudent: !visibleToStudent
-      }));
-    };
-
-    this.set = newState => this.setState(newState);
-
-    this.changeShowScorePointLabels = () => {
-      const {
-        model,
-        onModelChanged
-      } = this.props || {};
-      let {
-        pointLabels
-      } = model || {};
-      pointLabels = !pointLabels;
-      onModelChanged(_extends({}, model, {
-        pointLabels
-      }));
-    };
-
-    this.changeShowDescription = () => {
-      const {
-        model,
-        onModelChanged
-      } = this.props || {};
-      let {
-        description
-      } = model || {};
-      description = !description;
-      onModelChanged(_extends({}, model, {
-        description
-      }));
-    };
-
-    this.changeShowStandards = () => {
-      const {
-        model,
-        onModelChanged
-      } = this.props || {};
-      let {
-        standards
-      } = model || {};
-      standards = !standards;
-      onModelChanged(_extends({}, model, {
-        standards
-      }));
-    };
-
-    this.showToggleExcludeZeroModal = () => this.set({
-      showExcludeZeroDialog: true
-    });
-
-    this.hideToggleExcludeZeroModal = () => {
-      this.set({
-        showExcludeZeroDialog: false
-      });
-    };
-
-    this.onCloseInfoDialog = () => this.set({
-      showInfoDialog: false
-    });
-
-    this.changeExcludeZero = excludeZeroType => {
-      const {
-        model,
-        onModelChanged
-      } = this.props || {};
-      const {
-        scales
-      } = model || {};
-      let {
-        excludeZero
-      } = model || {};
-      if (!scales || !scales.length) return;
-      excludeZero = !excludeZero;
-      const newScales = addOrRemoveScaleColumn(scales, excludeZeroType);
-      onModelChanged(_extends({}, model, {
-        scales: newScales,
-        excludeZero
-      }));
-      this.hideToggleExcludeZeroModal();
-    };
-
-    this.onModelChanged = (updatedModel, updatedProperty) => {
-      const {
-        onModelChanged
-      } = this.props || {};
-
-      if (updatedProperty === 'excludeZero') {
-        this.showToggleExcludeZeroModal();
-      } else {
-        onModelChanged(updatedModel);
-      }
-    };
-
-    this.divRef = /*#__PURE__*/React.createRef();
-    this.updateDivWidth = this.updateDivWidth.bind(this);
-  }
-
-  componentDidMount() {
-    window.addEventListener('resize', this.updateDivWidthDebounced);
-    window.addEventListener('load', this.updateDivWidth); // delay updateDivWidth to avoid having this.divRef.current = null at first load
-
-    setTimeout(this.updateDivWidth, 0);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.updateDivWidthDebounced);
-    window.removeEventListener('load', this.updateDivWidth);
-  }
-
-  componentDidUpdate() {
-    if (!this.state.initialUpdateCompleted) {
-      this.updateDivWidth();
-      this.setState({
-        initialUpdateCompleted: true
-      });
-    }
-  }
-
-  updateDivWidth() {
-    if (this.divRef && this.divRef.current) {
-      const divWidth = this.divRef.current.offsetWidth;
-
-      if (divWidth !== this.state.adjustedWidth) {
-        this.set({
-          adjustedWidth: divWidth
-        });
-      }
-    }
-  }
-
-  render() {
-    const {
-      model,
-      configuration,
-      onConfigurationChanged,
-      uploadSoundSupport,
-      imageSupport
-    } = this.props || {};
-    const {
-      addScale,
-      baseInputConfiguration = {},
-      dragAndDrop,
-      contentDimensions = {},
-      showDescription,
-      showExcludeZero,
-      showLevelTagInput,
-      showStandards,
-      showHalfScoring,
-      showMaxPoint,
-      showScorePointLabels,
-      showVisibleToStudent,
-      spellCheck = {},
-      settingsPanelDisabled,
-      maxNoOfTraits,
-      minNoOfTraits,
-      width,
-      mathMlOptions = {},
-      maxMaxPoints,
-      expandedInput = {},
-      labelInput = {}
-    } = configuration || {};
-    const {
-      errors,
-      extraCSSRules,
-      scales,
-      excludeZero,
-      description,
-      pointLabels,
-      standards,
-      spellCheckEnabled,
-      maxPointsEnabled,
-      addScaleEnabled
-    } = model || {};
-    const {
-      showExcludeZeroDialog,
-      showInfoDialog,
-      infoDialogText,
-      adjustedWidth
-    } = this.state || {}; // excludeZero should be false and disabled when maxPoints is 1 for any scale
-
-    const disabledExcludeZero = scales == null ? void 0 : scales.some(scale => scale.maxPoints === 1);
-    const panelSettings = {
-      standards: showStandards.settings && toggle(showStandards.label),
-      'showLevelTagInput.enabled': showLevelTagInput.settings && toggle(showLevelTagInput.label, true),
-      visibleToStudent: showVisibleToStudent.settings && toggle(showVisibleToStudent.label),
-      excludeZero: showExcludeZero.settings && toggle(showExcludeZero.label, false, disabledExcludeZero),
-      halfScoring: showHalfScoring.settings && toggle(showHalfScoring.label),
-      'dragAndDrop.enabled': dragAndDrop.settings && toggle(dragAndDrop.label, true)
-    };
-    const panelProperties = {
-      description: showDescription.settings && toggle(showDescription.label),
-      pointLabels: showScorePointLabels.settings && toggle(showScorePointLabels.label),
-      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
-      maxPointsEnabled: showMaxPoint.settings && toggle(showMaxPoint.label),
-      addScaleEnabled: addScale.settings && toggle(addScale.label)
-    };
-
-    const getPluginProps = props => {
-      return Object.assign(_extends({}, baseInputConfiguration), props || {});
-    };
-
-    return /*#__PURE__*/React.createElement(layout.ConfigLayout, {
-      extraCSSRules: extraCSSRules,
-      dimensions: contentDimensions,
-      hideSettings: settingsPanelDisabled,
-      settings: /*#__PURE__*/React.createElement(Panel, {
-        model: model,
-        onChangeModel: this.onModelChanged,
-        configuration: configuration,
-        onChangeConfiguration: onConfigurationChanged,
-        groups: {
-          Settings: panelSettings,
-          Properties: panelProperties
-        },
-        modal: /*#__PURE__*/React.createElement(ShowModal, {
-          showExcludeZeroDialog: showExcludeZeroDialog,
-          excludeZero: excludeZero,
-          changeExcludeZero: this.changeExcludeZero,
-          cancel: this.hideToggleExcludeZeroModal
-        })
-      })
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        width: '100%'
-      },
-      ref: this.divRef
-    }), /*#__PURE__*/React.createElement("div", {
-      style: {
-        width: width || adjustedWidth
-      }
-    }, (scales || []).map((scale, scaleIndex) => /*#__PURE__*/React.createElement(Scale$1, _extends({
-      key: `scale-${scaleIndex}`,
-      scale: scale,
-      scaleIndex: scaleIndex,
-      errors: errors,
-      onScaleRemoved: this.onScaleRemoved,
-      onScaleChanged: this.onScaleChanged,
-      showStandards: standards,
-      showScorePointLabels: pointLabels,
-      showDescription: description,
-      showLevelTagInput: showLevelTagInput.enabled,
-      excludeZero: excludeZero,
-      enableDragAndDrop: dragAndDrop.enabled,
-      spellCheck: spellCheckEnabled,
-      width: adjustedWidth,
-      uploadSoundSupport: uploadSoundSupport,
-      maxPointsEnabled: maxPointsEnabled,
-      maxNoOfTraits: maxNoOfTraits,
-      minNoOfTraits: minNoOfTraits,
-      imageSupport: imageSupport
-    }, this.props, {
-      classes: {},
-      mathMlOptions: mathMlOptions,
-      maxMaxPoints: maxMaxPoints,
-      expandedPluginProps: getPluginProps(expandedInput == null ? void 0 : expandedInput.inputConfiguration),
-      labelPluginProps: getPluginProps(labelInput == null ? void 0 : labelInput.inputConfiguration)
-    }))), addScaleEnabled && /*#__PURE__*/React.createElement(MultiTraitButton, {
-      onClick: this.onScaleAdded
-    }, "Add Scale")), /*#__PURE__*/React.createElement(InfoDialog, {
-      open: showInfoDialog,
-      text: infoDialogText,
-      onClose: () => this.set({
-        showInfoDialog: false
-      })
-    }));
-  }
-
-}
-Main.propTypes = {
-  classes: PropTypes.object,
-  model: PropTypes.object,
-  uploadSoundSupport: PropTypes.object,
-  configuration: PropTypes.object,
-  onModelChanged: PropTypes.func,
-  onConfigurationChanged: PropTypes.func,
-  imageSupport: PropTypes.shape({
-    add: PropTypes.func.isRequired,
-    delete: PropTypes.func.isRequired
-  })
-};
-var Main$1 = withDragContext(withStyles(styles)(Main));
-
-const modelWithDefaults = m => _extends({}, defaults.model, m);
-
-const configurationWithDefaults = c => _extends({}, defaults.configuration, c);
-
-class MultiTraitRubricElement extends HTMLElement {
-  constructor() {
-    super();
-
-    this.updateModelAccordingToReceivedProps = m => {
-      const currentModel = _extends({}, this._model);
-
-      if (!m) {
-        return currentModel;
-      }
-
-      const validatedModel = _extends({}, m);
-
-      const {
-        scales,
-        excludeZero
-      } = validatedModel || {};
-      (scales || []).forEach(scale => {
-        if (!scale) {
-          scale = {
-            scorePointsLabels: [],
-            traits: []
-          };
-        }
-
-        const {
-          maxPoints
-        } = scale || {};
-        scale.scorePointsLabels = [...(scale.scorePointsLabels || [])];
-        scale.traits = [...(scale.traits || [])];
-        const howManyScorePointLabelsShouldHave = excludeZero ? maxPoints : maxPoints + 1;
-        const howManyScorePointLabelsItHas = scale.scorePointsLabels.length;
-
-        if (howManyScorePointLabelsItHas !== howManyScorePointLabelsShouldHave) {
-          if (howManyScorePointLabelsItHas < howManyScorePointLabelsShouldHave) {
-            for (let i = 0; i < howManyScorePointLabelsShouldHave - howManyScorePointLabelsItHas; i++) {
-              scale.scorePointsLabels.push('');
-            }
-          } else {
-            scale.scorePointsLabels = scale.scorePointsLabels.slice(0, howManyScorePointLabelsShouldHave);
-          }
-        }
-
-        (scale.traits || []).forEach(trait => {
-          if (!trait) {
-            trait = {
-              scorePointsDescriptors: []
-            };
-          }
-
-          trait.scorePointsDescriptors = [...(trait.scorePointsDescriptors || [])];
-          const howManyScorePointDescriptorsItHas = trait.scorePointsDescriptors.length;
-
-          if (howManyScorePointDescriptorsItHas !== howManyScorePointLabelsShouldHave) {
-            if (howManyScorePointDescriptorsItHas < howManyScorePointLabelsShouldHave) {
-              for (let i = 0; i < howManyScorePointLabelsShouldHave - howManyScorePointDescriptorsItHas; i++) {
-                trait.scorePointsDescriptors.push('');
-              }
-            } else {
-              trait.scorePointsDescriptors = trait.scorePointsDescriptors.slice(0, howManyScorePointLabelsShouldHave);
-            }
-          }
-        });
-      });
-
-      if (validatedModel.excludeZero) {
-        // check if any scale has maxPoints set to 1
-        const shouldAddColumn0 = validatedModel.scales.some(scale => scale.maxPoints === 1);
-
-        if (shouldAddColumn0) {
-          // excludeZero should be false and disabled when maxPoints is 1
-          validatedModel.excludeZero = false; // add column 0 for all scales
-
-          validatedModel.scales = addOrRemoveScaleColumn(scales, excludeZeroTypes.add0);
-        }
-      }
-
-      return validatedModel;
-    };
-
-    this.onModelChanged = m => {
-      this._model = this.updateModelAccordingToReceivedProps(modelWithDefaults(m));
-
-      this._render();
-
-      this.dispatchEvent(new ModelUpdatedEvent(this._model, false));
-    };
-
-    this.onConfigurationChanged = c => {
-      this._configuration = configurationWithDefaults(c);
-
-      this._render();
-    };
-
-    this._model = modelWithDefaults();
-    this._configuration = configurationWithDefaults();
-  }
-
-  set model(m) {
-    this._model = this.updateModelAccordingToReceivedProps(modelWithDefaults(m));
-
-    this._render();
-  }
-
-  set configuration(c) {
-    this._configuration = configurationWithDefaults(c);
-
-    this._render();
-  }
-
-  insertSound(handler) {
-    this.dispatchEvent(new InsertSoundEvent(handler));
-  }
-
-  onDeleteSound(src, done) {
-    this.dispatchEvent(new DeleteSoundEvent(src, done));
-  }
-
-  insertImage(handler) {
-    this.dispatchEvent(new InsertImageEvent(handler));
-  }
-
-  onDeleteImage(src, done) {
-    this.dispatchEvent(new DeleteImageEvent(src, done));
-  }
-
-  _render() {
-    if (this._model) {
-      let element = /*#__PURE__*/React.createElement(Main$1, {
-        model: this._model,
-        configuration: this._configuration,
-        onModelChanged: this.onModelChanged,
-        onConfigurationChanged: this.onConfigurationChanged,
-        uploadSoundSupport: {
-          add: this.insertSound.bind(this),
-          delete: this.onDeleteSound.bind(this)
-        },
-        imageSupport: {
-          add: this.insertImage.bind(this),
-          delete: this.onDeleteImage.bind(this)
-        }
-      });
-      ReactDOM.render(element, this);
-    }
-  }
-
-}
-
-export { MultiTraitRubricElement as default };
-//# sourceMappingURL=configure.js.map