@khanacademy/math-input 4.2.0 → 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);
@@ -7524,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
@@ -8366,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.ariaLabel
-  }, /*#__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) {
@@ -8781,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
   }
 });