@pie-element/math-templated 5.3.4-next.0 → 6.0.0-beta.0

package/lib/main.js

@@ -1,884 +1,768 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Main = void 0;
-
-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"));
-
+exports.default = exports.Main = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
-
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
-
+var _styles = require("@mui/material/styles");
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
 var _mathInput = require("@pie-lib/math-input");
-
 var _renderUi = require("@pie-lib/render-ui");
-
 var _mathRendering = require("@pie-lib/math-rendering");
-
 var _mathquill = _interopRequireDefault(require("@pie-framework/mathquill"));
-
 var _maskMarkup = require("@pie-lib/mask-markup");
-
 var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
-
 var _reactDom = _interopRequireDefault(require("react-dom"));
+const StyledUiLayout = (0, _styles.styled)(_renderUi.UiLayout)({
+  color: _renderUi.color.text(),
+  backgroundColor: _renderUi.color.background(),
+  display: 'inline-block'
+});
+const MainContainer = (0, _styles.styled)('div')({
+  width: '100%',
+  position: 'relative',
+  backgroundColor: _renderUi.color.background(),
+  color: _renderUi.color.text()
+});
+const PromptContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2)
+}));
+const CollapsibleContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2)
+}));
+const InputAndKeypadContainer = (0, _styles.styled)('div')({
+  position: 'relative',
+  '& > div > div': {
+    display: 'flex',
+    alignItems: 'baseline',
+    flexWrap: 'wrap'
+  },
+  '& .mq-overarrow-inner': {
+    border: 'none !important',
+    padding: '0 !important'
+  },
+  '& .mq-overarrow-inner-right': {
+    display: 'none !important'
+  },
+  '& .mq-overarrow-inner-left': {
+    display: 'none !important'
+  },
+  '& .mq-overarrow.mq-arrow-both': {
+    minWidth: '1.23em',
+    '& *': {
+      lineHeight: '1 !important'
+    },
+    '&:before': {
+      top: '-0.4em',
+      left: '-1px'
+    },
+    '&:after': {
+      top: '-2.4em',
+      right: '-1px'
+    },
+    '&.mq-empty:after': {
+      top: '-0.45em'
+    }
+  },
+  '& .mq-overarrow.mq-arrow-right': {
+    '&:before': {
+      top: '-0.4em',
+      right: '-1px'
+    }
+  },
+  '& .mq-longdiv-inner': {
+    borderTop: '1px solid !important',
+    paddingTop: '1.5px !important'
+  },
+  '& .mq-parallelogram': {
+    lineHeight: 0.85
+  }
+});
+const Expression = (0, _styles.styled)('div')(({
+  theme,
+  $incorrect,
+  $correct,
+  $showCorrectness,
+  $correctAnswerShown
+}) => ({
+  maxWidth: 'fit-content',
+  ...($incorrect && {
+    borderColor: `${_renderUi.color.incorrect()} !important`
+  }),
+  ...($correct && {
+    borderColor: `${_renderUi.color.correct()} !important`
+  }),
+  ...($showCorrectness && {
+    border: '2px solid'
+  }),
+  ...($correctAnswerShown && {
+    padding: theme.spacing(1),
+    letterSpacing: '0.5px'
+  }),
+  '& > .mq-math-mode': {
+    '& > .mq-root-block': {
+      '& > .mq-editable-field': {
+        minWidth: '10px',
+        padding: theme.spacing(0.25)
+      }
+    },
+    '& sup': {
+      top: 0
+    }
+  }
+}));
+const StyledStatic = (0, _styles.styled)(_mathInput.mq.Static)({
+  '& > .mq-root-block': {
+    '& > .mq-editable-field': {
+      borderColor: _renderUi.color.text()
+    }
+  }
+});
 
-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; }
+// Tooltip styling is handled via slotProps, no need for styled component
+
+const ResponseContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  zIndex: 10,
+  minWidth: '400px',
+  marginTop: theme.spacing(2)
+}));
+const PrintContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(1),
+  pointerEvents: 'none'
+}));
+const SrOnly = (0, _styles.styled)('h2')({
+  position: 'absolute',
+  left: '-10000px',
+  top: 'auto',
+  width: '1px',
+  height: '1px',
+  overflow: 'hidden'
+});
+const Note = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2)
+}));
+const StyledToggle = (0, _styles.styled)(_correctAnswerToggle.default)(({
+  theme
+}) => ({
+  color: _renderUi.color.text(),
+  marginBottom: theme.spacing(2)
+}));
+
+// CSS for classes used in HTML strings and classList operations
+if (typeof document !== 'undefined') {
+  const styleId = 'math-templated-main-styles';
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = `
+      .block-container {
+        margin: 8px !important;
+        display: inline-flex;
+        border: 2px solid grey !important;
+      }
+      .block-response {
+        flex: 2;
+        color: grey;
+        background: rgba(0, 0, 0, 0.04);
+        font-size: 0.8rem !important;
+        padding: 4px !important;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-right: 2px solid #bdbdbd !important;
+      }
+      .block-math {
+        color: ${_renderUi.color.text()};
+        background-color: ${_renderUi.color.background()};
+        padding: 4px !important;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 8;
+      }
+      .block-math > .mq-math-mode > .mq-hasCursor > .mq-cursor {
+        display: none;
+      }
+      .correct {
+        border-color: ${_renderUi.color.correct()} !important;
+      }
+      .incorrect {
+        border-color: ${_renderUi.color.incorrect()} !important;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+}
+let registered = false;
 
-var registered = false; // Define a regex pattern to match {{number}}
+// Define a regex pattern to match {{number}}
+const REGEX = /(\{\{\d+\}\})/gm;
+const DEFAULT_KEYPAD_VARIANT = 6;
 
-var REGEX = /(\{\{\d+\}\})/gm;
-var DEFAULT_KEYPAD_VARIANT = 6; // !!! If you're using Chrome but have selected the "iPad" device in Chrome Developer Tools, the navigator.userAgent string may still report as
+// !!! If you're using Chrome but have selected the "iPad" device in Chrome Developer Tools, the navigator.userAgent string may still report as
 //  Safari because Chrome on iOS actually uses the Safari rendering engine under the hood due to Apple's restrictions on third-party browser engines.
 // When you select the "iPad" device in Chrome Developer Tools, you're essentially emulating the behavior of Safari on an iPad, including the user agent string.
 //  Therefore, even though you're using Chrome, the user agent string will resemble that of Safari on an iPad.
 // Since the regular expression /^((?!chrome|android).)*safari/i checks for the presence of "safari" in the user agent string while excluding "chrome" and "android",
 //  it will return true in this case because "safari" is present in the user agent string emulated by Chrome when in iPad mode.
-
-var IS_SAFARI = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-
-function generateAdditionalKeys() {
-  var keyData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return keyData.map(function (key) {
-    return {
-      name: key,
-      latex: key,
-      write: key,
-      label: key
-    };
-  });
+const IS_SAFARI = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+function generateAdditionalKeys(keyData = []) {
+  return keyData.map(key => ({
+    name: key,
+    latex: key,
+    write: key,
+    label: key
+  }));
 }
-
-function getKeyPadWidth() {
-  var additionalKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var equationEditor = arguments.length > 1 ? arguments[1] : undefined;
+function getKeyPadWidth(additionalKeys = [], equationEditor) {
   return Math.floor(additionalKeys.length / 5) * 30 + (equationEditor === 'miscellaneous' ? 600 : 500);
 }
-
 function splitByParts(text) {
   // Use the regex pattern to split the text
-  var parts = text.split(REGEX); // Filter out empty strings that might result from splitting
-
-  return parts.filter(function (part) {
-    return part;
-  });
+  const parts = text.split(REGEX);
+  // Filter out empty strings that might result from splitting
+  return parts.filter(part => part);
 }
-
 function prepareForStatic(model, state) {
-  var _ref = model || {},
-      responses = _ref.responses,
-      disabled = _ref.disabled,
-      markup = _ref.markup,
-      printMode = _ref.printMode,
-      alwaysShowCorrect = _ref.alwaysShowCorrect;
-
+  const {
+    responses,
+    disabled,
+    markup,
+    printMode,
+    alwaysShowCorrect
+  } = model || {};
   if (markup) {
     if (state.showCorrect) {
-      return Object.keys(responses || {}).reduce(function (acc, responseKey) {
-        var _responses$responseKe;
-
-        acc[responseKey] = responses === null || responses === void 0 ? void 0 : (_responses$responseKe = responses[responseKey]) === null || _responses$responseKe === void 0 ? void 0 : _responses$responseKe.answer;
+      return Object.keys(responses || {}).reduce((acc, responseKey) => {
+        acc[responseKey] = responses?.[responseKey]?.answer;
         return acc;
       }, {});
     }
-
-    var splitted = splitByParts(markup);
-    return splitted.reduce(function (acc, split) {
+    const splitted = splitByParts(markup);
+    return splitted.reduce((acc, split) => {
       if (split.match(REGEX)) {
-        var responseKey = Main.getResponseKey(split);
-        var answer = state.session.answers["r".concat(responseKey)];
-
+        const responseKey = Main.getResponseKey(split);
+        const answer = state.session.answers[`r${responseKey}`];
         if (printMode && !alwaysShowCorrect) {
-          var blankSpace = '\\ \\ '.repeat(30) + '\\embed{newLine}[] ';
-          return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2["default"])({}, responseKey, "\\MathQuillMathField[r".concat(responseKey, "]{").concat(blankSpace.repeat(3), "}")));
+          const blankSpace = '\\ \\ '.repeat(30) + '\\embed{newLine}[] ';
+          return {
+            ...acc,
+            [responseKey]: `\\MathQuillMathField[r${responseKey}]{${blankSpace.repeat(3)}}`
+          };
         }
-
         if (disabled) {
-          return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2["default"])({}, responseKey, "\\embed{answerBlock}[r".concat(responseKey, "]")));
+          return {
+            ...acc,
+            [responseKey]: `\\embed{answerBlock}[r${responseKey}]`
+          };
         }
-
-        return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2["default"])({}, responseKey, "\\MathQuillMathField[r".concat(responseKey, "]{").concat(answer && answer.value || '', "}")));
+        return {
+          ...acc,
+          [responseKey]: `\\MathQuillMathField[r${responseKey}]{${answer && answer.value || ''}}`
+        };
       }
-
       return acc;
     }, {});
   }
 }
-
-var Main = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Main, _React$Component);
-
-  var _super = _createSuper(Main);
-
-  // removes {{ and }} and returns only key response. Eg: {{0}} => 0
-  function Main(props) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Main);
-    _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleAnswerBlockDomUpdate", function () {
-      var _this$props = _this.props,
-          model = _this$props.model,
-          classes = _this$props.classes;
-      var _this$state = _this.state,
-          session = _this$state.session,
-          showCorrect = _this$state.showCorrect;
-      var answers = session.answers;
-
-      if (_this.root && model.disabled && !showCorrect) {
-        Object.keys(answers).forEach(function (answerId) {
-          var el = _this.root.querySelector("#".concat(answerId));
-
-          var indexEl = _this.root.querySelector("#".concat(answerId, "Index"));
-
+class Main extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "handleAnswerBlockDomUpdate", () => {
+      const {
+        model
+      } = this.props;
+      const {
+        session,
+        showCorrect
+      } = this.state;
+      const answers = session.answers;
+      if (this.root && model.disabled && !showCorrect) {
+        Object.keys(answers).forEach(answerId => {
+          const el = this.root.querySelector(`#${answerId}`);
+          const indexEl = this.root.querySelector(`#${answerId}Index`);
           if (el) {
-            var MQ = _mathquill["default"].getInterface(2);
-
-            var answer = answers[answerId];
+            let MQ = _mathquill.default.getInterface(2);
+            const answer = answers[answerId];
             el.textContent = answer && answer.value || '';
-
             if (model.view) {
-              el.parentElement.parentElement.classList.remove(classes.correct);
-              el.parentElement.parentElement.classList.remove(classes.incorrect);
+              el.parentElement.parentElement.classList.remove('correct');
+              el.parentElement.parentElement.classList.remove('incorrect');
             }
-
             MQ.StaticMath(el);
             indexEl.textContent = 'R';
           }
         });
       }
-
-      (0, _mathRendering.renderMath)(_this.root);
+      (0, _mathRendering.renderMath)(this.root);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onSubFieldFocus", function (id) {
-      _this.setState({
+    (0, _defineProperty2.default)(this, "onSubFieldFocus", id => {
+      this.setState({
         activeAnswerBlock: id
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toNodeData", function (data) {
+    (0, _defineProperty2.default)(this, "toNodeData", data => {
       if (!data) {
         return;
       }
-
-      var type = data.type,
-          value = data.value;
+      const {
+        type,
+        value
+      } = data;
       if (type === 'command' || type === 'cursor') return data;
-      if (type === 'answer') return _objectSpread({
-        type: 'answer'
-      }, data);
+      if (type === 'answer') return {
+        type: 'answer',
+        ...data
+      };
       if (value === 'clear') return {
         type: 'clear'
       };
       return {
         type: 'write',
-        value: value
+        value
       };
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setInput", function (input) {
-      _this.input = input;
+    (0, _defineProperty2.default)(this, "setInput", input => {
+      this.input = input;
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onClick", function (data) {
-      var c = _this.toNodeData(data);
-
+    (0, _defineProperty2.default)(this, "onClick", data => {
+      const c = this.toNodeData(data);
       if (c.type === 'clear') {
-        _this.input.clear();
+        this.input.clear();
       } else if (c.type === 'command') {
         if (Array.isArray(c.value)) {
-          c.value.forEach(function (vv) {
-            _this.input.cmd(vv);
+          c.value.forEach(vv => {
+            this.input.cmd(vv);
           });
         } else {
-          _this.input.cmd(c.value);
+          this.input.cmd(c.value);
         }
       } else if (c.type === 'cursor') {
-        _this.input.keystroke(c.value);
+        this.input.keystroke(c.value);
       } else {
-        _this.input.write(c.value);
+        this.input.write(c.value);
       }
-
-      _this.input.focus();
+      this.input.focus();
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "callOnSessionChange", function () {
-      var onSessionChange = _this.props.onSessionChange;
-
+    (0, _defineProperty2.default)(this, "callOnSessionChange", () => {
+      const {
+        onSessionChange
+      } = this.props;
       if (onSessionChange) {
-        onSessionChange(_this.state.session);
+        onSessionChange(this.state.session);
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleShowCorrect", function (show) {
-      _this.setState({
+    (0, _defineProperty2.default)(this, "toggleShowCorrect", show => {
+      this.setState({
         showCorrect: show
-      }, _this.handleAnswerBlockDomUpdate);
+      }, this.handleAnswerBlockDomUpdate);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "subFieldChanged", function (name, subfieldValue) {
+    (0, _defineProperty2.default)(this, "subFieldChanged", (name, subfieldValue) => {
       (0, _mathInput.updateSpans)();
-
       if (name) {
-        _this.setState(function (state) {
-          return {
-            session: _objectSpread(_objectSpread({}, state.session), {}, {
-              answers: _objectSpread(_objectSpread({}, state.session.answers), {}, (0, _defineProperty2["default"])({}, name, {
+        this.setState(state => ({
+          session: {
+            ...state.session,
+            answers: {
+              ...state.session.answers,
+              [name]: {
                 value: subfieldValue
-              }))
-            })
-          };
-        }, _this.callOnSessionChange);
+              }
+            }
+          }
+        }), this.callOnSessionChange);
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getFieldName", function (changeField, fields) {
-      var answers = _this.state.session.answers;
-
+    (0, _defineProperty2.default)(this, "getFieldName", (changeField, fields) => {
+      const {
+        answers
+      } = this.state.session;
       if (Object.keys(answers || {}).length) {
-        var keys = Object.keys(answers);
-        return keys.find(function (k) {
-          var tf = fields[k];
+        const keys = Object.keys(answers);
+        return keys.find(k => {
+          const tf = fields[k];
           return tf && tf.id == changeField.id;
         });
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onBlur", function (e) {
-      var _ref2 = e || {},
-          relatedTarget = _ref2.relatedTarget,
-          currentTarget = _ref2.currentTarget;
-
-      function getParentWithRoleTooltip(element) {
-        var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    (0, _defineProperty2.default)(this, "onBlur", e => {
+      const {
+        relatedTarget,
+        currentTarget
+      } = e || {};
+      function getParentWithRoleTooltip(element, depth = 0) {
         // only run this max 16 times
         if (!element || depth >= 16) return null;
-        var parent = element.offsetParent;
+        const parent = element.offsetParent;
         if (!parent) return null;
-
         if (parent.getAttribute('role') === 'tooltip') {
           return parent;
         }
-
         return getParentWithRoleTooltip(parent, depth + 1);
       }
-
-      function getDeepChildDataKeypad(element) {
-        var _element$children;
-
-        var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      function getDeepChildDataKeypad(element, depth = 0) {
         // only run this max 4 times
         if (!element || depth >= 4) return null;
-        var child = element === null || element === void 0 ? void 0 : (_element$children = element.children) === null || _element$children === void 0 ? void 0 : _element$children[0];
+        const child = element?.children?.[0];
         if (!child) return null;
-
         if (child.attributes && child.attributes['data-keypad']) {
           return child;
         }
-
         return getDeepChildDataKeypad(child, depth + 1);
       }
-
-      var parentWithTooltipRole = getParentWithRoleTooltip(relatedTarget);
-      var childWithDataKeypad = parentWithTooltipRole ? getDeepChildDataKeypad(parentWithTooltipRole) : null;
-
-      if (!relatedTarget || !currentTarget || !(childWithDataKeypad !== null && childWithDataKeypad !== void 0 && childWithDataKeypad.attributes['data-keypad'])) {
-        _this.setState({
+      const parentWithTooltipRole = getParentWithRoleTooltip(relatedTarget);
+      const childWithDataKeypad = parentWithTooltipRole ? getDeepChildDataKeypad(parentWithTooltipRole) : null;
+      if (!relatedTarget || !currentTarget || !childWithDataKeypad?.attributes['data-keypad']) {
+        this.setState({
           activeAnswerBlock: ''
         });
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderTeacherInstructions", function () {
-      var _this$props2 = _this.props,
-          model = _this$props2.model,
-          classes = _this$props2.classes;
-
-      var _ref3 = model || {},
-          teacherInstructions = _ref3.teacherInstructions,
-          animationsDisabled = _ref3.animationsDisabled;
-
-      var showTeacherInstructions = teacherInstructions && ((0, _renderUi.hasText)(teacherInstructions) || (0, _renderUi.hasMedia)(teacherInstructions));
-
-      var teacherInstructionsDiv = /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+    (0, _defineProperty2.default)(this, "renderTeacherInstructions", () => {
+      const {
+        model
+      } = this.props;
+      const {
+        teacherInstructions,
+        animationsDisabled
+      } = model || {};
+      const showTeacherInstructions = teacherInstructions && ((0, _renderUi.hasText)(teacherInstructions) || (0, _renderUi.hasMedia)(teacherInstructions));
+      const teacherInstructionsDiv = /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
         defaultClassName: "teacher-instructions",
         prompt: teacherInstructions
       });
-
-      return showTeacherInstructions && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.collapsible
-      }, !animationsDisabled ? /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+      return showTeacherInstructions && /*#__PURE__*/_react.default.createElement(CollapsibleContainer, null, !animationsDisabled ? /*#__PURE__*/_react.default.createElement(_renderUi.Collapsible, {
         labels: {
           hidden: 'Show Teacher Instructions',
           visible: 'Hide Teacher Instructions'
         }
       }, teacherInstructionsDiv) : teacherInstructionsDiv);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderRationale", function () {
-      var _this$props3 = _this.props,
-          model = _this$props3.model,
-          classes = _this$props3.classes;
-
-      var _ref4 = model || {},
-          rationale = _ref4.rationale,
-          animationsDisabled = _ref4.animationsDisabled;
-
-      var rationaleDiv = /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+    (0, _defineProperty2.default)(this, "renderRationale", () => {
+      const {
+        model
+      } = this.props;
+      const {
+        rationale,
+        animationsDisabled
+      } = model || {};
+      const rationaleDiv = /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
         prompt: rationale
       });
-
-      var showRationale = rationale && ((0, _renderUi.hasText)(rationale) || (0, _renderUi.hasMedia)(rationale));
-      return showRationale && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.collapsible
-      }, !animationsDisabled ? /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+      const showRationale = rationale && ((0, _renderUi.hasText)(rationale) || (0, _renderUi.hasMedia)(rationale));
+      return showRationale && /*#__PURE__*/_react.default.createElement(CollapsibleContainer, null, !animationsDisabled ? /*#__PURE__*/_react.default.createElement(_renderUi.Collapsible, {
         labels: {
           hidden: 'Show Rationale',
           visible: 'Hide Rationale'
         }
       }, rationaleDiv) : rationaleDiv);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderPlayerContent", function () {
-      var _this$props4 = _this.props,
-          model = _this$props4.model,
-          classes = _this$props4.classes;
-      var _this$state2 = _this.state,
-          activeAnswerBlock = _this$state2.activeAnswerBlock,
-          showCorrect = _this$state2.showCorrect,
-          session = _this$state2.session;
-
-      var _ref5 = model || {},
-          correctness = _ref5.correctness,
-          disabled = _ref5.disabled,
-          view = _ref5.view,
-          responses = _ref5.responses,
-          equationEditor = _ref5.equationEditor,
-          customKeys = _ref5.customKeys,
-          feedback = _ref5.feedback,
-          _ref5$env = _ref5.env;
-
-      _ref5$env = _ref5$env === void 0 ? {} : _ref5$env;
-      var mode = _ref5$env.mode,
-          printMode = _ref5.printMode,
-          alwaysShowCorrect = _ref5.alwaysShowCorrect;
-      var emptyResponse = (0, _isEmpty["default"])(responses);
-      var additionalKeys = generateAdditionalKeys(customKeys);
-      var statics = prepareForStatic(model, _this.state) || '';
-      var studentPrintMode = printMode && !alwaysShowCorrect;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.inputAndKeypadContainer
-      }, /*#__PURE__*/_react["default"].createElement(_maskMarkup.Customizable, {
+    (0, _defineProperty2.default)(this, "renderPlayerContent", () => {
+      const {
+        model
+      } = this.props;
+      const {
+        activeAnswerBlock,
+        showCorrect,
+        session,
+        tooltipContainerRef
+      } = this.state;
+      const {
+        correctness,
+        disabled,
+        view,
+        responses,
+        equationEditor,
+        customKeys,
+        feedback,
+        env: {
+          mode
+        } = {},
+        printMode,
+        alwaysShowCorrect
+      } = model || {};
+      const emptyResponse = (0, _isEmpty.default)(responses);
+      const additionalKeys = generateAdditionalKeys(customKeys);
+      const statics = prepareForStatic(model, this.state) || '';
+      const studentPrintMode = printMode && !alwaysShowCorrect;
+      return /*#__PURE__*/_react.default.createElement(InputAndKeypadContainer, null, /*#__PURE__*/_react.default.createElement(_maskMarkup.Customizable, {
         disabled: disabled,
-        markup: model.markup // TODO remove the need of value?
+        markup: model.markup
+        // TODO remove the need of value?
         ,
         value: {},
-        customMarkMarkupComponent: function customMarkMarkupComponent(id) {
-          var _cx;
-
-          var responseIsCorrect = mode === 'evaluate' && feedback && feedback[id];
-
-          var MQStatic = /*#__PURE__*/_react["default"].createElement(_mathInput.mq.Static, {
-            className: classes["static"],
-            ref: function ref(mqStatic) {
-              _this.mqStatic = mqStatic || _this.mqStatic;
+        customMarkMarkupComponent: id => {
+          const responseIsCorrect = mode === 'evaluate' && feedback && feedback[id];
+          const MQStatic = /*#__PURE__*/_react.default.createElement(StyledStatic, {
+            ref: mqStatic => {
+              this.mqStatic = mqStatic || this.mqStatic;
             },
             latex: statics[id],
-            onSubFieldChange: _this.subFieldChanged,
-            getFieldName: _this.getFieldName,
-            setInput: _this.setInput,
-            onSubFieldFocus: _this.onSubFieldFocus,
-            onBlur: _this.onBlur
+            onSubFieldChange: this.subFieldChanged,
+            getFieldName: this.getFieldName,
+            setInput: this.setInput,
+            onSubFieldFocus: this.onSubFieldFocus,
+            onBlur: this.onBlur
           });
-
-          return /*#__PURE__*/_react["default"].createElement("div", {
-            className: (0, _classnames["default"])(classes.expression, (_cx = {}, (0, _defineProperty2["default"])(_cx, classes.incorrect, !emptyResponse && !responseIsCorrect && !showCorrect), (0, _defineProperty2["default"])(_cx, classes.correct, !emptyResponse && (responseIsCorrect || showCorrect)), (0, _defineProperty2["default"])(_cx, classes.showCorrectness, !emptyResponse && disabled && correctness && !view), (0, _defineProperty2["default"])(_cx, classes.correctAnswerShown, showCorrect), _cx))
-          }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-            ref: function ref(_ref6) {
-              return _this.setTooltipRef(_ref6);
-            },
+          return /*#__PURE__*/_react.default.createElement(Expression, {
+            ref: tooltipContainerRef,
+            $incorrect: !emptyResponse && !responseIsCorrect && !showCorrect,
+            $correct: !emptyResponse && (responseIsCorrect || showCorrect),
+            $showCorrectness: !emptyResponse && disabled && correctness && !view,
+            $correctAnswerShown: showCorrect
+          }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+            ref: ref => this.setTooltipRef(ref),
             enterTouchDelay: 0,
             interactive: true,
-            open: activeAnswerBlock === "r".concat(id),
-            classes: {
-              tooltip: classes.keypadTooltip,
-              popper: classes.keypadTooltipPopper
-            },
-            title: Object.keys(session.answers).map(function (answerId) {
-              return answerId === activeAnswerBlock && !(showCorrect || disabled) && /*#__PURE__*/_react["default"].createElement("div", {
-                "data-keypad": true,
-                key: answerId,
-                className: classes.responseContainer,
-                style: {
-                  width: getKeyPadWidth(additionalKeys, equationEditor)
+            open: activeAnswerBlock === `r${id}`,
+            slotProps: {
+              popper: {
+                container: tooltipContainerRef?.current || undefined,
+                placement: 'bottom-end',
+                sx: {
+                  backgroundColor: 'transparent',
+                  width: '650px',
+                  opacity: 1,
+                  '& .MuiTooltip-arrow': {
+                    display: 'none'
+                  }
+                },
+                modifiers: {
+                  preventOverflow: {
+                    enabled: true,
+                    boundariesElement: 'body'
+                  },
+                  flip: {
+                    enabled: false
+                  }
                 }
-              }, /*#__PURE__*/_react["default"].createElement(_mathInput.HorizontalKeypad, {
-                additionalKeys: additionalKeys,
-                mode: equationEditor || DEFAULT_KEYPAD_VARIANT,
-                onClick: _this.onClick
-              })) || null;
-            })
-          }, studentPrintMode ? /*#__PURE__*/_react["default"].createElement("div", {
-            className: classes.printContainer
-          }, MQStatic) : MQStatic));
+              },
+              tooltip: {
+                sx: {
+                  fontSize: 'initial',
+                  backgroundColor: 'transparent',
+                  width: '600px',
+                  marginTop: 0,
+                  paddingTop: 0,
+                  boxShadow: 'none'
+                }
+              }
+            },
+            title: Object.keys(session.answers).map(answerId => answerId === activeAnswerBlock && !(showCorrect || disabled) && /*#__PURE__*/_react.default.createElement(ResponseContainer, {
+              "data-keypad": true,
+              key: answerId,
+              style: {
+                width: getKeyPadWidth(additionalKeys, equationEditor)
+              }
+            }, /*#__PURE__*/_react.default.createElement(_mathInput.HorizontalKeypad, {
+              additionalKeys: additionalKeys,
+              mode: equationEditor || DEFAULT_KEYPAD_VARIANT,
+              onClick: this.onClick
+            })) || null)
+          }, studentPrintMode ? /*#__PURE__*/_react.default.createElement(PrintContainer, null, MQStatic) : /*#__PURE__*/_react.default.createElement("div", null, MQStatic)));
         }
       }));
     });
-    var _answers = {};
-
-    var _ref7 = props || {},
-        _model = _ref7.model,
-        _session = _ref7.session;
-
-    var _ref8 = _model || {},
-        markup = _ref8.markup,
-        _alwaysShowCorrect = _ref8.alwaysShowCorrect;
-
-    var _ref9 = _session || {},
-        sessionAnswers = _ref9.answers;
-
+    const _answers = {};
+    const {
+      model: _model,
+      session: _session
+    } = props || {};
+    const {
+      markup,
+      alwaysShowCorrect: _alwaysShowCorrect
+    } = _model || {};
+    const {
+      answers: sessionAnswers
+    } = _session || {};
     if (markup) {
       // build out local state model using responses declared in markup
-      (markup || '').replace(REGEX, function (response) {
-        var responseKey = Main.getResponseKey(response);
-        var sessionAnswerForResponse = sessionAnswers && sessionAnswers["r".concat(responseKey)];
-        _answers["r".concat(responseKey)] = {
-          value: (sessionAnswerForResponse === null || sessionAnswerForResponse === void 0 ? void 0 : sessionAnswerForResponse.value) || ''
+      (markup || '').replace(REGEX, response => {
+        const responseKey = Main.getResponseKey(response);
+        const sessionAnswerForResponse = sessionAnswers && sessionAnswers[`r${responseKey}`];
+        _answers[`r${responseKey}`] = {
+          value: sessionAnswerForResponse?.value || ''
         };
       });
     }
-
-    _this.state = {
-      session: _objectSpread(_objectSpread({}, props.session), {}, {
+    this.state = {
+      session: {
+        ...props.session,
         answers: _answers
-      }),
+      },
       activeAnswerBlock: '',
-      showCorrect: _alwaysShowCorrect || false
+      showCorrect: _alwaysShowCorrect || false,
+      tooltipContainerRef: /*#__PURE__*/_react.default.createRef()
     };
-    return _this;
   }
-
-  (0, _createClass2["default"])(Main, [{
-    key: "UNSAFE_componentWillMount",
-    value: function UNSAFE_componentWillMount() {
-      var classes = this.props.classes;
-
-      if (typeof window !== 'undefined') {
-        var MQ = _mathquill["default"].getInterface(2);
-
-        if (!registered) {
-          MQ.registerEmbed('answerBlock', function (data) {
-            return {
-              htmlString: "<div class=\"".concat(classes.blockContainer, "\">\n              <div class=\"").concat(classes.blockResponse, "\" id=\"").concat(data, "Index\">R</div>\n              <div class=\"").concat(classes.blockMath, "\">\n                <span id=\"").concat(data, "\"></span>\n              </div>\n            </div>"),
-              text: function text() {
-                return 'text';
-              },
-              latex: function latex() {
-                return "\\embed{answerBlock}[".concat(data, "]");
-              }
-            };
-          });
-          registered = true;
-        }
-      }
-    }
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var _this2 = this;
-
-      var model = this.props.model;
-
-      var _ref10 = nextProps || {},
-          _ref10$model = _ref10.model,
-          nextModel = _ref10$model === void 0 ? {} : _ref10$model;
-
-      var _ref11 = model || {},
-          _ref11$markup = _ref11.markup,
-          markup = _ref11$markup === void 0 ? '' : _ref11$markup,
-          _ref11$env = _ref11.env,
-          env = _ref11$env === void 0 ? {} : _ref11$env;
-
-      var _nextModel$markup = nextModel.markup,
-          nextMarkup = _nextModel$markup === void 0 ? '' : _nextModel$markup,
-          _nextModel$env = nextModel.env,
-          nextEnv = _nextModel$env === void 0 ? {} : _nextModel$env,
-          _nextModel$alwaysShow = nextModel.alwaysShowCorrect,
-          nextAlwaysShowCorrect = _nextModel$alwaysShow === void 0 ? false : _nextModel$alwaysShow;
-
-      var isEvaluateMode = function isEvaluateMode(env) {
-        return env && env.mode === 'evaluate';
-      };
-
-      if (!isEvaluateMode(env) || !isEvaluateMode(nextEnv)) {
-        this.setState(function (prevState) {
-          return _objectSpread(_objectSpread({}, prevState.session), {}, {
-            showCorrect: false
-          });
-        });
+  UNSAFE_componentWillMount() {
+    if (typeof window !== 'undefined') {
+      let MQ = _mathquill.default.getInterface(2);
+      if (!registered) {
+        MQ.registerEmbed('answerBlock', data => ({
+          htmlString: `<div class="block-container">
+              <div class="block-response" id="${data}Index">R</div>
+              <div class="block-math">
+                <span id="${data}"></span>
+              </div>
+            </div>`,
+          text: () => 'text',
+          latex: () => `\\embed{answerBlock}[${data}]`
+        }));
+        registered = true;
       }
-
-      if (nextAlwaysShowCorrect) {
-        this.setState({
-          showCorrect: true
-        });
-      }
-
-      var matches = markup.match(REGEX);
-      var nextMatches = nextMarkup.match(REGEX); // If markup changed, and we no longer have the same response area, the session needs to be updated
-
-      if (!(0, _isEqual["default"])(matches, nextMatches)) {
-        var newAnswers = {};
-        var answers = this.state.session.answers;
-        (nextMatches || []).forEach(function (nextMatch) {
-          var responseKey = Main.getResponseKey(nextMatch);
-          var sessionAnswerForResponse = answers && answers["r".concat(responseKey)]; // build out local state model using responses declared in markup
-
-          newAnswers["r".concat(responseKey)] = {
-            value: (sessionAnswerForResponse === null || sessionAnswerForResponse === void 0 ? void 0 : sessionAnswerForResponse.value) || ''
-          };
-        });
-        this.setState(function (state) {
-          return {
-            session: _objectSpread(_objectSpread({}, state.session), {}, {
-              answers: newAnswers
-            })
-          };
-        }, function () {
-          _this2.props.onSessionChange(_this2.state.session);
-
-          _this2.handleAnswerBlockDomUpdate();
-        });
-      }
-    }
-  }, {
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps, nextState) {
-      var sameModel = (0, _isEqual["default"])(this.props.model, nextProps.model);
-      var sameState = (0, _isEqual["default"])(this.state, nextState);
-      return !sameModel || !sameState;
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this3 = this;
-
-      this.handleAnswerBlockDomUpdate();
-      setTimeout(function () {
-        return (0, _mathRendering.renderMath)(_this3.root);
-      }, 100);
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      this.handleAnswerBlockDomUpdate();
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      model
+    } = this.props;
+    const {
+      model: nextModel = {}
+    } = nextProps || {};
+    const {
+      markup = '',
+      env = {}
+    } = model || {};
+    const {
+      markup: nextMarkup = '',
+      env: nextEnv = {},
+      alwaysShowCorrect: nextAlwaysShowCorrect = false
+    } = nextModel;
+    const isEvaluateMode = env => env && env.mode === 'evaluate';
+    if (!isEvaluateMode(env) || !isEvaluateMode(nextEnv)) {
+      this.setState(prevState => ({
+        ...prevState.session,
+        showCorrect: false
+      }));
     }
-  }, {
-    key: "setTooltipRef",
-    value: // function for tooltip
-    function setTooltipRef(ref) {
-      // Safari Hack: https://stackoverflow.com/a/42764495/5757635
-      setTimeout(function () {
-        if (ref && IS_SAFARI) {
-          var div = document.querySelector("[role='tooltip']");
-
-          if (div) {
-            var el = div.firstChild;
-            el.setAttribute('tabindex', '-1');
-          }
-        }
-      }, 1);
+    if (nextAlwaysShowCorrect) {
+      this.setState({
+        showCorrect: true
+      });
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this4 = this;
-
-      var _this$props5 = this.props,
-          model = _this$props5.model,
-          classes = _this$props5.classes;
-      var showCorrect = this.state.showCorrect;
-
-      var _ref12 = model || {},
-          prompt = _ref12.prompt,
-          _ref12$env = _ref12.env;
-
-      _ref12$env = _ref12$env === void 0 ? {} : _ref12$env;
-      var mode = _ref12$env.mode,
-          role = _ref12$env.role,
-          extraCSSRules = _ref12.extraCSSRules,
-          correctness = _ref12.correctness,
-          responses = _ref12.responses,
-          language = _ref12.language,
-          showNote = _ref12.showNote,
-          note = _ref12.note;
-      var emptyResponse = (0, _isEmpty["default"])(responses);
-      var showCorrectAnswerToggle = !emptyResponse && correctness && correctness.correctness !== 'correct';
-      var displayNote = (showCorrect || mode === 'view' && role === 'instructor') && showNote && note;
-      return /*#__PURE__*/_react["default"].createElement(_renderUi.UiLayout, {
-        extraCSSRules: extraCSSRules,
-        className: classes.mainContainer,
-        ref: function ref(r) {
-          // eslint-disable-next-line react/no-find-dom-node
-          var domNode = _reactDom["default"].findDOMNode(r);
-
-          _this4.root = domNode || _this4.root;
-        }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.main
-      }, mode === 'gather' && /*#__PURE__*/_react["default"].createElement("h2", {
-        className: classes.srOnly
-      }, "Math Equation Response Question"), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.main
-      }, showCorrectAnswerToggle && /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle["default"], {
-        language: language,
-        className: classes.toggle,
-        show: true,
-        toggled: showCorrect,
-        onToggle: this.toggleShowCorrect
-      })), this.renderTeacherInstructions(), prompt && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.promptContainer
-      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-        prompt: prompt
-      })), /*#__PURE__*/_react["default"].createElement(_renderUi.Readable, {
-        "false": true
-      }, this.renderPlayerContent()), displayNote && /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames["default"])(classes.note, 'note'),
-        dangerouslySetInnerHTML: {
-          __html: note
+    const matches = markup.match(REGEX);
+    const nextMatches = nextMarkup.match(REGEX);
+
+    // If markup changed, and we no longer have the same response area, the session needs to be updated
+    if (!(0, _isEqual.default)(matches, nextMatches)) {
+      const newAnswers = {};
+      const answers = this.state.session.answers;
+      (nextMatches || []).forEach(nextMatch => {
+        const responseKey = Main.getResponseKey(nextMatch);
+        const sessionAnswerForResponse = answers && answers[`r${responseKey}`];
+
+        // build out local state model using responses declared in markup
+        newAnswers[`r${responseKey}`] = {
+          value: sessionAnswerForResponse?.value || ''
+        };
+      });
+      this.setState(state => ({
+        session: {
+          ...state.session,
+          answers: newAnswers
         }
-      }), this.renderRationale()));
+      }), () => {
+        this.props.onSessionChange(this.state.session);
+        this.handleAnswerBlockDomUpdate();
+      });
     }
-  }]);
-  return Main;
-}(_react["default"].Component);
-
-exports.Main = Main;
-(0, _defineProperty2["default"])(Main, "getResponseKey", function (response) {
-  return (response || '').replaceAll('{{', '').replaceAll('}}', '');
-});
-(0, _defineProperty2["default"])(Main, "propTypes", {
-  classes: _propTypes["default"].object,
-  session: _propTypes["default"].object.isRequired,
-  onSessionChange: _propTypes["default"].func,
-  model: _propTypes["default"].object.isRequired
-});
-
-var styles = function styles(theme) {
-  return {
-    mainContainer: {
-      color: _renderUi.color.text(),
-      backgroundColor: _renderUi.color.background(),
-      display: 'inline-block'
-    },
-    tooltip: {
-      background: "".concat(_renderUi.color.primaryLight(), " !important"),
-      color: _renderUi.color.text(),
-      padding: theme.spacing.unit * 2,
-      border: "1px solid ".concat(_renderUi.color.secondary()),
-      fontSize: '16px',
-      '& :not(.MathJax) > table tr': {
-        '&:nth-child(2n)': {
-          backgroundColor: 'unset !important'
-        }
-      }
-    },
-    tooltipPopper: {
-      opacity: 1
-    },
-    keypadTooltip: {
-      fontSize: 'initial',
-      background: 'transparent',
-      width: '600px',
-      marginTop: 0,
-      paddingTop: 0
-    },
-    keypadTooltipPopper: {
-      background: 'transparent',
-      width: '650px',
-      opacity: 1
-    },
-    promptContainer: {
-      marginBottom: theme.spacing.unit * 2
-    },
-    main: {
-      width: '100%',
-      position: 'relative',
-      backgroundColor: _renderUi.color.background(),
-      color: _renderUi.color.text()
-    },
-    title: {
-      fontSize: '1.1rem',
-      display: 'block',
-      marginTop: theme.spacing.unit * 2,
-      marginBottom: theme.spacing.unit
-    },
-    collapsible: {
-      marginBottom: theme.spacing.unit * 2
-    },
-    responseContainer: {
-      zIndex: 10,
-      minWidth: '400px',
-      marginTop: theme.spacing.unit * 2
-    },
-    expression: {
-      maxWidth: 'fit-content',
-      '& > .mq-math-mode': {
-        '& > .mq-root-block': {
-          '& > .mq-editable-field': {
-            minWidth: '10px',
-            padding: theme.spacing.unit / 4
-          }
-        },
-        '& sup': {
-          top: 0
-        }
-      }
-    },
-    "static": {
-      '& > .mq-root-block': {
-        '& > .mq-editable-field': {
-          borderColor: _renderUi.color.text()
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    const sameModel = (0, _isEqual.default)(this.props.model, nextProps.model);
+    const sameState = (0, _isEqual.default)(this.state, nextState);
+    return !sameModel || !sameState;
+  }
+  componentDidMount() {
+    this.handleAnswerBlockDomUpdate();
+    setTimeout(() => (0, _mathRendering.renderMath)(this.root), 100);
+  }
+  componentDidUpdate() {
+    this.handleAnswerBlockDomUpdate();
+  }
+  // function for tooltip
+  setTooltipRef(ref) {
+    // Safari Hack: https://stackoverflow.com/a/42764495/5757635
+    setTimeout(() => {
+      if (ref && IS_SAFARI) {
+        const div = document.querySelector("[role='tooltip']");
+        if (div) {
+          const el = div.firstChild;
+          el.setAttribute('tabindex', '-1');
         }
       }
-    },
-    inputAndKeypadContainer: {
-      position: 'relative',
-      '& > div > div': {
-        display: 'flex',
-        alignItems: 'baseline',
-        flexWrap: 'wrap'
-      },
-      '& .mq-overarrow-inner': {
-        border: 'none !important',
-        padding: '0 !important'
-      },
-      '& .mq-overarrow-inner-right': {
-        display: 'none !important'
-      },
-      '& .mq-overarrow-inner-left': {
-        display: 'none !important'
-      },
-      '& .mq-overarrow.mq-arrow-both': {
-        minWidth: '1.23em',
-        '& *': {
-          lineHeight: '1 !important'
-        },
-        '&:before': {
-          top: '-0.4em',
-          left: '-1px'
-        },
-        '&:after': {
-          top: '-2.4em',
-          right: '-1px'
-        },
-        '&.mq-empty:after': {
-          top: '-0.45em'
-        }
-      },
-      '& .mq-overarrow.mq-arrow-right': {
-        '&:before': {
-          top: '-0.4em',
-          right: '-1px'
-        }
-      },
-      '& .mq-longdiv-inner': {
-        borderTop: '1px solid !important',
-        paddingTop: '1.5px !important'
-      },
-      '& .mq-parallelogram': {
-        lineHeight: 0.85
+    }, 1);
+  }
+  render() {
+    const {
+      model
+    } = this.props;
+    const {
+      showCorrect
+    } = this.state;
+    const {
+      prompt,
+      env: {
+        mode,
+        role
+      } = {},
+      extraCSSRules,
+      correctness,
+      responses,
+      language,
+      showNote,
+      note
+    } = model || {};
+    const emptyResponse = (0, _isEmpty.default)(responses);
+    const showCorrectAnswerToggle = !emptyResponse && correctness && correctness.correctness !== 'correct';
+    const displayNote = (showCorrect || mode === 'view' && role === 'instructor') && showNote && note;
+    return /*#__PURE__*/_react.default.createElement(StyledUiLayout, {
+      extraCSSRules: extraCSSRules,
+      ref: r => {
+        // eslint-disable-next-line react/no-find-dom-node
+        const domNode = _reactDom.default.findDOMNode(r);
+        this.root = domNode || this.root;
       }
-    },
-    showCorrectness: {
-      border: '2px solid'
-    },
-    correctAnswerShown: {
-      padding: theme.spacing.unit,
-      letterSpacing: '0.5px'
-    },
-    correct: {
-      borderColor: "".concat(_renderUi.color.correct(), " !important")
-    },
-    incorrect: {
-      borderColor: "".concat(_renderUi.color.incorrect(), " !important")
-    },
-    blockContainer: {
-      margin: "".concat(theme.spacing.unit, "px !important"),
-      display: 'inline-flex',
-      border: '2px solid grey !important'
-    },
-    blockResponse: {
-      flex: 2,
-      color: 'grey',
-      background: theme.palette.grey['A100'],
-      fontSize: '0.8rem !important',
-      padding: "".concat(theme.spacing.unit / 2, "px !important"),
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      borderRight: "2px solid ".concat(_renderUi.color.disabled(), " !important")
-    },
-    toggle: {
-      color: _renderUi.color.text(),
-      marginBottom: theme.spacing.unit * 2
-    },
-    blockMath: {
-      color: _renderUi.color.text(),
-      backgroundColor: _renderUi.color.background(),
-      padding: "".concat(theme.spacing.unit / 2, "px !important"),
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      flex: 8,
-      '& > .mq-math-mode': {
-        '& > .mq-hasCursor': {
-          '& > .mq-cursor': {
-            display: 'none'
-          }
-        }
+    }, /*#__PURE__*/_react.default.createElement(MainContainer, null, mode === 'gather' && /*#__PURE__*/_react.default.createElement(SrOnly, null, "Math Equation Response Question"), /*#__PURE__*/_react.default.createElement(MainContainer, null, showCorrectAnswerToggle && /*#__PURE__*/_react.default.createElement(StyledToggle, {
+      language: language,
+      show: true,
+      toggled: showCorrect,
+      onToggle: this.toggleShowCorrect
+    })), this.renderTeacherInstructions(), prompt && /*#__PURE__*/_react.default.createElement(PromptContainer, null, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: prompt
+    })), /*#__PURE__*/_react.default.createElement(_renderUi.Readable, {
+      false: true
+    }, this.renderPlayerContent()), displayNote && /*#__PURE__*/_react.default.createElement(Note, {
+      className: "note",
+      dangerouslySetInnerHTML: {
+        __html: note
       }
-    },
-    printContainer: {
-      marginBottom: theme.spacing.unit,
-      pointerEvents: 'none'
-    },
-    srOnly: {
-      position: 'absolute',
-      left: '-10000px',
-      top: 'auto',
-      width: '1px',
-      height: '1px',
-      overflow: 'hidden'
-    },
-    note: {
-      marginBottom: theme.spacing.unit * 2
-    }
-  };
-};
-
-var _default = (0, _styles.withStyles)(styles)(Main);
-
-exports["default"] = _default;
+    }), this.renderRationale()));
+  }
+}
+exports.Main = Main;
+// removes {{ and }} and returns only key response. Eg: {{0}} => 0
+(0, _defineProperty2.default)(Main, "getResponseKey", response => (response || '').replaceAll('{{', '').replaceAll('}}', ''));
+(0, _defineProperty2.default)(Main, "propTypes", {
+  session: _propTypes.default.object.isRequired,
+  onSessionChange: _propTypes.default.func,
+  model: _propTypes.default.object.isRequired
+});
+var _default = exports.default = Main;
 //# sourceMappingURL=main.js.map