@khanacademy/math-input 4.1.1 → 4.3.0

package/dist/index.js

@@ -41,7 +41,6 @@ function _interopNamespace(e) {
 var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
 var i18n__namespace = /*#__PURE__*/_interopNamespace(i18n);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var $__default = /*#__PURE__*/_interopDefaultLegacy($);
 var MathQuill__default = /*#__PURE__*/_interopDefaultLegacy(MathQuill);
@@ -401,274 +400,52 @@ class DragListener {
   }
 }
 
-/**
- * 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 DeviceType = /*#__PURE__*/function (DeviceType) {
-  DeviceType["PHONE"] = "PHONE";
-  DeviceType["TABLET"] = "TABLET";
-  return DeviceType;
-}({});
-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 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,
-//   the locale must bet set using `setLocale(kaLocale)` which can be
-//   imported from wonder-blocks-i18n.
-// - Some languages/locales use different decimal separators than the ones
-//   listed here.  Much of the Arab world uses U+066C.
-const decimalSeparator = i18n.getDecimalSeparator() === "," ? DecimalSeparator.COMMA : DecimalSeparator.PERIOD;
-
-var MQ = MathQuill__default["default"].getInterface(2);
-
-var ActionType = /*#__PURE__*/function (ActionType) {
-  ActionType["WRITE"] = "write";
-  ActionType["CMD"] = "cmd";
-  ActionType["KEYSTROKE"] = "keystroke";
-  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) {
-    switch (type) {
-      case ActionType.WRITE:
-        {
-          mathQuill.write(str);
-          return;
-        }
-      case ActionType.CMD:
-        {
-          mathQuill.cmd(str);
-          return;
-        }
-      case ActionType.KEYSTROKE:
-        {
-          mathQuill.keystroke(str);
-          return;
-        }
-    }
+// We only need one MathQuill instance (referred to as MQ in the docs)
+// and that contains some MQ constants and the MathField constructor
+const mathQuillInstance = MathQuill__default["default"].getInterface(2);
+function createBaseConfig() {
+  return {
+    // LaTeX commands that, when typed, are immediately replaced by the
+    // appropriate symbol. This does not include ln, log, or any of the
+    // trig functions; those are always interpreted as commands.
+    autoCommands: "pi theta phi sqrt nthroot",
+    // Pop the cursor out of super/subscripts on arithmetic operators
+    // or (in)equalities.
+    charsThatBreakOutOfSupSub: "+-*/=<>≠≤≥",
+    // Prevent excessive super/subscripts or fractions from being
+    // created without operands, e.g. when somebody holds down a key
+    supSubsRequireOperand: true,
+    // The name of this option is somewhat misleading, as tabbing in
+    // MathQuill breaks you out of a nested context (fraction/script)
+    // if you're in one, but moves focus to the next input if you're
+    // not. Spaces (with this option enabled) are just ignored in the
+    // latter case.
+    //
+    // TODO(alex): In order to allow inputting mixed numbers, we will
+    // have to accept spaces in certain cases. The desired behavior is
+    // still to escape nested contexts if currently in one, but to
+    // insert a space if not (we don't expect mixed numbers in nested
+    // contexts). We should also limit to one consecutive space.
+    spaceBehavesLikeTab: true
   };
 }
-const keyToMathquillMap = {
-  CDOT: buildGenericCallback("\\cdot"),
-  COS: buildGenericCallback("cos"),
-  DECIMAL: buildGenericCallback(decimalSymbol),
-  DIVIDE: buildGenericCallback("\\div"),
-  EQUAL: buildGenericCallback("="),
-  EXP: buildGenericCallback("^"),
-  EXP_2: buildGenericCallback("^2"),
-  EXP_3: buildGenericCallback("^3"),
-  GEQ: buildGenericCallback("\\geq"),
-  GT: buildGenericCallback(">"),
-  LEQ: buildGenericCallback("\\leq"),
-  LN: buildGenericCallback("\\ln"),
-  LOG: buildGenericCallback("\\log"),
-  LT: buildGenericCallback("<"),
-  MINUS: buildGenericCallback("-"),
-  NEGATIVE: buildGenericCallback("-"),
-  NEQ: buildGenericCallback("\\neq"),
-  PERCENT: buildGenericCallback("%"),
-  PERIOD: buildGenericCallback("."),
-  PLUS: buildGenericCallback("+"),
-  SIN: buildGenericCallback("sin"),
-  TAN: buildGenericCallback("tan"),
-  TIMES: buildGenericCallback("\\times"),
-  // The `FRAC_EXCLUSIVE` variant is handled manually, since we may need to do
-  // some additional navigation depending on the cursor position.
-  FRAC_INCLUSIVE: buildGenericCallback("/", ActionType.CMD),
-  LEFT_PAREN: buildGenericCallback("(", ActionType.CMD),
-  RIGHT_PAREN: buildGenericCallback(")", ActionType.CMD),
-  SQRT: buildGenericCallback("sqrt", ActionType.CMD),
-  PHI: buildGenericCallback("\\phi", ActionType.CMD),
-  PI: buildGenericCallback("pi", ActionType.CMD),
-  THETA: buildGenericCallback("theta", ActionType.CMD),
-  RADICAL: buildGenericCallback("nthroot", ActionType.CMD),
-  UP: buildGenericCallback("Up", ActionType.KEYSTROKE),
-  DOWN: buildGenericCallback("Down", ActionType.KEYSTROKE),
-  CUBE_ROOT: mathQuill => {
-    mathQuill.write("\\sqrt[3]{}");
-    mathQuill.keystroke("Left"); // under the root
-  },
-
-  FRAC_EXCLUSIVE: mathQuill => {
-    const cursor = mathQuill.__controller.cursor;
-    // If there's nothing to the left of the cursor, then we want to
-    // leave the cursor to the left of the fraction after creating it.
-    const shouldNavigateLeft = cursor[MQ.L] === ActionType.MQ_END;
-    mathQuill.cmd("\\frac");
-    if (shouldNavigateLeft) {
-      mathQuill.keystroke("Left");
-    }
-  },
-  LOG_B: mathQuill => {
-    mathQuill.typedText("log_");
-    mathQuill.keystroke("Right");
-    mathQuill.typedText("(");
-    mathQuill.keystroke("Left");
-    mathQuill.keystroke("Left");
-  },
-  LOG_N: mathQuill => {
-    mathQuill.write("log_{ }\\left(\\right)");
-    mathQuill.keystroke("Left"); // into parentheses
-    mathQuill.keystroke("Left"); // out of parentheses
-    mathQuill.keystroke("Left"); // into index
-  },
-
-  NTHROOT3: mathQuill => {
-    mathQuill.typedText("nthroot3");
-    mathQuill.keystroke("Right");
-  },
-  POW: mathQuill => {
-    const contents = mathQuill.latex();
-    mathQuill.typedText("^");
 
-    // If the input hasn't changed (for example, if we're
-    // attempting to add an exponent on an empty input or an empty
-    // denominator), insert our own "a^b"
-    if (mathQuill.latex() === contents) {
-      mathQuill.typedText("a^b");
-    }
-  },
-  // These need to be overwritten by the consumer
-  // if they're going to be used
-  FRAC: () => {},
-  RIGHT: () => {},
-  LEFT: () => {},
-  BACKSPACE: () => {},
-  DISMISS: () => {},
-  JUMP_OUT_PARENTHESES: () => {},
-  JUMP_OUT_EXPONENT: () => {},
-  JUMP_OUT_BASE: () => {},
-  JUMP_INTO_NUMERATOR: () => {},
-  JUMP_OUT_NUMERATOR: () => {},
-  JUMP_OUT_DENOMINATOR: () => {},
-  NOOP: () => {},
-  MANY: () => {},
-  NUM_0: buildGenericCallback("0"),
-  NUM_1: buildGenericCallback("1"),
-  NUM_2: buildGenericCallback("2"),
-  NUM_3: buildGenericCallback("3"),
-  NUM_4: buildGenericCallback("4"),
-  NUM_5: buildGenericCallback("5"),
-  NUM_6: buildGenericCallback("6"),
-  NUM_7: buildGenericCallback("7"),
-  NUM_8: buildGenericCallback("8"),
-  NUM_9: buildGenericCallback("9"),
-  a: buildGenericCallback("a"),
-  b: buildGenericCallback("b"),
-  c: buildGenericCallback("c"),
-  d: buildGenericCallback("d"),
-  e: buildGenericCallback("e"),
-  f: buildGenericCallback("f"),
-  g: buildGenericCallback("g"),
-  h: buildGenericCallback("h"),
-  i: buildGenericCallback("i"),
-  j: buildGenericCallback("j"),
-  k: buildGenericCallback("k"),
-  l: buildGenericCallback("l"),
-  m: buildGenericCallback("m"),
-  n: buildGenericCallback("n"),
-  o: buildGenericCallback("o"),
-  p: buildGenericCallback("p"),
-  q: buildGenericCallback("q"),
-  r: buildGenericCallback("r"),
-  s: buildGenericCallback("s"),
-  t: buildGenericCallback("t"),
-  u: buildGenericCallback("u"),
-  v: buildGenericCallback("v"),
-  w: buildGenericCallback("w"),
-  x: buildGenericCallback("x"),
-  y: buildGenericCallback("y"),
-  z: buildGenericCallback("z"),
-  A: buildGenericCallback("A"),
-  B: buildGenericCallback("B"),
-  C: buildGenericCallback("C"),
-  D: buildGenericCallback("D"),
-  E: buildGenericCallback("E"),
-  F: buildGenericCallback("F"),
-  G: buildGenericCallback("G"),
-  H: buildGenericCallback("H"),
-  I: buildGenericCallback("I"),
-  J: buildGenericCallback("J"),
-  K: buildGenericCallback("K"),
-  L: buildGenericCallback("L"),
-  M: buildGenericCallback("M"),
-  N: buildGenericCallback("N"),
-  O: buildGenericCallback("O"),
-  P: buildGenericCallback("P"),
-  Q: buildGenericCallback("Q"),
-  R: buildGenericCallback("R"),
-  S: buildGenericCallback("S"),
-  T: buildGenericCallback("T"),
-  U: buildGenericCallback("U"),
-  V: buildGenericCallback("V"),
-  W: buildGenericCallback("W"),
-  X: buildGenericCallback("X"),
-  Y: buildGenericCallback("Y"),
-  Z: buildGenericCallback("Z")
-};
+/**
+ * Creates a new [MathField](http://docs.mathquill.com/en/latest/Api_Methods/#mqmathfieldhtml_element-config)
+ * instance within the given `container`.
+ *
+ * An optional configuration callback can be provided to customize
+ * the created MathField. A default configuration is passed to this
+ * callback which can then be adjusted as needed. The configuration
+ * returned from this callback is used to create the MathField.
+ * This allows callers to do minimal configuration as only configs
+ * that vary from the default need to be provided.
+ */
+function createMathField(container, configCallback) {
+  const baseConfig = createBaseConfig();
+  const config = configCallback ? configCallback(baseConfig) : baseConfig;
+  return mathQuillInstance.MathField(container, config);
+}
 
 let MathFieldActionType = /*#__PURE__*/function (MathFieldActionType) {
   MathFieldActionType["WRITE"] = "write";
@@ -739,7 +516,7 @@ function isInsideLogIndex(cursor) {
   return false;
 }
 function isInsideEmptyNode(cursor) {
-  return cursor[MQ.L] === MathFieldActionType.MQ_END && cursor[MQ.R] === MathFieldActionType.MQ_END;
+  return cursor[mathQuillInstance.L] === MathFieldActionType.MQ_END && cursor[mathQuillInstance.R] === MathFieldActionType.MQ_END;
 }
 function selectNode(node, cursor) {
   cursor.insLeftOf(node);
@@ -799,7 +576,7 @@ function maybeFindCommand(initialNode) {
     } else {
       break;
     }
-    node = node[MQ.L];
+    node = node[mathQuillInstance.L];
   }
 
   // If we hit the start of a command, then grab the rest of it by
@@ -807,7 +584,7 @@ function maybeFindCommand(initialNode) {
   // with its terminal node.
   if (startNode) {
     // Next, iterate from the start to the right.
-    node = initialNode[MQ.R];
+    node = initialNode[mathQuillInstance.R];
     while (node !== 0) {
       const ctrlSeq = node.ctrlSeq.trim();
       if (commandCharRegex.test(ctrlSeq)) {
@@ -820,7 +597,7 @@ function maybeFindCommand(initialNode) {
         endNode = node;
         break;
       }
-      node = node[MQ.R];
+      node = node[mathQuillInstance.R];
     }
     if (validCommands.includes(name)) {
       return {
@@ -846,18 +623,18 @@ function maybeFindCommand(initialNode) {
  *                          name (`name`) of the command
  */
 function maybeFindCommandBeforeParens(leftParenNode) {
-  return maybeFindCommand(leftParenNode[MQ.L]);
+  return maybeFindCommand(leftParenNode[mathQuillInstance.L]);
 }
 function contextForCursor(cursor) {
   // First, try to find any fraction to the right, unimpeded.
   let visitor = cursor;
-  while (visitor[MQ.R] !== MathFieldActionType.MQ_END) {
-    if (isFraction(visitor[MQ.R])) {
+  while (visitor[mathQuillInstance.R] !== MathFieldActionType.MQ_END) {
+    if (isFraction(visitor[mathQuillInstance.R])) {
       return CursorContext.BEFORE_FRACTION;
-    } else if (!isLeaf(visitor[MQ.R])) {
+    } else if (!isLeaf(visitor[mathQuillInstance.R])) {
       break;
     }
-    visitor = visitor[MQ.R];
+    visitor = visitor[mathQuillInstance.R];
   }
 
   // If that didn't work, check if the parent or grandparent is a special
@@ -877,57 +654,8 @@ function contextForCursor(cursor) {
   }
 }
 
-function handleLeftArrow(mathField, cursor) {
-  // If we're inside a function, and just after the left parentheses, we
-  // need to skip the entire function name, rather than move the cursor
-  // inside of it. For example, when hitting left from within the
-  // parentheses in `cos()`, we want to place the cursor to the left of
-  // the entire expression, rather than between the `s` and the left
-  // parenthesis.
-  // From the cursor's perspective, this requires that our left node is
-  // the ActionType.MQ_END node, that our grandparent is the left parenthesis, and
-  // the nodes to the left of our grandparent comprise a valid function
-  // name.
-  if (cursor[MQ.L] === MathFieldActionType.MQ_END) {
-    const parent = cursor.parent;
-    const grandparent = parent.parent;
-    if (grandparent.ctrlSeq === "\\left(") {
-      const command = maybeFindCommandBeforeParens(grandparent);
-      if (command) {
-        cursor.insLeftOf(command.startNode);
-        return;
-      }
-    }
-  }
-
-  // Otherwise, we default to the standard MathQull left behavior.
-  mathField.keystroke("Left");
-}
-function handleRightArrow(mathField, cursor) {
-  const command = maybeFindCommand(cursor[MQ.R]);
-  if (command) {
-    // Similarly, if a function is to our right, then we need to place
-    // the cursor at the start of its parenthetical content, which is
-    // done by putting it to the left of ites parentheses and then
-    // moving right once.
-    cursor.insLeftOf(command.endNode);
-    mathField.keystroke("Right");
-  } else {
-    // Otherwise, we default to the standard MathQull right behavior.
-    mathField.keystroke("Right");
-  }
-}
-function handleArrow(mathField, key) {
-  const cursor = getCursor(mathField);
-  if (key === "LEFT") {
-    handleLeftArrow(mathField, cursor);
-  } else if (key === "RIGHT") {
-    handleRightArrow(mathField, cursor);
-  }
-}
-
 function handleBackspaceInNthRoot(mathField, cursor) {
-  const isAtLeftEnd = cursor[MQ.L] === MathFieldActionType.MQ_END;
+  const isAtLeftEnd = cursor[mathQuillInstance.L] === MathFieldActionType.MQ_END;
   const isRootEmpty = isInsideEmptyNode(cursor.parent.parent.blocks[0].ends);
   if (isAtLeftEnd) {
     selectNode(cursor.parent.parent, cursor);
@@ -946,7 +674,7 @@ function handleBackspaceInRootIndex(mathField, cursor) {
 
     const grandparent = cursor.parent.parent;
     const latex = grandparent.latex();
-    const reinsertionPoint = grandparent[MQ.L];
+    const reinsertionPoint = grandparent[mathQuillInstance.L];
     selectNode(grandparent, cursor);
     const rootIsEmpty = grandparent.blocks[1].jQ.text() === "";
     if (rootIsEmpty) {
@@ -965,13 +693,13 @@ function handleBackspaceInRootIndex(mathField, cursor) {
 
       // Adjust the cursor to be to the left the sqrt.
       if (reinsertionPoint === MathFieldActionType.MQ_END) {
-        mathField.moveToDirEnd(MQ.L);
+        mathField.moveToDirEnd(mathQuillInstance.L);
       } else {
         cursor.insRightOf(reinsertionPoint);
       }
     }
   } else {
-    if (cursor[MQ.L] !== MathFieldActionType.MQ_END) {
+    if (cursor[mathQuillInstance.L] !== MathFieldActionType.MQ_END) {
       // If the cursor is not at the leftmost position inside the
       // root's index, delete a character.
       mathField.keystroke("Backspace");
@@ -984,14 +712,14 @@ function handleBackspaceInLogIndex(mathField, cursor) {
     const command = maybeFindCommandBeforeParens(grandparent);
     cursor.insLeftOf(command === null || command === void 0 ? void 0 : command.startNode);
     cursor.startSelection();
-    if (grandparent[MQ.R] !== MathFieldActionType.MQ_END) {
-      cursor.insRightOf(grandparent[MQ.R]);
+    if (grandparent[mathQuillInstance.R] !== MathFieldActionType.MQ_END) {
+      cursor.insRightOf(grandparent[mathQuillInstance.R]);
     } else {
       cursor.insRightOf(grandparent);
     }
     cursor.select();
     cursor.endSelection();
-    const isLogBodyEmpty = grandparent[MQ.R].contentjQ.text() === "";
+    const isLogBodyEmpty = grandparent[mathQuillInstance.R].contentjQ.text() === "";
     if (isLogBodyEmpty) {
       // If there's no content inside the log's parens then delete the
       // whole thing.
@@ -1010,8 +738,8 @@ function handleBackspaceOutsideParens(cursor) {
   // (x+1)| => |(x+1)|
   // \log(x+1)| => |\log(x+1)|
 
-  const leftNode = cursor[MQ.L];
-  const rightNode = cursor[MQ.R];
+  const leftNode = cursor[mathQuillInstance.L];
+  const rightNode = cursor[mathQuillInstance.R];
   const command = maybeFindCommandBeforeParens(leftNode);
   if (command && command.startNode) {
     // There's a command before the parens so we select it as well as
@@ -1057,7 +785,7 @@ function handleBackspaceInsideParens(mathField, cursor) {
   // - \log(|x+1) => |\log(x+1)|
   // - \log(|) => |
 
-  if (cursor[MQ.L] !== MathFieldActionType.MQ_END) {
+  if (cursor[mathQuillInstance.L] !== MathFieldActionType.MQ_END) {
     // This command contains math and there's some math to
     // the left of the cursor that we should delete normally
     // before doing anything special.
@@ -1070,12 +798,12 @@ function handleBackspaceInsideParens(mathField, cursor) {
   // has a subscript as is the case in log_n then move the cursor into
   // the subscript, e.g. \log_{5}(|x+1) => \log_{5|}(x+1)
 
-  if (grandparent[MQ.L].sub) {
+  if (grandparent[mathQuillInstance.L].sub) {
     // if there is a subscript
-    if (grandparent[MQ.L].sub.jQ.text()) {
+    if (grandparent[mathQuillInstance.L].sub.jQ.text()) {
       // and it contains text
       // move the cursor to the right end of the subscript
-      cursor.insAtRightEnd(grandparent[MQ.L].sub);
+      cursor.insAtRightEnd(grandparent[mathQuillInstance.L].sub);
       return;
     }
   }
@@ -1113,7 +841,7 @@ function handleBackspace(mathField) {
   if (!cursor.selection) {
     const parent = cursor.parent;
     const grandparent = parent.parent;
-    const leftNode = cursor[MQ.L];
+    const leftNode = cursor[mathQuillInstance.L];
     if (isFraction(leftNode)) {
       selectNode(leftNode, cursor);
     } else if (isSquareRoot(leftNode)) {
@@ -1140,6 +868,133 @@ 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 DeviceType = /*#__PURE__*/function (DeviceType) {
+  DeviceType["PHONE"] = "PHONE";
+  DeviceType["TABLET"] = "TABLET";
+  return DeviceType;
+}({});
+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 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,
+//   the locale must bet set using `setLocale(kaLocale)` which can be
+//   imported from wonder-blocks-i18n.
+// - Some languages/locales use different decimal separators than the ones
+//   listed here.  Much of the Arab world uses U+066C.
+const decimalSeparator = i18n.getDecimalSeparator() === "," ? DecimalSeparator.COMMA : DecimalSeparator.PERIOD;
+
+function handleLeftArrow(mathField, cursor) {
+  // If we're inside a function, and just after the left parentheses, we
+  // need to skip the entire function name, rather than move the cursor
+  // inside of it. For example, when hitting left from within the
+  // parentheses in `cos()`, we want to place the cursor to the left of
+  // the entire expression, rather than between the `s` and the left
+  // parenthesis.
+  // From the cursor's perspective, this requires that our left node is
+  // the ActionType.MQ_END node, that our grandparent is the left parenthesis, and
+  // the nodes to the left of our grandparent comprise a valid function
+  // name.
+  if (cursor[mathQuillInstance.L] === MathFieldActionType.MQ_END) {
+    const parent = cursor.parent;
+    const grandparent = parent.parent;
+    if (grandparent.ctrlSeq === "\\left(") {
+      const command = maybeFindCommandBeforeParens(grandparent);
+      if (command) {
+        cursor.insLeftOf(command.startNode);
+        return;
+      }
+    }
+  }
+
+  // Otherwise, we default to the standard MathQull left behavior.
+  mathField.keystroke("Left");
+}
+function handleRightArrow(mathField, cursor) {
+  const command = maybeFindCommand(cursor[mathQuillInstance.R]);
+  if (command) {
+    // Similarly, if a function is to our right, then we need to place
+    // the cursor at the start of its parenthetical content, which is
+    // done by putting it to the left of ites parentheses and then
+    // moving right once.
+    cursor.insLeftOf(command.endNode);
+    mathField.keystroke("Right");
+  } else {
+    // Otherwise, we default to the standard MathQull right behavior.
+    mathField.keystroke("Right");
+  }
+}
+function handleArrow(mathField, key) {
+  const cursor = getCursor(mathField);
+  if (key === "LEFT") {
+    handleLeftArrow(mathField, cursor);
+  } else if (key === "RIGHT") {
+    handleRightArrow(mathField, cursor);
+  }
+}
+
 const ArithmeticOperators = ["+", "-", "\\cdot", "\\times", "\\div"];
 const EqualityOperators = ["=", "\\neq", "<", "\\leq", ">", "\\geq"];
 function handleExponent(mathField, key) {
@@ -1148,7 +1003,7 @@ function handleExponent(mathField, key) {
   // knowingly cannot be raised to a power), add an empty set of
   // parentheses and apply the exponent to that.
   const invalidPrefixes = [...ArithmeticOperators, ...EqualityOperators];
-  const precedingNode = cursor[MQ.L];
+  const precedingNode = cursor[mathQuillInstance.L];
   const shouldPrefixWithParens = precedingNode === MathFieldActionType.MQ_END || invalidPrefixes.includes(precedingNode.ctrlSeq.trim());
   if (shouldPrefixWithParens) {
     mathField.write("\\left(\\right)");
@@ -1214,11 +1069,11 @@ function handleJumpOut(mathField, key) {
       // Find the nearest fraction to the right of the cursor.
       let fractionNode;
       let visitor = cursor;
-      while (visitor[MQ.R] !== MathFieldActionType.MQ_END) {
-        if (isFraction(visitor[MQ.R])) {
-          fractionNode = visitor[MQ.R];
+      while (visitor[mathQuillInstance.R] !== MathFieldActionType.MQ_END) {
+        if (isFraction(visitor[mathQuillInstance.R])) {
+          fractionNode = visitor[mathQuillInstance.R];
         }
-        visitor = visitor[MQ.R];
+        visitor = visitor[mathQuillInstance.R];
       }
 
       // Jump into it!
@@ -1247,7 +1102,7 @@ function handleJumpOut(mathField, key) {
       // Navigate right once more, if we're right before parens. This
       // is to handle the standard case in which the subscript is the
       // base of a custom log.
-      if (isParens(cursor[MQ.R])) {
+      if (isParens(cursor[mathQuillInstance.R])) {
         mathField.keystroke("Right");
       }
       break;
@@ -1260,26 +1115,46 @@ function handleJumpOut(mathField, key) {
   }
 }
 
+var ActionType = /*#__PURE__*/function (ActionType) {
+  ActionType["WRITE"] = "write";
+  ActionType["CMD"] = "cmd";
+  ActionType["KEYSTROKE"] = "keystroke";
+  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) {
+    switch (type) {
+      case ActionType.WRITE:
+        {
+          mathQuill.write(str);
+          return;
+        }
+      case ActionType.CMD:
+        {
+          mathQuill.cmd(str);
+          return;
+        }
+      case ActionType.KEYSTROKE:
+        {
+          mathQuill.keystroke(str);
+          return;
+        }
+    }
+  };
+}
 function buildNormalFunctionCallback(command) {
   return function (mathField) {
     mathField.write("\\".concat(command, "\\left(\\right)"));
     mathField.keystroke("Left");
   };
 }
-const customKeyTranslator = {
-  ...keyToMathquillMap,
-  // note(Matthew): in all likelihood, this should be moved
-  // to the shared key2MathQuill translator. During this refactor
-  // I tried to keep logic the same while deduplicating code.
-  // Perseus' Expression MathInput treats this stuff differently
-  // (or doesn't do anything with them at all), so I kept it that way
-  BACKSPACE: handleBackspace,
+const keyToMathquillMap = {
   EXP: handleExponent,
   EXP_2: handleExponent,
   EXP_3: handleExponent,
-  FRAC: mathQuill => {
-    mathQuill.cmd("\\frac");
-  },
   JUMP_OUT_PARENTHESES: handleJumpOut,
   JUMP_OUT_EXPONENT: handleJumpOut,
   JUMP_OUT_BASE: handleJumpOut,
@@ -1292,40 +1167,193 @@ const customKeyTranslator = {
   LN: buildNormalFunctionCallback("ln"),
   SIN: buildNormalFunctionCallback("sin"),
   COS: buildNormalFunctionCallback("cos"),
-  TAN: buildNormalFunctionCallback("tan")
-};
-
-/**
- * This file contains a wrapper around MathQuill so that we can provide a
- * more regular interface for the functionality we need while insulating us
- * from MathQuill changes.
- */
-class MathWrapper {
-  // MathQuill input
-
-  constructor(element) {
-    let callbacks = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-    _defineProperty(this, "mathField", void 0);
-    _defineProperty(this, "callbacks", void 0);
-    this.mathField = MQ.MathField(element, {
-      // use a span instead of a textarea so that we don't bring up the
-      // native keyboard on mobile when selecting the input
-      substituteTextarea: function () {
-        return document.createElement("span");
-      }
-    });
-    this.callbacks = callbacks;
-  }
-  focus() {
-    // HACK(charlie): We shouldn't reaching into MathQuill internals like
-    // this, but it's the easiest way to allow us to manage the focus state
-    // ourselves.
-    const controller = this.mathField.__controller;
-    controller.cursor.show();
+  TAN: buildNormalFunctionCallback("tan"),
+  CDOT: buildGenericCallback("\\cdot"),
+  DECIMAL: buildGenericCallback(decimalSymbol),
+  DIVIDE: buildGenericCallback("\\div"),
+  EQUAL: buildGenericCallback("="),
+  GEQ: buildGenericCallback("\\geq"),
+  GT: buildGenericCallback(">"),
+  LEQ: buildGenericCallback("\\leq"),
+  LT: buildGenericCallback("<"),
+  MINUS: buildGenericCallback("-"),
+  NEGATIVE: buildGenericCallback("-"),
+  NEQ: buildGenericCallback("\\neq"),
+  PERCENT: buildGenericCallback("%"),
+  PERIOD: buildGenericCallback("."),
+  PLUS: buildGenericCallback("+"),
+  TIMES: buildGenericCallback("\\times"),
+  // The `FRAC_EXCLUSIVE` variant is handled manually, since we may need to do
+  // some additional navigation depending on the cursor position.
+  FRAC_INCLUSIVE: buildGenericCallback("/", ActionType.CMD),
+  FRAC: buildGenericCallback("\\frac", ActionType.CMD),
+  LEFT_PAREN: buildGenericCallback("(", ActionType.CMD),
+  RIGHT_PAREN: buildGenericCallback(")", ActionType.CMD),
+  SQRT: buildGenericCallback("sqrt", ActionType.CMD),
+  PHI: buildGenericCallback("\\phi", ActionType.CMD),
+  PI: buildGenericCallback("pi", ActionType.CMD),
+  THETA: buildGenericCallback("theta", ActionType.CMD),
+  RADICAL: buildGenericCallback("nthroot", ActionType.CMD),
+  BACKSPACE: buildGenericCallback("Backspace", ActionType.KEYSTROKE),
+  UP: buildGenericCallback("Up", ActionType.KEYSTROKE),
+  DOWN: buildGenericCallback("Down", ActionType.KEYSTROKE),
+  CUBE_ROOT: mathQuill => {
+    mathQuill.write("\\sqrt[3]{}");
+    mathQuill.keystroke("Left"); // under the root
+  },
 
-    // Set MathQuill's internal state to reflect the focus, otherwise it
-    // will consistently try to hide the cursor on key-press and introduce
-    // layout jank.
+  FRAC_EXCLUSIVE: mathQuill => {
+    const cursor = mathQuill.__controller.cursor;
+    // If there's nothing to the left of the cursor, then we want to
+    // leave the cursor to the left of the fraction after creating it.
+    const shouldNavigateLeft = cursor[mathQuillInstance.L] === ActionType.MQ_END;
+    mathQuill.cmd("\\frac");
+    if (shouldNavigateLeft) {
+      mathQuill.keystroke("Left");
+    }
+  },
+  LOG_B: mathQuill => {
+    mathQuill.typedText("log_");
+    mathQuill.keystroke("Right");
+    mathQuill.typedText("(");
+    mathQuill.keystroke("Left");
+    mathQuill.keystroke("Left");
+  },
+  LOG_N: mathQuill => {
+    mathQuill.write("log_{ }\\left(\\right)");
+    mathQuill.keystroke("Left"); // into parentheses
+    mathQuill.keystroke("Left"); // out of parentheses
+    mathQuill.keystroke("Left"); // into index
+  },
+
+  NTHROOT3: mathQuill => {
+    mathQuill.typedText("nthroot3");
+    mathQuill.keystroke("Right");
+  },
+  POW: mathQuill => {
+    const contents = mathQuill.latex();
+    mathQuill.typedText("^");
+
+    // If the input hasn't changed (for example, if we're
+    // attempting to add an exponent on an empty input or an empty
+    // denominator), insert our own "a^b"
+    if (mathQuill.latex() === contents) {
+      mathQuill.typedText("a^b");
+    }
+  },
+  // These need to be overwritten by the consumer
+  // if they're going to be used
+  DISMISS: () => {},
+  NOOP: () => {},
+  MANY: () => {},
+  NUM_0: buildGenericCallback("0"),
+  NUM_1: buildGenericCallback("1"),
+  NUM_2: buildGenericCallback("2"),
+  NUM_3: buildGenericCallback("3"),
+  NUM_4: buildGenericCallback("4"),
+  NUM_5: buildGenericCallback("5"),
+  NUM_6: buildGenericCallback("6"),
+  NUM_7: buildGenericCallback("7"),
+  NUM_8: buildGenericCallback("8"),
+  NUM_9: buildGenericCallback("9"),
+  a: buildGenericCallback("a"),
+  b: buildGenericCallback("b"),
+  c: buildGenericCallback("c"),
+  d: buildGenericCallback("d"),
+  e: buildGenericCallback("e"),
+  f: buildGenericCallback("f"),
+  g: buildGenericCallback("g"),
+  h: buildGenericCallback("h"),
+  i: buildGenericCallback("i"),
+  j: buildGenericCallback("j"),
+  k: buildGenericCallback("k"),
+  l: buildGenericCallback("l"),
+  m: buildGenericCallback("m"),
+  n: buildGenericCallback("n"),
+  o: buildGenericCallback("o"),
+  p: buildGenericCallback("p"),
+  q: buildGenericCallback("q"),
+  r: buildGenericCallback("r"),
+  s: buildGenericCallback("s"),
+  t: buildGenericCallback("t"),
+  u: buildGenericCallback("u"),
+  v: buildGenericCallback("v"),
+  w: buildGenericCallback("w"),
+  x: buildGenericCallback("x"),
+  y: buildGenericCallback("y"),
+  z: buildGenericCallback("z"),
+  A: buildGenericCallback("A"),
+  B: buildGenericCallback("B"),
+  C: buildGenericCallback("C"),
+  D: buildGenericCallback("D"),
+  E: buildGenericCallback("E"),
+  F: buildGenericCallback("F"),
+  G: buildGenericCallback("G"),
+  H: buildGenericCallback("H"),
+  I: buildGenericCallback("I"),
+  J: buildGenericCallback("J"),
+  K: buildGenericCallback("K"),
+  L: buildGenericCallback("L"),
+  M: buildGenericCallback("M"),
+  N: buildGenericCallback("N"),
+  O: buildGenericCallback("O"),
+  P: buildGenericCallback("P"),
+  Q: buildGenericCallback("Q"),
+  R: buildGenericCallback("R"),
+  S: buildGenericCallback("S"),
+  T: buildGenericCallback("T"),
+  U: buildGenericCallback("U"),
+  V: buildGenericCallback("V"),
+  W: buildGenericCallback("W"),
+  X: buildGenericCallback("X"),
+  Y: buildGenericCallback("Y"),
+  Z: buildGenericCallback("Z")
+};
+
+const mobileKeyTranslator = {
+  ...keyToMathquillMap,
+  // note(Matthew): our mobile backspace logic is really complicated
+  // and for some reason doesn't really work in the desktop experience.
+  // So we default to the basic backspace functionality in the
+  // key translator and overwrite it with the complicated logic here
+  // until we can unify the experiences (if we even want to).
+  // https://khanacademy.atlassian.net/browse/LC-906
+  BACKSPACE: handleBackspace
+};
+
+/**
+ * This file contains a wrapper around MathQuill so that we can provide a
+ * more regular interface for the functionality we need while insulating us
+ * from MathQuill changes.
+ */
+class MathWrapper {
+  // MathQuill MathField input
+
+  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
+        // native keyboard on mobile when selecting the input
+        substituteTextarea: function () {
+          return document.createElement("span");
+        }
+      };
+    });
+    this.callbacks = callbacks;
+  }
+  focus() {
+    // HACK(charlie): We shouldn't reaching into MathQuill internals like
+    // this, but it's the easiest way to allow us to manage the focus state
+    // ourselves.
+    const controller = this.mathField.__controller;
+    controller.cursor.show();
+
+    // Set MathQuill's internal state to reflect the focus, otherwise it
+    // will consistently try to hide the cursor on key-press and introduce
+    // layout jank.
     controller.blurred = false;
   }
   blur() {
@@ -1342,7 +1370,7 @@ class MathWrapper {
    */
   pressKey(key) {
     const cursor = this.getCursor();
-    const translator = customKeyTranslator[key];
+    const translator = mobileKeyTranslator[key];
     if (translator) {
       translator(this.mathField, key);
     }
@@ -1390,7 +1418,7 @@ class MathWrapper {
         // Unless that would leave us mid-command, in which case, we
         // need to adjust and place the cursor inside the parens
         // following the command.
-        const command = maybeFindCommand(cursor[MQ.L]);
+        const command = maybeFindCommand(cursor[mathQuillInstance.L]);
         if (command && command.endNode) {
           // NOTE(charlie): endNode should definitely be \left(.
           cursor.insLeftOf(command.endNode);
@@ -1961,7 +1989,7 @@ class MathInput extends React__namespace.Component {
   }
   componentDidMount() {
     this._isMounted = true;
-    this.mathField = new MathWrapper(this._mathContainer, {}, {
+    this.mathField = new MathWrapper(this._mathContainer, {
       onCursorMove: cursor => {
         // TODO(charlie): It's not great that there is so much coupling
         // between this keypad and the input behavior. We should wrap
@@ -7495,89 +7523,6 @@ class ProvidedKeypad extends React__namespace.Component {
   }
 }
 
-const styles$1 = aphrodite.StyleSheet.create({
-  base: {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    boxShadow: "0px 1px 0px rgba(33, 36, 44, 0.32)",
-    boxSizing: "border-box",
-    background: Color__default["default"].white,
-    borderRadius: 4,
-    border: "1px solid transparent",
-    flex: 1,
-    minHeight: 42,
-    minWidth: 42,
-    padding: 1
-  },
-  hovered: {
-    border: "1px solid ".concat(Color__default["default"].blue),
-    padding: 1,
-    boxShadow: "none"
-  },
-  focused: {
-    border: "2px solid ".concat(Color__default["default"].blue),
-    padding: 0,
-    boxShadow: "none"
-  },
-  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),
-    boxShadow: "none"
-  },
-  outerBoxBase: {
-    padding: 1,
-    height: "100%",
-    width: "100%",
-    boxSizing: "border-box",
-    borderRadius: 7,
-    border: "2px solid transparent"
-  },
-  outerBoxHover: {
-    border: "2px solid ".concat(Color__default["default"].blue)
-  },
-  outerBoxPressed: {
-    border: "2px solid #1B50B3"
-  },
-  clickable: {
-    width: "100%",
-    height: "100%",
-    boxSizing: "border-box"
-  }
-});
-class Button extends React__namespace.Component {
-  render() {
-    const {
-      onPress,
-      ariaLabel,
-      children,
-      style,
-      tintColor
-    } = this.props;
-    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: style
-    }, /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
-      onClick: onPress,
-      style: styles$1.clickable,
-      "aria-label": ariaLabel
-    }, _ref => {
-      let {
-        hovered,
-        focused,
-        pressed
-      } = _ref;
-      return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-        style: [styles$1.outerBoxBase, hovered && styles$1.outerBoxHover, pressed && styles$1.outerBoxPressed]
-      }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-        style: [styles$1.base, tintColor != null ? {
-          background: tintColor
-        } : undefined, hovered && styles$1.hovered, focused && styles$1.focused, pressed && styles$1.pressed]
-      }, children));
-    }));
-  }
-}
-
 /*
 The SVGs in this file should be treated as binary assets. If, in the future,
 we need to make changes to update the color or size or shape of the glyph
@@ -8337,413 +8282,303 @@ function ButtonAsset(_ref) {
   }
 }
 
-const KeypadPageContainer = _ref => {
+const KeypadButton = _ref => {
   let {
-    children
+    coord,
+    keyConfig,
+    onClickKey,
+    style,
+    secondary,
+    action
   } = _ref;
+  const tintColor = secondary ? "#F6F6F7" : action ? "#DBDCDD" : undefined;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: {
-      backgroundColor: "#DBDCDD",
-      width: "100%",
-      height: 192,
-      display: "grid",
-      gridTemplateColumns: "repeat(6, 1fr)",
-      gridTemplateRows: "repeat(4, 1fr)"
+      gridColumn: coord[0] + 1,
+      gridRow: coord[1] + 1,
+      ...style
     }
-  }, children);
-};
-const KeypadButton = _ref2 => {
-  let {
-    keyConfig,
-    onClickKey,
-    tintColor,
-    style
-  } = _ref2;
-  return /*#__PURE__*/React__namespace.createElement(Button, {
-    onPress: () => onClickKey(keyConfig.id),
-    tintColor: tintColor,
-    style: style,
-    ariaLabel: keyConfig.id
-  }, /*#__PURE__*/React__namespace.createElement(ButtonAsset, {
-    id: keyConfig.id
+  }, /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
+    onClick: () => onClickKey(keyConfig.id),
+    style: styles$1.clickable,
+    "aria-label": keyConfig.ariaLabel
+  }, _ref2 => {
+    let {
+      hovered,
+      focused,
+      pressed
+    } = _ref2;
+    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: [styles$1.outerBoxBase, hovered && styles$1.outerBoxHover, pressed && styles$1.outerBoxPressed]
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: [styles$1.base, tintColor != null ? {
+        background: tintColor
+      } : undefined, hovered && styles$1.hovered, focused && styles$1.focused, pressed && styles$1.pressed]
+    }, /*#__PURE__*/React__namespace.createElement(ButtonAsset, {
+      id: keyConfig.id
+    })));
   }));
 };
-const SecondaryKeypadButton = _ref3 => {
-  let {
-    keyConfig,
-    onClickKey,
-    style
-  } = _ref3;
-  return /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: keyConfig,
-    onClickKey: onClickKey,
-    style: style,
-    tintColor: "#F6F6F7"
-  });
-};
-const KeypadActionButton = _ref4 => {
-  let {
-    keyConfig,
-    onClickKey,
-    style
-  } = _ref4;
-  return /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: keyConfig,
-    onClickKey: onClickKey,
-    style: style,
-    tintColor: "#DBDCDD"
-  });
-};
-
-/**
- * A placeholder button for the keypad. Optional count prop to render multiple
- * buttons. Defaults to 1.
- */
-const PlaceHolderButtons = _ref5 => {
-  let {
-    count = 1
-  } = _ref5;
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, Array.from({
-    length: count
-  }).map((_, index) => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    key: index,
-    style: {
-      height: "100%",
-      width: "100%",
-      boxSizing: "border-box",
-      borderRadius: 7,
-      border: "4px solid transparent"
-    }
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: {
-      background: "rgba(33, 36, 44, 0.04)",
-      width: "100%",
-      height: "100%",
-      borderRadius: 4,
-      border: "1px solid transparent"
-    }
-  }))));
-};
+const styles$1 = aphrodite.StyleSheet.create({
+  base: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    boxShadow: "0px 1px 0px rgba(33, 36, 44, 0.32)",
+    boxSizing: "border-box",
+    background: Color__default["default"].white,
+    borderRadius: 4,
+    border: "1px solid transparent",
+    flex: 1,
+    minHeight: 42,
+    minWidth: 42,
+    padding: 1
+  },
+  hovered: {
+    border: "1px solid ".concat(Color__default["default"].blue),
+    padding: 1,
+    boxShadow: "none"
+  },
+  focused: {
+    border: "2px solid ".concat(Color__default["default"].blue),
+    padding: 0,
+    boxShadow: "none"
+  },
+  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),
+    boxShadow: "none"
+  },
+  outerBoxBase: {
+    padding: 1,
+    height: "100%",
+    width: "100%",
+    boxSizing: "border-box",
+    borderRadius: 7,
+    border: "2px solid transparent"
+  },
+  outerBoxHover: {
+    border: "2px solid ".concat(Color__default["default"].blue)
+  },
+  outerBoxPressed: {
+    border: "2px solid #1B50B3"
+  },
+  clickable: {
+    width: "100%",
+    height: "100%",
+    boxSizing: "border-box"
+  }
+});
 
-class ExtrasPage extends React__namespace.Component {
-  render() {
-    const {
-      extraKeys,
-      onClickKey
-    } = this.props;
-    return /*#__PURE__*/React__namespace.createElement(KeypadPageContainer, null, extraKeys.map(key => /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+const columns = 4;
+function ExtrasPage(props) {
+  const {
+    extraKeys,
+    onClickKey
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, extraKeys.map((key, i) => {
+    // Map 1D array to Cartesian coordinates
+    const coordX = i % columns;
+    const coordY = i / columns;
+    return /*#__PURE__*/React__namespace.createElement(KeypadButton, {
       key: key,
       keyConfig: KeyConfigs[key],
-      onClickKey: onClickKey
-    })));
-  }
-}
-
-class GeometryPage extends React__namespace.Component {
-  render() {
-    const {
-      onClickKey
-    } = this.props;
-    return /*#__PURE__*/React__namespace.createElement(KeypadPageContainer, null, /*#__PURE__*/React__namespace.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.SIN,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React__namespace.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.COS,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React__namespace.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.TAN,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React__namespace.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.LEFT_PAREN,
-      onClickKey: onClickKey,
-      style: {
-        gridColumn: 5
-      }
-    }), /*#__PURE__*/React__namespace.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.RIGHT_PAREN,
-      onClickKey: onClickKey,
-      style: {
-        gridColumn: 6
-      }
-    }), /*#__PURE__*/React__namespace.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.x,
-      onClickKey: onClickKey,
-      style: {
-        gridColumn: 5
-      }
-    }), /*#__PURE__*/React__namespace.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.FRAC_INCLUSIVE,
-      onClickKey: onClickKey,
-      style: {
-        gridColumn: 6
-      }
-    }), /*#__PURE__*/React__namespace.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.PI,
-      onClickKey: onClickKey,
-      style: {
-        gridColumn: 5
-      }
-    }), /*#__PURE__*/React__namespace.createElement(KeypadActionButton, {
-      keyConfig: KeyConfigs.BACKSPACE,
-      style: {
-        gridColumn: "6"
-      },
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React__namespace.createElement(KeypadActionButton, {
-      keyConfig: KeyConfigs.DISMISS,
-      style: {
-        gridColumn: "6"
-      },
-      onClickKey: onClickKey
-    }));
-  }
-}
-
-class NumbersPage extends React__namespace.Component {
-  render() {
-    const {
-      onClickKey
-    } = this.props;
-    return /*#__PURE__*/React__namespace.createElement(KeypadPageContainer, null, /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_7,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_8,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_9,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React__namespace.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.DIVIDE,
-      style: this.props.divisionKey ? {
-        gridColumn: "4",
-        gridRow: "1"
-      } : {
-        display: "none"
-      },
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React__namespace.createElement(SecondaryKeypadButton, {
-      keyConfig: this.props.multiplicationDot ? KeyConfigs.CDOT : KeyConfigs.TIMES,
-      style: this.props.divisionKey && {
-        gridColumn: "4",
-        gridRow: "2"
-      },
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React__namespace.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.LEFT_PAREN,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React__namespace.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.RIGHT_PAREN,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_4,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_5,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_6,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React__namespace.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.MINUS,
-      style: this.props.divisionKey && {
-        gridColumn: "4",
-        gridRow: "3"
-      },
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React__namespace.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.FRAC_INCLUSIVE,
       onClickKey: onClickKey,
-      style: {
-        gridColumn: "5 / 7"
-      }
-    }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_1,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_2,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_3,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React__namespace.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.PLUS,
-      style: this.props.divisionKey ? {
-        gridColumn: "4",
-        gridRow: "4"
-      } : {
-        gridColumn: "4",
-        gridRowStart: "3",
-        gridRowEnd: "5"
-      },
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React__namespace.createElement(KeypadActionButton, {
-      keyConfig: KeyConfigs.BACKSPACE,
-      style: {
-        gridColumn: "6"
-      },
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_0,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.DECIMAL,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NEGATIVE,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React__namespace.createElement(KeypadActionButton, {
-      keyConfig: KeyConfigs.DISMISS,
-      style: {
-        gridColumn: "6"
-      },
-      onClickKey: onClickKey
-    }));
-  }
+      coord: [coordX, coordY]
+    });
+  }));
 }
 
-const AdvancedRelations = _ref => {
-  let {
-    onClickKey,
-    placeholder
-  } = _ref;
-  return placeholder ? /*#__PURE__*/React__default["default"].createElement(PlaceHolderButtons, {
-    count: 3
-  }) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(SecondaryKeypadButton, {
-    keyConfig: KeyConfigs.NEQ,
-    onClickKey: onClickKey
-  }), /*#__PURE__*/React__default["default"].createElement(SecondaryKeypadButton, {
-    keyConfig: KeyConfigs.LEQ,
-    onClickKey: onClickKey
-  }), /*#__PURE__*/React__default["default"].createElement(SecondaryKeypadButton, {
-    keyConfig: KeyConfigs.GEQ,
-    onClickKey: onClickKey
+function GeometryPage(props) {
+  const {
+    onClickKey
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.SIN,
+    onClickKey: onClickKey,
+    coord: [0, 0]
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.COS,
+    onClickKey: onClickKey,
+    coord: [1, 0]
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.TAN,
+    onClickKey: onClickKey,
+    coord: [2, 0]
   }));
-};
+}
 
-const BasicRelations = _ref => {
-  let {
-    onClickKey,
-    placeholder
-  } = _ref;
-  return placeholder ? /*#__PURE__*/React__default["default"].createElement(PlaceHolderButtons, {
-    count: 3
-  }) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(SecondaryKeypadButton, {
-    keyConfig: KeyConfigs.EQUAL,
-    onClickKey: onClickKey
-  }), /*#__PURE__*/React__default["default"].createElement(SecondaryKeypadButton, {
-    keyConfig: KeyConfigs.LT,
-    onClickKey: onClickKey
-  }), /*#__PURE__*/React__default["default"].createElement(SecondaryKeypadButton, {
-    keyConfig: KeyConfigs.GT,
-    onClickKey: onClickKey
+function NumbersPage(props) {
+  const {
+    onClickKey
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_7,
+    onClickKey: onClickKey,
+    coord: [0, 0]
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_8,
+    onClickKey: onClickKey,
+    coord: [1, 0]
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_9,
+    onClickKey: onClickKey,
+    coord: [2, 0]
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_4,
+    onClickKey: onClickKey,
+    coord: [0, 1]
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_5,
+    onClickKey: onClickKey,
+    coord: [1, 1]
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_6,
+    onClickKey: onClickKey,
+    coord: [2, 1]
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_1,
+    onClickKey: onClickKey,
+    coord: [0, 2]
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_2,
+    onClickKey: onClickKey,
+    coord: [1, 2]
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_3,
+    onClickKey: onClickKey,
+    coord: [2, 2]
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_0,
+    onClickKey: onClickKey,
+    coord: [0, 3]
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.DECIMAL,
+    onClickKey: onClickKey,
+    coord: [1, 3]
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NEGATIVE,
+    onClickKey: onClickKey,
+    coord: [2, 3]
   }));
-};
+}
 
-const Logarithms = _ref => {
-  let {
+function OperatorsPage(props) {
+  const {
     onClickKey,
-    placeholder
-  } = _ref;
-  return placeholder ? /*#__PURE__*/React__default["default"].createElement(PlaceHolderButtons, {
-    count: 3
-  }) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(SecondaryKeypadButton, {
+    preAlgebra,
+    logarithms,
+    basicRelations,
+    advancedRelations
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, preAlgebra && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.EXP_2,
+    onClickKey: onClickKey,
+    coord: [0, 0]
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.EXP,
+    onClickKey: onClickKey,
+    coord: [1, 0]
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.SQRT,
+    onClickKey: onClickKey,
+    coord: [2, 0]
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.RADICAL,
+    onClickKey: onClickKey,
+    coord: [3, 0]
+  })), logarithms && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(KeypadButton, {
     keyConfig: KeyConfigs.LOG,
-    onClickKey: onClickKey
-  }), /*#__PURE__*/React__default["default"].createElement(SecondaryKeypadButton, {
+    onClickKey: onClickKey,
+    coord: [0, 1]
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
     keyConfig: KeyConfigs.LOG_N,
-    onClickKey: onClickKey
-  }), /*#__PURE__*/React__default["default"].createElement(SecondaryKeypadButton, {
+    onClickKey: onClickKey,
+    coord: [1, 1]
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
     keyConfig: KeyConfigs.LN,
-    onClickKey: onClickKey
-  }));
-};
+    onClickKey: onClickKey,
+    coord: [2, 1]
+  })), basicRelations && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.EQUAL,
+    onClickKey: onClickKey,
+    coord: [0, 2]
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.LT,
+    onClickKey: onClickKey,
+    coord: [1, 2]
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.GT,
+    onClickKey: onClickKey,
+    coord: [2, 2]
+  })), advancedRelations && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NEQ,
+    onClickKey: onClickKey,
+    coord: [0, 3]
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.LEQ,
+    onClickKey: onClickKey,
+    coord: [1, 3]
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.GEQ,
+    onClickKey: onClickKey,
+    coord: [2, 3]
+  })));
+}
 
-const PreAlgebra = _ref => {
-  let {
+function SharedKeys(props) {
+  const {
     onClickKey,
-    placeholder
-  } = _ref;
-  return placeholder ? /*#__PURE__*/React__default["default"].createElement(PlaceHolderButtons, {
-    count: 4
-  }) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(SecondaryKeypadButton, {
-    keyConfig: KeyConfigs.EXP_2,
-    onClickKey: onClickKey
-  }), /*#__PURE__*/React__default["default"].createElement(SecondaryKeypadButton, {
-    keyConfig: KeyConfigs.EXP,
-    onClickKey: onClickKey
-  }), /*#__PURE__*/React__default["default"].createElement(SecondaryKeypadButton, {
-    keyConfig: KeyConfigs.SQRT,
-    onClickKey: onClickKey
-  }), /*#__PURE__*/React__default["default"].createElement(SecondaryKeypadButton, {
-    keyConfig: KeyConfigs.RADICAL,
-    onClickKey: onClickKey
+    divisionKey,
+    multiplicationDot
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.PLUS,
+    onClickKey: onClickKey,
+    coord: [4, 0],
+    secondary: true
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.MINUS,
+    onClickKey: onClickKey,
+    coord: [5, 0],
+    secondary: true
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: multiplicationDot ? KeyConfigs.CDOT : KeyConfigs.TIMES,
+    onClickKey: onClickKey,
+    coord: [4, 1],
+    secondary: true
+  }), divisionKey && /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.DIVIDE,
+    onClickKey: onClickKey,
+    coord: [5, 1],
+    secondary: true
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.LEFT_PAREN,
+    onClickKey: onClickKey,
+    coord: [4, 2],
+    secondary: true
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.RIGHT_PAREN,
+    onClickKey: onClickKey,
+    coord: [5, 2],
+    secondary: true
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.FRAC_INCLUSIVE,
+    onClickKey: onClickKey,
+    coord: [4, 3],
+    secondary: true
+  }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.BACKSPACE,
+    onClickKey: onClickKey,
+    coord: [5, 3],
+    action: true
   }));
-};
-
-class OperatorsPage extends React__namespace.Component {
-  render() {
-    const {
-      onClickKey
-    } = this.props;
-    return /*#__PURE__*/React__namespace.createElement(KeypadPageContainer, null, /*#__PURE__*/React__namespace.createElement(PreAlgebra, {
-      onClickKey: onClickKey,
-      placeholder: !this.props.preAlgebra
-    }), /*#__PURE__*/React__namespace.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.LEFT_PAREN,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React__namespace.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.RIGHT_PAREN,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React__namespace.createElement(Logarithms, {
-      onClickKey: onClickKey,
-      placeholder: !this.props.logarithms
-    }), /*#__PURE__*/React__namespace.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.x,
-      onClickKey: onClickKey,
-      style: {
-        gridColumn: 5
-      }
-    }), /*#__PURE__*/React__namespace.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.FRAC_INCLUSIVE,
-      onClickKey: onClickKey,
-      style: {
-        gridColumn: 6
-      }
-    }), /*#__PURE__*/React__namespace.createElement(BasicRelations, {
-      onClickKey: onClickKey,
-      placeholder: !this.props.basicRelations
-    }), /*#__PURE__*/React__namespace.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.PI,
-      onClickKey: onClickKey,
-      style: {
-        gridColumn: 5
-      }
-    }), /*#__PURE__*/React__namespace.createElement(KeypadActionButton, {
-      keyConfig: KeyConfigs.BACKSPACE,
-      style: {
-        gridColumn: 6
-      },
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React__namespace.createElement(AdvancedRelations, {
-      onClickKey: onClickKey,
-      placeholder: !this.props.advancedRelations
-    }), /*#__PURE__*/React__namespace.createElement(KeypadActionButton, {
-      keyConfig: KeyConfigs.DISMISS,
-      style: {
-        gridColumn: "6"
-      },
-      onClickKey: onClickKey
-    }));
-  }
 }
 
 function allPages(props) {
   var _props$extraKeys;
   const pages = ["Numbers"];
-  if ((_props$extraKeys = props.extraKeys) !== null && _props$extraKeys !== void 0 && _props$extraKeys.length) {
-    pages.push("Extras");
-  }
   if (
   // OperatorsButtonSets
   props.preAlgebra || props.logarithms || props.basicRelations || props.advancedRelations) {
@@ -8752,38 +8587,63 @@ function allPages(props) {
   if (props.trigonometry) {
     pages.push("Geometry");
   }
+  if ((_props$extraKeys = props.extraKeys) !== null && _props$extraKeys !== void 0 && _props$extraKeys.length) {
+    pages.push("Extras");
+  }
   return pages;
 }
-class Keypad extends React__namespace.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      selectedPage: "Numbers"
-    });
-  }
-  render() {
-    const {
-      selectedPage
-    } = this.state;
-    const availablePages = allPages(this.props);
-    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(Tabbar, {
-      items: availablePages,
-      selectedItem: selectedPage,
-      onSelectItem: tabbarItem => {
-        this.setState({
-          selectedPage: tabbarItem
-        });
-      },
-      style: styles.tabbar
-    }), selectedPage === "Numbers" && /*#__PURE__*/React__namespace.createElement(NumbersPage, this.props), selectedPage === "Extras" && /*#__PURE__*/React__namespace.createElement(ExtrasPage, this.props), selectedPage === "Operators" && /*#__PURE__*/React__namespace.createElement(OperatorsPage, this.props), selectedPage === "Geometry" && /*#__PURE__*/React__namespace.createElement(GeometryPage, this.props));
-  }
+function Keypad(props) {
+  const [selectedPage, setSelectedPage] = React__namespace.useState("Numbers");
+  const availablePages = allPages(props);
+  const {
+    onClickKey,
+    extraKeys = [],
+    multiplicationDot,
+    divisionKey,
+    preAlgebra,
+    logarithms,
+    basicRelations,
+    advancedRelations
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(Tabbar, {
+    items: availablePages,
+    selectedItem: selectedPage,
+    onSelectItem: tabbarItem => {
+      setSelectedPage(tabbarItem);
+    },
+    style: styles.tabbar
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles.grid
+  }, selectedPage === "Numbers" && /*#__PURE__*/React__namespace.createElement(NumbersPage, {
+    onClickKey: onClickKey
+  }), selectedPage === "Extras" && /*#__PURE__*/React__namespace.createElement(ExtrasPage, {
+    onClickKey: onClickKey,
+    extraKeys: extraKeys
+  }), selectedPage === "Operators" && /*#__PURE__*/React__namespace.createElement(OperatorsPage, {
+    onClickKey: onClickKey,
+    preAlgebra: preAlgebra,
+    logarithms: logarithms,
+    basicRelations: basicRelations,
+    advancedRelations: advancedRelations
+  }), selectedPage === "Geometry" && /*#__PURE__*/React__namespace.createElement(GeometryPage, {
+    onClickKey: onClickKey
+  }), /*#__PURE__*/React__namespace.createElement(SharedKeys, {
+    onClickKey: onClickKey,
+    multiplicationDot: multiplicationDot,
+    divisionKey: divisionKey
+  })));
 }
-_defineProperty(Keypad, "defaultProps", {
-  extraKeys: []
-});
 const styles = aphrodite.StyleSheet.create({
   tabbar: {
     background: Color__default["default"].white
+  },
+  grid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(6, 1fr)",
+    gridTemplateRows: "repeat(4, 1fr)",
+    backgroundColor: "#DBDCDD",
+    maxHeight: 200,
+    maxWidth: 300
   }
 });
 
@@ -8793,6 +8653,8 @@ exports.Keypad = Keypad;
 exports.KeypadInput = MathInput;
 exports.KeypadType = KeypadType;
 exports.LegacyKeypad = ProvidedKeypad;
+exports.createMathField = createMathField;
 exports.keyTranslator = keyToMathquillMap;
 exports.keypadElementPropType = keypadElementPropType;
+exports.mathQuillInstance = mathQuillInstance;
 //# sourceMappingURL=index.js.map