@khanacademy/math-input 17.5.0 → 18.0.0

package/dist/index.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var perseusCore = require('@khanacademy/perseus-core');
-var i18n = require('@khanacademy/wonder-blocks-i18n');
 var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 var wonderStuffCore = require('@khanacademy/wonder-stuff-core');
 var aphrodite = require('aphrodite');
@@ -37,7 +36,6 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var i18n__namespace = /*#__PURE__*/_interopNamespace(i18n);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var MathQuill__default = /*#__PURE__*/_interopDefaultLegacy(MathQuill);
@@ -46,7 +44,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/math-input";
-const libVersion = "17.5.0";
+const libVersion = "18.0.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -129,6 +127,136 @@ class View extends React__namespace.Component {
   }
 }
 
+/**
+ * The translated strings that are used to render the Math Input.
+ */
+
+/**
+ * Mock strings for the Math Input package, to be used for tests and Storybook.
+ */
+const mockStrings = {
+  mathInputBox: "Math input box",
+  fingerTap: "Tap with one or two fingers to open keyboard",
+  before: _ref => {
+    let {
+      obj
+    } = _ref;
+    return `before ${obj}`;
+  },
+  after: _ref2 => {
+    let {
+      obj
+    } = _ref2;
+    return `after ${obj}`;
+  },
+  "beginning of": _ref3 => {
+    let {
+      obj
+    } = _ref3;
+    return `beginning of ${obj}`;
+  },
+  "end of": _ref4 => {
+    let {
+      obj
+    } = _ref4;
+    return `end of ${obj}`;
+  },
+  Baseline: "Baseline",
+  Superscript: "Superscript",
+  selected: _ref5 => {
+    let {
+      obj
+    } = _ref5;
+    return `${obj} selected`;
+  },
+  "no answer": "no answer",
+  "nothing selected": "nothing selected",
+  "nothing to the right": "nothing to the right",
+  "nothing to the left": "nothing to the left",
+  "block is empty": "block is empty",
+  "nothing above": "nothing above",
+  labelValue: _ref6 => {
+    let {
+      label,
+      value
+    } = _ref6;
+    return `${label}: ${value}`;
+  },
+  plus: "Plus",
+  minus: "Minus",
+  negative: "Negative",
+  times: "Multiply",
+  divide: "Divide",
+  decimal: "Decimal",
+  percent: "Percent",
+  cdot: "Multiply",
+  equalsSign: "Equals sign",
+  notEqualsSign: "Not-equals sign",
+  greaterThanSign: "Greater than sign",
+  lessThanSign: "Less than sign",
+  greaterThanOrEqualToSign: "Greater than or equal to sign",
+  lessThanOrEqualSign: "Less than or equal to sign",
+  fractionExpressionInNumerator: "Fraction, with current expression in numerator",
+  fractionExcludingExpression: "Fraction, excluding the current expression",
+  customExponent: "Custom exponent",
+  square: "Square",
+  cube: "Cube",
+  squareRoot: "Square root",
+  cubeRoot: "Cube root",
+  radicalWithCustomRoot: "Radical with custom root",
+  leftParenthesis: "Left parenthesis",
+  rightParenthesis: "Right parenthesis",
+  naturalLog: "Natural logarithm",
+  logBase10: "Logarithm with base 10",
+  logCustomBase: "Logarithm with custom base",
+  sine: "Sine",
+  cosine: "Cosine",
+  tangent: "Tangent",
+  pi: "Pi",
+  theta: "Theta",
+  upArrow: "Up arrow",
+  rightArrow: "Right arrow",
+  downArrow: "Down arrow",
+  leftArrow: "Left arrow",
+  navOutOfParentheses: "Navigate right out of a set of parentheses",
+  navOutOfExponent: "Navigate right out of an exponent",
+  navOutOfBase: "Navigate right out of a base",
+  navIntoNumerator: "Navigate right into the numerator of a fraction",
+  navOutOfNumeratorIntoDenominator: "Navigate right out of the numerator and into the denominator",
+  navOutOfDenominator: "Navigate right out of the denominator of a fraction",
+  delete: "Delete",
+  dismiss: "Dismiss"
+};
+
+/**
+ * MathInputI18nContext provides a way to set the strings and locale that are
+ * used inside the Math Input package.
+ *
+ */
+// @ts-expect-error - TS2322 - Type 'Context<{ strings: {}; locale: string; }>' is not assignable to type 'Context<I18nContextType>'.
+const MathInputI18nContext = /*#__PURE__*/React__namespace.createContext(process.env.NODE_ENV === "test" || process.env.STORYBOOK ? {
+  strings: mockStrings,
+  locale: "en"
+} :
+// We want to return null here, not an empty object, so that we
+// are will throw an error when attempting to access the
+// undefined locale or strings, making it easier to debug.
+null);
+function MathInputI18nContextProvider(_ref) {
+  let {
+    children,
+    strings,
+    locale
+  } = _ref;
+  return /*#__PURE__*/React__namespace.createElement(MathInputI18nContext.Provider, {
+    value: {
+      strings,
+      locale
+    }
+  }, children);
+}
+const useMathInputI18n = () => React.useContext(MathInputI18nContext);
+
 /**
  * KeypadContext provides a way to the Keypad and Perseus Renderers to
  * communicate.
@@ -292,6 +420,9 @@ class CursorHandle extends React__namespace.Component {
 // but it should be good enough for our purposes.
 const touchSlopPx = 8;
 class DragListener {
+  _scrollListener;
+  _moveListener;
+  _endAndCancelListener;
   constructor(onDrag, initialEvent) {
     // We detect drags in two ways. First, by listening for the window
     // scroll event (we consider any legitimate scroll to be a drag).
@@ -374,13 +505,33 @@ const DecimalSeparator = {
   PERIOD: "."
 };
 
-// NOTES(kevinb):
-// - In order to get the correct decimal separator for the current locale,
-//   the locale must bet set using `setLocale(kaLocale)` which can be
-//   imported from wonder-blocks-i18n.
-// - Some languages/locales use different decimal separators than the ones
-//   listed here.  Much of the Arab world uses U+066C.
-const decimalSeparator = i18n.getDecimalSeparator() === "," ? DecimalSeparator.COMMA : DecimalSeparator.PERIOD;
+/**
+ *  Get the character used for separating decimals.
+ */
+const getDecimalSeparator = locale => {
+  let separator = DecimalSeparator.PERIOD;
+  switch (locale) {
+    // TODO(somewhatabstract): Remove this when Chrome supports the `ka`
+    // locale properly.
+    // https://github.com/formatjs/formatjs/issues/1526#issuecomment-559891201
+    //
+    // Supported locales in Chrome:
+    // https://source.chromium.org/chromium/chromium/src/+/master:third_party/icu/scripts/chrome_ui_languages.list
+    case "ka":
+      separator = ",";
+      break;
+    default:
+      const numberWithDecimalSeparator = 1.1;
+      // TODO(FEI-3647): Update to use .formatToParts() once we no longer have to
+      // support Safari 12.
+      const match = new Intl.NumberFormat(locale).format(numberWithDecimalSeparator)
+      // 0x661 is ARABIC-INDIC DIGIT ONE
+      // 0x6F1 is EXTENDED ARABIC-INDIC DIGIT ONE
+      .match(/[^\d\u0661\u06F1]/);
+      separator = match?.[0] ?? ".";
+  }
+  return separator === "," ? DecimalSeparator.COMMA : DecimalSeparator.PERIOD;
+};
 const CDOT_ONLY = ["az", "cs", "da", "de", "hu", "hy", "kk", "ky", "lt", "lv", "nb", "sk", "sr", "sv", "uz"];
 const TIMES_ONLY = ["fr", "tr", "pt-pt"];
 
@@ -395,8 +546,7 @@ const TIMES_ONLY = ["fr", "tr", "pt-pt"];
  * @param {boolean} convertDotToTimes - the setting set by content creators
  * @returns {boolean} - true to convert to × (TIMES), false to use · (CDOT)
  */
-function convertDotToTimesByLocale(convertDotToTimes) {
-  const locale = i18n.getLocale();
+function convertDotToTimesByLocale(locale, convertDotToTimes) {
   if (CDOT_ONLY.includes(locale)) {
     return false;
   }
@@ -412,39 +562,6 @@ function convertDotToTimesByLocale(convertDotToTimes) {
 const inJest = typeof process !== "undefined" && !!process?.env?.JEST_WORKER_ID;
 // Explicitly checking for undefined because Cypress throws an error
 
-const mathQuillStrings = {
-  mathInputBox: i18n__namespace._("Math input box"),
-  ariaStaticStringsMap: {
-    before: obj => i18n__namespace._("before %(obj)s", {
-      obj
-    }),
-    after: obj => i18n__namespace._("after %(obj)s", {
-      obj
-    }),
-    "beginning of": obj => i18n__namespace._("beginning of %(obj)s", {
-      obj
-    }),
-    "end of": obj => i18n__namespace._("end of %(obj)s", {
-      obj
-    }),
-    Baseline: i18n__namespace._("Baseline"),
-    Superscript: i18n__namespace._("Superscript"),
-    selected: obj => i18n__namespace._("%(obj)s selected", {
-      obj
-    }),
-    "no answer": i18n__namespace._("no answer"),
-    "nothing selected": i18n__namespace._("nothing selected"),
-    "nothing to the right": i18n__namespace._("nothing to the right"),
-    "nothing to the left": i18n__namespace._("nothing to the left"),
-    "block is empty": i18n__namespace._("block is empty"),
-    "nothing above": i18n__namespace._("nothing above"),
-    labelValue: (label, value) => i18n__namespace._("%(label)s: %(value)s", {
-      label,
-      value
-    })
-  }
-};
-
 // We only need one MathQuill instance (referred to as MQ in the docs)
 // and that contains some MQ constants and the MathField constructor
 const mathQuillInstance = MathQuill__default["default"].getInterface(3);
@@ -490,10 +607,38 @@ const createBaseConfig = () => ({
  * This allows callers to do minimal configuration as only configs
  * that vary from the default need to be provided.
  */
-function createMathField(container, configCallback) {
+function createMathField(container, strings, configCallback) {
   const baseConfig = createBaseConfig();
   const config = configCallback ? configCallback(baseConfig) : baseConfig;
-  const mathField = mathQuillInstance.MathField(container, config).setAriaLabel(mathQuillStrings.mathInputBox).setAriaStringsOverrideMap(mathQuillStrings.ariaStaticStringsMap);
+  const mathField = mathQuillInstance.MathField(container, config).setAriaLabel(strings.mathInputBox).setAriaStringsOverrideMap({
+    before: obj => strings.before({
+      obj
+    }),
+    after: obj => strings.after({
+      obj
+    }),
+    "beginning of": obj => strings["beginning of"]({
+      obj
+    }),
+    "end of": obj => strings["end of"]({
+      obj
+    }),
+    Baseline: strings.Baseline,
+    Superscript: strings.Superscript,
+    selected: obj => strings.selected({
+      obj
+    }),
+    "no answer": strings["no answer"],
+    "nothing selected": strings["nothing selected"],
+    "nothing to the right": strings["nothing to the right"],
+    "nothing to the left": strings["nothing to the left"],
+    "block is empty": strings["block is empty"],
+    "nothing above": strings["nothing above"],
+    labelValue: (label, value) => strings.labelValue({
+      label,
+      value
+    })
+  });
 
   // We should avoid running SpeechRuleEngine.setup() in Jest. It makes an
   //   HTTP request to fetch non-english speech rules, and cannot be easily
@@ -1143,7 +1288,7 @@ function buildNormalFunctionCallback(command) {
     mathField.keystroke("Left");
   };
 }
-const keyToMathquillMap = {
+const getKeyTranslator = locale => ({
   EXP: handleExponent,
   EXP_2: handleExponent,
   EXP_3: handleExponent,
@@ -1161,7 +1306,7 @@ const keyToMathquillMap = {
   COS: buildNormalFunctionCallback("cos"),
   TAN: buildNormalFunctionCallback("tan"),
   CDOT: buildGenericCallback("\\cdot"),
-  DECIMAL: buildGenericCallback(decimalSeparator),
+  DECIMAL: buildGenericCallback(getDecimalSeparator(locale)),
   DIVIDE: buildGenericCallback("\\div"),
   EQUAL: buildGenericCallback("="),
   GEQ: buildGenericCallback("\\geq"),
@@ -1300,31 +1445,21 @@ const keyToMathquillMap = {
   X: buildGenericCallback("X"),
   Y: buildGenericCallback("Y"),
   Z: buildGenericCallback("Z")
-};
+});
 
 // Notes about MathQuill
-const mobileKeyTranslator = {
-  ...keyToMathquillMap,
-  // note(Matthew): our mobile backspace logic is really complicated
-  // and for some reason doesn't really work in the desktop experience.
-  // So we default to the basic backspace functionality in the
-  // key translator and overwrite it with the complicated logic here
-  // until we can unify the experiences (if we even want to).
-  // https://khanacademy.atlassian.net/browse/LC-906
-  BACKSPACE: handleBackspace
-};
-
 /**
  * This file contains a wrapper around MathQuill so that we can provide a
  * more regular interface for the functionality we need while insulating us
  * from MathQuill changes.
  */
 class MathWrapper {
-  // MathQuill MathField input
-
-  constructor(element) {
-    let callbacks = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    this.mathField = createMathField(element, () => {
+  mathField; // MathQuill MathField input
+  callbacks;
+  mobileKeyTranslator;
+  constructor(element, strings, locale) {
+    let callbacks = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+    this.mathField = createMathField(element, strings, () => {
       return {
         // use a span instead of a textarea so that we don't bring up the
         // native keyboard on mobile when selecting the input
@@ -1334,6 +1469,16 @@ class MathWrapper {
       };
     });
     this.callbacks = callbacks;
+    this.mobileKeyTranslator = {
+      ...getKeyTranslator(locale),
+      // 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
+    };
   }
   focus() {
     // HACK(charlie): We shouldn't reaching into MathQuill internals like
@@ -1359,7 +1504,7 @@ class MathWrapper {
    */
   pressKey(key) {
     const cursor = this.getCursor();
-    const translator = mobileKeyTranslator[key];
+    const translator = this.mobileKeyTranslator[key];
     if (translator) {
       translator(this.mathField, key);
     }
@@ -1509,16 +1654,25 @@ const scrollIntoView = (containerNode, keypadNode) => {
 const constrainingFrictionFactor = 0.8;
 // eslint-disable-next-line react/no-unsafe
 class MathInput extends React__namespace.Component {
+  static contextType = MathInputI18nContext;
+  didTouchOutside;
+  didScroll;
+  mathField;
   // @ts-expect-error - TS2564 - Property 'recordTouchStartOutside' has no initializer and is not definitely assigned in the constructor.
-
+  recordTouchStartOutside;
   // @ts-expect-error - TS2564 - Property 'blurOnTouchEndOutside' has no initializer and is not definitely assigned in the constructor.
-
+  blurOnTouchEndOutside;
   // @ts-expect-error - TS2564 - Property 'blurOnClickOutside' has no initializer and is not definitely assigned in the constructor.
-
+  blurOnClickOutside;
+  dragListener;
+  inputRef;
+  _isMounted;
+  _mathContainer;
   // @ts-expect-error - TS2564 - Property '_container' has no initializer and is not definitely assigned in the constructor.
-
+  _container;
+  _root;
   // @ts-expect-error - TS2564 - Property '_containerBounds' has no initializer and is not definitely assigned in the constructor.
-
+  _containerBounds;
   static defaultProps = {
     style: {},
     value: ""
@@ -1535,7 +1689,7 @@ class MathInput extends React__namespace.Component {
   };
   componentDidMount() {
     this._isMounted = true;
-    this.mathField = new MathWrapper(this._mathContainer, {
+    this.mathField = new MathWrapper(this._mathContainer, this.context.strings, this.context.locale, {
       onCursorMove: cursor => {
         // TODO(charlie): It's not great that there is so much coupling
         // between this keypad and the input behavior. We should wrap
@@ -2244,7 +2398,7 @@ class MathInput extends React__namespace.Component {
     // keyboard appear. It should only require one finger, which is how iOS works.
     // TODO(diedra): Fix the bug that is causing Android to require a two finger tap
     // to the open the keyboard, and then remove the second half of this label.
-    const ariaLabel = mathQuillStrings.mathInputBox + " " + i18n__namespace._("Tap with one or two fingers to open keyboard");
+    const ariaLabel = this.context.strings.mathInputBox + " " + this.context.strings.fingerTap;
     return /*#__PURE__*/React__namespace.createElement(KeypadContext.Consumer, null, _ref => {
       let {
         keypadActive,
@@ -2289,6 +2443,7 @@ class MathInput extends React__namespace.Component {
     });
   }
 }
+MathInput.contextType = MathInputI18nContext;
 const fontSizePt = 18;
 const inputMaxWidth = 128;
 
@@ -2584,6 +2739,7 @@ function Tabbar(props) {
 /**
  * This file contains configuration settings for the buttons in the keypad.
  */
+
 const getDefaultOperatorFields = _ref => {
   let {
     key,
@@ -2632,49 +2788,43 @@ const getDefaultNumberFields = _ref3 => {
     }
   };
 };
-const KeyConfigs = {
+const KeyConfigs = strings => ({
   // Basic math
   PLUS: {
     ...getDefaultOperatorFields({
       key: "PLUS",
-      // I18N: A label for a 'plus' sign.
-      ariaLabel: i18n__namespace._("Plus")
+      ariaLabel: strings.plus
     })
   },
   MINUS: {
     ...getDefaultOperatorFields({
       key: "MINUS",
-      // I18N: A label for a 'minus' sign.
-      ariaLabel: i18n__namespace._("Minus")
+      ariaLabel: strings.minus
     })
   },
   NEGATIVE: {
     ...getDefaultOperatorFields({
       key: "NEGATIVE",
-      // I18N: A label for a 'negative' sign.
-      ariaLabel: i18n__namespace._("Negative")
+      ariaLabel: strings.negative
     })
   },
   TIMES: {
     ...getDefaultOperatorFields({
       key: "TIMES",
-      // I18N: A label for a 'multiply' sign.
-      ariaLabel: i18n__namespace._("Multiply")
+      ariaLabel: strings.times
     })
   },
   DIVIDE: {
     ...getDefaultOperatorFields({
       key: "DIVIDE",
-      // I18N: A label for a 'divide' sign.
-      ariaLabel: i18n__namespace._("Divide")
+      ariaLabel: strings.divide
     })
   },
   DECIMAL: {
     ...getDefaultOperatorFields({
       key: "DECIMAL",
       keyType: "VALUE",
-      // I18N: A label for a 'decimal' sign (represented as '.' or ',').
-      ariaLabel: i18n__namespace._("Decimal")
+      ariaLabel: strings.decimal
     })
   },
   PERIOD: {
@@ -2687,214 +2837,168 @@ const KeyConfigs = {
   PERCENT: {
     ...getDefaultOperatorFields({
       key: "PERCENT",
-      // I18N: A label for a 'percent' sign (represented as '%').
-      ariaLabel: i18n__namespace._("Percent")
+      ariaLabel: strings.percent
     })
   },
   CDOT: {
     ...getDefaultOperatorFields({
       key: "CDOT",
-      // I18N: A label for a 'centered dot' multiplication sign (represented as '⋅').
-      ariaLabel: i18n__namespace._("Multiply")
+      ariaLabel: strings.cdot
     })
   },
   EQUAL: {
     ...getDefaultOperatorFields({
       key: "EQUAL",
-      // I18N: A label for an 'equals' sign (represented as '=').
-      ariaLabel: i18n__namespace._("Equals sign")
+      ariaLabel: strings.equalsSign
     })
   },
   NEQ: {
     ...getDefaultOperatorFields({
       key: "NEQ",
-      // I18N: A label for a 'not-equals' sign (represented as '≠').
-      ariaLabel: i18n__namespace._("Not-equals sign")
+      ariaLabel: strings.notEqualsSign
     })
   },
   GT: {
     ...getDefaultOperatorFields({
       key: "GT",
-      // I18N: A label for a 'greater than' sign (represented as '>').
-      ariaLabel: i18n__namespace._("Greater than sign")
+      ariaLabel: strings.greaterThanSign
     })
   },
   LT: {
     ...getDefaultOperatorFields({
       key: "LT",
-      // I18N: A label for a 'less than' sign (represented as '<').
-      ariaLabel: i18n__namespace._("Less than sign")
+      ariaLabel: strings.lessThanSign
     })
   },
   GEQ: {
     ...getDefaultOperatorFields({
       key: "GEQ",
-      // I18N: A label for a 'greater than or equal to' sign (represented as '≥').
-      ariaLabel: i18n__namespace._("Greater than or equal to sign")
+      ariaLabel: strings.greaterThanOrEqualToSign
     })
   },
   LEQ: {
     ...getDefaultOperatorFields({
       key: "LEQ",
-      // I18N: A label for a 'less than or equal to' sign (represented as '≤').
-      ariaLabel: i18n__namespace._("Less than or equal to sign")
+      ariaLabel: strings.lessThanOrEqualSign
     })
   },
   // mobile native
   FRAC_INCLUSIVE: {
     ...getDefaultOperatorFields({
       key: "FRAC_INCLUSIVE",
-      // I18N: A label for a button that creates a new fraction and puts the
-      // current expression in the numerator of that fraction.
-      ariaLabel: i18n__namespace._("Fraction, with current expression in numerator")
+      ariaLabel: strings.fractionExpressionInNumerator
     })
   },
   // mobile native
   FRAC_EXCLUSIVE: {
     ...getDefaultOperatorFields({
       key: "FRAC_EXCLUSIVE",
-      // I18N: A label for a button that creates a new fraction next to the
-      // cursor.
-      ariaLabel: i18n__namespace._("Fraction, excluding the current expression")
+      ariaLabel: strings.fractionExcludingExpression
     })
   },
   // mobile web
   FRAC: {
     ...getDefaultOperatorFields({
       key: "FRAC",
-      // I18N: A label for a button that creates a new fraction next to the
-      // cursor.
-      ariaLabel: i18n__namespace._("Fraction, excluding the current expression")
+      ariaLabel: strings.fractionExcludingExpression
     })
   },
   EXP: {
     ...getDefaultOperatorFields({
       key: "EXP",
-      // I18N: A label for a button that will allow the user to input a
-      // custom exponent.
-      ariaLabel: i18n__namespace._("Custom exponent")
+      ariaLabel: strings.customExponent
     })
   },
   EXP_2: {
     ...getDefaultOperatorFields({
       key: "EXP_2",
-      // I18N: A label for a button that will square (take to the second
-      // power) some math.
-      ariaLabel: i18n__namespace._("Square")
+      ariaLabel: strings.square
     })
   },
   EXP_3: {
     ...getDefaultOperatorFields({
       key: "EXP_3",
-      // I18N: A label for a button that will cube (take to the third power)
-      // some math.
-      ariaLabel: i18n__namespace._("Cube")
+      ariaLabel: strings.cube
     })
   },
   SQRT: {
     ...getDefaultOperatorFields({
       key: "SQRT",
-      // I18N: A label for a button that will allow the user to input a
-      // square root.
-      ariaLabel: i18n__namespace._("Square root")
+      ariaLabel: strings.squareRoot
     })
   },
   CUBE_ROOT: {
     ...getDefaultOperatorFields({
       key: "CUBE_ROOT",
-      // I18N: A label for a button that will allow the user to input a
-      // cube root.
-      ariaLabel: i18n__namespace._("Cube root")
+      ariaLabel: strings.cubeRoot
     })
   },
   RADICAL: {
     ...getDefaultOperatorFields({
       key: "RADICAL",
-      // I18N: A label for a button that will allow the user to input a
-      // radical with a custom root.
-      ariaLabel: i18n__namespace._("Radical with custom root")
+      ariaLabel: strings.radicalWithCustomRoot
     })
   },
   LEFT_PAREN: {
     ...getDefaultOperatorFields({
       key: "LEFT_PAREN",
-      // I18N: A label for a button that will allow the user to input a
-      // left parenthesis (i.e. '(')
-      ariaLabel: i18n__namespace._("Left parenthesis")
+      ariaLabel: strings.leftParenthesis
     })
   },
   RIGHT_PAREN: {
     ...getDefaultOperatorFields({
       key: "RIGHT_PAREN",
-      // I18N: A label for a button that will allow the user to input a
-      // right parenthesis (i.e. ')')
-      ariaLabel: i18n__namespace._("Right parenthesis")
+      ariaLabel: strings.rightParenthesis
     })
   },
   LN: {
     ...getDefaultOperatorFields({
       key: "LN",
-      // I18N: A label for a button that will allow the user to input a
-      // natural logarithm.
-      ariaLabel: i18n__namespace._("Natural logarithm")
+      ariaLabel: strings.naturalLog
     })
   },
   LOG: {
     ...getDefaultOperatorFields({
       key: "LOG",
-      // I18N: A label for a button that will allow the user to input a
-      // logarithm with base 10.
-      ariaLabel: i18n__namespace._("Logarithm with base 10")
+      ariaLabel: strings.logBase10
     })
   },
   LOG_N: {
     ...getDefaultOperatorFields({
       key: "LOG_N",
-      // I18N: A label for a button that will allow the user to input a
-      // logarithm with a custom base.
-      ariaLabel: i18n__namespace._("Logarithm with custom base")
+      ariaLabel: strings.logCustomBase
     })
   },
   SIN: {
     ...getDefaultOperatorFields({
       key: "SIN",
-      // I18N: A label for a button that will allow the user to input a
-      // sine function.
-      ariaLabel: i18n__namespace._("Sine")
+      ariaLabel: strings.sine
     })
   },
   COS: {
     ...getDefaultOperatorFields({
       key: "COS",
-      // I18N: A label for a button that will allow the user to input a
-      // cosine function.
-      ariaLabel: i18n__namespace._("Cosine")
+      ariaLabel: strings.cosine
     })
   },
   TAN: {
     ...getDefaultOperatorFields({
       key: "TAN",
-      // I18N: A label for a button that will allow the user to input a
-      // tangent function.
-      ariaLabel: i18n__namespace._("Tangent")
+      ariaLabel: strings.tangent
     })
   },
   PI: {
     ...getDefaultValueFields({
       key: "PI",
       data: "\\pi",
-      // I18N: A label for a button that will allow the user to input the
-      // mathematical constant pi (i.e., π)
-      ariaLabel: i18n__namespace._("Pi")
+      ariaLabel: strings.pi
     })
   },
   THETA: {
     ...getDefaultValueFields({
       key: "THETA",
       data: "\\theta",
-      // I18N: A label for a button that will allow the user to input the
-      // mathematical constant theta (i.e., θ)
-      ariaLabel: i18n__namespace._("Theta")
+      ariaLabel: strings.theta
     })
   },
   NOOP: {
@@ -2908,77 +3012,77 @@ const KeyConfigs = {
     ...getDefaultOperatorFields({
       key: "UP",
       keyType: "INPUT_NAVIGATION",
-      ariaLabel: i18n__namespace._("Up arrow")
+      ariaLabel: strings.upArrow
     })
   },
   RIGHT: {
     ...getDefaultOperatorFields({
       key: "RIGHT",
       keyType: "INPUT_NAVIGATION",
-      ariaLabel: i18n__namespace._("Right arrow")
+      ariaLabel: strings.rightArrow
     })
   },
   DOWN: {
     ...getDefaultOperatorFields({
       key: "DOWN",
       keyType: "INPUT_NAVIGATION",
-      ariaLabel: i18n__namespace._("Down arrow")
+      ariaLabel: strings.downArrow
     })
   },
   LEFT: {
     ...getDefaultOperatorFields({
       key: "LEFT",
       keyType: "INPUT_NAVIGATION",
-      ariaLabel: i18n__namespace._("Left arrow")
+      ariaLabel: strings.leftArrow
     })
   },
   JUMP_OUT_PARENTHESES: {
     ...getDefaultOperatorFields({
       key: "JUMP_OUT_PARENTHESES",
       keyType: "INPUT_NAVIGATION",
-      ariaLabel: i18n__namespace._("Navigate right out of a set of parentheses")
+      ariaLabel: strings.navOutOfParentheses
     })
   },
   JUMP_OUT_EXPONENT: {
     ...getDefaultOperatorFields({
       key: "JUMP_OUT_EXPONENT",
       keyType: "INPUT_NAVIGATION",
-      ariaLabel: i18n__namespace._("Navigate right out of an exponent")
+      ariaLabel: strings.navOutOfExponent
     })
   },
   JUMP_OUT_BASE: {
     ...getDefaultOperatorFields({
       key: "JUMP_OUT_BASE",
       keyType: "INPUT_NAVIGATION",
-      ariaLabel: i18n__namespace._("Navigate right out of a base")
+      ariaLabel: strings.navOutOfBase
     })
   },
   JUMP_INTO_NUMERATOR: {
     ...getDefaultOperatorFields({
       key: "JUMP_INTO_NUMERATOR",
       keyType: "INPUT_NAVIGATION",
-      ariaLabel: i18n__namespace._("Navigate right into the numerator of a fraction")
+      ariaLabel: strings.navIntoNumerator
     })
   },
   JUMP_OUT_NUMERATOR: {
     ...getDefaultOperatorFields({
       key: "JUMP_OUT_NUMERATOR",
       keyType: "INPUT_NAVIGATION",
-      ariaLabel: i18n__namespace._("Navigate right out of the numerator and into the denominator")
+      ariaLabel: strings.navOutOfNumeratorIntoDenominator
     })
   },
   JUMP_OUT_DENOMINATOR: {
     ...getDefaultOperatorFields({
       key: "JUMP_OUT_DENOMINATOR",
       keyType: "INPUT_NAVIGATION",
-      ariaLabel: i18n__namespace._("Navigate right out of the denominator of a fraction")
+      ariaLabel: strings.navOutOfDenominator
     })
   },
   BACKSPACE: {
     ...getDefaultOperatorFields({
       key: "BACKSPACE",
       keyType: "INPUT_NAVIGATION",
-      ariaLabel: i18n__namespace._("Delete")
+      ariaLabel: strings.delete
     })
   },
   // Keypad navigation
@@ -2986,8 +3090,7 @@ const KeyConfigs = {
     ...getDefaultOperatorFields({
       key: "DISMISS",
       keyType: "KEYPAD_NAVIGATION",
-      // I18N: A label for a button that will dismiss/hide a keypad.
-      ariaLabel: i18n__namespace._("Dismiss")
+      ariaLabel: strings.dismiss
     })
   },
   // TODO(charlie): Use the numeral color for the 'Many' key.
@@ -3329,7 +3432,7 @@ const KeyConfigs = {
       key: "LOG_B"
     })
   }
-};
+});
 
 /*
 The SVGs in this file should be treated as binary assets. If, in the future,
@@ -3347,6 +3450,9 @@ function ButtonAsset(_ref) {
   let {
     id
   } = _ref;
+  const {
+    locale
+  } = useMathInputI18n();
   switch (id) {
     case "NUM_0":
       return /*#__PURE__*/React__namespace.createElement("svg", {
@@ -3462,7 +3568,7 @@ function ButtonAsset(_ref) {
     case "PERIOD":
       // Different locales use different symbols for the decimal separator
       // (, vs .)
-      if (id === "DECIMAL" && decimalSeparator === DecimalSeparator.COMMA) {
+      if (id === "DECIMAL" && getDecimalSeparator(locale) === DecimalSeparator.COMMA) {
         // comma decimal separator
         return /*#__PURE__*/React__namespace.createElement("svg", {
           width: "40",
@@ -4878,13 +4984,17 @@ function ExtrasPage(props) {
     extraKeys,
     onClickKey
   } = props;
+  const {
+    strings
+  } = useMathInputI18n();
+  const Keys = KeyConfigs(strings);
   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],
+      keyConfig: Keys[key],
       onClickKey: onClickKey,
       coord: [coordX, coordY]
     });
@@ -4898,7 +5008,7 @@ const expandedViewThreshold = 500;
 // This is a helper function that returns the correct context for the cursor
 // based on the cursorContext prop.  It is used in the keypad to determine
 // which key to render as the "jump out" key.
-function getCursorContextConfig(cursorContext) {
+function getCursorContextConfig(strings, cursorContext) {
   if (!cursorContext) {
     return null;
   }
@@ -4906,17 +5016,17 @@ function getCursorContextConfig(cursorContext) {
     case CursorContext.NONE:
       return null;
     case CursorContext.IN_PARENS:
-      return KeyConfigs.JUMP_OUT_PARENTHESES;
+      return KeyConfigs(strings).JUMP_OUT_PARENTHESES;
     case CursorContext.IN_SUPER_SCRIPT:
-      return KeyConfigs.JUMP_OUT_EXPONENT;
+      return KeyConfigs(strings).JUMP_OUT_EXPONENT;
     case CursorContext.IN_SUB_SCRIPT:
-      return KeyConfigs.JUMP_OUT_BASE;
+      return KeyConfigs(strings).JUMP_OUT_BASE;
     case CursorContext.IN_NUMERATOR:
-      return KeyConfigs.JUMP_OUT_NUMERATOR;
+      return KeyConfigs(strings).JUMP_OUT_NUMERATOR;
     case CursorContext.IN_DENOMINATOR:
-      return KeyConfigs.JUMP_OUT_DENOMINATOR;
+      return KeyConfigs(strings).JUMP_OUT_DENOMINATOR;
     case CursorContext.BEFORE_FRACTION:
-      return KeyConfigs.JUMP_INTO_NUMERATOR;
+      return KeyConfigs(strings).JUMP_INTO_NUMERATOR;
   }
 }
 
@@ -4925,70 +5035,74 @@ function FractionsPage(props) {
     onClickKey,
     cursorContext
   } = props;
-  const cursorKeyConfig = getCursorContextConfig(cursorContext);
+  const {
+    strings
+  } = useMathInputI18n();
+  const cursorKeyConfig = getCursorContextConfig(strings, cursorContext);
   // These keys are arranged sequentially so that tabbing follows numerical order. This
   // allows us to visually mimic a keypad without affecting a11y. The visual order of the
   // keys in the keypad is determined by their coordinates, not their order in the DOM.
+  const Keys = KeyConfigs(strings);
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_1,
+    keyConfig: Keys.NUM_1,
     onClickKey: onClickKey,
     coord: [0, 2]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_2,
+    keyConfig: Keys.NUM_2,
     onClickKey: onClickKey,
     coord: [1, 2]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_3,
+    keyConfig: Keys.NUM_3,
     onClickKey: onClickKey,
     coord: [2, 2]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_4,
+    keyConfig: Keys.NUM_4,
     onClickKey: onClickKey,
     coord: [0, 1]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_5,
+    keyConfig: Keys.NUM_5,
     onClickKey: onClickKey,
     coord: [1, 1]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_6,
+    keyConfig: Keys.NUM_6,
     onClickKey: onClickKey,
     coord: [2, 1]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_7,
+    keyConfig: Keys.NUM_7,
     onClickKey: onClickKey,
     coord: [0, 0]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_8,
+    keyConfig: Keys.NUM_8,
     onClickKey: onClickKey,
     coord: [1, 0]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_9,
+    keyConfig: Keys.NUM_9,
     onClickKey: onClickKey,
     coord: [2, 0]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_0,
+    keyConfig: Keys.NUM_0,
     onClickKey: onClickKey,
     coord: [0, 3]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.DECIMAL,
+    keyConfig: Keys.DECIMAL,
     onClickKey: onClickKey,
     coord: [1, 3]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NEGATIVE,
+    keyConfig: Keys.NEGATIVE,
     onClickKey: onClickKey,
     coord: [2, 3]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.PERCENT,
+    keyConfig: Keys.PERCENT,
     onClickKey: onClickKey,
     coord: [3, 0],
     secondary: true
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.PI,
+    keyConfig: Keys.PI,
     onClickKey: onClickKey,
     coord: [3, 1],
     secondary: true
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.FRAC,
+    keyConfig: Keys.FRAC,
     onClickKey: onClickKey,
     coord: [3, 2],
     secondary: true
@@ -4998,7 +5112,7 @@ function FractionsPage(props) {
     coord: [3, 3],
     secondary: true
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.BACKSPACE,
+    keyConfig: Keys.BACKSPACE,
     onClickKey: onClickKey,
     coord: [4, 3],
     action: true
@@ -5009,16 +5123,20 @@ function GeometryPage(props) {
   const {
     onClickKey
   } = props;
+  const {
+    strings
+  } = useMathInputI18n();
+  const Keys = KeyConfigs(strings);
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.SIN,
+    keyConfig: Keys.SIN,
     onClickKey: onClickKey,
     coord: [0, 0]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.COS,
+    keyConfig: Keys.COS,
     onClickKey: onClickKey,
     coord: [1, 0]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.TAN,
+    keyConfig: Keys.TAN,
     onClickKey: onClickKey,
     coord: [2, 0]
   }));
@@ -5028,59 +5146,63 @@ function NumbersPage(props) {
   const {
     onClickKey
   } = props;
+  const {
+    strings
+  } = useMathInputI18n();
+  const Keys = KeyConfigs(strings);
   // These keys are arranged sequentially so that tabbing follows numerical order. This
   // allows us to visually mimic a keypad without affecting a11y. The visual order of the
   // keys in the keypad is determined by their coordinates, not their order in the DOM.
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_1,
+    keyConfig: Keys.NUM_1,
     onClickKey: onClickKey,
     coord: [0, 2]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_2,
+    keyConfig: Keys.NUM_2,
     onClickKey: onClickKey,
     coord: [1, 2]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_3,
+    keyConfig: Keys.NUM_3,
     onClickKey: onClickKey,
     coord: [2, 2]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_4,
+    keyConfig: Keys.NUM_4,
     onClickKey: onClickKey,
     coord: [0, 1]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_5,
+    keyConfig: Keys.NUM_5,
     onClickKey: onClickKey,
     coord: [1, 1]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_6,
+    keyConfig: Keys.NUM_6,
     onClickKey: onClickKey,
     coord: [2, 1]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_7,
+    keyConfig: Keys.NUM_7,
     onClickKey: onClickKey,
     coord: [0, 0]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_8,
+    keyConfig: Keys.NUM_8,
     onClickKey: onClickKey,
     coord: [1, 0]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_9,
+    keyConfig: Keys.NUM_9,
     onClickKey: onClickKey,
     coord: [2, 0]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_0,
+    keyConfig: Keys.NUM_0,
     onClickKey: onClickKey,
     coord: [0, 3]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.DECIMAL,
+    keyConfig: Keys.DECIMAL,
     onClickKey: onClickKey,
     coord: [1, 3]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NEGATIVE,
+    keyConfig: Keys.NEGATIVE,
     onClickKey: onClickKey,
     coord: [2, 3]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.PERCENT,
+    keyConfig: Keys.PERCENT,
     onClickKey: onClickKey,
     coord: [3, 0],
     secondary: true
@@ -5095,56 +5217,60 @@ function OperatorsPage(props) {
     basicRelations,
     advancedRelations
   } = props;
+  const {
+    strings
+  } = useMathInputI18n();
+  const Keys = KeyConfigs(strings);
   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,
+    keyConfig: Keys.EXP_2,
     onClickKey: onClickKey,
     coord: [0, 0]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.EXP,
+    keyConfig: Keys.EXP,
     onClickKey: onClickKey,
     coord: [1, 0]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.SQRT,
+    keyConfig: Keys.SQRT,
     onClickKey: onClickKey,
     coord: [2, 0]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.RADICAL,
+    keyConfig: Keys.RADICAL,
     onClickKey: onClickKey,
     coord: [3, 0]
   })), logarithms && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.LOG,
+    keyConfig: Keys.LOG,
     onClickKey: onClickKey,
     coord: [0, 1]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.LOG_N,
+    keyConfig: Keys.LOG_N,
     onClickKey: onClickKey,
     coord: [1, 1]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.LN,
+    keyConfig: Keys.LN,
     onClickKey: onClickKey,
     coord: [2, 1]
   })), basicRelations && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.EQUAL,
+    keyConfig: Keys.EQUAL,
     onClickKey: onClickKey,
     coord: [0, 2]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.LT,
+    keyConfig: Keys.LT,
     onClickKey: onClickKey,
     coord: [1, 2]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.GT,
+    keyConfig: Keys.GT,
     onClickKey: onClickKey,
     coord: [2, 2]
   })), advancedRelations && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NEQ,
+    keyConfig: Keys.NEQ,
     onClickKey: onClickKey,
     coord: [0, 3]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.LEQ,
+    keyConfig: Keys.LEQ,
     onClickKey: onClickKey,
     coord: [1, 3]
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.GEQ,
+    keyConfig: Keys.GEQ,
     onClickKey: onClickKey,
     coord: [2, 3]
   })));
@@ -5253,24 +5379,28 @@ function NavigationPad(props) {
   const {
     onClickKey
   } = props;
+  const {
+    strings
+  } = useMathInputI18n();
+  const Keys = KeyConfigs(strings);
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: styles$2.container
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: styles$2.grid
   }, /*#__PURE__*/React__namespace.createElement(NavigationButton, {
-    keyConfig: KeyConfigs.UP,
+    keyConfig: Keys.UP,
     onClickKey: onClickKey,
     coord: [1, 0]
   }), /*#__PURE__*/React__namespace.createElement(NavigationButton, {
-    keyConfig: KeyConfigs.RIGHT,
+    keyConfig: Keys.RIGHT,
     onClickKey: onClickKey,
     coord: [2, 1]
   }), /*#__PURE__*/React__namespace.createElement(NavigationButton, {
-    keyConfig: KeyConfigs.DOWN,
+    keyConfig: Keys.DOWN,
     onClickKey: onClickKey,
     coord: [1, 2]
   }), /*#__PURE__*/React__namespace.createElement(NavigationButton, {
-    keyConfig: KeyConfigs.LEFT,
+    keyConfig: Keys.LEFT,
     onClickKey: onClickKey,
     coord: [0, 1]
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
@@ -5306,42 +5436,47 @@ function SharedKeys(props) {
     convertDotToTimes,
     selectedPage
   } = props;
-  const cursorKeyConfig = getCursorContextConfig(cursorContext);
+  const {
+    strings,
+    locale
+  } = useMathInputI18n();
+  const cursorKeyConfig = getCursorContextConfig(strings, cursorContext);
+  const Keys = KeyConfigs(strings);
 
   // Fraction position depends on the page
   const fractionCoord = selectedPage === "Numbers" || selectedPage === "Operators" ? [3, 1] : [3, 0];
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.FRAC,
+    keyConfig: Keys.FRAC,
     onClickKey: onClickKey,
     coord: fractionCoord,
     secondary: true
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.PLUS,
+    keyConfig: Keys.PLUS,
     onClickKey: onClickKey,
     coord: [4, 0],
     secondary: true
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.MINUS,
+    keyConfig: Keys.MINUS,
     onClickKey: onClickKey,
     coord: [5, 0],
     secondary: true
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: convertDotToTimesByLocale(!!convertDotToTimes) ? KeyConfigs.TIMES : KeyConfigs.CDOT,
+    keyConfig: convertDotToTimesByLocale(locale, !!convertDotToTimes) ? Keys.TIMES : Keys.CDOT,
     onClickKey: onClickKey,
     coord: [4, 1],
     secondary: true
   }), divisionKey && /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.DIVIDE,
+    keyConfig: Keys.DIVIDE,
     onClickKey: onClickKey,
     coord: [5, 1],
     secondary: true
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.LEFT_PAREN,
+    keyConfig: Keys.LEFT_PAREN,
     onClickKey: onClickKey,
     coord: [4, 2],
     secondary: true
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.RIGHT_PAREN,
+    keyConfig: Keys.RIGHT_PAREN,
     onClickKey: onClickKey,
     coord: [5, 2],
     secondary: true
@@ -5351,7 +5486,7 @@ function SharedKeys(props) {
     coord: [4, 3],
     secondary: true
   }), /*#__PURE__*/React__namespace.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.BACKSPACE,
+    keyConfig: Keys.BACKSPACE,
     onClickKey: onClickKey,
     coord: [5, 3],
     action: true
@@ -5584,10 +5719,11 @@ function processStyleType(style) {
 class TransitionChild extends React__namespace.Component {
   // Each 2-tuple in the queue represents two classnames: one to remove and
   // one to add (in that order).
-
+  classNameQueue;
   // We keep track of all of the current applied classes so that we can remove
   // them before a new transition starts in the case of the current transition
   // being interrupted.
+  appliedClassNames;
   _isMounted = false;
 
   // The use of getDerivedStateFromProps here is to avoid an extra call to
@@ -6026,13 +6162,16 @@ exports.KeyConfigs = KeyConfigs;
 exports.KeypadContext = KeypadContext;
 exports.KeypadInput = MathInput;
 exports.KeypadType = KeypadType;
+exports.MathInputI18nContext = MathInputI18nContext;
+exports.MathInputI18nContextProvider = MathInputI18nContextProvider;
 exports.MobileKeypad = MobileKeypad;
 exports.StatefulKeypadContextProvider = StatefulKeypadContextProvider;
 exports.convertDotToTimesByLocale = convertDotToTimesByLocale;
 exports.createMathField = createMathField;
 exports.getCursorContext = getCursorContext;
-exports.keyTranslator = keyToMathquillMap;
+exports.getKeyTranslator = getKeyTranslator;
 exports.keypadElementPropType = keypadElementPropType;
 exports.libVersion = libVersion;
 exports.mathQuillInstance = mathQuillInstance;
+exports.useMathInputI18n = useMathInputI18n;
 //# sourceMappingURL=index.js.map