@khanacademy/math-input 3.0.0 → 4.0.0

package/dist/es/index.js

@@ -57,64 +57,6 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-/**
- * This file contains constants for keypad buttons that aren't single
- * alphanumeric characters.
- */
-// TODO(charlie): There's duplication between this file and key-configs.js.
-// We should clean it up by removing this file and requiring clients to use the
-// `id` field on the key configurations.
-var Keys = /*#__PURE__*/function (Keys) {
-  Keys["PLUS"] = "PLUS";
-  Keys["MINUS"] = "MINUS";
-  Keys["NEGATIVE"] = "NEGATIVE";
-  Keys["TIMES"] = "TIMES";
-  Keys["DIVIDE"] = "DIVIDE";
-  Keys["DECIMAL"] = "DECIMAL";
-  Keys["PERIOD"] = "PERIOD";
-  Keys["PERCENT"] = "PERCENT";
-  Keys["CDOT"] = "CDOT";
-  Keys["EQUAL"] = "EQUAL";
-  Keys["NEQ"] = "NEQ";
-  Keys["GT"] = "GT";
-  Keys["LT"] = "LT";
-  Keys["GEQ"] = "GEQ";
-  Keys["LEQ"] = "LEQ";
-  Keys["FRAC_INCLUSIVE"] = "FRAC_INCLUSIVE";
-  Keys["FRAC_EXCLUSIVE"] = "FRAC_EXCLUSIVE";
-  Keys["FRAC"] = "FRAC";
-  Keys["EXP"] = "EXP";
-  Keys["EXP_2"] = "EXP_2";
-  Keys["EXP_3"] = "EXP_3";
-  Keys["SQRT"] = "SQRT";
-  Keys["CUBE_ROOT"] = "CUBE_ROOT";
-  Keys["RADICAL"] = "RADICAL";
-  Keys["LEFT_PAREN"] = "LEFT_PAREN";
-  Keys["RIGHT_PAREN"] = "RIGHT_PAREN";
-  Keys["LN"] = "LN";
-  Keys["LOG"] = "LOG";
-  Keys["LOG_N"] = "LOG_N";
-  Keys["SIN"] = "SIN";
-  Keys["COS"] = "COS";
-  Keys["TAN"] = "TAN";
-  Keys["PI"] = "PI";
-  Keys["THETA"] = "THETA";
-  Keys["UP"] = "UP";
-  Keys["RIGHT"] = "RIGHT";
-  Keys["DOWN"] = "DOWN";
-  Keys["LEFT"] = "LEFT";
-  Keys["BACKSPACE"] = "BACKSPACE";
-  Keys["DISMISS"] = "DISMISS";
-  Keys["JUMP_OUT_PARENTHESES"] = "JUMP_OUT_PARENTHESES";
-  Keys["JUMP_OUT_EXPONENT"] = "JUMP_OUT_EXPONENT";
-  Keys["JUMP_OUT_BASE"] = "JUMP_OUT_BASE";
-  Keys["JUMP_INTO_NUMERATOR"] = "JUMP_INTO_NUMERATOR";
-  Keys["JUMP_OUT_NUMERATOR"] = "JUMP_OUT_NUMERATOR";
-  Keys["JUMP_OUT_DENOMINATOR"] = "JUMP_OUT_DENOMINATOR";
-  Keys["NOOP"] = "NOOP";
-  return Keys;
-}(Keys || {}); // mobile native only
-
 class Text extends React.Component {
   render() {
     const {
@@ -408,16 +350,23 @@ let KeypadType = /*#__PURE__*/function (KeypadType) {
   KeypadType["EXPRESSION"] = "EXPRESSION";
   return KeypadType;
 }({});
-let KeyType = /*#__PURE__*/function (KeyType) {
-  KeyType["EMPTY"] = "EMPTY";
-  KeyType["VALUE"] = "VALUE";
-  KeyType["OPERATOR"] = "OPERATOR";
-  KeyType["INPUT_NAVIGATION"] = "INPUT_NAVIGATION";
-  KeyType["KEYPAD_NAVIGATION"] = "KEYPAD_NAVIGATION";
-  KeyType["MANY"] = "MANY";
-  KeyType["ECHO"] = "ECHO";
-  return KeyType;
-}({});
+const KeyTypes = ["EMPTY",
+// For numerals, variables, and any other characters that themselves
+// compose 'values'.
+"VALUE",
+// For buttons that insert or adjust math in an input.
+"OPERATOR",
+// For buttons that move the cursor in an input (including via
+// deletion).
+"INPUT_NAVIGATION",
+// For buttons that modify the broader keypad state (e.g., by changing
+// the visible pane).
+"KEYPAD_NAVIGATION",
+// For buttons that house multiple buttons and have no action
+// themselves.
+"MANY",
+// For the echo animation that appears on press.
+"ECHO"];
 let DeviceOrientation = /*#__PURE__*/function (DeviceOrientation) {
   DeviceOrientation["LANDSCAPE"] = "LANDSCAPE";
   DeviceOrientation["PORTRAIT"] = "PORTRAIT";
@@ -470,131 +419,208 @@ let EchoAnimationType = /*#__PURE__*/function (EchoAnimationType) {
 //   listed here.  Much of the Arab world uses U+066C.
 const decimalSeparator = getDecimalSeparator() === "," ? DecimalSeparator.COMMA : DecimalSeparator.PERIOD;
 
-/**
- * This file contains a wrapper around MathQuill so that we can provide a
- * more regular interface for the functionality we need while insulating us
- * from MathQuill changes.
- */
-
-// Keeping `window` in place for test suite and GitHub Pages.
-// If it does not exist, fall back to CommonJS require. - jsatk
+var MQ = MathQuill.getInterface(2);
 
-const decimalSymbol = decimalSeparator === DecimalSeparator.COMMA ? "," : ".";
 var ActionType = /*#__PURE__*/function (ActionType) {
   ActionType["WRITE"] = "write";
   ActionType["CMD"] = "cmd";
   ActionType["KEYSTROKE"] = "keystroke";
   ActionType[ActionType["MQ_END"] = 0] = "MQ_END";
   return ActionType;
-}(ActionType || {}); // A mapping from keys that can be pressed on a keypad to the way in which
-// MathQuill should modify its input in response to that key-press. Any keys
-// that do not provide explicit actions (like the numeral keys) will merely
-// write their contents to MathQuill.
-const KeyActions = {
-  [Keys.PLUS]: {
-    str: "+",
-    fn: ActionType.WRITE
-  },
-  [Keys.MINUS]: {
-    str: "-",
-    fn: ActionType.WRITE
-  },
-  [Keys.NEGATIVE]: {
-    str: "-",
-    fn: ActionType.WRITE
-  },
-  [Keys.TIMES]: {
-    str: "\\times",
-    fn: ActionType.WRITE
-  },
-  [Keys.DIVIDE]: {
-    str: "\\div",
-    fn: ActionType.WRITE
-  },
-  [Keys.DECIMAL]: {
-    str: decimalSymbol,
-    fn: ActionType.WRITE
-  },
-  [Keys.EQUAL]: {
-    str: "=",
-    fn: ActionType.WRITE
-  },
-  [Keys.NEQ]: {
-    str: "\\neq",
-    fn: ActionType.WRITE
-  },
-  [Keys.CDOT]: {
-    str: "\\cdot",
-    fn: ActionType.WRITE
-  },
-  [Keys.PERCENT]: {
-    str: "%",
-    fn: ActionType.WRITE
-  },
-  [Keys.LEFT_PAREN]: {
-    str: "(",
-    fn: ActionType.CMD
-  },
-  [Keys.RIGHT_PAREN]: {
-    str: ")",
-    fn: ActionType.CMD
-  },
-  [Keys.SQRT]: {
-    str: "sqrt",
-    fn: ActionType.CMD
-  },
-  [Keys.PI]: {
-    str: "pi",
-    fn: ActionType.CMD
-  },
-  [Keys.THETA]: {
-    str: "theta",
-    fn: ActionType.CMD
-  },
-  [Keys.RADICAL]: {
-    str: "nthroot",
-    fn: ActionType.CMD
-  },
-  [Keys.LT]: {
-    str: "<",
-    fn: ActionType.WRITE
-  },
-  [Keys.LEQ]: {
-    str: "\\leq",
-    fn: ActionType.WRITE
-  },
-  [Keys.GT]: {
-    str: ">",
-    fn: ActionType.WRITE
-  },
-  [Keys.GEQ]: {
-    str: "\\geq",
-    fn: ActionType.WRITE
-  },
-  [Keys.UP]: {
-    str: "Up",
-    fn: ActionType.KEYSTROKE
-  },
-  [Keys.DOWN]: {
-    str: "Down",
-    fn: ActionType.KEYSTROKE
-  },
+}(ActionType || {});
+const decimalSymbol = decimalSeparator === DecimalSeparator.COMMA ? "," : ".";
+function buildGenericCallback(str, type = ActionType.WRITE) {
+  return function (mathQuill) {
+    switch (type) {
+      case ActionType.WRITE:
+        {
+          mathQuill.write(str);
+          return;
+        }
+      case ActionType.CMD:
+        {
+          mathQuill.cmd(str);
+          return;
+        }
+      case ActionType.KEYSTROKE:
+        {
+          mathQuill.keystroke(str);
+          return;
+        }
+    }
+  };
+}
+const keyToMathquillMap = {
+  CDOT: buildGenericCallback("\\cdot"),
+  COS: buildGenericCallback("cos"),
+  DECIMAL: buildGenericCallback(decimalSymbol),
+  DIVIDE: buildGenericCallback("\\div"),
+  EQUAL: buildGenericCallback("="),
+  EXP: buildGenericCallback("^"),
+  EXP_2: buildGenericCallback("^2"),
+  EXP_3: buildGenericCallback("^3"),
+  GEQ: buildGenericCallback("\\geq"),
+  GT: buildGenericCallback(">"),
+  LEQ: buildGenericCallback("\\leq"),
+  LN: buildGenericCallback("\\ln"),
+  LOG: buildGenericCallback("\\log"),
+  LT: buildGenericCallback("<"),
+  MINUS: buildGenericCallback("-"),
+  NEGATIVE: buildGenericCallback("-"),
+  NEQ: buildGenericCallback("\\neq"),
+  PERCENT: buildGenericCallback("%"),
+  PERIOD: buildGenericCallback("."),
+  PLUS: buildGenericCallback("+"),
+  SIN: buildGenericCallback("sin"),
+  TAN: buildGenericCallback("tan"),
+  TIMES: buildGenericCallback("\\times"),
   // The `FRAC_EXCLUSIVE` variant is handled manually, since we may need to do
   // some additional navigation depending on the cursor position.
-  [Keys.FRAC_INCLUSIVE]: {
-    str: "/",
-    fn: ActionType.CMD
-  }
-};
-const NormalCommands = {
-  [Keys.LOG]: "log",
-  [Keys.LN]: "ln",
-  [Keys.SIN]: "sin",
-  [Keys.COS]: "cos",
-  [Keys.TAN]: "tan"
+  FRAC_INCLUSIVE: buildGenericCallback("/", ActionType.CMD),
+  LEFT_PAREN: buildGenericCallback("(", ActionType.CMD),
+  RIGHT_PAREN: buildGenericCallback(")", ActionType.CMD),
+  SQRT: buildGenericCallback("sqrt", ActionType.CMD),
+  PHI: buildGenericCallback("\\phi", ActionType.CMD),
+  PI: buildGenericCallback("pi", ActionType.CMD),
+  THETA: buildGenericCallback("theta", ActionType.CMD),
+  RADICAL: buildGenericCallback("nthroot", ActionType.CMD),
+  UP: buildGenericCallback("Up", ActionType.KEYSTROKE),
+  DOWN: buildGenericCallback("Down", ActionType.KEYSTROKE),
+  CUBE_ROOT: mathQuill => {
+    mathQuill.write("\\sqrt[3]{}");
+    mathQuill.keystroke("Left"); // under the root
+  },
+
+  FRAC_EXCLUSIVE: mathQuill => {
+    const cursor = mathQuill.__controller.cursor;
+    // If there's nothing to the left of the cursor, then we want to
+    // leave the cursor to the left of the fraction after creating it.
+    const shouldNavigateLeft = cursor[MQ.L] === ActionType.MQ_END;
+    mathQuill.cmd("\\frac");
+    if (shouldNavigateLeft) {
+      mathQuill.keystroke("Left");
+    }
+  },
+  LOG_B: mathQuill => {
+    mathQuill.typedText("log_");
+    mathQuill.keystroke("Right");
+    mathQuill.typedText("(");
+    mathQuill.keystroke("Left");
+    mathQuill.keystroke("Left");
+  },
+  LOG_N: mathQuill => {
+    mathQuill.write("log_{ }\\left(\\right)");
+    mathQuill.keystroke("Left"); // into parentheses
+    mathQuill.keystroke("Left"); // out of parentheses
+    mathQuill.keystroke("Left"); // into index
+  },
+
+  NTHROOT3: mathQuill => {
+    mathQuill.typedText("nthroot3");
+    mathQuill.keystroke("Right");
+  },
+  POW: mathQuill => {
+    const contents = mathQuill.latex();
+    mathQuill.typedText("^");
+
+    // If the input hasn't changed (for example, if we're
+    // attempting to add an exponent on an empty input or an empty
+    // denominator), insert our own "a^b"
+    if (mathQuill.latex() === contents) {
+      mathQuill.typedText("a^b");
+    }
+  },
+  // These need to be overwritten by the consumer
+  // if they're going to be used
+  FRAC: () => {},
+  RIGHT: () => {},
+  LEFT: () => {},
+  BACKSPACE: () => {},
+  DISMISS: () => {},
+  JUMP_OUT_PARENTHESES: () => {},
+  JUMP_OUT_EXPONENT: () => {},
+  JUMP_OUT_BASE: () => {},
+  JUMP_INTO_NUMERATOR: () => {},
+  JUMP_OUT_NUMERATOR: () => {},
+  JUMP_OUT_DENOMINATOR: () => {},
+  NOOP: () => {},
+  MANY: () => {},
+  NUM_0: buildGenericCallback("0"),
+  NUM_1: buildGenericCallback("1"),
+  NUM_2: buildGenericCallback("2"),
+  NUM_3: buildGenericCallback("3"),
+  NUM_4: buildGenericCallback("4"),
+  NUM_5: buildGenericCallback("5"),
+  NUM_6: buildGenericCallback("6"),
+  NUM_7: buildGenericCallback("7"),
+  NUM_8: buildGenericCallback("8"),
+  NUM_9: buildGenericCallback("9"),
+  a: buildGenericCallback("a"),
+  b: buildGenericCallback("b"),
+  c: buildGenericCallback("c"),
+  d: buildGenericCallback("d"),
+  e: buildGenericCallback("e"),
+  f: buildGenericCallback("f"),
+  g: buildGenericCallback("g"),
+  h: buildGenericCallback("h"),
+  i: buildGenericCallback("i"),
+  j: buildGenericCallback("j"),
+  k: buildGenericCallback("k"),
+  l: buildGenericCallback("l"),
+  m: buildGenericCallback("m"),
+  n: buildGenericCallback("n"),
+  o: buildGenericCallback("o"),
+  p: buildGenericCallback("p"),
+  q: buildGenericCallback("q"),
+  r: buildGenericCallback("r"),
+  s: buildGenericCallback("s"),
+  t: buildGenericCallback("t"),
+  u: buildGenericCallback("u"),
+  v: buildGenericCallback("v"),
+  w: buildGenericCallback("w"),
+  x: buildGenericCallback("x"),
+  y: buildGenericCallback("y"),
+  z: buildGenericCallback("z"),
+  A: buildGenericCallback("A"),
+  B: buildGenericCallback("B"),
+  C: buildGenericCallback("C"),
+  D: buildGenericCallback("D"),
+  E: buildGenericCallback("E"),
+  F: buildGenericCallback("F"),
+  G: buildGenericCallback("G"),
+  H: buildGenericCallback("H"),
+  I: buildGenericCallback("I"),
+  J: buildGenericCallback("J"),
+  K: buildGenericCallback("K"),
+  L: buildGenericCallback("L"),
+  M: buildGenericCallback("M"),
+  N: buildGenericCallback("N"),
+  O: buildGenericCallback("O"),
+  P: buildGenericCallback("P"),
+  Q: buildGenericCallback("Q"),
+  R: buildGenericCallback("R"),
+  S: buildGenericCallback("S"),
+  T: buildGenericCallback("T"),
+  U: buildGenericCallback("U"),
+  V: buildGenericCallback("V"),
+  W: buildGenericCallback("W"),
+  X: buildGenericCallback("X"),
+  Y: buildGenericCallback("Y"),
+  Z: buildGenericCallback("Z")
 };
-const ArithmeticOperators = ["+", "-", "\\cdot", "\\times", "\\div"];
-const EqualityOperators = ["=", "\\neq", "<", "\\leq", ">", "\\geq"];
+
+let MathFieldActionType = /*#__PURE__*/function (MathFieldActionType) {
+  MathFieldActionType["WRITE"] = "write";
+  MathFieldActionType["CMD"] = "cmd";
+  MathFieldActionType["KEYSTROKE"] = "keystroke";
+  MathFieldActionType[MathFieldActionType["MQ_END"] = 0] = "MQ_END";
+  return MathFieldActionType;
+}({});
+
+// The MathQuill MathField Cursor
+// it's not part of the public API for MathQuill,
+// we reach into the internals to get it
+
 const Numerals = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
 const GreekLetters = ["\\theta", "\\pi"];
 const Letters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
@@ -602,24 +628,623 @@ const Letters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M"
 // We only consider numerals, variables, and Greek Letters to be proper
 // leaf nodes.
 const ValidLeaves = [...Numerals, ...GreekLetters, ...Letters.map(letter => letter.toLowerCase()), ...Letters.map(letter => letter.toUpperCase())];
+function getCursor(mathField) {
+  return mathField.__controller.cursor;
+}
+function isFraction(node) {
+  return node.jQ && node.jQ.hasClass("mq-fraction");
+}
+function isNumerator(node) {
+  return node.jQ && node.jQ.hasClass("mq-numerator");
+}
+function isDenominator(node) {
+  return node.jQ && node.jQ.hasClass("mq-denominator");
+}
+function isSubScript(node) {
+  // NOTE(charlie): MyScript has a structure whereby its superscripts seem
+  // to be represented as a parent node with 'mq-sup-only' containing a
+  // single child with 'mq-sup'.
+  return node.jQ && (node.jQ.hasClass("mq-sub-only") || node.jQ.hasClass("mq-sub"));
+}
+function isSuperScript(node) {
+  // NOTE(charlie): MyScript has a structure whereby its superscripts seem
+  // to be represented as a parent node with 'mq-sup-only' containing a
+  // single child with 'mq-sup'.
+  return node.jQ && (node.jQ.hasClass("mq-sup-only") || node.jQ.hasClass("mq-sup"));
+}
+function isParens(node) {
+  return node && node.ctrlSeq === "\\left(";
+}
+function isLeaf(node) {
+  return node && node.ctrlSeq && ValidLeaves.includes(node.ctrlSeq.trim());
+}
+function isSquareRoot(node) {
+  return node.blocks && node.blocks[0].jQ && node.blocks[0].jQ.hasClass("mq-sqrt-stem");
+}
+function isNthRoot(node) {
+  return node.blocks && node.blocks[0].jQ && node.blocks[0].jQ.hasClass("mq-nthroot");
+}
+function isNthRootIndex(node) {
+  return node.jQ && node.jQ.hasClass("mq-nthroot");
+}
+function isInsideLogIndex(cursor) {
+  const grandparent = cursor.parent.parent;
+  if (grandparent && grandparent.jQ.hasClass("mq-supsub")) {
+    const command = maybeFindCommandBeforeParens(grandparent);
+    if (command && command.name === "\\log") {
+      return true;
+    }
+  }
+  return false;
+}
+function isInsideEmptyNode(cursor) {
+  return cursor[MQ.L] === MathFieldActionType.MQ_END && cursor[MQ.R] === MathFieldActionType.MQ_END;
+}
+function selectNode(node, cursor) {
+  cursor.insLeftOf(node);
+  cursor.startSelection();
+  cursor.insRightOf(node);
+  cursor.select();
+  cursor.endSelection();
+}
+
+/**
+ * Return the start node, end node, and full name of the command of which
+ * the initial node is a part, or `null` if the node is not part of a
+ * command.
+ *
+ * @param {node} initialNode - the node to included as part of the command
+ * @returns {null|object} - `null` or an object containing the start node
+ *                          (`startNode`), end node (`endNode`), and full
+ *                          name (`name`) of the command
+ */
+function maybeFindCommand(initialNode) {
+  if (!initialNode) {
+    return null;
+  }
+
+  // MathQuill stores commands as separate characters so that
+  // users can delete commands one character at a time.  We iterate over
+  // the nodes from right to left until we hit a sequence starting with a
+  // '\\', which signifies the start of a command; then we iterate from
+  // left to right until we hit a '\\left(', which signifies the end of a
+  // command.  If we encounter any character that doesn't belong in a
+  // command, we return null.  We match a single character at a time.
+  // Ex) ['\\l', 'o', 'g ', '\\left(', ...]
+  const commandCharRegex = /^[a-z]$/;
+  const commandStartRegex = /^\\[a-z]$/;
+  const commandEndSeq = "\\left(";
+
+  // Note: We allowlist the set of valid commands, since relying solely on
+  // a command being prefixed with a backslash leads to undesired
+  // behavior. For example, Greek symbols, left parentheses, and square
+  // roots all get treated as commands.
+  const validCommands = ["\\log", "\\ln", "\\cos", "\\sin", "\\tan"];
+  let name = "";
+  let startNode;
+  let endNode;
+
+  // Collect the portion of the command from the current node, leftwards
+  // until the start of the command.
+  let node = initialNode;
+  while (node !== 0) {
+    const ctrlSeq = node.ctrlSeq.trim();
+    if (commandCharRegex.test(ctrlSeq)) {
+      name = ctrlSeq + name;
+    } else if (commandStartRegex.test(ctrlSeq)) {
+      name = ctrlSeq + name;
+      startNode = node;
+      break;
+    } else {
+      break;
+    }
+    node = node[MQ.L];
+  }
+
+  // If we hit the start of a command, then grab the rest of it by
+  // iterating rightwards to compute the full name of the command, along
+  // with its terminal node.
+  if (startNode) {
+    // Next, iterate from the start to the right.
+    node = initialNode[MQ.R];
+    while (node !== 0) {
+      const ctrlSeq = node.ctrlSeq.trim();
+      if (commandCharRegex.test(ctrlSeq)) {
+        // If we have a single character, add it to the command
+        // name.
+        name = name + ctrlSeq;
+      } else if (ctrlSeq === commandEndSeq) {
+        // If we hit the command end delimiter (the left
+        // parentheses surrounding its arguments), stop.
+        endNode = node;
+        break;
+      }
+      node = node[MQ.R];
+    }
+    if (validCommands.includes(name)) {
+      return {
+        name,
+        startNode,
+        endNode
+      };
+    } else {
+      return null;
+    }
+  } else {
+    return null;
+  }
+}
+
+/**
+ * Return the start node, end node, and full name of the command to the left
+ * of `\\left(`, or `null` if there is no command.
+ *
+ * @param {node} leftParenNode - node where .ctrlSeq == `\\left(`
+ * @returns {null|object} - `null` or an object containing the start node
+ *                          (`startNode`), end node (`endNode`), and full
+ *                          name (`name`) of the command
+ */
+function maybeFindCommandBeforeParens(leftParenNode) {
+  return maybeFindCommand(leftParenNode[MQ.L]);
+}
+function contextForCursor(cursor) {
+  // First, try to find any fraction to the right, unimpeded.
+  let visitor = cursor;
+  while (visitor[MQ.R] !== MathFieldActionType.MQ_END) {
+    if (isFraction(visitor[MQ.R])) {
+      return CursorContext.BEFORE_FRACTION;
+    } else if (!isLeaf(visitor[MQ.R])) {
+      break;
+    }
+    visitor = visitor[MQ.R];
+  }
+
+  // If that didn't work, check if the parent or grandparent is a special
+  // context, so that we can jump outwards.
+  if (isParens(cursor.parent && cursor.parent.parent)) {
+    return CursorContext.IN_PARENS;
+  } else if (isNumerator(cursor.parent)) {
+    return CursorContext.IN_NUMERATOR;
+  } else if (isDenominator(cursor.parent)) {
+    return CursorContext.IN_DENOMINATOR;
+  } else if (isSubScript(cursor.parent)) {
+    return CursorContext.IN_SUB_SCRIPT;
+  } else if (isSuperScript(cursor.parent)) {
+    return CursorContext.IN_SUPER_SCRIPT;
+  } else {
+    return CursorContext.NONE;
+  }
+}
+
+function handleLeftArrow(mathField, cursor) {
+  // If we're inside a function, and just after the left parentheses, we
+  // need to skip the entire function name, rather than move the cursor
+  // inside of it. For example, when hitting left from within the
+  // parentheses in `cos()`, we want to place the cursor to the left of
+  // the entire expression, rather than between the `s` and the left
+  // parenthesis.
+  // From the cursor's perspective, this requires that our left node is
+  // the ActionType.MQ_END node, that our grandparent is the left parenthesis, and
+  // the nodes to the left of our grandparent comprise a valid function
+  // name.
+  if (cursor[MQ.L] === MathFieldActionType.MQ_END) {
+    const parent = cursor.parent;
+    const grandparent = parent.parent;
+    if (grandparent.ctrlSeq === "\\left(") {
+      const command = maybeFindCommandBeforeParens(grandparent);
+      if (command) {
+        cursor.insLeftOf(command.startNode);
+        return;
+      }
+    }
+  }
+
+  // Otherwise, we default to the standard MathQull left behavior.
+  mathField.keystroke("Left");
+}
+function handleRightArrow(mathField, cursor) {
+  const command = maybeFindCommand(cursor[MQ.R]);
+  if (command) {
+    // Similarly, if a function is to our right, then we need to place
+    // the cursor at the start of its parenthetical content, which is
+    // done by putting it to the left of ites parentheses and then
+    // moving right once.
+    cursor.insLeftOf(command.endNode);
+    mathField.keystroke("Right");
+  } else {
+    // Otherwise, we default to the standard MathQull right behavior.
+    mathField.keystroke("Right");
+  }
+}
+function handleArrow(mathField, key) {
+  const cursor = getCursor(mathField);
+  if (key === "LEFT") {
+    handleLeftArrow(mathField, cursor);
+  } else if (key === "RIGHT") {
+    handleRightArrow(mathField, cursor);
+  }
+}
+
+function handleBackspaceInNthRoot(mathField, cursor) {
+  const isAtLeftEnd = cursor[MQ.L] === MathFieldActionType.MQ_END;
+  const isRootEmpty = isInsideEmptyNode(cursor.parent.parent.blocks[0].ends);
+  if (isAtLeftEnd) {
+    selectNode(cursor.parent.parent, cursor);
+    if (isRootEmpty) {
+      mathField.keystroke("Backspace");
+    }
+  } else {
+    mathField.keystroke("Backspace");
+  }
+}
+function handleBackspaceInRootIndex(mathField, cursor) {
+  if (isInsideEmptyNode(cursor)) {
+    // When deleting the index in a nthroot, we change from the nthroot
+    // to a sqrt, e.g. \sqrt[|]{35x-5} => |\sqrt{35x-5}.  If there's no
+    // content under the root, then we delete the whole thing.
+
+    const grandparent = cursor.parent.parent;
+    const latex = grandparent.latex();
+    const reinsertionPoint = grandparent[MQ.L];
+    selectNode(grandparent, cursor);
+    const rootIsEmpty = grandparent.blocks[1].jQ.text() === "";
+    if (rootIsEmpty) {
+      // If there is not content under the root then simply delete
+      // the whole thing.
+      mathField.keystroke("Backspace");
+    } else {
+      // Replace the nthroot with a sqrt if there was content under
+      // the root.
+
+      // Start by deleting the selection.
+      mathField.keystroke("Backspace");
+
+      // Replace the nth-root with a sqrt.
+      mathField.write(latex.replace(/^\\sqrt\[\]/, "\\sqrt"));
+
+      // Adjust the cursor to be to the left the sqrt.
+      if (reinsertionPoint === MathFieldActionType.MQ_END) {
+        mathField.moveToDirEnd(MQ.L);
+      } else {
+        cursor.insRightOf(reinsertionPoint);
+      }
+    }
+  } else {
+    if (cursor[MQ.L] !== MathFieldActionType.MQ_END) {
+      // If the cursor is not at the leftmost position inside the
+      // root's index, delete a character.
+      mathField.keystroke("Backspace");
+    }
+  }
+}
+function handleBackspaceInLogIndex(mathField, cursor) {
+  if (isInsideEmptyNode(cursor)) {
+    const grandparent = cursor.parent.parent;
+    const command = maybeFindCommandBeforeParens(grandparent);
+    cursor.insLeftOf(command == null ? void 0 : command.startNode);
+    cursor.startSelection();
+    if (grandparent[MQ.R] !== MathFieldActionType.MQ_END) {
+      cursor.insRightOf(grandparent[MQ.R]);
+    } else {
+      cursor.insRightOf(grandparent);
+    }
+    cursor.select();
+    cursor.endSelection();
+    const isLogBodyEmpty = grandparent[MQ.R].contentjQ.text() === "";
+    if (isLogBodyEmpty) {
+      // If there's no content inside the log's parens then delete the
+      // whole thing.
+      mathField.keystroke("Backspace");
+    }
+  } else {
+    mathField.keystroke("Backspace");
+  }
+}
+function handleBackspaceOutsideParens(cursor) {
+  // In this case the node with '\\left(' for its ctrlSeq
+  // is the parent of the expression contained within the
+  // parentheses.
+  //
+  // Handle selecting an expression before deleting:
+  // (x+1)| => |(x+1)|
+  // \log(x+1)| => |\log(x+1)|
+
+  const leftNode = cursor[MQ.L];
+  const rightNode = cursor[MQ.R];
+  const command = maybeFindCommandBeforeParens(leftNode);
+  if (command && command.startNode) {
+    // There's a command before the parens so we select it as well as
+    // the parens.
+    cursor.insLeftOf(command.startNode);
+    cursor.startSelection();
+    if (rightNode === MathFieldActionType.MQ_END) {
+      cursor.insAtRightEnd(cursor.parent);
+    } else {
+      cursor.insLeftOf(rightNode);
+    }
+    cursor.select();
+    cursor.endSelection();
+  } else {
+    cursor.startSelection();
+    cursor.insLeftOf(leftNode); // left of \\left(
+    cursor.select();
+    cursor.endSelection();
+  }
+}
+function handleBackspaceInsideParens(mathField, cursor) {
+  // Handle situations when the cursor is inside parens or a
+  // command that uses parens, e.g. \log() or \tan()
+  //
+  // MathQuill represents log(x+1) in roughly the following way
+  // [l, o, g, \\left[parent:[x, +, 1]]]
+  //
+  // If the cursor is inside the parentheses it's next to one of:
+  // x, +, or 1.  This makes sub_sub_expr its parent and sub_expr
+  // it's parent.
+  //
+  // Interestingly parent doesn't have any nodes to the left or
+  // right of it (even though the corresponding DOM node has
+  // ( and ) characters on either side.
+  //
+  // The grandparent's ctrlSeq is `\\left(`. The `\\right)` isn't
+  // stored anywhere.  NOTE(kevinb): I believe this is because
+  // MathQuill knows what the close paren should be and does the
+  // right thing at render time.
+  //
+  // This conditional branch handles the following cases:
+  // - \log(x+1|) => \log(x+|)
+  // - \log(|x+1) => |\log(x+1)|
+  // - \log(|) => |
+
+  if (cursor[MQ.L] !== MathFieldActionType.MQ_END) {
+    // This command contains math and there's some math to
+    // the left of the cursor that we should delete normally
+    // before doing anything special.
+    mathField.keystroke("Backspace");
+    return;
+  }
+  const grandparent = cursor.parent.parent;
+
+  // If the cursors is inside the parens at the start but the command
+  // has a subscript as is the case in log_n then move the cursor into
+  // the subscript, e.g. \log_{5}(|x+1) => \log_{5|}(x+1)
+
+  if (grandparent[MQ.L].sub) {
+    // if there is a subscript
+    if (grandparent[MQ.L].sub.jQ.text()) {
+      // and it contains text
+      // move the cursor to the right end of the subscript
+      cursor.insAtRightEnd(grandparent[MQ.L].sub);
+      return;
+    }
+  }
+
+  // Determine if the parens are empty before we modify the
+  // cursor's position.
+  const isEmpty = isInsideEmptyNode(cursor);
+
+  // Insert the cursor to the left of the command if there is one
+  // or before the '\\left(` if there isn't
+  const command = maybeFindCommandBeforeParens(grandparent);
+  cursor.insLeftOf(command && command.startNode || grandparent);
+  cursor.startSelection();
+  cursor.insRightOf(grandparent);
+  cursor.select();
+  cursor.endSelection();
+
+  // Delete the selection, but only if the parens were empty to
+  // begin with.
+  if (isEmpty) {
+    mathField.keystroke("Backspace");
+  }
+}
+function handleBackspaceAfterLigaturedSymbol(mathField) {
+  mathField.keystroke("Backspace");
+  mathField.keystroke("Backspace");
+}
+
+/**
+ * Selects and deletes part of the expression based on the cursor location.
+ * See inline comments for precise behavior of different cases.
+ */
+function handleBackspace(mathField) {
+  const cursor = getCursor(mathField);
+  if (!cursor.selection) {
+    const parent = cursor.parent;
+    const grandparent = parent.parent;
+    const leftNode = cursor[MQ.L];
+    if (isFraction(leftNode)) {
+      selectNode(leftNode, cursor);
+    } else if (isSquareRoot(leftNode)) {
+      selectNode(leftNode, cursor);
+    } else if (isNthRoot(leftNode)) {
+      selectNode(leftNode, cursor);
+    } else if (isNthRootIndex(parent)) {
+      handleBackspaceInRootIndex(mathField, cursor);
+    } else if (leftNode.ctrlSeq === "\\left(") {
+      handleBackspaceOutsideParens(cursor);
+    } else if (grandparent.ctrlSeq === "\\left(") {
+      handleBackspaceInsideParens(mathField, cursor);
+    } else if (isInsideLogIndex(cursor)) {
+      handleBackspaceInLogIndex(mathField, cursor);
+    } else if (leftNode.ctrlSeq === "\\ge " || leftNode.ctrlSeq === "\\le ") {
+      handleBackspaceAfterLigaturedSymbol(mathField);
+    } else if (isNthRoot(grandparent) && leftNode === MathFieldActionType.MQ_END) {
+      handleBackspaceInNthRoot(mathField, cursor);
+    } else {
+      mathField.keystroke("Backspace");
+    }
+  } else {
+    mathField.keystroke("Backspace");
+  }
+}
+
+const ArithmeticOperators = ["+", "-", "\\cdot", "\\times", "\\div"];
+const EqualityOperators = ["=", "\\neq", "<", "\\leq", ">", "\\geq"];
+function handleExponent(mathField, key) {
+  const cursor = getCursor(mathField);
+  // If there's an invalid operator preceding the cursor (anything that
+  // knowingly cannot be raised to a power), add an empty set of
+  // parentheses and apply the exponent to that.
+  const invalidPrefixes = [...ArithmeticOperators, ...EqualityOperators];
+  const precedingNode = cursor[MQ.L];
+  const shouldPrefixWithParens = precedingNode === MathFieldActionType.MQ_END || invalidPrefixes.includes(precedingNode.ctrlSeq.trim());
+  if (shouldPrefixWithParens) {
+    mathField.write("\\left(\\right)");
+  }
+
+  // Insert the appropriate exponent operator.
+  switch (key) {
+    case "EXP":
+      mathField.cmd("^");
+      break;
+    case "EXP_2":
+    case "EXP_3":
+      mathField.write(`^${key === "EXP_2" ? 2 : 3}`);
+
+      // If we enter a square or a cube, we should leave the cursor
+      // within the newly inserted parens, if they exist. This takes
+      // exactly four left strokes, since the cursor by default would
+      // end up to the right of the exponent.
+      if (shouldPrefixWithParens) {
+        mathField.keystroke("Left");
+        mathField.keystroke("Left");
+        mathField.keystroke("Left");
+        mathField.keystroke("Left");
+      }
+      break;
+    default:
+      throw new Error(`Invalid exponent key: ${key}`);
+  }
+}
+
 const KeysForJumpContext = {
-  [CursorContext.IN_PARENS]: Keys.JUMP_OUT_PARENTHESES,
-  [CursorContext.IN_SUPER_SCRIPT]: Keys.JUMP_OUT_EXPONENT,
-  [CursorContext.IN_SUB_SCRIPT]: Keys.JUMP_OUT_BASE,
-  [CursorContext.BEFORE_FRACTION]: Keys.JUMP_INTO_NUMERATOR,
-  [CursorContext.IN_NUMERATOR]: Keys.JUMP_OUT_NUMERATOR,
-  [CursorContext.IN_DENOMINATOR]: Keys.JUMP_OUT_DENOMINATOR
+  [CursorContext.IN_PARENS]: "JUMP_OUT_PARENTHESES",
+  [CursorContext.IN_SUPER_SCRIPT]: "JUMP_OUT_EXPONENT",
+  [CursorContext.IN_SUB_SCRIPT]: "JUMP_OUT_BASE",
+  [CursorContext.BEFORE_FRACTION]: "JUMP_INTO_NUMERATOR",
+  [CursorContext.IN_NUMERATOR]: "JUMP_OUT_NUMERATOR",
+  [CursorContext.IN_DENOMINATOR]: "JUMP_OUT_DENOMINATOR"
 };
+
+/**
+ * Advances the cursor to the next logical position.
+ */
+function handleJumpOut(mathField, key) {
+  const cursor = getCursor(mathField);
+  const context = contextForCursor(cursor);
+
+  // Validate that the current cursor context matches the key's intent.
+  if (KeysForJumpContext[context] !== key) {
+    // If we don't have a valid cursor context, yet the user was able
+    // to trigger a jump-out key, that's a broken invariant. Rather
+    // than throw an error (which would kick the user out of the
+    // exercise), we do nothing, as a fallback strategy. The user can
+    // still move the cursor manually.
+    return;
+  }
+  switch (context) {
+    case CursorContext.IN_PARENS:
+      // Insert at the end of the parentheses, and then navigate right
+      // once more to get 'beyond' the parentheses.
+      cursor.insRightOf(cursor.parent.parent);
+      break;
+    case CursorContext.BEFORE_FRACTION:
+      // Find the nearest fraction to the right of the cursor.
+      let fractionNode;
+      let visitor = cursor;
+      while (visitor[MQ.R] !== MathFieldActionType.MQ_END) {
+        if (isFraction(visitor[MQ.R])) {
+          fractionNode = visitor[MQ.R];
+        }
+        visitor = visitor[MQ.R];
+      }
+
+      // Jump into it!
+      cursor.insLeftOf(fractionNode);
+      mathField.keystroke("Right");
+      break;
+    case CursorContext.IN_NUMERATOR:
+      // HACK(charlie): I can't find a better way to do this. The goal
+      // is to place the cursor at the start of the matching
+      // denominator. So, we identify the appropriate node, and
+      // continue rightwards until we find ourselves inside of it.
+      // It's possible that there are cases in which we don't reach
+      // the denominator, though I can't think of any.
+      const siblingDenominator = cursor.parent.parent.blocks[1];
+      while (cursor.parent !== siblingDenominator) {
+        mathField.keystroke("Right");
+      }
+      break;
+    case CursorContext.IN_DENOMINATOR:
+      cursor.insRightOf(cursor.parent.parent);
+      break;
+    case CursorContext.IN_SUB_SCRIPT:
+      // Insert just beyond the superscript.
+      cursor.insRightOf(cursor.parent.parent);
+
+      // Navigate right once more, if we're right before parens. This
+      // is to handle the standard case in which the subscript is the
+      // base of a custom log.
+      if (isParens(cursor[MQ.R])) {
+        mathField.keystroke("Right");
+      }
+      break;
+    case CursorContext.IN_SUPER_SCRIPT:
+      // Insert just beyond the superscript.
+      cursor.insRightOf(cursor.parent.parent);
+      break;
+    default:
+      throw new Error(`Attempted to 'Jump Out' from node, but found no ` + `appropriate cursor context: ${context}`);
+  }
+}
+
+function buildNormalFunctionCallback(command) {
+  return function (mathField) {
+    mathField.write(`\\${command}\\left(\\right)`);
+    mathField.keystroke("Left");
+  };
+}
+const customKeyTranslator = _extends({}, keyToMathquillMap, {
+  // note(Matthew): in all likelihood, this should be moved
+  // to the shared key2MathQuill translator. During this refactor
+  // I tried to keep logic the same while deduplicating code.
+  // Perseus' Expression MathInput treats this stuff differently
+  // (or doesn't do anything with them at all), so I kept it that way
+  BACKSPACE: handleBackspace,
+  EXP: handleExponent,
+  EXP_2: handleExponent,
+  EXP_3: handleExponent,
+  FRAC: mathQuill => {
+    mathQuill.cmd("\\frac");
+  },
+  JUMP_OUT_PARENTHESES: handleJumpOut,
+  JUMP_OUT_EXPONENT: handleJumpOut,
+  JUMP_OUT_BASE: handleJumpOut,
+  JUMP_INTO_NUMERATOR: handleJumpOut,
+  JUMP_OUT_NUMERATOR: handleJumpOut,
+  JUMP_OUT_DENOMINATOR: handleJumpOut,
+  LEFT: handleArrow,
+  RIGHT: handleArrow,
+  LOG: buildNormalFunctionCallback("log"),
+  LN: buildNormalFunctionCallback("ln"),
+  SIN: buildNormalFunctionCallback("sin"),
+  COS: buildNormalFunctionCallback("cos"),
+  TAN: buildNormalFunctionCallback("tan")
+});
+
+/**
+ * This file contains a wrapper around MathQuill so that we can provide a
+ * more regular interface for the functionality we need while insulating us
+ * from MathQuill changes.
+ */
 class MathWrapper {
-  // MathQuill interface
   // MathQuill input
 
   constructor(element, options = {}, callbacks = {}) {
-    this.MQ = void 0;
     this.mathField = void 0;
     this.callbacks = void 0;
-    this.MQ = MathQuill.getInterface(2);
-    this.mathField = this.MQ.MathField(element, {
+    this.mathField = MQ.MathField(element, {
       // use a span instead of a textarea so that we don't bring up the
       // native keyboard on mobile when selecting the input
       substituteTextarea: function () {
@@ -645,10 +1270,6 @@ class MathWrapper {
     controller.cursor.hide();
     controller.blurred = true;
   }
-  _writeNormalFunction(name) {
-    this.mathField.write(`\\${name}\\left(\\right)`);
-    this.mathField.keystroke("Left");
-  }
 
   /**
    * Handle a key press and return the resulting cursor state.
@@ -657,51 +1278,10 @@ class MathWrapper {
    * @returns {object} a cursor object, consisting of a cursor context
    */
   pressKey(key) {
-    const cursor = this.mathField.__controller.cursor;
-    if (key in KeyActions) {
-      const {
-        str,
-        fn
-      } = KeyActions[key];
-      if (str && fn) {
-        this.mathField[fn](str);
-      }
-    } else if (Object.keys(NormalCommands).includes(key)) {
-      this._writeNormalFunction(NormalCommands[key]);
-    } else if (key === Keys.FRAC_EXCLUSIVE) {
-      // If there's nothing to the left of the cursor, then we want to
-      // leave the cursor to the left of the fraction after creating it.
-      const shouldNavigateLeft = cursor[this.MQ.L] === ActionType.MQ_END;
-      this.mathField.cmd("\\frac");
-      if (shouldNavigateLeft) {
-        this.mathField.keystroke("Left");
-      }
-    } else if (key === Keys.FRAC) {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      cursor[this.MQ.L] === ActionType.MQ_END;
-      this.mathField.cmd("\\frac");
-    } else if (key === Keys.LOG_N) {
-      this.mathField.write("log_{ }\\left(\\right)");
-      this.mathField.keystroke("Left"); // into parentheses
-      this.mathField.keystroke("Left"); // out of parentheses
-      this.mathField.keystroke("Left"); // into index
-    } else if (key === Keys.CUBE_ROOT) {
-      this.mathField.write("\\sqrt[3]{}");
-      this.mathField.keystroke("Left"); // under the root
-    } else if (key === Keys.EXP || key === Keys.EXP_2 || key === Keys.EXP_3) {
-      this._handleExponent(cursor, key);
-    } else if (key === Keys.JUMP_OUT_PARENTHESES || key === Keys.JUMP_OUT_EXPONENT || key === Keys.JUMP_OUT_BASE || key === Keys.JUMP_INTO_NUMERATOR || key === Keys.JUMP_OUT_NUMERATOR || key === Keys.JUMP_OUT_DENOMINATOR) {
-      this._handleJumpOut(cursor, key);
-    } else if (key === Keys.BACKSPACE) {
-      this._handleBackspace(cursor);
-    } else if (key === Keys.LEFT) {
-      this._handleLeftArrow(cursor);
-    } else if (key === Keys.RIGHT) {
-      this._handleRightArrow(cursor);
-    } else if (/^[a-zA-Z]$/.test(key)) {
-      this.mathField[ActionType.WRITE](key);
-    } else if (/^NUM_\d/.test(key)) {
-      this.mathField[ActionType.WRITE](key[4]);
+    const cursor = this.getCursor();
+    const translator = customKeyTranslator[key];
+    if (translator) {
+      translator(this.mathField, key);
     }
     if (!cursor.selection) {
       // don't show the cursor for selections
@@ -747,7 +1327,7 @@ class MathWrapper {
         // Unless that would leave us mid-command, in which case, we
         // need to adjust and place the cursor inside the parens
         // following the command.
-        const command = this._maybeFindCommand(cursor[this.MQ.L]);
+        const command = maybeFindCommand(cursor[MQ.L]);
         if (command && command.endNode) {
           // NOTE(charlie): endNode should definitely be \left(.
           cursor.insLeftOf(command.endNode);
@@ -761,8 +1341,17 @@ class MathWrapper {
       }
     }
   }
+
+  // note(Matthew): extracted this logic to share it elsewhere,
+  // but it's part of the public MathWrapper API
   getCursor() {
-    return this.mathField.__controller.cursor;
+    return getCursor(this.mathField);
+  }
+
+  // note(Matthew): extracted this logic to keep this file focused,
+  // but it's part of the public MathWrapper API
+  contextForCursor(cursor) {
+    return contextForCursor(cursor);
   }
   getSelection() {
     return this.getCursor().selection;
@@ -777,576 +1366,6 @@ class MathWrapper {
     const cursor = this.getCursor();
     return cursor.parent.id === 1 && cursor[1] === 0 && cursor[-1] === 0;
   }
-
-  // Notes about MathQuill
-  //
-  // MathQuill's stores its layout as nested linked lists.  Each node in the
-  // list has this.MQ.L '-1' and this.MQ.R '1' properties that define links to
-  // the left and right nodes respectively.  They also have
-  //
-  // ctrlSeq: contains the latex code snippet that defines that node.
-  // jQ: jQuery object for the DOM node(s) for this MathQuill node.
-  // ends: pointers to the nodes at the ends of the container.
-  // parent: parent node.
-  // blocks: an array containing one or more nodes that make up the node.
-  // sub?: subscript node if there is one as is the case in log_n
-  //
-  // All of the code below is super fragile.  Please be especially careful
-  // when upgrading MathQuill.
-
-  _handleBackspaceInNthRoot(cursor) {
-    const isAtLeftEnd = cursor[this.MQ.L] === ActionType.MQ_END;
-    const isRootEmpty = this._isInsideEmptyNode(cursor.parent.parent.blocks[0].ends);
-    if (isAtLeftEnd) {
-      this._selectNode(cursor.parent.parent, cursor);
-      if (isRootEmpty) {
-        this.mathField.keystroke("Backspace");
-      }
-    } else {
-      this.mathField.keystroke("Backspace");
-    }
-  }
-
-  /**
-   * Advances the cursor to the next logical position.
-   *
-   * @param {cursor} cursor
-   * @private
-   */
-  _handleJumpOut(cursor, key) {
-    const context = this.contextForCursor(cursor);
-
-    // Validate that the current cursor context matches the key's intent.
-    if (KeysForJumpContext[context] !== key) {
-      // If we don't have a valid cursor context, yet the user was able
-      // to trigger a jump-out key, that's a broken invariant. Rather
-      // than throw an error (which would kick the user out of the
-      // exercise), we do nothing, as a fallback strategy. The user can
-      // still move the cursor manually.
-      return;
-    }
-    switch (context) {
-      case CursorContext.IN_PARENS:
-        // Insert at the end of the parentheses, and then navigate right
-        // once more to get 'beyond' the parentheses.
-        cursor.insRightOf(cursor.parent.parent);
-        break;
-      case CursorContext.BEFORE_FRACTION:
-        // Find the nearest fraction to the right of the cursor.
-        let fractionNode;
-        let visitor = cursor;
-        while (visitor[this.MQ.R] !== ActionType.MQ_END) {
-          if (this._isFraction(visitor[this.MQ.R])) {
-            fractionNode = visitor[this.MQ.R];
-          }
-          visitor = visitor[this.MQ.R];
-        }
-
-        // Jump into it!
-        cursor.insLeftOf(fractionNode);
-        this.mathField.keystroke("Right");
-        break;
-      case CursorContext.IN_NUMERATOR:
-        // HACK(charlie): I can't find a better way to do this. The goal
-        // is to place the cursor at the start of the matching
-        // denominator. So, we identify the appropriate node, and
-        // continue rightwards until we find ourselves inside of it.
-        // It's possible that there are cases in which we don't reach
-        // the denominator, though I can't think of any.
-        const siblingDenominator = cursor.parent.parent.blocks[1];
-        while (cursor.parent !== siblingDenominator) {
-          this.mathField.keystroke("Right");
-        }
-        break;
-      case CursorContext.IN_DENOMINATOR:
-        cursor.insRightOf(cursor.parent.parent);
-        break;
-      case CursorContext.IN_SUB_SCRIPT:
-        // Insert just beyond the superscript.
-        cursor.insRightOf(cursor.parent.parent);
-
-        // Navigate right once more, if we're right before parens. This
-        // is to handle the standard case in which the subscript is the
-        // base of a custom log.
-        if (this._isParens(cursor[this.MQ.R])) {
-          this.mathField.keystroke("Right");
-        }
-        break;
-      case CursorContext.IN_SUPER_SCRIPT:
-        // Insert just beyond the superscript.
-        cursor.insRightOf(cursor.parent.parent);
-        break;
-      default:
-        throw new Error(`Attempted to 'Jump Out' from node, but found no ` + `appropriate cursor context: ${context}`);
-    }
-  }
-
-  /**
-   * Selects and deletes part of the expression based on the cursor location.
-   * See inline comments for precise behavior of different cases.
-   *
-   * @param {cursor} cursor
-   * @private
-   */
-  _handleBackspace(cursor) {
-    if (!cursor.selection) {
-      const parent = cursor.parent;
-      const grandparent = parent.parent;
-      const leftNode = cursor[this.MQ.L];
-      if (this._isFraction(leftNode)) {
-        this._selectNode(leftNode, cursor);
-      } else if (this._isSquareRoot(leftNode)) {
-        this._selectNode(leftNode, cursor);
-      } else if (this._isNthRoot(leftNode)) {
-        this._selectNode(leftNode, cursor);
-      } else if (this._isNthRootIndex(parent)) {
-        this._handleBackspaceInRootIndex(cursor);
-      } else if (leftNode.ctrlSeq === "\\left(") {
-        this._handleBackspaceOutsideParens(cursor);
-      } else if (grandparent.ctrlSeq === "\\left(") {
-        this._handleBackspaceInsideParens(cursor);
-      } else if (this._isInsideLogIndex(cursor)) {
-        this._handleBackspaceInLogIndex(cursor);
-      } else if (leftNode.ctrlSeq === "\\ge " || leftNode.ctrlSeq === "\\le ") {
-        this._handleBackspaceAfterLigaturedSymbol(cursor);
-      } else if (this._isNthRoot(grandparent) && leftNode === ActionType.MQ_END) {
-        this._handleBackspaceInNthRoot(cursor);
-      } else {
-        this.mathField.keystroke("Backspace");
-      }
-    } else {
-      this.mathField.keystroke("Backspace");
-    }
-  }
-  _handleLeftArrow(cursor) {
-    // If we're inside a function, and just after the left parentheses, we
-    // need to skip the entire function name, rather than move the cursor
-    // inside of it. For example, when hitting left from within the
-    // parentheses in `cos()`, we want to place the cursor to the left of
-    // the entire expression, rather than between the `s` and the left
-    // parenthesis.
-    // From the cursor's perspective, this requires that our left node is
-    // the ActionType.MQ_END node, that our grandparent is the left parenthesis, and
-    // the nodes to the left of our grandparent comprise a valid function
-    // name.
-    if (cursor[this.MQ.L] === ActionType.MQ_END) {
-      const parent = cursor.parent;
-      const grandparent = parent.parent;
-      if (grandparent.ctrlSeq === "\\left(") {
-        const command = this._maybeFindCommandBeforeParens(grandparent);
-        if (command) {
-          cursor.insLeftOf(command.startNode);
-          return;
-        }
-      }
-    }
-
-    // Otherwise, we default to the standard MathQull left behavior.
-    this.mathField.keystroke("Left");
-  }
-  _handleRightArrow(cursor) {
-    const command = this._maybeFindCommand(cursor[this.MQ.R]);
-    if (command) {
-      // Similarly, if a function is to our right, then we need to place
-      // the cursor at the start of its parenthetical content, which is
-      // done by putting it to the left of ites parentheses and then
-      // moving right once.
-      cursor.insLeftOf(command.endNode);
-      this.mathField.keystroke("Right");
-    } else {
-      // Otherwise, we default to the standard MathQull right behavior.
-      this.mathField.keystroke("Right");
-    }
-  }
-  _handleExponent(cursor, key) {
-    // If there's an invalid operator preceding the cursor (anything that
-    // knowingly cannot be raised to a power), add an empty set of
-    // parentheses and apply the exponent to that.
-    const invalidPrefixes = [...ArithmeticOperators, ...EqualityOperators];
-    const precedingNode = cursor[this.MQ.L];
-    const shouldPrefixWithParens = precedingNode === ActionType.MQ_END || invalidPrefixes.includes(precedingNode.ctrlSeq.trim());
-    if (shouldPrefixWithParens) {
-      this.mathField.write("\\left(\\right)");
-    }
-
-    // Insert the appropriate exponent operator.
-    switch (key) {
-      case Keys.EXP:
-        this.mathField.cmd("^");
-        break;
-      case Keys.EXP_2:
-      case Keys.EXP_3:
-        this.mathField.write(`^${key === Keys.EXP_2 ? 2 : 3}`);
-
-        // If we enter a square or a cube, we should leave the cursor
-        // within the newly inserted parens, if they exist. This takes
-        // exactly four left strokes, since the cursor by default would
-        // end up to the right of the exponent.
-        if (shouldPrefixWithParens) {
-          this.mathField.keystroke("Left");
-          this.mathField.keystroke("Left");
-          this.mathField.keystroke("Left");
-          this.mathField.keystroke("Left");
-        }
-        break;
-      default:
-        throw new Error(`Invalid exponent key: ${key}`);
-    }
-  }
-
-  /**
-   * Return the start node, end node, and full name of the command of which
-   * the initial node is a part, or `null` if the node is not part of a
-   * command.
-   *
-   * @param {node} initialNode - the node to included as part of the command
-   * @returns {null|object} - `null` or an object containing the start node
-   *                          (`startNode`), end node (`endNode`), and full
-   *                          name (`name`) of the command
-   * @private
-   */
-  _maybeFindCommand(initialNode) {
-    if (!initialNode) {
-      return null;
-    }
-
-    // MathQuill stores commands as separate characters so that
-    // users can delete commands one character at a time.  We iterate over
-    // the nodes from right to left until we hit a sequence starting with a
-    // '\\', which signifies the start of a command; then we iterate from
-    // left to right until we hit a '\\left(', which signifies the end of a
-    // command.  If we encounter any character that doesn't belong in a
-    // command, we return null.  We match a single character at a time.
-    // Ex) ['\\l', 'o', 'g ', '\\left(', ...]
-    const commandCharRegex = /^[a-z]$/;
-    const commandStartRegex = /^\\[a-z]$/;
-    const commandEndSeq = "\\left(";
-
-    // Note: We allowlist the set of valid commands, since relying solely on
-    // a command being prefixed with a backslash leads to undesired
-    // behavior. For example, Greek symbols, left parentheses, and square
-    // roots all get treated as commands.
-    const validCommands = ["\\log", "\\ln", "\\cos", "\\sin", "\\tan"];
-    let name = "";
-    let startNode;
-    let endNode;
-
-    // Collect the portion of the command from the current node, leftwards
-    // until the start of the command.
-    let node = initialNode;
-    while (node !== 0) {
-      const ctrlSeq = node.ctrlSeq.trim();
-      if (commandCharRegex.test(ctrlSeq)) {
-        name = ctrlSeq + name;
-      } else if (commandStartRegex.test(ctrlSeq)) {
-        name = ctrlSeq + name;
-        startNode = node;
-        break;
-      } else {
-        break;
-      }
-      node = node[this.MQ.L];
-    }
-
-    // If we hit the start of a command, then grab the rest of it by
-    // iterating rightwards to compute the full name of the command, along
-    // with its terminal node.
-    if (startNode) {
-      // Next, iterate from the start to the right.
-      node = initialNode[this.MQ.R];
-      while (node !== 0) {
-        const ctrlSeq = node.ctrlSeq.trim();
-        if (commandCharRegex.test(ctrlSeq)) {
-          // If we have a single character, add it to the command
-          // name.
-          name = name + ctrlSeq;
-        } else if (ctrlSeq === commandEndSeq) {
-          // If we hit the command end delimiter (the left
-          // parentheses surrounding its arguments), stop.
-          endNode = node;
-          break;
-        }
-        node = node[this.MQ.R];
-      }
-      if (validCommands.includes(name)) {
-        return {
-          name,
-          startNode,
-          endNode
-        };
-      } else {
-        return null;
-      }
-    } else {
-      return null;
-    }
-  }
-
-  /**
-   * Return the start node, end node, and full name of the command to the left
-   * of `\\left(`, or `null` if there is no command.
-   *
-   * @param {node} leftParenNode - node where .ctrlSeq == `\\left(`
-   * @returns {null|object} - `null` or an object containing the start node
-   *                          (`startNode`), end node (`endNode`), and full
-   *                          name (`name`) of the command
-   * @private
-   */
-  _maybeFindCommandBeforeParens(leftParenNode) {
-    return this._maybeFindCommand(leftParenNode[this.MQ.L]);
-  }
-  _selectNode(node, cursor) {
-    cursor.insLeftOf(node);
-    cursor.startSelection();
-    cursor.insRightOf(node);
-    cursor.select();
-    cursor.endSelection();
-  }
-  _isFraction(node) {
-    return node.jQ && node.jQ.hasClass("mq-fraction");
-  }
-  _isNumerator(node) {
-    return node.jQ && node.jQ.hasClass("mq-numerator");
-  }
-  _isDenominator(node) {
-    return node.jQ && node.jQ.hasClass("mq-denominator");
-  }
-  _isSubScript(node) {
-    // NOTE(charlie): MyScript has a structure whereby its superscripts seem
-    // to be represented as a parent node with 'mq-sup-only' containing a
-    // single child with 'mq-sup'.
-    return node.jQ && (node.jQ.hasClass("mq-sub-only") || node.jQ.hasClass("mq-sub"));
-  }
-  _isSuperScript(node) {
-    // NOTE(charlie): MyScript has a structure whereby its superscripts seem
-    // to be represented as a parent node with 'mq-sup-only' containing a
-    // single child with 'mq-sup'.
-    return node.jQ && (node.jQ.hasClass("mq-sup-only") || node.jQ.hasClass("mq-sup"));
-  }
-  _isParens(node) {
-    return node && node.ctrlSeq === "\\left(";
-  }
-  _isLeaf(node) {
-    return node && node.ctrlSeq && ValidLeaves.includes(node.ctrlSeq.trim());
-  }
-  _isSquareRoot(node) {
-    return node.blocks && node.blocks[0].jQ && node.blocks[0].jQ.hasClass("mq-sqrt-stem");
-  }
-  _isNthRoot(node) {
-    return node.blocks && node.blocks[0].jQ && node.blocks[0].jQ.hasClass("mq-nthroot");
-  }
-  _isNthRootIndex(node) {
-    return node.jQ && node.jQ.hasClass("mq-nthroot");
-  }
-  _isInsideLogIndex(cursor) {
-    const grandparent = cursor.parent.parent;
-    if (grandparent && grandparent.jQ.hasClass("mq-supsub")) {
-      const command = this._maybeFindCommandBeforeParens(grandparent);
-      if (command && command.name === "\\log") {
-        return true;
-      }
-    }
-    return false;
-  }
-  _isInsideEmptyNode(cursor) {
-    return cursor[this.MQ.L] === ActionType.MQ_END && cursor[this.MQ.R] === ActionType.MQ_END;
-  }
-  _handleBackspaceInRootIndex(cursor) {
-    if (this._isInsideEmptyNode(cursor)) {
-      // When deleting the index in a nthroot, we change from the nthroot
-      // to a sqrt, e.g. \sqrt[|]{35x-5} => |\sqrt{35x-5}.  If there's no
-      // content under the root, then we delete the whole thing.
-
-      const grandparent = cursor.parent.parent;
-      const latex = grandparent.latex();
-      const reinsertionPoint = grandparent[this.MQ.L];
-      this._selectNode(grandparent, cursor);
-      const rootIsEmpty = grandparent.blocks[1].jQ.text() === "";
-      if (rootIsEmpty) {
-        // If there is not content under the root then simply delete
-        // the whole thing.
-        this.mathField.keystroke("Backspace");
-      } else {
-        // Replace the nthroot with a sqrt if there was content under
-        // the root.
-
-        // Start by deleting the selection.
-        this.mathField.keystroke("Backspace");
-
-        // Replace the nth-root with a sqrt.
-        this.mathField.write(latex.replace(/^\\sqrt\[\]/, "\\sqrt"));
-
-        // Adjust the cursor to be to the left the sqrt.
-        if (reinsertionPoint === ActionType.MQ_END) {
-          this.mathField.moveToDirEnd(this.MQ.L);
-        } else {
-          cursor.insRightOf(reinsertionPoint);
-        }
-      }
-    } else {
-      if (cursor[this.MQ.L] !== ActionType.MQ_END) {
-        // If the cursor is not at the leftmost position inside the
-        // root's index, delete a character.
-        this.mathField.keystroke("Backspace");
-      }
-    }
-  }
-  _handleBackspaceInLogIndex(cursor) {
-    if (this._isInsideEmptyNode(cursor)) {
-      const grandparent = cursor.parent.parent;
-      const command = this._maybeFindCommandBeforeParens(grandparent);
-      cursor.insLeftOf(command == null ? void 0 : command.startNode);
-      cursor.startSelection();
-      if (grandparent[this.MQ.R] !== ActionType.MQ_END) {
-        cursor.insRightOf(grandparent[this.MQ.R]);
-      } else {
-        cursor.insRightOf(grandparent);
-      }
-      cursor.select();
-      cursor.endSelection();
-      const isLogBodyEmpty = grandparent[this.MQ.R].contentjQ.text() === "";
-      if (isLogBodyEmpty) {
-        // If there's no content inside the log's parens then delete the
-        // whole thing.
-        this.mathField.keystroke("Backspace");
-      }
-    } else {
-      this.mathField.keystroke("Backspace");
-    }
-  }
-  _handleBackspaceOutsideParens(cursor) {
-    // In this case the node with '\\left(' for its ctrlSeq
-    // is the parent of the expression contained within the
-    // parentheses.
-    //
-    // Handle selecting an expression before deleting:
-    // (x+1)| => |(x+1)|
-    // \log(x+1)| => |\log(x+1)|
-
-    const leftNode = cursor[this.MQ.L];
-    const rightNode = cursor[this.MQ.R];
-    const command = this._maybeFindCommandBeforeParens(leftNode);
-    if (command && command.startNode) {
-      // There's a command before the parens so we select it as well as
-      // the parens.
-      cursor.insLeftOf(command.startNode);
-      cursor.startSelection();
-      if (rightNode === ActionType.MQ_END) {
-        cursor.insAtRightEnd(cursor.parent);
-      } else {
-        cursor.insLeftOf(rightNode);
-      }
-      cursor.select();
-      cursor.endSelection();
-    } else {
-      cursor.startSelection();
-      cursor.insLeftOf(leftNode); // left of \\left(
-      cursor.select();
-      cursor.endSelection();
-    }
-  }
-  _handleBackspaceInsideParens(cursor) {
-    // Handle situations when the cursor is inside parens or a
-    // command that uses parens, e.g. \log() or \tan()
-    //
-    // MathQuill represents log(x+1) in roughly the following way
-    // [l, o, g, \\left[parent:[x, +, 1]]]
-    //
-    // If the cursor is inside the parentheses it's next to one of:
-    // x, +, or 1.  This makes sub_sub_expr its parent and sub_expr
-    // it's parent.
-    //
-    // Interestingly parent doesn't have any nodes to the left or
-    // right of it (even though the corresponding DOM node has
-    // ( and ) characters on either side.
-    //
-    // The grandparent's ctrlSeq is `\\left(`. The `\\right)` isn't
-    // stored anywhere.  NOTE(kevinb): I believe this is because
-    // MathQuill knows what the close paren should be and does the
-    // right thing at render time.
-    //
-    // This conditional branch handles the following cases:
-    // - \log(x+1|) => \log(x+|)
-    // - \log(|x+1) => |\log(x+1)|
-    // - \log(|) => |
-
-    if (cursor[this.MQ.L] !== ActionType.MQ_END) {
-      // This command contains math and there's some math to
-      // the left of the cursor that we should delete normally
-      // before doing anything special.
-      this.mathField.keystroke("Backspace");
-      return;
-    }
-    const grandparent = cursor.parent.parent;
-
-    // If the cursors is inside the parens at the start but the command
-    // has a subscript as is the case in log_n then move the cursor into
-    // the subscript, e.g. \log_{5}(|x+1) => \log_{5|}(x+1)
-
-    if (grandparent[this.MQ.L].sub) {
-      // if there is a subscript
-      if (grandparent[this.MQ.L].sub.jQ.text()) {
-        // and it contains text
-        // move the cursor to the right end of the subscript
-        cursor.insAtRightEnd(grandparent[this.MQ.L].sub);
-        return;
-      }
-    }
-
-    // Determine if the parens are empty before we modify the
-    // cursor's position.
-    const isEmpty = this._isInsideEmptyNode(cursor);
-
-    // Insert the cursor to the left of the command if there is one
-    // or before the '\\left(` if there isn't
-    const command = this._maybeFindCommandBeforeParens(grandparent);
-    cursor.insLeftOf(command && command.startNode || grandparent);
-    cursor.startSelection();
-    cursor.insRightOf(grandparent);
-    cursor.select();
-    cursor.endSelection();
-
-    // Delete the selection, but only if the parens were empty to
-    // begin with.
-    if (isEmpty) {
-      this.mathField.keystroke("Backspace");
-    }
-  }
-  _handleBackspaceAfterLigaturedSymbol(cursor) {
-    this.mathField.keystroke("Backspace");
-    this.mathField.keystroke("Backspace");
-  }
-  contextForCursor(cursor) {
-    // First, try to find any fraction to the right, unimpeded.
-    let visitor = cursor;
-    while (visitor[this.MQ.R] !== ActionType.MQ_END) {
-      if (this._isFraction(visitor[this.MQ.R])) {
-        return CursorContext.BEFORE_FRACTION;
-      } else if (!this._isLeaf(visitor[this.MQ.R])) {
-        break;
-      }
-      visitor = visitor[this.MQ.R];
-    }
-
-    // If that didn't work, check if the parent or grandparent is a special
-    // context, so that we can jump outwards.
-    if (this._isParens(cursor.parent && cursor.parent.parent)) {
-      return CursorContext.IN_PARENS;
-    } else if (this._isNumerator(cursor.parent)) {
-      return CursorContext.IN_NUMERATOR;
-    } else if (this._isDenominator(cursor.parent)) {
-      return CursorContext.IN_DENOMINATOR;
-    } else if (this._isSubScript(cursor.parent)) {
-      return CursorContext.IN_SUB_SCRIPT;
-    } else if (this._isSuperScript(cursor.parent)) {
-      return CursorContext.IN_SUPER_SCRIPT;
-    } else {
-      return CursorContext.NONE;
-    }
-  }
-  _isAtTopLevel(cursor) {
-    return !cursor.parent.parent;
-  }
 }
 
 /**
@@ -1805,16 +1824,16 @@ class MathInput extends React.Component {
     };
     this.domKeyToMathQuillKey = key => {
       const keyMap = {
-        "+": Keys.PLUS,
-        "-": Keys.MINUS,
-        "*": Keys.TIMES,
-        "/": Keys.DIVIDE,
-        ".": Keys.DECIMAL,
-        "%": Keys.PERCENT,
-        "=": Keys.EQUAL,
-        ">": Keys.GT,
-        "<": Keys.LT,
-        "^": Keys.EXP
+        "+": "PLUS",
+        "-": "MINUS",
+        "*": "TIMES",
+        "/": "DIVIDE",
+        ".": "DECIMAL",
+        "%": "PERCENT",
+        "=": "EQUAL",
+        ">": "GT",
+        "<": "LT",
+        "^": "EXP"
       };
 
       // Numbers
@@ -1824,7 +1843,7 @@ class MathInput extends React.Component {
 
       // Movement keys
       else if (key === "Backspace") {
-        return Keys.BACKSPACE;
+        return "BACKSPACE";
       }
 
       // Operators
@@ -2116,40 +2135,84 @@ const keypadElementPropType = PropTypes.shape({
   getDOMNode: PropTypes.func.isRequired
 });
 
-// I tried to make the below {[key in Keys]: KeyConfig}
-// but we are doing all kinds of sneaky magic that makes it hard to
-// type this safely. Leaving it for now as a generic index signature.
+const getDefaultOperatorFields = ({
+  key,
+  keyType: _keyType = "OPERATOR",
+  iconType: _iconType = IconType.SVG,
+  ariaLabel: _ariaLabel = key,
+  data: _data = key
+}) => ({
+  id: key,
+  type: _keyType,
+  ariaLabel: _ariaLabel,
+  icon: {
+    type: _iconType,
+    data: _data
+  }
+});
+const getDefaultValueFields = ({
+  key,
+  keyType: _keyType2 = "VALUE",
+  iconType: _iconType2 = IconType.MATH,
+  ariaLabel: _ariaLabel2 = key,
+  data: _data2 = key
+}) => ({
+  id: key,
+  type: _keyType2,
+  ariaLabel: _ariaLabel2,
+  icon: {
+    type: _iconType2,
+    data: _data2
+  }
+});
+const getDefaultNumberFields = ({
+  key,
+  data: _data3 = key.replace("NUM_", ""),
+  keyType: _keyType3 = "VALUE",
+  iconType: _iconType3 = IconType.TEXT,
+  ariaLabel: _ariaLabel3 = _data3
+}) => ({
+  id: key,
+  type: _keyType3,
+  ariaLabel: _ariaLabel3,
+  icon: {
+    type: _iconType3,
+    data: _data3
+  }
+});
 const KeyConfigs = {
-  // Basic math keys.
-  [Keys.PLUS]: {
-    type: KeyType.OPERATOR,
-    // I18N: A label for a plus sign.
+  // Basic math
+  PLUS: _extends({}, getDefaultOperatorFields({
+    key: "PLUS",
+    // I18N: A label for a 'plus' sign.
     ariaLabel: i18n._("Plus")
-  },
-  [Keys.MINUS]: {
-    type: KeyType.OPERATOR,
-    // I18N: A label for a minus sign.
+  })),
+  MINUS: _extends({}, getDefaultOperatorFields({
+    key: "MINUS",
+    // I18N: A label for a 'minus' sign.
     ariaLabel: i18n._("Minus")
-  },
-  [Keys.NEGATIVE]: {
-    type: KeyType.VALUE,
-    // I18N: A label for a minus sign.
+  })),
+  NEGATIVE: _extends({}, getDefaultOperatorFields({
+    key: "NEGATIVE",
+    // I18N: A label for a 'negative' sign.
     ariaLabel: i18n._("Negative")
-  },
-  [Keys.TIMES]: {
-    type: KeyType.OPERATOR,
-    // I18N: A label for a multiplication sign (represented with an 'x').
+  })),
+  TIMES: _extends({}, getDefaultOperatorFields({
+    key: "TIMES",
+    // I18N: A label for a 'multiply' sign.
     ariaLabel: i18n._("Multiply")
-  },
-  [Keys.DIVIDE]: {
-    type: KeyType.OPERATOR,
-    // I18N: A label for a division sign.
+  })),
+  DIVIDE: _extends({}, getDefaultOperatorFields({
+    key: "DIVIDE",
+    // I18N: A label for a 'divide' sign.
     ariaLabel: i18n._("Divide")
-  },
-  [Keys.DECIMAL]: {
-    type: KeyType.VALUE,
-    // I18N: A label for a decimal symbol.
-    ariaLabel: i18n._("Decimal"),
+  })),
+  DECIMAL: _extends({}, getDefaultOperatorFields({
+    key: "DECIMAL",
+    keyType: "VALUE",
+    // I18N: A label for a 'decimal' sign (represented as '.' or ',').
+    ariaLabel: i18n._("Decimal")
+  }), {
     icon: decimalSeparator === DecimalSeparator.COMMA ? {
       // TODO(charlie): Get an SVG icon for the comma, or verify with
       // design that the text-rendered version is acceptable.
@@ -2157,252 +2220,447 @@ const KeyConfigs = {
       data: ","
     } : {
       type: IconType.SVG,
-      data: Keys.PERIOD
+      data: "PERIOD"
     }
-  },
-  [Keys.PERCENT]: {
-    type: KeyType.OPERATOR,
-    // I18N: A label for a percent sign.
+  }),
+  PERIOD: _extends({}, getDefaultOperatorFields({
+    key: "PERIOD",
+    keyType: "VALUE",
+    ariaLabel: "."
+  })),
+  PERCENT: _extends({}, getDefaultOperatorFields({
+    key: "PERCENT",
+    // I18N: A label for a 'percent' sign (represented as '%').
     ariaLabel: i18n._("Percent")
-  },
-  [Keys.CDOT]: {
-    type: KeyType.OPERATOR,
-    // I18N: A label for a multiplication sign (represented as a dot).
+  })),
+  CDOT: _extends({}, getDefaultOperatorFields({
+    key: "CDOT",
+    // I18N: A label for a 'centered dot' multiplication sign (represented as '⋅').
     ariaLabel: i18n._("Multiply")
-  },
-  [Keys.EQUAL]: {
-    type: KeyType.OPERATOR,
+  })),
+  EQUAL: _extends({}, getDefaultOperatorFields({
+    key: "EQUAL",
+    // I18N: A label for an 'equals' sign (represented as '=').
     ariaLabel: i18n._("Equals sign")
-  },
-  [Keys.NEQ]: {
-    type: KeyType.OPERATOR,
+  })),
+  NEQ: _extends({}, getDefaultOperatorFields({
+    key: "NEQ",
+    // I18N: A label for a 'not-equals' sign (represented as '≠').
     ariaLabel: i18n._("Not-equals sign")
-  },
-  [Keys.GT]: {
-    type: KeyType.OPERATOR,
+  })),
+  GT: _extends({}, getDefaultOperatorFields({
+    key: "GT",
     // I18N: A label for a 'greater than' sign (represented as '>').
     ariaLabel: i18n._("Greater than sign")
-  },
-  [Keys.LT]: {
-    type: KeyType.OPERATOR,
+  })),
+  LT: _extends({}, getDefaultOperatorFields({
+    key: "LT",
     // I18N: A label for a 'less than' sign (represented as '<').
     ariaLabel: i18n._("Less than sign")
-  },
-  [Keys.GEQ]: {
-    type: KeyType.OPERATOR,
+  })),
+  GEQ: _extends({}, getDefaultOperatorFields({
+    key: "GEQ",
+    // I18N: A label for a 'greater than or equal to' sign (represented as '≥').
     ariaLabel: i18n._("Greater than or equal to sign")
-  },
-  [Keys.LEQ]: {
-    type: KeyType.OPERATOR,
+  })),
+  LEQ: _extends({}, getDefaultOperatorFields({
+    key: "LEQ",
+    // I18N: A label for a 'less than or equal to' sign (represented as '≤').
     ariaLabel: i18n._("Less than or equal to sign")
-  },
+  })),
   // mobile native
-  [Keys.FRAC_INCLUSIVE]: {
-    type: KeyType.OPERATOR,
+  FRAC_INCLUSIVE: _extends({}, getDefaultOperatorFields({
+    key: "FRAC_INCLUSIVE",
     // I18N: A label for a button that creates a new fraction and puts the
     // current expression in the numerator of that fraction.
     ariaLabel: i18n._("Fraction, with current expression in numerator")
-  },
+  })),
   // mobile native
-  [Keys.FRAC_EXCLUSIVE]: {
-    type: KeyType.OPERATOR,
+  FRAC_EXCLUSIVE: _extends({}, getDefaultOperatorFields({
+    key: "FRAC_EXCLUSIVE",
     // I18N: A label for a button that creates a new fraction next to the
     // cursor.
     ariaLabel: i18n._("Fraction, excluding the current expression")
-  },
+  })),
   // mobile web
-  [Keys.FRAC]: {
-    type: KeyType.OPERATOR,
+  FRAC: _extends({}, getDefaultOperatorFields({
+    key: "FRAC",
     // I18N: A label for a button that creates a new fraction next to the
     // cursor.
     ariaLabel: i18n._("Fraction, excluding the current expression")
-  },
-  [Keys.EXP]: {
-    type: KeyType.OPERATOR,
-    // I18N: A label for a button that will allow the user to input a custom
-    // exponent.
+  })),
+  EXP: _extends({}, getDefaultOperatorFields({
+    key: "EXP",
+    // I18N: A label for a button that will allow the user to input a
+    // custom exponent.
     ariaLabel: i18n._("Custom exponent")
-  },
-  [Keys.EXP_2]: {
-    type: KeyType.OPERATOR,
+  })),
+  EXP_2: _extends({}, getDefaultOperatorFields({
+    key: "EXP_2",
     // I18N: A label for a button that will square (take to the second
     // power) some math.
     ariaLabel: i18n._("Square")
-  },
-  [Keys.EXP_3]: {
-    type: KeyType.OPERATOR,
+  })),
+  EXP_3: _extends({}, getDefaultOperatorFields({
+    key: "EXP_3",
     // I18N: A label for a button that will cube (take to the third power)
     // some math.
     ariaLabel: i18n._("Cube")
-  },
-  [Keys.SQRT]: {
-    type: KeyType.OPERATOR,
+  })),
+  SQRT: _extends({}, getDefaultOperatorFields({
+    key: "SQRT",
+    // I18N: A label for a button that will allow the user to input a
+    // square root.
     ariaLabel: i18n._("Square root")
-  },
-  [Keys.CUBE_ROOT]: {
-    type: KeyType.OPERATOR,
+  })),
+  CUBE_ROOT: _extends({}, getDefaultOperatorFields({
+    key: "CUBE_ROOT",
+    // I18N: A label for a button that will allow the user to input a
+    // cube root.
     ariaLabel: i18n._("Cube root")
-  },
-  [Keys.RADICAL]: {
-    type: KeyType.OPERATOR,
+  })),
+  RADICAL: _extends({}, getDefaultOperatorFields({
+    key: "RADICAL",
+    // I18N: A label for a button that will allow the user to input a
+    // radical with a custom root.
     ariaLabel: i18n._("Radical with custom root")
-  },
-  [Keys.LEFT_PAREN]: {
-    type: KeyType.OPERATOR,
+  })),
+  LEFT_PAREN: _extends({}, getDefaultOperatorFields({
+    key: "LEFT_PAREN",
+    // I18N: A label for a button that will allow the user to input a
+    // left parenthesis (i.e. '(')
     ariaLabel: i18n._("Left parenthesis")
-  },
-  [Keys.RIGHT_PAREN]: {
-    type: KeyType.OPERATOR,
+  })),
+  RIGHT_PAREN: _extends({}, getDefaultOperatorFields({
+    key: "RIGHT_PAREN",
+    // I18N: A label for a button that will allow the user to input a
+    // right parenthesis (i.e. ')')
     ariaLabel: i18n._("Right parenthesis")
-  },
-  [Keys.LN]: {
-    type: KeyType.OPERATOR,
+  })),
+  LN: _extends({}, getDefaultOperatorFields({
+    key: "LN",
+    // I18N: A label for a button that will allow the user to input a
+    // natural logarithm.
     ariaLabel: i18n._("Natural logarithm")
-  },
-  [Keys.LOG]: {
-    type: KeyType.OPERATOR,
+  })),
+  LOG: _extends({}, getDefaultOperatorFields({
+    key: "LOG",
+    // I18N: A label for a button that will allow the user to input a
+    // logarithm with base 10.
     ariaLabel: i18n._("Logarithm with base 10")
-  },
-  [Keys.LOG_N]: {
-    type: KeyType.OPERATOR,
+  })),
+  LOG_N: _extends({}, getDefaultOperatorFields({
+    key: "LOG_N",
+    // I18N: A label for a button that will allow the user to input a
+    // logarithm with a custom base.
     ariaLabel: i18n._("Logarithm with custom base")
-  },
-  [Keys.SIN]: {
-    type: KeyType.OPERATOR,
+  })),
+  SIN: _extends({}, getDefaultOperatorFields({
+    key: "SIN",
+    // I18N: A label for a button that will allow the user to input a
+    // sine function.
     ariaLabel: i18n._("Sine")
-  },
-  [Keys.COS]: {
-    type: KeyType.OPERATOR,
+  })),
+  COS: _extends({}, getDefaultOperatorFields({
+    key: "COS",
+    // I18N: A label for a button that will allow the user to input a
+    // cosine function.
     ariaLabel: i18n._("Cosine")
-  },
-  [Keys.TAN]: {
-    type: KeyType.OPERATOR,
+  })),
+  TAN: _extends({}, getDefaultOperatorFields({
+    key: "TAN",
+    // I18N: A label for a button that will allow the user to input a
+    // tangent function.
     ariaLabel: i18n._("Tangent")
-  },
-  [Keys.PI]: {
-    type: KeyType.VALUE,
-    ariaLabel: i18n._("Pi"),
-    icon: {
-      type: IconType.MATH,
-      data: "\\pi"
-    }
-  },
-  [Keys.THETA]: {
-    type: KeyType.VALUE,
-    ariaLabel: i18n._("Theta"),
-    icon: {
-      type: IconType.MATH,
-      data: "\\theta"
-    }
-  },
-  [Keys.NOOP]: {
-    type: KeyType.EMPTY
-  },
-  // Input navigation keys.
-  [Keys.UP]: {
-    type: KeyType.INPUT_NAVIGATION,
+  })),
+  PI: _extends({}, getDefaultValueFields({
+    key: "PI",
+    data: "\\pi",
+    // I18N: A label for a button that will allow the user to input the
+    // mathematical constant pi (i.e., π)
+    ariaLabel: i18n._("Pi")
+  })),
+  THETA: _extends({}, getDefaultValueFields({
+    key: "THETA",
+    data: "\\theta",
+    // I18N: A label for a button that will allow the user to input the
+    // mathematical constant theta (i.e., θ)
+    ariaLabel: i18n._("Theta")
+  })),
+  NOOP: _extends({}, getDefaultOperatorFields({
+    key: "NOOP",
+    keyType: "EMPTY"
+  })),
+  // Input navigation
+  UP: _extends({}, getDefaultOperatorFields({
+    key: "UP",
+    keyType: "INPUT_NAVIGATION",
     ariaLabel: i18n._("Up arrow")
-  },
-  [Keys.RIGHT]: {
-    type: KeyType.INPUT_NAVIGATION,
+  })),
+  RIGHT: _extends({}, getDefaultOperatorFields({
+    key: "RIGHT",
+    keyType: "INPUT_NAVIGATION",
     ariaLabel: i18n._("Right arrow")
-  },
-  [Keys.DOWN]: {
-    type: KeyType.INPUT_NAVIGATION,
+  })),
+  DOWN: _extends({}, getDefaultOperatorFields({
+    key: "DOWN",
+    keyType: "INPUT_NAVIGATION",
     ariaLabel: i18n._("Down arrow")
-  },
-  [Keys.LEFT]: {
-    type: KeyType.INPUT_NAVIGATION,
+  })),
+  LEFT: _extends({}, getDefaultOperatorFields({
+    key: "LEFT",
+    keyType: "INPUT_NAVIGATION",
     ariaLabel: i18n._("Left arrow")
-  },
-  [Keys.JUMP_OUT_PARENTHESES]: {
-    type: KeyType.INPUT_NAVIGATION,
+  })),
+  JUMP_OUT_PARENTHESES: _extends({}, getDefaultOperatorFields({
+    key: "JUMP_OUT_PARENTHESES",
+    keyType: "INPUT_NAVIGATION",
     ariaLabel: i18n._("Navigate right out of a set of parentheses")
-  },
-  [Keys.JUMP_OUT_EXPONENT]: {
-    type: KeyType.INPUT_NAVIGATION,
+  })),
+  JUMP_OUT_EXPONENT: _extends({}, getDefaultOperatorFields({
+    key: "JUMP_OUT_EXPONENT",
+    keyType: "INPUT_NAVIGATION",
     ariaLabel: i18n._("Navigate right out of an exponent")
-  },
-  [Keys.JUMP_OUT_BASE]: {
-    type: KeyType.INPUT_NAVIGATION,
+  })),
+  JUMP_OUT_BASE: _extends({}, getDefaultOperatorFields({
+    key: "JUMP_OUT_BASE",
+    keyType: "INPUT_NAVIGATION",
     ariaLabel: i18n._("Navigate right out of a base")
-  },
-  [Keys.JUMP_INTO_NUMERATOR]: {
-    type: KeyType.INPUT_NAVIGATION,
+  })),
+  JUMP_INTO_NUMERATOR: _extends({}, getDefaultOperatorFields({
+    key: "JUMP_INTO_NUMERATOR",
+    keyType: "INPUT_NAVIGATION",
     ariaLabel: i18n._("Navigate right into the numerator of a fraction")
-  },
-  [Keys.JUMP_OUT_NUMERATOR]: {
-    type: KeyType.INPUT_NAVIGATION,
+  })),
+  JUMP_OUT_NUMERATOR: _extends({}, getDefaultOperatorFields({
+    key: "JUMP_OUT_NUMERATOR",
+    keyType: "INPUT_NAVIGATION",
     ariaLabel: i18n._("Navigate right out of the numerator and into the denominator")
-  },
-  [Keys.JUMP_OUT_DENOMINATOR]: {
-    type: KeyType.INPUT_NAVIGATION,
+  })),
+  JUMP_OUT_DENOMINATOR: _extends({}, getDefaultOperatorFields({
+    key: "JUMP_OUT_DENOMINATOR",
+    keyType: "INPUT_NAVIGATION",
     ariaLabel: i18n._("Navigate right out of the denominator of a fraction")
-  },
-  [Keys.BACKSPACE]: {
-    type: KeyType.INPUT_NAVIGATION,
-    // I18N: A label for a button that will delete some input.
+  })),
+  BACKSPACE: _extends({}, getDefaultOperatorFields({
+    key: "BACKSPACE",
+    keyType: "INPUT_NAVIGATION",
     ariaLabel: i18n._("Delete")
-  },
-  // Keypad navigation keys.
-  [Keys.DISMISS]: {
-    type: KeyType.KEYPAD_NAVIGATION,
+  })),
+  // Keypad navigation
+  DISMISS: _extends({}, getDefaultOperatorFields({
+    key: "DISMISS",
+    keyType: "KEYPAD_NAVIGATION",
     // I18N: A label for a button that will dismiss/hide a keypad.
     ariaLabel: i18n._("Dismiss")
-  },
+  })),
   // TODO(charlie): Use the numeral color for the 'Many' key.
-  // MANY: {
-  //     type: KeyType.MANY,
-  //     // childKeyIds will be configured by the client.
-  // },
-
-  [Keys.PERIOD]: {}
+  MANY: _extends({}, getDefaultOperatorFields({
+    key: "MANY",
+    keyType: "MANY"
+  })),
+  // NUMBERS
+  NUM_0: _extends({}, getDefaultNumberFields({
+    key: "NUM_0"
+  })),
+  NUM_1: _extends({}, getDefaultNumberFields({
+    key: "NUM_1"
+  })),
+  NUM_2: _extends({}, getDefaultNumberFields({
+    key: "NUM_2"
+  })),
+  NUM_3: _extends({}, getDefaultNumberFields({
+    key: "NUM_3"
+  })),
+  NUM_4: _extends({}, getDefaultNumberFields({
+    key: "NUM_4"
+  })),
+  NUM_5: _extends({}, getDefaultNumberFields({
+    key: "NUM_5"
+  })),
+  NUM_6: _extends({}, getDefaultNumberFields({
+    key: "NUM_6"
+  })),
+  NUM_7: _extends({}, getDefaultNumberFields({
+    key: "NUM_7"
+  })),
+  NUM_8: _extends({}, getDefaultNumberFields({
+    key: "NUM_8"
+  })),
+  NUM_9: _extends({}, getDefaultNumberFields({
+    key: "NUM_9"
+  })),
+  // LETTERS
+  A: _extends({}, getDefaultValueFields({
+    key: "A"
+  })),
+  B: _extends({}, getDefaultValueFields({
+    key: "B"
+  })),
+  C: _extends({}, getDefaultValueFields({
+    key: "C"
+  })),
+  D: _extends({}, getDefaultValueFields({
+    key: "D"
+  })),
+  E: _extends({}, getDefaultValueFields({
+    key: "E"
+  })),
+  F: _extends({}, getDefaultValueFields({
+    key: "F"
+  })),
+  G: _extends({}, getDefaultValueFields({
+    key: "G"
+  })),
+  H: _extends({}, getDefaultValueFields({
+    key: "H"
+  })),
+  I: _extends({}, getDefaultValueFields({
+    key: "I"
+  })),
+  J: _extends({}, getDefaultValueFields({
+    key: "J"
+  })),
+  K: _extends({}, getDefaultValueFields({
+    key: "K"
+  })),
+  L: _extends({}, getDefaultValueFields({
+    key: "L"
+  })),
+  M: _extends({}, getDefaultValueFields({
+    key: "M"
+  })),
+  N: _extends({}, getDefaultValueFields({
+    key: "N"
+  })),
+  O: _extends({}, getDefaultValueFields({
+    key: "O"
+  })),
+  P: _extends({}, getDefaultValueFields({
+    key: "P"
+  })),
+  Q: _extends({}, getDefaultValueFields({
+    key: "Q"
+  })),
+  R: _extends({}, getDefaultValueFields({
+    key: "R"
+  })),
+  S: _extends({}, getDefaultValueFields({
+    key: "S"
+  })),
+  T: _extends({}, getDefaultValueFields({
+    key: "T"
+  })),
+  U: _extends({}, getDefaultValueFields({
+    key: "U"
+  })),
+  V: _extends({}, getDefaultValueFields({
+    key: "V"
+  })),
+  W: _extends({}, getDefaultValueFields({
+    key: "W"
+  })),
+  X: _extends({}, getDefaultValueFields({
+    key: "X"
+  })),
+  Y: _extends({}, getDefaultValueFields({
+    key: "Y"
+  })),
+  Z: _extends({}, getDefaultValueFields({
+    key: "Z"
+  })),
+  a: _extends({}, getDefaultValueFields({
+    key: "a"
+  })),
+  b: _extends({}, getDefaultValueFields({
+    key: "b"
+  })),
+  c: _extends({}, getDefaultValueFields({
+    key: "c"
+  })),
+  d: _extends({}, getDefaultValueFields({
+    key: "d"
+  })),
+  e: _extends({}, getDefaultValueFields({
+    key: "e"
+  })),
+  f: _extends({}, getDefaultValueFields({
+    key: "f"
+  })),
+  g: _extends({}, getDefaultValueFields({
+    key: "g"
+  })),
+  h: _extends({}, getDefaultValueFields({
+    key: "h"
+  })),
+  i: _extends({}, getDefaultValueFields({
+    key: "i"
+  })),
+  j: _extends({}, getDefaultValueFields({
+    key: "j"
+  })),
+  k: _extends({}, getDefaultValueFields({
+    key: "k"
+  })),
+  l: _extends({}, getDefaultValueFields({
+    key: "l"
+  })),
+  m: _extends({}, getDefaultValueFields({
+    key: "m"
+  })),
+  n: _extends({}, getDefaultValueFields({
+    key: "n"
+  })),
+  o: _extends({}, getDefaultValueFields({
+    key: "o"
+  })),
+  p: _extends({}, getDefaultValueFields({
+    key: "p"
+  })),
+  q: _extends({}, getDefaultValueFields({
+    key: "q"
+  })),
+  r: _extends({}, getDefaultValueFields({
+    key: "r"
+  })),
+  s: _extends({}, getDefaultValueFields({
+    key: "s"
+  })),
+  t: _extends({}, getDefaultValueFields({
+    key: "t"
+  })),
+  u: _extends({}, getDefaultValueFields({
+    key: "u"
+  })),
+  v: _extends({}, getDefaultValueFields({
+    key: "v"
+  })),
+  w: _extends({}, getDefaultValueFields({
+    key: "w"
+  })),
+  x: _extends({}, getDefaultValueFields({
+    key: "x"
+  })),
+  y: _extends({}, getDefaultValueFields({
+    key: "y"
+  })),
+  z: _extends({}, getDefaultValueFields({
+    key: "z"
+  })),
+  PHI: _extends({}, getDefaultValueFields({
+    key: "PHI"
+  })),
+  NTHROOT3: _extends({}, getDefaultValueFields({
+    key: "NTHROOT3"
+  })),
+  POW: _extends({}, getDefaultValueFields({
+    key: "POW"
+  })),
+  LOG_B: _extends({}, getDefaultValueFields({
+    key: "LOG_B"
+  }))
 };
 
-// Add in every numeral.
-const NUMBERS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
-for (const num of NUMBERS) {
-  // TODO(charlie): Consider removing the SVG icons that we have for the
-  // numeral keys. They can be rendered just as easily with text (though that
-  // would mean that we'd be using text beyond the variable key).
-  const textRepresentation = `${num}`;
-  KeyConfigs[`NUM_${num}`] = {
-    type: KeyType.VALUE,
-    ariaLabel: textRepresentation,
-    icon: {
-      type: IconType.TEXT,
-      data: textRepresentation
-    }
-  };
-}
-
-// Add in every variable.
-const LETTERS = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
-for (const letter of LETTERS) {
-  const lowerCaseVariable = letter.toLowerCase();
-  const upperCaseVariable = letter.toUpperCase();
-  for (const textRepresentation of [lowerCaseVariable, upperCaseVariable]) {
-    KeyConfigs[textRepresentation] = {
-      type: KeyType.VALUE,
-      ariaLabel: textRepresentation,
-      icon: {
-        type: IconType.MATH,
-        data: textRepresentation
-      }
-    };
-  }
-}
-for (const key of Object.keys(KeyConfigs)) {
-  KeyConfigs[key] = _extends({
-    id: key,
-    // Default to an SVG icon indexed by the key name.
-    icon: {
-      type: IconType.SVG,
-      data: key
-    }
-  }, KeyConfigs[key]);
-}
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -4049,7 +4307,7 @@ class KeypadButton$1 extends React.PureComponent {
       // object. This method must be called whenever a property that
       // influences the possible outcomes of `this._getFocusStyle` and
       // `this._getButtonStyle` changes (such as `this.buttonSizeStyle`).
-      for (const type of Object.values(KeyType)) {
+      for (const type of KeyTypes) {
         css(View.styles.initial, ...this._getFocusStyle(type));
         for (const borders of Object.values(BorderStyles)) {
           css(View.styles.initial, ...this._getButtonStyle(type, borders));
@@ -4058,7 +4316,7 @@ class KeypadButton$1 extends React.PureComponent {
     };
     this._getFocusStyle = type => {
       let focusBackgroundStyle;
-      if (type === KeyType.INPUT_NAVIGATION || type === KeyType.KEYPAD_NAVIGATION) {
+      if (type === "INPUT_NAVIGATION" || type === "KEYPAD_NAVIGATION") {
         focusBackgroundStyle = styles$9.light;
       } else {
         focusBackgroundStyle = styles$9.bright;
@@ -4069,21 +4327,21 @@ class KeypadButton$1 extends React.PureComponent {
       // Select the appropriate style for the button.
       let backgroundStyle;
       switch (type) {
-        case KeyType.EMPTY:
+        case "EMPTY":
           backgroundStyle = styles$9.empty;
           break;
-        case KeyType.MANY:
-        case KeyType.VALUE:
+        case "MANY":
+        case "VALUE":
           backgroundStyle = styles$9.value;
           break;
-        case KeyType.OPERATOR:
+        case "OPERATOR":
           backgroundStyle = styles$9.operator;
           break;
-        case KeyType.INPUT_NAVIGATION:
-        case KeyType.KEYPAD_NAVIGATION:
+        case "INPUT_NAVIGATION":
+        case "KEYPAD_NAVIGATION":
           backgroundStyle = styles$9.control;
           break;
-        case KeyType.ECHO:
+        case "ECHO":
           backgroundStyle = null;
           break;
       }
@@ -4096,7 +4354,7 @@ class KeypadButton$1 extends React.PureComponent {
         // @ts-expect-error TS2345
         borderStyle.push(styles$9.bottomBorder);
       }
-      return [styles$9.buttonBase, backgroundStyle, ...borderStyle, type === KeyType.ECHO && styles$9.echo, this.buttonSizeStyle,
+      return [styles$9.buttonBase, backgroundStyle, ...borderStyle, type === "ECHO" && styles$9.echo, this.buttonSizeStyle,
       // React Native allows you to set the 'style' props on user defined
       // components.
       //   See: https://facebook.github.io/react-native/docs/style.html
@@ -4138,7 +4396,7 @@ class KeypadButton$1 extends React.PureComponent {
 
     // We render in the focus state if the key is focused, or if it's an
     // echo.
-    const renderFocused = !disabled && focused || popoverEnabled || type === KeyType.ECHO;
+    const renderFocused = !disabled && focused || popoverEnabled || type === "ECHO";
     const buttonStyle = this._getButtonStyle(type, borders, style);
     const focusStyle = this._getFocusStyle(type);
     const iconWrapperStyle = [styles$9.iconWrapper, disabled ? styles$9.disabled : undefined];
@@ -4154,11 +4412,11 @@ class KeypadButton$1 extends React.PureComponent {
     const maybeCornerDecal = !renderFocused && !disabled && childKeys && childKeys.length > 0 && /*#__PURE__*/React.createElement(CornerDecal, {
       style: styles$9.decalInset
     });
-    if (type === KeyType.EMPTY) {
+    if (type === "EMPTY") {
       return /*#__PURE__*/React.createElement(View, _extends({
         style: buttonStyle
       }, eventHandlers));
-    } else if (type === KeyType.MANY) {
+    } else if (type === "MANY") {
       // TODO(charlie): Make the long-press interaction accessible. See
       // the TODO in key-configs.js for more.
       const manyButtonA11yMarkup = {
@@ -4398,7 +4656,7 @@ const mapStateToProps$5 = (state, ownProps) => {
 
   // Override with the default child props, if the key is a multi-symbol key
   // (but not a many-symbol key, which operates under different rules).
-  const useFirstChildProps = type !== KeyType.MANY && childKeys && childKeys.length > 0;
+  const useFirstChildProps = type !== "MANY" && childKeys && childKeys.length > 0;
   return _extends({}, rest, {
     childKeyIds: childKeyIds,
     gestureManager: gestures.gestureManager,
@@ -4443,8 +4701,13 @@ class ManyKeypadButton extends React.Component {
     } else {
       const keyConfig = {
         id: "MANY",
-        type: KeyType.MANY,
-        childKeyIds: keys
+        type: "MANY",
+        childKeyIds: keys,
+        ariaLabel: keys.map(key => KeyConfigs[key].ariaLabel).join(", "),
+        icon: {
+          type: IconType.SVG,
+          data: "many"
+        }
       };
       return /*#__PURE__*/React.createElement(TouchableKeypadButton$1, _extends({
         keyConfig: keyConfig
@@ -4475,8 +4738,6 @@ const IconAsset = function IconAsset({
     }));
   } else if (type === "Operators") {
     return /*#__PURE__*/React.createElement("svg", {
-      width: "32",
-      height: "32",
       viewBox: "0 0 32 32",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
@@ -4674,7 +4935,7 @@ class Echo extends React.Component {
       style: containerStyle
     }, /*#__PURE__*/React.createElement(KeypadButton$2, {
       icon: icon,
-      type: KeyType.ECHO
+      type: "ECHO"
     }));
   }
 }
@@ -4888,18 +5149,6 @@ const setCursor = cursor => {
 
 // Gesture actions
 
-const onSwipeChange = dx => {
-  return {
-    type: "OnSwipeChange",
-    dx
-  };
-};
-const onSwipeEnd = dx => {
-  return {
-    type: "OnSwipeEnd",
-    dx
-  };
-};
 const setActiveNodes = activeNodes => {
   return {
     type: "SetActiveNodes",
@@ -5991,7 +6240,8 @@ class GestureStateMachine {
       // Only respect the finger that started a swipe. Any other lingering
       // gestures are ignored.
       if (this.swipeState.touchId === touchId) {
-        this.handlers.onSwipeChange(pageX - this.swipeState.startX);
+        var _this$handlers$onSwip, _this$handlers;
+        (_this$handlers$onSwip = (_this$handlers = this.handlers).onSwipeChange) == null ? void 0 : _this$handlers$onSwip.call(_this$handlers, pageX - this.swipeState.startX);
       }
     } else if (this.touchState[touchId]) {
       // It could be touch events started outside the keypad and
@@ -6004,6 +6254,7 @@ class GestureStateMachine {
       const dx = pageX - startX;
       const shouldBeginSwiping = swipeEnabled && !swipeLocked && Math.abs(dx) > this.options.swipeThresholdPx;
       if (shouldBeginSwiping) {
+        var _this$handlers$onSwip2, _this$handlers2;
         this._onSwipeStart();
 
         // Trigger the swipe.
@@ -6011,7 +6262,7 @@ class GestureStateMachine {
           touchId,
           startX
         };
-        this.handlers.onSwipeChange(pageX - this.swipeState.startX);
+        (_this$handlers$onSwip2 = (_this$handlers2 = this.handlers).onSwipeChange) == null ? void 0 : _this$handlers$onSwip2.call(_this$handlers2, pageX - this.swipeState.startX);
       } else {
         const id = getId();
         if (id !== activeNodeId) {
@@ -6034,7 +6285,8 @@ class GestureStateMachine {
       // Only respect the finger that started a swipe. Any other lingering
       // gestures are ignored.
       if (this.swipeState.touchId === touchId) {
-        this.handlers.onSwipeEnd(pageX - this.swipeState.startX);
+        var _this$handlers$onSwip3, _this$handlers3;
+        (_this$handlers$onSwip3 = (_this$handlers3 = this.handlers).onSwipeEnd) == null ? void 0 : _this$handlers$onSwip3.call(_this$handlers3, pageX - this.swipeState.startX);
         this.swipeState = null;
       }
     } else if (this.touchState[touchId]) {
@@ -6068,7 +6320,8 @@ class GestureStateMachine {
     // displacement.
     if (this.swipeState) {
       if (this.swipeState.touchId === touchId) {
-        this.handlers.onSwipeEnd(0);
+        var _this$handlers$onSwip4, _this$handlers4;
+        (_this$handlers$onSwip4 = (_this$handlers4 = this.handlers).onSwipeEnd) == null ? void 0 : _this$handlers$onSwip4.call(_this$handlers4, 0);
         this.swipeState = null;
       }
     } else if (this.touchState[touchId]) {
@@ -6446,7 +6699,7 @@ class GestureManager {
    * Handle a touch-start event that originated in a node registered with the
    * gesture system.
    *
-   * @param {TouchEvent} evt - the raw touch event from the browser
+   * @param {React.TouchEvent<HTMLDivElement>} evt - the raw touch event from the browser
    * @param {string} id - the identifier of the DOM node in which the touch
    *                      occurred
    */
@@ -6473,7 +6726,7 @@ class GestureManager {
    * Handle a touch-move event that originated in a node registered with the
    * gesture system.
    *
-   * @param {TouchEvent} evt - the raw touch event from the browser
+   * @param {React.TouchEvent<HTMLDivElement>} evt - the raw touch event from the browser
    */
   onTouchMove(evt) {
     if (!this.trackEvents) {
@@ -6491,7 +6744,7 @@ class GestureManager {
    * Handle a touch-end event that originated in a node registered with the
    * gesture system.
    *
-   * @param {TouchEvent} evt - the raw touch event from the browser
+   * @param {React.TouchEvent<HTMLDivElement>} evt - the raw touch event from the browser
    */
   onTouchEnd(evt) {
     if (!this.trackEvents) {
@@ -6507,7 +6760,7 @@ class GestureManager {
    * Handle a touch-cancel event that originated in a node registered with the
    * gesture system.
    *
-   * @param {TouchEvent} evt - the raw touch event from the browser
+   * @param {React.TouchEvent<HTMLDivElement>} evt - the raw touch event from the browser
    */
   onTouchCancel(evt) {
     if (!this.trackEvents) {
@@ -6573,7 +6826,7 @@ const echoReducer = function echoReducer(state = initialEchoState, action) {
 
       // Add in the echo animation if the user performs a math
       // operation.
-      if (keyConfig.type === KeyType.VALUE || keyConfig.type === KeyType.OPERATOR) {
+      if (keyConfig.type === "VALUE" || keyConfig.type === "OPERATOR") {
         return _extends({}, state, {
           echoes: [...state.echoes, {
             animationId: "" + _lastAnimationId++,
@@ -6610,7 +6863,7 @@ const inputReducer = function inputReducer(state = initialInputState, action) {
       });
     case "PressKey":
       const keyConfig = KeyConfigs[action.key];
-      if (keyConfig.type !== KeyType.KEYPAD_NAVIGATION) {
+      if (keyConfig.type !== "KEYPAD_NAVIGATION") {
         // This is probably an anti-pattern but it works for the
         // case where we don't actually control the state but we
         // still want to communicate with the other object
@@ -6637,7 +6890,7 @@ const keypadForType = {
 };
 
 const initialKeypadState = {
-  extraKeys: ["x", "y", Keys.THETA, Keys.PI],
+  extraKeys: ["x", "y", "THETA", "PI"],
   keypadType: defaultKeypadType,
   active: false
 };
@@ -6665,7 +6918,7 @@ const keypadReducer = function keypadReducer(state = initialKeypadState, action)
       // right actions when they occur. Hence, we figure off a
       // dismissal here rather than dispatching a dismiss action in
       // the first place.
-      if (keyConfig.id === Keys.DISMISS) {
+      if (keyConfig.id === "DISMISS") {
         return keypadReducer(state, {
           type: "DismissKeypad"
         });
@@ -6904,19 +7157,13 @@ const createStore = () => {
     return new GestureManager({
       swipeEnabled
     }, {
-      onSwipeChange: dx => {
-        store.dispatch(onSwipeChange(dx));
-      },
-      onSwipeEnd: dx => {
-        store.dispatch(onSwipeEnd(dx));
-      },
       onActiveNodesChanged: activeNodes => {
         store.dispatch(setActiveNodes(activeNodes));
       },
       onClick: (key, layoutProps, inPopover) => {
         store.dispatch(pressKey(key, layoutProps.initialBounds, inPopover));
       }
-    }, [], [Keys.BACKSPACE, Keys.UP, Keys.RIGHT, Keys.DOWN, Keys.LEFT]);
+    }, [], ["BACKSPACE", "UP", "RIGHT", "DOWN", "LEFT"]);
   };
   const initialGestureState = {
     popover: null,
@@ -7128,9 +7375,6 @@ asset.
 In the future it would be great if these were included from files so that
 no copying and pasting is necessary.
 */
-
-// TODO: This should be an enumeration of all of the possible legal values
-
 function ButtonAsset({
   id
 }) {
@@ -7275,84 +7519,94 @@ function ButtonAsset({
       }));
     case "MINUS":
       return /*#__PURE__*/React.createElement("svg", {
-        width: "40",
-        height: "40",
-        viewBox: "0 0 40 40",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        fill: "currentColor",
+        viewBox: "0 0 256 256"
       }, /*#__PURE__*/React.createElement("path", {
-        d: "M27 20H13",
-        stroke: "#21242C",
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
+        d: "M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z"
       }));
     case "PLUS":
+      return (
+        /*#__PURE__*/
+        // Phosphor Icons - Plus Bold
+        React.createElement("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "20",
+          height: "20",
+          fill: "currentColor",
+          viewBox: "0 0 256 256"
+        }, /*#__PURE__*/React.createElement("path", {
+          d: "M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"
+        }), " ")
+      );
+    case "TIMES":
+      return (
+        /*#__PURE__*/
+        // Phosphor Icons - X Bold
+        React.createElement("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "20",
+          height: "20",
+          fill: "#000000",
+          viewBox: "0 0 256 256"
+        }, /*#__PURE__*/React.createElement("path", {
+          d: "M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"
+        }))
+      );
+    case "BACKSPACE":
       return /*#__PURE__*/React.createElement("svg", {
-        width: "40",
-        height: "40",
-        viewBox: "0 0 40 40",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        fill: "currentColor",
+        viewBox: "0 0 256 256"
       }, /*#__PURE__*/React.createElement("path", {
-        d: "M27 20H13",
-        stroke: "#21242C",
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }), /*#__PURE__*/React.createElement("path", {
-        d: "M20 13V27",
-        stroke: "#21242C",
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
+        d: "M216,40H68.53a16.08,16.08,0,0,0-13.72,7.77L9.14,123.88a8,8,0,0,0,0,8.24l45.67,76.11A16.08,16.08,0,0,0,68.53,216H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM61.67,204.12,68.53,200h0ZM216,200H68.53l-43.2-72,43.2-72H216ZM106.34,146.34,124.69,128l-18.35-18.34a8,8,0,0,1,11.32-11.32L136,116.69l18.34-18.35a8,8,0,0,1,11.32,11.32L147.31,128l18.35,18.34a8,8,0,0,1-11.32,11.32L136,139.31l-18.34,18.35a8,8,0,0,1-11.32-11.32Z"
       }));
-    case "TIMES":
+    case "DISMISS":
       return /*#__PURE__*/React.createElement("svg", {
-        width: "40",
-        height: "40",
-        viewBox: "0 0 40 40",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        fill: "currentColor",
+        viewBox: "0 0 256 256"
       }, /*#__PURE__*/React.createElement("path", {
-        d: "M24.9498 24.9493L15.0503 15.0498",
-        stroke: "#21242C",
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }), /*#__PURE__*/React.createElement("path", {
-        d: "M24.9498 15.0507L15.0503 24.9502",
-        stroke: "#21242C",
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
+        // flip to point down
+        transform: "scale(1,-1) translate(0, -260)",
+        d: "M205.66,125.66a8,8,0,0,1-11.32,0L128,59.31,61.66,125.66a8,8,0,0,1-11.32-11.32l72-72a8,8,0,0,1,11.32,0l72,72A8,8,0,0,1,205.66,125.66Z"
       }));
-    case "BACKSPACE":
+    case "FRAC":
       return /*#__PURE__*/React.createElement("svg", {
-        width: "40",
-        height: "40",
-        viewBox: "0 0 40 40",
+        width: "48",
+        height: "48",
+        viewBox: "0 0 48 48"
+      }, /*#__PURE__*/React.createElement("g", {
         fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
+        fillRule: "evenodd"
       }, /*#__PURE__*/React.createElement("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M10 20L16 14H28.1716V26L16 26L10 20ZM8.58579 18.5858L14.5858 12.5858C14.9609 12.2107 15.4696 12 16 12H28.1716C29.2761 12 30.1716 12.8954 30.1716 14V26C30.1716 27.1046 29.2761 28 28.1716 28H16C15.4696 28 14.9609 27.7893 14.5858 27.4142L8.58579 21.4142C7.80474 20.6332 7.80474 19.3668 8.58579 18.5858ZM22.4645 17.2929L21.1716 18.5858L19.8787 17.2929C19.4882 16.9024 18.855 16.9024 18.4645 17.2929C18.074 17.6834 18.074 18.3166 18.4645 18.7071L19.7574 20L18.4645 21.2929C18.074 21.6834 18.074 22.3166 18.4645 22.7071C18.855 23.0976 19.4882 23.0976 19.8787 22.7071L21.1716 21.4142L22.4645 22.7071C22.855 23.0976 23.4882 23.0976 23.8787 22.7071C24.2693 22.3166 24.2693 21.6834 23.8787 21.2929L22.5858 20L23.8787 18.7071C24.2693 18.3166 24.2693 17.6834 23.8787 17.2929C23.4882 16.9024 22.855 16.9024 22.4645 17.2929Z",
-        fill: "#21242C"
-      }));
-    case "DISMISS":
-      return /*#__PURE__*/React.createElement("svg", {
-        width: "40",
-        height: "40",
-        viewBox: "0 0 40 40",
         fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
+        d: "M0 0h48v48H0z"
+      }), /*#__PURE__*/React.createElement("g", {
+        transform: "translate(12 12)"
       }, /*#__PURE__*/React.createElement("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M10 12C10 10.8954 10.8954 10 12 10H28C29.1046 10 30 10.8954 30 12V21H28V12L12 12V21H10V12ZM19 14C19 13.4477 19.4477 13 20 13C20.5523 13 21 13.4477 21 14C21 14.5523 20.5523 15 20 15C19.4477 15 19 14.5523 19 14ZM17 13C16.4477 13 16 13.4477 16 14C16 14.5523 16.4477 15 17 15C17.5523 15 18 14.5523 18 14C18 13.4477 17.5523 13 17 13ZM13 14C13 13.4477 13.4477 13 14 13C14.5523 13 15 13.4477 15 14C15 14.5523 14.5523 15 14 15C13.4477 15 13 14.5523 13 14ZM20 16C19.4477 16 19 16.4477 19 17C19 17.5523 19.4477 18 20 18C20.5523 18 21 17.5523 21 17C21 16.4477 20.5523 16 20 16ZM16 17C16 16.4477 16.4477 16 17 16C17.5523 16 18 16.4477 18 17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17ZM14 16C13.4477 16 13 16.4477 13 17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17C15 16.4477 14.5523 16 14 16ZM22 14C22 13.4477 22.4477 13 23 13C23.5523 13 24 13.4477 24 14C24 14.5523 23.5523 15 23 15C22.4477 15 22 14.5523 22 14ZM23 16C22.4477 16 22 16.4477 22 17C22 17.5523 22.4477 18 23 18C23.5523 18 24 17.5523 24 17C24 16.4477 23.5523 16 23 16ZM25 14C25 13.4477 25.4477 13 26 13C26.5523 13 27 13.4477 27 14C27 14.5523 26.5523 15 26 15C25.4477 15 25 14.5523 25 14ZM26 16C25.4477 16 25 16.4477 25 17C25 17.5523 25.4477 18 26 18C26.5523 18 27 17.5523 27 17C27 16.4477 26.5523 16 26 16ZM16 20C16 19.4477 16.4477 19 17 19H23C23.5523 19 24 19.4477 24 20C24 20.5523 23.5523 21 23 21H17C16.4477 21 16 20.5523 16 20ZM26.7071 25.7071C27.0976 25.3166 27.0976 24.6834 26.7071 24.2929C26.3166 23.9024 25.6834 23.9024 25.2929 24.2929L20 29.5858L14.7071 24.2929C14.3166 23.9024 13.6834 23.9024 13.2929 24.2929C12.9024 24.6834 12.9024 25.3166 13.2929 25.7071L19.2929 31.7071C19.6834 32.0976 20.3166 32.0976 20.7071 31.7071L26.7071 25.7071Z",
-        fill: "#21242C"
-      }));
+        fill: "none",
+        d: "M0 0h24v24H0z"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M8 16.997c0-.55.453-.997.997-.997h6.006c.55 0 .997.453.997.997v6.006c0 .55-.453.997-.997.997H8.997c-.55 0-.997-.453-.997-.997v-6.006zM10 18h4v4h-4v-4z",
+        fill: "currentColor"
+      }), /*#__PURE__*/React.createElement("rect", {
+        fill: "currentColor",
+        x: "2",
+        y: "11",
+        width: "20",
+        height: "2",
+        rx: "1"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M8 .997C8 .447 8.453 0 8.997 0h6.006c.55 0 .997.453.997.997v6.006c0 .55-.453.997-.997.997H8.997C8.447 8 8 7.547 8 7.003V.997zM10 2h4v4h-4V2z",
+        fill: "currentColor"
+      }))));
     case "FRAC_INCLUSIVE":
       return /*#__PURE__*/React.createElement("svg", {
         width: "40",
@@ -7379,26 +7633,23 @@ function ButtonAsset({
         d: "M12.9571 13.2929C13.3476 13.6834 13.3476 14.3166 12.9571 14.7071C11.6871 15.9771 11 17.9485 11 20C11 22.0515 11.6871 24.0229 12.9571 25.2929C13.3476 25.6834 13.3476 26.3166 12.9571 26.7071C12.5666 27.0976 11.9334 27.0976 11.5429 26.7071C9.81292 24.9771 9 22.4485 9 20C9 17.5515 9.81292 15.0229 11.5429 13.2929C11.9334 12.9024 12.5666 12.9024 12.9571 13.2929ZM14 20C14 19.4477 14.4477 19 15 19H25C25.5523 19 26 19.4477 26 20C26 20.5523 25.5523 21 25 21H15C14.4477 21 14 20.5523 14 20ZM28.4571 13.2929C28.0666 12.9024 27.4334 12.9024 27.0429 13.2929C26.6524 13.6834 26.6524 14.3166 27.0429 14.7071C28.3129 15.9771 29 17.9485 29 20C29 22.0515 28.3129 24.0229 27.0429 25.2929C26.6524 25.6834 26.6524 26.3166 27.0429 26.7071C27.4334 27.0976 28.0666 27.0976 28.4571 26.7071C30.1871 24.9771 31 22.4485 31 20C31 17.5515 30.1871 15.0229 28.4571 13.2929Z",
         fill: "#21242C"
       }));
+    // TODO(ned): Per the notes in `KeyConfigs`, shouldn't this be a comma
+    // that we replace with the period icon for i18n? Duplicating for now.
     case "DECIMAL":
+    case "PERIOD":
       return /*#__PURE__*/React.createElement("svg", {
-        width: "40",
-        height: "40",
-        viewBox: "0 0 40 40",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
-      }, /*#__PURE__*/React.createElement("g", {
-        clipPath: "url(#clip0)"
-      }, /*#__PURE__*/React.createElement("circle", {
-        cx: "20",
-        cy: "20",
-        r: "1.5",
-        fill: "#21242C"
-      })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-        id: "clip0"
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        fill: "currentColor",
+        viewBox: "0 0 256 256"
       }, /*#__PURE__*/React.createElement("path", {
-        d: "M18.5 18.5H21.5V21.5H18.5V18.5Z",
-        fill: "white"
-      }))));
+        d: "M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Z"
+        // moves decimal down to baseline of number icons,
+        // otherwise indistinguishable from cdot
+        ,
+        transform: "translate(0 80)"
+      }));
     case "RADICAL":
       return /*#__PURE__*/React.createElement("svg", {
         width: "40",
@@ -7413,6 +7664,38 @@ function ButtonAsset({
         fill: "#21242C"
       }));
     case "SQRT":
+      return /*#__PURE__*/React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        fill: "currentColor",
+        viewBox: "0 0 256 256"
+      }, /*#__PURE__*/React.createElement("path", {
+        d: "M240,72V96a8,8,0,0,1-16,0V80H125.55L79.49,202.81a8,8,0,0,1-15,0l-48-128a8,8,0,1,1,15-5.62L72,177.22l40.51-108A8,8,0,0,1,120,64H232A8,8,0,0,1,240,72Z"
+      }));
+    case "CUBE_ROOT":
+      return /*#__PURE__*/React.createElement("svg", {
+        width: "48",
+        height: "48",
+        viewBox: "0 0 48 48"
+      }, /*#__PURE__*/React.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd",
+        transform: "translate(0, -4)"
+      }, /*#__PURE__*/React.createElement("path", {
+        fill: "none",
+        d: "M0 0h48v48H0z"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M17.91 23.12c1.66 0 2.76-.81 2.76-1.98 0-.96-.86-1.51-1.57-1.58.79-.13 1.46-.72 1.46-1.5 0-1.1-.95-1.83-2.65-1.83-1.23 0-2.11.45-2.67 1.08l.83 1.08c.47-.42 1.05-.64 1.66-.64.64 0 1.12.19 1.12.61 0 .35-.39.52-1.08.52-.25 0-.77 0-.9-.01v1.53c.1-.01.61-.01.9-.01.91 0 1.19.18 1.19.56 0 .37-.38.65-1.12.65-.58 0-1.34-.23-1.82-.7l-.87 1.17c.52.6 1.48 1.05 2.76 1.05z",
+        fill: "currentColor"
+      }), /*#__PURE__*/React.createElement("path", {
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M14 29l4 6 9-14h7"
+      })));
+    case "EXP":
       return /*#__PURE__*/React.createElement("svg", {
         width: "40",
         height: "40",
@@ -7420,11 +7703,10 @@ function ButtonAsset({
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg"
       }, /*#__PURE__*/React.createElement("path", {
-        d: "M10 21L14 27L23 13H30",
-        stroke: "#21242C",
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        fill: "#21242C",
+        d: "M28 8C28 7.44772 28.4477 7 29 7H35C35.5523 7 36 7.44772 36 8V14C36 14.5523 35.5523 15 35 15H29C28.4477 15 28 14.5523 28 14V8ZM30 9H34V13H30V9ZM14 13C14 12.4477 14.4477 12 15 12H25C25.5523 12 26 12.4477 26 13V27C26 27.5523 25.5523 28 25 28H15C14.4477 28 14 27.5523 14 27V13ZM16 14H24V26H16V14Z"
       }));
     case "EXP_2":
       return /*#__PURE__*/React.createElement("svg", {
@@ -7439,25 +7721,20 @@ function ButtonAsset({
         d: "M33.5791 13.7461C33.4874 13.6545 33.3591 13.6086 33.1941 13.6086H31.4011C31.2397 13.6086 31.0674 13.6251 30.8841 13.6581C30.7007 13.6875 30.5156 13.7296 30.3286 13.7846L32.0226 12.0521C32.2352 11.8358 32.4369 11.6213 32.6276 11.4086C32.8182 11.196 32.9851 10.9778 33.1281 10.7541C33.2747 10.5268 33.3902 10.2885 33.4746 10.0391C33.5589 9.78981 33.6011 9.51847 33.6011 9.22514C33.6011 8.88414 33.5406 8.57247 33.4196 8.29014C33.2986 8.00781 33.1281 7.76764 32.9081 7.56964C32.6881 7.36797 32.4222 7.21214 32.1106 7.10214C31.8026 6.98847 31.4597 6.93164 31.0821 6.93164C30.7227 6.93164 30.3872 6.98114 30.0756 7.08014C29.7639 7.17547 29.4871 7.32031 29.2451 7.51464C29.0031 7.70897 28.8014 7.95281 28.6401 8.24614C28.4787 8.53947 28.3687 8.88047 28.3101 9.26914L29.1131 9.41214C29.3184 9.44514 29.4761 9.43231 29.5861 9.37364C29.6997 9.31131 29.7896 9.18847 29.8556 9.00514C29.8886 8.88781 29.9399 8.77964 30.0096 8.68064C30.0792 8.58164 30.1617 8.49547 30.2571 8.42214C30.3561 8.34881 30.4661 8.29197 30.5871 8.25164C30.7117 8.20764 30.8474 8.18564 30.9941 8.18564C31.3277 8.18564 31.5862 8.27914 31.7696 8.46614C31.9529 8.64947 32.0446 8.91897 32.0446 9.27464C32.0446 9.47631 32.0189 9.66881 31.9676 9.85214C31.9162 10.0355 31.8392 10.217 31.7366 10.3966C31.6339 10.5726 31.5056 10.7541 31.3516 10.9411C31.1976 11.1245 31.0197 11.317 30.8181 11.5186L28.4531 13.8891C28.3577 13.9808 28.2899 14.0835 28.2496 14.1971C28.2092 14.3071 28.1891 14.4098 28.1891 14.5051V15.0001H33.7221V14.1091C33.7221 13.9588 33.6744 13.8378 33.5791 13.7461ZM14 13.0001C14 12.4479 14.4477 12.0001 15 12.0001H25C25.5523 12.0001 26 12.4479 26 13.0001V27.0001C26 27.5524 25.5523 28.0001 25 28.0001H15C14.4477 28.0001 14 27.5524 14 27.0001V13.0001ZM16 14.0001H24V26.0001H16V14.0001Z",
         fill: "#21242C"
       }));
-    case "EXP":
+    case "EXP_3":
       return /*#__PURE__*/React.createElement("svg", {
-        width: "40",
-        height: "40",
+        width: "42",
+        height: "42",
         viewBox: "0 0 40 40",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg"
       }, /*#__PURE__*/React.createElement("path", {
+        transform: "translate(0, -8)",
         fillRule: "evenodd",
         clipRule: "evenodd",
-        d: "M28 8C28 7.44772 28.4477 7 29 7H35C35.5523 7 36 7.44772 36 8V14C36 14.5523 35.5523 15 35 15H29C28.4477 15 28 14.5523 28 14V8ZM30 9H34V13H30V9ZM14 13C14 12.4477 14.4477 12 15 12H25C25.5523 12 26 12.4477 26 13V27C26 27.5523 25.5523 28 25 28H15C14.4477 28 14 27.5523 14 27V13ZM16 14H24V26H16V14Z",
-        fill: "#21242C"
+        fill: "#21242C",
+        d: "M14 21c0-.552.456-1 1.002-1h9.996A1 1 0 0 1 26 21v14c0 .552-.456 1-1.002 1h-9.996A1 1 0 0 1 14 35V21zm2 1h8v12h-8V22zM30.92 23.12c1.66 0 2.76-.81 2.76-1.98 0-.96-.86-1.51-1.57-1.58.79-.13 1.46-.72 1.46-1.5 0-1.1-.95-1.83-2.65-1.83-1.23 0-2.11.45-2.67 1.08l.83 1.08c.47-.42 1.05-.64 1.66-.64.64 0 1.12.19 1.12.61 0 .35-.39.52-1.08.52-.25 0-.77 0-.9-.01v1.53c.1-.01.61-.01.9-.01.91 0 1.19.18 1.19.56 0 .37-.38.65-1.12.65-.58 0-1.34-.23-1.82-.7l-.87 1.17c.52.6 1.48 1.05 2.76 1.05z"
       }));
-    case "PI":
-      //TODO(NickR): use correct font, size, and color for this. It's not an SVG asset
-      return /*#__PURE__*/React.createElement("span", null, "pi");
-    case "X":
-      //TODO(NickR): use correct font, size, and color for this. It's not an SVG asset
-      return /*#__PURE__*/React.createElement("span", null, "x");
     case "TAN":
       return /*#__PURE__*/React.createElement("svg", {
         width: "40",
@@ -7491,7 +7768,310 @@ function ButtonAsset({
         d: "M16.4215 19.392C16.3682 19.4773 16.3122 19.5387 16.2535 19.576C16.1948 19.608 16.1202 19.624 16.0295 19.624C15.9335 19.624 15.8295 19.5973 15.7175 19.544C15.6108 19.4907 15.4855 19.432 15.3415 19.368C15.1975 19.2987 15.0322 19.2373 14.8455 19.184C14.6642 19.1307 14.4482 19.104 14.1975 19.104C13.8082 19.104 13.5015 19.1867 13.2775 19.352C13.0588 19.5173 12.9495 19.7333 12.9495 20C12.9495 20.176 13.0055 20.3253 13.1175 20.448C13.2348 20.5653 13.3868 20.6693 13.5735 20.76C13.7655 20.8507 13.9815 20.9333 14.2215 21.008C14.4615 21.0773 14.7042 21.1547 14.9495 21.24C15.2002 21.3253 15.4455 21.424 15.6855 21.536C15.9255 21.6427 16.1388 21.7813 16.3255 21.952C16.5175 22.1173 16.6695 22.3173 16.7815 22.552C16.8988 22.7867 16.9575 23.0693 16.9575 23.4C16.9575 23.7947 16.8855 24.16 16.7415 24.496C16.6028 24.8267 16.3948 25.1147 16.1175 25.36C15.8402 25.6 15.4962 25.7893 15.0855 25.928C14.6802 26.0613 14.2108 26.128 13.6775 26.128C13.3948 26.128 13.1175 26.1013 12.8455 26.048C12.5788 26 12.3202 25.9307 12.0695 25.84C11.8242 25.7493 11.5948 25.6427 11.3815 25.52C11.1735 25.3973 10.9895 25.264 10.8295 25.12L11.2855 24.368C11.3442 24.2773 11.4135 24.208 11.4935 24.16C11.5735 24.112 11.6748 24.088 11.7975 24.088C11.9202 24.088 12.0348 24.1227 12.1415 24.192C12.2535 24.2613 12.3815 24.336 12.5255 24.416C12.6695 24.496 12.8375 24.5707 13.0295 24.64C13.2268 24.7093 13.4748 24.744 13.7735 24.744C14.0082 24.744 14.2082 24.7173 14.3735 24.664C14.5442 24.6053 14.6828 24.5307 14.7895 24.44C14.9015 24.3493 14.9815 24.2453 15.0295 24.128C15.0828 24.0053 15.1095 23.88 15.1095 23.752C15.1095 23.56 15.0508 23.4027 14.9335 23.28C14.8215 23.1573 14.6695 23.0507 14.4775 22.96C14.2908 22.8693 14.0748 22.7893 13.8295 22.72C13.5895 22.6453 13.3415 22.5653 13.0855 22.48C12.8348 22.3947 12.5868 22.296 12.3415 22.184C12.1015 22.0667 11.8855 21.92 11.6935 21.744C11.5068 21.568 11.3548 21.352 11.2375 21.096C11.1255 20.84 11.0695 20.5307 11.0695 20.168C11.0695 19.832 11.1362 19.512 11.2695 19.208C11.4028 18.904 11.5975 18.64 11.8535 18.416C12.1148 18.1867 12.4375 18.0053 12.8215 17.872C13.2108 17.7333 13.6588 17.664 14.1655 17.664C14.7308 17.664 15.2455 17.7573 15.7095 17.944C16.1735 18.1307 16.5602 18.376 16.8695 18.68L16.4215 19.392ZM20.4928 17.792V26H18.5088V17.792H20.4928ZM20.7648 15.4C20.7648 15.5707 20.7301 15.7307 20.6608 15.88C20.5914 16.0293 20.4981 16.16 20.3808 16.272C20.2688 16.384 20.1354 16.4747 19.9808 16.544C19.8261 16.608 19.6608 16.64 19.4848 16.64C19.3141 16.64 19.1514 16.608 18.9968 16.544C18.8474 16.4747 18.7168 16.384 18.6048 16.272C18.4928 16.16 18.4021 16.0293 18.3328 15.88C18.2688 15.7307 18.2368 15.5707 18.2368 15.4C18.2368 15.224 18.2688 15.0587 18.3328 14.904C18.4021 14.7493 18.4928 14.616 18.6048 14.504C18.7168 14.392 18.8474 14.304 18.9968 14.24C19.1514 14.1707 19.3141 14.136 19.4848 14.136C19.6608 14.136 19.8261 14.1707 19.9808 14.24C20.1354 14.304 20.2688 14.392 20.3808 14.504C20.4981 14.616 20.5914 14.7493 20.6608 14.904C20.7301 15.0587 20.7648 15.224 20.7648 15.4ZM24.3553 18.8C24.5206 18.6347 24.6939 18.4827 24.8753 18.344C25.0619 18.2 25.2566 18.08 25.4593 17.984C25.6673 17.8827 25.8886 17.8053 26.1233 17.752C26.3579 17.6933 26.6139 17.664 26.8913 17.664C27.3393 17.664 27.7366 17.7413 28.0833 17.896C28.4299 18.0453 28.7179 18.2587 28.9473 18.536C29.1819 18.808 29.3579 19.136 29.4753 19.52C29.5979 19.8987 29.6593 20.3173 29.6593 20.776V26H27.6833V20.776C27.6833 20.2747 27.5686 19.888 27.3393 19.616C27.1099 19.3387 26.7606 19.2 26.2913 19.2C25.9499 19.2 25.6299 19.2773 25.3313 19.432C25.0326 19.5867 24.7499 19.7973 24.4833 20.064V26H22.5073V17.792H23.7153C23.9713 17.792 24.1393 17.912 24.2193 18.152L24.3553 18.8Z",
         fill: "#21242C"
       }));
-    default:
+    case "DIVIDE":
+      return /*#__PURE__*/React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        fill: "currentColor",
+        viewBox: "0 0 256 256"
+      }, /*#__PURE__*/React.createElement("path", {
+        d: "M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM128,80a16,16,0,1,0-16-16A16,16,0,0,0,128,80Zm0,96a16,16,0,1,0,16,16A16,16,0,0,0,128,176Z"
+      }));
+    case "EQUAL":
+      return /*#__PURE__*/React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        fill: "currentColor",
+        viewBox: "0 0 256 256"
+      }, /*#__PURE__*/React.createElement("path", {
+        d: "M224,160a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,160ZM40,104H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16Z"
+      }));
+    case "GT":
+      return /*#__PURE__*/React.createElement("svg", {
+        width: "44",
+        height: "44",
+        viewBox: "0 0 48 48"
+      }, /*#__PURE__*/React.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React.createElement("path", {
+        fill: "none",
+        d: "M0 0h48v48H0z"
+      }), /*#__PURE__*/React.createElement("path", {
+        fill: "none",
+        d: "M12 12h24v24H12z"
+      }), /*#__PURE__*/React.createElement("path", {
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M16 30l16-6-16-6"
+      })));
+    case "LT":
+      return /*#__PURE__*/React.createElement("svg", {
+        width: "44",
+        height: "44",
+        viewBox: "0 0 48 48"
+      }, /*#__PURE__*/React.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React.createElement("path", {
+        fill: "none",
+        d: "M0 0h48v48H0z"
+      }), /*#__PURE__*/React.createElement("path", {
+        fill: "none",
+        d: "M12 12h24v24H12z"
+      }), /*#__PURE__*/React.createElement("path", {
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M32 30l-16-6 16-6"
+      })));
+    case "GEQ":
+      return /*#__PURE__*/React.createElement("svg", {
+        width: "44",
+        height: "44",
+        viewBox: "0 0 48 48"
+      }, /*#__PURE__*/React.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React.createElement("path", {
+        fill: "none",
+        d: "M0 0h48v48H0z"
+      }), /*#__PURE__*/React.createElement("path", {
+        fill: "none",
+        d: "M12 12h24v24H12z"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M16 33h16M16 30l16-6-16-6",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      })));
+    case "LEQ":
+      return /*#__PURE__*/React.createElement("svg", {
+        width: "44",
+        height: "44",
+        viewBox: "0 0 48 48"
+      }, /*#__PURE__*/React.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React.createElement("path", {
+        fill: "none",
+        d: "M0 0h48v48H0z"
+      }), /*#__PURE__*/React.createElement("path", {
+        fill: "none",
+        d: "M12 12h24v24H12z"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M16 33h16M32 30l-16-6 16-6",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      })));
+    case "NEQ":
+      return /*#__PURE__*/React.createElement("svg", {
+        width: "44",
+        height: "44",
+        viewBox: "0 0 48 48"
+      }, /*#__PURE__*/React.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React.createElement("path", {
+        fill: "none",
+        d: "M0 0h48v48H0z"
+      }), /*#__PURE__*/React.createElement("path", {
+        fill: "none",
+        d: "M12 12h24v24H12z"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M19 33l10-18M16 21h17M16 27h17",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      })));
+    case "LN":
+      return /*#__PURE__*/React.createElement("svg", {
+        width: "48",
+        height: "48",
+        viewBox: "0 0 48 48"
+      }, /*#__PURE__*/React.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React.createElement("path", {
+        fill: "none",
+        d: "M0 0h48v48H0z"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M20.836 29v-9.338h-1.778V29h1.778zm8.106 0v-4.774c0-1.316-.714-2.156-2.198-2.156-1.106 0-1.932.532-2.366 1.05v-.882H22.6V29h1.778v-4.55c.294-.406.84-.798 1.54-.798.756 0 1.246.322 1.246 1.26V29h1.778z",
+        fill: "currentColor"
+      })));
+    case "LOG":
+      return /*#__PURE__*/React.createElement("svg", {
+        width: "48",
+        height: "48",
+        viewBox: "0 0 48 48"
+      }, /*#__PURE__*/React.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React.createElement("path", {
+        fill: "none",
+        d: "M0 0h48v48H0z"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M16.776 29v-9.338h-1.778V29h1.778zm4.9.168c2.24 0 3.584-1.624 3.584-3.556 0-1.918-1.344-3.542-3.584-3.542-2.226 0-3.57 1.624-3.57 3.542 0 1.932 1.344 3.556 3.57 3.556zm0-1.582c-1.106 0-1.722-.91-1.722-1.974 0-1.05.616-1.96 1.722-1.96 1.106 0 1.736.91 1.736 1.96 0 1.064-.63 1.974-1.736 1.974zm7.672 4.158c1.666 0 3.654-.63 3.654-3.206v-6.3H31.21v.868c-.546-.686-1.274-1.036-2.086-1.036-1.708 0-2.982 1.232-2.982 3.444 0 2.254 1.288 3.444 2.982 3.444.826 0 1.554-.392 2.086-1.064v.686c0 1.33-1.008 1.708-1.862 1.708-.854 0-1.568-.238-2.114-.84l-.798 1.288c.854.742 1.75 1.008 2.912 1.008zm.336-4.368c-1.008 0-1.708-.7-1.708-1.862 0-1.162.7-1.862 1.708-1.862.588 0 1.232.322 1.526.77v2.184c-.294.434-.938.77-1.526.77z",
+        fill: "currentColor"
+      })));
+    case "LOG_N":
+      return /*#__PURE__*/React.createElement("svg", {
+        width: "48",
+        height: "48",
+        viewBox: "0 0 48 48"
+      }, /*#__PURE__*/React.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React.createElement("path", {
+        fill: "none",
+        d: "M0 0h48v48H0z"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M30 28.997c0-.55.453-.997.997-.997h6.006c.55 0 .997.453.997.997v6.006c0 .55-.453.997-.997.997h-6.006c-.55 0-.997-.453-.997-.997v-6.006zM32 30h4v4h-4v-4zM12.776 29v-9.338h-1.778V29h1.778zm4.9.168c2.24 0 3.584-1.624 3.584-3.556 0-1.918-1.344-3.542-3.584-3.542-2.226 0-3.57 1.624-3.57 3.542 0 1.932 1.344 3.556 3.57 3.556zm0-1.582c-1.106 0-1.722-.91-1.722-1.974 0-1.05.616-1.96 1.722-1.96 1.106 0 1.736.91 1.736 1.96 0 1.064-.63 1.974-1.736 1.974zm7.672 4.158c1.666 0 3.654-.63 3.654-3.206v-6.3H27.21v.868c-.546-.686-1.274-1.036-2.086-1.036-1.708 0-2.982 1.232-2.982 3.444 0 2.254 1.288 3.444 2.982 3.444.826 0 1.554-.392 2.086-1.064v.686c0 1.33-1.008 1.708-1.862 1.708-.854 0-1.568-.238-2.114-.84l-.798 1.288c.854.742 1.75 1.008 2.912 1.008zm.336-4.368c-1.008 0-1.708-.7-1.708-1.862 0-1.162.7-1.862 1.708-1.862.588 0 1.232.322 1.526.77v2.184c-.294.434-.938.77-1.526.77z",
+        fill: "currentColor"
+      })));
+    case "PERCENT":
+      return /*#__PURE__*/React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        fill: "currentColor",
+        viewBox: "0 0 256 256"
+      }, /*#__PURE__*/React.createElement("path", {
+        d: "M205.66,61.64l-144,144a8,8,0,0,1-11.32-11.32l144-144a8,8,0,0,1,11.32,11.31ZM50.54,101.44a36,36,0,0,1,50.92-50.91h0a36,36,0,0,1-50.92,50.91ZM56,76A20,20,0,1,0,90.14,61.84h0A20,20,0,0,0,56,76ZM216,180a36,36,0,1,1-10.54-25.46h0A35.76,35.76,0,0,1,216,180Zm-16,0a20,20,0,1,0-5.86,14.14A19.87,19.87,0,0,0,200,180Z"
+      }));
+    case "CDOT":
+      return /*#__PURE__*/React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        fill: "currentColor",
+        viewBox: "0 0 256 256"
+      }, /*#__PURE__*/React.createElement("path", {
+        d: "M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Z"
+      }));
+    case "PI":
+      return /*#__PURE__*/React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        fill: "currentColor",
+        viewBox: "0 0 256 256"
+      }, /*#__PURE__*/React.createElement("path", {
+        d: "M232,172a36,36,0,0,1-72,0V72H96V200a8,8,0,0,1-16,0V72H72a40,40,0,0,0-40,40,8,8,0,0,1-16,0A56.06,56.06,0,0,1,72,56H224a8,8,0,0,1,0,16H176V172a20,20,0,0,0,40,0,8,8,0,0,1,16,0Z"
+      }));
+    case "x":
+      // MATHEMATICAL ITALIC SMALL CHI
+      // https://en.wikipedia.org/wiki/Chi_(letter)#Mathematical_chi
+      return /*#__PURE__*/React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        fill: "currentColor",
+        viewBox: "0 0 256 256"
+      }, /*#__PURE__*/React.createElement("text", {
+        fontSize: "200px",
+        x: "50%",
+        y: "50%",
+        dominantBaseline: "middle",
+        textAnchor: "middle"
+      }, "\uD835\uDF12"));
+    case "X":
+      // MATHEMATICAL ITALIC CAPITAL CHI
+      // https://en.wikipedia.org/wiki/Chi_(letter)#Mathematical_chi
+      return /*#__PURE__*/React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        fill: "currentColor",
+        viewBox: "0 0 256 256"
+      }, /*#__PURE__*/React.createElement("text", {
+        fontSize: "200px",
+        x: "50%",
+        y: "50%",
+        dominantBaseline: "middle",
+        textAnchor: "middle"
+      }, "\uD835\uDEF8"));
+
+    /**
+     * ANYTHING BELOW IS NOT YET HANDLED
+     */
+    case "MANY":
+    case "FRAC_EXCLUSIVE":
+    case "THETA":
+    case "NOOP":
+    case "UP":
+    case "DOWN":
+    case "LEFT":
+    case "RIGHT":
+    case "JUMP_OUT_PARENTHESES":
+    case "JUMP_OUT_EXPONENT":
+    case "JUMP_OUT_BASE":
+    case "JUMP_INTO_NUMERATOR":
+    case "JUMP_OUT_NUMERATOR":
+    case "JUMP_OUT_DENOMINATOR":
+    case "PHI":
+    case "NTHROOT3":
+    case "POW":
+    case "LOG_B":
+    case "a":
+    case "b":
+    case "c":
+    case "d":
+    case "e":
+    case "f":
+    case "g":
+    case "h":
+    case "i":
+    case "j":
+    case "k":
+    case "l":
+    case "m":
+    case "n":
+    case "o":
+    case "p":
+    case "q":
+    case "r":
+    case "s":
+    case "t":
+    case "u":
+    case "v":
+    case "w":
+    case "y":
+    case "z":
+    case "A":
+    case "B":
+    case "C":
+    case "D":
+    case "E":
+    case "F":
+    case "G":
+    case "H":
+    case "I":
+    case "J":
+    case "K":
+    case "L":
+    case "M":
+    case "N":
+    case "O":
+    case "P":
+    case "Q":
+    case "R":
+    case "S":
+    case "T":
+    case "U":
+    case "V":
+    case "W":
+    case "Y":
+    case "Z":
       // placeholder
       return /*#__PURE__*/React.createElement("svg", {
         width: "40",
@@ -7509,6 +8089,11 @@ function ButtonAsset({
         lengthAdjust: "spacingAndGlyphs",
         fill: "red"
       }, "placeholder"));
+    default:
+      // this line forces an exhaustive check of all keys;
+      // if a key is not handled, the compiler will complain.
+      const unhandledKey = id;
+      throw new Error(`Unhandled key: ${unhandledKey}`);
   }
 }
 
@@ -7611,7 +8196,7 @@ class GeometryPage extends React.Component {
         gridColumn: 6
       }
     }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.X,
+      keyConfig: KeyConfigs.x,
       onClickKey: onClickKey,
       style: {
         gridColumn: 5
@@ -7832,7 +8417,7 @@ class OperatorsPage extends React.Component {
       onClickKey: onClickKey,
       placeholder: !this.props.logarithms
     }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.X,
+      keyConfig: KeyConfigs.x,
       onClickKey: onClickKey,
       style: {
         gridColumn: 5
@@ -7909,5 +8494,5 @@ class Keypad extends React.Component {
   }
 }
 
-export { CursorContext, KeyConfigs, KeyType, Keypad, MathInput as KeypadInput, KeypadType, Keys, ProvidedKeypad as LegacyKeypad, keypadElementPropType };
+export { CursorContext, KeyConfigs, Keypad, MathInput as KeypadInput, KeypadType, ProvidedKeypad as LegacyKeypad, keyToMathquillMap as keyTranslator, keypadElementPropType };
 //# sourceMappingURL=index.js.map