@khanacademy/math-input 17.4.1 → 18.0.0

package/dist/es/index.js

@@ -1,11 +1,9 @@
 import { addLibraryVersionToPerseusDebug } from '@khanacademy/perseus-core';
-import * as i18n from '@khanacademy/wonder-blocks-i18n';
-import { getDecimalSeparator, getLocale } from '@khanacademy/wonder-blocks-i18n';
 import { color } from '@khanacademy/wonder-blocks-tokens';
 import { entries } from '@khanacademy/wonder-stuff-core';
 import { StyleSheet, css } from 'aphrodite';
 import * as React from 'react';
-import { useState, useMemo, useEffect } from 'react';
+import { useContext, useState, useMemo, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { SpeechRuleEngine } from '@khanacademy/mathjax-renderer';
 import MathQuill from 'mathquill';
@@ -17,21 +15,19 @@ import PropTypes from 'prop-types';
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/math-input";
-const libVersion = "17.4.1";
+const libVersion = "18.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
@@ -102,6 +98,117 @@ View.styles = StyleSheet.create({
   }
 });
 
+/**
+ * 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: ({
+    obj
+  }) => `before ${obj}`,
+  after: ({
+    obj
+  }) => `after ${obj}`,
+  "beginning of": ({
+    obj
+  }) => `beginning of ${obj}`,
+  "end of": ({
+    obj
+  }) => `end of ${obj}`,
+  Baseline: "Baseline",
+  Superscript: "Superscript",
+  selected: ({
+    obj
+  }) => `${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: ({
+    label,
+    value
+  }) => `${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.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({
+  children,
+  strings,
+  locale
+}) {
+  return /*#__PURE__*/React.createElement(MathInputI18nContext.Provider, {
+    value: {
+      strings,
+      locale
+    }
+  }, children);
+}
+const useMathInputI18n = () => useContext(MathInputI18nContext);
+
 /**
  * KeypadContext provides a way to the Keypad and Perseus Renderers to
  * communicate.
@@ -347,13 +454,34 @@ 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 = getDecimalSeparator() === "," ? DecimalSeparator.COMMA : DecimalSeparator.PERIOD;
+/**
+ *  Get the character used for separating decimals.
+ */
+const getDecimalSeparator = locale => {
+  var _match$;
+  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$ = match == null ? void 0 : match[0]) != null ? _match$ : ".";
+  }
+  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"];
 
@@ -368,8 +496,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 = getLocale();
+function convertDotToTimesByLocale(locale, convertDotToTimes) {
   if (CDOT_ONLY.includes(locale)) {
     return false;
   }
@@ -385,39 +512,6 @@ function convertDotToTimesByLocale(convertDotToTimes) {
 const inJest = typeof process !== "undefined" && !!((_process = process) != null && (_process = _process.env) != null && _process.JEST_WORKER_ID);
 // Explicitly checking for undefined because Cypress throws an error
 
-const mathQuillStrings = {
-  mathInputBox: i18n._("Math input box"),
-  ariaStaticStringsMap: {
-    before: obj => i18n._("before %(obj)s", {
-      obj
-    }),
-    after: obj => i18n._("after %(obj)s", {
-      obj
-    }),
-    "beginning of": obj => i18n._("beginning of %(obj)s", {
-      obj
-    }),
-    "end of": obj => i18n._("end of %(obj)s", {
-      obj
-    }),
-    Baseline: i18n._("Baseline"),
-    Superscript: i18n._("Superscript"),
-    selected: obj => i18n._("%(obj)s selected", {
-      obj
-    }),
-    "no answer": i18n._("no answer"),
-    "nothing selected": i18n._("nothing selected"),
-    "nothing to the right": i18n._("nothing to the right"),
-    "nothing to the left": i18n._("nothing to the left"),
-    "block is empty": i18n._("block is empty"),
-    "nothing above": i18n._("nothing above"),
-    labelValue: (label, value) => i18n._("%(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.getInterface(3);
@@ -463,10 +557,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
@@ -1115,7 +1237,7 @@ function buildNormalFunctionCallback(command) {
     mathField.keystroke("Left");
   };
 }
-const keyToMathquillMap = {
+const getKeyTranslator = locale => ({
   EXP: handleExponent,
   EXP_2: handleExponent,
   EXP_3: handleExponent,
@@ -1133,7 +1255,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"),
@@ -1272,16 +1394,6 @@ const keyToMathquillMap = {
   X: buildGenericCallback("X"),
   Y: buildGenericCallback("Y"),
   Z: buildGenericCallback("Z")
-};
-
-const mobileKeyTranslator = _extends({}, keyToMathquillMap, {
-  // note(Matthew): our mobile backspace logic is really complicated
-  // and for some reason doesn't really work in the desktop experience.
-  // So we default to the basic backspace functionality in the
-  // key translator and overwrite it with the complicated logic here
-  // until we can unify the experiences (if we even want to).
-  // https://khanacademy.atlassian.net/browse/LC-906
-  BACKSPACE: handleBackspace
 });
 
 /**
@@ -1290,11 +1402,12 @@ const mobileKeyTranslator = _extends({}, keyToMathquillMap, {
  * from MathQuill changes.
  */
 class MathWrapper {
-  constructor(element, callbacks = {}) {
+  constructor(element, strings, locale, callbacks = {}) {
     this.mathField = void 0;
     // MathQuill MathField input
     this.callbacks = void 0;
-    this.mathField = createMathField(element, () => {
+    this.mobileKeyTranslator = void 0;
+    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
@@ -1304,6 +1417,15 @@ class MathWrapper {
       };
     });
     this.callbacks = callbacks;
+    this.mobileKeyTranslator = _extends({}, 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
@@ -1329,7 +1451,7 @@ class MathWrapper {
    */
   pressKey(key) {
     const cursor = this.getCursor();
-    const translator = mobileKeyTranslator[key];
+    const translator = this.mobileKeyTranslator[key];
     if (translator) {
       translator(this.mathField, key);
     }
@@ -2057,7 +2179,7 @@ class MathInput extends React.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
@@ -2215,7 +2337,7 @@ class MathInput extends React.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._("Tap with one or two fingers to open keyboard");
+    const ariaLabel = this.context.strings.mathInputBox + " " + this.context.strings.fingerTap;
     return /*#__PURE__*/React.createElement(KeypadContext.Consumer, null, ({
       keypadActive,
       setKeypadActive
@@ -2257,10 +2379,12 @@ class MathInput extends React.Component {
     }))));
   }
 }
+MathInput.contextType = MathInputI18nContext;
 MathInput.defaultProps = {
   style: {},
   value: ""
 };
+MathInput.contextType = MathInputI18nContext;
 const fontSizePt = 18;
 const inputMaxWidth = 128;
 
@@ -2551,6 +2675,10 @@ function Tabbar(props) {
   })));
 }
 
+/**
+ * This file contains configuration settings for the buttons in the keypad.
+ */
+
 const getDefaultOperatorFields = ({
   key,
   keyType: _keyType = "OPERATOR",
@@ -2590,38 +2718,32 @@ const getDefaultNumberFields = ({
     data: _data3
   }
 });
-const KeyConfigs = {
+const KeyConfigs = strings => ({
   // Basic math
   PLUS: _extends({}, getDefaultOperatorFields({
     key: "PLUS",
-    // I18N: A label for a 'plus' sign.
-    ariaLabel: i18n._("Plus")
+    ariaLabel: strings.plus
   })),
   MINUS: _extends({}, getDefaultOperatorFields({
     key: "MINUS",
-    // I18N: A label for a 'minus' sign.
-    ariaLabel: i18n._("Minus")
+    ariaLabel: strings.minus
   })),
   NEGATIVE: _extends({}, getDefaultOperatorFields({
     key: "NEGATIVE",
-    // I18N: A label for a 'negative' sign.
-    ariaLabel: i18n._("Negative")
+    ariaLabel: strings.negative
   })),
   TIMES: _extends({}, getDefaultOperatorFields({
     key: "TIMES",
-    // I18N: A label for a 'multiply' sign.
-    ariaLabel: i18n._("Multiply")
+    ariaLabel: strings.times
   })),
   DIVIDE: _extends({}, getDefaultOperatorFields({
     key: "DIVIDE",
-    // I18N: A label for a 'divide' sign.
-    ariaLabel: i18n._("Divide")
+    ariaLabel: strings.divide
   })),
   DECIMAL: _extends({}, getDefaultOperatorFields({
     key: "DECIMAL",
     keyType: "VALUE",
-    // I18N: A label for a 'decimal' sign (represented as '.' or ',').
-    ariaLabel: i18n._("Decimal")
+    ariaLabel: strings.decimal
   })),
   PERIOD: _extends({}, getDefaultOperatorFields({
     key: "PERIOD",
@@ -2630,162 +2752,116 @@ const KeyConfigs = {
   })),
   PERCENT: _extends({}, getDefaultOperatorFields({
     key: "PERCENT",
-    // I18N: A label for a 'percent' sign (represented as '%').
-    ariaLabel: i18n._("Percent")
+    ariaLabel: strings.percent
   })),
   CDOT: _extends({}, getDefaultOperatorFields({
     key: "CDOT",
-    // I18N: A label for a 'centered dot' multiplication sign (represented as '⋅').
-    ariaLabel: i18n._("Multiply")
+    ariaLabel: strings.cdot
   })),
   EQUAL: _extends({}, getDefaultOperatorFields({
     key: "EQUAL",
-    // I18N: A label for an 'equals' sign (represented as '=').
-    ariaLabel: i18n._("Equals sign")
+    ariaLabel: strings.equalsSign
   })),
   NEQ: _extends({}, getDefaultOperatorFields({
     key: "NEQ",
-    // I18N: A label for a 'not-equals' sign (represented as '≠').
-    ariaLabel: i18n._("Not-equals sign")
+    ariaLabel: strings.notEqualsSign
   })),
   GT: _extends({}, getDefaultOperatorFields({
     key: "GT",
-    // I18N: A label for a 'greater than' sign (represented as '>').
-    ariaLabel: i18n._("Greater than sign")
+    ariaLabel: strings.greaterThanSign
   })),
   LT: _extends({}, getDefaultOperatorFields({
     key: "LT",
-    // I18N: A label for a 'less than' sign (represented as '<').
-    ariaLabel: i18n._("Less than sign")
+    ariaLabel: strings.lessThanSign
   })),
   GEQ: _extends({}, getDefaultOperatorFields({
     key: "GEQ",
-    // I18N: A label for a 'greater than or equal to' sign (represented as '≥').
-    ariaLabel: i18n._("Greater than or equal to sign")
+    ariaLabel: strings.greaterThanOrEqualToSign
   })),
   LEQ: _extends({}, getDefaultOperatorFields({
     key: "LEQ",
-    // I18N: A label for a 'less than or equal to' sign (represented as '≤').
-    ariaLabel: i18n._("Less than or equal to sign")
+    ariaLabel: strings.lessThanOrEqualSign
   })),
   // mobile native
   FRAC_INCLUSIVE: _extends({}, 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._("Fraction, with current expression in numerator")
+    ariaLabel: strings.fractionExpressionInNumerator
   })),
   // mobile native
   FRAC_EXCLUSIVE: _extends({}, getDefaultOperatorFields({
     key: "FRAC_EXCLUSIVE",
-    // I18N: A label for a button that creates a new fraction next to the
-    // cursor.
-    ariaLabel: i18n._("Fraction, excluding the current expression")
+    ariaLabel: strings.fractionExcludingExpression
   })),
   // mobile web
   FRAC: _extends({}, getDefaultOperatorFields({
     key: "FRAC",
-    // I18N: A label for a button that creates a new fraction next to the
-    // cursor.
-    ariaLabel: i18n._("Fraction, excluding the current expression")
+    ariaLabel: strings.fractionExcludingExpression
   })),
   EXP: _extends({}, getDefaultOperatorFields({
     key: "EXP",
-    // I18N: A label for a button that will allow the user to input a
-    // custom exponent.
-    ariaLabel: i18n._("Custom exponent")
+    ariaLabel: strings.customExponent
   })),
   EXP_2: _extends({}, getDefaultOperatorFields({
     key: "EXP_2",
-    // I18N: A label for a button that will square (take to the second
-    // power) some math.
-    ariaLabel: i18n._("Square")
+    ariaLabel: strings.square
   })),
   EXP_3: _extends({}, getDefaultOperatorFields({
     key: "EXP_3",
-    // I18N: A label for a button that will cube (take to the third power)
-    // some math.
-    ariaLabel: i18n._("Cube")
+    ariaLabel: strings.cube
   })),
   SQRT: _extends({}, getDefaultOperatorFields({
     key: "SQRT",
-    // I18N: A label for a button that will allow the user to input a
-    // square root.
-    ariaLabel: i18n._("Square root")
+    ariaLabel: strings.squareRoot
   })),
   CUBE_ROOT: _extends({}, getDefaultOperatorFields({
     key: "CUBE_ROOT",
-    // I18N: A label for a button that will allow the user to input a
-    // cube root.
-    ariaLabel: i18n._("Cube root")
+    ariaLabel: strings.cubeRoot
   })),
   RADICAL: _extends({}, getDefaultOperatorFields({
     key: "RADICAL",
-    // I18N: A label for a button that will allow the user to input a
-    // radical with a custom root.
-    ariaLabel: i18n._("Radical with custom root")
+    ariaLabel: strings.radicalWithCustomRoot
   })),
   LEFT_PAREN: _extends({}, getDefaultOperatorFields({
     key: "LEFT_PAREN",
-    // I18N: A label for a button that will allow the user to input a
-    // left parenthesis (i.e. '(')
-    ariaLabel: i18n._("Left parenthesis")
+    ariaLabel: strings.leftParenthesis
   })),
   RIGHT_PAREN: _extends({}, getDefaultOperatorFields({
     key: "RIGHT_PAREN",
-    // I18N: A label for a button that will allow the user to input a
-    // right parenthesis (i.e. ')')
-    ariaLabel: i18n._("Right parenthesis")
+    ariaLabel: strings.rightParenthesis
   })),
   LN: _extends({}, getDefaultOperatorFields({
     key: "LN",
-    // I18N: A label for a button that will allow the user to input a
-    // natural logarithm.
-    ariaLabel: i18n._("Natural logarithm")
+    ariaLabel: strings.naturalLog
   })),
   LOG: _extends({}, getDefaultOperatorFields({
     key: "LOG",
-    // I18N: A label for a button that will allow the user to input a
-    // logarithm with base 10.
-    ariaLabel: i18n._("Logarithm with base 10")
+    ariaLabel: strings.logBase10
   })),
   LOG_N: _extends({}, 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._("Logarithm with custom base")
+    ariaLabel: strings.logCustomBase
   })),
   SIN: _extends({}, getDefaultOperatorFields({
     key: "SIN",
-    // I18N: A label for a button that will allow the user to input a
-    // sine function.
-    ariaLabel: i18n._("Sine")
+    ariaLabel: strings.sine
   })),
   COS: _extends({}, getDefaultOperatorFields({
     key: "COS",
-    // I18N: A label for a button that will allow the user to input a
-    // cosine function.
-    ariaLabel: i18n._("Cosine")
+    ariaLabel: strings.cosine
   })),
   TAN: _extends({}, getDefaultOperatorFields({
     key: "TAN",
-    // I18N: A label for a button that will allow the user to input a
-    // tangent function.
-    ariaLabel: i18n._("Tangent")
+    ariaLabel: strings.tangent
   })),
   PI: _extends({}, 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._("Pi")
+    ariaLabel: strings.pi
   })),
   THETA: _extends({}, 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._("Theta")
+    ariaLabel: strings.theta
   })),
   NOOP: _extends({}, getDefaultOperatorFields({
     key: "NOOP",
@@ -2795,64 +2871,63 @@ const KeyConfigs = {
   UP: _extends({}, getDefaultOperatorFields({
     key: "UP",
     keyType: "INPUT_NAVIGATION",
-    ariaLabel: i18n._("Up arrow")
+    ariaLabel: strings.upArrow
   })),
   RIGHT: _extends({}, getDefaultOperatorFields({
     key: "RIGHT",
     keyType: "INPUT_NAVIGATION",
-    ariaLabel: i18n._("Right arrow")
+    ariaLabel: strings.rightArrow
   })),
   DOWN: _extends({}, getDefaultOperatorFields({
     key: "DOWN",
     keyType: "INPUT_NAVIGATION",
-    ariaLabel: i18n._("Down arrow")
+    ariaLabel: strings.downArrow
   })),
   LEFT: _extends({}, getDefaultOperatorFields({
     key: "LEFT",
     keyType: "INPUT_NAVIGATION",
-    ariaLabel: i18n._("Left arrow")
+    ariaLabel: strings.leftArrow
   })),
   JUMP_OUT_PARENTHESES: _extends({}, getDefaultOperatorFields({
     key: "JUMP_OUT_PARENTHESES",
     keyType: "INPUT_NAVIGATION",
-    ariaLabel: i18n._("Navigate right out of a set of parentheses")
+    ariaLabel: strings.navOutOfParentheses
   })),
   JUMP_OUT_EXPONENT: _extends({}, getDefaultOperatorFields({
     key: "JUMP_OUT_EXPONENT",
     keyType: "INPUT_NAVIGATION",
-    ariaLabel: i18n._("Navigate right out of an exponent")
+    ariaLabel: strings.navOutOfExponent
   })),
   JUMP_OUT_BASE: _extends({}, getDefaultOperatorFields({
     key: "JUMP_OUT_BASE",
     keyType: "INPUT_NAVIGATION",
-    ariaLabel: i18n._("Navigate right out of a base")
+    ariaLabel: strings.navOutOfBase
   })),
   JUMP_INTO_NUMERATOR: _extends({}, getDefaultOperatorFields({
     key: "JUMP_INTO_NUMERATOR",
     keyType: "INPUT_NAVIGATION",
-    ariaLabel: i18n._("Navigate right into the numerator of a fraction")
+    ariaLabel: strings.navIntoNumerator
   })),
   JUMP_OUT_NUMERATOR: _extends({}, getDefaultOperatorFields({
     key: "JUMP_OUT_NUMERATOR",
     keyType: "INPUT_NAVIGATION",
-    ariaLabel: i18n._("Navigate right out of the numerator and into the denominator")
+    ariaLabel: strings.navOutOfNumeratorIntoDenominator
   })),
   JUMP_OUT_DENOMINATOR: _extends({}, getDefaultOperatorFields({
     key: "JUMP_OUT_DENOMINATOR",
     keyType: "INPUT_NAVIGATION",
-    ariaLabel: i18n._("Navigate right out of the denominator of a fraction")
+    ariaLabel: strings.navOutOfDenominator
   })),
   BACKSPACE: _extends({}, getDefaultOperatorFields({
     key: "BACKSPACE",
     keyType: "INPUT_NAVIGATION",
-    ariaLabel: i18n._("Delete")
+    ariaLabel: strings.delete
   })),
   // Keypad navigation
   DISMISS: _extends({}, getDefaultOperatorFields({
     key: "DISMISS",
     keyType: "KEYPAD_NAVIGATION",
-    // I18N: A label for a button that will dismiss/hide a keypad.
-    ariaLabel: i18n._("Dismiss")
+    ariaLabel: strings.dismiss
   })),
   // TODO(charlie): Use the numeral color for the 'Many' key.
   MANY: _extends({}, getDefaultOperatorFields({
@@ -3059,7 +3134,7 @@ const KeyConfigs = {
   LOG_B: _extends({}, getDefaultValueFields({
     key: "LOG_B"
   }))
-};
+});
 
 /*
 The SVGs in this file should be treated as binary assets. If, in the future,
@@ -3076,6 +3151,9 @@ no copying and pasting is necessary.
 function ButtonAsset({
   id
 }) {
+  const {
+    locale
+  } = useMathInputI18n();
   switch (id) {
     case "NUM_0":
       return /*#__PURE__*/React.createElement("svg", {
@@ -3191,7 +3269,7 @@ function ButtonAsset({
     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.createElement("svg", {
           width: "40",
@@ -3199,7 +3277,7 @@ function ButtonAsset({
           viewBox: "0 0 32 32",
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
-          "data-test-id": "comma-decimal"
+          "data-testid": "comma-decimal"
         }, /*#__PURE__*/React.createElement("path", {
           d: "M11.5559 25.3544C11.8679 24.661 12.1799 23.933 12.4919 23.1704C12.8039 22.425 13.0986 21.6884 13.3759 20.9604C13.6706 20.2324 13.9219 19.5737 14.1299 18.9844H16.6259L16.7299 19.2704C16.4526 19.877 16.1232 20.5357 15.7419 21.2464C15.3606 21.9397 14.9619 22.633 14.5459 23.3264C14.1299 24.037 13.7139 24.713 13.2979 25.3544H11.5559Z",
           fill: "#21242C"
@@ -3212,7 +3290,7 @@ function ButtonAsset({
         viewBox: "0 0 40 40",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        "data-test-id": "period-decimal"
+        "data-testid": "period-decimal"
       }, /*#__PURE__*/React.createElement("path", {
         d: "M18.3401 27.512c0-.232.04-.448.12-.648.088-.208.204-.388.348-.54.152-.152.328-.272.528-.36.208-.088.428-.132.66-.132.232 0 .448.044.648.132.208.088.388.208.54.36.152.152.272.332.36.54.088.2.132.416.132.648 0 .24-.044.46-.132.66-.088.2-.208.376-.36.528-.152.152-.332.268-.54.348-.2.088-.416.132-.648.132-.232 0-.452-.044-.66-.132-.2-.08-.376-.196-.528-.348-.144-.152-.26-.328-.348-.528-.08-.2-.12-.42-.12-.66z",
         fill: "#21242C"
@@ -4604,13 +4682,17 @@ function ExtrasPage(props) {
     extraKeys,
     onClickKey
   } = props;
+  const {
+    strings
+  } = useMathInputI18n();
+  const Keys = KeyConfigs(strings);
   return /*#__PURE__*/React.createElement(React.Fragment, null, extraKeys.map((key, i) => {
     // Map 1D array to Cartesian coordinates
     const coordX = i % columns;
     const coordY = i / columns;
     return /*#__PURE__*/React.createElement(KeypadButton, {
       key: key,
-      keyConfig: KeyConfigs[key],
+      keyConfig: Keys[key],
       onClickKey: onClickKey,
       coord: [coordX, coordY]
     });
@@ -4624,7 +4706,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;
   }
@@ -4632,17 +4714,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;
   }
 }
 
@@ -4651,70 +4733,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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_1,
+    keyConfig: Keys.NUM_1,
     onClickKey: onClickKey,
     coord: [0, 2]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_2,
+    keyConfig: Keys.NUM_2,
     onClickKey: onClickKey,
     coord: [1, 2]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_3,
+    keyConfig: Keys.NUM_3,
     onClickKey: onClickKey,
     coord: [2, 2]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_4,
+    keyConfig: Keys.NUM_4,
     onClickKey: onClickKey,
     coord: [0, 1]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_5,
+    keyConfig: Keys.NUM_5,
     onClickKey: onClickKey,
     coord: [1, 1]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_6,
+    keyConfig: Keys.NUM_6,
     onClickKey: onClickKey,
     coord: [2, 1]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_7,
+    keyConfig: Keys.NUM_7,
     onClickKey: onClickKey,
     coord: [0, 0]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_8,
+    keyConfig: Keys.NUM_8,
     onClickKey: onClickKey,
     coord: [1, 0]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_9,
+    keyConfig: Keys.NUM_9,
     onClickKey: onClickKey,
     coord: [2, 0]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_0,
+    keyConfig: Keys.NUM_0,
     onClickKey: onClickKey,
     coord: [0, 3]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.DECIMAL,
+    keyConfig: Keys.DECIMAL,
     onClickKey: onClickKey,
     coord: [1, 3]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NEGATIVE,
+    keyConfig: Keys.NEGATIVE,
     onClickKey: onClickKey,
     coord: [2, 3]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.PERCENT,
+    keyConfig: Keys.PERCENT,
     onClickKey: onClickKey,
     coord: [3, 0],
     secondary: true
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.PI,
+    keyConfig: Keys.PI,
     onClickKey: onClickKey,
     coord: [3, 1],
     secondary: true
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.FRAC,
+    keyConfig: Keys.FRAC,
     onClickKey: onClickKey,
     coord: [3, 2],
     secondary: true
@@ -4724,7 +4810,7 @@ function FractionsPage(props) {
     coord: [3, 3],
     secondary: true
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.BACKSPACE,
+    keyConfig: Keys.BACKSPACE,
     onClickKey: onClickKey,
     coord: [4, 3],
     action: true
@@ -4735,16 +4821,20 @@ function GeometryPage(props) {
   const {
     onClickKey
   } = props;
+  const {
+    strings
+  } = useMathInputI18n();
+  const Keys = KeyConfigs(strings);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.SIN,
+    keyConfig: Keys.SIN,
     onClickKey: onClickKey,
     coord: [0, 0]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.COS,
+    keyConfig: Keys.COS,
     onClickKey: onClickKey,
     coord: [1, 0]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.TAN,
+    keyConfig: Keys.TAN,
     onClickKey: onClickKey,
     coord: [2, 0]
   }));
@@ -4754,59 +4844,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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_1,
+    keyConfig: Keys.NUM_1,
     onClickKey: onClickKey,
     coord: [0, 2]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_2,
+    keyConfig: Keys.NUM_2,
     onClickKey: onClickKey,
     coord: [1, 2]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_3,
+    keyConfig: Keys.NUM_3,
     onClickKey: onClickKey,
     coord: [2, 2]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_4,
+    keyConfig: Keys.NUM_4,
     onClickKey: onClickKey,
     coord: [0, 1]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_5,
+    keyConfig: Keys.NUM_5,
     onClickKey: onClickKey,
     coord: [1, 1]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_6,
+    keyConfig: Keys.NUM_6,
     onClickKey: onClickKey,
     coord: [2, 1]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_7,
+    keyConfig: Keys.NUM_7,
     onClickKey: onClickKey,
     coord: [0, 0]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_8,
+    keyConfig: Keys.NUM_8,
     onClickKey: onClickKey,
     coord: [1, 0]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_9,
+    keyConfig: Keys.NUM_9,
     onClickKey: onClickKey,
     coord: [2, 0]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NUM_0,
+    keyConfig: Keys.NUM_0,
     onClickKey: onClickKey,
     coord: [0, 3]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.DECIMAL,
+    keyConfig: Keys.DECIMAL,
     onClickKey: onClickKey,
     coord: [1, 3]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NEGATIVE,
+    keyConfig: Keys.NEGATIVE,
     onClickKey: onClickKey,
     coord: [2, 3]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.PERCENT,
+    keyConfig: Keys.PERCENT,
     onClickKey: onClickKey,
     coord: [3, 0],
     secondary: true
@@ -4821,56 +4915,60 @@ function OperatorsPage(props) {
     basicRelations,
     advancedRelations
   } = props;
+  const {
+    strings
+  } = useMathInputI18n();
+  const Keys = KeyConfigs(strings);
   return /*#__PURE__*/React.createElement(React.Fragment, null, preAlgebra && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.EXP_2,
+    keyConfig: Keys.EXP_2,
     onClickKey: onClickKey,
     coord: [0, 0]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.EXP,
+    keyConfig: Keys.EXP,
     onClickKey: onClickKey,
     coord: [1, 0]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.SQRT,
+    keyConfig: Keys.SQRT,
     onClickKey: onClickKey,
     coord: [2, 0]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.RADICAL,
+    keyConfig: Keys.RADICAL,
     onClickKey: onClickKey,
     coord: [3, 0]
   })), logarithms && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.LOG,
+    keyConfig: Keys.LOG,
     onClickKey: onClickKey,
     coord: [0, 1]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.LOG_N,
+    keyConfig: Keys.LOG_N,
     onClickKey: onClickKey,
     coord: [1, 1]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.LN,
+    keyConfig: Keys.LN,
     onClickKey: onClickKey,
     coord: [2, 1]
   })), basicRelations && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.EQUAL,
+    keyConfig: Keys.EQUAL,
     onClickKey: onClickKey,
     coord: [0, 2]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.LT,
+    keyConfig: Keys.LT,
     onClickKey: onClickKey,
     coord: [1, 2]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.GT,
+    keyConfig: Keys.GT,
     onClickKey: onClickKey,
     coord: [2, 2]
   })), advancedRelations && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.NEQ,
+    keyConfig: Keys.NEQ,
     onClickKey: onClickKey,
     coord: [0, 3]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.LEQ,
+    keyConfig: Keys.LEQ,
     onClickKey: onClickKey,
     coord: [1, 3]
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.GEQ,
+    keyConfig: Keys.GEQ,
     onClickKey: onClickKey,
     coord: [2, 3]
   })));
@@ -4975,24 +5073,28 @@ function NavigationPad(props) {
   const {
     onClickKey
   } = props;
+  const {
+    strings
+  } = useMathInputI18n();
+  const Keys = KeyConfigs(strings);
   return /*#__PURE__*/React.createElement(View$1, {
     style: styles$2.container
   }, /*#__PURE__*/React.createElement(View$1, {
     style: styles$2.grid
   }, /*#__PURE__*/React.createElement(NavigationButton, {
-    keyConfig: KeyConfigs.UP,
+    keyConfig: Keys.UP,
     onClickKey: onClickKey,
     coord: [1, 0]
   }), /*#__PURE__*/React.createElement(NavigationButton, {
-    keyConfig: KeyConfigs.RIGHT,
+    keyConfig: Keys.RIGHT,
     onClickKey: onClickKey,
     coord: [2, 1]
   }), /*#__PURE__*/React.createElement(NavigationButton, {
-    keyConfig: KeyConfigs.DOWN,
+    keyConfig: Keys.DOWN,
     onClickKey: onClickKey,
     coord: [1, 2]
   }), /*#__PURE__*/React.createElement(NavigationButton, {
-    keyConfig: KeyConfigs.LEFT,
+    keyConfig: Keys.LEFT,
     onClickKey: onClickKey,
     coord: [0, 1]
   }), /*#__PURE__*/React.createElement(View$1, {
@@ -5028,42 +5130,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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.FRAC,
+    keyConfig: Keys.FRAC,
     onClickKey: onClickKey,
     coord: fractionCoord,
     secondary: true
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.PLUS,
+    keyConfig: Keys.PLUS,
     onClickKey: onClickKey,
     coord: [4, 0],
     secondary: true
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.MINUS,
+    keyConfig: Keys.MINUS,
     onClickKey: onClickKey,
     coord: [5, 0],
     secondary: true
   }), /*#__PURE__*/React.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.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.DIVIDE,
+    keyConfig: Keys.DIVIDE,
     onClickKey: onClickKey,
     coord: [5, 1],
     secondary: true
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.LEFT_PAREN,
+    keyConfig: Keys.LEFT_PAREN,
     onClickKey: onClickKey,
     coord: [4, 2],
     secondary: true
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.RIGHT_PAREN,
+    keyConfig: Keys.RIGHT_PAREN,
     onClickKey: onClickKey,
     coord: [5, 2],
     secondary: true
@@ -5073,7 +5180,7 @@ function SharedKeys(props) {
     coord: [4, 3],
     secondary: true
   }), /*#__PURE__*/React.createElement(KeypadButton, {
-    keyConfig: KeyConfigs.BACKSPACE,
+    keyConfig: Keys.BACKSPACE,
     onClickKey: onClickKey,
     coord: [5, 3],
     action: true
@@ -5745,5 +5852,5 @@ let KeypadType = /*#__PURE__*/function (KeypadType) {
   return KeypadType;
 }({});
 
-export { CursorContext, Keypad as DesktopKeypad, KeyArray, KeyConfigs, KeypadContext, MathInput as KeypadInput, KeypadType, MobileKeypad, StatefulKeypadContextProvider, convertDotToTimesByLocale, createMathField, getCursorContext, keyToMathquillMap as keyTranslator, keypadElementPropType, libVersion, mathQuillInstance };
+export { CursorContext, Keypad as DesktopKeypad, KeyArray, KeyConfigs, KeypadContext, MathInput as KeypadInput, KeypadType, MathInputI18nContext, MathInputI18nContextProvider, MobileKeypad, StatefulKeypadContextProvider, convertDotToTimesByLocale, createMathField, getCursorContext, getKeyTranslator, keypadElementPropType, libVersion, mathQuillInstance, useMathInputI18n };
 //# sourceMappingURL=index.js.map