@pie-element/likert 2.3.4-next.3 → 3.0.0-beta.0

package/configure/lib/main.js

@@ -1,342 +1,275 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Main = void 0;
-
+exports.default = exports.Main = 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
-
-var _Radio = _interopRequireDefault(require("@material-ui/core/Radio"));
-
-var _RadioGroup = _interopRequireDefault(require("@material-ui/core/RadioGroup"));
-
-var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
-
+var _Radio = _interopRequireDefault(require("@mui/material/Radio"));
+var _RadioGroup = _interopRequireDefault(require("@mui/material/RadioGroup"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
 var _configUi = require("@pie-lib/config-ui");
-
-var _styles = require("@material-ui/core/styles");
-
+var _styles = require("@mui/material/styles");
 var _merge = _interopRequireDefault(require("lodash/merge"));
-
 var _likertEntities = require("./likertEntities");
-
 var _choiceGenerator = _interopRequireDefault(require("./choiceGenerator"));
-
 var _renderUi = require("@pie-lib/render-ui");
-
-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; } }
-
-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; }
-
-var Panel = _configUi.settings.Panel,
-    toggle = _configUi.settings.toggle,
-    radio = _configUi.settings.radio;
-
-var styles = function styles(theme) {
-  return {
-    promptHolder: {
-      width: '100%',
-      paddingTop: theme.spacing.unit * 2,
-      marginBottom: theme.spacing.unit * 2
-    },
-    radioButtonsWrapper: {
-      display: 'flex',
-      flexDirection: 'column'
-    },
-    radioButtonsColumnHeader: {
-      color: theme.palette.grey[400],
-      fontSize: theme.typography.fontSize - 2
-    },
-    likertLabelHolder: {
-      display: 'flex',
-      width: '100%',
-      alignItems: 'flex-start',
-      marginBottom: theme.spacing.unit * 2
-    },
-    likertOptionsHolder: {
-      display: 'flex',
-      width: '100%',
-      justifyContent: 'space-around',
-      marginBottom: theme.spacing.unit * 2.5
-    },
-    likertLabelInput: {
-      width: 'calc(100% - 200px)',
-      marginRight: 0
-    },
-    errorMessage: {
-      color: theme.palette.error.main,
-      fontSize: theme.typography.fontSize - 2
-    },
-    width100: {
-      width: '100%'
-    },
-    flexRow: {
-      display: 'flex',
-      flexDirection: 'row'
-    },
-    likertValueHolder: {
-      paddingLeft: theme.spacing.unit * 2.5,
-      width: '150px'
-    },
-    likertLabelEditableHtml: {
-      paddingTop: theme.spacing.unit * 2
-    },
-    inputFormGroupIndex: {
-      width: '30px',
-      paddingTop: theme.spacing.unit * 4
-    },
-    errorText: {
-      fontSize: theme.typography.fontSize - 2,
-      color: theme.palette.error.main,
-      paddingTop: theme.spacing.unit
-    },
-    customColor: {
-      color: "".concat(_renderUi.color.tertiary(), " !important")
-    }
-  };
-};
-
-var LikertOrientation = (0, _styles.withStyles)(styles)(function (props) {
-  var classes = props.classes,
-      model = props.model,
-      onChangeModel = props.onChangeModel;
-
-  var onChangeLikertOrientation = function onChangeLikertOrientation(e) {
-    var likertOrientation = e.target.value;
-    onChangeModel(_objectSpread(_objectSpread({}, model), {}, {
-      likertOrientation: likertOrientation
-    }));
+const {
+  Panel,
+  toggle,
+  radio
+} = _configUi.settings;
+const PromptHolder = (0, _styles.styled)(_configUi.InputContainer)(({
+  theme
+}) => ({
+  width: '100%',
+  paddingTop: theme.spacing(2),
+  marginBottom: theme.spacing(2)
+}));
+const RadioButtonsWrapper = (0, _styles.styled)('div')({
+  display: 'flex',
+  flexDirection: 'column'
+});
+const RadioButtonsColumnHeader = (0, _styles.styled)('p')(({
+  theme
+}) => ({
+  color: theme.palette.grey[400],
+  fontSize: theme.typography.fontSize - 2
+}));
+const LikertLabelHolder = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  display: 'flex',
+  width: '100%',
+  alignItems: 'flex-start',
+  marginBottom: theme.spacing(2)
+}));
+const LikertOptionsHolder = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'space-around',
+  marginBottom: theme.spacing(2.5)
+}));
+const LikertLabelInput = (0, _styles.styled)(_configUi.InputContainer)({
+  width: 'calc(100% - 200px)',
+  marginRight: 0
+});
+const ErrorMessage = (0, _styles.styled)('p')(({
+  theme
+}) => ({
+  color: theme.palette.error.main,
+  fontSize: theme.typography.fontSize - 2
+}));
+const StyledNumberTextField = (0, _styles.styled)(_configUi.NumberTextField)({
+  width: '100%'
+});
+const FlexRow = (0, _styles.styled)('div')({
+  display: 'flex',
+  flexDirection: 'row'
+});
+const LikertValueHolder = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  paddingLeft: theme.spacing(2.5),
+  width: '150px'
+}));
+const StyledEditableHtml = (0, _styles.styled)(_editableHtml.default)(({
+  theme
+}) => ({
+  paddingTop: theme.spacing(2)
+}));
+const InputFormGroupIndex = (0, _styles.styled)('span')(({
+  theme
+}) => ({
+  width: '30px',
+  paddingTop: theme.spacing(4)
+}));
+const ErrorText = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(1)
+}));
+const CustomColorRadio = (0, _styles.styled)(_Radio.default)({
+  color: `${_renderUi.color.tertiary()} !important`
+});
+const LikertOrientation = props => {
+  const {
+    model,
+    onChangeModel
+  } = props;
+  const onChangeLikertOrientation = e => {
+    const likertOrientation = e.target.value;
+    onChangeModel({
+      ...model,
+      likertOrientation
+    });
   };
-
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.radioButtonsWrapper
-  }, /*#__PURE__*/_react["default"].createElement("p", {
-    className: classes.radioButtonsColumnHeader
-  }, "Likert Orientation"), /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+  return /*#__PURE__*/_react.default.createElement(RadioButtonsWrapper, null, /*#__PURE__*/_react.default.createElement(RadioButtonsColumnHeader, null, "Likert Orientation"), /*#__PURE__*/_react.default.createElement(_RadioGroup.default, {
     "aria-label": "likertOrientation",
     name: "likertOrientation",
     value: model.likertOrientation,
     onChange: onChangeLikertOrientation
-  }, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
+  }, /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, {
     value: _likertEntities.LIKERT_ORIENTATION.horizontal,
-    control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
-      className: classes.customColor
-    }),
+    control: /*#__PURE__*/_react.default.createElement(CustomColorRadio, null),
     label: "Horizontal"
-  }), /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
+  }), /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, {
     value: _likertEntities.LIKERT_ORIENTATION.vertical,
-    control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
-      className: classes.customColor
-    }),
+    control: /*#__PURE__*/_react.default.createElement(CustomColorRadio, null),
     label: "Vertical"
   })));
-});
-var LikertScale = (0, _styles.withStyles)(styles)(function (props) {
-  var classes = props.classes,
-      model = props.model,
-      onChangeModel = props.onChangeModel;
-
-  var onChangeLikertScale = function onChangeLikertScale(e) {
-    var likertScale = e.target.value;
-    onChangeModel(_objectSpread(_objectSpread({}, model), {}, {
-      likertScale: likertScale,
-      choices: (0, _choiceGenerator["default"])(likertScale, model.likertType)
-    }));
+};
+const LikertScale = props => {
+  const {
+    model,
+    onChangeModel
+  } = props;
+  const onChangeLikertScale = e => {
+    const likertScale = e.target.value;
+    onChangeModel({
+      ...model,
+      likertScale,
+      choices: (0, _choiceGenerator.default)(likertScale, model.likertType)
+    });
   };
-
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.radioButtonsWrapper
-  }, /*#__PURE__*/_react["default"].createElement("p", {
-    className: classes.radioButtonsColumnHeader
-  }, "Likert Scale"), /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+  return /*#__PURE__*/_react.default.createElement(RadioButtonsWrapper, null, /*#__PURE__*/_react.default.createElement(RadioButtonsColumnHeader, null, "Likert Scale"), /*#__PURE__*/_react.default.createElement(_RadioGroup.default, {
     "aria-label": "likertScale",
     name: "likertScale",
     value: model.likertScale,
     onChange: onChangeLikertScale
-  }, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
+  }, /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, {
     value: _likertEntities.LIKERT_SCALE.likert3,
-    control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
-      className: classes.customColor
-    }),
+    control: /*#__PURE__*/_react.default.createElement(CustomColorRadio, null),
     label: "Likert 3"
-  }), /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
+  }), /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, {
     value: _likertEntities.LIKERT_SCALE.likert5,
-    control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
-      className: classes.customColor
-    }),
+    control: /*#__PURE__*/_react.default.createElement(CustomColorRadio, null),
     label: "Likert 5"
-  }), /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
+  }), /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, {
     value: _likertEntities.LIKERT_SCALE.likert7,
-    control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
-      className: classes.customColor
-    }),
+    control: /*#__PURE__*/_react.default.createElement(CustomColorRadio, null),
     label: "Likert 7"
   })));
-});
-var LikertType = (0, _styles.withStyles)(styles)(function (props) {
-  var classes = props.classes,
-      model = props.model,
-      onChangeModel = props.onChangeModel;
-
-  var onChangeLikertType = function onChangeLikertType(e) {
-    var likertType = e.target.value;
-    onChangeModel(_objectSpread(_objectSpread({}, model), {}, {
-      likertType: likertType,
-      choices: (0, _choiceGenerator["default"])(model.likertScale, likertType)
-    }));
+};
+const LikertType = props => {
+  const {
+    model,
+    onChangeModel
+  } = props;
+  const onChangeLikertType = e => {
+    const likertType = e.target.value;
+    onChangeModel({
+      ...model,
+      likertType,
+      choices: (0, _choiceGenerator.default)(model.likertScale, likertType)
+    });
   };
-
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.radioButtonsWrapper
-  }, /*#__PURE__*/_react["default"].createElement("p", {
-    className: classes.radioButtonsColumnHeader
-  }, "Label Type"), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.flexRow
-  }, /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+  return /*#__PURE__*/_react.default.createElement(RadioButtonsWrapper, null, /*#__PURE__*/_react.default.createElement(RadioButtonsColumnHeader, null, "Label Type"), /*#__PURE__*/_react.default.createElement(FlexRow, null, /*#__PURE__*/_react.default.createElement(_RadioGroup.default, {
     "aria-label": "likertLabelType",
     name: "likertLabelType",
     value: model.likertType,
     onChange: onChangeLikertType
-  }, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
+  }, /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, {
     value: _likertEntities.LIKERT_TYPE.agreement,
-    control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
-      className: classes.customColor
-    }),
+    control: /*#__PURE__*/_react.default.createElement(CustomColorRadio, null),
     label: "Agreement"
-  }), /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
+  }), /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, {
     value: _likertEntities.LIKERT_TYPE.frequency,
-    control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
-      className: classes.customColor
-    }),
+    control: /*#__PURE__*/_react.default.createElement(CustomColorRadio, null),
     label: "Frequency"
-  }), /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
+  }), /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, {
     value: _likertEntities.LIKERT_TYPE.yesNo,
-    control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
-      className: classes.customColor
-    }),
+    control: /*#__PURE__*/_react.default.createElement(CustomColorRadio, null),
     label: "Yes/No"
-  })), /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+  })), /*#__PURE__*/_react.default.createElement(_RadioGroup.default, {
     "aria-label": "likertLabelType",
     name: "likertLabelType",
     value: model.likertType,
     onChange: onChangeLikertType
-  }, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
+  }, /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, {
     value: _likertEntities.LIKERT_TYPE.importance,
-    control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
-      className: classes.customColor
-    }),
+    control: /*#__PURE__*/_react.default.createElement(CustomColorRadio, null),
     label: "Importance"
-  }), /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
+  }), /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, {
     value: _likertEntities.LIKERT_TYPE.likelihood,
-    control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
-      className: classes.customColor
-    }),
+    control: /*#__PURE__*/_react.default.createElement(CustomColorRadio, null),
     label: "Likelihood"
-  }), /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
+  }), /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, {
     value: _likertEntities.LIKERT_TYPE.like,
-    control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
-      className: classes.customColor
-    }),
+    control: /*#__PURE__*/_react.default.createElement(CustomColorRadio, null),
     label: "Like"
   }))));
-});
-
-var buildValuesMap = function buildValuesMap(model) {
-  return model.choices.reduce(function (acc, choice) {
-    var accClone = _objectSpread({}, acc);
-
-    var choiceValue = parseInt(choice.value);
-
-    if (!accClone[choiceValue]) {
-      accClone[choiceValue] = 0;
-    }
-
-    return _objectSpread(_objectSpread({}, accClone), {}, (0, _defineProperty2["default"])({}, choiceValue, accClone[choiceValue] + 1));
-  }, {});
 };
-
-var Design = (0, _styles.withStyles)(styles)(function (props) {
-  var classes = props.classes,
-      configuration = props.configuration,
-      imageSupport = props.imageSupport,
-      model = props.model,
-      onChangeModel = props.onChangeModel,
-      onChoiceChanged = props.onChoiceChanged,
-      onConfigurationChanged = props.onConfigurationChanged,
-      onPromptChanged = props.onPromptChanged,
-      onTeacherInstructionsChanged = props.onTeacherInstructionsChanged,
-      uploadSoundSupport = props.uploadSoundSupport;
-
-  var _ref = configuration || {},
-      _ref$contentDimension = _ref.contentDimensions,
-      contentDimensions = _ref$contentDimension === void 0 ? {} : _ref$contentDimension,
-      _ref$prompt = _ref.prompt,
-      prompt = _ref$prompt === void 0 ? {} : _ref$prompt,
-      _ref$scoringType = _ref.scoringType,
-      scoringType = _ref$scoringType === void 0 ? {} : _ref$scoringType,
-      settingsPanelDisabled = _ref.settingsPanelDisabled,
-      _ref$spellCheck = _ref.spellCheck,
-      spellCheck = _ref$spellCheck === void 0 ? {} : _ref$spellCheck,
-      _ref$teacherInstructi = _ref.teacherInstructions,
-      teacherInstructions = _ref$teacherInstructi === void 0 ? {} : _ref$teacherInstructi,
-      _ref$baseInputConfigu = _ref.baseInputConfiguration,
-      baseInputConfiguration = _ref$baseInputConfigu === void 0 ? {} : _ref$baseInputConfigu,
-      _ref$likertChoice = _ref.likertChoice,
-      likertChoice = _ref$likertChoice === void 0 ? {} : _ref$likertChoice;
-
-  var _ref2 = model || {},
-      _ref2$errors = _ref2.errors,
-      errors = _ref2$errors === void 0 ? {} : _ref2$errors,
-      extraCSSRules = _ref2.extraCSSRules,
-      spellCheckEnabled = _ref2.spellCheckEnabled,
-      teacherInstructionsEnabled = _ref2.teacherInstructionsEnabled;
-
-  var promptError = errors.prompt,
-      teacherInstructionsError = errors.teacherInstructions;
-  var valuesMap = buildValuesMap(model);
-  var panelProperties = {
+const buildValuesMap = model => model.choices.reduce((acc, choice) => {
+  const accClone = {
+    ...acc
+  };
+  const choiceValue = parseInt(choice.value);
+  if (!accClone[choiceValue]) {
+    accClone[choiceValue] = 0;
+  }
+  return {
+    ...accClone,
+    [choiceValue]: accClone[choiceValue] + 1
+  };
+}, {});
+const Design = props => {
+  const {
+    configuration,
+    imageSupport,
+    model,
+    onChangeModel,
+    onChoiceChanged,
+    onConfigurationChanged,
+    onPromptChanged,
+    onTeacherInstructionsChanged,
+    uploadSoundSupport
+  } = props;
+  const {
+    contentDimensions = {},
+    prompt = {},
+    scoringType = {},
+    settingsPanelDisabled,
+    spellCheck = {},
+    teacherInstructions = {},
+    baseInputConfiguration = {},
+    likertChoice = {}
+  } = configuration || {};
+  const {
+    errors = {},
+    extraCSSRules,
+    spellCheckEnabled,
+    teacherInstructionsEnabled
+  } = model || {};
+  const {
+    prompt: promptError,
+    teacherInstructions: teacherInstructionsError
+  } = errors;
+  const valuesMap = buildValuesMap(model);
+  const panelProperties = {
     teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
     spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
     scoringType: scoringType.settings && radio(scoringType.label, ['auto', 'rubric'])
   };
-
-  var getPluginProps = function getPluginProps() {
-    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    return Object.assign(_objectSpread({}, baseInputConfiguration), props || {});
+  const getPluginProps = (props = {}) => {
+    return Object.assign({
+      ...baseInputConfiguration
+    }, props || {});
   };
-
-  return /*#__PURE__*/_react["default"].createElement(_configUi.layout.ConfigLayout, {
+  return /*#__PURE__*/_react.default.createElement(_configUi.layout.ConfigLayout, {
     extraCSSRules: extraCSSRules,
     dimensions: contentDimensions,
     hideSettings: settingsPanelDisabled,
-    settings: /*#__PURE__*/_react["default"].createElement(Panel, {
+    settings: /*#__PURE__*/_react.default.createElement(Panel, {
       model: model,
       onChangeModel: onChangeModel,
       configuration: configuration,
@@ -345,11 +278,9 @@ var Design = (0, _styles.withStyles)(styles)(function (props) {
         Properties: panelProperties
       }
     })
-  }, teacherInstructionsEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
-    label: teacherInstructions.label,
-    className: classes.promptHolder
-  }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-    className: classes.prompt,
+  }, teacherInstructionsEnabled && /*#__PURE__*/_react.default.createElement(PromptHolder, {
+    label: teacherInstructions.label
+  }, /*#__PURE__*/_react.default.createElement(_editableHtml.default, {
     markup: model.teacherInstructions || '',
     onChange: onTeacherInstructionsChanged,
     imageSupport: imageSupport,
@@ -357,14 +288,10 @@ var Design = (0, _styles.withStyles)(styles)(function (props) {
     error: teacherInstructionsError,
     spellCheck: spellCheckEnabled,
     uploadSoundSupport: uploadSoundSupport,
-    pluginProps: getPluginProps(teacherInstructions === null || teacherInstructions === void 0 ? void 0 : teacherInstructions.inputConfiguration)
-  }), teacherInstructionsError && /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.errorText
-  }, teacherInstructionsError)), /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
-    label: prompt.label,
-    className: classes.promptHolder
-  }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-    className: classes.prompt,
+    pluginProps: getPluginProps(teacherInstructions?.inputConfiguration)
+  }), teacherInstructionsError && /*#__PURE__*/_react.default.createElement(ErrorText, null, teacherInstructionsError)), /*#__PURE__*/_react.default.createElement(PromptHolder, {
+    label: prompt.label
+  }, /*#__PURE__*/_react.default.createElement(_editableHtml.default, {
     markup: model.prompt,
     onChange: onPromptChanged,
     imageSupport: imageSupport,
@@ -373,127 +300,89 @@ var Design = (0, _styles.withStyles)(styles)(function (props) {
     spellCheck: spellCheckEnabled,
     disableUnderline: true,
     uploadSoundSupport: uploadSoundSupport,
-    pluginProps: getPluginProps(prompt === null || prompt === void 0 ? void 0 : prompt.inputConfiguration)
-  }), promptError && /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.errorText
-  }, promptError)), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.likertOptionsHolder
-  }, /*#__PURE__*/_react["default"].createElement(LikertScale, {
+    pluginProps: getPluginProps(prompt?.inputConfiguration)
+  }), promptError && /*#__PURE__*/_react.default.createElement(ErrorText, null, promptError)), /*#__PURE__*/_react.default.createElement(LikertOptionsHolder, null, /*#__PURE__*/_react.default.createElement(LikertScale, {
     model: model,
     onChangeModel: onChangeModel
-  }), /*#__PURE__*/_react["default"].createElement(LikertType, {
+  }), /*#__PURE__*/_react.default.createElement(LikertType, {
     model: model,
     onChangeModel: onChangeModel
-  }), /*#__PURE__*/_react["default"].createElement(LikertOrientation, {
+  }), /*#__PURE__*/_react.default.createElement(LikertOrientation, {
     model: model,
     onChangeModel: onChangeModel
-  })), model.choices.map(function (choice, index) {
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      key: "choice-".concat(index),
-      className: classes.likertLabelHolder
-    }, /*#__PURE__*/_react["default"].createElement("span", {
-      className: classes.inputFormGroupIndex
-    }, index + 1, "."), /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
-      key: "likert-label-".concat(index),
-      label: 'Likert Label',
-      className: classes.likertLabelInput
-    }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-      className: classes.likertLabelEditableHtml,
-      markup: choice.label || '',
-      onChange: function onChange(c) {
-        return onChoiceChanged(index, _objectSpread(_objectSpread({}, choice), {}, {
-          label: c
-        }));
-      },
-      imageSupport: imageSupport,
-      spellCheck: spellCheckEnabled,
-      uploadSoundSupport: uploadSoundSupport,
-      pluginProps: getPluginProps(likertChoice === null || likertChoice === void 0 ? void 0 : likertChoice.inputConfiguration)
-    })), /*#__PURE__*/_react["default"].createElement("div", {
-      className: classes.likertValueHolder
-    }, /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextField, {
-      label: 'Likert Value',
-      value: choice.value,
-      className: classes.width100,
-      max: 100,
-      min: -100,
-      onChange: function onChange(e, t) {
-        onChoiceChanged(index, _objectSpread(_objectSpread({}, choice), {}, {
-          value: t
-        }));
-      },
-      imageSupport: imageSupport
-    }), valuesMap[choice.value] && valuesMap[choice.value] > 1 && /*#__PURE__*/_react["default"].createElement("p", {
-      className: classes.errorMessage
-    }, "Value should be unique")));
-  }));
-});
-
-var Main = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Main, _React$Component);
-
-  var _super = _createSuper(Main);
-
-  function Main() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Main);
-
-    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), "onChoiceChanged", function (index, choice) {
-      var _this$props = _this.props,
-          model = _this$props.model,
-          onModelChanged = _this$props.onModelChanged;
-      model.choices = model.choices.map(function (choice) {
-        return (0, _merge["default"])({}, choice);
+  })), model.choices.map((choice, index) => /*#__PURE__*/_react.default.createElement(LikertLabelHolder, {
+    key: `choice-${index}`
+  }, /*#__PURE__*/_react.default.createElement(InputFormGroupIndex, null, index + 1, "."), /*#__PURE__*/_react.default.createElement(LikertLabelInput, {
+    key: `likert-label-${index}`,
+    label: 'Likert Label'
+  }, /*#__PURE__*/_react.default.createElement(StyledEditableHtml, {
+    markup: choice.label || '',
+    onChange: c => onChoiceChanged(index, {
+      ...choice,
+      label: c
+    }),
+    imageSupport: imageSupport,
+    spellCheck: spellCheckEnabled,
+    uploadSoundSupport: uploadSoundSupport,
+    pluginProps: getPluginProps(likertChoice?.inputConfiguration)
+  })), /*#__PURE__*/_react.default.createElement(LikertValueHolder, null, /*#__PURE__*/_react.default.createElement(StyledNumberTextField, {
+    label: 'Likert Value',
+    value: choice.value,
+    max: 100,
+    min: -100,
+    onChange: (e, t) => {
+      onChoiceChanged(index, {
+        ...choice,
+        value: t
       });
+    },
+    imageSupport: imageSupport
+  }), valuesMap[choice.value] && valuesMap[choice.value] > 1 && /*#__PURE__*/_react.default.createElement(ErrorMessage, null, "Value should be unique")))));
+};
+class Main extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "onChoiceChanged", (index, choice) => {
+      const {
+        model,
+        onModelChanged
+      } = this.props;
+      model.choices = model.choices.map(choice => (0, _merge.default)({}, choice));
       model.choices.splice(index, 1, choice);
       onModelChanged(model);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onPromptChanged", function (prompt) {
-      _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
-        prompt: prompt
-      }));
+    (0, _defineProperty2.default)(this, "onPromptChanged", prompt => {
+      this.props.onModelChanged({
+        ...this.props.model,
+        prompt
+      });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onTeacherInstructionsChanged", function (teacherInstructions) {
-      _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
-        teacherInstructions: teacherInstructions
-      }));
+    (0, _defineProperty2.default)(this, "onTeacherInstructionsChanged", teacherInstructions => {
+      this.props.onModelChanged({
+        ...this.props.model,
+        teacherInstructions
+      });
     });
-    return _this;
   }
-
-  (0, _createClass2["default"])(Main, [{
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/_react["default"].createElement(Design, (0, _extends2["default"])({}, this.props, {
-        onChangeModel: this.props.onModelChanged,
-        onChoiceChanged: this.onChoiceChanged,
-        onPromptChanged: this.onPromptChanged,
-        onTeacherInstructionsChanged: this.onTeacherInstructionsChanged
-      }));
-    }
-  }]);
-  return Main;
-}(_react["default"].Component);
-
+  render() {
+    return /*#__PURE__*/_react.default.createElement(Design, (0, _extends2.default)({}, this.props, {
+      onChangeModel: this.props.onModelChanged,
+      onChoiceChanged: this.onChoiceChanged,
+      onPromptChanged: this.onPromptChanged,
+      onTeacherInstructionsChanged: this.onTeacherInstructionsChanged
+    }));
+  }
+}
 exports.Main = Main;
-(0, _defineProperty2["default"])(Main, "propTypes", {
-  model: _propTypes["default"].object.isRequired,
-  disableSidePanel: _propTypes["default"].bool,
-  onModelChanged: _propTypes["default"].func.isRequired,
-  onConfigurationChanged: _propTypes["default"].func.isRequired,
-  classes: _propTypes["default"].object.isRequired,
-  imageSupport: _propTypes["default"].shape({
-    add: _propTypes["default"].func.isRequired,
-    "delete": _propTypes["default"].func.isRequired
+(0, _defineProperty2.default)(Main, "propTypes", {
+  model: _propTypes.default.object.isRequired,
+  disableSidePanel: _propTypes.default.bool,
+  onModelChanged: _propTypes.default.func.isRequired,
+  onConfigurationChanged: _propTypes.default.func.isRequired,
+  imageSupport: _propTypes.default.shape({
+    add: _propTypes.default.func.isRequired,
+    delete: _propTypes.default.func.isRequired
   })
 });
-var Styled = (0, _styles.withStyles)(styles)(Main);
-var _default = Styled;
-exports["default"] = _default;
+var _default = exports.default = Main;
 //# sourceMappingURL=main.js.map