@pie-element/multi-trait-rubric 6.3.4-next.0 → 7.0.0-beta.0

package/configure/lib/common.js

@@ -1,274 +1,178 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.UnderlinedInput = exports.SimpleInput = exports.SecondaryBlock = exports.ScorePoint = exports.ScaleSettings = exports.Row = exports.PrimaryBlockWidth = exports.PrimaryBlock = exports.MultiTraitButton = exports.MaxPointsPicker = exports.HeaderHeightLarge = exports.HeaderHeight = exports.ExpandedInput = exports.DragHandleSpace = exports.BlockWidth = exports.Block = exports.Arrow = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _styles = require("@material-ui/core/styles");
-
+var _styles = require("@mui/material/styles");
 var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
-
-var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
-
-var _InputLabel = _interopRequireDefault(require("@material-ui/core/InputLabel"));
-
-var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
-
-var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
-
-var _InputBase = _interopRequireDefault(require("@material-ui/core/InputBase"));
-
+var _Select = _interopRequireDefault(require("@mui/material/Select"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _InputBase = _interopRequireDefault(require("@mui/material/InputBase"));
 var _renderUi = require("@pie-lib/render-ui");
-
-var _grey = _interopRequireDefault(require("@material-ui/core/colors/grey"));
-
+var _colors = require("@mui/material/colors");
 var _utils = require("./utils");
+const InputHeight = '120px';
+const BlockWidth = exports.BlockWidth = 200;
+const PrimaryBlockWidth = exports.PrimaryBlockWidth = 200;
+const DragHandleSpace = exports.DragHandleSpace = 32;
+const HeaderHeight = exports.HeaderHeight = '100px';
+const HeaderHeightLarge = exports.HeaderHeightLarge = '160px';
+const greyBorder = `solid 1px ${_colors.grey[400]}`;
+const Padding = '8px 4px';
 
-var BlockWidth = 200;
-exports.BlockWidth = BlockWidth;
-var PrimaryBlockWidth = 200;
-exports.PrimaryBlockWidth = PrimaryBlockWidth;
-var DragHandleSpace = 32;
-exports.DragHandleSpace = DragHandleSpace;
-var HeaderHeight = '100px';
-exports.HeaderHeight = HeaderHeight;
-var HeaderHeightLarge = '160px';
-exports.HeaderHeightLarge = HeaderHeightLarge;
-var InputHeight = '120px';
-var greyBorder = "solid 1px ".concat(_grey["default"][400]);
-var Padding = '8px 4px';
-var MultiTraitButton = (0, _styles.withStyles)(function (theme) {
-  return {
-    button: {
-      fontSize: theme.typography.fontSize + 2,
-      textAlign: 'right',
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'flex-start',
-      padding: "".concat(theme.spacing.unit * 1.5, "px ").concat(theme.spacing.unit * 2, "px"),
-      width: '114px',
-      background: _renderUi.color.secondaryBackground(),
-      borderRadius: '4px',
-      justifyContent: 'space-around',
-      color: _renderUi.color.text(),
-      cursor: 'pointer'
+// global styles for EditableHtml components
+const GlobalStyles = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  '& .editable-label': {
+    textAlign: 'left',
+    flex: 1,
+    border: 'none',
+    '& div': {
+      padding: 0,
+      border: 'none'
+    },
+    '& > div': {
+      borderLeft: greyBorder,
+      borderRadius: 0,
+      padding: Padding
     }
-  };
-})(function (_ref) {
-  var classes = _ref.classes,
-      children = _ref.children,
-      onClick = _ref.onClick;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.button,
-    onClick: onClick
-  }, /*#__PURE__*/_react["default"].createElement("strong", null, "+"), /*#__PURE__*/_react["default"].createElement("div", null, children));
-});
-exports.MultiTraitButton = MultiTraitButton;
-var PrimaryBlock = (0, _styles.withStyles)({
-  primaryBlock: {
-    width: "".concat(PrimaryBlockWidth, "px"),
-    minWidth: "".concat(PrimaryBlockWidth, "px"),
-    position: 'relative',
-    padding: '0 10px',
-    boxSizing: 'border-box'
-  }
-})(function (_ref2) {
-  var classes = _ref2.classes,
-      children = _ref2.children,
-      className = _ref2.className;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(classes.primaryBlock, className)
-  }, children);
-});
-exports.PrimaryBlock = PrimaryBlock;
-var Block = (0, _styles.withStyles)(function (theme) {
-  return {
-    block: {
-      width: "".concat(BlockWidth, "px"),
-      minWidth: "".concat(BlockWidth, "px"),
-      '& ul, ol': {
-        marginBlockStart: 0,
-        paddingInlineStart: theme.spacing.unit * 2
-      }
+  },
+  '& .editable-level': {
+    background: theme.palette.common.white,
+    width: '60%'
+  },
+  '& .underlined-editable-level': {
+    background: theme.palette.common.white,
+    width: '100%',
+    '& div': {
+      padding: 0,
+      border: 'none'
+    },
+    '& > div': {
+      borderBottom: greyBorder,
+      borderRadius: 0,
+      padding: Padding
     }
-  };
-})(function (_ref3) {
-  var classes = _ref3.classes,
-      children = _ref3.children;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.block
-  }, children);
+  },
+  '& .expanded-input-prompt': {
+    border: 'none',
+    margin: '10px',
+    marginTop: 0
+  }
+}));
+const StyledButton = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize + 2,
+  textAlign: 'right',
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'flex-start',
+  padding: `${theme.spacing(1.5)} ${theme.spacing(2)}`,
+  width: '114px',
+  background: _renderUi.color.secondaryBackground(),
+  borderRadius: '4px',
+  justifyContent: 'space-around',
+  color: _renderUi.color.text(),
+  cursor: 'pointer'
+}));
+const MultiTraitButton = ({
+  children,
+  onClick
+}) => /*#__PURE__*/_react.default.createElement(StyledButton, {
+  onClick: onClick
+}, /*#__PURE__*/_react.default.createElement("strong", null, "+"), /*#__PURE__*/_react.default.createElement("div", null, children));
+exports.MultiTraitButton = MultiTraitButton;
+const PrimaryBlock = exports.PrimaryBlock = (0, _styles.styled)('div')({
+  width: `${PrimaryBlockWidth}px`,
+  minWidth: `${PrimaryBlockWidth}px`,
+  position: 'relative',
+  padding: '0 10px',
+  boxSizing: 'border-box'
 });
-exports.Block = Block;
-var SecondaryBlock = (0, _styles.withStyles)({
-  secondaryBlock: {
-    display: 'flex',
-    overflowX: 'hidden',
-    alignItems: 'flex-end',
-    // this is needed to show the editor toolbar!!!
-    paddingBottom: '30px'
+const Block = exports.Block = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  width: `${BlockWidth}px`,
+  minWidth: `${BlockWidth}px`,
+  '& ul, ol': {
+    marginBlockStart: 0,
+    paddingInlineStart: theme.spacing(2)
   }
-})(function (_ref4) {
-  var classes = _ref4.classes,
-      children = _ref4.children,
-      setRef = _ref4.setRef,
-      width = _ref4.width;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.secondaryBlock,
-    style: {
-      width: width
-    },
-    ref: setRef
-  }, children);
+}));
+const StyledSecondaryBlock = (0, _styles.styled)('div')({
+  display: 'flex',
+  overflowX: 'hidden',
+  alignItems: 'flex-end',
+  // this is needed to show the editor toolbar!!!
+  paddingBottom: '30px'
 });
+const SecondaryBlock = ({
+  children,
+  setRef,
+  width
+}) => /*#__PURE__*/_react.default.createElement(StyledSecondaryBlock, {
+  style: {
+    width: width
+  },
+  ref: setRef
+}, children);
 exports.SecondaryBlock = SecondaryBlock;
-var Row = (0, _styles.withStyles)({
-  row: {
-    display: 'flex'
+const Row = ({
+  children,
+  height
+}) => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    height
   }
-})(function (_ref5) {
-  var classes = _ref5.classes,
-      children = _ref5.children,
-      className = _ref5.className,
-      height = _ref5.height;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(classes.row, className),
-    style: {
-      height: height
-    }
-  }, children);
-});
+}, children);
 exports.Row = Row;
-
-var scorePointsStyles = function scorePointsStyles(theme) {
-  return {
-    scorePointBoxWrapper: {
-      padding: '0 10px'
-    },
-    scorePointBox: {
-      display: 'flex',
-      borderRadius: '4px',
-      background: 'white',
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      border: greyBorder
-    },
-    scorePointBoxDisabled: {
-      background: 'none',
-      justifyContent: 'center',
-      border: '0'
-    },
-    subLabel: {
-      width: '24px',
-      textAlign: 'center'
-    },
-    editableLabel: {
-      textAlign: 'left',
-      flex: 1,
-      border: 'none',
-      '& div': {
-        padding: 0
-      },
-      '& > div': {
-        border: 'none',
-        borderLeft: greyBorder,
-        borderRadius: 0,
-        padding: Padding
-      }
-    },
-    slateEditor: {
-      fontFamily: 'Cerebri'
-    },
-    errorText: {
-      fontSize: theme.typography.fontSize - 2,
-      color: theme.palette.error.main,
-      paddingBottom: theme.spacing.unit
-    }
-  };
-};
-
-var ScorePoint = (0, _styles.withStyles)(function (theme) {
-  return {
-    scorePointBoxWrapper: {
-      padding: '0 10px'
-    },
-    scorePointBox: {
-      display: 'flex',
-      borderRadius: '4px',
-      background: 'white',
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      border: greyBorder
-    },
-    scorePointBoxDisabled: {
-      background: 'none',
-      justifyContent: 'center',
-      border: '0'
-    },
-    subLabel: {
-      width: '24px',
-      textAlign: 'center'
-    },
-    editableLabel: {
-      textAlign: 'left',
-      flex: 1,
-      border: 'none',
-      '& div': {
-        padding: 0
-      },
-      '& > div': {
-        border: 'none',
-        borderLeft: greyBorder,
-        borderRadius: 0,
-        padding: Padding
-      }
-    },
-    slateEditor: {
-      fontFamily: 'Cerebri'
-    },
-    errorText: {
-      fontSize: theme.typography.fontSize - 2,
-      color: theme.palette.error.main,
-      paddingBottom: theme.spacing.unit
-    }
-  };
-})(function (_ref6) {
-  var classes = _ref6.classes,
-      _ref6$error = _ref6.error,
-      error = _ref6$error === void 0 ? '' : _ref6$error,
-      scorePointsValue = _ref6.scorePointsValue,
-      scoreDescriptor = _ref6.scoreDescriptor,
-      pluginProps = _ref6.pluginProps,
-      onChange = _ref6.onChange,
-      showScorePointLabels = _ref6.showScorePointLabels,
-      alignToRight = _ref6.alignToRight,
-      spellCheck = _ref6.spellCheck,
-      uploadSoundSupport = _ref6.uploadSoundSupport,
-      _ref6$imageSupport = _ref6.imageSupport,
-      imageSupport = _ref6$imageSupport === void 0 ? {} : _ref6$imageSupport,
-      _ref6$mathMlOptions = _ref6.mathMlOptions,
-      mathMlOptions = _ref6$mathMlOptions === void 0 ? {} : _ref6$mathMlOptions;
-  var scoreBoxClasses = showScorePointLabels ? classes.scorePointBox : "".concat(classes.scorePointBox, " ").concat(classes.scorePointBoxDisabled);
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.scorePointBoxWrapper
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: scoreBoxClasses
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.subLabel
-  }, scorePointsValue), showScorePointLabels ? /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-    className: classes.editableLabel,
-    classes: {
-      slateEditor: classes.slateEditor
-    },
+const ScorePointBoxWrapper = (0, _styles.styled)('div')({
+  padding: '0 10px'
+});
+const ScorePointBox = (0, _styles.styled)('div')({
+  display: 'flex',
+  borderRadius: '4px',
+  background: 'white',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  border: greyBorder
+});
+const ScorePointBoxDisabled = (0, _styles.styled)('div')({
+  display: 'flex',
+  borderRadius: '4px',
+  background: 'none',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'center',
+  border: '0'
+});
+const SubLabel = (0, _styles.styled)('div')({
+  width: '24px',
+  textAlign: 'center'
+});
+const ScorePoint = ({
+  error = '',
+  scorePointsValue,
+  scoreDescriptor,
+  pluginProps,
+  onChange,
+  showScorePointLabels,
+  alignToRight,
+  spellCheck,
+  uploadSoundSupport,
+  imageSupport = {},
+  mathMlOptions = {}
+}) => {
+  const ScorePointBoxComponent = showScorePointLabels ? ScorePointBox : ScorePointBoxDisabled;
+  return /*#__PURE__*/_react.default.createElement(GlobalStyles, null, /*#__PURE__*/_react.default.createElement(ScorePointBoxWrapper, null, /*#__PURE__*/_react.default.createElement(ScorePointBoxComponent, null, /*#__PURE__*/_react.default.createElement(SubLabel, null, scorePointsValue), showScorePointLabels ? /*#__PURE__*/_react.default.createElement(_editableHtml.default, {
+    className: "editable-label",
     error: error,
     markup: scoreDescriptor,
     placeholder: " Enter Label",
@@ -286,299 +190,236 @@ var ScorePoint = (0, _styles.withStyles)(function (theme) {
       language: 'special'
     }],
     mathMlOptions: mathMlOptions,
-    imageSupport: imageSupport
-  }) : null));
-});
-exports.ScorePoint = ScorePoint;
-
-var inputStyles = function inputStyles(theme) {
-  return {
-    root: {
-      background: theme.palette.common.white,
-      'label + &': {
-        marginTop: theme.spacing.unit * 2.5,
-        marginBottom: 0,
-        width: '80px'
-      }
-    },
-    input: {
-      borderRadius: '4px',
-      position: 'relative',
-      border: greyBorder,
-      fontSize: theme.typography.fontSize,
-      fontFamily: 'Cerebri Sans',
-      padding: "".concat(theme.spacing.unit, "px ").concat(theme.spacing.unit * 1.5, "px"),
-      '&:focus': {
-        borderRadius: '4px'
-      }
+    imageSupport: imageSupport,
+    slateEditorExtraStyles: {
+      fontFamily: 'Cerebri'
     }
-  };
+  }) : null)));
 };
-
-var BootstrapInput = (0, _styles.withStyles)(inputStyles)(_InputBase["default"]);
-
-var createMaxScoreOptions = function createMaxScoreOptions(maxMaxPoints) {
-  return Array.from({
-    length: maxMaxPoints
-  }, function (_, i) {
-    return i + 1;
-  });
-};
-
-var MaxPointsPicker = (0, _styles.withStyles)({})(function (_ref7) {
-  var maxPoints = _ref7.maxPoints,
-      onChange = _ref7.onChange,
-      maxMaxPoints = _ref7.maxMaxPoints;
-  return /*#__PURE__*/_react["default"].createElement(_FormControl["default"], null, /*#__PURE__*/_react["default"].createElement(_InputLabel["default"], null, "Max Points"), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-    value: maxPoints,
-    onChange: onChange,
-    input: /*#__PURE__*/_react["default"].createElement(BootstrapInput, null)
-  }, createMaxScoreOptions(maxMaxPoints).map(function (maxScore) {
-    return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
-      key: "menu-item-".concat(maxScore),
-      value: maxScore
-    }, maxScore);
-  })));
-});
-exports.MaxPointsPicker = MaxPointsPicker;
-var SimpleInput = (0, _styles.withStyles)(function (theme) {
-  return {
-    simpleInput: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      margin: "".concat(theme.spacing.unit * 1.5, "px 0")
-    },
-    editableLevel: {
-      background: theme.palette.common.white,
-      width: '60%'
-    },
-    slateEditor: {
-      fontFamily: 'Cerebri'
+exports.ScorePoint = ScorePoint;
+const StyledBootstrapInput = (0, _styles.styled)(_InputBase.default)(({
+  theme
+}) => ({
+  '&.MuiInputBase-root': {
+    background: theme.palette.common.white,
+    marginTop: theme.spacing(1),
+    'label + &': {
+      width: '80px'
     }
-  };
-})(function (_ref8) {
-  var classes = _ref8.classes,
-      markup = _ref8.markup,
-      onChange = _ref8.onChange,
-      pluginProps = _ref8.pluginProps,
-      label = _ref8.label,
-      spellCheck = _ref8.spellCheck,
-      uploadSoundSupport = _ref8.uploadSoundSupport,
-      _ref8$mathMlOptions = _ref8.mathMlOptions,
-      mathMlOptions = _ref8$mathMlOptions === void 0 ? {} : _ref8$mathMlOptions,
-      _ref8$imageSupport = _ref8.imageSupport,
-      imageSupport = _ref8$imageSupport === void 0 ? {} : _ref8$imageSupport;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.simpleInput
-  }, label && /*#__PURE__*/_react["default"].createElement("div", null, label), /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-    className: classes.editableLevel,
-    classes: {
-      slateEditor: classes.slateEditor
-    },
-    markup: markup,
-    onChange: onChange,
-    placeholder: "Trait Label",
-    pluginProps: pluginProps,
-    activePlugins: _utils.filteredDefaultPlugins,
-    spellCheck: spellCheck,
-    uploadSoundSupport: uploadSoundSupport,
-    languageCharactersProps: [{
-      language: 'spanish'
-    }, {
-      language: 'special'
-    }],
-    mathMlOptions: mathMlOptions,
-    imageSupport: imageSupport
-  }));
-});
-exports.SimpleInput = SimpleInput;
-var UnderlinedInput = (0, _styles.withStyles)(function (theme) {
-  return {
-    underlinedInputWrapper: {
-      width: '100%',
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center'
-    },
-    editableLevel: {
-      background: theme.palette.common.white,
-      width: '100%',
-      '& div': {
-        padding: 0
-      },
-      '& > div': {
-        border: 'none',
-        borderBottom: greyBorder,
-        borderRadius: 0,
-        padding: Padding
-      }
-    },
-    slateEditor: {
-      fontFamily: 'Cerebri'
+  },
+  '& .MuiInputBase-input': {
+    borderRadius: '4px',
+    position: 'relative',
+    border: greyBorder,
+    fontSize: theme.typography.fontSize,
+    fontFamily: 'Cerebri Sans',
+    padding: `${theme.spacing(1)} ${theme.spacing(1.5)}`,
+    '&:focus': {
+      borderRadius: '4px'
     }
-  };
-})(function (_ref9) {
-  var classes = _ref9.classes,
-      error = _ref9.error,
-      markup = _ref9.markup,
-      onChange = _ref9.onChange,
-      pluginProps = _ref9.pluginProps,
-      label = _ref9.label,
-      placeholder = _ref9.placeholder,
-      spellCheck = _ref9.spellCheck,
-      uploadSoundSupport = _ref9.uploadSoundSupport,
-      _ref9$imageSupport = _ref9.imageSupport,
-      imageSupport = _ref9$imageSupport === void 0 ? {} : _ref9$imageSupport,
-      _ref9$mathMlOptions = _ref9.mathMlOptions,
-      mathMlOptions = _ref9$mathMlOptions === void 0 ? {} : _ref9$mathMlOptions;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.underlinedInputWrapper
-  }, label && /*#__PURE__*/_react["default"].createElement("div", null, label), /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-    className: classes.editableLevel,
-    classes: {
-      slateEditor: classes.slateEditor
-    },
-    error: error,
-    markup: markup,
-    onChange: onChange,
-    placeholder: placeholder,
-    pluginProps: pluginProps,
-    activePlugins: _utils.filteredDefaultPlugins,
-    spellCheck: spellCheck,
-    uploadSoundSupport: uploadSoundSupport,
-    languageCharactersProps: [{
-      language: 'spanish'
-    }, {
-      language: 'special'
-    }],
-    mathMlOptions: mathMlOptions,
-    imageSupport: imageSupport
-  }));
+  }
+}));
+const createMaxScoreOptions = maxMaxPoints => Array.from({
+  length: maxMaxPoints
+}, (_, i) => i + 1);
+const MaxPointsPicker = ({
+  maxPoints,
+  onChange,
+  maxMaxPoints
+}) => /*#__PURE__*/_react.default.createElement(_renderUi.InputContainer, {
+  label: "Max Points"
+}, /*#__PURE__*/_react.default.createElement(_Select.default, {
+  value: maxPoints,
+  onChange: onChange,
+  input: /*#__PURE__*/_react.default.createElement(StyledBootstrapInput, null),
+  MenuProps: {
+    transitionDuration: {
+      enter: 225,
+      exit: 195
+    }
+  }
+}, createMaxScoreOptions(maxMaxPoints).map(maxScore => /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+  key: `menu-item-${maxScore}`,
+  value: maxScore
+}, maxScore))));
+exports.MaxPointsPicker = MaxPointsPicker;
+const SimpleInputWrapper = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  margin: `${theme.spacing(1.5)} 0`
+}));
+const SimpleInput = ({
+  markup,
+  onChange,
+  pluginProps,
+  label,
+  spellCheck,
+  uploadSoundSupport,
+  mathMlOptions = {},
+  imageSupport = {}
+}) => /*#__PURE__*/_react.default.createElement(GlobalStyles, null, /*#__PURE__*/_react.default.createElement(SimpleInputWrapper, null, label && /*#__PURE__*/_react.default.createElement("div", null, label), /*#__PURE__*/_react.default.createElement(_editableHtml.default, {
+  className: "editable-level",
+  markup: markup,
+  onChange: onChange,
+  placeholder: "Trait Label",
+  pluginProps: pluginProps,
+  activePlugins: _utils.filteredDefaultPlugins,
+  spellCheck: spellCheck,
+  uploadSoundSupport: uploadSoundSupport,
+  languageCharactersProps: [{
+    language: 'spanish'
+  }, {
+    language: 'special'
+  }],
+  mathMlOptions: mathMlOptions,
+  imageSupport: imageSupport,
+  slateEditorExtraStyles: {
+    fontFamily: 'Cerebri'
+  }
+})));
+exports.SimpleInput = SimpleInput;
+const UnderlinedInputWrapper = (0, _styles.styled)('div')({
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
 });
+const UnderlinedInput = ({
+  error,
+  markup,
+  onChange,
+  pluginProps,
+  label,
+  placeholder,
+  spellCheck,
+  uploadSoundSupport,
+  imageSupport = {},
+  mathMlOptions = {}
+}) => /*#__PURE__*/_react.default.createElement(GlobalStyles, null, /*#__PURE__*/_react.default.createElement(UnderlinedInputWrapper, null, label && /*#__PURE__*/_react.default.createElement("div", null, label), /*#__PURE__*/_react.default.createElement(_editableHtml.default, {
+  className: "underlined-editable-level",
+  error: error,
+  markup: markup,
+  onChange: onChange,
+  placeholder: placeholder,
+  pluginProps: pluginProps,
+  activePlugins: _utils.filteredDefaultPlugins,
+  spellCheck: spellCheck,
+  uploadSoundSupport: uploadSoundSupport,
+  languageCharactersProps: [{
+    language: 'spanish'
+  }, {
+    language: 'special'
+  }],
+  mathMlOptions: mathMlOptions,
+  imageSupport: imageSupport,
+  slateEditorExtraStyles: {
+    fontFamily: 'Cerebri'
+  }
+})));
 exports.UnderlinedInput = UnderlinedInput;
-var ExpandedInput = (0, _styles.withStyles)({
-  slateEditor: {
+const ExpandedInput = ({
+  error,
+  markup,
+  onChange,
+  pluginProps,
+  placeholder,
+  alignToRight,
+  spellCheck,
+  uploadSoundSupport,
+  mathMlOptions = {},
+  imageSupport = {}
+}) => /*#__PURE__*/_react.default.createElement(GlobalStyles, null, /*#__PURE__*/_react.default.createElement(_editableHtml.default, {
+  className: "expanded-input-prompt",
+  error: error,
+  markup: markup,
+  onChange: onChange,
+  placeholder: placeholder,
+  pluginProps: pluginProps,
+  toolbarOpts: alignToRight ? {
+    alignment: 'right'
+  } : {},
+  spellCheck: spellCheck,
+  uploadSoundSupport: uploadSoundSupport,
+  languageCharactersProps: [{
+    language: 'spanish'
+  }, {
+    language: 'special'
+  }],
+  autoWidthToolbar: true,
+  mathMlOptions: mathMlOptions,
+  imageSupport: imageSupport,
+  slateEditorExtraStyles: {
     fontFamily: 'Cerebri',
     height: InputHeight,
     padding: 0
-  },
-  prompt: {
-    border: 'none',
-    margin: '10px',
-    marginTop: 0
   }
-})(function (_ref10) {
-  var classes = _ref10.classes,
-      error = _ref10.error,
-      markup = _ref10.markup,
-      onChange = _ref10.onChange,
-      pluginProps = _ref10.pluginProps,
-      placeholder = _ref10.placeholder,
-      alignToRight = _ref10.alignToRight,
-      spellCheck = _ref10.spellCheck,
-      uploadSoundSupport = _ref10.uploadSoundSupport,
-      _ref10$mathMlOptions = _ref10.mathMlOptions,
-      mathMlOptions = _ref10$mathMlOptions === void 0 ? {} : _ref10$mathMlOptions,
-      _ref10$imageSupport = _ref10.imageSupport,
-      imageSupport = _ref10$imageSupport === void 0 ? {} : _ref10$imageSupport;
-  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-    className: classes.prompt,
-    classes: {
-      slateEditor: classes.slateEditor
-    },
-    error: error,
-    markup: markup,
-    onChange: onChange,
-    placeholder: placeholder,
-    pluginProps: pluginProps,
-    toolbarOpts: alignToRight ? {
-      alignment: 'right'
-    } : {},
-    spellCheck: spellCheck,
-    uploadSoundSupport: uploadSoundSupport,
-    languageCharactersProps: [{
-      language: 'spanish'
-    }, {
-      language: 'special'
-    }],
-    autoWidthToolbar: true,
-    mathMlOptions: mathMlOptions,
-    imageSupport: imageSupport
-  }));
-});
+}));
 exports.ExpandedInput = ExpandedInput;
-var ScaleSettings = (0, _styles.withStyles)({
-  scaleSettings: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'flex-end'
+const ScaleSettings = exports.ScaleSettings = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'flex-end',
+  paddingBottom: '18px',
+  gap: theme.spacing(0.25)
+}));
+const StyledArrow = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  position: 'absolute',
+  zIndex: 10,
+  cursor: 'pointer',
+  right: 0,
+  alignItems: 'flex-start',
+  justifyContent: 'center',
+  background: `linear-gradient(to left, ${theme.palette.common.white}, ${_renderUi.color.background()})`,
+  boxSizing: 'border-box'
+}));
+const StyledInnerGrey = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  position: 'absolute',
+  zIndex: 11,
+  cursor: 'pointer',
+  right: 0,
+  alignItems: 'flex-start',
+  justifyContent: 'center',
+  background: `linear-gradient(to left, ${theme.palette.common.white}, ${_renderUi.color.background()})`,
+  boxSizing: 'border-box',
+  '& svg': {
+    position: 'absolute',
+    bottom: '-24px'
   }
-})(function (_ref11) {
-  var classes = _ref11.classes,
-      children = _ref11.children;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.scaleSettings
-  }, children);
-});
-exports.ScaleSettings = ScaleSettings;
-var Arrow = (0, _styles.withStyles)(function (theme) {
-  return {
-    arrow: {
-      position: 'absolute',
-      zIndex: 10,
-      cursor: 'pointer',
-      right: 0,
-      alignItems: 'flex-start',
-      justifyContent: 'center',
-      background: "linear-gradient(to left, ".concat(theme.palette.common.white, ", ").concat(_renderUi.color.background(), ")"),
-      boxSizing: 'border-box'
-    },
-    innerGrey: {
-      position: 'absolute',
-      zIndex: 11,
-      cursor: 'pointer',
-      right: 0,
-      alignItems: 'flex-start',
-      justifyContent: 'center',
-      background: "linear-gradient(to left, ".concat(theme.palette.common.white, ", ").concat(_renderUi.color.background(), ")"),
-      boxSizing: 'border-box',
-      '& svg': {
-        position: 'absolute',
-        bottom: '-24px'
-      }
-    }
-  };
-})(function (_ref12) {
-  var classes = _ref12.classes,
-      children = _ref12.children,
-      className = _ref12.className,
-      show = _ref12.show,
-      width = _ref12.width,
-      onClick = _ref12.onClick,
-      left = _ref12.left,
-      showLevelTagInput = _ref12.showLevelTagInput;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(classes.arrow, className),
-    style: {
-      height: '-webkit-fill-available',
-      display: show ? 'flex' : 'none',
-      width: width,
-      left: left,
-      background: left ? "linear-gradient(to right, white, ".concat(_renderUi.color.background(), ")") : undefined
-    },
-    onClick: onClick
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(classes.innerGrey, className),
-    style: {
-      display: show ? 'flex' : 'none',
-      width: width,
-      height: showLevelTagInput ? HeaderHeightLarge : HeaderHeight,
-      left: 0,
-      background: left ? "linear-gradient(to right, ".concat(_renderUi.color.secondaryBackground(), ", ").concat(_renderUi.color.background(), ")") : undefined
-    },
-    onClick: onClick
-  }, children));
-});
+}));
+const Arrow = ({
+  children,
+  show,
+  width,
+  onClick,
+  left,
+  showLevelTagInput
+}) => /*#__PURE__*/_react.default.createElement(StyledArrow, {
+  style: {
+    height: '-webkit-fill-available',
+    display: show ? 'flex' : 'none',
+    width: width,
+    left: left,
+    background: left ? `linear-gradient(to right, white, ${_renderUi.color.background()})` : undefined
+  },
+  onClick: onClick
+}, /*#__PURE__*/_react.default.createElement(StyledInnerGrey, {
+  style: {
+    display: show ? 'flex' : 'none',
+    width: width,
+    height: showLevelTagInput ? HeaderHeightLarge : HeaderHeight,
+    left: 0,
+    background: left ? `linear-gradient(to right, ${_renderUi.color.secondaryBackground()}, ${_renderUi.color.background()})` : undefined
+  },
+  onClick: onClick
+}, children));
 exports.Arrow = Arrow;
 //# sourceMappingURL=common.js.map