@khanacademy/math-input 14.2.1 → 15.0.0

package/dist/index.js

@@ -53,23 +53,9 @@ var Redux__namespace = /*#__PURE__*/_interopNamespace(Redux);
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/math-input";
-const libVersion = "14.2.1";
+const libVersion = "15.0.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
-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) {
     for (var i = 1; i < arguments.length; i++) {
@@ -84,20 +70,6 @@ function _extends() {
   };
   return _extends.apply(this, arguments);
 }
-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);
-}
 
 class Text extends React__namespace.Component {
   render() {
@@ -133,8 +105,36 @@ const styles$k = aphrodite.StyleSheet.create({
 });
 
 class View extends React__namespace.Component {
+  static styles = aphrodite.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: {
+      alignItems: "stretch",
+      borderWidth: 0,
+      borderStyle: "solid",
+      boxSizing: "border-box",
+      display: "flex",
+      flexBasis: "auto",
+      flexDirection: "column",
+      margin: 0,
+      padding: 0,
+      position: "relative",
+      // button and anchor reset
+      backgroundColor: "transparent",
+      color: "inherit",
+      font: "inherit",
+      textAlign: "inherit",
+      textDecorationLine: "none",
+      // list reset
+      listStyle: "none",
+      // fix flexbox bugs
+      maxWidth: "100%",
+      minHeight: 0,
+      minWidth: 0
+    }
+  });
   render() {
-    const className = aphrodite.css(View.styles.initial, ...(Array.isArray(this.props.style) ? this.props.style : [this.props.style])) + (this.props.extraClassName ? " ".concat(this.props.extraClassName) : "");
+    const className = aphrodite.css(View.styles.initial, ...(Array.isArray(this.props.style) ? this.props.style : [this.props.style])) + (this.props.extraClassName ? ` ${this.props.extraClassName}` : "");
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: className,
       style: this.props.dynamicStyle,
@@ -149,34 +149,6 @@ class View extends React__namespace.Component {
     }, this.props.children);
   }
 }
-_defineProperty(View, "styles", aphrodite.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: {
-    alignItems: "stretch",
-    borderWidth: 0,
-    borderStyle: "solid",
-    boxSizing: "border-box",
-    display: "flex",
-    flexBasis: "auto",
-    flexDirection: "column",
-    margin: 0,
-    padding: 0,
-    position: "relative",
-    // button and anchor reset
-    backgroundColor: "transparent",
-    color: "inherit",
-    font: "inherit",
-    textAlign: "inherit",
-    textDecorationLine: "none",
-    // list reset
-    listStyle: "none",
-    // fix flexbox bugs
-    maxWidth: "100%",
-    minHeight: 0,
-    minWidth: 0
-  }
-}));
 
 /**
  * Common parameters used to style components.
@@ -218,6 +190,9 @@ const navigationPadWidthPx = 192;
 // has settled down.
 const toolbarHeightPx = 60;
 
+/**
+ * Renders the green tear-shaped handle under the cursor.
+ */
 const touchTargetRadiusPx = 2 * cursorHandleRadiusPx;
 const touchTargetHeightPx = 2 * touchTargetRadiusPx;
 const touchTargetWidthPx = 2 * touchTargetRadiusPx;
@@ -225,6 +200,12 @@ const cursorRadiusPx = cursorHandleRadiusPx;
 const cursorHeightPx = cursorHandleDistanceMultiplier * (cursorRadiusPx * 4);
 const cursorWidthPx = 4 * cursorRadiusPx;
 class CursorHandle extends React__namespace.Component {
+  static defaultProps = {
+    animateIntoPosition: false,
+    visible: false,
+    x: 0,
+    y: 0
+  };
   render() {
     const {
       x,
@@ -235,7 +216,7 @@ class CursorHandle extends React__namespace.Component {
       transitionDuration: "100ms",
       transitionProperty: "transform"
     } : {};
-    const transformString = "translate(".concat(x, "px, ").concat(y, "px)");
+    const transformString = `translate(${x}px, ${y}px)`;
     const outerStyle = {
       position: "absolute",
       // This is essentially webapp's interactiveComponent + 1.
@@ -261,7 +242,7 @@ class CursorHandle extends React__namespace.Component {
       fill: "none",
       width: cursorWidthPx,
       height: cursorHeightPx,
-      viewBox: "0 0 ".concat(cursorWidthPx, " ").concat(cursorHeightPx)
+      viewBox: `0 0 ${cursorWidthPx} ${cursorHeightPx}`
     }, /*#__PURE__*/React__namespace.createElement("filter", {
       id: "math-input_cursor",
       colorInterpolationFilters: "sRGB",
@@ -307,12 +288,6 @@ class CursorHandle extends React__namespace.Component {
     })));
   }
 }
-_defineProperty(CursorHandle, "defaultProps", {
-  animateIntoPosition: false,
-  visible: false,
-  x: 0,
-  y: 0
-});
 
 /**
  * A gesture recognizer that detects 'drags', crudely defined as either scrolls
@@ -325,9 +300,6 @@ _defineProperty(CursorHandle, "defaultProps", {
 const touchSlopPx = 8;
 class DragListener {
   constructor(onDrag, initialEvent) {
-    _defineProperty(this, "_scrollListener", void 0);
-    _defineProperty(this, "_moveListener", void 0);
-    _defineProperty(this, "_endAndCancelListener", void 0);
     // We detect drags in two ways. First, by listening for the window
     // scroll event (we consider any legitimate scroll to be a drag).
     this._scrollListener = () => {
@@ -727,7 +699,7 @@ function handleBackspaceInLogIndex(mathField, cursor) {
   if (isInsideEmptyNode(cursor)) {
     const grandparent = cursor.parent.parent;
     const command = maybeFindCommandBeforeParens(grandparent);
-    cursor.insLeftOf(command === null || command === void 0 ? void 0 : command.startNode);
+    cursor.insLeftOf(command?.startNode);
     cursor.startSelection();
     if (grandparent[mathQuillInstance.R] !== MathFieldActionType.MQ_END) {
       cursor.insRightOf(grandparent[mathQuillInstance.R]);
@@ -1028,7 +1000,7 @@ function handleExponent(mathField, key) {
       break;
     case "EXP_2":
     case "EXP_3":
-      mathField.write("^".concat(key === "EXP_2" ? 2 : 3));
+      mathField.write(`^${key === "EXP_2" ? 2 : 3}`);
 
       // If we enter a square or a cube, we should leave the cursor
       // within the newly inserted parens, if they exist. This takes
@@ -1042,7 +1014,7 @@ function handleExponent(mathField, key) {
       }
       break;
     default:
-      throw new Error("Invalid exponent key: ".concat(key));
+      throw new Error(`Invalid exponent key: ${key}`);
   }
 }
 
@@ -1124,7 +1096,7 @@ function handleJumpOut(mathField, key) {
       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}`);
   }
 }
 
@@ -1160,7 +1132,7 @@ function buildGenericCallback(str) {
 }
 function buildNormalFunctionCallback(command) {
   return function (mathField) {
-    mathField.write("\\".concat(command, "\\left(\\right)"));
+    mathField.write(`\\${command}\\left(\\right)`);
     mathField.keystroke("Left");
   };
 }
@@ -1323,6 +1295,7 @@ const keyToMathquillMap = {
   Z: buildGenericCallback("Z")
 };
 
+// Notes about MathQuill
 const mobileKeyTranslator = {
   ...keyToMathquillMap,
   // note(Matthew): our mobile backspace logic is really complicated
@@ -1344,8 +1317,6 @@ class MathWrapper {
 
   constructor(element) {
     let callbacks = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    _defineProperty(this, "mathField", void 0);
-    _defineProperty(this, "callbacks", void 0);
     this.mathField = createMathField(element, () => {
       return {
         // use a span instead of a textarea so that we don't bring up the
@@ -1528,481 +1499,27 @@ const scrollIntoView = (containerNode, keypadNode) => {
 const constrainingFrictionFactor = 0.8;
 // eslint-disable-next-line react/no-unsafe
 class MathInput extends React__namespace.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", {
-      focused: false,
-      handle: {
-        animateIntoPosition: false,
-        visible: false,
-        x: 0,
-        y: 0
-      }
-    });
-    _defineProperty(this, "_clearKeypadBoundsCache", () => {
-      this._keypadBounds = null;
-    });
-    _defineProperty(this, "_cacheKeypadBounds", keypadNode => {
-      this._keypadBounds = keypadNode.getBoundingClientRect();
-    });
-    _defineProperty(this, "_updateInputPadding", () => {
-      this._container = ReactDOM__default["default"].findDOMNode(this);
-      this._root = this._container.querySelector(".mq-root-block");
-      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", () => {
-      if (!this._keypadBounds) {
-        var _this$props$keypadEle;
-        const node = (_this$props$keypadEle = this.props.keypadElement) === null || _this$props$keypadEle === void 0 ? void 0 : _this$props$keypadEle.getDOMNode();
-        this._cacheKeypadBounds(node);
-      }
-      return this._keypadBounds;
-    });
-    _defineProperty(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.
-      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) {
-        cursorBoundsLeft = furthestLeftCursorBound;
-      }
-      this.setState({
-        handle: {
-          visible: true,
-          animateIntoPosition,
-          // We subtract containerBounds' left/top to correct for the
-          // position of the container within the page.
-          x: cursorBoundsLeft + cursorWidth / 2 - containerBounds.left,
-          y: cursorBounds.bottom + gapBelowCursor - containerBounds.top
-        }
-      });
-    });
-    _defineProperty(this, "_hideCursorHandle", () => {
-      this.setState({
-        handle: {
-          visible: false,
-          x: 0,
-          y: 0
-        }
-      });
-    });
-    _defineProperty(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.
-      // But we do want to hide the handle is the user is just scrolling the input field
-      // normally, because the handle will not move with the scroll.
-      if (this.state.handle.animateIntoPosition !== false) {
-        this._hideCursorHandle();
-      }
-    });
-    _defineProperty(this, "blur", () => {
-      this.mathField.blur();
-      this.props.onBlur && this.props.onBlur();
-      this.setState({
-        focused: false,
-        handle: {
-          visible: false
-        }
-      });
-    });
-    _defineProperty(this, "focus", () => {
-      var _this$props$keypadEle2, _this$props;
-      // Pass this component's handleKey method to the keypad so it can call
-      // it whenever it needs to trigger a keypress action.
-      (_this$props$keypadEle2 = this.props.keypadElement) === null || _this$props$keypadEle2 === void 0 ? void 0 : _this$props$keypadEle2.setKeyHandler(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.
-        const hideCursor = () => {
-          this.setState({
-            handle: {
-              visible: false
-            }
-          });
-        };
-        const value = this.mathField.getContent();
-        if (this.props.value !== value) {
-          this.props.onChange(value, hideCursor);
-        } else {
-          hideCursor();
-        }
-        return cursor;
-      });
-      this.mathField.focus();
-      (_this$props = this.props) === null || _this$props === void 0 ? void 0 : _this$props.onFocus();
-      this.setState({
-        focused: true
-      }, () => {
-        // NOTE(charlie): We use `setTimeout` to allow for a layout pass to
-        // occur. Otherwise, the keypad is measured incorrectly. Ideally,
-        // we'd use requestAnimationFrame here, but it's unsupported on
-        // Android Browser 4.3.
-        setTimeout(() => {
-          if (this._isMounted) {
-            var _this$props$keypadEle3;
-            // TODO(benkomalo): the keypad is animating at this point,
-            // so we can't call _cacheKeypadBounds(), even though
-            // it'd be nice to do so. It should probably be the case
-            // that the higher level controller tells us when the
-            // keypad is settled (then scrollIntoView wouldn't have
-            // to make assumptions about that either).
-            const maybeKeypadNode = (_this$props$keypadEle3 = this.props.keypadElement) === null || _this$props$keypadEle3 === void 0 ? void 0 : _this$props$keypadEle3.getDOMNode();
-            scrollIntoView(this._container, maybeKeypadNode);
-          }
-        });
-      });
-    });
-    _defineProperty(this, "_findHitNode", (containerBounds, x, y, dx, dy) => {
-      while (y >= containerBounds.top && y <= containerBounds.bottom) {
-        y += dy;
-        const points = [[x - dx, y], [x, y], [x + dx, y]];
-        const elements = points
-        // @ts-expect-error - 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
-        // as non-leaf which are fractions, parens, and roots.  The
-        // children of those nodes are included in the list because
-        // those are the items we care about placing the cursor next
-        // to.
-        //
-        // MathQuill's mq-non-leaf is not applied to all non-leaf nodes
-        // so the naming is a bit confusing.  Although fractions are
-        // 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")));
-        let hitNode = null;
-
-        // Contains only DOMNodes with child elements.
-        const nonLeafElements = [];
-        let max = 0;
-        const counts = {};
-        const elementsById = {};
-        for (const element of elements) {
-          // @ts-expect-error - TS2531 - Object is possibly 'null'.
-          const id = element.getAttribute("mathquill-command-id");
-          if (id != null) {
-            counts[id] = (counts[id] || 0) + 1;
-            elementsById[id] = element;
-          } else {
-            // @ts-expect-error - TS2345 - Argument of type 'Element | null' is not assignable to parameter of type 'HTMLElement | null'.
-            nonLeafElements.push(element);
-          }
-        }
-
-        // When determining which DOMNode to place the cursor beside, we
-        // prefer leaf nodes.  Hitting a leaf node is a good sign that the
-        // cursor is really close to some piece of math that has been
-        // rendered because leaf nodes contain text.  Non-leaf nodes may
-        // contain a lot of whitespace so the cursor may be further away
-        // from actual text within the expression.
-        //
-        // Since we're doing three hit tests per loop it's possible that
-        // 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 (const [id, count] of wonderStuffCore.entries(counts)) {
-          if (count > max) {
-            max = count;
-            hitNode = elementsById[id];
-          }
-        }
-
-        // It's possible that two non-leaf nodes are right beside each
-        // other.  We don't bother counting the number of hits for each,
-        // b/c this seems like an unlikely situation.  Also, ignoring the
-        // hit count in the situation should not have serious effects on
-        // the overall accuracy of the algorithm.
-        if (hitNode == null && nonLeafElements.length > 0) {
-          // @ts-expect-error - TS2322 - Type 'HTMLElement | null' is not assignable to type 'null'.
-          hitNode = nonLeafElements[0];
-        }
-        if (hitNode !== null) {
-          this.mathField.setCursorPosition(x, y, hitNode);
-          return true;
-        }
-      }
-      return false;
-    });
-    _defineProperty(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.
-      if (!this._root.hasChildNodes()) {
-        cursor.insAtLeftEnd(this.mathField.mathField.__controller.root);
-        return;
-      }
-
-      // NOTE(diedra): The adding and subtracting of 10 or 15 pixels here accounts
-      // for the padding that surrounds the input values.
-      if (y > this._containerBounds.bottom) {
-        y = this._containerBounds.bottom - 10;
-      } else if (y < this._containerBounds.top) {
-        y = this._containerBounds.top + 10;
-      }
-      if (x > this._containerBounds.right) {
-        x = this._containerBounds.right - 15;
-      } else if (x < this._containerBounds.left) {
-        x = this._containerBounds.left + 15;
-      }
-      let dy;
-
-      // Vertical spacing between hit tests
-      // dy is negative because we're moving upwards.
-      dy = -8;
-
-      // Horizontal spacing between hit tests
-      // 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.
-      const dx = 5;
-      if (this._findHitNode(this._containerBounds, x, y, dx, dy)) {
-        return;
-      }
-
-      // If we haven't found anything start from the top.
-      y = this._containerBounds.top;
-
-      // dy is positive b/c we're going downwards.
-      dy = 8;
-      if (this._findHitNode(this._containerBounds, x, y, dx, dy)) {
-        return;
-      }
-      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
-      // which it's closest.
-      if (Math.abs(x - right) < Math.abs(x - left)) {
-        cursor.insAtRightEnd(this.mathField.mathField.__controller.root);
-      } else {
-        cursor.insAtLeftEnd(this.mathField.mathField.__controller.root);
-      }
-      // In that event, we need to update the cursor context ourselves.
-      this.props.keypadElement && this.props.keypadElement.setCursor({
-        context: this.mathField.contextForCursor()
-      });
-    });
-    _defineProperty(this, "handleTouchStart", e => {
-      e.stopPropagation();
-
-      // Hide the cursor handle on touch start, if the handle itself isn't
-      // handling the touch event.
-      this._hideCursorHandle();
-
-      // Cache the container bounds, so as to avoid re-computing. If we don't
-      // have any content, then it's not necessary, since the cursor can't be
-      // moved anyway.
-      if (this.mathField.getContent() !== "") {
-        this._containerBounds = this._container.getBoundingClientRect();
-
-        // Make the cursor visible and set the handle-less cursor's
-        // location.
-        const touch = e.changedTouches[0];
-        this._insertCursorAtClosestNode(touch.clientX, touch.clientY);
-      }
-
-      // Trigger a focus event, if we're not already focused.
-      if (!this.state.focused) {
-        this.focus();
-      }
-    });
-    _defineProperty(this, "handleTouchMove", e => {
-      e.stopPropagation();
-
-      // Update the handle-less cursor's location on move, if there's any
-      // content in the box. Note that if the user touched outside the keypad
-      // (e.g., with a different finger) during this touch interaction, we
-      // may have blurred, in which case we should ignore the touch (since
-      // the cursor is no longer visible and the input is no longer
-      // highlighted).
-      if (this.mathField.getContent() !== "" && this.state.focused) {
-        const touch = e.changedTouches[0];
-        this._insertCursorAtClosestNode(touch.clientX, touch.clientY);
-      }
-    });
-    _defineProperty(this, "handleTouchEnd", e => {
-      e.stopPropagation();
-
-      // And on touch-end, reveal the cursor, unless the input is empty. Note
-      // that if the user touched outside the keypad (e.g., with a different
-      // finger) during this touch interaction, we may have blurred, in which
-      // case we should ignore the touch (since the cursor is no longer
-      // visible and the input is no longer highlighted).
-      if (this.mathField.getContent() !== "" && this.state.focused) {
-        this._updateCursorHandle();
-      }
-    });
-    _defineProperty(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
-      // touch events, and for this view to only handle touch events that
-      // don't affect the cursor. As such, we `stopPropagation` on any touch
-      // events that are being handled by the cursor, so as to avoid handling
-      // them in our own touch handlers.
-      e.stopPropagation();
-      e.preventDefault();
-
-      // Cache the container bounds, so as to avoid re-computing.
-      this._containerBounds = this._container.getBoundingClientRect();
-    });
-    _defineProperty(this, "_constrainToBound", (value, min, max, friction) => {
-      if (value < min) {
-        return min + (value - min) * friction;
-      } else if (value > max) {
-        return max + (value - max) * friction;
-      } else {
-        return value;
-      }
-    });
-    _defineProperty(this, "onCursorHandleTouchMove", e => {
-      e.stopPropagation();
-      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
-      // additional 2 x {height of the cursor} so that the bottom of the
-      // cursor tracks the user's finger, to make it visible under their
-      // touch.
-      this.setState({
-        handle: {
-          animateIntoPosition: false,
-          visible: true,
-          // TODO(charlie): Use clientX and clientY to avoid the need for
-          // scroll offsets. This likely also means that the cursor
-          // detection doesn't work when scrolled, since we're not
-          // offsetting those values.
-          x: this._constrainToBound(relativeX, 0, this._containerBounds.width, constrainingFrictionFactor),
-          y: this._constrainToBound(relativeY, 0, this._containerBounds.height, constrainingFrictionFactor)
-        }
-      });
+  // @ts-expect-error - TS2564 - Property 'recordTouchStartOutside' has no initializer and is not definitely assigned in the constructor.
 
-      // 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.
-      const distanceAboveFingerToTrySelecting = 22;
-      const adjustedY = y - distanceAboveFingerToTrySelecting;
-      this._insertCursorAtClosestNode(x, adjustedY);
-    });
-    _defineProperty(this, "onCursorHandleTouchEnd", e => {
-      e.stopPropagation();
-      this._updateCursorHandle(true);
-    });
-    _defineProperty(this, "onCursorHandleTouchCancel", e => {
-      e.stopPropagation();
-      this._updateCursorHandle(true);
-    });
-    _defineProperty(this, "domKeyToMathQuillKey", key => {
-      const keyMap = {
-        "+": "PLUS",
-        "-": "MINUS",
-        "*": "TIMES",
-        "/": "DIVIDE",
-        ".": "DECIMAL",
-        "%": "PERCENT",
-        "=": "EQUAL",
-        ">": "GT",
-        "<": "LT",
-        "^": "EXP"
-      };
+  // @ts-expect-error - TS2564 - Property 'blurOnTouchEndOutside' has no initializer and is not definitely assigned in the constructor.
 
-      // Numbers
-      if (["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"].includes(key)) {
-        return "NUM_".concat(key);
-      }
+  // @ts-expect-error - TS2564 - Property '_container' has no initializer and is not definitely assigned in the constructor.
 
-      // Movement keys
-      else if (key === "Backspace") {
-        return "BACKSPACE";
-      }
+  // @ts-expect-error - TS2564 - Property '_containerBounds' has no initializer and is not definitely assigned in the constructor.
 
-      // Operators
-      else if (key in keyMap) {
-        return keyMap[key];
-      }
-
-      // The key pressed doesn't map to any of the math input operators
-      return null;
-    });
-    _defineProperty(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
-        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", () => {
-      // TODO(diedra): Move these to the common style package.
-      const normalBorderWidthPx = 1;
-      const focusedBorderWidthPx = 2;
-      return this.state.focused ? focusedBorderWidthPx : normalBorderWidthPx;
-    });
-    _defineProperty(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
-      // the input. However, Symbola (MathQuill's font of choice) renders
-      // 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.
-      const symbolaPaddingBottom = 3;
-      const symbolaPaddingTop = 1;
-      const padding = {
-        paddingTop: paddingInset - symbolaPaddingTop,
-        paddingRight: paddingInset,
-        paddingBottom: paddingInset - symbolaPaddingBottom,
-        paddingLeft: paddingInset
-      };
-      return padding;
-    });
-  }
+  static defaultProps = {
+    style: {},
+    value: ""
+  };
+  state = {
+    focused: false,
+    handle: {
+      animateIntoPosition: false,
+      visible: false,
+      x: 0,
+      y: 0
+    }
+  };
   componentDidMount() {
     this._isMounted = true;
     this.mathField = new MathWrapper(this._mathContainer, {
@@ -2126,6 +1643,519 @@ class MathInput extends React__namespace.Component {
     // @ts-expect-error - TS2769 - No overload matches this call.
     this._clearKeypadBoundsCache());
   }
+  _clearKeypadBoundsCache = () => {
+    this._keypadBounds = null;
+  };
+  _cacheKeypadBounds = keypadNode => {
+    this._keypadBounds = keypadNode.getBoundingClientRect();
+  };
+  _updateInputPadding = () => {
+    this._container = ReactDOM__default["default"].findDOMNode(this);
+    this._root = this._container.querySelector(".mq-root-block");
+    const padding = this.getInputInnerPadding();
+    // NOTE(diedra): This overrides the default 2px padding from Mathquil.
+    this._root.style.padding = `${padding.paddingTop}px ${padding.paddingRight}px` + ` ${padding.paddingBottom}px ${padding.paddingLeft}px`;
+    this._root.style.fontSize = `${fontSizePt}pt`;
+  };
+
+  /** Gets and cache they bounds of the keypadElement */
+  _getKeypadBounds = () => {
+    if (!this._keypadBounds) {
+      const node = this.props.keypadElement?.getDOMNode();
+      this._cacheKeypadBounds(node);
+    }
+    return this._keypadBounds;
+  };
+  _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.
+    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) {
+      cursorBoundsLeft = furthestLeftCursorBound;
+    }
+    this.setState({
+      handle: {
+        visible: true,
+        animateIntoPosition,
+        // We subtract containerBounds' left/top to correct for the
+        // position of the container within the page.
+        x: cursorBoundsLeft + cursorWidth / 2 - containerBounds.left,
+        y: cursorBounds.bottom + gapBelowCursor - containerBounds.top
+      }
+    });
+  };
+  _hideCursorHandle = () => {
+    this.setState({
+      handle: {
+        visible: false,
+        x: 0,
+        y: 0
+      }
+    });
+  };
+  _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.
+    // But we do want to hide the handle is the user is just scrolling the input field
+    // normally, because the handle will not move with the scroll.
+    if (this.state.handle.animateIntoPosition !== false) {
+      this._hideCursorHandle();
+    }
+  };
+  blur = () => {
+    this.mathField.blur();
+    this.props.onBlur && this.props.onBlur();
+    this.setState({
+      focused: false,
+      handle: {
+        visible: false
+      }
+    });
+  };
+  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 => {
+      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.
+      const hideCursor = () => {
+        this.setState({
+          handle: {
+            visible: false
+          }
+        });
+      };
+      const value = this.mathField.getContent();
+      if (this.props.value !== value) {
+        this.props.onChange(value, hideCursor);
+      } else {
+        hideCursor();
+      }
+      return cursor;
+    });
+    this.mathField.focus();
+    this.props?.onFocus();
+    this.setState({
+      focused: true
+    }, () => {
+      // NOTE(charlie): We use `setTimeout` to allow for a layout pass to
+      // occur. Otherwise, the keypad is measured incorrectly. Ideally,
+      // we'd use requestAnimationFrame here, but it's unsupported on
+      // Android Browser 4.3.
+      setTimeout(() => {
+        if (this._isMounted) {
+          // TODO(benkomalo): the keypad is animating at this point,
+          // so we can't call _cacheKeypadBounds(), even though
+          // it'd be nice to do so. It should probably be the case
+          // that the higher level controller tells us when the
+          // keypad is settled (then scrollIntoView wouldn't have
+          // to make assumptions about that either).
+          const maybeKeypadNode = this.props.keypadElement?.getDOMNode();
+          scrollIntoView(this._container, maybeKeypadNode);
+        }
+      });
+    });
+  };
+
+  /**
+   * Tries to determine which DOM node to place the cursor next to based on
+   * where the user drags the cursor handle.  If it finds a node it will
+   * place the cursor next to it, update the handle to be under the cursor,
+   * and return true.  If it doesn't find a node, it returns false.
+   *
+   * It searches for nodes by doing it tests at the following points:
+   *
+   *   (x - dx, y), (x, y), (x + dx, y)
+   *
+   * If it doesn't find any nodes from the rendered math it will update y
+   * by adding dy.
+   *
+   * The algorithm ends its search when y goes outside the bounds of
+   * containerBounds.
+   *
+   * @param {DOMRect} containerBounds - bounds of the container node
+   * @param {number} x - the initial x coordinate in the viewport
+   * @param {number} y - the initial y coordinate in the viewport
+   * @param {number} dx - horizontal spacing between elementFromPoint calls
+   * @param {number} dy - vertical spacing between elementFromPoint calls,
+   *                      sign determines direction.
+   * @returns {boolean} - true if a node was hit, false otherwise.
+   */
+  _findHitNode = (containerBounds, x, y, dx, dy) => {
+    while (y >= containerBounds.top && y <= containerBounds.bottom) {
+      y += dy;
+      const points = [[x - dx, y], [x, y], [x + dx, y]];
+      const elements = points
+      // @ts-expect-error - 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
+      // as non-leaf which are fractions, parens, and roots.  The
+      // children of those nodes are included in the list because
+      // those are the items we care about placing the cursor next
+      // to.
+      //
+      // MathQuill's mq-non-leaf is not applied to all non-leaf nodes
+      // so the naming is a bit confusing.  Although fractions are
+      // 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")));
+      let hitNode = null;
+
+      // Contains only DOMNodes with child elements.
+      const nonLeafElements = [];
+      let max = 0;
+      const counts = {};
+      const elementsById = {};
+      for (const element of elements) {
+        // @ts-expect-error - TS2531 - Object is possibly 'null'.
+        const id = element.getAttribute("mathquill-command-id");
+        if (id != null) {
+          counts[id] = (counts[id] || 0) + 1;
+          elementsById[id] = element;
+        } else {
+          // @ts-expect-error - TS2345 - Argument of type 'Element | null' is not assignable to parameter of type 'HTMLElement | null'.
+          nonLeafElements.push(element);
+        }
+      }
+
+      // When determining which DOMNode to place the cursor beside, we
+      // prefer leaf nodes.  Hitting a leaf node is a good sign that the
+      // cursor is really close to some piece of math that has been
+      // rendered because leaf nodes contain text.  Non-leaf nodes may
+      // contain a lot of whitespace so the cursor may be further away
+      // from actual text within the expression.
+      //
+      // Since we're doing three hit tests per loop it's possible that
+      // 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 (const [id, count] of wonderStuffCore.entries(counts)) {
+        if (count > max) {
+          max = count;
+          hitNode = elementsById[id];
+        }
+      }
+
+      // It's possible that two non-leaf nodes are right beside each
+      // other.  We don't bother counting the number of hits for each,
+      // b/c this seems like an unlikely situation.  Also, ignoring the
+      // hit count in the situation should not have serious effects on
+      // the overall accuracy of the algorithm.
+      if (hitNode == null && nonLeafElements.length > 0) {
+        // @ts-expect-error - TS2322 - Type 'HTMLElement | null' is not assignable to type 'null'.
+        hitNode = nonLeafElements[0];
+      }
+      if (hitNode !== null) {
+        this.mathField.setCursorPosition(x, y, hitNode);
+        return true;
+      }
+    }
+    return false;
+  };
+
+  /**
+   * Inserts the cursor at the DOM node closest to the given coordinates,
+   * based on hit-tests conducted using #_findHitNode.
+   *
+   * @param {number} x - the x coordinate in the viewport
+   * @param {number} y - the y coordinate in the viewport
+   */
+  _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.
+    if (!this._root.hasChildNodes()) {
+      cursor.insAtLeftEnd(this.mathField.mathField.__controller.root);
+      return;
+    }
+
+    // NOTE(diedra): The adding and subtracting of 10 or 15 pixels here accounts
+    // for the padding that surrounds the input values.
+    if (y > this._containerBounds.bottom) {
+      y = this._containerBounds.bottom - 10;
+    } else if (y < this._containerBounds.top) {
+      y = this._containerBounds.top + 10;
+    }
+    if (x > this._containerBounds.right) {
+      x = this._containerBounds.right - 15;
+    } else if (x < this._containerBounds.left) {
+      x = this._containerBounds.left + 15;
+    }
+    let dy;
+
+    // Vertical spacing between hit tests
+    // dy is negative because we're moving upwards.
+    dy = -8;
+
+    // Horizontal spacing between hit tests
+    // 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.
+    const dx = 5;
+    if (this._findHitNode(this._containerBounds, x, y, dx, dy)) {
+      return;
+    }
+
+    // If we haven't found anything start from the top.
+    y = this._containerBounds.top;
+
+    // dy is positive b/c we're going downwards.
+    dy = 8;
+    if (this._findHitNode(this._containerBounds, x, y, dx, dy)) {
+      return;
+    }
+    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
+    // which it's closest.
+    if (Math.abs(x - right) < Math.abs(x - left)) {
+      cursor.insAtRightEnd(this.mathField.mathField.__controller.root);
+    } else {
+      cursor.insAtLeftEnd(this.mathField.mathField.__controller.root);
+    }
+    // In that event, we need to update the cursor context ourselves.
+    this.props.keypadElement && this.props.keypadElement.setCursor({
+      context: this.mathField.contextForCursor()
+    });
+  };
+  handleTouchStart = e => {
+    e.stopPropagation();
+
+    // Hide the cursor handle on touch start, if the handle itself isn't
+    // handling the touch event.
+    this._hideCursorHandle();
+
+    // Cache the container bounds, so as to avoid re-computing. If we don't
+    // have any content, then it's not necessary, since the cursor can't be
+    // moved anyway.
+    if (this.mathField.getContent() !== "") {
+      this._containerBounds = this._container.getBoundingClientRect();
+
+      // Make the cursor visible and set the handle-less cursor's
+      // location.
+      const touch = e.changedTouches[0];
+      this._insertCursorAtClosestNode(touch.clientX, touch.clientY);
+    }
+
+    // Trigger a focus event, if we're not already focused.
+    if (!this.state.focused) {
+      this.focus();
+    }
+  };
+  handleTouchMove = e => {
+    e.stopPropagation();
+
+    // Update the handle-less cursor's location on move, if there's any
+    // content in the box. Note that if the user touched outside the keypad
+    // (e.g., with a different finger) during this touch interaction, we
+    // may have blurred, in which case we should ignore the touch (since
+    // the cursor is no longer visible and the input is no longer
+    // highlighted).
+    if (this.mathField.getContent() !== "" && this.state.focused) {
+      const touch = e.changedTouches[0];
+      this._insertCursorAtClosestNode(touch.clientX, touch.clientY);
+    }
+  };
+  handleTouchEnd = e => {
+    e.stopPropagation();
+
+    // And on touch-end, reveal the cursor, unless the input is empty. Note
+    // that if the user touched outside the keypad (e.g., with a different
+    // finger) during this touch interaction, we may have blurred, in which
+    // case we should ignore the touch (since the cursor is no longer
+    // visible and the input is no longer highlighted).
+    if (this.mathField.getContent() !== "" && this.state.focused) {
+      this._updateCursorHandle();
+    }
+  };
+
+  /**
+   * When a touch starts in the cursor handle, we track it so as to avoid
+   * handling any touch events ourself.
+   *
+   * @param {TouchEvent} e - the raw touch event from the browser
+   */
+  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
+    // touch events, and for this view to only handle touch events that
+    // don't affect the cursor. As such, we `stopPropagation` on any touch
+    // events that are being handled by the cursor, so as to avoid handling
+    // them in our own touch handlers.
+    e.stopPropagation();
+    e.preventDefault();
+
+    // Cache the container bounds, so as to avoid re-computing.
+    this._containerBounds = this._container.getBoundingClientRect();
+  };
+  _constrainToBound = (value, min, max, friction) => {
+    if (value < min) {
+      return min + (value - min) * friction;
+    } else if (value > max) {
+      return max + (value - max) * friction;
+    } else {
+      return value;
+    }
+  };
+
+  /**
+   * When the user moves the cursor handle update the position of the cursor
+   * and the handle.
+   *
+   * @param {TouchEvent} e - the raw touch event from the browser
+   */
+  onCursorHandleTouchMove = e => {
+    e.stopPropagation();
+    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
+    // additional 2 x {height of the cursor} so that the bottom of the
+    // cursor tracks the user's finger, to make it visible under their
+    // touch.
+    this.setState({
+      handle: {
+        animateIntoPosition: false,
+        visible: true,
+        // TODO(charlie): Use clientX and clientY to avoid the need for
+        // scroll offsets. This likely also means that the cursor
+        // detection doesn't work when scrolled, since we're not
+        // offsetting those values.
+        x: this._constrainToBound(relativeX, 0, this._containerBounds.width, constrainingFrictionFactor),
+        y: this._constrainToBound(relativeY, 0, this._containerBounds.height, constrainingFrictionFactor)
+      }
+    });
+
+    // 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.
+    const distanceAboveFingerToTrySelecting = 22;
+    const adjustedY = y - distanceAboveFingerToTrySelecting;
+    this._insertCursorAtClosestNode(x, adjustedY);
+  };
+
+  /**
+   * When the user releases the cursor handle, animate it back into place.
+   *
+   * @param {TouchEvent} e - the raw touch event from the browser
+   */
+  onCursorHandleTouchEnd = e => {
+    e.stopPropagation();
+    this._updateCursorHandle(true);
+  };
+
+  /**
+   * If the gesture is cancelled mid-drag, simply hide it.
+   *
+   * @param {TouchEvent} e - the raw touch event from the browser
+   */
+  onCursorHandleTouchCancel = e => {
+    e.stopPropagation();
+    this._updateCursorHandle(true);
+  };
+  domKeyToMathQuillKey = key => {
+    const keyMap = {
+      "+": "PLUS",
+      "-": "MINUS",
+      "*": "TIMES",
+      "/": "DIVIDE",
+      ".": "DECIMAL",
+      "%": "PERCENT",
+      "=": "EQUAL",
+      ">": "GT",
+      "<": "LT",
+      "^": "EXP"
+    };
+
+    // Numbers
+    if (["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"].includes(key)) {
+      return `NUM_${key}`;
+    }
+
+    // Movement keys
+    else if (key === "Backspace") {
+      return "BACKSPACE";
+    }
+
+    // Operators
+    else if (key in keyMap) {
+      return keyMap[key];
+    }
+
+    // The key pressed doesn't map to any of the math input operators
+    return null;
+  };
+  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
+      const value = this.mathField.getContent();
+      if (this.props.value !== value) {
+        this.mathField.setContent(this.props.value);
+        this.props.onChange(value, false);
+        this._hideCursorHandle();
+      }
+    }
+  };
+  getBorderWidthPx = () => {
+    // TODO(diedra): Move these to the common style package.
+    const normalBorderWidthPx = 1;
+    const focusedBorderWidthPx = 2;
+    return this.state.focused ? focusedBorderWidthPx : normalBorderWidthPx;
+  };
+
+  // Calculate the appropriate padding based on the border width (which is
+  // considered 'padding', since we're using 'border-box') and the fact
+  // that MathQuill automatically applies 2px of padding to the inner
+  // input.
+  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
+    // the input. However, Symbola (MathQuill's font of choice) renders
+    // 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.
+    const symbolaPaddingBottom = 3;
+    const symbolaPaddingTop = 1;
+    const padding = {
+      paddingTop: paddingInset - symbolaPaddingTop,
+      paddingRight: paddingInset,
+      paddingBottom: paddingInset - symbolaPaddingBottom,
+      paddingLeft: paddingInset
+    };
+    return padding;
+  };
   render() {
     const {
       focused,
@@ -2181,10 +2211,6 @@ class MathInput extends React__namespace.Component {
     })));
   }
 }
-_defineProperty(MathInput, "defaultProps", {
-  style: {},
-  value: ""
-});
 const fontSizePt = 18;
 const inputMaxWidth = 128;
 
@@ -2335,12 +2361,12 @@ const styles$i = aphrodite.StyleSheet.create({
     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__default["default"].white),
+    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${Color__default["default"].white}`,
     border: "1px solid #1865F2"
   },
   pressed: {
@@ -2348,11 +2374,11 @@ const styles$i = aphrodite.StyleSheet.create({
   },
   focused: {
     outline: "none",
-    border: "2px solid ".concat(Color__default["default"].blue)
+    border: `2px solid ${Color__default["default"].blue}`
   },
   innerBox: {
     boxSizing: "border-box",
-    border: "1px solid transparent",
+    border: `1px solid transparent`,
     borderRadius: 2,
     display: "flex",
     flex: 1,
@@ -2360,7 +2386,7 @@ const styles$i = aphrodite.StyleSheet.create({
     alignItems: "center"
   },
   innerBoxPressed: {
-    border: "1px solid ".concat(Color__default["default"].white)
+    border: `1px solid ${Color__default["default"].white}`
   },
   activeIndicator: {
     position: "absolute",
@@ -2372,7 +2398,7 @@ const styles$i = aphrodite.StyleSheet.create({
   },
   clickable: {
     ":focus": {
-      outline: "none"
+      outline: `none`
     }
   }
 });
@@ -2452,7 +2478,7 @@ function Tabbar(props) {
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: [styles$h.pages]
   }, items.map(item => /*#__PURE__*/React__namespace.createElement(TabbarItem, {
-    key: "tabbar-item-".concat(item),
+    key: `tabbar-item-${item}`,
     itemState: item === selectedItem ? "active" : "inactive",
     itemType: item,
     onClick: () => {
@@ -4652,7 +4678,7 @@ function ButtonAsset(_ref) {
       // this line forces an exhaustive check of all keys;
       // if a key is not handled, the compiler will complain.
       const unhandledKey = id;
-      throw new Error("Unhandled key: ".concat(unhandledKey));
+      throw new Error(`Unhandled key: ${unhandledKey}`);
   }
 }
 
@@ -4702,7 +4728,7 @@ const styles$g = aphrodite.StyleSheet.create({
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
-    boxShadow: "0px 1px 0px ".concat(Color__default["default"].offBlack32),
+    boxShadow: `0px 1px 0px ${Color__default["default"].offBlack32}`,
     boxSizing: "border-box",
     background: Color__default["default"].white,
     borderRadius: 4,
@@ -4727,7 +4753,7 @@ const styles$g = aphrodite.StyleSheet.create({
   pressed: {
     border: "2px solid #1B50B3",
     padding: 0,
-    background: "linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ".concat(Color__default["default"].white),
+    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${Color__default["default"].white}`,
     boxShadow: "none"
   },
   outerBoxBase: {
@@ -4743,7 +4769,7 @@ const styles$g = aphrodite.StyleSheet.create({
     height: "100%",
     boxSizing: "border-box",
     ":focus": {
-      outline: "none"
+      outline: `none`
     }
   }
 });
@@ -5037,7 +5063,7 @@ function getStyles(key) {
     case "LEFT":
       return styles$f.left;
     default:
-      throw new Error("Invalid key: ".concat(key));
+      throw new Error(`Invalid key: ${key}`);
   }
 }
 function NavigationButton(_ref) {
@@ -5078,7 +5104,7 @@ const styles$f = aphrodite.StyleSheet.create({
     width: "100%",
     height: "100%",
     ":focus": {
-      outline: "none"
+      outline: `none`
     }
   },
   outerBoxBase: {
@@ -5086,7 +5112,7 @@ const styles$f = aphrodite.StyleSheet.create({
     width: "100%"
   },
   base: {
-    boxShadow: "0px 1px 0px ".concat(Color__default["default"].offBlack32),
+    boxShadow: `0px 1px 0px ${Color__default["default"].offBlack32}`,
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
@@ -5120,7 +5146,7 @@ const styles$f = aphrodite.StyleSheet.create({
   },
   pressed: {
     border: "2px solid #1B50B3",
-    background: "linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ".concat(Color__default["default"].white),
+    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${Color__default["default"].white}`,
     boxShadow: "none"
   }
 });
@@ -5238,7 +5264,6 @@ const defaultProps = {
   extraKeys: []
 };
 function getAvailableTabs(props) {
-  var _props$extraKeys;
   // We don't want to show any available tabs on the fractions keypad
   if (props.fractionsOnly) {
     return [];
@@ -5252,7 +5277,7 @@ function getAvailableTabs(props) {
   if (props.trigonometry) {
     tabs.push("Geometry");
   }
-  if ((_props$extraKeys = props.extraKeys) !== null && _props$extraKeys !== void 0 && _props$extraKeys.length) {
+  if (props.extraKeys?.length) {
     tabs.push("Extras");
   }
   return tabs;
@@ -5465,6 +5490,7 @@ class TransitionChild extends React__namespace.Component {
   // We keep track of all of the current applied classes so that we can remove
   // them before a new transition starts in the case of the current transition
   // being interrupted.
+  _isMounted = false;
 
   // The use of getDerivedStateFromProps here is to avoid an extra call to
   // setState if the component re-enters.  This can happen if TransitionGroup
@@ -5483,38 +5509,6 @@ class TransitionChild extends React__namespace.Component {
   }
   constructor(props) {
     super(props);
-    _defineProperty(this, "classNameQueue", void 0);
-    _defineProperty(this, "appliedClassNames", void 0);
-    _defineProperty(this, "_isMounted", false);
-    _defineProperty(this, "addClass", (elem, className) => {
-      if (className) {
-        elem.classList.add(className);
-        this.appliedClassNames.add(className);
-      }
-    });
-    _defineProperty(this, "removeClass", (elem, className) => {
-      if (className) {
-        elem.classList.remove(className);
-        this.appliedClassNames.delete(className);
-      }
-    });
-    _defineProperty(this, "flushClassNameQueue", () => {
-      if (this._isMounted) {
-        const node = ReactDOM__default["default"].findDOMNode(this);
-        if (node instanceof Element) {
-          this.classNameQueue.forEach(_ref2 => {
-            let [removeClassName, addClassName] = _ref2;
-            // Remove the old class before adding a new class just
-            // in case the new class is the same as the old one.
-            this.removeClass(node, removeClassName);
-            this.addClass(node, addClassName);
-          });
-        }
-      }
-
-      // Remove all items in the Array.
-      this.classNameQueue.length = 0;
-    });
     this._isMounted = false;
     this.classNameQueue = [];
     this.appliedClassNames = new Set();
@@ -5558,6 +5552,18 @@ class TransitionChild extends React__namespace.Component {
       this.removeClass(node, className);
     }
   }
+  addClass = (elem, className) => {
+    if (className) {
+      elem.classList.add(className);
+      this.appliedClassNames.add(className);
+    }
+  };
+  removeClass = (elem, className) => {
+    if (className) {
+      elem.classList.remove(className);
+      this.appliedClassNames.delete(className);
+    }
+  };
   transition(animationType, duration) {
     const node = ReactDOM__default["default"].findDOMNode(this);
     if (!(node instanceof Element)) {
@@ -5596,8 +5602,26 @@ class TransitionChild extends React__namespace.Component {
   }
   queueClass(removeClassName, addClassName) {
     this.classNameQueue.push([removeClassName, addClassName]);
-    this.props.schedule.animationFrame(this.flushClassNameQueue);
-  }
+    // Queue operation for after the next paint.
+    this.props.schedule.timeout(this.flushClassNameQueue, 0);
+  }
+  flushClassNameQueue = () => {
+    if (this._isMounted) {
+      const node = ReactDOM__default["default"].findDOMNode(this);
+      if (node instanceof Element) {
+        this.classNameQueue.forEach(_ref2 => {
+          let [removeClassName, addClassName] = _ref2;
+          // Remove the old class before adding a new class just
+          // in case the new class is the same as the old one.
+          this.removeClass(node, removeClassName);
+          this.addClass(node, addClassName);
+        });
+      }
+    }
+
+    // Remove all items in the Array.
+    this.classNameQueue.length = 0;
+  };
   render() {
     const {
       status
@@ -5681,71 +5705,13 @@ const AnimationDurationInMS = 200;
  * can't have methods attached to them).
  */
 class MobileKeypad extends React__namespace.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "_containerRef", /*#__PURE__*/React__namespace.createRef());
-    _defineProperty(this, "_containerResizeObserver", null);
-    _defineProperty(this, "_throttleResize", false);
-    _defineProperty(this, "state", {
-      containerWidth: 0
-    });
-    _defineProperty(this, "_resize", () => {
-      var _this$_containerRef$c;
-      const containerWidth = ((_this$_containerRef$c = this._containerRef.current) === null || _this$_containerRef$c === void 0 ? void 0 : _this$_containerRef$c.clientWidth) || 0;
-      this.setState({
-        containerWidth
-      });
-    });
-    _defineProperty(this, "_throttleResizeHandler", () => {
-      if (this._throttleResize) {
-        return;
-      }
-      this._throttleResize = true;
-      setTimeout(() => {
-        this._resize();
-        this._throttleResize = false;
-      }, 100);
-    });
-    _defineProperty(this, "activate", () => {
-      this.props.setKeypadActive(true);
-    });
-    _defineProperty(this, "dismiss", () => {
-      var _this$props$onDismiss, _this$props;
-      this.props.setKeypadActive(false);
-      (_this$props$onDismiss = (_this$props = this.props).onDismiss) === null || _this$props$onDismiss === void 0 ? void 0 : _this$props$onDismiss.call(_this$props);
-    });
-    _defineProperty(this, "configure", (configuration, cb) => {
-      this.setState({
-        keypadConfig: configuration
-      });
-
-      // TODO(matthewc)[LC-1080]: this was brought in from v1's ProvidedKeypad.
-      // We need to investigate whether we still need this.
-      // HACK(charlie): In Perseus, triggering a focus causes the keypad to
-      // animate into view and re-configure. We'd like to provide the option
-      // to re-render the re-configured keypad before animating it into view,
-      // to avoid jank in the animation. As such, we support passing a
-      // callback into `configureKeypad`. However, implementing this properly
-      // would require middleware, etc., so we just hack it on with
-      // `setTimeout` for now.
-      setTimeout(() => cb && cb());
-    });
-    _defineProperty(this, "setCursor", cursor => {
-      this.setState({
-        cursor
-      });
-    });
-    _defineProperty(this, "setKeyHandler", keyHandler => {
-      this.setState({
-        keyHandler
-      });
-    });
-    _defineProperty(this, "getDOMNode", () => {
-      return ReactDOM__default["default"].findDOMNode(this);
-    });
-  }
+  _containerRef = /*#__PURE__*/React__namespace.createRef();
+  _containerResizeObserver = null;
+  _throttleResize = false;
+  state = {
+    containerWidth: 0
+  };
   componentDidMount() {
-    var _this$props$onElement, _this$props2;
     this._resize();
     window.addEventListener("resize", this._throttleResizeHandler);
     window.addEventListener("orientationchange", this._throttleResizeHandler);
@@ -5758,7 +5724,7 @@ class MobileKeypad extends React__namespace.Component {
         this._containerResizeObserver.observe(this._containerRef.current);
       }
     }
-    (_this$props$onElement = (_this$props2 = this.props).onElementMounted) === null || _this$props$onElement === void 0 ? void 0 : _this$props$onElement.call(_this$props2, {
+    this.props.onElementMounted?.({
       activate: this.activate,
       dismiss: this.dismiss,
       configure: this.configure,
@@ -5768,18 +5734,68 @@ class MobileKeypad extends React__namespace.Component {
     });
   }
   componentWillUnmount() {
-    var _this$_containerResiz;
     window.removeEventListener("resize", this._throttleResizeHandler);
     window.removeEventListener("orientationchange", this._throttleResizeHandler);
-    (_this$_containerResiz = this._containerResizeObserver) === null || _this$_containerResiz === void 0 ? void 0 : _this$_containerResiz.disconnect();
+    this._containerResizeObserver?.disconnect();
   }
+  _resize = () => {
+    const containerWidth = this._containerRef.current?.clientWidth || 0;
+    this.setState({
+      containerWidth
+    });
+  };
+  _throttleResizeHandler = () => {
+    if (this._throttleResize) {
+      return;
+    }
+    this._throttleResize = true;
+    setTimeout(() => {
+      this._resize();
+      this._throttleResize = false;
+    }, 100);
+  };
+  activate = () => {
+    this.props.setKeypadActive(true);
+  };
+  dismiss = () => {
+    this.props.setKeypadActive(false);
+    this.props.onDismiss?.();
+  };
+  configure = (configuration, cb) => {
+    this.setState({
+      keypadConfig: configuration
+    });
+
+    // TODO(matthewc)[LC-1080]: this was brought in from v1's ProvidedKeypad.
+    // We need to investigate whether we still need this.
+    // HACK(charlie): In Perseus, triggering a focus causes the keypad to
+    // animate into view and re-configure. We'd like to provide the option
+    // to re-render the re-configured keypad before animating it into view,
+    // to avoid jank in the animation. As such, we support passing a
+    // callback into `configureKeypad`. However, implementing this properly
+    // would require middleware, etc., so we just hack it on with
+    // `setTimeout` for now.
+    setTimeout(() => cb && cb());
+  };
+  setCursor = cursor => {
+    this.setState({
+      cursor
+    });
+  };
+  setKeyHandler = keyHandler => {
+    this.setState({
+      keyHandler
+    });
+  };
+  getDOMNode = () => {
+    return ReactDOM__default["default"].findDOMNode(this);
+  };
   _handleClickKey(key) {
-    var _this$state$keyHandle, _this$state;
     if (key === "DISMISS") {
       this.dismiss();
       return;
     }
-    const cursor = (_this$state$keyHandle = (_this$state = this.state).keyHandler) === null || _this$state$keyHandle === void 0 ? void 0 : _this$state$keyHandle.call(_this$state, key);
+    const cursor = this.state.keyHandler?.(key);
     this.setState({
       cursor
     });
@@ -5797,35 +5813,35 @@ class MobileKeypad extends React__namespace.Component {
     const containerStyle = [styles$c.keypadContainer,
     // styles passed as props
     ...(Array.isArray(style) ? style : [style])];
-    const isExpression = (keypadConfig === null || keypadConfig === void 0 ? void 0 : keypadConfig.keypadType) === "EXPRESSION";
-    const convertDotToTimes = keypadConfig === null || keypadConfig === void 0 ? void 0 : keypadConfig.times;
-    return /*#__PURE__*/React__namespace.createElement(AphroditeCSSTransitionGroup, {
+    const isExpression = keypadConfig?.keypadType === "EXPRESSION";
+    const convertDotToTimes = keypadConfig?.times;
+    return /*#__PURE__*/React__namespace.createElement(View, {
+      style: containerStyle,
+      forwardRef: this._containerRef
+    }, /*#__PURE__*/React__namespace.createElement(AphroditeCSSTransitionGroup, {
       transitionEnterTimeout: AnimationDurationInMS,
       transitionLeaveTimeout: AnimationDurationInMS,
       transitionStyle: {
         enter: {
           transform: "translate3d(0, 100%, 0)",
-          transition: "".concat(AnimationDurationInMS, "ms ease-out")
+          transition: `${AnimationDurationInMS}ms ease-out`
         },
         enterActive: {
           transform: "translate3d(0, 0, 0)"
         },
         leave: {
           transform: "translate3d(0, 0, 0)",
-          transition: "".concat(AnimationDurationInMS, "ms ease-out")
+          transition: `${AnimationDurationInMS}ms ease-out`
         },
         leaveActive: {
           transform: "translate3d(0, 100%, 0)"
         }
       }
-    }, keypadActive ? /*#__PURE__*/React__namespace.createElement(View, {
-      style: containerStyle,
-      forwardRef: this._containerRef
-    }, /*#__PURE__*/React__namespace.createElement(Keypad$2, {
+    }, keypadActive ? /*#__PURE__*/React__namespace.createElement(Keypad$2, {
       onAnalyticsEvent: this.props.onAnalyticsEvent,
-      extraKeys: keypadConfig === null || keypadConfig === void 0 ? void 0 : keypadConfig.extraKeys,
+      extraKeys: keypadConfig?.extraKeys,
       onClickKey: key => this._handleClickKey(key),
-      cursorContext: cursor === null || cursor === void 0 ? void 0 : cursor.context,
+      cursorContext: cursor?.context,
       fractionsOnly: !isExpression,
       convertDotToTimes: convertDotToTimes,
       divisionKey: isExpression,
@@ -5836,7 +5852,7 @@ class MobileKeypad extends React__namespace.Component {
       advancedRelations: isExpression,
       expandedView: containerWidth > expandedViewThreshold$1,
       showDismiss: true
-    })) : null);
+    }) : null));
   }
 }
 const styles$c = aphrodite.StyleSheet.create({
@@ -5959,20 +5975,14 @@ var Styles = aphrodite.StyleSheet.create({
   }
 });
 
+/**
+ * A component that renders an icon with math (via KaTeX).
+ */
 const {
   row: row$7,
   centered: centered$4
 } = Styles;
 class MathIcon extends React__namespace.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "_renderMath", () => {
-      const {
-        math
-      } = this.props;
-      katex__default["default"].render(math, ReactDOM__default["default"].findDOMNode(this));
-    });
-  }
   componentDidMount() {
     this._renderMath();
   }
@@ -5981,6 +5991,12 @@ class MathIcon extends React__namespace.Component {
       this._renderMath();
     }
   }
+  _renderMath = () => {
+    const {
+      math
+    } = this.props;
+    katex__default["default"].render(math, ReactDOM__default["default"].findDOMNode(this));
+  };
   render() {
     const {
       style
@@ -6001,7 +6017,15 @@ const styles$a = aphrodite.StyleSheet.create({
   }
 });
 
+/**
+ * An autogenerated component that renders the COS iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Cos extends React__namespace.Component {
+  static propTypes = {
+    color: PropTypes__default["default"].string.isRequired
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("svg", {
       width: "48",
@@ -6022,11 +6046,16 @@ class Cos extends React__namespace.Component {
     })));
   }
 }
-_defineProperty(Cos, "propTypes", {
-  color: PropTypes__default["default"].string.isRequired
-});
 
+/**
+ * An autogenerated component that renders the LOG iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Log extends React__namespace.Component {
+  static propTypes = {
+    color: PropTypes__default["default"].string.isRequired
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("svg", {
       width: "48",
@@ -6044,11 +6073,16 @@ class Log extends React__namespace.Component {
     })));
   }
 }
-_defineProperty(Log, "propTypes", {
-  color: PropTypes__default["default"].string.isRequired
-});
 
+/**
+ * An autogenerated component that renders the EQUAL iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Equal extends React__namespace.Component {
+  static propTypes = {
+    color: PropTypes__default["default"].string.isRequired
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("svg", {
       width: "48",
@@ -6072,9 +6106,6 @@ class Equal extends React__namespace.Component {
     })));
   }
 }
-_defineProperty(Equal, "propTypes", {
-  color: PropTypes__default["default"].string.isRequired
-});
 
 /**
  * An autogenerated component that renders the BACKSPACE iconograpy in SVG.
@@ -6104,7 +6135,15 @@ const Backspace = () => {
   })));
 };
 
+/**
+ * An autogenerated component that renders the SQRT iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Sqrt extends React__namespace.Component {
+  static propTypes = {
+    color: PropTypes__default["default"].string.isRequired
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("svg", {
       width: "48",
@@ -6125,11 +6164,16 @@ class Sqrt extends React__namespace.Component {
     })));
   }
 }
-_defineProperty(Sqrt, "propTypes", {
-  color: PropTypes__default["default"].string.isRequired
-});
 
+/**
+ * An autogenerated component that renders the EXP iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Exp extends React__namespace.Component {
+  static propTypes = {
+    color: PropTypes__default["default"].string.isRequired
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("svg", {
       width: "48",
@@ -6147,11 +6191,16 @@ class Exp extends React__namespace.Component {
     })));
   }
 }
-_defineProperty(Exp, "propTypes", {
-  color: PropTypes__default["default"].string.isRequired
-});
 
+/**
+ * An autogenerated component that renders the NEQ iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Neq extends React__namespace.Component {
+  static propTypes = {
+    color: PropTypes__default["default"].string.isRequired
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("svg", {
       width: "48",
@@ -6175,11 +6224,16 @@ class Neq extends React__namespace.Component {
     })));
   }
 }
-_defineProperty(Neq, "propTypes", {
-  color: PropTypes__default["default"].string.isRequired
-});
 
+/**
+ * An autogenerated component that renders the GEQ iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Geq extends React__namespace.Component {
+  static propTypes = {
+    color: PropTypes__default["default"].string.isRequired
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("svg", {
       width: "48",
@@ -6203,11 +6257,16 @@ class Geq extends React__namespace.Component {
     })));
   }
 }
-_defineProperty(Geq, "propTypes", {
-  color: PropTypes__default["default"].string.isRequired
-});
 
+/**
+ * An autogenerated component that renders the LN iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Ln extends React__namespace.Component {
+  static propTypes = {
+    color: PropTypes__default["default"].string.isRequired
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("svg", {
       width: "48",
@@ -6225,9 +6284,6 @@ class Ln extends React__namespace.Component {
     })));
   }
 }
-_defineProperty(Ln, "propTypes", {
-  color: PropTypes__default["default"].string.isRequired
-});
 
 /**
  * An autogenerated component that renders the DISMISS iconograpy in SVG.
@@ -6254,7 +6310,15 @@ const Dismiss = () => {
   })));
 };
 
+/**
+ * An autogenerated component that renders the SIN iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Sin extends React__namespace.Component {
+  static propTypes = {
+    color: PropTypes__default["default"].string.isRequired
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("svg", {
       width: "48",
@@ -6275,11 +6339,16 @@ class Sin extends React__namespace.Component {
     })));
   }
 }
-_defineProperty(Sin, "propTypes", {
-  color: PropTypes__default["default"].string.isRequired
-});
 
+/**
+ * An autogenerated component that renders the LT iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Lt extends React__namespace.Component {
+  static propTypes = {
+    color: PropTypes__default["default"].string.isRequired
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("svg", {
       width: "48",
@@ -6303,11 +6372,16 @@ class Lt extends React__namespace.Component {
     })));
   }
 }
-_defineProperty(Lt, "propTypes", {
-  color: PropTypes__default["default"].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__namespace.Component {
+  static propTypes = {
+    color: PropTypes__default["default"].string.isRequired
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("svg", {
       width: "48",
@@ -6331,11 +6405,16 @@ class CubeRoot extends React__namespace.Component {
     })));
   }
 }
-_defineProperty(CubeRoot, "propTypes", {
-  color: PropTypes__default["default"].string.isRequired
-});
 
+/**
+ * An autogenerated component that renders the PLUS iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Plus extends React__namespace.Component {
+  static propTypes = {
+    color: PropTypes__default["default"].string.isRequired
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("svg", {
       width: "48",
@@ -6356,11 +6435,16 @@ class Plus extends React__namespace.Component {
     })));
   }
 }
-_defineProperty(Plus, "propTypes", {
-  color: PropTypes__default["default"].string.isRequired
-});
 
+/**
+ * An autogenerated component that renders the TAN iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Tan extends React__namespace.Component {
+  static propTypes = {
+    color: PropTypes__default["default"].string.isRequired
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("svg", {
       width: "48",
@@ -6381,9 +6465,6 @@ class Tan extends React__namespace.Component {
     })));
   }
 }
-_defineProperty(Tan, "propTypes", {
-  color: PropTypes__default["default"].string.isRequired
-});
 
 const Arrow = props => {
   return /*#__PURE__*/React__namespace.createElement("g", _extends({
@@ -6441,7 +6522,15 @@ const Down = () => {
   }));
 };
 
+/**
+ * An autogenerated component that renders the LEFT_PAREN iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class LeftParen extends React__namespace.Component {
+  static propTypes = {
+    color: PropTypes__default["default"].string.isRequired
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("svg", {
       width: "48",
@@ -6465,11 +6554,16 @@ class LeftParen extends React__namespace.Component {
     })));
   }
 }
-_defineProperty(LeftParen, "propTypes", {
-  color: PropTypes__default["default"].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__namespace.Component {
+  static propTypes = {
+    color: PropTypes__default["default"].string.isRequired
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("svg", {
       width: "48",
@@ -6493,11 +6587,16 @@ class RightParen extends React__namespace.Component {
     })));
   }
 }
-_defineProperty(RightParen, "propTypes", {
-  color: PropTypes__default["default"].string.isRequired
-});
 
+/**
+ * An autogenerated component that renders the GT iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Gt extends React__namespace.Component {
+  static propTypes = {
+    color: PropTypes__default["default"].string.isRequired
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("svg", {
       width: "48",
@@ -6521,11 +6620,16 @@ class Gt extends React__namespace.Component {
     })));
   }
 }
-_defineProperty(Gt, "propTypes", {
-  color: PropTypes__default["default"].string.isRequired
-});
 
+/**
+ * An autogenerated component that renders the DIVIDE iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Divide extends React__namespace.Component {
+  static propTypes = {
+    color: PropTypes__default["default"].string.isRequired
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("svg", {
       width: "48",
@@ -6556,11 +6660,16 @@ class Divide extends React__namespace.Component {
     })));
   }
 }
-_defineProperty(Divide, "propTypes", {
-  color: PropTypes__default["default"].string.isRequired
-});
 
+/**
+ * An autogenerated component that renders the PERIOD iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Period extends React__namespace.Component {
+  static propTypes = {
+    color: PropTypes__default["default"].string.isRequired
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("svg", {
       width: "48",
@@ -6580,11 +6689,16 @@ class Period extends React__namespace.Component {
     })));
   }
 }
-_defineProperty(Period, "propTypes", {
-  color: PropTypes__default["default"].string.isRequired
-});
 
+/**
+ * An autogenerated component that renders the PERCENT iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Percent extends React__namespace.Component {
+  static propTypes = {
+    color: PropTypes__default["default"].string.isRequired
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("svg", {
       width: "48",
@@ -6622,11 +6736,16 @@ class Percent extends React__namespace.Component {
     }))));
   }
 }
-_defineProperty(Percent, "propTypes", {
-  color: PropTypes__default["default"].string.isRequired
-});
 
+/**
+ * An autogenerated component that renders the TIMES iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Times extends React__namespace.Component {
+  static propTypes = {
+    color: PropTypes__default["default"].string.isRequired
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("svg", {
       width: "48",
@@ -6650,11 +6769,16 @@ class Times extends React__namespace.Component {
     })));
   }
 }
-_defineProperty(Times, "propTypes", {
-  color: PropTypes__default["default"].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__namespace.Component {
+  static propTypes = {
+    color: PropTypes__default["default"].string.isRequired
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("svg", {
       width: "48",
@@ -6672,11 +6796,16 @@ class Exp3 extends React__namespace.Component {
     })));
   }
 }
-_defineProperty(Exp3, "propTypes", {
-  color: PropTypes__default["default"].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__namespace.Component {
+  static propTypes = {
+    color: PropTypes__default["default"].string.isRequired
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("svg", {
       width: "48",
@@ -6694,9 +6823,6 @@ class Exp2 extends React__namespace.Component {
     })));
   }
 }
-_defineProperty(Exp2, "propTypes", {
-  color: PropTypes__default["default"].string.isRequired
-});
 
 /**
  * A component that renders the RIGHT iconograpy in SVG.
@@ -6711,7 +6837,15 @@ const Right = () => {
   }));
 };
 
+/**
+ * An autogenerated component that renders the CDOT iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Cdot extends React__namespace.Component {
+  static propTypes = {
+    color: PropTypes__default["default"].string.isRequired
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("svg", {
       width: "48",
@@ -6736,11 +6870,16 @@ class Cdot extends React__namespace.Component {
     }))));
   }
 }
-_defineProperty(Cdot, "propTypes", {
-  color: PropTypes__default["default"].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__namespace.Component {
+  static propTypes = {
+    color: PropTypes__default["default"].string.isRequired
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("svg", {
       width: "48",
@@ -6758,11 +6897,16 @@ class LogN extends React__namespace.Component {
     })));
   }
 }
-_defineProperty(LogN, "propTypes", {
-  color: PropTypes__default["default"].string.isRequired
-});
 
+/**
+ * An autogenerated component that renders the LEQ iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Leq extends React__namespace.Component {
+  static propTypes = {
+    color: PropTypes__default["default"].string.isRequired
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("svg", {
       width: "48",
@@ -6786,11 +6930,16 @@ class Leq extends React__namespace.Component {
     })));
   }
 }
-_defineProperty(Leq, "propTypes", {
-  color: PropTypes__default["default"].string.isRequired
-});
 
+/**
+ * An autogenerated component that renders the MINUS iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Minus extends React__namespace.Component {
+  static propTypes = {
+    color: PropTypes__default["default"].string.isRequired
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("svg", {
       width: "48",
@@ -6811,11 +6960,16 @@ class Minus extends React__namespace.Component {
     })));
   }
 }
-_defineProperty(Minus, "propTypes", {
-  color: PropTypes__default["default"].string.isRequired
-});
 
+/**
+ * An autogenerated component that renders the RADICAL iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class Radical extends React__namespace.Component {
+  static propTypes = {
+    color: PropTypes__default["default"].string.isRequired
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("svg", {
       width: "48",
@@ -6839,11 +6993,16 @@ class Radical extends React__namespace.Component {
     })));
   }
 }
-_defineProperty(Radical, "propTypes", {
-  color: PropTypes__default["default"].string.isRequired
-});
 
+/**
+ * An autogenerated component that renders the FRAC iconograpy in SVG.
+ *
+ * Generated with: https://gist.github.com/crm416/3c7abc88e520eaed72347af240b32590.
+ */
 class FracInclusive extends React__namespace.Component {
+  static propTypes = {
+    color: PropTypes__default["default"].string.isRequired
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("svg", {
       width: "48",
@@ -6876,9 +7035,6 @@ class FracInclusive extends React__namespace.Component {
     }))));
   }
 }
-_defineProperty(FracInclusive, "propTypes", {
-  color: PropTypes__default["default"].string.isRequired
-});
 
 /**
  * An autogenerated component that renders the JUMP_OUT_PARENTHESES iconograpy in SVG.
@@ -7262,7 +7418,7 @@ class MultiSymbolGrid extends React__namespace.Component {
     // some styles coercion and doesn't seem worthwhile right now.
     icons.forEach(icon => {
       if (icon.type !== IconType.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) {
@@ -7323,7 +7479,7 @@ class MultiSymbolGrid extends React__namespace.Component {
         }))));
       }
     }
-    throw new Error("Invalid number of icons: ".concat(icons.length));
+    throw new Error(`Invalid number of icons: ${icons.length}`);
   }
 }
 const verticalInsetPx = 2;
@@ -7367,72 +7523,13 @@ const styles$7 = aphrodite.StyleSheet.create({
 
 // eslint-disable-next-line react/no-unsafe
 class KeypadButton extends React__namespace.PureComponent {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "buttonSizeStyle", void 0);
-    _defineProperty(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
-      // the "initial" styles that `View` will include, as these styles are
-      // applied to `View` components and Aphrodite will consolidate the style
-      // object. This method must be called whenever a property that
-      // influences the possible outcomes of `this._getFocusStyle` and
-      // `this._getButtonStyle` changes (such as `this.buttonSizeStyle`).
-      for (const type of KeyTypes) {
-        aphrodite.css(View.styles.initial, ...this._getFocusStyle(type));
-        for (const borders of Object.values(BorderStyles)) {
-          aphrodite.css(View.styles.initial, ...this._getButtonStyle(type, borders));
-        }
-      }
-    });
-    _defineProperty(this, "_getFocusStyle", type => {
-      let focusBackgroundStyle;
-      if (type === "INPUT_NAVIGATION" || type === "KEYPAD_NAVIGATION") {
-        focusBackgroundStyle = styles$6.light;
-      } else {
-        focusBackgroundStyle = styles$6.bright;
-      }
-      return [styles$6.focusBox, focusBackgroundStyle];
-    });
-    _defineProperty(this, "_getButtonStyle", (type, borders, style) => {
-      // Select the appropriate style for the button.
-      let backgroundStyle;
-      switch (type) {
-        case "EMPTY":
-          backgroundStyle = styles$6.empty;
-          break;
-        case "MANY":
-        case "VALUE":
-          backgroundStyle = styles$6.value;
-          break;
-        case "OPERATOR":
-          backgroundStyle = styles$6.operator;
-          break;
-        case "INPUT_NAVIGATION":
-        case "KEYPAD_NAVIGATION":
-          backgroundStyle = styles$6.control;
-          break;
-        case "ECHO":
-          backgroundStyle = null;
-          break;
-      }
-      const borderStyle = [];
-      if (borders.includes(BorderDirection.LEFT)) {
-        // @ts-expect-error TS2345
-        borderStyle.push(styles$6.leftBorder);
-      }
-      if (borders.includes(BorderDirection.BOTTOM)) {
-        // @ts-expect-error TS2345
-        borderStyle.push(styles$6.bottomBorder);
-      }
-      return [styles$6.buttonBase, backgroundStyle, ...borderStyle, type === "ECHO" && styles$6.echo, this.buttonSizeStyle,
-      // React Native allows you to set the 'style' props on user defined
-      // components.
-      //   See: https://facebook.github.io/react-native/docs/style.html
-      ...(Array.isArray(style) ? style : [style])];
-    });
-  }
+  static defaultProps = {
+    borders: BorderStyles.ALL,
+    childKeys: [],
+    disabled: false,
+    focused: false,
+    popoverEnabled: false
+  };
   UNSAFE_componentWillMount() {
     this.buttonSizeStyle = styleForButtonDimensions(this.props.heightPx, this.props.widthPx);
   }
@@ -7449,6 +7546,68 @@ class KeypadButton extends React__namespace.PureComponent {
       this._preInjectStyles();
     }
   }
+  _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
+    // the "initial" styles that `View` will include, as these styles are
+    // applied to `View` components and Aphrodite will consolidate the style
+    // object. This method must be called whenever a property that
+    // influences the possible outcomes of `this._getFocusStyle` and
+    // `this._getButtonStyle` changes (such as `this.buttonSizeStyle`).
+    for (const type of KeyTypes) {
+      aphrodite.css(View.styles.initial, ...this._getFocusStyle(type));
+      for (const borders of Object.values(BorderStyles)) {
+        aphrodite.css(View.styles.initial, ...this._getButtonStyle(type, borders));
+      }
+    }
+  };
+  _getFocusStyle = type => {
+    let focusBackgroundStyle;
+    if (type === "INPUT_NAVIGATION" || type === "KEYPAD_NAVIGATION") {
+      focusBackgroundStyle = styles$6.light;
+    } else {
+      focusBackgroundStyle = styles$6.bright;
+    }
+    return [styles$6.focusBox, focusBackgroundStyle];
+  };
+  _getButtonStyle = (type, borders, style) => {
+    // Select the appropriate style for the button.
+    let backgroundStyle;
+    switch (type) {
+      case "EMPTY":
+        backgroundStyle = styles$6.empty;
+        break;
+      case "MANY":
+      case "VALUE":
+        backgroundStyle = styles$6.value;
+        break;
+      case "OPERATOR":
+        backgroundStyle = styles$6.operator;
+        break;
+      case "INPUT_NAVIGATION":
+      case "KEYPAD_NAVIGATION":
+        backgroundStyle = styles$6.control;
+        break;
+      case "ECHO":
+        backgroundStyle = null;
+        break;
+    }
+    const borderStyle = [];
+    if (borders.includes(BorderDirection.LEFT)) {
+      // @ts-expect-error TS2345
+      borderStyle.push(styles$6.leftBorder);
+    }
+    if (borders.includes(BorderDirection.BOTTOM)) {
+      // @ts-expect-error TS2345
+      borderStyle.push(styles$6.bottomBorder);
+    }
+    return [styles$6.buttonBase, backgroundStyle, ...borderStyle, type === "ECHO" && styles$6.echo, this.buttonSizeStyle,
+    // React Native allows you to set the 'style' props on user defined
+    // components.
+    //   See: https://facebook.github.io/react-native/docs/style.html
+    ...(Array.isArray(style) ? style : [style])];
+  };
   render() {
     const {
       ariaLabel,
@@ -7522,13 +7681,6 @@ class KeypadButton extends React__namespace.PureComponent {
     }
   }
 }
-_defineProperty(KeypadButton, "defaultProps", {
-  borders: BorderStyles.ALL,
-  childKeys: [],
-  disabled: false,
-  focused: false,
-  popoverEnabled: false
-});
 const focusInsetPx = 4;
 const focusBoxZIndex = 0;
 const styles$6 = aphrodite.StyleSheet.create({
@@ -7706,7 +7858,6 @@ const extractProps = keyConfig => {
   };
 };
 const mapStateToProps$5 = (state, ownProps) => {
-  var _gestures$popover;
   const {
     gestures
   } = state;
@@ -7731,7 +7882,7 @@ const mapStateToProps$5 = (state, ownProps) => {
     id: id,
     // Add in some gesture state.
     focused: gestures.focus === id,
-    popoverEnabled: ((_gestures$popover = gestures.popover) === null || _gestures$popover === void 0 ? void 0 : _gestures$popover.parentId) === id,
+    popoverEnabled: gestures.popover?.parentId === id,
     // Pass down the child keys and any extracted props.
     childKeys,
     ...extractProps(useFirstChildProps ? childKeys[0] : keyConfig)
@@ -7749,6 +7900,9 @@ var TouchableKeypadButton$1 = reactRedux.connect(mapStateToProps$5, null, null,
 })(TouchableKeypadButton);
 
 class ManyKeypadButton extends React__namespace.Component {
+  static defaultProps = {
+    keys: []
+  };
   render() {
     const {
       keys,
@@ -7782,9 +7936,6 @@ class ManyKeypadButton extends React__namespace.Component {
     }
   }
 }
-_defineProperty(ManyKeypadButton, "defaultProps", {
-  keys: []
-});
 
 /**
  * This file contains all of the z-index values used throughout the math-input
@@ -7837,35 +7988,32 @@ class Echo extends React__namespace.Component {
   }
 }
 class EchoManager extends React__namespace.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "_animationConfigForType", animationType => {
-      // NOTE(charlie): These must be kept in sync with the transition
-      // durations and classnames specified in echo.css.
-      let animationDurationMs;
-      let animationTransitionName;
-      switch (animationType) {
-        case EchoAnimationType.SLIDE_AND_FADE:
-          animationDurationMs = 400;
-          animationTransitionName = "echo-slide-and-fade";
-          break;
-        case EchoAnimationType.FADE_ONLY:
-          animationDurationMs = 300;
-          animationTransitionName = "echo-fade-only";
-          break;
-        case EchoAnimationType.LONG_FADE_ONLY:
-          animationDurationMs = 400;
-          animationTransitionName = "echo-long-fade-only";
-          break;
-        default:
-          throw new Error("Invalid echo animation type: ".concat(animationType));
-      }
-      return {
-        animationDurationMs,
-        animationTransitionName
-      };
-    });
-  }
+  _animationConfigForType = animationType => {
+    // NOTE(charlie): These must be kept in sync with the transition
+    // durations and classnames specified in echo.css.
+    let animationDurationMs;
+    let animationTransitionName;
+    switch (animationType) {
+      case EchoAnimationType.SLIDE_AND_FADE:
+        animationDurationMs = 400;
+        animationTransitionName = "echo-slide-and-fade";
+        break;
+      case EchoAnimationType.FADE_ONLY:
+        animationDurationMs = 300;
+        animationTransitionName = "echo-fade-only";
+        break;
+      case EchoAnimationType.LONG_FADE_ONLY:
+        animationDurationMs = 400;
+        animationTransitionName = "echo-long-fade-only";
+        break;
+      default:
+        throw new Error(`Invalid echo animation type: ${animationType}`);
+    }
+    return {
+      animationDurationMs,
+      animationTransitionName
+    };
+  };
   render() {
     const {
       echoes,
@@ -7903,7 +8051,7 @@ class EchoManager extends React__namespace.Component {
           key: animationId
         }, /*#__PURE__*/React__namespace.createElement(Echo, _extends({
           animationDurationMs: animationDurationMs,
-          onAnimationFinish: () => onAnimationFinish === null || onAnimationFinish === void 0 ? void 0 : onAnimationFinish(animationId)
+          onAnimationFinish: () => onAnimationFinish?.(animationId)
         }, echo)));
       }));
     }));
@@ -7998,7 +8146,6 @@ class PopoverManager extends React__namespace.Component {
 // naming convention: verb + noun
 // the noun should be one of the other properties in the object that's
 // being dispatched
-
 const dismissKeypad = () => {
   return {
     type: "DismissKeypad"
@@ -8068,43 +8215,12 @@ const pressKey = (key, initialBounds, inPopover) => {
   };
 };
 
+/**
+ * A keypad component that acts as a container for rows or columns of buttons,
+ * and manages the rendering of echo animations on top of those buttons.
+ */
 // eslint-disable-next-line react/no-unsafe
 class Keypad extends React__namespace.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "_isMounted", void 0);
-    _defineProperty(this, "_resizeTimeout", void 0);
-    _defineProperty(this, "_container", void 0);
-    _defineProperty(this, "_computeContainer", () => {
-      const domNode = ReactDOM__default["default"].findDOMNode(this);
-      this._container = domNode.getBoundingClientRect();
-    });
-    _defineProperty(this, "_updateSizeAndPosition", () => {
-      // Mark the container for recalculation next time the keypad is
-      // opened.
-      // TODO(charlie): Since we're not recalculating the container
-      // immediately, if you were to resize the page while a popover were
-      // active, you'd likely get unexpected behavior. This seems very
-      // difficult to do and, as such, incredibly unlikely, but we may
-      // want to reconsider the caching here.
-      this._container = null;
-    });
-    _defineProperty(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.
-
-      // Throttle resize events -- taken from:
-      //    https://developer.mozilla.org/en-US/docs/Web/Events/resize
-      if (this._resizeTimeout == null) {
-        this._resizeTimeout = window.setTimeout(() => {
-          this._resizeTimeout = null;
-          if (this._isMounted) {
-            this._updateSizeAndPosition();
-          }
-        }, 66);
-      }
-    });
-  }
   componentDidMount() {
     this._isMounted = true;
     window.addEventListener("resize", this._onResize);
@@ -8119,6 +8235,35 @@ class Keypad extends React__namespace.Component {
     this._isMounted = false;
     window.removeEventListener("resize", this._onResize);
   }
+  _computeContainer = () => {
+    const domNode = ReactDOM__default["default"].findDOMNode(this);
+    this._container = domNode.getBoundingClientRect();
+  };
+  _updateSizeAndPosition = () => {
+    // Mark the container for recalculation next time the keypad is
+    // opened.
+    // TODO(charlie): Since we're not recalculating the container
+    // immediately, if you were to resize the page while a popover were
+    // active, you'd likely get unexpected behavior. This seems very
+    // difficult to do and, as such, incredibly unlikely, but we may
+    // want to reconsider the caching here.
+    this._container = null;
+  };
+  _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.
+
+    // Throttle resize events -- taken from:
+    //    https://developer.mozilla.org/en-US/docs/Web/Events/resize
+    if (this._resizeTimeout == null) {
+      this._resizeTimeout = window.setTimeout(() => {
+        this._resizeTimeout = null;
+        if (this._isMounted) {
+          this._updateSizeAndPosition();
+        }
+      }, 66);
+    }
+  };
   render() {
     const {
       children,
@@ -8196,18 +8341,18 @@ var Keypad$1 = reactRedux.connect(mapStateToProps$4, mapDispatchToProps$1, null,
   forwardRef: true
 })(Keypad);
 
+/**
+ * A keypad with two pages of keys.
+ */
 const {
   column: column$2,
   row: row$4,
   fullWidth: fullWidth$2
 } = Styles;
 class TwoPageKeypad extends React__namespace.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      selectedPage: "Numbers"
-    });
-  }
+  state = {
+    selectedPage: "Numbers"
+  };
   render() {
     const {
       leftPage,
@@ -8252,16 +8397,16 @@ const styles$3 = aphrodite.StyleSheet.create({
     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"
   },
   tabbar: {
     background: Color__default["default"].offWhite,
-    borderTop: "1px solid ".concat(Color__default["default"].offBlack50),
-    borderBottom: "1px solid ".concat(Color__default["default"].offBlack50)
+    borderTop: `1px solid ${Color__default["default"].offBlack50}`,
+    borderBottom: `1px solid ${Color__default["default"].offBlack50}`
   }
 });
 const mapStateToProps$3 = state => {
@@ -8497,9 +8642,8 @@ const styles$2 = aphrodite.StyleSheet.create({
   }
 });
 const mapStateToProps$2 = state => {
-  var _state$input$cursor;
   return {
-    cursorContext: (_state$input$cursor = state.input.cursor) === null || _state$input$cursor === void 0 ? void 0 : _state$input$cursor.context,
+    cursorContext: state.input.cursor?.context,
     dynamicJumpOut: !state.layout.navigationPadEnabled
   };
 };
@@ -8630,9 +8774,8 @@ class FractionKeypad extends React__namespace.Component {
   }
 }
 const mapStateToProps$1 = state => {
-  var _state$input$cursor;
   return {
-    cursorContext: (_state$input$cursor = state.input.cursor) === null || _state$input$cursor === void 0 ? void 0 : _state$input$cursor.context,
+    cursorContext: state.input.cursor?.context,
     dynamicJumpOut: !state.layout.navigationPadEnabled
   };
 };
@@ -8749,71 +8892,12 @@ const {
 } = Styles;
 // eslint-disable-next-line react/no-unsafe
 class KeypadContainer extends React__namespace.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "_containerRef", /*#__PURE__*/React__namespace.createRef());
-    _defineProperty(this, "_containerResizeObserver", null);
-    _defineProperty(this, "_resizeTimeout", void 0);
-    _defineProperty(this, "hasMounted", void 0);
-    _defineProperty(this, "state", {
-      hasBeenActivated: false,
-      viewportWidth: "100vw"
-    });
-    _defineProperty(this, "_throttleResizeHandler", () => {
-      // Throttle the resize callbacks.
-      // https://developer.mozilla.org/en-US/docs/Web/Events/resize
-      if (this._resizeTimeout == null) {
-        this._resizeTimeout = window.setTimeout(() => {
-          this._resizeTimeout = null;
-          this._onResize();
-        }, 66);
-      }
-    });
-    _defineProperty(this, "_onResize", () => {
-      var _this$_containerRef$c, _this$_containerRef$c2, _this$props$onPageSiz, _this$props;
-      // 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
-      });
-      const containerWidth = ((_this$_containerRef$c = this._containerRef.current) === null || _this$_containerRef$c === void 0 ? void 0 : _this$_containerRef$c.clientWidth) || 0;
-      const containerHeight = ((_this$_containerRef$c2 = this._containerRef.current) === null || _this$_containerRef$c2 === void 0 ? void 0 : _this$_containerRef$c2.clientHeight) || 0;
-      (_this$props$onPageSiz = (_this$props = this.props).onPageSizeChange) === null || _this$props$onPageSiz === void 0 ? void 0 : _this$props$onPageSiz.call(_this$props, window.innerWidth, window.innerHeight, containerWidth, containerHeight);
-    });
-    _defineProperty(this, "renderKeypad", () => {
-      const {
-        extraKeys,
-        keypadType,
-        layoutMode,
-        navigationPadEnabled
-      } = this.props;
-      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
-        // crop themselves. At least we're colocating all the layout
-        // information in this component, though.
-        roundTopLeft: layoutMode === LayoutMode.COMPACT && !navigationPadEnabled,
-        roundTopRight: layoutMode === LayoutMode.COMPACT
-      };
-
-      // Select the appropriate keyboard given the type.
-      // TODO(charlie): In the future, we might want to move towards a
-      // data-driven approach to defining keyboard layouts, and have a
-      // generic keyboard that takes some "keyboard data" and renders it.
-      // However, the keyboards differ pretty heavily right now and it's not
-      // clear what that format would look like exactly. Plus, there aren't
-      // very many of them. So to keep us moving, we'll just hardcode.
-      switch (keypadType) {
-        case KeypadType.FRACTION:
-          return /*#__PURE__*/React__namespace.createElement(FractionKeypad$1, keypadProps);
-        case KeypadType.EXPRESSION:
-          return /*#__PURE__*/React__namespace.createElement(ExpressionKeypad$1, keypadProps);
-        default:
-          throw new Error("Invalid keypad type: " + keypadType);
-      }
-    });
-  }
+  _containerRef = /*#__PURE__*/React__namespace.createRef();
+  _containerResizeObserver = null;
+  state = {
+    hasBeenActivated: false,
+    viewportWidth: "100vw"
+  };
   UNSAFE_componentWillMount() {
     if (this.props.active) {
       this.setState({
@@ -8851,11 +8935,63 @@ class KeypadContainer extends React__namespace.Component {
     }
   }
   componentWillUnmount() {
-    var _this$_containerResiz;
     window.removeEventListener("resize", this._throttleResizeHandler);
     window.removeEventListener("orientationchange", this._throttleResizeHandler);
-    (_this$_containerResiz = this._containerResizeObserver) === null || _this$_containerResiz === void 0 ? void 0 : _this$_containerResiz.disconnect();
-  }
+    this._containerResizeObserver?.disconnect();
+  }
+  _throttleResizeHandler = () => {
+    // Throttle the resize callbacks.
+    // https://developer.mozilla.org/en-US/docs/Web/Events/resize
+    if (this._resizeTimeout == null) {
+      this._resizeTimeout = window.setTimeout(() => {
+        this._resizeTimeout = null;
+        this._onResize();
+      }, 66);
+    }
+  };
+  _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
+    });
+    const containerWidth = this._containerRef.current?.clientWidth || 0;
+    const containerHeight = this._containerRef.current?.clientHeight || 0;
+    this.props.onPageSizeChange?.(window.innerWidth, window.innerHeight, containerWidth, containerHeight);
+  };
+  renderKeypad = () => {
+    const {
+      extraKeys,
+      keypadType,
+      layoutMode,
+      navigationPadEnabled
+    } = this.props;
+    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
+      // crop themselves. At least we're colocating all the layout
+      // information in this component, though.
+      roundTopLeft: layoutMode === LayoutMode.COMPACT && !navigationPadEnabled,
+      roundTopRight: layoutMode === LayoutMode.COMPACT
+    };
+
+    // Select the appropriate keyboard given the type.
+    // TODO(charlie): In the future, we might want to move towards a
+    // data-driven approach to defining keyboard layouts, and have a
+    // generic keyboard that takes some "keyboard data" and renders it.
+    // However, the keyboards differ pretty heavily right now and it's not
+    // clear what that format would look like exactly. Plus, there aren't
+    // very many of them. So to keep us moving, we'll just hardcode.
+    switch (keypadType) {
+      case KeypadType.FRACTION:
+        return /*#__PURE__*/React__namespace.createElement(FractionKeypad$1, keypadProps);
+      case KeypadType.EXPRESSION:
+        return /*#__PURE__*/React__namespace.createElement(ExpressionKeypad$1, keypadProps);
+      default:
+        throw new Error("Invalid keypad type: " + keypadType);
+    }
+  };
   render() {
     const {
       active,
@@ -8915,7 +9051,7 @@ const styles = aphrodite.StyleSheet.create({
     left: 0,
     right: 0,
     position: "fixed",
-    transition: "".concat(keypadAnimationDurationMs, "ms ease-out"),
+    transition: `${keypadAnimationDurationMs}ms ease-out`,
     transitionProperty: "transform",
     zIndex: keypad
   },
@@ -8936,7 +9072,7 @@ const styles = aphrodite.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
@@ -8991,10 +9127,7 @@ var KeypadContainer$1 = reactRedux.connect(mapStateToProps, mapDispatchToProps,
  * It is entirely ignorant of the existence of popovers and the positions of
  * DOM nodes, operating solely on IDs. The state machine does accommodate for
  * multi-touch interactions, tracking gesture state on a per-touch basis.
- */
-
-// exported for tests
-
+ */ // exported for tests
 const defaultOptions = {
   longPressWaitTimeMs: 50,
   swipeThresholdPx: 20,
@@ -9002,12 +9135,6 @@ const defaultOptions = {
 };
 class GestureStateMachine {
   constructor(handlers, options, swipeDisabledNodeIds, multiPressableKeys) {
-    _defineProperty(this, "handlers", void 0);
-    _defineProperty(this, "options", void 0);
-    _defineProperty(this, "swipeDisabledNodeIds", void 0);
-    _defineProperty(this, "multiPressableKeys", void 0);
-    _defineProperty(this, "touchState", void 0);
-    _defineProperty(this, "swipeState", void 0);
     this.handlers = handlers;
     this.options = {
       ...defaultOptions,
@@ -9179,8 +9306,7 @@ class GestureStateMachine {
       // Only respect the finger that started a swipe. Any other lingering
       // gestures are ignored.
       if (this.swipeState.touchId === touchId) {
-        var _this$handlers$onSwip, _this$handlers;
-        (_this$handlers$onSwip = (_this$handlers = this.handlers).onSwipeChange) === null || _this$handlers$onSwip === void 0 ? void 0 : _this$handlers$onSwip.call(_this$handlers, pageX - this.swipeState.startX);
+        this.handlers.onSwipeChange?.(pageX - this.swipeState.startX);
       }
     } else if (this.touchState[touchId]) {
       // It could be touch events started outside the keypad and
@@ -9193,7 +9319,6 @@ class GestureStateMachine {
       const dx = pageX - startX;
       const shouldBeginSwiping = swipeEnabled && !swipeLocked && Math.abs(dx) > this.options.swipeThresholdPx;
       if (shouldBeginSwiping) {
-        var _this$handlers$onSwip2, _this$handlers2;
         this._onSwipeStart();
 
         // Trigger the swipe.
@@ -9201,7 +9326,7 @@ class GestureStateMachine {
           touchId,
           startX
         };
-        (_this$handlers$onSwip2 = (_this$handlers2 = this.handlers).onSwipeChange) === null || _this$handlers$onSwip2 === void 0 ? void 0 : _this$handlers$onSwip2.call(_this$handlers2, pageX - this.swipeState.startX);
+        this.handlers.onSwipeChange?.(pageX - this.swipeState.startX);
       } else {
         const id = getId();
         if (id !== activeNodeId) {
@@ -9224,8 +9349,7 @@ class GestureStateMachine {
       // Only respect the finger that started a swipe. Any other lingering
       // gestures are ignored.
       if (this.swipeState.touchId === touchId) {
-        var _this$handlers$onSwip3, _this$handlers3;
-        (_this$handlers$onSwip3 = (_this$handlers3 = this.handlers).onSwipeEnd) === null || _this$handlers$onSwip3 === void 0 ? void 0 : _this$handlers$onSwip3.call(_this$handlers3, pageX - this.swipeState.startX);
+        this.handlers.onSwipeEnd?.(pageX - this.swipeState.startX);
         this.swipeState = null;
       }
     } else if (this.touchState[touchId]) {
@@ -9259,8 +9383,7 @@ class GestureStateMachine {
     // displacement.
     if (this.swipeState) {
       if (this.swipeState.touchId === touchId) {
-        var _this$handlers$onSwip4, _this$handlers4;
-        (_this$handlers$onSwip4 = (_this$handlers4 = this.handlers).onSwipeEnd) === null || _this$handlers$onSwip4 === void 0 ? void 0 : _this$handlers$onSwip4.call(_this$handlers4, 0);
+        this.handlers.onSwipeEnd?.(0);
         this.swipeState = null;
       }
     } else if (this.touchState[touchId]) {
@@ -9283,9 +9406,6 @@ class GestureStateMachine {
 
 class NodeManager {
   constructor() {
-    _defineProperty(this, "_nodesById", void 0);
-    _defineProperty(this, "_orderedIds", void 0);
-    _defineProperty(this, "_cachedBoundingBoxesById", void 0);
     // A mapping from IDs to DOM nodes.
     this._nodesById = {};
 
@@ -9398,9 +9518,6 @@ class NodeManager {
 
 class PopoverStateMachine {
   constructor(handlers) {
-    _defineProperty(this, "handlers", void 0);
-    _defineProperty(this, "popovers", void 0);
-    _defineProperty(this, "activePopover", void 0);
     this.handlers = handlers;
     this.activePopover = null;
     this.popovers = {};
@@ -9560,16 +9677,16 @@ class PopoverStateMachine {
   }
 }
 
+/**
+ * A high-level manager for our gesture system. In particular, this class
+ * connects our various bits of logic for managing gestures and interactions,
+ * and links them together.
+ */
 const coordsForEvent = evt => {
   return [evt.changedTouches[0].clientX, evt.changedTouches[0].clientY];
 };
 class GestureManager {
   constructor(options, handlers, disabledSwipeKeys, multiPressableKeys) {
-    _defineProperty(this, "swipeEnabled", void 0);
-    _defineProperty(this, "trackEvents", void 0);
-    _defineProperty(this, "nodeManager", void 0);
-    _defineProperty(this, "popoverStateMachine", void 0);
-    _defineProperty(this, "gestureStateMachine", void 0);
     const {
       swipeEnabled
     } = options;
@@ -9810,13 +9927,12 @@ const inputReducer = function () {
     case "PressKey":
       const keyConfig = KeyConfigs[action.key];
       if (keyConfig.type !== "KEYPAD_NAVIGATION") {
-        var _state$keyHandler;
         // This is probably an anti-pattern but it works for the
         // case where we don't actually control the state but we
         // still want to communicate with the other object
         return {
           ...state,
-          cursor: (_state$keyHandler = state.keyHandler) === null || _state$keyHandler === void 0 ? void 0 : _state$keyHandler.call(state, keyConfig.id)
+          cursor: state.keyHandler?.(keyConfig.id)
         };
       }
 
@@ -10185,66 +10301,6 @@ const createStore = () => {
 class ProvidedKeypad extends React__namespace.Component {
   constructor(props) {
     super(props);
-    _defineProperty(this, "store", void 0);
-    _defineProperty(this, "activate", () => {
-      this.props.setKeypadActive(true);
-    });
-    _defineProperty(this, "dismiss", () => {
-      this.props.setKeypadActive(false);
-    });
-    _defineProperty(this, "configure", (configuration, cb) => {
-      this.store.dispatch(configureKeypad(configuration));
-
-      // HACK(charlie): In Perseus, triggering a focus causes the keypad to
-      // animate into view and re-configure. We'd like to provide the option
-      // to re-render the re-configured keypad before animating it into view,
-      // to avoid jank in the animation. As such, we support passing a
-      // callback into `configureKeypad`. However, implementing this properly
-      // would require middleware, etc., so we just hack it on with
-      // `setTimeout` for now.
-      setTimeout(() => cb && cb());
-    });
-    _defineProperty(this, "setCursor", cursor => {
-      this.store.dispatch(setCursor(cursor));
-    });
-    _defineProperty(this, "setKeyHandler", keyHandler => {
-      this.store.dispatch(setKeyHandler(keyHandler));
-    });
-    _defineProperty(this, "getDOMNode", () => {
-      return ReactDOM__default["default"].findDOMNode(this);
-    });
-    _defineProperty(this, "onElementMounted", element => {
-      var _this$props$onElement, _this$props;
-      this.props.onAnalyticsEvent({
-        type: "math-input:keypad-opened",
-        payload: {
-          virtualKeypadVersion: "MATH_INPUT_KEYPAD_V1"
-        }
-      });
-
-      // Append the dispatch methods that we want to expose
-      // externally to the returned React element.
-      const elementWithDispatchMethods = {
-        ...element,
-        activate: this.activate,
-        dismiss: this.dismiss,
-        configure: this.configure,
-        setCursor: this.setCursor,
-        setKeyHandler: this.setKeyHandler,
-        getDOMNode: this.getDOMNode
-      };
-      (_this$props$onElement = (_this$props = this.props).onElementMounted) === null || _this$props$onElement === void 0 ? void 0 : _this$props$onElement.call(_this$props, elementWithDispatchMethods);
-    });
-    _defineProperty(this, "onDismiss", () => {
-      var _this$props$onDismiss, _this$props2;
-      this.props.onAnalyticsEvent({
-        type: "math-input:keypad-closed",
-        payload: {
-          virtualKeypadVersion: "MATH_INPUT_KEYPAD_V1"
-        }
-      });
-      (_this$props$onDismiss = (_this$props2 = this.props).onDismiss) === null || _this$props$onDismiss === void 0 ? void 0 : _this$props$onDismiss.call(_this$props2);
-    });
     this.store = createStore();
   }
   componentDidUpdate(prevProps) {
@@ -10255,6 +10311,63 @@ class ProvidedKeypad extends React__namespace.Component {
       this.store.dispatch(dismissKeypad());
     }
   }
+  activate = () => {
+    this.props.setKeypadActive(true);
+  };
+  dismiss = () => {
+    this.props.setKeypadActive(false);
+  };
+  configure = (configuration, cb) => {
+    this.store.dispatch(configureKeypad(configuration));
+
+    // HACK(charlie): In Perseus, triggering a focus causes the keypad to
+    // animate into view and re-configure. We'd like to provide the option
+    // to re-render the re-configured keypad before animating it into view,
+    // to avoid jank in the animation. As such, we support passing a
+    // callback into `configureKeypad`. However, implementing this properly
+    // would require middleware, etc., so we just hack it on with
+    // `setTimeout` for now.
+    setTimeout(() => cb && cb());
+  };
+  setCursor = cursor => {
+    this.store.dispatch(setCursor(cursor));
+  };
+  setKeyHandler = keyHandler => {
+    this.store.dispatch(setKeyHandler(keyHandler));
+  };
+  getDOMNode = () => {
+    return ReactDOM__default["default"].findDOMNode(this);
+  };
+  onElementMounted = element => {
+    this.props.onAnalyticsEvent({
+      type: "math-input:keypad-opened",
+      payload: {
+        virtualKeypadVersion: "MATH_INPUT_KEYPAD_V1"
+      }
+    });
+
+    // Append the dispatch methods that we want to expose
+    // externally to the returned React element.
+    const elementWithDispatchMethods = {
+      ...element,
+      activate: this.activate,
+      dismiss: this.dismiss,
+      configure: this.configure,
+      setCursor: this.setCursor,
+      setKeyHandler: this.setKeyHandler,
+      getDOMNode: this.getDOMNode
+    };
+    this.props.onElementMounted?.(elementWithDispatchMethods);
+  };
+  onDismiss = () => {
+    this.props.onAnalyticsEvent({
+      type: "math-input:keypad-closed",
+      payload: {
+        virtualKeypadVersion: "MATH_INPUT_KEYPAD_V1"
+      }
+    });
+    this.props.onDismiss?.();
+  };
   render() {
     const {
       style