@pie-element/math-inline 5.9.0 → 5.9.1

package/module/print.js

@@ -0,0 +1,3289 @@
+import {_dll_lodash, _dll_react, _dll_prop_types, _dll_material_ui__core_styles, _dll_debug, _dll_classnames, _dll_material_ui__core, _dll_material_ui__core_styles_color_manipulator, _dll_pie_lib__render_ui, _dll_material_ui__icons, _dll_pie_lib__correct_answer_toggle, _dll_react_dom} from "../../../@pie-lib/shared-module@^1.2.19/module/index.js";
+import {_dll_pie_lib__math_rendering} from "../../../@pie-lib/math-rendering-module@^1.0.22/module/index.js";
+import {_dll_pie_framework__mathquill} from "../../../@pie-lib/math-edit-module@^1.1.18/module/index.js";
+const set$f = o => ({
+  ...o,
+  category: 'comparison'
+});
+const lessThan = set$f({
+  name: 'Less than',
+  latex: '<',
+  command: '\\lt'
+});
+const greaterThan = set$f({
+  name: 'Greater than',
+  latex: '>',
+  command: '\\gt'
+});
+const lessThanEqual = set$f({
+  name: 'Less than or equal',
+  latex: '\\le',
+  symbol: '<=',
+  command: '\\le'
+});
+const greaterThanEqual = set$f({
+  name: 'Greater than or equal',
+  symbol: '>=',
+  command: '\\ge',
+  latex: '\\ge'
+});
+var comparison = Object.freeze({
+  __proto__: null,
+  lessThan: lessThan,
+  greaterThan: greaterThan,
+  lessThanEqual: lessThanEqual,
+  greaterThanEqual: greaterThanEqual
+});
+const _$2 = _dll_lodash;
+const mkSet = category => o => ({
+  ...o,
+  category
+});
+const transformToKeySetStructure = (data = []) => {
+  const structure = [];
+  _$2.times(5, () => {
+    structure.push([]);
+  });
+  let ln = data.length;
+  let i = 0;
+  let j = 0;
+  while (j < ln) {
+    structure[i++].push(data[j++]);
+    if (i === 5) {
+      i = 0;
+    }
+  }
+  return structure;
+};
+const latexAndNameDontExist = base => k => {
+  const flattened = _$2.flatten(base);
+  const latexExists = flattened.some(b => b.latex === k.latex);
+  const nameExists = flattened.some(b => b.name === k.name);
+  return !latexExists && !nameExists;
+};
+const extendKeySet = (base = [], keySetData = []) => {
+  keySetData = keySetData.filter(latexAndNameDontExist(base));
+  const final = [];
+  _$2.times(5 - base.length, () => {
+    base.push([]);
+  });
+  _$2.times(5, () => {
+    final.push([]);
+  });
+  const extra = transformToKeySetStructure(keySetData);
+  for (let i = 0; i < 5; i++) {
+    final[i] = [...base[i], ...extra[i]];
+  }
+  return final;
+};
+const set$e = mkSet('vars');
+const x = set$e({
+  name: 'X',
+  latex: 'x',
+  write: 'x'
+});
+const y = set$e({
+  name: 'Y',
+  latex: 'y',
+  write: 'y'
+});
+const theta = set$e({
+  name: 'Theta',
+  latex: '\\theta',
+  write: '\\theta'
+});
+var vars = Object.freeze({
+  __proto__: null,
+  x: x,
+  y: y,
+  theta: theta
+});
+const set$d = mkSet('fractions');
+const blankOverBlank = set$d({
+  name: 'blank/blank',
+  latex: '\\frac{}{}',
+  command: '\\frac'
+});
+const xOverBlank = set$d({
+  latex: '\\frac{x}{ }',
+  name: 'X/blank',
+  label: 'x/[]',
+  command: '/'
+});
+const xBlankBlank = set$d({
+  name: 'X (blank/blank)',
+  latex: 'x\\frac{}{}',
+  label: 'x([]/[])',
+  command: '\\frac'
+});
+var fractions = Object.freeze({
+  __proto__: null,
+  blankOverBlank: blankOverBlank,
+  xOverBlank: xOverBlank,
+  xBlankBlank: xBlankBlank
+});
+const set$c = mkSet('exponent');
+const squared = set$c({
+  name: 'Squared',
+  latex: 'x^2',
+  write: '^2'
+});
+const xToPowerOfN = set$c({
+  name: 'X to the power of n',
+  latex: 'x^{}',
+  command: '^'
+});
+const squareRoot = set$c({
+  name: 'Square root',
+  latex: '\\sqrt{}',
+  command: '\\sqrt'
+});
+const nthRoot = set$c({
+  name: 'Nth root',
+  latex: '\\sqrt[{}]{}',
+  command: '\\nthroot'
+});
+var exponent = Object.freeze({
+  __proto__: null,
+  squared: squared,
+  xToPowerOfN: xToPowerOfN,
+  squareRoot: squareRoot,
+  nthRoot: nthRoot
+});
+const set$b = mkSet('misc');
+const plusMinus = set$b({
+  name: 'Plus/Minus',
+  latex: '\\pm',
+  write: '\\pm'
+});
+const absValue = set$b({
+  name: 'Absolute Value',
+  latex: '\\abs{}',
+  symbol: '| |',
+  command: '|'
+});
+const parenthesis = set$b({
+  name: 'Parenthesis',
+  latex: '\\left(\\right)',
+  symbol: '( )',
+  command: '('
+});
+const brackets = set$b({
+  name: 'Brackets',
+  latex: '\\left[\\right]',
+  symbol: '[ ]',
+  command: '['
+});
+const percentage = set$b({
+  name: 'Percentage',
+  latex: '%',
+  command: '%'
+});
+const approx = set$b({
+  latex: '\\approx',
+  command: '\\approx'
+});
+const nApprox = set$b({
+  latex: '\\napprox',
+  command: '\\napprox'
+});
+const notEqual = set$b({
+  latex: '\\neq',
+  command: '\\neq'
+});
+const similar = set$b({
+  latex: '\\sim',
+  command: '\\sim'
+});
+const notSimilar = set$b({
+  latex: '\\nsim',
+  command: '\\nsim'
+});
+var misc = Object.freeze({
+  __proto__: null,
+  plusMinus: plusMinus,
+  absValue: absValue,
+  parenthesis: parenthesis,
+  brackets: brackets,
+  percentage: percentage,
+  approx: approx,
+  nApprox: nApprox,
+  notEqual: notEqual,
+  similar: similar,
+  notSimilar: notSimilar
+});
+const set$a = mkSet('constants');
+const pi = set$a({
+  name: 'Pi',
+  label: 'π',
+  latex: '\\pi',
+  command: '\\pi',
+  category: 'constants'
+});
+const eulers = set$a({
+  name: 'Eulers',
+  label: 'e',
+  latex: 'e',
+  command: 'e',
+  category: 'constants'
+});
+const infinity = set$a({
+  name: 'Infinity',
+  label: '\\infty',
+  latex: '\\infty',
+  command: '\\infty',
+  category: 'constants'
+});
+const halfInfinity = set$a({
+  name: 'Half Infinity',
+  label: '\\propto',
+  latex: '\\propto',
+  command: '\\propto',
+  category: 'constants'
+});
+var constants = Object.freeze({
+  __proto__: null,
+  pi: pi,
+  eulers: eulers,
+  infinity: infinity,
+  halfInfinity: halfInfinity
+});
+const set$9 = mkSet('trigonometry');
+const sin = set$9({
+  name: 'sin',
+  label: 'sin',
+  command: '\\sin',
+  latex: '\\sin'
+});
+const cos = set$9({
+  name: 'cos',
+  label: 'cos',
+  command: '\\cos',
+  latex: '\\cos'
+});
+const tan = set$9({
+  name: 'tan',
+  label: 'tan',
+  command: '\\tan',
+  latex: '\\tan'
+});
+const sec = set$9({
+  name: 'sec',
+  label: 'sec',
+  command: '\\sec',
+  latex: '\\sec'
+});
+const csc = set$9({
+  name: 'csc',
+  label: 'csc',
+  command: '\\csc',
+  latex: '\\csc'
+});
+const cot = set$9({
+  name: 'cot',
+  label: 'cot',
+  command: '\\cot',
+  latex: '\\cot'
+});
+var trigonometry = Object.freeze({
+  __proto__: null,
+  sin: sin,
+  cos: cos,
+  tan: tan,
+  sec: sec,
+  csc: csc,
+  cot: cot
+});
+const set$8 = o => ({
+  ...o,
+  category: 'geometry'
+});
+const overline = set$8({
+  name: 'Overline',
+  latex: '\\overline{}',
+  command: '\\overline'
+});
+const overRightArrow = set$8({
+  name: 'Overline',
+  latex: '\\overrightarrow{}',
+  command: '\\overrightarrow'
+});
+const overLeftRightArrow = set$8({
+  name: 'Overline',
+  latex: '\\overleftrightarrow{\\overline{}}',
+  symbol: 'AB',
+  command: '\\overleftrightarrow'
+});
+const segment = set$8({
+  name: 'Segment',
+  latex: '\\overleftrightarrow{AB}',
+  write: '\\overleftrightarrow{AB}',
+  label: 'AB'
+});
+const parallel = set$8({
+  name: 'Parallel',
+  latex: '\\parallel',
+  command: '\\parallel'
+});
+const notParallel = set$8({
+  name: 'Not Parallel',
+  latex: '\\nparallel',
+  command: '\\nparallel'
+});
+const perpindicular = set$8({
+  name: 'Perpendicular',
+  latex: '\\perp',
+  command: '\\perpendicular'
+});
+const angle = set$8({
+  name: 'Angle',
+  latex: '\\angle',
+  command: '\\angle'
+});
+const overArc = set$8({
+  name: 'Over arc',
+  latex: '\\overarc{\\overline{}}',
+  command: '\\overarc'
+});
+const measureOfAngle = set$8({
+  name: 'Measure Of Angle',
+  latex: '\\measuredangle',
+  command: ['m', '\\angle']
+});
+const triangle = set$8({
+  name: 'Triangle',
+  latex: '\\triangle',
+  command: '\\triangle'
+});
+const square = set$8({
+  name: 'Square',
+  latex: '\\square',
+  command: '\\square'
+});
+const parallelogram = set$8({
+  name: 'Parallelogram',
+  latex: '\\parallelogram',
+  command: '\\parallelogram'
+});
+const circledDot = set$8({
+  name: 'Circled Dot',
+  latex: '\\odot',
+  command: '\\odot'
+});
+const degree = set$8({
+  name: 'Degree',
+  latex: '\\degree',
+  command: '\\degree'
+});
+const similarTo = set$8({
+  name: 'Similar To',
+  command: '\\sim',
+  latex: '\\sim'
+});
+const congruentTo = set$8({
+  name: 'Congruent To',
+  command: '\\cong',
+  latex: '\\cong'
+});
+const notCongruentTo = set$8({
+  name: 'Not Congruent To',
+  command: '\\ncong',
+  latex: '\\ncong'
+});
+const primeArcminute = set$8({
+  name: 'Prime',
+  label: 'pam',
+  latex: "'",
+  write: "'"
+});
+const doublePrimeArcSecond = set$8({
+  name: 'Double Prime/Arcsecond',
+  latex: '"',
+  write: '"'
+});
+const leftArrow = set$8({
+  name: 'Left Arrow',
+  latex: '\\leftarrow',
+  command: '\\leftarrow'
+});
+const rightArrow = set$8({
+  name: 'Right Arrow',
+  latex: '\\rightarrow',
+  command: '\\rightarrow'
+});
+const leftrightArrow = set$8({
+  name: 'Left Right Arrow',
+  latex: '\\leftrightarrow',
+  command: '\\leftrightarrow'
+});
+var geometry = Object.freeze({
+  __proto__: null,
+  overline: overline,
+  overRightArrow: overRightArrow,
+  overLeftRightArrow: overLeftRightArrow,
+  segment: segment,
+  parallel: parallel,
+  notParallel: notParallel,
+  perpindicular: perpindicular,
+  angle: angle,
+  overArc: overArc,
+  measureOfAngle: measureOfAngle,
+  triangle: triangle,
+  square: square,
+  parallelogram: parallelogram,
+  circledDot: circledDot,
+  degree: degree,
+  similarTo: similarTo,
+  congruentTo: congruentTo,
+  notCongruentTo: notCongruentTo,
+  primeArcminute: primeArcminute,
+  doublePrimeArcSecond: doublePrimeArcSecond,
+  leftArrow: leftArrow,
+  rightArrow: rightArrow,
+  leftrightArrow: leftrightArrow
+});
+const set$7 = mkSet('operators');
+const circleDot = set$7({
+  name: 'CircleDot',
+  label: '⋅',
+  write: '\\cdot'
+});
+var operators = Object.freeze({
+  __proto__: null,
+  circleDot: circleDot
+});
+const set$6 = mkSet('log');
+const log$6 = set$6({
+  name: 'Log',
+  label: 'log',
+  command: '\\log',
+  latex: '\\log'
+});
+const logSubscript = set$6({
+  name: 'Log with subscript',
+  label: 'log s',
+  latex: '\\log_{}',
+  command: ['\\log', '_', ' ']
+});
+const ln = set$6({
+  name: 'Ln',
+  label: 'ln',
+  command: '\\ln',
+  latex: '\\ln'
+});
+var log$7 = Object.freeze({
+  __proto__: null,
+  log: log$6,
+  logSubscript: logSubscript,
+  ln: ln
+});
+const set$5 = mkSet('sub-sup');
+const superscript = set$5({
+  name: 'Superscript',
+  latex: 'x^{}',
+  command: '^'
+});
+const subscript = set$5({
+  name: 'Subscript',
+  latex: 'x_{}',
+  command: '_'
+});
+var subSup = Object.freeze({
+  __proto__: null,
+  superscript: superscript,
+  subscript: subscript
+});
+const set$4 = mkSet('statistics');
+const xBar = set$4({
+  name: 'X Bar',
+  label: 'x̄',
+  latex: '\\overline{x}',
+  write: '\\overline{x}'
+});
+const yBar = set$4({
+  name: 'Y Bar',
+  latex: '\\overline{y}',
+  write: '\\overline{y}'
+});
+const mu = set$4({
+  name: 'mu',
+  label: 'mu',
+  latex: '\\mu',
+  write: '\\mu'
+});
+const sigma = set$4({
+  name: 'Sigma',
+  label: '\\Sigma',
+  latex: '\\Sigma',
+  write: '\\Sigma'
+});
+const smallSigma = set$4({
+  name: 'sigma',
+  label: '\\sigma',
+  latex: '\\sigma',
+  write: '\\sigma'
+});
+var statistics = Object.freeze({
+  __proto__: null,
+  xBar: xBar,
+  yBar: yBar,
+  mu: mu,
+  sigma: sigma,
+  smallSigma: smallSigma
+});
+const DELETE = '\u232B';
+const LEFT_ARROW = '◀';
+const RIGHT_ARROW = '▶';
+const DIVIDE = '\u00F7';
+const MULTIPLY = '\u00D7';
+const set$3 = mkSet('operators');
+const equals = set$3({
+  write: '=',
+  label: '='
+});
+const plus = set$3({
+  write: '+',
+  label: '+'
+});
+const minus = set$3({
+  write: '−',
+  label: '−'
+});
+const divide = set$3({
+  name: 'divide',
+  label: DIVIDE,
+  command: '\\divide',
+  otherNotation: '\\div'
+});
+const multiply = set$3({
+  name: 'multiply',
+  label: MULTIPLY,
+  command: '\\times'
+});
+var basicOperators = Object.freeze({
+  __proto__: null,
+  equals: equals,
+  plus: plus,
+  minus: minus,
+  divide: divide,
+  multiply: multiply
+});
+const set$2 = mkSet('matrices');
+const singleCellMatrix = set$2({
+  name: 'Single Cell Matrix',
+  label: '[ ]',
+  write: '\\begin{pmatrix}\\end{pmatrix}'
+});
+const doubleCellMatrix = set$2({
+  name: 'Double Cell Matrix',
+  label: '[ ] [ ] \\\\newline [ ] [ ]',
+  write: '\\begin{bmatrix}&\\\\&\\end{bmatrix}'
+});
+var matrices = Object.freeze({
+  __proto__: null,
+  singleCellMatrix: singleCellMatrix,
+  doubleCellMatrix: doubleCellMatrix
+});
+const {times: times} = _dll_lodash;
+const digitMap = {
+  0: 'zero',
+  1: 'one',
+  2: 'two',
+  3: 'three',
+  4: 'four',
+  5: 'five',
+  6: 'six',
+  7: 'seven',
+  8: 'eight',
+  9: 'nine'
+};
+const comma$1 = {
+  name: 'comma',
+  label: ',',
+  write: ',',
+  category: 'digit'
+};
+const decimalPoint$1 = {
+  name: 'decimal-point',
+  label: '.',
+  write: '.',
+  category: 'digit'
+};
+var digits = times(10, String).map(n => {
+  return {
+    name: digitMap[n],
+    write: n,
+    label: n,
+    category: 'digit'
+  };
+}).reduce((acc, o) => {
+  acc[o.name] = o;
+  return acc;
+}, {
+  comma: comma$1,
+  decimalPoint: decimalPoint$1
+});
+const set$1 = mkSet('logic');
+const therefore = set$1({
+  name: 'Therefore',
+  label: '∴',
+  write: '∴'
+});
+const longDivision = set$1({
+  name: 'Long division',
+  latex: '\\longdiv{}',
+  command: '\\longdiv'
+});
+const set = mkSet('navigation');
+const left = set({
+  label: LEFT_ARROW,
+  keystroke: 'Left'
+});
+const right = set({
+  label: RIGHT_ARROW,
+  keystroke: 'Right'
+});
+const del = {
+  label: DELETE,
+  category: 'edit',
+  keystroke: 'Backspace'
+};
+const hs = [[blankOverBlank, percentage, x, squared, squareRoot], [circleDot, y, subscript, xToPowerOfN, nthRoot], [plusMinus, lessThan, greaterThan, lessThanEqual, greaterThanEqual], [pi, theta, parenthesis, brackets, absValue], [notEqual, sin, cos, tan, degree]];
+const advancedAlgebra = (() => {
+  const out = [...hs.map(arr => [...arr])];
+  out[0].push({
+    name: 'i',
+    latex: 'i',
+    write: 'i'
+  });
+  out[1].push(log$6);
+  out[2].push(logSubscript);
+  out[3].push(ln);
+  out[4].push(eulers);
+  return out;
+})();
+const statisticsSet = (() => {
+  const out = [...hs.map(arr => [...arr])];
+  out[0].push(mu);
+  out[1].push(xBar);
+  out[2].push(yBar);
+  out[3].push(sigma);
+  out[4].push(smallSigma);
+  return out;
+})();
+const gradeSets = [{
+  predicate: n => n >= 3 && n <= 5,
+  set: [[lessThan, greaterThan], [xOverBlank, xBlankBlank], [x, longDivision]]
+}, {
+  predicate: n => n >= 6 && n <= 7,
+  set: [[degree, lessThan, greaterThan], [circleDot, lessThanEqual, greaterThanEqual], [x, y, squared, xToPowerOfN], [plusMinus, xOverBlank, xBlankBlank, squareRoot], [pi, parenthesis, absValue, nthRoot]]
+}, {
+  predicate: n => n >= 8 || n === 'HS',
+  set: hs
+}, {
+  predicate: 'non-negative-integers',
+  set: [[digits.seven, digits.eight, digits.nine], [digits.four, digits.five, digits.six], [digits.one, digits.two, digits.three], [digits.zero, {
+    name: '',
+    latex: '',
+    write: ''
+  }, {
+    name: '',
+    latex: '',
+    write: ''
+  }], [left, right, del]]
+}, {
+  predicate: 'integers',
+  set: [[digits.seven, digits.eight, digits.nine], [digits.four, digits.five, digits.six], [digits.one, digits.two, digits.three], [digits.zero, {
+    name: '',
+    latex: '',
+    write: ''
+  }, minus], [left, right, del]]
+}, {
+  predicate: 'decimals',
+  set: [[digits.seven, digits.eight, digits.nine], [digits.four, digits.five, digits.six], [digits.one, digits.two, digits.three], [digits.zero, digits.decimalPoint, minus], [left, right, del]]
+}, {
+  predicate: 'fractions',
+  set: [[digits.seven, digits.eight, digits.nine], [digits.four, digits.five, digits.six], [digits.one, digits.two, digits.three], [digits.zero, blankOverBlank, minus], [left, right, del]]
+}, {
+  predicate: 'geometry',
+  set: [[blankOverBlank, degree, primeArcminute, doublePrimeArcSecond, congruentTo, similarTo], [circleDot, angle, measureOfAngle, triangle, notCongruentTo, notSimilar], [sin, cos, tan, pi, squareRoot, nthRoot], [csc, sec, cot, theta, subscript, xToPowerOfN], [overline, overRightArrow, overLeftRightArrow, overArc, perpindicular, parallel]]
+}, {
+  predicate: 'advanced-algebra',
+  set: advancedAlgebra
+}, {
+  predicate: 'statistics',
+  set: statisticsSet
+}, {
+  predicate: 'item-authoring',
+  set: [[divide, blankOverBlank, longDivision, halfInfinity, squared, squareRoot, overline, overRightArrow, overLeftRightArrow, log$6], [multiply, circleDot, {
+    name: '',
+    latex: '',
+    write: ''
+  }, subscript, xToPowerOfN, nthRoot, perpindicular, parallel, overArc, logSubscript], [plusMinus, pi, theta, degree, angle, leftArrow, rightArrow, triangle, square, ln], [notEqual, absValue, smallSigma, mu, therefore, sigma, leftrightArrow, sin, cos, tan], [lessThanEqual, greaterThanEqual, {
+    name: '',
+    latex: '',
+    write: ''
+  }, {
+    name: '',
+    latex: '',
+    write: ''
+  }, infinity, {
+    name: '',
+    latex: '',
+    write: ''
+  }, {
+    name: '',
+    latex: '',
+    write: ''
+  }, csc, sec, cot]]
+}];
+const keysForGrade = n => {
+  const number = parseInt(n, 10);
+  n = isNaN(number) ? n : number;
+  if (!n) {
+    return [];
+  }
+  const match = gradeSets.find(gs => {
+    if (typeof gs.predicate === 'string') {
+      return gs.predicate === n;
+    } else {
+      return gs.predicate(n);
+    }
+  });
+  if (match) {
+    return match.set || [];
+  }
+};
+const ALL_KEYS = [...Object.values(basicOperators), ...Object.values(comparison), ...Object.values(constants), ...Object.values(digits), ...Object.values(exponent), ...Object.values(fractions), ...Object.values(geometry), ...Object.values(log$7), ...Object.values(matrices), ...Object.values(misc), ...Object.values(operators), ...Object.values(statistics), ...Object.values(subSup), ...Object.values(trigonometry), ...Object.values(vars)];
+const normalizeAdditionalKeys = additionalKeys => {
+  return (additionalKeys || []).map(additionalkey => {
+    const {latex} = additionalkey;
+    const predefinedKey = (ALL_KEYS || []).find(key => latex === key.latex || latex === key.write || latex === key.command || latex === key.otherNotation);
+    return predefinedKey || additionalkey;
+  });
+};
+const {one, two, three, four, five, six, seven, eight, nine, zero, comma, decimalPoint} = digits;
+const baseSet = [[seven, eight, nine, divide], [four, five, six, multiply], [one, two, three, minus], [zero, decimalPoint, comma, plus], [left, right, del, equals]];
+const _$1 = _dll_lodash;
+const sortKeys = keys => {
+  _$1.times(5 - keys.length, () => {
+    keys.push([]);
+  });
+  const out = _$1.zip.apply(null, keys);
+  return out;
+};
+const registerLineBreak = function (MQ) {
+  MQ.registerEmbed('newLine', () => {
+    return {
+      htmlString: '<div class="newLine"></div>',
+      text: () => 'testText',
+      latex: () => '\\embed{newLine}[]'
+    };
+  });
+};
+const React$a = _dll_react;
+const PropTypes$9 = _dll_prop_types;
+const {withStyles: withStyles$7} = _dll_material_ui__core_styles;
+const debug$5 = _dll_debug;
+const classNames$2 = _dll_classnames;
+const MathQuill$2 = _dll_pie_framework__mathquill;
+const _jsxFileName$9 = "/home/circleci/repo/node_modules/@pie-lib/math-input/src/mq/input.jsx";
+let MQ$1;
+if (typeof window !== 'undefined') {
+  MQ$1 = MathQuill$2.getInterface(2);
+  if (MQ$1 && MQ$1.registerEmbed) {
+    registerLineBreak(MQ$1);
+  }
+}
+const log$5 = debug$5('math-input:mq:input');
+class Input extends React$a.Component {
+  constructor(...args) {
+    super(...args);
+    Input.prototype.__init.call(this);
+    Input.prototype.__init2.call(this);
+    Input.prototype.__init3.call(this);
+  }
+  static __initStatic() {
+    this.propTypes = {
+      className: PropTypes$9.string,
+      classes: PropTypes$9.object.isRequired,
+      onClick: PropTypes$9.func,
+      onChange: PropTypes$9.func,
+      latex: PropTypes$9.string,
+      onFocus: PropTypes$9.func,
+      onBlur: PropTypes$9.func
+    };
+  }
+  componentDidMount() {
+    if (!MQ$1) {
+      throw new Error('MQ is not defined - but component has mounted?');
+    }
+    this.mathField = MQ$1.MathField(this.input, {
+      handlers: {
+        edit: this.onInputEdit.bind(this)
+      }
+    });
+    this.updateLatex();
+  }
+  componentDidUpdate() {
+    this.updateLatex();
+  }
+  updateLatex() {
+    if (!this.mathField) {
+      return;
+    }
+    const {latex} = this.props;
+    if (latex) {
+      this.mathField.latex(latex);
+    }
+  }
+  clear() {
+    this.mathField.latex('');
+    return '';
+  }
+  blur() {
+    log$5('blur mathfield');
+    this.mathField.blur();
+  }
+  focus() {
+    log$5('focus mathfield...');
+    this.mathField.focus();
+  }
+  command(v) {
+    log$5('command: ', v);
+    if (Array.isArray(v)) {
+      v.forEach(vv => {
+        this.mathField.cmd(vv);
+      });
+    } else {
+      this.mathField.cmd(v);
+    }
+    this.mathField.focus();
+    return this.mathField.latex();
+  }
+  keystroke(v) {
+    this.mathField.keystroke(v);
+    this.mathField.focus();
+    return this.mathField.latex();
+  }
+  write(v) {
+    log$5('write: ', v);
+    this.mathField.write(v);
+    this.mathField.focus();
+    return this.mathField.latex();
+  }
+  __init() {
+    this.onInputEdit = () => {
+      log$5('[onInputEdit] ...');
+      const {onChange} = this.props;
+      if (!this.mathField) {
+        return;
+      }
+      if (onChange) {
+        onChange(this.mathField.latex());
+      }
+    };
+  }
+  __init2() {
+    this.refresh = () => {
+      this.blur();
+      this.focus();
+    };
+  }
+  __init3() {
+    this.onKeyPress = event => {
+      const keys = Object.keys(this.mathField.__controller.options);
+      if (keys.indexOf('ignoreNextMousedown') < 0) {
+        this.refresh();
+      }
+      if (event.charCode === 13) {
+        this.write('\\embed{newLine}[]');
+        this.onInputEdit();
+      }
+    };
+  }
+  shouldComponentUpdate(nextProps) {
+    log$5('next: ', nextProps.latex);
+    log$5('current: ', this.mathField.latex());
+    return nextProps.latex !== this.mathField.latex();
+  }
+  render() {
+    const {onClick, onFocus, onBlur, classes, className} = this.props;
+    return React$a.createElement('span', {
+      className: classNames$2(classes.input, className),
+      onKeyPress: this.onKeyPress,
+      onClick: onClick,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      ref: r => this.input = r,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 149
+      }
+    });
+  }
+}
+Input.__initStatic();
+const styles$5 = () => ({});
+var input = withStyles$7(styles$5)(Input);
+const PropTypes$8 = _dll_prop_types;
+const React$9 = _dll_react;
+const debug$4 = _dll_debug;
+const MathQuill$1 = _dll_pie_framework__mathquill;
+const _jsxFileName$8 = "/home/circleci/repo/node_modules/@pie-lib/math-input/src/mq/static.jsx";
+let MQ;
+if (typeof window !== 'undefined') {
+  MQ = MathQuill$1.getInterface(2);
+}
+const log$4 = debug$4('pie-lib:math-input:mq:static');
+const REGEX$1 = /\\MathQuillMathField\[r\d*\]\{(.*?)\}/g;
+const WHITESPACE_REGEX = / /g;
+function stripSpaces(string = '') {
+  return string.replace(WHITESPACE_REGEX, '');
+}
+class Static extends React$9.Component {
+  constructor(...args) {
+    super(...args);
+    Static.prototype.__init.call(this);
+  }
+  static __initStatic() {
+    this.propTypes = {
+      latex: PropTypes$8.string.isRequired,
+      onFocus: PropTypes$8.func,
+      onBlur: PropTypes$8.func,
+      className: PropTypes$8.string,
+      getFieldName: PropTypes$8.func,
+      onSubFieldChange: PropTypes$8.func,
+      onSubFieldFocus: PropTypes$8.func,
+      setInput: PropTypes$8.func
+    };
+  }
+  componentDidMount() {
+    this.update();
+    updateSpans();
+  }
+  componentDidUpdate() {
+    this.update();
+    updateSpans();
+  }
+  onInputEdit(field) {
+    if (!this.mathField) {
+      return;
+    }
+    const name = this.props.getFieldName(field, this.mathField.innerFields);
+    if (this.props.onSubFieldChange) {
+      this.props.onSubFieldChange(name, field.latex());
+    }
+  }
+  update() {
+    if (!MQ) {
+      throw new Error('MQ is not defined - but component has mounted?');
+    }
+    if (!this.mathField) {
+      this.mathField = MQ.StaticMath(this.input, {
+        handlers: {
+          edit: this.onInputEdit.bind(this)
+        }
+      });
+    }
+    try {
+      this.mathField.parseLatex(this.props.latex);
+      this.mathField.latex(this.props.latex);
+    } catch (e) {
+      this.mathField.latex('\\MathQuillMathField[r1]{}');
+    }
+  }
+  blur() {
+    log$4('blur mathfield');
+    this.mathField.blur();
+  }
+  focus() {
+    log$4('focus mathfield...');
+    this.mathField.focus();
+  }
+  shouldComponentUpdate(nextProps) {
+    try {
+      const parsedLatex = this.mathField.parseLatex(nextProps.latex);
+      const stripped = stripSpaces(parsedLatex);
+      const newFieldCount = (nextProps.latex.match(REGEX$1) || []).length;
+      const out = stripped !== stripSpaces(this.mathField.latex().trim()) || newFieldCount !== Object.keys(this.mathField.innerFields).length / 2;
+      log$4('[shouldComponentUpdate] ', out);
+      return out;
+    } catch (e) {
+      console.warn('Error parsing latex:', e.message, 'skip update');
+      console.warn(e);
+      return false;
+    }
+  }
+  __init() {
+    this.onFocus = e => {
+      try {
+        let rootBlock = e.target.parentElement.nextSibling;
+        let id = parseInt(rootBlock.getAttribute('mathquill-block-id'), 10);
+        if (!id) {
+          rootBlock = rootBlock.parentElement;
+          id = parseInt(rootBlock.getAttribute('mathquill-block-id'), 10);
+        }
+        const innerField = this.mathField.innerFields.find(f => f.id === id);
+        if (innerField) {
+          const name = this.props.getFieldName(innerField, this.mathField.innerFields);
+          if (this.props.setInput) {
+            this.props.setInput(innerField);
+          }
+          this.props.onSubFieldFocus(name, innerField);
+        }
+      } catch (err) {
+        console.error('error finding root block', err.message);
+      }
+    };
+  }
+  render() {
+    const {onBlur, className} = this.props;
+    return React$9.createElement('span', {
+      className: className,
+      onFocus: this.onFocus,
+      onBlur: onBlur,
+      ref: r => this.input = r,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$8,
+        lineNumber: 137
+      }
+    });
+  }
+}
+Static.__initStatic();
+const React$8 = _dll_react;
+const PropTypes$7 = _dll_prop_types;
+const {Button: Button$1} = _dll_material_ui__core;
+const {IconButton: IconButton$1} = _dll_material_ui__core;
+const {colors: {green: green}} = _dll_material_ui__core;
+const {withStyles: withStyles$6} = _dll_material_ui__core_styles;
+const classNames$1 = _dll_classnames;
+const {lighten: lighten} = _dll_material_ui__core_styles_color_manipulator;
+const {fade: fade} = _dll_material_ui__core_styles_color_manipulator;
+const debug$3 = _dll_debug;
+const _ = _dll_lodash;
+const _jsxFileName$7 = "/home/circleci/repo/node_modules/@pie-lib/math-input/src/keypad/index.jsx";
+const log$3 = debug$3('pie-lib:math-inline:keypad');
+const LatexButton = withStyles$6(theme => ({
+  root: {
+    textTransform: 'none',
+    padding: 0,
+    margin: 0,
+    fontSize: '110% !important'
+  },
+  latexButton: {
+    pointerEvents: 'none',
+    textTransform: 'none !important',
+    '& .mq-scaled.mq-sqrt-prefix': {
+      transform: 'scale(1, 0.9) !important'
+    },
+    '& .mq-sup-only .mq-sup': {
+      marginBottom: '0.9px !important'
+    },
+    '& .mq-empty': {
+      backgroundColor: `${fade(theme.palette.secondary.main, 0.4)} !important`
+    },
+    '& .mq-overline .mq-overline-inner': {
+      borderTop: '2px solid black'
+    },
+    '& .mq-overarrow': {
+      width: '30px',
+      marginTop: '0 !important',
+      borderTop: '2px solid black',
+      '&.mq-arrow-both': {
+        '& *': {
+          lineHeight: '1 !important'
+        },
+        '&:before': {
+          fontSize: '80%',
+          left: 'calc(-13%)',
+          top: '-0.25em'
+        },
+        '&:after': {
+          fontSize: '80% !important',
+          right: 'calc(-13%) !important',
+          top: '-1.5em'
+        },
+        '&.mq-empty:before': {
+          fontSize: '80%',
+          left: 'calc(-13%)',
+          top: '-0.25em'
+        },
+        '&.mq-empty:after': {
+          fontSize: '80%',
+          right: 'calc(-13%)',
+          top: '-0.25em'
+        },
+        '&.mq-empty': {
+          minHeight: '1.4em'
+        }
+      },
+      '&.mq-arrow-right:before': {
+        fontSize: '80%',
+        right: 'calc(-13%)',
+        top: '-0.25em'
+      },
+      '& .mq-overarrow-inner': {
+        border: 'none !important'
+      },
+      '& .mq-overarrow-inner .mq-overarrow-inner-right': {
+        display: 'none !important'
+      }
+    },
+    '& .mq-root-block': {
+      padding: '5px'
+    },
+    '& .mq-overarrow.mq-arrow-both.mq-empty:after': {
+      right: '-6px',
+      fontSize: '80% !important',
+      top: '-3px'
+    },
+    '& .mq-overarrow.mq-arrow-right.mq-empty:before': {
+      right: '-5px',
+      fontSize: '80% !important',
+      top: '-3px'
+    },
+    '& .mq-overarrow.mq-arrow-both.mq-empty:before': {
+      left: '-6px',
+      fontSize: '80% !important',
+      top: '-3px'
+    },
+    '& .mq-longdiv-inner': {
+      borderTop: '1px solid !important',
+      paddingTop: '1.5px !important'
+    },
+    '& .mq-parallelogram': {
+      lineHeight: 0.85
+    },
+    '& .mq-overarc': {
+      borderTop: '2px solid black !important',
+      '& .mq-overline-inner': {
+        borderTop: 'none !important',
+        paddingTop: '0 !important'
+      }
+    }
+  },
+  parallelButton: {
+    fontStyle: 'italic'
+  },
+  leftRightArrowButton: {
+    '& .mq-overarrow.mq-arrow-both': {
+      '& .mq-overline-inner': {
+        borderTop: 'none !important',
+        paddingTop: '0 !important'
+      },
+      '&:after': {
+        top: '-1.64em !important'
+      }
+    }
+  }
+}))(props => {
+  let buttonClass;
+  if (props.latex === '\\parallel') {
+    buttonClass = classNames$1(props.classes.latexButton, props.mqClassName, props.classes.parallelButton);
+  } else if (props.latex === '\\overleftrightarrow{\\overline{}}') {
+    buttonClass = classNames$1(props.classes.latexButton, props.mqClassName, props.classes.leftRightArrowButton);
+  } else {
+    buttonClass = classNames$1(props.classes.latexButton, props.mqClassName);
+  }
+  return React$8.createElement(Button$1, {
+    className: classNames$1(props.classes.root, props.className),
+    onClick: props.onClick,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$7,
+      lineNumber: 149
+    }
+  }, React$8.createElement(Static, {
+    className: buttonClass,
+    latex: props.latex,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$7,
+      lineNumber: 150
+    }
+  }));
+});
+class KeyPad extends React$8.Component {
+  constructor(...args) {
+    super(...args);
+    KeyPad.prototype.__init.call(this);
+    KeyPad.prototype.__init2.call(this);
+    KeyPad.prototype.__init3.call(this);
+  }
+  static __initStatic() {
+    this.propTypes = {
+      classes: PropTypes$7.object.isRequired,
+      className: PropTypes$7.string,
+      baseSet: PropTypes$7.array,
+      additionalKeys: PropTypes$7.array,
+      onPress: PropTypes$7.func.isRequired,
+      onFocus: PropTypes$7.func,
+      noDecimal: PropTypes$7.bool,
+      mode: PropTypes$7.string
+    };
+  }
+  static __initStatic2() {
+    this.defaultProps = {
+      baseSet: baseSet,
+      noDecimal: false
+    };
+  }
+  __init() {
+    this.buttonClick = key => {
+      log$3('[buttonClick]', key);
+      const {onPress} = this.props;
+      onPress(key);
+    };
+  }
+  __init2() {
+    this.flowKeys = (base, extras) => {
+      const transposed = [...sortKeys(base), ...sortKeys(extras)];
+      return _.flatten(transposed);
+    };
+  }
+  __init3() {
+    this.keyIsNotAllowed = key => {
+      const {noDecimal} = this.props;
+      if ((key.write === '.' && key.label === '.' || key.write === ',' && key.label === ',') && noDecimal) {
+        return true;
+      }
+      return false;
+    };
+  }
+  render() {
+    const {classes, className, baseSet, additionalKeys, onFocus, mode} = this.props;
+    const noBaseSet = ['non-negative-integers', 'integers', 'decimals', 'fractions', 'item-authoring'];
+    const keysWithoutBaseSet = noBaseSet.includes(mode);
+    const allKeys = keysWithoutBaseSet ? this.flowKeys([], additionalKeys || []) : this.flowKeys(baseSet, additionalKeys || []);
+    const shift = allKeys.length % 5 ? 1 : 0;
+    const style = {
+      gridTemplateColumns: `repeat(${Math.floor(allKeys.length / 5) + shift}, minmax(min-content, 150px))`
+    };
+    return React$8.createElement('div', {
+      className: classNames$1(classes.keys, className),
+      style: style,
+      onFocus: onFocus,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$7,
+        lineNumber: 217
+      }
+    }, allKeys.map((k, index) => {
+      const onClick = this.buttonClick.bind(this, k);
+      if (!k) {
+        return React$8.createElement('span', {
+          key: `empty-${index}`,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName$7,
+            lineNumber: 222
+          }
+        });
+      }
+      const common = {
+        onClick,
+        className: classNames$1(classes.labelButton, !keysWithoutBaseSet && classes[k.category], k.label === ',' && classes.comma, k.label === '.' && classes.dot),
+        disabled: this.keyIsNotAllowed(k),
+        key: `${k.label || k.latex || k.command}-${index}`
+      };
+      if (k.latex) {
+        return React$8.createElement(LatexButton, {
+          latex: k.latex,
+          ...common,
+          className: classes.latexButton,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName$7,
+            lineNumber: 238
+          }
+        });
+      }
+      if (k.label) {
+        return React$8.createElement(Button$1, {
+          ...common,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName$7,
+            lineNumber: 242
+          }
+        }, k.label);
+      } else {
+        const Icon = k.icon ? k.icon : 'div';
+        return React$8.createElement(IconButton$1, {
+          tabIndex: '-1',
+          ...common,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName$7,
+            lineNumber: 247
+          }
+        }, React$8.createElement(Icon, {
+          className: classes.icon,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName$7,
+            lineNumber: 248
+          }
+        }));
+      }
+    }));
+  }
+}
+KeyPad.__initStatic();
+KeyPad.__initStatic2();
+const styles$4 = theme => ({
+  keys: {
+    '& *': {
+      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important'
+    },
+    width: '100%',
+    display: 'grid',
+    gridTemplateRows: 'repeat(5, minmax(40px, 60px))',
+    gridRowGap: '0px',
+    gridColumnGap: '0px',
+    gridAutoFlow: 'column'
+  },
+  holder: {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    backgroundColor: '#cef',
+    borderRadius: 0,
+    padding: `${theme.spacing.unit}px 0 ${theme.spacing.unit}px 0`
+  },
+  labelButton: {
+    minWidth: 'auto',
+    fontSize: '140% !important',
+    backgroundColor: lighten(theme.palette.primary.light, 0.5),
+    '&:hover': {
+      backgroundColor: lighten(theme.palette.primary.light, 0.7)
+    },
+    borderRadius: 0
+  },
+  latexButton: {
+    minWidth: 'auto',
+    borderRadius: 0,
+    backgroundColor: lighten(theme.palette.primary.light, 0.5),
+    '&:hover': {
+      backgroundColor: lighten(theme.palette.primary.light, 0.7)
+    }
+  },
+  base: {},
+  operators: {
+    backgroundColor: lighten(theme.palette.secondary.light, 0.5),
+    '&:hover': {
+      backgroundColor: lighten(theme.palette.secondary.light, 0.7)
+    }
+  },
+  comparison: {
+    backgroundColor: lighten(green[500], 0.5),
+    '&:hover': {
+      backgroundColor: lighten(green[500], 0.7)
+    }
+  },
+  comma: {
+    fontSize: '200% !important',
+    lineHeight: '100%'
+  },
+  dot: {
+    fontSize: '200% !important',
+    lineHeight: '100%'
+  },
+  icon: {
+    height: '30px'
+  }
+});
+var Keypad = withStyles$6(styles$4)(KeyPad);
+const React$7 = _dll_react;
+const PropTypes$6 = _dll_prop_types;
+const _jsxFileName$6 = "/home/circleci/repo/node_modules/@pie-lib/math-input/src/horizontal-keypad.jsx";
+const toOldModel = d => {
+  if (d.command) {
+    return {
+      value: d.command,
+      type: 'command'
+    };
+  } else if (d.write) {
+    return {
+      value: d.write
+    };
+  } else if (d.keystroke) {
+    return {
+      type: 'cursor',
+      value: d.keystroke
+    };
+  }
+};
+class HorizontalKeypad extends React$7.Component {
+  constructor(...args) {
+    super(...args);
+    HorizontalKeypad.prototype.__init.call(this);
+  }
+  static __initStatic() {
+    this.propTypes = {
+      className: PropTypes$6.string,
+      mode: PropTypes$6.oneOfType([PropTypes$6.string, PropTypes$6.number]),
+      onClick: PropTypes$6.func.isRequired,
+      onFocus: PropTypes$6.func,
+      noDecimal: PropTypes$6.bool,
+      additionalKeys: PropTypes$6.array
+    };
+  }
+  static __initStatic2() {
+    this.defaultProps = {
+      mode: 'scientific',
+      noDecimal: false,
+      additionalKeys: []
+    };
+  }
+  __init() {
+    this.keypadPress = data => {
+      const {onClick} = this.props;
+      onClick(toOldModel(data));
+    };
+  }
+  render() {
+    const {mode, onFocus, noDecimal, className, additionalKeys} = this.props;
+    const normalizedKeys = normalizeAdditionalKeys(additionalKeys);
+    return React$7.createElement(Keypad, {
+      className: className,
+      onFocus: onFocus,
+      noDecimal: noDecimal,
+      additionalKeys: extendKeySet(keysForGrade(mode), normalizedKeys),
+      onPress: this.keypadPress,
+      mode: mode,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$6,
+        lineNumber: 44
+      }
+    });
+  }
+}
+HorizontalKeypad.__initStatic();
+HorizontalKeypad.__initStatic2();
+const updateSpans = () => {
+  const spans = Array.from(document.querySelectorAll('span[mathquill-command-id]'));
+  (spans || []).forEach(span => {
+    if (span && span.innerText === '∥' && span.className !== 'mq-editable-field') {
+      span.style.fontSize = '32px';
+    }
+  });
+};
+const ResponseTypes = {
+  advanced: 'Advanced Multi',
+  simple: 'Simple'
+};
+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);
+    this.state = {
+      equationEditor: 'item-authoring'
+    };
+  }
+  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.onAnswerBlockClick = () => {
+      this.props.onAnswerBlockAdd();
+      this.onClick({
+        type: 'answer'
+      });
+    };
+  }
+  __init3() {
+    this.onEditorChange = latex => {
+      const {onChange, noDecimal} = this.props;
+      updateSpans();
+      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;
+  }
+  __init4() {
+    this.onEditorTypeChange = evt => {
+      this.setState({
+        equationEditor: evt.target.value
+      });
+    };
+  }
+  render() {
+    const {classNames, keypadMode, allowAnswerBlock, additionalKeys, controlledKeypad, controlledKeypadMode, showKeypad, noDecimal, latex, onFocus, onBlur, classes} = this.props;
+    const shouldShowKeypad = !controlledKeypad || controlledKeypad && showKeypad;
+    log$2('[render]', latex);
+    return React$6.createElement('div', {
+      className: cx$3(classes.mathToolbar, classNames.mathToolbar),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 160
+      }
+    }, React$6.createElement('div', {
+      className: classes.inputAndTypeContainer,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 161
+      }
+    }, controlledKeypadMode && React$6.createElement(InputContainer, {
+      label: "Equation Editor",
+      className: classes.selectContainer,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 163
+      }
+    }, React$6.createElement(Select, {
+      className: classes.select,
+      onChange: this.onEditorTypeChange,
+      value: this.state.equationEditor,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 164
+      }
+    }, React$6.createElement(MenuItem, {
+      value: "non-negative-integers",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 169
+      }
+    }, "Numeric - Non-Negative Integers"), React$6.createElement(MenuItem, {
+      value: "integers",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 170
+      }
+    }, "Numeric - Integers"), React$6.createElement(MenuItem, {
+      value: "decimals",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 171
+      }
+    }, "Numeric - Decimals"), React$6.createElement(MenuItem, {
+      value: "fractions",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 172
+      }
+    }, "Numeric - Fractions"), React$6.createElement(MenuItem, {
+      value: 1,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 173
+      }
+    }, "Grade 1 - 2"), React$6.createElement(MenuItem, {
+      value: 3,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 174
+      }
+    }, "Grade 3 - 5"), React$6.createElement(MenuItem, {
+      value: 6,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 175
+      }
+    }, "Grade 6 - 7"), React$6.createElement(MenuItem, {
+      value: 8,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 176
+      }
+    }, "Grade 8 - HS"), React$6.createElement(MenuItem, {
+      value: 'geometry',
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 177
+      }
+    }, "Geometry"), React$6.createElement(MenuItem, {
+      value: 'advanced-algebra',
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 178
+      }
+    }, "Advanced Algebra"), React$6.createElement(MenuItem, {
+      value: 'statistics',
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 179
+      }
+    }, "Statistics"), React$6.createElement(MenuItem, {
+      value: 'item-authoring',
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 180
+      }
+    }, "Item Authoring"))), React$6.createElement(input, {
+      onFocus: onFocus,
+      onBlur: onBlur,
+      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: 184
+      }
+    })), allowAnswerBlock && React$6.createElement(Button, {
+      className: classes.addAnswerBlockButton,
+      type: "primary",
+      style: {
+        bottom: shouldShowKeypad ? '320px' : '20px'
+      },
+      onClick: this.onAnswerBlockClick,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 198
+      }
+    }, "+ Response Area"), React$6.createElement('hr', {
+      className: classes.hr,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 207
+      }
+    }), shouldShowKeypad && React$6.createElement(HorizontalKeypad, {
+      additionalKeys: additionalKeys,
+      mode: controlledKeypadMode ? this.state.equationEditor : keypadMode,
+      onClick: this.onClick,
+      noDecimal: noDecimal,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 209
+      }
+    }));
+  }
+}
+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,
+    marginTop: theme.spacing.unit,
+    marginBottom: 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
+    }
+  }
+});
+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 _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(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} = 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,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 86
+      }
+    });
+  }
+}
+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} = this.props;
+    return React$3.createElement('div', {
+      className: cx$2(classes.pureToolbar, (classNames || ({})).toolbar),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 151
+      }
+    }, React$3.createElement('div', {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 152
+      }
+    }), 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,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 153
+      }
+    }), (!controlledKeypad || controlledKeypad && showKeypad) && !hideDoneButton && React$3.createElement(DoneButton, {
+      onClick: onDone,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 170
+      }
+    }));
+  }
+}
+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 _jsxFileName$1 = "/home/circleci/repo/packages/math-inline/src/simple-question-block.jsx";
+class SimpleQuestionBlockRaw extends React$2.Component {
+  constructor(...args) {
+    super(...args);
+    SimpleQuestionBlockRaw.prototype.__init.call(this);
+    SimpleQuestionBlockRaw.prototype.__init2.call(this);
+    SimpleQuestionBlockRaw.prototype.__init3.call(this);
+  }
+  static __initStatic() {
+    this.propTypes = {
+      classes: PropTypes$1.object,
+      onSimpleResponseChange: PropTypes$1.func,
+      model: PropTypes$1.object.isRequired,
+      emptyResponse: PropTypes$1.bool,
+      session: PropTypes$1.object.isRequired,
+      showCorrect: PropTypes$1.bool
+    };
+  }
+  __init() {
+    this.state = {
+      showKeypad: true
+    };
+  }
+  __init2() {
+    this.onFocus = () => this.setState({
+      showKeypad: true
+    });
+  }
+  __init3() {
+    this.onBlur = e => {
+      const {relatedTarget, currentTarget} = e || ({});
+      if (!relatedTarget || !currentTarget || relatedTarget.offsetParent !== currentTarget.offsetParent) {
+        this.setState({
+          showKeypad: false
+        });
+      }
+    };
+  }
+  render() {
+    const {classes, model, showCorrect, session, emptyResponse, onSimpleResponseChange} = this.props;
+    const {config, disabled, correctness, view} = model || ({});
+    if (!config) {
+      return;
+    }
+    const correct = correctness && correctness.correct;
+    const showAsCorrect = !emptyResponse && (showCorrect || correct);
+    const showAsIncorrect = !emptyResponse && !correct && !showCorrect && !view;
+    const {responses, equationEditor} = config;
+    return React$2.createElement('div', {
+      className: classes.expression,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 54
+      }
+    }, showCorrect || disabled ? React$2.createElement('div', {
+      className: cx$1(classes.static, {
+        [classes.correct]: showAsCorrect,
+        [classes.incorrect]: showAsIncorrect
+      }),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 56
+      }
+    }, React$2.createElement(Static, {
+      latex: showCorrect ? responses && responses.length && responses[0].answer : session.response || '',
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 62
+      }
+    })) : React$2.createElement(MathToolbar, {
+      classNames: {
+        editor: classes.responseEditor
+      },
+      latex: session.response || '',
+      keypadMode: equationEditor,
+      onChange: onSimpleResponseChange,
+      onDone: () => {},
+      onFocus: this.onFocus,
+      onBlur: this.onBlur,
+      controlledKeypad: true,
+      showKeypad: this.state.showKeypad,
+      hideDoneButton: true,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 69
+      }
+    }));
+  }
+}
+SimpleQuestionBlockRaw.__initStatic();
+const SimpleQuestionBlock = withStyles$1(theme => ({
+  responseEditor: {
+    display: 'flex',
+    justifyContent: 'center',
+    width: 'auto',
+    minWidth: '500px',
+    maxWidth: '900px',
+    height: 'auto',
+    textAlign: 'left',
+    padding: theme.spacing.unit,
+    '&.mq-math-mode': {
+      border: `1px solid ${color$1.primaryLight()}`
+    }
+  },
+  expression: {
+    marginTop: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit * 2,
+    padding: theme.spacing.unit
+  },
+  static: {
+    color: color$1.text(),
+    background: color$1.background(),
+    border: `1px solid ${color$1.primaryLight()}`,
+    width: '100%',
+    fontSize: '1rem',
+    padding: theme.spacing.unit / 2,
+    '& > .mq-math-mode': {
+      '& > .mq-hasCursor': {
+        '& > .mq-cursor': {
+          display: 'none'
+        }
+      }
+    }
+  },
+  correct: {
+    color: color$1.correct(),
+    border: `1px solid ${color$1.correct()} !important`
+  },
+  incorrect: {
+    color: color$1.incorrect(),
+    border: `1px solid ${color$1.incorrect()} !important`
+  }
+}))(SimpleQuestionBlockRaw);
+const React$1 = _dll_react;
+const PropTypes = _dll_prop_types;
+const CorrectAnswerToggle = _dll_pie_lib__correct_answer_toggle;
+const {Feedback: Feedback} = _dll_pie_lib__render_ui;
+const {Collapsible: Collapsible} = _dll_pie_lib__render_ui;
+const {Readable: Readable} = _dll_pie_lib__render_ui;
+const {hasText: hasText} = _dll_pie_lib__render_ui;
+const {PreviewPrompt: PreviewPrompt} = _dll_pie_lib__render_ui;
+const {color: color} = _dll_pie_lib__render_ui;
+const {withStyles: withStyles} = _dll_material_ui__core_styles;
+const {Tooltip: Tooltip} = _dll_material_ui__core;
+const {isEqual: isEqual} = _dll_lodash;
+const {isEmpty: isEmpty} = _dll_lodash;
+const cx = _dll_classnames;
+const {renderMath: renderMath$1} = _dll_pie_lib__math_rendering;
+const MathQuill = _dll_pie_framework__mathquill;
+const _jsxFileName = "/home/circleci/repo/packages/math-inline/src/main.jsx";
+function _optionalChain(ops) {
+  let lastAccessLHS = undefined;
+  let value = ops[0];
+  let i = 1;
+  while (i < ops.length) {
+    const op = ops[i];
+    const fn = ops[i + 1];
+    i += 2;
+    if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) {
+      return undefined;
+    }
+    if (op === 'access' || op === 'optionalAccess') {
+      lastAccessLHS = value;
+      value = fn(value);
+    } else if (op === 'call' || op === 'optionalCall') {
+      value = fn((...args) => value.call(lastAccessLHS, ...args));
+      lastAccessLHS = undefined;
+    }
+  }
+  return value;
+}
+let registered = false;
+const NEWLINE_LATEX = /\\newline/g;
+const REGEX = /{{response}}/gm;
+const DEFAULT_KEYPAD_VARIANT = 6;
+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(additionalKeys = [], equationEditor) {
+  return Math.floor(additionalKeys.length / 5) * 30 + (equationEditor === 'miscellaneous' ? 600 : 500);
+}
+function prepareForStatic(model, state) {
+  const {config, disabled} = model || ({});
+  const {expression, responses, printMode, alwaysShowCorrect} = config || ({});
+  if (config && expression) {
+    const modelExpression = expression;
+    if (state.showCorrect) {
+      return responses && responses.length && responses[0].answer;
+    }
+    let answerBlocks = 1;
+    return (modelExpression || '').replace(REGEX, function () {
+      const answer = state.session.answers[`r${answerBlocks}`];
+      if (printMode && !alwaysShowCorrect) {
+        const blankSpace = ('\\ \\ ').repeat(30) + '\\newline ';
+        return `\\MathQuillMathField[r${answerBlocks++}]{${blankSpace.repeat(3)}}`;
+      }
+      if (disabled) {
+        return `\\embed{answerBlock}[r${answerBlocks++}]`;
+      }
+      return `\\MathQuillMathField[r${answerBlocks++}]{${answer && answer.value || ''}}`;
+    }).replace(NEWLINE_LATEX, '\\embed{newLine}[]');
+  }
+}
+class Main extends React$1.Component {
+  static __initStatic() {
+    this.propTypes = {
+      classes: PropTypes.object,
+      session: PropTypes.object.isRequired,
+      onSessionChange: PropTypes.func,
+      model: PropTypes.object.isRequired
+    };
+  }
+  constructor(props) {
+    super(props);
+    Main.prototype.__init.call(this);
+    Main.prototype.__init2.call(this);
+    Main.prototype.__init3.call(this);
+    Main.prototype.__init4.call(this);
+    Main.prototype.__init5.call(this);
+    Main.prototype.__init6.call(this);
+    Main.prototype.__init7.call(this);
+    Main.prototype.__init8.call(this);
+    Main.prototype.__init9.call(this);
+    Main.prototype.__init10.call(this);
+    Main.prototype.__init11.call(this);
+    Main.prototype.__init12.call(this);
+    const answers = {};
+    if (props.model.config && props.model.config.expression) {
+      let answerBlocks = 1;
+      (props.model.config.expression || '').replace(REGEX, () => {
+        answers[`r${answerBlocks}`] = {
+          value: props.session && props.session.answers && props.session.answers[`r${answerBlocks}`] && props.session.answers[`r${answerBlocks}`].value || ''
+        };
+        answerBlocks += 1;
+      });
+    }
+    this.state = {
+      session: {
+        ...props.session,
+        answers
+      },
+      activeAnswerBlock: '',
+      showCorrect: this.props.model.config.alwaysShowCorrect || false
+    };
+  }
+  UNSAFE_componentWillMount() {
+    const {classes} = this.props;
+    if (typeof window !== 'undefined') {
+      let MQ = MathQuill.getInterface(2);
+      if (!registered) {
+        MQ.registerEmbed('answerBlock', data => {
+          return {
+            htmlString: `<div class="${classes.blockContainer}">
+                <div class="${classes.blockResponse}" id="${data}Index">R</div>
+                <div class="${classes.blockMath}">
+                  <span id="${data}"></span>
+                </div>
+              </div>`,
+            text: () => 'text',
+            latex: () => `\\embed{answerBlock}[${data}]`
+          };
+        });
+        registered = true;
+      }
+    }
+  }
+  __init() {
+    this.handleAnswerBlockDomUpdate = () => {
+      const {model, classes} = 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) {
+            let MQ = MathQuill.getInterface(2);
+            const answer = answers[answerId];
+            el.textContent = answer && answer.value || '';
+            if (!model.view) ; else {
+              el.parentElement.parentElement.classList.remove(classes.correct);
+              el.parentElement.parentElement.classList.remove(classes.incorrect);
+            }
+            MQ.StaticMath(el);
+            indexEl.textContent = 'R';
+          }
+        });
+      }
+      renderMath$1(this.root);
+    };
+  }
+  componentDidUpdate() {
+    this.handleAnswerBlockDomUpdate();
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {config} = this.props.model;
+    const {config: nextConfig = {}} = nextProps.model || ({});
+    if (config.env && config.env.mode !== 'evaluate' || nextConfig.env && nextConfig.env.mode !== 'evaluate') {
+      this.setState({
+        ...this.state.session,
+        showCorrect: false
+      });
+    }
+    if (nextConfig.alwaysShowCorrect) {
+      this.setState({
+        showCorrect: true
+      });
+    }
+    if (config && config.responses && config.responses.length !== nextConfig.responses.length || !config && nextConfig && nextConfig.responses || config && nextConfig && config.expression !== nextConfig.expression) {
+      const newAnswers = {};
+      const answers = this.state.session.answers;
+      let answerBlocks = 1;
+      (nextConfig.expression || '').replace(REGEX, () => {
+        newAnswers[`r${answerBlocks}`] = {
+          value: answers && answers[`r${answerBlocks}`] && answers[`r${answerBlocks}`].value || ''
+        };
+        answerBlocks++;
+      });
+      this.setState(state => ({
+        session: {
+          ...state.session,
+          completeAnswer: this.mqStatic && this.mqStatic.mathField.latex(),
+          answers: newAnswers
+        }
+      }), this.handleAnswerBlockDomUpdate);
+    }
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    const sameModel = isEqual(this.props.model, nextProps.model);
+    const sameState = isEqual(this.state, nextState);
+    return !sameModel || !sameState;
+  }
+  componentDidMount() {
+    this.handleAnswerBlockDomUpdate();
+    setTimeout(() => renderMath$1(this.root), 100);
+  }
+  __init2() {
+    this.onDone = () => {};
+  }
+  __init3() {
+    this.onSimpleResponseChange = response => {
+      this.setState(state => ({
+        session: {
+          ...state.session,
+          response
+        }
+      }), this.callOnSessionChange);
+    };
+  }
+  __init4() {
+    this.onSubFieldFocus = id => {
+      this.setState({
+        activeAnswerBlock: id
+      });
+    };
+  }
+  __init5() {
+    this.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
+        };
+      }
+    };
+  }
+  __init6() {
+    this.setInput = input => {
+      this.input = input;
+    };
+  }
+  __init7() {
+    this.onClick = data => {
+      const c = this.toNodeData(data);
+      if (c.type === 'clear') {
+        this.input.clear();
+      } else if (c.type === 'command') {
+        if (Array.isArray(c.value)) {
+          c.value.forEach(vv => {
+            this.input.cmd(vv);
+          });
+        } else {
+          this.input.cmd(c.value);
+        }
+      } else if (c.type === 'cursor') {
+        this.input.keystroke(c.value);
+      } else {
+        this.input.write(c.value);
+      }
+      this.input.focus();
+    };
+  }
+  __init8() {
+    this.callOnSessionChange = () => {
+      const {onSessionChange} = this.props;
+      if (onSessionChange) {
+        onSessionChange(this.state.session);
+      }
+    };
+  }
+  __init9() {
+    this.toggleShowCorrect = show => {
+      this.setState({
+        showCorrect: show
+      }, this.handleAnswerBlockDomUpdate);
+    };
+  }
+  __init10() {
+    this.subFieldChanged = (name, subfieldValue) => {
+      updateSpans();
+      if (name) {
+        this.setState(state => ({
+          session: {
+            ...state.session,
+            completeAnswer: this.mqStatic && this.mqStatic.mathField.latex(),
+            answers: {
+              ...state.session.answers,
+              [name]: {
+                value: subfieldValue
+              }
+            }
+          }
+        }), this.callOnSessionChange);
+      }
+    };
+  }
+  __init11() {
+    this.getFieldName = (changeField, fields) => {
+      const {answers} = this.state.session;
+      if (Object.keys(answers || ({})).length) {
+        const keys = Object.keys(answers);
+        return keys.find(k => {
+          const tf = fields[k];
+          return tf && tf.id == changeField.id;
+        });
+      }
+    };
+  }
+  __init12() {
+    this.onBlur = e => {
+      const {relatedTarget, currentTarget} = e || ({});
+      if (!relatedTarget || !currentTarget || !IS_SAFARI && !_optionalChain([relatedTarget, 'optionalAccess', _13 => _13.offsetParent, 'optionalAccess', _14 => _14.children, 'access', _15 => _15[0], 'optionalAccess', _16 => _16.attributes, 'optionalAccess', _17 => _17['data-keypad']]) || IS_SAFARI && !_optionalChain([relatedTarget, 'optionalAccess', _18 => _18.offsetParent, 'optionalAccess', _19 => _19.children, 'access', _20 => _20[0], 'optionalAccess', _21 => _21.children, 'access', _22 => _22[0], 'optionalAccess', _23 => _23.attributes, 'optionalAccess', _24 => _24['data-keypad']])) {
+        this.setState({
+          activeAnswerBlock: ''
+        });
+      }
+    };
+  }
+  setTooltipRef(ref) {
+    setTimeout(() => {
+      if (ref && IS_SAFARI) {
+        const div = document.querySelector('[role=\'tooltip\']');
+        if (div) {
+          const el = div.firstChild;
+          el.setAttribute('tabindex', '-1');
+        }
+      }
+    }, 1);
+  }
+  render() {
+    const {model, classes} = this.props;
+    const {activeAnswerBlock, showCorrect, session} = this.state;
+    const {config, correctness, disabled, view, teacherInstructions, rationale, feedback, animationsDisabled, printMode, alwaysShowCorrect} = model || ({});
+    if (!config) {
+      return null;
+    }
+    const {showNote, note, prompt, responses, responseType, equationEditor, customKeys, env: {mode, role} = {}} = config || ({});
+    const displayNote = (showCorrect || mode === 'view' && role === 'instructor') && showNote && note;
+    const emptyResponse = isEmpty(responses);
+    const showCorrectAnswerToggle = !emptyResponse && correctness && correctness.correctness !== 'correct';
+    const tooltipModeEnabled = disabled && correctness && responseType !== ResponseTypes.simple;
+    const additionalKeys = generateAdditionalKeys(customKeys);
+    const correct = correctness && correctness.correct;
+    const staticLatex = prepareForStatic(model, this.state) || '';
+    const viewMode = disabled && !correctness;
+    const studentPrintMode = printMode && !alwaysShowCorrect;
+    const printView = React$1.createElement('div', {
+      className: classes.printContainer,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 411
+      }
+    }, React$1.createElement(Static, {
+      ref: mqStatic => this.mqStatic = mqStatic || this.mqStatic,
+      latex: staticLatex,
+      onSubFieldChange: this.subFieldChanged,
+      getFieldName: this.getFieldName,
+      setInput: this.setInput,
+      onSubFieldFocus: this.onSubFieldFocus,
+      onBlur: this.onBlur,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 412
+      }
+    }));
+    const midContent = React$1.createElement('div', {
+      className: classes.main,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 424
+      }
+    }, prompt && React$1.createElement('div', {
+      className: classes.content,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 426
+      }
+    }, React$1.createElement(PreviewPrompt, {
+      prompt: prompt,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 427
+      }
+    })), studentPrintMode ? printView : React$1.createElement(Readable, {
+      false: true,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 430
+      }
+    }, React$1.createElement('div', {
+      className: classes.inputAndKeypadContainer,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 431
+      }
+    }, responseType === ResponseTypes.simple && React$1.createElement(SimpleQuestionBlock, {
+      onSimpleResponseChange: this.onSimpleResponseChange,
+      showCorrect: showCorrect,
+      emptyResponse: emptyResponse,
+      model: model,
+      session: session,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 433
+      }
+    }), responseType === ResponseTypes.advanced && React$1.createElement('div', {
+      className: cx(classes.expression, {
+        [classes.incorrect]: !emptyResponse && !correct && !showCorrect,
+        [classes.correct]: !emptyResponse && (correct || showCorrect),
+        [classes.showCorrectness]: !emptyResponse && disabled && correctness && !view,
+        [classes.correctAnswerShown]: showCorrect
+      }),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 442
+      }
+    }, React$1.createElement(Tooltip, {
+      ref: ref => this.setTooltipRef(ref),
+      interactive: true,
+      open: !!activeAnswerBlock,
+      classes: {
+        tooltip: classes.keypadTooltip,
+        popper: classes.keypadTooltipPopper
+      },
+      title: Object.keys(session.answers).map(answerId => answerId === activeAnswerBlock && !(showCorrect || disabled) && React$1.createElement('div', {
+        'data-keypad': true,
+        key: answerId,
+        className: classes.responseContainer,
+        style: {
+          width: getKeyPadWidth(additionalKeys, equationEditor)
+        },
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 462
+        }
+      }, React$1.createElement(HorizontalKeypad, {
+        additionalKeys: additionalKeys,
+        mode: equationEditor || DEFAULT_KEYPAD_VARIANT,
+        onClick: this.onClick,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 471
+        }
+      })) || null),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 450
+      }
+    }, React$1.createElement(Static, {
+      ref: mqStatic => this.mqStatic = mqStatic || this.mqStatic,
+      latex: staticLatex,
+      onSubFieldChange: this.subFieldChanged,
+      getFieldName: this.getFieldName,
+      setInput: this.setInput,
+      onSubFieldFocus: this.onSubFieldFocus,
+      onBlur: this.onBlur,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 481
+      }
+    }))))), viewMode && teacherInstructions && hasText(teacherInstructions) && React$1.createElement(React$1.Fragment, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 497
+      }
+    }, !animationsDisabled ? React$1.createElement(Collapsible, {
+      labels: {
+        hidden: 'Show Teacher Instructions',
+        visible: 'Hide Teacher Instructions'
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 498
+      }
+    }, React$1.createElement('div', {
+      dangerouslySetInnerHTML: {
+        __html: teacherInstructions
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 501
+      }
+    })) : React$1.createElement('div', {
+      dangerouslySetInnerHTML: {
+        __html: teacherInstructions
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 502
+      }
+    }), React$1.createElement('br', {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 503
+      }
+    })), viewMode && rationale && hasText(rationale) && React$1.createElement(React$1.Fragment, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 509
+      }
+    }, !animationsDisabled ? React$1.createElement(Collapsible, {
+      labels: {
+        hidden: 'Show Rationale',
+        visible: 'Hide Rationale'
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 510
+      }
+    }, React$1.createElement('div', {
+      dangerouslySetInnerHTML: {
+        __html: rationale
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 513
+      }
+    })) : React$1.createElement('div', {
+      dangerouslySetInnerHTML: {
+        __html: rationale
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 514
+      }
+    })), displayNote && React$1.createElement('div', {
+      className: classes.note,
+      dangerouslySetInnerHTML: {
+        __html: `<strong>Note:</strong> ${note}`
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 519
+      }
+    }));
+    if (tooltipModeEnabled && (showCorrectAnswerToggle || teacherInstructions || rationale || feedback)) {
+      return React$1.createElement(Tooltip, {
+        interactive: true,
+        classes: {
+          tooltip: classes.tooltip,
+          popper: classes.tooltipPopper
+        },
+        title: React$1.createElement('div', {
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 536
+          }
+        }, React$1.createElement('div', {
+          className: classes.main,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 537
+          }
+        }, showCorrectAnswerToggle && React$1.createElement(CorrectAnswerToggle, {
+          className: classes.toggle,
+          show: true,
+          toggled: showCorrect,
+          onToggle: this.toggleShowCorrect,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 539
+          }
+        })), teacherInstructions && hasText(teacherInstructions) && [React$1.createElement(Collapsible, {
+          key: "collapsible",
+          labels: {
+            hidden: 'Show Teacher Instructions',
+            visible: 'Hide Teacher Instructions'
+          },
+          className: classes.collapsible,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 548
+          }
+        }, React$1.createElement(PreviewPrompt, {
+          prompt: teacherInstructions,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 556
+          }
+        })), React$1.createElement('br', {
+          key: "br",
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 558
+          }
+        })], rationale && hasText(rationale) && [React$1.createElement(Collapsible, {
+          key: "collapsible",
+          labels: {
+            hidden: 'Show Rationale',
+            visible: 'Hide Rationale'
+          },
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 561
+          }
+        }, React$1.createElement(PreviewPrompt, {
+          prompt: rationale,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 568
+          }
+        })), React$1.createElement('br', {
+          key: "br",
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 570
+          }
+        })], feedback && React$1.createElement(Feedback, {
+          correctness: correctness.correctness,
+          feedback: feedback,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 573
+          }
+        })),
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 529
+        }
+      }, React$1.createElement('div', {
+        className: classes.mainContainer,
+        ref: r => this.root = r || this.root,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 581
+        }
+      }, midContent));
+    }
+    return React$1.createElement('div', {
+      className: classes.mainContainer,
+      ref: r => this.root = r || this.root,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 591
+      }
+    }, midContent);
+  }
+}
+Main.__initStatic();
+const styles = theme => ({
+  mainContainer: {
+    display: 'inline-block'
+  },
+  tooltip: {
+    background: `${color.primaryLight()} !important`,
+    color: color.text(),
+    padding: theme.spacing.unit * 2,
+    border: `1px solid ${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
+  },
+  main: {
+    width: '100%',
+    position: 'relative',
+    padding: theme.spacing.unit / 2,
+    backgroundColor: color.background(),
+    color: color.text()
+  },
+  title: {
+    fontSize: '1.1rem',
+    display: 'block',
+    marginTop: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit
+  },
+  content: {
+    marginTop: theme.spacing.unit * 2
+  },
+  note: {
+    paddingTop: '15px'
+  },
+  collapsible: {
+    marginTop: 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',
+          margin: theme.spacing.unit * 2 / 3,
+          padding: theme.spacing.unit / 4
+        }
+      },
+      '& sup': {
+        top: 0
+      }
+    }
+  },
+  inputAndKeypadContainer: {
+    position: 'relative',
+    '& .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
+    }
+  },
+  showCorrectness: {
+    border: '2px solid'
+  },
+  correctAnswerShown: {
+    padding: theme.spacing.unit,
+    letterSpacing: '0.5px'
+  },
+  correct: {
+    borderColor: `${color.correct()} !important`
+  },
+  incorrect: {
+    borderColor: `${color.incorrect()} !important`
+  },
+  blockContainer: {
+    margin: `${theme.spacing.unit}px !important`,
+    display: 'inline-flex',
+    border: '2px solid grey !important'
+  },
+  blockResponse: {
+    flex: 2,
+    color: 'grey',
+    background: 'lightgrey',
+    fontSize: '0.8rem !important',
+    padding: `${theme.spacing.unit / 2}px !important`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRight: `2px solid ${color.disabled()} !important`
+  },
+  toggle: {
+    color: color.text()
+  },
+  blockMath: {
+    color: color.text(),
+    backgroundColor: color.background(),
+    padding: `${theme.spacing.unit / 2}px !important`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 8,
+    '& > .mq-math-mode': {
+      '& > .mq-hasCursor': {
+        '& > .mq-cursor': {
+          display: 'none'
+        }
+      }
+    }
+  },
+  printContainer: {
+    marginBottom: '10px',
+    pointerEvents: 'none'
+  }
+});
+var Main$1 = withStyles(styles)(Main);
+const React = _dll_react;
+const ReactDOM = _dll_react_dom;
+const {debounce: debounce} = _dll_lodash;
+const debug = _dll_debug;
+const {renderMath: renderMath} = _dll_pie_lib__math_rendering;
+const log = debug('pie-element:math-inline:print');
+const preparePrintModel = (model, opts) => {
+  const instr = opts.role === 'instructor';
+  model.prompt = model.promptEnabled !== false ? model.prompt : undefined;
+  model.teacherInstructions = instr && model.teacherInstructionsEnabled !== false ? model.teacherInstructions : undefined;
+  model.showTeacherInstructions = instr;
+  model.alwaysShowCorrect = instr;
+  model.printMode = true;
+  model.feedback = undefined;
+  model.animationsDisabled = true;
+  return {
+    ...model,
+    disabled: true,
+    config: {
+      ...model,
+      env: {
+        mode: instr ? 'evaluate' : model.mode,
+        role: opts.role
+      }
+    }
+  };
+};
+class MathInlinePrint extends HTMLElement {
+  constructor() {
+    super();
+    this._options = null;
+    this._model = null;
+    this._session = [];
+    this._rerender = debounce(() => {
+      if (this._model && this._session) {
+        const printModel = preparePrintModel(this._model, this._options);
+        const element = this._options && React.createElement(Main$1, {
+          model: printModel,
+          session: {}
+        });
+        ReactDOM.render(element, this, () => {
+          log('render complete - render math');
+          renderMath(this);
+        });
+      } else {
+        log('skip');
+      }
+    }, 50, {
+      leading: false,
+      trailing: true
+    });
+  }
+  set options(o) {
+    this._options = o;
+  }
+  set model(s) {
+    this._model = s;
+    this._rerender();
+  }
+  connectedCallback() {}
+}
+export {MathInlinePrint as default};