@pie-lib/rubric 0.28.3-next.2 → 0.28.3-next.205

package/lib/authoring.js

@@ -1,254 +1,240 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.RubricType = exports.RawAuthoring = exports.PointConfig = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _OutlinedInput = _interopRequireDefault(require("@material-ui/core/OutlinedInput"));
-
-var _InputLabel = _interopRequireDefault(require("@material-ui/core/InputLabel"));
-
-var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
-
-var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
-
-var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
-
+var _styles = require("@mui/material/styles");
+var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
+var _OutlinedInput = _interopRequireDefault(require("@mui/material/OutlinedInput"));
+var _Select = _interopRequireDefault(require("@mui/material/Select"));
+var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _times = _interopRequireDefault(require("lodash/times"));
-
-var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
-
-var _FormGroup = _interopRequireDefault(require("@material-ui/core/FormGroup"));
-
-var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
-
-var _grey = _interopRequireDefault(require("@material-ui/core/colors/grey"));
-
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
-
-var _DragIndicator = _interopRequireDefault(require("@material-ui/icons/DragIndicator"));
-
-var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
-
-var _reactBeautifulDnd = require("react-beautiful-dnd");
-
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
+var _FormGroup = _interopRequireDefault(require("@mui/material/FormGroup"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _DragIndicator = _interopRequireDefault(require("@mui/icons-material/DragIndicator"));
+var _dnd = require("@hello-pangea/dnd");
 var _debug = _interopRequireDefault(require("debug"));
-
 var _takeRight = _interopRequireDefault(require("lodash/takeRight"));
-
 var _pointMenu = _interopRequireDefault(require("./point-menu"));
-
 var _range = _interopRequireDefault(require("lodash/range"));
-
+var _editableHtmlTipTap = _interopRequireDefault(require("@pie-lib/editable-html-tip-tap"));
 var _configUi = require("@pie-lib/config-ui");
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-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; } }
-
+var _colors = require("@mui/material/colors");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var log = (0, _debug["default"])('pie-lib:rubric:authoring');
-
 var reorder = function reorder(list, startIndex, endIndex) {
   var result = Array.from(list);
-
   var _result$splice = result.splice(startIndex, 1),
-      _result$splice2 = (0, _slicedToArray2["default"])(_result$splice, 1),
-      removed = _result$splice2[0];
-
+    _result$splice2 = (0, _slicedToArray2["default"])(_result$splice, 1),
+    removed = _result$splice2[0];
   result.splice(endIndex, 0, removed);
   return result;
 };
-
-var RubricType = _propTypes["default"].shape({
+var RubricType = exports.RubricType = _propTypes["default"].shape({
   excludeZero: _propTypes["default"].bool,
   points: _propTypes["default"].arrayOf(_propTypes["default"].string),
   sampleAnswers: _propTypes["default"].arrayOf(_propTypes["default"].string),
   maxPoints: _propTypes["default"].number,
   rubriclessInstruction: _propTypes["default"].string
 });
-
-exports.RubricType = RubricType;
-var MaxPoints = (0, _styles.withStyles)(function (theme) {
-  return {
-    formControl: {
-      minWidth: '120px',
-      margin: theme.spacing.unit
-    }
-  };
-})(function (props) {
+var MaxPoints = function MaxPoints(props) {
   var value = props.value,
-      _onChange = props.onChange,
-      max = props.max,
-      classes = props.classes;
+    _onChange = props.onChange,
+    max = props.max;
+  var labelId = 'max-points-label';
   return /*#__PURE__*/_react["default"].createElement(_FormControl["default"], {
-    className: classes.formControl,
+    sx: {
+      minWidth: 120,
+      m: 1
+    },
     variant: "outlined"
   }, /*#__PURE__*/_react["default"].createElement(_InputLabel["default"], {
-    width: 100,
-    htmlFor: "..."
+    id: labelId
   }, "Max Points"), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    labelId: labelId,
+    label: "Max Points",
     value: value,
     onChange: function onChange(e) {
       return _onChange(e.target.value);
     },
     input: /*#__PURE__*/_react["default"].createElement(_OutlinedInput["default"], {
-      labelWidth: 80
-    })
+      label: "Max Points"
+    }),
+    MenuProps: {
+      transitionDuration: {
+        enter: 225,
+        exit: 195
+      }
+    }
   }, (0, _range["default"])(1, max + 1).map(function (v) {
     return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
       key: "".concat(v),
       value: v
     }, v);
   })));
-}); // if the value is null or 'null', the Sample Answer input field for that point will not be dispalyed
-// if the value is '', the Sample Answer input field will be empty
+};
 
+// if the value is null or 'null', the Sample Answer input field for that point will not be dispalyed
+// if the value is '', the Sample Answer input field will be empty
 var checkSampleAnswer = function checkSampleAnswer(sampleAnswer) {
   return sampleAnswer === null || sampleAnswer === 'null';
 };
-
-var PointConfig = (0, _styles.withStyles)(function (theme) {
+var Row = (0, _styles.styled)('div')(function () {
   return {
-    pointConfig: {},
-    row: {
-      display: 'flex',
-      width: '100%',
-      position: 'relative'
-    },
-    editor: {
-      width: '100%',
-      backgroundColor: "".concat(theme.palette.common.white, " !important")
-    },
-    dragIndicator: {
-      paddingTop: theme.spacing.unit,
-      color: _grey["default"][500]
-    },
-    pointsLabel: {
-      color: _grey["default"][500],
-      paddingBottom: theme.spacing.unit,
-      textTransform: 'uppercase'
-    },
-    sampleAnswersEditor: {
-      paddingLeft: theme.spacing.unit * 3
-    },
-    pointMenu: {
-      position: 'absolute',
-      right: 0
-    },
-    errorText: {
-      fontSize: theme.typography.fontSize - 2,
-      color: theme.palette.error.main,
-      paddingLeft: theme.spacing.unit * 3,
-      paddingTop: theme.spacing.unit
-    }
+    display: 'flex',
+    width: '100%',
+    position: 'relative'
+  };
+});
+var EditorDiv = (0, _styles.styled)('div')(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    width: '100%',
+    backgroundColor: "".concat(theme.palette.common.white)
+  };
+});
+var DragIndicatorStyled = (0, _styles.styled)(_DragIndicator["default"])(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    paddingTop: theme.spacing(1),
+    color: _colors.grey[500]
+  };
+});
+var PointsLabel = (0, _styles.styled)(_Typography["default"])(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    color: _colors.grey[500],
+    paddingBottom: theme.spacing(1),
+    textTransform: 'uppercase'
   };
-})(function (props) {
+});
+var SampleAnswersEditor = (0, _styles.styled)('div')(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    paddingLeft: theme.spacing(3)
+  };
+});
+var ErrorText = (0, _styles.styled)('div')(function (_ref5) {
+  var theme = _ref5.theme;
+  return {
+    fontSize: theme.typography.fontSize - 2,
+    color: theme.palette.error.main,
+    paddingLeft: theme.spacing(3),
+    paddingTop: theme.spacing(1)
+  };
+});
+var PointMenuWrapper = (0, _styles.styled)('div')(function () {
+  return {
+    position: 'absolute',
+    right: 0
+  };
+});
+var PointConfig = exports.PointConfig = function PointConfig(props) {
   var points = props.points,
-      content = props.content,
-      classes = props.classes,
-      sampleAnswer = props.sampleAnswer,
-      _props$mathMlOptions = props.mathMlOptions,
-      mathMlOptions = _props$mathMlOptions === void 0 ? {} : _props$mathMlOptions,
-      error = props.error,
-      _props$pluginOpts = props.pluginOpts,
-      pluginOpts = _props$pluginOpts === void 0 ? {} : _props$pluginOpts;
+    content = props.content,
+    sampleAnswer = props.sampleAnswer,
+    _props$mathMlOptions = props.mathMlOptions,
+    mathMlOptions = _props$mathMlOptions === void 0 ? {} : _props$mathMlOptions,
+    error = props.error,
+    _props$pluginOpts = props.pluginOpts,
+    pluginOpts = _props$pluginOpts === void 0 ? {} : _props$pluginOpts;
   var pointsLabel = "".concat(points, " ").concat(points <= 1 ? 'pt' : 'pts');
   var showSampleAnswer = checkSampleAnswer(sampleAnswer);
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.pointConfig
-  }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-    variant: "overline",
-    className: classes.pointsLabel
-  }, pointsLabel), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.row
-  }, /*#__PURE__*/_react["default"].createElement(_DragIndicator["default"], {
-    className: classes.dragIndicator
-  }), /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-    className: classes.editor,
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(PointsLabel, {
+    variant: "overline"
+  }, pointsLabel), /*#__PURE__*/_react["default"].createElement(Row, null, /*#__PURE__*/_react["default"].createElement(DragIndicatorStyled, null), /*#__PURE__*/_react["default"].createElement(EditorDiv, null, /*#__PURE__*/_react["default"].createElement(_editableHtmlTipTap["default"], {
     error: error,
     pluginProps: pluginOpts,
     markup: content,
     onChange: props.onChange,
     mathMlOptions: mathMlOptions
-  }), /*#__PURE__*/_react["default"].createElement(_pointMenu["default"], {
-    classes: {
-      icon: classes.pointMenu
-    },
+  })), /*#__PURE__*/_react["default"].createElement(PointMenuWrapper, null, /*#__PURE__*/_react["default"].createElement(_pointMenu["default"], {
     showSampleAnswer: showSampleAnswer,
     onChange: props.onMenuChange
-  })), error && /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.errorText
-  }, error), !showSampleAnswer && /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.sampleAnswersEditor
-  }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-    variant: "overline",
-    className: classes.dragIndicator
-  }, "Sample Response"), /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-    className: classes.editor,
+  }))), error && /*#__PURE__*/_react["default"].createElement(ErrorText, null, error), !showSampleAnswer && /*#__PURE__*/_react["default"].createElement(SampleAnswersEditor, null, /*#__PURE__*/_react["default"].createElement(DragIndicatorStyled, {
+    as: _Typography["default"],
+    variant: "overline"
+  }, "Sample Response"), /*#__PURE__*/_react["default"].createElement(EditorDiv, null, /*#__PURE__*/_react["default"].createElement(_editableHtmlTipTap["default"], {
     markup: sampleAnswer,
     pluginProps: pluginOpts,
     onChange: props.onSampleChange,
     mathMlOptions: mathMlOptions
-  })));
+  }))));
+};
+var Container = (0, _styles.styled)('div')(function (_ref6) {
+  var theme = _ref6.theme;
+  return {
+    backgroundColor: _colors.grey[200],
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: _colors.grey[300],
+    padding: theme.spacing(2),
+    margin: theme.spacing(1)
+  };
 });
-exports.PointConfig = PointConfig;
-
-var RawAuthoring = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(RawAuthoring, _React$Component);
-
-  var _super = _createSuper(RawAuthoring);
-
+var InputContainerWrapper = (0, _styles.styled)('div')(function (_ref7) {
+  var theme = _ref7.theme;
+  return {
+    width: '100%',
+    paddingTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+    '& MuiFormControl-root': {
+      width: '100%'
+    }
+  };
+});
+var Rubricless = (0, _styles.styled)('div')(function () {
+  return {
+    display: 'none'
+  };
+});
+var ConfigHolder = (0, _styles.styled)('div')(function (_ref8) {
+  var theme = _ref8.theme;
+  return {
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1)
+  };
+});
+var RubricTitle = (0, _styles.styled)(_Typography["default"])(function (_ref9) {
+  var theme = _ref9.theme;
+  return {
+    paddingLeft: theme.spacing(1),
+    margin: theme.spacing(1)
+  };
+});
+var RawAuthoring = exports.RawAuthoring = /*#__PURE__*/function (_React$Component) {
   function RawAuthoring() {
     var _this;
-
     (0, _classCallCheck2["default"])(this, RawAuthoring);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dragEnd", function (result) {
+    _this = _callSuper(this, RawAuthoring, [].concat(args));
+    (0, _defineProperty2["default"])(_this, "dragEnd", function (result) {
       if (!result.destination) {
         return;
       }
-
       var _this$props = _this.props,
-          value = _this$props.value,
-          onChange = _this$props.onChange;
+        value = _this$props.value,
+        onChange = _this$props.onChange;
       var points = reorder(value.points, result.source.index, result.destination.index);
       var sampleAnswers = reorder(value.sampleAnswers, result.source.index, result.destination.index);
       onChange(_objectSpread(_objectSpread({}, value), {}, {
@@ -256,23 +242,22 @@ var RawAuthoring = /*#__PURE__*/function (_React$Component) {
         sampleAnswers: sampleAnswers
       }));
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeRubriclessInstruction", function (input) {
+    (0, _defineProperty2["default"])(_this, "changeRubriclessInstruction", function (input) {
       var _this$props2 = _this.props,
-          value = _this$props2.value,
-          onChange = _this$props2.onChange;
+        value = _this$props2.value,
+        onChange = _this$props2.onChange;
       onChange(_objectSpread(_objectSpread({}, value), {}, {
         rubriclessInstruction: input
       }));
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeMaxPoints", function (maxPoints) {
+    (0, _defineProperty2["default"])(_this, "changeMaxPoints", function (maxPoints) {
       var _this$props3 = _this.props,
-          value = _this$props3.value,
-          onChange = _this$props3.onChange,
-          rubricless = _this$props3.rubricless;
+        value = _this$props3.value,
+        onChange = _this$props3.onChange,
+        rubricless = _this$props3.rubricless;
       var currentMax = value.points.length - 1;
       log('current', currentMax, 'new: ', maxPoints);
       var points, sampleAnswers;
-
       if (maxPoints > currentMax) {
         points = (0, _times["default"])(maxPoints - currentMax).map(function () {
           return '';
@@ -281,13 +266,11 @@ var RawAuthoring = /*#__PURE__*/function (_React$Component) {
           return null;
         }).concat(value.sampleAnswers);
       }
-
       if (maxPoints < currentMax) {
         log('less than');
         points = (0, _takeRight["default"])(value.points, maxPoints + 1);
         sampleAnswers = (0, _takeRight["default"])(value.sampleAnswers, maxPoints + 1);
       }
-
       if (points && !rubricless) {
         onChange(_objectSpread(_objectSpread({}, value), {}, {
           points: points,
@@ -300,31 +283,29 @@ var RawAuthoring = /*#__PURE__*/function (_React$Component) {
         }));
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeContent", function (index, content, type) {
+    (0, _defineProperty2["default"])(_this, "changeContent", function (index, content, type) {
       // type could be 'points' or 'sampleAnswers'
       log("changeModel[".concat(type, "]:"), index, content);
-
       if (type !== 'points' && type !== 'sampleAnswers') {
         return;
       }
-
       var _this$props4 = _this.props,
-          value = _this$props4.value,
-          onChange = _this$props4.onChange;
+        value = _this$props4.value,
+        onChange = _this$props4.onChange;
       var items = value[type] && Array.from(value[type]);
       items.splice(index, 1, content);
       log("changeModel[".concat(type, "]:"), items);
       onChange(_objectSpread(_objectSpread({}, value), {}, (0, _defineProperty2["default"])({}, type, items)));
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "excludeZeros", function () {
+    (0, _defineProperty2["default"])(_this, "excludeZeros", function () {
       var _this$props5 = _this.props,
-          value = _this$props5.value,
-          onChange = _this$props5.onChange;
+        value = _this$props5.value,
+        onChange = _this$props5.onChange;
       onChange(_objectSpread(_objectSpread({}, value), {}, {
         excludeZero: !value.excludeZero
       }));
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "shouldRenderPoint", function (index, value) {
+    (0, _defineProperty2["default"])(_this, "shouldRenderPoint", function (index, value) {
       if (!value.excludeZero) {
         return true;
       } else {
@@ -333,15 +314,13 @@ var RawAuthoring = /*#__PURE__*/function (_React$Component) {
         } else if (index === value.points.length - 1) {
           return false;
         }
-
         return true;
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onPointMenuChange", function (index, clickedItem) {
+    (0, _defineProperty2["default"])(_this, "onPointMenuChange", function (index, clickedItem) {
       if (clickedItem === 'sample') {
         var value = _this.props.value;
         var sampleAnswers = Array.from(value.sampleAnswers || []);
-
         if (checkSampleAnswer(sampleAnswers[index])) {
           // an empty string will display an empty Sample Answer input field
           _this.changeContent(index, '', 'sampleAnswers');
@@ -353,59 +332,49 @@ var RawAuthoring = /*#__PURE__*/function (_React$Component) {
     });
     return _this;
   }
-
-  (0, _createClass2["default"])(RawAuthoring, [{
+  (0, _inherits2["default"])(RawAuthoring, _React$Component);
+  return (0, _createClass2["default"])(RawAuthoring, [{
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var _this$props6 = this.props,
-          classes = _this$props6.classes,
-          className = _this$props6.className,
-          value = _this$props6.value,
-          _this$props6$mathMlOp = _this$props6.mathMlOptions,
-          mathMlOptions = _this$props6$mathMlOp === void 0 ? {} : _this$props6$mathMlOp,
-          _this$props6$config = _this$props6.config,
-          config = _this$props6$config === void 0 ? {} : _this$props6$config,
-          _this$props6$rubricle = _this$props6.rubricless,
-          rubricless = _this$props6$rubricle === void 0 ? false : _this$props6$rubricle,
-          _this$props6$pluginOp = _this$props6.pluginOpts,
-          pluginOpts = _this$props6$pluginOp === void 0 ? {} : _this$props6$pluginOp;
-
-      var _ref = value || {},
-          _ref$excludeZeroEnabl = _ref.excludeZeroEnabled,
-          excludeZeroEnabled = _ref$excludeZeroEnabl === void 0 ? true : _ref$excludeZeroEnabl,
-          _ref$maxPointsEnabled = _ref.maxPointsEnabled,
-          maxPointsEnabled = _ref$maxPointsEnabled === void 0 ? true : _ref$maxPointsEnabled,
-          _ref$errors = _ref.errors,
-          errors = _ref$errors === void 0 ? {} : _ref$errors,
-          _ref$rubriclessInstru = _ref.rubriclessInstructionEnabled,
-          rubriclessInstructionEnabled = _ref$rubriclessInstru === void 0 ? false : _ref$rubriclessInstru,
-          _ref$maxPoints = _ref.maxPoints,
-          maxPoints = _ref$maxPoints === void 0 ? 10 : _ref$maxPoints; // rubric will contain a max value for maxPoints
-
-
-      var _ref2 = config || {},
-          _ref2$rubriclessInstr = _ref2.rubriclessInstruction,
-          rubriclessInstruction = _ref2$rubriclessInstr === void 0 ? {} : _ref2$rubriclessInstr,
-          _ref2$maxMaxPoints = _ref2.maxMaxPoints,
-          maxMaxPoints = _ref2$maxMaxPoints === void 0 ? 10 : _ref2$maxMaxPoints;
-
-      var _ref3 = errors || {},
-          pointsDescriptorsErrors = _ref3.pointsDescriptorsErrors;
-
+        value = _this$props6.value,
+        _this$props6$mathMlOp = _this$props6.mathMlOptions,
+        mathMlOptions = _this$props6$mathMlOp === void 0 ? {} : _this$props6$mathMlOp,
+        _this$props6$config = _this$props6.config,
+        config = _this$props6$config === void 0 ? {} : _this$props6$config,
+        _this$props6$rubricle = _this$props6.rubricless,
+        rubricless = _this$props6$rubricle === void 0 ? false : _this$props6$rubricle,
+        _this$props6$pluginOp = _this$props6.pluginOpts,
+        pluginOpts = _this$props6$pluginOp === void 0 ? {} : _this$props6$pluginOp;
+      var _ref0 = value || {},
+        _ref0$excludeZeroEnab = _ref0.excludeZeroEnabled,
+        excludeZeroEnabled = _ref0$excludeZeroEnab === void 0 ? true : _ref0$excludeZeroEnab,
+        _ref0$maxPointsEnable = _ref0.maxPointsEnabled,
+        maxPointsEnabled = _ref0$maxPointsEnable === void 0 ? true : _ref0$maxPointsEnable,
+        _ref0$errors = _ref0.errors,
+        errors = _ref0$errors === void 0 ? {} : _ref0$errors,
+        _ref0$rubriclessInstr = _ref0.rubriclessInstructionEnabled,
+        rubriclessInstructionEnabled = _ref0$rubriclessInstr === void 0 ? false : _ref0$rubriclessInstr,
+        _ref0$maxPoints = _ref0.maxPoints,
+        maxPoints = _ref0$maxPoints === void 0 ? 10 : _ref0$maxPoints;
+      // rubric will contain a max value for maxPoints
+      var _ref1 = config || {},
+        _ref1$rubriclessInstr = _ref1.rubriclessInstruction,
+        rubriclessInstruction = _ref1$rubriclessInstr === void 0 ? {} : _ref1$rubriclessInstr,
+        _ref1$maxMaxPoints = _ref1.maxMaxPoints,
+        maxMaxPoints = _ref1$maxMaxPoints === void 0 ? 10 : _ref1$maxMaxPoints;
+      var _ref10 = errors || {},
+        pointsDescriptorsErrors = _ref10.pointsDescriptorsErrors;
       if (value && Number.isFinite(value.maxPoints)) {
         // eslint-disable-next-line no-console
         console.warn('maxPoints is deprecated - remove from model');
-      } // for rubric value is computed based on points
-
+      }
 
+      // for rubric value is computed based on points
       var maxPointsValue = !rubricless ? value.points.length - 1 : maxPoints;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames["default"])(classes["class"], className)
-      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-        variant: "h5",
-        className: classes.rubricTitle
+      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(RubricTitle, {
+        variant: "h5"
       }, "Rubric"), /*#__PURE__*/_react["default"].createElement(_FormGroup["default"], {
         row: true
       }, maxPointsEnabled && /*#__PURE__*/_react["default"].createElement(MaxPoints, {
@@ -419,11 +388,9 @@ var RawAuthoring = /*#__PURE__*/function (_React$Component) {
           checked: value.excludeZero,
           onChange: this.excludeZeros
         })
-      })), rubriclessInstructionEnabled && rubricless && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
-        label: rubriclessInstruction.label,
-        className: classes.inputContainer
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        className: classes.input,
+      })), rubriclessInstructionEnabled && rubricless && /*#__PURE__*/_react["default"].createElement(InputContainerWrapper, null, /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+        label: rubriclessInstruction.label
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtmlTipTap["default"], {
         markup: value.rubriclessInstruction || '',
         onChange: this.changeRubriclessInstruction,
         pluginProps: pluginOpts,
@@ -435,23 +402,20 @@ var RawAuthoring = /*#__PURE__*/function (_React$Component) {
           language: 'special'
         }],
         mathMlOptions: mathMlOptions
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: rubricless ? classes.rubricless : classes.container
-      }, /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.DragDropContext, {
+      }))), /*#__PURE__*/_react["default"].createElement("div", null, rubricless ? /*#__PURE__*/_react["default"].createElement(Rubricless, null) : /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_dnd.DragDropContext, {
         onDragEnd: this.dragEnd
-      }, /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Droppable, {
+      }, /*#__PURE__*/_react["default"].createElement(_dnd.Droppable, {
         droppableId: "droppable"
       }, function (provided) {
         return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, provided.droppableProps, {
           ref: provided.innerRef
         }), value.points.map(function (p, index) {
-          return _this2.shouldRenderPoint(index, value) && /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Draggable, {
+          return _this2.shouldRenderPoint(index, value) && /*#__PURE__*/_react["default"].createElement(_dnd.Draggable, {
             key: "".concat(p.points, "-").concat(index),
             index: index,
             draggableId: index.toString()
           }, function (provided) {
-            return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
-              className: classes.configHolder,
+            return /*#__PURE__*/_react["default"].createElement(ConfigHolder, (0, _extends2["default"])({
               ref: provided.innerRef
             }, provided.draggableProps, provided.dragHandleProps), /*#__PURE__*/_react["default"].createElement(PointConfig, {
               points: value.points.length - 1 - index,
@@ -472,16 +436,11 @@ var RawAuthoring = /*#__PURE__*/function (_React$Component) {
             }));
           });
         }), provided.placeholder);
-      }))));
+      })))));
     }
   }]);
-  return RawAuthoring;
-}(_react["default"].Component);
-
-exports.RawAuthoring = RawAuthoring;
+}(_react["default"].Component); // styles migrated to styled-components above
 (0, _defineProperty2["default"])(RawAuthoring, "propTypes", {
-  classes: _propTypes["default"].object.isRequired,
-  className: _propTypes["default"].string,
   value: RubricType,
   config: _propTypes["default"].object,
   pluginOpts: _propTypes["default"].object,
@@ -489,69 +448,32 @@ exports.RawAuthoring = RawAuthoring;
   onChange: _propTypes["default"].func
 });
 (0, _defineProperty2["default"])(RawAuthoring, "defaultProps", {});
-
-var styles = function styles(theme) {
-  return {
-    container: {
-      backgroundColor: _grey["default"][200],
-      borderWidth: 1,
-      borderStyle: 'solid',
-      borderColor: _grey["default"][300],
-      padding: theme.spacing.unit * 2,
-      margin: theme.spacing.unit
-    },
-    inputContainer: {
-      width: '100%',
-      paddingTop: theme.spacing.unit * 2,
-      marginBottom: theme.spacing.unit * 2
-    },
-    rubricless: {
-      display: 'none'
-    },
-    configHolder: {
-      paddingTop: theme.spacing.unit,
-      paddingBottom: theme.spacing.unit
-    },
-    rubricTitle: {
-      paddingLeft: theme.spacing.unit,
-      margin: theme.spacing.unit
-    }
-  };
-};
-
-var StyledRawAuthoring = (0, _styles.withStyles)(styles)(RawAuthoring);
-
 var Reverse = function Reverse(props) {
-  var _ref4 = props || {},
-      _ref4$rubricless = _ref4.rubricless,
-      rubricless = _ref4$rubricless === void 0 ? false : _ref4$rubricless,
-      _ref4$config = _ref4.config,
-      config = _ref4$config === void 0 ? {} : _ref4$config,
-      _ref4$pluginOpts = _ref4.pluginOpts,
-      pluginOpts = _ref4$pluginOpts === void 0 ? {} : _ref4$pluginOpts;
-
+  var _ref11 = props || {},
+    _ref11$rubricless = _ref11.rubricless,
+    rubricless = _ref11$rubricless === void 0 ? false : _ref11$rubricless,
+    _ref11$config = _ref11.config,
+    config = _ref11$config === void 0 ? {} : _ref11$config,
+    _ref11$pluginOpts = _ref11.pluginOpts,
+    pluginOpts = _ref11$pluginOpts === void 0 ? {} : _ref11$pluginOpts;
   var points = Array.from(props.value.points || []).reverse();
   var sampleAnswers = Array.from(props.value.sampleAnswers || []).reverse();
-
   if (points.length > sampleAnswers.length) {
     sampleAnswers = (0, _times["default"])(points.length - sampleAnswers.length).map(function () {
       return null;
     }).concat(sampleAnswers);
   }
-
   var value = _objectSpread(_objectSpread({}, props.value), {}, {
     points: points,
     sampleAnswers: sampleAnswers
   });
-
   var onChange = function onChange(value) {
     props.onChange(_objectSpread(_objectSpread({}, value), {}, {
       points: Array.from(value.points || []).reverse(),
       sampleAnswers: Array.from(value.sampleAnswers || []).reverse()
     }));
   };
-
-  return /*#__PURE__*/_react["default"].createElement(StyledRawAuthoring, {
+  return /*#__PURE__*/_react["default"].createElement(RawAuthoring, {
     value: value,
     config: config,
     onChange: onChange,
@@ -559,7 +481,6 @@ var Reverse = function Reverse(props) {
     pluginOpts: pluginOpts
   });
 };
-
 Reverse.propTypes = {
   value: RubricType,
   config: _propTypes["default"].object,
@@ -568,6 +489,5 @@ Reverse.propTypes = {
   getIndex: _propTypes["default"].func,
   onChange: _propTypes["default"].func
 };
-var _default = Reverse;
-exports["default"] = _default;
+var _default = exports["default"] = Reverse;
 //# sourceMappingURL=authoring.js.map