@khanacademy/math-input 4.0.0 → 4.1.1

package/dist/index.js

@@ -122,7 +122,7 @@ class Text extends React__namespace.Component {
       numberOfLines,
       style
     } = this.props;
-    const className = aphrodite.css(styles$g.initial, ...(Array.isArray(style) ? style : [style]), numberOfLines === 1 && styles$g.singleLineStyle);
+    const className = aphrodite.css(styles$h.initial, ...(Array.isArray(style) ? style : [style]), numberOfLines === 1 && styles$h.singleLineStyle);
     return /*#__PURE__*/React__namespace.createElement("span", {
       className: className,
       style: this.props.dynamicStyle
@@ -131,7 +131,7 @@ class Text extends React__namespace.Component {
 }
 
 // https://github.com/necolas/react-native-web/blob/master/src/components/Text/index.js
-const styles$g = aphrodite.StyleSheet.create({
+const styles$h = aphrodite.StyleSheet.create({
   initial: {
     color: "inherit",
     display: "inline",
@@ -2108,7 +2108,7 @@ class MathInput extends React__namespace.Component {
     // to the open the keyboard, and then remove the second half of this label.
     const ariaLabel = i18n__namespace._("Math input box") + " " + i18n__namespace._("Tap with one or two fingers to open keyboard");
     return /*#__PURE__*/React__namespace.createElement(View, {
-      style: styles$f.input,
+      style: styles$g.input,
       onTouchStart: this.handleTouchStart,
       onTouchMove: this.handleTouchMove,
       onTouchEnd: this.handleTouchEnd,
@@ -2154,7 +2154,7 @@ const numeralHeightPx = 20;
 const totalDesiredPadding = 12;
 const minHeightPx = numeralHeightPx + totalDesiredPadding * 2;
 const minWidthPx = 64;
-const styles$f = aphrodite.StyleSheet.create({
+const styles$g = aphrodite.StyleSheet.create({
   input: {
     position: "relative",
     display: "inline-block",
@@ -2974,7 +2974,7 @@ class CornerDecal extends React__namespace.Component {
     const {
       style
     } = this.props;
-    const containerStyle = [styles$e.container, ...(Array.isArray(style) ? style : [style])];
+    const containerStyle = [styles$f.container, ...(Array.isArray(style) ? style : [style])];
     return /*#__PURE__*/React__namespace.createElement(View, {
       style: containerStyle
     }, /*#__PURE__*/React__namespace.createElement("svg", {
@@ -2990,7 +2990,7 @@ class CornerDecal extends React__namespace.Component {
 }
 
 const triangleSizePx = 7;
-const styles$e = aphrodite.StyleSheet.create({
+const styles$f = aphrodite.StyleSheet.create({
   container: {
     position: "absolute",
     top: 0,
@@ -3060,13 +3060,13 @@ class MathIcon extends React__namespace.Component {
     const {
       style
     } = this.props;
-    const containerStyle = [row$7, centered$4, styles$d.size, styles$d.base, ...(Array.isArray(style) ? style : [style])];
+    const containerStyle = [row$7, centered$4, styles$e.size, styles$e.base, ...(Array.isArray(style) ? style : [style])];
     return /*#__PURE__*/React__namespace.createElement(View, {
       style: containerStyle
     });
   }
 }
-const styles$d = aphrodite.StyleSheet.create({
+const styles$e = aphrodite.StyleSheet.create({
   size: {
     height: iconSizeHeightPx,
     width: iconSizeWidthPx
@@ -4249,13 +4249,13 @@ class TextIcon extends React__namespace.Component {
       character,
       style
     } = this.props;
-    const containerStyle = [row$6, centered$3, styles$c.size, styles$c.base, ...(Array.isArray(style) ? style : [style])];
+    const containerStyle = [row$6, centered$3, styles$d.size, styles$d.base, ...(Array.isArray(style) ? style : [style])];
     return /*#__PURE__*/React__namespace.createElement(View, {
       style: containerStyle
     }, /*#__PURE__*/React__namespace.createElement(Text, null, character));
   }
 }
-const styles$c = aphrodite.StyleSheet.create({
+const styles$d = aphrodite.StyleSheet.create({
   size: {
     height: iconSizeHeightPx,
     width: iconSizeWidthPx
@@ -4278,7 +4278,7 @@ class Icon extends React__namespace.PureComponent {
       icon,
       style
     } = this.props;
-    const styleWithFocus = [focused ? styles$b.focused : styles$b.unfocused, ...(Array.isArray(style) ? style : [style])];
+    const styleWithFocus = [focused ? styles$c.focused : styles$c.unfocused, ...(Array.isArray(style) ? style : [style])];
     switch (icon.type) {
       case IconType.MATH:
         return /*#__PURE__*/React__namespace.createElement(MathIcon, {
@@ -4304,7 +4304,7 @@ class Icon extends React__namespace.PureComponent {
     }
   }
 }
-const styles$b = aphrodite.StyleSheet.create({
+const styles$c = aphrodite.StyleSheet.create({
   unfocused: {
     color: unfocusedColor
   },
@@ -4346,19 +4346,19 @@ class MultiSymbolGrid extends React__namespace.Component {
         focused: focused
       });
     } else {
-      const primaryIconStyle = styles$a.base;
-      const secondaryIconStyle = [styles$a.base, styles$a.secondary];
+      const primaryIconStyle = styles$b.base;
+      const secondaryIconStyle = [styles$b.base, styles$b.secondary];
       if (icons.length === 2) {
         return /*#__PURE__*/React__namespace.createElement(View, {
-          style: [row$5, styles$a.size]
+          style: [row$5, styles$b.size]
         }, /*#__PURE__*/React__namespace.createElement(View, {
-          style: [column$3, centered$2, fullWidth$3, styles$a.middleLeft]
+          style: [column$3, centered$2, fullWidth$3, styles$b.middleLeft]
         }, /*#__PURE__*/React__namespace.createElement(Icon, {
           style: primaryIconStyle,
           icon: icons[0],
           focused: focused
         })), /*#__PURE__*/React__namespace.createElement(View, {
-          style: [column$3, centered$2, fullWidth$3, styles$a.middleRight]
+          style: [column$3, centered$2, fullWidth$3, styles$b.middleRight]
         }, /*#__PURE__*/React__namespace.createElement(Icon, {
           style: secondaryIconStyle,
           icon: icons[1],
@@ -4366,17 +4366,17 @@ class MultiSymbolGrid extends React__namespace.Component {
         })));
       } else if (icons.length >= 3) {
         return /*#__PURE__*/React__namespace.createElement(View, {
-          style: [column$3, styles$a.size]
+          style: [column$3, styles$b.size]
         }, /*#__PURE__*/React__namespace.createElement(View, {
           style: row$5
         }, /*#__PURE__*/React__namespace.createElement(View, {
-          style: [centered$2, fullWidth$3, styles$a.topLeft]
+          style: [centered$2, fullWidth$3, styles$b.topLeft]
         }, /*#__PURE__*/React__namespace.createElement(Icon, {
           style: primaryIconStyle,
           icon: icons[0],
           focused: focused
         })), /*#__PURE__*/React__namespace.createElement(View, {
-          style: [centered$2, fullWidth$3, styles$a.topRight]
+          style: [centered$2, fullWidth$3, styles$b.topRight]
         }, /*#__PURE__*/React__namespace.createElement(Icon, {
           style: secondaryIconStyle,
           icon: icons[1],
@@ -4384,13 +4384,13 @@ class MultiSymbolGrid extends React__namespace.Component {
         }))), /*#__PURE__*/React__namespace.createElement(View, {
           style: row$5
         }, /*#__PURE__*/React__namespace.createElement(View, {
-          style: [centered$2, fullWidth$3, styles$a.bottomLeft]
+          style: [centered$2, fullWidth$3, styles$b.bottomLeft]
         }, /*#__PURE__*/React__namespace.createElement(Icon, {
           style: secondaryIconStyle,
           icon: icons[2],
           focused: focused
         })), /*#__PURE__*/React__namespace.createElement(View, {
-          style: [centered$2, fullWidth$3, styles$a.bottomRight]
+          style: [centered$2, fullWidth$3, styles$b.bottomRight]
         }, icons[3] && /*#__PURE__*/React__namespace.createElement(Icon, {
           style: secondaryIconStyle,
           icon: icons[3],
@@ -4403,7 +4403,7 @@ class MultiSymbolGrid extends React__namespace.Component {
 }
 const verticalInsetPx = 2;
 const horizontalInsetPx = 4;
-const styles$a = aphrodite.StyleSheet.create({
+const styles$b = aphrodite.StyleSheet.create({
   size: {
     height: iconSizeHeightPx,
     width: iconSizeWidthPx
@@ -4464,29 +4464,29 @@ class KeypadButton$1 extends React__namespace.PureComponent {
     _defineProperty(this, "_getFocusStyle", type => {
       let focusBackgroundStyle;
       if (type === "INPUT_NAVIGATION" || type === "KEYPAD_NAVIGATION") {
-        focusBackgroundStyle = styles$9.light;
+        focusBackgroundStyle = styles$a.light;
       } else {
-        focusBackgroundStyle = styles$9.bright;
+        focusBackgroundStyle = styles$a.bright;
       }
-      return [styles$9.focusBox, focusBackgroundStyle];
+      return [styles$a.focusBox, focusBackgroundStyle];
     });
     _defineProperty(this, "_getButtonStyle", (type, borders, style) => {
       // Select the appropriate style for the button.
       let backgroundStyle;
       switch (type) {
         case "EMPTY":
-          backgroundStyle = styles$9.empty;
+          backgroundStyle = styles$a.empty;
           break;
         case "MANY":
         case "VALUE":
-          backgroundStyle = styles$9.value;
+          backgroundStyle = styles$a.value;
           break;
         case "OPERATOR":
-          backgroundStyle = styles$9.operator;
+          backgroundStyle = styles$a.operator;
           break;
         case "INPUT_NAVIGATION":
         case "KEYPAD_NAVIGATION":
-          backgroundStyle = styles$9.control;
+          backgroundStyle = styles$a.control;
           break;
         case "ECHO":
           backgroundStyle = null;
@@ -4495,13 +4495,13 @@ class KeypadButton$1 extends React__namespace.PureComponent {
       const borderStyle = [];
       if (borders.includes(BorderDirection.LEFT)) {
         // @ts-expect-error TS2345
-        borderStyle.push(styles$9.leftBorder);
+        borderStyle.push(styles$a.leftBorder);
       }
       if (borders.includes(BorderDirection.BOTTOM)) {
         // @ts-expect-error TS2345
-        borderStyle.push(styles$9.bottomBorder);
+        borderStyle.push(styles$a.bottomBorder);
       }
-      return [styles$9.buttonBase, backgroundStyle, ...borderStyle, type === "ECHO" && styles$9.echo, this.buttonSizeStyle,
+      return [styles$a.buttonBase, backgroundStyle, ...borderStyle, type === "ECHO" && styles$a.echo, this.buttonSizeStyle,
       // React Native allows you to set the 'style' props on user defined
       // components.
       //   See: https://facebook.github.io/react-native/docs/style.html
@@ -4546,7 +4546,7 @@ class KeypadButton$1 extends React__namespace.PureComponent {
     const renderFocused = !disabled && focused || popoverEnabled || type === "ECHO";
     const buttonStyle = this._getButtonStyle(type, borders, style);
     const focusStyle = this._getFocusStyle(type);
-    const iconWrapperStyle = [styles$9.iconWrapper, disabled ? styles$9.disabled : undefined];
+    const iconWrapperStyle = [styles$a.iconWrapper, disabled ? styles$a.disabled : undefined];
     const eventHandlers = {
       onTouchCancel,
       onTouchEnd,
@@ -4557,7 +4557,7 @@ class KeypadButton$1 extends React__namespace.PureComponent {
       style: focusStyle
     });
     const maybeCornerDecal = !renderFocused && !disabled && childKeys && childKeys.length > 0 && /*#__PURE__*/React__namespace.createElement(CornerDecal, {
-      style: styles$9.decalInset
+      style: styles$a.decalInset
     });
     if (type === "EMPTY") {
       return /*#__PURE__*/React__namespace.createElement(View, _extends({
@@ -4606,7 +4606,7 @@ _defineProperty(KeypadButton$1, "defaultProps", {
 });
 const focusInsetPx = 4;
 const focusBoxZIndex = 0;
-const styles$9 = aphrodite.StyleSheet.create({
+const styles$a = aphrodite.StyleSheet.create({
   buttonBase: {
     flex: 1,
     cursor: "pointer",
@@ -4759,7 +4759,7 @@ class TouchableKeypadButton extends React__namespace.Component {
       onTouchMove: evt => gestureManager.onTouchMove(evt),
       onTouchCancel: evt => gestureManager.onTouchCancel(evt)
     };
-    const styleWithAddons = [...(Array.isArray(style) ? style : [style]), styles$8.preventScrolls];
+    const styleWithAddons = [...(Array.isArray(style) ? style : [style]), styles$9.preventScrolls];
     return /*#__PURE__*/React__namespace.createElement(KeypadButton$2, _extends({
       ref: node => gestureManager.registerDOMNode(id, ReactDOM__default["default"].findDOMNode(node), childKeyIds),
       borders: borders,
@@ -4812,7 +4812,7 @@ const mapStateToProps$5 = (state, ownProps) => {
     ...extractProps(useFirstChildProps ? childKeys[0] : keyConfig)
   };
 };
-const styles$8 = aphrodite.StyleSheet.create({
+const styles$9 = aphrodite.StyleSheet.create({
   preventScrolls: {
     // Touch events that start in the touchable buttons shouldn't be
     // allowed to produce page scrolls.
@@ -4866,48 +4866,69 @@ const IconAsset = function (_ref) {
     tintColor,
     type
   } = _ref;
-  if (type === "Geometry") {
-    return /*#__PURE__*/React__namespace.createElement("svg", {
-      width: "32",
-      height: "32",
-      viewBox: "0 0 32 32",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/React__namespace.createElement("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M7.57584 7.09442C7.92723 6.92984 8.3421 6.98339 8.64018 7.23179L26.6402 22.2318C26.9636 22.5013 27.0836 22.9446 26.9403 23.3404C26.7969 23.7363 26.421 24 26 24H8C7.44772 24 7 23.5523 7 23V8.00001C7 7.61199 7.22446 7.259 7.57584 7.09442ZM9 10.1351V17H13C13.5523 17 14 17.4477 14 18V22H23.238L9 10.1351ZM12 22V19H9V22H12Z",
-      fill: tintColor
-    }));
-  } else if (type === "Operators") {
-    return /*#__PURE__*/React__namespace.createElement("svg", {
-      viewBox: "0 0 32 32",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/React__namespace.createElement("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M29 6H30V7H29V6ZM27 6C27 4.89543 27.8954 4 29 4H30C31.1046 4 32 4.89543 32 6V7C32 8.10457 31.1046 9 30 9H29C27.8954 9 27 8.10457 27 7V6ZM11.1318 6.50386C11.3098 6.19229 11.6411 6 12 6H14C14.5523 6 15 6.44772 15 7C15 7.55228 14.5523 8 14 8H12.5803L8.86824 14.4961C8.68527 14.8163 8.34091 15.0098 7.97225 14.9996C7.6036 14.9894 7.2705 14.7771 7.10557 14.4472L5.10557 10.4472C4.85858 9.95324 5.05881 9.35256 5.55279 9.10557C6.04676 8.85858 6.64744 9.05881 6.89443 9.55279L8.0588 11.8815L11.1318 6.50386ZM7.70676 16.2925C8.09748 16.6829 8.09779 17.316 7.70745 17.7068C7.28543 18.1292 6.84383 18.7303 6.51157 19.3658C6.17039 20.0184 6 20.601 6 21C6 21.3789 6.17235 21.9897 6.51638 22.6649C6.85315 23.3259 7.28488 23.9121 7.66786 24.2557C8.07892 24.6246 8.11314 25.2568 7.74429 25.6679C7.37544 26.0789 6.7432 26.1131 6.33214 25.7443C5.7161 25.1915 5.14783 24.3844 4.73434 23.5728C4.32813 22.7755 3.99999 21.8345 4 21C4.00001 20.1391 4.3301 19.2217 4.73917 18.4392C5.15715 17.6397 5.71554 16.8708 6.29255 16.2932C6.68288 15.9025 7.31605 15.9022 7.70676 16.2925ZM11.2932 16.2925C11.684 15.9022 12.3171 15.9025 12.7075 16.2932C13.2845 16.8708 13.8428 17.6397 14.2608 18.4392C14.6699 19.2217 15 20.1391 15 21C15 21.8345 14.6719 22.7755 14.2657 23.5728C13.8522 24.3844 13.2839 25.1915 12.6679 25.7443C12.2568 26.1131 11.6246 26.0789 11.2557 25.6679C10.8869 25.2568 10.9211 24.6246 11.3321 24.2557C11.7151 23.9121 12.1469 23.3259 12.4836 22.6649C12.8276 21.9897 13 21.3789 13 21C13 20.601 12.8296 20.0184 12.4884 19.3658C12.1562 18.7303 11.7146 18.1292 11.2925 17.7068C10.9022 17.316 10.9025 16.6829 11.2932 16.2925ZM27.9363 17.6489C28.1302 18.166 27.8682 18.7424 27.3511 18.9363L21.848 21L27.3511 23.0637C27.8682 23.2576 28.1302 23.834 27.9363 24.3511C27.7424 24.8682 27.166 25.1302 26.6489 24.9363L18.6489 21.9363C18.2586 21.79 18 21.4168 18 21C18 20.5832 18.2586 20.21 18.6489 20.0637L26.6489 17.0637C27.166 16.8698 27.7424 17.1318 27.9363 17.6489ZM21 8V13H24V8H21ZM20 6C19.4477 6 19 6.44772 19 7V14C19 14.5523 19.4477 15 20 15H25C25.5523 15 26 14.5523 26 14V7C26 6.44772 25.5523 6 25 6H20Z",
-      fill: tintColor
-    }));
-  } else if (type === "Numbers") {
-    return /*#__PURE__*/React__namespace.createElement("svg", {
-      width: "32",
-      height: "32",
-      viewBox: "0 0 32 32",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/React__namespace.createElement("path", {
-      d: "M10.4123 19.5794V21.0004H4.71434V19.5794H6.73034V14.0214C6.73034 13.9001 6.73267 13.7764 6.73734 13.6504C6.742 13.5244 6.749 13.3961 6.75834 13.2654L5.42834 14.3714C5.335 14.4414 5.244 14.4858 5.15534 14.5044C5.06667 14.5231 4.98267 14.5254 4.90334 14.5114C4.824 14.4928 4.754 14.4648 4.69334 14.4274C4.63267 14.3854 4.586 14.3434 4.55334 14.3014L3.94434 13.4824L7.06634 10.8364H8.65534V19.5794H10.4123ZM18.7924 19.2294C19.0024 19.2294 19.1658 19.2878 19.2824 19.4044C19.4038 19.5211 19.4644 19.6751 19.4644 19.8664V21.0004H12.4224V20.3704C12.4224 20.2491 12.4481 20.1184 12.4994 19.9784C12.5508 19.8338 12.6371 19.7031 12.7584 19.5864L15.7684 16.5694C16.0251 16.3128 16.2514 16.0678 16.4474 15.8344C16.6434 15.5964 16.8068 15.3654 16.9374 15.1414C17.0681 14.9128 17.1661 14.6818 17.2314 14.4484C17.2968 14.2151 17.3294 13.9701 17.3294 13.7134C17.3294 13.2608 17.2128 12.9178 16.9794 12.6844C16.7461 12.4464 16.4171 12.3274 15.9924 12.3274C15.8058 12.3274 15.6331 12.3554 15.4744 12.4114C15.3204 12.4628 15.1804 12.5351 15.0544 12.6284C14.9331 12.7218 14.8281 12.8314 14.7394 12.9574C14.6508 13.0834 14.5854 13.2211 14.5434 13.3704C14.4594 13.6038 14.3451 13.7601 14.2004 13.8394C14.0604 13.9141 13.8598 13.9304 13.5984 13.8884L12.5764 13.7064C12.6511 13.2118 12.7911 12.7778 12.9964 12.4044C13.2018 12.0311 13.4584 11.7208 13.7664 11.4734C14.0744 11.2261 14.4268 11.0418 14.8234 10.9204C15.2201 10.7944 15.6471 10.7314 16.1044 10.7314C16.5851 10.7314 17.0214 10.8038 17.4134 10.9484C17.8101 11.0884 18.1484 11.2868 18.4284 11.5434C18.7084 11.7954 18.9254 12.1011 19.0794 12.4604C19.2334 12.8198 19.3104 13.2164 19.3104 13.6504C19.3104 14.0238 19.2568 14.3691 19.1494 14.6864C19.0421 15.0038 18.8951 15.3071 18.7084 15.5964C18.5264 15.8811 18.3141 16.1588 18.0714 16.4294C17.8288 16.7001 17.5721 16.9731 17.3014 17.2484L15.1454 19.4534C15.3834 19.3834 15.6191 19.3298 15.8524 19.2924C16.0858 19.2504 16.3051 19.2294 16.5104 19.2294H18.7924ZM21.4535 13.7064C21.5282 13.2118 21.6682 12.7778 21.8735 12.4044C22.0789 12.0311 22.3355 11.7208 22.6435 11.4734C22.9515 11.2261 23.3015 11.0418 23.6935 10.9204C24.0902 10.7944 24.5172 10.7314 24.9745 10.7314C25.4599 10.7314 25.8939 10.8014 26.2765 10.9414C26.6639 11.0768 26.9905 11.2634 27.2565 11.5014C27.5225 11.7394 27.7255 12.0171 27.8655 12.3344C28.0102 12.6518 28.0825 12.9924 28.0825 13.3564C28.0825 13.6784 28.0475 13.9631 27.9775 14.2104C27.9122 14.4531 27.8119 14.6654 27.6765 14.8474C27.5459 15.0294 27.3825 15.1834 27.1865 15.3094C26.9952 15.4354 26.7735 15.5404 26.5215 15.6244C27.6882 16.0071 28.2715 16.7841 28.2715 17.9554C28.2715 18.4734 28.1759 18.9308 27.9845 19.3274C27.7932 19.7194 27.5365 20.0484 27.2145 20.3144C26.8925 20.5804 26.5169 20.7811 26.0875 20.9164C25.6629 21.0471 25.2172 21.1124 24.7505 21.1124C24.2559 21.1124 23.8195 21.0564 23.4415 20.9444C23.0635 20.8324 22.7299 20.6644 22.4405 20.4404C22.1559 20.2164 21.9109 19.9364 21.7055 19.6004C21.5002 19.2598 21.3205 18.8631 21.1665 18.4104L22.0205 18.0604C22.2445 17.9671 22.4522 17.9414 22.6435 17.9834C22.8395 18.0254 22.9795 18.1281 23.0635 18.2914C23.1569 18.4688 23.2549 18.6321 23.3575 18.7814C23.4649 18.9308 23.5839 19.0614 23.7145 19.1734C23.8452 19.2808 23.9922 19.3648 24.1555 19.4254C24.3235 19.4861 24.5149 19.5164 24.7295 19.5164C25.0002 19.5164 25.2359 19.4721 25.4365 19.3834C25.6372 19.2948 25.8052 19.1804 25.9405 19.0404C26.0759 18.8958 26.1762 18.7348 26.2415 18.5574C26.3115 18.3754 26.3465 18.1958 26.3465 18.0184C26.3465 17.7851 26.3255 17.5751 26.2835 17.3884C26.2415 17.1971 26.1435 17.0361 25.9895 16.9054C25.8402 16.7701 25.6162 16.6674 25.3175 16.5974C25.0235 16.5228 24.6222 16.4854 24.1135 16.4854V15.1274C24.5382 15.1274 24.8859 15.0924 25.1565 15.0224C25.4272 14.9524 25.6395 14.8544 25.7935 14.7284C25.9475 14.6024 26.0525 14.4508 26.1085 14.2734C26.1692 14.0961 26.1995 13.9024 26.1995 13.6924C26.1995 13.2491 26.0829 12.9108 25.8495 12.6774C25.6209 12.4441 25.2942 12.3274 24.8695 12.3274C24.6829 12.3274 24.5102 12.3554 24.3515 12.4114C24.1975 12.4628 24.0575 12.5351 23.9315 12.6284C23.8102 12.7218 23.7052 12.8314 23.6165 12.9574C23.5279 13.0834 23.4625 13.2211 23.4205 13.3704C23.3319 13.6038 23.2175 13.7601 23.0775 13.8394C22.9375 13.9141 22.7345 13.9304 22.4685 13.8884L21.4535 13.7064Z",
-      fill: tintColor
-    }));
+  switch (type) {
+    case "Geometry":
+      {
+        return /*#__PURE__*/React__namespace.createElement("svg", {
+          width: "32",
+          height: "32",
+          viewBox: "0 0 32 32",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg"
+        }, /*#__PURE__*/React__namespace.createElement("path", {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M7.57584 7.09442C7.92723 6.92984 8.3421 6.98339 8.64018 7.23179L26.6402 22.2318C26.9636 22.5013 27.0836 22.9446 26.9403 23.3404C26.7969 23.7363 26.421 24 26 24H8C7.44772 24 7 23.5523 7 23V8.00001C7 7.61199 7.22446 7.259 7.57584 7.09442ZM9 10.1351V17H13C13.5523 17 14 17.4477 14 18V22H23.238L9 10.1351ZM12 22V19H9V22H12Z",
+          fill: tintColor
+        }));
+      }
+    case "Operators":
+      {
+        return /*#__PURE__*/React__namespace.createElement("svg", {
+          viewBox: "0 0 32 32",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg"
+        }, /*#__PURE__*/React__namespace.createElement("path", {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M29 6H30V7H29V6ZM27 6C27 4.89543 27.8954 4 29 4H30C31.1046 4 32 4.89543 32 6V7C32 8.10457 31.1046 9 30 9H29C27.8954 9 27 8.10457 27 7V6ZM11.1318 6.50386C11.3098 6.19229 11.6411 6 12 6H14C14.5523 6 15 6.44772 15 7C15 7.55228 14.5523 8 14 8H12.5803L8.86824 14.4961C8.68527 14.8163 8.34091 15.0098 7.97225 14.9996C7.6036 14.9894 7.2705 14.7771 7.10557 14.4472L5.10557 10.4472C4.85858 9.95324 5.05881 9.35256 5.55279 9.10557C6.04676 8.85858 6.64744 9.05881 6.89443 9.55279L8.0588 11.8815L11.1318 6.50386ZM7.70676 16.2925C8.09748 16.6829 8.09779 17.316 7.70745 17.7068C7.28543 18.1292 6.84383 18.7303 6.51157 19.3658C6.17039 20.0184 6 20.601 6 21C6 21.3789 6.17235 21.9897 6.51638 22.6649C6.85315 23.3259 7.28488 23.9121 7.66786 24.2557C8.07892 24.6246 8.11314 25.2568 7.74429 25.6679C7.37544 26.0789 6.7432 26.1131 6.33214 25.7443C5.7161 25.1915 5.14783 24.3844 4.73434 23.5728C4.32813 22.7755 3.99999 21.8345 4 21C4.00001 20.1391 4.3301 19.2217 4.73917 18.4392C5.15715 17.6397 5.71554 16.8708 6.29255 16.2932C6.68288 15.9025 7.31605 15.9022 7.70676 16.2925ZM11.2932 16.2925C11.684 15.9022 12.3171 15.9025 12.7075 16.2932C13.2845 16.8708 13.8428 17.6397 14.2608 18.4392C14.6699 19.2217 15 20.1391 15 21C15 21.8345 14.6719 22.7755 14.2657 23.5728C13.8522 24.3844 13.2839 25.1915 12.6679 25.7443C12.2568 26.1131 11.6246 26.0789 11.2557 25.6679C10.8869 25.2568 10.9211 24.6246 11.3321 24.2557C11.7151 23.9121 12.1469 23.3259 12.4836 22.6649C12.8276 21.9897 13 21.3789 13 21C13 20.601 12.8296 20.0184 12.4884 19.3658C12.1562 18.7303 11.7146 18.1292 11.2925 17.7068C10.9022 17.316 10.9025 16.6829 11.2932 16.2925ZM27.9363 17.6489C28.1302 18.166 27.8682 18.7424 27.3511 18.9363L21.848 21L27.3511 23.0637C27.8682 23.2576 28.1302 23.834 27.9363 24.3511C27.7424 24.8682 27.166 25.1302 26.6489 24.9363L18.6489 21.9363C18.2586 21.79 18 21.4168 18 21C18 20.5832 18.2586 20.21 18.6489 20.0637L26.6489 17.0637C27.166 16.8698 27.7424 17.1318 27.9363 17.6489ZM21 8V13H24V8H21ZM20 6C19.4477 6 19 6.44772 19 7V14C19 14.5523 19.4477 15 20 15H25C25.5523 15 26 14.5523 26 14V7C26 6.44772 25.5523 6 25 6H20Z",
+          fill: tintColor
+        }));
+      }
+    case "Numbers":
+      {
+        return /*#__PURE__*/React__namespace.createElement("svg", {
+          width: "32",
+          height: "32",
+          viewBox: "0 0 32 32",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg"
+        }, /*#__PURE__*/React__namespace.createElement("path", {
+          d: "M10.4123 19.5794V21.0004H4.71434V19.5794H6.73034V14.0214C6.73034 13.9001 6.73267 13.7764 6.73734 13.6504C6.742 13.5244 6.749 13.3961 6.75834 13.2654L5.42834 14.3714C5.335 14.4414 5.244 14.4858 5.15534 14.5044C5.06667 14.5231 4.98267 14.5254 4.90334 14.5114C4.824 14.4928 4.754 14.4648 4.69334 14.4274C4.63267 14.3854 4.586 14.3434 4.55334 14.3014L3.94434 13.4824L7.06634 10.8364H8.65534V19.5794H10.4123ZM18.7924 19.2294C19.0024 19.2294 19.1658 19.2878 19.2824 19.4044C19.4038 19.5211 19.4644 19.6751 19.4644 19.8664V21.0004H12.4224V20.3704C12.4224 20.2491 12.4481 20.1184 12.4994 19.9784C12.5508 19.8338 12.6371 19.7031 12.7584 19.5864L15.7684 16.5694C16.0251 16.3128 16.2514 16.0678 16.4474 15.8344C16.6434 15.5964 16.8068 15.3654 16.9374 15.1414C17.0681 14.9128 17.1661 14.6818 17.2314 14.4484C17.2968 14.2151 17.3294 13.9701 17.3294 13.7134C17.3294 13.2608 17.2128 12.9178 16.9794 12.6844C16.7461 12.4464 16.4171 12.3274 15.9924 12.3274C15.8058 12.3274 15.6331 12.3554 15.4744 12.4114C15.3204 12.4628 15.1804 12.5351 15.0544 12.6284C14.9331 12.7218 14.8281 12.8314 14.7394 12.9574C14.6508 13.0834 14.5854 13.2211 14.5434 13.3704C14.4594 13.6038 14.3451 13.7601 14.2004 13.8394C14.0604 13.9141 13.8598 13.9304 13.5984 13.8884L12.5764 13.7064C12.6511 13.2118 12.7911 12.7778 12.9964 12.4044C13.2018 12.0311 13.4584 11.7208 13.7664 11.4734C14.0744 11.2261 14.4268 11.0418 14.8234 10.9204C15.2201 10.7944 15.6471 10.7314 16.1044 10.7314C16.5851 10.7314 17.0214 10.8038 17.4134 10.9484C17.8101 11.0884 18.1484 11.2868 18.4284 11.5434C18.7084 11.7954 18.9254 12.1011 19.0794 12.4604C19.2334 12.8198 19.3104 13.2164 19.3104 13.6504C19.3104 14.0238 19.2568 14.3691 19.1494 14.6864C19.0421 15.0038 18.8951 15.3071 18.7084 15.5964C18.5264 15.8811 18.3141 16.1588 18.0714 16.4294C17.8288 16.7001 17.5721 16.9731 17.3014 17.2484L15.1454 19.4534C15.3834 19.3834 15.6191 19.3298 15.8524 19.2924C16.0858 19.2504 16.3051 19.2294 16.5104 19.2294H18.7924ZM21.4535 13.7064C21.5282 13.2118 21.6682 12.7778 21.8735 12.4044C22.0789 12.0311 22.3355 11.7208 22.6435 11.4734C22.9515 11.2261 23.3015 11.0418 23.6935 10.9204C24.0902 10.7944 24.5172 10.7314 24.9745 10.7314C25.4599 10.7314 25.8939 10.8014 26.2765 10.9414C26.6639 11.0768 26.9905 11.2634 27.2565 11.5014C27.5225 11.7394 27.7255 12.0171 27.8655 12.3344C28.0102 12.6518 28.0825 12.9924 28.0825 13.3564C28.0825 13.6784 28.0475 13.9631 27.9775 14.2104C27.9122 14.4531 27.8119 14.6654 27.6765 14.8474C27.5459 15.0294 27.3825 15.1834 27.1865 15.3094C26.9952 15.4354 26.7735 15.5404 26.5215 15.6244C27.6882 16.0071 28.2715 16.7841 28.2715 17.9554C28.2715 18.4734 28.1759 18.9308 27.9845 19.3274C27.7932 19.7194 27.5365 20.0484 27.2145 20.3144C26.8925 20.5804 26.5169 20.7811 26.0875 20.9164C25.6629 21.0471 25.2172 21.1124 24.7505 21.1124C24.2559 21.1124 23.8195 21.0564 23.4415 20.9444C23.0635 20.8324 22.7299 20.6644 22.4405 20.4404C22.1559 20.2164 21.9109 19.9364 21.7055 19.6004C21.5002 19.2598 21.3205 18.8631 21.1665 18.4104L22.0205 18.0604C22.2445 17.9671 22.4522 17.9414 22.6435 17.9834C22.8395 18.0254 22.9795 18.1281 23.0635 18.2914C23.1569 18.4688 23.2549 18.6321 23.3575 18.7814C23.4649 18.9308 23.5839 19.0614 23.7145 19.1734C23.8452 19.2808 23.9922 19.3648 24.1555 19.4254C24.3235 19.4861 24.5149 19.5164 24.7295 19.5164C25.0002 19.5164 25.2359 19.4721 25.4365 19.3834C25.6372 19.2948 25.8052 19.1804 25.9405 19.0404C26.0759 18.8958 26.1762 18.7348 26.2415 18.5574C26.3115 18.3754 26.3465 18.1958 26.3465 18.0184C26.3465 17.7851 26.3255 17.5751 26.2835 17.3884C26.2415 17.1971 26.1435 17.0361 25.9895 16.9054C25.8402 16.7701 25.6162 16.6674 25.3175 16.5974C25.0235 16.5228 24.6222 16.4854 24.1135 16.4854V15.1274C24.5382 15.1274 24.8859 15.0924 25.1565 15.0224C25.4272 14.9524 25.6395 14.8544 25.7935 14.7284C25.9475 14.6024 26.0525 14.4508 26.1085 14.2734C26.1692 14.0961 26.1995 13.9024 26.1995 13.6924C26.1995 13.2491 26.0829 12.9108 25.8495 12.6774C25.6209 12.4441 25.2942 12.3274 24.8695 12.3274C24.6829 12.3274 24.5102 12.3554 24.3515 12.4114C24.1975 12.4628 24.0575 12.5351 23.9315 12.6284C23.8102 12.7218 23.7052 12.8314 23.6165 12.9574C23.5279 13.0834 23.4625 13.2211 23.4205 13.3704C23.3319 13.6038 23.2175 13.7601 23.0775 13.8394C22.9375 13.9141 22.7345 13.9304 22.4685 13.8884L21.4535 13.7064Z",
+          fill: tintColor
+        }));
+      }
+    case "Extras":
+      {
+        return /*#__PURE__*/React__namespace.createElement("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "20",
+          height: "20",
+          fill: "currentColor",
+          viewBox: "0 0 256 256"
+        }, /*#__PURE__*/React__namespace.createElement("path", {
+          d: "M232,172a36,36,0,0,1-72,0V72H96V200a8,8,0,0,1-16,0V72H72a40,40,0,0,0-40,40,8,8,0,0,1-16,0A56.06,56.06,0,0,1,72,56H224a8,8,0,0,1,0,16H176V172a20,20,0,0,0,40,0,8,8,0,0,1,16,0Z"
+        }));
+      }
+    default:
+      {
+        // type as never;
+        throw new Error("Invalid icon type");
+      }
   }
-
-  // type as never;
-  throw new Error("Invalid icon type");
 };
 
-const styles$7 = aphrodite.StyleSheet.create({
+const styles$8 = aphrodite.StyleSheet.create({
   base: {
     display: "flex",
     width: 44,
@@ -4971,7 +4992,8 @@ class TabbarItem extends React__namespace.Component {
     } = this.props;
     return /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
       onClick: onClick,
-      disabled: itemState === "disabled"
+      disabled: itemState === "disabled",
+      "aria-label": itemType
     }, _ref => {
       let {
         hovered,
@@ -4980,14 +5002,14 @@ class TabbarItem extends React__namespace.Component {
       } = _ref;
       const tintColor = imageTintColor(itemState, hovered, focused, pressed);
       return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-        style: [styles$7.base, itemState !== "disabled" && hovered && styles$7.hovered, focused && styles$7.focused, pressed && styles$7.pressed]
+        style: [styles$8.base, itemState !== "disabled" && hovered && styles$8.hovered, focused && styles$8.focused, pressed && styles$8.pressed]
       }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-        style: [styles$7.innerBox, pressed && styles$7.innerBoxPressed]
+        style: [styles$8.innerBox, pressed && styles$8.innerBoxPressed]
       }, /*#__PURE__*/React__namespace.createElement(IconAsset, {
         type: itemType,
         tintColor: tintColor
       })), itemState === "active" && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-        style: [styles$7.activeIndicator, {
+        style: [styles$8.activeIndicator, {
           backgroundColor: tintColor
         }]
       }));
@@ -4995,43 +5017,31 @@ class TabbarItem extends React__namespace.Component {
   }
 }
 
-const styles$6 = aphrodite.StyleSheet.create({
+const styles$7 = aphrodite.StyleSheet.create({
   tabbar: {
     display: "flex",
     flexDirection: "row",
-    background: Color__default["default"].offWhite,
     paddingTop: 2,
-    paddingBottom: 2,
-    borderTop: "1px solid ".concat(Color__default["default"].offBlack50),
-    borderBottom: "1px solid ".concat(Color__default["default"].offBlack50)
+    paddingBottom: 2
   }
 });
-class Tabbar extends React__namespace.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      selectedItem: 0
-    });
-  }
-  render() {
-    const {
-      items,
-      onSelect
-    } = this.props;
-    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$6.tabbar
-    }, items.map((item, index) => /*#__PURE__*/React__namespace.createElement(TabbarItem, {
-      key: "tabbar-item-".concat(index),
-      itemState: index === this.state.selectedItem ? "active" : "inactive",
-      itemType: item,
-      onClick: () => {
-        this.setState({
-          selectedItem: index
-        });
-        onSelect(item);
-      }
-    })));
-  }
+function Tabbar(props) {
+  const {
+    items,
+    selectedItem,
+    onSelectItem,
+    style
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles$7.tabbar, style]
+  }, items.map(item => /*#__PURE__*/React__namespace.createElement(TabbarItem, {
+    key: "tabbar-item-".concat(item),
+    itemState: item === selectedItem ? "active" : "inactive",
+    itemType: item,
+    onClick: () => {
+      onSelectItem(item);
+    }
+  })));
 }
 
 /**
@@ -5170,7 +5180,7 @@ class MultiSymbolPopover extends React__namespace.Component {
     // TODO(charlie): We have to require this lazily because of a cyclic
     // dependence in our components.
     return /*#__PURE__*/React__namespace.createElement(View, {
-      style: styles$5.container
+      style: styles$6.container
     }, keys.map(key => {
       return /*#__PURE__*/React__namespace.createElement(TouchableKeypadButton$1, {
         keyConfig: key,
@@ -5179,7 +5189,7 @@ class MultiSymbolPopover extends React__namespace.Component {
     }));
   }
 }
-const styles$5 = aphrodite.StyleSheet.create({
+const styles$6 = aphrodite.StyleSheet.create({
   container: {
     flexDirection: "column-reverse",
     position: "relative",
@@ -5465,31 +5475,33 @@ class TwoPageKeypad extends React__namespace.Component {
     } = this.state;
     if (paginationEnabled) {
       return /*#__PURE__*/React__namespace.createElement(Keypad$2, {
-        style: [column$2, styles$4.keypad]
+        style: [column$2, styles$5.keypad]
       }, /*#__PURE__*/React__namespace.createElement(Tabbar, {
         items: ["Numbers", "Operators"],
-        onSelect: selectedItem => {
+        selectedItem: selectedPage,
+        onSelectItem: selectedItem => {
           this.setState({
             selectedPage: selectedItem
           });
-        }
+        },
+        style: styles$5.tabbar
       }), /*#__PURE__*/React__namespace.createElement(View, {
-        style: styles$4.borderTop
+        style: styles$5.borderTop
       }, selectedPage === "Numbers" && rightPage, selectedPage === "Operators" && leftPage));
     } else {
       return /*#__PURE__*/React__namespace.createElement(Keypad$2, {
-        style: styles$4.keypad
+        style: styles$5.keypad
       }, /*#__PURE__*/React__namespace.createElement(View, {
         style: row$4
       }, /*#__PURE__*/React__namespace.createElement(View, {
         style: fullWidth$2
       }, leftPage), /*#__PURE__*/React__namespace.createElement(View, {
-        style: [styles$4.borderLeft, fullWidth$2]
+        style: [styles$5.borderLeft, fullWidth$2]
       }, rightPage)));
     }
   }
 }
-const styles$4 = aphrodite.StyleSheet.create({
+const styles$5 = aphrodite.StyleSheet.create({
   keypad: {
     // Set the background to light grey, so that when the user drags the
     // keypad pages past the edges, there's a grey backdrop.
@@ -5501,6 +5513,11 @@ const styles$4 = aphrodite.StyleSheet.create({
   borderLeft: {
     borderLeft: "".concat(innerBorderWidthPx, "px ").concat(innerBorderStyle, " ") + "".concat(innerBorderColor),
     boxSizing: "content-box"
+  },
+  tabbar: {
+    background: Color__default["default"].offWhite,
+    borderTop: "1px solid ".concat(Color__default["default"].offBlack50),
+    borderBottom: "1px solid ".concat(Color__default["default"].offBlack50)
   }
 });
 const mapStateToProps$3 = state => {
@@ -5570,7 +5587,7 @@ class ExpressionKeypad extends React__namespace.Component {
     } else {
       dismissOrJumpOutKey = KeyConfigs.DISMISS;
     }
-    const rightPageStyle = [row$3, fullWidth$1, styles$3.rightPage, roundTopRight && roundedTopRight$1];
+    const rightPageStyle = [row$3, fullWidth$1, styles$4.rightPage, roundTopRight && roundedTopRight$1];
     const rightPage = /*#__PURE__*/React__namespace.createElement(View, {
       style: rightPageStyle
     }, /*#__PURE__*/React__namespace.createElement(View, {
@@ -5642,7 +5659,7 @@ class ExpressionKeypad extends React__namespace.Component {
       keyConfig: dismissOrJumpOutKey,
       borders: BorderStyles.LEFT
     })));
-    const leftPageStyle = [row$3, fullWidth$1, styles$3.leftPage, roundTopLeft && roundedTopLeft$2];
+    const leftPageStyle = [row$3, fullWidth$1, styles$4.leftPage, roundTopLeft && roundedTopLeft$2];
     const leftPage = /*#__PURE__*/React__namespace.createElement(View, {
       style: leftPageStyle
     }, /*#__PURE__*/React__namespace.createElement(View, {
@@ -5722,7 +5739,7 @@ class ExpressionKeypad extends React__namespace.Component {
     });
   }
 }
-const styles$3 = aphrodite.StyleSheet.create({
+const styles$4 = aphrodite.StyleSheet.create({
   // NOTE(charlie): These backgrounds are applied to as to fill in some
   // unfortunate 'cracks' in the layout. However, not all keys in the first
   // page use this background color (namely, the 'command' keys, backspace and
@@ -5898,7 +5915,7 @@ class NavigationPad extends React__namespace.Component {
       roundTopLeft,
       style
     } = this.props;
-    const containerStyle = [column, centered$1, styles$2.container, roundTopLeft && roundedTopLeft, ...(Array.isArray(style) ? style : [style])];
+    const containerStyle = [column, centered$1, styles$3.container, roundTopLeft && roundedTopLeft, ...(Array.isArray(style) ? style : [style])];
     return /*#__PURE__*/React__namespace.createElement(View, {
       style: containerStyle
     }, /*#__PURE__*/React__namespace.createElement(View, {
@@ -5906,32 +5923,32 @@ class NavigationPad extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement(TouchableKeypadButton$1, {
       keyConfig: KeyConfigs.UP,
       borders: BorderStyles.NONE,
-      style: [styles$2.navigationKey, styles$2.topArrow]
+      style: [styles$3.navigationKey, styles$3.topArrow]
     })), /*#__PURE__*/React__namespace.createElement(View, {
       style: [row$1, centered$1, stretch]
     }, /*#__PURE__*/React__namespace.createElement(TouchableKeypadButton$1, {
       keyConfig: KeyConfigs.LEFT,
       borders: BorderStyles.NONE,
-      style: [styles$2.navigationKey, styles$2.leftArrow]
+      style: [styles$3.navigationKey, styles$3.leftArrow]
     }), /*#__PURE__*/React__namespace.createElement(View, {
-      style: styles$2.horizontalSpacer
+      style: styles$3.horizontalSpacer
     }), /*#__PURE__*/React__namespace.createElement(TouchableKeypadButton$1, {
       keyConfig: KeyConfigs.RIGHT,
       borders: BorderStyles.NONE,
-      style: [styles$2.navigationKey, styles$2.rightArrow]
+      style: [styles$3.navigationKey, styles$3.rightArrow]
     })), /*#__PURE__*/React__namespace.createElement(View, {
       style: [row$1, centered$1]
     }, /*#__PURE__*/React__namespace.createElement(TouchableKeypadButton$1, {
       keyConfig: KeyConfigs.DOWN,
       borders: BorderStyles.NONE,
-      style: [styles$2.navigationKey, styles$2.bottomArrow]
+      style: [styles$3.navigationKey, styles$3.bottomArrow]
     })));
   }
 }
 const buttonSizePx = 48;
 const borderRadiusPx = 4;
 const borderWidthPx$1 = 1;
-const styles$2 = aphrodite.StyleSheet.create({
+const styles$3 = aphrodite.StyleSheet.create({
   container: {
     backgroundColor: controlGrey,
     width: navigationPadWidthPx
@@ -6104,8 +6121,8 @@ class KeypadContainer extends React__namespace.Component {
         ...inlineStyles.invisible
       };
     }
-    const keypadContainerStyle = [row, centered, fullWidth, styles$1.keypadContainer, ...(Array.isArray(style) ? style : [style])];
-    const keypadStyle = [row, styles$1.keypadBorder, layoutMode === LayoutMode.FULLSCREEN ? styles$1.fullscreen : styles$1.compact];
+    const keypadContainerStyle = [row, centered, fullWidth, styles$2.keypadContainer, ...(Array.isArray(style) ? style : [style])];
+    const keypadStyle = [row, styles$2.keypadBorder, layoutMode === LayoutMode.FULLSCREEN ? styles$2.fullscreen : styles$2.compact];
 
     // TODO(charlie): When the keypad is shorter than the width of the
     // screen, add a border on its left and right edges, and round out the
@@ -6124,15 +6141,15 @@ class KeypadContainer extends React__namespace.Component {
       }
     }, navigationPadEnabled && /*#__PURE__*/React__namespace.createElement(NavigationPad, {
       roundTopLeft: layoutMode === LayoutMode.COMPACT,
-      style: styles$1.navigationPadContainer
+      style: styles$2.navigationPadContainer
     }), /*#__PURE__*/React__namespace.createElement(View, {
-      style: styles$1.keypadLayout
+      style: styles$2.keypadLayout
     }, this.renderKeypad())));
   }
 }
 const keypadAnimationDurationMs = 300;
 const borderWidthPx = 1;
-const styles$1 = aphrodite.StyleSheet.create({
+const styles$2 = aphrodite.StyleSheet.create({
   keypadContainer: {
     bottom: 0,
     left: 0,
@@ -7478,7 +7495,7 @@ class ProvidedKeypad extends React__namespace.Component {
   }
 }
 
-const styles = aphrodite.StyleSheet.create({
+const styles$1 = aphrodite.StyleSheet.create({
   base: {
     display: "flex",
     justifyContent: "center",
@@ -7533,6 +7550,7 @@ class Button extends React__namespace.Component {
   render() {
     const {
       onPress,
+      ariaLabel,
       children,
       style,
       tintColor
@@ -7541,7 +7559,8 @@ class Button extends React__namespace.Component {
       style: style
     }, /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
       onClick: onPress,
-      style: styles.clickable
+      style: styles$1.clickable,
+      "aria-label": ariaLabel
     }, _ref => {
       let {
         hovered,
@@ -7549,11 +7568,11 @@ class Button extends React__namespace.Component {
         pressed
       } = _ref;
       return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-        style: [styles.outerBoxBase, hovered && styles.outerBoxHover, pressed && styles.outerBoxPressed]
+        style: [styles$1.outerBoxBase, hovered && styles$1.outerBoxHover, pressed && styles$1.outerBoxPressed]
       }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-        style: [styles.base, tintColor != null ? {
+        style: [styles$1.base, tintColor != null ? {
           background: tintColor
-        } : undefined, hovered && styles.hovered, focused && styles.focused, pressed && styles.pressed]
+        } : undefined, hovered && styles$1.hovered, focused && styles$1.focused, pressed && styles$1.pressed]
       }, children));
     }));
   }
@@ -8165,6 +8184,33 @@ function ButtonAsset(_ref) {
       }, /*#__PURE__*/React__namespace.createElement("path", {
         d: "M232,172a36,36,0,0,1-72,0V72H96V200a8,8,0,0,1-16,0V72H72a40,40,0,0,0-40,40,8,8,0,0,1-16,0A56.06,56.06,0,0,1,72,56H224a8,8,0,0,1,0,16H176V172a20,20,0,0,0,40,0,8,8,0,0,1,16,0Z"
       }));
+    case "a":
+      return /*#__PURE__*/React__namespace.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        viewBox: "0 0 384 512"
+      }, /*#__PURE__*/React__namespace.createElement("path", {
+        d: "M221.5 51.7C216.6 39.8 204.9 32 192 32s-24.6 7.8-29.5 19.7l-120 288-40 96c-6.8 16.3 .9 35 17.2 41.8s35-.9 41.8-17.2L93.3 384H290.7l31.8 76.3c6.8 16.3 25.5 24 41.8 17.2s24-25.5 17.2-41.8l-40-96-120-288zM264 320H120l72-172.8L264 320z"
+      }));
+    case "b":
+      return /*#__PURE__*/React__namespace.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        viewBox: "0 0 320 512"
+      }, /*#__PURE__*/React__namespace.createElement("path", {
+        d: "M64 32C28.7 32 0 60.7 0 96V256 416c0 35.3 28.7 64 64 64H192c70.7 0 128-57.3 128-128c0-46.5-24.8-87.3-62-109.7c18.7-22.3 30-51 30-82.3c0-70.7-57.3-128-128-128H64zm96 192H64V96h96c35.3 0 64 28.7 64 64s-28.7 64-64 64zM64 288h96 32c35.3 0 64 28.7 64 64s-28.7 64-64 64H64V288z"
+      }));
+    case "c":
+      return /*#__PURE__*/React__namespace.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        viewBox: "0 0 384 512"
+      }, /*#__PURE__*/React__namespace.createElement("path", {
+        d: "M329.1 142.9c-62.5-62.5-155.8-62.5-218.3 0s-62.5 163.8 0 226.3s155.8 62.5 218.3 0c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3c-87.5 87.5-221.3 87.5-308.8 0s-87.5-229.3 0-316.8s221.3-87.5 308.8 0c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0z"
+      }));
     case "x":
       // MATHEMATICAL ITALIC SMALL CHI
       // https://en.wikipedia.org/wiki/Chi_(letter)#Mathematical_chi
@@ -8219,9 +8265,6 @@ function ButtonAsset(_ref) {
     case "NTHROOT3":
     case "POW":
     case "LOG_B":
-    case "a":
-    case "b":
-    case "c":
     case "d":
     case "e":
     case "f":
@@ -8319,7 +8362,8 @@ const KeypadButton = _ref2 => {
   return /*#__PURE__*/React__namespace.createElement(Button, {
     onPress: () => onClickKey(keyConfig.id),
     tintColor: tintColor,
-    style: style
+    style: style,
+    ariaLabel: keyConfig.id
   }, /*#__PURE__*/React__namespace.createElement(ButtonAsset, {
     id: keyConfig.id
   }));
@@ -8381,6 +8425,20 @@ const PlaceHolderButtons = _ref5 => {
   }))));
 };
 
+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, {
+      key: key,
+      keyConfig: KeyConfigs[key],
+      onClickKey: onClickKey
+    })));
+  }
+}
+
 class GeometryPage extends React__namespace.Component {
   render() {
     const {
@@ -8680,8 +8738,12 @@ class OperatorsPage extends React__namespace.Component {
   }
 }
 
-const allPages = function (props) {
+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) {
@@ -8690,9 +8752,8 @@ const allPages = function (props) {
   if (props.trigonometry) {
     pages.push("Geometry");
   }
-  // @ts-expect-error [FEI-5003] - TS2739 - Type 'TabbarItemType[]' is missing the following properties from type 'ReactElement<any, string | JSXElementConstructor<any>>': type, props, key
   return pages;
-};
+}
 class Keypad extends React__namespace.Component {
   constructor() {
     super(...arguments);
@@ -8705,18 +8766,26 @@ class Keypad extends React__namespace.Component {
       selectedPage
     } = this.state;
     const availablePages = allPages(this.props);
-    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(Tabbar
-    // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
-    , {
+    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(Tabbar, {
       items: availablePages,
-      onSelect: tabbarItem => {
+      selectedItem: selectedPage,
+      onSelectItem: tabbarItem => {
         this.setState({
           selectedPage: tabbarItem
         });
-      }
-    }), selectedPage === "Numbers" && /*#__PURE__*/React__namespace.createElement(NumbersPage, this.props), selectedPage === "Operators" && /*#__PURE__*/React__namespace.createElement(OperatorsPage, this.props), selectedPage === "Geometry" && /*#__PURE__*/React__namespace.createElement(GeometryPage, this.props));
+      },
+      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));
   }
 }
+_defineProperty(Keypad, "defaultProps", {
+  extraKeys: []
+});
+const styles = aphrodite.StyleSheet.create({
+  tabbar: {
+    background: Color__default["default"].white
+  }
+});
 
 exports.CursorContext = CursorContext;
 exports.KeyConfigs = KeyConfigs;