@khanacademy/math-input 17.5.0 → 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,7 +15,7 @@ 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.5.0";
+const libVersion = "18.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -100,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.
@@ -345,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"];
 
@@ -366,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;
   }
@@ -383,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);
@@ -461,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
@@ -1113,7 +1237,7 @@ function buildNormalFunctionCallback(command) {
     mathField.keystroke("Left");
   };
 }
-const keyToMathquillMap = {
+const getKeyTranslator = locale => ({
   EXP: handleExponent,
   EXP_2: handleExponent,
   EXP_3: handleExponent,
@@ -1131,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"),
@@ -1270,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
 });
 
 /**
@@ -1288,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
@@ -1302,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
@@ -1327,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);
     }
@@ -2055,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
@@ -2213,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
@@ -2255,10 +2379,12 @@ class MathInput extends React.Component {
     }))));
   }
 }
+MathInput.contextType = MathInputI18nContext;
 MathInput.defaultProps = {
   style: {},
   value: ""
 };
+MathInput.contextType = MathInputI18nContext;
 const fontSizePt = 18;
 const inputMaxWidth = 128;
 
@@ -2549,6 +2675,10 @@ function Tabbar(props) {
   })));
 }
 
+/**
+ * This file contains configuration settings for the buttons in the keypad.
+ */
+
 const getDefaultOperatorFields = ({
   key,
   keyType: _keyType = "OPERATOR",
@@ -2588,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",
@@ -2628,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",
@@ -2793,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({
@@ -3057,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,
@@ -3074,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", {
@@ -3189,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",
@@ -4602,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]
     });
@@ -4622,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;
   }
@@ -4630,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;
   }
 }
 
@@ -4649,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
@@ -4722,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
@@ -4733,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]
   }));
@@ -4752,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
@@ -4819,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]
   })));
@@ -4973,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, {
@@ -5026,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
@@ -5071,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
@@ -5743,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