@khanacademy/math-input 4.1.1 → 4.3.0

package/dist/es/index.js

@@ -4,7 +4,6 @@ import { getDecimalSeparator } from '@khanacademy/wonder-blocks-i18n';
 import { entries } from '@khanacademy/wonder-stuff-core';
 import { StyleSheet, css } from 'aphrodite';
 import * as React from 'react';
-import React__default from 'react';
 import ReactDOM from 'react-dom';
 import $ from 'jquery';
 import MathQuill from 'mathquill';
@@ -341,273 +340,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 = getDecimalSeparator() === "," ? DecimalSeparator.COMMA : DecimalSeparator.PERIOD;
-
-var MQ = MathQuill.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, type = 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.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";
@@ -678,7 +456,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);
@@ -738,7 +516,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
@@ -746,7 +524,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)) {
@@ -759,7 +537,7 @@ function maybeFindCommand(initialNode) {
         endNode = node;
         break;
       }
-      node = node[MQ.R];
+      node = node[mathQuillInstance.R];
     }
     if (validCommands.includes(name)) {
       return {
@@ -785,18 +563,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
@@ -816,57 +594,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);
@@ -885,7 +614,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) {
@@ -904,13 +633,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");
@@ -923,14 +652,14 @@ function handleBackspaceInLogIndex(mathField, cursor) {
     const command = maybeFindCommandBeforeParens(grandparent);
     cursor.insLeftOf(command == null ? 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.
@@ -949,8 +678,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
@@ -996,7 +725,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.
@@ -1009,12 +738,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;
     }
   }
@@ -1052,7 +781,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)) {
@@ -1079,6 +808,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 = 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) {
@@ -1087,7 +943,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)");
@@ -1153,11 +1009,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!
@@ -1186,7 +1042,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;
@@ -1198,26 +1054,46 @@ function handleJumpOut(mathField, key) {
       throw new Error(`Attempted to 'Jump Out' from node, but found no ` + `appropriate cursor context: ${context}`);
   }
 }
-
+
+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, type = 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(`\\${command}\\left(\\right)`);
     mathField.keystroke("Left");
   };
 }
-const customKeyTranslator = _extends({}, 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,
@@ -1230,7 +1106,157 @@ const customKeyTranslator = _extends({}, keyToMathquillMap, {
   LN: buildNormalFunctionCallback("ln"),
   SIN: buildNormalFunctionCallback("sin"),
   COS: buildNormalFunctionCallback("cos"),
-  TAN: buildNormalFunctionCallback("tan")
+  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
+  },
+
+  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 = _extends({}, 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
 });
 
 /**
@@ -1239,17 +1265,19 @@ const customKeyTranslator = _extends({}, keyToMathquillMap, {
  * from MathQuill changes.
  */
 class MathWrapper {
-  // MathQuill input
+  // MathQuill MathField input
 
-  constructor(element, options = {}, callbacks = {}) {
+  constructor(element, callbacks = {}) {
     this.mathField = void 0;
     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.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;
   }
@@ -1279,7 +1307,7 @@ class MathWrapper {
    */
   pressKey(key) {
     const cursor = this.getCursor();
-    const translator = customKeyTranslator[key];
+    const translator = mobileKeyTranslator[key];
     if (translator) {
       translator(this.mathField, key);
     }
@@ -1327,7 +1355,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);
@@ -1898,7 +1926,7 @@ class MathInput extends React.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
@@ -7244,140 +7272,58 @@ class ProvidedKeypad extends React.Component {
     super(props);
     this.store = void 0;
     this.activate = () => {
-      this.store.dispatch(activateKeypad());
-    };
-    this.dismiss = () => {
-      this.store.dispatch(dismissKeypad());
-    };
-    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());
-    };
-    this.setCursor = cursor => {
-      this.store.dispatch(setCursor(cursor));
-    };
-    this.setKeyHandler = keyHandler => {
-      this.store.dispatch(setKeyHandler(keyHandler));
-    };
-    this.getDOMNode = () => {
-      return ReactDOM.findDOMNode(this);
-    };
-    this.store = createStore();
-  }
-  render() {
-    const {
-      onElementMounted,
-      onDismiss,
-      style
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Provider, {
-      store: this.store
-    }, /*#__PURE__*/React.createElement(KeypadContainer$1, {
-      onElementMounted: element => {
-        // Append the dispatch methods that we want to expose
-        // externally to the returned React element.
-        const elementWithDispatchMethods = _extends({}, element, {
-          activate: this.activate,
-          dismiss: this.dismiss,
-          configure: this.configure,
-          setCursor: this.setCursor,
-          setKeyHandler: this.setKeyHandler,
-          getDOMNode: this.getDOMNode
-        });
-        onElementMounted && onElementMounted(elementWithDispatchMethods);
-      },
-      onDismiss: onDismiss,
-      style: style
-    }));
-  }
-}
-
-const styles$1 = StyleSheet.create({
-  base: {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    boxShadow: "0px 1px 0px rgba(33, 36, 44, 0.32)",
-    boxSizing: "border-box",
-    background: Color.white,
-    borderRadius: 4,
-    border: `1px solid transparent`,
-    flex: 1,
-    minHeight: 42,
-    minWidth: 42,
-    padding: 1
-  },
-  hovered: {
-    border: `1px solid ${Color.blue}`,
-    padding: 1,
-    boxShadow: "none"
-  },
-  focused: {
-    border: `2px solid ${Color.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)), ${Color.white}`,
-    boxShadow: "none"
-  },
-  outerBoxBase: {
-    padding: 1,
-    height: "100%",
-    width: "100%",
-    boxSizing: "border-box",
-    borderRadius: 7,
-    border: "2px solid transparent"
-  },
-  outerBoxHover: {
-    border: `2px solid ${Color.blue}`
-  },
-  outerBoxPressed: {
-    border: "2px solid #1B50B3"
-  },
-  clickable: {
-    width: "100%",
-    height: "100%",
-    boxSizing: "border-box"
+      this.store.dispatch(activateKeypad());
+    };
+    this.dismiss = () => {
+      this.store.dispatch(dismissKeypad());
+    };
+    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());
+    };
+    this.setCursor = cursor => {
+      this.store.dispatch(setCursor(cursor));
+    };
+    this.setKeyHandler = keyHandler => {
+      this.store.dispatch(setKeyHandler(keyHandler));
+    };
+    this.getDOMNode = () => {
+      return ReactDOM.findDOMNode(this);
+    };
+    this.store = createStore();
   }
-});
-class Button extends React.Component {
   render() {
     const {
-      onPress,
-      ariaLabel,
-      children,
-      style,
-      tintColor
+      onElementMounted,
+      onDismiss,
+      style
     } = this.props;
-    return /*#__PURE__*/React.createElement(View$1, {
+    return /*#__PURE__*/React.createElement(Provider, {
+      store: this.store
+    }, /*#__PURE__*/React.createElement(KeypadContainer$1, {
+      onElementMounted: element => {
+        // Append the dispatch methods that we want to expose
+        // externally to the returned React element.
+        const elementWithDispatchMethods = _extends({}, element, {
+          activate: this.activate,
+          dismiss: this.dismiss,
+          configure: this.configure,
+          setCursor: this.setCursor,
+          setKeyHandler: this.setKeyHandler,
+          getDOMNode: this.getDOMNode
+        });
+        onElementMounted && onElementMounted(elementWithDispatchMethods);
+      },
+      onDismiss: onDismiss,
       style: style
-    }, /*#__PURE__*/React.createElement(Clickable, {
-      onClick: onPress,
-      style: styles$1.clickable,
-      "aria-label": ariaLabel
-    }, ({
-      hovered,
-      focused,
-      pressed
-    }) => {
-      return /*#__PURE__*/React.createElement(View$1, {
-        style: [styles$1.outerBoxBase, hovered && styles$1.outerBoxHover, pressed && styles$1.outerBoxPressed]
-      }, /*#__PURE__*/React.createElement(View$1, {
-        style: [styles$1.base, tintColor != null ? {
-          background: tintColor
-        } : undefined, hovered && styles$1.hovered, focused && styles$1.focused, pressed && styles$1.pressed]
-      }, children));
     }));
   }
 }
@@ -8140,386 +8086,300 @@ function ButtonAsset({
   }
 }
 
-const KeypadPageContainer = ({
-  children
-}) => /*#__PURE__*/React.createElement(View$1, {
-  style: {
-    backgroundColor: "#DBDCDD",
-    width: "100%",
-    height: 192,
-    display: "grid",
-    gridTemplateColumns: "repeat(6, 1fr)",
-    gridTemplateRows: "repeat(4, 1fr)"
-  }
-}, children);
 const KeypadButton = ({
+  coord,
   keyConfig,
   onClickKey,
-  tintColor,
-  style
-}) => /*#__PURE__*/React.createElement(Button, {
-  onPress: () => onClickKey(keyConfig.id),
-  tintColor: tintColor,
-  style: style,
-  ariaLabel: keyConfig.id
-}, /*#__PURE__*/React.createElement(ButtonAsset, {
-  id: keyConfig.id
-}));
-const SecondaryKeypadButton = ({
-  keyConfig,
-  onClickKey,
-  style
-}) => /*#__PURE__*/React.createElement(KeypadButton, {
-  keyConfig: keyConfig,
-  onClickKey: onClickKey,
-  style: style,
-  tintColor: "#F6F6F7"
-});
-const KeypadActionButton = ({
-  keyConfig,
-  onClickKey,
-  style
-}) => /*#__PURE__*/React.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 = ({
-  count: _count = 1
-}) => /*#__PURE__*/React.createElement(React.Fragment, null, Array.from({
-  length: _count
-}).map((_, index) => /*#__PURE__*/React.createElement(View$1, {
-  key: index,
-  style: {
+  style,
+  secondary,
+  action
+}) => {
+  const tintColor = secondary ? "#F6F6F7" : action ? "#DBDCDD" : undefined;
+  return /*#__PURE__*/React.createElement(View$1, {
+    style: _extends({
+      gridColumn: coord[0] + 1,
+      gridRow: coord[1] + 1
+    }, style)
+  }, /*#__PURE__*/React.createElement(Clickable, {
+    onClick: () => onClickKey(keyConfig.id),
+    style: styles$1.clickable,
+    "aria-label": keyConfig.ariaLabel
+  }, ({
+    hovered,
+    focused,
+    pressed
+  }) => {
+    return /*#__PURE__*/React.createElement(View$1, {
+      style: [styles$1.outerBoxBase, hovered && styles$1.outerBoxHover, pressed && styles$1.outerBoxPressed]
+    }, /*#__PURE__*/React.createElement(View$1, {
+      style: [styles$1.base, tintColor != null ? {
+        background: tintColor
+      } : undefined, hovered && styles$1.hovered, focused && styles$1.focused, pressed && styles$1.pressed]
+    }, /*#__PURE__*/React.createElement(ButtonAsset, {
+      id: keyConfig.id
+    })));
+  }));
+};
+const styles$1 = StyleSheet.create({
+  base: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    boxShadow: "0px 1px 0px rgba(33, 36, 44, 0.32)",
+    boxSizing: "border-box",
+    background: Color.white,
+    borderRadius: 4,
+    border: `1px solid transparent`,
+    flex: 1,
+    minHeight: 42,
+    minWidth: 42,
+    padding: 1
+  },
+  hovered: {
+    border: `1px solid ${Color.blue}`,
+    padding: 1,
+    boxShadow: "none"
+  },
+  focused: {
+    border: `2px solid ${Color.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)), ${Color.white}`,
+    boxShadow: "none"
+  },
+  outerBoxBase: {
+    padding: 1,
     height: "100%",
     width: "100%",
     boxSizing: "border-box",
     borderRadius: 7,
-    border: "4px solid transparent"
-  }
-}, /*#__PURE__*/React.createElement(View$1, {
-  style: {
-    background: "rgba(33, 36, 44, 0.04)",
+    border: "2px solid transparent"
+  },
+  outerBoxHover: {
+    border: `2px solid ${Color.blue}`
+  },
+  outerBoxPressed: {
+    border: "2px solid #1B50B3"
+  },
+  clickable: {
     width: "100%",
     height: "100%",
-    borderRadius: 4,
-    border: `1px solid transparent`
+    boxSizing: "border-box"
   }
-}))));
+});
 
-class ExtrasPage extends React.Component {
-  render() {
-    const {
-      extraKeys,
-      onClickKey
-    } = this.props;
-    return /*#__PURE__*/React.createElement(KeypadPageContainer, null, extraKeys.map(key => /*#__PURE__*/React.createElement(KeypadButton, {
+const columns = 4;
+function ExtrasPage(props) {
+  const {
+    extraKeys,
+    onClickKey
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, extraKeys.map((key, i) => {
+    // Map 1D array to Cartesian coordinates
+    const coordX = i % columns;
+    const coordY = i / columns;
+    return /*#__PURE__*/React.createElement(KeypadButton, {
       key: key,
       keyConfig: KeyConfigs[key],
-      onClickKey: onClickKey
-    })));
-  }
+      onClickKey: onClickKey,
+      coord: [coordX, coordY]
+    });
+  }));
 }
 
-class GeometryPage extends React.Component {
-  render() {
-    const {
-      onClickKey
-    } = this.props;
-    return /*#__PURE__*/React.createElement(KeypadPageContainer, null, /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.SIN,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.COS,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.TAN,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.LEFT_PAREN,
-      onClickKey: onClickKey,
-      style: {
-        gridColumn: 5
-      }
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.RIGHT_PAREN,
-      onClickKey: onClickKey,
-      style: {
-        gridColumn: 6
-      }
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.x,
-      onClickKey: onClickKey,
-      style: {
-        gridColumn: 5
-      }
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.FRAC_INCLUSIVE,
-      onClickKey: onClickKey,
-      style: {
-        gridColumn: 6
-      }
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.PI,
-      onClickKey: onClickKey,
-      style: {
-        gridColumn: 5
-      }
-    }), /*#__PURE__*/React.createElement(KeypadActionButton, {
-      keyConfig: KeyConfigs.BACKSPACE,
-      style: {
-        gridColumn: "6"
-      },
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(KeypadActionButton, {
-      keyConfig: KeyConfigs.DISMISS,
-      style: {
-        gridColumn: "6"
-      },
-      onClickKey: onClickKey
-    }));
-  }
+function GeometryPage(props) {
+  const {
+    onClickKey
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.SIN,
+    onClickKey: onClickKey,
+    coord: [0, 0]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.COS,
+    onClickKey: onClickKey,
+    coord: [1, 0]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.TAN,
+    onClickKey: onClickKey,
+    coord: [2, 0]
+  }));
 }
 
-class NumbersPage extends React.Component {
-  render() {
-    const {
-      onClickKey
-    } = this.props;
-    return /*#__PURE__*/React.createElement(KeypadPageContainer, null, /*#__PURE__*/React.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_7,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_8,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_9,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.DIVIDE,
-      style: this.props.divisionKey ? {
-        gridColumn: "4",
-        gridRow: "1"
-      } : {
-        display: "none"
-      },
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: this.props.multiplicationDot ? KeyConfigs.CDOT : KeyConfigs.TIMES,
-      style: this.props.divisionKey && {
-        gridColumn: "4",
-        gridRow: "2"
-      },
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.LEFT_PAREN,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.RIGHT_PAREN,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_4,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_5,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_6,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.MINUS,
-      style: this.props.divisionKey && {
-        gridColumn: "4",
-        gridRow: "3"
-      },
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.FRAC_INCLUSIVE,
-      onClickKey: onClickKey,
-      style: {
-        gridColumn: "5 / 7"
-      }
-    }), /*#__PURE__*/React.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_1,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_2,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_3,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.PLUS,
-      style: this.props.divisionKey ? {
-        gridColumn: "4",
-        gridRow: "4"
-      } : {
-        gridColumn: "4",
-        gridRowStart: "3",
-        gridRowEnd: "5"
-      },
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(KeypadActionButton, {
-      keyConfig: KeyConfigs.BACKSPACE,
-      style: {
-        gridColumn: "6"
-      },
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NUM_0,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.DECIMAL,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(KeypadButton, {
-      keyConfig: KeyConfigs.NEGATIVE,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(KeypadActionButton, {
-      keyConfig: KeyConfigs.DISMISS,
-      style: {
-        gridColumn: "6"
-      },
-      onClickKey: onClickKey
-    }));
-  }
+function NumbersPage(props) {
+  const {
+    onClickKey
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_7,
+    onClickKey: onClickKey,
+    coord: [0, 0]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_8,
+    onClickKey: onClickKey,
+    coord: [1, 0]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_9,
+    onClickKey: onClickKey,
+    coord: [2, 0]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_4,
+    onClickKey: onClickKey,
+    coord: [0, 1]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_5,
+    onClickKey: onClickKey,
+    coord: [1, 1]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_6,
+    onClickKey: onClickKey,
+    coord: [2, 1]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_1,
+    onClickKey: onClickKey,
+    coord: [0, 2]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_2,
+    onClickKey: onClickKey,
+    coord: [1, 2]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_3,
+    onClickKey: onClickKey,
+    coord: [2, 2]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NUM_0,
+    onClickKey: onClickKey,
+    coord: [0, 3]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.DECIMAL,
+    onClickKey: onClickKey,
+    coord: [1, 3]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NEGATIVE,
+    onClickKey: onClickKey,
+    coord: [2, 3]
+  }));
 }
 
-const AdvancedRelations = ({
-  onClickKey,
-  placeholder
-}) => placeholder ? /*#__PURE__*/React__default.createElement(PlaceHolderButtons, {
-  count: 3
-}) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SecondaryKeypadButton, {
-  keyConfig: KeyConfigs.NEQ,
-  onClickKey: onClickKey
-}), /*#__PURE__*/React__default.createElement(SecondaryKeypadButton, {
-  keyConfig: KeyConfigs.LEQ,
-  onClickKey: onClickKey
-}), /*#__PURE__*/React__default.createElement(SecondaryKeypadButton, {
-  keyConfig: KeyConfigs.GEQ,
-  onClickKey: onClickKey
-}));
-
-const BasicRelations = ({
-  onClickKey,
-  placeholder
-}) => placeholder ? /*#__PURE__*/React__default.createElement(PlaceHolderButtons, {
-  count: 3
-}) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SecondaryKeypadButton, {
-  keyConfig: KeyConfigs.EQUAL,
-  onClickKey: onClickKey
-}), /*#__PURE__*/React__default.createElement(SecondaryKeypadButton, {
-  keyConfig: KeyConfigs.LT,
-  onClickKey: onClickKey
-}), /*#__PURE__*/React__default.createElement(SecondaryKeypadButton, {
-  keyConfig: KeyConfigs.GT,
-  onClickKey: onClickKey
-}));
-
-const Logarithms = ({
-  onClickKey,
-  placeholder
-}) => placeholder ? /*#__PURE__*/React__default.createElement(PlaceHolderButtons, {
-  count: 3
-}) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SecondaryKeypadButton, {
-  keyConfig: KeyConfigs.LOG,
-  onClickKey: onClickKey
-}), /*#__PURE__*/React__default.createElement(SecondaryKeypadButton, {
-  keyConfig: KeyConfigs.LOG_N,
-  onClickKey: onClickKey
-}), /*#__PURE__*/React__default.createElement(SecondaryKeypadButton, {
-  keyConfig: KeyConfigs.LN,
-  onClickKey: onClickKey
-}));
-
-const PreAlgebra = ({
-  onClickKey,
-  placeholder
-}) => placeholder ? /*#__PURE__*/React__default.createElement(PlaceHolderButtons, {
-  count: 4
-}) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SecondaryKeypadButton, {
-  keyConfig: KeyConfigs.EXP_2,
-  onClickKey: onClickKey
-}), /*#__PURE__*/React__default.createElement(SecondaryKeypadButton, {
-  keyConfig: KeyConfigs.EXP,
-  onClickKey: onClickKey
-}), /*#__PURE__*/React__default.createElement(SecondaryKeypadButton, {
-  keyConfig: KeyConfigs.SQRT,
-  onClickKey: onClickKey
-}), /*#__PURE__*/React__default.createElement(SecondaryKeypadButton, {
-  keyConfig: KeyConfigs.RADICAL,
-  onClickKey: onClickKey
-}));
-
-class OperatorsPage extends React.Component {
-  render() {
-    const {
-      onClickKey
-    } = this.props;
-    return /*#__PURE__*/React.createElement(KeypadPageContainer, null, /*#__PURE__*/React.createElement(PreAlgebra, {
-      onClickKey: onClickKey,
-      placeholder: !this.props.preAlgebra
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.LEFT_PAREN,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.RIGHT_PAREN,
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(Logarithms, {
-      onClickKey: onClickKey,
-      placeholder: !this.props.logarithms
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.x,
-      onClickKey: onClickKey,
-      style: {
-        gridColumn: 5
-      }
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.FRAC_INCLUSIVE,
-      onClickKey: onClickKey,
-      style: {
-        gridColumn: 6
-      }
-    }), /*#__PURE__*/React.createElement(BasicRelations, {
-      onClickKey: onClickKey,
-      placeholder: !this.props.basicRelations
-    }), /*#__PURE__*/React.createElement(SecondaryKeypadButton, {
-      keyConfig: KeyConfigs.PI,
-      onClickKey: onClickKey,
-      style: {
-        gridColumn: 5
-      }
-    }), /*#__PURE__*/React.createElement(KeypadActionButton, {
-      keyConfig: KeyConfigs.BACKSPACE,
-      style: {
-        gridColumn: 6
-      },
-      onClickKey: onClickKey
-    }), /*#__PURE__*/React.createElement(AdvancedRelations, {
-      onClickKey: onClickKey,
-      placeholder: !this.props.advancedRelations
-    }), /*#__PURE__*/React.createElement(KeypadActionButton, {
-      keyConfig: KeyConfigs.DISMISS,
-      style: {
-        gridColumn: "6"
-      },
-      onClickKey: onClickKey
-    }));
-  }
+function OperatorsPage(props) {
+  const {
+    onClickKey,
+    preAlgebra,
+    logarithms,
+    basicRelations,
+    advancedRelations
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, preAlgebra && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.EXP_2,
+    onClickKey: onClickKey,
+    coord: [0, 0]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.EXP,
+    onClickKey: onClickKey,
+    coord: [1, 0]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.SQRT,
+    onClickKey: onClickKey,
+    coord: [2, 0]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.RADICAL,
+    onClickKey: onClickKey,
+    coord: [3, 0]
+  })), logarithms && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.LOG,
+    onClickKey: onClickKey,
+    coord: [0, 1]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.LOG_N,
+    onClickKey: onClickKey,
+    coord: [1, 1]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.LN,
+    onClickKey: onClickKey,
+    coord: [2, 1]
+  })), basicRelations && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.EQUAL,
+    onClickKey: onClickKey,
+    coord: [0, 2]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.LT,
+    onClickKey: onClickKey,
+    coord: [1, 2]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.GT,
+    onClickKey: onClickKey,
+    coord: [2, 2]
+  })), advancedRelations && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.NEQ,
+    onClickKey: onClickKey,
+    coord: [0, 3]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.LEQ,
+    onClickKey: onClickKey,
+    coord: [1, 3]
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.GEQ,
+    onClickKey: onClickKey,
+    coord: [2, 3]
+  })));
+}
+
+function SharedKeys(props) {
+  const {
+    onClickKey,
+    divisionKey,
+    multiplicationDot
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.PLUS,
+    onClickKey: onClickKey,
+    coord: [4, 0],
+    secondary: true
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.MINUS,
+    onClickKey: onClickKey,
+    coord: [5, 0],
+    secondary: true
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: multiplicationDot ? KeyConfigs.CDOT : KeyConfigs.TIMES,
+    onClickKey: onClickKey,
+    coord: [4, 1],
+    secondary: true
+  }), divisionKey && /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.DIVIDE,
+    onClickKey: onClickKey,
+    coord: [5, 1],
+    secondary: true
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.LEFT_PAREN,
+    onClickKey: onClickKey,
+    coord: [4, 2],
+    secondary: true
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.RIGHT_PAREN,
+    onClickKey: onClickKey,
+    coord: [5, 2],
+    secondary: true
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.FRAC_INCLUSIVE,
+    onClickKey: onClickKey,
+    coord: [4, 3],
+    secondary: true
+  }), /*#__PURE__*/React.createElement(KeypadButton, {
+    keyConfig: KeyConfigs.BACKSPACE,
+    onClickKey: onClickKey,
+    coord: [5, 3],
+    action: true
+  }));
 }
 
 function allPages(props) {
   var _props$extraKeys;
   const pages = ["Numbers"];
-  if ((_props$extraKeys = props.extraKeys) != null && _props$extraKeys.length) {
-    pages.push("Extras");
-  }
   if (
   // OperatorsButtonSets
   props.preAlgebra || props.logarithms || props.basicRelations || props.advancedRelations) {
@@ -8528,40 +8388,65 @@ function allPages(props) {
   if (props.trigonometry) {
     pages.push("Geometry");
   }
+  if ((_props$extraKeys = props.extraKeys) != null && _props$extraKeys.length) {
+    pages.push("Extras");
+  }
   return pages;
 }
-class Keypad extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      selectedPage: "Numbers"
-    };
-  }
-  render() {
-    const {
-      selectedPage
-    } = this.state;
-    const availablePages = allPages(this.props);
-    return /*#__PURE__*/React.createElement(View$1, null, /*#__PURE__*/React.createElement(Tabbar, {
-      items: availablePages,
-      selectedItem: selectedPage,
-      onSelectItem: tabbarItem => {
-        this.setState({
-          selectedPage: tabbarItem
-        });
-      },
-      style: styles.tabbar
-    }), selectedPage === "Numbers" && /*#__PURE__*/React.createElement(NumbersPage, this.props), selectedPage === "Extras" && /*#__PURE__*/React.createElement(ExtrasPage, this.props), selectedPage === "Operators" && /*#__PURE__*/React.createElement(OperatorsPage, this.props), selectedPage === "Geometry" && /*#__PURE__*/React.createElement(GeometryPage, this.props));
-  }
+function Keypad(props) {
+  const [selectedPage, setSelectedPage] = React.useState("Numbers");
+  const availablePages = allPages(props);
+  const {
+    onClickKey,
+    extraKeys = [],
+    multiplicationDot,
+    divisionKey,
+    preAlgebra,
+    logarithms,
+    basicRelations,
+    advancedRelations
+  } = props;
+  return /*#__PURE__*/React.createElement(View$1, null, /*#__PURE__*/React.createElement(Tabbar, {
+    items: availablePages,
+    selectedItem: selectedPage,
+    onSelectItem: tabbarItem => {
+      setSelectedPage(tabbarItem);
+    },
+    style: styles.tabbar
+  }), /*#__PURE__*/React.createElement(View$1, {
+    style: styles.grid
+  }, selectedPage === "Numbers" && /*#__PURE__*/React.createElement(NumbersPage, {
+    onClickKey: onClickKey
+  }), selectedPage === "Extras" && /*#__PURE__*/React.createElement(ExtrasPage, {
+    onClickKey: onClickKey,
+    extraKeys: extraKeys
+  }), selectedPage === "Operators" && /*#__PURE__*/React.createElement(OperatorsPage, {
+    onClickKey: onClickKey,
+    preAlgebra: preAlgebra,
+    logarithms: logarithms,
+    basicRelations: basicRelations,
+    advancedRelations: advancedRelations
+  }), selectedPage === "Geometry" && /*#__PURE__*/React.createElement(GeometryPage, {
+    onClickKey: onClickKey
+  }), /*#__PURE__*/React.createElement(SharedKeys, {
+    onClickKey: onClickKey,
+    multiplicationDot: multiplicationDot,
+    divisionKey: divisionKey
+  })));
 }
-Keypad.defaultProps = {
-  extraKeys: []
-};
 const styles = StyleSheet.create({
   tabbar: {
     background: Color.white
+  },
+  grid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(6, 1fr)",
+    gridTemplateRows: "repeat(4, 1fr)",
+    backgroundColor: "#DBDCDD",
+    maxHeight: 200,
+    maxWidth: 300
   }
 });
 
-export { CursorContext, KeyConfigs, Keypad, MathInput as KeypadInput, KeypadType, ProvidedKeypad as LegacyKeypad, keyToMathquillMap as keyTranslator, keypadElementPropType };
+export { CursorContext, KeyConfigs, Keypad, MathInput as KeypadInput, KeypadType, ProvidedKeypad as LegacyKeypad, createMathField, keyToMathquillMap as keyTranslator, keypadElementPropType, mathQuillInstance };
 //# sourceMappingURL=index.js.map