@khanacademy/perseus 39.0.1 → 41.0.0

package/dist/es/index.js

@@ -6,9 +6,9 @@ import { View, RenderStateRoot, UniqueIDProvider, useOnMountEffect, useLatestRef
 import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
 import { HeadingMedium, LabelSmall, Body, LabelMedium } from '@khanacademy/wonder-blocks-typography';
 import { StyleSheet, css } from 'aphrodite';
-import classNames from 'classnames';
+import classNames$1 from 'classnames';
 import * as React from 'react';
-import React__default, { useContext, useState, useEffect, useRef, createContext, forwardRef, useImperativeHandle } from 'react';
+import React__default, { useContext, useState, useEffect, useRef, createContext, forwardRef, useLayoutEffect, useImperativeHandle } from 'react';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 import _, { debounce as debounce$1 } from 'underscore';
@@ -32,7 +32,7 @@ import { OptionItem, SingleSelect, MultiSelect } from '@khanacademy/wonder-block
 import caretDown from '@phosphor-icons/core/regular/caret-down.svg';
 import caretUp from '@phosphor-icons/core/regular/caret-up.svg';
 import debounce$2 from 'lodash.debounce';
-import { vec, Coordinates, Ellipse, Plot as Plot$3, Line as Line$4, Point as Point$2, Polygon, useTransformContext, Text as Text$1, Mafs } from 'mafs';
+import { vec, Coordinates, Ellipse, Plot as Plot$3, Line as Line$4, Point as Point$2, Polygon, Text as Text$1, useTransformContext, Mafs } from 'mafs';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import questionIcon from '@phosphor-icons/core/regular/question.svg';
 import { useDrag } from '@use-gesture/react';
@@ -238,7 +238,15 @@ const mockStrings = {
   simulationLocaleWarning: "Sorry, this simulation isn't available in your language.",
   addPoint: "Add Point",
   removePoint: "Remove Point",
-  graphKeyboardPrompt: "Press Shift + Enter to interact with the graph"
+  graphKeyboardPrompt: "Press Shift + Enter to interact with the graph",
+  srPointAtCoordinates: ({
+    x,
+    y
+  }) => `Point at ${x} comma ${y}`,
+  srInteractiveElements: ({
+    elements
+  }) => `Interactive elements: ${elements}`,
+  srNoInteractiveElements: "No interactive elements"
 };
 
 /**
@@ -246,11 +254,13 @@ const mockStrings = {
  * used inside the Perseus package.
  *
  */
-// @ts-expect-error - TS2322 - Type 'Context<{ strings: {}; locale: string; }>' is not assignable to type 'Context<I18nContextType>'.
-const PerseusI18nContext = /*#__PURE__*/React.createContext(process.env.NODE_ENV === "test" || process.env.STORYBOOK ? {
+const mockPerseusI18nContext = {
   strings: mockStrings,
   locale: "en"
-} :
+};
+
+// @ts-expect-error - TS2322 - Type 'Context<{ strings: {}; locale: string; }>' is not assignable to type 'Context<I18nContextType>'.
+const PerseusI18nContext = /*#__PURE__*/React.createContext(process.env.NODE_ENV === "test" || process.env.STORYBOOK ? mockPerseusI18nContext :
 // 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.
@@ -479,7 +489,7 @@ class InnerMathInput extends React.Component {
     });
   }
   render() {
-    let className = classNames({
+    let className = classNames$1({
       "perseus-math-input": true,
       // mathquill usually adds these itself but react removes them when
       // updating the component.
@@ -531,7 +541,7 @@ class InnerMathInput extends React.Component {
           closeButtonVisible: true,
           style: styles$E.popoverContent
         }, /*#__PURE__*/React.createElement(DesktopKeypad, _extends({
-          onAnalyticsEvent: this.props.analytics.onAnalyticsEvent,
+          onAnalyticsEvent: this.props.onAnalyticsEvent,
           extraKeys: this.props.extraKeys,
           onClickKey: this.handleKeypadPress,
           cursorContext: this.state.cursorContext,
@@ -705,6 +715,9 @@ const getDependencies = () => {
 const DependenciesContext = /*#__PURE__*/React.createContext({
   analytics: {
     onAnalyticsEvent: async () => {}
+  },
+  useVideo: () => {
+    throw new Error("useVideo dependency not provided in Perseus dependencies");
   }
 });
 
@@ -958,7 +971,7 @@ class TextListEditor extends React.Component {
 }
 TextListEditor.propTypes = {
   options: PropTypes.array,
-  layout: PropTypes.string,
+  layout: PropTypes.oneOf(["horizontal", "vertical"]),
   onChange: PropTypes.func.isRequired
 };
 TextListEditor.defaultProps = {
@@ -966,6 +979,8 @@ TextListEditor.defaultProps = {
   layout: "horizontal"
 };
 
+const EMPTY_ARRAY = [];
+
 /**
  * Stub Tag Editor.
  *
@@ -979,7 +994,6 @@ TextListEditor.defaultProps = {
  * It also gives a nicer interface for the group metadata editor
  * in local demo mode.
  */
-const EMPTY_ARRAY = [];
 class StubTagEditor extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("div", null, this.props.showTitle && /*#__PURE__*/React.createElement("div", {
@@ -2408,7 +2422,7 @@ class Expression extends React.Component {
     }, cb);
   }
   render() {
-    var _this$props$keypadCon, _this$props$analytics2;
+    var _this$props$keypadCon, _this$props$analytics2, _this$props$analytics3;
     if (this.props.apiOptions.customKeypad) {
       return /*#__PURE__*/React.createElement(View, {
         className: css(styles$D.mobileLabelInputWrapper)
@@ -2437,7 +2451,7 @@ class Expression extends React.Component {
         onBlur: this._handleBlur
       }));
     }
-    const className = classNames({
+    const className = classNames$1({
       "perseus-widget-expression": true,
       "show-error-tooltip": this.state.showErrorTooltip
     });
@@ -2481,9 +2495,7 @@ class Expression extends React.Component {
       hasError: this.state.showErrorStyle,
       ariaLabel: this.props.ariaLabel || this.context.strings.mathInputBox,
       extraKeys: (_this$props$keypadCon = this.props.keypadConfiguration) == null ? void 0 : _this$props$keypadCon.extraKeys,
-      analytics: (_this$props$analytics2 = this.props.analytics) != null ? _this$props$analytics2 : {
-        onAnalyticsEvent: async function () {}
-      }
+      onAnalyticsEvent: (_this$props$analytics2 = (_this$props$analytics3 = this.props.analytics) == null ? void 0 : _this$props$analytics3.onAnalyticsEvent) != null ? _this$props$analytics2 : async function () {}
     }))));
   }
 }
@@ -3886,12 +3898,12 @@ Zoom.prototype.dispose = function () {
 const ZoomService = new ZoomServiceClass();
 
 // @baseFontFamily:        "Lato", sans-serif;
-const baseFontFamily$1 = "'Lato', sans-serif";
+const baseFontFamily = "'Lato', sans-serif";
 // @boldFontFamily:        "Lato-Bold", "Lato", sans-serif;
 const boldFontFamily = "'Lato-Bold', 'Lato', sans-serif";
 // @kaGreen:               #71b307;
-const kaGreen$1 = "#71B307";
-const white$1 = "#FFFFFF";
+const kaGreen = "#71B307";
+const white = "#FFFFFF";
 const gray97 = "#F6F7F7";
 const gray85 = "#D6D8DA";
 const gray76 = "#BABEC2";
@@ -3899,23 +3911,23 @@ const gray68 = "#888D93";
 const gray17 = "#21242c";
 
 // @pure-sm-min: 568px;
-const pureSmMin$2 = "568px";
+const pureSmMin$1 = "568px";
 // @pure-md-min: 768px;
-const pureMdMin$2 = "768px";
+const pureMdMin$1 = "768px";
 // @pure-lg-min: 1024px;
-const pureLgMin$2 = "1024px";
+const pureLgMin$1 = "1024px";
 // @pure-xl-min: 1280px;
-const pureXlMin$2 = "1280px";
+const pureXlMin$1 = "1280px";
 // @pure-xs-max: (@pure-sm-min - 1);
-const pureXsMax$2 = "567px";
+const pureXsMax$1 = "567px";
 // @pure-sm-max: (@pure-md-min - 1);
-const pureSmMax$2 = "767px";
+const pureSmMax$1 = "767px";
 // @pure-md-max: (@pure-lg-min - 1);
-const pureMdMax$2 = "1023px";
+const pureMdMax$1 = "1023px";
 // @pure-lg-max: (@pure-xl-min - 1);
-const pureLgMax$2 = "1279px";
+const pureLgMax$1 = "1279px";
 // @tableBackgroundAccent: #f9f9f9; // for striping
-const tableBackgroundAccent$1 = "#F9F9F9";
+const tableBackgroundAccent = "#F9F9F9";
 // @zIndexAboveScratchpad: @zIndexScratchPad + 1;
 const zIndexAboveScratchpad$1 = 2;
 // @zIndexInteractiveComponent: @zIndexAboveScratchpad + 1;
@@ -3943,26 +3955,26 @@ const checkedColor$1 = "#71B307";
 const articleMaxWidthInPx = 688;
 const articleMaxWidthTableInPx = 512;
 
-var constants$1 = /*#__PURE__*/Object.freeze({
+var constants = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  baseFontFamily: baseFontFamily$1,
+  baseFontFamily: baseFontFamily,
   boldFontFamily: boldFontFamily,
-  kaGreen: kaGreen$1,
-  white: white$1,
+  kaGreen: kaGreen,
+  white: white,
   gray97: gray97,
   gray85: gray85,
   gray76: gray76,
   gray68: gray68,
   gray17: gray17,
-  pureSmMin: pureSmMin$2,
-  pureMdMin: pureMdMin$2,
-  pureLgMin: pureLgMin$2,
-  pureXlMin: pureXlMin$2,
-  pureXsMax: pureXsMax$2,
-  pureSmMax: pureSmMax$2,
-  pureMdMax: pureMdMax$2,
-  pureLgMax: pureLgMax$2,
-  tableBackgroundAccent: tableBackgroundAccent$1,
+  pureSmMin: pureSmMin$1,
+  pureMdMin: pureMdMin$1,
+  pureLgMin: pureLgMin$1,
+  pureXlMin: pureXlMin$1,
+  pureXsMax: pureXsMax$1,
+  pureSmMax: pureSmMax$1,
+  pureMdMax: pureMdMax$1,
+  pureLgMax: pureLgMax$1,
+  tableBackgroundAccent: tableBackgroundAccent,
   zIndexAboveScratchpad: zIndexAboveScratchpad$1,
   zIndexInteractiveComponent: zIndexInteractiveComponent$1,
   phoneMargin: phoneMargin,
@@ -4080,7 +4092,7 @@ class FixedToResponsive extends React.Component {
     };
 
     // NOTE(jeremy): This depends on styles defined in perseus-renderer.less
-    const className = classNames("fixed-to-responsive", this.props.className);
+    const className = classNames$1("fixed-to-responsive", this.props.className);
     const container = /*#__PURE__*/React.createElement("div", {
       className: className,
       style: style
@@ -14800,11 +14812,7 @@ _.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.
+ * You can refer to `icon-paths.ts` for all available SVG icons.
  *
  * 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
@@ -14812,13 +14820,14 @@ _.extend(MovableLine$4.prototype, {
  *
  * Sample usage:
  *
- *   const editIcon = {
+ * ```
+ * 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} />
- *
+ * };
+ * <InlineIcon {...editIcon} />
+ * ```
  */
 const InlineIcon = ({
   path,
@@ -14841,11 +14850,7 @@ const InlineIcon = ({
 }));
 
 /**
- * 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.
+ * Icon paths to be used with `inline-icon.tsx` and `icon.tsx`.
  */
 
 const iconCheck = {
@@ -14853,77 +14858,26 @@ const iconCheck = {
   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,
@@ -14939,53 +14893,17 @@ const iconTryAgain = {
   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 () {
@@ -16878,6 +16796,15 @@ const Status = {
   LOADED: "loaded",
   FAILED: "failed"
 };
+/**
+ * Component to display an image (or other React components) while the desired
+ * image is loading.
+ *
+ * Derived from
+ * https://github.com/hzdg/react-imageloader/blob/master/src/index.js
+ * to better suit our environment/build tools. Additionally, this one does
+ * not introduce a wrapper element, which makes styling easier.
+ */
 class ImageLoader extends React.Component {
   constructor(props) {
     super(props);
@@ -17432,7 +17359,7 @@ class SvgImage extends React.Component {
     // Just use a normal image if a normal image is provided
     if (!Util.isLabeledSVG(imageSrc)) {
       if (responsive) {
-        const wrapperClasses = classNames({
+        const wrapperClasses = classNames$1({
           zoomable: (width || 0) > ZOOMABLE_THRESHOLD,
           "svg-image": true
         });
@@ -18222,7 +18149,7 @@ const styles$C = StyleSheet.create({
     },
     ":hover ~ div span[data-lint-inside-table]": {
       backgroundColor: warningColor,
-      color: white$1
+      color: white
     }
   },
   // This is how we position the hover target for inline lint.
@@ -18258,7 +18185,7 @@ const styles$C = StyleSheet.create({
     // draw attention to the linty content.
     ":hover ~ span": {
       backgroundColor: warningColor,
-      color: white$1
+      color: white
     }
   },
   radioWidgetHoverTarget: {
@@ -18300,7 +18227,7 @@ const styles$C = StyleSheet.create({
     // draw attention to the linty content.
     ":hover ~ span": {
       backgroundColor: warningColor,
-      color: white$1
+      color: white
     }
   },
   // This is the class for the lint indicator in the margin.
@@ -18337,10 +18264,10 @@ const styles$C = StyleSheet.create({
     // When it is displayed, it goes on top!
     zIndex: 1000,
     // These styles control what the tooltip looks like
-    color: white$1,
+    color: white,
     backgroundColor: gray17,
     opacity: 0.9,
-    fontFamily: baseFontFamily$1,
+    fontFamily: baseFontFamily,
     fontSize: "12px",
     lineHeight: "15px",
     width: "320px",
@@ -19342,7 +19269,7 @@ var preprocessTex = (texCode => texCode
 
 const {
   interactiveSizes
-} = constants$1;
+} = constants;
 
 // Note: these size cutoffs represent content-width cutoffs as specified in
 // http://zpl.io/1mVmvU (broken link - we no longer use Zeplin)
@@ -19375,13 +19302,6 @@ const getInteractiveBoxFromSizeClass = sizeClass => {
   return [interactiveSizes.defaultBoxSize, interactiveSizes.defaultBoxSize];
 };
 
-var sizingUtils = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  containerSizeClass: containerSizeClass,
-  getClassFromWidth: getClassFromWidth,
-  getInteractiveBoxFromSizeClass: getInteractiveBoxFromSizeClass
-});
-
 class WidgetContainer extends React.Component {
   constructor(...args) {
     super(...args);
@@ -19432,7 +19352,7 @@ class WidgetContainer extends React.Component {
     return this.props.shouldHighlight !== nextProps.shouldHighlight || this.props.type !== nextProps.type || this.state.widgetProps !== nextState.widgetProps || this.state.sizeClass !== nextState.sizeClass;
   }
   render() {
-    let className = classNames({
+    let className = classNames$1({
       "perseus-widget-container": true,
       "widget-highlight": this.props.shouldHighlight,
       "widget-nohighlight": !this.props.shouldHighlight,
@@ -20025,7 +19945,7 @@ class Renderer extends React.Component {
       if (this.translationIndex != null) {
         className = null;
       } else {
-        className = classNames({
+        className = classNames$1({
           "perseus-paragraph-centered": !this._foundTextNodes,
           // There is only one node being rendered,
           // and it's a full-width widget.
@@ -20841,7 +20761,7 @@ class Renderer extends React.Component {
     const markdownContents = this.outputMarkdown(parsedMarkdown, {
       baseElements: apiOptions.baseElements
     });
-    const className = classNames({
+    const className = classNames$1({
       [ClassNames.RENDERER]: true,
       [ClassNames.RESPONSIVE_RENDERER]: true,
       [ClassNames.TWO_COLUMN_RENDERER]: this._isTwoColumn
@@ -21014,7 +20934,7 @@ const Triangle = props => {
       width: 0,
       position: "absolute",
       left: props.left,
-      top: props["top"],
+      top: props.top,
       borderLeft: borderLeft,
       borderRight: borderRight,
       borderTop: borderTop,
@@ -21095,6 +21015,47 @@ const HORIZONTAL_ALIGNMNENTS = {
     arrowLeft: arrowSize => -arrowSize - 2
   }
 };
+/**
+ * DEPRECATED! Use Wonder Blocks tooltip instead.
+ *
+ * A generic tooltip library for React.js
+ *
+ * ```
+ * import Tooltip from "./tooltip";
+ * <Tooltip
+ *     className="class-for-tooltip-contents"
+ *     horizontalPosition={HoriziontalDirection.Left}
+ *     horizontalAlign={HoriziontalDirection.Left}
+ *     verticalPosition={VerticalDirection.Top}
+ *     arrowSize={10} // arrow size in pixels
+ *     borderColor="#ccc" // color of the border for the tooltip
+ *     show={true} // whether the tooltip should currently be visible
+ *     targetContainerStyle={targetContainerStyle}
+ * >
+ *     <TargetElementOfTheTooltip />
+ *     <TooltipContents1 />
+ *     <TooltipContents2 />
+ * </Tooltip>
+ * ```
+ *
+ * To show/hide the tooltip, the parent component should call the
+ * `.show()` and `.hide()` methods of the tooltip when appropriate.
+ * (These are usually set up as handlers of events on the target element.)
+ *
+ * Notes:
+ *     `className` should not specify a border; that is handled by `borderColor`
+ *     so that the arrow and tooltip match
+ *
+ * ```
+ *          __,,--``\\
+ *  _,,-''``         \\     ,
+ * '----------_.------'-.___|\__
+ *    _.--''``    `)__   )__   @\__
+ *   (  .. ''---/___,,E/__,E'------`
+ *    `-''`''
+ * Here be dragons.
+ * ```
+ */
 class Tooltip extends React.Component {
   constructor(...args) {
     super(...args);
@@ -21321,10 +21282,7 @@ class InputWithExamples extends React.Component {
       return "- " + example;
     }).join("\n");
     const showExamples = this.props.shouldShowExamples && this.state.showExamples;
-    return /*#__PURE__*/React.createElement(Tooltip
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "tooltip",
+    return /*#__PURE__*/React.createElement(Tooltip, {
       className: "perseus-formats-tooltip preview-measure",
       horizontalPosition: HorizontalDirection.Left,
       horizontalAlign: HorizontalDirection.Left,
@@ -24577,29 +24535,29 @@ var PassageRef$1 = {
  *   });
  */
 const {
-  pureXsMax: pureXsMax$1,
-  pureSmMin: pureSmMin$1,
-  pureSmMax: pureSmMax$1,
-  pureMdMin: pureMdMin$1,
-  pureMdMax: pureMdMax$1,
-  pureLgMin: pureLgMin$1,
-  pureLgMax: pureLgMax$1,
-  pureXlMin: pureXlMin$1
-} = constants$1;
+  pureXsMax,
+  pureSmMin,
+  pureSmMax,
+  pureMdMin,
+  pureMdMax,
+  pureLgMin,
+  pureLgMax,
+  pureXlMin
+} = constants;
 var mediaQueries = {
-  xs: `@media screen and (max-width: ${pureXsMax$1})`,
-  sm: `@media screen and (min-width: ${pureSmMin$1}) and ` + `(max-width: ${pureSmMax$1})`,
-  md: `@media screen and (min-width: ${pureMdMin$1}) and ` + `(max-width: ${pureMdMax$1})`,
-  lg: `@media screen and (min-width: ${pureLgMin$1}) and ` + `(max-width: ${pureLgMax$1})`,
-  xl: `@media screen and (min-width: ${pureXlMin$1})`,
-  xsOrSmaller: `@media screen and (max-width: ${pureXsMax$1})`,
-  smOrSmaller: `@media screen and (max-width: ${pureSmMax$1})`,
-  mdOrSmaller: `@media screen and (max-width: ${pureMdMax$1})`,
-  lgOrSmaller: `@media screen and (max-width: ${pureLgMax$1})`,
-  smOrLarger: `@media screen and (min-width: ${pureSmMin$1})`,
-  mdOrLarger: `@media screen and (min-width: ${pureMdMin$1})`,
-  lgOrLarger: `@media screen and (min-width: ${pureLgMin$1})`,
-  xlOrLarger: `@media screen and (min-width: ${pureXlMin$1})`
+  xs: `@media screen and (max-width: ${pureXsMax})`,
+  sm: `@media screen and (min-width: ${pureSmMin}) and ` + `(max-width: ${pureSmMax})`,
+  md: `@media screen and (min-width: ${pureMdMin}) and ` + `(max-width: ${pureMdMax})`,
+  lg: `@media screen and (min-width: ${pureLgMin}) and ` + `(max-width: ${pureLgMax})`,
+  xl: `@media screen and (min-width: ${pureXlMin})`,
+  xsOrSmaller: `@media screen and (max-width: ${pureXsMax})`,
+  smOrSmaller: `@media screen and (max-width: ${pureSmMax})`,
+  mdOrSmaller: `@media screen and (max-width: ${pureMdMax})`,
+  lgOrSmaller: `@media screen and (max-width: ${pureLgMax})`,
+  smOrLarger: `@media screen and (min-width: ${pureSmMin})`,
+  mdOrLarger: `@media screen and (min-width: ${pureMdMin})`,
+  lgOrLarger: `@media screen and (min-width: ${pureLgMin})`,
+  xlOrLarger: `@media screen and (min-width: ${pureXlMin})`
 };
 
 const {
@@ -24609,7 +24567,7 @@ const {
   checkedColor,
   circleSize,
   radioMarginWidth
-} = constants$1;
+} = constants;
 var sharedStyles = StyleSheet.create({
   perseusInteractive: {
     zIndex: zIndexInteractiveComponent,
@@ -24841,6 +24799,37 @@ const BASE_ICON_SIZE = 10;
 // If you pass in an object you need to specify an SVG path to
 // render along with the width and height of the path (to ensure
 // that it gets scaled correctly).
+/**
+ * An SVG Icon
+ *
+ * This component is designed to take in SVG paths and render icons based upon
+ * them. If you are looking for an icon that we've used before you should look
+ * in `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 <Icon/> React
+ * component.
+ *
+ * Sample usage:
+ *
+ * ```
+ * const dropdownIcon = `M5,6L0,0L10,0`;
+ * <Icon icon={dropdownIcon} />
+ * ```
+ *
+ * Or:
+ *
+ * ```
+ *   const dropdownIcon = {
+ *       path: `M5,6L0,0L10,0`,
+ *       height: 10,
+ *       width: 10,
+ *   };
+ *   <Icon icon={dropdownIcon} size={20} />
+ * ```
+ *
+ * If you want to add an entirely new icon please read the note inside
+ * the `icon-paths.ts` file.
+ */
 class Icon extends React.Component {
   render() {
     const {
@@ -24962,7 +24951,7 @@ function getA11yText(letter, checked, correct, crossedOut, showCorrectness, stri
  */
 const FocusRing = function FocusRing({
   visible = true,
-  color = kaGreen$1,
+  color = kaGreen,
   multipleSelect = false,
   children
 }) {
@@ -25063,7 +25052,7 @@ function ChoiceInner(props) {
   } = usePerseusI18n();
   const letter = getChoiceLetter(pos, strings);
   if (!showCorrectness) {
-    return letter;
+    return /*#__PURE__*/React.createElement("span", null, letter);
   }
   if (correct) {
     return /*#__PURE__*/React.createElement(InlineIcon, _extends({}, iconCheck, {
@@ -25090,7 +25079,7 @@ function getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, cor
     backgroundColor = "transparent";
   } else if (checked) {
     const bg = showCorrectness && correct ? color.green : color.blue;
-    color$1 = white$1;
+    color$1 = white;
     backgroundColor = bg;
     borderColor = bg;
   } else {
@@ -25133,7 +25122,6 @@ const ChoiceIcon = function ChoiceIcon(props) {
     visible: focused || hovered,
     multipleSelect: multipleSelect
   }, /*#__PURE__*/React.createElement("div", {
-    // @ts-expect-error - TS2322 - Type '{ backgroundColor: string | null | undefined; borderColor: string; color: string; borderRadius: number; }' is not assignable to type 'Properties<string | number, string & {}>'.
     style: dynamicStyles,
     "data-testid": "choice-icon__library-choice-icon",
     className: css(styles$s.circle, showCorrectness && correct && styles$s.circleCorrect, showCorrectness && !correct && styles$s.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$s.circleIncorrectAnswered)
@@ -25168,7 +25156,7 @@ const styles$s = StyleSheet.create({
     borderStyle: "solid",
     borderWidth: 2,
     // The default icons have letters in them. Style those letters.
-    fontFamily: baseFontFamily$1,
+    fontFamily: baseFontFamily,
     // NOTE(emily): We explicitly set the font weight instead of using the
     // "bold font family" so that characters which fall back to the default
     // font get bolded too.
@@ -25328,8 +25316,8 @@ const Choice = function Choice(props) {
       crossedOut: updatedCrossedOut
     });
   }
-  const descriptionClassName = classNames("description", css(styles$q.description));
-  const rationaleClassName = classNames("perseus-radio-rationale-content", css(styles$q.rationale));
+  const descriptionClassName = classNames$1("description", css(styles$q.description));
+  const rationaleClassName = classNames$1("perseus-radio-rationale-content", css(styles$q.rationale));
 
   // We want to show the choices as dimmed out when the choices are disabled.
   // However, we don't want to do this when we're in review mode in the
@@ -25679,8 +25667,8 @@ const BaseRadio = function BaseRadio({
   const isMobile = apiOptions.isMobile;
   const firstChoiceHighlighted = choices[0].highlighted;
   const lastChoiceHighlighted = choices[choices.length - 1].highlighted;
-  const className = classNames("perseus-widget-radio", !editMode && "perseus-rendered-radio", css(styles$p.radio, styles$p.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$p.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$p.radioContainerLastHighlighted));
-  const instructionsClassName = classNames("instructions", css(styles$p.instructions, isMobile && styles$p.instructionsMobile));
+  const className = classNames$1("perseus-widget-radio", !editMode && "perseus-rendered-radio", css(styles$p.radio, styles$p.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$p.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$p.radioContainerLastHighlighted));
+  const instructionsClassName = classNames$1("instructions", css(styles$p.instructions, isMobile && styles$p.instructionsMobile));
   const instructions = getInstructionsText(multipleSelect, countChoices, numCorrect, strings);
   const responsiveClassName = css(styles$p.responsiveFieldset);
   const fieldset = /*#__PURE__*/React.createElement("fieldset", {
@@ -25746,7 +25734,7 @@ const BaseRadio = function BaseRadio({
     if (reviewMode && reviewModeRubric) {
       correctnessClass = reviewModeRubric.choices[i].correct ? ClassNames.CORRECT : ClassNames.INCORRECT;
     }
-    const className = classNames(aphroditeClassName(choice.checked),
+    const className = classNames$1(aphroditeClassName(choice.checked),
     // TODO(aria): Make test case for these API
     // classNames
     ClassNames.RADIO.OPTION, choice.checked && ClassNames.RADIO.SELECTED, correctnessClass);
@@ -26539,7 +26527,7 @@ class Categorizer extends React.Component {
 
     // TODO(benkomalo): kill CSS-based styling and move everything to
     // aphrodite.
-    const extraClassNames = classNames({
+    const extraClassNames = classNames$1({
       "categorizer-container": true,
       "static-mode": this.props.static
     });
@@ -27433,7 +27421,7 @@ class GradedGroup extends React.Component {
       gradeStatus = this.context.strings.incorrect;
     }
     const mobileClass = this.props.inGradedGroupSet ? css(styles$j.gradedGroupInSet) : css(styles$j.gradedGroup);
-    const classes = classNames({
+    const classes = classNames$1({
       [mobileClass]: apiOptions.isMobile,
       "perseus-graded-group": true,
       "answer-correct": apiOptions.isMobile ? false : this.state.status === GRADING_STATUSES.correct,
@@ -27548,7 +27536,7 @@ const styles$j = StyleSheet.create({
   gradedGroup: {
     borderTop: `1px solid ${gray76}`,
     borderBottom: `1px solid ${gray76}`,
-    backgroundColor: tableBackgroundAccent$1,
+    backgroundColor: tableBackgroundAccent,
     marginLeft: negativePhoneMargin,
     marginRight: negativePhoneMargin,
     paddingBottom: phoneMargin,
@@ -27612,7 +27600,7 @@ class Indicators extends React.Component {
     return /*#__PURE__*/React.createElement("ul", {
       // reduntantly add class name for use in .less files--
       //   the styles object key gets hashed
-      className: classNames(css(styles$i.indicatorContainer), "indicatorContainer")
+      className: classNames$1(css(styles$i.indicatorContainer), "indicatorContainer")
     }, this.props.gradedGroups.map(({
       title
     }, i) => /*#__PURE__*/React.createElement("li", {
@@ -27827,7 +27815,7 @@ const styles$i = StyleSheet.create({
   container: {
     borderTop: `1px solid ${gray76}`,
     borderBottom: `1px solid ${gray76}`,
-    backgroundColor: tableBackgroundAccent$1,
+    backgroundColor: tableBackgroundAccent,
     marginLeft: negativePhoneMargin,
     marginRight: negativePhoneMargin,
     paddingBottom: phoneMargin,
@@ -28435,21 +28423,6 @@ const typeToButton = type => {
   };
 };
 
-var util = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  DEFAULT_BACKGROUND_IMAGE: DEFAULT_BACKGROUND_IMAGE,
-  allTypes: allTypes,
-  functionForType: functionForType,
-  getEquationString: getEquationString,
-  pointsFromNormalized: pointsFromNormalized,
-  maybePointsFromNormalized: maybePointsFromNormalized,
-  defaultPlotProps: defaultPlotProps,
-  chooseType: chooseType,
-  getGridAndSnapSteps: getGridAndSnapSteps,
-  DEFAULT_GRAPHER_PROPS: DEFAULT_GRAPHER_PROPS,
-  typeToButton: typeToButton
-});
-
 function getCoefficientsByType(data) {
   if (data.type === "exponential" || data.type === "logarithm") {
     const grader = functionForType(data.type);
@@ -29006,7 +28979,7 @@ class Group extends React.Component {
     // TODO(mdr): Widgets inside this Renderer are not discoverable through
     //     the parent Renderer's `findWidgets` function.
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames({
+      className: classNames$1({
         "perseus-group": true,
         "perseus-group-valid-answer": isValid,
         "perseus-group-invalid-answer": isInvalid
@@ -29274,7 +29247,7 @@ class ImageWidget extends React.Component {
           }
           _title = `**${_title}** `;
         }
-        const className = classNames({
+        const className = classNames$1({
           "perseus-image-caption": true,
           "has-title": !!_title
         });
@@ -30982,6 +30955,10 @@ const HiddenIcon = () => /*#__PURE__*/React.createElement("svg", {
 }, /*#__PURE__*/React.createElement("path", {
   d: "M0 0h24v24H0z"
 }))));
+/**
+ * A "heads-up display" (HUD) indicator that includes a short message (usually
+ * used for linting errors). The indicator can be disabled.
+ */
 const HUD = ({
   message,
   enabled,
@@ -31013,7 +30990,7 @@ const styles$g = StyleSheet.create({
     fontFamily: boldFontFamily,
     fontSize: "15px",
     lineHeight: "18px",
-    color: white$1,
+    color: white,
     userSelect: "none",
     borderWidth: 0 // <button> gives us a border by default
   },
@@ -31202,18 +31179,24 @@ const {
 const toNumericString = KhanMath.toNumericString;
 const getNumericFormat = KhanMath.getNumericFormat;
 
-/* An input box that accepts only numeric strings
+/**
+ * An input box that accepts only numeric strings
  *
- * Calls onChange(value, format) for valid numbers.
- * Reverts to the current value onBlur or on [ENTER],
+ * Calls `onChange(value, format)` for valid numbers.
+ *
+ * Reverts to the current value `onBlur` or on [ENTER],
  *   but maintains the format (i.e. 3/2, 1 1/2, 150%)
- * Accepts empty input and sends it to onChange as null
- *   if no numeric placeholder is set.
- * If given a checkValidity function, will turn
- *   the background/outline red when invalid
- * If useArrowKeys is set to true, up/down arrows will
- *   increment/decrement integers
- * Optionally takes a size ("mini", "small", "normal")
+ *
+ * Accepts empty input and sends it to `onChange` as `null` if no numeric
+ * placeholder is set.
+ *
+ * If given a `checkValidity` function, will turn the background/outline red
+ * when invalid.
+ *
+ * If `useArrowKeys` is set to `true`, up/down arrows will increment/decrement
+ * integers.
+ *
+ * Optionally takes a `size` (`"mini"`, `"small"`,` `"normal"`)
  */
 class NumberInput extends React.Component {
   constructor(...args) {
@@ -31335,7 +31318,7 @@ class NumberInput extends React.Component {
     }
   }
   render() {
-    let classes = classNames({
+    let classes = classNames$1({
       "number-input": true,
       "invalid-input": !this._checkValidity(this.props.value),
       mini: this.props.size === "mini",
@@ -31372,7 +31355,7 @@ NumberInput.propTypes = {
   onChange: PropTypes.func.isRequired,
   onFormatChange: PropTypes.func,
   checkValidity: PropTypes.func,
-  size: PropTypes.string,
+  size: PropTypes.oneOf(["mini", "small", "normal"]),
   label: PropTypes.oneOf(["put your labels outside your inputs!"])
 };
 NumberInput.defaultProps = {
@@ -31386,8 +31369,8 @@ NumberInput.defaultProps = {
 
 const truth = () => true;
 
-/* A minor abstraction on top of NumberInput for ranges
- *
+/**
+ * A minor abstraction on top of `NumberInput` for ranges
  */
 class RangeInput extends React.Component {
   constructor(...args) {
@@ -32094,7 +32077,12 @@ const actions = {
   },
   polygon: {
     movePoint,
-    moveAll
+    moveAll,
+    addPoint,
+    removePoint,
+    focusPoint,
+    blurPoint,
+    clickPoint
   },
   quadratic: {
     movePoint
@@ -32233,11 +32221,333 @@ function reinitialize(params) {
   };
 }
 
+/**
+ * Wrapper with Mafs transform styles for SVG elements.
+ * Scales and translates the SVG element to match the Mafs view.
+ * Use if you do not need/want to use the hook in `use-transform.ts`.
+ */
+const MafsCssTransformWrapper = ({
+  children
+}) => /*#__PURE__*/React.createElement("g", {
+  style: {
+    transform: `var(--mafs-view-transform) var(--mafs-user-transform)`
+  }
+}, children);
+
+const _excluded$1 = ["children"];
+const TextLabel = _ref => {
+  let {
+      children
+    } = _ref,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  return /*#__PURE__*/React__default.createElement(Text$1, _extends({
+    size: 16,
+    svgTextProps: {
+      filter: "url(#background)",
+      fontWeight: "bold"
+    }
+  }, rest), children);
+};
+const SvgDefs = () => /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("filter", {
+  id: "background",
+  x: "-5%",
+  width: "110%",
+  y: "0%",
+  height: "100%"
+}, /*#__PURE__*/React__default.createElement("feFlood", {
+  floodColor: "#FFF",
+  floodOpacity: "0.64"
+}), /*#__PURE__*/React__default.createElement("feComposite", {
+  operator: "over",
+  in: "SourceGraphic"
+})));
+
+const PolygonAngle = ({
+  centerPoint,
+  endPoints,
+  range,
+  polygonLines,
+  showAngles,
+  snapTo
+}) => {
+  const [centerX, centerY] = centerPoint;
+  const areClockwise = clockwise$1([centerPoint, ...endPoints]);
+  const [[startX, startY], [endX, endY]] = areClockwise ? endPoints : endPoints.reverse();
+  const radius = 0.3;
+  const a = vec.dist(centerPoint, endPoints[0]);
+  const b = vec.dist(centerPoint, endPoints[1]);
+  const c = vec.dist(endPoints[0], endPoints[1]);
+
+  // Law of cosines
+  const angle = Math.acos((a ** 2 + b ** 2 - c ** 2) / (2 * a * b));
+  const y1 = centerY + (startY - centerY) / a * radius;
+  const x2 = centerX + (endX - centerX) / b * radius;
+  const x1 = centerX + (startX - centerX) / a * radius;
+  const y2 = centerY + (endY - centerY) / b * radius;
+
+  // Fourth point that would create a rhomboid
+  // Used to calculate the inside of the angle and to create square
+  const [x3, y3] = vec.add(centerPoint, vec.add(vec.sub([x1, y1], centerPoint), vec.sub([x2, y2], centerPoint)));
+  if (!showAngles) {
+    return isRightPolygonAngle(angle) ? /*#__PURE__*/React.createElement(RightAngleSquare, {
+      start: [x1, y1],
+      vertex: [x2, y2],
+      end: [x3, y3]
+    }) : null;
+  }
+
+  // Midpoint betwen ends of arc
+  const isOutside = shouldDrawArcOutside([x3, y3], centerPoint, range, polygonLines);
+  const largeArcFlag = isOutside ? 1 : 0;
+  const sweepFlag = isOutside ? 1 : 0;
+  const arc = `M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${x2} ${y2}`;
+  let angleInDegrees = angle * (180 / Math.PI);
+  // If we have triggered "largArcFlag", the angle should be greater than 180
+  if (isOutside) {
+    angleInDegrees = 360 - angleInDegrees;
+  }
+
+  // Only want to show whole numbers when in angles mode
+  const angleLabelNumber = parseFloat(angleInDegrees.toFixed(snapTo === "angles" ? 0 : 1));
+  const angleLabel = Number.isInteger(angleLabelNumber) ? angleLabelNumber : "≈ " + angleLabelNumber;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
+    id: "background",
+    x: "-5%",
+    width: "110%",
+    y: "0%",
+    height: "100%"
+  }, /*#__PURE__*/React.createElement("feFlood", {
+    floodColor: "#FFF",
+    floodOpacity: "0.5"
+  }), /*#__PURE__*/React.createElement("feComposite", {
+    operator: "over",
+    in: "SourceGraphic"
+  }))), !isOutside && isRightAngle(angle) ? /*#__PURE__*/React.createElement(RightAngleSquare, {
+    start: [x1, y1],
+    vertex: [x2, y2],
+    end: [x3, y3]
+  }) : /*#__PURE__*/React.createElement(Arc, {
+    arc: arc
+  }), /*#__PURE__*/React.createElement(TextLabel, {
+    x: x3,
+    y: y3,
+    attach: y3 - centerY > 0 ? "s" : "n",
+    attachDistance: Math.abs(y3 - centerY) < 0.2 || vec.dist([x3, y3], centerPoint) < 0.3 ? 20 : 10
+  }, angleLabel, "\xB0"));
+};
+const Angle = ({
+  vertex,
+  coords,
+  showAngles,
+  allowReflexAngles,
+  range
+}) => {
+  // Check if the points are clockwise or not, depending on whether we allow reflex angles
+  const areClockwise = clockwise$1([...coords, vertex]);
+  const shouldReverseCoords = areClockwise && !allowReflexAngles;
+
+  // Reverse the coordinates accordingly to ensure the angle is calculated correctly
+  const clockwiseCoords = shouldReverseCoords ? coords : coords.reverse();
+
+  // Calculate the angles between the two points
+  const startAngle = getAngleFromVertex(clockwiseCoords[0], vertex);
+  const endAngle = getAngleFromVertex(clockwiseCoords[1], vertex);
+  const angle = (startAngle + 360 - endAngle) % 360;
+
+  // Check if the angle is reflexive
+  const isReflexive = angle > 180;
+
+  // Break out the necessary points for the arc calculation
+  const [centerX, centerY] = vertex;
+  const [point1, point2] = clockwiseCoords;
+  const [startX, startY] = point1;
+  const [endX, endY] = point2;
+  const a = vec.dist(vertex, point1);
+  const b = vec.dist(vertex, point2);
+
+  // Set the radius of the arc
+  const radius = 2;
+
+  // Calculate the end points of the arc
+  const y1 = centerY + (startY - centerY) / a * radius;
+  const x2 = centerX + (endX - centerX) / b * radius;
+  const x1 = centerX + (startX - centerX) / a * radius;
+  const y2 = centerY + (endY - centerY) / b * radius;
+
+  // Used to calculate the inside of the angle and to create square
+  const [x3, y3] = vec.add(vertex, vec.add(vec.sub([x1, y1], vertex), vec.sub([x2, y2], vertex)));
+
+  // Determine whether the arc should be drawn outside the angle
+  const isOutside = shouldDrawArcOutside([x3, y3], vertex, range, [[vertex, point1], [vertex, point2]]);
+
+  // Determine the flags for the arc
+  // If the angle is outside OR reflexive, we want to draw a large arc
+  // If the angle is outside AND reflexive, we want to sweep the arc
+  const largeArcFlag = isOutside || isReflexive ? 1 : 0;
+  const sweepFlag = isOutside && isReflexive ? 1 : 0;
+
+  // Create the SVG path for the arc
+  const arc = `M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${x2} ${y2}`;
+
+  // We only ever want to show whole angles
+  const angleLabel = parseFloat(angle.toFixed(0)); // Only want to show whole angles
+
+  // Calculate the text position based on the angle and whether we allow reflex angles
+  // Let's try the angle bisector method to find the midpoint of the arc
+  const [textX, textY] = calculateBisectorPoint(point1, point2, vertex, isReflexive, allowReflexAngles, radius);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
+    id: "background",
+    x: "-5%",
+    width: "110%",
+    y: "0%",
+    height: "100%"
+  }, /*#__PURE__*/React.createElement("feFlood", {
+    floodColor: "#FFF",
+    floodOpacity: "0.5"
+  }), /*#__PURE__*/React.createElement("feComposite", {
+    operator: "over",
+    in: "SourceGraphic"
+  }))), isRightAngle(angle) ? /*#__PURE__*/React.createElement(RightAngleSquare, {
+    start: [x1, y1],
+    vertex: [x2, y2],
+    end: [x3, y3],
+    className: "arc-right-angle"
+  }) : /*#__PURE__*/React.createElement(Arc, {
+    arc: arc,
+    className: "angle-arc"
+  }), showAngles && /*#__PURE__*/React.createElement(TextLabel, {
+    x: textX,
+    y: textY,
+    color: color.blue
+  }, angleLabel, "\xB0"));
+};
+
+/**
+ * This is broken out into its own component so that it can be used for an early return
+ * (see line 55 or https://github.com/Khan/perseus/blob/84bbd882b11d16871e1b813a0b901f3b903d5479/packages/perseus/src/widgets/interactive-graphs/graphs/components/angle.tsx#L53-L57)
+ */
+const RightAngleSquare = ({
+  start: [x1, y1],
+  vertex: [x2, y2],
+  end: [x3, y3],
+  className
+}) => /*#__PURE__*/React.createElement(MafsCssTransformWrapper, null, /*#__PURE__*/React.createElement("path", {
+  d: `M ${x1} ${y1} L ${x3} ${y3} M ${x3} ${y3} L ${x2} ${y2}`,
+  strokeWidth: 0.02,
+  fill: "none",
+  className: className
+}));
+
+// We're conditionally adding the class name here so that we can style the arc differently
+// based on whether it's an angle or a polygon angle
+const Arc = ({
+  arc,
+  className
+}) => {
+  return /*#__PURE__*/React.createElement(MafsCssTransformWrapper, null, /*#__PURE__*/React.createElement("path", {
+    d: arc,
+    strokeWidth: 0.02,
+    fill: "none",
+    className: className
+  }));
+};
+const isRightPolygonAngle = angle => Math.abs(angle - Math.PI / 2) < 0.01;
+const isRightAngle = angle => Math.round(angle) === 90;
+
+/**
+ * Determines if an angle is an inside (false) or outside (true) angle.
+ * They way, we know to flip the `largeArc` and `sweepArc` flags.
+ * Uses the priciple that a ray from a point inside a polygon will intersect
+ * with an odd number of lines, while a ray from a point outside the polygon
+ * will intersect with an even number of lines.
+ * https://stackoverflow.com/questions/217578/how-can-i-determine-whether-a-2d-point-is-within-a-polygon
+ */
+const shouldDrawArcOutside = (midpoint, vertex, range, polygonLines) => {
+  // Create a ray from the midpoint (inside angle) to the edge of the range
+  const rangeIntersectionPoint = getIntersectionOfRayWithBox(midpoint, vertex, range);
+  let lineIntersectionCount = 0;
+  polygonLines.forEach(line => segmentsIntersect([vertex, rangeIntersectionPoint], line) && lineIntersectionCount++);
+
+  // If the number of intersections is even, the angle is inside the polygon
+  return !isEven(lineIntersectionCount);
+};
+const isEven = n => n % 2 === 0;
+
+// This function calculates the bisector point of an angle formed by two points
+// and a vertex. It is used to position the angle label so that it is always
+// outside the arc at the exact midpoint of the angle.
+// Reflex angles make use of polar coordinates to determine the correct direction
+function calculateBisectorPoint(point1, point2, vertex, isReflex, allowReflex, arcRadius) {
+  const [originX, originY] = vertex;
+  const [x1, y1] = point1;
+  const [x2, y2] = point2;
+
+  // Convert the Cartesian Coordinates to vectors
+  const vectorA = [x1 - originX, y1 - originY];
+  const vectorB = [x2 - originX, y2 - originY];
+
+  // Calculate the average angle of the vectors
+  // so that we can point the bisector in the correct direction using polar coordinates
+  const angleA = Math.atan2(vectorA[1], vectorA[0]);
+  const angleB = Math.atan2(vectorB[1], vectorB[0]);
+
+  // Calculate the average of these two angles
+  let averageAngle = (angleA + angleB) / 2;
+  const angleRadians = Math.abs(angleA - angleB);
+
+  // Adjust the average angle to point in the correct direction
+  // and to account for reflex angles and a bug with 180 degrees
+  // that occurs due to our angleOffsetDegrees option in the graph
+  if (allowReflex) {
+    // If the resulting angles are less than 180 degrees,
+    // or if the user has flipped the points on the interactive element
+    // ensure that we have the correct direction for the reflex angle
+    if (angleRadians <= Math.PI && isReflex || angleB > angleA) {
+      averageAngle += Math.PI; // Add 180 degrees
+    }
+  } else {
+    // If the resulting angles are greater than 180 degrees, adjust
+    // to get the correct angle, as we already know that the angle is not reflexive
+    // This fixes a bug that occurs at 180 degrees due to our angleOffsetDegrees option in the graph
+    if (angleRadians > Math.PI) {
+      averageAngle -= Math.PI; // Subract 180 degrees
+    }
+  }
+
+  // Convert the average angle back to Cartesian coordinates
+  const sum = [Math.cos(averageAngle), Math.sin(averageAngle)];
+
+  // Calculate the magnitude of the sum to normalize it
+  const sumMagnitude = Math.sqrt(sum[0] ** 2 + sum[1] ** 2);
+  const bisectorDirection = [sum[0] / sumMagnitude, sum[1] / sumMagnitude];
+
+  // Calculate the initial distance of the bisector direction from the origin
+  const initialDistance = Math.sqrt(bisectorDirection[0] ** 2 + bisectorDirection[1] ** 2);
+
+  // Determine the minimum radius to ensure that the text is always outside the arc
+  const requiredDistance = arcRadius * 1.75;
+  let radius = requiredDistance / initialDistance;
+
+  // Apply radius only if the initial distance is less than required
+  if (initialDistance >= requiredDistance) {
+    radius = 1; // Use the unit vector as is
+  }
+
+  // Scale the bisector direction by the radius
+  const bisectorPoint = [bisectorDirection[0] * radius, bisectorDirection[1] * radius];
+
+  // Add the vertex to the bisector point to get the final position
+  // to ensure that the angle label moves with the interactive element
+  const scaledBisector = vec.add(bisectorPoint, vertex);
+  return scaledBisector;
+}
+
 /**
  * 44 is touch best practice and AAA compliant for WCAG
  * https://www.w3.org/WAI/WCAG21/Understanding/target-size.html
  */
 const TARGET_SIZE = 44;
+const REMOVE_BUTTON_ID = "perseus_mafs_remove_button";
 
 // same as pointsFromNormalized in interactive-graph.tsx
 const normalizePoints = (range, step, coordsList, noSnap) => coordsList.map(coords =>
@@ -32268,6 +32578,9 @@ function bound$1({
   const boundingBox = inset(snapStep, range);
   return clampToBox(boundingBox, point);
 }
+function isUnlimitedGraphState(state) {
+  return state.type === "point" && state.numPoints === "unlimited" || state.type === "polygon" && state.numSides === "unlimited";
+}
 
 var isProduction = process.env.NODE_ENV === 'production';
 var prefix = 'Invariant failed';
@@ -32434,6 +32747,14 @@ function range(min, max, step = 1) {
   return result;
 }
 
+function srFormatNumber(a, locale) {
+  // adding zero here converts negative zero to positive zero.
+  return (0 + a).toLocaleString(locale, {
+    maximumFractionDigits: 3,
+    useGrouping: false // no thousands separators
+  });
+}
+
 // The hitbox size of 48px by 48px is preserved from the legacy interactive
 // graph.
 const hitboxSizePx = 48;
@@ -32441,33 +32762,26 @@ const hitboxSizePx = 48;
 // MovablePointView is a purely presentational component (i.e. it is a pure
 // function with no state or effects) that renders the SVG for a movable point
 // on an interactive graph.
-//
-// It has two modes for managing tabbing / focus: "controlled" (where the caller
-// manages the display of the focus ring, and the point itself cannot be
-// focused) and "uncontrolled" (where the point is focusable, and the browser
-// manages the focus state and styling). For context on why we did this, see
-// the description of https://github.com/Khan/perseus/pull/1240
 const MovablePointView = /*#__PURE__*/forwardRef((props, hitboxRef) => {
   var _Object$entries$find$, _Object$entries$find;
   const {
     range,
     markings,
-    showTooltips,
-    disableKeyboardInteraction
+    showTooltips
   } = useGraphConfig();
   const {
     point,
     color: color$1 = color.blue,
     dragging,
-    focusBehavior,
     cursor,
+    showFocusRing,
     onClick = () => {}
   } = props;
 
   // WB Tooltip requires a color name for the background color.
   // Since the color in props is a hex value, a reverse lookup is needed.
   const wbColorName = (_Object$entries$find$ = (_Object$entries$find = Object.entries(color).find(([_, value]) => value === color$1)) == null ? void 0 : _Object$entries$find[0]) != null ? _Object$entries$find$ : "blue";
-  const pointClasses = `movable-point ${dragging ? "movable-point--dragging" : ""} ${focusClass(focusBehavior)}`;
+  const pointClasses = classNames("movable-point", dragging && "movable-point--dragging", showFocusRing && "movable-point--focus");
   const [[x, y]] = useTransformVectorsToPixels(point);
   const [[xMin, xMax], [yMin, yMax]] = range;
   const [[verticalStartX]] = useTransformVectorsToPixels([xMin, 0]);
@@ -32496,15 +32810,6 @@ const MovablePointView = /*#__PURE__*/forwardRef((props, hitboxRef) => {
       cursor
     },
     "data-testid": "movable-point",
-    tabIndex: disableKeyboardInteraction ? -1 : tabIndex(focusBehavior),
-    onFocus: event => {
-      const callback = getOnFocusChangeCallback(focusBehavior);
-      callback && callback(event, true);
-    },
-    onBlur: event => {
-      const callback = getOnFocusChangeCallback(focusBehavior);
-      callback && callback(event, false);
-    },
     onClick: onClick
   }, /*#__PURE__*/React.createElement("circle", {
     className: "movable-point-hitbox",
@@ -32541,25 +32846,113 @@ const MovablePointView = /*#__PURE__*/forwardRef((props, hitboxRef) => {
     }
   }, svgForPoint) : svgForPoint);
 });
-function focusClass(config) {
-  if (config.type === "controlled" && config.showFocusRing) {
-    return "movable-point--focus";
-  }
-  return "";
+
+// TODO(benchristel): Move this to a more central location if it's reused.
+// Or install the library.
+function classNames(...names) {
+  return names.filter(Boolean).join(" ");
 }
-function tabIndex(config) {
-  if (config.type === "uncontrolled") {
-    return config.tabIndex;
-  }
-  return undefined;
+
+function useControlPoint(params) {
+  const {
+    snapStep,
+    disableKeyboardInteraction
+  } = useGraphConfig();
+  const {
+    point,
+    color,
+    cursor,
+    constrain = p => snap(snapStep, p),
+    onMove = noop$1,
+    onClick = noop$1,
+    onFocus = noop$1,
+    onBlur = noop$1,
+    forwardedRef = noop$1
+  } = params;
+  const {
+    strings,
+    locale
+  } = usePerseusI18n();
+  const [focused, setFocused] = useState(false);
+  const focusableHandleRef = useRef(null);
+  useDraggable({
+    gestureTarget: focusableHandleRef,
+    point,
+    onMove,
+    constrainKeyboardMovement: constrain
+  });
+  const visiblePointRef = useRef(null);
+  const {
+    dragging
+  } = useDraggable({
+    gestureTarget: visiblePointRef,
+    point,
+    onMove,
+    constrainKeyboardMovement: constrain
+  });
+  useLayoutEffect(() => {
+    setForwardedRef(forwardedRef, focusableHandleRef.current);
+  }, [forwardedRef]);
+  const focusableHandle = /*#__PURE__*/React.createElement("g", {
+    "data-testid": "movable-point__focusable-handle",
+    className: "movable-point__focusable-handle",
+    tabIndex: disableKeyboardInteraction ? -1 : 0,
+    ref: focusableHandleRef,
+    role: "button",
+    "aria-label": strings.srPointAtCoordinates({
+      x: srFormatNumber(point[X], locale),
+      y: srFormatNumber(point[Y], locale)
+    })
+    // aria-live="assertive" causes the new location of the point to be
+    // announced immediately on move.
+    ,
+    "aria-live": "assertive",
+    onFocus: event => {
+      onFocus(event);
+      setFocused(true);
+    },
+    onBlur: event => {
+      onBlur(event);
+      setFocused(false);
+    }
+  });
+  const visiblePoint = /*#__PURE__*/React.createElement(MovablePointView, {
+    cursor: cursor,
+    onClick: () => {
+      var _focusableHandleRef$c;
+      onClick();
+      (_focusableHandleRef$c = focusableHandleRef.current) == null || _focusableHandleRef$c.focus();
+    },
+    point: point,
+    dragging: dragging,
+    color: color,
+    ref: visiblePointRef,
+    showFocusRing: focused
+  });
+  return {
+    focusableHandle,
+    visiblePoint,
+    focusableHandleRef,
+    visiblePointRef
+  };
 }
-function getOnFocusChangeCallback(config) {
-  if (config.type === "uncontrolled") {
-    return config.onFocusChange;
+
+// TODO(benchristel): move this to a more central place if we want to reuse it.
+function setForwardedRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref !== null) {
+    ref.current = value;
   }
-  return () => {};
 }
 
+// This `noop` const is an optimization. Above, we use the forwardedRef
+// variable, which defaults to `noop`, in a useEffect deps array. Using `noop`
+// as the default value instead of `() => {}` ensures that the forwardedRef
+// variable will have the same value on repeated renders, preventing the
+// useEffect callback from re-running needlessly.
+const noop$1 = () => {};
+
 const MovableLine = props => {
   const {
     onMoveLine = () => {},
@@ -32583,11 +32976,19 @@ const MovableLine = props => {
   const {
     visiblePoint: visiblePoint1,
     focusableHandle: focusableHandle1
-  } = useControlPoint(start, color, p => onMovePoint(0, p));
+  } = useControlPoint({
+    point: start,
+    color,
+    onMove: p => onMovePoint(0, p)
+  });
   const {
     visiblePoint: visiblePoint2,
     focusableHandle: focusableHandle2
-  } = useControlPoint(end, color, p => onMovePoint(1, p));
+  } = useControlPoint({
+    point: end,
+    color,
+    onMove: p => onMovePoint(1, p)
+  });
   const line = /*#__PURE__*/React.createElement(Line$1, {
     start: start,
     end: end,
@@ -32597,51 +32998,6 @@ const MovableLine = props => {
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, focusableHandle1, line, focusableHandle2, visiblePoint1, visiblePoint2);
 };
-function useControlPoint(point, color, onMovePoint) {
-  const {
-    snapStep,
-    disableKeyboardInteraction
-  } = useGraphConfig();
-  const [focused, setFocused] = useState(false);
-  const keyboardHandleRef = useRef(null);
-  useDraggable({
-    gestureTarget: keyboardHandleRef,
-    point,
-    onMove: onMovePoint,
-    constrainKeyboardMovement: p => snap(snapStep, p)
-  });
-  const visiblePointRef = useRef(null);
-  const {
-    dragging
-  } = useDraggable({
-    gestureTarget: visiblePointRef,
-    point,
-    onMove: onMovePoint,
-    constrainKeyboardMovement: p => snap(snapStep, p)
-  });
-  const focusableHandle = /*#__PURE__*/React.createElement("g", {
-    "data-testid": "movable-point__focusable-handle",
-    className: "movable-point__focusable-handle",
-    tabIndex: disableKeyboardInteraction ? -1 : 0,
-    ref: keyboardHandleRef,
-    onFocus: () => setFocused(true),
-    onBlur: () => setFocused(false)
-  });
-  const visiblePoint = /*#__PURE__*/React.createElement(MovablePointView, {
-    point: point,
-    dragging: dragging,
-    color: color,
-    ref: visiblePointRef,
-    focusBehavior: {
-      type: "controlled",
-      showFocusRing: focused
-    }
-  });
-  return {
-    focusableHandle,
-    visiblePoint
-  };
-}
 const defaultStroke = "var(--movable-line-stroke-color)";
 const Line$1 = props => {
   const {
@@ -32731,25 +33087,338 @@ function trimRange(range, graphDimensionsInPixels) {
   return inset([graphUnitsToTrimX, graphUnitsToTrimY], range);
 }
 
-const SegmentGraph = props => {
+const MovablePoint$1 = /*#__PURE__*/React.forwardRef((props, pointRef) => {
   const {
-    dispatch
+    visiblePoint,
+    focusableHandle
+  } = useControlPoint(_extends({}, props, {
+    forwardedRef: pointRef
+  }));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, focusableHandle, visiblePoint);
+});
+
+function renderAngleGraph(state, dispatch) {
+  return {
+    graph: /*#__PURE__*/React.createElement(AngleGraph, {
+      graphState: state,
+      dispatch: dispatch
+    }),
+    interactiveElementsDescription: null
+  };
+}
+function AngleGraph(props) {
+  const {
+    dispatch,
+    graphState
   } = props;
   const {
-    coords: segments
-  } = props.graphState;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, segments == null ? void 0 : segments.map((segment, i) => /*#__PURE__*/React.createElement(MovableLine, {
-    key: i,
-    points: segment,
-    onMoveLine: delta => {
-      dispatch(actions.segment.moveLine(i, delta));
-    },
-    onMovePoint: (endpointIndex, destination) => {
-      dispatch(actions.segment.movePointInFigure(i, endpointIndex, destination));
+    graphDimensionsInPixels
+  } = useGraphConfig();
+  const {
+    coords,
+    showAngles,
+    range,
+    allowReflexAngles,
+    snapDegrees
+  } = graphState;
+
+  // Break the coords into the two end points and the center point
+  const endPoints = [coords[0], coords[2]];
+  const centerPoint = coords[1];
+
+  // Convert the vectors to pixels for rendering the svg lines
+  const angleLines = [[centerPoint, endPoints[0]], [centerPoint, endPoints[1]]];
+  const linePixelCoords = [useTransformVectorsToPixels(centerPoint, endPoints[0]), useTransformVectorsToPixels(centerPoint, endPoints[1])];
+
+  // Create the SVG lines for the angle
+  const svgLines = linePixelCoords.map(([startPtPx, endPtPx], i) => {
+    const trimmedRange = trimRange(range, graphDimensionsInPixels);
+    const endExtend = getIntersectionOfRayWithBox(angleLines[i][0], angleLines[i][1], trimmedRange);
+    return /*#__PURE__*/React.createElement("g", {
+      key: `line-${i}`
+    }, /*#__PURE__*/React.createElement(SVGLine, {
+      start: startPtPx,
+      end: endPtPx,
+      style: {
+        stroke: "var(--movable-line-stroke-color)",
+        strokeWidth: "var(--movable-line-stroke-weight)"
+      }
+    }), /*#__PURE__*/React.createElement(Vector, {
+      tail: angleLines[i][1],
+      tip: endExtend,
+      color: "var(--movable-line-stroke-color)"
+    }));
+  });
+
+  // Create the angle indicator parameters
+  const angleParams = {
+    vertex: centerPoint,
+    coords: endPoints,
+    allowReflexAngles: allowReflexAngles || false,
+    // Whether to allow reflex angles or not
+    snapDegrees: snapDegrees || 1,
+    // The multiple of degrees to snap to
+    range: range,
+    showAngles: showAngles || false // Whether to show the angle or not
+  };
+
+  // Render the lines, angle, and then movable points
+  return /*#__PURE__*/React.createElement(React.Fragment, null, svgLines, /*#__PURE__*/React.createElement(Angle, angleParams), /*#__PURE__*/React.createElement(MovablePoint$1, {
+    point: coords[1],
+    constrain: p => p,
+    onMove: destination => dispatch(actions.angle.movePoint(1, destination))
+  }), /*#__PURE__*/React.createElement(MovablePoint$1, {
+    point: coords[0],
+    constrain: getAngleSideConstraint(coords[0], coords[1], snapDegrees || 1),
+    onMove: destination => dispatch(actions.angle.movePoint(0, destination))
+  }), /*#__PURE__*/React.createElement(MovablePoint$1, {
+    point: coords[2],
+    constrain: getAngleSideConstraint(coords[2], coords[1], snapDegrees || 1),
+    onMove: destination => dispatch(actions.angle.movePoint(2, destination))
+  }));
+}
+const positiveX = [1, 0];
+const negativeX = [-1, 0];
+const positiveY = [0, 1];
+const negativeY = [0, -1];
+function getAngleSideConstraint(sidePoint, vertex, snapDegrees) {
+  var _findIntersectionOfRa, _findIntersectionOfRa2, _findIntersectionOfRa3, _findIntersectionOfRa4;
+  const currentAngle = calculateAngleInDegrees(vec.sub(sidePoint, vertex));
+
+  // Find the rays that start at the current point and point up, down, left
+  // and right.
+  const leftRay = [sidePoint, vec.add(sidePoint, negativeX)];
+  const rightRay = [sidePoint, vec.add(sidePoint, positiveX)];
+  const upRay = [sidePoint, vec.add(sidePoint, positiveY)];
+  const downRay = [sidePoint, vec.add(sidePoint, negativeY)];
+
+  // find the angles that lie one snap step clockwise and counter-clockwise
+  // from the current angle. These are the angles to which the side can be
+  // moved.
+  const oneStepCounterClockwise = currentAngle + snapDegrees;
+  const oneStepClockwise = currentAngle - snapDegrees;
+
+  // find the rays that start from the vertex and point in the direction of
+  // the angles we just computed.
+  const counterClockwiseRay = [vertex, vec.add(vertex, polar(1, oneStepCounterClockwise))];
+  const clockwiseRay = [vertex, vec.add(vertex, polar(1, oneStepClockwise))];
+
+  // find the intersections of those rays with the horizontal and vertical
+  // rays extending from the sidePoint. These intersections are the points to
+  // which sidePoint can move that will result in a rotation of `snapDegrees`.
+  const left = (_findIntersectionOfRa = findIntersectionOfRays(leftRay, counterClockwiseRay)) != null ? _findIntersectionOfRa : findIntersectionOfRays(leftRay, clockwiseRay);
+  const right = (_findIntersectionOfRa2 = findIntersectionOfRays(rightRay, counterClockwiseRay)) != null ? _findIntersectionOfRa2 : findIntersectionOfRays(rightRay, clockwiseRay);
+  const up = (_findIntersectionOfRa3 = findIntersectionOfRays(upRay, counterClockwiseRay)) != null ? _findIntersectionOfRa3 : findIntersectionOfRays(upRay, clockwiseRay);
+  const down = (_findIntersectionOfRa4 = findIntersectionOfRays(downRay, counterClockwiseRay)) != null ? _findIntersectionOfRa4 : findIntersectionOfRays(downRay, clockwiseRay);
+  return {
+    up: up != null ? up : sidePoint,
+    down: down != null ? down : sidePoint,
+    left: left != null ? left : sidePoint,
+    right: right != null ? right : sidePoint
+  };
+}
+
+function getGradableGraph(state, initialGraph) {
+  if (!state.hasBeenInteractedWith) {
+    return _extends({}, initialGraph);
+  }
+  if (initialGraph.type === "linear-system" && state.type === "linear-system") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
+  if (state.type === "segment" && initialGraph.type === "segment") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
+  if (state.type === "linear" && initialGraph.type === "linear") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
+  if (state.type === "ray" && initialGraph.type === "ray") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
+  if (state.type === "polygon" && initialGraph.type === "polygon") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
+  if (state.type === "point" && initialGraph.type === "point") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
+  if (state.type === "circle" && initialGraph.type === "circle") {
+    return _extends({}, initialGraph, {
+      center: state.center,
+      radius: getRadius(state)
+    });
+  }
+  if (state.type === "quadratic" && initialGraph.type === "quadratic") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
+  if (state.type === "sinusoid" && initialGraph.type === "sinusoid") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
+  if (state.type === "angle" && initialGraph.type === "angle") {
+    // We're going to reverse the coords for scoring if the angle is clockwise and
+    // we don't allow reflex angles. This is because the angle is largely defined
+    // by the order of the points in the coords array, and we want to maintain
+    // the same angle scoring with the legacy graph (which had a bug).
+    // (LEMS-2190): When we remove the legacy graph, move this logic to the scoring function.
+    const areClockwise = clockwise$1([state.coords[0], state.coords[2], state.coords[1]]);
+    const shouldReverseCoords = areClockwise && !state.allowReflexAngles;
+    const coords = shouldReverseCoords ? state.coords.slice().reverse() : state.coords;
+    return _extends({}, initialGraph, {
+      coords,
+      allowReflexAngles: state.allowReflexAngles
+    });
+  }
+  if (state.type === "none" && initialGraph.type === "none") {
+    return {
+      type: "none"
+    };
+  }
+  throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
+}
+
+/**
+ * determine radius of a circle graph
+ *
+ * @param graph - the graph object containing the circle
+ * @returns the radius of the circle
+ */
+function getRadius(graph) {
+  const [centerX, centerY] = graph.center;
+  const [edgeX, edgeY] = graph.radiusPoint;
+  return Math.sqrt(Math.pow(edgeX - centerX, 2) + Math.pow(edgeY - centerY, 2));
+}
+
+function renderCircleGraph(state, dispatch) {
+  return {
+    graph: /*#__PURE__*/React.createElement(CircleGraph, {
+      graphState: state,
+      dispatch: dispatch
+    }),
+    interactiveElementsDescription: null
+  };
+}
+function CircleGraph(props) {
+  const {
+    dispatch,
+    graphState
+  } = props;
+  const {
+    center,
+    radiusPoint
+  } = graphState;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MovableCircle, {
+    center: center,
+    radius: getRadius(graphState),
+    onMove: c => dispatch(actions.circle.moveCenter(c))
+  }), /*#__PURE__*/React.createElement(MovablePoint$1, {
+    point: radiusPoint,
+    cursor: "ew-resize",
+    onMove: newRadiusPoint => {
+      dispatch(actions.circle.moveRadiusPoint(newRadiusPoint));
     }
-  })));
-};
+  }));
+}
+function MovableCircle(props) {
+  const {
+    center,
+    radius,
+    onMove
+  } = props;
+  const {
+    snapStep,
+    disableKeyboardInteraction
+  } = useGraphConfig();
+  const draggableRef = useRef(null);
+  const {
+    dragging
+  } = useDraggable({
+    gestureTarget: draggableRef,
+    point: center,
+    onMove,
+    constrainKeyboardMovement: p => snap(snapStep, p)
+  });
+  const [centerPx] = useTransformVectorsToPixels(center);
+  const [radiiPx] = useTransformDimensionsToPixels([radius, radius]);
+  return /*#__PURE__*/React.createElement("g", {
+    ref: draggableRef,
+    tabIndex: disableKeyboardInteraction ? -1 : 0,
+    className: `movable-circle ${dragging ? "movable-circle--dragging" : ""}`
+  }, /*#__PURE__*/React.createElement("ellipse", {
+    className: "focus-ring",
+    cx: centerPx[X],
+    cy: centerPx[Y],
+    rx: radiiPx[X] + 3,
+    ry: radiiPx[Y] + 3
+  }), /*#__PURE__*/React.createElement("ellipse", {
+    className: "circle",
+    cx: centerPx[X],
+    cy: centerPx[Y],
+    rx: radiiPx[X],
+    ry: radiiPx[Y]
+  }), /*#__PURE__*/React.createElement(DragHandle, {
+    center: center
+  }));
+}
+const dragHandleDimensions = [24, 14];
+const dragHandleDotPositions = crossProduct([-4.4, 0, 4.4], [-2.1, 2.1]);
+function DragHandle(props) {
+  const {
+    center
+  } = props;
+  const cornerRadius = Math.min(...dragHandleDimensions) / 2;
+  const [centerPx] = useTransformVectorsToPixels(center);
+  const topLeft = vec.sub(centerPx, vec.scale(dragHandleDimensions, 0.5));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("rect", {
+    className: "movable-circle-handle",
+    x: topLeft[X],
+    y: topLeft[Y],
+    width: dragHandleDimensions[X],
+    height: dragHandleDimensions[Y],
+    rx: cornerRadius,
+    ry: cornerRadius
+  }), dragHandleDotPositions.map(offsetPx => {
+    const [xPx, yPx] = vec.add(offsetPx, centerPx);
+    return /*#__PURE__*/React.createElement("circle", {
+      key: `circle-${xPx}-${yPx}`,
+      className: "movable-circle-handle-dot",
+      cx: xPx,
+      cy: yPx
+    });
+  }));
+}
+function crossProduct(as, bs) {
+  const result = [];
+  for (const a of as) {
+    for (const b of bs) {
+      result.push([a, b]);
+    }
+  }
+  return result;
+}
 
+function renderLinearGraph(state, dispatch) {
+  return {
+    graph: /*#__PURE__*/React.createElement(LinearGraph, {
+      graphState: state,
+      dispatch: dispatch
+    }),
+    interactiveElementsDescription: null
+  };
+}
 const LinearGraph = (props, key) => {
   const {
     dispatch
@@ -32776,6 +33445,15 @@ const LinearGraph = (props, key) => {
   });
 };
 
+function renderLinearSystemGraph(state, dispatch) {
+  return {
+    graph: /*#__PURE__*/React.createElement(LinearSystemGraph, {
+      graphState: state,
+      dispatch: dispatch
+    }),
+    interactiveElementsDescription: null
+  };
+}
 const LinearSystemGraph = props => {
   const {
     dispatch
@@ -32798,405 +33476,122 @@ const LinearSystemGraph = props => {
   })), ";");
 };
 
-const RayGraph = props => {
+function renderPointGraph(state, dispatch) {
+  return {
+    graph: /*#__PURE__*/React.createElement(PointGraph, {
+      graphState: state,
+      dispatch: dispatch
+    }),
+    interactiveElementsDescription: /*#__PURE__*/React.createElement(PointGraphDescription, {
+      state: state
+    })
+  };
+}
+function PointGraph(props) {
+  const numPoints = props.graphState.numPoints;
+  if (numPoints === "unlimited") {
+    return UnlimitedPointGraph(props);
+  }
+  return LimitedPointGraph(props);
+}
+function LimitedPointGraph(props) {
   const {
     dispatch
   } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, props.graphState.coords.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
+    key: i,
+    point: point,
+    onMove: destination => dispatch(actions.pointGraph.movePoint(i, destination))
+  })));
+}
+function UnlimitedPointGraph(props) {
   const {
-    coords: line
-  } = props.graphState;
-  const handleMoveLine = delta => dispatch(actions.ray.moveRay(delta));
-  const handleMovePoint = (pointIndex, newPoint) => dispatch(actions.ray.movePoint(pointIndex, newPoint));
-
-  // Ray graphs only have one line
-  return /*#__PURE__*/React.createElement(MovableLine, {
-    points: line,
-    onMoveLine: handleMoveLine,
-    onMovePoint: handleMovePoint,
-    extend: {
-      start: false,
-      end: true
-    }
-  });
-};
-
-/**
- * Wrapper with Mafs transform styles for SVG elements.
- * Scales and translates the SVG element to match the Mafs view.
- * Use if you do not need/want to use the hook in `use-transform.ts`.
- */
-const MafsCssTransformWrapper = ({
-  children
-}) => /*#__PURE__*/React.createElement("g", {
-  style: {
-    transform: `var(--mafs-view-transform) var(--mafs-user-transform)`
-  }
-}, children);
-
-const _excluded$1 = ["children"];
-const TextLabel = _ref => {
-  let {
-      children
-    } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  return /*#__PURE__*/React__default.createElement(Text$1, _extends({
-    size: 16,
-    svgTextProps: {
-      filter: "url(#background)",
-      fontWeight: "bold"
+    dispatch
+  } = props;
+  const graphConfig = useGraphConfig();
+  const {
+    range: [[minX, maxX], [minY, maxY]]
+  } = graphConfig;
+  const width = maxX - minX;
+  const height = maxY - minY;
+  const [[widthPx, heightPx]] = useTransformDimensionsToPixels([width, height]);
+  const [[left, top]] = useTransformVectorsToPixels([minX, maxY]);
+  const itemsRef = React.useRef([]);
+  React.useEffect(() => {
+    const focusedIndex = props.graphState.focusedPointIndex;
+    if (focusedIndex != null) {
+      var _itemsRef$current$foc;
+      (_itemsRef$current$foc = itemsRef.current[focusedIndex]) == null || _itemsRef$current$foc.focus();
     }
-  }, rest), children);
-};
-const SvgDefs = () => /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("filter", {
-  id: "background",
-  x: "-5%",
-  width: "110%",
-  y: "0%",
-  height: "100%"
-}, /*#__PURE__*/React__default.createElement("feFlood", {
-  floodColor: "#FFF",
-  floodOpacity: "0.64"
-}), /*#__PURE__*/React__default.createElement("feComposite", {
-  operator: "over",
-  in: "SourceGraphic"
-})));
-
-const PolygonAngle = ({
-  centerPoint,
-  endPoints,
-  range,
-  polygonLines,
-  showAngles,
-  snapTo
-}) => {
-  const [centerX, centerY] = centerPoint;
-  const areClockwise = clockwise$1([centerPoint, ...endPoints]);
-  const [[startX, startY], [endX, endY]] = areClockwise ? endPoints : endPoints.reverse();
-  const radius = 0.3;
-  const a = vec.dist(centerPoint, endPoints[0]);
-  const b = vec.dist(centerPoint, endPoints[1]);
-  const c = vec.dist(endPoints[0], endPoints[1]);
-
-  // Law of cosines
-  const angle = Math.acos((a ** 2 + b ** 2 - c ** 2) / (2 * a * b));
-  const y1 = centerY + (startY - centerY) / a * radius;
-  const x2 = centerX + (endX - centerX) / b * radius;
-  const x1 = centerX + (startX - centerX) / a * radius;
-  const y2 = centerY + (endY - centerY) / b * radius;
-
-  // Fourth point that would create a rhomboid
-  // Used to calculate the inside of the angle and to create square
-  const [x3, y3] = vec.add(centerPoint, vec.add(vec.sub([x1, y1], centerPoint), vec.sub([x2, y2], centerPoint)));
-  if (!showAngles) {
-    return isRightPolygonAngle(angle) ? /*#__PURE__*/React.createElement(RightAngleSquare, {
-      start: [x1, y1],
-      vertex: [x2, y2],
-      end: [x3, y3]
-    }) : null;
-  }
-
-  // Midpoint betwen ends of arc
-  const isOutside = shouldDrawArcOutside([x3, y3], centerPoint, range, polygonLines);
-  const largeArcFlag = isOutside ? 1 : 0;
-  const sweepFlag = isOutside ? 1 : 0;
-  const arc = `M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${x2} ${y2}`;
-  let angleInDegrees = angle * (180 / Math.PI);
-  // If we have triggered "largArcFlag", the angle should be greater than 180
-  if (isOutside) {
-    angleInDegrees = 360 - angleInDegrees;
-  }
-
-  // Only want to show whole numbers when in angles mode
-  const angleLabelNumber = parseFloat(angleInDegrees.toFixed(snapTo === "angles" ? 0 : 1));
-  const angleLabel = Number.isInteger(angleLabelNumber) ? angleLabelNumber : "≈ " + angleLabelNumber;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
-    id: "background",
-    x: "-5%",
-    width: "110%",
-    y: "0%",
-    height: "100%"
-  }, /*#__PURE__*/React.createElement("feFlood", {
-    floodColor: "#FFF",
-    floodOpacity: "0.5"
-  }), /*#__PURE__*/React.createElement("feComposite", {
-    operator: "over",
-    in: "SourceGraphic"
-  }))), !isOutside && isRightAngle(angle) ? /*#__PURE__*/React.createElement(RightAngleSquare, {
-    start: [x1, y1],
-    vertex: [x2, y2],
-    end: [x3, y3]
-  }) : /*#__PURE__*/React.createElement(Arc, {
-    arc: arc
-  }), /*#__PURE__*/React.createElement(TextLabel, {
-    x: x3,
-    y: y3,
-    attach: y3 - centerY > 0 ? "s" : "n",
-    attachDistance: Math.abs(y3 - centerY) < 0.2 || vec.dist([x3, y3], centerPoint) < 0.3 ? 20 : 10
-  }, angleLabel, "\xB0"));
-};
-const Angle = ({
-  vertex,
-  coords,
-  showAngles,
-  allowReflexAngles,
-  range
-}) => {
-  // Check if the points are clockwise or not, depending on whether we allow reflex angles
-  const areClockwise = clockwise$1([...coords, vertex]);
-  const shouldReverseCoords = areClockwise && !allowReflexAngles;
-
-  // Reverse the coordinates accordingly to ensure the angle is calculated correctly
-  const clockwiseCoords = shouldReverseCoords ? coords : coords.reverse();
-
-  // Calculate the angles between the two points
-  const startAngle = getAngleFromVertex(clockwiseCoords[0], vertex);
-  const endAngle = getAngleFromVertex(clockwiseCoords[1], vertex);
-  const angle = (startAngle + 360 - endAngle) % 360;
-
-  // Check if the angle is reflexive
-  const isReflexive = angle > 180;
-
-  // Break out the necessary points for the arc calculation
-  const [centerX, centerY] = vertex;
-  const [point1, point2] = clockwiseCoords;
-  const [startX, startY] = point1;
-  const [endX, endY] = point2;
-  const a = vec.dist(vertex, point1);
-  const b = vec.dist(vertex, point2);
-
-  // Set the radius of the arc
-  const radius = 2;
-
-  // Calculate the end points of the arc
-  const y1 = centerY + (startY - centerY) / a * radius;
-  const x2 = centerX + (endX - centerX) / b * radius;
-  const x1 = centerX + (startX - centerX) / a * radius;
-  const y2 = centerY + (endY - centerY) / b * radius;
-
-  // Used to calculate the inside of the angle and to create square
-  const [x3, y3] = vec.add(vertex, vec.add(vec.sub([x1, y1], vertex), vec.sub([x2, y2], vertex)));
-
-  // Determine whether the arc should be drawn outside the angle
-  const isOutside = shouldDrawArcOutside([x3, y3], vertex, range, [[vertex, point1], [vertex, point2]]);
-
-  // Determine the flags for the arc
-  // If the angle is outside OR reflexive, we want to draw a large arc
-  // If the angle is outside AND reflexive, we want to sweep the arc
-  const largeArcFlag = isOutside || isReflexive ? 1 : 0;
-  const sweepFlag = isOutside && isReflexive ? 1 : 0;
-
-  // Create the SVG path for the arc
-  const arc = `M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${x2} ${y2}`;
-
-  // We only ever want to show whole angles
-  const angleLabel = parseFloat(angle.toFixed(0)); // Only want to show whole angles
-
-  // Calculate the text position based on the angle and whether we allow reflex angles
-  // Let's try the angle bisector method to find the midpoint of the arc
-  const [textX, textY] = calculateBisectorPoint(point1, point2, vertex, isReflexive, allowReflexAngles, radius);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
-    id: "background",
-    x: "-5%",
-    width: "110%",
-    y: "0%",
-    height: "100%"
-  }, /*#__PURE__*/React.createElement("feFlood", {
-    floodColor: "#FFF",
-    floodOpacity: "0.5"
-  }), /*#__PURE__*/React.createElement("feComposite", {
-    operator: "over",
-    in: "SourceGraphic"
-  }))), isRightAngle(angle) ? /*#__PURE__*/React.createElement(RightAngleSquare, {
-    start: [x1, y1],
-    vertex: [x2, y2],
-    end: [x3, y3],
-    className: "arc-right-angle"
-  }) : /*#__PURE__*/React.createElement(Arc, {
-    arc: arc,
-    className: "angle-arc"
-  }), showAngles && /*#__PURE__*/React.createElement(TextLabel, {
-    x: textX,
-    y: textY,
-    color: color.blue
-  }, angleLabel, "\xB0"));
-};
-
-/**
- * This is broken out into its own component so that it can be used for an early return
- * (see line 55 or https://github.com/Khan/perseus/blob/84bbd882b11d16871e1b813a0b901f3b903d5479/packages/perseus/src/widgets/interactive-graphs/graphs/components/angle.tsx#L53-L57)
- */
-const RightAngleSquare = ({
-  start: [x1, y1],
-  vertex: [x2, y2],
-  end: [x3, y3],
-  className
-}) => /*#__PURE__*/React.createElement(MafsCssTransformWrapper, null, /*#__PURE__*/React.createElement("path", {
-  d: `M ${x1} ${y1} L ${x3} ${y3} M ${x3} ${y3} L ${x2} ${y2}`,
-  strokeWidth: 0.02,
-  fill: "none",
-  className: className
-}));
-
-// We're conditionally adding the class name here so that we can style the arc differently
-// based on whether it's an angle or a polygon angle
-const Arc = ({
-  arc,
-  className
-}) => {
-  return /*#__PURE__*/React.createElement(MafsCssTransformWrapper, null, /*#__PURE__*/React.createElement("path", {
-    d: arc,
-    strokeWidth: 0.02,
-    fill: "none",
-    className: className
-  }));
-};
-const isRightPolygonAngle = angle => Math.abs(angle - Math.PI / 2) < 0.01;
-const isRightAngle = angle => Math.round(angle) === 90;
-
-/**
- * Determines if an angle is an inside (false) or outside (true) angle.
- * They way, we know to flip the `largeArc` and `sweepArc` flags.
- * Uses the priciple that a ray from a point inside a polygon will intersect
- * with an odd number of lines, while a ray from a point outside the polygon
- * will intersect with an even number of lines.
- * https://stackoverflow.com/questions/217578/how-can-i-determine-whether-a-2d-point-is-within-a-polygon
- */
-const shouldDrawArcOutside = (midpoint, vertex, range, polygonLines) => {
-  // Create a ray from the midpoint (inside angle) to the edge of the range
-  const rangeIntersectionPoint = getIntersectionOfRayWithBox(midpoint, vertex, range);
-  let lineIntersectionCount = 0;
-  polygonLines.forEach(line => segmentsIntersect([vertex, rangeIntersectionPoint], line) && lineIntersectionCount++);
-
-  // If the number of intersections is even, the angle is inside the polygon
-  return !isEven(lineIntersectionCount);
-};
-const isEven = n => n % 2 === 0;
-
-// This function calculates the bisector point of an angle formed by two points
-// and a vertex. It is used to position the angle label so that it is always
-// outside the arc at the exact midpoint of the angle.
-// Reflex angles make use of polar coordinates to determine the correct direction
-function calculateBisectorPoint(point1, point2, vertex, isReflex, allowReflex, arcRadius) {
-  const [originX, originY] = vertex;
-  const [x1, y1] = point1;
-  const [x2, y2] = point2;
-
-  // Convert the Cartesian Coordinates to vectors
-  const vectorA = [x1 - originX, y1 - originY];
-  const vectorB = [x2 - originX, y2 - originY];
-
-  // Calculate the average angle of the vectors
-  // so that we can point the bisector in the correct direction using polar coordinates
-  const angleA = Math.atan2(vectorA[1], vectorA[0]);
-  const angleB = Math.atan2(vectorB[1], vectorB[0]);
-
-  // Calculate the average of these two angles
-  let averageAngle = (angleA + angleB) / 2;
-  const angleRadians = Math.abs(angleA - angleB);
-
-  // Adjust the average angle to point in the correct direction
-  // and to account for reflex angles and a bug with 180 degrees
-  // that occurs due to our angleOffsetDegrees option in the graph
-  if (allowReflex) {
-    // If the resulting angles are less than 180 degrees,
-    // or if the user has flipped the points on the interactive element
-    // ensure that we have the correct direction for the reflex angle
-    if (angleRadians <= Math.PI && isReflex || angleB > angleA) {
-      averageAngle += Math.PI; // Add 180 degrees
-    }
-  } else {
-    // If the resulting angles are greater than 180 degrees, adjust
-    // to get the correct angle, as we already know that the angle is not reflexive
-    // This fixes a bug that occurs at 180 degrees due to our angleOffsetDegrees option in the graph
-    if (angleRadians > Math.PI) {
-      averageAngle -= Math.PI; // Subract 180 degrees
+  }, [props.graphState.focusedPointIndex, itemsRef]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("rect", {
+    style: {
+      fill: "rgba(0,0,0,0)",
+      cursor: "crosshair"
+    },
+    width: widthPx,
+    height: heightPx,
+    x: left,
+    y: top,
+    onClick: event => {
+      const elementRect = event.currentTarget.getBoundingClientRect();
+      const x = event.clientX - elementRect.x;
+      const y = event.clientY - elementRect.y;
+      const graphCoordinates = pixelsToVectors([[x, y]], graphConfig);
+      dispatch(actions.pointGraph.addPoint(graphCoordinates[0]));
     }
-  }
-
-  // Convert the average angle back to Cartesian coordinates
-  const sum = [Math.cos(averageAngle), Math.sin(averageAngle)];
-
-  // Calculate the magnitude of the sum to normalize it
-  const sumMagnitude = Math.sqrt(sum[0] ** 2 + sum[1] ** 2);
-  const bisectorDirection = [sum[0] / sumMagnitude, sum[1] / sumMagnitude];
-
-  // Calculate the initial distance of the bisector direction from the origin
-  const initialDistance = Math.sqrt(bisectorDirection[0] ** 2 + bisectorDirection[1] ** 2);
-
-  // Determine the minimum radius to ensure that the text is always outside the arc
-  const requiredDistance = arcRadius * 1.75;
-  let radius = requiredDistance / initialDistance;
-
-  // Apply radius only if the initial distance is less than required
-  if (initialDistance >= requiredDistance) {
-    radius = 1; // Use the unit vector as is
-  }
-
-  // Scale the bisector direction by the radius
-  const bisectorPoint = [bisectorDirection[0] * radius, bisectorDirection[1] * radius];
-
-  // Add the vertex to the bisector point to get the final position
-  // to ensure that the angle label moves with the interactive element
-  const scaledBisector = vec.add(bisectorPoint, vertex);
-  return scaledBisector;
-}
-
-const MovablePoint$1 = /*#__PURE__*/React.forwardRef((props, pointRef) => {
-  const {
-    snapStep
-  } = useGraphConfig();
-  const elementRef = useRef(null);
-  const {
-    point,
-    onMove = () => {},
-    onFocusChange = () => {},
-    onClick = () => {},
-    cursor,
-    color: color$1 = color.blue,
-    constrain = p => snap(snapStep, p)
-  } = props;
-  const {
-    dragging
-  } = useDraggable({
-    gestureTarget: elementRef,
-    point,
-    onMove,
-    constrainKeyboardMovement: constrain
-  });
-  return /*#__PURE__*/React.createElement(MovablePointView, {
+  }), props.graphState.coords.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
+    key: i,
+    point: point,
+    onMove: destination => dispatch(actions.pointGraph.movePoint(i, destination)),
     ref: ref => {
-      // Note: This handles the case where pointRef is either a
-      // function or a MutableRefObject. Mostly this is to satisfy
-      // the type system, the function branch seems to be the only
-      // one that occurs
-      if (typeof pointRef === "function") {
-        pointRef(ref);
-      } else if (pointRef !== null) {
-        pointRef.current = ref;
-      }
-
-      // This ref is for the useDraggable and is not passed up the
-      // chain
-      elementRef.current = ref;
+      itemsRef.current[i] = ref;
     },
-    point: point,
-    color: color$1,
-    dragging: dragging,
-    focusBehavior: {
-      type: "uncontrolled",
-      tabIndex: 0,
-      onFocusChange
+    onFocus: () => {
+      dispatch(actions.pointGraph.focusPoint(i));
     },
     onClick: () => {
-      var _elementRef$current;
-      onClick && onClick();
-      (_elementRef$current = elementRef.current) == null || _elementRef$current.focus();
-    },
-    cursor: cursor
+      dispatch(actions.pointGraph.clickPoint(i));
+    }
+  })));
+}
+function PointGraphDescription({
+  state
+}) {
+  // PointGraphDescription needs to `usePerseusI18n`, so it has to be a
+  // component rather than a function that simply returns a string.
+  const i18n = usePerseusI18n();
+  return describePointGraph(state, i18n);
+}
+
+// Exported for testing
+function describePointGraph(state, i18n) {
+  const {
+    strings,
+    locale
+  } = i18n;
+  if (state.coords.length === 0) {
+    return strings.srNoInteractiveElements;
+  }
+  const pointDescriptions = state.coords.map(([x, y]) => strings.srPointAtCoordinates({
+    x: srFormatNumber(x, locale),
+    y: srFormatNumber(y, locale)
+  }));
+  return strings.srInteractiveElements({
+    elements: pointDescriptions.join(", ")
   });
-});
+}
 
-const PolygonGraph = props => {
+function renderPolygonGraph(state, dispatch) {
+  return {
+    graph: /*#__PURE__*/React.createElement(PolygonGraph, {
+      graphState: state,
+      dispatch: dispatch
+    }),
+    interactiveElementsDescription: null
+  };
+}
+const LimitedPolygonGraph = props => {
   const [hovered, setHovered] = React.useState(false);
   // This is more so required for the re-rendering that occurs when state
   // updates; specifically with regard to line weighting and polygon focus.
@@ -33307,6 +33702,153 @@ const PolygonGraph = props => {
     }
   })));
 };
+
+// TODO(catjohnson): reduce redundancy between LimitedPolygonGraph and UnlimitedPolygonGraph
+// both components are vary similar, however more implementation is needed to be added before
+// it is clear what can and can't be shared between components.
+const UnlimitedPolygonGraph = props => {
+  const [hovered, setHovered] = React.useState(false);
+  // This is more so required for the re-rendering that occurs when state
+  // updates; specifically with regard to line weighting and polygon focus.
+  const [focusVisible, setFocusVisible] = React.useState(false);
+  const {
+    dispatch
+  } = props;
+  const {
+    coords,
+    showAngles,
+    showSides,
+    range,
+    snapStep,
+    snapTo = "grid"
+  } = props.graphState;
+  const graphConfig = useGraphConfig();
+
+  // TODO(catjohnson): Explore abstracting this code as it is similar to point.tsx
+  // and hopefully we can cut down ont the unlimited graph redundancy.
+  const {
+    range: [x, y],
+    disableKeyboardInteraction,
+    graphDimensionsInPixels
+  } = graphConfig;
+  const widthPx = graphDimensionsInPixels[0];
+  const heightPx = graphDimensionsInPixels[1];
+  const [[left, top]] = useTransformVectorsToPixels([x[0], y[1]]);
+  const pointRef = React.useRef([]);
+
+  // TODO(benchristel): can the default set of points be removed here? I don't
+  // think coords can be null.
+  const points = coords != null ? coords : [[0, 0]];
+  const polygonRef = React.useRef(null);
+  const dragReferencePoint = points[0];
+  const constrain = ["angles", "sides"].includes(snapTo) ? p => p : p => snap(snapStep, p);
+  const {
+    dragging
+  } = useDraggable({
+    gestureTarget: polygonRef,
+    point: dragReferencePoint,
+    onMove: newPoint => {
+      const delta = vec.sub(newPoint, dragReferencePoint);
+      dispatch(actions.polygon.moveAll(delta));
+    },
+    constrainKeyboardMovement: constrain
+  });
+  const lines = getLines(points);
+  React.useEffect(() => {
+    const focusedIndex = props.graphState.focusedPointIndex;
+    if (focusedIndex != null) {
+      var _pointRef$current$foc;
+      (_pointRef$current$foc = pointRef.current[focusedIndex]) == null || _pointRef$current$foc.focus();
+    }
+  }, [props.graphState.focusedPointIndex, pointRef]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("rect", {
+    style: {
+      fill: "rgba(0,0,0,0)",
+      cursor: "crosshair"
+    },
+    width: widthPx,
+    height: heightPx,
+    x: left,
+    y: top,
+    onClick: event => {
+      const elementRect = event.currentTarget.getBoundingClientRect();
+      const x = event.clientX - elementRect.x;
+      const y = event.clientY - elementRect.y;
+      const graphCoordinates = pixelsToVectors([[x, y]], graphConfig);
+      dispatch(actions.polygon.addPoint(graphCoordinates[0]));
+    }
+  }), /*#__PURE__*/React.createElement(Polygon, {
+    points: [...points],
+    color: "var(--movable-line-stroke-color)",
+    svgPolygonProps: {
+      strokeWidth: focusVisible ? "var(--movable-line-stroke-weight-active)" : "var(--movable-line-stroke-weight)",
+      style: {
+        fill: "transparent"
+      }
+    }
+  }), props.graphState.coords.map((point, i) => {
+    const pt1 = points.at(i - 1);
+    const pt2 = points[(i + 1) % points.length];
+    if (!pt1 || !pt2) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(PolygonAngle, {
+      key: "angle-" + i,
+      centerPoint: point,
+      endPoints: [pt1, pt2],
+      range: range,
+      polygonLines: lines,
+      showAngles: !!showAngles,
+      snapTo: snapTo
+    });
+  }), showSides && lines.map(([start, end], i) => {
+    const [x, y] = vec.midpoint(start, end);
+    const length = parseFloat(vec.dist(start, end).toFixed(snapTo === "sides" ? 0 : 1));
+    return /*#__PURE__*/React.createElement(TextLabel, {
+      key: "side-" + i,
+      x: x,
+      y: y
+    }, !Number.isInteger(length) && "≈ ", length);
+  }), /*#__PURE__*/React.createElement(Polygon, {
+    points: [...points],
+    color: "transparent",
+    svgPolygonProps: {
+      ref: polygonRef,
+      tabIndex: disableKeyboardInteraction ? -1 : 0,
+      strokeWidth: TARGET_SIZE,
+      style: {
+        cursor: dragging ? "grabbing" : "grab",
+        fill: hovered ? "var(--mafs-blue)" : "transparent"
+      },
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      // Required to remove line weighting when user clicks away
+      // from the focused polygon
+      onKeyDownCapture: () => {
+        setFocusVisible(hasFocusVisible(polygonRef.current));
+      },
+      // Required for lines to darken on focus
+      onFocus: () => setFocusVisible(hasFocusVisible(polygonRef.current)),
+      // Required for line weighting to update on blur. Without this,
+      // the user has to hover over the shape for it to update
+      onBlur: () => setFocusVisible(hasFocusVisible(polygonRef.current)),
+      className: "movable-polygon"
+    }
+  }), props.graphState.coords.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
+    key: i,
+    point: point,
+    onMove: destination => dispatch(actions.pointGraph.movePoint(i, destination)),
+    ref: ref => {
+      pointRef.current[i] = ref;
+    },
+    onFocus: () => {
+      dispatch(actions.pointGraph.focusPoint(i));
+    },
+    onClick: () => {
+      dispatch(actions.pointGraph.clickPoint(i));
+    }
+  })));
+};
 function getLines(points) {
   return points.map((point, i) => {
     const next = points[(i + 1) % points.length];
@@ -33327,190 +33869,20 @@ const hasFocusVisible = element => {
     return matches(":focus");
   }
 };
+const PolygonGraph = props => {
+  const numSides = props.graphState.numSides;
+  return numSides === "unlimited" ? UnlimitedPolygonGraph(props) : LimitedPolygonGraph(props);
+};
 
-function getGradableGraph(state, initialGraph) {
-  if (!state.hasBeenInteractedWith) {
-    return _extends({}, initialGraph);
-  }
-  if (initialGraph.type === "linear-system" && state.type === "linear-system") {
-    return _extends({}, initialGraph, {
-      coords: state.coords
-    });
-  }
-  if (state.type === "segment" && initialGraph.type === "segment") {
-    return _extends({}, initialGraph, {
-      coords: state.coords
-    });
-  }
-  if (state.type === "linear" && initialGraph.type === "linear") {
-    return _extends({}, initialGraph, {
-      coords: state.coords
-    });
-  }
-  if (state.type === "ray" && initialGraph.type === "ray") {
-    return _extends({}, initialGraph, {
-      coords: state.coords
-    });
-  }
-  if (state.type === "polygon" && initialGraph.type === "polygon") {
-    return _extends({}, initialGraph, {
-      coords: state.coords
-    });
-  }
-  if (state.type === "point" && initialGraph.type === "point") {
-    return _extends({}, initialGraph, {
-      coords: state.coords
-    });
-  }
-  if (state.type === "circle" && initialGraph.type === "circle") {
-    return _extends({}, initialGraph, {
-      center: state.center,
-      radius: getRadius(state)
-    });
-  }
-  if (state.type === "quadratic" && initialGraph.type === "quadratic") {
-    return _extends({}, initialGraph, {
-      coords: state.coords
-    });
-  }
-  if (state.type === "sinusoid" && initialGraph.type === "sinusoid") {
-    return _extends({}, initialGraph, {
-      coords: state.coords
-    });
-  }
-  if (state.type === "angle" && initialGraph.type === "angle") {
-    // We're going to reverse the coords for scoring if the angle is clockwise and
-    // we don't allow reflex angles. This is because the angle is largely defined
-    // by the order of the points in the coords array, and we want to maintain
-    // the same angle scoring with the legacy graph (which had a bug).
-    // (LEMS-2190): When we remove the legacy graph, move this logic to the scoring function.
-    const areClockwise = clockwise$1([state.coords[0], state.coords[2], state.coords[1]]);
-    const shouldReverseCoords = areClockwise && !state.allowReflexAngles;
-    const coords = shouldReverseCoords ? state.coords.slice().reverse() : state.coords;
-    return _extends({}, initialGraph, {
-      coords,
-      allowReflexAngles: state.allowReflexAngles
-    });
-  }
-  if (state.type === "none" && initialGraph.type === "none") {
-    return {
-      type: "none"
-    };
-  }
-  throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
-}
-
-/**
- * determine radius of a circle graph
- *
- * @param graph - the graph object containing the circle
- * @returns the radius of the circle
- */
-function getRadius(graph) {
-  const [centerX, centerY] = graph.center;
-  const [edgeX, edgeY] = graph.radiusPoint;
-  return Math.sqrt(Math.pow(edgeX - centerX, 2) + Math.pow(edgeY - centerY, 2));
-}
-
-function CircleGraph(props) {
-  const {
-    dispatch,
-    graphState
-  } = props;
-  const {
-    center,
-    radiusPoint
-  } = graphState;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MovableCircle, {
-    center: center,
-    radius: getRadius(graphState),
-    onMove: c => dispatch(actions.circle.moveCenter(c))
-  }), /*#__PURE__*/React.createElement(MovablePoint$1, {
-    point: radiusPoint,
-    cursor: "ew-resize",
-    onMove: newRadiusPoint => {
-      dispatch(actions.circle.moveRadiusPoint(newRadiusPoint));
-    }
-  }));
-}
-function MovableCircle(props) {
-  const {
-    center,
-    radius,
-    onMove
-  } = props;
-  const {
-    snapStep,
-    disableKeyboardInteraction
-  } = useGraphConfig();
-  const draggableRef = useRef(null);
-  const {
-    dragging
-  } = useDraggable({
-    gestureTarget: draggableRef,
-    point: center,
-    onMove,
-    constrainKeyboardMovement: p => snap(snapStep, p)
-  });
-  const [centerPx] = useTransformVectorsToPixels(center);
-  const [radiiPx] = useTransformDimensionsToPixels([radius, radius]);
-  return /*#__PURE__*/React.createElement("g", {
-    ref: draggableRef,
-    tabIndex: disableKeyboardInteraction ? -1 : 0,
-    className: `movable-circle ${dragging ? "movable-circle--dragging" : ""}`
-  }, /*#__PURE__*/React.createElement("ellipse", {
-    className: "focus-ring",
-    cx: centerPx[X],
-    cy: centerPx[Y],
-    rx: radiiPx[X] + 3,
-    ry: radiiPx[Y] + 3
-  }), /*#__PURE__*/React.createElement("ellipse", {
-    className: "circle",
-    cx: centerPx[X],
-    cy: centerPx[Y],
-    rx: radiiPx[X],
-    ry: radiiPx[Y]
-  }), /*#__PURE__*/React.createElement(DragHandle, {
-    center: center
-  }));
-}
-const dragHandleDimensions = [24, 14];
-const dragHandleDotPositions = crossProduct([-4.4, 0, 4.4], [-2.1, 2.1]);
-function DragHandle(props) {
-  const {
-    center
-  } = props;
-  const cornerRadius = Math.min(...dragHandleDimensions) / 2;
-  const [centerPx] = useTransformVectorsToPixels(center);
-  const topLeft = vec.sub(centerPx, vec.scale(dragHandleDimensions, 0.5));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("rect", {
-    className: "movable-circle-handle",
-    x: topLeft[X],
-    y: topLeft[Y],
-    width: dragHandleDimensions[X],
-    height: dragHandleDimensions[Y],
-    rx: cornerRadius,
-    ry: cornerRadius
-  }), dragHandleDotPositions.map(offsetPx => {
-    const [xPx, yPx] = vec.add(offsetPx, centerPx);
-    return /*#__PURE__*/React.createElement("circle", {
-      key: `circle-${xPx}-${yPx}`,
-      className: "movable-circle-handle-dot",
-      cx: xPx,
-      cy: yPx
-    });
-  }));
-}
-function crossProduct(as, bs) {
-  const result = [];
-  for (const a of as) {
-    for (const b of bs) {
-      result.push([a, b]);
-    }
-  }
-  return result;
+function renderQuadraticGraph(state, dispatch) {
+  return {
+    graph: /*#__PURE__*/React.createElement(QuadraticGraph, {
+      graphState: state,
+      dispatch: dispatch
+    }),
+    interactiveElementsDescription: null
+  };
 }
-
 function QuadraticGraph(props) {
   const {
     dispatch,
@@ -33565,6 +33937,74 @@ const getQuadraticCoefficients$1 = coords => {
   return [a, b, c];
 };
 
+function renderRayGraph(state, dispatch) {
+  return {
+    graph: /*#__PURE__*/React.createElement(RayGraph, {
+      graphState: state,
+      dispatch: dispatch
+    }),
+    interactiveElementsDescription: null
+  };
+}
+const RayGraph = props => {
+  const {
+    dispatch
+  } = props;
+  const {
+    coords: line
+  } = props.graphState;
+  const handleMoveLine = delta => dispatch(actions.ray.moveRay(delta));
+  const handleMovePoint = (pointIndex, newPoint) => dispatch(actions.ray.movePoint(pointIndex, newPoint));
+
+  // Ray graphs only have one line
+  return /*#__PURE__*/React.createElement(MovableLine, {
+    points: line,
+    onMoveLine: handleMoveLine,
+    onMovePoint: handleMovePoint,
+    extend: {
+      start: false,
+      end: true
+    }
+  });
+};
+
+function renderSegmentGraph(state, dispatch) {
+  return {
+    graph: /*#__PURE__*/React.createElement(SegmentGraph, {
+      graphState: state,
+      dispatch: dispatch
+    }),
+    interactiveElementsDescription: null
+  };
+}
+const SegmentGraph = props => {
+  const {
+    dispatch
+  } = props;
+  const {
+    coords: segments
+  } = props.graphState;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, segments == null ? void 0 : segments.map((segment, i) => /*#__PURE__*/React.createElement(MovableLine, {
+    key: i,
+    points: segment,
+    onMoveLine: delta => {
+      dispatch(actions.segment.moveLine(i, delta));
+    },
+    onMovePoint: (endpointIndex, destination) => {
+      dispatch(actions.segment.movePointInFigure(i, endpointIndex, destination));
+    }
+  })));
+};
+
+function renderSinusoidGraph(state, dispatch) {
+  return {
+    graph: /*#__PURE__*/React.createElement(SinusoidGraph, {
+      graphState: state,
+      dispatch: dispatch
+    }),
+    interactiveElementsDescription: null
+  };
+}
 function SinusoidGraph(props) {
   const {
     dispatch,
@@ -33640,203 +34080,6 @@ const getSinusoidCoefficients$1 = coords => {
   };
 };
 
-function AngleGraph(props) {
-  const {
-    dispatch,
-    graphState
-  } = props;
-  const {
-    graphDimensionsInPixels
-  } = useGraphConfig();
-  const {
-    coords,
-    showAngles,
-    range,
-    allowReflexAngles,
-    snapDegrees
-  } = graphState;
-
-  // Break the coords into the two end points and the center point
-  const endPoints = [coords[0], coords[2]];
-  const centerPoint = coords[1];
-
-  // Convert the vectors to pixels for rendering the svg lines
-  const angleLines = [[centerPoint, endPoints[0]], [centerPoint, endPoints[1]]];
-  const linePixelCoords = [useTransformVectorsToPixels(centerPoint, endPoints[0]), useTransformVectorsToPixels(centerPoint, endPoints[1])];
-
-  // Create the SVG lines for the angle
-  const svgLines = linePixelCoords.map(([startPtPx, endPtPx], i) => {
-    const trimmedRange = trimRange(range, graphDimensionsInPixels);
-    const endExtend = getIntersectionOfRayWithBox(angleLines[i][0], angleLines[i][1], trimmedRange);
-    return /*#__PURE__*/React.createElement("g", {
-      key: `line-${i}`
-    }, /*#__PURE__*/React.createElement(SVGLine, {
-      start: startPtPx,
-      end: endPtPx,
-      style: {
-        stroke: "var(--movable-line-stroke-color)",
-        strokeWidth: "var(--movable-line-stroke-weight)"
-      }
-    }), /*#__PURE__*/React.createElement(Vector, {
-      tail: angleLines[i][1],
-      tip: endExtend,
-      color: "var(--movable-line-stroke-color)"
-    }));
-  });
-
-  // Create the angle indicator parameters
-  const angleParams = {
-    vertex: centerPoint,
-    coords: endPoints,
-    allowReflexAngles: allowReflexAngles || false,
-    // Whether to allow reflex angles or not
-    snapDegrees: snapDegrees || 1,
-    // The multiple of degrees to snap to
-    range: range,
-    showAngles: showAngles || false // Whether to show the angle or not
-  };
-
-  // Render the lines, angle, and then movable points
-  return /*#__PURE__*/React.createElement(React.Fragment, null, svgLines, /*#__PURE__*/React.createElement(Angle, angleParams), /*#__PURE__*/React.createElement(MovablePoint$1, {
-    point: coords[1],
-    constrain: p => p,
-    onMove: destination => dispatch(actions.angle.movePoint(1, destination))
-  }), /*#__PURE__*/React.createElement(MovablePoint$1, {
-    point: coords[0],
-    constrain: getAngleSideConstraint(coords[0], coords[1], snapDegrees || 1),
-    onMove: destination => dispatch(actions.angle.movePoint(0, destination))
-  }), /*#__PURE__*/React.createElement(MovablePoint$1, {
-    point: coords[2],
-    constrain: getAngleSideConstraint(coords[2], coords[1], snapDegrees || 1),
-    onMove: destination => dispatch(actions.angle.movePoint(2, destination))
-  }));
-}
-const positiveX = [1, 0];
-const negativeX = [-1, 0];
-const positiveY = [0, 1];
-const negativeY = [0, -1];
-function getAngleSideConstraint(sidePoint, vertex, snapDegrees) {
-  var _findIntersectionOfRa, _findIntersectionOfRa2, _findIntersectionOfRa3, _findIntersectionOfRa4;
-  const currentAngle = calculateAngleInDegrees(vec.sub(sidePoint, vertex));
-
-  // Find the rays that start at the current point and point up, down, left
-  // and right.
-  const leftRay = [sidePoint, vec.add(sidePoint, negativeX)];
-  const rightRay = [sidePoint, vec.add(sidePoint, positiveX)];
-  const upRay = [sidePoint, vec.add(sidePoint, positiveY)];
-  const downRay = [sidePoint, vec.add(sidePoint, negativeY)];
-
-  // find the angles that lie one snap step clockwise and counter-clockwise
-  // from the current angle. These are the angles to which the side can be
-  // moved.
-  const oneStepCounterClockwise = currentAngle + snapDegrees;
-  const oneStepClockwise = currentAngle - snapDegrees;
-
-  // find the rays that start from the vertex and point in the direction of
-  // the angles we just computed.
-  const counterClockwiseRay = [vertex, vec.add(vertex, polar(1, oneStepCounterClockwise))];
-  const clockwiseRay = [vertex, vec.add(vertex, polar(1, oneStepClockwise))];
-
-  // find the intersections of those rays with the horizontal and vertical
-  // rays extending from the sidePoint. These intersections are the points to
-  // which sidePoint can move that will result in a rotation of `snapDegrees`.
-  const left = (_findIntersectionOfRa = findIntersectionOfRays(leftRay, counterClockwiseRay)) != null ? _findIntersectionOfRa : findIntersectionOfRays(leftRay, clockwiseRay);
-  const right = (_findIntersectionOfRa2 = findIntersectionOfRays(rightRay, counterClockwiseRay)) != null ? _findIntersectionOfRa2 : findIntersectionOfRays(rightRay, clockwiseRay);
-  const up = (_findIntersectionOfRa3 = findIntersectionOfRays(upRay, counterClockwiseRay)) != null ? _findIntersectionOfRa3 : findIntersectionOfRays(upRay, clockwiseRay);
-  const down = (_findIntersectionOfRa4 = findIntersectionOfRays(downRay, counterClockwiseRay)) != null ? _findIntersectionOfRa4 : findIntersectionOfRays(downRay, clockwiseRay);
-  return {
-    up: up != null ? up : sidePoint,
-    down: down != null ? down : sidePoint,
-    left: left != null ? left : sidePoint,
-    right: right != null ? right : sidePoint
-  };
-}
-
-function LimitedPointGraph(props) {
-  const {
-    dispatch
-  } = props;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, props.graphState.coords.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
-    key: i,
-    point: point,
-    onMove: destination => dispatch(actions.pointGraph.movePoint(i, destination))
-  })));
-}
-function UnlimitedPointGraph(props) {
-  const {
-    dispatch
-  } = props;
-  const graphState = useGraphConfig();
-  const {
-    range: [[minX, maxX], [minY, maxY]]
-  } = graphState;
-  const width = maxX - minX;
-  const height = maxY - minY;
-  const [[widthPx, heightPx]] = useTransformDimensionsToPixels([width, height]);
-  const [[left, top]] = useTransformVectorsToPixels([minX, maxY]);
-  const itemsRef = React.useRef([]);
-  React.useEffect(() => {
-    const focusedIndex = props.graphState.focusedPointIndex;
-    if (focusedIndex != null) {
-      var _itemsRef$current$foc;
-      (_itemsRef$current$foc = itemsRef.current[focusedIndex]) == null || _itemsRef$current$foc.focus();
-    }
-  }, [props.graphState.focusedPointIndex, itemsRef]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("rect", {
-    style: {
-      fill: "rgba(0,0,0,0)",
-      cursor: "crosshair"
-    },
-    width: widthPx,
-    height: heightPx,
-    x: left,
-    y: top,
-    onClick: event => {
-      const elementRect = event.currentTarget.getBoundingClientRect();
-      const x = event.clientX - elementRect.x;
-      const y = event.clientY - elementRect.y;
-      const graphCoordinates = pixelsToVectors([[x, y]], graphState);
-      dispatch(actions.pointGraph.addPoint(graphCoordinates[0]));
-    }
-  }), props.graphState.coords.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
-    key: i,
-    point: point,
-    onMove: destination => dispatch(actions.pointGraph.movePoint(i, destination)),
-    ref: ref => {
-      itemsRef.current[i] = ref;
-    },
-    onFocusChange: (event, isFocused) => {
-      if (isFocused) {
-        dispatch(actions.pointGraph.focusPoint(i));
-      } else {
-        var _event$relatedTarget, _event$relatedTarget2;
-        if (((_event$relatedTarget = event.relatedTarget) == null ? void 0 : _event$relatedTarget.id) === REMOVE_BUTTON_ID) {
-          return;
-          // This is an optimization: If the next target
-          // is a point then don't blur because it casues
-          // the remove button to get taken off the page
-          // and then put back on The new point will
-          // receive focus and set the correct state in
-          // the reducer
-        } else if ((_event$relatedTarget2 = event.relatedTarget) != null && _event$relatedTarget2.classList.contains("movable-point")) {
-          return;
-        }
-        dispatch(actions.pointGraph.blurPoint());
-      }
-    },
-    onClick: () => {
-      dispatch(actions.pointGraph.clickPoint(i));
-    }
-  })));
-}
-function PointGraph(props) {
-  const numPoints = props.graphState.numPoints;
-  if (numPoints === "unlimited") {
-    return UnlimitedPointGraph(props);
-  }
-  return LimitedPointGraph(props);
-}
-
 const protractorImage = "https://ka-perseus-graphie.s3.amazonaws.com/e9d032f2ab8b95979f674fbfa67056442ba1ff6a.png";
 
 // The vector from the center of the protractor to the top left corner of the
@@ -33984,7 +34227,6 @@ function useDraggablePx(args) {
  * - Protractor
  * - Interactive Graph Elements
  */
-const REMOVE_BUTTON_ID = "perseus_mafs_remove_button";
 const MafsGraph = props => {
   var _props$flags;
   const {
@@ -34002,6 +34244,7 @@ const MafsGraph = props => {
   const tickStep = props.step;
   const uniqueId = React.useId();
   const descriptionId = `interactive-graph-description-${uniqueId}`;
+  const interactiveElementsDescriptionId = `interactive-graph-interactive-elements-description-${uniqueId}`;
   const graphRef = React.useRef(null);
   const {
     analytics
@@ -34025,6 +34268,7 @@ const MafsGraph = props => {
   const {
     strings
   } = usePerseusI18n();
+  const interactionPrompt = isUnlimitedGraphState(state) && state.showKeyboardInteractionInvitation;
   useOnMountEffect(() => {
     analytics.onAnalyticsEvent({
       type: "perseus:interactive-graph-widget:rendered",
@@ -34035,6 +34279,13 @@ const MafsGraph = props => {
       }
     });
   });
+  const {
+    graph,
+    interactiveElementsDescription
+  } = renderGraphElements({
+    state,
+    dispatch
+  });
   return /*#__PURE__*/React.createElement(GraphConfigContext.Provider, {
     value: {
       range: state.range,
@@ -34066,7 +34317,7 @@ const MafsGraph = props => {
       handleKeyboardEvent(event, state, dispatch);
     },
     "aria-label": fullGraphAriaLabel,
-    "aria-describedby": fullGraphAriaDescription ? descriptionId : undefined,
+    "aria-describedby": describedByIds(fullGraphAriaDescription && descriptionId, interactiveElementsDescription && interactiveElementsDescriptionId),
     ref: graphRef,
     tabIndex: 0,
     onFocus: event => {
@@ -34078,12 +34329,12 @@ const MafsGraph = props => {
   }, fullGraphAriaDescription && /*#__PURE__*/React.createElement(View, {
     id: descriptionId,
     tabIndex: -1,
-    style: {
-      width: 0,
-      height: 0,
-      overflow: "hidden"
-    }
-  }, fullGraphAriaDescription), /*#__PURE__*/React.createElement(LegacyGrid, {
+    className: "mafs-sr-only"
+  }, fullGraphAriaDescription), interactiveElementsDescription && /*#__PURE__*/React.createElement(View, {
+    id: interactiveElementsDescriptionId,
+    tabIndex: -1,
+    className: "mafs-sr-only"
+  }, interactiveElementsDescription), /*#__PURE__*/React.createElement(LegacyGrid, {
     box: props.box,
     backgroundImage: props.backgroundImage
   }), /*#__PURE__*/React.createElement(View, {
@@ -34134,10 +34385,7 @@ const MafsGraph = props => {
     zoom: false,
     width: width,
     height: height
-  }, /*#__PURE__*/React.createElement("svg", nestedSVGAttributes, props.showProtractor && /*#__PURE__*/React.createElement(Protractor, null), renderGraph({
-    state,
-    dispatch
-  }))))), state.type === "point" && state.showKeyboardInteractionInvitation && /*#__PURE__*/React.createElement(View, {
+  }, /*#__PURE__*/React.createElement("svg", nestedSVGAttributes, props.showProtractor && /*#__PURE__*/React.createElement(Protractor, null), graph)))), interactionPrompt && /*#__PURE__*/React.createElement(View, {
     style: {
       textAlign: "center",
       backgroundColor: "white",
@@ -34154,7 +34402,7 @@ const MafsGraph = props => {
     state,
     dispatch,
     width,
-    strings
+    perseusStrings: strings
   })));
 };
 const renderPointGraphControls = props => {
@@ -34164,7 +34412,7 @@ const renderPointGraphControls = props => {
     focusedPointIndex
   } = props.state;
   const {
-    strings
+    perseusStrings
   } = props;
   const shouldShowRemoveButton = showRemovePointButton && focusedPointIndex !== null;
   return /*#__PURE__*/React.createElement(View, {
@@ -34182,7 +34430,7 @@ const renderPointGraphControls = props => {
     onClick: () => {
       props.dispatch(actions.pointGraph.addPoint([0, 0]));
     }
-  }, strings.addPoint), interactionMode === "mouse" && /*#__PURE__*/React.createElement(Button, {
+  }, perseusStrings.addPoint), interactionMode === "mouse" && /*#__PURE__*/React.createElement(Button, {
     id: REMOVE_BUTTON_ID,
     kind: "secondary",
     color: "destructive"
@@ -34195,17 +34443,66 @@ const renderPointGraphControls = props => {
       marginLeft: "20px",
       visibility: shouldShowRemoveButton ? "visible" : "hidden"
     },
-    onClick: event => {
+    onClick: _event => {
       props.dispatch(actions.pointGraph.removePoint(props.state.focusedPointIndex));
     }
-  }, strings.removePoint));
+  }, perseusStrings.removePoint));
+};
+
+/**
+ * TODO(catjohnson): The polygon controls will be vastly different from the point controls.
+ * Will be keeping this function as is for the time being, even if it's a copy of the point graph
+ * controls.
+ */
+const renderPolygonGraphControls = props => {
+  const {
+    interactionMode,
+    showRemovePointButton,
+    focusedPointIndex
+  } = props.state;
+  const {
+    perseusStrings
+  } = props;
+  const shouldShowRemoveButton = showRemovePointButton && focusedPointIndex !== null;
+  return /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: "row",
+      width: props.width
+    }
+  }, interactionMode === "keyboard" && /*#__PURE__*/React.createElement(Button, {
+    kind: "secondary",
+    style: {
+      width: "100%",
+      marginLeft: "20px"
+    },
+    tabIndex: 0,
+    onClick: () => {
+      props.dispatch(actions.polygon.addPoint([0, 0]));
+    }
+  }, perseusStrings.addPoint), interactionMode === "mouse" && /*#__PURE__*/React.createElement(Button, {
+    id: REMOVE_BUTTON_ID,
+    kind: "secondary",
+    color: "destructive"
+    // This button is meant to be interacted with by the mouse only
+    // Never allow learners to tab to this button
+    ,
+    tabIndex: -1,
+    style: {
+      width: "100%",
+      marginLeft: "20px",
+      visibility: shouldShowRemoveButton ? "visible" : "hidden"
+    },
+    onClick: _event => {
+      props.dispatch(actions.polygon.removePoint(props.state.focusedPointIndex));
+    }
+  }, perseusStrings.removePoint));
 };
 const renderGraphControls = props => {
   const {
     state,
     dispatch,
     width,
-    strings
+    perseusStrings
   } = props;
   const {
     type
@@ -34217,7 +34514,17 @@ const renderGraphControls = props => {
           state,
           dispatch,
           width,
-          strings
+          perseusStrings
+        });
+      }
+      return null;
+    case "polygon":
+      if (state.numSides === "unlimited") {
+        return renderPolygonGraphControls({
+          state,
+          dispatch,
+          width,
+          perseusStrings
         });
       }
       return null;
@@ -34226,21 +34533,29 @@ const renderGraphControls = props => {
   }
 };
 function handleFocusEvent(event, state, dispatch) {
-  if (state.type === "point" && state.numPoints === "unlimited") {
+  if (isUnlimitedGraphState(state)) {
     if (event.target.classList.contains("mafs-graph") && state.interactionMode === "mouse") {
       dispatch(actions.global.changeKeyboardInvitationVisibility(true));
     }
   }
 }
-function handleBlurEvent(event, state, dispatch) {
-  if (state.type === "point" && state.numPoints === "unlimited") {
+function handleBlurEvent(_event, state, dispatch) {
+  if (isUnlimitedGraphState(state)) {
     dispatch(actions.global.changeKeyboardInvitationVisibility(false));
   }
 }
 function handleKeyboardEvent(event, state, dispatch) {
-  if (state.type === "point" && state.numPoints === "unlimited") {
+  if (isUnlimitedGraphState(state)) {
     if (event.key === "Backspace") {
-      dispatch(actions.global.deleteIntent());
+      var _document$activeEleme;
+      // TODO(benchristel): Checking classList here is a hack to prevent
+      // points from being deleted if the user presses the backspace key
+      // while the whole graph is focused. Instead of doing this, we
+      // should move the keyboard event handler to the movable point
+      // handle element.
+      if ((_document$activeEleme = document.activeElement) != null && _document$activeEleme.classList.contains("movable-point__focusable-handle")) {
+        dispatch(actions.global.deleteIntent());
+      }
 
       // After removing a point blur
       // It would be nice if this could focus on the graph but doing so
@@ -34303,7 +34618,7 @@ const calculateNestedSVGCoords = (range, width, height) => {
     viewboxY
   };
 };
-const renderGraph = props => {
+const renderGraphElements = props => {
   const {
     state,
     dispatch
@@ -34313,62 +34628,41 @@ const renderGraph = props => {
   } = state;
   switch (type) {
     case "angle":
-      return /*#__PURE__*/React.createElement(AngleGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
+      return renderAngleGraph(state, dispatch);
     case "segment":
-      return /*#__PURE__*/React.createElement(SegmentGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
+      return renderSegmentGraph(state, dispatch);
     case "linear-system":
-      return /*#__PURE__*/React.createElement(LinearSystemGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
+      return renderLinearSystemGraph(state, dispatch);
     case "linear":
-      return /*#__PURE__*/React.createElement(LinearGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
+      return renderLinearGraph(state, dispatch);
     case "ray":
-      return /*#__PURE__*/React.createElement(RayGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
+      return renderRayGraph(state, dispatch);
     case "polygon":
-      return /*#__PURE__*/React.createElement(PolygonGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
+      return renderPolygonGraph(state, dispatch);
     case "point":
-      return /*#__PURE__*/React.createElement(PointGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
+      return renderPointGraph(state, dispatch);
     case "circle":
-      return /*#__PURE__*/React.createElement(CircleGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
+      return renderCircleGraph(state, dispatch);
     case "quadratic":
-      return /*#__PURE__*/React.createElement(QuadraticGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
+      return renderQuadraticGraph(state, dispatch);
     case "sinusoid":
-      return /*#__PURE__*/React.createElement(SinusoidGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
+      return renderSinusoidGraph(state, dispatch);
     case "none":
-      return null;
+      return {
+        graph: null,
+        interactiveElementsDescription: null
+      };
     default:
       throw new UnreachableCaseError(type);
   }
 };
 
+// Returns a space-separated string like "foo bar" given several optional
+// string IDs. If all args are falsy, returns undefined.
+function describedByIds(...args) {
+  return args.filter(Boolean).join(" ") || undefined;
+}
+
 // Converts the state of a StatefulMafsGraph back to the format used to
 // represent graph state in the widget JSON.
 //
@@ -34483,10 +34777,15 @@ function initializeGraphState(params) {
     case "polygon":
       return _extends({}, shared, {
         type: "polygon",
+        numSides: graph.numSides || 0,
         showAngles: Boolean(graph.showAngles),
         showSides: Boolean(graph.showSides),
         coords: getPolygonCoords(graph, range, step),
-        snapTo: (_graph$snapTo = graph.snapTo) != null ? _graph$snapTo : "grid"
+        snapTo: (_graph$snapTo = graph.snapTo) != null ? _graph$snapTo : "grid",
+        focusedPointIndex: null,
+        showRemovePointButton: false,
+        interactionMode: "mouse",
+        showKeyboardInteractionInvitation: false
       });
     case "point":
       return _extends({}, shared, {
@@ -34776,10 +35075,9 @@ function interactiveGraphReducer(state, action) {
 }
 function doDeleteIntent(state, action) {
   // For unlimited point graphs
-  if (state.type === "point" && state.numPoints === "unlimited") {
-    // if there's a focused point
+  if (isUnlimitedGraphState(state)) {
+    // Remove the last point that was focused, if any
     if (state.focusedPointIndex !== null) {
-      // Remove the focused focus
       return doRemovePoint(state, actions.pointGraph.removePoint(state.focusedPointIndex));
     }
   }
@@ -34787,6 +35085,7 @@ function doDeleteIntent(state, action) {
 }
 function doFocusPoint(state, action) {
   switch (state.type) {
+    case "polygon":
     case "point":
       return _extends({}, state, {
         focusedPointIndex: action.index
@@ -34797,6 +35096,7 @@ function doFocusPoint(state, action) {
 }
 function doBlurPoint(state, action) {
   switch (state.type) {
+    case "polygon":
     case "point":
       const nextState = _extends({}, state, {
         showRemovePointButton: false
@@ -34810,10 +35110,7 @@ function doBlurPoint(state, action) {
   }
 }
 function doClickPoint(state, action) {
-  if (state.type !== "point") {
-    return state;
-  }
-  if (state.numPoints === "unlimited") {
+  if (isUnlimitedGraphState(state)) {
     return _extends({}, state, {
       focusedPointIndex: action.index,
       showRemovePointButton: true
@@ -34822,10 +35119,7 @@ function doClickPoint(state, action) {
   return state;
 }
 function doChangeInteractionMode(state, action) {
-  if (state.type !== "point") {
-    return state;
-  }
-  if (state.numPoints === "unlimited") {
+  if (isUnlimitedGraphState(state)) {
     const nextKeyboardInvitation = action.mode === "keyboard" ? false : state.showKeyboardInteractionInvitation;
     return _extends({}, state, {
       interactionMode: action.mode,
@@ -34835,10 +35129,7 @@ function doChangeInteractionMode(state, action) {
   return state;
 }
 function doChangeKeyboardInvitationVisibility(state, action) {
-  if (state.type !== "point") {
-    return state;
-  }
-  if (state.numPoints === "unlimited") {
+  if (isUnlimitedGraphState(state)) {
     return _extends({}, state, {
       showKeyboardInteractionInvitation: action.shouldShow,
       hasBeenInteractedWith: true
@@ -35169,7 +35460,7 @@ function doChangeRange(state, action) {
   });
 }
 function doAddPoint(state, action) {
-  if (state.type !== "point") {
+  if (!isUnlimitedGraphState(state)) {
     return state;
   }
   const {
@@ -35193,7 +35484,7 @@ function doAddPoint(state, action) {
   });
 }
 function doRemovePoint(state, action) {
-  if (state.type !== "point") {
+  if (!isUnlimitedGraphState(state)) {
     return state;
   }
   let nextFocusedPointIndex;
@@ -37499,9 +37790,6 @@ function shouldUseMafs(mafsFlags, graph) {
       return Boolean(mafsFlags["point"]);
     case "polygon":
       if (graph.numSides === UNLIMITED) {
-        // TODO(benchristel): add a feature flag for the "unlimited"
-        // case once we've implemented polygon graphs with unlimited
-        // sides
         return Boolean(mafsFlags["unlimited-polygon"]);
       }
       return Boolean(mafsFlags["polygon"]);
@@ -37519,974 +37807,15 @@ var InteractiveGraph$1 = {
   validator: interactiveGraphValidator
 };
 
-const black = "#000000";
-const grayDarker = "#333333";
-const grayDark = "#555555";
-const gray = "#999999";
-const grayLight = "#AAAAAA";
-const grayLighter = "#DDDDDD";
-const white = "#FFFFFF";
-const blue = "#005A88";
-const blueDark = "#2C3747";
-const green = "#76A005";
-const red = "#CF5044";
-const yellow = "#FFC40D";
-const orange = "#BF4F04";
-const pink = "#C3325F";
-const purple = "#7A43B6";
-const bodyBackground = "#FFFFFF";
-const textColor = "#444444";
-const linkColor = "#005987";
-const linkColorHover = "#678D00";
-const sansFontFamily = "'Helvetica Neue',Helvetica,Arial,sans-serif";
-const serifFontFamily = "Georgia,'Times New Roman',Times,serif";
-const monoFontFamily = "Monaco,Menlo,Consolas,'Courier New',monospace";
-const baseFontSize = "14px";
-const baseFontFamily = "inherit";
-const baseLineHeight = "20px";
-const altFontFamily = "Georgia,'Times New Roman',Times,serif";
-const headingsFontFamily = "inherit";
-const headingsFontWeight = "bold";
-const headingsColor = "inherit";
-const fontSizeLarge = "18px";
-const fontSizeSmall = "12px";
-const fontSizeMini = "10.5px";
-const paddingLarge = "11px 19px";
-const paddingSmall = "2px 10px";
-const paddingMini = "0 6px";
-const baseBorderRadius = "4px";
-const borderRadiusLarge = "6px";
-const borderRadiusSmall = "3px";
-const tableBackground = "#000000";
-const tableBackgroundAccent = "#F9F9F9";
-const tableBackgroundHover = "#F5F5F5";
-const tableBorder = "#DDDDDD";
-const btnBackground = "#FFFFFF";
-const btnBackgroundHighlight = "rgb(230, 230, 230)";
-const btnBorder = "#CCCCCC";
-const btnPrimaryBackground = "#0088CC";
-const btnPrimaryBackgroundHighlight = "rgb(0, 68, 204)";
-const btnInfoBackground = "#5BC0DE";
-const btnInfoBackgroundHighlight = "#2F96B4";
-const btnSuccessBackground = "#62C462";
-const btnSuccessBackgroundHighlight = "#51A351";
-const btnWarningBackground = "rgb(251, 180, 81)";
-const btnWarningBackgroundHighlight = "#F89406";
-const btnDangerBackground = "#EE5F5B";
-const btnDangerBackgroundHighlight = "#BD362F";
-const btnInverseBackground = "#444444";
-const btnInverseBackgroundHighlight = "#222222";
-const inputBackground = "#FFFFFF";
-const inputBorder = "#CCCCCC";
-const inputBorderRadius = "4px";
-const inputDisabledBackground = "#EEEEEE";
-const formActionsBackground = "#F5F5F5";
-const inputHeight = "30px";
-const dropdownBackground = "#FFFFFF";
-const dropdownBorder = "rgba(0, 0, 0, 0.2)";
-const dropdownDividerTop = "#E5E5E5";
-const dropdownDividerBottom = "#FFFFFF";
-const dropdownLinkColor = "#333333";
-const dropdownLinkColorHover = "#FFFFFF";
-const dropdownLinkColorActive = "#FFFFFF";
-const dropdownLinkBackgroundActive = "#0088CC";
-const dropdownLinkBackgroundHover = "#0088CC";
-const zindexDropdown = 1000;
-const zindexPopover = 1010;
-const zindexTooltip = 1030;
-const zindexFixedNavbar = 1030;
-const zindexHeader = 1060;
-const zindexModalBackdrop = 1070;
-const zindexModal = 1080;
-const zindexAboveModal = 1090;
-const iconSpritePath = "../img/glyphicons-halflings.png";
-const iconWhiteSpritePath = "../img/glyphicons-halflings-white.png";
-const placeholderText = "#999999";
-const hrBorder = "#EEEEEE";
-const horizontalComponentOffset = "180px";
-const wellBackground = "#F5F5F5";
-const navbarCollapseWidth = "979px";
-const navbarCollapseDesktopWidth = "980px";
-const navbarHeight = "40px";
-const navbarBackgroundHighlight = "#FFFFFF";
-const navbarBackground = "rgb(242, 242, 242)";
-const navbarBorder = "rgb(212, 212, 212)";
-const navbarText = "#777777";
-const navbarLinkColor = "#777777";
-const navbarLinkColorHover = "#333333";
-const navbarLinkColorActive = "#555555";
-const navbarLinkBackgroundHover = "#000000";
-const navbarLinkBackgroundActive = "rgb(230, 230, 230)";
-const navbarBrandColor = "#777777";
-const navbarInverseBackground = "#111111";
-const navbarInverseBackgroundHighlight = "#222222";
-const navbarInverseBorder = "#252525";
-const navbarInverseText = "#999999";
-const navbarInverseLinkColor = "#999999";
-const navbarInverseLinkColorHover = "#FFFFFF";
-const navbarInverseLinkColorActive = "#FFFFFF";
-const navbarInverseLinkBackgroundHover = "#000000";
-const navbarInverseLinkBackgroundActive = "#111111";
-const navbarInverseSearchBackground = "rgb(82, 82, 82)";
-const navbarInverseSearchBackgroundFocus = "#FFFFFF";
-const navbarInverseSearchBorder = "#111111";
-const navbarInverseSearchPlaceholderColor = "#CCCCCC";
-const navbarInverseBrandColor = "#999999";
-const paginationBackground = "#FFFFFF";
-const paginationBorder = "#DDDDDD";
-const paginationActiveBackground = "#F5F5F5";
-const heroUnitBackground = "#EEEEEE";
-const heroUnitHeadingColor = "inherit";
-const heroUnitLeadColor = "inherit";
-const warningText = "#C09853";
-const warningBackground = "#FCF8E3";
-const warningBorder = "rgb(251, 239, 213)";
-const errorText = "#B94A48";
-const errorBackground = "#F2DEDE";
-const errorBorder = "rgb(238, 211, 215)";
-const successText = "#468847";
-const successBackground = "#DFF0D8";
-const successBorder = "rgb(212, 232, 197)";
-const infoText = "#4A7C17";
-const infoBackground = "#EDF2DF";
-const infoBorder = "rgb(228, 232, 197)";
-const tooltipColor = "#FFFFFF";
-const tooltipBackground = "#000000";
-const tooltipArrowWidth = "5px";
-const tooltipArrowColor = "#000000";
-const popoverBackground = "#FFFFFF";
-const popoverArrowWidth = "10px";
-const popoverArrowColor = "#FFFFFF";
-const popoverTitleBackground = "rgb(247, 247, 247)";
-const popoverArrowOuterWidth = "11px";
-const popoverArrowOuterColor = "rgba(0, 0, 0, 0.25)";
-const gridColumns = "12";
-const gridColumnWidth = "60px";
-const gridGutterWidth = "20px";
-const gridRowWidth = "940px";
-const gridColumnWidth1200 = "70px";
-const gridGutterWidth1200 = "30px";
-const gridRowWidth1200 = "1170px";
-const gridColumnWidth768 = "42px";
-const gridGutterWidth768 = "20px";
-const gridRowWidth768 = "724px";
-const fluidGridColumnWidth = "6.382978723404255%";
-const fluidGridGutterWidth = "2.127659574468085%";
-const fluidGridColumnWidth1200 = "5.982905982905983%";
-const fluidGridGutterWidth1200 = "2.564102564102564%";
-const fluidGridColumnWidth768 = "5.801104972375691%";
-const fluidGridGutterWidth768 = "2.7624309392265194%";
-const kaGreen = "#71B307";
-const kaGreenLight = "#BED47A";
-const kaBlue = "#314453";
-const kaBlueLight = "#4D6779";
-const grayExtraDark = "#111111";
-const grayExtraLight = "#EEEEEE";
-const graySuperLight = "#F7F7F7";
-const whiteDark = "#FDFDFD";
-const dark = "#21242C";
-const blueDarkUnsaturated = "#3B414E";
-const blueDarkSaturated = "#1F3043";
-const blueLight = "#A9C0D1";
-const greenLight = "#C6D1AD";
-const greenDark = "#356700";
-const yellowGreen = "#9DB63B";
-const okGreen = "#A7CF5B";
-const alertRed = "#C42420";
-const coral = "#EE6666";
-const grayBlue = "#9AB3B9";
-const lightPageBackground = "#FDFDFD";
-const yclaBlue = "#49BAD5";
-const yclaTeal = "#56D0B3";
-const yclaTealDark = "#50C1A7";
-const yclaGreenDark = "#3D9A82";
-const yclaGreen = "#81C262";
-const learnstormBlue = "#4898FC";
-const homepageBlue = "#46A8BF";
-const backgroundBlue = "#00294A";
-const teacherSignupBlue = "#335d7d";
-const homepageGreen = "#2B8E7B";
-const streakColor = "#F79734";
-const facebookColor = "#1A60A2";
-const blueGoogleColor = "#2CAFE2";
-const redGoogleColor = "#BF4434";
-const homepageColor = "#2D585E";
-const lightTextColor = "#898989";
-const fontSizeTiny = "11px";
-const fontSizeNormal = "14px";
-const fontSizeMedium = "16px";
-const fontSizeExtraLarge = "24px";
-const fontSizeHuge = "36px";
-const fontSizeBakana = "48px";
-const fontSizeBananas = "60px";
-const fixedWidthFontFamily = "'Helvetica Neue',Helvetica,Arial,sans-serif";
-const contentPadding = "20px";
-const primaryButtonBackground = "#89B908";
-const primaryButtonBorder = "#76A005";
-const buttonTextColor = "rgb(122, 122, 122)";
-const buttonBorderRadius = "3px";
-const basicBorderColor = "#CCCCCC";
-const minContainerWidth = "1000px";
-const maxContainerWidth = "1200px";
-const formHintColor = "#999999";
-const guidelineExampleText = "#606060";
-const hoverCardWidth = "450px";
-const menuHighlightColor = "#96AB4F";
-const menuHighlightBorderColor = "#76A005";
-const menuActiveTextColor = "#FFFFFF";
-const menuInactiveTextColor = "#444444";
-const menuSubheaderTextColor = "rgb(120, 120, 120)";
-const menuBorderColor = "#94A170";
-const unreadBackgroundColor = "#ECEEF4";
-const menuLineHeight = "18px";
-const menuSubheaderLineHeight = "17px";
-const menuSubheaderFontSize = "9px";
-const notificationBarColor = "#4858A4";
-const modalBodyTopPadding = "20px";
-const modalDialogPadding = "15px";
-const modalSectionPadding = "9px";
-const mathDomain1 = "#11ACCD";
-const mathDomain2 = "#63D9EA";
-const mathDomain3 = "#027d97";
-const mathDomain4 = "#085566";
-const partnerContentDomain1 = "#01A995";
-const partnerContentDomain2 = "#01D1C1";
-const partnerContentDomain3 = "#208170";
-const partnerContentDomain4 = "#144F44";
-const csDomain1 = "#1FAB54";
-const csDomain2 = "#74CF70";
-const csDomain3 = "#0D923F";
-const csDomain4 = "#085E29";
-const economicsDomain1 = "#E07D10";
-const economicsDomain2 = "#FFBE26";
-const economicsDomain3 = "#A75A05";
-const economicsDomain4 = "#953C02";
-const collegeCareersMoreDomain1 = "#01A995";
-const collegeCareersMoreDomain2 = "#01D1C1";
-const collegeCareersMoreDomain3 = "#208170";
-const collegeCareersMoreDomain4 = "#144F44";
-const humanitiesDomain1 = "#E84D39";
-const humanitiesDomain2 = "#FF8482";
-const humanitiesDomain3 = "#BE2612";
-const humanitiesDomain4 = "#8C1C0D";
-const gtpDomain1 = "#1865F2";
-const gtpDomain2 = "#1865F2";
-const gtpDomain3 = "#1865F2";
-const gtpDomain4 = "#1865F2";
-const scienceDomain1 = "#CA337C";
-const scienceDomain2 = "#FF92C6";
-const scienceDomain3 = "#9E034E";
-const scienceDomain4 = "#6B0235";
-const testPrepDomain1 = "#1865F2";
-const testPrepDomain2 = "#1865F2";
-const testPrepDomain3 = "#1865F2";
-const testPrepDomain4 = "#1865F2";
-const defaultDomain1 = "#1865F2";
-const defaultDomain2 = "#66afe9";
-const defaultDomain3 = "#1152b0";
-const defaultDomain4 = "#0d3d82";
-const defaultDomainColor = "#314453";
-const defaultSubjectColor = "#4D6779";
-const defaultTopicColor = "#6A8DA6";
-const defaultHoverColor = "#314453";
-const defaultLinkColor = "#314453";
-const defaultLinkHoverColor = "#6A8DA6";
-const scienceDomainColor = "#94424F";
-const scienceSubjectColor = "#9D4A5A";
-const scienceTopicColor = "#C55F73";
-const scienceHoverColor = "#94424F";
-const scienceLinkColor = "#94424F";
-const scienceLinkHoverColor = "#C55F73";
-const humanitiesDomainColor = "#AD3434";
-const humanitiesSubjectColor = "#C13B31";
-const humanitiesTopicColor = "#D24A45";
-const humanitiesHoverColor = "#AD3434";
-const humanitiesLinkColor = "#AD3434";
-const humanitiesLinkHoverColor = "#D24A45";
-const economicsDomainColor = "#B77033";
-const economicsSubjectColor = "#BF7B34";
-const economicsTopicColor = "#D1933B";
-const economicsHoverColor = "#B77033";
-const economicsLinkColor = "#B77033";
-const economicsLinkHoverColor = "#D1933B";
-const csDomainColor = "#437A39";
-const csSubjectColor = "#53893E";
-const csTopicColor = "#689B51";
-const csHoverColor = "#437A39";
-const csLinkColor = "#437A39";
-const csLinkHoverColor = "#689B51";
-const partnerContentDomainColor = "#218270";
-const partnerContentSubjectColor = "#2C8D7B";
-const partnerContentTopicColor = "#329A86";
-const partnerContentHoverColor = "#218270";
-const partnerContentLinkColor = "#218270";
-const partnerContentLinkHoverColor = "#329A86";
-const essayDomainColor = "#0071B3";
-const mathDomainColor = "#1C758A";
-const mathSubjectColor = "#46A8BF";
-const mathTopicColor = "#4FBAD4";
-const mathHoverColor = "#1C758A";
-const mathLinkColor = "#1C758A";
-const mathLinkHoverColor = "#4FBAD4";
-const testPrepDomainColor = "#644172";
-const testPrepSubjectColor = "#7E5F8E";
-const testPrepTopicColor = "#9A72AC";
-const testPrepHoverColor = "#644172";
-const testPrepLinkColor = "#644172";
-const testPrepLinkHoverColor = "#9A72AC";
-const collegeCareersMoreDomainColor = "#218270";
-const collegeCareersMoreSubjectColor = "#2C8D7B";
-const collegeCareersMoreTopicColor = "#329A86";
-const collegeCareersMoreHoverColor = "#218270";
-const collegeCareersMoreLinkColor = "#218270";
-const collegeCareersMoreLinkHoverColor = "#329A86";
-const colorProficient = "#1C758A";
-const colorPracticed = "rgb(158, 221, 235)";
-const colorMastery1 = "rgb(90, 197, 221)";
-const colorMastery2 = "rgb(42, 174, 203)";
-const colorMastery3 = "#1C758A";
-const colorSuggested = "#73982C";
-const colorReview = "#E35D04";
-const colorNotStarted = "#CCCCCC";
-const colorStarted = "#C7E5F7";
-const colorStruggling = "#C30202";
-const colorPersonal = "#00809C";
-const colorPractice = "#96D9FF";
-const colorEnergyPoints = "#005987";
-const pureSmMin = "568px";
-const pureMdMin = "768px";
-const pureLgMin = "1024px";
-const pureXlMin = "1200px";
-const pureXsMax = "567px";
-const pureSmMax = "767px";
-const pureMdMax = "1023px";
-const pureLgMax = "1199px";
-
-var globalConstants = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  black: black,
-  grayDarker: grayDarker,
-  grayDark: grayDark,
-  gray: gray,
-  grayLight: grayLight,
-  grayLighter: grayLighter,
-  white: white,
-  blue: blue,
-  blueDark: blueDark,
-  green: green,
-  red: red,
-  yellow: yellow,
-  orange: orange,
-  pink: pink,
-  purple: purple,
-  bodyBackground: bodyBackground,
-  textColor: textColor,
-  linkColor: linkColor,
-  linkColorHover: linkColorHover,
-  sansFontFamily: sansFontFamily,
-  serifFontFamily: serifFontFamily,
-  monoFontFamily: monoFontFamily,
-  baseFontSize: baseFontSize,
-  baseFontFamily: baseFontFamily,
-  baseLineHeight: baseLineHeight,
-  altFontFamily: altFontFamily,
-  headingsFontFamily: headingsFontFamily,
-  headingsFontWeight: headingsFontWeight,
-  headingsColor: headingsColor,
-  fontSizeLarge: fontSizeLarge,
-  fontSizeSmall: fontSizeSmall,
-  fontSizeMini: fontSizeMini,
-  paddingLarge: paddingLarge,
-  paddingSmall: paddingSmall,
-  paddingMini: paddingMini,
-  baseBorderRadius: baseBorderRadius,
-  borderRadiusLarge: borderRadiusLarge,
-  borderRadiusSmall: borderRadiusSmall,
-  tableBackground: tableBackground,
-  tableBackgroundAccent: tableBackgroundAccent,
-  tableBackgroundHover: tableBackgroundHover,
-  tableBorder: tableBorder,
-  btnBackground: btnBackground,
-  btnBackgroundHighlight: btnBackgroundHighlight,
-  btnBorder: btnBorder,
-  btnPrimaryBackground: btnPrimaryBackground,
-  btnPrimaryBackgroundHighlight: btnPrimaryBackgroundHighlight,
-  btnInfoBackground: btnInfoBackground,
-  btnInfoBackgroundHighlight: btnInfoBackgroundHighlight,
-  btnSuccessBackground: btnSuccessBackground,
-  btnSuccessBackgroundHighlight: btnSuccessBackgroundHighlight,
-  btnWarningBackground: btnWarningBackground,
-  btnWarningBackgroundHighlight: btnWarningBackgroundHighlight,
-  btnDangerBackground: btnDangerBackground,
-  btnDangerBackgroundHighlight: btnDangerBackgroundHighlight,
-  btnInverseBackground: btnInverseBackground,
-  btnInverseBackgroundHighlight: btnInverseBackgroundHighlight,
-  inputBackground: inputBackground,
-  inputBorder: inputBorder,
-  inputBorderRadius: inputBorderRadius,
-  inputDisabledBackground: inputDisabledBackground,
-  formActionsBackground: formActionsBackground,
-  inputHeight: inputHeight,
-  dropdownBackground: dropdownBackground,
-  dropdownBorder: dropdownBorder,
-  dropdownDividerTop: dropdownDividerTop,
-  dropdownDividerBottom: dropdownDividerBottom,
-  dropdownLinkColor: dropdownLinkColor,
-  dropdownLinkColorHover: dropdownLinkColorHover,
-  dropdownLinkColorActive: dropdownLinkColorActive,
-  dropdownLinkBackgroundActive: dropdownLinkBackgroundActive,
-  dropdownLinkBackgroundHover: dropdownLinkBackgroundHover,
-  zindexDropdown: zindexDropdown,
-  zindexPopover: zindexPopover,
-  zindexTooltip: zindexTooltip,
-  zindexFixedNavbar: zindexFixedNavbar,
-  zindexHeader: zindexHeader,
-  zindexModalBackdrop: zindexModalBackdrop,
-  zindexModal: zindexModal,
-  zindexAboveModal: zindexAboveModal,
-  iconSpritePath: iconSpritePath,
-  iconWhiteSpritePath: iconWhiteSpritePath,
-  placeholderText: placeholderText,
-  hrBorder: hrBorder,
-  horizontalComponentOffset: horizontalComponentOffset,
-  wellBackground: wellBackground,
-  navbarCollapseWidth: navbarCollapseWidth,
-  navbarCollapseDesktopWidth: navbarCollapseDesktopWidth,
-  navbarHeight: navbarHeight,
-  navbarBackgroundHighlight: navbarBackgroundHighlight,
-  navbarBackground: navbarBackground,
-  navbarBorder: navbarBorder,
-  navbarText: navbarText,
-  navbarLinkColor: navbarLinkColor,
-  navbarLinkColorHover: navbarLinkColorHover,
-  navbarLinkColorActive: navbarLinkColorActive,
-  navbarLinkBackgroundHover: navbarLinkBackgroundHover,
-  navbarLinkBackgroundActive: navbarLinkBackgroundActive,
-  navbarBrandColor: navbarBrandColor,
-  navbarInverseBackground: navbarInverseBackground,
-  navbarInverseBackgroundHighlight: navbarInverseBackgroundHighlight,
-  navbarInverseBorder: navbarInverseBorder,
-  navbarInverseText: navbarInverseText,
-  navbarInverseLinkColor: navbarInverseLinkColor,
-  navbarInverseLinkColorHover: navbarInverseLinkColorHover,
-  navbarInverseLinkColorActive: navbarInverseLinkColorActive,
-  navbarInverseLinkBackgroundHover: navbarInverseLinkBackgroundHover,
-  navbarInverseLinkBackgroundActive: navbarInverseLinkBackgroundActive,
-  navbarInverseSearchBackground: navbarInverseSearchBackground,
-  navbarInverseSearchBackgroundFocus: navbarInverseSearchBackgroundFocus,
-  navbarInverseSearchBorder: navbarInverseSearchBorder,
-  navbarInverseSearchPlaceholderColor: navbarInverseSearchPlaceholderColor,
-  navbarInverseBrandColor: navbarInverseBrandColor,
-  paginationBackground: paginationBackground,
-  paginationBorder: paginationBorder,
-  paginationActiveBackground: paginationActiveBackground,
-  heroUnitBackground: heroUnitBackground,
-  heroUnitHeadingColor: heroUnitHeadingColor,
-  heroUnitLeadColor: heroUnitLeadColor,
-  warningText: warningText,
-  warningBackground: warningBackground,
-  warningBorder: warningBorder,
-  errorText: errorText,
-  errorBackground: errorBackground,
-  errorBorder: errorBorder,
-  successText: successText,
-  successBackground: successBackground,
-  successBorder: successBorder,
-  infoText: infoText,
-  infoBackground: infoBackground,
-  infoBorder: infoBorder,
-  tooltipColor: tooltipColor,
-  tooltipBackground: tooltipBackground,
-  tooltipArrowWidth: tooltipArrowWidth,
-  tooltipArrowColor: tooltipArrowColor,
-  popoverBackground: popoverBackground,
-  popoverArrowWidth: popoverArrowWidth,
-  popoverArrowColor: popoverArrowColor,
-  popoverTitleBackground: popoverTitleBackground,
-  popoverArrowOuterWidth: popoverArrowOuterWidth,
-  popoverArrowOuterColor: popoverArrowOuterColor,
-  gridColumns: gridColumns,
-  gridColumnWidth: gridColumnWidth,
-  gridGutterWidth: gridGutterWidth,
-  gridRowWidth: gridRowWidth,
-  gridColumnWidth1200: gridColumnWidth1200,
-  gridGutterWidth1200: gridGutterWidth1200,
-  gridRowWidth1200: gridRowWidth1200,
-  gridColumnWidth768: gridColumnWidth768,
-  gridGutterWidth768: gridGutterWidth768,
-  gridRowWidth768: gridRowWidth768,
-  fluidGridColumnWidth: fluidGridColumnWidth,
-  fluidGridGutterWidth: fluidGridGutterWidth,
-  fluidGridColumnWidth1200: fluidGridColumnWidth1200,
-  fluidGridGutterWidth1200: fluidGridGutterWidth1200,
-  fluidGridColumnWidth768: fluidGridColumnWidth768,
-  fluidGridGutterWidth768: fluidGridGutterWidth768,
-  kaGreen: kaGreen,
-  kaGreenLight: kaGreenLight,
-  kaBlue: kaBlue,
-  kaBlueLight: kaBlueLight,
-  grayExtraDark: grayExtraDark,
-  grayExtraLight: grayExtraLight,
-  graySuperLight: graySuperLight,
-  whiteDark: whiteDark,
-  dark: dark,
-  blueDarkUnsaturated: blueDarkUnsaturated,
-  blueDarkSaturated: blueDarkSaturated,
-  blueLight: blueLight,
-  greenLight: greenLight,
-  greenDark: greenDark,
-  yellowGreen: yellowGreen,
-  okGreen: okGreen,
-  alertRed: alertRed,
-  coral: coral,
-  grayBlue: grayBlue,
-  lightPageBackground: lightPageBackground,
-  yclaBlue: yclaBlue,
-  yclaTeal: yclaTeal,
-  yclaTealDark: yclaTealDark,
-  yclaGreenDark: yclaGreenDark,
-  yclaGreen: yclaGreen,
-  learnstormBlue: learnstormBlue,
-  homepageBlue: homepageBlue,
-  backgroundBlue: backgroundBlue,
-  teacherSignupBlue: teacherSignupBlue,
-  homepageGreen: homepageGreen,
-  streakColor: streakColor,
-  facebookColor: facebookColor,
-  blueGoogleColor: blueGoogleColor,
-  redGoogleColor: redGoogleColor,
-  homepageColor: homepageColor,
-  lightTextColor: lightTextColor,
-  fontSizeTiny: fontSizeTiny,
-  fontSizeNormal: fontSizeNormal,
-  fontSizeMedium: fontSizeMedium,
-  fontSizeExtraLarge: fontSizeExtraLarge,
-  fontSizeHuge: fontSizeHuge,
-  fontSizeBakana: fontSizeBakana,
-  fontSizeBananas: fontSizeBananas,
-  fixedWidthFontFamily: fixedWidthFontFamily,
-  contentPadding: contentPadding,
-  primaryButtonBackground: primaryButtonBackground,
-  primaryButtonBorder: primaryButtonBorder,
-  buttonTextColor: buttonTextColor,
-  buttonBorderRadius: buttonBorderRadius,
-  basicBorderColor: basicBorderColor,
-  minContainerWidth: minContainerWidth,
-  maxContainerWidth: maxContainerWidth,
-  formHintColor: formHintColor,
-  guidelineExampleText: guidelineExampleText,
-  hoverCardWidth: hoverCardWidth,
-  menuHighlightColor: menuHighlightColor,
-  menuHighlightBorderColor: menuHighlightBorderColor,
-  menuActiveTextColor: menuActiveTextColor,
-  menuInactiveTextColor: menuInactiveTextColor,
-  menuSubheaderTextColor: menuSubheaderTextColor,
-  menuBorderColor: menuBorderColor,
-  unreadBackgroundColor: unreadBackgroundColor,
-  menuLineHeight: menuLineHeight,
-  menuSubheaderLineHeight: menuSubheaderLineHeight,
-  menuSubheaderFontSize: menuSubheaderFontSize,
-  notificationBarColor: notificationBarColor,
-  modalBodyTopPadding: modalBodyTopPadding,
-  modalDialogPadding: modalDialogPadding,
-  modalSectionPadding: modalSectionPadding,
-  mathDomain1: mathDomain1,
-  mathDomain2: mathDomain2,
-  mathDomain3: mathDomain3,
-  mathDomain4: mathDomain4,
-  partnerContentDomain1: partnerContentDomain1,
-  partnerContentDomain2: partnerContentDomain2,
-  partnerContentDomain3: partnerContentDomain3,
-  partnerContentDomain4: partnerContentDomain4,
-  csDomain1: csDomain1,
-  csDomain2: csDomain2,
-  csDomain3: csDomain3,
-  csDomain4: csDomain4,
-  economicsDomain1: economicsDomain1,
-  economicsDomain2: economicsDomain2,
-  economicsDomain3: economicsDomain3,
-  economicsDomain4: economicsDomain4,
-  collegeCareersMoreDomain1: collegeCareersMoreDomain1,
-  collegeCareersMoreDomain2: collegeCareersMoreDomain2,
-  collegeCareersMoreDomain3: collegeCareersMoreDomain3,
-  collegeCareersMoreDomain4: collegeCareersMoreDomain4,
-  humanitiesDomain1: humanitiesDomain1,
-  humanitiesDomain2: humanitiesDomain2,
-  humanitiesDomain3: humanitiesDomain3,
-  humanitiesDomain4: humanitiesDomain4,
-  gtpDomain1: gtpDomain1,
-  gtpDomain2: gtpDomain2,
-  gtpDomain3: gtpDomain3,
-  gtpDomain4: gtpDomain4,
-  scienceDomain1: scienceDomain1,
-  scienceDomain2: scienceDomain2,
-  scienceDomain3: scienceDomain3,
-  scienceDomain4: scienceDomain4,
-  testPrepDomain1: testPrepDomain1,
-  testPrepDomain2: testPrepDomain2,
-  testPrepDomain3: testPrepDomain3,
-  testPrepDomain4: testPrepDomain4,
-  defaultDomain1: defaultDomain1,
-  defaultDomain2: defaultDomain2,
-  defaultDomain3: defaultDomain3,
-  defaultDomain4: defaultDomain4,
-  defaultDomainColor: defaultDomainColor,
-  defaultSubjectColor: defaultSubjectColor,
-  defaultTopicColor: defaultTopicColor,
-  defaultHoverColor: defaultHoverColor,
-  defaultLinkColor: defaultLinkColor,
-  defaultLinkHoverColor: defaultLinkHoverColor,
-  scienceDomainColor: scienceDomainColor,
-  scienceSubjectColor: scienceSubjectColor,
-  scienceTopicColor: scienceTopicColor,
-  scienceHoverColor: scienceHoverColor,
-  scienceLinkColor: scienceLinkColor,
-  scienceLinkHoverColor: scienceLinkHoverColor,
-  humanitiesDomainColor: humanitiesDomainColor,
-  humanitiesSubjectColor: humanitiesSubjectColor,
-  humanitiesTopicColor: humanitiesTopicColor,
-  humanitiesHoverColor: humanitiesHoverColor,
-  humanitiesLinkColor: humanitiesLinkColor,
-  humanitiesLinkHoverColor: humanitiesLinkHoverColor,
-  economicsDomainColor: economicsDomainColor,
-  economicsSubjectColor: economicsSubjectColor,
-  economicsTopicColor: economicsTopicColor,
-  economicsHoverColor: economicsHoverColor,
-  economicsLinkColor: economicsLinkColor,
-  economicsLinkHoverColor: economicsLinkHoverColor,
-  csDomainColor: csDomainColor,
-  csSubjectColor: csSubjectColor,
-  csTopicColor: csTopicColor,
-  csHoverColor: csHoverColor,
-  csLinkColor: csLinkColor,
-  csLinkHoverColor: csLinkHoverColor,
-  partnerContentDomainColor: partnerContentDomainColor,
-  partnerContentSubjectColor: partnerContentSubjectColor,
-  partnerContentTopicColor: partnerContentTopicColor,
-  partnerContentHoverColor: partnerContentHoverColor,
-  partnerContentLinkColor: partnerContentLinkColor,
-  partnerContentLinkHoverColor: partnerContentLinkHoverColor,
-  essayDomainColor: essayDomainColor,
-  mathDomainColor: mathDomainColor,
-  mathSubjectColor: mathSubjectColor,
-  mathTopicColor: mathTopicColor,
-  mathHoverColor: mathHoverColor,
-  mathLinkColor: mathLinkColor,
-  mathLinkHoverColor: mathLinkHoverColor,
-  testPrepDomainColor: testPrepDomainColor,
-  testPrepSubjectColor: testPrepSubjectColor,
-  testPrepTopicColor: testPrepTopicColor,
-  testPrepHoverColor: testPrepHoverColor,
-  testPrepLinkColor: testPrepLinkColor,
-  testPrepLinkHoverColor: testPrepLinkHoverColor,
-  collegeCareersMoreDomainColor: collegeCareersMoreDomainColor,
-  collegeCareersMoreSubjectColor: collegeCareersMoreSubjectColor,
-  collegeCareersMoreTopicColor: collegeCareersMoreTopicColor,
-  collegeCareersMoreHoverColor: collegeCareersMoreHoverColor,
-  collegeCareersMoreLinkColor: collegeCareersMoreLinkColor,
-  collegeCareersMoreLinkHoverColor: collegeCareersMoreLinkHoverColor,
-  colorProficient: colorProficient,
-  colorPracticed: colorPracticed,
-  colorMastery1: colorMastery1,
-  colorMastery2: colorMastery2,
-  colorMastery3: colorMastery3,
-  colorSuggested: colorSuggested,
-  colorReview: colorReview,
-  colorNotStarted: colorNotStarted,
-  colorStarted: colorStarted,
-  colorStruggling: colorStruggling,
-  colorPersonal: colorPersonal,
-  colorPractice: colorPractice,
-  colorEnergyPoints: colorEnergyPoints,
-  pureSmMin: pureSmMin,
-  pureMdMin: pureMdMin,
-  pureLgMin: pureLgMin,
-  pureXlMin: pureXlMin,
-  pureXsMax: pureXsMax,
-  pureSmMax: pureSmMax,
-  pureMdMax: pureMdMax,
-  pureLgMax: pureLgMax
-});
-
-const colors = {
-  white: "#FFFFFF",
-  gray98: "#FAFAFA",
-  gray97: "#F6F7F7",
-  gray95: "#F0F1F2",
-  gray90: "#E3E5E6",
-  gray85: "#D6D8DA",
-  gray76: "#BABEC2",
-  gray72: "#999A9D",
-  gray68: "#888D93",
-  gray55: "#707378",
-  gray41: "#626569",
-  gray25: "#3B3E40",
-  gray17: "#21242C",
-  gray10: "#1499af",
-  black: "#000000",
-  // These colors are pulled out from constants.js, which is itself generated
-  // from variables.less. We should probably avoid duplicating these here.
-  alertRed,
-  homepageBlue,
-  kaBlue,
-  kaBlueLight,
-  kaGreen,
-  kaGreenLight,
-  learnstormBlue,
-  backgroundBlue,
-  adminGreen: "#78C008",
-  kaBlueExtraLight: "#39c2db",
-  kaBlueHover: "#0c7f99",
-  kaGreenHover: "#518005",
-  // Domain-agnostic colors related to the study guide experience in the
-  // content library.
-  skyDark: "#001f4d",
-  recommendationGold: "#ffbe26",
-  starAced: "#ff9c39",
-  // We interploate the domain colors into this colors object for
-  // historical reasons, but everyone using domain-specific colors
-  // should switch to using the domainColors() function to look up
-  // colors instead.
-  //
-  // TODO(davidflanagan): remove this line once everything is
-  // working correctly with the domainColors() accessor.
-  // ...domainToColorsMap,
-  // mission: missionColors,
-
-  // Colors for various OAuth providers
-  google: "#C1432f",
-  modernGoogle: "#be2612",
-  modernGoogleHover: "#8c1c0d",
-  facebook: "#4267B2",
-  modernFacebook: "#4267B2",
-  modernFacebookHover: "#00294a",
-  wonderBlocksGold: "#FFB100",
-  wonderBlocksLightBlue: "#37C5FD",
-  // We're using rgba instead of opacity to avoid affecting the focus outline
-  // when we just want to make the color transparent.
-  breadcrumbs: "rgba(255, 255, 255, 0.7)"
-};
-const borderRadius = 4;
-const breadcrumbStyles = {
-  color: colors.breadcrumbs,
+// TODO: can we use WB typography?
+const bodyXsmallBold = {
+  // For emphasized metadata, descriptions, etc
   fontFamily: "inherit",
   fontSize: 15,
   fontWeight: "bold",
-  letterSpacing: 0.8,
-  lineHeight: "19px",
-  textTransform: "uppercase",
-  // Disable subpixel antialiasing for OSX (improves light on dark text)
-  MozOsxFontSmoothing: "grayscale",
-  WebkitFontSmoothing: "antialiased"
-};
-const fonts = {
-  // The body of the page is setup to use 'Helvetica' by default and
-  // 'Lato' if/once it downloads. For your elements to follow this
-  // pattern, all you need is to make the text in your element
-  // inherit from the body using the "inherit" value.
-  regular: "inherit"
-};
-const typography = {
-  // For subject names
-  subjectHeadingDesktop: {
-    fontFamily: "inherit",
-    fontSize: 50,
-    fontWeight: "bold",
-    lineHeight: "61px"
-  },
-  subjectHeadingMobile: {
-    fontFamily: "inherit",
-    fontSize: 35,
-    fontWeight: "bold",
-    lineHeight: "37px"
-  },
-  // For the most important thing on the page
-  conceptHeadingDesktop: {
-    fontFamily: "inherit",
-    fontSize: 35,
-    fontWeight: "bold",
-    lineHeight: "37px"
-  },
-  conceptHeadingMobile: {
-    fontFamily: "inherit",
-    fontSize: 23,
-    fontWeight: "bold",
-    lineHeight: "27px"
-  },
-  // For sections or modules
-  subheadingDesktop: {
-    fontFamily: "inherit",
-    fontSize: 23,
-    fontWeight: "bold",
-    lineHeight: "27px"
-  },
-  subheadingMobile: {
-    fontFamily: "inherit",
-    fontSize: 20,
-    fontWeight: "bold",
-    lineHeight: "24px"
-  },
-  smallSubheadingDesktop: {
-    fontFamily: "inherit",
-    fontSize: 20,
-    lineHeight: 1.25
-  },
-  smallSubheadingMobile: {
-    fontFamily: "inherit",
-    fontSize: 15,
-    lineHeight: 1.25
-  },
-  // For callouts
-  smallHeading: {
-    color: colors.gray25,
-    fontFamily: "inherit",
-    fontSize: 17,
-    fontWeight: "bold",
-    lineHeight: "23px"
-  },
-  smallHeadingMobile: {
-    color: colors.gray25,
-    fontFamily: "inherit",
-    fontSize: 15,
-    fontWeight: "bold",
-    lineHeight: "18px"
-  },
-  // Accent headings
-  accentHeading: {
-    color: colors.gray68,
-    fontFamily: "inherit",
-    fontSize: 15,
-    fontWeight: "bold",
-    letterSpacing: 0.8,
-    lineHeight: "19px",
-    textTransform: "uppercase"
-  },
-  bodyLarge: {
-    // For articles with multiple paragraphs
-    fontFamily: fonts.regular,
-    fontSize: 20,
-    lineHeight: "30px"
-  },
-  bodySmall: {
-    // For small blocks of copy
-    fontFamily: fonts.regular,
-    fontSize: 17,
-    fontWeight: "normal",
-    lineHeight: "23px"
-  },
-  bodySmallBold: {
-    // For small blocks of copy
-    fontFamily: fonts.regular,
-    fontSize: 17,
-    fontWeight: "bold",
-    lineHeight: "23px"
-  },
-  bodyXsmall: {
-    // For metadata, descriptions, etc
-    fontFamily: fonts.regular,
-    fontSize: 15,
-    lineHeight: "22px"
-  },
-  bodyXsmallBold: {
-    // For emphasized metadata, descriptions, etc
-    fontFamily: "inherit",
-    fontSize: 15,
-    fontWeight: "bold",
-    lineHeight: "22px"
-  },
-  breadcrumb: breadcrumbStyles,
-  // For in-page tabs, breadcrumbs
-  breadcrumbSmall: _extends({}, breadcrumbStyles, {
-    fontSize: 12,
-    lineHeight: "13px"
-  }),
-  labelLarge: {
-    // For chiclets and thumbnail titles
-    fontFamily: "inherit",
-    fontSize: 23,
-    fontWeight: "bold",
-    lineHeight: "27px"
-  },
-  labelMedium: {
-    // For chiclets and thumbnail titles
-    fontFamily: "inherit",
-    fontSize: 15,
-    fontWeight: "bold",
-    lineHeight: "18px"
-  },
-  labelSmall: {
-    // Generally used with labelLarge, for breadcrumbs in thumbnails
-    fontFamily: fonts.regular,
-    fontSize: 12,
-    lineHeight: "14px"
-  },
-  caption: {
-    // For image captions
-    fontFamily: fonts.regular,
-    fontSize: 14,
-    fontStyle: "italic",
-    lineHeight: "17px"
-  },
-  desktopScalingOnMobile: {
-    // For when you need Mobile Safari and friends to stick to desktop
-    // sizes
-    MozTextSizeAdjust: "100%",
-    MsTextSizeAdjust: "100%",
-    WebkitTextSizeAdjust: "100%"
-  },
-  // TODO (josh): This should move to within <ModalHeader>
-  modalSubtitle: {
-    fontSize: 12,
-    lineHeight: 1.65,
-    // NOTE (josh): Font smoothing used here to create a 'medium' weight
-    // font, between normal and bold, on webkit browsers.
-    // This prop is an a11y risk when used on non-bold text, since it
-    // makes text very thin, but it's fine on bold text.
-    WebkitFontSmoothing: "antialiased",
-    fontWeight: "bold"
-  },
-  // HACK(kevinb): temporary wonder blocks styles for header only
-  // TODO(kevinb): use components from wonder-blocks-typography instead
-  wonderBlocksHeader: {
-    paddingLeft: 16,
-    paddingRight: 16,
-    paddingBottom: 24,
-    paddingTop: 34,
-    [mediaQueries.mdOrLarger]: {
-      paddingBottom: 32
-    }
-  },
-  // HACK(kevinb): temporary wonder blocks styles for header only
-  // TODO(kevinb): use components from wonder-blocks-typography instead
-  wonderBlocksTitle: {
-    color: colors.white,
-    fontWeight: 900,
-    // "Black" weight
-    fontSize: 28,
-    lineHeight: "32px",
-    margin: 0,
-    [mediaQueries.mdOrLarger]: {
-      fontSize: 36,
-      lineHeight: "40px"
-    }
-  },
-  // HACK(kevinb): temporary wonder blocks styles for header only
-  // TODO(kevinb): use components from wonder-blocks-typography instead
-  wonderBlocksLabelLarge: {
-    fontSize: 16,
-    lineHeight: "20px",
-    fontWeight: 700 // Bold
-  }
+  lineHeight: "22px"
 };
 
-var globalStyles = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  colors: colors,
-  borderRadius: borderRadius,
-  fonts: fonts,
-  typography: typography
-});
-
 const AnswerChoices = props => {
   const {
     strings
@@ -39322,7 +38651,7 @@ class LabelImage extends React.Component {
     const promptString = isMobile ? multipleAnswers ? strings.tapMultiple : strings.tapSingle : multipleAnswers ? strings.clickMultiple : strings.clickSingle;
     const choicesString = strings.choices;
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames("perseus-label-image-widget-instructions", css(styles$a.instructions))
+      className: classNames$1("perseus-label-image-widget-instructions", css(styles$a.instructions))
     }, /*#__PURE__*/React.createElement("div", {
       className: css(styles$a.instructionsCaption)
     }, promptString, " ", !hideChoices && choicesString), !hideChoices && /*#__PURE__*/React.createElement("div", {
@@ -39388,7 +38717,7 @@ const styles$a = StyleSheet.create({
   instructions: {
     paddingBottom: 16
   },
-  instructionsCaption: _extends({}, typography.bodyXsmallBold, {
+  instructionsCaption: _extends({}, bodyXsmallBold, {
     paddingBottom: 16
   }),
   instructionsChoices: {
@@ -40659,7 +39988,7 @@ class Matrix extends React.Component {
     const highlightedCol = Math.max(cursorCol, matrixSize[1] - 1);
     const bracketHeight = (highlightedRow + 1) * (INPUT_HEIGHT + 2 * INPUT_MARGIN);
     const bracketOffset = (highlightedCol + 1) * (INPUT_WIDTH + 2 * INPUT_MARGIN);
-    const className = classNames({
+    const className = classNames$1({
       "perseus-matrix": true,
       "static-mode": this.props.static,
       "the-matrix": this.state.enterTheMatrix >= 5
@@ -43224,9 +42553,9 @@ const makeSafeUrl = (urlString, locale) => {
 };
 const styles$6 = StyleSheet.create({
   widgetContainer: {
-    borderRadius: borderRadiusLarge,
+    borderRadius: 6,
     borderWidth: 1,
-    borderColor: basicBorderColor,
+    borderColor: "#CCC",
     padding: spacing.medium_16,
     paddingBottom: 0
   },
@@ -44543,7 +43872,7 @@ const VideoTranscriptLink = props => {
   } = props;
   const {
     useVideo
-  } = getDependencies();
+  } = useDependencies();
   const [id, kind] = IS_URL$1.test(location) ? [getYoutubeId(location), "YOUTUBE_ID"] : [location, "READABLE_ID"];
   // The result value conforms to the wonder-blocks-data `Result` type
   // which is used by our GraphQL framework.
@@ -44717,7 +44046,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 = "39.0.1";
+const libVersion = "41.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -44849,7 +44178,7 @@ class ArticleRenderer extends React.Component {
     const apiOptions = _extends({}, ApiOptions.defaults, this.props.apiOptions, {
       isArticle: true
     });
-    const classes = classNames({
+    const classes = classNames$1({
       "framework-perseus": true,
       "perseus-article": true,
       // NOTE(charlie): For exercises, this is applied outside of Perseus
@@ -44929,7 +44258,7 @@ class HintRenderer extends React.Component {
     const {
       isMobile
     } = apiOptions;
-    const classNames$1 = classNames("hint", !isMobile && "perseus-hint-renderer", isMobile && css(styles$3.newHint), isMobile && lastRendered && css(styles$3.lastRenderedNewHint), lastHint && "last-hint", lastRendered && "last-rendered", className);
+    const classNames = classNames$1("hint", !isMobile && "perseus-hint-renderer", isMobile && css(styles$3.newHint), isMobile && lastRendered && css(styles$3.lastRenderedNewHint), lastHint && "last-hint", lastRendered && "last-rendered", className);
 
     // TODO(charlie): Allowing `customKeypad` would require that we
     // extend `ItemRenderer` to support nested inputs in the `HintsRenderer`.
@@ -44943,7 +44272,7 @@ class HintRenderer extends React.Component {
       /*#__PURE__*/
       // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
       React.createElement("div", {
-        className: classNames$1,
+        className: classNames,
         tabIndex: "-1"
       }, !apiOptions.isMobile && /*#__PURE__*/React.createElement("span", {
         className: "perseus-sr-only"
@@ -44996,7 +44325,7 @@ const styles$3 = StyleSheet.create({
   },
   lastRenderedNewHint: {
     marginBottom: 0,
-    borderLeftColor: kaGreen$1
+    borderLeftColor: kaGreen
   }
 });
 
@@ -45147,9 +44476,9 @@ class HintsRenderer extends React.Component {
     } = apiOptions;
     const showGetAnotherHint = getAnotherHint && hintsVisible > 0 && hintsVisible < this.props.hints.length;
     const hintRatioCopy = `(${hintsVisible}/${this.props.hints.length})`;
-    const classNames$1 = classNames(this.props.className, apiOptions.isMobile && hintsVisible > 0 && css(styles$2.mobileHintStylesHintsRenderer));
+    const classNames = classNames$1(this.props.className, apiOptions.isMobile && hintsVisible > 0 && css(styles$2.mobileHintStylesHintsRenderer));
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames$1
+      className: classNames
     }, apiOptions.isMobile && hintsVisible > 0 && /*#__PURE__*/React.createElement("div", {
       className: css(styles$2.mobileHintStylesHintTitle, sharedStyles.responsiveLabel)
     }, this.context.strings.hints), hints, showGetAnotherHint && /*#__PURE__*/React.createElement("button", {
@@ -45186,7 +44515,7 @@ const styles$2 = StyleSheet.create({
     fontSize: "100%",
     fontFamily: "inherit",
     fontWeight: "bold",
-    color: kaGreen$1,
+    color: kaGreen,
     padding: 0,
     position: "relative"
   },
@@ -45581,28 +44910,6 @@ const ref = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.cre
   ref: ref
 }))));
 
-const devices = {
-  PHONE: "phone",
-  TABLET: "tablet",
-  DESKTOP: "desktop"
-};
-
-// How many pixels do we reserve on the right-hand side of a preview
-// for displaying lint indicators? This space needs to be reserved
-// in DeviceFramer, but it is actually allocated in PerseusFrame
-const lintGutterWidth = 36;
-
-// How wide a border does PerseusFrame draw? We need to allocate enough
-// space for it in DeviceFramer.
-const perseusFrameBorderWidth = 1;
-
-var constants = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  devices: devices,
-  lintGutterWidth: lintGutterWidth,
-  perseusFrameBorderWidth: perseusFrameBorderWidth
-});
-
 /**
  * Traverses a {content, widgets, images} renderer props object,
  * such as `itemData.question`
@@ -48289,5 +47596,17 @@ const EditorJsonify = {
   }
 };
 
-export { ApiOptions, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, dependencies as Dependencies, EditorJsonify, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAngleCoords, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getClockwiseAngle, getCorrectAnswerForWidgetId, getImagesWithoutAltData, getLineCoords, getLinearSystemCoords, getPointCoords, getPolygonCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, makeSafeUrl, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
+/**
+ * Main entry point
+ */
+const GrapherUtil = {
+  allTypes,
+  DEFAULT_GRAPHER_PROPS,
+  chooseType,
+  defaultPlotProps,
+  getEquationString,
+  typeToButton
+};
+
+export { ApiOptions, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, dependencies as Dependencies, EditorJsonify, Expression, GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, widgets$1 as Widgets, addWidget, apiVersion, bodyXsmallBold, buildEmptyItemTreeForShape, buildMapper, components, containerSizeClass, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAngleCoords, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getClockwiseAngle, getCorrectAnswerForWidgetId, getImagesWithoutAltData, getInteractiveBoxFromSizeClass, getLineCoords, getLinearSystemCoords, getPointCoords, getPolygonCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, iconChevronDown, iconTrash, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, makeSafeUrl, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map