@khanacademy/perseus 39.0.1 → 40.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';
@@ -479,7 +479,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.
@@ -2437,7 +2437,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
     });
@@ -3886,12 +3886,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 +3899,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 +3943,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 +4080,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
@@ -14853,77 +14853,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 +14888,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 () {
@@ -17432,7 +17345,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 +18135,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 +18171,7 @@ const styles$C = StyleSheet.create({
     // draw attention to the linty content.
     ":hover ~ span": {
       backgroundColor: warningColor,
-      color: white$1
+      color: white
     }
   },
   radioWidgetHoverTarget: {
@@ -18300,7 +18213,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 +18250,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 +19255,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 +19288,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 +19338,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 +19931,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 +20747,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
@@ -24577,29 +24483,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 +24515,7 @@ const {
   checkedColor,
   circleSize,
   radioMarginWidth
-} = constants$1;
+} = constants;
 var sharedStyles = StyleSheet.create({
   perseusInteractive: {
     zIndex: zIndexInteractiveComponent,
@@ -24962,7 +24868,7 @@ function getA11yText(letter, checked, correct, crossedOut, showCorrectness, stri
  */
 const FocusRing = function FocusRing({
   visible = true,
-  color = kaGreen$1,
+  color = kaGreen,
   multipleSelect = false,
   children
 }) {
@@ -25090,7 +24996,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 {
@@ -25168,7 +25074,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 +25234,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 +25585,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 +25652,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 +26445,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 +27339,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 +27454,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 +27518,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 +27733,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 +28341,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 +28897,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 +29165,7 @@ class ImageWidget extends React.Component {
           }
           _title = `**${_title}** `;
         }
-        const className = classNames({
+        const className = classNames$1({
           "perseus-image-caption": true,
           "has-title": !!_title
         });
@@ -31013,7 +30904,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
   },
@@ -31335,7 +31226,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",
@@ -32094,7 +31985,12 @@ const actions = {
   },
   polygon: {
     movePoint,
-    moveAll
+    moveAll,
+    addPoint,
+    removePoint,
+    focusPoint,
+    blurPoint,
+    clickPoint
   },
   quadratic: {
     movePoint
@@ -32238,6 +32134,7 @@ function reinitialize(params) {
  * 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 +32165,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';
@@ -32441,33 +32341,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 +32389,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 +32425,100 @@ 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 [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,
+    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 +32542,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 +32564,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 {
@@ -33143,60 +33065,15 @@ function calculateBisectorPoint(point1, point2, vertex, isReflex, allowReflex, a
 
 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, {
-    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;
-    },
-    point: point,
-    color: color$1,
-    dragging: dragging,
-    focusBehavior: {
-      type: "uncontrolled",
-      tabIndex: 0,
-      onFocusChange
-    },
-    onClick: () => {
-      var _elementRef$current;
-      onClick && onClick();
-      (_elementRef$current = elementRef.current) == null || _elementRef$current.focus();
-    },
-    cursor: cursor
-  });
+    visiblePoint,
+    focusableHandle
+  } = useControlPoint(_extends({}, props, {
+    forwardedRef: pointRef
+  }));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, focusableHandle, visiblePoint);
 });
 
-const PolygonGraph = props => {
+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 +33184,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,6 +33351,10 @@ 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) {
@@ -33766,10 +33794,10 @@ function UnlimitedPointGraph(props) {
   const {
     dispatch
   } = props;
-  const graphState = useGraphConfig();
+  const graphConfig = useGraphConfig();
   const {
     range: [[minX, maxX], [minY, maxY]]
-  } = graphState;
+  } = graphConfig;
   const width = maxX - minX;
   const height = maxY - minY;
   const [[widthPx, heightPx]] = useTransformDimensionsToPixels([width, height]);
@@ -33795,7 +33823,7 @@ function UnlimitedPointGraph(props) {
       const elementRect = event.currentTarget.getBoundingClientRect();
       const x = event.clientX - elementRect.x;
       const y = event.clientY - elementRect.y;
-      const graphCoordinates = pixelsToVectors([[x, y]], graphState);
+      const graphCoordinates = pixelsToVectors([[x, y]], graphConfig);
       dispatch(actions.pointGraph.addPoint(graphCoordinates[0]));
     }
   }), props.graphState.coords.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
@@ -33805,24 +33833,8 @@ function UnlimitedPointGraph(props) {
     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());
-      }
+    onFocus: () => {
+      dispatch(actions.pointGraph.focusPoint(i));
     },
     onClick: () => {
       dispatch(actions.pointGraph.clickPoint(i));
@@ -33984,7 +33996,6 @@ function useDraggablePx(args) {
  * - Protractor
  * - Interactive Graph Elements
  */
-const REMOVE_BUTTON_ID = "perseus_mafs_remove_button";
 const MafsGraph = props => {
   var _props$flags;
   const {
@@ -34025,6 +34036,7 @@ const MafsGraph = props => {
   const {
     strings
   } = usePerseusI18n();
+  const interactionPrompt = isUnlimitedGraphState(state) && state.showKeyboardInteractionInvitation;
   useOnMountEffect(() => {
     analytics.onAnalyticsEvent({
       type: "perseus:interactive-graph-widget:rendered",
@@ -34137,7 +34149,7 @@ const MafsGraph = props => {
   }, /*#__PURE__*/React.createElement("svg", nestedSVGAttributes, props.showProtractor && /*#__PURE__*/React.createElement(Protractor, null), renderGraph({
     state,
     dispatch
-  }))))), state.type === "point" && state.showKeyboardInteractionInvitation && /*#__PURE__*/React.createElement(View, {
+  }))))), interactionPrompt && /*#__PURE__*/React.createElement(View, {
     style: {
       textAlign: "center",
       backgroundColor: "white",
@@ -34154,7 +34166,7 @@ const MafsGraph = props => {
     state,
     dispatch,
     width,
-    strings
+    perseusStrings: strings
   })));
 };
 const renderPointGraphControls = props => {
@@ -34164,7 +34176,7 @@ const renderPointGraphControls = props => {
     focusedPointIndex
   } = props.state;
   const {
-    strings
+    perseusStrings
   } = props;
   const shouldShowRemoveButton = showRemovePointButton && focusedPointIndex !== null;
   return /*#__PURE__*/React.createElement(View, {
@@ -34182,7 +34194,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 +34207,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 +34278,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 +34297,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
@@ -34483,10 +34562,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 +34860,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 +34870,7 @@ function doDeleteIntent(state, action) {
 }
 function doFocusPoint(state, action) {
   switch (state.type) {
+    case "polygon":
     case "point":
       return _extends({}, state, {
         focusedPointIndex: action.index
@@ -34797,6 +34881,7 @@ function doFocusPoint(state, action) {
 }
 function doBlurPoint(state, action) {
   switch (state.type) {
+    case "polygon":
     case "point":
       const nextState = _extends({}, state, {
         showRemovePointButton: false
@@ -34810,10 +34895,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 +34904,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 +34914,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 +35245,7 @@ function doChangeRange(state, action) {
   });
 }
 function doAddPoint(state, action) {
-  if (state.type !== "point") {
+  if (!isUnlimitedGraphState(state)) {
     return state;
   }
   const {
@@ -35193,7 +35269,7 @@ function doAddPoint(state, action) {
   });
 }
 function doRemovePoint(state, action) {
-  if (state.type !== "point") {
+  if (!isUnlimitedGraphState(state)) {
     return state;
   }
   let nextFocusedPointIndex;
@@ -37499,9 +37575,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 +37592,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 +38436,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 +38502,7 @@ const styles$a = StyleSheet.create({
   instructions: {
     paddingBottom: 16
   },
-  instructionsCaption: _extends({}, typography.bodyXsmallBold, {
+  instructionsCaption: _extends({}, bodyXsmallBold, {
     paddingBottom: 16
   }),
   instructionsChoices: {
@@ -40659,7 +39773,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 +42338,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
   },
@@ -44717,7 +43831,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 = "40.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -44849,7 +43963,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 +44043,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 +44057,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 +44110,7 @@ const styles$3 = StyleSheet.create({
   },
   lastRenderedNewHint: {
     marginBottom: 0,
-    borderLeftColor: kaGreen$1
+    borderLeftColor: kaGreen
   }
 });
 
@@ -45147,9 +44261,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 +44300,7 @@ const styles$2 = StyleSheet.create({
     fontSize: "100%",
     fontFamily: "inherit",
     fontWeight: "bold",
-    color: kaGreen$1,
+    color: kaGreen,
     padding: 0,
     position: "relative"
   },
@@ -45581,28 +44695,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 +47381,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