@pie-lib/config-ui 11.30.0-mui-update.0 → 11.30.1-beta-1

package/lib/choice-configuration/index.js

@@ -1,66 +1,93 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.ChoiceConfiguration = 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 _react = _interopRequireDefault(require("react"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styles = require("@mui/material/styles");
-var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
-var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
-var _SubdirectoryArrowRight = _interopRequireDefault(require("@mui/icons-material/SubdirectoryArrowRight"));
-var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+
+var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));
+
+var _SubdirectoryArrowRight = _interopRequireDefault(require("@material-ui/icons/SubdirectoryArrowRight"));
+
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
+
 var _renderUi = require("@pie-lib/render-ui");
+
+var _editableHtmlTipTap = _interopRequireDefault(require("@pie-lib/editable-html-tip-tap"));
+
 var _inputs = require("../inputs");
+
 var _feedbackMenu = _interopRequireDefault(require("./feedback-menu"));
-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; })(); } // import EditableHtml from '@pie-lib/editable-html';
-// - mathquill error window not defined
-var EditableHtml;
-if (typeof window !== 'undefined') {
-  EditableHtml = require('@pie-lib/editable-html')['default'];
-}
-var StyledEditorHolder = (0, _styles.styled)('div')(function (_ref) {
-  var theme = _ref.theme;
+
+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 EditableHtmlContainer = (0, _styles.withStyles)(function (theme) {
   return {
-    marginTop: theme.spacing(2)
+    labelContainer: {},
+    editorHolder: {
+      marginTop: theme.spacing.unit * 2
+    }
   };
-});
-var EditableHtmlContainer = function EditableHtmlContainer(_ref2) {
-  var label = _ref2.label,
-    onChange = _ref2.onChange,
-    value = _ref2.value,
-    className = _ref2.className,
-    imageSupport = _ref2.imageSupport,
-    disableImageAlignmentButtons = _ref2.disableImageAlignmentButtons,
-    disabled = _ref2.disabled,
-    spellCheck = _ref2.spellCheck,
-    nonEmpty = _ref2.nonEmpty,
-    pluginOpts = _ref2.pluginOpts,
-    toolbarOpts = _ref2.toolbarOpts,
-    error = _ref2.error,
-    maxImageWidth = _ref2.maxImageWidth,
-    maxImageHeight = _ref2.maxImageHeight,
-    uploadSoundSupport = _ref2.uploadSoundSupport,
-    _ref2$mathMlOptions = _ref2.mathMlOptions,
-    mathMlOptions = _ref2$mathMlOptions === void 0 ? {} : _ref2$mathMlOptions;
-  var names = (0, _classnames["default"])(className);
+})(function (_ref) {
+  var label = _ref.label,
+      classes = _ref.classes,
+      onChange = _ref.onChange,
+      value = _ref.value,
+      className = _ref.className,
+      imageSupport = _ref.imageSupport,
+      disableImageAlignmentButtons = _ref.disableImageAlignmentButtons,
+      disabled = _ref.disabled,
+      spellCheck = _ref.spellCheck,
+      nonEmpty = _ref.nonEmpty,
+      pluginOpts = _ref.pluginOpts,
+      toolbarOpts = _ref.toolbarOpts,
+      error = _ref.error,
+      maxImageWidth = _ref.maxImageWidth,
+      maxImageHeight = _ref.maxImageHeight,
+      uploadSoundSupport = _ref.uploadSoundSupport,
+      _ref$mathMlOptions = _ref.mathMlOptions,
+      mathMlOptions = _ref$mathMlOptions === void 0 ? {} : _ref$mathMlOptions;
+  var names = (0, _classnames["default"])(classes.labelContainer, className);
   return /*#__PURE__*/_react["default"].createElement(_renderUi.InputContainer, {
     label: label,
     className: names
-  }, /*#__PURE__*/_react["default"].createElement(StyledEditorHolder, null, /*#__PURE__*/_react["default"].createElement(EditableHtml, {
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.editorHolder
+  }, /*#__PURE__*/_react["default"].createElement(_editableHtmlTipTap["default"], {
     markup: value || '',
     disabled: disabled,
     spellCheck: spellCheck,
@@ -68,6 +95,7 @@ var EditableHtmlContainer = function EditableHtmlContainer(_ref2) {
     onChange: onChange,
     imageSupport: imageSupport,
     disableImageAlignmentButtons: disableImageAlignmentButtons,
+    className: classes.editor,
     pluginProps: pluginOpts || {},
     toolbarOpts: toolbarOpts,
     error: error,
@@ -81,49 +109,52 @@ var EditableHtmlContainer = function EditableHtmlContainer(_ref2) {
     }],
     mathMlOptions: mathMlOptions
   })));
-};
-var StyledFeedbackContainer = (0, _styles.styled)('div')(function () {
-  return {
-    position: 'relative'
-  };
-});
-var StyledArrowIcon = (0, _styles.styled)(_SubdirectoryArrowRight["default"])(function (_ref3) {
-  var theme = _ref3.theme;
-  return {
-    fill: theme.palette.grey[400],
-    left: -56,
-    position: 'absolute',
-    top: 20
-  };
-});
-var StyledTextField = (0, _styles.styled)(_TextField["default"])(function () {
-  return {
-    width: '100%'
-  };
 });
-var StyledEditableHtmlContainer = (0, _styles.styled)(EditableHtmlContainer)(function () {
+var Feedback = (0, _styles.withStyles)(function (theme) {
   return {
-    width: '100%'
+    text: {
+      width: '100%'
+    },
+    feedbackContainer: {
+      position: 'relative'
+    },
+    arrowIcon: {
+      fill: theme.palette.grey[400],
+      left: -56,
+      position: 'absolute',
+      top: 20
+    }
   };
-});
-var Feedback = function Feedback(_ref4) {
-  var value = _ref4.value,
-    onChange = _ref4.onChange,
-    type = _ref4.type,
-    correct = _ref4.correct,
-    defaults = _ref4.defaults,
-    toolbarOpts = _ref4.toolbarOpts,
-    _ref4$mathMlOptions = _ref4.mathMlOptions,
-    mathMlOptions = _ref4$mathMlOptions === void 0 ? {} : _ref4$mathMlOptions;
+})(function (_ref2) {
+  var value = _ref2.value,
+      onChange = _ref2.onChange,
+      type = _ref2.type,
+      correct = _ref2.correct,
+      classes = _ref2.classes,
+      defaults = _ref2.defaults,
+      toolbarOpts = _ref2.toolbarOpts,
+      _ref2$mathMlOptions = _ref2.mathMlOptions,
+      mathMlOptions = _ref2$mathMlOptions === void 0 ? {} : _ref2$mathMlOptions;
+
   if (!type || type === 'none') {
     return null;
   } else if (type === 'default') {
-    return /*#__PURE__*/_react["default"].createElement(StyledFeedbackContainer, null, /*#__PURE__*/_react["default"].createElement(StyledArrowIcon, null), /*#__PURE__*/_react["default"].createElement(StyledTextField, {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.feedbackContainer
+    }, /*#__PURE__*/_react["default"].createElement(_SubdirectoryArrowRight["default"], {
+      className: classes.arrowIcon
+    }), /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+      className: classes.text,
       label: "Feedback Text",
       value: correct ? defaults.correct : defaults.incorrect
     }));
   } else {
-    return /*#__PURE__*/_react["default"].createElement(StyledFeedbackContainer, null, /*#__PURE__*/_react["default"].createElement(StyledArrowIcon, null), /*#__PURE__*/_react["default"].createElement(StyledEditableHtmlContainer, {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.feedbackContainer
+    }, /*#__PURE__*/_react["default"].createElement(_SubdirectoryArrowRight["default"], {
+      className: classes.arrowIcon
+    }), /*#__PURE__*/_react["default"].createElement(EditableHtmlContainer, {
+      className: classes.text,
       label: "Feedback Text",
       value: value,
       onChange: onChange,
@@ -131,182 +162,132 @@ var Feedback = function Feedback(_ref4) {
       mathMlOptions: mathMlOptions
     }));
   }
-};
-var StyledIndex = (0, _styles.styled)('span')(function (_ref5) {
-  var theme = _ref5.theme;
-  return {
-    paddingRight: theme.spacing(1),
-    paddingTop: theme.spacing(3.5)
-  };
-});
-var StyledTopRow = (0, _styles.styled)('div')(function () {
-  return {
-    display: 'flex'
-  };
-});
-var StyledToggle = (0, _styles.styled)('div')(function (_ref6) {
-  var theme = _ref6.theme;
-  return {
-    flex: '0 1 auto',
-    paddingTop: theme.spacing(0.5),
-    paddingBottom: 0,
-    marginRight: 0,
-    marginLeft: theme.spacing(1)
-  };
 });
-var StyledFeedback = (0, _styles.styled)('div')(function (_ref7) {
-  var theme = _ref7.theme;
-  return {
-    flex: '0 1 auto',
-    paddingTop: theme.spacing(2),
-    paddingLeft: 0,
-    marginLeft: 0,
-    marginRight: theme.spacing(1)
-  };
-});
-var StyledFeedbackIcon = (0, _styles.styled)('div')(function () {
-  return {
-    margin: 0,
-    width: 'inherit'
-  };
-});
-var StyledDeleteIcon = (0, _styles.styled)('div')(function () {
-  return {
-    margin: 0,
-    width: 'inherit'
-  };
-});
-var StyledDelete = (0, _styles.styled)('div')(function (_ref8) {
-  var theme = _ref8.theme;
-  return {
-    flex: '0 1 auto',
-    paddingTop: theme.spacing(2),
-    paddingLeft: 0,
-    marginLeft: 0
-  };
-});
-var StyledMiddleColumn = (0, _styles.styled)('div')(function (_ref9) {
-  var theme = _ref9.theme;
-  return {
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column',
-    marginRight: theme.spacing(1)
-  };
-});
-var StyledInput = (0, _styles.styled)('div')(function () {
-  return {
-    marginRight: 0
-  };
-});
-var StyledErrorText = (0, _styles.styled)('div')(function (_ref0) {
-  var theme = _ref0.theme;
-  return {
-    fontSize: theme.typography.fontSize - 2,
-    color: theme.palette.error.main
-  };
-});
-var ChoiceConfiguration = exports.ChoiceConfiguration = /*#__PURE__*/function (_React$Component) {
+
+var ChoiceConfiguration = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(ChoiceConfiguration, _React$Component);
+
+  var _super = _createSuper(ChoiceConfiguration);
+
   function ChoiceConfiguration() {
     var _this;
+
     (0, _classCallCheck2["default"])(this, ChoiceConfiguration);
+
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _callSuper(this, ChoiceConfiguration, [].concat(args));
-    (0, _defineProperty2["default"])(_this, "_changeFn", function (key) {
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_changeFn", function (key) {
       return function (update) {
         var _this$props = _this.props,
-          data = _this$props.data,
-          onChange = _this$props.onChange;
+            data = _this$props.data,
+            onChange = _this$props.onChange;
+
         if (onChange) {
           onChange(_objectSpread(_objectSpread({}, data), {}, (0, _defineProperty2["default"])({}, key, update)));
         }
       };
     });
-    (0, _defineProperty2["default"])(_this, "onLabelChange", _this._changeFn('label'));
-    (0, _defineProperty2["default"])(_this, "onCheckedChange", function (event) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onLabelChange", _this._changeFn('label'));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onCheckedChange", function (event) {
       var correct = event.target.checked;
       var _this$props2 = _this.props,
-        data = _this$props2.data,
-        onChange = _this$props2.onChange;
+          data = _this$props2.data,
+          onChange = _this$props2.onChange;
+
       if (onChange) {
         onChange(_objectSpread(_objectSpread({}, data), {}, {
           correct: correct
         }));
       }
     });
-    (0, _defineProperty2["default"])(_this, "onFeedbackValueChange", function (v) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onFeedbackValueChange", function (v) {
       var _this$props3 = _this.props,
-        data = _this$props3.data,
-        onChange = _this$props3.onChange;
+          data = _this$props3.data,
+          onChange = _this$props3.onChange;
+
       if (data.feedback.type !== 'custom') {
         return;
       }
+
       var fb = _objectSpread(_objectSpread({}, data.feedback), {}, {
         value: v
       });
+
       if (onChange) onChange(_objectSpread(_objectSpread({}, data), {}, {
         feedback: fb
       }));
     });
-    (0, _defineProperty2["default"])(_this, "onFeedbackTypeChange", function (t) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onFeedbackTypeChange", function (t) {
       var _this$props4 = _this.props,
-        data = _this$props4.data,
-        onChange = _this$props4.onChange;
+          data = _this$props4.data,
+          onChange = _this$props4.onChange;
+
       var fb = _objectSpread(_objectSpread({}, data.feedback), {}, {
         type: t
       });
+
       if (fb.type !== 'custom') {
         fb.value = undefined;
       }
+
       if (onChange) onChange(_objectSpread(_objectSpread({}, data), {}, {
         feedback: fb
       }));
     });
     return _this;
   }
-  (0, _inherits2["default"])(ChoiceConfiguration, _React$Component);
-  return (0, _createClass2["default"])(ChoiceConfiguration, [{
+
+  (0, _createClass2["default"])(ChoiceConfiguration, [{
     key: "render",
     value: function render() {
       var _this$props5 = this.props,
-        data = _this$props5.data,
-        mode = _this$props5.mode,
-        onDelete = _this$props5.onDelete,
-        defaultFeedback = _this$props5.defaultFeedback,
-        index = _this$props5.index,
-        className = _this$props5.className,
-        noLabels = _this$props5.noLabels,
-        useLetterOrdering = _this$props5.useLetterOrdering,
-        imageSupport = _this$props5.imageSupport,
-        disableImageAlignmentButtons = _this$props5.disableImageAlignmentButtons,
-        disabled = _this$props5.disabled,
-        spellCheck = _this$props5.spellCheck,
-        nonEmpty = _this$props5.nonEmpty,
-        allowFeedBack = _this$props5.allowFeedBack,
-        allowDelete = _this$props5.allowDelete,
-        pluginOpts = _this$props5.pluginOpts,
-        toolbarOpts = _this$props5.toolbarOpts,
-        error = _this$props5.error,
-        noCorrectAnswerError = _this$props5.noCorrectAnswerError,
-        uploadSoundSupport = _this$props5.uploadSoundSupport,
-        maxImageWidth = _this$props5.maxImageWidth,
-        maxImageHeight = _this$props5.maxImageHeight,
-        _this$props5$mathMlOp = _this$props5.mathMlOptions,
-        mathMlOptions = _this$props5$mathMlOp === void 0 ? {} : _this$props5$mathMlOp;
+          data = _this$props5.data,
+          classes = _this$props5.classes,
+          mode = _this$props5.mode,
+          onDelete = _this$props5.onDelete,
+          defaultFeedback = _this$props5.defaultFeedback,
+          index = _this$props5.index,
+          className = _this$props5.className,
+          noLabels = _this$props5.noLabels,
+          useLetterOrdering = _this$props5.useLetterOrdering,
+          imageSupport = _this$props5.imageSupport,
+          disableImageAlignmentButtons = _this$props5.disableImageAlignmentButtons,
+          disabled = _this$props5.disabled,
+          spellCheck = _this$props5.spellCheck,
+          nonEmpty = _this$props5.nonEmpty,
+          allowFeedBack = _this$props5.allowFeedBack,
+          allowDelete = _this$props5.allowDelete,
+          pluginOpts = _this$props5.pluginOpts,
+          toolbarOpts = _this$props5.toolbarOpts,
+          error = _this$props5.error,
+          noCorrectAnswerError = _this$props5.noCorrectAnswerError,
+          uploadSoundSupport = _this$props5.uploadSoundSupport,
+          maxImageWidth = _this$props5.maxImageWidth,
+          maxImageHeight = _this$props5.maxImageHeight,
+          _this$props5$mathMlOp = _this$props5.mathMlOptions,
+          mathMlOptions = _this$props5$mathMlOp === void 0 ? {} : _this$props5$mathMlOp;
       var InputToggle = mode === 'checkbox' ? _inputs.InputCheckbox : _inputs.InputRadio;
-      var names = (0, _classnames["default"])(className);
+      var names = (0, _classnames["default"])(classes.choiceConfiguration, className);
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: names
-      }, /*#__PURE__*/_react["default"].createElement(StyledTopRow, null, index > 0 && /*#__PURE__*/_react["default"].createElement(StyledIndex, {
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.topRow
+      }, index > 0 && /*#__PURE__*/_react["default"].createElement("span", {
+        className: classes.index,
         type: "title"
-      }, useLetterOrdering ? String.fromCharCode(96 + index).toUpperCase() : index), /*#__PURE__*/_react["default"].createElement(StyledToggle, null, /*#__PURE__*/_react["default"].createElement(InputToggle, {
+      }, useLetterOrdering ? String.fromCharCode(96 + index).toUpperCase() : index), /*#__PURE__*/_react["default"].createElement(InputToggle, {
+        className: classes.toggle,
         onChange: this.onCheckedChange,
         label: !noLabels ? 'Correct' : '',
         checked: !!data.correct,
         error: noCorrectAnswerError
-      })), /*#__PURE__*/_react["default"].createElement(StyledMiddleColumn, null, /*#__PURE__*/_react["default"].createElement(StyledInput, null, /*#__PURE__*/_react["default"].createElement(EditableHtmlContainer, {
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.middleColumn
+      }, /*#__PURE__*/_react["default"].createElement(EditableHtmlContainer, {
+        className: classes.input,
         label: !noLabels ? 'Label' : '',
         value: data.label,
         onChange: this.onLabelChange,
@@ -322,27 +303,38 @@ var ChoiceConfiguration = exports.ChoiceConfiguration = /*#__PURE__*/function (_
         mathMlOptions: mathMlOptions,
         maxImageWidth: maxImageWidth,
         maxImageHeight: maxImageHeight
-      })), error && /*#__PURE__*/_react["default"].createElement(StyledErrorText, null, error), allowFeedBack && /*#__PURE__*/_react["default"].createElement(Feedback, (0, _extends2["default"])({}, data.feedback, {
+      }), error && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, error), allowFeedBack && /*#__PURE__*/_react["default"].createElement(Feedback, (0, _extends2["default"])({}, data.feedback, {
         correct: data.correct,
         defaults: defaultFeedback,
         onChange: this.onFeedbackValueChange,
         toolbarOpts: toolbarOpts
-      }))), allowFeedBack && /*#__PURE__*/_react["default"].createElement(StyledFeedback, null, /*#__PURE__*/_react["default"].createElement(_renderUi.InputContainer, {
+      }))), allowFeedBack && /*#__PURE__*/_react["default"].createElement(_renderUi.InputContainer, {
+        className: classes.feedback,
         label: !noLabels ? 'Feedback' : ''
-      }, /*#__PURE__*/_react["default"].createElement(StyledFeedbackIcon, null, /*#__PURE__*/_react["default"].createElement(_feedbackMenu["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_feedbackMenu["default"], {
         onChange: this.onFeedbackTypeChange,
-        value: data.feedback
-      })))), allowDelete && /*#__PURE__*/_react["default"].createElement(StyledDelete, null, /*#__PURE__*/_react["default"].createElement(_renderUi.InputContainer, {
+        value: data.feedback,
+        classes: {
+          icon: classes.feedbackIcon
+        }
+      })), allowDelete && /*#__PURE__*/_react["default"].createElement(_renderUi.InputContainer, {
+        className: classes["delete"],
         label: !noLabels ? 'Delete' : ''
-      }, /*#__PURE__*/_react["default"].createElement(StyledDeleteIcon, null, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         "aria-label": "delete",
-        onClick: onDelete,
-        size: "large"
-      }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null)))))));
+        className: classes.deleteIcon,
+        onClick: onDelete
+      }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null)))));
     }
   }]);
+  return ChoiceConfiguration;
 }(_react["default"].Component);
+
+exports.ChoiceConfiguration = ChoiceConfiguration;
 (0, _defineProperty2["default"])(ChoiceConfiguration, "propTypes", {
+  classes: _propTypes["default"].object.isRequired,
   noLabels: _propTypes["default"].bool,
   useLetterOrdering: _propTypes["default"].bool,
   className: _propTypes["default"].string,
@@ -385,5 +377,69 @@ var ChoiceConfiguration = exports.ChoiceConfiguration = /*#__PURE__*/function (_
   allowFeedBack: true,
   allowDelete: true
 });
-var _default = exports["default"] = ChoiceConfiguration;
+
+var styles = function styles(theme) {
+  return {
+    index: {
+      paddingRight: theme.spacing.unit,
+      paddingTop: theme.spacing.unit * 3.5
+    },
+    choiceConfiguration: {},
+    topRow: {
+      display: 'flex'
+    },
+    value: {
+      flex: '0.5',
+      paddingRight: theme.spacing.unit
+    },
+    editorHolder: {
+      marginTop: theme.spacing.unit * 2
+    },
+    toggle: {
+      flex: '0 1 auto',
+      paddingTop: theme.spacing.unit / 2,
+      paddingBottom: 0,
+      marginRight: 0,
+      marginLeft: theme.spacing.unit
+    },
+    feedback: {
+      flex: '0 1 auto',
+      paddingTop: theme.spacing.unit * 2,
+      paddingLeft: 0,
+      marginLeft: 0,
+      marginRight: theme.spacing.unit
+    },
+    feedbackIcon: {
+      margin: 0,
+      width: 'inherit'
+    },
+    deleteIcon: {
+      margin: 0,
+      width: 'inherit'
+    },
+    "delete": {
+      flex: '0 1 auto',
+      paddingTop: theme.spacing.unit * 2,
+      paddingLeft: 0,
+      marginLeft: 0
+    },
+    middleColumn: {
+      display: 'flex',
+      flex: 1,
+      flexDirection: 'column',
+      marginRight: theme.spacing.unit
+    },
+    input: {
+      marginRight: 0
+    },
+    errorText: {
+      fontSize: theme.typography.fontSize - 2,
+      color: theme.palette.error.main
+    }
+  };
+};
+
+var _default = (0, _styles.withStyles)(styles)(ChoiceConfiguration);
+
+exports["default"] = _default;
 //# sourceMappingURL=index.js.map