@khanacademy/perseus 20.0.2 → 20.1.0

package/dist/es/index.js

@@ -23,16 +23,18 @@ import { entries, UnreachableCaseError, keys } from '@khanacademy/wonder-stuff-c
 import { CircularSpinner } from '@khanacademy/wonder-blocks-progress-spinner';
 import SimpleMarkdown from '@khanacademy/simple-markdown';
 import { pureMarkdownRules } from '@khanacademy/pure-markdown';
-import { TextField } from '@khanacademy/wonder-blocks-form';
+import { TextField, Checkbox } from '@khanacademy/wonder-blocks-form';
 import Button from '@khanacademy/wonder-blocks-button';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
 import Banner from '@khanacademy/wonder-blocks-banner';
 import { OptionItem, SingleSelect, MultiSelect } from '@khanacademy/wonder-blocks-dropdown';
 import debounce$2 from 'lodash.debounce';
-import { vec, Line as Line$3, MovablePoint as MovablePoint$5, Coordinates, Mafs } from 'mafs';
+import { vec, useMovable, useTransformContext, MovablePoint as MovablePoint$5, 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';
 import createReactClass from 'create-react-class';
 import Switch from '@khanacademy/wonder-blocks-switch';
-import { LabelMedium } from '@khanacademy/wonder-blocks-typography';
 import Pill from '@khanacademy/wonder-blocks-pill';
 import { Popper } from 'react-popper';
 import Link from '@khanacademy/wonder-blocks-link';
@@ -42,12 +44,14 @@ function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
+
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
+
     return target;
   };
   return _extends.apply(this, arguments);
@@ -58,11 +62,13 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
+
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
+
   return target;
 }
 
@@ -257,7 +263,7 @@ class MathInput extends React.Component {
       className = className + " " + this.props.className;
     }
     return /*#__PURE__*/React.createElement(View, {
-      style: [styles$C.outerWrapper, this.state.focused && styles$C.wrapperFocused, this.props.hasError && styles$C.wrapperError]
+      style: [styles$D.outerWrapper, this.state.focused && styles$D.wrapperFocused, this.props.hasError && styles$D.wrapperError]
     }, /*#__PURE__*/React.createElement("div", {
       style: {
         display: "flex",
@@ -290,7 +296,7 @@ class MathInput extends React.Component {
         var _this$props$keypadBut, _this$props;
         return /*#__PURE__*/React.createElement(PopoverContentCore, {
           closeButtonVisible: true,
-          style: styles$C.popoverContent
+          style: styles$D.popoverContent
         }, /*#__PURE__*/React.createElement(DesktopKeypad, _extends({
           onAnalyticsEvent: this.props.analytics.onAnalyticsEvent,
           extraKeys: this.props.extraKeys,
@@ -334,9 +340,9 @@ const MathInputIcon = ({
       color = Color.offBlack;
       break;
   }
-  const dynamicClass = active || focused ? styles$C.iconActive : styles$C.iconInactive;
+  const dynamicClass = active || focused ? styles$D.iconActive : styles$D.iconInactive;
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$C.iconContainer, dynamicClass]
+    style: [styles$D.iconContainer, dynamicClass]
   }, /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
@@ -381,7 +387,7 @@ const inputFocused = {
   borderColor: Color.blue,
   margin: -1
 };
-const styles$C = StyleSheet.create({
+const styles$D = StyleSheet.create({
   iconContainer: {
     display: "flex",
     justifyContent: "center",
@@ -4235,6 +4241,7 @@ function _classPrivateFieldBase(receiver, privateKey) {
   if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) {
     throw new TypeError("attempted to use private field on non-instance");
   }
+
   return receiver;
 }
 
@@ -17876,33 +17883,33 @@ class Lint extends React.Component {
       let warningText;
       let warningTextStyle;
       if (this.props.severity === Severity.Error) {
-        severityStyle = styles$B.indicatorError;
+        severityStyle = styles$C.indicatorError;
         warningText = "Error";
-        warningTextStyle = styles$B.publishBlockingError;
+        warningTextStyle = styles$C.publishBlockingError;
       } else if (this.props.severity === Severity.Warning) {
-        severityStyle = styles$B.indicatorWarning;
+        severityStyle = styles$C.indicatorWarning;
         warningText = "Warning";
-        warningTextStyle = styles$B.warning;
+        warningTextStyle = styles$C.warning;
       } else {
-        severityStyle = styles$B.indicatorGuideline;
+        severityStyle = styles$C.indicatorGuideline;
         warningText = "Recommendation";
-        warningTextStyle = styles$B.warning;
+        warningTextStyle = styles$C.warning;
       }
       return /*#__PURE__*/React.createElement("a", {
         href: `https://khanacademy.org/r/linter-rules#${this.props.ruleName}`,
         target: "lint-help-window",
         className: css(style)
       }, /*#__PURE__*/React.createElement("span", {
-        className: css(styles$B.indicator, severityStyle)
+        className: css(styles$C.indicator, severityStyle)
       }, this.props.severity === 1 && /*#__PURE__*/React.createElement(InlineIcon, exclamationIcon)), /*#__PURE__*/React.createElement("div", {
-        className: css(styles$B.tooltip, tooltipAbove && styles$B.tooltipAbove)
+        className: css(styles$C.tooltip, tooltipAbove && styles$C.tooltipAbove)
       }, this.props.message.split("\n\n").map((m, i) => /*#__PURE__*/React.createElement("p", {
         key: i,
-        className: css(styles$B.tooltipParagraph)
+        className: css(styles$C.tooltipParagraph)
       }, /*#__PURE__*/React.createElement("span", {
         className: css(warningTextStyle)
       }, warningText, ":", " "), m)), /*#__PURE__*/React.createElement("div", {
-        className: css(styles$B.tail, tooltipAbove && styles$B.tailAbove)
+        className: css(styles$C.tail, tooltipAbove && styles$C.tailAbove)
       })));
     };
   }
@@ -17940,20 +17947,20 @@ class Lint extends React.Component {
     }
     if (blockHighlight) {
       return /*#__PURE__*/React.createElement("span", {
-        className: css(styles$B.lintContainer, styles$B.lintContainerBlock)
-      }, this.renderLink(styles$B.radioWidgetHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
+        className: css(styles$C.lintContainer, styles$C.lintContainerBlock)
+      }, this.renderLink(styles$C.radioWidgetHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
     }
     if (inline) {
       return /*#__PURE__*/React.createElement("span", {
-        className: css(styles$B.lintContainer)
-      }, this.renderLink(styles$B.inlineHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
+        className: css(styles$C.lintContainer)
+      }, this.renderLink(styles$C.inlineHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
     }
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$B.lintContainer)
-    }, this.renderLink(styles$B.hoverTarget), /*#__PURE__*/React.createElement("div", null, children));
+      className: css(styles$C.lintContainer)
+    }, this.renderLink(styles$C.hoverTarget), /*#__PURE__*/React.createElement("div", null, children));
   }
 }
-const styles$B = StyleSheet.create({
+const styles$C = StyleSheet.create({
   // This is the class of the outermost element.
   // We use relative positioning so that the lint indicator can be
   // positioned absolutely relative to the position of the linty container.
@@ -19878,7 +19885,7 @@ class Renderer extends React.Component {
             paddingLeft: margin,
             paddingRight: margin
           };
-          const mobileInnerStyle = _extends({}, innerStyle, styles$A.mobileZoomableParentFix);
+          const mobileInnerStyle = _extends({}, innerStyle, styles$B.mobileZoomableParentFix);
           return /*#__PURE__*/React.createElement("div", {
             key: state.key,
             className: "perseus-block-math",
@@ -19999,7 +20006,7 @@ class Renderer extends React.Component {
           paddingLeft: 0,
           paddingRight: 0
         };
-        const mobileInnerStyle = _extends({}, innerStyle, styles$A.mobileZoomableParentFix);
+        const mobileInnerStyle = _extends({}, innerStyle, styles$B.mobileZoomableParentFix);
         const wrappedOutput = /*#__PURE__*/React.createElement("div", {
           style: _extends({}, mobileInnerStyle, {
             overflowX: "auto"
@@ -20646,7 +20653,7 @@ Renderer.defaultProps = {
   onSerializedStateUpdated: () => {},
   linterContext: PerseusLinter.linterContextDefault
 };
-const styles$A = {
+const styles$B = {
   mobileZoomableParentFix: {
     // NOTE(abdul): There is an issue where transform animations will
     // cause the Zoomable component to disappear when running on the
@@ -21654,10 +21661,10 @@ class InputNumber extends React.Component {
     // Note: This is _very_ similar to what `numeric-input.jsx` does. If
     // you modify this, double-check if you also need to modify that
     // component.
-    const inputStyles = [styles$z.default, this.props.size === "small" ? styles$z.small : null, this.props.rightAlign ? styles$z.rightAlign : styles$z.leftAlign];
+    const inputStyles = [styles$A.default, this.props.size === "small" ? styles$A.small : null, this.props.rightAlign ? styles$A.rightAlign : styles$A.leftAlign];
     // Unanswered
     if (rubric && !this.props.currentValue) {
-      inputStyles.push(styles$z.answerStateUnanswered);
+      inputStyles.push(styles$A.answerStateUnanswered);
     }
     return /*#__PURE__*/React.createElement(InputWithExamples
     // eslint-disable-next-line react/no-string-refs
@@ -21742,7 +21749,7 @@ InputNumber.defaultProps = {
   apiOptions: ApiOptions.defaults,
   linterContext: linterContextDefault
 };
-const styles$z = StyleSheet.create({
+const styles$A = StyleSheet.create({
   default: {
     width: 80,
     height: "auto"
@@ -22734,7 +22741,7 @@ const FocusRing = function FocusRing(props) {
   };
   return /*#__PURE__*/React.createElement("span", {
     "data-test-id": "focus-ring",
-    className: css(styles$y.ring),
+    className: css(styles$z.ring),
     style: style
   }, children);
 };
@@ -22743,7 +22750,7 @@ FocusRing.defaultProps = {
   color: kaGreen$1,
   multipleSelect: false
 };
-const styles$y = StyleSheet.create({
+const styles$z = StyleSheet.create({
   ring: {
     margin: "auto",
     display: "inline-block",
@@ -22780,7 +22787,7 @@ function getChoiceLetter(pos) {
 }
 
 const CHOICE_ICON_SIZE = 24;
-const styles$x = StyleSheet.create({
+const styles$y = StyleSheet.create({
   iconWrapper: {
     display: "inline-block",
     position: "relative"
@@ -22803,7 +22810,7 @@ const CrossOutLine = function CrossOutLine(props) {
     width: CROSS_OUT_LINE_SIZE,
     height: CROSS_OUT_LINE_SIZE,
     viewBox: `0 0 ${CROSS_OUT_LINE_SIZE} ${CROSS_OUT_LINE_SIZE}`,
-    className: css(styles$w.crossOutLine),
+    className: css(styles$x.crossOutLine),
     "data-test-id": "choice-icon__cross-out-line"
   }, /*#__PURE__*/React.createElement("line", {
     // The line stretches from the bottom-left to top-right.
@@ -22818,7 +22825,7 @@ const CrossOutLine = function CrossOutLine(props) {
     strokeLinecap: "round"
   }));
 };
-const styles$w = StyleSheet.create({
+const styles$x = StyleSheet.create({
   crossOutLine: {
     // Center the icon within the container.
     position: "absolute",
@@ -22899,7 +22906,7 @@ const ChoiceIcon = function ChoiceIcon(props) {
   } = props;
   const dynamicStyles = getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, correct);
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$x.iconWrapper)
+    className: css(styles$y.iconWrapper)
   }, /*#__PURE__*/React.createElement(FocusRing, {
     color: Color.blue,
     visible: focused || hovered,
@@ -22908,13 +22915,13 @@ const ChoiceIcon = function ChoiceIcon(props) {
     // @ts-expect-error - TS2322 - Type '{ backgroundColor: string | null | undefined; borderColor: string; color: string; borderRadius: number; }' is not assignable to type 'Properties<string | number, string & {}>'.
     style: dynamicStyles,
     "data-test-id": "choice-icon__library-choice-icon",
-    className: css(styles$v.circle, showCorrectness && correct && styles$v.circleCorrect, showCorrectness && !correct && styles$v.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$v.circleIncorrectAnswered)
+    className: css(styles$w.circle, showCorrectness && correct && styles$w.circleCorrect, showCorrectness && !correct && styles$w.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$w.circleIncorrectAnswered)
     // used in BaseRadio editMode to check
     // if we actually clicked on the radio icon
     ,
     "data-is-radio-icon": true
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$v.innerWrapper)
+    className: css(styles$w.innerWrapper)
   }, /*#__PURE__*/React.createElement(ChoiceInner, {
     pos: pos,
     showCorrectness: showCorrectness,
@@ -22923,7 +22930,7 @@ const ChoiceIcon = function ChoiceIcon(props) {
     color: dynamicStyles.borderColor
   }));
 };
-const styles$v = StyleSheet.create({
+const styles$w = StyleSheet.create({
   innerWrapper: {
     width: CHOICE_ICON_SIZE,
     height: CHOICE_ICON_SIZE,
@@ -23015,19 +23022,19 @@ const OptionStatus = function OptionStatus(props) {
   }
   let textStyle;
   if (correct) {
-    textStyle = styles$u.correct;
+    textStyle = styles$v.correct;
   } else {
     if (checked || previouslyAnswered) {
-      textStyle = styles$u.incorrectAnswered;
+      textStyle = styles$v.incorrectAnswered;
     } else {
-      textStyle = styles$u.incorrect;
+      textStyle = styles$v.incorrect;
     }
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$u.text, textStyle)
+    className: css(styles$v.text, textStyle)
   }, renderText(checked, correct, crossedOut));
 };
-const styles$u = StyleSheet.create({
+const styles$v = StyleSheet.create({
   text: {
     alignItems: "center",
     display: "flex",
@@ -23102,8 +23109,8 @@ const Choice = function Choice(props) {
       crossedOut: updatedCrossedOut
     });
   }
-  const descriptionClassName = classNames("description", css(styles$t.description));
-  const rationaleClassName = classNames("perseus-radio-rationale-content", css(styles$t.rationale));
+  const descriptionClassName = classNames("description", css(styles$u.description));
+  const rationaleClassName = classNames("perseus-radio-rationale-content", css(styles$u.rationale));
 
   // We want to show the choices as dimmed out when the choices are disabled.
   // However, we don't want to do this when we're in review mode in the
@@ -23267,7 +23274,7 @@ const Choice = function Choice(props) {
     "data-test-id": `perseus-radio-rationale-content-${pos}`
   }, rationale));
 };
-const styles$t = StyleSheet.create({
+const styles$u = StyleSheet.create({
   description: {
     display: "inline-block",
     width: "100%"
@@ -23459,10 +23466,10 @@ const BaseRadio = function BaseRadio(props) {
   const isMobile = apiOptions.isMobile;
   const firstChoiceHighlighted = choices[0].highlighted;
   const lastChoiceHighlighted = choices[choices.length - 1].highlighted;
-  const className = classNames("perseus-widget-radio", !editMode && "perseus-rendered-radio", css(styles$s.radio, styles$s.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$s.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$s.radioContainerLastHighlighted));
-  const instructionsClassName = classNames("instructions", css(styles$s.instructions, isMobile && styles$s.instructionsMobile));
+  const className = classNames("perseus-widget-radio", !editMode && "perseus-rendered-radio", css(styles$t.radio, styles$t.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$t.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$t.radioContainerLastHighlighted));
+  const instructionsClassName = classNames("instructions", css(styles$t.instructions, isMobile && styles$t.instructionsMobile));
   const instructions = getInstructionsText(multipleSelect, countChoices, numCorrect);
-  const responsiveClassName = css(styles$s.responsiveFieldset);
+  const responsiveClassName = css(styles$t.responsiveFieldset);
   const fieldset = /*#__PURE__*/React.createElement("fieldset", {
     className: `perseus-widget-radio-fieldset ${responsiveClassName}`
   }, /*#__PURE__*/React.createElement("legend", {
@@ -23513,7 +23520,7 @@ const BaseRadio = function BaseRadio(props) {
     const aphroditeClassName = checked => {
       // Whether or not to show correctness borders
       // for this choice and the next choice.
-      return css(sharedStyles.aboveScratchpad, styles$s.item, styles$s.responsiveItem, checked && styles$s.selectedItem, checked && choice.highlighted && styles$s.aboveBackdrop, checked && choice.highlighted && apiOptions.isMobile && styles$s.aboveBackdropMobile, nextChoiceHighlighted && apiOptions.isMobile && styles$s.nextHighlighted);
+      return css(sharedStyles.aboveScratchpad, styles$t.item, styles$t.responsiveItem, checked && styles$t.selectedItem, checked && choice.highlighted && styles$t.aboveBackdrop, checked && choice.highlighted && apiOptions.isMobile && styles$t.aboveBackdropMobile, nextChoiceHighlighted && apiOptions.isMobile && styles$t.nextHighlighted);
     };
 
     // HACK(abdulrahman): Preloads the selection-state
@@ -23587,14 +23594,14 @@ const BaseRadio = function BaseRadio(props) {
   // Allow for horizontal scrolling if content is too wide, which may be
   // an issue especially on phones.
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$s.responsiveContainer)
+    className: css(styles$t.responsiveContainer)
   }, fieldset);
 };
 BaseRadio.defaultProps = {
   editMode: false,
   multipleSelect: false
 };
-const styles$s = StyleSheet.create({
+const styles$t = StyleSheet.create({
   instructions: {
     display: "block",
     color: gray17,
@@ -24235,9 +24242,9 @@ class Categorizer extends React.Component {
       indexedItems = Util.shuffle(indexedItems, this.props.problemNum);
     }
     const table = /*#__PURE__*/React.createElement("table", {
-      className: "categorizer-table " + css(styles$r.mobileTable)
+      className: "categorizer-table " + css(styles$s.mobileTable)
     }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
-      className: css(styles$r.emptyHeaderCell)
+      className: css(styles$s.emptyHeaderCell)
     }), this.props.categories.map((category, i) => {
       // Array index is the correct key here, as that's
       // how category grading actually works -- no way
@@ -24245,7 +24252,7 @@ class Categorizer extends React.Component {
       // middle. (If we later add that, this should be
       // fixed.)
       return /*#__PURE__*/React.createElement("th", {
-        className: css(styles$r.header),
+        className: css(styles$s.header),
         key: i
       }, /*#__PURE__*/React.createElement(Renderer, {
         content: category,
@@ -24265,7 +24272,7 @@ class Categorizer extends React.Component {
       })), self.props.categories.map((catName, catNum) => {
         const selected = self.props.values[itemNum] === catNum;
         return /*#__PURE__*/React.createElement("td", {
-          className: "category " + css(styles$r.cell),
+          className: "category " + css(styles$s.cell),
           key: catNum
         }, /*#__PURE__*/React.createElement("div", {
           className: ClassNames.INTERACTIVE,
@@ -24280,7 +24287,7 @@ class Categorizer extends React.Component {
           onChange: () => this.onChange(itemNum, catNum),
           onClick: e => e.stopPropagation()
         }), !isMobile && /*#__PURE__*/React.createElement("span", {
-          className: css(styles$r.radioSpan, selected && styles$r.checkedRadioSpan, this.props.static && selected && styles$r.staticCheckedRadioSpan)
+          className: css(styles$s.radioSpan, selected && styles$s.checkedRadioSpan, this.props.static && selected && styles$s.staticCheckedRadioSpan)
         }, selected ? /*#__PURE__*/React.createElement(InlineIcon, iconCircle) : /*#__PURE__*/React.createElement(InlineIcon, iconCircleThin))));
       }));
       /* eslint-enable max-len */
@@ -24292,7 +24299,7 @@ class Categorizer extends React.Component {
       "categorizer-container": true,
       "static-mode": this.props.static
     });
-    const inlineStyles = this.props.apiOptions.isMobile ? [styles$r.fullBleedContainer] : [];
+    const inlineStyles = this.props.apiOptions.isMobile ? [styles$s.fullBleedContainer] : [];
     return /*#__PURE__*/React.createElement("div", {
       className: extraClassNames + " " + css(...inlineStyles)
     }, table);
@@ -24344,7 +24351,7 @@ const pageMargin = 16;
 
 // Stylesheets aren't directly testable
 /* c8 ignore next */
-const styles$r = StyleSheet.create({
+const styles$s = StyleSheet.create({
   mobileTable: {
     [mediaQueries.smOrSmaller]: {
       minWidth: "auto"
@@ -24580,7 +24587,7 @@ class CSProgram extends React.Component {
     //  creator "went wild".
     // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$q.widthOverride, styleContainer && styles$q.container)
+      className: css(styles$r.widthOverride, styleContainer && styles$r.container)
     }, /*#__PURE__*/React.createElement("iframe", {
       sandbox: sandboxOptions,
       src: url,
@@ -24609,7 +24616,7 @@ CSProgram.defaultProps = {
   // optional message
   message: null
 };
-const styles$q = StyleSheet.create({
+const styles$r = StyleSheet.create({
   // Override the inherited width from the perseus paragraph class
   // 820 is minimum width for 420px editor and 400px canvas
   widthOverride: {
@@ -24654,7 +24661,7 @@ class Definition extends React.Component {
     }) => /*#__PURE__*/React.createElement(Popover, {
       content: /*#__PURE__*/React.createElement(PopoverContentCore, {
         color: "white",
-        style: styles$p.tooltipBody,
+        style: styles$q.tooltipBody,
         closeButtonVisible: true
       }, /*#__PURE__*/React.createElement(Renderer, {
         apiOptions: this.props.apiOptions,
@@ -24685,7 +24692,7 @@ Definition.defaultProps = {
   togglePrompt: "define me",
   definition: "definition goes here"
 };
-const styles$p = {
+const styles$q = {
   tooltipBody: {
     color: Color.offBlack,
     fontSize: 20,
@@ -24888,15 +24895,15 @@ class Explanation extends React.Component {
     const onClick = this._onClick;
     if (isMobile) {
       promptContainer = /*#__PURE__*/React.createElement("div", {
-        className: css(styles$o.linkContainer)
+        className: css(styles$p.linkContainer)
       }, /*#__PURE__*/React.createElement("a", {
-        className: css(styles$o.mobileExplanationLink),
+        className: css(styles$p.mobileExplanationLink),
         href: href,
         onClick: onClick,
         role: "button",
         "aria-expanded": this.state.expanded
       }, promptText), this.state.expanded && /*#__PURE__*/React.createElement("svg", {
-        className: css(styles$o.disclosureArrow)
+        className: css(styles$p.disclosureArrow)
       }, /*#__PURE__*/React.createElement("polygon", {
         style: {
           fill: backgroundColor
@@ -24904,7 +24911,7 @@ class Explanation extends React.Component {
         points: `0,${arrowHeight} ` + `${arrowWidth},${arrowHeight} ` + `${arrowWidth / 2},0`
       })));
     } else {
-      const viewStyling = isArticle ? [styles$o.explanationLink, styles$o.articleLink] : [styles$o.explanationLink, styles$o.exerciseLink];
+      const viewStyling = isArticle ? [styles$p.explanationLink, styles$p.articleLink] : [styles$p.explanationLink, styles$p.exerciseLink];
       promptContainer = /*#__PURE__*/React.createElement(Clickable, {
         onClick: onClick,
         "aria-expanded": this.state.expanded
@@ -24912,11 +24919,11 @@ class Explanation extends React.Component {
         style: viewStyling
       }, `[${promptText}]`));
     }
-    const expandedStyle = isMobile ? styles$o.contentExpandedMobile : styles$o.contentExpanded;
+    const expandedStyle = isMobile ? styles$p.contentExpandedMobile : styles$p.contentExpanded;
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$o.container)
+      className: css(styles$p.container)
     }, promptContainer, this.state.expanded && /*#__PURE__*/React.createElement("div", {
-      className: css(styles$o.content, isMobile && styles$o.contentMobile, this.state.expanded && expandedStyle)
+      className: css(styles$p.content, isMobile && styles$p.contentMobile, this.state.expanded && expandedStyle)
       // eslint-disable-next-line react/no-string-refs
       ,
       ref: "content"
@@ -24940,7 +24947,7 @@ const verticalContentPadding = 10;
 const arrowWidth = 30;
 const arrowHeight = 14;
 const backgroundColor = gray95;
-const styles$o = StyleSheet.create({
+const styles$p = StyleSheet.create({
   container: {
     display: "inline",
     position: "relative"
@@ -25045,15 +25052,15 @@ class GradedGroupAnswerBar extends React.Component {
       onCheckAnswer,
       onNextQuestion
     } = this.props;
-    const answerBarStyle = _extends({}, styles$n.answerBar, {
+    const answerBarStyle = _extends({}, styles$o.answerBar, {
       backgroundColor: answerBarState === "CORRECT" ? Color.offWhite : "white",
       // Center the "Correct!" message only when there's no next question
       justifyContent: answerBarState === "CORRECT" && !onNextQuestion ? "center" : "space-between"
     });
     const message = answerBarState === "INCORRECT" ? /*#__PURE__*/React.createElement("span", {
-      style: styles$n.text
+      style: styles$o.text
     }, /*#__PURE__*/React.createElement("span", {
-      style: styles$n.tryAgainIcon
+      style: styles$o.tryAgainIcon
     }, /*#__PURE__*/React.createElement(InlineIcon, iconTryAgain)), /*#__PURE__*/React.createElement("span", {
       style: {
         marginLeft: 8
@@ -25072,7 +25079,7 @@ class GradedGroupAnswerBar extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       style: answerBarStyle
     }, /*#__PURE__*/React.createElement("span", {
-      style: styles$n.text
+      style: styles$o.text
     }, /*#__PURE__*/React.createElement("span", {
       style: {
         fontSize: 28,
@@ -25094,7 +25101,7 @@ class GradedGroupAnswerBar extends React.Component {
   }
 }
 const fontSize = 17;
-const styles$n = {
+const styles$o = {
   answerBar: {
     display: "flex",
     alignItems: "center",
@@ -25280,7 +25287,7 @@ class GradedGroup extends React.Component {
       // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
       gradeStatus = i18n._("Incorrect");
     }
-    const mobileClass = this.props.inGradedGroupSet ? css(styles$m.gradedGroupInSet) : css(styles$m.gradedGroup);
+    const mobileClass = this.props.inGradedGroupSet ? css(styles$n.gradedGroupInSet) : css(styles$n.gradedGroup);
     const classes = classNames({
       [mobileClass]: apiOptions.isMobile,
       "perseus-graded-group": true,
@@ -25299,7 +25306,7 @@ class GradedGroup extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       className: classes
     }, !!this.props.title && /*#__PURE__*/React.createElement("div", {
-      className: css(styles$m.title)
+      className: css(styles$n.title)
     }, this.props.title), /*#__PURE__*/React.createElement(Renderer, _extends({}, this.props, {
       // eslint-disable-next-line react/no-string-refs
       ref: "renderer",
@@ -25331,7 +25338,7 @@ class GradedGroup extends React.Component {
     }, i18n._("Next question")), this.props.hint && this.props.hint.content && (this.state.showHint ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
       // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
       tabIndex: "0",
-      className: css(styles$m.explanationTitle),
+      className: css(styles$n.explanationTitle),
       onClick: () => this.setState({
         showHint: false
       }),
@@ -25363,7 +25370,7 @@ class GradedGroup extends React.Component {
           showHint: true
         });
       },
-      className: css(styles$m.showHintLink)
+      className: css(styles$n.showHintLink)
     }, i18n._("Explain"))), apiOptions.isMobile && answerBarState !== "HIDDEN" && /*#__PURE__*/React.createElement(GradedGroupAnswerBar, {
       apiOptions: apiOptions,
       answerBarState: answerBarState,
@@ -25384,7 +25391,7 @@ GradedGroup.defaultProps = {
 const traverseChildWidgets$2 = function traverseChildWidgets(props, traverseRenderer) {
   return _.extend({}, props, traverseRenderer(props));
 };
-const styles$m = StyleSheet.create({
+const styles$n = StyleSheet.create({
   gradedGroupInSet: {
     // Reset a few desktop-only styles that come from graded-group.less
     marginLeft: 0,
@@ -25457,18 +25464,18 @@ class Indicators extends React.Component {
     return /*#__PURE__*/React.createElement("ul", {
       // reduntantly add class name for use in .less files--
       //   the styles object key gets hashed
-      className: classNames(css(styles$l.indicatorContainer), "indicatorContainer")
+      className: classNames(css(styles$m.indicatorContainer), "indicatorContainer")
     }, this.props.gradedGroups.map(({
       title
     }, i) => /*#__PURE__*/React.createElement("li", {
-      className: css(styles$l.indicator),
+      className: css(styles$m.indicator),
       key: title
     }, /*#__PURE__*/React.createElement(Clickable, {
       role: "button",
       "aria-label": i18n._("Skip to %(title)s", {
         title
       }),
-      style: styles$l.indicatorButton,
+      style: styles$m.indicatorButton,
       onClick: () => this.props.onChangeCurrentGroup(i),
       onKeyDown: e => this.handleKeyDown(e, i)
     }, ({
@@ -25476,9 +25483,9 @@ class Indicators extends React.Component {
       focused,
       pressed
     }) => /*#__PURE__*/React.createElement(View, {
-      style: [styles$l.indicatorDot, (hovered || focused || pressed) && styles$l.indicatorDotFocused]
+      style: [styles$m.indicatorDot, (hovered || focused || pressed) && styles$m.indicatorDotFocused]
     }, i === this.props.currentGroup && /*#__PURE__*/React.createElement(View, {
-      style: styles$l.indicatorDotActive
+      style: styles$m.indicatorDotActive
     }, /*#__PURE__*/React.createElement("span", {
       className: css(a11y.srOnly)
     }, i18n._("Current"))))))));
@@ -25544,7 +25551,7 @@ class GradedGroupSet extends React.Component {
     } = getDependencies();
     if (JIPT.useJIPT && this.props.gradedGroups.length > 1) {
       return /*#__PURE__*/React.createElement("div", {
-        className: css(styles$l.container)
+        className: css(styles$m.container)
       }, this.props.gradedGroups.map((gradedGroup, i) => {
         return (
           /*#__PURE__*/
@@ -25567,13 +25574,13 @@ class GradedGroupSet extends React.Component {
     const numGroups = this.props.gradedGroups.length;
     const handleNextQuestion = this.state.currentGroup < numGroups - 1 ? this.handleNextQuestion : null;
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$l.container)
+      className: css(styles$m.container)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$l.top)
+      className: css(styles$m.top)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$l.title)
+      className: css(styles$m.title)
     }, currentGroup.title), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$l.spacer)
+      className: css(styles$m.spacer)
     }), /*#__PURE__*/React.createElement(Indicators, {
       currentGroup: this.state.currentGroup,
       gradedGroups: this.props.gradedGroups,
@@ -25615,7 +25622,7 @@ var GradedGroupSet$1 = {
   tracking: "all",
   isLintable: true
 };
-const styles$l = StyleSheet.create({
+const styles$m = StyleSheet.create({
   top: {
     display: "flex",
     flexDirection: "row"
@@ -25720,7 +25727,7 @@ class ButtonGroup extends React.Component {
         id: "" + i,
         ref: "button" + i,
         key: "" + i,
-        className: css(styles$k.buttonStyle, button.value === value && styles$k.selectedStyle),
+        className: css(styles$l.buttonStyle, button.value === value && styles$l.selectedStyle),
         onClick: () => this.toggleSelect(button.value)
       }, button.content || "" + button.value);
     });
@@ -25737,7 +25744,7 @@ ButtonGroup.defaultProps = {
   value: null,
   allowEmpty: true
 };
-const styles$k = StyleSheet.create({
+const styles$l = StyleSheet.create({
   buttonStyle: {
     backgroundColor: "white",
     border: "1px solid #ccc",
@@ -28239,18 +28246,51 @@ const SegmentGraph = props => {
   })));
 };
 const SegmentView = props => {
-  const [pt1, pt2] = props.segment;
+  const {
+    onMoveSegment,
+    segment: [pt1, pt2]
+  } = props;
   const midpoint = vec.midpoint(pt1, pt2);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line$3.Segment, {
-    point1: pt1,
-    point2: pt2
-  }), /*#__PURE__*/React.createElement(MovablePoint$5, {
+  const segment = useRef(null);
+  const {
+    dragging: isDraggingSegment
+  } = useMovable({
+    gestureTarget: segment,
     point: midpoint,
-    color: Color.blue,
     onMove: newPoint => {
-      props.onMoveSegment(vec.sub(newPoint, midpoint));
+      onMoveSegment(vec.sub(newPoint, midpoint));
+    },
+    constrain: p => p
+  });
+  const {
+    viewTransform,
+    userTransform
+  } = useTransformContext();
+  const transform = vec.matrixMult(viewTransform, userTransform);
+  const scaledPoint1 = vec.transform(pt1, transform);
+  const scaledPoint2 = vec.transform(pt2, transform);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("g", {
+    ref: segment,
+    tabIndex: 0,
+    className: "movable-segment",
+    style: {
+      cursor: isDraggingSegment ? "grabbing" : "grab"
     }
-  }), /*#__PURE__*/React.createElement(MovablePoint$5, {
+  }, /*#__PURE__*/React.createElement(SVGLine, {
+    start: scaledPoint1,
+    end: scaledPoint2,
+    style: {
+      stroke: "transparent",
+      strokeWidth: 30
+    }
+  }), /*#__PURE__*/React.createElement(SVGLine, {
+    start: scaledPoint1,
+    end: scaledPoint2,
+    style: {
+      stroke: "var(--mafs-segment-stroke-color)",
+      strokeWidth: "var(--mafs-segment-stroke-weight)"
+    }
+  })), /*#__PURE__*/React.createElement(MovablePoint$5, {
     point: pt1,
     color: Color.blue,
     onMove: newPoint => {
@@ -28264,6 +28304,20 @@ const SegmentView = props => {
     }
   }));
 };
+function SVGLine(props) {
+  const {
+    start,
+    end,
+    style
+  } = props;
+  return /*#__PURE__*/React.createElement("line", {
+    x1: start[0],
+    y1: start[1],
+    x2: end[0],
+    y2: end[1],
+    style: style
+  });
+}
 
 const renderLineLabel = (n, [min, max]) => n !== -1 && n !== min && n !== max;
 const axisOptions = (props, index) => ({
@@ -28433,7 +28487,7 @@ const VisibleIcon = () => /*#__PURE__*/React.createElement("svg", {
   width: "24",
   height: "24",
   viewBox: "0 0 24 24",
-  className: css(styles$j.icon)
+  className: css(styles$k.icon)
 }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("path", {
   id: "a",
   d: "M7.401 10.035c-1.424.748-2.599 1.905-3.544 " + "3.48a1 1 0 0 1-1.714-1.03C4.325 8.849 7.652 7 " + "12 7c4.348 0 7.675 1.848 9.857 5.486a1 1 0 0 " + "1-1.714 1.028c-.945-1.574-2.12-2.73-3.544-" + "3.48a5 5 0 1 1-9.198 0zM12 15a3 3 0 1 0 0-6 3 3 " + "0 0 0 0 6z"
@@ -28464,7 +28518,7 @@ const HiddenIcon = () => /*#__PURE__*/React.createElement("svg", {
   width: "24",
   height: "24",
   viewBox: "0 0 24 24",
-  className: css(styles$j.icon)
+  className: css(styles$k.icon)
 }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("path", {
   id: "a",
   d: "M8.794 7.38C9.791 7.127 10.86 7 12 7c4.348 0 " + "7.675 1.848 9.857 5.486a1 1 0 0 1-1.714 " + "1.028c-.945-1.574-2.12-2.73-3.544-3.48.258." + "604.401 1.268.401 1.966 0 1.02-.305 " + "1.967-.828 2.757l2.535 2.536a1 1 0 0 " + "1-1.414 1.414l-12-12a1 1 0 0 1 " + "1.414-1.414L8.794 7.38zm5.914 5.913a3 3 0 0 " + "0-4.001-4.001l4 4.001zM6.072 8.486l2.976 " + "2.976a3 3 0 0 0 3.49 3.49l1.579 1.58A5 5 0 " + "0 1 7.4 10.035c-1.424.747-2.599 1.904-3.544 " + "3.478a1 1 0 0 1-1.714-1.028c1.049-1.75 " + "2.363-3.085 3.929-4z"
@@ -28498,20 +28552,20 @@ const HUD = ({
   let state;
   let icon;
   if (enabled) {
-    state = styles$j.enabled;
+    state = styles$k.enabled;
     icon = /*#__PURE__*/React.createElement(VisibleIcon, null);
   } else {
-    state = styles$j.disabled;
+    state = styles$k.disabled;
     icon = /*#__PURE__*/React.createElement(HiddenIcon, null);
   }
   return /*#__PURE__*/React.createElement("button", {
-    className: css(styles$j.hud, _fixedPosition && styles$j.hudFixedPosition, state),
+    className: css(styles$k.hud, _fixedPosition && styles$k.hudFixedPosition, state),
     onClick: e => {
       onClick();
     }
   }, icon, message);
 };
-const styles$j = StyleSheet.create({
+const styles$k = StyleSheet.create({
   hud: {
     boxSizing: "border-box",
     height: 36,
@@ -28575,7 +28629,7 @@ const triangleBeforeAfter = {
   top: "0",
   width: "0"
 };
-const styles$i = StyleSheet.create({
+const styles$j = StyleSheet.create({
   infoTip: {
     display: "inline-block",
     marginLeft: "5px",
@@ -28614,7 +28668,6 @@ const styles$i = StyleSheet.create({
     width: "240px"
   }
 });
-const questionMark = "data:image/png;base64," + "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBB" + "ZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/" + "eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+" + "IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2Jl" + "IFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAg" + "ICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5" + "LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9" + "IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHht" + "bG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3Vy" + "Y2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHht" + "cE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo2N2M3NTAxYS04YmVlLTQ0M2Mt" + "YmRiNS04OGM2N2IxN2NhYzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUJCRTk4" + "Qjc4NjAwMTFFMzg3QUJDNEI4Mzk2QTRGQkQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5p" + "aWQ6OUJCRTk4QjY4NjAwMTFFMzg3QUJDNEI4Mzk2QTRGQkQiIHhtcDpDcmVhdG9yVG9v" + "bD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRG" + "cm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NGE5ZDI0OTMtODk1NC00OGFkLTlh" + "MTgtZDAwM2MwYWNjNDJlIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY3Yzc1MDFh" + "LThiZWUtNDQzYy1iZGI1LTg4YzY3YjE3Y2FjMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4g" + "PC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pqm89uYAAADM" + "SURBVHjaXJA9DoJAEIUH1M4TUHIFsCMGen9OwCGw1YRGW2ntKel0exsojHIBC0ouQAyU" + "viFDstmXfNmZeS+zm7XSNCXRFiRgJf0bXIHixpbhGdxBBJYC1w/xaA424MhNEATkui71" + "fU9KqfEU78UbD9PdbJRlOdae55GmhIP+1NV1TcMwkOM41DSNHvRtMhTHMRVFQW3b6mOL" + "gx99kue5GRp/gIOZuZGvNpTNwjD8oliANU+qqqKu6/TQBdymN57AHjzBT+B6Jx79BRgA" + "vc49kQA4yxgAAAAASUVORK5CYII=";
 class InfoTip$1 extends React.Component {
   constructor(...args) {
     super(...args);
@@ -28634,23 +28687,22 @@ class InfoTip$1 extends React.Component {
   }
   render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$i.infoTip)
-    }, /*#__PURE__*/React.createElement("img", {
-      alt: "",
-      width: 10,
-      height: 10,
-      src: questionMark,
+      className: css(styles$j.infoTip)
+    }, /*#__PURE__*/React.createElement(View, {
       onMouseEnter: this.handleMouseEnter,
       onMouseLeave: this.handleMouseLeave
-    }), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$i.infoTipContainer),
+    }, /*#__PURE__*/React.createElement(PhosphorIcon, {
+      size: "small",
+      icon: questionIcon
+    })), /*#__PURE__*/React.createElement("div", {
+      className: css(styles$j.infoTipContainer),
       style: {
         display: this.state.hover ? "block" : "none"
       }
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$i.infoTipTriangle)
+      className: css(styles$j.infoTipTriangle)
     }), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$i.verticalShadow, styles$i.infoTipContentContainer)
+      className: css(styles$j.verticalShadow, styles$j.infoTipContentContainer)
     }, this.props.children)));
   }
 }
@@ -28725,7 +28777,7 @@ class MultiButtonGroup extends React.Component {
         id: "" + i,
         key: "" + i,
         ref: "button" + i,
-        className: css(styles$h.buttonStyle, selected && styles$h.selectedStyle),
+        className: css(styles$i.buttonStyle, selected && styles$i.selectedStyle),
         onClick: () => this.toggleSelect(button.value)
       }, button.content || "" + button.value);
     });
@@ -28741,7 +28793,7 @@ MultiButtonGroup.defaultProps = {
   values: [],
   allowEmpty: true
 };
-const styles$h = StyleSheet.create({
+const styles$i = StyleSheet.create({
   buttonStyle: {
     backgroundColor: "white",
     border: "1px solid #ccc",
@@ -28999,11 +29051,12 @@ const PropCheckBox = createReactClass({
   },
   render: function () {
     const propName = this.propName();
-    return /*#__PURE__*/React.createElement("label", null, this._labelAlignLeft() && this.props.label, /*#__PURE__*/React.createElement("input", {
-      type: "checkbox",
+    return /*#__PURE__*/React.createElement("label", {
+      className: css(styles$h.labeledCheckbox)
+    }, this._labelAlignLeft() && /*#__PURE__*/React.createElement(LabelSmall, null, this.props.label), /*#__PURE__*/React.createElement(Checkbox, {
       checked: this.props[propName],
       onChange: this.toggle
-    }), !this._labelAlignLeft() && this.props.label);
+    }), !this._labelAlignLeft() && /*#__PURE__*/React.createElement(LabelSmall, null, this.props.label));
   },
   toggle: function () {
     const propName = this.propName();
@@ -29012,6 +29065,13 @@ const PropCheckBox = createReactClass({
     this.props.onChange(changes);
   }
 });
+const styles$h = StyleSheet.create({
+  labeledCheckbox: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  }
+});
 
 const truth = () => true;
 
@@ -41179,7 +41239,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.0.2";
+const libVersion = "20.1.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {