@khanacademy/perseus 11.6.1 → 12.0.0

package/dist/es/index.js

@@ -1,33 +1,33 @@
 import * as KAS from '@khanacademy/kas';
-import { keyTranslator, createMathField, mathQuillInstance, KeypadInput, KeypadType, keypadElementPropType, MobileKeypad } from '@khanacademy/math-input';
+import { keyTranslator, CursorContext, createMathField, mathQuillInstance, getCursorContext, DesktopKeypad, KeypadInput, KeypadType, KeyArray, keypadElementPropType, MobileKeypad } from '@khanacademy/math-input';
 import * as PerseusLinter from '@khanacademy/perseus-linter';
 import { linterContextDefault, Rule, linterContextProps } from '@khanacademy/perseus-linter';
+import { View, RenderStateRoot, Text } from '@khanacademy/wonder-blocks-core';
 import * as i18n from '@khanacademy/wonder-blocks-i18n';
+import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
 import classNames from 'classnames';
 import * as React from 'react';
 import { useState, useEffect, useRef } from 'react';
 import _, { debounce } from 'underscore';
+import Clickable from '@khanacademy/wonder-blocks-clickable';
+import Color, { fade } from '@khanacademy/wonder-blocks-color';
+import { Popover, PopoverContentCore, PopoverContent } from '@khanacademy/wonder-blocks-popover';
+import Spacing from '@khanacademy/wonder-blocks-spacing';
+import { StyleSheet, css } from 'aphrodite';
 import $ from 'jquery';
+import PropTypes from 'prop-types';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
-import PropTypes from 'prop-types';
 import { number, point, vector as vector$1, line, ray } from '@khanacademy/kmath';
-import Spacing from '@khanacademy/wonder-blocks-spacing';
-import { StyleSheet, css } from 'aphrodite';
 import { CircularSpinner } from '@khanacademy/wonder-blocks-progress-spinner';
-import { RenderStateRoot, View, Text } from '@khanacademy/wonder-blocks-core';
 import SimpleMarkdown from '@khanacademy/simple-markdown';
 import { pureMarkdownRules } from '@khanacademy/pure-markdown';
 import { TextField } from '@khanacademy/wonder-blocks-form';
 import Button from '@khanacademy/wonder-blocks-button';
-import Clickable from '@khanacademy/wonder-blocks-clickable';
-import Color from '@khanacademy/wonder-blocks-color';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
-import { Popover, PopoverContent, PopoverContentCore } from '@khanacademy/wonder-blocks-popover';
 import { OptionItem, SingleSelect } from '@khanacademy/wonder-blocks-dropdown';
 import debounce$1 from 'lodash.debounce';
 import createReactClass from 'create-react-class';
-import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
 import Link from '@khanacademy/wonder-blocks-link';
 import { addLibraryVersionToPerseusDebug } from '@khanacademy/perseus-core';
 
@@ -49,317 +49,6 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-/**
- * A stripped version of Icon.jsx from webapp. Takes an SVG icon and renders it
- * inline like Font Awesome did.
- *
- * If you are looking for an icon that we've used before you should look in
- * webapp's `icon-paths.js` which is a reference file for all the SVG paths
- * that we've used. You'll need to copy the object from that file into
- * whichever file you're using the icon and explicitly pass it in to the
- * <InlineIcon/> React component.
- *
- * We assume that the viewBox is cropped and aligned to (0, 0), but icons can
- * be defined differently. At some point we might want to add these attributes
- * to `icon-paths.js`, but for now this is a fairly safe assumption.
- *
- * Sample usage:
- *
- *   const editIcon = {
- *      path: "M41.209 53.753l5.39 0l0 5.39l3.136 0l6.468-6.517-8.477-8.526-6.517 6.517l0 3.136zm33.173-34.937q-.882-.882-1.862.049l-19.6 19.6q-.931.98-.049 1.862t1.862-.049l19.6-19.6q.931-.98.049-1.862zm-38.563 45.668l0-16.121l37.632-37.632 16.17 16.121-37.632 37.632l-16.17 0zm43.022-12.397l0 10.633q-.049 6.713-4.753 11.417t-11.368 4.704l-46.599 0q-6.713 0-11.417-4.753t-4.704-11.368l0-46.599q0-6.664 4.753-11.417t11.368-4.704l46.599 0q3.528 0 6.566 1.372.833.392.98 1.323t-.49 1.617l-2.744 2.744q-.784.784-1.96.441t-2.352-.343l-46.599 0q-3.675 0-6.321 2.646t-2.646 6.321l0 46.599q0 3.675 2.646 6.321t6.321 2.646l46.599 0q3.675 0 6.321-2.646t2.646-6.321l0-7.056q0-.735.49-1.225l3.577-3.577q.833-.833 1.96-.392t1.127 1.617zm7.203-51.646q2.254 0 3.773 1.568l8.526 8.526q1.568 1.568 1.568 3.822t-1.568 3.773l-5.145 5.145-16.121-16.121 5.145-5.145q1.568-1.568 3.822-1.568z",
- *      width: 100,
- *      height: 78.912,
- *   };
- *   <InlineIcon {...editIcon} />
- *
- */
-const InlineIcon = ({
-  path,
-  width,
-  height,
-  style: _style = {},
-  title
-}) => /*#__PURE__*/React.createElement("svg", {
-  role: "img",
-  "aria-hidden": !title,
-  style: _extends({
-    verticalAlign: "middle"
-  }, _style),
-  width: `${width / height}em`,
-  height: "1em",
-  viewBox: `0 0 ${width} ${height}`
-}, !!title && /*#__PURE__*/React.createElement("title", null, title), /*#__PURE__*/React.createElement("path", {
-  d: path,
-  fill: "currentColor"
-}));
-
-let _dependencies = null;
-const setDependencies = dependencies => {
-  _dependencies = dependencies;
-};
-const getDependencies = () => {
-  if (_dependencies) {
-    return _dependencies;
-  }
-  throw new Error(["Perseus has not been provided required dependencies.", "setDependencies(dependencies) must be called first.", "Make sure Perseus is being imported from javascript/perseus/perseus.js."].join("\n"));
-};
-const DependenciesContext = /*#__PURE__*/React.createContext({
-  analytics: {
-    onAnalyticsEvent: async () => {}
-  }
-});
-
-/**
- * useDependencies provides easy access to the current Perseus dependencies.
- */
-const useDependencies = () => {
-  const deps = React.useContext(DependenciesContext);
-  return deps;
-};
-
-var dependencies = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  setDependencies: setDependencies,
-  getDependencies: getDependencies,
-  DependenciesContext: DependenciesContext,
-  useDependencies: useDependencies
-});
-
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-const prettyBig = {
-  fontSize: "150%"
-};
-const slightlyBig = {
-  fontSize: "120%"
-};
-const symbStyle = {
-  fontSize: "130%"
-};
-// These are functions because we want to generate a new component for each use
-// on the page rather than reusing an instance (which will cause an error).
-// Also, it's useful for things which might look different depending on the
-// props.
-
-const basic = [() => [/*#__PURE__*/React.createElement("span", {
-  key: "plus",
-  style: slightlyBig
-}, "+"), "PLUS", i18n._("Plus")], () => [/*#__PURE__*/React.createElement("span", {
-  key: "minus",
-  style: prettyBig
-}, "-"), "MINUS", i18n._("Minus")],
-// TODO(joel) - display as \cdot when appropriate
-props => {
-  const {
-    TeX
-  } = getDependencies();
-  if (props.convertDotToTimes) {
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "times",
-      style: prettyBig
-    }, i18n.doNotTranslate("\\times")), "TIMES", i18n._("Multiply")];
-  }
-  return [/*#__PURE__*/React.createElement(TeX, {
-    key: "times",
-    style: prettyBig
-  }, i18n.doNotTranslate("\\cdot")), "CDOT", i18n._("Multiply")];
-}, () => {
-  const {
-    TeX
-  } = getDependencies();
-  return [/*#__PURE__*/React.createElement(TeX, {
-    key: "frac",
-    style: prettyBig
-  }, i18n.doNotTranslate("\\frac{x}{y}")), "FRAC", i18n._("Fraction, excluding the current expression")];
-}];
-const buttonSets = {
-  basic,
-  "basic+div": basic.concat([() => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "div"
-    }, i18n.doNotTranslate("\\div")), "DIVIDE", i18n._("Divide")];
-  }]),
-  trig: [() => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "sin"
-    }, i18n.doNotTranslate("\\sin")), "SIN", i18n._("Sine")];
-  }, () => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "cos"
-    }, i18n.doNotTranslate("\\cos")), "COS", i18n._("Cosine")];
-  }, () => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "tan"
-    }, i18n.doNotTranslate("\\tan")), "TAN", i18n._("Tangent")];
-  }, () => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "theta",
-      style: symbStyle
-    }, i18n.doNotTranslate("\\theta")), "THETA", i18n._("Theta")];
-  }, () => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement("span", {
-      key: "phi"
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "perseus-sr-only"
-    }, i18n.doNotTranslate("phi")), /*#__PURE__*/React.createElement(TeX, {
-      key: "pi",
-      style: symbStyle
-    }, i18n.doNotTranslate("\\phi"))), "PHI", i18n._("Phi")];
-  }],
-  prealgebra: [() => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "sqrt"
-    }, i18n.doNotTranslate("\\sqrt{x}")), "SQRT", i18n._("Square root")];
-  },
-  // TODO(joel) - how does desmos do this?
-  () => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "nthroot"
-    }, i18n.doNotTranslate("\\sqrt[3]{x}")), "NTHROOT3", i18n._("Cube root")];
-  }, () => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "pow",
-      style: slightlyBig
-    }, i18n.doNotTranslate("a^b")), "POW", i18n._("Exponent")];
-  }, () => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "pi",
-      style: slightlyBig
-    }, i18n.doNotTranslate("\\pi")), "PI", i18n._("Pi")];
-  }],
-  logarithms: [() => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "log"
-    }, i18n.doNotTranslate("\\log")), "LOG", i18n._("Logarithm with base 10")];
-  }, () => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "ln"
-    }, i18n.doNotTranslate("\\ln")), "LN", i18n._("Natural logarithm")];
-  }, () => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "log_b"
-    }, i18n.doNotTranslate("\\log_b")), "LOG_B", i18n._("Logarithm with custom base")];
-  }],
-  "basic relations": [() => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "eq"
-    }, "="), "EQUAL", i18n._("Equals sign")];
-  }, () => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "lt"
-    }, i18n.doNotTranslate("\\lt")), "LT", i18n._("Less than sign")];
-  }, () => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "gt"
-    }, i18n.doNotTranslate("\\gt")), "GT", i18n._("Greater than sign")];
-  }],
-  "advanced relations": [() => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "neq"
-    }, i18n.doNotTranslate("\\neq")), "NEQ", i18n._("Not-equals sign")];
-  }, () => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "leq"
-    }, i18n.doNotTranslate("\\leq")), "LEQ", i18n._("Less than or equal to sign")];
-  }, () => {
-    const {
-      TeX
-    } = getDependencies();
-    return [/*#__PURE__*/React.createElement(TeX, {
-      key: "geq"
-    }, i18n.doNotTranslate("\\geq")), "GEQ", i18n._("Greater than or equal to sign")];
-  }]
-};
-const buttonSetsPropType = PropTypes.arrayOf(PropTypes.oneOf(_(buttonSets).keys()));
-class TexButtons extends React.Component {
-  render() {
-    // Always show buttonSets in the same order. Note: Technically it's ok
-    // for _.keys() to return the keys in an arbitrary order, but in
-    // practice, they will be ordered as listed above.
-    const sortedButtonSets = _.sortBy(this.props.sets, setName =>
-    // @ts-expect-error - TS2345 - Argument of type 'string | number' is not assignable to parameter of type 'string'.
-    _.keys(buttonSets).indexOf(setName));
-    const buttons = _(sortedButtonSets).map(setName => buttonSets[setName]);
-    const buttonRows = _(buttons).map(row => row.map(symbGen => {
-      // create a (component, thing we should send to mathquill) pair
-      const symbol = symbGen(this.props);
-      return /*#__PURE__*/React.createElement("button", {
-        onClick: () => this.props.onInsert(symbol[1]),
-        className: "tex-button"
-        // @ts-expect-error - TS2533 - Object is possibly 'null' or 'undefined'. | TS2339 - Property 'key' does not exist on type 'boolean | ReactChild | ReactFragment | ReactPortal'.
-        ,
-        key: symbol[0].key,
-        type: "button",
-        "aria-label": symbol[2]
-      }, symbol[0]);
-    }));
-    const buttonPopup = _(buttonRows).map((row, i) => {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "clearfix tex-button-row",
-        key: this.props.sets[i]
-      }, row);
-    });
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${this.props.className || ""} preview-measure`
-    }, buttonPopup);
-  }
-}
-TexButtons.buttonSets = buttonSets;
-TexButtons.buttonSetsType = buttonSetsPropType;
-
 const customKeyTranslator = _extends({}, keyTranslator, {
   // If there's something in the input that can become part of a
   // fraction, typing "/" puts it in the numerator. If not, typing
@@ -381,57 +70,9 @@ class MathInput extends React.Component {
     this.__mathFieldWrapperRef = null;
     this.__mathField = null;
     this.state = {
-      focused: false
-    };
-    this.handleFocus = () => {
-      this.setState({
-        focused: true
-      });
-      // TODO(joel) fix properly - we should probably allow onFocus handlers
-      // to this property, but we need to work correctly with them.
-      // if (this.props.onFocus) {
-      //     this.props.onFocus();
-      // }
-    };
-    this.handleMouseDown = event => {
-      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2345 - Argument of type 'EventTarget | null' is not assignable to parameter of type 'Node | null'.
-      const focused = ReactDOM__default.findDOMNode(this).contains(event.target);
-      this.mouseDown = focused;
-      if (!focused) {
-        this.setState({
-          focused: false
-        });
-      }
-    };
-    this.handleMouseUp = () => {
-      // this mouse click started in the buttons div so we should focus the
-      // input
-      if (this.mouseDown) {
-        this.focus();
-      }
-      this.mouseDown = false;
-    };
-    this.handleBlur = e => {
-      // TODO(michaelpolyak): Consider trapping focus within the button group.
-      // Focusing back on the input when TAB out of the last button in the
-      // group. This will probably require ESCAPE key handling to enable to
-      // close (blur) the button group in order to focus on next page element.
-      if (!this.mouseDown &&
-      // @ts-expect-error - TS2531 - Object is possibly 'null'.
-      !ReactDOM__default.findDOMNode(this).contains(e.relatedTarget)) {
-        this.setState({
-          focused: false
-        });
-      }
-    };
-    this._shouldShowButtons = () => {
-      if (this.props.buttonsVisible === "always") {
-        return true;
-      }
-      if (this.props.buttonsVisible === "never") {
-        return false;
-      }
-      return this.state.focused;
+      focused: false,
+      keypadOpen: this.props.buttonsVisible === "always" ? true : false,
+      cursorContext: CursorContext.NONE
     };
     this.insert = value => {
       const input = this.mathField();
@@ -493,6 +134,9 @@ class MathInput extends React.Component {
               if (this.props.value !== value) {
                 this.props.onChange(value);
               }
+              this.setState({
+                cursorContext: getCursorContext(mathField)
+              });
             },
             enter: () => {
               // NOTE(kevinb): This isn't how answers to exercises are
@@ -525,479 +169,250 @@ class MathInput extends React.Component {
         focused: true
       });
     };
-    this.blur = () => {
-      var _this$mathField2;
-      (_this$mathField2 = this.mathField()) == null ? void 0 : _this$mathField2.blur();
-      this.setState({
-        focused: false
-      });
-    };
-  }
-  componentDidMount() {
-    var _this$mathField3;
-    window.addEventListener("mousedown", this.handleMouseDown);
-    window.addEventListener("mouseup", this.handleMouseUp);
-
-    // Ideally, we would be able to pass an initial value directly into
-    // the constructor
-    (_this$mathField3 = this.mathField()) == null ? void 0 : _this$mathField3.latex(this.props.value);
-  }
-  componentWillUnmount() {
-    window.removeEventListener("mousedown", this.handleMouseDown);
-    window.removeEventListener("mouseup", this.handleMouseUp);
-  }
-
-  // handlers:
-  // keep track of two related bits of state:
-  // * this.state.focused - whether the buttons are currently shown
-  // * this.mouseDown - whether a mouse click is active that started in the
-  //   buttons div
-
-  render() {
-    let className = classNames({
-      "perseus-math-input": true,
-      // mathquill usually adds these itself but react removes them when
-      // updating the component.
-      "mq-editable-field": true,
-      "mq-math-mode": true
+    this.blur = () => this.setState({
+      focused: false
     });
-    if (this.props.className) {
-      className = className + " " + this.props.className;
-    }
-    let buttons = null;
-    if (this._shouldShowButtons()) {
-      // @ts-expect-error - TS2322 - Type 'Element' is not assignable to type 'null'.
-      buttons = /*#__PURE__*/React.createElement(TexButtons, {
-        sets: this.props.buttonSets,
-        className: "math-input-buttons absolute",
-        convertDotToTimes: this.props.convertDotToTimes,
-        onInsert: this.insert
-      });
-    }
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: "inline-block"
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: "inline-block"
+    this.handleKeypadPress = (key, e) => {
+      const translator = keyTranslator[key];
+      const mathField = this.mathField();
+      if (mathField) {
+        if (translator) {
+          translator(mathField, key);
+        }
+        this.setState({
+          cursorContext: getCursorContext(mathField)
+        });
       }
-    }, /*#__PURE__*/React.createElement("span", {
-      className: className,
-      ref: ref => this.__mathFieldWrapperRef = ref,
-      "aria-label": this.props.labelText,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur
-    })), /*#__PURE__*/React.createElement("div", {
-      style: {
-        position: "relative"
-      },
-      onBlur: this.handleBlur
-    }, buttons));
-  }
-}
-MathInput.defaultProps = {
-  value: "",
-  convertDotToTimes: false,
-  buttonsVisible: "focused"
-};
-
-/* eslint-disable react/no-unsafe */
-const zIndex = 10;
-let HorizontalDirection = /*#__PURE__*/function (HorizontalDirection) {
-  HorizontalDirection["Left"] = "left";
-  HorizontalDirection["Right"] = "right";
-  return HorizontalDirection;
-}({});
-let VerticalDirection = /*#__PURE__*/function (VerticalDirection) {
-  VerticalDirection["Top"] = "top";
-  VerticalDirection["Bottom"] = "bottom";
-  return VerticalDirection;
-}({});
-const Triangle = props => {
-  let borderLeft;
-  let borderRight;
-  let borderTop;
-  let borderBottom;
-  const hBorder = `${props.width}px solid transparent`;
-  if (props.horizontalDirection === "right") {
-    borderLeft = hBorder;
-  } else {
-    borderRight = hBorder;
-  }
-  const vBorder = `${props.height}px solid ${props.color}`;
-  if (props.verticalDirection === "top") {
-    borderTop = vBorder;
-  } else {
-    borderBottom = vBorder;
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "block",
-      height: 0,
-      width: 0,
-      position: "absolute",
-      left: props.left,
-      top: props["top"],
-      borderLeft: borderLeft,
-      borderRight: borderRight,
-      borderTop: borderTop,
-      borderBottom: borderBottom
-    }
-  });
-};
-const TooltipArrow = props => {
-  // TODO(aria): Think about adding a box-shadow to the triangle here
-  // See http://css-tricks.com/triangle-with-shadow/
-
-  //const isRight = (this.props.horizontalDirection === "right");
-  const isTop = props.verticalDirection === "top";
-  const frontTopOffset = isTop ? 0 : 1;
-  const borderTopOffset = isTop ? 0 : -1;
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "block",
-      position: props.position,
-      visibility: props.visibility,
-      left: props.left,
-      top: props["top"],
-      width: props.width + 2,
-      height: props.height + 1,
-      marginTop: -1,
-      marginBottom: -2,
-      zIndex: zIndex
-    }
-  }, /*#__PURE__*/React.createElement(Triangle, {
-    horizontalDirection: props.horizontalDirection,
-    verticalDirection: props.verticalDirection,
-    color: props.border,
-    left: 0,
-    top: borderTopOffset,
-    width: props.width + 2 // one extra for the diagonal
-    ,
-    height: props.height + 2
-  }), /*#__PURE__*/React.createElement(Triangle, {
-    horizontalDirection: props.horizontalDirection,
-    verticalDirection: props.verticalDirection,
-    color: props.color,
-    left: 1,
-    top: frontTopOffset,
-    width: props.width,
-    height: props.height
-  }));
-};
-TooltipArrow.defaultProps = {
-  position: "relative",
-  visibility: "visible",
-  left: 0,
-  top: 0
-};
-const VERTICAL_CORNERS = {
-  top: {
-    top: "-100%"
-  },
-  bottom: {
-    top: 0
-  }
-};
-const HORIZONTAL_CORNERS = {
-  left: {
-    targetLeft: 0
-  },
-  right: {
-    targetLeft: "100%"
-  }
-};
-const HORIZONTAL_ALIGNMNENTS = {
-  left: {
-    tooltipLeft: 0,
-    arrowLeft: arrowSize => 0
-  },
-  right: {
-    tooltipLeft: "-100%",
-    arrowLeft: arrowSize => -arrowSize - 2
-  }
-};
-class Tooltip extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      height: null // used for offsetting "top" positioned tooltips
-    };
-  }
 
-  componentDidMount() {
-    this._updateHeight();
-  }
-  UNSAFE_componentWillReceiveProps() {
-    // If the contents have changed, reset our measure of the height
-    this.setState({
-      height: null
-    });
-  }
-  componentDidUpdate() {
-    this._updateHeight();
-  }
-  _renderToolTipDiv(isTooltipAbove) {
-    const settings = Object.assign({}, HORIZONTAL_CORNERS[this.props.horizontalPosition], HORIZONTAL_ALIGNMNENTS[this.props.horizontalAlign], VERTICAL_CORNERS[this.props.verticalPosition]);
-    let arrowAbove;
-    let arrowBelow;
-    if (isTooltipAbove) {
-      // We put an absolutely positioned arrow in the correct place
-      arrowAbove = /*#__PURE__*/React.createElement(TooltipArrow, {
-        verticalDirection: VerticalDirection.Top,
-        horizontalDirection: this.props.horizontalAlign,
-        position: "absolute",
-        color: "white",
-        border: this.props.borderColor,
-        left: settings.arrowLeft(this.props.arrowSize),
-        top: -this.props.arrowSize + 2,
-        width: this.props.arrowSize,
-        height: this.props.arrowSize,
-        zIndex: zIndex
-      });
-
-      // And we use a visibility: hidden arrow below to shift up the
-      // content by the correct amount
-      arrowBelow = /*#__PURE__*/React.createElement(TooltipArrow, {
-        verticalDirection: VerticalDirection.Top,
-        horizontalDirection: this.props.horizontalAlign,
-        visibility: "hidden",
-        color: "white",
-        border: this.props.borderColor,
-        left: settings.arrowLeft(this.props.arrowSize),
-        top: -1,
-        width: this.props.arrowSize,
-        height: this.props.arrowSize,
-        zIndex: zIndex
-      });
-    } else {
-      arrowAbove = /*#__PURE__*/React.createElement(TooltipArrow, {
-        verticalDirection: VerticalDirection.Bottom,
-        horizontalDirection: this.props.horizontalAlign,
-        color: "white",
-        border: this.props.borderColor,
-        left: settings.arrowLeft(this.props.arrowSize),
-        top: -1,
-        width: this.props.arrowSize,
-        height: this.props.arrowSize,
-        zIndex: zIndex
-      });
-      arrowBelow = null;
-    }
-
-    /* A positioned div below the input to be the parent for our
-        tooltip */
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        position: "relative",
-        height: 0,
-        display: this.props.show ? "block" : "none"
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      // eslint-disable-next-line react/no-string-refs
-      ref: "tooltipContainer",
-      className: "tooltipContainer",
-      style: {
-        position: "absolute",
-        // height must start out undefined, not null, so that
-        // we can measure the actual height with jquery.
-        // This is used to position the tooltip with top: -100%
-        // when in verticalPosition: "top" mode
-        height: this.state.height || undefined,
-        left: settings.targetLeft
-      }
-    }, arrowAbove, /*#__PURE__*/React.createElement("div", {
-      className: this.props.className
-      // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "tooltipContent",
-      style: {
-        position: "relative",
-        top: settings["top"],
-        left: settings.tooltipLeft,
-        border: "1px solid " + this.props.borderColor,
-        boxShadow: "0 1px 3px " + this.props.borderColor,
-        zIndex: zIndex - 1
+      // We want to prevent taking focus from input when clicking on keypad
+      //   Clickable handles "onClick" differently than react;
+      //   a keyboard event is "keydown" type.
+      //   In react without WonderBlocks, "enter" or "space" keydown events
+      //   are also "click" events, differentiated by "detail".
+      if (e.type === "click") {
+        this.focus();
       }
-    }, this.props.children.slice(1)), arrowBelow));
+    };
   }
-  _updateHeight() {
-    const tooltipContainer = ReactDOM__default.findDOMNode(
-    // eslint-disable-next-line react/no-string-refs
-    this.refs.tooltipContainer);
-    const height = tooltipContainer.offsetHeight;
-    if (height !== this.state.height) {
-      this.setState({
-        height
-      });
+  componentDidMount() {
+    var _this$mathField2;
+    // Ideally, we would be able to pass an initial value directly into
+    // the constructor
+    (_this$mathField2 = this.mathField()) == null ? void 0 : _this$mathField2.latex(this.props.value);
+  }
+  openKeypad() {
+    if (this.props.buttonsVisible === "never") {
+      return;
     }
+    this.setState({
+      keypadOpen: true
+    });
+  }
+  closeKeypad() {
+    this.setState({
+      keypadOpen: false
+    });
   }
   render() {
-    const isTooltipAbove = this.props.verticalPosition === "top";
-
-    /* We wrap the entire output in a span so that it displays inline */
-    return /*#__PURE__*/React.createElement("span", null, isTooltipAbove && this._renderToolTipDiv(isTooltipAbove), /*#__PURE__*/React.createElement("div", {
-      style: this.props.targetContainerStyle
-    }, this.props.children[0]), !isTooltipAbove && this._renderToolTipDiv());
+    let className = classNames({
+      "perseus-math-input": true,
+      // mathquill usually adds these itself but react removes them when
+      // updating the component.
+      "mq-editable-field": true,
+      "mq-math-mode": true
+    });
+    if (this.props.className) {
+      className = className + " " + this.props.className;
+    }
+    return /*#__PURE__*/React.createElement(View, {
+      style: [styles$A.outerWrapper, this.state.focused && styles$A.wrapperFocused, this.props.hasError && styles$A.wrapperError]
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        padding: 1
+      },
+      onClick: () => {
+        const mathField = this.mathField();
+        if (!mathField) {
+          return;
+        }
+        this.setState({
+          cursorContext: getCursorContext(mathField)
+        });
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: className,
+      ref: ref => this.__mathFieldWrapperRef = ref,
+      "aria-label": this.props.labelText,
+      onFocus: () => this.focus(),
+      onBlur: () => this.blur()
+    }), /*#__PURE__*/React.createElement(Popover, {
+      opened: this.state.keypadOpen,
+      onClose: () => this.closeKeypad(),
+      dismissEnabled: true,
+      content: () => {
+        var _this$props$keypadBut, _this$props;
+        return /*#__PURE__*/React.createElement(PopoverContentCore, {
+          closeButtonVisible: true,
+          style: styles$A.popoverContent
+        }, /*#__PURE__*/React.createElement(DesktopKeypad, _extends({
+          onAnalyticsEvent: this.props.analytics.onAnalyticsEvent,
+          extraKeys: this.props.extraKeys,
+          onClickKey: this.handleKeypadPress,
+          cursorContext: this.state.cursorContext,
+          convertDotToTimes: this.props.convertDotToTimes
+        }, (_this$props$keypadBut = this.props.keypadButtonSets) != null ? _this$props$keypadBut : mapButtonSets((_this$props = this.props) == null ? void 0 : _this$props.buttonSets))));
+      }
+    }, this.props.buttonsVisible === "never" ? /*#__PURE__*/React.createElement(MathInputIcon, {
+      hovered: false,
+      focused: false,
+      active: false
+    }) : /*#__PURE__*/React.createElement(Clickable, {
+      "aria-label": this.state.keypadOpen ? i18n._("close math keypad") : i18n._("open math keypad"),
+      "aria-checked": this.state.keypadOpen,
+      role: "switch",
+      onClick: () => this.state.keypadOpen ? this.closeKeypad() : this.openKeypad()
+    }, props => /*#__PURE__*/React.createElement(MathInputIcon, _extends({
+      active: this.state.keypadOpen
+    }, props))))));
   }
 }
-
-// Sorry.  // Apology-Oriented-Programming
-Tooltip.defaultProps = {
-  className: "",
-  arrowSize: 10,
-  borderColor: "#ccc",
-  verticalPosition: VerticalDirection.Bottom,
-  horizontalPosition: HorizontalDirection.Left,
-  horizontalAlign: HorizontalDirection.Left,
-  targetContainerStyle: {}
-};
-
-/**
- * Icon paths to be used with `inline-icon.jsx`.
- *
- * These paths are taken directly from webapp's `icon-paths.js`. Unlike the
- * webapp equivalent, these can be directly required within Perseus files since
- * this is all bundled together anyway.
- */
-
-const iconCheck = {
-  path: `M8.70710678,12.2928932 C8.31658249,11.9023689 7.68341751,11.9023689 7.29289322,12.2928932 C6.90236893,12.6834175 6.90236893,13.3165825 7.29289322,13.7071068 L9.82842712,16.2426407 C10.2207367,16.6349502 10.8574274,16.6328935 11.2471942,16.2380576 L16.7116603,10.7025237 C17.0996535,10.3094846 17.0955629,9.67633279 16.7025237,9.28833966 C16.3094846,8.90034653 15.6763328,8.90443714 15.2883397,9.29747629 L10.5309507,14.1167372 L8.70710678,12.2928932 Z`,
-  width: 24,
-  height: 24
-};
-const iconCheckMedium = {
-  path: "M6.072 10.4l6.175-7.058a1 1 0 1 1 1.506 1.317L6.769 12.64a1 1 0 0 1-1.55-.054L2.203 8.604a1 1 0 1 1 1.594-1.208L6.072 10.4z",
-  width: 16,
-  height: 16
-};
-const iconChevronDown = {
-  path: "M99.669 13.048q0 3.36-2.352 5.712l-41.664 41.664q-2.408 2.408-5.88 2.408t-5.712-2.408l-41.664-41.664q-2.408-2.24-2.408-5.712t2.408-5.88l4.76-4.816q2.52-2.352 5.88-2.352t5.656 2.352l31.136 31.136 31.08-31.136q2.352-2.352 5.712-2.352t5.88 2.352l4.816 4.816q2.352 2.52 2.352 5.88z",
-  width: 100,
-  height: 63.034
-};
-const iconChevronRight = {
-  path: "M62.808 49.728q0 3.36-2.352 5.88l-41.72 41.664q-2.352 2.408-5.768 2.408t-5.768-2.408l-4.872-4.76q-2.352-2.52-2.352-5.88t2.352-5.712l31.08-31.136-31.08-31.024q-2.352-2.52-2.352-5.88t2.352-5.712l4.872-4.76q2.296-2.408 5.768-2.408t5.768 2.408l41.72 41.664q2.352 2.296 2.352 5.656z",
-  width: 63.034,
-  height: 100
-};
-const iconCircle = {
-  path: "M100.035 50.046q.057 13.623-6.669 25.137t-18.24 18.183-25.08 6.669-25.137-6.726q-11.514-6.726-18.183-18.183-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.669 25.137z",
-  width: 100,
-  height: 100
-};
-const iconCircleArrowDown = {
-  path: "M50.046 83.676q1.767 0 2.907-1.14l29.526-29.526q1.197-1.197 1.197-2.907t-1.197-2.964l-5.928-5.928q-1.197-1.14-2.964-1.14t-2.907 1.14l-12.312 12.312l0-32.661q0-1.71-1.254-2.964t-2.907-1.254l-8.322 0q-1.71 0-2.964 1.254t-1.254 2.964l0 32.661l-12.312-12.312q-1.197-1.254-2.907-1.254t-2.907 1.254l-5.928 5.928q-1.197 1.197-1.197 2.964t1.197 2.907l29.469 29.526q1.197 1.14 2.964 1.14zm49.989-33.63q.057 13.623-6.669 25.137t-18.24 18.183-25.08 6.669-25.137-6.726q-11.514-6.726-18.183-18.183-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.669 25.137z",
-  width: 100,
-  height: 100
-};
-const iconCircleArrowUp = {
-  path: "M54.207 83.391q1.653 0 2.907-1.254t1.254-2.907l0-32.718l12.312 12.312q1.254 1.254 2.964 1.254t2.907-1.254l5.928-5.928q1.197-1.197 1.14-2.964 0-1.767-1.14-2.907l-29.526-29.526q-1.197-1.14-2.907-1.14t-2.964 1.14l-29.469 29.526q-1.197 1.254-1.197 2.964t1.197 2.907l5.928 5.928q1.197 1.197 2.907 1.197t2.907-1.197l12.312-12.312l0 32.718q0 1.653 1.254 2.907t2.964 1.254l8.322 0zm45.828-33.345q.057 13.623-6.669 25.137t-18.24 18.183-25.08 6.669-25.137-6.726q-11.514-6.726-18.183-18.183-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.669 25.137z",
-  width: 100,
-  height: 100
-};
-const iconCircleThin = {
-  path: "M50.046 8.322q-8.493 0-16.188 3.306-15.561 6.669-22.173 22.23-3.363 7.695-3.363 16.188t3.306 16.188 8.949 13.281q5.586 5.586 13.281 8.892t16.188 3.306 16.188-3.306 13.281-8.892 8.892-13.281 3.306-16.188-3.306-16.188-8.892-13.281-13.281-8.949q-7.695-3.306-16.188-3.306zm0 91.713q-13.623 0-25.137-6.726t-18.183-18.183q-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.726 25.137-6.726 25.137-18.24 18.126q-11.514 6.726-25.08 6.726z",
-  width: 100,
-  height: 99.944
-};
-const iconDesktop = {
-  path: "M94.208 52.119l0-43.746q0-.69-.506-1.15t-1.196-.506l-84.088 0q-.69 0-1.196.506t-.506 1.15l0 43.746q0 .69.506 1.196t1.196.506l84.088 0q.69 0 1.196-.506t.506-1.196zm6.716-43.746l0 57.224q0 3.45-2.484 5.934t-5.934 2.484l-28.566 0q0 3.128 2.53 7.774.828 1.61.828 2.622t-1.012 2.07q-1.012 1.012-2.346.966l-26.91 0q-1.38 0-2.392-1.012t-1.012-2.024q0-1.058 1.656-4.14t1.748-6.256l-28.612 0q-3.45 0-5.934-2.484t-2.484-5.934l0-57.224q0-3.45 2.484-5.934t5.934-2.438l84.088 0q3.45 0 5.98 2.438 2.438 2.484 2.438 5.934z",
-  width: 100,
-  height: 86.648
-};
-const iconDropdownArrow = {
-  path: "M9 9.8c0 .5.7 1.7 1.5 2.8 1.5 1.9 1.5 1.9 3 0C15.7 9.7 15.4 9 12 9c-1.6 0-3 .4-3 .8z",
-  width: 24,
-  height: 24
-};
-const iconExclamationSign = {
-  path: "M58.368 81.225l0-12.369q0-.912-.57-1.539t-1.425-.627l-12.54 0q-.855-.057-1.482.627t-.684 1.539l0 12.369q-.057.855.627 1.482t1.539.684l12.54 0q.855 0 1.425-.627t.57-1.539zm1.026-62.871q0-1.596-2.223-1.71l-14.307 0q-2.109 0-2.223 1.71l1.14 40.47q0 .627.627 1.14t1.539.456l12.084 0q.912-.057 1.539-.513t.684-1.083zm-9.348-18.354q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.726 25.137-6.726 25.137-18.24 18.183-25.08 6.669-25.137-6.726q-11.514-6.726-18.183-18.183-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669z",
-  width: 100,
-  height: 99.944
-};
-// Grabbed from https://github.com/encharm/Font-Awesome-SVG-PNG
-const iconGear = {
-  path: "M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z",
-  width: 1792,
-  height: 1792
-};
-const iconMobilePhone = {
-  path: "M36.04 89.557q0-2.584-1.836-4.42t-4.42-1.836-4.352 1.836q-1.836 1.836-1.836 4.42t1.836 4.352 4.42 1.836q2.652-.068 4.42-1.836t1.768-4.352zm16.184-12.444l0-54.74q0-1.088-.748-1.768t-1.768-.68l-39.78 0q-1.088 0-1.768.748t-.68 1.7l0 54.74q0 1.02.748 1.768t1.7.68l39.78 0q1.02-.068 1.768-.748t.748-1.7zm-14.892-65.892q0-1.224-1.292-1.292l-12.444 0q-1.224.068-1.224 1.292t1.224 1.224l12.444 0q1.292 0 1.292-1.224zm22.372-1.292l0 79.628q0 3.944-2.992 6.936t-7.004 2.992l-39.78 0q-4.012 0-7.004-2.924-2.924-2.924-2.924-7.004l0-79.628q0-4.012 2.924-6.936t7.004-2.992l39.78 0q4.012-.068 7.004 2.924t2.992 7.004z",
-  width: 60.013,
-  height: 100
-};
-const iconOk = {
-  path: "M37.964 76.048q-2.576 0-4.368-1.792l-31.864-31.864q-1.792-1.792-1.792-4.368t1.792-4.368l8.736-8.68q1.792-1.792 4.368-1.792t4.312 1.792l18.816 18.872 42-42.056q1.792-1.792 4.368-1.792t4.312 1.792l8.736 8.736q1.792 1.792 1.792 4.368t-1.792 4.312l-55.048 55.048q-1.792 1.792-4.368 1.792z",
-  width: 100,
-  height: 76.637
-};
-const iconPlus = {
-  path: "M99.758 43.09l0 13.578q0 2.852-1.984 4.836t-4.836 1.984l-29.45 0l0 29.45q0 2.852-1.984 4.836t-4.836 1.984l-13.578 0q-2.852 0-4.836-1.984t-1.984-4.836l0-29.45l-29.45 0q-2.852 0-4.836-1.984t-1.984-4.836l0-13.578q0-2.852 1.984-4.836t4.836-1.984l29.45 0l0-29.45q0-2.852 1.984-4.836t4.836-1.984l13.578 0q2.852 0 4.836 1.984t1.984 4.836l0 29.45l29.45 0q2.852 0 4.836 1.984t1.984 4.836z",
-  width: 100,
-  height: 100
-};
-const iconRemove = {
-  path: "M100.464 80.808q0 3.404-2.368 5.772l-11.47 11.544q-2.368 2.368-5.772 2.368t-5.698-2.368l-24.864-24.864-24.864 24.864q-2.368 2.368-5.772 2.368t-5.772-2.368l-11.47-11.544q-2.368-2.368-2.368-5.772t2.368-5.698l24.864-24.864-24.864-24.864q-2.368-2.368-2.368-5.772t2.368-5.772l11.47-11.47q2.368-2.368 5.772-2.368t5.772 2.368l24.864 24.864 24.864-24.864q2.294-2.368 5.698-2.368t5.772 2.368l11.47 11.47q2.368 2.368 2.368 5.772t-2.368 5.772l-24.864 24.864 24.864 24.864q2.368 2.294 2.368 5.698z",
-  width: 100,
-  height: 100
+MathInput.defaultProps = {
+  value: "",
+  convertDotToTimes: false
 };
-const iconStar = {
-  path: "M15.1052249,9.55978547 L22.0028147,9.55978545 C23.6568673,9.55978545 23.9349557,10.3753626 22.6181351,11.3858845 L16.9943688,15.7015366 L19.2518801,22.8294455 C19.7526645,24.4106317 19.0984455,24.8825885 17.769353,23.8673293 L12.0490577,19.4977438 L6.5116497,23.8422153 C5.20921411,24.8640642 4.53299569,24.4067544 5.00266927,22.8160582 L7.10332364,15.7015366 L1.42794544,11.3634306 C0.110226041,10.3562014 0.383967283,9.54239221 2.0409646,9.54574013 L8.9924676,9.55978547 L11.1485117,2.72669438 C11.6458693,1.15043244 12.4548928,1.15900049 12.9494787,2.72669438 L15.1052249,9.55978547 Z",
-  width: 24,
-  height: 24
+const MathInputIcon = ({
+  hovered,
+  focused,
+  active
+}) => {
+  let color;
+  switch (true) {
+    case focused || active:
+      color = Color.white;
+      break;
+    case hovered:
+      color = Color.blue;
+      break;
+    default:
+      color = Color.offBlack;
+      break;
+  }
+  const dynamicClass = active || focused ? styles$A.iconActive : styles$A.iconInactive;
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles$A.iconContainer, dynamicClass]
+  }, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    fill: color,
+    viewBox: "0 0 256 256"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M112,72a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16h64A8,8,0,0,1,112,72Zm-8,104H80V152a8,8,0,0,0-16,0v24H40a8,8,0,0,0,0,16H64v24a8,8,0,0,0,16,0V192h24a8,8,0,0,0,0-16Zm48,0h64a8,8,0,0,0,0-16H152a8,8,0,0,0,0,16Zm64,16H152a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16Zm-61.66-90.34a8,8,0,0,0,11.32,0L184,83.31l18.34,18.35a8,8,0,0,0,11.32-11.32L195.31,72l18.35-18.34a8,8,0,0,0-11.32-11.32L184,60.69,165.66,42.34a8,8,0,0,0-11.32,11.32L172.69,72,154.34,90.34A8,8,0,0,0,154.34,101.66Z"
+  })));
 };
-const iconTryAgain = {
-  path: "M3.74890556,17.9799506 C2.19251241,16.1970909 1.10103636,13.4971457 1.13090903,11.1491783 C1.17160478,7.95052637 4.01704076,0.865059407 11.7028044,0.865059407 C19.388568,0.865059407 22.3026521,7.35203035 22.3026521,11.5879453 C22.3026521,15.8238603 19.386629,20.5574509 13.6832464,21.7131548 L13.6757539,17.3722171 C17.0812986,16.2190517 18.331158,14.1944123 18.3311578,11.5879451 C18.3311574,8.16554692 15.6664205,5.03476549 11.7028048,5.20494205 C7.73918903,5.37511861 5.59244567,8.66930079 5.59244567,11.1491783 C5.59244567,12.9090077 6.11128139,14.1753512 6.93640437,15.3053215 L8.14052356,14.2949456 C8.98559348,13.5858477 9.6994861,13.9070448 9.73489556,15.0076413 L9.91284941,20.5388014 C9.94832683,21.6415103 9.09967118,22.3514475 8.02194403,22.1254594 L2.60571602,20.9897332 C1.5259204,20.7633114 1.34338662,19.9984207 2.18070755,19.295825 L3.74890556,17.9799506 Z",
-  width: 23,
-  height: 23
+const mapButtonSets = buttonSets => {
+  const keypadButtonSets = {};
+  if (!buttonSets) {
+    return keypadButtonSets;
+  }
+  buttonSets.forEach(buttonSet => {
+    switch (buttonSet) {
+      case "advanced relations":
+        keypadButtonSets.advancedRelations = true;
+        break;
+      case "basic relations":
+        keypadButtonSets.basicRelations = true;
+        break;
+      case "basic+div":
+        keypadButtonSets.divisionKey = true;
+        break;
+      case "logarithms":
+        keypadButtonSets.logarithms = true;
+        break;
+      case "prealgebra":
+        keypadButtonSets.preAlgebra = true;
+        break;
+      case "trig":
+        keypadButtonSets.trigonometry = true;
+        break;
+    }
+  });
+  return keypadButtonSets;
 };
-const iconTablet = {
-  path: "M45.322 90.706q0-1.86-1.302-3.224-1.364-1.364-3.224-1.364t-3.224 1.364-1.302 3.224q0 1.86 1.364 3.224 1.302 1.364 3.162 1.302 1.86.062 3.224-1.302t1.302-3.224zm27.218-11.346l0-68.014q0-.93-.682-1.612t-1.55-.682l-58.962 0q-.93 0-1.612.682t-.682 1.612l0 68.014q0 .93.682 1.612t1.612.62l58.962 0q.992-.062 1.612-.682t.62-1.55zm9.114-68.014l0 77.066q0 4.65-3.348 7.998t-7.998 3.348l-58.962 0q-4.65 0-7.998-3.348t-3.348-7.998l0-77.066q0-4.65 3.348-7.998t7.998-3.348l58.962 0q4.65 0 7.998 3.348t3.348 7.998z",
-  width: 81.852,
-  height: 100
+const inputFocused = {
+  borderWidth: 2,
+  borderColor: Color.blue,
+  margin: -1
 };
-const iconTrash = {
-  path: "M31.293 37.506q2.052 0 2.052 2.109l0 37.506q0 1.995-2.052 2.109l-4.218 0q-.912-.057-1.482-.627t-.57-1.482l0-37.506q0-2.109 2.052-2.109l4.218 0zm18.753 2.109l0 37.506q0 .912-.57 1.482t-1.539.627l-4.161 0q-1.995 0-2.109-2.109l0-37.506q.057-.912.627-1.482t1.482-.627l4.161 0q.969.057 1.539.627t.57 1.482zm14.592-2.109q2.052 0 2.052 2.109l0 37.506q0 1.995-2.052 2.109l-4.161 0q-.969-.057-1.539-.627t-.57-1.482l0-37.506q0-2.109 2.109-2.109l4.161 0zm10.431 49.248l0-61.731l-58.368 0l0 61.731q.057 2.679.969 3.819t1.083 1.14l54.207 0q.171 0 1.14-1.083t.969-3.876zm-43.776-70.11l29.184 0l-3.135-7.581q-.456-.57-1.14-.741l-20.634 0q-.627.114-1.083.741zm-31.293 2.109q0-1.995 2.109-2.109l20.121 0l4.56-10.83q.969-2.394 3.477-4.104 2.565-1.71 5.187-1.71l20.805 0q2.622 0 5.187 1.71t3.477 4.104l4.56 10.83l20.178 0q.912.057 1.482.627t.57 1.482l0 4.161q0 1.995-2.052 2.109l-6.27 0l0 61.731q0 5.415-3.078 9.348t-7.353 3.933l-54.207 0q-4.275 0-7.353-3.819t-3.078-9.177l0-62.016l-6.213 0q-.969 0-1.539-.57t-.57-1.539l0-4.161z",
-  width: 91.681,
-  height: 100
+const styles$A = StyleSheet.create({
+  iconContainer: {
+    display: "flex",
+    justifyContent: "center",
+    height: "100%",
+    padding: Spacing.xxxSmall_4,
+    borderRadius: 1
+  },
+  iconInactive: {
+    backgroundColor: Color.offBlack8
+  },
+  iconActive: {
+    backgroundColor: Color.offBlack64
+  },
+  outerWrapper: {
+    display: "inline-block",
+    borderStyle: "solid",
+    borderWidth: 1,
+    borderColor: Color.offBlack50,
+    borderRadius: 3,
+    background: Color.white,
+    ":hover": inputFocused
+  },
+  wrapperFocused: inputFocused,
+  wrapperError: {
+    borderColor: Color.red,
+    background: fade(Color.red, 0.08),
+    ":hover": {
+      borderColor: Color.red
+    }
+  },
+  popoverContent: {
+    padding: 0,
+    paddingBottom: Spacing.xxSmall_6,
+    maxWidth: "initial"
+  }
+});
+
+let _dependencies = null;
+const setDependencies = dependencies => {
+  _dependencies = dependencies;
 };
-const iconUndo = {
-  path: "M10,6.6C10,7.2,9.8,8,9.3,9.1c0,0,0,0.1-0.1,0.1S9.2,9.3,9.2,9.4c0,0,0,0.1-0.1,0.1C9,9.6,9,9.6,8.9,9.6 c-0.1,0-0.1,0-0.1-0.1c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1s0-0.1,0-0.1c0-0.3,0-0.5,0-0.7c0-0.4,0-0.7-0.1-1C8.6,7.1,8.5,6.9,8.4,6.7S8.2,6.3,8,6.1C7.8,5.9,7.6,5.8,7.4,5.7S6.9,5.5,6.7,5.5S6.1,5.4,5.8,5.4c-0.3,0-0.6,0-1,0H3.6v1.4c0,0.1,0,0.2-0.1,0.3C3.4,7.1,3.3,7.1,3.2,7.1C3.1,7.1,3,7.1,3,7L0.1,4.1C0,4.1,0,4,0,3.9s0-0.2,0.1-0.3L3,0.8C3,0.7,3.1,0.7,3.2,0.7c0.1,0,0.2,0,0.3,0.1C3.5,0.9,3.6,0.9,3.6,1v1.4h1.2c2.6,0,4.3,0.7,4.9,2.2C9.9,5.2,10,5.8,10,6.6z",
-  width: 10,
-  height: 10
+const getDependencies = () => {
+  if (_dependencies) {
+    return _dependencies;
+  }
+  throw new Error(["Perseus has not been provided required dependencies.", "setDependencies(dependencies) must be called first.", "Make sure Perseus is being imported from javascript/perseus/perseus.js."].join("\n"));
 };
-const iconMinus = {
-  path: `M8,13 L16,13 C16.5522847,13 17,12.5522847 17,12 C17,11.4477153 16.5522847,11 16,11 L8,11 C7.44771525,11 7,11.4477153 7,12 C7,12.5522847 7.44771525,13 8,13 Z`,
-  width: 24,
-  height: 24
+const DependenciesContext = /*#__PURE__*/React.createContext({
+  analytics: {
+    onAnalyticsEvent: async () => {}
+  }
+});
+
+/**
+ * useDependencies provides easy access to the current Perseus dependencies.
+ */
+const useDependencies = () => {
+  const deps = React.useContext(DependenciesContext);
+  return deps;
 };
 
-var iconPaths = /*#__PURE__*/Object.freeze({
+var dependencies = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  iconCheck: iconCheck,
-  iconCheckMedium: iconCheckMedium,
-  iconChevronDown: iconChevronDown,
-  iconChevronRight: iconChevronRight,
-  iconCircle: iconCircle,
-  iconCircleArrowDown: iconCircleArrowDown,
-  iconCircleArrowUp: iconCircleArrowUp,
-  iconCircleThin: iconCircleThin,
-  iconDesktop: iconDesktop,
-  iconDropdownArrow: iconDropdownArrow,
-  iconExclamationSign: iconExclamationSign,
-  iconGear: iconGear,
-  iconMobilePhone: iconMobilePhone,
-  iconOk: iconOk,
-  iconPlus: iconPlus,
-  iconRemove: iconRemove,
-  iconStar: iconStar,
-  iconTryAgain: iconTryAgain,
-  iconTablet: iconTablet,
-  iconTrash: iconTrash,
-  iconUndo: iconUndo,
-  iconMinus: iconMinus
+  setDependencies: setDependencies,
+  getDependencies: getDependencies,
+  DependenciesContext: DependenciesContext,
+  useDependencies: useDependencies
 });
 
 // TODO(LP-11481): Change the primary API we use for logging in Perseus to use
@@ -1521,6 +936,26 @@ const ClassNames = {
   MOBILE: "perseus-mobile"
 };
 
+/*
+ * A11y (Accessibility) style rules
+ * These are used to mark up areas on the site that should only be readable
+ * when using a screen reader.
+ */
+var a11y = StyleSheet.create({
+  // Make content only visible to screen readers.
+  // Both collegeboard.org and Bootstrap 3 use this exact implementation.
+  srOnly: {
+    border: 0,
+    clip: "rect(0,0,0,0)",
+    height: 1,
+    margin: -1,
+    overflow: "hidden",
+    padding: 0,
+    position: "absolute",
+    width: 1
+  }
+});
+
 const KhanMath = {
   // Simplify formulas before display
   cleanMath: function (expr) {
@@ -2435,6 +1870,7 @@ const KhanAnswerTypes = {
   }
 };
 
+const ERROR_TITLE = i18n._("Oops!");
 const ERROR_MESSAGE = i18n._("Sorry, I don't understand that!");
 const insertBraces = value => {
   // HACK(alex): Make sure that all LaTeX super/subscripts are wrapped
@@ -2469,53 +1905,48 @@ class Expression extends React.Component {
   constructor(..._args) {
     super(..._args);
     this._isMounted = false;
-    this.errorTimeout = null;
     this.displayName = "Expression";
     this.state = {
+      invalid: false,
       showErrorTooltip: false,
-      showErrorText: false
+      showErrorStyle: false
     };
     this.componentDidMount = () => {
+      document.addEventListener("mousedown", this._handleMouseDown);
+
       // TODO(scottgrant): This is a hack to remove the deprecated call to
       // this.isMounted() but is still considered an anti-pattern.
       this._isMounted = true;
     };
     this.componentDidUpdate = prevProps => {
       if (!_.isEqual(this.props.value, prevProps.value) || !_.isEqual(this.props.functions, prevProps.functions)) {
-        // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
-        // eslint-disable-next-line no-restricted-syntax
-        // @ts-expect-error - TS2769 - No overload matches this call.
-        clearTimeout(this.errorTimeout);
-        if (this.parse(this.props.value, this.props).parsed) {
-          // eslint-disable-next-line react/no-did-update-set-state
-          this.setState({
-            showErrorTooltip: false
-          });
-        } else {
-          // Store timeout ID so that we can clear it above
-          // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
-          // eslint-disable-next-line no-restricted-syntax
-          // @ts-expect-error - TS2322 - Type 'Timeout' is not assignable to type 'number'.
-          this.errorTimeout = setTimeout(() => {
-            const apiResult = this.props.apiOptions.onInputError(null,
-            // reserved for some widget identifier
-            this.props.value, ERROR_MESSAGE);
-            if (apiResult !== false) {
-              this.setState({
-                showErrorTooltip: true
-              });
-            }
-          }, 2000);
+        this.setState({
+          invalid: false,
+          showErrorTooltip: false,
+          showErrorStyle: false
+        });
+        if (!this.parse(this.props.value, this.props).parsed) {
+          const apiResult = this.props.apiOptions.onInputError(null,
+          // reserved for some widget identifier
+          this.props.value, ERROR_MESSAGE);
+          if (apiResult !== false) {
+            this.setState({
+              invalid: true
+            });
+          }
         }
       }
     };
     this.componentWillUnmount = () => {
-      // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
-      // eslint-disable-next-line no-restricted-syntax
-      // @ts-expect-error - TS2769 - No overload matches this call.
-      clearTimeout(this.errorTimeout);
       this._isMounted = false;
     };
+    this._handleMouseDown = () => {
+      if (this._isMounted && this.state.showErrorTooltip) {
+        this.setState({
+          showErrorTooltip: false
+        });
+      }
+    };
     this.simpleValidate = (rubric, onInputError) => {
       onInputError = onInputError || function () {};
       const result = Expression.validate(this.getUserInput(), rubric, onInputError);
@@ -2542,7 +1973,8 @@ class Expression extends React.Component {
       this.props.trackInteraction();
     };
     this._handleFocus = () => {
-      this.props.analytics.onAnalyticsEvent({
+      var _this$props$analytics;
+      (_this$props$analytics = this.props.analytics) == null ? void 0 : _this$props$analytics.onAnalyticsEvent({
         type: "perseus:expression-focused",
         payload: null
       });
@@ -2751,7 +2183,8 @@ class Expression extends React.Component {
     this.refs.input.insert(keyPressed);
   }
   sendExpressionEvaluatedEvent(result) {
-    this.props.analytics.onAnalyticsEvent({
+    var _this$props$analytics2;
+    (_this$props$analytics2 = this.props.analytics) == null ? void 0 : _this$props$analytics2.onAnalyticsEvent({
       type: "perseus:expression-evaluated",
       payload: {
         result,
@@ -2760,6 +2193,7 @@ class Expression extends React.Component {
     });
   }
   render() {
+    var _this$props$keypadCon, _this$props$analytics3;
     if (this.props.apiOptions.customKeypad) {
       return /*#__PURE__*/React.createElement(KeypadInput
       // eslint-disable-next-line react/no-string-refs
@@ -2782,47 +2216,27 @@ class Expression extends React.Component {
         onBlur: this._handleBlur
       });
     }
-    // TODO(alex): Style this tooltip to be more consistent with other
-    // tooltips on the site; align to left middle (once possible)
-    const errorTooltip = /*#__PURE__*/React.createElement("span", {
-      className: "error-tooltip",
-      role: "tooltip"
-    }, /*#__PURE__*/React.createElement(Tooltip, {
-      className: "error-text-container",
-      horizontalPosition: HorizontalDirection.Right,
-      horizontalAlign: HorizontalDirection.Left,
-      verticalPosition: VerticalDirection.Top,
-      arrowSize: 10,
-      borderColor: "#fcc335",
-      show: this.state.showErrorText
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "error-icon",
-      "data-test-id": "test-error-icon",
-      onMouseEnter: () => {
-        this.setState({
-          showErrorText: true
-        });
-      },
-      onMouseLeave: () => {
-        this.setState({
-          showErrorText: false
-        });
-      },
-      onClick: () => {
-        // TODO(alex): Better error feedback for mobile
-        this.setState({
-          showErrorText: !this.state.showErrorText
-        });
-      }
-    }, /*#__PURE__*/React.createElement(InlineIcon, iconExclamationSign)), /*#__PURE__*/React.createElement("div", {
-      className: "error-text"
-    }, ERROR_MESSAGE)));
     const className = classNames({
       "perseus-widget-expression": true,
       "show-error-tooltip": this.state.showErrorTooltip
     });
     return /*#__PURE__*/React.createElement("div", {
-      className: className
+      className: className,
+      onBlur: () => this.state.invalid && this.setState({
+        showErrorTooltip: true,
+        showErrorStyle: true
+      }),
+      onFocus: () => this.setState({
+        showErrorTooltip: false
+      })
+    }, /*#__PURE__*/React.createElement(View, {
+      style: a11y.srOnly,
+      role: "alert"
+    }, this.state.showErrorTooltip && ERROR_TITLE + " " + ERROR_MESSAGE), /*#__PURE__*/React.createElement(Tooltip$1, {
+      forceAnchorFocusivity: false,
+      opened: this.state.showErrorTooltip,
+      title: ERROR_TITLE,
+      content: ERROR_MESSAGE
     }, /*#__PURE__*/React.createElement(MathInput
     // eslint-disable-next-line react/no-string-refs
     , {
@@ -2831,11 +2245,15 @@ class Expression extends React.Component {
       value: this.props.value,
       onChange: this.changeAndTrack,
       convertDotToTimes: this.props.times,
-      buttonsVisible: this.props.buttonsVisible || "focused",
       buttonSets: this.props.buttonSets,
       onFocus: this._handleFocus,
-      onBlur: this._handleBlur
-    }), this.state.showErrorTooltip && errorTooltip);
+      onBlur: this._handleBlur,
+      hasError: this.state.showErrorStyle,
+      extraKeys: (_this$props$keypadCon = this.props.keypadConfiguration) == null ? void 0 : _this$props$keypadCon.extraKeys,
+      analytics: (_this$props$analytics3 = this.props.analytics) != null ? _this$props$analytics3 : {
+        onAnalyticsEvent: async function () {}
+      }
+    })));
   }
 }
 
@@ -2878,11 +2296,18 @@ const keypadConfigurationForProps = widgetOptions => {
       // and Theta, so we special-case.
       const isGreek = symbol => symbol === "pi" || symbol === "theta";
       const toKey = symbol => isGreek(symbol) ? symbol.toUpperCase() : symbol;
+      const isKey = key => KeyArray.includes(key);
       for (const variable of expr.getVars()) {
-        uniqueExtraVariables[toKey(variable)] = true;
+        const maybeKey = toKey(variable);
+        if (isKey(maybeKey)) {
+          uniqueExtraVariables[maybeKey] = true;
+        }
       }
       for (const constant of expr.getConsts()) {
-        uniqueExtraConstants[toKey(constant)] = true;
+        const maybeKey = toKey(constant);
+        if (isKey(maybeKey)) {
+          uniqueExtraConstants[maybeKey] = true;
+        }
       }
     }
   }
@@ -14949,6 +14374,196 @@ _.extend(MovableLine$4.prototype, {
   }
 });
 
+/**
+ * A stripped version of Icon.jsx from webapp. Takes an SVG icon and renders it
+ * inline like Font Awesome did.
+ *
+ * If you are looking for an icon that we've used before you should look in
+ * webapp's `icon-paths.js` which is a reference file for all the SVG paths
+ * that we've used. You'll need to copy the object from that file into
+ * whichever file you're using the icon and explicitly pass it in to the
+ * <InlineIcon/> React component.
+ *
+ * We assume that the viewBox is cropped and aligned to (0, 0), but icons can
+ * be defined differently. At some point we might want to add these attributes
+ * to `icon-paths.js`, but for now this is a fairly safe assumption.
+ *
+ * Sample usage:
+ *
+ *   const editIcon = {
+ *      path: "M41.209 53.753l5.39 0l0 5.39l3.136 0l6.468-6.517-8.477-8.526-6.517 6.517l0 3.136zm33.173-34.937q-.882-.882-1.862.049l-19.6 19.6q-.931.98-.049 1.862t1.862-.049l19.6-19.6q.931-.98.049-1.862zm-38.563 45.668l0-16.121l37.632-37.632 16.17 16.121-37.632 37.632l-16.17 0zm43.022-12.397l0 10.633q-.049 6.713-4.753 11.417t-11.368 4.704l-46.599 0q-6.713 0-11.417-4.753t-4.704-11.368l0-46.599q0-6.664 4.753-11.417t11.368-4.704l46.599 0q3.528 0 6.566 1.372.833.392.98 1.323t-.49 1.617l-2.744 2.744q-.784.784-1.96.441t-2.352-.343l-46.599 0q-3.675 0-6.321 2.646t-2.646 6.321l0 46.599q0 3.675 2.646 6.321t6.321 2.646l46.599 0q3.675 0 6.321-2.646t2.646-6.321l0-7.056q0-.735.49-1.225l3.577-3.577q.833-.833 1.96-.392t1.127 1.617zm7.203-51.646q2.254 0 3.773 1.568l8.526 8.526q1.568 1.568 1.568 3.822t-1.568 3.773l-5.145 5.145-16.121-16.121 5.145-5.145q1.568-1.568 3.822-1.568z",
+ *      width: 100,
+ *      height: 78.912,
+ *   };
+ *   <InlineIcon {...editIcon} />
+ *
+ */
+const InlineIcon = ({
+  path,
+  width,
+  height,
+  style: _style = {},
+  title
+}) => /*#__PURE__*/React.createElement("svg", {
+  role: "img",
+  "aria-hidden": !title,
+  style: _extends({
+    verticalAlign: "middle"
+  }, _style),
+  width: `${width / height}em`,
+  height: "1em",
+  viewBox: `0 0 ${width} ${height}`
+}, !!title && /*#__PURE__*/React.createElement("title", null, title), /*#__PURE__*/React.createElement("path", {
+  d: path,
+  fill: "currentColor"
+}));
+
+/**
+ * Icon paths to be used with `inline-icon.jsx`.
+ *
+ * These paths are taken directly from webapp's `icon-paths.js`. Unlike the
+ * webapp equivalent, these can be directly required within Perseus files since
+ * this is all bundled together anyway.
+ */
+
+const iconCheck = {
+  path: `M8.70710678,12.2928932 C8.31658249,11.9023689 7.68341751,11.9023689 7.29289322,12.2928932 C6.90236893,12.6834175 6.90236893,13.3165825 7.29289322,13.7071068 L9.82842712,16.2426407 C10.2207367,16.6349502 10.8574274,16.6328935 11.2471942,16.2380576 L16.7116603,10.7025237 C17.0996535,10.3094846 17.0955629,9.67633279 16.7025237,9.28833966 C16.3094846,8.90034653 15.6763328,8.90443714 15.2883397,9.29747629 L10.5309507,14.1167372 L8.70710678,12.2928932 Z`,
+  width: 24,
+  height: 24
+};
+const iconCheckMedium = {
+  path: "M6.072 10.4l6.175-7.058a1 1 0 1 1 1.506 1.317L6.769 12.64a1 1 0 0 1-1.55-.054L2.203 8.604a1 1 0 1 1 1.594-1.208L6.072 10.4z",
+  width: 16,
+  height: 16
+};
+const iconChevronDown = {
+  path: "M99.669 13.048q0 3.36-2.352 5.712l-41.664 41.664q-2.408 2.408-5.88 2.408t-5.712-2.408l-41.664-41.664q-2.408-2.24-2.408-5.712t2.408-5.88l4.76-4.816q2.52-2.352 5.88-2.352t5.656 2.352l31.136 31.136 31.08-31.136q2.352-2.352 5.712-2.352t5.88 2.352l4.816 4.816q2.352 2.52 2.352 5.88z",
+  width: 100,
+  height: 63.034
+};
+const iconChevronRight = {
+  path: "M62.808 49.728q0 3.36-2.352 5.88l-41.72 41.664q-2.352 2.408-5.768 2.408t-5.768-2.408l-4.872-4.76q-2.352-2.52-2.352-5.88t2.352-5.712l31.08-31.136-31.08-31.024q-2.352-2.52-2.352-5.88t2.352-5.712l4.872-4.76q2.296-2.408 5.768-2.408t5.768 2.408l41.72 41.664q2.352 2.296 2.352 5.656z",
+  width: 63.034,
+  height: 100
+};
+const iconCircle = {
+  path: "M100.035 50.046q.057 13.623-6.669 25.137t-18.24 18.183-25.08 6.669-25.137-6.726q-11.514-6.726-18.183-18.183-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.669 25.137z",
+  width: 100,
+  height: 100
+};
+const iconCircleArrowDown = {
+  path: "M50.046 83.676q1.767 0 2.907-1.14l29.526-29.526q1.197-1.197 1.197-2.907t-1.197-2.964l-5.928-5.928q-1.197-1.14-2.964-1.14t-2.907 1.14l-12.312 12.312l0-32.661q0-1.71-1.254-2.964t-2.907-1.254l-8.322 0q-1.71 0-2.964 1.254t-1.254 2.964l0 32.661l-12.312-12.312q-1.197-1.254-2.907-1.254t-2.907 1.254l-5.928 5.928q-1.197 1.197-1.197 2.964t1.197 2.907l29.469 29.526q1.197 1.14 2.964 1.14zm49.989-33.63q.057 13.623-6.669 25.137t-18.24 18.183-25.08 6.669-25.137-6.726q-11.514-6.726-18.183-18.183-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.669 25.137z",
+  width: 100,
+  height: 100
+};
+const iconCircleArrowUp = {
+  path: "M54.207 83.391q1.653 0 2.907-1.254t1.254-2.907l0-32.718l12.312 12.312q1.254 1.254 2.964 1.254t2.907-1.254l5.928-5.928q1.197-1.197 1.14-2.964 0-1.767-1.14-2.907l-29.526-29.526q-1.197-1.14-2.907-1.14t-2.964 1.14l-29.469 29.526q-1.197 1.254-1.197 2.964t1.197 2.907l5.928 5.928q1.197 1.197 2.907 1.197t2.907-1.197l12.312-12.312l0 32.718q0 1.653 1.254 2.907t2.964 1.254l8.322 0zm45.828-33.345q.057 13.623-6.669 25.137t-18.24 18.183-25.08 6.669-25.137-6.726q-11.514-6.726-18.183-18.183-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.669 25.137z",
+  width: 100,
+  height: 100
+};
+const iconCircleThin = {
+  path: "M50.046 8.322q-8.493 0-16.188 3.306-15.561 6.669-22.173 22.23-3.363 7.695-3.363 16.188t3.306 16.188 8.949 13.281q5.586 5.586 13.281 8.892t16.188 3.306 16.188-3.306 13.281-8.892 8.892-13.281 3.306-16.188-3.306-16.188-8.892-13.281-13.281-8.949q-7.695-3.306-16.188-3.306zm0 91.713q-13.623 0-25.137-6.726t-18.183-18.183q-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.726 25.137-6.726 25.137-18.24 18.126q-11.514 6.726-25.08 6.726z",
+  width: 100,
+  height: 99.944
+};
+const iconDesktop = {
+  path: "M94.208 52.119l0-43.746q0-.69-.506-1.15t-1.196-.506l-84.088 0q-.69 0-1.196.506t-.506 1.15l0 43.746q0 .69.506 1.196t1.196.506l84.088 0q.69 0 1.196-.506t.506-1.196zm6.716-43.746l0 57.224q0 3.45-2.484 5.934t-5.934 2.484l-28.566 0q0 3.128 2.53 7.774.828 1.61.828 2.622t-1.012 2.07q-1.012 1.012-2.346.966l-26.91 0q-1.38 0-2.392-1.012t-1.012-2.024q0-1.058 1.656-4.14t1.748-6.256l-28.612 0q-3.45 0-5.934-2.484t-2.484-5.934l0-57.224q0-3.45 2.484-5.934t5.934-2.438l84.088 0q3.45 0 5.98 2.438 2.438 2.484 2.438 5.934z",
+  width: 100,
+  height: 86.648
+};
+const iconDropdownArrow = {
+  path: "M9 9.8c0 .5.7 1.7 1.5 2.8 1.5 1.9 1.5 1.9 3 0C15.7 9.7 15.4 9 12 9c-1.6 0-3 .4-3 .8z",
+  width: 24,
+  height: 24
+};
+const iconExclamationSign = {
+  path: "M58.368 81.225l0-12.369q0-.912-.57-1.539t-1.425-.627l-12.54 0q-.855-.057-1.482.627t-.684 1.539l0 12.369q-.057.855.627 1.482t1.539.684l12.54 0q.855 0 1.425-.627t.57-1.539zm1.026-62.871q0-1.596-2.223-1.71l-14.307 0q-2.109 0-2.223 1.71l1.14 40.47q0 .627.627 1.14t1.539.456l12.084 0q.912-.057 1.539-.513t.684-1.083zm-9.348-18.354q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.726 25.137-6.726 25.137-18.24 18.183-25.08 6.669-25.137-6.726q-11.514-6.726-18.183-18.183-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669z",
+  width: 100,
+  height: 99.944
+};
+// Grabbed from https://github.com/encharm/Font-Awesome-SVG-PNG
+const iconGear = {
+  path: "M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z",
+  width: 1792,
+  height: 1792
+};
+const iconMobilePhone = {
+  path: "M36.04 89.557q0-2.584-1.836-4.42t-4.42-1.836-4.352 1.836q-1.836 1.836-1.836 4.42t1.836 4.352 4.42 1.836q2.652-.068 4.42-1.836t1.768-4.352zm16.184-12.444l0-54.74q0-1.088-.748-1.768t-1.768-.68l-39.78 0q-1.088 0-1.768.748t-.68 1.7l0 54.74q0 1.02.748 1.768t1.7.68l39.78 0q1.02-.068 1.768-.748t.748-1.7zm-14.892-65.892q0-1.224-1.292-1.292l-12.444 0q-1.224.068-1.224 1.292t1.224 1.224l12.444 0q1.292 0 1.292-1.224zm22.372-1.292l0 79.628q0 3.944-2.992 6.936t-7.004 2.992l-39.78 0q-4.012 0-7.004-2.924-2.924-2.924-2.924-7.004l0-79.628q0-4.012 2.924-6.936t7.004-2.992l39.78 0q4.012-.068 7.004 2.924t2.992 7.004z",
+  width: 60.013,
+  height: 100
+};
+const iconOk = {
+  path: "M37.964 76.048q-2.576 0-4.368-1.792l-31.864-31.864q-1.792-1.792-1.792-4.368t1.792-4.368l8.736-8.68q1.792-1.792 4.368-1.792t4.312 1.792l18.816 18.872 42-42.056q1.792-1.792 4.368-1.792t4.312 1.792l8.736 8.736q1.792 1.792 1.792 4.368t-1.792 4.312l-55.048 55.048q-1.792 1.792-4.368 1.792z",
+  width: 100,
+  height: 76.637
+};
+const iconPlus = {
+  path: "M99.758 43.09l0 13.578q0 2.852-1.984 4.836t-4.836 1.984l-29.45 0l0 29.45q0 2.852-1.984 4.836t-4.836 1.984l-13.578 0q-2.852 0-4.836-1.984t-1.984-4.836l0-29.45l-29.45 0q-2.852 0-4.836-1.984t-1.984-4.836l0-13.578q0-2.852 1.984-4.836t4.836-1.984l29.45 0l0-29.45q0-2.852 1.984-4.836t4.836-1.984l13.578 0q2.852 0 4.836 1.984t1.984 4.836l0 29.45l29.45 0q2.852 0 4.836 1.984t1.984 4.836z",
+  width: 100,
+  height: 100
+};
+const iconRemove = {
+  path: "M100.464 80.808q0 3.404-2.368 5.772l-11.47 11.544q-2.368 2.368-5.772 2.368t-5.698-2.368l-24.864-24.864-24.864 24.864q-2.368 2.368-5.772 2.368t-5.772-2.368l-11.47-11.544q-2.368-2.368-2.368-5.772t2.368-5.698l24.864-24.864-24.864-24.864q-2.368-2.368-2.368-5.772t2.368-5.772l11.47-11.47q2.368-2.368 5.772-2.368t5.772 2.368l24.864 24.864 24.864-24.864q2.294-2.368 5.698-2.368t5.772 2.368l11.47 11.47q2.368 2.368 2.368 5.772t-2.368 5.772l-24.864 24.864 24.864 24.864q2.368 2.294 2.368 5.698z",
+  width: 100,
+  height: 100
+};
+const iconStar = {
+  path: "M15.1052249,9.55978547 L22.0028147,9.55978545 C23.6568673,9.55978545 23.9349557,10.3753626 22.6181351,11.3858845 L16.9943688,15.7015366 L19.2518801,22.8294455 C19.7526645,24.4106317 19.0984455,24.8825885 17.769353,23.8673293 L12.0490577,19.4977438 L6.5116497,23.8422153 C5.20921411,24.8640642 4.53299569,24.4067544 5.00266927,22.8160582 L7.10332364,15.7015366 L1.42794544,11.3634306 C0.110226041,10.3562014 0.383967283,9.54239221 2.0409646,9.54574013 L8.9924676,9.55978547 L11.1485117,2.72669438 C11.6458693,1.15043244 12.4548928,1.15900049 12.9494787,2.72669438 L15.1052249,9.55978547 Z",
+  width: 24,
+  height: 24
+};
+const iconTryAgain = {
+  path: "M3.74890556,17.9799506 C2.19251241,16.1970909 1.10103636,13.4971457 1.13090903,11.1491783 C1.17160478,7.95052637 4.01704076,0.865059407 11.7028044,0.865059407 C19.388568,0.865059407 22.3026521,7.35203035 22.3026521,11.5879453 C22.3026521,15.8238603 19.386629,20.5574509 13.6832464,21.7131548 L13.6757539,17.3722171 C17.0812986,16.2190517 18.331158,14.1944123 18.3311578,11.5879451 C18.3311574,8.16554692 15.6664205,5.03476549 11.7028048,5.20494205 C7.73918903,5.37511861 5.59244567,8.66930079 5.59244567,11.1491783 C5.59244567,12.9090077 6.11128139,14.1753512 6.93640437,15.3053215 L8.14052356,14.2949456 C8.98559348,13.5858477 9.6994861,13.9070448 9.73489556,15.0076413 L9.91284941,20.5388014 C9.94832683,21.6415103 9.09967118,22.3514475 8.02194403,22.1254594 L2.60571602,20.9897332 C1.5259204,20.7633114 1.34338662,19.9984207 2.18070755,19.295825 L3.74890556,17.9799506 Z",
+  width: 23,
+  height: 23
+};
+const iconTablet = {
+  path: "M45.322 90.706q0-1.86-1.302-3.224-1.364-1.364-3.224-1.364t-3.224 1.364-1.302 3.224q0 1.86 1.364 3.224 1.302 1.364 3.162 1.302 1.86.062 3.224-1.302t1.302-3.224zm27.218-11.346l0-68.014q0-.93-.682-1.612t-1.55-.682l-58.962 0q-.93 0-1.612.682t-.682 1.612l0 68.014q0 .93.682 1.612t1.612.62l58.962 0q.992-.062 1.612-.682t.62-1.55zm9.114-68.014l0 77.066q0 4.65-3.348 7.998t-7.998 3.348l-58.962 0q-4.65 0-7.998-3.348t-3.348-7.998l0-77.066q0-4.65 3.348-7.998t7.998-3.348l58.962 0q4.65 0 7.998 3.348t3.348 7.998z",
+  width: 81.852,
+  height: 100
+};
+const iconTrash = {
+  path: "M31.293 37.506q2.052 0 2.052 2.109l0 37.506q0 1.995-2.052 2.109l-4.218 0q-.912-.057-1.482-.627t-.57-1.482l0-37.506q0-2.109 2.052-2.109l4.218 0zm18.753 2.109l0 37.506q0 .912-.57 1.482t-1.539.627l-4.161 0q-1.995 0-2.109-2.109l0-37.506q.057-.912.627-1.482t1.482-.627l4.161 0q.969.057 1.539.627t.57 1.482zm14.592-2.109q2.052 0 2.052 2.109l0 37.506q0 1.995-2.052 2.109l-4.161 0q-.969-.057-1.539-.627t-.57-1.482l0-37.506q0-2.109 2.109-2.109l4.161 0zm10.431 49.248l0-61.731l-58.368 0l0 61.731q.057 2.679.969 3.819t1.083 1.14l54.207 0q.171 0 1.14-1.083t.969-3.876zm-43.776-70.11l29.184 0l-3.135-7.581q-.456-.57-1.14-.741l-20.634 0q-.627.114-1.083.741zm-31.293 2.109q0-1.995 2.109-2.109l20.121 0l4.56-10.83q.969-2.394 3.477-4.104 2.565-1.71 5.187-1.71l20.805 0q2.622 0 5.187 1.71t3.477 4.104l4.56 10.83l20.178 0q.912.057 1.482.627t.57 1.482l0 4.161q0 1.995-2.052 2.109l-6.27 0l0 61.731q0 5.415-3.078 9.348t-7.353 3.933l-54.207 0q-4.275 0-7.353-3.819t-3.078-9.177l0-62.016l-6.213 0q-.969 0-1.539-.57t-.57-1.539l0-4.161z",
+  width: 91.681,
+  height: 100
+};
+const iconUndo = {
+  path: "M10,6.6C10,7.2,9.8,8,9.3,9.1c0,0,0,0.1-0.1,0.1S9.2,9.3,9.2,9.4c0,0,0,0.1-0.1,0.1C9,9.6,9,9.6,8.9,9.6 c-0.1,0-0.1,0-0.1-0.1c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1s0-0.1,0-0.1c0-0.3,0-0.5,0-0.7c0-0.4,0-0.7-0.1-1C8.6,7.1,8.5,6.9,8.4,6.7S8.2,6.3,8,6.1C7.8,5.9,7.6,5.8,7.4,5.7S6.9,5.5,6.7,5.5S6.1,5.4,5.8,5.4c-0.3,0-0.6,0-1,0H3.6v1.4c0,0.1,0,0.2-0.1,0.3C3.4,7.1,3.3,7.1,3.2,7.1C3.1,7.1,3,7.1,3,7L0.1,4.1C0,4.1,0,4,0,3.9s0-0.2,0.1-0.3L3,0.8C3,0.7,3.1,0.7,3.2,0.7c0.1,0,0.2,0,0.3,0.1C3.5,0.9,3.6,0.9,3.6,1v1.4h1.2c2.6,0,4.3,0.7,4.9,2.2C9.9,5.2,10,5.8,10,6.6z",
+  width: 10,
+  height: 10
+};
+const iconMinus = {
+  path: `M8,13 L16,13 C16.5522847,13 17,12.5522847 17,12 C17,11.4477153 16.5522847,11 16,11 L8,11 C7.44771525,11 7,11.4477153 7,12 C7,12.5522847 7.44771525,13 8,13 Z`,
+  width: 24,
+  height: 24
+};
+
+var iconPaths = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  iconCheck: iconCheck,
+  iconCheckMedium: iconCheckMedium,
+  iconChevronDown: iconChevronDown,
+  iconChevronRight: iconChevronRight,
+  iconCircle: iconCircle,
+  iconCircleArrowDown: iconCircleArrowDown,
+  iconCircleArrowUp: iconCircleArrowUp,
+  iconCircleThin: iconCircleThin,
+  iconDesktop: iconDesktop,
+  iconDropdownArrow: iconDropdownArrow,
+  iconExclamationSign: iconExclamationSign,
+  iconGear: iconGear,
+  iconMobilePhone: iconMobilePhone,
+  iconOk: iconOk,
+  iconPlus: iconPlus,
+  iconRemove: iconRemove,
+  iconStar: iconStar,
+  iconTryAgain: iconTryAgain,
+  iconTablet: iconTablet,
+  iconTrash: iconTrash,
+  iconUndo: iconUndo,
+  iconMinus: iconMinus
+});
+
 /* eslint-disable @babel/no-invalid-this */
 const add$1 = {
   constrain: function () {
@@ -20819,6 +20434,258 @@ TextInput.defaultProps = {
   disabled: false
 };
 
+/* eslint-disable react/no-unsafe */
+const zIndex = 10;
+let HorizontalDirection = /*#__PURE__*/function (HorizontalDirection) {
+  HorizontalDirection["Left"] = "left";
+  HorizontalDirection["Right"] = "right";
+  return HorizontalDirection;
+}({});
+let VerticalDirection = /*#__PURE__*/function (VerticalDirection) {
+  VerticalDirection["Top"] = "top";
+  VerticalDirection["Bottom"] = "bottom";
+  return VerticalDirection;
+}({});
+const Triangle = props => {
+  let borderLeft;
+  let borderRight;
+  let borderTop;
+  let borderBottom;
+  const hBorder = `${props.width}px solid transparent`;
+  if (props.horizontalDirection === "right") {
+    borderLeft = hBorder;
+  } else {
+    borderRight = hBorder;
+  }
+  const vBorder = `${props.height}px solid ${props.color}`;
+  if (props.verticalDirection === "top") {
+    borderTop = vBorder;
+  } else {
+    borderBottom = vBorder;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "block",
+      height: 0,
+      width: 0,
+      position: "absolute",
+      left: props.left,
+      top: props["top"],
+      borderLeft: borderLeft,
+      borderRight: borderRight,
+      borderTop: borderTop,
+      borderBottom: borderBottom
+    }
+  });
+};
+const TooltipArrow = props => {
+  // TODO(aria): Think about adding a box-shadow to the triangle here
+  // See http://css-tricks.com/triangle-with-shadow/
+
+  //const isRight = (this.props.horizontalDirection === "right");
+  const isTop = props.verticalDirection === "top";
+  const frontTopOffset = isTop ? 0 : 1;
+  const borderTopOffset = isTop ? 0 : -1;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "block",
+      position: props.position,
+      visibility: props.visibility,
+      left: props.left,
+      top: props["top"],
+      width: props.width + 2,
+      height: props.height + 1,
+      marginTop: -1,
+      marginBottom: -2,
+      zIndex: zIndex
+    }
+  }, /*#__PURE__*/React.createElement(Triangle, {
+    horizontalDirection: props.horizontalDirection,
+    verticalDirection: props.verticalDirection,
+    color: props.border,
+    left: 0,
+    top: borderTopOffset,
+    width: props.width + 2 // one extra for the diagonal
+    ,
+    height: props.height + 2
+  }), /*#__PURE__*/React.createElement(Triangle, {
+    horizontalDirection: props.horizontalDirection,
+    verticalDirection: props.verticalDirection,
+    color: props.color,
+    left: 1,
+    top: frontTopOffset,
+    width: props.width,
+    height: props.height
+  }));
+};
+TooltipArrow.defaultProps = {
+  position: "relative",
+  visibility: "visible",
+  left: 0,
+  top: 0
+};
+const VERTICAL_CORNERS = {
+  top: {
+    top: "-100%"
+  },
+  bottom: {
+    top: 0
+  }
+};
+const HORIZONTAL_CORNERS = {
+  left: {
+    targetLeft: 0
+  },
+  right: {
+    targetLeft: "100%"
+  }
+};
+const HORIZONTAL_ALIGNMNENTS = {
+  left: {
+    tooltipLeft: 0,
+    arrowLeft: arrowSize => 0
+  },
+  right: {
+    tooltipLeft: "-100%",
+    arrowLeft: arrowSize => -arrowSize - 2
+  }
+};
+class Tooltip extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      height: null // used for offsetting "top" positioned tooltips
+    };
+  }
+
+  componentDidMount() {
+    this._updateHeight();
+  }
+  UNSAFE_componentWillReceiveProps() {
+    // If the contents have changed, reset our measure of the height
+    this.setState({
+      height: null
+    });
+  }
+  componentDidUpdate() {
+    this._updateHeight();
+  }
+  _renderToolTipDiv(isTooltipAbove) {
+    const settings = Object.assign({}, HORIZONTAL_CORNERS[this.props.horizontalPosition], HORIZONTAL_ALIGNMNENTS[this.props.horizontalAlign], VERTICAL_CORNERS[this.props.verticalPosition]);
+    let arrowAbove;
+    let arrowBelow;
+    if (isTooltipAbove) {
+      // We put an absolutely positioned arrow in the correct place
+      arrowAbove = /*#__PURE__*/React.createElement(TooltipArrow, {
+        verticalDirection: VerticalDirection.Top,
+        horizontalDirection: this.props.horizontalAlign,
+        position: "absolute",
+        color: "white",
+        border: this.props.borderColor,
+        left: settings.arrowLeft(this.props.arrowSize),
+        top: -this.props.arrowSize + 2,
+        width: this.props.arrowSize,
+        height: this.props.arrowSize,
+        zIndex: zIndex
+      });
+
+      // And we use a visibility: hidden arrow below to shift up the
+      // content by the correct amount
+      arrowBelow = /*#__PURE__*/React.createElement(TooltipArrow, {
+        verticalDirection: VerticalDirection.Top,
+        horizontalDirection: this.props.horizontalAlign,
+        visibility: "hidden",
+        color: "white",
+        border: this.props.borderColor,
+        left: settings.arrowLeft(this.props.arrowSize),
+        top: -1,
+        width: this.props.arrowSize,
+        height: this.props.arrowSize,
+        zIndex: zIndex
+      });
+    } else {
+      arrowAbove = /*#__PURE__*/React.createElement(TooltipArrow, {
+        verticalDirection: VerticalDirection.Bottom,
+        horizontalDirection: this.props.horizontalAlign,
+        color: "white",
+        border: this.props.borderColor,
+        left: settings.arrowLeft(this.props.arrowSize),
+        top: -1,
+        width: this.props.arrowSize,
+        height: this.props.arrowSize,
+        zIndex: zIndex
+      });
+      arrowBelow = null;
+    }
+
+    /* A positioned div below the input to be the parent for our
+        tooltip */
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "relative",
+        height: 0,
+        display: this.props.show ? "block" : "none"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line react/no-string-refs
+      ref: "tooltipContainer",
+      className: "tooltipContainer",
+      style: {
+        position: "absolute",
+        // height must start out undefined, not null, so that
+        // we can measure the actual height with jquery.
+        // This is used to position the tooltip with top: -100%
+        // when in verticalPosition: "top" mode
+        height: this.state.height || undefined,
+        left: settings.targetLeft
+      }
+    }, arrowAbove, /*#__PURE__*/React.createElement("div", {
+      className: this.props.className
+      // eslint-disable-next-line react/no-string-refs
+      ,
+      ref: "tooltipContent",
+      style: {
+        position: "relative",
+        top: settings["top"],
+        left: settings.tooltipLeft,
+        border: "1px solid " + this.props.borderColor,
+        boxShadow: "0 1px 3px " + this.props.borderColor,
+        zIndex: zIndex - 1
+      }
+    }, this.props.children.slice(1)), arrowBelow));
+  }
+  _updateHeight() {
+    const tooltipContainer = ReactDOM__default.findDOMNode(
+    // eslint-disable-next-line react/no-string-refs
+    this.refs.tooltipContainer);
+    const height = tooltipContainer.offsetHeight;
+    if (height !== this.state.height) {
+      this.setState({
+        height
+      });
+    }
+  }
+  render() {
+    const isTooltipAbove = this.props.verticalPosition === "top";
+
+    /* We wrap the entire output in a span so that it displays inline */
+    return /*#__PURE__*/React.createElement("span", null, isTooltipAbove && this._renderToolTipDiv(isTooltipAbove), /*#__PURE__*/React.createElement("div", {
+      style: this.props.targetContainerStyle
+    }, this.props.children[0]), !isTooltipAbove && this._renderToolTipDiv());
+  }
+}
+
+// Sorry.  // Apology-Oriented-Programming
+Tooltip.defaultProps = {
+  className: "",
+  arrowSize: 10,
+  borderColor: "#ccc",
+  verticalPosition: VerticalDirection.Bottom,
+  horizontalPosition: HorizontalDirection.Left,
+  horizontalAlign: HorizontalDirection.Left,
+  targetContainerStyle: {}
+};
+
 /* eslint-disable react/sort-comp */
 const {
   captureScratchpadTouchStart: captureScratchpadTouchStart$3
@@ -24608,26 +24475,6 @@ var Explanation$1 = {
   isLintable: true
 };
 
-/*
- * A11y (Accessibility) style rules
- * These are used to mark up areas on the site that should only be readable
- * when using a screen reader.
- */
-var a11y = StyleSheet.create({
-  // Make content only visible to screen readers.
-  // Both collegeboard.org and Bootstrap 3 use this exact implementation.
-  srOnly: {
-    border: 0,
-    clip: "rect(0,0,0,0)",
-    height: 1,
-    margin: -1,
-    overflow: "hidden",
-    padding: 0,
-    position: "absolute",
-    width: 1
-  }
-});
-
 class GradedGroupAnswerBar extends React.Component {
   render() {
     const {
@@ -43895,7 +43742,7 @@ const init = function init(options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "11.6.1";
+const libVersion = "12.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -45611,6 +45458,239 @@ RangeInput.defaultProps = {
   placeholder: [null, null]
 };
 
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
+const prettyBig = {
+  fontSize: "150%"
+};
+const slightlyBig = {
+  fontSize: "120%"
+};
+const symbStyle = {
+  fontSize: "130%"
+};
+// These are functions because we want to generate a new component for each use
+// on the page rather than reusing an instance (which will cause an error).
+// Also, it's useful for things which might look different depending on the
+// props.
+
+const basic = [() => [/*#__PURE__*/React.createElement("span", {
+  key: "plus",
+  style: slightlyBig
+}, "+"), "PLUS", i18n._("Plus")], () => [/*#__PURE__*/React.createElement("span", {
+  key: "minus",
+  style: prettyBig
+}, "-"), "MINUS", i18n._("Minus")],
+// TODO(joel) - display as \cdot when appropriate
+props => {
+  const {
+    TeX
+  } = getDependencies();
+  if (props.convertDotToTimes) {
+    return [/*#__PURE__*/React.createElement(TeX, {
+      key: "times",
+      style: prettyBig
+    }, i18n.doNotTranslate("\\times")), "TIMES", i18n._("Multiply")];
+  }
+  return [/*#__PURE__*/React.createElement(TeX, {
+    key: "times",
+    style: prettyBig
+  }, i18n.doNotTranslate("\\cdot")), "CDOT", i18n._("Multiply")];
+}, () => {
+  const {
+    TeX
+  } = getDependencies();
+  return [/*#__PURE__*/React.createElement(TeX, {
+    key: "frac",
+    style: prettyBig
+  }, i18n.doNotTranslate("\\frac{x}{y}")), "FRAC", i18n._("Fraction, excluding the current expression")];
+}];
+const buttonSets = {
+  basic,
+  "basic+div": basic.concat([() => {
+    const {
+      TeX
+    } = getDependencies();
+    return [/*#__PURE__*/React.createElement(TeX, {
+      key: "div"
+    }, i18n.doNotTranslate("\\div")), "DIVIDE", i18n._("Divide")];
+  }]),
+  trig: [() => {
+    const {
+      TeX
+    } = getDependencies();
+    return [/*#__PURE__*/React.createElement(TeX, {
+      key: "sin"
+    }, i18n.doNotTranslate("\\sin")), "SIN", i18n._("Sine")];
+  }, () => {
+    const {
+      TeX
+    } = getDependencies();
+    return [/*#__PURE__*/React.createElement(TeX, {
+      key: "cos"
+    }, i18n.doNotTranslate("\\cos")), "COS", i18n._("Cosine")];
+  }, () => {
+    const {
+      TeX
+    } = getDependencies();
+    return [/*#__PURE__*/React.createElement(TeX, {
+      key: "tan"
+    }, i18n.doNotTranslate("\\tan")), "TAN", i18n._("Tangent")];
+  }, () => {
+    const {
+      TeX
+    } = getDependencies();
+    return [/*#__PURE__*/React.createElement(TeX, {
+      key: "theta",
+      style: symbStyle
+    }, i18n.doNotTranslate("\\theta")), "THETA", i18n._("Theta")];
+  }, () => {
+    const {
+      TeX
+    } = getDependencies();
+    return [/*#__PURE__*/React.createElement("span", {
+      key: "phi"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "perseus-sr-only"
+    }, i18n.doNotTranslate("phi")), /*#__PURE__*/React.createElement(TeX, {
+      key: "pi",
+      style: symbStyle
+    }, i18n.doNotTranslate("\\phi"))), "PHI", i18n._("Phi")];
+  }],
+  prealgebra: [() => {
+    const {
+      TeX
+    } = getDependencies();
+    return [/*#__PURE__*/React.createElement(TeX, {
+      key: "sqrt"
+    }, i18n.doNotTranslate("\\sqrt{x}")), "SQRT", i18n._("Square root")];
+  },
+  // TODO(joel) - how does desmos do this?
+  () => {
+    const {
+      TeX
+    } = getDependencies();
+    return [/*#__PURE__*/React.createElement(TeX, {
+      key: "nthroot"
+    }, i18n.doNotTranslate("\\sqrt[3]{x}")), "NTHROOT3", i18n._("Cube root")];
+  }, () => {
+    const {
+      TeX
+    } = getDependencies();
+    return [/*#__PURE__*/React.createElement(TeX, {
+      key: "pow",
+      style: slightlyBig
+    }, i18n.doNotTranslate("a^b")), "POW", i18n._("Exponent")];
+  }, () => {
+    const {
+      TeX
+    } = getDependencies();
+    return [/*#__PURE__*/React.createElement(TeX, {
+      key: "pi",
+      style: slightlyBig
+    }, i18n.doNotTranslate("\\pi")), "PI", i18n._("Pi")];
+  }],
+  logarithms: [() => {
+    const {
+      TeX
+    } = getDependencies();
+    return [/*#__PURE__*/React.createElement(TeX, {
+      key: "log"
+    }, i18n.doNotTranslate("\\log")), "LOG", i18n._("Logarithm with base 10")];
+  }, () => {
+    const {
+      TeX
+    } = getDependencies();
+    return [/*#__PURE__*/React.createElement(TeX, {
+      key: "ln"
+    }, i18n.doNotTranslate("\\ln")), "LN", i18n._("Natural logarithm")];
+  }, () => {
+    const {
+      TeX
+    } = getDependencies();
+    return [/*#__PURE__*/React.createElement(TeX, {
+      key: "log_b"
+    }, i18n.doNotTranslate("\\log_b")), "LOG_B", i18n._("Logarithm with custom base")];
+  }],
+  "basic relations": [() => {
+    const {
+      TeX
+    } = getDependencies();
+    return [/*#__PURE__*/React.createElement(TeX, {
+      key: "eq"
+    }, "="), "EQUAL", i18n._("Equals sign")];
+  }, () => {
+    const {
+      TeX
+    } = getDependencies();
+    return [/*#__PURE__*/React.createElement(TeX, {
+      key: "lt"
+    }, i18n.doNotTranslate("\\lt")), "LT", i18n._("Less than sign")];
+  }, () => {
+    const {
+      TeX
+    } = getDependencies();
+    return [/*#__PURE__*/React.createElement(TeX, {
+      key: "gt"
+    }, i18n.doNotTranslate("\\gt")), "GT", i18n._("Greater than sign")];
+  }],
+  "advanced relations": [() => {
+    const {
+      TeX
+    } = getDependencies();
+    return [/*#__PURE__*/React.createElement(TeX, {
+      key: "neq"
+    }, i18n.doNotTranslate("\\neq")), "NEQ", i18n._("Not-equals sign")];
+  }, () => {
+    const {
+      TeX
+    } = getDependencies();
+    return [/*#__PURE__*/React.createElement(TeX, {
+      key: "leq"
+    }, i18n.doNotTranslate("\\leq")), "LEQ", i18n._("Less than or equal to sign")];
+  }, () => {
+    const {
+      TeX
+    } = getDependencies();
+    return [/*#__PURE__*/React.createElement(TeX, {
+      key: "geq"
+    }, i18n.doNotTranslate("\\geq")), "GEQ", i18n._("Greater than or equal to sign")];
+  }]
+};
+const buttonSetsPropType = PropTypes.arrayOf(PropTypes.oneOf(_(buttonSets).keys()));
+class TexButtons extends React.Component {
+  render() {
+    // Always show buttonSets in the same order. Note: Technically it's ok
+    // for _.keys() to return the keys in an arbitrary order, but in
+    // practice, they will be ordered as listed above.
+    const sortedButtonSets = _.sortBy(this.props.sets, setName => _.keys(buttonSets).indexOf(setName));
+    const buttons = _(sortedButtonSets).map(setName => buttonSets[setName]);
+    const buttonRows = _(buttons).map(row => row.map(symbGen => {
+      // create a (component, thing we should send to mathquill) pair
+      const symbol = symbGen(this.props);
+      return /*#__PURE__*/React.createElement("button", {
+        onClick: () => this.props.onInsert(symbol[1]),
+        className: "tex-button"
+        // @ts-expect-error - TS2533 - Object is possibly 'null' or 'undefined'. | TS2339 - Property 'key' does not exist on type 'boolean | ReactChild | ReactFragment | ReactPortal'.
+        ,
+        key: symbol[0].key,
+        type: "button",
+        "aria-label": symbol[2]
+      }, symbol[0]);
+    }));
+    const buttonPopup = _(buttonRows).map((row, i) => {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "clearfix tex-button-row",
+        key: this.props.sets[i]
+      }, row);
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${this.props.className || ""} preview-measure`
+    }, buttonPopup);
+  }
+}
+TexButtons.buttonSets = buttonSets;
+TexButtons.buttonSetsType = buttonSetsPropType;
+
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
   ButtonGroup: ButtonGroup,