@khanacademy/math-input 0.7.0 → 0.7.2

package/dist/es/index.js

@@ -16,96 +16,23 @@ import { View as View$1 } from '@khanacademy/wonder-blocks-core';
 import Clickable from '@khanacademy/wonder-blocks-clickable';
 import now from 'performance-now';
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-  return keys;
-}
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-  }
-  return target;
-}
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
 function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
+  _extends = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
+
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
+
     return target;
   };
+
   return _extends.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
-}
-function _toPrimitive(input, hint) {
-  if (typeof input !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (typeof res !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return typeof key === "symbol" ? key : String(key);
-}
 
 /**
  * This file contains constants for keypad buttons that aren't single
@@ -115,7 +42,7 @@ function _toPropertyKey(arg) {
 // 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 = {
+const Keys = {
   PLUS: "PLUS",
   MINUS: "MINUS",
   NEGATIVE: "NEGATIVE",
@@ -177,11 +104,11 @@ var Keys = {
 
 class Text extends React.Component {
   render() {
-    var {
+    const {
       numberOfLines,
       style
     } = this.props;
-    var className = css(styles$f.initial, ...(Array.isArray(style) ? style : [style]), numberOfLines === 1 && styles$f.singleLineStyle);
+    const className = css(styles$f.initial, ...(Array.isArray(style) ? style : [style]), numberOfLines === 1 && styles$f.singleLineStyle);
     return /*#__PURE__*/React.createElement("span", {
       className: className,
       style: this.props.dynamicStyle
@@ -190,7 +117,7 @@ class Text extends React.Component {
 }
 
 // https://github.com/necolas/react-native-web/blob/master/src/components/Text/index.js
-var styles$f = StyleSheet.create({
+const styles$f = StyleSheet.create({
   initial: {
     color: "inherit",
     display: "inline",
@@ -209,10 +136,8 @@ var styles$f = StyleSheet.create({
 });
 
 class View extends React.Component {
-  // $FlowFixMe[signature-verification-failure]
-
   render() {
-    var className = css(View.styles.initial, ...(Array.isArray(this.props.style) ? this.props.style : [this.props.style])) + (this.props.extraClassName ? " ".concat(this.props.extraClassName) : "");
+    const className = css(View.styles.initial, ...(Array.isArray(this.props.style) ? this.props.style : [this.props.style])) + (this.props.extraClassName ? ` ${this.props.extraClassName}` : "");
     return /*#__PURE__*/React.createElement("div", {
       className: className,
       style: this.props.dynamicStyle,
@@ -226,7 +151,7 @@ class View extends React.Component {
     }, this.props.children);
   }
 }
-_defineProperty(View, "styles", StyleSheet.create({
+View.styles = StyleSheet.create({
   // From: https://github.com/necolas/react-native-web/blob/master/src/components/View/index.js
   // eslint-disable-next-line react-native/no-unused-styles
   initial: {
@@ -253,71 +178,71 @@ _defineProperty(View, "styles", StyleSheet.create({
     minHeight: 0,
     minWidth: 0
   }
-}));
+});
 
 /**
  * Common parameters used to style components.
  */
-var wonderBlocksBlue = Color.blue;
-var offBlack = Color.offBlack;
+const wonderBlocksBlue = Color.blue;
+const offBlack = Color.offBlack;
 Color.offBlack32;
-var offBlack16 = Color.offBlack16;
+const offBlack16 = Color.offBlack16;
 Color.offBlack8;
-var iconSizeHeightPx = 48;
-var iconSizeWidthPx = 48;
-var compactKeypadBorderRadiusPx = 4;
-var cursorHandleRadiusPx = 11;
+const iconSizeHeightPx = 48;
+const iconSizeWidthPx = 48;
+const compactKeypadBorderRadiusPx = 4;
+const cursorHandleRadiusPx = 11;
 
 // The amount to multiply the radius by to get the distance from the
 // center to the tip of the cursor handle.  The cursor is a circle with
 // one quadrant replace with a square.  The hypotenuse of the square is
 // 1.045 times the radius of the circle.
-var cursorHandleDistanceMultiplier = 1.045;
+const cursorHandleDistanceMultiplier = 1.045;
 
 // Keypad button colors
-var valueGrey = "#FFF";
-var operatorGrey = "#FAFAFA";
-var controlGrey = "#F6F7F7";
-var emptyGrey = "#F0F1F2";
+const valueGrey = "#FFF";
+const operatorGrey = "#FAFAFA";
+const controlGrey = "#F6F7F7";
+const emptyGrey = "#F0F1F2";
 
 // Constants defining any borders between elements in the keypad.
-var innerBorderColor = offBlack16;
-var innerBorderStyle = "solid";
-var innerBorderWidthPx = 1;
+const innerBorderColor = offBlack16;
+const innerBorderStyle = "solid";
+const innerBorderWidthPx = 1;
 
 // The width at which a device is classified as a "tablet" for the purposes
 // of the keypad layout.
-var tabletCutoffPx = 600;
+const tabletCutoffPx = 600;
 
 // The dimensions that define various components in the tree, which may be
 // needed outside of those components in order to determine various layout
 // parameters.
-var pageIndicatorHeightPx = 16;
-var navigationPadWidthPx = 192;
+const pageIndicatorHeightPx = 16;
+const navigationPadWidthPx = 192;
 // HACK(charlie): This should be injected by webapp somehow.
 // TODO(charlie): Add a link to the webapp location as soon as the footer
 // has settled down.
-var toolbarHeightPx = 60;
-
-var touchTargetRadiusPx = 2 * cursorHandleRadiusPx;
-var touchTargetHeightPx = 2 * touchTargetRadiusPx;
-var touchTargetWidthPx = 2 * touchTargetRadiusPx;
-var cursorRadiusPx = cursorHandleRadiusPx;
-var cursorHeightPx = cursorHandleDistanceMultiplier * (cursorRadiusPx * 4);
-var cursorWidthPx = 4 * cursorRadiusPx;
+const toolbarHeightPx = 60;
+
+const touchTargetRadiusPx = 2 * cursorHandleRadiusPx;
+const touchTargetHeightPx = 2 * touchTargetRadiusPx;
+const touchTargetWidthPx = 2 * touchTargetRadiusPx;
+const cursorRadiusPx = cursorHandleRadiusPx;
+const cursorHeightPx = cursorHandleDistanceMultiplier * (cursorRadiusPx * 4);
+const cursorWidthPx = 4 * cursorRadiusPx;
 class CursorHandle extends React.Component {
   render() {
-    var {
+    const {
       x,
       y,
       animateIntoPosition
     } = this.props;
-    var animationStyle = animateIntoPosition ? {
+    const animationStyle = animateIntoPosition ? {
       transitionDuration: "100ms",
       transitionProperty: "transform"
     } : {};
-    var transformString = "translate(".concat(x, "px, ").concat(y, "px)");
-    var outerStyle = _objectSpread2({
+    const transformString = `translate(${x}px, ${y}px)`;
+    const outerStyle = _extends({
       position: "absolute",
       // This is essentially webapp's interactiveComponent + 1.
       // TODO(charlie): Pull in those styles somehow to avoid breakages.
@@ -341,7 +266,7 @@ class CursorHandle extends React.Component {
       fill: "none",
       width: cursorWidthPx,
       height: cursorHeightPx,
-      viewBox: "0 0 ".concat(cursorWidthPx, " ").concat(cursorHeightPx)
+      viewBox: `0 0 ${cursorWidthPx} ${cursorHeightPx}`
     }, /*#__PURE__*/React.createElement("filter", {
       id: "math-input_cursor",
       colorInterpolationFilters: "sRGB",
@@ -387,12 +312,12 @@ class CursorHandle extends React.Component {
     })));
   }
 }
-_defineProperty(CursorHandle, "defaultProps", {
+CursorHandle.defaultProps = {
   animateIntoPosition: false,
   visible: false,
   x: 0,
   y: 0
-});
+};
 
 /**
  * A gesture recognizer that detects 'drags', crudely defined as either scrolls
@@ -402,7 +327,7 @@ _defineProperty(CursorHandle, "defaultProps", {
 // The 'slop' factor, after which we consider the use to be dragging. The value
 // is taken from the Android SDK. It won't be robust to page zoom and the like,
 // but it should be good enough for our purposes.
-var touchSlopPx = 8;
+const touchSlopPx = 8;
 class DragListener {
   constructor(onDrag, initialEvent) {
     // We detect drags in two ways. First, by listening for the window
@@ -414,21 +339,21 @@ class DragListener {
     // And second, by listening for touch moves and tracking the each
     // finger's displacement. This allows us to track, e.g., when the user
     // scrolls within an individual view.
-    var touchLocationsById = {};
-    for (var i = 0; i < initialEvent.changedTouches.length; i++) {
-      var touch = initialEvent.changedTouches[i];
+    const touchLocationsById = {};
+    for (let i = 0; i < initialEvent.changedTouches.length; i++) {
+      const touch = initialEvent.changedTouches[i];
       touchLocationsById[touch.identifier] = [touch.clientX, touch.clientY];
     }
     this._moveListener = evt => {
-      for (var _i = 0; _i < evt.changedTouches.length; _i++) {
-        var _touch = evt.changedTouches[_i];
-        var initialTouchLocation = touchLocationsById[_touch.identifier];
+      for (let i = 0; i < evt.changedTouches.length; i++) {
+        const touch = evt.changedTouches[i];
+        const initialTouchLocation = touchLocationsById[touch.identifier];
         if (initialTouchLocation) {
-          var touchLocation = [_touch.clientX, _touch.clientY];
-          var dx = touchLocation[0] - initialTouchLocation[0];
-          var dy = touchLocation[1] - initialTouchLocation[1];
-          var squaredDist = dx * dx + dy * dy;
-          var squaredTouchSlop = touchSlopPx * touchSlopPx;
+          const touchLocation = [touch.clientX, touch.clientY];
+          const dx = touchLocation[0] - initialTouchLocation[0];
+          const dy = touchLocation[1] - initialTouchLocation[1];
+          const squaredDist = dx * dx + dy * dy;
+          const squaredTouchSlop = touchSlopPx * touchSlopPx;
           if (squaredDist > squaredTouchSlop) {
             onDrag();
           }
@@ -439,8 +364,8 @@ class DragListener {
     // Clean-up any terminated gestures, since some browsers reuse
     // identifiers.
     this._endAndCancelListener = evt => {
-      for (var _i2 = 0; _i2 < evt.changedTouches.length; _i2++) {
-        delete touchLocationsById[evt.changedTouches[_i2].identifier];
+      for (let i = 0; i < evt.changedTouches.length; i++) {
+        delete touchLocationsById[evt.changedTouches[i].identifier];
       }
     };
   }
@@ -463,11 +388,11 @@ class DragListener {
  */
 
 // TODO: Retire this in favour of KeypadType (above)
-var KeypadTypes = {
+const KeypadTypes = {
   FRACTION: "FRACTION",
   EXPRESSION: "EXPRESSION"
 };
-var KeyTypes = {
+const KeyTypes = {
   EMPTY: "EMPTY",
   // For numerals, variables, and any other characters that themselves
   // compose 'values'.
@@ -486,38 +411,38 @@ var KeyTypes = {
   // For the echo animation that appears on press.
   ECHO: "ECHO"
 };
-var DeviceOrientations = {
+const DeviceOrientations = {
   LANDSCAPE: "LANDSCAPE",
   PORTRAIT: "PORTRAIT"
 };
-var DeviceTypes = {
+const DeviceTypes = {
   PHONE: "PHONE",
   TABLET: "TABLET"
 };
-var LayoutModes = {
+const LayoutModes = {
   FULLSCREEN: "FULLSCREEN",
   COMPACT: "COMPACT"
 };
-var BorderDirections = {
+const BorderDirections = {
   LEFT: "LEFT",
   BOTTOM: "BOTTOM"
 };
-var BorderStyles = {
+const BorderStyles = {
   LEFT: ["LEFT"],
   BOTTOM: ["BOTTOM"],
   ALL: ["LEFT", "BOTTOM"],
   NONE: []
 };
-var IconTypes = {
+const IconTypes = {
   MATH: "MATH",
   SVG: "SVG",
   TEXT: "TEXT"
 };
-var DecimalSeparators = {
+const DecimalSeparators = {
   COMMA: "COMMA",
   PERIOD: "PERIOD"
 };
-var EchoAnimationTypes = {
+const EchoAnimationTypes = {
   SLIDE_AND_FADE: "SLIDE_AND_FADE",
   FADE_ONLY: "FADE_ONLY",
   LONG_FADE_ONLY: "LONG_FADE_ONLY"
@@ -529,7 +454,7 @@ var EchoAnimationTypes = {
 //   imported from wonder-blocks-i18n.
 // - Some languages/locales use different decimal separators than the ones
 //   listed here.  Much of the Arab world uses U+066C.
-var decimalSeparator = getDecimalSeparator() === "," ? DecimalSeparators.COMMA : DecimalSeparators.PERIOD;
+const decimalSeparator = getDecimalSeparator() === "," ? DecimalSeparators.COMMA : DecimalSeparators.PERIOD;
 
 /**
  * Constants that define the various contexts in which a cursor can exist. The
@@ -546,22 +471,22 @@ var decimalSeparator = getDecimalSeparator() === "," ? DecimalSeparators.COMMA :
 // TODO: Get rid of these constants in favour of CursorContext type.
 
 // The cursor is not in any of the other viable contexts.
-var NONE = "NONE";
+const NONE = "NONE";
 // The cursor is within a set of parentheses.
-var IN_PARENS = "IN_PARENS";
+const IN_PARENS = "IN_PARENS";
 // The cursor is within a superscript (e.g., an exponent).
-var IN_SUPER_SCRIPT = "IN_SUPER_SCRIPT";
+const IN_SUPER_SCRIPT = "IN_SUPER_SCRIPT";
 // The cursor is within a subscript (e.g., the base of a custom logarithm).
-var IN_SUB_SCRIPT = "IN_SUB_SCRIPT";
+const IN_SUB_SCRIPT = "IN_SUB_SCRIPT";
 // The cursor is in the numerator of a fraction.
-var IN_NUMERATOR = "IN_NUMERATOR";
+const IN_NUMERATOR = "IN_NUMERATOR";
 // The cursor is in the denominator of a fraction.
-var IN_DENOMINATOR = "IN_DENOMINATOR";
+const IN_DENOMINATOR = "IN_DENOMINATOR";
 // The cursor is sitting before a fraction; that is, the cursor is within
 // what looks to be a mixed number preceding a fraction. This will only be
 // the case when the only math between the cursor and the fraction to its
 // write is non-leaf math (numbers and variables).
-var BEFORE_FRACTION = "BEFORE_FRACTION";
+const BEFORE_FRACTION = "BEFORE_FRACTION";
 
 var CursorContexts = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -583,17 +508,17 @@ var CursorContexts = /*#__PURE__*/Object.freeze({
 // Keeping `window` in place for test suite and GitHub Pages.
 // If it does not exist, fall back to CommonJS require. - jsatk
 
-var decimalSymbol = decimalSeparator === DecimalSeparators.COMMA ? "," : ".";
-var WRITE = "write";
-var CMD = "cmd";
-var KEYSTROKE = "keystroke";
-var MQ_END = 0;
+const decimalSymbol = decimalSeparator === DecimalSeparators.COMMA ? "," : ".";
+const WRITE = "write";
+const CMD = "cmd";
+const KEYSTROKE = "keystroke";
+const MQ_END = 0;
 
 // 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.
-var KeyActions = {
+const KeyActions = {
   [Keys.PLUS]: {
     str: "+",
     fn: WRITE
@@ -689,23 +614,23 @@ var KeyActions = {
     fn: CMD
   }
 };
-var NormalCommands = {
+const NormalCommands = {
   [Keys.LOG]: "log",
   [Keys.LN]: "ln",
   [Keys.SIN]: "sin",
   [Keys.COS]: "cos",
   [Keys.TAN]: "tan"
 };
-var ArithmeticOperators = ["+", "-", "\\cdot", "\\times", "\\div"];
-var EqualityOperators = ["=", "\\neq", "<", "\\leq", ">", "\\geq"];
-var Numerals = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
-var GreekLetters = ["\\theta", "\\pi"];
-var 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"];
+const ArithmeticOperators = ["+", "-", "\\cdot", "\\times", "\\div"];
+const EqualityOperators = ["=", "\\neq", "<", "\\leq", ">", "\\geq"];
+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"];
 
 // We only consider numerals, variables, and Greek Letters to be proper
 // leaf nodes.
-var ValidLeaves = [...Numerals, ...GreekLetters, ...Letters.map(letter => letter.toLowerCase()), ...Letters.map(letter => letter.toUpperCase())];
-var KeysForJumpContext = {
+const ValidLeaves = [...Numerals, ...GreekLetters, ...Letters.map(letter => letter.toLowerCase()), ...Letters.map(letter => letter.toUpperCase())];
+const KeysForJumpContext = {
   [IN_PARENS]: Keys.JUMP_OUT_PARENTHESES,
   [IN_SUPER_SCRIPT]: Keys.JUMP_OUT_EXPONENT,
   [IN_SUB_SCRIPT]: Keys.JUMP_OUT_BASE,
@@ -714,13 +639,12 @@ var KeysForJumpContext = {
   [IN_DENOMINATOR]: Keys.JUMP_OUT_DENOMINATOR
 };
 class MathWrapper {
-  constructor(element) {
-    var callbacks = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  constructor(element, options = {}, callbacks = {}) {
     this.MQ = MathQuill.getInterface(2);
     this.mathField = this.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 substituteTextarea() {
+      substituteTextarea: function () {
         return document.createElement("span");
       }
     });
@@ -730,7 +654,7 @@ class MathWrapper {
     // HACK(charlie): We shouldn't reaching into MathQuill internals like
     // this, but it's the easiest way to allow us to manage the focus state
     // ourselves.
-    var controller = this.mathField.__controller;
+    const controller = this.mathField.__controller;
     controller.cursor.show();
 
     // Set MathQuill's internal state to reflect the focus, otherwise it
@@ -739,12 +663,12 @@ class MathWrapper {
     controller.blurred = false;
   }
   blur() {
-    var controller = this.mathField.__controller;
+    const controller = this.mathField.__controller;
     controller.cursor.hide();
     controller.blurred = true;
   }
   _writeNormalFunction(name) {
-    this.mathField.write("\\".concat(name, "\\left(\\right)"));
+    this.mathField.write(`\\${name}\\left(\\right)`);
     this.mathField.keystroke("Left");
   }
 
@@ -755,9 +679,9 @@ class MathWrapper {
    * @returns {object} a cursor object, consisting of a cursor context
    */
   pressKey(key) {
-    var cursor = this.mathField.__controller.cursor;
+    const cursor = this.mathField.__controller.cursor;
     if (key in KeyActions) {
-      var {
+      const {
         str,
         fn
       } = KeyActions[key];
@@ -769,7 +693,7 @@ class MathWrapper {
     } 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.
-      var shouldNavigateLeft = cursor[this.MQ.L] === MQ_END;
+      const shouldNavigateLeft = cursor[this.MQ.L] === MQ_END;
       this.mathField.cmd("\\frac");
       if (shouldNavigateLeft) {
         this.mathField.keystroke("Left");
@@ -828,24 +752,24 @@ class MathWrapper {
    *                         should be placed
    */
   setCursorPosition(x, y, hitNode) {
-    var el = hitNode || document.elementFromPoint(x, y);
+    const el = hitNode || document.elementFromPoint(x, y);
     if (el) {
-      var cursor = this.getCursor();
+      const cursor = this.getCursor();
       if (el.hasAttribute("mq-root-block")) {
         // If we're in the empty area place the cursor at the right
         // end of the expression.
         cursor.insAtRightEnd(this.mathField.__controller.root);
       } else {
         // Otherwise place beside the element at x, y.
-        var controller = this.mathField.__controller;
-        var pageX = x - document.body.scrollLeft;
-        var pageY = y - document.body.scrollTop;
+        const controller = this.mathField.__controller;
+        const pageX = x - document.body.scrollLeft;
+        const pageY = y - document.body.scrollTop;
         controller.seek($(el), pageX, pageY).cursor.startSelection();
 
         // Unless that would leave us mid-command, in which case, we
         // need to adjust and place the cursor inside the parens
         // following the command.
-        var command = this._maybeFindCommand(cursor[this.MQ.L]);
+        const command = this._maybeFindCommand(cursor[this.MQ.L]);
         if (command && command.endNode) {
           // NOTE(charlie): endNode should definitely be \left(.
           cursor.insLeftOf(command.endNode);
@@ -872,7 +796,7 @@ class MathWrapper {
     this.mathField.latex(latex);
   }
   isEmpty() {
-    var cursor = this.getCursor();
+    const cursor = this.getCursor();
     return cursor.parent.id === 1 && cursor[1] === 0 && cursor[-1] === 0;
   }
 
@@ -893,8 +817,8 @@ class MathWrapper {
   // when upgrading MathQuill.
 
   _handleBackspaceInNthRoot(cursor) {
-    var isAtLeftEnd = cursor[this.MQ.L] === MQ_END;
-    var isRootEmpty = this._isInsideEmptyNode(cursor.parent.parent.blocks[0].ends);
+    const isAtLeftEnd = cursor[this.MQ.L] === MQ_END;
+    const isRootEmpty = this._isInsideEmptyNode(cursor.parent.parent.blocks[0].ends);
     if (isAtLeftEnd) {
       this._selectNode(cursor.parent.parent, cursor);
       if (isRootEmpty) {
@@ -912,7 +836,7 @@ class MathWrapper {
    * @private
    */
   _handleJumpOut(cursor, key) {
-    var context = this.contextForCursor(cursor);
+    const context = this.contextForCursor(cursor);
 
     // Validate that the current cursor context matches the key's intent.
     if (KeysForJumpContext[context] !== key) {
@@ -931,8 +855,8 @@ class MathWrapper {
         break;
       case BEFORE_FRACTION:
         // Find the nearest fraction to the right of the cursor.
-        var fractionNode;
-        var visitor = cursor;
+        let fractionNode;
+        let visitor = cursor;
         while (visitor[this.MQ.R] !== MQ_END) {
           if (this._isFraction(visitor[this.MQ.R])) {
             fractionNode = visitor[this.MQ.R];
@@ -951,7 +875,7 @@ class MathWrapper {
         // 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.
-        var siblingDenominator = cursor.parent.parent.blocks[1];
+        const siblingDenominator = cursor.parent.parent.blocks[1];
         while (cursor.parent !== siblingDenominator) {
           this.mathField.keystroke("Right");
         }
@@ -975,7 +899,7 @@ class MathWrapper {
         cursor.insRightOf(cursor.parent.parent);
         break;
       default:
-        throw new Error("Attempted to 'Jump Out' from node, but found no " + "appropriate cursor context: ".concat(context));
+        throw new Error(`Attempted to 'Jump Out' from node, but found no ` + `appropriate cursor context: ${context}`);
     }
   }
 
@@ -988,9 +912,9 @@ class MathWrapper {
    */
   _handleBackspace(cursor) {
     if (!cursor.selection) {
-      var parent = cursor.parent;
-      var grandparent = parent.parent;
-      var leftNode = cursor[this.MQ.L];
+      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)) {
@@ -1028,10 +952,10 @@ class MathWrapper {
     // the nodes to the left of our grandparent comprise a valid function
     // name.
     if (cursor[this.MQ.L] === MQ_END) {
-      var parent = cursor.parent;
-      var grandparent = parent.parent;
+      const parent = cursor.parent;
+      const grandparent = parent.parent;
       if (grandparent.ctrlSeq === "\\left(") {
-        var command = this._maybeFindCommandBeforeParens(grandparent);
+        const command = this._maybeFindCommandBeforeParens(grandparent);
         if (command) {
           cursor.insLeftOf(command.startNode);
           return;
@@ -1043,7 +967,7 @@ class MathWrapper {
     this.mathField.keystroke("Left");
   }
   _handleRightArrow(cursor) {
-    var command = this._maybeFindCommand(cursor[this.MQ.R]);
+    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
@@ -1060,9 +984,9 @@ class MathWrapper {
     // 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.
-    var invalidPrefixes = [...ArithmeticOperators, ...EqualityOperators];
-    var precedingNode = cursor[this.MQ.L];
-    var shouldPrefixWithParens = precedingNode === MQ_END || invalidPrefixes.includes(precedingNode.ctrlSeq.trim());
+    const invalidPrefixes = [...ArithmeticOperators, ...EqualityOperators];
+    const precedingNode = cursor[this.MQ.L];
+    const shouldPrefixWithParens = precedingNode === MQ_END || invalidPrefixes.includes(precedingNode.ctrlSeq.trim());
     if (shouldPrefixWithParens) {
       this.mathField.write("\\left(\\right)");
     }
@@ -1074,7 +998,7 @@ class MathWrapper {
         break;
       case Keys.EXP_2:
       case Keys.EXP_3:
-        this.mathField.write("^".concat(key === Keys.EXP_2 ? 2 : 3));
+        this.mathField.write(`^${key === Keys.EXP_2 ? 2 : 3}`);
 
         // If we enter a square or a cube, we should leave the cursor
         // within the newly inserted parens, if they exist. This takes
@@ -1088,7 +1012,7 @@ class MathWrapper {
         }
         break;
       default:
-        throw new Error("Invalid exponent key: ".concat(key));
+        throw new Error(`Invalid exponent key: ${key}`);
     }
   }
 
@@ -1116,24 +1040,24 @@ class MathWrapper {
     // 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(', ...]
-    var commandCharRegex = /^[a-z]$/;
-    var commandStartRegex = /^\\[a-z]$/;
-    var commandEndSeq = "\\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.
-    var validCommands = ["\\log", "\\ln", "\\cos", "\\sin", "\\tan"];
-    var name = "";
-    var startNode;
-    var endNode;
+    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.
-    var node = initialNode;
+    let node = initialNode;
     while (node !== 0) {
-      var ctrlSeq = node.ctrlSeq.trim();
+      const ctrlSeq = node.ctrlSeq.trim();
       if (commandCharRegex.test(ctrlSeq)) {
         name = ctrlSeq + name;
       } else if (commandStartRegex.test(ctrlSeq)) {
@@ -1153,12 +1077,12 @@ class MathWrapper {
       // Next, iterate from the start to the right.
       node = initialNode[this.MQ.R];
       while (node !== 0) {
-        var _ctrlSeq = node.ctrlSeq.trim();
-        if (commandCharRegex.test(_ctrlSeq)) {
+        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) {
+          name = name + ctrlSeq;
+        } else if (ctrlSeq === commandEndSeq) {
           // If we hit the command end delimiter (the left
           // parentheses surrounding its arguments), stop.
           endNode = node;
@@ -1237,9 +1161,9 @@ class MathWrapper {
     return node.jQ && node.jQ.hasClass("mq-nthroot");
   }
   _isInsideLogIndex(cursor) {
-    var grandparent = cursor.parent.parent;
+    const grandparent = cursor.parent.parent;
     if (grandparent && grandparent.jQ.hasClass("mq-supsub")) {
-      var command = this._maybeFindCommandBeforeParens(grandparent);
+      const command = this._maybeFindCommandBeforeParens(grandparent);
       if (command && command.name === "\\log") {
         return true;
       }
@@ -1255,11 +1179,11 @@ class MathWrapper {
       // 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.
 
-      var grandparent = cursor.parent.parent;
-      var latex = grandparent.latex();
-      var reinsertionPoint = grandparent[this.MQ.L];
+      const grandparent = cursor.parent.parent;
+      const latex = grandparent.latex();
+      const reinsertionPoint = grandparent[this.MQ.L];
       this._selectNode(grandparent, cursor);
-      var rootIsEmpty = grandparent.blocks[1].jQ.text() === "";
+      const rootIsEmpty = grandparent.blocks[1].jQ.text() === "";
       if (rootIsEmpty) {
         // If there is not content under the root then simply delete
         // the whole thing.
@@ -1291,8 +1215,8 @@ class MathWrapper {
   }
   _handleBackspaceInLogIndex(cursor) {
     if (this._isInsideEmptyNode(cursor)) {
-      var grandparent = cursor.parent.parent;
-      var command = this._maybeFindCommandBeforeParens(grandparent);
+      const grandparent = cursor.parent.parent;
+      const command = this._maybeFindCommandBeforeParens(grandparent);
       cursor.insLeftOf(command.startNode);
       cursor.startSelection();
       if (grandparent[this.MQ.R] !== MQ_END) {
@@ -1302,7 +1226,7 @@ class MathWrapper {
       }
       cursor.select();
       cursor.endSelection();
-      var isLogBodyEmpty = grandparent[this.MQ.R].contentjQ.text() === "";
+      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.
@@ -1321,9 +1245,9 @@ class MathWrapper {
     // (x+1)| => |(x+1)|
     // \log(x+1)| => |\log(x+1)|
 
-    var leftNode = cursor[this.MQ.L];
-    var rightNode = cursor[this.MQ.R];
-    var command = this._maybeFindCommandBeforeParens(leftNode);
+    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.
@@ -1375,7 +1299,7 @@ class MathWrapper {
       this.mathField.keystroke("Backspace");
       return;
     }
-    var grandparent = cursor.parent.parent;
+    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
@@ -1393,11 +1317,11 @@ class MathWrapper {
 
     // Determine if the parens are empty before we modify the
     // cursor's position.
-    var isEmpty = this._isInsideEmptyNode(cursor);
+    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
-    var command = this._maybeFindCommandBeforeParens(grandparent);
+    const command = this._maybeFindCommandBeforeParens(grandparent);
     cursor.insLeftOf(command && command.startNode || grandparent);
     cursor.startSelection();
     cursor.insRightOf(grandparent);
@@ -1416,7 +1340,7 @@ class MathWrapper {
   }
   contextForCursor(cursor) {
     // First, try to find any fraction to the right, unimpeded.
-    var visitor = cursor;
+    let visitor = cursor;
     while (visitor[this.MQ.R] !== MQ_END) {
       if (this._isFraction(visitor[this.MQ.R])) {
         return BEFORE_FRACTION;
@@ -1469,17 +1393,17 @@ function bodyOrHtml() {
   }
   return document.documentElement;
 }
-var scrollIntoView = (containerNode, keypadNode) => {
+const scrollIntoView = (containerNode, keypadNode) => {
   // TODO(charlie): There's no need for us to be reading the keypad bounds
   // here, since they're pre-determined by logic in the store. We should
   // instead pass around an object that knows the bounds.
-  var containerBounds = containerNode.getBoundingClientRect();
-  var containerBottomPx = containerBounds.bottom;
-  var containerTopPx = containerBounds.top;
+  const containerBounds = containerNode.getBoundingClientRect();
+  const containerBottomPx = containerBounds.bottom;
+  const containerTopPx = containerBounds.top;
 
   // Get the element that scrolls the document.
-  var scrollNode = bodyOrHtml();
-  var desiredMarginPx = 16;
+  const scrollNode = bodyOrHtml();
+  const desiredMarginPx = 16;
   if (keypadNode) {
     // NOTE(charlie): We can't use the bounding rect of the keypad,
     // as it is likely in the process of animating in. Instead, to
@@ -1489,14 +1413,14 @@ var scrollIntoView = (containerNode, keypadNode) => {
     // in the native apps (where the toolbar is rendered natively), this
     // will result in us leaving excess space between the input and the
     // keypad, but that seems okay.
-    var pageHeightPx = window.innerHeight;
-    var keypadHeightPx = keypadNode.clientHeight;
-    var keypadTopPx = pageHeightPx - (keypadHeightPx + toolbarHeightPx);
+    const pageHeightPx = window.innerHeight;
+    const keypadHeightPx = keypadNode.clientHeight;
+    const keypadTopPx = pageHeightPx - (keypadHeightPx + toolbarHeightPx);
     if (containerBottomPx > keypadTopPx) {
       // If the input would be obscured by the keypad, scroll such that
       // the bottom of the input is just above the top of the keypad,
       // taking care not to scroll the input out of view.
-      var scrollOffset = Math.min(containerBottomPx - keypadTopPx + desiredMarginPx, containerTopPx);
+      const scrollOffset = Math.min(containerBottomPx - keypadTopPx + desiredMarginPx, containerTopPx);
       scrollNode.scrollTop += scrollOffset;
       return;
     }
@@ -1510,25 +1434,25 @@ var scrollIntoView = (containerNode, keypadNode) => {
   }
 };
 
-var constrainingFrictionFactor = 0.8;
+const constrainingFrictionFactor = 0.8;
 // eslint-disable-next-line react/no-unsafe
 class MathInput extends React.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "didTouchOutside", void 0);
-    _defineProperty(this, "didScroll", void 0);
-    _defineProperty(this, "mathField", void 0);
-    _defineProperty(this, "recordTouchStartOutside", void 0);
-    _defineProperty(this, "blurOnTouchEndOutside", void 0);
-    _defineProperty(this, "dragListener", void 0);
-    _defineProperty(this, "inputRef", void 0);
-    _defineProperty(this, "_isMounted", void 0);
-    _defineProperty(this, "_mathContainer", void 0);
-    _defineProperty(this, "_container", void 0);
-    _defineProperty(this, "_root", void 0);
-    _defineProperty(this, "_containerBounds", void 0);
-    _defineProperty(this, "_keypadBounds", void 0);
-    _defineProperty(this, "state", {
+  constructor(...args) {
+    super(...args);
+    this.didTouchOutside = void 0;
+    this.didScroll = void 0;
+    this.mathField = void 0;
+    this.recordTouchStartOutside = void 0;
+    this.blurOnTouchEndOutside = void 0;
+    this.dragListener = void 0;
+    this.inputRef = void 0;
+    this._isMounted = void 0;
+    this._mathContainer = void 0;
+    this._container = void 0;
+    this._root = void 0;
+    this._containerBounds = void 0;
+    this._keypadBounds = void 0;
+    this.state = {
       focused: false,
       handle: {
         animateIntoPosition: false,
@@ -1536,41 +1460,41 @@ class MathInput extends React.Component {
         x: 0,
         y: 0
       }
-    });
-    _defineProperty(this, "_clearKeypadBoundsCache", () => {
+    };
+    this._clearKeypadBoundsCache = () => {
       this._keypadBounds = null;
-    });
-    _defineProperty(this, "_cacheKeypadBounds", keypadNode => {
+    };
+    this._cacheKeypadBounds = keypadNode => {
       this._keypadBounds = keypadNode.getBoundingClientRect();
-    });
-    _defineProperty(this, "_updateInputPadding", () => {
+    };
+    this._updateInputPadding = () => {
       this._container = ReactDOM.findDOMNode(this);
       this._root = this._container.querySelector(".mq-root-block");
-      var padding = this.getInputInnerPadding();
+      const padding = this.getInputInnerPadding();
       // NOTE(diedra): This overrides the default 2px padding from Mathquil.
-      this._root.style.padding = "".concat(padding.paddingTop, "px ").concat(padding.paddingRight, "px") + " ".concat(padding.paddingBottom, "px ").concat(padding.paddingLeft, "px");
-      this._root.style.fontSize = "".concat(fontSizePt, "pt");
-    });
-    _defineProperty(this, "_getKeypadBounds", () => {
+      this._root.style.padding = `${padding.paddingTop}px ${padding.paddingRight}px` + ` ${padding.paddingBottom}px ${padding.paddingLeft}px`;
+      this._root.style.fontSize = `${fontSizePt}pt`;
+    };
+    this._getKeypadBounds = () => {
       if (!this._keypadBounds) {
-        var node = this.props.keypadElement.getDOMNode();
+        const node = this.props.keypadElement.getDOMNode();
         this._cacheKeypadBounds(node);
       }
       return this._keypadBounds;
-    });
-    _defineProperty(this, "_updateCursorHandle", animateIntoPosition => {
-      var containerBounds = this._container.getBoundingClientRect();
-      var cursor = this._container.querySelector(".mq-cursor");
-      var cursorBounds = cursor.getBoundingClientRect();
-      var cursorWidth = cursorBounds.width;
-      var gapBelowCursor = 2;
-      var inputInnerPadding = this.getInputInnerPadding();
+    };
+    this._updateCursorHandle = animateIntoPosition => {
+      const containerBounds = this._container.getBoundingClientRect();
+      const cursor = this._container.querySelector(".mq-cursor");
+      const cursorBounds = cursor.getBoundingClientRect();
+      const cursorWidth = cursorBounds.width;
+      const gapBelowCursor = 2;
+      const inputInnerPadding = this.getInputInnerPadding();
 
       // The cursor should never be further right or left than the edge of the
       // container's values.
-      var furthestRightCursorBound = containerBounds.right - cursorWidth - inputInnerPadding.paddingRight;
-      var furthestLeftCursorBound = containerBounds.left + cursorWidth + inputInnerPadding.paddingLeft;
-      var cursorBoundsLeft = cursorBounds.left;
+      const furthestRightCursorBound = containerBounds.right - cursorWidth - inputInnerPadding.paddingRight;
+      const furthestLeftCursorBound = containerBounds.left + cursorWidth + inputInnerPadding.paddingLeft;
+      let cursorBoundsLeft = cursorBounds.left;
       if (cursorBounds.left > furthestRightCursorBound) {
         cursorBoundsLeft = furthestRightCursorBound;
       } else if (cursorBounds.left < furthestLeftCursorBound) {
@@ -1586,8 +1510,8 @@ class MathInput extends React.Component {
           y: cursorBounds.bottom + gapBelowCursor - containerBounds.top
         }
       });
-    });
-    _defineProperty(this, "_hideCursorHandle", () => {
+    };
+    this._hideCursorHandle = () => {
       this.setState({
         handle: {
           visible: false,
@@ -1595,8 +1519,8 @@ class MathInput extends React.Component {
           y: 0
         }
       });
-    });
-    _defineProperty(this, "_handleScroll", () => {
+    };
+    this._handleScroll = () => {
       // If animateIntoPosition is false, the user is currently manually positioning
       // the cursor. This is important because the user can scroll the input field
       // with the curor handle, and we don't want to override that ability.
@@ -1605,8 +1529,8 @@ class MathInput extends React.Component {
       if (this.state.handle.animateIntoPosition !== false) {
         this._hideCursorHandle();
       }
-    });
-    _defineProperty(this, "blur", () => {
+    };
+    this.blur = () => {
       this.mathField.blur();
       this.props.onBlur && this.props.onBlur();
       this.setState({
@@ -1615,25 +1539,25 @@ class MathInput extends React.Component {
           visible: false
         }
       });
-    });
-    _defineProperty(this, "focus", () => {
+    };
+    this.focus = () => {
       // Pass this component's handleKey method to the keypad so it can call
       // it whenever it needs to trigger a keypress action.
       this.props.keypadElement.setKeyHandler(key => {
-        var cursor = this.mathField.pressKey(key);
+        const cursor = this.mathField.pressKey(key);
 
         // Trigger an `onChange` if the value in the input changed, and hide
         // the cursor handle whenever the user types a key. If the value
         // changed as a result of a keypress, we need to be careful not to
         // call `setState` until after `onChange` has resolved.
-        var hideCursor = () => {
+        const hideCursor = () => {
           this.setState({
             handle: {
               visible: false
             }
           });
         };
-        var value = this.mathField.getContent();
+        const value = this.mathField.getContent();
         if (this.props.value !== value) {
           this.props.onChange(value, hideCursor);
         } else {
@@ -1658,17 +1582,17 @@ class MathInput extends React.Component {
             // that the higher level controller tells us when the
             // keypad is settled (then scrollIntoView wouldn't have
             // to make assumptions about that either).
-            var maybeKeypadNode = this.props.keypadElement && this.props.keypadElement.getDOMNode();
+            const maybeKeypadNode = this.props.keypadElement && this.props.keypadElement.getDOMNode();
             scrollIntoView(this._container, maybeKeypadNode);
           }
         });
       });
-    });
-    _defineProperty(this, "_findHitNode", (containerBounds, x, y, dx, dy) => {
+    };
+    this._findHitNode = (containerBounds, x, y, dx, dy) => {
       while (y >= containerBounds.top && y <= containerBounds.bottom) {
         y += dy;
-        var points = [[x - dx, y], [x, y], [x + dx, y]];
-        var elements = points
+        const points = [[x - dx, y], [x, y], [x + dx, y]];
+        const elements = points
         // @ts-expect-error [FEI-5003] - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
         .map(point => document.elementFromPoint(...point))
         // We exclude the root container itself and any nodes marked
@@ -1682,23 +1606,17 @@ class MathInput extends React.Component {
         // included, neither mq-numerator nor mq-denominator nodes are
         // and neither are subscripts or superscripts.
         .filter(element => element && this._root.contains(element) && (!element.classList.contains("mq-root-block") && !element.classList.contains("mq-non-leaf") || element.classList.contains("mq-empty") || element.classList.contains("mq-hasCursor")));
-        var hitNode = null;
-
-        // Contains only DOMNodes without child elements.  These should
-        // contain some amount of text though.
-        var leafElements = [];
+        let hitNode = null;
 
         // Contains only DOMNodes with child elements.
-        var nonLeafElements = [];
-        var max = 0;
-        var counts = {};
-        var elementsById = {};
-        for (var element of elements) {
+        const nonLeafElements = [];
+        let max = 0;
+        const counts = {};
+        const elementsById = {};
+        for (const element of elements) {
           // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'.
-          var id = element.getAttribute("mathquill-command-id");
+          const id = element.getAttribute("mathquill-command-id");
           if (id != null) {
-            // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'Element | null' is not assignable to parameter of type 'HTMLElement | null'.
-            leafElements.push(element);
             counts[id] = (counts[id] || 0) + 1;
             elementsById[id] = element;
           } else {
@@ -1718,10 +1636,10 @@ class MathInput extends React.Component {
         // we hit multiple leaf nodes at the same time.  In this case we
         // we prefer the DOMNode with the most hits.
         // TODO(kevinb) consider preferring nodes hit by [x, y].
-        for (var [_id, count] of entries(counts)) {
+        for (const [id, count] of entries(counts)) {
           if (count > max) {
             max = count;
-            hitNode = elementsById[_id];
+            hitNode = elementsById[id];
           }
         }
 
@@ -1740,9 +1658,9 @@ class MathInput extends React.Component {
         }
       }
       return false;
-    });
-    _defineProperty(this, "_insertCursorAtClosestNode", (x, y) => {
-      var cursor = this.mathField.getCursor();
+    };
+    this._insertCursorAtClosestNode = (x, y) => {
+      const cursor = this.mathField.getCursor();
 
       // Pre-emptively check if the input has any child nodes; if not, the
       // input is empty, so we throw the cursor at the start.
@@ -1763,7 +1681,7 @@ class MathInput extends React.Component {
       } else if (x < this._containerBounds.left) {
         x = this._containerBounds.left + 15;
       }
-      var dy;
+      let dy;
 
       // Vertical spacing between hit tests
       // dy is negative because we're moving upwards.
@@ -1773,7 +1691,7 @@ class MathInput extends React.Component {
       // Note: This value depends on the font size.  If the gap is too small
       // we end up placing the cursor at the end of the expression when we
       // shouldn't.
-      var dx = 5;
+      const dx = 5;
       if (this._findHitNode(this._containerBounds, x, y, dx, dy)) {
         return;
       }
@@ -1786,10 +1704,10 @@ class MathInput extends React.Component {
       if (this._findHitNode(this._containerBounds, x, y, dx, dy)) {
         return;
       }
-      var firstChildBounds = this._root.firstChild.getBoundingClientRect();
-      var lastChildBounds = this._root.lastChild.getBoundingClientRect();
-      var left = firstChildBounds.left;
-      var right = lastChildBounds.right;
+      const firstChildBounds = this._root.firstChild.getBoundingClientRect();
+      const lastChildBounds = this._root.lastChild.getBoundingClientRect();
+      const left = firstChildBounds.left;
+      const right = lastChildBounds.right;
 
       // We've exhausted all of the options. We're likely either to the right
       // or left of all of the math, so we place the cursor at the end to
@@ -1803,8 +1721,8 @@ class MathInput extends React.Component {
       this.props.keypadElement && this.props.keypadElement.setCursor({
         context: this.mathField.contextForCursor(cursor)
       });
-    });
-    _defineProperty(this, "handleTouchStart", e => {
+    };
+    this.handleTouchStart = e => {
       e.stopPropagation();
 
       // Hide the cursor handle on touch start, if the handle itself isn't
@@ -1819,7 +1737,7 @@ class MathInput extends React.Component {
 
         // Make the cursor visible and set the handle-less cursor's
         // location.
-        var touch = e.changedTouches[0];
+        const touch = e.changedTouches[0];
         this._insertCursorAtClosestNode(touch.clientX, touch.clientY);
       }
 
@@ -1827,8 +1745,8 @@ class MathInput extends React.Component {
       if (!this.state.focused) {
         this.focus();
       }
-    });
-    _defineProperty(this, "handleTouchMove", e => {
+    };
+    this.handleTouchMove = e => {
       e.stopPropagation();
 
       // Update the handle-less cursor's location on move, if there's any
@@ -1838,11 +1756,11 @@ class MathInput extends React.Component {
       // the cursor is no longer visible and the input is no longer
       // highlighted).
       if (this.mathField.getContent() !== "" && this.state.focused) {
-        var touch = e.changedTouches[0];
+        const touch = e.changedTouches[0];
         this._insertCursorAtClosestNode(touch.clientX, touch.clientY);
       }
-    });
-    _defineProperty(this, "handleTouchEnd", e => {
+    };
+    this.handleTouchEnd = e => {
       e.stopPropagation();
 
       // And on touch-end, reveal the cursor, unless the input is empty. Note
@@ -1853,8 +1771,8 @@ class MathInput extends React.Component {
       if (this.mathField.getContent() !== "" && this.state.focused) {
         this._updateCursorHandle();
       }
-    });
-    _defineProperty(this, "onCursorHandleTouchStart", e => {
+    };
+    this.onCursorHandleTouchStart = e => {
       // NOTE(charlie): The cursor handle is a child of this view, so whenever
       // it receives a touch event, that event would also typically be bubbled
       // up to our own handlers. However, we want the cursor to handle its own
@@ -1867,8 +1785,8 @@ class MathInput extends React.Component {
 
       // Cache the container bounds, so as to avoid re-computing.
       this._containerBounds = this._container.getBoundingClientRect();
-    });
-    _defineProperty(this, "_constrainToBound", (value, min, max, friction) => {
+    };
+    this._constrainToBound = (value, min, max, friction) => {
       if (value < min) {
         return min + (value - min) * friction;
       } else if (value > max) {
@@ -1876,13 +1794,13 @@ class MathInput extends React.Component {
       } else {
         return value;
       }
-    });
-    _defineProperty(this, "onCursorHandleTouchMove", e => {
+    };
+    this.onCursorHandleTouchMove = e => {
       e.stopPropagation();
-      var x = e.changedTouches[0].clientX;
-      var y = e.changedTouches[0].clientY;
-      var relativeX = x - this._containerBounds.left;
-      var relativeY = y - 2 * cursorHandleRadiusPx * cursorHandleDistanceMultiplier - this._containerBounds.top;
+      const x = e.changedTouches[0].clientX;
+      const y = e.changedTouches[0].clientY;
+      const relativeX = x - this._containerBounds.left;
+      const relativeY = y - 2 * cursorHandleRadiusPx * cursorHandleDistanceMultiplier - this._containerBounds.top;
 
       // We subtract the containerBounds left/top to correct for the
       // MathInput's position on the page. On top of that, we subtract an
@@ -1905,20 +1823,20 @@ class MathInput extends React.Component {
       // Use a y-coordinate that's just above where the user is actually
       // touching because they're dragging the handle which is a little
       // below where the cursor actually is.
-      var distanceAboveFingerToTrySelecting = 22;
-      var adjustedY = y - distanceAboveFingerToTrySelecting;
+      const distanceAboveFingerToTrySelecting = 22;
+      const adjustedY = y - distanceAboveFingerToTrySelecting;
       this._insertCursorAtClosestNode(x, adjustedY);
-    });
-    _defineProperty(this, "onCursorHandleTouchEnd", e => {
+    };
+    this.onCursorHandleTouchEnd = e => {
       e.stopPropagation();
       this._updateCursorHandle(true);
-    });
-    _defineProperty(this, "onCursorHandleTouchCancel", e => {
+    };
+    this.onCursorHandleTouchCancel = e => {
       e.stopPropagation();
       this._updateCursorHandle(true);
-    });
-    _defineProperty(this, "domKeyToMathQuillKey", key => {
-      var keyMap = {
+    };
+    this.domKeyToMathQuillKey = key => {
+      const keyMap = {
         "+": Keys.PLUS,
         "-": Keys.MINUS,
         "*": Keys.TIMES,
@@ -1933,7 +1851,7 @@ class MathInput extends React.Component {
 
       // Numbers
       if (["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"].includes(key)) {
-        return "NUM_".concat(key);
+        return `NUM_${key}`;
       }
 
       // Movement keys
@@ -1948,31 +1866,31 @@ class MathInput extends React.Component {
 
       // The key pressed doesn't map to any of the math input operators
       return null;
-    });
-    _defineProperty(this, "handleKeyUp", event => {
-      var mathQuillKey = this.domKeyToMathQuillKey(event.key);
+    };
+    this.handleKeyUp = event => {
+      const mathQuillKey = this.domKeyToMathQuillKey(event.key);
       if (mathQuillKey) {
         this.mathField.pressKey(mathQuillKey);
 
         // TODO(diedra): If the new value being added is off-screen to the right
         // due to the max-width of the text box, scroll the box to show the newest
         // value
-        var value = this.mathField.getContent();
+        const value = this.mathField.getContent();
         if (this.props.value !== value) {
           this.mathField.setContent(this.props.value);
           this.props.onChange(value, false);
           this._hideCursorHandle();
         }
       }
-    });
-    _defineProperty(this, "getBorderWidthPx", () => {
+    };
+    this.getBorderWidthPx = () => {
       // TODO(diedra): Move these to the common style package.
-      var normalBorderWidthPx = 1;
-      var focusedBorderWidthPx = 2;
+      const normalBorderWidthPx = 1;
+      const focusedBorderWidthPx = 2;
       return this.state.focused ? focusedBorderWidthPx : normalBorderWidthPx;
-    });
-    _defineProperty(this, "getInputInnerPadding", () => {
-      var paddingInset = totalDesiredPadding - this.getBorderWidthPx();
+    };
+    this.getInputInnerPadding = () => {
+      const paddingInset = totalDesiredPadding - this.getBorderWidthPx();
 
       // Now, translate that to the appropriate padding for each direction.
       // The complication here is that we want numerals to be centered within
@@ -1980,16 +1898,16 @@ class MathInput extends React.Component {
       // numerals with approximately 3px of padding below and 1px of padding
       // above (to make room for ascenders and descenders). So we ignore those
       // padding values for the vertical directions.
-      var symbolaPaddingBottom = 3;
-      var symbolaPaddingTop = 1;
-      var padding = {
+      const symbolaPaddingBottom = 3;
+      const symbolaPaddingTop = 1;
+      const padding = {
         paddingTop: paddingInset - symbolaPaddingTop,
         paddingRight: paddingInset,
         paddingBottom: paddingInset - symbolaPaddingBottom,
         paddingLeft: paddingInset
       };
       return padding;
-    });
+    };
   }
   componentDidMount() {
     this._isMounted = true;
@@ -2036,11 +1954,11 @@ class MathInput extends React.Component {
         // to dismiss the keypad on check.
         // TODO(charlie): Inject this logic.
         if (!this._container.contains(evt.target)) {
-          var touchDidStartInOrBelowKeypad = false;
+          let touchDidStartInOrBelowKeypad = false;
           if (this.props.keypadElement && this.props.keypadElement.getDOMNode()) {
-            var bounds = this._getKeypadBounds();
-            for (var i = 0; i < evt.changedTouches.length; i++) {
-              var [x, y] = [evt.changedTouches[i].clientX, evt.changedTouches[i].clientY];
+            const bounds = this._getKeypadBounds();
+            for (let i = 0; i < evt.changedTouches.length; i++) {
+              const [x, y] = [evt.changedTouches[i].clientX, evt.changedTouches[i].clientY];
               if (bounds.left <= x && bounds.right >= x && bounds.top <= y && bounds.bottom >= y || bounds.bottom < y) {
                 touchDidStartInOrBelowKeypad = true;
                 break;
@@ -2115,18 +2033,18 @@ class MathInput extends React.Component {
     this._clearKeypadBoundsCache());
   }
   render() {
-    var {
+    const {
       focused,
       handle
     } = this.state;
-    var {
+    const {
       style
     } = this.props;
-    var innerStyle = _objectSpread2(_objectSpread2(_objectSpread2({}, inlineStyles$1.innerContainer), {}, {
+    const innerStyle = _extends({}, inlineStyles$1.innerContainer, {
       borderWidth: this.getBorderWidthPx()
     }, focused ? {
       borderColor: wonderBlocksBlue
-    } : {}), style);
+    } : {}, style);
 
     // NOTE(diedra): This label explicitly refers to tapping because this field
     // is currently only seen if the user is using a mobile device.
@@ -2135,7 +2053,7 @@ class MathInput extends React.Component {
     // keyboard appear. It should only require one finger, which is how iOS works.
     // TODO(diedra): Fix the bug that is causing Android to require a two finger tap
     // to the open the keyboard, and then remove the second half of this label.
-    var ariaLabel = i18n._("Math input box") + " " + i18n._("Tap with one or two fingers to open keyboard");
+    const ariaLabel = i18n._("Math input box") + " " + i18n._("Tap with one or two fingers to open keyboard");
     return /*#__PURE__*/React.createElement(View, {
       style: styles$e.input,
       onTouchStart: this.handleTouchStart,
@@ -2166,12 +2084,12 @@ class MathInput extends React.Component {
     })));
   }
 }
-_defineProperty(MathInput, "defaultProps", {
+MathInput.defaultProps = {
   style: {},
   value: ""
-});
-var fontSizePt = 18;
-var inputMaxWidth = 128;
+};
+const fontSizePt = 18;
+const inputMaxWidth = 128;
 
 // The height of numerals in Symbola (rendered at 18pt) is about 20px (though
 // they render at 24px due to padding for ascenders and descenders). We want our
@@ -2179,11 +2097,11 @@ var inputMaxWidth = 128;
 // edge of the input, so we use this 20px number as our 'base height' and
 // account for the ascender and descender padding when computing the additional
 // padding in our `render` method.
-var numeralHeightPx = 20;
-var totalDesiredPadding = 12;
-var minHeightPx = numeralHeightPx + totalDesiredPadding * 2;
-var minWidthPx = 64;
-var styles$e = StyleSheet.create({
+const numeralHeightPx = 20;
+const totalDesiredPadding = 12;
+const minHeightPx = numeralHeightPx + totalDesiredPadding * 2;
+const minWidthPx = 64;
+const styles$e = StyleSheet.create({
   input: {
     position: "relative",
     display: "inline-block",
@@ -2191,7 +2109,7 @@ var styles$e = StyleSheet.create({
     maxWidth: inputMaxWidth
   }
 });
-var inlineStyles$1 = {
+const inlineStyles$1 = {
   // Styles for the inner, MathQuill-ified input element. It's important that
   // these are done with regular inline styles rather than Aphrodite classes
   // as MathQuill adds CSS class names to the element outside of the typical
@@ -2215,7 +2133,7 @@ var inlineStyles$1 = {
   }
 };
 
-var KeyConfigs = {
+const KeyConfigs = {
   // Basic math keys.
   [Keys.PLUS]: {
     type: KeyTypes.OPERATOR,
@@ -2465,13 +2383,13 @@ KeyConfigs[Keys.MANY] = {
 };
 
 // Add in every numeral.
-var NUMBERS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
-for (var num of NUMBERS) {
+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).
-  var textRepresentation = "".concat(num);
-  KeyConfigs["NUM_".concat(num)] = {
+  const textRepresentation = `${num}`;
+  KeyConfigs[`NUM_${num}`] = {
     type: KeyTypes.VALUE,
     ariaLabel: textRepresentation,
     icon: {
@@ -2482,23 +2400,23 @@ for (var num of NUMBERS) {
 }
 
 // Add in every variable.
-var 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 (var letter of LETTERS) {
-  var lowerCaseVariable = letter.toLowerCase();
-  var upperCaseVariable = letter.toUpperCase();
-  for (var _textRepresentation of [lowerCaseVariable, upperCaseVariable]) {
-    KeyConfigs[_textRepresentation] = {
+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: KeyTypes.VALUE,
-      ariaLabel: _textRepresentation,
+      ariaLabel: textRepresentation,
       icon: {
         type: IconTypes.MATH,
-        data: _textRepresentation
+        data: textRepresentation
       }
     };
   }
 }
-for (var key of Object.keys(KeyConfigs)) {
-  KeyConfigs[key] = _objectSpread2({
+for (const key of Object.keys(KeyConfigs)) {
+  KeyConfigs[key] = _extends({
     id: key,
     // Default to an SVG icon indexed by the key name.
     icon: {
@@ -2511,25 +2429,25 @@ for (var key of Object.keys(KeyConfigs)) {
 /**
  * React PropTypes that may be shared between components.
  */
-var iconPropType = PropTypes.shape({
+const iconPropType = PropTypes.shape({
   type: PropTypes.oneOf(Object.keys(IconTypes)).isRequired,
   data: PropTypes.string.isRequired
 });
-var keyIdPropType = PropTypes.oneOf(Object.keys(KeyConfigs));
-var keyConfigPropType = PropTypes.shape({
+const keyIdPropType = PropTypes.oneOf(Object.keys(KeyConfigs));
+const keyConfigPropType = PropTypes.shape({
   ariaLabel: PropTypes.string,
   id: keyIdPropType.isRequired,
   type: PropTypes.oneOf(Object.keys(KeyTypes)).isRequired,
   childKeyIds: PropTypes.arrayOf(keyIdPropType),
   icon: iconPropType.isRequired
 });
-var keypadConfigurationPropType = PropTypes.shape({
+const keypadConfigurationPropType = PropTypes.shape({
   keypadType: PropTypes.oneOf(Object.keys(KeypadTypes)).isRequired,
   extraKeys: PropTypes.arrayOf(keyIdPropType)
 });
 
 // NOTE(jared): This is no longer guaranteed to be React element
-var keypadElementPropType = PropTypes.shape({
+const keypadElementPropType = PropTypes.shape({
   activate: PropTypes.func.isRequired,
   dismiss: PropTypes.func.isRequired,
   configure: PropTypes.func.isRequired,
@@ -2537,8 +2455,8 @@ var keypadElementPropType = PropTypes.shape({
   setKeyHandler: PropTypes.func.isRequired,
   getDOMNode: PropTypes.func.isRequired
 });
-var bordersPropType = PropTypes.arrayOf(PropTypes.oneOf(Object.keys(BorderDirections)));
-var boundingBoxPropType = PropTypes.shape({
+const bordersPropType = PropTypes.arrayOf(PropTypes.oneOf(Object.keys(BorderDirections)));
+const boundingBoxPropType = PropTypes.shape({
   height: PropTypes.number,
   width: PropTypes.number,
   top: PropTypes.number,
@@ -2546,31 +2464,46 @@ var boundingBoxPropType = PropTypes.shape({
   bottom: PropTypes.number,
   left: PropTypes.number
 });
-var echoPropType = PropTypes.shape({
+const echoPropType = PropTypes.shape({
   animationId: PropTypes.string.isRequired,
   animationType: PropTypes.oneOf(Object.keys(EchoAnimationTypes)).isRequired,
   borders: bordersPropType,
   id: keyIdPropType.isRequired,
   initialBounds: boundingBoxPropType.isRequired
 });
-var cursorContextPropType = PropTypes.oneOf(Object.keys(CursorContexts));
-var popoverPropType = PropTypes.shape({
+const cursorContextPropType = PropTypes.oneOf(Object.keys(CursorContexts));
+const popoverPropType = PropTypes.shape({
   parentId: keyIdPropType.isRequired,
   bounds: boundingBoxPropType.isRequired,
   childKeyIds: PropTypes.arrayOf(keyIdPropType).isRequired
 });
 PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]);
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
 // naming convention: verb + noun
 // the noun should be one of the other properties in the object that's
 // being dispatched
 
-var dismissKeypad = () => {
+const dismissKeypad = () => {
   return {
     type: "DismissKeypad"
   };
 };
-var activateKeypad = () => {
+const activateKeypad = () => {
   return {
     type: "ActivateKeypad"
   };
@@ -2581,20 +2514,20 @@ var activateKeypad = () => {
  *
  * See: `prop-types.js#keypadConfigurationPropType`.
  */
-var configureKeypad = configuration => {
+const configureKeypad = configuration => {
   return {
     type: "ConfigureKeypad",
     configuration
   };
 };
-var setPageSize = (pageWidthPx, pageHeightPx) => {
+const setPageSize = (pageWidthPx, pageHeightPx) => {
   return {
     type: "SetPageSize",
     pageWidthPx,
     pageHeightPx
   };
 };
-var removeEcho = animationId => {
+const removeEcho = animationId => {
   return {
     type: "RemoveEcho",
     animationId
@@ -2602,13 +2535,13 @@ var removeEcho = animationId => {
 };
 
 // Input-related actions.
-var setKeyHandler = keyHandler => {
+const setKeyHandler = keyHandler => {
   return {
     type: "SetKeyHandler",
     keyHandler
   };
 };
-var setCursor = cursor => {
+const setCursor = cursor => {
   return {
     type: "SetCursor",
     cursor
@@ -2635,63 +2568,59 @@ var setCursor = cursor => {
  * to be conservative in our measurements and make things smaller than they
  * might need to be.
  */
-var minButtonHeight = 48;
-var maxButtonSize = 64;
-var minSpaceAboveKeypad = 32;
+const minButtonHeight = 48;
+const maxButtonSize = 64;
+const minSpaceAboveKeypad = 32;
 
 // These values are taken from an iPhone 5, but should be consistent with the
 // iPhone 4 as well. Regardless, these are meant to be representative of the
 // possible types of browser chrome that could appear in various context, rather
 // than pixel-perfect for every device.
-var safariNavBarWhenShrunk = 44;
-var safariNavBarWhenExpanded = 64;
-var safariToolbar = 44;
+const safariNavBarWhenShrunk = 44;
+const safariNavBarWhenExpanded = 64;
+const safariToolbar = 44;
 
 // In mobile Safari, the browser chrome is completely hidden in landscape,
 // though a shrunken navbar and full-sized toolbar on scroll. In portrait, the
 // shrunken navbar is always visible, but expands on scroll (and the toolbar
 // appears as well).
-var maxLandscapeBrowserChrome = safariNavBarWhenShrunk + safariToolbar;
-var maxPortraitBrowserChrome = safariToolbar + (safariNavBarWhenExpanded - safariNavBarWhenShrunk);
+const maxLandscapeBrowserChrome = safariNavBarWhenShrunk + safariToolbar;
+const maxPortraitBrowserChrome = safariToolbar + (safariNavBarWhenExpanded - safariNavBarWhenShrunk);
 
 // This represents the 'worst case' aspect ratio that we care about (for
 // portrait layouts). It's taken from the iPhone 4. The height is computed by
 // taking the height of the device and removing the persistent, shrunken navbar.
 // (We don't need to account for the expanded navbar, since we include the
 // difference when reserving space above the keypad.)
-var worstCaseAspectRatio = 320 / (480 - safariNavBarWhenShrunk);
-var computeLayoutParameters = (_ref, _ref2, _ref3, _ref4) => {
-  var {
-    numColumns,
-    numMaxVisibleRows,
-    numPages
-  } = _ref;
-  var {
-    pageWidthPx,
-    pageHeightPx
-  } = _ref2;
-  var {
-    deviceOrientation,
-    deviceType
-  } = _ref3;
-  var {
-    navigationPadEnabled,
-    paginationEnabled,
-    toolbarEnabled
-  } = _ref4;
+const worstCaseAspectRatio = 320 / (480 - safariNavBarWhenShrunk);
+const computeLayoutParameters = ({
+  numColumns,
+  numMaxVisibleRows,
+  numPages
+}, {
+  pageWidthPx,
+  pageHeightPx
+}, {
+  deviceOrientation,
+  deviceType
+}, {
+  navigationPadEnabled,
+  paginationEnabled,
+  toolbarEnabled
+}) => {
   // First, compute some values that will be used in multiple computations.
-  var effectiveNumColumns = paginationEnabled ? numColumns : numColumns * numPages;
+  const effectiveNumColumns = paginationEnabled ? numColumns : numColumns * numPages;
 
   // Then, compute the button dimensions based on the provided parameters.
-  var buttonDimensions;
+  let buttonDimensions;
   if (deviceType === DeviceTypes.PHONE) {
-    var isLandscape = deviceOrientation === DeviceOrientations.LANDSCAPE;
+    const isLandscape = deviceOrientation === DeviceOrientations.LANDSCAPE;
 
     // In many cases, the browser chrome will already have been factored
     // into `pageHeightPx`. But we have no way of knowing if that's
     // the case or not. As such, we take a conservative approach and
     // assume that the chrome is _never_ included in `pageHeightPx`.
-    var browserChromeHeight = isLandscape ? maxLandscapeBrowserChrome : maxPortraitBrowserChrome;
+    const browserChromeHeight = isLandscape ? maxLandscapeBrowserChrome : maxPortraitBrowserChrome;
 
     // Count up all the space that we need to reserve on the page.
     // Namely, we need to account for:
@@ -2699,7 +2628,7 @@ var computeLayoutParameters = (_ref, _ref2, _ref3, _ref4) => {
     //  2. The presence of the exercise toolbar.
     //  3. The presence of the view pager indicator.
     //  4. Any browser chrome that may appear later.
-    var reservedSpace = minSpaceAboveKeypad + browserChromeHeight + (toolbarEnabled ? toolbarHeightPx : 0) + (paginationEnabled ? pageIndicatorHeightPx : 0);
+    const reservedSpace = minSpaceAboveKeypad + browserChromeHeight + (toolbarEnabled ? toolbarHeightPx : 0) + (paginationEnabled ? pageIndicatorHeightPx : 0);
 
     // Next, compute the effective width and height. We can use the page
     // width as the effective width. For the height, though, we take
@@ -2708,18 +2637,18 @@ var computeLayoutParameters = (_ref, _ref2, _ref3, _ref4) => {
     // we ignore the device height in portrait and assume the worst.
     // This prevents the keypad from changing size when browser chrome
     // appears and disappears.
-    var effectiveWidth = pageWidthPx;
-    var effectiveHeight = isLandscape ? pageHeightPx : pageWidthPx / worstCaseAspectRatio;
-    var maxKeypadHeight = effectiveHeight - reservedSpace;
+    const effectiveWidth = pageWidthPx;
+    const effectiveHeight = isLandscape ? pageHeightPx : pageWidthPx / worstCaseAspectRatio;
+    const maxKeypadHeight = effectiveHeight - reservedSpace;
 
     // Finally, compute the button height and width. In computing the
     // height, accommodate for the maximum number of rows that will ever be
     // visible (since the toggling of popovers can increase the number of
     // visible rows).
-    var buttonHeightPx = Math.max(Math.min(maxKeypadHeight / numMaxVisibleRows, maxButtonSize), minButtonHeight);
-    var buttonWidthPx;
+    const buttonHeightPx = Math.max(Math.min(maxKeypadHeight / numMaxVisibleRows, maxButtonSize), minButtonHeight);
+    let buttonWidthPx;
     if (numPages > 1) {
-      var _effectiveNumColumns = paginationEnabled ? numColumns : numColumns * numPages;
+      const _effectiveNumColumns = paginationEnabled ? numColumns : numColumns * numPages;
       buttonWidthPx = effectiveWidth / _effectiveNumColumns;
     } else {
       buttonWidthPx = isLandscape ? maxButtonSize : effectiveWidth / numColumns;
@@ -2739,8 +2668,8 @@ var computeLayoutParameters = (_ref, _ref2, _ref3, _ref4) => {
 
   // Finally, determine whether the keypad should be rendered in the
   // fullscreen layout by determining its resultant width.
-  var numSeparators = (navigationPadEnabled ? 1 : 0) + (!paginationEnabled ? numPages - 1 : 0);
-  var keypadWidth = effectiveNumColumns * buttonDimensions.widthPx + (navigationPadEnabled ? navigationPadWidthPx : 0) + numSeparators * innerBorderWidthPx;
+  const numSeparators = (navigationPadEnabled ? 1 : 0) + (!paginationEnabled ? numPages - 1 : 0);
+  const keypadWidth = effectiveNumColumns * buttonDimensions.widthPx + (navigationPadEnabled ? navigationPadWidthPx : 0) + numSeparators * innerBorderWidthPx;
   return {
     buttonDimensions,
     layoutMode: keypadWidth >= pageWidthPx ? LayoutModes.FULLSCREEN : LayoutModes.COMPACT
@@ -2755,7 +2684,7 @@ var computeLayoutParameters = (_ref, _ref2, _ref3, _ref4) => {
  * multi-touch interactions, tracking gesture state on a per-touch basis.
  */
 
-var defaults = {
+const defaults = {
   longPressWaitTimeMs: 50,
   swipeThresholdPx: 20,
   holdIntervalMs: 250
@@ -2763,34 +2692,34 @@ var defaults = {
 class GestureStateMachine {
   constructor(handlers, options, swipeDisabledNodeIds, multiPressableKeys) {
     this.handlers = handlers;
-    this.options = _objectSpread2(_objectSpread2({}, defaults), options);
+    this.options = _extends({}, defaults, options);
     this.swipeDisabledNodeIds = swipeDisabledNodeIds || [];
     this.multiPressableKeys = multiPressableKeys || [];
 
-    // TODO(charlie): Flow-type this file. It's not great that we're now
+    // TODO(charlie): Add types for this file. It's not great that we're now
     // passing around these opaque state objects.
     this.touchState = {};
     this.swipeState = null;
   }
   _maybeCancelLongPressForTouch(touchId) {
-    var {
+    const {
       longPressTimeoutId
     } = this.touchState[touchId];
     if (longPressTimeoutId) {
       clearTimeout(longPressTimeoutId);
-      this.touchState[touchId] = _objectSpread2(_objectSpread2({}, this.touchState[touchId]), {}, {
+      this.touchState[touchId] = _extends({}, this.touchState[touchId], {
         longPressTimeoutId: null
       });
     }
   }
   _maybeCancelPressAndHoldForTouch(touchId) {
-    var {
+    const {
       pressAndHoldIntervalId
     } = this.touchState[touchId];
     if (pressAndHoldIntervalId) {
       // If there was an interval set to detect holds, clear it out.
       clearInterval(pressAndHoldIntervalId);
-      this.touchState[touchId] = _objectSpread2(_objectSpread2({}, this.touchState[touchId]), {}, {
+      this.touchState[touchId] = _extends({}, this.touchState[touchId], {
         pressAndHoldIntervalId: null
       });
     }
@@ -2823,7 +2752,7 @@ class GestureStateMachine {
     // indicates that a gesture that can focus future nodes is still in
     // progress, but that no node is currently focused. The latter
     // indicates that the gesture has ended and nothing will be focused.
-    this.touchState[touchId] = _objectSpread2(_objectSpread2({}, this.touchState[touchId]), {}, {
+    this.touchState[touchId] = _extends({}, this.touchState[touchId], {
       activeNodeId: id
     });
     this.handlers.onFocus(id);
@@ -2834,7 +2763,7 @@ class GestureStateMachine {
         this.handlers.onTrigger(id);
 
         // Set up a new hold detector for the current button.
-        this.touchState[touchId] = _objectSpread2(_objectSpread2({}, this.touchState[touchId]), {}, {
+        this.touchState[touchId] = _extends({}, this.touchState[touchId], {
           pressAndHoldIntervalId: setInterval(() => {
             // On every cycle, trigger the click handler.
             this.handlers.onTrigger(id);
@@ -2842,10 +2771,10 @@ class GestureStateMachine {
         });
       } else {
         // Set up a new hold detector for the current button.
-        this.touchState[touchId] = _objectSpread2(_objectSpread2({}, this.touchState[touchId]), {}, {
+        this.touchState[touchId] = _extends({}, this.touchState[touchId], {
           longPressTimeoutId: setTimeout(() => {
             this.handlers.onLongPress(id);
-            this.touchState[touchId] = _objectSpread2(_objectSpread2({}, this.touchState[touchId]), {}, {
+            this.touchState[touchId] = _extends({}, this.touchState[touchId], {
               longPressTimeoutId: null
             });
           }, this.options.longPressWaitTimeMs)
@@ -2858,7 +2787,7 @@ class GestureStateMachine {
    * Clear out all active gesture information.
    */
   _onSwipeStart() {
-    for (var activeTouchId of Object.keys(this.touchState)) {
+    for (const activeTouchId of Object.keys(this.touchState)) {
       this._maybeCancelLongPressForTouch(activeTouchId);
       this._maybeCancelPressAndHoldForTouch(activeTouchId);
     }
@@ -2901,7 +2830,7 @@ class GestureStateMachine {
       // here anyways.
       return;
     }
-    var startingNodeId = getId();
+    const startingNodeId = getId();
     this.touchState[touchId] = {
       swipeLocked: this.swipeDisabledNodeIds.includes(startingNodeId),
       startX: pageX
@@ -2929,13 +2858,13 @@ class GestureStateMachine {
     } else if (this.touchState[touchId]) {
       // It could be touch events started outside the keypad and
       // moved into it; ignore them.
-      var {
+      const {
         activeNodeId,
         startX,
         swipeLocked
       } = this.touchState[touchId];
-      var dx = pageX - startX;
-      var shouldBeginSwiping = swipeEnabled && !swipeLocked && Math.abs(dx) > this.options.swipeThresholdPx;
+      const dx = pageX - startX;
+      const shouldBeginSwiping = swipeEnabled && !swipeLocked && Math.abs(dx) > this.options.swipeThresholdPx;
       if (shouldBeginSwiping) {
         this._onSwipeStart();
 
@@ -2946,7 +2875,7 @@ class GestureStateMachine {
         };
         this.handlers.onSwipeChange(pageX - this.swipeState.startX);
       } else {
-        var id = getId();
+        const id = getId();
         if (id !== activeNodeId) {
           this._onFocus(id, touchId);
         }
@@ -2973,12 +2902,12 @@ class GestureStateMachine {
     } else if (this.touchState[touchId]) {
       // It could be touch events started outside the keypad and
       // moved into it; ignore them.
-      var {
+      const {
         activeNodeId,
         pressAndHoldIntervalId
       } = this.touchState[touchId];
       this._cleanupTouchEvent(touchId);
-      var didPressAndHold = !!pressAndHoldIntervalId;
+      const didPressAndHold = !!pressAndHoldIntervalId;
       if (didPressAndHold) {
         // We don't trigger a touch end if there was a press and hold,
         // because the key has been triggered at least once and calling
@@ -3066,12 +2995,12 @@ class NodeManager {
     // Make sure that any children appear first.
     // TODO(charlie): This is a very simplistic system that wouldn't
     // properly handle multiple levels of nesting.
-    var allIds = [...(childIds || []), id, ...this._orderedIds];
+    const allIds = [...(childIds || []), id, ...this._orderedIds];
 
     // De-dupe the list of IDs.
-    var orderedIds = [];
-    var seenIds = {};
-    for (var _id of allIds) {
+    const orderedIds = [];
+    const seenIds = {};
+    for (const _id of allIds) {
       if (!seenIds[_id]) {
         orderedIds.push(_id);
         seenIds[_id] = true;
@@ -3099,10 +3028,10 @@ class NodeManager {
    *                          the given coordinates
    */
   idForCoords(x, y) {
-    for (var id of this._orderedIds) {
-      var domNode = this._nodesById[id];
+    for (const id of this._orderedIds) {
+      const domNode = this._nodesById[id];
       if (domNode) {
-        var bounds = domNode.getBoundingClientRect();
+        const bounds = domNode.getBoundingClientRect();
         if (bounds.left <= x && bounds.right > x && bounds.top <= y && bounds.bottom > y) {
           this._cachedBoundingBoxesById[id] = bounds;
           return id;
@@ -3122,7 +3051,7 @@ class NodeManager {
    */
   layoutPropsForId(id) {
     if (!this._cachedBoundingBoxesById[id]) {
-      var node = this._nodesById[id];
+      const node = this._nodesById[id];
       this._cachedBoundingBoxesById[id] = node ? node.getBoundingClientRect() : new DOMRect();
     }
     return {
@@ -3261,7 +3190,7 @@ class PopoverStateMachine {
    *                      ended
    */
   onTouchEnd(id) {
-    var inPopover = !!this.activePopover;
+    const inPopover = !!this.activePopover;
     if (inPopover) {
       // If we have a popover that is currently active, we trigger a
       // click on this node if and only if it's in the popover, with the
@@ -3275,16 +3204,16 @@ class PopoverStateMachine {
       if (this._isNodeInsidePopover(this.activePopover, id)) {
         this.handlers.onClick(id, id, inPopover);
       } else if (this.activePopover === id) {
-        var keyId = this._defaultNodeForPopover(id);
+        const keyId = this._defaultNodeForPopover(id);
         this.handlers.onClick(keyId, keyId, inPopover);
       }
     } else if (this.popovers[id]) {
       // Otherwise, if the node is itself a popover revealer, trigger the
       // clicking of its default node, but pass back the popover node ID
       // for layout purposes.
-      var _keyId = this._defaultNodeForPopover(id);
-      var domNodeId = id;
-      this.handlers.onClick(_keyId, domNodeId, inPopover);
+      const keyId = this._defaultNodeForPopover(id);
+      const domNodeId = id;
+      this.handlers.onClick(keyId, domNodeId, inPopover);
     } else if (id != null) {
       // Finally, if we have no active popover, and we touched up over a
       // valid key, trigger a click.
@@ -3300,13 +3229,13 @@ class PopoverStateMachine {
   }
 }
 
-var _excluded$5 = ["popover"];
-var coordsForEvent = evt => {
+const _excluded$5 = ["popover"];
+const coordsForEvent = evt => {
   return [evt.changedTouches[0].clientX, evt.changedTouches[0].clientY];
 };
 class GestureManager {
   constructor(options, handlers, disabledSwipeKeys, multiPressableKeys) {
-    var {
+    const {
       swipeEnabled
     } = options;
     this.swipeEnabled = swipeEnabled;
@@ -3316,11 +3245,11 @@ class GestureManager {
     this.nodeManager = new NodeManager();
     this.popoverStateMachine = new PopoverStateMachine({
       onActiveNodesChanged: activeNodes => {
-        var {
+        const {
             popover
           } = activeNodes,
-          rest = _objectWithoutProperties(activeNodes, _excluded$5);
-        handlers.onActiveNodesChanged(_objectSpread2({
+          rest = _objectWithoutPropertiesLoose(activeNodes, _excluded$5);
+        handlers.onActiveNodesChanged(_extends({
           popover: popover && {
             parentId: popover.parentId,
             bounds: this.nodeManager.layoutPropsForId(popover.parentId).initialBounds,
@@ -3381,13 +3310,13 @@ class GestureManager {
     if (!this.trackEvents) {
       return;
     }
-    var [x] = coordsForEvent(evt);
+    const [x] = coordsForEvent(evt);
 
     // TODO(charlie): It doesn't seem to be guaranteed that every touch
     // event on `changedTouches` originates from the node through which this
     // touch event was sent. In that case, we'd be inappropriately reporting
     // the starting node ID.
-    for (var i = 0; i < evt.changedTouches.length; i++) {
+    for (let i = 0; i < evt.changedTouches.length; i++) {
       this.gestureStateMachine.onTouchStart(() => id, evt.changedTouches[i].identifier, x);
     }
 
@@ -3406,10 +3335,10 @@ class GestureManager {
     if (!this.trackEvents) {
       return;
     }
-    var swipeLocked = this.popoverStateMachine.isPopoverVisible();
-    var swipeEnabled = this.swipeEnabled && !swipeLocked;
-    var [x, y] = coordsForEvent(evt);
-    for (var i = 0; i < evt.changedTouches.length; i++) {
+    const swipeLocked = this.popoverStateMachine.isPopoverVisible();
+    const swipeEnabled = this.swipeEnabled && !swipeLocked;
+    const [x, y] = coordsForEvent(evt);
+    for (let i = 0; i < evt.changedTouches.length; i++) {
       this.gestureStateMachine.onTouchMove(() => this.nodeManager.idForCoords(x, y), evt.changedTouches[i].identifier, x, swipeEnabled);
     }
   }
@@ -3424,8 +3353,8 @@ class GestureManager {
     if (!this.trackEvents) {
       return;
     }
-    var [x, y] = coordsForEvent(evt);
-    for (var i = 0; i < evt.changedTouches.length; i++) {
+    const [x, y] = coordsForEvent(evt);
+    for (let i = 0; i < evt.changedTouches.length; i++) {
       this.gestureStateMachine.onTouchEnd(() => this.nodeManager.idForCoords(x, y), evt.changedTouches[i].identifier, x);
     }
   }
@@ -3440,7 +3369,7 @@ class GestureManager {
     if (!this.trackEvents) {
       return;
     }
-    for (var i = 0; i < evt.changedTouches.length; i++) {
+    for (let i = 0; i < evt.changedTouches.length; i++) {
       this.gestureStateMachine.onTouchCancel(evt.changedTouches[i].identifier);
     }
   }
@@ -3487,12 +3416,15 @@ class GestureManager {
   }
 }
 
+/**
+ * A small triangular decal to sit in the corner of a parent component.
+ */
 class CornerDecal extends React.Component {
   render() {
-    var {
+    const {
       style
     } = this.props;
-    var containerStyle = [styles$d.container, ...(Array.isArray(style) ? style : [style])];
+    const containerStyle = [styles$d.container, ...(Array.isArray(style) ? style : [style])];
     return /*#__PURE__*/React.createElement(View, {
       style: containerStyle
     }, /*#__PURE__*/React.createElement("svg", {
@@ -3506,11 +3438,11 @@ class CornerDecal extends React.Component {
     })));
   }
 }
-_defineProperty(CornerDecal, "propTypes", {
+CornerDecal.propTypes = {
   style: PropTypes.any
-});
-var triangleSizePx = 7;
-var styles$d = StyleSheet.create({
+};
+const triangleSizePx = 7;
+const styles$d = StyleSheet.create({
   container: {
     position: "absolute",
     top: 0,
@@ -3554,19 +3486,22 @@ var Styles = StyleSheet.create({
   }
 });
 
-var {
+/**
+ * A component that renders an icon with math (via KaTeX).
+ */
+const {
   row: row$7,
   centered: centered$4
 } = Styles;
 class MathIcon extends React.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "_renderMath", () => {
-      var {
+  constructor(...args) {
+    super(...args);
+    this._renderMath = () => {
+      const {
         math
       } = this.props;
       katex.render(math, ReactDOM.findDOMNode(this));
-    });
+    };
   }
   componentDidMount() {
     this._renderMath();
@@ -3577,20 +3512,20 @@ class MathIcon extends React.Component {
     }
   }
   render() {
-    var {
+    const {
       style
     } = this.props;
-    var containerStyle = [row$7, centered$4, styles$c.size, styles$c.base, ...(Array.isArray(style) ? style : [style])];
+    const containerStyle = [row$7, centered$4, styles$c.size, styles$c.base, ...(Array.isArray(style) ? style : [style])];
     return /*#__PURE__*/React.createElement(View, {
       style: containerStyle
     });
   }
 }
-_defineProperty(MathIcon, "propTypes", {
+MathIcon.propTypes = {
   math: PropTypes.string.isRequired,
   style: PropTypes.any
-});
-var styles$c = StyleSheet.create({
+};
+const styles$c = StyleSheet.create({
   size: {
     height: iconSizeHeightPx,
     width: iconSizeWidthPx
@@ -3600,6 +3535,11 @@ var styles$c = StyleSheet.create({
   }
 });
 
+/**
+ * An autogenerated component that renders the COS iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Cos extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -3621,10 +3561,15 @@ class Cos extends React.Component {
     })));
   }
 }
-_defineProperty(Cos, "propTypes", {
+Cos.propTypes = {
   color: PropTypes.string.isRequired
-});
+};
 
+/**
+ * An autogenerated component that renders the LOG iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Log extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -3643,10 +3588,15 @@ class Log extends React.Component {
     })));
   }
 }
-_defineProperty(Log, "propTypes", {
+Log.propTypes = {
   color: PropTypes.string.isRequired
-});
+};
 
+/**
+ * An autogenerated component that renders the EQUAL iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Equal extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -3671,16 +3621,16 @@ class Equal extends React.Component {
     })));
   }
 }
-_defineProperty(Equal, "propTypes", {
+Equal.propTypes = {
   color: PropTypes.string.isRequired
-});
+};
 
 /**
  * An autogenerated component that renders the BACKSPACE iconograpy in SVG.
  *
  * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
  */
-var Backspace = () => {
+const Backspace = () => {
   return /*#__PURE__*/React.createElement("svg", {
     width: "48",
     height: "48",
@@ -3703,6 +3653,11 @@ var Backspace = () => {
   })));
 };
 
+/**
+ * An autogenerated component that renders the SQRT iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Sqrt extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -3724,10 +3679,15 @@ class Sqrt extends React.Component {
     })));
   }
 }
-_defineProperty(Sqrt, "propTypes", {
+Sqrt.propTypes = {
   color: PropTypes.string.isRequired
-});
+};
 
+/**
+ * An autogenerated component that renders the EXP iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Exp extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -3746,10 +3706,15 @@ class Exp extends React.Component {
     })));
   }
 }
-_defineProperty(Exp, "propTypes", {
+Exp.propTypes = {
   color: PropTypes.string.isRequired
-});
+};
 
+/**
+ * An autogenerated component that renders the NEQ iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Neq extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -3774,10 +3739,15 @@ class Neq extends React.Component {
     })));
   }
 }
-_defineProperty(Neq, "propTypes", {
+Neq.propTypes = {
   color: PropTypes.string.isRequired
-});
+};
 
+/**
+ * An autogenerated component that renders the GEQ iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Geq extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -3802,10 +3772,15 @@ class Geq extends React.Component {
     })));
   }
 }
-_defineProperty(Geq, "propTypes", {
+Geq.propTypes = {
   color: PropTypes.string.isRequired
-});
+};
 
+/**
+ * An autogenerated component that renders the LN iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Ln extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -3824,16 +3799,16 @@ class Ln extends React.Component {
     })));
   }
 }
-_defineProperty(Ln, "propTypes", {
+Ln.propTypes = {
   color: PropTypes.string.isRequired
-});
+};
 
 /**
  * An autogenerated component that renders the DISMISS iconograpy in SVG.
  *
  * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
  */
-var Dismiss = () => {
+const Dismiss = () => {
   return /*#__PURE__*/React.createElement("svg", {
     width: "48",
     height: "48",
@@ -3853,6 +3828,11 @@ var Dismiss = () => {
   })));
 };
 
+/**
+ * An autogenerated component that renders the SIN iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Sin extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -3874,10 +3854,15 @@ class Sin extends React.Component {
     })));
   }
 }
-_defineProperty(Sin, "propTypes", {
+Sin.propTypes = {
   color: PropTypes.string.isRequired
-});
+};
 
+/**
+ * An autogenerated component that renders the LT iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Lt extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -3902,10 +3887,15 @@ class Lt extends React.Component {
     })));
   }
 }
-_defineProperty(Lt, "propTypes", {
+Lt.propTypes = {
   color: PropTypes.string.isRequired
-});
+};
 
+/**
+ * An autogenerated component that renders the CUBE_ROOT iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class CubeRoot extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -3930,10 +3920,15 @@ class CubeRoot extends React.Component {
     })));
   }
 }
-_defineProperty(CubeRoot, "propTypes", {
+CubeRoot.propTypes = {
   color: PropTypes.string.isRequired
-});
+};
 
+/**
+ * An autogenerated component that renders the PLUS iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Plus extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -3955,10 +3950,15 @@ class Plus extends React.Component {
     })));
   }
 }
-_defineProperty(Plus, "propTypes", {
+Plus.propTypes = {
   color: PropTypes.string.isRequired
-});
+};
 
+/**
+ * An autogenerated component that renders the TAN iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Tan extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -3980,11 +3980,11 @@ class Tan extends React.Component {
     })));
   }
 }
-_defineProperty(Tan, "propTypes", {
+Tan.propTypes = {
   color: PropTypes.string.isRequired
-});
+};
 
-var Arrow = props => {
+const Arrow = props => {
   return /*#__PURE__*/React.createElement("g", _extends({
     fill: "none",
     fillRule: "evenodd"
@@ -4006,7 +4006,7 @@ var Arrow = props => {
 /**
  * An component that renders the LEFT iconograpy in SVG.
  */
-var Left = () => {
+const Left = () => {
   return /*#__PURE__*/React.createElement("svg", {
     width: "48",
     height: "48",
@@ -4017,7 +4017,7 @@ var Left = () => {
 /**
  * A component that renders the UP iconograpy in SVG.
  */
-var Up = () => {
+const Up = () => {
   return /*#__PURE__*/React.createElement("svg", {
     width: "48",
     height: "48",
@@ -4030,7 +4030,7 @@ var Up = () => {
 /**
  * A component that renders the DOWN iconograpy in SVG.
  */
-var Down = () => {
+const Down = () => {
   return /*#__PURE__*/React.createElement("svg", {
     width: "48",
     height: "48",
@@ -4040,6 +4040,11 @@ var Down = () => {
   }));
 };
 
+/**
+ * An autogenerated component that renders the LEFT_PAREN iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class LeftParen extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -4064,10 +4069,15 @@ class LeftParen extends React.Component {
     })));
   }
 }
-_defineProperty(LeftParen, "propTypes", {
+LeftParen.propTypes = {
   color: PropTypes.string.isRequired
-});
+};
 
+/**
+ * An autogenerated component that renders the RIGHT_PAREN iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class RightParen extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -4092,10 +4102,15 @@ class RightParen extends React.Component {
     })));
   }
 }
-_defineProperty(RightParen, "propTypes", {
+RightParen.propTypes = {
   color: PropTypes.string.isRequired
-});
+};
 
+/**
+ * An autogenerated component that renders the GT iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Gt extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -4120,10 +4135,15 @@ class Gt extends React.Component {
     })));
   }
 }
-_defineProperty(Gt, "propTypes", {
+Gt.propTypes = {
   color: PropTypes.string.isRequired
-});
+};
 
+/**
+ * An autogenerated component that renders the DIVIDE iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Divide extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -4155,10 +4175,15 @@ class Divide extends React.Component {
     })));
   }
 }
-_defineProperty(Divide, "propTypes", {
+Divide.propTypes = {
   color: PropTypes.string.isRequired
-});
+};
 
+/**
+ * An autogenerated component that renders the PERIOD iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Period extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -4179,10 +4204,15 @@ class Period extends React.Component {
     })));
   }
 }
-_defineProperty(Period, "propTypes", {
+Period.propTypes = {
   color: PropTypes.string.isRequired
-});
+};
 
+/**
+ * An autogenerated component that renders the PERCENT iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Percent extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -4221,10 +4251,15 @@ class Percent extends React.Component {
     }))));
   }
 }
-_defineProperty(Percent, "propTypes", {
+Percent.propTypes = {
   color: PropTypes.string.isRequired
-});
+};
 
+/**
+ * An autogenerated component that renders the TIMES iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Times extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -4249,10 +4284,15 @@ class Times extends React.Component {
     })));
   }
 }
-_defineProperty(Times, "propTypes", {
+Times.propTypes = {
   color: PropTypes.string.isRequired
-});
+};
 
+/**
+ * An autogenerated component that renders the EXP_3 iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Exp3 extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -4271,10 +4311,15 @@ class Exp3 extends React.Component {
     })));
   }
 }
-_defineProperty(Exp3, "propTypes", {
+Exp3.propTypes = {
   color: PropTypes.string.isRequired
-});
+};
 
+/**
+ * An autogenerated component that renders the EXP_2 iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Exp2 extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -4293,14 +4338,14 @@ class Exp2 extends React.Component {
     })));
   }
 }
-_defineProperty(Exp2, "propTypes", {
+Exp2.propTypes = {
   color: PropTypes.string.isRequired
-});
+};
 
 /**
  * A component that renders the RIGHT iconograpy in SVG.
  */
-var Right = () => {
+const Right = () => {
   return /*#__PURE__*/React.createElement("svg", {
     width: "48",
     height: "48",
@@ -4310,6 +4355,11 @@ var Right = () => {
   }));
 };
 
+/**
+ * An autogenerated component that renders the CDOT iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Cdot extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -4335,10 +4385,15 @@ class Cdot extends React.Component {
     }))));
   }
 }
-_defineProperty(Cdot, "propTypes", {
+Cdot.propTypes = {
   color: PropTypes.string.isRequired
-});
+};
 
+/**
+ * An autogenerated component that renders the LOG_N iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class LogN extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -4357,10 +4412,15 @@ class LogN extends React.Component {
     })));
   }
 }
-_defineProperty(LogN, "propTypes", {
+LogN.propTypes = {
   color: PropTypes.string.isRequired
-});
+};
 
+/**
+ * An autogenerated component that renders the LEQ iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Leq extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -4385,10 +4445,15 @@ class Leq extends React.Component {
     })));
   }
 }
-_defineProperty(Leq, "propTypes", {
+Leq.propTypes = {
   color: PropTypes.string.isRequired
-});
+};
 
+/**
+ * An autogenerated component that renders the MINUS iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Minus extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -4410,10 +4475,15 @@ class Minus extends React.Component {
     })));
   }
 }
-_defineProperty(Minus, "propTypes", {
+Minus.propTypes = {
   color: PropTypes.string.isRequired
-});
+};
 
+/**
+ * An autogenerated component that renders the RADICAL iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Radical extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -4438,10 +4508,15 @@ class Radical extends React.Component {
     })));
   }
 }
-_defineProperty(Radical, "propTypes", {
+Radical.propTypes = {
   color: PropTypes.string.isRequired
-});
+};
 
+/**
+ * An autogenerated component that renders the FRAC iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class FracInclusive extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -4475,16 +4550,16 @@ class FracInclusive extends React.Component {
     }))));
   }
 }
-_defineProperty(FracInclusive, "propTypes", {
+FracInclusive.propTypes = {
   color: PropTypes.string.isRequired
-});
+};
 
 /**
  * An autogenerated component that renders the JUMP_OUT_PARENTHESES iconograpy in SVG.
  *
  * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
  */
-var JumpOutParentheses = () => {
+const JumpOutParentheses = () => {
   return /*#__PURE__*/React.createElement("svg", {
     width: "48",
     height: "48",
@@ -4518,7 +4593,7 @@ var JumpOutParentheses = () => {
  *
  * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
  */
-var JumpOutExponent = () => {
+const JumpOutExponent = () => {
   return /*#__PURE__*/React.createElement("svg", {
     width: "48",
     height: "48",
@@ -4549,7 +4624,7 @@ var JumpOutExponent = () => {
  *
  * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
  */
-var JumpOutBase = () => {
+const JumpOutBase = () => {
   return /*#__PURE__*/React.createElement("svg", {
     width: "48",
     height: "48",
@@ -4580,7 +4655,7 @@ var JumpOutBase = () => {
  *
  * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
  */
-var JumpIntoNumerator = () => {
+const JumpIntoNumerator = () => {
   return /*#__PURE__*/React.createElement("svg", {
     width: "48",
     height: "48",
@@ -4620,7 +4695,7 @@ var JumpIntoNumerator = () => {
  *
  * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
  */
-var JumpOutNumerator = () => {
+const JumpOutNumerator = () => {
   return /*#__PURE__*/React.createElement("svg", {
     width: "48",
     height: "48",
@@ -4660,7 +4735,7 @@ var JumpOutNumerator = () => {
  *
  * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
  */
-var JumpOutDenominator = () => {
+const JumpOutDenominator = () => {
   return /*#__PURE__*/React.createElement("svg", {
     width: "48",
     height: "48",
@@ -4742,46 +4817,52 @@ var Iconography = /*#__PURE__*/Object.freeze({
   JUMP_OUT_DENOMINATOR: JumpOutDenominator
 });
 
+/**
+ * A component that renders a single SVG icon.
+ */
 class SvgIcon extends React.Component {
   render() {
-    var {
+    const {
       color,
       name
     } = this.props;
 
     // eslint-disable-next-line import/namespace
-    var SvgForName = Iconography[name];
+    const SvgForName = Iconography[name];
     return /*#__PURE__*/React.createElement(SvgForName, {
       color: color
     });
   }
 }
-_defineProperty(SvgIcon, "propTypes", {
+SvgIcon.propTypes = {
   color: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired
-});
+};
 
-var {
+/**
+ * A component that renders a text-based icon.
+ */
+const {
   row: row$6,
   centered: centered$3
 } = Styles;
 class TextIcon extends React.Component {
   render() {
-    var {
+    const {
       character,
       style
     } = this.props;
-    var containerStyle = [row$6, centered$3, styles$b.size, styles$b.base, ...(Array.isArray(style) ? style : [style])];
+    const containerStyle = [row$6, centered$3, styles$b.size, styles$b.base, ...(Array.isArray(style) ? style : [style])];
     return /*#__PURE__*/React.createElement(View, {
       style: containerStyle
     }, /*#__PURE__*/React.createElement(Text, null, character));
   }
 }
-_defineProperty(TextIcon, "propTypes", {
+TextIcon.propTypes = {
   character: PropTypes.string.isRequired,
   style: PropTypes.any
-});
-var styles$b = StyleSheet.create({
+};
+const styles$b = StyleSheet.create({
   size: {
     height: iconSizeHeightPx,
     width: iconSizeWidthPx
@@ -4792,16 +4873,19 @@ var styles$b = StyleSheet.create({
   }
 });
 
-var focusedColor = "#FFF";
-var unfocusedColor = offBlack;
+/**
+ * A component that renders an icon for a symbol with the given name.
+ */
+const focusedColor = "#FFF";
+const unfocusedColor = offBlack;
 class Icon extends React.PureComponent {
   render() {
-    var {
+    const {
       focused,
       icon,
       style
     } = this.props;
-    var styleWithFocus = [focused ? styles$a.focused : styles$a.unfocused, ...(Array.isArray(style) ? style : [style])];
+    const styleWithFocus = [focused ? styles$a.focused : styles$a.unfocused, ...(Array.isArray(style) ? style : [style])];
     switch (icon.type) {
       case IconTypes.MATH:
         return /*#__PURE__*/React.createElement(MathIcon, {
@@ -4826,15 +4910,15 @@ class Icon extends React.PureComponent {
     throw new Error("No icon or symbol provided");
   }
 }
-_defineProperty(Icon, "propTypes", {
+Icon.propTypes = {
   focused: PropTypes.bool,
   icon: iconPropType.isRequired,
   // An Aphrodite style object, or an array of Aphrodite style objects.
   // Note that custom styles will only be applied to text and math icons
   // (and not SVG icons).
   style: PropTypes.any
-});
-var styles$a = StyleSheet.create({
+};
+const styles$a = StyleSheet.create({
   unfocused: {
     color: unfocusedColor
   },
@@ -4843,7 +4927,11 @@ var styles$a = StyleSheet.create({
   }
 });
 
-var {
+/**
+ * A grid of symbols, rendered as text and positioned based on the number of
+ * symbols provided. Up to four symbols will be shown.
+ */
+const {
   row: row$5,
   column: column$3,
   centered: centered$2,
@@ -4851,7 +4939,7 @@ var {
 } = Styles;
 class MultiSymbolGrid extends React.Component {
   render() {
-    var {
+    const {
       focused,
       icons
     } = this.props;
@@ -4863,7 +4951,7 @@ class MultiSymbolGrid extends React.Component {
     // some styles coercion and doesn't seem worthwhile right now.
     icons.forEach(icon => {
       if (icon.type !== IconTypes.MATH) {
-        throw new Error("Received invalid icon: type=".concat(icon.type, ", ") + "data=".concat(icon.data));
+        throw new Error(`Received invalid icon: type=${icon.type}, ` + `data=${icon.data}`);
       }
     });
     if (icons.length === 1) {
@@ -4872,8 +4960,8 @@ class MultiSymbolGrid extends React.Component {
         focused: focused
       });
     } else {
-      var primaryIconStyle = styles$9.base;
-      var secondaryIconStyle = [styles$9.base, styles$9.secondary];
+      const primaryIconStyle = styles$9.base;
+      const secondaryIconStyle = [styles$9.base, styles$9.secondary];
       if (icons.length === 2) {
         return /*#__PURE__*/React.createElement(View, {
           style: [row$5, styles$9.size]
@@ -4927,13 +5015,13 @@ class MultiSymbolGrid extends React.Component {
     throw new Error("Invalid number of icons:", icons.length);
   }
 }
-_defineProperty(MultiSymbolGrid, "propTypes", {
+MultiSymbolGrid.propTypes = {
   focused: PropTypes.bool,
   icons: PropTypes.arrayOf(iconPropType).isRequired
-});
-var verticalInsetPx = 2;
-var horizontalInsetPx = 4;
-var styles$9 = StyleSheet.create({
+};
+const verticalInsetPx = 2;
+const horizontalInsetPx = 4;
+const styles$9 = StyleSheet.create({
   size: {
     height: iconSizeHeightPx,
     width: iconSizeWidthPx
@@ -4972,9 +5060,9 @@ var styles$9 = StyleSheet.create({
 
 // eslint-disable-next-line react/no-unsafe
 class KeypadButton extends React.PureComponent {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "_preInjectStyles", () => {
+  constructor(...args) {
+    super(...args);
+    this._preInjectStyles = () => {
       // HACK(charlie): Pre-inject all of the possible styles for the button.
       // This avoids a flickering effect in the echo animation whereby the
       // echoes vary in size as they animate. Note that we need to account for
@@ -4983,25 +5071,25 @@ class KeypadButton extends React.PureComponent {
       // object. This method must be called whenever a property that
       // influences the possible outcomes of `this._getFocusStyle` and
       // `this._getButtonStyle` changes (such as `this.buttonSizeStyle`).
-      for (var type of Object.keys(KeyTypes)) {
+      for (const type of Object.keys(KeyTypes)) {
         css(View.styles.initial, ...this._getFocusStyle(type));
-        for (var borders of Object.values(BorderStyles)) {
+        for (const borders of Object.values(BorderStyles)) {
           css(View.styles.initial, ...this._getButtonStyle(type, borders));
         }
       }
-    });
-    _defineProperty(this, "_getFocusStyle", type => {
-      var focusBackgroundStyle;
+    };
+    this._getFocusStyle = type => {
+      let focusBackgroundStyle;
       if (type === KeyTypes.INPUT_NAVIGATION || type === KeyTypes.KEYPAD_NAVIGATION) {
         focusBackgroundStyle = styles$8.light;
       } else {
         focusBackgroundStyle = styles$8.bright;
       }
       return [styles$8.focusBox, focusBackgroundStyle];
-    });
-    _defineProperty(this, "_getButtonStyle", (type, borders, style) => {
+    };
+    this._getButtonStyle = (type, borders, style) => {
       // Select the appropriate style for the button.
-      var backgroundStyle;
+      let backgroundStyle;
       switch (type) {
         case KeyTypes.EMPTY:
           backgroundStyle = styles$8.empty;
@@ -5021,7 +5109,7 @@ class KeypadButton extends React.PureComponent {
           backgroundStyle = null;
           break;
       }
-      var borderStyle = [];
+      const borderStyle = [];
       if (borders.indexOf(BorderDirections.LEFT) !== -1) {
         borderStyle.push(styles$8.leftBorder);
       }
@@ -5033,7 +5121,7 @@ class KeypadButton extends React.PureComponent {
       // components.
       //   See: https://facebook.github.io/react-native/docs/style.html
       ...(Array.isArray(style) ? style : [style])];
-    });
+    };
   }
   UNSAFE_componentWillMount() {
     this.buttonSizeStyle = styleForButtonDimensions(this.props.heightPx, this.props.widthPx);
@@ -5052,7 +5140,7 @@ class KeypadButton extends React.PureComponent {
     }
   }
   render() {
-    var {
+    const {
       ariaLabel,
       borders,
       childKeys,
@@ -5070,20 +5158,20 @@ class KeypadButton extends React.PureComponent {
 
     // We render in the focus state if the key is focused, or if it's an
     // echo.
-    var renderFocused = !disabled && focused || popoverEnabled || type === KeyTypes.ECHO;
-    var buttonStyle = this._getButtonStyle(type, borders, style);
-    var focusStyle = this._getFocusStyle(type);
-    var iconWrapperStyle = [styles$8.iconWrapper, disabled && styles$8.disabled];
-    var eventHandlers = {
+    const renderFocused = !disabled && focused || popoverEnabled || type === KeyTypes.ECHO;
+    const buttonStyle = this._getButtonStyle(type, borders, style);
+    const focusStyle = this._getFocusStyle(type);
+    const iconWrapperStyle = [styles$8.iconWrapper, disabled && styles$8.disabled];
+    const eventHandlers = {
       onTouchCancel,
       onTouchEnd,
       onTouchMove,
       onTouchStart
     };
-    var maybeFocusBox = renderFocused && /*#__PURE__*/React.createElement(View, {
+    const maybeFocusBox = renderFocused && /*#__PURE__*/React.createElement(View, {
       style: focusStyle
     });
-    var maybeCornerDecal = !renderFocused && !disabled && childKeys && childKeys.length > 0 && /*#__PURE__*/React.createElement(CornerDecal, {
+    const maybeCornerDecal = !renderFocused && !disabled && childKeys && childKeys.length > 0 && /*#__PURE__*/React.createElement(CornerDecal, {
       style: styles$8.decalInset
     });
     if (type === KeyTypes.EMPTY) {
@@ -5093,11 +5181,11 @@ class KeypadButton extends React.PureComponent {
     } else if (type === KeyTypes.MANY) {
       // TODO(charlie): Make the long-press interaction accessible. See
       // the TODO in key-configs.js for more.
-      var manyButtonA11yMarkup = {
+      const manyButtonA11yMarkup = {
         role: "button",
         ariaLabel: childKeys[0].ariaLabel
       };
-      var icons = childKeys.map(keyConfig => {
+      const icons = childKeys.map(keyConfig => {
         return keyConfig.icon;
       });
       return /*#__PURE__*/React.createElement(View, _extends({
@@ -5109,7 +5197,7 @@ class KeypadButton extends React.PureComponent {
         focused: renderFocused
       })), maybeCornerDecal);
     } else {
-      var a11yMarkup = {
+      const a11yMarkup = {
         role: "button",
         ariaLabel: ariaLabel
       };
@@ -5124,7 +5212,7 @@ class KeypadButton extends React.PureComponent {
     }
   }
 }
-_defineProperty(KeypadButton, "propTypes", {
+KeypadButton.propTypes = {
   ariaLabel: PropTypes.string,
   // The borders to display on the button. Typically, this should be set
   // using one of the preset `BorderStyles` options.
@@ -5149,17 +5237,17 @@ _defineProperty(KeypadButton, "propTypes", {
   // (and rely on Flexbox instead), since it might not be pixel perfect
   // with borders and such.
   widthPx: PropTypes.number.isRequired
-});
-_defineProperty(KeypadButton, "defaultProps", {
+};
+KeypadButton.defaultProps = {
   borders: BorderStyles.ALL,
   childKeys: [],
   disabled: false,
   focused: false,
   popoverEnabled: false
-});
-var focusInsetPx = 4;
-var focusBoxZIndex = 0;
-var styles$8 = StyleSheet.create({
+};
+const focusInsetPx = 4;
+const focusBoxZIndex = 0;
+const styles$8 = StyleSheet.create({
   buttonBase: {
     // HACK(benkomalo): support old style flex box in Android browsers
     "-webkit-box-flex": "1",
@@ -5227,7 +5315,7 @@ var styles$8 = StyleSheet.create({
     borderBottomWidth: innerBorderWidthPx
   }
 });
-var styleForButtonDimensions = (heightPx, widthPx) => {
+const styleForButtonDimensions = (heightPx, widthPx) => {
   return StyleSheet.create({
     // eslint-disable-next-line react-native/no-unused-styles
     buttonSize: {
@@ -5237,21 +5325,21 @@ var styleForButtonDimensions = (heightPx, widthPx) => {
     }
   }).buttonSize;
 };
-var mapStateToProps$7 = state => {
+const mapStateToProps$7 = state => {
   return state.layout.buttonDimensions;
 };
 var KeypadButton$1 = connect(mapStateToProps$7, null, null, {
   forwardRef: true
 })(KeypadButton);
 
-var _excluded$4 = ["gestureManager"];
+const _excluded$4 = ["gestureManager"];
 class EmptyKeypadButton extends React.Component {
   render() {
-    var _this$props = this.props,
+    const _this$props = this.props,
       {
         gestureManager
       } = _this$props,
-      rest = _objectWithoutProperties(_this$props, _excluded$4);
+      rest = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
 
     // Register touch events on the button, but don't register its DOM node
     // or compute focus state or anything like that. We want the gesture
@@ -5266,11 +5354,11 @@ class EmptyKeypadButton extends React.Component {
     }, KeyConfigs.NOOP, rest));
   }
 }
-_defineProperty(EmptyKeypadButton, "propTypes", {
+EmptyKeypadButton.propTypes = {
   gestureManager: PropTypes.instanceOf(GestureManager)
-});
-var mapStateToProps$6 = state => {
-  var {
+};
+const mapStateToProps$6 = state => {
+  const {
     gestures
   } = state;
   return {
@@ -5281,7 +5369,7 @@ var EmptyKeypadButton$1 = connect(mapStateToProps$6, null, null, {
   forwardRef: true
 })(EmptyKeypadButton);
 
-var _excluded$3 = ["borders", "childKeyIds", "disabled", "gestureManager", "id", "style"],
+const _excluded$3 = ["borders", "childKeyIds", "disabled", "gestureManager", "id", "style"],
   _excluded2 = ["keyConfig"];
 class TouchableKeypadButton extends React.Component {
   shouldComponentUpdate(newProps) {
@@ -5292,14 +5380,14 @@ class TouchableKeypadButton extends React.Component {
     return newProps.id !== this.props.id || newProps.gestureManager !== this.props.gestureManager || newProps.focused !== this.props.focused || newProps.disabled !== this.props.disabled || newProps.popoverEnabled !== this.props.popoverEnabled || newProps.type !== this.props.type || !!newProps.style;
   }
   componentWillUnmount() {
-    var {
+    const {
       gestureManager,
       id
     } = this.props;
     gestureManager.unregisterDOMNode(id);
   }
   render() {
-    var _this$props = this.props,
+    const _this$props = this.props,
       {
         borders,
         childKeyIds,
@@ -5308,10 +5396,10 @@ class TouchableKeypadButton extends React.Component {
         id,
         style
       } = _this$props,
-      rest = _objectWithoutProperties(_this$props, _excluded$3);
+      rest = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
 
     // Only bind the relevant event handlers if the key is enabled.
-    var eventHandlers = disabled ? {
+    const eventHandlers = disabled ? {
       onTouchStart: evt => evt.preventDefault()
     } : {
       onTouchStart: evt => gestureManager.onTouchStart(evt, id),
@@ -5319,7 +5407,7 @@ class TouchableKeypadButton extends React.Component {
       onTouchMove: evt => gestureManager.onTouchMove(evt),
       onTouchCancel: evt => gestureManager.onTouchCancel(evt)
     };
-    var styleWithAddons = [...(Array.isArray(style) ? style : [style]), styles$7.preventScrolls];
+    const styleWithAddons = [...(Array.isArray(style) ? style : [style]), styles$7.preventScrolls];
     return /*#__PURE__*/React.createElement(KeypadButton$1, _extends({
       ref: node => gestureManager.registerDOMNode(id, ReactDOM.findDOMNode(node), childKeyIds, borders),
       borders: borders,
@@ -5328,7 +5416,7 @@ class TouchableKeypadButton extends React.Component {
     }, eventHandlers, rest));
   }
 }
-_defineProperty(TouchableKeypadButton, "propTypes", {
+TouchableKeypadButton.propTypes = {
   borders: bordersPropType,
   childKeyIds: PropTypes.arrayOf(keyIdPropType),
   disabled: PropTypes.bool,
@@ -5338,9 +5426,9 @@ _defineProperty(TouchableKeypadButton, "propTypes", {
   popoverEnabled: PropTypes.bool,
   style: PropTypes.any,
   type: PropTypes.oneOf(Object.keys(KeyTypes)).isRequired
-});
-var extractProps = keyConfig => {
-  var {
+};
+const extractProps = keyConfig => {
+  const {
     ariaLabel,
     icon,
     type
@@ -5351,25 +5439,25 @@ var extractProps = keyConfig => {
     type
   };
 };
-var mapStateToProps$5 = (state, ownProps) => {
-  var {
+const mapStateToProps$5 = (state, ownProps) => {
+  const {
     gestures
   } = state;
-  var {
+  const {
       keyConfig
     } = ownProps,
-    rest = _objectWithoutProperties(ownProps, _excluded2);
-  var {
+    rest = _objectWithoutPropertiesLoose(ownProps, _excluded2);
+  const {
     id,
     childKeyIds,
     type
   } = keyConfig;
-  var childKeys = childKeyIds && childKeyIds.map(id => KeyConfigs[id]);
+  const childKeys = childKeyIds && childKeyIds.map(id => KeyConfigs[id]);
 
   // 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).
-  var useFirstChildProps = type !== KeyTypes.MANY && childKeys && childKeys.length > 0;
-  return _objectSpread2(_objectSpread2({}, rest), {}, {
+  const useFirstChildProps = type !== KeyTypes.MANY && childKeys && childKeys.length > 0;
+  return _extends({}, rest, {
     childKeyIds: childKeyIds,
     gestureManager: gestures.gestureManager,
     id: id,
@@ -5380,7 +5468,7 @@ var mapStateToProps$5 = (state, ownProps) => {
     childKeys
   }, extractProps(useFirstChildProps ? childKeys[0] : keyConfig));
 };
-var styles$7 = StyleSheet.create({
+const styles$7 = StyleSheet.create({
   preventScrolls: {
     // Touch events that start in the touchable buttons shouldn't be
     // allowed to produce page scrolls.
@@ -5391,14 +5479,14 @@ var TouchableKeypadButton$1 = connect(mapStateToProps$5, null, null, {
   forwardRef: true
 })(TouchableKeypadButton);
 
-var _excluded$2 = ["keys"];
+const _excluded$2 = ["keys"];
 class ManyKeypadButton extends React.Component {
   render() {
-    var _this$props = this.props,
+    const _this$props = this.props,
       {
         keys
       } = _this$props,
-      rest = _objectWithoutProperties(_this$props, _excluded$2);
+      rest = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
 
     // If we have no extra symbols, render an empty button. If we have just
     // one, render a standard button. Otherwise, capture them all in a
@@ -5406,34 +5494,34 @@ class ManyKeypadButton extends React.Component {
     if (keys.length === 0) {
       return /*#__PURE__*/React.createElement(EmptyKeypadButton$1, rest);
     } else if (keys.length === 1) {
-      var keyConfig = KeyConfigs[keys[0]];
+      const keyConfig = KeyConfigs[keys[0]];
       return /*#__PURE__*/React.createElement(TouchableKeypadButton$1, _extends({
         keyConfig: keyConfig
       }, rest));
     } else {
-      var _keyConfig = {
+      const keyConfig = {
         id: Keys.MANY,
         type: KeyTypes.MANY,
         childKeyIds: keys
       };
       return /*#__PURE__*/React.createElement(TouchableKeypadButton$1, _extends({
-        keyConfig: _keyConfig
+        keyConfig: keyConfig
       }, rest));
     }
   }
 }
-_defineProperty(ManyKeypadButton, "propTypes", {
+ManyKeypadButton.propTypes = {
   keys: PropTypes.arrayOf(keyIdPropType).isRequired
-});
+};
 
 /**
  * This file contains all of the z-index values used throughout the math-input
  * component and its children.
  */
 
-var popover = 1;
-var echo = 2;
-var keypad = 1060;
+const popover = 1;
+const echo = 2;
+const keypad = 1060;
 
 class Echo extends React.Component {
   componentDidMount() {
@@ -5442,22 +5530,22 @@ class Echo extends React.Component {
     // ignorant. However, there doesn't seem to be a cleaner way to make
     // this happen, and at least here, all the animation context is
     // colocated in this file.
-    var {
+    const {
       animationDurationMs,
       onAnimationFinish
     } = this.props;
     setTimeout(() => onAnimationFinish(), animationDurationMs);
   }
   render() {
-    var {
+    const {
       borders,
       id,
       initialBounds
     } = this.props;
-    var {
+    const {
       icon
     } = KeyConfigs[id];
-    var containerStyle = _objectSpread2({
+    const containerStyle = _extends({
       zIndex: echo,
       position: "absolute",
       pointerEvents: "none"
@@ -5478,21 +5566,21 @@ class Echo extends React.Component {
     }));
   }
 }
-_defineProperty(Echo, "propTypes", {
+Echo.propTypes = {
   animationDurationMs: PropTypes.number.isRequired,
   borders: bordersPropType,
   id: keyIdPropType.isRequired,
   initialBounds: boundingBoxPropType.isRequired,
   onAnimationFinish: PropTypes.func.isRequired
-});
+};
 class EchoManager extends React.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "_animationConfigForType", animationType => {
+  constructor(...args) {
+    super(...args);
+    this._animationConfigForType = animationType => {
       // NOTE(charlie): These must be kept in sync with the transition
       // durations and classnames specified in echo.css.
-      var animationDurationMs;
-      var animationTransitionName;
+      let animationDurationMs;
+      let animationTransitionName;
       switch (animationType) {
         case EchoAnimationTypes.SLIDE_AND_FADE:
           animationDurationMs = 400;
@@ -5513,21 +5601,21 @@ class EchoManager extends React.Component {
         animationDurationMs,
         animationTransitionName
       };
-    });
+    };
   }
   render() {
-    var {
+    const {
       echoes,
-      onAnimationFinish: _onAnimationFinish
+      onAnimationFinish
     } = this.props;
     return /*#__PURE__*/React.createElement("span", null, Object.keys(EchoAnimationTypes).map(animationType => {
       // Collect the relevant parameters for the animation type, and
       // filter for the appropriate echoes.
-      var {
+      const {
         animationDurationMs,
         animationTransitionName
       } = this._animationConfigForType(animationType);
-      var echoesForType = echoes.filter(echo => {
+      const echoesForType = echoes.filter(echo => {
         return echo.animationType === animationType;
       });
 
@@ -5539,7 +5627,7 @@ class EchoManager extends React.Component {
       return /*#__PURE__*/React.createElement(TransitionGroup, {
         key: animationType
       }, echoesForType.map(echo => {
-        var {
+        const {
           animationId
         } = echo;
         return /*#__PURE__*/React.createElement(CSSTransition, {
@@ -5552,20 +5640,23 @@ class EchoManager extends React.Component {
           key: animationId
         }, /*#__PURE__*/React.createElement(Echo, _extends({
           animationDurationMs: animationDurationMs,
-          onAnimationFinish: () => _onAnimationFinish(animationId)
+          onAnimationFinish: () => onAnimationFinish(animationId)
         }, echo)));
       }));
     }));
   }
 }
-_defineProperty(EchoManager, "propTypes", {
+EchoManager.propTypes = {
   echoes: PropTypes.arrayOf(echoPropType),
   onAnimationFinish: PropTypes.func.isRequired
-});
+};
 
+/**
+ * A popover that renders a set of keys floating above the page.
+ */
 class MultiSymbolPopover extends React.Component {
   render() {
-    var {
+    const {
       keys
     } = this.props;
 
@@ -5582,10 +5673,10 @@ class MultiSymbolPopover extends React.Component {
     }));
   }
 }
-_defineProperty(MultiSymbolPopover, "propTypes", {
+MultiSymbolPopover.propTypes = {
   keys: PropTypes.arrayOf(keyConfigPropType)
-});
-var styles$6 = StyleSheet.create({
+};
+const styles$6 = StyleSheet.create({
   container: {
     flexDirection: "column-reverse",
     position: "relative",
@@ -5603,18 +5694,18 @@ var styles$6 = StyleSheet.create({
 
 // NOTE(charlie): These must be kept in sync with the transition durations and
 // classnames specified in popover.less.
-var animationTransitionName = "popover";
-var animationDurationMs = 200;
+const animationTransitionName = "popover";
+const animationDurationMs = 200;
 
 // A container component used to position a popover absolutely at a specific
 // position.
 class PopoverContainer extends React.Component {
   render() {
-    var {
+    const {
       bounds,
       childKeys
     } = this.props;
-    var containerStyle = _objectSpread2({
+    const containerStyle = _extends({
       position: "absolute"
     }, bounds);
     return /*#__PURE__*/React.createElement("div", {
@@ -5624,13 +5715,13 @@ class PopoverContainer extends React.Component {
     }));
   }
 }
-_defineProperty(PopoverContainer, "propTypes", {
+PopoverContainer.propTypes = {
   bounds: boundingBoxPropType.isRequired,
   childKeys: PropTypes.arrayOf(keyConfigPropType).isRequired
-});
+};
 class PopoverManager extends React.Component {
   render() {
-    var {
+    const {
       popover
     } = this.props;
     return popover ? /*#__PURE__*/React.createElement(CSSTransition, {
@@ -5648,21 +5739,21 @@ class PopoverManager extends React.Component {
     })) : null;
   }
 }
-_defineProperty(PopoverManager, "propTypes", {
+PopoverManager.propTypes = {
   popover: popoverPropType
-});
+};
 
-var _excluded$1 = ["initialBounds"];
+const _excluded$1 = ["initialBounds"];
 
 // eslint-disable-next-line react/no-unsafe
 class Keypad extends React.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "_computeContainer", () => {
-      var domNode = ReactDOM.findDOMNode(this);
+  constructor(...args) {
+    super(...args);
+    this._computeContainer = () => {
+      const domNode = ReactDOM.findDOMNode(this);
       this._container = domNode.getBoundingClientRect();
-    });
-    _defineProperty(this, "_updateSizeAndPosition", () => {
+    };
+    this._updateSizeAndPosition = () => {
       // Mark the container for recalculation next time the keypad is
       // opened.
       // TODO(charlie): Since we're not recalculating the container
@@ -5671,8 +5762,8 @@ class Keypad extends React.Component {
       // difficult to do and, as such, incredibly unlikely, but we may
       // want to reconsider the caching here.
       this._container = null;
-    });
-    _defineProperty(this, "_onResize", () => {
+    };
+    this._onResize = () => {
       // Whenever the page resizes, we need to recompute the container's
       // bounding box. This is the only time that the bounding box can change.
 
@@ -5686,7 +5777,7 @@ class Keypad extends React.Component {
           }
         }, 66);
       }
-    });
+    };
   }
   componentDidMount() {
     this._isMounted = true;
@@ -5703,7 +5794,7 @@ class Keypad extends React.Component {
     window.removeEventListener("resize", this._onResize);
   }
   render() {
-    var {
+    const {
       children,
       echoes,
       removeEcho,
@@ -5713,12 +5804,12 @@ class Keypad extends React.Component {
 
     // Translate the echo boxes, as they'll be positioned absolutely to
     // this relative container.
-    var relativeEchoes = echoes.map(echo => {
-      var {
+    const relativeEchoes = echoes.map(echo => {
+      const {
           initialBounds
         } = echo,
-        rest = _objectWithoutProperties(echo, _excluded$1);
-      return _objectSpread2(_objectSpread2({}, rest), {}, {
+        rest = _objectWithoutPropertiesLoose(echo, _excluded$1);
+      return _extends({}, rest, {
         initialBounds: {
           top: initialBounds.top - this._container.top,
           right: initialBounds.right - this._container.left,
@@ -5733,7 +5824,7 @@ class Keypad extends React.Component {
     // Translate the popover bounds from page-absolute to keypad-relative.
     // Note that we only need three bounds, since popovers are anchored to
     // the bottom left corners of the keys over which they appear.
-    var relativePopover = popover && _objectSpread2(_objectSpread2({}, popover), {}, {
+    const relativePopover = popover && _extends({}, popover, {
       bounds: {
         bottom: this._container.height - (popover.bounds.bottom - this._container.top),
         left: popover.bounds.left - this._container.left,
@@ -5750,7 +5841,7 @@ class Keypad extends React.Component {
     }));
   }
 }
-_defineProperty(Keypad, "propTypes", {
+Keypad.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
   removeEcho: PropTypes.func.isRequired,
   style: PropTypes.any,
@@ -5761,14 +5852,14 @@ _defineProperty(Keypad, "propTypes", {
   active: PropTypes.bool,
   echoes: PropTypes.arrayOf(echoPropType).isRequired,
   popover: popoverPropType
-});
-var mapStateToProps$4 = state => {
-  return _objectSpread2(_objectSpread2({}, state.echoes), {}, {
+};
+const mapStateToProps$4 = state => {
+  return _extends({}, state.echoes, {
     active: state.keypad.active,
     popover: state.gestures.popover
   });
 };
-var mapDispatchToProps$1 = dispatch => {
+const mapDispatchToProps$1 = dispatch => {
   return {
     removeEcho: animationId => {
       dispatch(removeEcho(animationId));
@@ -5779,11 +5870,10 @@ var Keypad$1 = connect(mapStateToProps$4, mapDispatchToProps$1, null, {
   forwardRef: true
 })(Keypad);
 
-var IconAsset = function IconAsset(_ref) {
-  var {
-    tintColor,
-    type
-  } = _ref;
+const IconAsset = function IconAsset({
+  tintColor,
+  type
+}) {
   if (type === "Geometry") {
     return /*#__PURE__*/React.createElement("svg", {
       width: "32",
@@ -5827,19 +5917,19 @@ var IconAsset = function IconAsset(_ref) {
   throw new Error("Invalid icon type");
 };
 
-var styles$5 = StyleSheet.create({
+const styles$5 = StyleSheet.create({
   base: {
     display: "flex",
     width: 44,
     height: 38,
     boxSizing: "border-box",
     borderRadius: 3,
-    border: "1px solid transparent",
+    border: `1px solid transparent`,
     marginRight: 1,
     marginLeft: 1
   },
   hovered: {
-    background: "linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ".concat(Color.white),
+    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${Color.white}`,
     border: "1px solid #1865F2"
   },
   pressed: {
@@ -5847,11 +5937,11 @@ var styles$5 = StyleSheet.create({
   },
   focused: {
     outline: "none",
-    border: "2px solid ".concat(Color.blue)
+    border: `2px solid ${Color.blue}`
   },
   innerBox: {
     boxSizing: "border-box",
-    border: "1px solid transparent",
+    border: `1px solid transparent`,
     borderRadius: 2,
     display: "flex",
     flex: 1,
@@ -5859,7 +5949,7 @@ var styles$5 = StyleSheet.create({
     alignItems: "center"
   },
   innerBoxPressed: {
-    border: "1px solid ".concat(Color.white)
+    border: `1px solid ${Color.white}`
   },
   activeIndicator: {
     position: "absolute",
@@ -5884,7 +5974,7 @@ function imageTintColor(itemState, hovered, focused, pressed) {
 }
 class TabbarItem extends React.Component {
   render() {
-    var {
+    const {
       onClick,
       itemType,
       itemState
@@ -5892,13 +5982,12 @@ class TabbarItem extends React.Component {
     return /*#__PURE__*/React.createElement(Clickable, {
       onClick: onClick,
       disabled: itemState === "disabled"
-    }, _ref => {
-      var {
-        hovered,
-        focused,
-        pressed
-      } = _ref;
-      var tintColor = imageTintColor(itemState, hovered, focused, pressed);
+    }, ({
+      hovered,
+      focused,
+      pressed
+    }) => {
+      const tintColor = imageTintColor(itemState, hovered, focused, pressed);
       return /*#__PURE__*/React.createElement(View$1, {
         style: [styles$5.base, itemState !== "disabled" && hovered && styles$5.hovered, focused && styles$5.focused, pressed && styles$5.pressed]
       }, /*#__PURE__*/React.createElement(View$1, {
@@ -5915,33 +6004,33 @@ class TabbarItem extends React.Component {
   }
 }
 
-var styles$4 = StyleSheet.create({
+const styles$4 = StyleSheet.create({
   tabbar: {
     display: "flex",
     flexDirection: "row",
     background: Color.offWhite,
     paddingTop: 2,
     paddingBottom: 2,
-    borderTop: "1px solid ".concat(Color.offBlack50),
-    borderBottom: "1px solid ".concat(Color.offBlack50)
+    borderTop: `1px solid ${Color.offBlack50}`,
+    borderBottom: `1px solid ${Color.offBlack50}`
   }
 });
 class Tabbar extends React.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
+  constructor(...args) {
+    super(...args);
+    this.state = {
       selectedItem: 0
-    });
+    };
   }
   render() {
-    var {
+    const {
       items,
       onSelect
     } = this.props;
     return /*#__PURE__*/React.createElement(View$1, {
       style: styles$4.tabbar
     }, items.map((item, index) => /*#__PURE__*/React.createElement(TabbarItem, {
-      key: "tabbar-item-".concat(index),
+      key: `tabbar-item-${index}`,
       itemState: index === this.state.selectedItem ? "active" : "inactive",
       itemType: item,
       onClick: () => {
@@ -5954,25 +6043,28 @@ class Tabbar extends React.Component {
   }
 }
 
-var {
+/**
+ * A keypad with two pages of keys.
+ */
+const {
   column: column$2,
   row: row$4,
   fullWidth: fullWidth$2
 } = Styles;
 class TwoPageKeypad extends React.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
+  constructor(...args) {
+    super(...args);
+    this.state = {
       selectedPage: "Numbers"
-    });
+    };
   }
   render() {
-    var {
+    const {
       leftPage,
       paginationEnabled,
       rightPage
     } = this.props;
-    var {
+    const {
       selectedPage
     } = this.state;
     if (paginationEnabled) {
@@ -6001,27 +6093,27 @@ class TwoPageKeypad extends React.Component {
     }
   }
 }
-_defineProperty(TwoPageKeypad, "propTypes", {
+TwoPageKeypad.propTypes = {
   currentPage: PropTypes.oneOf([0, 1]).isRequired,
   leftPage: PropTypes.node.isRequired,
   paginationEnabled: PropTypes.bool.isRequired,
   rightPage: PropTypes.node.isRequired
-});
-var styles$3 = StyleSheet.create({
+};
+const styles$3 = 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.
     backgroundColor: offBlack16
   },
   borderTop: {
-    borderTop: "".concat(innerBorderWidthPx, "px ").concat(innerBorderStyle, " ") + "".concat(innerBorderColor)
+    borderTop: `${innerBorderWidthPx}px ${innerBorderStyle} ` + `${innerBorderColor}`
   },
   borderLeft: {
-    borderLeft: "".concat(innerBorderWidthPx, "px ").concat(innerBorderStyle, " ") + "".concat(innerBorderColor),
+    borderLeft: `${innerBorderWidthPx}px ${innerBorderStyle} ` + `${innerBorderColor}`,
     boxSizing: "content-box"
   }
 });
-var mapStateToProps$3 = state => {
+const mapStateToProps$3 = state => {
   return {
     paginationEnabled: state.layout.paginationEnabled
   };
@@ -6030,7 +6122,10 @@ var TwoPageKeypad$1 = connect(mapStateToProps$3, null, null, {
   forwardRef: true
 })(TwoPageKeypad);
 
-var {
+/**
+ * A keypad that includes all of the expression symbols.
+ */
+const {
   row: row$3,
   column: column$1,
   oneColumn,
@@ -6044,7 +6139,7 @@ class ExpressionKeypad extends React.Component {
   // contains more than four children.
 
   render() {
-    var {
+    const {
       currentPage,
       cursorContext,
       dynamicJumpOut,
@@ -6052,7 +6147,7 @@ class ExpressionKeypad extends React.Component {
       roundTopLeft,
       roundTopRight
     } = this.props;
-    var dismissOrJumpOutKey;
+    let dismissOrJumpOutKey;
     if (dynamicJumpOut) {
       switch (cursorContext) {
         case IN_PARENS:
@@ -6081,8 +6176,8 @@ class ExpressionKeypad extends React.Component {
     } else {
       dismissOrJumpOutKey = KeyConfigs.DISMISS;
     }
-    var rightPageStyle = [row$3, fullWidth$1, styles$2.rightPage, roundTopRight && roundedTopRight$1];
-    var rightPage = /*#__PURE__*/React.createElement(View, {
+    const rightPageStyle = [row$3, fullWidth$1, styles$2.rightPage, roundTopRight && roundedTopRight$1];
+    const rightPage = /*#__PURE__*/React.createElement(View, {
       style: rightPageStyle
     }, /*#__PURE__*/React.createElement(View, {
       style: [column$1, oneColumn]
@@ -6154,8 +6249,8 @@ class ExpressionKeypad extends React.Component {
       keyConfig: dismissOrJumpOutKey,
       borders: BorderStyles.LEFT
     })));
-    var leftPageStyle = [row$3, fullWidth$1, styles$2.leftPage, roundTopLeft && roundedTopLeft$2];
-    var leftPage = /*#__PURE__*/React.createElement(View, {
+    const leftPageStyle = [row$3, fullWidth$1, styles$2.leftPage, roundTopLeft && roundedTopLeft$2];
+    const leftPage = /*#__PURE__*/React.createElement(View, {
       style: leftPageStyle
     }, /*#__PURE__*/React.createElement(View, {
       style: [column$1, oneColumn]
@@ -6235,19 +6330,19 @@ class ExpressionKeypad extends React.Component {
     });
   }
 }
-_defineProperty(ExpressionKeypad, "propTypes", {
+ExpressionKeypad.propTypes = {
   currentPage: PropTypes.number.isRequired,
   cursorContext: cursorContextPropType.isRequired,
   dynamicJumpOut: PropTypes.bool,
   extraKeys: PropTypes.arrayOf(keyIdPropType),
   roundTopLeft: PropTypes.bool,
   roundTopRight: PropTypes.bool
-});
-_defineProperty(ExpressionKeypad, "rows", 4);
-_defineProperty(ExpressionKeypad, "columns", 5);
-_defineProperty(ExpressionKeypad, "maxVisibleRows", 4);
-_defineProperty(ExpressionKeypad, "numPages", 2);
-var styles$2 = StyleSheet.create({
+};
+ExpressionKeypad.rows = 4;
+ExpressionKeypad.columns = 5;
+ExpressionKeypad.maxVisibleRows = 4;
+ExpressionKeypad.numPages = 2;
+const styles$2 = 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
@@ -6260,7 +6355,7 @@ var styles$2 = StyleSheet.create({
     backgroundColor: controlGrey
   }
 });
-var mapStateToProps$2 = state => {
+const mapStateToProps$2 = state => {
   return {
     currentPage: state.pager.currentPage,
     cursorContext: state.input.cursor.context,
@@ -6271,7 +6366,11 @@ var ExpressionKeypad$1 = connect(mapStateToProps$2, null, null, {
   forwardRef: true
 })(ExpressionKeypad);
 
-var {
+/**
+ * A keypad that includes the digits, as well as the symbols required to deal
+ * with fractions, decimals, and percents.
+ */
+const {
   row: row$2,
   roundedTopLeft: roundedTopLeft$1,
   roundedTopRight
@@ -6282,13 +6381,13 @@ class FractionKeypad extends React.Component {
   // rows vertically.
 
   render() {
-    var {
+    const {
       cursorContext,
       dynamicJumpOut,
       roundTopLeft,
       roundTopRight
     } = this.props;
-    var dismissOrJumpOutKey;
+    let dismissOrJumpOutKey;
     if (dynamicJumpOut) {
       switch (cursorContext) {
         case IN_PARENS:
@@ -6384,17 +6483,17 @@ class FractionKeypad extends React.Component {
     })));
   }
 }
-_defineProperty(FractionKeypad, "propTypes", {
+FractionKeypad.propTypes = {
   cursorContext: cursorContextPropType.isRequired,
   dynamicJumpOut: PropTypes.bool,
   roundTopLeft: PropTypes.bool,
   roundTopRight: PropTypes.bool
-});
-_defineProperty(FractionKeypad, "rows", 4);
-_defineProperty(FractionKeypad, "columns", 4);
-_defineProperty(FractionKeypad, "maxVisibleRows", 5);
-_defineProperty(FractionKeypad, "numPages", 1);
-var mapStateToProps$1 = state => {
+};
+FractionKeypad.rows = 4;
+FractionKeypad.columns = 4;
+FractionKeypad.maxVisibleRows = 5;
+FractionKeypad.numPages = 1;
+const mapStateToProps$1 = state => {
   return {
     cursorContext: state.input.cursor.context,
     dynamicJumpOut: !state.layout.navigationPadEnabled
@@ -6406,7 +6505,7 @@ var FractionKeypad$1 = connect(mapStateToProps$1, null, null, {
 
 class VelocityTracker {
   constructor(options) {
-    this.options = _objectSpread2({
+    this.options = _extends({
       velocityTimeout: 100
     }, options);
     this._events = [];
@@ -6439,13 +6538,13 @@ class VelocityTracker {
    * @returns {number} the velocity associated with the tracker
    */
   getVelocity() {
-    var events = this._getEvents();
+    const events = this._getEvents();
     if (events.length < 2) {
       return 0;
     } else {
-      var current = events[events.length - 1];
-      var first = events[0];
-      var dt = current.t - first.t;
+      const current = events[events.length - 1];
+      const first = events[0];
+      const dt = current.t - first.t;
       return (current.x - first.x) / dt;
     }
   }
@@ -6459,8 +6558,8 @@ class VelocityTracker {
    *                     milliseconds
    */
   _getEvents() {
-    var threshold = now() - this.options.velocityTimeout;
-    var recentEvents = this._events.filter(event => {
+    const threshold = now() - this.options.velocityTimeout;
+    const recentEvents = this._events.filter(event => {
       return event.t > threshold;
     });
     this._events = [];
@@ -6468,32 +6567,30 @@ class VelocityTracker {
   }
 }
 
-var keypadForType = {
+const keypadForType = {
   [KeypadTypes.FRACTION]: FractionKeypad$1,
   [KeypadTypes.EXPRESSION]: ExpressionKeypad$1
 };
-var createStore = () => {
-  var initialInputState = {
+const createStore = () => {
+  const initialInputState = {
     keyHandler: null,
     cursor: {
       context: NONE
     }
   };
-  var inputReducer = function inputReducer() {
-    var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialInputState;
-    var action = arguments.length > 1 ? arguments[1] : undefined;
+  const inputReducer = function inputReducer(state = initialInputState, action) {
     switch (action.type) {
       case "SetKeyHandler":
-        return _objectSpread2(_objectSpread2({}, state), {}, {
+        return _extends({}, state, {
           keyHandler: action.keyHandler
         });
       case "PressKey":
-        var keyConfig = KeyConfigs[action.key];
+        const keyConfig = KeyConfigs[action.key];
         if (keyConfig.type !== KeyTypes.KEYPAD_NAVIGATION) {
           // This is probably an anti-pattern but it works for the
           // case where we don't actually control the state but we
           // still want to communicate with the other object
-          return _objectSpread2(_objectSpread2({}, state), {}, {
+          return _extends({}, state, {
             cursor: state.keyHandler(keyConfig.id)
           });
         }
@@ -6501,39 +6598,37 @@ var createStore = () => {
         // TODO(kevinb) get state from MathQuill and store it?
         return state;
       case "SetCursor":
-        return _objectSpread2(_objectSpread2({}, state), {}, {
+        return _extends({}, state, {
           cursor: action.cursor
         });
       default:
         return state;
     }
   };
-  var defaultKeypadType = KeypadTypes.EXPRESSION;
-  var initialKeypadState = {
+  const defaultKeypadType = KeypadTypes.EXPRESSION;
+  const initialKeypadState = {
     extraKeys: ["x", "y", Keys.THETA, Keys.PI],
     keypadType: defaultKeypadType,
     active: false
   };
-  var keypadReducer = function keypadReducer() {
-    var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialKeypadState;
-    var action = arguments.length > 1 ? arguments[1] : undefined;
+  const keypadReducer = function keypadReducer(state = initialKeypadState, action) {
     switch (action.type) {
       case "DismissKeypad":
-        return _objectSpread2(_objectSpread2({}, state), {}, {
+        return _extends({}, state, {
           active: false
         });
       case "ActivateKeypad":
-        return _objectSpread2(_objectSpread2({}, state), {}, {
+        return _extends({}, state, {
           active: true
         });
       case "ConfigureKeypad":
-        return _objectSpread2(_objectSpread2({}, state), {}, {
+        return _extends({}, state, {
           // Default `extraKeys` to the empty array.
           extraKeys: []
         }, action.configuration);
       case "PressKey":
         // @ts-expect-error [FEI-5003] - TS2339 - Property 'key' does not exist on type '{ type: string; }'.
-        var keyConfig = KeyConfigs[action.key];
+        const keyConfig = KeyConfigs[action.key];
         // NOTE(charlie): Our keypad system operates by triggering key
         // presses with key IDs in a dumb manner, such that the keys
         // don't know what they can do--instead, the store is
@@ -6555,8 +6650,8 @@ var createStore = () => {
   // We default to the right-most page. This is done so-as to enforce a
   // consistent orientation between the view pager layout and the flattened
   // layout, where our default page appears on the far right.
-  var getDefaultPage = numPages => numPages - 1;
-  var initialPagerState = {
+  const getDefaultPage = numPages => numPages - 1;
+  const initialPagerState = {
     animateToPosition: false,
     currentPage: getDefaultPage(keypadForType[defaultKeypadType].numPages),
     // The cumulative differential in the horizontal direction for the
@@ -6566,32 +6661,30 @@ var createStore = () => {
     pageWidthPx: 0,
     velocityTracker: new VelocityTracker()
   };
-  var pagerReducer = function pagerReducer() {
-    var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialPagerState;
-    var action = arguments.length > 1 ? arguments[1] : undefined;
+  const pagerReducer = function pagerReducer(state = initialPagerState, action) {
     switch (action.type) {
       case "ConfigureKeypad":
         // @ts-expect-error [FEI-5003] - TS2339 - Property 'configuration' does not exist on type '{ type: string; }'.
-        var {
+        const {
           keypadType
         } = action.configuration;
-        var {
+        const {
           numPages
         } = keypadForType[keypadType];
-        return _objectSpread2(_objectSpread2({}, state), {}, {
+        return _extends({}, state, {
           numPages,
           animateToPosition: false,
           currentPage: getDefaultPage(numPages),
           dx: 0
         });
       case "SetPageSize":
-        return _objectSpread2(_objectSpread2({}, state), {}, {
+        return _extends({}, state, {
           // @ts-expect-error [FEI-5003] - TS2339 - Property 'pageWidthPx' does not exist on type '{ type: string; }'.
           pageWidthPx: action.pageWidthPx
         });
       case "PressKey":
         // @ts-expect-error [FEI-5003] - TS2339 - Property 'key' does not exist on type '{ type: string; }'.
-        var keyConfig = KeyConfigs[action.key];
+        const keyConfig = KeyConfigs[action.key];
 
         // Reset the keypad page if the user performs a math operation.
         if (keyConfig.type === KeyTypes.VALUE || keyConfig.type === KeyTypes.OPERATOR) {
@@ -6601,22 +6694,22 @@ var createStore = () => {
         }
         return state;
       case "ResetKeypadPage":
-        return _objectSpread2(_objectSpread2({}, state), {}, {
+        return _extends({}, state, {
           animateToPosition: true,
           // We start at the right-most page.
           currentPage: getDefaultPage(state.numPages),
           dx: 0
         });
       case "PageKeypadRight":
-        var nextPage = Math.min(state.currentPage + 1, state.numPages - 1);
-        return _objectSpread2(_objectSpread2({}, state), {}, {
+        const nextPage = Math.min(state.currentPage + 1, state.numPages - 1);
+        return _extends({}, state, {
           animateToPosition: true,
           currentPage: nextPage,
           dx: 0
         });
       case "PageKeypadLeft":
-        var prevPage = Math.max(state.currentPage - 1, 0);
-        return _objectSpread2(_objectSpread2({}, state), {}, {
+        const prevPage = Math.max(state.currentPage - 1, 0);
+        return _extends({}, state, {
           animateToPosition: true,
           currentPage: prevPage,
           dx: 0
@@ -6624,28 +6717,28 @@ var createStore = () => {
       case "OnSwipeChange":
         // @ts-expect-error [FEI-5003] - TS2339 - Property 'dx' does not exist on type '{ type: string; }'.
         state.velocityTracker.push(action.dx);
-        return _objectSpread2(_objectSpread2({}, state), {}, {
+        return _extends({}, state, {
           animateToPosition: false,
           // @ts-expect-error [FEI-5003] - TS2339 - Property 'dx' does not exist on type '{ type: string; }'.
           dx: action.dx
         });
       case "OnSwipeEnd":
-        var {
+        const {
           pageWidthPx,
           velocityTracker
         } = state;
         // @ts-expect-error [FEI-5003] - TS2339 - Property 'dx' does not exist on type '{ type: string; }'.
-        var {
+        const {
           dx
         } = action;
-        var velocity = velocityTracker.getVelocity();
+        const velocity = velocityTracker.getVelocity();
 
         // NOTE(charlie): These will need refinement. The velocity comes
         // from Framer.
-        var minFlingVelocity = 0.1;
-        var minFlingDistance = 10;
-        var shouldPageRight = dx < -pageWidthPx / 2 || velocity < -minFlingVelocity && dx < -minFlingDistance;
-        var shouldPageLeft = dx > pageWidthPx / 2 || velocity > minFlingVelocity && dx > minFlingDistance;
+        const minFlingVelocity = 0.1;
+        const minFlingDistance = 10;
+        const shouldPageRight = dx < -pageWidthPx / 2 || velocity < -minFlingVelocity && dx < -minFlingDistance;
+        const shouldPageLeft = dx > pageWidthPx / 2 || velocity > minFlingVelocity && dx > minFlingDistance;
         if (shouldPageRight) {
           return pagerReducer(state, {
             type: "PageKeypadRight"
@@ -6655,7 +6748,7 @@ var createStore = () => {
             type: "PageKeypadLeft"
           });
         }
-        return _objectSpread2(_objectSpread2({}, state), {}, {
+        return _extends({}, state, {
           animateToPosition: true,
           dx: 0
         });
@@ -6663,7 +6756,7 @@ var createStore = () => {
         return state;
     }
   };
-  var createGestureManager = swipeEnabled => {
+  const createGestureManager = swipeEnabled => {
     return new GestureManager({
       swipeEnabled
     }, {
@@ -6686,23 +6779,21 @@ var createStore = () => {
         });
       },
       onClick: (key, layoutProps, inPopover) => {
-        store.dispatch(_objectSpread2(_objectSpread2({
+        store.dispatch(_extends({
           type: "PressKey",
           key
-        }, layoutProps), {}, {
+        }, layoutProps, {
           inPopover
         }));
       }
     }, [], [Keys.BACKSPACE, Keys.UP, Keys.RIGHT, Keys.DOWN, Keys.LEFT]);
   };
-  var initialGestureState = {
+  const initialGestureState = {
     popover: null,
     focus: null,
     gestureManager: createGestureManager(keypadForType[defaultKeypadType].numPages > 1)
   };
-  var gestureReducer = function gestureReducer() {
-    var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialGestureState;
-    var action = arguments.length > 1 ? arguments[1] : undefined;
+  const gestureReducer = function gestureReducer(state = initialGestureState, action) {
     switch (action.type) {
       case "DismissKeypad":
         // NOTE(charlie): In the past, we enforced the "gesture manager
@@ -6720,15 +6811,15 @@ var createStore = () => {
         state.gestureManager.enableEventTracking();
         return state;
       case "SetActiveNodes":
-        return _objectSpread2(_objectSpread2({}, state), action.activeNodes);
+        return _extends({}, state, action.activeNodes);
       case "ConfigureKeypad":
-        var {
+        const {
           keypadType
         } = action.configuration;
-        var {
+        const {
           numPages
         } = keypadForType[keypadType];
-        var swipeEnabled = numPages > 1;
+        const swipeEnabled = numPages > 1;
         return {
           popover: null,
           focus: null,
@@ -6741,21 +6832,19 @@ var createStore = () => {
 
   // Used to generate unique animation IDs for the echo animations. The actual
   // values are irrelevant as long as they are unique.
-  var _lastAnimationId = 0;
-  var initialEchoState = {
+  let _lastAnimationId = 0;
+  const initialEchoState = {
     echoes: []
   };
-  var echoReducer = function echoReducer() {
-    var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialEchoState;
-    var action = arguments.length > 1 ? arguments[1] : undefined;
+  const echoReducer = function echoReducer(state = initialEchoState, action) {
     switch (action.type) {
       case "PressKey":
-        var keyConfig = KeyConfigs[action.key];
+        const keyConfig = KeyConfigs[action.key];
 
         // Add in the echo animation if the user performs a math
         // operation.
         if (keyConfig.type === KeyTypes.VALUE || keyConfig.type === KeyTypes.OPERATOR) {
-          return _objectSpread2(_objectSpread2({}, state), {}, {
+          return _extends({}, state, {
             echoes: [...state.echoes, {
               animationId: "" + _lastAnimationId++,
               animationType: action.inPopover ? EchoAnimationTypes.LONG_FADE_ONLY : EchoAnimationTypes.FADE_ONLY,
@@ -6767,18 +6856,18 @@ var createStore = () => {
         }
         return state;
       case "RemoveEcho":
-        var remainingEchoes = state.echoes.filter(echo => {
+        const remainingEchoes = state.echoes.filter(echo => {
           // @ts-expect-error [FEI-5003] - TS2339 - Property 'animationId' does not exist on type 'never'.
           return echo.animationId !== action.animationId;
         });
-        return _objectSpread2(_objectSpread2({}, state), {}, {
+        return _extends({}, state, {
           echoes: remainingEchoes
         });
       default:
         return state;
     }
   };
-  var initialLayoutState = {
+  const initialLayoutState = {
     gridDimensions: {
       numRows: keypadForType[defaultKeypadType].rows,
       numColumns: keypadForType[defaultKeypadType].columns,
@@ -6802,25 +6891,25 @@ var createStore = () => {
    * Compute the additional layout state based on the provided page and grid
    * dimensions.
    */
-  var layoutParametersForDimensions = (pageDimensions, gridDimensions) => {
-    var {
+  const layoutParametersForDimensions = (pageDimensions, gridDimensions) => {
+    const {
       pageWidthPx,
       pageHeightPx
     } = pageDimensions;
 
     // Determine the device type and orientation.
-    var deviceOrientation = pageWidthPx > pageHeightPx ? DeviceOrientations.LANDSCAPE : DeviceOrientations.PORTRAIT;
-    var deviceType = Math.min(pageWidthPx, pageHeightPx) > tabletCutoffPx ? DeviceTypes.TABLET : DeviceTypes.PHONE;
+    const deviceOrientation = pageWidthPx > pageHeightPx ? DeviceOrientations.LANDSCAPE : DeviceOrientations.PORTRAIT;
+    const deviceType = Math.min(pageWidthPx, pageHeightPx) > tabletCutoffPx ? DeviceTypes.TABLET : DeviceTypes.PHONE;
 
     // Using that information, make some decisions (or assumptions)
     // about the resulting layout.
-    var navigationPadEnabled = deviceType === DeviceTypes.TABLET;
-    var paginationEnabled = deviceType === DeviceTypes.PHONE && deviceOrientation === DeviceOrientations.PORTRAIT;
-    var deviceInfo = {
+    const navigationPadEnabled = deviceType === DeviceTypes.TABLET;
+    const paginationEnabled = deviceType === DeviceTypes.PHONE && deviceOrientation === DeviceOrientations.PORTRAIT;
+    const deviceInfo = {
       deviceOrientation,
       deviceType
     };
-    var layoutOptions = {
+    const layoutOptions = {
       navigationPadEnabled,
       paginationEnabled,
       // HACK(charlie): It's not great that we're making assumptions about
@@ -6832,47 +6921,45 @@ var createStore = () => {
       // of error.
       toolbarEnabled: true
     };
-    return _objectSpread2(_objectSpread2({}, computeLayoutParameters(gridDimensions, pageDimensions, deviceInfo, layoutOptions)), {}, {
+    return _extends({}, computeLayoutParameters(gridDimensions, pageDimensions, deviceInfo, layoutOptions), {
       // Pass along some of the layout information, so that other
       // components in the heirarchy can adapt appropriately.
       navigationPadEnabled,
       paginationEnabled
     });
   };
-  var layoutReducer = function layoutReducer() {
-    var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialLayoutState;
-    var action = arguments.length > 1 ? arguments[1] : undefined;
+  const layoutReducer = function layoutReducer(state = initialLayoutState, action) {
     switch (action.type) {
       case "ConfigureKeypad":
-        var {
+        const {
           keypadType
         } = action.configuration;
-        var gridDimensions = {
+        const gridDimensions = {
           numRows: keypadForType[keypadType].rows,
           numColumns: keypadForType[keypadType].columns,
           numMaxVisibleRows: keypadForType[keypadType].maxVisibleRows,
           numPages: keypadForType[keypadType].numPages
         };
-        return _objectSpread2(_objectSpread2(_objectSpread2({}, state), layoutParametersForDimensions(state.pageDimensions, gridDimensions)), {}, {
+        return _extends({}, state, layoutParametersForDimensions(state.pageDimensions, gridDimensions), {
           gridDimensions
         });
       case "SetPageSize":
-        var {
+        const {
           pageWidthPx,
           pageHeightPx
         } = action;
-        var pageDimensions = {
+        const pageDimensions = {
           pageWidthPx,
           pageHeightPx
         };
-        return _objectSpread2(_objectSpread2(_objectSpread2({}, state), layoutParametersForDimensions(pageDimensions, state.gridDimensions)), {}, {
+        return _extends({}, state, layoutParametersForDimensions(pageDimensions, state.gridDimensions), {
           pageDimensions
         });
       default:
         return state;
     }
   };
-  var reducer = Redux.combineReducers({
+  const reducer = Redux.combineReducers({
     input: inputReducer,
     keypad: keypadReducer,
     pager: pagerReducer,
@@ -6885,11 +6972,15 @@ var createStore = () => {
   // gesture manager to dispatch actions on the store in its callbacks. We
   // should come up with a better pattern to remove the two-way dependency.
   // eslint-disable-next-line import/no-deprecated
-  var store = Redux.createStore(reducer);
+  const store = Redux.createStore(reducer);
   return store;
 };
 
-var {
+/**
+ * A component that renders a navigation pad, which consists of an arrow for
+ * each possible direction.
+ */
+const {
   row: row$1,
   column,
   centered: centered$1,
@@ -6900,11 +6991,11 @@ class NavigationPad extends React.Component {
   render() {
     // TODO(charlie): Disable the navigational arrows depending on the
     // cursor context.
-    var {
+    const {
       roundTopLeft,
       style
     } = this.props;
-    var containerStyle = [column, centered$1, styles$1.container, roundTopLeft && roundedTopLeft, ...(Array.isArray(style) ? style : [style])];
+    const containerStyle = [column, centered$1, styles$1.container, roundTopLeft && roundedTopLeft, ...(Array.isArray(style) ? style : [style])];
     return /*#__PURE__*/React.createElement(View, {
       style: containerStyle
     }, /*#__PURE__*/React.createElement(View, {
@@ -6934,14 +7025,14 @@ class NavigationPad extends React.Component {
     })));
   }
 }
-_defineProperty(NavigationPad, "propTypes", {
+NavigationPad.propTypes = {
   roundTopLeft: PropTypes.bool,
   style: PropTypes.any
-});
-var buttonSizePx = 48;
-var borderRadiusPx = 4;
-var borderWidthPx$1 = 1;
-var styles$1 = StyleSheet.create({
+};
+const buttonSizePx = 48;
+const borderRadiusPx = 4;
+const borderWidthPx$1 = 1;
+const styles$1 = StyleSheet.create({
   container: {
     backgroundColor: controlGrey,
     width: navigationPadWidthPx
@@ -6991,7 +7082,7 @@ var styles$1 = StyleSheet.create({
   }
 });
 
-var {
+const {
   row,
   centered,
   fullWidth
@@ -6999,13 +7090,13 @@ var {
 
 // eslint-disable-next-line react/no-unsafe
 class KeypadContainer extends React.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
+  constructor(...args) {
+    super(...args);
+    this.state = {
       hasBeenActivated: false,
       viewportWidth: "100vw"
-    });
-    _defineProperty(this, "_throttleResizeHandler", () => {
+    };
+    this._throttleResizeHandler = () => {
       // Throttle the resize callbacks.
       // https://developer.mozilla.org/en-US/docs/Web/Events/resize
       if (this._resizeTimeout == null) {
@@ -7014,23 +7105,23 @@ class KeypadContainer extends React.Component {
           this._onResize();
         }, 66);
       }
-    });
-    _defineProperty(this, "_onResize", () => {
+    };
+    this._onResize = () => {
       // Whenever the page resizes, we need to force an update, as the button
       // heights and keypad width are computed based on horizontal space.
       this.setState({
         viewportWidth: window.innerWidth
       });
       this.props.onPageSizeChange(window.innerWidth, window.innerHeight);
-    });
-    _defineProperty(this, "renderKeypad", () => {
-      var {
+    };
+    this.renderKeypad = () => {
+      const {
         extraKeys,
         keypadType,
         layoutMode,
         navigationPadEnabled
       } = this.props;
-      var keypadProps = {
+      const keypadProps = {
         extraKeys,
         // HACK(charlie): In order to properly round the corners of the
         // compact keypad, we need to instruct some of our child views to
@@ -7055,7 +7146,7 @@ class KeypadContainer extends React.Component {
         default:
           throw new Error("Invalid keypad type: " + keypadType);
       }
-    });
+    };
   }
   UNSAFE_componentWillMount() {
     if (this.props.active) {
@@ -7089,23 +7180,23 @@ class KeypadContainer extends React.Component {
     window.removeEventListener("orientationchange", this._throttleResizeHandler);
   }
   render() {
-    var {
+    const {
       active,
       layoutMode,
       navigationPadEnabled,
       onElementMounted,
       style
     } = this.props;
-    var {
+    const {
       hasBeenActivated
     } = this.state;
 
     // NOTE(charlie): We render the transforms as pure inline styles to
     // avoid an Aphrodite bug in mobile Safari.
     //   See: https://github.com/Khan/aphrodite/issues/68.
-    var dynamicStyle = _objectSpread2(_objectSpread2({}, active ? inlineStyles.active : inlineStyles.hidden), !active && !hasBeenActivated ? inlineStyles.invisible : {});
-    var keypadContainerStyle = [row, centered, fullWidth, styles.keypadContainer, ...(Array.isArray(style) ? style : [style])];
-    var keypadStyle = [row, styles.keypadBorder, layoutMode === LayoutModes.FULLSCREEN ? styles.fullscreen : styles.compact];
+    const dynamicStyle = _extends({}, active ? inlineStyles.active : inlineStyles.hidden, !active && !hasBeenActivated ? inlineStyles.invisible : {});
+    const keypadContainerStyle = [row, centered, fullWidth, styles.keypadContainer, ...(Array.isArray(style) ? style : [style])];
+    const keypadStyle = [row, styles.keypadBorder, layoutMode === LayoutModes.FULLSCREEN ? styles.fullscreen : styles.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
@@ -7130,7 +7221,7 @@ class KeypadContainer extends React.Component {
     }, this.renderKeypad())));
   }
 }
-_defineProperty(KeypadContainer, "propTypes", {
+KeypadContainer.propTypes = {
   active: PropTypes.bool,
   extraKeys: PropTypes.arrayOf(keyIdPropType),
   keypadType: PropTypes.oneOf(Object.keys(KeypadTypes)).isRequired,
@@ -7142,16 +7233,16 @@ _defineProperty(KeypadContainer, "propTypes", {
   onElementMounted: PropTypes.func,
   onPageSizeChange: PropTypes.func.isRequired,
   style: PropTypes.any
-});
-var keypadAnimationDurationMs = 300;
-var borderWidthPx = 1;
-var styles = StyleSheet.create({
+};
+const keypadAnimationDurationMs = 300;
+const borderWidthPx = 1;
+const styles = StyleSheet.create({
   keypadContainer: {
     bottom: 0,
     left: 0,
     right: 0,
     position: "fixed",
-    transition: "".concat(keypadAnimationDurationMs, "ms ease-out"),
+    transition: `${keypadAnimationDurationMs}ms ease-out`,
     transitionProperty: "transform",
     zIndex: keypad
   },
@@ -7172,7 +7263,7 @@ var styles = StyleSheet.create({
   },
   navigationPadContainer: {
     // Add a separator between the navigation pad and the keypad.
-    borderRight: "".concat(innerBorderWidthPx, "px ").concat(innerBorderStyle, " ") + "".concat(innerBorderColor),
+    borderRight: `${innerBorderWidthPx}px ${innerBorderStyle} ` + `${innerBorderColor}`,
     boxSizing: "content-box"
   },
   // Defer to the navigation pad, such that the navigation pad is always
@@ -7187,7 +7278,7 @@ var styles = StyleSheet.create({
 });
 
 // Note: these don't go through an autoprefixer/aphrodite.
-var inlineStyles = {
+const inlineStyles = {
   // If the keypad is yet to have ever been activated, we keep it invisible
   // so as to avoid, e.g., the keypad flashing at the bottom of the page
   // during the initial render.
@@ -7201,13 +7292,13 @@ var inlineStyles = {
     transform: "translate3d(0, 0, 0)"
   }
 };
-var mapStateToProps = state => {
-  return _objectSpread2(_objectSpread2({}, state.keypad), {}, {
+const mapStateToProps = state => {
+  return _extends({}, state.keypad, {
     layoutMode: state.layout.layoutMode,
     navigationPadEnabled: state.layout.navigationPadEnabled
   });
 };
-var mapDispatchToProps = dispatch => {
+const mapDispatchToProps = dispatch => {
   return {
     onPageSizeChange: (pageWidthPx, pageHeightPx) => {
       dispatch(setPageSize(pageWidthPx, pageHeightPx));
@@ -7218,19 +7309,19 @@ var KeypadContainer$1 = connect(mapStateToProps, mapDispatchToProps, null, {
   forwardRef: true
 })(KeypadContainer);
 
-var _excluded = ["onElementMounted"];
+const _excluded = ["onElementMounted"];
 class ProvidedKeypad extends React.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "mounted", void 0);
-    _defineProperty(this, "store", void 0);
-    _defineProperty(this, "activate", () => {
+  constructor(...args) {
+    super(...args);
+    this.mounted = void 0;
+    this.store = void 0;
+    this.activate = () => {
       this.store.dispatch(activateKeypad());
-    });
-    _defineProperty(this, "dismiss", () => {
+    };
+    this.dismiss = () => {
       this.store.dispatch(dismissKeypad());
-    });
-    _defineProperty(this, "configure", (configuration, cb) => {
+    };
+    this.configure = (configuration, cb) => {
       this.store.dispatch(configureKeypad(configuration));
 
       // HACK(charlie): In Perseus, triggering a focus causes the keypad to
@@ -7241,16 +7332,16 @@ class ProvidedKeypad extends React.Component {
       // would require middleware, etc., so we just hack it on with
       // `setTimeout` for now.
       setTimeout(() => cb && cb());
-    });
-    _defineProperty(this, "setCursor", cursor => {
+    };
+    this.setCursor = cursor => {
       this.store.dispatch(setCursor(cursor));
-    });
-    _defineProperty(this, "setKeyHandler", keyHandler => {
+    };
+    this.setKeyHandler = keyHandler => {
       this.store.dispatch(setKeyHandler(keyHandler));
-    });
-    _defineProperty(this, "getDOMNode", () => {
+    };
+    this.getDOMNode = () => {
       return ReactDOM.findDOMNode(this);
-    });
+    };
   }
   UNSAFE_componentWillMount() {
     this.store = createStore();
@@ -7262,18 +7353,18 @@ class ProvidedKeypad extends React.Component {
     this.mounted = false;
   }
   render() {
-    var _this$props = this.props,
+    const _this$props = this.props,
       {
-        onElementMounted: _onElementMounted
+        onElementMounted
       } = _this$props,
-      rest = _objectWithoutProperties(_this$props, _excluded);
+      rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
     return /*#__PURE__*/React.createElement(Provider, {
       store: this.store
     }, /*#__PURE__*/React.createElement(KeypadContainer$1, _extends({
       onElementMounted: element => {
         // Append the dispatch methods that we want to expose
         // externally to the returned React element.
-        var elementWithDispatchMethods = _objectSpread2(_objectSpread2({}, element), {}, {
+        const elementWithDispatchMethods = _extends({}, element, {
           activate: this.activate,
           dismiss: this.dismiss,
           configure: this.configure,
@@ -7281,7 +7372,7 @@ class ProvidedKeypad extends React.Component {
           setKeyHandler: this.setKeyHandler,
           getDOMNode: this.getDOMNode
         });
-        _onElementMounted && _onElementMounted(elementWithDispatchMethods);
+        onElementMounted && onElementMounted(elementWithDispatchMethods);
       }
     }, rest)));
   }