@khanacademy/perseus 20.0.2 → 20.1.0

package/dist/index.js

@@ -31,9 +31,11 @@ var Banner = require('@khanacademy/wonder-blocks-banner');
 var wonderBlocksDropdown = require('@khanacademy/wonder-blocks-dropdown');
 var debounce$1 = require('lodash.debounce');
 var mafs = require('mafs');
+var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
+var questionIcon = require('@phosphor-icons/core/regular/question.svg');
+var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 var createReactClass = require('create-react-class');
 var Switch = require('@khanacademy/wonder-blocks-switch');
-var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 var Pill = require('@khanacademy/wonder-blocks-pill');
 var reactPopper = require('react-popper');
 var Link = require('@khanacademy/wonder-blocks-link');
@@ -78,6 +80,7 @@ var SimpleMarkdown__default = /*#__PURE__*/_interopDefaultLegacy(SimpleMarkdown)
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Banner__default = /*#__PURE__*/_interopDefaultLegacy(Banner);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce$1);
+var questionIcon__default = /*#__PURE__*/_interopDefaultLegacy(questionIcon);
 var createReactClass__default = /*#__PURE__*/_interopDefaultLegacy(createReactClass);
 var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
 var Pill__default = /*#__PURE__*/_interopDefaultLegacy(Pill);
@@ -294,7 +297,7 @@ class MathInput extends React__namespace.Component {
       className = className + " " + this.props.className;
     }
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.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__namespace.createElement("div", {
       style: {
         display: "flex",
@@ -325,7 +328,7 @@ class MathInput extends React__namespace.Component {
       dismissEnabled: true,
       content: () => /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.PopoverContentCore, {
         closeButtonVisible: true,
-        style: styles$C.popoverContent
+        style: styles$D.popoverContent
       }, /*#__PURE__*/React__namespace.createElement(mathInput.DesktopKeypad, _extends({
         onAnalyticsEvent: this.props.analytics.onAnalyticsEvent,
         extraKeys: this.props.extraKeys,
@@ -365,9 +368,9 @@ const MathInputIcon = _ref => {
       color = Color__default["default"].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__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$C.iconContainer, dynamicClass]
+    style: [styles$D.iconContainer, dynamicClass]
   }, /*#__PURE__*/React__namespace.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
@@ -412,7 +415,7 @@ const inputFocused = {
   borderColor: Color__default["default"].blue,
   margin: -1
 };
-const styles$C = aphrodite.StyleSheet.create({
+const styles$D = aphrodite.StyleSheet.create({
   iconContainer: {
     display: "flex",
     justifyContent: "center",
@@ -17931,33 +17934,33 @@ class Lint extends React__namespace.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__namespace.createElement("a", {
       href: `https://khanacademy.org/r/linter-rules#${this.props.ruleName}`,
       target: "lint-help-window",
       className: aphrodite.css(style)
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      className: aphrodite.css(styles$B.indicator, severityStyle)
+      className: aphrodite.css(styles$C.indicator, severityStyle)
     }, this.props.severity === 1 && /*#__PURE__*/React__namespace.createElement(InlineIcon, exclamationIcon)), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$B.tooltip, tooltipAbove && styles$B.tooltipAbove)
+      className: aphrodite.css(styles$C.tooltip, tooltipAbove && styles$C.tooltipAbove)
     }, this.props.message.split("\n\n").map((m, i) => /*#__PURE__*/React__namespace.createElement("p", {
       key: i,
-      className: aphrodite.css(styles$B.tooltipParagraph)
+      className: aphrodite.css(styles$C.tooltipParagraph)
     }, /*#__PURE__*/React__namespace.createElement("span", {
       className: aphrodite.css(warningTextStyle)
     }, warningText, ":", " "), m)), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$B.tail, tooltipAbove && styles$B.tailAbove)
+      className: aphrodite.css(styles$C.tail, tooltipAbove && styles$C.tailAbove)
     })));
   };
 
@@ -17985,20 +17988,20 @@ class Lint extends React__namespace.Component {
     }
     if (blockHighlight) {
       return /*#__PURE__*/React__namespace.createElement("span", {
-        className: aphrodite.css(styles$B.lintContainer, styles$B.lintContainerBlock)
-      }, this.renderLink(styles$B.radioWidgetHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
+        className: aphrodite.css(styles$C.lintContainer, styles$C.lintContainerBlock)
+      }, this.renderLink(styles$C.radioWidgetHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
     }
     if (inline) {
       return /*#__PURE__*/React__namespace.createElement("span", {
-        className: aphrodite.css(styles$B.lintContainer)
-      }, this.renderLink(styles$B.inlineHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
+        className: aphrodite.css(styles$C.lintContainer)
+      }, this.renderLink(styles$C.inlineHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
     }
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$B.lintContainer)
-    }, this.renderLink(styles$B.hoverTarget), /*#__PURE__*/React__namespace.createElement("div", null, children));
+      className: aphrodite.css(styles$C.lintContainer)
+    }, this.renderLink(styles$C.hoverTarget), /*#__PURE__*/React__namespace.createElement("div", null, children));
   }
 }
-const styles$B = aphrodite.StyleSheet.create({
+const styles$C = aphrodite.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.
@@ -20122,7 +20125,7 @@ class Renderer extends React__namespace.Component {
         };
         const mobileInnerStyle = {
           ...innerStyle,
-          ...styles$A.mobileZoomableParentFix
+          ...styles$B.mobileZoomableParentFix
         };
         return /*#__PURE__*/React__namespace.createElement("div", {
           key: state.key,
@@ -20259,7 +20262,7 @@ class Renderer extends React__namespace.Component {
       };
       const mobileInnerStyle = {
         ...innerStyle,
-        ...styles$A.mobileZoomableParentFix
+        ...styles$B.mobileZoomableParentFix
       };
       const wrappedOutput = /*#__PURE__*/React__namespace.createElement("div", {
         style: {
@@ -20767,7 +20770,7 @@ class Renderer extends React__namespace.Component {
     return this.lastRenderedMarkdown;
   }
 }
-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
@@ -21702,10 +21705,10 @@ class InputNumber extends React__namespace.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__namespace.createElement(InputWithExamples
     // eslint-disable-next-line react/no-string-refs
@@ -21844,7 +21847,7 @@ class InputNumber extends React__namespace.Component {
     return answerString;
   }
 }
-const styles$z = aphrodite.StyleSheet.create({
+const styles$A = aphrodite.StyleSheet.create({
   default: {
     width: 80,
     height: "auto"
@@ -22833,7 +22836,7 @@ const FocusRing = function (props) {
   };
   return /*#__PURE__*/React__namespace.createElement("span", {
     "data-test-id": "focus-ring",
-    className: aphrodite.css(styles$y.ring),
+    className: aphrodite.css(styles$z.ring),
     style: style
   }, children);
 };
@@ -22842,7 +22845,7 @@ FocusRing.defaultProps = {
   color: kaGreen$1,
   multipleSelect: false
 };
-const styles$y = aphrodite.StyleSheet.create({
+const styles$z = aphrodite.StyleSheet.create({
   ring: {
     margin: "auto",
     display: "inline-block",
@@ -22879,7 +22882,7 @@ function getChoiceLetter(pos) {
 }
 
 const CHOICE_ICON_SIZE = 24;
-const styles$x = aphrodite.StyleSheet.create({
+const styles$y = aphrodite.StyleSheet.create({
   iconWrapper: {
     display: "inline-block",
     position: "relative"
@@ -22902,7 +22905,7 @@ const CrossOutLine = function (props) {
     width: CROSS_OUT_LINE_SIZE,
     height: CROSS_OUT_LINE_SIZE,
     viewBox: `0 0 ${CROSS_OUT_LINE_SIZE} ${CROSS_OUT_LINE_SIZE}`,
-    className: aphrodite.css(styles$w.crossOutLine),
+    className: aphrodite.css(styles$x.crossOutLine),
     "data-test-id": "choice-icon__cross-out-line"
   }, /*#__PURE__*/React__namespace.createElement("line", {
     // The line stretches from the bottom-left to top-right.
@@ -22917,7 +22920,7 @@ const CrossOutLine = function (props) {
     strokeLinecap: "round"
   }));
 };
-const styles$w = aphrodite.StyleSheet.create({
+const styles$x = aphrodite.StyleSheet.create({
   crossOutLine: {
     // Center the icon within the container.
     position: "absolute",
@@ -22998,7 +23001,7 @@ const ChoiceIcon = function (props) {
   } = props;
   const dynamicStyles = getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, correct);
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$x.iconWrapper)
+    className: aphrodite.css(styles$y.iconWrapper)
   }, /*#__PURE__*/React__namespace.createElement(FocusRing, {
     color: Color__default["default"].blue,
     visible: focused || hovered,
@@ -23007,13 +23010,13 @@ const ChoiceIcon = function (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: aphrodite.css(styles$v.circle, showCorrectness && correct && styles$v.circleCorrect, showCorrectness && !correct && styles$v.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$v.circleIncorrectAnswered)
+    className: aphrodite.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__namespace.createElement("div", {
-    className: aphrodite.css(styles$v.innerWrapper)
+    className: aphrodite.css(styles$w.innerWrapper)
   }, /*#__PURE__*/React__namespace.createElement(ChoiceInner, {
     pos: pos,
     showCorrectness: showCorrectness,
@@ -23022,7 +23025,7 @@ const ChoiceIcon = function (props) {
     color: dynamicStyles.borderColor
   }));
 };
-const styles$v = aphrodite.StyleSheet.create({
+const styles$w = aphrodite.StyleSheet.create({
   innerWrapper: {
     width: CHOICE_ICON_SIZE,
     height: CHOICE_ICON_SIZE,
@@ -23114,19 +23117,19 @@ const OptionStatus = function (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__namespace.createElement("div", {
-    className: aphrodite.css(styles$u.text, textStyle)
+    className: aphrodite.css(styles$v.text, textStyle)
   }, renderText(checked, correct, crossedOut));
 };
-const styles$u = aphrodite.StyleSheet.create({
+const styles$v = aphrodite.StyleSheet.create({
   text: {
     alignItems: "center",
     display: "flex",
@@ -23200,8 +23203,8 @@ const Choice = function (props) {
       crossedOut: updatedCrossedOut
     });
   }
-  const descriptionClassName = classNames__default["default"]("description", aphrodite.css(styles$t.description));
-  const rationaleClassName = classNames__default["default"]("perseus-radio-rationale-content", aphrodite.css(styles$t.rationale));
+  const descriptionClassName = classNames__default["default"]("description", aphrodite.css(styles$u.description));
+  const rationaleClassName = classNames__default["default"]("perseus-radio-rationale-content", aphrodite.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
@@ -23372,7 +23375,7 @@ const Choice = function (props) {
     "data-test-id": `perseus-radio-rationale-content-${pos}`
   }, rationale));
 };
-const styles$t = aphrodite.StyleSheet.create({
+const styles$u = aphrodite.StyleSheet.create({
   description: {
     display: "inline-block",
     width: "100%"
@@ -23564,10 +23567,10 @@ const BaseRadio = function (props) {
   const isMobile = apiOptions.isMobile;
   const firstChoiceHighlighted = choices[0].highlighted;
   const lastChoiceHighlighted = choices[choices.length - 1].highlighted;
-  const className = classNames__default["default"]("perseus-widget-radio", !editMode && "perseus-rendered-radio", aphrodite.css(styles$s.radio, styles$s.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$s.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$s.radioContainerLastHighlighted));
-  const instructionsClassName = classNames__default["default"]("instructions", aphrodite.css(styles$s.instructions, isMobile && styles$s.instructionsMobile));
+  const className = classNames__default["default"]("perseus-widget-radio", !editMode && "perseus-rendered-radio", aphrodite.css(styles$t.radio, styles$t.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$t.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$t.radioContainerLastHighlighted));
+  const instructionsClassName = classNames__default["default"]("instructions", aphrodite.css(styles$t.instructions, isMobile && styles$t.instructionsMobile));
   const instructions = getInstructionsText(multipleSelect, countChoices, numCorrect);
-  const responsiveClassName = aphrodite.css(styles$s.responsiveFieldset);
+  const responsiveClassName = aphrodite.css(styles$t.responsiveFieldset);
   const fieldset = /*#__PURE__*/React__namespace.createElement("fieldset", {
     className: `perseus-widget-radio-fieldset ${responsiveClassName}`
   }, /*#__PURE__*/React__namespace.createElement("legend", {
@@ -23618,7 +23621,7 @@ const BaseRadio = function (props) {
     const aphroditeClassName = checked => {
       // Whether or not to show correctness borders
       // for this choice and the next choice.
-      return aphrodite.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 aphrodite.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
@@ -23692,14 +23695,14 @@ const BaseRadio = function (props) {
   // Allow for horizontal scrolling if content is too wide, which may be
   // an issue especially on phones.
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$s.responsiveContainer)
+    className: aphrodite.css(styles$t.responsiveContainer)
   }, fieldset);
 };
 BaseRadio.defaultProps = {
   editMode: false,
   multipleSelect: false
 };
-const styles$s = aphrodite.StyleSheet.create({
+const styles$t = aphrodite.StyleSheet.create({
   instructions: {
     display: "block",
     color: gray17,
@@ -24358,9 +24361,9 @@ class Categorizer extends React__namespace.Component {
       indexedItems = Util.shuffle(indexedItems, this.props.problemNum);
     }
     const table = /*#__PURE__*/React__namespace.createElement("table", {
-      className: "categorizer-table " + aphrodite.css(styles$r.mobileTable)
+      className: "categorizer-table " + aphrodite.css(styles$s.mobileTable)
     }, /*#__PURE__*/React__namespace.createElement("thead", null, /*#__PURE__*/React__namespace.createElement("tr", null, /*#__PURE__*/React__namespace.createElement("td", {
-      className: aphrodite.css(styles$r.emptyHeaderCell)
+      className: aphrodite.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
@@ -24368,7 +24371,7 @@ class Categorizer extends React__namespace.Component {
       // middle. (If we later add that, this should be
       // fixed.)
       return /*#__PURE__*/React__namespace.createElement("th", {
-        className: aphrodite.css(styles$r.header),
+        className: aphrodite.css(styles$s.header),
         key: i
       }, /*#__PURE__*/React__namespace.createElement(Renderer, {
         content: category,
@@ -24388,7 +24391,7 @@ class Categorizer extends React__namespace.Component {
       })), self.props.categories.map((catName, catNum) => {
         const selected = self.props.values[itemNum] === catNum;
         return /*#__PURE__*/React__namespace.createElement("td", {
-          className: "category " + aphrodite.css(styles$r.cell),
+          className: "category " + aphrodite.css(styles$s.cell),
           key: catNum
         }, /*#__PURE__*/React__namespace.createElement("div", {
           className: ClassNames.INTERACTIVE,
@@ -24403,7 +24406,7 @@ class Categorizer extends React__namespace.Component {
           onChange: () => this.onChange(itemNum, catNum),
           onClick: e => e.stopPropagation()
         }), !isMobile && /*#__PURE__*/React__namespace.createElement("span", {
-          className: aphrodite.css(styles$r.radioSpan, selected && styles$r.checkedRadioSpan, this.props.static && selected && styles$r.staticCheckedRadioSpan)
+          className: aphrodite.css(styles$s.radioSpan, selected && styles$s.checkedRadioSpan, this.props.static && selected && styles$s.staticCheckedRadioSpan)
         }, selected ? /*#__PURE__*/React__namespace.createElement(InlineIcon, iconCircle) : /*#__PURE__*/React__namespace.createElement(InlineIcon, iconCircleThin))));
       }));
       /* eslint-enable max-len */
@@ -24415,7 +24418,7 @@ class Categorizer extends React__namespace.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__namespace.createElement("div", {
       className: extraClassNames + " " + aphrodite.css(...inlineStyles)
     }, table);
@@ -24464,7 +24467,7 @@ const pageMargin = 16;
 
 // Stylesheets aren't directly testable
 /* c8 ignore next */
-const styles$r = aphrodite.StyleSheet.create({
+const styles$s = aphrodite.StyleSheet.create({
   mobileTable: {
     [mediaQueries.smOrSmaller]: {
       minWidth: "auto"
@@ -24727,7 +24730,7 @@ class CSProgram extends React__namespace.Component {
     //  creator "went wild".
     // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$q.widthOverride, styleContainer && styles$q.container)
+      className: aphrodite.css(styles$r.widthOverride, styleContainer && styles$r.container)
     }, /*#__PURE__*/React__namespace.createElement("iframe", {
       sandbox: sandboxOptions,
       src: url,
@@ -24737,7 +24740,7 @@ class CSProgram extends React__namespace.Component {
     }));
   }
 }
-const styles$q = aphrodite.StyleSheet.create({
+const styles$r = aphrodite.StyleSheet.create({
   // Override the inherited width from the perseus paragraph class
   // 820 is minimum width for 420px editor and 400px canvas
   widthOverride: {
@@ -24785,7 +24788,7 @@ class Definition extends React__namespace.Component {
       return /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.Popover, {
         content: /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.PopoverContentCore, {
           color: "white",
-          style: styles$p.tooltipBody,
+          style: styles$q.tooltipBody,
           closeButtonVisible: true
         }, /*#__PURE__*/React__namespace.createElement(Renderer, {
           apiOptions: this.props.apiOptions,
@@ -24816,7 +24819,7 @@ class Definition extends React__namespace.Component {
     });
   }
 }
-const styles$p = {
+const styles$q = {
   tooltipBody: {
     color: Color__default["default"].offBlack,
     fontSize: 20,
@@ -25017,15 +25020,15 @@ class Explanation extends React__namespace.Component {
     const onClick = this._onClick;
     if (isMobile) {
       promptContainer = /*#__PURE__*/React__namespace.createElement("div", {
-        className: aphrodite.css(styles$o.linkContainer)
+        className: aphrodite.css(styles$p.linkContainer)
       }, /*#__PURE__*/React__namespace.createElement("a", {
-        className: aphrodite.css(styles$o.mobileExplanationLink),
+        className: aphrodite.css(styles$p.mobileExplanationLink),
         href: href,
         onClick: onClick,
         role: "button",
         "aria-expanded": this.state.expanded
       }, promptText), this.state.expanded && /*#__PURE__*/React__namespace.createElement("svg", {
-        className: aphrodite.css(styles$o.disclosureArrow)
+        className: aphrodite.css(styles$p.disclosureArrow)
       }, /*#__PURE__*/React__namespace.createElement("polygon", {
         style: {
           fill: backgroundColor
@@ -25033,7 +25036,7 @@ class Explanation extends React__namespace.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__namespace.createElement(Clickable__default["default"], {
         onClick: onClick,
         "aria-expanded": this.state.expanded
@@ -25041,11 +25044,11 @@ class Explanation extends React__namespace.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__namespace.createElement("div", {
-      className: aphrodite.css(styles$o.container)
+      className: aphrodite.css(styles$p.container)
     }, promptContainer, this.state.expanded && /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$o.content, isMobile && styles$o.contentMobile, this.state.expanded && expandedStyle)
+      className: aphrodite.css(styles$p.content, isMobile && styles$p.contentMobile, this.state.expanded && expandedStyle)
       // eslint-disable-next-line react/no-string-refs
       ,
       ref: "content"
@@ -25068,7 +25071,7 @@ const verticalContentPadding = 10;
 const arrowWidth = 30;
 const arrowHeight = 14;
 const backgroundColor = gray95;
-const styles$o = aphrodite.StyleSheet.create({
+const styles$p = aphrodite.StyleSheet.create({
   container: {
     display: "inline",
     position: "relative"
@@ -25174,15 +25177,15 @@ class GradedGroupAnswerBar extends React__namespace.Component {
       onNextQuestion
     } = this.props;
     const answerBarStyle = {
-      ...styles$n.answerBar,
+      ...styles$o.answerBar,
       backgroundColor: answerBarState === "CORRECT" ? Color__default["default"].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__namespace.createElement("span", {
-      style: styles$n.text
+      style: styles$o.text
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$n.tryAgainIcon
+      style: styles$o.tryAgainIcon
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon, iconTryAgain)), /*#__PURE__*/React__namespace.createElement("span", {
       style: {
         marginLeft: 8
@@ -25201,7 +25204,7 @@ class GradedGroupAnswerBar extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement("div", {
       style: answerBarStyle
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$n.text
+      style: styles$o.text
     }, /*#__PURE__*/React__namespace.createElement("span", {
       style: {
         fontSize: 28,
@@ -25223,7 +25226,7 @@ class GradedGroupAnswerBar extends React__namespace.Component {
   }
 }
 const fontSize = 17;
-const styles$n = {
+const styles$o = {
   answerBar: {
     display: "flex",
     alignItems: "center",
@@ -25423,7 +25426,7 @@ class GradedGroup extends React__namespace.Component {
       // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
       gradeStatus = i18n__namespace._("Incorrect");
     }
-    const mobileClass = this.props.inGradedGroupSet ? aphrodite.css(styles$m.gradedGroupInSet) : aphrodite.css(styles$m.gradedGroup);
+    const mobileClass = this.props.inGradedGroupSet ? aphrodite.css(styles$n.gradedGroupInSet) : aphrodite.css(styles$n.gradedGroup);
     const classes = classNames__default["default"]({
       [mobileClass]: apiOptions.isMobile,
       "perseus-graded-group": true,
@@ -25442,7 +25445,7 @@ class GradedGroup extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: classes
     }, !!this.props.title && /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$m.title)
+      className: aphrodite.css(styles$n.title)
     }, this.props.title), /*#__PURE__*/React__namespace.createElement(Renderer, _extends({}, this.props, {
       // eslint-disable-next-line react/no-string-refs
       ref: "renderer",
@@ -25475,7 +25478,7 @@ class GradedGroup extends React__namespace.Component {
     }, i18n__namespace._("Next question")), this.props.hint && this.props.hint.content && (this.state.showHint ? /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("button", {
       // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
       tabIndex: "0",
-      className: aphrodite.css(styles$m.explanationTitle),
+      className: aphrodite.css(styles$n.explanationTitle),
       onClick: () => this.setState({
         showHint: false
       }),
@@ -25507,7 +25510,7 @@ class GradedGroup extends React__namespace.Component {
           showHint: true
         });
       },
-      className: aphrodite.css(styles$m.showHintLink)
+      className: aphrodite.css(styles$n.showHintLink)
     }, i18n__namespace._("Explain"))), apiOptions.isMobile && answerBarState !== "HIDDEN" && /*#__PURE__*/React__namespace.createElement(GradedGroupAnswerBar, {
       apiOptions: apiOptions,
       answerBarState: answerBarState,
@@ -25519,7 +25522,7 @@ class GradedGroup extends React__namespace.Component {
 const traverseChildWidgets$2 = function (props, traverseRenderer) {
   return ___default["default"].extend({}, props, traverseRenderer(props));
 };
-const styles$m = aphrodite.StyleSheet.create({
+const styles$n = aphrodite.StyleSheet.create({
   gradedGroupInSet: {
     // Reset a few desktop-only styles that come from graded-group.less
     marginLeft: 0,
@@ -25589,20 +25592,20 @@ class Indicators extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement("ul", {
       // reduntantly add class name for use in .less files--
       //   the styles object key gets hashed
-      className: classNames__default["default"](aphrodite.css(styles$l.indicatorContainer), "indicatorContainer")
+      className: classNames__default["default"](aphrodite.css(styles$m.indicatorContainer), "indicatorContainer")
     }, this.props.gradedGroups.map((_ref, i) => {
       let {
         title
       } = _ref;
       return /*#__PURE__*/React__namespace.createElement("li", {
-        className: aphrodite.css(styles$l.indicator),
+        className: aphrodite.css(styles$m.indicator),
         key: title
       }, /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
         role: "button",
         "aria-label": i18n__namespace._("Skip to %(title)s", {
           title
         }),
-        style: styles$l.indicatorButton,
+        style: styles$m.indicatorButton,
         onClick: () => this.props.onChangeCurrentGroup(i),
         onKeyDown: e => this.handleKeyDown(e, i)
       }, _ref2 => {
@@ -25612,9 +25615,9 @@ class Indicators extends React__namespace.Component {
           pressed
         } = _ref2;
         return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.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__namespace.createElement(wonderBlocksCore.View, {
-          style: styles$l.indicatorDotActive
+          style: styles$m.indicatorDotActive
         }, /*#__PURE__*/React__namespace.createElement("span", {
           className: aphrodite.css(a11y.srOnly)
         }, i18n__namespace._("Current"))));
@@ -25690,7 +25693,7 @@ class GradedGroupSet extends React__namespace.Component {
     } = getDependencies();
     if (JIPT.useJIPT && this.props.gradedGroups.length > 1) {
       return /*#__PURE__*/React__namespace.createElement("div", {
-        className: aphrodite.css(styles$l.container)
+        className: aphrodite.css(styles$m.container)
       }, this.props.gradedGroups.map((gradedGroup, i) => {
         return (
           /*#__PURE__*/
@@ -25713,13 +25716,13 @@ class GradedGroupSet extends React__namespace.Component {
     const numGroups = this.props.gradedGroups.length;
     const handleNextQuestion = this.state.currentGroup < numGroups - 1 ? this.handleNextQuestion : null;
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$l.container)
+      className: aphrodite.css(styles$m.container)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$l.top)
+      className: aphrodite.css(styles$m.top)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$l.title)
+      className: aphrodite.css(styles$m.title)
     }, currentGroup.title), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$l.spacer)
+      className: aphrodite.css(styles$m.spacer)
     }), /*#__PURE__*/React__namespace.createElement(Indicators, {
       currentGroup: this.state.currentGroup,
       gradedGroups: this.props.gradedGroups,
@@ -25757,7 +25760,7 @@ var GradedGroupSet$1 = {
   tracking: "all",
   isLintable: true
 };
-const styles$l = aphrodite.StyleSheet.create({
+const styles$m = aphrodite.StyleSheet.create({
   top: {
     display: "flex",
     flexDirection: "row"
@@ -25862,7 +25865,7 @@ class ButtonGroup extends React__namespace.Component {
         id: "" + i,
         ref: "button" + i,
         key: "" + i,
-        className: aphrodite.css(styles$k.buttonStyle, button.value === value && styles$k.selectedStyle),
+        className: aphrodite.css(styles$l.buttonStyle, button.value === value && styles$l.selectedStyle),
         onClick: () => this.toggleSelect(button.value)
       }, button.content || "" + button.value);
     });
@@ -25875,7 +25878,7 @@ class ButtonGroup extends React__namespace.Component {
     }, buttons);
   }
 }
-const styles$k = aphrodite.StyleSheet.create({
+const styles$l = aphrodite.StyleSheet.create({
   buttonStyle: {
     backgroundColor: "white",
     border: "1px solid #ccc",
@@ -28394,18 +28397,51 @@ const SegmentGraph = props => {
   })));
 };
 const SegmentView = props => {
-  const [pt1, pt2] = props.segment;
+  const {
+    onMoveSegment,
+    segment: [pt1, pt2]
+  } = props;
   const midpoint = mafs.vec.midpoint(pt1, pt2);
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(mafs.Line.Segment, {
-    point1: pt1,
-    point2: pt2
-  }), /*#__PURE__*/React__namespace.createElement(mafs.MovablePoint, {
+  const segment = React.useRef(null);
+  const {
+    dragging: isDraggingSegment
+  } = mafs.useMovable({
+    gestureTarget: segment,
     point: midpoint,
-    color: Color__default["default"].blue,
     onMove: newPoint => {
-      props.onMoveSegment(mafs.vec.sub(newPoint, midpoint));
+      onMoveSegment(mafs.vec.sub(newPoint, midpoint));
+    },
+    constrain: p => p
+  });
+  const {
+    viewTransform,
+    userTransform
+  } = mafs.useTransformContext();
+  const transform = mafs.vec.matrixMult(viewTransform, userTransform);
+  const scaledPoint1 = mafs.vec.transform(pt1, transform);
+  const scaledPoint2 = mafs.vec.transform(pt2, transform);
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("g", {
+    ref: segment,
+    tabIndex: 0,
+    className: "movable-segment",
+    style: {
+      cursor: isDraggingSegment ? "grabbing" : "grab"
     }
-  }), /*#__PURE__*/React__namespace.createElement(mafs.MovablePoint, {
+  }, /*#__PURE__*/React__namespace.createElement(SVGLine, {
+    start: scaledPoint1,
+    end: scaledPoint2,
+    style: {
+      stroke: "transparent",
+      strokeWidth: 30
+    }
+  }), /*#__PURE__*/React__namespace.createElement(SVGLine, {
+    start: scaledPoint1,
+    end: scaledPoint2,
+    style: {
+      stroke: "var(--mafs-segment-stroke-color)",
+      strokeWidth: "var(--mafs-segment-stroke-weight)"
+    }
+  })), /*#__PURE__*/React__namespace.createElement(mafs.MovablePoint, {
     point: pt1,
     color: Color__default["default"].blue,
     onMove: newPoint => {
@@ -28419,6 +28455,20 @@ const SegmentView = props => {
     }
   }));
 };
+function SVGLine(props) {
+  const {
+    start,
+    end,
+    style
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement("line", {
+    x1: start[0],
+    y1: start[1],
+    x2: end[0],
+    y2: end[1],
+    style: style
+  });
+}
 
 const renderLineLabel = (n, _ref) => {
   let [min, max] = _ref;
@@ -28596,7 +28646,7 @@ const VisibleIcon = () => /*#__PURE__*/React__namespace.createElement("svg", {
   width: "24",
   height: "24",
   viewBox: "0 0 24 24",
-  className: aphrodite.css(styles$j.icon)
+  className: aphrodite.css(styles$k.icon)
 }, /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.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"
@@ -28627,7 +28677,7 @@ const HiddenIcon = () => /*#__PURE__*/React__namespace.createElement("svg", {
   width: "24",
   height: "24",
   viewBox: "0 0 24 24",
-  className: aphrodite.css(styles$j.icon)
+  className: aphrodite.css(styles$k.icon)
 }, /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.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"
@@ -28662,20 +28712,20 @@ const HUD = _ref => {
   let state;
   let icon;
   if (enabled) {
-    state = styles$j.enabled;
+    state = styles$k.enabled;
     icon = /*#__PURE__*/React__namespace.createElement(VisibleIcon, null);
   } else {
-    state = styles$j.disabled;
+    state = styles$k.disabled;
     icon = /*#__PURE__*/React__namespace.createElement(HiddenIcon, null);
   }
   return /*#__PURE__*/React__namespace.createElement("button", {
-    className: aphrodite.css(styles$j.hud, fixedPosition && styles$j.hudFixedPosition, state),
+    className: aphrodite.css(styles$k.hud, fixedPosition && styles$k.hudFixedPosition, state),
     onClick: e => {
       onClick();
     }
   }, icon, message);
 };
-const styles$j = aphrodite.StyleSheet.create({
+const styles$k = aphrodite.StyleSheet.create({
   hud: {
     boxSizing: "border-box",
     height: 36,
@@ -28739,7 +28789,7 @@ const triangleBeforeAfter = {
   top: "0",
   width: "0"
 };
-const styles$i = aphrodite.StyleSheet.create({
+const styles$j = aphrodite.StyleSheet.create({
   infoTip: {
     display: "inline-block",
     marginLeft: "5px",
@@ -28780,7 +28830,6 @@ const styles$i = aphrodite.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__namespace.Component {
   state = {
     hover: false
@@ -28797,23 +28846,22 @@ class InfoTip$1 extends React__namespace.Component {
   };
   render() {
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$i.infoTip)
-    }, /*#__PURE__*/React__namespace.createElement("img", {
-      alt: "",
-      width: 10,
-      height: 10,
-      src: questionMark,
+      className: aphrodite.css(styles$j.infoTip)
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       onMouseEnter: this.handleMouseEnter,
       onMouseLeave: this.handleMouseLeave
-    }), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$i.infoTipContainer),
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
+      size: "small",
+      icon: questionIcon__default["default"]
+    })), /*#__PURE__*/React__namespace.createElement("div", {
+      className: aphrodite.css(styles$j.infoTipContainer),
       style: {
         display: this.state.hover ? "block" : "none"
       }
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$i.infoTipTriangle)
+      className: aphrodite.css(styles$j.infoTipTriangle)
     }), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$i.verticalShadow, styles$i.infoTipContentContainer)
+      className: aphrodite.css(styles$j.verticalShadow, styles$j.infoTipContentContainer)
     }, this.props.children)));
   }
 }
@@ -28885,7 +28933,7 @@ class MultiButtonGroup extends React__namespace.Component {
         id: "" + i,
         key: "" + i,
         ref: "button" + i,
-        className: aphrodite.css(styles$h.buttonStyle, selected && styles$h.selectedStyle),
+        className: aphrodite.css(styles$i.buttonStyle, selected && styles$i.selectedStyle),
         onClick: () => this.toggleSelect(button.value)
       }, button.content || "" + button.value);
     });
@@ -28897,7 +28945,7 @@ class MultiButtonGroup extends React__namespace.Component {
     }, buttons);
   }
 }
-const styles$h = aphrodite.StyleSheet.create({
+const styles$i = aphrodite.StyleSheet.create({
   buttonStyle: {
     backgroundColor: "white",
     border: "1px solid #ccc",
@@ -29162,11 +29210,12 @@ const PropCheckBox = createReactClass__default["default"]({
   },
   render: function () {
     const propName = this.propName();
-    return /*#__PURE__*/React__namespace.createElement("label", null, this._labelAlignLeft() && this.props.label, /*#__PURE__*/React__namespace.createElement("input", {
-      type: "checkbox",
+    return /*#__PURE__*/React__namespace.createElement("label", {
+      className: aphrodite.css(styles$h.labeledCheckbox)
+    }, this._labelAlignLeft() && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, null, this.props.label), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       checked: this.props[propName],
       onChange: this.toggle
-    }), !this._labelAlignLeft() && this.props.label);
+    }), !this._labelAlignLeft() && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, null, this.props.label));
   },
   toggle: function () {
     const propName = this.propName();
@@ -29175,6 +29224,13 @@ const PropCheckBox = createReactClass__default["default"]({
     this.props.onChange(changes);
   }
 });
+const styles$h = aphrodite.StyleSheet.create({
+  labeledCheckbox: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  }
+});
 
 const truth = () => true;
 
@@ -41311,7 +41367,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "20.0.2";
+const libVersion = "20.1.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {