@khanacademy/math-input 3.0.0 → 4.1.0

package/dist/index.js

@@ -116,71 +116,13 @@ function _toPropertyKey(arg) {
   return typeof key === "symbol" ? key : String(key);
 }
 
-/**
- * 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__namespace.Component {
   render() {
     const {
       numberOfLines,
       style
     } = this.props;
-    const className = aphrodite.css(styles$g.initial, ...(Array.isArray(style) ? style : [style]), numberOfLines === 1 && styles$g.singleLineStyle);
+    const className = aphrodite.css(styles$h.initial, ...(Array.isArray(style) ? style : [style]), numberOfLines === 1 && styles$h.singleLineStyle);
     return /*#__PURE__*/React__namespace.createElement("span", {
       className: className,
       style: this.props.dynamicStyle
@@ -189,7 +131,7 @@ class Text extends React__namespace.Component {
 }
 
 // https://github.com/necolas/react-native-web/blob/master/src/components/Text/index.js
-const styles$g = aphrodite.StyleSheet.create({
+const styles$h = aphrodite.StyleSheet.create({
   initial: {
     color: "inherit",
     display: "inline",
@@ -468,16 +410,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";
@@ -530,125 +479,209 @@ let EchoAnimationType = /*#__PURE__*/function (EchoAnimationType) {
 //   listed here.  Much of the Arab world uses U+066C.
 const decimalSeparator = i18n.getDecimalSeparator() === "," ? DecimalSeparator.COMMA : DecimalSeparator.PERIOD;
 
-// Keeping `window` in place for test suite and GitHub Pages.
-// If it does not exist, fall back to CommonJS require. - jsatk
+var MQ = MathQuill__default["default"].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) {
+  let type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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"];
@@ -656,25 +689,625 @@ 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 || command === void 0 ? 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("^".concat(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: ".concat(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: ".concat(context));
+  }
+}
+
+function buildNormalFunctionCallback(command) {
+  return function (mathField) {
+    mathField.write("\\".concat(command, "\\left(\\right)"));
+    mathField.keystroke("Left");
+  };
+}
+const customKeyTranslator = {
+  ...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) {
     let callbacks = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-    _defineProperty(this, "MQ", void 0);
     _defineProperty(this, "mathField", void 0);
     _defineProperty(this, "callbacks", void 0);
-    this.MQ = MathQuill__default["default"].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 () {
@@ -700,10 +1333,6 @@ class MathWrapper {
     controller.cursor.hide();
     controller.blurred = true;
   }
-  _writeNormalFunction(name) {
-    this.mathField.write("\\".concat(name, "\\left(\\right)"));
-    this.mathField.keystroke("Left");
-  }
 
   /**
    * Handle a key press and return the resulting cursor state.
@@ -712,51 +1341,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
@@ -802,7 +1390,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);
@@ -816,8 +1404,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;
@@ -832,576 +1429,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: ".concat(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("^".concat(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: ".concat(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 || command === void 0 ? 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;
-  }
 }
 
 /**
@@ -1860,16 +1887,16 @@ class MathInput extends React__namespace.Component {
     });
     _defineProperty(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
@@ -1879,7 +1906,7 @@ class MathInput extends React__namespace.Component {
 
       // Movement keys
       else if (key === "Backspace") {
-        return Keys.BACKSPACE;
+        return "BACKSPACE";
       }
 
       // Operators
@@ -2081,7 +2108,7 @@ class MathInput extends React__namespace.Component {
     // to the open the keyboard, and then remove the second half of this label.
     const ariaLabel = i18n__namespace._("Math input box") + " " + i18n__namespace._("Tap with one or two fingers to open keyboard");
     return /*#__PURE__*/React__namespace.createElement(View, {
-      style: styles$f.input,
+      style: styles$g.input,
       onTouchStart: this.handleTouchStart,
       onTouchMove: this.handleTouchMove,
       onTouchEnd: this.handleTouchEnd,
@@ -2127,7 +2154,7 @@ const numeralHeightPx = 20;
 const totalDesiredPadding = 12;
 const minHeightPx = numeralHeightPx + totalDesiredPadding * 2;
 const minWidthPx = 64;
-const styles$f = aphrodite.StyleSheet.create({
+const styles$g = aphrodite.StyleSheet.create({
   input: {
     position: "relative",
     display: "inline-block",
@@ -2177,40 +2204,104 @@ const keypadElementPropType = PropTypes__default["default"].shape({
 /**
  * This file contains configuration settings for the buttons in the keypad.
  */
-// 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 = _ref => {
+  let {
+    key,
+    keyType = "OPERATOR",
+    iconType = IconType.SVG,
+    ariaLabel = key,
+    data = key
+  } = _ref;
+  return {
+    id: key,
+    type: keyType,
+    ariaLabel,
+    icon: {
+      type: iconType,
+      data
+    }
+  };
+};
+const getDefaultValueFields = _ref2 => {
+  let {
+    key,
+    keyType = "VALUE",
+    iconType = IconType.MATH,
+    ariaLabel = key,
+    data = key
+  } = _ref2;
+  return {
+    id: key,
+    type: keyType,
+    ariaLabel,
+    icon: {
+      type: iconType,
+      data
+    }
+  };
+};
+const getDefaultNumberFields = _ref3 => {
+  let {
+    key,
+    data = key.replace("NUM_", ""),
+    keyType = "VALUE",
+    iconType = IconType.TEXT,
+    ariaLabel = data
+  } = _ref3;
+  return {
+    id: key,
+    type: keyType,
+    ariaLabel,
+    icon: {
+      type: iconType,
+      data
+    }
+  };
+};
 const KeyConfigs = {
-  // Basic math keys.
-  [Keys.PLUS]: {
-    type: KeyType.OPERATOR,
-    // I18N: A label for a plus sign.
-    ariaLabel: i18n__namespace._("Plus")
-  },
-  [Keys.MINUS]: {
-    type: KeyType.OPERATOR,
-    // I18N: A label for a minus sign.
-    ariaLabel: i18n__namespace._("Minus")
-  },
-  [Keys.NEGATIVE]: {
-    type: KeyType.VALUE,
-    // I18N: A label for a minus sign.
-    ariaLabel: i18n__namespace._("Negative")
-  },
-  [Keys.TIMES]: {
-    type: KeyType.OPERATOR,
-    // I18N: A label for a multiplication sign (represented with an 'x').
-    ariaLabel: i18n__namespace._("Multiply")
-  },
-  [Keys.DIVIDE]: {
-    type: KeyType.OPERATOR,
-    // I18N: A label for a division sign.
-    ariaLabel: i18n__namespace._("Divide")
-  },
-  [Keys.DECIMAL]: {
-    type: KeyType.VALUE,
-    // I18N: A label for a decimal symbol.
-    ariaLabel: i18n__namespace._("Decimal"),
+  // Basic math
+  PLUS: {
+    ...getDefaultOperatorFields({
+      key: "PLUS",
+      // I18N: A label for a 'plus' sign.
+      ariaLabel: i18n__namespace._("Plus")
+    })
+  },
+  MINUS: {
+    ...getDefaultOperatorFields({
+      key: "MINUS",
+      // I18N: A label for a 'minus' sign.
+      ariaLabel: i18n__namespace._("Minus")
+    })
+  },
+  NEGATIVE: {
+    ...getDefaultOperatorFields({
+      key: "NEGATIVE",
+      // I18N: A label for a 'negative' sign.
+      ariaLabel: i18n__namespace._("Negative")
+    })
+  },
+  TIMES: {
+    ...getDefaultOperatorFields({
+      key: "TIMES",
+      // I18N: A label for a 'multiply' sign.
+      ariaLabel: i18n__namespace._("Multiply")
+    })
+  },
+  DIVIDE: {
+    ...getDefaultOperatorFields({
+      key: "DIVIDE",
+      // I18N: A label for a 'divide' sign.
+      ariaLabel: i18n__namespace._("Divide")
+    })
+  },
+  DECIMAL: {
+    ...getDefaultOperatorFields({
+      key: "DECIMAL",
+      keyType: "VALUE",
+      // I18N: A label for a 'decimal' sign (represented as '.' or ',').
+      ariaLabel: i18n__namespace._("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.
@@ -2218,252 +2309,662 @@ const KeyConfigs = {
       data: ","
     } : {
       type: IconType.SVG,
-      data: Keys.PERIOD
+      data: "PERIOD"
     }
   },
-  [Keys.PERCENT]: {
-    type: KeyType.OPERATOR,
-    // I18N: A label for a percent sign.
-    ariaLabel: i18n__namespace._("Percent")
-  },
-  [Keys.CDOT]: {
-    type: KeyType.OPERATOR,
-    // I18N: A label for a multiplication sign (represented as a dot).
-    ariaLabel: i18n__namespace._("Multiply")
-  },
-  [Keys.EQUAL]: {
-    type: KeyType.OPERATOR,
-    ariaLabel: i18n__namespace._("Equals sign")
-  },
-  [Keys.NEQ]: {
-    type: KeyType.OPERATOR,
-    ariaLabel: i18n__namespace._("Not-equals sign")
-  },
-  [Keys.GT]: {
-    type: KeyType.OPERATOR,
-    // I18N: A label for a 'greater than' sign (represented as '>').
-    ariaLabel: i18n__namespace._("Greater than sign")
-  },
-  [Keys.LT]: {
-    type: KeyType.OPERATOR,
-    // I18N: A label for a 'less than' sign (represented as '<').
-    ariaLabel: i18n__namespace._("Less than sign")
-  },
-  [Keys.GEQ]: {
-    type: KeyType.OPERATOR,
-    ariaLabel: i18n__namespace._("Greater than or equal to sign")
-  },
-  [Keys.LEQ]: {
-    type: KeyType.OPERATOR,
-    ariaLabel: i18n__namespace._("Less than or equal to sign")
+  PERIOD: {
+    ...getDefaultOperatorFields({
+      key: "PERIOD",
+      keyType: "VALUE",
+      ariaLabel: "."
+    })
+  },
+  PERCENT: {
+    ...getDefaultOperatorFields({
+      key: "PERCENT",
+      // I18N: A label for a 'percent' sign (represented as '%').
+      ariaLabel: i18n__namespace._("Percent")
+    })
+  },
+  CDOT: {
+    ...getDefaultOperatorFields({
+      key: "CDOT",
+      // I18N: A label for a 'centered dot' multiplication sign (represented as '⋅').
+      ariaLabel: i18n__namespace._("Multiply")
+    })
+  },
+  EQUAL: {
+    ...getDefaultOperatorFields({
+      key: "EQUAL",
+      // I18N: A label for an 'equals' sign (represented as '=').
+      ariaLabel: i18n__namespace._("Equals sign")
+    })
+  },
+  NEQ: {
+    ...getDefaultOperatorFields({
+      key: "NEQ",
+      // I18N: A label for a 'not-equals' sign (represented as '≠').
+      ariaLabel: i18n__namespace._("Not-equals sign")
+    })
+  },
+  GT: {
+    ...getDefaultOperatorFields({
+      key: "GT",
+      // I18N: A label for a 'greater than' sign (represented as '>').
+      ariaLabel: i18n__namespace._("Greater than sign")
+    })
+  },
+  LT: {
+    ...getDefaultOperatorFields({
+      key: "LT",
+      // I18N: A label for a 'less than' sign (represented as '<').
+      ariaLabel: i18n__namespace._("Less than sign")
+    })
+  },
+  GEQ: {
+    ...getDefaultOperatorFields({
+      key: "GEQ",
+      // I18N: A label for a 'greater than or equal to' sign (represented as '≥').
+      ariaLabel: i18n__namespace._("Greater than or equal to sign")
+    })
+  },
+  LEQ: {
+    ...getDefaultOperatorFields({
+      key: "LEQ",
+      // I18N: A label for a 'less than or equal to' sign (represented as '≤').
+      ariaLabel: i18n__namespace._("Less than or equal to sign")
+    })
   },
   // mobile native
-  [Keys.FRAC_INCLUSIVE]: {
-    type: KeyType.OPERATOR,
-    // I18N: A label for a button that creates a new fraction and puts the
-    // current expression in the numerator of that fraction.
-    ariaLabel: i18n__namespace._("Fraction, with current expression in numerator")
+  FRAC_INCLUSIVE: {
+    ...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__namespace._("Fraction, with current expression in numerator")
+    })
   },
   // mobile native
-  [Keys.FRAC_EXCLUSIVE]: {
-    type: KeyType.OPERATOR,
-    // I18N: A label for a button that creates a new fraction next to the
-    // cursor.
-    ariaLabel: i18n__namespace._("Fraction, excluding the current expression")
+  FRAC_EXCLUSIVE: {
+    ...getDefaultOperatorFields({
+      key: "FRAC_EXCLUSIVE",
+      // I18N: A label for a button that creates a new fraction next to the
+      // cursor.
+      ariaLabel: i18n__namespace._("Fraction, excluding the current expression")
+    })
   },
   // mobile web
-  [Keys.FRAC]: {
-    type: KeyType.OPERATOR,
-    // I18N: A label for a button that creates a new fraction next to the
-    // cursor.
-    ariaLabel: i18n__namespace._("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.
-    ariaLabel: i18n__namespace._("Custom exponent")
-  },
-  [Keys.EXP_2]: {
-    type: KeyType.OPERATOR,
-    // I18N: A label for a button that will square (take to the second
-    // power) some math.
-    ariaLabel: i18n__namespace._("Square")
-  },
-  [Keys.EXP_3]: {
-    type: KeyType.OPERATOR,
-    // I18N: A label for a button that will cube (take to the third power)
-    // some math.
-    ariaLabel: i18n__namespace._("Cube")
-  },
-  [Keys.SQRT]: {
-    type: KeyType.OPERATOR,
-    ariaLabel: i18n__namespace._("Square root")
-  },
-  [Keys.CUBE_ROOT]: {
-    type: KeyType.OPERATOR,
-    ariaLabel: i18n__namespace._("Cube root")
-  },
-  [Keys.RADICAL]: {
-    type: KeyType.OPERATOR,
-    ariaLabel: i18n__namespace._("Radical with custom root")
-  },
-  [Keys.LEFT_PAREN]: {
-    type: KeyType.OPERATOR,
-    ariaLabel: i18n__namespace._("Left parenthesis")
-  },
-  [Keys.RIGHT_PAREN]: {
-    type: KeyType.OPERATOR,
-    ariaLabel: i18n__namespace._("Right parenthesis")
-  },
-  [Keys.LN]: {
-    type: KeyType.OPERATOR,
-    ariaLabel: i18n__namespace._("Natural logarithm")
-  },
-  [Keys.LOG]: {
-    type: KeyType.OPERATOR,
-    ariaLabel: i18n__namespace._("Logarithm with base 10")
-  },
-  [Keys.LOG_N]: {
-    type: KeyType.OPERATOR,
-    ariaLabel: i18n__namespace._("Logarithm with custom base")
-  },
-  [Keys.SIN]: {
-    type: KeyType.OPERATOR,
-    ariaLabel: i18n__namespace._("Sine")
-  },
-  [Keys.COS]: {
-    type: KeyType.OPERATOR,
-    ariaLabel: i18n__namespace._("Cosine")
-  },
-  [Keys.TAN]: {
-    type: KeyType.OPERATOR,
-    ariaLabel: i18n__namespace._("Tangent")
-  },
-  [Keys.PI]: {
-    type: KeyType.VALUE,
-    ariaLabel: i18n__namespace._("Pi"),
-    icon: {
-      type: IconType.MATH,
-      data: "\\pi"
-    }
-  },
-  [Keys.THETA]: {
-    type: KeyType.VALUE,
-    ariaLabel: i18n__namespace._("Theta"),
-    icon: {
-      type: IconType.MATH,
-      data: "\\theta"
-    }
-  },
-  [Keys.NOOP]: {
-    type: KeyType.EMPTY
-  },
-  // Input navigation keys.
-  [Keys.UP]: {
-    type: KeyType.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("Up arrow")
-  },
-  [Keys.RIGHT]: {
-    type: KeyType.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("Right arrow")
-  },
-  [Keys.DOWN]: {
-    type: KeyType.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("Down arrow")
-  },
-  [Keys.LEFT]: {
-    type: KeyType.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("Left arrow")
-  },
-  [Keys.JUMP_OUT_PARENTHESES]: {
-    type: KeyType.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("Navigate right out of a set of parentheses")
-  },
-  [Keys.JUMP_OUT_EXPONENT]: {
-    type: KeyType.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("Navigate right out of an exponent")
-  },
-  [Keys.JUMP_OUT_BASE]: {
-    type: KeyType.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("Navigate right out of a base")
-  },
-  [Keys.JUMP_INTO_NUMERATOR]: {
-    type: KeyType.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("Navigate right into the numerator of a fraction")
-  },
-  [Keys.JUMP_OUT_NUMERATOR]: {
-    type: KeyType.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("Navigate right out of the numerator and into the denominator")
-  },
-  [Keys.JUMP_OUT_DENOMINATOR]: {
-    type: KeyType.INPUT_NAVIGATION,
-    ariaLabel: i18n__namespace._("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.
-    ariaLabel: i18n__namespace._("Delete")
-  },
-  // Keypad navigation keys.
-  [Keys.DISMISS]: {
-    type: KeyType.KEYPAD_NAVIGATION,
-    // I18N: A label for a button that will dismiss/hide a keypad.
-    ariaLabel: i18n__namespace._("Dismiss")
+  FRAC: {
+    ...getDefaultOperatorFields({
+      key: "FRAC",
+      // I18N: A label for a button that creates a new fraction next to the
+      // cursor.
+      ariaLabel: i18n__namespace._("Fraction, excluding the current expression")
+    })
+  },
+  EXP: {
+    ...getDefaultOperatorFields({
+      key: "EXP",
+      // I18N: A label for a button that will allow the user to input a
+      // custom exponent.
+      ariaLabel: i18n__namespace._("Custom exponent")
+    })
+  },
+  EXP_2: {
+    ...getDefaultOperatorFields({
+      key: "EXP_2",
+      // I18N: A label for a button that will square (take to the second
+      // power) some math.
+      ariaLabel: i18n__namespace._("Square")
+    })
+  },
+  EXP_3: {
+    ...getDefaultOperatorFields({
+      key: "EXP_3",
+      // I18N: A label for a button that will cube (take to the third power)
+      // some math.
+      ariaLabel: i18n__namespace._("Cube")
+    })
+  },
+  SQRT: {
+    ...getDefaultOperatorFields({
+      key: "SQRT",
+      // I18N: A label for a button that will allow the user to input a
+      // square root.
+      ariaLabel: i18n__namespace._("Square root")
+    })
+  },
+  CUBE_ROOT: {
+    ...getDefaultOperatorFields({
+      key: "CUBE_ROOT",
+      // I18N: A label for a button that will allow the user to input a
+      // cube root.
+      ariaLabel: i18n__namespace._("Cube root")
+    })
+  },
+  RADICAL: {
+    ...getDefaultOperatorFields({
+      key: "RADICAL",
+      // I18N: A label for a button that will allow the user to input a
+      // radical with a custom root.
+      ariaLabel: i18n__namespace._("Radical with custom root")
+    })
+  },
+  LEFT_PAREN: {
+    ...getDefaultOperatorFields({
+      key: "LEFT_PAREN",
+      // I18N: A label for a button that will allow the user to input a
+      // left parenthesis (i.e. '(')
+      ariaLabel: i18n__namespace._("Left parenthesis")
+    })
+  },
+  RIGHT_PAREN: {
+    ...getDefaultOperatorFields({
+      key: "RIGHT_PAREN",
+      // I18N: A label for a button that will allow the user to input a
+      // right parenthesis (i.e. ')')
+      ariaLabel: i18n__namespace._("Right parenthesis")
+    })
+  },
+  LN: {
+    ...getDefaultOperatorFields({
+      key: "LN",
+      // I18N: A label for a button that will allow the user to input a
+      // natural logarithm.
+      ariaLabel: i18n__namespace._("Natural logarithm")
+    })
+  },
+  LOG: {
+    ...getDefaultOperatorFields({
+      key: "LOG",
+      // I18N: A label for a button that will allow the user to input a
+      // logarithm with base 10.
+      ariaLabel: i18n__namespace._("Logarithm with base 10")
+    })
+  },
+  LOG_N: {
+    ...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__namespace._("Logarithm with custom base")
+    })
+  },
+  SIN: {
+    ...getDefaultOperatorFields({
+      key: "SIN",
+      // I18N: A label for a button that will allow the user to input a
+      // sine function.
+      ariaLabel: i18n__namespace._("Sine")
+    })
+  },
+  COS: {
+    ...getDefaultOperatorFields({
+      key: "COS",
+      // I18N: A label for a button that will allow the user to input a
+      // cosine function.
+      ariaLabel: i18n__namespace._("Cosine")
+    })
+  },
+  TAN: {
+    ...getDefaultOperatorFields({
+      key: "TAN",
+      // I18N: A label for a button that will allow the user to input a
+      // tangent function.
+      ariaLabel: i18n__namespace._("Tangent")
+    })
+  },
+  PI: {
+    ...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__namespace._("Pi")
+    })
+  },
+  THETA: {
+    ...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__namespace._("Theta")
+    })
+  },
+  NOOP: {
+    ...getDefaultOperatorFields({
+      key: "NOOP",
+      keyType: "EMPTY"
+    })
+  },
+  // Input navigation
+  UP: {
+    ...getDefaultOperatorFields({
+      key: "UP",
+      keyType: "INPUT_NAVIGATION",
+      ariaLabel: i18n__namespace._("Up arrow")
+    })
+  },
+  RIGHT: {
+    ...getDefaultOperatorFields({
+      key: "RIGHT",
+      keyType: "INPUT_NAVIGATION",
+      ariaLabel: i18n__namespace._("Right arrow")
+    })
+  },
+  DOWN: {
+    ...getDefaultOperatorFields({
+      key: "DOWN",
+      keyType: "INPUT_NAVIGATION",
+      ariaLabel: i18n__namespace._("Down arrow")
+    })
+  },
+  LEFT: {
+    ...getDefaultOperatorFields({
+      key: "LEFT",
+      keyType: "INPUT_NAVIGATION",
+      ariaLabel: i18n__namespace._("Left arrow")
+    })
+  },
+  JUMP_OUT_PARENTHESES: {
+    ...getDefaultOperatorFields({
+      key: "JUMP_OUT_PARENTHESES",
+      keyType: "INPUT_NAVIGATION",
+      ariaLabel: i18n__namespace._("Navigate right out of a set of parentheses")
+    })
+  },
+  JUMP_OUT_EXPONENT: {
+    ...getDefaultOperatorFields({
+      key: "JUMP_OUT_EXPONENT",
+      keyType: "INPUT_NAVIGATION",
+      ariaLabel: i18n__namespace._("Navigate right out of an exponent")
+    })
+  },
+  JUMP_OUT_BASE: {
+    ...getDefaultOperatorFields({
+      key: "JUMP_OUT_BASE",
+      keyType: "INPUT_NAVIGATION",
+      ariaLabel: i18n__namespace._("Navigate right out of a base")
+    })
+  },
+  JUMP_INTO_NUMERATOR: {
+    ...getDefaultOperatorFields({
+      key: "JUMP_INTO_NUMERATOR",
+      keyType: "INPUT_NAVIGATION",
+      ariaLabel: i18n__namespace._("Navigate right into the numerator of a fraction")
+    })
+  },
+  JUMP_OUT_NUMERATOR: {
+    ...getDefaultOperatorFields({
+      key: "JUMP_OUT_NUMERATOR",
+      keyType: "INPUT_NAVIGATION",
+      ariaLabel: i18n__namespace._("Navigate right out of the numerator and into the denominator")
+    })
+  },
+  JUMP_OUT_DENOMINATOR: {
+    ...getDefaultOperatorFields({
+      key: "JUMP_OUT_DENOMINATOR",
+      keyType: "INPUT_NAVIGATION",
+      ariaLabel: i18n__namespace._("Navigate right out of the denominator of a fraction")
+    })
+  },
+  BACKSPACE: {
+    ...getDefaultOperatorFields({
+      key: "BACKSPACE",
+      keyType: "INPUT_NAVIGATION",
+      ariaLabel: i18n__namespace._("Delete")
+    })
+  },
+  // Keypad navigation
+  DISMISS: {
+    ...getDefaultOperatorFields({
+      key: "DISMISS",
+      keyType: "KEYPAD_NAVIGATION",
+      // I18N: A label for a button that will dismiss/hide a keypad.
+      ariaLabel: i18n__namespace._("Dismiss")
+    })
   },
   // TODO(charlie): Use the numeral color for the 'Many' key.
-  // MANY: {
-  //     type: KeyType.MANY,
-  //     // childKeyIds will be configured by the client.
-  // },
-
-  [Keys.PERIOD]: {}
-};
-
-// 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 = "".concat(num);
-  KeyConfigs["NUM_".concat(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
-      }
-    };
+  MANY: {
+    ...getDefaultOperatorFields({
+      key: "MANY",
+      keyType: "MANY"
+    })
+  },
+  // NUMBERS
+  NUM_0: {
+    ...getDefaultNumberFields({
+      key: "NUM_0"
+    })
+  },
+  NUM_1: {
+    ...getDefaultNumberFields({
+      key: "NUM_1"
+    })
+  },
+  NUM_2: {
+    ...getDefaultNumberFields({
+      key: "NUM_2"
+    })
+  },
+  NUM_3: {
+    ...getDefaultNumberFields({
+      key: "NUM_3"
+    })
+  },
+  NUM_4: {
+    ...getDefaultNumberFields({
+      key: "NUM_4"
+    })
+  },
+  NUM_5: {
+    ...getDefaultNumberFields({
+      key: "NUM_5"
+    })
+  },
+  NUM_6: {
+    ...getDefaultNumberFields({
+      key: "NUM_6"
+    })
+  },
+  NUM_7: {
+    ...getDefaultNumberFields({
+      key: "NUM_7"
+    })
+  },
+  NUM_8: {
+    ...getDefaultNumberFields({
+      key: "NUM_8"
+    })
+  },
+  NUM_9: {
+    ...getDefaultNumberFields({
+      key: "NUM_9"
+    })
+  },
+  // LETTERS
+  A: {
+    ...getDefaultValueFields({
+      key: "A"
+    })
+  },
+  B: {
+    ...getDefaultValueFields({
+      key: "B"
+    })
+  },
+  C: {
+    ...getDefaultValueFields({
+      key: "C"
+    })
+  },
+  D: {
+    ...getDefaultValueFields({
+      key: "D"
+    })
+  },
+  E: {
+    ...getDefaultValueFields({
+      key: "E"
+    })
+  },
+  F: {
+    ...getDefaultValueFields({
+      key: "F"
+    })
+  },
+  G: {
+    ...getDefaultValueFields({
+      key: "G"
+    })
+  },
+  H: {
+    ...getDefaultValueFields({
+      key: "H"
+    })
+  },
+  I: {
+    ...getDefaultValueFields({
+      key: "I"
+    })
+  },
+  J: {
+    ...getDefaultValueFields({
+      key: "J"
+    })
+  },
+  K: {
+    ...getDefaultValueFields({
+      key: "K"
+    })
+  },
+  L: {
+    ...getDefaultValueFields({
+      key: "L"
+    })
+  },
+  M: {
+    ...getDefaultValueFields({
+      key: "M"
+    })
+  },
+  N: {
+    ...getDefaultValueFields({
+      key: "N"
+    })
+  },
+  O: {
+    ...getDefaultValueFields({
+      key: "O"
+    })
+  },
+  P: {
+    ...getDefaultValueFields({
+      key: "P"
+    })
+  },
+  Q: {
+    ...getDefaultValueFields({
+      key: "Q"
+    })
+  },
+  R: {
+    ...getDefaultValueFields({
+      key: "R"
+    })
+  },
+  S: {
+    ...getDefaultValueFields({
+      key: "S"
+    })
+  },
+  T: {
+    ...getDefaultValueFields({
+      key: "T"
+    })
+  },
+  U: {
+    ...getDefaultValueFields({
+      key: "U"
+    })
+  },
+  V: {
+    ...getDefaultValueFields({
+      key: "V"
+    })
+  },
+  W: {
+    ...getDefaultValueFields({
+      key: "W"
+    })
+  },
+  X: {
+    ...getDefaultValueFields({
+      key: "X"
+    })
+  },
+  Y: {
+    ...getDefaultValueFields({
+      key: "Y"
+    })
+  },
+  Z: {
+    ...getDefaultValueFields({
+      key: "Z"
+    })
+  },
+  a: {
+    ...getDefaultValueFields({
+      key: "a"
+    })
+  },
+  b: {
+    ...getDefaultValueFields({
+      key: "b"
+    })
+  },
+  c: {
+    ...getDefaultValueFields({
+      key: "c"
+    })
+  },
+  d: {
+    ...getDefaultValueFields({
+      key: "d"
+    })
+  },
+  e: {
+    ...getDefaultValueFields({
+      key: "e"
+    })
+  },
+  f: {
+    ...getDefaultValueFields({
+      key: "f"
+    })
+  },
+  g: {
+    ...getDefaultValueFields({
+      key: "g"
+    })
+  },
+  h: {
+    ...getDefaultValueFields({
+      key: "h"
+    })
+  },
+  i: {
+    ...getDefaultValueFields({
+      key: "i"
+    })
+  },
+  j: {
+    ...getDefaultValueFields({
+      key: "j"
+    })
+  },
+  k: {
+    ...getDefaultValueFields({
+      key: "k"
+    })
+  },
+  l: {
+    ...getDefaultValueFields({
+      key: "l"
+    })
+  },
+  m: {
+    ...getDefaultValueFields({
+      key: "m"
+    })
+  },
+  n: {
+    ...getDefaultValueFields({
+      key: "n"
+    })
+  },
+  o: {
+    ...getDefaultValueFields({
+      key: "o"
+    })
+  },
+  p: {
+    ...getDefaultValueFields({
+      key: "p"
+    })
+  },
+  q: {
+    ...getDefaultValueFields({
+      key: "q"
+    })
+  },
+  r: {
+    ...getDefaultValueFields({
+      key: "r"
+    })
+  },
+  s: {
+    ...getDefaultValueFields({
+      key: "s"
+    })
+  },
+  t: {
+    ...getDefaultValueFields({
+      key: "t"
+    })
+  },
+  u: {
+    ...getDefaultValueFields({
+      key: "u"
+    })
+  },
+  v: {
+    ...getDefaultValueFields({
+      key: "v"
+    })
+  },
+  w: {
+    ...getDefaultValueFields({
+      key: "w"
+    })
+  },
+  x: {
+    ...getDefaultValueFields({
+      key: "x"
+    })
+  },
+  y: {
+    ...getDefaultValueFields({
+      key: "y"
+    })
+  },
+  z: {
+    ...getDefaultValueFields({
+      key: "z"
+    })
+  },
+  PHI: {
+    ...getDefaultValueFields({
+      key: "PHI"
+    })
+  },
+  NTHROOT3: {
+    ...getDefaultValueFields({
+      key: "NTHROOT3"
+    })
+  },
+  POW: {
+    ...getDefaultValueFields({
+      key: "POW"
+    })
+  },
+  LOG_B: {
+    ...getDefaultValueFields({
+      key: "LOG_B"
+    })
   }
-}
-for (const key of Object.keys(KeyConfigs)) {
-  KeyConfigs[key] = {
-    id: key,
-    // Default to an SVG icon indexed by the key name.
-    icon: {
-      type: IconType.SVG,
-      data: key
-    },
-    ...KeyConfigs[key]
-  };
-}
+};
 
 /**
  * A small triangular decal to sit in the corner of a parent component.
@@ -2473,7 +2974,7 @@ class CornerDecal extends React__namespace.Component {
     const {
       style
     } = this.props;
-    const containerStyle = [styles$e.container, ...(Array.isArray(style) ? style : [style])];
+    const containerStyle = [styles$f.container, ...(Array.isArray(style) ? style : [style])];
     return /*#__PURE__*/React__namespace.createElement(View, {
       style: containerStyle
     }, /*#__PURE__*/React__namespace.createElement("svg", {
@@ -2489,7 +2990,7 @@ class CornerDecal extends React__namespace.Component {
 }
 
 const triangleSizePx = 7;
-const styles$e = aphrodite.StyleSheet.create({
+const styles$f = aphrodite.StyleSheet.create({
   container: {
     position: "absolute",
     top: 0,
@@ -2559,13 +3060,13 @@ class MathIcon extends React__namespace.Component {
     const {
       style
     } = this.props;
-    const containerStyle = [row$7, centered$4, styles$d.size, styles$d.base, ...(Array.isArray(style) ? style : [style])];
+    const containerStyle = [row$7, centered$4, styles$e.size, styles$e.base, ...(Array.isArray(style) ? style : [style])];
     return /*#__PURE__*/React__namespace.createElement(View, {
       style: containerStyle
     });
   }
 }
-const styles$d = aphrodite.StyleSheet.create({
+const styles$e = aphrodite.StyleSheet.create({
   size: {
     height: iconSizeHeightPx,
     width: iconSizeWidthPx
@@ -3748,13 +4249,13 @@ class TextIcon extends React__namespace.Component {
       character,
       style
     } = this.props;
-    const containerStyle = [row$6, centered$3, styles$c.size, styles$c.base, ...(Array.isArray(style) ? style : [style])];
+    const containerStyle = [row$6, centered$3, styles$d.size, styles$d.base, ...(Array.isArray(style) ? style : [style])];
     return /*#__PURE__*/React__namespace.createElement(View, {
       style: containerStyle
     }, /*#__PURE__*/React__namespace.createElement(Text, null, character));
   }
 }
-const styles$c = aphrodite.StyleSheet.create({
+const styles$d = aphrodite.StyleSheet.create({
   size: {
     height: iconSizeHeightPx,
     width: iconSizeWidthPx
@@ -3777,7 +4278,7 @@ class Icon extends React__namespace.PureComponent {
       icon,
       style
     } = this.props;
-    const styleWithFocus = [focused ? styles$b.focused : styles$b.unfocused, ...(Array.isArray(style) ? style : [style])];
+    const styleWithFocus = [focused ? styles$c.focused : styles$c.unfocused, ...(Array.isArray(style) ? style : [style])];
     switch (icon.type) {
       case IconType.MATH:
         return /*#__PURE__*/React__namespace.createElement(MathIcon, {
@@ -3803,7 +4304,7 @@ class Icon extends React__namespace.PureComponent {
     }
   }
 }
-const styles$b = aphrodite.StyleSheet.create({
+const styles$c = aphrodite.StyleSheet.create({
   unfocused: {
     color: unfocusedColor
   },
@@ -3845,19 +4346,19 @@ class MultiSymbolGrid extends React__namespace.Component {
         focused: focused
       });
     } else {
-      const primaryIconStyle = styles$a.base;
-      const secondaryIconStyle = [styles$a.base, styles$a.secondary];
+      const primaryIconStyle = styles$b.base;
+      const secondaryIconStyle = [styles$b.base, styles$b.secondary];
       if (icons.length === 2) {
         return /*#__PURE__*/React__namespace.createElement(View, {
-          style: [row$5, styles$a.size]
+          style: [row$5, styles$b.size]
         }, /*#__PURE__*/React__namespace.createElement(View, {
-          style: [column$3, centered$2, fullWidth$3, styles$a.middleLeft]
+          style: [column$3, centered$2, fullWidth$3, styles$b.middleLeft]
         }, /*#__PURE__*/React__namespace.createElement(Icon, {
           style: primaryIconStyle,
           icon: icons[0],
           focused: focused
         })), /*#__PURE__*/React__namespace.createElement(View, {
-          style: [column$3, centered$2, fullWidth$3, styles$a.middleRight]
+          style: [column$3, centered$2, fullWidth$3, styles$b.middleRight]
         }, /*#__PURE__*/React__namespace.createElement(Icon, {
           style: secondaryIconStyle,
           icon: icons[1],
@@ -3865,17 +4366,17 @@ class MultiSymbolGrid extends React__namespace.Component {
         })));
       } else if (icons.length >= 3) {
         return /*#__PURE__*/React__namespace.createElement(View, {
-          style: [column$3, styles$a.size]
+          style: [column$3, styles$b.size]
         }, /*#__PURE__*/React__namespace.createElement(View, {
           style: row$5
         }, /*#__PURE__*/React__namespace.createElement(View, {
-          style: [centered$2, fullWidth$3, styles$a.topLeft]
+          style: [centered$2, fullWidth$3, styles$b.topLeft]
         }, /*#__PURE__*/React__namespace.createElement(Icon, {
           style: primaryIconStyle,
           icon: icons[0],
           focused: focused
         })), /*#__PURE__*/React__namespace.createElement(View, {
-          style: [centered$2, fullWidth$3, styles$a.topRight]
+          style: [centered$2, fullWidth$3, styles$b.topRight]
         }, /*#__PURE__*/React__namespace.createElement(Icon, {
           style: secondaryIconStyle,
           icon: icons[1],
@@ -3883,13 +4384,13 @@ class MultiSymbolGrid extends React__namespace.Component {
         }))), /*#__PURE__*/React__namespace.createElement(View, {
           style: row$5
         }, /*#__PURE__*/React__namespace.createElement(View, {
-          style: [centered$2, fullWidth$3, styles$a.bottomLeft]
+          style: [centered$2, fullWidth$3, styles$b.bottomLeft]
         }, /*#__PURE__*/React__namespace.createElement(Icon, {
           style: secondaryIconStyle,
           icon: icons[2],
           focused: focused
         })), /*#__PURE__*/React__namespace.createElement(View, {
-          style: [centered$2, fullWidth$3, styles$a.bottomRight]
+          style: [centered$2, fullWidth$3, styles$b.bottomRight]
         }, icons[3] && /*#__PURE__*/React__namespace.createElement(Icon, {
           style: secondaryIconStyle,
           icon: icons[3],
@@ -3902,7 +4403,7 @@ class MultiSymbolGrid extends React__namespace.Component {
 }
 const verticalInsetPx = 2;
 const horizontalInsetPx = 4;
-const styles$a = aphrodite.StyleSheet.create({
+const styles$b = aphrodite.StyleSheet.create({
   size: {
     height: iconSizeHeightPx,
     width: iconSizeWidthPx
@@ -3953,7 +4454,7 @@ class KeypadButton$1 extends React__namespace.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) {
         aphrodite.css(View.styles.initial, ...this._getFocusStyle(type));
         for (const borders of Object.values(BorderStyles)) {
           aphrodite.css(View.styles.initial, ...this._getButtonStyle(type, borders));
@@ -3962,45 +4463,45 @@ class KeypadButton$1 extends React__namespace.PureComponent {
     });
     _defineProperty(this, "_getFocusStyle", type => {
       let focusBackgroundStyle;
-      if (type === KeyType.INPUT_NAVIGATION || type === KeyType.KEYPAD_NAVIGATION) {
-        focusBackgroundStyle = styles$9.light;
+      if (type === "INPUT_NAVIGATION" || type === "KEYPAD_NAVIGATION") {
+        focusBackgroundStyle = styles$a.light;
       } else {
-        focusBackgroundStyle = styles$9.bright;
+        focusBackgroundStyle = styles$a.bright;
       }
-      return [styles$9.focusBox, focusBackgroundStyle];
+      return [styles$a.focusBox, focusBackgroundStyle];
     });
     _defineProperty(this, "_getButtonStyle", (type, borders, style) => {
       // Select the appropriate style for the button.
       let backgroundStyle;
       switch (type) {
-        case KeyType.EMPTY:
-          backgroundStyle = styles$9.empty;
+        case "EMPTY":
+          backgroundStyle = styles$a.empty;
           break;
-        case KeyType.MANY:
-        case KeyType.VALUE:
-          backgroundStyle = styles$9.value;
+        case "MANY":
+        case "VALUE":
+          backgroundStyle = styles$a.value;
           break;
-        case KeyType.OPERATOR:
-          backgroundStyle = styles$9.operator;
+        case "OPERATOR":
+          backgroundStyle = styles$a.operator;
           break;
-        case KeyType.INPUT_NAVIGATION:
-        case KeyType.KEYPAD_NAVIGATION:
-          backgroundStyle = styles$9.control;
+        case "INPUT_NAVIGATION":
+        case "KEYPAD_NAVIGATION":
+          backgroundStyle = styles$a.control;
           break;
-        case KeyType.ECHO:
+        case "ECHO":
           backgroundStyle = null;
           break;
       }
       const borderStyle = [];
       if (borders.includes(BorderDirection.LEFT)) {
         // @ts-expect-error TS2345
-        borderStyle.push(styles$9.leftBorder);
+        borderStyle.push(styles$a.leftBorder);
       }
       if (borders.includes(BorderDirection.BOTTOM)) {
         // @ts-expect-error TS2345
-        borderStyle.push(styles$9.bottomBorder);
+        borderStyle.push(styles$a.bottomBorder);
       }
-      return [styles$9.buttonBase, backgroundStyle, ...borderStyle, type === KeyType.ECHO && styles$9.echo, this.buttonSizeStyle,
+      return [styles$a.buttonBase, backgroundStyle, ...borderStyle, type === "ECHO" && styles$a.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
@@ -4042,10 +4543,10 @@ class KeypadButton$1 extends React__namespace.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];
+    const iconWrapperStyle = [styles$a.iconWrapper, disabled ? styles$a.disabled : undefined];
     const eventHandlers = {
       onTouchCancel,
       onTouchEnd,
@@ -4056,13 +4557,13 @@ class KeypadButton$1 extends React__namespace.PureComponent {
       style: focusStyle
     });
     const maybeCornerDecal = !renderFocused && !disabled && childKeys && childKeys.length > 0 && /*#__PURE__*/React__namespace.createElement(CornerDecal, {
-      style: styles$9.decalInset
+      style: styles$a.decalInset
     });
-    if (type === KeyType.EMPTY) {
+    if (type === "EMPTY") {
       return /*#__PURE__*/React__namespace.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 = {
@@ -4105,7 +4606,7 @@ _defineProperty(KeypadButton$1, "defaultProps", {
 });
 const focusInsetPx = 4;
 const focusBoxZIndex = 0;
-const styles$9 = aphrodite.StyleSheet.create({
+const styles$a = aphrodite.StyleSheet.create({
   buttonBase: {
     flex: 1,
     cursor: "pointer",
@@ -4258,7 +4759,7 @@ class TouchableKeypadButton extends React__namespace.Component {
       onTouchMove: evt => gestureManager.onTouchMove(evt),
       onTouchCancel: evt => gestureManager.onTouchCancel(evt)
     };
-    const styleWithAddons = [...(Array.isArray(style) ? style : [style]), styles$8.preventScrolls];
+    const styleWithAddons = [...(Array.isArray(style) ? style : [style]), styles$9.preventScrolls];
     return /*#__PURE__*/React__namespace.createElement(KeypadButton$2, _extends({
       ref: node => gestureManager.registerDOMNode(id, ReactDOM__default["default"].findDOMNode(node), childKeyIds),
       borders: borders,
@@ -4297,7 +4798,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 {
     ...rest,
     childKeyIds: childKeyIds,
@@ -4311,7 +4812,7 @@ const mapStateToProps$5 = (state, ownProps) => {
     ...extractProps(useFirstChildProps ? childKeys[0] : keyConfig)
   };
 };
-const styles$8 = aphrodite.StyleSheet.create({
+const styles$9 = aphrodite.StyleSheet.create({
   preventScrolls: {
     // Touch events that start in the touchable buttons shouldn't be
     // allowed to produce page scrolls.
@@ -4342,8 +4843,13 @@ class ManyKeypadButton extends React__namespace.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__namespace.createElement(TouchableKeypadButton$1, _extends({
         keyConfig: keyConfig
@@ -4360,50 +4866,69 @@ const IconAsset = function (_ref) {
     tintColor,
     type
   } = _ref;
-  if (type === "Geometry") {
-    return /*#__PURE__*/React__namespace.createElement("svg", {
-      width: "32",
-      height: "32",
-      viewBox: "0 0 32 32",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/React__namespace.createElement("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M7.57584 7.09442C7.92723 6.92984 8.3421 6.98339 8.64018 7.23179L26.6402 22.2318C26.9636 22.5013 27.0836 22.9446 26.9403 23.3404C26.7969 23.7363 26.421 24 26 24H8C7.44772 24 7 23.5523 7 23V8.00001C7 7.61199 7.22446 7.259 7.57584 7.09442ZM9 10.1351V17H13C13.5523 17 14 17.4477 14 18V22H23.238L9 10.1351ZM12 22V19H9V22H12Z",
-      fill: tintColor
-    }));
-  } else if (type === "Operators") {
-    return /*#__PURE__*/React__namespace.createElement("svg", {
-      width: "32",
-      height: "32",
-      viewBox: "0 0 32 32",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/React__namespace.createElement("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M29 6H30V7H29V6ZM27 6C27 4.89543 27.8954 4 29 4H30C31.1046 4 32 4.89543 32 6V7C32 8.10457 31.1046 9 30 9H29C27.8954 9 27 8.10457 27 7V6ZM11.1318 6.50386C11.3098 6.19229 11.6411 6 12 6H14C14.5523 6 15 6.44772 15 7C15 7.55228 14.5523 8 14 8H12.5803L8.86824 14.4961C8.68527 14.8163 8.34091 15.0098 7.97225 14.9996C7.6036 14.9894 7.2705 14.7771 7.10557 14.4472L5.10557 10.4472C4.85858 9.95324 5.05881 9.35256 5.55279 9.10557C6.04676 8.85858 6.64744 9.05881 6.89443 9.55279L8.0588 11.8815L11.1318 6.50386ZM7.70676 16.2925C8.09748 16.6829 8.09779 17.316 7.70745 17.7068C7.28543 18.1292 6.84383 18.7303 6.51157 19.3658C6.17039 20.0184 6 20.601 6 21C6 21.3789 6.17235 21.9897 6.51638 22.6649C6.85315 23.3259 7.28488 23.9121 7.66786 24.2557C8.07892 24.6246 8.11314 25.2568 7.74429 25.6679C7.37544 26.0789 6.7432 26.1131 6.33214 25.7443C5.7161 25.1915 5.14783 24.3844 4.73434 23.5728C4.32813 22.7755 3.99999 21.8345 4 21C4.00001 20.1391 4.3301 19.2217 4.73917 18.4392C5.15715 17.6397 5.71554 16.8708 6.29255 16.2932C6.68288 15.9025 7.31605 15.9022 7.70676 16.2925ZM11.2932 16.2925C11.684 15.9022 12.3171 15.9025 12.7075 16.2932C13.2845 16.8708 13.8428 17.6397 14.2608 18.4392C14.6699 19.2217 15 20.1391 15 21C15 21.8345 14.6719 22.7755 14.2657 23.5728C13.8522 24.3844 13.2839 25.1915 12.6679 25.7443C12.2568 26.1131 11.6246 26.0789 11.2557 25.6679C10.8869 25.2568 10.9211 24.6246 11.3321 24.2557C11.7151 23.9121 12.1469 23.3259 12.4836 22.6649C12.8276 21.9897 13 21.3789 13 21C13 20.601 12.8296 20.0184 12.4884 19.3658C12.1562 18.7303 11.7146 18.1292 11.2925 17.7068C10.9022 17.316 10.9025 16.6829 11.2932 16.2925ZM27.9363 17.6489C28.1302 18.166 27.8682 18.7424 27.3511 18.9363L21.848 21L27.3511 23.0637C27.8682 23.2576 28.1302 23.834 27.9363 24.3511C27.7424 24.8682 27.166 25.1302 26.6489 24.9363L18.6489 21.9363C18.2586 21.79 18 21.4168 18 21C18 20.5832 18.2586 20.21 18.6489 20.0637L26.6489 17.0637C27.166 16.8698 27.7424 17.1318 27.9363 17.6489ZM21 8V13H24V8H21ZM20 6C19.4477 6 19 6.44772 19 7V14C19 14.5523 19.4477 15 20 15H25C25.5523 15 26 14.5523 26 14V7C26 6.44772 25.5523 6 25 6H20Z",
-      fill: tintColor
-    }));
-  } else if (type === "Numbers") {
-    return /*#__PURE__*/React__namespace.createElement("svg", {
-      width: "32",
-      height: "32",
-      viewBox: "0 0 32 32",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/React__namespace.createElement("path", {
-      d: "M10.4123 19.5794V21.0004H4.71434V19.5794H6.73034V14.0214C6.73034 13.9001 6.73267 13.7764 6.73734 13.6504C6.742 13.5244 6.749 13.3961 6.75834 13.2654L5.42834 14.3714C5.335 14.4414 5.244 14.4858 5.15534 14.5044C5.06667 14.5231 4.98267 14.5254 4.90334 14.5114C4.824 14.4928 4.754 14.4648 4.69334 14.4274C4.63267 14.3854 4.586 14.3434 4.55334 14.3014L3.94434 13.4824L7.06634 10.8364H8.65534V19.5794H10.4123ZM18.7924 19.2294C19.0024 19.2294 19.1658 19.2878 19.2824 19.4044C19.4038 19.5211 19.4644 19.6751 19.4644 19.8664V21.0004H12.4224V20.3704C12.4224 20.2491 12.4481 20.1184 12.4994 19.9784C12.5508 19.8338 12.6371 19.7031 12.7584 19.5864L15.7684 16.5694C16.0251 16.3128 16.2514 16.0678 16.4474 15.8344C16.6434 15.5964 16.8068 15.3654 16.9374 15.1414C17.0681 14.9128 17.1661 14.6818 17.2314 14.4484C17.2968 14.2151 17.3294 13.9701 17.3294 13.7134C17.3294 13.2608 17.2128 12.9178 16.9794 12.6844C16.7461 12.4464 16.4171 12.3274 15.9924 12.3274C15.8058 12.3274 15.6331 12.3554 15.4744 12.4114C15.3204 12.4628 15.1804 12.5351 15.0544 12.6284C14.9331 12.7218 14.8281 12.8314 14.7394 12.9574C14.6508 13.0834 14.5854 13.2211 14.5434 13.3704C14.4594 13.6038 14.3451 13.7601 14.2004 13.8394C14.0604 13.9141 13.8598 13.9304 13.5984 13.8884L12.5764 13.7064C12.6511 13.2118 12.7911 12.7778 12.9964 12.4044C13.2018 12.0311 13.4584 11.7208 13.7664 11.4734C14.0744 11.2261 14.4268 11.0418 14.8234 10.9204C15.2201 10.7944 15.6471 10.7314 16.1044 10.7314C16.5851 10.7314 17.0214 10.8038 17.4134 10.9484C17.8101 11.0884 18.1484 11.2868 18.4284 11.5434C18.7084 11.7954 18.9254 12.1011 19.0794 12.4604C19.2334 12.8198 19.3104 13.2164 19.3104 13.6504C19.3104 14.0238 19.2568 14.3691 19.1494 14.6864C19.0421 15.0038 18.8951 15.3071 18.7084 15.5964C18.5264 15.8811 18.3141 16.1588 18.0714 16.4294C17.8288 16.7001 17.5721 16.9731 17.3014 17.2484L15.1454 19.4534C15.3834 19.3834 15.6191 19.3298 15.8524 19.2924C16.0858 19.2504 16.3051 19.2294 16.5104 19.2294H18.7924ZM21.4535 13.7064C21.5282 13.2118 21.6682 12.7778 21.8735 12.4044C22.0789 12.0311 22.3355 11.7208 22.6435 11.4734C22.9515 11.2261 23.3015 11.0418 23.6935 10.9204C24.0902 10.7944 24.5172 10.7314 24.9745 10.7314C25.4599 10.7314 25.8939 10.8014 26.2765 10.9414C26.6639 11.0768 26.9905 11.2634 27.2565 11.5014C27.5225 11.7394 27.7255 12.0171 27.8655 12.3344C28.0102 12.6518 28.0825 12.9924 28.0825 13.3564C28.0825 13.6784 28.0475 13.9631 27.9775 14.2104C27.9122 14.4531 27.8119 14.6654 27.6765 14.8474C27.5459 15.0294 27.3825 15.1834 27.1865 15.3094C26.9952 15.4354 26.7735 15.5404 26.5215 15.6244C27.6882 16.0071 28.2715 16.7841 28.2715 17.9554C28.2715 18.4734 28.1759 18.9308 27.9845 19.3274C27.7932 19.7194 27.5365 20.0484 27.2145 20.3144C26.8925 20.5804 26.5169 20.7811 26.0875 20.9164C25.6629 21.0471 25.2172 21.1124 24.7505 21.1124C24.2559 21.1124 23.8195 21.0564 23.4415 20.9444C23.0635 20.8324 22.7299 20.6644 22.4405 20.4404C22.1559 20.2164 21.9109 19.9364 21.7055 19.6004C21.5002 19.2598 21.3205 18.8631 21.1665 18.4104L22.0205 18.0604C22.2445 17.9671 22.4522 17.9414 22.6435 17.9834C22.8395 18.0254 22.9795 18.1281 23.0635 18.2914C23.1569 18.4688 23.2549 18.6321 23.3575 18.7814C23.4649 18.9308 23.5839 19.0614 23.7145 19.1734C23.8452 19.2808 23.9922 19.3648 24.1555 19.4254C24.3235 19.4861 24.5149 19.5164 24.7295 19.5164C25.0002 19.5164 25.2359 19.4721 25.4365 19.3834C25.6372 19.2948 25.8052 19.1804 25.9405 19.0404C26.0759 18.8958 26.1762 18.7348 26.2415 18.5574C26.3115 18.3754 26.3465 18.1958 26.3465 18.0184C26.3465 17.7851 26.3255 17.5751 26.2835 17.3884C26.2415 17.1971 26.1435 17.0361 25.9895 16.9054C25.8402 16.7701 25.6162 16.6674 25.3175 16.5974C25.0235 16.5228 24.6222 16.4854 24.1135 16.4854V15.1274C24.5382 15.1274 24.8859 15.0924 25.1565 15.0224C25.4272 14.9524 25.6395 14.8544 25.7935 14.7284C25.9475 14.6024 26.0525 14.4508 26.1085 14.2734C26.1692 14.0961 26.1995 13.9024 26.1995 13.6924C26.1995 13.2491 26.0829 12.9108 25.8495 12.6774C25.6209 12.4441 25.2942 12.3274 24.8695 12.3274C24.6829 12.3274 24.5102 12.3554 24.3515 12.4114C24.1975 12.4628 24.0575 12.5351 23.9315 12.6284C23.8102 12.7218 23.7052 12.8314 23.6165 12.9574C23.5279 13.0834 23.4625 13.2211 23.4205 13.3704C23.3319 13.6038 23.2175 13.7601 23.0775 13.8394C22.9375 13.9141 22.7345 13.9304 22.4685 13.8884L21.4535 13.7064Z",
-      fill: tintColor
-    }));
+  switch (type) {
+    case "Geometry":
+      {
+        return /*#__PURE__*/React__namespace.createElement("svg", {
+          width: "32",
+          height: "32",
+          viewBox: "0 0 32 32",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg"
+        }, /*#__PURE__*/React__namespace.createElement("path", {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M7.57584 7.09442C7.92723 6.92984 8.3421 6.98339 8.64018 7.23179L26.6402 22.2318C26.9636 22.5013 27.0836 22.9446 26.9403 23.3404C26.7969 23.7363 26.421 24 26 24H8C7.44772 24 7 23.5523 7 23V8.00001C7 7.61199 7.22446 7.259 7.57584 7.09442ZM9 10.1351V17H13C13.5523 17 14 17.4477 14 18V22H23.238L9 10.1351ZM12 22V19H9V22H12Z",
+          fill: tintColor
+        }));
+      }
+    case "Operators":
+      {
+        return /*#__PURE__*/React__namespace.createElement("svg", {
+          viewBox: "0 0 32 32",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg"
+        }, /*#__PURE__*/React__namespace.createElement("path", {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M29 6H30V7H29V6ZM27 6C27 4.89543 27.8954 4 29 4H30C31.1046 4 32 4.89543 32 6V7C32 8.10457 31.1046 9 30 9H29C27.8954 9 27 8.10457 27 7V6ZM11.1318 6.50386C11.3098 6.19229 11.6411 6 12 6H14C14.5523 6 15 6.44772 15 7C15 7.55228 14.5523 8 14 8H12.5803L8.86824 14.4961C8.68527 14.8163 8.34091 15.0098 7.97225 14.9996C7.6036 14.9894 7.2705 14.7771 7.10557 14.4472L5.10557 10.4472C4.85858 9.95324 5.05881 9.35256 5.55279 9.10557C6.04676 8.85858 6.64744 9.05881 6.89443 9.55279L8.0588 11.8815L11.1318 6.50386ZM7.70676 16.2925C8.09748 16.6829 8.09779 17.316 7.70745 17.7068C7.28543 18.1292 6.84383 18.7303 6.51157 19.3658C6.17039 20.0184 6 20.601 6 21C6 21.3789 6.17235 21.9897 6.51638 22.6649C6.85315 23.3259 7.28488 23.9121 7.66786 24.2557C8.07892 24.6246 8.11314 25.2568 7.74429 25.6679C7.37544 26.0789 6.7432 26.1131 6.33214 25.7443C5.7161 25.1915 5.14783 24.3844 4.73434 23.5728C4.32813 22.7755 3.99999 21.8345 4 21C4.00001 20.1391 4.3301 19.2217 4.73917 18.4392C5.15715 17.6397 5.71554 16.8708 6.29255 16.2932C6.68288 15.9025 7.31605 15.9022 7.70676 16.2925ZM11.2932 16.2925C11.684 15.9022 12.3171 15.9025 12.7075 16.2932C13.2845 16.8708 13.8428 17.6397 14.2608 18.4392C14.6699 19.2217 15 20.1391 15 21C15 21.8345 14.6719 22.7755 14.2657 23.5728C13.8522 24.3844 13.2839 25.1915 12.6679 25.7443C12.2568 26.1131 11.6246 26.0789 11.2557 25.6679C10.8869 25.2568 10.9211 24.6246 11.3321 24.2557C11.7151 23.9121 12.1469 23.3259 12.4836 22.6649C12.8276 21.9897 13 21.3789 13 21C13 20.601 12.8296 20.0184 12.4884 19.3658C12.1562 18.7303 11.7146 18.1292 11.2925 17.7068C10.9022 17.316 10.9025 16.6829 11.2932 16.2925ZM27.9363 17.6489C28.1302 18.166 27.8682 18.7424 27.3511 18.9363L21.848 21L27.3511 23.0637C27.8682 23.2576 28.1302 23.834 27.9363 24.3511C27.7424 24.8682 27.166 25.1302 26.6489 24.9363L18.6489 21.9363C18.2586 21.79 18 21.4168 18 21C18 20.5832 18.2586 20.21 18.6489 20.0637L26.6489 17.0637C27.166 16.8698 27.7424 17.1318 27.9363 17.6489ZM21 8V13H24V8H21ZM20 6C19.4477 6 19 6.44772 19 7V14C19 14.5523 19.4477 15 20 15H25C25.5523 15 26 14.5523 26 14V7C26 6.44772 25.5523 6 25 6H20Z",
+          fill: tintColor
+        }));
+      }
+    case "Numbers":
+      {
+        return /*#__PURE__*/React__namespace.createElement("svg", {
+          width: "32",
+          height: "32",
+          viewBox: "0 0 32 32",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg"
+        }, /*#__PURE__*/React__namespace.createElement("path", {
+          d: "M10.4123 19.5794V21.0004H4.71434V19.5794H6.73034V14.0214C6.73034 13.9001 6.73267 13.7764 6.73734 13.6504C6.742 13.5244 6.749 13.3961 6.75834 13.2654L5.42834 14.3714C5.335 14.4414 5.244 14.4858 5.15534 14.5044C5.06667 14.5231 4.98267 14.5254 4.90334 14.5114C4.824 14.4928 4.754 14.4648 4.69334 14.4274C4.63267 14.3854 4.586 14.3434 4.55334 14.3014L3.94434 13.4824L7.06634 10.8364H8.65534V19.5794H10.4123ZM18.7924 19.2294C19.0024 19.2294 19.1658 19.2878 19.2824 19.4044C19.4038 19.5211 19.4644 19.6751 19.4644 19.8664V21.0004H12.4224V20.3704C12.4224 20.2491 12.4481 20.1184 12.4994 19.9784C12.5508 19.8338 12.6371 19.7031 12.7584 19.5864L15.7684 16.5694C16.0251 16.3128 16.2514 16.0678 16.4474 15.8344C16.6434 15.5964 16.8068 15.3654 16.9374 15.1414C17.0681 14.9128 17.1661 14.6818 17.2314 14.4484C17.2968 14.2151 17.3294 13.9701 17.3294 13.7134C17.3294 13.2608 17.2128 12.9178 16.9794 12.6844C16.7461 12.4464 16.4171 12.3274 15.9924 12.3274C15.8058 12.3274 15.6331 12.3554 15.4744 12.4114C15.3204 12.4628 15.1804 12.5351 15.0544 12.6284C14.9331 12.7218 14.8281 12.8314 14.7394 12.9574C14.6508 13.0834 14.5854 13.2211 14.5434 13.3704C14.4594 13.6038 14.3451 13.7601 14.2004 13.8394C14.0604 13.9141 13.8598 13.9304 13.5984 13.8884L12.5764 13.7064C12.6511 13.2118 12.7911 12.7778 12.9964 12.4044C13.2018 12.0311 13.4584 11.7208 13.7664 11.4734C14.0744 11.2261 14.4268 11.0418 14.8234 10.9204C15.2201 10.7944 15.6471 10.7314 16.1044 10.7314C16.5851 10.7314 17.0214 10.8038 17.4134 10.9484C17.8101 11.0884 18.1484 11.2868 18.4284 11.5434C18.7084 11.7954 18.9254 12.1011 19.0794 12.4604C19.2334 12.8198 19.3104 13.2164 19.3104 13.6504C19.3104 14.0238 19.2568 14.3691 19.1494 14.6864C19.0421 15.0038 18.8951 15.3071 18.7084 15.5964C18.5264 15.8811 18.3141 16.1588 18.0714 16.4294C17.8288 16.7001 17.5721 16.9731 17.3014 17.2484L15.1454 19.4534C15.3834 19.3834 15.6191 19.3298 15.8524 19.2924C16.0858 19.2504 16.3051 19.2294 16.5104 19.2294H18.7924ZM21.4535 13.7064C21.5282 13.2118 21.6682 12.7778 21.8735 12.4044C22.0789 12.0311 22.3355 11.7208 22.6435 11.4734C22.9515 11.2261 23.3015 11.0418 23.6935 10.9204C24.0902 10.7944 24.5172 10.7314 24.9745 10.7314C25.4599 10.7314 25.8939 10.8014 26.2765 10.9414C26.6639 11.0768 26.9905 11.2634 27.2565 11.5014C27.5225 11.7394 27.7255 12.0171 27.8655 12.3344C28.0102 12.6518 28.0825 12.9924 28.0825 13.3564C28.0825 13.6784 28.0475 13.9631 27.9775 14.2104C27.9122 14.4531 27.8119 14.6654 27.6765 14.8474C27.5459 15.0294 27.3825 15.1834 27.1865 15.3094C26.9952 15.4354 26.7735 15.5404 26.5215 15.6244C27.6882 16.0071 28.2715 16.7841 28.2715 17.9554C28.2715 18.4734 28.1759 18.9308 27.9845 19.3274C27.7932 19.7194 27.5365 20.0484 27.2145 20.3144C26.8925 20.5804 26.5169 20.7811 26.0875 20.9164C25.6629 21.0471 25.2172 21.1124 24.7505 21.1124C24.2559 21.1124 23.8195 21.0564 23.4415 20.9444C23.0635 20.8324 22.7299 20.6644 22.4405 20.4404C22.1559 20.2164 21.9109 19.9364 21.7055 19.6004C21.5002 19.2598 21.3205 18.8631 21.1665 18.4104L22.0205 18.0604C22.2445 17.9671 22.4522 17.9414 22.6435 17.9834C22.8395 18.0254 22.9795 18.1281 23.0635 18.2914C23.1569 18.4688 23.2549 18.6321 23.3575 18.7814C23.4649 18.9308 23.5839 19.0614 23.7145 19.1734C23.8452 19.2808 23.9922 19.3648 24.1555 19.4254C24.3235 19.4861 24.5149 19.5164 24.7295 19.5164C25.0002 19.5164 25.2359 19.4721 25.4365 19.3834C25.6372 19.2948 25.8052 19.1804 25.9405 19.0404C26.0759 18.8958 26.1762 18.7348 26.2415 18.5574C26.3115 18.3754 26.3465 18.1958 26.3465 18.0184C26.3465 17.7851 26.3255 17.5751 26.2835 17.3884C26.2415 17.1971 26.1435 17.0361 25.9895 16.9054C25.8402 16.7701 25.6162 16.6674 25.3175 16.5974C25.0235 16.5228 24.6222 16.4854 24.1135 16.4854V15.1274C24.5382 15.1274 24.8859 15.0924 25.1565 15.0224C25.4272 14.9524 25.6395 14.8544 25.7935 14.7284C25.9475 14.6024 26.0525 14.4508 26.1085 14.2734C26.1692 14.0961 26.1995 13.9024 26.1995 13.6924C26.1995 13.2491 26.0829 12.9108 25.8495 12.6774C25.6209 12.4441 25.2942 12.3274 24.8695 12.3274C24.6829 12.3274 24.5102 12.3554 24.3515 12.4114C24.1975 12.4628 24.0575 12.5351 23.9315 12.6284C23.8102 12.7218 23.7052 12.8314 23.6165 12.9574C23.5279 13.0834 23.4625 13.2211 23.4205 13.3704C23.3319 13.6038 23.2175 13.7601 23.0775 13.8394C22.9375 13.9141 22.7345 13.9304 22.4685 13.8884L21.4535 13.7064Z",
+          fill: tintColor
+        }));
+      }
+    case "Extras":
+      {
+        return /*#__PURE__*/React__namespace.createElement("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "20",
+          height: "20",
+          fill: "currentColor",
+          viewBox: "0 0 256 256"
+        }, /*#__PURE__*/React__namespace.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"
+        }));
+      }
+    default:
+      {
+        // type as never;
+        throw new Error("Invalid icon type");
+      }
   }
-
-  // type as never;
-  throw new Error("Invalid icon type");
 };
 
-const styles$7 = aphrodite.StyleSheet.create({
+const styles$8 = aphrodite.StyleSheet.create({
   base: {
     display: "flex",
     width: 44,
@@ -4467,7 +4992,8 @@ class TabbarItem extends React__namespace.Component {
     } = this.props;
     return /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
       onClick: onClick,
-      disabled: itemState === "disabled"
+      disabled: itemState === "disabled",
+      "aria-label": itemType
     }, _ref => {
       let {
         hovered,
@@ -4476,14 +5002,14 @@ class TabbarItem extends React__namespace.Component {
       } = _ref;
       const tintColor = imageTintColor(itemState, hovered, focused, pressed);
       return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-        style: [styles$7.base, itemState !== "disabled" && hovered && styles$7.hovered, focused && styles$7.focused, pressed && styles$7.pressed]
+        style: [styles$8.base, itemState !== "disabled" && hovered && styles$8.hovered, focused && styles$8.focused, pressed && styles$8.pressed]
       }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-        style: [styles$7.innerBox, pressed && styles$7.innerBoxPressed]
+        style: [styles$8.innerBox, pressed && styles$8.innerBoxPressed]
       }, /*#__PURE__*/React__namespace.createElement(IconAsset, {
         type: itemType,
         tintColor: tintColor
       })), itemState === "active" && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-        style: [styles$7.activeIndicator, {
+        style: [styles$8.activeIndicator, {
           backgroundColor: tintColor
         }]
       }));
@@ -4491,43 +5017,31 @@ class TabbarItem extends React__namespace.Component {
   }
 }
 
-const styles$6 = aphrodite.StyleSheet.create({
+const styles$7 = aphrodite.StyleSheet.create({
   tabbar: {
     display: "flex",
     flexDirection: "row",
-    background: Color__default["default"].offWhite,
     paddingTop: 2,
-    paddingBottom: 2,
-    borderTop: "1px solid ".concat(Color__default["default"].offBlack50),
-    borderBottom: "1px solid ".concat(Color__default["default"].offBlack50)
+    paddingBottom: 2
   }
 });
-class Tabbar extends React__namespace.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      selectedItem: 0
-    });
-  }
-  render() {
-    const {
-      items,
-      onSelect
-    } = this.props;
-    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$6.tabbar
-    }, items.map((item, index) => /*#__PURE__*/React__namespace.createElement(TabbarItem, {
-      key: "tabbar-item-".concat(index),
-      itemState: index === this.state.selectedItem ? "active" : "inactive",
-      itemType: item,
-      onClick: () => {
-        this.setState({
-          selectedItem: index
-        });
-        onSelect(item);
-      }
-    })));
-  }
+function Tabbar(props) {
+  const {
+    items,
+    selectedItem,
+    onSelectItem,
+    style
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles$7.tabbar, style]
+  }, items.map(item => /*#__PURE__*/React__namespace.createElement(TabbarItem, {
+    key: "tabbar-item-".concat(item),
+    itemState: item === selectedItem ? "active" : "inactive",
+    itemType: item,
+    onClick: () => {
+      onSelectItem(item);
+    }
+  })));
 }
 
 /**
@@ -4576,7 +5090,7 @@ class Echo extends React__namespace.Component {
       style: containerStyle
     }, /*#__PURE__*/React__namespace.createElement(KeypadButton$2, {
       icon: icon,
-      type: KeyType.ECHO
+      type: "ECHO"
     }));
   }
 }
@@ -4666,7 +5180,7 @@ class MultiSymbolPopover extends React__namespace.Component {
     // TODO(charlie): We have to require this lazily because of a cyclic
     // dependence in our components.
     return /*#__PURE__*/React__namespace.createElement(View, {
-      style: styles$5.container
+      style: styles$6.container
     }, keys.map(key => {
       return /*#__PURE__*/React__namespace.createElement(TouchableKeypadButton$1, {
         keyConfig: key,
@@ -4675,7 +5189,7 @@ class MultiSymbolPopover extends React__namespace.Component {
     }));
   }
 }
-const styles$5 = aphrodite.StyleSheet.create({
+const styles$6 = aphrodite.StyleSheet.create({
   container: {
     flexDirection: "column-reverse",
     position: "relative",
@@ -4795,18 +5309,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",
@@ -4973,31 +5475,33 @@ class TwoPageKeypad extends React__namespace.Component {
     } = this.state;
     if (paginationEnabled) {
       return /*#__PURE__*/React__namespace.createElement(Keypad$2, {
-        style: [column$2, styles$4.keypad]
+        style: [column$2, styles$5.keypad]
       }, /*#__PURE__*/React__namespace.createElement(Tabbar, {
         items: ["Numbers", "Operators"],
-        onSelect: selectedItem => {
+        selectedItem: selectedPage,
+        onSelectItem: selectedItem => {
           this.setState({
             selectedPage: selectedItem
           });
-        }
+        },
+        style: styles$5.tabbar
       }), /*#__PURE__*/React__namespace.createElement(View, {
-        style: styles$4.borderTop
+        style: styles$5.borderTop
       }, selectedPage === "Numbers" && rightPage, selectedPage === "Operators" && leftPage));
     } else {
       return /*#__PURE__*/React__namespace.createElement(Keypad$2, {
-        style: styles$4.keypad
+        style: styles$5.keypad
       }, /*#__PURE__*/React__namespace.createElement(View, {
         style: row$4
       }, /*#__PURE__*/React__namespace.createElement(View, {
         style: fullWidth$2
       }, leftPage), /*#__PURE__*/React__namespace.createElement(View, {
-        style: [styles$4.borderLeft, fullWidth$2]
+        style: [styles$5.borderLeft, fullWidth$2]
       }, rightPage)));
     }
   }
 }
-const styles$4 = aphrodite.StyleSheet.create({
+const styles$5 = aphrodite.StyleSheet.create({
   keypad: {
     // Set the background to light grey, so that when the user drags the
     // keypad pages past the edges, there's a grey backdrop.
@@ -5009,6 +5513,11 @@ const styles$4 = aphrodite.StyleSheet.create({
   borderLeft: {
     borderLeft: "".concat(innerBorderWidthPx, "px ").concat(innerBorderStyle, " ") + "".concat(innerBorderColor),
     boxSizing: "content-box"
+  },
+  tabbar: {
+    background: Color__default["default"].offWhite,
+    borderTop: "1px solid ".concat(Color__default["default"].offBlack50),
+    borderBottom: "1px solid ".concat(Color__default["default"].offBlack50)
   }
 });
 const mapStateToProps$3 = state => {
@@ -5078,7 +5587,7 @@ class ExpressionKeypad extends React__namespace.Component {
     } else {
       dismissOrJumpOutKey = KeyConfigs.DISMISS;
     }
-    const rightPageStyle = [row$3, fullWidth$1, styles$3.rightPage, roundTopRight && roundedTopRight$1];
+    const rightPageStyle = [row$3, fullWidth$1, styles$4.rightPage, roundTopRight && roundedTopRight$1];
     const rightPage = /*#__PURE__*/React__namespace.createElement(View, {
       style: rightPageStyle
     }, /*#__PURE__*/React__namespace.createElement(View, {
@@ -5150,7 +5659,7 @@ class ExpressionKeypad extends React__namespace.Component {
       keyConfig: dismissOrJumpOutKey,
       borders: BorderStyles.LEFT
     })));
-    const leftPageStyle = [row$3, fullWidth$1, styles$3.leftPage, roundTopLeft && roundedTopLeft$2];
+    const leftPageStyle = [row$3, fullWidth$1, styles$4.leftPage, roundTopLeft && roundedTopLeft$2];
     const leftPage = /*#__PURE__*/React__namespace.createElement(View, {
       style: leftPageStyle
     }, /*#__PURE__*/React__namespace.createElement(View, {
@@ -5230,7 +5739,7 @@ class ExpressionKeypad extends React__namespace.Component {
     });
   }
 }
-const styles$3 = aphrodite.StyleSheet.create({
+const styles$4 = aphrodite.StyleSheet.create({
   // NOTE(charlie): These backgrounds are applied to as to fill in some
   // unfortunate 'cracks' in the layout. However, not all keys in the first
   // page use this background color (namely, the 'command' keys, backspace and
@@ -5406,7 +5915,7 @@ class NavigationPad extends React__namespace.Component {
       roundTopLeft,
       style
     } = this.props;
-    const containerStyle = [column, centered$1, styles$2.container, roundTopLeft && roundedTopLeft, ...(Array.isArray(style) ? style : [style])];
+    const containerStyle = [column, centered$1, styles$3.container, roundTopLeft && roundedTopLeft, ...(Array.isArray(style) ? style : [style])];
     return /*#__PURE__*/React__namespace.createElement(View, {
       style: containerStyle
     }, /*#__PURE__*/React__namespace.createElement(View, {
@@ -5414,32 +5923,32 @@ class NavigationPad extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement(TouchableKeypadButton$1, {
       keyConfig: KeyConfigs.UP,
       borders: BorderStyles.NONE,
-      style: [styles$2.navigationKey, styles$2.topArrow]
+      style: [styles$3.navigationKey, styles$3.topArrow]
     })), /*#__PURE__*/React__namespace.createElement(View, {
       style: [row$1, centered$1, stretch]
     }, /*#__PURE__*/React__namespace.createElement(TouchableKeypadButton$1, {
       keyConfig: KeyConfigs.LEFT,
       borders: BorderStyles.NONE,
-      style: [styles$2.navigationKey, styles$2.leftArrow]
+      style: [styles$3.navigationKey, styles$3.leftArrow]
     }), /*#__PURE__*/React__namespace.createElement(View, {
-      style: styles$2.horizontalSpacer
+      style: styles$3.horizontalSpacer
     }), /*#__PURE__*/React__namespace.createElement(TouchableKeypadButton$1, {
       keyConfig: KeyConfigs.RIGHT,
       borders: BorderStyles.NONE,
-      style: [styles$2.navigationKey, styles$2.rightArrow]
+      style: [styles$3.navigationKey, styles$3.rightArrow]
     })), /*#__PURE__*/React__namespace.createElement(View, {
       style: [row$1, centered$1]
     }, /*#__PURE__*/React__namespace.createElement(TouchableKeypadButton$1, {
       keyConfig: KeyConfigs.DOWN,
       borders: BorderStyles.NONE,
-      style: [styles$2.navigationKey, styles$2.bottomArrow]
+      style: [styles$3.navigationKey, styles$3.bottomArrow]
     })));
   }
 }
 const buttonSizePx = 48;
 const borderRadiusPx = 4;
 const borderWidthPx$1 = 1;
-const styles$2 = aphrodite.StyleSheet.create({
+const styles$3 = aphrodite.StyleSheet.create({
   container: {
     backgroundColor: controlGrey,
     width: navigationPadWidthPx
@@ -5612,8 +6121,8 @@ class KeypadContainer extends React__namespace.Component {
         ...inlineStyles.invisible
       };
     }
-    const keypadContainerStyle = [row, centered, fullWidth, styles$1.keypadContainer, ...(Array.isArray(style) ? style : [style])];
-    const keypadStyle = [row, styles$1.keypadBorder, layoutMode === LayoutMode.FULLSCREEN ? styles$1.fullscreen : styles$1.compact];
+    const keypadContainerStyle = [row, centered, fullWidth, styles$2.keypadContainer, ...(Array.isArray(style) ? style : [style])];
+    const keypadStyle = [row, styles$2.keypadBorder, layoutMode === LayoutMode.FULLSCREEN ? styles$2.fullscreen : styles$2.compact];
 
     // TODO(charlie): When the keypad is shorter than the width of the
     // screen, add a border on its left and right edges, and round out the
@@ -5632,15 +6141,15 @@ class KeypadContainer extends React__namespace.Component {
       }
     }, navigationPadEnabled && /*#__PURE__*/React__namespace.createElement(NavigationPad, {
       roundTopLeft: layoutMode === LayoutMode.COMPACT,
-      style: styles$1.navigationPadContainer
+      style: styles$2.navigationPadContainer
     }), /*#__PURE__*/React__namespace.createElement(View, {
-      style: styles$1.keypadLayout
+      style: styles$2.keypadLayout
     }, this.renderKeypad())));
   }
 }
 const keypadAnimationDurationMs = 300;
 const borderWidthPx = 1;
-const styles$1 = aphrodite.StyleSheet.create({
+const styles$2 = aphrodite.StyleSheet.create({
   keypadContainer: {
     bottom: 0,
     left: 0,
@@ -5910,7 +6419,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 || _this$handlers$onSwip === void 0 ? 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
@@ -5923,6 +6433,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.
@@ -5930,7 +6441,7 @@ class GestureStateMachine {
           touchId,
           startX
         };
-        this.handlers.onSwipeChange(pageX - this.swipeState.startX);
+        (_this$handlers$onSwip2 = (_this$handlers2 = this.handlers).onSwipeChange) === null || _this$handlers$onSwip2 === void 0 ? void 0 : _this$handlers$onSwip2.call(_this$handlers2, pageX - this.swipeState.startX);
       } else {
         const id = getId();
         if (id !== activeNodeId) {
@@ -5953,7 +6464,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 || _this$handlers$onSwip3 === void 0 ? void 0 : _this$handlers$onSwip3.call(_this$handlers3, pageX - this.swipeState.startX);
         this.swipeState = null;
       }
     } else if (this.touchState[touchId]) {
@@ -5987,7 +6499,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 || _this$handlers$onSwip4 === void 0 ? void 0 : _this$handlers$onSwip4.call(_this$handlers4, 0);
         this.swipeState = null;
       }
     } else if (this.touchState[touchId]) {
@@ -6365,7 +6878,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
    */
@@ -6392,7 +6905,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) {
@@ -6410,7 +6923,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) {
@@ -6426,7 +6939,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) {
@@ -6494,7 +7007,7 @@ const echoReducer = function () {
 
       // 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 {
           ...state,
           echoes: [...state.echoes, {
@@ -6536,7 +7049,7 @@ const inputReducer = function () {
       };
     case "PressKey":
       const keyConfig = KeyConfigs[action.key];
-      if (keyConfig.type !== KeyType.KEYPAD_NAVIGATION) {
+      if (keyConfig.type !== "KEYPAD_NAVIGATION") {
         var _state$keyHandler;
         // This is probably an anti-pattern but it works for the
         // case where we don't actually control the state but we
@@ -6566,7 +7079,7 @@ const keypadForType = {
 };
 
 const initialKeypadState = {
-  extraKeys: ["x", "y", Keys.THETA, Keys.PI],
+  extraKeys: ["x", "y", "THETA", "PI"],
   keypadType: defaultKeypadType,
   active: false
 };
@@ -6600,7 +7113,7 @@ const keypadReducer = function () {
       // 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"
         });
@@ -6850,19 +7363,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,
@@ -6988,7 +7495,7 @@ class ProvidedKeypad extends React__namespace.Component {
   }
 }
 
-const styles = aphrodite.StyleSheet.create({
+const styles$1 = aphrodite.StyleSheet.create({
   base: {
     display: "flex",
     justifyContent: "center",
@@ -7043,6 +7550,7 @@ class Button extends React__namespace.Component {
   render() {
     const {
       onPress,
+      ariaLabel,
       children,
       style,
       tintColor
@@ -7051,7 +7559,8 @@ class Button extends React__namespace.Component {
       style: style
     }, /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
       onClick: onPress,
-      style: styles.clickable
+      style: styles$1.clickable,
+      "aria-label": ariaLabel
     }, _ref => {
       let {
         hovered,
@@ -7059,11 +7568,11 @@ class Button extends React__namespace.Component {
         pressed
       } = _ref;
       return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-        style: [styles.outerBoxBase, hovered && styles.outerBoxHover, pressed && styles.outerBoxPressed]
+        style: [styles$1.outerBoxBase, hovered && styles$1.outerBoxHover, pressed && styles$1.outerBoxPressed]
       }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-        style: [styles.base, tintColor != null ? {
+        style: [styles$1.base, tintColor != null ? {
           background: tintColor
-        } : undefined, hovered && styles.hovered, focused && styles.focused, pressed && styles.pressed]
+        } : undefined, hovered && styles$1.hovered, focused && styles$1.focused, pressed && styles$1.pressed]
       }, children));
     }));
   }
@@ -7081,9 +7590,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(_ref) {
   let {
     id
@@ -7229,84 +7735,94 @@ function ButtonAsset(_ref) {
       }));
     case "MINUS":
       return /*#__PURE__*/React__namespace.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__namespace.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__namespace.createElement("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "20",
+          height: "20",
+          fill: "currentColor",
+          viewBox: "0 0 256 256"
+        }, /*#__PURE__*/React__namespace.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__namespace.createElement("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "20",
+          height: "20",
+          fill: "#000000",
+          viewBox: "0 0 256 256"
+        }, /*#__PURE__*/React__namespace.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__namespace.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__namespace.createElement("path", {
-        d: "M27 20H13",
-        stroke: "#21242C",
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }), /*#__PURE__*/React__namespace.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__namespace.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__namespace.createElement("path", {
-        d: "M24.9498 24.9493L15.0503 15.0498",
-        stroke: "#21242C",
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }), /*#__PURE__*/React__namespace.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__namespace.createElement("svg", {
-        width: "40",
-        height: "40",
-        viewBox: "0 0 40 40",
+        width: "48",
+        height: "48",
+        viewBox: "0 0 48 48"
+      }, /*#__PURE__*/React__namespace.createElement("g", {
         fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
+        fillRule: "evenodd"
       }, /*#__PURE__*/React__namespace.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__namespace.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__namespace.createElement("g", {
+        transform: "translate(12 12)"
       }, /*#__PURE__*/React__namespace.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__namespace.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__namespace.createElement("rect", {
+        fill: "currentColor",
+        x: "2",
+        y: "11",
+        width: "20",
+        height: "2",
+        rx: "1"
+      }), /*#__PURE__*/React__namespace.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__namespace.createElement("svg", {
         width: "40",
@@ -7333,26 +7849,23 @@ function ButtonAsset(_ref) {
         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__namespace.createElement("svg", {
-        width: "40",
-        height: "40",
-        viewBox: "0 0 40 40",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
-      }, /*#__PURE__*/React__namespace.createElement("g", {
-        clipPath: "url(#clip0)"
-      }, /*#__PURE__*/React__namespace.createElement("circle", {
-        cx: "20",
-        cy: "20",
-        r: "1.5",
-        fill: "#21242C"
-      })), /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
-        id: "clip0"
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        fill: "currentColor",
+        viewBox: "0 0 256 256"
       }, /*#__PURE__*/React__namespace.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__namespace.createElement("svg", {
         width: "40",
@@ -7367,6 +7880,38 @@ function ButtonAsset(_ref) {
         fill: "#21242C"
       }));
     case "SQRT":
+      return /*#__PURE__*/React__namespace.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        fill: "currentColor",
+        viewBox: "0 0 256 256"
+      }, /*#__PURE__*/React__namespace.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__namespace.createElement("svg", {
+        width: "48",
+        height: "48",
+        viewBox: "0 0 48 48"
+      }, /*#__PURE__*/React__namespace.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd",
+        transform: "translate(0, -4)"
+      }, /*#__PURE__*/React__namespace.createElement("path", {
+        fill: "none",
+        d: "M0 0h48v48H0z"
+      }), /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M14 29l4 6 9-14h7"
+      })));
+    case "EXP":
       return /*#__PURE__*/React__namespace.createElement("svg", {
         width: "40",
         height: "40",
@@ -7374,11 +7919,10 @@ function ButtonAsset(_ref) {
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg"
       }, /*#__PURE__*/React__namespace.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__namespace.createElement("svg", {
@@ -7393,25 +7937,20 @@ function ButtonAsset(_ref) {
         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__namespace.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__namespace.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__namespace.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__namespace.createElement("span", null, "x");
     case "TAN":
       return /*#__PURE__*/React__namespace.createElement("svg", {
         width: "40",
@@ -7445,7 +7984,334 @@ function ButtonAsset(_ref) {
         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__namespace.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        fill: "currentColor",
+        viewBox: "0 0 256 256"
+      }, /*#__PURE__*/React__namespace.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__namespace.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        fill: "currentColor",
+        viewBox: "0 0 256 256"
+      }, /*#__PURE__*/React__namespace.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__namespace.createElement("svg", {
+        width: "44",
+        height: "44",
+        viewBox: "0 0 48 48"
+      }, /*#__PURE__*/React__namespace.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React__namespace.createElement("path", {
+        fill: "none",
+        d: "M0 0h48v48H0z"
+      }), /*#__PURE__*/React__namespace.createElement("path", {
+        fill: "none",
+        d: "M12 12h24v24H12z"
+      }), /*#__PURE__*/React__namespace.createElement("path", {
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M16 30l16-6-16-6"
+      })));
+    case "LT":
+      return /*#__PURE__*/React__namespace.createElement("svg", {
+        width: "44",
+        height: "44",
+        viewBox: "0 0 48 48"
+      }, /*#__PURE__*/React__namespace.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React__namespace.createElement("path", {
+        fill: "none",
+        d: "M0 0h48v48H0z"
+      }), /*#__PURE__*/React__namespace.createElement("path", {
+        fill: "none",
+        d: "M12 12h24v24H12z"
+      }), /*#__PURE__*/React__namespace.createElement("path", {
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M32 30l-16-6 16-6"
+      })));
+    case "GEQ":
+      return /*#__PURE__*/React__namespace.createElement("svg", {
+        width: "44",
+        height: "44",
+        viewBox: "0 0 48 48"
+      }, /*#__PURE__*/React__namespace.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React__namespace.createElement("path", {
+        fill: "none",
+        d: "M0 0h48v48H0z"
+      }), /*#__PURE__*/React__namespace.createElement("path", {
+        fill: "none",
+        d: "M12 12h24v24H12z"
+      }), /*#__PURE__*/React__namespace.createElement("path", {
+        d: "M16 33h16M16 30l16-6-16-6",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      })));
+    case "LEQ":
+      return /*#__PURE__*/React__namespace.createElement("svg", {
+        width: "44",
+        height: "44",
+        viewBox: "0 0 48 48"
+      }, /*#__PURE__*/React__namespace.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React__namespace.createElement("path", {
+        fill: "none",
+        d: "M0 0h48v48H0z"
+      }), /*#__PURE__*/React__namespace.createElement("path", {
+        fill: "none",
+        d: "M12 12h24v24H12z"
+      }), /*#__PURE__*/React__namespace.createElement("path", {
+        d: "M16 33h16M32 30l-16-6 16-6",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      })));
+    case "NEQ":
+      return /*#__PURE__*/React__namespace.createElement("svg", {
+        width: "44",
+        height: "44",
+        viewBox: "0 0 48 48"
+      }, /*#__PURE__*/React__namespace.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React__namespace.createElement("path", {
+        fill: "none",
+        d: "M0 0h48v48H0z"
+      }), /*#__PURE__*/React__namespace.createElement("path", {
+        fill: "none",
+        d: "M12 12h24v24H12z"
+      }), /*#__PURE__*/React__namespace.createElement("path", {
+        d: "M19 33l10-18M16 21h17M16 27h17",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      })));
+    case "LN":
+      return /*#__PURE__*/React__namespace.createElement("svg", {
+        width: "48",
+        height: "48",
+        viewBox: "0 0 48 48"
+      }, /*#__PURE__*/React__namespace.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React__namespace.createElement("path", {
+        fill: "none",
+        d: "M0 0h48v48H0z"
+      }), /*#__PURE__*/React__namespace.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__namespace.createElement("svg", {
+        width: "48",
+        height: "48",
+        viewBox: "0 0 48 48"
+      }, /*#__PURE__*/React__namespace.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React__namespace.createElement("path", {
+        fill: "none",
+        d: "M0 0h48v48H0z"
+      }), /*#__PURE__*/React__namespace.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__namespace.createElement("svg", {
+        width: "48",
+        height: "48",
+        viewBox: "0 0 48 48"
+      }, /*#__PURE__*/React__namespace.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React__namespace.createElement("path", {
+        fill: "none",
+        d: "M0 0h48v48H0z"
+      }), /*#__PURE__*/React__namespace.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__namespace.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        fill: "currentColor",
+        viewBox: "0 0 256 256"
+      }, /*#__PURE__*/React__namespace.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__namespace.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        fill: "currentColor",
+        viewBox: "0 0 256 256"
+      }, /*#__PURE__*/React__namespace.createElement("path", {
+        d: "M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Z"
+      }));
+    case "PI":
+      return /*#__PURE__*/React__namespace.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        fill: "currentColor",
+        viewBox: "0 0 256 256"
+      }, /*#__PURE__*/React__namespace.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 "a":
+      return /*#__PURE__*/React__namespace.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        viewBox: "0 0 384 512"
+      }, /*#__PURE__*/React__namespace.createElement("path", {
+        d: "M221.5 51.7C216.6 39.8 204.9 32 192 32s-24.6 7.8-29.5 19.7l-120 288-40 96c-6.8 16.3 .9 35 17.2 41.8s35-.9 41.8-17.2L93.3 384H290.7l31.8 76.3c6.8 16.3 25.5 24 41.8 17.2s24-25.5 17.2-41.8l-40-96-120-288zM264 320H120l72-172.8L264 320z"
+      }));
+    case "b":
+      return /*#__PURE__*/React__namespace.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        viewBox: "0 0 320 512"
+      }, /*#__PURE__*/React__namespace.createElement("path", {
+        d: "M64 32C28.7 32 0 60.7 0 96V256 416c0 35.3 28.7 64 64 64H192c70.7 0 128-57.3 128-128c0-46.5-24.8-87.3-62-109.7c18.7-22.3 30-51 30-82.3c0-70.7-57.3-128-128-128H64zm96 192H64V96h96c35.3 0 64 28.7 64 64s-28.7 64-64 64zM64 288h96 32c35.3 0 64 28.7 64 64s-28.7 64-64 64H64V288z"
+      }));
+    case "c":
+      return /*#__PURE__*/React__namespace.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        viewBox: "0 0 384 512"
+      }, /*#__PURE__*/React__namespace.createElement("path", {
+        d: "M329.1 142.9c-62.5-62.5-155.8-62.5-218.3 0s-62.5 163.8 0 226.3s155.8 62.5 218.3 0c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3c-87.5 87.5-221.3 87.5-308.8 0s-87.5-229.3 0-316.8s221.3-87.5 308.8 0c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0z"
+      }));
+    case "x":
+      // MATHEMATICAL ITALIC SMALL CHI
+      // https://en.wikipedia.org/wiki/Chi_(letter)#Mathematical_chi
+      return /*#__PURE__*/React__namespace.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        fill: "currentColor",
+        viewBox: "0 0 256 256"
+      }, /*#__PURE__*/React__namespace.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__namespace.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        fill: "currentColor",
+        viewBox: "0 0 256 256"
+      }, /*#__PURE__*/React__namespace.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 "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__namespace.createElement("svg", {
         width: "40",
@@ -7463,6 +8329,11 @@ function ButtonAsset(_ref) {
         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: ".concat(unhandledKey));
   }
 }
 
@@ -7491,7 +8362,8 @@ const KeypadButton = _ref2 => {
   return /*#__PURE__*/React__namespace.createElement(Button, {
     onPress: () => onClickKey(keyConfig.id),
     tintColor: tintColor,
-    style: style
+    style: style,
+    ariaLabel: keyConfig.id
   }, /*#__PURE__*/React__namespace.createElement(ButtonAsset, {
     id: keyConfig.id
   }));
@@ -7553,6 +8425,20 @@ const PlaceHolderButtons = _ref5 => {
   }))));
 };
 
+class ExtrasPage extends React__namespace.Component {
+  render() {
+    const {
+      extraKeys,
+      onClickKey
+    } = this.props;
+    return /*#__PURE__*/React__namespace.createElement(KeypadPageContainer, null, extraKeys.map(key => /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+      key: key,
+      keyConfig: KeyConfigs[key],
+      onClickKey: onClickKey
+    })));
+  }
+}
+
 class GeometryPage extends React__namespace.Component {
   render() {
     const {
@@ -7580,7 +8466,7 @@ class GeometryPage extends React__namespace.Component {
         gridColumn: 6
       }
     }), /*#__PURE__*/React__namespace.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.X,
+      keyConfig: KeyConfigs.x,
       onClickKey: onClickKey,
       style: {
         gridColumn: 5
@@ -7813,7 +8699,7 @@ class OperatorsPage extends React__namespace.Component {
       onClickKey: onClickKey,
       placeholder: !this.props.logarithms
     }), /*#__PURE__*/React__namespace.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.X,
+      keyConfig: KeyConfigs.x,
       onClickKey: onClickKey,
       style: {
         gridColumn: 5
@@ -7852,8 +8738,12 @@ class OperatorsPage extends React__namespace.Component {
   }
 }
 
-const allPages = function (props) {
+function allPages(props) {
+  var _props$extraKeys;
   const pages = ["Numbers"];
+  if ((_props$extraKeys = props.extraKeys) !== null && _props$extraKeys !== void 0 && _props$extraKeys.length) {
+    pages.push("Extras");
+  }
   if (
   // OperatorsButtonSets
   props.preAlgebra || props.logarithms || props.basicRelations || props.advancedRelations) {
@@ -7862,9 +8752,8 @@ const allPages = function (props) {
   if (props.trigonometry) {
     pages.push("Geometry");
   }
-  // @ts-expect-error [FEI-5003] - TS2739 - Type 'TabbarItemType[]' is missing the following properties from type 'ReactElement<any, string | JSXElementConstructor<any>>': type, props, key
   return pages;
-};
+}
 class Keypad extends React__namespace.Component {
   constructor() {
     super(...arguments);
@@ -7877,26 +8766,33 @@ class Keypad extends React__namespace.Component {
       selectedPage
     } = this.state;
     const availablePages = allPages(this.props);
-    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(Tabbar
-    // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
-    , {
+    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(Tabbar, {
       items: availablePages,
-      onSelect: tabbarItem => {
+      selectedItem: selectedPage,
+      onSelectItem: tabbarItem => {
         this.setState({
           selectedPage: tabbarItem
         });
-      }
-    }), selectedPage === "Numbers" && /*#__PURE__*/React__namespace.createElement(NumbersPage, this.props), selectedPage === "Operators" && /*#__PURE__*/React__namespace.createElement(OperatorsPage, this.props), selectedPage === "Geometry" && /*#__PURE__*/React__namespace.createElement(GeometryPage, this.props));
+      },
+      style: styles.tabbar
+    }), selectedPage === "Numbers" && /*#__PURE__*/React__namespace.createElement(NumbersPage, this.props), selectedPage === "Extras" && /*#__PURE__*/React__namespace.createElement(ExtrasPage, this.props), selectedPage === "Operators" && /*#__PURE__*/React__namespace.createElement(OperatorsPage, this.props), selectedPage === "Geometry" && /*#__PURE__*/React__namespace.createElement(GeometryPage, this.props));
   }
 }
+_defineProperty(Keypad, "defaultProps", {
+  extraKeys: []
+});
+const styles = aphrodite.StyleSheet.create({
+  tabbar: {
+    background: Color__default["default"].white
+  }
+});
 
 exports.CursorContext = CursorContext;
 exports.KeyConfigs = KeyConfigs;
-exports.KeyType = KeyType;
 exports.Keypad = Keypad;
 exports.KeypadInput = MathInput;
 exports.KeypadType = KeypadType;
-exports.Keys = Keys;
 exports.LegacyKeypad = ProvidedKeypad;
+exports.keyTranslator = keyToMathquillMap;
 exports.keypadElementPropType = keypadElementPropType;
 //# sourceMappingURL=index.js.map