@pie-element/math-inline 5.9.9 → 5.9.10

package/module/print.js

@@ -1,816 +1,16 @@
-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";
+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.17/module/index.js";
+import {_dll_pie_lib__math_rendering} from "../../../@pie-lib/math-rendering-module@^1.1.5/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.2.4/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 {