@khanacademy/perseus 20.8.0 → 21.0.0

package/dist/es/index.js

@@ -2,7 +2,7 @@ import * as KAS from '@khanacademy/kas';
 import { keyTranslator, CursorContext, createMathField, getCursorContext, DesktopKeypad, convertDotToTimesByLocale, mathQuillInstance, KeypadInput, KeypadType, KeyArray, keypadElementPropType } from '@khanacademy/math-input';
 import * as PerseusLinter from '@khanacademy/perseus-linter';
 import { linterContextDefault, Rule, linterContextProps } from '@khanacademy/perseus-linter';
-import { View, RenderStateRoot, UniqueIDProvider, useUniqueIdWithMock, Text as Text$1 } from '@khanacademy/wonder-blocks-core';
+import { View, RenderStateRoot, UniqueIDProvider, useUniqueIdWithMock, Text as Text$2 } from '@khanacademy/wonder-blocks-core';
 import * as i18n from '@khanacademy/wonder-blocks-i18n';
 import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
 import classNames from 'classnames';
@@ -10,9 +10,8 @@ import * as React from 'react';
 import React__default, { useState, useEffect, useRef } from 'react';
 import _, { debounce as debounce$1 } from 'underscore';
 import Clickable from '@khanacademy/wonder-blocks-clickable';
-import Color, { fade } from '@khanacademy/wonder-blocks-color';
 import { Popover, PopoverContentCore, PopoverContent } from '@khanacademy/wonder-blocks-popover';
-import Spacing from '@khanacademy/wonder-blocks-spacing';
+import { color, spacing } from '@khanacademy/wonder-blocks-tokens';
 import { StyleSheet, css } from 'aphrodite';
 import $ from 'jquery';
 import PropTypes from 'prop-types';
@@ -31,8 +30,7 @@ import { OptionItem, SingleSelect, MultiSelect } from '@khanacademy/wonder-block
 import caretDown from '@phosphor-icons/core/assets/regular/caret-down.svg';
 import caretUp from '@phosphor-icons/core/assets/regular/caret-up.svg';
 import debounce$2 from 'lodash.debounce';
-import { Point as Point$2, vec, useTransformContext, useMovable, Vector, Polygon, Coordinates, Mafs } from 'mafs';
-import { color } from '@khanacademy/wonder-blocks-tokens';
+import { Point as Point$2, useTransformContext, vec, useMovable, Vector, Text as Text$1, Polygon, Coordinates, Mafs } from 'mafs';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import questionIcon from '@phosphor-icons/core/regular/question.svg';
 import { LabelSmall, LabelMedium } from '@khanacademy/wonder-blocks-typography';
@@ -331,16 +329,16 @@ const MathInputIcon = ({
   focused,
   active
 }) => {
-  let color;
+  let fillColor;
   switch (true) {
     case focused || active:
-      color = Color.white;
+      fillColor = color.white;
       break;
     case hovered:
-      color = Color.blue;
+      fillColor = color.blue;
       break;
     default:
-      color = Color.offBlack;
+      fillColor = color.offBlack;
       break;
   }
   const dynamicClass = active || focused ? styles$D.iconActive : styles$D.iconInactive;
@@ -350,7 +348,7 @@ const MathInputIcon = ({
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
-    fill: color,
+    fill: fillColor,
     viewBox: "0 0 256 256"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M112,72a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16h64A8,8,0,0,1,112,72Zm-8,104H80V152a8,8,0,0,0-16,0v24H40a8,8,0,0,0,0,16H64v24a8,8,0,0,0,16,0V192h24a8,8,0,0,0,0-16Zm48,0h64a8,8,0,0,0,0-16H152a8,8,0,0,0,0,16Zm64,16H152a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16Zm-61.66-90.34a8,8,0,0,0,11.32,0L184,83.31l18.34,18.35a8,8,0,0,0,11.32-11.32L195.31,72l18.35-18.34a8,8,0,0,0-11.32-11.32L184,60.69,165.66,42.34a8,8,0,0,0-11.32,11.32L172.69,72,154.34,90.34A8,8,0,0,0,154.34,101.66Z"
@@ -387,7 +385,7 @@ const mapButtonSets = buttonSets => {
 };
 const inputFocused = {
   borderWidth: 2,
-  borderColor: Color.blue,
+  borderColor: color.blue,
   margin: -1
 };
 const styles$D = StyleSheet.create({
@@ -395,35 +393,35 @@ const styles$D = StyleSheet.create({
     display: "flex",
     justifyContent: "center",
     height: "100%",
-    padding: Spacing.xxxSmall_4,
+    padding: spacing.xxxSmall_4,
     borderRadius: 1
   },
   iconInactive: {
-    backgroundColor: Color.offBlack8
+    backgroundColor: color.offBlack8
   },
   iconActive: {
-    backgroundColor: Color.offBlack64
+    backgroundColor: color.offBlack64
   },
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
     borderWidth: 1,
-    borderColor: Color.offBlack50,
+    borderColor: color.offBlack50,
     borderRadius: 3,
-    background: Color.white,
+    background: color.white,
     ":hover": inputFocused
   },
   wrapperFocused: inputFocused,
   wrapperError: {
-    borderColor: Color.red,
-    background: fade(Color.red, 0.08),
+    borderColor: color.red,
+    background: color.fadedRed8,
     ":hover": {
-      borderColor: Color.red
+      borderColor: color.red
     }
   },
   popoverContent: {
     padding: 0,
-    paddingBottom: Spacing.xxSmall_6,
+    paddingBottom: spacing.xxSmall_6,
     maxWidth: "initial"
   }
 });
@@ -1923,7 +1921,7 @@ const KhanAnswerTypes = {
   }
 };
 
-const _excluded$4 = ["scoring"];
+const _excluded$5 = ["scoring"];
 const ERROR_TITLE = i18n._("Oops!");
 const ERROR_MESSAGE = i18n._("Sorry, I don't understand that!");
 
@@ -2011,7 +2009,7 @@ class Expression extends React.Component {
       let {
           scoring
         } = _ref,
-        rubric = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+        rubric = _objectWithoutPropertiesLoose(_ref, _excluded$5);
       const score = Expression.validate(this.getUserInput(), rubric, onInputError || function () {});
 
       // "scoring" is a flag that indicates when we are checking answers.
@@ -18834,7 +18832,7 @@ const isAccessible = widgetInfo => {
   }
   return !!accessible;
 };
-const getAllWidgetTypes$1 = () => {
+const getAllWidgetTypes = () => {
   return _.keys(widgets);
 };
 const upgradeWidgetInfoToLatestVersion = oldWidgetInfo => {
@@ -19103,7 +19101,7 @@ var widgets$1 = /*#__PURE__*/Object.freeze({
   getVersionVector: getVersionVector,
   getPublicWidgets: getPublicWidgets,
   isAccessible: isAccessible,
-  getAllWidgetTypes: getAllWidgetTypes$1,
+  getAllWidgetTypes: getAllWidgetTypes,
   upgradeWidgetInfoToLatestVersion: upgradeWidgetInfoToLatestVersion,
   getRendererPropsForWidgetInfo: getRendererPropsForWidgetInfo,
   traverseChildWidgets: traverseChildWidgets$3,
@@ -19341,6 +19339,9 @@ class Renderer extends React.Component {
         if (!widgetInfo.type || !widgetInfo.alignment) {
           const newValues = {};
           if (!widgetInfo.type) {
+            // TODO: why does widget have no type?
+            // We don't want to derive type from widget ID
+            // see: LEMS-1845
             newValues.type = widgetId.split(" ")[0];
           }
           if (!widgetInfo.alignment) {
@@ -21430,7 +21431,7 @@ InputWithExamples.defaultProps = {
   className: ""
 };
 
-const _excluded$3 = ["keypadElement", "onFocus", "value"];
+const _excluded$4 = ["keypadElement", "onFocus", "value"];
 class SimpleKeypadInput extends React.Component {
   constructor(...args) {
     super(...args);
@@ -21469,7 +21470,7 @@ class SimpleKeypadInput extends React.Component {
         onFocus,
         value
       } = _this$props,
-      rest = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
+      rest = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
     return (
       /*#__PURE__*/
       // @ts-expect-error - TS2769 - No overload matches this call.
@@ -21763,13 +21764,13 @@ const styles$A = StyleSheet.create({
     width: 40
   },
   leftAlign: {
-    paddingLeft: Spacing.xxxSmall_4,
+    paddingLeft: spacing.xxxSmall_4,
     paddingRight: 0
   },
   rightAlign: {
     textAlign: "right",
     paddingLeft: 0,
-    paddingRight: Spacing.xxxSmall_4
+    paddingRight: spacing.xxxSmall_4
   },
   answerStateUnanswered: {
     backgroundColor: "#eee",
@@ -22867,19 +22868,19 @@ function ChoiceInner(props) {
 function getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, correct) {
   let backgroundColor;
   let borderColor;
-  let color;
+  let color$1;
   if (!showCorrectness && pressed) {
-    borderColor = Color.blue;
-    color = Color.blue;
+    borderColor = color.blue;
+    color$1 = color.blue;
     backgroundColor = "transparent";
   } else if (checked) {
-    const bg = showCorrectness && correct ? Color.green : Color.blue;
-    color = white$1;
+    const bg = showCorrectness && correct ? color.green : color.blue;
+    color$1 = white$1;
     backgroundColor = bg;
     borderColor = bg;
   } else {
-    borderColor = Color.offBlack64;
-    color = Color.offBlack64;
+    borderColor = color.offBlack64;
+    color$1 = color.offBlack64;
   }
 
   // define shape
@@ -22892,7 +22893,7 @@ function getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, cor
   return {
     backgroundColor,
     borderColor,
-    color,
+    color: color$1,
     borderRadius
   };
 }
@@ -22913,7 +22914,7 @@ const ChoiceIcon = function ChoiceIcon(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: css(styles$y.iconWrapper)
   }, /*#__PURE__*/React.createElement(FocusRing, {
-    color: Color.blue,
+    color: color.blue,
     visible: focused || hovered,
     multipleSelect: multipleSelect
   }, /*#__PURE__*/React.createElement("div", {
@@ -22978,9 +22979,9 @@ const styles$w = StyleSheet.create({
     color: gray68
   },
   circleIncorrectAnswered: {
-    backgroundColor: Color.red,
-    borderColor: Color.red,
-    color: Color.white
+    backgroundColor: color.red,
+    borderColor: color.red,
+    color: color.white
   }
 });
 
@@ -23048,13 +23049,13 @@ const styles$v = StyleSheet.create({
     textTransform: "uppercase"
   },
   correct: {
-    color: Color.green
+    color: color.green
   },
   incorrectAnswered: {
-    color: Color.red
+    color: color.red
   },
   incorrect: {
-    color: Color.offBlack64
+    color: color.offBlack64
   }
 });
 
@@ -23129,7 +23130,7 @@ const Choice = function Choice(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.offBlack
+      color: color.offBlack
     },
     className: descriptionClassName
   }, /*#__PURE__*/React.createElement("div", {
@@ -23172,7 +23173,7 @@ const Choice = function Choice(props) {
     disabled: disabled || apiOptions.readOnly,
     style: {
       flex: 1,
-      color: Color.offBlack,
+      color: color.offBlack,
       userSelect: "text"
     },
     ref: forwardedRef,
@@ -23187,9 +23188,9 @@ const Choice = function Choice(props) {
       flexDirection: "row",
       justifyContent: "center",
       alignContent: "center",
-      paddingTop: Spacing.xSmall_8,
-      paddingBottom: Spacing.xSmall_8,
-      paddingLeft: Spacing.xSmall_8
+      paddingTop: spacing.xSmall_8,
+      paddingBottom: spacing.xSmall_8,
+      paddingLeft: spacing.xSmall_8
     }
   }, /*#__PURE__*/React.createElement(ChoiceIcon, {
     pos: pos,
@@ -23205,7 +23206,7 @@ const Choice = function Choice(props) {
     previouslyAnswered: previouslyAnswered
   }), /*#__PURE__*/React.createElement("span", {
     style: {
-      paddingLeft: Spacing.small_12,
+      paddingLeft: spacing.small_12,
       textAlign: "left",
       flex: 1,
       paddingTop: 4
@@ -23225,7 +23226,7 @@ const Choice = function Choice(props) {
       content: i18n._("Cross out option"),
       closeButtonVisible: true,
       actions: /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Strut, {
-        size: Spacing.medium_16
+        size: spacing.medium_16
       }), /*#__PURE__*/React.createElement(Button, {
         kind: "primary",
         "aria-label": i18n._("Cross out Choice %(letter)s", {
@@ -23273,7 +23274,7 @@ const Choice = function Choice(props) {
   }) => /*#__PURE__*/React.createElement(Icon, {
     icon: ellipsisHorizontalIcon,
     size: 3,
-    color: Color.offBlack64
+    color: color.offBlack64
   })))), showRationale && /*#__PURE__*/React.createElement("div", {
     className: rationaleClassName,
     "data-test-id": `perseus-radio-rationale-content-${pos}`
@@ -23289,7 +23290,7 @@ const styles$u = StyleSheet.create({
     padding: intermediateCheckboxPadding,
     paddingTop: 0,
     marginLeft: 54,
-    color: Color.offBlack64,
+    color: color.offBlack64,
     [mediaQueries.smOrSmaller]: {
       padding: intermediateCheckboxPaddingPhone,
       paddingTop: 0
@@ -23300,14 +23301,14 @@ var Choice$1 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.
   forwardedRef: ref
 })));
 
-const _excluded$2 = ["showContent", "content", "forwardedRef"];
+const _excluded$3 = ["showContent", "content", "forwardedRef"];
 const ChoiceNoneAbove = function ChoiceNoneAbove(props) {
   const {
       showContent,
       content,
       forwardedRef
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$2);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$3);
   const choiceProps = _extends({}, rest, {
     content: showContent ? content :
     /*#__PURE__*/
@@ -24687,8 +24688,8 @@ class Definition extends React.Component {
       pressed
     }) => /*#__PURE__*/React.createElement("span", {
       style: {
-        color: Color.blue,
-        borderBottom: hovered || focused || pressed ? `2px solid ${Color.blue}` : "none"
+        color: color.blue,
+        borderBottom: hovered || focused || pressed ? `2px solid ${color.blue}` : "none"
       }
     }, this.props.togglePrompt))));
   }
@@ -24699,7 +24700,7 @@ Definition.defaultProps = {
 };
 const styles$q = {
   tooltipBody: {
-    color: Color.offBlack,
+    color: color.offBlack,
     fontSize: 20,
     fontWeight: 500,
     lineHeight: "30px"
@@ -24999,7 +25000,7 @@ class GradedGroupAnswerBar extends React.Component {
       onNextQuestion
     } = this.props;
     const answerBarStyle = _extends({}, styles$o.answerBar, {
-      backgroundColor: answerBarState === "CORRECT" ? Color.offWhite : "white",
+      backgroundColor: answerBarState === "CORRECT" ? color.offWhite : "white",
       // Center the "Correct!" message only when there's no next question
       justifyContent: answerBarState === "CORRECT" && !onNextQuestion ? "center" : "space-between"
     });
@@ -25029,7 +25030,7 @@ class GradedGroupAnswerBar extends React.Component {
     }, /*#__PURE__*/React.createElement("span", {
       style: {
         fontSize: 28,
-        color: Color.green
+        color: color.green
       }
     }, /*#__PURE__*/React.createElement(InlineIcon, _extends({}, iconStar, {
       style: {
@@ -25059,7 +25060,7 @@ const styles$o = {
     marginTop: phoneMargin,
     paddingLeft: phoneMargin,
     paddingRight: 10,
-    borderTop: `1px solid ${Color.offBlack50}`
+    borderTop: `1px solid ${color.offBlack50}`
   },
   tryAgainIcon: {
     fontSize: 28,
@@ -25361,7 +25362,7 @@ const styles$n = StyleSheet.create({
     padding: 0,
     border: "none",
     marginTop: 20,
-    color: Color.blue,
+    color: color.blue,
     cursor: "pointer",
     display: "block",
     clear: "both"
@@ -25369,7 +25370,7 @@ const styles$n = StyleSheet.create({
   explanationTitle: {
     backgroundColor: "unset",
     marginTop: 20,
-    color: Color.blue,
+    color: color.blue,
     marginBottom: 10,
     cursor: "pointer",
     fontSize: 14,
@@ -25578,7 +25579,7 @@ const styles$m = StyleSheet.create({
   },
   title: {
     fontSize: 12,
-    color: Color.offBlack64,
+    color: color.offBlack64,
     textTransform: "uppercase",
     marginBottom: 11,
     letterSpacing: 0.8
@@ -25612,7 +25613,7 @@ const styles$m = StyleSheet.create({
     height: 10,
     borderRadius: "100%",
     borderWidth: 2,
-    borderColor: Color.blue,
+    borderColor: color.blue,
     borderStyle: "solid"
   },
   indicatorDotFocused: {
@@ -25620,7 +25621,7 @@ const styles$m = StyleSheet.create({
     borderStyle: "double"
   },
   indicatorDotActive: {
-    backgroundColor: Color.blue,
+    backgroundColor: color.blue,
     width: "100%",
     height: "100%"
   },
@@ -28216,6 +28217,58 @@ const normalizeCoords = (coordsList, ranges) => coordsList.map(coords => coords.
   return (coord + ranges[i][1]) / extent;
 }));
 
+const useTransform = (...points) => {
+  const {
+    viewTransform,
+    userTransform
+  } = useTransformContext();
+  const transformToPx = vec.matrixMult(viewTransform, userTransform);
+  const transformedPoints = points.map(point => 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 getLines = points => points.map((point, i) => {
+  const next = points[(i + 1) % points.length];
+  return [point, next];
+});
+
 const defaultStroke = "var(--movable-line-stroke-color)";
 const MovableLine = props => {
   const {
@@ -28226,18 +28279,12 @@ const MovableLine = props => {
     stroke = defaultStroke
   } = props;
   const midpoint = vec.midpoint(start, end);
-  const {
-    viewTransform,
-    userTransform
-  } = useTransformContext();
-  const transformToPx = vec.matrixMult(viewTransform, userTransform);
-  const startPtPx = vec.transform(start, transformToPx);
-  const endPtPx = 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 = useRef(null);
   const {
@@ -28299,50 +28346,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 = useRef(null);
   const {
     point,
     onMove,
-    color = Color.blue
+    color: color$1 = color.blue
   } = props;
   const {
     dragging
@@ -28352,12 +28361,7 @@ const StyledMovablePoint = props => {
     onMove,
     constrain: p => p
   });
-  const {
-    viewTransform,
-    userTransform
-  } = useTransformContext();
-  const transformToPx = vec.matrixMult(viewTransform, userTransform);
-  const [x, y] = vec.transform(point, transformToPx);
+  const [[x, y]] = useTransform(point);
   return /*#__PURE__*/React.createElement("g", {
     ref: hitboxRef,
     className: "movable-point",
@@ -28366,7 +28370,7 @@ const StyledMovablePoint = props => {
       cursor: dragging ? "grabbing" : "grab",
       touchAction: "none",
       outline: "none",
-      "--movable-point-color": color
+      "--movable-point-color": color$1
     }
   }, /*#__PURE__*/React.createElement("circle", {
     className: "movable-point-hitbox",
@@ -28386,7 +28390,7 @@ const StyledMovablePoint = props => {
     cx: x,
     cy: y,
     style: {
-      fill: color
+      fill: color$1
     }
   }));
 };
@@ -28524,6 +28528,167 @@ const RayGraph = props => {
   }));
 };
 
+/**
+ * Wrapper with Mafs transform styles for SVG elements.
+ * Scales and translates the SVG element to match the Mafs view.
+ * Use if you do not need/want to use the hook in `use-transform.ts`.
+ */
+const MafsCssTransformWrapper = ({
+  children
+}) => /*#__PURE__*/React.createElement("g", {
+  style: {
+    transform: `var(--mafs-view-transform) var(--mafs-user-transform)`
+  }
+}, children);
+
+const _excluded$2 = ["children"];
+const TextLabel = _ref => {
+  let {
+      children
+    } = _ref,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  return /*#__PURE__*/React__default.createElement(Text$1, _extends({
+    size: 16,
+    svgTextProps: {
+      filter: "url(#background)",
+      fontWeight: "bold"
+    }
+  }, rest), children);
+};
+const SvgDefs = () => /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("filter", {
+  id: "background",
+  x: "-5%",
+  width: "110%",
+  y: "0%",
+  height: "100%"
+}, /*#__PURE__*/React__default.createElement("feFlood", {
+  floodColor: "#FFF",
+  floodOpacity: "0.64"
+}), /*#__PURE__*/React__default.createElement("feComposite", {
+  operator: "over",
+  in: "SourceGraphic"
+})));
+
+const Angle = ({
+  centerPoint,
+  endPoints,
+  range,
+  polygonLines,
+  showAngles
+}) => {
+  const [centerX, centerY] = centerPoint;
+  const areClockwise = clockwise$1([centerPoint, ...endPoints]);
+  const [[startX, startY], [endX, endY]] = areClockwise ? endPoints : endPoints.reverse();
+  const radius = 0.3;
+  const a = vec.dist(centerPoint, endPoints[0]);
+  const b = vec.dist(centerPoint, endPoints[1]);
+  const c = vec.dist(endPoints[0], endPoints[1]);
+
+  // Law of cosines
+  const angle = Math.acos((a ** 2 + b ** 2 - c ** 2) / (2 * a * b));
+  const y1 = centerY + (startY - centerY) / a * radius;
+  const x2 = centerX + (endX - centerX) / b * radius;
+  const x1 = centerX + (startX - centerX) / a * radius;
+  const y2 = centerY + (endY - centerY) / b * radius;
+
+  // Fourth point that would create a rhomboid
+  // Used to calculate the inside of the angle and to create square
+  const [x3, y3] = vec.add(centerPoint, vec.add(vec.sub([x1, y1], centerPoint), vec.sub([x2, y2], centerPoint)));
+  if (!showAngles) {
+    return isRightAngle(angle) ? /*#__PURE__*/React.createElement(RightAngleSquare, {
+      start: [x1, y1],
+      vertex: [x2, y2],
+      end: [x3, y3]
+    }) : null;
+  }
+
+  // Midpoint betwen ends of arc
+  const isOutside = shouldDrawArcOutside([x3, y3], centerPoint, range, polygonLines);
+  const largeArcFlag = isOutside ? 1 : 0;
+  const sweepFlag = isOutside ? 1 : 0;
+  const arc = `M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${x2} ${y2}`;
+  let angleInDegrees = angle * (180 / Math.PI);
+  // If we have triggered "largArcFlag", the angle should be greater than 180
+  if (isOutside) {
+    angleInDegrees = 360 - angleInDegrees;
+  }
+  const angleLabelNumber = parseFloat(angleInDegrees.toFixed(1));
+  const angleLabel = Number.isInteger(angleLabelNumber) ? angleLabelNumber : "≈ " + angleLabelNumber;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
+    id: "background",
+    x: "-5%",
+    width: "110%",
+    y: "0%",
+    height: "100%"
+  }, /*#__PURE__*/React.createElement("feFlood", {
+    floodColor: "#FFF",
+    floodOpacity: "0.5"
+  }), /*#__PURE__*/React.createElement("feComposite", {
+    operator: "over",
+    in: "SourceGraphic"
+  }))), !isOutside && isRightAngle(angle) ? /*#__PURE__*/React.createElement(RightAngleSquare, {
+    start: [x1, y1],
+    vertex: [x2, y2],
+    end: [x3, y3]
+  }) : /*#__PURE__*/React.createElement(MafsCssTransformWrapper, null, /*#__PURE__*/React.createElement("path", {
+    d: arc,
+    strokeWidth: 0.02,
+    fill: "none"
+  })), /*#__PURE__*/React.createElement(TextLabel, {
+    x: x3,
+    y: y3,
+    attach: y3 - centerY > 0 ? "s" : "n",
+    attachDistance: Math.abs(y3 - centerY) < 0.2 || vec.dist([x3, y3], centerPoint) < 0.3 ? 20 : 10
+  }, angleLabel, "\xB0"));
+};
+
+/**
+ * This is broken out into its own component so that it can be used for an early return
+ * (see line 55 or https://github.com/Khan/perseus/blob/84bbd882b11d16871e1b813a0b901f3b903d5479/packages/perseus/src/widgets/interactive-graphs/graphs/components/angle.tsx#L53-L57)
+ */
+const RightAngleSquare = ({
+  start: [x1, y1],
+  vertex: [x2, y2],
+  end: [x3, y3]
+}) => /*#__PURE__*/React.createElement(MafsCssTransformWrapper, null, /*#__PURE__*/React.createElement("path", {
+  d: `M ${x1} ${y1} L ${x3} ${y3} M ${x3} ${y3} L ${x2} ${y2}`,
+  strokeWidth: 0.02,
+  fill: "none"
+}));
+const isRightAngle = angle => Math.abs(angle - Math.PI / 2) < 0.01;
+
+/**
+ * Determines if an angle is an inside (false) or outside (true) angle.
+ * They way, we know to flip the `largeArc` and `sweepArc` flags.
+ * Uses the priciple that a ray from a point inside a polygon will intersect
+ * with an odd number of lines, while a ray from a point outside the polygon
+ * will intersect with an even number of lines.
+ * https://stackoverflow.com/questions/217578/how-can-i-determine-whether-a-2d-point-is-within-a-polygon
+ */
+const shouldDrawArcOutside = (midpoint, vertex, range, polygonLines) => {
+  // Create a ray from the midpoint (inside angle) to the edge of the range
+  const rangeIntersectionPoint = getRayIntersectionCoords(midpoint, vertex, range);
+  let lineIntersectionCount = 0;
+  polygonLines.forEach(line => linesIntersect([vertex, rangeIntersectionPoint], line) && lineIntersectionCount++);
+
+  // If the number of intersections is even, the angle is inside the polygon
+  return !isEven(lineIntersectionCount);
+};
+
+// https://stackoverflow.com/a/24392281/7347484
+// The "intersects" function in geometry doesn't seem to work for this use case
+const linesIntersect = ([[a, b], [c, d]], [[p, q], [r, s]]) => {
+  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 => {
   var _points$length;
   const [focused, setFocused] = React.useState(false);
@@ -28533,7 +28698,10 @@ const PolygonGraph = props => {
   } = props;
   const {
     coords,
-    type
+    type,
+    showAngles,
+    showSides,
+    range
   } = props.graphState;
   const points = coords != null ? coords : [[0, 0]];
   const pointsSum = points.reduce((acc, point) => vec.add(acc, point), [0, 0]);
@@ -28551,12 +28719,36 @@ const PolygonGraph = props => {
     constrain: p => p
   });
   const active = hovered || focused || dragging;
+  const lines = getLines(points);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Polygon, {
     points: [...points],
     color: "var(--movable-line-stroke-color)",
     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.createElement(Angle, {
+      key: "angle-" + i,
+      centerPoint: point,
+      endPoints: [pt1, pt2],
+      active: active,
+      range: range,
+      polygonLines: lines,
+      showAngles: !!showAngles
+    });
+  }), showSides && lines.map(([start, end], i) => {
+    const [x, y] = vec.midpoint(start, end);
+    const length = parseFloat(vec.dist(start, end).toFixed(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",
@@ -28574,7 +28766,7 @@ const PolygonGraph = props => {
       className: "movable-polygon"
     }
   }), points.map((point, i) => /*#__PURE__*/React.createElement(StyledMovablePoint, {
-    key: i,
+    key: "point-" + i,
     point: point,
     onMove: destination => dispatch(moveControlPoint(i, destination)),
     "data-testid": type + i
@@ -29256,7 +29448,10 @@ 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 = ({
+  box,
+  backgroundImage
+}) => {
   const {
     url,
     width,
@@ -29533,17 +29728,17 @@ function initializeGraphState(params) {
         })
       };
     case "polygon":
-      return {
-        type: "polygon",
+      return _extends({
         hasBeenInteractedWith: false,
         range,
-        snapStep,
+        snapStep
+      }, graph, {
         coords: getPolygonCoords({
           graph,
           range,
           step
         })
-      };
+      });
     case "angle":
     case "point":
     case "circle":
@@ -29558,30 +29753,39 @@ function initializeGraphState(params) {
 // TS v4 doesn't narrow return types, while v5 does.
 // Instead of updating to v5, using generic type to relate input and output types.
 function getGradableGraph(state, initialGraph) {
-  var _state$coords;
   if (!state.hasBeenInteractedWith) {
-    return initialGraph;
+    return {
+      type: initialGraph.type
+    };
   }
-  switch (true) {
-    // coords: Array of CollinearTuple
-    case state.type === "linear-system" && initialGraph.type === "linear-system":
-    case state.type === "segment" && initialGraph.type === "segment":
-      return _extends({}, initialGraph, {
-        coords: state.coords
-      });
-    // coords: CollinearTuple
-    case state.type === "linear" && initialGraph.type === "linear":
-    case state.type === "ray" && initialGraph.type === "ray":
-      return _extends({}, initialGraph, {
-        coords: (_state$coords = state.coords) == null ? void 0 : _state$coords[0]
-      });
-    case state.type === "polygon" && initialGraph.type === "polygon":
-      return _extends({}, initialGraph, {
-        coords: state.coords
-      });
-    default:
-      throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
+  if (initialGraph.type === "linear-system" && state.type === "linear-system") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
+  if (state.type === "segment" && initialGraph.type === "segment") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
+  if (state.type === "linear" && initialGraph.type === "linear") {
+    var _state$coords;
+    return _extends({}, initialGraph, {
+      coords: (_state$coords = state.coords) == null ? void 0 : _state$coords[0]
+    });
+  }
+  if (state.type === "ray" && initialGraph.type === "ray") {
+    var _state$coords2;
+    return _extends({}, initialGraph, {
+      coords: (_state$coords2 = state.coords) == null ? void 0 : _state$coords2[0]
+    });
+  }
+  if (state.type === "polygon" && initialGraph.type === "polygon") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
   }
+  throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
 }
 const getDefaultSegments = ({
   graph,
@@ -29604,9 +29808,10 @@ const getDefaultSegments = ({
         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;
   });
@@ -29688,7 +29893,6 @@ const renderGraph = props => {
 };
 const MafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [width, height] = props.box;
-  const legacyGrid = getLegacyGrid([width, height], props.backgroundImage);
   const [state, dispatch] = React.useReducer(interactiveGraphReducer, props, initializeGraphState);
   React.useImperativeHandle(ref, () => ({
     getUserInput: () => getGradableGraph(state, props.graph)
@@ -29699,13 +29903,17 @@ const MafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
       height,
       position: "relative"
     }
-  }, legacyGrid, /*#__PURE__*/React.createElement(View, {
+  }, /*#__PURE__*/React.createElement(LegacyGrid, {
+    box: props.box,
+    backgroundImage: props.backgroundImage
+  }), /*#__PURE__*/React.createElement(View, {
     style: {
       position: "absolute",
       bottom: 0,
       left: 0
     }
   }, /*#__PURE__*/React.createElement(Mafs, {
+    preserveAspectRatio: false,
     viewBox: {
       x: props.range[0],
       y: props.range[1],
@@ -29715,7 +29923,7 @@ const MafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
     zoom: false,
     width: width,
     height: height
-  }, !legacyGrid && /*#__PURE__*/React.createElement(Grid, props), props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLayer, {
+  }, /*#__PURE__*/React.createElement(SvgDefs, null), /*#__PURE__*/React.createElement(Grid, props), props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLayer, {
     lockedFigures: props.lockedFigures
   }), renderGraph({
     state,
@@ -31369,18 +31577,18 @@ class InteractiveGraph extends React.Component {
     const angle = GraphUtils.findAngle(coords[2], coords[0], coords[1]);
     return angle.toFixed(0) + "\u00B0 angle" + " at (" + coords[1].join(", ") + ")";
   }
-  static validate(
-  // TODO(kevinb): rename state to userInput
-  // state === userInput
-  state, rubric, component) {
+  static validate(userInput, rubric, component) {
     // When nothing has moved, there will neither be coords nor the
     // circle's center/radius fields. When those fields are absent, skip
     // all these checks; just go mark the answer as empty.
-    // @ts-expect-error - TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'. | TS2339 - Property 'center' does not exist on type 'PerseusGraphType'. | TS2339 - Property 'radius' does not exist on type 'PerseusGraphType'.
-    const hasValue = !!(state.coords || state.center && state.radius);
-    if (state.type === rubric.correct.type && hasValue) {
-      if (state.type === "linear" && rubric.correct.type === "linear" && state.coords != null) {
-        const guess = state.coords;
+    const hasValue = Boolean(
+    // @ts-expect-error - TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'.
+    userInput.coords ||
+    // @ts-expect-error - TS2339 - Property 'center' does not exist on type 'PerseusGraphType'. | TS2339 - Property 'radius' does not exist on type 'PerseusGraphType'.
+    userInput.center && userInput.radius);
+    if (userInput.type === rubric.correct.type && hasValue) {
+      if (userInput.type === "linear" && rubric.correct.type === "linear" && userInput.coords != null) {
+        const guess = userInput.coords;
         const correct = rubric.correct.coords;
 
         // If both of the guess points are on the correct line, it's
@@ -31397,8 +31605,8 @@ class InteractiveGraph extends React.Component {
             message: null
           };
         }
-      } else if (state.type === "linear-system" && rubric.correct.type === "linear-system" && state.coords != null) {
-        const guess = state.coords;
+      } else if (userInput.type === "linear-system" && rubric.correct.type === "linear-system" && userInput.coords != null) {
+        const guess = userInput.coords;
         const correct = rubric.correct.coords;
         if (collinear(correct[0][0], correct[0][1], guess[0][0]) && collinear(correct[0][0], correct[0][1], guess[0][1]) && collinear(correct[1][0], correct[1][1], guess[1][0]) && collinear(correct[1][0], correct[1][1], guess[1][1]) || collinear(correct[0][0], correct[0][1], guess[1][0]) && collinear(correct[0][0], correct[0][1], guess[1][1]) && collinear(correct[1][0], correct[1][1], guess[0][0]) && collinear(correct[1][0], correct[1][1], guess[0][1])) {
           return {
@@ -31408,9 +31616,9 @@ class InteractiveGraph extends React.Component {
             message: null
           };
         }
-      } else if (state.type === "quadratic" && rubric.correct.type === "quadratic" && state.coords != null) {
+      } else if (userInput.type === "quadratic" && rubric.correct.type === "quadratic" && userInput.coords != null) {
         // If the parabola coefficients match, it's correct.
-        const guessCoeffs = this.getQuadraticCoefficients(state.coords);
+        const guessCoeffs = this.getQuadraticCoefficients(userInput.coords);
         const correctCoeffs = this.getQuadraticCoefficients(
         // @ts-expect-error - TS2345 - Argument of type 'readonly Coord[] | undefined' is not assignable to parameter of type 'readonly Coord[]'.
         rubric.correct.coords);
@@ -31422,8 +31630,8 @@ class InteractiveGraph extends React.Component {
             message: null
           };
         }
-      } else if (state.type === "sinusoid" && rubric.correct.type === "sinusoid" && state.coords != null) {
-        const guessCoeffs = this.getSinusoidCoefficients(state.coords);
+      } else if (userInput.type === "sinusoid" && rubric.correct.type === "sinusoid" && userInput.coords != null) {
+        const guessCoeffs = this.getSinusoidCoefficients(userInput.coords);
         const correctCoeffs = this.getSinusoidCoefficients(
         // @ts-expect-error - TS2345 - Argument of type 'readonly Coord[] | undefined' is not assignable to parameter of type 'readonly Coord[]'.
         rubric.correct.coords);
@@ -31438,8 +31646,8 @@ class InteractiveGraph extends React.Component {
             message: null
           };
         }
-      } else if (state.type === "circle" && rubric.correct.type === "circle") {
-        if (deepEq$1(state.center, rubric.correct.center) && eq(state.radius, rubric.correct.radius)) {
+      } else if (userInput.type === "circle" && rubric.correct.type === "circle") {
+        if (deepEq$1(userInput.center, rubric.correct.center) && eq(userInput.radius, rubric.correct.radius)) {
           return {
             type: "points",
             earned: 1,
@@ -31447,10 +31655,10 @@ class InteractiveGraph extends React.Component {
             message: null
           };
         }
-      } else if (state.type === "point" && rubric.correct.type === "point" && state.coords != null) {
-        var _state$coords;
+      } else if (userInput.type === "point" && rubric.correct.type === "point" && userInput.coords != null) {
+        var _userInput$coords;
         let correct = InteractiveGraph.getPointCoords(rubric.correct, component);
-        const guess = (_state$coords = state.coords) == null ? void 0 : _state$coords.slice();
+        const guess = (_userInput$coords = userInput.coords) == null ? void 0 : _userInput$coords.slice();
         correct = correct.slice();
         // Everything's already rounded so we shouldn't need to do an
         // eq() comparison but _.isEqual(0, -0) is false, so we'll use
@@ -31467,9 +31675,9 @@ class InteractiveGraph extends React.Component {
             message: null
           };
         }
-      } else if (state.type === "polygon" && rubric.correct.type === "polygon" && state.coords != null) {
-        var _state$coords2, _rubric$correct$coord;
-        const guess = (_state$coords2 = state.coords) == null ? void 0 : _state$coords2.slice();
+      } else if (userInput.type === "polygon" && rubric.correct.type === "polygon" && userInput.coords != null) {
+        var _userInput$coords2, _rubric$correct$coord;
+        const guess = (_userInput$coords2 = userInput.coords) == null ? void 0 : _userInput$coords2.slice();
         // @ts-expect-error - TS2322 - Type 'Coord[] | undefined' is not assignable to type 'Coord[]'.
         const correct = (_rubric$correct$coord = rubric.correct.coords) == null ? void 0 : _rubric$correct$coord.slice();
         let match;
@@ -31493,9 +31701,9 @@ class InteractiveGraph extends React.Component {
             message: null
           };
         }
-      } else if (state.type === "segment" && rubric.correct.type === "segment" && state.coords != null) {
+      } else if (userInput.type === "segment" && rubric.correct.type === "segment" && userInput.coords != null) {
         var _rubric$correct$coord2;
-        let guess = state.coords.slice();
+        let guess = userInput.coords.slice();
         let correct = (_rubric$correct$coord2 = rubric.correct.coords) == null ? void 0 : _rubric$correct$coord2.slice();
         guess = _.invoke(guess, "sort").sort();
         // @ts-expect-error - TS2345 - Argument of type '(readonly Coord[])[] | undefined' is not assignable to parameter of type 'Collection<any>'.
@@ -31508,8 +31716,8 @@ class InteractiveGraph extends React.Component {
             message: null
           };
         }
-      } else if (state.type === "ray" && rubric.correct.type === "ray" && state.coords != null) {
-        const guess = state.coords;
+      } else if (userInput.type === "ray" && rubric.correct.type === "ray" && userInput.coords != null) {
+        const guess = userInput.coords;
         const correct = rubric.correct.coords;
         if (
         // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
@@ -31523,8 +31731,8 @@ class InteractiveGraph extends React.Component {
             message: null
           };
         }
-      } else if (state.type === "angle" && rubric.correct.type === "angle") {
-        const guess = state.coords;
+      } else if (userInput.type === "angle" && rubric.correct.type === "angle") {
+        const guess = userInput.coords;
         const correct = rubric.correct.coords;
         let match;
         if (rubric.correct.match === "congruent") {
@@ -31563,7 +31771,7 @@ class InteractiveGraph extends React.Component {
 
     // The input wasn't correct, so check if it's a blank input or if it's
     // actually just wrong
-    if (!hasValue || _.isEqual(state, rubric.graph)) {
+    if (!hasValue || _.isEqual(userInput, rubric.graph)) {
       // We're where we started.
       return {
         type: "invalid",
@@ -32650,7 +32858,7 @@ const styles$g = StyleSheet.create({
 });
 
 const BringToFront = {
-  boxShadow: `0 8px 8px ${Color.offBlack64}`,
+  boxShadow: `0 8px 8px ${color.offBlack64}`,
   zIndex: 1000
 };
 const AnswerPill = props => {
@@ -32703,7 +32911,7 @@ const styles$f = StyleSheet.create({
     backgroundColor: "#00880b"
   },
   incorrect: {
-    backgroundColor: Color.offBlack64
+    backgroundColor: color.offBlack64
   },
   pill: {
     // Reset the Pill's default height in order to account
@@ -32746,7 +32954,7 @@ class Marker extends React.Component {
     // default dot
     let args = {
       size: MARKER_SIZE,
-      color: Color.white,
+      color: color.white,
       icon: iconNull
     };
     if (showCorrectness) {
@@ -32809,7 +33017,7 @@ Marker.defaultProps = {
 const styles$e = StyleSheet.create({
   marker: {
     position: "absolute",
-    backgroundColor: Color.white,
+    backgroundColor: color.white,
     borderRadius: MARKER_SIZE,
     // Center marker position based on its maximum size.
     width: MARKER_SIZE,
@@ -32817,7 +33025,7 @@ const styles$e = 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.offBlack8}`
+    boxShadow: `0 8px 8px ${color.offBlack8}`
   },
   // The base and unfilled marker style.
   markerIcon: {
@@ -32827,7 +33035,7 @@ const styles$e = StyleSheet.create({
     boxSizing: "border-box",
     width: MARKER_SIZE,
     height: MARKER_SIZE,
-    border: `2px solid ${Color.offBlack64}`,
+    border: `2px solid ${color.offBlack64}`,
     borderRadius: MARKER_SIZE
   },
   // The animation that presents the marker to the learner
@@ -32835,11 +33043,11 @@ const styles$e = StyleSheet.create({
     animationName: {
       "0%": {
         transform: "scale(1)",
-        backgroundColor: Color.blue
+        backgroundColor: color.blue
       },
       "100%": {
         transform: "scale(1.3)",
-        backgroundColor: Color.blue
+        backgroundColor: color.blue
       }
     },
     animationDirection: "alternate",
@@ -32856,35 +33064,35 @@ const styles$e = StyleSheet.create({
     animationIterationCount: "2"
   },
   markerActive: {
-    outline: `2px solid ${Color.blue}`,
+    outline: `2px solid ${color.blue}`,
     outlineOffset: 2
   },
   // The learner is making an initial selection
   markerSelected: {
-    boxShadow: `0 8px 8px ${Color.offBlack8}`,
-    border: `solid 4px ${Color.white}`,
-    backgroundColor: Color.blue,
+    boxShadow: `0 8px 8px ${color.offBlack8}`,
+    border: `solid 4px ${color.white}`,
+    backgroundColor: color.blue,
     borderRadius: MARKER_SIZE,
     transform: "rotate(180deg)"
   },
   // The learner has made a selection
   markerFilled: {
     backgroundColor: "#ECF3FE",
-    border: `4px solid ${Color.blue}`
+    border: `4px solid ${color.blue}`
   },
   markerGraded: {
     width: MARKER_SIZE,
     height: MARKER_SIZE,
     justifyContent: "center",
     alignItems: "center",
-    border: `2px solid ${Color.white}`
+    border: `2px solid ${color.white}`
   },
   markerCorrect: {
     background: "#00880b" // WB green darkened by 18%
   },
 
   markerIncorrect: {
-    background: Color.offBlack64
+    background: color.offBlack64
   }
 });
 
@@ -33313,6 +33521,7 @@ class LabelImage extends React.Component {
       const answerChoicesActive = index === activeMarkerIndex;
       const showAnswerChoice = marker.selected && !answerChoicesActive && !this.state.hideAnswers;
       return /*#__PURE__*/React.createElement(View, {
+        key: index,
         style: {
           position: "absolute",
           left: `${marker.x}%`,
@@ -37911,7 +38120,7 @@ const styles$8 = StyleSheet.create({
     // and the "Add highlight" action fails.
     userSelect: "none",
     fontFamily: `"Lato", sans-serif`,
-    padding: `10px ${Spacing.medium_16}px`,
+    padding: `10px ${spacing.medium_16}px`,
     cursor: "pointer"
   }
 });
@@ -41594,7 +41803,7 @@ const VideoTranscriptLink = props => {
         const video = (_result$data = result.data) == null ? void 0 : _result$data.video;
         return /*#__PURE__*/React.createElement(View, {
           style: styles$4.transcriptLink
-        }, /*#__PURE__*/React.createElement(Text$1, null, video == null ? void 0 : video.title), /*#__PURE__*/React.createElement(Strut, {
+        }, /*#__PURE__*/React.createElement(Text$2, null, video == null ? void 0 : video.title), /*#__PURE__*/React.createElement(Strut, {
           size: 10
         }), /*#__PURE__*/React.createElement(Link, {
           href: "/transcript/" + ((video == null ? void 0 : video.contentId) || "videoNotFound"),
@@ -41763,7 +41972,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 = "20.8.0";
+const libVersion = "21.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -44015,6 +44224,140 @@ const registerAllWidgetsForTesting = () => {
   replaceDeprecatedWidgets();
 };
 
+// These are all the current widgets that require user-input and are supported for automatic scoring
+const QUESTION_WIDGETS = ["numeric-input", "input-number", "radio", "interactive-graph", "interactive-number-line", "categorizer", "plotter", "orderer", "protractor", "matcher", "sorter"];
+
+/**
+ * Regex for widget placeholders in a string.
+ *
+ * First capture group is the widget ID (ex. 'radio 1')
+ * Second capture group is the widget type (ex. "radio)
+ * exec return will look like: ['[[☃ radio 1]]', 'radio 1', 'radio']
+ */
+function getWidgetRegex() {
+  return /\[\[☃ ([A-Za-z0-9- ]+)\]\]/g;
+}
+
+/**
+ * Add a widget placeholder using the widget ID.
+ * ex. addWidget("radio 1") => "[[☃ radio 1]]"
+ *
+ * @param {string} id
+ * @returns {string}
+ */
+function addWidget(id) {
+  return `[[☃ ${id}]]`;
+}
+
+/**
+ * Get a widget type by a widget's ID
+ * (please don't derive type from ID)
+ *
+ * @param {string} widgetId the ID of the widget
+ * @param {PerseusWidgetsMap} widgetMap widget ID to widget map
+ * @returns {string} the widget type (ie "radio")
+ */
+function getWidgetTypeByWidgetId(WidgetId, widgetMap) {
+  var _widget$type;
+  const widget = widgetMap[WidgetId];
+  return (_widget$type = widget == null ? void 0 : widget.type) != null ? _widget$type : null;
+}
+
+/**
+ * Does the content have a specific type of widget?
+ *
+ * @param {string} type the type of the widget in question (ie "radio")
+ * @param {string} content the string to search through
+ * @param {PerseusWidgetsMap} widgetMap widget ID to widget map
+ * @returns {boolean} if the content includes the widget type
+ */
+function contentHasWidgetType(type, content, widgetMap) {
+  return getWidgetIdsFromContentByType(type, content, widgetMap).length > 0;
+}
+
+/**
+ * Extract all widget IDs, which includes the widget type and instance number.
+ * example output: ['radio 1', 'categorizer 1', 'categorizor 2']
+ *
+ * Content should contain Perseus widget placeholders,
+ * which look like: '[[☃ radio 1]]'.
+ *
+ * @param {string} content
+ * @returns {ReadonlyArray<string>} widgetIds
+ */
+function getWidgetIdsFromContent(content) {
+  const widgets = [];
+  const localWidgetRegex = getWidgetRegex();
+  let match = localWidgetRegex.exec(content);
+  while (match !== null) {
+    widgets.push(match[1]);
+    match = localWidgetRegex.exec(content);
+  }
+  return widgets;
+}
+
+/**
+ * Get a list of widget IDs from content,
+ * but only for specific widget types
+ *
+ * @param {string} type the type of widget (ie "radio")
+ * @param {string} content the string to parse
+ * @param {PerseusWidgetsMap} widgetMap widget ID to widget map
+ * @returns {ReadonlyArray<string>} the widget type (ie "radio")
+ */
+function getWidgetIdsFromContentByType(type, content, widgetMap) {
+  const rv = [];
+  const widgetIdsInContent = getWidgetIdsFromContent(content);
+  widgetIdsInContent.forEach(widgetId => {
+    const widget = widgetMap[widgetId];
+    if ((widget == null ? void 0 : widget.type) === type) {
+      rv.push(widgetId);
+    }
+  });
+  return rv;
+}
+
+/**
+ * Pull the widget map out of ItemData
+ *
+ * @param {PerseusItem} PerseusItem containing a widgetMap
+ * @returns {WidgetMap} the widget map in the PerseusItem
+ */
+function getWidgetsMapFromItemData(itemData) {
+  return itemData.question.widgets;
+}
+
+/**
+ * Get the widget information from a WidgetMap
+ *
+ * @param {string} widgetId the ID of the widget
+ * @returns {PerseusWidget | null} the widget data if it exists, otherwise null
+ */
+function getWidgetFromWidgetMap(widgetId, widgetMap) {
+  var _widgetMap$widgetId;
+  return (_widgetMap$widgetId = widgetMap[widgetId]) != null ? _widgetMap$widgetId : null;
+}
+
+/**
+ * Get select widgets from a widget map.
+ * Useful for multi-items that needs to split
+ * one PerseusItem into several
+ *
+ * @param {ReadonlyArray<string>} widgetIds to extract
+ * @param {PerseusWidgetsMap} widgetMap to extract from
+ * @return {PerseusWidgetsMap} a new widget map with requested widgets
+ */
+function getWidgetsFromWidgetMap(widgetIds, widgetMap) {
+  const widgets = {};
+  widgetIds.forEach(widgetId => {
+    const widget = getWidgetFromWidgetMap(widgetId, widgetMap);
+    if (widget) {
+      widgets[widgetId] = widget;
+    }
+  });
+  return widgets;
+}
+
 /**
  * This function extracts the answers from the widgets.
  *
@@ -44425,18 +44768,15 @@ const INDIVIDUAL_ANSWER_WIDGETS = ["interactive-graph", "categorizer", "grapher"
 
 /* Widgets that are supported for automatic scoring */
 const SUPPORTED_WIDGETS = ["radio", "numeric-input", "input-number", "expression", ...INDIVIDUAL_ANSWER_WIDGETS];
-const getWidgetTypeFromWidgetKey = widgetKey => {
-  return widgetKey.split(" ")[0];
-};
 
 /* Verify if the perseus item has supported widgets for automatic scoring */
-const isWrongAnswerSupported = widgetKeys => {
-  return widgetKeys.length !== 0 && widgetKeys.every(widgetKey => SUPPORTED_WIDGETS.includes(getWidgetTypeFromWidgetKey(widgetKey)));
+const isWrongAnswerSupported = (widgetIds, widgetMap) => {
+  return widgetIds.length !== 0 && widgetIds.every(widgetId => SUPPORTED_WIDGETS.includes(getWidgetTypeByWidgetId(widgetId, widgetMap)));
 };
 
-/* Verify if the widget key has an individual answer for the coach report view  */
-const shouldHaveIndividualAnswer = widgetKey => {
-  return INDIVIDUAL_ANSWER_WIDGETS.includes(getWidgetTypeFromWidgetKey(widgetKey));
+/* Verify if the widget ID has an individual answer for the coach report view  */
+const shouldHaveIndividualAnswer = (widgetId, widgetMap) => {
+  return INDIVIDUAL_ANSWER_WIDGETS.includes(getWidgetTypeByWidgetId(widgetId, widgetMap));
 };
 
 /* Returns the answer userInput submission for currently supported widgets */
@@ -44455,29 +44795,30 @@ const getAnswerFromUserInput = (widgetType, userInput) => {
   return userInput;
 };
 
-/* Returns the correct answer for a given widget key and Perseus Item */
+/* Returns the correct answer for a given widget ID and Perseus Item */
 // TODO (LEMS-1835): We should fix the resonse type from getWidget to be specific.
 // TODO (LEMS-1836): We should also consider adding the getOneCorrectAnswerFromRubric method to all widgets.
-const getCorrectAnswerForWidgetKey = (widgetKey, itemData) => {
-  const rubric = itemData.question.widgets[widgetKey].options;
-  const widgetType = getWidgetTypeFromWidgetKey(widgetKey);
+const getCorrectAnswerForWidgetId = (widgetId, itemData) => {
+  const rubric = itemData.question.widgets[widgetId].options;
+  const widgetMap = getWidgetsMapFromItemData(itemData);
+  const widgetType = getWidgetTypeByWidgetId(widgetId, widgetMap);
   const widget = getWidget(widgetType);
 
   // @ts-expect-error - TS2339 - Property 'getOneCorrectAnswerFromRubric' does not exist on type 'ComponentType<any>'.
   return widget == null || widget.getOneCorrectAnswerFromRubric == null ? void 0 : widget.getOneCorrectAnswerFromRubric(rubric);
 };
 
-/* Verify if the widget key exists in the content string of the Perseus Item */
-const isWidgetKeyInContent = (perseusItem, widgetKey) => {
-  return perseusItem.question.content.indexOf(widgetKey) !== -1;
+/* Verify if the widget ID exists in the content string of the Perseus Item */
+const isWidgetIdInContent = (perseusItem, widgetId) => {
+  return perseusItem.question.content.indexOf(widgetId) !== -1;
 };
 
-/* Return an array of all the widget keys that exist in the content string of a Perseus Item */
-const getValidWidgetKeys = perseusItem => {
+/* Return an array of all the widget IDs that exist in the content string of a Perseus Item */
+const getValidWidgetIds = perseusItem => {
   const {
     widgets
   } = perseusItem.question;
-  return keys(widgets).filter(key => isWidgetKeyInContent(perseusItem, key));
+  return keys(widgets).filter(id => isWidgetIdInContent(perseusItem, id));
 };
 
 /**
@@ -44525,12 +44866,113 @@ const genericPerseusItemData = {
  * uses a basic Perseus object and updates it with custom values as needed.
  *
  * @param {Partial<PerseusItem>} customFields
- * @returns PerseusItem
+ * @returns {PerseusItem}
  */
 function generateTestPerseusItem(customFields = {}) {
   return _extends({}, genericPerseusItemData, customFields);
 }
 
+/**
+ * Creates an object with the bare amount
+ * of data to be a properly typed RadioWidget
+ *
+ * @returns {RadioWidget} skeleton RadioWidget for testing
+ */
+function generateTestRadioWidget() {
+  return {
+    type: "radio",
+    options: {
+      choices: []
+    }
+  };
+}
+
+/**
+ * Creates an object with the bare amount
+ * of data to be a properly typed InteractiveGraphWidget
+ *
+ * @returns {InteractiveGraphWidget} skeleton InteractiveGraphWidget for testing
+ */
+function generateTestInteractiveGraphWidget() {
+  return {
+    type: "interactive-graph",
+    options: {
+      step: [1, 1],
+      gridStep: [1, 1],
+      snapStep: [1, 1],
+      markings: "graph",
+      labels: ["x", "y"],
+      showProtractor: false,
+      showRuler: false,
+      rulerLabel: "mm",
+      rulerTicks: 2,
+      range: [[-10, 10], [-10, 10]],
+      graph: {
+        type: "angle"
+      },
+      correct: {
+        type: "angle"
+      }
+    }
+  };
+}
+
+/**
+ * Creates an object with the bare amount
+ * of data to be a properly typed InteractiveGraphWidget
+ *
+ * @returns {InteractiveGraphWidget} skeleton InteractiveGraphWidget for testing
+ */
+function generateTestCategorizerWidget() {
+  return {
+    type: "categorizer",
+    options: {
+      items: [],
+      categories: [],
+      randomizeItems: false,
+      static: false,
+      values: []
+    }
+  };
+}
+
+/**
+ * Creates an object with the bare amount
+ * of data to be a properly typed ExpressionWidget
+ *
+ * @returns {ExpressionWidget} skeleton ExpressionWidget for testing
+ */
+function generateTestExpressionWidget() {
+  return {
+    type: "expression",
+    options: {
+      answerForms: [],
+      buttonSets: ["basic"],
+      functions: [],
+      times: false
+    }
+  };
+}
+
+/**
+ * Creates an object with the bare amount
+ * of data to be a properly typed NumericInputWidget
+ *
+ * @returns {NumericInputWidget} skeleton NumericInputWidget for testing
+ */
+function generateTestNumericInputWidget() {
+  return {
+    type: "numeric-input",
+    options: {
+      answers: [],
+      labelText: "",
+      size: "normal",
+      coefficient: false,
+      static: false
+    }
+  };
+}
+
 /**
  * Some helpers for CEDAR logging. CEDAR convention dictates
  * that enum values should be upper case. Ex: for the
@@ -44585,163 +45027,6 @@ function convertWidgetNameToEnum(name) {
   }
   return widgetEnum;
 }
-function getWidgetTypeFromWidgetId(widgetId) {
-  const [widgetType, widgetNumber] = widgetId.split(" ");
-  if (!widgetNumber) {
-    throw new Error(`Incorrect format for widget ID: ${widgetId}`);
-  }
-  if (!widgetNameToEnum[widgetType]) {
-    throw new Error(`Unknown widget type (${widgetType}) in widget ID: ${widgetId}`);
-  }
-  return widgetType;
-}
-
-let WidgetType = /*#__PURE__*/function (WidgetType) {
-  WidgetType["Categorizer"] = "categorizer";
-  WidgetType["CSProgram"] = "cs-program";
-  WidgetType["Definition"] = "definition";
-  WidgetType["Dropdown"] = "dropdown";
-  WidgetType["Explanation"] = "explanation";
-  WidgetType["Expression"] = "expression";
-  WidgetType["GradedGroup"] = "graded-group";
-  WidgetType["GradedGroupAnswerBar"] = "graded-group-answer-bar";
-  WidgetType["GradedGroupSet"] = "graded-group-set";
-  WidgetType["Grapher"] = "grapher";
-  WidgetType["Group"] = "group";
-  WidgetType["Iframe"] = "iframe";
-  WidgetType["Image"] = "image";
-  WidgetType["InputNumber"] = "input-number";
-  WidgetType["Interaction"] = "interaction";
-  WidgetType["InteractiveGraph"] = "interactive-graph";
-  WidgetType["InteractiveNumberLine"] = "interactive-number-line";
-  WidgetType["LabelImage"] = "label-image";
-  WidgetType["Matcher"] = "matcher";
-  WidgetType["Matrix"] = "matrix";
-  WidgetType["Measurer"] = "measurer";
-  WidgetType["Molecule"] = "molecule";
-  WidgetType["NumberLine"] = "number-line";
-  WidgetType["NumericInput"] = "numeric-input";
-  WidgetType["Orderer"] = "orderer";
-  WidgetType["Passage"] = "passage";
-  WidgetType["PassageRef"] = "passage-ref";
-  WidgetType["PassageRefTarget"] = "passage-ref-target";
-  WidgetType["Plotter"] = "plotter";
-  WidgetType["Protractor"] = "protractor";
-  WidgetType["PythonProgram"] = "python-program";
-  WidgetType["Radio"] = "radio";
-  WidgetType["Sorter"] = "sorter";
-  WidgetType["Table"] = "table";
-  WidgetType["Unit"] = "unit";
-  WidgetType["Video"] = "video";
-  WidgetType["VideoTranscriptLink"] = "video-transcript-link";
-  return WidgetType;
-}({});
-// These are all the current widgets that require user-input and are supported for automatic scoring
-const QUESTION_WIDGETS = ["numeric-input", "input-number", "radio", "interactive-graph", "interactive-number-line", "categorizer", "plotter", "orderer", "protractor", "matcher", "sorter"];
-
-/**
- * Regex for widget placeholders in a string.
- *
- * First capture group is the widget ID (ex. 'radio 1')
- * Second capture group is the widget type (ex. "radio)
- * exec return will look like: ['[[☃ radio 1]]', 'radio 1', 'radio']
- */
-function getWidgetRegex() {
-  return /\[\[☃ (([a-z-]+) \d+)\]\]/g;
-}
-
-/**
- * Add a widget placeholder using the provided widget type and instance number.
- * ex. addWidget(WidgetType.Radio, 1) => "[[☃ radio 1]]"
- *
- * @param {WidgetType} widgetType
- * @param {number} instance
- * @returns {string}
- */
-function addWidget(widgetType, instance) {
-  return `[[☃ ${widgetType} ${String(instance)}]]`;
-}
-
-/**
- * Extract all widget IDs, which includes the widget type and instance number.
- * example output: ['radio 1', 'categorizer 1', 'categorizor 2']
- *
- * Content should contain Perseus widget placeholders,
- * which look like: '[[☃ radio 1]]'.
- *
- * @param {string} content
- * @returns {Array<WidgetId>} widgets
- */
-function getAllWidgetIds(content) {
-  const widgets = [];
-  const localWidgetRegex = getWidgetRegex();
-  let match = localWidgetRegex.exec(content);
-  while (match !== null) {
-    widgets.push(match[1]);
-    match = localWidgetRegex.exec(content);
-  }
-  return widgets;
-}
-
-/**
- * Check if a specific widget is an actual widget type using its name.
- * The widget name should include a widget type, without an instance number,
- * as a string. ex. 'radio'
- *
- * @param {string} widgetName
- * @returns {boolean}
- */
-function isWidgetType(widgetName) {
-  return Object.values(WidgetType).includes(widgetName);
-}
-
-/**
- * Extract all widget types from a Perseus JSON content string.
- * This does not include the instance number and prevents duplicates.
- * example output: ['radio', 'categorizer']
- *
- * @param {string} content
- * @returns {Array<WidgetId>}
- */
-function getAllWidgetTypes(content) {
-  const widgetTypes = [];
-  const localWidgetRegex = getWidgetRegex();
-  let match = localWidgetRegex.exec(content);
-  while (match !== null) {
-    const matchType = match[2];
-    if (!widgetTypes.includes(matchType) && isWidgetType(matchType)) {
-      widgetTypes.push(matchType);
-    }
-    match = localWidgetRegex.exec(content);
-  }
-  return widgetTypes;
-}
-
-/**
- * Check if a specific widget is a question widget type using its ID.
- * The widget ID includes the widget type and the instance number.
- *
- * @param {WidgetId} widgetId
- * @returns {boolean}
- */
-function isQuestionWidgetType(widgetId) {
-  return QUESTION_WIDGETS.includes(widgetId.split(" ")[0]);
-}
-
-/**
- * Extract the widget IDs of all widgets considered question widgets. Widget IDs
- * include widget type and instance number.
- * example output: ['radio 1', 'categorizer 1']
- *
- * Content should contain Perseus widget placeholders,
- * which look like: '[[☃ radio 1]]'.
- *
- * @param {string} content
- * @returns Array<WidgetId>
- */
-function getQuestionWidgetIds(content) {
-  return getAllWidgetIds(content).filter(isQuestionWidgetType);
-}
 
 const EditorJsonify = {
   serialize: function () {
@@ -44751,5 +45036,5 @@ const EditorJsonify = {
   }
 };
 
-export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Errors, 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, PerseusError, PerseusExpressionAnswerFormConsidered, 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, WidgetJsonifyDeprecated, WidgetType, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, convertWidgetNameToEnum, displaySigFigs, generateTestPerseusItem, genericPerseusItemData, getAllWidgetIds, getAllWidgetTypes, getAnswerFromUserInput, getAnswersFromWidgets, getCorrectAnswerForWidgetKey, getQuestionWidgetIds, getValidWidgetKeys, getWidgetTypeFromWidgetId, getWidgetTypeFromWidgetKey, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetKeyInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, violatingWidgets, allWidgets as widgets };
+export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Errors, 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, PerseusError, PerseusExpressionAnswerFormConsidered, 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, WidgetJsonifyDeprecated, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAnswerFromUserInput, getAnswersFromWidgets, getCorrectAnswerForWidgetId, 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, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map