@khanacademy/perseus 20.8.0 → 20.8.1

package/dist/index.js

@@ -12,9 +12,8 @@ var classNames = require('classnames');
 var React = require('react');
 var _ = require('underscore');
 var Clickable = require('@khanacademy/wonder-blocks-clickable');
-var Color = require('@khanacademy/wonder-blocks-color');
 var wonderBlocksPopover = require('@khanacademy/wonder-blocks-popover');
-var Spacing = require('@khanacademy/wonder-blocks-spacing');
+var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 var aphrodite = require('aphrodite');
 var $ = require('jquery');
 var PropTypes = require('prop-types');
@@ -33,7 +32,6 @@ var caretDown = require('@phosphor-icons/core/assets/regular/caret-down.svg');
 var caretUp = require('@phosphor-icons/core/assets/regular/caret-up.svg');
 var debounce$1 = require('lodash.debounce');
 var mafs = require('mafs');
-var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
 var questionIcon = require('@phosphor-icons/core/regular/question.svg');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
@@ -73,8 +71,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
 var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
-var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
-var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
 var $__default = /*#__PURE__*/_interopDefaultLegacy($);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
@@ -361,16 +357,16 @@ const MathInputIcon = _ref => {
     focused,
     active
   } = _ref;
-  let color;
+  let fillColor;
   switch (true) {
     case focused || active:
-      color = Color__default["default"].white;
+      fillColor = wonderBlocksTokens.color.white;
       break;
     case hovered:
-      color = Color__default["default"].blue;
+      fillColor = wonderBlocksTokens.color.blue;
       break;
     default:
-      color = Color__default["default"].offBlack;
+      fillColor = wonderBlocksTokens.color.offBlack;
       break;
   }
   const dynamicClass = active || focused ? styles$D.iconActive : styles$D.iconInactive;
@@ -380,7 +376,7 @@ const MathInputIcon = _ref => {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
-    fill: color,
+    fill: fillColor,
     viewBox: "0 0 256 256"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     d: "M112,72a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16h64A8,8,0,0,1,112,72Zm-8,104H80V152a8,8,0,0,0-16,0v24H40a8,8,0,0,0,0,16H64v24a8,8,0,0,0,16,0V192h24a8,8,0,0,0,0-16Zm48,0h64a8,8,0,0,0,0-16H152a8,8,0,0,0,0,16Zm64,16H152a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16Zm-61.66-90.34a8,8,0,0,0,11.32,0L184,83.31l18.34,18.35a8,8,0,0,0,11.32-11.32L195.31,72l18.35-18.34a8,8,0,0,0-11.32-11.32L184,60.69,165.66,42.34a8,8,0,0,0-11.32,11.32L172.69,72,154.34,90.34A8,8,0,0,0,154.34,101.66Z"
@@ -417,7 +413,7 @@ const mapButtonSets = buttonSets => {
 };
 const inputFocused = {
   borderWidth: 2,
-  borderColor: Color__default["default"].blue,
+  borderColor: wonderBlocksTokens.color.blue,
   margin: -1
 };
 const styles$D = aphrodite.StyleSheet.create({
@@ -425,35 +421,35 @@ const styles$D = aphrodite.StyleSheet.create({
     display: "flex",
     justifyContent: "center",
     height: "100%",
-    padding: Spacing__default["default"].xxxSmall_4,
+    padding: wonderBlocksTokens.spacing.xxxSmall_4,
     borderRadius: 1
   },
   iconInactive: {
-    backgroundColor: Color__default["default"].offBlack8
+    backgroundColor: wonderBlocksTokens.color.offBlack8
   },
   iconActive: {
-    backgroundColor: Color__default["default"].offBlack64
+    backgroundColor: wonderBlocksTokens.color.offBlack64
   },
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
     borderWidth: 1,
-    borderColor: Color__default["default"].offBlack50,
+    borderColor: wonderBlocksTokens.color.offBlack50,
     borderRadius: 3,
-    background: Color__default["default"].white,
+    background: wonderBlocksTokens.color.white,
     ":hover": inputFocused
   },
   wrapperFocused: inputFocused,
   wrapperError: {
-    borderColor: Color__default["default"].red,
-    background: Color.fade(Color__default["default"].red, 0.08),
+    borderColor: wonderBlocksTokens.color.red,
+    background: wonderBlocksTokens.color.fadedRed8,
     ":hover": {
-      borderColor: Color__default["default"].red
+      borderColor: wonderBlocksTokens.color.red
     }
   },
   popoverContent: {
     padding: 0,
-    paddingBottom: Spacing__default["default"].xxSmall_6,
+    paddingBottom: wonderBlocksTokens.spacing.xxSmall_6,
     maxWidth: "initial"
   }
 });
@@ -21863,13 +21859,13 @@ const styles$A = aphrodite.StyleSheet.create({
     width: 40
   },
   leftAlign: {
-    paddingLeft: Spacing__default["default"].xxxSmall_4,
+    paddingLeft: wonderBlocksTokens.spacing.xxxSmall_4,
     paddingRight: 0
   },
   rightAlign: {
     textAlign: "right",
     paddingLeft: 0,
-    paddingRight: Spacing__default["default"].xxxSmall_4
+    paddingRight: wonderBlocksTokens.spacing.xxxSmall_4
   },
   answerStateUnanswered: {
     backgroundColor: "#eee",
@@ -22966,17 +22962,17 @@ function getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, cor
   let borderColor;
   let color;
   if (!showCorrectness && pressed) {
-    borderColor = Color__default["default"].blue;
-    color = Color__default["default"].blue;
+    borderColor = wonderBlocksTokens.color.blue;
+    color = wonderBlocksTokens.color.blue;
     backgroundColor = "transparent";
   } else if (checked) {
-    const bg = showCorrectness && correct ? Color__default["default"].green : Color__default["default"].blue;
+    const bg = showCorrectness && correct ? wonderBlocksTokens.color.green : wonderBlocksTokens.color.blue;
     color = white$1;
     backgroundColor = bg;
     borderColor = bg;
   } else {
-    borderColor = Color__default["default"].offBlack64;
-    color = Color__default["default"].offBlack64;
+    borderColor = wonderBlocksTokens.color.offBlack64;
+    color = wonderBlocksTokens.color.offBlack64;
   }
 
   // define shape
@@ -23010,7 +23006,7 @@ const ChoiceIcon = function (props) {
   return /*#__PURE__*/React__namespace.createElement("div", {
     className: aphrodite.css(styles$y.iconWrapper)
   }, /*#__PURE__*/React__namespace.createElement(FocusRing, {
-    color: Color__default["default"].blue,
+    color: wonderBlocksTokens.color.blue,
     visible: focused || hovered,
     multipleSelect: multipleSelect
   }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -23075,9 +23071,9 @@ const styles$w = aphrodite.StyleSheet.create({
     color: gray68
   },
   circleIncorrectAnswered: {
-    backgroundColor: Color__default["default"].red,
-    borderColor: Color__default["default"].red,
-    color: Color__default["default"].white
+    backgroundColor: wonderBlocksTokens.color.red,
+    borderColor: wonderBlocksTokens.color.red,
+    color: wonderBlocksTokens.color.white
   }
 });
 
@@ -23145,13 +23141,13 @@ const styles$v = aphrodite.StyleSheet.create({
     textTransform: "uppercase"
   },
   correct: {
-    color: Color__default["default"].green
+    color: wonderBlocksTokens.color.green
   },
   incorrectAnswered: {
-    color: Color__default["default"].red
+    color: wonderBlocksTokens.color.red
   },
   incorrect: {
-    color: Color__default["default"].offBlack64
+    color: wonderBlocksTokens.color.offBlack64
   }
 });
 
@@ -23225,7 +23221,7 @@ const Choice = function (props) {
       // @ts-expect-error - TS2322 - Type '{ dispay: string; flexDirection: "column"; color: string; }' is not assignable to type 'Properties<string | number, string & {}>'.
       dispay: "flex",
       flexDirection: "column",
-      color: Color__default["default"].offBlack
+      color: wonderBlocksTokens.color.offBlack
     },
     className: descriptionClassName
   }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -23268,7 +23264,7 @@ const Choice = function (props) {
     disabled: disabled || apiOptions.readOnly,
     style: {
       flex: 1,
-      color: Color__default["default"].offBlack,
+      color: wonderBlocksTokens.color.offBlack,
       userSelect: "text"
     },
     ref: forwardedRef,
@@ -23285,9 +23281,9 @@ const Choice = function (props) {
         flexDirection: "row",
         justifyContent: "center",
         alignContent: "center",
-        paddingTop: Spacing__default["default"].xSmall_8,
-        paddingBottom: Spacing__default["default"].xSmall_8,
-        paddingLeft: Spacing__default["default"].xSmall_8
+        paddingTop: wonderBlocksTokens.spacing.xSmall_8,
+        paddingBottom: wonderBlocksTokens.spacing.xSmall_8,
+        paddingLeft: wonderBlocksTokens.spacing.xSmall_8
       }
     }, /*#__PURE__*/React__namespace.createElement(ChoiceIcon, {
       pos: pos,
@@ -23303,7 +23299,7 @@ const Choice = function (props) {
       previouslyAnswered: previouslyAnswered
     }), /*#__PURE__*/React__namespace.createElement("span", {
       style: {
-        paddingLeft: Spacing__default["default"].small_12,
+        paddingLeft: wonderBlocksTokens.spacing.small_12,
         textAlign: "left",
         flex: 1,
         paddingTop: 4
@@ -23326,7 +23322,7 @@ const Choice = function (props) {
         content: i18n__namespace._("Cross out option"),
         closeButtonVisible: true,
         actions: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksLayout.Strut, {
-          size: Spacing__default["default"].medium_16
+          size: wonderBlocksTokens.spacing.medium_16
         }), /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
           kind: "primary",
           "aria-label": i18n__namespace._("Cross out Choice %(letter)s", {
@@ -23374,7 +23370,7 @@ const Choice = function (props) {
       return /*#__PURE__*/React__namespace.createElement(Icon, {
         icon: ellipsisHorizontalIcon,
         size: 3,
-        color: Color__default["default"].offBlack64
+        color: wonderBlocksTokens.color.offBlack64
       });
     });
   })), showRationale && /*#__PURE__*/React__namespace.createElement("div", {
@@ -23392,7 +23388,7 @@ const styles$u = aphrodite.StyleSheet.create({
     padding: intermediateCheckboxPadding,
     paddingTop: 0,
     marginLeft: 54,
-    color: Color__default["default"].offBlack64,
+    color: wonderBlocksTokens.color.offBlack64,
     [mediaQueries.smOrSmaller]: {
       padding: intermediateCheckboxPaddingPhone,
       paddingTop: 0
@@ -24818,8 +24814,8 @@ class Definition extends React__namespace.Component {
         } = _ref2;
         return /*#__PURE__*/React__namespace.createElement("span", {
           style: {
-            color: Color__default["default"].blue,
-            borderBottom: hovered || focused || pressed ? `2px solid ${Color__default["default"].blue}` : "none"
+            color: wonderBlocksTokens.color.blue,
+            borderBottom: hovered || focused || pressed ? `2px solid ${wonderBlocksTokens.color.blue}` : "none"
           }
         }, this.props.togglePrompt);
       }));
@@ -24828,7 +24824,7 @@ class Definition extends React__namespace.Component {
 }
 const styles$q = {
   tooltipBody: {
-    color: Color__default["default"].offBlack,
+    color: wonderBlocksTokens.color.offBlack,
     fontSize: 20,
     fontWeight: 500,
     lineHeight: "30px"
@@ -25126,7 +25122,7 @@ class GradedGroupAnswerBar extends React__namespace.Component {
     } = this.props;
     const answerBarStyle = {
       ...styles$o.answerBar,
-      backgroundColor: answerBarState === "CORRECT" ? Color__default["default"].offWhite : "white",
+      backgroundColor: answerBarState === "CORRECT" ? wonderBlocksTokens.color.offWhite : "white",
       // Center the "Correct!" message only when there's no next question
       justifyContent: answerBarState === "CORRECT" && !onNextQuestion ? "center" : "space-between"
     };
@@ -25156,7 +25152,7 @@ class GradedGroupAnswerBar extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement("span", {
       style: {
         fontSize: 28,
-        color: Color__default["default"].green
+        color: wonderBlocksTokens.color.green
       }
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon, _extends({}, iconStar, {
       style: {
@@ -25186,7 +25182,7 @@ const styles$o = {
     marginTop: phoneMargin,
     paddingLeft: phoneMargin,
     paddingRight: 10,
-    borderTop: `1px solid ${Color__default["default"].offBlack50}`
+    borderTop: `1px solid ${wonderBlocksTokens.color.offBlack50}`
   },
   tryAgainIcon: {
     fontSize: 28,
@@ -25494,7 +25490,7 @@ const styles$n = aphrodite.StyleSheet.create({
     padding: 0,
     border: "none",
     marginTop: 20,
-    color: Color__default["default"].blue,
+    color: wonderBlocksTokens.color.blue,
     cursor: "pointer",
     display: "block",
     clear: "both"
@@ -25502,7 +25498,7 @@ const styles$n = aphrodite.StyleSheet.create({
   explanationTitle: {
     backgroundColor: "unset",
     marginTop: 20,
-    color: Color__default["default"].blue,
+    color: wonderBlocksTokens.color.blue,
     marginBottom: 10,
     cursor: "pointer",
     fontSize: 14,
@@ -25718,7 +25714,7 @@ const styles$m = aphrodite.StyleSheet.create({
   },
   title: {
     fontSize: 12,
-    color: Color__default["default"].offBlack64,
+    color: wonderBlocksTokens.color.offBlack64,
     textTransform: "uppercase",
     marginBottom: 11,
     letterSpacing: 0.8
@@ -25752,7 +25748,7 @@ const styles$m = aphrodite.StyleSheet.create({
     height: 10,
     borderRadius: "100%",
     borderWidth: 2,
-    borderColor: Color__default["default"].blue,
+    borderColor: wonderBlocksTokens.color.blue,
     borderStyle: "solid"
   },
   indicatorDotFocused: {
@@ -25760,7 +25756,7 @@ const styles$m = aphrodite.StyleSheet.create({
     borderStyle: "double"
   },
   indicatorDotActive: {
-    backgroundColor: Color__default["default"].blue,
+    backgroundColor: wonderBlocksTokens.color.blue,
     width: "100%",
     height: "100%"
   },
@@ -28370,6 +28366,57 @@ const normalizeCoords = (coordsList, ranges) => coordsList.map(coords => coords.
   return (coord + ranges[i][1]) / extent;
 }));
 
+const useTransform = function () {
+  const {
+    viewTransform,
+    userTransform
+  } = mafs.useTransformContext();
+  const transformToPx = mafs.vec.matrixMult(viewTransform, userTransform);
+  for (var _len = arguments.length, points = new Array(_len), _key = 0; _key < _len; _key++) {
+    points[_key] = arguments[_key];
+  }
+  const transformedPoints = points.map(point => mafs.vec.transform(point, transformToPx));
+  return transformedPoints;
+};
+
+/**
+ * Given two points, find the tips that extends through the points to the edge of the range.
+ * @param collinearPoint - The point that the line passes through. Needed to establish slope.
+ * @param extendFrom - The point that the line extends from to the edge of the graph.
+ */
+const getRayIntersectionCoords = (collinearPoint, extendFrom, range) => {
+  // edges of the graph
+  const [[xMin, xMax], [yMin, yMax]] = range;
+  const [aX, aY] = collinearPoint;
+  const [bX, bY] = extendFrom;
+  const yDiff = bY - aY;
+  const xDiff = bX - aX;
+  const slope = yDiff / xDiff;
+  const yAtXMin = slope * (xMin - aX) + aY;
+  const yAtXMax = slope * (xMax - aX) + aY;
+  const xAtYMin = (yMin - aY) / slope + aX;
+  const xAtYMax = (yMax - aY) / slope + aX;
+
+  // clock analogy to describe quadrants
+  switch (true) {
+    // 12 o'clock to 2:59
+    case yDiff > 0 && xDiff >= 0:
+      return xAtYMax > xMax ? [xMax, yAtXMax] : [xAtYMax, yMax];
+    // 3 o'clock to 5:59
+    case yDiff <= 0 && xDiff > 0:
+      // xAtYMin evaluates to -Infinity here, so we use absolute value
+      return Math.abs(xAtYMin) > xMax ? [xMax, yAtXMax] : [xAtYMin, yMin];
+    // 9 o'clock to 11:59
+    case yDiff >= 0 && xDiff < 0:
+      return xAtYMax < xMin ? [xMin, yAtXMin] : [xAtYMax, yMax];
+    // 6 o'clock to 8:59
+    case yDiff < 0 && xDiff <= 0:
+      return xAtYMin < xMin ? [xMin, yAtXMin] : [xAtYMin, yMin];
+    default:
+      return [xMax, yAtXMax];
+  }
+};
+
 const defaultStroke = "var(--movable-line-stroke-color)";
 const MovableLine = props => {
   const {
@@ -28380,18 +28427,12 @@ const MovableLine = props => {
     stroke = defaultStroke
   } = props;
   const midpoint = mafs.vec.midpoint(start, end);
-  const {
-    viewTransform,
-    userTransform
-  } = mafs.useTransformContext();
-  const transformToPx = mafs.vec.matrixMult(viewTransform, userTransform);
-  const startPtPx = mafs.vec.transform(start, transformToPx);
-  const endPtPx = mafs.vec.transform(end, transformToPx);
+  const [startPtPx, endPtPx] = useTransform(start, end);
   let startExtend = undefined;
   let endExtend = undefined;
   if (extend) {
-    startExtend = extend.start ? getExtensionCoords(end, start, extend.range) : undefined;
-    endExtend = extend.end ? getExtensionCoords(start, end, extend.range) : undefined;
+    startExtend = extend.start ? getRayIntersectionCoords(end, start, extend.range) : undefined;
+    endExtend = extend.end ? getRayIntersectionCoords(start, end, extend.range) : undefined;
   }
   const line = React.useRef(null);
   const {
@@ -28453,50 +28494,12 @@ function SVGLine(props) {
   });
 }
 
-/**
- * Given two points, find the tips that extends through the points to the edge of the range.
- * @param collinearPoint - The point that the line passes through. Needed to establish slope.
- * @param extendFrom - The point that the line extends from to the edge of the graph.
- */
-const getExtensionCoords = (collinearPoint, extendFrom, range) => {
-  // edges of the graph
-  const [[xMin, xMax], [yMin, yMax]] = range;
-  const [aX, aY] = collinearPoint;
-  const [bX, bY] = extendFrom;
-  const yDiff = bY - aY;
-  const xDiff = bX - aX;
-  const slope = yDiff / xDiff;
-  const yAtXMin = slope * (xMin - aX) + aY;
-  const yAtXMax = slope * (xMax - aX) + aY;
-  const xAtYMin = (yMin - aY) / slope + aX;
-  const xAtYMax = (yMax - aY) / slope + aX;
-
-  // clock analogy to describe quadrants
-  switch (true) {
-    // 12 o'clock to 2:59
-    case yDiff > 0 && xDiff >= 0:
-      return xAtYMax > xMax ? [xMax, yAtXMax] : [xAtYMax, yMax];
-    // 3 o'clock to 5:59
-    case yDiff <= 0 && xDiff > 0:
-      // xAtYMin evaluates to -Infinity here, so we use absolute value
-      return Math.abs(xAtYMin) > xMax ? [xMax, yAtXMax] : [xAtYMin, yMin];
-    // 9 o'clock to 11:59
-    case yDiff >= 0 && xDiff < 0:
-      return xAtYMax < xMin ? [xMin, yAtXMin] : [xAtYMax, yMax];
-    // 6 o'clock to 8:59
-    case yDiff < 0 && xDiff <= 0:
-      return xAtYMin < xMin ? [xMin, yAtXMin] : [xAtYMin, yMin];
-    default:
-      return [xMax, yAtXMax];
-  }
-};
-
 const StyledMovablePoint = props => {
   const hitboxRef = React.useRef(null);
   const {
     point,
     onMove,
-    color = Color__default["default"].blue
+    color = wonderBlocksTokens.color.blue
   } = props;
   const {
     dragging
@@ -28506,12 +28509,7 @@ const StyledMovablePoint = props => {
     onMove,
     constrain: p => p
   });
-  const {
-    viewTransform,
-    userTransform
-  } = mafs.useTransformContext();
-  const transformToPx = mafs.vec.matrixMult(viewTransform, userTransform);
-  const [x, y] = mafs.vec.transform(point, transformToPx);
+  const [[x, y]] = useTransform(point);
   return /*#__PURE__*/React__namespace.createElement("g", {
     ref: hitboxRef,
     className: "movable-point",
@@ -28678,6 +28676,161 @@ const RayGraph = props => {
   }));
 };
 
+const Angle = _ref => {
+  let {
+    centerPoint,
+    endPoints,
+    range,
+    polygonPoints,
+    showAngles
+  } = _ref;
+  const [centerX, centerY] = centerPoint;
+  const areClockwise = clockwise$1([centerPoint, ...endPoints]);
+  const [[startX, startY], [endX, endY]] = areClockwise ? endPoints : endPoints.reverse();
+  const radius = 0.3;
+  const a = mafs.vec.dist(centerPoint, endPoints[0]);
+  const b = mafs.vec.dist(centerPoint, endPoints[1]);
+  const c = mafs.vec.dist(endPoints[0], endPoints[1]);
+
+  // Law of cosines
+  const angle = Math.acos((a ** 2 + b ** 2 - c ** 2) / (2 * a * b));
+  const y1 = centerY + (startY - centerY) / a * radius;
+  const x2 = centerX + (endX - centerX) / b * radius;
+  const x1 = centerX + (startX - centerX) / a * radius;
+  const y2 = centerY + (endY - centerY) / b * radius;
+
+  // Fourth point that would create a rhomboid
+  // Used to calculate the inside of the angle and to create square
+  const [x3, y3] = mafs.vec.add(centerPoint, mafs.vec.add(mafs.vec.sub([x1, y1], centerPoint), mafs.vec.sub([x2, y2], centerPoint)));
+  if (!showAngles) {
+    return isRightAngle(angle) ? /*#__PURE__*/React__namespace.createElement(RightAngleArc, {
+      start: [x1, y1],
+      vertex: [x2, y2],
+      end: [x3, y3]
+    }) : null;
+  }
+
+  // Midpoint betwen ends of arc
+  const isInside = shouldDrawArcInside([x3, y3], centerPoint, range, polygonPoints);
+  const largeArcFlag = isInside ? 1 : 0;
+  const sweepFlag = isInside ? 1 : 0;
+  const arc = `M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${x2} ${y2}`;
+  let angleInDegrees = angle * (180 / Math.PI);
+  // If we have triggered "largArcFlag", the angle should be greater than 180
+  if (isInside) {
+    angleInDegrees = 360 - angleInDegrees;
+  }
+  const angleLabelNumber = parseFloat(angleInDegrees.toFixed(1));
+  const angleLabel = Number.isInteger(angleLabelNumber) ? angleLabelNumber : "≈ " + angleLabelNumber;
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("filter", {
+    id: "background",
+    x: "-5%",
+    width: "110%",
+    y: "0%",
+    height: "100%"
+  }, /*#__PURE__*/React__namespace.createElement("feFlood", {
+    floodColor: "#FFF",
+    floodOpacity: "0.5"
+  }), /*#__PURE__*/React__namespace.createElement("feComposite", {
+    operator: "over",
+    in: "SourceGraphic"
+  }))), !isInside && isRightAngle(angle) ? /*#__PURE__*/React__namespace.createElement(RightAngleArc, {
+    start: [x1, y1],
+    vertex: [x2, y2],
+    end: [x3, y3]
+  }) : /*#__PURE__*/React__namespace.createElement("g", {
+    style: {
+      transform: `var(--mafs-view-transform) var(--mafs-user-transform)`
+    }
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: arc,
+    strokeWidth: 0.02,
+    fill: "none"
+  })), /*#__PURE__*/React__namespace.createElement(mafs.Text, {
+    x: x3,
+    y: y3,
+    size: 15,
+    svgTextProps: {
+      filter: "url(#background)",
+      fontWeight: "bold"
+    }
+    // Shift position if text is too close to movable point
+    ,
+    attach: y3 - centerY > 0 ? "s" : "n",
+    attachDistance: Math.abs(y3 - centerY) < 0.2 || mafs.vec.dist([x3, y3], centerPoint) < 0.3 ? 20 : 10
+  }, angleLabel, "\xB0"));
+};
+const RightAngleArc = _ref2 => {
+  let {
+    start: [x1, y1],
+    vertex: [x2, y2],
+    end: [x3, y3]
+  } = _ref2;
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    style: {
+      transform: `var(--mafs-view-transform) var(--mafs-user-transform)`
+    }
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: `M ${x1} ${y1} L ${x3} ${y3} M ${x3} ${y3} L ${x2} ${y2}`,
+    strokeWidth: 0.02,
+    fill: "none"
+  }));
+};
+const isRightAngle = angle => Math.abs(angle - Math.PI / 2) < 0.01;
+const shouldDrawArcInside = (midPoint, vertex, range, polygonPoints) => {
+  const rangeIntersectionPoint = getRayIntersectionCoords(vertex, midPoint, range);
+  const lines = getLines(polygonPoints);
+  let lineIntersections = 0;
+  lines.forEach(line => linesIntersect([vertex, rangeIntersectionPoint], line) && lineIntersections++);
+
+  // The intersection check will sometimes return false if it intersects with
+  // another vertex, so in the case we get 0 intersections, we check for points.
+  if (lineIntersections === 0) {
+    // find point in array
+    const midpointIndex = polygonPoints.findIndex(_ref3 => {
+      let [x, y] = _ref3;
+      return x === midPoint[0] && y === midPoint[1];
+    });
+    // get array sans point and adjacent points
+    const [prev, next] = [(midpointIndex - 1 + polygonPoints.length) % polygonPoints.length, (midpointIndex + 1) % polygonPoints.length];
+    const [[lineAx, lineAy], [lineBx, lineBy]] = [midPoint, rangeIntersectionPoint];
+    for (let i = 0; i < polygonPoints.length; i++) {
+      if ([prev, midpointIndex, next].includes(i)) {
+        continue;
+      }
+      const [x, y] = polygonPoints[i];
+      const intersectsPoint = (y - lineAy) * (lineBx - lineAx) === (lineBy - lineAy) * (x - lineAx);
+      if (intersectsPoint) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  // If the number of intersections is even, the angle is inside the polygon
+  return isEven(lineIntersections);
+};
+const getLines = points => points.map((point, i) => {
+  const next = points[(i + 1) % points.length];
+  return [point, next];
+});
+
+// https://stackoverflow.com/a/24392281/7347484
+// The "intersects" function in geometry doesn't seem to work for this use case
+const linesIntersect = (_ref4, _ref5) => {
+  let [[a, b], [c, d]] = _ref4;
+  let [[p, q], [r, s]] = _ref5;
+  const determinant = (c - a) * (s - q) - (r - p) * (d - b);
+  if (determinant === 0) {
+    return false;
+  } else {
+    const lambda = ((s - q) * (r - a) + (p - r) * (s - b)) / determinant;
+    const gamma = ((b - d) * (r - a) + (c - a) * (s - b)) / determinant;
+    return 0 < lambda && lambda < 1 && 0 < gamma && gamma < 1;
+  }
+};
+const isEven = n => n % 2 === 0;
+
 const PolygonGraph = props => {
   const [focused, setFocused] = React__namespace.useState(false);
   const [hovered, setHovered] = React__namespace.useState(false);
@@ -28686,7 +28839,9 @@ const PolygonGraph = props => {
   } = props;
   const {
     coords,
-    type
+    type,
+    showAngles,
+    range
   } = props.graphState;
   const points = coords ?? [[0, 0]];
   const pointsSum = points.reduce((acc, point) => mafs.vec.add(acc, point), [0, 0]);
@@ -28710,6 +28865,21 @@ const PolygonGraph = props => {
     svgPolygonProps: {
       strokeWidth: active ? "var(--movable-line-stroke-weight-active)" : "var(--movable-line-stroke-weight)"
     }
+  }), points.map((point, i) => {
+    const pt1 = points.at(i - 1);
+    const pt2 = points[(i + 1) % points.length];
+    if (!pt1 || !pt2) {
+      return null;
+    }
+    return /*#__PURE__*/React__namespace.createElement(Angle, {
+      key: "angle-" + i,
+      centerPoint: point,
+      endPoints: [pt1, pt2],
+      active: active,
+      range: range,
+      polygonPoints: points,
+      showAngles: !!showAngles
+    });
   }), /*#__PURE__*/React__namespace.createElement(mafs.Polygon, {
     points: [...points],
     color: "transparent",
@@ -28727,7 +28897,7 @@ const PolygonGraph = props => {
       className: "movable-polygon"
     }
   }), points.map((point, i) => /*#__PURE__*/React__namespace.createElement(StyledMovablePoint, {
-    key: i,
+    key: "point-" + i,
     point: point,
     onMove: destination => dispatch(moveControlPoint(i, destination)),
     "data-testid": type + i
@@ -29409,7 +29579,11 @@ var components = /*#__PURE__*/Object.freeze({
  * If a graphie URL is provided in `backgroundImage`, will return the rendered graphie background.
  * Otherwise, returns `null`.
  */
-const getLegacyGrid = (box, backgroundImage) => {
+const LegacyGrid = _ref => {
+  let {
+    box,
+    backgroundImage
+  } = _ref;
   const {
     url,
     width,
@@ -29423,10 +29597,10 @@ const getLegacyGrid = (box, backgroundImage) => {
         bottom: 0,
         left: 0
       }
-    }, /*#__PURE__*/React__namespace.createElement(context$1.Consumer, null, _ref => {
+    }, /*#__PURE__*/React__namespace.createElement(context$1.Consumer, null, _ref2 => {
       let {
         setAssetStatus
-      } = _ref;
+      } = _ref2;
       return /*#__PURE__*/React__namespace.createElement(SvgImage, {
         src: url,
         width: width,
@@ -29698,10 +29872,10 @@ function initializeGraphState(params) {
       };
     case "polygon":
       return {
-        type: "polygon",
         hasBeenInteractedWith: false,
         range,
         snapStep,
+        ...graph,
         coords: getPolygonCoords({
           graph,
           range,
@@ -29771,9 +29945,10 @@ const getDefaultSegments = _ref => {
         return [5];
     }
   };
+  const defaultRange = [[-10, 10], [-10, 10]];
   return ys(graph.numSegments).map(y => {
     let endpoints = [[-5, y], [5, y]];
-    endpoints = normalizeCoords(endpoints, range);
+    endpoints = normalizeCoords(endpoints, defaultRange);
     endpoints = normalizePoints(range, step, endpoints);
     return endpoints;
   });
@@ -29856,7 +30031,6 @@ const renderGraph = props => {
 };
 const MafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
   const [width, height] = props.box;
-  const legacyGrid = getLegacyGrid([width, height], props.backgroundImage);
   const [state, dispatch] = React__namespace.useReducer(interactiveGraphReducer, props, initializeGraphState);
   React__namespace.useImperativeHandle(ref, () => ({
     getUserInput: () => getGradableGraph(state, props.graph)
@@ -29867,13 +30041,17 @@ const MafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
       height,
       position: "relative"
     }
-  }, legacyGrid, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+  }, /*#__PURE__*/React__namespace.createElement(LegacyGrid, {
+    box: props.box,
+    backgroundImage: props.backgroundImage
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: {
       position: "absolute",
       bottom: 0,
       left: 0
     }
   }, /*#__PURE__*/React__namespace.createElement(mafs.Mafs, {
+    preserveAspectRatio: false,
     viewBox: {
       x: props.range[0],
       y: props.range[1],
@@ -29883,7 +30061,7 @@ const MafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
     zoom: false,
     width: width,
     height: height
-  }, !legacyGrid && /*#__PURE__*/React__namespace.createElement(Grid, props), props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLayer, {
+  }, /*#__PURE__*/React__namespace.createElement(Grid, props), props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLayer, {
     lockedFigures: props.lockedFigures
   }), renderGraph({
     state,
@@ -32777,7 +32955,7 @@ const styles$g = aphrodite.StyleSheet.create({
 });
 
 const BringToFront = {
-  boxShadow: `0 8px 8px ${Color__default["default"].offBlack64}`,
+  boxShadow: `0 8px 8px ${wonderBlocksTokens.color.offBlack64}`,
   zIndex: 1000
 };
 const AnswerPill = props => {
@@ -32833,7 +33011,7 @@ const styles$f = aphrodite.StyleSheet.create({
     backgroundColor: "#00880b"
   },
   incorrect: {
-    backgroundColor: Color__default["default"].offBlack64
+    backgroundColor: wonderBlocksTokens.color.offBlack64
   },
   pill: {
     // Reset the Pill's default height in order to account
@@ -32877,7 +33055,7 @@ class Marker extends React__namespace.Component {
     // default dot
     let args = {
       size: MARKER_SIZE,
-      color: Color__default["default"].white,
+      color: wonderBlocksTokens.color.white,
       icon: iconNull
     };
     if (showCorrectness) {
@@ -32938,7 +33116,7 @@ class Marker extends React__namespace.Component {
 const styles$e = aphrodite.StyleSheet.create({
   marker: {
     position: "absolute",
-    backgroundColor: Color__default["default"].white,
+    backgroundColor: wonderBlocksTokens.color.white,
     borderRadius: MARKER_SIZE,
     // Center marker position based on its maximum size.
     width: MARKER_SIZE,
@@ -32946,7 +33124,7 @@ const styles$e = aphrodite.StyleSheet.create({
     marginLeft: MARKER_SIZE / -2,
     marginTop: MARKER_SIZE / -2,
     // Add a shadow to the marker to make it stand out from the image.
-    boxShadow: `0 8px 8px ${Color__default["default"].offBlack8}`
+    boxShadow: `0 8px 8px ${wonderBlocksTokens.color.offBlack8}`
   },
   // The base and unfilled marker style.
   markerIcon: {
@@ -32956,7 +33134,7 @@ const styles$e = aphrodite.StyleSheet.create({
     boxSizing: "border-box",
     width: MARKER_SIZE,
     height: MARKER_SIZE,
-    border: `2px solid ${Color__default["default"].offBlack64}`,
+    border: `2px solid ${wonderBlocksTokens.color.offBlack64}`,
     borderRadius: MARKER_SIZE
   },
   // The animation that presents the marker to the learner
@@ -32964,11 +33142,11 @@ const styles$e = aphrodite.StyleSheet.create({
     animationName: {
       "0%": {
         transform: "scale(1)",
-        backgroundColor: Color__default["default"].blue
+        backgroundColor: wonderBlocksTokens.color.blue
       },
       "100%": {
         transform: "scale(1.3)",
-        backgroundColor: Color__default["default"].blue
+        backgroundColor: wonderBlocksTokens.color.blue
       }
     },
     animationDirection: "alternate",
@@ -32985,35 +33163,35 @@ const styles$e = aphrodite.StyleSheet.create({
     animationIterationCount: "2"
   },
   markerActive: {
-    outline: `2px solid ${Color__default["default"].blue}`,
+    outline: `2px solid ${wonderBlocksTokens.color.blue}`,
     outlineOffset: 2
   },
   // The learner is making an initial selection
   markerSelected: {
-    boxShadow: `0 8px 8px ${Color__default["default"].offBlack8}`,
-    border: `solid 4px ${Color__default["default"].white}`,
-    backgroundColor: Color__default["default"].blue,
+    boxShadow: `0 8px 8px ${wonderBlocksTokens.color.offBlack8}`,
+    border: `solid 4px ${wonderBlocksTokens.color.white}`,
+    backgroundColor: wonderBlocksTokens.color.blue,
     borderRadius: MARKER_SIZE,
     transform: "rotate(180deg)"
   },
   // The learner has made a selection
   markerFilled: {
     backgroundColor: "#ECF3FE",
-    border: `4px solid ${Color__default["default"].blue}`
+    border: `4px solid ${wonderBlocksTokens.color.blue}`
   },
   markerGraded: {
     width: MARKER_SIZE,
     height: MARKER_SIZE,
     justifyContent: "center",
     alignItems: "center",
-    border: `2px solid ${Color__default["default"].white}`
+    border: `2px solid ${wonderBlocksTokens.color.white}`
   },
   markerCorrect: {
     background: "#00880b" // WB green darkened by 18%
   },
 
   markerIncorrect: {
-    background: Color__default["default"].offBlack64
+    background: wonderBlocksTokens.color.offBlack64
   }
 });
 
@@ -33444,6 +33622,7 @@ class LabelImage extends React__namespace.Component {
       const answerChoicesActive = index === activeMarkerIndex;
       const showAnswerChoice = marker.selected && !answerChoicesActive && !this.state.hideAnswers;
       return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+        key: index,
         style: {
           position: "absolute",
           left: `${marker.x}%`,
@@ -38048,7 +38227,7 @@ const styles$8 = aphrodite.StyleSheet.create({
     // and the "Add highlight" action fails.
     userSelect: "none",
     fontFamily: `"Lato", sans-serif`,
-    padding: `10px ${Spacing__default["default"].medium_16}px`,
+    padding: `10px ${wonderBlocksTokens.spacing.medium_16}px`,
     cursor: "pointer"
   }
 });
@@ -41894,7 +42073,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "20.8.0";
+const libVersion = "20.8.1";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -44777,15 +44956,14 @@ function getWidgetRegex() {
 }
 
 /**
- * Add a widget placeholder using the provided widget type and instance number.
- * ex. addWidget(WidgetType.Radio, 1) => "[[☃ radio 1]]"
+ * Add a widget placeholder using the widget ID.
+ * ex. addWidget("radio 1") => "[[☃ radio 1]]"
  *
- * @param {WidgetType} widgetType
- * @param {number} instance
+ * @param {string} id
  * @returns {string}
  */
-function addWidget(widgetType, instance) {
-  return `[[☃ ${widgetType} ${String(instance)}]]`;
+function addWidget(id) {
+  return `[[☃ ${id}]]`;
 }
 
 /**