@pie-lib/config-ui 11.27.0 → 11.29.0-mui-update.0

package/lib/choice-configuration/index.js

@@ -1,93 +1,66 @@
 "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("@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 _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 _classnames = _interopRequireDefault(require("classnames"));
-
 var _renderUi = require("@pie-lib/render-ui");
-
-var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
-
 var _inputs = require("../inputs");
-
 var _feedbackMenu = _interopRequireDefault(require("./feedback-menu"));
-
-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) {
+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;
   return {
-    labelContainer: {},
-    editorHolder: {
-      marginTop: theme.spacing.unit * 2
-    }
+    marginTop: theme.spacing(2)
   };
-})(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);
+});
+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);
   return /*#__PURE__*/_react["default"].createElement(_renderUi.InputContainer, {
     label: label,
     className: names
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.editorHolder
-  }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(StyledEditorHolder, null, /*#__PURE__*/_react["default"].createElement(EditableHtml, {
     markup: value || '',
     disabled: disabled,
     spellCheck: spellCheck,
@@ -95,7 +68,6 @@ var EditableHtmlContainer = (0, _styles.withStyles)(function (theme) {
     onChange: onChange,
     imageSupport: imageSupport,
     disableImageAlignmentButtons: disableImageAlignmentButtons,
-    className: classes.editor,
     pluginProps: pluginOpts || {},
     toolbarOpts: toolbarOpts,
     error: error,
@@ -109,52 +81,49 @@ var EditableHtmlContainer = (0, _styles.withStyles)(function (theme) {
     }],
     mathMlOptions: mathMlOptions
   })));
+};
+var StyledFeedbackContainer = (0, _styles.styled)('div')(function () {
+  return {
+    position: 'relative'
+  };
 });
-var Feedback = (0, _styles.withStyles)(function (theme) {
+var StyledArrowIcon = (0, _styles.styled)(_SubdirectoryArrowRight["default"])(function (_ref3) {
+  var theme = _ref3.theme;
   return {
-    text: {
-      width: '100%'
-    },
-    feedbackContainer: {
-      position: 'relative'
-    },
-    arrowIcon: {
-      fill: theme.palette.grey[400],
-      left: -56,
-      position: 'absolute',
-      top: 20
-    }
+    fill: theme.palette.grey[400],
+    left: -56,
+    position: 'absolute',
+    top: 20
   };
-})(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;
-
+});
+var StyledTextField = (0, _styles.styled)(_TextField["default"])(function () {
+  return {
+    width: '100%'
+  };
+});
+var StyledEditableHtmlContainer = (0, _styles.styled)(EditableHtmlContainer)(function () {
+  return {
+    width: '100%'
+  };
+});
+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;
   if (!type || type === 'none') {
     return null;
   } else if (type === 'default') {
-    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,
+    return /*#__PURE__*/_react["default"].createElement(StyledFeedbackContainer, null, /*#__PURE__*/_react["default"].createElement(StyledArrowIcon, null), /*#__PURE__*/_react["default"].createElement(StyledTextField, {
       label: "Feedback Text",
       value: correct ? defaults.correct : defaults.incorrect
     }));
   } else {
-    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,
+    return /*#__PURE__*/_react["default"].createElement(StyledFeedbackContainer, null, /*#__PURE__*/_react["default"].createElement(StyledArrowIcon, null), /*#__PURE__*/_react["default"].createElement(StyledEditableHtmlContainer, {
       label: "Feedback Text",
       value: value,
       onChange: onChange,
@@ -162,132 +131,182 @@ var Feedback = (0, _styles.withStyles)(function (theme) {
       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 ChoiceConfiguration = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(ChoiceConfiguration, _React$Component);
-
-  var _super = _createSuper(ChoiceConfiguration);
-
+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) {
   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 = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_changeFn", function (key) {
+    _this = _callSuper(this, ChoiceConfiguration, [].concat(args));
+    (0, _defineProperty2["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"])((0, _assertThisInitialized2["default"])(_this), "onLabelChange", _this._changeFn('label'));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onCheckedChange", function (event) {
+    (0, _defineProperty2["default"])(_this, "onLabelChange", _this._changeFn('label'));
+    (0, _defineProperty2["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"])((0, _assertThisInitialized2["default"])(_this), "onFeedbackValueChange", function (v) {
+    (0, _defineProperty2["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"])((0, _assertThisInitialized2["default"])(_this), "onFeedbackTypeChange", function (t) {
+    (0, _defineProperty2["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, _createClass2["default"])(ChoiceConfiguration, [{
+  (0, _inherits2["default"])(ChoiceConfiguration, _React$Component);
+  return (0, _createClass2["default"])(ChoiceConfiguration, [{
     key: "render",
     value: function render() {
       var _this$props5 = this.props,
-          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;
+        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;
       var InputToggle = mode === 'checkbox' ? _inputs.InputCheckbox : _inputs.InputRadio;
-      var names = (0, _classnames["default"])(classes.choiceConfiguration, className);
+      var names = (0, _classnames["default"])(className);
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: names
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.topRow
-      }, index > 0 && /*#__PURE__*/_react["default"].createElement("span", {
-        className: classes.index,
+      }, /*#__PURE__*/_react["default"].createElement(StyledTopRow, null, index > 0 && /*#__PURE__*/_react["default"].createElement(StyledIndex, {
         type: "title"
-      }, useLetterOrdering ? String.fromCharCode(96 + index).toUpperCase() : index), /*#__PURE__*/_react["default"].createElement(InputToggle, {
-        className: classes.toggle,
+      }, useLetterOrdering ? String.fromCharCode(96 + index).toUpperCase() : index), /*#__PURE__*/_react["default"].createElement(StyledToggle, null, /*#__PURE__*/_react["default"].createElement(InputToggle, {
         onChange: this.onCheckedChange,
         label: !noLabels ? 'Correct' : '',
         checked: !!data.correct,
         error: noCorrectAnswerError
-      }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.middleColumn
-      }, /*#__PURE__*/_react["default"].createElement(EditableHtmlContainer, {
-        className: classes.input,
+      })), /*#__PURE__*/_react["default"].createElement(StyledMiddleColumn, null, /*#__PURE__*/_react["default"].createElement(StyledInput, null, /*#__PURE__*/_react["default"].createElement(EditableHtmlContainer, {
         label: !noLabels ? 'Label' : '',
         value: data.label,
         onChange: this.onLabelChange,
@@ -303,38 +322,27 @@ var ChoiceConfiguration = /*#__PURE__*/function (_React$Component) {
         mathMlOptions: mathMlOptions,
         maxImageWidth: maxImageWidth,
         maxImageHeight: maxImageHeight
-      }), error && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, error), allowFeedBack && /*#__PURE__*/_react["default"].createElement(Feedback, (0, _extends2["default"])({}, data.feedback, {
+      })), error && /*#__PURE__*/_react["default"].createElement(StyledErrorText, null, 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(_renderUi.InputContainer, {
-        className: classes.feedback,
+      }))), allowFeedBack && /*#__PURE__*/_react["default"].createElement(StyledFeedback, null, /*#__PURE__*/_react["default"].createElement(_renderUi.InputContainer, {
         label: !noLabels ? 'Feedback' : ''
-      }, /*#__PURE__*/_react["default"].createElement(_feedbackMenu["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(StyledFeedbackIcon, null, /*#__PURE__*/_react["default"].createElement(_feedbackMenu["default"], {
         onChange: this.onFeedbackTypeChange,
-        value: data.feedback,
-        classes: {
-          icon: classes.feedbackIcon
-        }
-      })), allowDelete && /*#__PURE__*/_react["default"].createElement(_renderUi.InputContainer, {
-        className: classes["delete"],
+        value: data.feedback
+      })))), allowDelete && /*#__PURE__*/_react["default"].createElement(StyledDelete, null, /*#__PURE__*/_react["default"].createElement(_renderUi.InputContainer, {
         label: !noLabels ? 'Delete' : ''
-      }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(StyledDeleteIcon, null, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         "aria-label": "delete",
-        className: classes.deleteIcon,
-        onClick: onDelete
-      }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null)))));
+        onClick: onDelete,
+        size: "large"
+      }, /*#__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,
@@ -377,69 +385,5 @@ exports.ChoiceConfiguration = ChoiceConfiguration;
   allowFeedBack: true,
   allowDelete: true
 });
-
-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;
+var _default = exports["default"] = ChoiceConfiguration;
 //# sourceMappingURL=index.js.map