@khanacademy/math-input 14.2.2 → 15.0.1

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.2";
+const libVersion = "15.0.1";
 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]);
@@ -885,70 +857,10 @@ function handleBackspace(mathField) {
   }
 }
 
-/**
- * Constants that are shared between multiple files.
- */
-
-let KeypadType = /*#__PURE__*/function (KeypadType) {
-  KeypadType["FRACTION"] = "FRACTION";
-  KeypadType["EXPRESSION"] = "EXPRESSION";
-  return KeypadType;
-}({});
-const KeyTypes = ["EMPTY",
-// For numerals, variables, and any other characters that themselves
-// compose 'values'.
-"VALUE",
-// For buttons that insert or adjust math in an input.
-"OPERATOR",
-// For buttons that move the cursor in an input (including via
-// deletion).
-"INPUT_NAVIGATION",
-// For buttons that modify the broader keypad state (e.g., by changing
-// the visible pane).
-"KEYPAD_NAVIGATION",
-// For buttons that house multiple buttons and have no action
-// themselves.
-"MANY",
-// For the echo animation that appears on press.
-"ECHO"];
-let DeviceOrientation = /*#__PURE__*/function (DeviceOrientation) {
-  DeviceOrientation["LANDSCAPE"] = "LANDSCAPE";
-  DeviceOrientation["PORTRAIT"] = "PORTRAIT";
-  return DeviceOrientation;
-}({});
-let LayoutMode = /*#__PURE__*/function (LayoutMode) {
-  LayoutMode["FULLSCREEN"] = "FULLSCREEN";
-  LayoutMode["COMPACT"] = "COMPACT";
-  return LayoutMode;
-}({});
-let BorderDirection = /*#__PURE__*/function (BorderDirection) {
-  BorderDirection["LEFT"] = "LEFT";
-  BorderDirection["BOTTOM"] = "BOTTOM";
-  return BorderDirection;
-}({});
-const BorderStyles = {
-  LEFT: [BorderDirection.LEFT],
-  BOTTOM: [BorderDirection.BOTTOM],
-  ALL: [BorderDirection.LEFT, BorderDirection.BOTTOM],
-  NONE: []
+const DecimalSeparator = {
+  COMMA: ",",
+  PERIOD: "."
 };
-let IconType = /*#__PURE__*/function (IconType) {
-  IconType["MATH"] = "MATH";
-  IconType["SVG"] = "SVG";
-  IconType["TEXT"] = "TEXT";
-  return IconType;
-}({});
-let DecimalSeparator = /*#__PURE__*/function (DecimalSeparator) {
-  DecimalSeparator["COMMA"] = "COMMA";
-  DecimalSeparator["PERIOD"] = "PERIOD";
-  return DecimalSeparator;
-}({});
-let EchoAnimationType = /*#__PURE__*/function (EchoAnimationType) {
-  EchoAnimationType["SLIDE_AND_FADE"] = "SLIDE_AND_FADE";
-  EchoAnimationType["FADE_ONLY"] = "FADE_ONLY";
-  EchoAnimationType["LONG_FADE_ONLY"] = "LONG_FADE_ONLY";
-  return EchoAnimationType;
-}({});
 
 // NOTES(kevinb):
 // - In order to get the correct decimal separator for the current locale,
@@ -1028,7 +940,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 +954,7 @@ function handleExponent(mathField, key) {
       }
       break;
     default:
-      throw new Error("Invalid exponent key: ".concat(key));
+      throw new Error(`Invalid exponent key: ${key}`);
   }
 }
 
@@ -1124,7 +1036,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}`);
   }
 }
 
@@ -1135,7 +1047,6 @@ var ActionType = /*#__PURE__*/function (ActionType) {
   ActionType[ActionType["MQ_END"] = 0] = "MQ_END";
   return ActionType;
 }(ActionType || {});
-const decimalSymbol = decimalSeparator === DecimalSeparator.COMMA ? "," : ".";
 function buildGenericCallback(str) {
   let type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ActionType.WRITE;
   return function (mathQuill) {
@@ -1160,7 +1071,7 @@ function buildGenericCallback(str) {
 }
 function buildNormalFunctionCallback(command) {
   return function (mathField) {
-    mathField.write("\\".concat(command, "\\left(\\right)"));
+    mathField.write(`\\${command}\\left(\\right)`);
     mathField.keystroke("Left");
   };
 }
@@ -1182,7 +1093,7 @@ const keyToMathquillMap = {
   COS: buildNormalFunctionCallback("cos"),
   TAN: buildNormalFunctionCallback("tan"),
   CDOT: buildGenericCallback("\\cdot"),
-  DECIMAL: buildGenericCallback(decimalSymbol),
+  DECIMAL: buildGenericCallback(decimalSeparator),
   DIVIDE: buildGenericCallback("\\div"),
   EQUAL: buildGenericCallback("="),
   GEQ: buildGenericCallback("\\geq"),
@@ -1323,6 +1234,7 @@ const keyToMathquillMap = {
   Z: buildGenericCallback("Z")
 };
 
+// Notes about MathQuill
 const mobileKeyTranslator = {
   ...keyToMathquillMap,
   // note(Matthew): our mobile backspace logic is really complicated
@@ -1344,8 +1256,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 +1438,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";
-      }
-
-      // Operators
-      else if (key in keyMap) {
-        return keyMap[key];
-      }
+  // @ts-expect-error - TS2564 - Property '_containerBounds' has no initializer and is not definitely assigned in the constructor.
 
-      // 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, {
@@ -2106,26 +1562,539 @@ class MathInput extends React__namespace.Component {
     if (this.props.keypadElement !== props.keypadElement) {
       this._clearKeypadBoundsCache();
     }
-  }
-  componentDidUpdate(prevProps, prevState) {
-    if (this.mathField.getContent() !== this.props.value) {
-      this.mathField.setContent(this.props.value);
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (this.mathField.getContent() !== this.props.value) {
+      this.mathField.setContent(this.props.value);
+    }
+    if (prevState.focused !== this.state.focused) {
+      this._updateInputPadding();
+    }
+  }
+  componentWillUnmount() {
+    this._isMounted = false;
+    window.removeEventListener("touchstart", this.recordTouchStartOutside);
+    window.removeEventListener("touchend", this.blurOnTouchEndOutside);
+    window.removeEventListener("touchcancel", this.blurOnTouchEndOutside);
+    // @ts-expect-error - TS2769 - No overload matches this call.
+    window.removeEventListener("resize", this._clearKeypadBoundsCache());
+    window.removeEventListener("orientationchange",
+    // @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";
     }
-    if (prevState.focused !== this.state.focused) {
-      this._updateInputPadding();
+
+    // Operators
+    else if (key in keyMap) {
+      return keyMap[key];
     }
-  }
-  componentWillUnmount() {
-    this._isMounted = false;
-    window.removeEventListener("touchstart", this.recordTouchStartOutside);
-    window.removeEventListener("touchend", this.blurOnTouchEndOutside);
-    window.removeEventListener("touchcancel", this.blurOnTouchEndOutside);
-    // @ts-expect-error - TS2769 - No overload matches this call.
-    window.removeEventListener("resize", this._clearKeypadBoundsCache());
-    window.removeEventListener("orientationchange",
-    // @ts-expect-error - TS2769 - No overload matches this call.
-    this._clearKeypadBoundsCache());
-  }
+
+    // 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 +2150,6 @@ class MathInput extends React__namespace.Component {
     })));
   }
 }
-_defineProperty(MathInput, "defaultProps", {
-  style: {},
-  value: ""
-});
 const fontSizePt = 18;
 const inputMaxWidth = 128;
 
@@ -2335,12 +2300,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 +2313,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 +2325,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 +2337,7 @@ const styles$i = aphrodite.StyleSheet.create({
   },
   clickable: {
     ":focus": {
-      outline: "none"
+      outline: `none`
     }
   }
 });
@@ -2452,7 +2417,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: () => {
@@ -2465,6 +2430,66 @@ function Tabbar(props) {
   })));
 }
 
+/**
+ * Constants that are shared between multiple files.
+ */
+
+let KeypadType = /*#__PURE__*/function (KeypadType) {
+  KeypadType["FRACTION"] = "FRACTION";
+  KeypadType["EXPRESSION"] = "EXPRESSION";
+  return KeypadType;
+}({});
+const KeyTypes = ["EMPTY",
+// For numerals, variables, and any other characters that themselves
+// compose 'values'.
+"VALUE",
+// For buttons that insert or adjust math in an input.
+"OPERATOR",
+// For buttons that move the cursor in an input (including via
+// deletion).
+"INPUT_NAVIGATION",
+// For buttons that modify the broader keypad state (e.g., by changing
+// the visible pane).
+"KEYPAD_NAVIGATION",
+// For buttons that house multiple buttons and have no action
+// themselves.
+"MANY",
+// For the echo animation that appears on press.
+"ECHO"];
+let DeviceOrientation = /*#__PURE__*/function (DeviceOrientation) {
+  DeviceOrientation["LANDSCAPE"] = "LANDSCAPE";
+  DeviceOrientation["PORTRAIT"] = "PORTRAIT";
+  return DeviceOrientation;
+}({});
+let LayoutMode = /*#__PURE__*/function (LayoutMode) {
+  LayoutMode["FULLSCREEN"] = "FULLSCREEN";
+  LayoutMode["COMPACT"] = "COMPACT";
+  return LayoutMode;
+}({});
+let BorderDirection = /*#__PURE__*/function (BorderDirection) {
+  BorderDirection["LEFT"] = "LEFT";
+  BorderDirection["BOTTOM"] = "BOTTOM";
+  return BorderDirection;
+}({});
+const BorderStyles = {
+  LEFT: [BorderDirection.LEFT],
+  BOTTOM: [BorderDirection.BOTTOM],
+  ALL: [BorderDirection.LEFT, BorderDirection.BOTTOM],
+  NONE: []
+};
+let IconType = /*#__PURE__*/function (IconType) {
+  IconType["MATH"] = "MATH";
+  IconType["SVG"] = "SVG";
+  IconType["TEXT"] = "TEXT";
+  return IconType;
+}({});
+let EchoAnimationType = /*#__PURE__*/function (EchoAnimationType) {
+  EchoAnimationType["SLIDE_AND_FADE"] = "SLIDE_AND_FADE";
+  EchoAnimationType["FADE_ONLY"] = "FADE_ONLY";
+  EchoAnimationType["LONG_FADE_ONLY"] = "LONG_FADE_ONLY";
+  return EchoAnimationType;
+}({});
+
 /**
  * This file contains configuration settings for the buttons in the keypad.
  */
@@ -2565,16 +2590,7 @@ const KeyConfigs = {
       keyType: "VALUE",
       // I18N: A label for a 'decimal' sign (represented as '.' or ',').
       ariaLabel: i18n__namespace._("Decimal")
-    }),
-    icon: decimalSeparator === DecimalSeparator.COMMA ? {
-      // TODO(charlie): Get an SVG icon for the comma, or verify with
-      // design that the text-rendered version is acceptable.
-      type: IconType.TEXT,
-      data: ","
-    } : {
-      type: IconType.SVG,
-      data: "PERIOD"
-    }
+    })
   },
   PERIOD: {
     ...getDefaultOperatorFields({
@@ -3357,16 +3373,32 @@ function ButtonAsset(_ref) {
         d: "M16.735 16.8558c0 1.024.272 1.812.816 2.364.552.544 1.32.816 2.304.816.528 0 .992-.084 1.392-.252.408-.168.752-.392 1.032-.672.28-.288.492-.62.636-.996.144-.384.216-.792.216-1.224 0-.504-.08-.952-.24-1.344-.152-.4-.372-.74-.66-1.02-.28-.28-.616-.492-1.008-.636-.392-.152-.82-.228-1.284-.228-.488 0-.928.08-1.32.24-.392.16-.728.384-1.008.672-.28.28-.496.616-.648 1.008-.152.384-.228.808-.228 1.272zm4.428 5.364c.16-.2.308-.388.444-.564.136-.184.264-.368.384-.552-.416.296-.88.524-1.392.684-.512.152-1.056.228-1.632.228-.624 0-1.224-.104-1.8-.312-.576-.216-1.088-.532-1.536-.948-.448-.424-.808-.944-1.08-1.56-.264-.624-.396-1.34-.396-2.148 0-.76.14-1.476.42-2.148.288-.672.688-1.256 1.2-1.752.512-.504 1.124-.9 1.836-1.188.712-.288 1.5-.432 2.364-.432.856 0 1.632.14 2.328.42.696.272 1.288.66 1.776 1.164.488.496.864 1.092 1.128 1.788.264.688.396 1.448.396 2.28 0 .52-.048 1.012-.144 1.476-.088.464-.22.916-.396 1.356-.168.432-.376.86-.624 1.284-.24.416-.512.84-.816 1.272l-4.068 5.832c-.12.176-.3.32-.54.432-.232.112-.496.168-.792.168h-2.364l5.304-6.78z",
         fill: "#21242C"
       }));
-    // TODO(ned): Per the notes in `KeyConfigs`, shouldn't this be a comma
-    // that we replace with the period icon for i18n? Duplicating for now.
     case "DECIMAL":
     case "PERIOD":
+      // Different locales use different symbols for the decimal separator
+      // (, vs .)
+      if (id === "DECIMAL" && decimalSeparator === DecimalSeparator.COMMA) {
+        // comma decimal separator
+        return /*#__PURE__*/React__namespace.createElement("svg", {
+          width: "40",
+          height: "40",
+          viewBox: "0 0 32 32",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          "data-test-id": "comma-decimal"
+        }, /*#__PURE__*/React__namespace.createElement("path", {
+          d: "M11.5559 25.3544C11.8679 24.661 12.1799 23.933 12.4919 23.1704C12.8039 22.425 13.0986 21.6884 13.3759 20.9604C13.6706 20.2324 13.9219 19.5737 14.1299 18.9844H16.6259L16.7299 19.2704C16.4526 19.877 16.1232 20.5357 15.7419 21.2464C15.3606 21.9397 14.9619 22.633 14.5459 23.3264C14.1299 24.037 13.7139 24.713 13.2979 25.3544H11.5559Z",
+          fill: "#21242C"
+        }));
+      }
+      // period / US decimal separator
       return /*#__PURE__*/React__namespace.createElement("svg", {
         width: "40",
         height: "40",
         viewBox: "0 0 40 40",
         fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
+        xmlns: "http://www.w3.org/2000/svg",
+        "data-test-id": "period-decimal"
       }, /*#__PURE__*/React__namespace.createElement("path", {
         d: "M18.3401 27.512c0-.232.04-.448.12-.648.088-.208.204-.388.348-.54.152-.152.328-.272.528-.36.208-.088.428-.132.66-.132.232 0 .448.044.648.132.208.088.388.208.54.36.152.152.272.332.36.54.088.2.132.416.132.648 0 .24-.044.46-.132.66-.088.2-.208.376-.36.528-.152.152-.332.268-.54.348-.2.088-.416.132-.648.132-.232 0-.452-.044-.66-.132-.2-.08-.376-.196-.528-.348-.144-.152-.26-.328-.348-.528-.08-.2-.12-.42-.12-.66z",
         fill: "#21242C"
@@ -4652,7 +4684,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 +4734,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 +4759,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 +4775,7 @@ const styles$g = aphrodite.StyleSheet.create({
     height: "100%",
     boxSizing: "border-box",
     ":focus": {
-      outline: "none"
+      outline: `none`
     }
   }
 });
@@ -5037,7 +5069,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 +5110,7 @@ const styles$f = aphrodite.StyleSheet.create({
     width: "100%",
     height: "100%",
     ":focus": {
-      outline: "none"
+      outline: `none`
     }
   },
   outerBoxBase: {
@@ -5086,7 +5118,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 +5152,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 +5270,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 +5283,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 +5496,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 +5515,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 +5558,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)) {
@@ -5599,6 +5611,23 @@ class TransitionChild extends React__namespace.Component {
     // 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
@@ -5682,71 +5711,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);
@@ -5759,7 +5730,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,
@@ -5769,18 +5740,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
     });
@@ -5798,35 +5819,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,
@@ -5837,7 +5858,7 @@ class MobileKeypad extends React__namespace.Component {
       advancedRelations: isExpression,
       expandedView: containerWidth > expandedViewThreshold$1,
       showDismiss: true
-    })) : null);
+    }) : null));
   }
 }
 const styles$c = aphrodite.StyleSheet.create({
@@ -5960,20 +5981,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();
   }
@@ -5982,6 +5997,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
@@ -6002,7 +6023,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",
@@ -6023,11 +6052,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",
@@ -6045,11 +6079,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",
@@ -6073,9 +6112,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.
@@ -6105,7 +6141,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",
@@ -6126,11 +6170,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",
@@ -6148,11 +6197,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",
@@ -6176,11 +6230,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",
@@ -6204,11 +6263,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",
@@ -6226,9 +6290,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.
@@ -6255,7 +6316,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",
@@ -6276,11 +6345,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",
@@ -6304,11 +6378,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",
@@ -6332,11 +6411,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",
@@ -6357,11 +6441,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",
@@ -6382,9 +6471,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({
@@ -6442,7 +6528,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",
@@ -6466,11 +6560,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",
@@ -6494,11 +6593,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",
@@ -6522,11 +6626,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",
@@ -6557,11 +6666,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",
@@ -6581,11 +6695,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",
@@ -6623,11 +6742,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",
@@ -6651,11 +6775,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",
@@ -6673,11 +6802,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",
@@ -6695,9 +6829,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.
@@ -6712,7 +6843,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",
@@ -6737,11 +6876,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",
@@ -6759,11 +6903,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",
@@ -6787,11 +6936,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",
@@ -6812,11 +6966,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",
@@ -6840,11 +6999,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",
@@ -6877,9 +7041,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.
@@ -7263,7 +7424,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) {
@@ -7324,7 +7485,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;
@@ -7368,72 +7529,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);
   }
@@ -7450,6 +7552,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,
@@ -7523,13 +7687,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({
@@ -7707,7 +7864,6 @@ const extractProps = keyConfig => {
   };
 };
 const mapStateToProps$5 = (state, ownProps) => {
-  var _gestures$popover;
   const {
     gestures
   } = state;
@@ -7732,7 +7888,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)
@@ -7750,6 +7906,9 @@ var TouchableKeypadButton$1 = reactRedux.connect(mapStateToProps$5, null, null,
 })(TouchableKeypadButton);
 
 class ManyKeypadButton extends React__namespace.Component {
+  static defaultProps = {
+    keys: []
+  };
   render() {
     const {
       keys,
@@ -7783,9 +7942,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
@@ -7838,35 +7994,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,
@@ -7904,7 +8057,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)));
       }));
     }));
@@ -7999,7 +8152,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"
@@ -8069,43 +8221,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);
@@ -8120,6 +8241,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,
@@ -8197,18 +8347,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,
@@ -8253,16 +8403,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 => {
@@ -8498,9 +8648,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
   };
 };
@@ -8631,9 +8780,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
   };
 };
@@ -8750,71 +8898,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({
@@ -8852,11 +8941,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,
@@ -8916,7 +9057,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
   },
@@ -8937,7 +9078,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
@@ -8992,10 +9133,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,
@@ -9003,12 +9141,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,
@@ -9180,8 +9312,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
@@ -9194,7 +9325,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.
@@ -9202,7 +9332,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) {
@@ -9225,8 +9355,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]) {
@@ -9260,8 +9389,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]) {
@@ -9284,9 +9412,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 = {};
 
@@ -9399,9 +9524,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 = {};
@@ -9561,16 +9683,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;
@@ -9811,13 +9933,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)
         };
       }
 
@@ -10186,66 +10307,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) {
@@ -10256,6 +10317,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