@pie-element/math-inline 5.9.6 → 5.9.9

package/module/print.js

@@ -1,16 +1,816 @@
-import {_dll_react, _dll_classnames, _dll_material_ui__core_styles, _dll_prop_types, _dll_pie_lib__render_ui, _dll_pie_lib__correct_answer_toggle, _dll_material_ui__core, _dll_lodash, _dll_react_dom, _dll_debug} from "../../../@pie-lib/shared-module@^1.4.9/module/index.js";
-import {_dll_pie_lib__math_rendering} from "../../../@pie-lib/math-rendering-module@^1.0.34/module/index.js";
-import {_dll_pie_lib__math_toolbar, _dll_pie_lib__math_input, _dll_pie_framework__mathquill} from "../../../@pie-lib/math-edit-module@^1.1.30/module/index.js";
+import {_dll_react, _dll_debug, _dll_prop_types, _dll_classnames, _dll_material_ui__core, _dll_material_ui__core_styles, _dll_pie_lib__render_ui, _dll_material_ui__icons, _dll_pie_lib__correct_answer_toggle, _dll_lodash, _dll_react_dom} from "../../../@pie-lib/shared-module@^1.4.15/module/index.js";
+import {_dll_pie_lib__math_rendering} from "../../../@pie-lib/math-rendering-module@^1.1.3/module/index.js";
+import {_dll_pie_lib__math_input, _dll_pie_framework__mathquill} from "../../../@pie-lib/math-edit-module@^1.2.2/module/index.js";
 const ResponseTypes = {
   advanced: 'Advanced Multi',
   simple: 'Simple'
 };
+const {HorizontalKeypad: HorizontalKeypad$1} = _dll_pie_lib__math_input;
+const {mq: mq$3} = _dll_pie_lib__math_input;
+const {updateSpans: updateSpans$1} = _dll_pie_lib__math_input;
+const React$6 = _dll_react;
+const debug$2 = _dll_debug;
+const PropTypes$5 = _dll_prop_types;
+const cx$3 = _dll_classnames;
+const {Button: Button} = _dll_material_ui__core;
+const {MenuItem: MenuItem} = _dll_material_ui__core;
+const {Select: Select} = _dll_material_ui__core;
+const {withStyles: withStyles$5} = _dll_material_ui__core_styles;
+const {color: color$2} = _dll_pie_lib__render_ui;
+const {InputContainer: InputContainer} = _dll_pie_lib__render_ui;
+const _jsxFileName$5 = "/home/circleci/repo/node_modules/@pie-lib/math-toolbar/src/editor-and-pad.jsx";
+const log$2 = debug$2('@pie-lib:math-toolbar:editor-and-pad');
+const decimalRegex = /\.|,/g;
+const toNodeData = data => {
+  if (!data) {
+    return;
+  }
+  const {type, value} = data;
+  if (type === 'command' || type === 'cursor') {
+    return data;
+  } else if (type === 'answer') {
+    return {
+      type: 'answer',
+      ...data
+    };
+  } else if (value === 'clear') {
+    return {
+      type: 'clear'
+    };
+  } else {
+    return {
+      type: 'write',
+      value
+    };
+  }
+};
+class EditorAndPad extends React$6.Component {
+  static __initStatic() {
+    this.propTypes = {
+      classNames: PropTypes$5.object,
+      keypadMode: PropTypes$5.oneOfType([PropTypes$5.string, PropTypes$5.number]),
+      autoFocus: PropTypes$5.bool,
+      allowAnswerBlock: PropTypes$5.bool,
+      showKeypad: PropTypes$5.bool,
+      controlledKeypad: PropTypes$5.bool,
+      controlledKeypadMode: PropTypes$5.bool,
+      noDecimal: PropTypes$5.bool,
+      additionalKeys: PropTypes$5.array,
+      latex: PropTypes$5.string.isRequired,
+      onAnswerBlockAdd: PropTypes$5.func,
+      onFocus: PropTypes$5.func,
+      onBlur: PropTypes$5.func,
+      onChange: PropTypes$5.func.isRequired,
+      classes: PropTypes$5.object
+    };
+  }
+  constructor(props) {
+    super(props);
+    EditorAndPad.prototype.__init.call(this);
+    EditorAndPad.prototype.__init2.call(this);
+    EditorAndPad.prototype.__init3.call(this);
+    EditorAndPad.prototype.__init4.call(this);
+    EditorAndPad.prototype.__init5.call(this);
+    EditorAndPad.prototype.__init6.call(this);
+    this.state = {
+      equationEditor: 'item-authoring',
+      addDisabled: false
+    };
+  }
+  componentDidMount() {
+    if (this.input && this.props.autoFocus) {
+      this.input.focus();
+    }
+  }
+  __init() {
+    this.onClick = data => {
+      const {noDecimal} = this.props;
+      const c = toNodeData(data);
+      log$2('mathChange: ', c);
+      if (noDecimal && (c.value === '.' || c.value === ',')) {
+        return;
+      }
+      if (c.type === 'clear') {
+        log$2('call clear...');
+        this.input.clear();
+      } else if (c.type === 'command') {
+        this.input.command(c.value);
+      } else if (c.type === 'cursor') {
+        this.input.keystroke(c.value);
+      } else if (c.type === 'answer') {
+        this.input.write('%response%');
+      } else {
+        this.input.write(c.value);
+      }
+    };
+  }
+  __init2() {
+    this.updateDisable = isEdit => {
+      const {maxResponseAreas} = this.props;
+      if (maxResponseAreas) {
+        const shouldDisable = this.checkResponseAreasNumber(maxResponseAreas, isEdit);
+        this.setState({
+          addDisabled: shouldDisable
+        });
+      }
+    };
+  }
+  __init3() {
+    this.onAnswerBlockClick = () => {
+      this.props.onAnswerBlockAdd();
+      this.onClick({
+        type: 'answer'
+      });
+      this.updateDisable(true);
+    };
+  }
+  __init4() {
+    this.onEditorChange = latex => {
+      const {onChange, noDecimal} = this.props;
+      updateSpans$1();
+      this.updateDisable(true);
+      if (noDecimal && (latex.indexOf('.') !== -1 || latex.indexOf(',') !== -1) && this.input) {
+        this.input.clear();
+        this.input.write(latex.replace(decimalRegex, ''));
+        return;
+      }
+      onChange(latex);
+    };
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    const inputIsDifferent = this.input.mathField.latex() !== nextProps.latex;
+    log$2('[shouldComponentUpdate] ', 'inputIsDifferent: ', inputIsDifferent);
+    if (!inputIsDifferent && this.props.keypadMode !== nextProps.keypadMode) {
+      return true;
+    }
+    if (!inputIsDifferent && this.props.noDecimal !== nextProps.noDecimal) {
+      return true;
+    }
+    if (!inputIsDifferent && this.state.equationEditor !== nextState.equationEditor) {
+      return true;
+    }
+    if (!inputIsDifferent && this.props.controlledKeypad) {
+      return this.props.showKeypad !== nextProps.showKeypad;
+    }
+    return inputIsDifferent;
+  }
+  __init5() {
+    this.onEditorTypeChange = evt => {
+      this.setState({
+        equationEditor: evt.target.value
+      });
+    };
+  }
+  __init6() {
+    this.checkResponseAreasNumber = (maxResponseAreas, isEdit) => {
+      const {latex} = this.input && this.input.props || ({});
+      if (latex) {
+        const count = (latex.match(/answerBlock/g) || []).length;
+        return isEdit ? count === maxResponseAreas - 1 : count === maxResponseAreas;
+      }
+      return false;
+    };
+  }
+  render() {
+    const {classNames, keypadMode, allowAnswerBlock, additionalKeys, controlledKeypad, controlledKeypadMode, showKeypad, noDecimal, latex, onFocus, onBlur, classes, error} = this.props;
+    const shouldShowKeypad = !controlledKeypad || controlledKeypad && showKeypad;
+    const {addDisabled} = this.state;
+    log$2('[render]', latex);
+    return React$6.createElement('div', {
+      className: cx$3(classes.mathToolbar, classNames.mathToolbar),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 188
+      }
+    }, React$6.createElement('div', {
+      className: classes.inputAndTypeContainer,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 189
+      }
+    }, controlledKeypadMode && React$6.createElement(InputContainer, {
+      label: "Equation Editor",
+      className: classes.selectContainer,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 191
+      }
+    }, React$6.createElement(Select, {
+      className: classes.select,
+      onChange: this.onEditorTypeChange,
+      value: this.state.equationEditor,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 192
+      }
+    }, React$6.createElement(MenuItem, {
+      value: "non-negative-integers",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 197
+      }
+    }, "Numeric - Non-Negative Integers"), React$6.createElement(MenuItem, {
+      value: "integers",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 198
+      }
+    }, "Numeric - Integers"), React$6.createElement(MenuItem, {
+      value: "decimals",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 199
+      }
+    }, "Numeric - Decimals"), React$6.createElement(MenuItem, {
+      value: "fractions",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 200
+      }
+    }, "Numeric - Fractions"), React$6.createElement(MenuItem, {
+      value: 1,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 201
+      }
+    }, "Grade 1 - 2"), React$6.createElement(MenuItem, {
+      value: 3,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 202
+      }
+    }, "Grade 3 - 5"), React$6.createElement(MenuItem, {
+      value: 6,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 203
+      }
+    }, "Grade 6 - 7"), React$6.createElement(MenuItem, {
+      value: 8,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 204
+      }
+    }, "Grade 8 - HS"), React$6.createElement(MenuItem, {
+      value: 'geometry',
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 205
+      }
+    }, "Geometry"), React$6.createElement(MenuItem, {
+      value: 'advanced-algebra',
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 206
+      }
+    }, "Advanced Algebra"), React$6.createElement(MenuItem, {
+      value: 'statistics',
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 207
+      }
+    }, "Statistics"), React$6.createElement(MenuItem, {
+      value: 'item-authoring',
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 208
+      }
+    }, "Item Authoring"))), React$6.createElement('div', {
+      className: cx$3(classes.inputContainer, error ? classes.error : ''),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 212
+      }
+    }, React$6.createElement(mq$3.Input, {
+      onFocus: () => {
+        onFocus && onFocus();
+        this.updateDisable(false);
+      },
+      onBlur: event => {
+        this.updateDisable(false);
+        onBlur && onBlur(event);
+      },
+      className: cx$3(classes.mathEditor, classNames.editor, !controlledKeypadMode ? classes.longMathEditor : ''),
+      innerRef: r => this.input = r,
+      latex: latex,
+      onChange: this.onEditorChange,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 213
+      }
+    }))), allowAnswerBlock && React$6.createElement(Button, {
+      className: classes.addAnswerBlockButton,
+      type: "primary",
+      style: {
+        bottom: shouldShowKeypad ? '320px' : '20px'
+      },
+      onClick: this.onAnswerBlockClick,
+      disabled: addDisabled,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 234
+      }
+    }, "+ Response Area"), React$6.createElement('hr', {
+      className: classes.hr,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 244
+      }
+    }), shouldShowKeypad && React$6.createElement(HorizontalKeypad$1, {
+      additionalKeys: additionalKeys,
+      mode: controlledKeypadMode ? this.state.equationEditor : keypadMode,
+      onClick: this.onClick,
+      noDecimal: noDecimal,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 246
+      }
+    }));
+  }
+}
+EditorAndPad.__initStatic();
+const styles$3 = theme => ({
+  inputAndTypeContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    '& *': {
+      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important'
+    },
+    '& .mq-overarrow.mq-arrow-both': {
+      minWidth: '1.23em',
+      '& *': {
+        lineHeight: '1 !important'
+      },
+      '&:before': {
+        top: '-0.4em',
+        left: '-1px'
+      },
+      '&:after': {
+        top: '-2.36em',
+        right: '-1px'
+      },
+      '&.mq-empty:after': {
+        top: '-0.45em'
+      }
+    },
+    '& .mq-overarrow.mq-arrow-right': {
+      '&:before': {
+        top: '-0.4em',
+        right: '-1px'
+      }
+    }
+  },
+  selectContainer: {
+    flex: 'initial',
+    width: '25%',
+    minWidth: '100px',
+    marginLeft: '15px',
+    marginTop: '5px',
+    marginBottom: '5px',
+    marginRight: '5px'
+  },
+  mathEditor: {
+    maxWidth: '400px',
+    color: color$2.text(),
+    backgroundColor: color$2.background(),
+    padding: theme.spacing.unit
+  },
+  longMathEditor: {
+    maxWidth: '500px'
+  },
+  addAnswerBlockButton: {
+    position: 'absolute',
+    right: '12px',
+    border: '1px solid lightgrey'
+  },
+  hr: {
+    padding: 0,
+    margin: 0,
+    height: '1px',
+    border: 'none',
+    borderBottom: `solid 1px ${theme.palette.primary.main}`
+  },
+  mathToolbar: {
+    zIndex: 9,
+    position: 'relative',
+    textAlign: 'center',
+    width: 'auto',
+    '& > .mq-math-mode': {
+      border: 'solid 1px lightgrey'
+    },
+    '& > .mq-focused': {
+      outline: 'none',
+      boxShadow: 'none',
+      border: `dotted 1px ${theme.palette.primary.main}`,
+      borderRadius: '0px'
+    },
+    '& .mq-overarrow-inner': {
+      border: 'none !important',
+      paddingTop: '0 !important'
+    },
+    '& .mq-overarrow-inner-right': {
+      display: 'none !important'
+    },
+    '& .mq-overarrow-inner-left': {
+      display: 'none !important'
+    },
+    '& .mq-longdiv-inner': {
+      borderTop: '1px solid !important',
+      paddingTop: '1.5px !important'
+    },
+    '& .mq-overarrow.mq-arrow-both': {
+      minWidth: '1.23em'
+    },
+    '& .mq-parallelogram': {
+      lineHeight: 0.85
+    }
+  },
+  inputContainer: {
+    minWidth: '500px',
+    maxWidth: '900px',
+    minHeight: '40px',
+    width: '100%',
+    display: 'flex',
+    marginTop: theme.spacing.unit,
+    marginBottom: theme.spacing.unit
+  },
+  error: {
+    border: '2px solid red'
+  }
+});
+var EditorAndPad$1 = withStyles$5(styles$3)(EditorAndPad);
+const React$5 = _dll_react;
+const {IconButton: IconButton} = _dll_material_ui__core;
+const {Check: Check} = _dll_material_ui__icons;
+const {withStyles: withStyles$4} = _dll_material_ui__core_styles;
+const PropTypes$4 = _dll_prop_types;
+const _jsxFileName$4 = "/home/circleci/repo/node_modules/@pie-lib/math-toolbar/src/done-button.jsx";
+const RawDoneButton = ({classes, onClick}) => React$5.createElement(IconButton, {
+  'aria-label': "Done",
+  className: classes.iconRoot,
+  onClick: onClick,
+  classes: {
+    label: classes.label,
+    root: classes.iconRoot
+  },
+  __self: undefined,
+  __source: {
+    fileName: _jsxFileName$4,
+    lineNumber: 9
+  }
+}, React$5.createElement(Check, {
+  __self: undefined,
+  __source: {
+    fileName: _jsxFileName$4,
+    lineNumber: 18
+  }
+}));
+RawDoneButton.propTypes = {
+  classes: PropTypes$4.object.isRequired,
+  onClick: PropTypes$4.func
+};
+const styles$2 = {
+  iconRoot: {
+    verticalAlign: 'top',
+    width: '28px',
+    height: '28px',
+    color: '#00bb00'
+  },
+  label: {
+    position: 'absolute',
+    top: '2px'
+  }
+};
+const DoneButton = withStyles$4(styles$2)(RawDoneButton);
+const React$4 = _dll_react;
+const classNames = _dll_classnames;
+const debug$1 = _dll_debug;
+const {withStyles: withStyles$3} = _dll_material_ui__core_styles;
+const PropTypes$3 = _dll_prop_types;
+const {mq: mq$2} = _dll_pie_lib__math_input;
+const _jsxFileName$3 = "/home/circleci/repo/node_modules/@pie-lib/math-toolbar/src/math-preview.jsx";
+const log$1 = debug$1('@pie-lib:math-toolbar:math-preview');
+class RawMathPreview extends React$4.Component {
+  static __initStatic() {
+    this.propTypes = {
+      latex: PropTypes$3.string,
+      node: PropTypes$3.object,
+      classes: PropTypes$3.object,
+      isSelected: PropTypes$3.bool,
+      onFocus: PropTypes$3.func,
+      onBlur: PropTypes$3.func
+    };
+  }
+  render() {
+    log$1('[render] data: ', this.props.node.data);
+    const latex = this.props.node.data.get('latex');
+    const {classes, isSelected, onFocus, onBlur} = this.props;
+    return React$4.createElement('div', {
+      className: classNames(classes.root, isSelected && classes.selected),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 25
+      }
+    }, ' ', React$4.createElement('span', {
+      className: classes.insideOverlay,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 27
+      }
+    }), React$4.createElement(mq$2.Static, {
+      latex: latex,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 28
+      }
+    }));
+  }
+}
+RawMathPreview.__initStatic();
+const mp = theme => ({
+  root: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    position: 'relative',
+    '& > .mq-math-mode': {
+      border: 'solid 1px lightgrey'
+    },
+    '& > .mq-focused': {
+      outline: 'none',
+      boxShadow: 'none',
+      border: 'solid 1px black',
+      borderRadius: '0px'
+    },
+    '& *': {
+      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important'
+    },
+    '& .mq-overarrow-inner': {
+      paddingTop: '0 !important',
+      border: 'none !important'
+    },
+    '& .mq-overarrow.mq-arrow-both': {
+      minWidth: '1.23em',
+      '& *': {
+        lineHeight: '1 !important'
+      },
+      '&:before': {
+        top: '-0.4em',
+        left: '-1px'
+      },
+      '&:after': {
+        top: '-2.36em',
+        right: '-1px'
+      },
+      '&.mq-empty:after': {
+        top: '-0.45em'
+      }
+    },
+    '& .mq-overarrow.mq-arrow-right': {
+      '&:before': {
+        top: '-0.4em',
+        right: '-1px'
+      }
+    },
+    '& .mq-overarrow-inner-right': {
+      display: 'none !important'
+    },
+    '& .mq-overarrow-inner-left': {
+      display: 'none !important'
+    },
+    '& .mq-longdiv-inner': {
+      borderTop: '1px solid !important',
+      paddingTop: '1.5px !important'
+    },
+    '& .mq-parallelogram': {
+      lineHeight: 0.85
+    }
+  },
+  selected: {
+    border: `solid 1px ${theme.palette.primary.main}`,
+    '& > .mq-math-mode': {
+      border: 'solid 0px lightgrey'
+    }
+  },
+  insideOverlay: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0
+  }
+});
+withStyles$3(mp)(RawMathPreview);
+const React$3 = _dll_react;
+const PropTypes$2 = _dll_prop_types;
+const cx$2 = _dll_classnames;
+const {withStyles: withStyles$2} = _dll_material_ui__core_styles;
+const _jsxFileName$2 = "/home/circleci/repo/node_modules/@pie-lib/math-toolbar/src/index.jsx";
+class MathToolbar extends React$3.Component {
+  static __initStatic() {
+    this.propTypes = {
+      autoFocus: PropTypes$2.bool,
+      allowAnswerBlock: PropTypes$2.bool,
+      controlledKeypad: PropTypes$2.bool,
+      controlledKeypadMode: PropTypes$2.bool,
+      keypadMode: PropTypes$2.oneOfType([PropTypes$2.string, PropTypes$2.number]),
+      classNames: PropTypes$2.object,
+      showKeypad: PropTypes$2.bool,
+      noDecimal: PropTypes$2.bool,
+      additionalKeys: PropTypes$2.array,
+      latex: PropTypes$2.string.isRequired,
+      onAnswerBlockAdd: PropTypes$2.func,
+      onChange: PropTypes$2.func,
+      onDone: PropTypes$2.func.isRequired,
+      onFocus: PropTypes$2.func,
+      onBlur: PropTypes$2.func,
+      hideDoneButton: PropTypes$2.bool
+    };
+  }
+  static __initStatic2() {
+    this.defaultProps = {
+      classNames: {},
+      keypadMode: 'item-authoring',
+      autoFocus: false,
+      allowAnswerBlock: false,
+      controlledKeypad: false,
+      controlledKeypadMode: false,
+      noDecimal: false,
+      showKeypad: true,
+      additionalKeys: [],
+      onChange: () => {},
+      onAnswerBlockAdd: () => {},
+      onFocus: () => {},
+      hideDoneButton: false
+    };
+  }
+  constructor(props) {
+    super(props);
+    MathToolbar.prototype.__init.call(this);
+    MathToolbar.prototype.__init2.call(this);
+    this.state = {
+      latex: props.latex
+    };
+  }
+  __init() {
+    this.done = () => {
+      this.props.onDone(this.state.latex);
+    };
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({
+      latex: nextProps.latex
+    });
+  }
+  __init2() {
+    this.onChange = latex => {
+      this.setState({
+        latex
+      });
+      this.props.onChange(latex);
+    };
+  }
+  render() {
+    const {latex} = this.state;
+    const {classNames, autoFocus, allowAnswerBlock, onAnswerBlockAdd, controlledKeypad, controlledKeypadMode, keypadMode, noDecimal, additionalKeys, showKeypad, onFocus, onBlur, hideDoneButton, error, maxResponseAreas} = this.props;
+    return React$3.createElement(PureToolbar, {
+      autoFocus: autoFocus,
+      classNames: classNames,
+      onAnswerBlockAdd: onAnswerBlockAdd,
+      allowAnswerBlock: allowAnswerBlock,
+      latex: latex,
+      additionalKeys: additionalKeys,
+      noDecimal: noDecimal,
+      keypadMode: keypadMode,
+      onChange: this.onChange,
+      onDone: this.done,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      showKeypad: showKeypad,
+      controlledKeypad: controlledKeypad,
+      controlledKeypadMode: controlledKeypadMode,
+      hideDoneButton: hideDoneButton,
+      error: error,
+      maxResponseAreas: maxResponseAreas,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 88
+      }
+    });
+  }
+}
+MathToolbar.__initStatic();
+MathToolbar.__initStatic2();
+class RawPureToolbar extends React$3.Component {
+  static __initStatic3() {
+    this.propTypes = {
+      classNames: PropTypes$2.object,
+      latex: PropTypes$2.string.isRequired,
+      keypadMode: PropTypes$2.oneOfType([PropTypes$2.string, PropTypes$2.number]),
+      onChange: PropTypes$2.func.isRequired,
+      onDone: PropTypes$2.func.isRequired,
+      onBlur: PropTypes$2.func,
+      onAnswerBlockAdd: PropTypes$2.func,
+      additionalKeys: PropTypes$2.array,
+      onFocus: PropTypes$2.func,
+      classes: PropTypes$2.object.isRequired,
+      autoFocus: PropTypes$2.bool,
+      noDecimal: PropTypes$2.bool,
+      allowAnswerBlock: PropTypes$2.bool,
+      controlledKeypad: PropTypes$2.bool,
+      controlledKeypadMode: PropTypes$2.bool,
+      showKeypad: PropTypes$2.bool,
+      hideDoneButton: PropTypes$2.bool
+    };
+  }
+  render() {
+    const {classNames, autoFocus, allowAnswerBlock, onAnswerBlockAdd, controlledKeypad, controlledKeypadMode, additionalKeys, showKeypad, keypadMode, noDecimal, latex, onChange, onDone, onFocus, onBlur, hideDoneButton, classes, error, maxResponseAreas} = this.props;
+    return React$3.createElement('div', {
+      className: cx$2(classes.pureToolbar, (classNames || ({})).toolbar),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 157
+      }
+    }, React$3.createElement('div', {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 158
+      }
+    }), React$3.createElement(EditorAndPad$1, {
+      autoFocus: autoFocus,
+      keypadMode: keypadMode,
+      classNames: classNames || ({}),
+      controlledKeypad: controlledKeypad,
+      controlledKeypadMode: controlledKeypadMode,
+      noDecimal: noDecimal,
+      showKeypad: showKeypad,
+      additionalKeys: additionalKeys,
+      allowAnswerBlock: allowAnswerBlock,
+      onAnswerBlockAdd: onAnswerBlockAdd,
+      latex: latex,
+      onChange: onChange,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      error: error,
+      maxResponseAreas: maxResponseAreas,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 159
+      }
+    }), (!controlledKeypad || controlledKeypad && showKeypad) && !hideDoneButton && React$3.createElement(DoneButton, {
+      onClick: onDone,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 178
+      }
+    }));
+  }
+}
+RawPureToolbar.__initStatic3();
+const styles$1 = () => ({
+  pureToolbar: {
+    display: 'flex',
+    width: '100%',
+    zIndex: 8,
+    alignItems: 'center'
+  }
+});
+const PureToolbar = withStyles$2(styles$1)(RawPureToolbar);
 const React$2 = _dll_react;
 const cx$1 = _dll_classnames;
 const {withStyles: withStyles$1} = _dll_material_ui__core_styles;
 const PropTypes$1 = _dll_prop_types;
 const {color: color$1} = _dll_pie_lib__render_ui;
-const {MathToolbar: MathToolbar} = _dll_pie_lib__math_toolbar;
 const {mq: mq$1} = _dll_pie_lib__math_input;
 const _jsxFileName$1 = "/home/circleci/repo/packages/math-inline/src/simple-question-block.jsx";
 class SimpleQuestionBlockRaw extends React$2.Component {